*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:#FBF7EC;font-family:'Mulish',sans-serif;color:#1F1B16;-webkit-font-smoothing:antialiased;}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floaty2{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(3deg)}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pop{0%{transform:scale(0.7);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
::selection{background:#F5C84B;color:#4A2A1C;}
.mq{display:inline-flex;animation:marquee 22s linear infinite;}
.bounce-btn{transition:transform .12s ease;}
.bounce-btn:hover{transform:translateY(-2px);}
.bounce-btn:active{transform:translateY(2px);}

/* ---- Responsive ---- */
@media (max-width:900px){
  .hero-grid,.turn-grid,.story-grid,.cta-grid,.pdp-grid{grid-template-columns:1fr !important;}
  .why-grid{grid-template-columns:repeat(2,1fr) !important;}
  .footer-grid{grid-template-columns:1fr 1fr !important;}
  .hero-h1{font-size:44px !important;}
  .pdp-gallery{position:static !important;}

  /* Mobile: show the product jar first, copy below it */
  .hero-grid{grid-template-columns:minmax(0,1fr) !important;gap:14px !important;}
  .hero-art{order:-1;min-height:380px !important;}
  .hero-copy{text-align:center;}
  .hero-copy p{margin-left:auto !important;margin-right:auto !important;}
  .hero-copy > div[style*="flex"]{justify-content:center;}
}

/* Tablet / large phone: declutter the nav so the logo + Shop + Cart always fit */
@media (max-width:760px){
  .nav-link{display:none !important;}
  .site-nav{padding:10px 16px !important;}
  .nav-links{gap:14px !important;}
  .nav-logo{height:42px !important;}
  .bighead{font-size:32px !important;line-height:1.04 !important;letter-spacing:-0.6px !important;}
}

@media (max-width:600px){
  .reviews-grid,.ways-grid{grid-template-columns:1fr !important;}
  .why-grid,.footer-grid{grid-template-columns:1fr !important;}
  .hero-h1{font-size:30px !important;letter-spacing:-1px !important;}
  .bighead{font-size:28px !important;}
  .ty-grid{grid-template-columns:1fr !important;}

  /* Tighter side gutters on phones (overrides inline 32px paddings) */
  #home > section{padding-left:18px !important;padding-right:18px !important;}
  footer{padding-left:18px !important;padding-right:18px !important;}
  [data-cta]{padding:34px 22px !important;}

  /* Keep hero text comfortable and the jar art from forcing overflow */
  .hero-h1 + p,.hero-grid p{font-size:17px !important;}
  body{overflow-x:hidden;}
  .hero-art{min-height:340px !important;}
  .hero-jar{width:300px !important;}
  .hero-h1{font-size:27px !important;}
  /* Rating pill + trust row must wrap within the phone width, not clip */
  .hero-copy > div:first-child{max-width:100% !important;font-size:11px !important;white-space:normal !important;}
  .hero-copy .hero-trust{justify-content:center;font-size:12px !important;}
}

/* Very small phones: stop the turn-the-jar mock (fixed 300px) from overflowing */
@media (max-width:360px){
  .bighead{font-size:25px !important;}
}