/* Nawty Paws home, v3 (9 Oct 2026). Self-hosted Poppins, no third-party requests. */
@font-face{font-family:"Poppins";src:url("./fonts/poppins-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("./fonts/poppins-semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("./fonts/poppins-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --cream:#FFF8F2; --cream-2:#FCEDE6; --coral:#E87954; --coral-dark:#C65A37;
  --ink:#3B2723; --ink-soft:#6B5550; --line:#EADBD2; --white:#fff;
  --radius:20px; --shadow:0 10px 30px rgba(59,39,35,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:400 1rem/1.6 "Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--coral-dark)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.25rem}

/* Top bar */
.topbar{max-width:1120px;margin:0 auto;padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center}
.wordmark{font-weight:700;font-size:1.25rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.wordmark::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--coral);margin-right:.45em;vertical-align:.05em}
.topbar-links{display:flex;gap:1.1rem}
.topbar-links a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem}
.topbar-links a:hover{color:var(--coral-dark)}

/* Hero */
.hero{max-width:1120px;margin:0 auto;padding:.5rem 1.25rem 3rem;display:grid;gap:2rem;align-items:center}
.eyebrow{display:inline-block;margin:0 0 .9rem;background:var(--cream-2);color:var(--coral-dark);font-weight:600;font-size:.85rem;padding:.3rem .8rem;border-radius:999px;letter-spacing:.02em}
.hero h1{margin:0 0 1rem;font-size:clamp(2.2rem,6.5vw,3.6rem);line-height:1.08;letter-spacing:-.02em;font-weight:700}
.hero h1 span{color:var(--coral)}
.lead{font-size:1.1rem;color:var(--ink-soft);margin:0 0 1.6rem;max-width:34rem}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{display:inline-block;text-decoration:none;font-weight:600;padding:.85rem 1.4rem;border-radius:999px;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--coral);color:#fff;box-shadow:0 6px 16px rgba(232,121,84,.35)}
.btn-primary:hover{background:var(--coral-dark)}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.hero-photo{margin:0;position:relative}
.hero-photo img{border-radius:28px;box-shadow:var(--shadow);aspect-ratio:4/5;object-fit:cover;width:100%}
.hero-photo figcaption{position:absolute;left:1rem;bottom:1rem;background:rgba(255,248,242,.94);color:var(--ink);font-weight:600;font-size:.85rem;padding:.35rem .8rem;border-radius:999px}

/* Sections */
section{padding:3.5rem 0}
h2{font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.15;letter-spacing:-.015em;margin:0 0 .5rem;font-weight:700}
.section-lead{color:var(--ink-soft);margin:0 0 1.75rem;max-width:44rem}

/* Moods */
.moods{background:var(--white)}
.mood-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.mood-grid img{border-radius:18px;aspect-ratio:4/5;object-fit:cover;width:100%}
.mood-grid p{margin:.6rem 0 0;font-weight:600;font-size:.95rem;line-height:1.35}
.mood-grid span{display:inline-block;background:var(--coral);color:#fff;font-size:.72rem;padding:.1rem .45rem;border-radius:6px;margin-right:.35rem;vertical-align:.1em}
.moods-cta{margin:1.5rem 0 0;font-weight:600}

/* Shelf */
.toy-grid{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem}
.toy{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.toy-art{position:relative}
.toy-art img{width:100%;aspect-ratio:4/3;object-fit:cover}
.art-tag{position:absolute;right:.6rem;top:.6rem;font-size:.68rem;font-weight:600;color:var(--ink-soft);background:rgba(255,255,255,.85);padding:.1rem .5rem;border-radius:999px}
.toy-body{padding:1.1rem 1.2rem .4rem;display:flex;flex-direction:column;flex:1}
.toy h3{margin:0 0 .35rem;font-size:1.1rem;line-height:1.3}
.toy-body p{margin:0 0 .75rem;color:var(--ink-soft);font-size:.95rem}
.toy .price{color:var(--ink);font-weight:600;margin-top:auto}
.buy{display:block;margin:0 1.2rem 1.3rem;text-align:center;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;padding:.75rem 1rem;border-radius:999px}
.buy:hover{background:var(--coral-dark)}
.shelf-notes{margin-top:1.75rem;font-size:.9rem;color:var(--ink-soft);max-width:46rem}
.shelf-notes p{margin:0 0 .6rem}
.soft-disclosure{font-style:italic}
.feature-tag{display:inline-block;align-self:flex-start;background:var(--coral);color:#fff!important;font-weight:600;font-size:.78rem!important;padding:.2rem .7rem;border-radius:999px;margin:0 0 .6rem!important;letter-spacing:.02em}
.toy-feature{border:2px solid var(--coral)}

/* Follow band */
.follow{background:var(--cream-2)}
.follow-inner{display:grid;gap:1.5rem;align-items:center}
.follow img{border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:1200/630;object-fit:cover;width:100%}
.follow p{color:var(--ink-soft);margin:0 0 1.25rem}

/* Legal + footer */
.legal{padding:2.5rem 0}
.legal h2{font-size:1.2rem}
.legal p{color:var(--ink-soft);font-size:.92rem;max-width:46rem}
footer{background:var(--ink);color:#F3E6DE;padding:2.25rem 0 2.75rem;font-size:.85rem}
footer p{margin:0 0 .6rem;max-width:52rem}
footer .foot-brand{font-weight:700;font-size:1.05rem;color:#fff}

@media (max-width:719px){
  .toy{flex-direction:row;flex-wrap:wrap}
  .toy-art{width:38%}
  .toy-art img{aspect-ratio:1/1;height:100%}
  .toy-body{width:62%;padding:.9rem 1rem .6rem}
  .toy-body p{font-size:.88rem;margin-bottom:.5rem}
  .toy .buy{width:calc(100% - 2rem);margin:0 1rem 1rem}
  .art-tag{right:auto;left:.5rem;top:.5rem}
  .toy-feature .toy-art,.toy-feature .toy-body{width:100%}
  .toy-feature .toy-art img{aspect-ratio:4/3;height:auto}
  .toy-feature .toy-body{padding:1rem 1.1rem .6rem}
  .toy-feature .art-tag{left:auto;right:.6rem;top:.6rem}
}
@media (min-width:720px){
  .mood-grid{grid-template-columns:repeat(4,1fr)}
  .toy-grid{grid-template-columns:repeat(2,1fr)}
  .toy-feature{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.2fr;grid-template-rows:1fr auto}
  .toy-feature .toy-art{grid-row:1/3}
  .toy-feature .toy-art img{height:100%}
  .toy-feature .toy-body{padding:1.5rem 1.6rem .4rem}
  .toy-feature h3{font-size:1.35rem}
  .toy-feature .buy{align-self:end;justify-self:start;margin:0 1.6rem 1.6rem;padding:.75rem 1.6rem}
  .follow-inner{grid-template-columns:1.1fr 1fr;gap:2.5rem}
}
@media (min-width:960px){
  .hero{grid-template-columns:1.15fr .85fr;gap:3.5rem;padding-top:1.5rem;padding-bottom:4rem}
  .toy-grid{grid-template-columns:repeat(4,1fr)}
  .toy-feature{grid-template-columns:1fr 1.4fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}