/* ==========================================================================
   Canin — product card, THE single definition. Loaded by every page that
   renders one: index.php, products.php, product.php, vendor.php.

   WHY THIS FILE EXISTS
   The card used to be declared twice, both times UNSCOPED:
     home-modern.css  .hm-card { ... }   tokens: --hm-*
     shop-modern.css  .hm-card { ... }   tokens: --sx-*
   Neither was written as ".hm .hm-card" / ".sx .hm-card", so any page loading
   both would have had the later one silently win everywhere.

   The two copies were NOT visually drifted — they were the same card written
   from opposite ends, and landed on identical computed values:

                       home-modern.css              shop-modern.css
     base rules        desktop (1/1, 13.5px)        phone (4/3, 11.5px)
     ≥901px block      bumps title/price/cta        restores 1/1 + desktop sizes
     ≤900px block      shrinks to 4/3 + compact     (base already is that)

   Verified by measuring getComputedStyle on index.php and products.php at
   1440px and 390px: aspect-ratio, image padding, title, brand, price, vendor
   badge and cta all matched at both widths. So the duplication was a
   maintenance problem, not a rendering one — every change had to be made twice
   or the pages would silently diverge.

   This file follows the home-modern direction (desktop base, both breakpoints
   explicit). Both old copies are gone; each of those files now carries a
   pointer here in their place.

   TOKENS ARE SELF-CONTAINED
   Declared on .hm-card itself under --pc-* names rather than borrowed from
   --hm-* / --sx-*, so the card renders identically on a page that loads no
   other redesign stylesheet (vendor.php and the similar-products rail on
   product.php are exactly that case). That was the other fragility of the old
   arrangement: home-modern's copy read --hm-* tokens defined on .hm and
   shop-modern's read --sx-* defined on .sx, so either copy loaded without its
   wrapper element lost its border, ink and badge colours.

   ORDER MATTERS: load this AFTER the page skin. It is listed second in
   $page_styles everywhere.
   ========================================================================== */

.hm-card {
    --pc-radius: 18px;
    --pc-ink: #0b2545;
    --pc-line: #e3edfb;
    --pc-warn: #b45309;
    --pc-warn-bg: #fff8ec;
    /* Out of stock is red, not grey. The grey pair scored 2.4:1 against its own
       background where 4.5:1 is the floor for text this small, and the chip's
       near-white fill vanished against the white product photo behind it. This
       exact pair is already in style.css as .stock-badge.out-stock. */
    --pc-off: #b91c1c;
    --pc-off-bg: #fee2e2;
    --pc-off-line: #fecaca;

    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hm-card:hover {
    border-color: rgba(22, 119, 255, .38);
    box-shadow: 0 10px 24px rgba(16, 60, 120, .09);
    transform: translateY(-2px);
}

.hm-card-media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    background: #fff;
    border-bottom: 1px solid #f0f5fd;
    overflow: hidden;
}
/* min-width/min-height 0 are what actually let the picture shrink inside a grid
   item — see card-image-fix.css, which patches the two older card generations
   globally for the same reason */
.hm-card-media img {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    padding: 10px;
}
.hm-noimg { color: var(--muted); font-size: 11.5px; }

.hm-stock {
    position: absolute;
    inset-inline-start: 8px;
    top: 8px;
    /* The border lives on .hm-stock and is transparent, rather than only on
       .is-out, so both states keep the same box and the padding stays in one
       place. 3px/9px became 2px/8px so the 1px border does not grow the pill. */
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}
.hm-stock.is-out { color: var(--pc-off); background: var(--pc-off-bg); border-color: var(--pc-off-line); }
.hm-stock.is-pre { color: var(--pc-warn); background: var(--pc-warn-bg); }

.hm-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 5px;
    padding: 11px 12px 12px;
}
.hm-card-title {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.75;
    /* keep every card in a row the same height regardless of title length */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
}
.hm-card-title a { color: var(--pc-ink); text-decoration: none; }
.hm-card-title a:hover { color: var(--primary); }
.hm-card-brand { font-size: 10.5px; color: var(--muted); font-weight: 600; }

/* The price row. The vendor badge used to live in here next to the amount and
   competed with it for width — "۳۰۰,۰۰۰,۰۰۰ تومان" pushed the badge onto its
   own line. The badge now sits above, under the title, and this row holds the
   price alone across the full card width. */
.hm-card-foot {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px dashed var(--pc-line);
}
.hm-price { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hm-price-k { font-size: 9.5px; color: var(--muted); font-weight: 600; }
.hm-price strong {
    font-size: 13.5px;
    font-weight: 900;
    color: var(--pc-ink);
    letter-spacing: -.2px;
    white-space: nowrap;
}
.hm-price .hm-price-na { font-size: 11.5px; font-weight: 700; color: var(--muted); }

/* The vendor count is the comparison signal — treated as a badge, not fine
   print. It is a direct child of .hm-card-body, placed after the title (and
   the brand line when there is one) and pushed to the card's left edge:
   .hm-card-body is a column flex box, so align-self works on the horizontal
   axis, and in this RTL layout flex-end resolves to the left.
   margin-top: auto is deliberately NOT used — that belongs to .hm-card-foot,
   which is what keeps the price and button pinned to the bottom so cards with
   one-line and two-line titles still end at the same height. */
.hm-vcount {
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    gap: 3px;
    flex: 0 0 auto;
    margin-top: 2px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--primary-strong);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}
.hm-vcount svg { width: 10px; height: 10px; }

.hm-card-cta {
    display: block;
    margin-top: 9px;
    padding: 9px 10px;
    border: 1px solid var(--primary);
    border-radius: 11px;
    color: var(--primary);
    font-size: 11.5px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.hm-card:hover .hm-card-cta { background: var(--primary); color: #fff; }

/* --------------------------------------------------------------------- grid */
/* index.php scrolls its cards in .hm-rail and products.php lays them out in
   .sx-grid; pages that just need a plain responsive grid use this. */
.pc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* ========================================================== 901px and up */
@media (min-width: 901px) {
    .hm-card-title { font-size: 13.5px; }
    .hm-price strong { font-size: 15px; }
    .hm-card-cta { font-size: 12.5px; padding: 10px; }

    .pc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}

@media (min-width: 1200px) {
    .pc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ========================================================== 900px and down */
/* Tighter card for phones. It was 228 x 429 with a square 226px image — the
   picture alone was more than half the card. A 4:3 image plus tighter spacing
   brings it down without shrinking the two things that matter: the price and
   the vendor count. */
@media (max-width: 900px) {
    .hm-card-media { aspect-ratio: 4 / 3; }
    .hm-card-media img { padding: 7px; }
    .hm-stock { inset-inline-start: 6px; top: 6px; padding: 1px 6px; font-size: 9px; }

    .hm-card-body { gap: 3px; padding: 9px 10px 10px; }
    .hm-card-title { font-size: 11.5px; line-height: 1.6; min-height: 2.6em; }
    .hm-card-brand { font-size: 9.5px; }

    .hm-card-foot { padding-top: 7px; gap: 6px; }
    .hm-price-k { font-size: 9px; }
    .hm-price strong { font-size: 12.5px; }
    .hm-price .hm-price-na { font-size: 11px; }
    .hm-vcount { margin-top: 1px; padding: 2px 7px; font-size: 9px; gap: 2px; }
    .hm-vcount svg { width: 9px; height: 9px; }

    .hm-card-cta { margin-top: 7px; padding: 7px 8px; font-size: 10.5px; border-radius: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-card, .hm-card-cta { transition: none; }
    .hm-card:hover { transform: none; }
}