/* =========================================================================
   CozyThreads by Wazha — shared stylesheet
   Design language: hand-doodled crochet zine. Every card is a soft yarn
   "puff" — rounded, a little wonky, trimmed with a scalloped crochet edge
   like the picot trim on a granny square. Doodled stars, hearts, hooks and
   yarn balls float through every section.
   Type: Baloo 2 (bubbly display) + Quicksand (soft body) + Caveat (marker/
   handwriting for tags, quotes & little asides)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Quicksand:wght@400;500;600;700&family=Caveat:wght@500;600;700&display=swap');

:root{
  /* ---- colorway: peach-and-berry, straight off the yarn shelf ---- */
  --flax:      #FFF1E4;   /* soft peach page background */
  --flax-deep: #FFE1C7;   /* deeper peach, section stripes */
  --paper:     #FFFBF6;   /* card / tag background, warm white */
  --ink:       #6B3F4D;   /* cocoa-berry brown, used for body text */
  --ink-soft:  #8C6070;   /* softer mauve-brown for supporting copy */
  --ink-faint: #C39AA8;   /* faint mauve for meta / placeholders */
  --berry:     #FF6F91;   /* bubblegum pink — the hero accent */
  --berry-deep:#E8547A;   /* deeper pink for hover / emphasis */
  --thread:    #FFC7D8;   /* pale pink "thread" for trims & dashes */
  --line:      #FFDCE8;   /* faint divider pink */
  --mustard:   #FFC93C;   /* sunshine-yellow star accent */
  --moss:      #7FD9A8;   /* mint green — availability / success */
  --indigo:    #C9A8F5;   /* lilac — rare third accent */
  --shadow-tag: 3px 4px 0 rgba(232,84,122,0.16);
  --shadow-tag-hover: 5px 7px 0 rgba(232,84,122,0.22);
  --radius-soft: 18px;
  --radius-pill: 999px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Quicksand', sans-serif;
  color:var(--ink);
  background:var(--flax);
  background-image:
    radial-gradient(rgba(255,111,145,0.07) 1.5px, transparent 1.5px);
  background-size:16px 16px;
  font-weight:500;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  color:var(--ink);
  line-height:1.15;
  letter-spacing:0.001em;
}
em, .ital{font-family:'Caveat', cursive; font-style:normal; font-weight:600; color:var(--berry-deep);}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
img{max-width:100%; display:block;}
ul{list-style:none;}
.container{max-width:1240px; margin:0 auto; padding:0 32px;}
::selection{background:var(--berry); color:var(--paper);}
:focus-visible{outline:3px dashed var(--berry); outline-offset:3px; border-radius:6px;}

.label{
  font-family:'Caveat', cursive;
  font-size:0.95rem;
  letter-spacing:0.02em;
  color:var(--ink-faint);
  font-weight:600;
}
.eyebrow{
  font-family:'Caveat', cursive;
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:0.01em;
  color:var(--berry);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{content:'✿'; font-size:0.85rem; color:var(--mustard); display:inline-block;}

/* ---------- doodles: floating stars / hearts / sparkles used across the page ---------- */
.doodle{position:absolute; pointer-events:none; z-index:1; opacity:0.9;}
.doodle svg{width:100%; height:100%; display:block;}
.doodle.spin{animation:doodle-spin 7s linear infinite;}
.doodle.bob{animation:doodle-bob 3.4s ease-in-out infinite;}
.doodle.twinkle{animation:doodle-twinkle 2.4s ease-in-out infinite;}
@keyframes doodle-spin{ to{ transform:rotate(360deg); } }
@keyframes doodle-bob{ 0%,100%{transform:translateY(0) rotate(-4deg);} 50%{transform:translateY(-9px) rotate(4deg);} }
@keyframes doodle-twinkle{ 0%,100%{opacity:0.35; transform:scale(0.85);} 50%{opacity:1; transform:scale(1.1);} }
@media (prefers-reduced-motion: reduce){
  .doodle.spin, .doodle.bob, .doodle.twinkle{animation:none;}
}

/* ---------- scalloped "crochet trim" edge — the signature shape ----------
   used anywhere a card, box or bar wants to look edged in picot stitches */
.scallop-bottom{position:relative;}
.scallop-bottom::after{
  content:''; position:absolute; left:0; right:0; bottom:-11px; height:14px;
  background-image: radial-gradient(circle at 9px 0, transparent 9px, var(--paper) 9.5px);
  background-size:18px 14px; background-repeat:repeat-x;
  filter:drop-shadow(0 3px 0 rgba(232,84,122,0.08));
}
.scallop-top::before{
  content:''; position:absolute; left:0; right:0; top:-11px; height:14px;
  background-image: radial-gradient(circle at 9px 14px, transparent 9px, var(--paper) 9.5px);
  background-size:18px 14px; background-repeat:repeat-x;
}

/* ---------- running-stitch divider: little pink dashes, used sparingly ---------- */
.stitch-rule{
  width:100%; height:9px; margin:22px 0;
  background-image: repeating-linear-gradient(100deg, var(--thread) 0 10px, transparent 10px 18px);
  opacity:0.8; border-radius:99px;
}
.stitch-rule.center{width:76px; margin:22px auto;}

/* ---------- Announcement / care-label strip ---------- */
.announce{
  background:var(--berry); color:var(--paper);
  font-family:'Caveat', cursive;
  font-size:1.05rem; letter-spacing:0.01em; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:38px; text-align:center; padding:0 16px;
}
.announce .dot{color:var(--mustard);}

/* ---------- Header ---------- */
header.site{position:sticky; top:0; z-index:100; background:var(--flax); border-bottom:3px dashed var(--thread);}
.nav{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:16px 32px; max-width:1240px; margin:0 auto; gap:10px;}
.nav-left, .nav-right{display:flex; align-items:center; gap:8px;}
.nav-right{justify-content:flex-end;}
.nav-icon{display:flex; align-items:center; gap:7px; font-size:0.82rem; padding:9px 13px; position:relative; font-family:'Quicksand',sans-serif; font-weight:600; border-radius:var(--radius-pill); transition:background .2s ease, color .2s ease, transform .2s ease;}
.nav-icon svg{width:19px; height:19px; stroke:var(--ink); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.nav-icon:hover{color:var(--berry-deep); background:var(--paper); transform:translateY(-2px);}
.nav-icon:hover svg{stroke:var(--berry-deep);}
.logo{font-family:'Baloo 2', sans-serif; font-size:1.7rem; text-align:center; font-weight:800; letter-spacing:0.01em; color:var(--berry-deep);}
.logo small{display:block; font-family:'Caveat', cursive; font-weight:600; font-size:0.85rem; color:var(--ink-soft); letter-spacing:0.02em; margin-top:0;}
.cart-badge{position:absolute; top:0; right:0; background:var(--mustard); color:var(--ink); font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.62rem; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--paper);}
.subnav{display:flex; gap:22px; justify-content:center; padding:11px 32px; border-top:2px dotted var(--thread); font-family:'Quicksand',sans-serif; font-size:0.85rem; font-weight:600; flex-wrap:wrap;}
.subnav a{padding:5px 12px; border-radius:var(--radius-pill); border:1.5px solid transparent;}
.subnav a:hover, .subnav a.current{border-color:var(--berry); color:var(--berry-deep); background:var(--paper);}

.search-panel{display:none; padding:16px 32px; border-top:2px dashed var(--thread); background:var(--paper);}
.search-panel.open{display:block;}
.search-panel input{width:100%; max-width:520px; margin:0 auto; display:block; padding:12px 18px; border:2px solid var(--thread); border-radius:var(--radius-pill); background:var(--flax); font-family:'Quicksand',sans-serif; font-size:0.9rem;}
.search-panel input::placeholder{color:var(--ink-faint);}
.search-panel input:focus{border-color:var(--berry); outline:none;}
.search-results{max-width:520px; margin:10px auto 0; font-size:0.9rem;}
.search-results div{padding:9px 8px; border-bottom:2px dotted var(--line); cursor:pointer; border-radius:10px;}
.search-results div:hover{color:var(--berry-deep); background:var(--flax);}

/* menu drawer */
.drawer-overlay{position:fixed; inset:0; z-index:200; background:rgba(107,63,77,0.35); opacity:0; pointer-events:none; transition:opacity .3s ease;}
.drawer-overlay.open{opacity:1; pointer-events:auto;}
.menu-drawer{position:fixed; top:0; left:0; z-index:210; height:100%; width:300px; max-width:86vw; background:var(--paper); transform:translateX(-100%); transition:transform .35s ease; padding:30px 26px; overflow-y:auto; border-right:3px dashed var(--thread);}
.menu-drawer.open{transform:translateX(0);}
.drawer-close{position:absolute; top:20px; right:22px; font-size:1.3rem; font-family:'Baloo 2',sans-serif; width:34px; height:34px; border-radius:50%; background:var(--flax); display:flex; align-items:center; justify-content:center;}
.menu-drawer h3{font-size:1.3rem; margin-bottom:6px; color:var(--berry-deep);}
.menu-drawer ul li{border-bottom:2px dotted var(--line); font-size:1rem;}
.menu-drawer ul li a{display:block; padding:13px 4px; font-family:'Baloo 2',sans-serif; font-weight:600;}
.menu-drawer ul li a:hover{color:var(--berry-deep);}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 28px; font-family:'Quicksand', sans-serif; font-size:0.85rem; font-weight:700; letter-spacing:0.01em; border:2px solid var(--ink); border-radius:var(--radius-pill); transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, rotate .18s ease; box-shadow:var(--shadow-tag); background:var(--paper);}
.btn:hover{transform:translate(-2px,-2px) rotate(-1deg); box-shadow:var(--shadow-tag-hover);}
.btn:active{transform:translate(0,0) rotate(0); box-shadow:1px 1px 0 rgba(232,84,122,0.18);}
.btn-primary{background:var(--berry); color:var(--paper); border-color:var(--berry-deep);}
.btn-primary:hover{background:var(--berry-deep);}
.btn-outline{background:transparent; border-color:var(--berry);}
.btn-full{width:100%;}
.btn-sm{padding:9px 18px; font-size:0.75rem;}
.btn:disabled{opacity:0.4; cursor:not-allowed; transform:none !important; box-shadow:none !important;}

/* ---------- Hero ---------- */
.hero{position:relative; padding:60px 32px 96px; max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1fr 0.92fr; gap:56px; align-items:center;}
.hero-copy .eyebrow{margin-bottom:14px;}
.hero-copy h1{font-size:clamp(2.5rem, 4.4vw, 3.8rem); margin:8px 0 20px; max-width:12ch;}
.hero-copy p{max-width:440px; color:var(--ink-soft); margin-bottom:30px; font-size:1.06rem;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.hero-frame{
  position:relative; aspect-ratio:4/5; background:var(--paper);
  border:3px solid var(--ink);
  border-radius:50px 50px 26px 26px/70px 70px 26px 26px;
  box-shadow:7px 9px 0 rgba(232,84,122,0.18);
}
.hero-frame::after{
  content:'✿'; position:absolute; top:14px; right:16px; width:30px; height:30px; border-radius:50%;
  background:var(--mustard); border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; font-size:0.9rem; color:var(--paper);
}
.hero-icon{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.hero-icon svg{width:44%; height:44%; stroke:var(--berry); fill:none; stroke-width:1.4;}
.hero-swatches{position:absolute; bottom:18px; left:18px; display:flex; gap:7px;}
.hero-swatches span{width:18px; height:18px; display:block; border:2px solid var(--ink); border-radius:50%;}
.hero-tag{position:absolute; top:22px; left:-18px; background:var(--paper); border:2px solid var(--ink); border-radius:16px; padding:10px 18px 10px 22px; font-family:'Quicksand',sans-serif; font-size:0.78rem; font-weight:600; box-shadow:var(--shadow-tag); transform:rotate(-4deg);}
.hero-tag b{font-family:'Caveat',cursive; font-size:1.4rem; font-weight:700; display:block; color:var(--berry-deep);}

/* ---------- Section heading ---------- */
.section{padding:88px 32px; position:relative;}
.section-head{text-align:center; max-width:640px; margin:0 auto 46px; position:relative;}
.section-head.left{text-align:left; margin-left:0;}
.section-head h2{font-size:clamp(1.9rem, 3.2vw, 2.6rem); margin-top:10px; position:relative; display:block;.section-head h2::after{
  content:''; position:absolute; left:8%; right:8%; bottom:-2px; height:6px;
  background-image:url("data:image/svg+xml,...");
  background-repeat:repeat-x; background-size:24px 8px; opacity:0.75;
}
}
.section-head p{color:var(--ink-soft); margin-top:18px;}

/* ---------- Categories ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:18px;}
.cat-card{background:var(--paper); border:2px solid var(--ink); border-radius:24px; padding:28px 14px; text-align:center; box-shadow:var(--shadow-tag); transition:transform .2s ease, box-shadow .2s ease, rotate .2s ease; cursor:pointer;}
.cat-card:hover{transform:translate(-3px,-4px) rotate(-1.5deg); box-shadow:var(--shadow-tag-hover);}
.cat-mark{font-family:'Baloo 2',sans-serif; font-size:1.6rem; margin-bottom:10px; color:var(--berry);}
.cat-card span{font-size:0.85rem; font-weight:700; font-family:'Quicksand',sans-serif;}

/* ---------- Product tag-cards ---------- */
.prod-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.prod-card{
  background:var(--paper); position:relative; display:flex; flex-direction:column;
  border:2px solid var(--ink); border-radius:26px; overflow:hidden;
  box-shadow:var(--shadow-tag); transition:transform .22s ease, box-shadow .22s ease, rotate .22s ease;
}
.prod-card:hover{transform:translate(-3px,-4px) rotate(-1deg); box-shadow:var(--shadow-tag-hover);}
.prod-card::after{
  content:'♡'; position:absolute; top:8px; right:10px; width:20px; height:20px; z-index:3;
  color:var(--berry); font-size:0.95rem; line-height:1;
}
.prod-media{aspect-ratio:1/1; position:relative; overflow:hidden; cursor:pointer; border-bottom:2px dashed var(--thread);}
.prod-media .ph1{position:absolute; inset:0; transition:opacity .4s ease;}
.prod-media .ph2{position:absolute; inset:0; opacity:0; transition:opacity .4s ease;}
.prod-card:hover .ph1{opacity:0;}
.prod-card:hover .ph2{opacity:1;}
.stamp{position:absolute; top:12px; left:12px; border:2px dashed var(--berry); border-radius:var(--radius-pill); color:var(--berry-deep); font-family:'Caveat',cursive; font-size:0.95rem; font-weight:700; padding:4px 12px; z-index:2; transform:rotate(-4deg); background:rgba(255,251,246,0.9);}
.stamp.low{border-color:var(--mustard); color:#9c7300;}
.wish-btn{position:absolute; bottom:10px; right:10px; width:34px; height:34px; background:var(--paper); border:2px solid var(--ink); border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:2; transition:transform .2s;}
.wish-btn:hover{transform:scale(1.1) rotate(8deg);}
.wish-btn svg{width:16px; height:16px; stroke:var(--berry); fill:none; stroke-width:2;}
.wish-btn.active svg{fill:var(--berry);}
.prod-info{padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1;}
.prod-info .pcat{font-family:'Caveat',cursive; font-size:1rem; font-weight:600; color:var(--berry);}
.prod-info .pname{font-size:1.05rem; font-family:'Baloo 2',sans-serif; font-weight:600;}
.prod-info .pprice{display:flex; gap:9px; align-items:baseline; font-family:'Quicksand', sans-serif;}
.pprice .now{font-size:1.02rem; color:var(--berry-deep); font-weight:700;}
.pprice .was{font-size:0.82rem; text-decoration:line-through; color:var(--ink-faint);}
.quickadd{margin-top:auto; font-size:0.76rem; font-family:'Quicksand',sans-serif; font-weight:700; padding:11px; border:2px solid var(--ink); border-radius:var(--radius-pill); text-align:center; transition:all .2s ease;}
.quickadd:hover{background:var(--berry); color:var(--paper); border-color:var(--berry-deep);}

.ph{width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--flax-deep), var(--paper));}
.ph svg{width:36%; height:36%; opacity:0.75; stroke:var(--berry);}

/* ---------- About ---------- */
.about{display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:center;}
.about-media{aspect-ratio:1/1.05; background:var(--paper); border:3px solid var(--ink); border-radius:40px 40px 90px 40px; position:relative; box-shadow:var(--shadow-tag);}
.about-copy h2{margin-bottom:18px;}
.about-copy p{color:var(--ink-soft); margin-bottom:16px;}
.about-points{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:28px;}
.about-point{display:flex; gap:12px; align-items:flex-start; border-top:2px dotted var(--line); padding-top:14px;}
.about-point svg{width:22px; height:22px; stroke:var(--berry); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; margin-top:2px;}
.about-point b{display:block; font-size:0.95rem; font-family:'Baloo 2',sans-serif;}
.about-point span{font-size:0.82rem; color:var(--ink-soft);}

/* ---------- Testimonials ---------- */
.testi-track{display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 4px 16px;}
.testi-track::-webkit-scrollbar{height:6px;}
.testi-track::-webkit-scrollbar-thumb{background:var(--thread); border-radius:99px;}
.testi-card{scroll-snap-align:start; min-width:310px; background:var(--paper); border:2px solid var(--ink); border-radius:26px; padding:26px; box-shadow:var(--shadow-tag);}
.testi-stars{color:var(--mustard); font-size:0.95rem; margin-bottom:12px; letter-spacing:2px;}
.testi-card p{font-family:'Caveat', cursive; font-weight:600; font-size:1.3rem; color:var(--ink-soft); margin-bottom:16px; line-height:1.3;}
.testi-who{display:flex; align-items:center; gap:10px; border-top:2px dotted var(--line); padding-top:12px;}
.avatar{width:36px; height:36px; border:2px solid var(--ink); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Baloo 2',sans-serif; font-size:0.9rem; color:var(--berry); flex-shrink:0; background:var(--flax);}
.testi-who b{font-size:0.85rem; display:block; font-family:'Quicksand',sans-serif; font-weight:700;}
.testi-who span{font-size:0.72rem; color:var(--ink-faint); font-family:'Quicksand',sans-serif;}

/* ---------- Instagram ---------- */
.insta-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:12px;}
.insta-tile{aspect-ratio:1/1; overflow:hidden; position:relative; cursor:pointer; border:2px solid var(--ink); border-radius:20px;}
.insta-tile:hover .insta-overlay{opacity:1;}
.insta-overlay{position:absolute; inset:0; background:rgba(232,84,122,0.45); opacity:0; transition:opacity .25s; display:flex; align-items:center; justify-content:center;}
.insta-overlay svg{width:22px; height:22px; stroke:#fff; fill:none;}

/* ---------- Newsletter ---------- */
.newsletter{background:var(--berry); color:var(--paper); padding:66px 40px; text-align:center; max-width:1240px; margin:0 auto; border:3px solid var(--ink); border-radius:44px; position:relative; overflow:hidden;}
.newsletter h2{color:var(--paper); margin-bottom:12px;}
.newsletter p{color:#FFE3EC; margin-bottom:26px;}
.news-form{display:flex; gap:10px; max-width:460px; margin:0 auto; flex-wrap:wrap; justify-content:center;}
.news-form input{flex:1; min-width:220px; padding:14px 20px; background:var(--paper); color:var(--ink); border:2px solid var(--ink); border-radius:var(--radius-pill); font-family:'Quicksand',sans-serif; font-size:0.88rem;}
.news-form input::placeholder{color:var(--ink-faint);}
.news-form button{padding:14px 26px; background:var(--mustard); color:var(--ink); border:2px solid var(--ink); border-radius:var(--radius-pill); font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.82rem;}
.news-form button:hover{background:var(--paper);}

/* ---------- Footer ---------- */
footer{background:#6B3F4D; color:var(--flax); padding:66px 32px 26px; margin-top:0; position:relative; overflow:hidden;
  background-image: radial-gradient(rgba(255,241,228,0.05) 1.5px, transparent 1.5px);
  background-size:16px 16px;
}
footer::before{
  content:''; position:absolute; top:0; left:0; right:0; height:16px;
  background-image: radial-gradient(circle at 10px 16px, transparent 10px, #6B3F4D 10.5px);
  background-size:20px 16px; background-repeat:repeat-x;
}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; max-width:1240px; margin:0 auto 46px;}
.footer-grid h4{color:var(--flax); font-family:'Quicksand',sans-serif; font-size:0.82rem; font-weight:700; letter-spacing:0.03em; margin-bottom:18px;}
.footer-grid p{color:#F3CBD6; font-size:0.88rem; margin-bottom:16px;}
.footer-grid li{margin-bottom:10px; font-size:0.88rem; color:#F6D9E1;}
.footer-grid li a:hover{color:var(--mustard);}
.footer-brand{font-family:'Baloo 2', sans-serif; font-size:1.55rem; margin-bottom:14px; color:var(--flax); font-weight:700;}
.social-row{display:flex; gap:10px; margin-top:16px;}
.social-row a{width:36px; height:36px; border:2px solid #9C6E7C; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform .2s ease, border-color .2s ease;}
.social-row a:hover{border-color:var(--mustard); transform:translateY(-3px) rotate(-6deg);}
.social-row svg{width:16px; height:16px; stroke:var(--flax); fill:none;}
.footer-bottom{max-width:1240px; margin:0 auto; border-top:2px dotted #8C5D6C; padding-top:22px; font-family:'Quicksand',sans-serif; font-size:0.75rem; color:#E3B7C4; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* ---------- Shop page ---------- */
.shop-layout{display:grid; grid-template-columns:230px 1fr; gap:40px; align-items:start;}
.filters{background:var(--paper); border:2px solid var(--ink); border-radius:24px; padding:24px; box-shadow:var(--shadow-tag); position:sticky; top:150px;}
.filters h4{font-family:'Baloo 2',sans-serif; font-size:0.95rem; margin-bottom:16px; padding-bottom:10px; border-bottom:2px dotted var(--line);}
.filter-group{margin-bottom:22px;}
.filter-group .fg-title{font-size:0.8rem; font-weight:700; margin-bottom:9px; font-family:'Quicksand',sans-serif; color:var(--ink-faint);}
.filter-group label{display:flex; align-items:center; gap:8px; font-size:0.88rem; margin-bottom:9px; cursor:pointer; color:var(--ink-soft);}
.filter-group input[type=checkbox]{accent-color:var(--berry); width:16px; height:16px;}
.filter-group input[type=range]{width:100%; accent-color:var(--berry);}
.shop-toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px; border-bottom:3px dashed var(--thread); padding-bottom:16px;}
.shop-toolbar select{padding:9px 16px; border:2px solid var(--ink); border-radius:var(--radius-pill); background:var(--paper); font-family:'Quicksand',sans-serif; font-size:0.8rem;}
.breadcrumb{font-family:'Caveat',cursive; font-size:1rem; font-weight:600; color:var(--ink-faint); margin-bottom:10px;}
.breadcrumb a:hover{color:var(--berry-deep);}

/* ---------- Product detail ---------- */
.pd-layout{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
.pd-main-img{aspect-ratio:1/1; border:3px solid var(--ink); border-radius:32px; overflow:hidden; margin-bottom:14px; cursor:zoom-in; box-shadow:var(--shadow-tag);}
.pd-thumbs{display:flex; gap:10px;}
.pd-thumb{width:68px; height:68px; overflow:hidden; cursor:pointer; border:2px solid var(--line); border-radius:16px; opacity:0.65;}
.pd-thumb.active{border-color:var(--berry); opacity:1;}
.pd-price{font-family:'Baloo 2',sans-serif; font-size:1.6rem; color:var(--berry-deep); margin:14px 0; display:flex; gap:12px; align-items:baseline; font-weight:700;}
.pd-avail{font-family:'Quicksand',sans-serif; font-size:0.82rem; font-weight:700; color:#3E8F63; margin-bottom:18px; display:flex; align-items:center; gap:6px;}
.pd-desc{color:var(--ink-soft); margin-bottom:22px;}
.qty-row{display:flex; align-items:center; gap:16px; margin-bottom:20px;}
.qty-box{display:flex; align-items:center; border:2px solid var(--ink); border-radius:var(--radius-pill); overflow:hidden;}
.qty-box button{width:38px; height:38px; font-size:1.15rem;}
.qty-box span{width:36px; text-align:center; font-size:0.92rem; font-family:'Quicksand',sans-serif; font-weight:700;}
.pd-ctas{display:flex; gap:12px; margin-bottom:30px; flex-wrap:wrap;}
.accordion-item{border-top:2px dotted var(--line);}
.accordion-item:last-child{border-bottom:2px dotted var(--line);}
.accordion-head{display:flex; justify-content:space-between; align-items:center; padding:16px 2px; cursor:pointer; font-size:0.92rem; font-weight:700; font-family:'Baloo 2',sans-serif;}
.accordion-body{max-height:0; overflow:hidden; transition:max-height .3s ease; font-size:0.9rem; color:var(--ink-soft);}
.accordion-body div{padding:0 2px 16px;}
.accordion-item.open .accordion-body{max-height:300px;}
.accordion-item.open .accordion-head span:last-child{transform:rotate(45deg);}

/* ---------- Cart page ---------- */
.cart-layout{display:grid; grid-template-columns:1.4fr 1fr; gap:50px; align-items:start;}
.cart-line{display:flex; gap:16px; padding:20px 0; border-bottom:2px dotted var(--line);}
.cart-line .ph{width:86px; height:86px; border:2px solid var(--ink); border-radius:18px; flex-shrink:0;}
.cart-line-info{flex:1;}
.cart-line-info .cname{font-family:'Baloo 2',sans-serif; font-size:1.05rem; margin-bottom:4px;}
.cart-line-info .ccat{font-family:'Caveat',cursive; font-size:0.95rem; color:var(--ink-faint);}
.cart-line-info .cprice{font-size:0.9rem; color:var(--berry-deep); font-family:'Quicksand',sans-serif; font-weight:700; margin-top:6px;}
.cart-line-actions{display:flex; align-items:center; justify-content:space-between; margin-top:10px;}
.remove-link{font-size:0.78rem; color:var(--ink-faint); text-decoration:underline; font-family:'Quicksand',sans-serif;}
.remove-link:hover{color:var(--berry-deep);}
.summary-box{background:var(--paper); border:2px solid var(--ink); border-radius:26px; padding:26px; box-shadow:var(--shadow-tag); position:sticky; top:150px;}
.summary-box h4{font-family:'Baloo 2',sans-serif; font-size:1rem; margin-bottom:18px; padding-bottom:12px; border-bottom:2px dotted var(--line);}
.coupon-row{display:flex; gap:8px; margin-bottom:18px;}
.coupon-row input{flex:1; padding:10px 16px; border:2px solid var(--ink); border-radius:var(--radius-pill); font-family:'Quicksand',sans-serif; font-size:0.8rem; background:var(--flax);}
.cart-total-row{display:flex; justify-content:space-between; font-size:0.9rem; margin-bottom:10px; color:var(--ink-soft); font-family:'Quicksand',sans-serif;}
.cart-total-row.grand{font-size:1.2rem; color:var(--berry-deep); font-weight:700; font-family:'Baloo 2',sans-serif; margin:16px 0; border-top:3px dashed var(--thread); padding-top:16px;}
.empty-state{text-align:center; padding:70px 20px; color:var(--ink-faint);}
.empty-state .mark{font-family:'Caveat',cursive; font-size:2.8rem; color:var(--berry); margin-bottom:14px;}

/* ---------- Checkout ---------- */
.checkout-layout{display:grid; grid-template-columns:1.3fr 1fr; gap:50px; align-items:start;}
.form-group{margin-bottom:16px;}
.form-group label{display:block; font-family:'Quicksand',sans-serif; font-size:0.78rem; font-weight:700; color:var(--ink-faint); margin-bottom:7px;}
.form-group input, .form-group select, .form-group textarea{width:100%; padding:12px 16px; border:2px solid var(--ink); border-radius:16px; background:var(--paper); font-family:'Quicksand',sans-serif; font-size:0.92rem;}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{outline:3px dashed var(--berry); outline-offset:1px;}
.form-row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.pay-option{display:flex; align-items:center; gap:12px; padding:16px; border:2px solid var(--ink); border-radius:20px; margin-bottom:10px; cursor:pointer;}
.pay-option.active{border-color:var(--berry); background:#FFE9EF;}
.pay-option.disabled{opacity:0.45; cursor:not-allowed;}
.pay-option b{font-family:'Baloo 2',sans-serif; font-weight:600;}
.guest-note{background:var(--paper); border:2px dashed var(--thread); border-radius:18px; padding:14px 18px; font-size:0.86rem; margin-bottom:24px; color:var(--ink-soft);}
.summary-line{display:flex; justify-content:space-between; font-family:'Quicksand',sans-serif; font-size:0.88rem; margin-bottom:10px; color:var(--ink-soft);}

/* ---------- Confirmation ---------- */
.confirm-wrap{max-width:560px; margin:0 auto; text-align:center; padding:100px 32px;}
.confirm-check{width:68px; height:68px; border:3px solid var(--ink); border-radius:50%; background:var(--moss); display:flex; align-items:center; justify-content:center; margin:0 auto 26px; transform:rotate(-4deg);}
.confirm-check svg{width:30px; height:30px; stroke:var(--paper); fill:none; stroke-width:2.4;}
.confirm-box{background:var(--paper); border:2px solid var(--ink); border-radius:24px; padding:26px; box-shadow:var(--shadow-tag); text-align:left; margin:30px 0;}

/* ---------- Toast ---------- */
.toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--berry); color:var(--paper); padding:13px 28px; font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.85rem; opacity:0; pointer-events:none; transition:all .3s ease; z-index:300; display:flex; align-items:center; gap:10px; border:2px solid var(--ink); border-radius:var(--radius-pill);}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .cat-grid{grid-template-columns:repeat(3,1fr);}
  .prod-grid{grid-template-columns:repeat(2,1fr);}
  .hero{grid-template-columns:1fr; padding-bottom:60px;}
  .about{grid-template-columns:1fr;}
  .shop-layout{grid-template-columns:1fr;}
  .filters{position:static;}
  .checkout-layout{grid-template-columns:1fr;}
  .cart-layout{grid-template-columns:1fr;}
  .pd-layout{grid-template-columns:1fr;}
  .insta-grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .summary-box{position:static;}
  .doodle{display:none;}
}
@media(max-width:560px){
  .nav{grid-template-columns:auto 1fr auto; padding:14px 16px;}
  .nav-left span, .nav-right span{display:none;}
  .subnav{gap:10px 14px; padding:9px 16px;}
  .logo{font-size:1.3rem;}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .prod-grid{grid-template-columns:repeat(2,1fr); gap:14px;}
  .section{padding:56px 16px;}
  .footer-grid{grid-template-columns:1fr;}
  .hero{padding:40px 16px 50px;}
}