/* ==========================================================================
   TwinsPoles — handwoven organic yoga & meditation mats
   Design tokens derived from the natural dye garden: indigo (avuri),
   turmeric (manjal), madder (manjitti), neem (vembu).
   ========================================================================== */

:root {
  /* Ground — sage paper, the colour of unbleached cotton in shade */
  --bg:            #E6EBE2;
  --bg-raised:     #F4F6F1;
  --bg-deep:       #1E2621;

  /* Ink — tinted green-black, never pure gray */
  --ink:           #1E2621;
  --ink-2:         #3F463F;
  --ink-3:         #5A5F57;
  --ink-on-deep:   #E6EBE2;
  --ink-on-deep-2: #C9C2B4;

  /* Lines */
  --line:          #C9D2C3;
  --line-deep:     #3A443D;

  /* The dye garden — every accent traces to a plant */
  --indigo:        #2E3B66;
  --turmeric:      #B7802A;
  --madder:        #8E3A2C;
  --neem:          #4B6547;

  /* Undyed fibres */
  --cotton:        #E6DCC8;
  --korai:         #C7B27E;
  --jute:          #A98B5E;
  --bark:          #6E5A3E;

  --accent:        var(--indigo);

  /* Type */
  --display: Marcellus, "Iowan Old Style", Georgia, serif;
  --body:    "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 80px; --s10: 112px;

  /* Page gutter — fluid, matches the 64px artboard margin at 1440 */
  --gutter: clamp(20px, 4.4vw, 64px);
  --maxw: 1440px;

  /* Radius language: essentially square. Pills are the single exception,
     reserved for filter chips. */
  --r: 2px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 140ms;
  --med:  260ms;
  --slow: 520ms;

  --header-h: 88px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; margin: 0; }
p { margin: 0; }
img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; transition: color var(--fast) var(--ease); }
a:hover { color: var(--accent); }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-deep :focus-visible,
.footer :focus-visible { outline-color: var(--korai); }

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

.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: 200;
  background: var(--ink); color: var(--ink-on-deep);
  padding: var(--s3) var(--s5); font-size: 14px; font-weight: 500;
  transition: top var(--fast) var(--ease);
}
.skip-link:focus { top: var(--s4); color: var(--ink-on-deep); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   The signature: woven cloth.
   Every product surface is warp and weft rather than a stock photo.
   ========================================================================== */
.weave {
  position: relative;
  background-color: var(--cotton);
  isolation: isolate;
  overflow: hidden;
}
.weave::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.13) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,0.13)     0 2px, transparent 2px 7px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.05)     0 1px, transparent 1px 14px);
  z-index: -1;
}
.weave::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 30% 15%, rgba(255,255,255,0.14), transparent 62%),
              linear-gradient(to bottom, transparent 55%, rgba(0,0,0,0.12));
  z-index: -1;
}
/* Fine weave for small surfaces */
.weave--fine::before {
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.14) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,0.14)      0 1px, transparent 1px 4px);
}
/* A selvedge stripe, the way a real mat is bound at the edge */
.weave--selvedge { border-left: 6px solid rgba(0,0,0,0.16); border-right: 6px solid rgba(0,0,0,0.16); }

.ph {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1.35;
}

/* ---------- Type helpers ---------- */
.eyebrow {
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow--rule { display: flex; align-items: center; gap: var(--s3); }
.eyebrow--rule::before {
  content: ""; width: 40px; height: 1px; background: var(--ink); flex: none;
}
/* Replaces the artboards' Tamil label line above a card heading. */
.card-kicker {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3);
}

.h-xl  { font-size: clamp(52px, 7.8vw, 112px); line-height: 0.98; letter-spacing: -0.015em; }
.h-lg  { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.1; }
.h-md  { font-size: clamp(28px, 3.3vw, 48px); line-height: 1.12; }
.h-sm  { font-size: clamp(22px, 1.9vw, 26px); line-height: 1.25; }

.lede { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--ink-2); }
.prose { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; color: var(--ink-2); }
.muted { color: var(--ink-3); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(48px, 6.4vw, var(--s9)); }
.section--tight { padding-block: clamp(40px, 5.4vw, 80px); }
.section--raised { background: var(--bg-raised); border-block: 1px solid var(--line); }
.section--deep { background: var(--bg-deep); color: var(--ink-on-deep); }
.section--deep .muted { color: var(--ink-on-deep-2); }
.section--deep .prose { color: var(--ink-on-deep-2); }
.section--deep .eyebrow { color: var(--korai); }

.stack { display: flex; flex-direction: column; }
.gap-1 { gap: var(--s1); }
.gap-2 { gap: var(--s2); } .gap-3 { gap: var(--s3); } .gap-4 { gap: var(--s4); }
.gap-5 { gap: var(--s5); } .gap-6 { gap: var(--s6); } .gap-7 { gap: var(--s7); }

.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--s6); flex-wrap: wrap;
}

.grid { display: grid; gap: var(--s5); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  height: 56px; padding-inline: var(--s6);
  border: 1px solid transparent; border-radius: var(--r);
  font-size: 16px; font-weight: 500; cursor: pointer;
  background: var(--accent); color: #fff;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn:hover { background: #253055; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn svg { transition: transform var(--med) var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--ghost {
  background: transparent; color: var(--ink); border-color: var(--ink);
  padding-inline: var(--s7);
}
.btn--ghost:hover { background: var(--ink); color: var(--bg); }

.btn--block { width: 100%; }
.btn--sm { height: 46px; padding-inline: var(--s5); font-size: 15px; }

.link-rule {
  align-self: flex-start;
  font-size: 15px; font-weight: 500;
  border-bottom: 1px solid currentColor; padding-bottom: 4px;
  transition: opacity var(--fast) var(--ease);
}
.link-rule:hover { opacity: 0.6; }

.chip {
  height: 44px; padding-inline: var(--s5);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: transparent; color: var(--ink);
  font-size: 14px; cursor: pointer; white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg-raised); border-color: var(--ink); }

.icon-btn {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer; border-radius: var(--r);
  position: relative;
  transition: background var(--fast) var(--ease);
}
.icon-btn:hover { background: rgba(30, 38, 33, 0.07); }
.icon-btn svg { stroke: currentColor; }

.cart-count {
  position: absolute; top: 4px; right: 2px;
  min-width: 18px; height: 18px; padding-inline: 4px;
  border-radius: var(--r-pill);
  background: var(--madder); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
  transform: scale(0); transition: transform var(--med) var(--ease);
}
.cart-count.is-on { transform: scale(1); }

/* ---------- Announcement ---------- */
.announce {
  height: 40px; background: var(--bg-deep); color: var(--ink-on-deep);
  font-size: 13px; letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.announce__track { display: flex; align-items: center; gap: var(--s5); }
.announce__sep { opacity: 0.45; }
@media (max-width: 720px) {
  .announce { height: 34px; font-size: 12px; }
  /* Mobile keeps only the shipping line, as on the mobile artboard. */
  .announce__track > *:not(.announce__keep) { display: none; }
}

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--med) var(--ease);
}
.header.is-stuck { box-shadow: 0 1px 24px rgba(30, 38, 33, 0.10); }
.header__inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
}
.header__nav { display: flex; gap: var(--s6); font-size: 15px; font-weight: 500; }
.header__nav a { position: relative; padding-block: 4px; }
.header__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--med) var(--ease);
}
.header__nav a:hover::after,
.header__nav a[aria-current="page"]::after { transform: scaleX(1); }

.wordmark {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center;
}
/* Tracking is tuned for the 9-letter wordmark: the artboard's 0.32em was set
   for a 4-letter name and overflows the mobile header at this length. */
.wordmark__name {
  font-family: var(--display); font-size: 30px;
  letter-spacing: 0.18em; padding-left: 0.18em; line-height: 1;
  white-space: nowrap;
}
.wordmark__sub {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
.wordmark:hover { color: var(--ink); }

.header__end { display: flex; align-items: center; gap: var(--s6); font-size: 15px; font-weight: 500; }
.header__links { display: flex; gap: var(--s6); white-space: nowrap; }
.header__icons { display: flex; gap: var(--s2); }
.header__burger { display: none; }

@media (max-width: 1080px) {
  :root { --header-h: 64px; }
  .header__nav, .header__end .header__links { display: none; }
  .header__burger { display: inline-flex; }
  .wordmark__name { font-size: 21px; letter-spacing: 0.12em; padding-left: 0.12em; }
  .wordmark__sub { display: none; }
  .header__inner { gap: var(--s3); }
}

/* ---------- Mobile drawer nav ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(30, 38, 33, 0.5);
  opacity: 0; pointer-events: none;
  transition: opacity var(--med) var(--ease);
  backdrop-filter: blur(2px);
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; bottom: 0; z-index: 100;
  width: min(440px, 92vw);
  background: var(--bg);
  display: flex; flex-direction: column;
  visibility: hidden;
  transition: transform var(--slow) var(--ease), visibility var(--slow) var(--ease);
  box-shadow: 0 0 60px rgba(30, 38, 33, 0.22);
}
.drawer--left  { left: 0;  transform: translateX(-102%); }
.drawer--right { right: 0; transform: translateX(102%); }
.drawer.is-open { transform: translateX(0); visibility: visible; }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) var(--s4) var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.drawer__title { font-family: var(--display); font-size: 22px; }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--s5); }
.drawer__foot { flex: none; border-top: 1px solid var(--line); padding: var(--s5); background: var(--bg-raised); }

.nav-list { display: flex; flex-direction: column; }
.nav-list a {
  padding: var(--s4) 0; border-bottom: 1px solid var(--line);
  font-family: var(--display); font-size: 24px;
  display: flex; justify-content: space-between; align-items: center;
}

/* ---------- Hero ---------- */
.hero {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  min-height: 680px;
}
.hero__copy {
  padding: var(--s9) var(--s9) var(--s9) var(--gutter);
  display: flex; flex-direction: column; justify-content: center; gap: var(--s6);
}
.hero__actions { display: flex; gap: var(--s4); flex-wrap: wrap; }
.hero__art {
  display: flex; gap: var(--s4);
  padding: var(--s7) var(--gutter) var(--s7) 0;
}
.hero__art-main { flex: 1; display: flex; align-items: flex-end; padding: var(--s5); color: #fff; }
.hero__art-col { width: 180px; display: flex; flex-direction: column; gap: var(--s4); }
.hero__art-col > div { flex: 1; display: flex; align-items: flex-end; padding: var(--s4); }

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { padding: var(--s8) var(--gutter) var(--s6); order: 2; gap: var(--s5); }
  .hero__art { padding: var(--s5) var(--gutter) 0; order: 1; height: 420px; }
  .hero__art-col { width: 110px; }
}
@media (max-width: 640px) {
  .hero__art { height: 340px; gap: var(--s3); }
  .hero__art-col { width: 84px; gap: var(--s3); }
  .hero__actions .btn { flex: 1; min-width: 100%; }
}

/* ---------- Material cards ---------- */
.mat-card { display: flex; flex-direction: column; gap: var(--s5); }
.mat-card__art {
  height: 300px; display: flex; align-items: flex-end; padding: var(--s4);
  transition: transform var(--slow) var(--ease);
}
.mat-card:hover .mat-card__art { transform: translateY(-6px); }
.mat-card h3 { font-size: 26px; }

/* ---------- Product cards ---------- */
.prod-card { display: flex; flex-direction: column; gap: var(--s4); }
.prod-card__art {
  height: 400px; position: relative;
  display: flex; align-items: flex-end; padding: var(--s4);
  transition: transform var(--slow) var(--ease);
}
.prod-card:hover .prod-card__art { transform: translateY(-6px); }
.prod-card__tag {
  position: absolute; top: var(--s4); left: var(--s4); z-index: 2;
  background: var(--bg-raised); color: var(--ink);
  font-size: 12px; padding: 6px 10px; letter-spacing: 0.04em;
}
.prod-card__row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3);
}
.prod-card__name { font-family: var(--display); font-size: 22px; }
.prod-card__price { font-size: 16px; font-weight: 500; white-space: nowrap; }
.prod-card__swatches { display: flex; gap: 6px; }
.swatch-dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
}

/* ---------- Grip / split section ---------- */
.split {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s9); align-items: center;
}
.split__art { height: 480px; display: flex; align-items: flex-end; padding: var(--s5); }
.spec-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.spec-list > div {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 16px;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--s6); }
  .split__art { height: 300px; }
}

/* ---------- Dye garden ---------- */
.dye-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.dye__chip { height: 220px; transition: height var(--slow) var(--ease); }
@media (hover: hover) { .dye:hover .dye__chip { height: 240px; } }
.dye__body { padding: var(--s5) var(--s1) 0; display: flex; flex-direction: column; gap: 6px; }
.dye__name { font-family: var(--display); font-size: 26px; }
@media (max-width: 900px) {
  .dye-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  .dye__chip { height: 130px; }
  .dye:hover .dye__chip { height: 130px; }
  .dye__body { padding-top: var(--s3); }
  .dye__name { font-size: 19px; }
}

/* ---------- Practice tiles ---------- */
.practice { display: flex; flex-direction: column; gap: var(--s4); }
.practice__art {
  height: 420px; display: flex; align-items: flex-end; padding: var(--s4); color: #fff;
  transition: transform var(--slow) var(--ease);
}
.practice:hover .practice__art { transform: translateY(-6px); }
.practice__row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--display); font-size: 24px;
}
.practice__row svg { transition: transform var(--med) var(--ease); }
.practice:hover .practice__row svg { transform: translateX(5px); }

/* ---------- Story ---------- */
.story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s5); align-items: center; }
.story__art { grid-column: span 7; height: 620px; display: flex; align-items: flex-end; padding: var(--s5); color: #fff; }
.story__copy { grid-column: span 5; padding-left: var(--s7); display: flex; flex-direction: column; gap: var(--s6); align-items: flex-start; }
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; gap: var(--s6); }
  .story__art, .story__copy { grid-column: auto; }
  .story__art { height: 360px; }
  .story__copy { padding-left: 0; gap: var(--s5); }
}

/* ---------- Journal ---------- */
.post { display: flex; flex-direction: column; gap: 18px; }
.post__art { height: 260px; transition: transform var(--slow) var(--ease); }
.post:hover .post__art { transform: translateY(-6px); }
.post h3 { font-size: 26px; line-height: 1.25; }

/* ---------- Newsletter ---------- */
.newsletter {
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s8); flex-wrap: wrap;
}
.field { display: flex; flex-direction: column; gap: var(--s2); }
.field__label { font-size: 13px; color: var(--ink-3); }
.field__row { display: flex; }
.input {
  width: 360px; max-width: 100%; height: 56px; padding-inline: var(--s5);
  border: 1px solid var(--ink); background: var(--bg-raised);
  font: inherit; font-size: 16px; color: var(--ink); border-radius: var(--r) 0 0 var(--r);
  transition: box-shadow var(--fast) var(--ease);
}
.input::placeholder { color: var(--ink-3); }
.input:focus-visible { outline-offset: 0; }
.input[aria-invalid="true"] { border-color: var(--madder); box-shadow: inset 0 0 0 1px var(--madder); }
.field__row .btn { border-radius: 0 var(--r) var(--r) 0; height: 56px; padding-inline: 28px; }
.field__msg { font-size: 13px; min-height: 18px; }
.field__msg.is-error { color: var(--madder); }
.field__msg.is-ok { color: var(--neem); }
@media (max-width: 640px) {
  .newsletter .field { width: 100%; }
  .field__row { flex-direction: column; gap: var(--s3); }
  .input { width: 100%; border-radius: var(--r); }
  .field__row .btn { border-radius: var(--r); width: 100%; }
}

/* ---------- Footer ---------- */
.footer { background: var(--bg-deep); color: var(--ink-on-deep-2); padding: var(--s9) var(--gutter) var(--s7); }
.footer a { color: var(--ink-on-deep-2); }
.footer a:hover { color: var(--ink-on-deep); }
.footer__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s6); }
.footer__brand { grid-column: span 2; display: flex; flex-direction: column; gap: var(--s4); }
.footer__word {
  font-family: var(--display); font-size: 30px; letter-spacing: 0.18em;
  color: var(--ink-on-deep); white-space: nowrap;
}
.footer__col { display: flex; flex-direction: column; gap: var(--s3); font-size: 15px; }
.footer__col > span:first-child { color: var(--ink-on-deep); font-weight: 500; }
.footer__base {
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  padding-top: var(--s5); margin-top: var(--s7);
  border-top: 1px solid var(--line-deep); font-size: 13px;
}
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
  .footer__brand { grid-column: span 2; }
}

/* ==========================================================================
   Product detail page
   ========================================================================== */
.crumbs { display: flex; gap: var(--s2); font-size: 13px; color: var(--ink-3); padding-block: var(--s4) var(--s3); flex-wrap: wrap; }
.crumbs a { color: var(--ink-3); }
.crumbs [aria-current] { color: var(--ink); }

.pdp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s5); padding-bottom: clamp(56px, 7vw, 96px); }
.pdp__media { grid-column: span 7; display: flex; flex-direction: column; gap: var(--s4); }
.pdp__stage {
  height: clamp(380px, 52vw, 760px);
  display: flex; align-items: flex-end; padding: var(--s5);
  transition: background-color var(--slow) var(--ease);
}
.pdp__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.pdp__thumb {
  height: clamp(74px, 10vw, 150px); padding: 0; border: 1px solid transparent;
  background: transparent; cursor: pointer; position: relative;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.pdp__thumb > span {
  display: block; width: 100%; height: 100%;
  transition: background-color var(--slow) var(--ease);
}
@media (hover: hover) { .pdp__thumb:hover { transform: translateY(-3px); } }
.pdp__thumb[aria-pressed="true"] { border-color: var(--ink); }
.pdp__thumb[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,0.5); pointer-events: none;
}

.pdp__info { grid-column: span 5; padding-left: var(--s7); display: flex; flex-direction: column; gap: var(--s6); }
.pdp__price-row { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.pdp__price { font-size: 28px; font-weight: 500; }
.pdp__was { font-size: 16px; color: var(--ink-3); text-decoration: line-through; }

.opt { display: flex; flex-direction: column; gap: var(--s3); }
.opt__label { font-size: 14px; font-weight: 500; }
.opt__label span { color: var(--ink-3); font-weight: 400; }

.dye-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.dye-swatch {
  width: 44px; height: 44px; border-radius: 50%; padding: 4px;
  border: 1.5px solid transparent; background: transparent; cursor: pointer;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
@media (hover: hover) { .dye-swatch:hover { transform: scale(1.06); } }
.dye-swatch[aria-pressed="true"] { border-color: var(--ink); }
.dye-swatch > span { display: block; width: 100%; height: 100%; border-radius: 50%; }

.opt-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opt-card {
  min-height: 72px; padding: 14px 16px; text-align: left;
  border: 1px solid var(--line); background: transparent; cursor: pointer;
  display: flex; flex-direction: column; gap: var(--s1); border-radius: var(--r);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.opt-card:hover { border-color: var(--ink); }
.opt-card[aria-pressed="true"] { border: 1.5px solid var(--ink); background: var(--bg-raised); }
.opt-card__name { font-size: 15px; font-weight: 500; }
.opt-card__note { font-size: 13px; color: var(--ink-3); }

.buy-row { display: flex; gap: var(--s3); flex-wrap: wrap; }
.stepper {
  height: 56px; display: flex; align-items: center;
  border: 1px solid var(--ink); border-radius: var(--r); flex: none;
}
.stepper button {
  width: 48px; height: 54px; border: 0; background: transparent;
  font-size: 20px; cursor: pointer; line-height: 1;
  transition: background var(--fast) var(--ease);
}
.stepper button:hover { background: rgba(30, 38, 33, 0.07); }
.stepper button:disabled { opacity: 0.3; cursor: not-allowed; background: transparent; }
.stepper output { width: 36px; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; }
.buy-row .btn { flex: 1; min-width: 200px; }

.accordions { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.accordions details { border-bottom: 1px solid var(--line); padding-block: var(--s5); }
.accordions summary {
  font-family: var(--display); font-size: 20px; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
}
.accordions summary::-webkit-details-marker { display: none; }
.accordions summary::after {
  content: ""; width: 12px; height: 12px; flex: none;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--med) var(--ease);
}
.accordions details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.accordions .acc-body { padding-top: 14px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.accordions .acc-list { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; }
.spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; font-size: 15px; }

@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; gap: var(--s6); }
  .pdp__media, .pdp__info { grid-column: auto; }
  .pdp__info { padding-left: 0; gap: var(--s5); }
  .buy-row .btn { min-width: 100%; }
}

/* ---------- Cart ---------- */
.ship-bar { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s5); }
.ship-bar__track { height: 4px; background: var(--line); overflow: hidden; }
.ship-bar__fill { height: 100%; background: var(--neem); width: 0; transition: width var(--slow) var(--ease); }
.ship-bar__text { font-size: 13px; color: var(--ink-3); }

.cart-line { display: flex; gap: var(--s4); padding-block: var(--s5); border-bottom: 1px solid var(--line); }
.cart-line__art { width: 84px; height: 108px; flex: none; }
.cart-line__body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cart-line__name { font-family: var(--display); font-size: 19px; }
.cart-line__meta { font-size: 13px; color: var(--ink-3); }
.cart-line__foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s2); gap: var(--s3); }
.cart-line__qty { display: flex; align-items: center; border: 1px solid var(--line); }
.cart-line__qty button {
  width: 34px; height: 34px; border: 0; background: transparent; cursor: pointer; font-size: 16px; line-height: 1;
  transition: background var(--fast) var(--ease);
}
.cart-line__qty button:hover { background: rgba(30, 38, 33, 0.07); }
.cart-line__qty output { width: 30px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.cart-line__price { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cart-line__remove {
  align-self: flex-start; border: 0; background: transparent; cursor: pointer;
  font-size: 13px; color: var(--ink-3); border-bottom: 1px solid var(--line); padding: 0 0 2px;
}
.cart-line__remove:hover { color: var(--madder); border-color: var(--madder); }

.cart-empty { display: flex; flex-direction: column; gap: var(--s4); align-items: flex-start; padding-block: var(--s7); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s4); }
.cart-total__label { font-family: var(--display); font-size: 20px; }
.cart-total__value { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cart-note { font-size: 13px; color: var(--ink-3); margin-top: var(--s3); text-align: center; }

/* ---------- Search ---------- */
.search-panel {
  position: fixed; left: 0; right: 0; top: 0; z-index: 100;
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding: var(--s6) var(--gutter) var(--s7);
  transform: translateY(-104%);
  visibility: hidden;
  transition: transform var(--slow) var(--ease), visibility var(--slow) var(--ease);
  max-height: 100vh; overflow-y: auto;
}
.search-panel.is-open { transform: translateY(0); visibility: visible; }
.search-panel__row { display: flex; align-items: center; gap: var(--s4); border-bottom: 1px solid var(--ink); padding-bottom: var(--s3); }
.search-panel__input {
  flex: 1; border: 0; background: transparent; font-family: var(--display);
  font-size: clamp(24px, 3.4vw, 40px); color: var(--ink); padding: 0;
}
.search-panel__input:focus { outline: none; }
/* The input drops its own ring; the row's rule shows focus instead. */
.search-panel__row:focus-within { border-bottom-color: var(--accent); }
.search-results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s6); }
.search-hint { margin-top: var(--s5); font-size: 15px; color: var(--ink-3); }

/* ---------- Toast ---------- */
.toasts {
  position: fixed; left: 50%; bottom: var(--s6); transform: translateX(-50%);
  z-index: 140; display: flex; flex-direction: column; gap: var(--s2);
  width: min(420px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  background: var(--bg-deep); color: var(--ink-on-deep);
  padding: var(--s4) var(--s5); font-size: 14px;
  display: flex; align-items: center; gap: var(--s3);
  box-shadow: 0 12px 40px rgba(30, 38, 33, 0.28);
  animation: toast-in var(--med) var(--ease) both;
}
.toast.is-out { animation: toast-out var(--med) var(--ease) both; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }

/* ---------- Reveal on scroll: the one orchestrated moment ----------
   The hidden starting state lives in the fail-safe block near the end of
   this file (.js .reveal), so it only applies once JS has marked <html>. */
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  transition-delay: var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  /* html.js outranks the later .js .reveal rule, so nothing is ever hidden. */
  .reveal, html.js .reveal { opacity: 1; transform: none; }
}

/* ---------- Responsive grid collapses ---------- */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prod-card__art { height: 340px; }
  .practice__art { height: 320px; }
  .mat-card__art { height: 240px; }
}
@media (max-width: 640px) {
  .grid-3 { grid-template-columns: 1fr; }
  .post__art { height: 200px; }
  .opt-cards { grid-template-columns: 1fr; }
  .section-head { gap: var(--s4); }
}
@media (max-width: 480px) {
  .grid-4 { gap: var(--s3); }
  .prod-card__art { height: 260px; }
  .mat-card__art { height: 180px; }
  .mat-card { gap: var(--s3); }
  .mat-card h3 { font-size: 20px; }
}

/* Horizontal scroller for bestsellers on small screens (mirrors the mobile board) */
@media (max-width: 640px) {
  .scroller {
    display: flex; gap: var(--s3); overflow-x: auto;
    margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter);
    /* room for the focus ring, which the scroll box would otherwise clip */
    padding-block: 6px; margin-block: -6px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .scroller::-webkit-scrollbar { display: none; }
  .scroller > * { flex: none; width: 240px; scroll-snap-align: start; }
  .scroller .prod-card__art { height: 300px; }
}

/* --------------------------------------------------------------------------
   Small-screen header.
   The 10-letter wordmark needs more room than the artboards' 4-letter one:
   at 375px the burger + three icons + gutters left only ~104px for a 149px
   wordmark, which pushed the whole document into horizontal overflow.
   The mobile artboard carried menu + wordmark + cart only, so the account
   icon drops here — the drawer covers it.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .header__inner { gap: var(--s2); }
  .header__account { display: none; }
  .wordmark { min-width: 0; }
  .wordmark__name { font-size: 20px; letter-spacing: 0.10em; padding-left: 0.10em; }
}

/* ==========================================================================
   Media — a real photo fills its weave surface; no photo keeps the weave.
   ========================================================================== */
.media__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 900ms var(--ease);
}
/* Thumbnail nudge on the product page (the big photos use the lens below).
   Only the thumbs animate, so only they get a compositor layer. */
.pdp__thumb .media__img { will-change: transform; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pdp__thumb:hover .media__img { transform: scale(1.08); transition-duration: 400ms; }
}

/* Magnifier lens on the product page: a circle that
   travels with the cursor and shows that spot of the full-resolution photo
   enlarged. Built and positioned by media.js; display is gated to pointer
   devices. */
.media-lens {
  display: none;
  position: absolute; z-index: 4;
  width: clamp(150px, 48%, 360px); aspect-ratio: 1; border-radius: 50%;
  pointer-events: none;
  background-repeat: no-repeat;
  background-color: var(--bg-raised);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow:
    0 0 0 1px rgba(30,38,33,0.18),
    0 18px 40px rgba(30,38,33,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.35);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
@media (hover: hover) {
  .media-lens { display: block; }
  .media-lens.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .pdp__stage.has-photo { cursor: crosshair; }
}
/* A real photo needs none of the woven-placeholder dressing: no selvedge
   stripes, no texture, no vignette — just the picture. */
.weave.has-photo.weave--selvedge { border-left: 0; border-right: 0; }
.weave.has-photo::before,
.weave.has-photo::after { display: none; }
.weave.has-photo > .prod-card__tag,
.weave.has-photo > .ph { position: relative; z-index: 3; }

/* ==========================================================================
   Collection page
   ========================================================================== */
.collection-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--s4) var(--s7); flex-wrap: wrap;
  padding-block: var(--s2) var(--s5);
}
.collection-head__title { font-size: clamp(30px, 3vw, 44px); }
.collection-head__lede { max-width: 400px; font-size: 16px; line-height: 1.5; padding-bottom: 6px; }

/* One slim toolbar: practice chips | fibre chips … count + sort */
.collection-filters {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  padding-block: var(--s3);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: var(--s6);
}
.filter-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.filter-row__label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); flex: none;
}
.filter-row + .filter-row:not(.filter-row--end) { padding-left: var(--s5); border-left: 1px solid var(--line); }
.chip-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.filter-row--end { margin-left: auto; gap: var(--s4); }
.collection-filters .chip { height: 36px; padding-inline: 14px; font-size: 13px; }

.sort { display: inline-flex; align-items: center; }
.sort__select {
  height: 36px; padding: 0 var(--s4) 0 var(--s3);
  border: 1px solid var(--line); border-radius: var(--r);
  background: transparent; color: var(--ink);
  font: inherit; font-size: 13px; cursor: pointer;
  transition: border-color var(--fast) var(--ease);
}
.sort__select:hover { border-color: var(--ink); }

.empty-state {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4);
  padding-block: var(--s8);
}

@media (max-width: 900px) {
  .collection-head { align-items: flex-start; }
  .collection-head__lede { padding-bottom: 0; }
  .collection-filters { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .filter-row + .filter-row:not(.filter-row--end) { padding-left: 0; border-left: 0; }
  .filter-row--end { margin-left: 0; justify-content: space-between; }
}
@media (max-width: 640px) {
  /* chips scroll sideways in one line instead of stacking into a tall block */
  .filter-row { flex-wrap: nowrap; min-width: 0; }
  /* padding/negative margin keep room for the focus ring the scroll box would otherwise clip */
  .chip-row { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: 5px; margin-block: -5px; }
  .chip-row::-webkit-scrollbar { display: none; }
}

/* ==========================================================================
   Static content pages (shipping, returns, care, contact, legal)
   ========================================================================== */
.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--s9);
  align-items: start;
  padding-bottom: clamp(56px, 7vw, 96px);
}
.page__head { grid-column: 1; display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s6); }
.page__body { grid-column: 1; max-width: 68ch; }
.page__more {
  grid-column: 2; grid-row: 1 / span 2;
  position: sticky; top: calc(var(--header-h) + var(--s5));
  display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--s5); background: var(--bg-raised); border: 1px solid var(--line);
}

.page-h {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2;
  margin: var(--s7) 0 var(--s4);
}
.page-h:first-child { margin-top: 0; }
.page-p { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin-bottom: var(--s4); }

.page-list { margin: 0 0 var(--s4); padding-left: 0; list-style: none; }
.page-list li {
  position: relative; padding-left: var(--s5); margin-bottom: var(--s3);
  font-size: 16px; line-height: 1.7; color: var(--ink-2);
}
.page-list li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 10px; height: 1px; background: var(--ink-3);
}

.page-rows { margin: 0 0 var(--s5); border-top: 1px solid var(--line); }
.page-rows > div {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line);
}
.page-rows dt { font-size: 15px; color: var(--ink-3); margin: 0; }
.page-rows dd { font-size: 15px; margin: 0; color: var(--ink); }

.page-links { display: flex; flex-direction: column; gap: var(--s3); }
.page-links a { font-size: 15px; display: flex; justify-content: space-between; gap: var(--s3); }

@media (max-width: 900px) {
  .page { grid-template-columns: 1fr; gap: var(--s7); }
  .page__head, .page__body, .page__more { grid-column: 1; }
  .page__more { grid-row: auto; position: static; }
  .page-rows > div { grid-template-columns: 1fr; gap: var(--s1); }
}

/* Compact footer (PDP and content pages) */
.footer__compact {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--s5); flex-wrap: wrap; font-size: 14px;
}

/* Very narrow screens (≤400px): the wordmark has min-width:0 and nowrap, so
   below this width its text spills over the icons rather than the flex box
   reporting overflow. Drop the search icon into the drawer and tighten. */
@media (max-width: 400px) {
  .header__search { display: none; }
  .wordmark__name { font-size: 17px; letter-spacing: 0.06em; padding-left: 0.06em; }
}
.nav-list__btn {
  padding: var(--s4) 0; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; cursor: pointer; text-align: left;
  font-family: var(--display); font-size: 24px; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center;
}
.nav-list__btn:hover { color: var(--accent); }

/* Below ~420px a two-up grid column is too narrow for name and price on one
   line (the nowrap price pushed the document 2px wide). Stack them. */
@media (max-width: 420px) {
  .prod-card__row { flex-direction: column; gap: var(--s1); }
  .prod-card__price { align-self: flex-start; }
}

/* ==========================================================================
   Checkout
   ========================================================================== */
.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--s9);
  align-items: start;
  padding-bottom: clamp(56px, 7vw, 96px);
}
.checkout__main { display: flex; flex-direction: column; gap: var(--s6); }

.checkout__summary {
  position: sticky; top: calc(var(--header-h) + var(--s5));
  display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--s6);
  background: var(--bg-raised); border: 1px solid var(--line);
}

.fieldset { border: 0; padding: 0; margin: 0 0 var(--s6); }
.fieldset__legend {
  font-family: var(--display); font-size: 22px;
  padding: 0; margin-bottom: var(--s5);
}

.field-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4);
}
.field2 { display: flex; flex-direction: column; gap: 6px; }
.field2--wide { grid-column: 1 / -1; }
.field2 label { font-size: 14px; font-weight: 500; }
.field2 input,
.field2 textarea {
  height: 52px; padding: 0 var(--s4);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-raised); color: var(--ink);
  font: inherit; font-size: 16px;
  transition: border-color var(--fast) var(--ease);
}
.field2 textarea { height: auto; padding: var(--s3) var(--s4); resize: vertical; line-height: 1.5; }
.field2 input:hover, .field2 textarea:hover { border-color: var(--ink-3); }
.field2 input:focus-visible, .field2 textarea:focus-visible { outline-offset: 0; border-color: var(--accent); }
.field2 [aria-invalid="true"] { border-color: var(--madder); box-shadow: inset 0 0 0 1px var(--madder); }
.field2__err { font-size: 13px; color: var(--madder); min-height: 16px; }

.form-error { font-size: 14px; color: var(--madder); min-height: 20px; margin-bottom: var(--s3); }

.sum-line {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
}
.sum-line__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sum-line__name { font-family: var(--display); font-size: 18px; }
.sum-line__meta { font-size: 13px; color: var(--ink-3); }
.sum-line__price { font-size: 15px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }

.sum-row {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: var(--s2) 0; font-size: 15px;
}
.sum-row--total {
  border-top: 1px solid var(--line); margin-top: var(--s2); padding-top: var(--s4);
  font-size: 18px; font-weight: 500;
}
.sum-row span:last-child { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .checkout { grid-template-columns: 1fr; gap: var(--s6); }
  .checkout__summary { position: static; order: -1; }
}
@media (max-width: 560px) {
  .field-grid { grid-template-columns: 1fr; }
  .field2--wide { grid-column: auto; }
}

/* ---------- Confirmation ---------- */
.confirm {
  max-width: 640px; margin-inline: auto;
  display: flex; flex-direction: column; gap: var(--s4);
  padding-block: var(--s7) clamp(56px, 7vw, 96px);
}
.confirm__mark {
  width: 64px; height: 64px; background-color: var(--neem);
  margin-bottom: var(--s3);
}
.confirm .page-rows { margin-top: var(--s4); }

/* ==========================================================================
   MOBILE OPTIMISATION
   Audited on a 375px viewport against the live site. Three things were wrong:
   tap targets below 44px, no persistent buy action on the PDP, and no
   allowance for notched-device safe areas.
   ========================================================================== */

/* --- Safe areas: notched phones have unusable space at the bottom -------- */
@supports (padding: env(safe-area-inset-bottom)) {
  .footer { padding-bottom: calc(var(--s7) + env(safe-area-inset-bottom)); }
  .drawer__foot { padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom)); }
  .toasts { bottom: calc(var(--s6) + env(safe-area-inset-bottom)); }
}

@media (max-width: 900px) {
  /* --- Tap targets ------------------------------------------------------
     Apple and Google both put the minimum around 44px. These were 17–30px,
     which is a miss-tap every time on a phone. Padding is used rather than
     height so the visual rhythm of the design is unchanged. */

  .accordions summary { min-height: 44px; padding-block: var(--s2); }

  .crumbs { gap: var(--s3); }
  .crumbs a { padding-block: var(--s3); }

  /* .link-rule padding: see the second audit pass below. */

  .footer__col { gap: 0; }
  .footer__col a { padding-block: 11px; }
  .footer__col > span:first-child { padding-bottom: var(--s2); }

  .footer__brand a { padding-block: var(--s2); }

  .search-panel__input { padding-block: var(--s2); }

  /* Cart quantity steppers were 34px. */
  .cart-line__qty button { width: 44px; height: 44px; }
  .cart-line__qty output { width: 36px; }
  /* .cart-line__remove padding: see the second audit pass below. */

  .page-links a { padding-block: var(--s2); }

  /* Sort control on the collection page */
  .sort__select { height: 48px; }

  /* Dye swatches: spacing so neighbouring colours aren't mis-tapped */
  .dye-swatches { gap: var(--s3); }
}

/* --- PDP sticky buy bar --------------------------------------------------
   On a phone the real Add to bag button sits ~1270px down the page, past the
   gallery and both option groups. This bar appears once that button scrolls
   out of view so buying is always one tap away, and hides again when the
   real button is back on screen (so there are never two competing CTAs). */
.buybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: none;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--gutter);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 28px rgba(30, 38, 33, 0.10);
  transform: translateY(101%);
  transition: transform var(--med) var(--ease);
}
.buybar.is-visible { transform: translateY(0); }

.buybar__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.buybar__name {
  font-family: var(--display); font-size: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.buybar__meta { font-size: 12px; color: var(--ink-3); }
.buybar .btn { flex: 1; height: 50px; padding-inline: var(--s5); white-space: nowrap; }

@media (max-width: 900px) {
  body[data-page="product"] .buybar { display: flex; }
  /* Keep the footer clear of the bar. */
  body[data-page="product"] .footer { padding-bottom: calc(var(--s7) + 76px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .buybar { transition: none; }
}

/* --- Checkout on mobile --------------------------------------------------
   The summary sits above the form (order: -1). Make it collapsible so the
   form is reachable without scrolling past every line item. */
@media (max-width: 900px) {
  .checkout__summary { padding: var(--s5); }
  .checkout__main h1 { margin-bottom: var(--s2); }
  .fieldset { margin-bottom: var(--s5); }
  /* Full-width primary action, comfortably tall. */
  #place-order { height: 56px; }
}

/* --- Smaller phones ------------------------------------------------------ */
@media (max-width: 400px) {
  .buybar { gap: var(--s3); padding-inline: var(--s4); }
  .buybar__info { display: none; }  /* price is on the button */
  .buybar .btn { width: 100%; }
}

/* --- Momentum + tap feedback -------------------------------------------- */
@media (hover: none) {
  /* Hover transforms never fire on touch and just delay the tap, so drop them. */
  .prod-card:hover .prod-card__art,
  .mat-card:hover .mat-card__art,
  .practice:hover .practice__art,
  .post:hover .post__art { transform: none; }

  /* Give a real pressed state instead. */
  .prod-card:active .prod-card__art,
  .mat-card:active .mat-card__art { opacity: 0.86; }
  .btn:active { transform: translateY(1px); }

  /* Remove the 300ms tap highlight flash on iOS */
  a, button { -webkit-tap-highlight-color: rgba(30, 38, 33, 0.08); }
}

/* Remaining sub-44px targets found in the second audit pass. */
@media (max-width: 900px) {
  .wordmark { min-height: 44px; justify-content: center; }
  .link-rule { padding-top: 11px; padding-bottom: 10px; }
  .footer__word { display: inline-flex; align-items: center; min-height: 44px; }
  .cart-line__remove { padding-block: 12px; }
}

/* ==========================================================================
   POLISH PASS — fixes from the mobile audit
   ========================================================================== */

/* --- Fail-safe reveal ----------------------------------------------------
   .reveal used to set opacity:0 unconditionally, so if JS errored or never
   ran, 12 sections of the home page stayed invisible. (That happened during
   development.) Now the hiding only applies once an inline <head> script has
   marked the document as JS-capable — no JS, no hiding, content just shows. */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* --- Reserve space for the JS-injected chrome ----------------------------
   shell.js replaces #shell-header after first paint. Without a reserved box
   the whole page jumped ~99px as the header appeared. These heights match
   the announcement bar + header at each breakpoint. */
/* announce 40 + header 88 + 1px rule; 40 + 64 + 1 on tablets; 34 + 64 + 1 ≤720. */
#shell-header { display: block; min-height: 129px; }
@media (max-width: 1080px) { #shell-header { min-height: 105px; } }
@media (max-width: 720px)  { #shell-header { min-height: 99px; } }

/* --- Interactive borders: contrast ---------------------------------------
   --line (#C9D2C3) is 1.29:1 against the page and 1.43:1 against raised
   panels — far below the 3:1 WCAG 1.4.11 minimum for identifying a control.
   Decorative hairlines may stay soft; anything a user must find and operate
   gets --line-strong (#7F8C78, 3.26:1). */
:root { --line-strong: #7F8C78; }

.field2 input,
.field2 textarea,
.input,
.sort__select,
.chip,
.opt-card,
.stepper,
.cart-line__qty { border-color: var(--line-strong); }

.field2 input:hover,
.field2 textarea:hover,
.sort__select:hover,
.chip:hover { border-color: var(--ink); }

/* --- Scroll containment --------------------------------------------------
   Without these, dragging inside an open drawer chains to the page behind and
   fires Android Chrome's pull-to-refresh; swiping past the last mat in the
   carousel triggers back-navigation. */
body.is-locked { overscroll-behavior: none; }
.drawer__body,
.search-panel,
.checkout__summary { overscroll-behavior: contain; }
.scroller { overscroll-behavior-x: contain; }

/* --- Touch responsiveness ------------------------------------------------
   manipulation disables double-tap-to-zoom on controls, removing the ~300ms
   click delay that makes steppers and swatches feel laggy on Android. */
button, .btn, .chip, .dye-swatch, .opt-card, .pdp__thumb,
.icon-btn, summary, .nav-list__btn, .sort__select { touch-action: manipulation; }

/* --- Long unbreakable strings --------------------------------------------
   Order receipts (TP-MU5CC8F6-0744F7) and email addresses have no break
   opportunity and ran off the right edge at 320px. */
.page-rows dd,
.sum-line__meta,
.cart-line__meta,
.confirm .prose,
#c-next { overflow-wrap: anywhere; }

/* --- Cart line at very narrow widths -------------------------------------
   The line total is nowrap; at 320px it was pushed outside the drawer. */
@media (max-width: 360px) {
  .cart-line__art { width: 64px; height: 84px; }
  .cart-line__foot { flex-wrap: wrap; row-gap: var(--s2); }
}

/* --- Toast must not cover the drawer's primary action --------------------
   The toast sits bottom-centre; with the cart drawer open on a phone it
   landed on top of the Checkout button and sliced it for 2.8s. */
body.is-locked .toasts { bottom: auto; top: calc(var(--s5) + env(safe-area-inset-top, 0px)); }

/* --- Checkout summary: collapsible on mobile -----------------------------
   The summary renders above the form on small screens, so with several items
   the first field sat ~500px down. It collapses to a one-line total that the
   customer can expand. product.js/checkout.js sets `open` per viewport. */
.checkout__summary > summary {
  display: none;
  cursor: pointer;
  font-family: var(--display);
  font-size: 20px;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 44px;
}
.checkout__summary > summary::-webkit-details-marker { display: none; }
.checkout__summary > summary::after {
  content: "";
  width: 10px; height: 10px; flex: none;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--med) var(--ease);
}
.checkout__summary[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

@media (max-width: 900px) {
  .checkout__summary > summary { display: flex; }
  .checkout__summary > h2 { display: none; }
}

/* Remove now sits on its own row, right-aligned, so it is never stacked
   directly above the "−" stepper button it used to overlap. */
.cart-line__actions { display: flex; justify-content: flex-end; margin-top: var(--s2); }
.cart-line__actions .cart-line__remove { align-self: auto; }

/* `display:flex` on a <details> defeats the UA rule that hides non-summary
   children when closed — they kept rendering inside a clipped box. Hide them
   explicitly so "collapsed" really is collapsed. */
.checkout__summary:not([open]) > *:not(summary) { display: none; }

/* Breadcrumbs wrapped onto two lines once the links gained tap padding. */
.crumbs { align-items: center; }

/* Collapsed, the panel is just a one-line total — don't reserve panel padding
   for content that isn't there. */
@media (max-width: 900px) {
  .checkout__summary:not([open]) { padding-block: var(--s3); }
}

/* ==========================================================================
   Dispatch console (admin.html) — internal, not customer-facing
   ========================================================================== */
.admin-order {
  border: 1px solid var(--line);
  background: var(--bg-raised);
  padding: var(--s5);
  margin-bottom: var(--s4);
  display: flex; flex-direction: column; gap: var(--s4);
}
.admin-order > header {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s4); flex-wrap: wrap;
  padding-bottom: var(--s3); border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.admin-order strong { font-family: var(--display); font-size: 18px; font-weight: 400; }
.admin-order__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); font-size: 14px; }
.admin-order__grid p { line-height: 1.6; margin-top: 4px; overflow-wrap: anywhere; }
.admin-order__grid ul { margin: 4px 0 0; padding-left: 18px; line-height: 1.7; }

.admin-badge {
  display: inline-block; margin-left: var(--s2);
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 12px; letter-spacing: 0.04em;
  background: var(--line); color: var(--ink);
}
.admin-badge[data-s="paid"]        { background: #D8E4D2; }
.admin-badge[data-s="cod_pending"] { background: #EFE0BE; }
.admin-badge[data-s="dispatched"]  { background: #CBD6E8; }
.admin-badge[data-s="delivered"]   { background: var(--neem); color: #fff; }
.admin-badge[data-s="failed"],
.admin-badge[data-s="verification_failed"] { background: #E8CFC9; }

@media (max-width: 640px) {
  .admin-order__grid { grid-template-columns: 1fr; gap: var(--s4); }
}

/* Dispatch console — action row, extra statuses, timeline */
.admin-actions { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }
.admin-act--awb { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.admin-act--awb select,
.admin-act--awb input {
  height: 44px; padding: 0 var(--s3);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 15px;
}
.admin-act--awb input { min-width: 210px; }

.admin-badge[data-s="confirmed"] { background: #D8E4D2; }
.admin-badge[data-s="packed"]    { background: #E6DCC8; }
.admin-badge[data-s="labelled"]  { background: #E2D7BC; }
.admin-badge[data-s="rto"],
.admin-badge[data-s="returned"]  { background: #E8CFC9; }
.admin-badge[data-s="refunded"],
.admin-badge[data-s="cancelled"] { background: var(--line); color: var(--ink-3); }

.admin-timeline { border-top: 1px solid var(--line); padding-top: var(--s3); }
.admin-timeline summary { cursor: pointer; font-size: 13px; color: var(--ink-3); }
.admin-timeline ol { margin: var(--s3) 0 0; padding-left: 18px; font-size: 13px; line-height: 1.8; }

@media (max-width: 640px) {
  .admin-act--awb input { min-width: 100%; }
  .admin-actions .btn { flex: 1; }
}

/* Shown on checkout while the server holds Razorpay TEST keys, so nobody
   mistakes a simulated payment for a real one — in either direction. */
.test-banner {
  grid-column: 1 / -1;
  padding: var(--s3) var(--s4);
  background: var(--turmeric);
  color: var(--ink);
  font-size: 14px; font-weight: 500; letter-spacing: 0.04em;
  text-align: center;
  border-radius: var(--r);
}

/* Seller disclosure — Consumer Protection (E-Commerce) Rules 2020 require the
   seller's legal name, address and GSTIN to be clearly accessible. */
.footer__legal {
  margin-top: var(--s4);
  font-size: 12px; line-height: 1.6;
  color: var(--ink-on-deep-2); opacity: 0.85;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Admin — catalogue editor (admin.html). Internal, not customer-facing.
   ========================================================================== */
.admin-top { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s6); padding-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.admin-tabs { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.admin-tabs .btn { margin-left: var(--s3); }

/* Two panes that scroll independently: the mat list stays put while the
   editor scrolls, and each pane only moves when the cursor is over it.
   --cat-top (set by admin-catalog.js) is the layout's distance from the top
   of the window; the save bar takes 80px at the bottom when shown. */
.cat-layout {
  display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--s7);
  align-items: stretch;
  height: calc(100vh - var(--cat-top, 200px) - 32px);
  min-height: 420px;
}
body.has-savebar .cat-layout { height: calc(100vh - var(--cat-top, 200px) - 112px); }
.cat-side { display: flex; flex-direction: column; min-height: 0; }
.cat-side__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: var(--s3); font-size: 13px; flex: none; }
.cat-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.cat-editor { min-height: 0; overflow: auto; overscroll-behavior: contain; padding-right: var(--s3); padding-bottom: var(--s6); }
.cat-item { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); background: transparent; }
.cat-item.is-selected { background: var(--bg-raised); box-shadow: inset 3px 0 0 var(--ink); }
.cat-item__main { flex: 1; display: flex; gap: var(--s3); align-items: center; padding: 10px 12px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit; min-width: 0; }
.cat-item__main:focus-visible { outline-offset: -3px; } /* the list scrolls, so an outer ring is clipped */
.cat-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.cat-item__name { font-family: var(--display); font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-item__moves { display: flex; flex-direction: column; justify-content: center; padding-right: 6px; }
.cat-item__moves button { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 13px; line-height: 1; padding: 4px 6px; }
.cat-item__moves button:hover:not(:disabled) { color: var(--ink); }
.cat-item__moves button:disabled { opacity: 0.25; cursor: default; }
.cat-thumb { width: 56px; height: 56px; flex: none; background: var(--bg-raised); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; }
.cat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-thumb__empty { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.cat-badge { display: inline-block; padding: 1px 7px; border-radius: var(--r-pill); font-size: 11px; letter-spacing: 0.04em; background: #E6DCC8; }
.cat-badge[data-live="1"] { background: #D8E4D2; }

.cat-editor__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s5); }
.cat-h { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.15; }
.cat-sub { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin: var(--s7) 0 var(--s4); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.cat-sub .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.cat-status { display: flex; align-items: center; gap: var(--s3); font-size: 13px; }
.cat-status .input { height: 40px; }

.cat-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
.cat-form .field2 label, .cat-form .field2__lbl { font-size: 13px; font-weight: 500; }
.cat-hint { font-size: 12px; line-height: 1.4; }
.admin .input { width: 100%; }
.admin textarea.input { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.admin select.input { padding-right: 32px; }
.cat-color { padding: 4px; height: 44px; width: 100%; cursor: pointer; }
.cat-checks { display: flex; gap: var(--s2) var(--s4); flex-wrap: wrap; padding-top: 6px; }
.cat-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.cat-check input { width: 16px; height: 16px; accent-color: var(--ink); }

.cat-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s4); }
.cat-photo { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cat-photo__img { position: relative; aspect-ratio: 1; background: var(--bg-raised); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; }
.cat-photo__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-photo__card { position: absolute; top: 8px; left: 8px; background: var(--ink); color: var(--bg); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; }
.cat-photo .input { height: 36px; font-size: 13px; padding-inline: 10px; }
.cat-photo__acts { display: flex; gap: 4px; }
.cat-photo__acts button { flex: 1; height: 30px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.cat-photo__acts button:hover:not(:disabled) { border-color: var(--ink); }
.cat-photo__acts button:disabled { opacity: 0.3; cursor: default; }
.cat-upload { aspect-ratio: 1; border: 1px dashed var(--ink-3); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: var(--s2); padding: var(--s4); font-size: 13px; line-height: 1.45; cursor: pointer; position: relative; }
.cat-upload:hover { border-color: var(--ink); background: var(--bg-raised); }
.cat-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.cat-slots { display: flex; flex-direction: column; gap: var(--s4); }
.cat-slot { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s4); border: 1px solid var(--line); background: var(--bg-raised); }
.cat-slot__thumb { width: 96px; height: 96px; flex: none; background: var(--bg); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; }
.cat-slot__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cat-backups { list-style: none; margin: 0; padding: 0; max-width: 560px; border-top: 1px solid var(--line); }
.cat-backups li { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }

.cat-danger { margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--line); display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }

.cat-savebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--ink); color: var(--bg); box-shadow: 0 -8px 24px rgba(30,38,33,0.18); }
.cat-savebar__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding-block: var(--s3); font-size: 14px; }
.cat-savebar .btn { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.cat-savebar .btn--ghost { background: transparent; color: var(--bg); border-color: rgba(255,255,255,0.5); }
.cat-savebar .btn--ghost:hover { background: var(--bg); color: var(--ink); }
body.has-savebar { padding-bottom: 80px; }

@media (max-width: 1000px) {
  /* Narrow screens: back to one normal scrolling page. */
  .cat-layout, body.has-savebar .cat-layout { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .cat-list { max-height: 320px; flex: none; }
  .cat-editor { overflow: visible; padding-right: 0; }
}
@media (max-width: 640px) {
  .cat-form { grid-template-columns: 1fr; }
  .cat-slot { flex-direction: column; }
  /* message + two buttons do not fit one row on a phone */
  .cat-savebar__inner { flex-wrap: wrap; }
  body.has-savebar { padding-bottom: 136px; }
}

/* ---------- WhatsApp button, order lookup, journal links, 404 ---------- */
.wa-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 10px 28px rgba(30,38,33,0.28);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
@media (hover: hover) {
  .wa-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(30,38,33,0.32); }
}
@media (max-width: 900px) {
  body[data-page="product"] .wa-fab { bottom: 92px; }
}
.track-form { display: flex; gap: var(--s3); flex-wrap: wrap; max-width: 520px; margin-block: var(--s4) var(--s5); }
.track-form .input { flex: 1 1 240px; }
.page-links--inline { margin: var(--s5) 0; gap: var(--s2); }
.page-links--inline a { justify-content: flex-start; }
.notfound { padding-block: clamp(56px, 10vw, 140px) clamp(56px, 8vw, 120px); display: flex; flex-direction: column; gap: var(--s4); }