:root{
  color-scheme:light dark;
  --bg:#f6f2ea;
  --bg-tint-a:rgba(214,146,34,0.16);
  --bg-tint-b:rgba(120,92,208,0.08);
  --bg-tint-c:rgba(15,168,160,0.07);
  --surface:#fffdf8;
  --text:#1b1510;
  --text-dim:#5f5346;
  --hairline:rgba(40,28,16,0.10);

  --glass:rgba(255,253,247,0.62);
  --glass-strong:rgba(255,253,248,0.82);
  --glass-border:rgba(40,28,16,0.12);
  --glass-hi:rgba(255,255,255,0.85);
  --glass-sheen:rgba(255,255,255,0.50);

  --lg-fill:rgba(255,255,255,0.40);
  --lg-fill-hover:rgba(255,255,255,0.58);
  --lg-fill-float:rgba(255,252,246,0.56);
  --lg-fill-sheet:rgba(255,252,246,0.80);
  --lg-sheen:rgba(255,255,255,0.55);
  --lg-rim-hi:rgba(255,255,255,0.95);
  --lg-rim-lo:rgba(255,255,255,0.45);
  --lg-glow:rgba(255,255,255,0.35);
  --lg-edge:rgba(70,48,24,0.13);
  --lg-shadow:0 1px 2px rgba(60,42,20,0.06), 0 12px 32px -14px rgba(60,42,20,0.30);
  --lg-shadow-lift:0 2px 4px rgba(60,42,20,0.07), 0 22px 48px -18px rgba(60,42,20,0.36);

  --amber:#e0a43b;
  --bronze:#a9741c;
  --on-accent:#1b1510;
  --icon-accent:#a9741c;
  --accent-glow:rgba(224,164,59,0.30);
  --text-accent-sm:#8c6118;
  --gradient-text-a:#b9801d;
  --gradient-text-b:#a9741c;

  --japan:#e5566f; --china:#dd8a2b; --thailand:#7c5cd0; --indonesia:#0fa8a0;

  --shadow-soft:0 10px 30px rgba(60,42,20,0.10), 0 2px 6px rgba(60,42,20,0.06);
  --shadow-soft-lg:0 24px 60px rgba(60,42,20,0.16), 0 6px 16px rgba(60,42,20,0.08);

  --radius-xl:34px; --radius-lg:26px; --radius-md:16px; --radius-sm:12px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.22,1.16,.36,1);
  --ease-soft:cubic-bezier(.12,.23,.5,1);
  --nav-h:64px;
  --page-w:1180px;

  --font-display:"Arial Rounded MT Bold","Arial Rounded MT","Helvetica Rounded",Nunito,Arial,"Noto Sans SC",sans-serif;
  --font-body:'Inter','Noto Sans SC',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#151210;
    --bg-tint-a:rgba(224,164,59,0.16);
    --bg-tint-b:rgba(124,92,208,0.14);
    --bg-tint-c:rgba(15,168,160,0.10);
    --surface:#211b16;
    --text:#f4efe6;
    --text-dim:#b3a594;
    --hairline:rgba(255,238,214,0.12);
    --glass:rgba(48,40,33,0.62);
    --glass-strong:rgba(40,33,27,0.86);
    --glass-border:rgba(255,238,214,0.16);
    --glass-hi:rgba(255,236,200,0.10);
    --glass-sheen:rgba(255,240,214,0.08);
    --lg-fill:rgba(255,244,228,0.055);
    --lg-fill-hover:rgba(255,244,228,0.10);
    --lg-fill-float:rgba(30,24,19,0.46);
    --lg-fill-sheet:rgba(33,27,22,0.84);
    --lg-sheen:rgba(255,240,220,0.10);
    --lg-rim-hi:rgba(255,238,214,0.42);
    --lg-rim-lo:rgba(255,238,214,0.12);
    --lg-glow:rgba(255,238,214,0.07);
    --lg-edge:rgba(0,0,0,0.42);
    --lg-shadow:0 1px 2px rgba(0,0,0,0.35), 0 16px 38px -14px rgba(0,0,0,0.70);
    --lg-shadow-lift:0 2px 4px rgba(0,0,0,0.40), 0 26px 52px -16px rgba(0,0,0,0.78);
    --amber:#e9b154; --bronze:#c68a2c;
    --icon-accent:#e9b154;
    --accent-glow:rgba(233,177,84,0.26);
    --gradient-text-a:#e9b154; --gradient-text-b:#c68a2c;
    --text-accent-sm:#e9b154;
    --shadow-soft:0 10px 30px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.35);
    --shadow-soft-lg:0 26px 64px rgba(0,0,0,0.55), 0 8px 20px rgba(0,0,0,0.40);
  }
}
:root[data-theme="dark"]{
  --bg:#151210;
  --bg-tint-a:rgba(224,164,59,0.16);
  --bg-tint-b:rgba(124,92,208,0.14);
  --bg-tint-c:rgba(15,168,160,0.10);
  --surface:#211b16;
  --text:#f4efe6;
  --text-dim:#b3a594;
  --hairline:rgba(255,238,214,0.12);
  --glass:rgba(48,40,33,0.62);
  --glass-strong:rgba(40,33,27,0.86);
  --glass-border:rgba(255,238,214,0.16);
  --glass-hi:rgba(255,236,200,0.10);
  --glass-sheen:rgba(255,240,214,0.08);
  --lg-fill:rgba(255,244,228,0.055);
  --lg-fill-hover:rgba(255,244,228,0.10);
  --lg-fill-float:rgba(30,24,19,0.46);
  --lg-fill-sheet:rgba(33,27,22,0.84);
  --lg-sheen:rgba(255,240,220,0.10);
  --lg-rim-hi:rgba(255,238,214,0.42);
  --lg-rim-lo:rgba(255,238,214,0.12);
  --lg-glow:rgba(255,238,214,0.07);
  --lg-edge:rgba(0,0,0,0.42);
  --lg-shadow:0 1px 2px rgba(0,0,0,0.35), 0 16px 38px -14px rgba(0,0,0,0.70);
  --lg-shadow-lift:0 2px 4px rgba(0,0,0,0.40), 0 26px 52px -16px rgba(0,0,0,0.78);
  --amber:#e9b154; --bronze:#c68a2c;
  --icon-accent:#e9b154;
  --accent-glow:rgba(233,177,84,0.26);
  --gradient-text-a:#e9b154; --gradient-text-b:#c68a2c;
  --text-accent-sm:#e9b154;
  --shadow-soft:0 10px 30px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.35);
  --shadow-soft-lg:0 26px 64px rgba(0,0,0,0.55), 0 8px 20px rgba(0,0,0,0.40);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; overflow-x:hidden; overflow-x:clip; scrollbar-color:color-mix(in oklab, var(--text) 26%, transparent) transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text); font-family:var(--font-body);
  overflow-x:hidden; overflow-x:clip;
  min-height:100vh; min-height:100svh; line-height:1.6; -webkit-font-smoothing:antialiased;
  caret-color:var(--bronze); accent-color:var(--bronze);
  transition:background-color .4s var(--ease), color .4s var(--ease);
  animation:wfgPageIn .34s ease backwards;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 44% at 6% -10%, var(--bg-tint-a), transparent 62%),
    radial-gradient(ellipse 52% 40% at 100% 4%, var(--bg-tint-b), transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 112%, var(--bg-tint-c), transparent 56%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  transform-origin:50% 30%;
  animation:wfgBgSettle 2.4s var(--ease-soft) backwards;
}
@keyframes wfgPageIn{from{opacity:0} to{opacity:1}}
@keyframes wfgBgSettle{from{opacity:0; transform:scale(1.1);} to{opacity:1; transform:none;}}
html.page-leaving body{animation:none; opacity:0; transition:opacity .34s var(--ease-soft);}
html.page-leaving main{transform:translateY(-14px); transition:transform .34s var(--ease-soft);}
@media (prefers-reduced-motion:reduce){
  body{animation:none; opacity:1;}
  body::before{animation:none;}
  html.page-leaving body{transition:none; opacity:1;}
  html.page-leaving main{transform:none;}
}

#routeProgress{position:fixed; top:0; left:0; height:3px; width:0; z-index:400;
  background:linear-gradient(90deg, var(--amber), var(--bronze)); box-shadow:0 0 10px var(--accent-glow);
  opacity:0; transition:width .5s cubic-bezier(.16,1,.3,1), opacity .3s ease; pointer-events:none;}
#routeProgress.show{opacity:1;}
@media (prefers-reduced-motion:reduce){ #routeProgress{display:none;} }

h1,h2,h3{font-family:var(--font-display); font-weight:700; letter-spacing:-0.005em; line-height:1.14; text-wrap:balance;}
p{text-wrap:pretty;}
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3{letter-spacing:0;}
::selection{background:var(--bronze);color:#fff;}
a,button{font-family:inherit;}
a{text-underline-offset:.22em; text-decoration-thickness:1px;}
img{max-width:100%;}
section{scroll-margin-top:calc(var(--nav-h) + 34px);}

.ico{width:1em; height:1em; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}

.visually-hidden{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

.glass{
  position:relative;
  background-color:var(--lg-fill);
  background-image:linear-gradient(172deg, var(--lg-sheen), transparent 46%);
  border:1px solid var(--lg-edge);
  border-radius:var(--radius-lg);
  box-shadow:
    inset 1px 1px 0 0 var(--lg-rim-hi),
    inset -1px -1px 0 0 var(--lg-rim-lo),
    inset 0 0 22px 0 var(--lg-glow),
    var(--lg-shadow);
}
.glass-float{
  background-color:var(--lg-fill-float);
  -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%);
}

.glass-btn{
  appearance:none; cursor:pointer; font-family:var(--font-body); font-weight:600; font-size:15px; letter-spacing:.1px;
  color:var(--text); padding:13px 24px; min-height:44px;
  background-color:var(--lg-fill);
  background-image:linear-gradient(180deg, var(--lg-sheen), transparent 60%);
  border:1px solid var(--lg-edge); border-radius:100px; position:relative; overflow:hidden; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:inset 1px 1px 0 0 var(--lg-rim-hi), inset -1px -1px 0 0 var(--lg-rim-lo), var(--lg-shadow);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background-color .3s var(--ease), color .3s var(--ease), filter .3s var(--ease);
}
.glass-btn[hidden]{display:none;}
.glass-btn:hover, .glass-btn:focus-visible{will-change:transform;}
.glass-btn .ico{width:17px; height:17px;}
.glass-btn:hover{transform:translateY(-2px); background-color:var(--lg-fill-hover);
  box-shadow:inset 1px 1px 0 0 var(--lg-rim-hi), inset -1px -1px 0 0 var(--lg-rim-lo), inset 0 0 16px 0 var(--lg-glow),
    0 0 0 1px color-mix(in oklab, var(--amber) 26%, transparent), 0 0 22px -6px var(--accent-glow), var(--lg-shadow-lift);}
.glass-btn:active{transform:translateY(0) scale(.985);}
.glass-btn:disabled{opacity:.55; cursor:not-allowed; transform:none;}
.glass-btn.primary{
  background-color:var(--amber);
  background-image:linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 52%), linear-gradient(120deg, var(--amber), var(--bronze));
  border-color:color-mix(in oklab, var(--bronze) 60%, transparent); color:var(--on-accent); font-weight:700;
  box-shadow:inset 1px 1px 0 0 rgba(255,255,255,.75), inset -1px -1px 0 0 rgba(255,255,255,.22), inset 0 -8px 16px -10px rgba(110,62,0,.45), 0 10px 26px -10px var(--accent-glow), var(--lg-shadow);
}
.glass-btn.primary:hover{background-color:var(--amber); filter:brightness(1.07) saturate(1.04);
  box-shadow:inset 1px 1px 0 0 rgba(255,255,255,.85), inset -1px -1px 0 0 rgba(255,255,255,.28), inset 0 -8px 16px -10px rgba(110,62,0,.4), 0 0 26px -4px var(--accent-glow), var(--lg-shadow-lift);}
.glass-btn.small{padding:10px 16px; font-size:13px; min-height:40px;}
.glass-btn.icon{padding:10px; min-width:40px;}

.text-link{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:14.5px; color:var(--text-accent-sm); text-decoration:none;}
.text-link .ico{width:16px; height:16px; transition:transform .35s var(--ease);}
.text-link:hover{text-decoration:underline;}
.text-link:hover .ico{transform:translateX(3px);}

nav.glass{position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:60; width:min(1040px, calc(100% - 22px));
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 10px 9px 18px; border-radius:100px;
  background-color:var(--lg-fill-float);
  -webkit-backdrop-filter:blur(16px) saturate(180%); backdrop-filter:blur(16px) saturate(180%);}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:.01em; flex:none; text-decoration:none; color:var(--text);}
.logo-mark{width:42px; height:28px; flex:none;}
.logo .short{display:none;}
.nav-links{display:flex; align-items:center; gap:22px; flex:1; justify-content:center;}
.nav-links a{color:var(--text-dim); text-decoration:none; font-size:14px; font-weight:600; cursor:pointer; position:relative; padding:6px 2px; white-space:nowrap; transition:color .3s var(--ease);}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:linear-gradient(120deg,var(--amber),var(--bronze)); border-radius:2px; transition:right .35s var(--ease);}
.nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--text);}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{right:0;}
.nav-right{display:flex; align-items:center; gap:8px; flex:none;}
.theme-toggle, .nav-toggle, .lang-current-btn{
  appearance:none; cursor:pointer; color:var(--text);
  background-color:var(--lg-fill); background-image:linear-gradient(180deg, var(--lg-sheen), transparent 65%);
  border:1px solid var(--lg-edge);
  box-shadow:inset 1px 1px 0 0 var(--lg-rim-hi), inset -1px -1px 0 0 var(--lg-rim-lo), 0 1px 2px rgba(0,0,0,.06);
  transition:transform .4s var(--ease), background-color .3s var(--ease);
}
.theme-toggle{width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; text-decoration:none;}
.theme-toggle:hover, .nav-toggle:hover, .lang-current-btn:hover{background-color:var(--lg-fill-hover);}
#themeToggle:hover{transform:rotate(-18deg);}
.theme-toggle .ico{width:18px; height:18px;}
.theme-toggle .ico-moon{display:none;}
:root[data-theme="dark"] .theme-toggle .ico-sun{display:none;}
:root[data-theme="dark"] .theme-toggle .ico-moon{display:block;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .ico-sun{display:none;}
  :root:not([data-theme="light"]) .theme-toggle .ico-moon{display:block;}
}
.nav-toggle{display:none; width:40px; height:40px; border-radius:50%; align-items:center; justify-content:center;}
.nav-toggle .ico{width:20px; height:20px;}

.lang-select{position:relative; flex:none;}
.lang-current-btn{display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-body); font-weight:600; font-size:13px;
  border-radius:100px; padding:0 9px 0 13px; height:40px; min-height:40px;}
.lang-caret{width:15px; height:15px; color:var(--text-dim); transition:transform .3s var(--ease);}
.lang-select.open .lang-caret{transform:rotate(180deg);}
.lang-menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:140px;
  display:flex; flex-direction:column; gap:2px; padding:6px;
  background:var(--surface); border:1px solid var(--lg-edge); border-radius:18px;
  box-shadow:inset 1px 1px 0 0 var(--lg-rim-hi), inset -1px -1px 0 0 var(--lg-rim-lo), var(--lg-shadow-lift); z-index:70;
  opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top right; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.lang-select.open .lang-menu{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.lang-menu button{
  appearance:none; cursor:pointer; text-align:left; font-family:var(--font-body);
  font-size:13.5px; font-weight:600; color:var(--text-dim); background:none; border:none; border-radius:12px; padding:9px 12px;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.lang-menu button:hover{background:color-mix(in oklab, var(--text) 7%, transparent); color:var(--text);}
.lang-menu button[aria-selected="true"]{color:var(--text); background:color-mix(in oklab, var(--amber) 18%, transparent);}
.cart-btn-wrap{position:relative; display:inline-flex;}
.cart-badge{position:absolute; top:-6px; right:-6px; background:var(--indonesia); color:#fff; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
  min-width:20px; height:20px; padding:0 5px; border-radius:10px; box-sizing:border-box; border:2px solid var(--surface); display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(15,168,160,.5); transform:scale(0); transition:transform .35s var(--ease);}
.cart-badge.show{transform:scale(1);}

@media (max-width:860px){
  .nav-links{position:absolute; top:calc(100% + 10px); left:0; right:0; flex-direction:column; align-items:stretch; gap:2px; padding:10px;
    background:var(--surface); border:1px solid var(--lg-edge); border-radius:24px;
    box-shadow:inset 1px 1px 0 0 var(--lg-rim-hi), inset -1px -1px 0 0 var(--lg-rim-lo), var(--lg-shadow-lift);
    opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);}
  nav.nav-open .nav-links{opacity:1; transform:translateY(0); pointer-events:auto;}
  .nav-links a{padding:12px 14px; border-radius:14px; font-size:15px;}
  .nav-links a:hover, .nav-links a[aria-current="page"]{background:color-mix(in oklab, var(--text) 6%, transparent); color:var(--text);}
  .nav-links a::after{display:none;}
  .nav-toggle{display:inline-flex;}
}
@media (max-width:1000px){ .logo .full{display:none;} .logo .short{display:inline;} }
@media (max-width:560px){ .glass-btn.primary.small{padding:10px 12px;} }
@media (max-width:640px){
  nav.glass{padding:8px 8px 8px 14px; gap:8px;}
  .nav-right{gap:6px;}
  .theme-toggle, .nav-toggle{width:38px; height:38px;}
  .lang-current-btn{height:38px; min-height:38px; font-size:12.5px; padding:0 8px 0 11px;}
  .glass-btn.small{min-height:38px;}
}
@media (max-width:374px){ #accountLink{display:none;} }
@media (max-width:560px){
  .wa-modal h3, .wa-modal h2{font-size:20px;}
  .wa-field{margin-bottom:15px;}
  .wa-field label{margin-bottom:8px; font-size:11px;}
  .seg-btn{padding:9px 14px;}
  .segmented{gap:7px;}
  .wa-close{top:14px; right:14px;}
  #siteFooter{padding:48px 20px 0;}
  .footer-inner{padding-bottom:36px; gap:28px;}
  #toast{bottom:18px; width:calc(100% - 36px); justify-content:center; text-align:center;}
}

.wa-overlay{position:fixed; inset:0; z-index:200; background:rgba(18,12,6,0.36);
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .35s var(--ease); padding:20px;}
:root[data-theme="dark"] .wa-overlay{background:rgba(0,0,0,0.5);}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .wa-overlay{background:rgba(0,0,0,0.5);} }
.wa-overlay.show{opacity:1; pointer-events:auto;}
.wa-modal{width:min(460px, 100%); padding:clamp(22px,5vw,30px); text-align:left; max-height:86svh; overflow-y:auto; transform:translateY(18px) scale(.97); transition:transform .45s var(--ease);
  border-radius:var(--radius-xl);
  background-color:var(--lg-fill-sheet);
  -webkit-backdrop-filter:blur(26px) saturate(170%); backdrop-filter:blur(26px) saturate(170%);
  overscroll-behavior:contain; scrollbar-width:thin;}
.wa-overlay.show .wa-modal{transform:translateY(0) scale(1);}
.wa-modal h3, .wa-modal > h2{margin:0 0 6px; font-size:22px;}
.wa-context{color:var(--text-dim); font-size:13.5px; margin:0 0 18px;}
.wa-close{position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%; border:1px solid var(--lg-edge);
  background-color:var(--lg-fill); box-shadow:inset 1px 1px 0 0 var(--lg-rim-hi), inset -1px -1px 0 0 var(--lg-rim-lo);
  cursor:pointer; color:var(--text-dim); display:inline-flex; align-items:center; justify-content:center; font-size:0; z-index:2;}
.wa-close::before{content:""; width:14px; height:14px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat;}
.wa-close:hover{color:var(--text); background-color:var(--lg-fill-hover);}
.wa-items{display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
.wa-item-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:14px;
  background:color-mix(in oklab, var(--text) 6%, transparent); font-size:13px; flex-wrap:wrap;}
.wa-item-row .meta{color:var(--text-dim); font-size:11.5px;}
.wa-item-row > span{flex:1 1 auto; min-width:120px;}
.wa-item-remove{border:none; background:none; cursor:pointer; color:var(--text-dim); font-size:15px; width:26px; height:26px; border-radius:50%; flex:none;}
.wa-item-remove:hover{background:color-mix(in oklab, var(--text) 10%, transparent); color:var(--text);}
.wa-notice{
  background:color-mix(in oklab, var(--amber) 14%, transparent); border:1px solid color-mix(in oklab, var(--amber) 36%, transparent); color:var(--text);
  font-size:12.5px; line-height:1.5; padding:11px 14px; border-radius:14px; margin:0 0 18px;
}
.qty-stepper{display:inline-flex; align-items:center; gap:0; border:1px solid var(--lg-edge); border-radius:100px; overflow:hidden;
  background:color-mix(in oklab, var(--text) 5%, transparent); flex:none;}
.qty-btn{appearance:none; border:none; background:none; cursor:pointer; width:26px; height:26px; font-size:14px; font-weight:700; color:var(--text); line-height:1;}
.qty-btn:hover{background:color-mix(in oklab, var(--text) 10%, transparent);}
.qty-input{width:26px; border:none; background:none; text-align:center; font-size:12px; font-weight:600; color:var(--text); -moz-appearance:textfield; font-variant-numeric:tabular-nums;}
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.qty-stepper-sm .qty-btn{width:24px; height:24px; font-size:12px;}
.qty-stepper-sm .qty-input{width:24px; font-size:11px;}
.wa-field{margin-bottom:20px;}
.wa-field label{display:block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin-bottom:10px;}
.segmented{display:flex; gap:8px; flex-wrap:wrap;}
.seg-btn{appearance:none; cursor:pointer; border-radius:100px; padding:10px 16px; font-size:13px; font-weight:600; min-height:40px;
  background:color-mix(in oklab, var(--text) 5%, transparent); border:1px solid var(--lg-edge); color:var(--text);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  transform:translateZ(0);}
.seg-btn.active{background:linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%), linear-gradient(120deg, var(--amber), var(--bronze)); color:var(--on-accent); border-color:var(--amber);
  box-shadow:inset 1px 1px 0 0 rgba(255,255,255,.6), 0 6px 16px var(--accent-glow);}
.wa-submit{width:100%; text-align:center; justify-content:center; display:flex;}
.wa-submit + .wa-submit{margin-top:10px;}

.fill-row{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--text-dim); font-weight:600; font-variant-numeric:tabular-nums;}
.fill-track{flex:1; height:6px; border-radius:3px; background:color-mix(in oklab, var(--text) 10%, transparent); overflow:hidden; margin-left:0;}
.fill-bar{height:100%; border-radius:3px; background:linear-gradient(90deg,var(--amber),var(--bronze)); transition:width .5s var(--ease);}

#toast{position:fixed; bottom:26px; left:50%; transform:translate(-50%, 30px); padding:14px 22px; border-radius:14px; max-width:min(560px, calc(100vw - 32px)); text-align:center; z-index:300;
  display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; opacity:0; pointer-events:none;
  background-color:var(--lg-fill-sheet); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);
  transition:opacity .4s var(--ease), transform .4s var(--ease);}
#toast.show{opacity:1; transform:translate(-50%,0);}

.section{width:100%; max-width:var(--page-w); margin:0 auto; padding:clamp(64px,9vw,112px) 24px;}
.section-head{max-width:660px; margin:0 0 clamp(30px,4vw,46px);}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-title{font-size:clamp(28px,4.2vw,44px); font-weight:700; margin:0 0 14px; line-height:1.1;}
.section-lead, .section-sub{color:var(--text-dim); font-size:clamp(15px,2vw,17px); line-height:1.7; margin:0;}
@media (max-width:640px){
  .section{padding:52px 16px;}
  .section-title{font-size:clamp(24px,6.6vw,30px);}
}

.section-row{display:flex; align-items:flex-end; justify-content:space-between; gap:20px 32px; flex-wrap:wrap; margin-bottom:clamp(26px,3.6vw,42px);}
.section-row .section-head{margin:0;}
.mosaic-meta{margin:0; display:flex; gap:10px; flex-wrap:wrap;}
.meta-chip{display:inline-flex; align-items:baseline; gap:7px; padding:9px 16px; border-radius:100px; font-size:13px; font-weight:600; color:var(--text-dim);}
.meta-chip strong{font-family:var(--font-display); font-size:18px; color:var(--text); font-variant-numeric:tabular-nums;}
.meta-chip:empty{display:none;}

.country-mosaic{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-rows:minmax(158px, auto); gap:16px;}
.country-tile{--c:var(--amber); display:flex; flex-direction:column; gap:8px; padding:20px 20px 18px; min-width:0;
  text-decoration:none; color:var(--text); overflow:hidden;
  background-image:
    radial-gradient(130% 90% at 100% 0%, color-mix(in oklab, var(--c) 20%, transparent), transparent 62%),
    linear-gradient(172deg, var(--lg-sheen), transparent 46%);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), background-color .3s var(--ease);}
.country-tile:hover{transform:translateY(-4px); background-color:var(--lg-fill-hover);
  box-shadow:inset 1px 1px 0 0 var(--lg-rim-hi), inset -1px -1px 0 0 var(--lg-rim-lo), inset 0 0 22px 0 var(--lg-glow), var(--lg-shadow-lift), 0 18px 40px -22px color-mix(in oklab, var(--c) 70%, transparent);}
.country-tile:focus-visible{outline:2px solid var(--bronze); outline-offset:3px;}
.ct-flag{font-size:28px; line-height:1;}
.ct-name{font-family:var(--font-display); font-weight:700; font-size:19px; line-height:1.2;}
.ct-tag{color:var(--text-dim); font-size:13.5px; line-height:1.5;}
.ct-foot{margin-top:auto; padding-top:8px; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.ct-count{font-size:12.5px; font-weight:600; color:var(--text-dim); font-variant-numeric:tabular-nums;}
.ct-count strong{color:var(--text); font-weight:700;}
.ct-soon{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--text-dim);}
.ct-soon::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--c); box-shadow:0 0 0 3px color-mix(in oklab, var(--c) 22%, transparent);}
.ct-arrow{width:34px; height:34px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center; color:var(--text);
  background-color:var(--lg-fill); border:1px solid var(--lg-edge); box-shadow:inset 1px 1px 0 0 var(--lg-rim-hi), inset -1px -1px 0 0 var(--lg-rim-lo);
  transition:transform .45s var(--ease), background-color .3s var(--ease), color .3s var(--ease);}
.ct-arrow .ico{width:16px; height:16px;}
.country-tile:hover .ct-arrow{transform:translateX(3px); background-color:var(--c); color:#fff; border-color:transparent;}
.country-tile.is-featured{grid-column:span 2; grid-row:span 2; padding:clamp(22px,2.6vw,32px); gap:10px;}
.country-tile.is-featured .ct-flag{font-size:40px;}
.country-tile.is-featured .ct-name{font-size:clamp(28px,3.2vw,42px);}
.country-tile.is-featured .ct-tag{font-size:15.5px; max-width:36ch;}
.ct-shelf{display:flex; gap:12px; margin:14px 0 4px; padding-top:4px;}
.ct-shelf img{width:clamp(66px,7.4vw,104px); aspect-ratio:4/5; object-fit:cover; border-radius:16px; display:block;
  border:1px solid var(--lg-edge); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 14px 26px -14px rgba(40,25,10,.55);
  transition:transform .6s var(--ease);}
.ct-shelf img:nth-child(1){transform:rotate(-4deg);}
.ct-shelf img:nth-child(2){transform:translateY(-6px) rotate(2deg);}
.ct-shelf img:nth-child(3){transform:rotate(5deg);}
.ct-shelf img:nth-child(4){transform:translateY(-4px) rotate(-2deg);}
.country-tile:hover .ct-shelf img{transform:none;}
@media (max-width:980px){
  .country-mosaic{grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:minmax(150px,auto); gap:12px;}
  .country-tile.is-featured{grid-row:span 1;}
}
@media (max-width:420px){
  .country-tile{padding:16px 15px 15px;}
  .ct-name{font-size:17px;}
  .ct-tag{font-size:12.5px;}
  .ct-arrow{width:30px; height:30px;}
  .ct-shelf img:nth-child(4){display:none;}
}

#siteFooter{margin-top:40px; padding:64px 24px 0; border-top:1px solid var(--hairline);
  background:linear-gradient(180deg, color-mix(in oklab, var(--text) 3%, transparent), color-mix(in oklab, var(--text) 6%, transparent));}
.footer-inner{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1.35fr .8fr 1.15fr 1.2fr; gap:36px; padding-bottom:44px;}
.footer-brand p{color:var(--text-dim); font-size:13.5px; line-height:1.6; max-width:280px; margin:0;}
.footer-brand .footer-company{margin-top:14px; font-size:12px; line-height:1.65;}
.footer-col h4, .footer-col h3{margin:0 0 14px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); font-weight:700; font-family:var(--font-body);}
.footer-col{display:flex; flex-direction:column; gap:10px; min-width:0;}
.footer-col a, .footer-static{
  color:var(--text-dim); text-decoration:none; font-size:13.5px; font-weight:600; width:fit-content; max-width:100%;
  display:inline-flex; align-items:center; gap:8px;
  transition:color .25s var(--ease), transform .25s var(--ease); cursor:pointer;
}
.footer-static{cursor:default; align-items:flex-start; line-height:1.5;}
.footer-col a .ico, .footer-static .ico{width:15px; height:15px; color:var(--icon-accent);}
.footer-static .ico{margin-top:2px;}
.footer-col a:hover{color:var(--text-accent-sm); transform:translateX(2px);}
.footer-hubs{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px;}
.footer-hubs a{gap:7px;}
.footer-bottom{max-width:1120px; margin:0 auto; padding:24px 0 34px; border-top:1px solid var(--hairline); text-align:center; color:var(--text-dim); font-size:12px;}
.footer-pays{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:7px; margin:0 auto 16px;}
.footer-pays .pay{display:inline-flex; align-items:center; justify-content:center; height:30px; min-width:46px; padding:0 8px; box-sizing:border-box;
  background:#fff; border:1px solid rgba(20,14,8,.12); border-radius:6px; box-shadow:0 1px 2px rgba(20,14,8,.07);}
.footer-pays .pay svg{display:block;}
.footer-copy{display:inline-block;}
.footer-legal-links{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; margin-bottom:12px; font-size:12px;}
.footer-legal-links a{color:var(--text-dim); text-decoration:none;}
.footer-legal-links a:hover{color:var(--text); text-decoration:underline;}
@media (max-width:900px){ .footer-inner{grid-template-columns:1fr 1fr; row-gap:32px;} }
@media (max-width:480px){ .footer-inner{grid-template-columns:1fr;} }

.ambient-bg{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; contain:strict;}
.ambient-bg .blob{position:absolute; border-radius:50%; filter:blur(30px); opacity:.5; will-change:transform;}
.ambient-bg .blob-a{width:46vw; height:46vw; top:-14vw; left:-10vw; background:radial-gradient(circle, rgba(224,164,59,.32), transparent 70%); animation:driftA 26s ease-in-out infinite;}
.ambient-bg .blob-b{width:38vw; height:38vw; bottom:-12vw; right:-8vw; background:radial-gradient(circle, rgba(124,92,208,.24), transparent 70%); animation:driftB 32s ease-in-out infinite;}
@keyframes driftA{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(4vw,3vw) scale(1.08);}}
@keyframes driftB{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-3vw,-4vw) scale(1.05);}}

@keyframes wfgRise{from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;}}
@keyframes wfgWord{from{opacity:0; transform:translateY(.42em);} to{opacity:1; transform:none;}}
.has-reveal [data-reveal]:not(.reveal-in), .has-reveal [data-reveal-stagger]:not(.reveal-in) > *:not([data-split]){opacity:0;}
.has-reveal [data-reveal].reveal-in{animation:wfgRise .8s var(--ease-spring) backwards; animation-delay:var(--reveal-delay, 0s);}
.has-reveal [data-reveal-stagger].reveal-in > *:not([data-split]){animation:wfgRise .72s var(--ease-spring) backwards;}
.has-reveal [data-reveal-stagger].reveal-in > *:nth-child(2){animation-delay:.05s;}
.has-reveal [data-reveal-stagger].reveal-in > *:nth-child(3){animation-delay:.10s;}
.has-reveal [data-reveal-stagger].reveal-in > *:nth-child(4){animation-delay:.15s;}
.has-reveal [data-reveal-stagger].reveal-in > *:nth-child(5){animation-delay:.20s;}
.has-reveal [data-reveal-stagger].reveal-in > *:nth-child(6){animation-delay:.25s;}
.has-reveal [data-reveal-stagger].reveal-in > *:nth-child(7){animation-delay:.30s;}
.has-reveal [data-reveal-stagger].reveal-in > *:nth-child(8){animation-delay:.35s;}
.has-reveal [data-reveal-stagger].reveal-in > *:nth-child(n+9){animation-delay:.40s;}
.split-w{display:inline-block; padding:.12em .05em .2em; margin:-.12em -.05em -.2em;}
.has-reveal [data-split]:not(.split-in) .split-w{opacity:0;}
.has-reveal [data-split].split-in .split-w{animation:wfgWord .8s var(--ease-spring) backwards;
  animation-delay:calc(var(--split-delay, 0s) + var(--wi, 0) * 65ms);}
.has-reveal [data-split].split-done .split-w{animation:none;}

a:focus-visible, button:focus-visible, summary:focus-visible, .pin:focus-visible, .theme-toggle:focus-visible, .nav-toggle:focus-visible{
  outline:2px solid var(--bronze); outline-offset:3px; border-radius:100px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--bronze); outline-offset:2px;}

.skip-link{
  position:fixed; top:-80px; left:14px; z-index:1000;
  background:var(--surface); color:var(--text); padding:12px 22px;
  border-radius:100px; border:1px solid var(--glass-border);
  font-weight:700; font-size:14px; text-decoration:none;
  box-shadow:var(--shadow-soft-lg);
  transition:top .25s var(--ease);
}
.skip-link:focus{ top:14px; }

@media (prefers-reduced-transparency:reduce){
  :root{--lg-fill:var(--surface); --lg-fill-hover:var(--surface); --lg-fill-float:var(--surface); --lg-fill-sheet:var(--surface);}
}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001s !important; transition-duration:.001s !important; scroll-behavior:auto !important;} }
