/* =========================================================================
   CHOMP — Build-A-Box
   ========================================================================= */

.bab-hero { padding-block: clamp(1.75rem, 4vw, 3rem); }
.bab-hero__title { margin: .3rem 0 .5rem; }
.bab-hero__lead { max-width: 42rem; }

/* Space kept clear for the fixed bar. It's a variable because the bar isn't one
   height: on mobile the size-up CTA stacks under the submit and makes it ~62px
   taller the moment it appears, and without reserving that the gift step ends up
   behind it. */
.bab { --bab-bar-space: 148px; padding-bottom: calc(var(--bab-bar-space) + env(safe-area-inset-bottom, 0)); }
.bab--upgrading { --bab-bar-space: 214px; }
/* The embedded bar is position:static (see .bab--embed .bab-bar) — there's
   nothing floating to clear, so reserving for it just left dead space. */
.bab--embed { padding-bottom: 0; }

/* Steps ----------------------------------------------------------------- */
.bab-step { border: 0; margin: 0 0 var(--space-2xl); padding: 0; }
.bab-step__legend { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); margin-bottom: var(--space-lg); padding: 0; }
.bab-step__num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--chomp-primary); color: var(--chomp-ink); font-size: 1rem; flex: none; }
.bab-step__optional { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm); color: var(--chomp-muted); }

/* Size cards ------------------------------------------------------------ */
.bab-sizes__grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.bab-size { position: relative; display: block; cursor: pointer; }
.bab-size input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bab-size__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: var(--space-lg) var(--space-md); background: var(--chomp-surface); border: 2px solid var(--chomp-border); border-radius: var(--radius-lg); text-align: center; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.bab-size:hover .bab-size__inner { border-color: var(--chomp-primary); }
.bab-size input:checked + .bab-size__inner { border-color: var(--chomp-primary-800); box-shadow: 0 0 0 4px var(--chomp-primary-soft2); background: var(--chomp-primary-soft); }
.bab-size input:focus-visible + .bab-size__inner { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.bab-size__tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--chomp-sunny); color: var(--chomp-ink); font-size: .7rem; font-weight: 700; padding: .25rem .7rem; border-radius: var(--radius-pill); white-space: nowrap; box-shadow: var(--shadow-xs); border: 1.5px solid #fff; }
.bab-size__count { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--chomp-ink); }
.bab-size__label { font-size: var(--fs-sm); color: var(--chomp-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.bab-size__price { font-weight: 800; font-size: 1.15rem; color: var(--chomp-primary-800); margin-top: .35rem; }
.bab-size__per { font-size: var(--fs-xs); color: var(--chomp-muted); }
.bab-size__check { position: absolute; top: .5rem; right: .5rem; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--chomp-primary); color: var(--chomp-ink); opacity: 0; transform: scale(.5); transition: all var(--dur) var(--ease); }
.bab-size input:checked + .bab-size__inner .bab-size__check { opacity: 1; transform: scale(1); }
@keyframes bab-nudge { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.bab-sizes--nudge .bab-sizes__grid { animation: bab-nudge .5s var(--ease); }

/* Flavour grid ---------------------------------------------------------- */
.bab-flavours__grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .bab-flavours__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .bab-flavours__grid { grid-template-columns: repeat(4, 1fr); } }

.bab-flavour { position: relative; display: flex; flex-direction: column; background: var(--chomp-surface); border: 1px solid var(--chomp-border); border-radius: var(--radius-lg); overflow: hidden; overflow: clip; }
.bab-flavour.is-oos { opacity: .6; }

/* Greeting for arrivals from a product page's box callout. JS-gated because the
   preload itself is JS: without it the box is empty and the copy would lie. */
.bab-flavours__greeting { display: none; max-width: 34rem; margin-bottom: var(--space-md); }
.js .bab-flavours__greeting { display: flex; }

/* Whole-card tap-to-add (JS enhancement — the +/- stepper stays for fine control) */
.bab-step__hint { display: none; margin: calc(-1 * var(--space-sm)) 0 var(--space-lg); color: var(--chomp-muted); font-size: var(--fs-sm); }
.js .bab-step__hint { display: block; }
.js .bab-flavour { cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.js .bab-flavour:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--chomp-primary-600); }
.js .bab-flavour:active { transform: scale(.985); }
.js .bab-flavour.is-oos { cursor: default; }
.js .bab-flavour.is-oos:hover { transform: none; box-shadow: none; border-color: var(--chomp-border); }
/* "Add" affordance so the tappable card is obvious (incl. touch, no hover). */
.js .bab-flavour__media::after { content: "+"; position: absolute; right: .55rem; bottom: .55rem; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--chomp-primary); color: var(--chomp-primary-ink); font-family: var(--font-body); font-weight: 800; font-size: 1.4rem; line-height: 1; box-shadow: var(--shadow-sm), var(--pillow-top); transition: transform var(--dur-fast) var(--ease-spring); pointer-events: none; }
.js .bab-flavour:hover .bab-flavour__media::after { transform: scale(1.18); }
.js .bab-flavour.is-oos .bab-flavour__media::after { display: none; }
@media (prefers-reduced-motion: reduce) { .js .bab-flavour, .js .bab-flavour__media::after { transition: none; } }
.bab-flavour__media { position: relative; aspect-ratio: 1/1; background: var(--chomp-primary-soft); }
.bab-flavour__media img { width: 100%; height: 100%; object-fit: cover; }
.bab-flavour__flag { position: absolute; top: .5rem; left: .5rem; }
.bab-flavour__body { padding: var(--space-sm) var(--space-md) 0; flex: 1; }
.bab-flavour__name { font-size: var(--fs-md); margin: 0 0 .2rem; }
.bab-flavour__desc { font-size: var(--fs-xs); color: var(--chomp-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bab-flavour__add { padding: var(--space-sm) var(--space-md) var(--space-md); display: flex; justify-content: center; }
.bab-flavour__qty { width: 100%; justify-content: space-between; }
.bab-flavour__qty .chomp-qty__input { flex: 1; }
.bab-flavour__oos { font-weight: 700; color: var(--chomp-muted); font-size: var(--fs-sm); padding: .6rem 0; }

/* Gift ------------------------------------------------------------------ */
.bab-gift textarea { max-width: 40rem; }

/* Sticky progress bar --------------------------------------------------- */
.bab-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--chomp-surface); background: color-mix(in srgb, var(--chomp-surface) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--chomp-border); box-shadow: 0 -6px 24px rgba(20,86,76,.1); padding: .7rem 0 calc(.7rem + env(safe-area-inset-bottom, 0)); }
.bab-bar__inner { display: grid; grid-template-columns: 1fr; grid-template-areas: "status" "msg" "add"; align-items: center; gap: .35rem var(--space-md); }
.bab-bar__status { grid-area: status; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.bab-bar__meter { position: relative; height: 9px; margin-top: .25rem; border-radius: var(--radius-pill); background: var(--chomp-primary-soft2); overflow: visible; }
.bab-bar__fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--chomp-primary), var(--chomp-primary-600)); border-radius: var(--radius-pill); transition: width var(--dur) var(--ease); }
.bab-bar__fill.is-full { background: linear-gradient(90deg, #35a58f, var(--chomp-success)); }
.bab-monster { position: absolute; z-index: 3; left: clamp(24px, var(--bab-progress), calc(100% - 24px)); bottom: -11px; width: 76px; pointer-events: none; transform: translateX(-48%); transition: left var(--dur) var(--ease); transform-origin: 50% 85%; }
.bab-monster__runner { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 2px rgba(20,86,76,.12)); }
.bab-monster.is-chasing .bab-monster__runner { animation: bab-monster-chase .9s cubic-bezier(.22,.8,.32,1); }
.bab-monster.is-catching { z-index: 6; }
@keyframes bab-monster-chase {
	0%, 100% { transform: translateY(0) rotate(0); }
	18% { transform: translateY(-5px) rotate(-3deg); }
	38% { transform: translateY(1px) rotate(2deg) scaleX(1.025); }
	58% { transform: translateY(-4px) rotate(-2deg); }
	78% { transform: translateY(0) rotate(1deg) scaleX(.985); }
}
.bab-bar__count { margin: 0; font-weight: 800; font-size: var(--fs-sm); color: var(--chomp-ink); }
.bab-bar__count[data-full="true"] { color: var(--chomp-success); }
.bab-bar__msg { grid-area: msg; margin: 0; font-size: var(--fs-xs); color: var(--chomp-warning); display: none; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bab-bar__msg.is-visible { display: flex; }
.bab-bar__actions { grid-area: add; display: flex; flex-direction: column; gap: .45rem; }
/* Holds the monster's seat, so he keeps landing on the submit button rather than
   on whatever else ends up last in the row. */
.bab-bar__primary { position: relative; display: block; }
.bab-bar__add { width: 100%; white-space: nowrap; }

/* Size-up CTA. Deep teal + white: a real second action next to the mint "Box it
   up!" without competing to be the primary one. Hidden until the box is full AND
   the monster has sat down to eat — the JS arms it (see landMonster). [hidden]
   must come after display:flex or it leaks out on every size. */
.bab-bar__upgrade { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem; min-height: 52px; padding: .45rem 1rem; border: 0; border-radius: var(--radius-pill); background: var(--chomp-teal-deep); color: #fff; line-height: 1.15; text-align: center; cursor: pointer; box-shadow: var(--shadow-sm); transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.bab-bar__upgrade[hidden] { display: none; }
.bab-bar__upgrade:hover { background: #0F433A; transform: translateY(-2px); }
.bab-bar__upgrade:active { transform: translateY(0); }
.bab-bar__upgrade-main { font-weight: 800; font-size: var(--fs-sm); color: #fff; white-space: nowrap; }
/* Mint-soft, not full mint: on this dark teal it clears AA for small text. */
.bab-bar__upgrade-sub { font-weight: 700; font-size: var(--fs-xs); color: var(--chomp-primary-soft2); white-space: nowrap; }

/* Pops in when revealed, then breathes just enough to catch the eye. Both run
   from display:none -> flex, so the reveal restarts them for free; the nudge is
   delayed until the pop has landed. */
.bab-bar__upgrade { animation: chomp-upgrade-pop .46s var(--ease-spring) both, chomp-upgrade-nudge 2.6s .7s var(--ease) infinite; }
.bab-bar__upgrade:hover { animation-play-state: paused; }

@keyframes chomp-upgrade-pop {
	0%   { opacity: 0; transform: translateY(8px) scale(.82); }
	60%  { opacity: 1; transform: translateY(0) scale(1.06); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Deliberately tiny — it sits next to the primary CTA and must not dance. */
@keyframes chomp-upgrade-nudge {
	0%, 88%, 100% { transform: translateY(0) rotate(0); }
	92%           { transform: translateY(-2px) rotate(-.8deg); }
	96%           { transform: translateY(-1px) rotate(.6deg); }
}

@media (prefers-reduced-motion: reduce) {
	.bab-bar__upgrade { transition: none; animation: none; }
	.bab-bar__upgrade:hover { transform: none; }
}
.bab-monster-seat { position: absolute; z-index: 5; top: -62px; right: .75rem; width: 68px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px) scale(.7) rotate(4deg); transform-origin: 50% 90%; }
.bab-monster-seat img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 3px rgba(20,86,76,.14)); }
.bab-monster-seat.is-eating { visibility: visible; opacity: 1; animation: bab-monster-sit .48s var(--ease-spring) both, bab-monster-nibble .75s .5s ease-in-out infinite alternate; }
@keyframes bab-monster-sit {
	0% { opacity: 0; transform: translateY(-8px) scale(.7) rotate(-5deg); }
	65% { opacity: 1; transform: translateY(2px) scale(1.06) rotate(2deg); }
	100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes bab-monster-nibble {
	from { transform: translateY(0) rotate(-1deg); }
	to { transform: translateY(-2px) rotate(1.5deg); }
}
.bab--full .bab-bar__add { animation: chomp-pop .4s var(--ease); }
.bab--submitting .bab-bar__add { opacity: .8; }

@media (min-width: 640px) {
	/* Wide enough for the CTA to sit beside the submit, so the bar stops growing. */
	.bab, .bab--upgrading { --bab-bar-space: 106px; }
	.bab-bar__inner { grid-template-columns: 1fr auto auto; grid-template-areas: "status msg add"; }
	.bab-bar__msg { justify-content: flex-end; }
	.bab-bar__actions { flex-direction: row; align-items: stretch; min-width: 250px; }
	.bab-bar__primary { flex: 0 0 auto; }
	.bab-monster { width: 92px; bottom: -13px; }
	.bab-monster-seat { width: 76px; top: -69px; right: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.bab-monster, .bab-bar__fill { transition: none; }
	.bab-monster.is-chasing .bab-monster__runner, .bab-monster-seat.is-eating { animation: none; }
	.bab-monster-seat.is-eating { visibility: visible; opacity: 1; transform: none; }
}

/* =========================================================================
   FREE COOKIE OFFER (inc/promo-bonus.php)
   Only ever rendered for a shopper who arrived with the code, so these styles
   sit idle for everyone else. Mint-forward: the freebie reads as CHOMP, not as
   a third-party promo bolted on.
   ========================================================================= */

.bab-bonus { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-xl); padding: var(--space-md) var(--space-lg); background: var(--chomp-primary-soft); border: 2px dashed var(--chomp-primary); border-radius: var(--radius-lg); }
.bab-bonus__ico { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--chomp-surface); color: var(--chomp-primary-800); box-shadow: var(--shadow-xs); }
.bab-bonus__text { display: flex; flex-direction: column; line-height: 1.35; }
.bab-bonus__title { color: var(--chomp-primary-800); font-size: var(--fs-lg); }
.bab-bonus__sub { color: var(--chomp-ink-2); font-size: var(--fs-sm); }

/* A qualifying size card. The dashed edge echoes the banner so the eye links
   "code is on" to "this is the box that gets it". */
.bab-size--bonus .bab-size__inner { border-style: dashed; border-color: var(--chomp-primary); }
.bab-size--bonus input:checked + .bab-size__inner { border-style: solid; }

/* "+1" rides next to the count, sized down so 8 stays the headline number. */
.bab-size__plus { font-size: 1.1rem; vertical-align: super; color: var(--chomp-primary-800); margin-left: .1rem; }

.bab-size__free { margin-top: .4rem; padding: .2rem .6rem; border-radius: var(--radius-pill); background: var(--chomp-primary); color: var(--chomp-teal-deep); font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }

@media (max-width: 560px) {
	.bab-bonus { align-items: flex-start; }
}

/* EMBEDDED BUILDER (on a cookie's product page) -------------------------------
   Same builder, minus the things that only make sense when it IS the page: the
   progress bar un-pins from the viewport and sits inside the band, because a
   product page already has its own add-to-cart and does not need a second one
   floating over it the whole way down. */
.bab--embed .bab-bar {
	position: static; z-index: auto; backdrop-filter: none; -webkit-backdrop-filter: none;
	margin-top: var(--space-lg); border: 1px solid var(--chomp-border); border-radius: var(--radius-xl);
	background: var(--chomp-surface); box-shadow: var(--shadow-sm); padding: var(--space-md) 0;
}
.bab--embed .bab-step { margin-top: var(--space-xl); }
.bab--embed .bab-step:first-of-type { margin-top: 0; }
.bab--embed .bab-step__legend { font-size: var(--fs-md); }

/* The cookie whose page this is: already in the box, and shown that way. */
.bab-flavour--pinned { border-color: var(--chomp-primary); box-shadow: 0 0 0 2px var(--chomp-primary-soft); }