/* ============================================================
   2121 VIBES — Design System
   Minimal luxury active lifestyle · Black / White / Gray
   ============================================================ */
:root{
  --black:#111111;
  --ink:#1c1c1c;
  --gray:#8a8a8a;
  --gray-l:#b5b5b2;
  --line:#e7e7e4;
  --bg:#ffffff;
  --bg-soft:#f7f7f5;
  --bg-warm:#f2f1ee;
  --white:#ffffff;
  --max:1320px;
  --pad:clamp(20px,5vw,72px);
  --sec:clamp(72px,11vw,150px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Jost','Helvetica Neue',Helvetica,'PingFang SC',sans-serif;
  font-weight:300;color:var(--ink);background:var(--bg);
  line-height:1.75;-webkit-font-smoothing:antialiased;
  font-size:15.5px;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;}
::selection{background:var(--black);color:var(--white);}

/* ---------- layout helpers ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);}
.section{padding:var(--sec) 0;}
.section-soft{background:var(--bg-soft);}
.grid{display:grid;gap:26px;}
.cols-2{grid-template-columns:1fr 1fr;}
.cols-3{grid-template-columns:repeat(3,1fr);}
.cols-4{grid-template-columns:repeat(4,1fr);}

/* ---------- type ---------- */
.eyebrow{
  font-size:11px;font-weight:400;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gray);margin-bottom:22px;
}
h1,h2,h3{font-weight:300;line-height:1.15;letter-spacing:.01em;}
.h-hero{font-size:clamp(44px,7vw,96px);letter-spacing:.02em;}
.h-sec{font-size:clamp(30px,4.2vw,52px);}
.h-sub{font-size:clamp(19px,2vw,24px);}
.lead{color:#4a4a4a;font-size:clamp(15px,1.35vw,17.5px);max-width:56ch;}
.muted{color:var(--gray);font-size:13.5px;}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s;
}
.site-header.scrolled{border-bottom-color:var(--line);}
.header-in{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  height:76px;display:flex;align-items:center;gap:44px;
}
.logo-link img{height:38px;width:auto;}
.main-nav{display:flex;gap:34px;margin-left:12px;}
.main-nav a{
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#3d3d3d;
  padding:6px 0;position:relative;white-space:nowrap;
}
.main-nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--black);transition:width .35s var(--ease);
}
.main-nav a:hover::after{width:100%;}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px;}
.cart-btn{
  display:flex;align-items:center;gap:10px;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;padding:10px 6px;
}
.cart-count{
  min-width:20px;height:20px;border:1px solid var(--black);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10.5px;letter-spacing:0;padding:0 4px;
}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:10px;}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--black);}

/* mobile nav */
@media(max-width:900px){
  .main-nav{
    position:fixed;inset:76px 0 auto 0;background:var(--white);
    flex-direction:column;gap:0;padding:10px var(--pad) 26px;
    border-bottom:1px solid var(--line);
    transform:translateY(-130%);transition:transform .4s var(--ease);
  }
  .main-nav.open{transform:translateY(0);}
  .main-nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:13px;}
  .nav-toggle{display:flex;}
}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:94vh;display:flex;align-items:center;
  background:#dcdcda;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:70% 68%;}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(17,17,17,.42) 0%,rgba(17,17,17,.12) 45%,rgba(17,17,17,0) 70%);
}
.hero-in{position:relative;z-index:2;color:var(--white);max-width:var(--max);margin:0 auto;padding:120px var(--pad) 0;width:100%;}
.hero .eyebrow{color:rgba(255,255,255,.75);}
.hero p.lead{color:rgba(255,255,255,.88);margin-top:26px;}
.hero-cta{margin-top:44px;display:flex;gap:16px;flex-wrap:wrap;}
.hero-scroll{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  font-size:10.5px;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.8);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hero-scroll::after{
  content:"";width:1px;height:44px;background:linear-gradient(rgba(255,255,255,.8),transparent);
  animation:drop 2.2s var(--ease) infinite;
}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--black);color:var(--white);
  font-size:11.5px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;
  padding:18px 40px;transition:background .3s,color .3s,border-color .3s;
  border:1px solid var(--black);
}
.btn:hover{background:#2c2c2c;}
.btn-ghost{background:transparent;color:var(--black);}
.btn-ghost:hover{background:var(--black);color:var(--white);}
.btn-light{background:var(--white);color:var(--black);border-color:var(--white);}
.btn-light:hover{background:transparent;color:var(--white);}
.btn-block{width:100%;}
.link-arrow{
  font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;
  border-bottom:1px solid var(--black);padding-bottom:6px;display:inline-block;
  transition:opacity .3s;
}
.link-arrow:hover{opacity:.55;}

/* ---------- section headers ---------- */
.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;margin-bottom:clamp(40px,6vw,72px);flex-wrap:wrap;
}
.sec-head .eyebrow{margin-bottom:16px;}

/* ---------- brand story ---------- */
.story{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,100px);align-items:center;}
.story-img{position:relative;}
.story-img img{width:100%;aspect-ratio:4/4.6;object-fit:cover;}
.story-img::after{
  content:"";position:absolute;inset:auto -26px -26px auto;width:58%;height:58%;
  border:1px solid var(--line);z-index:-1;
}
.story-copy .big-num{
  font-weight:100;font-size:clamp(60px,8vw,120px);line-height:1;
  letter-spacing:.14em;color:var(--black);margin-bottom:8px;
}
.story-copy p{margin-top:20px;}
.story-points{margin-top:34px;border-top:1px solid var(--line);}
.story-points li{
  list-style:none;display:flex;gap:18px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--line);font-size:14.5px;
}
.story-points li b{font-weight:400;min-width:64px;letter-spacing:.16em;color:var(--gray);font-size:11px;text-transform:uppercase;}

/* ---------- collections ---------- */
.coll-card{position:relative;display:block;overflow:hidden;background:var(--bg-warm);}
.coll-card img{aspect-ratio:4/4.7;width:100%;object-fit:cover;transition:transform 1.1s var(--ease);}
.coll-card:hover img{transform:scale(1.045);}
.coll-card .veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 52%,rgba(17,17,17,.52) 100%);
}
.coll-card .info{
  position:absolute;left:34px;right:34px;bottom:30px;color:var(--white);
}
.coll-card .info h3{font-size:clamp(21px,2.2vw,27px);letter-spacing:.05em;}
.coll-card .info span{
  display:inline-block;margin-top:8px;font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:4px;
}

/* ---------- products ---------- */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px;}
.pgrid-3{grid-template-columns:repeat(3,1fr);}
.p-card{position:relative;}
.p-media{position:relative;overflow:hidden;background:var(--bg-warm);display:block;}
.p-media img{aspect-ratio:1/1;width:100%;object-fit:cover;transition:transform 1s var(--ease);}
.p-card:hover .p-media img{transform:scale(1.04);}
.p-add{
  position:absolute;left:14px;right:14px;bottom:14px;z-index:2;
  background:rgba(255,255,255,.94);color:var(--black);
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  padding:14px 0;text-align:center;
  opacity:0;transform:translateY(8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),background .3s;
}
.p-card:hover .p-add,.p-add:focus-visible{opacity:1;transform:translateY(0);}
.p-add:hover{background:var(--black);color:var(--white);}
.p-meta{padding:16px 2px 0;display:flex;justify-content:space-between;align-items:baseline;gap:14px;}
.p-name{font-size:14.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:400;}
.p-coll{display:block;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gray);margin-top:5px;}
.p-price{font-size:14.5px;color:var(--ink);white-space:nowrap;}
.p-badge{
  position:absolute;top:14px;left:14px;z-index:2;background:var(--black);color:var(--white);
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;padding:7px 12px;
}

/* ---------- why 2121 ---------- */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.why-card{border:1px solid var(--line);padding:38px 30px;background:var(--white);transition:border-color .3s;}
.why-card:hover{border-color:var(--black);}
.why-card svg{width:34px;height:34px;stroke:var(--black);fill:none;stroke-width:1.1;margin-bottom:26px;}
.why-card h3{font-size:15px;letter-spacing:.14em;text-transform:uppercase;font-weight:400;margin-bottom:12px;}
.why-card p{font-size:13.5px;color:#5c5c5c;}

/* ---------- manifesto strip ---------- */
.manifesto{
  background:var(--black);color:var(--white);text-align:center;
  padding:clamp(80px,12vw,150px) var(--pad);
}
.manifesto .num{
  font-weight:100;font-size:clamp(64px,10vw,150px);
  letter-spacing:.3em;text-indent:.3em;line-height:1;
}
.manifesto p{
  margin-top:30px;font-size:12px;letter-spacing:.5em;text-indent:.5em;
  text-transform:uppercase;color:rgba(255,255,255,.65);
}

/* ---------- newsletter ---------- */
.newsletter{max-width:660px;margin:0 auto;text-align:center;}
.news-form{
  margin-top:38px;display:flex;border:1px solid var(--black);background:var(--white);
}
.news-form input{
  flex:1;border:0;outline:none;padding:18px 24px;font-family:inherit;
  font-size:14px;letter-spacing:.06em;color:var(--ink);background:transparent;min-width:0;
}
.news-form input::placeholder{color:var(--gray-l);letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;}
.news-form button{
  background:var(--black);color:var(--white);padding:0 38px;
  font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;transition:background .3s;
}
.news-form button:hover{background:#2c2c2c;}
.news-done{display:none;margin-top:38px;border:1px solid var(--line);padding:26px;background:var(--bg-soft);}
.news-done b{display:block;font-weight:400;letter-spacing:.2em;text-transform:uppercase;font-size:13px;margin-bottom:6px;}
.form-err{display:none;margin-top:14px;font-size:12.5px;color:#8c2f2f;letter-spacing:.06em;}

/* ---------- footer ---------- */
.site-footer{background:var(--black);color:rgba(255,255,255,.72);margin-top:var(--sec);}
.footer-in{
  max-width:var(--max);margin:0 auto;padding:80px var(--pad) 36px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;
}
.site-footer img{height:44px;margin-bottom:22px;}
.footer-tag{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.site-footer h4{
  font-size:11px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:20px;
}
.site-footer ul{list-style:none;}
.site-footer li{margin-bottom:12px;font-size:13.5px;}
.site-footer li a{transition:color .3s;}
.site-footer li a:hover{color:var(--white);}
.footer-base{
  border-top:1px solid rgba(255,255,255,.14);
  max-width:var(--max);margin:0 auto;padding:24px var(--pad);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4);
}

/* ---------- page hero (collection / product) ---------- */
.page-hero{padding:150px 0 clamp(44px,6vw,72px);}
.crumbs{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gray);margin-bottom:22px;}
.crumbs a:hover{color:var(--black);}

/* ---------- product page ---------- */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,90px);align-items:start;}
.pdp-media{background:var(--bg-warm);}
.pdp-media img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.pdp-info{position:sticky;top:110px;}
.pdp-price{font-size:19px;margin:14px 0 26px;letter-spacing:.06em;}
.pdp-desc{color:#4a4a4a;margin-bottom:30px;}
.pdp-specs{border-top:1px solid var(--line);margin:34px 0 38px;}
.pdp-specs div{
  display:flex;justify-content:space-between;gap:20px;
  padding:12px 0;border-bottom:1px solid var(--line);font-size:13px;
}
.pdp-specs dt{color:var(--gray);letter-spacing:.16em;text-transform:uppercase;font-size:10.5px;}
.qty-row{display:flex;gap:14px;align-items:stretch;margin-bottom:16px;}
.qty{
  display:flex;align-items:center;border:1px solid var(--black);
}
.qty button{width:46px;height:100%;min-height:52px;font-size:16px;color:var(--ink);}
.qty button:hover{background:var(--bg-soft);}
.qty span{min-width:36px;text-align:center;font-size:14.5px;}
.qty-row .btn{flex:1;}
.pdp-note{margin-top:18px;font-size:12.5px;color:var(--gray);letter-spacing:.04em;}

/* ---------- cart drawer ---------- */
.cart-overlay{
  position:fixed;inset:0;background:rgba(17,17,17,.45);z-index:70;
  opacity:0;pointer-events:none;transition:opacity .35s;
}
.cart-overlay.open{opacity:1;pointer-events:auto;}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,94vw);z-index:71;
  background:var(--white);display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .45s var(--ease);
  box-shadow:-24px 0 60px rgba(17,17,17,.12);
}
.cart-drawer.open{transform:translateX(0);}
.cart-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 28px;border-bottom:1px solid var(--line);
}
.cart-head h3{font-size:12px;letter-spacing:.34em;text-transform:uppercase;font-weight:400;}
.cart-close{font-size:22px;line-height:1;padding:6px 10px;}
.cart-body{flex:1;overflow-y:auto;padding:10px 28px;}
.cart-empty{padding:70px 0;text-align:center;color:var(--gray);}
.cart-empty svg{width:38px;height:38px;stroke:var(--gray-l);fill:none;stroke-width:1;margin-bottom:18px;}
.cart-item{
  display:grid;grid-template-columns:86px 1fr auto;gap:18px;
  padding:22px 0;border-bottom:1px solid var(--line);
}
.cart-item img{width:86px;height:86px;object-fit:cover;background:var(--bg-warm);}
.ci-name{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;}
.ci-price{font-size:12.5px;color:var(--gray);margin-top:4px;}
.ci-qty{display:inline-flex;align-items:center;border:1px solid var(--line);margin-top:12px;}
.ci-qty button{width:30px;height:30px;font-size:14px;}
.ci-qty button:hover{background:var(--bg-soft);}
.ci-qty span{min-width:28px;text-align:center;font-size:12.5px;}
.ci-remove{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gray);align-self:start;padding:4px 0;border-bottom:1px solid transparent;
}
.ci-remove:hover{color:var(--black);border-bottom-color:var(--black);}
.cart-foot{border-top:1px solid var(--line);padding:24px 28px 30px;}
.cart-sub{display:flex;justify-content:space-between;font-size:13px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px;}
.cart-sub b{font-weight:400;font-size:16px;letter-spacing:.04em;}
.cart-ship{font-size:12px;color:var(--gray);margin-bottom:20px;}
.checkout-note{margin-top:14px;text-align:center;font-size:12px;color:var(--gray);}

/* ---------- colorways ---------- */
.p-swatches{display:flex;gap:6px;margin-top:10px;}
.p-swatches i{
  width:11px;height:11px;border-radius:50%;display:block;
  border:1px solid rgba(0,0,0,.18);
}
.pdp-colors-label{
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gray);
  margin-bottom:12px;
}
.pdp-colors-label span{color:var(--black);letter-spacing:.12em;}
.pdp-colors{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px;}
.pdp-colors button{
  width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(0,0,0,.18);transition:transform .2s var(--ease);
}
.pdp-colors button:hover{transform:scale(1.12);}
.pdp-colors button.sel{
  box-shadow:0 0 0 3px var(--white),0 0 0 4.5px var(--black);
}
.ci-color{
  display:flex;align-items:center;gap:7px;margin-top:6px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);
}
.ci-color i{width:10px;height:10px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.18);}

/* ---------- keychain feature ---------- */
.feature{
  display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(40px,6vw,90px);
  align-items:center;
}
.feature-img{position:relative;}
.feature-img img{width:100%;aspect-ratio:3/2.05;object-fit:cover;}
.feature-img::before{
  content:"";position:absolute;inset:-26px auto auto -26px;width:52%;height:52%;
  border:1px solid var(--line);z-index:-1;
}
.feature-dots{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;align-items:center;}
.feature-dots i{
  width:18px;height:18px;border-radius:50%;display:block;
  border:1px solid rgba(0,0,0,.15);transition:transform .25s var(--ease);
}
.feature-dots i:hover{transform:scale(1.25);}
.feature-dots span{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gray);margin-left:6px;
}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);}
.reveal.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease);}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;}
  *{animation:none!important;transition:none!important;}
}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .cols-3,.cols-4{grid-template-columns:repeat(2,1fr);}
  .footer-in{grid-template-columns:1fr 1fr;}
  .story{grid-template-columns:1fr;}
  .feature{grid-template-columns:1fr;}
  .pdp{grid-template-columns:1fr;}
  .pdp-info{position:static;}
}
@media(max-width:640px){
  .product-grid{grid-template-columns:1fr 1fr;gap:22px 14px;}
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr;}
  .news-form{flex-direction:column;}
  .news-form button{padding:16px;}
  .header-in{height:66px;gap:20px;}
  .logo-link img{height:30px;}
  .footer-in{grid-template-columns:1fr;}
  .p-name{font-size:12.5px;}
}

/* ---------- hero: text scrim on narrow screens ---------- */
@media(max-width:900px){
  /* wide v14 hero: person stands at ~81% of frame width — recentre on her */
  .hero-bg img{object-position:60% 42%;}
  /* vertical scrim so the headline, copy and buttons stay legible over the photo */
  .hero-bg::after{
    background:linear-gradient(180deg,
      rgba(15,15,15,.30) 0%,
      rgba(15,15,15,.42) 30%,
      rgba(15,15,15,.60) 62%,
      rgba(15,15,15,.78) 100%);
  }
  .hero .eyebrow{color:rgba(255,255,255,.85);}
  .hero p.lead{color:rgba(255,255,255,.94);}
  .hero-in{text-shadow:0 1px 24px rgba(0,0,0,.5);}
  .hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.75);}
  .hero-scroll{color:rgba(255,255,255,.92);}
}

/* ============================================================
   COMMERCE — shop all, checkout, order confirmation
   ============================================================ */

/* ---------- cart drawer totals ---------- */
.cart-line span,.cart-line b{font-weight:300;color:var(--gray);font-size:12px;letter-spacing:.2em;}
.cart-total{margin-top:10px;padding-top:12px;border-top:1px solid var(--line);}
.cart-total b{font-size:18px;}
.cart-foot .btn{margin-top:18px;}

/* ---------- shop all ---------- */
.shop-bar{
  display:flex;align-items:flex-end;justify-content:space-between;gap:34px;
  flex-wrap:wrap;padding:26px 0 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:34px;
}
.shop-filters{display:flex;gap:56px;flex-wrap:wrap;}
.filter-label{
  display:block;font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gray);margin-bottom:14px;
}
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{
  border:1px solid var(--line);background:var(--white);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#4a4a4a;
  padding:9px 16px;transition:border-color .25s,background .25s,color .25s;
}
.chip:hover{border-color:var(--black);color:var(--black);}
.chip.sel{background:var(--black);border-color:var(--black);color:var(--white);}
.shop-sort{display:flex;align-items:center;gap:14px;}
.shop-sort label{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gray);}
.shop-sort select{
  font-family:inherit;font-size:12px;letter-spacing:.08em;color:var(--ink);
  border:1px solid var(--line);background:var(--white);padding:11px 34px 11px 14px;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='1.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px;
  cursor:pointer;
}
.shop-sort select:hover{border-color:var(--black);}
.shop-count{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gray);
  margin-bottom:26px;
}
.shop-empty{border:1px solid var(--line);padding:70px 40px;text-align:center;background:var(--bg-soft);}

/* ---------- checkout ---------- */
.checkout-hero{padding:150px 0 34px;}
.checkout-wrap{
  display:grid;grid-template-columns:1.3fr .8fr;gap:clamp(34px,5vw,78px);
  align-items:start;
}
.ck-block{border:1px solid var(--line);padding:34px 34px 38px;margin-bottom:26px;background:var(--white);}
.ck-head{display:flex;align-items:center;gap:16px;margin-bottom:28px;}
.ck-head h2{font-size:13px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;}
.ck-step{
  font-size:10px;letter-spacing:.2em;color:var(--gray);
  border:1px solid var(--line);border-radius:50%;width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 18px;}
.field{display:block;}
.field.span-2{grid-column:1 / -1;}
.field > span{
  display:block;font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gray);margin-bottom:10px;
}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:14px;letter-spacing:.04em;color:var(--ink);
  border:1px solid var(--line);background:var(--white);padding:15px 16px;
  transition:border-color .25s;
}
.field input::placeholder{color:var(--gray-l);}
.field input:focus,.field select:focus{outline:none;border-color:var(--black);}
.field input.bad{border-color:#b4453f;background:#fdf7f6;}
.field-err{display:none;font-size:12.5px;color:#8c2f2f;letter-spacing:.05em;margin-top:14px;}

.option-list{display:grid;gap:12px;}
.option{
  display:flex;align-items:center;gap:16px;border:1px solid var(--line);
  padding:18px 20px;cursor:pointer;transition:border-color .25s,background .25s;
}
.option:hover{border-color:var(--black);}
.option input{accent-color:var(--black);width:16px;height:16px;flex:0 0 auto;}
.option:has(input:checked){border-color:var(--black);background:var(--bg-soft);}
.option-body{flex:1;display:flex;flex-direction:column;gap:4px;}
.option-title{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;}
.option-sub{font-size:12px;color:var(--gray);letter-spacing:.03em;line-height:1.5;}
.option-price{font-size:14px;letter-spacing:.04em;}
.option-badges{font-size:13px;filter:grayscale(1);}
.ck-fineprint{margin-top:16px;font-size:12px;color:var(--gray);letter-spacing:.03em;line-height:1.6;}
.ck-submit{margin-top:8px;padding:22px 40px;}
.ck-terms{margin-top:16px;text-align:center;font-size:11.5px;color:var(--gray);letter-spacing:.06em;}
.ck-empty{border:1px solid var(--line);padding:70px 40px;text-align:center;background:var(--bg-soft);}

.ck-summary{
  position:sticky;top:110px;border:1px solid var(--line);
  padding:30px 30px 34px;background:var(--bg-soft);
}
.ck-summary h3{font-size:12px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;margin-bottom:24px;}
.ck-items{border-top:1px solid var(--line);}
.ck-item{display:grid;grid-template-columns:56px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);}
.ck-item img{width:56px;height:56px;object-fit:cover;background:var(--white);}
.ck-item-name{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;}
.ck-item-qty{display:inline-flex;align-items:center;border:1px solid var(--line);background:var(--white);margin-top:8px;}
.ck-item-qty button{width:26px;height:26px;font-size:13px;}
.ck-item-qty button:hover{background:var(--bg-warm);}
.ck-item-qty span{min-width:24px;text-align:center;font-size:12px;}
.ck-item-line{font-size:13px;letter-spacing:.04em;align-self:start;}
.ck-totals{margin-top:20px;}
.ck-totals .row{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);}
.ck-totals .row b{font-weight:400;color:var(--ink);letter-spacing:.04em;text-transform:none;font-size:14px;}
.ck-totals .ck-total{margin-top:12px;padding-top:16px;border-top:1px solid var(--line);color:var(--ink);}
.ck-totals .ck-total b{font-size:20px;}
.ck-note{margin-top:13px;font-size:12px;color:var(--gray);letter-spacing:.03em;}
.ck-back{display:inline-block;margin-top:22px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gray);}
.ck-back:hover{color:var(--black);}

/* ---------- order confirmation ---------- */
.done-page{padding-top:150px;}
.done-wrap{max-width:760px;margin:0 auto;text-align:center;}
.done-card{border:1px solid var(--line);padding:36px 40px 30px;margin-top:44px;text-align:left;background:var(--bg-soft);}
.done-card .row{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:11px 0;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);}
.done-card .row b{font-weight:400;color:var(--ink);letter-spacing:.04em;text-transform:none;font-size:14px;text-align:right;}
.done-items{margin-top:22px;border-top:1px solid var(--line);padding-top:8px;}
.done-line{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.done-actions{margin-top:40px;display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;}

@media(max-width:1020px){
  .checkout-wrap{grid-template-columns:1fr;}
  .ck-summary{position:static;order:-1;}
  .shop-bar{gap:24px;}
}
@media(max-width:640px){
  .field-grid{grid-template-columns:1fr;}
  .ck-block{padding:26px 20px 30px;}
  .shop-filters{gap:26px;width:100%;}
  .field input,.field select{padding:14px 14px;}
}