/** Shopify CDN: Minification failed

Line 772:0 Unexpected "}"

**/
/*
 * ac-onepage.css. Auntie Chia Phase 1 one-page store
 * Design tokens lifted from 20260829_AC_SinglePage_Mockup_Ver1.html (approved by Carl).
 *
 * Mobile-first. The mockup is a 390px phone frame; on a real storefront the sections run
 * full-bleed and the CONTENT is capped at --ac-col so the layout does not stretch on desktop.
 * Everything is namespaced .ac-* so it cannot leak into the rest of the AC theme.
 */

/* ============================================================================
   COLOUR SYSTEM - deliberately small, modelled on ladybossfoodie.com
   ----------------------------------------------------------------------------
   LBF gets its clarity from restraint: white is the default page, cream marks a
   band, and colour appears only where it means something. The first AC build put
   cream behind EVERY section and a red kicker on top of every heading, so nothing
   separated and nothing stood out. The rules now are:

     PAPER  (white)  the default. Reading sections.
     CREAM           marks a zone where she is meant to ACT or dig in.
                     Never two cream sections in a row.
     RED             the divider strip, the CTA, the price, the selected state.
                     Never a heading, never a kicker.
     GREEN           money good news only: savings and free shipping.
     GOLD            the "most popular" badge and review stars. Nothing else.
     INK-DARK        exactly one band on the page, as a punchline.

   Section backgrounds are applied with .ac-bg-* below, not per-section, so the
   whole page rhythm can be read in one place.
   ========================================================================== */
.ac-section,
.ac-shop {
  --ac-red: #b92b27;
  --ac-red-dark: #8e1f1c;
  --ac-gold: #f3b62b;
  --ac-star: #e0a11a;
  --ac-cream: #fff8ee;
  --ac-cream-deep: #fdf1de;
  --ac-paper: #ffffff;
  --ac-ink: #2b2118;
  --ac-ink-soft: #6b5b4e;
  --ac-ink-mute: #8a7869;
  --ac-line: #eadfce;
  --ac-green: #1d7a46;
  --ac-shadow: 0 10px 28px rgba(43, 33, 24, 0.1);
  --ac-shadow-sm: 0 2px 8px rgba(43, 33, 24, 0.06);
  --ac-col: 520px;
  /* Carl, 2026-09-02: cap every section at one width so the page has a single
     edge. 1200px is not arbitrary, it is what Dawn's own .page-width uses for the
     header and the footer, so AC sections now line up with the chrome instead of
     running past it. */
  --ac-max: 1200px;
  --ac-font-disp: 'Baloo 2', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ac-font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Section background utilities. The homepage alternates paper / cream so that no
   two neighbours share a background and each section reads as its own block. */
.ac-bg-paper { background: var(--ac-paper); }
.ac-bg-cream { background: var(--ac-cream); }
.ac-bg-ink   { background: var(--ac-ink); color: #fff; }

/* Consistent vertical rhythm. One value, so section spacing never drifts. */
.ac-pad { padding: 34px 0; }
.ac-pad--tight { padding: 22px 0; }

.ac-wrap {
  max-width: var(--ac-col);
  margin-inline: auto;
  padding-inline: 16px;
}

.ac-section { font-family: var(--ac-font-body); color: var(--ac-ink); line-height: 1.55; }
.ac-section h1, .ac-section h2, .ac-section h3 { font-family: var(--ac-font-disp); }
body.ac-noscroll { overflow: hidden; }

/* Kickers are labels, not accents. Muted ink keeps red meaningful further down. */
.ac-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ac-ink-mute); text-align: center; margin: 0;
}
.ac-bg-ink .ac-kicker { color: var(--ac-gold); }
.ac-h2 { font-size: 23px; line-height: 1.22; text-align: center; margin: 5px 0 18px; }
.ac-h2--left { text-align: left; }
.ac-sub {
  margin: -10px 0 18px; text-align: center;
  font-size: 13.5px; font-weight: 600; color: var(--ac-ink-soft); line-height: 1.5;
}

/* ---------------- shop block ---------------- */
/* Bottom padding only has to clear the sticky ATC bar (65px) plus breathing room.
   130px was sized for a taller 3-tier bar and left a visible dead band. */
/* Background comes from the .ac-bg-* class on the section, not from here, so the
   same block can sit on cream on the homepage and on paper on a product page. */
.ac-shop { padding: 30px 0 92px; scroll-margin-top: 60px; }

.ac-steplbl {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ac-font-disp); font-weight: 700; font-size: 16px; margin: 6px 2px 10px;
}
.ac-steplbl--2 { margin-top: 22px; }
.ac-steplbl i {
  font-style: normal; background: var(--ac-ink); color: #fff; border-radius: 999px;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex: none;
}

/* flavour cards */
.ac-flavours { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ac-flav {
  background: var(--ac-paper); border: 2.5px solid var(--ac-line); border-radius: 16px;
  padding: 12px 10px; text-align: center; cursor: pointer; position: relative;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font: inherit; color: inherit;
}
.ac-flav:focus-visible { outline: 3px solid var(--ac-gold); outline-offset: 2px; }
.ac-flav.is-sel { border-color: var(--ac-red); background: #fff4ea; box-shadow: var(--ac-shadow); }
.ac-flav.is-sel::before {
  content: '✓'; position: absolute; top: -9px; right: -6px; background: var(--ac-red);
  color: #fff; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
}
.ac-flav.is-unavailable { opacity: 0.5; cursor: not-allowed; }
.ac-flav__pic { display: block; width: 100%; }
.ac-flav__pic img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; display: block; }
.ac-flav__pic--empty { display: block; aspect-ratio: 1/1; border-radius: 10px; background: #f3e6cf; }
.ac-flav__name { font-family: var(--ac-font-disp); font-weight: 700; font-size: 14.5px; line-height: 1.25; margin-top: 6px; }
.ac-flav__desc { font-size: 11.5px; color: var(--ac-ink-soft); font-weight: 600; min-height: 30px; }
.ac-flav__spice {
  display: inline-block; font-size: 10px; font-weight: 800; background: #fdebd2;
  color: #9a5b00; border-radius: 999px; padding: 2px 8px; margin-top: 6px;
}
.ac-flav__from { margin-top: 7px; font-size: 12px; font-weight: 800; color: var(--ac-green); }

/* "what's inside" openers, aligned under the two cards */
.ac-insidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.ac-inside-open {
  background: none; border: none; font: inherit; font-size: 11px; font-weight: 800;
  color: var(--ac-red); text-decoration: underline; cursor: pointer; padding: 4px;
}

/* tier ladder */
.ac-tiers { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.ac-tier {
  background: var(--ac-paper); border: 2.5px solid var(--ac-line); border-radius: 16px;
  padding: 13px 14px; display: flex; align-items: center; gap: 12px; cursor: pointer;
  position: relative; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  font: inherit; color: inherit; text-align: left; width: 100%;
}
.ac-tier:focus-visible { outline: 3px solid var(--ac-gold); outline-offset: 2px; }
.ac-tier.is-sel { border-color: var(--ac-red); background: #fff4ea; box-shadow: var(--ac-shadow); }
.ac-tier.is-unavailable { opacity: 0.5; cursor: not-allowed; }
.ac-tier__radio { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid #cbb89b; flex: none; }
.ac-tier.is-sel .ac-tier__radio { border-color: var(--ac-red); background: radial-gradient(circle, var(--ac-red) 0 45%, transparent 50%); }
.ac-tier__mid { flex: 1; min-width: 0; display: block; }
.ac-tier__name { font-family: var(--ac-font-disp); font-weight: 700; font-size: 15.5px; display: block; }
.ac-tier__tot { font-size: 11.5px; color: var(--ac-ink-soft); font-weight: 700; display: block; }
.ac-tier__save { font-size: 11px; font-weight: 800; color: var(--ac-green); display: block; }
.ac-tier__was { color: #a2907e; text-decoration-thickness: 1.5px; margin-left: 4px; }

/* The store also runs an app-injected sticky add-to-cart. Where our own sticky bar is live
   the two stack and disagree (the app offers whichever variant Shopify picked, not the tier
   she chose), so ours wins on those pages only. Every other page is untouched, and removing
   this block restores the app's bar everywhere. */
body.ac-has-atc #bundle-sticky_add_to_cart,
body.ac-has-atc .Vtl-StickyAddToCart { display: none !important; }
.ac-tier__per { text-align: right; flex: none; }
.ac-tier__per b { font-family: var(--ac-font-disp); font-size: 19px; color: var(--ac-red); display: block; }
.ac-tier__per span { display: block; font-size: 10px; font-weight: 800; color: var(--ac-ink-soft); letter-spacing: 0.04em; }

.ac-badge {
  position: absolute; top: -10px; left: 14px; font-size: 10px; font-weight: 800;
  letter-spacing: 0.04em; border-radius: 999px; padding: 3px 10px; white-space: nowrap;
  max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis;
}
.ac-badge--pop { background: var(--ac-gold); color: #5a3e00; }
.ac-badge--val { background: var(--ac-green); color: #fff; }

.ac-setup {
  margin-top: 16px; background: #fff3d6; border: 1.5px dashed #c99b2e; color: #6b5320;
  font-size: 12.5px; font-weight: 700; border-radius: 10px; padding: 10px 12px; text-align: center;
}

/* ---------------- sticky ATC ---------------- */
.ac-atc {
  position: fixed; bottom: 0; left: 0; right: 0; background: var(--ac-paper);
  border-top: 1.5px solid var(--ac-line); box-shadow: 0 -10px 30px rgba(43, 33, 24, 0.14);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px; z-index: 55;
}
.ac-atc__info { flex: 1; min-width: 0; }
/* At 375px the info column is ~215px wide. Line 2 (total + per-bowl + shipping status) needs
   ~324px, so it MUST be allowed to wrap - ellipsing it hid the free-shipping status, which is
   the single most persuasive thing in the bar. Line 1 is trimmed to fit on one line instead. */
.ac-atc__l1 { font-weight: 800; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-atc__l2 { font-size: 11px; line-height: 1.35; color: var(--ac-ink-soft); font-weight: 700; white-space: normal; }
.ac-atc__l2 b.is-free { color: var(--ac-green); }
.ac-atc__l2 b.is-paid { color: var(--ac-ink-soft); }
.ac-atc__btn {
  background: var(--ac-red); color: #fff; border: none; border-radius: 999px;
  font-family: var(--ac-font-disp); font-weight: 700; font-size: 15px;
  padding: 12px 20px; cursor: pointer; white-space: nowrap; flex: none; min-height: 44px;
}
.ac-atc__btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------------- cross-sell toast ---------------- */
.ac-toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 88px;
  background: var(--ac-green); color: #fff; border-radius: 14px; padding: 14px 16px;
  box-shadow: var(--ac-shadow); z-index: 70; width: min(420px, calc(100vw - 24px)); text-align: center;
}
.ac-toast__msg { font-weight: 800; font-size: 13px; margin: 0 0 10px; }
.ac-toast__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ac-toast__add {
  background: #fff; color: var(--ac-green); border: none; border-radius: 999px;
  font: inherit; font-weight: 800; font-size: 12.5px; padding: 9px 14px; cursor: pointer; min-height: 40px;
}
.ac-toast__add[disabled] { opacity: 0.6; cursor: wait; }
.ac-toast__cart { color: #fff; font-weight: 800; font-size: 12.5px; align-self: center; padding: 9px 6px; }

/* ---------------- "what's inside" sheet ---------------- */
.ac-sheet { position: fixed; inset: 0; z-index: 90; }
.ac-sheet__scrim { position: absolute; inset: 0; background: rgba(43, 33, 24, 0.55); }
.ac-sheet__panel {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  width: min(520px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--ac-cream); border-radius: 20px 20px 0 0; padding: 20px 18px 32px;
}
.ac-sheet__x {
  position: sticky; top: 0; float: right; background: var(--ac-ink); color: #fff; border: none;
  width: 34px; height: 34px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer;
}
.ac-sheet__title { font-size: 19px; margin: 0 0 10px; }
.ac-sheet__rte { font-size: 13.5px; color: var(--ac-ink-soft); font-weight: 600; }
.ac-sheet__rte p { margin: 0 0 8px; }
.ac-sheet__fig { margin: 14px 0 0; }
.ac-sheet__fig img { width: 100%; height: auto; border-radius: 12px; display: block; }
.ac-sheet__fig figcaption { font-size: 11.5px; font-weight: 800; color: var(--ac-ink-soft); margin-top: 6px; text-align: center; }

/* ---------------- shared content sections ---------------- */

/* ============================================================================
   AUTO-SCROLLING MARQUEES
   Two copies of the same run sit side by side inside a max-content track. The
   track slides 0 to -50%, which is exactly one copy, so copy two lands where
   copy one started and the loop is invisible. No JS, no clone-on-load jump.
   Anyone who asks for reduced motion gets a static, readable strip instead.
   ========================================================================== */
/* NOT sticky. The theme header is already sticky at top:0, so a second sticky strip at the
   same offset ends up sitting over the page content as she scrolls. This is a divider band
   under the hero, and a divider only has to be where it was put. */
.ac-uspbar {
  background: var(--ac-red); color: #ffe9c9;
  position: relative; z-index: 1;
  overflow: hidden; padding: 9px 0;
}
/* Shift is ONE RUN, expressed as a share of the track, so the loop stays seamless
   whatever number of runs is rendered. A hardcoded -50% only works when there are
   exactly two, and two was never enough to fill a desktop. */
.ac-uspbar__track {
  display: flex; width: max-content;
  animation: ac-marquee-runs var(--ac-marquee-dur, 40s) linear infinite;
}
.ac-uspbar__run { display: flex; }
.ac-uspbar__item {
  white-space: nowrap; padding: 0 22px;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
/* A separating dot between items, drawn rather than typed so the copy stays clean. */
.ac-uspbar__item::after {
  content: "\2022"; margin-left: 22px; opacity: .5;
}
.ac-uspbar:hover .ac-uspbar__track,
.ac-uspbar:focus-within .ac-uspbar__track { animation-play-state: paused; }

@keyframes ac-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* One run out of --ac-runs. calc() inside translateX percentages is not reliable across
   browsers, so the distance is expressed against the track's own width using a variable
   the section sets and the script keeps correct. */
@keyframes ac-marquee-runs {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / var(--ac-runs, 2))); }
}

@media (prefers-reduced-motion: reduce) {
  .ac-uspbar__track { animation: none; }
  .ac-uspbar { overflow-x: auto; scrollbar-width: none; }
  .ac-uspbar::-webkit-scrollbar { display: none; }
}

.ac-hero { padding: 26px 20px 30px; text-align: center; background: radial-gradient(120% 90% at 50% 0%, #ffefd2 0%, var(--ac-cream) 70%); }
.ac-hero__media { max-width: 320px; margin: 0 auto; }
.ac-hero__media img { width: 100%; height: auto; border-radius: 50%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.ac-hero h1 { font-size: 27px; line-height: 1.18; margin: 18px 6px 8px; }
.ac-hero h1 b { color: var(--ac-red); }
.ac-hero__sub { font-size: 14px; color: var(--ac-ink-soft); font-weight: 700; }
.ac-hero__stars { color: #d89000; letter-spacing: 2px; }

.ac-cta {
  display: inline-block; margin-top: 16px; background: var(--ac-red); color: #fff;
  font-family: var(--ac-font-disp); font-weight: 700; font-size: 17px; padding: 14px 30px;
  border-radius: 999px; border: none; text-decoration: none;
  box-shadow: 0 8px 20px rgba(185, 43, 39, 0.35); min-height: 48px;
}
.ac-cta:active { transform: translateY(1px); }

.ac-proofs { padding: 30px 0; }
.ac-proof { background: var(--ac-paper); border-radius: 20px; padding: 22px 18px; box-shadow: var(--ac-shadow); }
.ac-bg-paper .ac-proof { background: var(--ac-cream); box-shadow: none; border: 1.5px solid var(--ac-line); }
.ac-proof + .ac-proof { margin-top: 14px; }
.ac-proof__quote { font-family: var(--ac-font-disp); font-size: 19px; line-height: 1.3; }
.ac-proof__quote em { color: var(--ac-red); font-style: normal; }
.ac-proof__fact { margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--ac-ink-soft); }
.ac-proof__media { margin-top: 12px; }
.ac-proof__media img { width: 100%; height: auto; border-radius: 12px; display: block; }
/* Certificates and logos are not photos - cap them so they do not run full-bleed. */
.ac-proof__media--cap { display: flex; justify-content: center; }
.ac-proof__media--cap img { width: auto; max-width: 100%; max-height: var(--ac-proof-imgh, 220px); }
.ac-proof__media video { width: 100%; height: auto; border-radius: 12px; display: block; }
.ac-ph {
  margin-top: 12px; border-radius: 12px;
  background: repeating-linear-gradient(45deg, #f3e6cf 0 12px, #eeddbe 12px 24px);
  color: #8a6c3c; font-size: 11px; font-weight: 800; letter-spacing: 0.05em;
  text-align: center; padding: 26px 10px; border: 1.5px dashed #c9a96a;
}
.ac-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ac-chip { background: #fbf3e4; border: 1.5px solid var(--ac-line); border-radius: 999px; font-size: 11px; font-weight: 800; padding: 5px 11px; color: #6b5320; }

.ac-reviews { background: var(--ac-cream); padding: 0 0 30px; }
.ac-rev { background: var(--ac-paper); border: 1.5px solid var(--ac-line); border-radius: 14px; padding: 12px 13px; margin-top: 10px; box-shadow: 0 4px 12px rgba(43, 33, 24, 0.06); }
.ac-rev img { width: 100%; height: auto; border-radius: 10px; display: block; }
.ac-rev__who { display: flex; justify-content: space-between; font-weight: 800; font-size: 11.5px; color: var(--ac-ink-soft); margin-bottom: 6px; }
.ac-rev__st { color: #d89000; letter-spacing: 1.5px; }

.ac-math { background: var(--ac-ink); color: #f7ead3; border-radius: 20px; padding: 22px 18px; text-align: center; }
/* Inside an already-dark section the card would be invisible, so it drops the box
   and lets the section carry the colour. */
.ac-bg-ink .ac-math { background: none; padding: 0; }
.ac-bg-ink .ac-h2 { color: #fff; }
.ac-bg-ink .ac-math__fine { color: #cdbba0; }
.ac-math .ac-kicker { color: var(--ac-gold); }
.ac-math .ac-h2 { color: #fff; }
.ac-math__vs { display: flex; justify-content: center; align-items: stretch; gap: 10px; margin-top: 14px; }
.ac-math__col { background: rgba(255, 255, 255, 0.07); border-radius: 14px; padding: 12px 10px; flex: 1; }
.ac-math__col b { font-family: var(--ac-font-disp); font-size: 21px; display: block; }
.ac-math__col--us b { color: var(--ac-gold); }
.ac-math__col span { font-size: 11px; font-weight: 700; opacity: 0.8; }
.ac-math__fine { font-size: 10.5px; opacity: 0.65; margin-top: 12px; }

.ac-faq { padding: 30px 0; }
.ac-faq details { background: var(--ac-paper); border: 1.5px solid var(--ac-line); border-radius: 14px; margin-top: 8px; overflow: hidden; }
.ac-bg-paper .ac-faq details, .ac-faq.ac-bg-paper details { background: var(--ac-cream); }
.ac-faq summary { list-style: none; cursor: pointer; padding: 13px 15px; font-weight: 800; font-size: 13.5px; display: flex; justify-content: space-between; gap: 10px; min-height: 44px; align-items: center; }
.ac-faq summary::-webkit-details-marker { display: none; }
.ac-faq summary::after { content: '+'; font-family: var(--ac-font-disp); color: var(--ac-red); font-size: 18px; }
.ac-faq details[open] summary::after { content: '–'; }
.ac-faq details .ac-faq__a { padding: 0 15px 13px; font-size: 13px; color: var(--ac-ink-soft); font-weight: 600; }

.ac-finalcta { text-align: center; padding: 26px 16px 34px; }

@media (prefers-reduced-motion: reduce) {
  .ac-flav, .ac-tier, .ac-cta { transition: none; }
}

/* ============================================================================
   HERO  (format ported from LBF lbf-hero-2026)
   Mobile: photo full width, copy panel underneath on cream.
   750px+: photo holds the right, copy panel sits on the left, one cream blend
   joins them. Layering follows the LBF notes. The blend is on the photo
   container only, and nothing wrapping the image carries a z-index.
   ========================================================================== */
/* The theme puts 20px of side padding on section children. The hero is the one thing on
   the page that must run edge to edge, so it takes it back. Same full-bleed treatment
   LBF's hero gets. */
.ac-hero.ac-hero { position: relative; background: var(--ac-cream); padding-inline: 0; }

.ac-hero__photo { position: relative; }
.ac-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .55s ease; }
.ac-hero__slide.is-active { position: relative; opacity: 1; }
.ac-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-hero__ph {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px; background: var(--ac-cream-deep);
  color: var(--ac-ink-mute); font-weight: 700; font-size: 13px;
}

.ac-hero__badge {
  position: absolute; right: 14px; bottom: 16px; z-index: 5;
  background: var(--ac-red); color: #fff; border-radius: 50%;
  width: 108px; height: 108px; padding: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; transform: rotate(-8deg);
  box-shadow: 0 8px 20px rgba(43, 33, 24, .3);
}
.ac-hero__badge-1 { font-family: var(--ac-font-disp); font-weight: 800; font-size: 20px; line-height: 1; }
.ac-hero__badge-2 { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; margin-top: 3px; line-height: 1.2; }

/* Segmented progress nav. Only the active segment is filled. */
.ac-hero__nav {
  position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 6;
  display: flex; gap: 6px;
}
.ac-hero__seg {
  flex: 1; height: 4px; border: 0; padding: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 248, 238, .45);
}
.ac-hero__seg.is-on { background: var(--ac-cream); }
.ac-hero__seg:focus-visible { outline: 2px solid var(--ac-gold); outline-offset: 3px; }

.ac-hero__panel {
  background: var(--ac-cream);
  padding: 22px 22px 30px;
  max-width: var(--ac-col); margin-inline: auto;
  text-align: center;
}
.ac-hero__eyebrow {
  margin: 0 0 8px; font-size: 11px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ac-ink-mute);
}
.ac-hero__h1 {
  font-family: var(--ac-font-disp); font-size: 30px; line-height: 1.16;
  margin: 0; color: var(--ac-ink);
}
.ac-hero__accent { font-style: normal; color: var(--ac-red); }
.ac-hero__sub {
  margin: 10px 0 0; font-size: 14.5px; font-weight: 600;
  color: var(--ac-ink-soft); line-height: 1.5;
}
.ac-hero__cta { margin-top: 18px; }
.ac-hero__note { margin: 10px 0 0; font-size: 12px; font-weight: 700; color: var(--ac-ink-mute); }

@media (min-width: 750px) {
  .ac-hero {
    display: flex; align-items: center; overflow: hidden;
    min-height: min(var(--ac-hero-h, 560px), calc(100svh - 120px));
  }
  .ac-hero__photo {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: var(--ac-hero-photo-w, 62%);
  }
  /* ONE blend, on the container. Per-slide gradients double up mid-fade. */
  .ac-hero__photo::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 34%;
    background: linear-gradient(90deg, var(--ac-cream) 0%, rgba(255, 248, 238, .65) 45%, transparent 100%);
    z-index: 1; pointer-events: none;
  }
  .ac-hero__slide,
  .ac-hero__slide.is-active { position: absolute; inset: 0; }
  .ac-hero__panel {
    position: relative; z-index: 1;
    width: calc(100% - var(--ac-hero-photo-w, 62%) + 6%);
    background: none; text-align: left; margin-inline: 0;
    padding: 40px 24px 40px 40px;
  }
  .ac-hero__h1 { font-size: 40px; }
  .ac-hero__badge { width: 132px; height: 132px; right: 28px; bottom: 46px; }
  .ac-hero__badge-1 { font-size: 25px; }
  .ac-hero__nav { left: auto; right: 24px; width: min(420px, 46%); bottom: 18px; }
}

/* ============================================================================
   SOCIAL PROOF BAND  (carousel behaviour ported from LBF lbf-testimonials)
   ========================================================================== */
.ac-proofband { padding: 30px 0 34px; }

.ac-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 0 0 20px; text-align: center;
}
.ac-stat b {
  display: block; font-family: var(--ac-font-disp); font-size: 22px;
  line-height: 1.1; color: var(--ac-ink);
}
.ac-stat span { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 700; color: var(--ac-ink-soft); }
.ac-stat + .ac-stat { border-left: 1.5px solid var(--ac-line); }
.ac-stat__rating { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ac-stat__stars { display: inline-flex; gap: 1px; }

.ac-star { width: 13px; height: 13px; fill: var(--ac-star); flex: none; }
.ac-star.is-empty { fill: #dfd2be; }

.ac-revs { position: relative; }
.ac-revs__track {
  display: flex; gap: 12px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px;
}
.ac-revs__track::-webkit-scrollbar { display: none; }

.ac-rev2 {
  flex: 0 0 88%; scroll-snap-align: center;
  background: var(--ac-paper); border: 1.5px solid var(--ac-line);
  border-radius: 16px; padding: 15px 16px; box-shadow: var(--ac-shadow-sm);
}
.ac-bg-paper .ac-rev2 { background: var(--ac-cream); }
.ac-rev2__stars { display: flex; gap: 1px; margin-bottom: 7px; }
.ac-rev2__title { margin: 0 0 5px; font-family: var(--ac-font-disp); font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.ac-rev2__quote { margin: 0; font-size: 13px; font-weight: 600; color: var(--ac-ink-soft); line-height: 1.55; }
.ac-rev2__who { display: flex; align-items: center; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
.ac-rev2__name { font-weight: 800; font-size: 12.5px; color: var(--ac-ink); }
.ac-rev2__ok {
  font-size: 10px; font-weight: 800; color: var(--ac-green);
  background: #e8f4ec; border-radius: 999px; padding: 3px 8px;
}
.ac-rev2__meta { display: block; margin-top: 5px; font-size: 11px; font-weight: 600; color: var(--ac-ink-mute); }

.ac-revs__dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.ac-revs__dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: #ded0ba; cursor: pointer; transition: background .18s, transform .18s;
}
.ac-revs__dot.is-on { background: var(--ac-red); transform: scale(1.3); }
.ac-revs__dot:focus-visible { outline: 2px solid var(--ac-gold); outline-offset: 3px; }

.ac-proofband__note { margin: 14px 0 0; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--ac-ink-mute); }

@media (min-width: 750px) {
  .ac-stats { gap: 20px; margin-bottom: 26px; }
  .ac-stat b { font-size: 30px; }
  .ac-rev2 { flex: 0 0 calc((100% - 24px) / 3); }
}

/* ============================================================================
   USP CARDS  (ported from LBF scrollable-usps)
   ========================================================================== */
.ac-uspcards { padding: 30px 0 34px; }
.ac-uspcards__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr);
  gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px;
}
.ac-uspcards__list::-webkit-scrollbar { display: none; }

.ac-uspcard {
  scroll-snap-align: start;
  background: var(--ac-cream); border: 1.5px solid var(--ac-line);
  border-radius: 16px; padding: 16px 15px;
  display: flex; flex-direction: column; gap: 7px;
}
.ac-bg-cream .ac-uspcard { background: var(--ac-paper); }
.ac-uspcard__ico { display: flex; align-items: center; height: 56px; }
.ac-uspcard__ico img { width: 56px; height: 56px; object-fit: contain; display: block; }
.ac-uspcard__emoji { font-size: 34px; line-height: 1; }
.ac-uspcard__h { margin: 0; font-family: var(--ac-font-disp); font-weight: 700; font-size: 15.5px; line-height: 1.25; }
.ac-uspcard__t { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ac-ink-soft); line-height: 1.5; }

@media (min-width: 750px) {
  .ac-uspcards__list {
    overflow: visible; grid-auto-flow: row;
    grid-template-columns: repeat(var(--ac-uspcols, 4), minmax(0, 1fr));
  }
}

/* Screen-reader-only text. The store app CSS hides EMPTY elements, so buttons
   that would otherwise be empty (hero segments, carousel dots) carry a label. */
.ac-vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Auto-scrolling variant of the USP card rail.

   THE RAIL MUST CLIP. A marquee track is deliberately wider than the screen: with
   four cards it measured 2108px against a 375px phone. Nothing was clipping it, so
   the whole PAGE grew to 2124px wide and could be swiped sideways into a stretch of
   empty background with two cards adrift in it. Any auto-scrolling row needs a
   clipping ancestor, and it has to be the rail rather than the animated track
   itself, because clipping the track would cut the animation. */
.ac-uspcards--auto { overflow-x: clip; }
.ac-uspcards--auto .ac-uspcards__rail {
  overflow: hidden;
  /* Full bleed: a strip that runs off both edges reads as continuous motion,
     where one inset inside the page margins reads as a broken carousel. */
  margin-inline: -16px;
}
.ac-uspcards--auto .ac-uspcards__list {
  display: flex; width: max-content; overflow: visible;
  animation: ac-marquee var(--ac-marquee-dur, 40s) linear infinite;
}
.ac-uspcards--auto .ac-uspcards__run { display: flex; gap: 12px; padding-right: 12px; }
.ac-uspcards--auto .ac-uspcard { width: 250px; flex: none; }
.ac-uspcards--auto:hover .ac-uspcards__list,
.ac-uspcards--auto:focus-within .ac-uspcards__list,
.ac-uspcards--auto.is-paused .ac-uspcards__list { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .ac-uspcards--auto .ac-uspcards__list { animation: none; overflow-x: auto; }
}

/* ============================================================================
   PROTEIN BAND
   The one number that separates this from every other instant noodle, set as
   large as the layout will carry. Everything else in the band is support.
   ========================================================================== */
.ac-protein { padding: 38px 0 40px; text-align: center; }

.ac-protein__hero { display: flex; flex-direction: column; align-items: center; margin-top: 6px; }
.ac-protein__num {
  font-family: var(--ac-font-disp);
  font-weight: 800;
  font-size: clamp(72px, 26vw, 132px);
  line-height: .88;
  letter-spacing: -0.03em;
  color: var(--ac-gold);
}
.ac-protein__lab {
  margin-top: 6px;
  font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #e9d9bd;
}
.ac-bg-cream .ac-protein__lab,
.ac-bg-paper .ac-protein__lab { color: var(--ac-ink-soft); }
.ac-bg-cream .ac-protein__num,
.ac-bg-paper .ac-protein__num { color: var(--ac-red); }

.ac-protein__h { margin-top: 20px; }
.ac-bg-ink .ac-protein__h { color: #fff; }

.ac-protein__body {
  margin: 0 auto; max-width: 34em;
  font-size: 14px; font-weight: 600; line-height: 1.6; color: #d9c8ac;
}
.ac-bg-cream .ac-protein__body,
.ac-bg-paper .ac-protein__body { color: var(--ac-ink-soft); }

.ac-protein__facts {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.ac-protein__facts li { padding: 0 4px; }
.ac-protein__facts b {
  display: block; font-family: var(--ac-font-disp); font-size: 21px; line-height: 1.1; color: #fff;
}
.ac-bg-cream .ac-protein__facts b,
.ac-bg-paper .ac-protein__facts b { color: var(--ac-ink); }
.ac-protein__facts span {
  display: block; margin-top: 4px;
  font-size: 11.5px; font-weight: 700; line-height: 1.35; color: #bda98d;
}
.ac-bg-cream .ac-protein__facts span,
.ac-bg-paper .ac-protein__facts span { color: var(--ac-ink-soft); }
.ac-protein__facts li + li { border-left: 1px solid rgba(234, 223, 206, .2); }
.ac-bg-cream .ac-protein__facts li + li,
.ac-bg-paper .ac-protein__facts li + li { border-left-color: var(--ac-line); }

.ac-protein__fig { margin: 24px 0 0; }
.ac-protein__fig img { width: 100%; height: auto; display: block; border-radius: 14px; }
.ac-protein__fig figcaption {
  margin-top: 8px; font-size: 11.5px; font-weight: 700; color: #bda98d;
}
.ac-bg-cream .ac-protein__fig figcaption,
.ac-bg-paper .ac-protein__fig figcaption { color: var(--ac-ink-mute); }

.ac-protein__note {
  margin: 18px 0 0; font-size: 11.5px; font-weight: 600; line-height: 1.5; color: #a8977e;
}
.ac-bg-cream .ac-protein__note,
.ac-bg-paper .ac-protein__note { color: var(--ac-ink-mute); }

.ac-protein__cta { margin-top: 22px; }
.ac-bg-ink .ac-protein__cta { background: var(--ac-gold); color: #4a3200; }

@media (min-width: 750px) {
  .ac-protein .ac-wrap { max-width: 820px; }
  .ac-protein__facts { gap: 24px; margin-top: 30px; }
  .ac-protein__facts b { font-size: 26px; }
}

/* ============================================================================
   USP CARDS, PHOTO VERSION
   Carl, 2026-08-30: photographs instead of icons, and no auto-scroll.
   Static grid is the default now. The auto-scroll rules further up still exist
   for the .ac-uspcards--auto variant, but nothing switches it on.
   ========================================================================== */
.ac-uspcard { padding: 0 0 16px; overflow: hidden; gap: 0; }
.ac-uspcard__pic { display: block; }
.ac-uspcard__pic img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.ac-uspcard__h { margin: 14px 15px 0; }
.ac-uspcard__t { margin: 6px 15px 0; }

/* On mobile the rail is a swipe carousel, so cards need a readable width and the
   row has to bleed to both edges or the last card looks clipped by accident. */
@media (max-width: 749px) {
  .ac-uspcards__rail { margin-inline: -16px; padding-inline: 16px; overflow-x: auto; scrollbar-width: none; }
  .ac-uspcards__rail::-webkit-scrollbar { display: none; }
  .ac-uspcards__list { grid-auto-columns: 78vw; padding-right: 16px; }
}

/* ============================================================================
   FLAVOUR SWITCH
   Two photo cards under the buy box, joining the two product pages.
   ========================================================================== */
.ac-flavsw { padding: 30px 0 34px; }
.ac-flavsw__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ac-flavsw__card {
  display: block; text-decoration: none; color: inherit;
  background: var(--ac-paper); border: 2.5px solid var(--ac-line);
  border-radius: 16px; overflow: hidden;
}
.ac-bg-paper .ac-flavsw__card { background: var(--ac-cream); }
.ac-flavsw__card img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.ac-flavsw__txt { display: block; padding: 12px 14px 14px; }
.ac-flavsw__txt b {
  display: block; font-family: var(--ac-font-disp); font-weight: 700;
  font-size: 14.5px; line-height: 1.25;
}
.ac-flavsw__txt em {
  display: block; margin-top: 5px; font-style: normal;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ac-ink-mute);
}
.ac-flavsw__card.is-sel { border-color: var(--ac-red); }
.ac-flavsw__card.is-sel .ac-flavsw__txt em { color: var(--ac-red); }
.ac-flavsw__card:not(.is-sel):hover { border-color: #d9c6a8; }
.ac-flavsw__card:focus-visible { outline: 3px solid var(--ac-gold); outline-offset: 2px; }

@media (min-width: 750px) {
  .ac-flavsw__row { gap: 24px; max-width: 720px; margin-inline: auto; }
  .ac-flavsw__txt b { font-size: 17px; }
}

/* ============================================================================
   DESKTOP
   Carl, 2026-08-30: "Desktop view should be in columns vs mobile view."
   Everything below only applies from 750px up. Until now most AC sections were
   capped at --ac-col (520px), which is right for a phone and leaves a desktop
   browser looking like a phone screenshot floating in the middle of the page.
   ========================================================================== */
@media (min-width: 750px) {
  /* Reading sections widen; the BUY block stays narrow on purpose, because a
     tier ladder stretched across 1000px is harder to compare, not easier. */
  /* EVERY AC section, one cap. Sections that want to be narrower still say so below; this is
     a ceiling, not a width. The buy block stays deliberately narrow, because a tier ladder
     stretched across a wide screen is harder to compare, not easier. */
  .ac-wrap { max-width: var(--ac-max); }

  .ac-h2 { font-size: 30px; }
  .ac-kicker { font-size: 12px; }

  /* Proof: the two doubt/fact cards sit side by side instead of stacking. */
  .ac-proofs .ac-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .ac-proofs .ac-proof + .ac-proof { margin-top: 0; }
  .ac-proof__quote { font-size: 21px; }

  /* FAQ in two columns: ten stacked accordions is a very long desktop page. */
  .ac-faq__grid { column-count: 2; column-gap: 24px; }
  .ac-faq details { break-inside: avoid; margin-top: 0; margin-bottom: 10px; }

  /* The buy block keeps its phone width but centres properly. */
  .ac-shop .ac-wrap { max-width: 560px; }

  .ac-finalcta { padding: 34px 16px 46px; }
}

@media (min-width: 1100px) {
  .ac-proofband .ac-wrap,
  .ac-uspcards .ac-wrap,
  .ac-faq .ac-wrap,
}

/* Rating line above the hero headline. Half star is the same glyph clipped, so the
   mark stays identical to the ones used in the social proof band. */
.ac-hero__rating {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 10px; font-size: 12.5px; font-weight: 800; color: var(--ac-ink-soft);
}
.ac-hero__stars { display: inline-flex; gap: 1px; }
.ac-hero__rating .ac-star { width: 15px; height: 15px; }
.ac-hero__rating .ac-star.is-half {
  clip-path: inset(0 45% 0 0);
  margin-right: calc(15px * 0.45 * -1);
}
@media (min-width: 750px) { .ac-hero__rating { justify-content: flex-start; } }

/* ============================================================================================
   PROOF BAND HEADER, rebuilt 2026-09-01 (Carl).
   The number is the header. It used to be a kicker plus the sentence "What people say after
   they try it", with a three-stat row underneath. One claim, stated once, at the size it
   deserves, then the rating, then the voices.
   ============================================================================================ */

.ac-proofhead {
  text-align: center;
}

.ac-bignum {
  margin: 0;
  font-family: var(--ac-font-disp, inherit);
  font-weight: 800;
  font-size: 62px;
  line-height: 0.88;
  letter-spacing: -0.025em;
  color: var(--ac-gold);
}

.ac-bignum__label {
  margin: 4px 0 0;
  font-family: var(--ac-font-disp, inherit);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.1;
  color: var(--ac-ink);
}

.ac-ratingline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 13px 0 0;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ac-ink-soft);
}

/* On the dark band the label and the rating line have to lift off the ink. */
.ac-bg-ink .ac-bignum__label { color: #ffffff; }
.ac-bg-ink .ac-ratingline { color: #e9d9bd; }

@media screen and (min-width: 750px) {
  .ac-bignum { font-size: 96px; }
  .ac-bignum__label { font-size: 40px; margin-top: 6px; }
  .ac-ratingline { margin-top: 16px; font-size: 15px; }
  .ac-ratingline .ac-star { width: 17px; height: 17px; }
}

/* Shipping on the pack card, added 2026-09-01 with the approved buy block. */
.ac-tier__ship {
  font-weight: 700;
  white-space: nowrap;
}

.ac-tier__ship.is-free { color: var(--ac-green); }
.ac-tier__ship.is-paid { color: var(--ac-ink-mute); }

/* "More Than" above the big number, and the gap Carl asked for between the rating line and
   the first testimonial. They were touching. */
.ac-bignum__pre {
  margin: 0 0 2px;
  font-family: var(--ac-font-disp, inherit);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
  color: var(--ac-ink);
}

.ac-bg-ink .ac-bignum__pre { color: #ffffff; }

.ac-proofhead { margin-bottom: 26px; }

@media screen and (min-width: 750px) {
  .ac-bignum__pre { font-size: 26px; }
  .ac-proofhead { margin-bottom: 34px; }
}

/* ============================================================================================
   BUY BOX ADDITIONS, 2026-09-01 (Carl).
   .ac-fin      the flavour choice, moved inside the product page buy box above the pack sizes
   .ac-ratline  the consolidated rating under the product title
   ============================================================================================ */

.ac-fin { margin: 0 0 18px; }

.ac-fin__label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-ink-mute);
}

.ac-fin__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.ac-fin__btn {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px 10px;
  border: 2.5px solid var(--ac-line);
  border-radius: 14px;
  background: var(--ac-paper);
  color: var(--ac-ink);
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease;
}

.ac-fin__btn:hover { border-color: var(--ac-ink-mute); }

.ac-fin__btn.is-on {
  border-color: var(--ac-red);
  background: var(--ac-cream-deep);
}

.ac-fin__img {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 9px;
  object-fit: cover;
}

.ac-fin__name {
  font-family: var(--ac-font-disp);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  min-width: 0;
}

.ac-ratline {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 2px;
}

.ac-ratline__stars { display: inline-flex; gap: 1px; }
.ac-ratline__stars .ac-star { width: 16px; height: 16px; }

.ac-ratline__count {
  font-size: 13px;
  font-weight: 800;
  color: var(--ac-ink-soft);
}

/* The link out to the product page. It replaced a button that opened a sheet, so it has to stop
   looking like a button and start looking like a link. */
a.ac-inside-open {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================================================
   HERO ON A PHONE, so the button is above the fold (Carl, 2026-09-01, matching LBF).

   Everything here is mobile only. Desktop keeps the larger type and the roomier spacing.
   Measured target: on a 375 x 667 iPhone SE the Add to cart button must be fully visible
   without scrolling, which means the whole hero panel has to land inside about 540px once the
   announcement bar and header have taken their 121.
   ============================================================================================ */

@media screen and (max-width: 749px) {
  .ac-hero__panel {
    padding: 16px 20px 20px;
  }

  /* The eyebrow said JAKIM certified and made in Nilai. The rating line directly above it is
     doing the trust job already, and the red strip below the hero repeats both. Three lines of
     the same reassurance is what was pushing the button off the screen. */
  .ac-hero__eyebrow {
    display: none;
  }

  .ac-hero__h1 {
    font-size: 26px;
    line-height: 1.14;
    letter-spacing: -0.01em;
  }

  .ac-hero__sub {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.45;
  }

  .ac-hero__cta {
    margin-top: 14px;
    width: 100%;
  }

  .ac-hero__note {
    margin-top: 8px;
    font-size: 11.5px;
  }

  .ac-hero__rating {
    margin-bottom: 2px;
  }
}

/* ============================================================================================
   THE BUY ZONE'S OWN ADD TO CART (Carl, 2026-09-01).
   The section that asks for a flavour and a pack size now has the button that finishes the job.
   The floating bar is only for people who have scrolled past this.
   ============================================================================================ */

.ac-buybtn {
  display: block;
  width: 100%;
  margin: 18px 0 0;
  padding: 16px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--ac-red);
  color: #fff;
  font-family: var(--ac-font-disp);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  cursor: pointer;
  transition: background 140ms ease;
}

.ac-buybtn:hover { background: var(--ac-red-dark); }

.ac-buybtn:disabled {
  background: var(--ac-line);
  color: var(--ac-ink-mute);
  cursor: not-allowed;
}

.ac-buybtn:focus-visible {
  outline: 3px solid var(--ac-gold);
  outline-offset: 3px;
}

.ac-buybtn__note {
  margin: 9px 0 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--ac-ink-soft);
}

.ac-buybtn__note .is-free { color: var(--ac-green); }
.ac-buybtn__note .is-paid { color: var(--ac-ink-mute); }

@media screen and (min-width: 750px) {
  .ac-buybtn { font-size: 18px; padding: 17px 22px; margin-top: 20px; }
  .ac-buybtn__note { font-size: 13px; }
}

/* ============================================================================================
   THE UPSELL AFTER ADD TO CART (Carl, 2026-09-01).
   Was two lines of text on a green panel, which sold nothing. Each offer is now a card with a
   photograph, the name, the price and the saving. Same shape for both offers so the eye can
   compare them at a glance.
   ============================================================================================ */

.ac-toast__offers {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
}

.ac-offer {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 12px 9px 9px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: var(--ac-ink);
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.ac-offer:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(43, 33, 24, 0.18); }
.ac-offer:disabled { opacity: 0.6; cursor: wait; }

.ac-offer:focus-visible {
  outline: 3px solid var(--ac-gold);
  outline-offset: 2px;
}

.ac-offer__img {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--ac-cream-deep);
}

.ac-offer__img[hidden] { display: none; }

.ac-offer__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ac-offer__name {
  font-family: var(--ac-font-disp);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.25;
}

.ac-offer__price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ac-ink);
}

.ac-offer__price s { font-weight: 700; color: var(--ac-ink-mute); }
.ac-offer__price s[hidden] { display: none; }

.ac-offer__save {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ac-green);
}

.ac-offer__save[hidden] { display: none; }

.ac-offer__go {
  flex: none;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--ac-red);
  color: #fff;
  font-family: var(--ac-font-disp);
  font-weight: 700;
  font-size: 13.5px;
}

.ac-toast__cart {
  display: inline-block;
  margin-top: 10px;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The sticky Add to cart bar is off by default now. Belt and braces alongside the Liquid
   guard, so a stale saved setting cannot bring it back unannounced. */
.ac-atc[data-ac-atc-off] { display: none !important; }

/* The add-to-cart popup, Carl's copy and layout (2026-09-01).
   Confirmation, then the reason to add more, then the offers, then the way out. */

.ac-toast__done {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cdebd6;
}

.ac-toast__tick { width: 16px; height: 16px; flex: none; }

.ac-toast__head {
  margin: 6px 0 0;
  font-family: var(--ac-font-disp);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: #fff;
}

.ac-toast__msg {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: #dcefe1;
}

.ac-toast__cart {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.ac-offer__go {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 12.5px;
  padding: 10px 15px;
}

@media screen and (min-width: 750px) {
  .ac-toast__head { font-size: 20px; }
  .ac-toast__msg { font-size: 14px; }
}

/* "You may be interested in", on the cart page.

   Carl, 2026-09-01: "make it smaller for the you may interested in card, make image smaller and
   align left instead of taking a big space". So: compact rows, small thumbnail on the left, the
   words next to it, the button on the right. It reads down the page like a list rather than
   claiming a block of it.

   It no longer appears in the cart drawer. Offers are made in the popup BEFORE the drawer opens,
   and putting them in the drawer too was asking twice and breaking Dawn's layout. */

.ac-cartupsell {
  padding: 14px 0 6px;
  border-top: 1px solid var(--ac-line);
  margin-top: 12px;
}

.ac-cartupsell__head {
  margin: 0 0 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ac-ink-mute);
}

.ac-cartupsell__rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ac-upcard {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 8px;
  border: 1px solid var(--ac-line);
  border-radius: 12px;
  background: var(--ac-paper);
}

.ac-upcard__img {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--ac-cream-deep);
}

.ac-upcard__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}

.ac-upcard__name {
  font-family: var(--ac-font-disp);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  color: var(--ac-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ac-upcard__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ac-ink);
}

.ac-upcard__price s { font-weight: 700; font-size: 11.5px; color: var(--ac-ink-mute); }

.ac-upcard__save {
  font-size: 11px;
  font-weight: 800;
  color: var(--ac-green);
}

.ac-upcard__go {
  flex: none;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--ac-red);
  color: #fff;
  font-family: var(--ac-font-disp);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.ac-upcard__go:hover { background: var(--ac-red-dark); }
.ac-upcard__go:disabled { opacity: 0.6; cursor: wait; }

.ac-upcard__go:focus-visible {
  outline: 3px solid var(--ac-gold);
  outline-offset: 2px;
}

@media screen and (min-width: 750px) {
  .ac-upcard__img { width: 56px; height: 56px; }
  .ac-upcard__name { font-size: 14px; }
}

/* The hero photo stays full bleed, but its content sits on the same 1200 edge as everything
   else, so the headline does not start further left than the header logo above it. */
@media screen and (min-width: 750px) {
  .ac-hero > .ac-wrap,
  .ac-hero__inner,
  .ac-hero__grid { max-width: var(--ac-max); margin-inline: auto; }
}

/* ============================================================================================
   PACK SIZE CARDS ON THE PRODUCT PAGE (Carl, 2026-09-02).
   Same shape as the homepage buy block, so choosing a pack looks the same wherever you do it.
   Dawn's own variant picker still runs the form; it is hidden only once the cards are wired.
   ============================================================================================ */

body.ac-has-packs variant-selects {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ac-packs { display: grid; gap: 11px; margin: 18px 0 4px; }

.ac-packs__label {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-ink-mute);
}

.ac-pack {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 15px;
  border: 2.5px solid var(--ac-line);
  border-radius: 16px;
  background: var(--ac-paper);
  color: var(--ac-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.ac-pack:hover { border-color: var(--ac-ink-mute); }

.ac-pack.is-sel {
  border-color: var(--ac-red);
  background: var(--ac-cream-deep);
}

.ac-pack.is-out { opacity: 0.55; cursor: not-allowed; }

.ac-pack:focus-visible { outline: 3px solid var(--ac-gold); outline-offset: 2px; }

.ac-pack__badge {
  position: absolute;
  top: -11px;
  left: 14px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--ac-gold);
  color: #5a3e00;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.ac-pack__radio {
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  border: 2.5px solid #cbb89b;
}

.ac-pack.is-sel .ac-pack__radio {
  border-color: var(--ac-red);
  background: radial-gradient(circle, var(--ac-red) 0 45%, transparent 50%);
}

.ac-pack__mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.ac-pack__name {
  font-family: var(--ac-font-disp);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.2;
}

.ac-pack__price { font-size: 11.5px; font-weight: 700; color: var(--ac-ink-soft); }
.ac-pack__price s { color: var(--ac-ink-mute); margin-left: 5px; }

.ac-pack__ship { font-size: 11.5px; font-weight: 700; color: var(--ac-ink-mute); }
.ac-pack__ship.is-free { color: var(--ac-green); }

.ac-pack__save { font-size: 11.5px; font-weight: 800; color: var(--ac-green); }

.ac-pack__per { flex: none; text-align: right; }

.ac-pack__per b {
  display: block;
  font-family: var(--ac-font-disp);
  font-weight: 800;
  font-size: 19px;
  color: var(--ac-ink-soft);
}

.ac-pack.is-sel .ac-pack__per b { color: var(--ac-red); }

.ac-pack__per span {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ac-ink-mute);
}