/* ==========================================================================
   Jak rostu landing page — scoped to body.cms-id-22
   ========================================================================== */

/* ---------- tokens ---------- */
body.cms-id-22 {
  --jr-cream: #FBF8EE;
  --jr-cream-2: #F5F0DC;
  --jr-yellow: #F2C640;
  --jr-yellow-dark: #DFAF1E;
  --jr-green: #5E8C42;
  --jr-green-dark: #41692B;
  --jr-ink: #4A2C33;
  --jr-ink-soft: #7A5A60;
  --jr-wine: #6E2B3D;
  --jr-red: #D4543F;
  --jr-pink: #F9E3E3;
  --jr-pink-deep: #E8A9A9;
  --jr-blue-baby: #E1EFF7;
  --jr-mint: #E4F1E0;
  --jr-radius: 22px;
  --jr-shadow: 0 10px 34px rgba(90,80,40,.13);
}

/* ---------- theme chrome removal / full-width content ---------- */
body.cms-id-22 .breadcrumb_spacing,
body.cms-id-22 .breadcrumb-section,
body.cms-id-22 .breadcrumb_wrapper,
body.cms-id-22 [id^="page_banner_container"],
body.cms-id-22 .page_heading.cms_page_heading,
body.cms-id-22 #left_column,
body.cms-id-22 #right_column,
body.cms-id-22 .nav_full_container,
body.cms-id-22 .full_width_top_container,
body.cms-id-22 .full_width_top2_container,
body.cms-id-22 .wrapper_top_container { display: none; }

body.cms-id-22 #center_column { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; }
body.cms-id-22 #wrapper { padding: 0; margin-bottom: 0; }
body.cms-id-22 #columns { max-width: 100%; padding: 0; margin-bottom: 0; }
body.cms-id-22 #columns > .row { margin: 0; }
body.cms-id-22 .page-content.page-cms { padding: 0; margin: 0; }
body.cms-id-22 .full_width_bottom_container { margin-top: 0; }
body.cms-id-22 .footer_wrapper { margin-top: 0; }
body.cms-id-22 #footer-secondary { padding: 0; }
@media (min-width: 991px) { body.cms-id-22 #notifications { height: 120px; } }

/* ---------- base ---------- */
body.cms-id-22 #jr-landing { font-family: 'Nunito', sans-serif; color: var(--jr-ink); line-height: 1.65; font-size: 17px; background: var(--jr-cream); overflow: hidden; }
body.cms-id-22 :where(#jr-landing) *,
body.cms-id-22 .jr-sticky-cta * { box-sizing: border-box; }
body.cms-id-22 :where(#jr-landing) img { max-width: 100%; height: auto; display: block; }
body.cms-id-22 :where(#jr-landing) a { color: inherit; text-decoration: none; }
body.cms-id-22 :where(#jr-landing) h1,
body.cms-id-22 :where(#jr-landing) h2,
body.cms-id-22 :where(#jr-landing) h3 { line-height: 1.15; color: var(--jr-wine); margin: 0; padding: 0; text-transform: none; }
body.cms-id-22 :where(#jr-landing) p,
body.cms-id-22 :where(#jr-landing) ul,
body.cms-id-22 :where(#jr-landing) figure { margin: 0; padding: 0; }
body.cms-id-22 .jr-container { max-width: 1140px; margin: 0 auto; padding: 0 22px; }
body.cms-id-22 .jr-section { padding: 74px 0; }
body.cms-id-22 .jr-center { text-align: center; }
body.cms-id-22 .jr-pattern { background-color: var(--jr-cream); background-image: radial-gradient(rgba(94,140,66,.06) 1.5px, transparent 1.5px); background-size: 26px 26px; }
body.cms-id-22 .jr-showcase { background: #fff; }

body.cms-id-22 .jr-eyebrow { display: inline-block; background: rgba(94,140,66,.12); color: var(--jr-green-dark); font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; padding: 7px 16px; border-radius: 999px; margin-bottom: 18px; }
body.cms-id-22 .jr-section-title { font-family: 'Amatic SC', cursive; font-weight: 700; font-size: clamp(38px,5vw,58px); color: var(--jr-ink); margin-bottom: 14px; }
body.cms-id-22 .jr-section-sub { color: var(--jr-ink-soft); max-width: 640px; margin: 0 auto 46px; font-size: 18px; }
body.cms-id-22 .jr-stars { color: #F0A928; letter-spacing: 2px; font-size: 18px; }
body.cms-id-22 .jr-heart-divider { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--jr-pink-deep); font-size: 18px; margin: 0 auto 18px; }
body.cms-id-22 .jr-heart-divider::before,
body.cms-id-22 .jr-heart-divider::after { content: ""; height: 2px; width: 64px; border-radius: 2px; background: linear-gradient(90deg,transparent,var(--jr-pink-deep)); }
body.cms-id-22 .jr-heart-divider::after { background: linear-gradient(90deg,var(--jr-pink-deep),transparent); }

/* ---------- buttons ---------- */
body.cms-id-22 .jr-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--jr-yellow); color: var(--jr-ink); font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 17px; padding: 16px 34px; border-radius: 999px; border: none; cursor: pointer; text-decoration: none; box-shadow: 0 6px 0 var(--jr-yellow-dark); transition: transform .12s ease, box-shadow .12s ease; position: relative; overflow: hidden; }
body.cms-id-22 .jr-btn:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--jr-yellow-dark); color: var(--jr-ink); text-decoration: none; }
body.cms-id-22 .jr-btn::after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent); transform: skewX(-20deg); transition: left .55s ease; }
body.cms-id-22 .jr-btn:hover::after { left: 130%; }
body.cms-id-22 .jr-btn.jr-green { background: #7CB728; color: #fff; box-shadow: 0 6px 0 #629318; }
body.cms-id-22 .jr-btn.jr-green:hover { box-shadow: 0 4px 0 #629318; color: #fff; }
body.cms-id-22 .jr-btn.jr-cart-full { width: 100%; justify-content: center; text-align: center; }
body.cms-id-22 .jr-btn.jr-ghost { background: transparent; box-shadow: none; border: 2.5px solid var(--jr-green); color: var(--jr-green-dark); font-weight: 800; }
body.cms-id-22 .jr-btn.jr-ghost:hover { background: rgba(94,140,66,.08); transform: none; }
body.cms-id-22 .jr-cart { font-size: 20px; }
@keyframes jr-heartbeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
body.cms-id-22 .jr-pulse { animation: jr-heartbeat 2.4s ease-in-out infinite; }
body.cms-id-22 .jr-pulse:hover { animation-play-state: paused; }

/* ---------- decorations ---------- */
@keyframes jr-floaty { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-14px) rotate(var(--r,0deg)); } }
body.cms-id-22 .jr-deco { position: absolute; font-size: 34px; opacity: .85; pointer-events: none; animation: jr-floaty 5.5s ease-in-out infinite; filter: drop-shadow(0 3px 6px rgba(90,80,40,.15)); z-index: 1; }
body.cms-id-22 .jr-ilu { position: absolute; pointer-events: none; z-index: 1; opacity: .95; filter: drop-shadow(0 4px 8px rgba(90,80,40,.12)); width: auto; }
body.cms-id-22 .jr-ilu.jr-sway { animation: jr-floaty 6.5s ease-in-out infinite; }
@media (max-width: 920px) { body.cms-id-22 .jr-ilu { display: none; } }

/* ---------- hero ---------- */
body.cms-id-22 .jr-hero { padding: 60px 0 70px; overflow: hidden; }
body.cms-id-22 .jr-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
body.cms-id-22 .jr-hero h1 { font-family: 'Amatic SC', cursive; font-weight: 700; font-size: clamp(46px,6.5vw,76px); margin: 14px 0 18px; }
body.cms-id-22 .jr-hero h1 em { font-style: normal; color: var(--jr-green); }
body.cms-id-22 .jr-lead { font-size: 19px; color: var(--jr-ink-soft); max-width: 520px; margin-bottom: 26px; }
body.cms-id-22 .jr-rating-row { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--jr-ink-soft); font-weight: 700; margin-bottom: 8px; }
body.cms-id-22 .jr-price-row { display: flex; align-items: baseline; gap: 14px; margin: 6px 0 24px; }
body.cms-id-22 .jr-price-now { font-size: 44px; font-weight: 900; color: var(--jr-green-dark); }
body.cms-id-22 .jr-price-was { font-size: 22px; color: var(--jr-ink-soft); text-decoration: line-through; }
body.cms-id-22 .jr-price-off { background: var(--jr-red); color: #fff; font-weight: 900; font-size: 15px; padding: 4px 12px; border-radius: 999px; }
body.cms-id-22 .jr-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
body.cms-id-22 .jr-trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; font-size: 14.5px; font-weight: 700; color: var(--jr-ink-soft); }
body.cms-id-22 .jr-trust span { display: flex; align-items: center; gap: 7px; }
body.cms-id-22 .jr-hero-img { position: relative; }
body.cms-id-22 .jr-hero-img > img { border-radius: 28px; box-shadow: var(--jr-shadow); transition: transform .45s cubic-bezier(.2,.7,.3,1); }
body.cms-id-22 .jr-hero-img:hover > img { transform: rotate(-1.5deg) scale(1.02); }
body.cms-id-22 .jr-hero-badge { position: absolute; top: -16px; right: -10px; background: var(--jr-yellow); border-radius: 50%; width: 118px; height: 118px; display: grid; place-items: center; text-align: center; font-weight: 900; font-size: 14px; line-height: 1.25; transform: rotate(8deg); box-shadow: var(--jr-shadow); transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
body.cms-id-22 .jr-hero-badge b { font-size: 17px; display: block; }
body.cms-id-22 .jr-hero-img:hover .jr-hero-badge { transform: rotate(-6deg) scale(1.1); }
body.cms-id-22 .jr-hero-note { position: absolute; bottom: -20px; left: -8px; background: #fff; border-radius: 16px; padding: 12px 18px; box-shadow: var(--jr-shadow); font-family: 'Caveat', cursive; font-size: 21px; color: var(--jr-green-dark); transform: rotate(-3deg); transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
body.cms-id-22 .jr-hero-img:hover .jr-hero-note { transform: rotate(2deg) translateY(-4px); }
@media (max-width: 900px) { body.cms-id-22 .jr-hero-grid { grid-template-columns: 1fr; gap: 34px; } }

/* ---------- stats strip ---------- */
body.cms-id-22 .jr-strip { background: var(--jr-yellow); padding: 22px 0; }
body.cms-id-22 .jr-strip-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; text-align: center; }
body.cms-id-22 .jr-strip b { display: block; font-size: 20px; font-weight: 900; }
body.cms-id-22 .jr-strip span { font-size: 14px; font-weight: 700; color: rgba(59,58,46,.75); }
@media (max-width: 800px) { body.cms-id-22 .jr-strip-grid { grid-template-columns: repeat(2,1fr); } }

/* ---------- emotion cards ---------- */
body.cms-id-22 .jr-cards3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
body.cms-id-22 .jr-card { background: #fff; border-radius: 28px; padding: 34px 30px; box-shadow: var(--jr-shadow); text-align: center; border: 3px solid transparent; transition: transform .25s ease; }
body.cms-id-22 .jr-card:hover { transform: translateY(-6px) rotate(-.5deg); }
body.cms-id-22 .jr-card:nth-child(1) { background: var(--jr-blue-baby); }
body.cms-id-22 .jr-card:nth-child(2) { background: var(--jr-pink); }
body.cms-id-22 .jr-card:nth-child(3) { background: var(--jr-mint); }
body.cms-id-22 .jr-emoji { font-size: 46px; margin-bottom: 14px; display: inline-block; background: #fff; width: 86px; height: 86px; line-height: 86px; border-radius: 50%; box-shadow: 0 6px 16px rgba(90,80,40,.12); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
body.cms-id-22 .jr-card:hover .jr-emoji { transform: rotate(-10deg) scale(1.15); }
body.cms-id-22 .jr-card h3 { font-size: 21px; font-weight: 900; margin-bottom: 10px; }
body.cms-id-22 .jr-card p { color: var(--jr-ink-soft); font-size: 16px; }
@media (max-width: 800px) { body.cms-id-22 .jr-cards3 { grid-template-columns: 1fr; } }
body.cms-id-22 .jr-baby-feature { max-width: 470px; margin: 42px auto 0; background: #fff; padding: 13px 13px 16px; border-radius: 14px; box-shadow: 0 14px 34px rgba(90,80,40,.18); transform: rotate(-1.4deg); }
body.cms-id-22 .jr-baby-feature img { width: 100%; border-radius: 9px; }
body.cms-id-22 .jr-baby-feature figcaption { font-family: 'Caveat', cursive; font-size: 23px; color: var(--jr-green-dark); margin-top: 10px; text-align: center; }
@media (max-width: 760px) { body.cms-id-22 .jr-baby-feature { max-width: 330px; margin-top: 30px; } }

/* ---------- wide banner ---------- */
body.cms-id-22 .jr-banner-wide { background: #fff; position: relative; }
body.cms-id-22 .jr-banner-wide img { width: 100%; display: block; height: auto; }
body.cms-id-22 .jr-banner-wide::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 130px; background: linear-gradient(to top, rgba(251,248,238,0), var(--jr-cream)); pointer-events: none; z-index: 1; }
body.cms-id-22 .jr-banner-wide::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); pointer-events: none; z-index: 1; }
@media (max-width: 760px) { body.cms-id-22 .jr-banner-wide { display: none; } body.cms-id-22 .jr-deco { display: none; } }

/* ---------- book showcase ---------- */
body.cms-id-22 .jr-show-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
body.cms-id-22 .jr-show-grid img { border-radius: 26px; box-shadow: var(--jr-shadow); }
body.cms-id-22 .jr-checks { list-style: none; margin: 24px 0 30px; }
body.cms-id-22 .jr-checks li { padding: 9px 0 9px 38px; position: relative; font-size: 17px; }
body.cms-id-22 .jr-checks li::before { content: "✿"; position: absolute; left: 4px; top: 8px; color: var(--jr-yellow-dark); font-size: 19px; }
body.cms-id-22 .jr-checks li b { font-weight: 800; }
body.cms-id-22 .jr-specs { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 8px; }
body.cms-id-22 .jr-spec { background: var(--jr-cream); border-radius: 16px; padding: 16px 10px; text-align: center; transition: transform .25s ease, background .25s ease; }
body.cms-id-22 .jr-spec:hover { transform: translateY(-4px); background: var(--jr-mint); }
body.cms-id-22 .jr-spec b { display: block; font-size: 19px; font-weight: 900; color: var(--jr-green-dark); }
body.cms-id-22 .jr-spec span { font-size: 13px; font-weight: 700; color: var(--jr-ink-soft); }
@media (max-width: 900px) { body.cms-id-22 .jr-show-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { body.cms-id-22 .jr-specs { grid-template-columns: repeat(2,1fr); } }

/* ---------- steps ---------- */
body.cms-id-22 .jr-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 26px; }
body.cms-id-22 .jr-step { background: #fff; border-radius: 28px; padding: 32px 24px; box-shadow: var(--jr-shadow); position: relative; text-align: center; transition: transform .25s ease; }
body.cms-id-22 .jr-step:hover { transform: translateY(-5px); }
body.cms-id-22 .jr-step-num { width: 56px; height: 56px; border-radius: 50% 50% 50% 12px; background: var(--jr-yellow); display: grid; place-items: center; font-family: 'Amatic SC', cursive; font-weight: 700; font-size: 31px; margin: 0 auto 16px; box-shadow: 0 5px 12px rgba(90,80,40,.16); transition: transform .6s cubic-bezier(.2,.7,.3,1); }
body.cms-id-22 .jr-step:hover .jr-step-num { transform: rotate(360deg); }
body.cms-id-22 .jr-step:nth-child(2) .jr-step-num { background: var(--jr-pink); }
body.cms-id-22 .jr-step:nth-child(3) .jr-step-num { background: var(--jr-blue-baby); }
body.cms-id-22 .jr-step:nth-child(4) .jr-step-num { background: var(--jr-mint); }
body.cms-id-22 .jr-step h3 { font-size: 19px; font-weight: 900; margin-bottom: 8px; }
body.cms-id-22 .jr-step p { font-size: 15px; color: var(--jr-ink-soft); }
@media (max-width: 900px) { body.cms-id-22 .jr-steps { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { body.cms-id-22 .jr-steps { grid-template-columns: 1fr; } }

/* ---------- chapters ---------- */
body.cms-id-22 .jr-peek { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; max-width: 980px; margin: 34px auto 8px; }
body.cms-id-22 .jr-peek figure { margin: 0; background: #fff; padding: 10px 10px 14px; border-radius: 10px; box-shadow: 0 10px 26px rgba(90,80,40,.16); transform: rotate(-1.6deg); }
body.cms-id-22 .jr-peek figure:nth-child(2) { transform: rotate(1.2deg); }
body.cms-id-22 .jr-peek figure:nth-child(3) { transform: rotate(-.8deg); }
body.cms-id-22 .jr-peek img { width: 100%; border-radius: 6px; border: 1px solid #eee8d8; box-shadow: none; }
body.cms-id-22 .jr-peek figcaption { font-size: 13.5px; color: var(--jr-ink-soft); margin-top: 9px; text-align: center; font-weight: 600; }
body.cms-id-22 .jr-peek-note { text-align: center; font-size: 14px; color: #8a815f; margin-top: 16px; }
@media (max-width: 760px) { body.cms-id-22 .jr-peek { grid-template-columns: 1fr; max-width: 340px; gap: 20px; } }
body.cms-id-22 .jr-chapters { position: relative; max-width: 840px; margin: 40px auto 0; }
body.cms-id-22 .jr-chapters::before { content: ""; position: absolute; left: 31px; top: 10px; bottom: 10px; border-left: 3px dashed rgba(94,140,66,.35); }
body.cms-id-22 .jr-chapter { position: relative; display: flex; gap: 26px; margin-bottom: 26px; align-items: flex-start; }
body.cms-id-22 .jr-ch-badge { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--tint,var(--jr-yellow)); display: grid; place-items: center; font-size: 28px; box-shadow: 0 6px 16px rgba(90,80,40,.16); border: 4px solid #fff; z-index: 1; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
body.cms-id-22 .jr-chapter:hover .jr-ch-badge { transform: rotate(-12deg) scale(1.12); }
body.cms-id-22 .jr-ch-body { flex: 1; background: var(--jr-cream); border-radius: 24px; padding: 24px 28px; box-shadow: var(--jr-shadow); border-top: 5px solid var(--tint,var(--jr-yellow)); transition: transform .3s ease, box-shadow .3s ease; }
body.cms-id-22 .jr-chapter:hover .jr-ch-body { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(90,80,40,.2); }
body.cms-id-22 .jr-ch-age { display: inline-block; background: var(--tint,var(--jr-yellow)); border-radius: 999px; padding: 3px 14px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--jr-ink); margin-bottom: 10px; opacity: .9; }
body.cms-id-22 .jr-ch-body h3 { font-size: 22px; font-weight: 900; margin-bottom: 8px; }
body.cms-id-22 .jr-ch-body p { color: var(--jr-ink-soft); font-size: 15.5px; margin-bottom: 12px; }
body.cms-id-22 .jr-ch-q { font-family: 'Caveat', cursive; font-size: 22px; line-height: 1.3; color: var(--jr-green-dark); }
body.cms-id-22 .jr-ch-q::before { content: "✎ "; color: var(--jr-yellow-dark); }
@media (max-width: 600px) {
  body.cms-id-22 .jr-chapter { gap: 16px; }
  body.cms-id-22 .jr-ch-badge { width: 52px; height: 52px; font-size: 22px; }
  body.cms-id-22 .jr-chapters::before { left: 25px; }
  body.cms-id-22 .jr-ch-body { padding: 20px 20px; }
}

/* ---------- ugc videos ---------- */
body.cms-id-22 .jr-ugc { background: linear-gradient(180deg,var(--jr-blue-baby),var(--jr-cream-2)); }
body.cms-id-22 .jr-ugc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; max-width: 1020px; margin: 0 auto; }
body.cms-id-22 .jr-ugc-card { background: #fff; border-radius: 30px; overflow: hidden; box-shadow: var(--jr-shadow); border: 5px solid #fff; transition: transform .25s ease; margin: 0; }
body.cms-id-22 .jr-ugc-card:hover { transform: translateY(-6px) rotate(-1deg); }
body.cms-id-22 .jr-ugc-card video { width: 100%; display: block; aspect-ratio: 4/5; object-fit: cover; background: #F4EFE2; border-radius: 24px; }
@media (max-width: 860px) { body.cms-id-22 .jr-ugc-grid { grid-template-columns: 1fr; max-width: 420px; } }

/* ---------- custom video player ---------- */
body.cms-id-22 .jr-vp { position: relative; border-radius: 24px; overflow: hidden; cursor: pointer; }
body.cms-id-22 .jr-vp-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 68px; height: 68px; border-radius: 50%; border: none; background: var(--jr-yellow); color: var(--jr-ink); box-shadow: 0 5px 0 var(--jr-yellow-dark), 0 10px 26px rgba(0,0,0,.25); display: grid; place-items: center; cursor: pointer; transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .25s ease; z-index: 2; }
body.cms-id-22 .jr-vp-play svg { width: 26px; height: 26px; margin-left: 3px; }
body.cms-id-22 .jr-vp:hover .jr-vp-play { transform: translate(-50%,-50%) scale(1.1); }
body.cms-id-22 .jr-vp.jr-vp-playing .jr-vp-play { opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.8); }
body.cms-id-22 .jr-vp-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 26px 16px 14px; background: linear-gradient(to top, rgba(46,36,20,.45), transparent); opacity: 0; transition: opacity .25s ease; z-index: 2; }
body.cms-id-22 .jr-vp:hover .jr-vp-bar,
body.cms-id-22 .jr-vp.jr-vp-started:not(.jr-vp-playing) .jr-vp-bar { opacity: 1; }
body.cms-id-22 .jr-vp-track { flex: 1; height: 6px; border-radius: 999px; background: rgba(251,248,238,.45); position: relative; cursor: pointer; }
body.cms-id-22 .jr-vp-track::before { content: ""; position: absolute; inset: -10px 0; }
body.cms-id-22 .jr-vp-fill { height: 100%; width: 0; border-radius: 999px; background: #7CB728; position: relative; pointer-events: none; }
body.cms-id-22 .jr-vp-fill::after { content: ""; position: absolute; right: -7px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--jr-yellow); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
body.cms-id-22 .jr-vp-mute { flex: none; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(251,248,238,.9); color: var(--jr-ink); display: grid; place-items: center; cursor: pointer; transition: transform .2s ease; }
body.cms-id-22 .jr-vp-mute:hover { transform: scale(1.1); }
body.cms-id-22 .jr-vp-mute span { display: grid; place-items: center; line-height: 0; }
body.cms-id-22 .jr-vp-mute svg { width: 17px; height: 17px; display: block; }
body.cms-id-22 .jr-vp-mute .jr-vp-ico-off { display: none; }
body.cms-id-22 .jr-vp.jr-vp-muted .jr-vp-mute .jr-vp-ico-on { display: none; }
body.cms-id-22 .jr-vp.jr-vp-muted .jr-vp-mute .jr-vp-ico-off { display: block; }

/* ---------- reviews ---------- */
body.cms-id-22 .jr-reviews { background: #fff; }
body.cms-id-22 .jr-rev-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 26px; }
body.cms-id-22 .jr-rev { background: var(--jr-cream); border-radius: 26px 26px 26px 6px; padding: 30px 30px 26px; position: relative; transition: transform .25s ease; }
body.cms-id-22 .jr-rev:hover { transform: translateY(-4px) rotate(-.7deg); }
body.cms-id-22 .jr-rev:nth-child(2) { background: var(--jr-pink); }
body.cms-id-22 .jr-rev:nth-child(3) { background: var(--jr-blue-baby); }
body.cms-id-22 .jr-rev:nth-child(4) { background: var(--jr-mint); }
body.cms-id-22 .jr-rev p { font-size: 16.5px; margin: 10px 0 16px; }
body.cms-id-22 .jr-who { font-weight: 800; font-size: 15px; }
body.cms-id-22 .jr-who::before { content: "♥ "; color: var(--jr-pink-deep); }
body.cms-id-22 .jr-rev::after { content: "❞"; position: absolute; top: 18px; right: 26px; font-size: 44px; color: rgba(94,140,66,.25); }
@media (max-width: 800px) { body.cms-id-22 .jr-rev-grid { grid-template-columns: 1fr; } }

/* ---------- addon products ---------- */
body.cms-id-22 .jr-addon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 960px; margin: 0 auto; }
body.cms-id-22 .jr-product-card { background: #fff; border-radius: var(--jr-radius); box-shadow: var(--jr-shadow); overflow: hidden; display: flex; flex-direction: column; text-align: left; transition: transform .3s ease, box-shadow .3s ease; }
body.cms-id-22 .jr-product-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(90,80,40,.22); }
body.cms-id-22 .jr-product-card > a > img { aspect-ratio: 4/3; object-fit: contain; background: #fff; width: 100%; transition: transform .5s ease; }
body.cms-id-22 .jr-product-card:hover > a > img { transform: scale(1.05) rotate(.6deg); }
body.cms-id-22 .jr-product-card .jr-body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
body.cms-id-22 .jr-product-card h3 { font-size: 22px; font-weight: 900; margin-bottom: 6px; }
body.cms-id-22 .jr-product-card p { color: var(--jr-ink-soft); font-size: 15.5px; margin-bottom: 16px; }
body.cms-id-22 .jr-p-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; margin-top: auto; }
body.cms-id-22 .jr-p-now { font-size: 28px; font-weight: 900; color: var(--jr-green-dark); }
body.cms-id-22 .jr-p-was { color: var(--jr-ink-soft); text-decoration: line-through; }
body.cms-id-22 .jr-p-off { background: rgba(212,84,63,.12); color: var(--jr-red); font-weight: 900; font-size: 13.5px; padding: 3px 10px; border-radius: 999px; }
@media (max-width: 800px) { body.cms-id-22 .jr-addon-grid { grid-template-columns: 1fr; } }

/* ---------- bundle ---------- */
body.cms-id-22 .jr-bundle { background: linear-gradient(180deg,#F7E9B8 0%, #F2C640 130%); position: relative; overflow: hidden; }
body.cms-id-22 .jr-bundle-box { background: #fff; border-radius: 30px; box-shadow: 0 24px 60px rgba(90,70,20,.22); overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr; }
body.cms-id-22 .jr-bundle-img { position: relative; min-height: 340px; background: #fff; }
body.cms-id-22 .jr-bundle-img img { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; padding: 14px; transition: transform .6s ease; }
body.cms-id-22 .jr-bundle-img:hover img { transform: scale(1.04); }
body.cms-id-22 .jr-bundle-flag { position: absolute; top: 22px; left: 22px; background: var(--jr-red); color: #fff; font-weight: 900; padding: 9px 18px; border-radius: 999px; font-size: 15px; box-shadow: 0 6px 18px rgba(0,0,0,.18); z-index: 2; }
body.cms-id-22 .jr-bundle-body { padding: 44px 46px; }
body.cms-id-22 .jr-bundle-body h2 { font-family: 'Amatic SC', cursive; font-size: clamp(36px,4vw,50px); font-weight: 700; margin-bottom: 8px; }
body.cms-id-22 .jr-bundle-items { list-style: none; margin: 20px 0 6px; }
body.cms-id-22 .jr-bundle-items li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed rgba(94,140,66,.25); font-weight: 700; }
body.cms-id-22 .jr-bundle-items li:last-child { border-bottom: none; }
body.cms-id-22 .jr-bi-ico { width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--jr-cream); display: grid; place-items: center; font-size: 19px; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
body.cms-id-22 .jr-bundle-items li:hover .jr-bi-ico { transform: rotate(-12deg) scale(1.18); }
body.cms-id-22 .jr-bi-name { flex: 1; min-width: 0; }
body.cms-id-22 .jr-bundle-items li .jr-val { margin-left: auto; color: var(--jr-ink-soft); font-weight: 700; font-size: 14.5px; white-space: nowrap; flex: none; }
body.cms-id-22 .jr-bundle-price { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 18px 0 8px; }
body.cms-id-22 .jr-bundle-price .jr-now { font-size: 52px; font-weight: 900; color: var(--jr-green-dark); line-height: 1; white-space: nowrap; }
body.cms-id-22 .jr-bundle-price .jr-was { font-size: 24px; text-decoration: line-through; color: var(--jr-ink-soft); }
body.cms-id-22 .jr-bundle-price .jr-off { background: var(--jr-red); color: #fff; font-weight: 900; padding: 6px 14px; border-radius: 999px; font-size: 16px; }
body.cms-id-22 .jr-bundle-save { font-family: 'Caveat', cursive; font-size: 24px; color: var(--jr-red); margin-bottom: 20px; }
@media (max-width: 900px) { body.cms-id-22 .jr-bundle-box { grid-template-columns: 1fr; } }
@media (max-width: 600px) { body.cms-id-22 .jr-bundle-body { padding: 32px 26px; } }

/* ---------- faq ---------- */
body.cms-id-22 .jr-faq-list { max-width: 760px; margin: 0 auto; }
body.cms-id-22 .jr-faq-list details { background: #fff; border-radius: 18px; box-shadow: var(--jr-shadow); margin-bottom: 14px; overflow: hidden; }
body.cms-id-22 .jr-faq-list summary { cursor: pointer; padding: 20px 26px; font-weight: 800; font-size: 17px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; transition: background .25s ease, color .25s ease; }
body.cms-id-22 .jr-faq-list summary::-webkit-details-marker { display: none; }
body.cms-id-22 .jr-faq-list summary::after { content: "+"; font-size: 26px; color: var(--jr-green); font-weight: 400; transition: transform .2s; }
body.cms-id-22 .jr-faq-list details[open] summary::after { transform: rotate(45deg); }
body.cms-id-22 .jr-faq-list details:hover summary { background: rgba(94,140,66,.06); }
body.cms-id-22 .jr-faq-list details[open] summary { color: var(--jr-green-dark); }
body.cms-id-22 .jr-faq-list .jr-a { padding: 10px 26px 22px; color: var(--jr-ink-soft); font-size: 16px; overflow: hidden; transition: height .38s cubic-bezier(.2,.7,.3,1), opacity .32s ease, padding .38s cubic-bezier(.2,.7,.3,1); }

/* ---------- final cta ---------- */
body.cms-id-22 .jr-final { background: var(--jr-green); color: #fff; text-align: center; }
body.cms-id-22 .jr-final .jr-section-title { color: #fff; }
body.cms-id-22 .jr-final p { color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto 30px; font-size: 18px; }
body.cms-id-22 .jr-final .jr-btn { background: var(--jr-yellow); box-shadow: 0 6px 0 rgba(0,0,0,.18); }
body.cms-id-22 .jr-final a { color: inherit; }
body.cms-id-22 .jr-baby-round { display: block; width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 5px solid #fff; box-shadow: 0 8px 22px rgba(90,80,40,.25); margin: 0 auto 18px; }

/* ---------- sticky mobile cta ---------- */
body.cms-id-22 .jr-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; box-shadow: 0 -6px 24px rgba(0,0,0,.12); padding: 10px 16px; display: none; z-index: 1060; align-items: center; justify-content: space-between; gap: 12px; font-family: 'Nunito', sans-serif; }
body.cms-id-22 .jr-sticky-cta .jr-p { font-weight: 900; font-size: 18px; color: var(--jr-green-dark); }
body.cms-id-22 .jr-sticky-cta .jr-p s { color: var(--jr-ink-soft); font-size: 13px; font-weight: 700; margin-left: 6px; }
@media (max-width: 700px) {
  body.cms-id-22 .jr-sticky-cta { display: flex; }
  body.cms-id-22 .jr-sticky-cta .jr-btn { padding: 12px 20px; font-size: 15px; }
  body.cms-id-22 .jr-hero-ctas { flex-direction: column; }
  body.cms-id-22 .jr-hero-ctas .jr-btn { width: 100%; }
  body.cms-id-22 .jr-btn { justify-content: center; text-align: center; }
  body.cms-id-22 .jr-final .jr-btn,
  body.cms-id-22 .jr-bundle-body .jr-btn.jr-green { width: 100%; }
}

/* ---------- above-the-fold entrance ---------- */
@keyframes jrFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes jrFadeScale { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
body.cms-id-22 .jr-hero-grid > div:first-child { animation: jrFadeUp .8s cubic-bezier(.4,0,.2,1) .1s both; }
body.cms-id-22 .jr-hero-img { animation: jrFadeScale .8s cubic-bezier(.4,0,.2,1) .25s both; }

/* ---------- scroll-in animations ---------- */
body.cms-id-22 .jr-anim { opacity: 0; transform: translateY(30px); transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
body.cms-id-22 .jr-anim-scale { opacity: 0; transform: scale(.95); transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1); }
body.cms-id-22 .jr-anim-left { opacity: 0; transform: translateX(-30px); transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1); }
body.cms-id-22 .jr-anim-right { opacity: 0; transform: translateX(30px); transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1); }
body.cms-id-22 .jr-anim--visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  body.cms-id-22 .jr-hero-grid > div:first-child,
  body.cms-id-22 .jr-hero-img { animation: none; }
  body.cms-id-22 .jr-anim,
  body.cms-id-22 .jr-anim-scale,
  body.cms-id-22 .jr-anim-left,
  body.cms-id-22 .jr-anim-right { opacity: 1; transform: none; transition: none; }
  body.cms-id-22 .jr-deco { animation: none !important; }
  body.cms-id-22 .jr-pulse { animation: none; }
  body.cms-id-22 .jr-btn::after { display: none; }
}