/* ==========================================================
   Nsaano — tokens
   Paper from Khoi, taupe from Bonaventura, kente tones only
   ever appear inside imagery (the .ph textures), never in UI.
   ========================================================== */
:root {
  --paper: #F4F0EB;
  --bone: #FAF7F3;
  --stone: #E5DED4;
  --taupe: #625E58;
  --taupe-soft: rgba(98, 94, 88, .72);
  --umber: #2B2723;
  --line: rgba(98, 94, 88, .18);

  /* craft tones (imagery only) */
  --k-gold: #C8A04A;
  --k-green: #4E6A49;
  --k-red: #8B3A2C;
  --k-black: #26221E;
  --straw: #D9C49A;
  --straw-dk: #B49866;
  --indigo: #3D4A6B;
  --leather: #6E4A33;

  --sans: "Jost", Futura, "Century Gothic", sans-serif;
  --display: "Tenor Sans", Optima, Candara, sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1440px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* spacing + type rhythm */
  --space-section: clamp(72px, 10vw, 128px);     /* gap between page sections */
  --space-section-lg: clamp(80px, 11vw, 140px);  /* larger breaks, e.g. before the footer */
  --space-block: clamp(32px, 6vw, 96px);         /* padding inside feature blocks */
  --text-h2: clamp(28px, 3.4vw, 46px);
  --text-h3: clamp(22px, 2.4vw, 30px);
  --radius-pill: 999px;

  /* tints of umber for overlays and shadows */
  --scrim: rgba(43,39,35,.4);
  --shadow-tint: rgba(43,39,35,.5);
  --line-strong: rgba(43,39,35,.15);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--taupe);
  font: 400 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
/* Even out line lengths: headings balance, paragraphs avoid a lone last word */
h1, h2, h3, h4, summary, figcaption, .card__name { text-wrap: balance; }
p, li, dd, td, label { text-wrap: pretty; }
/* A sentence that should start on its own line */
.br-line { display: block; }
/* Keep a short phrase together, so lines break only between sentences */
.nobr { white-space: nowrap; }
.sentence { display: inline-block; }
[hidden] { display: none !important; }

:focus-visible { outline: 1.5px solid var(--umber); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--umber); color: var(--bone); padding: 10px 14px;
}
.skip:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 28px;
  background: var(--taupe); color: var(--bone);
  font-size: 13px; letter-spacing: .06em;
  transition: background .25s var(--ease);
}
.btn:hover { background: var(--umber); }
.btn--light { background: var(--bone); color: var(--umber); }
.btn--light:hover { background: #fff; }
.btn--dark { background: var(--umber); }

/* ---------- Placeholder textures (swap for photos later) ---------- */
.ph { display: block; background-color: var(--stone); position: relative; overflow: hidden; }

/* Kente: narrow strip-woven bands, alternate strips offset like the real cloth */
.ph--kente {
  --kente-blocks: repeating-linear-gradient(180deg,
    var(--k-gold) 0 64px,
    var(--k-black) 64px 68px, var(--k-green) 68px 76px, var(--k-black) 76px 80px,
    var(--k-red) 80px 88px, var(--k-gold) 88px 92px, var(--k-red) 92px 100px,
    var(--k-black) 100px 104px, var(--k-green) 104px 112px, var(--k-black) 112px 116px,
    var(--k-gold) 116px 180px,
    var(--k-green) 180px 236px,
    var(--k-black) 236px 240px, var(--k-gold) 240px 244px, var(--k-black) 244px 248px);
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(38,34,30,.75) 18px 21px, transparent 21px 99px, rgba(38,34,30,.75) 99px 102px, transparent 102px 120px),
    var(--kente-blocks);
}
.ph--kente::before { /* every other strip is shifted half a repeat */
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(38,34,30,.75) 18px 21px, transparent 21px 99px, rgba(38,34,30,.75) 99px 102px, transparent 102px 120px),
    var(--kente-blocks);
  background-position: 0 124px;
  -webkit-mask: repeating-linear-gradient(90deg, transparent 0 120px, #000 120px 240px);
          mask: repeating-linear-gradient(90deg, transparent 0 120px, #000 120px 240px);
}
.ph--kente::after { /* weave grain + strip seams */
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(20,16,12,.35) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px);
}

.ph--basket {
  background:
    repeating-linear-gradient(45deg, var(--straw) 0 10px, var(--straw-dk) 10px 12px),
    var(--straw);
}
.ph--basket::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, transparent 0 20px, var(--weave-accent, rgba(110,74,51,.35)) 20px 24px);
}

.ph--shea {
  background:
    radial-gradient(ellipse 34% 26% at 50% 62%, var(--shea, #F6EBD3) 0 60%, transparent 61%),
    radial-gradient(ellipse 40% 10% at 50% 82%, rgba(98,94,88,.25), transparent 70%),
    linear-gradient(180deg, #E9DFCF, #D8CAB4);
}

.ph--fan {
  background:
    radial-gradient(circle at 50% 100%, var(--leather) 0 9%, transparent 9.5%),
    repeating-conic-gradient(from -90deg at 50% 100%, var(--straw) 0 6deg, var(--straw-dk) 6deg 7deg, var(--fan-accent, var(--k-red)) 7deg 9deg, var(--straw) 9deg 15deg),
    var(--stone);
  background-size: auto, 100% 100%, auto;
  -webkit-mask: radial-gradient(circle at 50% 100%, #000 70%, transparent 70.5%);
          mask: radial-gradient(circle at 50% 100%, #000 70%, transparent 70.5%);
}
.craft .ph--fan, .card .ph--fan { -webkit-mask: none; mask: none; }

.ph--tiedye {
  background:
    radial-gradient(circle at 30% 35%, #F1ECE4 0 6%, transparent 18%),
    radial-gradient(circle at 72% 68%, #F1ECE4 0 5%, transparent 16%),
    repeating-radial-gradient(circle at 30% 35%, var(--indigo) 0 10px, var(--indigo-lt, #56648A) 10px 16px, var(--indigo) 16px 28px),
    var(--indigo);
}

.ph--ahenemma {
  background:
    linear-gradient(160deg, transparent 0 38%, var(--strap, #8E6446) 38% 46%, transparent 46%),
    linear-gradient(20deg, transparent 0 52%, var(--strap, #8E6446) 52% 60%, transparent 60%),
    linear-gradient(180deg, var(--leather-lt, #C9A57E), var(--leather));
}

.ph--beads {
  background:
    radial-gradient(circle, var(--bead-a, var(--k-red)) 0 5px, transparent 5.5px) 0 0 / 22px 22px,
    radial-gradient(circle, var(--bead-b, var(--k-gold)) 0 5px, transparent 5.5px) 11px 11px / 22px 22px,
    var(--bead-bg, #2F5A5C);
}

.ph--adinkra {
  background:
    radial-gradient(circle at center, transparent 0 9px, rgba(244,240,235,.22) 9px 11px, transparent 11px) 0 0 / 56px 56px,
    linear-gradient(rgba(244,240,235,.12) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(244,240,235,.12) 1px, transparent 1px) 0 0 / 56px 56px,
    #3B2A22;
}

/* ==========================================================
   Announcement bar
   ========================================================== */
.announce {
  display: flex; align-items: center; justify-content: space-between;
  height: 36px; padding: 0 var(--gutter);
  background: var(--taupe); color: var(--bone);
  font-size: 12px; letter-spacing: .04em;
}
.announce__arrow { width: 28px; height: 28px; opacity: .7; font-size: 16px; }
.announce__arrow:hover { opacity: 1; }
.announce__track { position: relative; flex: 1; height: 100%; min-width: 0; }
/* One message at a time, always on one line. The text sits in a single span so the
   price inside it never becomes its own row. The old message lifts away, then the new one rises in. */
.announce__track li {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  white-space: nowrap; overflow: hidden;
  opacity: 0; transform: translateY(8px); visibility: hidden;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.announce__track li > span { overflow: hidden; text-overflow: ellipsis; }
.announce__track li.is-active {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity .45s var(--ease) .2s, transform .45s var(--ease) .2s, visibility 0s;
}
.announce__track li.is-leaving { transform: translateY(-8px); }
@media (prefers-reduced-motion: reduce) {
  .announce__track li, .announce__track li.is-active { transform: none; transition: opacity .2s linear, visibility 0s; }
}

/* ==========================================================
   Header
   ========================================================== */
.header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease);
}
.header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 12px 30px -24px var(--shadow-tint); }

.header__top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  max-width: var(--max); margin: 0 auto;
  height: 72px; padding: 0 var(--gutter);
  transition: height .3s var(--ease);
}
.header.is-scrolled .header__top { height: 58px; }
.header__left, .header__right { display: flex; align-items: center; gap: 6px; }
.header__right { justify-content: flex-end; }
.icon-btn.header__burger { display: none; }

.wordmark { display: block; color: var(--umber); line-height: 0; }
.logo { display: block; height: 20px; width: auto; fill: currentColor; transition: height .3s var(--ease); }
.header.is-scrolled .logo { height: 16px; }
.wordmark--sm .logo { height: 14px; }

.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center; position: relative;
  color: var(--umber);
}
.icon-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { opacity: .65; }

.account-link.is-signed-in::after { /* small green dot: signed in */
  content: ""; position: absolute; top: 9px; right: 8px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--k-green); box-shadow: 0 0 0 2px var(--bone);
}
.bag__count {
  position: absolute; top: 5px; right: 3px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--umber); color: var(--bone);
  font-size: 10px; line-height: 16px; text-align: center;
}

.currency select {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; padding: 6px 18px 6px 6px; margin-right: 6px;
  font-size: 12px; letter-spacing: .04em; color: var(--umber); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--umber) 50%), linear-gradient(-45deg, transparent 50%, var(--umber) 50%);
  background-size: 4px 4px; background-position: right 7px center, right 3px center; background-repeat: no-repeat;
}

/* Category row */
.cats { position: relative; }
.cats__list {
  display: flex; justify-content: center; gap: clamp(14px, 2.2vw, 34px);
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
}
.cats__link {
  display: block; position: relative; padding: 4px 0 14px;
  font-size: 13px; letter-spacing: .03em; color: var(--taupe); white-space: nowrap;
}
.cats__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px;
  background: var(--umber); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.cats__link:hover, .cats__link[aria-expanded="true"] { color: var(--umber); }
.cats__link:hover::after, .cats__link[aria-expanded="true"]::after { transform: scaleX(1); }
.has-mega .cats__link { padding-right: 12px; }
.has-mega .cats__link::before {
  content: ""; position: absolute; right: 0; top: 11px;
  width: 5px; height: 5px; border: solid currentColor; border-width: 0 1px 1px 0;
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
.has-mega .cats__link[aria-expanded="true"]::before { transform: translateY(3px) rotate(-135deg); }

/* Mega menu */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bone); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  animation: megaIn .28s var(--ease);
}
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } }
.mega__inner {
  display: grid; grid-template-columns: repeat(4, 1fr) 1.4fr; gap: 32px;
  max-width: 1100px; margin: 0 auto; padding: 36px var(--gutter) 40px;
}
.mega__title { font: 15px/1.3 var(--display); color: var(--umber); margin-bottom: 14px; }
.mega__col a { display: block; padding: 4px 0; font-size: 14px; }
.mega__col a:hover { color: var(--umber); text-decoration: underline; text-underline-offset: 4px; }
.mega__feature { display: grid; gap: 10px; }
.mega__feature .ph { aspect-ratio: 16 / 10; }
.mega__feature-text { font-size: 13px; color: var(--umber); }

/* Search */
.search {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(43,39,35,.35);
  display: flex; align-items: flex-start;
}
.search__sheet {
  width: 100%; max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bone); animation: megaIn .28s var(--ease);
  box-shadow: 0 24px 48px -32px var(--shadow-tint);
}
.search__form {
  display: flex; gap: 14px; align-items: center;
  max-width: var(--max); margin: 0 auto; padding: 28px var(--gutter) 20px;
}
.search__icon { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--umber); stroke-width: 1.3; stroke-linecap: round; }
.search__form input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search__form input {
  flex: 1; border: 0; border-bottom: 1px solid var(--taupe); background: transparent;
  padding: 10px 0; font: 22px/1.2 var(--display); color: var(--umber); outline: none;
}
.search__close { flex: none; margin-right: -8px; }

/* Drawer */
.drawer { position: fixed; inset: 0; z-index: 70; background: var(--scrim); }
.drawer__panel {
  width: min(86vw, 360px); height: 100%; background: var(--bone);
  display: flex; flex-direction: column; padding: 16px 24px 28px;
  animation: drawerIn .32s var(--ease);
}
@keyframes drawerIn { from { transform: translateX(-100%); } }
.drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.drawer__nav a {
  display: block; padding: 13px 0; border-bottom: 1px solid var(--line);
  font: 19px/1.2 var(--display); color: var(--umber);
}
.drawer__foot { margin-top: auto; display: grid; gap: 10px; font-size: 14px; }

/* ==========================================================
   Hero
   ========================================================== */
.hero {
  position: relative; overflow: hidden;
  height: clamp(460px, 78vh, 820px);
  background: var(--umber);
}
.hero__slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity 1s var(--ease), visibility 0s 1s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity 1s var(--ease); }
.hero__media { position: absolute; inset: -2%; transform: scale(1.04); transition: transform 7s linear; }
.hero__slide.is-active .hero__media { transform: scale(1); }
.hero__slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(20deg, rgba(30,26,22,.72) 0%, rgba(30,26,22,.25) 45%, transparent 70%);
}
.hero__copy {
  position: absolute; z-index: 2; left: var(--gutter); bottom: clamp(56px, 10vh, 96px);
  display: grid; gap: 28px; justify-items: start; color: var(--bone);
}
.hero__title {
  font: 400 clamp(38px, 6.4vw, 92px)/1.02 var(--display);
  letter-spacing: -.01em; color: var(--bone);
}
.hero__caption {
  position: absolute; z-index: 2; right: var(--gutter); bottom: 28px;
  font-size: 12px; letter-spacing: .04em; color: rgba(250,247,243,.8);
}
.hero__controls {
  position: absolute; z-index: 3; left: var(--gutter); bottom: 28px; display: flex; gap: 10px;
}
.hero__dot { width: 28px; height: 14px; position: relative; }
.hero__dot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: rgba(250,247,243,.35);
}
.hero__dot::after {
  content: ""; position: absolute; left: 0; top: 6px; height: 2px; width: 0; background: var(--bone);
}
.hero__dot.is-active::after { animation: dotFill 6s linear forwards; }
@keyframes dotFill { to { width: 100%; } }

/* ==========================================================
   Sections
   ========================================================== */
.section { max-width: var(--max); margin: 0 auto; padding: var(--space-section) var(--gutter) 0; }
.section__head {
  display: flex; align-items: flex-end; justify-content: center; position: relative;
  margin-bottom: 36px;
}
.section__title { font: 400 clamp(24px, 2.6vw, 34px)/1.2 var(--display); color: var(--umber); text-align: center; }
.section__head--tabs { flex-direction: column; align-items: center; gap: 20px; }
.section__cta { display: flex; justify-content: center; margin-top: 44px; }

.rail-nav { position: absolute; right: 0; bottom: 2px; display: flex; gap: 6px; }
.rail-btn {
  width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%;
  font-size: 18px; line-height: 1; color: var(--umber);
  transition: background .2s, border-color .2s;
}
.rail-btn:hover { background: var(--bone); border-color: var(--taupe); }

/* Shop by craft */
.crafts {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(12px, 2vw, 28px);
}
.craft { display: grid; gap: 14px; justify-items: center; font-size: 14px; color: var(--umber); }
.craft .ph {
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  transition: transform .5s var(--ease);
}
.craft:hover .ph { transform: scale(1.04); }

/* Product card */
.card { display: grid; gap: 14px; }
.card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.card__media .ph { position: absolute; inset: 0; transition: transform .7s var(--ease); }
.card:hover .card__media .ph { transform: scale(1.035); }
.card__badge {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  background: var(--bone); color: var(--umber);
  font-size: 11px; letter-spacing: .04em; padding: 4px 9px;
}
.card__wish {
  position: absolute; right: 8px; top: 8px; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center; color: var(--umber);
}
.card__wish svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; transition: fill .2s; }
.card__wish[aria-pressed="true"] svg { fill: var(--umber); }
.card__add {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  min-height: 42px; background: rgba(250,247,243,.94); color: var(--umber);
  font-size: 13px; letter-spacing: .04em;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s;
}
.card__add:hover { background: var(--bone); }
a.card__add { display: grid; place-items: center; }
.card:hover .card__add, .card__add:focus-visible { opacity: 1; transform: none; }
.card__add.is-added { background: var(--umber); color: var(--bone); opacity: 1; transform: none; }
.card__name { font-size: 14px; font-weight: 400; color: var(--umber); line-height: 1.4; }
.card__origin { font-size: 12px; color: var(--taupe-soft); margin-top: 2px; }
.card__price { font-size: 14px; color: var(--umber); margin-top: 6px; }

/* Rail */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 20px) / 4.3);
  gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
  scroll-padding: 0 var(--gutter);
}
.rail::-webkit-scrollbar { display: none; }
.rail > li { scroll-snap-align: start; }

/* Grid */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 20px; }
.grid > li { animation: fadeIn .45s var(--ease) both; }
@keyframes fadeIn { from { opacity: 0; } }

/* Tabs */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.tabs button {
  padding: 7px 16px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  font-size: 13px; color: var(--taupe); transition: all .2s var(--ease);
}
.tabs button:hover { border-color: var(--taupe); }
.tabs button[aria-selected="true"] { background: var(--umber); border-color: var(--umber); color: var(--bone); }

/* Feature split */
.feature {
  display: grid; grid-template-columns: 1.15fr 1fr;
  max-width: var(--max); margin: var(--space-section) auto 0;
  background: var(--bone);
}
.feature__media { min-height: 520px; }
.feature__copy {
  display: grid; align-content: center; justify-items: start; gap: 18px;
  padding: var(--space-block);
}
.feature__place { font-size: 13px; color: var(--taupe-soft); }
.feature__title { font: 400 var(--text-h2)/1.12 var(--display); color: var(--umber); max-width: 14ch; }
.feature__text { font-size: 16px; max-width: 34ch; margin-bottom: 10px; }

/* Makers */
.makers { max-width: var(--max); margin: 0 auto; padding: var(--space-section) var(--gutter) 0; }
.makers__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.maker__media { aspect-ratio: 3 / 4; margin-bottom: 16px; filter: saturate(.75); }
.maker__name { font: 18px/1.3 var(--display); color: var(--umber); }
.maker__meta { font-size: 13px; color: var(--taupe-soft); margin-top: 4px; }

/* Promises */
.promises {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: var(--max); margin: var(--space-section) auto 0; padding: 0 var(--gutter);
}
.promise {
  display: grid; justify-items: center; text-align: center; gap: 6px;
  padding: 36px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.promise + .promise { border-left: 1px solid var(--line); }
.promise svg { width: 28px; height: 28px; fill: none; stroke: var(--umber); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; }
.promise__title { font-size: 15px; color: var(--umber); }
.promise__text { font-size: 13px; color: var(--taupe-soft); }

/* Visit */
.visit {
  display: grid; grid-template-columns: 1fr 1.2fr;
  max-width: var(--max); margin: var(--space-section) auto 0;
  background: var(--taupe); color: var(--bone);
}
.visit__copy { display: grid; align-content: center; justify-items: start; gap: 16px; padding: var(--space-block); }
.visit__title { font: 400 var(--text-h2)/1.12 var(--display); }
.visit__text { font-size: 16px; color: rgba(250,247,243,.8); margin-bottom: 10px; }
.visit__media { min-height: 420px; }

/* ==========================================================
   Footer (after Khoi)
   ========================================================== */
.footer { margin-top: var(--space-section-lg); border-top: 1px solid var(--line); color: var(--umber); }
.footer__inner {
  display: grid; grid-template-columns: 0.8fr 1fr 1fr 1fr 1.6fr; gap: 32px;
  max-width: 1280px; margin: 0 auto; padding: 64px var(--gutter) 56px;
}
.footer__mark { color: var(--umber); align-self: start; }
.footer__mark .logo { height: 14px; }
.footer__title { font-size: 12px; letter-spacing: .08em; margin-bottom: 18px; color: var(--umber); font-weight: 500; }
.footer__col a { display: block; font-size: 13px; color: var(--taupe); padding: 3px 0; }
.footer__col a:hover { color: var(--umber); text-decoration: underline; text-underline-offset: 4px; }
.footer__sub { display: grid; gap: 12px; align-content: start; max-width: 340px; }
.footer__sub .footer__title { margin-bottom: 6px; }
.footer__text { font-size: 13px; color: var(--taupe); }
.footer__sub input {
  height: 44px; padding: 0 12px; border: 1px solid var(--line); background: var(--bone);
  font-size: 13px; color: var(--umber);
}
.footer__sub input:focus { outline: none; border-color: var(--taupe); }
.footer__sub .btn { justify-self: start; min-height: 40px; padding: 0 22px; font-size: 12px; }
.footer__msg { font-size: 13px; color: var(--umber); }
/* Payment badges: identical 40×26 cards so every mark sits at the same size */
.pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pay svg { display: block; width: 40px; height: 26px; }
.pay__card { fill: #fff; stroke: rgba(43, 39, 35, .14); stroke-width: 1; }
.footer__credit { display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 4px; }
.footer__rates { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  max-width: 1280px; margin: 0 auto; padding: 22px var(--gutter) 32px;
  border-top: 1px solid var(--line); font-size: 12px; color: var(--taupe-soft);
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1100px) {
  .rail { grid-auto-columns: calc((100% - 2 * 20px) / 3.2); }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .footer__inner { grid-template-columns: repeat(3, 1fr); }
  .footer__mark { grid-column: 1 / -1; }
  .footer__sub { grid-column: 1 / -1; max-width: 420px; }
}

@media (max-width: 900px) {
  .icon-btn.header__burger { display: grid; }
  .hide-sm { display: none; }
  .cats { display: none; }
  .header__top { height: 60px; }
  .wordmark .logo { height: 15px; }
  .crafts {
    display: flex; overflow-x: auto; scrollbar-width: none; gap: 14px;
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
  }
  .crafts::-webkit-scrollbar { display: none; }
  .crafts li { flex: 0 0 96px; }
  .feature, .visit { grid-template-columns: 1fr; }
  .feature__media { min-height: 320px; }
  .visit__media { min-height: 260px; order: -1; }
  .makers__list { grid-template-columns: repeat(3, 72%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .makers__list::-webkit-scrollbar { display: none; }
  .maker { scroll-snap-align: start; }
  .promises { grid-template-columns: repeat(2, 1fr); }
  .promise:nth-child(3) { border-left: 0; }
  .promise:nth-child(n+3) { border-top: 0; }
}

.currency--drawer { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }

@media (max-width: 640px) {
  .hero__title { font-size: min(38px, 10.6vw); }  /* each line stays whole on the smallest phones */
  .currency--header { display: none; }
  .rail { grid-auto-columns: 68%; gap: 14px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
  .rail-nav { display: none; }
  .card__add { opacity: 1; transform: none; min-height: 36px; font-size: 12px; left: 8px; right: 8px; bottom: 8px; }
  .hero__caption { display: none; }
  .hero__copy { gap: 22px; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 36px 20px; padding-top: 52px; }
  .footer__sub { grid-column: 1 / -1; }
  .announce { font-size: clamp(10px, 2.95vw, 11px); letter-spacing: .02em; padding: 0 8px; }
  .announce__arrow { width: 24px; }
}

/* ==========================================================
   Category page (product listing)
   ========================================================== */
.cats__link[aria-current="page"] { color: var(--umber); }
.cats__link[aria-current="page"]::after { transform: scaleX(1); }

.btn--ghost { background: transparent; color: var(--umber); box-shadow: inset 0 0 0 1px var(--taupe); }
.btn--ghost:hover { background: var(--umber); color: var(--bone); }

.plp { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.plp-head { display: grid; justify-items: center; text-align: center; padding: 40px 0 36px; }
.crumbs { display: flex; gap: 8px; font-size: 12px; color: var(--taupe-soft); margin-bottom: 28px; }
.crumbs a:hover { color: var(--umber); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--umber); }
.plp-head__title { font: 400 clamp(36px, 5vw, 64px)/1.05 var(--display); color: var(--umber); }
.plp-head__text { margin-top: 12px; font-size: 15px; max-width: 46ch; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 28px; }
.chip {
  padding: 8px 18px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  font-size: 13px; color: var(--taupe); background: transparent;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.chip:hover { border-color: var(--taupe); }
.chip[aria-pressed="true"] { background: var(--umber); border-color: var(--umber); color: var(--bone); }

/* Toolbar */
.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.toolbar__left { display: flex; align-items: center; gap: 24px; }
.toolbar__filter { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--umber); }
.toolbar__filter svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.toolbar__badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--umber); color: var(--bone); font-size: 11px; line-height: 18px; text-align: center;
}
.toolbar__count { font-size: 13px; color: var(--taupe-soft); }
.sort { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sort__label { color: var(--taupe-soft); }
.sort select {
  appearance: none; -webkit-appearance: none; border: 0; background-color: transparent; cursor: pointer;
  padding: 6px 18px 6px 0; font-size: 13px; color: var(--umber);
  background-image: linear-gradient(45deg, transparent 50%, var(--umber) 50%), linear-gradient(-45deg, transparent 50%, var(--umber) 50%);
  background-size: 4px 4px; background-position: right 4px center, right 0 center; background-repeat: no-repeat;
}

/* Active filter pills */
.active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 0 0; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 14px; background: var(--bone); border: 1px solid var(--line);
  font-size: 12px; color: var(--umber);
}
.pill svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pill:hover { border-color: var(--taupe); }
.active__clear { font-size: 12px; text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; }

/* Body */
.plp-body { display: grid; grid-template-columns: 240px 1fr; gap: 48px; padding-top: 32px; align-items: start; }
.plp-body.filters-hidden { grid-template-columns: 1fr; }
.plp-body.filters-hidden .filters { display: none; }
.grid--plp { grid-template-columns: repeat(3, 1fr); gap: 44px 20px; }
.plp-body.filters-hidden .grid--plp { grid-template-columns: repeat(4, 1fr); }

/* Filters */
.filters { position: sticky; top: 124px; max-height: calc(100vh - 140px); overflow-y: auto; scrollbar-width: none; padding-right: 4px; }
.filters::-webkit-scrollbar { display: none; }
.filters__head, .filters__foot, .filters-scrim { display: none; }
.fgroup { border-bottom: 1px solid var(--line); }
.fgroup:first-child { border-top: 0; }
.fgroup summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 16px 0; font-size: 14px; color: var(--umber);
}
.fgroup summary::-webkit-details-marker { display: none; }
.fgroup summary::after {
  content: ""; position: absolute; right: 4px; top: 21px;
  width: 6px; height: 6px; border: solid var(--umber); border-width: 0 1px 1px 0;
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
.fgroup[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.fgroup__body { display: grid; gap: 2px; padding: 0 0 18px; }

.check { display: flex; align-items: center; gap: 12px; padding: 5px 0; font-size: 13px; cursor: pointer; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check__box {
  width: 16px; height: 16px; flex: none; border: 1px solid var(--taupe); background: var(--bone);
  display: grid; place-items: center; transition: background .15s;
}
.check__box::after {
  content: ""; width: 8px; height: 4px; border: solid var(--bone); border-width: 0 0 1.5px 1.5px;
  transform: rotate(-45deg) translate(1px, -1px); opacity: 0;
}
.check input:checked + .check__box { background: var(--umber); border-color: var(--umber); }
.check input:checked + .check__box::after { opacity: 1; }
.check input:focus-visible + .check__box { outline: 1.5px solid var(--umber); outline-offset: 2px; }
.check__n { margin-left: auto; font-size: 12px; color: var(--taupe-soft); }
.check.is-empty { opacity: .4; }

.fgroup__body--swatches { grid-template-columns: repeat(4, 1fr); gap: 14px 6px; }
.swatch { display: grid; justify-items: center; gap: 6px; font-size: 11px; cursor: pointer; text-align: center; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch__dot {
  width: 30px; height: 30px; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 3px var(--paper), 0 0 0 3px transparent;
  transition: box-shadow .2s var(--ease);
}
.swatch input:checked + .swatch__dot { box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 3px var(--paper), 0 0 0 4px var(--umber); }
.swatch input:focus-visible + .swatch__dot { outline: 1.5px solid var(--umber); outline-offset: 5px; }
.swatch.is-empty { opacity: .35; }

.fgroup__body--sizes { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sizebox { position: relative; cursor: pointer; }
.sizebox input { position: absolute; opacity: 0; pointer-events: none; }
.sizebox span {
  display: grid; place-items: center; height: 38px; border: 1px solid var(--line);
  font-size: 13px; color: var(--umber); transition: border-color .2s, background .2s, color .2s;
}
.sizebox:hover span { border-color: var(--taupe); }
.sizebox input:checked + span { background: var(--umber); border-color: var(--umber); color: var(--bone); }
.sizebox input:focus-visible + span { outline: 1.5px solid var(--umber); outline-offset: 2px; }
.sizebox.is-empty span { opacity: .35; text-decoration: line-through; }

/* "In stock only" sits first in the filters, above Type */
.filters__form > .toggle { border-bottom: 1px solid var(--line); padding: 16px 0 22px; }
.toggle { display: flex; align-items: center; gap: 12px; padding: 18px 0; font-size: 13px; color: var(--umber); cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle__track { width: 34px; height: 20px; border-radius: 10px; background: var(--stone); position: relative; transition: background .2s; }
.toggle__track::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--bone); box-shadow: 0 1px 2px rgba(43,39,35,.25); transition: transform .25s var(--ease);
}
.toggle input:checked + .toggle__track { background: var(--umber); }
.toggle input:checked + .toggle__track::after { transform: translateX(14px); }
.toggle input:focus-visible + .toggle__track { outline: 1.5px solid var(--umber); outline-offset: 2px; }

/* Sold out cards */
.card.is-sold .card__media .ph { filter: grayscale(.55) opacity(.75); }
.card__add:disabled { cursor: default; color: var(--taupe-soft); }

/* Empty + load more */
.empty { display: grid; justify-items: center; gap: 20px; padding: 80px 0; text-align: center; }
.empty__title { font: 22px/1.3 var(--display); color: var(--umber); }
.more { display: grid; justify-items: center; gap: 14px; margin-top: 56px; }
.more__text { font-size: 13px; color: var(--taupe-soft); }
.more__bar { width: 180px; height: 2px; background: var(--stone); }
.more__bar span { display: block; height: 100%; background: var(--umber); transition: width .4s var(--ease); }

/* Note */
.plp-note { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--space-section); background: var(--bone); }
.plp-note__media { min-height: 380px; }
.plp-note__copy { display: grid; align-content: center; justify-items: start; gap: 16px; padding: var(--space-block); }
.plp-note__title { font: 400 clamp(26px, 3vw, 40px)/1.15 var(--display); color: var(--umber); }
.plp-note__text { max-width: 38ch; margin-bottom: 8px; }

@media (max-width: 1100px) {
  .plp-body { grid-template-columns: 210px 1fr; gap: 32px; }
  .grid--plp { grid-template-columns: repeat(2, 1fr); }
  .plp-body.filters-hidden .grid--plp { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile: filters become a bottom sheet */
@media (max-width: 900px) {
  .plp-body, .plp-body.filters-hidden { grid-template-columns: 1fr; }
  .grid--plp, .plp-body.filters-hidden .grid--plp { grid-template-columns: repeat(2, 1fr); gap: 32px 12px; }
  .plp-body.filters-hidden .filters, .filters { display: flex; }
  .filters {
    position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; top: auto;
    max-height: 86vh; flex-direction: column; overflow: hidden;
    background: var(--bone); border-radius: 14px 14px 0 0;
    transform: translateY(100%); visibility: hidden;
    transition: transform .38s var(--ease), visibility 0s .38s;
  }
  .filters.is-open { transform: none; visibility: visible; transition: transform .38s var(--ease); }
  .filters__head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 6px 20px; border-bottom: 1px solid var(--line); }
  .filters__title { font: 18px/1 var(--display); color: var(--umber); }
  .filters__form { overflow-y: auto; padding: 0 20px; flex: 1; }
  .filters__foot { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
  .filters-scrim { display: block; position: fixed; inset: 0; z-index: 79; background: var(--scrim); }
  .fgroup__body--swatches { grid-template-columns: repeat(5, 1fr); }
  .check { padding: 8px 0; }
  .toolbar { position: sticky; top: 60px; z-index: 30; background: var(--paper); margin: 0 calc(var(--gutter) * -1); padding: 12px var(--gutter); }
  .toolbar__filter { padding: 8px 14px; border: 1px solid var(--taupe); }
  .sort__label { display: none; }
  .chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; width: calc(100% + var(--gutter) * 2); margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter); scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { white-space: nowrap; }
  .plp-note { grid-template-columns: 1fr; }
  .plp-note__media { min-height: 240px; }
}
@media (max-width: 640px) {
  .toolbar__count { display: none; }
  .plp-head { padding-top: 24px; }
  .crumbs { margin-bottom: 18px; }
}

/* ==========================================================
   Product page
   ========================================================== */
.pdp { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.crumbs--pdp { padding: 24px 0 20px; margin: 0; }

.pdp-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: var(--space-block); align-items: start; }

/* Gallery */
.gallery { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; }
.gallery__thumbs { display: grid; gap: 10px; align-content: start; }
.gallery__thumb { display: block; width: 100%; aspect-ratio: 4 / 5; position: relative; overflow: hidden; opacity: .55; transition: opacity .2s; }
.gallery__thumb:hover { opacity: .85; }
.gallery__thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 1px var(--umber); }
.gallery__stage { position: relative; min-width: 0; }
.gallery__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { scroll-snap-align: start; aspect-ratio: 4 / 5; position: relative; overflow: hidden; background: var(--stone); cursor: zoom-in; }
.gallery__slide.is-zoomed { cursor: zoom-out; }
.gallery__dots { display: none; }

/* One texture, four "shots": the swap point for real photography */
.view { position: absolute; inset: 0; transition: transform .35s var(--ease); }
.view .ph { position: absolute; inset: 0; }
.gallery__slide.is-zoomed .view { transform: scale(2); }
.view--detail .ph { transform: scale(2.6); }
.view--drape { background: linear-gradient(180deg, #E9E2D8, #DCD3C6); }
.view--drape .ph { inset: 14% 12%; transform: rotate(-7deg); box-shadow: 0 30px 40px -24px rgba(43,39,35,.55); }
.view__fold { /* a soft crease across the draped cloth */
  position: absolute; inset: 14% 12%; z-index: 2; transform: rotate(-7deg); pointer-events: none;
  background: linear-gradient(90deg, transparent 46%, rgba(0,0,0,.28) 50%, rgba(255,255,255,.12) 54%, transparent 60%);
}
.view--hang { background: radial-gradient(ellipse at 50% 0%, #EEE8DF, #D9CFC1); }
.view--hang .ph { inset: 6% 37% 0; box-shadow: 0 24px 34px -18px var(--shadow-tint); }
.view--hang::before { content: ""; position: absolute; left: 30%; right: 30%; top: 6%; height: 2px; background: var(--leather); z-index: 2; }

/* Buy box */
.buy { position: sticky; top: 130px; display: grid; gap: 0; padding-bottom: 8px; }
.buy__badge { justify-self: start; font-size: 11px; letter-spacing: .04em; padding: 4px 9px; background: var(--bone); color: var(--umber); margin-bottom: 14px; }
.buy__name { font: 400 clamp(28px, 3vw, 40px)/1.12 var(--display); color: var(--umber); }
.buy__origin { justify-self: start; margin-top: 10px; font-size: 13px; color: var(--taupe-soft); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.buy__origin:hover { color: var(--umber); text-decoration-color: currentColor; }
.buy__price { margin-top: 18px; font-size: 20px; color: var(--umber); }
.buy__lede { margin-top: 16px; font-size: 15px; max-width: 44ch; }

.opt { margin-top: 26px; }
.opt__label { font-size: 13px; color: var(--umber); margin-bottom: 12px; }
.opt__label span { color: var(--taupe-soft); margin-left: 6px; }
.opt__swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.cw {
  width: 34px; height: 34px; border-radius: 50%; display: block;
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 3px var(--paper);
  transition: box-shadow .2s var(--ease);
}
.cw:hover { box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 3px var(--paper), 0 0 0 4px var(--line); }
.cw[aria-current="true"] { box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 3px var(--paper), 0 0 0 4px var(--umber); }
.opt__sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.size {
  min-height: 44px; padding: 0 18px; border: 1px solid var(--line); background: transparent;
  font-size: 13px; color: var(--taupe); transition: border-color .2s, color .2s;
}
.size small { display: block; font-size: 11px; color: var(--taupe-soft); }
.size:hover { border-color: var(--taupe); }
.size[aria-checked="true"] { border-color: var(--umber); color: var(--umber); box-shadow: inset 0 0 0 1px var(--umber); }

.opt__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.opt__head .opt__label { margin-bottom: 0; }
.opt__link { font-size: 12px; color: var(--taupe-soft); text-decoration: underline; text-underline-offset: 3px; }
.opt__link:hover { color: var(--umber); }
.opt__sizes--shoe { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.size--shoe { padding: 0; }
.size--shoe:disabled { color: var(--taupe-soft); opacity: .45; text-decoration: line-through; cursor: default; }
.size--shoe:disabled:hover { border-color: var(--line); }
.opt__hint { margin-top: 10px; font-size: 13px; color: var(--k-red); }

.buy__row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; margin-top: 30px; }
.qty { display: flex; align-items: center; border: 1px solid var(--line); height: 50px; }
.qty button { width: 38px; height: 100%; font-size: 16px; color: var(--umber); }
.qty button:hover { background: var(--bone); }
.qty input {
  width: 34px; border: 0; background: transparent; text-align: center; font-size: 14px; color: var(--umber);
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.buy__add { min-height: 50px; font-size: 14px; }
.buy__add.is-added { background: var(--umber); }
.buy__add:disabled { background: var(--stone); color: var(--taupe-soft); cursor: default; }
.buy__wish { position: static; width: 50px; height: 50px; border: 1px solid var(--line); }
.buy__wish svg { width: 20px; height: 20px; }

.ship { margin-top: 22px; padding: 16px 18px; background: var(--bone); display: grid; gap: 6px; }
.ship__to { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--taupe-soft); }
.ship__to select {
  appearance: none; -webkit-appearance: none; border: 0; background-color: transparent; cursor: pointer;
  padding: 2px 16px 2px 0; font-size: 13px; color: var(--umber); text-decoration: underline; text-underline-offset: 3px;
  background-image: linear-gradient(45deg, transparent 50%, var(--umber) 50%), linear-gradient(-45deg, transparent 50%, var(--umber) 50%);
  background-size: 4px 4px; background-position: right 4px center, right 0 center; background-repeat: no-repeat;
}
.ship__eta { font-size: 14px; color: var(--umber); }

.acc { margin-top: 26px; border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  list-style: none; cursor: pointer; position: relative; padding: 18px 0; font-size: 14px; color: var(--umber);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::before, .acc summary::after {
  content: ""; position: absolute; right: 2px; top: 50%; width: 11px; height: 1px; background: var(--umber);
  transition: transform .25s var(--ease);
}
.acc summary::after { transform: rotate(90deg); }
.acc details[open] summary::after { transform: rotate(0); }
.acc details > :not(summary) { padding: 0 0 20px; font-size: 14px; max-width: 52ch; }
.acc__list { display: grid; gap: 6px; }
.acc__list li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.acc__list li span:first-child { color: var(--taupe-soft); }

/* Maker band */
.maker-band { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--space-section); background: var(--taupe); color: var(--bone); }
.maker-band__media { min-height: 420px; }
.maker-band__copy { display: grid; align-content: center; gap: 14px; padding: var(--space-block); }
.maker-band__place { font-size: 13px; color: rgba(250,247,243,.7); }
.maker-band__title { font: 400 clamp(28px, 3.2vw, 44px)/1.12 var(--display); max-width: 16ch; }
.maker-band__text { font-size: 15px; color: rgba(250,247,243,.85); max-width: 40ch; }

.section--flush { padding-left: 0; padding-right: 0; }

/* Sticky buy bar (mobile) */
.sticky-buy { display: none; }

@media (max-width: 900px) {
  .pdp-main { grid-template-columns: 1fr; gap: 28px; }
  .gallery { grid-template-columns: 1fr; margin: 0 calc(var(--gutter) * -1); }
  .gallery__thumbs { display: none; }
  .gallery__slide { cursor: default; }
  .gallery__dots { display: flex; justify-content: center; gap: 6px; padding-top: 14px; }
  .gallery__dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .2s, width .25s var(--ease); }
  .gallery__dots span.is-active { background: var(--umber); width: 18px; border-radius: 3px; }
  .buy { position: static; }
  .maker-band { grid-template-columns: 1fr; }
  .maker-band__media { min-height: 260px; }

  .sticky-buy {
    display: flex; align-items: center; gap: 12px;
    position: fixed; z-index: 35; left: 0; right: 0; bottom: 0;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: var(--bone); border-top: 1px solid var(--line);
    transform: translateY(110%); transition: transform .3s var(--ease);
  }
  .sticky-buy.is-shown { transform: none; }
  .sticky-buy__info { flex: 1; min-width: 0; }
  .sticky-buy__name { font-size: 13px; color: var(--umber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sticky-buy__price { font-size: 13px; }
  .sticky-buy .btn { min-height: 44px; padding: 0 22px; }
}
@media (max-width: 640px) {
  .buy__row { grid-template-columns: auto 1fr auto; }
  .acc__list li { grid-template-columns: 96px 1fr; }
}

/* ==========================================================
   Bag drawer
   ========================================================== */
.bag-scrim { position: fixed; inset: 0; z-index: 90; background: var(--scrim); animation: fadeIn .3s var(--ease); }
.bag-drawer {
  position: fixed; z-index: 91; top: 0; right: 0; bottom: 0;
  width: min(440px, 100vw); display: flex; flex-direction: column;
  background: var(--bone); box-shadow: -24px 0 48px -32px var(--shadow-tint);
  transform: translateX(100%); visibility: hidden;
  transition: transform .4s var(--ease), visibility 0s .4s;
}
.bag-drawer.is-open { transform: none; visibility: visible; transition: transform .4s var(--ease); }
.bag-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 14px 24px; border-bottom: 1px solid var(--line);
}
.bag-drawer__title { font: 400 22px/1.2 var(--display); color: var(--umber); }
.bag-drawer__title span { font: 400 14px var(--sans); color: var(--taupe-soft); }

.bag-ship { padding: 16px 24px; border-bottom: 1px solid var(--line); }
.bag-ship__text { font-size: 13px; color: var(--umber); margin-bottom: 10px; }
.bag-ship__bar { height: 3px; background: var(--stone); }
.bag-ship__bar span { display: block; height: 100%; background: var(--taupe); transition: width .5s var(--ease); }
.bag-ship.is-free .bag-ship__bar span { background: var(--k-green); }

.bag-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.bag-lines { padding: 0 24px; }
.bag-line {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 16px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.bag-line.is-new { animation: lineIn .5s var(--ease); }
@keyframes lineIn { from { opacity: 0; transform: translateX(16px); } }
.bag-line__media { aspect-ratio: 4 / 5; width: 84px; position: relative; overflow: hidden; background: var(--stone); }
/* Draw the texture at 2.5x and shrink it, so a whole repeat fits the thumbnail */
.bag-line__media .ph { position: absolute; inset: 0; }
.bag-line__media .ph--kente { inset: auto; left: 0; top: 0; width: 250%; height: 250%; transform: scale(.4); transform-origin: 0 0; }
.bag-line__media .ph--fan { -webkit-mask: none; mask: none; }
.bag-line__info { display: grid; align-content: start; gap: 4px; min-width: 0; }
.bag-line__name { font-size: 14px; color: var(--umber); line-height: 1.35; }
.bag-line__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.bag-line__meta { font-size: 12px; color: var(--taupe-soft); }
.bag-line__row { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.bag-line__remove { font-size: 12px; color: var(--taupe-soft); text-decoration: underline; text-underline-offset: 3px; }
.bag-line__remove:hover { color: var(--umber); }
.bag-line__price { font-size: 14px; color: var(--umber); white-space: nowrap; }

.qty--sm { height: 34px; }
.qty--sm button { width: 30px; font-size: 14px; }
.qty--sm button:disabled { opacity: .3; cursor: default; }
.qty--sm span { min-width: 24px; text-align: center; font-size: 13px; color: var(--umber); }

.bag-empty { flex: 1; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 40px 24px; text-align: center; }
.bag-empty__title { font: 22px/1.3 var(--display); color: var(--umber); }
.bag-empty__text { font-size: 14px; margin-bottom: 14px; }

.bag-drawer__foot { padding: 18px 24px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: 8px; }
.bag-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; color: var(--umber); }
.bag-total__amount { font-size: 18px; }
.bag-total__note { font-size: 12px; color: var(--taupe-soft); margin-bottom: 8px; }
.bag-checkout { width: 100%; min-height: 52px; font-size: 14px; }
.bag-continue { justify-self: center; padding: 8px; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

/* Gift options */
.gift { margin: 20px 24px 24px; background: var(--paper); }
.gift__switch { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 16px; cursor: pointer; }
.gift__switch input { position: absolute; opacity: 0; pointer-events: none; }
.gift__switch input:checked + .toggle__track { background: var(--umber); }
.gift__switch input:checked + .toggle__track::after { transform: translateX(14px); }
.gift__switch input:focus-visible + .toggle__track { outline: 1.5px solid var(--umber); outline-offset: 2px; }
.gift__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--umber); stroke-width: 1.2; stroke-linejoin: round; }
.gift__text { display: grid; gap: 2px; }
.gift__title { font-size: 14px; color: var(--umber); }
.gift__sub { font-size: 12px; color: var(--taupe-soft); line-height: 1.4; }

.gift__body { display: grid; gap: 16px; padding: 4px 16px 18px; border-top: 1px solid var(--line); padding-top: 18px; animation: fadeIn .3s var(--ease); }
.gift__label { display: flex; justify-content: space-between; font-size: 12px; color: var(--umber); margin-bottom: 8px; }
.gift__label small { font-size: 11px; color: var(--taupe-soft); }
.gift__info { font-size: 12px; color: var(--taupe-soft); line-height: 1.5; margin-top: -6px; }
.gift__to { border: 0; padding: 0; margin: 0; min-width: 0; }
.gift__ghana { display: grid; gap: 14px; }
.gift__ghana .gift__info { margin-top: -4px; }

.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); background: var(--bone); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: grid; place-items: center; height: 40px; font-size: 13px; color: var(--taupe); transition: background .2s, color .2s; }
.seg label + label span { border-left: 1px solid var(--line); }
.seg input:checked + span { background: var(--umber); color: var(--bone); }
.seg input:focus-visible + span { outline: 1.5px solid var(--umber); outline-offset: -4px; }

.field { display: grid; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); background: var(--bone); color: var(--umber);
  font: 14px/1.4 var(--sans); padding: 10px 12px; border-radius: 0;
}
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--umber) 50%), linear-gradient(-45deg, transparent 50%, var(--umber) 50%);
  background-size: 4px 4px; background-position: right 16px center, right 12px center; background-repeat: no-repeat;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input::placeholder, .field textarea::placeholder { color: var(--taupe-soft); opacity: .7; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--umber); }

.gift__wrap { padding: 0; }

.bag-total--wrap { font-size: 13px; color: var(--taupe); }
.bag-total__gift { font-size: 12px; color: var(--umber); display: flex; align-items: center; gap: 6px; }
.bag-total__gift::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--k-green); }

@media (max-width: 480px) {
  .bag-line { grid-template-columns: 72px 1fr auto; gap: 12px; }
  .bag-line__media { width: 72px; }
  .bag-lines, .bag-ship, .bag-drawer__foot { padding-left: 18px; padding-right: 18px; }
  .gift { margin-left: 18px; margin-right: 18px; }
}

/* ==========================================================
   Search: suggestions + results page
   ========================================================== */
/* Small product/craft thumbnail; kente is shrunk so a whole repeat shows */
.thumb { position: relative; flex: none; width: 52px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.thumb .ph { position: absolute; inset: 0; }
.thumb .ph--kente { inset: auto; left: 0; top: 0; width: 250%; height: 250%; transform: scale(.4); transform-origin: 0 0; }
.thumb .ph--fan { -webkit-mask: none; mask: none; }
.thumb--round { width: 36px; aspect-ratio: 1; border-radius: 50%; }

.sug { max-width: var(--max); margin: 0 auto; padding: 4px var(--gutter) 32px; }
.sug mark { background: none; color: inherit; box-shadow: inset 0 -.38em rgba(200,160,74,.4); }
.sug__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.sug__cols--results { grid-template-columns: minmax(180px, 1fr) 3fr; }
.sug__cols--results:not(:has(.sug__col--cats)) { grid-template-columns: 1fr; }
.sug__head { display: flex; justify-content: space-between; align-items: baseline; }
.sug__title { font-size: 12px; color: var(--taupe-soft); margin: 14px 0 10px; }
.sug__clear { font-size: 12px; color: var(--taupe-soft); text-decoration: underline; text-underline-offset: 3px; }
.sug__clear:hover { color: var(--umber); }

.sug__opt { outline: none; }
.sug__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sug__chip { padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 13px; color: var(--umber); transition: border-color .15s, background .15s; }
.sug__chip:hover, .sug__chip[aria-selected="true"] { border-color: var(--umber); background: var(--paper); }

.sug__cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px; }
.sug__cols--results .sug__cats { grid-template-columns: 1fr; }
.sug__cat { display: flex; align-items: center; gap: 12px; padding: 6px 8px; margin: 0 -8px; font-size: 14px; color: var(--umber); }
.sug__cat:hover, .sug__cat[aria-selected="true"] { background: var(--paper); }

.sug__items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 24px; }
.sug__item { display: flex; align-items: center; gap: 14px; padding: 8px; margin: 0 -8px; }
.sug__item:hover, .sug__item[aria-selected="true"] { background: var(--paper); }
.sug__info { display: grid; gap: 2px; min-width: 0; flex: 1; }
.sug__name { font-size: 14px; color: var(--umber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug__meta { font-size: 12px; color: var(--taupe-soft); }
.sug__price { font-size: 13px; color: var(--umber); }

.sug__all { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.sug__link { font-size: 14px; color: var(--umber); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); }
.sug__link:hover, .sug__link[aria-selected="true"] { text-decoration-color: currentColor; }
.sug__none { padding-top: 8px; }
.sug__none-title { font: 20px/1.3 var(--display); color: var(--umber); }
.sug__dym { margin-top: 8px; font-size: 14px; }

/* Results page */
.srp { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.srp-head { display: grid; justify-items: center; gap: 24px; padding: 48px 0 28px; text-align: center; }
.srp-form {
  position: relative; display: grid; grid-template-columns: 1fr auto; width: min(640px, 100%);
  border-bottom: 1px solid var(--umber);
}
.srp-form__icon { position: absolute; left: 0; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); fill: none; stroke: var(--umber); stroke-width: 1.3; stroke-linecap: round; }
.srp-form input {
  border: 0; background: transparent; padding: 14px 12px 14px 34px; outline: none;
  font: 22px/1.2 var(--display); color: var(--umber);
}
.srp-form input::-webkit-search-cancel-button { -webkit-appearance: none; }
.srp-form .btn { min-height: 40px; align-self: center; padding: 0 20px; font-size: 13px; }
.srp-form:focus-within { border-bottom-width: 2px; margin-bottom: -1px; }
.srp-title { font: 400 var(--text-h3)/1.25 var(--display); color: var(--umber); max-width: 30ch; }

.chips--srp { margin: 0 0 24px; }
.chip__n { color: var(--taupe-soft); margin-left: 4px; font-size: 12px; }
.chip[aria-pressed="true"] .chip__n { color: rgba(250,247,243,.7); }
.grid--srp { margin-top: 32px; }

.srp-empty { display: grid; justify-items: center; text-align: center; padding-bottom: 8px; }
.srp-empty__text { font-size: 15px; max-width: 44ch; }
.srp-empty .chip { display: inline-block; }
.srp-empty__text a { color: var(--umber); text-decoration: underline; text-underline-offset: 4px; }
.srp-empty__label { font-size: 12px; color: var(--taupe-soft); margin: 40px 0 14px; }
.crafts--srp { width: 100%; max-width: 900px; }
.srp-empty__head { width: 100%; margin-top: 72px; }
.srp-empty .grid { width: 100%; text-align: left; }

@media (max-width: 900px) {
  .search__sheet { height: 100%; }
  .search__form { padding-top: 16px; }
  .search__form input { font-size: 19px; }
  .sug__cols, .sug__cols--results { grid-template-columns: 1fr; gap: 8px; }
  .sug__items { grid-template-columns: 1fr; }
  .sug__cols--results .sug__cats { grid-template-columns: repeat(2, 1fr); }
  .srp-head { padding-top: 28px; }
  .srp-form input { font-size: 18px; }
  .chips--srp { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; width: calc(100% + var(--gutter) * 2); margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter); scrollbar-width: none; }
  .chips--srp .chip { white-space: nowrap; }
  .srp-empty .chips { flex-wrap: wrap; justify-content: center; overflow: visible; width: auto; margin-inline: 0; padding: 0; }
}

/* ==========================================================
   Our story
   ========================================================== */
.story-hero { display: grid; justify-items: center; text-align: center; gap: 18px; padding: var(--space-section-lg) var(--gutter) clamp(48px, 7vw, 88px); }
.story-hero__word { color: var(--umber); width: min(86vw, 760px); }
.story-hero__word .logo { width: 100%; height: auto; }
.story-hero__meaning { font: 400 clamp(18px, 2vw, 24px)/1.3 var(--display); color: var(--umber); }
.story-hero__meaning em { font-style: normal; box-shadow: inset 0 -.32em rgba(200,160,74,.45); }
.story-hero__line { font-size: 16px; max-width: 34ch; }

.story-band { position: relative; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.story-band__media { height: clamp(260px, 52vh, 560px); }
.story-band figcaption { position: absolute; right: calc(var(--gutter) + 16px); bottom: 14px; font-size: 12px; color: rgba(250,247,243,.9); text-shadow: 0 1px 8px rgba(0,0,0,.4); }

.steps { max-width: 1100px; margin: 0 auto; padding: var(--space-section) var(--gutter) 0; display: grid; gap: 40px; justify-items: center; }
.steps__list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; width: 100%; padding: 0; }
.step { display: grid; gap: 8px; align-content: start; padding-top: 20px; border-top: 1px solid var(--line); }
.step__n { font: 400 40px/1 var(--display); color: var(--taupe-soft); margin-bottom: 12px; }
.step__title { font: 400 20px/1.3 var(--display); color: var(--umber); }
.step__text { font-size: 15px; max-width: 30ch; }

.regions { max-width: 1180px; margin: 0 auto; padding: var(--space-section-lg) var(--gutter) 0; }
.regions__head { display: grid; justify-items: center; gap: 8px; margin-bottom: 40px; text-align: center; }
.regions__intro { font-size: 15px; }
.regions__body { display: grid; grid-template-columns: minmax(280px, 440px) 1fr; gap: var(--space-block); align-items: start; }

.map { position: relative; aspect-ratio: 467.2 / 664.4; }
.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map__land { fill: var(--bone); stroke: var(--taupe); stroke-opacity: .45; stroke-width: 1.4; stroke-linejoin: round; }
.pin {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 6px; padding: 8px;
  z-index: 1;
}
.pin:hover, .pin.is-active, .pin.is-hover { z-index: 2; }
.pin__dot {
  position: relative; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--umber); box-shadow: 0 0 0 2px var(--paper);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.pin--studio .pin__dot { border-radius: 2px; transform: rotate(45deg); }
.pin__label {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--taupe); white-space: nowrap; pointer-events: none;
  transition: color .2s;
}
.pin:hover .pin__dot, .pin.is-hover .pin__dot { transform: scale(1.2); }
.pin--studio:hover .pin__dot, .pin--studio.is-hover .pin__dot { transform: rotate(45deg) scale(1.2); }
.pin.is-active .pin__dot { background: var(--k-gold); transform: scale(1.3); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--umber); }
.pin--studio.is-active .pin__dot { transform: rotate(45deg) scale(1.3); }
.pin.is-active .pin__label, .pin:hover .pin__label, .pin.is-hover .pin__label { color: var(--umber); }
.pin.is-active .pin__dot::after { /* one soft ring when a region is chosen */
  content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 1px solid var(--k-gold);
  animation: pinRing 1.4s var(--ease) 1 forwards;
}
@keyframes pinRing { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(2); } }

/* Desktop: map beside the list. The phone-only card and chips stay hidden. */
.atlas { display: contents; }
.region-card, .region-chips { display: none; }
.region-list { border-top: 1px solid var(--line); }
.region { border-bottom: 1px solid var(--line); }
.region__head {
  width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px;
  padding: 18px 0; text-align: left;
}
.region__name { font: 400 20px/1.25 var(--display); color: var(--taupe); transition: color .2s; }
.region__crafts { font-size: 13px; color: var(--taupe-soft); text-align: right; }
.region__head:hover .region__name, .region.is-active .region__name { color: var(--umber); }
.region__body { display: grid; gap: 8px; padding: 0 0 22px; animation: fadeIn .3s var(--ease); }
.region__towns { font-size: 13px; color: var(--taupe-soft); }
.region__text { font-size: 15px; max-width: 46ch; }
.region__shop { justify-self: start; margin-top: 6px; font-size: 14px; color: var(--umber); text-decoration: underline; text-underline-offset: 4px; }

.story-makers { max-width: var(--max); margin: 0 auto; padding: var(--space-section-lg) var(--gutter) 0; scroll-margin-top: 120px; }
.story-makers__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.smaker__media { aspect-ratio: 3 / 4; margin-bottom: 16px; filter: saturate(.8); }
.smaker__name { font: 400 18px/1.3 var(--display); color: var(--umber); }
.smaker__meta { font-size: 12px; color: var(--taupe-soft); margin-top: 4px; }
.smaker__text { font-size: 14px; margin-top: 10px; max-width: 32ch; }

.story-close {
  display: grid; justify-items: center; gap: 28px; text-align: center;
  max-width: var(--max); margin: var(--space-section-lg) auto 0; padding: clamp(56px, 8vw, 96px) var(--gutter);
  background: var(--taupe); color: var(--bone);
}
.story-close__title { font: 400 clamp(30px, 4vw, 52px)/1.1 var(--display); }
.story-close__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px; }
.story-close__link { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }

.makers__more { display: flex; justify-content: center; margin-top: 36px; }
.makers__more a { font-size: 14px; color: var(--umber); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1100px) {
  .story-makers__list { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
}
@media (max-width: 900px) {
  .steps__list { grid-template-columns: 1fr; gap: 28px; }
  .regions__body { grid-template-columns: 1fr; }
  /* Phones and tablets: one card with the map on the left and the chosen region on the right.
     Tapping a pin or chip changes the card in place; nothing scrolls away. */
  .atlas {
    display: grid; grid-template-columns: minmax(0, 44%) 1fr; gap: 20px; align-items: center;
    padding: 20px 18px 16px; background: var(--bone); max-width: 560px; width: 100%; justify-self: center;
  }
  .map { width: 100%; }
  .pin { padding: 6px; }
  .pin__label { display: none; }
  .region-list { display: none; }
  .region-card { display: grid; gap: 6px; align-content: center; min-height: 100%; }
  .region-card > * { animation: fadeIn .3s var(--ease); }
  .region-card__crafts { font-size: 12px; color: var(--taupe-soft); }
  .region-card__name { font: 400 24px/1.15 var(--display); color: var(--umber); }
  .region-card__towns { font-size: 12px; color: var(--taupe-soft); }
  .region-card__text { font-size: 14px; margin-top: 4px; }
  .region-card__shop { justify-self: start; margin-top: 6px; font-size: 13px; color: var(--umber); text-decoration: underline; text-underline-offset: 4px; }
  .region-chips {
    grid-column: 1 / -1; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    margin: 4px -18px 0; padding: 14px 18px 2px; border-top: 1px solid var(--line);
  }
  .region-chips::-webkit-scrollbar { display: none; }
  .region-chips .chip { flex: none; }
}
@media (max-width: 640px) {
  .story-makers__list { grid-template-columns: 1fr 1fr; gap: 28px 12px; }
  .smaker__text { display: none; }
}

/* ==========================================================
   Wishlist + toast
   ========================================================== */
.toast {
  position: fixed; z-index: 95; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 18px; max-width: calc(100vw - 32px);
  padding: 12px 18px; background: var(--umber); color: var(--bone); font-size: 13px;
  transform: translateX(-50%); box-shadow: 0 12px 32px -16px rgba(43,39,35,.6);
}
.toast.is-in { animation: toastIn .35s var(--ease); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } }
.toast a, .toast button { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; white-space: nowrap; }
.toast__url { width: 220px; border: 0; padding: 4px 6px; font-size: 12px; color: var(--umber); background: var(--bone); }

.card__wish[aria-pressed="true"] svg { fill: var(--umber); }

.wish { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wish-head { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 48px 0 40px; }
.wish-head__title { font: 400 clamp(34px, 4.6vw, 56px)/1.05 var(--display); color: var(--umber); }
.wish-head__sub { font-size: 15px; }
.wish-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; margin-top: 14px; }
.wish-share { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--umber); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); }
.wish-share:hover { text-decoration-color: currentColor; }
.wish-share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.wish-note { font-size: 12px; color: var(--taupe-soft); min-height: 1em; }
.wish-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 8px 0 0; }
.wish-empty__title { font: 400 24px/1.3 var(--display); color: var(--umber); }
.wish-empty__text { font-size: 15px; margin-bottom: 14px; }
.wish-empty__head { width: 100%; margin-top: 72px; }
.wish-empty .grid { width: 100%; text-align: left; }

@media (max-width: 900px) {
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ==========================================================
   Checkout
   ========================================================== */
.co-page { accent-color: var(--umber); }
.co-header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 72px; padding: 0 var(--gutter); background: var(--bone); border-bottom: 1px solid var(--line);
}
.co-header__back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--umber); }
.co-header__back svg, .co-header__secure svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.co-header__back:hover span { text-decoration: underline; text-underline-offset: 3px; }
.co-header__secure { justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--taupe-soft); }

.co { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter) 80px; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(32px, 6vw, 80px); align-items: start; padding-top: 40px; }
.co-title { font: 400 clamp(30px, 3.4vw, 40px)/1.1 var(--display); color: var(--umber); margin-bottom: 20px; }

/* Steps */
.co-step { border-top: 1px solid var(--line); padding: 22px 0; scroll-margin-top: 24px; }
.co-step__head { display: flex; align-items: center; gap: 14px; }
.co-step__n {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--taupe); font-size: 13px; color: var(--umber); transition: background .25s, color .25s;
}
.co-step.is-active .co-step__n, .co-step.is-done .co-step__n { background: var(--umber); border-color: var(--umber); color: var(--bone); }
.co-step__title { font: 400 22px/1.2 var(--display); color: var(--umber); flex: 1; }
.co-step:not(.is-active):not(.is-done) .co-step__title,
.co-step:not(.is-active):not(.is-done) .co-step__n { opacity: .45; }
.co-step__edit { font-size: 13px; color: var(--umber); text-decoration: underline; text-underline-offset: 3px; }
.co-step__summary { margin: 10px 0 0 42px; font-size: 14px; color: var(--taupe); line-height: 1.6; }
.co-step__body { display: grid; gap: 18px; margin: 22px 0 6px 42px; animation: fadeIn .3s var(--ease); }

/* Fields */
.co fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.co-addr { display: grid; gap: 18px; }
.f { display: grid; gap: 6px; align-content: start; }
.f__label { font-size: 13px; color: var(--umber); }
.f__opt { font-size: 12px; color: var(--taupe-soft); margin-left: 6px; }
.f__input {
  width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 0;
  background: var(--bone); font: 15px var(--sans); color: var(--umber);
}
.f__input::placeholder { color: var(--taupe-soft); opacity: .7; }
.f__input:focus { outline: none; border-color: var(--umber); box-shadow: inset 0 0 0 1px var(--umber); }
select.f__input {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--umber) 50%), linear-gradient(-45deg, transparent 50%, var(--umber) 50%);
  background-size: 4px 4px; background-position: right 18px center, right 14px center; background-repeat: no-repeat;
}
.f__input[aria-invalid="true"] { border-color: var(--k-red); box-shadow: inset 0 0 0 1px var(--k-red); }
.f__err { font-size: 13px; color: var(--k-red); }
.f__hint { font-size: 12px; color: var(--taupe-soft); }
.f-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.f__prefix { display: flex; }
.f__prefix > span { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--line); border-right: 0; background: var(--paper); font-size: 14px; color: var(--umber); }
.co-hint { font-size: 13px; color: var(--taupe-soft); }
.co-check { padding: 0; }
.co-who .seg { max-width: 360px; margin-top: 8px; }

/* Delivery + payment options */
.co-methods__list, .co-pay { display: grid; gap: 8px; margin-top: 8px; }
.co-method, .co-pay__opt {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 12px;
  padding: 14px 16px; border: 1px solid var(--line); background: var(--bone); cursor: pointer;
  transition: border-color .2s;
}
.co-method:hover, .co-pay__opt:hover { border-color: var(--taupe); }
.co-method:has(input:checked), .co-pay__opt:has(input:checked) { border-color: var(--umber); box-shadow: inset 0 0 0 1px var(--umber); }
.co-method input, .co-pay__opt input { grid-row: span 2; margin: 0; width: 16px; height: 16px; }
.co-method__name, .co-pay__name { font-size: 14px; color: var(--umber); }
.co-method__price { font-size: 14px; color: var(--umber); }
.co-method__when, .co-pay__desc { grid-column: 2 / -1; font-size: 12px; color: var(--taupe-soft); }
.co-notice { padding: 12px 14px; border-left: 3px solid var(--k-gold); background: rgba(200,160,74,.12); font-size: 13px; color: var(--umber); }
.co-pay__slot { display: grid; gap: 14px; padding: 18px; border: 1px dashed var(--taupe-soft); font-size: 13px; color: var(--taupe); }
.co-pay__slot.is-live { padding: 0; border: 0; }   /* the provider's own form, not a placeholder */
.co-pay__slot [data-pay-text]:empty { display: none; }
.co-pay__err { margin-top: -4px; }
.co-momo { max-width: 260px; }
.co-terms { font-size: 12px; color: var(--taupe-soft); }
.co-terms a { text-decoration: underline; text-underline-offset: 3px; }
.co-next { justify-self: start; min-height: 50px; padding: 0 28px; }
.co-place { justify-self: stretch; min-height: 54px; font-size: 15px; }

/* Summary */
.co-summary { position: sticky; top: 24px; display: grid; gap: 18px; padding: 26px; background: var(--bone); }
.co-lines { display: grid; gap: 14px; }
.co-line { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.co-line__media { position: relative; }
.co-line__qty {
  position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--taupe); color: var(--bone); font-size: 11px; line-height: 20px; text-align: center;
}
.co-line__info { display: grid; gap: 2px; min-width: 0; }
.co-line__name { font-size: 14px; color: var(--umber); }
.co-line__meta { font-size: 12px; color: var(--taupe-soft); }
.co-line__price { font-size: 14px; color: var(--umber); }
.co-gift { padding: 12px 14px; background: var(--paper); display: grid; gap: 4px; font-size: 13px; }
.co-gift__title { color: var(--umber); }
.co-gift__note { font-family: var(--display); color: var(--umber); }
.co-gift__meta { font-size: 12px; color: var(--taupe-soft); }
.co-totals { display: grid; gap: 8px; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.co-totals > div { display: flex; justify-content: space-between; font-size: 14px; }
.co-totals dt { color: var(--taupe); }
.co-totals dd { margin: 0; color: var(--umber); }
.co-totals__total { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--line); }
.co-totals__total dt, .co-totals__total dd { font: 400 20px/1.2 var(--display); color: var(--umber); }
.co-duty { font-size: 12px; color: var(--taupe-soft); }
.co-charge { font-size: 12px; line-height: 1.5; color: var(--umber); padding: 10px 12px; background: var(--paper); border-left: 2px solid var(--k-gold); }
.co-duty:empty { display: none; }
.co-editbag { justify-self: start; font-size: 13px; color: var(--umber); text-decoration: underline; text-underline-offset: 3px; }
.co-sumbar { display: none; }

/* Empty + confirmation */
.co-empty, .co-done { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 72px 0 24px; }
.co-empty__title { font: 400 26px/1.3 var(--display); color: var(--umber); }
.co-empty .btn { margin-top: 12px; }
.co-done:focus { outline: none; }
.co-done__mark { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--k-green); margin-bottom: 8px; }
.co-done__mark svg { width: 26px; height: 26px; fill: none; stroke: var(--k-green); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.co-done__title { font: 400 clamp(30px, 4vw, 46px)/1.15 var(--display); color: var(--umber); max-width: 20ch; }
.co-done__order { font-size: 15px; color: var(--taupe); }
.co-next-steps { list-style: none; padding: 0; margin: 28px 0 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 20px; text-align: left; }
.co-next-steps li { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--umber); }
.co-next-steps__n { font: 400 26px/1 var(--display); color: var(--taupe-soft); }
.co-done__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; width: min(100%, 700px); margin: 16px 0; text-align: left; }
.co-done__box { padding: 20px; background: var(--bone); font-size: 14px; line-height: 1.6; color: var(--umber); }
.co-done__label { font-size: 12px; color: var(--taupe-soft); margin-bottom: 8px; }
.co-lines--done { gap: 6px; }
.co-done__line { display: flex; justify-content: space-between; gap: 12px; }
.co-done__total { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--display); font-size: 17px; }
.co-done__mail { font-size: 13px; color: var(--taupe-soft); margin-bottom: 12px; }

.co-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
  max-width: 1180px; margin: 0 auto; padding: 24px var(--gutter) 40px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--taupe-soft);
}
.co-footer nav { display: flex; gap: 18px; }
.co-footer nav a:hover { color: var(--umber); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .co-header { height: 60px; }
  .co-header__back span, .co-header__secure span { display: none; }
  .co-header .logo { height: 15px; }
  .co { padding-bottom: 48px; }
  .co-grid { grid-template-columns: 1fr; padding-top: 0; gap: 0; }
  .co-sumbar {
    display: flex; justify-content: space-between; align-items: center;
    width: calc(100% + var(--gutter) * 2); margin: 0 calc(var(--gutter) * -1); padding: 16px var(--gutter);
    background: var(--bone); border-bottom: 1px solid var(--line); font-size: 14px; color: var(--umber);
  }
  .co-sumbar > span:first-child { text-decoration: underline; text-underline-offset: 3px; }
  .co-sumbar__total { font-family: var(--display); font-size: 17px; }
  .co-summary { display: none; position: static; order: -1; margin: 0 calc(var(--gutter) * -1); padding: 20px var(--gutter); border-bottom: 1px solid var(--line); }
  .co-summary.is-open { display: grid; }
  .co-steps { padding-top: 28px; }
  .co-step__body { margin-left: 0; }
  .co-step__summary { margin-left: 42px; }
  .co-next { justify-self: stretch; }
  .co-next-steps { grid-template-columns: 1fr; width: 100%; }
  .co-done__grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   Gift guide
   ========================================================== */
.gifts { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.gifts-head { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 48px 0 32px; }
.gifts-head__title { font: 400 clamp(40px, 6vw, 72px)/1 var(--display); color: var(--umber); }
.gifts-head__text { font-size: 16px; }

.gift-pick { display: grid; gap: 18px; padding: 24px 0 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scroll-margin-top: 130px; }
.gift-pick__row { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 16px; }
.gift-pick__label { font-size: 13px; color: var(--taupe-soft); }
.gift-pick__chips { justify-content: flex-start; margin: 0; }
.chip.is-empty { opacity: .45; }

.gift-results { padding-top: 8px; }
.gift-results .toolbar { border-top: 0; margin-bottom: 28px; }
.gift-results .toolbar__count { display: block; font-size: 14px; color: var(--umber); }
.gift-none { display: grid; justify-items: center; gap: 16px; padding: 56px 0; text-align: center; }
.gift-none__title { font: 400 22px/1.3 var(--display); color: var(--umber); }

.gift-row { padding-top: clamp(48px, 7vw, 80px); }
.gift-row__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.gift-row__title { font: 400 var(--text-h3)/1.2 var(--display); color: var(--umber); }
.gift-row__see { font-size: 14px; color: var(--umber); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); white-space: nowrap; }
.gift-row__see:hover { text-decoration-color: currentColor; }

.gift-perks { display: grid; justify-items: center; gap: 32px; margin-top: var(--space-section); padding: clamp(48px, 7vw, 72px) var(--gutter); background: var(--bone); }
.gift-perks__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; width: 100%; max-width: 1100px; }
.gift-perks__list li { padding-top: 14px; border-top: 1px solid var(--line); }
.gift-perks__name { font: 400 17px/1.3 var(--display); color: var(--umber); }
.gift-perks__text { font-size: 13px; color: var(--taupe-soft); margin-top: 4px; }

@media (max-width: 900px) {
  .gift-pick__row { grid-template-columns: 1fr; gap: 10px; }
  .gift-pick__chips { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + var(--gutter) * 2); margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter); scrollbar-width: none; }
  .gift-pick__chips::-webkit-scrollbar { display: none; }
  .gift-pick__chips .chip { white-space: nowrap; }
  .gift-perks__list { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================
   Help: shipping, returns, care, FAQs, contact
   ========================================================== */
.help { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); scroll-margin-top: 120px; }
.help-head { padding: 48px 0 28px; }
.help-head__title { font: 400 clamp(36px, 5vw, 56px)/1.05 var(--display); color: var(--umber); }
.help-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.help-nav { position: sticky; top: 130px; display: grid; border-top: 1px solid var(--line); }
.help-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--taupe); transition: color .2s; }
.help-nav a:hover, .help-nav a[aria-current] { color: var(--umber); }
.help-nav a[aria-current] { box-shadow: inset 2px 0 0 var(--umber); padding-left: 12px; }

.help-content { max-width: 680px; }
.help-sec { display: grid; gap: 14px; scroll-margin-top: 130px; animation: fadeIn .3s var(--ease); }
.help-sec:not([hidden]) + .help-sec:not([hidden]) { margin-top: 64px; }  /* only when sections stack (no JS) */
.help-sec__title { font: 400 clamp(28px, 3vw, 36px)/1.15 var(--display); color: var(--umber); }
.help-sec__title:focus { outline: none; }
.help-lede { font-size: 17px; color: var(--umber); }
.help-free { font-size: 14px; padding: 10px 14px; background: var(--bone); justify-self: start; }
.help-sub { font: 400 19px/1.3 var(--display); color: var(--umber); margin-top: 22px; }
.help-note { font-size: 13px; color: var(--taupe-soft); }
.help-sec p { max-width: 60ch; }

.htable { width: 100%; border-collapse: collapse; font-size: 14px; }
.htable th, .htable td { text-align: left; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.htable thead th { font-weight: 400; font-size: 12px; color: var(--taupe-soft); }
.htable tbody th { font-weight: 400; color: var(--umber); }
.htable td span[data-usd] { color: var(--taupe-soft); font-size: 13px; }
.htable--sizes { max-width: 420px; margin: 12px 0; }
.htable--sizes td, .htable--sizes th { padding: 8px 12px 8px 0; }

.help-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.help-steps li { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--umber); }
.help-steps__n { font: 400 24px/1 var(--display); color: var(--taupe-soft); }
/* Plain lists: no bullets, each item set apart by space alone */
.help-list, .legal-body ul, .care__tips { list-style: none; padding-left: 0; }
.help-list { display: grid; gap: 10px; font-size: 15px; }

.care-list { list-style: none; padding: 0; display: grid; gap: 12px; margin-top: 6px; }
.care { display: grid; grid-template-columns: 88px 1fr; gap: 28px; align-items: start; padding: 20px; background: var(--bone); scroll-margin-top: 130px; }
.care:target { box-shadow: inset 0 0 0 1px var(--umber); }
.care__media { aspect-ratio: 1; border-radius: 50%; }
.care__media.ph--fan { -webkit-mask: none; mask: none; }
.care__title { font: 400 18px/1.3 var(--display); color: var(--umber); }
.care__tips { margin: 8px 0 14px; display: grid; gap: 8px; font-size: 14px; }
.care__shop { font-size: 13px; color: var(--umber); text-decoration: underline; text-underline-offset: 3px; }

.qa-list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); scroll-margin-top: 130px; }
.qa summary { list-style: none; cursor: pointer; position: relative; padding: 18px 32px 18px 0; font-size: 16px; color: var(--umber); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before, .qa summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 12px; height: 1px; background: var(--umber); transition: transform .25s var(--ease);
}
.qa summary::after { transform: rotate(90deg); }
.qa[open] summary::after { transform: rotate(0); }
.qa__a { padding: 0 0 20px; font-size: 15px; display: grid; gap: 8px; }

.contact-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.contact-list li { padding: 18px; background: var(--bone); font-size: 14px; }
.contact-list__label { font-size: 12px; color: var(--taupe-soft); margin-bottom: 6px; }
.contact-list a { color: var(--umber); text-decoration: underline; text-underline-offset: 3px; }

.acc__more { font-size: 13px; color: var(--umber); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .help-head { padding: 32px 0 16px; }
  .help-body { grid-template-columns: 1fr; gap: 24px; }
  .help-nav {
    position: sticky; top: 60px; z-index: 20; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1); padding: 10px var(--gutter); background: var(--paper); border-top: 0; border-bottom: 1px solid var(--line);
  }
  .help-nav::-webkit-scrollbar { display: none; }
  .help-nav a { flex: none; padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 13px; white-space: nowrap; }
  .help-nav a[aria-current] { box-shadow: none; padding-left: 14px; background: var(--umber); border-color: var(--umber); color: var(--bone); }
  .help-steps, .contact-list { grid-template-columns: 1fr; }
  .help-steps li { grid-template-columns: 28px 1fr; align-items: baseline; gap: 0; padding: 14px 0; }
  .help-steps__n { font-size: 20px; }
  .care { grid-template-columns: 56px 1fr; gap: 24px; padding: 18px; }
}

/* ==========================================================
   Track your order
   ========================================================== */
.track { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.track-head { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 48px 0 32px; }
.track-head__title { font: 400 clamp(32px, 4.6vw, 52px)/1.1 var(--display); color: var(--umber); }
.track-head__text { font-size: 15px; }

.track-form { display: grid; gap: 18px; max-width: 440px; margin: 0 auto; padding: 28px; background: var(--bone); }
.track-form .f__input { background: var(--paper); }
.track-form__btn { min-height: 50px; }
.track-form__miss { font-size: 14px; color: var(--k-red); }
.track-form__miss a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.track-demo { font-size: 12px; color: var(--taupe-soft); padding-top: 14px; border-top: 1px dashed var(--line); }
.track-demo button { font-size: 12px; color: var(--umber); text-decoration: underline; text-underline-offset: 3px; }

.track-result { display: grid; gap: 10px; }
.track-result:focus { outline: none; }
.track-result__no { font-size: 13px; color: var(--taupe-soft); }
.track-result__status { font: 400 clamp(30px, 4vw, 44px)/1.1 var(--display); color: var(--umber); }
.track-result__eta { font-size: 16px; color: var(--umber); }
.track-result__courier { font-size: 14px; padding: 12px 14px; background: var(--bone); }
.track-result__courier a { color: var(--umber); text-decoration: underline; text-underline-offset: 3px; }

/* Timeline: across on wide screens, down on phones */
.tl { list-style: none; padding: 0; margin: 26px 0 18px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.tl__step { position: relative; display: grid; gap: 4px; padding: 26px 10px 0 0; }
.tl__step::before { /* the line to the next step */
  content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--line);
}
.tl__step.is-done::before { background: var(--umber); }
.tl__step.is-now::before { background: linear-gradient(90deg, var(--umber) 0 12px, var(--line) 12px); }
.tl__step:last-child::before { right: auto; width: 12px; }
.tl__dot { position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line); }
.tl__step.is-done .tl__dot { background: var(--umber); border-color: var(--umber); }
.tl__step.is-now .tl__dot { background: var(--k-gold); border-color: var(--umber); box-shadow: 0 0 0 4px rgba(200,160,74,.25); }
.tl__label { font-size: 13px; color: var(--taupe-soft); line-height: 1.35; }
.tl__step.is-done .tl__label { color: var(--umber); }
.tl__date { font-size: 12px; color: var(--taupe-soft); }

.track-result__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; margin: 14px 0; }
.track-box { padding: 20px; background: var(--bone); font-size: 14px; color: var(--umber); line-height: 1.6; }
.track-box__label { font-size: 12px; color: var(--taupe-soft); margin-bottom: 6px; }
.track-box__meta { font-size: 13px; color: var(--taupe-soft); }
.track-lines { display: grid; gap: 4px; }
.track-lines li { display: flex; justify-content: space-between; gap: 12px; }
.track-box__total { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--display); font-size: 16px; }
.track-help { font-size: 13px; color: var(--taupe-soft); margin-bottom: 8px; }
.track-help a { color: var(--umber); text-decoration: underline; text-underline-offset: 3px; }
.track-result .btn--ghost { justify-self: start; }

.co-done__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; }
.co-done__link { font-size: 14px; color: var(--umber); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 640px) {
  .track-form { padding: 20px; margin-inline: calc(var(--gutter) * -1); }
  .tl { grid-auto-flow: row; gap: 0; margin-left: 2px; }
  .tl__step { padding: 0 0 22px 30px; grid-template-columns: 1fr auto; align-items: baseline; }
  .tl__step::before { top: 14px; bottom: 0; left: 6px; right: auto; width: 2px; height: auto; }
  .tl__step.is-now::before { background: var(--line); }
  .tl__step:last-child::before { display: none; }
  .tl__label { font-size: 14px; }
  .track-result__grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   Account
   ========================================================== */
.acct { max-width: 960px; margin: 0 auto; padding: 0 var(--gutter); }
.acct-link { font-size: 14px; color: var(--umber); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.acct-link:hover { text-decoration-color: currentColor; }
.acct-card { display: grid; gap: 18px; padding: 28px; background: var(--bone); }
.acct-card .f__input { background: var(--paper); }

/* Sign in */
.acct-signin { display: grid; justify-items: center; gap: 12px; padding: 56px 0 24px; text-align: center; }
.acct-signin__title { font: 400 clamp(34px, 4.6vw, 52px)/1.1 var(--display); color: var(--umber); }
.acct-signin__text { font-size: 15px; margin-bottom: 14px; }
.acct-signin .acct-card { width: min(100%, 420px); text-align: left; }
.acct-signin .acct-card .btn { min-height: 50px; }
.acct-signin .acct-card .acct-link { justify-self: center; }
.acct-sent { font-size: 14px; color: var(--umber); }
.acct-code { font: 400 24px/1 var(--display); letter-spacing: .4em; text-align: center; }
.acct-demo { font-size: 12px; color: var(--taupe-soft); max-width: 420px; padding-top: 8px; }

/* Signed in */
.acct-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 48px 0 24px; }
.acct-head__title { font: 400 clamp(32px, 4.4vw, 48px)/1.1 var(--display); color: var(--umber); }
.acct-head__title:focus { outline: none; }
.acct-head__email { font-size: 14px; color: var(--taupe-soft); margin-top: 6px; }
.acct-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 28px; overflow-x: auto; scrollbar-width: none; }
.acct-tabs::-webkit-scrollbar { display: none; }
.acct-tabs [role="tab"] { position: relative; padding: 12px 16px; font-size: 14px; color: var(--taupe); white-space: nowrap; }
.acct-tabs [role="tab"]:hover { color: var(--umber); }
.acct-tabs [role="tab"][aria-selected="true"] { color: var(--umber); }
.acct-tabs [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--umber); }
.acct-panel { display: grid; gap: 16px; animation: fadeIn .3s var(--ease); }
.acct-panel__lede { font-size: 15px; color: var(--umber); }
.acct-sub { font: 400 20px/1.3 var(--display); color: var(--umber); }
.acct-hint { font-size: 13px; color: var(--taupe-soft); margin-top: -6px; }

.acct-orders { display: grid; gap: 12px; }
.acct-order { display: grid; gap: 6px; padding: 20px; background: var(--bone); }
.acct-order__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.acct-order__no { font: 400 17px/1.3 var(--display); color: var(--umber); }
.acct-order__meta, .acct-order__items { font-size: 13px; color: var(--taupe-soft); }
.acct-order__eta { font-size: 14px; color: var(--umber); }
.acct-order .acct-link { justify-self: start; margin-top: 4px; }
.acct-status { font-size: 12px; padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; background: var(--paper); color: var(--umber); box-shadow: inset 0 0 0 1px var(--line); }
.acct-status--moving { background: rgba(200,160,74,.18); box-shadow: none; }
.acct-status--done { background: rgba(78,106,73,.16); box-shadow: none; }
.acct-empty { display: grid; justify-items: center; gap: 14px; padding: 40px 0; text-align: center; }
.acct-empty__title { font: 400 22px/1.3 var(--display); color: var(--umber); }

.acct-addr-group { display: grid; gap: 12px; margin-bottom: 18px; }
.acct-addr-group__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.acct-addrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.acct-addr { display: grid; gap: 4px; align-content: start; padding: 18px; background: var(--bone); font-size: 14px; }
.acct-addr--empty { background: none; padding: 4px 0; color: var(--taupe-soft); }
.acct-addr__name { color: var(--umber); }
.acct-addr__lines { color: var(--taupe); font-size: 13px; }
.acct-addr__actions { display: flex; gap: 16px; margin-top: 8px; }
.acct-addr__actions .acct-link { font-size: 13px; }
.acct-tag { font-size: 11px; padding: 2px 8px; margin-left: 6px; border-radius: var(--radius-pill); background: var(--paper); color: var(--taupe); }
.acct-addr-form { max-width: 560px; }
.acct-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.acct-saved { font-size: 13px; color: var(--k-green); }
.acct-details { max-width: 520px; }
.acct-wish { grid-template-columns: repeat(4, 1fr); }
.acct-panel > .btn--ghost { justify-self: start; }
.co-saved { margin-bottom: 4px; }

@media (max-width: 900px) {
  .acct-wish { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .acct-head { padding-top: 32px; }
  .acct-card { padding: 20px; }
  .acct-signin .acct-card { margin-inline: calc(var(--gutter) * -1); width: calc(100% + var(--gutter) * 2); }
  .acct-tabs { margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter); }
}


/* Coming soon (category with no pieces yet) */
.soon { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 32px 0 8px; border-top: 1px solid var(--line); }
.soon__title { font: 400 26px/1.3 var(--display); color: var(--umber); }
.soon__text { font-size: 15px; max-width: 40ch; }
.soon__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; margin: 8px 0 12px; }
.soon__label { font-size: 12px; color: var(--taupe-soft); margin-top: 20px; }
.soon__crafts { justify-content: center; flex-wrap: wrap; }
.soon__crafts .chip { display: inline-block; }

/* ==========================================================
   Legal pages (terms, privacy)
   ========================================================== */
.legal { max-width: 1040px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: clamp(32px, 6vw, 80px); align-items: start; }
.legal-head { grid-column: 1 / -1; padding: 48px 0 32px; border-bottom: 1px solid var(--line); margin-bottom: 36px; }
.legal-head__title { font: 400 clamp(32px, 4.4vw, 48px)/1.1 var(--display); color: var(--umber); }
.legal-head__date { font-size: 13px; color: var(--taupe-soft); margin-top: 10px; }
/* Contents: sticky sidebar on desktop, a folded card on phones (legal.js opens/closes it) */
.legal-toc { position: sticky; top: 130px; font-size: 13px; }
.legal-toc__summary { display: none; }
.legal-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; }
.legal-toc a { display: grid; grid-template-columns: 24px 1fr; align-items: baseline; padding: 6px 0; color: var(--taupe); }
.legal-toc a:hover { color: var(--umber); }
.legal-toc a:hover span:last-child, .legal-toc a:hover { text-decoration: none; }
.legal-toc__n { font-size: 11px; color: var(--taupe-soft); font-variant-numeric: tabular-nums; }
.legal-body { max-width: 68ch; color: var(--umber); }
.legal-body section { scroll-margin-top: 130px; padding-bottom: 28px; }
.legal-body section + section { padding-top: 28px; border-top: 1px solid var(--line); }
.legal-body h2 { font: 400 22px/1.3 var(--display); color: var(--umber); margin-bottom: 12px; }
.legal-body p, .legal-body li { font-size: 15px; line-height: 1.7; color: var(--taupe); }
.legal-body p + p { margin-top: 10px; }
.legal-body ul { display: grid; gap: 12px; margin: 14px 0; }
.legal-body strong { font-weight: 500; color: var(--umber); }
.legal-body a { color: var(--umber); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .legal { grid-template-columns: 1fr; }
  .legal-head { padding-top: 32px; margin-bottom: 20px; }
  .legal-toc { position: static; margin-bottom: 32px; background: var(--bone); border: 1px solid var(--line); }
  .legal-toc__summary {
    display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer;
    min-height: 56px; padding: 0 18px; font-size: 15px; color: var(--umber);
  }
  .legal-toc__summary::-webkit-details-marker { display: none; }
  .legal-toc__count { margin-left: auto; font-size: 12px; color: var(--taupe-soft); }
  .legal-toc__summary::after {
    content: ""; width: 7px; height: 7px; margin: -4px 2px 0 4px;
    border: solid var(--umber); border-width: 0 1.3px 1.3px 0; transform: rotate(45deg); transition: transform .25s var(--ease);
  }
  .legal-toc[open] .legal-toc__summary::after { transform: translateY(3px) rotate(-135deg); }
  .legal-toc ol { border-top: 1px solid var(--line); gap: 0; }
  .legal-toc li + li { border-top: 1px solid var(--line); }
  .legal-toc a { grid-template-columns: 30px 1fr; padding: 14px 18px; font-size: 14px; color: var(--umber); }
  .legal-toc__n { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .hero__dot.is-active::after { width: 100%; }
}

/* ==========================================================
   Admin (admin.html): orders for the team
   ========================================================== */
.adm { max-width: 1180px; margin: 0 auto; padding: 32px var(--gutter) 80px; }
.adm-gate { max-width: 440px; margin: 40px auto; display: grid; gap: 20px; }
.adm-gate__title, .adm-title { font: 400 var(--text-h3)/1.2 var(--display); color: var(--umber); }
.adm-qr { display: block; width: 180px; height: 180px; background: #fff; padding: 8px; margin: 4px 0; }
.adm-secret code { font-size: 13px; word-break: break-all; }
.adm-enrol { display: grid; gap: 10px; font-size: 14px; }

.adm-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.adm-search { flex: 0 1 320px; }
.adm-note { margin: -12px 0 18px; font-size: 13px; color: var(--umber); }
.adm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm-table th, .adm-table td { text-align: left; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.adm-table thead th { font-size: 12px; font-weight: 400; color: var(--taupe-soft); padding-top: 0; }
.adm-table tbody tr { cursor: pointer; }
.adm-table tbody tr:hover, .adm-table tbody tr:focus-visible { background: var(--bone); outline: none; }
.adm-table tbody th { font-weight: 500; white-space: nowrap; }
.adm-table a { color: var(--umber); }
.adm-sub { display: block; font-size: 12px; color: var(--taupe-soft); }
span.adm-sub { display: inline; }
.adm-loading, .adm-empty { padding: 28px 0; color: var(--taupe-soft); }

.adm-order { display: grid; gap: 14px; outline: none; }
.adm-order > .acct-link { justify-self: start; }
.adm-order__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.adm-meta { font-size: 13px; color: var(--taupe-soft); margin-top: -6px; }
.adm-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 6px; }
.adm-col { display: grid; gap: 20px; }
.adm-box { display: grid; gap: 12px; padding: 22px; background: var(--bone); font-size: 14px; }
.adm-h { font-size: 12px; font-weight: 500; color: var(--taupe-soft); }
.adm-h3 { font: 400 18px/1.3 var(--display); color: var(--umber); }
.adm-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.adm-form { display: grid; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.adm-form .f__input, .adm-search .f__input { background: var(--paper); }
.adm-form .btn { justify-self: start; }
.adm-check { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.adm-lines, .adm-log { display: grid; gap: 8px; }
.adm-lines li, .adm-log li, .adm-sums div { display: flex; justify-content: space-between; gap: 16px; }
.adm-log li > span:last-child { white-space: nowrap; color: var(--taupe-soft); font-size: 13px; }
.adm-sums { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.adm-sums__total { font-weight: 500; color: var(--umber); }
.adm-addr { line-height: 1.6; color: var(--umber); }
.adm-gift { color: var(--umber); }
.adm-gift__note { font-style: italic; }
.adm-error { margin: 0; }

@media (max-width: 860px) {
  .adm-grid { grid-template-columns: 1fr; }
  .adm-table thead { display: none; }
  .adm-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .adm-table th, .adm-table td { padding: 0; border: 0; }
  .adm-table td:nth-child(3), .adm-table td:nth-child(6) { display: none; }
}

/* ==========================================================
   Coming-soon page (soon.html → nsaano.com until the shop opens)
   One screen, no scrolling: logo, the words, the waitlist, the
   footer, stacked and centred.
   ========================================================== */
.launch-page { background: var(--paper); }
.launch {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center;
  height: 100vh; height: 100svh; min-height: 520px;
  padding: 0 var(--gutter); text-align: center;
}
.launch__top { display: flex; align-items: center; height: 96px; }
.launch__mark .logo { height: 16px; width: auto; }

.launch__main { align-self: center; width: 100%; max-width: 34rem; }
.launch__title { font: 400 clamp(30px, 3.6vw, 48px)/1.15 var(--display); letter-spacing: -.01em; color: var(--umber); }
.launch__lede { margin: 18px auto 0; max-width: 32ch; font-size: 17px; line-height: 1.55; color: var(--taupe); }

/* Waitlist: one box, the button inside it */
.launch__form { margin: clamp(36px, 6vh, 56px) auto 0; max-width: 28rem; text-align: left; }
.launch__label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 500; color: var(--umber); text-align: center; }
.launch__field {
  display: flex; height: 56px; padding: 4px;
  background: var(--bone); border: 1px solid var(--line-strong);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.launch__field:focus-within { border-color: var(--umber); box-shadow: 0 0 0 1px var(--umber); }
.launch__field.is-invalid { border-color: var(--k-red); box-shadow: 0 0 0 1px var(--k-red); }
.launch__field input {
  flex: 1; min-width: 0; padding: 0 12px;
  border: 0; background: transparent; outline: none;
  font-size: 16px; color: var(--umber);   /* 16px: phones don't zoom in on focus */
}
.launch__field input::placeholder { color: var(--taupe-soft); }
.launch__submit {
  flex: none; padding: 0 24px;
  background: var(--umber); color: var(--bone);
  font-size: 13px; letter-spacing: .06em;
  transition: background .2s var(--ease);
}
.launch__submit:hover { background: var(--taupe); }
.launch__submit:focus-visible { outline: 1.5px solid var(--umber); outline-offset: 3px; }
.launch__submit:disabled { background: var(--taupe); cursor: progress; }
.launch__msg { min-height: 1.6em; margin-top: 10px; font-size: 13px; color: var(--umber); text-align: center; }
.launch__msg.is-error { color: var(--k-red); }
.launch__form.is-done .launch__field { display: none; }
.launch__form.is-done .launch__msg { margin-top: 0; font-size: 15px; }
.launch__write { margin-top: clamp(36px, 6vh, 56px); font-size: 15px; color: var(--umber); }
.launch__write a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.launch__write a:hover { text-decoration-color: currentColor; }

/* Footer: the two marks, then the credit */
.launch__foot { display: grid; justify-items: center; gap: 6px; padding: 24px 0 32px; }
.launch__social { display: flex; gap: 8px; }
.launch__social a {
  display: grid; place-items: center; width: 40px; height: 40px;   /* 40px tap area, no frame */
  color: var(--umber); transition: color .2s var(--ease);
}
.launch__social a:hover { color: var(--taupe); }
.launch__social svg { display: block; }
.launch__social .ig { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.launch__social .ig .dot { fill: currentColor; stroke: none; }
.launch__social .tt { width: 17px; height: 17px; fill: currentColor; }   /* solid mark reads heavier than the outline, so it's drawn smaller */
.launch__credit { font-size: 12px; letter-spacing: .02em; color: var(--taupe-soft); }

@media (max-width: 600px) {
  .launch { padding: 0 16px; }
  .launch__top { height: 72px; }
  .launch__title { font-size: clamp(28px, 8vw, 34px); }
  .launch__lede { margin-top: 14px; font-size: 16px; }
  .launch__submit { padding: 0 18px; }
  .launch__foot { padding: 16px 0 24px; }
}