/* Glass, in the manner of iPhone: cards, slider arrows and buttons are frosted panes that blur and
   brighten what is behind them, with a bright rim where light catches the top-left edge, a sheen
   across the top and a soft shadow. Coloured glows sit behind the page so the frosting has
   something to show. Loaded after every other stylesheet; dropping this file brings back the flat
   look. Browsers without backdrop blur get the same panes, only less see-through. */

:root{
  --glass-fill:linear-gradient(160deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.03) 45%,rgba(255,255,255,.02) 100%);
  --glass-fill-hover:linear-gradient(160deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 45%,rgba(255,255,255,.04) 100%);
  /* The rim: bright at the top-left, almost gone along the sides, a second glint bottom-right */
  --glass-rim:linear-gradient(135deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.16) 22%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.12) 78%,rgba(255,255,255,.45) 100%);
  --glass-rim-gold:linear-gradient(135deg,rgba(255,226,170,.95) 0%,rgba(236,196,128,.3) 30%,rgba(236,196,128,.12) 55%,rgba(255,226,170,.6) 100%);
  --glass-edge:rgba(255,255,255,.16);
  /* Light on the rim: strong along the top and left, faint along the bottom and right */
  --glass-light:inset 1px 1px 0 rgba(255,255,255,.42),inset -1px -1px 0 rgba(255,255,255,.1),inset 0 12px 24px -16px rgba(255,255,255,.18);
  --glass-shadow:0 18px 40px rgba(0,0,0,.38),0 2px 6px rgba(0,0,0,.2);
  --glass-frost:blur(12px) saturate(140%);
  --glass-dark:rgba(16,24,38,.38);       /* over photos: darker so white icons stay clear */
}

/* Glows behind the page. Fixed, no motion. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(38vmax 30vmax at 8% 10%,rgba(236,180,100,.26),transparent 70%),
  radial-gradient(44vmax 34vmax at 96% 38%,rgba(80,130,220,.24),transparent 70%),
  radial-gradient(36vmax 28vmax at 22% 78%,rgba(214,120,90,.18),transparent 70%),
  radial-gradient(34vmax 26vmax at 84% 96%,rgba(120,100,200,.16),transparent 70%)}
/* Section bands let the glows through instead of painting over them */
.section.alt,.pdp .band.alt,.shop-page .band.alt{background:rgba(8,13,21,.45)}

/* ---------- Panes: cards and panels ---------- */
.hm .card,.hm .gift,.hm .reviews figure,.help-card,.spec,.panel,.notice,
.pdp .promise,.pdp .points,.pdp .trust li,.pdp .ask,.pdp .about,.pdp .bstep,.pdp .eta,.gift-opt,.seg,
.cat-tile a,.ord-card,.ord-progress,.auth-card,.woocommerce-Address,.order-look-form,.ret-item,.ret-form,
.compare-wrap,.table-wrap,.pay-card,.jr-card,.jr-pn a,.cp .help-card,.cp-steps li,.cp .panel,
.btn-line,.btn-quiet,.icon-btn,.cart-btn,.locale-btn,.chip-btn,.dd>button,.filter-btn,.pill,.hm .tab,div.qty,.pdp form.cart .quantity,.mini-qty{
  border:1px solid var(--glass-edge);
  background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-frost);backdrop-filter:var(--glass-frost);
  box-shadow:var(--glass-light),var(--glass-shadow)}
/* Small controls: a lighter shadow */
.btn-line,.btn-quiet,.icon-btn,.cart-btn,.locale-btn,.chip-btn,.dd>button,.filter-btn,.pill,.hm .tab,div.qty,.pdp form.cart .quantity,.mini-qty{
  box-shadow:var(--glass-light),0 6px 16px rgba(0,0,0,.28)}
/* Outline buttons keep their gold, as a gold rim */
.btn-line,.cart-btn,.gift-opt{border-color:rgba(236,196,128,.6)}

.hm .card:hover,.help-card:hover,.cat-tile a:hover,
.btn-quiet:hover,.icon-btn:hover,.locale-btn:hover,.chip-btn:hover,.dd>button:hover,.filter-btn:hover,.pill:hover,.hm .tab:hover{
  background:var(--glass-fill-hover)}
.btn-line:hover,.cart-btn:hover{background:var(--glass-fill-hover);border-color:var(--gold)}

/* Hover lifts the pane a little; a press sinks it a little. Nothing glows. */
.btn,.btn-line,.btn-quiet,.icon-btn,.chip-btn,.pill,.qty-step,.gift-opt{transition:background .2s ease,border-color .2s ease,transform .12s ease}
.btn:active,.btn-line:active,.btn-quiet:active,.icon-btn:active,.chip-btn:active,.pill:active,.qty-step:active,.gift-opt:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.btn:active,.btn-line:active,.btn-quiet:active,.icon-btn:active,.chip-btn:active,.pill:active,.qty-step:active,.gift-opt:active{transform:none}}
/* Phones: less blur and lighter shadows, so scrolling stays smooth */
@media (max-width:900px){
  :root{--glass-frost:blur(8px) saturate(130%);--glass-shadow:0 10px 24px rgba(0,0,0,.3)}
}

/* Selected chips and tabs: gold glass */
.chip-btn[aria-pressed="true"],.hm .tab[aria-selected="true"]{
  border-color:rgba(255,236,200,.7);background:linear-gradient(180deg,rgba(250,224,176,.96),rgba(236,196,128,.9) 55%,rgba(214,170,98,.92));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 6px 18px rgba(236,196,128,.25)}

/* Gold buttons: polished gold with a glass sheen across the top half */
.btn-gold{position:relative;isolation:isolate;overflow:hidden;border:1px solid transparent;
  background:linear-gradient(180deg,rgba(248,224,178,.94) 0%,rgba(236,196,128,.9) 50%,rgba(217,174,102,.92) 100%) padding-box,linear-gradient(135deg,#fff3dc,rgba(236,196,128,.5) 45%,#fff0d2) border-box;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -2px 4px rgba(120,80,30,.2),0 10px 26px rgba(236,196,128,.3)}
.btn-gold::before{content:"";position:absolute;z-index:-1;left:6%;right:6%;top:1px;height:48%;border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0))}
.btn-gold:hover{background:linear-gradient(180deg,rgba(251,231,194,.97) 0%,rgba(242,206,146,.95) 50%,rgba(226,184,116,.96) 100%) padding-box,linear-gradient(135deg,#fff3dc,rgba(236,196,128,.5) 45%,#fff0d2) border-box}
.btn-gold.is-loading::before{display:none}

/* Kit pictures: the stage stays, behind a glass rim and a sheen */
.kit-card .pic,.feature-card .pic,.hm .card .pic{position:relative;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.kit-card .pic::after,.feature-card .pic::after,.hm .card .pic::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;background:var(--glass-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.kit-card .pic::before,.feature-card .pic::before,.hm .card .pic::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(165deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 30%,transparent 50%)}

/* ---------- Over photos: slider arrows, counters, lightbox ---------- */
/* (darker panes, so they stay readable over a white-background photo too) */
.pdp .stage-btn,.pdp .stage .chip,.lb-close{border:1px solid transparent;
  border-color:rgba(255,255,255,.22);background:linear-gradient(160deg,rgba(40,52,72,.55),rgba(12,18,28,.62));
  -webkit-backdrop-filter:var(--glass-frost);backdrop-filter:var(--glass-frost);
  box-shadow:var(--glass-light),0 8px 20px rgba(0,0,0,.3)}
.pdp .stage-btn:hover{background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,.08));border-color:var(--gold)}

/* ---------- Frosted layers ---------- */
.dd .pop,.locale-panel,.toast,.ck{border:1px solid transparent;
  border-color:var(--glass-edge);background:linear-gradient(160deg,rgba(40,52,72,.62),rgba(20,28,42,.62));
  -webkit-backdrop-filter:var(--glass-frost);backdrop-filter:var(--glass-frost);box-shadow:var(--glass-light),var(--shadow-pop)}
.drawer{background:linear-gradient(160deg,rgba(36,48,68,.6),rgba(14,21,32,.72));
  -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  border-left:1px solid rgba(255,255,255,.22);box-shadow:inset 1px 0 0 rgba(255,255,255,.08)}
.hdr{background:linear-gradient(180deg,rgba(18,26,40,.55),rgba(10,17,27,.45));
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.14);box-shadow:inset 0 -1px 0 rgba(255,255,255,.05),0 8px 24px rgba(0,0,0,.18)}

/* Without frosting, panes stay readable */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .dd .pop,.locale-panel,.toast,.ck{background:var(--panel)}
  .drawer{background:var(--drawer)}
  .hdr{background:var(--header-bg)}
}

/* Small print on glass that sits over the brightest glow */
.gift-opt span span,.pay-card small{color:var(--ink-2)}