/* ==========================================================================
   Oppan Bakery — main stylesheet
   Palette from the brand logo: crimson red gingham on warm cream.
   Type: Playfair Display (headings) · Karla (body) · Dancing Script (script)
         Baloo 2 (wordmark, badges, prices)
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --red: #B32430;
  --red-dark: #921A24;
  --red-deep: #7A121C;
  --red-soft: #F2D8CD;

  --cream: #FBF4E9;
  --cream-2: #F6EADA;
  --paper: #FFFDF9;

  --ink: #3E2A1D;
  --ink-strong: #241710;   /* near-black — wordmark & former red text */
  --body-c: #5D4839;
  --muted: #79614F;

  --gold: #B98A2F;
  --line: #EBD6C4;

  --wa: #12813F;
  --wa-dark: #0D6A33;

  --footer-bg: #37231A;

  --ff-head: "Playfair Display", Georgia, serif;
  --ff-body: "Karla", "Segoe UI", Arial, sans-serif;
  --ff-script: "Dancing Script", cursive;
  --ff-round: "Baloo 2", "Trebuchet MS", sans-serif;

  --shadow-sm: 0 2px 8px rgba(62, 42, 29, 0.08);
  --shadow-md: 0 10px 30px rgba(62, 42, 29, 0.12);
  --shadow-lg: 0 18px 48px rgba(62, 42, 29, 0.18);

  --radius: 20px;
  --container: 1200px;
  --header-h: 78px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

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

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

h1, h2, h3, h4 {
  font-family: var(--ff-head);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
}

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

ul, ol { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }

a { color: var(--ink-strong); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

::selection { background: var(--red); color: var(--cream); }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 32px);
}

.section { padding-block: clamp(64px, 9vw, 104px); }

.icon { width: 22px; height: 22px; flex-shrink: 0; }
.icon-heart { width: 18px; height: 18px; }

/* Skip link */
.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 200;
  background: var(--red);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus-visible { top: 0; color: #fff; }

/* Script + eyebrow */
.script { font-family: var(--ff-script); }

.eyebrow {
  font-family: var(--ff-script);
  font-size: clamp(1.35rem, 2.5vw, 1.6rem);
  font-weight: 600;
  color: var(--ink-strong);
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow.light { color: #FFEDE0; }

/* Section headings */
.section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(40px, 6vw, 56px);
}
.section-head h2 { font-size: clamp(2rem, 4.2vw, 2.75rem); }
.section-head-sm { margin-bottom: 32px; }
.section-head-sm h3 { font-size: clamp(1.55rem, 3vw, 1.9rem); }
.section-sub { color: var(--body-c); font-size: 1.05rem; max-width: 56ch; margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 26px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--ff-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--red); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--red-dark); color: #fff; box-shadow: var(--shadow-md); }

.btn-whatsapp { background: var(--wa); color: #fff; box-shadow: var(--shadow-sm); }
.btn-whatsapp:hover { background: var(--wa-dark); color: #fff; box-shadow: var(--shadow-md); }

.btn-outline { background: transparent; border-color: var(--red); color: var(--ink-strong); }
.btn-outline:hover { background: var(--red); color: #fff; }

.btn-cream { background: var(--cream); color: var(--ink-strong); box-shadow: var(--shadow-md); }
.btn-cream:hover { background: #fff; color: var(--ink-strong); }

.btn-sm { min-height: 44px; padding: 9px 20px; font-size: 0.95rem; }
.btn-lg { min-height: 56px; padding: 15px 34px; font-size: 1.05rem; }
.btn-lg .icon { width: 24px; height: 24px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 244, 233, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(235, 214, 196, 0.6);
  transition: box-shadow 0.25s ease;
}
.site-header.scrolled { box-shadow: var(--shadow-md); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand img { border-radius: 50%; }

.brand-name {
  font-family: var(--ff-round);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ink-strong);
  line-height: 1.1;
  white-space: nowrap;
}
.brand-name em { font-style: normal; color: var(--ink-strong); }

/* Wordmark + tagline stack together beside the logo. */
.brand-text { display: flex; flex-direction: column; gap: 1px; }

/* Set in Baloo 2 — the wordmark's own family — rather than the script face.
   Dancing Script was the readability problem: at any size that fits the header
   its x-height is tiny and the strokes are thin. Baloo has a large x-height and
   even strokes, so it reads clearly at a smaller nominal size.

   Colour is --ink, not --muted: 12.4:1 against the header background instead of
   5.3:1.

   SIZE IS LIMITED BY THE WORDMARK, not the page. The brand block is as wide as
   its widest line, and "Oppan Bakery" is 137px on a 375px phone. A tagline
   narrower than that costs nothing; one wider than it pushes the brand into the
   cart and menu buttons (the ceiling is about 152px before the block squashes).
   "Opps! It's Good" is 106px at 1rem, so it now sits comfortably at a size the
   longer "Baked to Be Remembered" (148px) could never reach. Re-measure if the
   wording changes. Never red. */
.brand-tagline {
  font-family: var(--ff-round);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}
@media (min-width: 600px) {
  .brand-tagline { font-size: 1.08rem; }
}
@media (max-width: 359px) {
  .brand-tagline { display: none; }
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.98rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.site-nav a:hover { background: var(--red-soft); color: var(--ink-strong); }
.site-nav a.active { color: var(--ink-strong); font-weight: 700; }

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

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 2.5px;
  border-radius: 2px;
  background: var(--red);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Gingham helpers ---------- */
.hero::before,
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(48px, 7vw, 88px) 0 clamp(72px, 9vw, 108px);
  overflow: hidden;
}
.hero::before {
  background-image:
    repeating-linear-gradient(0deg, rgba(179, 36, 48, 0.045) 0 16px, transparent 16px 48px),
    repeating-linear-gradient(90deg, rgba(179, 36, 48, 0.045) 0 16px, transparent 16px 48px);
}
.hero::after {
  content: "";
  position: absolute;
  right: -160px;
  top: -160px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 216, 205, 0.75), transparent 65%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 64px);
  align-items: center;
}

.hero-copy .eyebrow { font-size: clamp(1.4rem, 2.6vw, 1.7rem); }

.hero h1 {
  font-size: clamp(2.2rem, 3vw + 1.5rem, 3.9rem);
  font-weight: 700;
  margin-bottom: 0.4em;
}
.hero h1 .highlight { color: var(--ink-strong); font-style: italic; }

.hero-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.18rem);
  max-width: 54ch;
  margin-bottom: 28px;
}
.hero-lead strong { color: var(--ink); }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}
.hero-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.hero-points .icon { width: 17px; height: 17px; color: var(--red); }

/* Hero visual */
.hero-visual { position: relative; }
.hero-photo-wrap { position: relative; max-width: 560px; margin-inline: auto; }

.hero-photo {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: rotate(1.5deg);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

.hero-scallop-ring {
  position: absolute;
  inset: -22px -22px auto auto;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 3px dashed rgba(179, 36, 48, 0.5);
  transform: rotate(8deg);
}

.float-card {
  position: absolute;
  background: var(--paper);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
}
.float-card-product {
  left: -14px;
  bottom: -24px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  animation: floaty 5.5s ease-in-out infinite;
}
.float-card-product img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
}
.float-card-title { display: block; font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.float-card-sub { display: block; font-family: var(--ff-round); font-weight: 600; color: var(--ink-strong); font-size: 0.9rem; }

.float-card-badge {
  right: -8px;
  top: -18px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink-strong);
  transform: rotate(4deg);
  animation: floaty 6.5s ease-in-out infinite reverse;
}
.float-card-badge .icon-heart { color: var(--red); }

@keyframes floaty {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

/* Scalloped edges */
.scallop-edge {
  position: absolute;
  left: 0;
  right: 0;
  height: 18px;
  background-size: 20px 18px;
  background-repeat: repeat-x;
  pointer-events: none;
  z-index: 2;
}
.hero .scallop-edge-bottom {
  bottom: -1px;
  background-image: radial-gradient(circle at 10px 24px, var(--red) 12px, transparent 13px);
}
.order-section .scallop-edge-top {
  top: -1px;
  background-image: radial-gradient(circle at 10px -6px, var(--cream) 12px, transparent 13px);
}
.order-section .scallop-edge-bottom {
  bottom: -1px;
  background-image: radial-gradient(circle at 10px 24px, var(--cream) 12px, transparent 13px);
}

/* ---------- USP strip ---------- */
.usp-strip {
  position: relative;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 14px, transparent 14px 42px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 14px, transparent 14px 42px),
    var(--red);
  color: #fff;
  padding: clamp(40px, 5vw, 56px) 0;
}
.usp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 20px;
}
.usp-item { display: flex; align-items: flex-start; gap: 14px; }
.usp-item .icon { width: 30px; height: 30px; color: #FFE4D2; margin-top: 2px; }
.usp-item p { margin: 0; line-height: 1.4; }
.usp-item strong { display: block; font-size: 1.02rem; letter-spacing: 0.01em; }
.usp-item span { display: block; font-size: 0.88rem; color: #FFF0E4; margin-top: 2px; }
.usp-item .usp-uen {
  font-family: var(--ff-round);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Menu ---------- */
.menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.menu-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.menu-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.menu-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.menu-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.menu-card:hover .menu-media img { transform: scale(1.045); }

.menu-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(251, 244, 233, 0.95);
  color: var(--ink-strong);
  font-family: var(--ff-round);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 13px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.menu-badge-new {
  background: var(--red);
  color: #FFF6E9;
  letter-spacing: 0.04em;
}

/* Items whose price isn't published yet — ask via WhatsApp */
.price-ask {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: auto 0 0;
  padding: 11px 14px;
  border: 1px dashed #D9C0A8;
  border-radius: 12px;
  background: #FFF9F0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--body-c);
}
.price-ask .icon {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--red);
}
.price-ask strong { color: var(--ink); }
.price-ask-preorder {
  border-color: rgba(179, 36, 48, 0.4);
  background: #FDF1EC;
}

.menu-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.menu-body h3 { font-size: 1.38rem; margin-bottom: 4px; }
.menu-tag { font-size: 0.9rem; color: var(--muted); margin-bottom: 14px; }

.price-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: auto;
}
.price-list li { display: flex; align-items: baseline; gap: 8px; }
.price-item { font-size: 0.95rem; color: var(--body-c); white-space: nowrap; }
.price-item small { color: var(--muted); font-size: 0.8rem; }
.price-dots {
  flex: 1;
  border-bottom: 2px dotted #D9C0A8;
  transform: translateY(-4px);
  min-width: 16px;
}
.price-value {
  font-family: var(--ff-round);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.menu-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding: 6px 0;
  min-height: 44px;
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  color: var(--ink-strong);
  width: fit-content;
}
.menu-cta .icon { width: 18px; height: 18px; transition: transform 0.2s ease; }
.menu-cta:hover .icon { transform: translateX(4px); }

/* Granola */
.granola-block { margin-top: clamp(56px, 8vw, 80px); }

.granola-grid {
  display: grid;
  /* three items: flows 1 → 2 → 3 across without cramping the cards */
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 24px;
}

.menu-note {
  margin-top: 30px;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--muted);
}
.menu-note.center { text-align: center; }

/* ---------- How to order ---------- */
.order-section {
  position: relative;
  background: var(--cream-2);
  padding-block: clamp(84px, 10vw, 124px);
}

.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px 22px;
  list-style: none;
  counter-reset: step;
}

.step-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 24px 26px;
  box-shadow: var(--shadow-sm);
}

.step-num {
  position: absolute;
  top: -18px;
  left: 22px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #fff;
  font-family: var(--ff-round);
  font-weight: 700;
  font-size: 1.15rem;
  border-radius: 50%;
  border: 3px solid var(--cream-2);
  box-shadow: var(--shadow-sm);
}

.step-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #FAEADD;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.step-icon .icon { width: 27px; height: 27px; color: var(--red); }

.step-card h3 { font-size: 1.22rem; margin-bottom: 6px; }
.step-card p { font-size: 0.96rem; margin: 0; }
.step-card strong { color: var(--ink); }

.order-cta { text-align: center; margin-top: clamp(44px, 6vw, 56px); }
.order-cta-note { margin-top: 14px; font-size: 0.92rem; color: var(--muted); }

/* ---------- Delivery ---------- */
/* Two rates only — keep the pair centred rather than stretched across the page */
.delivery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 660px;
  margin-inline: auto;
}
.delivery-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px 22px 26px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.delivery-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.delivery-card .icon { width: 30px; height: 30px; color: var(--red); margin-inline: auto; }
.delivery-card h3 {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 1.08rem;
  margin: 12px 0 2px;
  letter-spacing: 0.02em;
}
.delivery-fee {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 2rem;
  color: var(--ink-strong);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.delivery-note {
  margin: 6px 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

/* ---------- About ---------- */
.about-section { background: var(--cream-2); }

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(44px, 6vw, 72px);
  align-items: center;
}

.about-visual { text-align: center; }
.about-logo-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow-md);
  padding: clamp(24px, 4vw, 36px);
  max-width: 360px;
  margin-inline: auto;
  transform: rotate(-2deg);
}
.about-logo-card img { border-radius: 18px; }
.about-script {
  margin-top: 26px;
  font-size: clamp(1.45rem, 2.5vw, 1.7rem);
  font-weight: 600;
  color: var(--ink-strong);
  line-height: 1.35;
}

.about-copy h2 { font-size: clamp(1.9rem, 3.8vw, 2.5rem); }
.about-copy p { font-size: 1.03rem; max-width: 58ch; }
.about-copy strong { color: var(--ink); }

.about-badges {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 26px;
}
.about-badges li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-weight: 500;
  color: var(--ink);
}
.about-badges .icon { width: 22px; height: 22px; color: var(--red); margin-top: 1px; }

/* ---------- FAQ ----------
   Answers are always visible rather than hidden behind an accordion: the text
   is what AI assistants and search engines actually read, and a customer
   scanning on a phone shouldn't have to tap eight times to find the one
   answer they came for.                                                     */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 1000px;
  margin-inline: auto;
}
.faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 24px 24px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.faq-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.faq-q {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.35;
  color: var(--ink-strong);
  margin: 0 0 10px;
}
.faq-a {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.72;
  color: var(--ink);
}

/* ---------- Legal pages (privacy, terms) ----------
   Long-form reading, so: a narrow measure, generous line height and clear
   heading rhythm. No red text, per the client's brand rule.               */
.legal-section { background: var(--cream-2); }
.legal {
  max-width: 760px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(28px, 5vw, 56px);
}
.legal .section-head { margin-bottom: 28px; }
.legal h1 { margin-bottom: 6px; }
.legal h2 {
  font-family: var(--ff-head);
  font-size: 1.28rem;
  color: var(--ink-strong);
  margin: 38px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal p, .legal li { font-size: 0.99rem; line-height: 1.78; color: var(--ink); }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 18px; padding-left: 22px; }
.legal li { margin-bottom: 9px; }
.legal a { color: var(--ink-strong); text-decoration: underline; }
.legal a:hover { opacity: 0.72; }
.legal-lede {
  font-size: 1.06rem !important;
  padding: 18px 20px;
  background: var(--cream-2);
  border-radius: 14px;
  margin-bottom: 30px !important;
}
.legal-note, .legal-cross { font-size: 0.92rem !important; color: var(--muted); }
.legal-cross { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); }

/* ---------- Gallery ---------- */
.gallery-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 8px 4px 16px;
  -webkit-overflow-scrolling: touch;
}
.gallery-item {
  flex: 0 0 auto;
  height: clamp(280px, 38vw, 360px);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  padding: 0;
  background: var(--paper);
  cursor: pointer;
  scroll-snap-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gallery-item:hover { transform: translateY(-5px) scale(1.01); box-shadow: var(--shadow-md); }
.gallery-item img { height: 100%; width: auto; }

/* ---------- Final CTA ---------- */
.final-cta {
  position: relative;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 14px, transparent 14px 42px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 14px, transparent 14px 42px),
    var(--red);
  text-align: center;
  overflow: hidden;
}
.final-cta::before {
  background-image: radial-gradient(circle at 10px -6px, var(--cream) 12px, transparent 13px);
  background-size: 20px 18px;
  background-repeat: repeat-x;
  height: 18px;
  inset: -1px 0 auto;
}
.final-cta h2 { color: #FFF6E9; font-size: clamp(2rem, 4.2vw, 2.7rem); }
.final-cta p { color: #F8E3D0; font-size: 1.08rem; margin-bottom: 30px; }
.final-cta .eyebrow { margin-bottom: 4px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--footer-bg);
  color: #E9D7C6;
  border-top: 8px solid var(--red);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 64px);
  padding-block: clamp(56px, 7vw, 76px) clamp(36px, 5vw, 48px);
}

.footer-brand .brand { margin-bottom: 18px; }
.footer-brand .brand-name { color: #FBF4E9; }
.footer-brand .brand-name em { color: #FBF4E9; }
.footer-brand p { font-size: 0.97rem; color: #D9C3B0; max-width: 44ch; }
.footer-script { color: #E9D7C6; font-size: 1.35rem; font-weight: 600; margin-top: 22px; }

/* Registered business details */
.biz-card {
  margin: 22px 0 0;
  padding: 16px 18px;
  max-width: 380px;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-left: 4px solid var(--red);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}
.biz-card > div { display: flex; flex-direction: column; gap: 1px; }
.biz-card dt {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #BC9E86;
}
.biz-card dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #FBF4E9;
}
.biz-card .biz-uen {
  font-family: var(--ff-round);
  font-size: 1.15rem;
  letter-spacing: 0.07em;
  color: #FBF4E9;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 480px) {
  .biz-card > div {
    display: grid;
    grid-template-columns: 124px 1fr;
    gap: 4px 12px;
    align-items: baseline;
  }
}

.footer-col h3 {
  font-family: var(--ff-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #BC9E86;
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { color: #E9D7C6; text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-col a strong { color: inherit; }

.footer-contact li { display: flex; align-items: flex-start; gap: 13px; font-size: 0.97rem; }
.footer-contact .icon { width: 22px; height: 22px; color: #EFA98F; margin-top: 2px; }
.footer-contact strong { color: #FBF4E9; }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-block: 20px; }
.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-size: 0.87rem;
  color: #C9B09B;
  /* keep clear of the floating WhatsApp button */
  padding-right: 84px;
}
.footer-bottom p { margin: 0; }
.footer-bottom strong { color: #E9D7C6; }

/* --- Builder credit ------------------------------------------------------ */
.footer-credit {
  background: #2A1912;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-block: 18px;
  text-align: center;
}
.credit-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.credit-link:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(244, 183, 156, 0.55);
  transform: translateY(-2px);
}
.credit-pre {
  font-size: 0.92rem;
  color: #C0A48F;
  letter-spacing: 0.02em;
}
.credit-brand {
  font-family: var(--ff-round);
  font-weight: 700;
  font-size: 1.22rem;
  line-height: 1;
  letter-spacing: 0.03em;
  color: #F0DFCE;
}
.credit-link:hover .credit-brand { color: #FFFFFF; }
.credit-arrow {
  width: 15px;
  height: 15px;
  color: #C0A48F;
  transition: transform 0.2s ease, color 0.2s ease;
}
.credit-link:hover .credit-arrow { color: #F6C3AA; transform: translate(2px, -2px); }

@media (min-width: 1400px) {
  .footer-bottom-inner { padding-right: 0; }
}

/* ---------- WhatsApp FAB ---------- */
.wa-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px rgba(13, 106, 51, 0.4);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.wa-fab:hover { transform: scale(1.07); background: var(--wa-dark); color: #fff; }
.wa-fab svg { width: 30px; height: 30px; }
.wa-fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(18, 129, 63, 0.5);
  animation: fab-pulse 2.4s ease-out infinite;
}
@keyframes fab-pulse {
  0% { transform: scale(1); opacity: 1; }
  70%, 100% { transform: scale(1.45); opacity: 0; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 540px);
  overflow: visible;
}
.lightbox::backdrop { background: rgba(38, 18, 12, 0.72); }
.lightbox img {
  width: 100%;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}
.lightbox-close {
  position: absolute;
  top: -16px;
  right: -14px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--cream);
  color: var(--red);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.2s ease;
}
.lightbox-close:hover { transform: scale(1.08); }

/* ---------- Reveal animation (JS-enhanced only; no-JS users see everything) ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .reveal.visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .delivery-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: repeat(2, 1fr); }

  /* Centre a lone card on the final row (see the 1100px block below). */
  .menu-grid > :last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
    width: calc(50% - 11px);
    margin-inline: auto;
  }
}

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
  .usp-grid { grid-template-columns: repeat(4, 1fr); }
  .about-grid { grid-template-columns: 0.9fr 1.1fr; }
  .footer-grid { grid-template-columns: 1.3fr 0.8fr 1fr; }
  .gallery-grid { justify-content: center; }
}

@media (min-width: 1100px) {
  /* three across — with 7 bakes that leaves one on the last row */
  .menu-grid { grid-template-columns: repeat(3, 1fr); }
  .steps-grid { grid-template-columns: repeat(4, 1fr); }

  /* A single leftover card would sit hard against the left edge and read as a
     mistake. This only matches when the last row really does hold one card
     (7 items, 10 items...), so it stays correct as the menu grows.          */
  .menu-grid > :last-child:nth-child(2n + 1) {
    grid-column: auto;
    width: auto;
    margin-inline: 0;
  }
  .menu-grid > :last-child:nth-child(3n + 1) { grid-column: 2; }
}

/* Mobile nav */
@media (max-width: 899px) {
  .nav-toggle { display: flex; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    display: none;
    padding: 12px 20px 18px;
  }
  .nav-open .site-nav { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav a {
    width: 100%;
    min-height: 48px;
    font-size: 1.05rem;
    border-radius: 12px;
  }
}

@media (max-width: 479px) {
  .header-actions .btn-sm { display: none; }
  .hero-ctas .btn { width: 100%; }
  .float-card-badge { right: 0; }
  .float-card-product { left: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Cart & checkout
   ========================================================================== */

/* --- Add-to-cart button in price rows --- */
.add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  padding: 4px 12px 4px 9px;
  min-height: 30px;
  position: relative;
  border: 1.5px solid var(--red);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-strong);
  font-family: var(--ff-body);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.add-btn::before {           /* extend tap target to 44px without bloating the row */
  content: "";
  position: absolute;
  inset: -8px -4px;
}
.add-btn svg { width: 13px; height: 13px; }
.add-btn:hover { background: var(--red); color: #fff; }
.add-btn:active { transform: scale(0.94); }
.price-list li { flex-wrap: nowrap; }

/* --- Header cart button --- */
.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--red);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.cart-btn:hover { background: var(--red-soft); }
.cart-btn .icon { width: 22px; height: 22px; }
.cart-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #fff;
  font-family: var(--ff-round);
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  border: 2px solid var(--cream);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.cart-btn.has-items .cart-count { opacity: 1; transform: scale(1); }

/* --- Cart drawer --- */
.cart-drawer {
  border: none;
  padding: 0;
  width: min(94vw, 430px);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
}
.cart-drawer::backdrop { background: rgba(38, 18, 12, 0.55); }
.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--line);
}
.cart-head h2 { font-size: 1.4rem; margin: 0; }
.cart-close {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--cream);
  color: var(--red);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.cart-close:hover { background: var(--red-soft); }
.cart-items { list-style: none; max-height: 46vh; overflow-y: auto; padding: 6px 20px; }
.cart-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
}
.cart-item:last-child { border-bottom: none; }
.cart-item-info { display: flex; flex-direction: column; min-width: 0; }
.cart-item-info strong { color: var(--ink); font-size: 0.95rem; }
.cart-item-info small { color: var(--muted); font-size: 0.8rem; }
.cart-item-controls { display: inline-flex; align-items: center; gap: 2px; }
.qty-btn {
  width: 34px;
  height: 34px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}
.qty-btn::before { content: ""; position: absolute; inset: -6px -2px; }
.qty-btn:hover { background: var(--red-soft); color: var(--ink-strong); }
.cart-qty {
  min-width: 26px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cart-line {
  font-family: var(--ff-round);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cart-empty { padding: 22px 20px; color: var(--body-c); margin: 0; }
.cart-foot { padding: 14px 20px 20px; border-top: 1px solid var(--line); }
.cart-subtotal {
  display: flex;
  justify-content: space-between;
  font-size: 1.05rem;
  margin-bottom: 4px;
}
.cart-subtotal strong { font-family: var(--ff-round); color: var(--ink-strong); font-size: 1.2rem; }
.cart-note { font-size: 0.85rem; color: var(--muted); margin: 0 0 12px; }
.cart-note.center { text-align: center; margin-top: 12px; }
.cart-checkout { width: 100%; }

/* --- Toast --- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  background: var(--ink);
  color: var(--cream);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 120;
  max-width: 90vw;
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* --- Checkout page --- */
.checkout-title { font-size: clamp(2rem, 4.2vw, 2.75rem); }
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 980px;
  margin-inline: auto;
}
.checkout-summary,
.checkout-form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
}
.checkout-summary h2, .checkout-form h2 { font-size: 1.35rem; margin-bottom: 16px; }
.summary-items { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.sum-line { display: flex; justify-content: space-between; gap: 14px; }
.sum-name { color: var(--ink); }
.sum-name small { color: var(--muted); font-weight: 400; }
.sum-price {
  font-family: var(--ff-round);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.summary-totals { margin: 16px 0 10px; border-top: 2px dotted var(--line); padding-top: 12px; }
.summary-totals > div { display: flex; justify-content: space-between; padding: 3px 0; }
.summary-totals dt { color: var(--body-c); }
.summary-totals dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.summary-grand { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 9px !important; }
.summary-grand dd { color: var(--ink-strong); font-family: var(--ff-round); font-size: 1.25rem; }

.field { margin-bottom: 18px; }
/* Direct children only — the delivery-area <label>s are nested inside
   .area-options and must keep their own flex layout. Without the ">" this
   rule's higher specificity forced them to display:block and the radio,
   text and price stacked on separate lines. */
.field > label, .field > legend {
  display: block;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  font-size: 0.97rem;
}
.field-optional { font-weight: 400; color: var(--muted); }
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="date"],
.field textarea {
  width: 100%;
  padding: 12px 14px;
  min-height: 48px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.2s ease;
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(179, 36, 48, 0.12);
}
.field-help { font-size: 0.83rem; color: var(--muted); margin: 6px 0 0; }
.area-options { display: flex; flex-direction: column; gap: 10px; }
.area-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.area-option:hover { background: #FFF9F0; }
.area-option:has(input:checked) { border-color: var(--red); background: #FDF1EC; }
.area-option input { accent-color: var(--red); width: 18px; height: 18px; flex-shrink: 0; }
.area-body { flex: 1; display: flex; flex-direction: column; }
.area-body strong { color: var(--ink); }
.area-body small { color: var(--muted); font-size: 0.82rem; }
.area-fee { font-family: var(--ff-round); font-weight: 700; color: var(--ink-strong); }
.hp-field { position: absolute; left: -9999px; top: -9999px; }
.checkout-submit { width: 100%; }
.checkout-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.form-error {
  max-width: 980px;
  margin: 0 auto 22px;
  padding: 14px 18px;
  background: #FDECEA;
  border: 1.5px solid #D33;
  border-radius: 12px;
  color: #8A1F1B;
  font-weight: 500;
}

/* --- Order confirmation page --- */
.order-panel { max-width: 980px; }
.order-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.pay-card, .order-summary {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
}
.pay-card { border-top: 5px solid var(--red); text-align: center; }
.pay-card h2, .order-summary h2 { font-size: 1.35rem; margin-bottom: 14px; }
.qr-box {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 10px;
}
.qr-box img { display: block; width: 220px; height: 220px; image-rendering: pixelated; }
.qr-hint { font-size: 0.86rem; color: var(--muted); margin: 8px 0 14px; }
.pay-details { margin: 14px auto; max-width: 320px; text-align: left; }
.pay-details > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
}
.pay-details dt { color: var(--body-c); }
.pay-details dd { margin: 0; font-weight: 700; color: var(--ink); }
.pay-strong { font-family: var(--ff-round); font-size: 1.05rem; }
.pay-ref { color: var(--ink-strong) !important; letter-spacing: 0.04em; }
.next-steps {
  list-style: none;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--body-c);
  font-size: 0.95rem;
}
.next-steps strong { color: var(--ink-strong); }

@media (min-width: 820px) {
  .checkout-grid { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
  .checkout-summary { position: sticky; top: calc(var(--header-h) + 20px); }
  .order-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 479px) {
  .cart-item { grid-template-columns: 1fr auto; }
  .cart-line { grid-column: 2; }
}

/* ==========================================================================
   Special Moments — bulk / event orders
   ========================================================================== */
.occasions-section {
  position: relative;
  /* subtle gingham wash ties it to the hero and separates it from the
     plain menu section above without a hard colour change */
  background:
    repeating-linear-gradient(0deg, rgba(179, 36, 48, 0.038) 0 14px, transparent 14px 42px),
    repeating-linear-gradient(90deg, rgba(179, 36, 48, 0.038) 0 14px, transparent 14px 42px),
    var(--cream-2);
}

.occasions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  max-width: 1000px;
  margin-inline: auto;
}

.occasion-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  border-radius: var(--radius);
  padding: 34px 26px 30px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.occasion-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.occasion-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--red-soft);
  display: grid;
  place-items: center;
  outline: 2px dashed rgba(179, 36, 48, 0.35);
  outline-offset: 5px;
}
.occasion-icon .icon { width: 32px; height: 32px; color: var(--red); }

.occasion-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.occasion-card p { color: var(--body-c); font-size: 0.97rem; margin: 0; }

.occasions-script {
  text-align: center;
  margin: clamp(30px, 5vw, 42px) auto 0;
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  font-weight: 600;
  color: var(--ink-strong);
  line-height: 1.4;
}

.occasions-cta { text-align: center; margin-top: 22px; }
.occasions-cta .order-cta-note { max-width: 46ch; margin-inline: auto; }

@media (min-width: 700px) {
  .occasions-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Two fields side by side (unit no. + postal code) */
.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 16px;
}
@media (min-width: 420px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

/* Small qualifier text in the footer contact list (e.g. "payment only") */
.contact-qualifier {
  color: #BC9E86;
  font-size: 0.82rem;
  font-weight: 400;
}