/* ============ CSS RESET (lite) ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{line-height:1.15;-webkit-text-size-adjust:100%;}
body{margin:0;font-family:"Poppins",system-ui,sans-serif;}
img,svg{display:block;max-width:100%;height:auto;}
ul{list-style:none;}
a{text-decoration:none;color:inherit;}
button{font:inherit;cursor:pointer;border:none;background:none;}
:focus-visible{outline:2px dashed var(--hc-purple);outline-offset:2px;}

/* ============ THEME VARS ============ */
:root{
  --hc-cream:#FFF7EE;
  --hc-orange:#F7A55B;
  --hc-yellow:#FEE55A;
  --hc-lavender:#B8A3FF;
  --hc-purple:#8B76FF;
  --hc-brown-dark:#5A3E2B;
  --hc-brown-mid:#8C6545;
  --hc-white:#ffffff;
  --hc-max-w:1200px;
  --hc-radius:0.75rem;
  --hc-shadow-dist:4px;
  --hc-shadow-color:rgba(184,163,255,0.9); /* lavender */
  --hc-trans-fast:150ms;
  --hc-trans-med:300ms;
  --hc-nav-height:82px;
  --hc-nav-height-scrolled:60px;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important;}
}

/* Utility */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);}
.skip-link{position:absolute;top:-40px;left:1rem;z-index:1000;padding:0.5rem 1rem;background:var(--hc-lavender);color:var(--hc-brown-dark);border-radius:var(--hc-radius);transition:top var(--hc-trans-fast);}
.skip-link:focus{top:1rem;}

/* Shadow style matching logo offset */
.hc-shadow{position:relative;text-shadow:var(--hc-shadow-dist) var(--hc-shadow-dist) 0 var(--hc-shadow-color);}

/* HEADER / NAV */
.hc-header{
  position:sticky;
  top:0;
  width:100%;
  z-index:900;
  background:rgba(255,247,238,0.85);
  backdrop-filter:blur(10px);
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:all var(--hc-trans-med) ease;
}
.hc-header.scrolled{
  background:var(--hc-cream);
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.hc-header-inner{
  max-width:var(--hc-max-w);
  margin-inline:auto;
  height:var(--hc-nav-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-inline:1rem;
  transition:height var(--hc-trans-med);
}
.hc-header.scrolled .hc-header-inner{
  height:var(--hc-nav-height-scrolled);
}

.hc-logo-img{height:60px;width:auto;transition:transform var(--hc-trans-med);}
.hc-header.scrolled .hc-logo-img{transform:scale(0.85);}

/* Nav */
.hc-nav-toggle{display:none;flex-direction:column;gap:4px;padding:0.5rem;}
.hc-nav-toggle-bar{width:20px;height:2px;background:var(--hc-brown-dark);}

.hc-nav-menu{
  display:flex;
  align-items:center;
  gap:2rem;
  font-family:"Fredoka",sans-serif;
  font-weight:600;
  font-size: 1.4rem;
  color:var(--hc-brown-dark);
}
.hc-nav-link{
  position:relative;
  padding-block:0.25rem;
}
.hc-nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:0;
  height:3px;
  background:var(--hc-lavender);
  transition:width var(--hc-trans-fast);
}
.hc-nav-link:hover::after,
.hc-nav-link:focus-visible::after{
  width:100%;
}

/* CTA buttons in header */
.hc-cta-links{
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.btn-cta{
  font-size:1.2rem;
  font-weight:600;
  padding:0.45rem 0.9rem;
  border-radius:999px;
  transition:transform var(--hc-trans-fast),box-shadow var(--hc-trans-fast);
  line-height:1;
  white-space:nowrap;
}
.btn-wa{background:var(--hc-yellow);color:var(--hc-brown-dark);}
.btn-ig{background:var(--hc-orange);color:var(--hc-brown-dark);}
.btn-cta:hover,.btn-cta:focus-visible{transform:translateY(-1px) scale(1.03);box-shadow:0 2px 4px rgba(0,0,0,0.2);}

/* Mobile nav */
@media (max-width:768px){
  .hc-nav-toggle{display:flex;}
  .hc-nav-menu{
    position:absolute;
    top:100%;
    right:0;
    flex-direction:column;
    gap:1.5rem;
    padding:1.5rem;
    min-width:200px;
    background:var(--hc-cream);
    box-shadow:0 4px 16px rgba(0,0,0,0.1);
    transform-origin:top right;
    transform:scaleY(0);
    opacity:0;
    pointer-events:none;
    transition:transform var(--hc-trans-med),opacity var(--hc-trans-med);
  }
  .hc-nav-menu.open{
    transform:scaleY(1);
    opacity:1;
    pointer-events:auto;
  }
  .hc-cta-links{display:none;} /* Hide header CTAs on mobile; show below hero or at bottom? Keep hero CTAs. */
}

/* HERO */
.hc-hero{
    
  position:relative;
  min-height:calc(100vh - var(--hc-nav-height));
  display:grid;
  place-items:center;
  text-align:center;
  background:var(--hc-cream);
  overflow:hidden;
  padding:4rem 1rem;
}
.hc-hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,0.8) 0%,rgba(255,255,255,0) 60%),
    radial-gradient(circle at 70% 80%,rgba(255,223,150,0.6) 0%,rgba(255,223,150,0) 60%),
    var(--hc-cream);
  z-index:0;
  animation:bgPulse 8s ease-in-out infinite alternate;
}
@keyframes bgPulse{
  0%{filter:hue-rotate(0deg) brightness(1);}
  100%{filter:hue-rotate(-10deg) brightness(1.05);}
}
.hc-hero-inner{position:relative;z-index:1;max-width:700px;}
.hc-hero-logo{max-width:320px;margin-inline:auto;margin-bottom:1rem;}
.hc-hero-title{
  font-family:"Fredoka",sans-serif;
  font-size:clamp(5rem,4vw,3.5rem);
  color:var(--hc-orange);
  margin-bottom:0.75rem;
}
.hc-hero-subtitle{
  font-size:1.5rem;
  color:var(--hc-brown-mid);
  margin-bottom:2rem;
}
.btn-primary{
  display:inline-block;
  font-family:"Fredoka",sans-serif;
  font-weight:700;
  font-size:1.5rem;
  padding:0.9rem 2.5rem;
  border-radius:999px;
  background:var(--hc-lavender);
  color:var(--hc-brown-dark);
  transition:transform var(--hc-trans-fast),box-shadow var(--hc-trans-fast);
}
.btn-primary:hover,.btn-primary:focus-visible{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
}

.hc-floating {
    --size: 80px;
    position: absolute;
    width: var(--size);
    height: var(--size);
    opacity: 0.3;
    color: var(--hc-lavender);
    animation: floatAnim ease-in-out infinite;
    animation-duration: 30s; /* Slower */
    animation-delay: var(--delay, 0s);
  }
  
  .hc-floating svg,
  .hc-floating img {
    width: 100%;
    height: 100%;
  }
  
  /* Optional color overrides */
  .hc-floating-2 { color: var(--hc-yellow); }
  .hc-floating-3 { color: var(--hc-orange); }
  
  /* New multi-direction float keyframes */
  @keyframes floatAnim {
    0%   { transform: translate(0, 0) rotate(0deg); }
    25%  { transform: translate(-20px, 15px) rotate(5deg); }
    50%  { transform: translate(15px, -20px) rotate(-5deg); }
    75%  { transform: translate(-10px, 10px) rotate(3deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
  }
  

/* SECTION BASE */
.hc-section{
  padding:5rem 1rem;
  background:var(--hc-cream);
}
.hc-section.alt{background:var(--hc-white);}
.hc-section-header{
  max-width:var(--hc-max-w);
  margin-inline:auto;
  text-align:center;
  margin-bottom:2.5rem;
}
.hc-section-title{
  font-family:"Fredoka",sans-serif;
  font-size:clamp(1.75rem,3vw,2.5rem);
  color:var(--hc-brown-dark);
  display:inline-flex;
  align-items:center;
  gap:0.5em;
}
.hc-inline-icon{
  width:1em;
  height:1em;
  color:var(--hc-orange);
}
.hc-section-tagline{
  margin-top:0.5rem;
  color:var(--hc-brown-mid);
  font-size:1rem;
}

/* PRODUCT CAROUSEL */
.hc-product-carousel-wrapper{
  max-width:var(--hc-max-w);
  margin-inline:auto;
}
.hc-product-carousel{
  width:100%;
  padding-bottom:3rem;
}
.hc-product-carousel .swiper-slide{
  width:auto;
  max-width:320px;
  background:var(--hc-white);
  border-radius:var(--hc-radius);
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  transition:transform var(--hc-trans-fast),box-shadow var(--hc-trans-fast);
}
.hc-product-carousel .swiper-slide:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
}
.hc-product-carousel figure{width:100%;height:100%;display:flex;flex-direction:column;}
.hc-product-carousel figure img{
  aspect-ratio:4/3;
  width:100%;
  object-fit:cover;
}
.hc-product-carousel figure figcaption{
  text-align:center;
  padding:0.75rem;
  font-family:"Fredoka",sans-serif;
  font-weight:600;
  color:var(--hc-brown-dark);
  background:var(--hc-yellow);
}

/* Override Swiper controls */
.swiper-button-next,
.swiper-button-prev{
  color:var(--hc-lavender);
}
.swiper-pagination-bullet{
  background:var(--hc-lavender);
  opacity:0.5;
}
.swiper-pagination-bullet-active{
  background:var(--hc-purple);
  opacity:1;
}

/* CONTACT */
.hc-contact{
  padding:6rem 1rem;
  text-align:center;
  background:var(--hc-orange);
  color:var(--hc-brown-dark);
}
.hc-contact-title{
  font-family:"Fredoka",sans-serif;
  font-size:clamp(1.75rem,3vw,2.5rem);
  margin-bottom:1rem;
}
.hc-contact-ctas{
  margin-top:2rem;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1rem;
}
.btn-wa-lg,.btn-ig-lg{
  font-size:1.125rem;
  padding:1rem 2rem;
  border-radius:999px;
  display:inline-block;
  font-family:"Fredoka",sans-serif;
  font-weight:700;
}
.btn-wa-lg{background:var(--hc-yellow);}
.btn-ig-lg{background:var(--hc-lavender);}

/* FOOTER */
.hc-footer{
  padding:2rem 1rem;
  text-align:center;
  background:var(--hc-brown-dark);
  color:var(--hc-cream);
  font-size:0.9rem;
}

/* background pattern classes for pattern children */
.pat-cookie{fill:var(--hc-yellow);opacity:.4;}
.pat-donut{fill:var(--hc-orange);opacity:.3;}
.pat-crumb{fill:var(--hc-lavender);opacity:.6;}


.hc-floating {
    position: absolute;
    opacity: 0.4; /* Lower opacity */
    animation: floatUp linear infinite;
    pointer-events: none;
  }
  
  .hc-floating img,
  .hc-floating svg {
    width: 70px;
    height: auto;
    display: block;
  }
  

  @keyframes gentleFloat {
    0%   { transform: translate(0, 0) rotate(0deg); }
    25%  { transform: translate(-20px, 10px) rotate(5deg); }
    50%  { transform: translate(10px, -15px) rotate(-5deg); }
    75%  { transform: translate(-10px, 20px) rotate(3deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
  }
  
  .hc-floating {
    position: absolute;
    width: var(--size);
    height: var(--size);
    opacity: 0.3;
    animation: floatAnim 60s ease-in-out infinite;
    animation-delay: var(--delay);
    pointer-events: none;
  }
  
  .hc-floating img,
  .hc-floating svg {
    width: 100px;
    height: auto;
    display: block;
  }
  
  .hc-floating {
    position: absolute;
    width: var(--size);
    height: var(--size);
    animation: floatAnim 10s linear infinite;
    animation-delay: 0s;
  }
  
  @keyframes floatAnim {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(30px, -100px); }
    50%  { transform: translate(-30px, -50px); }
    75%  { transform: translate(20px, -120px); }
    100% { transform: translate(0, 0); }
  }
  
  .hc-floating-1 { animation-delay: 0s; animation-direction: normal; }
.hc-floating-2 { animation-delay: 2s; animation-direction: reverse; }
.hc-floating-3 { animation-delay: 1s; animation-direction: alternate; }
.hc-floating-4 { animation-delay: 3s; animation-direction: alternate-reverse; }

@keyframes floatLeft {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-50px, -100px); }
  100% { transform: translate(0, 0); }
}

@keyframes floatRight {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(50px, -80px); }
  100% { transform: translate(0, 0); }
}

@keyframes floatUp {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(0, -120px); }
  100% { transform: translate(0, 0); }
}

@keyframes floatDiagonal {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(30px, -90px); }
  100% { transform: translate(0, 0); }
}

.hc-floating-1 { animation-name: floatLeft; }
.hc-floating-2 { animation-name: floatRight; }
.hc-floating-3 { animation-name: floatUp; }
.hc-floating-4 { animation-name: floatDiagonal; }
.hc-floating-5 { animation-name: floatDiagonal; }
.hc-floating-6 { animation-name: floatUp; }
.hc-floating-7 { animation-name: floatRight; }

.hc-product-carousel figure figcaption{
  text-align:center;
  padding:.75rem;
  font-family:"Fredoka",sans-serif;
  font-weight:600;
  color:var(--hc-brown-dark);
  background:var(--hc-yellow);
  display:flex;
  flex-direction:column;
  gap:.25rem;
}

.hc-price{
  display:block;          /* forces a line break */
  font-size:1rem;
  font-weight:500;
  color:var(--hc-brown-mid);
  background:var(--hc-cream);
  padding:.25rem .5rem;
  border-radius:.5rem;
  transition:transform var(--hc-trans-fast);
}

.hc-product-carousel .swiper-slide:hover .hc-price{
  transform:scale(1.05);
}