/* ================================================================
 * Hidplanet — Design Window 038 — Product Card SYSTEM (5 directions)
 *
 * Scope: body.hp-sysv-1 / body.hp-sysv-2 / body.hp-sysv-3 / body.hp-sysv-4 / body.hp-sysv-5
 * Inert unless one of the five body classes is present.
 *
 * Applies to .hp-product-card in BOTH:
 *   - .hp-product-grid.list_product    (JoomShopping category grid)
 *   - .hp-home-featured-grid           (homepage "Рекомендуемые товары")
 *
 * Two DOM shapes are handled per variant:
 *   Category card DOM:
 *     .hp-product-card
 *       > a.hp-product-card__image-wrap > img
 *       > .hp-product-card__body
 *           > a > h3.hp-product-card__title
 *           > .hp-product-card__footer
 *               > .hp-product-card__meta-row
 *                   > .hp-product-card__stock > span.hp-stock-badge
 *                   > .hp-product-card__price-block > span.hp-product-card__price
 *               > a.hp-btn.addtocart  (text "В корзину")
 *
 *   Homepage featured card DOM:
 *     .hp-product-card
 *       > a.hp-product-card__image-wrap > img
 *       > .hp-product-card__body
 *           > a > h3.hp-product-card__title
 *           > .hp-product-card__stock > span.hp-stock-badge
 *           > .hp-product-card__footer
 *               > .flex.flex-col > span.hp-product-card__price
 *               > a.hp-btn.hp-btn--sm  (text "Подробнее")
 *
 * NOTE: The two DOMs currently produce DIFFERENT VISUAL LAYOUTS on baseline —
 * this is the "stair-step" problem the owner flagged. Each variant below
 * restyles both DOMs so they yield the SAME visual card.
 * ================================================================ */


/* ============ 0. Shared unification base (all 5 variants) ========== */

body.hp-sysv-1, body.hp-sysv-2, body.hp-sysv-3, body.hp-sysv-4, body.hp-sysv-5 {
    --hp-c-ink:      #24201b;
    --hp-c-body:     #3a332a;
    --hp-c-muted:    #736555;
    --hp-c-line:     #e9ddc4;
    --hp-c-line-2:   #efe4ce;
    --hp-c-card:     #fdfaf3;
    --hp-c-well:     #fbf5e6;
    --hp-c-well-2:   #f5ead0;
    --hp-c-primary:  #c45619;
    --hp-c-primary-2:#b04c12;
    --hp-c-ok:       #2f7d32;
    --hp-c-ok-soft:  #e6f0dd;
}

/* Unify DOM differences: normalize stock+footer for both DOMs. */
body[class*="hp-sysv-"] .hp-product-card {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}
body[class*="hp-sysv-"] .hp-product-card__body {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
/* Hide baseline placeholder + tax note across all 5 variants */
body[class*="hp-sysv-"] .hp-product-card .no_image,
body[class*="hp-sysv-"] .hp-product-card__tax { display: none !important; }

/* Title alignment: fixed clamp height so rows with mixed titles align */
body[class*="hp-sysv-"] .hp-product-card__title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    text-wrap: pretty;
}

/* Footer always sticks to card bottom (row-alignment for mixed titles) */
body[class*="hp-sysv-"] .hp-product-card__footer {
    margin-top: auto !important;
}


/* =================================================================
 * VARIANT 1 — PREMIUM CATALOGUE CARD
 * Composition: NO card border; the card is defined by a warm ivory
 * plate + soft inner shadow. Photo is on a subtle warm plate.
 * Title zone fixed to 2-line clamp with tight leading. A single
 * hairline warm rule below the title. Below the rule: price
 * dominates left, a small "точка+В наличии" (dot+label) sits on
 * the same baseline right. CTA is a TEXT LINK "Подробнее →"
 * pinned to the far right of a compact bottom bar. NO BUTTON CHROME.
 * Composition rhythm: photo → hairline → single row → hairline →
 * link. This is editorial catalogue, not e-commerce dashboard.
 * ================================================================= */

body.hp-sysv-1 .hp-product-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-bottom: 4px;
    transition: transform 200ms ease;
}
body.hp-sysv-1 .hp-product-card:hover {
    transform: translateY(-1px);
}

body.hp-sysv-1 .hp-product-card__image-wrap {
    aspect-ratio: 5 / 4 !important;
    background: linear-gradient(180deg, #fbf5e6 0%, #f4ead0 100%) !important;
    border: none !important;
    box-shadow: inset 0 0 0 1px #ece2ca, inset 0 -18px 24px -22px rgba(45,36,22,0.10);
}
body.hp-sysv-1 .hp-product-card__image {
    padding: 22px !important;
    object-fit: contain !important;
    transition: transform 300ms ease;
}
body.hp-sysv-1 .hp-product-card:hover .hp-product-card__image {
    transform: scale(1.03);
}

body.hp-sysv-1 .hp-product-card__body {
    padding: 14px 4px 6px !important;
    gap: 0 !important;
}

body.hp-sysv-1 .hp-product-card__title {
    font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    color: var(--hp-c-ink) !important;
    margin: 0 !important;
    min-height: 2.7em !important;
    letter-spacing: -0.005em;
}

/* Hairline below title */
body.hp-sysv-1 .hp-product-card__body > a + .hp-product-card__footer,
body.hp-sysv-1 .hp-product-card__body > a + .hp-product-card__stock,
body.hp-sysv-1 .hp-product-card__body > .hp-product-card__stock,
body.hp-sysv-1 .hp-product-card__body > .hp-product-card__footer {
    border-top: 1px solid var(--hp-c-line);
    padding-top: 10px !important;
    margin-top: 10px !important;
}

/* Stock: dot + label, no chip. Handles both DOMs. */
body.hp-sysv-1 .hp-product-card__stock { padding: 0 !important; margin-top: 0 !important; }
body.hp-sysv-1 .hp-stock-badge,
body.hp-sysv-1 .hp-stock-badge--in {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: var(--hp-c-muted) !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
    text-transform: none !important;
}
body.hp-sysv-1 .hp-stock-badge::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--hp-c-ok);
    box-shadow: 0 0 0 3px rgba(47,125,50,0.14);
    display: inline-block;
}

/* Footer: split row — price left large, "Подробнее →" text link right. */
body.hp-sysv-1 .hp-product-card__footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 12px;
    padding-top: 0 !important;
    border-top: none !important;
    background: transparent !important;
}
body.hp-sysv-1 .hp-product-card__meta-row {
    display: contents !important;
}
body.hp-sysv-1 .hp-product-card__price-block,
body.hp-sysv-1 .hp-product-card__footer > .flex.flex-col {
    padding: 0 !important;
    display: block !important;
}
body.hp-sysv-1 .hp-product-card__price {
    font-family: Georgia, serif;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    color: var(--hp-c-ink) !important;
    letter-spacing: -0.01em;
    line-height: 1;
}

/* Move meta-row's stock to sit before the price row visually */
body.hp-sysv-1 .hp-product-card__meta-row .hp-product-card__stock {
    order: 0;
}

/* CTA: text link, no button chrome */
body.hp-sysv-1 .hp-product-card .hp-btn,
body.hp-sysv-1 .hp-product-card .addtocart {
    background: transparent !important;
    color: var(--hp-c-primary) !important;
    border: none !important;
    border-radius: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    text-transform: none !important;
    display: inline-flex !important;
    align-items: baseline;
    gap: 6px;
    width: auto !important;
    flex: 0 0 auto !important;
    text-decoration: none;
    position: relative;
}
body.hp-sysv-1 .hp-product-card .hp-btn::after,
body.hp-sysv-1 .hp-product-card .addtocart::after {
    content: " →";
    display: inline-block;
    transition: transform 200ms ease;
}
body.hp-sysv-1 .hp-product-card .hp-btn:hover::after,
body.hp-sysv-1 .hp-product-card .addtocart:hover::after {
    transform: translateX(3px);
}
body.hp-sysv-1 .hp-product-card .hp-btn svg,
body.hp-sysv-1 .hp-product-card .addtocart svg { display: none !important; }

@media (max-width: 640px) {
    body.hp-sysv-1 .hp-product-card__title { font-size: 0.86rem !important; }
    body.hp-sysv-1 .hp-product-card__price { font-size: 1.1rem !important; }
    body.hp-sysv-1 .hp-product-card__image { padding: 14px !important; }
}


/* =================================================================
 * VARIANT 2 — TECHNICAL WORKSHOP CARD
 * Composition: A workshop instrument card. Top strip is a compact
 * monospace meta row (SKU-style ref + green connectivity dot).
 * Photo on a blueprint-style light grid backdrop. Below the photo:
 * a real spec TABLE — two label:value rows ("Наличие" | "Цена")
 * with a right-aligned value column. CTA is an OUTLINE button
 * "Подробнее" that fills with primary color on hover.
 * Composition rhythm: header-strip → photo → 2-row table → CTA.
 * ================================================================= */

body.hp-sysv-2 .hp-product-card {
    background: #fefaf0 !important;
    border: 1px solid #e2d5b7 !important;
    border-radius: 6px !important;
    padding: 0 !important;
    box-shadow: 0 1px 2px rgba(45,36,22,0.04);
}
body.hp-sysv-2 .hp-product-card:hover {
    border-color: color-mix(in oklab, var(--hp-c-primary) 55%, var(--hp-c-line));
    box-shadow: 0 8px 20px -12px rgba(196,86,25,0.30);
}

/* Header strip via ::before on the card, using product's itemtype URL as SKU-ish label */
body.hp-sysv-2 .hp-product-card__image-wrap {
    aspect-ratio: 4 / 3 !important;
    background:
        linear-gradient(#fdf7e6, #fdf7e6),
        repeating-linear-gradient(0deg, #f0e6d0 0 1px, transparent 1px 22px),
        repeating-linear-gradient(90deg, #f0e6d0 0 1px, transparent 1px 22px) !important;
    background-blend-mode: multiply;
    border: none !important;
    border-bottom: 1px solid #e2d5b7 !important;
    margin-top: 26px !important;
    position: relative;
}
body.hp-sysv-2 .hp-product-card {
    position: relative;
}
body.hp-sysv-2 .hp-product-card::before {
    content: "TECHNICAL SPEC";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: #8a7a5a;
    background: #f7edd3;
    border-bottom: 1px dashed #d9c9a3;
    z-index: 1;
}
body.hp-sysv-2 .hp-product-card::after {
    content: "";
    position: absolute;
    top: 9px; right: 12px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--hp-c-ok);
    box-shadow: 0 0 0 3px rgba(47,125,50,0.20);
    z-index: 2;
}

body.hp-sysv-2 .hp-product-card__image {
    padding: 18px !important;
    object-fit: contain !important;
    filter: contrast(1.02);
}

body.hp-sysv-2 .hp-product-card__body {
    padding: 12px 12px 12px !important;
    gap: 0 !important;
}

body.hp-sysv-2 .hp-product-card__title {
    font-size: 0.83rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--hp-c-ink) !important;
    margin: 0 0 10px 0 !important;
    min-height: 2.3em !important;
    letter-spacing: -0.005em;
}

/* Convert stock + price into a 2-row spec table. */
body.hp-sysv-2 .hp-product-card__stock,
body.hp-sysv-2 .hp-product-card__meta-row {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}
body.hp-sysv-2 .hp-stock-badge,
body.hp-sysv-2 .hp-stock-badge--in {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    padding: 6px 10px !important;
    font-family: ui-monospace, "SF Mono", "Menlo", monospace;
    font-size: 0.72rem !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hp-c-body) !important;
    background: #f9f0d8 !important;
    border: 1px solid #e5d6b0 !important;
    border-radius: 4px !important;
    height: auto !important;
}
body.hp-sysv-2 .hp-stock-badge::before,
body.hp-sysv-2 .hp-stock-badge--in::before {
    content: "НАЛИЧИЕ" / "";
    font-size: 0.65rem;
    color: var(--hp-c-muted);
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-right: auto;
    text-transform: uppercase;
}
body.hp-sysv-2 .hp-stock-badge {
    position: relative;
}
body.hp-sysv-2 .hp-stock-badge::after {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--hp-c-ok);
    margin-left: 8px;
    box-shadow: 0 0 0 3px rgba(47,125,50,0.16);
}

body.hp-sysv-2 .hp-product-card__price-block,
body.hp-sysv-2 .hp-product-card__footer > .flex.flex-col {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center;
    padding: 6px 10px !important;
    font-family: ui-monospace, "SF Mono", monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hp-c-body);
    background: #f9f0d8;
    border: 1px solid #e5d6b0;
    border-top: none;
    border-radius: 0 0 4px 4px;
    margin-top: 0 !important;
}
body.hp-sysv-2 .hp-product-card__price-block::before,
body.hp-sysv-2 .hp-product-card__footer > .flex.flex-col::before {
    content: "ЦЕНА";
    font-size: 0.65rem;
    color: var(--hp-c-muted);
    letter-spacing: 0.08em;
    font-weight: 500;
}
body.hp-sysv-2 .hp-product-card__price {
    font-family: ui-monospace, "SF Mono", monospace !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--hp-c-ink) !important;
    letter-spacing: 0.01em;
}

/* Stock badge in single spec-table needs corner rounding to match */
body.hp-sysv-2 .hp-stock-badge,
body.hp-sysv-2 .hp-stock-badge--in {
    border-radius: 4px 4px 0 0 !important;
    border-bottom: none !important;
}
body.hp-sysv-2 .hp-product-card__stock { margin-bottom: 0 !important; }

/* Footer wraps CTA below the spec table */
body.hp-sysv-2 .hp-product-card__footer {
    display: block !important;
    padding: 12px 0 0 !important;
    background: transparent !important;
    border-top: none !important;
    margin-top: auto !important;
}
body.hp-sysv-2 .hp-product-card__meta-row {
    display: block !important;
}
body.hp-sysv-2 .hp-product-card .hp-btn,
body.hp-sysv-2 .hp-product-card .addtocart {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    color: var(--hp-c-primary) !important;
    border: 1.5px solid var(--hp-c-primary) !important;
    border-radius: 4px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    font-family: ui-monospace, "SF Mono", monospace !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase !important;
    box-shadow: none !important;
    margin-top: 10px !important;
    text-align: center;
    line-height: 34px;
}
body.hp-sysv-2 .hp-product-card .hp-btn:hover,
body.hp-sysv-2 .hp-product-card .addtocart:hover {
    background: var(--hp-c-primary) !important;
    color: #fff !important;
}
body.hp-sysv-2 .hp-product-card .hp-btn svg,
body.hp-sysv-2 .hp-product-card .addtocart svg { display: none !important; }

@media (max-width: 640px) {
    body.hp-sysv-2 .hp-product-card__title { font-size: 0.78rem !important; }
    body.hp-sysv-2 .hp-product-card__image { padding: 12px !important; }
    body.hp-sysv-2 .hp-product-card .hp-btn { height: 34px !important; min-height: 34px !important; line-height: 30px; font-size: 0.72rem !important; }
    body.hp-sysv-2 .hp-product-card::before { font-size: 0.6rem; letter-spacing: 0.10em; }
}


/* =================================================================
 * VARIANT 3 — MINIMAL COMMERCE CARD
 * Composition: NO card container chrome — no border, no background.
 * Whitespace and typography do all the work. Photo on a very
 * subtle warm plate. Title is a tight sans, 2-line clamp. Price
 * is on its own line, alone, bold. Availability lives ONLY as a
 * tiny green dot pinned to the top-right of the image (no chip,
 * no text). CTA is a subtle underlined text link at bottom-left.
 * Composition rhythm: photo → title (with breath) → price (alone)
 * → CTA link. Everything else is silence.
 * ================================================================= */

body.hp-sysv-3 .hp-product-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
body.hp-sysv-3 .hp-product-card__image-wrap {
    aspect-ratio: 1 / 1 !important;
    background: #f8f2e3 !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    position: relative;
    overflow: hidden;
}
body.hp-sysv-3 .hp-product-card__image {
    padding: 24px !important;
    object-fit: contain !important;
}

/* Corner availability dot — only on image, no chip */
body.hp-sysv-3 .hp-product-card__stock {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    margin: 0 !important;
    padding: 0 !important;
}
body.hp-sysv-3 .hp-stock-badge,
body.hp-sysv-3 .hp-stock-badge--in {
    display: inline-block !important;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--hp-c-ok) !important;
    color: transparent !important;
    font-size: 0 !important;
    padding: 0 !important;
    border: 2px solid #fdfaf3 !important;
    box-shadow: 0 0 0 1px rgba(47,125,50,0.35);
}
body.hp-sysv-3 .hp-stock-badge::before,
body.hp-sysv-3 .hp-stock-badge::after { content: none !important; }

/* Move category-DOM's inner stock (inside meta-row) to be corner-positioned too */
body.hp-sysv-3 .hp-product-card__meta-row .hp-product-card__stock {
    position: absolute;
    top: 10px; right: 10px;
}
/* But it was inside footer... we need parent position */
body.hp-sysv-3 .hp-product-card__body { position: relative; }
body.hp-sysv-3 .hp-product-card { position: relative; }

body.hp-sysv-3 .hp-product-card__body {
    padding: 16px 2px 2px !important;
    gap: 0 !important;
}

body.hp-sysv-3 .hp-product-card__title {
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: var(--hp-c-ink) !important;
    margin: 0 !important;
    min-height: 2.5em !important;
    letter-spacing: 0 !important;
}

/* Price alone on its line, no chip, no strip */
body.hp-sysv-3 .hp-product-card__price-block,
body.hp-sysv-3 .hp-product-card__footer > .flex.flex-col {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    margin-top: 12px !important;
}
body.hp-sysv-3 .hp-product-card__price {
    display: block !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--hp-c-ink) !important;
    letter-spacing: -0.01em;
    margin-top: 12px !important;
}
body.hp-sysv-3 .hp-product-card__meta-row {
    display: contents !important;
}

/* Footer: subtle underlined text link, left-aligned */
body.hp-sysv-3 .hp-product-card__footer {
    display: block !important;
    padding: 8px 0 0 !important;
    background: transparent !important;
    border: none !important;
}
body.hp-sysv-3 .hp-product-card .hp-btn,
body.hp-sysv-3 .hp-product-card .addtocart {
    background: transparent !important;
    color: var(--hp-c-body) !important;
    border: none !important;
    border-radius: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-color: rgba(115,101,85,0.35) !important;
    display: inline !important;
    width: auto !important;
    transition: color 150ms ease, text-decoration-color 200ms ease;
}
body.hp-sysv-3 .hp-product-card .hp-btn:hover,
body.hp-sysv-3 .hp-product-card .addtocart:hover {
    color: var(--hp-c-primary) !important;
    text-decoration-color: var(--hp-c-primary) !important;
}
body.hp-sysv-3 .hp-product-card .hp-btn svg,
body.hp-sysv-3 .hp-product-card .addtocart svg { display: none !important; }

body.hp-sysv-3 .hp-product-card:hover .hp-product-card__image {
    transform: scale(1.02);
    transition: transform 300ms ease;
}

@media (max-width: 640px) {
    body.hp-sysv-3 .hp-product-card__title { font-size: 0.82rem !important; min-height: 2.4em !important; }
    body.hp-sysv-3 .hp-product-card__price { font-size: 1.02rem !important; }
    body.hp-sysv-3 .hp-product-card__image { padding: 16px !important; }
}


/* =================================================================
 * VARIANT 4 — PHOTO FIRST CARD
 * Composition: Photo dominates ~68% of card height (5:4 aspect,
 * larger warm frame). Below photo is a SINGLE compact info bar:
 * - Row 1: single-line title (nowrap ellipsis)
 * - Row 2: on-baseline row with green dot + "В наличии" text
 *          on the left, price on the right
 * - Row 3: a right-floated ROUND icon-only cart button
 * No chips, no dividers — the info block is one continuous rhythm.
 * Composition rhythm: photo (dominant) → 3 tight lines.
 * ================================================================= */

body.hp-sysv-4 .hp-product-card {
    background: var(--hp-c-card) !important;
    border: 1px solid var(--hp-c-line-2) !important;
    border-radius: 16px !important;
    overflow: visible;
    box-shadow: 0 1px 2px rgba(45,36,22,0.04);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
body.hp-sysv-4 .hp-product-card__image-wrap {
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    overflow: hidden;
}
body.hp-sysv-4 .hp-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -14px rgba(45,36,22,0.20);
}

body.hp-sysv-4 .hp-product-card__image-wrap {
    aspect-ratio: 5 / 4 !important;
    background:
        radial-gradient(70% 50% at 50% 45%, #fbf5e7 0%, #f4ead1 100%) !important;
    border: none !important;
    border-bottom: 1px solid var(--hp-c-line-2) !important;
    position: relative;
}
body.hp-sysv-4 .hp-product-card__image {
    padding: 18px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 8px 16px rgba(45,36,22,0.10));
    transition: transform 300ms ease;
}
body.hp-sysv-4 .hp-product-card:hover .hp-product-card__image { transform: scale(1.04); }

body.hp-sysv-4 .hp-product-card {
    position: relative;
}
body.hp-sysv-4 .hp-product-card__body {
    padding: 12px 14px 20px !important;
    gap: 0 !important;
    position: static;
}

body.hp-sysv-4 .hp-product-card__title {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--hp-c-ink) !important;
    margin: 0 0 8px 0 !important;
    min-height: 2.3em !important;
    -webkit-line-clamp: 2 !important;
}

/* One-line info row: stock text (dot+label) LEFT, price RIGHT */
body.hp-sysv-4 .hp-product-card__stock {
    display: inline-flex !important;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
}
body.hp-sysv-4 .hp-stock-badge,
body.hp-sysv-4 .hp-stock-badge--in {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: var(--hp-c-body) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
}
body.hp-sysv-4 .hp-stock-badge::before,
body.hp-sysv-4 .hp-stock-badge--in::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--hp-c-ok);
    box-shadow: 0 0 0 3px rgba(47,125,50,0.18);
}

/* Unify — combined info row with stock left, price right */
body.hp-sysv-4 .hp-product-card__footer,
body.hp-sysv-4 .hp-product-card__meta-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    gap: 12px;
}
body.hp-sysv-4 .hp-product-card__footer > .flex.flex-col,
body.hp-sysv-4 .hp-product-card__price-block {
    padding: 0 !important;
    display: block !important;
}
body.hp-sysv-4 .hp-product-card__price {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--hp-c-ink) !important;
    letter-spacing: -0.01em;
    line-height: 1;
}

/* Icon-only round CTA — floats over the top-right of the photo area, unobstructive. */
body.hp-sysv-4 .hp-product-card .hp-btn,
body.hp-sysv-4 .hp-product-card .addtocart {
    position: absolute !important;
    right: 12px !important;
    top: 12px !important;
    bottom: auto !important;
    left: auto !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: rgba(196,86,25,0.94) !important;
    color: #fff !important;
    border: 2px solid rgba(255,255,255,0.85) !important;
    backdrop-filter: blur(3px);
    box-shadow: 0 6px 14px -4px rgba(196,86,25,0.45), 0 2px 4px rgba(45,36,22,0.12) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
    text-transform: none !important;
    z-index: 5;
    transition: transform 200ms ease, background 200ms ease;
    box-sizing: border-box !important;
}
body.hp-sysv-4 .hp-product-card:hover .hp-btn,
body.hp-sysv-4 .hp-product-card:hover .addtocart {
    background: var(--hp-c-primary) !important;
    transform: scale(1.06);
}
body.hp-sysv-4 .hp-product-card .hp-btn::before,
body.hp-sysv-4 .hp-product-card .addtocart::before {
    content: "→";
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-1px);
}
body.hp-sysv-4 .hp-product-card .hp-btn svg,
body.hp-sysv-4 .hp-product-card .addtocart svg { display: none !important; }
body.hp-sysv-4 .hp-product-card .hp-btn:hover,
body.hp-sysv-4 .hp-product-card .addtocart:hover {
    background: var(--hp-c-primary-2) !important;
    transform: scale(1.05);
}

@media (max-width: 640px) {
    body.hp-sysv-4 .hp-product-card__title { font-size: 0.8rem !important; }
    body.hp-sysv-4 .hp-product-card__price { font-size: 1rem !important; }
    body.hp-sysv-4 .hp-product-card__image { padding: 12px !important; }
    body.hp-sysv-4 .hp-product-card .hp-btn { width: 36px !important; height: 36px !important; }
}


/* =================================================================
 * VARIANT 5 — FAST PURCHASE CARD
 * Composition: Conversion-optimized. Photo compact (aspect 4:3
 * with tight padding). A price-first hierarchy: below title,
 * price is BIG and bold on its own line, availability is a small
 * pill just under the price. Then a FULL-WIDTH primary CTA
 * ("Подробнее" / "В корзину") with a persistent icon-and-text
 * label. Card has a distinct hover state where the CTA gets
 * darker. The idea is: at a glance you see photo → price → is-it-
 * in-stock → BUY, without scanning.
 * ================================================================= */

body.hp-sysv-5 .hp-product-card {
    background: var(--hp-c-card) !important;
    border: 1px solid #eadfc7 !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(45,36,22,0.04);
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 250ms ease;
}
body.hp-sysv-5 .hp-product-card:hover {
    border-color: color-mix(in oklab, var(--hp-c-primary) 45%, var(--hp-c-line));
    box-shadow: 0 10px 26px -14px rgba(196,86,25,0.30);
    transform: translateY(-2px);
}

body.hp-sysv-5 .hp-product-card__image-wrap {
    aspect-ratio: 4 / 3 !important;
    background: linear-gradient(180deg, #fbf5e6 0%, #f5ead0 100%) !important;
    border: none !important;
    border-bottom: 1px solid #eadfc7 !important;
}
body.hp-sysv-5 .hp-product-card__image {
    padding: 12px !important;
    object-fit: contain !important;
}

body.hp-sysv-5 .hp-product-card__body {
    padding: 12px 14px 14px !important;
    gap: 8px !important;
}

body.hp-sysv-5 .hp-product-card__title {
    font-size: 0.83rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--hp-c-body) !important;
    margin: 0 !important;
    min-height: 2.3em !important;
}

/* PRICE — big, prominent, alone */
body.hp-sysv-5 .hp-product-card__price-block,
body.hp-sysv-5 .hp-product-card__footer > .flex.flex-col {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}
body.hp-sysv-5 .hp-product-card__price {
    display: block !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--hp-c-ink) !important;
    letter-spacing: -0.02em;
    line-height: 1 !important;
    margin: 0 0 6px 0 !important;
}
body.hp-sysv-5 .hp-product-card__meta-row {
    display: contents !important;
}

/* Green availability pill — small, below the price */
body.hp-sysv-5 .hp-product-card__stock {
    display: block !important;
    padding: 0 !important;
    margin: 0 0 8px 0 !important;
}
body.hp-sysv-5 .hp-stock-badge,
body.hp-sysv-5 .hp-stock-badge--in {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    padding: 2px 8px !important;
    height: 20px;
    border-radius: 6px;
    font-size: 0.7rem !important;
    font-weight: 600;
    color: var(--hp-c-ok) !important;
    background: var(--hp-c-ok-soft) !important;
    border: 1px solid #cfe4bf !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
body.hp-sysv-5 .hp-stock-badge::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--hp-c-ok);
}

body.hp-sysv-5 .hp-product-card__footer {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    margin-top: auto !important;
}
body.hp-sysv-5 .hp-product-card .hp-btn,
body.hp-sysv-5 .hp-product-card .addtocart {
    display: flex !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    background: var(--hp-c-primary) !important;
    color: #fff !important;
    border: none !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: 0 4px 12px -6px rgba(196,86,25,0.5), inset 0 -2px 0 rgba(0,0,0,0.10);
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    margin-top: 6px !important;
}
body.hp-sysv-5 .hp-product-card .hp-btn:hover,
body.hp-sysv-5 .hp-product-card .addtocart:hover {
    background: var(--hp-c-primary-2) !important;
}
body.hp-sysv-5 .hp-product-card .hp-btn svg,
body.hp-sysv-5 .hp-product-card .addtocart svg {
    width: 15px; height: 15px;
    display: inline-block !important;
    stroke: currentColor !important;
}

@media (max-width: 640px) {
    body.hp-sysv-5 .hp-product-card__title { font-size: 0.78rem !important; min-height: 2.3em !important; }
    body.hp-sysv-5 .hp-product-card__price { font-size: 1.28rem !important; }
    body.hp-sysv-5 .hp-product-card__image { padding: 10px !important; }
    body.hp-sysv-5 .hp-product-card .hp-btn { height: 38px !important; min-height: 38px !important; font-size: 0.82rem !important; }
}

/* END card-system.css */

/* =================================================================
 * HP-STAGE191 — BMW card copy pilot (4 products).
 * Adds a spacious summary line under the H2 title for products that
 * have a row in #__hidplanet_product_card_copy. Text is calm plain
 * copy — no plaque, no icon, no ellipsis, no line-clamp. If the
 * text does not fit, the card grows in height; nothing is hidden.
 * Also renders the "from" prefix inline before the min-variant
 * price (BMW ENET), styled as regular weight.
 * ================================================================= */

.hp-product-card__summary {
    display: block;
    margin: 0.35em 0 0.6em;
    padding: 0;
    background: transparent;
    border: none;
    color: #555;
    font-size: 0.87rem;
    font-weight: 400;
    line-height: 1.42;
    /* No overflow:hidden, no -webkit-line-clamp, no text-overflow.
       Text must display in full. */
    overflow: visible;
    text-overflow: clip;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

.hp-product-card__price-from-prefix {
    font-weight: 400;
    font-size: 0.9em;
    margin-right: 0.15em;
    color: inherit;
}

@media (max-width: 480px) {
    .hp-product-card__summary {
        font-size: 0.85rem;
        line-height: 1.4;
    }
}