/* Home page, sport chips, collection band and the pinned-text showcase (2026-10-06).
 * Same vocabulary as ks.css: paper ground, double-bezel shells, brass pills. The one new colour is
 * the Seaford district green, used only on things that belong to the Seaford collection.
 */
:root{
  --ks-seaford:      #0d6a2f;
  --ks-seaford-deep: #07471f;
  --ks-seaford-wash: #eaf3ec;
}

/* ---------------------------------------------------------------- shared bits */
.ks .ks-eyebrow--exclusive{ background: var(--ks-seaford); color: #fff; box-shadow: none; }

.ks .ks-h-btn{
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 0.9rem 0.85rem 1.4rem; border-radius: var(--ks-r-pill);
  background: var(--ks-brass-lit); color: var(--ks-walnut-deep);
  font-weight: 600; font-size: 0.98rem; text-decoration: none; line-height: 1.1;
  transition: background-color 400ms var(--ks-ease), transform 400ms var(--ks-ease);
}
.ks .ks-h-btn:hover{ background: #e2c992; color: var(--ks-walnut-deep); }
.ks .ks-h-btn:active{ transform: scale(0.98); }
.ks .ks-h-btn:focus-visible, .ks .ks-h-link:focus-visible, .ks .ks-h-tile:focus-visible,
.ks .ks-h-ex:focus-visible, .ks .ks-chips a:focus-visible, .ks .ks-x-cta:focus-visible{
  outline: 2px solid var(--ks-brass); outline-offset: 3px;
}
.ks .ks-h-dot{
  display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: rgb(64 33 16 / 0.1); transition: transform 400ms var(--ks-ease);
}
.ks .ks-h-btn:hover .ks-h-dot{ transform: translateX(2px); }
.ks .ks-h-btn--green{ background: var(--ks-seaford); color: #fff; }
.ks .ks-h-btn--green .ks-h-dot{ background: rgb(255 255 255 / 0.18); }
.ks a.ks-h-ex:hover .ks-h-btn--green{ background: var(--ks-seaford-deep); color: #fff; }

.ks .ks-h-link{
  color: var(--ks-walnut); font-weight: 600; font-size: 0.95rem;
  text-decoration: underline; text-decoration-color: rgb(115 87 64 / 0.35); text-underline-offset: 0.25em;
}
.ks .ks-h-link:hover{ color: var(--ks-walnut-deep); text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- home */
body.ks-home-page .entry-header,
body.ks-home-page .storefront-breadcrumb{ display: none; }
body.ks-home-page .site-main,
body.ks-home-page .hentry{ margin: 0; padding: 0; }
body.ks-home-page .entry-content{ margin: 0; }
body.ks-home-page .content-area{ width: 100%; float: none; margin: 0; }

.ks-home{ position: relative; z-index: 2; padding-bottom: clamp(3rem, 7vw, 6rem); }
.ks-home .ks-h-section{ margin-top: clamp(3.5rem, 8vw, 6.5rem); }
.ks-home .ks-h-head{
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: 0 0 clamp(1.1rem, 2.4vw, 1.75rem);
}
.ks-home .ks-h-h2{
  font-family: var(--ks-serif); font-weight: 700; color: var(--ks-ink);
  font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.45rem); line-height: 1.08; letter-spacing: -0.015em; margin: 0;
}

.ks-home .ks-h-hero{
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  padding-top: clamp(2rem, 5vw, 4.5rem);
}
.ks-home .ks-h-hero .ks-title{ font-size: clamp(2.3rem, 1.4rem + 3.3vw, 4.2rem); max-width: 14ch; }
.ks-home .ks-h-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.6rem; }
.ks-home .ks-h-hero-art{
  margin: 0; padding: 0.45rem; border-radius: var(--ks-r-shell);
  background: linear-gradient(180deg, var(--ks-paper-warm) 0%, var(--ks-paper-sunk) 100%);
  box-shadow: var(--ks-sh-2), var(--ks-inner);
}
.ks-home .ks-h-hero-art img{
  display: block; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover;
  border-radius: var(--ks-r-core);
}

/* Shop by sport: one tile per category, picture = a real design in it. */
.ks-home .ks-h-tiles{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
.ks-home .ks-h-tile{ display: block; text-decoration: none; color: inherit; }
.ks-home .ks-h-tile-core{
  display: grid; place-items: center; aspect-ratio: 1; padding: 0.4rem;
  border-radius: var(--ks-r-core);
  background: linear-gradient(180deg, var(--ks-paper-warm) 0%, var(--ks-paper-sunk) 100%);
  box-shadow: var(--ks-sh-1), var(--ks-inner);
  transition: transform 600ms var(--ks-ease), box-shadow 600ms var(--ks-ease);
}
.ks-home .ks-h-tile-core img{ width: 78%; height: 78%; object-fit: contain; transition: transform 800ms var(--ks-ease); }
.ks-home .ks-h-tile:hover .ks-h-tile-core{ transform: translateY(-4px); box-shadow: var(--ks-sh-lift), var(--ks-inner); }
.ks-home .ks-h-tile:hover .ks-h-tile-core img{ transform: scale(1.05) rotate(-1.5deg); }
.ks-home .ks-h-tile-name{
  display: block; margin-top: 0.8rem; padding: 0 0.2rem;
  font-family: var(--ks-serif); font-weight: 700; font-size: 1.2rem; color: var(--ks-ink);
}
.ks-home .ks-h-tile-meta{ display: block; padding: 0 0.2rem; font-size: 0.85rem; color: var(--ks-ink-3); }

/* School exclusive: one wide card, its own green. */
.ks-home .ks-h-ex{
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3.5vw, 3rem); align-items: center;
  padding: clamp(1rem, 2.6vw, 2rem); border-radius: var(--ks-r-shell);
  background: linear-gradient(160deg, var(--ks-seaford-wash) 0%, var(--ks-paper-warm) 70%);
  box-shadow: var(--ks-sh-1), inset 0 0 0 1px rgb(13 106 47 / 0.12);
  text-decoration: none; color: inherit;
  transition: box-shadow 600ms var(--ks-ease);
}
.ks-home .ks-h-ex:hover{ box-shadow: var(--ks-sh-2), inset 0 0 0 1px rgb(13 106 47 / 0.22); }
.ks-home .ks-h-ex-art{
  display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--ks-r-core);
  background: radial-gradient(90% 80% at 50% 40%, #fff 0%, var(--ks-paper-warm) 70%);
  box-shadow: inset 0 0 0 1px var(--ks-line-soft);
}
.ks-home .ks-h-ex-art img{ width: 80%; height: 80%; object-fit: contain; transition: transform 900ms var(--ks-ease); }
.ks-home .ks-h-ex:hover .ks-h-ex-art img{ transform: scale(1.04) rotate(-1.5deg); }
.ks-home .ks-h-ex-copy{ display: flex; flex-direction: column; align-items: flex-start; }
.ks-home .ks-h-ex-title{
  font-family: var(--ks-serif); font-weight: 700; color: var(--ks-ink);
  font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.5rem); line-height: 1.05; letter-spacing: -0.015em;
}
.ks-home .ks-h-ex-lede{ margin: 0.8rem 0 1.1rem; color: var(--ks-ink-2); line-height: 1.58; max-width: 48ch; }
.ks-home .ks-h-ex-facts{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; }
.ks-home .ks-h-ex-facts span,
.ks .ks-band-facts span{
  padding: 0.4rem 0.8rem; border-radius: var(--ks-r-pill); background: #fff;
  box-shadow: inset 0 0 0 1px rgb(13 106 47 / 0.16); font-size: 0.85rem; color: var(--ks-ink-2);
}
.ks-home .ks-h-ex-facts strong, .ks .ks-band-facts strong{ color: var(--ks-seaford-deep); }

/* How it works */
.ks-home .ks-h-steps{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem);
}
.ks-home .ks-h-steps li{
  padding: clamp(1.25rem, 2.4vw, 1.75rem); border-radius: var(--ks-r-core);
  background: var(--ks-paper-warm); box-shadow: inset 0 0 0 1px var(--ks-line-soft);
}
.ks-home .ks-h-step-n{
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--ks-brass-lit); color: var(--ks-walnut-deep); font-weight: 700; font-size: 0.9rem;
}
.ks-home .ks-h-steps h3{
  font-family: var(--ks-serif); font-weight: 700; font-size: 1.25rem; color: var(--ks-ink);
  margin: 0.9rem 0 0.4rem; line-height: 1.2;
}
.ks-home .ks-h-steps p{ margin: 0; color: var(--ks-ink-2); line-height: 1.58; font-size: 0.97rem; }

/* Real prints */
.ks-home .ks-h-proof{ display: grid; grid-template-columns: 0.75fr 1.33fr; gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.ks-home .ks-h-proof figure{ margin: 0; }
.ks-home .ks-h-proof img{
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--ks-r-core);
  box-shadow: var(--ks-sh-1);
}
.ks-home .ks-h-proof figure:last-child img{ aspect-ratio: auto; height: 100%; }
.ks-home .ks-h-proof figure:first-child img{ aspect-ratio: 3 / 4; }

/* ---------------------------------------------------------------- shop: sport chips */
.ks .ks-chips{ margin: 0.25rem 0 clamp(1.25rem, 3vw, 2rem); }
.ks .ks-chips ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ks .ks-chips a{
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.5rem 1rem; border-radius: var(--ks-r-pill);
  background: var(--ks-paper-sunk); box-shadow: var(--ks-inner);
  color: var(--ks-ink-2); font-size: 0.9rem; font-weight: 500; text-decoration: none;
  transition: background-color 400ms var(--ks-ease), color 400ms var(--ks-ease);
}
.ks .ks-chips a span{ color: var(--ks-ink-3); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.ks .ks-chips a:hover{ background: #ece6dd; color: var(--ks-ink); }
.ks .ks-chips a[aria-current="page"]{ background: var(--ks-ink); color: #fff; }
.ks .ks-chips a[aria-current="page"] span{ color: rgb(255 255 255 / 0.65); }
.ks .ks-chips .is-exclusive a{ background: var(--ks-seaford-wash); color: var(--ks-seaford-deep); box-shadow: inset 0 0 0 1px rgb(13 106 47 / 0.18); }
.ks .ks-chips .is-exclusive a:hover{ background: #dcebe0; }

/* A collection's category page */
.ks .ks-band{ margin: 0.25rem 0 clamp(1.5rem, 3.5vw, 2.5rem); }
.ks .ks-band .ks-lede{ max-width: 60ch; }
.ks .ks-band-facts{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }

/* Exclusive card in the grid: green tag */
.ks .ks-card--exclusive .ks-card-tag{ background: var(--ks-seaford); color: #fff; }

/* ---------------------------------------------------------------- pinned-text showcase (product page) */
.ks .ks-x{
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3.2vw, 3rem); align-items: start;
}
.ks .ks-x-stage{
  position: relative; aspect-ratio: 1; border-radius: var(--ks-r-core); overflow: clip;
  background: radial-gradient(120% 90% at 50% 12%, #ffffff 0%, var(--ks-paper-warm) 55%, var(--ks-paper-sunk) 100%);
  box-shadow: inset 0 0 0 1px var(--ks-line-soft);
}
@media (min-width: 900px){ .ks .ks-x-stage{ position: sticky; top: 1.5rem; } }
.ks .ks-x-canvas{ position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.ks .ks-x-canvas:active{ cursor: grabbing; }
/* The still holds the space until the model is built, then steps aside. */
.ks .ks-x-still{
  position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain;
  transition: opacity 600ms var(--ks-ease);
}
.ks .ks-x-stage.is-ready:not(.is-static) .ks-x-still{ opacity: 0; }
.ks .ks-x-hint{
  position: absolute; left: 50%; bottom: 0.9rem; transform: translateX(-50%); margin: 0;
  padding: 0.3rem 0.75rem; border-radius: var(--ks-r-pill); background: rgb(255 255 255 / 0.85);
  font-size: 0.78rem; color: var(--ks-ink-3); pointer-events: none;
}
.ks .ks-x-stage.is-static .ks-x-hint{ display: none; }

.ks .ks-x-panel{ padding-top: 0.25rem; }
.ks .ks-x-clock{
  display: inline-flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1.1rem;
  padding: 0.5rem 0.9rem; border-radius: var(--ks-r-pill);
  background: var(--ks-seaford-wash); color: var(--ks-seaford-deep); font-size: 0.88rem;
}
.ks .ks-x-left{ font-weight: 600; }
.ks .ks-x-h{
  font-family: var(--ks-serif); font-weight: 700; color: var(--ks-ink);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.1; margin: 0 0 0.5rem;
}
.ks .ks-x-note{ color: var(--ks-ink-2); line-height: 1.55; margin: 0 0 1.4rem; max-width: 42ch; }

.ks .ks-x-tiers{
  border-radius: 1rem; overflow: clip; margin: 0 0 1.4rem;
  box-shadow: inset 0 0 0 1px var(--ks-line);
}
.ks .ks-x-tiers-row{
  display: flex; justify-content: space-between; padding: 0.6rem 1rem;
  font-variant-numeric: tabular-nums; font-size: 0.95rem; color: var(--ks-ink);
}
.ks .ks-x-tiers-row + .ks-x-tiers-row{ border-top: 1px solid var(--ks-line-soft); }
.ks .ks-x-tiers-row span:last-child{ font-weight: 600; }
.ks .ks-x-tiers-head{ background: var(--ks-paper-sunk); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ks-ink-3); }
.ks .ks-x-tiers-head span:last-child{ font-weight: 500; }

.ks .ks-x-facts{ margin: 0 0 1.6rem; display: grid; gap: 0.7rem; }
.ks .ks-x-facts div{ display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.75rem; }
.ks .ks-x-facts dt{ font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ks-ink-3); padding-top: 0.15rem; font-weight: 500; }
.ks .ks-x-facts dd{ margin: 0; color: var(--ks-ink-2); line-height: 1.5; }

.ks .ks-x-cta{
  display: inline-flex; align-items: center; justify-content: space-between; gap: 0.9rem;
  width: 100%; max-width: 24rem;
  padding: 1rem 1rem 1rem 1.5rem; border-radius: var(--ks-r-pill);
  background: var(--ks-seaford); color: #fff; font-weight: 600; font-size: 1.02rem; text-decoration: none;
  transition: background-color 400ms var(--ks-ease), transform 400ms var(--ks-ease);
}
.ks .ks-x-cta:hover{ background: var(--ks-seaford-deep); color: #fff; }
.ks .ks-x-cta:active{ transform: scale(0.985); }
.ks .ks-x-cta.is-off{ background: var(--ks-paper-sunk); color: var(--ks-ink-3); cursor: not-allowed; }
.ks .ks-x-cta-dot{ display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgb(255 255 255 / 0.16); }
.ks .ks-x-small{ margin: 0.7rem 0 0; font-size: 0.82rem; color: var(--ks-ink-3); }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 900px){
  .ks-home .ks-h-tiles{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ks .ks-x{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .ks-home .ks-h-hero{ grid-template-columns: 1fr; }
  .ks-home .ks-h-hero-art{ order: -1; }
  .ks-home .ks-h-hero-art img{ aspect-ratio: 16 / 10; }
  .ks-home .ks-h-ex{ grid-template-columns: 1fr; }
  .ks-home .ks-h-ex-art{ aspect-ratio: 16 / 11; }
  .ks-home .ks-h-steps{ grid-template-columns: 1fr; }
  .ks-home .ks-h-proof{ grid-template-columns: 1fr 1fr; }
  .ks-home .ks-h-proof figure:last-child{ grid-column: 1 / -1; }
  .ks-home .ks-h-proof figure:last-child img{ aspect-ratio: 16 / 10; height: auto; }
  .ks .ks-chips ul{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem 0.25rem; }
  .ks .ks-chips li{ flex: 0 0 auto; }
}
@media (max-width: 480px){
  .ks-home .ks-h-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ks-home .ks-h-head{ flex-direction: column; align-items: flex-start; gap: 0.35rem; }
}

/* Storefront underlines every link in page content; the tiles and the exclusive card are whole-card links. */
.ks .ks-h-tile, .ks .ks-h-tile *, .ks .ks-h-ex, .ks .ks-h-ex *, .ks .ks-h-btn, .ks .ks-chips a{ text-decoration: none; }

/* A collection's cover is a photo, so it fills its frame instead of floating at 80%. */
.ks-home .ks-h-ex-art.is-cover{ overflow: clip; }
.ks-home .ks-h-ex-art.is-cover img{ width: 100%; height: 100%; object-fit: cover; }
.ks .ks-card-img--cover{ width: 100%; height: 100%; object-fit: cover; }

/* "Personalisation" is longer than the spec table's label column on a phone. */
.ks .rja-kc-spec-table th{ overflow-wrap: anywhere; hyphens: auto; }

/* Storefront's own rule is `.hentry .entry-content a` (0,2,1), which out-ranks the two-class reset
 * above. Beaten by a longer chain, not by !important. */
body.ks-home-page .hentry .entry-content .ks-home a:not(.ks-h-link):not(.button),
body.ks-home-page .hentry .entry-content .ks-home a:not(.ks-h-link):not(.button) *{ text-decoration: none; }

/* ---------------------------------------------------------------- shop by category (2026-10-06)
 * One card per top-level category, holding its own tiles. With one category the card runs the full
 * width (copy left, tiles right); a second category turns the list into a two-up grid. */
.ks-home .ks-h-cats{ list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); }
.ks-home .ks-h-cats:not(.ks-h-cats--n1){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ks-home .ks-h-cat{
  padding: clamp(1.1rem, 2.6vw, 2rem); border-radius: var(--ks-r-shell);
  background: linear-gradient(180deg, var(--ks-paper-warm) 0%, var(--ks-paper-sunk) 100%);
  box-shadow: var(--ks-sh-1), var(--ks-inner);
}
.ks-home .ks-h-cats--n1 .ks-h-cat{
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center;
}
.ks-home .ks-h-cat-title{
  font-family: var(--ks-serif); font-weight: 700; margin: 0 0 0.6rem;
  font-size: clamp(1.55rem, 1.15rem + 1.3vw, 2.2rem); line-height: 1.05; letter-spacing: -0.015em;
}
body.ks-home-page .hentry .entry-content .ks-h-cat-title a{ color: var(--ks-ink); text-decoration: none; }
.ks-home .ks-h-cat-lede{ margin: 0 0 0.6rem; color: var(--ks-ink-2); line-height: 1.55; }
.ks-home .ks-h-cat-meta{ margin: 0 0 1.2rem; font-size: 0.85rem; color: var(--ks-ink-3); }
.ks-home .ks-h-cat .ks-h-tile-core{ background: var(--ks-paper); }
.ks-home .ks-h-cat .ks-h-tile-name{ font-size: 1.05rem; margin-top: 0.6rem; }
@media (max-width: 1000px){
  .ks-home .ks-h-cats--n1 .ks-h-cat{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .ks-home .ks-h-cats:not(.ks-h-cats--n1){ grid-template-columns: 1fr; }
}