/* =====================================================================
   GIAN Glass v5 — ALL-PAGES add-on (local mockup). Load AFTER glass-v5.css.
   Paint only: tokens, tints and pseudo-element art. No box metrics, no transforms.
   1) Saleh's brief: clear, colourless thick acrylic. No beige/gold fills on buttons or keys.
   2) Radius tokens for the extra components found on the other 13 pages
      (glass-v5-fit.js refines --g-radius at runtime from the real box; these are the static fallbacks).
   ===================================================================== */

/* ---- 1. colourless primary: "sand" becomes a clearer, brighter acrylic pill with stronger contact shadow ---- */
body.gv5 .g-btn--sand{
  --g-tint:linear-gradient(180deg,#FFFFFF 0%,#F6F7F9 50%,#E8EAEE 100%);
  --g-spec-o:.7;
  --g-shadow:0 0 0 .5px rgba(70,72,80,.10),0 1px 1.5px rgba(var(--g-shade),.18),0 9px 16px -7px rgba(var(--g-shade),.38)}
body.gv5 :is(.pill.sand,.tag.sand).g-btn{color:var(--ink)}
body.gv5 .g-key--sand{--g-tint:linear-gradient(180deg,rgba(255,255,255,.72),rgba(244,245,247,.55))}
body.gv5 .ico-orb.sand.g-key{color:var(--ink-2)}
body.gv5 .guarantee svg{color:var(--ink-2)}
body.gv5 .dock .badge{background:#3A3D41}
body.gv5 .ctl:focus{box-shadow:inset 0 2px 4px rgba(0,0,0,.10),inset 0 -1.5px 0 #fff,0 0 0 4px rgba(150,156,168,.35),0 8px 16px -12px rgba(0,0,0,.35)}

/* ---- tinted / translucent variants ---- */
body.gv5 .g-key--wa{--g-tint:radial-gradient(circle at 35% 30%,#F2FFF7,#C9F3DA 75%)}
body.gv5 :is(.g-btn--ghost,.g-key--ghost){
  --g-tint:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.08));
  --g-shadow:0 1px 1.5px rgba(0,0,0,.18),0 8px 16px -8px rgba(0,0,0,.45);--g-spec-o:.8}
body.gv5.gv5 :is(.g-btn--ghost,.g-key--ghost){-webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%)}
body.gv5 .g-tile--pop{--g-tint:linear-gradient(180deg,rgba(253,253,253,.94),rgba(246,246,247,.9))}
body.gv5.gv5 .g-tile--pop{-webkit-backdrop-filter:blur(20px) saturate(118%);backdrop-filter:blur(20px) saturate(118%)}
body.gv5 .pinlabel.g-btn{--g-tint:linear-gradient(180deg,rgba(255,255,255,.9),rgba(246,247,249,.78))}
body.gv5.gv5 .pinlabel.g-btn{position:absolute}            /* keep the label's own absolute placement */
body.gv5.gv5 .g-bar.subnav{position:sticky}
body.gv5.gv5 :is(.pp-idx,.pp-count).g-btn{position:absolute}   /* gallery counters keep their absolute placement */

/* ---- 2. static radius tokens (match the element's own border-radius) ---- */
body.gv5 .g-tile--card{--g-radius:30px}                       /* .tile / .prod cards */
body.gv5 .g-tile--pop{--g-radius:26px}                        /* .dd-panel dropdowns */
body.gv5 .hdr-search.g-panel{--g-radius:36px}
body.gv5 :is(.mega,.sheet).g-panel{--g-radius:34px}
body.gv5 .logo-block.g-panel{--g-radius:48px}
body.gv5 .svc.g-panel{--g-radius:32px}
body.gv5 .bseller.g-panel{--g-radius:40px}
body.gv5 .chip.g-btn{--g-radius:20px}
body.gv5 .model-pill.g-btn{--g-radius:27px}
body.gv5 .pinlabel.g-btn{--g-radius:37px}
body.gv5 .tag.num.g-btn{--g-radius:12px}
body.gv5 .sb.g-bar{--g-radius:38px}
body.gv5 .subnav.g-bar{--g-radius:29.5px}
body.gv5 .g-key--lg{--g-radius:27px}
body.gv5 .g-photo-frame--inset{--g-radius:24px}
@media (max-width:720px){
  body.gv5 .g-photo-frame--inset{--g-radius:18px}
  body.gv5 .sb.g-bar{--g-radius:34px}
  body.gv5 .bseller.g-panel{--g-radius:34px}
  body.gv5 .g-key--lg{--g-radius:20px}
  body.gv5 .svc.g-panel{--g-radius:var(--r-xl)}
}

/* ---- segmented tabs: the active segment is a v5 glass pill (class toggled by glass.js, so styled by state) ---- */
body.gv5 .seg button.on{position:relative;isolation:isolate;color:var(--ink);
  background:linear-gradient(180deg,#FBFBFC 0%,#F1F1F4 55%,#E6E6EB 100%);
  box-shadow:0 1px 1.5px rgba(var(--g-shade),.16),0 6px 12px -6px rgba(var(--g-shade),.30)}
body.gv5 .seg button.on::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;box-sizing:border-box;border-radius:inherit;
  border-style:solid;border-color:transparent;border-width:18px;
  border-image:var(--gA-btn-src) var(--gA-btn-slice) fill / 18px stretch}
body.gv5 .seg button.on::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:var(--gA-spec) no-repeat 5px 1px/62% auto;opacity:.55}

/* ---- doc TOC active item (toggled by glass.js) reads as a light glass key, no colour ---- */
body.gv5 .toc a.on{background:linear-gradient(180deg,#FFFFFF,#F2F3F5);box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(70,72,80,.12),0 5px 10px -6px rgba(var(--g-shade),.35)}