/* Static frostglass mask + village/lot label for Experimental Lot product
   cards (shop.php + homepage teaser). Originally a hover/tap-triggered
   "shatter" reveal (crack lines, flying glass shards, boom/shockwave flash,
   edge-glow finale, JS-driven bean-particle canvas, touch dwell-reveal,
   replay button) - all of that was removed per owner request: the layer's
   only job now is to sit on top of the product photo as a permanent
   masking + highlight treatment. It never reveals the photo underneath, and
   it never blocks interaction - pointer-events:none below means a tap/click
   passes straight through to whatever the card underneath would normally do
   (open the product modal, add to cart, etc.), as if this layer weren't
   there at all. No JS is needed to drive this anymore - see the frost-*
   markup in shop.php/index.php's render loops for the (now much shorter)
   static structure this styles. */
/* top/left/right:12px (not inset:0) - scopes this to .product-card-media's
   box (08-products.css), which now sits inset by the card's own 12px
   padding, instead of stretching down over the title/price area below it.
   inset:0 used to cover the WHOLE .product-card (its nearest positioned
   ancestor), hiding the title/price behind the blur - shop.tuangcoffee.com's
   own experimental-lot cards keep both visible below the photo, so this
   needs to match. absolute positioning is relative to the ancestor's
   padding edge, which sits 12px outside where the (now-inset) photo starts -
   these 12px offsets close that gap so the overlay still lands exactly on
   the photo. */
.frost-overlay{
  position:absolute; top:12px; left:12px; right:12px; aspect-ratio:1/1; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1%;
  padding:0 4%;
  overflow:hidden;
  pointer-events:none;
}
.frost-blur{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  background:linear-gradient(165deg, rgba(217,164,65,.08), rgba(36,17,9,.24));
  border:1px solid rgba(244,234,221,.14);
}
.frost-village{
  position:relative; z-index:2;
  font-family:var(--font-display); font-weight:400; color:var(--clr-gold);
  /* 26cqw overflowed the frost box for a 7-letter village name ("Mbohang" -
     29px past the edge, confirmed via scrollWidth/clientWidth). No JS here
     (unlike shop.tuangcoffee.com's own version, which measures and shrinks
     per-name at runtime) - this is a static ratio tuned so the longest
     current name fits without cutting off shorter ones ("Nati", "Uwu") down
     further than needed. */
  font-size:23cqw; line-height:.92; letter-spacing:-.01em; text-transform:uppercase;
  text-align:center; width:100%; text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.frost-process{
  position:relative; z-index:2;
  /* Matches .frost-tag's Poppins Light above it (was font-mono/600, on
     request 2026-09-08), color bumped to solid white instead of the
     rest of this file's warm off-white tint. */
  font-family:'Poppins', sans-serif; font-weight:300; color:#fff;
  font-size:7.5cqw; letter-spacing:.16em; text-transform:uppercase; text-align:center; width:100%;
  text-shadow:0 2px 5px rgba(0,0,0,.6);
}
.frost-lotnum{
  position:relative; z-index:2;
  font-family:var(--font-display); font-weight:400; color:var(--clr-gold);
  font-size:21cqw; line-height:1; text-align:center; width:100%; text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.frost-tag{
  position:absolute; top:8%; left:4%; right:4%; z-index:2;
  text-align:center;
  /* Poppins Light, not the mono/600 the rest of this file still uses -
     matches the same change made on shop.tuangcoffee.com's Shopify theme
     (2026-09-04): only this "EXPERIMENTAL LOT" line, not .frost-process or
     the village/lot number below it. */
  font-family:'Poppins', sans-serif; font-weight:300; font-size:7cqw;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(244,234,221,.9);
  text-shadow:0 2px 6px rgba(0,0,0,.65);
}