@charset "utf-8";
/* ==========================================================================
   Keep Idaho Wild - storefront stylesheet
   Mobile-first, no framework, no build step.

   Written against the HTML contract documented in generator.py. Section map:
     01 tokens        02 reset/base      03 layout helpers   04 buttons
     05 header + nav  06 hero            07 sections/cards   08 category tiles
     09 trust         10 breadcrumbs     11 PDP              12 prose/policies
     13 footer + signup                  14 scrim + cart drawer
     15 focus/a11y    16 motion + print
   Palette is the store's existing brand palette. Two derived shades of the
   brand rust (--rust-deep, --rust-soft) exist only so small text on a rust
   surface clears WCAG AA - they are shades of #C8621A, not new colours.
   ========================================================================== */

/* ------------------------------------------------------------ 01 tokens -- */
:root {
  /* brand */
  --dark:       #1C2B1A;   /* deep charcoal-green: header, footer, hero      */
  --forest:     #2D5016;   /* accent: links, selected states                 */
  --cream:      #F2EDE4;   /* page background                                */
  --rust:       #C8621A;   /* call to action / highlight                     */
  --sage:       #C4D4BC;   /* muted supporting                               */
  --tan:        #C4B8A8;   /* muted supporting                               */

  /* derived shades of --rust, for AA-legible text on/of rust */
  --rust-deep:  #9C4A11;   /* white on this = 6.2:1 | on cream = 5.3:1       */
  --rust-soft:  #E89D60;   /* on the hero gradient 5.27:1 | on --dark 6.68:1  */

  /* ink */
  --ink:        #1C2B1A;   /* 12.8:1 on cream                                */
  --ink-muted:  #4A5A44;   /*  6.4:1 on cream                                */
  --on-dark:    #F2EDE4;
  --on-dark-dim:#CFC9BC;   /*  ~8:1 on --dark                                */

  /* surfaces + lines */
  --page:       #F2EDE4;
  --surface:    #FBF8F3;   /* raised card body                               */
  --photo-bg:   #FFFFFF;   /* product photos are shot on white               */
  --line:       #DDD3C4;   /* hairline on cream                              */
  --line-soft:  #E8E0D4;
  --line-dark:  rgba(242,237,228,.22);

  /* type */
  --font-head: "Oswald", "Arial Narrow", "Haettenschweiler", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* metrics */
  --maxw: 1200px;
  --pad: 1rem;
  --edge: max(var(--pad), calc((100% - var(--maxw)) / 2));
  --radius: 6px;
  --radius-lg: 10px;
  /* MEASURED, not guessed: .menu-btn 44px + .5rem padding top and bottom (16px)
     + the 3px border-bottom = 63px. min-height on a border-box element cannot
     shrink that, so a smaller token just desynced everything anchored to the
     header: #site-nav's top, scroll-padding-top, the nav panel's max-height and
     the sticky .pdp-media offset. */
  --header-h: 63px;
  --tap: 44px;
  --gap: clamp(.7rem, 2.4vw, 1.4rem);
  --shadow: 0 1px 2px rgba(28,43,26,.06), 0 8px 24px -14px rgba(28,43,26,.35);
  --shadow-lift: 0 2px 4px rgba(28,43,26,.08), 0 18px 34px -18px rgba(28,43,26,.45);
  --ease: cubic-bezier(.2,.7,.3,1);
}

@media (min-width: 900px) { :root { --pad: 1.5rem; --header-h: 66px; } }

/* -------------------------------------------------------- 02 reset/base -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: .01em;
  margin: 0 0 .5rem;
  text-wrap: balance;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { a:hover { color: var(--rust-deep); } }

img { max-width: 100%; height: auto; display: block; }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* JS visibility hooks - must beat the display rules set further down */
[hidden], .is-hidden { display: none !important; }

/* status paragraphs collapse until the script writes to them */
#signup-msg:empty, #checkout-msg:empty, .pdp-note:empty { display: none; }

/* skip link */
.skip {
  position: absolute;
  left: .5rem;
  top: -100px;
  z-index: 200;
  background: var(--rust-deep);
  color: #fff;
  font-family: var(--font-head);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .7rem 1.1rem;
  border-radius: var(--radius);
  text-decoration: none;
  box-shadow: var(--shadow-lift);
}
.skip:focus { top: .5rem; color: #fff; }

/* --------------------------------------------------- 03 layout helpers --- */
main { display: block; }

.section {
  padding: clamp(2rem, 5vw, 3.25rem) var(--edge);
}
.section + .section { padding-top: 0; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-bottom: clamp(1rem, 3vw, 1.6rem);
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--line);
}
.section-head h2 {
  margin: 0;
  font-size: clamp(1.35rem, 4.2vw, 1.85rem);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.text-link {
  font-family: var(--font-head);
  font-size: .95rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--rust-deep);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
@media (hover: hover) { .text-link:hover { border-bottom-color: var(--rust); color: var(--rust-deep); } }

.eyebrow {
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 .75rem;
  color: var(--rust-soft);
}

.page-head {
  padding: clamp(1.75rem, 5vw, 2.75rem) var(--edge) 0;
}
.page-head h1 {
  font-size: clamp(1.9rem, 7vw, 3rem);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 0;
}
.page-head h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: .85rem;
  background: var(--rust);
}
.page-head p {
  margin: 1rem 0 0;
  max-width: 62ch;
  color: var(--ink-muted);
  font-size: 1.05rem;
}

/* <noscript> stand-in, printed where an interactive control would have been.
   For a visitor without JS this IS the control - it says what does not work and
   what to do instead - so it is body-sized on a raised panel, not a grey aside.
   The cream panel keeps it legible on the dark footer and hero as well as on
   the cream page (ink on --surface = 14:1). */
.noscript-note {
  margin: 0 0 1.25rem;
  padding: .85rem 1rem;
  max-width: 62ch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--rust);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.55;
}
.noscript-note:last-child { margin-bottom: 0; }
.noscript-note a {
  color: var(--forest);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
@media (hover: hover) { .noscript-note a:hover { color: var(--rust-deep); } }

/* ----------------------------------------------------------- 04 buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--tap);
  padding: .7rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--rust-deep);
  border-color: var(--rust-deep);
  color: #fff;
}
@media (hover: hover) {
  .btn-primary:hover { background: var(--rust); border-color: var(--rust); color: #fff; }
}

.btn-ghost {
  background: transparent;
  border-color: rgba(28,43,26,.45);
  color: var(--ink);
}
@media (hover: hover) {
  .btn-ghost:hover { border-color: var(--ink); background: rgba(28,43,26,.06); }
}

/* An inactive control must still be readable - a ghosted button reads as a
   rendering bug. Muted surface, full-contrast label, obvious non-affordance. */
.btn[disabled], .btn:disabled {
  background: var(--tan);
  border-color: var(--tan);
  color: #2E2A22;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-ghost[disabled], .btn-ghost:disabled {
  background: transparent;
  border-color: rgba(28,43,26,.28);
  color: var(--ink-muted);
}

/* ------------------------------------------------------ 05 header + nav -- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: var(--header-h);
  padding: .5rem var(--edge);
  background: var(--dark);
  color: var(--on-dark);
  border-bottom: 3px solid var(--forest);
}

.brand {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.02rem, 4.2vw, 1.3rem);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--on-dark);
  text-decoration: none;
  white-space: nowrap;
  margin-right: auto;
}
@media (hover: hover) { .brand:hover { color: #fff; } }

.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  margin-left: -.5rem;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  color: var(--on-dark);
  font-size: 1.25rem;
  line-height: 1;
}
.menu-btn[aria-expanded="true"] { background: rgba(242,237,228,.14); border-color: var(--sage); }

.cart-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: var(--tap);
  padding: .4rem .85rem;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  color: var(--on-dark);
  font-family: var(--font-head);
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (hover: hover) { .cart-btn:hover { background: rgba(242,237,228,.12); border-color: var(--sage); } }

.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--rust-deep);
  color: #fff;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* nav: off-canvas panel on phones ------------------------------------------ */
.site-nav {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 85;
  display: flex;
  flex-direction: column;
  background: var(--dark);
  border-bottom: 3px solid var(--forest);
  padding: .25rem var(--edge) 1rem;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s var(--ease), transform .22s var(--ease), visibility .22s;
}
.site-nav.open, .site-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.site-nav a {
  display: block;
  padding: .95rem .25rem;
  min-height: var(--tap);
  color: var(--on-dark);
  font-family: var(--font-head);
  font-size: 1.05rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--line-dark);
}
.site-nav a:last-child { border-bottom: 0; }
@media (hover: hover) { .site-nav a:hover { color: var(--rust-soft); } }

@media (min-width: 900px) {
  .menu-btn { display: none; }
  .brand { margin-right: clamp(1rem, 3vw, 2.25rem); }
  .site-nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: clamp(.75rem, 2vw, 1.6rem);
    margin-right: auto;
    padding: 0;
    max-height: none;
    overflow: visible;
    background: transparent;
    border: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .site-nav a {
    padding: .35rem 0;
    min-height: 0;
    font-size: .95rem;
    letter-spacing: .07em;
    border-bottom: 2px solid transparent;
  }
  .site-nav a:last-child { border-bottom: 2px solid transparent; }
  @media (hover: hover) { .site-nav a:hover { border-bottom-color: var(--rust); color: var(--on-dark); } }
}

/* --------------------------------------------------------------- 06 hero -- */
.hero {
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(45,80,22,.55) 0%, rgba(45,80,22,0) 60%),
    linear-gradient(180deg, #223420 0%, var(--dark) 100%);
  color: var(--on-dark);
  padding: clamp(2.75rem, 10vw, 6rem) var(--edge);
  border-bottom: 4px solid var(--rust);
}
.hero-inner { max-width: 34ch; }
.hero-title {
  font-size: clamp(2.35rem, 12vw, 4.6rem);
  font-weight: 700;
  line-height: .96;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: #fff;
}
.hero-sub {
  font-size: clamp(1rem, 3.2vw, 1.15rem);
  color: var(--on-dark-dim);
  margin: 0 0 1.85rem;
  max-width: 46ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-cta .btn { flex: 1 1 auto; min-width: 12rem; }
.hero .btn-ghost { color: var(--on-dark); border-color: rgba(242,237,228,.55); }
@media (hover: hover) {
  .hero .btn-ghost:hover { background: rgba(242,237,228,.12); border-color: var(--on-dark); color: #fff; }
}
@media (min-width: 700px) {
  .hero-inner { max-width: 40ch; }
  .hero-cta .btn { flex: 0 0 auto; }
}

/* ------------------------------------------------- 07 product grid/cards -- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
@media (min-width: 640px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .18s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
@media (hover: hover) {
  .card:hover { border-color: var(--tan); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
  .card:hover .card-media img { transform: scale(1.03); }
  .card:hover .card-title { color: var(--rust-deep); }
}
.card:focus-within { border-color: var(--tan); box-shadow: var(--shadow); }

.card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.card-media {
  position: relative;
  background: var(--photo-bg);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.card-media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .35s var(--ease);
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .8rem .85rem 1rem;
  flex: 1 1 auto;
}
.card-title {
  font-size: clamp(.98rem, 2.6vw, 1.12rem);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
  transition: color .18s var(--ease);
}
.card-price {
  margin: auto 0 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------- 08 category tiles ------ */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
@media (min-width: 640px)  { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.cat {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  background: var(--photo-bg);
  transition: border-color .18s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.cat img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--photo-bg);
  transition: transform .35s var(--ease);
}
.cat span {
  display: block;
  padding: .7rem .6rem;
  background: var(--dark);
  color: var(--on-dark);
  font-family: var(--font-head);
  font-size: .88rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}
@media (hover: hover) {
  .cat:hover { border-color: var(--tan); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
  .cat:hover img { transform: scale(1.04); }
  .cat:hover span { background: var(--forest); }
}

/* -------------------------------------------------------------- 09 trust -- */
.trust { }
.trust-grid {
  display: grid;
  gap: clamp(1rem, 3vw, 1.75rem);
  padding: clamp(1.4rem, 4vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid var(--forest);
  border-radius: var(--radius-lg);
}
@media (min-width: 800px) { .trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trust-grid h3 {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 .4rem;
}
.trust-grid p { margin: 0; color: var(--ink-muted); font-size: .96rem; }

/* -------------------------------------------------------- 10 breadcrumbs -- */
.crumbs {
  padding: 1rem var(--edge) 0;
  font-size: .85rem;
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}
.crumbs a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid var(--line); }
@media (hover: hover) { .crumbs a:hover { color: var(--rust-deep); border-bottom-color: var(--rust); } }
.crumbs span { color: var(--tan); }
.crumbs span:last-child { color: var(--ink); font-weight: 500; }

/* ---------------------------------------------------------------- 11 PDP -- */
.pdp {
  display: grid;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  padding: clamp(1.1rem, 3.5vw, 2rem) var(--edge) clamp(2rem, 5vw, 3rem);
  align-items: start;
}
/* grid items default to min-width:auto - without this the horizontally
   scrolling thumb strip would widen the whole page on a phone */
.pdp > * { min-width: 0; }
@media (min-width: 900px) {
  .pdp { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 4vw, 3.5rem); }
  .pdp-media { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}

.pdp-main {
  background: var(--photo-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pdp-main img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Six 74px thumbs + gaps measure 484px against a 443px column at 1440, so the
   strip used to scroll with the last thumbnail clipped and nothing on screen
   saying it could scroll. Wrapping shows every thumbnail instead: no hidden
   sixth image, no affordance to invent. */
.pdp-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .6rem;
  padding-bottom: .3rem;
}
.pdp-thumbs:empty { display: none; }

.thumb {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  padding: 0;
  background: var(--photo-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .thumb:hover { border-color: var(--tan); } }
.thumb.is-active, .thumb.active, .thumb.is-selected, .thumb[aria-current="true"] {
  border-color: var(--forest);
  box-shadow: 0 0 0 2px rgba(45,80,22,.28);
}
@media (min-width: 900px) { .thumb { width: 74px; height: 74px; } }

.pdp-info { min-width: 0; }

.pdp-title {
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 .5rem;
}

.pdp-price {
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 4.5vw, 1.7rem);
  font-weight: 600;
  color: var(--rust-deep);
  font-variant-numeric: tabular-nums;
  margin: 0 0 1.5rem;
}

/* option pickers ---------------------------------------------------------- */
.optgroup { margin: 0 0 1.35rem; }

.optlabel {
  display: block;
  margin-bottom: .55rem;
  font-family: var(--font-head);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.optlabel b {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .04em;
}

.optrow {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: .55rem .95rem;
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  transition: border-color .15s var(--ease), background-color .15s var(--ease),
              color .15s var(--ease), box-shadow .15s var(--ease);
}
@media (hover: hover) {
  .opt:hover { border-color: var(--ink-muted); }
}

/* size / generic chips */
.opt.chip {
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: .04em;
  padding: .55rem .8rem;
}

/* colour swatches carry long, compound names - keep them as labelled pills */
.opt.swatch { padding-left: .7rem; justify-content: flex-start; text-align: left; }
.opt.swatch::before {
  content: "";
  display: none;
  flex: 0 0 auto;
  width: .95rem;
  height: .95rem;
  border-radius: 50%;
  border: 1px solid rgba(28,43,26,.3);
  background: var(--tan);
}
/* the dot shows only for colour names we can render honestly; it echoes the
   leading (garment) colour, and the full name is always in the label text */
.opt.swatch[data-value^="Beige"]::before,
.opt.swatch[data-value^="Black"]::before,
.opt.swatch[data-value^="Dark Chocolate"]::before,
.opt.swatch[data-value^="Dark Green"]::before,
.opt.swatch[data-value^="Dark Navy"]::before,
.opt.swatch[data-value^="Evergreen"]::before,
.opt.swatch[data-value^="Forest Green"]::before,
.opt.swatch[data-value^="Grey"]::before,
.opt.swatch[data-value^="Heather Grey"]::before,
.opt.swatch[data-value^="Khaki"]::before,
.opt.swatch[data-value^="Navy"]::before,
.opt.swatch[data-value^="Olive"]::before,
.opt.swatch[data-value^="Spruce"]::before,
.opt.swatch[data-value^="White"]::before { display: inline-block; }

.opt.swatch[data-value^="Beige"]::before          { background: #D9CDB8; }
.opt.swatch[data-value^="Black"]::before          { background: #141414; }
.opt.swatch[data-value^="Dark Chocolate"]::before { background: #3B2A21; }
.opt.swatch[data-value^="Dark Green"]::before     { background: #23361F; }
.opt.swatch[data-value^="Dark Navy"]::before      { background: #1C2436; }
.opt.swatch[data-value^="Evergreen"]::before      { background: #1F3A2C; }
.opt.swatch[data-value^="Forest Green"]::before   { background: #2D5016; }
.opt.swatch[data-value^="Grey"]::before           { background: #8A8A88; }
.opt.swatch[data-value^="Heather Grey"]::before   { background: #B7B5AF; }
.opt.swatch[data-value^="Khaki"]::before          { background: #B9A77F; }
.opt.swatch[data-value^="Navy"]::before           { background: #22304C; }
.opt.swatch[data-value^="Olive"]::before          { background: #575B33; }
.opt.swatch[data-value^="Spruce"]::before         { background: #35534A; }
.opt.swatch[data-value^="White"]::before          { background: #FFFFFF; border-color: rgba(28,43,26,.45); }

/* selected */
.opt.is-selected, .opt.selected, .opt[aria-pressed="true"] {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--on-dark);
  box-shadow: inset 0 0 0 2px rgba(242,237,228,.22);
  font-weight: 600;
}
.opt.is-selected::before, .opt.selected::before, .opt[aria-pressed="true"]::before {
  border-color: rgba(242,237,228,.65);
}
@media (hover: hover) {
  .opt.is-selected:hover, .opt.selected:hover, .opt[aria-pressed="true"]:hover { border-color: var(--dark); }
}

/* unavailable - dimmed and struck through */
.opt.is-unavailable {
  opacity: .42;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  border-style: dashed;
  cursor: not-allowed;
  box-shadow: none;
}
@media (hover: hover) { .opt.is-unavailable:hover { border-color: var(--line); } }
.opt.is-unavailable.is-selected,
.opt.is-unavailable.selected,
.opt.is-unavailable[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: none;
  font-weight: 500;
}

.add-btn {
  width: 100%;
  margin: .35rem 0 .75rem;
  font-size: 1.05rem;
  padding: .95rem 1.5rem;
}

.pdp-note {
  margin: 0 0 1.25rem;
  padding: .6rem .8rem;
  background: rgba(200,98,26,.09);
  border-left: 3px solid var(--rust);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .92rem;
  color: var(--ink);
}

.pdp-desc {
  border-top: 1px solid var(--line);
  padding-top: 1.35rem;
  color: var(--ink);
  font-size: 1rem;
}
.pdp-desc p { margin: 0 0 .9rem; }
.pdp-desc strong { font-weight: 600; }
.pdp-desc em { color: var(--ink-muted); }
.pdp-desc ul, .pdp-desc ol { margin: 0 0 1rem; padding-left: 1.15rem; }
.pdp-desc li { margin-bottom: .4rem; }
.pdp-desc ul { list-style: none; padding-left: 0; }
.pdp-desc ul li {
  position: relative;
  padding-left: 1.25rem;
}
.pdp-desc ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .42rem;
  height: .42rem;
  background: var(--rust);
  border-radius: 1px;
  transform: rotate(45deg);
}

.pdp-fine {
  margin: 1.35rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .87rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
.pdp-fine a { color: var(--forest); }

/* ------------------------------------------------------------- 12 prose --- */
.prose {
  max-width: 70ch;
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--ink);
}
.prose > :first-child { margin-top: 0; }
.prose h2 {
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 2.4rem 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--line);
}
.prose h3 {
  font-size: clamp(1.12rem, 3.2vw, 1.3rem);
  letter-spacing: .03em;
  margin: 2rem 0 .6rem;
  color: var(--forest);
}
.prose h4 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 1.5rem 0 .4rem;
}
.prose p { margin: 0 0 1.15rem; }
.prose ul, .prose ol { margin: 0 0 1.3rem; padding-left: 1.35rem; }
.prose li { margin-bottom: .55rem; }
.prose li::marker { color: var(--rust); }
.prose strong { font-weight: 600; }
.prose a { color: var(--forest); text-decoration: underline; }
@media (hover: hover) { .prose a:hover { color: var(--rust-deep); } }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4rem;
  font-size: .95rem;
}
.prose th, .prose td {
  padding: .6rem .7rem;
  border: 1px solid var(--line);
  text-align: left;
}
.prose th { background: var(--surface); font-family: var(--font-head); letter-spacing: .04em; text-transform: uppercase; }
.prose blockquote {
  margin: 0 0 1.3rem;
  padding: .3rem 0 .3rem 1.1rem;
  border-left: 3px solid var(--sage);
  color: var(--ink-muted);
}

/* ------------------------------------------------- 13 footer + signup ----- */
.site-footer {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(2.25rem, 6vw, 3.5rem) var(--edge) 2rem;
  background: var(--dark);
  color: var(--on-dark-dim);
  border-top: 4px solid var(--forest);
  font-size: .95rem;
}

.foot-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1.25rem;
}
@media (min-width: 700px)  { .foot-cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; } }

.foot-cols > div { min-width: 0; }
.foot-about { grid-column: 1 / -1; }
@media (min-width: 700px) { .foot-about { grid-column: auto; } }

.foot-brand {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .11em;
  color: var(--on-dark);
  margin: 0 0 .5rem;
}
.foot-note { margin: 0; max-width: 34ch; color: var(--on-dark-dim); }

.site-footer h4 {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 .75rem;
}
.site-footer .foot-cols a {
  display: block;
  padding: .38rem 0;
  color: var(--on-dark-dim);
  text-decoration: none;
}
@media (hover: hover) { .site-footer .foot-cols a:hover { color: var(--on-dark); text-decoration: underline; } }

.signup {
  margin: clamp(2rem, 5vw, 2.75rem) 0 0;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  background: rgba(242,237,228,.07);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  max-width: 34rem;
}
.signup label {
  display: block;
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--on-dark);
  margin-bottom: .7rem;
}
.signup-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.signup input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: var(--tap);
  padding: .7rem .85rem;
  background: var(--cream);
  color: var(--ink);
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-size: 1rem;
}
/* 4.87:1 on the --cream input fill. The old #7A8474 measured 3.35:1, and the
   obvious first darkening (#66705F) still only reaches 4.45:1 - short of AA. */
.signup input[type="email"]::placeholder { color: #5F6A5A; opacity: 1; }
.signup input[type="email"]:focus { border-color: var(--rust); }
.signup button {
  flex: 0 0 auto;
  min-height: var(--tap);
  padding: .7rem 1.6rem;
  background: var(--rust-deep);
  color: #fff;
  border: 2px solid var(--rust-deep);
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
@media (hover: hover) { .signup button:hover { background: var(--rust); border-color: var(--rust); } }

.signup-msg {
  margin: .75rem 0 0;
  font-size: .9rem;
  color: var(--on-dark);
}
.signup-msg.is-error, .signup-msg[data-state="error"] { color: #F0B48A; }
.signup-msg.is-ok, .signup-msg[data-state="ok"] { color: var(--sage); }

.copyright {
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-dark);
  font-size: .85rem;
  color: var(--on-dark-dim);
}
.copyright a { color: var(--sage); }
@media (hover: hover) { .copyright a:hover { color: var(--on-dark); } }

/* ------------------------------------------ 14 scrim + cart drawer -------- */
/* The scrim serves two different panels and needs a different layer for each:
     nav open  - app.js sets body.nav-open only. The scrim must stay BELOW the
                 header (90) and the nav panel (85) or it swallows the taps
                 that close the menu again.
     cart open - app.js sets .open/.is-open on the scrim itself. The drawer is
                 modal, so the scrim rises above the header and dims it. */
#scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(20,30,18,.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
body.nav-open #scrim, body.is-nav-open #scrim { opacity: 1; visibility: visible; }

#scrim.open, #scrim.is-open, #scrim.show,
body.drawer-open #scrim, body.is-drawer-open #scrim, body.cart-open #scrim {
  opacity: 1;
  visibility: visible;
  z-index: 95;
}
/* belt and braces: raise the scrim for the drawer even if the script stops
   putting a class on the scrim itself */
@supports selector(html:has(body)) {
  body:has(#cart.open) #scrim, body:has(#cart.is-open) #scrim {
    opacity: 1;
    visibility: visible;
    z-index: 95;
  }
  body:has(#site-nav.open) #scrim, body:has(#site-nav.is-open) #scrim {
    opacity: 1;
    visibility: visible;
  }
}

body.drawer-open, body.is-drawer-open,
body.cart-open, body.nav-open, body.no-scroll { overflow: hidden; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--page);
  border-left: 4px solid var(--forest);
  box-shadow: -18px 0 40px -20px rgba(20,30,18,.6);
  transform: translateX(101%);
  visibility: hidden;
  transition: transform .28s var(--ease), visibility .28s;
  overscroll-behavior: contain;
}
.drawer.open, .drawer.is-open { transform: translateX(0); visibility: visible; }
@media (min-width: 560px) { .drawer { width: 420px; } }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem var(--pad);
  background: var(--dark);
  color: var(--on-dark);
  flex: 0 0 auto;
}
.drawer-head h2 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
#close-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  margin: -.35rem -.4rem -.35rem 0;
  background: transparent;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  color: var(--on-dark);
  font-size: 1.5rem;
  line-height: 1;
}
@media (hover: hover) { #close-cart:hover { background: rgba(242,237,228,.14); border-color: var(--sage); } }

#cart-lines {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 var(--pad);
  -webkit-overflow-scrolling: touch;
}
#cart-lines:empty { flex: 0 0 auto; padding: 0; }

/* Rows are built by app.js:
     .cart-line > a.line-media > img.line-img
                > div.line-body > a.line-title, p.line-opts, p.line-unit,
                                  div.qty > button.qty-btn, span.qty-val,
                                            button.qty-btn, button.line-remove
                > p.line-total
   .cart-notice (catalog-drift message) is also a direct child of #cart-lines,
   so the row layout deliberately skips it. */
#cart-lines > *:not(.cart-notice) {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
#cart-lines > *:last-child { border-bottom: 0; }
#cart-lines > * > * { min-width: 0; }

.line-media {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  display: block;
  background: var(--photo-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.line-img, #cart-lines > * > img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  background: var(--photo-bg);
}
@media (hover: hover) { .line-media:hover { border-color: var(--tan); } }

.line-body, #cart-lines > * > div { flex: 1 1 auto; }

.line-title {
  display: block;
  font-family: var(--font-head);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  margin: 0 0 .25rem;
}
@media (hover: hover) { .line-title:hover { color: var(--rust-deep); } }

.line-opts {
  margin: 0 0 .1rem;
  font-size: .86rem;
  color: var(--ink-muted);
}
.line-unit {
  margin: 0 0 .55rem;
  font-size: .82rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.line-total {
  flex: 0 0 auto;
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

/* stepper + remove share one row; the remove control is a text button, so the
   pill outline is drawn on the two step buttons rather than around the group */
.qty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}
.qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 1.15rem;
  line-height: 1;
}
@media (hover: hover) {
  .qty-btn:hover { border-color: var(--ink-muted); background: var(--sage); }
}
.qty-btn:disabled { opacity: .4; cursor: not-allowed; background: var(--surface); }
.qty-val {
  min-width: 1.9rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.line-remove {
  margin-left: .3rem;
  min-height: var(--tap);
  padding: .25rem .35rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  color: var(--ink-muted);
  font-size: .84rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .line-remove:hover { color: var(--rust-deep); }
}

/* catalog-drift notice: states plainly that something changed */
.cart-notice {
  margin: 1rem 0 .25rem;
  padding: .85rem .9rem;
  background: rgba(200,98,26,.09);
  border: 1px solid var(--tan);
  border-left: 4px solid var(--rust);
  border-radius: var(--radius);
  font-size: .9rem;
  line-height: 1.5;
}
.cart-notice p { margin: 0 0 .55rem; }
.notice-body { margin-bottom: .7rem; }
/* the notice reuses .line-title / .line-opts for its heading and detail rows */
.cart-notice .line-title { margin-bottom: .4rem; }
.cart-notice .line-opts, .cart-notice .line-unit { margin-bottom: .35rem; color: var(--ink); }

/* app.js ships this button as "cart-notice-dismiss line-remove", so the
   text-link look inherited from .line-remove has to be cancelled here */
.cart-notice-dismiss {
  margin-left: 0;
  min-height: 2.25rem;
  padding: .35rem .9rem;
  background: transparent;
  border: 1.5px solid var(--rust-deep);
  border-radius: var(--radius);
  color: var(--rust-deep);
  font-family: var(--font-head);
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
@media (hover: hover) {
  .cart-notice-dismiss:hover { background: var(--rust-deep); color: #fff; text-decoration: none; }
}

/* mailto fallback offered in #checkout-msg while online checkout is not live */
.checkout-mail {
  color: var(--forest);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
@media (hover: hover) { .checkout-mail:hover { color: var(--rust-deep); } }

.cart-empty {
  margin: 0;
  padding: 2.5rem var(--pad);
  text-align: center;
  color: var(--ink-muted);
  font-family: var(--font-head);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.drawer-foot {
  flex: 0 0 auto;
  padding: 1rem var(--pad) calc(1rem + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.cart-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-head);
  font-size: 1.05rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.cart-sum strong {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--rust-deep);
  font-variant-numeric: tabular-nums;
}
.cart-fine {
  margin: 0 0 .9rem;
  font-size: .82rem;
  color: var(--ink-muted);
}
#checkout-btn { width: 100%; }

/* A Checkout button that cannot take payment must not be the loudest thing in
   the drawer. When app.js disables it - no checkout endpoint configured, or an
   empty bag - it drops the primary orange for a muted surface and gives the
   floor to the sentence underneath. Not an opacity wash: the label stays at
   7.6:1 so the button is still readable, just plainly not pressable. */
#checkout-btn:disabled,
#checkout-btn[disabled],
#checkout-btn[aria-disabled="true"],
#checkout-btn.is-unavailable {
  background: var(--tan);
  border-color: var(--tan);
  color: #24211B;
  font-weight: 500;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* Carries the plain-language status, including "online checkout is not set up
   on this store yet". That sentence is the real content of this footer once the
   button is dead, so it is body-sized on its own panel - never fine print.
   (#checkout-msg:empty is display:none up in section 02, so the panel only
   exists when there is something to say.) */
#checkout-msg {
  margin: .85rem 0 0;
  padding: .7rem .85rem;
  background: rgba(200,98,26,.09);
  border-left: 4px solid var(--rust);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
}
#checkout-msg.is-error, #checkout-msg[data-state="error"] { color: var(--rust-deep); font-weight: 500; }
#checkout-msg.is-ok, #checkout-msg[data-state="ok"] { border-left-color: var(--forest); }

/* ---------------------------------------------------------- 15 focus/a11y - */
:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 2px;
  border-radius: 3px;
}
.site-header :focus-visible,
.site-nav :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.drawer-head :focus-visible,
.cat :focus-visible {
  outline-color: var(--sage);
}
.card-link:focus-visible { outline-offset: -3px; }

::selection { background: var(--sage); color: var(--ink); }

/* ------------------------------------------------------ 16 motion + print - */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .cat:hover { transform: none; }
  .card:hover .card-media img, .cat:hover img { transform: none; }
  .btn:active { transform: none; }
}

@media print {
  .site-header, .site-nav, .cart-btn, .menu-btn, #scrim, .drawer,
  .signup, .skip, .hero-cta, .pdp-thumbs { display: none !important; }
  body { background: #fff; color: #000; }
  .site-footer { background: #fff; color: #000; border-top: 1px solid #000; }
  .site-footer h4, .foot-brand, .copyright, .foot-note { color: #000; }
  a { color: #000; }
  .pdp { display: block; }
}