/* ------------------------------------------------------------------ head */
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--green); color: #fff;
  padding: .7rem 1.1rem; z-index: 100; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }

.site-head { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid rgba(40,40,40,.1); }
.site-head__in {
  max-width: 1240px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; text-decoration: none; }
.logo img { height: 38px; width: 38px; }
.logo__text { font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-left: auto; }
.nav a { font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; }
.nav a:hover, .nav a:focus-visible { color: var(--green); }
.nav a.is-here { color: var(--green); font-weight: 600; }

.head-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.head-actions a { text-decoration: none; font-size: 14px; font-weight: 500; }
.head-actions__acct { color: var(--ink); }
.head-actions__acct:hover { color: var(--green); }
.bag {
  color: var(--ink); border: 1px solid rgba(40,40,40,.18);
  border-radius: 4px; padding: 7px 13px;
}
.bag:hover { border-color: var(--green); color: var(--green); }
.bag__n { font-weight: 600; }
.cta {
  background: var(--green); color: #fff; font-weight: 600;
  border-radius: 4px; padding: 9px 17px;
}
.cta:hover { background: var(--gold); color: var(--ink); }

@media (max-width: 900px) {
  .site-head__in { gap: 14px; padding: 10px 16px; }
  .nav {
    order: 3; width: 100%; margin-left: 0; gap: 18px;
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
  .head-actions { margin-left: auto; }
  .cta { display: none; }
}

/* Jost, self hosted. It is the font the current c22.ie already uses, so the
   rebuild reads as the same brand. Self hosted rather than pulled from Google
   so no visitor IP is handed to a third party, which keeps the privacy policy
   on this site honest. One variable file covers every weight. */
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-var.woff2') format('woff2-variations'),
       url('../fonts/jost-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Croí22 storefront. Carries the current site's palette and its plain,
   product-first feel: white ground, green for anything structural,
   gold reserved for the thing you are meant to press. */

:root {
  --green: #006947;
  --green-dark: #00513a;
  --gold: #f8cb24;
  --gold-dark: #e0b30d;
  --ink: #282828;
  --muted: #6d6d6d;
  --line: #e6e6e6;
  --sand: #f8f8f8;
  --danger: #8d2018;
  --radius: 10px;
  --wrap: 1180px;
  --font: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font: 400 17px/1.65 var(--font);
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); }
h1, h2, h3 {
  line-height: 1.12; margin: 0 0 .5em; font-weight: 600;
  letter-spacing: -.02em; text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: 1.15rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: max(1.1rem, env(safe-area-inset-left)); }

.buildbar {
  background: var(--gold); color: #3a2f00; text-align: center;
  padding: .45rem 1rem; font-size: .85rem; font-weight: 600;
}

/* ------------------------------------------------------------------ hero */
.hero { position: relative; isolation: isolate; background: #e9e9e9; overflow: hidden; }
.hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 25% 50%; z-index: -2;
}
/* The stock hero is a pale greyscale photo, so the copy needs its own ground
   to stay readable. A left to right wash keeps the runner visible on the right. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 42%, rgba(255,255,255,.35) 68%, rgba(255,255,255,0) 100%);
}
.hero__in { padding: clamp(3rem, 9vw, 6.5rem) 1.1rem; max-width: var(--wrap); }
.hero h1 { color: var(--green); max-width: 13ch; letter-spacing: -.035em; font-weight: 600; font-size: clamp(2.3rem, 6.5vw, 4rem); }
.hero p { font-size: 1.06rem; max-width: 46ch; margin: 0 0 1.7rem; color: #3c3c3c; }
@media (max-width: 640px) {
  .hero::after { background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.88) 65%, rgba(255,255,255,.6) 100%); }
}

.section--green { background: var(--green); color: #fff; }
.section--green h2 { color: #fff; }
.section--green a:not(.btn) { color: var(--gold); }

/* the three sport marks from the current site */
.balls { display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap; }
.balls figure { margin: 0; }
.balls img { width: 90px; height: 90px; object-fit: contain; margin: 0 auto; }
.balls figcaption { margin-top: .5rem; font-weight: 600; font-size: .95rem; }

/* photo tiles */
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.tile {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  background-size: cover; background-position: center; display: grid; align-items: end;
}
.tile::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,60,40,0) 35%, rgba(0,60,40,.78) 100%);
}
.tile span {
  position: relative; color: #fff; font-weight: 700; font-size: 1.15rem;
  padding: 1rem 1.1rem; text-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* padding-block, never the shorthand: elements carry both .wrap and .section,
   and a shorthand here would wipe out .wrap's side gutter. */
.section { padding-block: clamp(2.2rem, 5vw, 3.5rem); }
.section--sand { background: var(--sand); }
.section__head { margin-bottom: 1.6rem; }
.section__head p { color: var(--muted); margin: 0; }

/* ----------------------------------------------------------------- grids */
.cards { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }

.card2 {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #fff; text-decoration: none; color: inherit; display: flex; flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease;
}
.card2:hover { box-shadow: 0 6px 22px rgba(0,0,0,.08); transform: translateY(-2px); }
.card2__img { aspect-ratio: 1; background: var(--sand); display: grid; place-items: center; }
.card2__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.card2__body { padding: .85rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.card2__name { font-weight: 600; }
.card2__meta { color: var(--muted); font-size: .9rem; }
.card2__price { font-weight: 700; margin-top: auto; padding-top: .4rem; }

/* -------------------------------------------------------------- product */
.product { display: grid; gap: 2rem; padding: 2rem 0; }
@media (min-width: 900px) { .product { grid-template-columns: 1.15fr 1fr; gap: 3rem; } }

.gallery__main { background: var(--sand); border-radius: var(--radius); overflow: hidden; }
.gallery__main img { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.gallery__thumbs { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.gallery__thumbs img {
  width: 72px; height: 72px; object-fit: contain; background: var(--sand);
  border: 1px solid var(--line); border-radius: 8px;
}

.price { font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; margin: 0 0 .4rem; }
.crumbs { color: var(--muted); font-size: .9rem; margin: 0 0 .6rem; }
.crumbs a { color: var(--muted); }

.sizes { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 1.4rem; }
.sizes input { position: absolute; opacity: 0; width: 0; height: 0; }
.sizes label {
  display: inline-block; border: 1px solid #c9c9c9; border-radius: 8px;
  padding: .5rem .85rem; cursor: pointer; font-weight: 500; min-width: 3.2rem; text-align: center;
}
.sizes input:checked + label { border-color: var(--green); background: var(--green); color: #fff; }
.sizes input:focus-visible + label { outline: 3px solid rgba(0,105,71,.35); outline-offset: 2px; }

.field { margin-bottom: 1.1rem; }
label.block { display: block; font-weight: 600; margin-bottom: .35rem; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], select, textarea {
  width: 100%; padding: .65rem .75rem; border: 1px solid #c9c9c9; border-radius: 8px;
  font: inherit; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(0,105,71,.22); border-color: var(--green); }
.hint { color: var(--muted); font-size: .88rem; margin: .3rem 0 0; }

.btn {
  display: inline-block; background: var(--green); color: #fff; border: 0;
  padding: .8rem 1.5rem; border-radius: 8px; font: inherit; font-weight: 500;
  letter-spacing: .01em; cursor: pointer; text-decoration: none; text-align: center;
}
.btn:hover { background: var(--green-dark); }
.btn--gold { background: var(--gold); color: #3a2f00; }
.btn--gold:hover { background: var(--gold-dark); }
.btn--ghost { background: #fff; color: var(--green); border: 1px solid var(--green); }
.btn--wide { width: 100%; }
.btn--sm { padding: .45rem .8rem; font-size: .9rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.flash { padding: .8rem 1rem; border-radius: 8px; margin: 1rem 0; border: 1px solid; font-weight: 500; }
.flash--ok  { background: #eaf6f0; border-color: #b9dfcd; color: #13543a; }
.flash--err { background: #fdeceb; border-color: #f3c4c0; color: var(--danger); }

.notice {
  border-radius: 8px; padding: .85rem 1rem; margin: 0 0 1.3rem; font-weight: 600;
  background: #fff8e1; border: 1px solid #f0dca0; color: #6b5200;
}
.notice--closed { background: #fdeceb; border-color: #f3c4c0; color: var(--danger); }

/* ------------------------------------------------------------------ cart */
.cart { display: grid; gap: 2rem; padding: 2rem 0; }
@media (min-width: 900px) { .cart { grid-template-columns: 1.6fr 1fr; align-items: start; } }

.line { display: grid; grid-template-columns: 84px 1fr auto; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); align-items: center; }
.line img { width: 84px; height: 84px; object-fit: contain; background: var(--sand); border-radius: 8px; }
.line__name { font-weight: 600; }
.line__meta { color: var(--muted); font-size: .9rem; }
.line__qty { width: 4.5rem; }

.totals { background: var(--sand); border-radius: var(--radius); padding: 1.3rem; }
.totals dl { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; margin: 0 0 1rem; }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; text-align: right; font-weight: 600; }
.totals .grand { font-size: 1.25rem; }

.empty { text-align: center; padding: 4rem 1rem; color: var(--muted); }

/* ------------------------------------------------------------------ foot */
.site-foot { background: var(--ink); color: #fff; border-top: 1px solid rgba(255,255,255,.14); }
.site-foot__in {
  max-width: 1240px; margin: 0 auto; padding: 30px 24px;
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
}
.site-foot__brand { display: flex; align-items: center; gap: 10px; }
.site-foot__brand img { height: 30px; width: 30px; }
.site-foot__brand span { font-size: 14px; color: rgba(255,255,255,.6); }
.site-foot__links { display: flex; flex-wrap: wrap; gap: 18px; }
.site-foot__links a { font-size: 14px; color: rgba(255,255,255,.8); text-decoration: none; }
.site-foot__links a:hover { color: var(--gold); }

.prose { max-width: 68ch; }
.prose p { margin: 0 0 1rem; }

/* ------------------------------------------------- page hero + dark band */
.phero { background: var(--green); color: #fff; }
.phero__in { max-width: 1240px; margin: 0 auto; padding: clamp(40px,6vw,76px) 24px; }
.phero__eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold);
}
.phero h1 {
  margin: 12px 0 0; font-size: clamp(32px,4.6vw,54px); line-height: 1.04;
  font-weight: 600; letter-spacing: -.025em; max-width: 20ch; color: #fff;
}
.phero p { margin: 16px 0 0; font-size: clamp(16px,1.5vw,19px); line-height: 1.55; max-width: 48ch; color: rgba(255,255,255,.9); }

.band { background: var(--ink); color: #fff; margin-top: clamp(52px,7vw,88px); }
.band__in {
  max-width: 1240px; margin: 0 auto; padding: clamp(44px,6vw,72px) 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 32px; align-items: center;
}
.band h2 { margin: 0; font-size: clamp(24px,3vw,36px); line-height: 1.06; font-weight: 600; letter-spacing: -.02em; max-width: 22ch; color: #fff; }
.band p { margin: 14px 0 24px; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.78); max-width: 46ch; }
.band__aside p { margin: 0; border-left: 4px solid var(--gold); padding-left: 18px; }
.band__aside strong { color: #fff; }

/* -------------------------------------------------------- size guide page */
.measure { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 36px; align-items: start; }
.deflist { margin: 0; display: grid; gap: 2px; }
.deflist div { display: grid; grid-template-columns: 9rem 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(40,40,40,.1); }
.deflist dt { font-weight: 600; color: var(--green); }
.deflist dd { margin: 0; color: #444; }

.covers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 14px; }
.cover {
  border: 1px solid rgba(40,40,40,.12); border-left: 4px solid var(--gold);
  border-radius: 6px; padding: 16px 18px;
}
.cover__k { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.cover__v { font-size: 16px; margin-top: 6px; line-height: 1.5; }

.chart { margin: 0 0 34px; }
.chart h3 { font-size: 1.15rem; margin: 0 0 10px; }
.chart__scroll { overflow-x: auto; border: 1px solid rgba(40,40,40,.12); border-radius: 6px; }
.chart table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 14px; }
.chart thead th { background: var(--green); color: #fff; font-weight: 600; padding: 12px 10px; text-align: center; white-space: nowrap; }
.chart thead th:first-child { text-align: left; padding-left: 14px; }
.chart thead th.is-youth-end { border-right: 3px solid var(--gold); }
.chart tbody tr { border-top: 1px solid rgba(40,40,40,.12); }
.chart tbody th {
  text-align: left; font-weight: 500; background: var(--sand);
  padding: 11px 14px; white-space: nowrap;
}
.chart tbody td { padding: 11px 10px; text-align: center; }
.chart tbody td.is-youth-end { border-right: 3px solid var(--gold); }

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

@media (max-width: 560px) {
  .deflist div { grid-template-columns: 1fr; gap: 2px; }
  .band__in, .measure { gap: 24px; }
}

/* ------------------------------------------------------------- price list */
.pricegrid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.pricecard { border: 1px solid rgba(40,40,40,.12); border-radius: 8px; padding: 20px 22px; }
.pricecard h2 {
  margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--green);
}
.pricetable { width: 100%; border-collapse: collapse; }
.pricetable tr { border-top: 1px solid rgba(40,40,40,.1); }
.pricetable tr:first-child { border-top: 0; }
.pricetable th { text-align: left; font-weight: 400; padding: 10px 0; }
.pricetable td { text-align: right; font-weight: 600; padding: 10px 0; white-space: nowrap; }

/* Product description, rendered from the admin rich text box. */
.richtext h3, .richtext h4 { font-size: 1.05rem; margin: 1.4em 0 .4em; }
.richtext p { margin: 0 0 1em; }
.richtext ul, .richtext ol { margin: 0 0 1em; padding-left: 1.3em; }
.richtext li { margin: 0 0 .3em; }
.richtext strong { font-weight: 600; }
.richtext a { color: var(--green); }

/* Measurement diagram beside the A to E list, as in the design. */
.measure__with-diagram { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.measure__diagram { width: clamp(120px, 22vw, 190px); height: auto; flex-shrink: 0; }
.measure__with-diagram .deflist { flex: 1; min-width: 220px; }
.deflist dt { white-space: nowrap; }

/* The band's picture panel. */
.band__aside img {
  width: 100%; height: auto; max-height: 240px; object-fit: contain;
  background: #fff; border-radius: 6px; padding: 20px;
}

/* Base rules carried over from the Claude Design homepage. */
.dc a { color: var(--green); text-decoration: none; }
.dc a:hover { color: var(--ink); }
.dc img { display: block; }
::selection { background: var(--gold); color: var(--ink); }
.dc section { scroll-margin-top: 90px; }
.dc input, .dc textarea { font-family: var(--font); }
.dc textarea { resize: vertical; }

/* Portfolio gallery of kit mock-ups. */
.gallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.gallery__item {
  margin: 0; background: var(--sand); border: 1px solid rgba(40,40,40,.1);
  border-radius: 8px; padding: 18px; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
}
.gallery__item img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* Sign in, register and password pages. */
.authbox { max-width: 26rem; margin: 0 auto; }
.authbox h1 { font-size: 1.7rem; }