/* ============================================================
   Cosmo's Sweet Spot — boutique treat-shop theme
   Brand: pastel — baby blue / baby pink / warm yellow / light green
   ============================================================ */
:root{
  --chocolate:#5C463A;
  --chocolate-deep:#4A382E;
  --pink:#FFC9D4;
  --pink-dark:#E897A6;
  --blush:#FFE0E6;
  --cream:#FFF9F1;
  --cream-warm:#FFFDFA;
  --cocoa:#8A766B;
  --white:#FFFFFF;
  --blue:#A8D8F0;
  --blue-soft:#D8EEFA;
  --yellow:#FFE4A0;
  --green:#CFE8BC;
  --green-soft:#E4F3D5;
  --ink:#4A382E;
  --muted:#8A766B;
  --line:rgba(74,56,46,.14);
  --line-soft:rgba(74,56,46,.08);
  --shadow:0 18px 50px rgba(74,56,46,.08);
  --shadow-lg:0 26px 70px rgba(74,56,46,.14);
  --radius:20px;
  --radius-sm:14px;
  --max:1120px;
  --display:"Playfair Display", Georgia, serif;
  --body:"Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--body); color:var(--ink);
  background:var(--cream); line-height:1.65;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
ul{margin:0; padding:0; list-style:none}

.wrap{width:100%; max-width:var(--max); margin:0 auto; padding-inline:1.5rem}

/* ---------------- header ---------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(216,238,250,.94); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(74,56,46,.1);
  padding-top:env(safe-area-inset-top,0px);
}
.site-header-inner{display:flex; align-items:center; justify-content:space-between; padding:1rem 0}
.brand{display:flex; align-items:center; gap:.7rem; color:var(--chocolate)}
.brand-mark{width:42px; height:42px; flex:none}
.brand-svg{width:42px; height:42px}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-title{font-family:var(--display); font-weight:600; font-size:1.04rem; color:var(--chocolate)}
.brand-title .apos{color:var(--pink-dark)}
.brand-sub{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}

.nav-links{display:flex; align-items:center; gap:1.35rem; font-size:.9rem; font-weight:600}
.nav-links a{color:var(--cocoa)}
.nav-links a:hover{color:var(--chocolate-deep)}
.nav-links a.active{color:var(--pink-dark)}
.nav-links .nav-cta{
  color:var(--chocolate-deep); background:linear-gradient(135deg,var(--blush),var(--pink));
  padding:.55rem 1.15rem; border-radius:999px; box-shadow:0 4px 16px rgba(232,151,166,.28); font-weight:700;
}
.nav-links .nav-cta:hover{filter:brightness(1.04)}

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:10px; cursor:pointer;
  background:rgba(255,255,255,.55); border:1px solid rgba(74,56,46,.15); border-radius:10px;
}
.nav-toggle span{display:block; width:100%; height:2px; border-radius:2px; background:var(--chocolate); transition:transform .3s, opacity .3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-block; font-weight:700; font-size:1rem; cursor:pointer;
  padding:.85rem 1.6rem; border-radius:999px; border:2px solid transparent;
  transition:transform .15s, filter .15s, background .2s, box-shadow .2s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{color:var(--chocolate-deep); background:linear-gradient(135deg,var(--blush),var(--pink)); box-shadow:0 8px 22px rgba(232,151,166,.35)}
.btn-primary:hover{filter:brightness(1.04); box-shadow:0 12px 28px rgba(232,151,166,.45)}
.btn-choc{color:var(--chocolate-deep); background:linear-gradient(135deg,var(--blue-soft),var(--blue)); box-shadow:0 8px 22px rgba(168,216,240,.5)}
.btn-choc:hover{filter:brightness(1.02)}
.btn-ghost{color:var(--chocolate); background:transparent; border-color:rgba(74,56,46,.28)}
.btn-ghost:hover{background:rgba(74,56,46,.05)}
.hero .btn-ghost{color:var(--chocolate-deep); border-color:rgba(74,56,46,.35)}
.hero .btn-ghost:hover{background:rgba(74,56,46,.06)}
.btn-block{width:100%; text-align:center; margin-top:.5rem}
.btn-sm{padding:.6rem 1.1rem; font-size:.9rem}

/* ---------------- hero ---------------- */
.hero{
  background:
    radial-gradient(720px 420px at 82% -8%, rgba(255,201,212,.55), transparent 60%),
    radial-gradient(700px 380px at 12% 8%, rgba(168,216,240,.6), transparent 60%),
    radial-gradient(640px 360px at 92% 105%, rgba(255,228,160,.5), transparent 60%),
    radial-gradient(600px 340px at 4% 108%, rgba(207,232,188,.5), transparent 60%),
    linear-gradient(180deg, #EAF5FC 0%, #FFF9F1 100%);
  color:var(--ink); text-align:center; padding:4.5rem 0 4rem;
}
.hero-mascot{width:104px; height:104px; margin:0 auto 1.1rem; filter:drop-shadow(0 10px 26px rgba(74,56,46,.22))}
.hero-mascot svg{width:100%; height:100%}
.hero-logo{width:170px; margin:0 auto 1.2rem; filter:drop-shadow(0 12px 28px rgba(74,56,46,.25))}
.eyebrow{font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--pink-dark); margin:0 0 1rem}
.hero-title{font-family:var(--display); font-weight:700; font-size:clamp(2.3rem,6vw,3.7rem); line-height:1.08; margin:0 0 1.1rem}
.hero-title em{color:var(--pink-dark); font-style:italic}
.hero-sub{max-width:48ch; margin:0 auto 2rem; color:var(--muted); font-size:1.1rem}
.hero-actions{display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap}
.trust-strip{margin:2.4rem 0 0; font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(74,56,46,.6)}
.trust-strip span{white-space:nowrap}

/* ---------------- sections ---------------- */
.section{padding:4.5rem 0}
.section-alt{background:var(--cream-warm)}
.section-blush{background:linear-gradient(180deg, #FFF0F4 0%, #FFF7E6 100%)}
.section-head{text-align:center; max-width:50ch; margin:0 auto 2.6rem}
.kicker{font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--pink-dark); font-weight:700; margin:0 0 .6rem}
.section-title{font-family:var(--display); font-weight:600; font-size:clamp(1.7rem,3.6vw,2.5rem); color:var(--chocolate); margin:0 0 .7rem; line-height:1.15}
.section-sub{color:var(--muted); margin:0; font-size:1.04rem}

/* ---------------- cards ---------------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.9rem 1.6rem; box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s;
  display:flex; flex-direction:column;
}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}
.card-art{
  height:120px; border-radius:var(--radius-sm); margin-bottom:1.1rem;
  display:grid; place-items:center; overflow:hidden;
}
.card-art svg{width:72px; height:72px}
.card h3{font-family:var(--display); font-weight:600; font-size:1.22rem; color:var(--chocolate); margin:0 0 .5rem}
.card p{margin:0; color:var(--muted)}
.card .card-meta{margin-top:.8rem; font-weight:700; color:var(--chocolate); font-size:.95rem}
.card .card-link{margin-top:.8rem; color:var(--pink-dark); font-weight:700; font-size:.92rem}

/* art backgrounds */
.art-pink{background:linear-gradient(135deg,#FFE0E6,#FFC9D4)}
.art-choc{background:linear-gradient(135deg,#E4F3D5,#CFE8BC)}
.art-cream{background:linear-gradient(135deg,#FFF3C9,#FFE4A0)}
.art-blue{background:linear-gradient(135deg,#D8EEFA,#A8D8F0)}

/* ---------------- flavor / chip strips ---------------- */
.chip-strip{margin-top:2.6rem; padding:2rem; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.chip-title{font-family:var(--display); font-weight:600; font-size:1.1rem; color:var(--chocolate); margin:0 0 .8rem; text-align:center}
.chip-title:not(:first-child){margin-top:1.6rem}
.chips{display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem}
.chips span{display:inline-block; font-size:.86rem; font-weight:600; color:var(--chocolate); background:var(--cream); padding:.45rem 1rem; border-radius:999px; border:1px solid var(--line)}

/* ---------------- steps ---------------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem}
.step{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.4rem; box-shadow:var(--shadow)}
.step-num{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; font-family:var(--display); font-weight:700; font-size:1.2rem; color:#fff; background:linear-gradient(135deg,var(--pink-dark),var(--chocolate)); margin-bottom:.9rem}
.step h3{font-family:var(--display); font-weight:600; font-size:1.1rem; color:var(--chocolate); margin:0 0 .4rem}
.step p{margin:0; color:var(--muted); font-size:.96rem}

/* ---------------- story ---------------- */
.story-inner{display:grid; grid-template-columns:.9fr 1.1fr; gap:3rem; align-items:center}
.story-mascot{display:flex; justify-content:center}
.story-mascot img{width:170px; height:170px; border-radius:50%; object-fit:cover; filter:drop-shadow(0 14px 34px rgba(74,56,46,.16))}
.story-text .section-title{text-align:left}
.story-text .kicker{text-align:left}
.story-lead{font-family:var(--display); font-weight:600; font-size:1.16rem; color:var(--chocolate); font-style:italic; margin-bottom:1rem}
.story-text p{color:var(--muted); margin-bottom:1rem; line-height:1.7}
.story-values{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.4rem}
.value{font-weight:700; font-size:.9rem; color:var(--chocolate); display:flex; align-items:center; gap:.45rem; background:var(--white); padding:.55rem .95rem; border-radius:999px; border:1px solid var(--line)}
.value span{font-size:1.1rem}
.eye-note{display:flex; align-items:center; gap:.6rem; margin-top:1.3rem; font-size:.88rem; color:var(--cocoa)}
.eye-swatch{display:inline-block; width:14px; height:14px; border-radius:50%; border:1px solid var(--line)}

/* ---------------- order form ---------------- */
.order-inner{display:grid; grid-template-columns:.85fr 1.15fr; gap:3rem; align-items:start}
.order-intro{position:sticky; top:120px}
.order-intro .section-title{text-align:left}
.order-intro p{color:var(--muted)}
.order-note{margin-top:1.4rem; padding:1rem 1.2rem; background:var(--cream); border-radius:var(--radius); border:1px solid var(--line); font-size:.92rem; color:var(--muted)}
.order-note strong{color:var(--chocolate)}
.order-note a{color:var(--pink-dark); font-weight:700}
.order-form{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.8rem; box-shadow:var(--shadow)}
.field{margin-bottom:1.1rem}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
label{display:block; font-weight:700; font-size:.9rem; margin-bottom:.4rem; color:var(--chocolate)}
label .opt{font-weight:400; color:var(--muted)}
input,select,textarea{
  width:100%; padding:.8rem .9rem; font:inherit; color:var(--ink);
  background:var(--cream-warm); border:1.5px solid var(--line); border-radius:12px; outline:none; transition:border-color .2s, background .2s;
}
input:focus,select:focus,textarea:focus{border-color:var(--pink-dark); background:#fff}
.form-status{text-align:center; margin:.9rem 0 0; min-height:1.2em; font-weight:700}
.form-status.ok{color:#2e7d4f}
.form-status.err{color:#b3402f}

/* ---------------- contact ---------------- */
.contact-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem}
.contact-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem 1.5rem; text-align:center; box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s}
.contact-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.contact-icon{font-size:2rem; margin-bottom:.6rem}
.contact-card h3{font-family:var(--display); font-weight:600; font-size:1.15rem; color:var(--chocolate); margin:0 0 .4rem}
.contact-card p{margin:0; color:var(--muted); line-height:1.5}
.contact-card a{color:var(--pink-dark); font-weight:700}
.contact-meta{display:block; margin-top:.5rem; font-size:.78rem; color:var(--muted); font-style:italic}

/* ---------------- product page ---------------- */
.page-hero{
  background:
    radial-gradient(700px 340px at 85% -10%, rgba(255,201,212,.5), transparent 60%),
    radial-gradient(600px 320px at 10% -10%, rgba(168,216,240,.55), transparent 60%),
    linear-gradient(180deg, #EAF5FC, #FFF9F1);
  color:var(--ink); padding:3.4rem 0 3rem; text-align:center;
}
.crumbs{font-size:.8rem; letter-spacing:.06em; color:var(--muted); margin-bottom:1rem}
.crumbs a{color:var(--cocoa)}
.crumbs a:hover{color:var(--chocolate-deep)}
.page-hero h1{font-family:var(--display); font-weight:700; font-size:clamp(2rem,5vw,3rem); margin:0 0 .8rem; line-height:1.1}
.page-hero .lede{max-width:52ch; margin:0 auto; color:var(--muted); font-size:1.1rem}

.page-body{display:grid; grid-template-columns:1.25fr .75fr; gap:3rem; align-items:start}
.page-body h2{font-family:var(--display); font-weight:600; font-size:1.5rem; color:var(--chocolate); margin:0 0 .8rem}
.page-body p{color:var(--muted); margin:0 0 1rem; line-height:1.7}
.page-body ul{margin:0 0 1.4rem}
.page-body ul li{position:relative; padding-left:1.4rem; margin-bottom:.5rem; color:var(--muted)}
.page-body ul li::before{content:"✦"; position:absolute; left:0; color:var(--pink-dark)}
.aside-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow); position:sticky; top:110px}
.aside-card h3{font-family:var(--display); font-weight:600; font-size:1.15rem; color:var(--chocolate); margin:0 0 .8rem}
.aside-card p{color:var(--muted); font-size:.95rem; margin:0 0 .9rem}
.aside-card .price-row{display:flex; justify-content:space-between; padding:.55rem 0; border-top:1px solid var(--line-soft); font-size:.93rem; color:var(--cocoa)}
.aside-card .price-row b{color:var(--chocolate)}

/* FAQ */
.faq{margin-top:2.4rem}
.faq-item{border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--white); margin-bottom:.8rem; overflow:hidden}
.faq-q{width:100%; text-align:left; padding:1rem 1.2rem; font:inherit; font-weight:700; color:var(--chocolate); background:transparent; border:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem}
.faq-q::after{content:"+"; font-size:1.4rem; color:var(--pink-dark); transition:transform .2s; flex:none}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease}
.faq-a p{padding:0 1.2rem 1.1rem; margin:0; color:var(--muted)}
.faq-item.open .faq-a{max-height:400px}

/* ---------------- article (blog) ---------------- */
.article-body{max-width:720px; margin:0 auto}
.article-body h2{font-family:var(--display); font-weight:600; font-size:1.5rem; color:var(--chocolate); margin:2.2rem 0 .8rem}
.article-body p{color:var(--muted); margin:0 0 1.1rem; line-height:1.8; font-size:1.03rem}
.article-body ul{margin:0 0 1.2rem}
.article-body ul li{position:relative; padding-left:1.4rem; margin-bottom:.5rem; color:var(--muted); line-height:1.7}
.article-body ul li::before{content:"✦"; position:absolute; left:0; color:var(--pink-dark)}
.article-meta{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1rem; font-size:.82rem; color:var(--cocoa)}
.callout{background:var(--white); border-left:4px solid var(--pink); border-radius:var(--radius-sm); padding:1.3rem 1.5rem; margin:1.5rem 0; box-shadow:var(--shadow)}
.callout p{margin:0; color:var(--chocolate)}
.callout strong{color:var(--pink-dark)}

/* ---------------- footer ---------------- */
.site-footer{background:linear-gradient(180deg, #EAF5DC, #CFE8BC); color:var(--cocoa); padding:3.4rem 0 2rem}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.4rem; margin-bottom:2.4rem}
.footer-brand{font-family:var(--display); font-weight:600; font-size:1.2rem; color:var(--chocolate)}
.footer-brand .apos{color:var(--pink-dark)}
.footer-tag{margin:.4rem 0 0; font-size:.9rem; color:var(--cocoa); max-width:34ch; line-height:1.6}
.footer-col h4{font-family:var(--display); font-weight:600; font-size:.95rem; color:var(--chocolate); margin:0 0 .9rem}
.footer-col a{display:block; color:var(--cocoa); font-size:.9rem; padding:.28rem 0}
.footer-col a:hover{color:var(--pink-dark)}
.footer-col p{color:var(--cocoa); font-size:.9rem; margin:0 0 .3rem; line-height:1.6}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; border-top:1px solid rgba(74,56,46,.14); padding-top:1.6rem; font-size:.84rem; color:var(--cocoa)}

/* ---------------- responsive ---------------- */
@media (max-width:960px){
  .nav-toggle{display:flex}
  .site-header-inner{padding-top:1.1rem}
  .nav-links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--blue-soft); border-bottom:1px solid rgba(74,56,46,.1);
    max-height:0; overflow:hidden; transition:max-height .35s ease;
  }
  .nav-links.open{max-height:88vh; overflow:auto}
  .nav-links a{padding:1rem 1.5rem; border-top:1px solid rgba(74,56,46,.08)}
  .nav-links .nav-cta{margin:.8rem 1.5rem 1rem; text-align:center}
  .card-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .story-inner{grid-template-columns:1fr; gap:2rem}
  .story-mascot{order:-1}
  .story-mascot img{width:130px; height:130px}
  .story-text .section-title,.story-text .kicker{text-align:center}
  .story-values{justify-content:center}
  .order-inner{grid-template-columns:1fr; gap:1.6rem}
  .order-intro{position:static}
  .order-intro .section-title{text-align:center}
  .page-body{grid-template-columns:1fr; gap:2rem}
  .aside-card{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .card-grid,.steps{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero{padding:3.4rem 0 3rem}
  .section{padding:3.4rem 0}
  .brand-sub{display:none}
  .hero-mascot{width:82px; height:82px}
  .chip-strip{padding:1.4rem}
}