/* =========================================================
   JustBake — theme styles
   Every class is prefixed .jb- and every custom property --jb-,
   so nothing here can collide with Dawn / H-Edit.
   Image URLs and @font-face live in snippets/jb-head.liquid,
   which needs Liquid's asset_url.
   ========================================================= */
/* =========================================================
   JustBake by Pastry Passions — Landing Page
   Figma node 115:366 · design canvas 1920 × 5195
   Desktop rules use the exact Figma pixel values; the media
   queries at the bottom reflow them for smaller screens.
   ========================================================= */

/* Display faces that are not on Google Fonts. Drop the licensed
   files into assets/fonts/ and these take over from the fallbacks. */

:root {
  /* Fills, exactly as they appear in the Figma file */
  --jb-pink:       #ff2f92;
  --jb-ink:        #0f0309;
  --jb-plum:       #48122c;
  --jb-plum-deep:  #3f0c24;
  --jb-cream:      #fff9fc;
  --jb-blush:      #ffeef6;
  --jb-panel:      #111111;
  --jb-black:      #000000;
  --jb-white:      #ffffff;

  --jb-on-dark:    rgb(255 255 255 / .6);   /* #ffffff @ 60% */
  --jb-on-light:   rgb(72 18 44 / .6);      /* #48122c @ 60% */
  --jb-pink-20:    rgb(255 47 146 / .2);    /* #ff2f92 @ 20% */
  --jb-plum-20:    rgb(72 18 44 / .2);      /* #48122c @ 20% */

  --jb-f-body:    "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;
  --jb-f-display: "Fredoka One", "Fredoka", system-ui, sans-serif;
  --jb-f-eyebrow: "Kodchasan", var(--jb-f-body);
  --jb-f-faq:     "Lato", var(--jb-f-body);
  --jb-f-script:  "Kaufmann", "Sacramento", "Segoe Script", cursive;
  --jb-f-bakery:  "Bakery", var(--jb-f-display);
  --jb-f-sign:    "Sallim", "Segoe Script", "Brush Script MT", cursive;

  --jb-gut: 24px;   /* side gutter once the design stops fitting at full size */
}

/* ---------- reset ---------- */
.jb-page,.jb-page *,.jb-page *::before,.jb-page *::after { box-sizing: border-box; }
body.jb-page {
  --font-body-family: "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading-family: "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  margin: 0;
  background: var(--jb-ink);
  color: var(--jb-white);
  font-family: var(--jb-f-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  width: 100%; max-width: 100%; overflow-x: hidden;
}
:where(.jb-page) img,:where(.jb-page) svg { display: block; max-width: 100%; }
:where(.jb-page) img { height: auto; }
:where(.jb-page) ul,:where(.jb-page) ol { margin: 0; padding: 0; list-style: none; }
:where(.jb-page) h1,:where(.jb-page) h2,:where(.jb-page) h3,:where(.jb-page) p,:where(.jb-page) blockquote,:where(.jb-page) figure { margin: 0; }
:where(.jb-page) a { color: inherit; text-decoration: none; }
:where(.jb-page) button,:where(.jb-page) input,:where(.jb-page) select { font: inherit; color: inherit; }
:where(.jb-page) button { cursor: pointer; }

.jb-ic { width: 1em; height: 1em; fill: currentColor; }
.jb-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.jb-skip { position:absolute; left:-9999px; top:0; z-index:100; background:var(--jb-pink); color:#fff; padding:12px 20px; }
.jb-skip:focus { left: 0; }
.jb-page :focus,
.jb-page :focus-visible,
.jb-page .focused,
.jb-page .focus-inset:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

.jb-page { max-width: 1920px; margin: 0 auto; overflow-x: clip; }

/* ---------- shared ---------- */
.jb-eyebrow {
  font-family: var(--jb-f-eyebrow); font-weight: 400;
  font-size: 20px; line-height: 26px;
  color: var(--jb-pink);
}

/* Figma buttons: 62px tall, 50px radius, 50px side padding, Fredoka 700 18/21.78 */
.jb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 62px; padding: 0 50px;
  border: 0; border-radius: 50px;
  background: var(--jb-pink); color: var(--jb-white);
  font-family: var(--jb-f-body); font-weight: 700;
  font-size: 18px; line-height: 21.78px;
  white-space: nowrap;
  transition: background .2s;
}
.jb-btn:hover { background: #ef1b81; }
.jb-btn .jb-ic { font-size: 20px; }
.jb-btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--jb-white); }
.jb-btn--ghost .jb-ic { color: var(--jb-pink); }
.jb-btn--ghost:hover { background: rgb(255 255 255 / .12); }

/* Section heading — Fredoka One 50 / 43, letter-spacing -2, uppercase */
.jb-h2 {
  font-family: var(--jb-f-display); font-weight: 400;
  font-size: 50px; line-height: 43px; letter-spacing: -2px;
  text-transform: uppercase;
  color: var(--jb-plum);
}

/* Eyebrow + heading on the left, "VIEW ALL" pinned right */
.jb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.jb-head .jb-eyebrow { margin-bottom: 10px; }
.jb-head .jb-btn { margin-top: 14px; }

/* =========================================================
   HEADER  (Frame 12 — 1920×130, #000, 1px #48122c underline)
   ========================================================= */
.jb-topbar { background: var(--jb-black); position: relative; z-index: 20; }
.jb-topbar__in {
  width: min(1620px, 100% - var(--jb-gut) * 2);
  margin: 0 auto;
  height: 130px;
  display: flex; align-items: center;
  border-bottom: 1px solid var(--jb-plum);
}
.jb-logo img { width: 287px; height: auto; }

/* Announcement pill — Frame 18 at x487, 566×50, #ff2f92 @20% */
.jb-announce {
  width: 566px; height: 50px; margin-left: 50px;
  display: flex; align-items: center;
  padding: 0 20px;
  background: var(--jb-pink-20);
}
.jb-announce__bell {
  flex: none; width: 39px; height: 28px; margin-right: 34px;
  display: flex; align-items: center;
  border-right: 1px solid var(--jb-pink);      /* a divider, not a box */
  font-size: 20px; color: var(--jb-pink);
}

/* Search — Frame 13 at x1120, 440×50, 1px #48122c, r50 */
.jb-search {
  width: 440px; height: 50px; margin-left: 67px;
  display: flex; align-items: center;
  padding-left: 30px;
  border: 1px solid var(--jb-plum); border-radius: 50px;
}
.jb-search input {
  flex: 1 1 auto; min-width: 0;
  background: none; border: 0; outline: none;
  font-weight: 500; font-size: 14px; line-height: 16.94px;
  color: var(--jb-white);
}
.jb-search input::placeholder { color: var(--jb-on-dark); opacity: 1; }
.jb-search button {
  flex: none; width: 50px; height: 50px;
  display: grid; place-items: center;
  background: var(--jb-pink); border: 0; border-radius: 50%;
  font-size: 16px; color: var(--jb-white);
}

/* Icon buttons — 50×50, 1px #48122c, at x1580 / 1650 / 1720 (20px gaps) */
.jb-tools { display: flex; gap: 20px; margin-left: 20px; }
.jb-iconbtn {
  position: relative;
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border: 1px solid var(--jb-plum); border-radius: 50%;
  font-size: 22px; color: var(--jb-pink);
  transition: background .2s, border-color .2s, color .2s;
}
.jb-iconbtn:hover { background: var(--jb-pink); border-color: var(--jb-pink); color: var(--jb-white); }

.jb-navtoggle, .jb-burger, .jb-nav__close, .jb-navscrim, .jb-mega__back { display: none; }
.jb-page input.jb-navtoggle,
.jb-page input.jb-megatoggle,
.jb-page input.jb-filtertoggle {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important;
  opacity: 0 !important; appearance: none !important;
  clip-path: inset(50%) !important;
  pointer-events: none !important;
}
.jb-cart-count {
  position: absolute; right: -3px; top: -5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  border: 2px solid var(--jb-black); border-radius: 20px;
  background: var(--jb-pink); color: var(--jb-white);
  font-size: 10px; line-height: 1; font-weight: 700;
}
.jb-page input.jb-navtoggle { display: none !important; }

/* ---------- Nav (Frame 15 — 1920×50, #000) ---------- */
.jb-nav { background: var(--jb-black); }
.jb-nav__in {
  width: min(1620px, 100% - var(--jb-gut) * 2);
  margin: 0 auto;
  height: 50px;
  display: flex; align-items: center; justify-content: space-between;
}
.jb-nav__links { display: flex; align-items: stretch; align-self: stretch; gap: 86px; }           /* measured gap between items */
/* .jb-nav__link is class-based so these never reach inside the mega panel.
   The link fills the full 50px row, so there is no dead gap between it and
   the panel that opens directly underneath. */
.jb-nav__links > li { display: flex; align-items: stretch; }
.jb-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 100%;
  font-weight: 500; font-size: 16px; line-height: 19.36px;
  cursor: pointer;
  transition: color .2s;
}
.jb-nav__link:hover, .jb-nav__link.jb-is-active { color: var(--jb-pink); }
.jb-nav__link--tap { display: none; }
.jb-megatoggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.jb-has-caret::after {
  content: ""; width: 7px; height: 7px;
  border-right: 2px solid var(--jb-pink); border-bottom: 2px solid var(--jb-pink);
  rotate: 45deg; translate: 0 -3px;
  transition: rotate .2s;
}
.jb-nav__social {
  display: flex; align-items: center; gap: 15px;
  font-weight: 500; font-size: 16px; line-height: 19.36px;
}
.jb-nav__social::before {
  content: ""; width: 1px; height: 26px; margin-right: 6px;
  background: rgb(255 255 255 / .3);
}
.jb-nav__social a { font-size: 23px; color: var(--jb-pink); transition: opacity .2s; }
.jb-nav__social a:hover { opacity: .75; }

/* =========================================================
   HERO  (Frame 66 — 1920×900)
   ========================================================= */
.jb-hero {
  position: relative;
  height: 900px;
  background: var(--jb-ink);
}
/* Ellipse 10 — 370px #ff2f92 at (1120,220), heavily blurred behind the art */
.jb-hero__blob {
  position: absolute; left: 1120px; top: 220px;
  width: 370px; height: 370px;
  background: var(--jb-pink); border-radius: 50%;
  filter: blur(200px); opacity: 1;
}
/* image 204 — 1171×720 at (749,230), flush to the right edge */
.jb-hero__art {
  position: absolute; right: 0; top: 50px;
  width: 1171px; height: auto;
}
/* Frame 65 — 533 wide at (240,165) */
.jb-hero__copy {
  position: absolute; left: max(240px, (100% - 1440px) / 2); top: 165px;
  width: 533px;
}
/* Figma stacks these at y0 / y132 / y234 / y348 inside Frame 65. */
.jb-hero__copy h1 { display: block; }
.jb-script {
  display: block; font-family: var(--jb-f-script); font-weight: 400;
  font-size: 100px; line-height: 122px; color: var(--jb-white);
}
.jb-shout {
  display: block; margin-top: 10px;
  font-family: var(--jb-f-display); font-weight: 400;
  font-size: 102px; line-height: 102px; color: var(--jb-pink);
  white-space: nowrap;            /* Figma's box is 548 wide inside a 533 frame */
}
.jb-hero__copy p {
  width: 532px;
  font-size: 18px; line-height: 21.78px;
  color: var(--jb-on-dark);
}
.jb-hero__cta { display: flex; gap: 18px; margin-top: 70px; }
.jb-hero__cta .jb-btn { padding: 0 50px; }

/* =========================================================
   WHITE SHELL  (Frame 17 — 1860×3492, r50, #fff + 10% tile)
   Overlaps the hero by 132px.
   ========================================================= */
.jb-shell {
  position: relative; z-index: 2;
  width: min(1860px, 100% - 20px);
  margin: -132px auto 0;
  padding: 30px 30px 102px;
  background: var(--jb-white);
  border-radius: 50px;
}
.jb-shell::before {                       /* the tiled bakery-doodle texture at 10% */
  content: "";
  position: absolute; inset: 0;
  background: url("./jb-bg-pattern.png") 0 0 repeat;
  background-size: 376px 250px;
  border-radius: inherit;
  pointer-events: none;
}
.jb-shell > * { position: relative; z-index: 1; }

.jb-panel { width: 100%; }                          /* 1800 at full size */
.jb-wrap  { width: min(1440px, 100%); margin: 0 auto; }

/* ---------- Feature bar (Frame 20 — 1800×182, r30, #0f0309) ---------- */
.jb-features {
  display: flex; justify-content: center; align-items: center; gap: 119px;
  height: 182px; padding: 50px 91px;
  background: var(--jb-ink); border-radius: 30px;
}
.jb-features li { display: flex; gap: 30px; }
.jb-features img { flex: none; width: auto; height: 83px; }
.jb-features h3 { font-weight: 700; font-size: 22px; line-height: 26.62px; }
.jb-features:not(.jb-features--light) h3 { color: var(--jb-white); }
.jb-features p  { width: var(--jb-tw); margin-top: 6px; font-size: 18px; line-height: 21.78px; color: var(--jb-on-dark); }

/* ---------- Best sellers (Frame 27 — 1440×617) ---------- */
.jb-best { margin-top: 100px; }
.jb-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 37px; }

/* Card — Figma 338×501, r20, #fff. All internals are em so the same component
   serves the 338px landing card and the 296px collection card (a 0.876 scale);
   only font-size changes. */
.jb-card {
  font-size: 16px;
  display: flex; flex-direction: column;
  background: var(--jb-white); border-radius: 1.25em;
  overflow: hidden;
  box-shadow: 0 2px 14px rgb(0 0 0 / .11);   /* measured off the Figma render */
}
.jb-card__media {
  position: relative; height: 17.4375em;
  background: var(--jb-img-card-bg) center / cover no-repeat;
}
.jb-card__media img { position: absolute; left: 3.9375em; top: 8.75em; width: 13.3125em; height: 7.4375em; }
.jb-card__tag {
  position: absolute; left: 1.4286em; top: 1.4286em;
  height: 2.857em; padding: 0 1.571em;
  display: inline-flex; align-items: center;
  background: rgb(72 18 44 / .9); border-radius: 2.857em;
  font-size: .875em; line-height: 1.21; color: var(--jb-white);
}
/* Each em below resolves against that element's OWN font-size, so the
   ratios are stated against it (e.jb-g. 20px margin on 25px text = .8em). */
.jb-card h3     { font-size: 1.5625em; margin: .8em 1em 0; font-weight: 700; line-height: 1.21; color: var(--jb-plum); }
.jb-card__desc  { font-size: 1em; margin: .3125em 1.5625em 0; width: 18em; line-height: 1.21; color: var(--jb-on-light); }
.jb-card__price { font-size: 1.25em; margin: auto 1.25em 0; padding-top: .7em; font-weight: 600; line-height: 1.21; color: var(--jb-pink); }
.jb-card__btn   { font-size: 1.125em; height: 2.7778em; margin: .7778em 1.3889em 1.3889em; padding: 0; line-height: 1.21; }


/* ---------- How it works (Frame 28 — 1800×449, r30, #fff9fc) ---------- */
.jb-how {
  margin-top: 120px;
  height: 449px; padding: 90px 180px 0;
  background: var(--jb-cream); border-radius: 30px;
  text-align: center;
}
.jb-how__eyebrow { margin-bottom: 10px; }
.jb-how__title   { margin-bottom: 40px; }
.jb-steps { --jb-steprail: 134px; display: flex; justify-content: center; gap: var(--jb-steprail); text-align: left; }
.jb-steps li { width: var(--jb-sw); position: relative; }
/* 2px #ff2f92 @75% joining the icons, masked by the opaque icon tiles */
.jb-steps li::before {
  content: ""; position: absolute;
  left: 60px; right: calc(-1 * var(--jb-steprail)); top: 29px; height: 2px;
  background: rgb(255 47 146 / .75);
}
.jb-steps li:last-child::before { content: none; }
.jb-steps__ic {
  display: grid; place-items: center;
  width: 60px; height: 60px; margin-bottom: 23px;
  background: var(--jb-ink); border-radius: 10px;
  font-size: 28px; color: var(--jb-white);
}
.jb-steps h3 { font-weight: 700; font-size: 20px; line-height: 24.2px; color: var(--jb-plum); }
.jb-steps p  { margin-top: 10px; font-size: 16px; line-height: 19.36px; color: var(--jb-on-light); }

/* ---------- Founder (Frame 33 — 1800×827, r30, #0f0309) ---------- */
.jb-founder {
  margin-top: 30px;
  padding: 105px 0 15px;
  background: var(--jb-ink); border-radius: 30px;
  color: var(--jb-white);
  overflow: hidden;
}
.jb-founder__grid {
  display: grid; grid-template-columns: 710px 752px; gap: 128px;
  padding: 0 180px 0;
  align-items: start;
}
.jb-founder .jb-eyebrow { margin-bottom: 10px; }
.jb-founder__title {
  font-family: var(--jb-f-bakery); font-weight: 400;
  /* Figma: Bakery 70/43, -2.8, uppercase, two lines.
     Bakery is not a Google font. Until assets/fonts/Bakery.jb-woff2 is dropped in,
     the Fredoka One fallback runs ~15% wider, so it is stepped down to hold the
     design's two lines — restore 70px once the real face is installed. */
  font-size: 60px; line-height: 52px; letter-spacing: -2.8px;
  text-transform: uppercase; white-space: nowrap;
  margin-bottom: 3px; color: var(--jb-white);
}
.jb-founder__body { font-size: 18px; line-height: 21.78px; color: var(--jb-on-dark); text-align: justify; }
.jb-founder__body + .jb-founder__body { margin-top: 18px; }
.jb-quote {
  position: relative;
  margin: 51px 0 0; padding: 20px 30px;
  background: var(--jb-pink-20); border-left: 8px solid var(--jb-pink);
  font-weight: 600; font-size: 25px; line-height: 30.25px; color: var(--jb-white);
}
.jb-founder__sign { margin-top: 24px; font-family: var(--jb-f-eyebrow); font-size: 18px; line-height: 23.4px; color: var(--jb-white); }
.jb-founder__name {
  font-family: var(--jb-f-sign); font-weight: 400;
  font-size: 78px; line-height: 82.8px;
  color: var(--jb-pink);
}
.jb-founder__photo { width: 752px; height: auto; border-radius: 20px; margin-top: -75px; }

/* ---------- Marquees ---------- */
.jb-marquee { display: flex; overflow: hidden; }
.jb-marquee__track {
  flex: none; display: flex; align-items: center;
  animation: scroll 34s linear infinite;
}
.jb-marquee__track li { white-space: nowrap; }
@keyframes scroll { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .jb-marquee__track { animation: none; } }

.jb-marquee--sm { flex: 1 1 auto; min-width: 0; }
.jb-marquee--sm li { font-weight: 500; font-size: 16px; line-height: 19.36px; padding-right: 33px; }
.jb-marquee--sm li::after { content: "-"; padding-left: 33px; color: var(--jb-on-dark); }

/* Frame 98 — 1770×51, r60, #ff2f92 @20% */
.jb-marquee--lg {
  margin: 18px 15px 0;
  height: 51px; align-items: center;
  background: var(--jb-pink-20); border-radius: 60px;
}
.jb-marquee--lg li {
  display: flex; align-items: center; gap: 10px;
  padding-right: 51px;
  font-weight: 700; font-size: 20px; line-height: 24.2px;
}
.jb-marquee--lg li::before {
  content: ""; flex: none;
  width: 41px; height: 24px;
  background: url("./jb-marquee-mark.png") center / contain no-repeat;
}

/* ---------- Bake with us (Frame 72 — 1440×421) ---------- */
.jb-videos { margin-top: 100px; display: grid; grid-template-columns: 259px 1fr; gap: 111px; }
.jb-videos .jb-eyebrow { margin-top: 20px; }
.jb-videos__title {
  margin-top: 10px;
  font-family: var(--jb-f-display); font-weight: 400;
  font-size: 70px; line-height: 63px; letter-spacing: -2.8px;
  text-transform: uppercase;
  color: var(--jb-plum);
}
.jb-videos__body { margin-top: 8px; font-size: 16px; line-height: 19.36px; color: var(--jb-on-light); }
.jb-videos .jb-btn { margin-top: 48px; }
.jb-videos__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.jb-video { position: relative; display: block; }
.jb-video img,
.jb-video video { width: 100%; height: 421px; object-fit: cover; border-radius: 20px; }
.jb-video video { display: block; background: var(--jb-ink); }
.jb-video--controls-hidden video { cursor: pointer; }
.jb-video.jb-is-playing video { object-fit: contain; }
.jb-video__play {
  position: absolute; inset: 0; margin: auto;
  width: 100px; height: 100px;
  display: grid; place-items: center;
  appearance: none; padding: 0;
  background: var(--jb-pink); border: 0; border-radius: 50%;
  outline: 0; box-shadow: none;
  font-size: 34px; color: var(--jb-white);
  transition: transform .2s, opacity .2s;
}
.jb-video__play::before,
.jb-video__play::after { content: none !important; display: none !important; }
.jb-video:hover .jb-video__play { transform: scale(1.07); }
.jb-video.jb-is-playing .jb-video__play { opacity: 0; pointer-events: none; }

/* ---------- FAQ (Frame 73 — 1440×414) ---------- */
.jb-faq { margin-top: 100px; }
.jb-faq__title { line-height: 63px; }
.jb-faq .jb-head .jb-btn { margin-top: 24px; }
.jb-faq__cols { display: grid; grid-template-columns: repeat(2, 701px); gap: 38px; margin-top: 15px; }
.jb-faq__col { display: flex; flex-direction: column; gap: 20px; }

.jb-faq details {
  background: var(--jb-cream);
  border: 1px solid var(--jb-plum-20);        /* #48122c @ 20%, not solid */
  border-radius: 10px;
  padding: 17px 32px;
}
.jb-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-family: var(--jb-f-faq); font-weight: 700;
  font-size: 20px; line-height: 24px;
  color: var(--jb-plum-deep);
  cursor: pointer; list-style: none;
}
.jb-faq summary::-webkit-details-marker { display: none; }
.jb-faq summary::after {
  content: ""; flex: none; width: 18px; height: 18px;
  background: currentColor;
  clip-path: polygon(46% 0,54% 0,54% 46%,100% 46%,100% 54%,54% 54%,54% 100%,46% 100%,46% 54%,0 54%,0 46%,46% 46%);
  transition: transform .25s;
}
.jb-faq details[open] summary { color: var(--jb-pink); padding-bottom: 14px; border-bottom: 1px solid var(--jb-pink); }
.jb-faq details[open] summary::after { transform: rotate(45deg); }
.jb-faq details p { padding-top: 16px; font-size: 16px; line-height: 19.36px; color: var(--jb-on-light); }

/* =========================================================
   NEWSLETTER  (Frame 73 — 1440×150, #111, 1px #ff2f92, r30)
   ========================================================= */
.jb-news { padding: 120px var(--jb-gut) 0; }
.jb-news__in {
  width: min(1440px, 100%); margin: 0 auto;
  height: 150px; padding: 0 60px 0 48px;
  display: flex; align-items: center;
  background: var(--jb-panel);
  border: 1px solid var(--jb-pink); border-radius: 30px;
}
.jb-news__ic { flex: none; width: 88px; height: 88px; color: var(--jb-pink); fill: var(--jb-pink); }
.jb-news__copy { margin-left: 30px; }
.jb-news__copy h2 {
  font-family: var(--jb-f-display); font-weight: 400;
  font-size: 30px; line-height: 43px; letter-spacing: -1.2px; color: var(--jb-white);
  text-transform: uppercase;
}
.jb-news__copy p { margin-top: 2px; font-size: 20px; line-height: 24.2px; color: var(--jb-on-dark); }
.jb-news__form { margin-left: auto; display: flex; align-items: center; gap: 15px; }
.jb-news__form input {
  width: 486px; height: 62px; padding: 0 36px;
  background: none; border: 1px solid var(--jb-white); border-radius: 60px;
  font-size: 20px; line-height: 24.2px; outline: none;
}
.jb-news__form input::placeholder { color: var(--jb-on-dark); opacity: 1; }

/* =========================================================
   FOOTER  (Frame 61 — 1440 content, 415 tall)
   ========================================================= */
.jb-footer { padding: 70px var(--jb-gut) 0; }
.jb-footer__in { width: min(1440px, 100%); margin: 0 auto; padding-bottom: 17px; }
.jb-footer__grid { display: grid; grid-template-columns: 554px 211px 278px 207px 1fr; }
.jb-footer__brand img { width: 180px; height: auto; }
.jb-footer__brand p { width: 433px; margin-top: 21px; font-size: 18px; line-height: 21.78px; color: var(--jb-on-dark); }
.jb-footer__col { padding-top: 30px; }
.jb-footer__col h3 { font-weight: 700; font-size: 20px; line-height: 24.2px; margin-bottom: 18px; }
.jb-footer__col h3 { color: var(--jb-white); }
.jb-footer__col li + li { margin-top: 15px; }
.jb-footer__col li, .jb-footer__col a, .jb-footer__col p { font-size: 18px; line-height: 21.78px; color: var(--jb-on-dark); }
.jb-footer__col a { transition: color .2s; }
.jb-footer__col a:hover { color: var(--jb-pink); }

/* Frame 56 — 1440×80 with a pink rule top and bottom */
.jb-footer__bar {
  height: 80px; margin-top: 33px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--jb-pink); border-bottom: 1px solid var(--jb-pink);
}
.jb-footer__social { display: flex; gap: 12px; }
.jb-footer__social a {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  background: var(--jb-pink); border-radius: 7.6px;
  font-size: 18px; color: var(--jb-white);
  transition: opacity .2s;
}
.jb-footer__social a:hover { opacity: .85; }
.jb-footer__accept { margin-left: auto; margin-right: 18px; font-weight: 700; font-size: 18px; line-height: 21.78px; }
.jb-footer__pay { display: flex; gap: 8px; }
.jb-footer__pay img, .jb-footer__pay svg { width: 47px; height: 32px; }

.jb-footer__legal strong { font-weight: 700; color: var(--jb-white); }
.jb-footer__legal {
  display: flex; justify-content: space-between;
  margin-top: 21px;
  font-size: 18px; line-height: 21.78px; color: var(--jb-on-dark);
}
.jb-footer__terms { display: flex; gap: 32px; }
.jb-footer__terms a { transition: color .2s; }
.jb-footer__terms a:hover { color: var(--jb-pink); }

/* =========================================================
   RESPONSIVE
   The design is fixed-width to 1920; below that each block
   relaxes to fluid widths in the same visual order.
   ========================================================= */

/* ---- below the full 1920 canvas ---- */
@media (max-width: 1919px) {
  .jb-hero__art { width: min(1171px, 62vw); }
  .jb-hero__blob { left: auto; right: 22vw; }
}

/* ---- large laptop: sections go fluid ---- */
@media (max-width: 1700px) {
  .jb-announce { width: auto; flex: 1 1 auto; min-width: 0; margin-left: 30px; }
  .jb-search   { width: 340px; margin-left: 30px; }
  .jb-nav__links { gap: clamp(24px, 4.4vw, 86px); }

  .jb-features { height: auto; min-height: 182px; gap: clamp(30px, 4vw, 119px); padding-inline: clamp(24px, 5vw, 91px); }
  .jb-features p { width: auto; }
  .jb-steps { --jb-steprail: clamp(28px, 6vw, 134px); }
  .jb-steps li { width: auto; flex: 1 1 0; }
  .jb-how { padding-inline: clamp(24px, 8vw, 180px); }

  .jb-founder__grid { grid-template-columns: minmax(0,710px) minmax(0,752px); gap: clamp(32px,6vw,128px); padding-inline: clamp(24px,8vw,180px); }
  .jb-founder__photo { width: 100%; }
  .jb-faq__cols { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .jb-footer__grid { grid-template-columns: minmax(0,1.6fr) repeat(4, minmax(0,1fr)); gap: 24px; }
  .jb-footer__brand p { width: auto; }
}

/* ---- laptop ---- */
@media (max-width: 1500px) {
  .jb-hero { height: auto; padding: 60px 0 80px; }
  .jb-hero__copy, .jb-hero__art { position: static; }
  .jb-hero { display: grid; grid-template-columns: minmax(0,533px) minmax(0,1fr); grid-template-areas: "copy art"; align-items: center; gap: 40px;
          padding-inline: var(--jb-gut); }
  .jb-hero__copy { grid-area: copy; width: auto; }
  .jb-hero__copy p { width: auto; }
  .jb-hero__art { grid-area: art; width: 100%; justify-self: end; }
  .jb-hero__blob { position: absolute; right: 12vw; top: 15%; }
  .jb-script { font-size: clamp(56px, 5.4vw, 100px); line-height: 1.22; }
  .jb-shout  { font-size: clamp(56px, 5.5vw, 102px); line-height: 1.21; }
  .jb-hero__cta { margin-top: 48px; }
  .jb-panel--overlap { margin-top: 0; }
  .jb-shell { margin-top: 0; }

  .jb-h2, .jb-faq__title { font-size: clamp(32px, 3.4vw, 50px); line-height: 1.1; }
  .jb-founder__title  { font-size: clamp(36px, 3.9vw, 70px); line-height: 1.05; }
  .jb-videos__title   { font-size: clamp(40px, 4vw, 70px);   line-height: .92; }

  .jb-how { height: auto; margin-top: 72px; padding-bottom: 90px; }
  .jb-cards { gap: 24px; }
  .jb-news__form input { width: min(486px, 30vw); }
  .jb-videos { gap: clamp(32px, 6vw, 111px); }
  .jb-features { gap: 30px; padding: 38px 48px; }
  .jb-features li { flex: 1 1 0; min-width: 0; gap: 18px; }
  .jb-features img { height: 64px; }
  .jb-features h3 { font-size: 19px; line-height: 1.18; }
  .jb-features p { font-size: 16px; line-height: 1.3; }
  .jb-founder__title { font-size: clamp(40px, 3vw, 48px); white-space: normal; }
}

/* ---- small laptop / large tablet ---- */
@media (max-width: 1200px) {
  .jb-features { flex-wrap: wrap; height: auto; row-gap: 36px; }
  .jb-features li { flex: 1 1 300px; }
  .jb-cards { grid-template-columns: repeat(3, 1fr); }
  .jb-steps { flex-wrap: wrap; row-gap: 40px; }
  .jb-steps li::before { content: none; }
  .jb-steps li { flex: 1 1 240px; }
  .jb-founder__grid { grid-template-columns: 1fr; }
  .jb-founder__photo { order: -1; margin-top: 0; }
  .jb-founder { padding-top: 60px; }
  .jb-marquee--lg { margin-top: 60px; }
  .jb-videos { grid-template-columns: 1fr; gap: 40px; }
  .jb-news__in { height: auto; flex-wrap: wrap; gap: 24px; padding: 30px 32px; }
  .jb-news__form { margin-left: 0; flex: 1 1 100%; }
  .jb-news__form input { width: 100%; }
}

/* ---- tablet: burger menu ---- */
@media (max-width: 1024px) {
  .jb-topbar__in { height: auto; flex-wrap: wrap; gap: 16px; padding: 20px 0; }
  .jb-logo { margin-right: auto; }
  .jb-logo img { width: 220px; }
  .jb-announce { order: 3; flex-basis: 100%; margin-left: 0; }
  .jb-search   { order: 4; width: 100%; margin-left: 0; }
  .jb-tools    { order: 2; margin-left: 0; }
  .jb-burger {
    order: 1; display: grid; align-content: center; gap: 5px;
    width: 50px; height: 50px; padding: 0 12px;
    border: 1px solid var(--jb-plum); border-radius: 50%; cursor: pointer;
  }
  .jb-burger span { height: 2px; background: var(--jb-pink); transition: transform .25s, opacity .25s; }
  .jb-navtoggle:checked ~ .jb-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .jb-navtoggle:checked ~ .jb-burger span:nth-child(2) { opacity: 0; }
  .jb-navtoggle:checked ~ .jb-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Full-height off-canvas menu, matching the filters drawer */
  .jb-topbar:has(.jb-navtoggle:checked) { z-index: 100; }
  .jb-nav {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 95;
    width: min(360px, 86vw);
    overflow-y: auto;
    border-right: 1px solid var(--jb-plum);
    translate: -102% 0;
    transition: translate .28s ease;
  }
  .jb-topbar:has(.jb-navtoggle:checked) .jb-nav { translate: 0 0; }
  .jb-nav__in {
    width: auto; margin-inline: 0;
    height: auto; padding: 64px 24px 32px;
    flex-direction: column; align-items: flex-start; gap: 18px;
  }
  .jb-nav__close {
    position: absolute; right: 18px; top: 18px;
    display: grid; place-items: center;
    width: 38px; height: 38px;
    background: var(--jb-pink); border-radius: 50%;
    font-size: 22px; color: var(--jb-white); cursor: pointer;
  }
  .jb-navscrim {
    display: block;
    position: fixed; inset: 0; z-index: 90;
    background: rgb(15 3 9 / .6);
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, visibility .28s;
  }
  .jb-topbar:has(.jb-navtoggle:checked) .jb-navscrim { opacity: 1; visibility: visible; }
  .jb-nav__links { flex-direction: column; align-items: stretch; gap: 16px; }
  .jb-nav__social::before { content: none; }

  .jb-hero { grid-template-columns: 1fr; grid-template-areas: "copy" "art"; padding-top: 40px; padding-bottom: 56px; }
  .jb-hero__copy { order: 1; }
  .jb-hero__art { order: 2; width: min(100%, 620px); justify-self: center; }
  .jb-sec .jb-best .jb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jb-footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px; }
  .jb-footer__bar { height: auto; flex-wrap: wrap; gap: 20px; padding: 20px 0; }
}

/* ---- large phone ---- */
@media (max-width: 860px) {
  .jb-cards { grid-template-columns: repeat(2, 1fr); }
  .jb-faq__cols { grid-template-columns: 1fr; gap: 20px; }
  .jb-videos__grid { grid-template-columns: 1fr; }
  .jb-video img { height: auto; aspect-ratio: 525 / 421; }
  .jb-head { flex-direction: column; align-items: flex-start; }
  .jb-head .jb-btn { margin-top: 4px; }
  .jb-shell { border-radius: 30px; padding: 20px 20px 60px; }
  .jb-founder__body { text-align: left; }
}

/* ---- phone ---- */
@media (max-width: 600px) {
  :root { --jb-gut: 16px; }
  .jb-topbar__in { gap: 12px; }
  .jb-logo img { width: min(170px, 44vw); }
  .jb-tools { gap: 10px; }
  .jb-tools .jb-iconbtn:nth-child(1) { display: none; }
  .jb-iconbtn, .jb-burger { width: 44px; height: 44px; }
  .jb-burger { padding: 0 10px; }
  .jb-search { padding-left: 20px; }
  .jb-announce { padding: 0 14px; }
  .jb-announce__bell { margin-right: 16px; }

  .jb-btn { height: 54px; padding: 0 32px; font-size: 16px; }
  .jb-features li { flex-basis: 100%; }
  .jb-cards { grid-template-columns: 1fr; }
  .jb-steps li { flex-basis: 100%; }
  .jb-how { padding: 60px var(--jb-gut); }
  .jb-founder { padding: 40px 0 15px; }
  .jb-founder__grid { padding-inline: var(--jb-gut); }
  .jb-quote { padding: 16px 20px; font-size: 20px; line-height: 1.25; }
  .jb-marquee--lg { margin-inline: var(--jb-gut); }
  .jb-footer__grid { grid-template-columns: 1fr; }
  .jb-footer__legal { flex-direction: column; gap: 10px; }
  .jb-footer__terms { gap: 24px; }
  .jb-news__copy { margin-left: 0; }
  .jb-news__in { padding: 24px 20px; }
  .jb-news__ic { width: 56px; height: 56px; }
}

/* =========================================================
   COLLECTION PAGE  (Figma node 127:2717 — 1920 × 4246)
   PRODUCT PAGE     (Figma node 131:3693 — 1920 × 3953)
   Both reuse the header, newsletter and footer above.
   ========================================================= */

/* No hero on these pages, so the shell sits below the nav
   instead of overlapping it, and its bottom padding is 30 not 102. */
.jb-shell--sub { margin-top: 30px; padding-bottom: 30px; }

/* Script eyebrow — Kaufmann 30/36.5 (Kodchasan is the landing page only) */
.jb-eyebrow--script {
  font-family: var(--jb-f-script); font-weight: 400;
  font-size: 30px; line-height: 36.5px;
  color: var(--jb-pink);
}

/* Light feature bar — same geometry as the dark one, on #fff9fc */
.jb-features--light { margin-top: 100px; background: var(--jb-cream); }
.jb-features--light h3 { color: var(--jb-plum); }
.jb-features--light p  { color: var(--jb-on-light); }

/* ---------- Collection ---------- */
.jb-col-main { margin: 70px 70px 0; }          /* Frame 75 — inset 100 from the shell edge */

.jb-col-head { display: flex; align-items: flex-start; justify-content: space-between; }
.jb-col-head h1 {
  font-family: var(--jb-f-display); font-weight: 400;
  font-size: 50px; line-height: 43px; letter-spacing: -2px;
  text-transform: uppercase; color: var(--jb-plum);
}
.jb-col-head p { width: 393px; margin-top: 20px; font-size: 18px; line-height: 21.78px; color: var(--jb-on-light); }

.jb-sortby {
  display: flex; align-items: center; justify-content: space-between;
  width: 214px; height: 50px; padding: 0 20px 0 28px;
  border: 1px solid var(--jb-plum); border-radius: 50px;
  font-weight: 500; font-size: 16px; line-height: 19.36px; color: var(--jb-plum);
}
.jb-sortby .jb-ic { font-size: 20px; }

.jb-col-body { display: grid; grid-template-columns: 393px minmax(0, 1fr); gap: 30px; margin-top: 28px; }

/* Sidebar — Frame 76, 393 wide, #fff9fc, r30 */
.jb-side { padding: 30px 30px 20px; background: var(--jb-cream); border-radius: 30px; align-self: start; }
.jb-side h2 { font-weight: 700; font-size: 25px; line-height: 30.25px; color: var(--jb-plum); }
.jb-side__group + .jb-side__group { margin-top: 40px; }
.jb-side > form { margin: 40px 0 0; }
.jb-side__list { margin-top: 20px; }
.jb-side__list li + li { margin-top: 2px; }
.jb-side__list a {
  display: flex; align-items: center;
  height: 47px; padding: 0 20px;
  border-radius: 10px;
  font-size: 16px; line-height: 19.36px; color: rgb(72 18 44 / .8);
}
.jb-side__list a:hover { background: rgb(255 47 146 / .08); }
.jb-side__list .jb-is-active { background: var(--jb-pink-20); color: var(--jb-plum); }

.jb-side__check {
  display: flex; align-items: center; gap: 10px;
  height: 47px; cursor: pointer;
  font-size: 16px; line-height: 19.36px; color: var(--jb-plum);
}
.jb-side__check input {
  appearance: none; flex: none;
  width: 17px; height: 17px; margin: 0;
  border: 1px solid var(--jb-plum); border-radius: 3px;
}
.jb-side__check input:checked {
  background-color: var(--jb-pink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.2 8.2 3 3 6.6-6.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center; background-repeat: no-repeat; background-size: 13px 13px;
  border-color: var(--jb-pink);
}

/* Promo card — Frame 90, 353×369, #fff, r20 */
.jb-promo {
  margin: 30px -10px 0;
  padding: 40px 44px;
  background: var(--jb-white); border-radius: 20px;
  text-align: center;
}
.jb-promo img { width: 112px; height: auto; margin: 0 auto 20px; }
.jb-promo h3 { font-weight: 700; font-size: 25px; line-height: 30.25px; color: var(--jb-plum); }
.jb-promo p  { margin-top: 20px; font-size: 16px; line-height: 19.36px; color: var(--jb-plum); }

/* Product grid — 4 × 296 with 18/20 gutters */
.jb-col-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 18px; align-self: start; align-items: stretch; }
.jb-col-grid .jb-card { font-size: 14.017px; }        /* 0.876 of the landing card */
.jb-col-grid .jb-card__media { background-image: var(--jb-img-col-card-bg); }

/* ---------- Product ---------- */
.jb-pdp { margin: 20px; display: flex; }           /* Frame 99 — inset 50 from the shell edge */
.jb-pdp__thumbs { display: flex; flex-direction: column; gap: 19.6px; width: 117px; }
.jb-pdp__thumbs img { width: 117px; height: 117px; object-fit: cover; border-radius: 10px; cursor: pointer; }
.jb-pdp__thumbs img:hover { outline: 2px solid var(--jb-pink); }
.jb-pdp__main { width: 653px; height: 800px; margin-left: 20px; object-fit: cover; border-radius: 10px; }

/* Info panel — Frame 101, 920×800, #fff9fc, r30 (clips, as the Figma frame does) */
.jb-pdp__info {
  width: 920px; min-width: 0; min-height: 800px; height: auto; margin-left: 50px; padding: 40px;
  background: var(--jb-cream); border-radius: 30px;
  overflow: visible;
  color: var(--jb-plum);
}
.jb-pdp__eyebrow { font-size: 16px; line-height: 19.36px; color: var(--jb-pink); }
.jb-pdp__title { margin-top: 10px; font-weight: 700; font-size: 51.9px; line-height: 62.8px; color: var(--jb-plum); }
.jb-pdp__desc  { margin-top: 20px; font-size: 18px; line-height: 21.78px; color: var(--jb-on-light); }
.jb-pdp__wish {
  float: right;
  display: grid; place-items: center;
  width: 57px; height: 57px;
  background: var(--jb-pink); border-radius: 10px;
  font-size: 28px; color: var(--jb-white);
}

.jb-pdp__buy { display: flex; align-items: center; margin-top: 20px; }
.jb-pdp__price { font-weight: 600; font-size: 30px; line-height: 36.3px; color: var(--jb-pink); }
.jb-pdp__badges {
  display: flex; align-items: center; gap: 65px;
  margin-left: auto; height: 67px; padding: 0 36px;
  background: var(--jb-ink); border-radius: 14.19px;
}
.jb-pdp__badges li { display: flex; align-items: center; gap: 11px; }
.jb-pdp__badges img { height: 31px; width: auto; }
.jb-pdp__badges span { font-weight: 600; font-size: 14.19px; line-height: 13.5px; color: var(--jb-white); }

.jb-pdp__qty { margin-top: 40px; }
.jb-pdp__qty-head { display: flex; align-items: center; justify-content: space-between; }
.jb-pdp__qty-head p { font-size: 18px; line-height: 21.78px; color: rgb(72 18 44 / .8); }
.jb-pdp__qty-head .jb-ic { font-size: 22px; color: var(--jb-plum); }
.jb-pdp__sizes { display: flex; gap: 10px; margin-top: 18px; }
.jb-pdp__sizes button {
  width: 111px; height: 50px;
  background: var(--jb-pink-20); border: 0; border-radius: 10px;
  font-size: 16px; line-height: 19.36px; color: var(--jb-plum);
  transition: background .2s, color .2s;
}
.jb-pdp__sizes button:hover { background: rgb(255 47 146 / .35); }
.jb-pdp__sizes .jb-is-active { background: var(--jb-ink); color: var(--jb-white); }

.jb-pdp__actions { display: flex; gap: 20px; margin-top: 40px; }
.jb-pdp__actions .jb-btn { width: 410px; padding: 0; }
.jb-btn--outline { background: transparent; color: var(--jb-plum); box-shadow: inset 0 0 0 1px var(--jb-plum); }
.jb-btn--outline:hover { background: var(--jb-pink-20); }

.jb-pdp__meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 32px;
  font-size: 16px; line-height: 19.36px; color: var(--jb-plum);
}
.jb-pdp__meta span { display: flex; align-items: center; gap: 10px; }
.jb-pdp__meta .jb-ic { font-size: 24px; color: var(--jb-pink); }

.jb-pdp__acc { margin-top: 32px; }
.jb-pdp__acc details { border-bottom: 1px solid var(--jb-plum-20); }
.jb-pdp__acc summary {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
  font-family: var(--jb-f-display); font-weight: 400;
  font-size: 20px; line-height: 24.2px; text-transform: uppercase;
  color: var(--jb-plum); cursor: pointer; list-style: none;
}
.jb-pdp__acc summary::-webkit-details-marker { display: none; }
.jb-pdp__acc summary::after {
  content: ""; flex: none; width: 20px; height: 20px;
  background: var(--jb-pink);
  clip-path: polygon(46% 0,54% 0,54% 46%,100% 46%,100% 54%,54% 54%,54% 100%,46% 100%,46% 54%,0 54%,0 46%,46% 46%);
  transition: transform .25s;
}
.jb-pdp__acc details[open] summary::after { transform: rotate(45deg); }
.jb-pdp__acc details p { padding-bottom: 24px; font-size: 16px; line-height: 19.36px; color: var(--jb-on-light); }

/* Dark marquee strip — Frame 100, 1800×80, r30 */
.jb-strip { height: 80px; margin-top: 50px; display: flex; align-items: center; background: var(--jb-ink); border-radius: 30px; }
.jb-strip .jb-marquee__track li { color: var(--jb-white); }

/* How to bake — Frame 28, 1800×449, #fff9fc, r30 */
.jb-howbake {
  position: relative;
  height: 449px; margin-top: 30px; padding: 80px 180px 0;
  background: var(--jb-cream); border-radius: 30px;
}
.jb-howbake h2 { margin-top: 10px; }
.jb-howbake .jb-btn { position: absolute; right: 180px; top: 108px; }
.jb-recipe { --jb-steprail: 73px; display: flex; gap: var(--jb-steprail); margin-top: 47px; }
.jb-recipe li { position: relative; }
.jb-recipe li::before { content: none; }
.jb-recipe--rail li::before {
  content: ""; position: absolute;
  left: 60px; right: calc(-1 * var(--jb-steprail)); top: 29px; height: 2px;
  background: rgb(255 47 146 / .75);
}
.jb-recipe--rail li:last-child::before { content: none; }
.jb-recipe__no {
  display: grid; place-items: center;
  width: 60px; height: 60px; margin-bottom: 23px;
  background: var(--jb-ink); border-radius: 10px;
  font-weight: 700; font-size: 20px; line-height: 24.2px; color: var(--jb-white);
}
.jb-recipe h3 { font-weight: 700; font-size: 20px; line-height: 24.2px; color: var(--jb-plum); }
.jb-recipe p  { margin-top: 10px; font-size: 16px; line-height: 19.36px; color: var(--jb-on-light); }

/* "You may also like" — Frame 27, 1440×593 */
.jb-alsolike { margin-top: 110px; }
.jb-alsolike .jb-head .jb-btn { margin-top: 0; }
.jb-alsolike .jb-head .jb-h2 { margin-top: 13px; }
.jb-alsolike .jb-cards { margin-top: 30px; }

/* ---------- responsive for both sub-pages ---------- */
@media (max-width: 1700px) {
  .jb-col-main { margin: 40px 40px 0; }
  .jb-pdp__main { width: auto; flex: 1 1 auto; }
  .jb-pdp__info { width: 46%; flex: none; }
  .jb-pdp__buy { flex-wrap: wrap; }
  .jb-pdp__badges {
    width: 100%; height: auto; min-height: 67px;
    margin: 16px 0 0; padding: 12px clamp(16px, 2vw, 28px);
    justify-content: space-between; gap: 14px;
  }
  .jb-howbake { height: auto; padding-inline: clamp(24px, 8vw, 180px); padding-bottom: 80px; }
  .jb-howbake .jb-btn { right: clamp(24px, 8vw, 180px); }
  .jb-recipe { --jb-steprail: clamp(24px, 4vw, 73px); }
}
@media (max-width: 1400px) {
  .jb-col-head h1, .jb-howbake h2, .jb-alsolike .jb-h2 { font-size: clamp(32px, 3.4vw, 50px); line-height: 1.1; }
  .jb-eyebrow--script { font-size: clamp(22px, 2vw, 30px); line-height: 1.2; }
  .jb-pdp__title { font-size: clamp(30px, 3.2vw, 51.9px); line-height: 1.15; }
  .jb-pdp { flex-wrap: wrap; }
  .jb-pdp__info { width: 100%; min-height: 0; height: auto; margin: 30px 0 0; }
  .jb-pdp__main { height: auto; aspect-ratio: 653 / 800; }
  .jb-pdp__actions .jb-btn { width: auto; flex: 1 1 0; }
  .jb-pdp__badges { gap: 28px; padding: 0 24px; }
  .jb-col-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .jb-col-body { grid-template-columns: 1fr; }
  .jb-promo { margin-inline: 0; }
  .jb-recipe { flex-wrap: wrap; row-gap: 40px; }
  .jb-recipe li::before { content: none; }
  .jb-howbake .jb-btn { position: static; margin-top: 24px; }
}
@media (max-width: 1024px) {
  .jb-pdp { flex-direction: column; }
  .jb-pdp__thumbs { flex-direction: row; width: auto; order: 2; overflow-x: auto; }
  .jb-pdp__main { width: 100%; margin: 0 0 16px; }
  .jb-col-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .jb-col-head { flex-direction: column; gap: 20px; }
  .jb-col-head p { width: auto; }
  .jb-pdp__meta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .jb-pdp__buy { flex-direction: column; align-items: flex-start; gap: 20px; }
  .jb-pdp__badges { margin-left: 0; }
}
@media (max-width: 600px) {
  .jb-col-main { margin: 20px 16px 0; }
  .jb-col-grid { grid-template-columns: 1fr; }
  .jb-col-grid .jb-card { font-size: 16px; }
  .jb-pdp { margin: 10px; }
  .jb-pdp__info { padding: 24px; }
  .jb-pdp__sizes { flex-wrap: wrap; }
  .jb-pdp__actions { flex-direction: column; }
  .jb-pdp__badges { flex-wrap: wrap; height: auto; padding: 16px 20px; gap: 16px; }
}

/* Product-page marquee: the pink pill is replaced by the dark strip around it */
.jb-marquee--bare { margin: 0; height: auto; background: none; border-radius: 0; flex: 1 1 auto; }
/* Sub-page FAQ: Figma sets the heading 11px lower than on the landing page */
.jb-faq--sub .jb-faq__cols { margin-top: 4px; }

/* =========================================================
   MEGA MENU
   Not part of the Figma file — built on the same tokens.
   CSS only: opens on hover and on keyboard focus-within.
   ========================================================= */
.jb-has-mega { position: static; }
.jb-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 30;
  background: var(--jb-ink);
  border-top: 1px solid var(--jb-plum);
  box-shadow: 0 24px 48px rgb(0 0 0 / .45);
  opacity: 0; visibility: hidden; translate: 0 -8px;
  transition: opacity .18s ease .25s, translate .18s ease .25s, visibility .18s .25s;
}
@media (hover: hover) and (min-width: 1025px) {
  .jb-has-mega:hover .jb-mega,
  .jb-has-mega:focus-within .jb-mega {
    opacity: 1; visibility: visible; translate: 0 0;
    transition-delay: 0s;                 /* opens immediately... */
  }
  .jb-has-mega:hover .jb-has-caret::after,
  .jb-has-mega:focus-within .jb-has-caret::after { rotate: 225deg; translate: 0 2px; }
}

.jb-mega__in {
  width: min(1620px, 100% - var(--jb-gut) * 2);
  margin: 0 auto;
  padding: 40px 0 48px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 300px;
  gap: 40px;
}
.jb-mega__col h3 {
  font-weight: 700; font-size: 18px; line-height: 21.78px;
  color: var(--jb-pink); margin-bottom: 18px;
}
.jb-mega__col li + li { margin-top: 13px; }
.jb-mega__col a {
  font-size: 16px; line-height: 19.36px; color: var(--jb-on-dark);
  transition: color .2s;
}
.jb-mega__col a:hover { color: var(--jb-white); }

.jb-mega__promo {
  display: block; padding: 20px;
  background: var(--jb-white); border-radius: 20px;
  color: var(--jb-plum); text-align: center;
}
.jb-mega__promo img { width: 160px; margin: 0 auto 10px; }
.jb-mega__tag { font-family: var(--jb-f-eyebrow); font-size: 14px; color: var(--jb-pink); }
.jb-mega__promo h3 { margin-top: 4px; font-weight: 700; font-size: 20px; line-height: 24.2px; }
.jb-mega__price { margin-top: 4px; font-weight: 600; font-size: 16px; color: var(--jb-pink); }
.jb-mega__promo .jb-btn { height: 44px; margin-top: 14px; padding: 0 28px; font-size: 16px; }

/* Below 1024 the nav is a drawer, so SHOP must open a sub-drawer rather than
   navigate. The <a> is swapped for a <label> bound to a checkbox — tapping it
   toggles the panel; the desktop <a> still goes to the collection page. */
@media (max-width: 1024px) {
  .jb-nav__links > li.jb-has-mega { display: block; }   /* outrank `.jb-nav__links > li` */
  .jb-nav__link { height: auto; }                    /* the 50px row rule is desktop-only */
  .jb-has-mega > a.jb-nav__link { display: none; }              /* the desktop link */
  .jb-has-mega > .jb-nav__link--tap {                            /* the drawer toggle */
    display: inline-flex; justify-content: flex-start; gap: 10px; width: 100%;
  }

  /* A second drawer that slides over the menu, rather than an inline dropdown */
  .jb-mega {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 96;
    width: min(360px, 86vw); height: 100%;
    display: block; opacity: 1; visibility: visible;
    padding: 22px 24px 32px;
    background: var(--jb-ink);
    border: 0; border-right: 1px solid var(--jb-plum); box-shadow: none;
    overflow-y: auto; overscroll-behavior: contain;
    translate: -102% 0;
    transition: translate .28s ease;
  }
  /* only when the menu drawer itself is open, so closing the menu closes both */
  .jb-topbar:has(.jb-navtoggle:checked) .jb-megatoggle:checked ~ .jb-mega { translate: 0 0; }

  .jb-mega__back {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 26px;
    font-weight: 500; font-size: 16px; color: var(--jb-pink);
    cursor: pointer;
  }
  .jb-mega__back .jb-ic { font-size: 22px; rotate: 90deg; }   /* chevron-down → points back */

  /* the row that opens it reads as "goes somewhere", so its chevron points right */
  .jb-nav__link--tap::after { rotate: -45deg; translate: 0 0; }
  .jb-megatoggle:focus-visible ~ .jb-nav__link--tap { outline: 0; }

  .jb-mega__in { width: auto; padding: 0; grid-template-columns: 1fr; gap: 22px; }
  .jb-mega__col h3 { margin-bottom: 12px; font-size: 16px; }
  .jb-mega__col li + li { margin-top: 11px; }
  .jb-mega__promo { display: none; }
}

/* =========================================================
   COLLECTION FILTERS — off-canvas drawer below 1200
   CSS only: a hidden checkbox drives the panel and its scrim.
   ========================================================= */
.jb-filtertoggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.jb-col-tools { display: flex; align-items: center; gap: 14px; }
.jb-filterbtn, .jb-side__close, .jb-side__scrim { display: none; }

@media (max-width: 1200px) {
  .jb-filterbtn {
    display: inline-flex; align-items: center; gap: 10px;
    height: 50px; padding: 0 24px;
    border: 1px solid var(--jb-plum); border-radius: 50px;
    font-weight: 500; font-size: 16px; line-height: 19.36px; color: var(--jb-plum);
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
  }
  .jb-filterbtn .jb-ic { font-size: 20px; color: var(--jb-pink); }
  .jb-filterbtn:hover { background: var(--jb-pink); border-color: var(--jb-pink); color: var(--jb-white); }
  .jb-filterbtn:hover .jb-ic { color: var(--jb-white); }
  .jb-filtertoggle:focus-visible ~ .jb-col-head .jb-filterbtn { outline: 0; }

  /* The panel leaves the flow entirely, so the product grid keeps the full width */
  /* .jb-shell creates a stacking context at z-index 2, which would otherwise trap
     the drawer under the header (z-index 20). Lift it only while open. */
  .jb-shell:has(.jb-filtertoggle:checked) { z-index: 70; }

  .jb-side {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
    width: min(360px, 86vw);
    height: 100%;
    align-self: stretch;        /* the base rule's `align-self: start` would shrink it */
    overflow-y: auto;
    padding: 64px 24px 32px;
    border-radius: 0 30px 30px 0;
    translate: -102% 0;
    transition: translate .28s ease;
  }
  .jb-filtertoggle:checked ~ .jb-col-body .jb-side { translate: 0 0; }

  .jb-side__close {
    position: absolute; right: 18px; top: 18px;
    display: grid; place-items: center;
    width: 38px; height: 38px;
    background: var(--jb-pink); border-radius: 50%;
    font-size: 22px; color: var(--jb-white);
    cursor: pointer;
  }

  .jb-side__scrim {
    display: block;
    position: fixed; inset: 0; z-index: 55;
    background: rgb(15 3 9 / .6);
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, visibility .28s;
  }
  .jb-filtertoggle:checked ~ .jb-col-body .jb-side__scrim { opacity: 1; visibility: visible; }

  /* the promo card is a shop-wide notice, not a filter — keep it out of the drawer */
  .jb-side .jb-promo { display: none; }
}

@media (max-width: 600px) {
  .jb-col-tools { display: grid; grid-template-columns: 100px minmax(0, 1fr); width: 100%; gap: 12px; }
  .jb-sortby-form { width: 100%; min-width: 0; }
  .jb-filterbtn, .jb-sortby { width: 100%; min-width: 0; justify-content: center; }
  .jb-filterbtn { padding: 0 14px; }
  .jb-sortby { padding: 0 38px 0 14px; font-size: 14px; white-space: nowrap; }
}

/* =========================================================
   SCROLL LOCK
   While a drawer is open the page behind it must not scroll.
   ========================================================= */
@media (max-width: 1200px) {
  html:has(.jb-filtertoggle:checked) { overflow: hidden; }
}
@media (max-width: 1024px) {
  html:has(.jb-navtoggle:checked) { overflow: hidden; }
}
/* and scrolling inside a drawer must not chain to the page */
.jb-nav, .jb-mega, .jb-side { overscroll-behavior: contain; }

/* =========================================================
   SHOPIFY WRAPPERS
   In the static build one .jb-shell wrapped several regions.
   Shopify renders each section as a sibling, so the white panel
   is applied per section and the merchant picks which edge
   rounds off (Panel position in the section settings).
   ========================================================= */
.jb-sec { position: relative; }
.jb-sec--dark { background: var(--jb-ink); }

.jb-panel {
  position: relative;
  display: flow-root;
  width: min(1860px, 100% - 20px);
  margin: 0 auto;
  padding: 0 30px;
  background: var(--jb-white);
  color: var(--jb-plum);
}
.jb-videos__title-inline { display: none; }
.jb-panel::before {
  content: "";
  position: absolute; inset: 0;
  background: url("./jb-bg-pattern.png") 0 0 repeat;
  background-size: 376px 250px;
  border-radius: inherit;
  pointer-events: none;
}
.jb-panel > * { position: relative; z-index: 1; }
.jb-panel--top    { border-radius: 50px 50px 0 0; padding-top: 30px; }
.jb-panel--bottom { border-radius: 0 0 50px 50px; padding-bottom: 30px; }
.jb-panel--single { border-radius: 50px; padding-top: 30px; padding-bottom: 30px; }
.jb-panel--overlap { margin-top: -132px; z-index: 2; }

/* section spacing, exposed as a setting so every section is tunable */
.jb-sec:not(:has(> .jb-panel))[style*="--jb-pt"] { padding-top: var(--jb-pt); }
.jb-sec:not(:has(> .jb-panel))[style*="--jb-pb"] { padding-bottom: var(--jb-pb); }
.jb-sec > .jb-panel { padding-top: var(--jb-pt); padding-bottom: var(--jb-pb); }
.jb-sec > .jb-panel--top { padding-top: calc(30px + var(--jb-pt)); }
.jb-sec > .jb-panel--bottom { padding-bottom: calc(30px + var(--jb-pb)); }
.jb-sec > .jb-panel--single {
  padding-top: calc(30px + var(--jb-pt));
  padding-bottom: calc(30px + var(--jb-pb));
}

/* the 1440 content column used by most sections */
.jb-inner { width: min(1440px, 100%); margin-inline: auto; }

@media (max-width: 860px) {
  .jb-panel { padding-inline: 20px; }
  .jb-panel--top, .jb-panel--single { border-radius: 30px 30px 0 0; }
  .jb-panel--bottom { border-radius: 0 0 30px 30px; }
  .jb-panel--single { border-radius: 30px; }
  .jb-panel--overlap { margin-top: 0; }
}

/* =========================================================
   SHOPIFY MARKUP BINDINGS
   The static build used fixed markup; these rules cover the
   Liquid equivalents (forms, selects, richtext, placeholders).
   ========================================================= */

/* --- product card --- */
.jb-card--sm { font-size: 14.017px; }
.jb-card--colbg .jb-card__media { background-image: var(--jb-img-col-card-bg); }
.jb-card__media { display: block; }
.jb-card__media img { object-fit: contain; }
.jb-card__placeholder { width: 100%; height: 100%; }
.jb-card__form { display: contents; }
.jb-card h3 a { color: inherit; }
.jb-card h3 a:hover { color: var(--jb-pink); }
.jb-card__btn { border: 0; cursor: pointer; }
.jb-card__btn[disabled] { background: var(--jb-plum-20); color: var(--jb-plum); cursor: not-allowed; }
.jb-card[hidden] { display: none; }

/* --- feature bar / steps inside a panel --- */
.jb-panel-inner { width: 100%; }
.jb-steps li::before { content: none; }                 /* off unless the rail is enabled */
.jb-steps--rail li::before { content: ""; }
.jb-steps--rail li:last-child::before { content: none; }
.jb-steps__ic { font-weight: 700; font-size: 20px; line-height: 24.2px; }
.jb-steps__ic .jb-ic { width: 28px; height: 28px; }
.jb-steps__ic img { width: 28px; height: 28px; object-fit: contain; }
.jb-features img { width: auto; height: 83px; object-fit: contain; }

/* "How to bake" — left aligned header with the button pinned right */
.jb-howbake .jb-how__eyebrow, .jb-howbake .jb-how__title { text-align: left; }
.jb-howbake .jb-how__btn { position: absolute; right: 180px; top: 108px; }
@media (max-width: 1200px) {
  .jb-howbake .jb-how__btn { position: static; margin-bottom: 24px; }
}

/* --- founder richtext --- */
.jb-founder__body p + p { margin-top: 18px; }

/* --- FAQ / accordion answers are wrapped divs --- */
.jb-faq details > div, .jb-pdp__acc details > div { padding-top: 16px; font-size: 16px; line-height: 1.21; color: var(--jb-on-light); }
.jb-faq details > div p { padding-top: 0; }
.jb-faq details > div p + p, .jb-pdp__acc details > div p + p { margin-top: 12px; }
.jb-pdp__acc details > div { padding-bottom: 24px; }
.jb-pdp__acc details > div p { padding-bottom: 0; }

/* =========================================================
   Dynamic product media + Shopify cart/content templates
   All overrides remain scoped by the JustBake body/drawer classes.
   ========================================================= */
.jb-card__media .jb-card__product-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* JustBake cart drawer */
.jb-cart-drawer { font-family: var(--jb-f-body); color: var(--jb-plum); }
.jb-cart-drawer .cart-drawer__overlay { background: rgb(15 3 9 / .72); }
.jb-cart-drawer .drawer__inner {
  width: min(540px, 100vw); max-width: none;
  padding: 0;
  background: var(--jb-cream);
  border: 0; border-left: 2px solid var(--jb-pink);
  border-radius: 30px 0 0 30px;
  box-shadow: -18px 0 50px rgb(15 3 9 / .22);
}
.jb-cart-drawer .drawer__header { padding: 32px 32px 22px; border-bottom: 1px solid var(--jb-pink-20); }
.jb-cart-drawer .drawer__heading,
.jb-cart-drawer .cart__empty-text {
  font-family: var(--jb-f-display); font-size: 34px; line-height: 1;
  letter-spacing: -1px; text-transform: uppercase; color: var(--jb-plum);
}
.jb-cart-drawer .drawer__close {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  border-radius: 50%; background: var(--jb-pink); color: var(--jb-white);
}
.jb-cart-drawer cart-drawer-items { padding: 0 32px; }
.jb-cart-drawer .drawer__cart-items-wrapper { padding: 6px 0 20px; }
.jb-cart-drawer .cart-item { padding: 24px 0; border-bottom: 1px solid var(--jb-plum-20); }
.jb-cart-drawer .cart-item__image { border-radius: 14px; background: var(--jb-white); }
.jb-cart-drawer .cart-item__name { font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--jb-plum); }
.jb-cart-drawer .product-option,
.jb-cart-drawer .cart-item__details dl { color: var(--jb-on-light); }
.jb-cart-drawer .price,
.jb-cart-drawer .cart-item__final-price { font-weight: 700; color: var(--jb-pink); }
.jb-cart-drawer .quantity {
  min-height: 42px; border: 1px solid var(--jb-plum-20); border-radius: 50px;
  background: var(--jb-white);
}
.jb-cart-drawer .quantity::after,
.jb-cart-drawer .quantity::before { content: none; }
.jb-cart-drawer .quantity__button,
.jb-cart-drawer .quantity__input { color: var(--jb-plum); }
.jb-cart-drawer cart-remove-button .button { color: var(--jb-pink); }
.jb-cart-drawer .drawer__footer { padding: 24px 32px 32px; border-top: 1px solid var(--jb-pink-20); background: var(--jb-white); }
.jb-cart-drawer .totals__total { font-weight: 700; color: var(--jb-plum); }
.jb-cart-drawer .totals__total-value { font-weight: 700; color: var(--jb-pink); }
.jb-cart-drawer .cart__checkout-button,
.jb-cart-drawer .cart-drawer__warnings .button {
  min-height: 58px; border: 0; border-radius: 50px;
  background: var(--jb-pink); color: var(--jb-white);
  font-weight: 700; text-transform: none;
}
.jb-cart-drawer .cart__checkout-button::before,
.jb-cart-drawer .cart__checkout-button::after,
.jb-cart-drawer .cart-drawer__warnings .button::before,
.jb-cart-drawer .cart-drawer__warnings .button::after { content: none; }
.jb-cart-drawer .drawer__inner-empty { padding: 32px; background: var(--jb-cream); }

/* Branded shells for cart, pages, contact, blog and articles. */
body.jb-page #MainContent[data-template="cart"],
body.jb-page #MainContent[data-template="page"],
body.jb-page #MainContent[data-template="blog"],
body.jb-page #MainContent[data-template="article"],
body.jb-page #MainContent[data-template="search"],
body.jb-page #MainContent[data-template="404"] {
  width: min(1860px, calc(100% - 20px));
  margin: 30px auto;
  padding: 70px max(24px, calc((100% - 1500px) / 2)) 90px;
  overflow: hidden;
  background-color: var(--jb-white);
  background-image: url("./jb-bg-pattern.png");
  background-size: 376px 250px;
  border-radius: 50px;
  color: var(--jb-plum);
}
body.jb-page #MainContent[data-template="cart"] .gradient,
body.jb-page #MainContent[data-template="page"] .gradient,
body.jb-page #MainContent[data-template="blog"] .gradient,
body.jb-page #MainContent[data-template="article"] .gradient { background: transparent; }
body.jb-page #MainContent .page-width { max-width: 1440px; padding-inline: 0; }
body.jb-page #MainContent .main-page-title,
body.jb-page #MainContent .title--primary,
body.jb-page #MainContent .article-template__title {
  margin: 0 0 40px;
  font-family: var(--jb-f-display); font-size: clamp(42px, 4vw, 64px); line-height: .95;
  letter-spacing: -2px; text-transform: uppercase; color: var(--jb-plum);
}
body.jb-page #MainContent .rte { font-size: 18px; line-height: 1.65; color: rgb(72 18 44 / .78); }
body.jb-page #MainContent .rte h2,
body.jb-page #MainContent .rte h3 { margin-top: 1.5em; font-weight: 700; color: var(--jb-plum); }
body.jb-page #MainContent .rte a { color: var(--jb-pink); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Contact */
body.jb-page #MainContent .contact { max-width: 1100px; }
body.jb-page #MainContent .contact__button .button,
body.jb-page #MainContent .button {
  min-height: 58px; padding-inline: 42px;
  border: 0; border-radius: 50px; background: var(--jb-pink); color: var(--jb-white);
  font-family: var(--jb-f-body); font-weight: 700;
}
body.jb-page #MainContent .button::before,
body.jb-page #MainContent .button::after { content: none; }
body.jb-page #MainContent .field::before,
body.jb-page #MainContent .field::after { content: none; }
body.jb-page #MainContent .field__input,
body.jb-page #MainContent .select__select,
body.jb-page #MainContent .text-area {
  min-height: 58px; padding: 16px 20px;
  border: 1px solid var(--jb-plum-20); border-radius: 14px;
  background: var(--jb-white); color: var(--jb-plum);
  box-shadow: none;
}

/* Blog listing + article */
body.jb-page #MainContent .blog-articles { gap: 30px; }
body.jb-page #MainContent .blog-articles__article {
  overflow: hidden; padding: 0 0 28px;
  background: var(--jb-white); border-radius: 20px;
  box-shadow: 0 2px 14px rgb(0 0 0 / .1);
}
body.jb-page #MainContent .blog-articles__article .card__inner { border-radius: 20px 20px 0 0; overflow: hidden; }
body.jb-page #MainContent .blog-articles__article .card__content { padding: 24px 26px 0; }
body.jb-page #MainContent .card__heading { font-weight: 700; font-size: 25px; line-height: 1.2; color: var(--jb-plum); }
body.jb-page #MainContent .article-card__excerpt,
body.jb-page #MainContent .article-card__info { color: var(--jb-on-light); }
body.jb-page #MainContent .article-template__hero-container { max-width: 1200px; border-radius: 24px; overflow: hidden; }
body.jb-page #MainContent .article-template__content { max-width: 960px; }

/* Full cart page */
body.jb-page #MainContent[data-template="cart"] .title-wrapper-with-link { margin: 0 0 42px; }
body.jb-page #MainContent[data-template="cart"] .title-wrapper-with-link .title {
  font-family: var(--jb-f-display); font-size: clamp(42px, 4vw, 64px); line-height: 1;
  letter-spacing: -2px; text-transform: uppercase; color: var(--jb-plum);
}
body.jb-page #MainContent[data-template="cart"] .underlined-link { color: var(--jb-pink); }
body.jb-page #MainContent[data-template="cart"] .cart-items {
  overflow: hidden; padding: 0 28px; background: var(--jb-white); border-radius: 24px;
  box-shadow: 0 2px 14px rgb(0 0 0 / .08);
}
body.jb-page #MainContent[data-template="cart"] .cart-item { border-bottom: 1px solid var(--jb-plum-20); }
body.jb-page #MainContent[data-template="cart"] .cart-item__image { border-radius: 16px; }
body.jb-page #MainContent[data-template="cart"] .cart-item__name { font-weight: 700; color: var(--jb-plum); }
body.jb-page #MainContent[data-template="cart"] .price { font-weight: 700; color: var(--jb-pink); }
body.jb-page #MainContent[data-template="cart"] .cart__footer {
  margin-top: 30px; padding: 34px;
  background: var(--jb-cream); border-radius: 24px;
}
body.jb-page #MainContent[data-template="cart"] .cart__checkout-button { width: 100%; }

@media (max-width: 749px) {
  .jb-cart-drawer .drawer__inner { border-radius: 22px 0 0 22px; }
  .jb-cart-drawer .drawer__header,
  .jb-cart-drawer cart-drawer-items,
  .jb-cart-drawer .drawer__footer { padding-inline: 20px; }
  body.jb-page #MainContent[data-template="cart"],
  body.jb-page #MainContent[data-template="page"],
  body.jb-page #MainContent[data-template="blog"],
  body.jb-page #MainContent[data-template="article"],
  body.jb-page #MainContent[data-template="search"],
  body.jb-page #MainContent[data-template="404"] {
    width: calc(100% - 12px); margin-top: 12px; padding: 44px 18px 60px; border-radius: 28px;
  }
}

/* --- collection: native select styled as the Figma pill --- */
.jb-sortby-form { display: flex; }
select.jb-sortby {
  appearance: none;
  background: transparent;
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--jb-plum) 50%),
                    linear-gradient(135deg, var(--jb-plum) 50%, transparent 50%);
  background-position: calc(100% - 24px) 22px, calc(100% - 18px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.jb-col-empty { grid-column: 1 / -1; padding: 40px 0; color: var(--jb-on-light); }

.jb-pagination {
  grid-column: 1 / -1;
  display: flex; justify-content: center; align-items: center; gap: 10px;
  margin-top: 48px;
  font-weight: 500; color: var(--jb-plum);
}
.jb-pagination a, .jb-pagination span {
  display: grid; place-items: center;
  min-width: 44px; height: 44px; padding: 0 12px;
  border-radius: 50px;
}
.jb-pagination a:hover { background: var(--jb-pink-20); }
.jb-pagination .jb-is-active { background: var(--jb-pink); color: var(--jb-white); }

/* --- newsletter form feedback --- */
.jb-news__ok, .jb-news__err { flex: 1 1 100%; margin-top: 10px; font-size: 16px; }
.jb-news__ok { color: var(--jb-white); }
.jb-news__err { color: var(--jb-pink); }

/* --- product gallery thumbs are links --- */
.jb-pdp__thumbs a { display: block; }
.jb-pdp__thumbs a img { width: 117px; height: 117px; object-fit: cover; border-radius: 10px; }
.jb-pdp__sizes button[disabled] { opacity: .45; cursor: not-allowed; }
.jb-pdp__actions .jb-btn { border: 0; cursor: pointer; }
.jb-pdp__actions .jb-btn[disabled] { opacity: .55; cursor: not-allowed; }
.jb-pdp__desc p + p { margin-top: 12px; }

/* Shopify wraps every section; keep those wrappers transparent */
.jb-shopify-section { display: block; }

/* =========================================================
   2026 mobile, media, interaction and story refinements
   ========================================================= */
.jb-mega__back .jb-ic { width: 20px; height: 20px; rotate: 0; }
.jb-card__media,
.jb-col-grid .jb-card__media,
.jb-card--colbg .jb-card__media { background-image: none !important; background-color: var(--jb-white); }
.jb-card__media .jb-card__product-image {
  inset: 12px;
  width: calc(100% - 24px); height: calc(100% - 24px);
  object-fit: contain; object-position: center;
}
.jb-card__media .jb-card__product-image--enhanced {
  inset: 0; width: 100%; height: 100%; object-fit: cover;
}

.jb-pdp__gallery { display: grid; grid-template-columns: 117px minmax(0, 653px); gap: 20px; min-width: 0; }
.jb-pdp__stage {
  position: relative; grid-column: 2; grid-row: 1;
  width: 100%; height: 800px; overflow: hidden;
  border-radius: 10px; background: var(--jb-white);
}
.jb-pdp__main,
.jb-pdp__slide {
  display: none; width: 100%; height: 100%; margin: 0;
  object-fit: contain; object-position: center; border-radius: 10px;
}
.jb-pdp__slide.jb-is-active { display: block; }
.jb-pdp__slide > img,
.jb-pdp__slide > svg { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.jb-pdp__thumbs { grid-column: 1; grid-row: 1; width: 117px; }
.jb-pdp__thumbs button {
  display: block; flex: 0 0 auto; width: 117px; height: 117px; padding: 0;
  overflow: hidden; border: 2px solid transparent; border-radius: 10px;
  background: var(--jb-white); cursor: pointer;
}
.jb-pdp__thumbs button.jb-is-active { border-color: var(--jb-pink); }
.jb-pdp__thumbs button img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.jb-pdp__arrow {
  position: absolute; z-index: 2; top: 50%; translate: 0 -50%;
  display: none; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: 50%; background: var(--jb-pink); color: var(--jb-white);
  font: 500 30px/1 var(--jb-f-body); cursor: pointer;
}
.jb-pdp__arrow--prev { left: 12px; }
.jb-pdp__arrow--next { right: 12px; }
.jb-pdp__price { flex: 0 0 auto; white-space: nowrap; }

.jb-story { width: calc(100% - 40px); max-width: 1880px; margin: 30px auto; padding-inline: 0; color: var(--jb-plum); }
.jb-story__hero {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); align-items: center; gap: clamp(40px, 5vw, 90px);
  padding: clamp(45px, 5vw, 90px); background: var(--jb-cream); border-radius: 30px;
}
.jb-story__copy h1 { margin: 12px 0 24px; font-family: var(--jb-f-display); font-size: clamp(56px, 5vw, 90px); line-height: .94; text-transform: uppercase; letter-spacing: -2px; white-space: nowrap; }
.jb-story__lead { font-size: 18px; line-height: 1.65; color: var(--jb-on-light); }
.jb-story__lead p + p { margin-top: 16px; }
.jb-story__copy .jb-btn { margin-top: 32px; }
.jb-story__visual { position: relative; }
.jb-story__visual img { width: 100%; max-height: 650px; object-fit: cover; object-position: center top; border-radius: 24px; }
.jb-story__stamp {
  position: absolute; right: -24px; bottom: -24px; display: grid; place-items: center;
  width: 128px; height: 128px; border-radius: 50%; background: var(--jb-pink); color: var(--jb-white);
  font: 600 20px/1.05 var(--jb-f-body); text-align: center; rotate: -8deg;
}
.jb-story__values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.jb-story__values article { padding: 40px; border-radius: 24px; background: var(--jb-white); box-shadow: 0 4px 20px rgb(72 18 44 / .08); }
.jb-story__values strong { font-size: 16px; color: var(--jb-pink); }
.jb-story__values h2 { margin: 24px 0 12px; font: 700 25px/1.15 var(--jb-f-body); color: var(--jb-plum); }
.jb-story__values p { font-size: 16px; line-height: 1.5; color: var(--jb-on-light); }
.jb-story__quote { margin: 30px 0 0; padding: 70px clamp(30px, 9vw, 150px); border-radius: 30px; background: var(--jb-ink); color: var(--jb-white); font: 500 clamp(28px, 4vw, 56px)/1.2 var(--jb-f-body); text-align: center; }

/* Shopify legal policies use their own template wrapper. */
body.jb-page #MainContent[data-template="policy"] {
  width: min(1500px, calc(100% - 20px)); margin: 30px auto 0; padding: clamp(44px, 6vw, 90px);
  border-radius: 40px; background: var(--jb-white) url("./jb-bg-pattern.png") repeat; background-size: 376px 250px;
  color: var(--jb-on-light);
}
body.jb-page .shopify-policy__container { max-width: 1050px; padding: clamp(30px, 5vw, 70px); border-radius: 28px; background: var(--jb-cream); }
body.jb-page .shopify-policy__title { text-align: left; }
body.jb-page .shopify-policy__title h1 { font: 400 clamp(44px, 5vw, 76px)/1 var(--jb-f-display); letter-spacing: -2px; text-transform: uppercase; color: var(--jb-plum); }
body.jb-page .shopify-policy__body { margin-top: 32px; font: 400 17px/1.7 var(--jb-f-body); color: var(--jb-on-light); }
body.jb-page .shopify-policy__body h2,
body.jb-page .shopify-policy__body h3 { margin: 42px 0 14px; font-weight: 700; line-height: 1.2; color: var(--jb-plum); }
body.jb-page .shopify-policy__body p + p,
body.jb-page .shopify-policy__body ul + p { margin-top: 16px; }
body.jb-page .shopify-policy__body ul { margin: 14px 0; padding-left: 22px; list-style: disc; }
body.jb-page .shopify-policy__body a { color: var(--jb-pink); text-decoration: underline; text-underline-offset: 3px; }

/* Smooth FAQ reveal while keeping one item active. */
.jb-faq details > div {
  max-height: 0; overflow: hidden; opacity: 0; padding-top: 0;
  transition: max-height .42s ease, opacity .28s ease, padding-top .42s ease;
}
.jb-faq details.jb-is-open > div { opacity: 1; padding-top: 16px; }
.jb-faq details.jb-is-open summary { color: var(--jb-pink); padding-bottom: 14px; border-bottom: 1px solid var(--jb-pink); }
.jb-faq details.jb-is-open summary::after { transform: rotate(45deg); }
.jb-faq details:not(.jb-is-open) summary { color: var(--jb-plum); padding-bottom: 0; border-bottom: 0; }
.jb-faq details:not(.jb-is-open) summary::after { transform: none; }

/* Equal columns keep step markers, copy and connector rails aligned. */
.jb-steps,
.jb-recipe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; }
.jb-steps li,
.jb-recipe li { width: auto; min-width: 0; }
.jb-pdp__buy { column-gap: 32px; }
.jb-pdp__badges { margin-left: 0; flex: 1 1 auto; }
.jb-mega__col > h3,
.jb-mega__col > h3 > a { color: var(--jb-pink) !important; }

@media (max-width: 1500px) {
  .jb-pdp__gallery { flex: 1 1 54%; }
  .jb-pdp__stage { height: auto; aspect-ratio: 653 / 800; }
}

@media (max-width: 1024px) {
  .jb-mega__col > h3,
  .jb-mega__col > h3 > a { color: var(--jb-pink) !important; }
  .jb-pdp__gallery { display: flex; flex: 0 0 auto; flex-direction: column; width: 100%; max-width: 100%; min-width: 0; gap: 14px; }
  .jb-pdp__stage { order: 1; width: 100%; max-width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .jb-pdp__thumbs { order: 2; display: flex; width: 100%; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .jb-pdp__thumbs::-webkit-scrollbar { display: none; }
  .jb-pdp__thumbs button { width: 88px; height: 88px; scroll-snap-align: start; }
  .jb-pdp__arrow { display: grid; }
  .jb-story__hero { grid-template-columns: 1fr; }
  .jb-story__visual { order: -1; min-width: 0; }
  .jb-story__values { grid-template-columns: 1fr; }
  .jb-steps,
  .jb-recipe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; }
}

@media (max-width: 600px) {
  .jb-sec { padding-top: min(var(--jb-pt), 48px); padding-bottom: min(var(--jb-pb), 48px); }
  .jb-panel { padding-inline: 16px; }
  .jb-inner { width: 100%; }
  .jb-pdp { width: 100%; max-width: 100%; min-width: 0; margin: 6px 0; padding-inline: 10px; }
  .jb-pdp__stage { border-radius: 14px; }
  .jb-pdp__slide { padding: 6px; }
  .jb-pdp__thumbs button { width: 74px; height: 74px; }
  .jb-pdp__info { margin-top: 18px; padding: 24px 18px 28px; border-radius: 22px; }
  .jb-pdp__title { padding-right: 0; font-size: 34px; line-height: 1.05; }
  .jb-pdp__wish { width: 48px; height: 48px; }
  .jb-pdp__buy { gap: 16px; }
  .jb-pdp__price { width: 100%; font-size: clamp(23px, 7vw, 30px); line-height: 1.1; }
  .jb-pdp__badges { display: grid; grid-template-columns: 1fr; width: 100%; gap: 12px; padding: 16px 18px; }
  .jb-pdp__qty { margin-top: 28px; }
  .jb-pdp__sizes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .jb-pdp__sizes button { width: 100%; min-width: 0; height: 50px; padding: 0 10px; }
  .jb-pdp__actions { display: grid; grid-template-columns: 1fr; width: 100%; gap: 12px; margin-top: 28px; }
  .jb-pdp__actions .jb-btn,
  .jb-pdp__actions .jb-btn--outline { width: 100%; min-height: 54px; height: 54px; padding: 0 20px; border-radius: 50px; font-size: 16px; line-height: 1; box-shadow: none; }
  .jb-pdp__actions .jb-btn--outline { border: 1px solid var(--jb-plum); background: transparent; color: var(--jb-plum); }
  .jb-card__media .jb-card__product-image { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
  .jb-card__media .jb-card__product-image--enhanced { inset: 0; width: 100%; height: 100%; }
  .jb-col-head { gap: 18px; }
  .jb-col-head p { margin-top: 12px; font-size: 16px; line-height: 1.35; }
  .jb-col-body { margin-top: 20px; }
  .jb-col-grid,
  .jb-col-grid .jb-card { width: 100%; min-width: 0; }
  .jb-card h3 { margin-inline: 20px; }
  .jb-card__desc { width: auto; margin-inline: 20px; }
  .jb-card__price { margin-inline: 20px; }
  .jb-card__btn { align-self: stretch; width: auto; min-width: 0; min-height: 54px; height: 54px; margin: 14px 20px 20px; padding-inline: 20px; }
  .jb-faq details { padding-inline: 18px; }
  .jb-faq summary { min-height: 62px; height: auto; padding-block: 16px; font-size: 18px; }
  .jb-story { width: calc(100% - 12px); margin: 12px auto; padding: 0; }
  .jb-story__hero { gap: 28px; padding: 20px 18px 38px; border-radius: 26px; }
  .jb-story__copy h1 { font-size: 46px; }
  .jb-story__visual img { width: 100%; max-width: 100%; min-height: 300px; }
  .jb-story__stamp { right: 8px; bottom: -16px; width: 94px; height: 94px; font-size: 16px; }
  .jb-story__copy .jb-btn { width: 100%; }
  .jb-story__values { gap: 12px; margin-top: 12px; }
  .jb-story__values article { padding: 28px 22px; border-radius: 22px; }
  .jb-story__quote { margin-top: 12px; padding: 48px 24px; border-radius: 24px; }
  .jb-story__copy h1 { white-space: normal; }
  .jb-steps,
  .jb-recipe { grid-template-columns: 1fr; gap: 28px; }
  body.jb-page #MainContent[data-template="policy"] { width: calc(100% - 12px); margin-top: 12px; padding: 18px; border-radius: 28px; }
  body.jb-page .shopify-policy__container { padding: 26px 20px; border-radius: 22px; }
  body.jb-page .shopify-policy__title h1 { font-size: 42px; }
  body.jb-page .shopify-policy__body { margin-top: 22px; font-size: 16px; line-height: 1.6; }
}

@media (max-width: 860px) {
  .jb-hero__copy { order: 1; }
  .jb-hero__art { order: 2; margin-top: 28px; }
}

/* Final narrow-screen containment pass. */
@media (max-width: 600px) {
  .jb-hero { width: 100%; min-width: 0; padding-inline: 16px; overflow: hidden; }
  .jb-hero__copy { width: 100%; min-width: 0; }
  .jb-hero__copy p { width: 100%; max-width: 100%; }
  .jb-hero__cta {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%; gap: 12px; margin-top: 48px;
  }
  .jb-hero__cta .jb-btn {
    width: 100%; min-width: 0; padding-inline: 12px;
    white-space: normal; text-align: center; line-height: 1.1;
  }

  /* Connector rails are useful across desktop columns, but become stray
     horizontal lines once the steps stack vertically on phones. */
  .jb-steps--rail li::before,
  .jb-recipe--rail li::before { content: none; }

  /* Feature bar: smaller icons leave a wider, consistent copy column. */
  .jb-features {
    gap: 26px; padding: 32px 24px; border-radius: 24px;
  }
  .jb-features li {
    display: grid; grid-template-columns: 58px minmax(0, 1fr);
    align-items: center; width: 100%; min-width: 0; gap: 18px;
  }
  .jb-features img { width: 58px; height: 58px; object-fit: contain; }
  .jb-features li > div { width: 100%; min-width: 0; }
  .jb-features h3 { font-size: 20px; line-height: 1.18; }
  .jb-features p { width: 100%; max-width: none; margin-top: 5px; font-size: 16px; line-height: 1.3; }

  /* Founder: every text block wraps inside the mobile canvas. */
  .jb-founder { margin-top: 18px; padding: 32px 0 10px; border-radius: 24px; }
  .jb-founder__grid { width: 100%; min-width: 0; padding-inline: 18px; }
  .jb-founder__copy,
  .jb-founder__body,
  .jb-founder__body > *,
  .jb-quote { width: 100%; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
  .jb-founder__title {
    width: 100%; max-width: 100%; margin-bottom: 14px;
    font-size: clamp(32px, 9.5vw, 42px); line-height: 1.03;
    letter-spacing: -1.5px; white-space: normal; overflow-wrap: anywhere;
  }
  .jb-founder__body { font-size: 16px; line-height: 1.42; }
  .jb-quote { margin-top: 30px; padding: 18px 18px; font-size: 18px; line-height: 1.35; }
  .jb-founder__sign { margin-top: 22px; }
  .jb-founder__name { max-width: 100%; font-size: clamp(58px, 19vw, 76px); line-height: 1.08; overflow-wrap: anywhere; }
  .jb-marquee--lg { margin-top: 38px; }

  /* Video copy and newsletter use tighter section rhythm on phones. */
  .jb-videos { width: 100%; min-width: 0; margin-top: 48px; gap: 28px; }
  .jb-videos__copy,
  .jb-videos__body { width: 100%; max-width: 100%; min-width: 0; }
  .jb-videos .jb-eyebrow { margin-top: 0; }
  .jb-videos__title { margin-top: 8px; font-size: 46px; line-height: .92; }
  .jb-videos__body { margin-top: 12px; font-size: 16px; line-height: 1.35; }
  .jb-videos .jb-btn { width: min(100%, 240px); margin-top: 28px; padding-inline: 20px; }
  .jb-sec.jb-news[style*="--jb-pt"] { padding-top: 48px; }
  .jb-news__in { padding: 24px 18px; gap: 18px; border-radius: 24px; }
  .jb-news__ic { width: 52px; height: 52px; }
}

/* Compact homepage section rhythm below desktop without changing the
   desktop composition. These margins replace the 100–120px canvas gaps. */
@media (max-width: 1200px) {
  .jb-panel--overlap { margin-top: 0; }
  .jb-steps--rail li::before,
  .jb-recipe--rail li::before { content: none; }
  .jb-features {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 40px; padding: 36px 48px;
  }
  .jb-features li {
    display: grid; grid-template-columns: 64px minmax(0, 1fr);
    align-items: center; width: 100%; min-width: 0; gap: 18px;
  }
  .jb-features img { width: 64px; height: 64px; object-fit: contain; }
  .jb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jb-best { margin-top: 60px; }
  .jb-how { margin-top: 64px; }
  .jb-videos { margin-top: 60px; }
  .jb-faq { margin-top: 60px; }
  .jb-sec > .jb-panel--bottom { padding-bottom: 60px; }
  .jb-sec.jb-news[style*="--jb-pt"] { padding-top: 60px; }
}

@media (min-width: 1025px) and (max-width: 1200px) {
  .jb-videos {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    gap: 32px;
  }
  .jb-videos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jb-how { padding: 56px 24px 56px; }
  .jb-steps,
  .jb-recipe { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 34px 40px; }
  .jb-steps li,
  .jb-recipe li { grid-column: span 2; }
  .jb-steps li:nth-child(4):nth-last-child(2),
  .jb-recipe li:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
}

/* The Shopify binding layer appears after the original responsive rules,
   so keep these breakpoint-critical overrides at the end of the cascade. */
@media (min-width: 1201px) and (max-width: 1500px) {
  .jb-panel--overlap { margin-top: 0; }
  .jb-features img { width: auto; height: 64px; }
  .jb-founder__title { font-size: clamp(40px, 3vw, 48px); white-space: normal; }
  .jb-founder__photo { align-self: center; justify-self: center; margin-top: 0; }
}

@media (max-width: 1024px) {
  .jb-panel--overlap { margin-top: 0; }
  .jb-hero__copy { order: 1; }
  .jb-hero__art { order: 2; }
  .jb-how { padding-inline: 24px; }
  .jb-sec .jb-best .jb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 990px) {
  .jb-videos__title { font-size: clamp(24px, 6vw, 46px); line-height: 1; white-space: nowrap; }
  .jb-videos__title-stacked { display: none; }
  .jb-videos__title-inline { display: inline; }
}

@media (max-width: 600px) {
  .jb-features { grid-template-columns: 1fr; }
  .jb-how { padding-inline: var(--jb-gut); }
  .jb-sec .jb-best .jb-cards { grid-template-columns: 1fr; }
  .jb-best { margin-top: 34px; }
  .jb-how { margin-top: 40px; }
  .jb-videos { margin-top: 32px; }
  .jb-faq { margin-top: 36px; }
  .jb-sec > .jb-panel--bottom { padding-bottom: 42px; }
  .jb-sec.jb-news[style*="--jb-pt"] { padding-top: 28px; }
}

@media (max-width: 420px) {
  :root { --jb-gut: 12px; }
  .jb-topbar__in { gap: 9px; }
  .jb-logo img { width: min(145px, 42vw); }
  .jb-tools { gap: 6px; }
  .jb-iconbtn,
  .jb-burger { width: 40px; height: 40px; }
  .jb-hero { padding-inline: 12px; }
  .jb-hero__cta { grid-template-columns: 1fr; }
  .jb-hero__cta .jb-btn { min-height: 54px; }
}

@media (max-width: 350px) {
  .jb-tools .jb-iconbtn:last-child { display: none; }
  .jb-logo img { width: 140px; }
}

/* =========================================================
   PRODUCTS MEGA MENU
   ========================================================= */

.jb-nav {
  position: relative;
  z-index: 1000;
}

.jb-nav__in {
  position: static;
}

.jb-nav__links {
  position: static;
}

.jb-nav__item--products {
  position: static;
}


/* PRODUCTS LINK */

.jb-nav__products-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.jb-nav__chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}


/* =========================================================
   MEGA MENU
   ========================================================= */

.jb-mega-menu {
  position: absolute;
  z-index: 9999;

  top: 100%;
  left: 0;

  width: 100%;

  visibility: hidden;
  opacity: 0;

  pointer-events: none;

  background: #100007;

  transform: translateY(-4px);

  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
}


/* SHOW ON HOVER */

.jb-nav__item--products:hover .jb-mega-menu,
.jb-mega-menu:hover {
  visibility: visible;
  opacity: 1;

  pointer-events: auto;

  transform: translateY(0);
}


/* KEEP PRODUCTS PINK WHILE OPEN */

.jb-nav__item--products:hover > .jb-nav__link {
  color: #ff2f92;
}

.jb-nav__item--products:hover .jb-nav__chevron {
  transform: rotate(180deg);
}


/* =========================================================
   INNER LAYOUT
   ========================================================= */

.jb-mega-menu__inner {
  display: grid;

  grid-template-columns:
    1.15fr
    1.15fr
    1.15fr
    300px;

  gap: 70px;

  width: min(1640px, calc(100% - 150px));

  margin: 0 auto;

  padding: 42px 0 48px;
}


/* =========================================================
   COLUMNS
   ========================================================= */

.jb-mega-menu__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.jb-mega-menu__column h3 {
  margin: 0 0 20px;

  color: #ff2f92;

  font-family: "Fredoka", sans-serif;
  font-size: 15px;
  font-weight: 700;

  line-height: 1.2;
}

.jb-mega-menu__column a {
  display: block;

  margin: 0 0 18px;

  color: #aa9ba1;

  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  font-weight: 400;

  line-height: 1.4;

  text-decoration: none;

  transition: color 0.15s ease;
}

.jb-mega-menu__column a:hover {
  color: #ff2f92;
}


/* =========================================================
   FEATURED PRODUCT
   ========================================================= */

.jb-mega-menu__featured {
  display: flex;
  justify-content: flex-end;
}

.jb-mega-menu__featured-card {
  width: 300px;

  padding: 18px 24px 23px;

  border-radius: 20px;

  background: #fff;

  text-align: center;
}

.jb-mega-menu__featured-card img {
  display: block;

  width: 150px;
  height: 115px;

  margin: 0 auto 5px;

  object-fit: contain;
}

.jb-mega-menu__seller {
  display: block;

  margin: 0 0 8px;

  color: #ff2f92;

  font-family: "Fredoka", sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.jb-mega-menu__featured-card h3 {
  margin: 0 0 20px;

  color: #100007;

  font-family: "Fredoka", sans-serif;
  font-size: 19px;
  font-weight: 700;

  line-height: 1.15;
}

.jb-mega-menu__shop {
  display: inline-flex;

  min-width: 128px;
  min-height: 43px;

  align-items: center;
  justify-content: center;

  padding: 10px 24px;

  border-radius: 999px;

  background: #ff2f92;
  color: #fff;

  font-family: "Fredoka", sans-serif;
  font-size: 14px;
  font-weight: 700;

  text-decoration: none;

  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
}

.jb-mega-menu__shop:hover {
  color: #fff;
  opacity: 0.92;
  transform: translateY(-1px);
}


/* Shared-component mobile navigation conversion fix */
@media (max-width: 1024px) {
  body.jb-nav-open .jb-nav {
    translate: 0 0;
  }

  body.jb-nav-open .jb-navscrim {
    opacity: 1;
    visibility: visible;
  }
}

/* =========================================================
   PRODUCT CARD WISHLIST — SHOPIFY PLACEMENT
   ========================================================= */

.jb-pdp__buy .jb-pdp__badges {
  margin-left: 0;
  width: 100%;
}

.jb-alsolike .jb-card {
  padding-bottom: 22px;
}

.jb-features--light img {
  width: auto;
  height: 83px;
  object-fit: contain;
}

.jb-alsolike .jb-card__wish {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 5;

  display: grid;
  place-items: center;

  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 50%;

  background: #fff;
  color: var(--jb-plum);

  cursor: pointer;
}

.jb-alsolike .jb-card__wish .jb-ic {
  width: 24px;
  height: 24px;
}

.jb-alsolike .jb-card__wish.jb-is-active {
  background: var(--jb-pink);
  color: #fff;
}

/* =========================================================
   PRODUCT PAGE WISHLIST — MATCH SHOPIFY
   ========================================================= */

.jb-pdp__wish {
  position: absolute;
  top: 40px;
  right: 40px;

  width: 58px;
  height: 58px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--jb-pink);
  color: #fff;

  border: 0;
  border-radius: 10px;

  cursor: pointer;
  z-index: 5;

  box-shadow: none;
}

.jb-pdp__wish .jb-ic {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
}

/* Keep the same button appearance when selected */
.jb-pdp__wish.jb-is-active {
  background: var(--jb-pink);
  color: #fff;
}

.jb-pdp__wish:hover {
  background: var(--jb-pink);
  color: #fff;
}

/* Reserve the heart-button area so long product titles never run underneath it */
.jb-pdp__title {
  padding-right: 110px;
}

/* Shared-header mobile navigation */
@media (max-width: 989px) {
  body.jb-nav-open .jb-nav {
    display: block;
  }
}

/* =========================================================
   FOOTER SOCIAL ICON SIZE — MATCH SHOPIFY
   ========================================================= */

.jb-footer__social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.jb-footer__social a {
  width: 48px;
  height: 48px;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--jb-pink);
  color: #fff;

  border-radius: 6px;
  text-decoration: none;
}

/* Keep the actual social symbols small like Shopify */
.jb-footer__social a svg {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 18px;
}

/* Instagram */
.jb-footer__social a[aria-label="Instagram"] svg {
  width: 18px;
  height: 18px;
}

/* Facebook */
.jb-footer__social a[aria-label="Facebook"] svg {
  width: 17px;
  height: 17px;
}

/* TikTok */
.jb-footer__social a[aria-label="TikTok"] svg {
  width: 18px;
  height: 18px;
}

/* WhatsApp */
.jb-footer__social a[aria-label="WhatsApp"] svg {
  width: 18px;
  height: 18px;
}


/* OUR STORY — pink eyebrow */
.jb-story-page__eyebrow {
  color: var(--jb-pink) !important;
}