/* =========================================================================
   Product card — premium pass
   -------------------------------------------------------------------------
   Loaded AFTER style.css, so these rules win without needing !important or
   inflated selectors. Nothing here changes the card markup, which means every
   listing picks it up at once: home, shop, category, subcategory,
   childcategory, search, flash sales, hot deals, campaign and wholesale.

   Colour comes from the admin theme (--primary and friends, set by
   dynamic-theme), so changing the brand colour in the panel still works.
   ========================================================================= */

:root {
    --card-surface   : #ffffff;
    --card-line      : #e8e8e6;   /* hairline, one step darker than --border */
    --card-field     : #f4f5f6;   /* neutral bed the photo sits on */
    --card-ink       : #14161a;   /* near-black for titles and price */
    --card-ink-soft  : #6b7280;   /* struck price, units, meta */
    --card-radius    : 14px;
    --card-pad       : 12px;
}

/* ── Grid rhythm ─────────────────────────────────────────────────────── */

.product-grid {
    gap: 18px;
    align-items: stretch;         /* every card the same height */
}

/* ── The card ────────────────────────────────────────────────────────── */

.product-card {
    position: relative;
    background: var(--card-surface);
    border: 1px solid var(--card-line);
    border-radius: var(--card-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* At rest the card is quiet: no shadow. Depth is a response to the
       person's action, not permanent decoration. */
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .22s ease, transform .22s ease;
}

/* Hover only where hovering exists — on a phone this would fire on tap and
   leave the card stuck in its hover state. */
@media (hover: hover) and (pointer: fine) {
    .product-card:hover {
        border-color: #dcdcd9;
        box-shadow: 0 10px 28px rgba(18, 20, 24, .10), 0 2px 6px rgba(18, 20, 24, .05);
        transform: translateY(-3px);
    }
    .product-card:hover .product-thumb img {
        transform: scale(1.045);
    }
}

/* Touch: a short press-in, which reads as physical and confirms the tap. */
.product-card:active {
    transform: scale(.988);
}

/* Keyboard users get a visible ring on the whole card. */
.product-card:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}

/* ── Photo ───────────────────────────────────────────────────────────── */

.product-thumb {
    display: block;
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--card-field);
    border-bottom: 1px solid #f0f0ee;
}

/* `contain`, not `cover`. These products are bags and parts photographed
   with the size printed on the label — cropping the label removes the one
   thing that tells two otherwise identical items apart. */
.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
    border-radius: 0;
    mix-blend-mode: normal;
    transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}

/* ── Discount badge ──────────────────────────────────────────────────── */

/* Near-black, not brand red: the page is already red and the order button
   needs to be the only red thing competing for the eye. */
.deal-badge {
    top: 10px;
    left: 10px;
    background: var(--card-ink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    padding: 4px 9px;
    border-radius: 7px;
    box-shadow: 0 2px 8px rgba(18, 20, 24, .22);
}

/* ── Out of stock ────────────────────────────────────────────────────── */

/* Frosted, light overlay rather than a heavy black wash — the photo stays
   readable so the item is still recognisable while unavailable. */
.deal-stockout {
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(244, 245, 246, .84);
    backdrop-filter: saturate(.45) blur(1px);
    -webkit-backdrop-filter: saturate(.45) blur(1px);
    color: var(--card-ink);
    font-size: 12.5px;
    font-weight: 700;
    /* 0, not .5px: the label is Bangla now ("স্টকে নেই"), and tracking pulls
       conjuncts and matras apart. It was fine on Latin caps. */
    letter-spacing: 0;
    box-shadow: inset 0 0 0 1px rgba(20, 22, 26, .06);
}

/* ── Body ────────────────────────────────────────────────────────────── */

.product-body {
    padding: var(--card-pad) var(--card-pad) 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Centred, matching the rest of the storefront. */
    text-align: center;
    align-items: center;
    gap: 6px;
}

.product-title {
    font-family: 'Hind Siliguri', 'Roboto', sans-serif;
    /* 15px/600, not 14px/500. Bangla ১ is a hook plus a hairline vertical stem;
       at 14px in a light weight that stem falls below one device pixel and the
       rasteriser drops it, leaving just the hook — which reads as ৴. The
       character in the database is correct: the same name renders properly on
       the product detail page, where the title is larger and bolder. */
    font-size: 15px;
    font-weight: 600;
    /* Grayscale antialiasing keeps thin stems intact; subpixel rendering is
       what thins them out of existence. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Never let the browser fake a weight — a synthesised bold smears the
       stem instead of thickening it. */
    font-synthesis-weight: none;
    /* Bangla wants more leading than Latin at the same size: conjuncts and
       matras (ি ী ু ৃ ে ৈ) and digits like ১ ৫ reach further above and below
       the Latin x-height. */
    line-height: 1.6;
    color: var(--card-ink);
    margin: 0;
    padding: 0;

    /* No clamp, no overflow:hidden, no reserved height.
       -webkit-line-clamp REQUIRES overflow:hidden, and hidden clips at the box
       edge — which is what was shaving the top of ১. Any leading value is a
       guess about how far a given script's ink overshoots its line box, so
       instead of guessing better, the clipping box is gone: the name wraps
       freely and nothing can ever be cut. The reserved 3-line height is gone
       too, which is what had made the cards taller. */
    display: block;
    overflow: visible;
    overflow-wrap: break-word;
    word-break: break-word;
    text-wrap: pretty;
}

.product-title a {
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) {
    .product-title a:hover {
        color: var(--primary);
    }
}

/* ── Rating ──────────────────────────────────────────────────────────── */

.product-rating {
    justify-content: center;
    gap: 1px;
    font-size: 11px;
    line-height: 1;
    color: #f0a92b;
}

/* Rating value and review count sit beside the stars, quiet enough not to
   compete with the price. */
.product-rating-val {
    margin-left: 3px;
    font-family: 'Roboto', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    color: #55606f;
}

.product-rating-count {
    margin-left: 2px;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #98a1ad;
}

/* ── Price ───────────────────────────────────────────────────────────── */

/* The loudest thing in the card. For a consumable someone buys again and
   again, the number is the decision. */
.product-price {
    /* Hind Siliguri first: it carries ৳ and the Bangla digits, so the whole
       price renders from one font instead of mixing metrics mid-line. */
    font-family: 'Hind Siliguri', 'Roboto', sans-serif;
    line-height: 1.5;
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--card-ink);
    /* Sinks the price — and the sold/left row and buttons after it — to the
       bottom of the card, so those elements align across a grid row even
       though titles now vary in height. Replaces the reserved-height trick. */
    margin: 2px 0 0;
    margin-top: auto;
    padding-top: 4px;
}

.product-price del {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--card-ink-soft);
    margin-right: 0;
    text-decoration-thickness: 1px;
}

/* ── Sold / left row (flash sale, hot deals) ─────────────────────────── */

/* This row appears between price and buttons on deal cards. Given a fixed
   height and centred content so cards with and without it still line up. */
.product-body .flash-progress {
    width: 100%;
    height: 5px;
    border-radius: 20px;
    background: #efeff0;
    overflow: hidden;
    margin: 8px 0 6px;
}

.product-body .flash-progress-bar {
    height: 100%;
    border-radius: 20px;
    min-width: 6px;
}

.product-body .flash-sold-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: 'Hind Siliguri', 'Roboto', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--card-ink-soft);
    line-height: 1.4;
    white-space: nowrap;
    /* Long "Sold 0 • Left 3999" strings must not widen the card. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-body .flash-sold-text i {
    color: #f0682b;
    font-size: 11px;
}

@media (max-width: 767px) {
    .product-body .flash-sold-text {
        font-size: 10.5px;
    }
    .product-body .flash-progress {
        height: 4px;
        margin: 6px 0 5px;
    }
}

/* ── Pack size / unit ────────────────────────────────────────────────── */

/* Sits between price and buttons. Quiet by design: it qualifies the price
   rather than competing with it. */
.product-unit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: center;
    max-width: 100%;
    margin-top: 2px;
    padding: 3px 9px;
    background: #f4f5f6;
    border-radius: 20px;
    font-family: 'Hind Siliguri', 'Roboto', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    color: #55606f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-unit i { font-size: 10.5px; color: #8a93a3; }

@media (max-width: 767px) {
    .product-unit { font-size: 11px; padding: 2px 8px; }
}

/* ── Actions ─────────────────────────────────────────────────────────── */

.product-actions {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    margin-top: 0;
    padding-top: 10px;
    /* align-items:center on the body would otherwise shrink this row to the
       width of its buttons. */
    width: 100%;
    align-self: stretch;
}

.btn-order {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    background: var(--primary);
    color: #fff;
    font-family: 'Hind Siliguri', 'Roboto', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    /* Sentence case: shouting is not premium. */
    text-transform: none;
    letter-spacing: 0;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}

@media (hover: hover) and (pointer: fine) {
    .btn-order:hover {
        background: var(--primary-dark, #b8172a);
        box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
    }
}

.btn-order:active {
    transform: scale(.97);
}

.btn-cart {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-height: 42px;
    height: auto;
    background: #fff;
    color: var(--primary);
    border: 1.5px solid var(--card-line);
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}

@media (hover: hover) and (pointer: fine) {
    .btn-cart:hover {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
    }
}

.btn-cart:active {
    transform: scale(.94);
}

button.btn-cart {
    background: #fff;
}

.btn-order:focus-visible,
.btn-cart:focus-visible,
.product-title a:focus-visible {
    outline: 2px solid var(--card-ink);
    outline-offset: 2px;
}

/* ── Phones ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    :root {
        --card-radius: 12px;
        --card-pad: 10px;
    }

    .product-grid {
        gap: 10px;
    }

    .product-thumb img {
        padding: 7px;
    }

    .product-title {
        /* Still 14px on phones — below that the ১ stem starts dropping out
           again on lower-density screens. */
        font-size: 14px;
        line-height: 1.58;
    }

    .product-price {
        font-size: 16.5px;
        gap: 6px;
    }

    .product-price del {
        font-size: 11.5px;
    }

    /* Icon-only cart button costs a whole column on a 2-up grid, and the
       order button is what people actually press. */
    .product-actions {
        gap: 6px;
        padding-top: 8px;
    }

    .btn-order {
        font-size: 12.5px;
        min-height: 40px;
        border-radius: 9px;
    }

    .btn-cart {
        width: 40px;
        min-height: 40px;
        border-radius: 9px;
        font-size: 14px;
    }

    .deal-badge {
        top: 7px;
        left: 7px;
        font-size: 10px;
        padding: 3px 7px;
    }
}

/* Very narrow phones: stack the actions so neither button gets cramped. */
@media (max-width: 359px) {
    .product-actions {
        flex-direction: column;
    }

    .btn-cart {
        width: 100%;
    }
}

/* ── Respect motion preferences ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .product-card,
    .product-card:hover,
    .product-thumb img,
    .btn-order,
    .btn-cart {
        transition: none;
        transform: none;
    }
}


/* =====================================================================
   GrowBuy Product Card Palette v1
   Loaded after dynamic theme and style.css.
   ===================================================================== */
:root {
    --card-surface: #FFFFFF;
    --card-line: #E4ECE4;
    --card-field: #F4F8F4;
    --card-ink: #172217;
    --card-ink-soft: #8C968C;
    --gb-card-brand: #196517;
    --gb-card-deep: #0D3B0C;
    --gb-card-accent: #07DF07;
    --gb-card-danger: #D92D20;
}

.product-card {
    background: var(--card-surface);
    border-color: var(--card-line);
}

.product-thumb {
    background: var(--card-field);
    border-bottom-color: #EDF2ED;
}

.product-title,
.product-title a {
    color: var(--card-ink);
}

.product-title a:hover {
    color: var(--gb-card-brand);
}

/* Price gets the strongest branded text treatment; the crossed price stays quiet. */
.product-price {
    color: var(--gb-card-brand);
}

.product-price del {
    color: var(--card-ink-soft);
}

/* Sale is the exceptional attention colour, not the everyday brand colour. */
.deal-badge {
    background: var(--gb-card-danger);
    color: #fff;
    box-shadow: 0 2px 8px rgba(217, 45, 32, .20);
}

.product-unit {
    background: #F0F5F0;
    color: #5D6B5D;
}

.btn-order {
    background: var(--gb-card-brand);
    color: #fff;
    box-shadow: none;
}

.btn-order:hover {
    background: var(--gb-card-deep);
}

.btn-cart,
button.btn-cart {
    background: #fff;
    color: var(--gb-card-brand);
    border-color: #DDE8DD;
}

.btn-cart:hover {
    background: var(--gb-card-brand);
    border-color: var(--gb-card-brand);
    color: #fff;
}

.product-card:focus-within {
    border-color: var(--gb-card-brand);
    box-shadow: 0 0 0 3px rgba(25, 101, 23, .10);
}

.btn-order:focus-visible,
.btn-cart:focus-visible,
.product-title a:focus-visible {
    outline-color: var(--gb-card-deep);
}

@media (max-width: 767px) {
    .product-title {
        color: var(--card-ink);
        font-weight: 600;
    }

    .product-price {
        color: var(--gb-card-brand);
        font-weight: 800;
    }

    .btn-order {
        background: var(--gb-card-brand);
        font-weight: 700;
    }

    .btn-cart,
    button.btn-cart {
        background: #fff;
        color: var(--gb-card-brand);
    }
}