/* ============================================================================
   [SKIN] SAFE TO REWRITE — this client's design
   ----------------------------------------------------------------------------
   AVRI Cakes.

   DIRECTION: quiet, expensive, editorial. The reference points are a good
   patisserie's printed menu and a fashion lookbook, not a home-baking website.
   Three rules hold it together:

     1. HAIRLINES, NOT BOXES. Structure comes from 1px rules and white space.
        Filled tinted panels and drop shadows are what make a site look cheap,
        so there are almost none.
     2. NO EMPTY PICTURE FRAMES. Nothing ever renders a coloured block where a
        photo has not been added yet — those sections either lay out as type or
        do not appear at all. An unfinished site still has to look finished.
     3. TYPE DOES THE WORK. Large serif display, small tracked labels, generous
        leading. Colour is used sparingly: cream ground, espresso text, brown
        for actions, pink only as a fine accent.

   Colours are NOT written here. Every one comes from the CSS variables in
   includes/theme.php, fed by the Appearance screen in the admin panel.

   Written mobile first. Breakpoints: 600 / 780 / 1000 / 1180.

   ⚠ THE LAST BLOCK IN THIS FILE IS THE FORM-FIELD ZOOM GUARD.
     Do not add rules below it. Read the comment there before you touch it.
   ========================================================================= */

/* ---------------------------------------------------------------- reset -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 .45em;
  letter-spacing: -.015em;
}

h1 { font-size: clamp(2.6rem, 10vw, 4.6rem); }
h2 { font-size: clamp(2.05rem, 6.6vw, 3.1rem); }
h3 { font-size: 1.35rem; letter-spacing: -.008em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brown-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pink-dark); }

ul, ol { margin: 0; padding: 0; }

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

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff;
  padding: .7rem 1.1rem;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; color: #fff; }

.is-hidden { display: none !important; }

/* Shown only when JavaScript is running — see includes/head.php. */
.js-only { display: none; }
html.js .js-only { display: block; }
html.js .radio-row.js-only { display: flex; }
html.js .filters.js-only { display: flex; }

/* Without JavaScript the burger has nothing to open, so it is not shown. The
   Order button stays in the header and the menu is repeated in the footer. */
html:not(.js) .burger { display: none; }

/* ------------------------------------------------------------- layout --- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  /* The side gutter. Rows that carry content at BOTH edges — the price list
     above all, where the size is hard left and the price is hard right — were
     running almost into the screen on a phone. 22px was enough for centred
     type and not enough for a ledger. Clamped rather than stepped so it grows
     smoothly instead of jumping at a breakpoint. */
  padding-inline: clamp(26px, 6.5vw, 34px);
}
.wrap-narrow { max-width: 720px; }

/* The header is the one row that cannot afford the wider gutter: logo,
   wordmark, Order button and burger already fill a 320px screen. It keeps the
   old 22px and gains nothing from being pushed in. */
.site-header .wrap { padding-inline: 22px; }

.band { padding: clamp(3.6rem, 10vw, 7.5rem) 0; }
.band-cream { background: var(--cream); }
.band-blush { background: var(--blush); }
.band-brown { background: var(--brown-dark); color: rgba(255,255,255,.8); }
.band-brown h1, .band-brown h2, .band-brown h3 { color: #fff; }
.band-brown a { color: #fff; }

.centre { text-align: center; }

/* The small tracked label that sits above a heading. */
.eyebrow {
  font-size: .69rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brown);
  margin: 0 0 1rem;
}
.band-brown .eyebrow { color: var(--pink-soft); }

.lede {
  text-wrap: pretty;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--body);
  max-width: 56ch;
  margin-inline: auto;
}
.band-brown .lede { color: rgba(255,255,255,.78); }

/* A section header: label, heading, then a hairline that runs the full width.
   The rule is what gives the page its printed-menu rhythm. */
.band-head {
  text-align: center;
  margin-bottom: clamp(2.4rem, 6vw, 4rem);
  padding-bottom: clamp(1.6rem, 4vw, 2.4rem);
  border-bottom: 1px solid var(--line);
}
.band-head h2 { margin-bottom: .5rem; }
.band-brown .band-head { border-bottom-color: rgba(255,255,255,.18); }

.band-foot { text-align: center; margin-top: clamp(2.4rem, 5vw, 3.4rem); }

.centre-note {
  text-align: center;
  margin-top: 2.4rem;
  font-size: .93rem;
  color: var(--soft);
}

.prose { font-size: 1.08rem; line-height: 1.85; }
.prose p { max-width: none; }
/* An opening line set larger, the way a magazine sets a standfirst. */
.prose > p:first-child { font-size: 1.2rem; line-height: 1.65; color: var(--ink); }

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .8rem 1.8rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn-primary { background: var(--brown); color: #fff; }
.btn-primary:hover { background: var(--ink); color: #fff; }

.btn-ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--cream); }
.band-brown .btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.band-brown .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
/* Brown on brown is invisible. On the dark band the primary action inverts. */
.band-brown .btn-primary { background: var(--cream); color: var(--ink); }
.band-brown .btn-primary:hover { background: #fff; color: var(--ink); }

.btn-soft {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-soft:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

.btn-sm { min-height: 42px; padding: .55rem 1.15rem; font-size: .68rem; letter-spacing: .14em; }
.btn-lg { min-height: 56px; padding: 1rem 2.4rem; font-size: .76rem; }
.btn-block { display: flex; width: 100%; }

/* --------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--header-bg) 94%, transparent);
  backdrop-filter: saturate(1.3) blur(12px);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 72px;
  padding-block: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
  min-height: 44px;
}
.brand-logo { width: auto; max-height: 54px; object-fit: contain; }
.brand-text {
  font-family: var(--font-head);
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: .02em;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.brand-text small {
  font-family: var(--font-body);
  font-size: .56rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--soft);
  margin-top: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-desktop { display: none; }

.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }

.header-cta-full { display: none; }
.header-cta-short { display: inline; }

.burger {
  width: 44px; height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 17px; height: 1px;
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------- mobile nav -- */

.mobile-nav {
  position: fixed;
  inset: 72px 0 auto 0;
  z-index: 55;
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  padding: 1.2rem 22px 2rem;
  animation: navIn .2s ease;
}
@keyframes navIn { from { opacity: 0; transform: translateY(-8px); } }

.mobile-nav nav { display: flex; flex-direction: column; }
.mobile-nav nav a {
  padding: 1rem 0;
  font-family: var(--font-head);
  font-size: 1.7rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.mobile-nav-foot { margin-top: 1.6rem; display: grid; gap: 1rem; }
.mobile-nav-link {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--soft);
  text-decoration: none;
}

body.nav-open { overflow: hidden; }

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--hero-m, 74vh);
  /* More above than below, so the block sits a little under the optical centre.
     On a phone that leaves the top of a background photo visible instead of
     the text starting almost at the header. */
  padding: clamp(5.5rem, 20vw, 8rem) 0 clamp(3rem, 9vw, 8rem);
  overflow: hidden;
  isolation: isolate;
}

.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.hero-slide.is-on { opacity: 1; }
.hero-slide[hidden] { display: none; }
.hero-slide picture { display: block; width: 100%; height: 100%; }
.hero-img, .hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero:not(.hero-plain)::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    to right,
    rgba(28,22,17, calc(var(--overlay, .34) + .34)) 0%,
    rgba(28,22,17, var(--overlay, .34)) 58%,
    rgba(28,22,17, calc(var(--overlay, .34) * .45)) 100%);
}
.hero:not(.hero-plain) .hero-inner,
.hero:not(.hero-plain) h1 { color: #fff; }
.hero:not(.hero-plain) .eyebrow { color: rgba(255,255,255,.72); }
.hero:not(.hero-plain) .hero-sub { color: rgba(255,255,255,.88); }
.hero:not(.hero-plain) .hero-meta { color: rgba(255,255,255,.72); border-top-color: rgba(255,255,255,.28); }
.hero:not(.hero-plain) .hero-rule { background: rgba(255,255,255,.45); }
/* The outline button is espresso on espresso once a photo is behind it. */
.hero:not(.hero-plain) .btn-ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.hero:not(.hero-plain) .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ---- No photo uploaded yet ----------------------------------------------
   This is the state the site ships in, so it has to look like a decision
   rather than an omission: a plain cream ground, a hairline, and the type
   doing all of the work. No gradient wash, no grey box. */
.hero-plain {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.hero-inner { position: relative; max-width: 720px; }

.hero-rule {
  display: block;
  width: 54px; height: 1px;
  background: var(--brown);
  margin-bottom: 1.8rem;
}

.hero-inner h1 { margin-bottom: .7rem; text-wrap: balance; }
.hero-sub { text-wrap: pretty; font-size: 1.08rem; line-height: 1.7; max-width: 44ch; }

/* Side by side at every width. On a phone they share the row equally rather
   than sizing to their labels, which is what makes a pair look deliberate. */
.hero-actions {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: .7rem;
  margin-top: 2.2rem;
}
.hero-actions .btn { flex: 1 1 0; min-width: 0; padding-inline: .6rem; text-align: center; }
@media (min-width: 620px) {
  .hero-actions { align-items: center; gap: .8rem; }
  .hero-actions .btn { flex: 0 0 auto; padding-inline: 2.4rem; }
}

.hero-meta {
  margin-top: 2.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  max-width: 44ch;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soft);
}

/* ------------------------------------------------------------- promises -- */

/* Hairlines between the items rather than three floating cards. The rule above
   the set belongs to the grid so it spans the full width once; each item closes
   itself, which keeps the bottom rules aligned however many columns there are. */
.promise-grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
.promise { padding: 2rem 0; border-bottom: 1px solid var(--line); }

/* A section header already draws a rule; two a gap apart read as an empty row. */
.band-head + .promise-grid { border-top: 0; }

.promise-no {
  display: block;
  font-size: .7rem;
  letter-spacing: .2em;
  font-weight: 600;
  color: var(--pink-dark);
  margin-bottom: .9rem;
}
.promise h3 { font-size: 1.5rem; margin-bottom: .45rem; }
.promise p { margin: 0; font-size: .96rem; max-width: 44ch; color: var(--soft); }

/* --------------------------------------------------------- best sellers -- */

.seller-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.seller { display: flex; flex-direction: column; }

.seller-photo { position: relative; margin-bottom: 1.2rem; }
.seller-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-home);
}

/* A favourite with no photo yet. Framed by a rule instead of a picture, so
   the row still reads as a designed set rather than a gap. */
.seller-text { border-top: 1px solid var(--ink); padding-top: 1.4rem; }

.seller-body { display: flex; flex-direction: column; flex: 1; }
.seller-body h3 { font-size: 1.55rem; margin-bottom: .4rem; }
.seller-body p { font-size: .95rem; margin-bottom: 1.3rem; color: var(--soft); }

.seller-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.price { font-family: var(--font-head); font-size: 1.3rem; color: var(--ink); }

.tag {
  display: inline-block;
  padding: .3rem .7rem;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--pink);
  color: var(--pink-dark);
  background: color-mix(in srgb, var(--cream) 88%, transparent);
}
.tag-gf { position: absolute; left: 12px; top: 12px; }
.tag-inline { position: static; align-self: flex-start; margin-bottom: .8rem; }

/* -------------------------------------------------------------- gallery -- */

.photo-grid { display: grid; gap: .7rem; grid-template-columns: repeat(2, 1fr); }
.photo {
  padding: 0; border: 0; margin: 0;
  background: transparent;
  border-radius: var(--radius-gallery);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 1 / 1;
  position: relative;
}
.photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.6,.2,1), opacity .3s ease;
}
.photo:hover img { transform: scale(1.03); opacity: .92; }

.filters {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.filter {
  min-height: 46px;
  padding: .6rem 1.1rem;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soft);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.filter:hover { color: var(--ink); }
.filter.is-on { color: var(--ink); border-bottom-color: var(--ink); }

.gallery-empty { text-align: center; color: var(--soft); margin-top: 2rem; }

/* The About page's photos. auto-fit, so two sit centred rather than huddling
   in the corner of a four-column grid, and ten still lay out sensibly. */
.photo-strip { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 780px) {
  .photo-strip { grid-template-columns: repeat(auto-fit, minmax(0, 260px)); justify-content: center; gap: 1.6rem; }
}

.photo-figure { margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.photo-figure .photo { aspect-ratio: 4 / 5; width: 100%; border-radius: var(--radius-photo); }
.photo-figure figcaption {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--soft);
  text-align: center;
}

/* Nothing uploaded anywhere yet: an honest line of type, never a grey box. */
.empty-card {
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(2.6rem, 8vw, 4.5rem) 1rem;
}
.empty-card p { max-width: 46ch; margin-inline: auto; color: var(--soft); }
/* After the rule above, so the heading keeps its own colour. */
.empty-card .empty-title {
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  color: var(--ink);
  max-width: none;
  margin-bottom: .6rem;
}
.empty-card .btn { margin-top: 1.6rem; }

/* Last-resort fallback. No skin template renders one, and it must never look
   like a coloured hole in the page if a future one does. */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--soft);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------- pricing -- */

.pill-note {
  display: block;
  width: fit-content;
  margin: 0 auto clamp(2rem, 5vw, 3rem);
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--pink);
  color: var(--brown-dark);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
}

/* The price list is the printed menu. No card, no shadow — rules and space. */
.price-card { padding: 0; }
.price-list { list-style: none; }
.price-list li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.price-name { display: flex; flex-direction: column; color: var(--ink); font-size: 1.02rem; }
.price-name small { font-size: .8rem; color: var(--soft); margin-top: 3px; }
.price-dots { flex: 1 1 auto; border-bottom: 1px dotted var(--line); min-width: 14px; }
.price-value {
  font-family: var(--font-head);
  font-size: 1.3rem;
  color: var(--ink);
  white-space: nowrap;
}

.price-note {
  margin-top: 2.2rem;
  text-align: center;
  font-size: .88rem;
  color: var(--soft);
  max-width: 52ch;
  margin-inline: auto;
}

/* ------------------------------------------------- flavours & fillings -- */

.two-col { display: grid; gap: 2.6rem; grid-template-columns: 1fr; }

.chip-card { padding: 0; }
.chip-card h3 {
  font-family: var(--font-body);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brown);
  margin-bottom: 1.1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--ink);
}
/* A set list, the way a menu prints its flavours. */
.chip-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6rem; }
.chip-list li {
  padding: .65rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .97rem;
  color: var(--ink);
}
.chip-list li small {
  display: block;
  font-size: .64rem;
  color: var(--soft);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* --------------------------------------------------- pickup & delivery -- */

.collect { display: grid; gap: 2.4rem; }
.collect-text p { color: rgba(255,255,255,.78); max-width: 50ch; }
.collect-areas {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.2);
}
.collect-areas strong { color: #fff; font-weight: 600; }
.collect-text .btn { margin-top: 1.8rem; }

.collect-card {
  border: 1px solid rgba(255,255,255,.22);
  padding: 2.4rem 1.8rem;
  text-align: center;
}
.collect-address {
  font-family: var(--font-head);
  font-size: 1.9rem;
  color: #fff;
  margin: 0 0 .7rem;
  line-height: 1.25;
}
/* A full sentence, so it is set as one — all caps here would be shouting. */
.collect-small { font-size: .84rem; color: rgba(255,255,255,.6); margin: 0; }

/* ------------------------------------------------------------------ faq -- */

.faq { border-top: 1px solid var(--line); }
/* The section header already draws a rule. Two of them a gap apart read as an
   empty row, so the list drops its own when it follows one. */
.band-head + .faq { border-top: 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.35rem 3rem 1.35rem 0;
  font-family: var(--font-head);
  font-size: 1.35rem;
  color: var(--ink);
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* A plus that becomes a minus — quieter than a chevron. */
.faq-item summary::after,
.faq-item summary::before {
  content: "";
  position: absolute;
  right: .4rem;
  top: 50%;
  background: var(--brown);
  transition: transform .22s ease, opacity .22s ease;
}
.faq-item summary::after  { width: 13px; height: 1px; margin-top: -.5px; }
.faq-item summary::before { width: 1px; height: 13px; margin-top: -6.5px; right: calc(.4rem + 6px); }
.faq-item[open] summary::before { opacity: 0; transform: rotate(90deg); }
.faq-answer { padding: 0 2rem 1.6rem 0; font-size: .97rem; color: var(--soft); max-width: 62ch; }

/* ----------------------------------------------------------- page heads -- */

.page-head {
  text-align: center;
  padding: clamp(3rem, 10vw, 6rem) 0 clamp(2.6rem, 8vw, 4.4rem);
}
.page-head h1 { margin-bottom: .6rem; text-wrap: balance; }
.page-head-note {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: .9rem;
  color: var(--soft);
  max-width: 52ch;
  margin-inline: auto;
}

.page-banner { background: var(--cream); padding-top: clamp(2rem, 5vw, 3.4rem); }
.page-banner-img { width: 100%; border-radius: var(--radius-home); object-fit: cover; }

/* -------------------------------------------------------------- notices -- */

.notice { padding: 1.1rem 0; font-size: .93rem; border-bottom: 1px solid var(--line); }
.notice-ok  { background: var(--blush); color: var(--ink); }
.notice-bad { background: #fbeceb; color: #8c3a36; }

/* ==========================================================================
   ORDER PAGE
   ========================================================================== */

.choose-band { padding-block: clamp(2.2rem, 6vw, 3.4rem); }
/* The chooser and the form are one step, so they sit close together rather
   than with a full band of empty space between them. */
.page-order .choose-band + .band { padding-top: clamp(1.6rem, 4vw, 2.6rem); }

.choose-grid { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--line); }

.choose {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.3rem .2rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: color .18s ease;
}
.choose:hover { color: var(--brown-dark); }
.choose.is-on .choose-text strong { border-bottom: 1px solid var(--pink); }

.choose-mark { flex: none; display: inline-flex; color: var(--brown); }
.choose.is-on .choose-mark { color: var(--pink-dark); }

.choose-text { display: flex; flex-direction: column; min-width: 0; gap: .25rem; }
.choose-text strong {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  align-self: flex-start;
  padding-bottom: 2px;
}
.choose-text small { font-size: .88rem; color: var(--soft); line-height: 1.5; }

/* --- re-order a favourite --- */

.repeat-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(2, 1fr); }
.repeat { display: flex; flex-direction: column; gap: .8rem; text-decoration: none; color: var(--ink); }
.repeat:hover .repeat-img { opacity: .9; }
.repeat:hover .repeat-body strong { color: var(--brown-dark); }
.repeat.is-on .repeat-body strong { border-bottom: 1px solid var(--pink); }

.repeat-photo { display: block; }
.repeat-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-gallery);
  transition: opacity .2s ease;
}

.repeat-body { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.repeat-body strong { font-size: .95rem; font-weight: 500; line-height: 1.35; }
.repeat-body small {
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--soft);
}

/* --- the form --- */

.wrap-form { display: grid; gap: 3rem; max-width: 1120px; }

.order-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-home);
  padding: 1.6rem 1.3rem 2rem;
}

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields that are not rendered. Never remove it — see CLAUDE.md rule 9. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.gf-banner {
  display: grid;
  gap: .3rem;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.8rem;
  border: 1px solid var(--pink);
  border-left-width: 2px;
  font-size: .89rem;
  line-height: 1.6;
}
.gf-banner strong {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pink-dark);
}
.gf-banner span { color: var(--soft); }

.form-step { border: 0; padding: 0; margin: 0 0 2.1rem; }
.form-step legend {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  padding: 0 0 .9rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}
.step-n { flex: none; font-size: .72rem; font-weight: 600; color: var(--pink-dark); }

.field { margin-bottom: 1.2rem; }
.field:last-child { margin-bottom: 0; }

.field > label:not(.check):not(.radio),
.field-label {
  display: block;
  margin-bottom: .45rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.field > label:not(.check):not(.radio) small,
.field-label small { font-weight: 400; letter-spacing: .08em; color: var(--soft); }
.req { color: var(--pink-dark); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field select,
.field textarea {
  width: 100%;
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  transition: border-color .15s ease, background-color .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 130px; }

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%237c6a5a' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ink);
  background: #fff;
  outline: none;
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #b5514d; }

.field input[readonly] { background: var(--blush); color: var(--soft); }

/* THE DATE FIELD — NO-JAVASCRIPT FALLBACK ONLY.
   With scripting on, site.js hides this input and draws the themed calendar
   further down this file. What follows only ever shows for a visitor with
   JavaScript off, where the native field is all there is. The popup a browser
   draws there belongs to the operating system and cannot be styled; the two
   properties that do reach it are set here. */
.field input[type="date"] {
  color-scheme: light;
  accent-color: var(--brown);
  position: relative;
}
.field input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .75;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: .4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a6b4a' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3.2' y='4.8' width='17.6' height='16' rx='1.5'/%3E%3Cpath d='M3.2 9.4h17.6M8 3.2v3.2M16 3.2v3.2'/%3E%3C/svg%3E");
  background-size: 18px 18px;
  background-repeat: no-repeat;
  transition: opacity .15s ease;
}
.field input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* Firefox draws its own, and honours accent-color. */
@supports (-moz-appearance: none) {
  .field input[type="date"] { accent-color: var(--brown); }
}

/* ==========================================================================
   THE CALENDAR
   --------------------------------------------------------------------------
   Built by site.js in place of the native date popup, which the operating
   system draws and no stylesheet can reach. Everything here is the site's own
   palette, so the calendar looks like the rest of the page instead of like
   Windows opening on top of it.

   The trigger is a full-width button, not a narrow input. The native field
   showed an empty "mm/dd/yyyy" in a box sized to the shortest possible date,
   which on a phone read as broken rather than as something to tap.
   ========================================================================== */

.datepick { position: relative; }

.datepick-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  min-height: 52px;
  padding: .8rem 1rem;
  font-family: var(--font-body);
  font-size: 16px;                 /* see the zoom guard at the end of this file */
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.datepick-btn:hover { border-color: var(--brown); }
.datepick-btn:focus-visible {
  outline: none;
  border-color: var(--brown);
  box-shadow: 0 0 0 3px rgba(154,107,74,.16);
}
/* Empty reads as a prompt, not as a filled-in value. */
.datepick-btn.is-empty .datepick-value { color: var(--soft); }
.datepick-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.datepick-icon {
  flex: none;
  width: 20px; height: 20px;
  background: no-repeat center / 20px 20px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a6b4a' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3.2' y='4.8' width='17.6' height='16' rx='1.5'/%3E%3Cpath d='M3.2 9.4h17.6M8 3.2v3.2M16 3.2v3.2'/%3E%3C/svg%3E");
}

.datepick-pop {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  width: min(21rem, calc(100vw - 2.4rem));
  padding: 1rem;
  background: var(--cream, #fbf6f1);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -22px rgba(51,41,31,.5);
}

.datepick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  margin-bottom: .7rem;
}
.datepick-month {
  font-family: var(--font-head);
  font-size: 1.22rem;
  color: var(--ink);
}
.datepick-nav {
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.datepick-nav:hover:not(:disabled) { background: var(--brown); border-color: var(--brown); color: #fff; }
.datepick-nav:disabled { opacity: .3; cursor: default; }

.datepick-dow,
.datepick-grid { display: grid; grid-template-columns: repeat(7, 1fr); }

.datepick-dow {
  gap: 2px;
  margin-bottom: .3rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--line);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soft);
  text-align: center;
}
.datepick-grid { gap: 2px; }

.datepick-day {
  aspect-ratio: 1 / 1;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .13s ease, color .13s ease, border-color .13s ease;
}
.datepick-day:hover:not(:disabled) { background: var(--blush); }
.datepick-day:focus-visible { outline: none; border-color: var(--brown); }
.datepick-day:disabled { color: rgba(51,41,31,.22); cursor: default; }

/* Today is outlined, the chosen day is filled. Two different jobs, so they
   must not look the same. */
.datepick-day.is-today { border-color: var(--brown); }
.datepick-day.is-on,
.datepick-day.is-on:hover { background: var(--brown); border-color: var(--brown); color: #fff; }

/* Inside the lead time. A dot, not a disabled state — she asked for these to
   still come through, so the calendar warns rather than refuses. */
.datepick-day.is-soon { position: relative; }
.datepick-day.is-soon::after {
  content: '';
  position: absolute;
  bottom: 5px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--pink-dark, #a8505f);
}
.datepick-day.is-on.is-soon::after { background: rgba(255,255,255,.85); }

.datepick-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px solid var(--line);
}
.datepick-key {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  color: var(--soft);
}
.datepick-key i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--pink-dark, #a8505f);
}
.datepick-clear {
  background: none;
  border: 0;
  padding: .2rem 0;
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brown);
  cursor: pointer;
  border-bottom: 1px solid currentColor;
}
.datepick-clear:hover { color: var(--ink); }

/* On a narrow screen the popup gets the full field width and drops the fixed
   max, so a 320px phone never scrolls sideways to reach a Saturday. */
@media (max-width: 400px) {
  .datepick-pop { width: 100%; padding: .85rem; }
  .datepick-day { min-height: 34px; font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .datepick-btn, .datepick-nav, .datepick-day { transition: none; }
}

.hint { margin: .5rem 0 0; font-size: .81rem; color: var(--soft); line-height: 1.55; }
.hint-block { padding: .9rem 1rem; border-left: 2px solid var(--line); margin-top: .9rem; }

.field-row { display: grid; gap: 1.2rem; }

.check, .radio {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  min-height: 44px;
  padding: .55rem .2rem;
  cursor: pointer;
  font-weight: 400;
  color: var(--body);
}
.check input, .radio input {
  flex: none;
  width: 19px; height: 19px;
  margin: 3px 0 0;
  accent-color: var(--ink);
}
.check span, .radio span { display: flex; flex-direction: column; }
.radio span small { font-size: .79rem; color: var(--soft); }

.radio-row { display: none; flex-direction: column; gap: 0; }
.radio { border: 1px solid var(--line); padding: .85rem 1rem; background: transparent; }
.radio + .radio { border-top: 0; }
.radio:has(input:checked) { border-color: var(--ink); background: var(--blush); }

.form-foot { margin-top: 2rem; }
.form-small { margin: 1.1rem 0 0; text-align: center; font-size: .8rem; color: var(--soft); }
.form-status { margin: 1.1rem 0 0; font-size: .92rem; text-align: center; }
.form-status:empty { display: none; }
.form-status.is-ok  { color: var(--ink); border: 1px solid var(--pink); padding: .9rem 1rem; }
.form-status.is-bad { color: #8c3a36; border: 1px solid #d7a6a3; padding: .9rem 1rem; }

/* Replaces the whole form once a request has gone through. */
.form-done { text-align: center; padding: 2rem .5rem 1.4rem; }
.form-done h2 { margin: 0 0 .6rem; }
.form-done p { color: var(--soft); max-width: 42ch; margin-inline: auto; }

.form-aside { border-top: 1px solid var(--ink); padding-top: 1.6rem; }
.form-aside h2 {
  font-family: var(--font-body);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brown);
  margin-bottom: 1.4rem;
}
.steps { list-style: none; counter-reset: s; display: grid; gap: 1.3rem; }
.steps li {
  counter-increment: s;
  position: relative;
  padding-left: 2.3rem;
  font-size: .93rem;
  color: var(--soft);
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: .1rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--pink-dark);
}
.steps strong { color: var(--ink); font-weight: 500; }
.aside-contact {
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

/* ==========================================================================
   MENU PAGE
   ========================================================================== */

/* Two price lists behind one set of tabs. Without JavaScript the tabs never
   render and both panels stay visible, so nobody is shown half a menu. */
.price-panel + .price-panel { margin-top: clamp(3rem, 7vw, 4.5rem); }
.price-panel-head {
  font-family: var(--font-body);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brown);
  margin-bottom: 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--ink);
}
.price-panel-intro { font-size: .93rem; color: var(--soft); margin-bottom: 1.4rem; }

html.js .price-panel.is-off { display: none; }
html.js .price-panel + .price-panel { margin-top: 0; }
/* With the tabs doing the labelling, the per-panel heading is repetition. */
html.js .price-panel-head { display: none; }

.serves-value {
  font-size: .95rem;
  color: var(--ink);
  white-space: nowrap;
  text-align: right;
}

/* A standing notice — the allergy statement, above all. Framed by a rule and
   an accent edge so it reads as important without shouting. */
.notice-panel {
  border-top: 1px solid var(--ink);
  border-left: 2px solid var(--pink);
  padding: 1.6rem 0 0 1.4rem;
}
.notice-panel + .notice-panel { margin-top: 2.4rem; }
.notice-panel h2 {
  font-family: var(--font-body);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--pink-dark);
  margin-bottom: .8rem;
}
.notice-panel p { font-size: .95rem; color: var(--body); max-width: 62ch; }
.notice-panel-sm { padding-top: 1.1rem; }
/* FULL WIDTH, ABOVE BOTH COLUMNS — this must stay `1 / -1`.
   .wrap-form is a two-column grid on wide screens and this panel is one of its
   children. Without the span it takes the first column on its own and pushes
   the form into the narrow second one, which squeezed the form to 348px and
   looked broken. The notice is a full-width banner over the whole section, not
   a sidebar. */
.order-notices { grid-column: 1 / -1; margin-bottom: 0; max-width: 78ch; }

/* ==========================================================================
   HOW ORDERING WORKS
   ========================================================================== */

.flow { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.flow-step { padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.flow-no {
  display: block;
  font-size: .7rem;
  letter-spacing: .2em;
  font-weight: 600;
  color: var(--pink-dark);
  margin-bottom: .6rem;
}
.flow-step h3 { font-size: 1.3rem; margin-bottom: .3rem; }
.flow-step p { margin: 0; font-size: .95rem; color: var(--soft); max-width: 46ch; }

.aside-note {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: .86rem;
  color: var(--soft);
}

/* ==========================================================================
   REVIEWS
   ========================================================================== */

.review-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }

/* One or two reviews must not sit in a three-column grid — they end up hard
   left under a centred heading and it reads as a broken layout rather than as
   "she only has two so far". The count comes from PHP (.is-1 / .is-2); these
   selectors are one point more specific than the plain .review-grid rules in
   the breakpoint section below, so they win wherever they appear in the file.
   Nothing here invents a third review to fill the gap. */
.review-grid.is-1 { max-width: 34rem; }
.review-grid.is-2 { max-width: 52rem; }
.review-grid.is-1,
.review-grid.is-2 { margin-inline: auto; }
.review-grid.is-2 { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .review-grid.is-2 { grid-template-columns: repeat(2, 1fr); }
}

.review {
  margin: 0;
  border-top: 1px solid var(--ink);
  padding-top: 1.4rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.review-stars { color: var(--pink); font-size: 1rem; letter-spacing: .18em; margin-bottom: .8rem; }
.review blockquote {
  margin: 0 0 1.2rem;
  font-family: var(--font-head);
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--ink);
}
.review blockquote p { margin-bottom: .6rem; }
.review blockquote p::before { content: '\201C'; }
.review blockquote p:last-of-type::after { content: '\201D'; }
.review figcaption {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1rem;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.review-name { color: var(--ink); font-weight: 600; }
.review-source { color: var(--soft); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer-cta {
  background: var(--blush);
  text-align: center;
  padding: clamp(3.4rem, 10vw, 6rem) 0;
}
.footer-cta-inner h2 { margin: 0 0 .5rem; }
.footer-cta-inner p { max-width: 42ch; margin-inline: auto; color: var(--soft); }
.footer-cta-inner .btn { margin-top: 1.8rem; }

.site-footer { background: var(--ink); color: rgba(255,255,255,.62); padding: 3.4rem 0 1.6rem; }
.site-footer h3 {
  color: rgba(255,255,255,.9);
  font-family: var(--font-body);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.1rem;
}
.site-footer a { color: rgba(255,255,255,.78); text-decoration: none; }
.site-footer a:hover { color: #fff; }

.footer-grid { display: grid; gap: 2.6rem; }
.footer-brand {
  font-family: var(--font-head);
  font-size: 2rem;
  color: #fff;
  margin: 0 0 .3rem;
  letter-spacing: .02em;
}
.footer-tag { font-size: .85rem; margin-bottom: 1.4rem; }

.footer-social { display: flex; gap: .55rem; }

/* Round, not square. 44px is the tap-target minimum and the ring is a real
   circle, so the glyph is not sitting inside a second square.

   NO BRAND COLOURS. An Instagram gradient was tried here and pulled out: this
   footer is espresso and cream and one loud purple-to-orange circle undoes the
   restraint the rest of the page is built on. The hover is the site's own
   brown, the same treatment the calendar's month arrows use, so the two read
   as one system.

   It also must not simply go white. A solid white disc on the dark footer
   flares — it is the brightest thing on the page for the sake of a hover. The
   brown fill is clearly a hover without shouting, and the glyph on top is
   cream rather than pure white for the same reason. */
.social-dot {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.8);
  background: transparent;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
/* `.site-footer` on the front of these two: the generic `.site-footer a:hover`
   rule further up carries an element selector, so it outranks a bare
   `.social-dot:hover` and would quietly force the glyph to pure #fff — the
   exact flare this is avoiding. Do not drop the prefix. */
.site-footer .social-dot:hover,
.site-footer .social-dot:focus-visible {
  background: var(--brown);
  border-color: var(--brown);
  color: var(--cream);
}

@media (prefers-reduced-motion: reduce) {
  .social-dot { transition: none; }
}

.site-footer address { font-style: normal; display: grid; gap: 3px; margin-bottom: 1rem; font-size: .95rem; }
.footer-note { font-size: .82rem; color: rgba(255,255,255,.45); line-height: 1.6; }

/* Tight enough to read as one list. The links used to sit .7rem apart on top of
   their own line-height, which spread seven items over most of the column and
   made them look unrelated to each other. */
.footer-nav { display: grid; gap: 0; font-size: .95rem; }
.footer-nav a { display: block; padding-block: .25rem; line-height: 1.3; }

.footer-bar {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.12);
  display: grid;
  gap: .4rem;
  font-size: .72rem;
  letter-spacing: .06em;
  color: rgba(255,255,255,.42);
}
.footer-bar p { margin: 0; }
.footer-credit a { color: rgba(255,255,255,.6); display: inline-block; padding: .5rem 0; }

/* ==========================================================================
   PHOTO VIEWER
   ========================================================================== */

.lb-viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24,19,14,.96);
  padding: 3.6rem 1rem;
}
.lb-viewer[hidden] { display: none; }

.lb-figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.lb-figure img {
  max-width: 100%;
  max-height: calc(100dvh - 9rem);
  width: auto;
  margin-inline: auto;
  border-radius: var(--radius-photo);
  object-fit: contain;
}
.lb-figure figcaption {
  margin-top: 1.1rem;
  color: rgba(255,255,255,.65);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lb-figure figcaption:empty { display: none; }

.lb-nav, .lb-viewer-close {
  position: absolute;
  width: 46px; height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.22);
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease;
}
.lb-nav:hover, .lb-viewer-close:hover { background: rgba(255,255,255,.12); }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-viewer-close { right: 12px; top: 12px; }

/* ==========================================================================
   MOTION
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(16px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.6,.2,1);
}
body.no-anim .reveal { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */

@media (min-width: 600px) {
  .promise-grid  { grid-template-columns: repeat(2, 1fr); column-gap: 2.6rem; }
  .seller-grid   { grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
  .review-grid   { grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
  .flow          { grid-template-columns: repeat(2, 1fr); column-gap: 2.6rem; }
  .photo-grid    { grid-template-columns: repeat(3, 1fr); gap: .9rem; }
  .repeat-grid   { grid-template-columns: repeat(3, 1fr); }
  .field-row     { grid-template-columns: 1fr 1fr; }
  .radio-row     { flex-direction: row; }
  .radio         { flex: 1 1 0; }
  .radio + .radio { border-top: 1px solid var(--line); border-left: 0; }
  .footer-bar    { grid-template-columns: 1fr auto; align-items: center; }
  .footer-bar .footer-credit { text-align: right; }
  .order-form    { padding: 2.4rem 2.2rem; }
  .header-cta-full  { display: inline; }
  .header-cta-short { display: none; }
}

@media (min-width: 780px) {
  .two-col      { grid-template-columns: 1fr 1fr; gap: 3.4rem; }
  .collect      { grid-template-columns: 1.4fr 1fr; gap: 3.4rem; align-items: center; }
  .choose-grid  { grid-template-columns: repeat(3, 1fr); border-top: 0; column-gap: 2.4rem; }
  .choose       { border-top: 1px solid var(--line); border-bottom: 0; flex-direction: column;
                  align-items: flex-start; gap: .9rem; padding: 1.6rem 0; }
  .footer-grid  { grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; }
  .photo-grid-lg { grid-template-columns: repeat(3, 1fr); }
  .chip-list    { grid-template-columns: 1fr; }
  .band-head .lede { font-size: 1.12rem; }
}

@media (min-width: 1000px) {
  html { scroll-padding-top: 100px; }

  .header-inner { min-height: 84px; }
  .burger { display: none; }
  .mobile-nav { display: none !important; }

  .nav-desktop { display: flex; align-items: center; gap: 2.2rem; }
  .nav-link {
    position: relative;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--soft);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    transition: color .18s ease;
  }
  .nav-link::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 12px;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s cubic-bezier(.2,.6,.2,1);
  }
  .nav-link:hover, .nav-link.is-active { color: var(--ink); }
  .nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }

  .hero { min-height: var(--hero-d, 84vh); }
  .hero-inner h1 { font-size: clamp(3.4rem, 5.4vw, 5.2rem); }

  .promise-grid { grid-template-columns: repeat(3, 1fr); column-gap: 3rem; }
  .seller-grid  { grid-template-columns: repeat(3, 1fr); gap: 2.6rem; }
  .review-grid  { grid-template-columns: repeat(3, 1fr); gap: 2.6rem; }
  .flow         { grid-template-columns: repeat(5, 1fr); column-gap: 2rem; }
  .flow-step h3 { font-size: 1.15rem; }
  .photo-grid-lg { grid-template-columns: repeat(4, 1fr); }
  .repeat-grid  { grid-template-columns: repeat(4, 1fr); }

  .wrap-form {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    align-items: start;
    column-gap: 3.4rem;
    row-gap: 2.8rem;
  }
  .form-aside { position: sticky; top: 110px; }

  .lb-prev { left: 28px; }
  .lb-next { right: 28px; }
  .lb-viewer-close { right: 28px; top: 24px; }
}

@media (min-width: 1180px) {
  .wrap { padding-inline: 34px; }
  /* 18 rows is a long single column on a wide screen. Multi-column, so the
     list still reads down the first column then down the second — a grid
     would zig-zag the sizes across rows. */
  .price-list { columns: 2; column-gap: 4rem; }
  .price-list li { break-inside: avoid; }
}

/* Phones. */
@media (max-width: 640px) {
  /* The tagline only ever fitted by being cut off with an ellipsis, which
     looks like a bug rather than a design. The footer says it in full. */
  .brand-text small { display: none; }
}
@media (max-width: 380px) {
  .brand-text { font-size: 1.2rem; }
  .btn { padding-inline: 1.2rem; letter-spacing: .12em; }
}

/* ============================================================================
   ⚠  FORM-FIELD ZOOM GUARD — KEEP THIS LAST IN THE FILE
   ----------------------------------------------------------------------------
   iOS Safari zooms the whole page in when you tap a field whose font is
   smaller than 16px, and does not zoom back out. The fix is simply to make
   every focusable field 16px or larger.

   The alternative — user-scalable=no / maximum-scale=1 in the viewport tag —
   would also work, and would also stop someone with low vision pinching to
   read the page. We do not do that. See includes/head.php.

   This block is last, and marked !important, so that no rule added later can
   quietly shrink a field below the threshold and bring the zoom back.
   DO NOT ADD RULES BELOW THIS BLOCK.
   ========================================================================= */

input, select, textarea {
  font-size: 16px !important;
  font-family: var(--font-body);
}

/* A button is never typed into, so nothing here can trigger the zoom and the
   design's own sizes stand. Listed explicitly rather than by inheritance so
   that adding a new input type above cannot accidentally opt out. */
button, .btn { font-size: .74rem; }
.btn-sm { font-size: .68rem; }
.btn-lg { font-size: .76rem; }
/* The hero's pair share one row on a phone, so their labels are set smaller and
   tighter to fit. Buttons only — this cannot bring back the field zoom. */
@media (max-width: 480px) {
  .hero-actions .btn { font-size: .62rem; letter-spacing: .09em; line-height: 1.3; }
}
.filter { font-size: .72rem; }
.burger, .lb-nav, .lb-viewer-close { font-size: 1.5rem; }