/* ============================================================================
   ShivaDent — home product card "specimen tray" (Part 7 / Phase C).
   Designed in Claude Design, approved via design_handoff_product_card/preview.html,
   implemented by Claude Code. Load AFTER front.css; pairs with
   resources/views/partials/product-card.blade.php. Fonts (iransans/iransans2/
   iransansmed) come from assets/new/css/font.css.

   Scoped to `.sd-card` so it only touches the new card. Two coexistence facts the
   rails impose (they are wrapped in UIkit `.uk-light`, and `.product-slider` is also
   used by the product-detail page with the OLD cards):
     1. `.uk-light` forces white text via `.uk-light h3`/`.uk-light a` (spec 0,1,1);
        the coexistence block below re-asserts the card's colors at higher spec.
     2. rail-cell padding + all card rules are scoped so the product-detail rail and
        every other page are untouched.
   ============================================================================ */

:root{ --sd-teal-100:#d1ebe4; }   /* the one brand tint front.css :root doesn't define */

/* rail cell — only cells holding the NEW card (product-detail rail keeps its spacing).
   FIXED width so the card's width never fluctuates across breakpoints (this overrides
   UIkit's uk-child-width-1-2/3/4/5 fractions); the slider simply shows fewer cards and
   scrolls on smaller screens. With the fixed desktop card height this locks the card's
   width:height ratio. box-sizing:border-box so the width includes the cell padding. */
.product-slider .uk-slider-items > li:has(> .sd-card){ box-sizing:border-box; width:300px; min-width:300px; padding:12px 8px 20px; }

/* ---------- card shell ---------- */
.sd-card{ position:relative; display:flex; flex-direction:column; border-radius:24px; color:var(--sd-ink); transition:transform .28s ease, box-shadow .28s ease; }
.sd-card:hover{ transform:translateY(-4px); box-shadow:0 24px 46px -22px rgba(35,49,45,.30); }

/* ---------- image plate (the signature) ---------- */
.sd-plate{ position:relative; width:100%; height:300px; overflow:hidden; border-radius:24px 24px 0 0; display:flex; align-items:center; justify-content:center; padding:22px; background:linear-gradient(140deg,var(--sd-teal-050),var(--sd-teal-100)); }
.sd-card.is-oos .sd-plate{ background:#eef1f0; filter:grayscale(1); }
.sd-plate-link{ position:absolute; inset:0; z-index:1; }              /* image area → product page */
.sd-photo{ max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply; transition:transform .5s cubic-bezier(.2,.7,.2,1); }  /* .sd-photo (0,1,0) beats legacy .product-slider ul li img (0,0,3) */
.sd-card:hover .sd-photo{ transform:scale(1.06); }
.sd-card.is-oos .sd-photo{ opacity:.6; }

/* ---------- badges (top-right) ---------- */
.sd-badge{ position:absolute; top:16px; inset-inline-end:16px; z-index:3; display:inline-flex; align-items:center; gap:6px; font-family:'iransans2',sans-serif; font-weight:700; font-size:11px; padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.9); background:linear-gradient(135deg,rgba(255,255,255,.46),rgba(255,255,255,.05)); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:inset 0 2px 4px rgba(255,255,255,.8),0 4px 10px rgba(0,0,0,.05); }
/* sale badge now shows the discount % (e.g. ۲۰٪) — bigger, bolder, more opaque
   background for legibility over the teal plate; no star icon */
.sd-badge.sale{ color:var(--sd-red-700); font-size:16px; font-weight:800; padding:7px 14px; background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.62)); }
.sd-badge.oos{ color:#5a5a5a; }

/* ---------- tools: favorite + compare (top-left, glass). Do NOT put the legacy
   add-to-hart / add-to-hart1 / add-to-compros classes on these buttons — front.css
   styles them (position:absolute, padding !important) and hijacks the layout; the
   layout JS never targets them. It only needs id="fav_{id}" (icon swap; the swapped
   icon's .fav-heart-on red comes from front.css). ---------- */
.sd-tools{ position:absolute; top:16px; inset-inline-start:16px; z-index:3; display:flex; flex-direction:column; gap:10px; }
/* P12: the 40px glass disc is gone — bare glyph, like every other icon on the site.
   These sit on top of the product plate, so a soft drop-shadow replaces the disc as
   the thing that keeps them legible against a busy photo. */
.sd-tool{ width:34px; height:34px; padding:0; border:0; background:none; display:flex; align-items:center; justify-content:center; color:var(--sd-ink); cursor:pointer; font-size:30px; line-height:1; filter:drop-shadow(0 1px 2px rgba(255,255,255,.9)) drop-shadow(0 2px 6px rgba(26,62,55,.25)); transition:color .2s ease, transform .2s ease; }
.sd-tool:hover{ transform:scale(1.14); }
.sd-tool.fav:hover{ color:var(--sd-red-500); }
.sd-tool.fav.on{ color:var(--sd-red-500); }
.sd-tool.cmp:hover{ color:var(--sd-teal-600); }
/* the favorite JS injects <i class="fa-heart fav-heart-on"> (front.css makes it 25px);
   keep it at the tool's own size + red so the heart doesn't jump when toggled */
.sd-tool .fav-heart-on{ font-size:30px; color:var(--sd-red-500); }
/* Part 9 / S2: the heart is chrome, not content — hide it until the card is
   hovered. It stays put when the product IS a favourite: `.on` is the
   server-rendered state, `:has(.fav-heart-on)` the one the AJAX toggle leaves
   behind. Pointer-devices only, or it would be unreachable on touch. */
@media (hover:hover) and (pointer:fine){
  .sd-card .sd-tool.fav{ opacity:0; transition:opacity .2s ease, color .2s ease, transform .2s ease; }
  .sd-card:hover .sd-tool.fav,
  .sd-card .sd-tool.fav.on,
  .sd-card .sd-tool.fav:has(.fav-heart-on),
  .sd-card .sd-tool.fav:focus-visible{ opacity:1; }
}

/* ---------- info panel (overlaps the plate from below) ---------- */
.sd-body{ position:relative; z-index:2; margin-top:-32px; background:#fff; border-radius:24px; padding:20px; display:flex; flex-direction:column; box-shadow:0 -12px 25px -10px rgba(0,0,0,.08); border:1px solid #eef1f0; }
.sd-title-link{ text-decoration:none; color:inherit; }
/* always reserve TWO lines so a short (1-line) and a long (2-line) name occupy the
   same height → every panel lines up. Clamps at 2 lines. */
.sd-title{ min-height:44px; margin:0 0 8px; font-family:'iransans2',sans-serif; font-weight:700; font-size:15px; line-height:1.45; color:var(--sd-ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sd-card.is-oos .sd-title{ color:#8a938f; }

.sd-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.sd-chip{ font-size:10px; font-family:'iransansmed','iransans',sans-serif; color:var(--sd-muted); background:#f8faf9; border:1px solid var(--sd-line); padding:2px 8px; border-radius:6px; text-decoration:none; transition:color .2s ease, background .2s ease, border-color .2s ease; }
.sd-chip:hover{ color:var(--sd-teal-600); background:var(--sd-teal-050); border-color:var(--sd-teal-100); }

/* footer: price / status ONLY (no action button — the whole card links to the product
   page, so the price gets the full panel width and can never overflow). Right-aligned.
   RTL price line hugs the right: the number is first in source (→ renders on the RIGHT)
   and "تومان" comes after it (→ LEFT of the number). A discounted old price sits on the
   line UNDER the main price; a visible-price call item adds a small «نیاز به استعلام». */
.sd-foot{ display:flex; flex-direction:column; }   /* sits right under the chips/title — no filler gap */
/* price row: the price on the RIGHT, and (when a product shows BOTH a price and a
   call-for-price note) the «نیاز به استعلام قیمت» note beside it on the LEFT. */
.sd-price-row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.sd-price-line{ display:flex; align-items:baseline; gap:4px; justify-content:flex-start; }   /* RTL flex-start = right */
.sd-price-now{ font-family:'iransans2',sans-serif; font-weight:700; font-size:20px; line-height:1.1; color:var(--sd-ink); white-space:nowrap; }
.sd-price-unit{ font-size:11px; color:var(--sd-muted); white-space:nowrap; }
.sd-price-old{ font-size:12px; color:var(--sd-red-500); line-height:1; margin-top:3px; text-align:right; }
.sd-callnote{ font-size:10px; color:var(--sd-teal-600); text-align:left; white-space:nowrap; }
.sd-status{ min-height:22px; display:flex; align-items:center; justify-content:flex-start; text-align:right; font-family:'iransans2',sans-serif; font-weight:700; font-size:14px; line-height:1.4; }
.sd-status.call{ color:var(--sd-teal-600); }
.sd-status.oos{ color:var(--sd-red-700); }

/* ---------- coexistence: re-assert colors above UIkit `.uk-light` (which forces
   white text on h3/a inside the rails). All scoped to `.sd-card`. ---------- */
.sd-card .sd-title{ color:var(--sd-ink); }
.sd-card.is-oos .sd-title{ color:#8a938f; }
.sd-card .sd-title-link{ color:inherit; }
.sd-card .sd-chip{ color:var(--sd-muted); }
.sd-card .sd-chip:hover{ color:var(--sd-teal-600); }

/* focus-visible for keyboard users */
.sd-tool:focus-visible, .sd-plate-link:focus-visible, .sd-chip:focus-visible, .sd-title-link:focus-visible{ outline:2px solid var(--sd-teal-600); outline-offset:2px; }

/* ---------- DESKTOP: fixed card height + bottom-anchored panel that grows UP over
   the photo (chips reveal on hover; card height never changes).
   The explicit min-width bound keeps this and the compact block below mutually
   exclusive, so browser zoom (which shrinks the CSS viewport) switches layouts
   cleanly instead of mixing them. ---------- */
@media (hover:hover) and (pointer:fine) and (min-width:641px){
  /* wider + shorter than before (was 264x420). The near-square plate fills the top;
     the info panel overlaps its bottom, hiding a small sliver of the (contained) photo.
     FIXED-height panel: name + specs anchored to the TOP, price pushed to the BOTTOM
     (.sd-foot margin-top:auto), so every panel is identical height no matter what it
     holds (1- or 2-line name, price, price+old, price+note, call, or out-of-stock). */
  .sd-card{ height:340px; }
  /* Part 9 / S2: the plate runs 16px LOWER than it looks. The panel below is
     bottom-anchored at height 120 → its top is y=220, and its 24px top corners
     curve down to y=244. With the plate ending at 232 those corners exposed the
     bare (transparent) card between 232–244, i.e. whatever is behind the rail —
     invisible on the white rails, but an obvious wedge of colour on the teal
     فروش ویژه band. Extending the plate to 248 puts it behind the whole curve.
     padding-bottom absorbs the extra 16px, so the photo does not move. */
  .sd-plate{ position:absolute; top:0; left:0; right:0; height:248px; padding-bottom:38px; }
  /* panel is SHORTER at rest (covers less of the photo); on hover it grows UP to reveal
     the chips and cover a bit more of the photo. Bottom-anchored → it expands upward.
     Both rest and hover heights are fixed, so all cards stay uniform in each state. */
  .sd-body{ position:absolute; left:0; right:0; bottom:0; height:120px; margin-top:0; padding:20px 18px 14px; overflow:hidden; transition:height .3s ease; }
  .sd-card:hover .sd-body{ height:150px; }
  /* specs hidden at rest, revealed on hover as the panel grows */
  .sd-chips{ max-height:0; opacity:0; margin-bottom:0; overflow:hidden; transition:max-height .3s ease, opacity .3s ease; }
  .sd-card:hover .sd-chips{ max-height:24px; opacity:1; }
  .sd-foot{ margin-top:auto; }                      /* price hugs the bottom of the panel */
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .sd-card, .sd-photo, .sd-tool, .sd-btn, .sd-chips{ transition:none; }
  .sd-card:hover, .sd-card:hover .sd-photo, .sd-tool:hover{ transform:none; }
}

/* ---------- MOBILE (the second and only other layout): flow, chips hidden, compact ----------
   Cell = 40vw so ~2.5 cards show per view; min-width floor dropped here (the desktop floor
   would keep them too wide). The plate uses aspect-ratio (same 5:6 proportion as desktop) so
   it scales DOWN with the narrower card and the card keeps its ratio instead of stretching. */
@media (max-width:640px){
  .product-slider .uk-slider-items > li:has(> .sd-card){ width:40vw; min-width:0; padding:8px 5px 14px; }
  .sd-card{ border-radius:18px; }
  .sd-plate{ height:auto; aspect-ratio:1/1; padding:12px; border-radius:18px 18px 0 0; }   /* square + shorter */
  /* fixed-height panel here too (name top, price bottom) so every card is identical */
  .sd-body{ margin-top:-24px; padding:14px 12px 12px; border-radius:18px; height:96px; overflow:hidden; }
  .sd-foot{ margin-top:auto; }
  .sd-title{ font-size:12px; line-height:1.4; min-height:34px; margin-bottom:6px; }   /* 2-line reserve so panels align */
  .sd-chips{ display:none; }                 /* no specs/description on mobile */
  /* the «نیاز به استعلام قیمت» note stacks UNDER the price here (beside is too cramped
     on a narrow card) instead of being hidden */
  .sd-price-row{ flex-direction:column; align-items:flex-start; gap:1px; }
  .sd-callnote{ font-size:9px; line-height:1.2; }
  .sd-price-now{ font-size:14px; }
  .sd-price-unit{ font-size:9px; }
  .sd-price-old{ font-size:10px; }
  .sd-status{ font-size:11px; min-height:22px; }
  .sd-badge{ top:8px; inset-inline-end:8px; padding:3px 8px; }
  .sd-badge.sale{ font-size:10px; }
  .sd-badge.oos{ font-size:9px; }
  .sd-tools{ top:8px; inset-inline-start:8px; gap:7px; }
  .sd-tool{ width:30px; height:30px; font-size:13px; }
  /* no animations on mobile (touch has no hover; keep it snappy) */
  .sd-card, .sd-photo, .sd-tool, .sd-chips{ transition:none; }
  .sd-card:hover, .sd-card:active{ transform:none; box-shadow:none; }
  .sd-card:hover .sd-photo, .sd-card:active .sd-photo{ transform:none; }
  .sd-tool:hover, .sd-tool:active{ transform:none; }
}