/* ==========================================================================
   CLOUBAY — design tokens
   Palette distilled from POP MART (ink/paper minimalism, vermilion mark),
   Good Smile US (warm paper ground, orange + teal accents) and
   Otaku House (coral navigation, dense catalogue).
   Type: Barlow / Barlow Condensed — the same family POP MART ships.
   ========================================================================== */
:root{
  --ink:#17140f;
  --ink-2:#443d33;
  --muted:#8a8075;
  --muted-2:#a89e91;
  --line:#e6ded1;
  --line-2:#f1ebe1;
  --paper:#ffffff;
  --ground:#faf6f0;
  --ground-2:#f3ece1;
  --ground-3:#ebe2d4;

  --brand:#e1462b;
  --brand-dk:#b3341e;
  --brand-soft:#fdece7;
  --accent:#12866b;
  --accent-soft:#e3f1ec;
  --gold:#e59d16;
  --gold-soft:#fdf2dc;
  --info:#1f3a5f;

  --f-display:"Barlow Condensed","Arial Narrow","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-body:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;

  --wrap:1340px;
  --gut:24px;
  --r:4px;
  --r-lg:8px;
  --shadow:0 1px 2px rgba(23,20,15,.05), 0 8px 24px -12px rgba(23,20,15,.16);
  --shadow-lg:0 2px 4px rgba(23,20,15,.06), 0 24px 48px -20px rgba(23,20,15,.28);
  --header-h:0px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; font-feature-settings:"tnum" 0;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
::selection{background:var(--brand); color:#fff}

h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.01em; line-height:1.15}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}
.wrap-narrow{max-width:900px; margin:0 auto; padding:0 var(--gut)}

/* ---------- display type ---------- */
.display{font-family:var(--f-display); font-weight:700; text-transform:uppercase; letter-spacing:.005em; line-height:.98}
.d1{font-size:clamp(46px,6.4vw,88px)}
.d2{font-size:clamp(34px,4vw,54px)}
.d3{font-size:clamp(26px,2.6vw,36px)}
.eyebrow{
  font-family:var(--f-display); text-transform:uppercase; font-weight:600;
  letter-spacing:.14em; font-size:13px; color:var(--brand);
}
.eyebrow--muted{color:var(--muted)}
.lede{font-size:17px; color:var(--ink-2); line-height:1.6}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:0 24px; height:46px; border-radius:var(--r);
  font-weight:600; font-size:14px; letter-spacing:.03em; text-transform:uppercase;
  transition:background .15s, color .15s, border-color .15s, transform .08s;
  border:1.5px solid transparent; white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--brand); color:#fff}
.btn--primary:hover{background:var(--brand-dk)}
.btn--ink{background:var(--ink); color:#fff}
.btn--ink:hover{background:#000}
.btn--ghost{border-color:var(--ink); color:var(--ink)}
.btn--ghost:hover{background:var(--ink); color:#fff}
.btn--line{border-color:var(--line); background:var(--paper); color:var(--ink)}
.btn--line:hover{border-color:var(--ink)}
.btn--light{background:#fff; color:var(--ink)}
.btn--light:hover{background:var(--ground-2)}
.btn--sm{height:38px; padding:0 16px; font-size:12.5px}
.btn--lg{height:54px; padding:0 34px; font-size:15px}
.btn--full{width:100%}
.btn[disabled]{opacity:.45; pointer-events:none}

.link-u{border-bottom:1.5px solid currentColor; padding-bottom:1px; font-weight:600}
.link-u:hover{color:var(--brand)}

/* ---------- announcement ---------- */
.announce{background:var(--ink); color:#f4efe6; font-size:13px; letter-spacing:.02em}
.announce .wrap{display:flex; align-items:center; justify-content:center; gap:10px; height:38px; position:relative}
.announce__track{display:flex; align-items:center; gap:10px; overflow:hidden; height:38px}
.announce__item{display:none; align-items:center; gap:8px; white-space:nowrap}
.announce__item.is-on{display:flex; animation:fadeUp .5s ease}
.announce b{color:#fff}
.announce a{color:var(--gold); border-bottom:1px solid rgba(229,157,22,.5)}
@keyframes fadeUp{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:60; background:var(--paper); border-bottom:1px solid var(--line)}
.hdr__main{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; height:74px}
.hdr__tools{display:flex; align-items:center; gap:4px; justify-content:flex-end}
.logo{display:inline-flex; align-items:center; gap:9px}
.logo svg{display:block}
.logo__word{
  font-family:var(--f-display); font-weight:700; font-size:29px; letter-spacing:.055em;
  text-transform:uppercase; line-height:1; color:var(--ink); padding-top:2px;
}
.logo__word em{font-style:normal; color:var(--brand)}

.search{position:relative; max-width:340px; width:100%}
.search input{
  width:100%; height:40px; border:1.5px solid var(--line); background:var(--ground);
  border-radius:var(--r); padding:0 40px 0 14px; font-size:14px; outline:none;
}
.search input:focus{border-color:var(--ink); background:#fff}
.search button{position:absolute; right:4px; top:4px; width:32px; height:32px; display:grid; place-items:center; color:var(--ink-2)}
.search__pop{
  position:absolute; top:46px; left:0; right:0; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow-lg); max-height:400px; overflow:auto; display:none; z-index:70;
}
.search__pop.is-on{display:block}
.search__row{display:flex; gap:12px; padding:10px 12px; align-items:center; border-bottom:1px solid var(--line-2)}
.search__row:hover{background:var(--ground)}
.search__row img{width:42px; height:42px; object-fit:contain; background:var(--ground-2); border-radius:3px}
.search__row b{display:block; font-size:13.5px; font-weight:600; line-height:1.3}
.search__row span{font-size:12px; color:var(--muted)}
.search__empty{padding:18px 14px; font-size:13.5px; color:var(--muted)}

.icon-btn{position:relative; width:40px; height:40px; display:grid; place-items:center; border-radius:var(--r); color:var(--ink)}
.icon-btn:hover{background:var(--ground-2)}
.icon-btn__count{
  position:absolute; top:3px; right:2px; min-width:17px; height:17px; padding:0 4px;
  background:var(--brand); color:#fff; border-radius:9px; font-size:11px; font-weight:700;
  display:grid; place-items:center; line-height:1;
}

.nav{border-top:1px solid var(--line-2)}
.nav__list{display:flex; align-items:center; justify-content:center; gap:2px; list-style:none; margin:0; padding:0; height:46px}
.nav__list > li > a{
  display:flex; align-items:center; gap:5px; height:46px; padding:0 15px;
  font-family:var(--f-display); text-transform:uppercase; font-weight:600; font-size:16px; letter-spacing:.06em;
  color:var(--ink); position:relative;
}
.nav__list > li > a:hover{color:var(--brand)}
.nav__list > li > a.is-active::after{content:""; position:absolute; left:15px; right:15px; bottom:0; height:2.5px; background:var(--brand)}
.nav__hot{color:var(--brand) !important}
.nav__item{position:relative}
.mega{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:#fff; border:1px solid var(--line); border-top:0; box-shadow:var(--shadow-lg);
  padding:22px 26px; display:none; min-width:520px; z-index:80;
}
.nav__item:hover .mega{display:grid; grid-template-columns:repeat(3,minmax(140px,1fr)); gap:6px 28px}
.mega h5{font-family:var(--f-display); text-transform:uppercase; letter-spacing:.1em; font-size:12.5px; color:var(--muted); margin:0 0 8px; grid-column:1/-1}
.mega a{display:block; padding:5px 0; font-size:14px; color:var(--ink-2)}
.mega a:hover{color:var(--brand)}

.burger{display:none}

/* ---------- hero ---------- */
.hero{background:var(--ground-2); border-bottom:1px solid var(--line); overflow:hidden}
.hero__grid{display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; min-height:520px; padding:56px 0}
.hero__copy{max-width:520px}
.hero__kicker{display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:#fff; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.12em; font-size:12.5px; font-weight:600; padding:6px 12px; margin-bottom:20px}
.hero h1{margin-bottom:18px}
.hero h1 em{font-style:normal; color:var(--brand)}
.hero__actions{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap}
.hero__meta{display:flex; gap:26px; margin-top:34px; padding-top:22px; border-top:1px solid var(--line)}
.hero__meta div{font-size:13px; color:var(--muted)}
.hero__meta b{display:block; font-family:var(--f-display); font-size:26px; color:var(--ink); line-height:1; margin-bottom:3px}
.hero__stage{position:relative; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:14px}
.hero__stage figure{margin:0; background:var(--paper); border:1px solid var(--line); overflow:hidden; position:relative}
.hero__stage img{width:100%; aspect-ratio:1/1; object-fit:contain; padding:14px; background:#fff}
.hero__stage figure:first-child{grid-row:span 2; display:flex; flex-direction:column}
.hero__stage figure:first-child img{aspect-ratio:auto; flex:1; min-height:0}
.hero__tag{position:absolute; left:0; bottom:0; right:0; background:rgba(23,20,15,.86); color:#fff; padding:9px 12px; font-size:12px; letter-spacing:.03em; display:flex; justify-content:space-between; gap:8px}
.hero__tag b{font-weight:600}
.hero__tag span{color:var(--gold)}

/* countdown */
.countdown{display:flex; align-items:center; gap:10px; margin-top:26px; background:#fff; border:1px solid var(--line); padding:12px 16px; max-width:420px}
.countdown__label{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:600; font-family:var(--f-display)}
.countdown__nums{display:flex; gap:6px; margin-left:auto}
.countdown__nums span{background:var(--ink); color:#fff; font-family:var(--f-display); font-size:20px; font-weight:600; min-width:36px; text-align:center; padding:3px 4px; line-height:1.2; position:relative}
.countdown__nums span i{display:block; font-style:normal; font-size:9px; letter-spacing:.08em; opacity:.6; font-family:var(--f-body)}

/* ---------- trust strip ---------- */
.trust{background:var(--paper); border-bottom:1px solid var(--line)}
.trust__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.trust__item{display:flex; gap:12px; align-items:flex-start; padding:22px 26px; border-right:1px solid var(--line-2)}
.trust__item:last-child{border-right:0}
.trust__item svg{flex:none; color:var(--brand); margin-top:2px}
.trust__item b{display:block; font-size:14px; font-weight:600; margin-bottom:2px}
.trust__item span{font-size:12.5px; color:var(--muted); line-height:1.45}

/* ---------- sections ---------- */
.sec{padding:64px 0}
.sec--tight{padding:44px 0}
.sec--paper{background:var(--paper)}
.sec__head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; flex-wrap:wrap}
.sec__head p{color:var(--muted); font-size:14.5px; margin:6px 0 0; max-width:560px}
.sec__title{font-family:var(--f-display); text-transform:uppercase; font-size:clamp(28px,3vw,40px); font-weight:700; line-height:1}

/* tabs */
.tabs{display:flex; gap:6px; flex-wrap:wrap}
.tab{
  height:36px; padding:0 15px; border:1.5px solid var(--line); background:#fff; border-radius:var(--r);
  font-size:13px; font-weight:600; color:var(--ink-2); display:inline-flex; align-items:center;
}
.tab:hover{border-color:var(--ink-2)}
.tab.is-on{background:var(--ink); border-color:var(--ink); color:#fff}

/* ---------- category tiles ---------- */
.cats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.cat{position:relative; background:var(--paper); border:1px solid var(--line); padding:20px; display:flex; flex-direction:column; min-height:250px; transition:border-color .15s, transform .15s}
.cat:hover{border-color:var(--ink); transform:translateY(-3px)}
.cat__n{font-family:var(--f-display); font-size:13px; color:var(--muted); letter-spacing:.1em}
.cat h3{font-family:var(--f-display); text-transform:uppercase; font-size:28px; margin:2px 0 4px; line-height:1}
.cat p{font-size:13px; color:var(--muted); margin:0}
.cat__imgs{margin-top:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding-top:16px}
.cat__imgs img{aspect-ratio:1/1; object-fit:contain; background:var(--ground-2); padding:6px}
.cat__go{position:absolute; right:18px; top:18px; color:var(--brand); opacity:0; transition:opacity .15s}
.cat:hover .cat__go{opacity:1}

/* ---------- product card ---------- */
.grid{display:grid; gap:20px 16px}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--5{grid-template-columns:repeat(5,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}

.card{background:var(--paper); border:1px solid var(--line); display:flex; flex-direction:column; position:relative; transition:border-color .15s, box-shadow .15s}
.card:hover{border-color:var(--ink-2); box-shadow:var(--shadow)}
.card__media{position:relative; display:block; background:#fff; overflow:hidden}
.card__media img{width:100%; aspect-ratio:1/1; object-fit:contain; padding:12px; transition:transform .4s ease, opacity .3s}
.card:hover .card__media img.is-primary{transform:scale(1.04)}
.card__media img.is-alt{position:absolute; inset:0; opacity:0}
.card:hover .card__media img.is-alt{opacity:1}
.card__body{padding:12px 14px 15px; display:flex; flex-direction:column; flex:1; border-top:1px solid var(--line-2)}
.card__ip{font-size:11.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:600; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.card__title{font-size:14px; font-weight:600; line-height:1.35; margin:0 0 8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:38px}
.card:hover .card__title{color:var(--brand)}
.card__rate{display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); margin-bottom:8px}
.card__price{display:flex; align-items:baseline; gap:8px; margin-top:auto}
.card__price b{font-family:var(--f-display); font-size:23px; font-weight:700; letter-spacing:.01em}
.card__price s{color:var(--muted-2); font-size:13px}
.card__price .save{color:var(--brand); font-size:12px; font-weight:700}
.card__add{margin-top:11px}
.card__foot{display:flex; align-items:center; justify-content:space-between; margin-top:9px; font-size:11.5px; color:var(--muted)}

.badges{position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:5px; align-items:flex-start; z-index:2}
.badge{
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.08em; font-size:11.5px;
  font-weight:600; padding:3px 8px; line-height:1.45; color:#fff; background:var(--ink);
}
.badge--sale{background:var(--brand)}
.badge--new{background:var(--accent)}
.badge--low{background:var(--gold); color:var(--ink)}
.badge--pre{background:var(--info)}
.badge--hot{background:#fff; color:var(--brand); border:1.5px solid var(--brand); padding:1.5px 7px}
.badge--out{background:var(--muted)}

.wish{position:absolute; top:10px; right:10px; width:32px; height:32px; background:#fff; border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-2); z-index:2; border-radius:var(--r)}
.wish:hover{color:var(--brand); border-color:var(--brand)}
.wish.is-on{color:var(--brand)}
.wish.is-on svg{fill:currentColor}

.stars{display:inline-flex; gap:1.5px; color:var(--gold)}
.stars svg{width:13px; height:13px; fill:currentColor}
.stars .off{color:var(--ground-3)}

/* sold-out overlay */
.card--out .card__media::after{content:"Sold out"; position:absolute; inset:0; background:rgba(255,255,255,.72); display:grid; place-items:center; font-family:var(--f-display); text-transform:uppercase; letter-spacing:.12em; font-size:15px; color:var(--ink)}

/* ---------- rail (horizontal scroller) ---------- */
.rail{position:relative}
.rail__track{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:thin}
.rail__track > *{scroll-snap-align:start}
.rail__track::-webkit-scrollbar{height:6px}
.rail__track::-webkit-scrollbar-thumb{background:var(--ground-3); border-radius:3px}
.rail__nav{display:flex; gap:6px}
.rail__nav button{width:38px; height:38px; border:1.5px solid var(--line); background:#fff; display:grid; place-items:center; border-radius:var(--r)}
.rail__nav button:hover{border-color:var(--ink); background:var(--ink); color:#fff}

/* ---------- how it works ---------- */
.how{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); background:var(--paper)}
.how__step{padding:30px 28px; border-right:1px solid var(--line)}
.how__step:last-child{border-right:0}
.how__num{font-family:var(--f-display); font-size:52px; line-height:1; color:var(--ground-3); font-weight:700; margin-bottom:10px}
.how__step h4{font-family:var(--f-display); text-transform:uppercase; font-size:21px; margin-bottom:7px}
.how__step p{font-size:14px; color:var(--muted); margin:0}

/* ---------- editorial banner ---------- */
.promo{display:grid; grid-template-columns:1fr 1fr; background:var(--ink); color:#f7f2e9; overflow:hidden}
.promo__copy{padding:52px 48px; align-self:center}
.promo__copy .eyebrow{color:var(--gold)}
.promo__copy h3{font-family:var(--f-display); text-transform:uppercase; font-size:clamp(30px,3.4vw,46px); line-height:1; margin:12px 0 14px}
.promo__copy p{color:#c8bfb1; font-size:15px; max-width:440px}
.promo__imgs{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.08)}
.promo__imgs img{width:100%; aspect-ratio:1/1; object-fit:contain; background:#221e18; padding:18px}

/* ---------- reviews / ugc ---------- */
.ugc{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.ugc__card{background:var(--paper); border:1px solid var(--line); padding:20px}
.ugc__card p{font-size:14px; color:var(--ink-2); margin:10px 0 14px}
.ugc__who{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted)}
.ugc__av{width:32px; height:32px; border-radius:50%; background:var(--ground-2); display:grid; place-items:center; font-weight:700; font-size:13px; color:var(--ink-2)}
.ugc__who b{color:var(--ink); font-weight:600; display:block; font-size:13px}

/* ---------- newsletter ---------- */
.news{background:var(--brand-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.news__grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; padding:52px 0}
.news h3{font-family:var(--f-display); text-transform:uppercase; font-size:clamp(28px,3vw,40px); line-height:1; margin-bottom:10px}
.news p{color:var(--ink-2); font-size:15px}
.news__form{display:flex; gap:10px}
.news__form input{flex:1; height:52px; border:1.5px solid var(--ink); background:#fff; padding:0 16px; border-radius:var(--r); outline:none}
.news__form input:focus{box-shadow:0 0 0 3px rgba(225,70,43,.18)}
.news small{display:block; margin-top:10px; color:var(--muted); font-size:12.5px}

/* ---------- footer ---------- */
.ftr{background:var(--ink); color:#c9c0b2; padding:56px 0 0; font-size:14px}
.ftr__grid{display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:36px; padding-bottom:44px}
.ftr h5{font-family:var(--f-display); text-transform:uppercase; letter-spacing:.1em; font-size:13px; color:#fff; margin:0 0 14px}
.ftr ul{list-style:none; margin:0; padding:0}
.ftr li{margin-bottom:8px}
.ftr a:hover{color:#fff}
.ftr .logo__word{color:#fff}
.ftr__about{max-width:330px; line-height:1.6; margin:16px 0 18px; color:#a99f90; font-size:13.5px}
.ftr__social{display:flex; gap:8px}
.ftr__social a{width:36px; height:36px; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; border-radius:var(--r)}
.ftr__social a:hover{background:#fff; color:var(--ink); border-color:#fff}
.ftr__pay{display:flex; gap:6px; flex-wrap:wrap; margin-top:14px}
.ftr__pay span{height:26px; padding:0 9px; border:1px solid rgba(255,255,255,.18); border-radius:3px; display:grid; place-items:center; font-size:10.5px; letter-spacing:.06em; font-weight:600; color:#d9d1c5}
.ftr__bar{border-top:1px solid rgba(255,255,255,.12); padding:18px 0; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12.5px; color:#8d8478}
.ftr__bar a{margin-left:18px}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:12.5px; color:var(--muted); padding:16px 0; display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.crumbs a:hover{color:var(--brand)}
.crumbs span{color:var(--muted-2)}

/* ---------- page head ---------- */
.phead{background:var(--paper); border-bottom:1px solid var(--line); padding:0 0 30px}
.phead h1{font-family:var(--f-display); text-transform:uppercase; font-size:clamp(32px,4vw,50px); line-height:1; margin-bottom:10px}
.phead p{color:var(--muted); max-width:640px; font-size:15px}

/* ---------- shop layout ---------- */
.shop{display:grid; grid-template-columns:246px 1fr; gap:36px; padding:32px 0 72px; align-items:start}
.filters{position:sticky; top:130px}
.fgroup{border-bottom:1px solid var(--line); padding:16px 0}
.fgroup:first-child{padding-top:0}
.fgroup h4{font-family:var(--f-display); text-transform:uppercase; font-size:14px; letter-spacing:.08em; margin-bottom:11px; display:flex; justify-content:space-between; align-items:center; cursor:pointer}
.fgroup__list{max-height:230px; overflow:auto; padding-right:4px}
.fgroup__list::-webkit-scrollbar{width:5px}
.fgroup__list::-webkit-scrollbar-thumb{background:var(--ground-3); border-radius:3px}
.check{display:flex; align-items:center; gap:9px; padding:5px 0; font-size:13.5px; color:var(--ink-2); cursor:pointer}
.check input{appearance:none; width:16px; height:16px; border:1.5px solid var(--line); border-radius:3px; background:#fff; flex:none; position:relative}
.check input:checked{background:var(--ink); border-color:var(--ink)}
.check input:checked::after{content:""; position:absolute; left:4.5px; top:1px; width:4px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
.check:hover{color:var(--ink)}
.check em{margin-left:auto; font-style:normal; color:var(--muted-2); font-size:12px}
.frange{display:flex; align-items:center; gap:8px}
.frange input{width:100%; height:36px; border:1.5px solid var(--line); border-radius:var(--r); padding:0 10px; font-size:13px; outline:none}
.frange input:focus{border-color:var(--ink)}

.shop__bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:22px; flex-wrap:wrap}
.shop__count{font-size:13.5px; color:var(--muted)}
.shop__count b{color:var(--ink)}
.sortsel{height:40px; border:1.5px solid var(--line); background:#fff; border-radius:var(--r); padding:0 34px 0 12px; font-size:13.5px; font-weight:600; outline:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2317140f' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 12px center}
.chips{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:18px}
.chip{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; background:var(--ground-2); border:1px solid var(--line); border-radius:20px; font-size:12.5px; font-weight:600}
.chip button{color:var(--muted); display:grid; place-items:center}
.chip button:hover{color:var(--brand)}

.pager{display:flex; gap:6px; justify-content:center; margin-top:44px}
.pager button{min-width:40px; height:40px; padding:0 12px; border:1.5px solid var(--line); background:#fff; border-radius:var(--r); font-weight:600; font-size:14px}
.pager button:hover{border-color:var(--ink)}
.pager button.is-on{background:var(--ink); border-color:var(--ink); color:#fff}
.pager button[disabled]{opacity:.35; pointer-events:none}

.empty{text-align:center; padding:70px 20px; color:var(--muted)}
.empty h3{font-family:var(--f-display); text-transform:uppercase; font-size:26px; color:var(--ink); margin-bottom:8px}

/* ---------- product detail ---------- */
.pdp{display:grid; grid-template-columns:1.15fr 1fr; gap:48px; padding:8px 0 64px; align-items:start}
.gal{display:grid; grid-template-columns:78px 1fr; gap:14px; position:sticky; top:130px}
.gal__thumbs{display:flex; flex-direction:column; gap:9px}
.gal__thumbs button{border:1.5px solid var(--line); background:#fff; padding:5px; border-radius:var(--r)}
.gal__thumbs button.is-on{border-color:var(--ink)}
.gal__thumbs img{aspect-ratio:1/1; object-fit:contain}
.gal__main{border:1px solid var(--line); background:#fff; position:relative; overflow:hidden}
.gal__main img{width:100%; aspect-ratio:1/1; object-fit:contain; padding:26px}
.gal__zoom{position:absolute; right:12px; bottom:12px; background:rgba(255,255,255,.94); border:1px solid var(--line); width:36px; height:36px; display:grid; place-items:center; border-radius:var(--r)}

.pdp__ip{font-family:var(--f-display); text-transform:uppercase; letter-spacing:.12em; font-size:13px; color:var(--brand); font-weight:600}
.pdp h1{font-size:clamp(24px,2.4vw,32px); line-height:1.2; margin:8px 0 12px; letter-spacing:-.015em}
.pdp__rate{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted); margin-bottom:18px; flex-wrap:wrap}
.pdp__rate a{border-bottom:1px solid var(--muted-2)}
.pdp__price{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.pdp__price b{font-family:var(--f-display); font-size:40px; line-height:1; font-weight:700}
.pdp__price s{color:var(--muted-2); font-size:17px}
.pdp__price .save{background:var(--brand); color:#fff; font-size:12px; font-weight:700; padding:3px 8px; letter-spacing:.04em}
.pdp__tax{width:100%; font-size:12.5px; color:var(--muted); margin-top:6px}

.spec{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:20px 0}
.spec div{background:#fff; padding:11px 14px}
.spec dt{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; margin-bottom:2px}
.spec dd{margin:0; font-size:14px; font-weight:600}

.opt{margin:20px 0}
.opt__label{display:flex; justify-content:space-between; font-size:13px; font-weight:600; margin-bottom:9px}
.opt__label span{color:var(--muted); font-weight:400}
.opt__row{display:flex; gap:8px; flex-wrap:wrap}
.opt__btn{border:1.5px solid var(--line); background:#fff; padding:9px 16px; border-radius:var(--r); font-size:13.5px; font-weight:600; text-align:left; line-height:1.3}
.opt__btn small{display:block; font-weight:400; color:var(--muted); font-size:11.5px}
.opt__btn.is-on{border-color:var(--ink); background:var(--ink); color:#fff}
.opt__btn.is-on small{color:rgba(255,255,255,.7)}

.qty{display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:var(--r); height:52px; background:#fff}
.qty button{width:44px; height:100%; display:grid; place-items:center; font-size:18px; color:var(--ink-2)}
.qty button:hover{color:var(--brand)}
.qty input{width:44px; height:100%; border:0; text-align:center; font-weight:700; font-size:15px; outline:none; -moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

.buybox{display:flex; gap:10px; margin:20px 0 14px}
.stockbar{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-2); margin-bottom:16px}
.stockbar i{width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none}
.stockbar i.low{background:var(--gold)}
.stockbar i.out{background:var(--muted)}
.stockbar .meter{flex:1; height:5px; background:var(--ground-3); border-radius:3px; overflow:hidden; max-width:150px}
.stockbar .meter b{display:block; height:100%; background:var(--brand)}

.usp{list-style:none; margin:20px 0 0; padding:18px 0 0; border-top:1px solid var(--line); display:grid; gap:10px}
.usp li{display:flex; gap:10px; font-size:13.5px; color:var(--ink-2); align-items:flex-start}
.usp svg{flex:none; color:var(--accent); margin-top:2px}

.acc{border-top:1px solid var(--line); margin-top:24px}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{width:100%; display:flex; justify-content:space-between; align-items:center; padding:16px 0; font-family:var(--f-display); text-transform:uppercase; font-size:16px; letter-spacing:.06em; font-weight:600; text-align:left}
.acc__btn svg{transition:transform .2s}
.acc__item.is-open .acc__btn svg{transform:rotate(180deg)}
.acc__panel{display:none; padding:0 0 18px; font-size:14px; color:var(--ink-2); line-height:1.65}
.acc__item.is-open .acc__panel{display:block}
.acc__panel ul{margin:8px 0 0; padding-left:18px}
.acc__panel li{margin-bottom:5px}

/* review block */
.rev{display:grid; grid-template-columns:280px 1fr; gap:44px; padding:48px 0; border-top:1px solid var(--line)}
.rev__score{font-family:var(--f-display); font-size:64px; line-height:1; font-weight:700}
.rev__bars{margin-top:16px; display:grid; gap:6px}
.rev__bar{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--muted)}
.rev__bar .meter{flex:1; height:6px; background:var(--ground-3); border-radius:3px; overflow:hidden}
.rev__bar .meter b{display:block; height:100%; background:var(--gold)}
.rev__list{display:grid; gap:18px}
.rev__item{border:1px solid var(--line); background:#fff; padding:18px 20px}
.rev__head{display:flex; align-items:center; gap:10px; margin-bottom:9px; flex-wrap:wrap}
.rev__head b{font-size:14px}
.rev__head .vf{font-size:11.5px; color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:.06em}
.rev__head time{margin-left:auto; font-size:12.5px; color:var(--muted)}
.rev__item p{font-size:14px; color:var(--ink-2); margin:0}

/* ---------- cart drawer ---------- */
.scrim{position:fixed; inset:0; background:rgba(23,20,15,.5); opacity:0; pointer-events:none; transition:opacity .25s; z-index:90}
.scrim.is-on{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(430px,100%); background:var(--paper);
  z-index:100; transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.drawer.is-on{transform:none}
.drawer__head{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line)}
.drawer__head h3{font-family:var(--f-display); text-transform:uppercase; font-size:21px; letter-spacing:.06em}
.drawer__body{flex:1; overflow-y:auto; padding:6px 22px}
.drawer__foot{border-top:1px solid var(--line); padding:18px 22px 22px; background:var(--ground)}
.ship-bar{background:var(--accent-soft); padding:12px 22px; font-size:13px; color:var(--ink-2); border-bottom:1px solid var(--line)}
.ship-bar .meter{height:5px; background:#fff; border-radius:3px; overflow:hidden; margin-top:8px}
.ship-bar .meter b{display:block; height:100%; background:var(--accent); transition:width .3s}

.li{display:grid; grid-template-columns:78px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-2)}
.li__img{border:1px solid var(--line); background:#fff}
.li__img img{aspect-ratio:1/1; object-fit:contain; padding:6px}
.li__ip{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600}
.li__t{font-size:13.5px; font-weight:600; line-height:1.35; margin:2px 0 6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.li__row{display:flex; align-items:center; justify-content:space-between; margin-top:6px}
.li__qty{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--r); height:30px}
.li__qty button{width:28px; height:100%; display:grid; place-items:center; font-size:15px; color:var(--ink-2)}
.li__qty span{min-width:26px; text-align:center; font-weight:700; font-size:13px}
.li__price{font-family:var(--f-display); font-size:19px; font-weight:700}
.li__rm{font-size:12px; color:var(--muted); border-bottom:1px solid var(--line); align-self:flex-start}
.li__rm:hover{color:var(--brand); border-color:var(--brand)}

.totals{display:grid; gap:8px; margin-bottom:14px; font-size:14px}
.totals__row{display:flex; justify-content:space-between; color:var(--ink-2)}
.totals__row--big{padding-top:10px; border-top:1px solid var(--line); font-size:16px; color:var(--ink); font-weight:700; align-items:baseline}
.totals__row--big b{font-family:var(--f-display); font-size:27px}

/* ---------- cart page ---------- */
.cartpage{display:grid; grid-template-columns:1fr 360px; gap:40px; padding:24px 0 72px; align-items:start}
.cart-tbl{background:#fff; border:1px solid var(--line)}
.cart-tbl__head{display:grid; grid-template-columns:1fr 130px 120px 40px; gap:16px; padding:14px 20px; border-bottom:1px solid var(--line); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600}
.cart-row{display:grid; grid-template-columns:1fr 130px 120px 40px; gap:16px; padding:18px 20px; border-bottom:1px solid var(--line-2); align-items:center}
.cart-row:last-child{border-bottom:0}
.cart-row__p{display:grid; grid-template-columns:88px 1fr; gap:14px; align-items:center}
.cart-row__p img{aspect-ratio:1/1; object-fit:contain; border:1px solid var(--line); background:#fff; padding:6px}
.summary{background:#fff; border:1px solid var(--line); padding:22px; position:sticky; top:130px}
.summary h3{font-family:var(--f-display); text-transform:uppercase; font-size:20px; letter-spacing:.06em; margin-bottom:16px}
.promo-in{display:flex; gap:8px; margin:14px 0}
.promo-in input{flex:1; height:42px; border:1.5px solid var(--line); border-radius:var(--r); padding:0 12px; outline:none; font-size:13.5px}
.promo-in input:focus{border-color:var(--ink)}

/* ---------- checkout ---------- */
.co{display:grid; grid-template-columns:1fr 400px; gap:0; min-height:70vh}
.co__form{padding:36px 56px 72px 0}
.co__side{background:var(--ground-2); border-left:1px solid var(--line); padding:36px 32px 72px}
.co h2{font-family:var(--f-display); text-transform:uppercase; font-size:20px; letter-spacing:.06em; margin:0 0 16px}
.field{margin-bottom:14px}
.field label{display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%; height:46px; border:1.5px solid var(--line); border-radius:var(--r); padding:0 13px; outline:none; background:#fff; font-size:14px}
.field textarea{height:auto; padding:11px 13px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.field-row--3{grid-template-columns:1fr 1fr 1fr}
.radio-card{display:flex; gap:12px; align-items:flex-start; border:1.5px solid var(--line); border-radius:var(--r); padding:14px 16px; background:#fff; cursor:pointer; margin-bottom:10px}
.radio-card.is-on{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink)}
.radio-card input{margin-top:3px; accent-color:var(--brand)}
.radio-card b{font-size:14px; display:block}
.radio-card span{font-size:12.5px; color:var(--muted)}
.radio-card .amt{margin-left:auto; font-weight:700; font-family:var(--f-display); font-size:18px}
.steps{display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--muted); margin-bottom:24px; flex-wrap:wrap}
.steps b{color:var(--ink)}

/* ---------- content pages ---------- */
.prose{font-size:15.5px; line-height:1.72; color:var(--ink-2); max-width:720px}
.prose h2{font-family:var(--f-display); text-transform:uppercase; font-size:28px; margin:34px 0 12px; color:var(--ink)}
.prose h3{font-size:18px; margin:26px 0 8px; color:var(--ink)}
.prose ul,.prose ol{padding-left:20px}
.prose li{margin-bottom:7px}
.prose strong{color:var(--ink)}

.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:32px 0}
.stat{background:#fff; border:1px solid var(--line); padding:22px}
.stat b{display:block; font-family:var(--f-display); font-size:40px; line-height:1; margin-bottom:5px}
.stat span{font-size:13px; color:var(--muted)}

.faq-item{border-bottom:1px solid var(--line)}
.faq-item h4{padding:18px 0; display:flex; justify-content:space-between; gap:16px; cursor:pointer; font-size:16px; align-items:center}
.faq-item p{display:none; padding:0 0 20px; color:var(--ink-2); font-size:14.5px; max-width:760px}
.faq-item.is-open p{display:block}
.faq-item svg{flex:none; transition:transform .2s}
.faq-item.is-open svg{transform:rotate(45deg)}

.postcard{background:#fff; border:1px solid var(--line); display:flex; flex-direction:column}
.postcard img{aspect-ratio:16/10; object-fit:contain; background:var(--ground-2); padding:20px}
.postcard__b{padding:20px; flex:1; display:flex; flex-direction:column}
.postcard h3{font-size:18px; line-height:1.3; margin:8px 0 8px}
.postcard p{font-size:14px; color:var(--muted); margin:0 0 16px}
.postcard__m{margin-top:auto; display:flex; gap:10px; font-size:12px; color:var(--muted-2); align-items:center}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); z-index:120;
  background:var(--ink); color:#fff; padding:13px 20px; border-radius:var(--r); font-size:14px;
  display:flex; align-items:center; gap:10px; opacity:0; pointer-events:none; transition:.25s; box-shadow:var(--shadow-lg);
}
.toast.is-on{opacity:1; transform:translate(-50%,0)}
.toast svg{color:var(--gold)}

/* ---------- misc ---------- */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.hr{height:1px; background:var(--line); border:0; margin:0}
.flag{display:inline-flex; align-items:center; gap:6px; font-size:13px}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .grid--5{grid-template-columns:repeat(4,1fr)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .ugc{grid-template-columns:repeat(2,1fr)}
  .co{grid-template-columns:1fr 340px}
  .co__form{padding-right:36px}
}
@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr; gap:32px; padding:40px 0}
  .hero__stage{grid-template-columns:1fr 1fr}
  .hero__stage figure:first-child{grid-row:auto}
  .hero__stage figure:first-child img{aspect-ratio:1/1}
  .trust__grid{grid-template-columns:repeat(2,1fr)}
  .trust__item:nth-child(2){border-right:0}
  .trust__item:nth-child(-n+2){border-bottom:1px solid var(--line-2)}
  .promo{grid-template-columns:1fr}
  .promo__copy{padding:36px 28px}
  .news__grid{grid-template-columns:1fr; gap:24px; padding:40px 0}
  .shop{grid-template-columns:1fr}
  .filters{position:static; display:none}
  .filters.is-on{display:block; margin-bottom:20px}
  .pdp{grid-template-columns:1fr; gap:28px}
  .gal{position:static}
  .rev{grid-template-columns:1fr; gap:24px}
  .cartpage{grid-template-columns:1fr}
  .summary{position:static}
  .co{grid-template-columns:1fr}
  .co__form{padding:28px 0}
  .co__side{margin:0; padding:28px 24px; border-left:0; border-top:1px solid var(--line)}
  .ftr__grid{grid-template-columns:1fr 1fr; gap:28px}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .how{grid-template-columns:1fr}
  .how__step{border-right:0; border-bottom:1px solid var(--line)}
}
@media (max-width:760px){
  :root{--gut:16px}
  /* header collapses to logo + tools, with search on its own row */
  .hdr__main{
    grid-template-columns:1fr auto;
    grid-template-areas:"logo tools" "search search";
    height:auto; padding:11px 0; gap:10px 12px;
  }
  .logo{grid-area:logo}
  .logo__word{font-size:24px}
  .logo svg{width:26px; height:26px}
  .hdr__tools{grid-area:tools; gap:0}
  .hdr__tools .sortsel{padding:0 26px 0 8px; background-position:right 8px center; margin-right:2px}
  .hdr .search{grid-area:search; max-width:none; display:block}
  /* nav scrolls horizontally instead of wrapping */
  .nav{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .nav .wrap{max-width:none; width:max-content; min-width:100%; padding:0 12px}
  .nav__list{justify-content:flex-start; padding:0; height:44px}
  .nav__list > li{flex:none}
  .nav__list > li > a{white-space:nowrap; padding:0 11px; font-size:15px}
  .announce .wrap{height:auto; padding:7px 16px}
  .announce__track{height:auto}
  .announce__item{white-space:normal; text-align:center; font-size:12px; line-height:1.4; justify-content:center}
  .filters{position:static}
  .shop__bar{gap:10px}
  .shop__bar > div:last-child{flex:1; justify-content:flex-end}
  .sortsel{flex:1; min-width:0}
  .mega{display:none !important}
  .grid--4,.grid--5{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:1fr}
  .cats{grid-template-columns:1fr}
  .ugc{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}
  .gal__thumbs{flex-direction:row; order:2; overflow-x:auto}
  .gal__thumbs button{flex:none; width:66px}
  .spec{grid-template-columns:1fr}
  .cart-tbl__head{display:none}
  .cart-row{grid-template-columns:1fr; gap:12px}
  .field-row,.field-row--3{grid-template-columns:1fr}
  .sec{padding:44px 0}
  .stat-row{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr}
  .hero__meta{flex-wrap:wrap; gap:18px}
  .co__side{padding:24px 16px}
}

/* content-page layout tweaks */
@media (max-width:1000px){
  .faq-layout,.contact-layout,.acct-layout{grid-template-columns:1fr !important; gap:28px !important}
  .faq-layout nav{position:static !important}
  .post-row{grid-template-columns:1fr !important}
  .post-row img{border-right:0 !important; border-bottom:1px solid var(--line)}
}