/* =============================================================================
   HEAVY CLOTH — STOREFRONT STYLES
   Black ground, bone type, blood accent. Hairlines instead of shadows,
   square corners, heavy condensed display type.
   ============================================================================= */

:root {
  --ink:      #08080a;
  --ink-2:    #0e0e11;
  --panel:    #131317;
  --line:     #232329;
  --line-2:   #35353d;
  --bone:     #ece8e1;
  --bone-dim: #b6b2ac;
  --muted:    #83838c;
  --blood:    #c2131c;
  --blood-lt: #e8323b;

  --shell: 1560px;
  --gut: clamp(16px, 3.2vw, 44px);
  --hdr: 86px;

  --display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--blood); color: #fff; }

:focus-visible { outline: 2px solid var(--blood-lt); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* film grain over everything */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .045; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- type ---------------------------------------------------------------- */
.h-xl, .h-lg, .h-md, .h-sm {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .92;
  margin: 0;
}
.h-xl { font-size: clamp(46px, 9.5vw, 148px); }
.h-lg { font-size: clamp(30px, 5.2vw, 68px); }
.h-md { font-size: clamp(21px, 2.6vw, 34px); }
.h-sm { font-size: clamp(16px, 1.5vw, 20px); }

.eyebrow {
  font-family: var(--display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 11px;
  color: var(--muted);
}
.eyebrow.blood { color: var(--blood-lt); }

.lede { color: var(--bone-dim); font-size: 16px; max-width: 62ch; }

/* --- layout -------------------------------------------------------------- */
.shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--gut); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* --- announcement -------------------------------------------------------- */
.ticker {
  background: var(--blood);
  color: #fff;
  overflow: hidden;
  height: 30px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 60;
}
.ticker__track { display: flex; gap: 56px; white-space: nowrap; animation: slide 34s linear infinite; padding-left: 56px; }
.ticker span {
  font-family: var(--display); font-weight: 500;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
}
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; justify-content: center; width: 100%; padding-left: 0; }
}

/* --- header -------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 55;
  height: var(--hdr);
  display: flex; align-items: center;
  background: rgba(8,8,10,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.hdr__in { display: flex; align-items: center; gap: 20px; width: 100%; }
.hdr__nav { display: flex; gap: 26px; flex: 1; }
.hdr__nav a, .hdr__act button {
  font-family: var(--display); font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; font-size: 12px;
  color: var(--bone-dim);
  transition: color .18s var(--ease);
  position: relative;
}
.hdr__nav a:hover, .hdr__act button:hover { color: var(--bone); }
.hdr__nav a.on { color: var(--bone); }
.hdr__nav a.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--blood);
}
.hdr__logo { flex: 0 0 auto; display: block; }
.hdr__logo img { height: 58px; width: auto; opacity: .97; }
.hdr__act { display: flex; gap: 22px; flex: 1; justify-content: flex-end; align-items: center; }
.cart-btn { display: inline-flex; align-items: center; gap: 7px; }
.cart-count {
  min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--blood); color: #fff;
  font-family: var(--display); font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0;
}
.cart-count[data-empty="1"] { background: var(--line-2); color: var(--bone-dim); }
.burger { display: none; }

@media (max-width: 860px) {
  :root { --hdr: 74px; }
  .hdr__nav { display: none; }
  .burger { display: inline-flex; }
  .hdr__logo { flex: 1; text-align: center; }
  .hdr__logo img { height: 46px; margin-inline: auto; }
  .hdr__act { flex: 0 0 auto; }
}

/* mobile nav sheet */
.msheet {
  /* must outrank the scrim (78) and drawer (80) — it is the topmost surface */
  position: fixed; inset: 0; z-index: 84;
  background: var(--ink);
  transform: translateY(-100%);
  padding: 24px var(--gut);
  display: flex; flex-direction: column;
  /* The links are taller than the panel on a short screen — a phone with the
     keyboard open, say — and sliding the panel up by its own height does not
     move the overflow with it. Without this the menu spills down over the
     page whenever the viewport shrinks. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* and when it is closed it should not be paintable or tappable at all */
  visibility: hidden;
  transition: transform .38s var(--ease), visibility 0s .38s;
}
.msheet.open {
  transform: none;
  visibility: visible;
  transition: transform .38s var(--ease), visibility 0s 0s;
}
.msheet__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 26px; padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.msheet__top img { height: 34px; width: auto; }
.msheet__top button { font-size: 12px; letter-spacing: .18em; }
.msheet a {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(26px, 8vw, 36px); letter-spacing: .01em; padding: 12px 0;
  border-bottom: 1px solid var(--line);
  transition: color .18s var(--ease), padding-left .18s var(--ease);
}
.msheet a:active { color: var(--blood-lt); padding-left: 8px; }
.msheet__foot {
  margin-top: auto; padding-top: 24px;
  font-family: var(--display); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
}

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display); font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; font-size: 12px;
  padding: 15px 30px;
  /* primary: blood by default, flips to bone on hover */
  border: 1px solid var(--blood);
  background: var(--blood); color: #fff;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  width: fit-content;
}
.btn:hover, .btn:focus-visible { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--bone); border-color: var(--line-2); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--bone); color: var(--ink); border-color: var(--bone); }
/* kept as an explicit alias so every primary action reads the same way */
.btn--blood { background: var(--blood); border-color: var(--blood); color: #fff; }
.btn--blood:hover, .btn--blood:focus-visible { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.btn--full { width: 100%; }
.btn[disabled] { opacity: .38; pointer-events: none; }

/* --- hero ---------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  min-height: min(78vh, 760px);
  display: flex; align-items: center; justify-content: center;
}
/* --p is written by the scroll handler: 0 at the top of the page, 1 once the
   hero has scrolled past. Extra height top and bottom gives the parallax
   somewhere to travel without exposing an edge. */
.hero { --p: 0; }
.hero__img {
  position: absolute; inset: -14% 0; will-change: transform;
  transform: translate3d(0, calc(var(--p) * 11%), 0) scale(calc(1 + var(--p) * .1));
}
.hero__img img { width: 100%; height: 100%; object-fit: cover; opacity: .62; filter: grayscale(.28) contrast(1.04); }

/* the monument sinks into black behind the mark on the way out */
.hero__dark {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(78% 62% at 50% 44%, transparent 0%, rgba(8,8,10,.55) 62%, rgba(8,8,10,.96) 100%),
    linear-gradient(180deg, rgba(8,8,10,.5) 0%, transparent 30%, rgba(8,8,10,.85) 100%);
  opacity: calc(var(--p) * var(--p) * .62);
}
/* legibility scrim over the photo, under the mark */
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  /* broad and even — a tight radial reads as a visible disc behind the mark */
  background:
    radial-gradient(115% 100% at 50% 46%, rgba(8,8,10,.58) 0%, rgba(8,8,10,.44) 50%, rgba(8,8,10,.22) 100%),
    linear-gradient(180deg, rgba(8,8,10,.62) 0%, rgba(8,8,10,.10) 34%, rgba(8,8,10,.95) 100%);
}

.hero__in {
  position: relative; width: 100%;
  padding-block: clamp(34px, 5vh, 60px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* --- the seal ------------------------------------------------------------
   The mark, a breathing halo behind it, and a tone layer masked to the
   artwork's own alpha. Everything animated here is transform/opacity only, so
   it stays on the compositor and never triggers layout or paint.
   -------------------------------------------------------------------- */
.seal {
  position: relative;
  width: min(88vw, 660px);
  aspect-ratio: 3000 / 2278;        /* reserved up front — no layout shift */
  margin-bottom: clamp(10px, 2vh, 22px);
  animation: sealIn 1.05s cubic-bezier(.16,.84,.3,1) both;
}
.seal__tilt {
  position: absolute; inset: 0;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
  transform-style: preserve-3d;
}
.seal__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  /* shadow hugs the strokes for legibility — a wide one paints a dark disc
     around the mark and makes it read as a sticker on the photo */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.95)) drop-shadow(0 0 10px rgba(0,0,0,.65));
}
/* --- ink texture --------------------------------------------------------
   The supplied artwork is flat, pure white. Two things follow from that: it
   reads as vector rather than printed ink.

   This layer fixes both. It is masked by the artwork's own alpha, so the
   silhouette is exactly the file the client sent — only the fill changes.
   Three stacked images: screen-print speckle, a faint squeegee streak, and a
   vertical tone that leaves the tops bright and lets the drips run darker,
   the way pulled ink actually behaves.
   -------------------------------------------------------------------- */
.seal__grain {
  /* The breakup is baked into mark-ink.webp (tools/distress.py), because it
     has to know where the outline is and CSS noise does not. All that is left
     here is a whisper of tone down the drips -- deliberately no speckle. */
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-size: contain;      mask-size: contain;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  background-image:
    linear-gradient(177deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,.05) 66%,
                    rgba(0,0,0,.11) 86%, rgba(0,0,0,.16) 100%);
  opacity: 1;
}

/* light behind the halo, breathing */
.seal__glow {
  position: absolute; left: 50%; top: 44%;
  width: 92%; height: 78%;
  transform: translate(-50%, -50%) translateZ(-30px);
  background: radial-gradient(ellipse at center, rgba(230,226,218,.30) 0%, rgba(230,226,218,.09) 46%, transparent 72%);
  animation: halo 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sealIn {
  from { opacity: 0; transform: scale(1.075) translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes halo {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}

.hero__row {
  display: flex; flex-direction: column; gap: 16px; align-items: center;
  animation: riseIn .75s .5s cubic-bezier(.16,.84,.3,1) both;
}
@keyframes riseIn {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}

/* very slow drift on the mountain behind it */
.hero__img img { animation: drift 32s ease-in-out infinite alternate; }
@keyframes drift {
  from { transform: scale(1.005); }
  to   { transform: scale(1.055) translate3d(-1%, -1%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .seal, .hero__row { animation: none; }
  .seal__glow, .hero__img img { animation: none; }
  .seal__glow { opacity: .7; }
  .seal__tilt { transition: none; transform: none; }
}
.hero__note {
  color: var(--bone-dim); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; font-family: var(--display);
}
@media (max-width: 620px) {
  .hero { min-height: min(74vh, 620px); }
  .seal { width: min(92vw, 430px); }
}

/* --- section headers ----------------------------------------------------- */
.sec { padding-block: clamp(48px, 7vw, 96px); }
.sec__hd {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 26px; flex-wrap: wrap;
}
.sec__hd a { font-family: var(--display); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: var(--bone-dim); border-bottom: 1px solid var(--line-2); padding-bottom: 3px; }
.sec__hd a:hover { color: var(--bone); border-color: var(--bone); }

/* --- product grid -------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
/* A drop is exactly four pieces, so pin four columns here rather than letting
   auto-fill choose five on a wide monitor and leave an empty cell showing the
   grid's own background through the band. */
.grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) { .grid, .grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .grid, .grid--four { grid-template-columns: 1fr; } }
.card { background: var(--ink); position: relative; display: flex; flex-direction: column; }
.card__top { position: relative; overflow: hidden; }
.card__media { display: block; position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--ink-2); }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity .45s var(--ease), transform .7s var(--ease);
}
.card__media img.alt { position: absolute; inset: 0; opacity: 0; }
.card:hover .card__media img.alt { opacity: 1; }
.card:hover .card__media img.base { transform: scale(1.03); }
.card__badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--display); font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--blood); color: #fff; padding: 4px 8px;
}
.card__badge--out { background: var(--ink); color: var(--bone-dim); border: 1px solid var(--line-2); }
.card__body { padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 3px; }
.card__title { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 16px; letter-spacing: .02em; line-height: 1.1; }
.card__sub { color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.card__price { font-family: var(--display); font-size: 14px; letter-spacing: .05em; margin-top: 5px; }
.card__price s { color: var(--muted); margin-right: 7px; }

/* quick add strip */
.qa {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; gap: 1px; background: var(--line);
  transform: translateY(101%); transition: transform .3s var(--ease);
}
.card:hover .qa, .card:focus-within .qa { transform: none; }
.qa button {
  flex: 1; padding: 11px 2px; background: rgba(8,8,10,.94);
  font-family: var(--display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bone-dim);
}
.qa button:hover:not([disabled]) { background: var(--blood); color: #fff; }
.qa button[disabled] { color: #4a4a51; text-decoration: line-through; cursor: not-allowed; }
@media (hover: none) { .qa { display: none; } }

/* --- filter bar ---------------------------------------------------------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.filters button {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-size: 11px;
  padding: 9px 16px; border: 1px solid var(--line);
  color: var(--bone-dim); transition: all .18s var(--ease);
}
.filters button:hover { border-color: var(--line-2); color: var(--bone); }
.filters button.on { background: var(--bone); border-color: var(--bone); color: var(--ink); }

/* --- PDP ----------------------------------------------------------------- */
.pdp { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 64px); padding-block: 34px 80px; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } }
.pdp__gal { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pdp__gal img { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--ink-2); }
.pdp__info { position: sticky; top: calc(var(--hdr) + 22px); align-self: start; }
@media (max-width: 900px) { .pdp__info { position: static; } }
.pdp__price { font-family: var(--display); font-size: 22px; letter-spacing: .04em; margin: 12px 0 22px; }
.pdp__price s { color: var(--muted); margin-right: 10px; }

.opt { margin-bottom: 22px; }
.opt__hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.opt__hd .eyebrow { letter-spacing: .2em; }
.opt__hd button { font-size: 11px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.opt__hd button:hover { color: var(--bone); }
.sizes { display: flex; flex-wrap: wrap; gap: 7px; }
.sizes button {
  min-width: 56px; padding: 12px 8px;
  border: 1px solid var(--line); color: var(--bone-dim);
  font-family: var(--display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  transition: all .16s var(--ease); position: relative;
}
.sizes button:hover:not([disabled]) { border-color: var(--bone); color: var(--bone); }
.sizes button.on { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.sizes button[disabled] { color: #4a4a51; border-color: #191920; cursor: not-allowed; }
.sizes button[disabled]::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top left, transparent calc(50% - 1px), #2c2c33 50%, transparent calc(50% + 1px));
}
.stocknote { font-size: 12px; color: var(--blood-lt); margin-top: 9px; letter-spacing: .04em; }

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__hd {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 16px 0; font-family: var(--display); text-transform: uppercase;
  letter-spacing: .14em; font-size: 12px;
}
.acc__hd span:last-child { color: var(--muted); font-size: 16px; line-height: 1; }
.acc__bd { display: none; padding-bottom: 18px; color: var(--bone-dim); font-size: 14px; }
.acc__bd ul { margin: 0; padding-left: 17px; }
.acc__bd li { margin-bottom: 5px; }
.acc__item.open .acc__bd { display: block; }

/* --- cart drawer --------------------------------------------------------- */
.scrim {
  position: fixed; inset: 0; z-index: 78; background: rgba(0,0,0,.62);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
  backdrop-filter: blur(2px);
}
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
  width: min(430px, 100%);
  background: var(--ink); border-left: 1px solid var(--line);
  transform: translateX(101%); transition: transform .38s var(--ease);
  display: flex; flex-direction: column;
}
.drawer.on { transform: none; }
.drawer__hd { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--gut); border-bottom: 1px solid var(--line); }
.drawer__bd { flex: 1; overflow-y: auto; padding: 0 var(--gut); }
.drawer__ft { border-top: 1px solid var(--line); padding: 18px var(--gut) 24px; }

.ship { margin-bottom: 16px; }
.ship__bar { height: 3px; background: var(--line); overflow: hidden; }
.ship__bar i { display: block; height: 100%; background: var(--blood); transition: width .4s var(--ease); }
.ship p { font-size: 11.5px; color: var(--bone-dim); margin: 0 0 7px; letter-spacing: .05em; }

.line { display: grid; grid-template-columns: 74px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.line img { aspect-ratio: 4/5; object-fit: cover; background: var(--ink-2); }
.line__t { font-family: var(--display); text-transform: uppercase; font-size: 14px; letter-spacing: .03em; }
.line__v { color: var(--muted); font-size: 12px; margin-top: 2px; }
.line__row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.qty { display: inline-flex; border: 1px solid var(--line); }
.qty button { width: 28px; height: 28px; color: var(--bone-dim); font-size: 14px; line-height: 1; }
.qty button:hover { color: var(--bone); background: var(--panel); }
.qty span { min-width: 30px; display: grid; place-items: center; font-family: var(--display); font-size: 12px; }
.line__p { font-family: var(--display); font-size: 13px; letter-spacing: .04em; }

.tot { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.tot .h-sm { letter-spacing: .12em; }
.notice {
  border: 1px solid var(--line); border-left: 2px solid var(--blood);
  padding: 12px 14px; margin-bottom: 14px;
  font-size: 12.5px; color: var(--bone-dim); line-height: 1.5;
}
.notice code { color: var(--bone); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.empty { text-align: center; padding: 70px 0; color: var(--muted); }

/* --- editorial / marquee ------------------------------------------------- */
.slogan { overflow: hidden; border-block: 1px solid var(--line); padding-block: 22px; }
.slogan__track { display: flex; gap: 44px; white-space: nowrap; animation: slide 40s linear infinite; }
.slogan__track span {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(30px, 5vw, 62px); letter-spacing: .01em; color: transparent;
  -webkit-text-stroke: 1px var(--line-2);
}
.slogan__track span:nth-child(even) { color: var(--bone); -webkit-text-stroke: 0; }
/* specificity has to beat .slogan__track span:nth-child(even) */
.slogan__track span.slogan__mark {
  display: flex; align-items: center; color: var(--blood);
  -webkit-text-stroke: 0;
}
.slogan__mark .cross { height: clamp(38px, 6.4vw, 78px); width: auto; display: block; }
@media (prefers-reduced-motion: reduce) { .slogan__track { animation: none; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }
.split__img img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.split__txt { background: var(--ink); padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: 16px; }

/* --- about --------------------------------------------------------------- */
.prose { max-width: 66ch; }
.prose p { color: var(--bone-dim); }
.prose h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; font-size: 19px; margin: 34px 0 8px; }

/* --- footer -------------------------------------------------------------- */
.ftr { border-top: 1px solid var(--line); padding-block: 54px 30px; margin-top: 20px; }
.ftr__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 34px; }
@media (max-width: 860px) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ftr__grid { grid-template-columns: 1fr; } }
.ftr h4 { font-family: var(--display); text-transform: uppercase; letter-spacing: .18em; font-size: 11px; color: var(--muted); margin: 0 0 14px; font-weight: 500; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ftr a, .ftr li button { color: var(--bone-dim); font-size: 13.5px; }
/* the size-guide control is a button, but must sit flush with the links */
.ftr li button { padding: 0; text-align: left; font-family: var(--body); line-height: inherit; }
.ftr a:hover, .ftr li button:hover { color: var(--bone); }
.ftr__mark img { width: 150px; opacity: .8; margin-bottom: 14px; }
.nl { display: flex; border: 1px solid var(--line); margin-top: 12px; max-width: 340px; }
.nl input { flex: 1; background: none; border: 0; color: var(--bone); padding: 12px 13px; font-size: 13px; outline: none; }
.nl input::placeholder { color: #5c5c64; }
.nl button { padding: 0 16px; background: var(--bone); color: var(--ink); font-family: var(--display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.nl button:hover { background: var(--blood); color: #fff; }
.nl.done { border-color: var(--blood); }
.ftr__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; letter-spacing: .05em; }

/* --- modal --------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 90; display: none; place-items: center; padding: 20px; }
.modal.on { display: grid; }
.modal__bd { position: relative; background: var(--ink); border: 1px solid var(--line); max-width: 520px; width: 100%; padding: 28px; max-height: 86vh; overflow: auto; }
.modal table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.modal th, .modal td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.modal th { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--muted); font-weight: 500; }
.modal__x { position: absolute; top: 12px; right: 14px; color: var(--muted); font-size: 20px; }

/* --- toast --------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 130%); z-index: 95;
  background: var(--bone); color: var(--ink);
  font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: 12px;
  padding: 13px 22px; transition: transform .34s var(--ease);
}
.toast.on { transform: translate(-50%, 0); }

/* --- misc ---------------------------------------------------------------- */
.crumbs { font-size: 11.5px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; font-family: var(--display); padding-top: 18px; }
.crumbs a:hover { color: var(--bone); }
.skeleton { background: var(--panel); animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }
.err { border: 1px solid var(--blood); border-left-width: 3px; padding: 18px 20px; margin: 40px 0; }
.err code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--blood-lt); }

/* =============================================================================
   TOUCH TARGETS & MOBILE HARDENING
   Controls need roughly 44px of touch area (Apple HIG, WCAG 2.5.8). Almost
   everything below grows the HIT AREA with padding rather than the visible
   element, so the layout reads identically while the target becomes honest.
   The growth is scoped to `pointer: coarse` so the desktop layout stays tight.
   ============================================================================= */

/* no grey flash on tap, and skip the legacy 300ms click delay */
a, button, input, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* the drawer and sheet must not chain their scroll to the page behind them */
.drawer, .drawer__bd, .msheet, .modal__bd {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* index.html sets viewport-fit=cover, so the notch and home indicator are ours
   to handle — without this, content slides under both on modern iPhones */
.shell {
  padding-left: max(var(--gut), env(safe-area-inset-left));
  padding-right: max(var(--gut), env(safe-area-inset-right));
}
.drawer__ft { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.msheet     { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.ftr        { padding-bottom: max(30px, env(safe-area-inset-bottom)); }
.hero__in   { padding-bottom: max(clamp(34px, 5vh, 60px), env(safe-area-inset-bottom)); }

/* iOS counts the address bar in `vh`, so a vh-sized hero jumps as it hides.
   dvh tracks the visible viewport instead. */
@supports (height: 100dvh) {
  .hero { min-height: min(78dvh, 760px); }
  @media (max-width: 620px) { .hero { min-height: min(74dvh, 620px); } }
}

@media (max-width: 620px) {
  .ticker span { font-size: 12px; }
  .crumbs { font-size: 12px; }
  .card__sub { font-size: 12.5px; }
}

@media (pointer: coarse) {
  .burger {
    min-width: 44px; min-height: 44px; margin-left: -6px;
    align-items: center; justify-content: flex-start;
  }
  .cart-btn { min-height: 44px; padding-left: 10px; margin-right: -10px; }

  #drawerX, #msheetX {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: flex-end;
  }
  .modal__x {
    width: 44px; height: 44px; top: 4px; right: 4px;
    display: grid; place-items: center;
  }

  .qty button { width: 42px; height: 42px; font-size: 17px; }
  .qty span { min-width: 36px; }

  .filters button { min-height: 44px; }

  .crumbs a { display: inline-block; padding: 13px 3px; margin: -13px 0; }
  .sec__hd a { display: inline-block; padding: 12px 0; }
  .opt__hd button { padding: 13px 4px; margin: -13px -4px; }

  /* full-width so a short word like "All" is not a 16px-wide target */
  .ftr ul { gap: 0; }
  .ftr ul a, .ftr li button {
    display: block; width: 100%; text-align: left;
    min-height: 44px; padding: 11px 0; line-height: 22px;
  }

  .nl input, .nl button { min-height: 46px; }

  .msheet a { padding: 15px 0; }
}

/* On mobile the PDP gallery stacked vertically, pushing the size picker and
   Add to cart two full-height images down the page. Swiping sideways is both
   the convention and far less scrolling. The 92% width leaves the next frame
   peeking at the edge, which signals "swipe" without needing dots. */
@media (max-width: 900px) {
  .pdp__gal {
    display: flex; flex-direction: row; gap: 1px;   /* base rule is column */
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .pdp__gal::-webkit-scrollbar { display: none; }
  .pdp__gal img { flex: 0 0 92%; width: auto; scroll-snap-align: center; }
  .pdp__gal img:only-child { flex-basis: 100%; }
}


@media (prefers-reduced-motion: reduce) {
  .hero__img { transform: none; }
  .hero__dark { opacity: 0; }
}