/* ==========================================================
   MISS CAKE - DESIGN SYSTEM
   Sister brand to Goddess Cafe. Same typographic voice
   (Fraunces + Dancing Script, gold hairlines, scribble motif),
   own personality: turquoise and white instead of pink.
   ========================================================== */
:root{
  --mint:#CFEDEA;
  --mint-soft:#EDF9F8;
  --turq:#2CBFB6;
  --turq-deep:#17968F;
  --turq-ink:#0E5F5A;
  --char:#4C4C4C;
  --ink:#22302F;
  --white:#FFFFFF;
  --gold:#C9A24B;
  --gold-soft:#E4CE9C;
  /* Pastel rainbow palette: yellows, pinks, purples, turquoise.
     Flows warm to cool so gradients read smoothly, and ends on the
     brand turquoise so the rainbow belongs to Miss Cake. */
  --rb1:#FFE08A;
  --rb2:#FFB0CF;
  --rb3:#E5A9EE;
  --rb4:#BCA6F0;
  --rb5:#84DAD8;
  --rb6:#2CBFB6;
  --rainbow:linear-gradient(100deg,var(--rb1),var(--rb2),var(--rb3),var(--rb4),var(--rb5),var(--rb6));
  --rainbow-h:linear-gradient(90deg,var(--rb1),var(--rb2),var(--rb3),var(--rb4),var(--rb5),var(--rb6));
  /* Deeper tints of the same hues, for gradient TEXT only. Pure pastel
     text on white fails contrast, so headings use these instead. */
  --rainbow-text:linear-gradient(100deg,#D99A2B,#E85C9A,#B54FD4,#7B5BD6,#22A9A2,#17968F);
  --display:'Fraunces',serif;
  --serif:'Fraunces',serif;
  --body:'Fraunces',serif;
  --script:'Dancing Script',cursive;
  --rad:20px;
  --shadow:0 14px 38px -18px rgba(23,150,143,.34);
  --hairline:1px solid rgba(201,162,75,.45);
  --max:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--char);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer;border:none;background:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--turq);outline-offset:3px;border-radius:4px}
section{position:relative}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);color:var(--ink);line-height:1.08;letter-spacing:.005em;font-weight:700}
h1{font-size:clamp(3rem,7.2vw,5.6rem)}
h2{font-size:clamp(2.5rem,5.4vw,4.1rem)}
h3{font-size:1.62rem}
.eyebrow{font-family:var(--display);font-weight:700;font-size:.84rem;letter-spacing:.32em;text-transform:uppercase;color:var(--turq-deep);margin-bottom:18px;display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--rainbow-h)}
.eyebrow.center-eb::after{content:"";width:34px;height:2px;background:var(--rainbow-h)}
.script{font-family:var(--script);font-weight:600;color:var(--turq);letter-spacing:.01em;font-size:1.9rem;display:block}
.lead{font-size:1.1rem;max-width:600px}
.sec-head{margin-bottom:44px}
.sec-head.center{text-align:center;max-width:720px;margin-left:auto;margin-right:auto}
.sec-head.center .eyebrow{justify-content:center}
.sec-head p{margin-top:16px;font-size:1.05rem}
.scribble{position:relative;display:inline-block;white-space:nowrap;padding-bottom:3px;background-image:var(--rainbow-h);background-repeat:no-repeat;background-position:0 100%;background-size:100% 3px}
.gold-rule{display:block;width:88px;height:3px;border-radius:999px;background:var(--rainbow-h);margin:22px auto 0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;padding:16px 30px;border-radius:999px;transition:transform .25s,box-shadow .25s,background .25s,color .25s;text-align:center}
.btn-turq{background:var(--turq);color:#fff;box-shadow:var(--shadow)}
.btn-turq:hover{transform:translateY(-3px);background:var(--turq-deep);box-shadow:0 24px 55px -16px rgba(23,150,143,.5)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-ghost:hover{transform:translateY(-3px);background:var(--ink);color:#fff}
.btn-ghost-light{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.9);backdrop-filter:blur(4px)}
.btn-ghost-light:hover{transform:translateY(-3px);background:#fff;color:var(--turq-deep);box-shadow:inset 0 0 0 2px #fff}
.btn-white{background:#fff;color:var(--turq-deep);box-shadow:0 12px 30px -14px rgba(0,0,0,.3)}
.btn-white:hover{transform:translateY(-3px)}
.btn-sm{padding:11px 20px;font-size:.7rem;letter-spacing:.13em}

/* ---------- photo placeholders ----------
   Every .ph block is a spot for a real photo. The label tells the
   client exactly which photo goes there. Delete .ph and drop an
   <img> in when the shoot is done. */
.ph{position:relative;background-size:cover;background-position:center;background-color:var(--mint-soft);overflow:hidden}
.ph::after{content:attr(data-note);position:absolute;left:10px;right:10px;bottom:10px;font-family:var(--display);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(34,48,47,.5);background:rgba(255,255,255,.78);padding:5px 8px;border-radius:8px;line-height:1.35;text-align:center}
.ph[data-note=""]::after{display:none}
.g1{background-image:linear-gradient(140deg,#EDF9F8,#CFEDEA)}
.g2{background-image:linear-gradient(140deg,#CFEDEA,#8FD9D2)}
.g3{background-image:linear-gradient(140deg,#2CBFB6,#17968F)}
.g4{background-image:linear-gradient(140deg,#FFFFFF,#EDF9F8)}
.g5{background-image:linear-gradient(140deg,#8FD9D2,#2CBFB6)}
.g6{background-image:linear-gradient(140deg,#EDF9F8,#E4CE9C)}

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

/* ==========================================================
   HEADER
   ========================================================== */
.site-head{position:fixed;inset:0 0 auto 0;z-index:80;transition:background .3s,box-shadow .3s,padding .3s;padding:16px 0}
.site-head.scrolled{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);box-shadow:0 8px 30px -18px rgba(0,0,0,.34);padding:9px 0}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:46px;height:46px;border-radius:50%;background:var(--turq);color:#fff;display:grid;place-items:center;font-family:var(--script);font-size:1.6rem;line-height:1;box-shadow:var(--shadow);flex:0 0 auto}
.brand-name{font-family:var(--serif);font-weight:700;font-size:1.22rem;color:var(--ink);line-height:1.05}
.brand-name small{display:block;font-family:var(--display);font-weight:600;font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:var(--turq-deep);margin-top:3px}
.site-head:not(.scrolled) .brand-name,.site-head:not(.scrolled) .brand-name small{color:#fff}
.head-actions{display:flex;align-items:center;gap:10px}
.nav-desk{display:flex;gap:26px;align-items:center}
.nav-desk a{font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);transition:color .2s}
.nav-desk a:hover{color:var(--turq-deep)}
.site-head:not(.scrolled) .nav-desk a{color:#fff}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink);position:relative;transition:background .2s,color .2s}
.icon-btn:hover{background:var(--turq);box-shadow:inset 0 0 0 1.5px var(--turq);color:#fff}
.site-head:not(.scrolled) .icon-btn{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85);color:#fff}
.icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cart-count{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--gold);color:#fff;font-family:var(--display);font-size:.66rem;font-weight:700;display:grid;place-items:center;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.cart-count[hidden]{display:none}
.burger{display:none}
@media (max-width:960px){.nav-desk{display:none}.burger{display:grid}}

/* nav overlay */
.nav-ov{position:fixed;inset:0;z-index:95;background:linear-gradient(160deg,var(--turq),var(--turq-deep));display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s}
.nav-ov.open{opacity:1;pointer-events:auto}
.nav-ov ul{text-align:center;padding:20px}
.nav-ov li{margin:12px 0}
.nav-ov a{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,4.4vw,2.3rem);color:#fff}
.nav-ov a:hover{color:var(--gold-soft)}
.nav-close{position:absolute;top:22px;right:22px;width:48px;height:48px;border-radius:50%;color:#fff;font-size:1.5rem;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}

/* ==========================================================
   HERO
   ========================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.08);transition:opacity 1.6s ease,transform 9s linear}
.hero-slide.on{opacity:1;transform:scale(1)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,95,90,.62),rgba(14,95,90,.34) 45%,rgba(14,95,90,.78))}
.hero-in{position:relative;z-index:2;padding:130px 0 120px;max-width:820px}
.hero h1{color:#fff;margin:8px 0 18px}
.hero .script{color:var(--gold-soft);font-size:2.2rem}
.hero p{font-size:1.14rem;max-width:620px;color:rgba(255,255,255,.94)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;font-size:.85rem;color:rgba(255,255,255,.9)}
.hero-trust span{display:inline-flex;align-items:center;gap:8px}
.hero-trust i{width:7px;height:7px;border-radius:50%;background:var(--gold-soft);flex:0 0 auto}
.hero-dots{position:absolute;left:0;right:0;bottom:28px;z-index:3;display:flex;justify-content:center;gap:8px}
.hero-dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .25s,width .25s}
.hero-dots button.on{background:#fff;width:26px;border-radius:999px}

/* ==========================================================
   PORTALS
   ========================================================== */
.portals{padding:86px 0 20px;background:var(--white)}
.portal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.portal{position:relative;border-radius:var(--rad);overflow:hidden;background:#fff;box-shadow:0 18px 44px -22px rgba(23,150,143,.4);transition:transform .3s,box-shadow .3s;display:block;text-align:left}
.portal:hover{transform:translateY(-7px);box-shadow:0 28px 60px -22px rgba(23,150,143,.55)}
.portal .ph{aspect-ratio:4/3}
.portal-body{padding:24px 24px 28px}
.portal-body .emoji{font-size:1.7rem;line-height:1;display:block;margin-bottom:10px}
.portal-body h3{margin-bottom:8px}
.portal-body p{font-size:.95rem}
.portal-body .go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--turq-deep)}
@media (max-width:860px){.portal-grid{grid-template-columns:1fr}}

/* ==========================================================
   SHOP
   ========================================================== */
.shop{padding:90px 0}
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:36px}
.filter{padding:11px 20px;border-radius:999px;font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:var(--char);box-shadow:inset 0 0 0 1.6px var(--mint);transition:all .22s}
.filter:hover{box-shadow:inset 0 0 0 1.6px var(--turq);color:var(--turq-deep)}
.filter.on{background:var(--turq);color:#fff;box-shadow:inset 0 0 0 1.6px var(--turq)}
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.prod{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 14px 34px -20px rgba(23,150,143,.42);display:flex;flex-direction:column;transition:transform .28s,box-shadow .28s}
.prod:hover{transform:translateY(-5px);box-shadow:0 22px 46px -20px rgba(23,150,143,.55)}
.prod .ph{aspect-ratio:1/1;cursor:pointer}
.prod-badge{position:absolute;top:10px;left:10px;z-index:2;background:var(--gold);color:#fff;font-family:var(--display);font-size:.6rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.prod-body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.prod-body h4{font-family:var(--serif);font-size:1.02rem;color:var(--ink);font-weight:700;line-height:1.2}
.prod-body .desc{font-size:.83rem;margin:6px 0 12px;flex:1}
.prod-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.prod-opt{display:block;margin-bottom:12px}
.prod-opt span{display:block;font-family:var(--display);font-weight:700;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--turq-deep);margin-bottom:5px}
.prod-opt select{width:100%;padding:9px 11px;border-radius:11px;border:1.5px solid var(--mint);background:#fff;font-family:var(--body);font-size:.85rem;color:var(--ink)}
.prod-opt select:focus{outline:none;border-color:var(--turq)}
.price{font-family:var(--serif);font-weight:700;font-size:1.12rem;color:var(--turq-deep)}
.add{padding:9px 16px;border-radius:999px;background:var(--turq);color:#fff;font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;transition:background .2s,transform .2s}
.add:hover{background:var(--turq-deep);transform:translateY(-2px)}
.add.added{background:var(--gold)}
@media (max-width:1000px){.prod-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.prod-grid{grid-template-columns:repeat(2,1fr);gap:14px}}

/* ==========================================================
   NAKED CAKES (foundations)
   ========================================================== */
.naked{padding:90px 0;background:var(--mint-soft)}
.naked-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.naked-card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 14px 34px -20px rgba(23,150,143,.4)}
.naked-card .ph{aspect-ratio:16/10}
.naked-card .nb{padding:20px 22px 24px}
.naked-card h4{font-family:var(--serif);font-size:1.15rem;color:var(--ink);font-weight:700}
.naked-card p{font-size:.88rem;margin-top:6px}
.naked-card .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.tag{font-size:.7rem;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--mint-soft);color:var(--turq-ink);box-shadow:inset 0 0 0 1px var(--mint)}
.size-table{margin-top:34px;background:#fff;border-radius:var(--rad);padding:8px 6px;box-shadow:0 14px 34px -20px rgba(23,150,143,.4);overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:460px}
th,td{padding:13px 16px;text-align:left;font-size:.92rem}
th{font-family:var(--display);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--turq-deep);border-bottom:var(--hairline)}
td{border-bottom:1px solid rgba(207,237,234,.8)}
tr:last-child td{border-bottom:none}
td.p{font-weight:700;color:var(--turq-deep);font-family:var(--serif)}
@media (max-width:860px){.naked-grid{grid-template-columns:1fr 1fr}}

/* MOBILE: the price table was forcing a sideways scroll on phones, which is
   why it looked different to desktop. Below 640px each row becomes its own
   stacked card with labels, so nothing is cut off or needs scrolling. */
@media (max-width:640px){
  .size-table{padding:0;background:transparent;box-shadow:none;overflow:visible}
  .size-table table{min-width:0;display:block}
  .size-table thead{display:none}
  .size-table tbody{display:grid;gap:12px}
  .size-table tr{display:grid;grid-template-columns:1fr auto;gap:4px 14px;background:#fff;border-radius:16px;padding:16px 18px;box-shadow:0 12px 30px -20px rgba(23,150,143,.5);align-items:baseline}
  .size-table td{border:none;padding:0;font-size:.9rem}
  .size-table td:nth-child(1){font-family:var(--serif);font-weight:700;font-size:1.25rem;color:var(--ink)}
  .size-table td:nth-child(4){grid-row:1;grid-column:2;font-size:1.25rem;text-align:right}
  .size-table td:nth-child(2){grid-column:1;opacity:.85}
  .size-table td:nth-child(2)::before{content:"Layers: ";font-family:var(--display);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--turq-deep)}
  .size-table td:nth-child(3){grid-column:1/-1;opacity:.85}
  .size-table td:nth-child(3)::before{content:"Serves: ";font-family:var(--display);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--turq-deep)}
}
@media (max-width:600px){.naked-grid{grid-template-columns:1fr}}

/* ==========================================================
   BUILD A CAKE
   ========================================================== */
.builder{padding:94px 0;background:linear-gradient(165deg,var(--turq),var(--turq-deep));color:#fff}
.builder h2,.builder h3{color:#fff}
.builder .eyebrow{color:var(--gold-soft)}
.builder .eyebrow::before,.builder .eyebrow::after{background:var(--gold-soft)}
.build-grid{display:grid;grid-template-columns:1.35fr .95fr;gap:26px;align-items:start}
.build-panel{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26);border-radius:var(--rad);padding:26px;backdrop-filter:blur(6px)}
.build-step{margin-bottom:26px}
.build-step:last-child{margin-bottom:0}
.build-label{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-soft);display:block;margin-bottom:12px}
.layer-hint{font-weight:400;text-transform:none;letter-spacing:0;font-family:var(--body);font-size:.85rem;color:rgba(255,255,255,.88)}
.opt.maxed{opacity:.45}
.decor-detail{margin-top:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:16px 18px}
.decor-detail h5{font-family:var(--serif);font-size:1.05rem;color:#fff;font-weight:700;margin-bottom:8px}
.decor-detail ul{display:flex;flex-wrap:wrap;gap:7px}
.decor-detail li{font-size:.78rem;color:#fff;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.upload-box.light{border:2px dashed rgba(255,255,255,.45);background:rgba(255,255,255,.06)}
.upload-box.light:hover{border-color:#fff;background:rgba(255,255,255,.14)}
.upload-box.light .script{color:var(--gold-soft)}
.upload-box.light p{color:rgba(255,255,255,.85)}
.upload-list.light{color:var(--gold-soft)}
.opt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.opt-grid.two{grid-template-columns:repeat(2,1fr)}
.opt{padding:13px 10px;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.4);color:#fff;font-family:var(--display);font-weight:700;font-size:.8rem;text-align:center;line-height:1.25;transition:all .2s}
.opt small{display:block;font-family:var(--body);font-weight:400;font-size:.68rem;opacity:.82;margin-top:4px}
.opt:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.opt.on{background:#fff;color:var(--turq-deep);box-shadow:inset 0 0 0 1.6px #fff}
.opt.on small{opacity:.75}
.quote{position:sticky;top:96px;background:#fff;color:var(--char);border-radius:var(--rad);padding:26px;box-shadow:0 24px 60px -22px rgba(0,0,0,.45)}
.quote h3{color:var(--ink);font-size:1.2rem}
.quote-lines{margin:18px 0;border-top:var(--hairline);border-bottom:var(--hairline);padding:6px 0}
.qline{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:.9rem;border-bottom:1px solid rgba(207,237,234,.9)}
.qline:last-child{border-bottom:none}
.qline span:last-child{font-weight:700;color:var(--turq-deep);white-space:nowrap}
.qtotal{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:8px}
.qtotal .lbl{font-family:var(--display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--char)}
.qtotal .amt{font-family:var(--serif);font-weight:700;font-size:2.1rem;color:var(--turq-deep);line-height:1}
.qnote{font-size:.78rem;opacity:.8;margin-bottom:18px}
.quote .btn{width:100%;margin-bottom:9px}
@media (max-width:960px){.build-grid{grid-template-columns:1fr}.quote{position:static}.opt-grid{grid-template-columns:repeat(2,1fr)}}

/* ==========================================================
   TREAT BAR
   ========================================================== */
.treats{padding:90px 0;background:var(--mint-soft)}
.treat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.treat{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 14px 34px -20px rgba(23,150,143,.42);background:#fff;transition:transform .28s;display:flex;flex-direction:column}
.treat:hover{transform:translateY(-6px)}
.treat .ph{aspect-ratio:4/3}
.treat-body{padding:20px 20px 24px;display:flex;flex-direction:column;flex:1}
.treat-body h4{font-family:var(--serif);font-size:1.3rem;color:var(--ink);font-weight:700}
.treat-body .sub{font-size:.86rem;opacity:.82;margin-top:3px}
.treat-body .fl-label{font-family:var(--display);font-weight:700;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--turq-deep);margin:14px 0 8px}
.treat-body ul{display:flex;flex-wrap:wrap;gap:6px}
.treat-body li{font-size:.78rem;padding:5px 11px;border-radius:999px;background:var(--mint-soft);color:var(--turq-ink);box-shadow:inset 0 0 0 1px var(--mint)}
.treat-body li.wide{width:100%;border-radius:12px;line-height:1.4}
@media (max-width:1000px){.treat-grid{grid-template-columns:repeat(2,1fr)}}

/* ==========================================================
   WEDDING
   ========================================================== */
.wedding{padding:94px 0;background:#fff}
.wed-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.wed-photo{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,1fr);gap:12px}
.wed-photo .ph{border-radius:16px;aspect-ratio:3/4;cursor:pointer}
.wed-photo .ph:first-child{grid-row:span 2;aspect-ratio:auto}
.wed-steps{margin:30px 0;counter-reset:w}
.wed-steps li{position:relative;padding-left:52px;margin-bottom:20px;counter-increment:w}
.wed-steps li::before{content:counter(w);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;background:var(--mint-soft);color:var(--turq-deep);font-family:var(--display);font-weight:700;font-size:.95rem;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--mint)}
.wed-steps strong{display:block;font-family:var(--serif);color:var(--ink);font-size:1.22rem;margin-bottom:2px}
.wed-steps span{font-size:1rem}
.wedding .lead{font-size:1.22rem}
.wed-ctas{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:900px){.wed-grid{grid-template-columns:1fr}}

/* ==========================================================
   INSTAGRAM
   ========================================================== */
.insta{padding:90px 0;background:var(--mint-soft)}
.insta-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.itile{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .25s}
.itile:hover{transform:scale(1.04)}
.itile .igi{position:absolute;inset:0;display:grid;place-items:center;background:rgba(14,95,90,.42);opacity:0;transition:opacity .25s}
.itile:hover .igi{opacity:1}
.itile .igi svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.7}
@media (max-width:900px){.insta-grid{grid-template-columns:repeat(3,1fr)}}

/* ==========================================================
   STOCKISTS / CORPORATE / GALLERY TEASER
   ========================================================== */
.stockists{padding:90px 0}
.stock-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stock{background:#fff;border-radius:16px;padding:24px;box-shadow:0 14px 34px -22px rgba(23,150,143,.42);text-align:center;transition:transform .25s}
.stock:hover{transform:translateY(-5px)}
.stock .script{font-size:1.5rem;margin-bottom:4px}
.stock h4{font-family:var(--serif);font-size:1.05rem;color:var(--ink);font-weight:700}
.stock p{font-size:.83rem;margin-top:5px}
.stock .region-tag{display:inline-block;margin-top:10px;font-family:var(--display);font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--turq-deep);background:var(--mint-soft);padding:4px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--mint)}
.contact-methods{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
/* The one Miss Cake home, styled distinctly from collection points */
.home-store{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border-radius:var(--rad);overflow:hidden;box-shadow:0 20px 50px -22px rgba(23,150,143,.5);margin-bottom:52px;background:linear-gradient(150deg,var(--turq),var(--turq-deep));color:#fff}
.home-store .hs-body{padding:38px}
.home-store .hs-tag{display:inline-block;font-family:var(--display);font-weight:700;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;background:rgba(255,255,255,.16);padding:6px 14px;border-radius:999px;margin-bottom:14px}
.home-store h3{color:#fff;font-size:1.9rem;margin-bottom:10px}
.home-store .hs-sub{color:rgba(255,255,255,.9);font-size:.95rem}
.hs-hours{display:flex;flex-wrap:wrap;gap:14px 34px;margin-top:22px}
.hs-hours b{display:block;font-family:var(--display);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft)}
.hs-hours span{font-family:var(--serif);font-size:1.15rem;font-weight:700}
.hs-photo{min-height:240px}
.collect-head{text-align:center;max-width:660px;margin:0 auto 26px}
.collect-head h3{font-size:1.5rem;margin-bottom:8px}
.collect-head p{font-size:.92rem;opacity:.85}
@media (max-width:820px){.home-store{grid-template-columns:1fr}.home-store .hs-body{padding:28px}.hs-photo{min-height:200px;order:-1}}
.cmethod{background:#fff;border-radius:16px;padding:24px 20px;text-align:center;box-shadow:0 14px 34px -22px rgba(23,150,143,.42);transition:transform .25s}
.cmethod:hover{transform:translateY(-5px)}
.cmethod .cm-ic{width:52px;height:52px;border-radius:50%;background:var(--mint-soft);display:grid;place-items:center;margin:0 auto 14px;box-shadow:inset 0 0 0 1.5px var(--mint)}
.cmethod .cm-ic svg{width:24px;height:24px;stroke:var(--turq-deep);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cmethod h4{font-family:var(--serif);font-size:1rem;color:var(--ink);font-weight:700;margin-bottom:4px}
.cmethod a,.cmethod p{font-size:.86rem;color:var(--turq-deep);font-weight:600;word-break:break-word}
.cmethod span{display:block;font-size:.78rem;opacity:.75;font-weight:400;margin-top:4px}
@media (max-width:820px){.contact-methods{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.contact-methods{grid-template-columns:1fr}}
.corp{padding:0 0 90px}
.corp-in{background:linear-gradient(150deg,var(--mint-soft),var(--mint));border-radius:var(--rad);padding:48px;display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center;box-shadow:inset 0 0 0 1px rgba(201,162,75,.3)}
.corp-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0 26px}
.corp-list li{position:relative;padding-left:22px;font-size:.9rem}
.corp-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--turq)}
.corp-in .ph{aspect-ratio:4/3;border-radius:16px}
.corp-gallery{margin-top:44px}
.cg-head{text-align:center;max-width:560px;margin:0 auto 20px}
.cg-head h3{font-size:1.5rem;margin-bottom:6px}
.cg-head p{font-size:.9rem;opacity:.82}
.cg-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.cg-grid .ph{aspect-ratio:1/1;border-radius:12px;cursor:pointer;transition:transform .25s}
.cg-grid .ph:hover{transform:scale(1.04)}
@media (max-width:900px){.cg-grid{grid-template-columns:repeat(3,1fr)}}
.gal-teaser{padding:0 0 90px}
.gt-in{position:relative;border-radius:var(--rad);overflow:hidden;min-height:400px;display:grid;place-items:center;text-align:center;color:#fff;padding:60px 24px}
.gt-in .ph{position:absolute;inset:0}
.gt-in::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(14,95,90,.78),rgba(34,48,47,.7))}
.gt-copy{position:relative;z-index:2;max-width:560px}
.gt-copy h2{color:#fff}
.gt-copy p{margin:16px 0 26px;color:rgba(255,255,255,.92)}
@media (max-width:1000px){.stock-grid{grid-template-columns:repeat(2,1fr)}.corp-in{grid-template-columns:1fr;padding:34px}}
@media (max-width:560px){.corp-list{grid-template-columns:1fr}}

/* ==========================================================
   CAKE CARE & TRANSPORT
   ========================================================== */
.care{padding:90px 0;background:var(--white);position:relative;overflow:hidden}
.care-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:1}
.care-card{background:#fff;border-radius:18px;padding:28px 24px;box-shadow:0 14px 34px -22px rgba(23,150,143,.42);transition:transform .28s,box-shadow .28s}
.care-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px -22px rgba(23,150,143,.55)}
.care-ic{width:54px;height:54px;border-radius:14px;background:var(--mint-soft);display:grid;place-items:center;margin-bottom:15px;box-shadow:inset 0 0 0 1.5px var(--mint)}
.care-ic svg{width:26px;height:26px;stroke:var(--turq-deep);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.care-card h4{font-family:var(--serif);font-size:1.18rem;color:var(--ink);font-weight:700;margin-bottom:7px}
.care-card p{font-size:.9rem}
.care-note{margin-top:30px;text-align:center;max-width:760px;margin-left:auto;margin-right:auto;font-size:.9rem;background:var(--mint-soft);border-radius:16px;padding:18px 22px;box-shadow:inset 0 0 0 1px var(--mint)}
@media (max-width:960px){.care-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.care-grid{grid-template-columns:1fr}}

/* ==========================================================
   FAQ + FOOTER
   ========================================================== */
.faq{padding:90px 0;background:var(--mint-soft)}
.faq-item{background:#fff;border-radius:14px;margin-bottom:10px;overflow:hidden;box-shadow:0 8px 22px -18px rgba(23,150,143,.5)}
.faq-item>button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:19px 22px;text-align:left;font-family:var(--serif);font-weight:700;font-size:1rem;color:var(--ink)}
.faq-item .plus{color:var(--turq);font-size:1.4rem;line-height:1;transition:transform .3s;flex:0 0 auto}
.faq-item.open .plus{transform:rotate(45deg)}
.faq-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-body p{padding:0 22px 20px;font-size:.93rem}
.site-foot{background:var(--ink);color:rgba(255,255,255,.78);padding:66px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px;margin-bottom:40px}
.foot-grid h4{font-family:var(--display);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:16px}
.foot-grid li{margin-bottom:9px;font-size:.9rem}
.foot-grid a:hover{color:#fff}
.foot-brand .script{color:var(--gold-soft);font-size:2rem}
.foot-brand p{font-size:.9rem;margin-top:10px;max-width:290px}
.foot-bot{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.8rem}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ==========================================================
   ARTISTIC MOTIFS - subtle, premium, never in the way
   ========================================================== */
.deco-dot{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--mint),transparent 70%);opacity:.55;pointer-events:none;z-index:0}
.deco-ring{position:absolute;border-radius:50%;border:1.5px solid rgba(201,162,75,.35);pointer-events:none;z-index:0}
.sec-head .kicker-swirl{display:block;margin:0 auto 6px;width:56px;height:auto;opacity:.9}
.wave-top{display:block;width:100%;height:auto;margin-bottom:-2px;color:var(--mint-soft)}
.wave-flip{transform:rotate(180deg)}

/* ==========================================================
   MOBILE HARDENING
   The scribble spans were nowrap, so with the larger headings a long
   highlighted phrase pushed past the screen edge and knocked the layout
   sideways on phones. Below 720px they wrap normally and the heading
   scale steps down so nothing overflows.
   ========================================================== */
@media (max-width:720px){
  h1{font-size:clamp(2.2rem,9vw,3.1rem)}
  h2{font-size:clamp(1.85rem,7.4vw,2.5rem)}
  h3{font-size:1.35rem}
  .scribble{white-space:normal;background-size:100% 2px}
  .eyebrow{font-size:.72rem;letter-spacing:.22em}
  .lead,.sec-head p{font-size:1rem}
  .wrap{padding:0 18px}
  /* long unbroken words (URLs, emails) must never widen the page */
  h1,h2,h3,p,li,td{overflow-wrap:break-word;word-break:break-word}
}
@media (max-width:420px){
  h1{font-size:2rem}
  h2{font-size:1.7rem}
  .wrap{padding:0 15px}
}
@media (max-width:560px){
  /* modals need their padding back for reading room on a small screen */
  .modal{padding:10px}
  .modal-card{padding:30px 20px 24px;max-height:94vh;border-radius:16px}
  .hero-in{padding:112px 0 92px}
  /* decorations that hang outside their box are pulled in so they cannot
     push the page sideways */
  .story-photos .stamp{left:-8px;top:-8px;width:84px;height:84px;font-size:.95rem}
  .story-photos .inset{right:-6px;bottom:-14px}
  .build-panel{padding:20px}
  .home-store .hs-body{padding:24px 20px}
}
/* belt and braces: nothing may create a horizontal scrollbar */
html,body{max-width:100%}
img,svg,table{max-width:100%}

/* ==========================================================
   RAINBOW ACCENT SYSTEM - professional, restrained
   ========================================================== */
/* full rainbow heading treatment (used on a few headings, not all) */
.rainbow-text{background:var(--rainbow-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.rainbow-text .scribble{background-image:none;padding-bottom:0}
/* thin scroll-progress bar pinned to the very top */
.rainbow-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;background:var(--rainbow-h);background-size:100vw 3px;background-attachment:fixed;transition:width .1s linear;pointer-events:none}
/* hairline rainbow under the header once it goes solid */
.site-head.scrolled::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--rainbow-h);opacity:.9}
/* rainbow ring that lights up around the logo mark on hover */
.brand-mark{position:relative}
.brand-mark::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:var(--rainbow);opacity:0;transition:opacity .3s;z-index:-1;filter:blur(2px)}
.brand:hover .brand-mark::before{opacity:1}
/* top accent strip that sweeps in on cards */
.rb-top{position:relative}
.rb-top::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:18px 18px 0 0;background:var(--rainbow-h);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;z-index:3}
.rb-top:hover::before{transform:scaleX(1)}
/* rainbow divider line between sections */
.rb-rule{height:3px;border:0;margin:0;background:var(--rainbow-h);opacity:.85}
/* footer top rainbow strip */
.site-foot{border-top:3px solid transparent;border-image:var(--rainbow-h) 1}
/* rainbow-tinted decorative blob variant */
.deco-rainbow{position:absolute;border-radius:50%;background:conic-gradient(from 0deg,var(--rb1),var(--rb2),var(--rb3),var(--rb4),var(--rb5),var(--rb6),var(--rb1));filter:blur(46px);opacity:.16;pointer-events:none;z-index:0}
/* the est. stamp gets a rainbow ring */
.story-photos .stamp{background:var(--turq)}
.story-photos .stamp::after{content:"";position:absolute;inset:-5px;border-radius:50%;background:var(--rainbow);z-index:-1;opacity:.9}

/* ==========================================================
   CURSOR RAINBOW TRAIL
   ========================================================== */
#cursorTrail{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:125;mix-blend-mode:multiply}
body.overlay-open #cursorTrail,body.overlay-open .rainbow-progress{opacity:0;transition:opacity .2s}
@media (hover:none),(pointer:coarse){#cursorTrail{display:none}}
@media (prefers-reduced-motion:reduce){#cursorTrail,.rainbow-progress{display:none}.site-head.scrolled::after{opacity:.9}}

/* ==========================================================
   OUR STORY
   ========================================================== */
.story{padding:96px 0;background:var(--white);position:relative;overflow:hidden}
.story-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:center;position:relative;z-index:1}
.story-photos{position:relative}
.story-photos .ph{border-radius:var(--rad);box-shadow:var(--shadow)}
.story-photos .main{aspect-ratio:4/5}
.story-photos .inset{position:absolute;right:-18px;bottom:-26px;width:46%;aspect-ratio:1/1;border:6px solid #fff;box-shadow:0 20px 44px -20px rgba(23,150,143,.5)}
.story-photos .stamp{position:absolute;left:-20px;top:-20px;width:104px;height:104px;border-radius:50%;background:var(--turq);color:#fff;display:grid;place-content:center;text-align:center;font-family:var(--script);font-size:1.15rem;line-height:1.15;box-shadow:var(--shadow);z-index:2;padding:10px}
.story-photos .stamp b{font-family:var(--serif);font-size:1.7rem;display:block}
.story-body .signature{font-family:var(--script);font-size:2.1rem;color:var(--turq);margin-top:18px}
.story-body .signature small{display:block;font-family:var(--display);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--char);margin-top:2px}
.story-stats{display:flex;flex-wrap:wrap;gap:26px 40px;margin-top:28px}
.story-stat b{font-family:var(--serif);font-size:2.1rem;color:var(--turq-deep);display:block;line-height:1}
.story-stat span{font-size:.82rem;letter-spacing:.03em}
@media (max-width:880px){.story-grid{grid-template-columns:1fr;gap:60px}.story-photos{max-width:440px;margin:0 auto}}

/* ==========================================================
   WHY MISS CAKE (differentiators)
   ========================================================== */
.why{padding:90px 0;background:var(--mint-soft);position:relative;overflow:hidden}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;z-index:1}
.why-card{background:#fff;border-radius:18px;padding:30px 24px;box-shadow:0 14px 34px -22px rgba(23,150,143,.42);transition:transform .28s,box-shadow .28s;text-align:center}
.why-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px -22px rgba(23,150,143,.55)}
.why-ic{width:58px;height:58px;border-radius:50%;background:var(--mint-soft);display:grid;place-items:center;margin:0 auto 16px;box-shadow:inset 0 0 0 1.5px var(--mint)}
.why-ic svg{width:26px;height:26px;stroke:var(--turq-deep);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.why-card h4{font-family:var(--serif);font-size:1.08rem;color:var(--ink);font-weight:700;margin-bottom:8px}
.why-card p{font-size:.88rem}
@media (max-width:960px){.why-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.why-grid{grid-template-columns:1fr}}

/* ==========================================================
   REVIEWS + CUSTOMER PHOTOS
   ========================================================== */
.reviews{padding:94px 0;background:var(--white);position:relative;overflow:hidden}
.rev-rating{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}
.stars{display:inline-flex;gap:3px}
.stars svg{width:20px;height:20px;fill:var(--gold);stroke:none}
.rev-rating b{font-family:var(--serif);font-size:1.15rem;color:var(--ink)}
.rev-rating span{font-size:.86rem;opacity:.8}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.rev-card{background:#fff;border-radius:18px;padding:28px 26px;box-shadow:0 14px 34px -22px rgba(23,150,143,.42);display:flex;flex-direction:column;position:relative}
.rev-card .quote-mark{font-family:var(--serif);font-size:3.4rem;line-height:.6;color:var(--mint);height:26px}
.rev-card .stars{margin-bottom:12px}
.rev-card p{font-size:.95rem;flex:1}
.rev-who{display:flex;align-items:center;gap:12px;margin-top:20px}
.rev-who .av{width:44px;height:44px;border-radius:50%;background:var(--turq);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-weight:700;flex:0 0 auto}
.rev-who h5{font-family:var(--serif);font-size:.96rem;color:var(--ink);font-weight:700}
.rev-who span{font-size:.78rem;opacity:.78}
.cust-strip{margin-top:44px}
.cust-strip .cs-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.cust-strip .cs-head p{font-family:var(--display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--turq-deep)}
.cust-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.cust-grid .ph{aspect-ratio:1/1;border-radius:12px;cursor:pointer;transition:transform .25s}
.cust-grid .ph:hover{transform:scale(1.04)}
@media (max-width:960px){.rev-grid{grid-template-columns:1fr}.cust-grid{grid-template-columns:repeat(3,1fr)}}

/* ==========================================================
   ACTION BAND - order / quote / whatsapp
   ========================================================== */
.action{padding:90px 0;background:linear-gradient(160deg,var(--ink),var(--turq-ink));color:#fff;position:relative;overflow:hidden}
.action .sec-head h2,.action .sec-head p{color:#fff}
.action .sec-head p{opacity:.9}
.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:1}
.act-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:var(--rad);padding:34px 28px;text-align:center;backdrop-filter:blur(4px);transition:transform .28s,background .28s}
.act-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.12)}
.act-ic{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;margin:0 auto 18px}
.act-ic svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.act-card h3{color:#fff;font-size:1.25rem;margin-bottom:8px}
.act-card p{color:rgba(255,255,255,.86);font-size:.9rem;margin-bottom:22px}
.act-card .btn{width:100%}
.act-card.wa .act-ic{background:rgba(37,211,102,.22)}
@media (max-width:820px){.action-grid{grid-template-columns:1fr}}

/* ==========================================================
   ANIMATED BAKER - draws the eye to the WhatsApp button
   ========================================================== */
.baker-nudge{position:relative;display:flex;align-items:flex-end;gap:8px;pointer-events:none}
.baker{width:82px;height:82px;flex:0 0 auto;animation:bakerBob 2.6s ease-in-out infinite;transform-origin:50% 100%;filter:drop-shadow(0 8px 16px rgba(0,0,0,.28))}
@keyframes bakerBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
.baker .b-arm{transform-origin:70% 40%;animation:bakerWave 1.5s ease-in-out infinite}
@keyframes bakerWave{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(24deg)}}
.baker .b-steam{animation:bakerSteam 2.4s ease-in-out infinite;transform-origin:center}
@keyframes bakerSteam{0%{opacity:0;transform:translateY(3px) scale(.85)}45%{opacity:.85}100%{opacity:0;transform:translateY(-7px) scale(1.15)}}
.baker-bubble{background:#fff;color:var(--ink);border-radius:16px 16px 16px 4px;padding:10px 14px;font-family:var(--serif);font-weight:700;font-size:.86rem;line-height:1.25;box-shadow:0 12px 28px -12px rgba(0,0,0,.4);max-width:172px;margin-bottom:12px;position:relative;animation:bubblePop .5s ease both;animation-delay:1.2s}
@keyframes bubblePop{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
.baker-bubble small{display:block;font-family:var(--body);font-weight:400;font-size:.74rem;opacity:.8;margin-top:2px}
.baker-bubble .bb-x{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-size:.7rem;display:grid;place-items:center;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.baker-nudge.dismissed .baker-bubble{display:none}
@media (max-width:600px){.baker{width:58px;height:58px}.baker-bubble{max-width:126px;font-size:.74rem;padding:8px 11px}}
/* On the narrowest phones the bubble costs too much screen, so the waving
   baker alone does the job of drawing the eye to WhatsApp. */
@media (max-width:430px){.baker-bubble{display:none}.baker{width:52px;height:52px}}
@media (prefers-reduced-motion:reduce){.baker,.baker .b-arm,.baker .b-steam,.baker-bubble{animation:none}}

/* ==========================================================
   FLOATING ACTIONS
   ========================================================== */
/* The wrapper is only a positioning frame. Without pointer-events:none its
   bounding box (widened by the baker's speech bubble) sat invisibly over the
   page and swallowed taps on whatever was underneath, which is what blocked
   the builder options on mobile. Only the actual controls take clicks. */
.float-wrap{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none}
.float-wrap > *,.float-wrap .baker,.float-wrap .baker-bubble{pointer-events:auto}
.fab{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:999px;background:var(--turq);color:#fff;font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;box-shadow:0 16px 34px -14px rgba(0,0,0,.5);transition:transform .25s}
.fab:hover{transform:translateY(-3px)}
.fab.wa{background:#25D366}
.fab svg{width:18px;height:18px;fill:currentColor}
@media (max-width:600px){.fab span{display:none}.fab{padding:15px}}

/* ==========================================================
   MODALS + CART DRAWER
   ========================================================== */
.modal{position:fixed;inset:0;z-index:110;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-bd{position:absolute;inset:0;background:rgba(14,95,90,.55);backdrop-filter:blur(4px)}
.modal-card{position:relative;background:#fff;border-radius:var(--rad);width:100%;max-width:600px;max-height:92vh;overflow-y:auto;padding:38px 34px 34px;box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
.modal-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:1.2rem;color:var(--char);box-shadow:inset 0 0 0 1.4px var(--mint)}
.modal-x:hover{background:var(--turq);color:#fff;box-shadow:none}
.modal-card h3{margin:4px 0 6px}
.modal-sub{font-size:.94rem;margin-bottom:20px}
.progress{display:flex;gap:6px;margin-bottom:22px}
.progress i{height:4px;flex:1;border-radius:999px;background:var(--mint);transition:background .3s}
.progress i.done{background:var(--turq)}
.step{display:none}
.step.active{display:block}
.step-label{display:block;font-family:var(--serif);font-weight:700;font-size:1.18rem;color:var(--ink);margin-bottom:14px}
.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-bottom:8px}
.choice{padding:15px 13px;border-radius:15px;box-shadow:inset 0 0 0 1.7px var(--mint);font-family:var(--display);font-weight:700;font-size:.88rem;color:var(--char);text-align:center;transition:all .2s;line-height:1.25}
.choice:hover{box-shadow:inset 0 0 0 1.7px var(--turq);color:var(--turq-deep);transform:translateY(-2px)}
.choice.sel{background:var(--turq);color:#fff;box-shadow:inset 0 0 0 1.7px var(--turq)}
.choice small{display:block;font-family:var(--body);font-weight:400;font-size:.72rem;margin-top:3px;opacity:.85}
/* multi-select chips (e.g. mixing several sponge flavours) */
.chip-multi{display:flex;flex-wrap:wrap;gap:9px}
.chip-multi .chip{padding:11px 16px;border-radius:999px;box-shadow:inset 0 0 0 1.6px var(--mint);font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.03em;color:var(--char);transition:all .2s}
.chip-multi .chip:hover{box-shadow:inset 0 0 0 1.6px var(--turq);color:var(--turq-deep);transform:translateY(-2px)}
.chip-multi .chip.sel{background:var(--turq);color:#fff;box-shadow:inset 0 0 0 1.6px var(--turq)}
.chip-hint{font-size:.76rem;opacity:.75;margin-top:8px}
.field{margin-bottom:15px}
.field label{display:block;font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--char);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border-radius:13px;border:1.7px solid var(--mint);background:#fff;font-size:.95rem;color:var(--ink);transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--turq)}
.field .hint{font-size:.76rem;opacity:.75;margin-top:6px}
.err{display:none;color:#C0392B;font-size:.8rem;margin-top:6px}
.field.invalid input,.field.invalid select{border-color:#C0392B}
.field.invalid .err{display:block}
.step-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px}
.step-nav .btn{padding:14px 26px;font-size:.74rem}
.btn-back{color:var(--char);font-weight:700;font-size:.88rem;padding:14px 8px}
.btn-back:hover{color:var(--turq-deep)}
.success{display:none;text-align:center;padding:16px 0}
.success.show{display:block}
.tick{width:66px;height:66px;border-radius:50%;background:var(--turq);display:grid;place-items:center;margin:0 auto 20px}
.tick svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.upload-box{border:2px dashed var(--mint);border-radius:15px;padding:24px;text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
.upload-box:hover{border-color:var(--turq);background:var(--mint-soft)}
.upload-box .script{font-size:1.5rem}
.upload-box p{font-size:.84rem;margin-top:4px}
.upload-list{margin-top:10px;font-size:.82rem;color:var(--turq-deep);font-weight:600}

/* cart drawer */
.drawer{position:fixed;inset:0;z-index:115;display:none}
.drawer.open{display:block}
.drawer-bd{position:absolute;inset:0;background:rgba(14,95,90,.5)}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);background:#fff;display:flex;flex-direction:column;box-shadow:-20px 0 60px -20px rgba(0,0,0,.5);animation:slideIn .3s ease}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}
.drawer-head{padding:24px 24px 16px;border-bottom:var(--hairline);display:flex;justify-content:space-between;align-items:center}
.drawer-head h3{font-size:1.25rem}
.drawer-body{flex:1;overflow-y:auto;padding:18px 24px}
.citem{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid rgba(207,237,234,.9)}
.citem .ph{width:60px;height:60px;border-radius:11px;flex:0 0 auto}
.citem .ci{flex:1;min-width:0}
.citem h4{font-family:var(--serif);font-size:.95rem;color:var(--ink);font-weight:700;line-height:1.25}
.citem .cd{font-size:.76rem;opacity:.8;margin-top:2px}
.qty{display:inline-flex;align-items:center;gap:10px;margin-top:8px}
.qty button{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1.4px var(--mint);color:var(--turq-deep);font-weight:700;display:grid;place-items:center;font-size:.95rem}
.qty button:hover{background:var(--turq);color:#fff;box-shadow:none}
.qty b{font-family:var(--serif);min-width:16px;text-align:center}
.citem .cr{text-align:right;flex:0 0 auto}
.citem .cr .price{font-size:.98rem}
.citem .rm{font-size:.72rem;color:#C0392B;margin-top:8px;text-decoration:underline}
.drawer-foot{border-top:var(--hairline);padding:20px 24px 24px}
.drawer-foot .qtotal{margin-bottom:14px}
.empty{text-align:center;padding:50px 10px;opacity:.75}
.empty .script{font-size:1.7rem;margin-bottom:8px}

/* ==========================================================
   TIKTOK-STYLE SCROLL LIGHTBOX
   ========================================================== */
.lightbox{position:fixed;inset:0;z-index:130;background:#0B1A19;display:none}
.lightbox.open{display:block}
.lb-track{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch}
.lb-track::-webkit-scrollbar{display:none}
.lb-track{scrollbar-width:none}
.lb-slide{height:100svh;scroll-snap-align:start;display:grid;place-items:center;padding:70px 16px 130px;position:relative}
.lb-slide .inner{width:min(560px,100%);aspect-ratio:3/4;border-radius:16px;background-size:cover;background-position:center;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.lb-slide .inner.wide{aspect-ratio:16/10}
.lb-cap{position:absolute;left:0;right:0;bottom:96px;text-align:center;color:#fff;padding:0 20px;pointer-events:none}
.lb-cap .script{font-size:1.9rem;color:var(--gold-soft)}
.lb-cap p{font-size:.9rem;opacity:.85;margin-top:2px}
.lb-x{position:absolute;top:16px;right:16px;z-index:5;width:46px;height:46px;border-radius:50%;color:#fff;font-size:1.35rem;display:grid;place-items:center;background:rgba(255,255,255,.12);backdrop-filter:blur(6px)}
.lb-count{position:absolute;top:22px;left:20px;z-index:5;color:rgba(255,255,255,.85);font-family:var(--display);font-size:.76rem;letter-spacing:.16em}
.lb-cta{position:absolute;left:0;right:0;bottom:24px;z-index:5;display:flex;justify-content:center;padding:0 20px}
.lb-hint{position:absolute;left:0;right:0;bottom:88px;z-index:4;text-align:center;color:rgba(255,255,255,.55);font-family:var(--display);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;animation:bob 2s ease-in-out infinite;pointer-events:none}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(6px);opacity:.9}}
.lb-hint.gone{display:none}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,120%);z-index:140;background:var(--ink);color:#fff;padding:14px 24px;border-radius:999px;font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 18px 40px -14px rgba(0,0,0,.6);transition:transform .35s}
.toast.on{transform:translate(-50%,0)}
/* ==========================================================
   WORDPRESS / WOOCOMMERCE INTEGRATION LAYER
   Added during theme conversion. Everything above is the original
   design system from the approved HTML draft.
   ========================================================== */

/* Real photos dropped into any .ph image well. When a photo is present
   the gradient placeholder and its label are hidden automatically. */
.ph > img.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph.has-img::after{display:none}
.ph.has-img{background-image:none !important}

/* Custom logo sizing (Appearance > Customize > Site Identity) */
.brand .custom-logo{width:auto;height:46px;border-radius:0;box-shadow:none;background:none}
.site-head.scrolled .brand .custom-logo{height:40px}
.brand-mark.has-logo{background:none;box-shadow:none;width:auto;height:auto;border-radius:0}

/* Shop grid product image is a real link now */
.prod .ph a{position:absolute;inset:0;display:block}
.prod .ph .ph-img{z-index:1}

/* WooCommerce cart count mirrors the header bag badge */
.cart-count{transition:transform .2s}
.cart-count.bump{transform:scale(1.35)}

/* Loading state for the AJAX shop grid */
.prod-grid.loading{opacity:.5;pointer-events:none;transition:opacity .2s}
.shop-empty{grid-column:1/-1;text-align:center;padding:50px 10px;opacity:.75}
.shop-empty .script{font-size:1.7rem;display:block;margin-bottom:8px}

/* Add-to-cart pending / added states */
.add.loading{opacity:.7;pointer-events:none}

/* --- WooCommerce single product + shop archive (standalone pages) ---
   These use the same tokens so /shop, /cart, /checkout and product pages
   match the brand rather than falling back to the WooCommerce default. */
.wc-page{padding:120px 0 90px;min-height:60vh}
.wc-page .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.woocommerce-breadcrumb{font-family:var(--display);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--turq-deep);margin-bottom:24px}
.woocommerce ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;list-style:none;margin:0;padding:0}
.woocommerce ul.products li.product{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 14px 34px -20px rgba(23,150,143,.42);text-align:left;transition:transform .28s,box-shadow .28s}
.woocommerce ul.products li.product:hover{transform:translateY(-5px);box-shadow:0 22px 46px -20px rgba(23,150,143,.55)}
.woocommerce ul.products li.product a img{width:100%;aspect-ratio:1/1;object-fit:cover;margin:0}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--serif);font-size:1.02rem;color:var(--ink);font-weight:700;padding:14px 16px 0}
.woocommerce ul.products li.product .price{display:block;padding:6px 16px 0;color:var(--turq-deep);font-family:var(--serif);font-weight:700}
.woocommerce ul.products li.product .button{margin:12px 16px 18px}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;padding:14px 26px;border-radius:999px;background:var(--turq);color:#fff;border:none;box-shadow:var(--shadow);transition:transform .25s,background .25s;cursor:pointer}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--turq-deep);transform:translateY(-3px)}
.woocommerce span.onsale{background:var(--gold);color:#fff;border-radius:999px;font-family:var(--display);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;min-height:auto;min-width:auto;padding:6px 12px;line-height:1}
.woocommerce div.product .product_title{font-family:var(--serif);font-size:clamp(2rem,4vw,2.8rem);color:var(--ink)}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--turq-deep);font-family:var(--serif);font-weight:700;font-size:1.6rem}
.woocommerce div.product .woocommerce-product-gallery img{border-radius:16px}
.woocommerce .quantity input.qty{border:1.6px solid var(--mint);border-radius:10px;padding:10px}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--turq);border-radius:12px}
.woocommerce-message::before,.woocommerce-info::before{color:var(--turq)}
.woocommerce table.shop_table{border-radius:14px;border-collapse:separate}
.woocommerce .cart-collaterals .cart_totals,.woocommerce-checkout #payment{border-radius:14px}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.select2-container .select2-selection{border:1.6px solid var(--mint);border-radius:10px;padding:12px}
.wc-page h1{font-family:var(--serif);color:var(--ink);margin-bottom:20px}
@media (max-width:1000px){.woocommerce ul.products{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:14px}}
@media (max-width:480px){.woocommerce ul.products{grid-template-columns:1fr}}

/* Related products heading on single product */
.woocommerce .related > h2,.woocommerce .upsells > h2{font-family:var(--serif);color:var(--ink);font-size:1.8rem;margin-bottom:20px}