/* home_v5.css — the consumer homepage.
 *
 * Loaded only by templates/home_v5.html (via the layout's "head" block) rather
 * than appended to style.css. style.css is ~2500 lines shared by every page on
 * the site, and this design owns the full width of the viewport, overlays the
 * header and sets its own type scale — exactly the kind of thing that leaks.
 * A separate file makes "does this rule affect any other page?" answerable by
 * looking at one <link>.
 *
 * Everything here is prefixed .v5 for the same reason.
 */

:root {
  --v5-gold: #d6a75c;
  --v5-ink: #1b1512;
  --v5-cream: #faf7f2;
  --v5-line: #ece3d6;
  --v5-muted: #6f6459;
}

/* ── Header, floated over the hero ──────────────────────────────────────
 * The hero is a dark photograph and the site header is normally a white bar.
 * Stacked, the page opens with a strip of chrome above the wow. Floating the
 * header over the image is what the design does, and it costs one selector
 * because no other page has a .v5hero.
 *
 * :has() is the load-bearing bit. If it is ever unsupported the header simply
 * stays solid white above the hero — the page is still correct, just less
 * dramatic, which is the right way for this to fail. */
body:has(.v5hero) .ba-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  background: transparent; border-bottom: 0; box-shadow: none;
}
body:has(.v5hero) .ba-header .ba-nav a,
body:has(.v5hero) .ba-header .ba-menu > summary,
body:has(.v5hero) .ba-header .ba-mini { color: #fff; }
body:has(.v5hero) .ba-header .ba-nav a:hover,
body:has(.v5hero) .ba-header .ba-menu > summary:hover { color: var(--v5-gold); }
body:has(.v5hero) .ba-brand-sub { color: rgba(255,255,255,.72); }
/* Swap the raster wordmark for its typographic twin. See the note in
   partials/header.html: the PNG has no alpha channel, so over the photo it
   renders as a white block and there is no filter that fixes that. */
body:has(.v5hero) .ba-brand-mark { display: none; }
body:has(.v5hero) .ba-brand-text {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.72rem; line-height: 1.05; letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
/* Italic, matching bakeriesai-logo3.png: the artwork sets "AI" in a slanted
   gold serif against the upright "Bakeries". This was upright and read as a
   different wordmark to the one every other page shows. */
body:has(.v5hero) .ba-brand-text em {
  font-style: italic;
  color: var(--v5-gold);
  /* Serif italics tuck under the preceding upright letter; a hair of tracking
     and a nudge right restore the gap the logo has between "Bakeries" and "AI". */
  letter-spacing: .012em;
  padding-left: .045em;
}
/* The dropdown panel itself stays light — it is a menu, not chrome. */
body:has(.v5hero) .ba-header .ba-drop a { color: var(--v5-ink); }
body:has(.v5hero) .ba-toggle { color: #fff; }

/* ── Mobile menu open, on the transparent hero header ────────────────────
 * The header above is deliberately transparent so the hero photograph runs
 * behind it. That falls apart the moment the hamburger is tapped: the nav
 * expands into a full-width panel that is ALSO transparent and absolutely
 * positioned, so the links land straight on top of the hero headline and
 * nothing is readable.
 *
 * While the panel is open, give the header a solid ground and put every
 * white-on-photo colour back to ink. Scoped with :has(.ba-nav.open) so the
 * collapsed bar keeps its transparency. */
body:has(.v5hero) .ba-header:has(.ba-nav.open) {
  background: #fff;
  border-bottom: 1px solid #EDE4D8;
  box-shadow: 0 14px 34px rgba(43, 33, 24, .16);
}
body:has(.v5hero) .ba-header:has(.ba-nav.open) .ba-nav a,
body:has(.v5hero) .ba-header:has(.ba-nav.open) .ba-menu > summary,
body:has(.v5hero) .ba-header:has(.ba-nav.open) .ba-mini,
body:has(.v5hero) .ba-header:has(.ba-nav.open) .ba-toggle { color: var(--v5-ink); }
body:has(.v5hero) .ba-header:has(.ba-nav.open) .ba-brand-text {
  color: var(--v5-ink);
  text-shadow: none;
}
body:has(.v5hero) .ba-header:has(.ba-nav.open) .ba-brand-sub { color: #8a7f74; }

/* ── Full-bleed ─────────────────────────────────────────────────────────
 * style.css puts every page inside `main { max-width: 1320px; padding: 0 28px
 * 60px }`. This design has no margins — the hero photograph and the four food
 * panels run edge to edge — so the container is released for this page only.
 * The sections below re-introduce their own inner max-width, which is why the
 * type still lines up with the rest of the site. */
body:has(.v5hero) main { max-width: none; padding: 0; }

/* ── 1. Hero ────────────────────────────────────────────────────────────── */
.v5hero {
  position: relative;
  min-height: 620px;
  display: flex; align-items: center;
  background: #171110;   /* the photo's own dark, so any gap reads as intent */
  overflow: hidden;
}

/* The photograph is a background rather than an <img> so it can be anchored to
 * the right edge and sized by HEIGHT.
 *
 * That is deliberate and it is about resolution, not taste: hero-cake.jpeg is
 * 720x404. Covering a 1500px-wide hero would upscale it 2.1x and visibly mush
 * it. Sizing "auto 100%" against a 620px band is a ~1.5x upscale of a photo
 * whose left side is then covered by the scrim anyway — and it reproduces the
 * intended composition, where the cake sits right and the type sits left.
 *
 * Drop a wider file at static/images/home/hero.jpg and this only gets sharper;
 * see panelOverrides in internal/products/home_v5.go. */
.v5hero-img {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
}

/* Two washes. Horizontal so the headline always has something to sit on,
 * vertical so the hero hands off to the food panels instead of ending. */
.v5hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(15,10,9,.94) 0%, rgba(15,10,9,.86) 28%, rgba(15,10,9,.45) 52%, rgba(15,10,9,.06) 72%),
    linear-gradient(to bottom, rgba(15,10,9,.45) 0%, rgba(15,10,9,0) 28%, rgba(15,10,9,0) 72%, rgba(15,10,9,.35) 100%);
}

.v5hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1240px;
  margin: 0 auto; padding: 96px 32px 64px;
}

.v5hero-title {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(2.9rem, 6vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: -.015em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.4);
}
.v5hero-title em { font-style: normal; color: var(--v5-gold); }

.v5hero-sub {
  margin: 20px 0 0;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.5;
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}

/* ── The search box ─────────────────────────────────────────────────────── */
.v5search {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 620px;
  margin: 30px 0 0;
  background: #fff;
  border-radius: 999px;
  padding: 9px 9px 9px 22px;
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}
.v5search-icon { flex: 0 0 auto; color: #8a7f74; }
.v5search-input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-size: 1.02rem; color: var(--v5-ink);
  padding: 12px 0;
}
.v5search-input::placeholder { color: #9c9086; }
/* Safari draws its own clear button and inner shadow on type=search. */
.v5search-input::-webkit-search-decoration,
.v5search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* .v5search-go {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--v5-gold); color: #fff;
  cursor: pointer;
  transition: background .15s, transform .15s;
} */
 .v5search-go {
  flex: 0 0 auto;
  width: 125px; height: 55px;
  display: grid; place-items: center;
  border: 0; border-radius: 25%;
  background: var(--v5-gold); color: #fff;
  cursor: pointer;
  transition: background .15s, transform .15s;
  font-size: 1rem; font-weight: 600;
   flex: 0 0 auto;

    height: 48px;

    padding: 0 12px;

    margin-right: 6px;

    border-radius: 14px;

    white-space: nowrap;
} 

.v5search-go:hover { background: #c2924a; transform: scale(1.05); }
/* Desktop shows the words; the arrow is the phone-sized fallback. */
.v5go-icon { display: none; }

/* ── Voice input ──────────────────────────────────────────────────────────
 * A quiet icon inside the white pill, left of the gold button. It is
 * deliberately NOT a second primary action: the submit button stays the only
 * gold thing in the bar, because speaking is an alternative way to fill the
 * field, not an alternative way to search.
 */
.v5mic {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: 4px;
  border: 0; border-radius: 999px;
  background: transparent; color: #8a7f74;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.v5mic:hover { background: #f2ece3; color: var(--v5-ink); }
.v5mic:focus-visible { outline: 2px solid var(--v5-gold); outline-offset: 2px; }
/* [hidden] must win over the display above — the same specificity trap that
   has bitten .sf and .cx-refine on other pages. */
.v5mic[hidden] { display: none; }

/* Listening. Subtle on purpose: a tint, not a flashing red dot. The ring is a
   separate box-shadow animation so it never changes the button's size and
   cannot nudge the input's width mid-sentence. */
.v5mic.is-live {
  background: #fdecef;
  color: #c2334f;
  animation: v5mic-pulse 1.6s ease-out infinite;
}
@keyframes v5mic-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(194,51,79,.35); }
  70%  { box-shadow: 0 0 0 9px rgba(194,51,79,0); }
  100% { box-shadow: 0 0 0 0 rgba(194,51,79,0); }
}

/* Shown while the browser is listening or when permission is refused. */
.v5mic-hint.is-live { color: #ffd9df; }

@media (prefers-reduced-motion: reduce) {
  .v5mic, .v5mic.is-live { transition: none; animation: none; }
}

/* ── The one handwritten suggestion ─────────────────────────────────────── */
.v5try {
  /* Was a flex row with a left indent, both only to seat the hand-drawn arrow
     beside the text. The arrow pointed at a clickable example; once that
     became a plain statement it was pointing at nothing, so it went — and the
     layout it required went with it. */
  margin: 16px 0 0;
  max-width: 560px;
}
/* The line under the search box. It used to be a link to an example search;
   it is now a plain statement, so no anchor, no hover, no underline — nothing
   here invites a click. The voice script swaps this text for "Listening…" and
   for any failure message, which is why it is a span beside the arrow rather
   than the whole paragraph: setHint() writes textContent, and that would take
   the arrow with it. */
.v5mic-hint {
  font-family: 'Snell Roundhand', 'Brush Script MT', 'Segoe Script', cursive;
  font-size: 1.28rem; line-height: 1.35;
  color: var(--v5-gold);
}

/* ── 2. Food panels ─────────────────────────────────────────────────────── */
/* Four cards, matching the mockup's geometry rather than the full-bleed band
 * shipped first: a narrow page margin, small gutters between the cards, and
 * rounded corners, so they read as four objects sitting on the dark rather than
 * as one continuous strip of photograph.
 *
 * Margins (20px), gutters (8px) and corner radius are measured off the mockup.
 *
 * The HEIGHT is not. The mockup's cards are 3:4.4, and that was the ratio here
 * until the real artwork arrived: the supplied images are 896x732 LANDSCAPE, and
 * object-fit:cover into a 3:4.4 frame keeps only 56% of each one. It doesn't
 * just crop tighter, it destroys the compositions — the birthday cake stops
 * being a cake and becomes candles above a band of sprinkles.
 *
 * 3:3.4 keeps 74%, and every subject survives: the whole cake with its candles,
 * the arrangement of donuts, the drip down the side of the cheesecake. Compared
 * A/B against 3:4.4 and 3:3.8 before choosing.
 *
 * The artwork is stored FULL FRAME at static/images/home/<key>.jpg, so this
 * ratio can be retuned here alone — no re-cropping, no re-export. */
.v5panels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 20px 20px;
  background: #171110;
  /* Raised 5/6 of an inch into the hero (48px + a further 32px) so the cards
     tuck under the search box
     rather than starting a separate block beneath it. The hero's background is
     the same #171110, so the overlap itself is invisible — the cards simply
     sit higher against the photograph.
     position/z-index are load-bearing: a negative margin ALONE leaves the
     panels behind the hero's scrim, which dims them and reads as washed-out
     photography rather than as a layout problem. */
  position: relative;
  z-index: 3;
  margin-top: -80px;
}
.v5panel {
  position: relative;
  display: block;
  aspect-ratio: 3 / 3.4;
  overflow: hidden;
  border-radius: 10px;
  text-decoration: none;
  color: #fff;
}
.v5panel-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.v5panel:hover .v5panel-img { transform: scale(1.05); }
/* The label sits on food, so it needs its own contrast rather than relying on
 * whatever happens to be behind it. */
.v5panel-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.28) 62%, rgba(0,0,0,.78) 100%);
}
.v5panel-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 22px 24px;
  font-size: 1.06rem; font-weight: 600; line-height: 1.32;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.v5panel-kicker { display: flex; align-items: center; gap: 10px; }
.v5panel-arrow { transition: transform .25s; }
.v5panel:hover .v5panel-arrow { transform: translateX(5px); }

/* ── 3. Just ask ────────────────────────────────────────────────────────── */
.v5ask { background: var(--v5-cream); padding: 30px 32px; }
.v5ask-inner {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 56px; align-items: start;
}
.v5ask-kicker {
  margin: 0 0 6px;
  font-family: 'Snell Roundhand', 'Brush Script MT', 'Segoe Script', cursive;
  font-size: 1.3rem; color: var(--v5-gold);
}
.v5ask-title {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 3rem);
  line-height: 1.05; color: var(--v5-ink);
}
.v5ask-body { margin: 14px 0 0; color: var(--v5-muted); line-height: 1.6; font-size: 1rem; }
.v5ask-cta {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 24px; padding: 15px 26px;
  background: var(--v5-ink); color: #fff;
  border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: .96rem;
  transition: background .16s, transform .16s, box-shadow .16s;
}
.v5ask-cta:hover {
  background: #322721; transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(27,21,18,.24);
}
.v5ask-spark { color: var(--v5-gold); }

.v5ask-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.v5card {
  display: flex; flex-direction: column;
  height: 100%; min-height: 196px;
  padding: 22px;
  background: #fff; border: 1px solid var(--v5-line); border-radius: 16px;
  text-decoration: none; color: var(--v5-ink);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.v5card:hover {
  border-color: #dfcbb2; transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(60,40,20,.10);
}
.v5card-icon {
  width: 42px; height: 42px; margin-bottom: 16px;
  display: grid; place-items: center;
  background: #f6ece2; border-radius: 50%; font-size: 1.05rem;
}
.v5card-q { font-size: .96rem; line-height: 1.5; }
.v5card-q b { font-weight: 700; }
/* margin-top:auto pins the arrow to the bottom so three cards of unequal text
 * still line their arrows up. */
.v5card-arrow { margin-top: auto; padding-top: 16px; color: var(--v5-muted); transition: transform .25s, color .16s; }
.v5card:hover .v5card-arrow { transform: translateX(5px); color: var(--v5-gold); }

/* ── 4. Trust + how it works ────────────────────────────────────────────── */
.v5trust {
  background: #fff;
  border-top: 1px solid var(--v5-line);
  border-bottom: 1px solid var(--v5-line);
  padding: 10px 32px;
}
.v5trust-inner {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.v5trust-item { display: flex; align-items: center; gap: 12px; }
.v5trust-icon {
  flex: 0 0 auto; width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid #eadfd0; border-radius: 50%;
  font-size: .95rem;
}
.v5trust-text { font-size: .86rem; line-height: 1.4; color: var(--v5-muted); }

/* ── 5. The product showcase ────────────────────────────────────────────── */
.v5shop { background: var(--v5-cream); padding: 27px 32px 30px; }
.v5shop-head { max-width: 1240px; margin: 0 auto 32px; }
.v5shop-title {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--v5-ink);
}
.v5shop-kicker { margin: 8px 0 0; color: var(--v5-muted); font-size: .97rem; }

.v5shop-grid {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 1240px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.v5prod {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--v5-line); border-radius: 16px;
  overflow: hidden; text-decoration: none; color: var(--v5-ink);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.v5prod:hover {
  border-color: #dfcbb2; transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(60,40,20,.12);
}
/* The photograph is the argument here, so it gets the space: a 4:3 window with
   the card's own rounding, and the image scales inside it on hover. */
.v5prod-shot { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #f2ece4; }
.v5prod-shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.v5prod:hover .v5prod-shot img { transform: scale(1.05); }

.v5prod-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.v5prod-name {
  font-size: 1rem; font-weight: 600; line-height: 1.35;
  /* Catalogue names vary a lot in length; two lines keeps every card's price
     row on the same baseline without truncating anything short. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.v5prod-bakery { margin-top: 4px; font-size: .85rem; color: var(--v5-muted); }
/* margin-top:auto pins price + View to the bottom whatever the name does. */
.v5prod-foot {
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.v5prod-price { font-size: 1.02rem; font-weight: 700; }
.v5prod-go {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .88rem; font-weight: 600; color: var(--v5-gold);
}
.v5prod-go svg { transition: transform .25s; }
.v5prod:hover .v5prod-go svg { transform: translateX(4px); }

.v5shop-more { max-width: 1240px; margin: 28px auto 0; }
.v5shop-more a {
  font-weight: 600; font-size: .95rem; color: var(--v5-ink);
  text-decoration: none; border-bottom: 1px solid #d9c9b4; padding-bottom: 2px;
}
.v5shop-more a:hover { color: var(--v5-gold); border-bottom-color: currentColor; }

/* ── 6. How it works ────────────────────────────────────────────────────── */
/* Compressed ~22% from the original 60/44/78 rhythm. By this point the concept
   is understood; this is supporting information and shouldn't take the same
   vertical weight as the sections that sell. */
.v5how { background: #fff; padding: 46px 32px 58px; scroll-margin-top: 76px; }
.v5how-title {
  margin: 0 auto 32px; text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--v5-ink);
}
.v5how-steps {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 1240px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.v5step-icon {
  width: 44px; height: 44px; margin-bottom: 11px;
  display: grid; place-items: center;
  background: #f6ece2; border-radius: 50%; font-size: 1.1rem;
}
.v5step-title { margin: 0 0 6px; font-size: .95rem; font-weight: 700; color: var(--v5-ink); line-height: 1.35; }
.v5step-body { margin: 0; font-size: .87rem; line-height: 1.55; color: var(--v5-muted); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Below ~1080 the four food panels get too narrow to read as photographs. */
@media (max-width: 1080px) {
  .v5panels { grid-template-columns: repeat(2, 1fr); margin-top: -46px; }
  /* Two across, so each card gets roughly twice the width — squarer still,
     which suits the landscape artwork. */
  .v5panel { aspect-ratio: 3 / 2.6; }
  .v5ask-inner { grid-template-columns: 1fr; gap: 34px; }
  .v5ask-cards { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  /* The horizontal scrim assumes the cake is off to the right, which stops
   * being true once the viewport is narrower than the photo. Switch to a
   * bottom-up wash and let the image cover. */
  .v5hero { min-height: 560px; }
  .v5hero-img { background-position: center 30%; background-size: cover; }
  .v5hero-scrim {
    background: linear-gradient(to bottom, rgba(15,10,9,.62) 0%, rgba(15,10,9,.42) 34%, rgba(15,10,9,.86) 100%);
  }
  .v5hero-inner { padding: 92px 22px 48px; }
  .v5trust-inner { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .v5how-steps { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .v5ask { padding: 22px 22px; }
  .v5ask-cards { grid-template-columns: 1fr; }
  .v5card { min-height: 0; }
  .v5shop { padding: 21px 22px 22px; }
  .v5shop-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

@media (max-width: 560px) {
  /* Stays two across on a phone: one full-width card per row turned four
     categories into four screens of scrolling. */
  /* A third of an inch of overlap on a phone. Deliberately far less than the
     80px desktop pull: the mobile hero-inner has only 48px of bottom padding
     (see the 860px block), so 32px is most of the room there is before the
     cards reach the "Try something like..." line. */
  .v5panels { grid-template-columns: repeat(2, 1fr); gap: 7px; padding: 0 12px 12px; margin-top: -32px; }
  .v5panel { aspect-ratio: 3 / 3.2; border-radius: 9px; }
  .v5panel-label { padding: 13px 13px; font-size: .85rem; }
  .v5panel-kicker { gap: 6px; }
  /* Sized so "Find something" still fits on one line at 390px, which is what
   * holds the headline to its intended two lines.
   *
   * The <br>s STAY. Hiding them to let the text reflow was the obvious move
   * and it is wrong: display:none on a <br> removes the line break without
   * leaving a space in its place, so the words either side weld together —
   * "somethingincredible", "craving,celebrating". */
  .v5hero-title { font-size: 2.45rem; }
  .v5search { padding: 7px 7px 7px 14px; }
  .v5mic { width: 36px; height: 36px; margin-right: 2px; }
  /* Phone: the label is nowrap at a fixed width and overflowed the search
     bar, so swap it for the arrow and make the button a round tap target.
     46px keeps it above the 44px minimum for a comfortable thumb. */
  .v5search-go {
    width: 46px; height: 46px;
    padding: 0; margin-right: 0;
    border-radius: 50%;
  }
  .v5go-label { display: none; }
  .v5go-icon { display: block; }
  .v5mic-hint { font-size: 1.15rem; }
  .v5trust-inner { grid-template-columns: 1fr; }
  .v5how-steps { grid-template-columns: 1fr; }
  /* Two across even on a phone: one card per row makes six products feel like
     an endless scroll, and the photographs still read at this size. */
  .v5shop-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .v5prod-body { padding: 12px 13px 14px; }
  .v5prod-name { font-size: .92rem; }
  .v5prod-foot { padding-top: 10px; }
  .v5prod-go { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .v5panel-img, .v5panel-arrow, .v5card-arrow, .v5ask-cta, .v5search-go { transition: none; }
  .v5panel:hover .v5panel-img { transform: none; }
}