/* ==========================================================================
   The Happy Babka — vegan home bakery
   Warm bakery palette, adapted from the scottmarkovits.com design system
   ========================================================================== */

:root {
  /* Surfaces */
  --cream: #FDF7ED;
  --cream-deep: #F7EBD9;
  --white: #FFFFFF;
  --sky-top: #FBE3C4;
  --sky-bottom: #FDF1DF;
  --oat-bg: #F6EEE2;

  /* Ink — chocolate instead of navy */
  --choc: #3E2317;
  --choc-soft: #5C3A28;
  --muted: #856450;

  /* Accents — pulled from the babka illustrations */
  --dough: #F0B45E;
  --dough-deep: #C97F22;
  --dough-ink: #3E2317;
  --cinnamon: #C86B3C;
  --cinnamon-deep: #9A4E27;
  --cocoa: #6B4226;
  --cocoa-deep: #442617;
  --pistachio: #B6CE8E;
  --pistachio-deep: #7E9A55;
  --berry: #F0BCC6;
  --berry-deep: #C4707F;
  --whatsapp: #25D366;
  --whatsapp-deep: #1BA950;

  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 2px 6px rgba(62, 35, 23, 0.06), 0 12px 32px rgba(62, 35, 23, 0.10);
  --shadow-soft: 0 1px 3px rgba(62, 35, 23, 0.09);
  --container: 1160px;

  --z-doodle: 1;
  --z-content: 10;
  --z-nav: 50;
  --z-float: 60;
}

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

/* Author display rules outrank the UA sheet's [hidden] — keep hidden hidden. */
[hidden] { display: none !important; }

html { scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  font-family: "Lexend", "Avenir Next", "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--choc-soft);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: "Fredoka", "Lexend", sans-serif;
  color: var(--choc);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h3 { font-size: 1.35rem; line-height: 1.3; }
p { margin: 0 0 1em; }
a { color: var(--cinnamon-deep); }
img, svg { display: block; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; position: relative; z-index: var(--z-content); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--cinnamon);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ==================== Buttons ==================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: "Fredoka", inherit; font-weight: 500; font-size: 1rem;
  padding: 14px 28px; border-radius: 14px; border: none;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }

.btn-dough { background: var(--dough); color: var(--dough-ink); box-shadow: 0 4px 0 var(--dough-deep); }
.btn-dough:hover { background: #F6C376; box-shadow: 0 6px 0 var(--dough-deep); }
.btn-dough:active { box-shadow: 0 2px 0 var(--dough-deep); }

.btn-choc { background: var(--cocoa); color: #FDF7ED; box-shadow: 0 4px 0 var(--cocoa-deep); }
.btn-choc:hover { background: #7C4E2E; box-shadow: 0 6px 0 var(--cocoa-deep); }
.btn-choc:active { box-shadow: 0 2px 0 var(--cocoa-deep); }

.btn-cinn { background: var(--cinnamon); color: #FFF6EE; box-shadow: 0 4px 0 var(--cinnamon-deep); }
.btn-cinn:hover { background: #D67C4C; box-shadow: 0 6px 0 var(--cinnamon-deep); }
.btn-cinn:active { box-shadow: 0 2px 0 var(--cinnamon-deep); }

.btn-whatsapp { background: var(--whatsapp); color: #06301A; box-shadow: 0 4px 0 var(--whatsapp-deep); }
.btn-whatsapp:hover { background: #3ADD79; box-shadow: 0 6px 0 var(--whatsapp-deep); }
.btn-whatsapp:active { box-shadow: 0 2px 0 var(--whatsapp-deep); }

.btn-outline {
  background: var(--white); color: var(--choc);
  box-shadow: inset 0 0 0 2px #E4D5C2, 0 3px 0 #E4D5C2;
}
.btn-outline:hover { box-shadow: inset 0 0 0 2px var(--choc); }

.btn-sm { padding: 10px 18px; font-size: 0.92rem; }
.btn-lg { padding: 17px 34px; font-size: 1.08rem; }
.btn-xl { padding: 19px 38px; font-size: 1.12rem; }
.btn-block { width: 100%; }

.link-btn {
  background: none; border: none; padding: 6px 2px; cursor: pointer;
  font-family: inherit; font-size: 0.88rem; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover { color: var(--choc); }

/* ==================== Nav ==================== */
.nav-wrap {
  position: fixed; top: 16px; left: 16px; right: 16px;
  z-index: var(--z-nav); display: flex; justify-content: center;
  pointer-events: none;
}
.nav {
  pointer-events: auto;
  display: flex; align-items: center; gap: 28px;
  background: rgba(255, 253, 249, 0.93);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(62, 35, 23, 0.09);
  border-radius: var(--radius-pill);
  padding: 9px 12px 9px 16px;
  box-shadow: var(--shadow-card);
  max-width: 960px; width: 100%;
}
.nav-logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "Fredoka", sans-serif; font-weight: 600;
  color: var(--choc); text-decoration: none; font-size: 1.05rem;
  white-space: nowrap;
}
.nav-logo-mark { width: 38px; height: 38px; flex: none; display: block; }
.nav-logo-mark img { width: 100%; height: 100%; object-fit: contain; }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a {
  color: var(--choc-soft); text-decoration: none; font-size: 0.95rem; white-space: nowrap;
  padding: 6px 2px; border-radius: 6px; transition: color 160ms ease;
}
.nav-links a:hover { color: var(--cinnamon-deep); }
.nav-actions { display: flex; align-items: center; gap: 10px; }

/* ==================== Scribble highlight ==================== */
.scribble {
  position: relative; display: inline-block; padding: 0.05em 0.32em;
  border-radius: 0.45em 0.7em 0.5em 0.8em / 0.8em 0.45em 0.75em 0.5em;
  transform: rotate(-0.8deg);
}
.scribble-dough { background: var(--dough); color: var(--dough-ink); }
.scribble-cinnamon { background: var(--cinnamon); color: #FFF6EE; }
.scribble-cocoa { background: var(--cocoa); color: #FDF7ED; }
.scribble-pistachio { background: var(--pistachio); color: #2F3D1C; }
.scribble-berry { background: var(--berry); color: #5C2230; }
.scribble-sm { padding: 0 0.25em; }

/* ==================== Section primitives ==================== */
.eyebrow {
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 18px; text-align: center;
}
.eyebrow-left { text-align: left; }
.section-headline { font-size: clamp(1.9rem, 4vw, 2.8rem); max-width: 20em; line-height: 1.24; }
.section-headline.center { margin-inline: auto; text-align: center; }
.section-sub { color: var(--muted); max-width: 38em; margin-bottom: 2.5em; }
.section-sub.center { margin-inline: auto; text-align: center; }

/* ==================== Hero ==================== */
.hero {
  position: relative;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 76%, var(--cream) 100%);
  padding: 150px 0 30px;
  overflow: hidden;
}
.hero-inner { text-align: center; }
.hero-badge {
  display: inline-block; background: var(--white);
  border: 1px solid rgba(62, 35, 23, 0.1);
  border-radius: var(--radius-pill); padding: 8px 20px;
  font-size: 0.86rem; color: var(--choc-soft);
  box-shadow: var(--shadow-soft); margin-bottom: 24px;
}
.hero-headline {
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  margin: 0 auto 24px; max-width: 15em; line-height: 1.2;
  font-weight: 600;
}
/* Dietary strip — people with restrictions scan for their word rather than
   read, so these sit directly under the H1 as discrete scannable chips. */
.diet-strip {
  list-style: none; margin: 0 auto 28px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
  max-width: 40em;
}
.diet-strip li {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--white); border: 1px solid rgba(62, 35, 23, 0.1);
  border-radius: var(--radius-pill); padding: 7px 16px;
  font-size: 0.88rem; font-weight: 500; color: var(--choc);
  box-shadow: var(--shadow-soft); white-space: nowrap;
}
.diet-strip li span { font-size: 1rem; line-height: 1; }
.diet-strip .diet-soon {
  background: transparent; color: var(--muted); font-weight: 400;
  border-style: dashed; border-color: var(--pistachio-deep); box-shadow: none;
}

.hero-sub { max-width: 38em; margin: 0 auto 32px; font-size: 1.08rem; color: var(--choc-soft); }
.hero-cta { margin-bottom: 40px; }
.cta-micro { font-size: 0.88rem; color: var(--muted); margin-top: 14px; }

.hero-babkas {
  display: flex; justify-content: center; align-items: flex-end;
  margin-bottom: 36px;
}
.hb { width: clamp(180px, 30vw, 330px); height: auto; }
.hb-choc { transform: rotate(-5deg); z-index: 2; }
.hb-cinn { transform: rotate(5deg); margin-left: -6%; }

.trust-bar {
  display: inline-flex; align-items: center; gap: clamp(18px, 4vw, 44px);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(62, 35, 23, 0.08);
  border-radius: var(--radius-lg); padding: 20px 36px;
  backdrop-filter: blur(6px);
}
.trust-stat { display: flex; flex-direction: column; gap: 2px; }
.trust-num { font-family: "Fredoka", sans-serif; font-size: 1.5rem; font-weight: 600; color: var(--choc); line-height: 1.1; }
.trust-label { font-size: 0.8rem; color: var(--muted); }
.trust-divider { width: 1px; height: 38px; background: rgba(62, 35, 23, 0.14); }

/* Doodles */
.doodles { position: absolute; inset: 0; z-index: var(--z-doodle); pointer-events: none; }
.doodle { position: absolute; opacity: 0.75; }
.d-swirl1 { width: 58px; left: 6%; top: 20%; }
.d-swirl2 { width: 44px; right: 8%; top: 62%; transform: rotate(20deg); }
.d-wheat { width: 46px; left: 11%; top: 62%; transform: rotate(-14deg); }
.d-heart { width: 32px; right: 14%; top: 24%; }
.d-sprinkle1 { width: 26px; left: 22%; top: 13%; }
.d-sprinkle2 { width: 22px; right: 24%; top: 74%; }
.d-star { width: 24px; left: 30%; top: 72%; }
.d-cinnstick1 { width: 30px; right: 6%; top: 36%; transform: rotate(24deg); }
.d-cinnstick2 { width: 24px; left: 16%; top: 34%; transform: rotate(-32deg); }
.d-bean1 { width: 34px; left: 27%; top: 46%; transform: rotate(-16deg); }
.d-bean2 { width: 28px; right: 19%; top: 46%; transform: rotate(22deg); }
.d-bean3 { width: 24px; right: 31%; top: 22%; transform: rotate(-8deg); }

.wave-divider { margin-top: 40px; }
.wave-divider svg { width: 100%; height: 90px; }

@keyframes drift {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  33% { translate: 6px -12px; rotate: 3deg; }
  66% { translate: -5px 8px; rotate: -3deg; }
}
@keyframes bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}
.doodle { animation: drift 10s ease-in-out infinite; }
.d-swirl2 { animation-duration: 12s; animation-delay: 1s; }
.d-wheat { animation-duration: 9s; animation-delay: 0.5s; }
.d-heart, .d-star { animation: bob 6s ease-in-out infinite; }
.d-sprinkle1, .d-sprinkle2 { animation: bob 5s ease-in-out infinite 1s; }
.d-bean1 { animation-duration: 11s; animation-delay: 0.8s; }
.d-bean2 { animation: bob 6.5s ease-in-out infinite 0.4s; }
.d-bean3 { animation: bob 7.5s ease-in-out infinite 1.6s; }
.d-cinnstick2 { animation-duration: 13s; animation-delay: 2s; }
.hb { animation: bob 7s ease-in-out infinite; }
.hb-cinn { animation-delay: 1.2s; }

/* ==================== Products ==================== */
.babkas { background: var(--cream); padding: 40px 0 100px; }
.product-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin: 0 auto 32px;
}
.product-card {
  position: relative;
  background: var(--white); border-radius: var(--radius-lg);
  padding: 30px 28px 28px; box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
  border: 2px solid transparent;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.product-card.in-cart { border-color: var(--pistachio-deep); }
.product-tag {
  position: absolute; top: 18px; right: 18px;
  font-family: "Fredoka", sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: var(--radius-pill); padding: 5px 13px;
}
.tag-choc { background: var(--cocoa); color: #FDF7ED; }
.tag-cinn { background: var(--cinnamon); color: #FFF6EE; }

.product-art {
  background: var(--cream-deep); border-radius: var(--radius-md);
  padding: 14px; margin-bottom: 22px;
}
.product-art img { width: 100%; height: auto; }
.product-card:hover .product-art img { animation: bob 2.4s ease-in-out infinite; }
.product-card h3 { font-size: 1.5rem; margin-bottom: 0.4em; }
.product-desc { font-size: 0.96rem; }
.product-notes {
  list-style: none; margin: 0 0 20px; padding: 0;
  font-size: 0.86rem; color: var(--muted);
}
.product-notes li { padding: 4px 0 4px 20px; position: relative; }
.product-notes li::before {
  content: "•"; position: absolute; left: 4px; color: var(--dough-deep); font-weight: 700;
}

.product-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: auto; padding: 14px 16px;
  background: var(--cream-deep); border-radius: var(--radius-md);
  margin-bottom: 16px;
}
.product-price { font-family: "Fredoka", sans-serif; font-size: 1.5rem; font-weight: 600; color: var(--choc); }
.qty { display: inline-flex; align-items: center; gap: 4px; background: var(--white); border-radius: var(--radius-pill); padding: 4px; box-shadow: var(--shadow-soft); }
.qty-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--cream-deep); color: var(--choc);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 160ms ease, transform 120ms ease;
}
.qty-btn:hover { background: var(--dough); }
.qty-btn:active { transform: scale(0.9); }
.qty-num { min-width: 28px; text-align: center; font-weight: 600; color: var(--choc); font-family: "Fredoka", sans-serif; }

/* ==================== Gluten-free coming soon ====================
   Sits in .product-grid as a third card so it shares the row height
   with the two live products. Only the differences live here. */
.product-card-gf { border-style: dashed; border-color: var(--pistachio-deep); }
.tag-gf { background: var(--pistachio); color: #2F3D1C; }
.product-card-gf .product-art img { filter: grayscale(0.45) opacity(0.75); }
.gf-form { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.gf-form .field label { font-size: 0.86rem; }
.gf-form .field input { padding: 10px 12px; font-size: 0.92rem; }
.gf-form .btn { margin-top: 4px; }
.optional { color: var(--muted); font-weight: 400; font-size: 0.86em; }

/* ==================== Catering ==================== */
.catering-note {
  background: var(--cocoa); color: #F3E4D6;
  border-radius: var(--radius-lg); padding: 36px 40px;
  max-width: 900px; margin: 0 auto; text-align: center;
  box-shadow: var(--shadow-card);
}
.catering-note h3 { color: #fff; font-size: 1.5rem; }
.catering-note p { max-width: 46em; margin: 0 auto 22px; font-size: 0.98rem; }

/* ==================== Pareve / no dairy ==================== */
.pareve { background: var(--cream-deep); padding: 90px 0; }
.pareve-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.pareve-note {
  background: var(--white); border-left: 4px solid var(--pistachio-deep);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 16px 20px; font-size: 0.92rem; color: var(--muted); margin-top: 24px;
}
.pareve-note strong { color: var(--choc); }
.pareve-points {
  list-style: none; margin: 0; padding: 0;
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.pareve-points li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 24px; border-bottom: 1px solid rgba(62, 35, 23, 0.08);
}
.pareve-points li:last-child { border-bottom: none; background: var(--cream); }
.pp-icon { font-size: 1.5rem; line-height: 1.2; flex: none; }
.pareve-points strong { display: block; color: var(--choc); font-size: 1rem; }
.pareve-points span:not(.pp-icon) { display: block; font-size: 0.88rem; color: var(--muted); margin-top: 2px; }

/* ==================== How it works ==================== */
.how { background: var(--oat-bg); padding: 90px 0; }
.friday-callout {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 30px 34px; box-shadow: var(--shadow-soft);
  max-width: 760px; margin: 0 auto; text-align: center;
  border-top: 5px solid var(--dough);
}
.friday-callout h3 { font-size: 1.4rem; }
.friday-callout p { font-size: 0.96rem; color: var(--muted); }
.friday-cutoff {
  background: var(--cream-deep); border-radius: var(--radius-md);
  padding: 13px 18px; margin: 0; color: var(--choc-soft) !important;
}
.friday-cutoff strong { color: var(--cinnamon-deep); }
.steps { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step { position: relative; display: flex; flex-direction: column; gap: 14px; }
.step-num {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--dough); color: var(--dough-ink);
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 0 var(--dough-deep); flex: none;
}
.step:nth-child(2) .step-num { background: var(--cinnamon); color: #FFF6EE; box-shadow: 0 3px 0 var(--cinnamon-deep); }
.step:nth-child(3) .step-num { background: var(--pistachio); color: #2F3D1C; box-shadow: 0 3px 0 var(--pistachio-deep); }
.step:nth-child(4) .step-num { background: var(--cocoa); color: #FDF7ED; box-shadow: 0 3px 0 var(--cocoa-deep); }
.step-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 24px 24px 20px; box-shadow: var(--shadow-soft); flex: 1;
}
.step-card h3 { font-size: 1.12rem; margin-bottom: 0.5em; }
.step-card p { font-size: 0.92rem; margin: 0; color: var(--muted); }

/* ==================== Order ==================== */
.order { background: var(--cream); padding: 90px 0; }
.order-card {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 48px;
  max-width: 780px; margin: 0 auto;
  border-top: 6px solid var(--dough);
}
.order-card h2 { font-size: clamp(1.7rem, 3.4vw, 2.2rem); }
.order-intro { color: var(--muted); font-size: 0.98rem; margin-bottom: 28px; }

.order-summary {
  background: var(--cream-deep); border-radius: var(--radius-md);
  padding: 20px 22px; margin-bottom: 30px;
}
.summary-empty { margin: 0; font-size: 0.94rem; color: var(--muted); }
.summary-lines { list-style: none; margin: 0; padding: 0; }
.summary-lines li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0; font-size: 0.96rem; color: var(--choc-soft);
  border-bottom: 1px solid rgba(62, 35, 23, 0.08);
}
.summary-lines li span:last-child { font-weight: 600; color: var(--choc); white-space: nowrap; }
.summary-lines li.summary-fee { color: var(--muted); font-size: 0.9rem; }
.summary-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px; margin-top: 4px;
  font-family: "Fredoka", sans-serif;
}
.summary-total strong { font-size: 1.5rem; color: var(--choc); }
.hint-alert { color: var(--cinnamon-deep) !important; font-weight: 500; }

.order-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-full { grid-column: 1 / -1; }
.field label, .field legend {
  font-weight: 500; font-size: 0.92rem; color: var(--choc);
}
fieldset.field { border: none; margin: 0; padding: 0; }
.req { color: var(--cinnamon-deep); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 0.98rem; color: var(--choc);
  background: var(--cream); border: 2px solid #EADCC8;
  border-radius: 12px; padding: 12px 14px; width: 100%;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.field input::placeholder, .field textarea::placeholder { color: #B49B85; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--dough-deep); background: var(--white); outline-offset: 1px;
}
.field input.invalid { border-color: var(--cinnamon-deep); background: #FDF0EA; }
.field textarea { resize: vertical; }
.field-hint { font-size: 0.82rem; color: var(--muted); margin: 0; }

.radio-row { display: flex; gap: 12px; flex-wrap: wrap; }
.radio-pill { position: relative; cursor: pointer; }
.radio-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-pill span {
  display: inline-block; padding: 11px 22px;
  background: var(--cream); border: 2px solid #EADCC8;
  border-radius: var(--radius-pill); font-size: 0.94rem;
  transition: all 160ms ease;
}
.radio-pill input:checked + span {
  background: var(--dough); border-color: var(--dough-deep); color: var(--dough-ink); font-weight: 500;
}
.radio-pill input:focus-visible + span { outline: 3px solid var(--cinnamon); outline-offset: 2px; }

.form-foot { grid-column: 1 / -1; text-align: center; margin-top: 8px; }
.form-micro { font-size: 0.85rem; color: var(--muted); margin: 14px 0 4px; }
.form-error {
  background: #FDECE4; color: var(--cinnamon-deep);
  border-radius: 12px; padding: 12px 16px; margin: 14px 0 0;
  font-size: 0.92rem; font-weight: 500;
}

/* ==================== About ==================== */
.about { background: var(--oat-bg); padding: 90px 0; }
.about-grid { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center; }
.about-art {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 26px; box-shadow: var(--shadow-card);
}
.about-art img { width: 100%; height: auto; }
.promise-list {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 24px 28px; box-shadow: var(--shadow-soft); margin-top: 26px;
}
.promise-title { font-weight: 600; color: var(--choc); margin-bottom: 10px; }
.promise-list ul { list-style: none; margin: 0; padding: 0; }
.promise-list li { padding: 8px 0; font-size: 0.96rem; border-bottom: 1px solid rgba(62, 35, 23, 0.07); }
.promise-list li:last-child { border-bottom: none; }
.yes, .no {
  display: inline-block; font-family: "Fredoka", sans-serif;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: var(--radius-pill); padding: 3px 11px; margin-right: 9px;
}
.yes { background: var(--pistachio); color: #2F3D1C; }
.no { background: var(--berry); color: #5C2230; }

/* ==================== FAQ ==================== */
.faq { background: var(--cream); padding: 90px 0; }
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--white); border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft); overflow: hidden;
}
.faq-item summary {
  cursor: pointer; padding: 20px 24px; list-style: none;
  font-family: "Fredoka", sans-serif; font-weight: 500; font-size: 1.05rem; color: var(--choc);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 1.5rem; color: var(--dough-deep); line-height: 1;
  transition: transform 220ms ease; flex: none;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 24px 22px; margin: 0; font-size: 0.96rem; color: var(--muted); }

/* ==================== Final CTA ==================== */
.final-cta {
  background: linear-gradient(180deg, var(--cream) 0%, var(--sky-bottom) 35%, var(--sky-top) 100%);
  padding: 80px 0 100px; text-align: center;
}
.final-babka { width: clamp(160px, 24vw, 240px); height: auto; margin: 0 auto 12px; animation: bob 6s ease-in-out infinite; }
.final-headline { font-size: clamp(2rem, 4.6vw, 3.1rem); margin-bottom: 18px; line-height: 1.24; }
.final-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ==================== Footer ==================== */
.footer { background: var(--choc); color: #D6C2B4; padding: 64px 0 32px; font-size: 0.94rem; }
.footer a { color: #EFE2D8; text-decoration: none; transition: color 160ms ease; }
.footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; margin-bottom: 48px; }
.footer-brand .nav-logo { color: #fff; margin-bottom: 14px; }
.footer-brand p { max-width: 26em; }
.footer-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.footer-nav a { display: block; padding: 5px 0; }
.footer-head { font-family: "Fredoka", sans-serif; font-weight: 600; color: #fff; margin-bottom: 8px; }
.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 0.84rem; color: #A88F7D;
}
.footer-legal p { margin: 0; }
.footer-he { font-size: 0.82rem; opacity: 0.75; flex-basis: 100%; }

/* ==================== Kosher certificate banner ====================
   Hidden until the banner markup is uncommented in index.html.
   The :has() rules below shift the fixed nav and hero down automatically
   when the banner is present, so uncommenting needs no other change. */
.kosher-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 55;
  background: var(--choc); color: var(--cream);
  font-size: 0.88rem; padding: 9px 16px;
}
.kosher-banner-inner {
  max-width: var(--container); margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap; text-align: center;
}
.kosher-banner svg { width: 17px; height: 17px; color: var(--dough); flex: none; }
.kosher-banner strong { color: var(--dough); font-weight: 600; }
.kosher-banner a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.kosher-banner a:hover { color: var(--dough); }

body:has(.kosher-banner) .nav-wrap { top: 54px; }
body:has(.kosher-banner) .hero { padding-top: 190px; }

/* ==================== Testimonials ==================== */
.testimonials { background: var(--cream-deep); padding: 90px 0; }
.testimonial-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px; max-width: 1000px; margin: 0 auto;
}
.testimonial-card {
  margin: 0; background: var(--white); border-radius: var(--radius-lg);
  padding: 28px 26px; box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column; gap: 16px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.testimonial-card blockquote { margin: 0; font-size: 0.98rem; color: var(--choc-soft); }
.testimonial-shot {
  width: 100%; height: auto; border-radius: var(--radius-md);
  border: 1px solid rgba(62, 35, 23, 0.12);
}
.testimonial-card figcaption {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: auto; font-size: 0.92rem; color: var(--choc);
}
.testimonial-card figcaption strong { font-family: "Fredoka", sans-serif; }
.testimonial-card small { color: var(--muted); }

/* ==================== Floating WhatsApp ==================== */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: var(--z-float);
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--whatsapp); color: #06301A;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 0 var(--whatsapp-deep), var(--shadow-card);
  transition: transform 180ms ease, bottom 240ms ease;
}
.wa-float svg { width: 30px; height: 30px; }
.wa-float:hover { transform: translateY(-3px) scale(1.05); }
body.has-cart .wa-float { bottom: 88px; }

/* ==================== Sticky cart bar ==================== */
.cart-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-float);
  background: rgba(255, 253, 249, 0.96); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(62, 35, 23, 0.1);
  box-shadow: 0 -6px 24px rgba(62, 35, 23, 0.1);
  padding: 12px 16px;
  animation: slideUp 260ms ease;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cart-bar-inner {
  max-width: var(--container); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-right: 74px;
}
.cart-bar-text { font-size: 0.94rem; color: var(--choc-soft); }
.cart-bar-text strong { color: var(--choc); font-family: "Fredoka", sans-serif; }

/* ==================== Toast ==================== */
.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  z-index: 70; background: var(--choc); color: var(--cream);
  padding: 13px 24px; border-radius: var(--radius-pill);
  font-size: 0.92rem; box-shadow: var(--shadow-card);
  animation: toastIn 240ms ease;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ==================== Reveal ==================== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; }
  .btn, .product-card, .faq-item { transition: none; }
}

/* ==================== Responsive ==================== */
@media (max-width: 980px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-art { max-width: 260px; margin: 0 auto; }
  .pareve-grid { grid-template-columns: 1fr; gap: 36px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .wa-label { display: none; }
  .nav-actions .btn-whatsapp { padding: 10px; }
  .product-grid { grid-template-columns: 1fr; max-width: 480px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .order-card { padding: 34px 26px; }
  .trust-bar { flex-direction: column; gap: 14px; padding: 22px 36px; }
  .trust-divider { width: 56px; height: 1px; }
}

@media (max-width: 560px) {
  body { font-size: 17px; }
  .nav-wrap { top: 10px; left: 10px; right: 10px; }
  .nav { gap: 6px; padding: 7px 7px 7px 10px; }
  .nav-logo { font-size: 0.88rem; gap: 6px; }
  .nav-logo-mark { width: 30px; height: 30px; }
  .nav .btn-sm { padding: 9px 13px; font-size: 0.84rem; }
  .hero { padding-top: 112px; }
  .hero-headline { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .section-headline { font-size: clamp(1.5rem, 6vw, 1.85rem); }
  .final-headline { font-size: clamp(1.6rem, 7vw, 2rem); }
  .btn { white-space: normal; text-align: center; max-width: 100%; }
  .steps { grid-template-columns: 1fr; }
  .order-form { grid-template-columns: 1fr; }
  .order-card { padding: 28px 20px; }
  .catering-note { padding: 28px 22px; }
  .friday-callout { padding: 24px 20px; }
  .d-wheat, .d-cinnstick1, .d-bean3 { display: none; }
  .doodle { opacity: 0.5; }
  .hero-babkas { margin-bottom: 28px; }
  .cart-bar-inner { padding-right: 68px; }
  .cart-bar-text { font-size: 0.86rem; }
  .final-buttons { flex-direction: column; align-items: stretch; }
}