/* ==========================================================================
   KUMO SODA — main.css
   Mobile-first. Written source-order low-to-high (base > components > sections
   > utilities) then min-width media queries layer up from there.
   ========================================================================== */

/* ---------- Reset-lite ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
img, svg { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
input, textarea { font: inherit; }
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.kumo-skip-link{position:fixed;top:-100px;left:12px;z-index:9999;background:var(--kumo-ink);color:#fff;padding:.8em 1.2em;border-radius:8px;transition:top .2s ease;}
.kumo-skip-link:focus{top:12px;}
:focus-visible{outline:3px solid var(--kumo-fiber);outline-offset:2px;}

/* ---------- Base ---------- */
body{
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color:var(--kumo-ink);
  background:var(--kumo-cream);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Baloo 2', 'Plus Jakarta Sans', sans-serif;
  font-weight:700;
  line-height:1.08;
  margin:0 0 .4em;
  letter-spacing:-.01em;
}
p{margin:0 0 1em;}
.kumo-container{width:100%;max-width:1280px;margin-inline:auto;padding-inline:20px;}

/* ---------- Eyebrow / tag / badge ---------- */
.kumo-eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--kumo-fiber); background:var(--kumo-fiber-light);
  padding:.4em .9em; border-radius:99px; margin-bottom:.9em;
}
.kumo-eyebrow--light{background:rgba(255,255,255,.12); color:var(--kumo-paper);}
.kumo-tag{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:.72rem;
  color:var(--kumo-fiber); background:var(--kumo-fiber-light);
  padding:.35em .7em; border-radius:6px; margin-top:.8em;
}
.kumo-badge{
  display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; padding:.3em .6em; border-radius:6px; margin-right:.4em;
}
.kumo-badge--sale{background:var(--kumo-mango); color:#fff;}
.kumo-badge--low{background:var(--kumo-ink); color:#fff;}

/* ---------- Buttons ---------- */
.kumo-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:'Baloo 2', sans-serif; font-weight:700; font-size:1rem;
  padding:.85em 1.6em; border-radius:99px; border:2px solid transparent;
  cursor:pointer; transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, background .18s ease;
  will-change:transform;
}
.kumo-btn:hover{transform:translateY(-2px);}
.kumo-btn:active{transform:translateY(0) scale(.98);}
.kumo-btn--primary{background:var(--kumo-ink); color:var(--kumo-cream); box-shadow:0 6px 0 0 rgba(0,0,0,.15);}
.kumo-btn--primary:hover{box-shadow:0 8px 0 0 rgba(0,0,0,.15);}
.kumo-btn--ghost{border-color:var(--kumo-ink); color:var(--kumo-ink);}
.kumo-btn--ghost:hover{background:var(--kumo-ink); color:var(--kumo-cream);}
.kumo-btn--add{width:100%; background:var(--kumo-ink); color:#fff; font-size:.9rem; padding:.7em 1em; box-shadow:0 4px 0 0 rgba(0,0,0,.15);}
.kumo-btn--add.loading{opacity:.6; pointer-events:none;}
.kumo-btn--add.added::after{content:" ✓";}
.kumo-link-arrow{
  font-family:'Baloo 2', sans-serif; font-weight:700; color:var(--kumo-ink);
  display:inline-flex; align-items:center; gap:.3em; transition:gap .18s ease;
}
.kumo-link-arrow:hover{gap:.55em;}

/* ==========================================================================
   HEADER
   ========================================================================== */
.kumo-header{
  position:sticky; top:0; z-index:500;
  background:rgba(251,245,230,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(24,20,15,.08);
  transition:padding .25s ease, box-shadow .25s ease;
}
.kumo-header.is-scrolled{box-shadow:0 4px 24px rgba(24,20,15,.06);}
.kumo-header__inner{display:flex; align-items:center; justify-content:space-between; padding-block:14px; gap:16px;}
.kumo-logo{display:flex; align-items:center; gap:8px; color:var(--kumo-ink);}
.kumo-logo__mark{color:var(--kumo-mango); display:inline-flex;}
.kumo-logo__text{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.5rem; letter-spacing:-.01em;}
.kumo-logo__text--light{color:var(--kumo-paper);}

.kumo-nav{
  position:fixed; inset:0 0 0 auto; width:min(86vw,360px);
  background:var(--kumo-ink); color:var(--kumo-cream);
  padding:96px 28px 40px; transform:translateX(100%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  z-index:400; overflow-y:auto;
}
.kumo-nav.is-open{transform:translateX(0);}
.kumo-nav-list{display:flex; flex-direction:column; gap:6px;}
.kumo-nav-list a{
  font-family:'Baloo 2',sans-serif; font-size:1.4rem; font-weight:600;
  padding:.5em 0; display:block; border-bottom:1px solid rgba(255,255,255,.08);
}
.kumo-header__actions{display:flex; align-items:center; gap:14px;}
.kumo-cart-link{position:relative; display:inline-flex;}
.kumo-cart-count{
  position:absolute; top:-8px; right:-10px; background:var(--kumo-mango); color:#fff;
  font-size:.65rem; font-weight:700; min-width:18px; height:18px; border-radius:99px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
  transition:transform .2s ease;
}
.kumo-cart-count.kumo-pulse{animation:kumoPulse .4s ease;}
@keyframes kumoPulse{0%{transform:scale(1);}40%{transform:scale(1.5);}100%{transform:scale(1);}}

.kumo-menu-toggle{width:34px; height:26px; position:relative; z-index:401; flex-shrink:0;}
.kumo-menu-toggle__bar{
  display:block; width:100%; height:2px; background:currentColor; margin:7px 0;
  transition:transform .3s ease, opacity .2s ease;
}
.kumo-menu-toggle[aria-expanded="true"]{color:var(--kumo-cream); position:relative;}
.kumo-menu-toggle[aria-expanded="true"] .kumo-menu-toggle__bar:nth-child(1){transform:translateY(9px) rotate(45deg);}
.kumo-menu-toggle[aria-expanded="true"] .kumo-menu-toggle__bar:nth-child(2){opacity:0;}
.kumo-menu-toggle[aria-expanded="true"] .kumo-menu-toggle__bar:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

.kumo-nav-scrim{
  position:fixed; inset:0; background:rgba(24,20,15,.4); opacity:0; pointer-events:none;
  transition:opacity .3s ease; z-index:399;
}
.kumo-nav-scrim.is-open{opacity:1; pointer-events:auto;}

/* ==========================================================================
   REVEAL / MOTION UTILITIES
   ========================================================================== */
[data-kumo-reveal]{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
[data-kumo-reveal].is-visible{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  [data-kumo-reveal]{opacity:1; transform:none; transition:none;}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.kumo-hero{position:relative; overflow:hidden; padding-block:56px 40px;}
.kumo-hero__bg{position:absolute; inset:0; z-index:0; overflow:hidden;}
.kumo-blob{position:absolute; border-radius:50%; filter:blur(2px); opacity:.55;}
.kumo-blob--yellow{width:340px; height:340px; background:var(--kumo-yellow); top:-120px; right:-100px; animation:kumoDrift 14s ease-in-out infinite;}
.kumo-blob--pink{width:260px; height:260px; background:var(--kumo-pink); bottom:-100px; left:-80px; animation:kumoDrift 18s ease-in-out infinite reverse;}
@keyframes kumoDrift{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(20px,-16px) scale(1.06);}}
.kumo-bubble{position:absolute; border-radius:50%; background:rgba(255,255,255,.55); animation:kumoRise 7s ease-in infinite;}
.kumo-bubble--1{width:14px; height:14px; left:20%; bottom:-20px; animation-delay:0s;}
.kumo-bubble--2{width:9px; height:9px; left:55%; bottom:-20px; animation-delay:1.6s;}
.kumo-bubble--3{width:18px; height:18px; left:75%; bottom:-20px; animation-delay:3s;}
.kumo-bubble--4{width:11px; height:11px; left:38%; bottom:-20px; animation-delay:4.4s;}
@keyframes kumoRise{
  0%{transform:translateY(0) translateX(0); opacity:0;}
  10%{opacity:.8;}
  100%{transform:translateY(-420px) translateX(12px); opacity:0;}
}
.kumo-hero__grid{position:relative; z-index:1; display:grid; gap:40px;}
.kumo-hero__title{font-size:clamp(2.4rem,9vw,4.6rem);}
.kumo-hero__lede{font-size:1.05rem; max-width:46ch; color:rgba(24,20,15,.75);}
.kumo-hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin:26px 0 32px;}
.kumo-hero__stats{display:flex; gap:28px; flex-wrap:wrap;}
.kumo-hero__stats dt{font-family:'JetBrains Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; opacity:.6;}
.kumo-hero__stats dd{margin:2px 0 0; font-family:'Baloo 2',sans-serif; font-size:1.7rem; font-weight:700;}

.kumo-hero__art{display:flex; justify-content:center; perspective:900px;}
.kumo-can{
  position:relative; width:180px; height:340px; border-radius:26px 26px 34px 34px;
  background:linear-gradient(160deg,var(--kumo-yellow) 0%,var(--kumo-yellow-deep) 100%);
  box-shadow:0 30px 60px -20px rgba(24,20,15,.35), inset 0 0 0 1px rgba(255,255,255,.25);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding-bottom:26px; transform:rotate(-4deg);
  transition:transform .25s ease;
  animation:kumoFloat 5s ease-in-out infinite;
}
@keyframes kumoFloat{0%,100%{transform:rotate(-4deg) translateY(0);}50%{transform:rotate(-2deg) translateY(-10px);}}
.kumo-can::before{
  content:""; position:absolute; top:0; left:14%; width:18%; height:100%;
  background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));
  border-radius:20px;
}
.kumo-can__cloud{width:70%; margin-bottom:8px;}
.kumo-can__label{font-family:'Baloo 2',sans-serif; font-weight:700; color:var(--kumo-ink); font-size:.95rem;}

/* ==========================================================================
   DIVIDER (signature cloud-swirl motif)
   ========================================================================== */
.kumo-divider{line-height:0;}
.kumo-divider svg{width:100%; height:56px;}

/* ==========================================================================
   SECTION HEAD
   ========================================================================== */
.kumo-section-head{margin-bottom:32px; position:relative;}
.kumo-section-head h2{font-size:clamp(1.8rem,5vw,2.6rem);}
.kumo-section-head .kumo-link-arrow{margin-top:10px; display:inline-flex;}

/* ==========================================================================
   FLAVOR GRID
   ========================================================================== */
.kumo-flavors{padding-block:56px; background:var(--kumo-paper);}
.kumo-flavor-grid{display:grid; gap:22px; grid-template-columns:1fr;}
.kumo-flavor-card{
  border-radius:28px; padding:30px 26px; position:relative; overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  box-shadow:0 14px 30px -14px rgba(24,20,15,.2);
}
.kumo-flavor-card:hover{transform:translateY(-8px) rotate(-.6deg); box-shadow:0 26px 40px -16px rgba(24,20,15,.28);}
.kumo-flavor-card--yellow{background:linear-gradient(160deg,var(--kumo-yellow),#f7d668);}
.kumo-flavor-card--pink{background:linear-gradient(160deg,var(--kumo-pink),#f6c4d8);}
.kumo-flavor-card--mango{background:linear-gradient(160deg,var(--kumo-mango),#f0ab72);}
.kumo-flavor-card h3{font-size:1.5rem; margin-top:.2em;}
.kumo-flavor-card p{color:rgba(24,20,15,.75); font-size:.95rem;}
.kumo-flavor-card__art{height:64px; display:flex; align-items:flex-end;}
.kumo-can-mini{
  display:inline-block; width:34px; height:64px; border-radius:9px 9px 12px 12px;
  background:var(--kumo-ink); position:relative; box-shadow:0 8px 16px -6px rgba(24,20,15,.4);
}
.kumo-can-mini--yellow{background:linear-gradient(160deg,var(--kumo-yellow-deep),var(--kumo-ink) 140%);}
.kumo-can-mini--pink{background:linear-gradient(160deg,var(--kumo-pink-deep),var(--kumo-ink) 140%);}
.kumo-can-mini--mango{background:linear-gradient(160deg,var(--kumo-mango-deep),var(--kumo-ink) 140%);}

/* ==========================================================================
   FIBER / INGREDIENT SECTION (dark)
   ========================================================================== */
.kumo-fiber{background:var(--kumo-ink); color:var(--kumo-cream); padding-block:60px;}
.kumo-fiber__grid{display:grid; gap:36px;}
.kumo-fiber p{color:rgba(251,245,230,.72);}
.kumo-fiber__list{display:flex; flex-direction:column; gap:22px;}
.kumo-fiber__list li{display:flex; gap:16px; align-items:flex-start;}
.kumo-fiber__num{font-family:'JetBrains Mono',monospace; font-size:.8rem; color:var(--kumo-yellow); padding-top:.3em;}
.kumo-fiber__list h3{font-size:1.1rem; margin-bottom:.2em;}
.kumo-fiber__list p{margin:0; font-size:.92rem;}

/* ==========================================================================
   PRODUCT GRID (WooCommerce)
   ========================================================================== */
.kumo-shop-teaser{padding-block:60px;}
.kumo-product-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.kumo-product-card{
  background:var(--kumo-paper); border-radius:20px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 10px 24px -16px rgba(24,20,15,.3);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.kumo-product-card:hover{transform:translateY(-6px); box-shadow:0 18px 30px -14px rgba(24,20,15,.32);}
.kumo-product-card__link{display:block;}
.kumo-product-card__media{aspect-ratio:4/5; background:var(--kumo-fiber-light); position:relative; overflow:hidden;}
.kumo-product-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.kumo-product-card:hover .kumo-product-card__media img{transform:scale(1.06);}
.kumo-product-card__body{padding:14px 16px 6px;}
.kumo-product-card__title{font-size:1rem; margin:0 0 .2em;}
.kumo-product-card__price{font-family:'JetBrains Mono',monospace; font-size:.9rem; color:var(--kumo-fiber);}
.kumo-product-card__action{padding:10px 16px 16px;}

/* ==========================================================================
   NEWSLETTER / CTA
   ========================================================================== */
.kumo-cta{background:var(--kumo-pink); padding-block:60px;}
.kumo-cta__inner{text-align:center; max-width:640px; margin-inline:auto;}
.kumo-cta h2{font-size:clamp(1.6rem,5vw,2.3rem);}
.kumo-newsletter{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; justify-content:center;}
.kumo-newsletter input{
  flex:1 1 220px; padding:.9em 1.2em; border-radius:99px; border:2px solid var(--kumo-ink);
  background:var(--kumo-paper);
}
.kumo-newsletter button{
  background:var(--kumo-ink); color:#fff; padding:.9em 1.6em; border-radius:99px;
  font-family:'Baloo 2',sans-serif; font-weight:700; transition:transform .2s ease;
}
.kumo-newsletter button:hover{transform:translateY(-2px);}
.kumo-newsletter__note{margin-top:10px; font-size:.85rem; min-height:1.2em;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.kumo-footer{background:var(--kumo-ink); color:var(--kumo-cream);}
.kumo-footer__inner{padding-bottom:20px;}
.kumo-footer__grid{display:grid; gap:34px; padding-block:20px 40px;}
.kumo-footer__brand p{color:rgba(251,245,230,.7); font-size:.92rem; max-width:38ch;}
.kumo-footer__social{display:flex; gap:12px; margin-top:14px;}
.kumo-footer__social a{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition:background .2s ease, transform .2s ease;}
.kumo-footer__social a:hover{background:var(--kumo-yellow); color:var(--kumo-ink); transform:translateY(-3px);}
.widget-title{font-family:'Baloo 2',sans-serif; font-size:1rem; margin-bottom:.8em;}
.kumo-footer__links{display:flex; flex-direction:column; gap:.5em;}
.kumo-footer__links a{color:rgba(251,245,230,.75); font-size:.92rem; transition:color .2s ease;}
.kumo-footer__links a:hover{color:var(--kumo-yellow);}
.kumo-footer__bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-block:18px; border-top:1px solid rgba(255,255,255,.1); font-size:.8rem; color:rgba(251,245,230,.55);}

/* ==========================================================================
   BLOG / SINGLE / PAGE / 404 / SEARCH / COMMENTS
   ========================================================================== */
.kumo-blog{padding-block:48px 72px;}
.kumo-archive-header{margin-bottom:36px;}
.kumo-blog__layout{display:grid; gap:36px;}
.kumo-post-card{background:var(--kumo-paper); border-radius:20px; overflow:hidden; margin-bottom:24px; box-shadow:0 10px 24px -18px rgba(24,20,15,.3);}
.kumo-post-card__thumb img{aspect-ratio:16/9; object-fit:cover; width:100%;}
.kumo-post-card__body{padding:20px;}
.kumo-post-card__meta{font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--kumo-fiber); margin-bottom:.6em;}
.kumo-post-card__meta .kumo-meta-sep{margin:0 .4em;}
.kumo-post-card__title{font-size:1.3rem; margin-bottom:.3em;}
.kumo-post-card__title a:hover{color:var(--kumo-mango-deep);}

.kumo-single{padding-block:48px 72px; max-width:760px;}
.kumo-single__header h1{font-size:clamp(1.9rem,6vw,2.8rem);}
.kumo-single__meta{font-family:'JetBrains Mono',monospace; font-size:.75rem; color:var(--kumo-fiber); margin-bottom:24px;}
.kumo-single__thumb img{border-radius:20px; margin-bottom:28px;}
.kumo-single__content{font-size:1.05rem;}
.kumo-single__content h2{margin-top:1.4em;}
.kumo-single__content img{border-radius:14px;}

.kumo-page{padding-block:48px 72px; max-width:820px;}
.kumo-page__header h1{font-size:clamp(1.9rem,6vw,2.8rem);}
.kumo-page__thumb img{border-radius:20px; margin:20px 0;}

.kumo-404{padding-block:100px; text-align:center;}
.kumo-404__inner{max-width:460px; margin-inline:auto;}
.kumo-404__can{margin:0 auto 24px; width:60px; height:110px;}
.kumo-404 .kumo-search-form{margin:26px 0;}

.kumo-search-form{display:flex; border:2px solid var(--kumo-ink); border-radius:99px; overflow:hidden;}
.kumo-search-form__input{flex:1; border:0; padding:.8em 1.2em; background:transparent;}
.kumo-search-form__submit{padding:0 1.2em; background:var(--kumo-ink); color:#fff;}

.kumo-comments{margin-top:48px; max-width:760px;}
.kumo-comments__list{margin-top:20px;}
.kumo-comment-form textarea, .kumo-comment-form input[type="text"], .kumo-comment-form input[type="email"], .kumo-comment-form input[type="url"]{
  width:100%; padding:.8em 1em; border-radius:12px; border:1px solid rgba(24,20,15,.2); margin-bottom:12px; background:var(--kumo-paper);
}
.kumo-comment-form .form-submit input{
  background:var(--kumo-ink); color:#fff; padding:.8em 1.6em; border-radius:99px; font-family:'Baloo 2',sans-serif; font-weight:700; border:0;
}

/* ==========================================================================
   MOBILE MENU SCRIM ELEMENT injected via JS uses .kumo-nav-scrim above.
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE — tablet & up
   ========================================================================== */
@media (min-width: 700px){
  .kumo-flavor-grid{grid-template-columns:repeat(3,1fr);}
  .kumo-product-grid{grid-template-columns:repeat(3,1fr);}
  .kumo-blog__layout{grid-template-columns:2fr 1fr;}
  .kumo-fiber__grid{grid-template-columns:1fr 1fr; align-items:center;}
}

@media (min-width: 960px){
  .kumo-nav{position:static; width:auto; background:none; color:inherit; transform:none; padding:0; overflow:visible;}
  .kumo-nav-list{flex-direction:row; gap:28px;}
  .kumo-nav-list a{border:0; padding:.2em 0; font-size:1rem; position:relative;}
  .kumo-nav-list a::after{content:"";position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--kumo-mango); transition:width .2s ease;}
  .kumo-nav-list a:hover::after{width:100%;}
  .kumo-menu-toggle{display:none;}
  .kumo-nav-scrim{display:none;}

  .kumo-hero__grid{grid-template-columns:1.1fr .9fr; align-items:center;}
  .kumo-hero__art{justify-content:flex-end;}
  .kumo-product-grid{grid-template-columns:repeat(4,1fr);}
}

@media (min-width: 1200px){
  .kumo-hero{padding-block:88px 60px;}
  .kumo-can{width:220px; height:400px;}
}