/* Layout: "Leo's room" — a cool milk-white ground, duvet-blue bands with white polka dots, Leo's photos in soft
   blanket-shaped frames, products on a 2–4 column grid. Palette taken from Leo: fawn coat, pink ears, ink nose,
   and the blue polka-dot duvet he sleeps under. */
:root {
  --ground: #F6F7FB; --card: #FFFFFF; --mist: #ECEFF8; --line: #DCE0EE;
  --ink: #24232F; --muted: #5B5E73; --blue: #5566AE; --blue-deep: #3B4787; --on-blue: #FFFFFF;
  --fawn: #E7C79B; --fawn-soft: #F6E8D3; --pink: #E8A39C; --oak: #8A5A2E;
  --dot: rgba(255, 255, 255, .88); --ok: #2E7A50; --warn: #9C5B16;
  --f-display: "Fredoka", "Arial Rounded MT Bold", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  --f-body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --r: 18px; --wrap: 1140px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --ground: #14151D; --card: #1C1E29; --mist: #222536; --line: #33374B;
  --ink: #EEEDF3; --muted: #A9ACBF; --blue: #8E9DE2; --blue-deep: #B9C3F1; --on-blue: #14151D;
  --fawn: #E2C291; --fawn-soft: #3A3226; --pink: #E9A9A2; --oak: #D7A777;
  --dot: rgba(20, 21, 29, .55); --ok: #6CC490; --warn: #E3A25A; color-scheme: dark } }
:root[data-theme="dark"] {
  --ground: #14151D; --card: #1C1E29; --mist: #222536; --line: #33374B;
  --ink: #EEEDF3; --muted: #A9ACBF; --blue: #8E9DE2; --blue-deep: #B9C3F1; --on-blue: #14151D;
  --fawn: #E2C291; --fawn-soft: #3A3226; --pink: #E9A9A2; --oak: #D7A777;
  --dot: rgba(20, 21, 29, .55); --ok: #6CC490; --warn: #E3A25A; color-scheme: dark }

* { box-sizing: border-box }
body { margin: 0; background: var(--ground); color: var(--ink); font: 17px/1.6 var(--f-body) }
a { color: inherit }
img, svg, video { max-width: 100% }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; line-height: 1.12; text-wrap: balance; margin: 0; letter-spacing: -.01em }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem) } h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem) } h3 { font-size: 1.15rem }
p { margin: 0 }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.eyebrow { font: 600 .78rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--blue) }
.num, .mono { font-variant-numeric: tabular-nums }
.note { color: var(--muted); font-size: .95rem }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 8px }
.dots { background-color: var(--blue); background-image: radial-gradient(circle, var(--dot) 0 5px, transparent 5.5px); background-size: 36px 36px; background-position: 0 0 }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }

/* header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--ground) }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--ground) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line) }
.top .wrap { display: flex; align-items: center; gap: 18px; padding-block: 10px; flex-wrap: wrap }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; font: 600 1.5rem/1 var(--f-display); letter-spacing: -.01em }
.logo svg { width: 38px; height: 38px; flex: none }
.nav { display: flex; gap: 18px; flex-wrap: wrap; flex: 1 1 auto }
.nav a { white-space: nowrap; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .98rem }
.nav a[aria-current="page"], .nav a:hover { color: var(--ink) }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 3px; text-underline-offset: 6px }
.tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
select, input, textarea { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100% }
.tools select { width: auto; max-width: 220px; padding: 7px 10px; font-size: .92rem }
.cart-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 700; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--ground) }
.cart-link .n { background: var(--fawn); color: #24232F; border-radius: 999px; min-width: 22px; text-align: center; padding: 0 6px; font-size: .82rem; font-variant-numeric: tabular-nums }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none; font: 700 1rem/1 var(--f-body); padding: 15px 24px; border-radius: 999px; background: var(--blue); color: var(--on-blue); transition: transform .15s, background .15s }
.btn:hover { transform: translateY(-1px); background: var(--blue-deep) }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink) }
.btn.ghost:hover { background: var(--mist) }
.btn.sm { padding: 10px 16px; font-size: .92rem }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none }
.link-btn { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: .9rem; padding: 0 }

/* hero */
.hero { padding-block: 44px 56px; overflow: hidden }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center }
.hero .lead { font-size: 1.2rem; color: var(--muted); max-width: 36ch; margin-top: 18px }
.hero h1 em { font-style: normal; color: var(--blue) }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px }
.chip { font-size: .86rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line) }
.hero-art { position: relative; justify-self: center; width: min(420px, 100%) }
.hero-art .blanket { position: absolute; inset: 7% -9% -6% 9%; border-radius: 46% 54% 42% 58% / 52% 40% 60% 48%; z-index: 0 }
.leo-disc { position: relative; z-index: 1; aspect-ratio: 1; width: 100%; border-radius: 50%; background: var(--card); display: grid; place-items: center; box-shadow: 0 20px 50px -24px rgba(36, 35, 47, .45) }
.leo-disc svg { width: 74%; height: auto; margin-top: -4% }
.leo-disc.sm { width: 180px; box-shadow: none; background: var(--mist) }
.story-art { border-radius: 32px; padding: 12%; display: grid; place-items: center }
.story-art .leo-disc { width: 100%; max-width: 380px }
.quote-mark { width: 180px; height: 180px; border-radius: 50%; background: var(--card); display: grid; place-items: center; border: 6px solid var(--card) }
.quote-mark svg { width: 78% }
.leo-note svg { width: 48px; height: 48px }
.hero-art .tag { position: absolute; z-index: 2; left: -18px; bottom: 26px; background: var(--card); border-radius: 16px; padding: 10px 14px; font-size: .9rem; box-shadow: 0 10px 30px -14px rgba(36, 35, 47, .5); max-width: 220px }
.hero-art .tag b { font-family: var(--f-display); font-weight: 600 }

/* sections */
.band { padding-block: 64px }
.band.alt { background: var(--mist) }
.head-row { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px }
.head-row p { max-width: 60ch }

/* product grid */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s }
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -22px rgba(36, 35, 47, .45) }
.card .pic { position: relative; display: block; aspect-ratio: 1; background: var(--mist) }
.card .pic img { width: 100%; height: 100%; object-fit: cover; display: block }
.badge { position: absolute; z-index: 1; top: 12px; left: 12px; font-size: .78rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--fawn); color: #24232F }
.card .body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1 }
.card .type { font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em }
.card h3 a { text-decoration: none }
.card .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px }
.price { font: 600 1.25rem/1.15 var(--f-display); font-variant-numeric: tabular-nums }
.price small { display: block; font: 500 .76rem/1.3 var(--f-body); color: var(--muted) }

/* family / promise blocks */
.promise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px }
.promise > div { background: var(--card); border-radius: var(--r); padding: 24px; border: 1px solid var(--line); display: grid; gap: 10px; align-content: start }
.promise .ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--fawn-soft); font: 600 1.2rem/1 var(--f-display); color: var(--oak) }
.leo-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px }
.leo-strip figure { margin: 0 }
.leo-strip img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 22px; display: block }
.leo-strip figcaption { font-size: .85rem; color: var(--muted); margin-top: 6px }
.quote-band { color: var(--on-blue) }
.quote-band .wrap { padding-block: 72px; display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center }
.quote-band img { width: 180px; height: 180px; object-fit: cover; border-radius: 50%; border: 6px solid var(--card) }
.quote-band blockquote { margin: 0; background: var(--card); color: var(--ink); border-radius: 26px; padding: 28px 30px; font: 500 clamp(1.2rem, 2.4vw, 1.6rem)/1.35 var(--f-display); max-width: 40ch }
.quote-band cite { display: block; margin-top: 12px; font: 600 .9rem/1 var(--f-body); font-style: normal; color: var(--muted) }

/* world */
.regions { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px }
.region { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px }
.region b { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem }
.region p { font-size: .9rem; color: var(--muted); margin-top: 6px }

/* story page */
.story-hero { padding-block: 48px 24px }
.story-hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center }
.story-hero img { height: auto; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; display: block }
.prose { max-width: 68ch; display: grid; gap: 16px; padding-block: 40px 64px }
.prose h2 { margin-top: 18px }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.pair img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 22px; display: block }
.timeline { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none }
.timeline li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 16px }
.timeline li b { font-family: var(--f-display); font-weight: 600; color: var(--blue) }
.sign { font: 500 1.35rem/1.3 var(--f-display); color: var(--blue) }

/* reviews */
.empty-reviews { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 26px }
.empty-reviews img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50% }
.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.rules > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; display: grid; gap: 8px; align-content: start }
.stars { display: flex; gap: 6px }
.stars button { font-size: 1.7rem; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--line); padding: 2px }
.stars button[aria-pressed="true"] { color: var(--fawn) }
.stars button[aria-pressed="true"]:not(:hover) { text-shadow: 0 0 0 var(--oak) }

/* product page */
.pdp { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; padding-block: 36px 56px }
.media .stage { aspect-ratio: 1; background: var(--mist); border-radius: 24px; overflow: hidden }
.media .stage img, .media .stage video { width: 100%; height: 100%; object-fit: cover; display: block }
.thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap }
.th { width: 76px; height: 76px; border-radius: 14px; overflow: hidden; border: 2px solid var(--line); background: var(--card); cursor: pointer; padding: 0; display: grid; place-items: center; font-weight: 700; font-size: .8rem; color: var(--ink) }
.th img { width: 100%; height: 100%; object-fit: cover }
.info { display: grid; gap: 16px; align-content: start; min-width: 0 }
.info ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px }
.info .price { font-size: 2rem }
.buy { display: flex; gap: 10px; flex-wrap: wrap; align-items: center }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--card) }
.qty button { width: 40px; height: 44px; border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: var(--ink) }
.qty span { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums }
.specs { width: 100%; border-collapse: collapse; font-size: .95rem }
.specs th, .specs td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top }
.specs th { width: 38%; color: var(--muted); font-weight: 600 }
.notice { background: var(--fawn-soft); border-radius: 14px; padding: 12px 16px; font-size: .93rem }
.leo-note { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; background: var(--mist); border-radius: 16px; padding: 12px 14px; font-size: .93rem }
.leo-note img { width: 56px; height: 56px; object-fit: cover; border-radius: 50% }

/* filters */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px }
.filters button { font: 600 .92rem/1 var(--f-body); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink) }

/* cart / checkout */
.two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; padding-bottom: 56px }
.lines { display: grid; gap: 12px }
.line { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px }
.line .mini { width: 76px; height: 76px; object-fit: cover; border-radius: 12px }
.line .meta { min-width: 0 }
.line .end { display: grid; gap: 6px; justify-items: end }
.summary { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: grid; gap: 10px; position: sticky; top: 90px }
.summary .r { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem }
.summary .total { border-top: 1px solid var(--line); padding-top: 10px; font-weight: 700; font-size: 1.1rem }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem }
.form .full { grid-column: 1 / -1 }
.empty, .ok-box { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 32px; display: grid; gap: 14px; justify-items: start }
.code { background: var(--mist); border-radius: 12px; padding: 14px; overflow-x: auto; font-size: .8rem; max-width: 100% }
.table-wrap { overflow-x: auto }
table.data { width: 100%; border-collapse: collapse; font-size: .93rem }
table.data th, table.data td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line) }
table.data th { font-weight: 700; background: var(--mist) }
details { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px }
summary { cursor: pointer; font-weight: 700 }
details p { margin-top: 10px }

/* footer */
footer { background: var(--ink); color: var(--ground); margin-top: 0 }
footer .wrap { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 28px; padding-block: 44px 20px }
footer .col { display: grid; gap: 8px; align-content: start }
footer a { text-decoration: none; opacity: .85 } footer a:hover { opacity: 1 }
footer .note { color: color-mix(in srgb, var(--ground) 70%, transparent) }
footer .logo svg { width: 42px; height: 42px }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--ground); padding: 12px 18px; border-radius: 999px; font-weight: 600; z-index: 50 }

@media (max-width: 960px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .leo-strip { grid-template-columns: repeat(3, minmax(0, 1fr)) } .leo-strip figure:nth-child(n+4) { display: none }
}
@media (max-width: 760px) {
  .hero .wrap, .story-hero .wrap, .pdp, .two, .quote-band .wrap, .empty-reviews { grid-template-columns: 1fr }
  .hero-art { width: min(340px, 86%) }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
  .promise, .rules { grid-template-columns: 1fr }
  .quote-mark { width: 120px; height: 120px }
  .leo-disc.sm { width: 140px }
  footer .wrap { grid-template-columns: 1fr 1fr } footer .col:first-child { grid-column: 1 / -1 }
  .form { grid-template-columns: 1fr }
  .summary { position: static }
  .tools select { max-width: 150px }
  .nav { order: 3; flex-basis: 100%; gap: 14px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px }
  .timeline li { grid-template-columns: 1fr; gap: 4px }
  .empty-reviews img { width: 140px }
  .band { padding-block: 44px }
}
@media (max-width: 420px) { .card .body { padding: 12px } .card .row { flex-direction: column; align-items: stretch } .price { font-size: 1.1rem } }

/* breadcrumbs, guides, product details, consent */
.crumbs { font-size: .88rem; color: var(--muted); padding-top: 20px; display: flex; gap: 6px; flex-wrap: wrap }
.crumbs a { color: var(--muted) }
.pdp-more .prose { padding-block: 0; max-width: 72ch }
.article { padding-top: 16px }
.article h2 { margin-top: 26px } .article ol, .article ul { margin: 0; padding-left: 1.3em; display: grid; gap: 8px }
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 12px }
.post-card { display: grid; gap: 8px; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px }
.post-card b { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem }
.post-card:hover { border-color: var(--blue) }
.consent { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; box-shadow: 0 18px 40px -20px rgba(36, 35, 47, .5); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; max-width: 760px; margin: 0 auto }
.consent p { flex: 1 1 320px; font-size: .93rem }
/* delivery picker (shipping.html) */
.ship-pick{display:grid;gap:14px;margin:24px 0;position:static}
.ship-pick label{display:grid;gap:6px;font-weight:600}
.ship-pick select{font:inherit;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);width:100%}
.sp-out{display:grid;gap:8px}
.regions{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 32px;margin:24px 0}
.region h3{margin:16px 0 8px}
.country-list{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.country-list li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:6px 0}
.map-box{border:1px solid var(--line);border-radius:20px;background:var(--card);min-height:120px;display:grid;place-items:center;gap:8px;padding:16px;margin:16px 0;text-align:center}
.map-box iframe{width:100%;height:380px;border:0;border-radius:14px}