@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,600;0,700;0,800;0,900;1,800&family=Hanken+Grotesk:wght@400;600;700&display=swap");


/* ============================================================
   GrabandGo.us — homepage stylesheet
   Ported from ~/code/grabandgo-us-site-design/styles.css.
   Baked variants (overlay hero / overlap cards / light theme)
   are the base styles; the standalone's data-attribute variant
   overrides can never activate under the runtime layout and
   were dropped.
   ============================================================ */
body[data-site-id="grabandgo-us"] {
  /* Brand core */
  --navy:        #16263f;
  --navy-2:      #1e3354;
  --navy-ink:    #1b2840;
  --green:       #5fae34;   /* bright brand green — CTAs, marks */
  --green-2:     #4f9a29;
  --green-ink:   #235c2b;   /* forest green — headings on light */
  --green-ink-2: #1b4a23;
  --orange:      #df6a22;   /* snacks / energy accent */
  --orange-2:    #c85a18;
  --blue:        #1d6cb0;   /* beverages accent */
  --blue-2:      #155a96;

  /* Surfaces */
  --paper:    #ffffff;
  --cream:    #f5f0e4;
  --cream-2:  #efe7d6;
  --cream-3:  #e8dec8;
  --ink:      #1d2433;
  --muted:    #5d6675;
  --muted-2:  #889;
  --line:     #e7e2d6;
  --line-2:   #d9d3c4;

  /* Category theming token (overridden per-card) */
  --cat: var(--green);

  /* Type */
  --display: "Archivo", system-ui, sans-serif;
  --body:    "Hanken Grotesk", system-ui, sans-serif;

  /* Shape */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --shadow-sm: 0 1px 2px rgba(22,38,63,.06), 0 2px 8px rgba(22,38,63,.05);
  --shadow:    0 18px 50px -22px rgba(22,38,63,.30), 0 6px 18px -12px rgba(22,38,63,.18);
  --shadow-lg: 0 40px 90px -40px rgba(22,38,63,.45);

  --maxw: 1240px;
  --gutter: clamp(20px, 4vw, 64px);
}
body[data-site-id="grabandgo-us"] * { box-sizing: border-box; }
:root:has(body[data-site-id="grabandgo-us"]) { scroll-behavior: smooth; scroll-padding-top: 86px; }
body[data-site-id="grabandgo-us"] {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 17px;
  line-height: 1.55;
}
/* :where keeps these element resets at the standalone's bare-element cascade
   weight so single-class rules (.gg-btn-*, .gg-nav-signin, …) still win. */
body[data-site-id="grabandgo-us"] :where(.gg-site img) { display: block; max-width: 100%; }
body[data-site-id="grabandgo-us"] :where(.gg-site a) { color: inherit; text-decoration: none; }
/* Keyboard focus — white inner + blue outer ring stays visible on light
   and dark surfaces alike. */
body[data-site-id="grabandgo-us"] .gg-site a:focus-visible, body[data-site-id="grabandgo-us"] .gg-site button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--blue);
}
body[data-site-id="grabandgo-us"] :where(.gg-site h1, .gg-site h2, .gg-site h3, .gg-site h4) { margin: 0; font-family: var(--display); line-height: 1.04; letter-spacing: -.01em; }
body[data-site-id="grabandgo-us"] :where(.gg-site p) { margin: 0; }
body[data-site-id="grabandgo-us"] .gg-wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
body[data-site-id="grabandgo-us"] .gg-eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-ink);
}
body[data-site-id="grabandgo-us"] .gg-section { padding-block: clamp(64px, 8vw, 120px); }
/* ============================================================
   Logo / wordmark
   ============================================================ */
body[data-site-id="grabandgo-us"] .gg-logo { display: inline-flex; align-items: center; gap: 11px; }
body[data-site-id="grabandgo-us"] .gg-logo-mark { width: 40px; height: 30px; flex: none; display: block; }
body[data-site-id="grabandgo-us"] .gg-logo-mark .gg-bar { fill: var(--green); }
body[data-site-id="grabandgo-us"] .gg-logo-word {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: 1.72rem;
  letter-spacing: -.02em;
  line-height: .9;
  color: var(--navy);
}
body[data-site-id="grabandgo-us"] .gg-logo-word .gg-a { color: var(--green); font-size: .62em; font-weight: 700; padding: 0 .06em; }
body[data-site-id="grabandgo-us"] .gg-logo-word .gg-us { font-size: .5em; font-weight: 700; color: var(--green); font-style: normal; vertical-align: super; }
body[data-site-id="grabandgo-us"] .gg-logo-tag {
  font-family: var(--body);
  font-style: italic;
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .01em;
  color: var(--muted);
  margin-top: 3px;
}
body[data-site-id="grabandgo-us"] .gg-logo-tag b { color: var(--green-ink); font-weight: 700; }
/* on dark surfaces */
body[data-site-id="grabandgo-us"] .gg-on-dark .gg-logo-word { color: #fff; }
body[data-site-id="grabandgo-us"] .gg-on-dark .gg-logo-tag { color: rgba(255,255,255,.72); }
body[data-site-id="grabandgo-us"] .gg-on-dark .gg-logo-tag b { color: var(--green); }
/* ============================================================
   Buttons
   ============================================================ */
body[data-site-id="grabandgo-us"] .gg-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: .96rem;
  letter-spacing: .005em;
  padding: 14px 24px; border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
body[data-site-id="grabandgo-us"] .gg-btn svg { width: 18px; height: 18px; }
body[data-site-id="grabandgo-us"] .gg-btn:hover { transform: translateY(-2px); }
body[data-site-id="grabandgo-us"] .gg-btn-green { background: var(--green); color: #fff; box-shadow: 0 10px 24px -10px rgba(95,174,52,.7); }
body[data-site-id="grabandgo-us"] .gg-btn-green:hover { background: var(--green-2); box-shadow: 0 16px 30px -12px rgba(95,174,52,.8); }
body[data-site-id="grabandgo-us"] .gg-btn-orange { background: var(--orange); color: #fff; box-shadow: 0 10px 24px -10px rgba(223,106,34,.65); }
body[data-site-id="grabandgo-us"] .gg-btn-orange:hover { background: var(--orange-2); }
body[data-site-id="grabandgo-us"] .gg-btn-blue { background: var(--blue); color: #fff; }
body[data-site-id="grabandgo-us"] .gg-btn-blue:hover { background: var(--blue-2); }
body[data-site-id="grabandgo-us"] .gg-btn-navy { background: var(--navy); color: #fff; }
body[data-site-id="grabandgo-us"] .gg-btn-navy:hover { background: var(--navy-2); }
body[data-site-id="grabandgo-us"] .gg-btn-ghost { background: transparent; color: var(--navy); border-color: var(--line-2); }
body[data-site-id="grabandgo-us"] .gg-btn-ghost:hover { border-color: var(--navy); background: rgba(22,38,63,.03); }
body[data-site-id="grabandgo-us"] .gg-btn-ghost-light { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.5); }
body[data-site-id="grabandgo-us"] .gg-btn-ghost-light:hover { background: rgba(255,255,255,.14); border-color: #fff; }
body[data-site-id="grabandgo-us"] .gg-btn-sm { padding: 10px 18px; font-size: .86rem; }
body[data-site-id="grabandgo-us"] .gg-btn-lg { padding: 17px 30px; font-size: 1.04rem; }
body[data-site-id="grabandgo-us"] .gg-link-arrow {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--display); font-weight: 700; font-size: .92rem;
  color: var(--cat);
}
body[data-site-id="grabandgo-us"] .gg-link-arrow svg { width: 16px; height: 16px; transition: transform .18s ease; }
body[data-site-id="grabandgo-us"] .gg-link-arrow:hover svg { transform: translateX(4px); }
/* ============================================================
   Header / nav
   ============================================================ */
body[data-site-id="grabandgo-us"] .gg-site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
body[data-site-id="grabandgo-us"] .gg-site-header.gg-scrolled { box-shadow: 0 6px 24px -16px rgba(22,38,63,.4); border-color: var(--line); }
body[data-site-id="grabandgo-us"] .gg-nav { display: flex; align-items: center; gap: 22px; height: 74px; }
body[data-site-id="grabandgo-us"] .gg-nav .gg-logo-word { font-size: 1.46rem; }
body[data-site-id="grabandgo-us"] .gg-nav .gg-logo-mark { width: 34px; height: 26px; }
body[data-site-id="grabandgo-us"] .gg-nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
body[data-site-id="grabandgo-us"] .gg-nav-links a {
  font-family: var(--display); font-weight: 600; font-size: .9rem; white-space: nowrap;
  color: var(--navy-ink); padding: 9px 11px; border-radius: 9px;
  transition: background .16s ease, color .16s ease;
}
body[data-site-id="grabandgo-us"] .gg-nav-links a:hover { background: rgba(22,38,63,.05); color: var(--green-ink); }
body[data-site-id="grabandgo-us"] .gg-nav-cta { display: flex; align-items: center; gap: 12px; margin-left: auto; }
body[data-site-id="grabandgo-us"] .gg-nav-signin {
  font-family: var(--display); font-weight: 700; font-size: .92rem; white-space: nowrap;
  color: var(--navy); padding: 11px 20px; border: 1.5px solid var(--line-2);
  border-radius: 999px; transition: border-color .16s ease, background .16s;
}
body[data-site-id="grabandgo-us"] .gg-nav-cta .gg-btn { white-space: nowrap; }
body[data-site-id="grabandgo-us"] .gg-nav-signin:hover { border-color: var(--navy); }
body[data-site-id="grabandgo-us"] .gg-nav-burger {
  display: none; width: 44px; height: 44px; border: 1.5px solid var(--line-2);
  border-radius: 11px; background: #fff; cursor: pointer; padding: 0;
  align-items: center; justify-content: center; margin-left: auto;
}
body[data-site-id="grabandgo-us"] .gg-nav-burger svg { width: 22px; height: 22px; color: var(--navy); }
/* ============================================================
   HERO  (slide 2)
   ============================================================ */
body[data-site-id="grabandgo-us"] .gg-hero { position: relative; background: var(--navy); overflow: hidden; }
body[data-site-id="grabandgo-us"] .gg-hero-media { position: absolute; inset: 0; z-index: 0; }
body[data-site-id="grabandgo-us"] .gg-hero-media img { width: 100%; height: 100%; object-fit: cover; }
body[data-site-id="grabandgo-us"] .gg-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(13,22,38,.94) 0%, rgba(13,22,38,.80) 38%, rgba(13,22,38,.28) 70%, rgba(13,22,38,.15) 100%),
    linear-gradient(0deg, rgba(13,22,38,.72) 0%, rgba(13,22,38,0) 36%);
}
body[data-site-id="grabandgo-us"] .gg-hero-inner { position: relative; z-index: 2; }
body[data-site-id="grabandgo-us"] .gg-hero-grid { display: grid; grid-template-columns: 1fr; align-items: center;
  min-height: 620px; padding-block: clamp(56px, 8vw, 104px); }
body[data-site-id="grabandgo-us"] .gg-hero-copy { max-width: 620px; }
body[data-site-id="grabandgo-us"] .gg-hero h1 {
  color: #fff; font-weight: 800;
  font-size: clamp(2.5rem, 5.6vw, 4.2rem);
  letter-spacing: -.025em; line-height: .98;
  text-wrap: balance;
}
body[data-site-id="grabandgo-us"] .gg-hero h1 .gg-accent { color: var(--green); }
body[data-site-id="grabandgo-us"] .gg-hero-sub {
  color: rgba(255,255,255,.86); font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.5; margin-top: 22px; max-width: 33em; text-wrap: pretty;
}
body[data-site-id="grabandgo-us"] .gg-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
body[data-site-id="grabandgo-us"] .gg-hero-badges { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 34px; }
body[data-site-id="grabandgo-us"] .gg-hero-badge { display: inline-flex; align-items: center; gap: 9px;
  color: rgba(255,255,255,.8); font-size: .9rem; font-weight: 600; }
body[data-site-id="grabandgo-us"] .gg-hero-badge svg { width: 18px; height: 18px; color: var(--green); }
/* Overlay hero is the baked variant; the split-hero side figure stays hidden. */
body[data-site-id="grabandgo-us"] .gg-hero-figure { display: none; position: relative; }
body[data-site-id="grabandgo-us"] .gg-hero-figure img { width: 100%; aspect-ratio: 4/3.4; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
body[data-site-id="grabandgo-us"] .gg-hero-figure .gg-figtag {
  position: absolute; left: 22px; top: 22px; z-index: 3;
  font-family: var(--display); font-weight: 800; font-style: italic;
  color: #fff; font-size: 1rem; letter-spacing: .02em;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
/* ============================================================
   CATEGORY CARDS  (slide 2)
   ============================================================ */
body[data-site-id="grabandgo-us"] .gg-cats { position: relative; z-index: 5; background: transparent; }
body[data-site-id="grabandgo-us"] .gg-cats-panel {
  background: #fff; border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  margin-top: clamp(-90px, -6vw, -64px);
  padding: clamp(26px, 3.2vw, 44px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 30px);
}
body[data-site-id="grabandgo-us"] .gg-cat-card {
  --cat: var(--green);
  position: relative; display: flex; flex-direction: column;
  padding: 8px 8px 8px; border-radius: var(--r-lg);
  transition: transform .2s ease, background .2s ease;
}
body[data-site-id="grabandgo-us"] .gg-cat-card.gg-snacks { --cat: var(--orange); }
body[data-site-id="grabandgo-us"] .gg-cat-card.gg-bevs { --cat: var(--blue); }
body[data-site-id="grabandgo-us"] .gg-cat-head { display: flex; align-items: center; gap: 14px; }
body[data-site-id="grabandgo-us"] .gg-cat-ico {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: var(--cat); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 22px -12px var(--cat);
}
body[data-site-id="grabandgo-us"] .gg-cat-ico svg { width: 30px; height: 30px; }
body[data-site-id="grabandgo-us"] .gg-cat-card h3 { font-size: 1.5rem; font-weight: 800; color: var(--cat); line-height: 1.02; letter-spacing: -.02em; }
body[data-site-id="grabandgo-us"] .gg-cat-body { display: flex; gap: 14px; margin: 16px 0 20px; align-items: flex-start; }
body[data-site-id="grabandgo-us"] .gg-cat-card p { color: var(--muted); font-size: .98rem; flex: 1; }
body[data-site-id="grabandgo-us"] .gg-cat-img { width: 122px; flex: none; }
body[data-site-id="grabandgo-us"] .gg-cat-img img { width: 122px; height: 104px; object-fit: cover; border-radius: 12px; }
body[data-site-id="grabandgo-us"] .gg-cat-card .gg-btn { margin-top: auto; align-self: flex-start; background: var(--cat); color: #fff; }
body[data-site-id="grabandgo-us"] .gg-cat-card .gg-btn:hover { filter: brightness(.94); }
/* ============================================================
   CHANNEL STRIP  (slide 2)
   ============================================================ */
body[data-site-id="grabandgo-us"] .gg-channels { background: var(--paper); }
body[data-site-id="grabandgo-us"] .gg-channels .gg-wrap { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
body[data-site-id="grabandgo-us"] .gg-channels-lede h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; color: var(--green-ink); line-height: 1.0; }
body[data-site-id="grabandgo-us"] .gg-channels-lede p { color: var(--muted); margin-top: 14px; max-width: 26em; }
body[data-site-id="grabandgo-us"] .gg-channel-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 6px 4px;
}
body[data-site-id="grabandgo-us"] .gg-channel {
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  text-align: center; padding: 18px 8px; border-radius: var(--r);
  transition: background .16s ease, transform .16s ease;
}
body[data-site-id="grabandgo-us"] .gg-channel:hover { background: var(--cream); transform: translateY(-3px); }
body[data-site-id="grabandgo-us"] .gg-channel-ico { width: 46px; height: 46px; color: var(--green-ink); }
body[data-site-id="grabandgo-us"] .gg-channel-ico svg { width: 100%; height: 100%; }
body[data-site-id="grabandgo-us"] .gg-channel span { font-family: var(--display); font-weight: 700; font-size: .82rem; color: var(--navy-ink); line-height: 1.15; }
/* ============================================================
   PIONEERS  (slide 3)
   ============================================================ */
body[data-site-id="grabandgo-us"] .gg-pioneers { background: var(--cream); position: relative; overflow: hidden; }
body[data-site-id="grabandgo-us"] .gg-pio-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 4vw, 64px); align-items: start; }
body[data-site-id="grabandgo-us"] .gg-pio h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); font-weight: 900; color: var(--green-ink-2); letter-spacing: -.02em; line-height: .96; text-transform: uppercase; }
body[data-site-id="grabandgo-us"] .gg-pio h2 em { font-style: normal; color: var(--green); display: block; }
body[data-site-id="grabandgo-us"] .gg-pio-lede { color: var(--ink); font-size: 1.1rem; margin-top: 18px; max-width: 38em; }
body[data-site-id="grabandgo-us"] .gg-pio-points { margin-top: 36px; display: flex; flex-direction: column; gap: 26px; }
body[data-site-id="grabandgo-us"] .gg-pio-point { display: grid; grid-template-columns: 52px 1fr; gap: 18px; }
body[data-site-id="grabandgo-us"] .gg-pio-num {
  width: 52px; height: 52px; border-radius: 50%; background: var(--green-ink);
  color: #fff; display: grid; place-items: center; font-family: var(--display);
  font-weight: 800; font-size: 1.4rem;
}
body[data-site-id="grabandgo-us"] .gg-pio-point h3 { font-size: 1.32rem; font-weight: 800; color: var(--navy); }
body[data-site-id="grabandgo-us"] .gg-pio-point p { color: var(--muted); margin-top: 7px; font-size: .98rem; }
body[data-site-id="grabandgo-us"] .gg-logo-cloud { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
body[data-site-id="grabandgo-us"] .gg-logo-chip {
  font-family: var(--display); font-weight: 700; font-size: .82rem;
  color: var(--navy-ink); background: #fff; border: 1px solid var(--line);
  padding: 8px 13px; border-radius: 8px; box-shadow: var(--shadow-sm);
}
body[data-site-id="grabandgo-us"] .gg-pio-figure { position: relative; }
body[data-site-id="grabandgo-us"] .gg-pio-figure img { width: 100%; aspect-ratio: 3/3.6; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
body[data-site-id="grabandgo-us"] .gg-pantry-badge {
  position: absolute; right: 18px; top: 18px; z-index: 3; text-align: center;
  background: rgba(20,30,20,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.25); border-radius: 12px; padding: 12px 16px;
}
body[data-site-id="grabandgo-us"] .gg-pantry-badge b { display: block; font-family: var(--display); font-weight: 800; color: #fff; font-size: 1.2rem; line-height: 1; letter-spacing: .04em; }
body[data-site-id="grabandgo-us"] .gg-pantry-badge span { display: block; color: rgba(255,255,255,.85); font-size: .6rem; font-weight: 700; letter-spacing: .14em; margin-top: 6px; }
body[data-site-id="grabandgo-us"] .gg-pio-banner {
  margin-top: clamp(40px, 5vw, 64px);
  background: linear-gradient(100deg, var(--green-ink-2), var(--green-ink));
  border-radius: var(--r-lg); padding: clamp(24px, 3vw, 38px);
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 28px; align-items: center;
}
body[data-site-id="grabandgo-us"] .gg-pio-banner .gg-bset { display: flex; align-items: center; gap: 16px; }
body[data-site-id="grabandgo-us"] .gg-pio-banner .gg-bico { width: 50px; height: 50px; flex: none; border-radius: 50%;
  background: rgba(255,255,255,.12); display: grid; place-items: center; color: #fff; }
body[data-site-id="grabandgo-us"] .gg-pio-banner .gg-bico svg { width: 26px; height: 26px; }
body[data-site-id="grabandgo-us"] .gg-pio-banner b { font-family: var(--display); font-weight: 800; color: #fff; font-size: 1.18rem; line-height: 1.1; display: block; }
body[data-site-id="grabandgo-us"] .gg-pio-banner b .gg-g { color: var(--green); }
body[data-site-id="grabandgo-us"] .gg-pio-banner .gg-muted { color: rgba(255,255,255,.7); font-weight: 600; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
body[data-site-id="grabandgo-us"] .gg-pio-banner .gg-blogo { justify-self: end; }
/* ============================================================
   RETAIL CHANNELS GRID  (slide 4)
   ============================================================ */
body[data-site-id="grabandgo-us"] .gg-retail { background: var(--paper); }
body[data-site-id="grabandgo-us"] .gg-retail-head { max-width: 760px; }
body[data-site-id="grabandgo-us"] .gg-retail-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 800; color: var(--green-ink-2); line-height: 1.02; }
body[data-site-id="grabandgo-us"] .gg-retail-head p { color: var(--muted); margin-top: 14px; font-size: 1.08rem; }
body[data-site-id="grabandgo-us"] .gg-retail-grid {
  margin-top: 40px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}
body[data-site-id="grabandgo-us"] .gg-store {
  position: relative; border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shadow-sm); background: var(--cream-2);
  transition: transform .18s ease, box-shadow .2s ease;
}
body[data-site-id="grabandgo-us"] .gg-store:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
body[data-site-id="grabandgo-us"] .gg-store img { width: 100%; height: 132px; object-fit: cover; display: block; }
body[data-site-id="grabandgo-us"] .gg-store-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, var(--green-ink-2) 64%, rgba(27,74,35,.0));
  padding: 22px 12px 11px; display: flex; align-items: center; gap: 9px;
}
body[data-site-id="grabandgo-us"] .gg-store-label .gg-si { width: 26px; height: 26px; flex: none; background: #fff; border-radius: 50%;
  display: grid; place-items: center; color: var(--green-ink); }
body[data-site-id="grabandgo-us"] .gg-store-label .gg-si svg { width: 15px; height: 15px; }
body[data-site-id="grabandgo-us"] .gg-store-label span { color: #fff; font-family: var(--display); font-weight: 700; font-size: .82rem; line-height: 1.1; }
body[data-site-id="grabandgo-us"] .gg-also {
  margin-top: 24px; background: var(--cream); border-radius: var(--r-lg);
  padding: 22px clamp(20px,2.6vw,32px); display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
}
body[data-site-id="grabandgo-us"] .gg-also-tag { display: flex; align-items: center; gap: 12px; }
body[data-site-id="grabandgo-us"] .gg-also-tag .gg-dot { width: 46px; height: 46px; border-radius: 50%; background: var(--green-ink); color: #fff;
  display: grid; place-items: center; font-weight: 800; }
body[data-site-id="grabandgo-us"] .gg-also-tag b { font-family: var(--display); font-weight: 800; color: var(--navy); font-size: 1.04rem; }
body[data-site-id="grabandgo-us"] .gg-also-list { display: flex; flex-wrap: wrap; gap: 7px 9px; }
body[data-site-id="grabandgo-us"] .gg-also-list span { color: var(--muted); font-size: .92rem; font-weight: 600; }
body[data-site-id="grabandgo-us"] .gg-also-list span:not(:last-child)::after { content: "•"; color: var(--green); margin-left: 9px; }
/* ============================================================
   CATALOG PREVIEW  (slides 5–7)
   ============================================================ */
body[data-site-id="grabandgo-us"] .gg-catalog { background: var(--cream); }
body[data-site-id="grabandgo-us"] .gg-catalog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
body[data-site-id="grabandgo-us"] .gg-catalog-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 800; color: var(--navy); }
body[data-site-id="grabandgo-us"] .gg-catalog-head p { color: var(--muted); margin-top: 12px; max-width: 40em; }
body[data-site-id="grabandgo-us"] .gg-cat-rows { margin-top: 44px; display: flex; flex-direction: column; gap: 22px; }
body[data-site-id="grabandgo-us"] .gg-cat-row {
  --cat: var(--green);
  background: #fff; border-radius: var(--r-lg); overflow: hidden;
  display: grid; grid-template-columns: 320px 1fr; box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
}
body[data-site-id="grabandgo-us"] .gg-cat-row.gg-snacks { --cat: var(--orange); }
body[data-site-id="grabandgo-us"] .gg-cat-row.gg-bevs { --cat: var(--blue); }
body[data-site-id="grabandgo-us"] .gg-cat-row-info { padding: clamp(22px, 2.4vw, 32px); border-right: 1px solid var(--line); }
body[data-site-id="grabandgo-us"] .gg-cat-row-info .gg-tag { display: inline-flex; align-items: center; gap: 9px; }
body[data-site-id="grabandgo-us"] .gg-cat-row-info .gg-tag .gg-ci { width: 38px; height: 38px; border-radius: 50%; background: var(--cat); color: #fff; display: grid; place-items: center; }
body[data-site-id="grabandgo-us"] .gg-cat-row-info .gg-tag .gg-ci svg { width: 21px; height: 21px; }
body[data-site-id="grabandgo-us"] .gg-cat-row-info .gg-tag .gg-k { font-family: var(--display); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cat); }
body[data-site-id="grabandgo-us"] .gg-cat-row-info h3 { font-size: 1.5rem; font-weight: 800; color: var(--navy); margin-top: 14px; }
body[data-site-id="grabandgo-us"] .gg-cat-row-info .gg-desc { color: var(--muted); font-size: .94rem; margin-top: 8px; }
body[data-site-id="grabandgo-us"] .gg-subcats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
body[data-site-id="grabandgo-us"] .gg-subcat { font-family: var(--display); font-weight: 600; font-size: .8rem; color: var(--navy-ink); white-space: nowrap;
  background: color-mix(in srgb, var(--cat) 10%, #fff); border: 1px solid color-mix(in srgb, var(--cat) 24%, #fff);
  padding: 6px 11px; border-radius: 999px; }
body[data-site-id="grabandgo-us"] .gg-cat-row-info .gg-link-arrow { margin-top: 20px; }
body[data-site-id="grabandgo-us"] .gg-cat-products { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
body[data-site-id="grabandgo-us"] .gg-cat-products img { width: 100%; height: 100%; min-height: 124px; object-fit: cover; display: block; }
body[data-site-id="grabandgo-us"] .gg-cat-products .gg-pcell { border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; }
body[data-site-id="grabandgo-us"] .gg-cat-products .gg-pcell:nth-child(-n+5) { border-top: none; }
/* ============================================================
   COMING SOON  (slide 10)
   ============================================================ */
body[data-site-id="grabandgo-us"] .gg-soon { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
body[data-site-id="grabandgo-us"] .gg-soon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,4vw,64px); align-items: center; }
body[data-site-id="grabandgo-us"] .gg-soon h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 900; line-height: .98; text-transform: uppercase; }
body[data-site-id="grabandgo-us"] .gg-soon h2 em { font-style: normal; color: var(--green); display: block; }
body[data-site-id="grabandgo-us"] .gg-soon-card {
  margin-top: 26px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg); padding: 26px; display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start;
}
body[data-site-id="grabandgo-us"] .gg-soon-card .gg-sico { width: 56px; height: 56px; border-radius: 50%; background: var(--green); display: grid; place-items: center; color: #fff; }
body[data-site-id="grabandgo-us"] .gg-soon-card .gg-sico svg { width: 30px; height: 30px; }
body[data-site-id="grabandgo-us"] .gg-soon-card .gg-k { font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--green); text-transform: uppercase; letter-spacing: .01em; }
body[data-site-id="grabandgo-us"] .gg-soon-card p { color: rgba(255,255,255,.78); margin-top: 8px; font-size: .98rem; }
body[data-site-id="grabandgo-us"] .gg-soon-cta { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; }
body[data-site-id="grabandgo-us"] .gg-soon-figure { position: relative; }
body[data-site-id="grabandgo-us"] .gg-soon-figure img { width: 100%; aspect-ratio: 4/3.2; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
body[data-site-id="grabandgo-us"] .gg-soon-figure .gg-figtag { position: absolute; left: 20px; top: 18px; z-index: 3; color: #fff; font-family: var(--display); font-weight: 800; letter-spacing: .04em; font-size: .92rem; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
body[data-site-id="grabandgo-us"] .gg-soon-figure .gg-figtag em { font-style: normal; color: var(--green); }
/* ============================================================
   FOOTER
   ============================================================ */
body[data-site-id="grabandgo-us"] .gg-footer { background: #0f1b2e; color: #fff; }
body[data-site-id="grabandgo-us"] .gg-footer-cta {
  background: linear-gradient(100deg, var(--green-ink-2), var(--green));
  border-radius: var(--r-xl); padding: clamp(30px,4vw,52px);
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
  transform: translateY(-50%); margin-bottom: calc(-1 * clamp(40px,5vw,70px));
  box-shadow: var(--shadow-lg);
}
body[data-site-id="grabandgo-us"] .gg-footer-cta h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 800; line-height: 1.02; }
body[data-site-id="grabandgo-us"] .gg-footer-cta p { color: rgba(255,255,255,.85); margin-top: 10px; max-width: 36em; }
body[data-site-id="grabandgo-us"] .gg-footer-cta .gg-acts { display: flex; gap: 12px; flex-wrap: wrap; }
body[data-site-id="grabandgo-us"] .gg-footer-cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 34px; padding-top: clamp(40px,5vw,64px); padding-bottom: 40px; }
body[data-site-id="grabandgo-us"] .gg-footer .gg-logo-word { font-size: 1.5rem; }
body[data-site-id="grabandgo-us"] .gg-footer-about { color: rgba(255,255,255,.62); margin-top: 16px; font-size: .92rem; max-width: 28ch; }
body[data-site-id="grabandgo-us"] .gg-footer-col h4 { font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 14px; }
body[data-site-id="grabandgo-us"] .gg-footer-col a { display: block; color: rgba(255,255,255,.82); font-size: .94rem; padding: 6px 0; transition: color .15s ease; }
body[data-site-id="grabandgo-us"] .gg-footer-col a:hover { color: var(--green); }
body[data-site-id="grabandgo-us"] .gg-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
body[data-site-id="grabandgo-us"] .gg-footer-bottom p { color: rgba(255,255,255,.5); font-size: .86rem; }
body[data-site-id="grabandgo-us"] .gg-footer-social { display: flex; gap: 10px; }
body[data-site-id="grabandgo-us"] .gg-footer-social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; color: rgba(255,255,255,.7); transition: all .16s ease; }
body[data-site-id="grabandgo-us"] .gg-footer-social a:hover { border-color: var(--green); color: var(--green); }
body[data-site-id="grabandgo-us"] .gg-footer-social svg { width: 18px; height: 18px; }
/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  body[data-site-id="grabandgo-us"] .gg-nav-links { display: none; }
  body[data-site-id="grabandgo-us"] .gg-nav-burger { display: inline-flex; }
  body[data-site-id="grabandgo-us"] .gg-nav-cta .gg-nav-signin { display: none; }
  body[data-site-id="grabandgo-us"] .gg-retail-grid { grid-template-columns: repeat(4, 1fr); }
  body[data-site-id="grabandgo-us"] .gg-channels .gg-wrap { grid-template-columns: 1fr; }
  body[data-site-id="grabandgo-us"] .gg-cat-products { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 860px) {
  body[data-site-id="grabandgo-us"] { font-size: 16px; }
  body[data-site-id="grabandgo-us"] .gg-hero-grid { grid-template-columns: 1fr; }
  body[data-site-id="grabandgo-us"] .gg-cats-panel { grid-template-columns: 1fr; margin-top: -56px; }
  body[data-site-id="grabandgo-us"] .gg-pio-grid, body[data-site-id="grabandgo-us"] .gg-soon-grid, body[data-site-id="grabandgo-us"] .gg-footer-cta, body[data-site-id="grabandgo-us"] .gg-footer-cols { grid-template-columns: 1fr; }
  body[data-site-id="grabandgo-us"] .gg-footer-cta { transform: none; margin-bottom: 0; margin-top: 40px; }
  body[data-site-id="grabandgo-us"] .gg-footer-cols { gap: 24px; }
  body[data-site-id="grabandgo-us"] .gg-pio-banner { grid-template-columns: 1fr; gap: 18px; }
  body[data-site-id="grabandgo-us"] .gg-pio-banner .gg-blogo { justify-self: start; }
  body[data-site-id="grabandgo-us"] .gg-cat-row { grid-template-columns: 1fr; }
  body[data-site-id="grabandgo-us"] .gg-cat-row-info { border-right: none; border-bottom: 1px solid var(--line); }
  body[data-site-id="grabandgo-us"] .gg-cat-products { grid-template-columns: repeat(5, 1fr); }
  body[data-site-id="grabandgo-us"] .gg-retail-grid { grid-template-columns: repeat(3, 1fr); }
  body[data-site-id="grabandgo-us"] .gg-also { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 560px) {
  body[data-site-id="grabandgo-us"] .gg-nav-cta { display: none; }
  body[data-site-id="grabandgo-us"] .gg-retail-grid { grid-template-columns: repeat(2, 1fr); }
  body[data-site-id="grabandgo-us"] .gg-cat-products { grid-template-columns: repeat(3, 1fr); }
  body[data-site-id="grabandgo-us"] .gg-channel-grid { grid-template-columns: repeat(3, 1fr); }
  body[data-site-id="grabandgo-us"] .gg-hero-cta .gg-btn { flex: 1 1 100%; justify-content: center; }
}
/* Mobile drawer */
body[data-site-id="grabandgo-us"] .gg-mobile-drawer {
  position: fixed; inset: 0; z-index: 200; display: none;
}
body[data-site-id="grabandgo-us"] .gg-mobile-drawer.gg-open { display: block; }
body[data-site-id="grabandgo-us"] .gg-mobile-drawer .gg-scrim { position: absolute; inset: 0; background: rgba(13,22,38,.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
body[data-site-id="grabandgo-us"] .gg-mobile-drawer .gg-sheet {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 360px);
  background: #fff; padding: 22px; display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--shadow-lg); animation: gg-slide-in .22s ease;
}
@keyframes gg-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
body[data-site-id="grabandgo-us"] .gg-mobile-drawer .gg-sheet a { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--navy); padding: 13px 10px; border-radius: 10px; }
body[data-site-id="grabandgo-us"] .gg-mobile-drawer .gg-sheet a:hover { background: var(--cream); }
body[data-site-id="grabandgo-us"] .gg-mobile-drawer .gg-sheet .gg-mclose { align-self: flex-end; width: 44px; height: 44px; border: none; background: var(--cream); border-radius: 10px; cursor: pointer; font-size: 20px; color: var(--navy); }
body[data-site-id="grabandgo-us"] .gg-mobile-drawer .gg-sheet .gg-btn { margin-top: 10px; justify-content: center; }
/* reduce-motion */
@media (prefers-reduced-motion: reduce) {
  body[data-site-id="grabandgo-us"] .gg-site *, body[data-site-id="grabandgo-us"] .gg-site *::before, body[data-site-id="grabandgo-us"] .gg-site *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  body[data-site-id="grabandgo-us"] .gg-btn:hover, body[data-site-id="grabandgo-us"] .gg-channel:hover, body[data-site-id="grabandgo-us"] .gg-store:hover, body[data-site-id="grabandgo-us"] .gg-cat-card:hover { transform: none; }
  body[data-site-id="grabandgo-us"] .gg-link-arrow:hover svg { transform: none; }
}