/* ===========================================================================
   Monk Sera — Shop + Product Page Polish (NEW, override-only).
   Loaded AFTER shop.php inline styles. Scoped to existing classes. Safe.
   =========================================================================== */

/* ---- Product grid: guarantee clean 2-col on phones, prevent overflow ---- */
@media (max-width:760px){
  .products-grid{ grid-template-columns:repeat(2,1fr) !important; gap:13px !important; }
}
@media (max-width:380px){
  .products-grid{ gap:10px !important; }
}

/* ---- Product card: refined lift + image zoom ---- */
.product-card{ transition:transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s !important; }
.product-card:hover{ transform:translateY(-6px) !important; box-shadow:0 18px 48px rgba(14,42,27,.14) !important; }
.product-image-wrap{ overflow:hidden; }
.product-image-wrap img{ transition:transform .7s cubic-bezier(.4,0,.2,1) !important; }
.product-card:hover .product-image-wrap img{ transform:scale(1.06) !important; }

/* ---- Toolbar / filter chips: tap-friendly, premium ---- */
@media (max-width:600px){
  .shop-toolbar{ gap:10px !important; margin:14px 0 22px !important; }
  .shop-toolbar > *{ flex:1 1 auto; }
}

/* ---- Shop hero spacing ---- */
@media (max-width:768px){
  .shop-hero{ padding-top:36px !important; padding-bottom:28px !important; }
  .shop-hero h1{ font-size:clamp(1.8rem,7vw,2.6rem) !important; }
}

/* ---- PDP gallery: cleaner thumbnails + active state ---- */
.thumbs-row .thumb{ transition:border-color .2s, opacity .2s, transform .2s !important; cursor:pointer; }
.thumbs-row .thumb:hover{ transform:translateY(-2px); }
@media (max-width:900px){
  .detail-gallery{ position:static !important; } /* unstick on mobile to avoid jump */
}

/* ---- PDP price emphasis ---- */
.detail-price{ letter-spacing:-.01em; }

/* ---- Variant buttons: clearer selected/hover ---- */
.variant-btn{ transition:all .25s cubic-bezier(.4,0,.2,1) !important; }
.variant-btn:hover{ transform:translateY(-1px); }

/* ---- Add to cart: premium hover (transition only; no color override) ---- */
.btn-add-to-cart{ transition:filter .25s, transform .2s, box-shadow .25s !important; }
.btn-add-to-cart:hover{ filter:brightness(1.04); transform:translateY(-1px); box-shadow:0 10px 28px rgba(201,162,39,.30); }
.btn-add-to-cart:active{ transform:translateY(0); }

/* ---- Quantity control tap targets ---- */
@media (max-width:600px){
  .qty-btn{ min-width:42px; min-height:42px; }
}

/* ---- Breadcrumb subtlety ---- */
.breadcrumb a{ transition:color .2s; }

/* ---- Detail layout breathing room on mobile ---- */
@media (max-width:768px){
  .detail-grid{ gap:28px !important; }
  .detail-name{ font-size:clamp(1.7rem,6vw,2.4rem) !important; line-height:1.12 !important; }
}

@media (prefers-reduced-motion:reduce){
  .product-card,.product-image-wrap img,.variant-btn,.btn-add-to-cart,.thumbs-row .thumb{ transition:none !important; }
  .product-card:hover,.product-card:hover .product-image-wrap img{ transform:none !important; }
}

/* ===========================================================================
   PDP PROFESSIONAL REFINEMENT (added) — editorial buy-box, gallery, tabs,
   variants, trust bar. Override-only, scoped to existing detail-page classes.
   =========================================================================== */

/* Gallery — premium framed stage + active thumbnail ring */
.detail-gallery .slider-stage{
  border-radius:20px;
  box-shadow:0 18px 50px rgba(14,42,27,.10);
  border:1px solid rgba(14,42,27,.06);
}
.thumbs-row .thumb{ border-radius:12px; overflow:hidden; border:1.5px solid transparent; }
.thumbs-row .thumb.active{ border-color:#C9A227; box-shadow:0 4px 14px rgba(201,162,39,.25); }

/* Category pill + title/price hierarchy */
.detail-cat{ border-radius:999px; padding:6px 14px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; font-size:10.5px; }
.detail-name{ letter-spacing:-.02em; }
.detail-price{ font-weight:800; }
.detail-price .cur{ font-weight:600; opacity:.82; }
.detail-rating-row .stars i.filled{ color:#C9A227; }

/* Stock pill */
.stock-pill{ border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.3px; padding:7px 14px; }

/* Variant buttons — clear selected ring */
.variant-btn{ border-radius:14px !important; }
.variant-btn.active{
  border-color:#0E2A1B !important;
  box-shadow:0 0 0 2px rgba(14,42,27,.12), 0 6px 18px rgba(14,42,27,.10);
}

/* Tabs — refined underline + readable panels */
.product-tabs{ gap:6px; border-bottom:1px solid rgba(14,42,27,.08); }
.tab-btn{ padding:12px 4px !important; font-size:12.5px; letter-spacing:.6px; }
.tab-panel{ line-height:1.85; }
.details-table td{ padding:11px 4px; }

/* Feature pills */
.features-grid .feat{ border:1px solid rgba(14,42,27,.08); border-radius:12px; background:#fff; }

/* Buy box — frame the add-to-cart area as a defined module */
.cart-section{ margin-top:24px; padding-top:24px; border-top:1px solid rgba(14,42,27,.08); }
.btn-add-to-cart{ border-radius:999px !important; letter-spacing:1.2px; font-weight:700; }

/* Trust row — even segmented bar */
.trust-row{ display:flex; margin-top:20px; gap:0 !important; border:1px solid rgba(14,42,27,.07); border-radius:14px; overflow:hidden; }
.trust-item{ flex:1; justify-content:center; padding:12px 8px; border-right:1px solid rgba(14,42,27,.07); font-size:12px; }
.trust-item:last-child{ border-right:none; }
@media (max-width:560px){
  .trust-row{ flex-direction:column; }
  .trust-item{ border-right:none; border-bottom:1px solid rgba(14,42,27,.07); }
  .trust-item:last-child{ border-bottom:none; }
}

/* Section headings */
.reviews-section h2, .ymal-header h2{ letter-spacing:-.01em; }
/* ════════════════════════════════════════════════════════════════════
   PREMIUM SHOP REDESIGN (listing page) — presentation layer only.
   Sticky filter rail + results column, refined cards, trust strip.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --ms-bg:#F8F6F2; --ms-green:#1B3A2D; --ms-gold:#C9A84C;
  --ms-ink:#2D2D2D; --ms-line:#E8E4DD; --ms-ease:200ms cubic-bezier(.4,0,.2,1);
}

/* ── Layout shell ── */
.ms-shop-layout{
  display:grid; grid-template-columns:250px minmax(0,1fr); gap:34px;
  max-width:1280px; margin:26px auto 0; padding:0 20px; align-items:start;
}
.ms-results{min-width:0;}

/* ── Filter rail ── */
.ms-filters{
  position:sticky; top:96px; background:#fff; border:1px solid var(--ms-line);
  border-radius:16px; padding:20px 18px; box-shadow:0 2px 14px rgba(27,58,45,.05);
  max-height:calc(100vh - 120px); overflow-y:auto;
}
.ms-filters-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.ms-filters-head h2{
  font-family:'Cormorant Garamond',Georgia,serif; font-size:20px; font-weight:600;
  color:var(--ms-green); margin:0; letter-spacing:.2px;
}
.ms-filters-close{display:none;border:none;background:none;font-size:26px;line-height:1;color:var(--ms-ink);cursor:pointer;}
.ms-facet{padding:14px 0;border-top:1px solid var(--ms-line);}
.ms-facet:first-of-type{border-top:none;}
.ms-facet h3{
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#8b8577; margin:0 0 10px;
}
.ms-check{
  display:flex; align-items:center; gap:10px; padding:6px 0; cursor:pointer;
  font-size:13.5px; color:var(--ms-ink); transition:color var(--ms-ease);
}
.ms-check:hover{color:var(--ms-green);}
.ms-check input{width:16px;height:16px;accent-color:var(--ms-green);cursor:pointer;flex:0 0 auto;}
.ms-check span{text-transform:capitalize;}
.ms-price input[type=range]{width:100%;accent-color:var(--ms-green);cursor:pointer;}
.ms-price-val{font-size:12.5px;color:#6d675c;margin-top:6px;}
.ms-price-val strong{color:var(--ms-green);}
.ms-clear{
  width:100%; margin-top:14px; padding:10px; border-radius:50px; cursor:pointer;
  border:1.5px solid var(--ms-green); background:#fff; color:var(--ms-green);
  font-size:12.5px; font-weight:700; letter-spacing:.03em; transition:all var(--ms-ease);
}
.ms-clear:hover{background:var(--ms-green);color:#fff;}

/* Mobile filter trigger (hidden on desktop) */
.ms-filter-btn{
  display:none; align-items:center; gap:8px; border:1.5px solid var(--ms-line);
  background:#fff; color:var(--ms-green); border-radius:50px; padding:10px 18px;
  font-size:13px; font-weight:700; cursor:pointer; transition:all var(--ms-ease);
}
.ms-filter-btn:hover{border-color:var(--ms-gold);}
.ms-fcount{
  background:var(--ms-green); color:#fff; border-radius:50px;
  font-size:11px; font-weight:800; padding:1px 7px;
}
.ms-filters-scrim{
  position:fixed; inset:0; background:rgba(27,58,45,.45); z-index:9400;
  opacity:0; transition:opacity var(--ms-ease);
}
.ms-filters-scrim.on{opacity:1;}

/* ── Grid: 4 / 3 / 2, equal heights ── */
.products-grid:not(.list-view){
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:22px !important; align-items:stretch;
}
.products-grid:not(.list-view) .product-card{
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--ms-line); border-radius:16px; overflow:hidden;
  box-shadow:0 2px 10px rgba(27,58,45,.05);
  transition:transform var(--ms-ease), box-shadow var(--ms-ease), border-color var(--ms-ease);
}
.products-grid:not(.list-view) .product-card:hover{
  transform:translateY(-5px); border-color:#dcd4c6;
  box-shadow:0 16px 36px rgba(27,58,45,.13);
}
.products-grid:not(.list-view) .product-info{display:flex;flex-direction:column;flex:1;}
/* Description belongs on the product page, not the listing */
.products-grid:not(.list-view) .product-excerpt{display:none !important;}
/* Push price + cart row to the bottom so every card lines up */
.products-grid:not(.list-view) .product-footer,
.products-grid:not(.list-view) .product-bottom,
.products-grid:not(.list-view) .card-bottom{margin-top:auto;}

/* Secondary image on hover (desktop only, when a 2nd gallery image exists) */
@media (hover:hover) and (min-width:900px){
  .product-card[data-alt]:not([data-alt=""]) .product-image-wrap{position:relative;}
  .product-card[data-alt]:not([data-alt=""]):hover .ms-card-img{opacity:0;}
  .product-card[data-alt]:not([data-alt=""]) .ms-card-alt{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    opacity:0; transition:opacity var(--ms-ease); pointer-events:none;
  }
  .product-card[data-alt]:not([data-alt=""]):hover .ms-card-alt{opacity:1;}
  .ms-card-img{transition:opacity var(--ms-ease), transform var(--ms-ease);}
}

/* ── Toolbar polish ── */
.shop-toolbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--ms-line); border-radius:14px;
  padding:12px 14px; margin-bottom:22px; box-shadow:0 2px 10px rgba(27,58,45,.04);
}
.toolbar-search input:focus, .toolbar-select:focus{
  outline:none; border-color:var(--ms-gold); box-shadow:0 0 0 3px rgba(201,168,76,.16);
}

/* ── Trust strip ── */
.ms-trustbar{margin:46px 0 8px; padding:26px 0; border-top:1px solid var(--ms-line);}
.ms-trustbar-in{
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px; text-align:center;
}
.ms-tb{display:flex;flex-direction:column;align-items:center;gap:9px;}
.ms-tb i{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(201,168,76,.13); color:var(--ms-gold); font-size:16px;
}
.ms-tb span{font-size:12.5px;font-weight:600;color:var(--ms-green);line-height:1.35;}

/* ── Accessibility ── */
.ms-check input:focus-visible, .ms-clear:focus-visible, .ms-filter-btn:focus-visible,
.product-card a:focus-visible, .btn-card-cart:focus-visible{
  outline:2px solid var(--ms-gold); outline-offset:2px;
}

/* ── Responsive ── */
@media (max-width:1100px){
  .products-grid:not(.list-view){grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
@media (max-width:900px){
  .ms-shop-layout{grid-template-columns:1fr; gap:0; margin-top:16px;}
  .ms-filter-btn{display:inline-flex;}
  .ms-filters-close{display:block;}
  .ms-filters{
    position:fixed; top:0; left:0; bottom:0; width:min(86vw,330px); z-index:9500;
    border-radius:0 18px 18px 0; max-height:100vh; transform:translateX(-102%);
    transition:transform 280ms cubic-bezier(.4,0,.2,1); box-shadow:12px 0 40px rgba(27,58,45,.2);
  }
  .ms-filters.on{transform:none;}
  .products-grid:not(.list-view){grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px !important;}
  .ms-trustbar-in{grid-template-columns:repeat(3,1fr); gap:18px 10px;}
}
@media (max-width:520px){
  .ms-trustbar-in{grid-template-columns:repeat(2,1fr);}
  .ms-tb i{width:38px;height:38px;font-size:14px;}
  .ms-tb span{font-size:11.5px;}
}
@media (prefers-reduced-motion:reduce){
  .ms-filters,.product-card,.ms-filters-scrim{transition:none !important;}
}

/* ════════════════════════════════════════════════════════════════════
   COMPACT PRODUCT CARDS — image-led, short, scannable.
   The tall stacked card (category + rating + size chips + description)
   made the grid feel long; the image is the hero now and only the
   essentials sit beneath it.
   ════════════════════════════════════════════════════════════════════ */

/* View toggle is gone */
.view-toggle{display:none !important;}

/* Image is the hero — tall, contained, never cropped */
.products-grid:not(.list-view) .product-image-wrap{
  position:relative; background:#fff; padding:10px 10px 0;
  aspect-ratio:1/1.12; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.products-grid:not(.list-view) .product-image-wrap img{
  width:100% !important; height:100% !important;
  object-fit:contain !important; display:block;
  transition:transform var(--ms-ease);
}
.products-grid:not(.list-view) .product-card:hover .ms-card-img{transform:scale(1.03);}

/* Trim everything that made the card long */
.products-grid:not(.list-view) .product-cat,
.products-grid:not(.list-view) .product-rating,
.products-grid:not(.list-view) .detail-rating-row,
.products-grid:not(.list-view) .product-info .stars,
.products-grid:not(.list-view) .ms-grams{display:none !important;}

/* Tight info block: name, then one clean price line */
.products-grid:not(.list-view) .product-info{padding:12px 14px 14px !important;gap:0;}
.products-grid:not(.list-view) .product-name{
  font-family:'Inter',system-ui,sans-serif !important;
  font-size:14px !important; font-weight:600 !important; line-height:1.4 !important;
  color:var(--ms-ink) !important; margin:0 0 8px !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:39px;
}
.products-grid:not(.list-view) .product-price-row,
.products-grid:not(.list-view) .product-price{
  display:flex !important; align-items:baseline; gap:9px; flex-wrap:wrap; margin:0 !important;
}
.products-grid:not(.list-view) .product-price .price-now,
.products-grid:not(.list-view) .price-current{
  font-size:17px !important; font-weight:800 !important; color:var(--ms-ink) !important;
}
.products-grid:not(.list-view) .product-price s,
.products-grid:not(.list-view) .price-old,
.products-grid:not(.list-view) .price-mrp{
  font-size:13px !important; color:#a09789 !important; font-weight:400 !important;
}
.products-grid:not(.list-view) .price-save,
.products-grid:not(.list-view) .product-price .save{
  font-size:12.5px !important; font-weight:700 !important; color:#d1442f !important;
}

/* Badges: small, squared, top-left — like the reference */
.products-grid:not(.list-view) .product-badges{
  top:10px; left:10px; gap:6px; flex-direction:row; flex-wrap:wrap; max-width:calc(100% - 20px);
}
.products-grid:not(.list-view) .product-badges .badge{
  font-size:10.5px !important; font-weight:700 !important; letter-spacing:.01em;
  padding:4px 9px !important; border-radius:5px !important; line-height:1.3;
}

/* Cart + wishlist stay reachable but stop adding height:
   a compact action row that reveals on hover (always visible on touch). */
.products-grid:not(.list-view) .product-actions{
  margin-top:10px; display:flex; gap:8px; opacity:0; transform:translateY(4px);
  transition:opacity var(--ms-ease), transform var(--ms-ease);
}
.products-grid:not(.list-view) .product-card:hover .product-actions,
.products-grid:not(.list-view) .product-card:focus-within .product-actions{opacity:1;transform:none;}
@media (hover:none){
  .products-grid:not(.list-view) .product-actions{opacity:1;transform:none;}
}
.products-grid:not(.list-view) .btn-card-cart{
  border-radius:10px !important; width:auto !important; flex:1; padding:9px !important;
}

/* Slightly airier gap now that cards are shorter */
.products-grid:not(.list-view){gap:26px !important;}
@media (max-width:900px){
  .products-grid:not(.list-view){gap:14px !important;}
  .products-grid:not(.list-view) .product-name{font-size:13px !important;min-height:36px;}
  .products-grid:not(.list-view) .product-info{padding:10px 11px 12px !important;}
}

/* Real price markup produced by ms_offer_price_html():
   .ms-price > .ms-price-mrp (struck) + .ms-price-now + .ms-price-save        */
.products-grid:not(.list-view) .product-bottom{
  display:flex !important; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:auto;
}
.products-grid:not(.list-view) .ms-price{
  display:flex !important; align-items:baseline; gap:8px; flex-wrap:wrap;
}
.products-grid:not(.list-view) .ms-price-now,
.products-grid:not(.list-view) .product-price{
  font-size:17px !important; font-weight:800 !important; color:var(--ms-ink) !important;
}
.products-grid:not(.list-view) .ms-price-mrp{
  font-size:13px !important; color:#a09789 !important; font-weight:400 !important;
  text-decoration:line-through; order:2;
}
.products-grid:not(.list-view) .ms-price-now{order:1;}
.products-grid:not(.list-view) .ms-price-save{
  order:3; font-size:12px !important; font-weight:700 !important; color:#d1442f !important;
}
/* the "per 100g" / "3 sizes available" helper line is noise in a compact card */
.products-grid:not(.list-view) .ms-card-unit-w,
.products-grid:not(.list-view) .product-bottom > div > div:last-child:not(.product-price){
  font-size:11px !important;
}

/* Uniform card height: fix the title box and let the price row sit flush at the
   bottom, so a longer product name or a missing "Save" chip can't make one card
   taller than its neighbours. */
.products-grid:not(.list-view) .product-name{
  height:39px !important; min-height:39px !important; max-height:39px !important;
}
.products-grid:not(.list-view) .product-info{
  display:flex !important; flex-direction:column; flex:1;
}
.products-grid:not(.list-view) .product-bottom{min-height:44px;}
/* helper lines ("per 100g" / "3 sizes available") must not change card height */
.products-grid:not(.list-view) .product-bottom > div:first-child{
  display:flex; flex-direction:column; justify-content:flex-end; min-height:40px;
}

/* Badges must float OVER the image, not push the card taller — a product with
   two badges was rendering 25px taller than its neighbours. */
.products-grid:not(.list-view) .product-image-wrap{position:relative !important;}
.products-grid:not(.list-view) .product-badges{
  position:absolute !important; top:10px !important; left:10px !important;
  z-index:3; pointer-events:none; margin:0 !important; padding:0 !important;
}

/* Product-label chips ("Best Seller", "Most Loved" …) already appear as badges
   over the image; the in-body chip row only made cards with labels taller. */
.products-grid:not(.list-view) .ms-labels{display:none !important;}


/* ════════════════════════════════════════════════════════════════════
   PRODUCT PAGE — responsive CSS Grid (authoritative; replaces earlier
   PDP rules). Presentation only: no PHP/DOM/business logic touched.

   THE BUG THIS FIXES
   The slider track lays its slides side by side, so its min-content width
   was N × the stage. Without `min-width:0` a grid item refuses to shrink
   below min-content, so the gallery grew past its column and sat on top of
   the product info. Every column/item below is explicitly allowed to
   shrink, and the stage clips its own overflow.
   ════════════════════════════════════════════════════════════════════ */

/* 1 ── Wrapper: no giant empty margins */
.shop-wrap,.detail-wrap{
  max-width:1600px !important; width:95% !important; margin:0 auto !important;
  padding-left:0 !important; padding-right:0 !important;
}

/* 2 ── Thumbnail | Gallery | Info (real grid, no absolute positioning) */
.detail-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1.3fr) minmax(420px,1fr) !important;
  gap:40px !important; align-items:start !important;
}
.detail-grid > *{min-width:0 !important;}          /* allow shrink — kills the overlap */
.detail-gallery{
  display:grid !important; grid-template-columns:90px minmax(0,1fr) !important;
  gap:14px !important; align-items:start !important; min-width:0 !important;
  position:sticky; top:96px;
}
.detail-info{
  align-self:start !important; min-width:0 !important;
  margin:0 !important; transform:none !important; position:static !important;
}

/* 3 ── Gallery container: always contains the image */
.detail-gallery .slider-stage{
  order:2; min-width:0 !important; width:100% !important;
  height:clamp(500px,72vh,760px) !important;
  aspect-ratio:auto !important; max-height:none !important; min-height:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  overflow:hidden !important; border-radius:22px; background:#fff;
  border:1px solid var(--ms-line); padding:20px;
  box-shadow:0 6px 30px rgba(27,58,45,.08);
}
.detail-gallery .slider-track{
  min-width:0 !important; max-width:100% !important; width:100% !important;
  height:100% !important; align-items:center;
}
.detail-gallery .slide{
  min-width:0 !important; width:100% !important; height:100% !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
}

/* 4 ── Image always fits: any aspect ratio, never cropped or stretched */
.detail-gallery .slide img{
  max-width:100% !important; max-height:100% !important;
  width:auto !important; height:auto !important;
  min-height:0 !important; min-width:0 !important;
  object-fit:contain !important; display:block; margin:auto;
}

/* 5 ── Thumbnails 90×110, gold when selected */
.detail-gallery .thumbs-row{
  order:1; display:flex !important; flex-direction:column; gap:10px;
  min-width:0; max-height:clamp(500px,72vh,760px); overflow-y:auto;
  padding:2px; scrollbar-width:none;
}
.detail-gallery .thumbs-row::-webkit-scrollbar{display:none;}
.detail-gallery .thumb{
  width:90px !important; height:110px !important; flex:0 0 110px;
  border:1.5px solid var(--ms-line) !important; border-radius:12px;
  overflow:hidden; background:#fff; cursor:pointer;
  transition:border-color var(--ms-ease), box-shadow var(--ms-ease), transform var(--ms-ease);
}
.detail-gallery .thumb img{width:100%;height:100%;object-fit:contain;padding:7px;}
.detail-gallery .thumb:hover{transform:translateY(-2px);border-color:#d8cfbd !important;}
.detail-gallery .thumb.active{
  border-color:var(--ms-gold) !important; box-shadow:0 4px 14px rgba(201,168,76,.30);
}

/* 6 ── Badges: flex row, wraps, never overlaps, never absolute */
.ms-badgerow{
  display:flex !important; flex-wrap:wrap !important; gap:8px !important;
  align-items:center; position:static !important; margin:10px 0 6px;
}
.ms-badge-pill,.ms-flush-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 14px; border-radius:8px; font-size:11.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; line-height:1.25;
  white-space:nowrap; position:static !important;
}
.ms-flush-pill{border:1px solid rgba(27,58,45,.14);}
.ms-pdp-badges{margin-bottom:14px;}

/* 7 ── Breakpoints */
@media (min-width:1600px){                       /* large desktop */
  .detail-grid{grid-template-columns:minmax(0,1.45fr) minmax(460px,1fr) !important;gap:52px !important;}
  .detail-gallery{grid-template-columns:96px minmax(0,1fr) !important;}
}
@media (max-width:1199px){                       /* laptop */
  .detail-grid{grid-template-columns:minmax(0,1.15fr) minmax(360px,1fr) !important;gap:28px !important;}
  .detail-gallery{grid-template-columns:80px minmax(0,1fr) !important;}
  .detail-gallery .thumb{width:80px !important;height:100px !important;flex-basis:100px;}
  .detail-gallery .slider-stage{height:clamp(440px,62vh,660px) !important;}
}
@media (max-width:991px){                        /* tablet: stack, thumbs horizontal */
  .detail-grid{grid-template-columns:1fr !important;gap:24px !important;}
  .detail-gallery{
    position:static; grid-template-columns:1fr !important; gap:12px !important;
  }
  .detail-gallery .slider-stage{order:1;height:clamp(380px,55vh,560px) !important;}
  .detail-gallery .thumbs-row{
    order:2; flex-direction:row !important; overflow-x:auto; overflow-y:hidden;
    max-height:none; padding-bottom:4px;
  }
  .detail-gallery .thumb{width:80px !important;height:100px !important;flex:0 0 80px;}
}
@media (max-width:767px){                        /* mobile: fully stacked */
  .shop-wrap,.detail-wrap{width:100% !important;padding:0 14px !important;}
  .detail-grid{gap:18px !important;}
  .detail-gallery .slider-stage{height:clamp(320px,50vh,460px) !important;padding:12px;border-radius:16px;}
  .detail-gallery .thumb{width:70px !important;height:90px !important;flex:0 0 70px;}
  .ms-badge-pill,.ms-flush-pill{font-size:10.5px;padding:5px 11px;}
}

/* 8 ── Nothing on this page may cause sideways scroll */
.detail-grid,.detail-gallery,.detail-info,.detail-wrap,.shop-wrap{max-width:100%;}

/* Base theme sets .slider-stage{aspect-ratio:1/1; max-height:420px}, which beat
   our height clamp (max-height always wins over height). Neutralise both so the
   responsive clamp actually drives the gallery height at every breakpoint. */
.detail-gallery .slider-stage{aspect-ratio:auto !important;max-height:none !important;}
@media (max-width:1199px){.detail-gallery .slider-stage{max-height:none !important;}}
@media (max-width:991px){ .detail-gallery .slider-stage{max-height:none !important;}}
@media (max-width:767px){ .detail-gallery .slider-stage{max-height:none !important;}}

/* ════════════════════════════════════════════════════════════════════
   CARD HEADER — badges left, wishlist right, never overlapping.
   The previous build stacked TWO absolutely-positioned badge groups plus an
   absolute wishlist button in the same corner, so they sat on top of each
   other. Everything is now a normal-flow flex row.
   ════════════════════════════════════════════════════════════════════ */
.products-grid:not(.list-view) .ms-card-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
  padding:12px 14px 0; min-height:34px;
}
.products-grid:not(.list-view) .ms-card-badges{
  display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start;
  min-width:0; flex:1;                     /* lets long badges shrink, not push */
}
/* the offer helper emits its own wrapper — flatten it into this row */
.products-grid:not(.list-view) .ms-card-badges .ms-badges,
.products-grid:not(.list-view) .ms-card-badges .product-badges{
  display:contents !important; position:static !important;
}
.products-grid:not(.list-view) .ms-card-badges .badge,
.products-grid:not(.list-view) .ms-card-badges .ms-badge{
  position:static !important; margin:0 !important;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:10.5px; font-weight:700; letter-spacing:.01em;
  padding:4px 9px; border-radius:5px; line-height:1.35;
}
.products-grid:not(.list-view) .badge-flush{background:#1B3A2D;color:#fff;}
/* wishlist pinned top-right, never overlapped */
.products-grid:not(.list-view) .wishlist-btn{
  position:static !important; flex:0 0 auto; width:32px; height:32px;
  border-radius:50%; border:1px solid var(--ms-line); background:#fff;
  display:grid; place-items:center; cursor:pointer; color:#b9b0a3;
  transition:color var(--ms-ease), border-color var(--ms-ease), transform var(--ms-ease);
}
.products-grid:not(.list-view) .wishlist-btn:hover{color:#c0392b;border-color:#e8c9c2;transform:scale(1.06);}
.products-grid:not(.list-view) .wishlist-btn.active{color:#c0392b;}
/* image sits below the header now */
.products-grid:not(.list-view) .product-image-wrap{padding:6px 10px 0;aspect-ratio:1/1;}
.products-grid:not(.list-view) .product-badges{position:static !important;}

/* ── PACK SIZE selector (uses the product's own variants) ── */
.products-grid:not(.list-view) .ms-grams{
  display:flex !important; flex-wrap:wrap; gap:6px; margin:8px 0 0;
}
.products-grid:not(.list-view) .ms-gram{
  border:1.5px solid var(--ms-line); background:#fff; color:var(--ms-ink);
  border-radius:8px; padding:5px 10px; font-size:11.5px; font-weight:600;
  cursor:pointer; text-decoration:none; line-height:1.3; transition:all var(--ms-ease);
}
.products-grid:not(.list-view) .ms-gram:hover{border-color:var(--ms-gold);}
.products-grid:not(.list-view) .ms-gram.active{
  background:var(--ms-green); border-color:var(--ms-green); color:#fff;
}
.products-grid:not(.list-view) .ms-gram[disabled],
.products-grid:not(.list-view) .ms-gram.soldout{
  opacity:.42; cursor:not-allowed; text-decoration:line-through;
}
.ms-size-error{
  display:none; margin-top:6px; font-size:11.5px; font-weight:600; color:#c0392b;
}
.ms-size-error.on{display:block;}

@media (max-width:900px){
  .products-grid:not(.list-view) .ms-card-head{padding:10px 11px 0;min-height:30px;}
  .products-grid:not(.list-view) .ms-card-badges{gap:6px;}
  .products-grid:not(.list-view) .ms-card-badges .badge{font-size:9.5px;padding:3px 7px;max-width:118px;}
  .products-grid:not(.list-view) .wishlist-btn{width:28px;height:28px;}
  .products-grid:not(.list-view) .ms-gram{font-size:11px;padding:5px 9px;}
}

/* ════════════════════════════════════════════════════════════════════
   LAYERING — nothing floats on top of an open overlay.
   Mini-cart drawer, mobile menu, search/login/wishlist popups all take
   priority over the chat launcher, sticky bars and floating cart.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --z-float:100; --z-float-badge:101;
  --z-overlay:9998; --z-drawer:9999; --z-drawer-close:10000;
}
/* keep floating furniture low so an overlay always wins */
.msa-bubble,.msa-nudge,.msb-sticky-atc,.ms-sticky-cart{z-index:var(--z-float) !important;}
.msd-scrim{z-index:var(--z-overlay) !important;}
.msd-drawer{z-index:var(--z-drawer) !important;}
.msd-drawer .msd-x{z-index:var(--z-drawer-close) !important;}

/* Hide the chat launcher + floating bars whenever any overlay is open.
   `body.msd-cart-open` is set by the drawer; :has() covers the rest without
   touching their JS. */
body.msd-cart-open .msa-bubble,
body.msd-cart-open .msa-nudge,
body:has(.mobile-nav.active) .msa-bubble,
body:has(.mobile-nav.active) .msa-nudge,
body:has(.mobile-nav.active) .msb-sticky-atc,
body:has(.search-overlay.active) .msa-bubble,
body:has(.search-popup.active) .msa-bubble,
body:has(.modal-overlay.active) .msa-bubble,
body:has(.ms-filters.on) .msa-bubble,
body.msa-open .msa-nudge{
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
}
/* mobile menu and its scrim sit above everything floating */
.mobile-nav{z-index:var(--z-drawer) !important;}
.mobile-nav-overlay,.mobile-nav-scrim{z-index:var(--z-overlay) !important;}

/* ── Mini-cart drawer polish ── */
.msd-drawer .msd-var{
  display:inline-block; margin-top:2px; padding:2px 8px; border-radius:5px;
  background:#f1ece2; color:#5d5749; font-size:10.5px; font-weight:700; letter-spacing:.04em;
}
.msd-ft{box-shadow:0 -6px 24px rgba(14,42,27,.08);}
.msd-co{min-height:48px;}                         /* checkout never cramped */

/* ── Card header: collection badges stack, discount below, wishlist right ── */
.products-grid:not(.list-view) .ms-card-badges{
  flex-direction:column !important; align-items:flex-start !important; gap:6px !important;
}
.products-grid:not(.list-view) .ms-card-badges .badge{max-width:100%;}

/* ── Bigger product image (~70%+ of card width, no stretch, no crop) ── */
.products-grid:not(.list-view) .product-image-wrap{
  padding:4px 8px 0 !important; aspect-ratio:1/1.02 !important;
}
.products-grid:not(.list-view) .product-image-wrap img{
  width:100% !important; height:100% !important; object-fit:contain !important;
}

/* ── Accessibility: 44px touch targets + visible focus ── */
@media (pointer:coarse){
  .products-grid .btn-card-cart,
  .products-grid .wishlist-btn,
  .products-grid .ms-gram,
  .msd-drawer .msd-qty button,
  .mobile-social a{min-width:44px;min-height:44px;}
}
.ms-gram:focus-visible,.wishlist-btn:focus-visible,.btn-card-cart:focus-visible,
.msd-co:focus-visible,.mobile-social a:focus-visible{
  outline:2px solid var(--ms-gold); outline-offset:2px;
}
/* hardware-accelerated, cheap animations only */
.product-card,.ms-gram,.wishlist-btn,.msd-drawer{will-change:auto;}