/* ================================================================
 * Hidplanet — Design Window 037 — Product Card Variants
 * Scope: body.hp-cardv-1 / body.hp-cardv-2 / body.hp-cardv-3
 * Inert unless one of the three body classes is present.
 * Applies to .hp-product-card in .hp-product-grid / .hp-category-products / .hp-home-featured-grid.
 * NOTE: No structural HTML changes. No buyer-flow logic touched.
 * ================================================================ */

/* -----------------------------------------------------------------
 * Shared card container tweak — kept minimal, per-variant details below.
 * ----------------------------------------------------------------- */
body.hp-cardv-1 .hp-product-card,
body.hp-cardv-2 .hp-product-card,
body.hp-cardv-3 .hp-product-card {
    background: #fdfaf4;
    border: 1px solid #e6ded0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(45, 36, 22, 0.03);
    transition: transform 220ms ease, box-shadow 240ms ease, border-color 200ms ease;
}
body.hp-cardv-1 .hp-product-card:hover,
body.hp-cardv-2 .hp-product-card:hover,
body.hp-cardv-3 .hp-product-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--hp-primary) 35%, transparent);
    box-shadow: 0 10px 28px -14px rgba(45, 36, 22, 0.22),
                0 2px 6px rgba(45, 36, 22, 0.06);
}

/* Suppress placeholder image + tax note + help CTA across all variants */
body.hp-cardv-1 .hp-product-card .no_image,
body.hp-cardv-2 .hp-product-card .no_image,
body.hp-cardv-3 .hp-product-card .no_image,
body.hp-cardv-1 .hp-product-card__tax,
body.hp-cardv-2 .hp-product-card__tax,
body.hp-cardv-3 .hp-product-card__tax { display: none !important; }


/* =================================================================
 * VARIANT 1 — BALANCED COMMERCE CARD
 * Goal: classic e-commerce card. Photo top. Title. Small stock chip
 * under title. Price+button share a controlled row at the bottom.
 * Button medium-width, orange, chevron-forward glyph.
 * ================================================================= */

body.hp-cardv-1 .hp-product-card__image-wrap {
    aspect-ratio: 4 / 3 !important;
    background: linear-gradient(180deg, #fbf6ec 0%, #f7efe0 100%);
    border-bottom: 1px solid #ece3d1;
}
body.hp-cardv-1 .hp-product-card__image {
    padding: 14px !important;
    object-fit: contain;
}

body.hp-cardv-1 .hp-product-card__body {
    padding: 0.9rem 0.95rem 1rem !important;
    gap: 0.5rem;
}

body.hp-cardv-1 .hp-product-card__title {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1.35;
    color: #2b241a;
    margin: 0 !important;
    min-height: 2.5em;
}

/* Small stock chip under title, NOT in the price row */
body.hp-cardv-1 .hp-product-card__stock {
    margin: 4px 0 6px 0 !important;
}
body.hp-cardv-1 .hp-stock-badge--in,
body.hp-cardv-1 .hp-stock-badge.available {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 2px 8px;
    height: 20px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #2f7d32;
    background: #e5f2df;
    border: 1px solid #cfe6c7;
}
body.hp-cardv-1 .hp-stock-badge--in::before,
body.hp-cardv-1 .hp-stock-badge.available::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #2f7d32;
    box-shadow: 0 0 0 3px rgba(47,125,50,0.14);
}

/* Meta-row: stock chip LEFT, price RIGHT (clean e-commerce row). */
body.hp-cardv-1 .hp-product-card__meta-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem;
    margin-top: 4px;
}
body.hp-cardv-1 .hp-product-card__stock { margin: 0 !important; }

body.hp-cardv-1 .hp-product-card__price {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #1c1710;
    letter-spacing: -0.005em;
    white-space: nowrap;
}

body.hp-cardv-1 .hp-product-card__footer {
    padding-top: 0.7rem !important;
    display: flex !important;
    flex-direction: column;
    gap: 0.6rem;
    align-items: stretch !important;
    border-top: 1px dashed #ece3d1;
}
body.hp-cardv-1 .hp-product-card__meta-row { margin-top: 0; }
body.hp-cardv-1 .hp-product-card .addtocart,
body.hp-cardv-1 .hp-product-card .hp-btn--primary {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 4px 12px -6px rgba(196,86,25,0.35);
    width: auto !important;
    align-self: flex-end;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
body.hp-cardv-1 .hp-product-card .addtocart:hover {
    box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 6px 16px -6px rgba(196,86,25,0.45);
}

@media (max-width: 640px) {
    body.hp-cardv-1 .hp-product-card__title { font-size: 0.82rem !important; min-height: 2.4em; }
    body.hp-cardv-1 .hp-product-card__price { font-size: 1rem !important; }
    body.hp-cardv-1 .hp-product-card .addtocart { height: 34px !important; min-height: 34px !important; padding: 0 10px !important; font-size: 0.76rem !important; }
}


/* =================================================================
 * VARIANT 2 — PREMIUM COMPACT CARD
 * Goal: premium/technical look. Cleaner photo well. Title tight.
 * Stock as small green pill, price dominant. Compact icon-only "cart+"
 * primary + subtle "detail" ghost, tight action row.
 * ================================================================= */

body.hp-cardv-2 .hp-product-card {
    border-radius: 12px;
    border: 1px solid #ebe1cf;
    background:
        radial-gradient(120% 60% at 50% 0%, #fbf5e8 0%, #fdfaf4 55%);
}

body.hp-cardv-2 .hp-product-card__image-wrap {
    aspect-ratio: 1 / 1 !important;
    background:
        radial-gradient(60% 40% at 50% 55%, rgba(196,86,25,0.05) 0%, transparent 60%),
        linear-gradient(180deg, #faf3e4 0%, #f4ead6 100%);
    border-bottom: 1px solid #ece2ce;
}
body.hp-cardv-2 .hp-product-card__image {
    padding: 20px !important;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(45,36,22,0.10));
}

body.hp-cardv-2 .hp-product-card__body {
    padding: 0.85rem 0.9rem 0.95rem !important;
    gap: 0.4rem;
}

body.hp-cardv-2 .hp-product-card__title {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    line-height: 1.3;
    color: #241d13;
    margin: 0 !important;
    min-height: 2.3em;
}

body.hp-cardv-2 .hp-product-card__meta-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 0.35rem;
    margin-top: 0;
}
body.hp-cardv-2 .hp-product-card__stock { margin: 0 !important; }

body.hp-cardv-2 .hp-stock-badge--in,
body.hp-cardv-2 .hp-stock-badge.available {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 2px 7px !important;
    height: 18px;
    border-radius: 999px;
    font-size: 0.65rem !important;
    font-weight: 600;
    color: #2b6d30;
    background: #e3efdc;
    border: 1px solid rgba(43,109,48,0.18);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
body.hp-cardv-2 .hp-stock-badge--in::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #38863d;
}

body.hp-cardv-2 .hp-product-card__price {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #1c1710;
    letter-spacing: -0.01em;
    line-height: 1;
}

body.hp-cardv-2 .hp-product-card__footer {
    padding-top: 0.65rem !important;
    display: block !important;
    border-top: 1px solid #efe6d3;
}

body.hp-cardv-2 .hp-product-card .addtocart,
body.hp-cardv-2 .hp-product-card .hp-btn--primary {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #d16321 0%, #b95517 100%);
    color: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset,
                0 4px 10px -6px rgba(196,86,25,0.55);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto !important;
    margin-top: 0.55rem;
    float: right;
}
body.hp-cardv-2 .hp-product-card .addtocart:hover {
    background: linear-gradient(180deg, #dd6e28 0%, #c25a19 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,
                0 6px 14px -6px rgba(196,86,25,0.65);
}

/* Clear the float */
body.hp-cardv-2 .hp-product-card__footer::after {
    content: ""; display: block; clear: both;
}

@media (max-width: 640px) {
    body.hp-cardv-2 .hp-product-card__title { font-size: 0.8rem !important; min-height: 2.3em; }
    body.hp-cardv-2 .hp-product-card__price { font-size: 1.05rem !important; }
    body.hp-cardv-2 .hp-product-card__image { padding: 14px !important; }
    body.hp-cardv-2 .hp-product-card .addtocart { height: 32px !important; min-height: 32px !important; padding: 0 10px !important; font-size: 0.72rem !important; }
}


/* =================================================================
 * VARIANT 3 — UTILITY / FAST PURCHASE CARD
 * Goal: quick catalogue browse. Stock+price in a compact top-of-footer
 * strip; buy button + secondary "+" action laid out with priority on
 * action recognition. Strong mobile readability.
 * ================================================================= */

body.hp-cardv-3 .hp-product-card {
    border: 1px solid #ede4d1;
    border-radius: 10px;
    background: #fffdf7;
}
body.hp-cardv-3 .hp-product-card:hover {
    border-color: #d69a5b;
    box-shadow: 0 6px 18px -10px rgba(196,86,25,0.28);
}

body.hp-cardv-3 .hp-product-card__image-wrap {
    aspect-ratio: 4 / 3 !important;
    background: #fbf6ea;
    border-bottom: 1px solid #efe5d0;
}
body.hp-cardv-3 .hp-product-card__image {
    padding: 10px !important;
    object-fit: contain;
}

body.hp-cardv-3 .hp-product-card__body {
    padding: 0.75rem 0.85rem 0.9rem !important;
    gap: 0.4rem;
}
body.hp-cardv-3 .hp-product-card__title {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    line-height: 1.3;
    color: #2b241a;
    margin: 0 !important;
    min-height: 2.4em;
}

/* Meta-row: stock (small) LEFT, price (bold) RIGHT, tight strip */
body.hp-cardv-3 .hp-product-card__meta-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 6px 8px !important;
    background: #f7f0dc;
    border: 1px solid #ece3cf;
    border-radius: 8px;
    margin-top: 4px !important;
}
body.hp-cardv-3 .hp-product-card__stock { margin: 0 !important; }

body.hp-cardv-3 .hp-stock-badge--in,
body.hp-cardv-3 .hp-stock-badge.available {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 !important;
    height: auto;
    background: transparent !important;
    border: none !important;
    color: #2d6c34 !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
}
body.hp-cardv-3 .hp-stock-badge--in::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #47a24f;
    box-shadow: 0 0 0 3px rgba(71,162,79,0.18);
}

body.hp-cardv-3 .hp-product-card__price {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #1a1611;
    line-height: 1;
    white-space: nowrap;
}

/* Action row: meta-strip on top, primary buy fills below */
body.hp-cardv-3 .hp-product-card__footer {
    padding-top: 0.6rem !important;
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    align-items: stretch !important;
}
body.hp-cardv-3 .hp-product-card .addtocart,
body.hp-cardv-3 .hp-product-card .hp-btn--primary {
    flex: 1 1 auto;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    letter-spacing: 0.005em;
    text-transform: none;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #c45619;
    color: #fff;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.10);
}
body.hp-cardv-3 .hp-product-card .addtocart:hover {
    background: #b04b12;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15), 0 6px 14px -6px rgba(196,86,25,0.4);
}
body.hp-cardv-3 .hp-product-card .addtocart svg {
    width: 16px; height: 16px;
}

@media (max-width: 640px) {
    body.hp-cardv-3 .hp-product-card__title { font-size: 0.8rem !important; min-height: 2.3em; }
    body.hp-cardv-3 .hp-product-card__price { font-size: 1rem !important; }
    body.hp-cardv-3 .hp-product-card .addtocart { height: 38px !important; min-height: 38px !important; }
}

/* END card-variants.css */