/* ==========================================================================
   Perch Play — site styles, following the Perch Play Brand Guidelines v1.0

   Colour: five flat colours at full strength plus charcoal and paper.
     Roughly 60% paper, 25% one lead colour, 15% supporting colours.
     Body copy is charcoal on paper; coral is reserved for primary actions.
     Never tint, shade or gradient the five colours.
   Type:
     Lazy Dog   display — headlines, prices, anything that should feel like
                the logo. Sentence case, leading 0.95–1.05, 32px (24pt) and up.
     MaryKate   subheadings (h3/h4), section labels and short accent notes.
                Never in capitals. The guidelines allow MaryKate once per
                layout; using it for subheadings is the owner's choice.
     Helvetica  paragraphs, UI, buttons, captions. Regular and bold only.
   ========================================================================== */

/* Brand fonts. Put the licensed files in assets/fonts/ (see the README there).
   Until they are present, the fallbacks in the font stacks below are used. */
@font-face {
  font-family: "Lazy Dog";
  src: url("assets/fonts/lazy-dog.woff2") format("woff2"),
       url("assets/fonts/lazy-dog.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "MaryKate";
  src: url("assets/fonts/marykate.woff2") format("woff2"),
       url("assets/fonts/marykate.ttf") format("truetype");
  font-display: swap;
}

:root {
  /* Brand palette */
  --coral: #ED6956;
  --yellow: #FBBD4C;
  --blush: #F3A9B0;
  /* The Sunshine colourway: warm only, no blue or mint. Peach and butter
     stand in where the cool colours used to carry blocks and bands. */
  --peach: #F6B48A;
  --butter: #FDE3B0;
  --charcoal: #2E2B2B;
  /* No pure white anywhere: "paper" is a warm cream, so pages, cards, the
     nav, dialogs and the text on coral all sit in the Sunshine family. */
  --paper: #FFF7EA;

  /* The public pages use only the seven brand colours: hairlines are blue,
     secondary text is charcoal and hover fills are yellow. admin.css swaps
     these back to neutral greys for the internal dashboard. */
  --line: var(--blush);
  --quiet: var(--charcoal);
  --surface: var(--yellow);

  --font-display: "Lazy Dog", "Baloo 2", system-ui, sans-serif;
  --font-accent: "MaryKate", "Patrick Hand", cursive;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --radius: 1.25rem;
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);

  /* Names the admin dashboard (admin.css) is built on, mapped onto the brand.
     The three text colours below are darker so status labels stay readable
     in the internal dashboard; they are not used on public pages. */
  --ink: var(--charcoal);
  --foreground: var(--charcoal);
  --background: var(--paper);
  --card: var(--paper);
  --cream: var(--paper);
  --secondary: var(--surface);
  --muted-foreground: var(--quiet);
  --border: var(--line);
  --input: var(--peach);
  --ring: var(--coral);
  --primary-foreground: var(--paper);
  --moss: var(--butter);
  --moss-deep: var(--charcoal);
  --coral-deep: var(--coral);
  --destructive: #C0392B;
  --sky: #4E7090;
  --tangerine: #A8700F;
  --forest: #3F7F7F;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--line); }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  background-color: var(--paper);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

/* ---------- type ---------- */
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
h1 { font-size: clamp(2.5rem, 5.5vw, 4.25rem); }
h2 { font-size: clamp(2rem, 3.8vw, 2.875rem); }
/* Subheadings are MaryKate. Handwriting has a single weight and a small
   x-height, so it is set regular and a little larger than a bold subhead. */
h3, h4 {
  font-family: var(--font-accent);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
}
h3 { font-size: 1.75rem; }
h4 { font-size: 1.375rem; }

.accent {
  font-family: var(--font-accent);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
/* Section labels: MaryKate, never in capitals. */
.eyebrow {
  font-family: var(--font-accent);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--charcoal);
}
.lead { font-size: 1.1875rem; line-height: 1.55; max-width: 38rem; }
.caption { font-size: 0.8125rem; color: var(--quiet); }
.muted { color: var(--quiet); }
.center { text-align: center; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1.25rem; }
.section { padding-block: 5rem; }
.section-sm { padding-block: 3.5rem; }
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}
.section-head p { max-width: 36rem; margin-top: 0.75rem; }
.stack > * + * { margin-top: 1rem; }
.grid { display: grid; gap: 1.25rem; }

/* Flat brand colour blocks. Text on them is always charcoal. */
.bg-coral { background-color: var(--coral); }
.bg-yellow { background-color: var(--yellow); }
.bg-blush { background-color: var(--blush); }
.bg-peach { background-color: var(--peach); }
.bg-butter { background-color: var(--butter); }
.bg-charcoal { background-color: var(--charcoal); color: var(--paper); }

/* Each page has one lead colour (the guidelines' 25%): home yellow, shop
   mint, learn more blush, contact blue. .band paints it full width behind
   a block that is itself kept to the page width: the shadow carries the
   colour out to the window edges and clip-path trims it to the block. */
.band { background-color: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }
.band-yellow { --band: var(--yellow); }
.band-blush { --band: var(--blush); }
.band-peach { --band: var(--peach); }
.band-butter { --band: var(--butter); }
.page-head.band { margin-bottom: 3rem; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  background: var(--charcoal);
  color: var(--paper);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-weight: 700;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-lg { padding: 1rem 2rem; }
.btn-block { width: 100%; }
/* Primary action: coral, the only colour reserved for it. Text is set large
   and bold so cream on coral meets the large-text contrast standard. */
.btn-cta {
  background-color: var(--coral);
  color: var(--paper);
  font-size: 1.1875rem;
  box-shadow: 0 6px 18px -8px rgba(46, 43, 43, 0.45);
}
.btn-cta:hover { box-shadow: 0 10px 22px -8px rgba(46, 43, 43, 0.5); }
.btn-cta:disabled { opacity: 0.6; transform: none; cursor: not-allowed; }
.btn-outline { border: 2px solid var(--charcoal); color: var(--charcoal); background: transparent; }
/* Inverts on hover, so it reads on paper and on every colour band. */
.btn-outline:hover { background-color: var(--charcoal); color: var(--paper); }
.btn-primary { background-color: var(--charcoal); color: var(--paper); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.link-arrow {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

/* ---------- navigation ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--paper);
  border-bottom: 1px solid var(--line);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.875rem; }
/* 48px tall ≈ 98px wide: above the logo's 90px digital minimum. */
.nav-logo { height: 3rem; width: auto; }
.nav-links { display: none; align-items: center; gap: 2rem; }
.nav-links a, .nav-mobile a { font-weight: 700; font-size: 1rem; }
.nav-links a { padding-block: 0.375rem; border-bottom: 3px solid transparent; }
.nav-links a:hover { border-bottom-color: var(--line); }
.nav-links a.is-active { border-bottom-color: var(--coral); }
.nav-toggle { display: inline-flex; border: 2px solid var(--charcoal); border-radius: 999px; padding: 0.5rem; }
.nav-mobile { display: none; flex-direction: column; border-top: 1px solid var(--line); padding: 0.5rem 1.25rem 1rem; }
.nav-mobile.is-open { display: flex; }
.nav-mobile a { padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.nav-mobile a.is-active { color: var(--coral); }

/* ---------- home: hero ---------- */
.hero { display: grid; gap: 2.5rem; align-items: center; padding-block: 3.5rem 4.5rem; }
.hero h1 { margin-top: 1rem; max-width: 12ch; }
.hero .btn-row { margin-top: 2.25rem; }
.hero-unbox { width: 100%; }

/* ---------- home: moving bar of toys ---------- */
.marquee {
  overflow: hidden;
  padding-block: 0.5rem 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.marquee-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track,
.marquee.is-paused .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  to { transform: translateX(calc(-50% - 0.625rem)); }
}
.marquee-toggle {
  border: 2px solid var(--charcoal);
  border-radius: 999px;
  padding: 0.375rem 0.875rem;
  font-weight: 700;
  font-size: 0.875rem;
}

.product-card {
  display: flex;
  flex-direction: column;
  width: 16rem;
  flex-shrink: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -18px rgba(46, 43, 43, 0.45); }
/* A flat brand-colour stripe; the photo itself stays on paper. */
.product-card-bar { display: block; height: 6px; }
.product-card-img {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.product-card-img img { max-height: 100%; width: auto; object-fit: contain; }
.product-card-body { display: grid; gap: 0.125rem; padding: 1rem 1.125rem 1.25rem; }
.product-card-label { font-size: 0.8125rem; color: var(--quiet); }
.product-card-name { font-weight: 700; font-size: 1.0625rem; }
.product-card-price { font-family: var(--font-display); font-size: 2rem; line-height: 1; margin-top: 0.375rem; }

/* ---------- page header ---------- */
.page-head { padding-block: 3.5rem 2.5rem; }
.page-head h1 { margin-top: 0.75rem; }
.page-head .lead { margin-top: 1.25rem; }
.page-head-note { position: relative; display: inline-block; }
.page-head-note .accent { font-size: 1.625rem; margin-left: 0.75rem; }

/* ---------- shop: product ---------- */
.product { display: grid; gap: 2.5rem; align-items: start; padding-bottom: 4rem; }
.gallery-main {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-3xl);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 1.5rem;
  overflow: hidden;
}
.gallery-main img { max-height: 100%; width: auto; object-fit: contain; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; }
.gallery-thumbs button {
  aspect-ratio: 1 / 1;
  border: 2px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.25rem;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-thumbs button[aria-pressed="true"] { border-color: var(--charcoal); }
.gallery-thumbs img { max-height: 100%; object-fit: contain; }

.buy h2 { margin-top: 0.5rem; }
.price { font-family: var(--font-display); font-size: 3rem; line-height: 1; margin-top: 1rem; }
.tag {
  display: inline-block;
  background: var(--yellow);
  border-radius: 999px;
  padding: 0.25rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 700;
}
.buy-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.buy p.desc { margin-top: 1.25rem; }
.qty-row { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; font-weight: 700; }
.qty { display: flex; align-items: center; gap: 0.25rem; border: 2px solid var(--charcoal); border-radius: 999px; padding: 0.25rem; }
.qty button { border-radius: 999px; padding: 0.5rem; display: inline-flex; }
.qty button:hover { background: var(--surface); }
.qty .val { width: 2rem; text-align: center; }
/* Colour variants. Each swatch shows three of the colourway's bird
   colours (--a, --b, --c) in flat segments. */
.variants { margin: 1.5rem 0 0; border: 0; padding: 0; min-inline-size: 0; }
.variants-legend { padding: 0; font-weight: 700; }
.variants-legend span { font-weight: 400; color: var(--quiet); }
.variant-list { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 0.75rem; }
.variant {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  min-width: 5.75rem;
  padding: 0.625rem 0.75rem 0.5rem;
  border: 2px solid var(--line);
  border-radius: 1rem;
  background: var(--paper);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--charcoal);
  cursor: pointer;
}
.variant:hover { border-color: var(--charcoal); }
.variant[aria-pressed="true"] { border-color: var(--charcoal); box-shadow: inset 0 0 0 1px var(--charcoal); }
.variant:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.variant-swatch {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: conic-gradient(var(--a) 0 120deg, var(--b) 0 240deg, var(--c) 0);
  box-shadow: inset 0 0 0 1px rgba(46, 43, 43, 0.12);
}
.variant-soon {
  padding: 0.2em 0.5em;
  border-radius: 999px;
  background: var(--yellow);
  font-size: 0.6875rem;
  line-height: 1;
}
.variant-note { margin-top: 0.625rem; font-size: 0.875rem; color: var(--quiet); }
/* Choosing a set is a bigger decision than choosing a colour, so these two
   sit wider and carry their price underneath the name. */
.set-list .variant-set { align-items: flex-start; min-width: 10rem; flex: 1 1 10rem; padding: 0.75rem 0.875rem; gap: 0.125rem; }
.variant-sub { font-size: 0.8125rem; font-weight: 400; color: var(--quiet); }
.buy .btn-block { margin-top: 1.25rem; }
.fineprint { margin-top: 0.875rem; font-size: 0.8125rem; color: var(--quiet); text-align: center; }
.fineprint a { text-decoration: underline; }
/* The wait is part of the price: say it next to the price, not only in the
   shipping policy. */
.made-to-order {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--butter);
  font-size: 0.9375rem;
}

/* Two fields side by side in the delivery form (city and state). */
.field-row { display: grid; gap: 1rem; }
@media (min-width: 480px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

/* Shown in place of the buy button once a payment has gone through. */
.pay-done {
  margin-top: 1.25rem;
  padding: 1.25rem 1.5rem;
  border: 2px solid var(--charcoal);
  border-radius: var(--radius);
  background: var(--butter);
}
.pay-done p { margin-top: 0.5rem; }
.pay-done .caption { margin-top: 0.75rem; }

.ship-note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: 1.5rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.9375rem;
}

/* ---------- shared cards / lists ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.card h3 { margin-top: 0.875rem; }
.card p { margin-top: 0.5rem; color: var(--quiet); }
.card .icon { width: 1.75rem; height: 1.75rem; color: var(--charcoal); }
.icon-dot {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-counts { display: grid; gap: 1rem; margin-top: 2rem; }
.box-count { border-radius: var(--radius-3xl); padding: 1.75rem; }
.box-count .n { font-family: var(--font-display); font-size: 3.5rem; line-height: 1; }
.box-count p { margin-top: 0.5rem; font-weight: 700; }


.steps { display: grid; gap: 1rem; counter-reset: step; }
.step { display: flex; gap: 1rem; align-items: flex-start; }
.step::before {
  counter-increment: step;
  content: counter(step);
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--coral);
  color: var(--paper);
  font-weight: 700;
  font-size: 1.125rem;
}

.figure-round { border-radius: var(--radius-3xl); border: 1px solid var(--line); background: var(--paper); overflow: hidden; }
.figure-round img { width: 100%; height: auto; }

.checks { display: grid; gap: 0.75rem; }
.checks li { display: flex; gap: 0.75rem; align-items: flex-start; }
.checks li::before {
  content: "";
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  border-radius: 999px;
  background: var(--peach);
  box-shadow: inset 0 0 0 5px var(--peach), inset 0 0 0 20px var(--charcoal);
}

.split { display: grid; gap: 2.5rem; align-items: center; }

/* A single idea set big on a colour block — "display over accent colour". */
.statement { border-radius: var(--radius-4xl); padding: 3rem 2rem; text-align: center; }
.statement p.display { font-size: clamp(2rem, 4vw, 3rem); max-width: 22ch; margin-inline: auto; }
.statement footer { margin-top: 1rem; font-weight: 700; }

/* ---------- learn more ---------- */
.story-block { display: grid; gap: 2.5rem; align-items: center; }
.story-block + .story-block { margin-top: 5rem; }
.story-block h2 { margin-bottom: 1.25rem; }
.story-block .stack p { color: var(--charcoal); }
.story-art { border-radius: var(--radius-4xl); padding: 2rem; display: flex; justify-content: center; align-items: center; min-height: 18rem; }
.story-art img { max-height: 22rem; width: auto; border-radius: var(--radius); }
.pillars { display: grid; gap: 1rem; margin-top: 1.5rem; }
.pillar { border-left: 4px solid var(--blush); padding-left: 1rem; }
.pillar b { display: block; }
.pillar span { color: var(--quiet); }

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: 1.25rem; }
.contact-card { border: 1px solid var(--line); border-radius: var(--radius-3xl); padding: 1.75rem; }
.contact-card .big { display: block; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.625rem); line-height: 1; margin-top: 0.75rem; word-break: break-word; }
.contact-card .big.email { font-size: clamp(1.5rem, 3vw, 2rem); }
.contact-card .btn-row { margin-top: 1.25rem; }
.placeholder {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  color: var(--quiet);
  font-style: italic;
}

/* ---------- footer ---------- */
.site-foot { background: var(--charcoal); color: var(--paper); padding-block: 3.5rem 2rem; }
.foot-grid { display: grid; gap: 2rem; }
/* The logo sits on paper, the lightest colour in the palette. */
.foot-plate { display: inline-block; background: var(--paper); border-radius: var(--radius); padding: 1rem 1.25rem; }
.foot-plate img { height: 4rem; width: auto; }
.foot-grid p { margin-top: 1rem; max-width: 22rem; opacity: 0.85; }
.foot-grid h4 { font-size: 1.375rem; margin-bottom: 0.5rem; }
.foot-links { display: grid; gap: 0.5rem; }
.foot-links a:hover { text-decoration: underline; }
.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 247, 234, 0.2);
  font-size: 0.8125rem;
  opacity: 0.8;
}
.foot-admin { text-decoration: underline; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.foot-legal a { text-decoration: underline; }

/* ---------- legal pages ----------
   Privacy, terms, refunds and shipping: long-form reading, so a narrow
   measure and plain, well-spaced headings. */
.legal { padding-bottom: 5rem; }
.legal > * { max-width: 46rem; } /* left-aligned under the page heading */
.legal .updated { font-size: 0.875rem; color: var(--quiet); }
.legal h2 { font-size: clamp(1.625rem, 3vw, 2rem); margin-top: 2.75rem; }
.legal h3 { margin-top: 1.5rem; }
.legal p,
.legal ul,
.legal ol,
.legal table { margin-top: 0.875rem; }
.legal ul { list-style: disc; padding-left: 1.25rem; }
.legal ol { list-style: decimal; padding-left: 1.25rem; }
.legal li + li { margin-top: 0.375rem; }
.legal a { text-decoration: underline; }
.legal table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.legal th,
.legal td { text-align: left; vertical-align: top; padding: 0.625rem 0.75rem; border: 1px solid var(--line); }
.legal th { background: var(--butter); }
.legal-table { overflow-x: auto; }
.legal-toc { margin-top: 1.5rem; padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); }
.legal-toc ol { margin-top: 0.5rem; }
/* Facts only the business can supply. Loud on purpose: none of these may
   go live unfilled. Search the files for class="fill-in" to find them all. */
.fill-in {
  background: var(--yellow);
  color: var(--charcoal);
  padding: 0 0.3em;
  border-radius: 0.25em;
  outline: 2px dashed var(--coral);
  outline-offset: 1px;
}

/* ---------- waitlist dialog ---------- */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(46, 43, 43, 0.55);
}
.dialog-backdrop.is-open { display: flex; }
.dialog {
  width: 100%;
  max-width: 28rem;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--radius-3xl);
  background-color: var(--paper);
  padding: 1.75rem;
  box-shadow: 0 25px 50px -12px rgba(46, 43, 43, 0.4);
}
/* Dialog titles are subheadings, so MaryKate like the rest. */
.dialog h3 { font-size: 1.875rem; }
.dialog .dialog-desc { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--quiet); }
.dialog-close { float: right; border-radius: 999px; padding: 0.25rem; color: var(--quiet); }
.dialog-close:hover { background-color: var(--surface); }
.field { display: grid; gap: 0.375rem; }
.field label { font-weight: 700; font-size: 0.875rem; }
.field input {
  width: 100%;
  border-radius: 0.75rem;
  border: 2px solid var(--input);
  background-color: var(--paper);
  padding: 0.625rem 0.875rem;
}
.field input:focus { outline: 3px solid var(--coral); outline-offset: 1px; border-color: var(--charcoal); }
.field .err { font-size: 0.8125rem; font-weight: 700; color: var(--destructive); }
.dialog form { display: grid; gap: 1rem; margin-top: 1.25rem; }
.dialog .consent { font-size: 0.8125rem; color: var(--quiet); }
.dialog .consent a { text-decoration: underline; }
.dialog-done { padding-block: 1.5rem; text-align: center; }
.dialog-done .icon { margin-inline: auto; width: 2.5rem; height: 2.5rem; color: var(--coral); }
.dialog-done h3 { margin-top: 1rem; }
.dialog-done p { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--quiet); }
.dialog-done a { text-decoration: underline; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 200;
  max-width: 22rem;
  border-radius: 1rem;
  border: 1px solid var(--line);
  background-color: var(--paper);
  padding: 0.875rem 1.25rem;
  font-weight: 700;
  font-size: 0.9375rem;
  box-shadow: 0 15px 30px -10px rgba(46, 43, 43, 0.3);
  transform: translateY(1rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.toast.is-error { color: var(--destructive); }
.toast.is-success { color: var(--charcoal); border-left: 5px solid var(--yellow); }


/* ---------- home: open the box ----------
   A 3D scene drawn by unbox.js with three.js: the Perch Play mailer box on
   the table, and the blueprint model of the flock packed inside it
   (perch-model.js, shared with the shop's Colour it yourself). The canvas is
   transparent, so the hero's yellow shows through.

   The packaging photo is the poster until the scene has loaded, and stays if
   it can't. On top sit an invisible full-size button, which opens and closes
   the box and picks birds in the tower, and the birds' name tags, which
   unbox.js keeps beside the tower as it sways. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.unbox { display: grid; gap: 0.75rem; justify-items: center; width: 100%; max-width: 34rem; margin-inline: auto; }
.unbox-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.unbox-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: opacity 0.5s ease;
}
.unbox.is-ready .unbox-poster { opacity: 0; }
.unbox-canvas { position: absolute; inset: 0; }
.unbox-canvas canvas { display: block; width: 100%; height: 100%; }
.unbox-toggle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.unbox-toggle:focus-visible { outline: 3px solid var(--coral); outline-offset: -3px; }

/* Name tags: small paper labels beside each bird in the tower. */
.unbox-tags { position: absolute; inset: 0; pointer-events: none; }
.bird-tag {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.1em 0.5em 0.15em;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(46, 43, 43, 0.18);
  font-family: var(--font-accent);
  font-size: clamp(0.9375rem, 3.4vw, 1.3rem);
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.bird-tag.is-shown { opacity: 1; pointer-events: auto; }
.bird-tag[aria-pressed="true"] { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.bird-tag:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

.unbox-cue {
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--quiet);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.unbox.is-open .unbox-cue,
.unbox.is-static .unbox-cue { opacity: 0; }

.unbox-story { width: 100%; min-height: 7.5rem; }
.unbox-hint { text-align: center; color: var(--quiet); padding-top: 0.5rem; }
.story-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-3xl);
  padding: 1.125rem 1.375rem;
  animation: story-in 0.3s ease;
}
.story-swatch { width: 4.5rem; height: 4.5rem; background: center / contain no-repeat; }
.story-card h3 { font-size: 2rem; }
.story-card .caption { margin-top: 0.125rem; }
.story-card .story-text { margin-top: 0.5rem; }
@keyframes story-in {
  from { opacity: 0; transform: translateY(6px); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .box-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .product-card { width: 18rem; }
}

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .nav-mobile { display: none !important; }
  .hero { grid-template-columns: 1.05fr 1fr; padding-block: 4rem 5rem; }
  .product { grid-template-columns: 1.1fr 1fr; }
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-block.flip .story-art { order: 2; }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .statement { padding: 4rem 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  /* No auto-scrolling for people who ask for less motion: swipe instead. */
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none !important; }
  .marquee-toggle { display: none; }
}

/* ---------- colour it yourself (shop) ----------
   The 3D stage sits on the shop's mint; the controls reuse the variant
   picker's look: blue hairlines, charcoal when chosen. */
.ci-layout { display: grid; gap: 1.75rem; align-items: start; }
.ci-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  border-radius: var(--radius-3xl);
  background: var(--butter);
  overflow: hidden;
}
.ci-canvas { position: absolute; inset: 0; }
.ci-canvas canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.ci-canvas canvas:active { cursor: grabbing; }
.ci-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  font-family: var(--font-accent);
  font-size: 1.5rem;
}
.ci-hint {
  position: absolute;
  top: 0.875rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3rem 0.875rem;
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.ci.is-touched .ci-hint { opacity: 0; }
.ci-stage-bar {
  position: absolute;
  left: 0.875rem;
  right: 0.875rem;
  bottom: 0.875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}
.ci-stage-bar > * { pointer-events: auto; }
.ci-stage-bar .ci-seg { background: var(--paper); }
.ci-round {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--paper);
  border: 2px solid var(--charcoal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ci-round:hover { background: var(--surface); }

.ci-group { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.ci-group + .ci-group { margin-top: 1.5rem; }
.ci-legend { padding: 0; font-weight: 700; }
.ci-status { display: block; font-weight: 400; font-size: 0.9375rem; color: var(--quiet); }

.ci-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.125rem;
  margin-top: 0.625rem;
  padding: 0.25rem;
  border: 2px solid var(--charcoal);
  border-radius: 999px;
}
.ci-stage-bar .ci-seg { margin-top: 0; }
.ci-seg button {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 700;
}
.ci-seg button:hover { background: var(--surface); }
.ci-seg button[aria-pressed="true"] { background: var(--charcoal); color: var(--paper); }

.ci-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.625rem; }
.ci-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.9375rem;
  font-weight: 700;
}
.ci-chip:hover { border-color: var(--charcoal); }
.ci-chip[aria-pressed="true"] { border-color: var(--charcoal); box-shadow: inset 0 0 0 1px var(--charcoal); }
.ci-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(46, 43, 43, 0.2);
}

.ci-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.25rem, 2.5rem));
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.ci-swatch {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(46, 43, 43, 0.2);
}
.ci-swatch:hover { transform: scale(1.08); }
.ci-swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(46, 43, 43, 0.2), 0 0 0 2px var(--paper), 0 0 0 4px var(--charcoal); }
.ci-custom {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.875rem;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}
.ci-custom input {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.ci-custom input::-webkit-color-swatch-wrapper { padding: 0; }
.ci-custom input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.ci-custom input::-moz-color-swatch { border: 0; border-radius: 50%; }
.ci .btn-row { margin-top: 1.75rem; }
.ci-note { margin-top: 0.875rem; }

@media (min-width: 900px) {
  .ci-layout { grid-template-columns: 1.15fr 1fr; gap: 3rem; }
  .ci-stage { aspect-ratio: 4 / 5; }
}