/* ============ Carla's Creations ============ */
:root {
  --porcelain: #fffaf8;
  --blush-50: #fdeff1;
  --blush: #f4c6cf;
  --rose: #c94f6d;
  --rose-deep: #a83a57;
  --delft: #2c4a9a;
  --delft-soft: #e7ecf8;
  --gold: #b8913a;
  --gold-soft: #e6d3a3;
  --ink: #2b2333;
  --muted: #6c6274;
  --line: #eadfe2;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --script: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  --body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 14px;
  --shadow: 0 1px 2px rgb(43 35 51 / .06), 0 8px 24px -8px rgb(43 35 51 / .14);
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--chrome, 84px); }
/* Lenis (js/vendor) drives scrolling when it loads; these are its required base rules */
html.lenis, html.lenis body { height: auto; scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--delft); text-decoration-thickness: from-font; text-underline-offset: .18em; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.1; text-wrap: balance; margin: 0; letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 4.2vw, 2.9rem); }
h3 { font-size: 1.3rem; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--delft); outline-offset: 3px; border-radius: 6px; }
.site-footer :focus-visible { outline-color: var(--blush); }   /* delft ring vanishes on the dark footer */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* descriptions: no lonely last word */
.lede, .section-sub, .cta-sub, .steps p, .care li, .about-copy p, details p, #dlgDesc { text-wrap: pretty; }
#heroCount, #ctaCount, .dlg-price { font-variant-numeric: tabular-nums; }

.wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.script { font-family: var(--script); font-weight: 700; }
.eyebrow { color: var(--rose); font-size: 1.6rem; line-height: 1; margin-bottom: .5rem; }
.skip { position: absolute; inset-inline-start: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 99; }
.skip:focus { inset-inline-start: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.5em; border-radius: 999px;
  font: 700 1rem/1 var(--body); text-decoration: none; cursor: pointer;
  border: 2px solid transparent; white-space: nowrap;
  transition-property: background-color, color, transform, box-shadow; transition-duration: .15s; transition-timing-function: ease-out;
}
.btn:active, .chip:active { transform: scale(.96); }
.btn-primary { background: var(--rose); color: #fff; box-shadow: 0 6px 16px -6px rgb(201 79 109 / .6); }
.btn-ghost { border-color: var(--delft); color: var(--delft); background: transparent; }
.btn[disabled] { background: var(--line); color: var(--muted); box-shadow: none; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

/* ---------- Header ---------- */
/* The bar sits ON the top edge. The notch/status bar is paid for with padding INSIDE it, not with
   a `top` offset — an offset left a strip of the page showing above the bar on a phone. */
.site-header {
  position: sticky; top: 0; z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgb(255 250 248 / .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .55rem; min-width: 0; text-decoration: none; color: var(--ink); }
.brand-mark { width: 56px; height: 56px; flex: none; filter: drop-shadow(0 2px 4px rgb(43 35 51 / .12)); }
/* the name gives way before the Menu button does, so the bar never wraps to two rows */
.brand-name { font-family: var(--script); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav { display: flex; align-items: center; gap: .25rem; }
.nav a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .975rem; white-space: nowrap;
  padding: .55rem .8rem; border-radius: 999px; transition-property: background-color, color; transition-duration: .15s;
}
/* Cart is the main action: the same filled button on every page */
.nav .nav-cta {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--rose); color: #fff; padding-inline: 1.2rem; margin-inline-start: .5rem;
  box-shadow: 0 6px 16px -6px rgb(201 79 109 / .6);
}
.nav .nav-cta svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the selected pill, set by app.js as you scroll (and by aria-current="page" on the shop) */
.site-header .nav a[aria-current]:not(.nav-cta) { background: var(--blush); color: var(--rose-deep); }
.menu-btn {
  display: none; min-height: 44px; padding: 0 1rem; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff; font: 700 .95rem var(--body); color: var(--ink); cursor: pointer;
  transition-property: background-color, border-color, color; transition-duration: .15s; transition-timing-function: ease-out;
}
/* open is a state you can see on the button itself, not only in the panel below it */
.menu-btn[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Hero ---------- */
/* hero + promises share one screen and one background */
.first-screen {
  display: flex; flex-direction: column;
  min-height: calc(100svh - var(--chrome, 120px));
  background:
    url("../images/hero-bg.jpg") center / cover no-repeat,
    var(--porcelain);
}
.hero {
  position: relative; overflow: hidden; flex: 1; display: flex; align-items: center;
  /* soft wash behind the headline so the left-edge flowers don't fight the text */
  background: linear-gradient(90deg, rgb(255 250 248 / .55) 0%, rgb(255 250 248 / .78) 30%, rgb(255 250 248 / .35) 60%, transparent 85%);
}
.hero > .wrap { position: relative; z-index: 1; width: 100%; }
/* The drawn feeder hangs on its two chains from the top edge of the section, centred behind the
   words rather than off to one side. The slot copies the .wrap width and the column split beside
   it, so the art lands in the middle of the text column at any window size. */
.hang {
  position: absolute; z-index: 0; inset: 0 0 auto 0; pointer-events: none;
  max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem);
}
.hang-art {
  justify-self: center; width: clamp(240px, 27vw, 400px); height: auto;
  opacity: .22; transform-origin: 50% 0;
  filter: drop-shadow(0 18px 24px rgb(44 74 154 / .12));
}
@media (prefers-reduced-motion: no-preference) {
  .hang-art { animation: hang-sway 7s ease-in-out infinite alternate; }
}
@keyframes hang-sway {
  from { transform: rotate(-1.1deg); }
  to   { transform: rotate(1.1deg); }
}
.hero-inner {
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2rem, 5vh, 4rem);
}
.hero h1 { font-size: clamp(2.75rem, 6.4vw, 4.75rem); font-weight: 600; }
.hero .eyebrow { font-size: 1.9rem; }
.lede { margin-top: 1.25rem; font-size: 1.175rem; color: var(--muted); max-width: 33em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero-note { display: flex; align-items: center; gap: .5rem; margin-top: 1.5rem; color: var(--muted); font-size: .95rem; font-weight: 600; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #4f9a6a; box-shadow: 0 0 0 4px rgb(79 154 106 / .18); }

.hero-art { position: relative; aspect-ratio: 1 / .88; max-width: min(540px, 62svh); width: 100%; justify-self: center; }
/* frames use the photos' own 3:4 shape, so the whole feeder shows */
.hero-art .arch { aspect-ratio: 3 / 4; height: auto; background: #fff; }
.hero-art .arch img { height: 100%; object-fit: contain; }
.arch {
  margin: 0; overflow: hidden; background: var(--blush-50);
  border-radius: 999px 999px var(--radius) var(--radius);
  outline: 1.5px solid var(--gold); outline-offset: 6px;
}
.arch img { width: 100%; height: 100%; object-fit: cover; }
.arch-main { position: absolute; left: 21%; top: 4%; width: 58%; z-index: 2; box-shadow: var(--shadow); }
.arch-left { position: absolute; left: 0; top: 30%; width: 34%; }
.arch-right { position: absolute; right: 0; top: 20%; width: 34%; }
.tag-1of1 {
  position: absolute; z-index: 3; right: 1%; bottom: 0;
  background: #fff; color: var(--rose); font-size: 1.45rem; line-height: 1;
  padding: .45rem .9rem .55rem; border-radius: 999px; box-shadow: var(--shadow);
  transform: rotate(-5deg);
}

/* ---------- Promises ---------- */
.promises { background: rgb(255 255 255 / .72); backdrop-filter: blur(8px); border-top: 1px solid rgb(234 223 226 / .9); border-bottom: 1px solid var(--line); }
.promise-list {
  list-style: none; margin-block: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .75rem 2rem; padding-block: 1.1rem;
}
.promise-list li { display: flex; align-items: center; gap: .75rem; font-size: .95rem; color: var(--muted); line-height: 1.35; }
.promise-list strong { color: var(--ink); display: block; }
.promise-list svg { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--delft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(4rem, 8vw, 6.5rem); }
/* home sections each fill one screen below the sticky header (--chrome/--footer set in app.js) */
.screen { min-height: calc(100svh - var(--chrome, 88px)); display: flex; align-items: center; padding-block: clamp(2.5rem, 7svh, 6.5rem); }
.screen > .wrap { width: 100%; }
.cta-band.screen { min-height: calc(100svh - var(--chrome, 88px) - var(--footer, 0px)); }   /* CTA + footer share the last screen */
/* fallback snap if Lenis didn’t load (with Lenis, app.js steps between screens) */
@media (min-width: 821px) and (min-height: 600px) {
  html:not(.lenis) { scroll-snap-type: y proximity; }
  .first-screen, .screen { scroll-snap-align: start; }
}
.section-head { text-align: center; max-width: 40rem; margin-inline: auto; margin-bottom: 2.5rem; }
.section-head.left { text-align: left; margin-inline: 0; }
.section-head h2::after {
  content: ""; display: block; width: 72px; height: 2px; margin: 1rem auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.section-head.left h2::after { margin-inline-start: 0; background: linear-gradient(90deg, var(--gold), transparent); }
.section-sub { margin-top: 1rem; color: var(--muted); }

/* ---------- Chips (applied filters) ---------- */
.chip {
  min-height: 40px; padding: 0 1.1rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  font: 600 .925rem var(--body); white-space: nowrap;
  transition-property: border-color, background-color, color, transform; transition-duration: .15s; transition-timing-function: ease-out;
}

/* ---------- Product grid ---------- */
/* --rows is how many rows of feeders make one page; app.js reads it, and the phone layout
   raises it to 3 because a phone scrolls anyway */
.grid { --rows: 2; display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: clamp(.45rem, .8vw, .7rem); align-content: start; }
/* each cup sits on its own white card: 8px padding, so the photo's radius is 16 − 8 */
.card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border-radius: 16px; padding: 8px;
  box-shadow: 0 1px 2px rgb(43 35 51 / .05), 0 10px 24px -16px rgb(43 35 51 / .35);
  transition-property: transform, box-shadow; transition-duration: .25s; transition-timing-function: ease-out;
}
/* the title is the link; it covers the card so anywhere but the Buy button opens the feeder */
.card-link { color: inherit; text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card:has(.card-link:focus-visible) { outline: 3px solid var(--delft); outline-offset: 3px; }
.card:has(.card-link:focus-visible) .card-quick { opacity: 1; translate: none; }
.card-photo {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px;
  background: var(--blush-50); outline: 1px solid oklch(0 0 0 / .1); outline-offset: -1px;
}
.card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card-photo::after {
  content: ""; position: absolute; inset: 5px; border: 1px solid rgb(230 211 163 / .85);
  border-radius: 3px; pointer-events: none;   /* inset 5px → radius 8 − 5 */
}
.badge {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  background: rgb(255 255 255 / .94); color: var(--rose-deep);
  font: 700 .75rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase;
  padding: .45rem .65rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 2px 8px -4px rgb(43 35 51 / .35);
}
/* hint that the photo opens: motion is the extra, the pointer and the focus ring carry the meaning */
.card-quick {
  position: absolute; z-index: 1; inset-inline: 8px; bottom: 8px; pointer-events: none;
  display: grid; place-items: center; min-height: 38px; border-radius: 999px;
  background: rgb(255 255 255 / .95); color: var(--rose-deep);
  font: 700 .8rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase;
  opacity: 0; translate: 0 6px;
  transition-property: opacity, translate; transition-duration: .2s; transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.card-body { flex: 1; display: flex; flex-direction: column; padding: .6rem .45rem .2rem; }
.card-name { font: 600 1.05rem/1.25 var(--display); min-width: 0; text-wrap: balance; }
/* Cards carry only the name, the price and the button: chain and description live in the popup,
   so two rows always fit above the fold. The photo takes whatever height is left once the
   header, the toolbar and the page buttons have had theirs. */
.card-photo {
  aspect-ratio: auto;
  height: clamp(96px, (100vh - var(--chrome, 88px) - 444px) / 2, 300px);
}
/* price and button sit on the baseline of every card, however long the name ran */
.card-price { margin-top: auto; padding-top: .5rem; font: 700 1.25rem var(--body); color: var(--rose-deep); font-variant-numeric: tabular-nums; }
.card-buy { position: relative; z-index: 1; width: 100%; min-height: 42px; margin-top: .4rem; font-size: .95rem; padding-inline: .9rem; }

.card.is-sold .card-photo img { filter: grayscale(.85) brightness(1.05); }
.card.is-sold .badge { background: var(--ink); color: #fff; }
.card.is-sold .card-price { color: var(--muted); text-decoration: line-through; }

/* ---------- Pages of feeders (no endless scroll) ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.pg {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  min-width: 40px; min-height: 40px; padding: 0 .55rem;
  border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--ink); font: 700 .95rem var(--body); font-variant-numeric: tabular-nums; cursor: pointer;
  transition-property: background-color, color, box-shadow, scale;
  transition-duration: .15s; transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
.pg-step { padding-inline: .85rem; }
.pg-step svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pg-step:first-child svg { order: -1; }
@media (hover: hover) { .pg:hover:not([disabled]):not([aria-current]) { background: var(--blush-50); box-shadow: inset 0 0 0 1.5px var(--rose); } }
.pg:active:not([disabled]) { scale: .96; }
.pg[aria-current="page"] { background: var(--rose); color: #fff; box-shadow: none; cursor: default; }
.pg[disabled] { color: var(--muted); opacity: .5; cursor: not-allowed; }
.pg-nums { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0 .25rem; padding: 0; }
.pg-gap { color: var(--muted); padding: 0 .15rem; }
@media (max-width: 420px) { .pg-step span { display: none; } .pg-step { padding-inline: .55rem; } }

.empty {
  grid-column: 1 / -1; text-align: center; color: var(--muted);
  background: #fff; border-radius: 18px; padding: clamp(2.5rem, 7vw, 4rem) 1.5rem; box-shadow: var(--shadow);
}
.empty-mark { font: 700 2.4rem/1 var(--script); color: var(--blush); margin-bottom: .35rem; }
.empty .btn { margin-top: 1.25rem; }

/* ---------- How ---------- */
.how { position: relative; overflow: hidden; background: var(--delft-soft); }
.how > .wrap { position: relative; z-index: 1; }
/* Here the feeder hangs the whole height of the section, down the middle of the page. The white
   "Caring for your feeder" card sits in front of it and crops it, which is what reads as depth. */
.how .hang { inset: 0; grid-template-columns: 1fr; }
.how .hang-art {
  /* as tall as one screen allows, with a little room top and bottom, so the whole drawing
     — chains, cup and saucer — is inside the section and nothing is cut off */
  align-self: start; justify-self: center;
  height: min(calc(100svh - var(--chrome, 88px) - 2.5rem), 100%);
  width: auto; max-width: calc(100% - 2rem);
  object-fit: contain; object-position: center top;
  /* a touch fainter than before, so the drawing stays behind the words instead of competing */
  opacity: .22;
}
.how-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 4rem; align-items: start; }
.how .section-head { grid-column: 1 / -1; margin-bottom: 0; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.75rem; counter-reset: step; }
.steps li { position: relative; padding-inline-start: 3.5rem; counter-increment: step; }
.steps li::before {
  content: counter(step); position: absolute; inset-inline-start: 0; top: -.15rem;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--delft); border: 1.5px solid var(--gold);
  font: 600 1.15rem var(--display);
}
/* Readability over the blue panel and the drawing behind it: the step titles get a size of their
   own, and the body text drops the grey for near-ink (about 10:1 against the panel instead of 4.6)
   with a slightly roomier line. */
/* a soft white halo lifts the words off the chain and the saucer pattern behind them — it reads
   as crisper text, not as a box */
.steps h3, .steps p { text-shadow: 0 0 7px rgb(255 255 255 / .9), 0 0 2px rgb(255 255 255 / .95); }
.steps h3 { margin-bottom: .4rem; color: var(--delft); font-size: 1.45rem; }
.steps p { color: #352c40; font-size: 1.09rem; line-height: 1.62; max-width: 34rem; }
.care { background: #fff; border: 0; border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow); }
/* It is a <details> so the phone layout can collapse it, but on a desktop it stays open and reads
   as the plain card it always was: no marker, nothing that looks pressable. */
.care > summary { display: block; padding: 0; margin-bottom: 1rem; cursor: default; font-weight: inherit; }
.care > summary::after { content: none; }
.care > summary h3 { margin: 0; }
.care ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .9rem; }
.care li { padding-inline-start: 1.6rem; position: relative; color: #463d52; }
.care li::before { content: "♡"; position: absolute; inset-inline-start: 0; color: var(--rose); }
.care strong { color: var(--ink); }

/* ---------- About ---------- */
.about-inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.about-photo { aspect-ratio: 3 / 4; max-width: 400px; width: 100%; justify-self: center; }
.about-copy { display: grid; gap: 1.1rem; max-width: 36rem; }
.about-copy h2 { margin-bottom: .25rem; }
.about-copy p:not(.eyebrow):not(.signature) { color: var(--muted); }
.signature { color: var(--delft); font-size: 2rem; }

/* ---------- FAQ ---------- */
.faq { background: var(--blush-50); }
/* pin the FAQ to the top so opening an answer only grows it downward */
.faq.screen { align-items: flex-start; }
.faq-inner { display: grid; grid-template-columns: .9fr 1.2fr; gap: 2rem 4rem; align-items: start; }
.faq-list { display: grid; gap: .75rem; }
/* Left column: the heading, then a little shelf of framed cups. The frames reuse .arch from the
   hero, so the gold outline and arched top match. Heights come from the screen, so the cluster
   grows on a tall monitor and gets out of the way on a short laptop. */
.faq-aside { display: grid; align-content: start; }
.faq-art { margin-top: clamp(1rem, 4vh, 2.5rem); max-width: 26rem; }
.faq-cups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: start; }
.faq-cup { aspect-ratio: 3 / 4; height: auto; background: #fff; box-shadow: var(--shadow); }
.faq-cup img { height: 100%; object-fit: contain; }
/* staggered like cups hanging at different lengths */
.faq-cup:nth-child(1) { margin-top: 1.5rem; }
.faq-cup:nth-child(3) { margin-top: 2.75rem; }
.faq-art-note { margin-top: clamp(1.25rem, 3.5vh, 2.25rem); }
.faq-art-note .script { font-size: 1.5rem; color: var(--rose); }
/* the arrow slides a little on hover; 2px stroke to match the 700-weight label */
.faq-art-btn { margin-top: .5rem; background: #fff; }
.faq-art-btn svg {
  width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: translate .15s ease-out;
}
details { background: #fff; border-radius: var(--radius); border: 1px solid var(--line); }
summary {
  list-style: none; cursor: pointer; padding: 1.1rem 1.25rem; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 1.6rem/1 var(--display); color: var(--rose); transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding: 0 1.25rem 1.2rem; color: var(--muted); }

/* ---------- Socials ---------- */
.socials { display: flex; gap: .75rem; }
.socials a { font-weight: 700; }

/* ---------- Shop page: filter sidebar + results ---------- */
.shop-main { background: linear-gradient(var(--blush-50), var(--porcelain) 380px); }
/* the shop runs wider than the home page, so more cups fit on a row */
.shop-layout {
  max-width: 1340px;
  display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start; padding-block: 1.25rem 2rem;
  /* the filter panel's dark band and the line under the feeder count are the same height,
     so the two columns start on one edge and their first rules line up */
  --bar: 3.25rem;
}
/* app.js gives this an exact height: it ends on the bottom edge of the second row of
   feeders, not level with the page buttons. It never scrolls inside itself. */
/* the panel starts BELOW the rule under the feeder count: the top edge of its dark band sits
   on that line, so both columns share one horizontal edge. app.js sets the exact pad from the
   real height of the results bar; var(--bar) is the no-JS fallback. */
.shop-side { display: flex; padding-top: var(--bar); }
.filter-panel { flex: 1; display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.filter-form { flex: 1; display: flex; flex-direction: column; }
/* dark band across the top, the way shop sidebars label themselves */
/* the fallback matters: in the phone drawer this form is moved out of .shop-layout,
   where --bar is declared, so without it the dark band collapses to its text height */
.filter-head {
  flex: none; box-sizing: border-box; min-height: var(--bar, 3.25rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--ink); color: #fff; padding: .35rem 1.1rem;
}
.filter-head h2 { font: 600 1.3rem/1.2 var(--display); }
.filter-head .link-btn { color: var(--blush); }
/* the facets share out whatever height is spare, so the dividers space themselves evenly */
.filter-body { flex: 1; display: flex; flex-direction: column; padding: .2rem 1.1rem .9rem; }

.link-btn {
  background: none; border: 0; padding: .35rem 0; cursor: pointer;
  font: 700 .9rem var(--body); color: var(--delft);
  text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: .18em;
}
.facet { flex: 1 1 auto; border: 0; margin: 0; padding: .35rem 0 .85rem; border-bottom: 1px solid var(--line); min-inline-size: 0; }
.facet:last-of-type { border-bottom: 0; }
.facet legend {
  padding: 1.15rem 0 0; margin-bottom: .75rem;
  font: 700 .8rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
/* Price: two handles on one track, plus boxes you can type into */
.facet-price { padding-bottom: 1.1rem; }
.range { position: relative; height: 28px; margin: .35rem .5rem .1rem; }
/* the track spans only where a thumb's centre can go, so the filled part lines up with the handles */
.range-track {
  position: absolute; inset-inline: 10px; top: 50%; height: 5px; margin-top: -2.5px;
  border-radius: 999px; background: var(--blush-50); box-shadow: inset 0 0 0 1px var(--line);
}
.range-fill { position: absolute; inset-block: 0; border-radius: 999px; background: var(--rose); }
/* both inputs cover the track; only their thumbs take the pointer */
.range input {
  position: absolute; inset-inline: 0; top: 0; width: 100%; height: 28px;
  margin: 0; padding: 0; background: none; appearance: none; pointer-events: none;
}
.range input:focus { outline: none; }
.range input::-webkit-slider-thumb {
  appearance: none; pointer-events: auto; cursor: grab;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  border: 2px solid var(--rose); box-shadow: 0 1px 4px rgb(43 35 51 / .35);
  transition-property: scale; transition-duration: .15s; transition-timing-function: ease-out;
}
.range input::-moz-range-thumb {
  pointer-events: auto; cursor: grab;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  border: 2px solid var(--rose); box-shadow: 0 1px 4px rgb(43 35 51 / .35);
}
.range input:active::-webkit-slider-thumb { scale: 1.1; cursor: grabbing; }
.range input:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--delft); outline-offset: 2px; }
.range input:focus-visible::-moz-range-thumb { outline: 3px solid var(--delft); outline-offset: 2px; }

.price-boxes { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; }
.price-box {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .15rem;
  padding: .45rem .55rem; border-radius: 10px; background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); font-weight: 700; font-size: .9rem;
}
.price-box:focus-within { box-shadow: inset 0 0 0 2px var(--rose); }
.price-box input {
  width: 100%; min-width: 0; border: 0; padding: 0; background: none; color: var(--ink);
  font: 700 .95rem var(--body); font-variant-numeric: tabular-nums;
}
.price-box input:focus { outline: none; }
.price-box input::-webkit-outer-spin-button, .price-box input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.price-to { color: var(--muted); font-size: .85rem; font-weight: 600; }

.check {
  display: flex; align-items: center; gap: .7rem; min-height: 34px; cursor: pointer;
  padding-inline: .5rem; margin-inline: -.5rem; border-radius: 8px;
  transition-property: background-color; transition-duration: .15s;
}
.check input {
  appearance: none; flex: none; width: 20px; height: 20px; margin: 0; cursor: pointer;
  display: grid; place-content: center;
  border: 1.5px solid var(--muted); border-radius: 5px; background: #fff;
  transition-property: background-color, border-color; transition-duration: .15s;
}
.check input::after {
  content: ""; width: 10px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px;
  transform: translateY(-1px) rotate(-45deg); opacity: 0;
}
.check input:checked { background: var(--rose); border-color: var(--rose); }
.check input:checked::after { opacity: 1; }
.check input:focus-visible { outline: 3px solid var(--delft); outline-offset: 2px; border-radius: 5px; }
.check-label { flex: 1; font-weight: 600; font-size: .975rem; line-height: 1.3; }
.check-n { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.check:has(input:disabled) { opacity: .45; cursor: default; }
.check:has(input:disabled) input { cursor: default; }

.results-bar { box-sizing: border-box; min-height: var(--bar, 3.25rem); display: flex; align-items: center; gap: .75rem 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.result-count { margin-inline-end: auto; font: 600 1.35rem/1.2 var(--display); font-variant-numeric: tabular-nums; }
.filter-open {
  display: none; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1.1rem; cursor: pointer;
  border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink);
  font: 700 .95rem var(--body); white-space: nowrap; font-variant-numeric: tabular-nums;
  transition-property: transform; transition-duration: .15s; transition-timing-function: ease-out;
}
.filter-open:active { transform: scale(.96); }
.filter-open svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sort { display: flex; align-items: center; gap: .5rem; font-size: .9rem; font-weight: 700; color: var(--muted); }
.sort select {
  appearance: none; min-height: 40px; padding-block: 0; padding-inline: .9rem 2.2rem; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 999px; color: var(--ink); font: 600 1rem var(--body);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232b2333' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .85rem center / 12px;
  transition-property: border-color; transition-duration: .15s;
}
.applied { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.25rem; }
.applied:empty { display: none; }
.chip-x {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 36px; padding-inline: .9rem .6rem;
  background: var(--blush-50); border-color: var(--blush); color: var(--rose-deep);
}
.chip-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* phone filter drawer: slides in from the leading edge */
.filter-sheet {
  margin: 0; inset-block: 0; inset-inline: 0 auto; width: min(22rem, 88vw); height: 100%;
  max-width: none; max-height: none; padding: 0; border: 0;
  background: var(--porcelain); color: var(--ink); box-shadow: 0 0 60px -10px rgb(43 35 51 / .45);
  flex-direction: column; overscroll-behavior: contain;
}
.filter-sheet[open] { display: flex; animation: sheet-in .28s cubic-bezier(.2, 0, 0, 1); }
@keyframes sheet-in { from { transform: translateX(-100%); } }
.filter-sheet::backdrop { background: rgb(43 35 51 / .55); }
.sheet-body { flex: 1; overflow-y: auto; }   /* the form brings its own header band and padding */
/* sits in the dark band, the way a drawer closes on a phone */
.sheet-close {
  position: absolute; top: calc(.35rem + env(safe-area-inset-top, 0px)); inset-inline-end: .5rem; z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: rgb(255 255 255 / .12); color: #fff;
  transition-property: background-color, transform; transition-duration: .15s; transition-timing-function: ease-out;
}
.sheet-close:active { transform: scale(.96); }
.sheet-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.filter-sheet .filter-head .link-btn { display: none; }   /* the drawer has its own Clear all at the bottom */
.sheet-foot { display: flex; gap: .75rem; padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: #fff; }
.sheet-foot .btn { flex: 1; padding-inline: 1rem; }

/* ---------- Home CTA band ---------- */
.cta-band { background: var(--blush-50); border-top: 1px solid var(--line); }
.cta-inner { text-align: center; display: grid; justify-items: center; gap: .5rem; }
.cta-sub { color: var(--muted); max-width: 34rem; }
.cta-inner .btn { margin-top: 1rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #e9e2ec; padding-block: 1.5rem 1.25rem; }
.footer-inner { display: grid; justify-items: center; gap: .35rem; text-align: center; }
.footer-logo { width: 104px; height: 104px; margin-bottom: .2rem; }
.footer-brand { font: 700 1.65rem/1 var(--script); color: #fff; }
.footer-tag { color: var(--blush); font-size: 1.1rem; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.1rem; margin-top: .5rem; }
.footer-links a, .socials a { color: var(--blush); text-decoration: none; font-weight: 600; font-size: .95rem; }
.footer-links a:hover, .socials a:hover { color: #fff; text-decoration: underline; }
.socials { margin-top: .3rem; }
.fine { font-size: .8rem; color: #b8adbd; margin-top: .45rem; }

/* ---------- Dialog ---------- */
.product-dialog {
  width: min(980px, calc(100% - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: 20px; background: var(--porcelain); color: var(--ink);
  box-shadow: 0 30px 80px -20px rgb(43 35 51 / .45); overscroll-behavior: contain;
}
.product-dialog::backdrop { background: rgb(43 35 51 / .55); backdrop-filter: blur(3px); }
.product-dialog[open] { animation: pop .28s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.dlg-close {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; padding: 0;
  border: 0; background: rgb(255 255 255 / .92); color: var(--ink); cursor: pointer; box-shadow: var(--shadow);
}
.dlg-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dlg-body { display: grid; grid-template-columns: 1fr 1fr; }
.dlg-gallery { background: var(--blush-50); padding: .75rem; display: grid; gap: .75rem; align-content: start; }
.dlg-gallery > img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; outline: 1px solid oklch(0 0 0 / .1); outline-offset: -1px; }   /* dialog 20 − padding 12 */
.dlg-thumbs { display: flex; gap: .5rem; }
.dlg-thumbs button { all: unset; cursor: pointer; width: 64px; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; outline: 2px solid transparent; outline-offset: 2px; }
.dlg-thumbs button[aria-current="true"] { outline-color: var(--rose); }
.dlg-thumbs button:focus-visible { outline-color: var(--delft); }
.dlg-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.dlg-info { padding: clamp(1.5rem, 4vw, 2.75rem); display: grid; gap: 1rem; align-content: start; }
.dlg-info h2 { font-size: clamp(1.9rem, 3.5vw, 2.5rem); }
.dlg-info > p:not(.eyebrow):not(.dlg-price) { color: var(--muted); }
.dlg-price { font: 600 1.6rem var(--display); color: var(--rose-deep); }
.specs { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.25rem; margin: .25rem 0; padding: 1rem 0; border-block: 1px solid var(--line); font-size: .95rem; }
.specs dt { font-weight: 700; }
.specs dd { margin: 0; color: var(--muted); }
.dlg-buy { width: 100%; }
.dlg-ship { font-size: .875rem; }
.dlg-ask { text-align: center; font-size: .95rem; font-weight: 600; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: .8rem 1.2rem; border-radius: 999px; font-weight: 600; z-index: 50;
  box-shadow: var(--shadow); width: max-content; max-width: calc(100vw - 32px); text-align: center; transition: opacity .15s;
}
/* the live region stays in the page while empty, so screen readers announce each new message */
.toast:empty { opacity: 0; padding: 0; box-shadow: none; pointer-events: none; }

/* ---------- Hover (mouse only, so a tap doesn't leave it stuck) ---------- */
@media (hover: hover) {
  .btn-primary:hover, .nav .nav-cta:hover { background: var(--rose-deep); }
  .btn-ghost:hover { background: var(--delft); color: #fff; }
  .faq-art-btn:hover svg { translate: 3px 0; }
  .nav a:not(.nav-cta):hover { background: var(--blush-50); color: var(--rose-deep); }
  .chip:hover { border-color: var(--rose); color: var(--rose-deep); }
  .card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgb(43 35 51 / .06), 0 20px 34px -20px rgb(43 35 51 / .45); }
  .card:hover .card-photo img { transform: scale(1.045); }
  .card:hover .card-quick { opacity: 1; translate: none; }
  .check:has(input:not(:disabled)):hover { background: var(--blush-50); }
  .link-btn:hover { color: var(--rose-deep); }
  .sort select:hover { border-color: var(--rose); }
  .filter-open:hover { background: var(--blush-50); }
  .sheet-close:hover { background: rgb(255 255 255 / .22); }
  .card:hover .card-name { text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: .18em; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .promise-list { grid-template-columns: repeat(2, 1fr); }
  .how-inner, .faq-inner { grid-template-columns: 1fr; }
  .hang { display: none; }            /* one column on phones: the art would land on top of the words */
  /* In one column the cup shelf becomes a slim strip under the heading — no stagger, no button
     (the nav and the CTA band already lead to the shop), so the questions stay near the top. */
  .faq-art { margin-top: 1.25rem; max-width: none; }
  .faq-cups { gap: 1rem; }
  .faq-cups .faq-cup { margin-top: 0; }
  .faq-art-note, .faq-art-btn { display: none; }
}
@media (max-width: 820px) {
  .first-screen { background-image: url("../images/hero-bg-sm.jpg"); background-position: 85% center; }
  .hero { background: rgb(255 250 248 / .6); }
  .menu-btn { display: inline-flex; align-items: center; }
  /* The menu is a panel hanging under the bar, not another row inside it: opening it used to
     grow the sticky header and shove the whole page down a third of a screen. */
  .header-inner { flex-wrap: nowrap; min-height: 64px; }
  /* The panel is always in the layout and is revealed with a clip, not toggled with display:
     a transition can be interrupted half-open, so a quick second tap reverses instead of
     queueing. Opacity is deliberately left out — the menu is never see-through, even mid-wipe. */
  .nav {
    position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: .15rem;
    padding: .5rem var(--gutter) calc(1rem + env(safe-area-inset-bottom, 0px));
    background: var(--porcelain);      /* solid: the menu is read against the page, not through it */
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 30px -24px rgb(43 35 51 / .55);
    max-height: calc(100svh - 100%); overflow-y: auto; overscroll-behavior: contain;
    clip-path: inset(0 0 100% 0); visibility: hidden; pointer-events: none;
    transition-property: clip-path, visibility; transition-duration: .2s; transition-timing-function: cubic-bezier(.2, 0, 0, 1);
  }
  .nav.open { clip-path: inset(0 0 0 0); visibility: visible; pointer-events: auto; }
  .nav a { padding: .8rem 1rem; }
  .nav .nav-cta { margin: .35rem 0 0; text-align: center; justify-content: center; }
  /* ===== One phone screen per section =====
     Every part of the home page is exactly the height of the window below the bar, and the
     phone's own scroll snapping holds it there, so you never see two sections at once.
     Everything below this comment exists to fit each section's words into that height. */
  /* :has keeps this to the home page — the shop is one scroll of feeders and must not snap */
  html:has(.first-screen) { scroll-snap-type: y mandatory; }
  .first-screen, .screen, html:has(.first-screen) .site-footer { scroll-snap-align: start; }
  .first-screen, .screen, .cta-band.screen { min-height: calc(100svh - var(--chrome, 72px)); }
  .screen { padding-block: 1.75rem; }

  /* HERO — the three cups move behind the words as a soft backdrop rather than taking a
     block of their own below them. */
  .hero-inner { grid-template-columns: 1fr; position: relative; padding-block: 1rem; }
  .hero-copy { position: relative; z-index: 1; }
  .hero-art {
    position: absolute; z-index: 0; inset: 50% auto auto 50%; translate: -50% -50%;
    width: min(108%, 430px); max-width: none; opacity: .16; pointer-events: none;
  }
  /* as a backdrop it is a photograph, not a framed print: no gold outline, no shadow, no label */
  .hero-art .arch { outline: 0; box-shadow: none; background: transparent; }
  .hero-art .tag-1of1 { display: none; }
  .promises { display: none; }       /* the four promises are in the FAQ and the About story */

  /* HOW — just the three steps on one screen. The "Caring for your feeder" card is desktop-only:
     on a phone it was the one block that pushed this section past a single screen, and a section
     taller than the snap viewport makes mandatory snap decelerate and stall mid-scroll. The same
     tips live in desktop's version and aren't needed before a purchase, so the card is dropped here. */
  .how-inner { gap: 1.1rem; }
  .how .section-head h2 { font-size: 1.85rem; }
  .how .section-head h2::after { margin-top: .6rem; }
  .steps { gap: .85rem; }
  .steps li { padding-inline-start: 2.6rem; }
  .steps li::before { width: 1.9rem; height: 1.9rem; font-size: .95rem; top: 0; }
  .steps h3 { font-size: 1.12rem; margin-bottom: .1rem; }
  .steps p { font-size: .97rem; line-height: 1.45; }
  .care { display: none; }

  /* ABOUT — the photo floats and the story wraps around it, instead of stacking a tall
     portrait on top of four paragraphs */
  .about-inner { display: block; }
  .about-photo { float: inline-start; width: 36%; max-width: 150px; margin-inline-end: 1.1rem; margin-bottom: .6rem; }
  .about-copy { display: block; max-width: none; }
  .about-copy > * + * { margin-top: .7rem; }
  .about-copy h2 { font-size: 1.7rem; }
  .about-copy p:not(.eyebrow):not(.signature) { font-size: .97rem; line-height: 1.5; }
  .signature { font-size: 1.6rem; }

  /* FAQ — heading, the cup strip, and all five questions on one screen */
  .faq-inner { gap: 1rem; }
  .faq .section-head h2 { font-size: 1.85rem; }
  .faq .section-head { margin-bottom: 0; }
  .faq-art { margin-top: .85rem; }
  .faq-list { gap: .4rem; }
  summary { padding: .7rem 1rem; font-size: .97rem; }
  details p { padding: 0 1rem .9rem; font-size: .94rem; }

  .dlg-body { grid-template-columns: 1fr; }
  .dlg-gallery > img { aspect-ratio: 4 / 4.2; }
  .shop-layout { grid-template-columns: 1fr; padding-top: .75rem; }
  /* Phones scroll, so the photo keeps the cup's own shape instead of being squashed to fit
     two rows on one screen — three rows to a page here (--rows, read by app.js). */
  .grid { --rows: 3; }
  .card-photo { aspect-ratio: 4 / 5; height: auto; }
  .shop-side { display: none; }
  .filter-open { display: inline-flex; flex: 1; justify-content: center; }
  /* Filter + Sort stay in reach while scrolling the cups: one row, equal halves */
  .results-bar {
    position: sticky; top: var(--chrome, 72px); z-index: 5; flex-wrap: wrap; gap: .5rem;
    margin-inline: calc(var(--gutter) * -1); padding: .75rem var(--gutter);
    background: rgb(255 250 248 / .94); backdrop-filter: blur(10px);
  }
  .result-count { order: 3; flex-basis: 100%; font: 600 .9rem var(--body); color: var(--muted); }
  .sort { flex: 1; }
  .sort select { width: 100%; min-height: 44px; }
  .sort span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* thumb-sized rows and buttons */
  .check { min-height: 44px; }
  .pg { min-height: 44px; min-width: 44px; }
  /* iOS Safari zooms the whole page when a focused input is under 16px */
  .price-box input { font-size: 16px; }
  .filter-sheet .filter-head { padding-top: calc(.35rem + env(safe-area-inset-top, 0px)); padding-inline-end: 3.25rem; }
  /* the Buy button rides the bottom of the popup instead of hiding below the description */
  .dlg-info { padding-bottom: 0; }
  .dlg-cta {
    position: sticky; bottom: 0; z-index: 1;
    padding-block: .75rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    background: var(--porcelain); box-shadow: 0 -12px 16px -14px rgb(43 35 51 / .6);
  }
  .dlg-ship { padding-bottom: 1rem; }
}
/* Short phones (iPhone SE and below): the FAQ's decorative cup strip is the one thing that pushes
   that section past a ~667-tall screen. It is aria-hidden flourish, so it gives way first and the
   five questions keep their one screen. Tall phones (>=812) keep the strip, where it fits. A hair
   less section padding buys the other sections room on these short screens too. */
@media (max-width: 820px) and (max-height: 740px) {
  .faq-art { display: none; }
  .screen { padding-block: 1.25rem; }
}
@media (max-width: 520px) {
  .brand-name { font-size: 1.7rem; }
  .brand-mark { width: 46px; height: 46px; }
  /* the hero ran to a screen and a third before the first photo: smaller display sizes and
     tighter rhythm bring the cups up to where a thumb can reach them */
  .hero h1 { font-size: clamp(2.3rem, 11vw, 2.75rem); }
  .hero .eyebrow { font-size: 1.6rem; }
  .lede { margin-top: 1rem; font-size: 1.08rem; }
  .hero-actions { margin-top: 1.5rem; }
  .hero-note { margin-top: 1.1rem; }
  .section { padding-block: 3.25rem; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 1rem .85rem; }
  .card { border-radius: 14px; padding: 7px; }
  .card-photo { border-radius: 7px; }         /* 14 − 7 */
  .card-photo::after { inset: 5px; border-radius: 2px; }
  .card-body { padding: .7rem .35rem .25rem; }
  .card-quick { display: none; }              /* no hover on a phone */
  .card-name { font-size: 1.02rem; }
  .card-price { font-size: 1.15rem; padding-top: .5rem; }
  .card-buy { min-height: 42px; font-size: .9rem; }
  .badge { top: 9px; left: 9px; font-size: .65rem; }
  .hero-actions .btn { flex: 1 1 auto; }
}
/* small phones: shrink the brand rather than let it push the Menu button onto its own row */
@media (max-width: 380px) {
  .brand-name { font-size: 1.45rem; }
  .brand-mark { width: 40px; height: 40px; }
  .menu-btn { padding: 0 .85rem; }
  .grid { gap: .9rem .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- 404 page ---------- */
.not-found { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; }
.not-found img { width: 120px; border-radius: 50%; }
#dlgDesc { white-space: pre-line; }   /* keep the line breaks typed on the admin page */

/* ---------- Contact (home page) ---------- */
.contact-inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2rem 4rem; align-items: center; }
.contact-head { margin-bottom: 0; }
.contact-sub { color: var(--muted); margin-top: 1rem; text-wrap: pretty; }
.cform { display: grid; gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 1.75rem); box-shadow: var(--shadow); }
.cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cfield { display: grid; gap: .3rem; font-weight: 700; font-size: .95rem; }
.cfield input, .cfield textarea {
  width: 100%; font: 400 1rem/1.5 var(--body); color: var(--ink); background: var(--porcelain);
  border: 1.5px solid var(--line); border-radius: 10px; padding: .65rem .8rem;
}
.cfield textarea { resize: vertical; min-height: 7.5rem; }
.cfield input:focus, .cfield textarea:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px rgb(201 79 109 / .15); }
.cform-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
.cform-note { color: var(--muted); font-size: .875rem; }
.cform-status { min-height: 1.5em; font-weight: 600; color: var(--rose-deep); }
.cform-status:empty { display: none; }
.cform-status.is-ok { color: #2f6b3a; }
@media (max-width: 820px) {
  .contact-inner { grid-template-columns: 1fr; gap: 1.25rem; }
  .contact .section-head h2 { font-size: 1.85rem; }
  .contact-sub { margin-top: .6rem; }
}
@media (max-width: 520px) {
  .cform-row { grid-template-columns: 1fr; }
  .cform-foot .btn { width: 100%; }
}

/* ---------- Footer: policies link ---------- */
.fine a { color: inherit; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .35); }
.fine a:hover { color: #fff; }

/* ---------- Policies page ---------- */
.policy { max-width: 46rem; padding-block: clamp(2rem, 6vw, 4rem) clamp(3rem, 8vw, 5rem); }
.policy h1 { font-size: clamp(2.1rem, 5vw, 3rem); }
.policy-intro { margin-top: 1rem; color: var(--muted); font-size: 1.1rem; text-wrap: pretty; }
.policy-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.policy-jump a { padding: .35rem .9rem; border-radius: 999px; background: var(--blush-50); color: var(--rose-deep); font-weight: 700; text-decoration: none; font-size: .95rem; }
.policy-jump a:hover { background: var(--blush); }
.policy-part { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); display: grid; gap: .9rem; scroll-margin-top: var(--chrome, 84px); }
.policy-part h2 { font-size: clamp(1.6rem, 3.5vw, 2rem); margin-bottom: .2rem; }
.policy-part p { text-wrap: pretty; }
.policy-updated { color: var(--muted); font-size: .9rem; margin-top: .5rem; }

/* ---------- Review page ---------- */
.review-page { max-width: 36rem; padding-block: clamp(2rem, 6vw, 4rem); }
.review-page h1 { font-size: clamp(2rem, 5vw, 2.6rem); }
.review-lede { margin-top: .75rem; color: var(--muted); }
.review-page .cform { margin-top: 1.5rem; }
.stars { border: 0; padding: 0; margin: 0; }
.stars legend { font-weight: 700; font-size: .95rem; margin-bottom: .3rem; }
.stars-row { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem; }
.stars-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars-row label { font-size: 2.3rem; line-height: 1; color: var(--line); cursor: pointer; padding: 0 .1rem; transition: color .12s, transform .12s; }
.stars-row input:checked ~ label, .stars-row label:hover, .stars-row label:hover ~ label { color: var(--gold); }
.stars-row input:focus-visible + label { outline: 3px solid var(--delft); outline-offset: 2px; border-radius: 6px; }
.review-done { margin-top: 1.5rem; padding: 1.5rem; background: var(--blush-50); border-radius: var(--radius); text-align: center; }
.review-done .script { font-size: 1.8rem; color: var(--rose); }