@import url("./fonts.css");

/* ============================================================================
   ASORTIE : Design System
   Direction: editorial-heritage leather goods. See DESIGN.md.
   Palette family: Black and Tan (cool bone + true off-black + deep olive + one
   cognac accent). Shape lock: all-sharp, radius 0.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */
:root {
  /* ink
     Every tone in this ramp is text-safe: all of them clear WCAG AA 4.5:1 on
     the darkest light surface (--bone). --hairline is the only deliberately
     low-contrast tone and is reserved for decoration, never for text. */
  --ink:        #111110;   /* 16.11:1 on bone */
  --ink-85:     #2c2c29;
  --ink-70:     #4a4a46;   /*  7.59:1 */
  --ink-45:     #666663;   /*  4.91:1  meta, labels, facet counts */
  --ink-25:     #6a6a65;   /*  4.64:1  fine print, placeholders */
  --hairline:   #b3b2ab;   /* decorative only (3:1, not for text) */

  /* surfaces */
  --bone:       #eeede7;
  --bone-2:     #e6e5dd;
  --chalk:      #fbfbf9;
  --white:      #ffffff;

  /* structure */
  --olive:      #333c2c;
  --olive-2:    #3f4a36;
  --olive-3:    #55613f;

  /* accent (locked, single) */
  --cognac:     #9c5322;
  --cognac-2:   #b8693a;
  --cognac-3:   #f0e2d6;

  /* status only */
  --clay:       #8c3a2b;

  --line:       #d9d8d0;
  --line-2:     #c7c6bd;
  --line-dark:  rgba(255, 255, 255, .16);

  /* type */
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --ui: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* rhythm */
  --gut: 24px;
  --maxw: 1400px;
  --sec-y: 96px;

  /* motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 180ms;
  --t: 320ms;
  --t-slow: 620ms;

  --head-h: 72px;
}

/* ---------------------------------------------------------------- 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; } }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: normal;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--bone-2); }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* Keyboard focus ring. Deliberately declared once, globally, and never
   suppressed by a component: four inputs used to set outline:none after this
   rule and silently removed the only focus indicator a keyboard user has. */
:focus-visible {
  outline: 2px solid var(--cognac);
  outline-offset: 3px;
  border-radius: 0;
}
/* Inside a dark band the accent ring does not carry enough contrast. */
.sec--dark :focus-visible, .sec--ink :focus-visible,
.foot :focus-visible, .phead--dark :focus-visible {
  outline-color: var(--bone);
}
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; }
}

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--bone); padding: 12px 20px; font-size: 13px;
}
.skip:focus { left: 12px; top: 12px; }

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

/* --------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: 940px; }
.wrap--mid { max-width: 1120px; }

.sec { padding: var(--sec-y) 0; }
.sec--tight { padding: 64px 0; }
.sec--flush-top { padding-top: 0; }
.sec--dark { background: var(--olive); color: var(--bone); }
.sec--ink { background: var(--ink); color: var(--bone); }
.sec--chalk { background: var(--chalk); }

.grid { display: grid; gap: var(--gut); }

/* ---------------------------------------------------------- typography */
.d1, .d2, .d3, .d4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0;
  font-optical-sizing: auto;
  text-wrap: balance;
}
/* Measured: at 84px "Încălțăminte care" needs 650px, which wrapped inside
   the 560px copy column and produced a 3-line hero headline. Capped at
   4.5rem and paired with a wider column so the line holds. */
.d1 { font-size: clamp(2.45rem, 5.6vw, 4.5rem); }
.d2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.04; }
.d3 { font-size: clamp(1.6rem, 2.9vw, 2.35rem); line-height: 1.1; }
.d4 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.2; }

.d1 em, .d2 em, .d3 em, .d4 em { font-style: italic; padding-bottom: .06em; }

.lede {
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.62;
  color: var(--ink-70);
  max-width: 62ch;
  margin: 0;
  text-wrap: pretty;
}
.sec--dark .lede, .sec--ink .lede { color: rgba(238, 237, 231, .78); }

.body-sm { font-size: .9rem; line-height: 1.65; color: var(--ink-70); }

/* micro label */
.micro {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.sec--dark .micro, .sec--ink .micro { color: rgba(238, 237, 231, .6); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.sec--dark .rule, .sec--ink .rule { background: var(--line-dark); }

/* --------------------------------------------------------------- header */
.announce {
  background: var(--ink);
  color: var(--bone);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
}
.announce__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 38px;
}
.announce__rot { position: relative; height: 38px; flex: 1; overflow: hidden; }
.announce__item {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.announce__item.is-on { opacity: 1; transform: none; }
.announce__side { display: flex; gap: 20px; flex: none; }
.announce__side a { color: rgba(238, 237, 231, .72); transition: color var(--t-fast) var(--ease); }
.announce__side a:hover { color: var(--bone); }
@media (max-width: 900px) { .announce__side { display: none; } .announce__in { justify-content: center; } }

.head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(238, 237, 231, .88);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.head.is-stuck { border-bottom-color: var(--line); background: rgba(238, 237, 231, .96); }

.head__in {
  display: flex; align-items: center; gap: 28px;
  height: var(--head-h);
}
.head__logo { flex: none; display: flex; align-items: center; }
.head__logo img { height: 40px; width: auto; background: none; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav__link {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  font-size: 13px; font-weight: 500; letter-spacing: .02em;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--cognac); }
.nav__link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t) var(--ease-out);
}
.nav__link:hover::after, .nav__link[aria-expanded="true"]::after { transform: scaleX(1); }
.nav__link--hl { color: var(--clay); }
.nav__chev { width: 9px; height: 9px; flex: none; opacity: .55; transition: transform var(--t) var(--ease); }
.nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

.head__spacer { flex: 1; }
.head__acts { display: flex; align-items: center; gap: 2px; flex: none; }

.icon-btn {
  position: relative;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  color: var(--ink);
  border-radius: 999px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.icon-btn:hover { background: rgba(17, 17, 16, .06); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 20px; height: 20px; }

.count {
  position: absolute; top: 4px; right: 3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--cognac); color: var(--white);
  border-radius: 999px;
  font-size: 10px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  transform: scale(0);
  transition: transform var(--t) var(--ease-out);
}
.count.is-on { transform: scale(1); }

.search-btn {
  display: flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 16px;
  border: 1px solid var(--line-2);
  font-size: 13px; color: var(--ink-45);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.search-btn:hover { border-color: var(--ink); color: var(--ink); }
.search-btn svg { width: 16px; height: 16px; }
.search-btn span { width: 92px; text-align: left; }
@media (max-width: 1140px) { .search-btn span { display: none; } .search-btn { padding: 0 12px; } }

.burger { display: none; }
@media (max-width: 1080px) {
  .nav, .search-btn { display: none; }
  .burger { display: grid; }
}

/* mega menu */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--chalk);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 48px -28px rgba(17, 17, 16, .3);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out), visibility var(--t);
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; }
.mega__in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 1.05fr; gap: 40px; padding: 40px 0 44px; }
.mega__col-h {
  font-size: 10px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-45); font-weight: 500;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.mega__list { display: grid; gap: 1px; }
.mega__a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 6px 0; font-size: 14px;
  transition: color var(--t-fast) var(--ease), padding-left var(--t) var(--ease-out);
}
.mega__a:hover { color: var(--cognac); padding-left: 7px; }
.mega__n { font-size: 11px; color: var(--ink-45); font-variant-numeric: tabular-nums; }
.mega__promo { background: var(--bone); padding: 22px; align-self: start; }
.mega__promo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; margin-bottom: 16px; }
.mega__promo h4 { font-family: var(--display); font-size: 1.4rem; margin: 0 0 6px; font-weight: 400; }
.mega__promo p { font-size: 13px; color: var(--ink-70); margin: 0 0 14px; }

/* mobile drawer */
.mdrawer {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bone);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease-out);
  visibility: hidden;
}
.mdrawer.is-open { transform: none; visibility: visible; }
.mdrawer__top {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--head-h); padding: 0 var(--gut); flex: none;
  border-bottom: 1px solid var(--line);
}
.mdrawer__top img { height: 34px; background: none; }
.mdrawer__body { flex: 1; overflow-y: auto; padding: 12px var(--gut) 40px; }
.macc { border-bottom: 1px solid var(--line); }
.macc__h {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 17px 0; font-size: 15px; font-weight: 500; text-align: left;
}
.macc__h svg { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.macc.is-open .macc__h svg { transform: rotate(45deg); }
.macc__p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t) var(--ease-out); }
.macc.is-open .macc__p { grid-template-rows: 1fr; }
.macc__p > div { overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--t); }
.macc.is-open .macc__p > div { visibility: visible; transition-delay: 0s; }
.macc__p a { display: block; padding: 7px 0 7px 14px; font-size: 14px; color: var(--ink-70); }
.mdrawer__foot { flex: none; padding: 20px var(--gut) 28px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.mdrawer__foot a { font-size: 13px; color: var(--ink-70); }

/* search overlay */
.sov { position: fixed; inset: 0; z-index: 95; display: none; }
.sov.is-open { display: block; }
.sov__bd { position: absolute; inset: 0; background: rgba(17, 17, 16, .5); animation: fade var(--t) var(--ease); }
.sov__panel {
  position: relative; background: var(--chalk);
  padding: 34px 0 0;
  animation: slideDown var(--t-slow) var(--ease-out);
}
.sov__row { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--ink); padding-bottom: 14px; }
.sov__row svg { width: 22px; height: 22px; flex: none; color: var(--ink-45); }
.sov__input {
  flex: 1; border: 0; background: none;
  font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2.1rem);
}
.sov__input::placeholder { color: var(--ink-45); }
.sov__x { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-45); }
.sov__x:hover { color: var(--ink); }
.sov__res { max-height: min(52vh, 460px); overflow-y: auto; padding: 20px 0 30px; }
.sov__hit { display: flex; gap: 16px; align-items: center; padding: 9px 0; transition: background var(--t-fast) var(--ease); }
.sov__hit:hover { background: var(--bone); }
.sov__hit img { width: 54px; height: 68px; object-fit: cover; flex: none; }
.sov__hit b { font-weight: 500; font-size: 14px; display: block; }
.sov__hit span { font-size: 12px; color: var(--ink-45); }
.sov__empty { padding: 26px 0 34px; font-size: 14px; color: var(--ink-45); }

@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideDown { from { transform: translateY(-16px); opacity: .6 } to { transform: none; opacity: 1 } }

/* -------------------------------------------------------------- buttons */
.btn {
  --bg: var(--ink); --fg: var(--bone); --bd: var(--ink);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 28px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--bd);
  font-size: 12px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { background: var(--cognac); border-color: var(--cognac); color: var(--white); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }

.btn--accent { --bg: var(--cognac); --fg: var(--white); --bd: var(--cognac); }
.btn--accent:hover { --bg: var(--ink); --bd: var(--ink); }

.btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--line-2); }
.btn--ghost:hover { --bg: var(--ink); --fg: var(--bone); --bd: var(--ink); }

.btn--light { --bg: var(--bone); --fg: var(--ink); --bd: var(--bone); }
.btn--light:hover { --bg: var(--white); --fg: var(--cognac); --bd: var(--white); }

.btn--ol { --bg: transparent; --fg: var(--bone); --bd: rgba(238,237,231,.4); }
.btn--ol:hover { --bg: var(--bone); --fg: var(--ink); --bd: var(--bone); }

.btn--sm { height: 40px; padding: 0 18px; font-size: 11px; }
.btn--lg { height: 58px; padding: 0 36px; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .4; pointer-events: none; }

.lnk {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding-bottom: 3px; border-bottom: 1px solid currentColor;
  transition: color var(--t) var(--ease), gap var(--t) var(--ease-out);
}
.lnk:hover { color: var(--cognac); gap: 13px; }
.lnk svg { width: 14px; height: 14px; }
.sec--dark .lnk:hover, .sec--ink .lnk:hover { color: var(--bone); }

/* ------------------------------------------------------------ sec heads */
.sec-head { display: grid; gap: 14px; margin-bottom: 44px; }
.sec-head--row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: 32px;
}
.sec-head__eyebrow { display: flex; align-items: center; gap: 12px; }
.sec-head__eyebrow::after { content: ""; height: 1px; width: 40px; background: var(--line-2); }
.sec--dark .sec-head__eyebrow::after, .sec--ink .sec-head__eyebrow::after { background: var(--line-dark); }
.sec-head h2 { margin: 0; }
@media (max-width: 760px) { .sec-head--row { grid-template-columns: 1fr; align-items: start; gap: 20px; } }

/* ---------------------------------------------------------------- hero */
/* overflow must stay visible: the floating stat card deliberately hangs
   outside the media box, and clipping it is a visual bug. */
.hero { position: relative; background: var(--bone); }
.hero__in {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
  /* padding is deliberately tight so the headline and CTA clear the fold on a
     768px-tall laptop viewport once the 110px of site chrome is added. */
  padding-top: 52px; padding-bottom: 60px;
}
.hero__copy { max-width: 680px; }
.hero__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.hero__eyebrow::after { content: ""; height: 1px; width: 52px; background: var(--line-2); }
.hero h1 { margin: 0 0 22px; }
.hero__sub { margin: 0 0 32px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__media { position: relative; }
/* Height is driven by the viewport, not by an intrinsic ratio: the source
   photography is square and a fixed 5:4 crop either clipped the product or
   pushed the hero past the fold. object-position keeps the crop centred on the
   product rather than on the background. */
.hero__frame {
  position: relative; overflow: hidden; background: var(--bone-2);
  height: clamp(340px, 52vh, 560px);
}
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
.hero__cap {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 14px; font-size: 12px; color: var(--ink-45);
}
/* Every icon in this system is sized by its parent. This one had no rule, so
   the inline SVG fell back to its 300x150 default and stretched to the full
   column, pushing the hero to ~1250px tall and the CTA below the fold. */
.hero__cap svg { width: 15px; height: 15px; flex: none; }
.hero__cap b { font-weight: 500; color: var(--ink-70); }
.hero__cap a { color: var(--ink-70); border-bottom: 1px solid var(--line-2);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.hero__cap a:hover { color: var(--cognac); border-color: var(--cognac); }
.hero__cap i { font-style: normal; color: var(--ink-45); }
.hero__tag {
  position: absolute; left: -28px; bottom: -28px;
  background: var(--chalk); padding: 20px 24px; max-width: 250px;
  border-left: 3px solid var(--cognac);
}
.hero__tag b { font-family: var(--display); font-size: 1.9rem; display: block; line-height: 1; margin-bottom: 4px; font-weight: 400; }
.hero__tag span { font-size: 12px; color: var(--ink-70); line-height: 1.45; display: block; }

.hero__rail {
  display: flex; align-items: center; gap: 26px;
  border-top: 1px solid var(--line);
  padding-top: 22px; margin-top: 4px;
  flex-wrap: wrap;
}
.hero__rail span { font-size: 12px; color: var(--ink-45); display: flex; align-items: center; gap: 8px; }
.hero__rail svg { width: 15px; height: 15px; color: var(--ink-45); }

@media (max-width: 1020px) {
  .hero__in { grid-template-columns: 1fr; gap: 36px; padding-top: 40px; padding-bottom: 52px; }
  .hero__copy { max-width: none; }
  .hero__frame { height: clamp(300px, 44vh, 440px); }
  .hero__tag { left: auto; right: 16px; bottom: -22px; }
}
@media (max-width: 560px) { .hero__tag { display: none; } }

/* -------------------------------------------------------- category tiles */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--line); }
.tile {
  position: relative; display: block;
  background: var(--chalk); overflow: hidden;
  aspect-ratio: 3/4;
}
.tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out); }
.tile:hover .tile__img { transform: scale(1.045); }
.tile__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(17,17,16,.74) 0%, rgba(17,17,16,.12) 46%, transparent 70%);
}
.tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 24px; color: var(--bone); }
.tile__body h3 { font-family: var(--display); font-size: 1.5rem; margin: 0 0 5px; font-weight: 400; line-height: 1.1; }
.tile__body p { margin: 0; font-size: 12px; color: rgba(238,237,231,.72); }
.tile__go {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out);
}
.tile:hover .tile__go { opacity: 1; transform: none; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } .tile { aspect-ratio: 4/3; } }

/* -------------------------------------------------------- product card */
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }
.pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .pgrid, .pgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } }

.pcard { position: relative; display: flex; flex-direction: column; }
.pcard__media {
  position: relative; display: block; overflow: hidden;
  background: var(--bone-2); aspect-ratio: 3/4;
}
.pcard__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease-out);
}
.pcard__img--alt { position: absolute; inset: 0; opacity: 0; }
.pcard:hover .pcard__img--alt { opacity: 1; }
.pcard:hover .pcard__img--main { transform: scale(1.03); }

.pcard__flags { position: absolute; top: 12px; left: 12px; display: grid; gap: 5px; justify-items: start; z-index: 2; }
.flag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  padding: 5px 9px; background: var(--ink); color: var(--bone); line-height: 1;
}
.flag--sale { background: var(--clay); color: var(--white); }
.flag--new { background: var(--olive); color: var(--bone); }
.flag--out { background: var(--ink-45); color: var(--white); }

.pcard__fav {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px; display: grid; place-items: center;
  background: rgba(251,251,249,.9); border-radius: 999px; color: var(--ink);
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease-out), color var(--t-fast) var(--ease);
}
.pcard:hover .pcard__fav, .pcard__fav.is-on { opacity: 1; transform: none; }
.pcard__fav:hover { color: var(--cognac); background: var(--white); }
.pcard__fav.is-on { color: var(--clay); }
.pcard__fav svg { width: 17px; height: 17px; }
@media (hover: none) { .pcard__fav { opacity: 1; transform: none; } }

.pcard__sizes {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 4px; padding: 12px;
  background: linear-gradient(to top, rgba(251,251,249,.97), rgba(251,251,249,.86));
  transform: translateY(100%);
  transition: transform var(--t) var(--ease-out);
}
.pcard:hover .pcard__sizes { transform: none; }
.pcard__size {
  min-width: 30px; height: 28px; padding: 0 6px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); background: var(--chalk);
  font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pcard__size:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
@media (hover: none) { .pcard__sizes { position: static; transform: none; background: none; padding: 10px 0 0; } }

.pcard__body { padding-top: 14px; display: grid; gap: 5px; }
.pcard__brand { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-45); font-weight: 500; }
.pcard__name {
  font-size: 14px; font-weight: 400; line-height: 1.4; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--t-fast) var(--ease);
}
.pcard:hover .pcard__name { color: var(--cognac); }
.pcard__price { display: flex; align-items: baseline; gap: 9px; margin-top: 2px; }
.pcard__price b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pcard__price b.is-sale { color: var(--clay); }
.pcard__price s { font-size: 12.5px; color: var(--ink-45); font-variant-numeric: tabular-nums; }
.pcard__price em {
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  background: var(--clay); color: var(--white); padding: 3px 6px; line-height: 1;
}

/* --------------------------------------------------------------- rails */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr);
  gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 8px; margin: 0 calc(var(--gut) * -1); padding-left: var(--gut); padding-right: var(--gut);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 1201px) {
  .rail { margin: 0; padding-left: 0; padding-right: 0; grid-auto-columns: 1fr; grid-auto-flow: unset;
          grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
}

/* -------------------------------------------------------- bento collect */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; background: var(--line); }
.bento__c { position: relative; overflow: hidden; display: block; background: var(--chalk); }
.bento__c img { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out); }
.bento__c:hover img { transform: scale(1.04); }
.bento__c--a { grid-column: span 7; aspect-ratio: 16/11; }
.bento__c--b { grid-column: span 5; aspect-ratio: 16/11; }
.bento__c--c { grid-column: span 4; aspect-ratio: 1/1; }
.bento__c--d { grid-column: span 4; aspect-ratio: 1/1; }
.bento__c--e { grid-column: span 4; aspect-ratio: 1/1; }
.bento__ov {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px 24px; color: var(--bone);
  background: linear-gradient(to top, rgba(17,17,16,.72), rgba(17,17,16,.08) 52%, transparent 74%);
}
.bento__ov h3 { font-family: var(--display); font-weight: 400; margin: 0 0 4px; line-height: 1.1;
  font-size: clamp(1.3rem, 2vw, 1.85rem); }
.bento__ov p { margin: 0; font-size: 12.5px; color: rgba(238,237,231,.74); }
.bento__c--c .bento__ov, .bento__c--d .bento__ov, .bento__c--e .bento__ov { padding: 20px; }
.bento__c--c .bento__ov h3, .bento__c--d .bento__ov h3, .bento__c--e .bento__ov h3 { font-size: 1.3rem; }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
  .bento__c { grid-column: span 1 !important; aspect-ratio: 4/3; }
}

/* ------------------------------------------------------ editorial split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; background: var(--olive); }
.split__media { position: relative; min-height: 520px; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__copy { padding: 76px 64px; display: flex; flex-direction: column; justify-content: center; color: var(--bone); }
.split__copy h2 { margin: 0 0 20px; color: var(--bone); }
.split__copy .lede { color: rgba(238,237,231,.76); margin-bottom: 30px; }
.split__facts { display: grid; gap: 0; border-top: 1px solid var(--line-dark); margin-bottom: 32px; }
.split__fact {
  display: grid; grid-template-columns: 120px 1fr; gap: 20px;
  padding: 15px 0; border-bottom: 1px solid var(--line-dark);
}
.split__fact dt { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(238,237,231,.55); padding-top: 3px; }
.split__fact dd { margin: 0; font-size: 14px; color: rgba(238,237,231,.9); line-height: 1.55; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split__media { min-height: 320px; }
  .split__copy { padding: 44px var(--gut) 52px; }
}

/* ------------------------------------------------------------- marquee */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 34px 0; }
.marquee__track { display: flex; gap: 68px; width: max-content; animation: marq 62s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__i {
  height: 40px; width: auto; flex: none; object-fit: contain;
  filter: grayscale(1) contrast(1.05); opacity: .5;
  background: none;
  transition: filter var(--t) var(--ease), opacity var(--t) var(--ease);
}
.marquee__i:hover { filter: none; opacity: 1; }
@keyframes marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* --------------------------------------------------------- service band */
.svc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.svc__i { padding: 34px 30px; border-right: 1px solid var(--line); }
.svc__i:last-child { border-right: 0; }
.svc__i svg { width: 26px; height: 26px; color: var(--cognac); margin-bottom: 16px; }
.svc__i h3 { font-size: 14px; font-weight: 600; margin: 0 0 7px; letter-spacing: .01em; }
.svc__i p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-70); }
@media (max-width: 860px) {
  .svc { grid-template-columns: repeat(2, 1fr); }
  .svc__i { border-bottom: 1px solid var(--line); }
  .svc__i:nth-child(2n) { border-right: 0; }
}
@media (max-width: 520px) { .svc { grid-template-columns: 1fr; } .svc__i { border-right: 0; } }

/* ------------------------------------------------------------ testimonial */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line-dark); }
.quote { background: var(--olive); padding: 40px 34px; display: flex; flex-direction: column; gap: 18px; }
.quote__stars { display: flex; gap: 3px; color: var(--cognac-2); }
.quote__stars svg { width: 14px; height: 14px; }
.quote p { font-family: var(--display); font-size: 1.2rem; line-height: 1.42; margin: 0; color: var(--bone); }
.quote__who { margin-top: auto; padding-top: 8px; }
.quote__who b { display: block; font-size: 13px; font-weight: 500; color: var(--bone); }
.quote__who span { font-size: 11.5px; color: rgba(238,237,231,.55); }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- newsletter */
.news { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.news__form { display: flex; gap: 10px; }
.news__form input {
  flex: 1; height: 52px; padding: 0 18px;
  background: transparent; border: 1px solid rgba(238,237,231,.32);
  color: var(--bone);
  transition: border-color var(--t) var(--ease);
}
.news__form input::placeholder { color: rgba(238,237,231,.45); }
.news__form input:focus { border-color: var(--bone); }
.news__note { font-size: 12px; color: rgba(238,237,231,.5); margin-top: 12px; }
@media (max-width: 860px) {
  .news { grid-template-columns: 1fr; gap: 30px; }
  .news__form { flex-direction: column; }
  /* flex:1 would make flex-basis the HEIGHT here and collapse the field */
  .news__form input { flex: 0 0 auto; width: 100%; }
}

/* --------------------------------------------------------------- crumbs */
.crumbs { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12px; color: var(--ink-45); padding: 20px 0; }
.crumbs a { transition: color var(--t-fast) var(--ease); }
.crumbs a:hover { color: var(--cognac); }
.crumbs span { color: var(--hairline); }
.crumbs b { font-weight: 500; color: var(--ink-70); }

/* ------------------------------------------------------------ plp page */
.plp { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 48px; align-items: start; }
.plp__aside { position: sticky; top: calc(var(--head-h) + 16px); max-height: calc(100dvh - var(--head-h) - 32px); overflow-y: auto; padding-right: 4px; }
.plp__aside::-webkit-scrollbar { width: 4px; }
.plp__aside::-webkit-scrollbar-thumb { background: var(--line-2); }

.fgroup { border-bottom: 1px solid var(--line); padding: 0 0 20px; margin-bottom: 20px; }
.fgroup:last-child { border-bottom: 0; }
.fgroup__h {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase; font-weight: 600;
  padding: 0 0 14px; text-align: left;
}
.fgroup__h svg { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.fgroup.is-closed .fgroup__h svg { transform: rotate(-90deg); }
.fgroup__b { display: grid; gap: 9px; }
.fgroup.is-closed .fgroup__b { display: none; }

.fcheck { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; color: var(--ink-70); transition: color var(--t-fast) var(--ease); }
.fcheck:hover { color: var(--ink); }
.fcheck input { appearance: none; width: 16px; height: 16px; border: 1px solid var(--line-2); flex: none;
  display: grid; place-items: center; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.fcheck input:checked { background: var(--ink); border-color: var(--ink); }
.fcheck input:checked::after { content: ""; width: 8px; height: 4px; border-left: 1.6px solid var(--bone);
  border-bottom: 1.6px solid var(--bone); transform: rotate(-45deg) translateY(-1px); }
.fcheck__n { margin-left: auto; font-size: 11px; color: var(--ink-25); font-variant-numeric: tabular-nums; }

.fsizes { display: flex; flex-wrap: wrap; gap: 6px; }
.fsize {
  min-width: 42px; height: 34px; padding: 0 8px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); font-size: 12px; font-variant-numeric: tabular-nums;
  transition: all var(--t-fast) var(--ease);
}
.fsize:hover { border-color: var(--ink); }
.fsize.is-on { background: var(--ink); color: var(--bone); border-color: var(--ink); }

.frange { display: flex; align-items: center; gap: 10px; }
.frange input[type="range"] { flex: 1; accent-color: var(--cognac); }
.frange output { font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 78px; text-align: right; }

.plp__bar {
  display: flex; align-items: center; gap: 16px; justify-content: space-between;
  padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 26px;
  flex-wrap: wrap;
}
.plp__count { font-size: 13px; color: var(--ink-70); }
.plp__count b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.plp__tools { display: flex; align-items: center; gap: 10px; }
.select {
  height: 42px; padding: 0 36px 0 14px; background: var(--chalk);
  border: 1px solid var(--line-2); font-size: 13px; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%237d7d77' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 11px;
  transition: border-color var(--t-fast) var(--ease);
}
.select:hover { border-color: var(--ink); }
.filter-toggle { display: none; }
@media (max-width: 980px) {
  .plp { grid-template-columns: 1fr; gap: 0; }
  .plp__aside {
    position: fixed; inset: 0; z-index: 92; background: var(--bone);
    max-height: none; padding: 0 var(--gut) 90px; overflow-y: auto;
    transform: translateX(-100%); transition: transform var(--t-slow) var(--ease-out);
  }
  .plp__aside.is-open { transform: none; }
  .filter-toggle { display: inline-flex; }
  .plp__aside-head { display: flex !important; }
}
.plp__aside-head { display: none; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--line); margin-bottom: 22px; position: sticky; top: 0; background: var(--bone); z-index: 2; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border: 1px solid var(--line-2); font-size: 12px;
  background: var(--chalk);
  transition: border-color var(--t-fast) var(--ease);
}
.chip svg { width: 12px; height: 12px; }
.chip:hover { border-color: var(--ink); }

.pager { display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: 52px; }
.pager button {
  min-width: 42px; height: 42px; padding: 0 12px;
  display: grid; place-items: center; border: 1px solid var(--line-2);
  font-size: 13px; font-variant-numeric: tabular-nums;
  transition: all var(--t-fast) var(--ease);
}
.pager button:hover:not(:disabled) { border-color: var(--ink); }
.pager button.is-on { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.pager button:disabled { opacity: .35; cursor: not-allowed; }

.empty {
  text-align: center; padding: 90px 20px; border: 1px dashed var(--line-2);
  display: grid; gap: 14px; justify-items: center;
}
.empty svg { width: 40px; height: 40px; color: var(--hairline); }
/* Empty states use h2 at page level and h3 inside a pane, so the heading style
   has to cover both, otherwise one of them renders as a default bold h2. */
.empty h2, .empty h3 { font-family: var(--display); font-size: 1.6rem; font-weight: 400; margin: 0; }
.empty p { margin: 0; color: var(--ink-70); font-size: 14px; max-width: 44ch; }

/* ------------------------------------------------------------ pdp page */
.pdp { display: grid; grid-template-columns: 1.06fr .94fr; gap: 56px; align-items: start; padding-bottom: 20px; }
.pdp__gal { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
.pdp__thumbs { display: grid; gap: 10px; align-content: start; }
.pdp__thumb { border: 1px solid transparent; padding: 0; aspect-ratio: 1; overflow: hidden; background: var(--bone-2);
  transition: border-color var(--t-fast) var(--ease); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb.is-on { border-color: var(--ink); }
.pdp__main { position: relative; background: var(--bone-2); aspect-ratio: 4/5; overflow: hidden; }
.pdp__main img { width: 100%; height: 100%; object-fit: cover; }
.pdp__main .flag { position: absolute; top: 16px; left: 16px; z-index: 2; }

.pdp__buy { position: sticky; top: calc(var(--head-h) + 20px); }
.pdp__brand { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-45); font-weight: 500; }
.pdp__title { font-family: var(--display); font-size: clamp(1.6rem, 2.5vw, 2.2rem); line-height: 1.12; font-weight: 400; margin: 10px 0 16px; }
.pdp__sku { font-size: 11.5px; color: var(--ink-25); font-variant-numeric: tabular-nums; }
.pdp__price { display: flex; align-items: baseline; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); margin-bottom: 24px; flex-wrap: wrap; }
.pdp__price b { font-family: var(--display); font-size: 2rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.pdp__price b.is-sale { color: var(--clay); }
.pdp__price s { font-size: 1rem; color: var(--ink-45); font-variant-numeric: tabular-nums; }
.pdp__price em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  background: var(--clay); color: var(--white); padding: 4px 8px; }
.pdp__price small { font-size: 12px; color: var(--ink-45); margin-left: auto; }

.pdp__opt { margin-bottom: 22px; }
.pdp__opt-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 11px; }
.pdp__opt-h b { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; font-weight: 600; }
.pdp__opt-h a { font-size: 12px; color: var(--ink-45); border-bottom: 1px solid currentColor; }
.pdp__opt-h a:hover { color: var(--cognac); }

.sizes { display: flex; flex-wrap: wrap; gap: 7px; }
.size {
  min-width: 52px; height: 44px; padding: 0 12px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); background: var(--chalk);
  font-size: 13px; font-variant-numeric: tabular-nums;
  transition: all var(--t-fast) var(--ease);
}
.size:hover:not(.is-off) { border-color: var(--ink); }
.size.is-on { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.size.is-off { color: var(--ink-45); cursor: not-allowed; position: relative; overflow: hidden; }
.size.is-off::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top right, transparent 47%, var(--line-2) 47%, var(--line-2) 53%, transparent 53%); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); background: var(--chalk); height: 50px; }
.qty button { width: 44px; height: 100%; display: grid; place-items: center; font-size: 17px; color: var(--ink-70);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.qty button:hover { background: var(--bone); color: var(--ink); }
.qty input { width: 48px; height: 100%; text-align: center; border: 0; background: none;
  font-size: 14px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { appearance: none; margin: 0; }

.pdp__actions { display: flex; gap: 10px; margin: 24px 0 14px; }
.pdp__actions .btn { flex: 1; }
.pdp__meta { display: grid; gap: 9px; padding-top: 6px; }
.pdp__meta li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-70); }
.pdp__meta svg { width: 15px; height: 15px; color: var(--olive-3); flex: none; }

.acc { border-top: 1px solid var(--line); margin-top: 28px; }
.acc__i { border-bottom: 1px solid var(--line); }
.acc__h { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 0; font-size: 13.5px; font-weight: 500; text-align: left; }
.acc__h svg { width: 15px; height: 15px; color: var(--ink-45); transition: transform var(--t) var(--ease); }
.acc__i.is-open .acc__h svg { transform: rotate(180deg); }
.acc__b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t) var(--ease-out); }
.acc__i.is-open .acc__b { grid-template-rows: 1fr; }
/* grid-template-rows:0fr + overflow:hidden collapses the panel visually but
   leaves its links in the tab order, which made the panel's aria-hidden a lie:
   a keyboard user could tab into content a screen reader was told to ignore.
   visibility:hidden removes it from the tab order; the delay lets the close
   animation finish first. */
.acc__b > div { overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--t); }
.acc__i.is-open .acc__b > div { visibility: visible; transition-delay: 0s; }
.acc__in { padding: 0 0 22px; font-size: 14px; line-height: 1.72; color: var(--ink-70); }
.acc__in ul { display: grid; gap: 7px; }
.acc__in li { padding-left: 16px; position: relative; }
.acc__in li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 1px; background: var(--ink-45); }
.spec { display: grid; grid-template-columns: 132px 1fr; gap: 4px 16px; font-size: 13.5px; }
.spec dt { color: var(--ink-45); }
.spec dd { margin: 0; }

@media (max-width: 980px) {
  .pdp { grid-template-columns: 1fr; gap: 30px; }
  .pdp__buy { position: static; }
  .pdp__gal { grid-template-columns: 1fr; }
  .pdp__thumbs { grid-auto-flow: column; grid-auto-columns: 68px; overflow-x: auto; order: 2; }
}
@media (max-width: 560px) {
  .pdp__actions { flex-direction: column; }
  /* .btn is flex:1 for the row layout. Once the container turns into a column,
     flex-basis:0 becomes the HEIGHT and the primary CTA collapsed to 21px. */
  .pdp__actions .btn { flex: 0 0 auto; width: 100%; }
}

/* ------------------------------------------------------------- drawer */
.drawer { position: fixed; inset: 0; z-index: 96; display: none; }
.drawer.is-open { display: block; }
.drawer__bd { position: absolute; inset: 0; background: rgba(17,17,16,.46); animation: fade var(--t) var(--ease); }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  background: var(--bone); display: flex; flex-direction: column;
  animation: slideIn var(--t-slow) var(--ease-out);
}
@keyframes slideIn { from { transform: translateX(24px); opacity: .4 } to { transform: none; opacity: 1 } }
.drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 22px var(--gut); border-bottom: 1px solid var(--line); flex: none; }
.drawer__top h2 { font-family: var(--display); font-size: 1.35rem; font-weight: 400; margin: 0; }
.drawer__top b { font-size: 12px; color: var(--ink-45); font-variant-numeric: tabular-nums; font-weight: 500; }
.drawer__body { flex: 1; overflow-y: auto; padding: 20px var(--gut); }
.drawer__foot { flex: none; border-top: 1px solid var(--line); padding: 20px var(--gut) 26px; background: var(--chalk); }

.citem { display: grid; grid-template-columns: 82px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.citem:first-child { padding-top: 0; }
.citem__img { width: 82px; aspect-ratio: 3/4; object-fit: cover; background: var(--bone-2); }
.citem__b { display: grid; gap: 4px; align-content: start; }
.citem__n { font-size: 13.5px; line-height: 1.4; font-weight: 400; }
.citem__m { font-size: 11.5px; color: var(--ink-45); }
.citem__p { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.citem__x { font-size: 11px; color: var(--ink-45); border-bottom: 1px solid transparent; justify-self: start; }
.citem__x:hover { color: var(--clay); border-bottom-color: currentColor; }
.citem__q { display: inline-flex; align-items: center; border: 1px solid var(--line-2); height: 30px; margin-top: 5px; width: max-content; }
.citem__q button { width: 28px; height: 100%; display: grid; place-items: center; font-size: 14px; color: var(--ink-70); }
.citem__q button:hover { background: var(--white); color: var(--ink); }
.citem__q span { width: 30px; text-align: center; font-size: 12.5px; font-variant-numeric: tabular-nums; }

.sum { display: grid; gap: 9px; margin-bottom: 16px; }
.sum__r { display: flex; align-items: baseline; justify-content: space-between; font-size: 13.5px; color: var(--ink-70); }
.sum__r span:last-child { font-variant-numeric: tabular-nums; }
.sum__r--t { padding-top: 12px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink); font-weight: 600; }
.sum__r--t span:last-child { font-size: 18px; }
.sum__free { background: var(--cognac-3); color: var(--cognac); padding: 10px 13px; font-size: 12px; margin-bottom: 14px; }
.bar { height: 3px; background: var(--line-2); margin-top: 9px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--cognac); transition: width var(--t-slow) var(--ease-out); }

/* -------------------------------------------------------------- tables */
.tbl { font-size: 13.5px; }
.tbl th {
  text-align: left; font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-45); font-weight: 500; padding: 0 14px 12px 0; border-bottom: 1px solid var(--ink);
}
.tbl td { padding: 18px 14px 18px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl td:last-child, .tbl th:last-child { padding-right: 0; text-align: right; }
.tbl h4 { margin: 0 0 4px; font-size: 13.5px; font-weight: 400; }
.tbl__m { font-size: 11.5px; color: var(--ink-45); }
.tbl__p { font-variant-numeric: tabular-nums; font-weight: 600; }
@media (max-width: 760px) {
  .tbl thead { display: none; }
  .tbl tr { display: grid; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .tbl td { padding: 0; border: 0; }
  .tbl td:last-child { text-align: left; }
}

/* --------------------------------------------------------------- forms */
.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field > label { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; color: var(--ink-70); }
.field input, .field select, .field textarea {
  height: 50px; padding: 0 15px; background: var(--chalk);
  border: 1px solid var(--line-2);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.field textarea { height: auto; min-height: 120px; padding: 14px 15px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); background: var(--white); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-25); }
.field__hint { font-size: 11.5px; color: var(--ink-45); }
.field__err { font-size: 11.5px; color: var(--clay); display: none; }
.field.is-bad input, .field.is-bad select { border-color: var(--clay); }
.field.is-bad .field__err { display: block; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%237d7d77' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 11px; padding-right: 40px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 620px) { .row2 { grid-template-columns: 1fr; } }

.radios { display: grid; gap: 10px; }
.radio {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 16px 18px; border: 1px solid var(--line-2); background: var(--chalk); cursor: pointer;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.radio:hover { border-color: var(--ink-45); }
.radio:has(input:checked) { border-color: var(--ink); background: var(--white); }
.radio input { appearance: none; width: 17px; height: 17px; border: 1px solid var(--line-2); border-radius: 999px;
  flex: none; display: grid; place-items: center; transition: border-color var(--t-fast) var(--ease); }
.radio input:checked { border-color: var(--ink); border-width: 5px; }
.radio b { font-size: 13.5px; font-weight: 500; display: block; }
.radio small { font-size: 12px; color: var(--ink-45); }
.radio span:last-child { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- step header */
.steps { display: flex; align-items: center; gap: 14px; }
.step { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--ink-45); }
.step i { width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--line-2);
  display: grid; place-items: center; font-size: 10.5px; font-style: normal; font-weight: 700; flex: none; }
.step.is-on { color: var(--ink); font-weight: 600; }
.step.is-on i { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.step.is-done i { background: var(--olive); color: var(--bone); border-color: var(--olive); }
.steps__sep { width: 26px; height: 1px; background: var(--line-2); }

/* -------------------------------------------------------------- misc */
.notice {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 15px 18px; background: var(--cognac-3); color: var(--cognac);
  font-size: 13px; line-height: 1.55;
}
.notice svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.notice--olive { background: rgba(51,60,44,.09); color: var(--olive); }

.panel { background: var(--chalk); border: 1px solid var(--line); padding: 30px; }
.panel--flush { padding: 0; }

.split-form { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 940px) { .split-form { grid-template-columns: 1fr; gap: 34px; } }
.sticky-side { position: sticky; top: calc(var(--head-h) + 20px); }
@media (max-width: 940px) { .sticky-side { position: static; } }

.toast-host { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 120;
  display: grid; gap: 8px; width: min(440px, calc(100% - 32px)); pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 13px;
  background: var(--ink); color: var(--bone); padding: 15px 18px;
  font-size: 13.5px; box-shadow: 0 18px 40px -20px rgba(17,17,16,.6);
  animation: toastIn var(--t) var(--ease-out);
}
.toast.is-out { animation: toastOut var(--t) var(--ease) forwards; }
.toast img { width: 38px; height: 48px; object-fit: cover; flex: none; }
.toast svg { width: 18px; height: 18px; flex: none; color: var(--cognac-2); }
.toast b { font-weight: 500; }
.toast a { margin-left: auto; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cognac-2); border-bottom: 1px solid currentColor; white-space: nowrap; }
@keyframes toastIn { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes toastOut { to { transform: translateY(10px); opacity: 0 } }

/* page head */
.phead { padding: 40px 0 34px; border-bottom: 1px solid var(--line); }
.phead h1 { margin: 0 0 12px; }
.phead--dark { background: var(--olive); color: var(--bone); padding: 68px 0 60px; border-bottom: 0; }
.phead--dark h1 { color: var(--bone); }
.phead--dark .crumbs { color: rgba(238,237,231,.55); padding-top: 0; }
.phead--dark .crumbs b { color: rgba(238,237,231,.9); }
.phead--dark .crumbs a:hover { color: var(--bone); }
.phead--dark .lede { color: rgba(238,237,231,.74); }

/* reveal */
.rv { opacity: 0; transform: translateY(22px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 70ms; } .rv-d2 { transition-delay: 140ms; }
.rv-d3 { transition-delay: 210ms; } .rv-d4 { transition-delay: 280ms; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* skeleton */
.sk { background: linear-gradient(100deg, var(--bone-2) 30%, var(--chalk) 50%, var(--bone-2) 70%);
  background-size: 220% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }
.sk-card { display: grid; gap: 12px; }
.sk-card__m { aspect-ratio: 3/4; }
.sk-card__l { height: 11px; width: 58%; }
.sk-card__l2 { height: 11px; width: 34%; }

/* ------------------------------------------------------------- footer */
.foot { background: var(--olive); color: var(--bone); }
.foot__top { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 44px; padding: 72px 0 56px; }
.foot__brand img { height: 46px; width: auto; background: none; margin-bottom: 20px; filter: brightness(0) invert(1); }
.foot__brand p { font-size: 13.5px; line-height: 1.7; color: rgba(238,237,231,.66); margin: 0 0 20px; max-width: 34ch; }
.foot__c { display: grid; gap: 9px; align-content: start; }
.foot__c h3 { font-size: 10px; letter-spacing: .17em; text-transform: uppercase; font-weight: 600;
  color: rgba(238,237,231,.5); margin: 0 0 12px; }
.foot__c a { font-size: 13.5px; color: rgba(238,237,231,.76); line-height: 1.5;
  transition: color var(--t-fast) var(--ease), padding-left var(--t) var(--ease-out); }
.foot__c a:hover { color: var(--bone); padding-left: 5px; }
.foot__addr { display: grid; gap: 12px; font-size: 13.5px; color: rgba(238,237,231,.66); font-style: normal; line-height: 1.6; }
.foot__addr b { color: var(--bone); font-weight: 500; display: block; }
.foot__soc { display: flex; gap: 8px; }
.foot__soc a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-dark);
  border-radius: 999px; transition: background var(--t) var(--ease), border-color var(--t) var(--ease); }
.foot__soc a:hover { background: var(--bone); color: var(--olive); border-color: var(--bone); padding: 0; }
.foot__soc svg { width: 16px; height: 16px; }
.foot__bot {
  border-top: 1px solid var(--line-dark); padding: 24px 0 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
}
.foot__bot p { margin: 0; font-size: 12px; color: rgba(238,237,231,.5); }
.foot__legal { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot__legal a { font-size: 12px; color: rgba(238,237,231,.6); }
.foot__legal a:hover { color: var(--bone); }
.foot__legal img { height: 26px; width: auto; background: none; }
.foot__pay { display: flex; align-items: center; gap: 10px; }
.foot__pay span {
  padding: 6px 10px; border: 1px solid var(--line-dark); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(238,237,231,.62);
}
@media (max-width: 1080px) { .foot__top { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 620px) {
  .foot__top { grid-template-columns: 1fr; gap: 32px; padding: 52px 0 40px; }
  .foot__bot { flex-direction: column; align-items: flex-start; }
}

/* prose (help/legal pages) */
.prose { max-width: 68ch; }
.prose h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 52px 0 16px; line-height: 1.14; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1rem; font-weight: 600; margin: 30px 0 10px; }
.prose p { margin: 0 0 16px; color: var(--ink-70); line-height: 1.75; font-size: 15px; }
.prose ul { margin: 0 0 18px; display: grid; gap: 9px; }
.prose li { position: relative; padding-left: 20px; color: var(--ink-70); font-size: 15px; line-height: 1.7; }
.prose li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 1px; background: var(--cognac); }
.prose a { color: var(--cognac); border-bottom: 1px solid currentColor; }
.prose strong { color: var(--ink); font-weight: 600; }

.toc { position: sticky; top: calc(var(--head-h) + 20px); display: grid; gap: 2px; }
.toc a { font-size: 13.5px; color: var(--ink-45); padding: 7px 0 7px 13px; border-left: 1px solid var(--line);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.toc a:hover, .toc a.is-on { color: var(--ink); border-left-color: var(--cognac); }

.side-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 60px; align-items: start; }
@media (max-width: 900px) {
  .side-layout { grid-template-columns: 1fr; gap: 32px; }
  .toc { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 0; padding-bottom: 8px; }
  .toc a { border-left: 0; border-bottom: 1px solid var(--line); white-space: nowrap; padding: 8px 14px 8px 0; }
}

/* stat row */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 30px 26px 30px 0; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat b { font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 400; display: block; line-height: 1; margin-bottom: 8px; }
.stat span { font-size: 12.5px; color: var(--ink-70); line-height: 1.5; display: block; }
@media (max-width: 780px) { .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(2n) { border-right: 0; } .stat { border-bottom: 1px solid var(--line); } }

/* --------------------------------------------------------- about extras */
.brandgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.brandcell {
  background: var(--bone); height: 108px; display: grid; place-items: center; padding: 22px;
  transition: background var(--t) var(--ease);
}
.brandcell:hover { background: var(--white); }
.brandcell img {
  max-height: 42px; max-width: 118px; width: auto; object-fit: contain;
  filter: grayscale(1) contrast(1.05); opacity: .55; background: none;
  transition: filter var(--t) var(--ease), opacity var(--t) var(--ease);
}
.brandcell:hover img { filter: none; opacity: 1; }

/* ------------------------------------------------------- contact extras */
.maplink {
  display: block; position: relative; border: 1px solid var(--line);
  background: var(--bone-2); aspect-ratio: 16/9; overflow: hidden;
}
.maplink img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.maplink__c {
  position: absolute; inset: auto 0 0; padding: 18px 20px;
  background: linear-gradient(to top, rgba(17,17,16,.82), transparent);
  color: var(--bone); font-size: 13px; display: flex; align-items: center; gap: 10px;
}
.maplink__c svg { width: 16px; height: 16px; }

.store {
  display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: start;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
.store h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.store dl { margin: 0; display: grid; gap: 9px; font-size: 13.5px; color: var(--ink-70); }
.store dt { display: inline; }
.store dd { margin: 0; }
.store__row { display: flex; gap: 9px; align-items: flex-start; }
.store__row svg { width: 15px; height: 15px; flex: none; color: var(--ink-45); margin-top: 3px; }
@media (max-width: 620px) { .store { grid-template-columns: 1fr; } }

@media (max-width: 940px) {
  .contactgrid { grid-template-columns: 1fr !important; gap: 30px !important; }
}


/* ============================================================================
   TOUCH TARGETS
   WCAG 2.5.5 wants 44x44 CSS pixels. The desktop chrome is deliberately tighter
   (42px icon buttons, 28px quick-size chips), so the correction is scoped to
   coarse pointers rather than loosening the desktop layout.
   ========================================================================= */
@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .head__logo { min-height: 44px; align-items: center; }
  .crumbs { padding: 14px 0; }
  .crumbs a, .crumbs b { display: inline-flex; align-items: center; min-height: 44px; padding-right: 2px; }
  .lnk { min-height: 44px; align-items: center; }
  .foot__c a { min-height: 44px; display: flex; align-items: center; }
  .foot__addr a { min-height: 44px; display: inline-flex; align-items: center; }
  .foot__soc a { width: 44px; height: 44px; }
  .fgroup__h { min-height: 44px; }
  .field__hint a, .pdp__opt-h a, .prose a { min-height: 44px; display: inline-flex; align-items: center; }
  .acc__h { min-height: 52px; }
  .chip { min-height: 44px; }
  .btn--sm { height: 46px; }
  .select { height: 46px; }
  .qty { height: 52px; }
  .qty button { width: 48px; }
  .frange input[type="range"] { height: 44px; }
  .fsizes { gap: 8px; }
  .sov__hit { min-height: 64px; }
  .sov__x { min-height: 44px; display: inline-flex; align-items: center; }
  .mega__promo .lnk { min-height: 44px; }
  .foot__legal a { min-height: 44px; display: inline-flex; align-items: center; }
  .toc a { min-height: 44px; display: flex; align-items: center; }
  .mega__a { min-height: 44px; align-items: center; }
  .pcard__fav { width: 44px; height: 44px; }
  .pcard__size { min-width: 44px; height: 44px; }
  .fsize { min-width: 44px; height: 44px; }
  .pager button { min-width: 44px; height: 44px; }
  .citem__q { height: 40px; }
  .citem__q button { width: 40px; }
  .citem__x { min-height: 40px; display: inline-flex; align-items: center; }
  .pdp__thumb { min-height: 44px; }
  .radio { min-height: 56px; }
  .fcheck { min-height: 44px; }
  .macc__h { min-height: 52px; }
  .quote__stars + p { margin-top: 2px; }
  .announce__side a { min-height: 44px; display: inline-flex; align-items: center; }
}


/* ============================================================================
   ACCOUNT PANES
   Every pane is in the DOM so cont.html#favorite is a real anchor; only the
   active one is displayed. display:none also keeps the hidden panes out of the
   tab order, which visibility:hidden would not guarantee here.
   ========================================================================= */
.pane { display: none; }
.pane.is-on { display: block; scroll-margin-top: 96px; }