/* layette.css — Gulicola Baby. Overlock + Livvic, taupe/rose from the brand banner.
   Шрифты лежат в этой же папке — url() голыми именами файлов. */

@font-face {
  font-family: 'Overlock';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(overlock-700.woff2) format('woff2');
}
@font-face {
  font-family: 'Overlock';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(overlock-900.woff2) format('woff2');
}
@font-face {
  font-family: 'Livvic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(livvic-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Livvic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(livvic-500.woff2) format('woff2');
}
@font-face {
  font-family: 'Livvic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(livvic-600.woff2) format('woff2');
}

:root {
  --creamtop: #faf6f1;
  --barkink: #3a322b;
  --barkdeep: #2b241e;
  --warmtaupe: #8a7355;
  --taupedeep: #6f5b42;
  --roseash: #c9a0a0;
  --rosepale: #f4e7e4;
  --mistline: #e7ddd2;
  --milk: #ffffff;
  --softshadow: 0 2px 10px rgba(58, 50, 43, .07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--creamtop);
  color: var(--barkink);
  font: 400 1rem/1.6 'Livvic', system-ui, sans-serif;
}
h1, h2, h3, h4 { font-family: 'Overlock', serif; font-weight: 900; line-height: 1.18; margin: 0 0 .6em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--taupedeep); }
img { max-width: 100%; height: auto; }
table { border-collapse: collapse; }

.creche { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* ---------- шапка: lull → brim → weanline ---------- */
.lull { background: var(--barkink); color: #efe7dd; font-size: .82rem; }
.lull .creche { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 34px; }
.lull-tag { letter-spacing: .04em; }
.lull-links { display: flex; gap: 16px; white-space: nowrap; }
.lull-links a { color: #efe7dd; text-decoration: none; }
.lull-links a:hover { color: var(--roseash); }

.brim { background: var(--milk); border-bottom: 1px solid var(--mistline); }
.brim .creche { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 76px; gap: 10px; }
.brim-mark { justify-self: center; display: block; line-height: 0; }
.brim-mark img { height: 46px; width: auto; }
.brim-side { justify-self: end; }
.brim-flow {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: .88rem;
  color: var(--taupedeep); border: 2px solid var(--warmtaupe); border-radius: 999px; padding: .42rem 1rem;
}
.brim-flow:hover { background: var(--warmtaupe); color: #fff; }

.rattle { justify-self: start; display: none; background: none; border: 0; padding: 8px 4px; cursor: pointer; }
.rattle span { display: block; width: 24px; height: 3px; margin: 5px 0; background: var(--barkink); border-radius: 2px; }

.weanline { background: var(--warmtaupe); }
.weanline ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; }
.weanline a {
  display: block; color: #fff; text-decoration: none; font-weight: 500; font-size: .9rem;
  padding: .62rem 1.05rem; letter-spacing: .02em;
}
.weanline a:hover, .weanline .is-fed a { background: var(--taupedeep); }

@media (max-width: 860px) {
  .lull-tag { display: none; }
  .lull .creche { justify-content: center; }
  .rattle { display: block; }
  .brim-flow { padding: .36rem .7rem; font-size: .8rem; }
  .weanline { display: none; }
  body.rattled .weanline { display: block; }
  .weanline ul { flex-direction: column; gap: 0; }
  .weanline a { padding: .7rem 20px; border-bottom: 1px solid rgba(255,255,255,.14); }
}

/* ---------- секции ---------- */
.swath { padding: 44px 0; }
.swath--tint { background: var(--rosepale); }
.swath--dark { background: var(--barkink); color: #efe7dd; }
.swath--dark h2 { color: #fff; }
.swath-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.swath-head h2 { margin: 0; }
.swath-head a { font-weight: 600; font-size: .9rem; white-space: nowrap; }
.swath-lead { max-width: 640px; color: #6b5f52; margin-bottom: 22px; }
.swath--dark .swath-lead { color: #cfc4b6; }

/* ---------- карточки ---------- */
.coo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 980px) { .coo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .coo-grid { grid-template-columns: repeat(2, 1fr); } }

.coo {
  display: flex; flex-direction: column; background: var(--milk);
  border: 1px solid var(--mistline); border-radius: 14px; overflow: hidden;
  box-shadow: var(--softshadow); transition: transform .15s ease;
}
.coo:hover { transform: translateY(-3px); }
.coo-pic { position: relative; aspect-ratio: 1; min-height: 0; background: #fff; }
.coo-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.milkdot {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  background: var(--roseash); color: #fff; font-size: .72rem; font-weight: 600;
  border-radius: 999px; padding: .18rem .6rem; letter-spacing: .03em;
}
.coo-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.coo-name { font-family: 'Overlock', serif; font-weight: 700; font-size: 1rem; line-height: 1.3; margin: 0 0 .4rem; }
.coo-name a { color: var(--barkink); text-decoration: none; }
.coo-name a:hover { color: var(--taupedeep); }
.coo-short { font-size: .85rem; color: #6b5f52; margin: 0 0 .8rem; }
.ouncebar { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: .5rem; }
.ouncebar-price { font-family: 'Overlock', serif; font-weight: 900; font-size: 1.2rem; }
.ouncebar-stars { font-size: .8rem; color: #6b5f52; white-space: nowrap; }
.coo .pour-buy { margin-top: .75rem; }

/* ---------- кнопки ---------- */
.pour, .pour-ghost, .pour-buy {
  display: inline-block; font: 600 .92rem/1 'Livvic', sans-serif; text-decoration: none;
  border-radius: 999px; padding: .78rem 1.5rem; cursor: pointer; text-align: center; border: 0;
}
.pour { background: var(--warmtaupe); color: #fff; }
.pour:hover { background: var(--taupedeep); }
.pour-ghost { background: transparent; color: var(--barkink); border: 2px solid var(--warmtaupe); padding: .66rem 1.4rem; }
.pour-ghost:hover { background: var(--warmtaupe); color: #fff; }
.swath--dark .pour-ghost, .croon .pour-ghost { color: #efe7dd; border-color: var(--roseash); }
.swath--dark .pour-ghost:hover, .croon .pour-ghost:hover { background: var(--roseash); color: var(--barkink); }
.pour-buy { display: block; width: 100%; background: var(--warmtaupe); color: #fff; padding: .68rem 1rem; font-size: .88rem; }
.pour-buy:hover { background: var(--taupedeep); }

/* ---------- hero ---------- */
.croon { background: linear-gradient(135deg, var(--barkdeep), #4b3d2e 55%, var(--warmtaupe)); color: #f5eee6; padding: 56px 0 48px; }
.croon h1 { color: #fff; max-width: 640px; }
.croon-lead { max-width: 560px; color: #e4d8ca; font-size: 1.06rem; }
.croon-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 34px; }
.coo-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.coo-rail .coo { border: 0; }
.coo-rail .coo-name { font-size: .9rem; }
@media (max-width: 860px) {
  .coo-rail { display: flex; overflow-x: auto; gap: 12px; padding-bottom: 8px; }
  .coo-rail .coo { flex: 0 0 190px; }
}

/* ---------- полоса USP ---------- */
.warmband { background: var(--milk); border-bottom: 1px solid var(--mistline); padding: 26px 0; }
.warmband .creche { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.warmband h3 { font-size: .98rem; margin-bottom: .25rem; }
.warmband p { font-size: .84rem; color: #6b5f52; margin: 0; }
@media (max-width: 860px) { .warmband .creche { grid-template-columns: repeat(2, 1fr); } }

/* ---------- чипсы ---------- */
.sipband { display: flex; flex-wrap: wrap; gap: 10px; }
.sipband a {
  text-decoration: none; font-weight: 500; font-size: .88rem; color: var(--barkink);
  background: var(--milk); border: 1px solid var(--mistline); border-radius: 999px; padding: .5rem 1.05rem;
}
.sipband a:hover { border-color: var(--warmtaupe); color: var(--taupedeep); }

/* ---------- плитки категорий ---------- */
.hutchband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 860px) { .hutchband { grid-template-columns: repeat(2, 1fr); } }
.hutchcard {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0;
  aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; text-decoration: none;
  background: var(--milk); border: 1px solid var(--mistline); box-shadow: var(--softshadow);
}
.hutchcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14px 14px 58px; }
.hutchcard strong {
  position: relative; z-index: 1; background: rgba(58, 50, 43, .88); color: #fff;
  font-family: 'Overlock', serif; font-weight: 700; font-size: 1rem; padding: .6rem .9rem;
}
.hutchcard span { position: relative; z-index: 1; background: rgba(58, 50, 43, .88); color: #d8cbbc; font-size: .78rem; padding: 0 .9rem .55rem; }

/* ---------- таблицы-приманки ---------- */
.materialboard, .stagechart { width: 100%; background: var(--milk); border: 1px solid var(--mistline); border-radius: 12px; overflow: hidden; font-size: .9rem; }
.materialboard th, .materialboard td, .stagechart th, .stagechart td { padding: .62rem .85rem; text-align: left; border-bottom: 1px solid var(--mistline); }
.materialboard thead th, .stagechart thead th { background: var(--warmtaupe); color: #fff; font-weight: 600; border-bottom: 0; }
.materialboard tbody tr:last-child td, .stagechart tbody tr:last-child td { border-bottom: 0; }
.materialboard tbody th { font-weight: 600; background: var(--rosepale); }
.boardwrap { overflow-x: auto; }
.boardwrap .materialboard, .boardwrap .stagechart { min-width: 560px; }

/* ---------- статистика ---------- */
.dropline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; }
@media (max-width: 700px) { .dropline { grid-template-columns: repeat(2, 1fr); } }
.dropline strong { display: block; font-family: 'Overlock', serif; font-weight: 900; font-size: 2rem; color: var(--roseash); }
.dropline span { font-size: .85rem; color: #cfc4b6; }

/* ---------- спотлайт ---------- */
.spotcoo { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; background: var(--milk); border: 1px solid var(--mistline); border-radius: 18px; padding: 30px; }
@media (max-width: 780px) { .spotcoo { grid-template-columns: 1fr; } }
.spotcoo-pic { position: relative; aspect-ratio: 1; min-height: 0; }
.spotcoo-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.spotcoo-kicker { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--roseash); margin-bottom: .4rem; }

/* ---------- отзывы ---------- */
.lullaby { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 780px) { .lullaby { grid-template-columns: 1fr; } }
.lullaby blockquote {
  margin: 0; background: var(--milk); border: 1px solid var(--mistline); border-radius: 14px;
  padding: 20px 22px; font-size: .92rem; box-shadow: var(--softshadow);
}
.lullaby blockquote::before { content: '\201C'; display: block; font: 900 2.4rem/0.6 'Overlock', serif; color: var(--roseash); margin-bottom: .5rem; }
.lullaby footer { margin-top: .8rem; font-size: .8rem; color: #6b5f52; }
.lullaby .lull-stars { color: var(--warmtaupe); letter-spacing: .1em; }

/* ---------- финальная CTA ---------- */
.nightcap { text-align: center; }
.nightcap h2 { max-width: 620px; margin-inline: auto; }
.nightcap p { max-width: 540px; margin-inline: auto; }
.nightcap .croon-ctas { justify-content: center; }

/* ---------- крошки ---------- */
.totline { font-size: .8rem; color: #8a7c6c; padding: 14px 0 0; }
.totline a { color: #8a7c6c; text-decoration: none; }
.totline a:hover { color: var(--taupedeep); text-decoration: underline; }

/* ---------- карточка товара ---------- */
.nursery { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 36px; padding: 26px 0 10px; }
@media (max-width: 860px) { .nursery { grid-template-columns: 1fr; } }
.nursery-pic { position: relative; aspect-ratio: 1; min-height: 0; background: var(--milk); border: 1px solid var(--mistline); border-radius: 16px; }
.nursery-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 22px; }
.nursery h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.nursery-stars { color: #6b5f52; font-size: .9rem; margin-bottom: 1rem; }
.nursery-stars b { color: var(--warmtaupe); }
.nursery-buy {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--milk); border: 1px solid var(--mistline); border-radius: 14px; padding: 16px 20px; margin: 18px 0;
}
.nursery-buy .ouncebar-price { font-size: 1.7rem; }
.nursery-buy .pour-buy { width: auto; flex: 1; min-width: 200px; padding: .85rem 1.4rem; font-size: .95rem; }
.nursery-note { font-size: .78rem; color: #8a7c6c; margin-top: -8px; }

.sibset { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.sibset a, .sibset strong {
  font-size: .82rem; font-weight: 500; text-decoration: none; border-radius: 999px; padding: .32rem .85rem;
  border: 1px solid var(--mistline); color: var(--barkink); background: var(--milk);
}
.sibset strong { border-color: var(--warmtaupe); background: var(--warmtaupe); color: #fff; }
.sibset a:hover { border-color: var(--warmtaupe); }

.spoonlist { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 8px; padding: 0; list-style: none; }
@media (max-width: 640px) { .spoonlist { grid-template-columns: 1fr; } }
.spoonlist li { background: var(--milk); border: 1px solid var(--mistline); border-radius: 12px; padding: 15px 17px; }
.spoonlist h3 { font-size: .95rem; margin-bottom: .3rem; }
.spoonlist p { font-size: .85rem; color: #6b5f52; margin: 0; }

/* ---------- подборщик /flow ---------- */
.flowdial { background: var(--milk); border: 1px solid var(--mistline); border-radius: 16px; padding: 26px; margin-bottom: 30px; }
.flowrow { margin-bottom: 18px; }
.flowrow > span { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .55rem; }
.flowrow-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.flowrow-opts button {
  font: 500 .88rem/1 'Livvic', sans-serif; color: var(--barkink); background: var(--creamtop);
  border: 1px solid var(--mistline); border-radius: 999px; padding: .55rem 1.05rem; cursor: pointer;
}
.flowrow-opts button:hover { border-color: var(--warmtaupe); }
.flowrow-opts button.is-picked { background: var(--warmtaupe); border-color: var(--warmtaupe); color: #fff; }
.flow-answer { border-top: 1px solid var(--mistline); padding-top: 18px; }
.flow-answer[hidden] { display: none !important; }
.flow-verdict { background: var(--rosepale); border-radius: 10px; padding: 14px 18px; font-size: .95rem; margin-bottom: 18px; }
.flow-verdict b { font-family: 'Overlock', serif; }

/* ---------- гайды ---------- */
.primer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .primer-grid { grid-template-columns: 1fr; } }
.primercard {
  display: flex; flex-direction: column; background: var(--milk); border: 1px solid var(--mistline);
  border-radius: 14px; padding: 22px; text-decoration: none; box-shadow: var(--softshadow);
}
.primercard h3 { color: var(--barkink); }
.primercard p { font-size: .87rem; color: #6b5f52; margin: 0 0 .9rem; }
.primercard em { margin-top: auto; font-style: normal; font-weight: 600; font-size: .85rem; color: var(--taupedeep); }
.primerbody { max-width: 760px; }
.primerbody h2 { margin-top: 1.6em; }
.primerbody ul, .primerbody ol { padding-left: 1.3em; }
.primerbody li { margin-bottom: .35em; }

/* ---------- промо-дуэт ---------- */
.nookduo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 780px) { .nookduo { grid-template-columns: 1fr; } }
.nooktile {
  display: block; border-radius: 18px; padding: 30px 28px;
  text-decoration: none; box-shadow: var(--softshadow);
}
.nooktile h3 { font-family: 'Overlock', serif; font-weight: 900; font-size: 1.35rem; margin: .55rem 0 .6rem; }
.nooktile p { font-size: .93rem; margin: 0 0 1rem; }
.nooktile em { font-style: normal; font-weight: 600; font-size: .88rem; }
.nooktile:hover h3 { text-decoration: underline; }
.nook-kicker { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.nooktile--dusk { background: linear-gradient(135deg, var(--barkdeep), #4b3d2e); color: #e4d8ca; }
.nooktile--dusk h3 { color: #fff; }
.nooktile--dusk .nook-kicker, .nooktile--dusk em { color: var(--roseash); }
.nooktile--rose { background: var(--rosepale); border: 1px solid var(--mistline); color: var(--barkink); }
.nooktile--rose .nook-kicker, .nooktile--rose em { color: var(--taupedeep); }

/* ---------- шаги + таблица материалов ---------- */
.ladlecols { display: grid; grid-template-columns: 5fr 7fr; gap: 26px; align-items: start; }
@media (max-width: 860px) { .ladlecols { grid-template-columns: 1fr; } }
.ladlesteps {
  background: var(--milk); border: 1px solid var(--mistline); border-radius: 14px;
  padding: 22px 24px; box-shadow: var(--softshadow);
}
.ladlesteps h3 { margin-bottom: .7rem; }
.ladlesteps ol { margin: 0; padding-left: 1.2rem; font-size: .92rem; }
.ladlesteps li { margin-bottom: .7rem; }
.ladlesteps li:last-child { margin-bottom: 0; }

/* ---------- три ценности ---------- */
.cradleband { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; }
@media (max-width: 780px) { .cradleband { grid-template-columns: 1fr; } }
.cradlecell {
  background: var(--milk); border: 1px solid var(--mistline); border-radius: 14px;
  padding: 26px 22px; box-shadow: var(--softshadow);
}
.cradlecell svg { color: var(--warmtaupe); margin-bottom: 10px; }
.cradlecell h3 { font-size: 1.05rem; margin-bottom: .45rem; }
.cradlecell p { font-size: .9rem; color: #6b5f52; margin: 0; }

/* ---------- уход Do / Don't ---------- */
.burpcols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 780px) { .burpcols { grid-template-columns: 1fr; } }
.burp-do, .burp-dont {
  background: var(--milk); border: 1px solid var(--mistline); border-radius: 14px;
  padding: 22px 24px; box-shadow: var(--softshadow);
}
.burp-do { border-top: 4px solid var(--warmtaupe); }
.burp-dont { border-top: 4px solid var(--roseash); }
.burp-do h3, .burp-dont h3 { margin-bottom: .6rem; }
.burp-do ul, .burp-dont ul { margin: 0; padding-left: 1.15rem; font-size: .92rem; }
.burp-do li, .burp-dont li { margin-bottom: .55rem; }

/* ---------- миссия ---------- */
.hushband { text-align: center; }
.hushband h2 { color: #fff; }
.hushband p { max-width: 640px; margin: 0 auto; color: #e4d8ca; }

/* ---------- длинная заметка ---------- */
.pantrynote { max-width: 880px; }
.pantrynote h3 { margin-top: 1.6rem; margin-bottom: .6rem; }
.pantrynote ul { padding-left: 1.2rem; font-size: .95rem; }
.pantrynote li { margin-bottom: .45rem; }

/* ---------- сервисные страницы ---------- */
.readfold { max-width: 760px; padding-bottom: 30px; }
.readfold h2 { margin-top: 1.5em; }

/* ---------- подвал ---------- */
.tuck { background: var(--barkdeep); color: #cfc4b6; font-size: .88rem; margin-top: 0; }
.tuck-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; padding: 42px 0 30px; }
@media (max-width: 860px) { .tuck-cols { grid-template-columns: 1fr 1fr; } }
.tuck h4 { color: #fff; font-size: .95rem; margin-bottom: .7rem; }
.tuck ul { list-style: none; margin: 0; padding: 0; }
.tuck li { margin-bottom: .45rem; }
.tuck a { color: #cfc4b6; text-decoration: none; }
.tuck a:hover { color: var(--roseash); }
.tuck-mark img { height: 40px; width: auto; margin-bottom: 12px; }
.tuck-addr { margin-top: 10px; font-size: .8rem; color: #a1958a; line-height: 1.5; }
.tuck-burp { border-top: 1px solid rgba(255,255,255,.12); padding: 16px 0; font-size: .76rem; color: #a1958a; }
.tuck-burp p { margin: 0 0 .4rem; }