/* ==========================================================================
   DB² Apparel — global stylesheet (draft 3)
   Navy-first theme: deep navy page background with white "panel" islands
   (product cards, review card, size chart, etc.) for contrast.
   WCAG 2.1 AA contrast throughout.
   ========================================================================== */

:root {
  --navy: #142440;
  --navy-dark: #0d1a30;
  --navy-mid: #1f3355;
  --cream: #f6f4ef;
  --panel: #ffffff;
  --text: #1a2438;
  --muted: #4d5a70;        /* 6.9:1 on white panels */
  --muted-on-navy: #c9d2e0; /* 9.5:1 on navy */
  --line: #ddd8ce;
  --line-on-navy: rgb(255 255 255 / 0.18);
  --focus: #142440;
  --radius: 4px;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* Light panel islands get a navy focus ring instead of white */
.product-card,
.contact-card,
.nav-drop-menu,
.cart-summary,
.qty-control,
.review-card {
  --focus: #142440;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--cream);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: 1.25rem; }

p {
  margin: 0 0 1em;
}

a {
  color: var(--navy);
}

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

.on-navy :focus-visible,
.site-footer :focus-visible,
.site-header :focus-visible {
  --focus: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

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

.container {
  width: min(1220px, 100% - 2.5rem);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3.5rem;
  z-index: 300;
  background: var(--navy);
  border: 1px solid #fff;
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
}

.eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: var(--muted);
}

/* ==========================================================================
   Announcement bar + header
   ========================================================================== */

.announcement-bar {
  background: #ffffff;
  color: var(--navy);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  border-bottom: 1px solid var(--line-on-navy);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: #ffffff;
}

.brand img {
  height: 3rem;
  width: auto;
}

.brand-sub {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.site-footer .brand {
  color: #fff;
}

/* --- Nav: uppercase, letterspaced, hover grows + bolds without layout shift */

.site-nav {
  margin-inline: auto;
}

.site-nav > ul {
  display: flex;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a,
.nav-drop-toggle {
  display: inline-block;
  padding: 0.6rem 0.85rem;
  text-decoration: none;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: transform 0.12s ease;
}

/* Ghost element reserves the heavier weight so hover doesn't shift neighbours */
.site-nav a::after,
.nav-drop-toggle .nav-drop-label::after {
  content: attr(data-text);
  display: block;
  height: 0;
  font-weight: 700;
  visibility: hidden;
  overflow: hidden;
}

/* Hover/active: slight weight increase + underline (no heavy bold) */
.site-nav a:hover,
.site-nav a:focus-visible,
.nav-drop-toggle:hover,
.nav-drop-toggle:focus-visible {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.45em;
  text-decoration-thickness: 1.5px;
}

.site-nav a[aria-current="page"] {
  font-weight: 700;
  border-bottom: 2px solid #ffffff;
}

/* --- Collections dropdown */

.nav-drop {
  position: relative;
}

.nav-drop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-drop-toggle .chevron {
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
}

.nav-drop.is-open .nav-drop-toggle .chevron {
  transform: rotate(225deg) translateY(-2px);
}

.nav-drop-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 13rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 32px rgb(13 26 48 / 0.14);
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  z-index: 120;
}

.nav-drop.is-open .nav-drop-menu {
  display: block;
}

.nav-drop-menu a {
  display: block;
  width: 100%;
  padding: 0.65rem 1.25rem;
  text-align: left;
  letter-spacing: 0.14em;
  color: var(--navy);
}

.nav-drop-menu a:hover,
.nav-drop-menu a:focus-visible {
  background: var(--cream);
  transform: none;
}

/* --- Header actions */

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.currency-select {
  font: inherit;
  font-size: 0.82rem;
  color: #ffffff;
  background: var(--navy);
  border: 1px solid rgb(255 255 255 / 0.7);
  border-radius: var(--radius);
  padding: 0.35rem 0.5rem;
}

.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  color: #ffffff;
  border-radius: var(--radius);
  text-decoration: none;
}

.cart-link svg {
  width: 1.5rem;
  height: 1.5rem;
}

.cart-count {
  position: absolute;
  top: 0.05rem;
  right: 0.05rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: var(--navy);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgb(255 255 255 / 0.7);
  border-radius: var(--radius);
  color: #ffffff;
  width: 2.6rem;
  height: 2.6rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-toggle svg {
  width: 1.4rem;
  height: 1.4rem;
}

@media (max-width: 920px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--navy);
    border-bottom: 1px solid var(--line-on-navy);
    box-shadow: 0 12px 24px rgb(0 0 0 / 0.35);
    margin: 0;
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav > ul {
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 1.25rem 1rem;
  }

  .site-nav a,
  .nav-drop-toggle {
    padding: 0.8rem 0.5rem;
    font-size: 0.9rem;
    text-align: left;
    width: 100%;
  }

  .site-nav a:hover,
  .nav-drop-toggle:hover {
    transform: none;
  }

  .site-nav a[aria-current="page"] {
    border-bottom: none;
    border-left: 3px solid #ffffff;
    padding-left: 0.75rem;
  }

  .nav-drop-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 1px solid var(--line-on-navy);
    background: transparent;
    margin-left: 1rem;
    min-width: 0;
    --focus: #ffffff;
  }

  .nav-drop-menu a {
    color: #ffffff;
  }

  .nav-drop-menu a:hover,
  .nav-drop-menu a:focus-visible {
    background: var(--navy-mid);
    color: #ffffff;
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: 2px solid var(--navy);
  background: var(--navy);
  color: #ffffff;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
  background: var(--navy-mid);
  border-color: var(--navy-mid);
}

.btn--ghost {
  background: transparent;
  color: var(--navy);
}

.btn--ghost:hover {
  background: var(--navy);
  color: #ffffff;
}

/* Buttons that sit inside light panels flip back to navy */
.product-card .btn--ghost {
  color: var(--navy);
  border-color: var(--navy);
}

.product-card .btn--ghost:hover {
  background: var(--navy);
  color: #ffffff;
}

.cart-summary .btn {
  background: var(--navy);
  border-color: var(--navy);
  color: #ffffff;
}

.cart-summary .btn:hover {
  background: var(--navy-mid);
  border-color: var(--navy-mid);
}

.on-navy .btn {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}

.on-navy .btn:hover {
  background: var(--muted-on-navy);
  border-color: var(--muted-on-navy);
}

.on-navy .btn--ghost {
  background: transparent;
  color: #fff;
}

.on-navy .btn--ghost:hover {
  background: #fff;
  color: var(--navy);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn--full {
  width: 100%;
}

/* ==========================================================================
   Hero carousel
   ========================================================================== */

.carousel {
  position: relative;
  background: var(--navy);
}

.carousel-track {
  position: relative;
  min-height: clamp(26rem, 60vw, 38rem);
  overflow: hidden;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.carousel-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* Slide 1 — full photo with overlay copy */

.slide-photo {
  background-size: cover;
  background-position: center 25%;
  display: flex;
  align-items: center;
}

.slide-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(13 26 48 / 0.82) 0%, rgb(13 26 48 / 0.55) 45%, rgb(13 26 48 / 0.1) 100%);
}

.slide-photo .slide-copy {
  position: relative;
  color: #fff;
  max-width: 34rem;
}

.slide-copy h1,
.slide-copy h2,
.slide-copy p.slide-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 0.75rem;
}

.slide-copy .slide-sub {
  color: var(--muted-on-navy);
  font-size: 1.05rem;
  margin-bottom: 1.75rem;
}

.slide-copy .eyebrow {
  color: var(--muted-on-navy);
}

/* Slide 2 — three-way collection split */

.slide-split {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.slide-split a {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.slide-split img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.slide-split .split-label {
  position: absolute;
  inset: auto 0 0;
  padding: 5rem 1.5rem 1.75rem;
  background: linear-gradient(transparent, rgb(13 26 48 / 0.92));
  color: #fff;
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 700;
  text-align: center;
  z-index: 1;
}

.slide-split .split-label span {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted-on-navy);
  margin-top: 0.4rem;
}

.slide-split a:hover img {
  opacity: 0.8;
}

@media (max-width: 700px) {
  .slide-split {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
  }
  .slide-split .split-label {
    padding: 2.5rem 1rem 1rem;
    font-size: 1.05rem;
  }
}

/* Slide 3 — coming soon teaser */

.slide-navy {
  background: linear-gradient(135deg, var(--navy-mid), var(--navy-dark));
  display: flex;
  align-items: center;
  text-align: center;
}

.slide-navy .slide-copy {
  position: relative;
  color: #fff;
  max-width: 40rem;
  margin-inline: auto;
}

/* Carousel controls */

.carousel-controls {
  /* Not positioned itself — the dots bar and arrows anchor to .carousel */
  position: static;
}

.carousel-dots {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

.carousel-btn {
  background: rgb(13 26 48 / 0.55);
  border: 1px solid rgb(255 255 255 / 0.7);
  color: #fff;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.carousel-btn:hover {
  background: var(--navy);
}

/* Arrows sit mid-height at the edges, hidden until the carousel is
   hovered or focused (always visible on touch screens, which can't hover) */
.carousel-btn[data-carousel-prev],
.carousel-btn[data-carousel-next] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.carousel-btn[data-carousel-prev] {
  left: 1.25rem;
}

.carousel-btn[data-carousel-next] {
  right: 1.25rem;
}

.carousel:hover .carousel-btn,
.carousel:focus-within .carousel-btn,
.carousel.show-controls .carousel-btn {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: none) {
  .carousel-btn[data-carousel-prev],
  .carousel-btn[data-carousel-next] {
    opacity: 1;
    pointer-events: auto;
  }
}

.carousel-dots {
  display: flex;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.carousel-dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 999px;
  border: 1px solid #fff;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.carousel-dot[aria-current="true"] {
  background: #fff;
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section {
  padding: clamp(3rem, 8vw, 5.5rem) 0;
}

.section--panel {
  background: var(--panel);
}

.section--navy {
  background: var(--navy);
  color: #fff;
}

.section--navy h2,
.section--navy h3 {
  color: #fff;
}

.section--navy p {
  color: var(--muted-on-navy);
}

.section-head {
  max-width: 62ch;
  margin-bottom: 2.5rem;
}

.section--navy .section-head .eyebrow {
  color: var(--muted-on-navy);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  max-width: none;
}

.view-all {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.page-hero {
  background: var(--navy);
  color: #fff;
  padding: clamp(3rem, 8vw, 5rem) 0;
}

.page-hero h1 {
  color: #fff;
}

.page-hero p {
  color: var(--muted-on-navy);
  max-width: 60ch;
  margin-bottom: 0;
}

.page-hero .eyebrow {
  color: var(--muted-on-navy);
  margin-bottom: 0.75rem;
}

/* --- Value strip (Rep Once / Rep Twice / Rep Forever) */

.value-strip {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 2.25rem 0;
}

.value-strip ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.value-strip h2 {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: 0 0 0.3rem;
}

.value-strip p {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}

.value-strip svg {
  width: 1.75rem;
  height: 1.75rem;
  margin: 0 auto 0.75rem;
  color: var(--navy);
}

@media (max-width: 700px) {
  .value-strip ul {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* ==========================================================================
   Product grids and cards
   ========================================================================== */

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1060px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 860px) {
  .product-grid,
  .product-grid--three {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .product-grid,
  .product-grid--three {
    grid-template-columns: 1fr;
  }
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.product-card:hover {
  box-shadow: 0 14px 28px rgb(13 26 48 / 0.12);
  transform: translateY(-2px);
}

.product-card__media {
  display: block;
  background: #eceae4;
}

.product-card__media img {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.1rem 1.2rem 1.3rem;
  flex: 1;
  text-align: center;
}

.product-card__body h3 {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
}

.product-card__body h3 a {
  text-decoration: none;
  color: var(--navy);
}

.product-card__body h3 a:hover {
  text-decoration: underline;
}

.product-card__price {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.product-card__meta {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}

/* The read-only colour dots that used to sit under each card have been
   removed. Colour is carried by the card title on the collections grid and
   by the full switcher on the product page. */

.product-card .btn {
  margin-top: auto;
}

/* ==========================================================================
   Product detail page (PDP)
   ========================================================================== */

.breadcrumb {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.5rem 0 0;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--line);
}

.breadcrumb a {
  color: var(--muted);
}

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: 2rem 0 4rem;
  align-items: start;
}

@media (max-width: 860px) {
  .pdp {
    grid-template-columns: 1fr;
  }
}

/* --- PDP image gallery: main image + thumbnails, swipe + arrows */

.pdp-media:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.pdp-media__main {
  position: relative;
  background: #eceae4;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.pdp-media__main img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.pdp-media__counter {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  margin: 0;
  background: rgb(13 26 48 / 0.65);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.gallery-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgb(13 26 48 / 0.55);
  border: 1px solid rgb(255 255 255 / 0.7);
  color: #fff;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.gallery-btn:hover {
  background: var(--navy);
}

.gallery-btn--prev { left: 0.75rem; }
.gallery-btn--next { right: 0.75rem; }

.pdp-thumbs {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.pdp-thumb {
  flex: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  background: #eceae4;
  cursor: pointer;
}

.pdp-thumb img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.pdp-thumb.is-active {
  border-color: var(--navy);
}

.pdp-thumb:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.pdp-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 0.25rem;
}

.pdp-brandline {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

.pdp-price {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 1.5rem;
}

.pdp-desc {
  color: var(--muted);
  margin-bottom: 1.75rem;
}

.pdp-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 0.6rem;
}

.pdp-label .selected-name {
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: none;
  font-size: 0.9rem;
  margin-left: 0.4rem;
  color: var(--text);
}

/* RL-style colour swatch tiles: image thumbnails with selected outline */

.pdp-swatches {
  border: 0;
  padding: 0;
  margin: 0 0 1.75rem;
}

.pdp-swatches legend {
  padding: 0;
}

.pdp-swatches .swatch-row {
  display: flex;
  gap: 0.75rem;
}

.swatch-tile {
  position: relative;
  display: inline-flex;
}

.swatch-tile input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.swatch-tile .tile-face {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--muted);
  overflow: hidden;
  display: inline-block;
  background-size: cover;
  background-position: center 20%;
}

.swatch-tile input:checked + .tile-face {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-color: var(--navy);
}

.swatch-tile input:focus-visible + .tile-face {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

/* Modern size pills */

.pdp-sizes {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}

.pdp-sizes legend {
  padding: 0;
}

.size-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.size-pill {
  position: relative;
  display: inline-flex;
}

.size-pill input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.size-pill .pill-face {
  min-width: 3.4rem;
  padding: 0.65rem 0.9rem;
  text-align: center;
  border: 1px solid var(--muted);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 600;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.size-pill:hover .pill-face {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}

.size-pill input:checked + .pill-face {
  background: var(--navy);
  border-color: var(--navy);
  color: #ffffff;
}

.size-pill input:focus-visible + .pill-face {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Size chart disclosure */

.size-chart-toggle {
  background: none;
  border: 0;
  padding: 0.25rem 0;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
  margin-bottom: 1.5rem;
}

.size-chart {
  overflow-x: auto;
  margin: 0 0 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.size-chart[hidden] {
  display: none;
}

.size-chart table {
  border-collapse: collapse;
  width: 100%;
  min-width: 620px;
  font-size: 0.85rem;
  color: var(--text);
}

.size-chart caption {
  text-align: left;
  font-weight: 700;
  color: var(--navy);
  padding: 0.85rem 1rem 0.25rem;
}

.size-chart th,
.size-chart td {
  padding: 0.6rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.size-chart th {
  color: var(--navy);
  font-weight: 700;
  white-space: nowrap;
}

.size-chart tr:last-child td {
  border-bottom: 0;
}

.pdp-actions .btn {
  margin-bottom: 0.9rem;
}

.pdp-note {
  color: var(--muted);
  font-size: 0.85rem;
}

.pdp-error {
  color: #8f1030;
  font-weight: 600;
  margin: 0.5rem 0 0;
}

/* ==========================================================================
   Collection tiles
   ========================================================================== */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 860px) {
  .tile-grid {
    grid-template-columns: 1fr;
  }
}

.tile {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  background: var(--navy);
}

.tile img {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
  object-position: center 25%;
  opacity: 0.95;
  transition: opacity 0.2s ease, transform 0.25s ease;
}

.tile:hover img {
  opacity: 0.7;
  transform: scale(1.03);
}

.tile__label {
  position: absolute;
  inset: auto 0 0;
  padding: 3rem 1.25rem 1.1rem;
  background: linear-gradient(transparent, rgb(13 26 48 / 0.92));
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
}

.tile__label span {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--muted-on-navy);
}

/* ==========================================================================
   Story / split blocks
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
  }
}

.split img {
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.section--navy .split img {
  border-color: var(--line-on-navy);
}

.story-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  line-height: 1.4;
  color: #fff;
  border-left: 3px solid #fff;
  padding-left: 1.5rem;
  margin: 0;
}

/* Craft section: image bleeds to the left edge, filling 40% of the width */

.craft {
  display: grid;
  grid-template-columns: 40% 1fr;
  background: var(--panel);
}

.craft-media {
  position: relative;
  min-height: 100%;
}

.craft-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.craft-body {
  display: flex;
  align-items: center;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 6vw, 6rem);
}

.craft-body > div {
  max-width: 36rem;
}

@media (max-width: 860px) {
  .craft {
    grid-template-columns: 1fr;
  }

  .craft-media {
    min-height: 0;
  }

  .craft-media img {
    position: static;
    aspect-ratio: 4 / 3;
    height: auto;
  }
}

/* Customer review card (home craft section) */

.review-card {
  margin: 2rem 0 0;
  padding: 1.5rem 1.75rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius);
}

.review-card .stars {
  display: flex;
  gap: 0.25rem;
  margin: 0 0 0.75rem;
  color: var(--navy);
}

.review-card .stars svg {
  width: 1.2rem;
  height: 1.2rem;
}

.review-card blockquote {
  margin: 0;
}

.review-card blockquote p {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--navy);
  margin: 0 0 0.75rem;
}

.review-card figcaption {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

.checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.checklist li {
  padding-left: 1.75rem;
  position: relative;
  margin-bottom: 0.6rem;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.contact-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: var(--panel);
  color: var(--text);
}

.contact-card h2 {
  font-size: 1.2rem;
  color: var(--navy);
}

.contact-card a {
  color: var(--navy);
}

.placeholder-note {
  display: inline-block;
  background: var(--cream);
  border: 1px dashed var(--muted);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   Cart page
   ========================================================================== */

.cart-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cart-item {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}

.cart-item__media img,
.cart-item__media .media-placeholder {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* The cart thumbnail is too small for the strapline */
.cart-item__media .media-placeholder__note {
  display: none;
}

.cart-item__media .media-placeholder__mark {
  font-size: 1.4rem;
}

.cart-item__title {
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
}

.cart-item__meta {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 0.5rem;
}

.cart-item__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}

.qty-control button {
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  background: var(--panel);
  border: 0;
  color: var(--navy);
  width: 2.2rem;
  height: 2.2rem;
  cursor: pointer;
}

.qty-control button:hover {
  background: var(--cream);
}

.qty-control input {
  width: 2.8rem;
  text-align: center;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font: inherit;
  height: 2.2rem;
  -moz-appearance: textfield;
}

.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.link-button {
  font: inherit;
  font-size: 0.9rem;
  background: none;
  border: none;
  color: var(--navy);
  text-decoration: underline;
  cursor: pointer;
  padding: 0.25rem;
}

.cart-item__price {
  font-weight: 700;
  font-size: 1.05rem;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .cart-item {
    grid-template-columns: 4.5rem 1fr;
  }
  .cart-item__price {
    grid-column: 2;
    text-align: left;
  }
}

.cart-summary {
  margin-top: 2rem;
  margin-left: auto;
  max-width: 24rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: var(--panel);
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1rem;
}

.cart-summary .small {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.75rem 0 0;
}

.cart-empty {
  text-align: center;
  padding: 3rem 0;
}

.checkout-error {
  color: #8f1030;
  font-weight: 600;
  margin-top: 0.75rem;
}

/* ==========================================================================
   Status pages (success / cancelled)
   ========================================================================== */

.status-panel {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
  padding: clamp(3rem, 10vw, 6rem) 0;
}

.status-panel .status-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.5rem;
  color: var(--navy);
}

.status-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--navy-dark);
  color: var(--muted-on-navy);
  padding: 3.5rem 0 0;
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.site-footer h2 {
  color: #fff;
  font-size: 0.9rem;
  font-family: var(--font-sans);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  margin-bottom: 0.5rem;
}

.site-footer a {
  color: var(--muted-on-navy);
}

.site-footer a:hover {
  color: #fff;
}

.footer-bottom {
  border-top: 1px solid rgb(255 255 255 / 0.15);
  padding: 1.25rem 0;
  font-size: 0.85rem;
  text-align: center;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-actions--center {
  justify-content: center;
}

/* ==========================================================================
   Draft 3 additions
   ========================================================================== */

/* --- Scroll reveal (homepage, Our Story, Coming Soon). Reduced-motion
       users see everything immediately — the effect only exists inside
       the no-preference media query. */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .reveal.is-revealed {
    opacity: 1;
    transform: none;
  }
}

/* --- Lifestyle strip (home) */

.lifestyle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lifestyle-grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

@media (max-width: 700px) {
  .lifestyle-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Detail rows (home): alternating image/text two-column rows */

.detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}

.detail-row + .detail-row {
  border-top: 1px solid var(--line);
}

.detail-row__media img {
  max-width: 440px;
  width: 100%;
  margin-inline: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.detail-row--flip .detail-row__media {
  order: 2;
}

@media (max-width: 860px) {
  .detail-row,
  .detail-row--flip {
    grid-template-columns: 1fr;
  }
  .detail-row--flip .detail-row__media {
    order: 0;
  }
}

.text-link {
  font-weight: 600;
  color: var(--navy);
}

/* --- Brand tile (home) */

.brand-tile {
  background: var(--navy);
  color: #fff;
  text-align: center;
  padding: clamp(3rem, 8vw, 5.5rem) 0;
}

.brand-tile img {
  max-width: 420px;
  width: 100%;
  margin: 0 auto 1.5rem;
  border-radius: var(--radius);
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.35);
}

.brand-tile h2 {
  color: #fff;
}

.brand-tile p {
  color: var(--muted-on-navy);
  max-width: 52ch;
  margin-inline: auto;
}

.brand-tile .eyebrow {
  color: var(--muted-on-navy);
}

/* --- Trust strip (PDP + cart) */

.trust-strip {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin: 0.75rem 0 0;
}

/* --- PDP depth (fabric / fit / care) and pairs-well-with */

.pdp-depth {
  border-top: 1px solid var(--line);
  margin-top: 2rem;
  padding-top: 1.5rem;
}

.pdp-depth .pdp-label {
  margin-top: 1.25rem;
}

.pdp-depth p {
  color: var(--muted);
}

.pdp-care {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--muted);
}

.pdp-care li {
  padding-left: 1.4rem;
  position: relative;
  margin-bottom: 0.35rem;
}

.pdp-care li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.28rem;
  border-left: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: rotate(-45deg);
}

/* --- Footer additions: payment icons, policies, social */

.payment-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

.payment-icons li {
  background: #fff;
  color: var(--navy);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 3px;
  padding: 0.3rem 0.55rem;
  line-height: 1;
}

.social-links {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: 999px;
  color: var(--muted-on-navy);
}

.social-links a:hover {
  color: #fff;
  border-color: #fff;
}

.social-links svg {
  width: 1.1rem;
  height: 1.1rem;
}

.footer-policies {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  justify-content: center;
  font-size: 0.85rem;
}

/* --- Static content pages (policies) */

.prose {
  max-width: 46rem;
  padding: clamp(2rem, 6vw, 4rem) 0 4rem;
}

.prose h2 {
  font-size: 1.25rem;
  margin-top: 2rem;
}

.prose p,
.prose li {
  color: var(--muted);
}

/* ==========================================================================
   Unavailable / Coming Soon product state
   Driven by the "availability" flag in /data/products.json.
   ========================================================================== */

.product-card__media-wrap {
  position: relative;
  display: block;
}

/* Soft grey wash marks the card as unavailable at a glance. Deliberately
   no grayscale filter — the collections page shows one card per colour,
   and desaturating would make Navy and Grey read identically. */
/* Kept light on purpose. At 55% the cream wash desaturated navy far enough
   that the navy and grey quarter zips read as the same garment side by side
   on the collections grid — which is the one thing this state must not do.
   The solid badge below carries the message; the wash only softens. */
.card-overlay {
  position: absolute;
  inset: 0;
  background: rgb(233 232 229 / 0.22);
  pointer-events: none;
}

.product-card--unavailable .product-card__media img {
  opacity: 0.94;
}

/* Solid chip, so contrast is guaranteed over any underlying photo
   (white on navy ≈ 14.6:1). */
.coming-soon-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--navy);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}

.btn--unavailable,
.btn--unavailable:hover {
  background: #e9e8e5;
  border-color: #cfccc5;
  color: var(--muted);
  cursor: default;
  opacity: 1; /* override the generic .btn:disabled fade — keep it legible */
}

.card-view-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
}

/* --- Product page unavailable block */

.pdp-unavailable-note {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0.75rem 0 0.5rem;
}

/* Sizes stay visible but are not selectable */
.pdp-sizes[disabled] .pill-face {
  border-color: #cfccc5;
  background: #f2f1ee;
  color: var(--muted);
  cursor: default;
}

.pdp-sizes[disabled] .size-pill:hover .pill-face {
  border-color: #cfccc5;
  box-shadow: none;
}

/* --- Cart warnings for items that can no longer be bought */

.cart-item__unavailable,
.cart-blocked-note {
  color: #8f1030;
  font-weight: 600;
  font-size: 0.88rem;
  margin: 0 0 0.5rem;
}

.cart-blocked-note {
  margin: 0.75rem 0 0;
}

/* --- Coming Soon page product grid */

.soon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 700px) {
  .soon-grid {
    grid-template-columns: 1fr;
  }
}

.soon-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.soon-card__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.soon-card__body {
  padding: 1.1rem 1.25rem 1.4rem;
}

.soon-card__body h3 {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

.soon-card__body h3 a {
  text-decoration: none;
}

.soon-card__body h3 a:hover {
  text-decoration: underline;
}

.soon-card__colours {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.soon-card__colours li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.soon-swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--muted);
}

.soon-card__meta {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0 0 0.75rem;
}

.soon-card__status {
  display: inline-block;
  background: var(--navy);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  margin: 0;
}

/* ==========================================================================
   Media placeholder
   Stands in for photography that does not exist yet. Holds the same 4:5
   shape as a real shot so nothing reflows when the real image arrives —
   add the path to products.json and the placeholder disappears on its own.
   ========================================================================== */

/* Default: a soft cream/grey block that holds the 4:5 shape of a real
   shot. Navy text on cream is ~12:1, comfortably past AA. */
.media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  aspect-ratio: 4 / 5;
  width: 100%;
  background: linear-gradient(160deg, #f3f1ec 0%, #e9e7e1 55%, #e2e0d9 100%);
  border: 1px solid var(--line);
  color: var(--navy);
  text-align: center;
  padding: 1rem;
}

/* Navy variant, kept for the Coming Soon autumn campaign panel. */
.media-placeholder--navy {
  background:
    radial-gradient(120% 90% at 50% 0%, var(--navy-mid) 0%, var(--navy) 55%, var(--navy-dark) 100%);
  border: 0;
  color: #ffffff;
}

.media-placeholder__mark {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  line-height: 1;
  letter-spacing: 0.02em;
}

.media-placeholder__mark sup {
  font-size: 0.55em;
  vertical-align: super;
  margin-left: 0.04em;
}

.media-placeholder__note {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  /* 6.1:1 on the cream placeholder */
  color: var(--muted);
}

/* 9.5:1 on navy */
.media-placeholder--navy .media-placeholder__note {
  color: var(--muted-on-navy);
}

/* Smaller type in the tighter slots (thumbnails, coming-soon cards) */
.pdp-thumb .media-placeholder__note,
.swatch-tile .media-placeholder__note {
  display: none;
}

/* A colourway with no photograph yet still shows its real colour */
.tile-face--flat {
  border: 1px solid var(--line);
}

/* ==========================================================================
   Single-image product page
   With one shot per colourway the gallery chrome would be dead weight, so
   main.js hides it and this removes the space it used to occupy.
   ========================================================================== */

.pdp-media--single .pdp-thumbs {
  display: none;
}

/* ==========================================================================
   Live stock states (driven by GET /api/stock)
   ========================================================================== */

.size-pill--sold-out .pill-face {
  color: var(--muted);
  border-color: var(--line);
  background:
    linear-gradient(
      to bottom right,
      transparent calc(50% - 0.5px),
      var(--line) calc(50% - 0.5px),
      var(--line) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    );
  cursor: not-allowed;
}

.size-pill--sold-out .pill-face:hover {
  border-color: var(--line);
}

.pdp-low-stock,
.pdp-sold-out {
  font-size: 0.85rem;
  margin: 0.5rem 0 0;
  min-height: 0;
}

.pdp-low-stock:not(:empty) {
  color: #8a4b1f; /* 5.4:1 on white — warning without a red alarm */
  font-weight: 600;
}

.pdp-sold-out:not(:empty) {
  color: var(--muted);
  max-width: 34ch;
}

/* ==========================================================================
   Occasion grid + spec grid
   The typographic replacements for the homepage lifestyle photography.
   Both are deliberately image-free: they carry the page on rhythm and
   white space rather than on pictures that do not exist yet.
   ========================================================================== */

.occasion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.occasion-grid > li {
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
}

.occasion-index {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.occasion-grid h3 {
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
}

.occasion-grid p {
  color: var(--muted);
  margin: 0;
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 2.5rem;
  margin: 0;
}

.spec-grid > div {
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
}

.spec-grid dt {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.spec-grid dd {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 860px) {
  .occasion-grid,
  .spec-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .occasion-grid,
  .spec-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* ==========================================================================
   Our Story — measured reading column
   Long-form prose needs a line length you can actually read; the full
   1220px container is far too wide for body copy.
   ========================================================================== */

.story-column {
  max-width: 62ch;
}

.story-column p {
  font-size: 1.06rem;
  line-height: 1.75;
}

.story-column h2 {
  margin-bottom: 0.75rem;
}

/* Centred variant: drops the left rule, which reads as a hanging edge
   when the quote is the only thing in the band. */
.story-quote--wide {
  max-width: 34ch;
  margin-inline: auto;
  text-align: center;
  border-left: 0;
  padding-left: 0;
}

/* `hidden` must win over the display value a component sets for itself —
   otherwise hiding the gallery arrows on a single-image product has no
   visible effect. */
[hidden] {
  display: none !important;
}