/* Just In Cakes Co. site styles
   Palette: white ground, blush from the logo, black lettering. v6 brings the
   site closer to the shopfront: simpler, calmer, more white space, smaller
   headings, one typeface, one animation. */

:root {
  --white: #ffffff;
  --blush: #f7dbe2;        /* Light Crimson, the bakery’s own logo pink */
  --blush-deep: #efb8c5;   /* hover / edges */
  --blush-soft: #fbf0f3;   /* section tints */
  --cream: #fbf9f7;        /* very pale neutral, between white sections */
  --ink: #111111;
  --ink-soft: #2f2b2c;   /* charcoal for supporting text: v10, the bakery found the lighter grey hard to read on phones */
  --line: rgba(17, 17, 17, .12);

  --font-display: "Montserrat", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body: "Montserrat", "Helvetica Neue", Arial, system-ui, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1200px;
  --radius: 18px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.wrap.narrow { max-width: 760px; }

/* ---------- type ---------- */
/* One face, Montserrat, at four weights. Headings are deliberately modest now:
   the bakery found the last round too large, particularly on inner pages. Sizes
   are still checked against the longest word with node tools/words.mjs, and
   descender clearance with node tools/descend.mjs. */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.12;
  padding-bottom: .08em;
  overflow-wrap: normal;
  margin: 0;
}
h1 { font-size: clamp(2rem, 4.6vw, 3.9rem); }

/* The shopfront wordmark. The sign outside the shop and the aprons read
   COFFEE. CAKES. BREAD. BAKES. in caps with a full stop after each word, so
   the homepage opening and the footer are both set that way and stay in step.
   Caps do not want the negative tracking the rest of the headings carry. */
.wordmark { text-transform: uppercase; letter-spacing: 0; }
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.4rem); letter-spacing: 0; }
h4 { font-size: 1rem; letter-spacing: 0; }
p { margin: 0 0 1em; }
.lede { font-size: clamp(1.02rem, 1.3vw, 1.2rem); color: var(--ink-soft); max-width: 46ch; line-height: 1.6; }
.eyebrow {
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: .7em;
  margin-bottom: .9rem;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--blush-deep); }
.section-head { max-width: 640px; margin-bottom: clamp(24px, 3.5vw, 44px); }
.section-head .lede { margin-top: .8rem; }
.section-head.centre { margin-inline: auto; text-align: center; }
.section-head.centre .lede { margin-inline: auto; }
.section-head.centre .eyebrow { justify-content: center; }
.muted { color: var(--ink-soft); }
.small { font-size: .88rem; }
.placeholder { color: var(--ink-soft); font-style: italic; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .9em 1.5em;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  transition: background .25s, color .25s, border-color .25s;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: #2a2626; border-color: #2a2626; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--white); }
.btn.pink { background: var(--blush); border-color: var(--blush); color: var(--ink); }
.btn.pink:hover { background: var(--blush-deep); border-color: var(--blush-deep); }
.btn.small { padding: .7em 1.2em; font-size: .88rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding: 12px 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, padding .3s;
}
.site-header.scrolled { border-bottom-color: var(--line); padding: 8px 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 14px; }
/* The bakery's own logo file, larger than before at their request. Below about
   44px the lettering inside it stops being readable, so the wordmark sits beside
   it and carries the name at small sizes. */
.brand-badge { width: 72px; height: 72px; display: block; transition: width .3s, height .3s; }
.site-header.scrolled .brand-badge { width: 58px; height: 58px; }
.brand-name { font-weight: 700; letter-spacing: .16em; font-size: .84rem; text-transform: uppercase; white-space: nowrap; }
.nav { display: flex; gap: clamp(14px, 2vw, 28px); align-items: center; }
.nav a { font-weight: 500; font-size: .92rem; position: relative; padding: 6px 0; white-space: nowrap; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--blush-deep); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:not(.btn):hover::after, .nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
.nav .btn { padding: .6em 1.15em; font-size: .86rem; }
.nav .btn.ghost { margin-left: 6px; }
.menu-toggle { display: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--ink); background: var(--white); cursor: pointer; position: relative; z-index: 45; }
.menu-toggle span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .25s; }
.menu-toggle span:nth-child(1) { top: 16px; } .menu-toggle span:nth-child(2) { top: 22px; } .menu-toggle span:nth-child(3) { top: 28px; }
body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1180px) {
  .menu-toggle { display: block; }
  .nav {
    position: fixed; inset: 0; background: var(--blush); z-index: 40;
    flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px;
    padding: 0 var(--gutter);
    opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s;
  }
  body.menu-open .nav { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }
  /* A backdrop-filter on the header turns it into the containing block for
     fixed children, which squashed the full screen menu into the header strip.
     Drop the blur while the menu is open so the menu covers the whole screen. */
  body.menu-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--blush); border-bottom-color: transparent; }
  /* Room for the logo bar, scrolls on short screens, centred when it fits */
  .nav { padding-top: 110px; padding-bottom: 40px; overflow-y: auto; overscroll-behavior: contain; justify-content: flex-start; }
  .nav > :first-child { margin-top: auto; }
  .nav > :last-child { margin-bottom: auto; }
  .brand { position: relative; z-index: 45; }
  .nav a { font-weight: 700; font-size: clamp(1.6rem, 6.5vw, 2.4rem); letter-spacing: -.01em; padding: 6px 0; }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: 14px; font-size: 1rem; font-weight: 600; }
  .nav .btn.ghost { margin-left: 0; margin-top: 8px; }
  body.menu-open { overflow: hidden; }
}
@media (max-width: 430px) {
  .brand { gap: 10px; }
  .brand-badge, .site-header.scrolled .brand-badge { width: 54px; height: 54px; }
  .brand-name { font-size: .66rem; letter-spacing: .1em; }
  .site-header .wrap { gap: 12px; }
}

/* ---------- sections ---------- */
section { position: relative; }
.section { padding-block: clamp(56px, 8vw, 112px); }
.section.tint { background: var(--blush-soft); }
.section.cream { background: var(--cream); }
.section.pink { background: var(--blush); }
.section.tight { padding-block: clamp(36px, 5vw, 72px); }
.section + .section:not(.tint):not(.cream):not(.pink) { padding-top: 0; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.5vw, 28px); }
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.5vw, 28px); }
@media (max-width: 960px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-3 { grid-template-columns: 1fr; } }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); }
@media (max-width: 960px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }

.card {
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: clamp(20px, 2.6vw, 30px);
  transition: border-color .25s;
}
.card:hover { border-color: var(--blush-deep); }
.card h3 { margin-bottom: .4em; }
.card p { color: var(--ink-soft); margin-bottom: 0; }
.card .price { font-weight: 700; font-size: 1.4rem; margin: .5em 0 .2em; }

.photo { border-radius: var(--radius); overflow: hidden; background: var(--blush-soft); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo.slot { display: grid; place-items: center; text-align: center; padding: 20px; color: var(--ink-soft); font-size: .85rem; border: 1.5px dashed var(--blush-deep); }
figure { margin: 0; }
figcaption { font-size: .88rem; color: var(--ink-soft); margin-top: 10px; line-height: 1.45; }
figcaption b { color: var(--ink); font-weight: 600; }

/* A feature is a photo with a heading, a line or two and a button. Used for
   the two routes the bakery cares most about, cakes and sourdough. */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.feature .photo { aspect-ratio: 4/5; }
.feature.flip .photo { order: 2; }
.feature h2 { margin-bottom: .6rem; }
.feature .lede { max-width: 40ch; }
.feature .actions { margin-top: 1.4rem; }
.feature + .feature { margin-top: clamp(48px, 7vw, 96px); }
@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; }
  .feature .photo { aspect-ratio: 4/3; order: 0 !important; }
}

/* The counter: small tiles with a name under each */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 22px); }
.tiles .photo { aspect-ratio: 1; }
.tiles h4 { margin-top: 12px; }
.tiles p { color: var(--ink-soft); font-size: .9rem; margin: 2px 0 0; }
@media (max-width: 860px) { .tiles { grid-template-columns: repeat(2, 1fr); } }

/* Steps: enquiry, quote, booking, collection */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); counter-reset: step; }
.steps li { list-style: none; counter-increment: step; border-top: 2px solid var(--ink); padding-top: 14px; }
.steps li::before { content: "0" counter(step); display: block; font-weight: 700; font-size: .8rem; letter-spacing: .16em; margin-bottom: 8px; color: var(--ink-soft); }
.steps h4 { margin-bottom: 6px; }
.steps p { color: var(--ink-soft); font-size: .92rem; margin: 0; }
.steps { padding: 0; margin: 0; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .steps { grid-template-columns: 1fr; } }

/* A quiet band with one message and a button, repeated where an enquiry
   button is useful. */
.cta-band { background: var(--blush); border-radius: var(--radius); padding: clamp(24px, 3.5vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cta-band h3 { margin-bottom: 4px; }
.cta-band p { margin: 0; color: var(--ink-soft); }

/* Reviews */
.review-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .review-strip { grid-template-columns: 1fr; } }
.review { background: var(--white); border-radius: var(--radius); padding: 24px; border: 1.5px solid var(--line); }
.review q { font-size: 1.02rem; line-height: 1.5; display: block; margin-bottom: 12px; quotes: "\201C" "\201D"; }
.review cite { font-style: normal; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.stars { color: var(--ink); letter-spacing: .1em; margin-bottom: 8px; font-size: .9rem; }

/* Visit block */
.visit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .visit { grid-template-columns: 1fr; } }
.map-embed { border-radius: var(--radius); overflow: hidden; border: 1.5px solid var(--line); aspect-ratio: 4/3; background: var(--blush-soft); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- forms ---------- */
.form { display: grid; gap: 18px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .form .row { grid-template-columns: 1fr; } }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; min-width: 0; }
.form legend { font-weight: 700; font-size: 1.02rem; margin-bottom: 4px; padding: 0; }
.field { display: grid; gap: 8px; align-content: start; }
.field label { font-weight: 500; font-size: .9rem; }
.field label .opt { font-weight: 400; color: var(--ink-soft); }
.field .hint { font-size: .88rem; color: var(--ink-soft); line-height: 1.5; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--white);
  transition: border-color .25s, box-shadow .25s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--blush); }
.field textarea { min-height: 130px; resize: vertical; }
.field input[type="file"] { padding: 10px 12px; background: var(--cream); }
.field input[type="file"]::file-selector-button { font: inherit; font-weight: 600; border: 1.5px solid var(--ink); background: var(--white); border-radius: 999px; padding: 6px 14px; margin-right: 12px; cursor: pointer; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; }
.check input { width: auto; margin-top: 4px; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; }
.choice span {
  display: block; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 12px; text-align: center; font-weight: 500;
  transition: background .25s, border-color .25s; cursor: pointer; background: var(--white);
}
.choice input:checked + span { background: var(--ink); color: var(--white); border-color: var(--ink); }
.choice input:checked + span small { color: rgba(255,255,255,.75); }
.choice input:focus-visible + span { box-shadow: 0 0 0 4px var(--blush); }
.choice span:hover { border-color: var(--ink); }
.choice input:disabled + span { opacity: .5; cursor: not-allowed; text-decoration: line-through; }
.choice small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .8rem; margin-top: 2px; }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--white); }
.stepper button { width: 42px; height: 42px; border: 0; background: var(--white); cursor: pointer; font-size: 1.2rem; }
.stepper button:hover { background: var(--blush); }
.stepper button:disabled { color: var(--line); cursor: not-allowed; background: var(--white); }
.stepper output { min-width: 40px; text-align: center; font-weight: 600; }
.notice { padding: 14px 16px; border-radius: 12px; background: var(--blush-soft); border: 1.5px solid var(--blush-deep); font-size: .92rem; }
.notice.closed { background: #fff6f6; border-color: #e6a2a2; }
.notice.plain { background: var(--cream); border-color: var(--line); }
.summary { border-top: 1.5px solid var(--ink); padding-top: 16px; display: grid; gap: 8px; }
.summary .line { display: flex; justify-content: space-between; gap: 16px; font-size: .95rem; }
.summary .line span:last-child { font-weight: 500; text-align: right; }
.summary .total { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.3rem; padding-top: 8px; border-top: 1px solid var(--line); }
.form-success { display: none; padding: 30px; border-radius: var(--radius); background: var(--blush); }
.form-success h3 { margin-bottom: .4em; }
.form-success .summary { border-top-color: var(--ink); margin-top: 16px; }
.form-error { display: none; }

/* ---------- misc ---------- */
/* Reveals are now a short, quiet fade rather than a slide. */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.pill { display: inline-block; padding: .35em .9em; border-radius: 999px; background: var(--blush); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.pill.dark { background: var(--ink); color: var(--white); }
.pill.soft { background: var(--cream); border: 1px solid var(--line); }
.hours { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.hours li { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: .95rem; }
.hours li span:last-child { font-weight: 500; text-align: right; }
.address { font-style: normal; line-height: 1.5; }

/* ---------- page title block ---------- */
/* Inner pages open in a blush band with a badge kicker, a modest heading and a
   line of copy. Some pages put a photo beside it. */
.page-hero {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(40px, 6vw, 72px);
  background: var(--blush);
}
.page-hero h1 { max-width: 18ch; font-size: clamp(1.9rem, 4vw, 3.3rem); }
.page-hero .lede { margin-top: 1rem; color: var(--ink-soft); }
.page-hero .actions { margin-top: 1.5rem; }
.page-hero .eyebrow {
  background: var(--ink);
  color: var(--blush);
  border-radius: 999px;
  padding: .6em 1.1em .55em;
  font-weight: 600;
  font-size: .66rem;
  letter-spacing: .18em;
  margin-bottom: 1.1rem;
}
.page-hero .eyebrow::before { display: none; }
.page-hero .photo { aspect-ratio: 4/3; }
.page-hero.with-photo .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .page-hero.with-photo .wrap { grid-template-columns: 1fr; } .page-hero.with-photo .photo { aspect-ratio: 16/10; } }

dl.faq { margin: 0; display: grid; gap: 0; }
dl.faq details { border-top: 1.5px solid var(--line); padding: 18px 0; }
dl.faq details:last-child { border-bottom: 1.5px solid var(--line); }
dl.faq summary { cursor: pointer; font-weight: 600; font-size: 1rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
dl.faq summary::-webkit-details-marker { display: none; }
dl.faq summary::after { content: "+"; font-size: 1.4rem; font-weight: 500; transition: transform .3s var(--ease); }
dl.faq details[open] summary::after { transform: rotate(45deg); }
dl.faq details p { margin-top: 12px; color: var(--ink-soft); max-width: 62ch; font-size: .95rem; }

/* Long form text (terms, privacy) */
.prose { max-width: 720px; }
.prose h2 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin-top: 2.4rem; margin-bottom: .6rem; }
.prose h3 { font-size: 1.02rem; margin-top: 1.4rem; margin-bottom: .4rem; }
.prose p, .prose li { font-size: .96rem; color: #2b2829; line-height: 1.65; }
.prose ul { padding-left: 1.2em; margin: 0 0 1em; }
.prose a { text-decoration: underline; }
.prose .notice { margin: 1rem 0 1.6rem; }
.prose .toc { columns: 2; column-gap: 32px; padding-left: 1.2em; margin: 1rem 0 0; font-size: .92rem; }
.prose .toc li { break-inside: avoid; margin-bottom: 4px; }
@media (max-width: 560px) { .prose .toc { columns: 1; } }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--white); padding: clamp(56px, 7vw, 96px) 0 28px; }
.site-footer .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 60px); }
@media (max-width: 900px) { .site-footer .top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer .top { grid-template-columns: 1fr; } }
.site-footer h4 { font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: .72rem; color: var(--blush); margin: 0 0 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: .95rem; }
.site-footer a { opacity: .85; transition: opacity .25s, color .25s; }
.site-footer a:hover { opacity: 1; color: var(--blush); }
.site-footer .big { font-weight: 700; font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: 0; }
.site-footer .bottom { margin-top: clamp(36px, 5vw, 64px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem; opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- loaves ---------- */
.loaf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 480px) { .loaf-grid { grid-template-columns: 1fr; } }
.loaf { display: grid; gap: 12px; }
.loaf .photo { aspect-ratio: 4/3; }
.loaf .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.loaf .meta .price { font-weight: 700; font-size: 1.2rem; margin: 0; }
.loaf .desc { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.loaf .qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.loaf .sold { font-size: .82rem; font-weight: 600; color: #a33; }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  h1, h2, h3, .display { line-height: 1.18; padding-bottom: .1em; }
}
@media (max-width: 640px) {
  .page-hero { padding-block: clamp(28px, 7vw, 48px); }
  .page-hero h1 { max-width: none; }
  h1, h2, h3, .display { overflow-wrap: break-word; }
  .btn { white-space: normal; text-align: center; }
  .actions .btn, .form .btn { width: 100%; justify-content: center; }
  .cta-band .btn { width: 100%; justify-content: center; }
  .review { padding: 20px; }
  .choice-grid { grid-template-columns: 1fr 1fr; }
  .summary .total { font-size: 1.15rem; }
  .hours li { gap: 12px; font-size: .92rem; }
  .site-footer .bottom { flex-direction: column; gap: 8px; }
}

/* A table can be wider than a phone, so it gets its own scroller with a fade on
   the right edge to show there is more to see. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--white) 30%, rgba(255,255,255,0)) left center / 28px 100% no-repeat,
    linear-gradient(to left, var(--white) 30%, rgba(255,255,255,0)) right center / 28px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(17,17,17,.14), rgba(17,17,17,0)) left center / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(17,17,17,.14), rgba(17,17,17,0)) right center / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.only-mobile { display: none; }
@media (max-width: 640px) { .only-mobile { display: inline; } }

/* =====================================================================
   v8: bespoke cakes page, cake gallery, enquiry form, welcome offer
   ===================================================================== */
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.text-link { font-weight: 600; text-decoration: underline; text-decoration-color: var(--blush-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.text-link:hover { text-decoration-color: var(--ink); }
.ref { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; padding: .25em .6em; border-radius: 999px; background: var(--ink); color: var(--blush); margin-right: .6em; vertical-align: .12em; }
.photo.tall { display: block; aspect-ratio: 3/4; }
.photo.fit { background: var(--cream); }
.photo.fit img { object-fit: contain; }

/* Cakes opening (v10): the photographs are the hook. A large, swipeable set
   of cakes, each shown whole on a white mat, moved only by the customer.
   Desktop: words on the left, photos on the right. Phone: heading, photos,
   then the words and buttons, so a cake is on screen straight away. */
.cake-hero { background: var(--blush); padding-block: clamp(20px, 4vw, 60px) clamp(32px, 4.5vw, 64px); }
.cake-hero .wrap {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  grid-template-areas: "head media" "body media"; column-gap: clamp(28px, 5vw, 72px);
  align-items: center; align-content: center;
}
.ch-head { grid-area: head; align-self: end; }
.ch-media { grid-area: media; min-width: 0; justify-self: center; width: 100%; max-width: min(540px, calc((100svh - 300px) * .75 + 32px)); min-width: min(100%, 340px); }
.ch-body { grid-area: body; align-self: start; }
.cake-hero h1 { font-size: clamp(1.7rem, 3vw, 2.45rem); max-width: 16ch; }
.cake-hero .lede { margin-top: 1rem; color: var(--ink-soft); max-width: 38ch; }
.cake-hero .eyebrow { background: var(--ink); color: var(--blush); border-radius: 999px; padding: .6em 1.1em .55em; font-size: .66rem; letter-spacing: .18em; margin-bottom: 1.1rem; }
.cake-hero .eyebrow::before { display: none; }
.cake-hero .actions { margin-top: 1.5rem; align-items: center; gap: 14px 22px; }
.small-link { font-size: .92rem; }
.cake-hero .reassure { margin: 1.1rem 0 0; max-width: 40ch; color: var(--ink-soft); }

.carousel { position: relative; }
.car-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none; border-radius: calc(var(--radius) + 6px);
}
.car-track::-webkit-scrollbar { display: none; }
.car-track:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.slide .frame { background: var(--white); border-radius: calc(var(--radius) + 6px); padding: clamp(10px, 1.4vw, 16px); }
/* contain, not cover: the whole cake, topper to board, with room around it */
.slide img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: contain; background: var(--white); border-radius: var(--radius); }
.slide figcaption { text-align: center; color: var(--ink-soft); margin-top: 12px; font-size: .92rem; }
.car-btn {
  position: absolute; top: calc(50% - 40px); transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.94); color: var(--ink); font-size: 1.15rem; cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(17,17,17,.45); display: grid; place-items: center; transition: opacity .2s, background .2s;
}
.car-btn:hover:not(:disabled) { background: var(--ink); color: var(--white); }
.car-btn:disabled { opacity: 0; pointer-events: none; }
.car-btn.prev { left: 10px; } .car-btn.next { right: 10px; }
.car-foot { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 12px; }
.car-dots { display: flex; gap: 4px; }
.car-dot { width: 26px; height: 26px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.car-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgba(17,17,17,.28); transition: background .2s, transform .2s; }
.car-dot[aria-current="true"]::before { background: var(--ink); transform: scale(1.25); }
.car-hint { font-size: .8rem; font-weight: 600; color: var(--ink-soft); display: none; }
.gallery-cta { display: block; width: max-content; margin: 14px auto 0; font-weight: 600; padding: .7em 1.3em; border-radius: 999px; background: var(--white); border: 1.5px solid var(--ink); transition: background .2s, color .2s; }
.gallery-cta:hover { background: var(--ink); color: var(--white); }

@media (max-width: 860px) {
  .cake-hero .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "body"; }
  .ch-head { text-align: center; }
  .cake-hero h1 { margin-inline: auto; font-size: clamp(1.55rem, 6.4vw, 2.1rem); }
  .cake-hero .eyebrow { margin-bottom: .8rem; }
  .ch-media { margin-top: 16px; max-width: 480px; }
  .ch-body { margin-top: 22px; }
  .car-hint { display: inline; }
  .carousel.used .car-hint { display: none; }
  .car-btn { width: 40px; height: 40px; }
}

.row-head { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.fav-grid figure a.photo img { transition: transform .6s var(--ease); }
.fav-grid figure a.photo:hover img { transform: scale(1.03); }
.gallery-more { margin: clamp(22px, 3vw, 32px) 0 0; }

/* Price guide: sizes and tiers, one easy to edit list in config.js */
.price-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .price-wrap { grid-template-columns: 1fr; } }
.price-card { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 34px); display: grid; gap: 18px; justify-items: start; }
.price-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.price-table th, .price-table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); }
.price-table thead th { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; padding-top: 0; }
.price-table .num { text-align: right; white-space: nowrap; font-weight: 600; }
.price-table .tier-row th { padding-top: 18px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1.5px solid var(--ink); }
.price-table tbody tr:first-child th { padding-top: 6px; }
.price-table.no-serves .serves-col { display: none; }
.price-table .soon { font-weight: 500; color: var(--ink-soft); font-style: italic; }
.price-notes { margin: 0; padding-left: 1.1em; color: var(--ink-soft); font-size: .92rem; display: grid; gap: 6px; }
.price-card .notice { margin: 0; justify-self: stretch; }

.steps.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .steps.three { grid-template-columns: 1fr; } }

/* Enquiry form: four grouped panels on a pale pink ground, wider than before,
   with the FAQs underneath instead of beside it. */
.form-wrap { max-width: 1060px; }
.form .panel { scroll-margin-top: 96px; }
.form.enquiry { gap: 22px; }
.form .panel { background: var(--white); border: 1.5px solid var(--blush-deep); border-radius: calc(var(--radius) + 4px); padding: clamp(20px, 3.4vw, 36px); gap: 18px; }
.form .panel legend { float: left; width: 100%; font-size: clamp(1.15rem, 1.8vw, 1.4rem); display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.form .panel legend + * { clear: both; }
.form .panel .num { width: 34px; height: 34px; border-radius: 50%; background: var(--blush); display: inline-grid; place-items: center; font-size: .95rem; flex: none; }
.panel-intro { margin: 0; color: var(--ink-soft); font-size: .95rem; max-width: 62ch; }
.field .label { font-weight: 500; font-size: .9rem; }
.field .label .opt { font-weight: 400; color: var(--ink-soft); }
.field .hint a, .next-line a, .panel-intro a { text-decoration: underline; }
.choice-grid.two { grid-template-columns: repeat(2, 1fr); }
.choice-grid.three { grid-template-columns: repeat(3, 1fr); }
.choice-grid .choice span { height: 100%; display: grid; place-content: center; }
.choice input[type="checkbox"]:checked + span { background: var(--ink); color: var(--white); border-color: var(--ink); }
.check.small { font-size: .86rem; }
.reveal-box { background: var(--blush-soft); border-radius: 14px; padding: 16px; display: grid; gap: 14px; }
.field-error { color: #a33; font-weight: 600; font-size: .9rem; margin: 0; }
.field input:disabled { background: var(--cream); color: var(--ink-soft); }
.next-line { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.next-line a { color: var(--ink); }
.form .panel .btn[type="submit"] { justify-self: start; }
.next-step { justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; padding: .55em 1.1em; border-radius: 999px; background: var(--blush-soft); border: 1.5px solid var(--blush-deep); }
.next-step:hover { background: var(--blush); border-color: var(--ink); }
@media (max-width: 640px) { .next-step { justify-self: stretch; justify-content: center; } }
.tag { display: inline-block; font-size: .78rem; font-weight: 600; padding: .1em .6em; border-radius: 999px; background: var(--ink); color: var(--white); margin-left: 4px; }
.tag.warn { background: var(--white); color: var(--ink); border: 1.5px dashed var(--ink); }
.rb-lead { margin: 0; }
/* Cupcake boxes */
.steppers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px) { .steppers { grid-template-columns: 1fr; } }
.stepper { background: var(--white); border: 1.5px solid var(--blush-deep); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.st-label { font-weight: 600; font-size: .92rem; }
.st-ctrl { display: flex; align-items: center; gap: 6px; }
.st-ctrl input { width: 52px; text-align: center; padding: 8px 4px; border-radius: 10px; border: 1.5px solid var(--line); font-weight: 600; -moz-appearance: textfield; }
.st-ctrl input::-webkit-outer-spin-button, .st-ctrl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.st-btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--white); font-size: 1.2rem; font-weight: 600; cursor: pointer; line-height: 1; }
.st-btn:hover:not(:disabled) { background: var(--ink); color: var(--white); }
.st-btn:disabled { opacity: .35; cursor: default; }
.cup-total { margin: 0; font-weight: 600; }
.cup-flavours { display: grid; gap: 10px; }
.cup-flavours .hint { margin: 0; font-size: .88rem; color: var(--ink-soft); }
.cup-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.cup-row { display: grid; gap: 4px; }
.cup-row label { font-size: .86rem; font-weight: 500; }
/* The size guide that opens inside the form */
.guide-toggle { justify-self: start; background: none; border: 0; padding: 2px 0; font-weight: 600; font-size: .88rem; text-decoration: underline; text-decoration-color: var(--blush-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.guide-toggle::after { content: " ▾"; font-size: .8em; }
.guide-toggle[aria-expanded="true"]::after { content: " ▴"; }
.size-guide { background: var(--cream); border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 18px; display: grid; gap: 10px; }
.sg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sg-close { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--white); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.sg-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sg-table th, .sg-table td { text-align: left; padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line); }
.sg-table th { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.sg-table .sg-price { text-align: right; padding-right: 0; white-space: nowrap; }
.sg-table .soon { font-style: italic; color: var(--ink-soft); font-weight: 500; }
.sg-note { margin: 0; color: var(--ink-soft); }
.size-guide .text-link { justify-self: start; }
.back-to-form { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 40; background: var(--ink); color: var(--white); font-weight: 600; font-size: .92rem; padding: .8em 1.4em; border-radius: 999px; box-shadow: 0 10px 30px -10px rgba(17,17,17,.5); }
/* Design ideas with the gallery link beside the label */
.design-area { display: grid; gap: 8px; }
.design-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; }
.design-head label { font-weight: 500; font-size: .9rem; }
.design-area textarea { width: 100%; }
.design-area .hint { font-size: .88rem; color: var(--ink-soft); line-height: 1.5; }
.choice-grid.two.diet { max-width: 360px; grid-template-columns: repeat(2, 1fr); }
.linkish { background: none; border: 0; padding: 0; font-weight: 600; text-decoration: underline; cursor: pointer; margin-left: 6px; }

/* Calendar */
.cal { max-width: 620px; border: 1.5px solid var(--line); border-radius: 16px; padding: clamp(12px, 2vw, 20px); background: var(--white); }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cal-title { font-size: 1.05rem; }
.cal-nav { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--white); cursor: pointer; font-size: 1rem; }
.cal-nav:hover:not(:disabled) { background: var(--blush); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { text-align: center; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: 4px; }
.day { height: clamp(38px, 5.4vw, 50px); border-radius: 10px; border: 1.5px solid transparent; font-weight: 600; font-size: .92rem; cursor: pointer; position: relative; background: var(--white); }
/* Normal availability is filled blush. Dates that can still be asked for
   (fully booked, short notice, outside the usual days) stay in full ink on
   white with a dashed edge, so they read as tappable, not switched off. */
.day.open { background: var(--blush-soft); border-color: var(--blush-deep); }
.day.limited { background: var(--blush-soft); border-color: var(--blush-deep); }
.day.limited::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #c0627a; }
.day.short, .day.full, .day.outside { background: var(--white); border: 1.5px dashed #a98790; color: var(--ink); }
.day.full { background: repeating-linear-gradient(135deg, #fff 0 5px, #f4eff0 5px 7px); }
.day.outside { border-style: dotted; border-color: #8f7a80; font-weight: 500; }
.day.closed { background: transparent; color: #6f696b; font-weight: 500; cursor: not-allowed; border-color: transparent; }
.day.past { background: transparent; color: #bdb7b9; cursor: default; font-weight: 500; }
.day:hover:not(:disabled) { border-color: var(--ink); border-style: solid; }
.day.sel { background: var(--ink); color: var(--white); border: 1.5px solid var(--ink); text-decoration: none; }
.day.sel.req { background: var(--ink); color: var(--white); box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--ink); }
.day.pending { background: var(--white); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 0 0 0 3px var(--blush); }
.cal-key { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .8rem; color: var(--ink-soft); }
.cal-key li { display: flex; align-items: center; gap: 6px; }
.k { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.k.open { background: var(--blush-soft); border: 1.5px solid var(--blush-deep); }
.k.limited { background: var(--blush-soft); border: 1.5px solid var(--blush-deep); position: relative; }
.k.limited::after { content: ""; position: absolute; left: 3px; top: 3px; width: 5px; height: 5px; border-radius: 50%; background: #c0627a; }
.k.full { border: 1.5px dashed #a98790; background: repeating-linear-gradient(135deg, #fff 0 3px, #eee7e9 3px 5px); }
.k.short { border: 1.5px dashed #a98790; }
.k.outside { border: 1.5px dotted #8f7a80; }
.k.closed { background: transparent; border: 1.5px solid #d6d0d2; position: relative; overflow: hidden; }
.k.closed::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 1.5px; background: #8a8385; transform: rotate(-45deg); }
.date-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 32px); align-items: start; }
.date-side { display: grid; gap: 16px; align-content: start; }
.date-side .date-choice { min-height: 48px; padding: 14px 16px; border-radius: 14px; background: var(--blush-soft); }
@media (max-width: 760px) { .date-layout { grid-template-columns: 1fr; } }
.date-choice { font-size: .95rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.date-side .date-choice.is-chosen, .date-side .date-choice.is-request { background: var(--white); border: 2px solid var(--ink); }
.date-side .date-choice.is-pending { background: var(--white); border: 2px dashed var(--ink); }
.pill.outline { background: var(--white); border: 1.5px solid var(--ink); }
.cal-explain { margin: 0; max-width: 70ch; }
.request-box { margin: 0; display: grid; gap: 8px; }
.request-box p { margin: 0; }
.rb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 4px; }
.date-side > *, .field, .row > * { min-width: 0; }
.field input[type="date"] { display: block; width: 100%; max-width: 100%; min-width: 0; -webkit-appearance: none; appearance: none; min-height: 48px; }
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
@media (max-width: 480px) {
  .cal-grid { gap: 4px; }
  .day { height: 40px; font-size: .85rem; border-radius: 8px; }
  .cal-dow span { display: none; }
}

/* Inspiration */
.inspo-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.uploader { position: relative; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px; border: 1.5px dashed var(--blush-deep); border-radius: 14px; background: var(--blush-soft); }
.uploader label.btn { cursor: pointer; }
.uploader.full label.btn { display: none; }
.uploader input:focus-visible + label { outline: 3px solid var(--ink); outline-offset: 3px; }
.thumbs { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.thumbs:empty { display: none; }
.thumbs li { position: relative; width: 104px; }
.thumbs img { width: 104px; height: 104px; object-fit: cover; border-radius: 12px; border: 1.5px solid var(--line); }
.thumbs .t-name { display: block; font-size: .72rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.thumbs button { position: absolute; top: -8px; right: -8px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--white); background: var(--ink); color: var(--white); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.picks { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pick-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--ink); color: var(--blush); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; margin-right: 6px; }
.pick-chip button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 1rem; padding: 0 4px; }

/* Summary before sending */
.summary-box { background: var(--blush-soft); border-radius: 14px; padding: clamp(16px, 2.4vw, 22px); }
.summary-box h3 { font-size: 1rem; margin-bottom: 10px; }
.summary-box dl { margin: 0; display: grid; gap: 6px; }
.summary-box dl div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; font-size: .92rem; }
.summary-box dt { color: var(--ink-soft); }
.summary-box dd { margin: 0; font-weight: 500; }
@media (max-width: 480px) { .summary-box dl div { grid-template-columns: 1fr; gap: 0; } }

.form-success .heard { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(17,17,17,.15); display: grid; gap: 10px; }
.form-success .heard label { font-weight: 500; }
.heard-row { display: flex; gap: 10px; flex-wrap: wrap; }
.heard-row select { flex: 1 1 220px; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--white); }
.form-success:focus { outline: none; }

/* FAQs in two columns under the form */
dl.faq.faq-2 { grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 4vw, 56px); }
dl.faq.faq-2 details:nth-last-child(2) { border-bottom: 1.5px solid var(--line); }
@media (max-width: 760px) { dl.faq.faq-2 { grid-template-columns: 1fr; } dl.faq.faq-2 details:nth-last-child(2) { border-bottom: 0; } }

@media (max-width: 640px) {
  .choice-grid.three { grid-template-columns: repeat(3, 1fr); }
  .choice-grid.two { grid-template-columns: 1fr; }
  .form .panel .btn[type="submit"] { justify-self: stretch; }
}

/* Gallery page */
.page-hero.slim { padding-block: clamp(28px, 4vw, 48px); }
.page-hero.slim h1 { font-size: clamp(1.7rem, 3vw, 2.45rem); }
.page-hero.slim .lede { max-width: 60ch; }
.hero-links { display: flex; gap: 24px; flex-wrap: wrap; margin: 1.1rem 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { border: 1.5px solid var(--line); background: var(--white); border-radius: 999px; padding: .5em 1em; font-weight: 500; font-size: .88rem; cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.gallery-note { margin-bottom: 18px; }
.g-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.2vw, 26px); }
@media (max-width: 1060px) { .g-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .g-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .g-grid { grid-template-columns: 1fr; } }
.g-card { display: grid; gap: 10px; align-content: start; scroll-margin-top: 110px; }
.g-card[hidden] { display: none; }
.g-card .photo { aspect-ratio: 3/4; outline: 3px solid transparent; outline-offset: 3px; transition: outline-color .25s; }
.g-card.picked .photo, .g-card.picked-flash .photo { outline-color: var(--ink); }
.g-card figcaption { margin: 0; }
.g-card figcaption b { display: block; margin-top: 6px; }
.g-card .g-desc { display: block; }
.pick { justify-self: start; border: 1.5px solid var(--ink); background: var(--white); border-radius: 999px; padding: .45em 1em; font-weight: 600; font-size: .82rem; cursor: pointer; }
.pick[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.pick-bar { position: sticky; bottom: 0; z-index: 30; background: var(--ink); color: var(--white); padding: 12px 0; }
.pick-bar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; font-weight: 500; font-size: .92rem; }
.pick-bar[hidden] { display: none; }

/* Welcome offer pop up. Calm, on brand, easy to close; a bottom sheet on phones. */
.welcome { position: fixed; inset: 0; z-index: 100; background: rgba(17,17,17,.38); display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .25s; }
.welcome.open { opacity: 1; }
.welcome-card { position: relative; width: min(420px, 100%); background: var(--blush); border-radius: 22px; padding: 30px 28px 22px; text-align: center; box-shadow: 0 30px 80px -30px rgba(17,17,17,.5); transform: translateY(10px); transition: transform .3s var(--ease); }
.welcome.open .welcome-card { transform: none; }
.welcome-card:focus { outline: none; }
.welcome-badge { margin: 0 auto 10px; }
.welcome-kicker { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; margin: 0 0 6px; }
.welcome-card h2 { font-size: clamp(1.5rem, 5vw, 1.9rem); margin-bottom: 8px; }
.welcome-card p { font-size: .95rem; margin: 0 0 14px; }
.welcome-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--white); border: 1.5px dashed var(--ink); border-radius: 14px; padding: 8px 8px 8px 16px; margin-bottom: 8px; }
.welcome-code span { font-weight: 700; letter-spacing: .14em; font-size: 1.05rem; }
.welcome-code .btn { width: auto; }
.welcome-card { max-height: calc(100svh - 24px); overflow-y: auto; }
.welcome-form { display: grid; gap: 10px; text-align: left; margin-bottom: 4px; }
.welcome-form input[type="email"] { width: 100%; padding: 13px 16px; border-radius: 12px; border: 1.5px solid var(--ink); background: var(--white); font-size: 1rem; }
.welcome-form input[type="email"]:focus { outline: none; box-shadow: 0 0 0 4px var(--white); }
.welcome-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; line-height: 1.45; color: var(--ink); cursor: pointer; }
.welcome-consent input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--ink); }
.welcome-err { margin: 0 !important; font-size: .88rem !important; font-weight: 600; color: #8f1d1d; }
.welcome-form .btn { width: 100%; justify-content: center; }
.welcome-done { background: var(--white); border-radius: 14px; padding: 14px 16px; text-align: left; margin-bottom: 4px; }
.welcome-done p { margin: 0 !important; }
.welcome-no { background: none; border: 0; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 10px; }
.welcome-x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.welcome-x:hover { background: rgba(255,255,255,.6); }
.welcome-small { font-size: .78rem !important; color: var(--ink-soft); margin: 4px 0 0 !important; }
.welcome-small a { text-decoration: underline; }
@media (max-width: 520px) {
  .welcome { place-items: end center; padding: 0; }
  .welcome-card { border-radius: 22px 22px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateY(30px); }
}
#enquire, #prices, #gallery, #faqs, .form .panel, .form-success { scroll-margin-top: 100px; }
.choice-grid > * { min-width: 0; }
@media (max-width: 640px) { .choice-grid.occ { grid-template-columns: 1fr 1fr; } }

/* Homepage cake feature: a 3:4 frame so the whole cake shows, topper to board, on every screen */
.feature .photo.tall { aspect-ratio: 3/4; }
@media (max-width: 860px) { .feature .photo.tall { max-width: 460px; width: 100%; justify-self: center; } }

/* Events (v10): simple cards, date first, clearly labelled at the bakery or our stall */
.event-list { display: grid; gap: 16px; }
.event-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: clamp(14px, 2.4vw, 26px); background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius); padding: clamp(16px, 2.4vw, 24px); }
.event-card.at-bakery { background: var(--blush-soft); border-color: var(--blush-deep); }
.ev-date { display: grid; justify-items: center; align-content: start; background: var(--ink); color: var(--white); border-radius: 14px; padding: 10px 6px 12px; height: max-content; }
.at-bakery .ev-date { background: var(--blush); color: var(--ink); }
.ev-dow, .ev-mon { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.ev-day { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.ev-body { display: grid; gap: 6px; align-content: start; }
.ev-body .pill { justify-self: start; }
.ev-body h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin-top: 4px; }
.ev-body p { margin: 0; color: var(--ink-soft); }
.ev-when { font-weight: 600; color: var(--ink) !important; }
.ev-ticket { color: var(--ink) !important; }
@media (max-width: 520px) { .event-card { grid-template-columns: 64px minmax(0, 1fr); } .ev-day { font-size: 1.5rem; } }
.price-wrap > * { min-width: 0; }
@media (max-width: 400px) { .price-table { font-size: .84rem; } .price-table .num { white-space: normal; } .price-card { padding: 16px; } }