/* =================================================================
   Lolly & Laine — custom Home (Phase 2)
   A faithful port of the Vercel "Pillow" home page. Fully scoped under
   .ll-home so it never collides with the rest of the Candy theme.
   Markup lives in templates/home.liquid; commerce data (collections,
   products, newsletter) comes from real Liquid loops.
   ================================================================= */

.ll-home {
  /* pillow tokens */
  --bg: #f5ecfb;
  --surface: #ffffff;
  --accent: #a274cf;
  --accent-soft: #f0e3fb;
  --accent-ink: #ffffff;
  --ink: #483d52;
  --ink-soft: #857a90;
  --line: #e7ddec;
  --rose-tint: #f7e9ec;
  --rose-deep: #d4848f;
  --caramel: #c9a27e;
  --caramel-tint: #f1e6d8;
  --sage: #9caf88;
  --sage-tint: #ece5f4;
  --lilac-tint: #efe7f6;
  --cream-2: #fcfaff;

  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --font-script: 'Fredoka', sans-serif;
  --radius: 30px;
  --radius-sm: 20px;
  --radius-pill: 999px;
  --btn-radius: 999px;
  --card-shadow: 0 20px 40px -22px rgba(140, 90, 200, 0.6);
  --hero-display-weight: 700;

  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.ll-home * { box-sizing: border-box; }
.ll-home h1, .ll-home h2, .ll-home h3, .ll-home h4 {
  font-family: var(--font-display);
  font-weight: var(--hero-display-weight);
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
  line-height: 1.08;
  text-wrap: pretty;
}
.ll-home p { margin: 0; }
.ll-home a { color: inherit; text-decoration: none; }
.ll-home img { display: block; }
.ll-home .script { font-family: var(--font-script); }

/* ---------- buttons ---------- */
.ll-home .ll-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  border-radius: var(--btn-radius);
  padding: 13px 24px;
  background: var(--accent);
  color: var(--accent-ink);
  letter-spacing: 0.02em;
  transition: transform .18s ease, box-shadow .18s ease;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  box-shadow: 0 8px 0 -2px color-mix(in srgb, var(--accent) 60%, #00000022);
}
.ll-home .ll-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 0 -2px color-mix(in srgb, var(--accent) 60%, #00000022); }
.ll-home .ll-btn:active { transform: translateY(0); }
.ll-home .ll-btn.ghost {
  background: transparent; color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.ll-home .ll-btn.ghost:hover { background: var(--accent); color: #fff; }

.ll-home .eyebrow {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
}

/* ---------- layout helpers ---------- */
.ll-home .wrap { max-width: 1080px; margin: 0 auto; padding: 0 26px; }
.ll-home .section { padding: 64px 0; }
.ll-home .section-head { text-align: center; margin-bottom: 38px; }
.ll-home .section-head h2 { font-size: 44px; }
.ll-home .section-head p { color: var(--ink-soft); margin-top: 10px; max-width: 460px; margin-inline: auto; }

/* ---------- hero ---------- */
.ll-home .hero { padding: 30px 0 18px; }
.ll-home .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.ll-home .hero-copy .eyebrow { margin-bottom: 16px; display: inline-block; }
.ll-home .hero-copy h1 { font-size: 66px; line-height: 1.04; margin-bottom: 2px; }
.ll-home .hero-copy .lede { color: var(--ink-soft); font-size: 18px; margin: 22px 0 28px; max-width: 420px; }
.ll-home .hero-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ll-home .hero-stats { display: flex; gap: 28px; margin-top: 34px; }
.ll-home .hero-stat .n { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--ink); }
.ll-home .hero-stat .l { font-size: 12.5px; color: var(--ink-soft); letter-spacing: 0.03em; }

.ll-home .hero-art { position: relative; }
.ll-home .hero-photo { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius); box-shadow: var(--card-shadow); }
.ll-home .hero-badge {
  position: absolute; bottom: -18px; left: -18px;
  background: var(--surface); border-radius: var(--radius);
  padding: 14px 18px; box-shadow: var(--card-shadow);
  display: flex; align-items: center; gap: 12px; max-width: 230px;
}
.ll-home .hero-badge .dot { width: 38px; height: 38px; border-radius: var(--radius-pill); background: var(--sage-tint); display: grid; place-items: center; font-size: 18px; flex: none; }
.ll-home .hero-badge .t { font-size: 12.5px; line-height: 1.3; color: var(--ink-soft); }
.ll-home .hero-badge .t b { color: var(--ink); display: block; font-size: 13.5px; }
.ll-home .hero-float {
  position: absolute; top: -16px; right: -16px;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--radius-pill); width: 112px; height: 112px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-align: center; padding: 10px;
  box-shadow: var(--card-shadow), inset 0 0 0 3px color-mix(in srgb, #fff 45%, transparent);
  transform: rotate(-10deg) scale(1.05);
}
.ll-home .hero-float .fl-top { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1; }
.ll-home .hero-float .fl-sub { font-family: var(--font-body); font-weight: 700; font-size: 11.5px; line-height: 1.2; max-width: 80px; opacity: 0.92; }

/* ---------- category strip ---------- */
.ll-home .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ll-home .cat-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  cursor: pointer; aspect-ratio: 3/3.2; background: var(--surface);
  box-shadow: var(--card-shadow); transition: transform .25s ease; display: block;
}
.ll-home .cat-card:nth-child(3n+1) { background: var(--sage-tint); }
.ll-home .cat-card:nth-child(3n+2) { background: #f0e3fb; }
.ll-home .cat-card:nth-child(3n) { background: #e7defa; }
.ll-home .cat-card:hover { transform: translateY(-4px); }
.ll-home .cat-card img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transition: transform .5s ease; }
.ll-home .cat-card:hover img { transform: scale(1.05); }
.ll-home .cat-meta {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.ll-home .cat-meta h3 { font-size: 21px; }
.ll-home .cat-meta span { font-size: 12.5px; color: var(--ink-soft); }
.ll-home .cat-meta .arrow { float: right; color: var(--accent); font-weight: 800; transition: transform .25s ease; }
.ll-home .cat-card:hover .cat-meta .arrow { transform: translateX(5px); }

/* ---------- product grid (ll-card* names avoid the theme's own .card styles) ---------- */
.ll-home .prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ll-home .ll-card {
  background: var(--surface); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; position: relative;
  box-shadow: var(--card-shadow); transition: transform .22s ease, box-shadow .22s ease;
  display: flex; flex-direction: column; align-items: stretch; width: 100%;
  padding: 0; margin: 0; border: none;
}
.ll-home .ll-card:hover { transform: translateY(-5px); box-shadow: 0 22px 40px -22px rgba(140, 90, 200, 0.7); }
.ll-home .ll-card-img { position: relative; width: 100%; aspect-ratio: 1/1; overflow: hidden; background: var(--accent-soft); }
.ll-home .ll-card-img img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.ll-home .ll-card-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
  padding: 5px 10px; border-radius: var(--radius-pill);
  background: var(--surface); color: var(--accent);
}
.ll-home .ll-card-badge.sold { color: var(--ink-soft); }
.ll-home .ll-card-body { padding: 14px 18px 18px; }
/* title on its own row (left); price on the next row, right-aligned */
.ll-home .ll-card-head { display: block; }
.ll-home .ll-card-body h3 { font-size: 18px; margin: 2px 0 6px; line-height: 1.2; text-align: left; }
.ll-home .ll-card-head .ll-price { display: block; text-align: left; white-space: nowrap; }
.ll-home .ll-card-row { display: flex; align-items: center; justify-content: flex-end; margin-top: 8px; gap: 8px; }
.ll-home .ll-price { font-weight: 800; font-family: var(--font-body); color: var(--ink); font-size: 15px; }

/* ---------- shop / collection page ---------- */
.ll-home.ll-shop { padding: 40px 0 64px; min-height: 60vh; }

/* breadcrumb (reuses theme snippet) */
.ll-home .ll-shop-crumb { margin: 0 0 16px; }
.ll-home .ll-shop-crumb .breadcrumb { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.ll-home .ll-shop-crumb .breadcrumb a { color: var(--accent); }
.ll-home .ll-shop-crumb .breadcrumb a:hover { text-decoration: underline; }
.ll-home .ll-shop-crumb .breadcrumb__sep { margin: 0 8px; color: var(--line); }

/* Iteration A — banner hero: collection photo with the title overlaid */
.ll-home .ll-shop-banner {
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-height: 280px; display: flex; align-items: flex-end;
  background: var(--accent-soft); background-size: cover; background-position: center;
  box-shadow: var(--card-shadow); margin-bottom: 22px;
}
.ll-home .ll-shop-banner.no-img {
  background: linear-gradient(135deg, #f7c9d4, #f3d9a8 45%, #cfe0c2 75%, #cdb6e6);
}
.ll-home .ll-shop-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(72,61,82,0) 28%, rgba(72,61,82,.62));
}
.ll-home .ll-shop-banner-in { position: relative; z-index: 2; padding: 34px 38px; color: #fff; }
.ll-home .ll-shop-banner-in .eyebrow { color: #fff; opacity: .92; margin-bottom: 4px; display: inline-block; }
.ll-home .ll-shop-banner-in h1 { color: #fff !important; font-size: 52px; margin-top: 8px; text-shadow: 0 2px 18px rgba(0,0,0,.25); }

/* text header (collections with no cover image — show title + existing description) */
.ll-home .ll-shop-head { text-align: center; margin-bottom: 26px; }
.ll-home .ll-shop-head .eyebrow { display: inline-block; margin-bottom: 10px; }
.ll-home .ll-shop-head h1 { font-size: 48px; }
.ll-home .ll-shop-desc { color: var(--ink-soft); max-width: 660px; margin: 16px auto 0; font-size: 15px; line-height: 1.65; }
.ll-home .ll-shop-desc p { margin: 0 0 10px; }
.ll-home .ll-shop-desc p:last-child { margin-bottom: 0; }
.ll-home .ll-shop-desc a { color: var(--accent); font-weight: 700; }

/* toolbar row: product count (left) + sort (right) */
.ll-home .ll-shop-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; }
.ll-home .ll-shop-count { font-weight: 800; font-size: 14px; color: var(--ink-soft); white-space: nowrap; }
.ll-home .ll-shop-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin: 0 0 0 auto; }
.ll-home .ll-shop-toolbar .form-horizontal { display: flex; align-items: center; gap: 10px; }
.ll-home .ll-shop-toolbar select,
.ll-home .ll-shop-toolbar .collection-sorting,
.ll-home .ll-shop-toolbar .sort-by select {
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink);
  padding: 10px 16px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; margin: 0;
}
.ll-home .ll-shop-toolbar label,
.ll-home .ll-shop-toolbar b { font-size: 13px; color: var(--ink-soft); font-weight: 700; white-space: nowrap; margin: 0; }
.ll-home .ll-shop-toolbar br { display: none; }
.ll-home .ll-shop-empty { text-align: center; color: var(--ink-soft); padding: 60px 0; }
.ll-home .ll-shop-pagination { margin-top: 38px; text-align: center; }
.ll-home .ll-shop-pagination a,
.ll-home .ll-shop-pagination span {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px;
  border-radius: var(--radius-pill); margin: 0 3px; font-weight: 700; font-size: 14px;
  color: var(--ink); background: var(--surface); box-shadow: var(--card-shadow);
}
.ll-home .ll-shop-pagination .current,
.ll-home .ll-shop-pagination a:hover { background: var(--accent); color: #fff; }
@media (max-width: 760px) {
  .ll-home .ll-shop-banner { min-height: 180px; }
  .ll-home .ll-shop-banner-in { padding: 22px 22px; }
  .ll-home .ll-shop-banner-in h1 { font-size: 34px; }
  .ll-home .ll-shop-head h1 { font-size: 32px; }
  .ll-home.ll-shop { padding: 26px 0 44px; }
}

/* ---------- story band ---------- */
.ll-home .story { background: linear-gradient(140deg, #f0e3fb, #e7defa); border-radius: var(--radius); padding: 52px; }
.ll-home .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.ll-home .story h2 { font-size: 38px; }
.ll-home .story p { color: var(--ink-soft); margin-top: 16px; }
.ll-home .story-steps { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.ll-home .story-step { display: flex; gap: 14px; align-items: flex-start; }
.ll-home .story-step .num {
  flex: none; width: 36px; height: 36px; border-radius: var(--radius-pill);
  background: var(--surface); color: var(--accent); font-weight: 800;
  display: grid; place-items: center; font-family: var(--font-display); font-size: 17px;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.ll-home .story-step:hover .num { transform: rotate(-8deg) scale(1.12); }
.ll-home .story-step b { display: block; }
.ll-home .story-step span { font-size: 14px; color: var(--ink-soft); }
.ll-home .story-photo { aspect-ratio: 1/1; border-radius: var(--radius); object-fit: cover; box-shadow: var(--card-shadow); width: 100%; }

/* ---------- reviews ---------- */
.ll-home .review-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ll-home .review {
  background: var(--surface); border-radius: var(--radius); padding: 22px;
  box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 12px;
}
.ll-home .review .stars { color: #e6a800; font-size: 14px; letter-spacing: 1px; }
.ll-home .review p { font-size: 14px; line-height: 1.5; color: var(--ink); }
.ll-home .review .who { font-size: 13px; font-weight: 700; color: var(--accent); margin-top: auto; }

/* ---------- newsletter ---------- */
.ll-home .news { text-align: center; background: #5a4470; color: #fff; border-radius: var(--radius); padding: 56px 32px; }
.ll-home .news h2 { color: #ffffff !important; font-size: 38px; }
.ll-home .news .eyebrow { color: #d9c3f0 !important; }
.ll-home .news p { color: rgba(255,255,255,0.78); margin: 12px auto 24px; max-width: 420px; }
.ll-home .news .ll-news-cta { display: flex; justify-content: center; margin-top: 4px; }
.ll-home .news .ll-news-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: none; border-radius: var(--radius-pill);
  padding: 15px 32px; background: var(--accent); color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 15px; letter-spacing: 0.01em;
  box-shadow: 0 8px 0 -2px color-mix(in srgb, var(--accent) 55%, #00000022);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ll-home .news .ll-news-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 0 -2px color-mix(in srgb, var(--accent) 55%, #00000022); color: #fff; }
.ll-home .news .ll-news-btn:active { transform: translateY(0); }

/* ---------- motion (reduced-motion aware) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ll-bob { 0%, 100% { transform: rotate(-10deg) scale(1.05) translateY(0); } 50% { transform: rotate(-6deg) scale(1.05) translateY(-7px); } }
  .ll-home .hero-float { animation: ll-bob 5.5s ease-in-out infinite; }
  @keyframes ll-bob-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
  .ll-home .hero-badge { animation: ll-bob-soft 6s ease-in-out 1.4s infinite; }
}

/* ---------- tablet ---------- */
@media (max-width: 980px) {
  .ll-home .hero-grid, .ll-home .story-grid { grid-template-columns: 1fr; }
  .ll-home .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .ll-home .review-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .ll-home .wrap { padding: 0 18px; }
  .ll-home .section { padding: 42px 0; }
  .ll-home .section-head { margin-bottom: 24px; }
  .ll-home .section-head h2 { font-size: 29px; }
  .ll-home .hero { padding: 20px 0 8px; }
  .ll-home .hero-grid { gap: 30px; }
  .ll-home .hero-copy h1 { font-size: 40px; }
  .ll-home .hero-copy .lede { font-size: 16px; margin: 16px 0 22px; }
  .ll-home .hero-photo { aspect-ratio: 1/1; }
  .ll-home .hero-stats { gap: 16px; margin-top: 26px; flex-wrap: wrap; }
  .ll-home .hero-stat .n { font-size: 25px; }
  .ll-home .hero-float { width: 90px; height: 90px; top: -10px; right: -4px; }
  .ll-home .hero-float .fl-top { font-size: 21px; }
  .ll-home .hero-badge { left: -4px; bottom: -14px; padding: 11px 14px; max-width: 210px; }
  .ll-home .cat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ll-home .cat-meta { left: 9px; right: 9px; bottom: 9px; padding: 9px 11px; }
  .ll-home .cat-meta h3 { font-size: 16px; }
  .ll-home .cat-meta span { font-size: 11px; }
  .ll-home .prod-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ll-home .ll-card-body { padding: 11px 12px 13px; }
  .ll-home .ll-card-body h3 { font-size: 15.5px; }
  .ll-home .story { padding: 26px 20px; }
  .ll-home .story h2 { font-size: 26px; }
  .ll-home .story-grid { gap: 30px; }
  .ll-home .review-grid { grid-template-columns: 1fr; }
  .ll-home .news { padding: 40px 22px; }
  .ll-home .news h2 { font-size: 27px; }
  .ll-home .news .ll-news-form { flex-direction: column; }
}

/* =================================================================
   Site footer (global — rendered outside .ll-home, uses --ll-* tokens
   from pillow.css). Faithful multi-column Pillow design.
   ================================================================= */
.ll-footer { background: var(--ll-surface); border-top: 1px solid var(--ll-line); color: var(--ll-ink); font-family: 'Nunito', system-ui, sans-serif; padding: 56px 0 30px; text-align: left; }
.ll-footer-in { max-width: 1080px; margin: 0 auto; padding: 0 26px; }
.ll-foot-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: 30px; }
.ll-foot-name { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 700; font-size: 26px; color: var(--ll-ink); display: inline-block; margin-bottom: 12px; text-decoration: none; }
.ll-foot-logo { height: 110px; width: auto; margin-bottom: 16px; display: block; }
.ll-foot-blurb { font-size: 14px; color: var(--ll-ink-soft); max-width: 280px; line-height: 1.55; margin: 0; }
.ll-foot-social { margin-top: 16px; }
.ll-foot-social ul, .ll-foot-social .inline-list, .ll-foot-social .social-icons { display: flex; gap: 12px; padding: 0; margin: 0; list-style: none; align-items: center; }
.ll-foot-social a, .ll-foot-social .icon { color: var(--ll-ink-soft); font-size: 18px; transition: color .15s ease; }
.ll-foot-social a:hover { color: var(--ll-accent); }
.ll-foot-col h4 { font-family: 'Nunito', system-ui, sans-serif; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ll-ink-soft); margin: 0 0 14px; font-weight: 800; }
.ll-foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.ll-foot-col a { font-size: 14px; color: var(--ll-ink-soft); text-decoration: none; transition: color .15s ease; }
.ll-foot-col a:hover { color: var(--ll-accent); }
.ll-foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--ll-line); font-size: 12.5px; color: var(--ll-ink-soft); }
.ll-foot-pay { display: flex; gap: 9px; align-items: center; list-style: none; padding: 0; margin: 0; }
.ll-foot-pay li { display: inline-flex; align-items: center; }
.ll-foot-pay img { height: 22px; width: auto; }
.ll-foot-pay .icon { font-size: 26px; color: var(--ll-ink-soft); }
.ll-foot-pay .fallback-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ll-foot-terms a { color: var(--ll-ink-soft); text-decoration: none; }
.ll-foot-terms a:hover { color: var(--ll-accent); }
@media (max-width: 760px) {
  .ll-footer { padding: 40px 0 26px; }
  .ll-footer-in { padding: 0 18px; }
  .ll-foot-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .ll-foot-brand { grid-column: 1 / -1; }
  .ll-foot-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* =================================================================
   Search — overlay (header popup) + results page
   The overlay markup lives outside .ll-home, so these rules are global.
   ================================================================= */

/* ---- header search overlay (magnific popup) ---- */
.popup-search { background: #fff !important; padding: 26px 0 28px !important; }
.popup-search .popup-search-content { max-width: 760px; margin: 0 auto; padding: 0 26px; }
.popup-search .search-bar.input-group,
.popup-search form.search-bar { display: flex !important; align-items: center; gap: 14px; width: 100%; }
.popup-search .input-group-field {
  order: 1; flex: 1 1 auto; width: auto !important;
  border: none !important; box-shadow: none !important; background: transparent !important;
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 700; font-size: 26px !important;
  color: var(--ll-ink); padding: 6px 4px !important; height: auto !important; outline: none !important;
}
.popup-search .input-group-field::placeholder { color: var(--ll-ink-soft); opacity: 1; }
.popup-search .search-bar.input-group { position: relative; }
.popup-search .input-group-btn { order: 2; flex: 0 0 auto; display: inline-flex; align-items: center; }
.popup-search .input-group-btn .btn {
  width: 54px !important; height: 54px !important; min-width: 54px; padding: 0 !important;
  border-radius: 999px !important; background: var(--ll-accent) !important; color: #fff !important;
  display: inline-grid !important; place-items: center; box-shadow: none !important; border: none !important;
}
.popup-search .input-group-btn .btn:hover { transform: none !important; filter: brightness(1.06); box-shadow: none !important; }
.popup-search .input-group-btn .btn .ll-mag { width: 22px !important; height: 22px !important; stroke: #fff; fill: none; transform: translate(-1px, -1px); }

/* ---- search-history dropdown (shared by overlay + results page) ---- */
#searchDropdown.dropdown {
  display: none; position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 10px);
  background: #fff; border-radius: 18px; box-shadow: 0 24px 50px -24px rgba(72,61,82,.5);
  border: 1px solid var(--ll-line); padding: 8px;
}
#searchDropdown .dropdown-item {
  padding: 11px 14px; border-radius: 12px; cursor: pointer; font-weight: 700; font-size: 14.5px;
  color: var(--ll-ink); display: flex; align-items: center; gap: 9px;
}
#searchDropdown .dropdown-item::before {
  content: ""; width: 15px; height: 15px; flex: none; opacity: .5;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857a90' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
}
#searchDropdown .dropdown-item:hover { background: var(--ll-accent-soft); color: var(--ll-accent); }
#searchDropdown .dropdown-item.clear-all {
  justify-content: flex-end; color: var(--ll-ink-soft); font-size: 11.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; padding: 6px 12px;
}
#searchDropdown .dropdown-item.clear-all::before { display: none; }
#searchDropdown .dropdown-item.clear-all:hover { background: transparent; color: var(--ll-accent); }

/* ---- results page (reuses .ll-shop layout) ---- */
.ll-home .ll-search-form { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 640px; margin: 0 auto 30px; }
.ll-home .ll-search-field { position: relative; flex: 1 1 auto; display: flex; }
.ll-home .ll-search-input {
  width: 100%; height: 52px; margin: 0; border: 1.5px solid var(--line) !important; background: var(--surface);
  border-radius: var(--radius-pill) !important; padding: 0 22px !important;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ink); outline: none;
}
.ll-home .ll-search-input::placeholder { color: var(--ink-soft); }
.ll-home .ll-search-input:focus { border-color: var(--accent) !important; }
.ll-home .ll-search-btn {
  flex: 0 0 auto; align-self: center; width: 52px; height: 52px; min-width: 52px; padding: 0;
  border: none; cursor: pointer; border-radius: 999px; background: var(--accent); color: #fff;
  display: grid; place-items: center;
}
.ll-home .ll-search-btn:hover { filter: brightness(1.06); }
.ll-home .ll-search-btn .ll-mag { width: 20px; height: 20px; stroke: #fff; fill: none; transform: translate(-1px, -1px); }
.ll-home .ll-search-count { font-weight: 800; font-size: 14px; color: var(--ink-soft); margin: 0 0 18px; }
.ll-home .ll-search-empty { text-align: center; color: var(--ink-soft); padding: 30px 0 60px; font-size: 15px; }
.ll-home .ll-search-empty a { color: var(--accent); font-weight: 700; }
.ll-home .ll-search-link {
  display: block; padding: 14px 18px; background: var(--surface); border-radius: var(--radius-sm);
  box-shadow: var(--card-shadow); font-weight: 700; color: var(--ink);
}

/* =================================================================
   Account / login page — the EasyStore accounts app injects this
   widget (.card with the Welcome/toggle/email/Continue/Facebook).
   Markup isn't ours, so we restyle it to the Pillow look here.
   ================================================================= */
body.template-customers .card {
  background: #fff !important; border-radius: var(--ll-radius) !important;
  box-shadow: var(--ll-shadow); border: none !important;
  padding: 40px 38px !important; max-width: 460px; margin: 30px auto;
}
body.template-customers .card > h1 {
  font-family: 'Fredoka', system-ui, sans-serif !important; font-weight: 700 !important;
  font-size: 34px !important; color: var(--ll-ink) !important; margin: 0 0 4px !important;
}
body.template-customers .card .h3 {
  color: var(--ll-ink-soft) !important; font-weight: 700; font-size: 16px !important; margin: 0 0 8px;
}

/* Sign up / Login toggle */
body.template-customers .tab-wrapper { background: var(--ll-accent-soft) !important; }
body.template-customers .tab-wrapper .tab-label {
  color: var(--ll-ink) !important; font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 700; font-size: 15px !important;
}
body.template-customers .tab-wrapper input[type='radio']:checked + .tab-label {
  background: #fff !important; color: var(--ll-accent) !important;
  box-shadow: 0 6px 16px -8px rgba(72,61,82,.55) !important;
}

/* fields + primary button */
body.template-customers .field { margin-bottom: 14px; }
body.template-customers .field input { width: 100%; }
body.template-customers .btn.button--full-width { width: 100% !important; }

/* Facebook button: white w/ hairline + dark text, no clipping (pillow forced it lilac) */
body.template-customers #fb-login-btn.btn {
  background: #fff !important; color: var(--ll-ink) !important;
  box-shadow: inset 0 0 0 1.5px var(--ll-line) !important;
  width: 100% !important; height: 42px !important; min-height: 42px;
  overflow: visible !important; white-space: nowrap;
  display: flex !important; align-items: center; justify-content: center; gap: 10px;
  padding: 0 16px !important; font-weight: 700; font-size: 14px !important; margin-top: 10px;
}
body.template-customers #fb-login-btn.btn:hover {
  transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--ll-accent) !important;
}
/* hide the app's tiny built-in mark, drop in a proper Facebook logo */
body.template-customers #fb-login-btn.btn svg,
body.template-customers #fb-login-btn.btn img { display: none !important; }
body.template-customers #fb-login-btn.btn::before {
  content: ""; flex: 0 0 auto; width: 22px; height: 22px;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%231877F2'/%3E%3Cpath fill='%23ffffff' d='M15.1 12.5l.35-2.3h-2.2V8.7c0-.63.31-1.24 1.3-1.24h1V5.5s-.91-.16-1.78-.16c-1.82 0-3 1.1-3 3.1v1.76H8.9v2.3h1.97v5.56a7.8 7.8 0 0 0 2.4 0v-5.56h1.83z'/%3E%3C/svg%3E");
}

/* =================================================================
   Content pages — Option A: style the CMS rich-text (About us, Shipping
   & Delivery, Care & Cleaning, Returns Policy, FAQ, …) to the Pillow look.
   Applies to every template-page; the words/photos stay editable in
   admin → Webpages. Page-specific extras are scoped by body id below.
   ================================================================= */
body.template-page .main-content { padding-top: 14px; }
body.template-page .rte {
  max-width: 980px; margin: 0 auto; padding: 10px 4px 48px;
  font-family: 'Nunito', system-ui, sans-serif; color: var(--ll-ink);
  font-size: 17px; line-height: 1.75;
}
/* About us keeps a comfortable reading width (centered copy + photos) */
body#about-us .rte { max-width: 820px; }
body.template-page .rte > *:first-child { margin-top: 0; }
body.template-page .rte p { margin: 0 0 18px; color: var(--ll-ink); }
body.template-page .rte h1,
body.template-page .rte h2,
body.template-page .rte h3,
body.template-page .rte h4 {
  font-family: 'Fredoka', system-ui, sans-serif !important; font-weight: 700 !important;
  color: var(--ll-ink) !important; line-height: 1.12; margin: 36px 0 14px;
}
body.template-page .rte h2 { font-size: 30px; }
body.template-page .rte h3 { font-size: 23px; }
body.template-page .rte h4 { font-size: 19px; margin: 28px 0 12px; }
body.template-page .rte strong { color: var(--ll-ink); }
body.template-page .rte a {
  color: var(--ll-accent); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
}
body.template-page .rte img {
  display: block; max-width: 100%; height: auto; margin: 28px auto;
  border-radius: var(--ll-radius); box-shadow: var(--ll-shadow);
}
body.template-page .rte ul,
body.template-page .rte ol { margin: 0 0 18px; padding-left: 22px; }
body.template-page .rte li { margin: 6px 0; }
body.template-page .rte br + br { display: none; }

/* data tables (FAQ / policies). About uses tables only for image layout, so exclude it.
   The CARD (rounding + clip + border + shadow) lives on the .table-wrapper DIV — overflow
   clipping is unreliable on <table> elements, so a div is what actually rounds the corners
   (incl. any inline cell backgrounds). The wrapper's own shadow isn't clipped, so it fades
   smoothly. The <table> itself carries no radius/shadow/border. */
body.template-page:not(#about-us) .rte .table-wrapper {
  margin: 0 0 18px; background: #fff;
  border: 1px solid var(--ll-line); border-radius: var(--ll-radius-sm);
  overflow: hidden; box-shadow: var(--ll-shadow);
}
body.template-page:not(#about-us) .rte table {
  width: 100% !important; margin: 0 !important; background: transparent !important;
  border-collapse: collapse !important; border: none !important;
  border-radius: 0 !important; box-shadow: none !important;
}
body.template-page:not(#about-us) .rte th,
body.template-page:not(#about-us) .rte td {
  padding: 12px 16px; border: none; border-bottom: 1px solid var(--ll-line);
  text-align: left; vertical-align: top;
}
body.template-page:not(#about-us) .rte tr:last-child td,
body.template-page:not(#about-us) .rte tr:last-child th { border-bottom: none; }
body.template-page:not(#about-us) .rte thead th,
body.template-page:not(#about-us) .rte thead td { font-weight: 800; background: var(--ll-accent-soft); }

/* About us — "My Fur Babies" section → one rounded white card holding the
   heading + the photo/caption table. The heading <p> is immediately followed
   by the section's .table-wrapper; clip-path the inner edges so the two
   halves share a single seamless shadow. */
body#about-us .fr-view > p:has(+ .table-wrapper) {
  background: #fff; border-radius: var(--ll-radius) var(--ll-radius) 0 0;
  margin: 40px 0 0; padding: 32px 34px 6px;
  box-shadow: var(--ll-shadow); clip-path: inset(-50px -50px 0 -50px);
}
body#about-us .fr-view > p + .table-wrapper {
  background: #fff; border-radius: 0 0 var(--ll-radius) var(--ll-radius);
  margin: 0 0 40px; padding: 6px 30px 30px;
  box-shadow: var(--ll-shadow); clip-path: inset(0 -50px -50px -50px);
}
body#about-us .fr-view > p + .table-wrapper img { margin: 0 auto; }

@media (max-width: 760px) {
  body.template-page .rte { font-size: 16px; padding: 6px 2px 36px; }
  body.template-page .rte h2 { font-size: 25px; }
  body#about-us .fr-view > p:has(+ .table-wrapper) { padding: 24px 18px 4px; }
  body#about-us .fr-view > p + .table-wrapper { padding: 4px 18px 22px; }

  /* About: the photo+text layout tables stay side-by-side and crush the text
     into a ~134px ribbon. Stack each cell to full width so the photo sits
     above its caption/paragraph and the text reads at full width. */
  body#about-us .fr-view table,
  body#about-us .fr-view tbody,
  body#about-us .fr-view tr,
  body#about-us .fr-view td {
    display: block !important; width: 100% !important; max-width: 100% !important;
  }
  body#about-us .fr-view td { padding: 0 !important; }
  body#about-us .fr-view td img { display: block; margin: 0 auto 12px; max-width: 100%; height: auto; }
  body#about-us .fr-view td + td { margin-top: 4px; }

  /* Login: "Continue with Facebook" overflows its button at phone width.
     Give the card more room (smaller side padding) and shrink the button
     label + icon so the full label fits. */
  body.template-customers .card { padding: 30px 18px !important; }
  body.template-customers #fb-login-btn.btn {
    font-size: 12.5px !important; padding: 0 8px !important; gap: 7px;
    letter-spacing: -0.1px;
  }
  body.template-customers #fb-login-btn.btn::before { width: 18px; height: 18px; }
}

/* ---------- phones: one card per row for collections + listings ----------
   Covers home category tiles (.cat-grid) and every product grid (.prod-grid
   on home, collection and search — all sit under .ll-home). Larger phones in
   landscape / small tablets (600–760px) keep the 2-up layout. */
@media (max-width: 600px) {
  .ll-home .cat-grid { grid-template-columns: 1fr; gap: 14px; }
  .ll-home .prod-grid { grid-template-columns: 1fr; gap: 16px; }
  /* full-width single cards → a little more breathing room L/R/bottom */
  .ll-home .ll-card-body { padding: 14px 18px 20px; }
  .ll-home .ll-card-body h3 { font-size: 16.5px; }
}

/* ---------- Smartarget WhatsApp widget → icon-only ----------
   The app renders TWO variants: a light-DOM one (.smt-app-whatsapp.force-mobile,
   shown on phones) styled here, and a shadow-DOM one (.shadow-smt-app-whatsapp,
   shown on desktop) collapsed by a script in layout/theme.liquid. Both turn the
   "Any questions? Ask in Whatsapp" pill into a round icon-only button. */
.smt-app-whatsapp #sm-cb-link > span,
.smt-app-whatsapp #sm-cb-link .powered-link,
.smt-app-whatsapp .sm-button .powered-link { display: none !important; }
.smt-app-whatsapp .sm-button {
  width: 56px !important; height: 56px !important; min-width: 0 !important; max-width: 56px !important;
  padding: 0 !important; border-radius: 50% !important; background: transparent !important;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,.35) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.smt-app-whatsapp #sm-cb-link {
  padding: 0 !important; margin: 0 !important; width: 100%; height: 100%;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.smt-app-whatsapp .sm-icon-toggle-container {
  width: 54px !important; height: 54px !important; position: relative !important; margin: 0 !important;
}
.smt-app-whatsapp .sm-icon-toggle-container .sm-icon-toggle-item {
  width: 54px !important; height: 54px !important; top: 0 !important; left: 0 !important; right: auto !important;
}
.smt-app-whatsapp .sm-icon-toggle-container .sm-icon-toggle-item--2 { display: none !important; }
.smt-app-whatsapp .sm-icon-toggle-container svg { width: 54px !important; height: 54px !important; display: block !important; }

/* =================================================================
   Product detail page (PDP) — Pillow restyle, scoped to template-product.
   CSS-only (the template markup + AJAX recommendations are left intact).
   ================================================================= */
body.template-product .main-content { padding-top: 10px; }

/* Title + price */
body.template-product h1[itemprop="name"],
body.template-product .product-single__title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 700;
  color: var(--ll-ink); font-size: 30px; line-height: 1.12; margin: 0 0 4px;
}
body.template-product .product-single__prices { margin: 4px 0 18px; }
body.template-product .product-single__price,
body.template-product .product-single__price .money {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 700;
  font-size: 27px; color: var(--ll-accent);
}
body.template-product .product-single__sale-price .money { color: var(--ll-ink-soft); }

/* Gallery → clean photo (no frame/shadow); centered lilac paging dots */
body.template-product .product-single__photos img {
  border-radius: var(--ll-radius-sm); overflow: hidden;
}
body.template-product .product-flexslider,
body.template-product .product-flexslider .flex-viewport {
  box-shadow: none !important; border-radius: 0 !important;
}
body.template-product .flex-control-nav { text-align: center !important; width: 100%; }
body.template-product .flex-control-paging li a {
  background: rgba(72,61,82,.25); box-shadow: none; width: 9px; height: 9px;
}
body.template-product .flex-control-paging li a.flex-active { background: var(--ll-accent); }

/* Option name labels (Number / Quantity) */
body.template-product .selector-wrapper > label,
body.template-product .product-single__quantity > label {
  display: block; font-family: 'Nunito', system-ui, sans-serif; font-weight: 800;
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ll-ink-soft); margin: 0 0 10px;
}

/* Variant pickers → candy pills */
/* Let pills use the full row width; they only wrap when they genuinely don't fit.
   The theme lays these out in a table-row (display:table-row), which caps the
   fieldset to its content (~204px) and forces premature wraps. Break it to a
   normal block so the fieldset spans the full 360px available. */
body.template-product .product-option-wrapper { display: block !important; width: 100%; }
body.template-product .selector-wrapper { display: block !important; width: 100% !important; }
body.template-product .single-option-selector {
  display: flex !important; flex-wrap: wrap; width: 100% !important; max-width: 100%;
  border: 0; margin: 0; padding: 0;
}
body.template-product .single-option-selector input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
body.template-product .single-option-selector label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 16px; margin: 0 8px 8px 0;
  border-radius: 999px; border: 1.5px solid var(--ll-line); background: #fff;
  font-family: 'Nunito', system-ui, sans-serif; font-weight: 700; font-size: 15px;
  color: var(--ll-ink); cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
body.template-product .single-option-selector label:hover { border-color: var(--ll-accent); }
body.template-product .single-option-selector input[type="radio"]:checked + label {
  background: var(--ll-accent); border-color: var(--ll-accent); color: #fff;
}
body.template-product .product-option-wrapper { margin-bottom: 18px; }

/* Quantity stepper */
body.template-product .product-single__quantity { margin-bottom: 20px; }
body.template-product .cart-qty-adjust {
  display: inline-flex; align-items: center; background: #fff;
  border: 1.5px solid var(--ll-line); border-radius: 999px; overflow: hidden;
}
body.template-product .product-single__btn-qty-adjust {
  width: 44px; height: 46px; display: grid; place-items: center; cursor: pointer;
  color: var(--ll-accent); font-size: 20px; font-weight: 700; user-select: none; line-height: 1;
}
body.template-product .product-single__btn-qty-adjust:hover { background: var(--ll-accent-soft); }
body.template-product input.quantity-selector {
  width: 46px !important; min-width: 0 !important; height: 46px; border: none; background: transparent; text-align: center;
  font-family: 'Nunito', system-ui, sans-serif; font-weight: 700; font-size: 16px;
  color: var(--ll-ink); -moz-appearance: textfield; appearance: textfield; padding: 0 !important;
}
body.template-product input.quantity-selector::-webkit-outer-spin-button,
body.template-product input.quantity-selector::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* In-page Add to cart (desktop) → lilac candy button */
body.template-product .product_form .addToCart-btn {
  border-radius: 999px !important; background: var(--ll-accent) !important; color: #fff !important;
  font-family: 'Fredoka', system-ui, sans-serif !important; font-weight: 600; font-size: 17px;
  padding: 15px 28px !important; box-shadow: 0 8px 0 -2px color-mix(in srgb, var(--ll-accent) 55%, #00000022) !important;
}

/* Description */
body.template-product .product-description.rte {
  font-family: 'Nunito', system-ui, sans-serif; color: var(--ll-ink);
  font-size: 16px; line-height: 1.7; margin-top: 8px;
}
body.template-product .product-description.rte a { color: var(--ll-accent); font-weight: 700; }

/* Social share — quieter */
body.template-product .social-sharing { margin: 8px 0 6px; }

/* Sticky bottom action bar (mobile) */
body.template-product .floating-action-bar {
  background: #fff; border-top: 1px solid var(--ll-line);
  box-shadow: 0 -10px 26px -12px rgba(72,61,82,.5);
  padding: 9px 14px; padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
}
body.template-product .floating-action-bar-wrapper { display: flex; align-items: center; gap: 12px; }
/* Home button removed by request — Add to Cart fills the bar */
body.template-product .btn-back-home { display: none !important; }
body.template-product #MobileAddToCart.addToCart-btn {
  flex: 1 1 auto; height: 54px; border-radius: 999px !important;
  background: var(--ll-accent) !important; color: #fff !important; border: none !important;
  font-family: 'Fredoka', system-ui, sans-serif !important; font-weight: 600; font-size: 17px;
  box-shadow: none !important; transform: none !important;
}

/* Clear the fixed bottom action bar so it never covers page content
   (recommended products / footer). Bar is ~83px tall + safe area. */
body.template-product.has-sticky-btm-bar #PageContainer {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* Related products ("You may also like") */
body.template-product .section-header__title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 700;
  font-size: 24px; color: var(--ll-ink); text-align: center; margin: 6px 0 18px;
}
body.template-product #recommend-products-content .grid-link {
  background: #fff; border-radius: var(--ll-radius-sm); overflow: hidden;
  box-shadow: var(--ll-shadow); display: flex; flex-direction: column;
  height: 100%; text-align: center;
}
body.template-product #recommend-products-content .grid-link__image--product { border-radius: 0; }
body.template-product #recommend-products-content .product_grid-item { margin-bottom: 18px; }
/* No add-to-cart on recommended products — just image + title + price.
   (Both the desktop hover quick-add and the mobile button are removed.) */
body.template-product #recommend-products-content .float-btn,
body.template-product #recommend-products-content .grid-link > a.btn,
body.template-product #recommend-products-content a.btn--outline,
body.template-product #recommend-products-content .addToCartList {
  display: none !important;
}
/* Tighten the gap between image and title; centre the text block and give the
   price comfortable breathing room from the bottom edge of the card. */
body.template-product #recommend-products-content .product-meta_link {
  display: block; padding: 12px 14px 18px; text-align: center;
}
body.template-product #recommend-products-content .grid-link__title {
  margin: 0 0 4px !important; line-height: 1.25;
}
body.template-product #recommend-products-content .grid-link__meta { margin: 0 !important; }

@media (max-width: 600px) {
  body.template-product h1[itemprop="name"] { font-size: 26px; }
  body.template-product .product-single__price,
  body.template-product .product-single__price .money { font-size: 24px; }
  body.template-product #recommend-products-content .grid-uniform { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  body.template-product #recommend-products-content .product_grid-item { width: auto !important; float: none !important; margin: 0; padding: 0 !important; }
}

/* ===================================================================
   Content-page heading scale (FAQ, About Us, Care, Shipping, Returns…)
   h1 mirrors the homepage hero (Fredoka bold, chunky, ink); h2–h4 form
   a matching hierarchy that steps down in size and weight.
   Scoped to page templates + their rich-text/Froala content.
   =================================================================== */
body.template-page .rte h1,
body.template-page .rte .h1,
body.template-page .fr-view h1 {
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 46px; line-height: 1.05; letter-spacing: -0.01em;
  color: var(--ll-ink) !important;
  margin: 4px 0 20px;
}
body.template-page .rte h2,
body.template-page .rte .h2,
body.template-page .fr-view h2 {
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 31px; line-height: 1.12;
  color: var(--ll-ink) !important;
  margin: 34px 0 12px;
}
body.template-page .rte h3,
body.template-page .rte .h3,
body.template-page .fr-view h3 {
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 23px; line-height: 1.2;
  color: var(--ll-ink) !important;
  margin: 26px 0 10px;
}
body.template-page .rte h4,
body.template-page .rte .h4,
body.template-page .fr-view h4 {
  font-family: 'Fredoka', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 19px; line-height: 1.25;
  color: var(--ll-ink-soft) !important;
  margin: 22px 0 8px;
}

@media (max-width: 760px) {
  body.template-page .rte h1,
  body.template-page .fr-view h1 { font-size: 34px; margin: 2px 0 16px; }
  body.template-page .rte h2,
  body.template-page .fr-view h2 { font-size: 25px; margin: 28px 0 10px; }
  body.template-page .rte h3,
  body.template-page .fr-view h3 { font-size: 20px; margin: 22px 0 8px; }
  body.template-page .rte h4,
  body.template-page .fr-view h4 { font-size: 17px; margin: 18px 0 6px; }
}