*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --yellow:#F4D35E; --yellow2:#FAE38E;
  --green:#A8C686; --green2:#C6D9A8; --green-deep:#7FA661;
  --blue:#A3C4F3; --blue2:#CDE3F8;
  --purple:#7C77B9; --purple2:#A79FD3;
  --gray:#8A8A8A; --gray2:#C2C2C2;
  --ink:#3a3a32; --ink-soft:#6b6b5f;
  --cream:#FBFBF4; --cream2:#F4F4E3; --sky:#EAF3FB; --leaf-bg:#EEF4E4;
  --font-body:'Quicksand',sans-serif; --font-accent:'Gloria Hallelujah',cursive;
}
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--cream); color: var(--ink); overflow-x: hidden; }

/* NAV */
nav { position: fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:0 48px; height:74px; background:rgba(251,251,244,0.85); backdrop-filter:blur(12px); border-bottom:1px solid rgba(168,198,134,0.3); }
.nav-logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.nav-logo img { height:38px; width:auto; }
.nav-links { display:flex; gap:36px; list-style:none; }
.nav-links a { font-weight:600; font-size:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; transition:color .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--green-deep); }
.nav-right { display:flex; align-items:center; gap:16px; }
.location-select { position:relative; }
.location-btn { display:flex; align-items:center; gap:8px; background:var(--leaf-bg); border:1.5px solid rgba(168,198,134,0.5); border-radius:100px; padding:9px 16px; font-family:var(--font-body); font-weight:600; font-size:13px; color:var(--ink); cursor:pointer; transition:background .2s,border-color .2s; }
.location-btn:hover { background:var(--green2); border-color:var(--green-deep); }
.location-dropdown { position:absolute; top:calc(100% + 8px); right:0; background:white; border-radius:16px; box-shadow:0 16px 40px rgba(0,0,0,0.12); padding:8px; min-width:200px; opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity .2s,transform .2s; z-index:110; }
.location-dropdown.open { opacity:1; pointer-events:all; transform:none; }
.location-option { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; cursor:pointer; font-size:14px; font-weight:600; transition:background .15s; }
.location-option:hover { background:var(--leaf-bg); }
.location-option.active { background:var(--green2); }
.location-option .flag { font-size:18px; }
.location-option .curr { margin-left:auto; font-size:12px; color:var(--gray); font-weight:700; }
.cart-btn { display:flex; align-items:center; gap:8px; background:var(--yellow); color:var(--ink); border:none; border-radius:100px; padding:11px 22px; font-family:var(--font-body); font-weight:700; font-size:14px; cursor:pointer; transition:background .2s,transform .15s; text-decoration:none; }
.cart-btn:hover { background:var(--yellow2); transform:translateY(-1px); }
.lang-btn { background:var(--leaf-bg); border:1.5px solid rgba(168,198,134,0.5); border-radius:100px; padding:9px 14px; height:38px; font-family:var(--font-body); font-weight:700; font-size:13px; color:var(--ink); cursor:pointer; transition:background .2s,border-color .2s; white-space:nowrap; }
.lang-btn:hover { background:var(--green2); border-color:var(--green-deep); }
.cart-count { background:var(--ink); color:var(--yellow); border-radius:50%; width:20px; height:20px; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* PAGE HEADER (inner pages) */
.page-header { padding:150px 48px 60px; text-align:center; background:linear-gradient(160deg, var(--cream) 0%, var(--leaf-bg) 100%); }
.page-header .section-label { justify-content:center; }
.page-header h1 { font-weight:700; font-size:clamp(36px,5vw,58px); line-height:1.1; color:var(--ink); margin-bottom:16px; }
.page-header p { font-size:17px; color:var(--ink-soft); max-width:560px; margin:0 auto; line-height:1.7; }

/* HERO */
.hero { min-height:100vh; background:radial-gradient(ellipse 60% 50% at 15% 20%, rgba(244,211,94,0.25) 0%, transparent 60%),radial-gradient(ellipse 55% 50% at 85% 75%, rgba(168,198,134,0.3) 0%, transparent 60%),radial-gradient(ellipse 50% 40% at 70% 15%, rgba(163,196,243,0.22) 0%, transparent 60%),linear-gradient(160deg, var(--cream) 0%, var(--leaf-bg) 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:130px 48px 70px; position:relative; overflow:hidden; }
.doodle { position:absolute; font-size:32px; opacity:0.55; animation:float 6s ease-in-out infinite; pointer-events:none; }
.doodle:nth-child(1){top:18%;left:10%;animation-delay:0s;}
.doodle:nth-child(2){top:26%;right:12%;animation-delay:1.2s;font-size:28px;}
.doodle:nth-child(3){bottom:22%;left:16%;animation-delay:2.4s;font-size:26px;}
.doodle:nth-child(4){bottom:30%;right:18%;animation-delay:0.6s;}
.doodle:nth-child(5){top:50%;left:6%;animation-delay:1.8s;font-size:24px;}
@keyframes float { 0%,100%{transform:translateY(0) rotate(-4deg);} 50%{transform:translateY(-16px) rotate(4deg);} }
.hero-content { position:relative; z-index:1; max-width:760px; }
.hero-badge { display:inline-block; font-family:var(--font-accent); font-size:13px; color:var(--green-deep); background:rgba(168,198,134,0.25); border:1.5px solid rgba(168,198,134,0.5); border-radius:100px; padding:7px 20px; margin-bottom:28px; }
.hero h1 { font-weight:700; font-size:clamp(44px,6.5vw,76px); line-height:1.08; color:var(--ink); margin-bottom:22px; }
.hero h1 span { font-family:var(--font-accent); color:var(--green-deep); font-size:0.78em; display:block; margin-top:6px; }
.hero p { font-size:18px; color:var(--ink-soft); max-width:560px; margin:0 auto 40px; line-height:1.7; }
.hero-ctas { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero-hint { margin-top:44px; font-family:var(--font-accent); font-size:13px; color:var(--ink-soft); display:flex; align-items:center; gap:8px; justify-content:center; }

.btn-primary { display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:var(--cream); font-weight:700; font-size:16px; padding:16px 36px; border-radius:100px; text-decoration:none; border:none; cursor:pointer; transition:background .2s,transform .15s; }
.btn-primary:hover { background:#4d4d42; transform:translateY(-2px); }
.btn-outline { display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--ink); font-weight:600; font-size:16px; padding:16px 36px; border-radius:100px; text-decoration:none; border:1.5px solid rgba(58,58,50,0.25); cursor:pointer; transition:border-color .2s,background .2s; }
.btn-outline:hover { border-color:var(--ink); background:rgba(58,58,50,0.04); }

/* TRUST BAR */
.trust-bar { background:var(--green-deep); padding:18px 48px; display:flex; align-items:center; justify-content:center; gap:48px; flex-wrap:wrap; }
.trust-item { display:flex; align-items:center; gap:10px; font-weight:700; font-size:14px; color:white; letter-spacing:0.03em; }
.trust-item svg { flex-shrink:0; }

section { padding:100px 48px; }
.section-label { font-family:var(--font-accent); font-size:13px; color:var(--green-deep); letter-spacing:0.06em; margin-bottom:12px; }
.section-title { font-weight:700; font-size:clamp(30px,4vw,46px); line-height:1.18; margin-bottom:16px; color:var(--ink); }
.section-sub { font-size:16px; color:var(--ink-soft); max-width:560px; line-height:1.7; }

/* PILLARS */
.pillars-head { text-align:center; margin-bottom:56px; }
.pillars-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; max-width:1120px; margin:0 auto; }
.pillar { background:white; border-radius:26px; overflow:hidden; box-shadow:0 8px 30px rgba(127,166,97,0.1); border:1px solid rgba(168,198,134,0.2); }
.pillar-img { aspect-ratio:4/3; overflow:hidden; }
.pillar-img img { width:100%; height:100%; object-fit:cover; }
.pillar-body { padding:26px 26px 30px; }
.pillar-icon { font-size:30px; margin-bottom:12px; }
.pillar h3 { font-family:var(--font-accent); font-size:20px; color:var(--ink); margin-bottom:10px; line-height:1.3; }
.pillar p { font-size:14px; color:var(--ink-soft); line-height:1.65; }

/* PRODUCTS */
.products-header { text-align:center; margin-bottom:60px; }
.products-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,380px)); justify-content:center; gap:32px; max-width:1180px; margin:0 auto; }
.product-card { background:white; border-radius:28px; overflow:hidden; box-shadow:0 8px 30px rgba(127,166,97,0.1); transition:transform .3s,box-shadow .3s; border:1px solid rgba(168,198,134,0.2); }
.product-card:hover { transform:translateY(-6px); box-shadow:0 24px 50px rgba(127,166,97,0.18); }
.flip { display:block; position:relative; aspect-ratio:1; perspective:1200px; cursor:pointer; }
.flip-inner { position:absolute; inset:0; transition:transform .7s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d; }
.flip:hover .flip-inner { transform:rotateY(180deg); }
.flip-face { position:absolute; inset:0; backface-visibility:hidden; overflow:hidden; }
.flip-face img { width:100%; height:100%; object-fit:cover; }
.flip-back { transform:rotateY(180deg); }
.flip-hint { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); background:rgba(255,255,255,0.92); color:var(--ink); font-family:var(--font-accent); font-size:11px; padding:6px 14px; border-radius:100px; z-index:3; pointer-events:none; box-shadow:0 4px 12px rgba(0,0,0,0.1); transition:opacity .3s; }
.flip:hover .flip-hint { opacity:0; }
.flip-back-label { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); background:var(--yellow); color:var(--ink); font-family:var(--font-accent); font-size:11px; padding:6px 14px; border-radius:100px; z-index:3; pointer-events:none; box-shadow:0 4px 12px rgba(0,0,0,0.15); white-space:nowrap; }
.product-badge { position:absolute; top:16px; left:16px; z-index:4; font-family:var(--font-accent); font-size:11px; padding:5px 13px; border-radius:100px; }
.badge-new { background:var(--green); color:var(--ink); }
.badge-hot { background:var(--yellow); color:var(--ink); }
.badge-set { background:var(--purple2); color:white; }
.product-info { padding:24px 24px 28px; }
.product-type { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--gray); margin-bottom:6px; }
.product-name { font-family:var(--font-accent); font-size:22px; color:var(--ink); margin-bottom:8px; }
.product-desc { font-size:14px; color:var(--ink-soft); line-height:1.6; margin-bottom:16px; }
.color-swatches { display:flex; gap:8px; margin-bottom:16px; }
.swatch { width:22px; height:22px; border-radius:50%; border:2px solid white; box-shadow:0 0 0 1.5px var(--gray2); cursor:pointer; transition:box-shadow .15s,transform .15s; }
.swatch.active { box-shadow:0 0 0 2px var(--ink); transform:scale(1.15); }
.product-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.tag { font-size:11px; font-weight:600; padding:4px 10px; border-radius:100px; background:var(--leaf-bg); color:var(--ink); }
.product-footer { display:flex; align-items:center; justify-content:space-between; }
.product-price { font-weight:700; font-size:22px; color:var(--ink); }
.add-to-cart { display:flex; align-items:center; gap:8px; background:var(--green-deep); color:white; border:none; border-radius:100px; padding:12px 24px; font-family:var(--font-body); font-weight:700; font-size:14px; cursor:pointer; transition:background .2s,transform .15s; }
.add-to-cart:hover { background:#6b9150; transform:translateY(-1px); }
.add-to-cart.added { background:var(--yellow); color:var(--ink); }
a.add-to-cart { text-decoration:none; }

/* STORY */
.story-head { text-align:center; margin-bottom:64px; }
.story-chapter { max-width:1080px; margin:0 auto 72px; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.story-chapter:last-child { margin-bottom:0; }
.story-chapter.reverse .story-media { order:2; }
.story-num { font-family:var(--font-accent); font-size:15px; color:var(--green-deep); margin-bottom:14px; }
.story-chapter h3 { font-weight:700; font-size:30px; line-height:1.2; margin-bottom:18px; color:var(--ink); }
.story-chapter p { font-size:16px; color:var(--ink-soft); line-height:1.8; margin-bottom:14px; }
.story-media { border-radius:26px; overflow:hidden; aspect-ratio:4/3; box-shadow:0 16px 40px rgba(0,0,0,0.1); }
.story-media img { width:100%; height:100%; object-fit:cover; }
.cat-vision { display:flex; gap:12px; margin-top:20px; }
.vision-chip { display:flex; align-items:center; gap:8px; background:var(--leaf-bg); border-radius:100px; padding:8px 16px; font-size:13px; font-weight:600; }
.vision-dot { width:16px; height:16px; border-radius:50%; }

/* STORY — creative / interactive */
.story-hero { position:relative; overflow:hidden; }
.paw-float { position:absolute; font-size:26px; opacity:0.28; pointer-events:none; animation:float 6s ease-in-out infinite; }
.paw-float.p1 { top:26%; left:9%; }
.paw-float.p2 { top:32%; right:11%; animation-delay:1.2s; font-size:22px; }
.paw-float.p3 { bottom:20%; left:16%; animation-delay:2.1s; font-size:20px; }
.paw-float.p4 { bottom:26%; right:18%; animation-delay:0.6s; }
.paw-scroll { margin-top:26px; font-size:22px; opacity:0.6; animation:pawbob 1.8s ease-in-out infinite; }
@keyframes pawbob { 0%,100%{ transform:translateY(0); opacity:0.5; } 50%{ transform:translateY(6px); opacity:0.85; } }

.paw-trail { display:flex; justify-content:center; gap:26px; max-width:1080px; margin:14px auto 6px; }
.paw-trail span { font-size:20px; opacity:0; transform:translateY(6px) rotate(12deg); animation:pawstep 2.4s ease-in-out infinite; }
.paw-trail.reverse span { transform:translateY(6px) rotate(-12deg); }
.paw-trail span:nth-child(1){ animation-delay:0s; }
.paw-trail span:nth-child(2){ animation-delay:0.3s; }
.paw-trail span:nth-child(3){ animation-delay:0.6s; }
.paw-trail span:nth-child(4){ animation-delay:0.9s; }
.paw-trail span:nth-child(5){ animation-delay:1.2s; }
@keyframes pawstep { 0%{ opacity:0; } 25%{ opacity:0.7; } 60%{ opacity:0.15; } 100%{ opacity:0; } }

.story-creative .story-media { position:relative; }
.story-creative .story-media img { transition:transform 0.5s cubic-bezier(.2,.7,.2,1); }
.story-creative .story-chapter:hover .story-media img { transform:scale(1.05) rotate(-1.2deg); }
.story-creative .story-media::after {
  content:'🐾'; position:absolute; bottom:-14px; right:-10px;
  font-size:34px; opacity:0; transform:rotate(-15deg) scale(0.6);
  transition:opacity .35s ease, transform .35s ease;
}
.story-creative .story-chapter:hover .story-media::after { opacity:0.85; transform:rotate(-8deg) scale(1); }
.story-creative .story-num { display:inline-flex; align-items:center; gap:8px; }
.story-creative .story-num::before { content:'🐾'; font-size:15px; }

/* STORY — testimonials chapter */
.story-testimonials { max-width:1080px; margin:0 auto; text-align:center; }
.story-tst-title { font-weight:700; font-size:clamp(24px,3vw,32px); color:var(--ink); margin:6px 0 34px; }
.story-tst-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:left; }
.story-tst-link { display:inline-block; margin-top:30px; font-family:var(--font-accent); font-size:14px; color:var(--green-deep); text-decoration:none; }
.story-tst-link:hover { text-decoration:underline; }

/* STORY — closing belief */
.closing-belief { position:relative; overflow:hidden; background:var(--leaf-bg); }
.closing-inner { max-width:1040px; margin:0 auto; display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center; }
.closing-media { border-radius:28px; overflow:hidden; aspect-ratio:4/3; box-shadow:0 18px 44px rgba(0,0,0,0.12); }
.closing-media img { width:100%; height:100%; object-fit:cover; }
.closing-text h3 { font-weight:700; font-size:clamp(26px,3.4vw,36px); margin-bottom:20px; color:var(--ink); }
.closing-text p { font-size:17px; color:var(--ink-soft); line-height:1.85; margin-bottom:14px; }
.closing-text .closing-soft { font-family:var(--font-accent); font-size:18px; color:var(--green-deep); margin-top:8px; }
@media (max-width:768px){ .story-tst-grid{grid-template-columns:1fr;} .closing-inner{grid-template-columns:1fr; gap:28px;} }

/* BENEFITS */
.benefits { background:var(--green-deep); color:white; border-radius:36px; max-width:1180px; margin:0 auto; padding:70px 48px; }
.benefits-head { text-align:center; margin-bottom:48px; }
.benefits-head .section-label { color:var(--yellow2); }
.benefits-head .section-title { color:white; }
.benefits-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; max-width:1120px; margin:0 auto; }
.benefit { background:rgba(255,255,255,0.1); border-radius:20px; padding:26px 20px; text-align:center; }
.benefit .b-icon { font-size:30px; margin-bottom:12px; }
.benefit h4 { font-size:15px; font-weight:700; margin-bottom:8px; }
.benefit p { font-size:12.5px; line-height:1.55; color:rgba(255,255,255,0.85); }

/* TESTIMONIALS */
.tst-head { text-align:center; margin-bottom:52px; }
.tst-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; max-width:1120px; margin:0 auto; }
.tst-card { background:white; border-radius:22px; box-shadow:0 8px 26px rgba(127,166,97,0.1); display:flex; flex-direction:column; overflow:hidden; }
.tst-photo { aspect-ratio:1; overflow:hidden; background:var(--cream2); }
.tst-photo img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.tst-card:hover .tst-photo img { transform:scale(1.05); }
.tst-body { padding:24px 26px 28px; display:flex; flex-direction:column; flex:1; }
.tst-stars { color:var(--yellow); font-size:16px; margin-bottom:14px; letter-spacing:2px; }
.tst-quote { font-size:15px; color:var(--ink); line-height:1.65; flex:1; margin-bottom:18px; }
.tst-author { display:flex; align-items:center; gap:10px; }
.tst-avatar { width:38px; height:38px; border-radius:50%; background:var(--green2); display:flex; align-items:center; justify-content:center; font-size:18px; }
.tst-name { font-weight:700; font-size:14px; }
.tst-loc { font-size:12px; color:var(--gray); }

/* INSTAGRAM */
.insta-header { text-align:center; margin-bottom:40px; }
.insta-handle { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-accent); font-size:14px; color:var(--purple); text-decoration:none; margin-top:8px; }
.insta-strip { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; max-width:1000px; margin:0 auto; }
.insta-img { aspect-ratio:1; border-radius:18px; overflow:hidden; }
.insta-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.insta-img:hover img { transform:scale(1.08) rotate(1deg); }

/* CTA */
.cta-band { background:linear-gradient(135deg, var(--yellow) 0%, var(--yellow2) 100%); text-align:center; }
.cta-band h2 { font-weight:700; font-size:clamp(28px,4vw,44px); color:var(--ink); margin-bottom:14px; }
.cta-band .accent { font-family:var(--font-accent); }
.cta-band p { font-size:17px; color:var(--ink); opacity:0.8; max-width:520px; margin:0 auto 32px; line-height:1.6; }

/* PRODUCT DETAIL */
.pdp { max-width:1180px; margin:0 auto; padding:130px 48px 90px; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.pdp-gallery { position:sticky; top:100px; }
.pdp-main { border-radius:28px; overflow:hidden; aspect-ratio:1; box-shadow:0 16px 40px rgba(127,166,97,0.15); background:var(--cream2); }
.pdp-main img { width:100%; height:100%; object-fit:cover; }
.pdp-thumbs { display:flex; gap:12px; margin-top:16px; }
.pdp-thumb { width:76px; height:76px; border-radius:14px; overflow:hidden; cursor:pointer; border:2.5px solid transparent; transition:border-color .2s; flex-shrink:0; background:var(--cream2); }
.pdp-thumb.active { border-color:var(--green-deep); }
.pdp-thumb img { width:100%; height:100%; object-fit:cover; }
.pdp-crumbs { font-size:13px; color:var(--gray); margin-bottom:14px; }
.pdp-crumbs a { color:var(--gray); text-decoration:none; }
.pdp-crumbs a:hover { color:var(--green-deep); }
.pdp-type { font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--green-deep); margin-bottom:10px; }
.pdp-title { font-family:var(--font-accent); font-size:44px; color:var(--ink); margin-bottom:14px; line-height:1.1; }
.pdp-rating { display:flex; align-items:center; gap:8px; margin-bottom:20px; font-size:14px; color:var(--ink-soft); }
.pdp-rating .stars { color:var(--yellow); letter-spacing:2px; }
.pdp-price { font-size:32px; font-weight:700; color:var(--ink); margin-bottom:24px; }
.pdp-desc { font-size:16px; color:var(--ink-soft); line-height:1.75; margin-bottom:26px; }
.pdp-opt-label { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink); margin-bottom:12px; }
.pdp-swatches { display:flex; gap:12px; margin-bottom:28px; }
.pdp-swatch { width:30px; height:30px; border-radius:50%; border:2px solid white; box-shadow:0 0 0 1.5px var(--gray2); cursor:pointer; transition:box-shadow .15s,transform .15s; }
.pdp-swatch.active { box-shadow:0 0 0 2px var(--ink); transform:scale(1.12); }
.pdp-buy { display:flex; gap:14px; align-items:center; margin-bottom:32px; }
.pdp-qty { display:flex; align-items:center; gap:14px; border:1.5px solid var(--gray2); border-radius:100px; padding:10px 18px; }
.pdp-qty button { background:none; border:none; font-size:18px; font-weight:700; cursor:pointer; color:var(--ink); }
.pdp-qty span { font-weight:700; font-size:16px; min-width:18px; text-align:center; }
.pdp-add { flex:1; background:var(--green-deep); color:white; border:none; border-radius:100px; padding:17px; font-family:var(--font-body); font-weight:700; font-size:16px; cursor:pointer; transition:background .2s,transform .15s; }
.pdp-add:hover { background:#6b9150; transform:translateY(-1px); }
.pdp-add.added { background:var(--yellow); color:var(--ink); }
a.pdp-add { display:block; text-align:center; text-decoration:none; }
.pdp-etsy-note { font-size:12.5px; color:var(--gray); margin:-16px 0 26px; display:flex; align-items:center; gap:6px; }
.pdp-features { border-top:1px solid rgba(168,198,134,0.4); padding-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.pdp-feat { display:flex; gap:12px; align-items:flex-start; }
.pdp-feat .f-ic { font-size:22px; flex-shrink:0; }
.pdp-feat h5 { font-size:14px; font-weight:700; margin-bottom:3px; }
.pdp-feat p { font-size:13px; color:var(--ink-soft); line-height:1.5; }
.pdp-ship { display:flex; align-items:center; gap:8px; margin-top:22px; font-size:13px; color:var(--green-deep); font-weight:600; }
.related { padding:20px 48px 100px; max-width:1180px; margin:0 auto; }
.related h2 { font-weight:700; font-size:28px; text-align:center; margin-bottom:40px; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.related-card { background:white; border-radius:22px; overflow:hidden; box-shadow:0 8px 26px rgba(127,166,97,0.1); text-decoration:none; color:inherit; transition:transform .25s,box-shadow .25s; }
.related-card:hover { transform:translateY(-5px); box-shadow:0 20px 44px rgba(127,166,97,0.18); }
.related-card .r-img { aspect-ratio:1; overflow:hidden; }
.related-card .r-img img { width:100%; height:100%; object-fit:cover; }
.related-card .r-body { padding:18px 20px 22px; }
.related-card .r-name { font-family:var(--font-accent); font-size:18px; margin-bottom:6px; }
.related-card .r-price { font-weight:700; font-size:16px; color:var(--green-deep); }

/* INFO PAGES (materials / shipping / returns / contact) */
.info-wrap { max-width:940px; margin:0 auto; padding:24px 48px 96px; }
.info-list { display:grid; gap:18px; margin-top:8px; }
.info-item { background:white; border:1px solid rgba(168,198,134,0.25); border-radius:20px; padding:24px 26px; box-shadow:0 6px 20px rgba(127,166,97,0.07); display:flex; gap:18px; align-items:flex-start; }
.info-item .i-ic { font-size:28px; flex-shrink:0; line-height:1.1; }
.info-item h3 { font-family:var(--font-accent); font-size:19px; color:var(--ink); margin-bottom:8px; }
.info-item p { font-size:15px; color:var(--ink-soft); line-height:1.7; }
.info-note { text-align:center; margin-top:34px; font-size:14px; color:var(--gray); }
.contact-methods { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:12px; }
.contact-card { background:white; border:1px solid rgba(168,198,134,0.25); border-radius:22px; padding:32px 24px; text-align:center; text-decoration:none; color:inherit; box-shadow:0 6px 20px rgba(127,166,97,0.07); transition:transform .25s, box-shadow .25s; }
.contact-card:hover { transform:translateY(-5px); box-shadow:0 20px 40px rgba(127,166,97,0.16); }
.contact-card .c-ic { font-size:34px; margin-bottom:14px; }
.contact-card h3 { font-family:var(--font-accent); font-size:18px; margin-bottom:6px; }
.contact-card p { font-size:14px; color:var(--green-deep); font-weight:600; word-break:break-word; }
@media (max-width:768px){ .info-wrap{padding:16px 20px 64px;} .contact-methods{grid-template-columns:1fr;} }

/* ============ STORYBOOK (story page, designer style) ============ */
.storybook { --sb-accent:var(--green-deep); --sb-ink:var(--ink); color:var(--ink); }
.storybook .sb-panel { position:relative; padding:86px 24px; overflow:hidden; }
.storybook .sb-panel.first { padding-top:150px; }
.storybook .sb-panel:not(:first-of-type)::before { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:2px; height:44px; background:repeating-linear-gradient(var(--green-deep) 0 4px, transparent 4px 11px); opacity:0.3; }
.storybook .peach { background:radial-gradient(ellipse 78% 55% at 50% 42%, rgba(168,198,134,0.20) 0%, var(--cream) 72%); }
.storybook .peach-soft { background:radial-gradient(ellipse 82% 60% at 50% 40%, rgba(244,211,94,0.16) 0%, var(--cream) 76%); }
.storybook .sb-inner { max-width:720px; margin:0 auto; }

.storybook .sb-say { font-weight:700; font-size:clamp(22px,2.9vw,31px); line-height:1.55; color:var(--ink); max-width:600px; margin:0 auto; text-align:center; }
.storybook .sb-say .lead { color:var(--green-deep); font-size:1.28em; }
.storybook .sb-say .em { font-size:1.5em; color:var(--green-deep); }



.storybook .sb-photos { position:relative; display:flex; justify-content:center; align-items:center; gap:22px; margin:52px auto 0; flex-wrap:nowrap; max-width:640px; }
.storybook .sb-blob { overflow:hidden; box-shadow:0 14px 34px rgba(127,166,97,0.16); flex-shrink:0; }
.storybook .sb-blob img { width:100%; height:100%; object-fit:cover; display:block; }
.storybook .blob-a { width:162px; height:212px; border-radius:60% 40% 55% 45% / 55% 50% 50% 45%; transform:translateY(16px) rotate(-4deg); }
.storybook .blob-b { width:150px; height:196px; border-radius:52% 48% 50% 50% / 55% 55% 45% 45%; transform:translateY(-18px) rotate(3deg); }
.storybook .blob-c { width:158px; height:204px; border-radius:45% 55% 50% 50% / 50% 50% 50% 50%; transform:translateY(10px) rotate(5deg); }
.storybook .sb-caption { position:relative; display:block; width:max-content; max-width:90%; margin:40px auto 0; background:var(--sb-accent); color:#fff; font-style:italic; font-size:14px; line-height:1.4; padding:12px 22px; border-radius:20px; box-shadow:0 10px 24px rgba(127,166,97,0.25); text-align:center; }
.storybook .sb-caption::before { content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%); border:10px solid transparent; border-bottom-color:var(--sb-accent); border-top:0; }

.storybook .sb-sketch { display:flex; justify-content:center; gap:44px; align-items:center; margin:44px auto; }
.storybook .sb-sketch .lbl { font-family:var(--font-accent); font-size:15px; color:var(--ink); }

.storybook .sb-kv { text-align:center; font-weight:700; font-size:clamp(26px,3.6vw,38px); letter-spacing:0.06em; color:var(--sb-accent); }
.storybook .sb-orn { display:flex; align-items:center; justify-content:center; gap:12px; margin:16px 0 26px; color:var(--sb-accent); }
.storybook .sb-orn::before, .storybook .sb-orn::after { content:''; width:70px; height:2px; background:currentColor; }
.storybook .sb-orn .dot { width:9px; height:9px; border:2px solid currentColor; border-radius:50%; }
.storybook .sb-quote { text-align:center; font-size:20px; color:var(--sb-ink); max-width:520px; margin:0 auto; }
.storybook .sb-quote .by { display:block; text-align:right; margin-top:10px; font-family:var(--font-accent); color:var(--sb-accent); }

.storybook .sb-vision { display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:540px; margin:44px auto; }
.storybook .sb-vision .vc { display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
.storybook .sb-vision .vc svg { flex-shrink:0; }
.storybook .sb-vision .vc p { font-size:15px; line-height:1.5; border-top:2px solid var(--green); padding-top:14px; max-width:210px; }
.storybook .sb-figure { border-radius:20px; overflow:hidden; max-width:540px; margin:36px auto; box-shadow:0 16px 40px rgba(127,166,97,0.14); }
.storybook .sb-figure img { width:100%; display:block; }
.storybook .sb-three { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; max-width:660px; margin:46px auto 0; text-align:center; }
.storybook .sb-three .t3 svg { height:64px; margin-bottom:12px; }
.storybook .sb-three .t3 p { font-size:14px; line-height:1.5; }

.storybook .sb-bene-title { text-align:center; font-weight:700; font-size:clamp(24px,3vw,32px); color:var(--sb-accent); margin-bottom:60px; }
.storybook .sb-bene-grid { display:grid; grid-template-columns:1fr auto 1fr; gap:46px 60px; align-items:center; max-width:880px; margin:0 auto; }
.storybook .sb-bene-grid .bcell h4 { color:var(--sb-accent); font-weight:700; font-size:16px; margin-bottom:4px; }
.storybook .sb-bene-grid .bcell p { font-size:14px; line-height:1.5; }
.storybook .sb-bene-grid .bcell.r { text-align:right; }
.storybook .sb-bene-center { grid-row:span 2; display:flex; align-items:center; justify-content:center; }
.storybook .sb-bene-b5 { text-align:center; max-width:420px; margin:52px auto 0; }
.storybook .sb-bene-b5 h4 { color:var(--sb-accent); font-weight:700; font-size:16px; margin-bottom:4px; }
.storybook .sb-bene-b5 p { font-size:14px; line-height:1.5; }
.storybook .sb-bene-photos { display:flex; justify-content:center; gap:26px; margin-top:70px; flex-wrap:wrap; }
.storybook .sb-bene-photos .sb-blob { width:240px; height:185px; border-radius:24px; transform:none; }

.storybook .sb-close-fig { max-width:600px; margin:0 auto 44px; border-radius:20px; overflow:hidden; box-shadow:0 18px 44px rgba(127,166,97,0.18); }
.storybook .sb-close-fig img { width:100%; display:block; }
.storybook .sb-close { text-align:center; font-weight:700; font-size:clamp(19px,2.5vw,25px); line-height:1.7; color:var(--ink); max-width:600px; margin:0 auto; }
.storybook .sb-close p { margin-bottom:18px; }
.storybook .sb-close .big { font-size:1.15em; color:var(--green-deep); }

@media (max-width:768px){
  .storybook .sb-panel{padding:64px 20px;}
  .storybook .sb-panel.first{padding-top:120px;}
  .storybook .blob-a,.storybook .blob-b,.storybook .blob-c{width:30%;height:auto;aspect-ratio:3/4;transform:none;}
  
  .storybook .sb-vision{grid-template-columns:1fr;}
  .storybook .sb-three{grid-template-columns:1fr;gap:22px;}
  .storybook .sb-bene-grid{grid-template-columns:1fr;text-align:center;}
  .storybook .sb-bene-grid .bcell.r{text-align:center;}
  .storybook .sb-bene-center{grid-row:auto;order:-1;}
  .storybook .sb-sketch{flex-direction:column;gap:18px;}
  .storybook .sb-say.right{text-align:center;}
}

/* CART */
.cart-overlay { position:fixed; inset:0; background:rgba(58,58,50,0.4); z-index:200; opacity:0; pointer-events:none; transition:opacity .3s; }
.cart-overlay.open { opacity:1; pointer-events:all; }
.cart-sidebar { position:fixed; top:0; right:0; bottom:0; width:420px; background:var(--cream); z-index:201; transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; }
.cart-sidebar.open { transform:translateX(0); }
.cart-header { display:flex; align-items:center; justify-content:space-between; padding:28px 28px 20px; border-bottom:1px solid rgba(168,198,134,0.3); }
.cart-header h3 { font-weight:700; font-size:20px; }
.close-cart { background:none; border:none; cursor:pointer; padding:8px; border-radius:50%; color:var(--ink); transition:background .2s; }
.close-cart:hover { background:var(--leaf-bg); }
.cart-items { flex:1; overflow-y:auto; padding:20px 28px; }
.cart-item { display:flex; gap:16px; align-items:center; padding:16px 0; border-bottom:1px solid rgba(168,198,134,0.2); }
.cart-item-img { width:72px; height:72px; border-radius:14px; overflow:hidden; flex-shrink:0; background:var(--cream2); }
.cart-item-img img { width:100%; height:100%; object-fit:cover; }
.cart-item-info { flex:1; }
.cart-item-name { font-weight:700; font-size:15px; margin-bottom:4px; }
.cart-item-color { font-size:12px; color:var(--green-deep); font-weight:600; margin-bottom:3px; }
.cart-item-price { font-size:14px; color:var(--gray); }
.qty-controls { display:flex; align-items:center; gap:10px; margin-top:10px; }
.qty-btn { width:28px; height:28px; border-radius:50%; border:1.5px solid var(--gray2); background:none; cursor:pointer; font-size:16px; font-weight:600; display:flex; align-items:center; justify-content:center; transition:background .15s,border-color .15s; }
.qty-btn:hover { background:var(--leaf-bg); border-color:var(--green-deep); }
.qty-val { font-weight:700; font-size:15px; width:20px; text-align:center; }
.remove-item { background:none; border:none; cursor:pointer; color:var(--gray2); padding:4px; transition:color .2s; }
.remove-item:hover { color:#e55; }
.cart-footer { padding:24px 28px; border-top:1px solid rgba(168,198,134,0.3); }
.cart-total { display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:18px; margin-bottom:8px; }
.cart-ship-note { font-size:12px; color:var(--gray); margin-bottom:16px; }
.checkout-btn { width:100%; padding:18px; background:var(--ink); color:var(--cream); border:none; border-radius:100px; font-family:var(--font-body); font-weight:700; font-size:16px; cursor:pointer; transition:background .2s; }
.checkout-btn:hover { background:#4d4d42; }
.cart-empty { text-align:center; padding:60px 20px; color:var(--gray); }
.cart-empty .empty-icon { font-size:48px; margin-bottom:16px; }
.cart-empty p { font-size:16px; }

/* FOOTER */
footer { background:var(--ink); color:var(--gray2); padding:60px 48px 40px; }
.footer-grid { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-brand img { height:34px; filter:brightness(0) invert(1); margin-bottom:16px; }
.footer-brand p { font-size:14px; line-height:1.7; max-width:280px; }
.footer-col h5 { color:white; font-weight:700; font-size:14px; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:20px; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:10px; }
.footer-col ul li a { color:var(--gray2); text-decoration:none; font-size:14px; transition:color .2s; }
.footer-col ul li a:hover { color:var(--yellow); }
.footer-bottom { max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding-top:28px; border-top:1px solid rgba(255,255,255,0.08); font-size:13px; }
.social-link { width:36px; height:36px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.15); display:inline-flex; align-items:center; justify-content:center; color:var(--gray2); text-decoration:none; transition:border-color .2s,color .2s; }
.social-link:hover { border-color:var(--yellow); color:var(--yellow); }

.fade-up { opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s ease; }
.fade-up.visible { opacity:1; transform:none; }

@media (max-width:768px) {
  nav { padding:0 16px; }
  .nav-links { display:none; }
  .location-btn span.loc-name { display:none; }
  section { padding:72px 20px; }
  .hero { padding:100px 20px 60px; }
  .page-header { padding:120px 20px 48px; }
  .trust-bar { gap:18px; padding:14px 20px; }
  .trust-item { font-size:12px; }
  .pillars-grid { grid-template-columns:1fr; }
  .products-grid { grid-template-columns:1fr; }
  .story-chapter { grid-template-columns:1fr; gap:28px; }
  .story-chapter.reverse .story-media { order:0; }
  .benefits { border-radius:0; padding:60px 20px; }
  .benefits-grid { grid-template-columns:1fr 1fr; }
  .insta-strip { grid-template-columns:repeat(3,1fr); }
  .insta-strip .insta-img:nth-child(n+4) { display:none; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .footer-brand { grid-column:span 2; }
  .cart-sidebar { width:100%; }
  .pdp { grid-template-columns:1fr; gap:32px; padding:110px 20px 60px; }
  .pdp-gallery { position:static; top:auto; }
  .pdp-title { font-size:34px; }
  .pdp-features { grid-template-columns:1fr; }
  .related { padding:10px 20px 70px; }
  .related-grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════
   UI POLISH PASS
   ═══════════════════════════════════════════════════════ */

/* Crisper type rendering */
html { -webkit-font-smoothing:antialiased; -moz-osx-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }

/* Balanced headings (no awkward orphan wraps) + tighter tracking on display type */
.hero h1, .page-header h1, .section-title, .sb-say, .sb-kv, .sb-bene-title,
#cta h2, .cta-band h2, .story-tst-title, .products-header .section-title {
  text-wrap:balance;
}
.hero h1, .page-header h1, .section-title, .cta-band h2 { letter-spacing:-0.015em; }
p { text-wrap:pretty; }

/* Brand text selection */
::selection { background:var(--yellow); color:var(--ink); }
::-moz-selection { background:var(--yellow); color:var(--ink); }

/* Accessible focus rings (keyboard only) */
a:focus-visible, button:focus-visible, .swatch:focus-visible, .pdp-swatch:focus-visible,
.location-option:focus-visible, .flip:focus-visible, input:focus-visible {
  outline:2.5px solid var(--green-deep); outline-offset:3px; border-radius:8px;
}
:focus:not(:focus-visible) { outline:none; }

/* Anchor targets clear the fixed nav */
section[id], [id] { scroll-margin-top:94px; }

/* Softer, scroll-aware nav */
nav { transition:box-shadow .35s ease, background .35s ease, border-color .35s ease; }
nav.scrolled { box-shadow:0 8px 30px rgba(58,58,50,0.08); background:rgba(251,251,244,0.94); }

/* Buttons — a touch of depth + springier motion */
.btn-primary { box-shadow:0 8px 20px rgba(58,58,50,0.16); transition:background .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
.btn-primary:hover { box-shadow:0 12px 26px rgba(58,58,50,0.22); }
.btn-primary:active { transform:translateY(0) scale(.98); }
.cart-btn { box-shadow:0 4px 14px rgba(244,211,94,0.4); }
.add-to-cart, .pdp-add, .cta-band .btn-primary { transition:background .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
.add-to-cart:active, .pdp-add:active { transform:scale(.97); }
.btn-outline:active { transform:scale(.98); }

/* Cards — unified easing + a hairline for definition */
.product-card, .pillar, .tst-card, .contact-card, .related-card, .info-item, .value-card {
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s cubic-bezier(.2,.7,.2,1);
}
.pillar { transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.pillar:hover { transform:translateY(-6px); box-shadow:0 22px 46px rgba(127,166,97,0.16); }
.info-item:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(127,166,97,0.13); }

/* Product/pillar imagery — gentle inner edge so photos sit crisply on cream */
.pillar-img, .flip, .pdp-main, .story-media, .sb-figure, .sb-close-fig,
.about-img, .tst-photo, .insta-img, .r-img { box-shadow:inset 0 0 0 1px rgba(58,58,50,0.05); }

/* Smoother scroll-reveal */
.fade-up { transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }

/* Refined links in prose */
.pdp-crumbs a, .insta-handle { text-underline-offset:3px; }

/* Custom scrollbar (WebKit) */
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-thumb { background:var(--green2); border-radius:20px; border:3px solid var(--cream); }
::-webkit-scrollbar-thumb:hover { background:var(--green); }
::-webkit-scrollbar-track { background:transparent; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .fade-up { opacity:1 !important; transform:none !important; }
  .doodle, .paw-float, .paw-scroll, .paw-trail span { animation:none !important; }
}