/* ===========================================================================
   LEMMY LOU & FRIENDS \u2014 children's collection theme (theme-lemmy)
   Loaded only on Lemmy Lou pages and children's product pages, layered on top
   of styles.css. Playful palette, rounded geometry, softer motion.
   Sections: L1 fonts/palette \u00b7 L2 ribbon + hero \u00b7 L3 clouds & bands
   L4 story/shop cards \u00b7 L5 Nicola grid + signup + strip \u00b7 L6 buttons
   =========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700&display=swap");

/* --- L1. PALETTE -------------------------------------------------------- */
.theme-lemmy {
  --l-sky: #cfe9f7;
  --l-sky-2: #a9d6ef;
  --l-blush: #fbd9dd;
  --l-blush-2: #f4b8c1;
  --l-mint: #d7efdd;
  --l-mint-2: #a8ddb8;
  --l-lemon: #fbeeb0;
  --l-lav: #e4dcf7;
  --l-ink: #2f2b46;
  --l-ink-2: #4a4468;
  --l-pink: #e2607e;
  --l-blue: #3d84b5;
  --l-purple: #7a5ec4;
  --l-green: #4f9c6b;
  --l-orange: #e8944a;
  --l-ink-soft: rgba(47, 43, 70, 0.14);

  --ink: var(--l-ink);
  --ink-2: var(--l-ink-2);
  --muted: #6c6690;
  --terracotta: var(--l-pink);
  --terracotta-dk: #c94d6b;
  --gold: #c98a1f;
  --gold-lt: var(--l-lemon);
  --sage: var(--l-green);
  --stone: #eef1fa;
  --stone-2: #e2e7f5;
  --line: var(--l-ink-soft);
  --line-strong: rgba(47, 43, 70, 0.3);
  --focus: #6a3fb5;

  --font-display: "Baloo 2", "Trebuchet MS", "Segoe UI", sans-serif;
  --font-body: "DM Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-md: 22px;
  --r-lg: 34px;
  --shadow-sm: 0 3px 0 rgba(47, 43, 70, 0.08);
  --shadow-md: 0 16px 30px -18px rgba(47, 43, 70, 0.4);

  background: linear-gradient(180deg, #f2f9ff 0%, #fdf7f4 45%, #f5fbf6 100%);
  color: var(--l-ink);
}

.theme-lemmy h1,
.theme-lemmy h2,
.theme-lemmy h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; }
.theme-lemmy .eyebrow { color: var(--l-purple); letter-spacing: 0.15em; }
.theme-lemmy .site-header { background: rgba(242, 249, 255, 0.94); }
.theme-lemmy .brand__role { color: var(--l-purple); }
.theme-lemmy .placeholder { color: #8a5a00; background: rgba(251, 238, 176, 0.7); border-color: rgba(201, 138, 31, 0.55); }

/* --- L2. RIBBON, HERO, CLOUDS ------------------------------------------- */
.lemmy-ribbon {
  background: var(--l-lav);
  border-bottom: 1px solid rgba(122, 94, 196, 0.18);
}
.lemmy-ribbon__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.7rem;
}
.lemmy-ribbon p { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.86rem; color: var(--l-ink-2); }
.lemmy-ribbon a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--l-purple);
}
.lemmy-ribbon a:hover { text-decoration: underline; }

.theme-lemmy .hero__deco { background: radial-gradient(circle at 30% 30%, rgba(228, 220, 247, 0.9), rgba(228, 220, 247, 0) 70%); }
.theme-lemmy .hero h1 em { color: var(--l-purple); }
.theme-lemmy .hero__media img {
  border: 6px solid #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 22px 40px -26px rgba(47, 43, 70, 0.6);
}
.theme-lemmy .hero__arch { background: linear-gradient(150deg, var(--l-lemon), rgba(251, 238, 176, 0.1)); }
.lemmy-strap {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--l-purple);
  margin: 0;
}
.lemmy-scope {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.45rem 0.95rem;
  background: #fff;
  border: 2px dashed var(--l-sky-2);
  border-radius: var(--r-pill);
  font-size: 0.82rem;
  color: var(--l-ink-2);
}

.lemmy-section { padding-block: clamp(2.75rem, 6vw, 5rem); }
.lemmy-section--stories { background: rgba(255, 255, 255, 0.6); }
.lemmy-section--shop { background: linear-gradient(180deg, rgba(228, 220, 247, 0.35), rgba(255, 255, 255, 0.2)); }
.lemmy-section--nicola { background: rgba(255, 255, 255, 0.72); border-block: 1px solid var(--l-ink-soft); }
.lemmy-section--join { background: linear-gradient(135deg, var(--l-sky), var(--l-blush)); }

.lemmy-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}
.lemmy-two--support { align-items: stretch; }

.cloud {
  position: relative;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: 42px 42px 42px 12px;
  background: #fff;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 34px -26px rgba(47, 43, 70, 0.55);
}
.cloud--sky { background: linear-gradient(160deg, #ffffff 0%, var(--l-sky) 100%); }
.cloud--blush { background: linear-gradient(160deg, #ffffff 0%, var(--l-blush) 100%); }
.cloud h2, .cloud h3 { color: var(--l-ink); }
.cloud__lead {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--l-purple);
  margin-bottom: 0.9rem;
}
.cloud__closing {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 2px dotted var(--l-blush-2);
  font-weight: 600;
  color: var(--l-ink-2);
}

.lemmy-band { padding-block: clamp(2rem, 4vw, 3.25rem); }
.lemmy-band--creator {
  background: linear-gradient(120deg, var(--l-mint), var(--l-lemon));
  border-block: 3px solid #fff;
}
.lemmy-band__inner { max-width: 62rem; }
.lemmy-band__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--l-ink);
  margin: 0 0 0.75rem;
}
.lemmy-band__text { font-size: 1.05rem; color: var(--l-ink-2); }
.lemmy-band__note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 1.1rem 0 0;
  padding: 0.85rem 1.1rem;
  background: rgba(255, 255, 255, 0.75);
  border-left: 4px solid var(--l-green);
  border-radius: var(--r-sm);
  font-size: 0.88rem;
  color: var(--l-ink-2);
}
.lemmy-band__note .icon { color: var(--l-green); margin-top: 0.15em; }

/* --- L3. STORY, SUPPORT AND SHOP CARDS ---------------------------------- */
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
.story-card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: #fff;
  border: 3px solid #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 20px 36px -30px rgba(47, 43, 70, 0.7);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.story-card:hover { transform: translateY(-5px); box-shadow: 0 26px 46px -28px rgba(47, 43, 70, 0.55); }
.story-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--l-sky);
}
.story-card h3 { margin-bottom: 0.45rem; font-size: 1.35rem; }
.story-card p { font-size: 0.96rem; color: var(--l-ink-2); }
.story-card--blush { background: linear-gradient(180deg, #fff 55%, var(--l-blush) 100%); }
.story-card--sky { background: linear-gradient(180deg, #fff 55%, var(--l-sky) 100%); }
.story-card--coming {
  justify-content: center;
  text-align: center;
  background: linear-gradient(160deg, var(--l-lav), var(--l-lemon));
  border-style: dashed;
  border-color: var(--l-purple);
}
.story-card--coming p { font-weight: 500; }
.story-intro { margin-bottom: 2rem; }
.story-intro__lead {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--l-purple);
  max-width: 48ch;
}

.lemmy-two--support { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.support-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 20px 36px -30px rgba(47, 43, 70, 0.7);
}
.support-card h2 { display: flex; align-items: center; gap: 0.55rem; font-size: 1.5rem; margin-bottom: 0; }
.support-card--parents { background: linear-gradient(170deg, #fff 40%, var(--l-mint) 100%); }
.support-card--pros { background: linear-gradient(170deg, #fff 40%, var(--l-lav) 100%); }
.support-card p { font-size: 0.98rem; }
.support-card .btn { align-self: flex-start; margin-top: auto; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
.shop-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-lg);
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 20px 36px -30px rgba(47, 43, 70, 0.7);
  text-align: center;
}
.shop-card__icon { font-size: 2.6rem; line-height: 1; margin-bottom: 0.75rem; }
.shop-card h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.shop-card p { font-size: 0.96rem; }
.shop-card--blush { background: linear-gradient(170deg, #fff 45%, var(--l-blush) 100%); }
.shop-card--sky { background: linear-gradient(170deg, #fff 45%, var(--l-sky) 100%); }
.shop-card--mint { background: linear-gradient(170deg, #fff 45%, var(--l-mint) 100%); }

.theme-lemmy .product-card {
  background: #fff;
  border: 3px solid #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 20px 36px -30px rgba(47, 43, 70, 0.7);
}
.theme-lemmy .product-card__media img { border-radius: var(--r-md) var(--r-md) 0 0; }
.theme-lemmy .product-card h3 { font-size: 1.3rem; }
.theme-lemmy .product-card .eyebrow { color: var(--l-purple); }
.theme-lemmy .product-detail__media--lemmy .product-detail__image {
  border: 6px solid #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 44px -30px rgba(47, 43, 70, 0.6);
}
.theme-lemmy .breadcrumb { background: rgba(228, 220, 247, 0.4); }
.theme-lemmy .section--stone { background: rgba(255, 255, 255, 0.55); }
.theme-lemmy .note { border-radius: var(--r-md); }

/* --- L4. NICOLA NOTE, SIGNUP, STRIP, CHILD BUTTONS ---------------------- */
.nicola-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.nicola-grid__portrait {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 6px solid #fff;
  box-shadow: 0 24px 44px -30px rgba(47, 43, 70, 0.6);
}
.nicola-grid h2 { display: flex; align-items: center; gap: 0.55rem; color: var(--l-ink); }
.nicola-grid h2 .icon { color: var(--l-pink); }
.nicola-grid p { color: var(--l-ink-2); }
.nicola-grid__signature {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--l-purple);
  margin-top: 1.25rem;
  margin-bottom: 0.25rem;
}
.nicola-grid__credentials { font-size: 0.84rem; letter-spacing: 0.06em; color: var(--l-ink-2); }
.nicola-grid__link { margin-top: 1rem; }
.theme-lemmy .text-link { color: var(--l-purple); border-color: currentColor; }

.theme-lemmy .newsletter { margin-top: 1.5rem; }
.lemmy-strip { background: var(--l-ink); color: rgba(255, 253, 249, 0.9); padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.lemmy-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.lemmy-strip p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--l-lemon);
}

.btn--lemmy { --btn-bg: var(--l-purple); --btn-fg: #fff; --btn-bd: transparent; }
.btn--lemmy:hover { --btn-bg: #6749b5; }
.btn--lemmyGhost { --btn-bg: #fff; --btn-fg: var(--l-purple); --btn-bd: var(--l-purple); }
.btn--lemmyGhost:hover { --btn-bg: var(--l-lav); }
.btn--lemmyGold { --btn-bg: var(--l-orange); --btn-fg: #fff; }
.btn--lemmyGold:hover { --btn-bg: #d6813a; }
.btn--lemmyPurple { --btn-bg: var(--l-blue); --btn-fg: #fff; }
.btn--lemmyPurple:hover { --btn-bg: #33729e; }
.theme-lemmy .btn { border-radius: var(--r-pill); box-shadow: 0 4px 0 rgba(47, 43, 70, 0.14); }
.theme-lemmy .btn:hover { transform: translateY(-3px); box-shadow: 0 8px 0 rgba(47, 43, 70, 0.16); }
.theme-lemmy .btn--ghost { --btn-bg: #fff; --btn-fg: var(--l-ink); --btn-bd: var(--l-ink-soft); }

.theme-lemmy .product-cover {
  background: linear-gradient(160deg, var(--l-sky), var(--l-lav));
  color: var(--l-ink);
}
.theme-lemmy .product-cover__brand { color: var(--l-purple); }
.theme-lemmy .pathway-option__body { border-radius: var(--r-md); }
.theme-lemmy .field input,
.theme-lemmy .field select,
.theme-lemmy .field textarea { border-radius: var(--r-md); background: #fff; }
.theme-lemmy .site-footer { background: #2a2740; }
.theme-lemmy .proto-bar { background: #2a2740; }

/* --- L5. PAGE-LEVEL THEME TWEAKS & RESPONSIVE -------------------------- */
.theme-lemmy .product-detail__buy h1 { font-size: clamp(2rem, 4vw, 3rem); }
.theme-lemmy .product-detail__price {
  background: var(--l-lemon);
  border-radius: var(--r-pill);
  padding: 0.4rem 0.9rem;
  display: inline-block;
}
.theme-lemmy .product-detail__reassure { background: rgba(255, 255, 255, 0.7); }
.theme-lemmy .product-cover--lemmy { border-radius: var(--r-lg); }
.theme-lemmy .section-head--center h2 { color: var(--l-ink); }
.theme-lemmy .breadcrumb a { color: var(--l-purple); }
.theme-lemmy .legal-placeholder,
.theme-lemmy .placeholder { color: #7a5200; }
.theme-lemmy .footer-brand__logo { background: rgba(255, 255, 255, 0.14); border-radius: 12px; }

@media (max-width: 1024px) {
  .lemmy-two,
  .lemmy-two--support { grid-template-columns: minmax(0, 1fr); }
  .nicola-grid { grid-template-columns: minmax(0, 1fr); }
  .nicola-grid__portrait { max-width: 22rem; }
}

@media (max-width: 700px) {
  .story-grid,
  .shop-grid { grid-template-columns: minmax(0, 1fr); }
  .lemmy-strap { font-size: 1.25rem; }
  .cloud { border-radius: 30px 30px 30px 10px; }
  .lemmy-ribbon__inner { flex-direction: column; align-items: flex-start; }
  .lemmy-strip__inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .story-card:hover,
  .theme-lemmy .btn:hover { transform: none; }
}