/* Mrs. Buzzbee's sample. Colors sampled from her logo and jar photos. */
@font-face { font-family: "Cherry Swash"; src: url("fonts/cherryswash.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Mulish"; src: url("fonts/mulish.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --comb: #322215;      /* bee stripe */
  --comb-deep: #22170B;
  --letter: #5E4B23;    /* logo lettering */
  --gold: #EDB524;      /* bee body */
  --butter: #ECCE6C;    /* honey butter */
  --cream: #FFFCED;     /* logo background */
  --cream-2: #FBF0CF;
  --amber: #C0600E;     /* jar glow */
  --wing: #C7E8ED;      /* wings */
  --honey: #C16F22;     /* honey on the logo's dipper */
  --honey-edge: #A33E09;
  --honey-hi: #F7E0B0;
  --cream-soft: #EADFC4;
  --display: "Cherry Swash", Georgia, serif;
  --text: "Mulish", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; scrollbar-color: var(--gold) var(--comb); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.0625rem/1.6 var(--text); color: var(--comb); background: var(--cream); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 7vw, 3.4rem); }
h3 { font-size: 1.35rem; }
p { margin: 0; }
p + p { margin-top: 1rem; }
a { color: inherit; text-underline-offset: 0.2em; }
::selection { background: var(--gold); color: var(--comb); }
:focus-visible { outline: 3px solid var(--wing); outline-offset: 3px; border-radius: 6px; }
.honey :focus-visible, .butter :focus-visible, .markets :focus-visible, .hive :focus-visible { outline-color: var(--comb); }

html:not([lang="es"]) .es, html[lang="es"] .en { display: none; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--gold); color: var(--comb); padding: 12px 18px; border-radius: 10px; font-weight: 800; }
.skip:focus { top: 12px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--gold); color: var(--comb); font-weight: 800; font-size: 1rem; text-decoration: none; border: 2px solid var(--gold); transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; box-shadow: 0 6px 18px -8px rgba(34, 23, 11, .6); }
.btn svg { width: 20px; height: 20px; }
.btn:hover { background: #F6C949; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--cream); border-color: var(--cream); box-shadow: none; }
.btn-ghost:hover { background: rgba(255, 252, 237, .12); }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: .9375rem; }
.btn-big { min-height: 60px; padding: 0 30px; font-size: 1.2rem; }
.btn-big svg { width: 26px; height: 26px; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: var(--cream); transition: background-color .2s ease; }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { background: rgba(255, 252, 237, .14); }

/* header */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 max(12px, env(safe-area-inset-left)); background: var(--comb); color: var(--cream); box-shadow: 0 1px 0 rgba(237, 181, 36, .25); }
.brand { min-width: 44px; display: flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; margin-right: auto; }
.brand-mark { width: 48px; height: 48px; flex: none; border-radius: 50%; }
.brand-name { font-family: var(--display); font-size: 1.3rem; color: var(--gold); white-space: nowrap; }
.nav { display: none; }
.top-actions { display: flex; align-items: center; gap: 4px; }
.lang { display: flex; border-radius: 999px; border: 2px solid rgba(255, 252, 237, .5); }
.lang button { width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--cream); font: 800 .875rem var(--text); cursor: pointer; }
.lang button:hover { background: rgba(255, 252, 237, .12); }
.lang button[aria-pressed="true"] { background: var(--gold); color: var(--comb); }
@media (max-width: 359px) { .top { gap: 4px; } .top-actions { gap: 0; } .brand { gap: 6px; } .brand-name { font-size: .95rem; } .brand-mark { width: 40px; height: 40px; } }
.top-order { margin-left: 4px; padding: 0 14px; gap: 6px; }
.cart-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--comb); color: var(--gold); font-size: .8125rem; }
.cart-n[hidden] { display: none; }
/* phones: the brand name gives way to the Order button; section links sit in a second row that scrolls sideways */
@media (max-width: 519px) { .brand-name { display: none; } }
@media (max-width: 979px) {
  .top { flex-wrap: wrap; height: auto; padding-top: 10px; }
  .nav { display: flex; order: 3; width: calc(100% + 24px); margin: 6px -12px 0; padding: 0 6px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid rgba(237, 181, 36, .2); }
  .nav { justify-content: space-between; }
  /* Wilder 10-20: all five links fit the phone width; scroll stays only as a fallback below ~340 px */
  .nav a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 clamp(4px, 1.4vw, 10px); font-weight: 700; font-size: clamp(.8125rem, 3.6vw, .9375rem); white-space: nowrap; color: var(--cream-soft); text-decoration: none; }
  html { scroll-padding-top: 128px; }
}
@media (min-width: 980px) {
  .top { padding: 0 28px; }
  .nav { display: flex; gap: 4px; margin-right: 12px; }
  .nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; font-weight: 700; color: var(--cream-soft); border-radius: 999px; }
  .nav a:hover { color: var(--cream); background: rgba(255, 252, 237, .1); }
}

/* hero */
.hero { position: relative; isolation: isolate; overflow-x: clip; min-height: calc(100svh - 64px); display: grid; align-items: end; background: var(--comb); color: var(--cream); }
.hero-blur { display: none; }
.hero-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-photo img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(50, 34, 21, .1) 0%, rgba(50, 34, 21, .25) 35%, rgba(34, 23, 11, .92) 68%, var(--comb-deep) 100%); }
.hero-copy { padding: 0 20px 96px; max-width: 40rem; }
.hero h1 { font-size: clamp(2.5rem, 11vw, 4.75rem); color: var(--gold); }
.lede { margin-top: 14px; font-size: 1.125rem; color: var(--cream); max-width: 34rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 40px; padding: 48px max(28px, 5vw) 120px; min-height: min(calc(100svh - 64px), 900px); overflow: visible; }
  .hero-blur { display: block; position: absolute; inset: 0; z-index: -2; background: url("img/jars-blur.webp") center / cover; }
  .hero-blur::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 40%, rgba(50, 34, 21, .35), rgba(34, 23, 11, .9) 70%); }
  .hero-photo { position: relative; inset: auto; z-index: 1; grid-column: 2; grid-row: 1; justify-self: center; width: min(100%, 400px); aspect-ratio: 9 / 15; border-radius: 999px 999px 28px 28px; border: 6px solid var(--gold); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
  .hero-photo::after { display: none; }
  .hero-photo img { position: static; height: 100%; object-position: 50% 30%; }
  .hero-copy { grid-column: 1; grid-row: 1; padding: 0; }
}

/* honey */
.honey { padding: 120px 20px 72px; display: grid; gap: 40px; color: var(--letter); }
.honey h2 { color: var(--comb); }
.honey-text > p { margin-top: 16px; max-width: 36rem; }
.bee-healthy { font-family: var(--display); font-size: 1.6rem; color: var(--amber); }
html[lang="es"] .bee-healthy { display: none; }
.prices { margin-top: 28px; max-width: 30rem; padding: 22px 22px 18px; background: var(--cream-2); border-radius: 16px; }
.prices h3 { color: var(--comb); }
.prices dl { margin: 14px 0 12px; }
.prices dl div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed rgba(94, 75, 35, .4); }
.prices dt { font-weight: 700; color: var(--comb); }
.prices dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
/* Wilder 2026-10-18: her honey benefits caption as text, and her booth and crochet bee photos at the market section */
.benefits { margin-top: 28px; max-width: 30rem; padding: 26px 22px 22px; background: var(--comb); color: var(--cream); border-radius: 18px; border-top: 6px solid var(--gold); box-shadow: 0 24px 50px -28px rgba(34, 23, 11, .9); }
.benefits h3 { color: var(--gold); }
.benefits > p { margin-top: 8px; color: var(--cream-soft); }
.benefits ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.benefits li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(237, 181, 36, .22); font-weight: 700; font-size: 1.05rem; }
.benefits li:last-child { border-bottom: 0; }
.benefits li::before { content: "\2713"; flex: none; display: grid; place-items: center; width: 30px; height: 34px; background: var(--gold); color: var(--comb); font-size: .95rem; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.benefits .free-del { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--gold); color: var(--comb); font-weight: 800; text-align: center; }
.market-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; max-width: 34rem; }
.market-photos img { width: 100%; height: auto; aspect-ratio: 593 / 720; object-fit: cover; border-radius: 16px; box-shadow: 0 16px 34px -20px rgba(50, 34, 21, .7); }
.small { font-size: .9375rem; }
.honey-photos { position: relative; padding-bottom: 60px; }
.ph-a img { width: 100%; border-radius: 16px; box-shadow: 0 18px 40px -20px rgba(50, 34, 21, .55); }
.ph-b { position: absolute; right: 8px; bottom: 0; width: 44%; max-width: 200px; padding: 8px; background: #FFFFFF; border-radius: 12px; transform: rotate(-4deg); box-shadow: 0 14px 30px -14px rgba(50, 34, 21, .6); }
.ph-b img { width: 100%; border-radius: 6px; }
@media (min-width: 900px) {
  .honey { grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; padding: 170px max(28px, 6vw) 110px; }
}

/* honey butter */
.butter { background: var(--gold); padding: 64px 20px; display: grid; gap: 32px; }
.butter-photo { justify-self: center; width: min(100%, 360px); }
.butter-photo img { width: 100%; aspect-ratio: 9 / 13; object-fit: cover; object-position: 50% 40%; border-radius: 999px 999px 24px 24px; box-shadow: 0 24px 50px -24px rgba(50, 34, 21, .8); }
.pull { margin-top: 18px; font-family: var(--display); font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 1.2; color: var(--comb); }
.butter-text > p:not(.pull) { margin-top: 16px; max-width: 34rem; }
.poppers { display: grid; gap: 18px; margin-top: 28px; padding-top: 22px; border-top: 2px solid rgba(50, 34, 21, .25); }
.poppers img { width: min(100%, 360px); height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 24px; box-shadow: 0 24px 50px -24px rgba(50, 34, 21, .8); }
.poppers p { font-size: 1.1rem; }
@media (min-width: 900px) {
  .butter { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 72px; padding: 100px max(28px, 6vw); }
  .butter-photo { width: min(100%, 420px); }
}

/* gifts */
.gifts { background: var(--comb); color: var(--cream); padding: 72px 20px; display: grid; gap: 28px; }
.gifts h2 { color: var(--gold); }
.gifts-text > p { margin-top: 16px; max-width: 32rem; }
.gifts .deal { font-family: var(--display); font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.15; color: var(--butter); }
.gifts .small { color: var(--cream-soft); }
.gifts .btn { margin-top: 24px; }
.gifts-main img { width: 100%; max-width: 360px; border-radius: 20px; margin: 0 auto; }
.gifts-side { display: flex; gap: 14px; justify-content: center; }
.gifts-side img { width: 140px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 4px solid var(--gold); }
@media (min-width: 900px) {
  .gifts { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: center; gap: 56px; padding: 100px max(28px, 6vw); }
  .gifts-side { flex-direction: column; }
  .gifts-side img { width: 170px; }
}

/* markets */
.markets { background: var(--cream-2); padding: 72px 20px; display: grid; gap: 36px; color: var(--letter); }
.markets h2 { color: var(--comb); }
.intro { margin-top: 14px; max-width: 34rem; }
.stops { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.stop { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: start; padding: 16px; background: var(--cream); border-radius: 16px; box-shadow: 0 10px 24px -18px rgba(50, 34, 21, .5); }
.stop h4 { color: var(--comb); font-size: 1.25rem; }
.cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 32px; }
.cal-head h3 { color: var(--comb); font-size: 1.6rem; }
.cal-note { margin-top: 8px; max-width: 34rem; }
.cal-head + .cal-note + .stops { margin-top: 18px; }
.stop-when:empty { display: none; }
.stop p:not(.stop-date) { margin-top: 6px; font-size: 1rem; }
.stop a { font-weight: 800; color: var(--comb); display: inline-block; padding: 10px 0; }
.stop-date { display: grid; place-items: center; align-content: center; width: 76px; height: 76px; border-radius: 50%; background: var(--gold); color: var(--comb); line-height: 1; text-align: center; }
.stop-date b { font: 700 1.9rem var(--display); }
.stop-date span { font-size: .8125rem; font-weight: 800; margin-top: 2px; }
.tag { display: inline-block; vertical-align: middle; margin-right: 6px; padding: 2px 10px; border-radius: 999px; font: 800 .8125rem/1.5 var(--text); }
.tag-today { background: #9A4708; color: #FFFFFF; }
.tag-sample { border: 2px dashed var(--letter); color: var(--comb); }
.tag-lg { font-size: .9375rem; padding: 4px 14px; }
.stop.is-sample { border: 2px dashed rgba(94, 75, 35, .35); }
.past { margin-top: 36px; }
.past h3 { color: var(--comb); font-size: 1.35rem; }
.past ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.past li { display: grid; grid-template-columns: 4.5rem 1fr 64px; gap: 8px 12px; align-items: center; }
.past li .zoom-btn, .past-fl { grid-column: 3; }
.past-fl { width: 64px; height: 96px; object-fit: cover; border-radius: 10px; box-shadow: 0 8px 18px -10px rgba(50, 34, 21, .7); }
.past b { color: var(--comb); }
.table-video { margin: 0; }
.table-video video { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; border-radius: 18px; background: #2a1d12; box-shadow: 0 20px 44px -22px rgba(50, 34, 21, .7); }
.stop.is-today { outline: 3px solid var(--amber); }
.stops-empty { margin-top: 24px; font-weight: 700; }
@media (min-width: 900px) {
  .markets { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 64px; padding: 100px max(28px, 6vw); }
}

/* gallery strip */
.hive { padding: 72px 0 64px; background: var(--butter); }
.hive h2 { padding: 0 20px; color: var(--comb); }
.strip { list-style: none; margin: 28px 0 0; padding: 4px 20px 18px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-color: var(--comb) transparent; }
.strip li { flex: 0 0 auto; scroll-snap-align: start; }
.strip figure { width: min(78vw, 300px); }
.strip img { width: 100%; height: 380px; object-fit: cover; border-radius: 16px; }
.strip figcaption { margin-top: 10px; font-weight: 700; font-size: .9375rem; color: var(--comb); }
@media (min-width: 900px) {
  .hive h2, .strip { padding-left: max(28px, 6vw); padding-right: max(28px, 6vw); }
  .strip { scroll-padding-inline: max(28px, 6vw); }
  .strip figure { width: 340px; }
  .strip img { height: 440px; }
}

/* order */
.order { position: relative; overflow: hidden; background: var(--comb); color: var(--cream); padding: 80px 20px 88px; text-align: center; display: grid; justify-items: center; gap: 18px; }
.order h2 { color: var(--gold); max-width: 16ch; }
.order p { max-width: 30rem; color: var(--cream-soft); }
#dm .btn-big { margin-top: 28px; } /* round 7: room for the bee (40 px on phones, 64 on desktop) to stand on the button without covering the line above */
@media (min-width: 600px) { #dm .btn-big { margin-top: 54px; } }
.order-bee { width: 140px; height: 140px; border-radius: 50%; border: 4px solid var(--gold); }

/* footer */
.foot { background: var(--comb-deep); color: var(--cream-soft); padding: 40px 20px calc(32px + env(safe-area-inset-bottom)); display: grid; gap: 22px; font-size: .9375rem; }
.foot-brand { display: flex; gap: 14px; align-items: center; }
.foot-brand strong { font-family: var(--display); font-size: 1.25rem; color: var(--gold); }
.foot-mark { width: 56px; height: 56px; flex: none; border-radius: 50%; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot-links { display: grid; gap: 6px; }
.foot-links a { display: inline-block; padding: 10px 0; color: var(--cream); font-weight: 700; }
@media (min-width: 900px) {
  .foot { grid-template-columns: 1fr auto auto; align-items: center; gap: 40px; padding: 40px max(28px, 6vw); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .icon-btn { transition: none; }
  .btn:hover { transform: none; }
}

/* round 4: sample order and event booking */
@media (max-width: 979px) { .hero { min-height: calc(100svh - 120px); } }
.shop { padding: 72px 20px; background: var(--cream); color: var(--letter); }
.shop h2, .book h2 { color: var(--comb); }
.shop-head { max-width: 40rem; display: grid; gap: 12px; margin-bottom: 32px; }
.shop-grid { display: grid; gap: 28px; }
.shop-grid[hidden] { display: none; }
.menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.item { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 14px; background: #FFFFFF; border-radius: 18px; box-shadow: 0 10px 24px -18px rgba(50, 34, 21, .55); }
.item img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; }
.item h3 { margin: 0; font-family: var(--display); font-size: 1.3rem; color: var(--comb); }
.item-body { display: grid; gap: 8px; align-content: start; min-width: 0; }
.item-body > p { font-size: .9375rem; }
.item-minis { grid-template-columns: 1fr; } /* Wilder 2026-10-19: the jars photo on top, the flavor list under it */
.item-minis img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.price { font-weight: 800; color: var(--comb); }
.price-tbd { font-weight: 700; font-style: italic; color: var(--letter); }
.sizes { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.sizes legend { padding: 0; margin-bottom: 4px; font-size: .875rem; font-weight: 800; }
.sizes label { position: relative; }
.sizes input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sizes label > span { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border: 2px solid var(--cream-soft); border-radius: 999px; font-size: .875rem; }
.sizes input:checked + span { border-color: var(--comb); background: var(--butter); color: var(--comb); }
.sizes input:focus-visible + span { outline: 3px solid var(--comb); outline-offset: 2px; }
.add { justify-self: start; border: 0; cursor: pointer; font-family: var(--text); }
.cart { align-self: start; padding: 22px 20px; background: var(--cream-2); border-radius: 20px; display: grid; gap: 14px; }
.cart h3 { color: var(--comb); }
.cart h3:focus { outline: none; }
.cart-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cart-lines:empty { display: none; }
.cl { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--cream-soft); }
.cl-name { display: grid; gap: 2px; color: var(--comb); }
.cl-each, .cl-free { font-size: .875rem; color: var(--letter); }
.cl-free { font-weight: 800; color: #7A3A06; }
.cl-total { font-weight: 800; color: var(--comb); justify-self: end; }
.step { display: inline-flex; align-items: center; gap: 2px; border: 2px solid var(--letter); border-radius: 999px; justify-self: start; }
.step button { width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--comb); font: 800 1.25rem/1 var(--text); cursor: pointer; }
.step button:hover { background: var(--butter); }
.step button:disabled { opacity: .4; cursor: not-allowed; }
.step-n { min-width: 26px; text-align: center; font-weight: 800; color: var(--comb); }
.cl-rm { justify-self: end; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--comb); font: 700 .9375rem var(--text); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.cart-total { display: flex; justify-content: space-between; gap: 12px; font-weight: 800; color: var(--comb); font-size: 1.125rem; }
.form { display: grid; gap: 16px; }
.form[hidden] { display: none; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label, .field legend { font-weight: 800; color: var(--comb); }
.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form input[type="date"], .form input[type="time"], .form select, .form textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 2px solid var(--letter); border-radius: 12px; background: #FFFFFF; color: var(--comb); font: 400 1rem var(--text); }
.form textarea { resize: vertical; }
.form :focus-visible { outline: 3px solid var(--comb); outline-offset: 2px; }
.form :is(input, select, textarea)[aria-invalid="true"] { border-color: #A3240C; box-shadow: 0 0 0 1px #A3240C; }
.hint { font-size: .875rem; }
.err { font-size: .9375rem; font-weight: 800; color: #A3240C; }
.err::before { content: "! "; }
.err[hidden] { display: none; }
.err-sum { padding: 14px 16px; border: 3px solid #A3240C; border-radius: 14px; background: #FFFFFF; color: var(--comb); }
.err-sum[hidden] { display: none; }
.err-sum-h { margin: 0 0 6px; font-weight: 800; }
.err-sum-h:focus { outline: none; }
.err-sum ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 8px; }
.err-sum a { line-height: 1.5; color: #A3240C; font-weight: 800; }
.btn-wide { width: 100%; border: 0; cursor: pointer; font-family: var(--text); }
.done { padding: 28px 22px; border-radius: 20px; background: var(--comb); color: var(--cream); display: grid; gap: 14px; max-width: 40rem; }
.done[hidden] { display: none; }
.done h3 { color: var(--gold); font-size: 1.6rem; }
.done h3:focus { outline: none; }
.done ul { margin: 0; padding-left: 1.1rem; }
.done dl { margin: 0; display: grid; gap: 6px; }
.done dl div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 10px; }
.done dt { color: var(--butter); font-weight: 800; }
.done dd { margin: 0; overflow-wrap: anywhere; }
.done .cart-total { color: var(--cream); }
.done .small { color: var(--cream-soft); }
.done .btn { justify-self: start; border: 0; cursor: pointer; font-family: var(--text); }
.done :focus-visible { outline-color: var(--wing); }
.cart-fab { position: fixed; z-index: 25; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px; border-radius: 999px; background: var(--comb); color: var(--gold); font-weight: 800; text-decoration: none; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5); }
.cart-fab b { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 999px; background: var(--gold); color: var(--comb); font-size: .875rem; }
.cart-fab[hidden] { display: none; }
.has-cart .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.book { padding: 72px 20px; background: var(--butter); color: var(--comb); display: grid; gap: 28px; }
.book-text { display: grid; gap: 16px; align-content: start; }
.book-photo img { width: 100%; max-width: 300px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 160px 160px 18px 18px; border: 4px solid var(--cream); }
.book-card { padding: 22px 20px; background: var(--cream); border-radius: 20px; box-shadow: 0 14px 30px -20px rgba(50, 34, 21, .6); }
.book :focus-visible { outline-color: var(--comb); }
/* book1: the booking area opens from one button; without JS the button stays hidden and the panel shows */
.book-text { max-width: 760px; }
.book-toggle[hidden], .book-panel[hidden] { display: none; }
.book-toggle svg { transition: transform .2s ease; }
.book-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.book-panel { display: grid; gap: 28px; }
.book-panel .pop-cater { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .book-toggle svg { transition: none; } }
.row2 { display: grid; gap: 16px; }
.pkgs, .checks { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.pkgs label, .checks label { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 10px 12px; border: 2px solid var(--cream-soft); border-radius: 14px; background: #FFFFFF; cursor: pointer; font-weight: 400; }
.pkgs label > span { display: grid; gap: 2px; font-size: .9375rem; }
.pkgs b { color: var(--comb); font-size: 1rem; }
.pkgs input, .checks input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--comb); }
.checks { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.checks legend, .pkgs legend { padding: 0; margin-bottom: 6px; }
.pkgs[aria-invalid="true"] label { border-color: #A3240C; }
@media (min-width: 640px) { .row2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .shop, .book { padding: 96px max(28px, 6vw); }
  .shop-grid { grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); align-items: start; }
  .menu { grid-template-columns: 1fr 1fr; }
  .item { grid-template-columns: 1fr; }
  .item img { width: 100%; height: 180px; }
  .cart { position: sticky; top: 84px; }
  .cart-fab { display: none; }
  .has-cart .foot { padding-bottom: 40px; }
  .book-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 56px; align-items: start; }
  .done { margin: 0 auto; }
}

/* round 8: real honey drips. A glossy band at the section top; from it hang short looping clips rendered in Blender
   (tools/r8_drip.py). The page ships a still frame of each (what reduced motion shows); app.js swaps in the clip, which plays
   on its own while on screen and pauses when it leaves. Behind the content, no layout effect (absolutely placed, fixed size). */
.has-drips { position: relative; isolation: isolate; }
.drips { --dw: 112px; position: absolute; left: 0; right: 0; top: 0; height: 14px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, var(--honey-edge), var(--honey) 30%, var(--honey-hi) 42%, var(--honey) 52%, var(--honey) 80%, var(--honey-edge)); }
.shop .drips { --dw: 88px; }
.hd { --w: calc(var(--dw) * var(--z)); position: absolute; top: 4px; left: clamp(calc(var(--w) / 2), var(--x), calc(100% - var(--w) / 2)); width: var(--w); height: auto; aspect-ratio: 2 / 5; transform: translateX(-50%); }
@media (min-width: 900px) { .drips { --dw: 150px; } .shop .drips { --dw: 112px; } }
/* Wilder 2026-10-18 (round 10): no bar on the honey butter arch; the section's drips fall in front of the photo. */
.butter > .drips { z-index: 3; }

/* round 5: the mascot bee, cut from the IG logo; round 7: her layer is fixed to the screen so she follows the scroll (app.js moves her) */
body { position: relative; }
.buzz-lane { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 20; }
.buzz { display: none; position: absolute; left: 0; top: 0; width: 31px; height: 40px; opacity: 0; transition: opacity .4s; will-change: transform; }
.buzz.ready { display: block; }
.buzz.on { opacity: 1; }
.buzz-hive { position: absolute; right: 10px; top: 58%; width: 52px; height: auto; opacity: 0; transform: scale(.6); transform-origin: 50% 80%; transition: opacity .35s, transform .35s; filter: drop-shadow(0 4px 6px rgba(34, 23, 11, .35)); }
.buzz-hive.on { opacity: 1; transform: none; }
@media (min-width: 600px) { .buzz-hive { width: 76px; } }
.buzz-flip, .buzz-bob, .buzz img { position: absolute; inset: 0; width: 100%; height: 100%; }
.buzz-flip.left { transform: scaleX(-1); }
.buzz-bob { filter: drop-shadow(0 4px 4px rgba(34, 23, 11, .3)); }
@media (prefers-reduced-motion: no-preference) {
  .buzz-bob { animation: buzz-bob 2.4s ease-in-out infinite; }
  .buzz-wing { transform-origin: 39% 47%; animation: buzz-wing 70ms linear infinite alternate; }
  .buzz.off .buzz-bob, .buzz.off .buzz-wing { animation-play-state: paused; }
  .buzz.fly .buzz-bob { animation-play-state: paused; } /* round 7: the body bobs when she stops, wings always flutter */
  .buzz.perch .buzz-wing { animation-duration: 300ms; } /* wings settle while she stands on the button */
}
@keyframes buzz-bob { 50% { transform: translateY(-3px) rotate(-3deg); } }
@keyframes buzz-wing { to { transform: scale(.5, .9) rotate(10deg); } }
/* Wilder 2026-10-18: her phone number under the DM button (the bee perches on the DM button, so this one sits close under it) */
#dm .btn-phone { margin-top: 0; }
.order p a { color: var(--gold); }
.foot-brand a { color: inherit; font-weight: 700; }

/* meet Mrs. Buzzbee (her reel, sound on when tapped) */
.about { padding: 64px 20px; display: grid; gap: 28px; background: var(--cream); }
.about-video { justify-self: center; width: min(100%, 340px); }
.about-video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 24px; border: 6px solid var(--gold); background: var(--comb); box-shadow: 0 24px 50px -24px rgba(50, 34, 21, .8); }
.about-text h2 { color: var(--comb); }
.about-text p { margin-top: 16px; max-width: 34rem; }
@media (min-width: 900px) {
  .about { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 72px; padding: 100px max(28px, 6vw); }
  #coffee { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); padding-top: 0; }
  #coffee .about-video { order: 2; }
}
#coffee { padding-top: 0; }

/* Popcorn catering card (Wilder 10-18, from her Poppers flyer) */
.pop-cater { margin-top: 24px; padding: 22px 20px; border-radius: 22px; background: #FFF7E6; border: 3px solid var(--comb); box-shadow: 0 10px 28px rgba(60,30,0,.15); }
.pop-kicker { margin: 0; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .8125rem; color: #A3240C; }
.pop-cater h3 { margin: 2px 0 14px; font-size: 1.75rem; }
.pop-pk { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pop-pk li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; border-radius: 14px; background: #FFFFFF; border: 2px solid var(--cream-soft); }
.pop-pk b { grid-column: 1; font-size: 1.0625rem; }
.pop-pk li > span { grid-column: 1; font-size: .9375rem; }
.pop-pk strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.5rem; color: #A3240C; }
.pop-inc { margin: 16px 0 8px; font-weight: 700; }
.pop-tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.pop-tops > div { padding: 12px 14px; border-radius: 14px; background: #F0B429; color: #2B1A0A; }
.pop-tops h4 { margin: 0 0 4px; font-size: 1rem; }
.pop-tops p { margin: 0; }

.pop-video { margin: 14px auto 18px; width: min(100%, 300px); }

.price-list { margin: 0 auto 28px; max-width: 420px; } /* Wilder 2026-10-19: her price list sits above the order menu, not in catering */
.price-list img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 14px 30px -18px rgba(50, 34, 21, .6); }

.menu-cat { grid-column: 1 / -1; list-style: none; margin: 18px 0 -4px; }
.menu-cat:first-child { margin-top: 0; }
.menu-cat h3 { margin: 0; font-family: var(--display); font-size: 1.75rem; color: var(--comb); border-bottom: 3px solid var(--gold); padding-bottom: 6px; }

/* 2026-10-19 layout: alternate cream tones now that about and coffee sit next to honey and order */
#about, #coffee { background: var(--cream-2); }

/* Motto from the logo itself, same font and colors (Wilder 2026-10-22). ?motto=a|b|c picks the layout; a is the default. */
.hero h1.motto { margin: 0 0 .5rem; line-height: 0; }
.hero h1.motto .mo { display: none; height: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.65)); }
.motto-a .hero h1.motto .mo-a { display: block; width: min(100%, 620px, calc(100vw - 40px)); }
.motto-b .hero h1.motto .mo-b { display: block; width: min(100%, 460px, calc(100vw - 40px)); }
.motto-ribbon { display: none; }
.motto-c .motto-ribbon { display: block; background: #fffcec; border-bottom: 3px solid var(--gold); padding: 12px 16px; text-align: center; line-height: 0; }
.motto-c .motto-ribbon img { width: min(640px, calc(100vw - 32px)); height: auto; }
.motto-es { margin: 0 0 .8rem; font-family: var(--display); color: var(--gold); font-size: 1.25rem; }

/* Contact buttons: same width, even 14px gaps (Wilder 2026-10-22 'Fix the spacing'). */
#dm .btn-big { display: flex; justify-content: center; width: min(100%, 380px); margin-left: auto; margin-right: auto; }
#dm .btn-big + .btn-big { margin-top: 14px; }


/* Kids Corner coloring pages (Wilder 2026-10-22) */
.kids { padding: 56px 20px; text-align: center; background: #fffcec; color: #3b2412; }
.kids h2 { color: #3b2412; }
.kc-grid { list-style: none; padding: 0; margin: 28px auto 0; max-width: 1100px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.kc-card { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.kc-card img { width: 100%; height: auto; border: 3px solid var(--gold); border-radius: 12px; background: #fff; }
.kc-card .btn { width: 100%; justify-content: center; font-size: .85rem; }

.jokes { list-style: none; padding: 0; margin: 22px auto; max-width: 560px; display: grid; gap: 10px; text-align: left; }
.jokes li { background: #fff; border: 2px solid var(--gold); border-radius: 14px; padding: 12px 16px; }
.jokes b { display: block; }
.kc-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.kc-more summary::-webkit-details-marker { display: none; }
.kc-more[open] summary { margin-bottom: 8px; }

/* Space pass (Wilder 2026-10-22: no wasted space). */
.kc-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }
.kc-btns details { display: contents; }
.kc-btns details[open] > :not(summary) { order: 2; flex-basis: 100%; }
.kids { padding: 44px 20px; }
.order { padding: 56px 20px 48px; }
.foot { padding: 28px 20px calc(20px + env(safe-area-inset-bottom)); gap: 14px; }
.foot-social { display: flex; gap: 6px; flex-wrap: wrap; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.foot-links a { padding: 6px 0; }
.foot-links li:nth-child(n+3) { flex-basis: 100%; font-size: .875rem; }

/* 10-23 owner ask: no motto art over the honey photo, ribbon only */
.hero h1.motto .mo { display: none !important; }
.motto-ribbon { display: block; background: #fffcec; border-bottom: 3px solid var(--gold); padding: 12px 16px; text-align: center; line-height: 0; }
.motto-ribbon img { width: min(640px, calc(100vw - 32px)); height: auto; }

/* Wilder 2026-10-23: coloring pages overflowed the phone screen; keep them in a grid that fits */
.kc-btns details[open] > .kc-grid { width: 100%; min-width: 0; box-sizing: border-box; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
@media (max-width: 480px) { .kc-btns details[open] > .kc-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }


/* Round 11 (her 10-24 answers). Banner: her own art, 1800 px source from her original file (10-24), shown up to 1100 px; it carries the motto, so the motto ribbon is gone. */
.top-banner { background: #fffbef; border-bottom: 3px solid var(--gold); text-align: center; line-height: 0; }
.top-banner img { display: block; width: 100%; max-width: 1100px; height: auto; margin: 0 auto; }
.hero { min-height: calc(100svh - 64px - min(34.5vw, 309px)); } /* keep the first screen tight under the banner */
@media (max-width: 979px) { .hero { min-height: calc(100svh - 120px - 34.5vw); } }
@media (min-width: 900px) { .hero { min-height: min(calc(100svh - 64px - min(34.5vw, 309px)), 900px); } }
.item-pics { display: grid; gap: 6px; align-content: start; }
@media (min-width: 900px) { .item .item-pics { grid-template-columns: 1fr 1fr; } }
.order-info ul, .book-rules { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: .9375rem; text-align: left; }
.book-rules-h { margin-top: 18px; }
.book-rules { margin-top: 8px; }
.story-more { margin-top: 12px; }
.story-more p { margin-top: 8px; }
.cart-del, .cart-grand { display: flex; justify-content: space-between; gap: 12px; font-weight: 800; color: var(--comb); }
.cart-grand { font-size: 1.125rem; }
.done .cart-del, .done .cart-grand { color: var(--cream); }

/* r12: events from her Google Calendar (from the buzz-events mockup) */
.stop-when { font-weight: 700; color: var(--comb); }
.stop .stop-place { display: block; width: fit-content; padding: 4px 0; font-weight: 400; color: var(--letter); text-decoration: underline; text-underline-offset: 3px; }
.stop .stop-place::before { content: "\1F4CD"; display: inline-block; margin-right: 4px; text-decoration: none; }
#stops .stop { padding: 14px; gap: 14px; }
#stops .stop p:not(.stop-date) { margin-top: 4px; }
.stop-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
#stops .stop .stop-links { margin-top: 0; }
.stop .stop-links a { min-height: 44px; display: inline-flex; align-items: center; padding: 0; }
.stops-empty a { color: var(--comb); font-weight: 800; }
.stops-empty { margin-top: 18px; padding: 16px; background: var(--cream); border-radius: 16px; box-shadow: 0 10px 24px -18px rgba(50, 34, 21, .5); }
.stops-empty p { margin: 0; color: var(--comb); }
.stops-empty .soon-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.soon-links .btn svg { width: 20px; height: 20px; fill: currentColor; }
.stops:empty { display: none; }

.stop { overflow-wrap: anywhere; } .stop > div { min-width: 0; } /* long place names wrap on 320px phones (g5r M1) */

/* Instagram carousel (Wilder 2026-11-05): one post per view, live count, follow button */
.hive .ig-head{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;align-items:center;justify-content:space-between;margin:.25rem 0 1rem}
.hive .ig-live{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;margin:0}
.hive .ig-dot{width:.7rem;height:.7rem;border-radius:50%;background:#d6249f;box-shadow:0 0 0 0 #d6249f99;animation:igp 1.8s infinite}
@keyframes igp{70%{box-shadow:0 0 0 .6rem #d6249f00}100%{box-shadow:0 0 0 0 #d6249f00}}
@media (prefers-reduced-motion:reduce){.hive .ig-dot{animation:none}}
.hive .ig-who{display:inline-flex;align-items:center;gap:.5rem;margin:0;font-weight:700}
.hive .ig-who svg{width:1.4rem;height:1.4rem}
.hive .ig-count{font-weight:600}
.hive .ig-car{position:relative}
.hive .ig-track{list-style:none;margin:0;padding:0;display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.hive .ig-track::-webkit-scrollbar{display:none}
.hive .ig-track li{flex:0 0 min(15rem,72%);scroll-snap-align:center;background:#fffdf6;border-radius:16px;overflow:hidden;box-shadow:0 6px 18px #32221526}
.hive .ig-track img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.hive .ig-track p{margin:0;padding:.75rem .9rem 1rem;font-size:.95rem;line-height:1.35}
.hive .ig-nav{position:absolute;top:38%;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:#322215dd;color:#fff;font-size:2rem;line-height:1;cursor:pointer}
.hive .ig-prev{left:.25rem}.hive .ig-next{right:.25rem}
.hive .ig-follow{text-align:center;margin:1.25rem 0 0}
.hive .ig-follow .btn{display:inline-flex;align-items:center;gap:.6rem}
.hive .ig-follow svg{width:1.4rem;height:1.4rem}

.hive .ig-stats{display:flex;gap:1rem;margin:0;padding:.6rem .9rem 0;font-weight:700}.hive .ig-stats span{display:inline-flex;align-items:center;gap:.35rem}.hive .ig-stats svg{width:1.3rem;height:1.3rem}.hive .ig-track .ig-cap{padding-top:.35rem;font-size:.85rem}
.hive .ig-date{margin-left:auto;font-weight:600;font-size:.8rem;opacity:.75}

/* live site: ordering is by text, call, WhatsApp or Instagram; cart and sample forms stay off */
#cart,.cart-fab,#menu .add,#book-form,#checkout,.top-order .cart-n,[data-cart-n]{display:none!important}
.shop-grid{display:block}.order-cta{display:flex;flex-wrap:wrap;gap:.6rem;margin:.75rem 0}.book-contact{padding:1rem 0}

.foot .powered a{display:inline-flex;align-items:center;gap:.4rem}.foot .powered img{width:18px;height:18px}


html:not([lang="es"]) .hive .ig-date .es,html[lang="es"] .hive .ig-date .en{display:none!important}


.foot .powered{background:#322215;padding:.4rem .8rem;border-radius:10px}.foot .powered img{width:36px;height:28px}


/* carousel must scroll inside its box, never widen the page */
.hive,.hive .wrap,.ig-car{min-width:0;max-width:100%}.ig-car{overflow:hidden;position:relative}.ig-track{min-width:0;max-width:100%}html,body{overflow-x:clip}


/* footer logo link must not shrink (it wraps the logo since it opens the card) */
.foot-brand>a:first-child{flex:none;display:block;width:56px;height:56px}.foot-mark{display:block;width:56px;height:56px;min-width:56px;object-fit:cover}


.faq details{border-bottom:1px solid rgba(50,34,21,.2);padding:.7rem 0}.faq summary{cursor:pointer;font-weight:700;font-size:1.05rem}.faq p{margin:.5rem 0 0}
html:not([lang="es"]) .faq .es,html[lang="es"] .faq .en{display:none}