/* Jamba design kit: a fresh fruit blend. Loaded only on Jamba pages (src/lib/kits.ts). */
.kit-jamba {
  --j-green: #0E6B55; --j-orange: #C9431A; --j-pink: #C72A55; --j-berry: #7B3FA0; --j-mango: #A35F00;
  --kit-display: 'Fredoka', 'Bricolage Grotesque', system-ui, sans-serif;
}

/* page: cream with soft fruit-colored circles */
body.kit-jamba {
  --bg: #FFF8EE; --surface: #FFFFFF; --surface-2: #FFF0E3; --line: #F4DCC8; --muted: #6D5E52; --ink: #1F2A24;
  --accent: #0E6B55; --accent-ink: #FFFFFF; --accent-soft: #DDF3EA;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 8% 22%, rgba(255, 79, 123, .07) 0 130px, transparent 131px),
    radial-gradient(circle at 92% 46%, rgba(255, 182, 39, .1) 0 170px, transparent 171px),
    radial-gradient(circle at 26% 88%, rgba(155, 209, 75, .09) 0 150px, transparent 151px);
  background-attachment: fixed;
}
@media (prefers-color-scheme: dark) {
  body.kit-jamba {
    --bg: #0D211B; --surface: #12302A; --surface-2: #173A32; --line: #21483E; --muted: #A9C9BC; --ink: #F1FBF6;
    --accent: #7FE0B5; --accent-ink: #0D211B; --accent-soft: #15382F;
  }
}

/* ---------- hero: simple Jamba green with an orange base line ---------- */
.b-hero.kit-jamba { color: #fff; background: linear-gradient(135deg, #14825F 0%, #0F7058 55%, #0B5E4A 100%); box-shadow: inset 0 -6px 0 #F5592C; }
.kit-jamba .b-hero-in { padding-top: 40px; padding-bottom: 72px; }
.kit-jamba .b-crumbs { opacity: .85; margin-bottom: 26px; }
.kit-jamba .kit-brand { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; }
.kit-jamba .kit-brand .kit-emblem { flex: none; width: 68px; height: 68px; filter: drop-shadow(0 8px 14px rgba(0, 40, 30, .35)); }
.kit-jamba .kit-kicker { margin: 0 0 5px; font: 600 .8rem/1.2 var(--kit-display); letter-spacing: .2em; text-transform: uppercase; color: #FFD36E; }
.kit-jamba .kit-brand .b-eyebrow { margin: 0; max-width: 46ch; font-size: .88rem; font-weight: 500; line-height: 1.45; letter-spacing: 0; text-transform: none; color: #CDEFE2; opacity: 1; }
.b-hero.kit-jamba h1 { margin: 0 0 22px; font-family: var(--kit-display); line-height: .95; color: #fff; }
.kit-jamba .h1-name { display: block; font-weight: 600; font-size: clamp(3.8rem, 8.4vw, 6.8rem); letter-spacing: -.025em; }
.kit-jamba .h1-rest { display: block; margin-top: .3em; font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 2.05rem); line-height: 1.15; letter-spacing: -.01em; color: #CDEFE2; }
.kit-jamba .b-lede { max-width: 50ch; font-size: 1.08rem; line-height: 1.7; color: #EAFBF3; }
.kit-jamba .b-meta svg { stroke: #fff; background: #E8501F; }
.kit-jamba .b-tabs a { border: 2px solid rgba(255, 255, 255, .5); border-radius: 999px; color: #fff; font-family: var(--kit-display); font-weight: 600; }
.kit-jamba .b-tabs a:hover { background: rgba(255, 255, 255, .12); }
.kit-jamba .b-tabs a[aria-current] { background: #fff; color: var(--j-green); border-color: #fff; }
.kit-jamba .b-frame::before { background: rgba(255, 255, 255, .14); }
.kit-jamba .b-photo img { border-radius: 24px; box-shadow: 0 34px 60px -30px rgba(0, 40, 30, .75); }
.kit-jamba .b-photo figcaption { color: #CDEFE2; opacity: .9; }

/* ---------- page body ---------- */
.kit-jamba .jump a { border-radius: 999px; font-family: var(--kit-display); font-weight: 600; background: var(--j-green); box-shadow: 0 8px 16px -10px rgba(14, 107, 85, .9); }
.kit-jamba .jump a:nth-child(5n+2) { background: var(--j-orange); box-shadow: 0 8px 16px -10px rgba(201, 67, 26, .9); }
.kit-jamba .jump a:nth-child(5n+3) { background: var(--j-pink); box-shadow: 0 8px 16px -10px rgba(199, 42, 85, .9); }
.kit-jamba .jump a:nth-child(5n+4) { background: var(--j-berry); box-shadow: 0 8px 16px -10px rgba(123, 63, 160, .9); }
.kit-jamba .jump a:nth-child(5n+5) { background: var(--j-mango); box-shadow: 0 8px 16px -10px rgba(163, 95, 0, .9); }
.kit-jamba .b-fact { border: 0; border-radius: 24px; box-shadow: 0 0 0 1px var(--line), 0 16px 28px -22px rgba(201, 67, 26, .55); }
.kit-jamba .b-fact b { font: 700 1.6rem/1.1 var(--kit-display); color: var(--j-green); }
.kit-jamba .b-fact:nth-child(2) b { color: var(--j-orange); }
.kit-jamba .b-fact:nth-child(3) b { color: var(--j-pink); }
.kit-jamba .b-fact:nth-child(4) b { color: var(--j-berry); }
@media (prefers-color-scheme: dark) { .kit-jamba .b-fact b { color: #8FE6C0 !important; } }
.kit-jamba .note { background: var(--surface); border-left-color: #FF4F7B; border-radius: 18px; }
.kit-jamba .sec-title { font-family: var(--kit-display); font-weight: 700; letter-spacing: -.005em; }
.kit-jamba .sec-title em { color: var(--j-orange); }
@media (prefers-color-scheme: dark) { .kit-jamba .sec-title em { color: #FFB27F; } }
.kit-jamba .facts-box { background: var(--j-green); color: #fff; border: 0; border-radius: 28px; box-shadow: 0 18px 32px -22px rgba(14, 107, 85, .9); }
.kit-jamba .facts-box h2 { color: #fff; font-family: var(--kit-display); font-weight: 700; }
.kit-jamba .facts-box dt { color: #BDEBD9; }
.kit-jamba .facts-link { color: #FFD36E; }
.kit-jamba .pick, .kit-jamba .deal, .kit-jamba .know-card, .kit-jamba .city-card, .kit-jamba .tools { border: 0; border-radius: 24px; box-shadow: 0 0 0 1px var(--line), 0 16px 28px -22px rgba(201, 67, 26, .5); }
.kit-jamba .pick li::before { background: var(--j-orange); color: #fff; }
.kit-jamba .pick:nth-child(2) li::before { background: var(--j-pink); }
.kit-jamba .pick:nth-child(3) li::before { background: var(--j-berry); }
.kit-jamba details { border-radius: 18px; }
.kit-jamba details[open] { border-left-color: #FF4F7B; }

/* section bars: liquid bars with a bubbly top edge, cycling fruit colors */
.kit-jamba .bar { --bar: var(--j-green); position: relative; margin-top: 56px; border-radius: 22px; background: var(--bar); box-shadow: 0 14px 24px -18px var(--bar); }
.kit-jamba .bar::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: -12px; height: 14px; background: var(--bar);
  -webkit-mask: radial-gradient(circle at 10px 14px, #000 9.5px, transparent 10px) 0 0 / 20px 14px repeat-x;
  mask: radial-gradient(circle at 10px 14px, #000 9.5px, transparent 10px) 0 0 / 20px 14px repeat-x;
}
.kit-jamba #menu > section:nth-of-type(5n+2) .bar { --bar: var(--j-orange); }
.kit-jamba #menu > section:nth-of-type(5n+3) .bar { --bar: var(--j-pink); }
.kit-jamba #menu > section:nth-of-type(5n+4) .bar { --bar: var(--j-berry); }
.kit-jamba #menu > section:nth-of-type(5n+5) .bar { --bar: var(--j-mango); }
.kit-jamba .bar h2 { font-family: var(--kit-display); font-weight: 600; font-size: clamp(1.1rem, 2.4vw, 1.4rem); letter-spacing: .02em; text-transform: none; }

/* cards: rounded cups with sticker prices */
.kit-jamba .mcard { border: 0; border-radius: 28px; padding: 12px 12px 18px; box-shadow: 0 0 0 1px var(--line), 0 16px 30px -22px rgba(201, 67, 26, .55); }
.kit-jamba .mcard:hover { transform: translateY(-5px) rotate(-.8deg); box-shadow: 0 0 0 2px #FFB627, 0 20px 34px -20px rgba(201, 67, 26, .6); }
.kit-jamba .mcard .art { border-radius: 22px; }
.kit-jamba .mcard h3 { font-family: var(--kit-display); font-weight: 600; color: var(--j-green); }
@media (prefers-color-scheme: dark) { .kit-jamba .mcard h3 { color: #9BE6C5; } }
.kit-jamba .pill { border-radius: 999px; font-family: var(--kit-display); font-weight: 600; transform: rotate(-2deg); box-shadow: 0 6px 12px -8px rgba(14, 107, 85, .8); }
.kit-jamba .pill.muted { transform: none; box-shadow: none; }
.kit-jamba .ribbon { border-radius: 999px; background: var(--j-pink); color: #fff; font-family: var(--kit-display); }
.kit-jamba .mcard .add { color: var(--j-orange); }

/* ---------- motion: cards pop in as they scroll into view ---------- */
@keyframes kj-in { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@supports (animation-timeline: view()) {
  .kit-jamba .mcard { animation: kj-in linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
}
@media (prefers-reduced-motion: reduce) { .kit-jamba *, .kit-jamba *::before, .kit-jamba *::after { animation: none !important; } }

@media (max-width: 860px) {
  .kit-jamba .b-hero-in { padding-bottom: 48px; }
  .kit-jamba .kit-brand .kit-emblem { width: 58px; height: 58px; }
}
