/* ============================================================================
   assets/msera-card.css — THE Master Product Card.

   Pairs with includes/components/product-card.php. Every listing on the site
   renders that component, so this is the only place card styling lives.

   Everything reads the CSS custom properties printed by ms_card_style_vars()
   (Admin → Website Management → Product Card Settings), which is why changing
   a setting instantly restyles every card on every page.

   Selectors are deliberately compound (.ms-pcard, .ms-pcard .x)
   so this file always wins over the older per-page card rules that are still
   present in shop.php / index.php, no matter what order the sheets load in.
   ========================================================================== */

:root{
  --pc-green:#0E2A1B;
  --pc-green-soft:#1C3829;
  --pc-gold:#C9A227;
  --pc-cream:#F7F3EA;
  --pc-line:#ECE7DC;
  --pc-ink:#1b1b1b;
  --pc-mut:#7C8A80;
  --pc-sale:#C0392B;
  /* Fallbacks — ms_card_style_vars() overrides these inline in the page head. */
  --pc-radius:18px; --pc-pad:18px; --pc-gap:24px;
  --pc-shadow:0 2px 10px rgba(14,42,27,.06);
  --pc-shadow-hover:0 10px 26px rgba(14,42,27,.12);
  --pc-img-ratio:1/1; --pc-img-fit:contain; --pc-img-pad:8%;
  --pc-lift:-4px; --pc-zoom:1.06;
  --pc-title-font:"Cormorant Garamond",Georgia,serif;
  --pc-title-size:19px; --pc-title-weight:600;
}

/* ───────────────────────── Card shell ───────────────────────── */
.ms-pcard{
  display:flex; flex-direction:column;
  position:relative;
  background:#fff;
  border:1px solid var(--pc-line);
  border-radius:var(--pc-radius);
  box-shadow:var(--pc-shadow);
  overflow:hidden;
  min-width:0;
  height:100%;                       /* equal heights inside any grid/rail */
  max-height:none;
  padding:0;
  transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
  cursor:default;
  text-align:left;
}
.ms-pcard:hover{
  transform:translateY(var(--pc-lift));
  box-shadow:var(--pc-shadow-hover);
  border-color:#DED6C6;
}
.ms-pcard.ms-card-soldout{opacity:.82}

/* ───────── Badge strip (above the image) ─────────
   Badges left, wishlist right. min-height is reserved whether or not this
   product has badges, so every card in a row stays exactly the same height. */
.ms-pcard .ms-pc-top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
  padding:10px var(--pc-pad) 0;
  min-height:34px;
  flex:0 0 auto;
}
.ms-pcard .ms-pc-badges{
  display:flex; flex-wrap:wrap; gap:5px; min-width:0; flex:1 1 auto;
}

/* ───────────────────────── Media (perfect square) ─────────────────────────
   aspect-ratio reserves the box before the lazy image loads → no layout shift. */
.ms-pcard .ms-pc-media{
  position:relative;
  width:100%; height:auto;
  aspect-ratio:var(--pc-img-ratio);
  background:#fff;                    /* clean white square, like the reference */
  border-radius:0;
  border:0;
  overflow:hidden;
  display:block;
  flex:0 0 auto;
  /* Full-bleed square: the photo spans the whole card width, the way the
     reference does. The card's own overflow:hidden clips the corners. */
  margin:4px 0 0;
}
.ms-pcard .ms-pc-imglink{position:absolute;inset:0;display:block;text-decoration:none}
.ms-pcard .ms-pc-img,
.ms-pcard img.ms-card-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:var(--pc-img-fit);
  object-position:center;
  /* The photo fills the square up to the admin "Image Size" setting. */
  padding:var(--pc-img-pad);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  background:transparent;
  border-radius:0;
  /* If a product photo is missing, degrade to the empty tinted box instead of
     spilling alt text across the card. The alt attribute is untouched, so
     screen readers still announce the product name. */
  color:transparent; font-size:0; overflow:hidden;
}
.ms-pcard:hover .ms-pc-img{transform:scale(var(--pc-zoom))}
.ms-pcard .ms-pc-badge{
  display:inline-block;
  padding:4px 9px;
  border-radius:6px;
  background:var(--pc-green); color:#fff;
  font-family:"Inter",system-ui,sans-serif;
  font-size:10px; font-weight:700; line-height:1.35;
  letter-spacing:.03em; white-space:nowrap;
  /* A long badge ("Third Flush (Autumn)") truncates cleanly instead of being
     clipped mid-word by the card edge. */
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
  box-shadow:0 1px 4px rgba(0,0,0,.10);
}
.ms-pcard .ms-pc-badge--disc{background:var(--pc-sale);color:#fff}
.ms-pcard .ms-pc-badge--flush{background:var(--pc-cream);color:var(--pc-green);border:1px solid #E2DACA}
.ms-pcard .ms-pc-badge--out{background:#6b6b6b;color:#fff}

/* ── Wishlist (top right of the badge strip) ── */
.ms-pcard .ms-pc-wish{
  flex:0 0 auto; z-index:4;
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff;
  border:1px solid var(--pc-line);
  cursor:pointer; padding:0;
  transition:background .25s ease, transform .25s ease, border-color .25s ease;
}
.ms-pcard .ms-pc-wish i{font-size:14px;color:#c9c4bb;transition:color .25s ease,transform .25s ease}
.ms-pcard .ms-pc-wish:hover{background:#fff;transform:scale(1.08);border-color:#f2c9c9}
.ms-pcard .ms-pc-wish:hover i{color:#e05a5a}
.ms-pcard .ms-pc-wish.active i{color:#e0384a;transform:scale(1.12)}

/* ── Quick view ──────────────────────────────────────────────────────────
   A small magnifier tucked into the bottom-left corner of the square, the way
   the reference does it. It never covers the product: the old full-width
   "Quick View" pill sat across the middle of the photo and hid it.          */
.ms-pcard .ms-pc-qvbtn{
  position:absolute; left:10px; bottom:10px; z-index:3;
  width:34px; height:34px; padding:0; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(14,42,27,.10);
  background:rgba(255,255,255,.95); color:var(--pc-green);
  cursor:pointer;
  box-shadow:0 2px 8px rgba(14,42,27,.10);
  opacity:0; transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease, background .25s ease, color .25s ease;
}
.ms-pcard .ms-pc-qvbtn i{font-size:13px}
.ms-pcard:hover .ms-pc-qvbtn,
.ms-pcard:focus-within .ms-pc-qvbtn{opacity:1;transform:translateY(0)}
.ms-pcard .ms-pc-qvbtn:hover{background:var(--pc-green);color:#fff;border-color:var(--pc-green)}

/* ───────────────────────── Body ───────────────────────── */
.ms-pcard .ms-pc-body{
  display:flex; flex-direction:column;
  flex:1 1 auto; min-width:0;
  padding:12px var(--pc-pad) var(--pc-pad);
  gap:6px;
}
.ms-pcard .ms-pc-name{
  margin:0; padding:0; border:0;
  font-family:var(--pc-title-font);
  font-size:var(--pc-title-size);
  font-weight:var(--pc-title-weight);
  line-height:1.3; color:var(--pc-green);
  letter-spacing:0;
  /* Exactly two lines, then an ellipsis — the single biggest cause of
     ragged card heights. Height is fixed, not just clamped. */
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis;
  height:2.6em;
}
.ms-pcard .ms-pc-name a{color:inherit;text-decoration:none}
.ms-pcard .ms-pc-name a:hover{color:var(--pc-gold)}
.ms-pcard .ms-pc-type{
  font-family:"Inter",system-ui,sans-serif;
  font-size:10.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--pc-mut);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Everything from the price down is pinned to the bottom so cards in a row
   line up no matter how long the names are. */
.ms-pcard .ms-pc-foot{margin-top:auto;display:flex;flex-direction:column;gap:7px;padding-top:6px}

/* ── Pack size selector ── */
.ms-pcard .ms-grams,
.ms-pcard .ms-pc-grams{
  display:flex; flex-wrap:wrap; gap:6px;
  margin:2px 0 0; padding:0; list-style:none;
}
.ms-pcard .ms-gram{
  appearance:none;
  font-family:"Inter",system-ui,sans-serif;
  font-size:11.5px; font-weight:600; line-height:1;
  padding:7px 11px; border-radius:999px;
  border:1px solid var(--pc-line); background:#fff; color:#4A5A50;
  cursor:pointer; text-decoration:none;
  transition:all .2s ease;
}
.ms-pcard .ms-gram:hover:not([disabled]){border-color:var(--pc-green);color:var(--pc-green)}
.ms-pcard .ms-gram.active{background:var(--pc-green);border-color:var(--pc-green);color:#fff}
.ms-pcard .ms-gram.soldout,
.ms-pcard .ms-gram[disabled]{
  opacity:.45; cursor:not-allowed;
  text-decoration:line-through; background:#F6F5F1;
}
.ms-pcard .ms-size-error{
  font-family:"Inter",system-ui,sans-serif;
  font-size:11px;color:var(--pc-sale);display:none;margin-top:2px;
}
.ms-pcard .ms-size-error.on{display:block}

/* ── Price ── */
.ms-pcard .ms-pc-price{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:8px;
  font-family:"Inter",system-ui,sans-serif; margin:0; padding:0;
}
.ms-pcard .ms-pc-price .ms-price-now{
  font-size:20px; font-weight:700; color:var(--pc-green); letter-spacing:-.01em;
}
.ms-pcard .ms-pc-price .ms-price-mrp{
  font-size:13px; font-weight:500; color:#A8A296; text-decoration:line-through;
}
.ms-pcard .ms-pc-price .ms-price-save{
  font-size:12px; font-weight:700; color:var(--pc-sale);
}
/* "(28% off)" — plain text beside the prices, exactly like the reference. */
.ms-pcard .ms-pc-price .ms-price-off{
  font-size:12.5px; font-weight:600; color:var(--pc-sale);
}
.ms-qv-price .ms-price-off{
  font-size:13px; font-weight:600; color:var(--pc-sale);
}
.ms-pcard .ms-pc-from{font-size:11px;font-weight:600;color:var(--pc-mut);margin-right:-4px}
.ms-pcard .ms-pc-ppg{
  font-family:"Inter",system-ui,sans-serif;
  font-size:11.5px; font-weight:600; color:var(--pc-mut); margin-top:-3px;
}
.ms-pcard .ms-pc-ppg span{font-weight:500;opacity:.85}

/* ── Product labels ── */
.ms-pcard .ms-pc-labels{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.ms-pcard .ms-pc-lbl{
  font-family:"Inter",system-ui,sans-serif;
  font-size:10px; font-weight:600; line-height:1;
  letter-spacing:.02em;
  padding:5px 9px; border-radius:999px;
  background:var(--pc-cream);
  color:#3F5A48;
  border:1px solid #E7DFCC;
  white-space:nowrap;
}
.ms-pcard .ms-pc-lbl--hid{display:none}
.ms-pcard .ms-pc-labels.open .ms-pc-lbl--hid{display:inline-block}
.ms-pcard .ms-pc-lbl--more{
  cursor:pointer;
  background:#fff; color:var(--pc-green);
  border:1px dashed #D6CDB8;
}
.ms-pcard .ms-pc-lbl--more:hover{background:var(--pc-green);color:var(--pc-cream);border-style:solid}
/* Alternating premium tints so a row of pills reads as a set, not a list. */
.ms-pcard .ms-pc-lbl:nth-child(3n+2){background:#F1F5F0;border-color:#DDE8DC;color:#2F4B3A}
.ms-pcard .ms-pc-lbl:nth-child(3n+3){background:#FBF6E6;border-color:#EDE1BF;color:#6B5410}

/* ── Rating / stock ── */
.ms-pcard .ms-pc-meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:"Inter",system-ui,sans-serif; font-size:11.5px;
}
.ms-pcard .ms-pc-rate{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:#4A5A50}
.ms-pcard .ms-pc-rate i{color:var(--pc-gold);font-size:11px}
.ms-pcard .ms-pc-rate small{font-weight:500;color:var(--pc-mut)}
.ms-pcard .ms-pc-stock{font-weight:600;display:inline-flex;align-items:center;gap:5px}
.ms-pcard .ms-pc-stock::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ms-pcard .ms-pc-stock--in{color:#2E7D32}
.ms-pcard .ms-pc-stock--low{color:#B26A00}
.ms-pcard .ms-pc-stock--pre{color:#1565C0}
.ms-pcard .ms-pc-stock--out{color:#B3261E}

/* ── Add to cart ── */
.ms-pcard .ms-pc-cta{margin-top:6px}
.ms-pcard .ms-pc-cta--hidden{display:none}
.ms-pcard .ms-pc-add{
  width:100%; border:1px solid var(--pc-green); cursor:pointer;
  background:var(--pc-green); color:#fff;
  font-family:"Inter",system-ui,sans-serif;
  font-size:12px; font-weight:600; letter-spacing:.01em;
  padding:11px 10px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  white-space:nowrap;                     /* never wrap to two lines */
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.ms-pcard .ms-pc-add i{font-size:12px;flex:0 0 auto}
/* On the narrowest cards the bag icon goes, so the words always fit. */
@media (max-width:400px){ .ms-pcard .ms-pc-add i{display:none} }
.ms-pcard .ms-pc-add:hover:not([disabled]){background:var(--pc-gold);border-color:var(--pc-gold);color:#1a1a00}
.ms-pcard .ms-pc-add[disabled]{background:#EDEAE3;border-color:#EDEAE3;color:#9A948A;cursor:not-allowed}
.ms-pcard .ms-pc-add.is-busy{opacity:.75;pointer-events:none}
.ms-pcard .ms-pc-add.is-done{background:#246B2C;border-color:#246B2C;color:#fff}

/* ───────────────────────── Grids & rails ─────────────────────────
   One column scheme for every product grid on the site, so Shop, Wishlist,
   Related, the Offers sale grid and any future listing line up identically:
       ≥1600px  5 across      ≥1100px  4 across (desktop / laptop)
       ≥760px   3 across (tablet)      <760px   2 across (mobile)
   No horizontal scrolling at any width.                                    */
/* ONE grid class for every product listing on the site. It is deliberately a
   new name: eight competing `.products-grid` / `.ymal-grid` / `.wishlist-grid`
   rules survive across monk-sera-premium.css, msera-shop.css, msera-home.css
   and the pages' inline blocks — several of them !important — and they fought
   the column count. Nothing legacy targets .ms-pcard-grid. */
.ms-pcard-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--pc-gap);
  align-items:stretch;
}
@media (min-width:1600px){
  .ms-pcard-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:1240px){
  .ms-pcard-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){
  .ms-pcard-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (max-width:400px){
  .ms-pcard-grid{gap:10px}
}
/* Shop keeps a filter sidebar, so its grid area is ~330px narrower than the
   viewport — step down one column earlier there to keep the squares generous. */
@media (min-width:1241px) and (max-width:1460px){
  .ms-shop-layout .ms-pcard-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Horizontal rails (homepage) keep the same card, just scrolled. */
.ms-pop-rail{gap:var(--pc-gap);align-items:stretch}
.ms-pop-rail > .ms-pcard{flex:0 0 clamp(220px,25vw,280px);scroll-snap-align:start}
@media (max-width:760px){
  .ms-pop-rail > .ms-pcard{flex:0 0 min(62vw,240px)}
}
/* The card carries no legacy class names, so no old rule can reach it. */

/* ───────────────────────── Shared Quick-View popup ───────────────────────── */
.ms-qv{
  position:fixed; inset:0; z-index:10050;
  background:rgba(14,42,27,.62);
  backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.ms-qv.open{display:flex}
.ms-qv-box{
  background:#fff; border-radius:20px; overflow:hidden;
  width:min(880px,100%); max-height:min(90vh,720px);
  display:grid; grid-template-columns:1fr 1fr;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  position:relative;
}
.ms-qv-close{
  position:absolute; top:12px; right:12px; z-index:2;
  width:36px; height:36px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.95); color:#333; font-size:16px; line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.ms-qv-img{background:linear-gradient(160deg,#FCFBF7,#F1EDE2);display:grid;place-items:center;padding:22px;min-height:260px}
.ms-qv-img img{max-width:100%;max-height:380px;object-fit:contain}
.ms-qv-info{padding:28px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.ms-qv-type{font-family:"Inter",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pc-gold)}
.ms-qv-name{font-family:var(--pc-title-font);font-size:26px;font-weight:600;color:var(--pc-green);margin:0;line-height:1.2}
.ms-qv-price{display:flex;align-items:baseline;gap:10px;font-family:"Inter",sans-serif;flex-wrap:wrap}
.ms-qv-price .ms-price-now{font-size:24px;font-weight:700;color:var(--pc-green)}
.ms-qv-price .ms-price-mrp{font-size:15px;color:#A8A296;text-decoration:line-through}
.ms-qv-price .ms-price-save{font-size:13px;font-weight:700;color:var(--pc-sale)}
.ms-qv-desc{font-size:13.5px;line-height:1.65;color:#5A6560;margin:0}
.ms-qv-labels{display:flex;flex-wrap:wrap;gap:5px}
.ms-qv-labels .ms-pc-lbl{font-size:10px}
.ms-qv-act{display:flex;gap:10px;margin-top:auto;padding-top:12px;flex-wrap:wrap}
.ms-qv-act form{flex:1 1 160px;margin:0}
.ms-qv-act .ms-pc-add{width:100%}
.ms-qv-full{
  flex:1 1 130px; text-align:center; text-decoration:none;
  font-family:"Inter",sans-serif;font-size:12.5px;font-weight:600;
  padding:11px 14px;border-radius:10px;
  border:1px solid var(--pc-line);color:var(--pc-green);
  display:inline-flex;align-items:center;justify-content:center;
}
.ms-qv-full:hover{border-color:var(--pc-green);background:var(--pc-cream)}

/* ───────────────────────── Responsive ─────────────────────────
   The square never changes shape — only the padding around the photo and the
   type scale tighten, so the image keeps filling ~80% of the card at every
   width instead of shrinking into white space.                             */
/* NOTE: the admin settings are printed as a `:root{…}` block in the page head,
   which always beats a `:root` rule inside a media query here. So every
   responsive tweak below is applied to the ELEMENT, never by redeclaring the
   custom property — that way the admin's value stays the baseline and these
   only adjust it. */
@media (max-width:1240px){
  .ms-pcard img.ms-pc-img{padding:calc(var(--pc-img-pad) + 2%)}   /* tablet → photo ≈ 80% */
  .ms-pcard .ms-pc-price .ms-price-now{font-size:18.5px}
}
@media (max-width:860px){
  .ms-qv-box{grid-template-columns:1fr;max-height:92vh}
  .ms-qv-img{min-height:200px;padding:16px}
  .ms-qv-img img{max-height:220px}
  .ms-qv-info{padding:20px}
  .ms-qv-name{font-size:22px}
}
@media (max-width:700px){
  .ms-pcard img.ms-pc-img{padding:calc(var(--pc-img-pad) + 3%)}   /* mobile → photo ≈ 78% */
  .ms-pcard .ms-pc-top{min-height:30px;padding:8px 12px 0}
  .ms-pcard .ms-pc-body{padding:10px 12px 12px}
  .ms-pcard .ms-pc-name{font-size:calc(var(--pc-title-size) - 3px)}
  .ms-pcard .ms-pc-type{font-size:9.5px;letter-spacing:.09em}
  .ms-pcard .ms-pc-price{gap:6px}
  .ms-pcard .ms-pc-price .ms-price-now{font-size:16.5px}
  .ms-pcard .ms-pc-price .ms-price-mrp{font-size:12px}
  .ms-pcard .ms-pc-price .ms-price-save{font-size:11px}
  .ms-pcard .ms-pc-badge{font-size:9px;padding:3px 7px}
  .ms-pcard .ms-pc-wish{width:28px;height:28px}
  .ms-pcard .ms-pc-wish i{font-size:12px}
  .ms-pcard .ms-gram{font-size:10.5px;padding:6px 9px}
  .ms-pcard .ms-pc-lbl{font-size:9px;padding:4px 7px}
  .ms-pcard .ms-pc-ppg{font-size:10.5px}
  .ms-pcard .ms-pc-meta{font-size:10.5px;gap:8px}
  .ms-pcard .ms-pc-add{font-size:11.5px;padding:10px 12px}
  /* Touch devices have no hover — keep the magnifier visible, still in the
     corner so it never covers the product. */
  .ms-pcard .ms-pc-qvbtn{opacity:1;transform:none;width:30px;height:30px;left:8px;bottom:8px}
  .ms-pcard .ms-pc-qvbtn i{font-size:12px}
}
/* Small phones and foldables in portrait keep 2 across — never 1, never a
   sideways scroll. Only the type gets tighter. */
@media (max-width:400px){
  .ms-pcard .ms-pc-top{padding:7px 10px 0}
  .ms-pcard .ms-pc-body{padding:9px 10px 10px}
  .products-grid.products-grid,.ymal-grid.ymal-grid,.wishlist-grid.wishlist-grid,
  .ms-sale-grid.ms-sale-grid,.ms-pcard-grid.ms-pcard-grid{gap:10px}
  .ms-pcard .ms-pc-price .ms-price-now{font-size:15px}
}
/* Landscape phones: shallow viewports shouldn't force a giant square. */
@media (max-height:520px) and (orientation:landscape){
  .ms-qv-box{max-height:96vh}
  .ms-qv-img{min-height:140px}
  .ms-qv-img img{max-height:150px}
}

/* Accessibility: visible focus, and no motion for those who ask for none. */
.ms-pcard a:focus-visible,
.ms-pcard button:focus-visible{outline:2px solid var(--pc-gold);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  .ms-pcard, .ms-pcard *{transition:none !important; animation:none !important}
  .ms-pcard:hover{transform:none}
  .ms-pcard:hover .ms-pc-img{transform:none}
}