/* playbox.css — Fisher-Price каталог. Палитра с баннера бренда:
   красный #d40029, жёлтый #f5c400, голубой #45c5ec, офф-вайт #f3f1ec, тёмный #1c2b4a.
   Шрифты самохостом из этой же папки: Varela Round (заголовки), Andika (текст). */

@font-face {
  font-family: 'Varela Round';
  src: url('varela-round-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Andika';
  src: url('andika-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Andika';
  src: url('andika-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Andika';
  src: url('andika-400i.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --fpred: #d40029;
  --fpred-deep: #a30020;
  --fpyellow: #f5c400;
  --fpsky: #45c5ec;
  --fpnavy: #1c2b4a;
  --fpnavy-2: #24365c;
  --playmat: #f3f1ec;
  --playmat-2: #eae6dd;
  --crayonink: #262330;
  --crayonink-soft: #5a5566;
  --brickface: #ffffff;
  --lacingline: #ddd7cc;
  --curvy: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Andika', 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--crayonink);
  background: var(--playmat);
}
h1, h2, h3, h4 { font-family: 'Varela Round', 'Segoe UI', sans-serif; font-weight: 400; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h2 { font-size: clamp(1.45rem, 2.8vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--fpred-deep); }
img { max-width: 100%; height: auto; display: block; }
table { border-collapse: collapse; width: 100%; }
address { font-style: normal; }

.spanwide { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---------- шапка ---------- */
.awninghead { background: #fff; position: relative; }
.awningband { background: var(--fpred); color: #fff; }
.awningband .spanwide { display: flex; align-items: center; gap: 26px; min-height: 74px; }
.homeperch { flex: 0 0 auto; display: block; padding: 8px 0; }
.homeperch img { width: 132px; height: auto; }
.chalkrail { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: auto; }
.chalkrail .wagontrail { color: #fff; text-decoration: none; font-family: 'Varela Round', sans-serif; font-size: .98rem; padding: 4px 2px; border-bottom: 2px solid transparent; }
.chalkrail .wagontrail:hover { border-bottom-color: var(--fpyellow); }
.togglenub { display: none; margin-left: auto; background: none; border: 0; padding: 10px 6px; cursor: pointer; }
.togglenub span { display: block; width: 26px; height: 3px; margin: 5px 0; border-radius: 2px; background: #fff; }
.scalloprow { height: 14px; background: radial-gradient(circle at 14px -6px, var(--fpred) 18px, transparent 19px); background-size: 28px 20px; background-repeat: repeat-x; }
.hopover { display: flex; flex-wrap: wrap; gap: 2px 6px; max-width: 1180px; margin: 0 auto; padding: 8px 20px 4px; }
.hopover .wagontrail { color: var(--crayonink-soft); text-decoration: none; font-size: .86rem; padding: 3px 10px; border-radius: 99px; }
.hopover .wagontrail:hover { background: var(--playmat-2); color: var(--crayonink); }

@media (max-width: 920px) {
  .togglenub { display: block; }
  .chalkrail, .hopover { display: none; }
  body.lidopen .chalkrail { display: flex; flex-direction: column; align-items: flex-start; position: absolute; top: 74px; left: 0; right: 0; background: var(--fpred-deep); padding: 14px 20px; z-index: 40; margin: 0; }
  body.lidopen .hopover { display: flex; position: absolute; top: calc(74px + 246px); left: 0; right: 0; background: #fff; box-shadow: 0 14px 22px rgba(28, 43, 74, .18); padding: 12px 20px 16px; z-index: 40; }
}

/* ---------- карточки ---------- */
.shelfgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 18px; }
.shelfgrid.fourwide { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.toytray { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--brickface); border: 1px solid var(--lacingline); border-radius: var(--curvy); padding: 12px 14px 14px; }
.toytray:hover { box-shadow: 0 10px 24px rgba(28, 43, 74, .12); }
.peekpane { position: relative; display: block; aspect-ratio: 1; min-height: 0; border-radius: 12px; overflow: hidden; background: #fff; }
.peekpane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.agebead { position: absolute; top: 18px; left: 18px; z-index: 2; background: var(--fpyellow); color: var(--crayonink); font-size: .74rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; }
.notecap { font-size: .98rem; margin: 10px 0 4px; flex: 1 0 auto; }
.notecap a { color: var(--crayonink); text-decoration: none; }
.notecap a:hover { color: var(--fpred-deep); }
.starstring { font-size: .82rem; color: var(--crayonink-soft); }
.shelfband { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.pennytag { font-family: 'Varela Round', sans-serif; font-size: 1.12rem; color: var(--fpnavy); }
.pressgo { display: inline-block; background: var(--fpred); color: #fff; font-family: 'Varela Round', sans-serif; font-size: .95rem; border: 0; border-radius: 99px; padding: 9px 20px; cursor: pointer; text-decoration: none; }
.pressgo:hover { background: var(--fpred-deep); }
.ghostgo { background: transparent; color: inherit; border: 2px solid currentColor; padding: 7px 18px; }
.ghostgo:hover { background: rgba(255, 255, 255, .12); color: inherit; }
.biggo { font-size: 1.08rem; padding: 12px 30px; }
.bigband { margin: 14px 0 6px; }
.tiptoenote { font-size: .82rem; color: var(--crayonink-soft); }
.toytray .shelfband { margin-top: 10px; justify-content: space-between; }
.toytray .pressgo { font-size: .85rem; padding: 7px 15px; }

/* ---------- общие элементы секций ---------- */
main > section { padding: 52px 0; }
.eyebrowline { font-family: 'Varela Round', sans-serif; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; opacity: .74; margin-bottom: 10px; }
.storylead { font-size: 1.08rem; max-width: 62ch; }
.crumbwagon { font-size: .84rem; color: var(--crayonink-soft); padding: 18px 0 6px; }
.crumbwagon a { color: var(--crayonink-soft); }
.crumbwagon b { font-weight: 400; color: var(--crayonink); }
.pillparade { display: flex; flex-wrap: wrap; gap: 10px; }
.linechip { display: inline-block; background: var(--brickface); border: 1px solid var(--lacingline); color: var(--crayonink); border-radius: 99px; padding: 7px 16px; text-decoration: none; font-size: .92rem; }
.linechip:hover { border-color: var(--fpred); color: var(--fpred-deep); }
span.agebead + span.agebead { margin-left: 0; }
.pillparade .agebead { position: static; }

/* ---------- 1. hero ---------- */
.sunriseband { background: var(--fpnavy); color: #fff; }
.sunriseband .hailhead { max-width: 720px; }
.sunriseband h1 { color: #fff; }
.sunriseband .storylead { color: #d8dfef; }
.sunriseband .eyebrowline { color: var(--fpyellow); opacity: 1; }
.railtrain { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 34px; }
.railtrain .toytray { border: 0; }
@media (max-width: 920px) {
  .railtrain { display: flex; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
  .railtrain .toytray { flex: 0 0 210px; scroll-snap-align: start; }
}

/* ---------- 2. usp ---------- */
.gigglestrip { background: var(--brickface); border-bottom: 1px solid var(--lacingline); }
.gigglegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
.giggleitem h3 { color: var(--fpred-deep); }
.giggleitem p { margin: 0; font-size: .95rem; color: var(--crayonink-soft); }

/* ---------- 3. пиллы ---------- */
.wonderrow { padding: 40px 0; }
.wonderrow h2 { margin-bottom: 18px; }

/* ---------- 4. полки ---------- */
.shelfwallband { background: var(--playmat-2); }
.shelfwall { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-top: 24px; }
.wallplate { display: flex; flex-direction: column; min-height: 0; gap: 2px; background: var(--brickface); border-radius: var(--curvy); padding: 12px; text-decoration: none; color: var(--crayonink); border: 1px solid var(--lacingline); }
.wallplate:hover { border-color: var(--fpsky); }
.wallplate img { aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: #fff; }
.wallplate b { font-family: 'Varela Round', sans-serif; font-weight: 400; margin-top: 8px; }
.wallplate span { font-size: .82rem; color: var(--crayonink-soft); }

/* ---------- 5/7. подборки ---------- */
.favband h2, .newbin h2 { margin-bottom: 6px; }
.favband .storylead, .newbin .storylead { margin-bottom: 24px; }
.newbin { background: var(--brickface); border-top: 1px solid var(--lacingline); border-bottom: 1px solid var(--lacingline); }

/* ---------- 6. дуэт ---------- */
.duogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.duotote { display: block; border-radius: var(--curvy); padding: 40px 36px; text-decoration: none; }
.duodark { background: var(--fpnavy); color: #fff; }
.duodark .eyebrowline { color: var(--fpsky); opacity: 1; }
.duodark h3 { color: #fff; font-size: 1.6rem; }
.duodark p { color: #d8dfef; }
.duolight { background: var(--fpyellow); color: var(--crayonink); }
.duolight .eyebrowline { color: var(--fpred-deep); opacity: 1; }
.duolight h3 { font-size: 1.6rem; }
.chalkgo { display: inline-block; font-family: 'Varela Round', sans-serif; border-bottom: 3px solid currentColor; padding-bottom: 2px; }
@media (max-width: 820px) { .duogrid { grid-template-columns: 1fr; } }

/* ---------- 8. цифры ---------- */
.tallystripe { background: var(--fpred); color: #fff; padding: 44px 0; }
.countgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; text-align: center; }
.countgrid b { display: block; font-family: 'Varela Round', sans-serif; font-size: 2.4rem; }
.countgrid span { font-size: .9rem; opacity: .88; }

/* ---------- 9. ценности ---------- */
.heartgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; }
.heartitem svg { color: var(--fpred); margin-bottom: 10px; }
.heartitem p { color: var(--crayonink-soft); font-size: .95rem; margin: 0; }

/* ---------- 10. шаги + таблица ---------- */
.stepstack { background: var(--brickface); border-top: 1px solid var(--lacingline); }
.stepgrid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 44px; align-items: start; }
.stepsol { padding-left: 20px; }
.stepsol li { margin-bottom: 14px; }
.growchart th, .growchart td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--lacingline); font-size: .92rem; vertical-align: top; }
.growchart thead th { font-family: 'Varela Round', sans-serif; font-weight: 400; background: var(--playmat-2); }
.growhead { font-size: 1.3rem; }
@media (max-width: 860px) { .stepgrid { grid-template-columns: 1fr; } }

/* ---------- 11. spotlight ---------- */
.limegrid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
.limephoto { background: var(--brickface); border-radius: var(--curvy); padding: 24px; border: 1px solid var(--lacingline); }
.limephoto img { width: 100%; object-fit: contain; aspect-ratio: 1; }
@media (max-width: 820px) { .limegrid { grid-template-columns: 1fr; } }

/* ---------- 12. уход ---------- */
.keeppair { background: var(--playmat-2); }
.pairfield { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
.pairdo, .pairdont { background: var(--brickface); border-radius: var(--curvy); padding: 24px 28px; }
.pairdo h3 { color: #1b7d43; }
.pairdont h3 { color: var(--fpred-deep); }
.pairdo ul, .pairdont ul { margin: 0; padding-left: 20px; }
.pairdo li, .pairdont li { margin-bottom: 9px; font-size: .95rem; }
@media (max-width: 820px) { .pairfield { grid-template-columns: 1fr; } }

/* ---------- 13. миссия ---------- */
.whyband { background: var(--fpnavy); color: #fff; }
.whyband h2 { color: var(--fpyellow); }
.whyband p { max-width: 74ch; margin: 0; }

/* ---------- 14. SEO ---------- */
.longtables { display: grid; grid-template-columns: 1.7fr 1fr; gap: 30px; align-items: start; margin: 22px 0; }
.slimchart { max-width: 420px; }
.factline { padding-left: 20px; }
.factline li { margin-bottom: 6px; }
@media (max-width: 900px) { .longtables { grid-template-columns: 1fr; } }

/* ---------- 15. голоса ---------- */
.parentvoices { background: var(--brickface); border-top: 1px solid var(--lacingline); }
.voicegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 18px; }
.voicebrick { margin: 0; background: var(--playmat); border-radius: var(--curvy); padding: 24px 26px; }
.voicebrick blockquote { margin: 0 0 12px; font-style: italic; }
.voicebrick figcaption { font-size: .86rem; color: var(--crayonink-soft); }

/* ---------- 16. закрытие ---------- */
.wavegoodbye { background: var(--fpnavy); color: #fff; text-align: center; }
.wavegoodbye h2 { color: #fff; }
.wavegoodbye p { max-width: 58ch; margin: 0 auto 18px; color: #d8dfef; }
.wavegoodbye .shelfband { justify-content: center; }

/* ---------- внутренние страницы ---------- */
.plainsheet { padding: 0 0 60px; }
.plainsheet .hailhead { padding: 14px 0 26px; max-width: 760px; }
.storysec { margin: 34px 0; max-width: 860px; }
.storysec h2 { margin-top: 1.2em; }
.kinfolkrow, .siblingrow { margin: 40px 0; }
.kinfolkrow h2, .siblingrow h2 { margin-bottom: 18px; }

/* PDP */
.nurseband { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: start; }
.nursephoto { position: sticky; top: 20px; background: var(--brickface); border: 1px solid var(--lacingline); border-radius: var(--curvy); padding: 26px; }
.nursephoto img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.nursebody .factline { margin: 16px 0; }
@media (max-width: 860px) { .nurseband { grid-template-columns: 1fr; } .nursephoto { position: static; } }
.specslab { max-width: 560px; }
.specslab th { width: 40%; font-weight: 700; }
.specslab th, .specslab td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--lacingline); font-size: .95rem; }

/* подборщик */
.agequiz { background: var(--brickface); border: 1px solid var(--lacingline); border-radius: var(--curvy); padding: 26px 30px 30px; margin-bottom: 26px; }
.agequiz h2 { font-size: 1.15rem; margin: 18px 0 12px; }
.agequiz h2:first-child { margin-top: 0; }
.quizrow { display: flex; flex-wrap: wrap; gap: 10px; }
.quizopt { background: var(--playmat); border: 2px solid var(--lacingline); border-radius: 14px; padding: 9px 18px; cursor: pointer; font-family: 'Andika', sans-serif; font-size: .95rem; text-align: left; }
.quizopt:hover { border-color: var(--fpsky); }
.quizopt.lit { border-color: var(--fpred); background: #fff; box-shadow: 0 3px 10px rgba(212, 0, 41, .14); }
.quizopt b { font-family: 'Varela Round', sans-serif; font-weight: 400; display: block; }
.quizopt span { font-size: .82rem; color: var(--crayonink-soft); }
.quizcount { color: var(--crayonink-soft); font-size: .92rem; margin-bottom: 16px; }
.quizempty { background: var(--fpyellow); border-radius: var(--curvy); padding: 20px 26px; max-width: 640px; }
.quizempty p { margin: 0; }

/* заметки */
.storywall { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.storytile { display: block; background: var(--brickface); border: 1px solid var(--lacingline); border-radius: var(--curvy); padding: 22px 24px; text-decoration: none; color: var(--crayonink); }
.storytile:hover { border-color: var(--fpred); }
.storytile b { font-family: 'Varela Round', sans-serif; font-weight: 400; display: block; margin-bottom: 8px; font-size: 1.06rem; }
.storytile span { font-size: .88rem; color: var(--crayonink-soft); }
.storytop .storysec p { max-width: 72ch; }

/* сервисные */
.faqpleat .storysec { max-width: 76ch; }
.faqpleat h2 { font-size: 1.2rem; }

/* ---------- подвал ---------- */
.quiltbase { background: var(--fpnavy); color: #cdd6e8; margin-top: 30px; }
.quiltbase .spanwide { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; padding-top: 48px; padding-bottom: 30px; }
.quiltbrand img { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .25)); }
.quiltbrand p, .quiltbrand address { font-size: .88rem; margin: 12px 0 0; }
.quiltbase a { color: #e8edf7; text-decoration: none; }
.quiltbase a:hover { color: var(--fpyellow); }
.quiltcol { display: flex; flex-direction: column; gap: 7px; }
.quiltcol h4 { color: var(--fpyellow); margin: 0 0 6px; font-size: .95rem; }
.quiltcol a { font-size: .9rem; }
.foothem { display: flex; flex-wrap: wrap; gap: 8px 30px; justify-content: space-between; border-top: 1px solid var(--fpnavy-2); padding-top: 18px; padding-bottom: 24px; }
.foothem p { font-size: .78rem; opacity: .72; margin: 0; max-width: 72ch; }
@media (max-width: 860px) { .quiltbase .spanwide { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .quiltbase .spanwide { grid-template-columns: 1fr; } }