/* ==========================================================================
   BEAN to BAR chocolates — Custom Styles
   Table of contents:
   1. Design tokens & base
   2. Buttons & utilities
   3. Bean-to-bar stage (journey film)
   4. Navbar
   5. Hero
   6. Section headings
   7. Products & filters
   8. Story
   9. Chocolate journey
   10. Features
   11. Special collection
   12. Testimonials
   13. Contact
   14. Footer & back-to-top
   15. Product modal
   16. Scroll reveal & image fallbacks
   17. Responsive tweaks
   18. Reduced motion
   ========================================================================== */

/* 1. Design tokens & base ------------------------------------------------- */
:root {
  --choco-950: #1e100a;
  --choco-900: #2b1710;
  --choco-800: #3b2016;
  --choco-700: #4e2c1d;
  --choco-500: #7b4a2d;
  --caramel: #c8834a;
  --caramel-soft: #e2ae78;
  --cream: #fbf4ea;
  --cream-200: #f5e9d8;
  --beige: #ead8bf;
  --berry: #b8434a;          /* matches the tagline colour in the logo */
  --white: #ffffff;
  --text: #3a2418;
  --text-soft: #6e5546;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-sm: 12px;
  --radius: 22px;
  --radius-lg: 34px;
  --shadow-sm: 0 4px 14px rgba(43, 23, 16, .08);
  --shadow: 0 14px 40px rgba(43, 23, 16, .12);
  --shadow-lg: 0 28px 70px rgba(43, 23, 16, .22);
  --ease: cubic-bezier(.22, .9, .3, 1);
  --nav-h: 84px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--cream);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}


h1, h2, h3, h4, .section-title {
  font-family: var(--font-display);
  color: var(--choco-900);
  line-height: 1.12;
  letter-spacing: -.01em;
}

a { color: var(--choco-500); }
a:hover { color: var(--caramel); }

img { max-width: 100%; }

::selection { background: var(--caramel); color: var(--white); }

:focus-visible {
  outline: 3px solid var(--caramel);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: -60px;
  left: 16px;
  z-index: 10001;
  background: var(--choco-900);
  color: var(--cream);
  padding: .6rem 1rem;
  border-radius: 0 0 12px 12px;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 0; color: var(--cream); }

.text-cream { color: var(--cream) !important; }
.text-cream-soft { color: rgba(251, 244, 234, .75) !important; }

/* 2. Buttons & utilities -------------------------------------------------- */
.btn {
  font-weight: 700;
  border-radius: 999px;
  padding: .7rem 1.5rem;
  letter-spacing: .01em;
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s, color .25s, border-color .25s;
}
.btn-lg { padding: .9rem 1.9rem; font-size: 1.05rem; }
.btn-sm { padding: .45rem 1rem; font-size: .9rem; }
.btn:active { transform: scale(.96); }

.btn-choco {
  background: var(--choco-900);
  color: var(--cream);
  border: 2px solid var(--choco-900);
  box-shadow: 0 8px 22px rgba(43, 23, 16, .25);
}
.btn-choco:hover,
.btn-choco:focus-visible {
  background: var(--choco-500);
  border-color: var(--choco-500);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(43, 23, 16, .3);
}

.btn-outline-choco {
  background: transparent;
  color: var(--choco-900);
  border: 2px solid var(--choco-900);
}
.btn-outline-choco:hover,
.btn-outline-choco:focus-visible {
  background: var(--choco-900);
  color: var(--cream);
  transform: translateY(-3px);
}

.btn-caramel {
  background: var(--caramel);
  color: var(--choco-950);
  border: 2px solid var(--caramel);
}
.btn-caramel:hover,
.btn-caramel:focus-visible {
  background: var(--caramel-soft);
  border-color: var(--caramel-soft);
  color: var(--choco-950);
  transform: translateY(-3px);
}

.btn-outline-cream {
  color: var(--cream);
  border: 2px solid rgba(251, 244, 234, .6);
  background: transparent;
}
.btn-outline-cream:hover,
.btn-outline-cream:focus-visible {
  background: var(--cream);
  color: var(--choco-900);
  transform: translateY(-3px);
}

/* Shine sweep on hover */
.btn-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg);
  transition: left .6s var(--ease);
}
.btn-shine:hover::after { left: 130%; }

/* Click ripple (span injected by JS) */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transform: scale(0);
  animation: ripple .6s linear;
  pointer-events: none;
}
@keyframes ripple { to { transform: scale(3); opacity: 0; } }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--berry);
  background: rgba(184, 67, 74, .08);
  padding: .4rem .9rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.eyebrow-light {
  color: var(--caramel-soft);
  background: rgba(226, 174, 120, .12);
}

.demo-note {
  display: inline-block;
  font-size: .85rem;
  color: var(--text-soft);
  background: var(--white);
  border: 1px dashed var(--beige);
  padding: .35rem .85rem;
  border-radius: 999px;
  margin: .75rem 0 0;
}

/* Bean-to-bar stage (used by the journey section film) */
.pl-stage {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: .6rem auto 0;
  overflow: visible;
}
.pl-stage * { transform-box: fill-box; transform-origin: center; }
.pl-shadow { fill: rgba(0, 0, 0, .35); }
.pl-glow { fill: rgba(226, 174, 120, .12); }

/* Scene switching: one scene visible at a time, animations restart on entry */
.pl-stage .scene { opacity: 0; }                 /* outgoing scene hides instantly */
.pl-stage .scene.is-active {
  opacity: 1;
  animation: sceneIn .4s ease both;              /* incoming scene fades in */
}
@keyframes sceneIn { from { opacity: 0; } to { opacity: 1; } }

/* Scene 1: pod */
.pod-ridge { fill: none; stroke: rgba(90, 40, 15, .55); stroke-width: 2.5; stroke-linecap: round; }
.bean ellipse { fill: #6b3423; stroke: #3b1a10; stroke-width: 2; }
.bean path { stroke: #3b1a10; stroke-width: 2; }
.bean { opacity: 0; }
.s1.is-active .pod { animation: wobble .45s ease-in-out 2; }
.s1.is-active .pod-l { animation: splitL .5s .55s var(--ease) forwards; }
.s1.is-active .pod-r { animation: splitR .5s .55s var(--ease) forwards; }
.s1.is-active .bean { animation: beanPop .6s var(--ease) forwards; }
.s1.is-active .b1 { animation-delay: .65s; }
.s1.is-active .b2 { animation-delay: .75s; }
.s1.is-active .b3 { animation-delay: .85s; }
@keyframes wobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}
@keyframes splitL { to { transform: translateX(-44px) rotate(-22deg); opacity: .85; } }
@keyframes splitR { to { transform: translateX(44px) rotate(22deg); opacity: .85; } }
@keyframes beanPop {
  0%   { opacity: 0; transform: translate(0, 0) scale(.3); }
  60%  { opacity: 1; transform: translate(var(--tx), calc(var(--ty) - 18px)) scale(1.1) rotate(20deg); }
  100% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1) rotate(0); }
}

/* Scene 2: roasting */
.pl-leg { stroke: #6b3d26; stroke-width: 6; stroke-linecap: round; }
.drum { fill: #2a1610; stroke: var(--caramel); stroke-width: 6; }
.drum-spoke { stroke: rgba(200, 131, 74, .35); stroke-width: 3; }
.rbean { fill: #a8714a; stroke: #3b1a10; stroke-width: 1.5; }
.s2.is-active .drum-spin { animation: spin 1.1s linear infinite; }
.s2.is-active .rbean { animation: roastColor 1.2s ease-in forwards; }
.flame { transform-origin: bottom center; }
.s2.is-active .flame { animation: flicker .28s ease-in-out infinite alternate; }
.s2.is-active .f2 { animation-delay: .1s; }
.s2.is-active .f3 { animation-delay: .18s; }
.steam { fill: none; stroke: rgba(251, 244, 234, .55); stroke-width: 3; stroke-linecap: round; opacity: 0; }
.scene.is-active .steam { animation: steam 1.2s ease-out infinite; }
.scene.is-active .st2 { animation-delay: .35s; }
.scene.is-active .st3 { animation-delay: .7s; }
@keyframes roastColor { to { fill: #3d1d12; } }
@keyframes flicker {
  from { transform: scaleY(.85) scaleX(1.05); }
  to   { transform: scaleY(1.15) scaleX(.92); }
}
@keyframes steam {
  0%   { opacity: 0; transform: translateY(8px); }
  40%  { opacity: .8; }
  100% { opacity: 0; transform: translateY(-16px); }
}

/* Scene 3: grinding */
.hopper { fill: #6b3d26; stroke: #c8834a; stroke-width: 3; }
.fbean { fill: #3d1d12; opacity: 0; }
.s3.is-active .fbean { animation: fall .7s ease-in infinite; }
.s3.is-active .fb2 { animation-delay: .23s; }
.s3.is-active .fb3 { animation-delay: .46s; }
.wheel circle { fill: #9b8574; stroke: #5b4636; stroke-width: 3; }
.wheel path { stroke: #5b4636; stroke-width: 2.5; }
.s3.is-active .wl { animation: spin 1s linear infinite; }
.s3.is-active .wr { animation: spin 1s linear infinite reverse; }
.mass-stream { transform-origin: top center; transform: scaleY(0); }
.s3.is-active .mass-stream { animation: pourDown .5s .2s ease-out forwards; }
.mass-pool { transform: scale(.2); }
.s3.is-active .mass-pool { animation: grow 1s .5s ease-out forwards; }
@keyframes fall {
  0%   { opacity: 0; transform: translateY(0); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(58px) rotate(90deg); }
}
@keyframes pourDown { to { transform: scaleY(1); } }
@keyframes grow { to { transform: scale(1); } }

/* Scene 4: melting & tempering */
.bowl-rim { fill: none; stroke: var(--caramel); stroke-width: 6; stroke-linecap: round; }
.s4.is-active .melt-wave { animation: waveSlide 1.2s linear infinite; }
.swirl { fill: none; stroke: #c98a5e; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; }
.s4.is-active .swirl { animation: swirlDraw 1.2s ease-out forwards; }
.spatula { transform-origin: 50% 0; }
.s4.is-active .spatula { animation: stir 1s ease-in-out infinite; }
.drop { opacity: 0; }
.s4.is-active .drop { animation: drip 1.1s ease-in infinite; }
.s4.is-active .d2 { animation-delay: .5s; }
@keyframes waveSlide { to { transform: translateX(-60px); } }
@keyframes swirlDraw { to { stroke-dashoffset: 0; } }
@keyframes stir {
  0%, 100% { transform: translateX(0) rotate(0); }
  50%      { transform: translateX(-62px) rotate(-16deg); }
}
@keyframes drip {
  0%   { opacity: 0; transform: translateY(-10px); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(28px); }
}

/* Scene 5: chocolate bar */
.mould { fill: #1e100a; stroke: var(--caramel); stroke-width: 4; }
.bar-fill { transform-origin: bottom center; transform: scaleY(0); }
.s5.is-active .bar-fill { animation: fillUp .7s .25s ease-out forwards; }
.bar-grid rect { fill: rgba(255, 255, 255, .06); stroke: rgba(0, 0, 0, .28); stroke-width: 2; opacity: 0; }
.s5.is-active .bar-grid rect { animation: fadeIn .3s .9s forwards; }
.pour { stroke: #7b4a2d; stroke-width: 8; stroke-linecap: round; opacity: 0; }
.s5.is-active .pour { animation: pourOnce .8s ease-out forwards; }
.s5.is-active .bar { animation: barPop .6s 1.05s var(--ease) forwards; }
.bar-shine { transform: translateX(0) skewX(-20deg); }
.s5.is-active .bar-shine { animation: shine .9s 1.3s ease-in-out forwards; }
.spark { fill: var(--caramel-soft); opacity: 0; }
.s5.is-active .spark { animation: sparkle 1s 1.3s ease-in-out infinite; }
.s5.is-active .sp2 { animation-delay: 1.5s; }
.s5.is-active .sp3 { animation-delay: 1.7s; }
@keyframes fillUp { to { transform: scaleY(1); } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes pourOnce {
  0%   { opacity: 1; transform: scaleY(0); transform-origin: top; }
  60%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1) translateY(20px); }
}
@keyframes barPop {
  0%   { transform: translateY(0) rotate(0); }
  60%  { transform: translateY(-16px) rotate(-4deg) scale(1.05); }
  100% { transform: translateY(-8px) rotate(-3deg) scale(1.04); }
}
@keyframes shine { to { transform: translateX(220px) skewX(-20deg); } }
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0); }
  50%      { opacity: 1; transform: scale(1.1) rotate(45deg); }
}

/* Caption */
.pl-caption {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  text-align: left;
  margin: .4rem auto 0;
  min-height: 56px;
}
.pl-step {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--caramel);
}
.pl-caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--cream);
}
.pl-caption small { color: rgba(251, 244, 234, .7); font-size: .92rem; }
.pl-caption.is-changing { animation: captionIn .45s var(--ease); }
@keyframes captionIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 575.98px) {
  .pl-step { font-size: 1.8rem; }
  .pl-caption strong { font-size: 1.15rem; }
}

/* Preloader: full-screen bean-to-bar animation shown while the page loads */
html.is-loading,
html.is-loading body { overflow: hidden; }
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 16px;
  background:
    radial-gradient(circle at 50% 40%, rgba(200, 131, 74, .22), transparent 60%),
    var(--choco-950);
  color: var(--cream);
  transition: opacity .7s var(--ease), visibility .7s, clip-path .8s var(--ease);
  clip-path: circle(150% at 50% 50%);
}
.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  clip-path: circle(0% at 50% 50%);
}
.preloader-inner {
  width: 100%;
  max-width: 420px;
  text-align: center;
  animation: captionIn .6s var(--ease) both;
}
.preloader-logo {
  height: 64px;
  width: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .4));
}
.preloader-stage { max-width: 320px; margin-top: .4rem; }
.preloader .pl-caption { min-height: 64px; }
.preloader-bar {
  display: flex;
  gap: 6px;
  max-width: 260px;
  margin: 1rem auto 0;
}
.preloader-bar span {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: rgba(251, 244, 234, .15);
  position: relative;
  overflow: hidden;
}
.preloader-bar span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--caramel), var(--caramel-soft));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease);
}
.preloader-bar .is-done::after { transform: scaleX(1); }
.preloader-skip {
  margin-top: 1.1rem;
  background: none;
  border: 0;
  color: rgba(251, 244, 234, .55);
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s;
}
.preloader-skip:hover,
.preloader-skip:focus-visible { color: var(--caramel-soft); }
@media (max-width: 575.98px) {
  .preloader-logo { height: 52px; }
  .preloader-stage { max-width: 260px; }
}

/* 4. Navbar --------------------------------------------------------------- */
.site-nav {
  padding: 1rem 0;
  transition: background-color .35s, box-shadow .35s, padding .35s;
}
.site-nav.scrolled {
  background: rgba(251, 244, 234, .98);     /* solid instead of backdrop blur: much cheaper while scrolling */
  box-shadow: 0 6px 24px rgba(43, 23, 16, .08);
  padding: .45rem 0;
}
.navbar-brand { padding: 0; }
.nav-logo {
  height: 58px;
  width: auto;
  mix-blend-mode: multiply;     /* lets the white logo background blend into the cream */
  transition: height .35s var(--ease);
}
.site-nav.scrolled .nav-logo { height: 48px; }

.site-nav .nav-link {
  font-weight: 600;
  color: var(--choco-800);
  padding: .5rem .85rem !important;
  position: relative;
}
.site-nav .nav-link::after {
  content: "";
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .25rem;
  height: 2px;
  background: var(--caramel);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.site-nav .nav-link:hover,
.site-nav .nav-link.active { color: var(--choco-900); }
.site-nav .nav-link:hover::after,
.site-nav .nav-link.active::after { transform: scaleX(1); }

/* Animated hamburger */
.choco-toggler {
  border: 0;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--choco-900);
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 0;
}
.choco-toggler:focus { box-shadow: none; }
.choco-toggler:focus-visible { outline: 3px solid var(--caramel); }
.toggler-line {
  width: 22px;
  height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s;
}
.choco-toggler[aria-expanded="true"] .toggler-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.choco-toggler[aria-expanded="true"] .toggler-line:nth-child(2) { opacity: 0; }
.choco-toggler[aria-expanded="true"] .toggler-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 5. Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 40px) 0 90px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 85% 30%, rgba(200, 131, 74, .22), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(234, 216, 191, .9), transparent 50%),
    var(--cream);
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}
.blob-1 {
  width: 520px;
  height: 520px;
  right: -160px;
  top: -140px;
  background: radial-gradient(circle at 30% 30%, var(--choco-500), var(--choco-900));
  opacity: .1;
}
.blob-2 {
  width: 260px;
  height: 260px;
  left: -90px;
  bottom: 40px;
  background: var(--caramel);
  opacity: .12;
}
/* CSS chocolate splash */
.hero-splash {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 90px;
  background:
    radial-gradient(circle at 10% 100%, var(--cream-200) 40px, transparent 41px),
    radial-gradient(circle at 30% 100%, var(--cream-200) 70px, transparent 71px),
    radial-gradient(circle at 55% 100%, var(--cream-200) 50px, transparent 51px),
    radial-gradient(circle at 80% 100%, var(--cream-200) 80px, transparent 81px),
    radial-gradient(circle at 98% 100%, var(--cream-200) 45px, transparent 46px);
  opacity: .9;
  pointer-events: none;
}

.hero-title {
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  font-weight: 800;
  margin: .25rem 0 1.25rem;
}
.hero-title .line {
  display: block;
  overflow: hidden;
  padding-bottom: .08em;
}
.hero-title .line > span { display: inline-block; }
.hero-title .accent {
  font-style: italic;
  font-weight: 500;
  color: var(--choco-500);
  background: linear-gradient(90deg, var(--choco-500), var(--caramel));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-lead {
  font-size: 1.15rem;
  color: var(--text-soft);
  max-width: 34rem;
  margin: 0 auto 2rem;
}
@media (min-width: 992px) { .hero-lead { margin-left: 0; } }

.hero-points {
  list-style: none;
  padding: 0;
  margin: 2.2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  justify-content: center;
  font-weight: 600;
  color: var(--choco-700);
  font-size: .95rem;
}
.hero-points i { color: var(--caramel); margin-right: .3rem; }
@media (min-width: 992px) { .hero-points { justify-content: flex-start; } }

/* Hero entrance (triggered when body gets .site-ready) */
.hero-anim {
  opacity: 0;
  transform: translateY(28px);
}
.hero-title .hero-anim { transform: translateY(105%); }
.site-ready .hero-anim {
  animation: heroUp .9s var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 120ms + 100ms);
}
@keyframes heroUp { to { opacity: 1; transform: none; } }

.hero-visual {
  position: relative;
  max-width: 540px;
  margin: 0 auto;
  opacity: 0;
  transform: scale(.88) rotate(-4deg);
}
.site-ready .hero-visual {
  animation: heroImgIn 1.2s var(--ease) .25s forwards;
}
@keyframes heroImgIn { to { opacity: 1; transform: none; } }

.hero-img-wrap {
  aspect-ratio: 1 / 1;
  border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 10px solid var(--white);
  animation: morph 12s ease-in-out infinite;
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
}
@keyframes morph {
  0%, 100% { border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; }
  50%      { border-radius: 56% 44% 55% 45% / 44% 56% 44% 56%; }
}

.hero-mascot-badge {
  position: absolute;
  left: -12px;
  bottom: 6%;
  width: clamp(130px, 34%, 190px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  padding: 12px;
  animation: bob 4s ease-in-out infinite;
}
.hero-mascot-badge img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-12px) rotate(3deg); }
}

.hero-tag {
  position: absolute;
  right: -6px;
  top: 10%;
  display: flex;
  align-items: center;
  gap: .7rem;
  background: var(--choco-900);
  color: var(--cream);
  padding: .8rem 1.1rem;
  border-radius: 18px;
  box-shadow: var(--shadow);
  font-size: .9rem;
  line-height: 1.25;
  text-decoration: none;
  z-index: 3;
  animation: bob 5s ease-in-out .8s infinite;
}
.hero-tag:hover { color: var(--cream); background: var(--choco-700); }
.hero-tag i { color: var(--berry); font-size: 1.4rem; }
.hero-tag strong { color: var(--caramel-soft); }

/* Floating chocolate pieces (pure CSS) */
.float-piece,
.float-bean {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  will-change: transform;
}
.float-piece {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: linear-gradient(145deg, var(--choco-500), var(--choco-800));
  box-shadow: inset 4px 4px 0 rgba(255, 255, 255, .15), inset -4px -4px 0 rgba(0, 0, 0, .2), 0 10px 20px rgba(43, 23, 16, .25);
  animation: float 6s ease-in-out infinite;
}
.fp-1 { top: -2%; left: 14%; transform: rotate(18deg); }
.fp-2 { bottom: -4%; right: 18%; width: 38px; height: 38px; animation-delay: -2s; }
.fp-3 { top: 48%; right: -4%; width: 30px; height: 30px; animation-delay: -4s; }

.float-bean {
  width: 34px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 30%, #9a5d38, var(--choco-700) 70%);
  box-shadow: 0 8px 16px rgba(43, 23, 16, .25);
  animation: float 7s ease-in-out infinite;
}
.float-bean::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 12%;
  bottom: 12%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, .3);
  border-radius: 2px;
}
.fb-1 { top: 30%; left: -6%; animation-delay: -1s; }
.fb-2 { top: -6%; right: 22%; width: 26px; height: 40px; animation-delay: -3.5s; }

@keyframes float {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50%      { translate: 0 -18px; rotate: 14deg; }
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  width: 28px;
  height: 46px;
  border: 2px solid var(--choco-700);
  border-radius: 20px;
  z-index: 3;
}
.scroll-cue span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 9px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--choco-700);
  animation: scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(16px); }
}

/* 6. Section headings ----------------------------------------------------- */
.section {
  position: relative;
  padding: 110px 0;
}
.section-cream { background: var(--cream-200); }
.section-dark {
  background: radial-gradient(ellipse at top, var(--choco-800), var(--choco-950) 70%);
  color: var(--cream);
}
.section-head {
  max-width: 680px;
  margin: 0 auto 3.2rem;
}
.section-title {
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 700;
  margin-bottom: 1rem;
}
.section-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--choco-500);
}
.section-dark .section-title em,
.collection .section-title em { color: var(--caramel-soft); }
.section-sub {
  font-size: 1.1rem;
  color: var(--text-soft);
  margin: 0;
}

/* 7. Products & filters --------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-bottom: 2.6rem;
}
.filter-btn {
  border: 2px solid var(--beige);
  background: var(--white);
  color: var(--choco-800);
  font-weight: 700;
  padding: .55rem 1.35rem;
  border-radius: 999px;
  transition: all .25s var(--ease);
}
.filter-btn:hover {
  border-color: var(--caramel);
  transform: translateY(-2px);
}
.filter-btn.active {
  background: var(--choco-900);
  border-color: var(--choco-900);
  color: var(--cream);
  box-shadow: 0 8px 18px rgba(43, 23, 16, .2);
}

.product-item.is-hidden { display: none; }
.product-item.is-showing { animation: popIn .5s var(--ease) both; }
@keyframes popIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.product-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.product-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}
.product-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.product-card:hover .product-img img { transform: scale(1.1) rotate(1deg); }
.product-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: var(--berry);
  color: var(--white);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: 999px;
}
.product-body {
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-cat {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--caramel);
}
.product-name {
  font-size: 1.4rem;
  margin: .3rem 0 .5rem;
}
.product-desc {
  color: var(--text-soft);
  font-size: .98rem;
  flex: 1;
}
.product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--beige);
}
.product-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--choco-900);
  line-height: 1.1;
}
.product-price small {
  display: block;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.no-results {
  color: var(--text-soft);
  margin-top: 2rem;
}
.price-note {
  font-size: .9rem;
  color: var(--text-soft);
  margin: 2.4rem 0 0;
}

/* Real product photos (cropped from the brand's own flyers) sit on a paper-like background */
.product-img--real { background: #f4efe6; }
.product-img--real img {
  object-fit: contain;
  padding: 10px;
}
.product-photo-note {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  font-size: .68rem;
  font-weight: 600;
  color: var(--white);
  background: rgba(30, 16, 10, .55);
  padding: .15rem .55rem;
  border-radius: 999px;
}
.product-weight {
  display: inline-block;
  vertical-align: middle;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  color: var(--choco-500);
  background: var(--cream-200);
  border-radius: 999px;
  padding: .15rem .6rem;
  margin-left: .2rem;
}

.bulk-card {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.6rem;
  background: linear-gradient(160deg, var(--choco-800), var(--choco-950));
  color: rgba(251, 244, 234, .8);
}
.bulk-card h3 { color: var(--cream); font-size: 1.5rem; margin: .4rem 0 .6rem; }
.bulk-card p { font-size: .97rem; margin-bottom: 1.4rem; }
.bulk-mascot {
  width: 130px;
  border-radius: 50%;
  background: var(--white);
  padding: 8px;
  animation: bob 4s ease-in-out infinite;
}

/* 8. Story ---------------------------------------------------------------- */
.story-visual {
  position: relative;
  padding: 0 12% 14% 0;
}
.story-img-main {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 5 / 5.4;
  box-shadow: var(--shadow-lg);
}
.story-img-main img,
.story-img-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-img-small {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 48%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 8px solid var(--cream);
  box-shadow: var(--shadow);
}
.story-stamp {
  position: absolute;
  top: -26px;
  right: 4%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--choco-900);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
}
.story-stamp svg {
  position: absolute;
  inset: 0;
  animation: spin 18s linear infinite;
}
.story-stamp text {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.4px;
  fill: var(--cream);
}
.story-stamp i { color: var(--berry); font-size: 1.8rem; }
@keyframes spin { to { transform: rotate(360deg); } }

.story-lead {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--choco-700);
  border-left: 4px solid var(--caramel);
  padding-left: 1.2rem;
  margin: 1.2rem 0 1.4rem;
}
.story-mascot {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--white);
  border-radius: var(--radius);
  padding: .9rem 1.2rem;
  margin: 1.6rem 0 2rem;
  box-shadow: var(--shadow-sm);
}
.story-mascot img {
  width: 92px;
  height: auto;
  flex-shrink: 0;
  animation: bob 4s ease-in-out infinite;
}
.story-mascot p { margin: 0; font-size: .95rem; color: var(--text-soft); }
.story-mascot strong { color: var(--choco-900); }

.story-text { color: rgba(251, 244, 234, .74); margin: 0 0 1.4rem; }
.story-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin: 0 0 1.4rem;
}
.story-stats > div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .8rem .9rem;
}
.story-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--caramel-soft);
}
.story-stats > div:last-child strong { font-size: 1.05rem; padding: .3rem 0 .15rem; }
.story-stats span { font-size: .82rem; color: rgba(251, 244, 234, .68); }
@media (max-width: 575.98px) {
  .story-stats { grid-template-columns: 1fr 1fr; }
  .story-stats > div:last-child { grid-column: 1 / -1; }
}

/* Meet the team */
/* Sits in the left column of Our Story, two cards side by side */
.team-title { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: 1.2rem; }
.team .row > * { max-width: 280px; }      /* keep the cards (and their photos) compact */
.team-card {
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.team-card:hover { transform: translateY(-6px); border-color: rgba(226, 174, 120, .45); }
.team-photo { aspect-ratio: 1 / 1; overflow: hidden; }
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
  transition: transform .6s var(--ease);
}
.team-card:hover .team-photo img { transform: scale(1.04); }
.team-body { padding: .8rem 1rem 1rem; text-align: center; }
.team-role {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--caramel-soft);
}
.team-name { font-size: 1.2rem; margin: .15rem 0 .3rem; color: var(--cream); }
.team-body p { margin: 0; font-size: .85rem; line-height: 1.5; color: rgba(251, 244, 234, .7); }
.team-phone {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .55rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(226, 174, 120, .45);
  color: var(--caramel-soft);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.team-phone:hover,
.team-phone:focus-visible { background: var(--caramel-soft); color: var(--choco-950); }
@media (max-width: 575.98px) {
  .team-body { padding: .7rem .6rem .8rem; }
  .team-name { font-size: 1rem; }
  .team-role { font-size: .65rem; }
  .team-body p { font-size: .78rem; }
  .team-phone { font-size: .78rem; padding: .25rem .6rem; }
}

/* 9. Chocolate journey ---------------------------------------------------- */
.journey { overflow: hidden; }
.journey-glow {
  position: absolute;
  width: 700px;
  height: 700px;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(200, 131, 74, .18), transparent 60%);
  pointer-events: none;
}
.journey-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.4rem;
  position: relative;
}
/* Dotted connecting line between steps */
.journey-steps::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 158px;
  border-top: 2px dashed rgba(226, 174, 120, .4);
}
.journey-step {
  position: relative;
  text-align: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
  padding: 1rem 1rem 1.6rem;
  transition: transform .4s var(--ease), background .4s, border-color .4s;
}
.journey-step:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(226, 174, 120, .4);
}
.step-img {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  margin-bottom: -28px;
}
.step-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05);
  transition: transform .8s var(--ease);
}
.journey-step:hover .step-img img { transform: scale(1.08); }
.step-num {
  position: absolute;
  top: 1.4rem;
  left: 1.4rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  background: var(--cream);
  color: var(--choco-900);
  border-radius: 999px;
  padding: .1rem .6rem;
}
.step-icon {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--caramel);
  color: var(--choco-950);
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  border: 4px solid var(--choco-900);
}
.journey-step h3 {
  color: var(--cream);
  font-size: 1.2rem;
  margin-bottom: .5rem;
}
.journey-step p {
  color: rgba(251, 244, 234, .72);
  font-size: .93rem;
  margin: 0;
}
.journey-note {
  margin: 2.6rem 0 0;
  font-size: .85rem;
  color: rgba(251, 244, 234, .6);
}
/* Staggered reveal for journey steps */
.journey-step:nth-child(2) { transition-delay: .08s; }
.journey-step:nth-child(3) { transition-delay: .16s; }
.journey-step:nth-child(4) { transition-delay: .24s; }
.journey-step:nth-child(5) { transition-delay: .32s; }

/* 10. Features ------------------------------------------------------------ */
.feature-card {
  height: 100%;
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem 1.6rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
  transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
  border-color: var(--beige);
}
.feature-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 1.3rem;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-size: 1.9rem;
  color: var(--cream);
  background: linear-gradient(145deg, var(--choco-500), var(--choco-900));
  box-shadow: 0 10px 22px rgba(43, 23, 16, .25);
  transition: transform .5s var(--ease), border-radius .5s;
}
.feature-card:hover .feature-icon {
  transform: rotate(-8deg) scale(1.08);
  border-radius: 50%;
}
.feature-card h3 { font-size: 1.25rem; margin-bottom: .6rem; }
.feature-card p { color: var(--text-soft); font-size: .97rem; margin: 0; }

/* 11. Christmas specials & price list ------------------------------------- */
.section.christmas {
  overflow: hidden;
  color: var(--cream);
  background:
    radial-gradient(circle at 15% 10%, rgba(184, 67, 74, .45), transparent 45%),
    radial-gradient(circle at 90% 90%, rgba(46, 107, 62, .35), transparent 45%),
    linear-gradient(160deg, #3d1714, var(--choco-950));
}
.christmas .section-title em { color: #f3b8a6; }
.eyebrow-festive {
  color: #ffd9cf;
  background: rgba(184, 67, 74, .35);
}
.xmas-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: rgba(251, 244, 234, .85);
  margin: 0 0 1.2rem;
}
.booking-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #2e6b3e;
  color: var(--white);
  font-weight: 700;
  padding: .45rem 1.1rem;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 107, 62, .6); }
  50%      { box-shadow: 0 0 0 10px rgba(46, 107, 62, 0); }
}

/* Gentle CSS snowfall */
.snowfall { position: absolute; inset: 0; pointer-events: none; }
.snowfall span {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
  animation: snow 12s linear infinite;
}
.snowfall span:nth-child(1)  { left: 4%;  animation-delay: 0s; }
.snowfall span:nth-child(2)  { left: 12%; animation-delay: -3s; width: 5px; height: 5px; }
.snowfall span:nth-child(3)  { left: 21%; animation-delay: -7s; }
.snowfall span:nth-child(4)  { left: 30%; animation-delay: -1s; width: 6px; height: 6px; }
.snowfall span:nth-child(5)  { left: 41%; animation-delay: -9s; }
.snowfall span:nth-child(6)  { left: 50%; animation-delay: -5s; width: 4px; height: 4px; }
.snowfall span:nth-child(7)  { left: 59%; animation-delay: -2s; }
.snowfall span:nth-child(8)  { left: 68%; animation-delay: -8s; width: 6px; height: 6px; }
.snowfall span:nth-child(9)  { left: 77%; animation-delay: -4s; }
.snowfall span:nth-child(10) { left: 85%; animation-delay: -10s; width: 5px; height: 5px; }
.snowfall span:nth-child(11) { left: 92%; animation-delay: -6s; }
.snowfall span:nth-child(12) { left: 97%; animation-delay: -11s; width: 4px; height: 4px; }
@keyframes snow {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(40px, 1100px); opacity: .2; }
}

.hamper-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: 2rem 1.8rem 1.8rem;
  box-shadow: var(--shadow-lg);
  border: 3px solid transparent;
  transition: transform .4s var(--ease), border-color .4s;
}
.hamper-card:hover { transform: translateY(-8px); border-color: var(--caramel); }
.hamper-card--jumbo { background: linear-gradient(160deg, var(--white), var(--cream-200)); }
.hamper-flag {
  position: absolute;
  top: 18px;
  right: -8px;
  background: var(--berry);
  color: var(--white);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35rem .9rem;
  border-radius: 999px 0 0 999px;
}
.hamper-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 2px dashed var(--beige);
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
}
.hamper-ribbon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--berry);
  color: var(--white);
  font-size: 1.5rem;
}
.hamper-card--jumbo .hamper-ribbon { background: #2e6b3e; }
.hamper-head h3 { font-size: 1.7rem; margin: 0; flex: 1; }
.hamper-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.2rem;
  color: var(--berry);
  margin: 0;
  line-height: 1;
}
.hamper-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  flex: 1;
}
.hamper-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .5rem;
  padding: .45rem 0;
  font-weight: 500;
}
.hamper-list i { color: #2e6b3e; }
.hamper-list small { color: var(--text-soft); font-style: italic; }

.xmas-strip {
  margin-top: 3.5rem;
  text-align: center;
}
.xmas-strip-title {
  font-size: 1.35rem;
  color: var(--cream);
  margin-bottom: 1.5rem;
}
.xmas-items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.xmas-item {
  background: rgba(251, 244, 234, .08);
  border: 1px solid rgba(251, 244, 234, .14);
  border-radius: var(--radius);
  padding: .8rem;
  font-size: .9rem;
  line-height: 1.35;
  color: rgba(251, 244, 234, .85);
  transition: transform .35s var(--ease), background .35s;
}
.xmas-item:hover { transform: translateY(-6px); background: rgba(251, 244, 234, .14); }
.xmas-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #f4efe6;
  border-radius: 14px;
  margin-bottom: .7rem;
}
.xmas-item strong { color: #f3b8a6; font-size: 1.05rem; }

/* Price list */
.menu-card {
  height: 100%;
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-sm);
  border-top: 5px solid var(--caramel);
  transition: transform .35s var(--ease), box-shadow .35s;
}
.menu-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.menu-title {
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.menu-title i { color: var(--caramel); }
.menu-title small {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-soft);
}
.menu-list { list-style: none; padding: 0; margin: 0; }
.menu-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding: .5rem 0;
  border-bottom: 1px dashed var(--beige);
}
.menu-list li:last-child { border-bottom: 0; }
.menu-list span small { color: var(--text-soft); font-size: .8rem; }
.menu-list b {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--choco-900);
  white-space: nowrap;
}
.menu-list .is-mixed {
  background: var(--cream-200);
  border-radius: 10px;
  padding: .5rem .7rem;
  margin-top: .3rem;
  font-weight: 700;
  color: var(--choco-500);
}
.menu-card--cta {
  text-align: center;
  background: linear-gradient(160deg, var(--cream-200), var(--beige));
  border-top-color: var(--choco-900);
}
.menu-card--cta img {
  width: 120px;
  mix-blend-mode: multiply;
  margin-bottom: .6rem;
  animation: bob 4s ease-in-out infinite;
}
.menu-card--cta h3 { font-size: 1.35rem; }
.menu-card--cta p { color: var(--text-soft); font-size: .97rem; margin-bottom: .5rem; }

/* Floating WhatsApp button */
.wa-float {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 1030;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25d366;
  color: var(--white);
  font-size: 1.7rem;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
  transition: transform .3s var(--ease);
  animation: pulseWa 2.8s ease-in-out infinite;
}
.wa-float:hover,
.wa-float:focus-visible { color: var(--white); transform: scale(1.08); }
@keyframes pulseWa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5), 0 10px 26px rgba(0, 0, 0, .25); }
  50%      { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0), 0 10px 26px rgba(0, 0, 0, .25); }
}

/* 12. Testimonials -------------------------------------------------------- */
.testimonial-carousel {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 64px 56px;
}
.testimonial {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 3rem 2.5rem 2.4rem;
  text-align: center;
  box-shadow: var(--shadow);
  margin: 0;
  position: relative;
}
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: -.15em;
  left: .35em;
  font-family: var(--font-display);
  font-size: 9rem;
  line-height: 1;
  color: var(--beige);
  pointer-events: none;
}
.sample-pill {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-soft);
  border: 1px dashed var(--beige);
  border-radius: 999px;
  padding: .2rem .7rem;
  margin-bottom: .8rem;
}
.stars { color: var(--caramel); margin-bottom: 1rem; letter-spacing: .2em; }
.testimonial blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  line-height: 1.5;
  color: var(--choco-800);
  margin: 0 0 1.6rem;
  position: relative;
}
.testimonial figcaption {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-weight: 700;
  color: var(--choco-900);
  text-align: left;
}
.testimonial figcaption small {
  display: block;
  font-weight: 500;
  color: var(--text-soft);
}
.avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--caramel), var(--choco-500));
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.2rem;
}
.t-control {
  width: 50px;
  height: 50px;
  top: calc(50% - 28px);
  bottom: auto;
  border-radius: 50%;
  background: var(--choco-900);
  color: var(--cream);
  opacity: 1;
  font-size: 1.2rem;
  transition: background .25s, transform .25s;
}
.t-control:hover,
.t-control:focus-visible {
  background: var(--caramel);
  color: var(--choco-950);
  transform: scale(1.08);
}
.carousel-control-prev.t-control { left: 0; }
.carousel-control-next.t-control { right: 0; }
.testimonial-carousel .carousel-indicators { margin-bottom: 0; }
.testimonial-carousel .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: var(--choco-500);
  opacity: .35;
  transition: width .3s, opacity .3s;
}
.testimonial-carousel .carousel-indicators .active {
  width: 30px;
  border-radius: 6px;
  opacity: 1;
}

/* 13. Contact ------------------------------------------------------------- */
.contact-info { margin: 1.6rem 0; }
.ci-item {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: .9rem;
  color: var(--choco-800);
  font-weight: 500;
}
.ci-item i {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--cream-200);
  color: var(--choco-500);
  font-size: 1.2rem;
}
.ci-item small { display: block; color: var(--text-soft); font-weight: 500; }
.ci-item strong { color: var(--choco-900); font-size: 1.1rem; }
a.ci-item { text-decoration: none; transition: transform .25s var(--ease); }
a.ci-item:hover { transform: translateX(4px); }
a.ci-item:hover i { background: #25d366; color: var(--white); }
.ci-item i { transition: background .25s, color .25s; }
.section-cream .ci-item i { background: var(--white); }

.social-row {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
}
.social-link {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--choco-900);
  color: var(--cream);
  font-size: 1.15rem;
  text-decoration: none;
  transition: transform .3s var(--ease), background .3s, color .3s;
}
.social-link:hover,
.social-link:focus-visible {
  background: var(--caramel);
  color: var(--choco-950);
  transform: translateY(-4px) rotate(-6deg);
}
.social-link.light {
  background: rgba(251, 244, 234, .1);
  color: var(--cream);
}
.social-link.light:hover { background: var(--caramel); color: var(--choco-950); }

.contact-mascot {
  width: 190px;
  margin-top: 2rem;
  mix-blend-mode: multiply;
  animation: bob 5s ease-in-out infinite;
}

.contact-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  box-shadow: var(--shadow);
}
.contact-card .form-label {
  font-weight: 700;
  color: var(--choco-800);
  font-size: .92rem;
}
.contact-card .form-control {
  border-radius: 14px;
  border: 2px solid var(--cream-200);
  background: var(--cream);
  padding: .8rem 1rem;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.contact-card .form-control:focus {
  border-color: var(--caramel);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(200, 131, 74, .15);
}
.contact-card .form-control.is-invalid { border-color: var(--berry); }
.contact-card .form-control.is-valid { border-color: #5c8a5a; }

.form-success {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  background: #eef6ec;
  border: 1px solid #cfe5ca;
  color: #2f5130;
  animation: popIn .5s var(--ease) both;
}
.form-success[hidden] { display: none; }
.form-success i { font-size: 1.6rem; color: #4a8a47; }
.form-success p { font-size: .93rem; }
.form-note {
  font-size: .83rem;
  color: var(--text-soft);
  margin: 1.2rem 0 0;
}

/* 14. Footer & back-to-top ------------------------------------------------ */
.site-footer {
  position: relative;
  background: var(--choco-950);
  color: rgba(251, 244, 234, .75);
  padding: 120px 0 30px;
}
.footer-wave {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 70px;
  line-height: 0;
}
.footer-wave svg { width: 100%; height: 100%; fill: var(--cream); }
.footer-logo {
  display: inline-block;
  background: var(--white);       /* the logo keeps its original white background */
  border-radius: 20px;
  padding: .7rem 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  transition: transform .3s var(--ease);
}
.footer-logo:hover { transform: translateY(-4px) rotate(-1deg); }
.footer-logo img { height: 92px; width: auto; display: block; }
.footer-tagline {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--cream);
  margin: 1.2rem 0 0;
}
.footer-tagline span { color: var(--caramel-soft); }
.footer-title {
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--caramel-soft);
  margin-bottom: 1rem;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .45rem; }
.footer-links a {
  color: rgba(251, 244, 234, .8);
  text-decoration: none;
  transition: color .25s, padding-left .25s;
}
.footer-links a:hover { color: var(--caramel-soft); padding-left: 6px; }
.footer-text { font-size: .95rem; }
.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(251, 244, 234, .12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  font-size: .9rem;
}
.footer-bottom p { margin: 0; }

.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1030;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: var(--caramel);
  color: var(--choco-950);
  font-size: 1.3rem;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity .35s, visibility .35s, transform .35s var(--ease), background .25s;
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.back-to-top:hover { background: var(--choco-900); color: var(--cream); transform: translateY(-4px); }

/* 15. Product modal ------------------------------------------------------- */
.product-modal {
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--cream);
}
.product-modal .btn-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  background-color: var(--white);
  border-radius: 50%;
  padding: .7rem;
  opacity: 1;
}
.pm-img { height: 100%; min-height: 280px; }
.pm-img img { width: 100%; height: 100%; object-fit: cover; }
.pm-body { padding: 2.2rem; }
.pm-body .modal-title { font-size: 2rem; margin: .3rem 0 .8rem; }
.pm-small { font-size: .85rem; color: var(--text-soft); }
.pm-img--real img { object-fit: contain; padding: 16px; }
.pm-img--real { background: #f4efe6; }
.pm-notes {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.pm-notes li {
  background: var(--white);
  border: 1px solid var(--beige);
  border-radius: 999px;
  padding: .25rem .8rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--choco-700);
}

/* 16. Scroll reveal & image fallbacks ------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js .reveal-left { transform: translateX(-50px); }
.js .reveal-right { transform: translateX(50px); }
.js .reveal.in-view {
  opacity: 1;
  transform: none;
}

/* Fallback: a warm chocolate gradient sits behind every photo */
.img-wrap {
  position: relative;
  background:
    radial-gradient(circle at 30% 30%, rgba(226, 174, 120, .45), transparent 50%),
    linear-gradient(135deg, var(--choco-500), var(--choco-900));
}
.img-wrap.img-failed img { opacity: 0; }
.img-wrap.img-failed::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--white) url("../assets/images/mascot.png") center / 82% auto no-repeat;
  box-shadow: var(--shadow);
}

/* 16b. FULL CHOCOLATE THEME ------------------------------------------------
   Dark chocolate surfaces, caramel accents and cream text across the site.
   (Overrides the lighter base styles above.)
   ------------------------------------------------------------------------- */
:root {
  --surface: #36201a;
  --surface-2: #45291d;
  --line: rgba(226, 174, 120, .18);
  --on-dark: rgba(251, 244, 234, .8);
  --on-dark-soft: rgba(251, 244, 234, .62);
  --cocoa-dots: radial-gradient(rgba(226, 174, 120, .07) 1.2px, transparent 1.6px) 0 0 / 22px 22px;
}

body {
  background: var(--choco-950);
  color: var(--on-dark);
}
h1, h2, h3, h4, .section-title { color: var(--cream); }
.section-title em { color: var(--caramel-soft); }
.section-sub { color: var(--on-dark-soft); }
a { color: var(--caramel-soft); }
a:hover { color: var(--cream); }

/* Section backgrounds: alternating dark and darker chocolate with cocoa-dot texture */
.section { background: var(--choco-900); }
.section-cream { background: var(--cocoa-dots), var(--choco-950); }

/* Buttons: caramel primary, cream outline secondary */
.btn-choco {
  background: linear-gradient(135deg, var(--caramel-soft), var(--caramel));
  border-color: var(--caramel);
  color: var(--choco-950);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
.btn-choco:hover,
.btn-choco:focus-visible {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--choco-950);
}
.btn-outline-choco { color: var(--cream); border-color: rgba(251, 244, 234, .55); }
.btn-outline-choco:hover,
.btn-outline-choco:focus-visible { background: var(--cream); border-color: var(--cream); color: var(--choco-950); }

.eyebrow { color: var(--caramel-soft); background: rgba(226, 174, 120, .12); }
.demo-note {
  background: var(--surface);
  border-color: var(--line);
  color: var(--on-dark-soft);
}

/* Navbar: logo sits on a cream badge so its white background looks intentional */
.navbar-brand {
  background: var(--white);
  border-radius: 14px;
  padding: 4px 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.nav-logo { mix-blend-mode: normal; height: 50px; }
.site-nav.scrolled .nav-logo { height: 42px; }
.site-nav.scrolled {
  background: rgba(30, 16, 10, .92);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .4);
}
.site-nav .nav-link { color: var(--on-dark); }
.site-nav .nav-link:hover,
.site-nav .nav-link.active { color: var(--cream); }
.choco-toggler { background: var(--caramel); }
.toggler-line { background: var(--choco-950); }

/* Hero */
.hero {
  background:
    radial-gradient(ellipse at 80% 35%, rgba(200, 131, 74, .3), transparent 55%),
    radial-gradient(ellipse at 5% 95%, rgba(123, 74, 45, .45), transparent 50%),
    linear-gradient(180deg, var(--choco-900), #24130c);
}
.blob-1 { opacity: .35; background: radial-gradient(circle at 30% 30%, var(--choco-500), transparent 70%); }
.blob-2 { opacity: .16; }
/* Melted-chocolate drips into the next section */
.hero-splash {
  height: 70px;
  background:
    radial-gradient(circle at 6% 100%, var(--choco-950) 34px, transparent 35px),
    radial-gradient(circle at 22% 100%, var(--choco-950) 58px, transparent 59px),
    radial-gradient(circle at 41% 100%, var(--choco-950) 40px, transparent 41px),
    radial-gradient(circle at 60% 100%, var(--choco-950) 66px, transparent 67px),
    radial-gradient(circle at 80% 100%, var(--choco-950) 44px, transparent 45px),
    radial-gradient(circle at 96% 100%, var(--choco-950) 52px, transparent 53px);
  opacity: 1;
}
.hero-title .accent {
  background: linear-gradient(90deg, var(--caramel-soft), #f6d7b0, var(--caramel));
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-lead { color: var(--on-dark); }
.hero-points { color: var(--on-dark); }
.hero-img-wrap { border-color: var(--choco-700); box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 10px rgba(200, 131, 74, .12); }
.hero-tag { background: var(--caramel); color: var(--choco-950); }
.hero-tag i { color: var(--choco-900); }
.hero-tag strong { color: var(--choco-950); }
.hero-tag:hover { background: var(--cream); color: var(--choco-950); }
.scroll-cue { border-color: var(--on-dark-soft); }
.scroll-cue span { background: var(--caramel-soft); }

/* Filters & product cards */
.filter-btn {
  background: transparent;
  border-color: var(--line);
  color: var(--on-dark);
}
.filter-btn:hover { border-color: var(--caramel); color: var(--cream); }
.filter-btn.active {
  background: var(--caramel);
  border-color: var(--caramel);
  color: var(--choco-950);
}
.product-card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.product-card:hover { box-shadow: 0 26px 60px rgba(0, 0, 0, .55); border-color: rgba(226, 174, 120, .45); }
.product-name { color: var(--cream); }
.product-desc { color: var(--on-dark-soft); }
.product-cat { color: var(--caramel-soft); }
.product-foot { border-top-color: var(--line); }
.product-price { color: var(--caramel-soft); }
.product-weight { background: rgba(226, 174, 120, .14); color: var(--caramel-soft); }
.bulk-card { background: linear-gradient(160deg, var(--choco-500), var(--choco-800)); }
.price-note,
.no-results { color: var(--on-dark-soft); }

/* Price list */
.menu-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 5px solid var(--caramel);
}
.menu-list li { border-bottom-color: var(--line); }
.menu-list span small { color: var(--on-dark-soft); }
.menu-list b { color: var(--cream); }
.menu-list .is-mixed { background: rgba(226, 174, 120, .12); color: var(--caramel-soft); }
.menu-card--cta {
  background: linear-gradient(160deg, var(--choco-500), var(--choco-800));
  border-top-color: var(--caramel-soft);
}
.menu-card--cta p { color: var(--on-dark); }
.menu-card--cta img,
.contact-mascot {
  mix-blend-mode: normal;
  background: var(--white);
  border-radius: 50%;
  padding: 8px;
}
.menu-card--cta img { width: 110px; }

/* Story */
.story-lead { color: var(--caramel-soft); }
.story-img-small { border-color: var(--choco-950); }
.story-mascot { background: var(--surface); border: 1px solid var(--line); }
.story-mascot img { background: var(--white); border-radius: 50%; padding: 6px; width: 84px; }
.story-mascot p { color: var(--on-dark-soft); }
.story-mascot strong { color: var(--cream); }
.story-stamp { background: var(--caramel); }
.story-stamp text { fill: var(--choco-950); }
.story-stamp i { color: var(--choco-900); }

/* Journey: milk-chocolate glow to stand apart */
.section-dark {
  background:
    radial-gradient(ellipse at top, rgba(123, 74, 45, .55), transparent 60%),
    linear-gradient(180deg, var(--choco-800), var(--choco-950));
}

/* Features */
.feature-card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.feature-card:hover { border-color: rgba(226, 174, 120, .45); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.feature-card p { color: var(--on-dark-soft); }
.feature-icon { background: linear-gradient(145deg, var(--caramel-soft), var(--caramel)); color: var(--choco-950); }

/* Testimonials */
.testimonial {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .4);
}
.testimonial::before { color: rgba(226, 174, 120, .2); }
.testimonial blockquote { color: var(--cream); }
.testimonial figcaption { color: var(--cream); }
.testimonial figcaption small { color: var(--on-dark-soft); }
.sample-pill { border-color: var(--line); color: var(--on-dark-soft); }
.t-control { background: var(--caramel); color: var(--choco-950); }
.t-control:hover,
.t-control:focus-visible { background: var(--cream); }
.testimonial-carousel .carousel-indicators [data-bs-target] { background: var(--caramel); }

/* Contact */
.ci-item { color: var(--on-dark); }
.ci-item strong { color: var(--cream); }
.ci-item small { color: var(--on-dark-soft); }
.ci-item i,
.section-cream .ci-item i { background: var(--surface-2); color: var(--caramel-soft); }
.social-link { background: var(--surface-2); color: var(--caramel-soft); }
.contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .4);
}
.contact-card .form-label { color: var(--cream); }
.contact-card .form-control {
  background: var(--choco-950);
  border-color: var(--line);
  color: var(--cream);
}
.contact-card .form-control::placeholder { color: rgba(251, 244, 234, .38); }
.contact-card .form-control:focus { background: #160b06; color: var(--cream); border-color: var(--caramel); }
.contact-card .invalid-feedback { color: #ff9f9f; }
.contact-card .form-control.is-invalid { border-color: #e26a6a; }
.form-success { background: rgba(46, 107, 62, .22); border-color: rgba(120, 190, 130, .35); color: #cfe8cf; }
.form-success i { color: #7fd08a; }
.form-success a { color: #ffffff; }
.form-note { color: var(--on-dark-soft); }

/* Footer */
.site-footer { background: #120804; }
.footer-wave svg { fill: var(--choco-950); }

/* Product modal */
.product-modal { background: var(--surface); color: var(--on-dark); }
.product-modal .modal-title { color: var(--cream); }
.pm-notes li { background: var(--surface-2); border-color: var(--line); color: var(--cream); }
.pm-small { color: var(--on-dark-soft); }

/* Mobile menu panel */
@media (max-width: 1199.98px) {
  .site-nav .navbar-collapse { background: var(--choco-900); border: 1px solid var(--line); }
  .site-nav .nav-link { border-bottom-color: var(--line); }
  .site-nav .nav-link.active { color: var(--caramel-soft); }
}

/* 16c. MILK CHOCOLATE + DARK CHOCOLATE SECTIONS ------------------------------
   Sections alternate: dark chocolate (.section) and milk chocolate (.section-milk).
   ------------------------------------------------------------------------- */
:root {
  --milk-1: #8a5636;
  --milk-2: #6e4128;
}
.section { background: var(--cocoa-dots), var(--choco-900); }
.section-milk {
  background:
    radial-gradient(rgba(255, 230, 200, .07) 1.2px, transparent 1.6px) 0 0 / 22px 22px,
    radial-gradient(ellipse at 50% 0, rgba(226, 174, 120, .25), transparent 60%),
    linear-gradient(180deg, var(--milk-1), var(--milk-2));
}
.section-milk .section-sub,
.section-milk .price-note,
.section-milk .no-results { color: rgba(251, 244, 234, .85); }
.section-milk .eyebrow { color: #fff1df; background: rgba(43, 23, 16, .35); }
.section-milk .section-title em { color: #f6d7b0; }
/* Dark chocolate cards on milk chocolate sections */
.section-milk .product-card,
.section-milk .menu-card,
.section-milk .feature-card {
  background: linear-gradient(180deg, var(--choco-800), var(--choco-900));
  border-color: rgba(226, 174, 120, .25);
}
.section-milk .filter-btn { border-color: rgba(251, 244, 234, .35); color: var(--cream); }
.section-milk .filter-btn.active { background: var(--choco-900); border-color: var(--choco-900); color: var(--caramel-soft); }

/* Christmas keeps a festive glow on dark chocolate */
.section.christmas {
  background:
    radial-gradient(circle at 15% 10%, rgba(184, 67, 74, .3), transparent 45%),
    radial-gradient(circle at 90% 90%, rgba(46, 107, 62, .25), transparent 45%),
    linear-gradient(180deg, var(--choco-900), var(--choco-950));
}

/* Hero drips melt into the milk chocolate section below */
.hero-splash {
  background:
    radial-gradient(circle at 6% 100%, var(--milk-1) 34px, transparent 35px),
    radial-gradient(circle at 22% 100%, var(--milk-1) 58px, transparent 59px),
    radial-gradient(circle at 41% 100%, var(--milk-1) 40px, transparent 41px),
    radial-gradient(circle at 60% 100%, var(--milk-1) 66px, transparent 67px),
    radial-gradient(circle at 80% 100%, var(--milk-1) 44px, transparent 45px),
    radial-gradient(circle at 96% 100%, var(--milk-1) 52px, transparent 53px);
}
.footer-wave svg { fill: var(--choco-900); }

/* Cards: keep the order button at the bottom even without a description */
.product-foot { margin-top: auto; }
.product-desc { flex: 0 0 auto; }
.menu-card { display: flex; flex-direction: column; }
.menu-card .menu-list { flex: 1; margin-bottom: 1.2rem; }
.menu-card--cta .menu-list { flex: 0 0 auto; margin-bottom: 0; }
.menu-card--cta h3 { margin-bottom: .6rem; }
.view-details .bi-chevron-down { display: inline-block; transition: transform .3s var(--ease); }
.view-details:hover .bi-chevron-down { transform: translateY(3px); }

.story-facts { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .7rem; }
.story-facts li { display: flex; align-items: center; gap: .7rem; font-weight: 600; color: var(--cream); }
.story-facts i {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface-2); color: var(--caramel-soft);
}

/* Product modal: "Choose" + quantity drop-downs with a chocolate down-arrow */
.pm-choose {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: .9rem;
  margin: 1.2rem 0 1rem;
}
.pm-field label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--caramel-soft);
  margin-bottom: .35rem;
}
.choco-select { position: relative; }
.choco-select select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--choco-950);
  color: var(--cream);
  border: 2px solid rgba(226, 174, 120, .4);
  border-radius: 14px;
  padding: .75rem 2.8rem .75rem 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .25s, box-shadow .25s;
}
.choco-select select:hover { border-color: var(--caramel); }
.choco-select select:focus {
  outline: none;
  border-color: var(--caramel);
  box-shadow: 0 0 0 4px rgba(200, 131, 74, .25);
}
.choco-select select option { background: var(--choco-900); color: var(--cream); }
.choco-select i {
  position: absolute;
  right: 6px;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--caramel);
  color: var(--choco-950);
  pointer-events: none;
  animation: arrowNudge 1.8s ease-in-out infinite;
  transition: transform .3s var(--ease);
}
.choco-select select:focus + i { transform: rotate(180deg); animation: none; }
@keyframes arrowNudge {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 3px; }
}
.pm-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: .8rem 1rem;
  margin-bottom: 1.2rem;
  border-radius: 14px;
  background: rgba(226, 174, 120, .12);
  border: 1px dashed rgba(226, 174, 120, .4);
}
.pm-total span { font-weight: 700; color: var(--on-dark); }
.pm-total strong { font-family: var(--font-display); font-size: 1.8rem; color: var(--caramel-soft); }
.pm-img { min-height: 260px; }
@media (max-width: 575.98px) {
  .pm-choose { grid-template-columns: 1fr; }
  .pm-body { padding: 1.6rem 1.2rem; }
}

/* Hero scroll cue: bouncing down arrow */
.scroll-cue { border: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(226, 174, 120, .18); display: grid; place-items: center; }
.scroll-cue span { position: static; width: 12px; height: 12px; margin: -6px 0 0; border-radius: 0; background: none;
  border-right: 3px solid var(--caramel-soft); border-bottom: 3px solid var(--caramel-soft); transform: rotate(45deg); animation: arrowDown 1.6s ease-in-out infinite; }
@keyframes arrowDown {
  0%, 100% { translate: 0 -3px; opacity: .6; }
  50%      { translate: 0 5px; opacity: 1; }
}

/* 16d. Journey section: the bean-to-bar film, synced with the step cards --- */
.journey-film {
  display: grid;
  grid-template-columns: minmax(0, 400px) 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 980px;
  margin: 0 auto 3rem;
  padding: 1.6rem 2rem;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 25% 50%, rgba(200, 131, 74, .22), transparent 55%),
    rgba(255, 255, 255, .04);
  border: 1px solid rgba(226, 174, 120, .22);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.journey-stage { max-width: 400px; margin: 0; }
.journey-film-info { text-align: left; }
.journey-film-caption {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 92px;
}
.journey-film-caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--cream);
  margin-bottom: .2rem;
}
.journey-film-caption small { color: rgba(251, 244, 234, .75); font-size: 1rem; line-height: 1.5; display: block; }
.journey-film-caption .pl-step { font-size: 2.8rem; }
.journey-film-bar { display: flex; gap: 6px; margin: 1.3rem 0 1.1rem; }
.journey-film-bar span {
  flex: 1;
  height: 5px;
  border-radius: 5px;
  background: rgba(251, 244, 234, .16);
  overflow: hidden;
}
.journey-film-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--caramel), var(--caramel-soft)); }
.journey-film-bar .is-done i { width: 100%; }
.journey-film-bar .is-active i { animation: segFill var(--j-ms, 2600ms) linear forwards; }
.journey-film.is-paused .journey-film-bar .is-active i { animation-play-state: paused; }
@keyframes segFill { from { width: 0; } to { width: 100%; } }
.journey-play {
  border: 1px solid rgba(251, 244, 234, .3);
  background: rgba(251, 244, 234, .06);
  color: var(--cream);
  font-size: .85rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .4rem 1rem;
  transition: background .25s, color .25s;
}
.journey-play:hover,
.journey-play:focus-visible { background: var(--caramel); color: var(--choco-950); }

/* Step cards light up in sync with the film; click a card to jump to it */
.journey-step { cursor: pointer; }
.journey-step.in-view { transition-delay: 0s; }
.journey-step.is-active,
.js .journey-step.reveal.in-view.is-active {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, .1);
  border-color: rgba(226, 174, 120, .7);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .45);
}
.journey-step.is-active .step-icon { animation: stepIconPop .6s var(--ease); background: var(--caramel-soft); }
@keyframes stepIconPop {
  0%   { transform: scale(.6) rotate(-20deg); }
  60%  { transform: scale(1.18) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}
@media (max-width: 767.98px) {
  .journey-film { grid-template-columns: 1fr; padding: 1.2rem; gap: .5rem; }
  .journey-stage { margin: 0 auto; }
  .journey-film-info { text-align: center; }
  .journey-film-caption { justify-content: center; text-align: left; }
  .journey-film-caption strong { font-size: 1.3rem; }
}

/* 17. Responsive tweaks --------------------------------------------------- */
/* Desktop navbar: compact links so all items fit on one line */
@media (min-width: 1200px) {
  .site-nav .nav-link { padding: .5rem .6rem !important; font-size: .95rem; }
  .site-nav .nav-link::after { left: .6rem; right: .6rem; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .nav-logo { height: 50px; }
  .site-nav .btn { padding: .6rem 1.1rem; font-size: .92rem; }
}

@media (max-width: 1199.98px) {
  .journey-steps { grid-template-columns: repeat(3, 1fr); }
  .journey-steps::before { display: none; }
  .xmas-items { grid-template-columns: repeat(3, 1fr); }

  /* Mobile menu panel (navbar collapses below 1200px) */
  .nav-logo { height: 50px; }
  .site-nav.scrolled .nav-logo { height: 44px; }
  .site-nav .navbar-collapse {
    background: var(--choco-900);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-top: .8rem;
    padding: 1rem 1.2rem 1.4rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
  .site-nav .nav-link { padding: .7rem .4rem !important; border-bottom: 1px solid var(--line); }
  .site-nav .nav-link::after { display: none; }
  .site-nav .nav-link.active { color: var(--caramel-soft); }
  .site-nav .btn { width: 100%; }
}

@media (max-width: 991.98px) {
  :root { --nav-h: 72px; }
  .section { padding: 84px 0; }

  .hero { padding-top: calc(var(--nav-h) + 30px); }
  .hero-visual { max-width: 420px; }
  .story-visual { margin-bottom: 1rem; }
}

@media (max-width: 767.98px) {
  .journey-steps { grid-template-columns: repeat(2, 1fr); }
  .journey-step:last-child { grid-column: 1 / -1; max-width: 340px; justify-self: center; width: 100%; }
  .testimonial-carousel { padding: 0 0 70px; }
  .t-control { top: auto; bottom: 0; }
  .carousel-control-prev.t-control { left: calc(50% - 110px); }
  .carousel-control-next.t-control { right: calc(50% - 110px); }
  .testimonial-carousel .carousel-indicators { bottom: 16px; }
  .testimonial { padding: 2.6rem 1.4rem 2rem; }
}

@media (max-width: 575.98px) {
  body { font-size: 1rem; }
  .section { padding: 70px 0; }
  .hero-mascot-badge { left: 0; }
  .hero-tag { right: 0; font-size: .8rem; padding: .6rem .8rem; }
  .fb-1 { left: 0; }
  .fp-3 { right: 0; }
  .journey-steps { grid-template-columns: 1fr; }
  .journey-step:last-child { max-width: none; }
  .story-stamp { width: 96px; height: 96px; top: -18px; }
  .story-stamp text { font-size: 9px; letter-spacing: 1.6px; }
  .xmas-items { grid-template-columns: repeat(2, 1fr); }
  .hamper-card { padding: 1.6rem 1.2rem 1.4rem; }
  .hamper-head h3 { font-size: 1.45rem; }
  .wa-float { left: 16px; bottom: 16px; width: 50px; height: 50px; font-size: 1.45rem; }
  .product-foot { flex-wrap: wrap; }
  .footer-logo img { height: 72px; }
  .back-to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
  .contact-mascot { width: 150px; }
}

/* Scroll performance: decorative animations in sections that are off screen
   (JS adds .is-offscreen) are paused, so the browser
   only animates what you can actually see. */
.is-offscreen::before,
.is-offscreen::after,
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after {
  animation-play-state: paused !important;
}

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

/* 19. Compact layout: shorter sections everywhere -------------------------- */
.section { padding: 64px 0; }
.section-head { margin-bottom: 2rem; }
.section-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: .6rem; }
.eyebrow { margin-bottom: .7rem; }

/* Hero */
.hero { min-height: 82vh; min-height: 82svh; padding: calc(var(--nav-h) + 20px) 0 60px; }
.hero-title { font-size: clamp(2.3rem, 5vw, 4rem); margin-bottom: 1rem; }
.hero-lead { margin-bottom: 1.5rem; }
.hero-points { margin-top: 1.5rem; }
.hero-visual { max-width: 460px; }
.hero-splash { height: 50px; }

/* Products */
.filter-bar { margin-bottom: 1.8rem; }
.product-img { aspect-ratio: 16 / 10; }
.product-body { padding: 1.1rem 1.3rem 1.2rem; }
.product-name { font-size: 1.25rem; margin: .2rem 0 .4rem; }
.product-desc { font-size: .93rem; margin-bottom: .6rem; }
.product-foot { padding-top: .8rem; }
.price-note { margin-top: 1.6rem; }

/* Christmas */
.hamper-card { padding: 1.5rem 1.5rem 1.4rem; }
.hamper-head { padding-bottom: .8rem; margin-bottom: .8rem; }
.hamper-list { margin-bottom: 1.1rem; }
.hamper-list li { padding: .3rem 0; }
.xmas-strip { margin-top: 2.2rem; }
.xmas-strip-title { margin-bottom: 1rem; }
.xmas-item img { aspect-ratio: 16 / 10; }
.xmas-quote { margin-bottom: .8rem; }

/* Price list */
.menu-card { padding: 1.2rem 1.2rem; }
.menu-title { margin-bottom: .6rem; }
.menu-list li { padding: .35rem 0; }
.menu-card .menu-list { margin-bottom: .9rem; }
.menu-card--cta img { width: 80px; }

/* Story */
.story-visual { padding: 0 10% 10% 0; max-width: 520px; margin: 0 auto; }
.story-img-main { aspect-ratio: 5 / 4.4; }
.story-lead { font-size: 1.2rem; margin: .8rem 0 1rem; }
.story-facts { margin-bottom: 1.4rem; gap: .5rem; }

/* Journey */
.journey-film { padding: 1.1rem 1.6rem; margin-bottom: 2rem; gap: 1.4rem; }
.journey-stage { max-width: 320px; }
.journey-film-caption { min-height: 72px; }
.journey-film-bar { margin: .9rem 0 .8rem; }
.step-img { aspect-ratio: 16 / 11; }
.journey-step { padding: .8rem .8rem 1.2rem; }

/* Why / features */
.feature-card { padding: 1.4rem 1.2rem; }
.feature-icon { width: 60px; height: 60px; font-size: 1.5rem; margin-bottom: .9rem; border-radius: 18px; }

/* Contact */
.contact-info { margin: 1.1rem 0; }
.ci-item { margin-bottom: .6rem; }
.contact-mascot { width: 130px; margin-top: 1.2rem; }
.contact-card { padding: clamp(1.2rem, 3vw, 1.8rem); }
.contact-card .form-control { padding: .6rem .9rem; }
.contact-card textarea.form-control { min-height: 110px; }
.form-note { margin-top: .8rem; }

/* Footer */
.site-footer { padding: 80px 0 24px; }
.footer-wave { height: 50px; }
.footer-logo img { height: 72px; }
.footer-bottom { margin-top: 2rem; padding-top: 1.2rem; }

@media (max-width: 991.98px) {
  .section { padding: 52px 0; }
  .hero { min-height: auto; padding: calc(var(--nav-h) + 20px) 0 56px; }
  .hero-visual { max-width: 340px; }
}
@media (max-width: 575.98px) {
  .section { padding: 44px 0; }
  .section-head { margin-bottom: 1.5rem; }
  .hero-visual { max-width: 280px; }
  .story-visual { padding: 0 8% 8% 0; }
}

/* 20. Hero bottom edge: smooth melted milk-chocolate wave (replaces the circle drips) */
.hero-splash {
  height: 90px;
  opacity: 1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 46 C160 18 320 70 520 50 C720 30 860 64 1060 46 C1240 30 1340 44 1440 34 L1440 90 L0 90 Z' fill='%238a5636' fill-opacity='.35'/%3E%3Cpath d='M0 62 C200 36 380 84 620 62 C840 42 1000 80 1220 60 C1320 51 1390 56 1440 52 L1440 90 L0 90 Z' fill='%238a5636'/%3E%3Cpath d='M0 62 C200 36 380 84 620 62 C840 42 1000 80 1220 60 C1320 51 1390 56 1440 52' fill='none' stroke='%23f3c99c' stroke-opacity='.35' stroke-width='2'/%3E%3C/svg%3E")
    bottom center / 100% 100% no-repeat;
  pointer-events: none;
}
.scroll-cue { bottom: 64px; z-index: 3; }
@media (max-width: 575.98px) {
  .hero-splash { height: 56px; }
  .scroll-cue { bottom: 40px; }
}

/* 21. Product card photos: fill the whole image area neatly ---------------- */
.product-img.img-wrap,
.product-img--real.img-wrap { background: #efe6d8; }
.product-img img,
.product-img--real img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Soft shading at the bottom so the photo blends into the card */
.product-img::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(30, 16, 10, .35));
  pointer-events: none;
  z-index: 1;
}
.product-img .product-badge { z-index: 2; }
.product-card { overflow: hidden; }
.product-img { border-radius: var(--radius) var(--radius) 0 0; }

/* Modal photo: keep the full product visible on a cream backdrop */
.pm-img.img-wrap.pm-img--real { background: #efe6d8; }
.pm-img--real img { object-fit: contain; padding: 16px; }

/* 22. Our Chocolates: 2 rows x 5 columns on large screens ------------------ */
@media (min-width: 1200px) {
  #productGrid { --bs-gutter-x: 1.1rem; --bs-gutter-y: 1.1rem; }
  #productGrid > .product-item { width: 20%; }

  #productGrid .product-img { aspect-ratio: 1 / 1; }
  #productGrid .product-body { padding: .9rem 1rem 1rem; }
  #productGrid .product-cat { font-size: .68rem; letter-spacing: .1em; }
  #productGrid .product-name { font-size: 1.05rem; line-height: 1.25; }
  #productGrid .product-weight { font-size: .66rem; padding: .1rem .5rem; }
  #productGrid .product-desc {
    font-size: .82rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #productGrid .product-badge { font-size: .65rem; padding: .25rem .6rem; top: 10px; left: 10px; }

  /* Price on top, full-width "Choose" button below */
  #productGrid .product-foot { flex-direction: column; align-items: stretch; gap: .6rem; }
  #productGrid .product-price { font-size: 1.25rem; }
  #productGrid .product-foot .btn { width: 100%; }

  /* Bulk-orders card */
  #productGrid .bulk-card { padding: 1.2rem 1rem; }
  #productGrid .bulk-card h3 { font-size: 1.15rem; }
  #productGrid .bulk-card p { font-size: .82rem; margin-bottom: 1rem; }
  #productGrid .bulk-mascot { width: 96px; }
}

/* 23. Our Story: single photo (small lollipop photo removed) */
.story-visual { padding: 0 0 0 0; }
.story-img-main { aspect-ratio: 5 / 4; }

/* 24. Contact form redesign ------------------------------------------------- */
.cf-card {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid rgba(226, 174, 120, .3);
  background:
    radial-gradient(circle at 100% 0, rgba(200, 131, 74, .18), transparent 45%),
    linear-gradient(180deg, #3a2219, #2a160f);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.cf-card > .row,
.cf-card > .form-success,
.cf-card > .form-note { margin-left: 1.6rem; margin-right: 1.6rem; }
.cf-card > .row { padding-top: 1.4rem; --bs-gutter-x: 1rem; }
.cf-card > .form-note { margin-bottom: 1.4rem; }

/* Header strip */
.cf-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.6rem;
  background: linear-gradient(90deg, var(--milk-1, #8a5636), var(--choco-700));
  border-bottom: 1px solid rgba(226, 174, 120, .3);
}
.cf-mascot {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 50%;
  background: var(--white);
  padding: 5px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
  animation: bob 4s ease-in-out infinite;
  flex-shrink: 0;
}
.cf-title { font-size: 1.4rem; margin: 0 0 .15rem; color: var(--cream); }
.cf-sub { margin: 0; font-size: .88rem; color: rgba(251, 244, 234, .85); }
.cf-sub i { color: #7fe3a0; }

/* Labels */
.cf-card .form-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--caramel-soft);
  margin-bottom: .4rem;
}
.cf-count { letter-spacing: 0; text-transform: none; font-weight: 500; color: rgba(251, 244, 234, .5); }

/* Inputs with icons */
.cf-input { position: relative; }
.cf-input > i {
  position: absolute;
  left: 14px;
  top: 24px;
  transform: translateY(-50%);
  color: var(--caramel);
  font-size: 1.05rem;
  pointer-events: none;
  transition: color .25s, transform .25s;
  z-index: 2;
}
.cf-input--area > i { top: 22px; }
.cf-card .form-control {
  height: 48px;
  padding: .6rem 1rem .6rem 2.7rem;
  border-radius: 14px;
  border: 1.5px solid rgba(226, 174, 120, .2);
  background: rgba(20, 10, 6, .55);
  color: var(--cream);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.cf-card textarea.form-control { height: auto; min-height: 120px; resize: vertical; padding-top: .8rem; }
.cf-card .form-control:hover { border-color: rgba(226, 174, 120, .45); }
.cf-card .form-control:focus {
  background: rgba(20, 10, 6, .8);
  border-color: var(--caramel);
  box-shadow: 0 0 0 4px rgba(200, 131, 74, .2), 0 0 24px rgba(200, 131, 74, .15);
  color: var(--cream);
}
.cf-input:focus-within > i { color: var(--caramel-soft); transform: translateY(-50%) scale(1.12); }
.cf-card .form-control.is-valid { border-color: rgba(127, 208, 138, .6); background-image: none; }
.cf-card .form-control.is-invalid { border-color: #e26a6a; background-image: none; }

/* Quick-subject chips */
.cf-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .6rem; }
.cf-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid rgba(226, 174, 120, .35);
  background: rgba(226, 174, 120, .08);
  color: var(--cream);
  font-size: .82rem;
  font-weight: 600;
  border-radius: 999px;
  padding: .35rem .85rem;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.cf-chip i { color: var(--caramel-soft); transition: color .25s; }
.cf-chip:hover { transform: translateY(-2px); border-color: var(--caramel); }
.cf-chip.is-active { background: var(--caramel); border-color: var(--caramel); color: var(--choco-950); }
.cf-chip.is-active i { color: var(--choco-950); }

/* Send button */
.cf-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: 0;
  color: var(--choco-950);
  font-weight: 800;
  background: linear-gradient(135deg, #f0c290, var(--caramel) 55%, #a9652f);
  box-shadow: 0 12px 28px rgba(200, 131, 74, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.cf-send:hover,
.cf-send:focus-visible {
  color: var(--choco-950);
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(200, 131, 74, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.cf-send .bi-whatsapp { font-size: 1.2rem; }
.cf-send-arrow { transition: transform .3s var(--ease); }
.cf-send:hover .cf-send-arrow { transform: translateX(5px); }

.cf-card .form-note { font-size: .8rem; text-align: center; color: rgba(251, 244, 234, .55); }
.cf-card .form-note i { color: #7fd08a; }

@media (max-width: 575.98px) {
  .cf-card > .row,
  .cf-card > .form-success,
  .cf-card > .form-note { margin-left: 1rem; margin-right: 1rem; }
  .cf-head { padding: .9rem 1rem; }
  .cf-mascot { width: 52px; height: 52px; }
  .cf-title { font-size: 1.2rem; }
}

/* 25. Contact form header (refined) */
.cf-head {
  padding: 1.2rem 1.6rem;
  gap: 1.1rem;
  background:
    radial-gradient(circle at 0 50%, rgba(255, 220, 180, .18), transparent 40%),
    linear-gradient(120deg, #8a5636 0%, #6b3f27 55%, #4e2c1d 100%);
  position: relative;
}
.cf-head::after {           /* thin caramel line under the header */
  content: "";
  position: absolute;
  left: 1.6rem;
  right: 1.6rem;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--caramel-soft), transparent);
}
.cf-mascot { width: 72px; height: 72px; border: 3px solid var(--caramel-soft); }
.cf-kicker {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #ffe7cc;
  background: rgba(30, 16, 10, .35);
  border-radius: 999px;
  padding: .15rem .65rem;
  margin-bottom: .3rem;
}
.cf-title {
  font-size: 1.55rem;
  margin: 0 0 .55rem;
  background: linear-gradient(90deg, #fff4e6, var(--caramel-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cf-phones { display: flex; flex-wrap: wrap; gap: .5rem; }
.cf-phone {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--cream);
  text-decoration: none;
  background: rgba(30, 16, 10, .4);
  border: 1px solid rgba(255, 231, 204, .25);
  border-radius: 999px;
  padding: .3rem .8rem;
  transition: background .25s, transform .25s, border-color .25s;
}
.cf-phone i { color: #4ade80; font-size: 1rem; }
.cf-phone:hover,
.cf-phone:focus-visible {
  color: var(--white);
  background: #1faa53;
  border-color: #1faa53;
  transform: translateY(-2px);
}
.cf-phone:hover i { color: var(--white); }
@media (max-width: 575.98px) {
  .cf-mascot { width: 56px; height: 56px; }
  .cf-title { font-size: 1.25rem; }
}

/* 26. Footer copyright centred */
.footer-bottom { justify-content: center; text-align: center; }
.footer-bottom p { width: 100%; text-align: center; }

/* 27. Christmas section: festive redesign ---------------------------------- */
.section.christmas {
  padding-top: 90px;
  background:
    radial-gradient(ellipse at 50% 0, rgba(184, 67, 74, .35), transparent 55%),
    radial-gradient(circle at 8% 80%, rgba(46, 107, 62, .3), transparent 40%),
    radial-gradient(circle at 92% 75%, rgba(46, 107, 62, .25), transparent 40%),
    linear-gradient(180deg, #2a1410, var(--choco-950));
}

/* Twinkling string lights along the top */
.xmas-lights {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 46px;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
  background:
    radial-gradient(120% 60px at 50% -20px, transparent 58%, rgba(251, 244, 234, .25) 59%, transparent 61%) 0 0 / 10% 46px repeat-x;
}
.xmas-lights span {
  position: relative;
  top: 18px;
  width: 10px;
  height: 16px;
  border-radius: 50% 50% 45% 45%;
  background: #ffd36b;
  box-shadow: 0 0 12px 3px rgba(255, 211, 107, .7);
  animation: twinkle 1.6s ease-in-out infinite;
}
.xmas-lights span::before {         /* little socket */
  content: "";
  position: absolute;
  top: -5px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: #3b2016;
}
.xmas-lights span:nth-child(4n+1) { background: #ff5a5f; box-shadow: 0 0 12px 3px rgba(255, 90, 95, .7); animation-delay: -.2s; }
.xmas-lights span:nth-child(4n+2) { background: #4ade80; box-shadow: 0 0 12px 3px rgba(74, 222, 128, .7); animation-delay: -.6s; }
.xmas-lights span:nth-child(4n+3) { background: #ffd36b; animation-delay: -1s; }
.xmas-lights span:nth-child(4n)   { background: #f6d7b0; box-shadow: 0 0 12px 3px rgba(246, 215, 176, .7); animation-delay: -1.3s; }
.xmas-lights span:nth-child(even) { top: 26px; }
@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* Hanging baubles that gently swing */
.xmas-baubles { position: absolute; inset: 0; pointer-events: none; }
.bauble {
  position: absolute;
  top: 0;
  width: 2px;
  background: rgba(226, 174, 120, .6);
  transform-origin: top center;
  animation: swing 4s ease-in-out infinite;
}
.bauble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -30px;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff 0 8%, var(--b, #b8434a) 30%, color-mix(in srgb, var(--b, #b8434a) 60%, #000) 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .4);
}
.bauble::before {                    /* cap */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 12px;
  height: 7px;
  margin-left: -6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #a8783f, #f6d7b0, #a8783f);
  z-index: 1;
}
.bl-1 { left: 5%;  height: 110px; --b: #b8434a; }
.bl-2 { left: 12%; height: 70px;  --b: #c8834a; animation-delay: -1.2s; }
.bl-3 { right: 12%; height: 80px; --b: #2e6b3e; animation-delay: -2s; }
.bl-4 { right: 5%; height: 125px; --b: #b8434a; animation-delay: -.6s; }
@keyframes swing {
  0%, 100% { transform: rotate(5deg); }
  50%      { transform: rotate(-5deg); }
}

/* Heading */
.xmas-script {
  font-family: "Great Vibes", "Fraunces", cursive;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1;
  margin: .2rem 0 .1rem;
  background: linear-gradient(90deg, #ff8a8f, #f6d7b0 50%, #7fe3a0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(255, 138, 143, .15);
}
.christmas .section-title em { color: #f6d7b0; }
.xmas-quote-card {
  position: relative;
  display: inline-block;
  max-width: 560px;
  margin: .4rem auto 1.1rem;
  padding: .9rem 1.4rem .9rem 3rem;
  border-radius: 16px;
  background: rgba(251, 244, 234, .06);
  border: 1px solid rgba(246, 215, 176, .22);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--cream);
  text-align: left;
}
.xmas-quote-card i {
  position: absolute;
  left: .8rem;
  top: .2rem;
  font-size: 2rem;
  color: #ff8a8f;
}

/* Hamper gift cards */
.gift-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(180deg, #fbf4ea, #f1e3cf);
  color: var(--text);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.gift-card:hover { transform: translateY(-10px) rotate(-.4deg); box-shadow: 0 34px 80px rgba(0, 0, 0, .6); }
.gift-card--jumbo { background: linear-gradient(180deg, #fff8ee, #ecdcc4); }
.gift-ribbon {                       /* vertical ribbon over the photo */
  position: absolute;
  top: 0;
  left: 50%;
  width: 26px;
  height: 200px;
  margin-left: -13px;
  background: linear-gradient(90deg, #8f2d33, #c94a52 50%, #8f2d33);
  z-index: 2;
  box-shadow: 0 0 10px rgba(0, 0, 0, .25);
}
.gift-card--jumbo .gift-ribbon { background: linear-gradient(90deg, #1f4d2c, #3c8a52 50%, #1f4d2c); }
.gift-bow {
  position: absolute;
  top: 176px;
  left: 50%;
  width: 52px;
  height: 52px;
  margin-left: -26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  color: var(--white);
  background: radial-gradient(circle at 35% 30%, #e0646b, #8f2d33);
  border: 3px solid #fbf4ea;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  z-index: 3;
  transition: transform .5s var(--ease);
}
.gift-card--jumbo .gift-bow { background: radial-gradient(circle at 35% 30%, #5cb874, #1f4d2c); }
.gift-card:hover .gift-bow { transform: rotate(-12deg) scale(1.08); }

/* Hanging price tag */
.gift-tag {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 4;
  padding: .5rem .9rem .45rem;
  border-radius: 10px 10px 10px 10px;
  background: var(--choco-900);
  color: #f6d7b0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  text-align: center;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .4);
  transform-origin: top center;
  animation: tagSwing 3.5s ease-in-out infinite;
}
.gift-tag small {
  display: block;
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(251, 244, 234, .7);
  margin-bottom: .2rem;
}
.gift-tag::before {                  /* string hole */
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: #fbf4ea;
  border: 2px solid var(--choco-900);
}
@keyframes tagSwing {
  0%, 100% { transform: rotate(4deg); }
  50%      { transform: rotate(-4deg); }
}

/* Photo collage of what's inside */
.gift-collage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 3px;
  height: 203px;
  background: #e9dcc8;
}
.gift-collage img,
.gift-tile {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gift-collage--5 { grid-template-columns: repeat(3, 1fr); }
.gift-collage--5 img:first-child { grid-row: span 2; }
.gift-tile {
  display: grid;
  place-content: center;
  gap: .2rem;
  text-align: center;
  font-weight: 700;
  font-size: .85rem;
  color: var(--cream);
  background: linear-gradient(135deg, var(--choco-500), var(--choco-800));
}
.gift-tile i { font-size: 1.6rem; color: #f6d7b0; }

.gift-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 2.1rem 1.6rem 1.5rem;
  text-align: center;
}
.gift-body h3 {
  color: var(--choco-900);
  font-size: 1.7rem;
  margin: 0 0 .3rem;
}
.gift-count {
  display: inline-block;
  align-self: center;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8f2d33;
  background: rgba(184, 67, 74, .1);
  border-radius: 999px;
  padding: .2rem .75rem;
  margin-bottom: 1rem;
}
.gift-card--jumbo .gift-count { color: #1f4d2c; background: rgba(46, 107, 62, .12); }
.gift-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.3rem;
  flex: 1;
  text-align: left;
}
.gift-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .6rem;
  padding: .45rem 0;
  border-bottom: 1px dashed rgba(123, 74, 45, .25);
  font-weight: 600;
  color: var(--choco-800);
}
.gift-list li:last-child { border-bottom: 0; }
.gift-list i {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  font-size: .9rem;
  color: var(--white);
  background: linear-gradient(135deg, var(--caramel), var(--choco-500));
  flex-shrink: 0;
  align-self: center;
}
.gift-list small { color: var(--text-soft); font-style: italic; font-weight: 500; }
.gift-body .btn-caramel { background: linear-gradient(135deg, #e2ae78, var(--caramel)); color: var(--choco-950); }
.gift-card--jumbo .btn-caramel { background: linear-gradient(135deg, #f0c290, #b8733c); }

/* Christmas specials strip */
.xmas-strip { margin-top: 3rem; }
.xmas-strip-title { font-size: 1.5rem; }
.xmas-strip-title i { color: #4ade80; font-size: 1.1rem; margin: 0 .4rem; }
.xmas-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.xmas-card {
  position: relative;
  border-radius: 20px;
  padding: .7rem .7rem 1rem;
  background: linear-gradient(180deg, rgba(251, 244, 234, .1), rgba(251, 244, 234, .03));
  border: 1px solid rgba(246, 215, 176, .18);
  text-align: center;
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.xmas-card:hover {
  transform: translateY(-8px);
  border-color: rgba(246, 215, 176, .5);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.xmas-card-img {
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #efe6d8;
  margin-bottom: .7rem;
}
.xmas-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.xmas-card:hover .xmas-card-img img { transform: scale(1.08); }
.xmas-card h4 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--cream);
  margin: 0 0 .15rem;
}
.xmas-card p { font-size: .82rem; color: rgba(251, 244, 234, .7); margin: 0 0 .7rem; }
.xmas-card p strong { color: #f6d7b0; font-size: 1.05rem; }
.xmas-choose {
  border: 0;
  border-radius: 999px;
  padding: .35rem 1rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--choco-950);
  background: linear-gradient(135deg, #e2ae78, var(--caramel));
  transition: transform .25s, box-shadow .25s;
}
.xmas-choose:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(200, 131, 74, .35); }

@media (max-width: 1199.98px) {
  .xmas-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
  .xmas-baubles { display: none; }
  .gift-collage { grid-template-rows: repeat(2, 80px); height: 163px; }
  .gift-ribbon { height: 160px; }
  .gift-bow { top: 138px; }
}
@media (max-width: 575.98px) {
  .xmas-cards { grid-template-columns: repeat(2, 1fr); }
  .xmas-quote-card { font-size: 1rem; }
  .gift-tag { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .xmas-lights span, .bauble, .gift-tag { animation: none !important; }
}

/* 28. AI chat popup ---------------------------------------------------------- */
.ai-chat-dialog { max-width: 440px; }
.ai-chat {
  border: 1px solid rgba(226, 174, 120, .3);
  border-radius: 24px;
  overflow: hidden;
  background: var(--choco-900);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  height: min(640px, calc(100vh - 3.5rem));
}
.ai-chat-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1rem;
  background: linear-gradient(120deg, #8a5636, #4e2c1d);
  border-bottom: 3px solid #25d366;
}
.ai-avatar { position: relative; flex-shrink: 0; }
.ai-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  padding: 4px;
  border: 2px solid var(--caramel-soft);
}
.ai-status {
  position: absolute;
  right: 0;
  bottom: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #25d366;
  border: 2px solid #4e2c1d;
}
.ai-chat-who { flex: 1; min-width: 0; }
.ai-chat-who h2 {
  font-size: 1.15rem;
  margin: 0;
  color: var(--cream);
}
.ai-chat-who small { font-size: .78rem; color: rgba(251, 244, 234, .8); }
.ai-chat-who small i { color: #ffd36b; }

/* Messages */
.ai-chat-body {
  padding: 1rem .9rem;
  background:
    radial-gradient(rgba(226, 174, 120, .07) 1.2px, transparent 1.6px) 0 0 / 20px 20px,
    linear-gradient(180deg, #2a160f, #1e100a);
  scroll-behavior: smooth;
}
.ai-msg { display: flex; margin-bottom: .6rem; }
.ai-msg--user { justify-content: flex-end; }
.ai-bubble {
  max-width: 85%;
  padding: .6rem .85rem;
  border-radius: 16px;
  font-size: .9rem;
  line-height: 1.5;
  word-wrap: break-word;
  animation: aiIn .25s var(--ease) both;
}
.ai-msg--assistant .ai-bubble {
  background: #fbf4ea;
  color: #2b1710;
  border-top-left-radius: 4px;
}
.ai-msg--assistant .ai-bubble b { color: #7b4a2d; }
.ai-msg--user .ai-bubble {
  background: linear-gradient(135deg, #e2ae78, #c8834a);
  color: var(--choco-950);
  font-weight: 600;
  border-top-right-radius: 4px;
}
@keyframes aiIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ai-typing { display: inline-flex; gap: 4px; padding: .2rem 0; }
.ai-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a07858;
  animation: aiDot 1s infinite ease-in-out;
}
.ai-typing span:nth-child(2) { animation-delay: .15s; }
.ai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes aiDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Suggested questions */
.ai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .6rem .9rem;
  background: #1e100a;
  border-top: 1px solid rgba(226, 174, 120, .15);
}
.ai-suggestions[hidden] { display: none; }
.ai-chip {
  border: 1px solid rgba(226, 174, 120, .4);
  background: rgba(226, 174, 120, .08);
  color: var(--cream);
  font-size: .8rem;
  font-weight: 600;
  border-radius: 999px;
  padding: .35rem .8rem;
  transition: background .2s, color .2s, transform .2s;
}
.ai-chip:hover,
.ai-chip:focus-visible { background: var(--caramel); color: var(--choco-950); transform: translateY(-1px); }

/* Input + actions */
.ai-chat-foot {
  padding: .7rem .9rem .8rem;
  background: var(--choco-900);
  border-top: 1px solid rgba(226, 174, 120, .2);
}
.ai-chat-form { display: flex; gap: .5rem; }
.ai-chat-form input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid rgba(226, 174, 120, .3);
  border-radius: 999px;
  background: #1e100a;
  color: var(--cream);
  padding: .65rem 1rem;
  font-size: .92rem;
}
.ai-chat-form input::placeholder { color: rgba(251, 244, 234, .4); }
.ai-chat-form input:focus { outline: none; border-color: var(--caramel); box-shadow: 0 0 0 3px rgba(200, 131, 74, .2); }
.ai-chat-form button {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #e2ae78, var(--caramel));
  color: var(--choco-950);
  font-size: 1.05rem;
  transition: transform .2s;
}
.ai-chat-form button:hover:not(:disabled) { transform: scale(1.06); }
.ai-chat-form button:disabled,
.ai-chat-form input:disabled { opacity: .55; }
.ai-chat-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem .8rem;
  margin-top: .6rem;
}
.ai-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .9rem;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
  transition: background .2s;
}
.ai-wa-btn:hover { background: #128c4a; color: #fff; }
.ai-note { font-size: .7rem; color: rgba(251, 244, 234, .5); }

@media (max-width: 575.98px) {
  .ai-chat-dialog { margin: .5rem; }
  .ai-chat { height: calc(100vh - 1rem); border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-bubble { animation: none; }
}

/* 29. Floating AI chatbot button ------------------------------------------- */
.wa-float.ai-float {
  width: 62px;
  height: 62px;
  overflow: visible;
  background: radial-gradient(circle at 30% 25%, #f0c290, var(--caramel) 45%, var(--choco-700) 100%);
  color: var(--choco-950);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .35);
  animation: aiFloatBob 3.2s ease-in-out infinite;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.wa-float.ai-float:hover,
.wa-float.ai-float:focus-visible {
  color: var(--choco-950);
  transform: scale(1.1);
  box-shadow: 0 16px 36px rgba(200, 131, 74, .55), inset 0 2px 0 rgba(255, 255, 255, .35);
}

/* Robot icon: gentle "wave" every few seconds */
.ai-float-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  font-size: 1.75rem;
  line-height: 1;
  animation: aiWave 4s ease-in-out infinite;
  transform-origin: 50% 80%;
}

/* Pulsing rings */
.ai-float-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(226, 174, 120, .7);
  animation: aiRing 2.4s ease-out infinite;
  pointer-events: none;
}
.ai-float-ring--2 { animation-delay: 1.2s; }

/* Twinkling sparkle */
.ai-float-spark {
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: 3;
  font-size: .95rem;
  color: #ffd36b;
  filter: drop-shadow(0 0 4px rgba(255, 211, 107, .8));
  animation: aiSpark 2s ease-in-out infinite;
}

/* "AI" badge */
.ai-float-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  z-index: 3;
  padding: .1rem .4rem;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .05em;
  border: 2px solid var(--choco-950);
  animation: aiBadge 2.4s ease-in-out infinite;
}

/* Hover label */
.ai-float-label {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  white-space: nowrap;
  padding: .4rem .85rem;
  border-radius: 999px;
  background: var(--choco-900);
  color: var(--cream);
  font-size: .82rem;
  font-weight: 700;
  border: 1px solid rgba(226, 174, 120, .4);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translate(-8px, -50%);
  transition: opacity .25s, transform .25s var(--ease);
  pointer-events: none;
}
.wa-float.ai-float:hover .ai-float-label,
.wa-float.ai-float:focus-visible .ai-float-label { opacity: 1; transform: translate(0, -50%); }

@keyframes aiFloatBob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}
@keyframes aiWave {
  0%, 70%, 100% { transform: rotate(0); }
  75% { transform: rotate(-14deg); }
  80% { transform: rotate(12deg); }
  85% { transform: rotate(-8deg); }
  90% { transform: rotate(5deg); }
}
@keyframes aiRing {
  0%   { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes aiSpark {
  0%, 100% { transform: scale(.6) rotate(0); opacity: .4; }
  50%      { transform: scale(1.15) rotate(20deg); opacity: 1; }
}
@keyframes aiBadge {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

@media (max-width: 575.98px) {
  .wa-float.ai-float { width: 54px; height: 54px; }
  .ai-float-icon { font-size: 1.5rem; }
  .ai-float-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float.ai-float, .ai-float-icon, .ai-float-ring, .ai-float-spark, .ai-float-badge { animation: none !important; }
  .ai-float-ring { display: none; }
}

/* Footer wave matches the new contact section's bottom colour */
.footer-wave svg { fill: var(--choco-950); }

/* 30. Contact section: split layout with phone chat mockup ------------------ */
.section.ct {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 80% 40%, rgba(200, 131, 74, .22), transparent 55%),
    var(--cocoa-dots),
    linear-gradient(180deg, var(--choco-900), var(--choco-950));
}

/* Soft background orbs and floating cocoa beans */
.ct-bg { position: absolute; inset: 0; pointer-events: none; }
.ct-orb { position: absolute; border-radius: 50%; filter: blur(10px); }
.ct-orb--1 { width: 420px; height: 420px; right: -120px; top: -80px; background: radial-gradient(circle, rgba(37, 211, 102, .14), transparent 65%); }
.ct-orb--2 { width: 360px; height: 360px; left: -140px; bottom: -120px; background: radial-gradient(circle, rgba(226, 174, 120, .18), transparent 65%); }
.ct-bean {
  position: absolute;
  width: 26px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 30%, #9a5d38, var(--choco-700) 70%);
  opacity: .5;
  animation: float 8s ease-in-out infinite;
}
.ct-bean::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 14%;
  bottom: 14%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, .3);
}
.ct-bean--1 { left: 6%; top: 14%; }
.ct-bean--2 { left: 46%; bottom: 10%; width: 20px; height: 30px; animation-delay: -3s; }
.ct-bean--3 { right: 4%; top: 58%; animation-delay: -5s; }

/* Left column */
.ct-lead { font-size: 1.1rem; color: rgba(251, 244, 234, .8); margin-bottom: 1.6rem; max-width: 30rem; }
.ct-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  position: relative;
}
.ct-steps::before {                   /* vertical timeline line */
  content: "";
  position: absolute;
  left: 23px;
  top: 24px;
  bottom: 24px;
  border-left: 2px dashed rgba(226, 174, 120, .4);
}
.ct-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .55rem 0;
}
.ct-step-icon {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  color: var(--choco-950);
  background: linear-gradient(135deg, #f0c290, var(--caramel));
  box-shadow: 0 0 0 5px rgba(226, 174, 120, .15);
}
.ct-steps li:nth-child(2) .ct-step-icon { background: linear-gradient(135deg, #2ee27a, #1faa53); color: #fff; box-shadow: 0 0 0 5px rgba(37, 211, 102, .15); }
.ct-steps li:nth-child(3) .ct-step-icon { background: linear-gradient(135deg, #ff9aa0, #d9545c); color: #fff; box-shadow: 0 0 0 5px rgba(255, 138, 143, .15); }
.ct-steps strong { display: block; color: var(--cream); font-size: 1.05rem; }
.ct-steps small { color: rgba(251, 244, 234, .65); font-size: .88rem; }

.ct-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.ct-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1.6rem;
  border-radius: 999px;
  border: 0;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s;
}
.ct-btn i { font-size: 1.15rem; }
.ct-btn--wa { color: #fff; background: linear-gradient(135deg, #2ee27a, #1faa53); box-shadow: 0 12px 28px rgba(37, 211, 102, .35); }
.ct-btn--wa:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 18px 36px rgba(37, 211, 102, .45); }
.ct-btn--ai { color: var(--choco-950); background: linear-gradient(135deg, #f0c290, var(--caramel)); box-shadow: 0 12px 28px rgba(200, 131, 74, .35); }
.ct-btn--ai:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(200, 131, 74, .45); }

/* Right column: phone mockup */
.ct-stage {
  position: relative;
  max-width: 470px;
  margin: 0 auto;
  padding: 1.5rem 0;
}
.ct-phone {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 280px;
  height: 540px;
  margin: 0 auto;
  border-radius: 40px;
  padding: 12px;
  background: linear-gradient(145deg, #3b2016, #140a06);
  box-shadow: 0 0 0 2px rgba(226, 174, 120, .35), 0 40px 80px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .06);
  text-decoration: none;
  color: inherit;
  transform: rotate(-3deg);
  transition: transform .5s var(--ease);
  animation: phoneFloat 6s ease-in-out infinite;
}
.ct-phone:hover { transform: rotate(0) scale(1.02); color: inherit; }
@keyframes phoneFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}
.ct-phone-notch {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 90px;
  height: 22px;
  margin-left: -45px;
  border-radius: 999px;
  background: #0a0503;
  z-index: 3;
}
.ct-phone-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 2.4rem .8rem .7rem;
  border-radius: 30px 30px 0 0;
  background: linear-gradient(120deg, #075e54, #128c7e);
  color: #fff;
}
.ct-phone-head img { width: 34px; height: 34px; border-radius: 50%; background: #fff; padding: 2px; object-fit: contain; }
.ct-phone-head span { flex: 1; line-height: 1.15; }
.ct-phone-head b { display: block; font-size: .82rem; }
.ct-phone-head small { font-size: .68rem; opacity: .85; }
.ct-phone-head i { font-size: .9rem; }

.ct-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .8rem .6rem;
  overflow: hidden;
  background:
    radial-gradient(rgba(123, 74, 45, .08) 1.5px, transparent 2px) 0 0 / 16px 16px,
    #efe7dd;
}
.ct-day {
  align-self: center;
  font-size: .62rem;
  font-weight: 700;
  color: #54656f;
  background: #fff;
  border-radius: 6px;
  padding: .1rem .5rem;
  margin-bottom: .2rem;
}
.ct-msg {
  max-width: 82%;
  padding: .45rem .6rem;
  border-radius: 10px;
  font-size: .76rem;
  line-height: 1.4;
  color: #111b21;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}
.ct-msg--out { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 2px; }
.ct-msg--in { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.ct-msg b { color: #7b4a2d; }
.ct-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 3px;
  padding: .5rem .6rem;
  border-radius: 10px;
  background: #fff;
}
.ct-typing span { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; animation: aiDot 1s infinite ease-in-out; }
.ct-typing span:nth-child(2) { animation-delay: .15s; }
.ct-typing span:nth-child(3) { animation-delay: .3s; }

/* Chat plays out when the section scrolls into view */
.js .ct-stage .ct-msg,
.js .ct-stage .ct-typing { opacity: 0; transform: translateY(10px) scale(.96); }
.js .ct-stage.in-view .ct-msg,
.js .ct-stage.in-view .ct-typing { animation: ctMsgIn .5s var(--ease) forwards; animation-delay: calc(var(--d) * .9s + .5s); }
@keyframes ctMsgIn { to { opacity: 1; transform: none; } }

.ct-phone-input {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .7rem .7rem;
  border-radius: 0 0 30px 30px;
  background: #f0f2f5;
}
.ct-phone-input span {
  flex: 1;
  font-size: .72rem;
  color: #8696a0;
  background: #fff;
  border-radius: 999px;
  padding: .4rem .7rem;
}
.ct-phone-input i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .8rem;
  color: #fff;
  background: #25d366;
}

/* Floating contact pills around the phone */
.ct-pill {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
  background: rgba(43, 23, 16, .92);
  border: 1px solid rgba(226, 174, 120, .35);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .4);
  animation: float 6s ease-in-out infinite;
  transition: background .25s, color .25s, border-color .25s;
}
a.ct-pill:hover { color: #fff; background: #1faa53; border-color: #1faa53; }
.ct-pill i { font-size: 1rem; }
.ct-pill--1 i, .ct-pill--2 i { color: #4ade80; }
.ct-pill--3 i { color: var(--caramel-soft); }
.ct-pill--4 i { color: #ff8a8f; }
.ct-pill--5 i { color: #7fd0ff; }
a.ct-pill:hover i { color: #fff; }
.ct-pill--1 { top: 12%; left: -2%; }
.ct-pill--2 { top: 30%; right: -4%; animation-delay: -1.5s; }
.ct-pill--3 { top: 52%; left: -6%; animation-delay: -3s; }
.ct-pill--4 { bottom: 20%; right: -6%; animation-delay: -4s; }
.ct-pill--5 { bottom: 4%; left: 4%; animation-delay: -2s; }

@media (max-width: 575.98px) {
  .ct-phone { width: 250px; height: 490px; transform: none; }
  .ct-stage { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
  .ct-stage .ct-pill { position: static; animation: none; }
  .ct-stage .ct-phone { margin-bottom: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-phone, .ct-pill, .ct-bean { animation: none !important; }
}

/* 31. Footer redesign -------------------------------------------------------- */
.site-footer.ft {
  position: relative;
  overflow: hidden;
  padding: 90px 0 22px;
  background:
    radial-gradient(ellipse at 15% 0, rgba(200, 131, 74, .16), transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(37, 211, 102, .08), transparent 45%),
    var(--cocoa-dots),
    #140a06;
}
.ft-watermark {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 14vw, 12rem);
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(226, 174, 120, .08);
  pointer-events: none;
  user-select: none;
}

/* Brand column */
.site-footer.ft .footer-logo img { height: 78px; }
.site-footer.ft .footer-tagline { margin: 1rem 0 1rem; }
.ft-badges { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.ft-badges li {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(251, 244, 234, .85);
  background: rgba(226, 174, 120, .08);
  border: 1px solid rgba(226, 174, 120, .22);
  border-radius: 999px;
  padding: .3rem .7rem;
}
.ft-badges i { color: var(--caramel-soft); }

/* Link columns */
.site-footer.ft .footer-title { position: relative; padding-bottom: .6rem; margin-bottom: 1.1rem; }
.site-footer.ft .footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--caramel), transparent);
}
.ft-links { list-style: none; padding: 0; margin: 0; }
.ft-links li { margin-bottom: .55rem; }
.ft-links a,
.ft-link-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(251, 244, 234, .8);
  font-size: .98rem;
  text-decoration: none;
  transition: color .25s, transform .25s var(--ease);
}
.ft-links a::before,
.ft-link-btn::before {
  content: "";
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--caramel-soft);
  transition: width .25s var(--ease);
}
.ft-links a:hover,
.ft-link-btn:hover { color: var(--caramel-soft); transform: translateX(3px); }
.ft-links a:hover::before,
.ft-link-btn:hover::before { width: 12px; }

/* Contact tiles */
.ft-contacts { display: grid; gap: .6rem; }
.ft-contact {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .65rem .8rem;
  border-radius: 16px;
  text-decoration: none;
  color: var(--cream);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(226, 174, 120, .18);
  transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.ft-contact:hover { color: var(--cream); background: rgba(255, 255, 255, .08); border-color: rgba(226, 174, 120, .5); transform: translateX(4px); }
.ft-contact > span:nth-child(2) { flex: 1; line-height: 1.2; }
.ft-contact small { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(251, 244, 234, .55); }
.ft-contact b { font-size: 1.05rem; overflow-wrap: anywhere; }
.ft-contact-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
}
.ft-contact-icon--wa { color: #fff; background: #25d366; }
.ft-contact-icon--call { color: var(--choco-950); background: var(--caramel-soft); }
.ft-contact-icon--mail { color: var(--cream); background: var(--choco-500); }
.ft-contact-go { color: rgba(251, 244, 234, .4); transition: color .25s, transform .25s var(--ease); }
.ft-contact:hover .ft-contact-go { color: var(--caramel-soft); transform: translate(2px, -2px); }
.ft-bulk { margin: .9rem 0 0; font-size: .88rem; color: rgba(251, 244, 234, .75); }
.ft-bulk i { color: #ffd36b; margin-right: .3rem; }

.site-footer.ft .footer-bottom {
  margin-top: 2.6rem;
  border-top: 1px solid rgba(226, 174, 120, .15);
  color: rgba(251, 244, 234, .6);
}

@media (max-width: 767.98px) {
}
@media (prefers-reduced-motion: reduce) {
}

/* 32. Why choose BEAN to BAR: bento grid ------------------------------------ */
.why-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, minmax(220px, auto));
  gap: 1.1rem;
}
.wb {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: 1.5rem 1.4rem;
  color: var(--cream);
  background: linear-gradient(160deg, var(--choco-800), var(--choco-950));
  border: 1px solid rgba(226, 174, 120, .22);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
  transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.wb::before {                         /* soft corner glow that brightens on hover */
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -80px;
  top: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 174, 120, .22), transparent 70%);
  transition: transform .6s var(--ease), opacity .4s;
  opacity: .7;
  pointer-events: none;
}
.wb:hover,
.js .wb.reveal.in-view:hover {
  transform: translateY(-8px);
  border-color: rgba(226, 174, 120, .6);
  box-shadow: 0 28px 60px rgba(0, 0, 0, .5);
}
.wb:hover::before { transform: scale(1.4); opacity: 1; }
.wb h3 { color: var(--cream); font-size: 1.3rem; margin: 0 0 .35rem; position: relative; }
.wb p { color: rgba(251, 244, 234, .75); font-size: .93rem; margin: 0; position: relative; }

/* Big photo card */
.wb--hero {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: flex-end;
  padding: 0;
  min-height: 460px;
}
.wb-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 1.2s var(--ease);
}
.wb--hero:hover .wb-bg { transform: scale(1.12); }
.wb--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 16, 10, .05) 20%, rgba(30, 16, 10, .55) 55%, rgba(30, 16, 10, .95));
}
.wb-hero-content { position: relative; z-index: 2; padding: 1.8rem; }
.wb--hero h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.wb-icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  margin-bottom: .8rem;
  font-size: 1.4rem;
  color: var(--choco-950);
  background: linear-gradient(135deg, #f0c290, var(--caramel));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  position: relative;
}
.wb-chips { list-style: none; padding: 0; margin: .8rem 0 1.1rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.wb-chips li {
  font-size: .82rem;
  font-weight: 700;
  padding: .35rem .85rem;
  border-radius: 999px;
  color: var(--cream);
  background: rgba(43, 23, 16, .55);
  border: 1px solid rgba(251, 244, 234, .3);
  transition: background .25s, color .25s;
}
.wb-chips li:hover { background: var(--caramel); color: var(--choco-950); }
.wb-link { font-weight: 800; color: var(--caramel-soft); text-decoration: none; }
.wb-link i { display: inline-block; transition: transform .3s var(--ease); }
.wb-link:hover { color: #fff; }
.wb-link:hover i { transform: translateX(5px); }

/* Origin card with hills */
.wb--origin { background: linear-gradient(160deg, #6b3f27, #3b2016); }
.wb-hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 90px; }
.wb-pin {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin-bottom: .8rem;
  font-size: 1.4rem;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #ff9aa0, #c94a52);
  box-shadow: 0 0 0 0 rgba(255, 138, 143, .5);
  animation: pinPulse 2.4s ease-out infinite;
}
@keyframes pinPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 138, 143, .55); }
  100% { box-shadow: 0 0 0 18px rgba(255, 138, 143, 0); }
}

/* Flavour swatches */
.wb-swatches { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; position: relative; }
.wb-swatches li { display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; color: rgba(251, 244, 234, .85); }
.sw {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .25), inset -3px -3px 0 rgba(0, 0, 0, .2), 0 8px 18px rgba(0, 0, 0, .35);
  transition: transform .4s var(--ease);
}
.sw--milk  { background: linear-gradient(145deg, #a8714a, #7b4a2d); }
.sw--dark  { background: linear-gradient(145deg, #4e2c1d, #1e100a); }
.sw--white { background: linear-gradient(145deg, #fff6e6, #e9d8bd); }
.sw--mixed { background: linear-gradient(135deg, #fff6e6 0 33%, #a8714a 33% 66%, #2b1710 66%); }
.wb--flavours:hover .sw { transform: translateY(-6px) rotate(-6deg); }
.wb--flavours:hover li:nth-child(2) .sw { transition-delay: .05s; }
.wb--flavours:hover li:nth-child(3) .sw { transition-delay: .1s; }
.wb--flavours:hover li:nth-child(4) .sw { transition-delay: .15s; }

/* Quality stamp */
.wb--quality { display: flex; align-items: center; gap: 1.1rem; }
.wb-stamp {
  position: relative;
  flex-shrink: 0;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #e2ae78, #b8733c);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4), inset 0 0 0 4px rgba(255, 255, 255, .25);
}
.wb-stamp svg { position: absolute; inset: 0; animation: spin 16s linear infinite; }
.wb-stamp text { font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: 2px; fill: var(--choco-950); }
.wb-stamp i { font-size: 1.9rem; color: var(--choco-950); }

/* Bulk orders */
.wb--bulk { background: linear-gradient(160deg, #3b2016, #1e100a); }
.wb-icon--gift { background: linear-gradient(135deg, #ffd36b, #e2ae78); }
.wb-wa {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .9rem;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .88rem;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #2ee27a, #1faa53);
  box-shadow: 0 8px 20px rgba(37, 211, 102, .3);
  transition: transform .25s var(--ease);
}
.wb-wa:hover { color: #fff; transform: translateY(-2px); }

@media (max-width: 991.98px) {
  .why-bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
  .wb--hero { grid-column: 1 / -1; grid-row: auto; min-height: 380px; }
}
@media (max-width: 575.98px) {
  .why-bento { grid-template-columns: 1fr; }
  .wb--hero { min-height: 340px; }
  .wb--quality { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .wb-pin, .wb-stamp svg { animation: none; }
}

/* Keep the bento hover lift snappy after the scroll fade-in */
.js .wb.reveal.in-view { transition: opacity .9s var(--ease), transform .4s var(--ease), box-shadow .4s, border-color .4s; }

/* 34. Christmas section upgrade ---------------------------------------------- */
.section.christmas { padding-top: 96px; padding-bottom: 80px; }
.section.christmas .snowfall { display: none; }

/* Candy-cane borders */
.candy-stripe {
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  z-index: 2;
  background: repeating-linear-gradient(-45deg, #d9343c 0 14px, #fff7ee 14px 28px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.candy-stripe--top { top: 0; }
.candy-stripe--bottom { bottom: 0; }
.section.christmas .xmas-lights { top: 10px; }

/* Real snowflakes */
.xmas-snow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.xmas-snow span {
  position: absolute;
  top: -30px;
  left: var(--x);
  font-size: var(--s);
  color: rgba(255, 255, 255, .8);
  text-shadow: 0 0 8px rgba(255, 255, 255, .6);
  animation: snowFlake var(--t, 12s) linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes snowFlake {
  0%   { transform: translate(0, 0) rotate(0); opacity: 0; }
  10%  { opacity: .9; }
  50%  { transform: translate(28px, 50vh) rotate(180deg); }
  100% { transform: translate(-10px, 110vh) rotate(360deg); opacity: .2; }
}

/* Split header */
.xmas-hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 2.5rem;
  margin-bottom: 3.2rem;
}
.xmas-hero-text { text-align: left; }
.xmas-hero-text .xmas-quote-card { margin-left: 0; }

/* Wreath-framed photo */
.xmas-hero-visual {
  position: relative;
  width: min(380px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.xw-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px dashed rgba(255, 211, 107, .55);
  animation: spin 30s linear infinite;
}
.xw-ring::before {                    /* pine-green wreath glow */
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 14px solid #1f4d2c;
  box-shadow: 0 0 0 4px #2e6b3e, 0 0 40px rgba(74, 222, 128, .25), inset 0 0 20px rgba(0, 0, 0, .4);
}
.xw-photo {
  position: absolute;
  inset: 34px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.xw-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.xmas-hero-visual:hover .xw-photo img { transform: scale(1.08); }
.xw-star {
  position: absolute;
  top: -16px;
  left: 50%;
  z-index: 3;
  width: 52px;
  height: 52px;
  margin-left: -26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: #ffd36b;
  background: #2a1410;
  border: 2px solid rgba(255, 211, 107, .6);
  box-shadow: 0 0 24px rgba(255, 211, 107, .6);
  animation: starGlow 2.4s ease-in-out infinite;
}
@keyframes starGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 211, 107, .4); transform: scale(1); }
  50%      { box-shadow: 0 0 34px rgba(255, 211, 107, .9); transform: scale(1.08); }
}
.xw-orn {
  position: absolute;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff 0 8%, var(--o) 32%, color-mix(in srgb, var(--o) 55%, #000) 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .45);
  animation: bob 4s ease-in-out infinite;
}
.xw-orn--1 { --o: #d9343c; left: 4%; top: 22%; }
.xw-orn--2 { --o: #e2ae78; right: 2%; top: 40%; animation-delay: -1.3s; }
.xw-orn--3 { --o: #2e6b3e; left: 14%; bottom: 6%; animation-delay: -2.4s; }
.xw-holly {
  position: absolute;
  z-index: 3;
  right: 14%;
  top: 6%;
  font-size: 1.6rem;
  color: #4ade80;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
}
.xw-tag {
  position: absolute;
  z-index: 4;
  right: -6px;
  bottom: 12%;
  padding: .55rem .9rem;
  border-radius: 14px;
  background: var(--cream);
  color: #8f2d33;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  text-align: center;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .45);
  transform: rotate(6deg);
  transform-origin: top center;
  animation: tagSwing 3.5s ease-in-out infinite;
}
.xw-tag small {
  display: block;
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--choco-700);
  margin-bottom: .2rem;
}

@media (max-width: 991.98px) {
  .xmas-hero { grid-template-columns: 1fr; text-align: center; }
  .xmas-hero-text { text-align: center; }
  .xmas-hero-text .xmas-quote-card { margin-left: auto; }
  .xmas-hero-visual { width: min(320px, 90%); }
}
@media (max-width: 575.98px) {
}
@media (prefers-reduced-motion: reduce) {
  .xmas-snow, .xw-ring, .xw-star, .xw-orn, .xw-tag { animation: none !important; }
  .xmas-snow { display: none; }
}

/* 35. Christmas section: extra festive polish ------------------------------- */
.section.christmas {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 211, 107, .18), transparent 45%),
    radial-gradient(ellipse at 50% 0, rgba(184, 52, 60, .55), transparent 60%),
    radial-gradient(circle at 5% 85%, rgba(46, 107, 62, .35), transparent 40%),
    radial-gradient(circle at 95% 80%, rgba(46, 107, 62, .3), transparent 40%),
    linear-gradient(180deg, #3a1012 0%, #2a1410 40%, var(--choco-950) 100%);
}

/* Pine garland along the top */
.xmas-garland {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 40px;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(18px 14px at 50% 40%, #2e6b3e 60%, transparent 62%) 0 0 / 34px 30px repeat-x,
    radial-gradient(16px 12px at 50% 60%, #1f4d2c 60%, transparent 62%) 17px 6px / 34px 30px repeat-x,
    radial-gradient(12px 10px at 50% 50%, #3c8a52 60%, transparent 62%) 8px 12px / 34px 30px repeat-x;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
}
.section.christmas .xmas-lights { z-index: 2; top: 14px; }

/* Drifting gold glitter */
.xmas-glitter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background:
    radial-gradient(1.5px 1.5px at 10% 20%, #ffd36b, transparent),
    radial-gradient(1.5px 1.5px at 30% 70%, #fff, transparent),
    radial-gradient(2px 2px at 55% 35%, #ffd36b, transparent),
    radial-gradient(1.5px 1.5px at 75% 60%, #fff, transparent),
    radial-gradient(2px 2px at 90% 15%, #ffd36b, transparent),
    radial-gradient(1.5px 1.5px at 20% 90%, #ffd36b, transparent),
    radial-gradient(1.5px 1.5px at 65% 85%, #fff, transparent);
  background-size: 420px 420px;
  animation: glitterDrift 40s linear infinite, glitterTwinkle 3s ease-in-out infinite;
}
@keyframes glitterDrift { to { background-position: 420px 840px; } }
@keyframes glitterTwinkle { 50% { opacity: .25; } }

/* Big faint script watermark */
.xmas-watermark {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%) rotate(-6deg);
  font-family: "Great Vibes", var(--font-display), cursive;
  font-size: clamp(5rem, 16vw, 15rem);
  line-height: 1;
  white-space: nowrap;
  color: rgba(255, 211, 107, .05);
  pointer-events: none;
  user-select: none;
}

/* Hamper gift cards: glittering animated gold border + shimmer sweep */
.gift-card { isolation: isolate; }
.gift-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(from var(--gift-angle, 0deg), #ffd36b, #b8733c, #fff4d6, #d9343c, #ffd36b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: giftBorder 6s linear infinite;
  z-index: 6;
  pointer-events: none;
}
@property --gift-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes giftBorder { to { --gift-angle: 360deg; } }
.gift-collage { position: relative; overflow: hidden; }
.gift-collage::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.gift-card:hover .gift-collage::after { animation: shimmerSweep 1s var(--ease); }
@keyframes shimmerSweep { to { left: 130%; } }

/* Christmas spl cards hang like ornaments */
.xmas-cards { padding-top: 46px; }
.xmas-card {
  transform-origin: 50% -46px;
  animation: ornamentSway 5s ease-in-out infinite;
}
.xmas-card:nth-child(2) { animation-delay: -1s; }
.xmas-card:nth-child(3) { animation-delay: -2s; }
.xmas-card:nth-child(4) { animation-delay: -3s; }
.xmas-card:nth-child(5) { animation-delay: -4s; }
.xmas-card:hover { animation-play-state: paused; }
@keyframes ornamentSway {
  0%, 100% { rotate: 1.5deg; }
  50%      { rotate: -1.5deg; }
}
.xc-string {
  position: absolute;
  left: 50%;
  top: -46px;
  width: 2px;
  height: 40px;
  margin-left: -1px;
  background: linear-gradient(180deg, rgba(255, 211, 107, 0), #ffd36b);
}
.xc-string::after {                   /* gold cap */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 22px;
  height: 10px;
  margin-left: -11px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(90deg, #a8783f, #ffe7a3, #a8783f);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}

@media (max-width: 575.98px) {
  .xmas-cards { padding-top: 40px; row-gap: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .xmas-glitter, .gift-card::before, .xmas-card { animation: none !important; }
}

/* Room for the ornament strings between rows */
.xmas-cards { row-gap: 3.4rem; }

/* 36. Christmas header: festive font, hamper picks, ribbon ------------------- */
.xmas-script {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  font-family: "Mountains of Christmas", "Great Vibes", var(--font-display), cursive;
  font-weight: 700;
  font-size: clamp(2.8rem, 6.4vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: .01em;
  margin: .3rem 0 .2rem;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: inherit;
}
.xmas-script > span {
  background: linear-gradient(180deg, #fff6d6 0%, #ffd36b 45%, #e0a23a 70%, #ff8a8f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 rgba(122, 29, 35, .9)) drop-shadow(0 0 22px rgba(255, 211, 107, .35));
}
.xs-orn {
  font-size: .45em;
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, .8));
  animation: xsTwinkle 2.6s ease-in-out infinite;
}
.xs-orn:last-child { animation-delay: -1.3s; }
@keyframes xsTwinkle {
  0%, 100% { transform: rotate(0) scale(.85); opacity: .6; }
  50%      { transform: rotate(90deg) scale(1.1); opacity: 1; }
}

/* Hamper quick picks */
.xh-picks { display: flex; flex-wrap: wrap; gap: .8rem; margin: .3rem 0 1.3rem; }
.xh-pick {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1rem .65rem .65rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 211, 107, .45);
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
  color: var(--cream);
  text-align: left;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
  transition: transform .3s var(--ease), border-color .3s, background .3s, box-shadow .3s;
}
.xh-pick:hover {
  transform: translateY(-4px);
  border-color: #ffd36b;
  background: linear-gradient(160deg, rgba(255, 211, 107, .18), rgba(255, 255, 255, .05));
  box-shadow: 0 18px 36px rgba(0, 0, 0, .45), 0 0 22px rgba(255, 211, 107, .2);
}
.xh-pick-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #e0646b, #8f2d33);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.xh-pick--jumbo .xh-pick-icon { background: radial-gradient(circle at 35% 30%, #5cb874, #1f4d2c); }
.xh-pick small {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(251, 244, 234, .7);
}
.xh-pick b { font-family: var(--font-display); font-size: 1.55rem; line-height: 1.1; color: #ffd36b; }
.xh-pick-arrow { margin-left: .2rem; color: rgba(251, 244, 234, .6); transition: transform .3s var(--ease); }
.xh-pick:hover .xh-pick-arrow { transform: translateY(3px); color: #ffd36b; }

/* Festive ribbon banner */
.xh-ribbon {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 2.2rem;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(180deg, #d9343c, #8f1d24);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4);
  overflow: hidden;
}
.xh-ribbon i { color: #ffd36b; }
.xh-ribbon::after {                   /* gold shine sweep */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 231, 163, .6), transparent);
  transform: skewX(-20deg);
  animation: ribbonShine 3.5s ease-in-out infinite;
}
@keyframes ribbonShine {
  0%, 60% { left: -40%; }
  100%    { left: 130%; }
}

@media (max-width: 991.98px) {
  .xh-picks { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .xs-orn, .xh-ribbon::after { animation: none; }
}

/* 37. Home (hero) redesign with advanced animation --------------------------- */
.hero.hero-x {
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 40px) 0 90px;
  background:
    radial-gradient(ellipse at 75% 45%, rgba(200, 131, 74, .32), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(123, 74, 45, .5), transparent 50%),
    var(--cocoa-dots),
    linear-gradient(180deg, #24130c, var(--choco-900) 60%, #24130c);
}
.hero-x .hero-blob { display: none; }

/* Melting chocolate drips */
.hx-drips {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110px;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}
.hx-drip-base,
.hx-drip { fill: #4e2c1d; }
.hx-drip {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: hxDrip 5s ease-in-out infinite;
}
.hx-drip.d2 { animation-delay: -1.2s; }
.hx-drip.d3 { animation-delay: -2.6s; animation-duration: 6s; }
.hx-drip.d4 { animation-delay: -3.8s; }
@keyframes hxDrip {
  0%, 100% { transform: scaleY(.55); }
  50%      { transform: scaleY(1.15); }
}

/* Morphing melted-chocolate blobs */
.hx-blob {
  position: absolute;
  pointer-events: none;
  opacity: .55;
  animation: hxMorph 14s ease-in-out infinite, hxDrift 18s ease-in-out infinite;
}
.hx-blob--1 {
  width: 520px;
  height: 520px;
  right: -140px;
  top: 6%;
  background: radial-gradient(circle at 35% 30%, rgba(200, 131, 74, .55), rgba(78, 44, 29, .4) 60%, transparent 72%);
}
.hx-blob--2 {
  width: 320px;
  height: 320px;
  left: -110px;
  bottom: 6%;
  background: radial-gradient(circle at 40% 35%, rgba(226, 174, 120, .35), rgba(59, 32, 22, .3) 60%, transparent 72%);
  animation-delay: -6s, -9s;
}
@keyframes hxMorph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  33%      { border-radius: 63% 37% 42% 58% / 55% 38% 62% 45%; }
  66%      { border-radius: 38% 62% 55% 45% / 62% 58% 42% 38%; }
}
@keyframes hxDrift {
  0%, 100% { translate: 0 0; }
  50%      { translate: -30px 24px; }
}

/* Twinkling sparkles */
.hx-sparkles { position: absolute; inset: 0; pointer-events: none; }
.hx-sparkles span {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ffd36b;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: hxTwinkle 3s ease-in-out infinite;
}
.hx-sparkles span:nth-child(1) { left: 8%;  top: 24%; }
.hx-sparkles span:nth-child(2) { left: 18%; top: 72%; animation-delay: -.6s; width: 9px; height: 9px; }
.hx-sparkles span:nth-child(3) { left: 44%; top: 16%; animation-delay: -1.2s; }
.hx-sparkles span:nth-child(4) { left: 52%; top: 84%; animation-delay: -1.8s; width: 10px; height: 10px; }
.hx-sparkles span:nth-child(5) { left: 66%; top: 12%; animation-delay: -.3s; }
.hx-sparkles span:nth-child(6) { left: 92%; top: 30%; animation-delay: -2.2s; width: 9px; height: 9px; }
.hx-sparkles span:nth-child(7) { left: 88%; top: 76%; animation-delay: -1.5s; }
.hx-sparkles span:nth-child(8) { left: 32%; top: 44%; animation-delay: -2.6s; width: 5px; height: 5px; }
@keyframes hxTwinkle {
  0%, 100% { transform: scale(.3) rotate(0); opacity: 0; }
  50%      { transform: scale(1.2) rotate(45deg); opacity: 1; }
}

/* Headline shimmer + rotating words */
.hero-x .hero-title .accent {
  background: linear-gradient(90deg, #e2ae78, #fff1dc, #c8834a, #f6d7b0, #e2ae78);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: hxShimmer 6s linear infinite;
}
@keyframes hxShimmer { to { background-position: 250% center; } }
.site-ready .hero-x .hero-title .accent.hero-anim {
  animation: heroUp .9s var(--ease) forwards, hxShimmer 6s linear infinite;
  animation-delay: calc(var(--d, 0) * 120ms + 100ms), 0s;
}
.hx-rotator {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  color: var(--cream);
  margin: -.3rem 0 .9rem;
}
.hx-words {
  position: relative;
  display: inline-block;
  min-width: 7.5em;
  height: 1.3em;
  vertical-align: bottom;
  overflow: hidden;
  text-align: left;
}
.hx-word {
  position: absolute;
  left: 0;
  top: 0;
  font-style: italic;
  font-weight: 700;
  color: var(--caramel-soft);
  border-bottom: 2px solid rgba(226, 174, 120, .5);
  line-height: 1.2;
  opacity: 0;
  transform: translateY(100%);
  transition: transform .55s var(--ease), opacity .55s var(--ease);
}
.hx-word.is-active { opacity: 1; transform: none; }
.hx-word.is-leaving { opacity: 0; transform: translateY(-100%); }
@media (max-width: 991.98px) { .hx-words { text-align: center; } .hx-word { left: 50%; translate: -50% 0; } }

/* Glass chips */
.hx-chips { list-style: none; padding: 0; margin: 1.8rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
@media (min-width: 992px) { .hx-chips { justify-content: flex-start; } }
.hx-chips li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--cream);
  background: rgba(43, 23, 16, .55);
  border: 1px solid rgba(226, 174, 120, .3);
}
.hx-chips i { color: var(--caramel-soft); }
.hx-chips li:last-child i { color: #4ade80; }

/* Showcase stage */
.hx-stage {
  position: relative;
  width: min(500px, 100%);
  max-width: none;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  --r: 225px;                 /* orbit radius */
  --sat: 78px;                /* orbiting photo size */
}
.hx-layer { position: absolute; will-change: translate; }
.hx-orbit-ring {
  inset: 2%;
  border-radius: 50%;
  border: 2px dashed rgba(226, 174, 120, .35);
  animation: spin 50s linear infinite;
}
.hx-orbit-ring--inner {
  inset: 14%;
  border: 1px solid rgba(226, 174, 120, .18);
  box-shadow: 0 0 60px rgba(200, 131, 74, .25), inset 0 0 40px rgba(200, 131, 74, .12);
  animation-direction: reverse;
  animation-duration: 70s;
}
.hx-core { inset: 19%; }
.hx-core-img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 8px solid #4e2c1d;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 10px rgba(200, 131, 74, .14), 0 0 80px rgba(200, 131, 74, .3);
  animation: morph 12s ease-in-out infinite;
}
.hx-core-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }

/* Orbiting product photos */
.hx-orbit {
  position: absolute;
  inset: 0;
  animation: spin 32s linear infinite;
  pointer-events: none;
}
.hx-sat {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--sat);
  height: var(--sat);
  margin: calc(var(--sat) / -2) 0 0 calc(var(--sat) / -2);
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1));
  scale: 0;
}
.hx-sat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #f6d7b0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5), 0 0 0 4px rgba(200, 131, 74, .25);
  animation: spin 32s linear infinite reverse;     /* stays upright while orbiting */
}
.site-ready .hx-sat { animation: satPop .7s var(--ease) forwards; }
.site-ready .hx-sat:nth-child(1) { animation-delay: .9s; }
.site-ready .hx-sat:nth-child(2) { animation-delay: 1.05s; }
.site-ready .hx-sat:nth-child(3) { animation-delay: 1.2s; }
.site-ready .hx-sat:nth-child(4) { animation-delay: 1.35s; }
.site-ready .hx-sat:nth-child(5) { animation-delay: 1.5s; }
@keyframes satPop {
  0%   { scale: 0; }
  70%  { scale: 1.15; }
  100% { scale: 1; }
}

.hx-mascot.hero-mascot-badge { left: -2%; bottom: 4%; width: clamp(110px, 26%, 150px); z-index: 4; }
.hx-tag.hero-tag { right: -2%; top: 4%; z-index: 4; }
.hx-stage .float-piece,
.hx-stage .float-bean { z-index: 5; }

/* Responsive orbit sizes */
@media (max-width: 1199.98px) {
  .hx-stage { width: min(420px, 100%); --r: 188px; --sat: 66px; }
}
@media (max-width: 991.98px) {
  .hero.hero-x { min-height: auto; padding: calc(var(--nav-h) + 50px) 0 70px; }
  .hx-stage { width: min(360px, 92%); --r: 160px; --sat: 58px; }
}
@media (max-width: 575.98px) {
  .hx-stage { width: min(300px, 88%); --r: 132px; --sat: 48px; }
  .hx-drips { height: 70px; }
  .hx-blob--1 { width: 340px; height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  .hx-drip, .hx-blob, .hx-sparkles span, .hx-orbit, .hx-sat img, .hx-orbit-ring, .hx-core-img,
  .hero-x .hero-title .accent { animation: none !important; }
  .hx-sat { scale: 1; }
}

/* 38. Chat assistant: rich replies, timestamps, greeting bubble -------------- */
.ai-bubble { position: relative; }
.ai-time {
  display: block;
  margin-top: .3rem;
  font-size: .64rem;
  text-align: right;
  opacity: .55;
}
.ai-p { margin: 0 0 .5rem; }

/* Product card inside a reply */
.ai-product {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .55rem;
  border-radius: 14px;
  background: rgba(123, 74, 45, .08);
  border: 1px solid rgba(123, 74, 45, .18);
}
.ai-product img {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .2);
}
.ai-product-name { display: block; font-size: .95rem; color: #3b2016; }
.ai-product small { display: block; margin: .15rem 0 .35rem; font-size: .76rem; line-height: 1.4; color: #6e5546; }
.ai-product-prices { font-size: .82rem; line-height: 1.5; }
.ai-product-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.ai-act {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border: 0;
  border-radius: 999px;
  padding: .3rem .75rem;
  font-size: .76rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s var(--ease), filter .2s;
}
.ai-act:hover { transform: translateY(-1px); filter: brightness(1.05); }
.ai-act--choose { color: var(--choco-950); background: linear-gradient(135deg, #f0c290, var(--caramel)); }
.ai-act--wa { color: #fff; background: #25d366; }
.ai-act--wa:hover { color: #fff; }

/* Order on WhatsApp pulses when the assistant hands over */
.ai-wa-btn.is-pulsing { animation: aiWaPulse 1.1s ease-in-out 3; }
@keyframes aiWaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .6); }
  50%      { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); }
}

/* Greeting bubble next to the floating chatbot button */
.ai-teaser {
  position: fixed;
  left: 96px;
  bottom: 30px;
  z-index: 1031;
  max-width: 240px;
  padding: .7rem 2rem .7rem .95rem;
  border: 1px solid rgba(226, 174, 120, .4);
  border-radius: 16px 16px 16px 4px;
  text-align: left;
  font-size: .86rem;
  line-height: 1.4;
  color: var(--choco-900);
  background: var(--cream);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
  animation: aiTeaserIn .5s var(--ease) both, aiTeaserBob 3s ease-in-out .6s infinite;
}
.ai-teaser[hidden] { display: none; }
.ai-teaser b { display: block; color: var(--choco-500); }
.ai-teaser-close {
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 1.1rem;
  line-height: 1;
  color: rgba(43, 23, 16, .5);
}
.ai-teaser-close:hover { color: var(--choco-900); }
@keyframes aiTeaserIn { from { opacity: 0; transform: translateY(10px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes aiTeaserBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@media (max-width: 575.98px) {
  .ai-teaser { left: 80px; bottom: 22px; max-width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-teaser { animation: none; }
}

/* Mobile: stop anything wider than the screen from causing sideways scroll */
html { overflow-x: hidden; }
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
  section { overflow-x: clip; }
}
@media (max-width: 991.98px) {
  .row.g-5 { --bs-gutter-x: 1.5rem; }
  .js .reveal-left,
  .js .reveal-right { transform: translateY(40px); }
}