:root {
  --ink: #2a2a2a;
  --ink-soft: #5e5a57;
  --muted: #6e6964;   /* 5.4:1 on white (was #8a8580 until 2026-10-21, too faint at 3.65:1: WCAG asks for 4.5:1) */
  --paper: #faf8f5;
  --card: #ffffff;
  --line: #e7e2dc;
  --pink: #f4a7c6;
  --purple: #be9bd9;
  --blue: #6ec3ee;
  --gold: #e4bd68;
  --tint-crown: #e5f3fb;
  /* Brand colours (2026-10-19): the purple and red sheep's colours (Lilac Purple and Scarlet Red filament), a darker
     shade of each for words, and the light taupe every product picture sits on (app.js TILE_BG) */
  --lilac: #ae96d4;
  --scarlet: #de4343;
  --purple-ink: #5f4796;
  --purple-deep: #4a3577;   /* darker still: the home page hero banner's title and letters */
  --red-ink: #b72f2f;
  --tile-bg: #ebe6de;
  --taupe: #ded7cd;   /* the outline sheep's taupe: the home page hero banner until the evening of 2026-10-19 */
  --taupe-dark: #ab9c89;   /* a darker shade of it: the DANG MADE letters in the hero banner's black bars */
  /* The ring or border on whatever is chosen (a colour, a size, a picture): purple, black on the home page */
  --pick: var(--purple-ink);
  /* 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; }
/* A quick tap after a tap (going from colour swatch to colour swatch) doesn't zoom the page on a phone; pinching still does */
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
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; }
/* An iPhone zooms into any field with text under 16px when it's tapped, so every field's text is 16px */
input, select, textarea { font-size: 16px; }
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; }
/* The shop's text can't be selected and its pictures can't be dragged off or saved by pressing and holding on a
   phone; the form fields still can (app.js blocks right-click on pictures and copying) */
.no-copy { -webkit-user-select: none; user-select: none; }
.no-copy :is(img, svg) { -webkit-user-drag: none; -webkit-touch-callout: none; }
.no-copy :is(input, textarea, select, [contenteditable]) { -webkit-user-select: text; user-select: text; }

/* ---------- Banner + header ---------- */
.preview-banner {
  background: var(--ink); color: #fff; text-align: center;
  font-size: 13px; padding: 7px 16px;
}
.site-header {
  position: relative; z-index: 20;   /* scrolls away with the page (z-index: the Shop menu opens over what is under it) */
  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;
}

/* 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: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 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; }
/* The white sheep above the Headbands title (assets/sheep-white.svg: white with a dark outline, like the white
   figurine) since 2026-10-19; it was the taupe outline sheep, assets/sheep-line.svg (Scarlet Red was tried too:
   assets/sheep-line-red.svg). It lifts and tilts on hover like the home page's sheep */
/* As big as the Custom Orders page's sheep (.custom-sheep: 75px, 62px on phones) since 2026-10-19; it was 61px.
   Taken off the page with the title on 2026-10-21 (app.js renderHeadbands); these rules are kept for bringing it back */
.hero-sheep { width: 75px; height: auto; margin-bottom: 8px; transition: transform .2s ease; }
/* Only with a mouse: on a phone a tap would leave it lifted */
@media (hover: hover) { .hero-sheep:hover { transform: translateY(-6px) rotate(-3deg); } }
/* ... and it sits closer under the Shop ALL / Headbands links than a title would, with the tabs as far under the
   title as the tiles are under the tabs (the tab bar's 10px and the tab panel's 16px). (A black stripe behind the
   sheep and the title was tried on 2026-10-19 and not kept) */
.hero:has(> .hero-sheep) { padding-top: 16px; padding-bottom: 26px; }
/* The Headbands title is the same size as the Custom Orders title (.page-title) */
.hero:has(> .hero-sheep) h1 { font-size: 32px; }
/* The Headbands, Custom Orders and Checkout pages' wallpaper: white outline sheep from the front, back and both sides, mixed
   (assets/sheep-wallpaper-mix.svg), the same size as the brown one, in diagonal lines from top to bottom, lined up so
   the brown sheep (or the middle of the purple and red pair on Custom Orders) sits where one of them would be (app.js
   alignWallpaper sets --wallpaper-x/-y to that middle; the 600px tile has a front-view sheep 225px across and 75px
   down, so the brown sheep covers a front one; Checkout has no sheep above its title, so its tiles stay put) */
body[data-page="headbands"], body[data-page="custom"], body[data-page="checkout"], body[data-page="about"] {
  background: var(--paper) url("assets/sheep-wallpaper-mix.svg?v=3") repeat
    calc(var(--wallpaper-x, 0px) - 225px) calc(var(--wallpaper-y, 0px) - 75px) / 600px 600px;
}
/* The home page has the same wallpaper behind the whole page (2026-10-19; before, only its top bar had it), not lined
   up with anything: the lilac hero banner covers the top of it. Its top bar is plain, with no sheep showing through.
   Since 2026-10-20 its tiles start just under the banner (app.js alignWallpaper sets --wallpaper-top), so the
   banner's bottom edge no longer cuts a row of sheep in half */
body[data-page="home"] { background: var(--paper) url("assets/sheep-wallpaper-mix.svg?v=3") repeat 0 var(--wallpaper-top, 0px) / 600px 600px; }
body[data-page="home"] .site-header { background: var(--paper); }
/* The product page's top bar is plain (since 2026-10-19; before, it had the footer's darker sheep across its middle) */
.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: box-shadow .18s ease, border-color .18s ease;
}
/* A product tile stays still on hover and click (no lift, no zoom): only its shadow shows */
.card:hover { 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, var(--tile-bg)); display: grid; place-items: center; overflow: hidden;
}
/* Clicking anywhere on a tile opens its product, except its dots (app.js) */
.card { cursor: pointer; }
.card-media img { width: 92%; height: 92%; object-fit: contain; transition: opacity .25s ease; }
.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 (--dot: 24px, smaller on phones), a third of a dot between them (8px
   between the 16px phone dots, so each still has a 24px tap space: WCAG 2.5.8). As
   many as fit: when they don't all fit, +4 (how many more) at the right end (app.js fitCardDots, which reads --dot and the gap) */
.card-colours { display: flex; align-items: center; padding: 2px 16px 16px; --dot: 24px; }
/* .card-dot-space: the empty row under a figurine tile, as tall as the dots, so every product tile is the same size */
.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); }
/* The +4 at the right end of the dots: how many more colours (it opens the product, like the rest of the tile).
   Small enough that "+9" fits in a dot's width */
.card-more {
  width: var(--dot); height: var(--dot); flex: none; margin-left: auto; display: grid; place-items: center;
  font: 600 calc(var(--dot) * .6)/1 var(--display); color: var(--ink-soft); white-space: nowrap; cursor: pointer;
}
@media (hover: hover) { .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(--pick); }
.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"][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-box {
  position: relative; display: inline-block; color: var(--ink); border: 1.5px solid var(--line); border-radius: 10px;
  padding: 7px 34px 7px 12px; white-space: nowrap;
  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-box:has(select:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
/* The real dropdown covers the box, see-through. On a touch screen its text is 16px, or an iPhone zooms in when it's
   tapped; the box keeps showing the choice at 14px */
.sort select {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none; font-size: 14px;
}
@media (pointer: coarse) { .sort select { font-size: 16px; } }
@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;
}
/* Only with a mouse: on a phone a tap would leave it lifted */
@media (hover: hover) { .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 */
/* overflow: visible: the last tile's outline ends right on the drawing's edge, which cut its right side off on phones
   (where the title is narrower and the tiles are scaled down to fit it) */
.tile-word { display: block; height: 1.15em; width: auto; max-width: 100%; margin: .4em auto; color: var(--ink); overflow: visible; }
.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; }
/* The hero banner: the page's off-white (--paper, the colour behind the sheep wallpaper) since the evening of
   2026-10-19 (it was the taupe, --taupe, then for a while that evening the light taupe of the product tiles), the full width of the window (the box-shadow paints it out to the sides and
   clip-path cuts it off above and below, so the page doesn't scroll sideways), with the title, the letters behind it
   and the sheep in black (--hero-ink; the sheep's picture: app.js HOME_SHEEP). Since 2026-10-19; before, the banner
   was lilac, then black with the title and letters in Lilac and the sheep in Scarlet Red. The steps' numbers were black
   again (they were Scarlet Red for a while), so nothing on the home page was purple or red, until 2026-10-22: since
   then the steps' dots are coloured: Lilac with black numbers (later on 2026-10-22; CUSTOMIZE and the dots were dark
   purple, --purple-ink, at first), the page's one accent */
.splash-hero {
  align-self: stretch; display: flex; flex-direction: column; align-items: center;
  --hero-bg: var(--paper); --hero-ink: var(--ink);
  background: var(--hero-bg); color: var(--hero-ink); box-shadow: 0 0 0 100vmax var(--hero-bg); clip-path: inset(0 -100vmax);
}
.splash-hero .tile-word { color: var(--ink); }   /* black (dark purple for a while on 2026-10-22) */
/* ... with its CUSTOMIZE tiles filled white since the evening of 2026-10-19 (app.js tileWord draws them unfilled; they
   were the light taupe of the product tiles), and outlined in black (since 2026-10-22; dark purple like the letters before) */
.splash-hero .tile-word rect { fill: #fff; stroke: var(--ink); }
/* Above the sheep and under the title (2026-10-19): a black bar along the top and bottom of the banner, each with a row
   of DANG and MADE 2 by 2 letter blocks in dark taupe (--taupe-dark; white at first, then light taupe) (app.js
   layoutHeroLetters places them), across the whole window like
   the taupe (body's overflow-x: clip keeps them from making the page scroll sideways). Before the bars, the blocks
   were on the taupe, down its two sides on wider screens: in a darker lilac, #9a7fc9, then the product tiles' light
   taupe, then black like the sheep and the title, then light taupe again, then dark taupe, #ab9c89 */
.splash-hero { position: relative; }
.splash-hero > * { position: relative; }
.splash-hero > .hero-letters { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; pointer-events: none; }
.hero-letters svg { position: absolute; height: auto; fill: var(--taupe-dark); }
.hero-letters .hero-bar { position: absolute; left: 0; right: 0; background: var(--ink); }
/* (The same bars under the header and above the footer were on the Shop and Custom Orders pages for a while on
   2026-10-19 and not kept; the one under the header came back that evening: .page-strip) */
/* The black bar right under the header on the Shop and Custom Orders pages (app.js layoutPageStrip sets its width,
   height and blocks, and pulls it out to the window's left edge) */
.page-strip { position: relative; background: var(--ink); pointer-events: none; }
/* ... on the home page too, above the hero banner (since the evening of 2026-10-19; it was the banner's own top bar).
   Its letters are lilac on every page (later that evening; they were dark taupe, and for a moment the home page's
   bar was lilac with dark taupe letters) */
.page-strip svg { fill: var(--lilac); }
body { overflow-x: clip; }
body[data-page="home"] { --pick: var(--ink); }
/* "Headband" above a product's name: black (it was dark red for a while on 2026-10-19) */
body[data-page="product"] .eyebrow { color: var(--ink); }

/* ---------- 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: 24px; }
/* The jump links under the title, one per section (since 2026-10-22, when the footer's section links came out) */
.help-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 24px; }
.help-jump a { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.help-jump a:hover { border-color: var(--ink); }
/* Returns and Exchanges: each question, with its answer under it */
.help .faq h3 { font-size: 16px; margin: 18px 0 4px; }
/* Safety and Care: Care's heading under the safety list (since 2026-10-22) */
.help .care-title { font-size: 16px; margin: 18px 0 4px; }
.help .faq p { margin: 0; }
/* Privacy Policy: smaller, tighter text so the whole policy is quick to read through */
.privacy { max-width: 680px; font-size: 14px; line-height: 1.5; }
.privacy .page-title { font-size: 26px; margin: 28px 0 12px; }
.privacy .lead { color: var(--ink-soft); margin: 0 0 16px; }
.privacy .panel { padding: 14px 18px; }
.privacy .panel + .panel { margin-top: 10px; }
.privacy .panel h2 { font-size: 16px; margin-bottom: 6px; }
.privacy .panel p { margin: 0 0 8px; }
.privacy .panel ul { color: var(--ink-soft); margin: 0 0 8px; padding-left: 18px; }
.privacy .panel li { margin-bottom: 3px; }
.privacy .panel > :last-child { margin-bottom: 0; }
/* The spam check's box (app.js humanCheck): always shown on the live shop, empty on this Mac */
.human-check { display: flex; justify-content: center; }
.form-privacy { margin-top: 10px; }
.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;
}
/* Only with a mouse: on a phone a tap would leave it lifted */
@media (hover: hover) { .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: var(--tile-bg); }
.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[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 black number, bold, in a Lilac dot
   (since 2026-10-22: black with white numbers before, then dark purple for a while that day) */
.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 h2 { 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(--lilac); color: var(--ink); font-size: 14px; font-weight: 700; }
.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; display: grid; gap: 12px; }   /* scrolls with the page, as the options beside it do */
.stage {
  position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0;
  border-radius: var(--radius); background: var(--tint, var(--tile-bg)); overflow: hidden; transition: background-color .3s ease;
  cursor: pointer;   /* clicking it shows the next colour (app.js nextColour) */
}
.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 88px; 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, var(--tile-bg)); 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[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.shot-thumb[aria-pressed="true"] .shot-media { border-color: var(--pick); }
/* 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;
}

.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[aria-pressed="true"] { border-color: var(--pick); box-shadow: inset 0 0 0 1px var(--pick); }

/* 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;
}
/* Only the colour swatches react to hover (here and .card-swatch); the buttons don't (2026-10-16). Only with a mouse:
   on a phone a tap would leave the swatch grown */
@media (hover: hover) { .swatch:hover { transform: scale(1.06); } }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--pick); }
/* 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(--pick); }
.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; }
@media (hover: hover) { .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(--pick); }
.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:active { transform: translateY(1px); }
.btn.secondary { background: var(--card); color: var(--ink); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; background: var(--ink); transform: none; }
.btn.grow { flex: 1; }
/* Place Order while the order is sending: a spinning ring next to "Placing Order…" */
.btn.busy:disabled { opacity: .85; cursor: progress; }
.spinner { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.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 h2 { margin: 0; }
.details details[open] summary { margin-bottom: 10px; }
.details summary h2 { font-family: var(--body); font-size: 14px; font-weight: 600; }
.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 a product page and in the Product Viewer (on the Help page too until 2026-10-21): the chosen size's column
   highlighted on a product page, and the note under the chart 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; }
.details .size-guide-intro, #help-sizes .size-guide-intro { font-size: 14px; }
/* The notes above the size guide's chart */
.chart-notes { margin: 0 0 10px; 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; }
/* Links in the folded sections (Delivery and Returns: Contact us, All the details) */
.details li a { color: var(--ink); font-weight: 600; }

/* ---------- 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; }
/* The cart's top strip, where it says Your Cart, and its bottom strip, with the Check Out button, have the white sheep
   wallpaper, a row across the middle like the home page's top bar */
.drawer-head, .drawer-foot { background: var(--paper) url("assets/sheep-wallpaper-mix.svg?v=3") repeat center / 600px 600px; }
.icon-button { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); cursor: pointer; }
.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, var(--tile-bg)); 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; }
.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); font-size: 16px;
}
.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); }
/* Checkout's Promo Code box (SHOW_PROMO_CODE in app.js): the code and Apply side by side, then the applied code */
.promo { margin: 0 0 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.promo-row { display: flex; gap: 8px; align-items: center; }
.promo-row input { flex: 1; min-width: 0; height: 46px; text-transform: uppercase; }
.summary .promo-row .btn { height: 46px; min-height: 0; margin: 0; padding: 0 18px; border: 1.5px solid var(--line); }
.promo-applied { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.promo-label { display: block; font-weight: 500; margin-bottom: 4px; }
.promo-note { margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); }
.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 orders page's Coming Soon note */
.notice.tip { background: #e8f5ec; color: #1e5631; }
.notice + .notice.tip { margin-top: 10px; }
/* Checkout's Payment note, greyed out while Place Order is switched off (ORDERS_OPEN in app.js) */
.notice.off { background: var(--line); color: var(--muted); }
/* Checkout's pre-launch / Place Order Unavailable note, above the title */
.notice.prelaunch { margin: 32px 0 0; }
/* Checkout's Ready For Delivery note, just above Place Order (the last thing read before ordering) */
.notice.ready-note { margin-top: 16px; }
.notice.ready-note > div { flex: 1; min-width: 0; }
.notice.ready-note p { margin: 8px 0 0; }
/* The ready table (READY_TABLE_HTML in app.js): checkout's note, Materials and Making, and Help's FAQ */
/* The ready table and Help's Delivery table are outlined like the size chart (.chart-wrap, since 2026-10-22). In an
   outline, the last row's line would double it */
.chart-wrap .help-table tbody tr:last-child > * { border-bottom: 0; }
.help .panel > .chart-wrap:last-child { margin-bottom: 0; }
.chart-wrap.ready-wrap { margin: 8px 0 0; }
/* In checkout's blue Ready for Delivery note, the table is a lighter blue than the note (halfway to white), not white,
   with lines in the note's dark blue (2026-10-22) */
.notice .chart-wrap { background: color-mix(in srgb, var(--tint-crown), #fff); border-color: #1d4a63; }
.notice .help-table th, .notice .help-table td { border-bottom-color: #1d4a63; }
/* Its column headings (You Order, It's Ready) in the same dark blue, not grey */
.notice .help-table thead th { color: #1d4a63; }
.ready-table { font-size: 14px; }
.ready-table th, .ready-table td { padding: 6px 10px; }
.ready-table tbody th { font-weight: 600; }
.ready-holiday { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.notice .ready-holiday { color: inherit; }
.help .panel .ready-holiday { margin: 8px 0 14px; color: var(--muted); }
.details .ready-wrap { margin-top: 12px; }
.notice.prelaunch + .page-title { margin-top: 20px; }
.summary { position: sticky; top: 24px; }
.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 a { color: var(--ink); font-weight: 600; }
/* Where you are: Custom on its page, Shop on the shop's pages and products (app.js render). Lilac since 2026-10-21 (it was
   a light taupe, #efeae4) */
.nav-custom[aria-current], .menu-button[aria-current] { background: var(--lilac); }
.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 Coming Soon and preview notes on the custom orders page, while custom orders are switched off: under the title,
   above the tabs, in the lead's place (above the sheep until 2026-10-22) */
.custom-notices { max-width: 660px; margin: 0 auto 24px; }
/* 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; }
/* No wallpaper sheep behind the pair (2026-10-20): the wallpaper puts a white one on the pair's middle (app.js
   alignWallpaper), so a patch of the page's colour, as big as that sheep, covers it */
.custom-sheep { position: relative; isolation: isolate; }
.custom-sheep::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 100px; height: 100px;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--paper);
}
/* Each one lifts and tilts on hover, like the home page's white sheep */
.custom-sheep img { transition: transform .2s ease; }
/* Only with a mouse: on a phone a tap would leave it lifted */
@media (hover: hover) { .custom-sheep img:hover { transform: translateY(-6px) rotate(-3deg); } }
.custom > .custom-sheep + .page-title { margin-top: 12px; }
/* About Us (2026-10-22; .about-us, as .about is the home page's steps): the title on the left, in line with the story
   card (centred like Custom Orders until later that day), then the story in one panel */
/* Wide screens (2026-10-22): the story on the left, Meet the Sheep Dragons! and Shop Headbands under it on the right, a
   little tighter, so the whole page fits a 13 inch MacBook's window without scrolling (about 1280 x 700 in Chrome) */
@media (min-width: 1024px) {
  .help.about-us {
    max-width: 1180px; display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); column-gap: 20px; align-items: start;
    grid-template-areas: "title title" "story sheep" "story shop";
    grid-template-rows: auto auto 1fr;   /* the story's extra height goes under the button, so it sits right under the card */
  }
  .about-us > .page-title { grid-area: title; margin: 24px 0 18px; }
  .about-us > .panel:nth-of-type(1) { grid-area: story; }
  .about-us > .panel:nth-of-type(2) { grid-area: sheep; margin-top: 0; }
  .about-us > .keep-shopping { grid-area: shop; margin-top: 20px; }
  .about-us .panel p { margin-bottom: 10px; }
  .about-us .panel p:last-child { margin-bottom: 0; }
}
/* Meet the Sheep Dragons!: the purple (Crystal), white (Dang Made) and red (Jason) sheep dragons side by side, each named
   underneath, small (64px, 52px on phones) */
/* Three columns as wide as each other, so the sheep are evenly spaced however long the name under each one is */
/* The story's heading with the little princess (assets/girl-princess.svg) on its left, the same size as the sheep below */
.story-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.story-head img { height: 64px; width: auto; flex: none; }
.about-us .story-head h2 { margin: 0; }
.sheep-trio { display: grid; grid-template-columns: repeat(3, 100px); justify-content: center; gap: 8px; margin: 18px 0 4px; }
.sheep-trio figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sheep-trio img { height: 64px; width: auto; }
.sheep-trio figcaption { font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--ink-soft); white-space: nowrap; }
.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; }
/* The picture scrolls with the page (since 2026-10-22; it was sticky, 24px from the top, but the choices are only a
   little taller than it, so it slid down a bit and stopped, which looked like a glitch) */
.builder-media { display: grid; gap: 10px; }
.builder-stage {
  aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; display: grid; place-items: center;
  background: var(--tint, var(--tile-bg)); 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-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 */
/* On the builder: the product's name in the middle, with the arrows to the product before and after it at the two
   ends (the full width, lined up with the ends of the Style buttons under it) */
.builder-product { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.builder-product strong { font-family: var(--display); font-size: 20px; text-align: center; }
.step-button {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; padding: 0 0 3px; cursor: pointer;
  font: inherit; font-size: 24px; line-height: 1; color: var(--ink); background: var(--card);
  border: 2px solid var(--line); border-radius: 50%; transition: border-color .18s ease;
}
@media (hover: hover) { .step-button:hover { border-color: var(--ink); } }
/* A sideways swipe on the picture changes the product (app.js); up and down still scroll the page */
.builder-stage { touch-action: pan-y; }
/* 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; }
  /* ... except Style and Crown Position, which stay above the colours (2026-10-20: the Product Viewer's, then the
     Custom Orders page's too) */
  .builder-options > .builder-style { order: 2; }
  .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)); }
}
/* The Product Viewer: the Custom Orders tiles and builder in the Headbands page's Preview tab (app.js viewerHtml) */
.product-viewer { display: grid; gap: 18px; }
.product-viewer h2 { margin-bottom: 4px; }
.product-viewer .hint { color: var(--ink-soft); margin: 0; }
/* The viewer's size guide, opened by Size Guide beside Size (app.js viewerGuideHtml) */
.product-viewer .viewer-guide { margin-top: 14px; }
/* View Product and Add to Cart side by side, the same width (app.js viewerActionsHtml) */
.product-viewer .viewer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.product-viewer > .custom-link { margin: 0; }
/* On the Headbands page above All Products since 2026-10-20 (it was the Preview tab) */
main > .product-viewer { margin-bottom: 48px; }
/* Its product icons (app.js viewerHtml), above the product's name: small squares with no names under them, all in
   one row (on a phone too, smaller, and centred while the picker is one column), each just the product's shape,
   filled in dark taupe (index.html #shape-fill), so they don't compete with its picture; the product in the picker
   is drawn in the colours chosen (app.js showBuild) */
.pick-icons { display: grid; grid-template-columns: repeat(6, minmax(0, 84px)); gap: 8px; }
/* Beside the picture, over the choices (the picture takes both rows) */
.builder:has(> .pick-icons) { grid-template-rows: auto 1fr; row-gap: 22px; }
.builder:has(> .pick-icons) > .builder-media { grid-column: 1; grid-row: 1 / span 2; }
.builder > .pick-icons { grid-column: 2; grid-row: 1; }
/* Only the front: no Front / Back pictures under it (2026-10-20, the Product Viewer's then the Custom Orders page's
   too; app.js showBuild) */
.builder-views { display: none; }
@media (max-width: 760px) { .builder-stage { margin-bottom: 18px; } }
.builder:has(> .pick-icons) > .builder-options { grid-column: 2; grid-row: 2; }
/* One column: at the top, over the product's name */
@media (max-width: 760px) {
  .builder > .pick-icons { order: -1; justify-content: center; margin-bottom: 10px; }
}
.pick-icon {
  display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); cursor: pointer; transition: border-color .15s ease;
}
.pick-icon img { width: 80%; height: 80%; object-fit: contain; filter: url(#shape-fill); }
.pick-icon[aria-pressed="true"] { border-color: var(--pick); box-shadow: inset 0 0 0 1px var(--pick); }
.pick-icon[aria-pressed="true"] img { filter: none; }
@media (hover: hover) { .pick-icon:hover { border-color: var(--pick); } }
@media (max-width: 560px) { .pick-icons { gap: 6px; } .pick-icon { border-radius: 10px; } }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* A lone tab's heading (All Products), on the left of the Show menu */
.tab-bar:has(> .tab-heading) { grid-template-columns: 1fr auto; }
.tab-bar .tab-heading { grid-column: 1; margin: 0; font-size: 24px; }
.tab-bar:has(> .tab-heading) .tab-tools { grid-column: 2; }
/* The Show menu while Preview is open */
.tab-tools[hidden] { display: none; }
.custom-link { margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); }
.custom-link a { color: var(--ink); font-weight: 600; }
/* The small parts warning (SAFETY_WARNING_HTML in app.js): at checkout, in Help > Safety and on the Terms page */
.safety-warning { margin: 14px 0; padding: 10px 14px; border: 1.5px solid #e0a63a; border-radius: var(--radius-sm); background: #fdf6e7; font-size: 14px; color: var(--ink); }
.safety-warning strong { font-weight: 700; }

/* ---------- 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 { position: static; text-align: left; margin: 28px 0; }   /* not sticky like checkout's summary */
.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 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; } }
/* The footer is the page's colour (--paper) with the sheep wallpaper in a little darker (assets/sheep-wallpaper-mix-footer.svg),
   moved up half a row (-37.5px) so its first row is whole sheep rather than cut in half by the top edge */
.site-footer {
  border-top: 1px solid var(--line); color: var(--muted); font-size: 14px;
  background: var(--paper) url("assets/sheep-wallpaper-mix-footer.svg?v=3") repeat center -37.5px / 600px 600px;
}
/* ... except on the home, Headbands, Custom Orders, Checkout and About Us pages, which already have the sheep wallpaper: their footer is plain white */
body[data-page="home"] .site-footer, body[data-page="headbands"] .site-footer, body[data-page="custom"] .site-footer,
body[data-page="checkout"] .site-footer, body[data-page="about"] .site-footer { background: var(--card); }
.footer-main {
  max-width: 1180px; margin: 0 auto; padding: 40px 24px 28px;
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 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; }
/* The same columns as .footer-main above it (2026-10-22): Admin bottom left, and Made in Canada · © 2026 Dang Made in
   line with the Help column (the published site has no Admin link). minmax(0, …) here and in .footer-main keeps the
   columns from widening for the line, which may run a little past the Help column, into the space on the right */
.footer-base {
  max-width: 1180px; margin: 0 auto; padding: 16px 24px 24px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px; font-size: 13px;
}
.footer-base > span { grid-column: 3; grid-row: 1; white-space: nowrap; }
/* The bar before Admin, only shown when it's centred after the line (below); not read out by screen readers */
.footer-admin::before { content: "|" / ""; display: none; margin-right: .3em; }
/* Narrower windows and phones: the Help column is too narrow for the line, so it's centred, Admin after it */
@media (max-width: 960px) {
  .footer-base { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 .3em; text-align: center; }
  .footer-base > span { white-space: normal; }
  .footer-admin { order: 1; }
  .footer-admin::before { display: inline-block; }
}

/* ---------- 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 { width: clamp(320px, min(calc(100dvh - 290px - var(--colour-rows, 0) * 66px), calc(100vw - 48px - 40px - 360px)), 620px); gap: 10px; }
  .shot-thumb { flex-basis: 61px; 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; }
}
/* ... and the shop page's Product Viewer fits the window on a laptop (a 14 or 15 inch MacBook: about 860px tall in
   Chrome) since 2026-10-21: everything in it sits closer together, with smaller product icons. It was 963px down the
   page, so its bottom was cut off (the sheep and the title above it have gone since). Taller screens keep the roomier look */
@media (min-width: 861px) and (max-height: 1000px) {
  main:has(> .product-viewer) > .crumbs { margin: 14px 0 12px; }
  .product-viewer { padding: 18px 24px; gap: 12px; }
  .product-viewer .builder { row-gap: 14px; }
  .product-viewer .pick-icons { grid-template-columns: repeat(6, minmax(0, 64px)); }
  .product-viewer .field { margin-bottom: 10px; }
  .product-viewer .field-label { margin-bottom: 7px; }
  .product-viewer .segmented button { padding: 8px 12px; }
  .product-viewer .viewer-actions { margin-top: 0; }
}
/* ... and on a shorter window (a MacBook's Chrome with the Dock and bookmarks bar showing: about 750px tall) the
   viewer is tighter again */
@media (min-width: 861px) and (max-height: 820px) {
  main:has(> .product-viewer) > .crumbs { margin: 10px 0 10px; }
  .product-viewer { padding: 14px 24px; gap: 8px; }
  .product-viewer .builder { row-gap: 10px; }
  .product-viewer .pick-icons { grid-template-columns: repeat(6, minmax(0, 52px)); }
  .product-viewer .builder-stage { width: min(420px, calc(100dvh - 330px)); }
  .product-viewer .field { margin-bottom: 8px; }
  .product-viewer .field-label { margin-bottom: 5px; }
  .product-viewer .segmented button { padding: 6px 12px; }
  .product-viewer .viewer-actions .btn { min-height: 42px; }
}

/* ---------- 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; }
  .summary { position: static; }
}
@media (max-width: 560px) {
  /* Phones: a product's name always has room for two lines, so when a colour changes it between one line and two
     (Pink Cat Ears, Black Cat Ears with Pink), the picture and the colours under it don't jump up or down under the
     finger. Since 2026-10-20 that room goes under the description, so the description sits right under a one line
     name (app.js fitNameRoom; until then it was under the name: min-height: 2.3em) */
  /* 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 Show's Cat Ears and so on) stays on the left, like the rest of the
     grid (it sat in the middle until 2026-10-19) */
  /* 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: 5px 8px 8px; --dot: 16px; }
  .three-across .card-swatch + .card-swatch { margin-left: 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; --dot: 20px; }
  .card-swatch[aria-pressed="true"] { box-shadow: 0 0 0 1.5px var(--card), 0 0 0 3px var(--pick); }
  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; }
  /* The small pictures under the big one (Front, Back) a fifth smaller */
  .shot-thumb { flex-basis: 70px; }
  .site-header { padding: 10px 16px; }
  .brand-logo { height: 56px; }
  .custom-sheep img { height: 62px; }
  .sheep-trio { grid-template-columns: repeat(3, 88px); gap: 4px; }
  .sheep-trio img { height: 52px; }
  .story-head img { height: 52px; }
  .hero-sheep { width: 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:has(> .hero-sheep) { padding-top: 8px; padding-bottom: 20px; }
  .hero p { font-size: 16px; }
  .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: 0; }
  /* The banner starts right under the header. Its padding is the black bar's height (--hero-bar-top and -bottom, set
     by app.js layoutHeroLetters from the bar it draws: more at the top while only the top bar shows) and a little
     room, the same above and below, so the sheep and the title are always in the middle of the room the bars leave,
     on every screen (it was 24px above and 2.5sh below, which the bars
     covered on a tablet-sized screen) */
  .splash-hero { padding: calc(var(--hero-bar-top, 29px) + 2.5 * var(--sh)) 0 calc(var(--hero-bar-bottom, 29px) + 2.5 * var(--sh)); }
  /* The hero sheep: 15% smaller since 2026-10-19 (it was min(252px, 36vw, 22sh), 378px and 33sh wide, 16sh on phones) */
  .splash-sheep a { width: min(214px, 30.6vw, 18.7 * var(--sh)); }
  .splash h1 { margin: calc(1.5 * var(--sh)) 0 0; font-size: min(clamp(25px, 3.96vw, 39.6px), 4.4 * var(--sh)); }
  .splash .splash-steps { margin-top: calc(2.5 * var(--sh)); gap: min(16px, 1.6 * var(--sh)); }
  .splash-steps div { padding: min(20px, 1.6 * var(--sh)) 16px; }
  .splash-steps h2 { 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 (an iPhone SE: under 600px tall, with the browser's bars): just the steps' headings. An
     iPhone 13 in Safari is about 664px, and the words under each heading still fit down to about 580px */
  @media (max-height: 599px) {
    .splash-steps p { display: none; }
    .splash-steps h2 { 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 (space-evenly, since 2026-10-21): above the sheep, between the title and
     the steps, between the steps and Shop Now, and under Shop Now. The padding is as big as the gap, so on a short
     phone, with no room left over, the four spaces still match. (Until 2026-10-21 the banner took all the room left
     over, which left the steps and Shop Now squashed together near the bottom of the screen) */
  @media (max-width: 560px) {
    .splash {
      min-height: calc(100svh - var(--head, 77px) - var(--strip, 0px)); justify-content: space-evenly;
      padding: calc(1.2 * var(--sh)) 0; gap: calc(1.2 * var(--sh));
    }
    /* ... the sheep and the title together, a small gap between them. The banner's black bars are gone (the strip
       under the header took their place), so it needs no room for them here. The sheep is a little smaller than
       on a bigger screen (22) */
    .splash-hero { padding: 0; gap: calc(1.5 * var(--sh)); }
    .splash-sheep a { width: min(214px, 30.6vw, 13.6 * var(--sh)); }
    .splash h1, .splash .btn.big, .splash .splash-steps { margin: 0; }
    /* Shop Now a little smaller than on a bigger screen (56px), still well over the 24px a button needs to be easy
       to tap (WCAG 2.5.8) and the 44px Apple suggests */
    .splash .btn.big { min-height: 46px; padding: 0 36px; font-size: 17px; }
  }
  /* A wide screen (a desktop, an iPad on its side): the sheep and the title half as big again, the three steps
     lower down, as far under the banner as above Shop Now, listed one under another as on a phone since 2026-10-21
     (they were side by side) */
  @container (min-width: 860px) {
    /* ... the sheep and the title in the banner about 15% smaller on 2026-10-19 (they were min(321px, 28sh) and
       min(59.4px, 6.6sh)), then 20% smaller again the same day (they were min(273px, 23.8sh) and min(50.5px, 5.6sh)),
       with more room above and below them (it was 24px and 3sh, then 6sh until the black bars came the same day:
       41px tall, then 36px with smaller letters) */
    .splash-sheep a { width: min(218.4px, 19.04 * var(--sh)); }
    .splash h1 { margin: calc(1.5 * var(--sh)) 0 0; font-size: min(40.4px, 4.48 * var(--sh)); }
    .splash-hero { padding: calc(var(--hero-bar-top, 29px) + 3 * var(--sh)) 0 calc(var(--hero-bar-bottom, 29px) + 3 * var(--sh)); }
    /* ... with the same room above the steps (under the banner) as under them (above Shop Now) since 2026-10-19 (it
       was 3sh above and 6sh under) */
    .splash .splash-steps { margin-top: calc(4.5 * var(--sh)); }
    .splash .btn.big { margin-top: calc(4.5 * 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 h2 { margin-bottom: 0; }
    }
  }
}

/* The yellow parts still to fill in on a draft page (the Terms and Conditions, 2026-10-21) */
mark { background: #fff1a8; color: inherit; padding: 0 2px; border-radius: 3px; }

/* ---------- Pre-launch page (app.js renderPreLaunch, while PRE_LAUNCH is on) ----------
   The logo (sheep and DANG MADE tiles), and the words and the early access code box in a card: no header, footer or
   black DANG MADE bar (the bar was along the top for a while on 2026-10-22) */
body[data-page="prelaunch"] .site-header, body[data-page="prelaunch"] .site-footer,
body[data-page="prelaunch"] .preview-banner { display: none; }
/* Before app.js draws the first page, the header and footer wait too, so they don't flash before the pre-launch page */
body:not([data-page]) .site-header, body:not([data-page]) .site-footer { visibility: hidden; }
body[data-page="prelaunch"] main { padding-bottom: 0; }
.prelaunch {
  max-width: 560px; min-height: 100svh; margin: 0 auto; padding: 48px 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
.prelaunch-logo { height: 130px; width: auto; max-width: 100%; }
/* The words and the code box in a white card under the logo (since 2026-10-22), so they're easier to read */
.prelaunch-card {
  width: 100%; margin-top: 24px; padding: 32px 28px 26px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.prelaunch .page-title { margin: 0 0 12px; }
.prelaunch-card > p:not(.fine) { color: var(--ink-soft); text-wrap: pretty; margin: 0; }
.prelaunch-form { width: 100%; margin: 24px 0 18px; text-align: left; }
.prelaunch-form .btn { height: 46px; min-height: 0; margin: 0; padding: 0 20px; }
.prelaunch-form input::placeholder { text-transform: none; }
@media (max-width: 560px) { .prelaunch-card { padding: 26px 18px 22px; } }
.prelaunch .fine { font-size: 14px; }