/* 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}

/* Headings match the original site's soft rounded look (ABeeZee).
   Cubano is reserved for small accent labels (kicker, tags, counts). */
h1,h2,h3,.display{
  font-family:var(--font-body);
  font-weight:400;
  letter-spacing:.2px;
  line-height:1.2;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.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-body);
  font-size:1.02rem;letter-spacing:.2px;
  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-body);
  font-size:.98rem;letter-spacing:.3px;
  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,.42) 0%,rgba(40,20,32,.2) 45%,rgba(40,20,32,.42) 100%);
}
.hero-content{position:relative;z-index:2;padding:6rem 1.2rem 8rem}
.hero-kicker{
  font-family:var(--font-display);
  color:#8ED9E6;letter-spacing:3px;text-transform:uppercase;
  font-size:.88rem;margin-bottom:1rem;
}
.hero h1{font-size:clamp(2.4rem,6vw,4.4rem);text-shadow:0 3px 24px rgba(0,0,0,.55)}
.hero p{
  max-width:560px;margin:1.1rem auto 1.8rem;
  font-size:1.08rem;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.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{background-image:url('../img/Points_divider_teal.svg')}

/* ---------- 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)}

/* Cookie wall — circular flavor tiles on the pink band */
.cookie-wall{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:1.8rem 1.4rem;max-width:1060px;margin:0 auto;
}
.cookie-tile{text-align:center;text-decoration:none;display:block}
.cookie-tile .ring{
  display:block;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  border:6px solid #fff;background:#fff;
  box-shadow:0 16px 38px rgba(120,40,80,.28);
  transition:transform .3s ease,box-shadow .3s ease;
}
.cookie-tile img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.cookie-tile:hover .ring{transform:scale(1.07) rotate(3deg);box-shadow:0 24px 54px rgba(120,40,80,.4)}
.cookie-tile h3{color:#fff;font-size:1rem;margin-top:.9rem;letter-spacing:.2px}
.cookie-tile .flav-tag{
  display:inline-block;margin-top:.35rem;
  font-family:var(--font-display);font-size:.62rem;letter-spacing:.8px;text-transform:uppercase;
  background:rgba(255,255,255,.22);color:#fff;
  padding:.22rem .65rem;border-radius:999px;
}
@media (min-width:761px){
  .cookie-tile:nth-child(even){transform:translateY(1.6rem)}
}
@media (max-width:760px){
  .cookie-wall{grid-template-columns:repeat(3,1fr);gap:1.2rem .9rem}
  .cookie-tile h3{font-size:.85rem;margin-top:.6rem}
  .cookie-tile .ring{border-width:4px}
  .cookie-tile:nth-child(n+10){display:none}
}

/* 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 — photo-forward cards */
.menu-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1.3rem;
}
.flavor-card{
  border-radius:var(--radius);
  padding:0 0 1.3rem;
  background:var(--white);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;
  display:flex;flex-direction:column;gap:.45rem;
}
.flavor-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.flavor-card .ph{
  aspect-ratio:1/1;overflow:hidden;background:#fff;
  border-bottom:6px solid var(--pink-soft);margin-bottom:.5rem;
}
.flavor-card:nth-child(even) .ph{border-bottom-color:#BFE6EC}
.flavor-card .ph img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .45s ease;
}
.flavor-card:hover .ph img{transform:scale(1.06)}
.flavor-card h3{font-size:1.12rem;color:var(--pink-deep);padding:0 1.3rem}
.flavor-card:nth-child(even) h3{color:var(--teal-deep)}
.flavor-card p{font-size:.92rem;color:var(--ink-soft);padding:0 1.3rem}
.flavor-card .tags{margin-top:auto;padding:0.6rem 1.3rem 0}

.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(240px,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.has-photo{padding:0 0 1.3rem;overflow:hidden}
.pack-card.has-photo .ph{
  aspect-ratio:1/1;overflow:hidden;background:#fff;margin-bottom:.6rem;
}
.pack-card.has-photo .ph img{
  width:100%;height:100%;object-fit:cover;transition:transform .45s ease;
}
.pack-card.has-photo:hover .ph img{transform:scale(1.06)}
.pack-card.has-photo h3{padding:0 1.3rem}
.pack-card.has-photo p{padding:0 1.3rem}

/* photo gallery band — 4x2 mosaic, spans chosen to fill the grid with no holes */
.gallery{
  display:grid;gap:1rem;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:210px;
  grid-auto-flow:dense;
}
.gallery a,.gallery .cell{
  border-radius:18px;overflow:hidden;display:block;position:relative;
  box-shadow:0 10px 26px rgba(76,58,69,.12);
}
.gallery img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.gallery .cell:hover img{transform:scale(1.07)}
.gallery .wide{grid-column:span 2}
.gallery .tall{grid-row:span 2}
@media (max-width:760px){
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
}
.pack-card .count{
  font-family:var(--font-display);font-size:1.9rem;color:var(--teal);line-height:1;
}
.pack-card .picon{color:var(--pink);line-height:0}
.pack-card .picon svg{width:44px;height:44px;display:block}
.pack-card .picon-teal{color:var(--teal)}
.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 — teal band, the Cookie Caravan shown as framed photos */
.catering{
  position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,#4FA9B8 0%,#6BC5D2 100%);
}
.catering::before{
  content:'';position:absolute;right:-90px;top:-90px;width:320px;height:320px;
  border-radius:50%;background:rgba(255,255,255,.1);
}
.catering::after{
  content:'';position:absolute;left:-70px;bottom:-110px;width:260px;height:260px;
  border-radius:50%;background:rgba(255,255,255,.08);
}
.catering-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;
  padding:5.5rem 0 7.5rem;
}
.catering h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin-bottom:1rem}
.catering p{color:rgba(255,255,255,.95);margin-bottom:1.4rem}
.catering-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem}
.catering-chips span{
  font-family:var(--font-display);font-size:.72rem;letter-spacing:.8px;text-transform:uppercase;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.45);
  color:#fff;padding:.35rem .85rem;border-radius:999px;
}
.catering-photos{position:relative;min-height:430px}
.caravan-main{
  display:block;width:70%;margin-left:auto;
  border:9px solid #fff;border-radius:20px;
  box-shadow:0 26px 60px rgba(15,60,70,.38);
  transform:rotate(2deg);
}
.caravan-second{
  position:absolute;left:0;bottom:0;width:48%;
  border:9px solid #fff;border-radius:20px;
  box-shadow:0 18px 44px rgba(15,60,70,.32);
  transform:rotate(-4deg);
}
@media (max-width:860px){
  .catering-grid{grid-template-columns:1fr;gap:2.5rem;padding:4.5rem 0 7rem}
  .catering-photos{min-height:0;padding-bottom:3rem}
  .caravan-main{width:78%}
  .caravan-second{width:58%;bottom:-1rem}
}

/* ---------- 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-body);font-size:1.02rem;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;
  transition:transform .3s ease;
}
.faq-q .chev svg{width:13px;height:13px;display:block}
.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:36px;height:36px;border-radius:50%;flex:none;
  background:var(--pink-tint);color:var(--pink-deep);
  display:grid;place-items:center;
}
.footer-info .ico svg{width:17px;height:17px;display:block}
.footer-social{display:flex;gap:.8rem}
.footer-social a{
  width:42px;height:42px;border-radius:50%;
  background:var(--pink);color:#fff;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 svg{width:21px;height:21px;display:block}
.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-deep);color:#fff;border:none;cursor:pointer;
  box-shadow:0 8px 24px rgba(79,169,184,.5);
  display:grid;place-items:center;
  transition:transform .2s ease;
}
.a11y-btn svg{width:28px;height:28px;display:block}
.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:1rem;color:var(--pink-deep);margin-bottom:.8rem}
.a11y-panel button{
  width:100%;margin-bottom:.5rem;padding:.6rem .9rem;
  border-radius:12px;border:1.5px solid var(--pink-soft);
  background:var(--white);cursor:pointer;
  font-family:var(--font-body);font-size:.88rem;color:var(--ink);
  text-align:left;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  transition:background .2s ease,border-color .2s ease;
}
.a11y-panel button::after{
  content:'';flex:none;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--pink-soft);transition:background .2s ease,border-color .2s ease;
}
.a11y-panel button[aria-pressed="true"]{background:var(--pink-tint);border-color:var(--pink)}
.a11y-panel button[aria-pressed="true"]::after{background:var(--pink);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:8rem 1rem 10rem;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,.3),rgba(40,20,32,.35));
}
.page-hero .inner{position:relative;z-index:2}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);text-shadow:0 3px 22px rgba(0,0,0,.55)}
.page-hero p{max-width:560px;margin:1rem auto 0;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}

/* 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}
}

/* Cookie Club form status. Scoped under .club because `.club p` above is
   0,1,1 and would otherwise win on specificity no matter the source order. */
.club .form-status{
  min-height:1.2em;margin:1rem 0 0;font-size:.85rem;font-weight:600;
}
.club .form-status.is-ok{color:#fff}
.club .form-status.is-err{color:#ffe08a}

/* ---------------------------------------------------------------------
   Contact page: shared form styling.
   Class names are new and do not collide with anything above, but the
   status paragraph is scoped the same way `.club .form-status` is, since
   a bare `.form-status` would lose to any `.section p` rule added later.
   --------------------------------------------------------------------- */
.contact-layout{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:3rem;align-items:start;
}
.contact-form-wrap{
  background:var(--white);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:2.2rem;
}
.site-form .field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.site-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.site-form label{font-weight:700;color:var(--ink);font-size:.9rem}
.site-form .req{color:var(--pink-deep)}
.site-form .opt{font-weight:400;color:var(--ink-soft);font-size:.82rem}
.site-form input,
.site-form select,
.site-form textarea{
  font-family:var(--font-body);font-size:1rem;color:var(--ink);
  background:var(--cream);border:2px solid var(--pink-soft);
  border-radius:14px;padding:.75rem .9rem;width:100%;
  /* Without this a dark-mode UA paints its own popup for the select and the
     option list comes out white on white. */
  color-scheme:light;
}
.site-form textarea{resize:vertical;min-height:8rem}
.site-form input:focus,
.site-form select:focus,
.site-form textarea:focus{
  outline:3px solid var(--teal);outline-offset:1px;border-color:var(--teal);
}
.site-form button[type=submit]{margin-top:.5rem}
.site-form .form-status{
  min-height:1.2em;margin:1rem 0 0;font-size:.9rem;font-weight:700;
}
.site-form .form-status.is-ok{color:var(--teal-deep)}
.site-form .form-status.is-err{color:var(--pink-deep)}
.site-form [hidden]{display:none}

.contact-aside h2{font-size:1.3rem;margin-bottom:1.2rem}
.contact-aside .contact-line{margin:0 0 1.4rem;color:var(--ink-soft);line-height:1.6}
.contact-aside .contact-line strong{color:var(--ink)}
.contact-aside a{color:var(--pink-ink);font-weight:700}

@media (max-width:860px){
  .contact-layout{grid-template-columns:1fr;gap:2.2rem}
}
@media (max-width:560px){
  .site-form .field-row{grid-template-columns:1fr;gap:0}
  .contact-form-wrap{padding:1.4rem}
}