:root {
  --ink: #2a2a2a;
  --ink-soft: #5e5a57;
  --muted: #8a8580;
  --paper: #faf8f5;
  --card: #ffffff;
  --line: #e7e2dc;
  --pink: #f4a7c6;
  --purple: #be9bd9;
  --blue: #6ec3ee;
  --gold: #e4bd68;
  --tint-crown: #e5f3fb;
  /* Every colour swatch's size: see .swatches */
  --swatch-size: min(32px, (100vw - 82px) / 11);
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgb(42 42 42 / .06), 0 8px 24px rgb(42 42 42 / .07);
  --display: "Chakra Petch", ui-sans-serif, system-ui, sans-serif;
  --body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  font: 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px 72px; outline: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: .01em; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
/* The page area takes focus when the page changes (for screen readers); it isn't something to click, so no ring */
main:focus-visible { outline: none; }

/* ---------- Banner + header ---------- */
.preview-banner {
  background: var(--ink); color: #fff; text-align: center;
  font-size: 13px; padding: 7px 16px;
}
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 24px;
  background: rgb(250 248 245 / .88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-logo { height: 68px; width: auto; }
/* Header logo: the tall tile logo (DANG down the left on dark tiles, MADE down the right), .brand-logo.
   .brand-tiles: the one-row logo it replaced (assets/logo-header-row.svg, -stack on phones) */
.brand-tiles { height: clamp(18px, 2.8vw, 28px); width: auto; }
.site-nav { display: flex; align-items: center; gap: 8px; }
.nav-link {
  font-family: var(--display); font-weight: 600; text-decoration: none;
  padding: 8px 12px; border-radius: 10px;
}
.nav-link:hover { background: #efeae4; }

/* Shop dropdown in the header */
.nav-menu { position: relative; }
.menu-button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; font-size: 16px; }
.menu-button svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.menu-button[aria-expanded="true"] { background: #efeae4; }
.menu-button[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: max-content; max-width: calc(100vw - 32px); padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  animation: drop .15s ease;
}
/* An invisible bridge over the gap, so moving the mouse down to the menu doesn't close it. It spans just the width of the
   Shop button (--bridge-right, set by app.js), so it doesn't cover the bottom of the Cart button */
.menu::before { content: ""; position: absolute; left: 0; right: var(--bridge-right, 0); top: -10px; height: 10px; }
@keyframes drop { from { opacity: 0; transform: translateY(-4px); } }
.menu a { display: grid; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
.menu a:hover, .menu a:focus-visible { background: #f3efea; }
.menu a[aria-current="page"] strong { text-decoration: underline; text-underline-offset: 3px; }
.menu strong { font-family: var(--display); font-weight: 600; }
.menu .menu-all { border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; padding-top: 12px; font-size: 14px; color: var(--ink-soft); }
.cart-button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 10px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); cursor: pointer;
  font-family: var(--display); font-weight: 600;
}
.cart-button:hover { border-color: var(--ink); }
.cart-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.cart-count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 7px;
  display: inline-grid; place-items: center;
  background: var(--ink); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums;
}
.cart-count.bump { animation: bump .35s ease; }
@keyframes bump { 40% { transform: scale(1.3); } }

/* ---------- Home ---------- */
.hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 56px 0 40px;
}
.hero h1 { font-size: clamp(36px, 6vw, 60px); font-weight: 700; }
.hero p { max-width: 34em; margin: 16px 0 26px; color: var(--ink-soft); font-size: 18px; }


.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid > .card[hidden] { display: none; }
/* Extra tiles that make full rows (app.js fullRows): one only for 2 across (a phone), one only for 3 across */
@media (min-width: 561px) { .grid > .phone-only { display: none; } }
@media (max-width: 560px) { .grid > .wide-only { display: none; } }
.grid-empty { text-align: center; color: var(--muted); margin: 8px 0 24px; }
/* A short row (the figurines) sits in the middle instead of filling from the left */
.grid.centered { display: flex; flex-wrap: wrap; justify-content: center; }
.grid.centered > * { flex: 0 1 calc((100% - 48px) / 3); }   /* as wide as a tile in the 3-column grid (2 on phones) */
.card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.card-media {
  position: relative; aspect-ratio: 1; margin: 10px 10px 0; border-radius: calc(var(--radius) - 6px);
  background: var(--tint, #f1ede8); display: grid; place-items: center; overflow: hidden;
}
/* A tile's picture swipes left and right to change colour on a phone (app.js swipeTarget): the page scrolls only up and down from it */
.card .card-media { touch-action: pan-y pinch-zoom; }
.card-media img { width: 92%; height: 92%; object-fit: contain; transition: opacity .25s ease, transform .3s ease; }
.card:hover .card-media img { transform: scale(1.04); }
.card-link { flex: 1; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
/* The sizes line (.card-meta) sits at the bottom of the words, so tiles side by side line up when one's name takes
   more lines (on a phone every name has room for two: see Small screens) */
.card-body { flex: 1; padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 8px; }
/* Colour dots on a tile: the chosen one ringed */
/* Always one row, every tile's dots the same size: the size that fits the tile with the most colours (--card-dots, set in app.js), a third of a dot between them */
.card-colours { display: flex; padding: 2px 16px 16px; container-type: inline-size; }
/* .card-dot-space: the empty row under a figurine tile, as tall as the dots, so every product tile is the same size */
.card-swatch, .card-dot-space { --dot: min(24px, 100cqw / (var(--card-dots, 9) + (var(--card-dots, 9) - 1) / 3)); }
.card-dot-space { height: var(--dot); }
.card-swatch {
  width: var(--dot); height: var(--dot); flex: none; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgb(42 42 42 / .2); background: var(--swatch); transition: transform .15s ease;
}
.card-swatch + .card-swatch { margin-left: calc(var(--dot) / 3); }
.card-swatch:hover { transform: scale(1.12); }
.card-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--ink); }
.style-tag {
  align-self: flex-start; padding: 2px 9px; border-radius: 999px; background: #efeae4;
  font-size: 12px; font-weight: 500; color: var(--ink-soft);
}
.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card-top h3 { font-size: 20px; }
.card-top .price { font-weight: 600; white-space: nowrap; }
.card-top .price small { font-weight: 400; color: var(--muted); font-size: 13px; }
.card-meta { margin-top: auto; display: flex; white-space: nowrap; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }

/* Loading shimmer for 3D thumbnails */
.loading-shape {
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  border: 10px solid rgb(42 42 42 / .07); border-bottom-color: transparent;
  animation: pulse 1.4s ease-in-out infinite;
}
/* A picture that couldn't be drawn: a faint logo in its place */
img.thumb-fallback { width: 32% !important; height: auto !important; opacity: .3; }
@keyframes pulse { 50% { opacity: .45; } }

/* Tabs: a rounded track with the open tab raised, like the size buttons */
.tabs {
  display: flex; width: fit-content; max-width: 100%; margin: 0 auto 10px; padding: 5px; gap: 4px; overflow-x: auto;
  background: #efeae4; border-radius: 14px;
}
.tabs [role="tab"] {
  flex: none; padding: 10px 22px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink-soft);
}
.tabs [role="tab"]:hover { color: var(--ink); }
.tabs [role="tab"][aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgb(42 42 42 / .12); }
/* Tab row: tabs centred, Sort on the right (on small screens under the tabs, lined up with their right edge: the
   column is only as wide as the tabs, in the middle) */
.tab-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 10px; }
.tab-bar .tabs { grid-column: 2; margin: 0; }
.tab-tools { grid-column: 3; justify-self: end; }
.sort { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); }
/* The browser's own arrow sits cramped against the edge, so it's replaced with a centred chevron */
.sort select {
  font: inherit; color: var(--ink); border: 1.5px solid var(--line); border-radius: 10px;
  padding: 7px 34px 7px 12px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232a2a2a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px;
}
.sort select:hover { border-color: var(--ink-soft); }
@media (max-width: 860px) {
  .tab-bar { grid-template-columns: auto; justify-content: center; }
  .tab-bar .tabs, .tab-tools { grid-column: 1; }
  .tab-bar .tabs { justify-self: center; }
  .tab-tools { justify-self: end; }
}
.tab-note { text-align: center; color: var(--muted); font-size: 14px; margin: 0 0 22px; }
.tab-panel:not(:has(.tab-note)) { padding-top: 16px; }
/* ---------- Home: just the logo and the way in ---------- */
.splash {
  min-height: calc(100vh - 230px); display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 0;
}
.splash-sheep { display: flex; justify-content: center; gap: 0; }
.splash-sheep a {
  width: min(252px, 36vw); aspect-ratio: 1; display: grid; place-items: center;
  animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; transition: transform .2s ease;
}
.splash-sheep a:hover { transform: translateY(-6px) rotate(-3deg); }
.splash-sheep a img { width: 100%; height: 100%; object-fit: contain; }
/* The Dang Made tile logo above the sheep */
.splash-tiles { width: min(70px, 16vw); height: auto; margin-bottom: 24px; animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; }
.splash p { margin: 20px 0 24px; color: var(--ink-soft); font-size: 18px; }
.btn.big { min-height: 56px; padding: 0 44px; font-size: 19px; border-radius: 14px; }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.97); } }

/* ---------- Home sections below the hero ---------- */
.splash { min-height: 0; padding: 48px 0 24px; }
.splash h1 { margin: 18px 0 24px; font-size: clamp(25px, 3.96vw, 39.6px); max-width: 24em; }
.splash .btn.big { margin-top: 28px; }
/* A word of the title in letter tiles (app.js tileWord): a little taller than the text, on a line of its own */
.tile-word { display: block; height: 1.15em; width: auto; max-width: 100%; margin: .4em auto; color: var(--ink); }
.splash p { margin: 12px 0 24px; max-width: 34em; }
.home-section { margin-top: 64px; }
.home-section h2 { font-size: 26px; margin-bottom: 18px; }
.home-section .categories { margin-top: 0; }
.home-section .category-body h3 { font-size: 26px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.section-head a { font-family: var(--display); font-weight: 600; text-decoration: none; }
.section-head a:hover { text-decoration: underline; }
/* The three steps on the home page, between the title and the Shop ALL button */
.splash .splash-steps { width: min(100%, 560px); margin-top: 4px; text-align: left; }
.splash-steps a { color: inherit; }

/* ---------- Help page ---------- */
.help { max-width: 760px; margin: 0 auto; }
.help .panel h2 { font-size: 22px; margin-bottom: 8px; }
.help .panel p { color: var(--ink-soft); margin: 0 0 14px; }
.help .panel { scroll-margin-top: 120px; }
.help-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.help-table th, .help-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.help-table thead th { font-size: 13px; color: var(--muted); font-weight: 600; }
.size-guide tbody th { width: 34%; }
.size-guide tbody th small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.size-guide thead th { font-size: 14px; color: var(--ink); }

/* ---------- Shop all: one grid of every product ---------- */
.shop-all { margin-top: 32px; }

/* ---------- Shop: categories ---------- */
/* Hidden on screen but still read out by screen readers */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.categories { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px; }
/* Other products (bottom of Headbands and Merch) has a single tile: keep it tile-sized, not full width */
.more-categories .categories { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.category {
  display: flex; flex-direction: column; text-decoration: none; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.category:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.category .card-media { aspect-ratio: 4 / 3; }
.category .card-media img { width: 80%; height: 80%; }
.category-body { padding: 18px 20px 22px; }
.category-body h2 { font-size: 28px; }
.category-body p { margin: 6px 0 14px; color: var(--ink-soft); }
.category .go { font-family: var(--display); font-weight: 600; }
/* Home page, under Featured: one wide Custom Orders tile, the swatches icon beside the words */
.custom-banner { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; }
.custom-banner .card-media { margin: 10px; aspect-ratio: 16 / 9; background: #f1ede8; }
.custom-banner .card-media img { width: auto; height: 60%; }
.custom-banner .category-body { padding: 18px 28px 18px 18px; }
@media (max-width: 560px) {
  .custom-banner { grid-template-columns: minmax(0, 1fr); }
  .custom-banner .category-body { padding: 8px 20px 22px; }
}
/* Custom orders tile in Keep shopping: the tile logo on a plain background */

.card-sub { display: flex; align-items: center; gap: 8px; }
.card-sub i { width: 16px; height: 16px; border-radius: 50%; flex: none; background: var(--swatch); border: 1px solid rgb(42 42 42 / .2); }
.segmented .dot {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 8px; vertical-align: -1px;
  background: var(--swatch); border: 1px solid rgb(42 42 42 / .25);
}
.eyebrow { font-size: 14px; color: var(--ink-soft); margin-bottom: 6px; }
/* Product page: One Colour / Two Colours tabs above the title (links to the same animal in the other style) */
.tabs.style-tabs { margin: 0 0 12px; padding: 4px; border-radius: 12px; }
.style-tabs a {
  flex: none; padding: 7px 16px; border-radius: 9px; text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--ink-soft);
}
.style-tabs a:hover { color: var(--ink); }
.style-tabs a[aria-current] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgb(42 42 42 / .12); }
/* The three steps (design, colour, size), listed one under another, each with its number in a dark dot */
.about { margin-top: 56px; display: grid; grid-template-columns: 1fr; gap: 16px; }
.about div { padding: 20px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.about h3 { font-size: 17px; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.about .step { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; }
.about p { padding-left: 36px; }
.about p { margin: 0; color: var(--ink-soft); font-size: 15px; }

/* ---------- Product ---------- */
.crumbs { margin: 24px 0 18px; font-size: 14px; color: var(--muted); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
/* The pictures on the left, with the colours under them (.gallery .colours); on the right the heading (.info-head:
   Headband or the crown tabs, the name, the description) over the other options (.info). On one column (tablets
   and phones) the heading goes above the pictures. */
.product {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  grid-template-areas: "crumbs crumbs" "gallery head" "gallery info"; gap: 0 40px; align-items: start;
}
.product > .crumbs { grid-area: crumbs; }
.info-head { grid-area: head; }
.info { grid-area: info; }
/* Pictures: the chosen view big, the others small underneath to pick from */
.gallery { grid-area: gallery; position: sticky; top: 92px; display: grid; gap: 12px; }
.stage {
  position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0;
  border-radius: var(--radius); background: var(--tint, #f1ede8); overflow: hidden; transition: background-color .3s ease;
  touch-action: pan-y pinch-zoom;   /* swipes left and right to change colour on a phone (app.js swipeProduct) */
}
.stage img { width: 92%; height: 92%; object-fit: contain; }
.shot-status { margin: 0; color: var(--ink-soft); font-size: 14px; }
.shots { display: flex; justify-content: center; gap: 10px; }
.shot-thumb {
  flex: 0 1 110px; display: grid; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 13px; color: var(--ink-soft); text-align: center;
}
.shot-media {
  aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
  border-radius: var(--radius-sm); background: var(--tint, #f1ede8); border: 2px solid transparent;
  transition: background-color .3s ease, border-color .15s ease;
}
.shot-media img { width: 90%; height: 90%; object-fit: contain; }
.shot-thumb:hover .shot-media { border-color: var(--line); }
.shot-thumb[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.shot-thumb[aria-pressed="true"] .shot-media { border-color: var(--ink); }
/* The colours, under the small pictures. The picture shrinks on a short window (as narrow as 320px), so the swatches
   shrink with it, so the most colours any product has (--card-dots, set in app.js) always fit on one line */
.gallery .colours {
  display: grid; gap: 14px; margin-top: 8px; container-type: inline-size;
  --swatch-size: min(32px, 100cqw / (var(--card-dots, 9) + (var(--card-dots, 9) - 1) / 4));
}
.gallery .colours:empty { display: none; }
.gallery .colours .field { margin-bottom: 0; }
/* Turnable 3D preview (the admin 3D page) */
.viewer { position: relative; aspect-ratio: 1; touch-action: none; cursor: grab; }
.viewer:active { cursor: grabbing; }
.viewer canvas { display: block; width: 100%; height: 100%; }
.viewer-status { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-soft); font-size: 14px; }
.pill {
  padding: 6px 12px; border-radius: 999px; border: 1px solid rgb(42 42 42 / .12);
  background: rgb(255 255 255 / .75); backdrop-filter: blur(6px); cursor: pointer; font-size: 13px;
}
.pill:hover { background: #fff; border-color: var(--ink); }

.info-head h1 { font-size: clamp(30px, 4vw, 40px); }
.info-head .price-line { font-size: 22px; font-weight: 600; margin: 8px 0 14px; font-variant-numeric: tabular-nums; }
.info-head .blurb { color: var(--ink-soft); margin: 0 0 24px; }
.field { margin-bottom: 22px; }
.field-label { display: flex; gap: 8px; align-items: baseline; margin-bottom: 10px; font-weight: 600; font-size: 14px; }
.field-label span { font-weight: 400; color: var(--ink-soft); }

.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.segmented button {
  text-align: left; padding: 10px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: var(--card); cursor: pointer;
}
.segmented button strong { display: block; font-family: var(--display); font-size: 16px; }
.chart-link { margin-left: auto; font-weight: 500; font-size: 13px; color: var(--ink-soft); }
.chart-link:hover { color: var(--ink); }
.segmented button:hover { border-color: var(--ink-soft); }
.segmented button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* Every colour swatch on the website is the same size (product pages, the Custom orders builder, the engraving colour):
   32px, smaller on a phone, so a one colour headband's 9 colours, with a quarter of a swatch between them, always
   fit on one line, even in the narrowest place they go: the Custom orders builder on a phone (100vw less the
   page's and the panel's padding). On a product page they can be smaller, to fit under the pictures (.gallery .colours) */
.swatches { display: flex; flex-wrap: wrap; gap: calc(var(--swatch-size) / 4); }
.swatch {
  width: var(--swatch-size); height: var(--swatch-size); flex: none; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid rgb(42 42 42 / .2); background: var(--swatch);
  transition: transform .15s ease;
}
.swatch:hover { transform: scale(1.06); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
/* A colour that can't be changed (a two colours headband's inner ears): shown the same, but not something to press */
.swatch.fixed { display: block; cursor: default; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.swatch.fixed:hover { transform: none; }
/* The engraving colour: a radio button drawn as a swatch (the button, invisible, covers it) */
.swatch-pick { position: relative; display: block; }
.swatch-pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.swatch-pick .swatch { display: block; }
.swatch-pick:hover .swatch { transform: scale(1.06); }
.swatch-pick input:checked + .swatch { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.swatch-pick input:focus-visible + .swatch { outline: 3px solid var(--blue); outline-offset: 6px; }
/* Parts coloured one by one (the multi gem crown's gems): a compact row each */
.part-rows { display: grid; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.part-row { display: flex; align-items: center; gap: 14px; }
.part-name { width: 64px; flex: none; font-weight: 600; font-size: 14px; display: grid; }
.part-name small { font-weight: 400; color: var(--muted); font-size: 12px; }
.size-note { font-size: 13px; color: var(--muted); margin-top: 10px; }
.size-note button { border: 0; background: none; padding: 0; text-decoration: underline; cursor: pointer; color: var(--ink-soft); font-size: 13px; }

.buy-row { display: flex; gap: 12px; margin: 26px 0 28px; }
.stepper {
  display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--card);
}
.stepper button { width: 40px; height: 100%; min-height: 44px; border: 0; background: none; cursor: pointer; font-size: 18px; }
.stepper button:disabled { color: #c9c3bd; cursor: default; }
.stepper output { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.stepper.small button { width: 32px; min-height: 32px; font-size: 16px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: var(--radius-sm);
  font-family: var(--display); font-weight: 600; font-size: 16px; text-decoration: none;
  border: 1.5px solid var(--ink); cursor: pointer;
  background: var(--ink); color: #fff; transition: transform .1s ease, background .15s ease;
}
.btn:hover { background: #000; }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: var(--card); color: var(--ink); }
.btn.secondary:hover { background: #f1ede8; }
.btn.wide { width: 100%; }
.btn.grow { flex: 1; }

.details { border-top: 1px solid var(--line); }
.details > details { padding: 14px 0; border-bottom: 1px solid var(--line); }
/* Folded sections: the heading is the button, with a + that turns to − when open */
.details summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; }
.details summary::-webkit-details-marker { display: none; }
.details summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--ink-soft); }
.details details[open] summary::after { content: "−"; }
.details summary h3 { margin: 0; }
.details details[open] summary { margin-bottom: 10px; }
.details h3 { font-family: var(--body); font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.chart-wrap { overflow-x: auto; margin: 4px 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
/* The size guide (sizeGuideHtml), the same on the Help page and a product page: the chosen size's column
   highlighted on a product page, and the first line a little smaller in its fold */
.size-guide .current { background: #f3efea; }
.size-guide thead th.current { box-shadow: inset 0 3px 0 var(--ink); }
.size-guide-intro { color: var(--ink-soft); margin: 0 0 12px; }
.details .size-guide-intro { font-size: 14px; }
/* The note under the size guide's chart */
.chart-notes { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: 14px; }
.measure-guide { margin: 12px auto 4px; max-width: 320px; }
.measure-guide svg { display: block; width: 100%; height: auto; font-family: inherit; }
.fit-guide { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.fit-guide .fit-guide-title { font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.fit-steps { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: 14px; }
.fit-steps li + li { margin-top: 8px; }
.fit-steps li::marker { font-weight: 600; color: var(--ink); }
.details ul { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 15px; }
.details li + li { margin-top: 4px; }

/* ---------- Cart drawer ---------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgb(42 42 42 / .35); animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } }
.drawer {
  position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(420px, 100vw);
  display: flex; flex-direction: column; background: var(--paper);
  transform: translateX(105%); transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease;
}
/* The shadow only while open: closed, it showed as a faint grey strip along the right edge of the page */
.drawer.open { transform: none; box-shadow: -12px 0 40px rgb(42 42 42 / .15); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 22px; }
.icon-button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); cursor: pointer; }
.icon-button:hover { border-color: var(--ink); }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 20px; }
.drawer-foot { padding: 16px 20px 20px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.drawer-foot:empty { display: none; }
.empty { text-align: center; padding: 48px 8px; color: var(--ink-soft); }
.empty img { width: 72px; margin: 0 auto 16px; }
.empty .btn { margin-top: 16px; }

.line { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: center; }
.line:last-child { border-bottom: 0; }
.line-thumb { width: 76px; height: 76px; border-radius: 12px; background: var(--tint, #f1ede8); display: grid; place-items: center; overflow: hidden; }
.line-thumb img { width: 92%; height: 92%; object-fit: contain; }
.line-title { font-family: var(--display); font-weight: 600; text-decoration: none; }
.line-title:hover { text-decoration: underline; }
.line-sub { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin: 2px 0 8px; }
.line-sub i { width: 12px; height: 12px; border-radius: 50%; background: var(--swatch); border: 1px solid rgb(42 42 42 / .2); }
.line-controls { display: flex; align-items: center; gap: 12px; }
.link-button { border: 0; background: none; padding: 0; font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.link-button:hover { color: var(--ink); }
.line-price { font-weight: 600; align-self: start; font-variant-numeric: tabular-nums; }

.totals { display: grid; gap: 6px; font-size: 15px; }
.totals div { display: flex; justify-content: space-between; }
.totals .grand { font-size: 18px; font-weight: 600; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 4px; }
.totals .soft { color: var(--ink-soft); }
.fine { font-size: 12.5px; color: var(--muted); margin: 0; text-align: center; }

/* ---------- Checkout ---------- */
.page-title { margin: 32px 0 24px; font-size: 32px; }
.checkout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.panel + .panel { margin-top: 20px; }
.panel h2 { font-size: 20px; margin-bottom: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
label.input { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
label.input .opt { color: var(--muted); font-weight: 400; }
.input input, .input select, .input textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--paper);
}
.input textarea { resize: vertical; line-height: 1.5; }
.input input:focus, .input select:focus, .input textarea:focus { outline: none; border-color: var(--ink); background: #fff; }
/* A field that can't be changed (the checkout's country while it's only Canada) */
.input input[readonly], .input input[readonly]:focus { cursor: default; color: var(--ink-soft); border-color: var(--line); background: var(--paper); }
/* A dropdown's arrow: the browser's own sits cramped against the edge, so it's a centred chevron (as on Sort) */
.input select, .input select:focus {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232a2a2a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
.input [aria-invalid="true"] { border-color: #d64545; background: #fff7f7; }
.error { color: #c23a3a; font-size: 13px; font-weight: 400; }
.options { display: grid; gap: 10px; }
.option {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
}
.option:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.option input { accent-color: var(--ink); width: 18px; height: 18px; margin: 0; }
.option small { display: block; color: var(--muted); }
.option.off { cursor: not-allowed; color: var(--muted); opacity: .6; }
.order-error { margin: 10px 0 0; text-align: center; }
.add-more { display: inline-block; margin: 4px 0 14px; font-weight: 600; font-size: 14px; color: var(--ink); }
.help-table tr.off { color: var(--muted); }
.notice {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--tint-crown); color: #1d4a63; font-size: 14px;
}
.notice strong { display: block; }
/* The green tip under the Custom Colours form's Coming Soon note, a little closer to it than the form's gap */
.notice.tip { background: #e8f5ec; color: #1e5631; }
.notice + .notice.tip { margin-top: -10px; }
/* Checkout's pre-launch note (while prices are hidden), between the title and the form */
.notice.prelaunch { margin: -8px 0 24px; }
.summary { position: sticky; top: 92px; }
.summary .line { grid-template-columns: 60px 1fr auto; }
.summary .line-thumb { width: 60px; height: 60px; position: relative; overflow: visible; }
.summary .qty-badge {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--ink-soft); color: #fff; font-size: 12px; display: grid; place-items: center;
}
.summary .totals { margin-top: 12px; }
.summary .btn { margin-top: 18px; }

/* ---------- Contact ---------- */
.contact { max-width: 620px; margin: 0 auto; }
.contact .lead { color: var(--ink-soft); margin: -12px 0 24px; }
.contact .lead:has(+ .contact-custom) { margin-bottom: 8px; }
.contact-custom { margin: 0 0 24px; color: var(--ink-soft); }
.contact-custom a { color: var(--ink); font-weight: 600; }
.nav-custom[aria-current] { background: #efeae4; }
.contact-form { display: grid; gap: 18px; }
/* A custom order form's fields and buttons while custom orders are coming soon (CUSTOM_ORDERS_OPEN in app.js) */
.form-off { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 18px; opacity: .55; cursor: not-allowed; }
.form-off * { cursor: not-allowed !important; }
/* "Continue shopping" under the Help, Contact and Custom orders pages */
.keep-shopping { display: flex; justify-content: center; margin-top: 28px; }
.custom .panel h2 { margin-bottom: 4px; }
.custom .hint { color: var(--ink-soft); margin: 0; }
.ship-area { color: var(--ink-soft); margin: -4px 0 14px; }
.contact.custom { max-width: 940px; }
.custom > .lead { max-width: 660px; margin-left: auto; margin-right: auto; text-align: center; text-wrap: pretty; }
.custom > .page-title { text-align: center; }
/* The purple and red sheep above the title, 10% taller than the header logo */
.custom-sheep { display: flex; justify-content: center; gap: 0; margin-top: 32px; }
.custom-sheep img { height: 75px; width: auto; }
.custom > .custom-sheep + .page-title { margin-top: 12px; }
.custom .tab-panel { margin-top: 20px; }
/* Custom colours builder: a square picture (about a phone's width) beside the choices (on a phone, laid out like a
   product page instead: see below) */
.builder { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 28px; align-items: start; }
.builder-media { position: sticky; top: 92px; display: grid; gap: 10px; }
.builder-stage {
  aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; display: grid; place-items: center;
  background: var(--tint, #f1ede8); transition: background-color .3s ease;
}
.builder-stage img { width: 90%; height: 90%; object-fit: contain; transition: opacity .2s ease; }
.builder-stage.loading img { opacity: .45; }
.builder-views { display: flex; justify-content: center; gap: 8px; }
.view-pill {
  padding: 6px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card);
  cursor: pointer; font-weight: 600; font-size: 14px;
}
.view-pill:hover { border-color: var(--ink-soft); }
.view-pill[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.builder-options .field:last-child { margin-bottom: 0; }
.builder-options label.field { display: grid; gap: 0; }
.builder-options select { font-weight: 600; }
.builder-options .segmented small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
/* No product picked (special or bulk request): just the choice, no picture */
/* The product tiles (three across, two on a phone, a short last row on the left): picture, name, Customize.
   Their outline is a little thicker than a shop tile's. */
.product-picker { display: grid; gap: 12px; }
.product-picker[hidden], .builder[hidden] { display: none; }.product-picker .grid.centered { justify-content: flex-start; }
.pick-card {
  display: grid; gap: 4px; padding: 10px 10px 14px; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--card); border: 2px solid var(--line); border-radius: var(--radius);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pick-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.pick-card .card-media { margin: 0 0 8px; }
.pick-card strong { font-family: var(--display); font-size: 16px; padding: 0 6px; }
.pick-card span { color: var(--ink); font-size: 14px; font-weight: 600; padding: 0 6px; }
/* On the builder: the product's name and the way back to the tiles */
.builder-product { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.builder-product strong { font-family: var(--display); font-size: 20px; }
/* Under the builder: Add to List, then the list (a row per product: its colour dots, name, size and colours, how many, Remove) */
.request-items { display: grid; gap: 10px; justify-items: start; }
.request-items .field-label { margin-top: 6px; }
.item-list { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 8px; }
.item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.item-dots { display: flex; }
.item-dots i { width: 20px; height: 20px; border-radius: 50%; background: var(--swatch); border: 1px solid rgb(42 42 42 / .2); }
.item-dots i + i { margin-left: -6px; }
.item-text strong, .item-text small { display: block; }
.item-text small { color: var(--muted); font-size: 13px; }
.item-text .item-shop { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: #fff6dc; color: #6b4e00; }
.item-ok { padding: 10px 14px; border-radius: var(--radius-sm); background: #e6f4ea; color: #1e5631; font-size: 14px; }
.popup { width: min(440px, calc(100vw - 32px)); padding: 24px; border: 0; border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: 0 20px 60px rgb(0 0 0 / .25); }
.popup::backdrop { background: rgb(0 0 0 / .45); }
.popup h2 { font-size: 20px; margin: 0 0 8px; }
.popup p { margin: 0 0 10px; color: var(--ink-soft); font-size: 15px; }
.popup ul { margin: 0 0 12px; padding-left: 18px; font-size: 15px; }
.popup a { color: var(--ink); font-weight: 600; }
.popup .btn { width: 100%; margin-top: 6px; }
.item-qty input { width: 76px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.item-empty { padding: 14px; border: 1.5px dashed var(--line); border-radius: var(--radius-sm); color: var(--muted); font-size: 14px; }
/* Engraving: its fields show once Custom or Colour Engraving is picked, the colour only for Colour Engraving */
.engraving { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.engraving[hidden] { display: none; }
.engraving legend { padding: 0; margin-bottom: 10px; }
form[data-engraving="none"] .engraving-fields { display: none; }
form:not([data-engraving="colour"]) .engraving-colour { display: none; }
/* Where it goes: a side, then inside or outside the band, each pair side by side */
.engraving-where { display: grid; gap: 10px; }
.engraving-where .field-label { margin-bottom: 0; }
.options.pair { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) {
  .options.pair .option { padding: 12px; gap: 10px; }
}
@media (max-width: 560px) {
  .item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .item .link-button { grid-column: 2 / -1; justify-self: start; }
}
.option span { display: block; }
@media (max-width: 760px) {
  /* One column, laid out like a product page: the name, the picture, Front and Back, the colours, then the other
     options. The picture's and the choices' boxes step aside (display: contents), so their parts can go in that order. */
  .builder { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .builder-media, .builder-options { display: contents; }
  .builder-options > * { order: 3; }
  .builder-options > .builder-product { order: 0; margin-bottom: 20px; }
  .builder-stage, .builder-views { order: 1; }
  .builder-stage { width: 100%; max-width: 420px; margin: 0 auto 10px; }
  .builder-views { margin-bottom: 18px; }
  .builder-options > .builder-colour { order: 2; margin-bottom: 14px; }
  .builder-options > :nth-last-child(1 of .builder-colour) { margin-bottom: 20px; }
  /* Every colour on one line, as on a product page: a crown's 10 swatches shrink to fit (--colours, set in app.js) */
  .builder-colour { container-type: inline-size; }
  .builder-colour .swatches { --swatch-size: min(32px, 100cqw / (var(--colours, 9) + (var(--colours, 9) - 1) / 4)); }
}
.custom-link { margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); }
.custom-link a { color: var(--ink); font-weight: 600; }

/* ---------- Confirmation ---------- */
.confirm { max-width: 620px; margin: 56px auto 0; text-align: center; }
.confirm .check {
  width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 20px;
  background: #22c55e; color: #fff; display: grid; place-items: center; font-size: 30px;
}
.confirm h1 { font-size: 34px; }
.confirm .order-no { font-family: var(--display); font-size: 18px; margin: 10px 0 6px; }
.confirm p { color: var(--ink-soft); }
.confirm .panel { text-align: left; margin: 28px 0; }
.confirm .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* ---------- Toast + footer ---------- */
.toast {
  position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  padding: 12px 18px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* Not shown over the open cart (Add to Cart opens it, which shows what was added): on a phone it would cover
   Check Out. It's still there, so screen readers still say it. */
body:has(.drawer.open) .toast { opacity: 0; }
/* Back to top: a round arrow at the bottom right, shown once the page is scrolled down */
.to-top {
  position: fixed; z-index: 35; right: 24px; bottom: calc(24px + var(--footer-lift, 0px)); width: 48px; height: 48px; padding: 0;
  display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 50%; cursor: pointer;
  background: var(--card); color: var(--ink); box-shadow: 0 4px 14px rgb(42 42 42 / .14);
  transition: transform .15s ease, border-color .15s ease;
}
.to-top[hidden] { display: none; }
.to-top:hover { border-color: var(--ink); transform: translateY(-2px); }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) { .to-top { right: 16px; bottom: calc(16px + var(--footer-lift, 0px)); width: 44px; height: 44px; } }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; background: var(--card); }
.footer-main {
  max-width: 1180px; margin: 0 auto; padding: 40px 24px 28px;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px;
}
.footer-brand { display: flex; gap: 12px; align-items: flex-start; }
.footer-brand img { width: 34px; flex: none; }
.footer-brand p { margin: 0; line-height: 1.5; }
.footer-brand strong { color: var(--ink); font-family: var(--display); font-size: 16px; }
.footer-col { display: grid; gap: 8px; align-content: start; }
.footer-col h2 { font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.footer-col a, .footer-base a { text-decoration: none; }
.footer-col a:hover, .footer-base a:hover { color: var(--ink); text-decoration: underline; }
.footer-base {
  max-width: 1180px; margin: 0 auto; padding: 16px 24px 24px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 12px; font-size: 13px;
}
/* Stays on the right even when the Admin link isn't there (the published site has none) */
.footer-base > span { margin-left: auto; text-align: right; }

/* ---------- Desktop: the product page fits the window, no scrolling ----------
   The picture takes the height left after the header, crumbs and the small pictures under it (and fits
   beside the options), the options sit closer together, and the whole page sits in the middle. */
@media (min-width: 861px) {
  .product-page { width: fit-content; max-width: 100%; margin-inline: auto; }
  /* You may also like takes the width of the picture and options, without making the page wider, so its edges line up */
  .product-page > :not(.product) { contain: inline-size; }
  .product-page .crumbs { margin: 14px 0 12px; }
  .product { grid-template-columns: auto minmax(360px, 460px); gap: 0 40px; justify-content: center; }   /* any spare width goes either side, not between the picture and the options */
  /* 66px for each colour under the pictures (--colour-rows, set in app.js) */
  .gallery { top: 80px; width: clamp(320px, min(calc(100dvh - 290px - var(--colour-rows, 0) * 66px), calc(100vw - 48px - 40px - 360px)), 620px); gap: 10px; }
  .shot-thumb { flex-basis: 76px; font-size: 12px; gap: 4px; }
  .info-head h1 { font-size: clamp(28px, 3vw, 36px); }
  .info-head .price-line { margin: 4px 0 8px; font-size: 20px; }
  .info-head .blurb { margin-bottom: 16px; font-size: 15px; }
  .eyebrow { margin-bottom: 2px; }
  .field { margin-bottom: 14px; }
  .field-label { margin-bottom: 7px; }
  .segmented button { padding: 8px 12px; }
  .buy-row { margin: 18px 0 14px; }
  .details > details { padding: 11px 0; }
}

/* ---------- Small screens ---------- */
@media (max-width: 860px) {
  /* Tablets: the product tiles stay 3 across, a little tighter */
  .grid { gap: 14px; }
  .grid.centered > * { flex-basis: calc((100% - 28px) / 3); }
  .card-media { margin: 8px 8px 0; }
  .card-body { padding: 10px 12px 8px; gap: 6px; }
  .card-top h3 { font-size: 16px; }
  .card-colours { padding: 2px 12px 12px; }
  .product, .checkout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* One column: the heading, then the pictures, then the options */
  .product { grid-template-rows: auto; grid-template-areas: "crumbs" "head" "gallery" "info"; }
  .product > .crumbs { margin-bottom: 0; }   /* the grid's 24px gap is under it */
  .info-head .blurb { margin-bottom: 0; }
  .gallery { position: relative; top: 0; }
  .summary { position: static; }
}
@media (max-width: 560px) {
  /* Phones: tabs share the row, a long label going onto two lines, so none is cut off (Special or Bulk Request) */
  .tabs [role="tab"] { flex: 0 1 auto; padding: 10px 14px; }
  /* Phones: the product tiles 2 across: name over price, the sizes line wraps */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grid.centered > * { flex-basis: calc((100% - 12px) / 2); }
  /* A tile left on its own in the last row (after Sort's Show Only) sits in the middle.
     Only the tiles showing count: Show Only hides the others, and the 3 across extra tiles aren't on a phone */
  .grid:not(.centered, .three-across) > :nth-child(odd of :not([hidden], .wide-only)):nth-last-child(1 of :not([hidden], .wide-only)) {
    grid-column: 1 / -1; justify-self: center; width: calc((100% - 12px) / 2);
  }
  /* Featured on the home page and You may also like stay 3 across, with smaller words to fit */
  .three-across { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .three-across .card-media { margin: 5px 5px 0; border-radius: 8px; }
  .three-across .card-body { padding: 8px 8px 6px; gap: 4px; }
  .three-across .card-top h3 { font-size: 13px; }
  .three-across .card-meta { font-size: 11px; }
  .three-across .style-tag { padding: 1px 6px; font-size: 10px; }
  .three-across .card-colours { padding: 2px 8px 8px; }
  .card { border-radius: 14px; }
  .card-media { margin: 7px 7px 0; border-radius: 9px; }
  .card-body { padding: 10px 11px 8px; gap: 5px; }
  .card-top { flex-direction: column; align-items: flex-start; gap: 2px; }
  /* Room for a name on two lines: one on one line has a space under it, so its sizes line up with a two line
     name's beside it */
  .card-top h3 { font-size: 16px; line-height: 1.2; min-height: 2.4em; }
  .card-top .price { font-size: 14px; }
  .card-meta { font-size: 12px; white-space: normal; }
  .style-tag { padding: 1px 8px; font-size: 11px; }
  .card-colours { padding: 2px 11px 11px; }
  .card-swatch[aria-pressed="true"] { box-shadow: 0 0 0 1.5px var(--card), 0 0 0 3px var(--ink); }
  main { padding: 0 16px 56px; }
  /* Product page: the links above the title stay on one line (a little smaller on a narrow phone, so the
     Diamond Crown's "Crown" isn't left on a line of its own), and the crown tabs (Gold, Diamond) sit on the right */
  .product > .crumbs { white-space: nowrap; overflow-x: auto; scrollbar-width: none; font-size: min(14px, 3.4vw); }
  .product > .crumbs::-webkit-scrollbar { display: none; }
  .tabs.style-tabs { margin-left: auto; }
  .site-header { padding: 10px 16px; }
  .brand-logo { height: 56px; }
  .custom-sheep img { height: 62px; }
  /* Phones: DANG over MADE, same letter size as two rows */
  .brand-tiles { height: 38px; }
  .cart-button > span:not(.cart-count) { display: none; }
  .hero { padding: 36px 0 28px; }
  .hero p { font-size: 16px; }
  /* Headbands' line under the title stays on one line (it's 22 times as wide as its font size): a little smaller
     on a narrow phone, so "size." isn't left on a line of its own */
  .hero p.one-line { font-size: clamp(13px, (100vw - 32px) / 22.3, 16px); text-wrap: balance; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr 1fr; padding: 32px 16px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-base { padding: 14px 16px 20px; }
  .help-table { font-size: 14px; }
  .help-table th, .help-table td { padding: 8px 6px; }
  .panel { padding: 18px; }
  .buy-row { flex-direction: column; }
  .stepper { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Home: the sheep, the title, the three steps and Shop Now fit one screen, on every device ----------
   What's in the splash is sized from the screen's height under the header (--head, set in app.js), less 24px:
   --sh is 1% of it. So it fits a tall phone, a short one, an iPad either way up and a desktop. The splash is only
   as tall as what's in it, so Featured starts 64px under Shop Now (.home-section), the same as Custom Orders
   under Featured, on every screen but a phone's (there the splash is a whole screen: see below). */
@media screen {
  .splash { --sh: calc(max(376px, 100svh - var(--head, 127px) - 24px) / 100); container-type: inline-size; padding: 24px 0 0; }
  .splash-sheep a { width: min(252px, 36vw, 22 * var(--sh)); }
  .splash h1 { margin: calc(1.5 * var(--sh)) 0 calc(2.5 * var(--sh)); font-size: min(clamp(25px, 3.96vw, 39.6px), 4.4 * var(--sh)); }
  .splash .splash-steps { margin-top: 0; gap: min(16px, 1.6 * var(--sh)); }
  .splash-steps div { padding: min(20px, 1.6 * var(--sh)) 16px; }
  .splash-steps h3 { font-size: 15px; margin-bottom: 2px; }
  .splash-steps .step { width: 22px; height: 22px; font-size: 12px; }
  .splash-steps p { padding-left: 32px; font-size: 13px; line-height: 1.35; }
  .splash .btn.big { margin-top: min(28px, 2.5 * var(--sh)); min-height: min(56px, 9 * var(--sh)); }
  /* A short screen (500px or less under the header, which is about 150px on a phone): just the steps' headings */
  @media (max-height: 670px) {
    .splash-steps p { display: none; }
    .splash-steps h3 { margin-bottom: 0; }
  }
  /* A phone: the splash fills the screen under the header, so Featured only shows once the page is scrolled, and
     the room left over is shared out evenly: above the sheep, between the sheep, the title, the steps and
     Shop Now, and under Shop Now (the padding is as big as the gap, so the top and bottom match the rest) */
  @media (max-width: 560px) {
    .splash {
      min-height: calc(100svh - var(--head, 77px)); justify-content: space-evenly;
      padding: calc(2 * var(--sh)) 0; gap: calc(2 * var(--sh));
    }
    .splash h1, .splash .btn.big { margin: 0; }
  }
  /* A wide screen (a desktop, an iPad on its side): the sheep and the title half as big again, the three steps
     side by side lower down, and more room between them and Shop Now */
  @container (min-width: 860px) {
    .splash-sheep a { width: min(378px, 33 * var(--sh)); }
    .splash h1 { margin: calc(1.5 * var(--sh)) 0 calc(6 * var(--sh)); font-size: min(59.4px, 6.6 * var(--sh)); }
    .splash .splash-steps { width: 100%; grid-template-columns: repeat(3, 1fr); }
    .splash .btn.big { margin-top: calc(6 * var(--sh)); }
    /* ... and a short one (600px or less under the 127px header): just the steps' headings sooner */
    @media (max-height: 751px) {
      .splash-steps p { display: none; }
      .splash-steps h3 { margin-bottom: 0; }
    }
  }
}