/* Boutique Image — storefront.
   Tokens taken from boutiqueimagelb.com: warm sand ground, ink text,
   Marcellus for headings, Jost Light for text, Bebas Neue for the logo,
   and a monospace eyebrow with wide tracking. */
@font-face { font-family: 'Jost'; font-weight: 300; font-style: normal; font-display: swap; src: url('/assets/fonts/jost-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/fonts/jost-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 500; font-style: normal; font-display: swap; src: url('/assets/fonts/jost-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 600; font-style: normal; font-display: swap; src: url('/assets/fonts/jost-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Marcellus'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/fonts/marcellus-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bebas Neue'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/fonts/bebas-neue-latin-400-normal.woff2') format('woff2'); }
:root {
  --bg: #ECE5D8;
  --bg-2: #E5DCCB;
  --card: #E3DAC9;
  --ink: #262529;
  --ink-2: #3a383d;
  --muted: #736C60;
  --tan: #A79C88;
  --tan-2: #8A8072;
  --cream: #F4EFE6;
  --line: rgba(38, 37, 41, .16);
  --line-2: rgba(38, 37, 41, .08);
  --ok: #3f6b4f;
  --bad: #9b2f2f;
  --serif: 'Marcellus', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --logo: 'Bebas Neue', 'Jost', system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --page: 1440px;
  --gut: clamp(16px, 3.2vw, 48px);
  --hdr: 78px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 300 15px/1.6 var(--sans); letter-spacing: .01em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--cream); padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
.muted { color: var(--muted); }
.tiny { font-size: 12.5px; }
.center { text-align: center; }
.u { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
[hidden] { display: none !important; }

/* ---------- type ---------- */
.h1 { font: 400 clamp(32px, 4.2vw, 52px)/1.12 var(--serif); letter-spacing: .02em; margin: 0 0 14px; }
.h2 { font: 400 clamp(22px, 2.3vw, 30px)/1.25 var(--serif); margin: 0; }
.h3 { font: 400 19px/1.3 var(--serif); margin: 26px 0 10px; }
.label { font: 600 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; }
.eyebrow { font: 300 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .34em; color: var(--tan-2); margin: 0 0 18px; }
.eyebrow--light { color: var(--cream); letter-spacing: .4em; font-size: 12px; }
.eyebrow--tan { color: var(--tan); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 14px 40px; border: 1px solid transparent; border-radius: 0;
  font: 400 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .24em;
  transition: background .2s, color .2s, border-color .2s, opacity .2s; white-space: nowrap;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--dark { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn--dark:hover:not(:disabled) { background: #000; }
.btn--cream { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn--ghost { border-color: rgba(244, 239, 230, .7); color: var(--cream); background: transparent; }
.btn--ghost:hover { background: var(--cream); color: var(--ink); }
.btn--line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--line:hover { background: var(--ink); color: var(--cream); }
.btn--block { width: 100%; }
.btn--grow { flex: 1; }
.icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; background: none; border: 0; padding: 0; color: inherit; position: relative; }
.icon-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.3; }

/* ---------- announcement ---------- */
.marquee { background: var(--ink); color: var(--bg); overflow: hidden; height: 34px; display: flex; align-items: center; }
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee__group { display: flex; }
.marquee__item { font: 300 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .28em; padding: 0 44px; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 30; background: rgba(236, 229, 216, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-2); }
.hdr__row { max-width: var(--page); margin: 0 auto; height: var(--hdr); padding: 0 var(--gut); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.hdr__left { display: flex; align-items: center; gap: 4px; }
.hdr__right { display: flex; justify-content: flex-end; align-items: center; gap: 2px; }
.hdr__nav { display: flex; gap: 26px; align-items: center; }
.hdr__nav > a, .hdr__droplink { font: 400 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .14em; padding: 30px 0; border-bottom: 1px solid transparent; }
.hdr__nav > a:hover, .hdr__droplink:hover { border-bottom-color: var(--ink); }
/* ---------- the Shop menu: a full-width panel under the header ---------- */
.hdr__drop { position: static; }
.hdr__droplink { display: inline-flex; align-items: center; gap: 7px; }
.hdr__droplink::after { content: ''; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.hdr__drop.open .hdr__droplink::after { transform: translateY(1px) rotate(-135deg); }
.hdr__drop.open .hdr__droplink { border-bottom-color: var(--ink); }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-top: 1px solid var(--line-2);
  box-shadow: 0 24px 40px -18px rgba(38, 37, 41, .18); visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s linear .25s; pointer-events: none; }
/* the page underneath dims a little while the menu is open */
.mega::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; background: rgba(38, 37, 41, .18); pointer-events: none; }
.hdr__drop.open .mega, .hdr__drop:focus-within .mega { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; pointer-events: auto; }
.mega__in { max-width: var(--page); margin: 0 auto; padding: 38px var(--gut) 44px; display: grid; grid-template-columns: minmax(170px, 1fr) minmax(260px, 2fr) minmax(0, 2.2fr); gap: clamp(28px, 4vw, 64px); }
.mega__h { margin: 0 0 18px; font: 400 10.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.mega__big { display: block; width: fit-content; font: 400 26px/1.15 var(--serif); padding: 4px 0 10px; }
.mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px 32px; }
.mega__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega__list a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; font: 400 16px/1.3 var(--serif); border-bottom: 1px solid var(--line-2); }
.mega__n { font: 300 11px/1 var(--sans); color: var(--tan-2); letter-spacing: .06em; }
.mega__big, .mega__list a { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s ease, color .2s; }
.mega__big:hover { background-size: 100% 1px; }
.mega__list a:hover { color: var(--ink-2); background-size: 100% 1px; }
.mega__feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; }
.mega__tile { position: relative; display: block; aspect-ratio: 4 / 5; max-height: 300px; background: var(--card); overflow: hidden; }
.mega__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.mega__tile:hover img { transform: scale(1.04); }
.mega__tile::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(180deg, transparent, rgba(38, 37, 41, .55)); }
.mega__tile span { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; color: var(--cream); font: 400 13px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
@media (max-width: 1100px) { .mega__in { grid-template-columns: minmax(150px, 1fr) minmax(240px, 2fr) minmax(0, 1.4fr); } .mega__feat { grid-template-columns: 1fr; } .mega__feat .mega__tile:nth-child(2) { display: none; } }
@media (prefers-reduced-motion: reduce) { .mega { transition: none; } }
.logo { font: 400 clamp(26px, 2.6vw, 34px)/1 var(--logo); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.logo--light { color: var(--cream); }
.hdr__burger, .hdr__search-m { display: none; }
.bagbtn__n { position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--ink); color: var(--cream); font: 500 10px/17px var(--sans); text-align: center; padding: 0 4px; }
@media (max-width: 900px) {
  :root { --hdr: 62px; }
  .hdr__nav, .hdr__search-d { display: none; }
  .hdr__burger, .hdr__search-m { display: inline-grid; }
}

/* ---------- drawers ---------- */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(38, 37, 41, .38); animation: fade .2s ease; }
.drawer__panel { position: absolute; background: var(--bg); display: flex; flex-direction: column; animation: slideR .28s cubic-bezier(.2,.8,.2,1); }
.drawer--right .drawer__panel { top: 0; right: 0; bottom: 0; width: min(440px, 100%); }
.drawer--left .drawer__panel { top: 0; left: 0; bottom: 0; width: min(360px, 88%); padding: 70px 28px 28px; animation-name: slideL; }
.drawer--top .drawer__panel { top: 0; left: 0; right: 0; padding: 18px var(--gut); animation-name: slideT; }
.drawer__x { position: absolute; top: 14px; right: 14px; }
@keyframes fade { from { opacity: 0; } }
@keyframes slideR { from { transform: translateX(40px); opacity: 0; } }
@keyframes slideL { from { transform: translateX(-40px); opacity: 0; } }
@keyframes slideT { from { transform: translateY(-20px); opacity: 0; } }
.mnav a { display: block; font: 400 22px/1.2 var(--serif); padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.mnav__h { margin: 26px 0 4px; font: 400 10.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.mnav__cats a { font-size: 18px; padding: 10px 0; }
.mnav__small a { font: 300 15px/1.3 var(--sans); padding: 10px 0; border-bottom: 0; }
.searchbar { display: flex; align-items: center; gap: 12px; max-width: var(--page); margin: 0 auto; border-bottom: 1px solid var(--ink); }
.searchbar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; flex: none; }
.searchbar input { flex: 1; border: 0; background: none; padding: 14px 0; font: 400 20px var(--serif); outline: none; min-width: 0; }

.cart__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line-2); }
.cart__head h2 { font: 400 22px var(--serif); margin: 0; }
.cart__body { flex: 1; overflow-y: auto; padding: 8px 24px; }
.cart__foot { padding: 20px 24px 24px; border-top: 1px solid var(--line-2); }
.cart__row { display: flex; justify-content: space-between; font-size: 16px; margin: 6px 0; }
.cart__row b { font-weight: 500; }
.cart__free { font-size: 13px; margin-bottom: 10px; }
.cart__bar { height: 3px; background: var(--line); margin-top: 6px; }
.cart__bar i { display: block; height: 100%; background: var(--ink); }
.cline { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-2); align-items: start; }
.cline img, .cline__ph { width: 76px; height: 95px; object-fit: contain; background: var(--card); }
.cline__t { font: 400 15px/1.3 var(--serif); }
.cline__v { font-size: 13px; color: var(--muted); }
.cline__err { font-size: 12.5px; color: var(--bad); margin-top: 4px; }
.cline__q { display: inline-flex; align-items: center; border: 1px solid var(--line); margin-top: 8px; }
.cline__q button { width: 28px; height: 28px; border: 0; background: none; }
.cline__q span { min-width: 22px; text-align: center; font-size: 13px; }
.cline__rm { background: none; border: 0; font-size: 12px; color: var(--muted); text-decoration: underline; padding: 0; margin-left: 10px; }
.cline__p { font-size: 14px; white-space: nowrap; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: min(86vh, 860px); display: grid; place-items: center; text-align: center;
  color: var(--cream); background: #4a4340 var(--hero) center 28% / cover no-repeat; isolation: isolate;
}
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(38,37,41,.18), rgba(38,37,41,.42) 60%, rgba(38,37,41,.55)); z-index: -1; }
.hero__in { padding: 80px var(--gut); max-width: 900px; }
.hero h1 { font: 400 clamp(44px, 8.2vw, 104px)/1 var(--serif); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 26px; text-wrap: balance; }
.hero p { font: 300 15px/1.6 var(--sans); letter-spacing: .06em; max-width: 440px; margin: 0 auto 34px; opacity: .95; }
@media (max-width: 600px) { .hero { min-height: 78vh; background-position: 56% 20%; } }

/* ---------- sections ---------- */
.sec { max-width: var(--page); margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--gut); }
.sec--top { padding-top: 28px; }
.sec__head { margin-bottom: clamp(24px, 3vw, 40px); }
.center .btn, .center > .btn { margin-top: 40px; }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px) clamp(10px, 1.4vw, 20px); }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card__img { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--card); overflow: hidden; }
.card__img img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .45s ease, transform .8s ease; }
/* the second photo covers the first completely (its own background, full frame) and fades in over it */
.card__img2 { position: absolute; inset: 0; opacity: 0; background: var(--card); }
@media (hover: hover) {
  .card:hover .card__img2 { opacity: 1; }
  .card:hover .card__img:not(.has-2) .card__img1 { transform: scale(1.03); }
}
.card__ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; font: 400 18px var(--serif); color: var(--tan-2); }
.card__info { text-align: center; padding: 14px 6px 0; }
.card__info h3 { font: 400 15px/1.35 var(--serif); margin: 0 0 4px; letter-spacing: .02em; }
.price { margin: 0; font-size: 13px; color: var(--muted); letter-spacing: .02em; }
.price s, .pdp__price s { color: var(--tan); margin-left: 6px; }
.card__dots { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
.card__dots i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.card.is-out .card__img img { opacity: .55; }
.tag { position: absolute; left: 10px; top: 10px; background: var(--cream); color: var(--ink); font: 400 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; padding: 7px 9px; }
.tag--sale { background: var(--ink); color: var(--cream); }
.empty { padding: 40px 0; color: var(--muted); }

.band { background: var(--ink); color: var(--cream); text-align: center; padding: clamp(64px, 9vw, 120px) var(--gut); }
.band__text { font: 400 clamp(24px, 3vw, 36px)/1.35 var(--serif); max-width: 760px; margin: 0 auto 36px; text-wrap: balance; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { position: relative; aspect-ratio: 4 / 5; background: var(--card); overflow: hidden; display: block; }
.tile img { width: 100%; height: 100%; object-fit: contain; transition: transform .8s ease; }
.tile:hover img { transform: scale(1.03); }
.tile::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgba(38,37,41,.55)); }
.tile span { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 1; text-align: center; color: var(--cream); font: 400 15px var(--serif); text-transform: uppercase; letter-spacing: .14em; }

.news { background: var(--bg-2); text-align: center; padding: clamp(56px, 8vw, 104px) var(--gut); }
.news .h1 { margin-bottom: 30px; }
.inline-form { display: flex; max-width: 640px; margin: 0 auto; }
.inline-form input { flex: 1; min-width: 0; border: 1px solid var(--ink); border-right: 0; background: transparent; padding: 0 18px; height: 52px; outline: none; }
.inline-form .btn { min-height: 52px; }
.inline-form--light input { background: rgba(255,255,255,.25); }
.news__done { margin-top: 18px; }
@media (max-width: 520px) { .inline-form { flex-direction: column; gap: 10px; } .inline-form input { border-right: 1px solid var(--ink); } }

/* ---------- footer ---------- */
.ftr { background: var(--ink); color: var(--cream); padding: clamp(56px, 7vw, 88px) var(--gut) 34px; }
.ftr__grid { max-width: var(--page); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.ftr__brand p { color: rgba(244,239,230,.8); max-width: 340px; margin-top: 22px; }
.ftr .eyebrow { color: var(--tan); margin-bottom: 18px; letter-spacing: .24em; font-size: 12px; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin: 0 0 10px; color: rgba(244,239,230,.86); }
.ftr a:hover { color: #fff; }
.ftr__bottom { max-width: var(--page); margin: 48px auto 0; padding-top: 26px; border-top: 1px solid rgba(244,239,230,.14); display: flex; justify-content: space-between; gap: 20px; font: 300 11px var(--mono); text-transform: uppercase; letter-spacing: .2em; color: #8A8378; }
@media (max-width: 800px) { .ftr__grid { grid-template-columns: 1fr 1fr; } .ftr__brand { grid-column: 1 / -1; } .ftr__bottom { flex-direction: column; } }

.wa { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 58px; height: 58px; border-radius: 50%; background: #4fc56a; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.wa svg { width: 32px; height: 32px; }

/* ---------- popup ---------- */
.popup { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; }
.popup__scrim { position: absolute; inset: 0; background: rgba(38,37,41,.45); }
.popup__card { position: relative; background: var(--ink); color: var(--bg); max-width: 520px; width: 100%; padding: 34px 30px 30px; animation: fade .3s ease; }
.popup__card .eyebrow { color: var(--tan); }
.popup__card h2 { font: 400 25px/1.25 var(--serif); margin: 0 0 12px; }
.popup__card p { font-size: 13.5px; color: rgba(236,229,216,.85); }
.popup__card .inline-form { margin-top: 18px; }
.popup__card .inline-form input { border-color: var(--bg); color: var(--bg); background: #fff1; }
.popup__x { position: absolute; top: 8px; right: 8px; color: var(--bg); }

/* ---------- collection ---------- */
.crumbs { font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.crumbs a:hover { color: var(--ink); }
.coll__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.filters { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 0; margin: 14px 0 10px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--colors { margin-bottom: 22px; }
.chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); padding: 7px 14px; font-size: 12.5px; letter-spacing: .04em; }
.chip i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.chip.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.sort label { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; display: flex; align-items: center; gap: 10px; }
.sort select { border: 1px solid var(--line); background: transparent; padding: 9px 30px 9px 12px; font-size: 13.5px; text-transform: none; letter-spacing: 0; }
.pager { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 48px; }
.searchline { display: flex; max-width: 560px; margin: 8px 0 16px; }
.searchline input { flex: 1; border: 1px solid var(--ink); border-right: 0; background: transparent; padding: 0 14px; min-width: 0; }

/* ---------- product ---------- */
.pdp { max-width: var(--page); margin: 0 auto; padding: 26px var(--gut) 60px; }
.pdp__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.gallery { position: sticky; top: calc(var(--hdr) + 16px); }
.gallery__main { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery__main::-webkit-scrollbar { display: none; }
.gallery__slide { margin: 0; scroll-snap-align: start; aspect-ratio: 4 / 5; background: var(--card); position: relative; }
.gallery__slide img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: thin; }
.thumb { flex: none; width: 70px; aspect-ratio: 4 / 5; padding: 0; border: 1px solid transparent; background: var(--card); }
.thumb.on { border-color: var(--ink); }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp__title { font: 400 clamp(28px, 3vw, 38px)/1.15 var(--serif); margin: 0 0 10px; letter-spacing: .02em; }
.pdp__price { font-size: 19px; margin: 0 0 4px; }
.opt { border: 0; padding: 0; margin: 26px 0 0; }
.opt legend { font-size: 12.5px; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 12px; padding: 0; }
.opt legend b { font-weight: 400; text-transform: none; letter-spacing: .02em; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 38px; height: 38px; border-radius: 50%; border: 1px solid transparent; padding: 3px; background: none; position: relative; }
.swatch i { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.swatch.on { border-color: var(--ink); }
.swatch.is-out::after { content: ''; position: absolute; left: 50%; top: 3px; bottom: 3px; width: 1px; background: var(--ink); transform: rotate(45deg); opacity: .7; }
.sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.size { min-width: 52px; height: 44px; padding: 0 14px; border: 1px solid var(--line); background: transparent; font-size: 13.5px; letter-spacing: .04em; }
.size:hover { border-color: var(--ink); }
.size.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.size.is-out { color: var(--tan); text-decoration: line-through; border-style: dashed; }
.stocknote { min-height: 22px; font-size: 13px; margin: 18px 0 8px; color: var(--muted); }
.stocknote.low { color: var(--bad); }
.buy__row { display: flex; gap: 10px; margin-bottom: 10px; }
.qty { display: flex; border: 1px solid var(--ink); }
.qty button { width: 40px; border: 0; background: none; font-size: 18px; }
.qty input { width: 40px; border: 0; background: none; text-align: center; outline: none; }
.wa-ask { margin-bottom: 26px; letter-spacing: .14em; }
.acc details { border-top: 1px solid var(--line); }
.acc details:last-child { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; padding: 16px 0; font-size: 12.5px; text-transform: uppercase; letter-spacing: .14em; display: flex; justify-content: space-between; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; font-size: 18px; line-height: 1; }
.acc details[open] summary::after { content: '−'; }
.acc__b { padding: 0 0 14px; color: var(--ink-2); }
.acc__b p { margin: 0 0 10px; }
@media (max-width: 860px) {
  .pdp__grid { grid-template-columns: 1fr; }
  .gallery { position: static; margin: 0 calc(var(--gut) * -1); }
  .gallery__thumbs { padding: 0 var(--gut); }
}

/* ---------- checkout ---------- */
.is-checkout .wa { display: none; }
.co { max-width: 1180px; margin: 0 auto; padding: 34px var(--gut) 80px; }
.co__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
.co fieldset { border: 0; padding: 0; margin: 0 0 30px; }
.co legend { font: 400 20px var(--serif); margin-bottom: 14px; padding: 0; }
.co label, .stack label { display: block; font-size: 12.5px; letter-spacing: .06em; margin-bottom: 14px; }
.co input:not([type=radio]), .co textarea, .stack input {
  display: block; width: 100%; margin-top: 6px; border: 1px solid var(--line); background: rgba(255,255,255,.35);
  padding: 13px 14px; font-size: 15px; letter-spacing: 0; outline: none; border-radius: 0;
}
.co input:focus, .co textarea:focus, .stack input:focus { border-color: var(--ink); background: rgba(255,255,255,.6); }
.co .bad { border-color: var(--bad) !important; }
.pay { display: flex !important; gap: 14px; align-items: flex-start; border: 1px solid var(--line); padding: 16px; margin-bottom: 10px !important; cursor: pointer; }
.pay:has(input:checked) { border-color: var(--ink); background: rgba(255,255,255,.35); }
.pay input { margin-top: 4px; accent-color: var(--ink); }
.pay b { display: block; font-weight: 500; font-size: 14.5px; letter-spacing: .02em; }
.pay small { display: block; color: var(--muted); font-size: 13px; letter-spacing: 0; margin-top: 2px; }
.co__sum { background: var(--bg-2); padding: 28px; position: sticky; top: calc(var(--hdr) + 16px); }
.co__sum .h3 { margin-top: 0; }
.co__err { background: #f3e3dd; border-left: 3px solid var(--bad); color: #6f2222; padding: 12px 14px; font-size: 14px; }
.code { display: flex; margin: 16px 0 4px; }
.code input { flex: 1; min-width: 0; border: 1px solid var(--line); border-right: 0; background: rgba(255,255,255,.35); padding: 0 12px; height: 46px; outline: none; text-transform: uppercase; }
.code .btn { min-height: 46px; padding: 0 18px; }
.co .code input { margin-top: 0; height: 46px; padding: 0 12px; display: block; }
@media (max-width: 860px) { .is-pdp .wa { display: none; } }
.sum { margin: 16px 0 20px; }
.sum div { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14.5px; }
.sum dt, .sum dd { margin: 0; }
.sum__total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px !important; font-size: 18px !important; }
.sum__total dd { font-weight: 500; }
.hp { position: absolute; left: -5000px; height: 1px; overflow: hidden; }
.lines { list-style: none; padding: 0; margin: 0; }
.lines li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.lines img, .lines__ph { width: 56px; height: 70px; object-fit: contain; background: var(--card); display: block; }
@media (max-width: 860px) { .co__grid { grid-template-columns: 1fr; } .co__sum { position: static; order: -1; } }

/* ---------- order / misc ---------- */
.ord { max-width: 980px; margin: 0 auto; padding: 40px var(--gut) 80px; }
.ordno { font-family: var(--sans); font-weight: 400; letter-spacing: .02em; }
.ord__status { display: inline-block; font: 300 11px var(--mono); text-transform: uppercase; letter-spacing: .26em; border: 1px solid var(--ink); padding: 8px 12px; }
.ord__status.is-closed { border-color: var(--bad); color: var(--bad); }
.ord__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 50px; margin: 30px 0; }
@media (max-width: 800px) { .ord__grid { grid-template-columns: 1fr; gap: 10px; } }
.steps { list-style: none; padding: 0; margin: 26px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: s; }
.steps li { border-top: 3px solid var(--line); padding-top: 10px; font-size: 12.5px; color: var(--muted); }
.steps li.done { border-color: var(--ink); color: var(--ink); }
.steps li.now { font-weight: 500; }
.steps small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 300; margin-top: 2px; }
.ord__eta { font-size: 14.5px; margin: -8px 0 20px; }
.note-box { background: var(--bg-2); border-left: 3px solid var(--ink); padding: 16px 20px; margin: 22px 0; }
.note-box .h3 { margin-top: 0; }
.narrow { max-width: 620px; margin: 0 auto; padding: 56px var(--gut) 90px; }
.stack { display: grid; gap: 6px; margin-top: 18px; }
.testbanner { background: #f6d77c; color: #3d3000; font: 500 12px var(--mono); letter-spacing: .14em; padding: 10px 14px; text-align: center; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 80; background: var(--ink); color: var(--cream); padding: 13px 22px; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.2); max-width: calc(100% - 32px); }

/* ---------- accounts ---------- */
.linkbtn { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 13.5px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; justify-self: center; }
.auth { padding: 56px var(--gut) 90px; }
.auth__card { max-width: 440px; margin: 0 auto; }
.auth .h1 { margin-bottom: 10px; }
.auth .stack label { margin-bottom: 8px; }
.auth .stack[hidden] { display: none; }
.auth__ch { display: grid; gap: 10px; margin-top: 6px; }
.auth__ch .btn { width: 100%; }
.auth__fine { margin-top: 30px; border-top: 1px solid var(--line); padding-top: 14px; }
.otp { font: 400 26px var(--mono) !important; letter-spacing: .5em !important; text-align: center; padding: 12px 0 12px .5em !important; }
.devcode { background: #f6d77c; color: #3d3000; padding: 10px 14px; font-size: 14px; }
.who { display: flex; justify-content: space-between; align-items: center; gap: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.35); padding: 12px 16px; margin-bottom: 16px; }
.who .linkbtn { justify-self: auto; white-space: nowrap; }
.acct { max-width: 1100px; margin: 0 auto; padding: 40px var(--gut) 90px; }
.acct__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 22px; }
.acct__head .h1 { margin: 4px 0 6px; }
.acct__head p { margin: 0; }
.acct__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 26px 0 6px; }
.acct__card { background: var(--bg-2); padding: 18px 20px; display: grid; gap: 4px; }
.acct__card b { font: 300 30px var(--sans); letter-spacing: .02em; line-height: 1.1; }
.acct__card b.ordno { font: 400 22px var(--sans); letter-spacing: .06em; }
.acct__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); margin-top: 26px; align-items: start; }
.acct__form { background: var(--bg-2); padding: 24px; margin-top: 0; }
.acct__form .h3 { margin: 0 0 8px; }
.acct__form input:disabled { color: var(--muted); }
.olist { list-style: none; padding: 0; margin: 0 0 30px; }
.olist li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 13px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.olist li > :nth-child(2) { grid-column: 1; font-size: 13px; }
.olist__st { grid-column: 2; grid-row: 1; justify-self: end; font: 300 10.5px var(--mono); text-transform: uppercase; letter-spacing: .2em; }
.olist__t { grid-column: 2; grid-row: 2; justify-self: end; font-weight: 400; }
@media (max-width: 820px) { .acct__grid { grid-template-columns: 1fr; } }
.auth .bad, .acct .bad { border-color: var(--bad) !important; }

/* ---------- photo zoom ---------- */
.gallery__slide img[data-full] { cursor: zoom-in; }

/* ---------- the full-screen photo viewer (store.js viewer) ---------- */
.pv { position: fixed; inset: 0; z-index: 95; touch-action: none; overscroll-behavior: contain; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; animation: pvIn .18s ease; cursor: zoom-in; }
.pv:focus { outline: none; }
.pv.zoomed { cursor: grab; } .pv.zoomed.moving { cursor: grabbing; }
.pv.out { opacity: 0; transition: opacity .16s ease; }
@keyframes pvIn { from { opacity: 0; } }
.pv__bg { position: absolute; inset: 0; background: var(--card); }
.pv__track { position: absolute; inset: 0; display: flex; }
.pv__slide { flex: 0 0 100%; height: 100%; position: relative; overflow: hidden; }
.pv__zoom { position: absolute; inset: 0; transform-origin: 50% 50%; }
/* the layers are promoted only while something moves; afterwards the browser redraws them sharp at the new size */
.pv.moving .pv__track, .pv.moving .pv__zoom, .pv.moving .pv__slide { will-change: transform; }
.pv__zoom img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; -webkit-user-drag: none; }
.pv__x { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 14px; z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: var(--ink); color: var(--cream); font-size: 26px; line-height: 1; cursor: pointer; }
.pv__n { position: absolute; top: calc(24px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 2; background: rgba(38,37,41,.72);
  color: var(--cream); font-size: 12.5px; padding: 5px 12px; border-radius: 20px; pointer-events: none; font-variant-numeric: tabular-nums; }
.pv__nav { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: rgba(38,37,41,.72); color: var(--cream); font-size: 30px; line-height: 1; cursor: pointer; }
.pv__nav:disabled { opacity: .25; cursor: default; }
.pv__prev { left: 16px; } .pv__next { right: 16px; }
@media (hover: hover) and (pointer: fine) { .pv__nav { display: grid; place-items: center; } }
.pv__hint { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); margin: 0; z-index: 2;
  background: rgba(38,37,41,.8); color: var(--cream); font-size: 12.5px; padding: 7px 14px; border-radius: 20px; pointer-events: none; white-space: nowrap;
  transition: opacity .4s ease; }
.pv__hint.gone, .pv.zoomed .pv__hint { opacity: 0; }

/* ---------- phones: quick taps, light scrolling ---------- */
html { touch-action: manipulation; }                 /* no waiting to see whether a tap is a double-tap */
@media (hover: none) {
  /* a blurred see-through header is redrawn on every scrolled frame: on a phone, a solid one */
  .hdr { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .card__img2 { display: none; }
}