/* Sweet Lich's — modernized demo build
   Brand: pink #E476AE, teal #6BC5D2, cream, Cubano display + ABeeZee body */

@font-face{
  font-family:'Cubano';
  src:url('../fonts/Cubano.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'ABeeZee';
  src:url('../fonts/ABeeZee-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --pink:#E476AE;
  --pink-soft:#F6D3E5;
  --pink-tint:#FBEDF4;
  --pink-deep:#C75A93;
  --pink-ink:#B14E83;
  --teal:#6BC5D2;
  --teal-deep:#4FA9B8;
  --teal-tint:#EAF7F9;
  --cream:#FFF9F5;
  --ink:#4C3A45;
  --ink-soft:#7A6470;
  --white:#ffffff;
  --shadow:0 12px 34px rgba(199,90,147,.14);
  --shadow-lg:0 24px 60px rgba(76,58,69,.16);
  --radius:22px;
  --font-display:'Cubano','ABeeZee',system-ui,sans-serif;
  --font-body:'ABeeZee',system-ui,-apple-system,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--pink-deep)}
main{display:block}

h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:.5px;
  line-height:1.15;
}

.container{width:min(1160px,92%);margin:0 auto}

/* ---------- Announcement bar ---------- */
.announce{
  background:var(--pink);
  color:#fff;
  text-align:center;
  font-size:.85rem;
  padding:.55rem 1rem;
  letter-spacing:.3px;
}
.announce a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(228,118,174,.15);
  transition:box-shadow .3s ease;
}
.site-header.scrolled{box-shadow:0 6px 24px rgba(76,58,69,.08)}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:.6rem 0;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none}
.brand img{height:56px;width:auto}
.nav-links{display:flex;align-items:center;gap:1.6rem;list-style:none}
.nav-links a{
  font-family:var(--font-display);
  font-size:.95rem;letter-spacing:.6px;
  color:var(--pink-ink);text-decoration:none;
  padding:.3rem 0;position:relative;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-2px;height:3px;width:0;
  background:var(--teal);border-radius:3px;transition:width .25s ease;
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%}
.nav-links a[aria-current="page"]{color:var(--pink-deep)}

.btn{
  display:inline-block;
  font-family:var(--font-display);
  font-size:.95rem;letter-spacing:.8px;
  padding:.78rem 1.7rem;border-radius:999px;
  text-decoration:none;text-align:center;
  border:none;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 8px 22px rgba(107,197,210,.4)}
.btn-teal:hover{background:var(--teal-deep)}
.btn-pink{background:var(--pink);color:#fff;box-shadow:0 8px 22px rgba(228,118,174,.4)}
.btn-pink:hover{background:var(--pink-deep)}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75)}
.btn-ghost:hover{background:rgba(255,255,255,.15)}
.btn-lg{font-size:1.05rem;padding:.95rem 2.2rem}

.nav-order{display:inline-block}
.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;padding:.4rem;
}
.nav-toggle span{
  display:block;width:26px;height:3px;border-radius:3px;
  background:var(--pink-deep);margin:5px 0;transition:transform .3s,opacity .3s;
}
.nav-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:820px){
  /* backdrop-filter would become the containing block for the fixed drawer */
  .site-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}
  .nav-toggle{display:block}
  .nav-links{
    position:fixed;inset:0;top:0;
    background:var(--white);
    flex-direction:column;justify-content:center;gap:2rem;
    transform:translateX(100%);transition:transform .35s ease;
    z-index:55;
  }
  .nav-links.open{transform:translateX(0)}
  .nav-links a{font-size:1.5rem}
  .nav-order{display:none}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:82vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff;
  overflow:hidden;
  background:var(--ink);
}
.hero video,.hero .hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(40,20,32,.55) 0%,rgba(40,20,32,.35) 45%,rgba(40,20,32,.6) 100%);
}
.hero-content{position:relative;z-index:2;padding:6rem 1.2rem 8rem}
.hero-kicker{
  font-family:var(--font-display);
  color:var(--teal);letter-spacing:3px;text-transform:uppercase;
  font-size:.9rem;margin-bottom:1rem;
}
.hero h1{font-size:clamp(2.4rem,6vw,4.4rem);text-shadow:0 4px 30px rgba(0,0,0,.35)}
.hero p{
  max-width:560px;margin:1.1rem auto 1.8rem;
  font-size:1.08rem;color:rgba(255,255,255,.92);
}
.hero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* wave divider */
.wave{
  position:absolute;left:0;right:0;bottom:-1px;z-index:3;
  line-height:0;pointer-events:none;
}
.wave svg{width:100%;height:56px;display:block;transform:scaleY(-1)}
.wave-flip svg{transform:none}
.wave-top{top:-1px;bottom:auto}
@media (min-width:900px){.wave svg{height:80px}}

/* section wave joins (static, between sections) */
.wave-join{line-height:0;position:relative;z-index:2}
.wave-join svg{width:100%;height:52px;display:block}
@media (min-width:900px){.wave-join svg{height:72px}}

/* ---------- Sections ---------- */
section{position:relative}
.section{padding:5rem 0}
.section-tight{padding:3.5rem 0}
.bg-pink{background:var(--pink)}
.bg-pink-tint{background:var(--pink-tint)}
.bg-teal-tint{background:var(--teal-tint)}
.bg-cream{background:var(--cream)}

.section-head{text-align:center;max-width:640px;margin:0 auto 3rem}
.section-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--teal-deep)}
.section-head.pink h2{color:var(--pink-deep)}
.section-head.on-pink h2{color:#fff}
.section-head p{margin-top:.8rem;color:var(--ink-soft)}
.section-head.on-pink p{color:rgba(255,255,255,.9)}

.dots{
  display:block;margin:1.1rem auto 0;width:min(320px,70%);height:14px;
  background:url('../img/Points_divider.svg') center/contain no-repeat;
}
.dots-teal{filter:hue-rotate(155deg) saturate(.8)}

/* ---------- Cards ---------- */
.card{
  background:var(--white);border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}

/* Best sellers */
.bestsellers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1.4rem;
}
.seller-card{
  background:var(--white);border-radius:var(--radius);
  padding:1.6rem 1.4rem 1.5rem;text-align:center;
  box-shadow:0 14px 34px rgba(120,40,80,.18);
  transition:transform .25s ease,box-shadow .25s ease;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.seller-card:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:0 24px 54px rgba(120,40,80,.28)}
.seller-card img{width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 10px 16px rgba(76,58,69,.25))}
.seller-card h3{color:var(--pink-deep);font-size:1.15rem}
.seller-card p{font-size:.88rem;color:var(--ink-soft)}
.seller-card .tag{margin-top:auto}

/* Flavor / menu grids */
.menu-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1.3rem;
}
.flavor-card{
  border-radius:var(--radius);
  padding:1.5rem 1.5rem 1.4rem;
  background:var(--white);
  box-shadow:var(--shadow);
  border-top:6px solid var(--pink-soft);
  transition:transform .25s ease,box-shadow .25s ease;
  display:flex;flex-direction:column;gap:.45rem;
}
.flavor-card:nth-child(even){border-top-color:#BFE6EC}
.flavor-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.flavor-card h3{font-size:1.12rem;color:var(--pink-deep)}
.flavor-card:nth-child(even) h3{color:var(--teal-deep)}
.flavor-card p{font-size:.92rem;color:var(--ink-soft)}
.flavor-card .tags{margin-top:auto;padding-top:.6rem}

.tag{
  display:inline-block;font-size:.7rem;letter-spacing:.8px;text-transform:uppercase;
  font-family:var(--font-display);
  background:var(--pink-tint);color:var(--pink-deep);
  padding:.28rem .7rem;border-radius:999px;margin-right:.35rem;
}
.tag-teal{background:var(--teal-tint);color:var(--teal-deep)}

/* pack cards */
.pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.3rem}
.pack-card{
  background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:1.6rem;text-align:left;display:flex;flex-direction:column;gap:.5rem;
  transition:transform .25s ease,box-shadow .25s ease;
}
.pack-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.pack-card .count{
  font-family:var(--font-display);font-size:1.9rem;color:var(--teal);line-height:1;
}
.pack-card h3{color:var(--pink-deep);font-size:1.1rem}
.pack-card p{font-size:.9rem;color:var(--ink-soft)}

/* merch */
.merch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.2rem}
.merch-card{
  background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:hidden;text-align:center;padding-bottom:1.1rem;
  transition:transform .25s ease,box-shadow .25s ease;
}
.merch-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.merch-card img{aspect-ratio:1/1;object-fit:cover;width:100%}
.merch-card h3{font-size:.98rem;color:var(--pink-deep);margin-top:.8rem}
.merch-card span{font-size:.8rem;color:var(--ink-soft)}

/* split feature */
.split{
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;
}
.split .media img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%}
.split h2{font-size:clamp(1.7rem,3.2vw,2.4rem);color:var(--teal-deep);margin-bottom:1rem}
.split.pink h2{color:var(--pink-deep)}
.split p{margin-bottom:1rem;color:var(--ink-soft)}
.split .btn{margin-top:.4rem}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:2rem}}
.split.media-right .media{order:2}
@media (max-width:860px){.split.media-right .media{order:0}}

/* catering banner */
.catering{
  position:relative;color:#fff;overflow:hidden;
  background:url('../img/caravan.jpg') center 35%/cover no-repeat;
}
.catering::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(45,110,122,.82) 0%,rgba(45,110,122,.55) 55%,rgba(45,110,122,.15) 100%);
}
.catering-inner{position:relative;z-index:1;padding:6.5rem 0;max-width:540px}
.catering h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin-bottom:1rem}
.catering p{color:rgba(255,255,255,.94);margin-bottom:1.6rem}

/* ---------- FAQ ---------- */
.faq-wrap{max-width:760px;margin:0 auto}
.faq-item{
  background:var(--white);border-radius:16px;box-shadow:var(--shadow);
  margin-bottom:.9rem;overflow:hidden;
}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:none;border:none;cursor:pointer;text-align:left;
  padding:1.05rem 1.3rem;
  font-family:var(--font-display);font-size:1rem;color:var(--teal-deep);
}
.faq-item:nth-child(even) .faq-q{color:var(--pink-deep)}
.faq-q .chev{
  flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--pink-tint);color:var(--pink-deep);
  display:grid;place-items:center;font-size:.85rem;
  transition:transform .3s ease;
}
.faq-item.open .faq-q .chev{transform:rotate(180deg)}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height .35s ease;
}
.faq-a p{padding:0 1.3rem 1.2rem;color:var(--ink-soft);font-size:.95rem}

/* ---------- Cookie club ---------- */
.club{
  background:var(--pink);
  position:relative;overflow:hidden;
}
.club::after{
  content:'';position:absolute;right:-70px;top:-70px;width:260px;height:260px;
  border-radius:50%;background:rgba(255,255,255,.12);
}
.club::before{
  content:'';position:absolute;left:-50px;bottom:-90px;width:220px;height:220px;
  border-radius:50%;background:rgba(255,255,255,.1);
}
.club-inner{
  position:relative;z-index:1;text-align:center;color:#fff;
  padding:4.5rem 1rem;max-width:620px;margin:0 auto;
}
.club h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.club p{margin:.8rem 0 1.6rem;color:rgba(255,255,255,.92)}
.club-form{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.club-form input{
  flex:1 1 220px;max-width:300px;
  padding:.85rem 1.2rem;border-radius:999px;border:none;
  font-family:var(--font-body);font-size:.95rem;color:var(--ink);
}
.club-form input:focus{outline:3px solid rgba(255,255,255,.6)}
.club small{display:block;margin-top:1rem;color:rgba(255,255,255,.75);font-size:.78rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--cream);padding:3.5rem 0 5.5rem;position:relative}
.footer-grid{
  display:grid;grid-template-columns:auto 1fr auto;gap:2.5rem;align-items:center;
}
.footer-grid .logo img{height:110px;width:auto}
.footer-info{display:flex;flex-wrap:wrap;gap:1.4rem 2.2rem;justify-content:center}
.footer-info a{
  display:flex;align-items:center;gap:.55rem;
  color:var(--ink);text-decoration:none;font-size:.92rem;
}
.footer-info a:hover{color:var(--pink-deep)}
.footer-info .ico{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:var(--pink-tint);color:var(--pink-deep);
  display:grid;place-items:center;font-size:.95rem;
}
.footer-social{display:flex;gap:.8rem}
.footer-social a{
  width:40px;height:40px;border-radius:50%;
  background:var(--pink);display:grid;place-items:center;
  transition:transform .2s ease,background .2s ease;
}
.footer-social a:hover{transform:translateY(-3px);background:var(--pink-deep)}
.footer-social img{width:20px;height:20px}
.footer-legal{
  text-align:center;margin-top:2.5rem;font-size:.78rem;color:var(--ink-soft);
}
.footer-legal a{color:var(--ink-soft)}
@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr;text-align:center;justify-items:center}
}

/* ---------- Reveal on scroll ---------- */
html.js .fade-up{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
html.js .fade-up.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .fade-up{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- Consent banner ---------- */
.consent{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:90;
  background:var(--white);border-radius:18px;box-shadow:var(--shadow-lg);
  padding:1.2rem 1.4rem;max-width:520px;margin:0 auto;
  display:none;
}
.consent.show{display:block}
.consent p{font-size:.85rem;color:var(--ink-soft);margin-bottom:.9rem}
.consent .row{display:flex;gap:.7rem;flex-wrap:wrap}
.consent button{font-size:.85rem;padding:.6rem 1.3rem}

/* ---------- Accessibility widget ---------- */
.a11y-btn{
  position:fixed;left:1.1rem;bottom:1.1rem;z-index:95;
  width:52px;height:52px;border-radius:50%;
  background:var(--teal);color:#fff;border:none;cursor:pointer;
  box-shadow:0 8px 24px rgba(79,169,184,.5);
  font-size:1.4rem;display:grid;place-items:center;
  transition:transform .2s ease;
}
.a11y-btn:hover{transform:scale(1.08)}
.a11y-panel{
  position:fixed;left:1.1rem;bottom:5.4rem;z-index:95;
  background:var(--white);border-radius:18px;box-shadow:var(--shadow-lg);
  padding:1.2rem;width:240px;display:none;
}
.a11y-panel.show{display:block}
.a11y-panel h3{font-size:.95rem;color:var(--pink-deep);margin-bottom:.8rem}
.a11y-panel button{
  width:100%;margin-bottom:.5rem;padding:.55rem .9rem;
  border-radius:12px;border:1.5px solid var(--pink-soft);
  background:var(--white);cursor:pointer;
  font-family:var(--font-body);font-size:.85rem;color:var(--ink);
  text-align:left;
}
.a11y-panel button[aria-pressed="true"]{background:var(--pink-tint);border-color:var(--pink)}
body.a11y-large{font-size:118%}
body.a11y-contrast .announce{background:#8f2f63}
body.a11y-contrast{--pink:#B23579;--pink-deep:#8F2F63;--teal:#2E7987;--teal-deep:#215D68;--ink:#221820;--ink-soft:#40323b}
body.a11y-underline a{text-decoration:underline !important}
body.a11y-motion *{animation:none !important;transition:none !important}

/* skip link */
.skip-link{
  position:absolute;left:-999px;top:0;z-index:100;
  background:var(--pink-deep);color:#fff;padding:.6rem 1rem;border-radius:0 0 12px 0;
}
.skip-link:focus{left:0}

/* page hero (interior pages) */
.page-hero{
  position:relative;color:#fff;text-align:center;
  padding:6.5rem 1rem 8rem;overflow:hidden;background:var(--ink);
}
.page-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.page-hero::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(40,20,32,.5),rgba(40,20,32,.55));
}
.page-hero .inner{position:relative;z-index:2}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);text-shadow:0 4px 30px rgba(0,0,0,.35)}
.page-hero p{max-width:560px;margin:1rem auto 0;color:rgba(255,255,255,.92)}

/* sticky mobile order bar */
.mobile-order{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:none;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 -6px 24px rgba(76,58,69,.12);
}
.mobile-order .btn{width:100%}
@media (max-width:640px){
  .mobile-order{display:block}
  .site-footer{padding-bottom:7rem}
  .a11y-btn{bottom:5.2rem}
  .a11y-panel{bottom:9.4rem}
}