@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fredoka:wght@500;600;700&display=swap');
:root{--cream:#fff8f2;--cream-2:#f7eadf;--paper:#fffdf9;--ink:#4a3932;--muted:#76655c;--berry:#d95d84;--berry-dark:#a63c63;--blush:#f3b2c0;--peach:#f7c7a9;--gold:#f3c564;--sage:#8bd1c5;--teal:#397d77;--teal-dark:#245b58;--line:rgba(74,57,50,.11);--shadow:0 22px 70px rgba(88,57,41,.12);--soft-shadow:0 12px 34px rgba(88,57,41,.10);--radius:30px;--radius-sm:20px}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--cream);line-height:1.65;overflow-x:hidden}body::before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 10% 5%,rgba(243,178,192,.23),transparent 25%),radial-gradient(circle at 90% 25%,rgba(139,209,197,.2),transparent 26%),radial-gradient(circle at 20% 85%,rgba(247,199,169,.22),transparent 28%),var(--cream)}body::after{content:"";position:fixed;inset:0;z-index:-1;opacity:.2;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Ccircle cx='18' cy='24' r='2' fill='%23d95d84'/%3E%3Cpath d='M83 17l3 7 8 1-6 5 2 8-7-4-7 4 2-8-6-5 8-1z' fill='%23f3c564'/%3E%3Cpath d='M21 96q12-12 24 0' fill='none' stroke='%23397d77' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
a{color:inherit}img{display:block;max-width:100%}button,input,select{font:inherit}.wrap{width:min(1180px,calc(100% - 40px));margin:auto}.display,h1,h2,h3,.brand-text{font-family:'Fredoka',sans-serif;line-height:1.05}h1{font-size:clamp(3.1rem,7vw,6.2rem);letter-spacing:-.045em}h2{font-size:clamp(2.2rem,4.2vw,4rem);letter-spacing:-.035em}h3{font-size:1.45rem}.kicker{display:inline-flex;gap:9px;align-items:center;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.65);border:1px solid rgba(74,57,50,.09);box-shadow:0 6px 20px rgba(74,57,50,.06);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--berry-dark)}.kicker::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(243,197,100,.2)}.section{padding:105px 0}.section-sm{padding:70px 0}.section-heading{max-width:720px;margin-bottom:48px}.section-heading.center{text-align:center;margin-left:auto;margin-right:auto}.section-heading h2{margin:16px 0 14px;color:var(--teal-dark)}.section-heading p{font-size:1.08rem;color:var(--muted)}
.site-header{position:sticky;top:0;z-index:100;padding:13px 0;transition:.3s}.site-header.scrolled{background:rgba(255,248,242,.84);backdrop-filter:blur(18px);border-bottom:1px solid rgba(74,57,50,.08);box-shadow:0 8px 28px rgba(74,57,50,.06)}.nav{display:flex;align-items:center;justify-content:space-between;gap:22px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none}.brand-mark{width:55px;height:55px;filter:drop-shadow(0 8px 12px rgba(57,125,119,.18));animation:brandBob 4s ease-in-out infinite}.brand-text{font-size:1.75rem;font-weight:700;color:var(--teal-dark)}.brand-text span{color:var(--berry)}.nav-links{display:flex;align-items:center;gap:8px}.nav-links>.btn{display:none}.nav-links>a:not(.btn){padding:10px 14px;text-decoration:none;font-weight:700;border-radius:999px;color:var(--muted);transition:.25s}.nav-links>a:not(.btn):hover,.nav-links>a.active:not(.btn){background:#fff;color:var(--berry-dark);box-shadow:0 8px 24px rgba(74,57,50,.08)}.menu-btn{display:none;width:48px;height:48px;border:0;border-radius:50%;background:#fff;box-shadow:var(--soft-shadow);cursor:pointer;position:relative}.menu-btn span,.menu-btn::before,.menu-btn::after{content:"";position:absolute;left:14px;width:20px;height:2px;background:var(--teal-dark);border-radius:2px;transition:.3s}.menu-btn::before{top:16px}.menu-btn span{top:23px}.menu-btn::after{top:30px}.menu-btn.open::before{transform:translateY(7px) rotate(45deg)}.menu-btn.open span{opacity:0}.menu-btn.open::after{transform:translateY(-7px) rotate(-45deg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:13px 21px;border:0;border-radius:999px;text-decoration:none;font-weight:800;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--teal),var(--teal-dark));box-shadow:0 9px 0 #1d4c49,0 18px 28px rgba(36,91,88,.18);transform:translateY(0);transition:transform .2s,box-shadow .2s,filter .2s;position:relative;overflow:hidden}.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.4) 45%,transparent 65%);transform:translateX(-140%);transition:.65s}.btn:hover{transform:translateY(-3px);box-shadow:0 12px 0 #1d4c49,0 24px 34px rgba(36,91,88,.23);filter:saturate(1.08)}.btn:hover::after{transform:translateX(140%)}.btn.berry{background:linear-gradient(135deg,var(--berry),var(--berry-dark));box-shadow:0 9px 0 #8b3151,0 18px 28px rgba(166,60,99,.18)}.btn.berry:hover{box-shadow:0 12px 0 #8b3151,0 24px 34px rgba(166,60,99,.22)}.btn.light{background:#fff;color:var(--teal-dark);box-shadow:0 9px 0 #eadbcf,0 18px 28px rgba(74,57,50,.12)}.btn.light:hover{box-shadow:0 12px 0 #eadbcf,0 24px 34px rgba(74,57,50,.15)}.btn svg,.floating-wa svg{width:22px;height:22px;fill:currentColor}
.hero{min-height:calc(100vh - 82px);display:grid;align-items:center;padding:55px 0 90px;position:relative}.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:65px}.hero-copy p{font-size:1.18rem;color:var(--muted);max-width:620px;margin:23px 0 32px}.hero-copy h1{color:var(--teal-dark);margin-top:18px}.hero-copy h1 .scribble{color:var(--berry);position:relative;display:inline-block}.hero-copy h1 .scribble::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20'%3E%3Cpath d='M4 13C70 2 140 20 296 8' fill='none' stroke='%23f3c564' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;z-index:-1}.hero-actions{display:flex;gap:15px;flex-wrap:wrap}.hero-notes{display:flex;gap:20px;flex-wrap:wrap;margin-top:34px;color:var(--muted);font-weight:700;font-size:.92rem}.hero-notes span{display:flex;align-items:center;gap:8px}.hero-notes span::before{content:"✓";display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:rgba(139,209,197,.35);color:var(--teal-dark)}.hero-art{position:relative;min-height:620px}.photo-stack{position:absolute;inset:30px 0 0 30px}.photo-main{position:absolute;right:0;top:15px;width:83%;height:540px;border-radius:190px 190px 42px 42px;overflow:hidden;border:10px solid #fff;box-shadow:var(--shadow);transform:rotate(2deg)}.photo-main img{width:100%;height:100%;object-fit:cover;object-position:center}.mini-card{position:absolute;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border:1px solid rgba(74,57,50,.08);box-shadow:var(--soft-shadow);border-radius:24px;padding:17px 19px;font-weight:800;z-index:3;animation:floaty 5s ease-in-out infinite}.mini-card.one{left:0;top:105px;transform:rotate(-6deg)}.mini-card.two{right:-15px;bottom:30px;animation-delay:-2.4s}.mini-card strong{display:block;color:var(--berry);font-family:'Fredoka';font-size:1.25rem}.yarn{position:absolute;border-radius:50%;z-index:-1;filter:blur(.1px);animation:drift 8s ease-in-out infinite alternate}.yarn.y1{width:165px;height:165px;background:var(--blush);right:-55px;top:-10px}.yarn.y2{width:100px;height:100px;background:var(--gold);left:40px;bottom:10px;animation-delay:-3s}.yarn.y3{width:68px;height:68px;background:var(--sage);right:80px;bottom:0;animation-delay:-5s}.stitched-wave{height:35px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='35' viewBox='0 0 120 35'%3E%3Cpath d='M0 20C20 0 40 35 60 15s40 15 60-5' fill='none' stroke='%23f3b2c0' stroke-width='4' stroke-dasharray='6 7' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center;background-size:120px 35px}
.ticker{overflow:hidden;background:var(--teal-dark);color:#fff;padding:15px 0;transform:rotate(-1deg);width:102%;margin-left:-1%}.ticker-track{display:flex;width:max-content;animation:ticker 28s linear infinite}.ticker span{white-space:nowrap;padding:0 22px;font-family:'Fredoka';font-weight:600}.ticker b{color:var(--gold);padding-right:18px}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.product-card{background:rgba(255,255,255,.78);border:1px solid rgba(74,57,50,.08);border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 34px rgba(88,57,41,.08);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;display:flex;flex-direction:column;position:relative;transform-style:preserve-3d}.product-card:hover{transform:translateY(-10px) rotateX(1deg);box-shadow:0 30px 65px rgba(88,57,41,.16)}.product-media{height:300px;overflow:hidden;position:relative;background:#fff}.product-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(36,91,88,.22));pointer-events:none}.product-media img{width:100%;height:100%;object-fit:cover;transition:transform .75s cubic-bezier(.2,.8,.2,1)}.product-card:hover .product-media img{transform:scale(1.07) rotate(.6deg)}.product-badge{position:absolute;top:17px;right:17px;z-index:2;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 9px 22px rgba(74,57,50,.12);font-weight:800;color:var(--berry-dark)}.product-content{padding:24px 24px 27px;display:flex;flex-direction:column;flex:1}.product-title-row{display:flex;justify-content:space-between;gap:15px;align-items:start}.product-price{font-family:'Fredoka';font-weight:700;color:var(--berry);font-size:1.25rem;white-space:nowrap}.product-content p{color:var(--muted);margin:10px 0 18px}.product-content .btn{margin-top:auto;width:100%}.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.option-grid label{font-size:.72rem;text-transform:uppercase;letter-spacing:.11em;font-weight:800;color:var(--teal-dark)}.option-grid select{width:100%;margin-top:6px;padding:10px 12px;border-radius:14px;border:1px dashed rgba(166,60,99,.4);background:var(--cream);color:var(--ink);outline:none}.option-grid select:focus{border-color:var(--berry);box-shadow:0 0 0 4px rgba(217,93,132,.12)}
.cozy-panel{background:linear-gradient(135deg,var(--teal-dark),var(--teal));color:#fff;border-radius:45px;padding:58px;position:relative;overflow:hidden;box-shadow:var(--shadow)}.cozy-panel::before,.cozy-panel::after{content:"";position:absolute;border-radius:50%;filter:blur(2px)}.cozy-panel::before{width:250px;height:250px;background:rgba(243,178,192,.24);right:-65px;top:-80px}.cozy-panel::after{width:170px;height:170px;background:rgba(243,197,100,.2);left:-50px;bottom:-70px}.cozy-panel h2{color:#fff}.cozy-panel p{max-width:650px;color:rgba(255,255,255,.83);font-size:1.08rem;margin:15px 0 28px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.feature{background:rgba(255,255,255,.75);border:1px solid rgba(74,57,50,.08);border-radius:26px;padding:28px;box-shadow:var(--soft-shadow)}.feature-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:var(--cream-2);font-size:1.8rem;margin-bottom:18px;transition:.35s}.feature:hover .feature-icon{transform:rotate(-7deg) scale(1.08)}.feature p{color:var(--muted);margin-top:8px}
.story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}.story-art{position:relative}.story-art>img{border-radius:50px;width:100%;box-shadow:var(--shadow);border:9px solid #fff}.story-sticker{position:absolute;right:-20px;bottom:35px;background:var(--gold);padding:17px 20px;border-radius:22px;font-family:'Fredoka';font-weight:700;transform:rotate(5deg);box-shadow:var(--soft-shadow)}.story-copy h1,.story-copy h2{color:var(--teal-dark);margin:17px 0}.story-copy p{color:var(--muted);font-size:1.07rem;margin:0 0 18px}.quote{font-family:'Fredoka';font-size:1.55rem;line-height:1.4;color:var(--berry-dark);padding:22px 0 22px 28px;border-left:6px solid var(--gold);margin:28px 0}.milestones{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:35px}.mile{background:#fff;border-radius:22px;padding:22px;text-align:center;box-shadow:var(--soft-shadow)}.mile strong{display:block;font-family:'Fredoka';font-size:2rem;color:var(--berry)}
.page-hero{padding:85px 0 55px;text-align:center;position:relative}.page-hero h1{font-size:clamp(3.2rem,6vw,5.6rem);color:var(--teal-dark);max-width:900px;margin:18px auto}.page-hero p{max-width:700px;margin:auto;color:var(--muted);font-size:1.1rem}.fabric-note{display:flex;align-items:center;justify-content:space-between;gap:25px;background:#fff;border:1px dashed rgba(166,60,99,.35);border-radius:28px;padding:25px 28px;box-shadow:var(--soft-shadow)}.fabric-note p{color:var(--muted)}.fabric-note .btn{white-space:nowrap}.fabric-note strong{color:var(--berry-dark)}
.footer{background:var(--teal-dark);color:#fff;margin-top:75px;padding:60px 0 28px;position:relative}.footer::before{content:"";position:absolute;top:-28px;left:0;right:0;height:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='30' viewBox='0 0 90 30'%3E%3Cpath d='M0 30V16C15-2 30-2 45 16 60-2 75-2 90 16v14z' fill='%23245b58'/%3E%3C/svg%3E") repeat-x top;background-size:90px 30px}.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}.footer .brand-text{color:#fff}.footer p{color:rgba(255,255,255,.72)}.footer a{color:var(--gold)}.copyright{border-top:1px solid rgba(255,255,255,.12);margin-top:35px;padding-top:20px;font-size:.88rem}.floating-wa{position:fixed;right:23px;bottom:23px;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff;z-index:90;box-shadow:0 15px 35px rgba(20,110,55,.3);transition:.25s}.floating-wa::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid #25d366;animation:pulse 2.3s ease-out infinite}.floating-wa:hover{transform:scale(1.08) rotate(-5deg)}
.reveal{opacity:0;transform:translateY(30px) scale(.985);transition:opacity .75s,transform .75s cubic-bezier(.2,.8,.2,1)}.reveal.in{opacity:1;transform:none}.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}.delay-4{transition-delay:.32s}
@keyframes brandBob{50%{transform:translateY(-4px) rotate(2deg)}}@keyframes floaty{50%{transform:translateY(-12px) rotate(-2deg)}}@keyframes drift{to{transform:translate(20px,-25px) scale(1.08)}}@keyframes ticker{to{transform:translateX(-50%)}}@keyframes pulse{70%{transform:scale(1.55);opacity:0}100%{opacity:0}}
@media(max-width:980px){.hero{min-height:auto}.hero-grid,.story-grid{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-copy p{margin-left:auto;margin-right:auto}.hero-actions,.hero-notes{justify-content:center}.hero-art{min-height:565px;max-width:690px;width:100%;margin:auto}.product-grid{grid-template-columns:repeat(2,1fr)}.feature-grid{grid-template-columns:1fr 1fr}.story-grid{gap:45px}.story-art{max-width:620px;margin:auto}.nav-links{position:fixed;top:78px;left:20px;right:20px;background:rgba(255,253,249,.96);backdrop-filter:blur(18px);border:1px solid rgba(74,57,50,.1);box-shadow:var(--shadow);border-radius:26px;padding:16px;display:flex;flex-direction:column;align-items:stretch;transform:translateY(-20px) scale(.96);opacity:0;pointer-events:none;transition:.3s}.nav-links.open{transform:none;opacity:1;pointer-events:auto}.nav-links>a{text-align:center}.nav-links>.btn{display:inline-flex}.menu-btn{display:block}.nav .desktop-order{display:none}}@media(max-width:680px){.wrap{width:min(100% - 26px,1180px)}.section{padding:75px 0}.section-sm{padding:50px 0}.site-header{padding:9px 0}.brand-mark{width:47px;height:47px}.brand-text{font-size:1.45rem}.hero{padding-top:35px}.hero-art{min-height:475px}.photo-stack{inset:20px 0 0 0}.photo-main{height:410px;width:90%;border-width:7px}.mini-card{padding:13px 14px;font-size:.82rem}.mini-card.one{top:60px}.mini-card.two{right:0;bottom:12px}.yarn.y1{width:120px;height:120px}.product-grid,.feature-grid,.milestones{grid-template-columns:1fr}.product-media{height:285px}.cozy-panel{padding:38px 25px;border-radius:32px}.fabric-note{align-items:stretch;flex-direction:column}.fabric-note .btn{width:100%}.option-grid{grid-template-columns:1fr}.story-sticker{right:0}.footer-grid{align-items:flex-start;flex-direction:column}.page-hero{padding-top:55px}h1{font-size:clamp(2.9rem,15vw,4.4rem)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}
/* Mobile stability and overflow hardening */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

main,
section,
footer,
.site-header,
.wrap,
.nav,
.hero-grid,
.story-grid,
.product-grid,
.feature-grid,
.milestones,
.product-card,
.product-content,
.story-copy,
.hero-copy {
  min-width: 0;
  max-width: 100%;
}

.site-header {
  isolation: isolate;
}

.nav {
  position: relative;
}

.brand {
  min-width: 0;
  flex-shrink: 1;
}

.brand-text {
  white-space: nowrap;
}

.menu-btn,
.desktop-order {
  flex: 0 0 auto;
}

h1,
h2,
h3,
p,
a,
span,
strong {
  overflow-wrap: break-word;
}

.btn,
.kicker {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.product-title-row > * {
  min-width: 0;
}

.option-grid select {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1040px) {
  body.menu-open {
    overflow: hidden;
    touch-action: none;
  }

  .site-header {
    padding: 9px 0;
  }

  .nav-links {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    width: auto;
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(255, 253, 249, .98);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(74, 57, 50, .1);
    box-shadow: 0 22px 60px rgba(74, 57, 50, .18);
    border-radius: 24px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    transform: translateY(-10px) scale(.98);
    transform-origin: top center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .24s ease, transform .24s ease, visibility .24s ease;
  }

  .nav-links.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-links > a:not(.btn) {
    display: block;
    width: 100%;
    padding: 13px 16px;
    text-align: left;
    border-radius: 16px;
  }

  .nav-links > .btn {
    display: inline-flex;
    width: 100%;
    margin-top: 4px;
  }

  .menu-btn {
    display: block;
    z-index: 1001;
  }

  .nav .desktop-order {
    display: none;
  }
}

@media (max-width: 680px) {
  .wrap {
    width: calc(100% - 24px);
  }

  .nav {
    gap: 10px;
  }

  .brand {
    gap: 8px;
  }

  .brand-mark {
    width: 44px;
    height: 44px;
  }

  .brand-text {
    font-size: 1.35rem;
  }

  .menu-btn {
    width: 44px;
    height: 44px;
  }

  .menu-btn span,
  .menu-btn::before,
  .menu-btn::after {
    left: 12px;
  }

  .menu-btn::before { top: 14px; }
  .menu-btn span { top: 21px; }
  .menu-btn::after { top: 28px; }

  .nav-links {
    top: calc(100% + 8px);
    border-radius: 20px;
  }

  .hero,
  .page-hero,
  .section,
  .section-sm,
  .footer {
    overflow-x: clip;
  }

  .hero-actions {
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-art {
    width: 100%;
    max-width: 100%;
    min-height: 455px;
    overflow: hidden;
  }

  .photo-stack {
    inset: 18px 0 0;
    width: 100%;
  }

  .photo-main {
    right: 4%;
    width: 88%;
    max-width: 88%;
    height: 395px;
  }

  .mini-card {
    max-width: 52%;
    padding: 11px 12px;
    line-height: 1.35;
  }

  .mini-card strong {
    font-size: 1rem;
  }

  .mini-card.one {
    left: 0;
    top: 55px;
  }

  .mini-card.two {
    right: 0;
    bottom: 10px;
  }

  .yarn.y1 {
    right: -10px;
  }

  .ticker {
    width: 100%;
    margin-left: 0;
    transform: none;
  }

  .ticker span {
    padding: 0 16px;
  }

  .product-title-row {
    flex-wrap: wrap;
  }

  .product-price {
    margin-left: auto;
  }

  .story-sticker {
    right: 8px;
    max-width: calc(100% - 16px);
  }

  .cozy-panel {
    width: 100%;
  }

  .floating-wa {
    right: 14px;
    bottom: 14px;
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 420px) {
  .wrap {
    width: calc(100% - 20px);
  }

  .brand-text {
    font-size: 1.22rem;
  }

  h1 {
    font-size: clamp(2.55rem, 14vw, 3.75rem);
  }

  .page-hero h1 {
    font-size: clamp(2.55rem, 14vw, 3.75rem);
  }

  .hero-art {
    min-height: 420px;
  }

  .photo-main {
    height: 360px;
    border-radius: 145px 145px 30px 30px;
  }

  .mini-card {
    font-size: .74rem;
  }

  .mini-card.two {
    max-width: 58%;
  }

  .product-content {
    padding: 21px 18px 24px;
  }

  .product-media {
    height: 260px;
  }

  .cozy-panel {
    padding: 32px 20px;
  }

  .story-art > img {
    border-width: 6px;
    border-radius: 34px;
  }
}

/* Reliable mobile menu: the panel is portalled to <body> by site.js so it
   cannot be clipped by the sticky, blurred header on mobile browsers. */
@media (max-width: 1040px) {
  body.menu-open {
    overflow: hidden;
  }

  body > .nav-links {
    position: fixed;
    z-index: 9999;
    top: var(--menu-top, 76px);
    left: var(--menu-left, 12px);
    right: var(--menu-right, 12px);
    width: auto;
    max-width: none;
    max-height: calc(100dvh - var(--menu-top, 76px) - 12px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 12px;
    border: 1px solid rgba(74, 57, 50, .12);
    border-radius: 22px;
    background: #fffdf9;
    box-shadow: 0 22px 60px rgba(74, 57, 50, .22);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
    isolation: isolate;
  }

  body > .nav-links.open {
    display: flex;
    animation: mobileMenuIn .18s ease-out both;
  }

  body > .nav-links > a:not(.btn) {
    display: block;
    width: 100%;
    padding: 13px 16px;
    text-align: left;
    border-radius: 15px;
  }

  body > .nav-links > .btn {
    display: inline-flex;
    width: 100%;
    margin-top: 4px;
  }
}

@keyframes mobileMenuIn {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body > .nav-links.open { animation: none; }
}

@media (max-width: 1040px) {
  body.menu-open { touch-action: auto; }
  body > .nav-links {
    touch-action: pan-y;
    backface-visibility: hidden;
  }
}