/* Celsius storefront theme.
 *
 * A monochrome design system. Every colour in the site is defined once, here, as a custom
 * property: a single greyscale ramp plus pure black and white. There are no brand accent
 * colours on purpose -- the product photography is the only colour on the page, which is what
 * should carry a clothing brand. Emphasis comes from weight, scale and whitespace instead.
 *
 * Structure is drawn with hairline rules rather than cards, borders and drop shadows. It reads
 * as editorial rather than as a template, and it keeps the page quiet enough that a garment
 * photograph is the loudest thing on it.
 *
 * Dark mode is nearly free from a greyscale palette: the ramp is defined in terms of "ink" and
 * "paper" and the dark block swaps which end is which. Both an explicit data-theme and the
 * system preference are honoured.
 *
 * No webfonts, deliberately -- the system stack renders instantly with no layout shift and no
 * network request, which matters more on a shop than a bespoke typeface does.
 */

:root {
  --paper:      #fbfaf9;  /* page background: warm off-white, not clinical #fff */
  --paper-2:    #f3f1ed;  /* recessed surfaces: image wells, cart drawer */
  --paper-3:    #e9e6e1;
  --ink:        #14130f;  /* body text: near-black, softer than #000 */
  --ink-2:      #57534b;  /* secondary text */
  --ink-3:      #8b857b;  /* captions, meta, disabled */
  --rule:       #ddd8d0;  /* hairlines */
  --rule-2:     #c9c3b9;
  --solid:      #14130f;  /* filled buttons */
  --solid-ink:  #fbfaf9;  /* text on filled buttons */
  --focus:      #14130f;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;

  --measure: 68ch;      /* readable line length for prose */
  --page: 1360px;       /* max content width */
  --gutter: clamp(1.15rem, 4vw, 3.5rem);

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0:  clamp(0.94rem, 0.91rem + 0.15vw, 1.02rem);
  --step-1:  clamp(1.1rem, 1.02rem + 0.4vw, 1.35rem);
  --step-2:  clamp(1.35rem, 1.16rem + 0.9vw, 1.9rem);
  --step-3:  clamp(1.75rem, 1.3rem + 2.1vw, 3rem);
  --step-4:  clamp(2.1rem, 1.35rem + 3.6vw, 4.4rem);

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #131211;
    --paper-2:   #1c1b19;
    --paper-3:   #262421;
    --ink:       #f4f1ec;
    --ink-2:     #a9a49b;
    --ink-3:     #7c766c;
    --rule:      #322f2b;
    --rule-2:    #47433d;
    --solid:     #f4f1ec;
    --solid-ink: #131211;
    --focus:     #f4f1ec;
  }
}

:root[data-theme="dark"] {
  --paper:     #131211;
  --paper-2:   #1c1b19;
  --paper-3:   #262421;
  --ink:       #f4f1ec;
  --ink-2:     #a9a49b;
  --ink-3:     #7c766c;
  --rule:      #322f2b;
  --rule-2:    #47433d;
  --solid:     #f4f1ec;
  --solid-ink: #131211;
  --focus:     #f4f1ec;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 560;
  line-height: 1.1;
  letter-spacing: -0.021em;
  text-wrap: balance;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--ink-3); }

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

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 1px;
}

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

/* Screen-reader-only, for the skip link and icon-button labels. */
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 100; background: var(--solid); color: var(--solid-ink);
  padding: 0.6rem 1rem; font-size: var(--step--1);
}
.skip:focus { transform: translate(-50%, 0); }

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------------------------- announcement + header */

.announce {
  background: var(--solid);
  color: var(--solid-ink);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0.55rem var(--gutter);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--rule);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--paper); }
}

.header-bar {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  min-height: 62px;
}

.brand {
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: clamp(0.6rem, 1.6vw, 1.6rem); }
@media (max-width: 899px) { .nav--main { display: none; } }

.nav a, .nav summary, .header-action {
  font-size: var(--step--1);
  letter-spacing: 0.055em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  background: none;
  border: 0;
  padding: 0.4rem 0;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s var(--ease);
}
.nav a:hover, .nav summary:hover, .header-action:hover,
.nav a[aria-current="page"] { color: var(--ink); }

/* Dropdown menus, using <details> so they work with no JavaScript at all. */
.menu { position: relative; }
.menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.3rem; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after {
  content: ""; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}
.menu[open] > summary::after { transform: rotate(225deg); margin-top: 2px; }
.menu-panel {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: -1rem;
  min-width: 15rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0.5rem;
  display: grid;
  gap: 0.1rem;
}
.menu-panel a {
  display: block;
  padding: 0.5rem 0.75rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--step-0);
  color: var(--ink);
}
.menu-panel a:hover { background: var(--paper-2); }

.cart-count {
  display: inline-block;
  min-width: 1.35em;
  text-align: center;
}
.cart-count:empty { display: none; }

/* ---------------------------------------------------------------- mobile nav */

.mobile-toggle { display: none; }
@media (max-width: 899px) { .mobile-toggle { display: inline-flex; } }

.mobile-nav {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  padding: 0.5rem var(--gutter) 1.25rem;
  /* The panel opens inside the sticky header, and with five groups it is taller than a phone
     screen. Without a height it simply overflowed: the part below the fold could not be reached,
     and a touch-drag on it scrolled the page behind instead. Cap it to what is left under the
     62px header bar and let it scroll itself.
     dvh, not vh, because mobile browser chrome grows and shrinks as you scroll and vh is frozen
     at the tallest -- which puts the last link under the address bar. vh first as the fallback
     for browsers without dvh. */
  max-height: calc(100vh - 62px);
  max-height: calc(100dvh - 62px);
  overflow-y: auto;
  /* Stop the scroll chaining to the document once the panel hits its end. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav h3 {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin: 1.1rem 0 0.4rem;
}
.mobile-nav a { display: block; padding: 0.42rem 0; text-decoration: none; }

/* ---------------------------------------------------------------- main + footer */

main { flex: 1 0 auto; }

.section { padding-block: clamp(2.75rem, 7vw, 6rem); }
.section + .section { padding-top: 0; }

.page-head { max-width: var(--measure); margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.page-head p { color: var(--ink-2); font-size: var(--step-1); margin-top: 0.8rem; }

.eyebrow {
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.9rem;
}

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: clamp(3rem, 8vw, 7rem);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
  font-size: var(--step--1);
  color: var(--ink-2);
}
.footer-cols {
  display: grid;
  gap: 2rem clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.footer-cols h3 {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  margin-bottom: 0.85rem;
}
.footer-cols a { display: block; padding: 0.22rem 0; text-decoration: none; color: var(--ink-2); }
.footer-cols a:hover { color: var(--ink); text-decoration: underline; }
/* Trader identity. Quiet by design -- it is required information, not a selling point, so it
   sits above the copyright line at the same weight as the rest of the small print. */
.footer-legal {
  margin-top: 2.2rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-3);
}
.footer-legal strong { font-weight: 560; color: var(--ink-2); }

.footer-notice {
  margin-top: 1rem;
  max-width: 60ch;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-3);
}
.footer-notice p { margin: 0; }
.footer-notice a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 0.15em; }

.footer-base {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  font: inherit;
  font-size: var(--step--1);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--solid);
  color: var(--solid-ink);
  border: 1px solid var(--solid);
  cursor: pointer;
  transition: opacity 0.15s var(--ease), background 0.15s var(--ease);
}
.btn:hover { opacity: 0.82; }
.btn[disabled] { opacity: 0.38; cursor: not-allowed; }
.btn--ghost { background: none; color: var(--ink); border-color: var(--rule-2); }
.btn--ghost:hover { background: var(--paper-2); opacity: 1; }
.btn--block { width: 100%; }

/* ---------------------------------------------------------------- product grid */

.grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grid--wide { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 700px) { .grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card { position: relative; display: flex; flex-direction: column; }
.card a.card-link { text-decoration: none; display: block; }

.card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--paper-2);
  overflow: hidden;
  margin-bottom: 0.9rem;
}
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), opacity 0.3s var(--ease);
}
.card:hover .card-media img { transform: scale(1.035); }
/* Second photo revealed on hover, when the product has one. */
.card-media .alt-shot { position: absolute; inset: 0; opacity: 0; }
.card:hover .card-media .alt-shot { opacity: 1; }

.card-media--empty {
  display: grid; place-items: center;
  color: var(--ink-3); font-size: var(--step--1); letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Availability is the loudest thing on a card after the photograph, because knowing what is
 * actually buyable is the whole point of the grid. */
.flag {
  position: absolute;
  top: 0.7rem; left: 0.7rem;
  z-index: 2;
  padding: 0.3rem 0.55rem;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule-2);
}
.flag--out { background: var(--solid); color: var(--solid-ink); border-color: var(--solid); }

.card-title {
  font-size: var(--step-0);
  font-weight: 520;
  letter-spacing: -0.008em;
  margin-bottom: 0.15rem;
}
.card-type {
  font-size: var(--step--1);
  color: var(--ink-3);
  margin-bottom: 0.4rem;
}
.card-price { font-size: var(--step-0); font-variant-numeric: tabular-nums; }
.card-price .from { color: var(--ink-3); font-size: var(--step--1); }

/* Size availability, shown on the card so a shopper doesn't have to open a product to find out
 * their size is gone. Unavailable sizes stay visible but struck through -- hiding them makes the
 * range look smaller than it is. */
.sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.6rem;
  list-style: none;
  padding: 0;
}
.sizes li {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  padding: 0.13rem 0.4rem;
  min-width: 2.1rem;
  text-align: center;
}
.sizes li[data-available="0"] {
  color: var(--ink-3);
  border-color: var(--rule);
  text-decoration: line-through;
  opacity: 0.62;
}

/* ---------------------------------------------------------------- product page */

.product {
  display: grid;
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) { .product { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }

.gallery { display: grid; gap: 0.6rem; }
.gallery-main {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--paper-2);
  overflow: hidden;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: 0.5rem;
  list-style: none; padding: 0; margin: 0;
}
.thumbs button {
  display: block; width: 100%; padding: 0; cursor: pointer;
  aspect-ratio: 1 / 1; background: var(--paper-2);
  border: 1px solid transparent;
}
.thumbs button[aria-current="true"] { border-color: var(--ink); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }

.product-info { position: sticky; top: 5.5rem; }
@media (max-width: 899px) { .product-info { position: static; } }

.product-info h1 { margin-bottom: 0.5rem; }
.price-row {
  display: flex; align-items: baseline; gap: 0.75rem;
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.option-group { margin-bottom: 1.4rem; }
.option-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink-3);
  margin-bottom: 0.55rem;
}
.option-label .chosen { color: var(--ink); text-transform: none; letter-spacing: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip {
  font: inherit;
  font-size: var(--step--1);
  padding: 0.55rem 0.95rem;
  min-width: 3rem;
  text-align: center;
  background: none;
  color: var(--ink);
  border: 1px solid var(--rule-2);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.chip:hover:not([disabled]) { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--solid); color: var(--solid-ink); border-color: var(--solid); }
.chip[disabled] {
  cursor: not-allowed;
  color: var(--ink-3);
  border-color: var(--rule);
  text-decoration: line-through;
  opacity: 0.55;
}

.stock-note { font-size: var(--step--1); color: var(--ink-2); margin-top: 0.6rem; min-height: 1.2em; }

.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--step-1); margin: 2rem 0 0.7rem; }
.prose h3 { font-size: var(--step-0); margin: 1.5rem 0 0.5rem; text-transform: uppercase;
            letter-spacing: 0.07em; color: var(--ink-2); }
.prose h4 { margin: 1.2rem 0 0.4rem; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.15rem; }
.prose li { margin-bottom: 0.35rem; }
.prose blockquote {
  margin: 1.5rem 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--rule-2);
  color: var(--ink-2);
  font-size: var(--step-1);
}
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.25rem 0; }
.prose img { margin-block: 1.75rem; background: var(--paper-2); }
.prose code {
  font-size: 0.9em; background: var(--paper-2); padding: 0.1em 0.35em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.prose a { text-decoration: underline; }

/* Collapsible product detail sections keep the buy area above the fold. */
.accordion { border-top: 1px solid var(--rule); }
.accordion summary {
  list-style: none; cursor: pointer;
  padding: 1rem 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 1.1rem; color: var(--ink-3); }
.accordion[open] summary::after { content: "–"; }
.accordion .accordion-body { padding-bottom: 1.25rem; }

/* ---------------------------------------------------------------- home */

.hero { padding-block: clamp(3rem, 9vw, 8rem) clamp(2rem, 5vw, 4rem); }
.hero h1 { font-size: var(--step-4); max-width: 24ch; }
.hero p {
  margin-top: clamp(1rem, 2vw, 1.6rem);
  font-size: var(--step-1);
  color: var(--ink-2);
  max-width: 46ch;
}
.hero-actions { margin-top: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-wrap: wrap; gap: 0.75rem; }
.facts-action { margin-top: 1.5rem; }
.page-cta { margin-top: 1.25rem; }
.page-cta--end { margin-top: clamp(2rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--rule); max-width: var(--measure); }

.section-head {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  justify-content: space-between; align-items: baseline;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.section-head a { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em;
                  color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.section-head a:hover { color: var(--ink); }

/* Three short value propositions, as text rather than icons. */
.pledges {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.pledge { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.pledge h3 { margin-bottom: 0.45rem; }
.pledge p { color: var(--ink-2); font-size: var(--step--1); }

/* ---------------------------------------------------------------- cart drawer */

.cart-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s var(--ease);
}
.cart-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }

.cart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 51;
  width: min(27rem, 100vw);
  background: var(--paper);
  border-left: 1px solid var(--rule);
  transform: translateX(101%);
  transition: transform 0.3s var(--ease);
  display: flex; flex-direction: column;
}
.cart[data-open="true"] { transform: none; }

.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 1.35rem;
  border-bottom: 1px solid var(--rule);
}
.cart-head h2 { font-size: var(--step-1); }
.cart-close {
  background: none; border: 0; cursor: pointer; color: var(--ink);
  font-size: 1.5rem; line-height: 1; padding: 0.2rem 0.4rem;
}
.cart-items { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
              -webkit-overflow-scrolling: touch;
              padding: 0.5rem 1.35rem; margin: 0; list-style: none; }
.cart-item { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.9rem; padding: 1.1rem 0;
             border-bottom: 1px solid var(--rule); }
.cart-item img { aspect-ratio: 1/1; object-fit: cover; background: var(--paper-2); }
.cart-item-name { font-size: var(--step-0); margin-bottom: 0.15rem; }
.cart-item-opts { font-size: var(--step--1); color: var(--ink-3); }
.cart-item-row { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--rule-2); }
.qty button {
  background: none; border: 0; cursor: pointer; color: var(--ink);
  width: 1.9rem; height: 1.8rem; font-size: 1rem; line-height: 1;
}
.qty button:hover { background: var(--paper-2); }
.qty span { min-width: 1.6rem; text-align: center; font-variant-numeric: tabular-nums;
            font-size: var(--step--1); }
.cart-remove { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-3);
               font-size: var(--step--1); text-decoration: underline; }
.cart-remove:hover { color: var(--ink); }
.cart-foot { border-top: 1px solid var(--rule); padding: 1.25rem 1.35rem; display: grid; gap: 0.9rem; }
.cart-total { display: flex; justify-content: space-between; font-size: var(--step-1);
              font-variant-numeric: tabular-nums; }
.cart-note { font-size: var(--step--1); color: var(--ink-3); text-align: center; }
.cart-empty { color: var(--ink-3); padding: 3rem 0; text-align: center; }

/* ---------------------------------------------------------------- forms + misc */

input[type="search"], input[type="text"], input[type="email"], textarea, select {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-2);
  padding: 0.6rem 0.75rem;
  width: 100%;
}
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--ink); }

.search-form { display: flex; gap: 0.5rem; max-width: 32rem; }

.notice {
  border: 1px solid var(--rule-2);
  background: var(--paper-2);
  padding: 0.85rem 1rem;
  font-size: var(--step--1);
  margin-bottom: 1.5rem;
}

.empty { color: var(--ink-2); padding-block: 3rem; }

.center-narrow { max-width: 34rem; margin-inline: auto; text-align: center;
                 padding-block: clamp(3rem, 10vw, 7rem); }

.crumbs { font-size: var(--step--1); color: var(--ink-3); margin-bottom: 1.25rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.order-summary { border: 1px solid var(--rule); padding: 1.25rem; margin-top: 1.5rem; text-align: left; }
.order-summary li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; }
.order-summary ul { list-style: none; padding: 0; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .card:hover .card-media img { transform: none; }
}

@media print {
  .site-header, .site-footer, .cart, .cart-backdrop, .announce { display: none; }
  body { color: #000; background: #fff; }
}

/* ---------------------------------------------------------------- club kit */

/* Clubs are listed as links, never as products in the main grid -- their kit is made for an
 * outside club and mixing it into the Celsius range misrepresents both. */
.club-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.club-list a {
  display: block;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  font-size: var(--step-1);
  letter-spacing: -0.015em;
  transition: padding-left 0.2s var(--ease), color 0.15s var(--ease);
}
.club-list a::after { content: " →"; color: var(--ink-3); }
.club-list a:hover { padding-left: 0.4rem; }
.club-list a:hover::after { color: var(--ink); }

/* Marks club kit wherever it does legitimately appear (search, its own collection page). */
.card-type .club { color: var(--ink); }

/* ---------------------------------------------------------------- utilities */

/* These replace inline style attributes so the CSP needs no style-src 'unsafe-inline'. */
.lede { margin-top: 1rem; color: var(--ink-2); }
.cta { margin-top: 1.75rem; }
.search-out { margin-top: 2.5rem; }
.cart-note--buy { margin-top: 0.75rem; }
.order-total {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}

/* ---------------------------------------------------------------- fact strip */

/* The four numbers clubs always ask for. Set large and plain, on hairline rules, so they read as
 * information rather than as marketing badges. */
.facts {
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.fact { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.fact dt {
  font-size: var(--step-2);
  font-weight: 560;
  letter-spacing: -0.022em;
  line-height: 1.05;
}
.fact dd {
  margin: 0.4rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-2);
  max-width: 22ch;
}

/* The access code for the Celsius range. Deliberately plain and unpromoted: it is a door for
   people who were given a code, not a promo box inviting everyone to hunt for one. */
.cart-code {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.cart-code-label {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-2);
}
.cart-code-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-2);
  padding: 0.35rem 0;
}
.cart-code-input:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

/* ------------------------------------------------------------- club archive */

/* One tile per club we have made kit for. Two up on a phone, four across on a desktop.
   The badges come from the clubs and arrive at every size and in every format -- a 296px PNG
   crest, a 1500px lockup, an SVG -- so each is `contain`ed in a fixed square rather than
   re-cut. Anything supplied later lines up with the rest without being touched. */
.club-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-block: 1.75rem;
}
@media (min-width: 700px) { .club-grid { grid-template-columns: repeat(4, 1fr); } }

.club-tile {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
  color: var(--ink);
}
.club-tile-media {
  /* These are other people's marks, and several are dark line art -- the Barts crest is black.
     On the dark theme they would vanish against the page, so the square keeps its own light
     backing in both themes rather than inheriting one. */
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid var(--rule);
  padding: 12%;
  margin-bottom: 0.6rem;
}
.club-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.club-tile-media .card-media--empty { border: 0; background: none; color: #767676; }
.club-tile-name { font-size: var(--step-0); line-height: 1.25; }
.club-tile-meta { font-size: var(--step--1); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.club-tile:hover .club-tile-name { text-decoration: underline; }
/* A club whose kit is no longer listed is still part of the record, but it is not a door. */
.club-tile--quiet { cursor: default; }
.club-tile--quiet .club-tile-media { opacity: 0.72; }

/* ---------------------------------------------------------------- tables */

/* The custom-kit quantity/price matrix. Set as a real table: which price belongs to which
 * quantity tier is the whole content, and a list cannot carry that. Scrolls inside its own box so
 * a wide matrix never widens the page on a phone. */
.table-scroll {
  overflow-x: auto;
  margin-block: 1.75rem;
  border-top: 1px solid var(--rule);
  -webkit-overflow-scrolling: touch;
}
.prose table, .table-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step-0);
  font-variant-numeric: tabular-nums;
}
.table-scroll th,
.table-scroll td {
  text-align: right;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
/* First column is the row label (a garment name), so it reads left-aligned and may wrap. */
.table-scroll th:first-child,
.table-scroll td:first-child {
  text-align: left;
  white-space: normal;
  min-width: 12rem;
  padding-left: 0;
}
.table-scroll th:last-child,
.table-scroll td:last-child { padding-right: 0; }
.table-scroll th {
  font-size: var(--step--1);
  font-weight: 560;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-2);
  border-bottom-color: var(--rule-2);
}
.table-scroll tbody tr:last-child td { border-bottom: 0; }
.table-scroll td:empty::after { content: "—"; color: var(--ink-3); }