/* Swift & Hale demo shop. Brand tokens from swift-and-hale/brand/tokens.css; house rules from taste-skill:
   square corners, no shadows at rest, no gradients, no thin rules outside tables and form fields, one family. */

@font-face {
  font-family: "Chivo";
  src: url("/fonts/Chivo-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --holloway: #133621;
  --heath: #1A4429;
  --gorse: #F4D96C;
  --chalk: #EEEFEA;
  --soot: #1B1E1A;
  --lichen: #B3A55E;
  --turf: #4F7A4A;
  --sky: #A8C1D6;
  --paper: #F7F7F5;
  --tile: #E8E9E3;
  --tile-2: #DFE1D9;
  --ink: #1B1E1A;
  --muted: #4A4F48;
  --field: #FFFFFF;
  --field-line: #B9BCB3;
  --chs: #323232;
  --error: #9A2B1E;

  --font: "Chivo", "Helvetica Neue", Arial, sans-serif;
  /* Six type steps for the whole site */
  --t-display: clamp(48px, 6.6vw, 112px);
  --t-head: clamp(32px, 3.6vw, 52px);
  --t-title: 28px;
  --t-lead: 20px;
  --t-body: 17px;
  --t-small: 14px;

  --gap: clamp(16px, 2.2vw, 32px);
  --margin: clamp(16px, 3vw, 40px);
  --section: clamp(88px, 11vw, 176px);
  --max: 1480px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-body)/1.5 var(--font);
  font-feature-settings: "kern" 1;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--holloway); outline-offset: 2px; }
.home :focus-visible, .club-card :focus-visible { outline-color: var(--gorse); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--gorse); color: var(--holloway); padding: 12px 16px; z-index: 50; }
.skip:focus { left: 8px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--margin); }
.narrow { max-width: 640px; }
[hidden] { display: none !important; }

/* Type roles */
h1, .h1 {
  font-size: var(--t-head);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance;
}
h2 { font-size: var(--t-title); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
h3 { font-size: var(--t-lead); font-weight: 700; line-height: 1.25; }
.lede { font-size: var(--t-lead); font-weight: 400; line-height: 1.45; max-width: 46ch; margin-top: 16px; }
.hint { color: var(--muted); font-size: var(--t-small); font-weight: 400; }
.tabular, .price, .totals td, table td { font-variant-numeric: tabular-nums; }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px;
  background: var(--holloway); color: var(--chalk);
  border: 0; border-radius: 0; cursor: pointer;
  font-weight: 700; font-size: var(--t-body); text-decoration: none; line-height: 1.2;
  transition: background-color 160ms ease, transform 120ms ease;
}
.btn:hover { background: var(--heath); }
.btn:active { transform: translateY(1px); }
.btn-plain { background: var(--tile); color: var(--ink); }
.btn-plain:hover { background: var(--tile-2); }
.btn-buy { background: var(--holloway); color: var(--gorse); font-size: var(--t-lead); min-height: 56px; }
.btn-block { width: 100%; }
.btn-danger { background: var(--error); color: #fff; }
.linklike { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; color: inherit; font-size: inherit; }
.js .js-hide { display: none; }

/* Demo bar: CHS's notice, in CHS charcoal, on every page */
.demo-bar { background: var(--chs); color: #fff; font-size: var(--t-small); }
.demo-bar p { max-width: var(--max); margin: 0 auto; padding: 8px var(--margin); }
.demo-bar a { color: #fff; font-weight: 700; }

/* Header */
.site-head { background: var(--paper); position: relative; z-index: 20; }
.head-row {
  max-width: var(--max); margin: 0 auto; padding: 18px var(--margin) 14px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--gap);
}
.logo img { width: 210px; height: auto; }
.search { display: flex; max-width: 560px; width: 100%; justify-self: center; }
.search input {
  flex: 1; min-width: 0; height: 46px; padding: 0 14px;
  background: var(--field); border: 1px solid var(--field-line); border-right: 0; border-radius: 0;
}
.search button { height: 46px; padding: 0 18px; border: 0; background: var(--holloway); color: var(--chalk); font-weight: 700; cursor: pointer; }
.head-links { display: flex; gap: 22px; font-weight: 700; font-size: var(--t-small); white-space: nowrap; }
.head-links a { text-decoration: none; }
.head-links a:hover { text-decoration: underline; }
.basket-count {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; margin-left: 4px;
  background: var(--gorse); color: var(--holloway); font-size: var(--t-small); font-variant-numeric: tabular-nums;
}
.menu-toggle { display: none; }
.menu-toggle:not([open]) .menu-panel { display: none; }

.sections {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--margin);
  display: flex; justify-content: space-between; gap: var(--gap);
  background: var(--paper);
}
.sections ul { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.sections > ul > li > a { display: block; padding: 10px 0 14px; font-weight: 700; font-size: var(--t-small); text-decoration: none; }
.sections > ul > li > a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.has-menu { position: relative; }
.mega {
  display: none; position: absolute; left: -20px; top: 100%; min-width: 280px; padding: 18px 20px 20px;
  background: var(--holloway); color: var(--chalk); z-index: 30;
}
.has-menu:hover .mega, .has-menu:focus-within .mega { display: block; }
.mega ul { display: grid; gap: 8px; }
.mega a { text-decoration: none; font-size: var(--t-small); }
.mega a:hover { color: var(--gorse); }
.mega-all { display: inline-block; margin-top: 14px; color: var(--gorse); font-weight: 700; }
.sections-more a { display: block; padding: 10px 0 14px; font-size: var(--t-small); text-decoration: none; color: var(--muted); }

.flash { max-width: var(--max); margin: 0 auto; padding: 14px var(--margin); background: var(--gorse); color: var(--holloway); font-weight: 700; }

/* Breadcrumbs */
.crumbs { padding: 20px 0 8px; font-size: var(--t-small); color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "/"; margin-right: 6px; }

/* Product grid and cards */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--gap); }
.card { display: flex; flex-direction: column; gap: 6px; }
.card-wide { grid-column: span 2; }
.card-link { text-decoration: none; display: flex; flex-direction: column; gap: 12px; }
.card-tile { display: grid; place-items: center; aspect-ratio: 3 / 4; background: var(--tile); overflow: hidden; transition: background-color 200ms ease; }
.card-wide .card-tile { aspect-ratio: auto; height: 100%; min-height: 100%; }
.card-tile img { width: 86%; height: 86%; object-fit: contain; transition: transform 300ms ease; }
.card-link:hover .card-tile { background: var(--tile-2); }
.card-link:hover .card-tile img { transform: scale(1.03); }
.card-text { display: flex; flex-direction: column; }
.card-brand { font-size: var(--t-small); color: var(--muted); }
.card-name { font-weight: 700; font-size: var(--t-body); line-height: 1.25; }
.card-link:hover .card-name { text-decoration: underline; }
.card-note { font-size: var(--t-small); color: var(--turf); font-weight: 700; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.price-now { font-weight: 800; font-size: var(--t-lead); }
.price-was { color: var(--muted); }
.price-tag { font-size: var(--t-small); font-weight: 700; color: var(--holloway); }
.price-club { font-size: var(--t-small); color: var(--holloway); font-weight: 700; }
.swatches { display: flex; flex-wrap: wrap; gap: 5px; }
.swatches li { width: 16px; height: 16px; background: var(--sw); outline: 1px solid rgba(0,0,0,0.15); outline-offset: -1px; } /* taste-skill-ignore: a pale swatch needs an edge to be seen */
.swatches .sw-more { width: auto; background: none; outline: 0; font-size: var(--t-small); line-height: 16px; color: var(--muted); }
.stars { font-size: var(--t-small); color: var(--muted); display: flex; align-items: center; gap: 8px; }
.rate { display: inline-flex; gap: 3px; }
.rate i { width: 9px; height: 9px; background: var(--tile-2); }
.rate i.on { background: var(--holloway); }
.no-photo { display: block; width: 100%; aspect-ratio: 3 / 4; background: var(--tile); }

/* Listings */
.list-hero { height: clamp(200px, 30vw, 420px); overflow: hidden; background: var(--holloway); }
.list-hero img { width: 100%; height: 100%; object-fit: cover; }
.listing-head { padding: 8px 0 20px; }
.cat-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 28px; }
.cat-links a, .cat-links span { display: inline-block; padding: 9px 14px; background: var(--tile); text-decoration: none; font-size: var(--t-small); font-weight: 700; }
.cat-links a:hover { background: var(--tile-2); }
.cat-links span { background: var(--holloway); color: var(--chalk); }
.listing-body { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: calc(var(--gap) * 1.5); align-items: start; padding-bottom: var(--section); }
.filters-panel > summary { display: none; }
.filter-groups { display: grid; gap: 26px; }
.fg { border: 0; padding: 0; margin: 0; min-width: 0; }
.fg-h { display: block; font-weight: 800; margin-bottom: 10px; font-size: var(--t-body); padding: 0; }
.fg select { width: 100%; height: 44px; padding: 0 10px; background: var(--field); border: 1px solid var(--field-line); border-radius: 0; }
.tick { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; cursor: pointer; font-size: var(--t-small); }
.tick input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--holloway); flex: none; }
.tick .n { color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.chip { display: inline-block; width: 16px; height: 16px; background: var(--sw); outline: 1px solid rgba(0,0,0,0.2); outline-offset: -1px; flex: none; margin-top: 3px; }
.fg-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.size-pill { position: relative; cursor: pointer; }
.size-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.size-pill span { display: inline-grid; place-items: center; min-width: 48px; height: 44px; padding: 0 10px; background: var(--field); border: 1px solid var(--field-line); font-size: var(--t-small); font-variant-numeric: tabular-nums; } /* taste-skill-ignore: a radio control, form fields keep their edge */
.size-pill input:checked + span { background: var(--holloway); color: var(--chalk); border-color: var(--holloway); }
.size-pill input:focus-visible + span { outline: 3px solid var(--holloway); outline-offset: 2px; }
.size-pill.is-out span { color: #6F736C; text-decoration: line-through; background: var(--tile); border-color: var(--tile); }
.fg-actions { display: flex; align-items: center; gap: 16px; }
.js .fg-actions .btn { display: none; }
.results-count { margin-bottom: 18px; color: var(--muted); font-size: var(--t-small); }
.empty { padding: 40px 0; display: grid; gap: 12px; }
.pager { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 48px; align-items: center; }
.pager a, .pager span[aria-current] { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; background: var(--tile); text-decoration: none; font-weight: 700; }
.pager span[aria-current] { background: var(--holloway); color: var(--chalk); }

/* Product page */
.pdp { padding-bottom: var(--section); }
.pdp-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr); gap: calc(var(--gap) * 1.5); align-items: start; padding-top: 12px; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.g-item { background: var(--tile); aspect-ratio: 3 / 4; display: grid; place-items: center; overflow: hidden; }
.g-item:first-child { grid-column: span 2; aspect-ratio: 4 / 4.2; }
.g-packshot img { width: 82%; height: 82%; object-fit: contain; }
.g-model img { width: 100%; height: 100%; object-fit: cover; }
.buy { position: sticky; top: 16px; display: grid; gap: 14px; }
.buy-brand a { font-weight: 700; color: var(--muted); text-decoration: none; }
.buy-name { font-size: var(--t-title); }
.buy-dept { color: var(--muted); font-size: var(--t-small); }
.buy .price-now { font-size: var(--t-title); }
.buy-note { font-size: var(--t-small); }
.buy-summary { font-size: var(--t-lead); }
.buy-form { display: grid; gap: 18px; padding-top: 6px; }
.buy-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.buy-form legend { font-weight: 700; margin-bottom: 10px; display: flex; gap: 12px; align-items: baseline; width: 100%; }
.size-guide { font-weight: 400; font-size: var(--t-small); margin-left: auto; }
.colour-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.colour-opt { display: block; width: 64px; background: var(--tile); padding: 4px; text-decoration: none; }
.colour-opt img { width: 56px; height: 72px; object-fit: contain; }
.colour-opt .chip { width: 56px; height: 72px; margin: 0; }
.colour-opt[aria-current="true"] { outline: 3px solid var(--holloway); outline-offset: -3px; }
.size-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.fit-note { font-size: var(--t-small); color: var(--muted); margin-top: 10px; }
.stock-note { font-size: var(--t-small); color: var(--turf); font-weight: 700; }
.buy-actions { display: grid; grid-template-columns: 76px 1fr; gap: 8px; }
.buy-actions select { height: 56px; padding: 0 8px; background: var(--field); border: 1px solid var(--field-line); border-radius: 0; }
.added { background: var(--gorse); color: var(--holloway); padding: 12px 14px; font-weight: 700; }
.added a { margin-left: 8px; }
.wish-form .linklike { font-size: var(--t-small); }
.instore { background: var(--tile); padding: 16px; display: grid; gap: 8px; font-size: var(--t-small); }
.instore label { font-weight: 700; }
.instore select { height: 44px; background: var(--field); border: 1px solid var(--field-line); border-radius: 0; padding: 0 8px; }
.promises { display: grid; gap: 8px; font-size: var(--t-small); }
.promises li { padding-left: 18px; position: relative; }
.promises li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background: var(--holloway); }
.hale-again-note { font-size: var(--t-small); background: var(--chalk); padding: 12px 14px; }
.pdp-detail { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: calc(var(--gap) * 2); margin-top: var(--section); }
.pd-about { display: grid; gap: 14px; max-width: 66ch; align-content: start; }
.pd-about p { font-size: var(--t-body); }
.features { display: grid; gap: 8px; margin-top: 6px; }
.features li { padding-left: 18px; position: relative; }
.features li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; background: var(--gorse); }
.pd-specs { display: grid; gap: 14px; align-content: start; }
.pd-specs h3 { margin-top: 10px; }
.specs { width: 100%; font-size: var(--t-small); }
.specs th, .specs td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--field-line); vertical-align: top; }
.specs th { font-weight: 700; padding-right: 16px; width: 44%; }
.reviews { margin-top: var(--section); }
.reviews > h2 { margin-bottom: 28px; }
.rev-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: calc(var(--gap) * 2); }
.rev-summary { display: grid; gap: 10px; align-content: start; }
.rev-score { font-size: var(--t-head); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.rev-score span { font-size: var(--t-body); font-weight: 400; letter-spacing: 0; }
.rev-bars { display: grid; gap: 6px; font-size: var(--t-small); }
.rev-bars li { display: grid; grid-template-columns: 52px 1fr 40px; gap: 8px; align-items: center; }
.rev-bars .bar { height: 10px; background: var(--tile); }
.rev-bars .bar span { display: block; height: 100%; background: var(--holloway); }
.rev-note { font-size: var(--t-small); color: var(--muted); }
.rev-list { display: grid; gap: 36px; }
.rev-list li { display: grid; gap: 8px; max-width: 70ch; }
.rev-by { font-size: var(--t-small); color: var(--muted); }
.related { margin-top: var(--section); }
.related > h2 { margin-bottom: 28px; }

/* Basket and checkout */
.basket, .checkout { padding-bottom: var(--section); }
.basket h1 { padding: 28px 0 32px; }
.basket-grid, .checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: calc(var(--gap) * 2); align-items: start; }
.lines { display: grid; gap: 22px; }
.line { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto auto; gap: 20px; align-items: start; padding: 16px; background: var(--chalk); }
.line-pic { background: var(--tile); display: block; }
.line-pic img { width: 120px; height: 160px; object-fit: contain; }
.line-text { display: grid; gap: 2px; }
.line-brand { font-size: var(--t-small); color: var(--muted); }
.line-name { font-weight: 700; font-size: var(--t-lead); }
.line-name a { text-decoration: none; }
.line-opts { color: var(--muted); font-size: var(--t-small); }
.line-price { font-weight: 700; margin-top: 6px; }
.line-warn { color: var(--error); font-size: var(--t-small); font-weight: 700; }
.line-qty { display: grid; gap: 8px; justify-items: start; font-size: var(--t-small); }
.line-qty select { height: 44px; padding: 0 8px; background: var(--field); border: 1px solid var(--field-line); border-radius: 0; }
.line-total { font-weight: 800; font-size: var(--t-lead); font-variant-numeric: tabular-nums; }
.summary { background: var(--chalk); padding: 24px; display: grid; gap: 16px; position: sticky; top: 16px; }
.totals { width: 100%; }
.totals th, .totals td { padding: 8px 0; text-align: left; font-weight: 400; }
.totals td { text-align: right; }
.totals .grand th, .totals .grand td { font-weight: 800; font-size: var(--t-lead); border-top: 2px solid var(--ink); padding-top: 12px; }
.totals .saving td, .totals .saving th { color: var(--holloway); font-weight: 700; }
.summary-note { font-size: var(--t-small); }
.steps { display: flex; gap: 6px; padding: 28px 0 36px; counter-reset: step; flex-wrap: wrap; }
.steps li { flex: 1; min-width: 120px; padding: 12px 14px; background: var(--tile); font-weight: 700; font-size: var(--t-small); }
.steps li[aria-current] { background: var(--holloway); color: var(--chalk); }
.steps li.done { background: var(--tile-2); }
.stack { display: grid; gap: 12px; align-content: start; }
.stack label, .stack legend { font-weight: 700; }
.stack input:not([type=checkbox]):not([type=radio]), .stack select, .inline-form select {
  height: 50px; padding: 0 14px; width: 100%; max-width: 520px;
  background: var(--field); border: 1px solid var(--field-line); border-radius: 0;
}
.stack input.short { max-width: 200px; }
.stack .btn { justify-self: start; margin-top: 8px; }
.stack fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 520px; }
.pair > div { display: grid; gap: 12px; }
.checkout h1 { margin-bottom: 20px; }
.checkout-split { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--gap) * 1.5); }
.checkout-split > div { display: grid; gap: 12px; align-content: start; background: var(--chalk); padding: 24px; }
.choices { display: grid; gap: 8px; }
.choice { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--chalk); cursor: pointer; font-weight: 400 !important; }
.choice input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--holloway); flex: none; }
.choice b { display: block; }
.mini-lines { display: grid; gap: 12px; font-size: var(--t-small); }
.mini-lines li { display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: center; }
.mini-lines img { background: var(--tile); width: 60px; height: 80px; object-fit: contain; }
.review-block { background: var(--chalk); padding: 20px; display: grid; gap: 8px; }
.review-block h2 { font-size: var(--t-lead); letter-spacing: 0; }
.pay-off { display: grid; gap: 14px; margin-top: 8px; }
.pay-methods { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-methods li { padding: 10px 14px; background: var(--tile); color: var(--muted); font-size: var(--t-small); }
.pay-crossed { position: relative; }
.pay-crossed .btn { opacity: 0.55; cursor: not-allowed; }
.pay-x { position: absolute; inset: -6px 0; width: 100%; height: calc(100% + 12px); color: var(--error); pointer-events: none; }
.pay-x path { stroke-width: 3; }
.pay-note { background: var(--gorse); color: var(--holloway); padding: 16px; }

/* Forms: sign in, register */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: calc(var(--gap) * 2); padding: 36px var(--margin) var(--section); }
.auth-main h1 { margin-bottom: 8px; }
.auth-main .lede { margin-bottom: 24px; }
.auth-side { background: var(--chalk); padding: 28px; display: grid; gap: 14px; align-content: start; }
.auth-side h2 { font-size: var(--t-lead); margin-top: 12px; }
.auth-side h2:first-child { margin-top: 0; }
.notice { background: var(--chalk); padding: 16px; font-size: var(--t-small); max-width: 520px; }
.prefs .tick { font-weight: 400; }
.cf-turnstile { min-height: 65px; }

/* Account */
.account { padding-bottom: var(--section); }
.account-head { padding: 28px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.account-hello { font-weight: 800; font-size: var(--t-lead); }
.account-expiry { color: var(--muted); font-size: var(--t-small); }
.account-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: calc(var(--gap) * 2); align-items: start; }
.account-nav ul { display: grid; gap: 2px; margin-bottom: 18px; }
.account-nav a { display: block; padding: 10px 14px; text-decoration: none; background: var(--tile); font-weight: 700; font-size: var(--t-small); }
.account-nav a:hover { background: var(--tile-2); }
.account-nav a[aria-current] { background: var(--holloway); color: var(--chalk); }
.account-main { display: grid; gap: 24px; align-content: start; }
.overview { display: grid; gap: 24px; }
.ov-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ov-tile { background: var(--chalk); padding: 20px; display: grid; gap: 6px; text-decoration: none; align-content: start; font-size: var(--t-small); }
.ov-tile:hover { background: var(--tile); }
.ov-h { font-weight: 700; }
.ov-big { font-size: var(--t-title); font-weight: 800; letter-spacing: -0.03em; }
.club-card { background: var(--holloway); color: var(--chalk); padding: 28px; width: min(100%, 440px); aspect-ratio: 1.586; display: grid; grid-template-rows: auto 1fr auto auto; gap: 8px; }
.cc-name { font-weight: 800; font-size: var(--t-lead); align-self: end; }
.cc-label { font-size: var(--t-small); color: var(--lichen); }
.cc-bars { width: 180px; height: 40px; fill: var(--chalk); background: var(--chalk); padding: 4px; fill: var(--soot); }
.cc-num { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; font-size: var(--t-small); }
.order-list { display: grid; gap: 8px; }
.order-row { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center; background: var(--chalk); padding: 14px; text-decoration: none; }
.order-row:hover { background: var(--tile); }
.or-thumbs { display: flex; gap: 4px; }
.or-thumbs img, .or-thumbs .no-photo { width: 60px; height: 80px; object-fit: contain; background: var(--paper); }
.or-text { display: grid; gap: 2px; font-size: var(--t-small); }
.or-text b { font-size: var(--t-lead); }
.track { display: flex; gap: 6px; flex-wrap: wrap; }
.track li { flex: 1; min-width: 110px; padding: 10px 12px; background: var(--tile); font-size: var(--t-small); font-weight: 700; }
.track li.done { background: var(--holloway); color: var(--chalk); }
.repair-list { display: grid; gap: 16px; }
.repair { background: var(--chalk); padding: 24px; display: grid; gap: 10px; max-width: 640px; }
.ticket-ref { font-weight: 800; background: var(--gorse); color: var(--holloway); justify-self: start; padding: 4px 10px; font-variant-numeric: tabular-nums; }
.address-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 32px; }
.address-list li { background: var(--chalk); padding: 20px; display: grid; gap: 8px; font-size: var(--t-small); }
.row-actions { display: flex; gap: 16px; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form select { max-width: 320px; }
.walk-note { background: var(--chalk); padding: 20px; display: grid; gap: 8px; }
.danger { background: #F3E7E3; padding: 24px; }

/* Documents: help, legal, company, investors */
.doc-hero { height: clamp(260px, 42vw, 560px); overflow: hidden; background: var(--holloway); }
.doc-hero img { width: 100%; height: 100%; object-fit: cover; }
.doc { padding-bottom: var(--section); }
.doc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: calc(var(--gap) * 2.5); align-items: start; padding-top: 16px; }
.doc-nav { position: sticky; top: 16px; }
.doc-nav ul { display: grid; gap: 2px; }
.doc-nav a { display: block; padding: 10px 14px; background: var(--tile); text-decoration: none; font-weight: 700; font-size: var(--t-small); }
.doc-nav a:hover { background: var(--tile-2); }
.doc-nav a[aria-current] { background: var(--holloway); color: var(--chalk); }
.prose { max-width: 72ch; }
.prose > h1 { margin-bottom: 4px; }
.prose > .lede { margin-bottom: 36px; max-width: 52ch; }
.prose h2 { margin: 52px 0 14px; scroll-margin-top: 16px; }
.prose h3 { margin: 30px 0 8px; scroll-margin-top: 16px; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose .table-wrap { margin-bottom: 16px; }
.prose ul { list-style: none; display: grid; gap: 6px; }
.prose ul > li { padding-left: 18px; position: relative; }
.prose ul > li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; background: var(--holloway); }
.prose ol { list-style: decimal; padding-left: 22px; display: grid; gap: 6px; }
.prose blockquote { margin-left: 0; background: var(--gorse); color: var(--holloway); padding: 18px 20px; }
.prose blockquote p:last-child { margin-bottom: 0; }
.table-wrap { overflow-x: auto; }
.prose table, .news-table { width: 100%; font-size: var(--t-small); }
.prose th, .prose td, .news-table th, .news-table td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--field-line); vertical-align: top; }
.prose thead th, .news-table thead th { border-bottom: 2px solid var(--ink); font-weight: 800; }
.prose tbody th { font-weight: 700; }
.portrait { width: 160px; height: 200px; object-fit: cover; margin: 8px 0 12px; background: var(--tile); }
.news-list { display: grid; gap: 2px; margin-bottom: 12px; }
.news-list a { display: grid; gap: 2px; padding: 12px 14px; background: var(--chalk); text-decoration: none; }
.news-list a:hover { background: var(--tile); }
.news-date { font-size: var(--t-small); color: var(--muted); }
.rns { max-width: 80ch; padding-top: 12px; }
.rns-meta { color: var(--muted); font-size: var(--t-small); margin-bottom: 8px; }
.rns h1 { font-size: var(--t-title); margin-bottom: 28px; }
.ir-hero { background: var(--holloway); color: var(--chalk); }
.ir-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--gap); align-items: end; padding-top: 64px; padding-bottom: 64px; }
.ir-hero h1 { font-size: var(--t-display); line-height: 0.88; }
.ir-hero .lede { color: var(--chalk); }
.ir-report { display: grid; gap: 10px; text-decoration: none; font-weight: 700; color: var(--gorse); }
.ir-report img { width: 100%; height: auto; }
.ir-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 40px; }

/* Journal */
.journal { padding-bottom: var(--section); }
.journal > h1 { margin-top: 8px; }
.journal > .lede { margin-bottom: 40px; }
.j-lead { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--gap); text-decoration: none; background: var(--holloway); color: var(--chalk); margin-bottom: 56px; }
.j-lead img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.j-lead .j-text { padding: 32px; display: grid; gap: 14px; align-content: end; }
.j-lead .j-title { font-size: var(--t-head); font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.95; }
.j-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px var(--gap); }
.j-list a { display: grid; gap: 10px; text-decoration: none; }
.j-list img, .j-list .no-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.j-title { font-weight: 800; font-size: var(--t-lead); line-height: 1.15; letter-spacing: -0.02em; }
.j-list a:hover .j-title { text-decoration: underline; }
.j-meta { font-size: var(--t-small); color: var(--muted); }
.j-lead .j-meta { color: var(--lichen); }
.article { margin: 0 auto; }

/* Stores */
.stores { padding-bottom: var(--section); }
.stores-head { padding-bottom: 32px; }
.stores-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: calc(var(--gap) * 2); align-items: start; }
.stores-map { position: sticky; top: 16px; background: var(--holloway); padding: 24px; }
.stores-map img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; }
.store-search { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin-bottom: 8px; }
.store-search label { grid-column: 1 / -1; font-weight: 700; }
.store-search input { height: 50px; padding: 0 14px; background: var(--field); border: 1px solid var(--field-line); border-radius: 0; }
.store-search .btn { min-height: 50px; }
.store-country { margin-top: 32px; }
.store-country h2 { margin-bottom: 12px; }
.store-country ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.store-country li { background: var(--chalk); padding: 12px 14px; display: grid; gap: 2px; font-size: var(--t-small); }
.store-country li span { color: var(--muted); font-size: var(--t-small); }
.store-country li a { text-decoration: none; }
.store-country li a:hover b { text-decoration: underline; }
.store-country li.is-near { background: var(--gorse); }
.store { padding-bottom: var(--section); }
.store-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: calc(var(--gap) * 2); padding-top: 8px; }
.store-grid h2 { font-size: var(--t-lead); letter-spacing: -0.01em; margin: 28px 0 10px; }
.store-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.hours th, .hours td { padding: 6px 16px 6px 0; text-align: left; font-weight: 400; border-bottom: 1px solid var(--tile-2); }
.hours th { font-weight: 700; }
.services { display: flex; flex-wrap: wrap; gap: 8px; }
.services li { background: var(--tile); padding: 10px 14px; font-weight: 700; font-size: var(--t-small); }
.walk-ticket { background: var(--gorse); color: var(--holloway); padding: 24px; display: grid; gap: 6px; margin-top: 28px; }
.wt-h { font-weight: 700; }
.wt-title { font-size: var(--t-title); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.near { display: grid; gap: 2px; }
.near a { display: block; padding: 10px 14px; background: var(--tile); text-decoration: none; font-weight: 700; }

/* Brands */
.page { padding-bottom: var(--section); }
.page > h1 { margin-top: 8px; }
.brand-own { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 36px 0 56px; }
.brand-tile a { display: grid; gap: 8px; padding: 40px 32px; min-height: 260px; align-content: end; text-decoration: none; }
.brand-hale a { background: var(--holloway); color: var(--gorse); }
.brand-swift a { background: var(--gorse); color: var(--holloway); }
.bt-name { font-size: var(--t-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.88; }
.bt-line { font-size: var(--t-lead); }
.brand-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: 20px; }
.brand-list a { display: grid; gap: 2px; padding: 16px; background: var(--chalk); text-decoration: none; }
.brand-list a:hover { background: var(--tile); }
.brand-list span { color: var(--muted); font-size: var(--t-small); }
.hale-again-intro { background: var(--chalk); padding: 24px; display: grid; gap: 10px; max-width: 80ch; margin-bottom: 32px; }

/* Footer: a board of tiles */
.site-foot { padding: 8px; background: var(--paper); margin-top: 0; }
.foot-tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.ft { padding: 24px; min-height: 220px; text-decoration: none; }
.ft-statement { grid-column: span 4; background: var(--chalk); display: grid; align-content: space-between; gap: 24px; }
.ft-line { font-size: var(--t-title); font-weight: 800; letter-spacing: -0.02em; }
.ft-legal { font-size: var(--t-small); color: var(--muted); max-width: 60ch; }
.ft-nav { background: var(--chalk); }
.foot-tiles .ft-nav:nth-child(2) { grid-column: span 3; }
.foot-tiles .ft-nav:nth-child(3) { grid-column: span 2; }
.foot-tiles .ft-nav:nth-child(4) { grid-column: span 3; }
.ft-nav ul { display: grid; gap: 8px; }
.ft-nav a, .ft-nav .linklike { text-decoration: none; font-size: var(--t-body); }
.ft-nav a:hover, .ft-nav .linklike:hover { text-decoration: underline; }
.ft-mark { grid-column: span 8; background: var(--holloway); display: grid; place-items: center; min-height: 320px; padding: 40px; }
.ft-mark img { width: 88%; height: auto; }
.ft-action { grid-column: span 4; background: var(--gorse); color: var(--holloway); display: grid; align-content: space-between; min-height: 320px; transition: background-color 160ms ease; }
.ft-action span { font-size: var(--t-title); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; max-width: 10ch; }
.ft-action svg { justify-self: end; transition: transform 200ms ease; }
.ft-action:hover svg { transform: translateX(6px); }

/* Cookie banner: it floats, so it may separate by tone; it sits above everything */
.cookie-open { padding-bottom: 280px; }
.cookie { position: fixed; right: 8px; bottom: 8px; left: auto; width: min(560px, calc(100vw - 16px)); z-index: 60; background: var(--soot); color: var(--chalk); }
.cookie-main, .cookie-choose { padding: 24px; display: grid; gap: 12px; }
.cookie-h { font-weight: 800; font-size: var(--t-lead); }
.cookie a { color: var(--gorse); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie .btn { background: var(--gorse); color: var(--holloway); }
.cookie .btn-plain { background: #3A3E39; color: var(--chalk); }
.cookie fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.cookie .tick input { accent-color: var(--gorse); }
.cookie-note { font-size: var(--t-small); color: #C9CBC4; }

/* Home: the specimen catalogue */
.home main { background: var(--paper); }
.h-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); padding: 40px 0 var(--section) var(--margin); overflow: hidden; max-width: calc(var(--max) + 400px); }
.h-hero-text { display: grid; gap: 28px; align-content: start; padding-top: 24px; }
.h-hero h1 { font-size: clamp(44px, 5.6vw, 100px); line-height: 0.88; letter-spacing: -0.045em; }
.h-hero h1 span { display: block; white-space: nowrap; }
.h-hero-line { font-size: var(--t-lead); max-width: 34ch; }
.h-hero .btn { justify-self: start; }
.h-mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(120px, 13vw); gap: 10px; }
.spec { display: grid; gap: 6px; text-decoration: none; align-content: start; }
.spec-tile { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; position: relative; }
.spec-tile img { width: 72%; height: 72%; object-fit: contain; }
.spec-holloway .spec-tile { background: var(--holloway); }
.spec-heath .spec-tile { background: var(--heath); }
.spec-gorse .spec-tile { background: var(--gorse); }
.spec-sky .spec-tile { background: var(--sky); }
.spec-chalk .spec-tile { background: var(--chalk); }
.field-holloway { background: var(--holloway); }
.field-heath { background: var(--heath); }
.field-gorse { background: var(--gorse); }
.field-sky { background: var(--sky); }
.field-chalk { background: var(--chalk); }
.spec-name { font-weight: 700; font-size: var(--t-lead); line-height: 1.2; }
.spec-fact { font-size: var(--t-small); color: var(--muted); }
.spec:hover .spec-name { text-decoration: underline; }
.h-mosaic .spec-big { grid-column: 1 / span 4; grid-row: span 3; display: block; height: 100%; }
.h-mosaic .spec-big .spec-tile { aspect-ratio: auto; height: 100%; }
.h-mosaic .spec-big .xf { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 1.6s ease; }
.h-mosaic .spec-big .xf.on { opacity: 1; }
.h-mosaic .spec-big .xf img { width: 70%; height: 80%; object-fit: contain; }
.h-mosaic .spec:not(.spec-big) { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; gap: 6px; }
.h-mosaic .spec:not(.spec-big) .spec-tile { aspect-ratio: auto; flex: 1; min-height: 160px; }
.h-mosaic .spec-tall { grid-row: span 3 !important; }

.h-trips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: center; padding: 0 var(--margin) var(--section); max-width: var(--max); margin: 0 auto; }
.trips-list { order: -1; display: grid; gap: 4px; align-self: end; }
.trips-list h2 { font-size: var(--t-head); color: var(--muted); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.trips-list a { display: block; font-size: var(--t-head); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; text-decoration: none; color: var(--muted); transition: color 200ms ease; }
.trips-list a[aria-selected="true"], .trips-list a:hover { color: var(--ink); }
.trips-list a[aria-selected="true"]::after { content: ""; display: inline-block; width: 0.4em; height: 0.4em; background: var(--gorse); margin-left: 0.25em; vertical-align: 0.1em; }
.trips-disc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; align-items: center; }
.trips-disc { position: relative; aspect-ratio: 1; border-radius: 50%; transition: background-color 300ms ease; display: grid; place-items: center; }
.disc-gorse { background: var(--gorse); }
.disc-sky { background: var(--sky); }
.disc-heath { background: var(--heath); }
.disc-chalk { background: var(--tile-2); }
.disc-holloway { background: var(--holloway); }
.trip-obj { position: absolute; inset: -6% 11% 11%; display: grid; place-items: center; opacity: 0; transition: opacity 300ms ease; }
.trip-obj.on { opacity: 1; }
.trip-obj img { max-height: 100%; width: auto; object-fit: contain; }
.trips-fact p { display: grid; gap: 8px; font-size: var(--t-body); }
.trips-fact b { font-size: var(--t-lead); }

.h-mend { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding: 0 var(--margin) var(--section); max-width: var(--max); margin: 0 auto; }
.mend-text { grid-column: 1 / span 3; display: grid; gap: 16px; align-content: start; }
.mend-text h2 { font-size: var(--t-head); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.04em; }
.mend-text p { max-width: 30ch; }
.mend-text a { font-weight: 700; }
.mend-grid { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 10px; }
.mend-grid .spec-wide { grid-column: span 2; }
.mend-grid .spec-wide .spec-tile { aspect-ratio: 8 / 5; }

.h-shops { background: var(--holloway); color: var(--chalk); padding: var(--section) var(--margin); }
.h-shops > h2 { font-size: var(--t-head); text-transform: uppercase; letter-spacing: -0.04em; max-width: var(--max); margin: 0 auto 40px; }
.shop-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: var(--max); margin: 0 auto; }
.shop-tile { display: grid; gap: 10px; text-decoration: none; }
.st-pic { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.st-pic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; transition: transform 400ms ease; }
.tint-gorse .st-pic { background: var(--gorse); }
.tint-sky .st-pic { background: var(--sky); }
.tint-heath .st-pic { background: var(--turf); }
.tint-holloway .st-pic { background: var(--lichen); }
.shop-tile:hover img { transform: scale(1.04); }
.st-name { font-weight: 800; font-size: var(--t-lead); }
.st-line { color: var(--chalk); opacity: 0.86; font-size: var(--t-small); }
.shops-more { max-width: var(--max); margin: 40px auto 0; font-size: var(--t-lead); }
.shops-more, .coupon-left p, .h-hero-line, .mend-text p, .trips-fact span { max-width: 60ch; }
.shops-more a { color: var(--gorse); font-weight: 700; }

.h-new { max-width: var(--max); margin: 0 auto; padding: var(--section) var(--margin) 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; }
.new-group { margin-bottom: 72px; }
.new-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; }
.new-head h3 { font-size: var(--t-head); font-weight: 800; letter-spacing: -0.04em; text-transform: uppercase; line-height: 0.95; }
.new-head a { font-size: var(--t-body); white-space: nowrap; }
.new-list { display: grid; gap: 22px; }
.new-list a { display: grid; grid-template-columns: 64px 1fr; gap: 20px; text-decoration: none; align-items: center; }
.nl-pic { width: 64px; height: 85px; background: var(--tile); display: grid; place-items: center; }
.nl-pic img { width: 58px; height: 77px; object-fit: contain; }
.nl-text { display: grid; gap: 4px; }
.nl-row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-body); }
.nl-price { font-weight: 800; font-variant-numeric: tabular-nums; }
.nl-brand { font-size: var(--t-small); color: var(--muted); }
.new-list a:hover b { text-decoration: underline; }
.new-all { grid-column: 1 / -1; }

.h-coupon { padding: var(--section) var(--margin); max-width: var(--max); margin: 0 auto; }
.coupon { position: relative; display: grid; grid-template-columns: 46% 54%; background: var(--holloway); color: var(--chalk); margin: 0 8%; min-height: 360px; }
.coupon::before, .coupon::after { content: ""; position: absolute; left: calc(46% - 14px); width: 28px; height: 28px; border-radius: 50%; background: var(--paper); }
.coupon::before { top: -14px; }
.coupon::after { bottom: -14px; }
.coupon-left { padding: 48px; display: grid; align-content: space-between; gap: 24px; border-right: 5px dotted var(--paper); }
.coupon-left h2 { font-size: var(--t-head); text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.95; color: var(--gorse); }
.coupon-right { padding: 48px; display: grid; gap: 10px; align-content: center; }
.coupon-right input { height: 54px; padding: 0 16px; border: 0; border-radius: 0; background: var(--heath); color: var(--chalk); }
.coupon-right input::placeholder { color: #B9C2B6; }
.coupon-go { height: 56px; border: 0; background: var(--gorse); color: var(--holloway); font-weight: 800; font-size: var(--t-lead); cursor: pointer; transition: background-color 160ms ease; }
.coupon-go:hover { background: #F8E591; }
.coupon-note { font-size: var(--t-small); color: var(--lichen); }

/* The holloway: a moving picture and the story of the brand green */
.h-lane { position: relative; background: var(--holloway); color: var(--chalk); }
.h-lane .lane-still { display: none; }
.h-lane video, .h-lane img { width: 100%; height: clamp(320px, 62vh, 720px); object-fit: cover; display: block; }
.h-lane-text { max-width: var(--max); margin: 0 auto; padding: 28px var(--margin) 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.h-lane-text h2 { font-size: var(--t-head); text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.95; color: var(--gorse); }
.h-lane-text p { max-width: 52ch; font-size: var(--t-lead); }

/* Entrances (taste-skill motion layer): content is visible without script */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease, transform 600ms ease; }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .h-mosaic .spec-big .xf, .trip-obj, .card-tile img, .st-pic img { transition: none; }
  .h-lane video { display: none; }
  .h-lane .lane-still { display: block; }
}

/* Tablet */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .listing-body { grid-template-columns: 220px minmax(0, 1fr); }
  .head-links { gap: 14px; }
  .pdp-top { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr); }
  .shop-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-new { grid-template-columns: 1fr; }
  .j-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone */
@media (max-width: 820px) {
  .head-row { grid-template-columns: auto 1fr auto; padding-top: 12px; gap: 12px; }
  .logo img { width: 160px; }
  .search { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .head-links { justify-self: end; gap: 12px; font-size: var(--t-small); }
  .head-links a:first-child, .head-links a:nth-child(2) { display: none; }
  .sections { display: none; }
  .menu-toggle { display: block; grid-column: 2; grid-row: 1; justify-self: end; }
  .menu-toggle summary { list-style: none; cursor: pointer; font-weight: 700; padding: 8px 12px; background: var(--tile); }
  .menu-toggle summary::-webkit-details-marker { display: none; }
  .menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--holloway); color: var(--chalk); padding: 20px var(--margin) 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; z-index: 40; }
  .menu-panel ul { display: grid; gap: 10px; }
  .menu-panel a { text-decoration: none; font-weight: 700; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .card-wide { grid-column: span 2; }
  .card-wide .card-tile { aspect-ratio: 8 / 5; }
  .card-name { font-size: var(--t-small); }
  .listing-body { grid-template-columns: 1fr; }
  .filters-panel > summary { display: block; cursor: pointer; padding: 12px 16px; background: var(--tile); font-weight: 700; list-style: none; }
  .filters-panel:not([open]) .filter-groups { display: none; }
  .filters-panel[open] .filter-groups { padding: 16px 0 8px; }
  .pdp-top, .pdp-detail, .rev-wrap, .basket-grid, .checkout-grid, .auth, .account-grid, .doc-grid, .stores-grid, .store-grid, .store-facts, .checkout-split, .j-lead, .ir-hero-in { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .buy { position: static; }
  .summary, .doc-nav, .stores-map { position: static; }
  .line { grid-template-columns: 90px minmax(0, 1fr); }
  .line-pic img { width: 90px; height: 120px; }
  .line-qty, .line-total { grid-column: 2; }
  .ov-tiles { grid-template-columns: 1fr; }
  .order-row { grid-template-columns: 1fr; }
  .store-country ul { grid-template-columns: 1fr; }
  .brand-own, .brand-list, .j-list { grid-template-columns: 1fr; }
  .ir-report { max-width: 220px; }
  .account-nav ul { grid-template-columns: 1fr 1fr; }
  .pair { grid-template-columns: 1fr; }

  .h-hero { grid-template-columns: 1fr; padding: 20px var(--margin) var(--section); }
  .h-hero h1 { font-size: clamp(34px, 9.6vw, 64px); }
  .h-mosaic { margin-right: 0; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .h-mosaic .spec-big { grid-column: 1 / -1; grid-row: auto; }
  .h-mosaic .spec-big .spec-tile { aspect-ratio: 1; height: auto; }
  .h-mosaic .spec:not(.spec-big) { grid-column: span 1; grid-row: auto; }
  .h-mosaic .spec:not(.spec-big) .spec-tile { aspect-ratio: 4 / 5; height: auto; min-height: 0; }
  .h-trips { grid-template-columns: 1fr; }
  .trips-list { order: 0; }
  .trips-list ul { display: flex; overflow-x: auto; gap: 24px; padding-bottom: 6px; }
  .trips-list a, .trips-list h2 { font-size: var(--t-title); white-space: nowrap; }
  .trips-disc-wrap { grid-template-columns: 1fr; }
  .trips-disc { width: 86vw; justify-self: center; }
  .h-mend { grid-template-columns: 1fr; }
  .h-lane-text { grid-template-columns: 1fr; }
  .mend-text, .mend-grid { grid-column: 1 / -1; }
  .mend-grid { grid-template-columns: 1fr 1fr; }
  .mend-grid .spec-wide { grid-column: 1 / -1; order: -1; }
  .shop-tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .coupon { grid-template-columns: 1fr; margin: 0; }
  .coupon::before, .coupon::after { display: none; }
  .coupon-left { border-right: 0; border-bottom: 5px dotted var(--paper); padding: 28px; }
  .coupon-right { padding: 28px; }
  .foot-tiles { grid-template-columns: 1fr 1fr; gap: 6px; }
  .foot-tiles > * { grid-column: span 1 !important; }
  .ft-mark { grid-column: 1 / -1 !important; order: -2; min-height: 160px; }
  .ft-action { grid-column: 1 / -1 !important; order: -1; min-height: 160px; }
  .ft-statement { grid-column: 1 / -1 !important; }
  .ft { padding: 20px; min-height: 0; }
  .cookie { right: 0; bottom: 0; width: 100%; }
  .cookie-main, .cookie-choose { padding: 16px var(--margin) 18px; gap: 10px; font-size: var(--t-small); }
  .cookie-h { font-size: var(--t-body); }
  .cookie-actions { flex-wrap: nowrap; }
  .cookie .btn { min-height: 44px; padding: 10px 14px; font-size: var(--t-small); flex: 1; }
  .cookie-open { padding-bottom: 200px; }
}