/* Order-first additions. Keep after styles.css. */
.hero-action { width:min(270px,100%); }
.hero-menu-link { display:block; width:fit-content; margin:14px auto 0; color:var(--ink); font-weight:700; text-decoration:underline; text-underline-offset:5px; }
.menu-order-action { margin:36px auto 0; text-align:center; }
.menu-order-action .pill { width:fit-content; max-width:100%; margin:auto; }
.menu-order-action p { font-size:14px; margin:10px 0 0; }
.order-locations { padding-top:48px; }
.order-locations .locator { margin-top:0; }

html.order-welcome-open { overflow:hidden; }
.mobile-order-bar { display:none; }

@media(min-width:801px) {
 .hero-action p { margin-bottom:16px; font-size:15px; line-height:1.45; }
 .hero-action .pill { padding:12px 18px; font-size:17px; }
 .hero-action .pill svg { width:18px; height:18px; }
 .hero-footer { justify-content:space-between; }
 .hero-footer .hero-menu-link { display:flex; width:auto; margin:0; align-items:center; gap:12px; color:inherit; font-size:inherit; font-weight:800; text-decoration:none; text-underline-offset:0; }
 .hero-footer .hero-menu-link:hover { color:var(--ink); }
}
@media(min-width:801px) and (max-width:1200px) { .hero h1 { font-size:6.02vw; } .hero-action { width:250px; } }

@media(max-width:800px) {
 .hero-action { width:100%; }
 .home-opening { height:calc(100svh - 88px); }
 .home-opening .hero { position:relative; }
 .home-opening .hero .hero-photo { width:100%; height:100%; object-fit:cover; object-position:50% top; }
 .home-opening .hero .hero-shade { background:linear-gradient(180deg,transparent 0 55%,rgba(234,189,22,.08) 64%,rgba(234,189,22,.74) 82%,#eabd16 100%); }
 .hero .hero-content { bottom:clamp(18px,3.5vh,36px); display:block; }
 .hero .script-heading { margin:0 0 7px; padding-left:4px; font-size:clamp(46.5px,12.04vw,67px); line-height:.88; }
 .hero h1 { font-size:clamp(40.5px,10.66vw,58.5px); line-height:.94; letter-spacing:-.025em; white-space:normal; }
 .hero .hero-action p { max-width:32ch; }
 .hero .hero-action { display:block; margin-top:14px; }
 .hero .hero-action p { margin:0; font-size:clamp(14px,3.27vw,15px); line-height:1.55; }
 .hero .hero-action .pill { width:100%; margin-top:15px; padding:13px 22px; }
 .hero-menu-link { display:none; }
 .mobile-order-bar { position:fixed; bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); background:var(--cream); border-top:2px solid var(--red); z-index:90; box-shadow:0 -4px 20px #192c3c15; transition:transform .25s ease,opacity .2s ease; }
 .mobile-order-bar.is-context-hidden,.mobile-order-bar.is-footer-hidden { transform:translateY(110%); opacity:0; visibility:hidden; pointer-events:none; }
 .mobile-order-bar>span { min-width:0; font-family:var(--script); font-size:21.5px; line-height:1.1; color:var(--red); }
 .mobile-order-bar small { display:block; margin-top:3px; font:11px/1.25 var(--body); color:var(--ink); }
 .mobile-order-bar .pill { flex-shrink:0; white-space:nowrap; font-size:17px; padding:10px 16px; gap:14px; }
 body { padding-bottom:0; }
 .tbg-scroll-top { bottom:calc(20px + env(safe-area-inset-bottom)); }
 html.mobile-order-visible .tbg-scroll-top { bottom:calc(100px + env(safe-area-inset-bottom)); }

}
@media(max-width:800px) and (max-height:680px) {
 .home-opening .hero .hero-photo { object-position:50% 16%; }
 .hero .script-heading { font-size:clamp(38px,10.32vw,51.5px); }
 .hero h1 { font-size:clamp(34.5px,9.03vw,46.5px); }
 .hero .hero-action { margin-top:10px; }
 .hero .hero-action p { line-height:1.4; }
 .hero .hero-action .pill { margin-top:10px; padding-block:11px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* ==========================================================================
   Hero + ticker — client feedback (1 Oct)
   - new headline + tagline, bold "10% PROMO" line, small footer label removed
   - yellow gradient over the photo removed (photo now fills the hero)
   - two crossed ticker ribbons scrolling in opposite directions
   ========================================================================== */
.home-opening .hero .hero-shade { display:none; }
.home-opening .hero .hero-photo { height:100%; }
/* Without the gradient, keep text readable over the photo with a soft shadow instead of a colour wash */
.home-opening .hero .hero-content { text-shadow:0 2px 18px rgba(40,22,0,.55), 0 1px 3px rgba(40,22,0,.45); }

.hero h1#hero-title { font-size:clamp(39.5px,4.47vw,79px); line-height:.98; letter-spacing:-.02em; white-space:normal; }
.hero-tagline { margin:12px 0 0; max-width:34ch; font-family:var(--body); font-size:clamp(15px,1.16vw,18px); font-weight:800; line-height:1.4; color:var(--cream); }

.hero-action .hero-promo { font-family:var(--tall); font-size:clamp(20.5px,1.81vw,29px); font-weight:400; line-height:1.02; letter-spacing:.005em; text-transform:uppercase; }
.hero-action .hero-promo strong { display:block; font-weight:400; font-size:1.45em; color:var(--yellow); }
.hero-footer { justify-content:flex-end; }

/* Crossed ribbons. The wrapper keeps the old ticker height; ribbons overflow it and overlap the hero/next section. */
.home-opening { overflow:visible; }
.ticker.ticker--crossed { position:relative; z-index:6; height:66px; padding:0; background:none; overflow:visible; }
.ticker-band {
  position:absolute; left:-6%; right:-6%; top:50%; padding:15px 0 17px; overflow:hidden;
  background:var(--blue); color:var(--cream); box-shadow:0 6px 16px rgba(10,30,50,.22);
}
.ticker-band--front { translate:0 -50%; rotate:-2.4deg; }
.ticker-band--back { translate:0 -50%; rotate:2.4deg; background:#1d5f96; }
.ticker-band--back .ticker-track { animation-direction:reverse; }
.ticker--crossed .ticker-track { animation-duration:40s; }

@media(max-width:800px) {
 .hero h1#hero-title { font-size:clamp(29px,8.08vw,46.5px); }
 .hero-tagline { margin-top:9px; font-size:clamp(14px,3.35vw,15px); }
 .hero .hero-action .hero-promo { max-width:none; font-size:clamp(17px,4.82vw,22.5px); }
 .ticker.ticker--crossed { height:50px; }
 .ticker-band { padding:11px 0 13px; }
 .ticker-band--front { rotate:-3.2deg; }
 .ticker-band--back { rotate:3.2deg; }
}
@media(prefers-reduced-motion:reduce) { .ticker--crossed .ticker-track { animation:none; } }
/* Promo line sits on a red label so it reads over the yellow plates */
.hero-action .hero-promo strong {
  display:inline-block; margin-bottom:6px; padding:4px 12px 2px; rotate:-2deg;
  background:var(--red); color:var(--cream); border-radius:6px; text-shadow:none;
  box-shadow:0 4px 0 rgba(120,20,10,.35);
}
.hero-footer, .hero-footer a { color:var(--cream); }
@media(max-width:800px) {
 .hero-action .hero-promo strong { display:block; width:fit-content; }
 .ticker.ticker--crossed { height:58px; }
 .ticker-band--front { rotate:-5.5deg; }
 .ticker-band--back { rotate:5.5deg; }
}

/* Option B "caution tape": contrasting back ribbon, slower, 10% PROMO chips.
   Remove the ticker--tape class in index.html to go back to the two blue ribbons. */
.ticker--tape .ticker-band--back { background:var(--yellow); color:var(--ink); }
.ticker--tape .ticker-band--back b { color:var(--red); }
.ticker--tape .ticker-band--back .ticker-track { animation-duration:60s; }
.ticker--tape .ticker-band--back .ticker--crossed:hover .ticker-track { animation-play-state:paused; }
.ticker--tape .ticker-band--back { border-block:3px solid var(--ink); }

/* Feedback 1 Oct (2): promo block right-aligned near the rice, bigger tagline */
.hero-tagline { max-width:40ch; font-size:clamp(17px,1.5vw,24px); line-height:1.35; }
@media(min-width:801px) {
 .home-opening .hero-content { align-items:end; }
 .hero .hero-action { width:auto; min-width:300px; text-align:right; margin-bottom:clamp(30px,6vh,80px); }
 .hero-action .hero-promo { white-space:nowrap; }
 .hero-action .hero-promo strong { rotate:2deg; transform-origin:right center; }
 .hero .hero-action .pill { width:300px; margin-left:auto; }
}
@media(max-width:800px) {
 .hero-tagline { font-size:clamp(15px,4.04vw,17px); }
}
@media(min-width:801px) {
 .hero-action .hero-promo strong { display:block; width:fit-content; margin-left:auto; margin-bottom:8px; }
}

/* Back ribbon stays still; only the front ribbon scrolls */
.ticker-band--back .ticker-track { animation:none; translate:-18% 0; }

/* Promo block: items centred on each other, block vertically centred against the headline */
@media(min-width:801px) {
 .home-opening .hero-content { align-items:center; }
 .hero .hero-action { text-align:center; margin-bottom:0; padding-bottom:0; }
 .hero-action .hero-promo { margin-bottom:18px; }
 .hero-action .hero-promo strong { margin-inline:auto; rotate:-2deg; transform-origin:center; }
 .hero .hero-action .pill { margin-inline:auto; }
}

/* ==========================================================================
   First screen = navbar + hero only. Marquee & next section appear on scroll.
   Front ribbon scrolls left → right.
   ========================================================================== */
:root { --header-h:104px; }
.home-opening { display:block; height:auto; min-height:0; overflow:visible; }
.home-opening .hero { height:calc(100svh - var(--header-h)); min-height:0; max-height:none; }
/* Ribbons are rotated, so their corners rise above the ticker box: push the box down
   by that overhang so nothing peeks into the first screen. */
.ticker.ticker--crossed { margin-top:calc(2.7vw + 4px); }
.ticker-band--front .ticker-track { animation-direction:reverse; }
@media(max-width:800px) {
 :root { --header-h:88px; }
 .ticker.ticker--crossed { margin-top:calc(6vw + 4px); }
}

/* ==========================================================================
   Section-by-section scroll (ala Fowlboys) — homepage only.
   Navbar stays on top; every scroll lands exactly on the start of the next
   section. Sections taller than the screen can still be scrolled through
   normally before snapping to the next one, so no content is ever skipped.
   ========================================================================== */
html:has(.home-opening) { scroll-snap-type:y mandatory; scroll-padding-top:var(--header-h); }
.home-opening ~ * , .home-opening { scroll-margin-top:0; }
.site-frame:has(.home-opening) .site-header { position:sticky; top:0; z-index:60; }
.home-opening .hero,
.home-opening .ticker,
main > section,
main + .order-locations,
.site-frame:has(.home-opening) .tbg-footer { scroll-snap-align:start; scroll-snap-stop:always; }
/* the marquee leads into the menu section, so the menu itself isn't a separate stop */
.home-opening + .menu-section { scroll-snap-align:none; }
.site-frame:has(.home-opening) .tbg-footer { scroll-snap-align:end; }
/* Snap on the menu section itself (so its full height can be scrolled), offset so the marquee shows above it */
.home-opening .ticker { scroll-snap-align:none; }
.home-opening + .menu-section { scroll-snap-align:start; scroll-margin-top:calc(66px + 2.7vw + 4px); }
@media(max-width:800px){ .home-opening + .menu-section { scroll-margin-top:calc(58px + 6vw + 4px); } }

/* Hero: promo line removed, CTA sits under the tagline */
.hero-heading .pill { display:inline-flex; width:auto; min-width:260px; margin-top:22px; gap:28px; }
@media(max-width:800px){ .hero-heading .pill { display:flex; width:100%; margin-top:16px; } }

/* ==========================================================================
   Only the navbar keeps a checker strip — remove it from every section/footer.
   ========================================================================== */
.checker:not(.site-header > .checker) { display:none !important; }

/* ==========================================================================
   Marquee: back ribbon straight & full width (no gaps), front ribbon tilted.
   The front ribbon's raised corner is aligned to the top of the marquee, so it
   never pokes into the hero; its lower corner overlaps the next section.
   ========================================================================== */
.ticker.ticker--crossed { height:auto; margin-top:0; background:#1d5f96; }
.ticker-band--back { position:relative; left:0; right:0; top:auto; translate:none; rotate:none; box-shadow:none; }
.ticker-band--front { top:calc(2.5vw + 2px); translate:none; rotate:-2.4deg; }
.home-opening + .menu-section { scroll-margin-top:63px; }
@media(max-width:800px) {
 .ticker.ticker--crossed { margin-top:0; }
 .ticker-band--back { rotate:none; }
 .ticker-band--front { top:calc(4.8vw + 2px); rotate:-5.5deg; }
 .home-opening + .menu-section { scroll-margin-top:50px; }
}

/* Menu cards: whole card links to its Oddle category */
.menu-section .section-heading h2 { font-size:clamp(34.5px,4.47vw,72px); line-height:1; }
.food-card { position:relative; transition:transform .2s ease; }
.food-card:hover { transform:translateY(-6px) rotate(-.6deg); }
.food-card .food-order { position:static; font-weight:800; }
.food-card .food-order::before { content:""; position:absolute; inset:0; z-index:2; }
.food-card .food-order:focus-visible { outline:none; }
.food-card:has(.food-order:focus-visible) { outline:3px solid var(--ink); outline-offset:4px; }
@media(max-width:800px){ .menu-section .section-heading h2 { font-size:clamp(27.5px,7.74vw,39.5px); } }
.menu-section .section-heading h2 { font-size:clamp(44.5px,5.5vw,89.5px); }
.menu-section .menu-subtitle { margin:10px 0 0; font-family:var(--body); font-weight:700; font-size:clamp(17px,1.46vw,22.5px); line-height:1.3; color:var(--ink); opacity:1; }
@media(max-width:800px){
 .menu-section .section-heading h2 { font-size:clamp(34.5px,9.89vw,48px); }
 .menu-section .menu-subtitle { font-size:clamp(16px,4.13vw,17px); }
}
.menu-section .section-heading p.menu-subtitle { font-size:clamp(17px,1.55vw,24px); font-weight:700; max-width:none; margin-top:12px; }
.menu-section .section-heading h2 { white-space:nowrap; }
@media(max-width:800px){
 .menu-section .section-heading p.menu-subtitle { font-size:clamp(16px,4.13vw,17px); }
 .menu-section .section-heading h2 { font-size:clamp(29px,8.6vw,44.5px); }
}
@font-face{font-family:"Fredoka";font-weight:600;font-display:swap;src:url(/assets/fonts/fredoka-latin-600-normal.woff2) format("woff2")}
.menu-section .section-heading p.menu-subtitle { font-family:"Fredoka","DM Sans",Arial,sans-serif; font-weight:600; font-size:clamp(20.5px,2.06vw,31px); letter-spacing:-.01em; margin-top:10px; }
@media(max-width:800px){ .menu-section .section-heading p.menu-subtitle { font-size:clamp(17px,4.82vw,19px); } }

/* Match the menu heading and description to the homepage section hierarchy. */
.menu-section .menu-heading-script {
  display: block;
  max-width: 100%;
  margin-bottom: 0;
  color: var(--red);
  font-family: var(--script);
  font-size: clamp(38px, 3.96vw, 63.5px);
  font-weight: 400;
  line-height: 1.12;
  transform: rotate(-2deg);
}
.menu-section .section-heading h2 {
  font-size: clamp(43px, 5.16vw, 75.5px);
  line-height: 1;
  letter-spacing: -.02em;
}
.menu-section .section-heading p.menu-subtitle {
  margin-top: 20px;
  font-family: var(--body);
  font-size: clamp(17px, 1.03vw, 19px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0;
}
@media(max-width:800px) {
  .menu-section .menu-heading-script {
    margin-bottom: 0;
    font-size: clamp(25px, 6.19vw, 36px);
    line-height: 1.2;
  }
  .menu-section .section-heading h2 {
    font-size: clamp(32.5px, 8.6vw, 41.5px);
    line-height: 1.06;
    white-space: normal;
  }
  .menu-section .section-heading p.menu-subtitle {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.6;
  }
}

/* ==========================================================================
   Order section — "Order online dengan mudah" diamond tiles (TBG palette)
   ========================================================================== */
@font-face{font-family:"Fredoka";font-weight:700;font-display:swap;src:url(/assets/fonts/fredoka-latin-700-normal.woff2) format("woff2")}
.order-section .order-head .script { font-size:clamp(39.5px,4.3vw,67px); }
.order-banner-head { display:block; text-align:center; }
.order-banner-head h3 { font-size:clamp(31px,3.78vw,55px); line-height:1; }

.tbg-diamonds {
  --d:clamp(150px,15vw,210px);
  display:grid; grid-template-columns:repeat(4,1fr); align-items:start; justify-items:center;
  gap:24px; padding:20px 0 calc(var(--d) * .45);
}
.tbg-diamond { position:relative; display:flex; flex-direction:column; align-items:center; gap:22px; color:var(--ink); text-decoration:none; }
.tbg-diamond:nth-child(even) { translate:0 calc(var(--d) * .45); }   /* zig-zag macam rujukan */
.tbg-diamond__label { font:700 clamp(17px,1.46vw,22.5px)/1 "Fredoka","DM Sans",sans-serif; letter-spacing:-.01em; color:var(--ink); text-align:center; white-space:nowrap; }
.tbg-diamond__shape {
  --c:var(--red); --c2:#b52a18;
  position:relative; display:grid; place-items:center; width:var(--d); aspect-ratio:1; margin:calc(var(--d) * .2);
  border-radius:22%; rotate:45deg;
  background:linear-gradient(135deg,var(--c),var(--c2));
  border:4px solid var(--ink); box-shadow:7px 7px 0 var(--ink);
  transition:translate .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.tbg-diamond__shape::before { /* halo cream di belakang, macam frame dalam rujukan */
  content:""; position:absolute; inset:-18px; z-index:-1; border-radius:24%; background:rgba(255,240,216,.55);
}
.tbg-diamond__inner { rotate:-45deg; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--cream); text-align:center; max-width:120%; }
.tbg-diamond__icon { display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--cream); color:var(--c); border:3px solid var(--ink); }
.tbg-diamond__icon .tbg-icon { width:28px; height:28px; stroke-width:2.2; }
.tbg-diamond__desc { font:700 13px/1.25 "DM Sans",sans-serif; max-width:15ch; }
.tbg-diamond__tag {
  position:absolute; left:6%; bottom:20%; rotate:-45deg; transform-origin:left bottom;
  padding:5px 12px 4px; border-radius:99px; background:var(--cream); color:var(--ink);
  font:800 12px/1 var(--display); letter-spacing:.08em; white-space:nowrap; border:2px solid var(--ink);
}
.tbg-diamond--website  .tbg-diamond__shape { --c:#d93823; --c2:#b52a18; }
.tbg-diamond--grabfood .tbg-diamond__shape { --c:#2777b6; --c2:#1b5a8d; }
.tbg-diamond--foodpanda .tbg-diamond__shape { --c:#f8ce30; --c2:#e9b311; }
.tbg-diamond--foodpanda .tbg-diamond__inner { color:var(--ink); }
.tbg-diamond--shopeefood .tbg-diamond__shape { --c:#192c3c; --c2:#0d1b27; }
a.tbg-diamond:hover .tbg-diamond__shape, a.tbg-diamond:focus-visible .tbg-diamond__shape { translate:0 -8px; box-shadow:10px 14px 0 var(--ink); }
a.tbg-diamond:focus-visible { outline:none; }
a.tbg-diamond:focus-visible .tbg-diamond__label { text-decoration:underline; text-underline-offset:6px; }
.tbg-diamond.is-unavailable { cursor:default; }
.tbg-diamond.is-unavailable .tbg-diamond__shape { filter:saturate(.7); }

@media(max-width:800px){
  .tbg-diamonds { --d:min(32vw,150px); grid-template-columns:repeat(2,1fr); gap:6px 10px; padding-bottom:calc(var(--d) * .3); }
  .tbg-diamond:nth-child(even) { translate:0 calc(var(--d) * .3); }
  .tbg-diamond__label { font-size:16px; }
  .tbg-diamond__icon { width:42px; height:42px; }
  .tbg-diamond__icon .tbg-icon { width:22px; height:22px; }
  .tbg-diamond__desc { font-size:11px; }
  .tbg-diamond__tag { font-size:10px; padding:4px 9px 3px; }
  .tbg-diamond__shape { box-shadow:5px 5px 0 var(--ink); border-width:3px; }
}
@media(prefers-reduced-motion:reduce){ .tbg-diamond__shape { transition:none; } }
.tbg-diamonds { grid-template-rows:none; grid-auto-rows:auto; }
.tbg-diamond__shape::before { display:none; }
.tbg-diamond__shape { box-shadow:7px 7px 0 var(--ink), 0 0 0 14px rgba(255,240,216,.0); outline:14px solid rgba(25,44,60,.06); outline-offset:6px; }
.tbg-diamond__tag { position:static; rotate:none; margin-top:4px; }
a.tbg-diamond:hover .tbg-diamond__tag { background:var(--yellow); }
@media(max-width:800px){ .tbg-diamond__shape { outline-width:8px; outline-offset:4px; } .tbg-diamond__desc { display:none; } }
.order-banner::before { display:none; }
.tbg-diamonds { --d:clamp(140px,13vw,190px); }
@media(max-width:800px){
  .tbg-diamonds { --d:min(28vw,128px); gap:0 4px; }
  .tbg-diamond { gap:16px; }
  .tbg-diamond__label { font-size:15px; }
  .tbg-diamond__tag { font-size:9px; }
}

/* Diamond tiles in each platform's own colour + logo slot */
.tbg-diamond--website   .tbg-diamond__shape { --c:#e2412c; --c2:#b52a18; }
.tbg-diamond--grabfood  .tbg-diamond__shape { --c:#00b14f; --c2:#008a3d; }
.tbg-diamond--foodpanda .tbg-diamond__shape { --c:#e21b70; --c2:#b8125a; }
.tbg-diamond--shopeefood .tbg-diamond__shape { --c:#f05d22; --c2:#cc4512; }
.tbg-diamond--foodpanda .tbg-diamond__inner { color:var(--cream); }
.tbg-diamond__icon { width:64px; height:64px; background:#fff; overflow:hidden; }
.tbg-diamond__icon.has-logo { padding:0; }
.tbg-diamond__logo { display:block; width:100%; height:100%; object-fit:contain; }
.tbg-diamond--website .tbg-diamond__logo { object-fit:cover; }
@media(max-width:800px){ .tbg-diamond__icon { width:46px; height:46px; } }
.tbg-diamond.is-unavailable .tbg-diamond__shape { filter:none; }
/* Back-to-top must sit above the mobile order bar and stay tappable */
.tbg-scroll-top { z-index:95; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.tbg-scroll-top::after { content:""; position:absolute; inset:-10px; border-radius:50%; } /* bigger tap target */

/* ==========================================================================
   TBG Products — sambal pouch & jar (image full-bleed left, details right)
   ========================================================================== */
.products-section { display:grid; grid-template-columns:1fr 1fr; min-height:calc(100svh - var(--header-h)); background:var(--cream); }
.products-media { position:relative; overflow:hidden; background:#2a6db4; }
.products-media picture, .products-media img { display:block; width:100%; height:100%; }
.products-media img { object-fit:cover; object-position:50% 40%; }
.products-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(40px,6vw,96px) var(--gutter); color:var(--ink); }
.products-script { font-family:var(--script); font-size:clamp(29px,3.1vw,46.5px); line-height:.9; color:var(--red); transform:rotate(-4deg); transform-origin:left bottom; width:fit-content; }
.products-copy h2 { margin:6px 0 0; font-family:var(--tall); font-weight:400; font-size:clamp(48px,5.5vw,89.5px); line-height:.95; letter-spacing:-.01em; color:var(--blue); }
.products-lead { margin:14px 0 0; max-width:42ch; font-size:clamp(15px,1.07vw,17px); line-height:1.55; font-weight:600; }
.products-list { list-style:none; margin:clamp(22px,3vw,36px) 0 0; padding:0; display:grid; gap:14px; max-width:520px; }
.product-item { display:flex; align-items:center; gap:18px; padding:16px 20px; background:#fff; border:3px solid var(--ink); border-radius:16px; box-shadow:6px 6px 0 var(--ink); }
.product-item h3 { margin:0; font-family:var(--display); font-weight:800; font-size:clamp(20.5px,1.72vw,26px); line-height:1; text-transform:uppercase; }
.product-item p { margin:5px 0 0; font-size:15px; line-height:1.45; }
.product-tag { flex:0 0 auto; display:grid; place-items:center; width:64px; height:64px; border-radius:50%; font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.06em; color:var(--cream); border:3px solid var(--ink); rotate:-8deg; }
.product-item--pouch .product-tag { background:var(--blue); }
.product-item--jar .product-tag { background:var(--red); }
.products-shop-label { margin:clamp(24px,3vw,34px) 0 10px; font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.12em; text-transform:uppercase; }
.products-shops { display:flex; flex-wrap:wrap; gap:12px; }
.shop-btn { display:inline-flex; align-items:center; gap:14px; padding:14px 24px; border-radius:999px; border:3px solid var(--ink); font-family:var(--display); font-weight:700; font-size:18px; text-decoration:none; color:#fff; box-shadow:0 5px 0 var(--ink); transition:translate .18s ease, box-shadow .18s ease; }
.shop-btn:hover { translate:0 -3px; box-shadow:0 8px 0 var(--ink); }
.shop-btn:active { translate:0 3px; box-shadow:0 2px 0 var(--ink); }
.shop-btn:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; }
.shop-btn--tiktok { background:#111; }
.shop-btn--shopee { background:#ee4d2d; }

@media(max-width:800px){
  .products-section { grid-template-columns:1fr; min-height:0; }
  .products-media { aspect-ratio:1121 / 1403; }
  .products-copy { padding:36px 20px 48px; }
  .product-item { padding:14px 16px; gap:14px; box-shadow:4px 4px 0 var(--ink); }
  .product-tag { width:54px; height:54px; font-size:13px; }
  .shop-btn { flex:1 1 100%; justify-content:space-between; }
}

/* ==========================================================================
   Lauk tambahan — 3 add-on dishes as tilted sticker cards on the red grid
   ========================================================================== */
.lauk-section {
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(56px,7vw,110px) var(--gutter) clamp(56px,6vw,96px);
  background-color:#d23b26;
  background-size:44px 44px; color:var(--cream); text-align:center;
}
.lauk-section::before { /* grain, same as the 10.10 popup */
  content:""; position:absolute; inset:0; z-index:-1; opacity:.28; mix-blend-mode:multiply; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lauk-head { max-width:900px; margin:0 auto; }
.lauk-script { display:inline-block; font-family:var(--script); font-size:clamp(31px,3.44vw,51.5px); line-height:.9; color:var(--yellow); transform:rotate(-4deg); }
.lauk-head h2 { margin:6px 0 0; font-family:var(--tall); font-weight:400; font-size:clamp(39.5px,5.16vw,82.5px); line-height:.95; letter-spacing:-.01em; color:var(--cream); }
.lauk-head p { margin:16px auto 0; max-width:46ch; font-size:clamp(15px,1.12vw,17px); line-height:1.5; font-weight:600; color:#ffe9d6; }

.lauk-grid { list-style:none; margin:clamp(36px,5vw,64px) auto 0; padding:0; max-width:1200px; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,44px); }
.lauk-card { --tilt:-2.5deg; }
.lauk-card:nth-child(2) { --tilt:1.8deg; margin-top:28px; }
.lauk-card:nth-child(3) { --tilt:-1.2deg; }
.lauk-link {
  position:relative; display:flex; flex-direction:column; height:100%; text-decoration:none; color:var(--ink);
  background:var(--cream); border:4px solid var(--ink); border-radius:20px; overflow:hidden;
  box-shadow:8px 9px 0 var(--ink); rotate:var(--tilt);
  transition:rotate .35s cubic-bezier(.34,1.56,.64,1), translate .25s ease, box-shadow .25s ease;
}
.lauk-link img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-bottom:4px solid var(--ink); }
.lauk-no {
  position:absolute; top:12px; left:12px; z-index:2; display:grid; place-items:center; width:46px; height:46px;
  border-radius:50%; background:var(--yellow); color:var(--ink); border:3px solid var(--ink);
  font-family:var(--display); font-weight:800; font-size:17px; rotate:-10deg;
}
.lauk-meta { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:16px 18px 18px; text-align:left; flex:1; }
.lauk-name { font-family:var(--display); font-weight:800; font-size:clamp(17px,1.46vw,21.5px); line-height:1.05; text-transform:uppercase; }
.lauk-desc { font-size:14.5px; line-height:1.45; color:#4b5560; }
.lauk-add {
  margin-top:auto; display:inline-flex; align-items:center; gap:10px; padding:9px 16px 8px 10px; border-radius:999px;
  background:var(--red); color:#fff; font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:.02em;
  border:2px solid var(--ink); transition:background .2s ease, color .2s ease;
}
.lauk-plus { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--cream); color:var(--red); font-size:17px; line-height:1; transition:rotate .3s ease; }
.lauk-link:hover, .lauk-link:focus-visible { rotate:0deg; translate:0 -8px; box-shadow:10px 16px 0 var(--ink); outline:none; }
.lauk-link:hover .lauk-add, .lauk-link:focus-visible .lauk-add { background:var(--yellow); color:var(--ink); }
.lauk-link:hover .lauk-plus, .lauk-link:focus-visible .lauk-plus { rotate:90deg; }
.lauk-link:focus-visible { box-shadow:10px 16px 0 var(--ink), 0 0 0 4px var(--yellow); }

.lauk-all { display:inline-flex; align-items:center; gap:10px; margin-top:clamp(36px,4vw,56px); padding:12px 22px; border-radius:999px; border:2px solid var(--cream); color:var(--cream); font-family:var(--display); font-weight:700; font-size:18px; text-decoration:none; transition:background .2s ease,color .2s ease; }
.lauk-all:hover { background:var(--cream); color:var(--red); }

@media(max-width:800px){
  .lauk-section { padding:52px 0 52px; }
  .lauk-head { padding:0 20px; }
  /* swipeable row on phones, next card peeks in */
  .lauk-grid { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:12px 20px 24px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .lauk-grid::-webkit-scrollbar { display:none; }
  .lauk-card { flex:0 0 78%; scroll-snap-align:center; }
  .lauk-card:nth-child(2) { margin-top:0; }
  .lauk-link { box-shadow:6px 7px 0 var(--ink); }
  .lauk-all { margin-top:20px; }
}
@media(prefers-reduced-motion:reduce){ .lauk-link, .lauk-plus { transition:none; } }

/* Small link to the branch page (replaces the homepage branch locator) */
.about-branches { display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:10px 18px; border-radius:999px; background:var(--yellow); color:var(--ink); border:2px solid var(--ink); box-shadow:0 4px 0 var(--ink); font-size:15px; font-weight:600; text-decoration:none; transition:translate .18s ease, box-shadow .18s ease; }
.about-branches b { font-weight:800; }
.about-branches:hover { translate:0 -2px; box-shadow:0 6px 0 var(--ink); }
.about-branches span { transition:translate .18s ease; }
.about-branches:hover span { translate:4px 0; }

/* ==========================================================================
   Homepage heading system — one consistent hierarchy for every section
     kicker  : script label        (Yellowtail)
     title   : section heading     (Fredoka Heading)
     sub     : supporting line     (Fredoka)
   ========================================================================== */
main .sh-kicker {
  display:inline-block; margin:0 0 6px; padding:0;
  font-family:var(--script) !important; font-weight:400 !important; font-size:clamp(29px,3.1vw,48px) !important; line-height:.95 !important;
  letter-spacing:0 !important; text-transform:none !important; transform:rotate(-4deg) !important; transform-origin:left bottom;
}
main .section-heading .sh-kicker, main .lauk-head .sh-kicker, main .order-head .sh-kicker { transform-origin:center bottom; }
main h2.sh-title { margin-top:4px !important; font-family:var(--tall) !important; font-weight:400 !important; font-size:clamp(38px,5.16vw,79px) !important; line-height:.95 !important; letter-spacing:-.01em !important; }
main .sh-sub {
  margin-top:14px !important; max-width:46ch !important; font-family:"Fredoka","DM Sans",Arial,sans-serif !important; font-weight:600 !important;
  font-size:clamp(17px,1.38vw,20.5px) !important; line-height:1.4 !important; letter-spacing:-.005em !important; opacity:1;
}
main .section-heading .sh-sub, main .lauk-head .sh-sub { margin-left:auto; margin-right:auto; }
/* panel title inside the order card sits one level below the section title */
main h3.sh-panel { font-size:clamp(24px,2.58vw,38px) !important; line-height:1 !important; }
@media(max-width:800px){
  main .sh-kicker { font-size:clamp(26px,7.22vw,32.5px) !important; }
  main h2.sh-title { font-size:clamp(34.5px,9.89vw,46.5px) !important; }
  main .sh-sub { font-size:clamp(16px,3.96vw,17px) !important; }
  main h3.sh-panel { font-size:clamp(20.5px,6.02vw,26px) !important; }
}

/* After reordering, the section right below the hero marquee gets the marquee offset */
.home-opening + section { scroll-snap-align:start; scroll-margin-top:63px; }
@media(max-width:800px){ .home-opening + section { scroll-margin-top:50px; } }
.about-branches { display:inline-block; line-height:1.35; }
.about-branches span { display:inline-block; margin-left:4px; }

/* SVG arrows (replace text arrows that iOS renders as emoji) */
.tbg-arrow { display:inline-block; width:1em; height:1em; vertical-align:-.12em; flex:0 0 auto; }
.shop-btn .tbg-arrow, .lauk-all .tbg-arrow, .welcome-order-cta .tbg-arrow { width:1.05em; height:1.05em; }

/* Kicker → title spacing: same tight overlap as "tengah lapar? / KLIK UNTUK ORDER." in every section */
main .sh-kicker { display:block !important; width:fit-content; margin:0 0 6px !important; padding:0 !important; }
main .section-heading .sh-kicker, main .lauk-head .sh-kicker, main .order-head .sh-kicker { margin-left:auto !important; margin-right:auto !important; }
main h2.sh-title { margin-top:0 !important; }
main .sh-kicker { transform-origin:center center !important; }

/* Mobile: scroll freely inside tall sections, only settle onto a section's start when
   the visitor arrives near it (mandatory snapping pulled people back to the top of
   long sections on iPhone). Desktop keeps the one-scroll-one-section feel. */
@media (max-width:800px){
  html:has(.home-opening) { scroll-snap-type:y proximity; }
  .home-opening .hero, main > section, main + .order-locations,
  .site-frame:has(.home-opening) .tbg-footer { scroll-snap-stop:normal; }
}

/* ==========================================================================
   Order section v2 — "dah lapar? / PILIH CARA ORDER."
   Desktop: intro column + 2x2 brand diamonds. Mobile: featured TBG card + row cards.
   ========================================================================== */
.order-section .order-inner { padding-top:clamp(56px,7vw,88px); padding-bottom:clamp(56px,7vw,88px); }
.order-section .order-card {
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(28px,4vw,64px); align-items:center;
  max-width:1240px; margin:0 auto; padding:clamp(36px,4.4vw,60px);
  background:var(--cream); color:var(--ink); border:3px solid var(--red); border-radius:22px; box-shadow:10px 10px 0 var(--yellow); overflow:visible;
}
.order-card .order-head { text-align:left; margin:0; }
main .order-card .order-head .sh-kicker { margin-left:0 !important; margin-right:0 !important; color:var(--red); }
.order-card .order-head h2 { color:var(--blue); }
.order-card .order-head h2 .section-dots { color:var(--red); }
.order-card .order-sub { color:var(--ink); max-width:24ch !important; }
.order-sub--mobile, .order-note--mobile { display:none; }

.order-direct { margin-top:clamp(22px,2.4vw,32px); }
.order-chip {
  display:inline-block; padding:7px 14px 6px; background:var(--yellow); color:var(--ink); border:2px solid var(--ink); border-radius:999px;
  font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.08em; line-height:1;
}
.order-checks { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; }
.order-checks li { display:flex; align-items:center; gap:10px; font-family:"Fredoka","DM Sans",Arial,sans-serif; font-weight:600; font-size:clamp(16px,1.16vw,17px); }
.order-check { display:grid; place-items:center; width:26px; height:26px; flex:0 0 26px; border-radius:50%; background:var(--blue); color:var(--cream); }
.order-main-cta {
  display:inline-flex; align-items:center; gap:12px; margin-top:24px; min-height:58px; padding:0 28px;
  background:var(--red); color:var(--cream); border:2px solid var(--ink); border-radius:999px; box-shadow:5px 5px 0 var(--ink);
  font-family:var(--display); font-weight:800; font-size:clamp(17px,1.38vw,20.5px); letter-spacing:.04em; text-decoration:none;
  transition:translate .18s ease, box-shadow .18s ease;
}
.order-main-cta:hover { translate:-2px -2px; box-shadow:7px 7px 0 var(--ink); }
.order-main-cta:active { translate:3px 3px; box-shadow:2px 2px 0 var(--ink); }
.order-main-cta .tbg-arrow { transition:translate .18s ease; }
.order-main-cta:hover .tbg-arrow { translate:4px 0; }
.order-note { margin:22px 0 0 !important; font-size:14px; line-height:1.5; color:#65594e; }

/* Platform picks — desktop diamonds */
.order-picks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(44px,4.6vw,68px) clamp(12px,2vw,28px); }
.opick { position:relative; display:flex; flex-direction:column; align-items:center; text-decoration:none; color:var(--ink); outline:none; }
.opick__badge { position:relative; display:grid; place-items:center; width:min(100%,clamp(150px,14.5vw,216px)); aspect-ratio:1; }
.opick__badge::before {
  content:""; position:absolute; inset:14.6%; border-radius:18%; background:var(--brand); border:3px solid var(--ink);
  transform:rotate(45deg); box-shadow:5px 5px 0 var(--ink); transition:transform .25s cubic-bezier(.3,1.5,.5,1), box-shadow .25s ease;
}
.opick__logo {
  position:relative; display:grid; place-items:center; width:44%; aspect-ratio:1; border-radius:50%; background:#fff;
  border:3px solid var(--ink); overflow:hidden; translate:0 -12%; transition:translate .25s cubic-bezier(.3,1.5,.5,1);
}
.opick__logo img { width:74%; height:74%; object-fit:contain; display:block; }
.opick--website .opick__logo img { width:88%; height:88%; }
.opick--foodpanda .opick__logo img { width:70%; height:70%; border-radius:12px; }
.opick__logo .tbg-icon { width:50%; height:50%; color:var(--brand); }
.opick__cta {
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px; margin-top:-34%; min-height:34px; padding:0 14px;
  background:#fff; color:var(--brand); border:2px solid var(--ink); border-radius:999px;
  font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.06em; line-height:1; white-space:nowrap;
}
.opick__cta-jom { display:none; }
.opick__cta .tbg-arrow { width:15px; height:15px; }
.opick__body { display:flex; flex-direction:column; align-items:center; margin-top:14px; }
.opick__name {
  display:inline-block; padding:6px 14px 5px; background:var(--cream); border:2px solid var(--ink); border-radius:10px;
  font-family:var(--display); font-weight:800; font-size:clamp(15px,1.07vw,17px); letter-spacing:.05em; line-height:1; white-space:nowrap;
}
.opick__desc { display:none; }
:is(a,button).opick:hover .opick__badge::before, :is(a,button).opick:focus-visible .opick__badge::before { transform:rotate(45deg) scale(1.06); box-shadow:8px 8px 0 var(--ink); }
:is(a,button).opick:hover .opick__logo, :is(a,button).opick:focus-visible .opick__logo { translate:0 -18%; }
:is(a,button).opick:focus-visible .opick__name { outline:3px solid var(--blue); outline-offset:3px; }
.opick.is-unavailable { cursor:default; }
.opick.is-unavailable .opick__badge, .opick.is-unavailable .opick__body { opacity:.55; filter:saturate(.75); }
.opick.is-unavailable .opick__cta { color:#7d7268; background:#f1e7d6; }

/* Narrow desktop / tablet: stack intro above the diamonds */
@media (min-width:801px) and (max-width:1060px) {
  .order-section .order-card { grid-template-columns:1fr; }
  .order-picks { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* Mobile — featured TBG card + platform rows */
@media (max-width:800px) {
  .order-section .order-inner { padding:44px 16px 52px; }
  .order-section .order-card { display:block; padding:28px 16px 22px; border-radius:18px; box-shadow:6px 6px 0 var(--yellow); }
  .order-card .order-head { text-align:center; }
  main .order-card .order-head .sh-kicker { margin-left:auto !important; margin-right:auto !important; }
  .order-card .order-sub { max-width:none !important; margin-left:auto; margin-right:auto; margin-top:10px !important; }
  .order-sub--desktop, .order-direct, .order-note--desktop { display:none; }
  .order-sub--mobile, .order-note--mobile { display:block; }
  .order-note--mobile { text-align:center; font-size:13px; margin:18px auto 0 !important; max-width:32ch; }

  .order-picks { display:flex; flex-direction:column; gap:12px; margin-top:24px; }
  .opick {
    display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 12px 12px 10px;
    background:#fffaf1; border:2px solid var(--ink); border-radius:14px; box-shadow:3px 3px 0 var(--ink);
    transition:translate .15s ease, box-shadow .15s ease;
  }
  :is(a,button).opick:active { translate:2px 2px; box-shadow:1px 1px 0 var(--ink); }
  .opick__badge { width:52px; }
  .opick__badge::before { inset:12%; border-width:2px; border-radius:22%; box-shadow:2px 2px 0 var(--ink); }
  .opick__logo { width:58%; border-width:2px; translate:none; }
  :is(a,button).opick:hover .opick__logo, :is(a,button).opick:focus-visible .opick__logo { translate:none; }
  :is(a,button).opick:hover .opick__badge::before { transform:rotate(45deg); box-shadow:2px 2px 0 var(--ink); }
  .opick__body { align-items:flex-start; margin:0; min-width:0; }
  .opick__name { padding:0; border:0; background:none; border-radius:0; font-size:17px; letter-spacing:.02em; text-transform:none; }
  .opick--grabfood .opick__name { text-transform:none; }
  .opick__desc { display:block; margin-top:3px; text-wrap:balance; font-family:"Fredoka","DM Sans",Arial,sans-serif; font-weight:500; font-size:14px; line-height:1.25; color:#5d5248; }
  .opick__cta { margin:0; min-height:36px; padding:0 12px; background:var(--brand); color:#fff; border-color:var(--ink); font-size:14px; letter-spacing:.04em; }
  .opick__cta-jom { display:inline; }
  .opick.is-unavailable .opick__badge, .opick.is-unavailable .opick__body { opacity:.6; }
  .opick.is-unavailable .opick__cta { background:#ddd3c4; color:#6f655c; border-color:#b9ad9c; font-size:12.5px; }

  /* Featured: Portal rasmi TBG */
  .opick--primary {
    grid-template-columns:76px minmax(0,1fr); grid-template-areas:"badge body" "cta cta"; gap:14px 14px; padding:18px 16px 16px;
    background:var(--brand); color:var(--cream); border-radius:16px; box-shadow:4px 4px 0 var(--ink);
  }
  .opick--primary .opick__badge { grid-area:badge; width:76px; }
  .opick--primary .opick__badge::before { background:var(--yellow); }
  .opick--primary .opick__body { grid-area:body; }
  .opick--primary .opick__name { font-family:var(--tall); font-weight:400; font-size:22.5px; letter-spacing:.01em; line-height:1; color:var(--cream); }
  .opick--primary .opick__desc { color:var(--cream); opacity:.95; font-size:15px; font-weight:600; margin-top:5px; }
  .opick--primary .opick__cta { grid-area:cta; justify-content:center; min-height:50px; background:var(--cream); color:var(--red); font-size:17px; border-width:2px; }
}

/* Order diamonds v3 — bigger flat diamonds, icon straight on the colour (transparent PNG), red-outlined labels */
.order-section .order-card { grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); }
.opick__logo { background:none; border:0; border-radius:0; overflow:visible; }
.opick__logo img { width:100% !important; height:100% !important; object-fit:contain; border-radius:0 !important; }
.opick__ph {
  display:grid; place-items:center; width:100%; height:100%; border:2px dashed rgba(255,255,255,.85); border-radius:14%;
  color:#fff; font-family:var(--display); font-weight:800; font-size:clamp(12px,0.86vw,15px); letter-spacing:.12em;
}
@media (min-width:801px) {
  .order-picks { gap:clamp(10px,1.2vw,18px) clamp(6px,1vw,14px); }
  .opick__badge { width:min(100%,clamp(220px,21vw,300px)); }
  .opick__badge::before { inset:14.6%; border:0; border-radius:20%; box-shadow:none; }
  .opick__logo { width:40%; translate:0 -16%; }
  :is(a,button).opick:hover .opick__logo, :is(a,button).opick:focus-visible .opick__logo { translate:0 -20%; }
  :is(a,button).opick:hover .opick__badge::before, :is(a,button).opick:focus-visible .opick__badge::before { transform:rotate(45deg) scale(1.04); box-shadow:none; }
  .opick__cta {
    margin-top:-31%; min-height:clamp(34px,2.8vw,42px); min-width:clamp(110px,10vw,150px); justify-content:center; padding:0 20px;
    background:#fdf1e3; color:var(--brand); border:0; border-radius:12px; font-size:clamp(15px,1.07vw,17px);
  }
  .opick__cta .tbg-arrow { display:none; }
  .opick__body { margin-top:clamp(-30px,-2vw,-18px); position:relative; z-index:2; }
  .opick__name {
    min-width:clamp(170px,15vw,220px); text-align:center; padding:9px 20px 8px; background:#fff; color:#1d4f9c;
    border:2px solid var(--red); border-radius:8px; font-size:clamp(16px,1.25vw,19px); letter-spacing:.04em;
  }
  .opick--foodpanda .opick__name, .opick--shopeefood .opick__name { letter-spacing:0; }
  :is(a,button).opick:focus-visible .opick__name { outline:3px solid var(--blue); outline-offset:3px; }
  .opick.is-unavailable .opick__badge, .opick.is-unavailable .opick__body { opacity:1; filter:none; }
  .opick.is-unavailable .opick__cta { background:rgba(255,255,255,.28); color:#fde3cf; }
}
@media (max-width:800px) {
  .opick__logo { width:62%; }
  .opick--primary .opick__logo { width:62%; }
  .opick__ph { font-size:0; border-width:1.5px; }
  .opick--primary .opick__badge::before { background:var(--yellow); }
  .opick--primary .opick__ph { border-color:rgba(25,44,60,.55); }
}
@media (min-width:801px) {
  .opick { --d:clamp(220px,19vw,272px); }
  .opick__badge { width:var(--d); }
  .opick__badge::before { border-radius:16%; }
  .opick__logo { width:38%; translate:0 -22%; }
  :is(a,button).opick:hover .opick__logo, :is(a,button).opick:focus-visible .opick__logo { translate:0 -26%; }
  .opick__cta { margin-top:calc(var(--d) * -.34); min-height:38px; }
  .opick__body { margin-top:calc(var(--d) * .07); }
  .order-picks { row-gap:12px; }
  .opick__cta { order:1; }
  .opick__body { order:2; }
}
/* Diamonds fill their column so side corners meet corner-to-corner */
@media (min-width:801px) {
  .order-section .order-card { grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(20px,3vw,48px); }
  .order-picks { container-type:inline-size; gap:0; }
  .opick { --d:50cqw; }
  .opick__badge { width:var(--d); }
  .opick__name { min-width:calc(var(--d) * .7); }
  .opick__cta { min-width:calc(var(--d) * .48); }
}
@media (min-width:801px) and (max-width:1060px) { .opick { --d:25cqw; } .opick__name { font-size:15px; padding-inline:10px; } .opick__cta { font-size:14px; } }
@media (min-width:801px) {
  .opick__badge::before { inset:11%; }               /* rounded tips reach the column edge */
  .order-section .order-inner { padding-top:clamp(36px,4vw,56px); padding-bottom:clamp(36px,4vw,56px); }
  .order-section .order-card { padding-top:clamp(28px,3vw,40px); padding-bottom:clamp(28px,3vw,40px); }
}
/* Small breathing gap between diamonds */
@media (min-width:801px) {
  .order-picks { --g:clamp(18px,2vw,28px); gap:var(--g); }
  .opick { --d:calc((100cqw - var(--g)) / 2); }
}
@media (min-width:801px) and (max-width:1060px) { .opick { --d:calc((100cqw - var(--g) * 3) / 4); } }

/* Hero headline: script line + big Fredoka line (ref. "Air tangan / MASAKAN MAMA.") */
.hero h1#hero-title { line-height:1; letter-spacing:0; white-space:normal; }
.hero h1#hero-title .hero-script {
  display:block; width:fit-content; margin:0 0 -.04em .04em;
  font-family:var(--script); font-weight:400; text-transform:none; letter-spacing:0;
  font-size:clamp(41.5px,4.64vw,86px); line-height:1.05; color:var(--cream);
  transform:rotate(-5deg); transform-origin:left bottom;
}
.hero h1#hero-title .hero-big {
  display:block; font-family:var(--tall); font-weight:400; text-transform:uppercase;
  font-size:clamp(50px,5.68vw,106.5px); line-height:.9; letter-spacing:-.005em; color:var(--cream);
}
.hero h1#hero-title .hero-dots { font-family:inherit; font-size:1em; letter-spacing:0; }
@media(max-width:800px) {
  .hero h1#hero-title .hero-script { font-size:clamp(31px,8.94vw,43px); margin-bottom:-.02em; }
  .hero h1#hero-title .hero-big { font-size:clamp(39.5px,11.52vw,55px); line-height:.92; }
}
.hero h1#hero-title .hero-script { white-space:nowrap; font-size:clamp(48px,5.16vw,94.5px); text-shadow:0 3px 14px rgba(40,22,0,.6), 0 1px 2px rgba(40,22,0,.55); }
@media(max-width:800px) { .hero h1#hero-title .hero-script { font-size:clamp(26px,8.6vw,38px); } }

/* Fredoka is wider than Anton/Barlow — rebalance tight spots (3 Oct) */
@media (min-width:801px) { main .order-card h2.sh-title { font-size:clamp(32.5px,3.53vw,51.5px) !important; } }
@media (max-width:800px) {
  .opick__name { font-size:16px; }
  .opick--primary .opick__name { font-size:17px; letter-spacing:0; }
  .opick__cta { min-height:34px; padding:0 11px; font-size:13px; gap:4px; }
  .opick { gap:10px; }
}

/* Hero v3 (client 3 Oct): "AYAM KICAP PALING SEDAP" is the bold headline (Lilita One),
   "Viral No. 1 Malaysia." becomes a smaller, finer line underneath. */
.hero h1#hero-title .hero-big {
  display:block; font-family:var(--tall); font-weight:400; text-transform:uppercase;
  font-size:clamp(51.5px,5.85vw,110px); line-height:.92; letter-spacing:.005em; color:var(--cream);
}
.hero h1#hero-title .hero-sub {
  display:block; margin-top:.5em; font-family:"Fredoka", var(--body); font-weight:600; text-transform:none;
  font-size:clamp(19px,1.81vw,31px); line-height:1.1; letter-spacing:.01em; color:var(--yellow);
}
.hero h1#hero-title .hero-sub .hero-dots { color:inherit; }
@media(max-width:800px) {
  .hero h1#hero-title .hero-big { font-size:clamp(39.5px,11.18vw,55px); line-height:.94; }
  .hero h1#hero-title .hero-sub { font-size:clamp(17px,4.64vw,20.5px); margin-top:.45em; }
}
.hero h1#hero-title .hero-sub { color:var(--cream); text-transform:uppercase; letter-spacing:.14em; font-size:clamp(17px,1.38vw,24px); margin-top:.7em; }
@media(max-width:800px) { .hero h1#hero-title .hero-sub { font-size:clamp(15px,3.7vw,17px); letter-spacing:.12em; } }

/* Hero v4 (client ref "Nasi Ayam Kicap / Sambal Gesek"): oval SEJAK 2017 badge,
   retro display serif headline (Abril Fatface), chunky caps line underneath (Lilita One). */
.hero-since {
  display:inline-grid; place-items:center; margin:0 0 .6em .15em; padding:.55em 1.6em .5em;
  border:2px solid var(--cream); border-radius:50%; rotate:-4deg;
  font-family:var(--tall); font-size:clamp(13px,0.86vw,16px); line-height:1; letter-spacing:.06em; text-align:center; color:var(--cream);
}
.hero h1#hero-title .hero-big {
  font-family:"Abril Fatface", Georgia, serif; font-weight:400; text-transform:none;
  font-size:clamp(53.5px,6.02vw,113.5px); line-height:.9; letter-spacing:-.01em; color:var(--cream);
}
.hero h1#hero-title .hero-sub {
  margin-top:.45em; font-family:var(--tall); font-weight:400; text-transform:uppercase;
  font-size:clamp(19px,1.81vw,32.5px); line-height:1; letter-spacing:.06em; color:var(--cream);
}
@media(max-width:800px) {
  .hero-since { font-size:12px; margin-bottom:.5em; }
  .hero h1#hero-title .hero-big { font-size:clamp(41.5px,11.7vw,57px); line-height:.92; }
  .hero h1#hero-title .hero-sub { font-size:clamp(17px,4.64vw,20.5px); letter-spacing:.05em; }
}
/* Tagline removed (3 Oct): keep a clear gap between the headline block and the CTA */
.hero-heading .pill { margin-top:clamp(22px,2.4vw,34px); }

/* Hero v5 (3 Oct): new copy, badge removed, centred on mobile */
.hero h1#hero-title .hero-big { font-size:clamp(48px,5.16vw,100px); }
@media(max-width:800px) {
  .home-opening .hero-heading { text-align:center; display:flex; flex-direction:column; align-items:center; }
  .hero h1#hero-title .hero-big { font-size:clamp(34.5px,9.8vw,48px); line-height:.95; }
  .hero h1#hero-title .hero-sub { font-size:clamp(15px,3.78vw,17px); letter-spacing:.04em; }
}

/* Tentang kami: team photo (4 Oct) — heading + copy on the left, framed photo on the right */
.about-content { grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); grid-template-areas:"head photo" "copy photo"; column-gap:clamp(36px,5vw,80px); row-gap:24px; align-items:start; }
.about-content > div:first-child { grid-area:head; align-self:end; }
.about-content > .about-copy { grid-area:copy; align-self:start; }
.about-photo {
  grid-area:photo; align-self:center; margin:0; position:relative; rotate:1.5deg;
  border:3px solid var(--ink); border-radius:20px; overflow:hidden; background:#e7b008;
  box-shadow:10px 10px 0 var(--yellow);
}
.about-photo img { display:block; width:100%; height:auto; aspect-ratio:1400/1221; object-fit:cover; }
@media(max-width:800px) {
  .about-content { grid-template-columns:1fr; grid-template-areas:"head" "photo" "copy"; row-gap:26px; }
  .about-photo { rotate:1deg; border-radius:16px; box-shadow:6px 6px 0 var(--yellow); margin-right:6px; }
}
/* TBG Products (4 Oct): moved after Lauk Tambahan; on mobile the details come before the photo */


/* TBG Products mobile (4 Oct): title + lead, then framed photo, then pouch/jar cards and shop buttons.
   .products-copy dissolves (display:contents) so the photo can sit between its parts — no duplicate image. */
@media(max-width:800px){
  .products-section { display:flex; flex-direction:column; padding:40px 20px 52px; }
  .products-copy { display:contents; }
  .products-copy > * { order:3; }
  .products-copy > .products-script, .products-copy > h2, .products-copy > .products-lead { order:1; }
  .products-media {
    order:2; margin:26px 6px 4px 0; aspect-ratio:1121 / 1403; max-height:70svh;
    border:3px solid var(--ink); border-radius:18px; rotate:-1.2deg; box-shadow:7px 7px 0 var(--yellow);
  }
  .products-media img { object-position:50% 35%; }
}

/* Testimonials (4 Oct): stacked slides → fixed card height, arrows stay put; clamp + "Baca penuh"; bigger tap targets */
.testimony-slides.is-stacked { display:grid; }
.testimony-slides.is-stacked .testimony-slide {
  grid-area:1 / 1; display:flex; flex-direction:column; justify-content:center;
  visibility:hidden; opacity:0; pointer-events:none; animation:none;
}
.testimony-slides.is-stacked .testimony-slide.is-active { visibility:visible; opacity:1; pointer-events:auto; animation:testimony-in .32s ease both; }
.testimony-slides.is-stacked .testimony-slide blockquote { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; overflow:hidden; }
.testimony-slides.is-stacked .testimony-slide.is-expanded blockquote { -webkit-line-clamp:unset; display:block; }
.testimony-more {
  align-self:flex-start; margin-top:12px; padding:6px 0; border:0; background:none; color:var(--yellow);
  font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.04em; text-decoration:underline; text-underline-offset:4px;
}
.testimony-more[hidden] { display:none; }
.testimony-slides { touch-action:pan-y; }
@media(max-width:800px){
  .testimony-slides.is-stacked .testimony-slide blockquote { -webkit-line-clamp:7; }
  .testimony-arrows button { width:50px; height:50px; }
  .testimony-controls { margin-top:24px; }
}
@media(prefers-reduced-motion:reduce){ .testimony-slides.is-stacked .testimony-slide.is-active { animation:none; } }
/* Mobile: the floating back-to-top button sits bottom-right, so the arrows go on the left */
@media(max-width:800px){ .testimony-controls { flex-direction:row-reverse; } }

/* TBG Products desktop (4 Oct): framed photo like Tentang Kami (tilted the other way), cream background */
@media(min-width:801px){
  .products-section { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; column-gap:clamp(36px,5vw,80px); padding:clamp(48px,6vw,90px) var(--gutter); min-height:0; }
  .products-media {
    align-self:center; max-width:560px; width:100%; justify-self:end; aspect-ratio:1121 / 1403;
    border:3px solid var(--ink); border-radius:20px; rotate:-1.5deg; box-shadow:10px 10px 0 var(--yellow); background:#2a6db4;
  }
  .products-media img { object-position:50% 50%; }
  .products-copy { padding:0; }
}

/* Platform tiles that open the outlet picker are <button>s — strip UA button styling (zero specificity) */
:where(button.opick) { appearance:none; background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; text-align:inherit; cursor:pointer; width:100%; }

/* ==========================================================================
   Outlet picker (4 Oct): choose a branch, then open it on GrabFood / foodpanda / ShopeeFood
   ========================================================================== */
.outlet-picker {
  --brand:#2777b6;
  width:min(560px, calc(100vw - 32px)); max-height:min(760px, calc(100svh - 48px)); padding:0; margin:auto;
  border:3px solid var(--ink); border-radius:22px; background:var(--cream); color:var(--ink);
  box-shadow:10px 10px 0 var(--brand); overflow:hidden;
}
.outlet-picker[open] { display:flex; flex-direction:column; animation:op-in .28s cubic-bezier(.2,.9,.3,1.1) both; }
.outlet-picker::backdrop { background:rgba(8,24,37,.62); backdrop-filter:blur(4px); }
@keyframes op-in { from { opacity:0; transform:translateY(18px) scale(.98); } to { opacity:1; transform:none; } }
.outlet-picker__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:22px 22px 14px; background:var(--brand); color:#fff; }
.outlet-picker__kicker { margin:0 0 2px; font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.08em; text-transform:uppercase; opacity:.9; }
.outlet-picker__head h2 { margin:0; font-family:var(--tall); font-weight:400; font-size:clamp(26px,3.44vw,34.5px); line-height:1; }
.outlet-picker__close { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:0; border:2px solid #fff; border-radius:50%; background:transparent; color:#fff; cursor:pointer; }
.outlet-picker__close:hover { background:#fff; color:var(--brand); }
.outlet-picker__search { display:flex; align-items:center; gap:10px; margin:16px 20px 0; padding:0 14px; min-height:48px; border:2px solid var(--ink); border-radius:12px; background:#fff; }
.outlet-picker__search input { flex:1; min-width:0; border:0; outline:0; background:none; font:500 16px var(--body); color:var(--ink); }
.outlet-picker__search:focus-within { outline:3px solid var(--brand); outline-offset:2px; }
.outlet-picker__chips { display:flex; gap:8px; padding:12px 20px; overflow-x:auto; scrollbar-width:none; flex:0 0 auto; }
.outlet-picker__chips::-webkit-scrollbar { display:none; }
.outlet-picker__chip { flex:none; min-height:36px; padding:0 14px; border:2px solid var(--ink); border-radius:999px; background:#fff; color:var(--ink); font-family:var(--display); font-weight:700; font-size:14px; cursor:pointer; }
.outlet-picker__chip[aria-pressed="true"] { background:var(--ink); color:var(--cream); }
.outlet-picker__list { flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:4px 20px 12px; display:grid; gap:8px; align-content:start; }
.outlet-picker__row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px; padding:10px 12px 10px 16px; border:2px solid var(--ink); border-radius:12px; background:#fff; color:var(--ink); text-decoration:none; transition:translate .15s ease, box-shadow .15s ease; }
a.outlet-picker__row:hover, a.outlet-picker__row:focus-visible { translate:-2px -2px; box-shadow:4px 4px 0 var(--ink); outline:none; }
.outlet-picker__text { display:flex; flex-direction:column; min-width:0; }
.outlet-picker__text strong { font-family:var(--display); font-weight:700; font-size:17px; line-height:1.15; }
.outlet-picker__text span { font-size:13px; color:#6b6157; }
.outlet-picker__go { flex:none; display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px; border-radius:999px; background:var(--brand); color:#fff; font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.04em; }
.outlet-picker__go .tbg-arrow { width:15px; height:15px; }
.outlet-picker__row.is-off { background:transparent; border-style:dashed; border-color:#b9ad9c; color:#8a8178; min-height:52px; }
.outlet-picker__na { flex:none; font-size:12px; font-weight:700; letter-spacing:.04em; color:#8a8178; text-transform:uppercase; }
.outlet-picker__sub { margin:10px 2px 0; font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#8a8178; }
.outlet-picker__empty { margin:18px 0; text-align:center; color:#6b6157; }
.outlet-picker__all { display:flex; align-items:center; justify-content:center; gap:6px; flex:0 0 auto; padding:14px 20px 16px; border-top:2px dashed #d9cdbb; color:var(--ink); font-weight:700; font-size:14px; text-decoration:underline; text-underline-offset:4px; }
.outlet-picker__all .tbg-arrow { width:15px; height:15px; }
.outlet-picker__all[hidden] { display:none; }
@media(max-width:800px){
  .outlet-picker { width:100vw; max-width:100vw; max-height:88svh; margin:auto 0 0; border-width:3px 0 0; border-radius:22px 22px 0 0; box-shadow:none; }
  @keyframes op-in { from { transform:translateY(100%); } to { transform:none; } }
  .outlet-picker__head { padding:18px 18px 12px; }
  .outlet-picker__search { margin:14px 16px 0; }
  .outlet-picker__chips, .outlet-picker__list { padding-left:16px; padding-right:16px; }
  .outlet-picker__list { padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
}
@media(prefers-reduced-motion:reduce){ .outlet-picker[open] { animation:none; } }
html.outlet-picker-open { overflow:hidden; }

/* iOS: tapping "next" quickly twice triggered double-tap-to-zoom. manipulation keeps scroll + pinch-zoom but drops the double-tap zoom. */
a, button, [role="button"], label, summary, .testimony-stage, .testimony-controls { touch-action:manipulation; }
.testimony-arrows button { -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; }
/* Hover lift should only apply with a real mouse (on touch it "sticks" after tapping) */
@media (hover:none) { .testimony-arrows button:hover { transform:none; background:transparent; color:var(--cream); } }
.testimony-arrows button:active { transform:scale(.94); }

/* Outlet picker — QR view for app-only platforms (ShopeeFood) on desktop */
.outlet-picker.is-qr .outlet-picker__search, .outlet-picker.is-qr .outlet-picker__chips,
.outlet-picker.is-qr .outlet-picker__list, .outlet-picker.is-qr .outlet-picker__all { display:none; }
.outlet-picker__qr { display:flex; flex-direction:column; align-items:center; text-align:center; padding:16px 28px 26px; overflow-y:auto; }
.outlet-picker__qr[hidden] { display:none; }
.outlet-picker__back { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 4px; border:0; background:none; color:var(--ink); font-family:var(--display); font-weight:700; font-size:14px; cursor:pointer; }
.outlet-picker__back:hover { text-decoration:underline; text-underline-offset:4px; }
.outlet-picker__qr-code { display:grid; place-items:center; width:220px; height:220px; margin:8px 0 16px; padding:12px; border:3px solid var(--ink); border-radius:18px; background:#fff; box-shadow:6px 6px 0 var(--brand); }
.outlet-picker__qr-code svg { width:100%; height:100%; display:block; }
.outlet-picker__qr-loading { font-size:13px; color:#6b6157; }
.outlet-picker__qr h3 { margin:0; font-family:var(--tall); font-weight:400; font-size:24px; line-height:1.05; color:var(--brand); }
.outlet-picker__qr p { margin:8px 0 0; max-width:34ch; font-size:15px; line-height:1.5; color:var(--ink); }
.outlet-picker__qr-link { margin-top:14px; font-size:13px; font-weight:700; color:#6b6157; text-decoration:underline; text-underline-offset:4px; }
.outlet-picker__row.is-pending { cursor:default; background:#fffaf1; }
a.outlet-picker__row.is-pending:hover { translate:none; box-shadow:none; }

/* ==========================================================================
   Outlet picker v2 (4 Oct) — simple & clean: white sheet, soft shadow, list with dividers
   ========================================================================== */
.outlet-picker {
  width:min(480px, calc(100vw - 32px)); border:0; border-radius:20px; background:#fff;
  box-shadow:0 24px 60px rgba(10,30,50,.28);
}
.outlet-picker::backdrop { background:rgba(10,24,37,.5); backdrop-filter:blur(3px); }
.outlet-picker__head { align-items:center; padding:20px 20px 4px 24px; background:#fff; color:var(--ink); }
.outlet-picker__kicker { display:inline-flex; align-items:center; gap:7px; margin:0 0 4px; font-family:var(--body); font-weight:700; font-size:12px; letter-spacing:.08em; color:var(--brand); opacity:1; }
.outlet-picker__kicker::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--brand); }
.outlet-picker__head h2 { font-family:var(--display); font-weight:700; font-size:20.5px; letter-spacing:0; color:var(--ink); }
.outlet-picker__close { flex:0 0 38px; width:38px; height:38px; border:0; background:#f2eee8; color:var(--ink); }
.outlet-picker__close:hover { background:#e6e0d7; color:var(--ink); }
.outlet-picker__search { margin:14px 20px 0 24px; min-height:44px; border:1px solid #e3ddd3; border-radius:12px; background:#faf8f5; color:#8a8178; }
.outlet-picker__search:focus-within { outline:0; border-color:var(--brand); background:#fff; box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.outlet-picker__search input { font-size:16px; } /* <16px makes iOS Safari zoom on focus */
.outlet-picker__chips { gap:6px; padding:12px 20px 8px 24px; }
.outlet-picker__chip { min-height:32px; padding:0 12px; border:1px solid #e3ddd3; background:#fff; color:#4d443b; font-family:var(--body); font-weight:600; font-size:13px; }
.outlet-picker__chip[aria-pressed="true"] { border-color:var(--ink); background:var(--ink); color:#fff; }
.outlet-picker__list { gap:0; padding:0 20px 8px 24px; }
.outlet-picker__row {
  min-height:58px; padding:10px 2px; border:0; border-bottom:1px solid #efeae3; border-radius:0; background:transparent;
}
a.outlet-picker__row:hover, a.outlet-picker__row:focus-visible { translate:none; box-shadow:none; background:#faf8f5; outline:none; }
a.outlet-picker__row:focus-visible { box-shadow:inset 3px 0 0 var(--brand); }
.outlet-picker__text strong { font-family:var(--body); font-weight:700; font-size:15px; color:var(--ink); }
.outlet-picker__text span { font-size:12.5px; color:#8a8178; }
.outlet-picker__go { min-height:32px; padding:0 12px; font-family:var(--body); font-weight:700; font-size:12px; letter-spacing:.03em; background:color-mix(in srgb, var(--brand) 12%, #fff); color:var(--brand); }
a.outlet-picker__row:hover .outlet-picker__go { background:var(--brand); color:#fff; }
.outlet-picker__row.is-off { border:0; border-bottom:1px solid #f4f0ea; min-height:48px; background:transparent; }
.outlet-picker__row.is-off .outlet-picker__text strong { color:#a69d93; font-weight:600; }
.outlet-picker__na { font-size:11px; color:#b3aaa0; }
.outlet-picker__sub { margin:18px 0 2px; font-family:var(--body); font-size:11px; letter-spacing:.1em; color:#a69d93; }
.outlet-picker__all { border-top:1px solid #efeae3; padding:14px 24px 16px; font-size:13px; font-weight:600; color:#6b6157; }
/* QR view */
.outlet-picker__qr { padding:6px 24px 24px; }
.outlet-picker__back { font-family:var(--body); font-weight:600; font-size:13px; color:#6b6157; }
.outlet-picker__qr-code { width:200px; height:200px; margin:6px 0 14px; padding:10px; border:1px solid #e3ddd3; border-radius:16px; box-shadow:none; }
.outlet-picker__qr h3 { font-family:var(--display); font-weight:700; font-size:17px; color:var(--ink); }
.outlet-picker__qr p { font-size:14px; color:#6b6157; }
.outlet-picker__qr-link { font-weight:600; }
@media(max-width:800px){
  .outlet-picker { width:100vw; max-width:100vw; border-radius:20px 20px 0 0; box-shadow:0 -10px 40px rgba(10,30,50,.2); }
  .outlet-picker::before { content:""; display:block; width:40px; height:4px; margin:8px auto 0; border-radius:4px; background:#e3ddd3; }
  .outlet-picker__head { padding:12px 16px 4px 20px; }
  .outlet-picker__search { margin:12px 16px 0 20px; }
  .outlet-picker__chips, .outlet-picker__list { padding-left:20px; padding-right:16px; }
}

/* Hero v6 (4 Oct, client picked option 2): headline in Lilita caps — same voice as the section titles.
   Sub line switches to Fredoka 700 so the two lines don't read as one block. */
.hero h1#hero-title .hero-big { font-family:var(--tall); font-weight:400; text-transform:uppercase; letter-spacing:-.005em; line-height:.92; }
.hero h1#hero-title .hero-sub { font-family:"Fredoka", var(--body); font-weight:700; letter-spacing:.08em; }
@media(max-width:800px) { .hero h1#hero-title .hero-big { font-size:clamp(29px,8.26vw,39.5px); } }

/* Hero v7 (5 Oct): hero headline must out-rank the section titles.
   Mobile: as big as fits "NASI AYAM KICAP" on one line. CTA: compact centred pill, not a full-width bar. */
.hero h1#hero-title .hero-big { font-size:clamp(56px,6.4vw,112px); }
@media(max-width:800px) {
  .hero h1#hero-title .hero-big { font-size:clamp(32px,10.5vw,48px); }
  .hero-heading .pill { display:inline-flex; width:auto; min-width:0; align-self:center; justify-content:center; gap:14px; padding:14px 28px; margin-top:18px; }
}
/* Mobile section titles one step below the hero headline (hierarchy: hero > section). */
@media(max-width:800px) { main h2.sh-title { font-size:clamp(29px,8.8vw,40px) !important; } }

/* 5 Oct: TBG Products now sits right under the marquee — on mobile, clear the tilted ribbon */
@media(max-width:800px){ .home-opening + .products-section { padding-top:calc(9vw + 26px) !important; } }