/* ============================================================
   niokyar retail / home style layer
   Inspired by thelittlelearnerstoys.com — rounded, friendly,
   cartoon-toy energy while keeping B2B credibility.
   Loaded AFTER main.css via layout.php.
   ============================================================ */

/* ---------- fonts & display ---------- */
:root {
  --brand-blue: #5ccaec;
  --brand-blue-dark: #29abe2;
  --brand-orange: #ff7d1d;
  --brand-green: #18820e;
  --brand-green-soft: #e8f6e7;
  --brand-yellow: #ffcd05;
  --brand-red: #e95757;
  --shadow-soft: 0 6px 20px rgba(30, 58, 100, .10);
  --shadow-pop: 4px 4px 0 rgba(28, 41, 57, .92);
  --shadow-pop-blue: 4px 4px 0 rgba(41, 171, 226, .85);
}

h1, h2, h3, .font-display {
  font-family: Lexend, Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.02em;
}

/* ---------- generic rounded surface ---------- */
.panel-round {
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  background: hsl(var(--card));
  box-shadow: var(--shadow-soft);
}

/* ---------- cartoon button (white + hard offset shadow) ---------- */
.btn-cartoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .6rem 1.5rem;
  border-radius: 14px;
  border: 2px solid #2d2d2d;
  background: #fff;
  color: #1c2531;
  font-family: Lexend, Inter, sans-serif;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  box-shadow: var(--shadow-pop);
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn-cartoon:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 rgba(28,41,57,.92); text-decoration: none; }
.btn-cartoon:active { transform: translate(3px, 3px); box-shadow: none; }
.btn-cartoon--blue { background: var(--brand-blue); border-color: var(--brand-blue-dark); box-shadow: var(--shadow-pop-blue); color: #0b3a4d; }
.btn-cartoon--blue:hover { box-shadow: 2px 2px 0 rgba(41,171,226,.85); }
.btn-cartoon--orange { background: var(--brand-orange); border-color: #d95f00; color: #fff; box-shadow: 4px 4px 0 rgba(217,95,0,.9); }
.btn-cartoon--orange:hover { box-shadow: 2px 2px 0 rgba(217,95,0,.9); }
.btn-cartoon--green { background: var(--brand-green); border-color: #12680a; color: #fff; box-shadow: 4px 4px 0 rgba(18,104,10,.9); }
.btn-cartoon--green:hover { box-shadow: 2px 2px 0 rgba(18,104,10,.9); }

/* ---------- promo chips / tags ---------- */
.chip-promo {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.chip-promo--save { background: var(--brand-green); color: #fff; }
.chip-promo--ship { background: var(--brand-blue); color: #0b3a4d; }
.chip-promo--gift { background: var(--brand-yellow); color: #5a4300; }

/* ---------- hero carousel ---------- */
.hero-carousel { position: relative; overflow: hidden; }
.hero-slide {
  display: none;
  animation: heroFade .6s ease;
}
.hero-slide.is-active { display: block; }
@keyframes heroFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  display: flex;
  gap: .5rem;
  z-index: 5;
}
.hero-dot {
  width: .55rem; height: .55rem; border-radius: 999px;
  background: rgba(28,41,57,.25); border: 0; cursor: pointer; padding: 0;
  transition: background .2s ease, width .2s ease;
}
.hero-dot.is-active { background: hsl(var(--primary)); width: 1.4rem; }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 2.6rem; height: 2.6rem; border-radius: 999px;
  border: 1px solid hsl(var(--border)); background: rgba(255,255,255,.9);
  color: hsl(var(--foreground)); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.12); transition: background .15s ease;
}
.hero-arrow:hover { background: #fff; }
.hero-arrow--prev { left: 1rem; }
.hero-arrow--next { right: 1rem; }
@media (max-width: 1023px) { .hero-arrow { display: none; } }

/* ---------- video story rail ---------- */
.story-rail {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .75rem;
  scrollbar-width: thin;
}
.story-rail::-webkit-scrollbar { height: 8px; }
.story-rail::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; }
.story-card {
  flex: 0 0 78%;
  scroll-snap-align: start;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease;
}
@media (min-width: 640px) { .story-card { flex-basis: 46%; } }
@media (min-width: 1024px) { .story-card { flex-basis: 30%; } }
.story-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(30,58,100,.16); }
.story-media { position: relative; aspect-ratio: 16/10; background: hsl(var(--secondary)); overflow: hidden; }
.story-media img, .story-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(20,30,45,.25);
}
.story-play span {
  width: 3.2rem; height: 3.2rem; border-radius: 999px;
  background: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.3); color: #1c2531;
}
.story-body { padding: 1rem 1.1rem 1.15rem; }
.story-body h3 { font-size: 1.02rem; font-weight: 600; }
.story-body p { margin-top: .3rem; font-size: .82rem; color: hsl(var(--muted-foreground)); }

/* ---------- safety split (left image / right text) ---------- */
.safety-split {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow: var(--shadow-soft);
}
@media (min-width: 900px) { .safety-split { grid-template-columns: 1.05fr 1fr; } }
.safety-media { position: relative; min-height: 240px; }
.safety-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.safety-body { padding: 2rem 1.75rem; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 1024px) { .safety-body { padding: 3rem 3.25rem; } }
.safety-body h2 { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
@media (min-width: 1024px) { .safety-body h2 { font-size: 1.9rem; } }
.safety-body p { margin-top: 1rem; color: hsl(var(--muted-foreground)); line-height: 1.7; }

/* ---------- age-stage cards (3-5 / 6-8 / 9-12) ---------- */
.age-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .age-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .age-grid { grid-template-columns: repeat(3, 1fr); } }
.age-card {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease;
}
.age-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(30,58,100,.16); }
.age-media { aspect-ratio: 4/3; overflow: hidden; }
.age-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.age-body { padding: 1.3rem 1.35rem 1.5rem; }
.age-pill {
  display: inline-block; border-radius: 999px; padding: .25rem .8rem;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.age-pill--blue { background: var(--brand-blue); color: #0b3a4d; }
.age-pill--orange { background: var(--brand-orange); color: #fff; }
.age-pill--green { background: var(--brand-green-soft); color: var(--brand-green); }
.age-body h3 { margin-top: .8rem; font-size: 1.15rem; font-weight: 700; }
.age-body ul { margin-top: .9rem; }
.age-body li { display: flex; gap: .55rem; align-items: flex-start; padding: .32rem 0; font-size: .9rem; color: hsl(var(--foreground)/.85); }
.age-body li::before { content: ""; flex: 0 0 auto; width: .4rem; height: .4rem; border-radius: 999px; margin-top: .42rem; background: hsl(var(--primary)); }

/* ---------- trust bar (logos / proof strip) ---------- */
.trust-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 2.5rem; }
.trust-item { font-family: Lexend, sans-serif; font-weight: 700; letter-spacing: .02em; color: hsl(var(--muted-foreground)); opacity: .85; font-size: .95rem; white-space: nowrap; }

/* ---------- product card refresh ---------- */
.prod-card {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease;
}
.prod-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(30,58,100,.16); }
.prod-media { aspect-ratio: 1/1; overflow: hidden; background: hsl(var(--secondary)); }
.prod-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.prod-card:hover .prod-media img { transform: scale(1.04); }

/* ---------- section headings ---------- */
.sec-kicker { display: inline-flex; align-items: center; gap: .45rem; border-radius: 999px; background: hsl(var(--accent)); color: hsl(var(--primary)); padding: .32rem .9rem; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sec-title { margin-top: .9rem; font-size: 1.9rem; font-weight: 700; line-height: 1.15; }
@media (min-width: 1024px) { .sec-title { font-size: 2.4rem; } }
.sec-sub { margin-top: .8rem; max-width: 42rem; color: hsl(var(--muted-foreground)); line-height: 1.7; }

/* ---------- soft bg bands ---------- */
.band-sky { background: linear-gradient(180deg, hsl(var(--accent)/.55), hsl(var(--background)) 60%); }
.band-cream { background: hsl(var(--secondary)/.55); }

/* ---------- Tailwind utilities used by the new homepage but missing
     from the prebuilt main.css (added so the layout renders fully) ---------- */
.rounded-full { border-radius: 9999px; }
.rounded-2xl { border-radius: 1rem; }
.border-4 { border-width: 4px; }
.border-l-4 { border-left-width: 4px; }
.border-l-primary { border-left-color: hsl(var(--primary)); }
.top-3 { top: .75rem; }
.left-3 { left: .75rem; }
.right-6 { right: 1.5rem; }
.text-white { color: #fff; }
.bg-\[\#e8f6e7\] { background-color: #e8f6e7; }
.bg-\[\#ff7d1d\] { background-color: #ff7d1d; }
.text-\[\#18820e\] { color: #18820e; }
.text-\[\#29abe2\] { color: #29abe2; }
.border-\[\#5ccaec\]\/50 { border-color: rgba(92, 202, 236, .5); }
.shadow-\[0_12px_30px_rgba\(30\,58\,100\,\.14\)\] { box-shadow: 0 12px 30px rgba(30, 58, 100, .14); }
.shadow-\[0_6px_20px_rgba\(30\,58\,100\,\.12\)\] { box-shadow: 0 6px 20px rgba(30, 58, 100, .12); }