/* =========================================================================
   CHOMP — WooCommerce (shop, product, cart, checkout)
   Loaded on WooCommerce pages only.
   ========================================================================= */

/* SHOP HERO + CHIPS ----------------------------------------------------- */
.shop-hero { padding-block: clamp(1.75rem, 4vw, 3rem); }
.shop-hero__title { margin: 0; }
.shop-hero__desc { margin-top: var(--space-sm); max-width: 46rem; }
.shop-chips { display: flex; gap: .5rem; margin-top: var(--space-lg); overflow-x: auto; padding-bottom: .35rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.shop-chip { flex: none; padding: .5rem 1rem; border-radius: var(--radius-pill); background: var(--chomp-surface); border: 1.5px solid var(--chomp-ui-border); font-weight: 700; font-size: var(--fs-sm); color: var(--chomp-ink); white-space: nowrap; }
.shop-chip:hover { border-color: var(--chomp-primary-700); text-decoration: none; }
.shop-chip.is-active { background: var(--chomp-primary); color: var(--chomp-ink); border-color: transparent; }

/* TOOLBAR (result count + ordering) ------------------------------------- */
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.shop-toolbar .woocommerce-result-count { margin: 0; color: var(--chomp-muted); font-size: var(--fs-sm); }
.shop-toolbar .woocommerce-ordering { margin: 0; }
.shop-toolbar select { min-height: 44px; }

/* PRODUCT GRID (ul.products) -------------------------------------------- */
.woocommerce ul.products, ul.products {
	list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg);
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(4, 1fr); } }
.woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after { content: none; } /* kill WC clearfix (beat core specificity) */
.chomp-shop__cell { margin: 0 !important; width: auto !important; float: none !important; }
.chomp-shop__cell .chomp-product-card { height: 100%; }

/* Pagination */
.woocommerce-pagination { margin-top: var(--space-2xl); }
.woocommerce-pagination ul { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; list-style: none; margin: 0; padding: 0; border: 0; }
.woocommerce-pagination ul li { border: 0; margin: 0; }
.woocommerce-pagination a.page-numbers, .woocommerce-pagination span.page-numbers {
	display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .6rem;
	border-radius: var(--radius-sm); border: 1px solid var(--chomp-border); font-weight: 700; background: var(--chomp-surface);
}
.woocommerce-pagination span.current { background: var(--chomp-primary); color: var(--chomp-ink); border-color: transparent; }

/* SINGLE PRODUCT (PDP) — Milk Bar 2-col + Levain story/upsell ------------ */
.chomp-pdp-top { padding-block: var(--space-lg) var(--space-2xl); }
.chomp-pdp { display: grid; gap: var(--space-xl); margin-top: var(--space-md); }
@media (min-width: 900px) {
	.chomp-pdp { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
	.chomp-pdp__gallery { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}

/* Gallery */
.chomp-pdp-gallery__stage { position: relative; background: var(--chomp-primary-soft); border-radius: var(--radius-2xl); aspect-ratio: 1 / 1; overflow: hidden; display: grid; place-items: center; padding: clamp(1.25rem, .5rem + 4vw, 3rem); }
.chomp-pdp-gallery__img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(20,86,76,.16)); }
.chomp-pdp-gallery__badges { position: absolute; top: 1rem; left: 1rem; z-index: 2; margin: 0; }
.chomp-pdp-gallery__thumbs { list-style: none; display: flex; gap: .6rem; margin: .8rem 0 0; padding: 0; flex-wrap: wrap; }
.chomp-pdp-gallery__thumb { padding: 0; width: 68px; height: 68px; border: 2px solid transparent; border-radius: var(--radius-md); overflow: hidden; background: var(--chomp-primary-soft); cursor: pointer; }
.chomp-pdp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chomp-pdp-gallery__thumb.is-active { border-color: var(--chomp-primary-600); }
.chomp-pdp-gallery__thumb:focus-visible { outline: 3px solid var(--chomp-focus); outline-offset: 2px; }

/* Summary */
.chomp-pdp__summary { display: flex; flex-direction: column; gap: var(--space-sm); }
.chomp-single__badges { margin: 0; }
.chomp-pdp__title { font-size: var(--fs-3xl); line-height: 1.03; margin: .1rem 0 0; }
.chomp-pdp__rating { display: inline-flex; align-items: center; gap: .45rem; width: fit-content; padding: .4rem .7rem; border: 1px solid var(--chomp-border); border-radius: var(--radius-pill); background: var(--chomp-surface); text-decoration: none; box-shadow: var(--shadow-xs); transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.chomp-pdp__rating:hover { border-color: var(--chomp-primary-600); box-shadow: var(--shadow-sm); text-decoration: none; }
.chomp-pdp__google { display: inline-flex; align-items: center; padding-right: .1rem; }
.chomp-pdp__google .review-card__google { width: 18px; height: 18px; }
.chomp-pdp__stars { display: inline-flex; color: var(--chomp-caramel); }
.chomp-pdp__stars .icon { fill: currentColor; stroke: none; }
.chomp-pdp__rating-text { font-size: var(--fs-sm); color: var(--chomp-muted); }
.chomp-pdp__rating-text strong { color: var(--chomp-ink); }
.chomp-pdp__rating:hover .chomp-pdp__rating-text { color: var(--chomp-primary-700); }
.chomp-pdp__price { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--chomp-ink); margin: .2rem 0; }
.chomp-pdp__price del, .chomp-pdp__price del .woocommerce-Price-amount { color: var(--chomp-muted); font-weight: 500; font-size: .68em; margin-right: .35rem; }
.chomp-pdp__price ins { text-decoration: none; }
.chomp-pdp__excerpt { color: var(--chomp-ink-2); font-size: var(--fs-md); line-height: 1.6; }
.chomp-pdp__excerpt p { margin: 0 0 .6em; }
.chomp-pdp__excerpt p:last-child { margin-bottom: 0; }

/* Single-cookie add to cart */
.chomp-pdp__buy { margin-top: var(--space-xs); }
.chomp-pdp__buy form.cart { display: flex; align-items: stretch; gap: .6rem; flex-wrap: wrap; margin: 0; }
.chomp-pdp__buy .quantity { flex: 0 0 auto; }
.chomp-pdp__buy .single_add_to_cart_button, .chomp-pdp__buy form.cart .button {
	min-height: 54px; padding-inline: 1.75rem; border-radius: var(--radius-pill);
	background: var(--chomp-primary); color: var(--chomp-ink); font-weight: 700; border: 0;
	flex: 1; min-width: 170px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	box-shadow: var(--shadow-teal); cursor: pointer; font-size: var(--fs-md);
	transition: background .2s var(--ease-out), transform .1s var(--ease-out);
}
.chomp-pdp__buy .single_add_to_cart_button:hover { background: var(--chomp-primary-600); }
.chomp-pdp__buy .single_add_to_cart_button:active { transform: translateY(1px); }

/* "Box it up?" shortcut — the shared .chomp-callout with a box that bursts open
   on hover. Everything here is local to the product page. */
.chomp-box-callout { margin-top: var(--space-md); align-items: center; }
.chomp-box-callout__title { margin: 0 0 .15rem; }
/* Rock Salt, matched to the Add to cart button's font-size (--fs-md). It's the
   one hand-script accent on this page — see .chomp-hand in theme.css. */
.chomp-box-callout .chomp-callout__cta { margin-top: 0; font-size: var(--fs-md); font-weight: 400; line-height: 1.35; gap: .45rem; }
.chomp-box-callout .chomp-callout__cta .icon { flex: none; }

/* --- The box ---
   z-order is the whole trick: box front (3) sits OVER the cookies (2), which sit
   over the lid (1). So the cookies are simply parked inside the box at rest,
   hidden by its own front wall, and "escape" by rising past the top edge. No
   opacity fade — they're really behind it. The lid tumbles off behind them,
   which also stops it ever cutting across the hero cookie. */
.chomp-boxpop { position: relative; flex: none; width: 64px; height: 62px; }
.chomp-boxpop__box { position: absolute; left: 8px; bottom: 0; width: 48px; height: 32px; border-radius: 2px 2px 6px 6px; background: linear-gradient(180deg, #E9B47D 0%, #D9944F 100%); box-shadow: inset 0 -3px 0 rgba(107, 61, 15, .1); z-index: 3; }
/* Front rim, so the top edge reads as the opening the cookies come out of. */
.chomp-boxpop__box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #C98246; border-radius: 2px 2px 0 0; }
/* The CHOMP band. */
.chomp-boxpop__box::after { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 7px; background: var(--chomp-primary); }
.chomp-boxpop__lid { position: absolute; left: 5px; bottom: 31px; width: 54px; height: 7px; border-radius: 3px; background: linear-gradient(180deg, #F2C68F 0%, #E2A468 100%); transform-origin: 6px 100%; transition: transform var(--dur-mid) var(--ease-spring); z-index: 1; }

/* --- What escapes it. Parked fully inside the box (y 4..28 vs the box's 0..32). --- */
.chomp-boxpop__cookie { position: absolute; left: 50%; bottom: 6px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; transform: translate(0, 0); transition: transform var(--dur-mid) var(--ease-spring); z-index: 2; }
.chomp-boxpop__cookie--a,
.chomp-boxpop__cookie--b {
	background:
		radial-gradient(circle at 32% 34%, #5A3A1B 0 2.1px, transparent 2.6px),
		radial-gradient(circle at 68% 56%, #5A3A1B 0 1.8px, transparent 2.3px),
		radial-gradient(circle at 40% 74%, #5A3A1B 0 1.5px, transparent 2px),
		#DCA467;
}
/* The real cookie. Product shots are JPEGs on white (choco-chunk.jpg et al), so
   there's no transparency to crop to — a round mask just framed a white disc.
   multiply drops the white into the card's mint and leaves the cookie floating;
   `contain` then keeps the whole cookie rather than slicing it. */
/* multiply goes on the hero itself, not the <img>: the hero is a stacking
   context (it's z-indexed), so a blend on the child has no backdrop to multiply
   into and the white just stays. On the element, it blends with the callout's
   mint behind it and the white disappears. */
.chomp-boxpop__cookie--hero { width: 28px; height: 28px; margin-left: -14px; bottom: 3px; border-radius: 0; background: transparent; mix-blend-mode: multiply; }
.chomp-boxpop__cookie--hero img { width: 100%; height: 100%; object-fit: contain; display: block; transform: scale(1.3); }

/* Hover OR keyboard focus — the animation must not be mouse-only. */
.chomp-box-callout:hover .chomp-boxpop__lid,
.chomp-box-callout:has(:focus-visible) .chomp-boxpop__lid { transform: translate(-9px, -12px) rotate(-40deg); }
.chomp-box-callout:hover .chomp-boxpop__cookie--a,
.chomp-box-callout:has(:focus-visible) .chomp-boxpop__cookie--a { transform: translate(-15px, -26px) rotate(-24deg); transition-delay: 40ms; }
.chomp-box-callout:hover .chomp-boxpop__cookie--b,
.chomp-box-callout:has(:focus-visible) .chomp-boxpop__cookie--b { transform: translate(14px, -22px) rotate(22deg); transition-delay: 90ms; }
.chomp-box-callout:hover .chomp-boxpop__cookie--hero,
.chomp-box-callout:has(:focus-visible) .chomp-boxpop__cookie--hero { transform: translate(0, -30px) rotate(7deg); transition-delay: 130ms; }

/* --- Confetti --- */
.chomp-boxpop__confetti { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.chomp-boxpop__confetti i { position: absolute; left: 50%; bottom: 26px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 1px; opacity: 0; }
.chomp-boxpop__confetti i:nth-child(1) { background: var(--chomp-sunny);  --cx: -22px; --cy: -26px; --cr: 220deg; }
.chomp-boxpop__confetti i:nth-child(2) { background: var(--chomp-berry);  --cx:  20px; --cy: -30px; --cr: -180deg; }
.chomp-boxpop__confetti i:nth-child(3) { background: var(--chomp-primary); --cx: -12px; --cy: -36px; --cr: 140deg; border-radius: 50%; }
.chomp-boxpop__confetti i:nth-child(4) { background: var(--chomp-caramel); --cx:  10px; --cy: -38px; --cr: -260deg; }
.chomp-boxpop__confetti i:nth-child(5) { background: var(--chomp-sunny);  --cx:  26px; --cy: -16px; --cr: 300deg; border-radius: 50%; }
.chomp-boxpop__confetti i:nth-child(6) { background: var(--chomp-berry);  --cx: -26px; --cy: -14px; --cr: -120deg; }
.chomp-box-callout:hover .chomp-boxpop__confetti i,
.chomp-box-callout:has(:focus-visible) .chomp-boxpop__confetti i { animation: chomp-boxpop-confetti 720ms var(--ease) forwards; }
.chomp-boxpop__confetti i:nth-child(2) { animation-delay: 60ms; }
.chomp-boxpop__confetti i:nth-child(3) { animation-delay: 30ms; }
.chomp-boxpop__confetti i:nth-child(4) { animation-delay: 90ms; }
.chomp-boxpop__confetti i:nth-child(5) { animation-delay: 120ms; }
.chomp-boxpop__confetti i:nth-child(6) { animation-delay: 45ms; }

@keyframes chomp-boxpop-confetti {
	0%   { opacity: 0; transform: translate(0, 0) rotate(0) scale(.3); }
	18%  { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--cx), var(--cy)) rotate(var(--cr)) scale(1); }
}

/* --- Click: everything recedes back into the box before we move. Ordered after
   the hover rules on purpose — the pointer is still over the card, so these have
   to win on source order rather than !important. --- */
.chomp-box-callout.is-closing .chomp-boxpop__lid { transform: none; transition-delay: 0s; }
.chomp-box-callout.is-closing .chomp-boxpop__cookie { transform: translate(0, 0); transition-duration: var(--dur); transition-delay: 0s; }
.chomp-box-callout.is-closing .chomp-boxpop__confetti i { animation: none; opacity: 0; }
.chomp-box-callout.is-closing { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.chomp-boxpop__lid,
	.chomp-boxpop__cookie { transition: none; }
	.chomp-box-callout:hover .chomp-boxpop__confetti i,
	.chomp-box-callout:has(:focus-visible) .chomp-boxpop__confetti i { animation: none; }
}

/* Trust notes */
.chomp-single__trust { list-style: none; margin: var(--space-md) 0 0; padding: var(--space-md) 0; border-top: 1px solid var(--chomp-border); display: grid; gap: .55rem; }
.chomp-single__trust li { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-sm); color: var(--chomp-muted); }
.chomp-single__trust .icon { color: var(--chomp-primary-700); flex: none; }

/* Product accordion (native <details>) */
.chomp-pdp__accordion { margin-top: 0; border-top: 1px solid var(--chomp-border); }
.chomp-pdp__accordion details { border-bottom: 1px solid var(--chomp-border); }
.chomp-pdp__accordion summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: var(--space-md) 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--chomp-ink); }
.chomp-pdp__accordion summary::-webkit-details-marker { display: none; }
.chomp-pdp__accordion summary svg { display: none; }
.chomp-pdp__accordion summary::after { content: ""; flex: none; width: 11px; height: 11px; border-right: 2px solid var(--chomp-primary-700); border-bottom: 2px solid var(--chomp-primary-700); transform: rotate(45deg); transition: transform .2s var(--ease-out); margin-right: .25rem; margin-top: -4px; }
.chomp-pdp__accordion details[open] summary::after { transform: rotate(-135deg); margin-top: 2px; }
.chomp-pdp__accordion details > *:not(summary) { color: var(--chomp-ink-2); font-size: var(--fs-sm); line-height: 1.65; }
.chomp-pdp__accordion details p { margin: 0 0 .8em; }
.chomp-pdp__accordion details > *:last-child { margin-bottom: var(--space-md); }
.chomp-pdp__accordion img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

/* Below-fold: story band */
.chomp-pdp-story { padding-block: clamp(2.75rem, 6vw, 5rem); margin-block: 0; }
.chomp-pdp-story__inner { display: grid; gap: var(--space-xl); align-items: center; }
.chomp-pdp-story__img { width: 100%; border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; object-fit: cover; }
.chomp-pdp-story__body h2 { font-size: var(--fs-2xl); margin: .3rem 0 var(--space-sm); }
.chomp-pdp-story__body p { color: var(--chomp-ink-2); font-size: var(--fs-md); line-height: 1.7; margin: 0 0 var(--space-md); }
@media (min-width: 820px) { .chomp-pdp-story__inner { grid-template-columns: .8fr 1.2fr; gap: var(--space-3xl); } }

/* Buy column: "Complete the box" — a list bound to the column, not a card grid.
   No prices anywhere in here on purpose (see inc/box-funnel.php). */
.chomp-ctb { margin-top: var(--space-md); padding: var(--space-lg); border: 1.5px solid var(--chomp-border-2); border-radius: var(--radius-xl); background: var(--chomp-surface); }
.chomp-ctb__head .eyebrow { margin-bottom: .1rem; }
.chomp-ctb__title { font-size: var(--fs-md); line-height: 1.35; margin: 0 0 var(--space-md); }
.chomp-ctb__name { color: var(--chomp-primary-700); }
.chomp-ctb__list { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: grid; gap: .1rem; }
.chomp-ctb__item { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; }
.chomp-ctb__item + .chomp-ctb__item { border-top: 1px dashed var(--chomp-border); }
.chomp-ctb__media { flex: none; width: 46px; height: 46px; border-radius: var(--radius-md); overflow: hidden; background: var(--chomp-surface-alt); }
.chomp-ctb__media img { width: 46px; height: 46px; object-fit: cover; display: block; }
.chomp-ctb__media--open { display: grid; place-items: center; font-size: 1.3rem; font-weight: 700; color: var(--chomp-primary-700); border: 2px dashed var(--chomp-mint-border, var(--chomp-border-2)); background: transparent; }
.chomp-ctb__body { display: grid; gap: .1rem; min-width: 0; }
.chomp-ctb__label { font-weight: 700; color: var(--chomp-ink); font-size: var(--fs-sm); text-decoration: none; }
a.chomp-ctb__label:hover { color: var(--chomp-primary-700); text-decoration: underline; }
.chomp-ctb__note { font-size: var(--fs-xs); color: var(--chomp-muted); }
.chomp-ctb__item--open .chomp-ctb__label { color: var(--chomp-primary-700); }
.chomp-ctb__foot { font-size: var(--fs-xs); margin: .6rem 0 0; text-align: center; }

/* WooCommerce notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
	list-style: none; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); border: 1px solid var(--chomp-border);
	background: var(--chomp-primary-soft); margin: 0 0 var(--space-lg); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.woocommerce-message { background: var(--chomp-success-soft); border-color: #BFE4CF; color: #14532D; }
.woocommerce-error { background: var(--chomp-error-soft); border-color: #F1C4BB; color: #8F2314; }
.woocommerce-message .button, .woocommerce-error .button, .woocommerce-info .button {
	margin-left: auto; min-height: 40px; padding: .5rem 1rem; border-radius: var(--radius-pill); background: var(--chomp-primary); color: var(--chomp-ink); font-weight: 700; display: inline-flex; align-items: center;
}

/* Added-to-cart button feedback */
.added_to_cart { display: inline-flex; align-items: center; margin-left: .4rem; font-weight: 700; color: var(--chomp-primary-800); }

/* CART & CHECKOUT (base; polished further in cart.css scope) ------------- */
.woocommerce-cart .chomp-single, .woocommerce-checkout .chomp-single { display: none; }
.woocommerce table.shop_table { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--chomp-border); border-collapse: separate; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: var(--space-md); }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout #order_review { background: var(--chomp-surface); border: 1px solid var(--chomp-border); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-sm); }
.woocommerce #payment, .woocommerce-checkout #payment { background: transparent; border-radius: var(--radius-lg); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { min-height: 48px; border-radius: var(--radius-sm); border: 1.5px solid var(--chomp-border-2); }
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
	background: var(--chomp-primary); color: var(--chomp-ink); border-radius: var(--radius-pill); font-weight: 700; min-height: 48px; padding: .7rem 1.5rem; border: 0;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--chomp-primary-600); color: var(--chomp-ink); }
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--chomp-primary); }
.woocommerce #place_order, .woocommerce button#place_order { width: 100%; min-height: 56px; font-size: 1.075rem; }

/* Build-A-Box contents shown in cart/checkout line items */
.chomp-bab-cart-list { list-style: none; margin: .35rem 0 0; padding: 0; font-size: var(--fs-xs); color: var(--chomp-muted); }
.chomp-bab-cart-list li { padding: .05rem 0; }
.chomp-etransfer { margin-top: var(--space-md); }
.chomp-pickup-notice-row td { padding: 0 0 var(--space-md) !important; border: 0 !important; }

/* Cart layout polish */
.woocommerce-cart .cart_item td.product-thumbnail img { width: 72px; border-radius: var(--radius-sm); }
.woocommerce-cart table.cart td.actions .coupon .input-text { min-width: 140px; max-width: 200px; }
.woocommerce .cart-collaterals { margin-top: var(--space-xl); }
.woocommerce a.remove { color: var(--chomp-error) !important; border-radius: 50%; }
.woocommerce a.remove:hover { background: var(--chomp-error) !important; color: #fff !important; }
.woocommerce .quantity.chomp-qty--woo { padding: .25rem; border: 1.5px solid var(--chomp-border-2); border-radius: var(--radius-pill); background: var(--chomp-surface); }
.woocommerce .quantity.chomp-qty--woo input.qty { border: 0; background: transparent; width: 2.75rem; min-height: 36px; box-shadow: none; }

/* Checkout two-column on desktop */
@media (min-width: 900px) {
	.woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1.35fr 0.85fr; grid-template-rows: auto 1fr; column-gap: var(--space-3xl); row-gap: 0; align-items: start; }
	.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
	.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
	.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--header-h) + 1rem); }
}

/* Empty cart */
.cart-empty.woocommerce-info { background: var(--chomp-primary-soft); border-color: var(--chomp-primary-soft2); color: var(--chomp-ink); }
.wc-empty-cart-message + .return-to-shop { margin-top: var(--space-md); }

/* Fulfillment banner (cart) — reflects the pickup/delivery choice made on shop */
.chomp-fulfillment-banner { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.chomp-fulfillment-banner .icon { flex: none; color: var(--chomp-primary-700); }
.chomp-fulfillment-banner__text { display: flex; flex-direction: column; line-height: 1.3; }
.chomp-fulfillment-banner__text strong { color: var(--chomp-primary-800); }
.chomp-fulfillment-banner__change { margin-left: auto; font-weight: 700; color: var(--chomp-primary-800); text-decoration: underline; white-space: nowrap; }

/* =========================================================================
   FOCUSED CHECKOUT (single page, Shopify-style breathing room)
   ========================================================================= */
.chomp-checkout__head { border-bottom: 1px solid var(--chomp-border); background: var(--chomp-surface); }
.chomp-checkout__head-inner { display: flex; align-items: center; gap: var(--space-md); min-height: 64px; }
.chomp-checkout__back { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; font-size: var(--fs-sm); color: var(--chomp-ink-2); text-decoration: none; }
.chomp-checkout__back:hover { color: var(--chomp-primary-800); }
.chomp-checkout__title { font-size: var(--fs-xl); margin: 0 auto 0 var(--space-md); }
.chomp-checkout__secure { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); font-weight: 700; color: var(--chomp-primary-800); }
.chomp-checkout__secure .icon { color: var(--chomp-primary-700); }
.chomp-checkout__body { padding-block: var(--space-2xl) var(--space-4xl); }

/* Pickup / delivery toggle at the top of checkout */
.chomp-fulfil-toggle { margin: 0 auto var(--space-2xl); max-width: 100%; }
.chomp-fulfil-toggle__label { display: block; font-weight: 800; font-family: var(--font-display); font-size: var(--fs-lg); margin-bottom: var(--space-sm); }
.chomp-fulfil-toggle__opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.chomp-fulfil-opt { position: relative; display: flex; align-items: center; gap: var(--space-md); text-align: left; padding: var(--space-md) var(--space-lg); background: var(--chomp-surface); border: 2px solid var(--chomp-border); border-radius: var(--radius-lg); cursor: pointer; font: inherit; color: inherit; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.chomp-fulfil-opt:hover { border-color: var(--chomp-primary); }
.chomp-fulfil-opt:focus-visible { outline: 3px solid var(--chomp-focus); outline-offset: 2px; }
.chomp-fulfil-opt.is-active { border-color: var(--chomp-primary); box-shadow: 0 0 0 3px var(--chomp-primary-soft); }
.chomp-fulfil-opt__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--chomp-primary-soft); color: var(--chomp-primary-800); }
.chomp-fulfil-opt__text { display: flex; flex-direction: column; line-height: 1.2; }
.chomp-fulfil-opt__title { font-weight: 800; }
.chomp-fulfil-opt__sub { font-size: var(--fs-xs); color: var(--chomp-muted); }
.chomp-fulfil-opt__check { margin-left: auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--chomp-primary); color: var(--chomp-ink); opacity: 0; transform: scale(.6); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring); }
.chomp-fulfil-opt.is-active .chomp-fulfil-opt__check { opacity: 1; transform: scale(1); }

/* Collapse the delivery address on pickup (target WC's stable field IDs) */
body.chomp-fulfil--pickup #billing_company_field,
body.chomp-fulfil--pickup #billing_address_1_field,
body.chomp-fulfil--pickup #billing_address_2_field,
body.chomp-fulfil--pickup #billing_city_field,
body.chomp-fulfil--pickup #billing_state_field,
body.chomp-fulfil--pickup #billing_postcode_field,
body.chomp-fulfil--pickup #billing_country_field,
body.chomp-fulfil--pickup .chomp-address-field { display: none !important; }

/* Pickup date & time picker (shown only on pickup) */
body:not(.chomp-fulfil--pickup) .chomp-pickup { display: none; }
.chomp-pickup { margin-top: var(--space-lg); padding: var(--space-lg); background: var(--chomp-primary-soft); border: 1px solid var(--chomp-mint-border); border-radius: var(--radius-lg); }
.chomp-pickup__title { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-lg); margin: 0; }
.chomp-pickup__title .icon { color: var(--chomp-primary-700); flex: none; }
.chomp-pickup__hours { margin: .2rem 0 var(--space-md); font-size: var(--fs-sm); font-weight: 700; color: var(--chomp-primary-800); }
.chomp-pickup__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 480px) { .chomp-pickup__grid { grid-template-columns: 1fr 1fr; } }
.chomp-pickup__field { margin: 0; }
.chomp-pickup__field label { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: .3rem; }
.chomp-pickup__field .required { color: var(--chomp-berry-ink); border: 0; text-decoration: none; }
.chomp-select { position: relative; display: block; }
.chomp-select select { width: 100%; min-height: 48px; padding: .6rem 2.6rem .6rem .85rem; border: 1.5px solid var(--chomp-ui-border); border-radius: var(--radius-sm); background: var(--chomp-surface); color: var(--chomp-ink); font: inherit; font-weight: 600; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; }
.chomp-select select:focus { outline: 2px solid var(--chomp-focus); outline-offset: 1px; border-color: var(--chomp-primary); }
.chomp-select .icon { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); color: var(--chomp-primary-800); pointer-events: none; }
.chomp-pickup__note { display: flex; align-items: center; gap: .4rem; margin: var(--space-md) 0 0; font-size: var(--fs-xs); color: var(--chomp-ink-2); }
.chomp-pickup__note .icon { color: var(--chomp-primary-700); flex: none; }
.chomp-pickup-confirm { margin-top: var(--space-lg); }

/* Keep the brand accent through the checkout (beat WooCommerce/Elementor blue) */
.chomp-checkout__body a:not(.button) { color: var(--chomp-primary-800); }
.woocommerce-checkout #place_order,
.woocommerce-checkout button#place_order { background: var(--chomp-primary) !important; color: var(--chomp-ink) !important; }
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout button#place_order:hover { background: var(--chomp-primary-600) !important; color: var(--chomp-ink) !important; }

/* Order review line items — each item is one full-width stacked card: thumb +
   name + price on the top row, then (for a box) its flavour list across the
   WHOLE width so a 12-cookie box can breathe instead of wrapping in a sliver.
   The old Product|Subtotal columns are gone (items colspan both); the tfoot
   totals keep their own tidy 2-col key/value. */
.woocommerce-checkout-review-order-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
/* The item cell spans both old columns (colspan) and stays a real table-cell;
   the .chomp-corev DIV inside it is the grid, so table sizing never fights it.
   tfoot totals stay a real table row with their tidy 2-col key/value. */
.woocommerce-checkout-review-order-table .cart_item { transition: opacity .18s ease; }
.woocommerce-checkout-review-order-table .cart_item.is-removing { pointer-events: none; opacity: .38; }
.woocommerce-checkout-review-order-table td.product-name { padding: 0; }
.chomp-corev {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	grid-template-areas:
		"thumb name price remove"
		"detail detail detail detail"
		"edit edit edit edit";
	align-items: center;
	column-gap: .7rem;
	row-gap: .35rem;
	padding: var(--space-md) 0;
}
.woocommerce-checkout-review-order-table .cart_item + .cart_item .chomp-corev { border-top: 1px solid var(--chomp-border); }
.chomp-corev__thumb { grid-area: thumb; }
.chomp-corev__thumb img { width: 52px; height: 52px; border-radius: var(--radius-sm); object-fit: cover; display: block; background: var(--chomp-primary-soft); }
.chomp-corev__name { grid-area: name; min-width: 0; font-weight: 600; line-height: 1.3; }
.woocommerce-checkout-review-order-table td.product-name .product-quantity { color: var(--chomp-muted); font-weight: 700; white-space: nowrap; }
.chomp-corev__price { grid-area: price; font-weight: 700; color: var(--chomp-ink); white-space: nowrap; }
.chomp-corev__remove { grid-area: remove; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--chomp-ink) !important; font-size: 1.3rem; font-weight: 400; line-height: 1; text-decoration: none; opacity: .38; transition: opacity .18s ease, background-color .18s ease, color .18s ease; }
.chomp-corev__remove:hover,
.chomp-corev__remove:focus-visible { background: var(--chomp-surface-alt); color: var(--chomp-berry, #9b2858) !important; opacity: 1; }
/* The flavour list, full width — the whole point of the change. The <dl> that
   WooCommerce emits floats dt beside dd by default; force it to stack. */
.chomp-corev__detail { grid-area: detail; min-width: 0; }
/* WooCommerce core floats dt left / dd beside it with a high-specificity rule
   (.woocommerce td.product-name dl.variation dt{float:left}); !important is the
   clean way to override vendor CSS and stack them full-width. */
.chomp-corev__detail .variation { display: block; margin: 0; }
.chomp-corev__detail .variation dt,
.chomp-corev__detail .variation dd { display: block !important; float: none !important; width: auto !important; margin: 0 !important; }
.chomp-corev__detail .variation dt { margin: 0 0 .2rem !important; font-size: var(--fs-xs); font-weight: 700; font-style: normal; color: var(--chomp-ink-2); }
.chomp-corev__detail .variation dd p { margin: 0; }
.chomp-corev__detail .chomp-bab-cart-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .05rem .9rem; margin: 0; padding: 0; list-style: none; }
.chomp-corev__detail .chomp-bab-cart-list li { font-size: var(--fs-xs); color: var(--chomp-muted); line-height: 1.55; }
.chomp-corev__edit { grid-area: edit; width: fit-content; font-size: var(--fs-xs); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Order review right rail polish */
.woocommerce-checkout #order_review_heading { font-size: var(--fs-xl); margin-bottom: var(--space-md); }
.woocommerce-checkout .woocommerce-checkout-review-order { background: transparent; border: 0; padding: 0; box-shadow: none; }
.woocommerce-checkout .shop_table { border: 0; }
.woocommerce-checkout .woocommerce-checkout-review-order-table { margin-bottom: var(--space-md); }
.woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; }
.woocommerce-checkout #customer_details .col2-set { display: block; }

/* Login / coupon toggle bars — clean, no broken WC icon-font glyph */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon { margin-bottom: var(--space-lg); }
.woocommerce-checkout .woocommerce-info { background: var(--chomp-surface-alt); border: 1px solid var(--chomp-border); border-left: 3px solid var(--chomp-primary); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); color: var(--chomp-ink-2); }
.woocommerce-checkout .woocommerce-info::before { content: none; }
.woocommerce-checkout .woocommerce-info a { color: var(--chomp-primary-800); font-weight: 700; }

/* Payment box */
.woocommerce-checkout #payment { border: 0; padding: 0; }
.woocommerce-checkout #payment ul.payment_methods { border: 1px solid var(--chomp-border); border-radius: var(--radius-md); padding: var(--space-sm); background: var(--chomp-surface); }
.woocommerce-checkout #payment ul.payment_methods li { padding: .4rem .2rem; }
.woocommerce-checkout #payment div.payment_box { background: var(--chomp-primary-soft); border-radius: var(--radius-md); font-size: var(--fs-sm); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--chomp-primary-soft); }

/* Social proof strip */
.chomp-checkout-proof { display: flex; align-items: center; gap: .5rem; margin: var(--space-md) 0; padding: var(--space-sm) var(--space-md); background: var(--chomp-surface-alt); border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: 600; }
.chomp-checkout-proof__stars { display: inline-flex; color: var(--chomp-sunny); flex: none; }
.chomp-checkout-proof__stars .icon { fill: var(--chomp-sunny); stroke: none; }

/* Thank-you page: warm review ask, tailored in PHP for returning customers. */
.chomp-thanks-review { position: relative; isolation: isolate; overflow: hidden; margin: var(--space-xl) 0 0; padding: clamp(1.6rem, 4vw, 2.5rem); border: 1px solid color-mix(in srgb, var(--chomp-primary) 38%, transparent); border-radius: var(--radius-xl); background: linear-gradient(145deg, var(--chomp-primary-soft), var(--chomp-surface) 72%); text-align: center; box-shadow: var(--shadow-sm); }
.chomp-thanks-review::before,
.chomp-thanks-review::after { content: ''; position: absolute; z-index: -1; width: 150px; height: 150px; border-radius: 50%; background: color-mix(in srgb, var(--chomp-primary) 13%, transparent); filter: blur(1px); }
.chomp-thanks-review::before { top: -92px; left: -56px; }
.chomp-thanks-review::after { right: -72px; bottom: -104px; }
.chomp-thanks-review__stars { display: flex; justify-content: center; gap: .18rem; margin-bottom: .65rem; color: var(--chomp-sunny); }
.chomp-thanks-review__stars .icon { fill: currentColor; stroke: currentColor; }
.chomp-thanks-review__eyebrow { margin: 0 0 .35rem; color: var(--chomp-primary-800); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.chomp-thanks-review h2 { max-width: 700px; margin: 0 auto .65rem; color: var(--chomp-ink); font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.2; }
.chomp-thanks-review__copy { max-width: 660px; margin: 0 auto var(--space-lg); color: var(--chomp-ink-2); font-size: var(--fs-md); line-height: 1.65; }
.chomp-thanks-review__actions { display: flex; justify-content: center; align-items: stretch; gap: .7rem; flex-wrap: wrap; }
.chomp-thanks-review__button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-width: min(100%, 220px); min-height: 48px; padding: .75rem 1.15rem; border-radius: 999px; font-weight: 800; text-decoration: none; }
.chomp-thanks-review__button--google { border: 1px solid var(--chomp-border-2); background: #fff; color: var(--chomp-ink) !important; }
.chomp-thanks-review__button--google:hover { border-color: var(--chomp-primary); background: #fff; transform: translateY(-1px); }
.chomp-thanks-review__button--google .review-card__google { width: 19px; height: 19px; flex: none; }
.chomp-thanks-review__button--facebook { border: 1px solid #1877f2; background: #1877f2; color: #fff !important; }
.chomp-thanks-review__button--facebook:hover { border-color: #0f65d8; background: #0f65d8; transform: translateY(-1px); }
.chomp-thanks-review__again { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; margin-top: var(--space-md); color: var(--chomp-primary-800); font-size: var(--fs-sm); font-weight: 750; text-underline-offset: 3px; }

@media (max-width: 560px) {
	.chomp-thanks-review__actions { display: grid; grid-template-columns: 1fr; }
	.chomp-thanks-review__button { width: 100%; }
}

/* Add-on upsell inside order review */
.chomp-upsell-row td { padding: 0 !important; }
.chomp-upsell { padding: var(--space-md) 0; border-top: 1px dashed var(--chomp-border-2); }
.chomp-upsell__title { font-weight: 800; font-size: var(--fs-sm); margin: 0 0 .5rem; }
.chomp-upsell__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.chomp-upsell__item { display: flex; align-items: center; gap: var(--space-sm); }
.chomp-upsell__img { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; }
.chomp-upsell__info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.chomp-upsell__name { font-weight: 700; font-size: var(--fs-sm); }
.chomp-upsell__price { font-size: var(--fs-xs); color: var(--chomp-muted); }
.chomp-upsell__price del { opacity: .6; }
.chomp-upsell__add { flex: none; display: inline-flex; align-items: center; gap: .25rem; padding: .35rem .8rem; border-radius: var(--radius-pill); border: 1.5px solid var(--chomp-ui-border); background: var(--chomp-surface); color: var(--chomp-primary-800); font-weight: 700; font-size: var(--fs-xs); cursor: pointer; }
.chomp-upsell__add:hover { background: var(--chomp-primary-soft); }
.chomp-upsell__add.is-loading { opacity: .6; pointer-events: none; }
.chomp-upsell__add.is-added { background: var(--chomp-primary); border-color: var(--chomp-primary); }

/* Trust badges under the place-order button */
.woocommerce-checkout #payment .place-order { overflow: hidden; } /* contain the floated button */
.woocommerce-checkout #place_order { float: none !important; display: block; width: 100%; margin: 0; }
.chomp-trust { clear: both; width: 100%; margin-top: var(--space-md); text-align: center; display: grid; gap: .5rem; }
.chomp-trust__secure { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; font-size: var(--fs-sm); font-weight: 600; color: var(--chomp-ink-2); margin: 0; }
.chomp-trust__secure .icon { color: var(--chomp-success); }
.chomp-trust__cards { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; }
.chomp-paybadge { display: inline-grid; place-items: center; min-width: 42px; height: 26px; padding: 0 .4rem; border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.chomp-trust__etransfer { font-size: var(--fs-xs); color: var(--chomp-muted); margin: 0; }

/* Give the whole checkout more air */
@media (min-width: 900px) {
	.chomp-checkout__body .woocommerce-checkout form.checkout { gap: var(--space-3xl); }
}

/* Free-cookie notice (cart + checkout) — explains why the order went to pickup.
   Lives here, not in build-a-box.css, because that only loads on the builder. */
.chomp-bonus-notice { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.chomp-bonus-notice .icon { flex: none; color: var(--chomp-primary-700); }
.chomp-bonus-notice__text { display: flex; flex-direction: column; line-height: 1.3; }
.chomp-bonus-notice__text strong { color: var(--chomp-primary-800); }

/* PDP: the embedded Build-A-Box band ------------------------------------------
   No background of its own on purpose: it inherits the page cream so it reads as
   one stretch with .chomp-pdp-top above it, and .chomp-pdp-story's mint stays the
   first colour break on the page. */
.chomp-pdp-builder { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4.5rem); }
.chomp-pdp-builder .section-head { margin-bottom: var(--space-lg); }
.chomp-pdp-builder__name { color: var(--chomp-primary-700); }
.chomp-pdp-builder .bab { padding-block: 0; }