:root {
  --pink: #da436a;
  --pink-deep: #a92a4d;
  --pink-soft: #f9e2e8;
  --paper: #fbf6f0;
  --sand: #f0e5d8;
  --plum: #2a1b26;
  --ink: #3a2c34;
  --muted: #76676f;
  --line: #e4d6cf;
  --night: #17122a;
  --glow: #b8ff9f;
  /* digits come from a Playfair subset (lining figures); letters fall through to Cormorant */
  --serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", system-ui, sans-serif;
  --script: "Caveat", cursive;
  --house: polygon(50% 0, 100% 24%, 100% 100%, 0 100%, 0 24%);
  --stitch: repeating-linear-gradient(90deg, var(--pink) 0 9px, transparent 9px 16px);
  --pad: 16px;
  --rad: 6px;
  --pill: 6px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
/* every element, so the serif font never falls back to old-style (descending) figures */
* { font-variant-numeric: lining-nums; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.6 var(--sans); }
/* faint paper grain, so flat colour feels like printed stock */
body::before { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pink-deep); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--plum); line-height: 1.05; margin: 0 0 .45em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.7rem, 11.5vw, 5.4rem); }
h2 { font-size: clamp(2rem, 7.4vw, 3.3rem); }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--pink); }
.lede { color: var(--muted); font-size: 1rem; max-width: 34em; margin: 0 0 1.3em; }
.kicker { margin: 0 0 6px; font-size: .78rem; font-weight: 600; color: var(--pink-deep); }
.script { font: 600 1.7rem/1 var(--script); color: var(--pink); }
svg { width: 17px; height: 17px; flex: none; }

/* catalogue-style section numbers + running-stitch rule (a Kantha nod) */
.num { display: flex; align-items: baseline; gap: 10px; width: max-content; max-width: 100%; margin: 0 0 14px; padding-bottom: 9px; font-size: .78rem; font-weight: 600; color: var(--pink-deep); background: var(--stitch) bottom / 100% 2px no-repeat; }
.num b { font: italic 500 1.25rem/1 var(--serif); }
.sec-head { margin-bottom: 24px; }
.sec-head.row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.sec-head h2 { margin: 0; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 13px 24px; background: var(--pink); color: #fff; border: 0; border-radius: var(--pill); font: 600 .86rem var(--sans); text-decoration: none; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 16px -6px rgba(169, 42, 77, .55); }
/* Pinterest "stroke UI" pill: arrow in a circle at the end */
.btn-arrow { padding-right: 8px; gap: 14px; }
.btn-arrow::after { content: "→"; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 4px; background: #fff; color: var(--pink-deep); font-size: .95rem; transition: transform .2s; }
.btn-ghost { background: #fff; color: var(--plum); box-shadow: inset 0 0 0 1.5px var(--plum), 0 4px 12px -6px rgba(42, 27, 38, .3); }
.btn-sm { width: 100%; min-height: 42px; padding: 10px 8px; font-size: .74rem; gap: 6px; }
.btn-sm svg { width: 14px; height: 14px; }
.btn-soft { background: var(--pink-soft); color: var(--pink-deep); box-shadow: inset 0 0 0 1px rgba(218, 67, 106, .25); }
.cta { display: flex; flex-wrap: wrap; gap: 10px; }
.center { justify-content: center; }
.link { font-weight: 600; font-size: .86rem; text-decoration: none; white-space: nowrap; }

/* header: one row; on phones the logo is "Home" */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 7px var(--pad); background: var(--pink); box-shadow: 0 2px 0 var(--pink-deep); }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; color: #fff; text-decoration: none; font: 600 .86rem/1.05 var(--serif); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.brand img { width: auto; height: 48px; }
.brand small { display: block; font: 600 .54rem/1.5 var(--sans); letter-spacing: .38em; color: #ffe3ea; }
.top nav { display: flex; gap: 14px; }
.top nav a { color: #fff; text-decoration: none; font-size: .82rem; font-weight: 500; padding: 4px 0; border-bottom: 1.5px solid transparent; }
.top nav a:first-child { display: none; }
.top nav a[aria-current] { color: #fff; border-color: #fff; }
.top nav a:hover { border-color: rgba(255, 255, 255, .6); }
.top-wa { display: none; }
/* white header state (homepage, over the pink hero) */
.top { transition: background-color .3s, box-shadow .3s; }
.brand .m-light { display: none; }
.top.light { background: #fff; box-shadow: 0 1px 0 var(--line); }
.top.light .m-dark { display: none; }
.top.light .m-light { display: block; }
.top.light .brand { color: var(--plum); }
.top.light .brand small { color: var(--pink-deep); }
.top.light nav a { color: var(--plum); }
.top.light nav a[aria-current] { color: var(--pink-deep); border-color: var(--pink); }
.top.light nav a:hover { border-color: var(--pink); }

main { overflow: hidden; }
.sec { max-width: 1240px; margin: 0 auto; padding: 44px var(--pad); }

.house { clip-path: var(--house); aspect-ratio: 4 / 4.4; background: var(--pink-soft); }
.house img { width: 100%; height: 100%; object-fit: cover; }
.sticker { position: absolute; margin: 0; width: 38%; background: #fff; padding: 7px 7px 2px; box-shadow: 0 12px 28px rgba(42, 27, 38, .18); }
.sticker::before, .polaroid::before { content: ""; position: absolute; top: -9px; left: 50%; width: 46%; height: 18px; transform: translateX(-50%) rotate(-3deg); background: rgba(218, 67, 106, .28); }
.sticker img { aspect-ratio: 1; object-fit: cover; }
.sticker figcaption { padding: 4px 0 2px; text-align: center; font: 600 1.05rem/1.4 var(--script); color: var(--pink-deep); }

/* marquee ribbon */
.ribbons { position: relative; height: 92px; margin: 14px -12px 6px; }
.ribbon { position: absolute; left: 0; right: 0; top: 22px; background: var(--pink); color: #fff; padding: 13px 0; transform: rotate(-2.5deg); overflow: hidden; box-shadow: 0 10px 22px -12px rgba(169, 42, 77, .6); }
.ribbon-track { display: flex; align-items: center; gap: 22px; width: max-content; white-space: nowrap; font: italic 500 1.35rem var(--serif); animation: marquee 38s linear infinite; }
.ribbon i { font-style: normal; font-size: .9rem; opacity: .8; }
@keyframes marquee { to { transform: translateX(-50%); } }

.rail::-webkit-scrollbar, .chips::-webkit-scrollbar, .fabric-row::-webkit-scrollbar { display: none; }

/* product cards */
.card { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
/* small WhatsApp badge on each product photo: the whole card opens the chat */
.wa-dot { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 4px 12px -4px rgba(7, 59, 30, .5); transition: transform .2s; }
.wa-dot svg { width: 17px; height: 17px; }
.card:hover .wa-dot { transform: scale(1.12); }
.card:hover h3 { color: var(--pink-deep); }
.card-img { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--pink-soft); margin-bottom: 10px; border-radius: var(--rad); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s, transform .6s; }
.card-img .alt { position: absolute; inset: 0; opacity: 0; }
@media (hover: hover) {
  .card:hover .card-img img { transform: scale(1.04); }
  .card:hover .card-img .alt { opacity: 1; }
}
.card h3 { font: 600 .88rem/1.35 var(--sans); color: var(--plum); margin: 0 0 2px; }
.meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 10px; }
.price { font: 600 1.25rem var(--serif); color: var(--pink-deep); }
.size { font-size: .7rem; color: var(--muted); }
.card .btn { margin-top: auto; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding: 0 var(--pad) 6px; margin: 0 calc(var(--pad) * -1); scrollbar-width: none; }
.rail .card { scroll-snap-align: start; }
.tag { position: absolute; left: 8px; top: 8px; padding: 4px 8px; border-radius: 4px; background: rgba(255, 255, 255, .92); color: var(--plum); font-size: .64rem; font-weight: 600; letter-spacing: .02em; }
/* blush band with a stitched top edge to break up the cream */
.band { position: relative; background: var(--pink-soft); }
.band::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 2px; background: var(--stitch); }
.kids .card-img { background: #fff; }
.kids .btn-soft { background: #fff; }

/* fabric guide: swipe on phones, 4 columns on desktop */
.fabrics { position: relative; }
.fabric-row { display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding: 0 var(--pad) 6px; margin: 0 calc(var(--pad) * -1); scrollbar-width: none; }
.fabric-row article { scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border-radius: var(--rad); padding: 10px 10px 18px; box-shadow: 0 1px 0 var(--line); }
.fabric-row img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; margin-bottom: 14px; border-radius: 3px 3px 0 0;
  /* pinking-shear zig-zag along the bottom, like a cut fabric swatch */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x; }
.fabric-row h3 { font-size: 1.5rem; margin: 0 8px 6px; }
.fabric-row p { flex: 1; margin: 0 8px 12px; font-size: .86rem; color: var(--muted); }
.fabric-row a { margin: 0 8px; padding-top: 12px; font-size: .82rem; font-weight: 600; text-decoration: none; background: var(--stitch) top / 100% 2px no-repeat; }

/* glow blankets */
.night { position: relative; overflow: hidden; background: radial-gradient(120% 80% at 50% 0, #2b2250 0, var(--night) 62%); color: #d9d4ee; padding: 60px var(--pad); margin: 24px 0; }
.night-in { position: relative; max-width: 1176px; margin: 0 auto; }
.night h2 { color: #fff; }
.night h2 em { color: var(--glow); text-shadow: 0 0 22px rgba(184, 255, 159, .5); }
.night .kicker { color: var(--glow); }
.night .num { color: var(--glow); background-image: repeating-linear-gradient(90deg, var(--glow) 0 9px, transparent 9px 16px); }
.night .lede { color: #b9b2d6; }
.stars i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #effff0; box-shadow: 0 0 6px 1px rgba(184, 255, 159, .7); animation: twinkle var(--t) var(--d) ease-in-out infinite; }
.stars b { position: absolute; color: var(--glow); font-size: 14px; text-shadow: 0 0 10px var(--glow); animation: sparkle 3.6s var(--d) ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .15; transform: scale(.5); } }
@keyframes sparkle { 0%, 100% { opacity: .9; transform: scale(1) rotate(0); } 50% { opacity: .25; transform: scale(.55) rotate(45deg); } }
/* shooting star: a short streak that crosses now and then */
.shoot { position: absolute; left: -10%; width: 120px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff); opacity: 0; transform: rotate(-18deg); animation: shoot 9s var(--d) ease-in infinite; }
@keyframes shoot { 0% { opacity: 0; transform: translate(0, 0) rotate(-18deg); } 3% { opacity: 1; } 12% { opacity: 0; transform: translate(60vw, -20vw) rotate(-18deg); } 100% { opacity: 0; transform: translate(60vw, -20vw) rotate(-18deg); } }
.moon { position: absolute; top: 14px; right: 14px; width: 54px; height: 54px; filter: drop-shadow(0 0 14px rgba(246, 238, 201, .55)); transform: rotate(-12deg); animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: rotate(-6deg) translateY(-6px); } }
.night-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 26px 0; }
.night-grid a { position: relative; overflow: hidden; border-radius: var(--rad); text-decoration: none; box-shadow: 0 0 0 1px rgba(184, 255, 159, .14); }
.night-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s; }
.night-grid a { transition: box-shadow .3s; }
.night-grid a:hover { box-shadow: 0 0 0 1px rgba(184, 255, 159, .5), 0 0 28px rgba(184, 255, 159, .3); }
.night-grid a:hover img { transform: scale(1.05); }
.night-grid span { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 9px; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); color: #fff; font-size: .72rem; font-weight: 600; }
.btn-glow { background: var(--glow); color: var(--night); box-shadow: 0 0 26px rgba(184, 255, 159, .35); }
.btn-glow::after { background: var(--night); color: var(--glow); }

/* soft toys */
.toys { display: grid; gap: 30px; padding-top: 8px; }
.polaroids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; padding-top: 10px; }
.polaroid { position: relative; background: #fff; padding: 6px 6px 0; box-shadow: 0 8px 20px rgba(42, 27, 38, .12); text-decoration: none; transition: transform .3s; }
.polaroid:nth-child(odd) { transform: rotate(-3deg); }
.polaroid:nth-child(even) { transform: rotate(2.5deg) translateY(8px); }
.polaroid:nth-child(3n)::before { background: rgba(184, 160, 120, .35); }
.polaroid:hover { transform: rotate(0) scale(1.05); z-index: 1; }
.polaroid img { aspect-ratio: 1; object-fit: cover; }
.polaroid span { display: block; padding: 3px 2px 5px; text-align: center; font: 600 1.1rem/1.4 var(--script); color: var(--plum); }

/* how to order */
.how { max-width: 1240px; margin: 0 auto; padding: 50px var(--pad); display: grid; gap: 34px; }
.how ol { list-style: none; counter-reset: s; padding: 0; margin: 0 0 26px; }
.how li { counter-increment: s; display: grid; grid-template-columns: 46px 1fr; align-items: center; padding: 12px 0; }
.how li::before { content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pink-soft); color: var(--pink-deep); font: 600 .9rem var(--sans); }
.phone { justify-self: center; width: min(230px, 80%); background: #ece5dd; border: 7px solid var(--plum); border-radius: 32px; padding: 0 12px 20px; box-shadow: 0 26px 50px rgba(42, 27, 38, .2); transform: rotate(2deg); }
.phone-head { display: flex; align-items: center; gap: 10px; margin: 0 -12px 14px; padding: 16px 14px 12px; border-radius: 24px 24px 0 0; background: #075e54; color: #fff; font-size: .76rem; font-weight: 600; line-height: 1.2; }
.phone-head img { border-radius: 50%; }
.phone-head small { display: block; font-weight: 400; opacity: .8; }
.bubble { max-width: 85%; margin: 0 0 8px auto; padding: 8px 10px; background: #d9fdd3; color: #111; border-radius: 9px 0 9px 9px; font-size: .78rem; }
.bubble.pic { width: 62%; padding: 4px; }
.bubble.pic img { border-radius: 6px; }
.typing { display: inline-flex; gap: 4px; padding: 10px 12px; background: #fff; border-radius: 0 9px 9px 9px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa; animation: dot 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 50% { transform: translateY(-3px); opacity: .4; } }

/* grown-up linen */
.craft { padding: 60px var(--pad); scroll-margin-top: 70px; background: var(--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' fill='none' stroke='%23a92a4d' stroke-width='1.2' opacity='.055'%3E%3Cg transform='translate(18 18)'%3E%3Ccircle r='3'/%3E%3Cpath d='M0-12C4-8 4-4 0-3C-4-4-4-8 0-12ZM0 12C4 8 4 4 0 3C-4 4-4 8 0 12ZM-12 0C-8-4-4-4-3 0C-4 4-8 4-12 0ZM12 0C8-4 4-4 3 0C4 4 8 4 12 0Z'/%3E%3C/g%3E%3Cg transform='translate(54 54)'%3E%3Ccircle r='2'/%3E%3Ccircle r='7'/%3E%3C/g%3E%3C/svg%3E"); }
.craft-in { max-width: 1176px; margin: 0 auto; }
.craft h2 em { color: var(--pink-deep); }

.visit { max-width: 640px; margin: 0 auto; padding: 60px var(--pad) 50px; text-align: center; }
.visit p { color: var(--muted); }
.visit .script { margin: 0 0 4px; color: var(--pink); }
.visit-mark { width: 64px; height: auto; margin: 0 auto 12px; }

/* inner pages */
/* inner-page header: full-bleed blush band with a stitched bottom edge */
.page-hero { position: relative; max-width: 1240px; margin: 0 auto 28px; padding: 36px var(--pad) 34px; background: var(--pink-soft); box-shadow: 0 0 0 100vmax var(--pink-soft); clip-path: inset(0 -100vmax); }
.page-hero::after { content: ""; position: absolute; left: -100vmax; right: -100vmax; bottom: 10px; height: 2px; background: var(--stitch); }
.page-hero .lede { margin-bottom: 0; }
.hero-tag { margin: 0 0 10px; }
.page-hero h1 { font-size: clamp(2.5rem, 9.5vw, 4.2rem); }
.chips { position: sticky; top: 58px; z-index: 20; display: flex; gap: 8px; overflow-x: auto; padding: 10px max(var(--pad), calc((100% - 1176px) / 2)); background: rgba(251, 246, 240, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.chips a { flex: none; padding: 7px 14px; border-radius: var(--pill); border: 1px solid var(--line); background: #fff; box-shadow: 0 2px 6px -3px rgba(42, 27, 38, .2); color: var(--plum); font-size: .76rem; text-decoration: none; }
.chips a:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.cat { max-width: 1240px; margin: 0 auto; padding: 34px var(--pad) 8px; scroll-margin-top: 110px; }
.cat-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 18px; padding-bottom: 12px; background: var(--stitch) bottom / 100% 2px no-repeat; }
.cat-head h2 { font-size: 2rem; margin: 0; }
.cat-head span { font-size: .74rem; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }

.about { max-width: 1240px; margin: 0 auto; padding: 10px var(--pad) 50px; display: grid; gap: 30px; align-items: center; }
.about-img { aspect-ratio: 4 / 4.4; }
.prose { max-width: 680px; }
.legal-text { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad) 50px; }
.legal-text > * { max-width: 760px; }
.legal-text h2 { font-size: 1.7rem; margin-top: 1.4em; }

.contact { max-width: 1240px; margin: 0 auto; padding: 10px var(--pad) 50px; display: grid; gap: 24px; }
.contact dl { margin: 0; }
.contact dl div { padding: 16px 0; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px) bottom / 100% 1.5px no-repeat; }
.contact dt { font-size: .74rem; font-weight: 600; color: var(--pink-deep); }
.contact dd { margin: 2px 0 0; font: 500 1.35rem/1.3 var(--serif); color: var(--plum); }
.contact dd small { font: .78rem var(--sans); color: var(--muted); }
.contact iframe { width: 100%; height: 320px; border: 0; border-radius: var(--rad); background: var(--sand); }

/* footer */
.foot { position: relative; background: var(--plum); color: #e7dce1; padding: 54px var(--pad) 96px; font-size: .85rem; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: var(--stitch); opacity: .7; }
.foot-in { max-width: 1176px; margin: 0 auto; display: grid; gap: 28px; }
.foot a { color: #fff; }
.foot-brand img { border-radius: var(--rad); margin-bottom: 14px; }
.foot-brand p { margin: 0; }
.fb-name { display: inline-block; padding-bottom: 10px; font: 600 1.7rem/1.1 var(--serif); color: #fff; letter-spacing: .01em; background: repeating-linear-gradient(90deg, var(--pink) 0 8px, transparent 8px 14px) left bottom / 100% 2px no-repeat; }
.fb-legal { margin-top: 10px !important; font-size: .9rem; color: #f3dfe6; }
.fb-legal strong { color: #fff; font-weight: 600; }
.fb-meta { margin-top: 4px !important; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #f0a7ba; }
.foot address { font-style: normal; display: grid; gap: 2px; }
.foot .lbl { display: block; margin-top: 10px; font-size: .7rem; font-weight: 600; color: #f0a7ba; }
.foot .lbl:first-child { margin-top: 0; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.foot-col .lbl { margin: 0 0 2px; }
.foot-col .lbl ~ .lbl { margin-top: 12px; }
.foot-col a { color: #eadfe4; text-decoration: none; }
@media (hover: hover) { .foot-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } }
.copy { max-width: 1176px; margin: 28px auto 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .74rem; opacity: .7; }

/* phones: WhatsApp bar within thumb reach */
.wa-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; background: #25d366; color: #073b1e; border-radius: var(--pill); font-weight: 700; font-size: .88rem; text-decoration: none; box-shadow: 0 8px 24px rgba(7, 59, 30, .28); }

@media (max-width: 400px) {
  .btn-sm svg { display: none; }
}

@media (min-width: 720px) {
  .top.light .top-wa { background: var(--pink); color: #fff; }
  :root { --pad: 32px; }
  body { font-size: 16px; }
  .top { padding: 12px var(--pad); }
  .top nav { gap: 24px; }
  .top nav a:first-child { display: inline; }
  .brand { font-size: 1.05rem; }
  .brand img { height: 60px; }
  .top-wa { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; background: #fff; color: var(--plum); border-radius: var(--pill); font-weight: 700; font-size: .8rem; text-decoration: none; }
  .wa-bar { display: none; }
  .sec { padding-top: 64px; padding-bottom: 64px; }
  .ribbons { height: 104px; }
  .ribbon { font-size: 1.1em; }
  /* editorial layout: one large featured product + 2 × 2 */
  .rail { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 20px; overflow: visible; margin: 0; padding: 0; }
  .rail .card:first-child { grid-column: span 2; grid-row: span 2; }
  .rail .card:first-child .card-img { flex: 1; aspect-ratio: auto; }
  .rail .card:first-child h3 { font: 600 1.7rem/1.2 var(--serif); }
  .rail .card:first-child .price { font-size: 1.5rem; }
  .rail .card:first-child .btn { align-self: flex-start; width: auto; padding: 12px 22px; font-size: .8rem; }
  .rail .card:first-child .tag { font-size: .74rem; padding: 6px 10px; left: 14px; top: 14px; }
  .rail .card:nth-child(n + 6) { display: none; }
  .fabric-row { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; overflow: visible; margin: 0; padding: 0; }
  .fabric-row article:nth-child(even) { transform: translateY(28px); }
  .fabrics { padding-bottom: 44px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 20px; }
  .night { padding: 90px var(--pad); }
  .night-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .moon { width: 120px; height: 120px; top: 56px; right: 7%; }
  .toys { grid-template-columns: 1fr 1.2fr; align-items: center; padding-top: 12px; }
  .how { grid-template-columns: 1.2fr 1fr; align-items: center; padding: 80px var(--pad); }
  .phone { width: 280px; }
  .craft { padding: 90px var(--pad); }
  .about { grid-template-columns: 1fr 1.1fr; }
  .contact { grid-template-columns: 1fr 1.2fr; }
  .foot { padding-bottom: 40px; }
  .foot-in { grid-template-columns: 1.2fr 1fr 1fr; }
  .chips { top: 72px; }
  .cat { scroll-margin-top: 130px; }
}
@media (min-width: 1100px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .night-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- brand-led pink hero (the header's pink runs straight into it) ---------- */
.poster { position: relative; overflow: hidden; background: var(--pink); color: #fff; }
/* white twinkles in the pink hero, same animations as the night sky */
.hero-sky i { background: #fff; box-shadow: 0 0 8px 1px rgba(255, 255, 255, .8); }
.hero-sky b { color: #fff; text-shadow: 0 0 12px rgba(255, 255, 255, .9); }
@media (max-width: 719px) { .hero-sky .t { display: none; } } /* phones: text is full width, so stars only around the collage */
/* bedtime doodles framing the collage (positioned against .collage) */
.doodles { position: absolute; inset: -30px -10px; pointer-events: none; z-index: 3; }
.d-moon { position: absolute; width: 40px; height: 40px; right: 12%; top: 0; transform: rotate(-14deg); filter: drop-shadow(0 0 12px rgba(255, 246, 214, .8)); animation: float 7s ease-in-out infinite; }
.d-cloud { position: absolute; display: block; }
.d-cloud svg { width: 100%; height: auto; fill: #fff; filter: drop-shadow(0 6px 10px rgba(120, 20, 50, .2)); }
.c-a { width: 70px; left: 2%; top: 4%; animation: drift 14s ease-in-out infinite; }
.c-b { width: 50px; right: 30%; bottom: 0; opacity: .8; animation: drift 18s 2s ease-in-out infinite reverse; }
@keyframes drift { 50% { transform: translateX(16px); } }
.d-loop { position: absolute; width: 170px; height: 68px; left: 30%; bottom: 6px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 8 7; opacity: .85; animation: sew 6s linear infinite; }
@keyframes sew { to { stroke-dashoffset: -150; } }
.d-heart { position: absolute; color: #fff; font-size: 18px; text-shadow: 0 0 10px rgba(255, 255, 255, .6); animation: sparkle 4s ease-in-out infinite; }
.h-a { right: 2%; bottom: 18%; }
.h-b { left: 4%; top: 42%; font-size: 13px; animation-delay: 1.4s; }
@media (min-width: 720px) {
  .doodles { inset: -40px -30px; }
  .d-moon { width: 78px; height: 78px; right: 2%; top: 4%; }
  .c-a { width: 110px; left: -2%; top: 46%; }
  .c-b { width: 84px; right: 0; bottom: 16%; }
  .d-loop { width: 260px; height: 104px; left: 46%; bottom: 30px; }
  .h-a { right: 6%; bottom: 30%; font-size: 22px; }
  .h-b { left: 12%; top: 2%; font-size: 16px; }
}
.poster-in { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 16px var(--pad) 40px; display: grid; gap: 26px; }
.poster-top { list-style: none; display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 0 0 10px; font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .7) 0 9px, transparent 9px 16px) bottom / 100% 2px no-repeat; }
.poster-top a { color: #fff; text-decoration: none; }
.poster-tag { margin: 10px 0 8px; font: 600 1.9rem/1 var(--script); color: #ffe3ea; }
.poster-tag { position: relative; }
/* phones: sparkles + a cloud beside the "Little Dreamers" script */
.tag-fx { position: absolute; inset: 0; pointer-events: none; font-style: normal; }
.tag-fx b { position: absolute; color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, .9); animation: sparkle 3.6s ease-in-out infinite; }
.tf-s1 { left: 196px; top: -10px; font-size: 20px; }
.tf-s2 { left: 222px; top: 14px; font-size: 12px; animation-delay: 1.2s !important; }
.tf-s3 { left: -6px; top: -16px; font-size: 11px; animation-delay: 2.2s !important; }
.tf-cloud { position: absolute; right: 0; top: -14px; width: 64px; animation: drift 14s ease-in-out infinite; }
.poster-tag > span { display: block; margin-top: 6px; font: 600 .62rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #ffd0dc; vertical-align: middle; }
.poster h1 { color: #fff; font-size: clamp(2.8rem, 12vw, 5.6rem); line-height: 1; }
.poster h1 em { color: #ffe3ea; }
.poster-lede { margin: 0 0 22px; max-width: 32em; color: #ffe8ee; font-size: 1rem; }
.poster .cta { flex-direction: column; }
.btn-light { background: #fff; color: var(--plum); box-shadow: 0 10px 22px -10px rgba(60, 8, 28, .55); }
.btn-light.btn-arrow::after { background: var(--pink); color: #fff; }
.btn-line { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.collage { position: relative; height: 340px; }
.c-house { position: absolute; left: 50%; top: 0; width: 66%; transform: translateX(-50%); box-shadow: 0 24px 40px -18px rgba(80, 10, 35, .5); }
.collage .sticker { width: 34%; }
.c1 { left: -1%; bottom: 0; transform: rotate(-7deg); }
.c2 { right: -1%; top: 34%; transform: rotate(6deg); }
.c3 { display: none; }

/* ---------- category index: big type instead of e-com bubbles ---------- */
.cat-index { list-style: none; margin: 0; padding: 0; }
.cat-index a { position: relative; display: grid; grid-template-columns: 26px 64px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 0; color: var(--plum); text-decoration: none; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px) bottom / 100% 1.5px no-repeat; }
.ci-n { grid-row: 1 / 3; font: italic 500 1rem var(--serif); color: var(--pink-deep); }
.ci-img { grid-row: 1 / 3; width: 64px; height: 64px; object-fit: cover; border-radius: 4px; }
.ci-name { font: 600 1.5rem/1.1 var(--serif); transition: color .2s, transform .25s; }
.ci-meta { font-size: .72rem; color: var(--muted); }
.cat-index a:hover .ci-name { color: var(--pink); }

@media (min-width: 720px) {
  .poster-in { grid-template-columns: 1fr 1fr; align-items: center; gap: 30px 56px; padding: 18px var(--pad) 70px; }
  .tag-fx { display: none; }
  .poster-tag > span { display: inline; margin: 0 0 0 8px; }
  .poster-top { grid-column: 1 / -1; font-size: .7rem; justify-content: flex-start; gap: 40px; }
  .collage { height: 540px; }
  .c-house { width: 72%; }
  .collage .sticker { width: 36%; }
  .c3 { display: block; left: -4%; top: 4%; width: 30%; transform: rotate(-5deg); }
  .c1 { left: 2%; bottom: 0; }
  .poster .cta { flex-direction: row; }
  .cat-index { columns: 2; column-gap: 56px; }
  .cat-index li { break-inside: avoid; }
  .cat-index a { grid-template-columns: 40px 1fr auto; padding: 18px 0; }
  .ci-n { grid-row: auto; font-size: 1.15rem; }
  .ci-name { font-size: 2.3rem; }
  .ci-meta { grid-column: 3; grid-row: 1; text-align: right; }
  /* photo appears beside the word on hover */
  .ci-img { position: absolute; right: 26%; top: 50%; width: 130px; height: 130px; z-index: 4; pointer-events: none; opacity: 0; transform: translateY(-50%) rotate(-6deg) scale(.85); transition: opacity .2s, transform .3s; box-shadow: 0 16px 30px -12px rgba(42, 27, 38, .45); border: 5px solid #fff; }
  .cat-index a:hover .ci-img { opacity: 1; transform: translateY(-50%) rotate(-4deg) scale(1); }
  .cat-index a:hover .ci-name { transform: translateX(8px); }
}

/* phones: category index as a 2-column photo grid (desktop keeps the typographic list) */
@media (max-width: 719px) {
  .cat-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .cat-index a { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; padding: 0 0 10px; }
  .ci-img { order: -1; width: 100%; height: auto; aspect-ratio: 5 / 4; margin-bottom: 8px; border-radius: 6px; }
  .ci-n { position: absolute; top: 8px; left: 8px; padding: 2px 7px; border-radius: 4px; background: rgba(255, 255, 255, .92); font-size: .85rem; line-height: 1.3; }
  .ci-name { font-size: 1.25rem; }
  .ci-meta { font-size: .68rem; }
}

/* sleepy cloud next to "Shop by category" */
.has-sleepy { position: relative; }
.sleepy { position: absolute; right: 48px; top: -14px; width: 120px; height: 84px; pointer-events: none; }
.sleepy svg { position: absolute; left: 0; bottom: 0; width: 92px; height: 60px; animation: drift 12s ease-in-out infinite; }
.sleepy svg path:first-child { fill: var(--pink-soft); stroke: var(--pink); stroke-width: 2; stroke-dasharray: 6 5; }
.sleepy .eye { fill: none; stroke: var(--pink-deep); stroke-width: 2.5; stroke-linecap: round; }
.sleepy .z { position: absolute; font: 600 1.3rem/1 var(--script); color: var(--pink); opacity: 0; animation: zz 3.6s ease-in infinite; }
.z1 { left: 78px; top: 22px; }
.z2 { left: 92px; top: 8px; font-size: 1.6rem !important; animation-delay: 1.2s !important; }
.z3 { left: 108px; top: -8px; font-size: 1.9rem !important; animation-delay: 2.4s !important; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 8px) scale(.7); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -14px) scale(1.1); } }
.sleepy b { position: absolute; left: 0; top: 10px; color: var(--pink); font-size: 14px; animation: sparkle 3.6s ease-in-out infinite; }
@media (min-width: 720px) {
  .sleepy { right: 110px; top: 20px; transform: scale(1.3); transform-origin: top right; }
}
@media (prefers-reduced-motion: reduce) { .sleepy .z { opacity: 1; } }

@media (hover: hover) {
  .btn:hover { background: var(--pink-deep); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 20px -8px rgba(169, 42, 77, .6); }
  .btn-arrow:hover::after { transform: translateX(3px); }
  .btn-ghost:hover { background: var(--plum); color: #fff; }
  .btn-soft:hover { background: var(--pink); color: #fff; }
  .kids .btn-soft:hover { background: var(--pink); }
  .btn-glow:hover { background: #fff; color: var(--night); }
  .btn-light:hover { background: var(--plum); color: #fff; }
  .btn-line:hover { background: #fff; color: var(--pink-deep); }
}


/* grown-up groups on the home page */
.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.htile { display: flex; flex-direction: column; gap: 2px; padding: 8px 8px 12px; background: #fff; border-radius: var(--rad); color: var(--plum); text-decoration: none; box-shadow: 0 1px 0 #d6c6b8; }
.htile img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 4px; margin-bottom: 8px; }
.ht-name { font: 600 1.2rem/1.15 var(--serif); }
.ht-meta { font-size: .68rem; color: var(--muted); }
@media (hover: hover) { .htile:hover .ht-name { color: var(--pink-deep); } }

/* shop page: two groups, 8 cards per category until "show all" */
.shop-group { max-width: 1240px; margin: 40px auto 0; padding: 0 var(--pad); scroll-margin-top: 110px; font-size: clamp(2rem, 7vw, 3rem); }
.shop-group small { display: block; margin-top: 4px; font: 600 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--pink-deep); }
.grid.capped > .card:nth-child(n + 9) { display: none; }
.grid.capped.open > .card { display: flex; }
@media (min-width: 720px) {
  .home-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .ht-name { font-size: 1.45rem; }
}

/* category tabs: kids / home (pure CSS radio toggle) */
.cat-tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.cat-tabs > label { display: inline-flex; align-items: baseline; gap: 6px; margin: 0 6px 18px 0; padding: 9px 16px; border-radius: var(--rad); border: 1.5px solid var(--plum); color: var(--plum); font-weight: 600; font-size: .85rem; cursor: pointer; }
.cat-tabs > label small { font-size: .7rem; opacity: .7; }
.cat-tabs > input:checked + label { background: var(--plum); color: #fff; }
.cat-tabs > input:focus-visible + label { outline: 2px solid var(--pink); outline-offset: 2px; }
.cat-tabs .ct-home { display: none; }
#ct-home:checked ~ .ct-home { display: grid; }
#ct-home:checked ~ .ct-kids { display: none; }
@media (min-width: 720px) {
  #ct-home:checked ~ .ct-home { display: block; }
}

/* Ajrak & hand block: editorial feature on the block-print sand */
.ajrak { padding: 56px var(--pad); background: var(--sand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' fill='none' stroke='%23a92a4d' stroke-width='1.2' opacity='.055'%3E%3Cg transform='translate(18 18)'%3E%3Ccircle r='3'/%3E%3Cpath d='M0-12C4-8 4-4 0-3C-4-4-4-8 0-12ZM0 12C4 8 4 4 0 3C-4 4-4 8 0 12ZM-12 0C-8-4-4-4-3 0C-4 4-8 4-12 0ZM12 0C8-4 4-4 3 0C4 4 8 4 12 0Z'/%3E%3C/g%3E%3Cg transform='translate(54 54)'%3E%3Ccircle r='2'/%3E%3Ccircle r='7'/%3E%3C/g%3E%3C/svg%3E"); }
.ajrak-in { max-width: 1176px; margin: 0 auto; display: grid; gap: 28px; }
.ajrak h2 em { color: var(--pink-deep); }
.aj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
.aj-grid .card:first-child { grid-column: 1 / -1; }
.aj-grid .card:first-child h3 { font: 600 1.5rem/1.2 var(--serif); }
.aj-grid .card:nth-child(n + 6) { display: none; }
.living .rail .card:nth-child(n + 9) { display: none; }
@media (min-width: 720px) {
  .ajrak { padding: 84px var(--pad); }
  .ajrak-in { grid-template-columns: 1fr 1.6fr; align-items: center; gap: 48px; }
  .aj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
  .aj-grid .card:first-child { grid-column: span 2; grid-row: span 2; }
  .aj-grid .card:first-child .card-img { flex: 1; aspect-ratio: auto; }
  .aj-grid .card:nth-child(n + 4) { display: none; }
}