:root {
  --bg: #f3e9fd;
  --bg-2: #ebdcfb;
  --card: #ffffff;
  --purple: #9a7fdc;
  --purple-dark: #6f52c4;
  --purple-soft: #d9c9f7;
  --pink: #ff7fbf;
  --pink-dark: #ec5aa5;
  --pink-soft: #ffd6ea;
  --ink: #4a3577;
  --muted: #8a78b3;
  --radius: 22px;
  --shadow: 0 10px 30px rgba(111, 82, 196, .15);
  --font: 'Fredoka', system-ui, sans-serif;
  --script: 'Pacifico', cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 10%, #fff6 0 120px, transparent 121px),
    radial-gradient(circle at 90% 30%, #fff5 0 180px, transparent 181px),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  background-attachment: fixed;
  min-height: 100vh;
}
h1, h2, h3 { margin: 0; }
button { font: inherit; cursor: pointer; color: inherit; }
/* Anything the scripts hide stays hidden, whatever display a class gives it */
[hidden] { display: none !important; }
.muted { color: var(--muted); margin: 4px 0 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; border: 0; border-radius: 999px;
  padding: 14px 28px; font-weight: 600; font-size: 1.05rem;
  text-decoration: none; color: #fff;
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn-pink { background: linear-gradient(180deg, var(--pink), var(--pink-dark)); box-shadow: 0 6px 0 #c94489, var(--shadow); }
.btn-purple { background: linear-gradient(180deg, var(--purple), var(--purple-dark)); box-shadow: 0 6px 0 #5238a0, var(--shadow); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 10px max(clamp(16px, 4vw, 48px), env(safe-area-inset-right)) 10px max(clamp(16px, 4vw, 48px), env(safe-area-inset-left));
  background: rgba(243, 233, 253, .85);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid #fff;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--pink-dark); }
.brand img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.brand span { font-family: var(--script); font-size: 1.4rem; }
h1, h2, h3, p, li { overflow-wrap: break-word; }
img, svg { max-width: 100%; }
.site-nav { display: flex; align-items: center; gap: clamp(10px, 3vw, 28px); margin-left: auto; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 500; padding: 10px 2px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--pink-dark); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.cart-btn {
  border: 2px solid var(--purple); background: #fff; border-radius: 999px;
  min-height: 44px; padding: 6px 16px; font-weight: 600; color: var(--purple-dark); white-space: nowrap;
}
.menu-btn {
  display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff;
  place-content: center; gap: 4px; box-shadow: var(--shadow);
}
.menu-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--purple-dark); transition: transform .2s, opacity .2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.cart-btn b {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px;
  margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--pink); color: #fff; font-size: .85rem;
}
.cart-btn.bump { animation: bump .4s; }
@keyframes bump { 50% { transform: scale(1.15); } }

/* ---------- Hero ---------- */
.hero {
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 32px;
  max-width: 1150px; margin: 0 auto; padding: 48px clamp(16px, 4vw, 48px) 24px;
}
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.1; font-weight: 700; }
.hero h1 span { font-family: var(--script); font-weight: 400; color: var(--pink-dark); }
.hero p { font-size: 1.15rem; color: var(--muted); max-width: 460px; margin: 18px 0 28px; }
.hero-logo img {
  width: 100%; max-width: 460px; display: block; margin: 0 auto;
  border-radius: 40px; box-shadow: var(--shadow); animation: float 5s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-12px) rotate(-1deg); } }

/* ---------- Events banner ---------- */
.events-banner {
  display: flex; align-items: center; gap: 20px;
  max-width: 1050px; margin: 16px auto 40px; padding: 22px 28px;
  background: linear-gradient(120deg, #fff, var(--pink-soft)); border: 3px solid #fff;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.events-banner-emoji { font-size: 3rem; }
.events-banner h2 { font-size: 1.35rem; }
.events-banner p { margin: 4px 0 0; color: var(--muted); }
.events-banner .btn { margin-left: auto; white-space: nowrap; }

/* ---------- Builder ---------- */
.builder {
  display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start;
  max-width: 1150px; margin: 0 auto 60px; padding: 0 clamp(16px, 4vw, 48px);
  scroll-margin-top: 80px;
}
.builder-steps { display: grid; gap: 24px; min-width: 0; }
.card { background: var(--card); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); border: 3px solid #fff; }
.card h2 { display: flex; align-items: center; gap: 10px; font-size: 1.4rem; }
.card h2 small { margin-left: auto; font-size: .9rem; font-weight: 500; color: var(--muted); }
.num {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--pink); color: #fff; font-size: 1rem;
}

.colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.color {
  background: #faf6ff; border: 3px solid transparent; border-radius: 18px;
  padding: 10px 6px 12px; text-align: center; transition: transform .15s, border-color .15s;
}
.color:hover { transform: translateY(-3px); }
.color[aria-pressed="true"] { border-color: var(--pink); background: var(--pink-soft); }
.color svg { width: 70px; height: 80px; display: block; margin: 0 auto 4px; }
.color span { font-size: .9rem; font-weight: 500; }

.charms { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.charm {
  position: relative; background: #faf6ff; border: 3px solid transparent; border-radius: 18px;
  text-align: center; transition: transform .15s, border-color .15s;
}
.charm:hover { transform: translateY(-3px) rotate(-2deg); }
.charm.on { border-color: var(--purple); background: #efe7ff; }
/* The whole tile adds one charm; the count and minus sit on top */
.charm-add { display: block; width: 100%; padding: 12px 6px; border: 0; border-radius: 15px; background: none; }
.charm-add:disabled { cursor: not-allowed; }
.charm-add:disabled .emoji { opacity: .45; }
.charm-count:empty { display: none; }
.charm-count {
  position: absolute; top: 6px; right: 6px; min-width: 26px; height: 26px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, #b39cf0, var(--purple)); color: #fff; font-weight: 700; font-size: .85rem;
  box-shadow: 0 3px 0 #7d62c4;
}
.charm-minus.step-btn, .charm-minus {
  position: absolute; top: 6px; left: 6px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #ffffff, #efe6ff); color: var(--purple-dark);
  box-shadow: 0 3px 0 #d3c2f5, 0 4px 10px #6f52c41f; transition: transform .1s, box-shadow .1s, color .15s;
}
.charm-minus svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; }
.charm-minus:hover { color: var(--pink-dark); }
.charm-minus:active { transform: translateY(2px); box-shadow: 0 1px 0 #d3c2f5; }
.charm-minus:focus-visible, .charm-add:focus-visible { outline: 3px solid #ff7fbf88; outline-offset: 2px; }
.charm .emoji {
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 6px;
  font-size: 1.9rem; border-radius: 50%; background: #fff;
  box-shadow: inset 0 -4px 0 #0001, 0 3px 8px #6f52c422;
}
.charm .name { display: block; font-weight: 500; font-size: .92rem; }
.charm .price { display: block; color: var(--pink-dark); font-weight: 600; font-size: .9rem; }

/* ---------- Preview ---------- */
.preview { position: sticky; top: 84px; text-align: center; }
.preview-jar svg { width: 200px; height: 230px; display: block; margin: -4px auto 8px; }
.preview-jar.wobble svg { animation: wobble .5s; }
@keyframes wobble { 30% { transform: scale(1.06, .94); } 60% { transform: scale(.97, 1.03); } }
.preview h3 { font-size: 1.3rem; margin-bottom: 12px; }
.breakdown { list-style: none; padding: 0; margin: 0 0 12px; text-align: left; }
.breakdown li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--purple-soft); }
.breakdown li span:last-child { font-weight: 600; }
.qty-row, .total-row { display: flex; justify-content: space-between; align-items: center; margin: 12px 0; }
.total-row { font-size: 1.3rem; }
.total-row b { color: var(--pink-dark); }
.qty { display: flex; align-items: center; gap: 8px; background: #faf6ff; border-radius: 999px; padding: 6px 6px 9px; }
.qty output { min-width: 28px; font-weight: 600; font-size: 1.1rem; }

/* ---------- Cart drawer ---------- */
.overlay { position: fixed; inset: 0; background: #4a357755; z-index: 20; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 21;
  width: min(420px, 100%); background: var(--bg);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s ease;
  box-shadow: -10px 0 30px #4a357733;
}
.drawer.open { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 2px solid #fff; }
.icon-btn { border: 0; background: #fff; width: 44px; height: 44px; flex: none; border-radius: 50%; font-size: 1rem; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: grid; gap: 12px; align-content: start; }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }
.empty div { font-size: 3rem; }
.line { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; background: #fff; padding: 10px; border-radius: 16px; }
.line svg { width: 56px; height: 64px; }
.line h4 { margin: 0; font-size: 1rem; }
.line p { margin: 2px 0 0; font-size: .85rem; color: var(--muted); }
.line .right { text-align: right; }
.line .right b { display: block; color: var(--pink-dark); }
.line .remove { border: 0; background: none; color: var(--muted); font-size: .85rem; text-decoration: underline; padding: 8px 0 2px; }
.drawer-foot { padding: 20px 20px max(20px, env(safe-area-inset-bottom)); border-top: 2px solid #fff; background: #fff8; }
.sum { display: flex; justify-content: space-between; margin-bottom: 6px; }
.sum.total { font-size: 1.25rem; font-weight: 700; margin: 10px 0 16px; }
.secure { text-align: center; font-size: .85rem; color: var(--muted); margin: 12px 0 0; }

/* ---------- Toast / footer ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 30;
  transform: translate(-50%, calc(100% + 40px)); transition: transform .3s, visibility .3s; visibility: hidden;
  background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 999px; font-weight: 500;
}
.toast.show { transform: translate(-50%, 0); visibility: visible; }
.footer { text-align: center; padding: 40px 16px; border-top: 2px solid #fff; }
.footer > img { width: 80px; border-radius: 50%; }

/* ---------- Mobile buy bar (hidden on desktop) ---------- */
.mobile-bar { display: none; }

/* ---------- Responsive ---------- */
/* Big screens: use the extra room */
@media (min-width: 1600px) {
  .hero, .builder, .booking { max-width: 1360px; }
  .builder { grid-template-columns: 1fr 400px; }
  .preview-jar svg { width: 240px; height: 276px; }
  .events-banner { max-width: 1260px; }
}

/* Tablets and phones */
@media (max-width: 900px) {
  .builder { grid-template-columns: 1fr; }
  .preview { position: static; }
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 24px; }
  .hero p { margin-inline: auto; }
  .hero-logo { order: -1; }
  .hero-logo img { max-width: min(300px, 80vw); }
  .events-banner { margin-inline: 16px; }

  .mobile-bar {
    display: flex; align-items: center; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
    padding: 10px max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    background: #fffffff2; backdrop-filter: blur(10px);
    border-radius: 22px 22px 0 0; box-shadow: 0 -8px 30px #4a357726;
    transform: translateY(110%); transition: transform .25s ease;
  }
  .mobile-bar.show { transform: none; }
  .mb-jar svg { width: 44px; height: 52px; display: block; }
  .mb-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .mb-info > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; }
  .mb-info > span b { color: var(--pink-dark); font-size: 1.1rem; }
  .mb-info small { color: var(--muted); }
  .mb-info .mb-warn { color: var(--muted); font-size: .66rem; opacity: .85; }
  .mobile-bar .btn { padding: 12px 18px; font-size: 1rem; white-space: nowrap; box-shadow: 0 4px 0 #c94489; }
  .toast { bottom: calc(96px + env(safe-area-inset-bottom)); max-width: calc(100% - 32px); text-align: center; }
}

/* Phones: hamburger menu */
@media (max-width: 720px) {
  .menu-btn { display: grid; }
  .cart-word { display: none; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 16px 14px; background: var(--bg);
    border-bottom: 2px solid #fff; box-shadow: 0 16px 30px #4a357722;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .site-nav.open { opacity: 1; visibility: visible; transform: none; }
  .site-nav a { padding: 14px 8px; font-size: 1.1rem; border-bottom: 1px solid #fff; }
  .site-nav a:last-child { border-bottom: 0; }
}

@media (max-width: 560px) {
  .events-banner { flex-direction: column; text-align: center; padding: 20px 18px; }
  .events-banner .btn { margin-left: 0; }
  .card { padding: 16px; border-radius: 20px; }
  .card h2 { font-size: 1.2rem; }
  .builder, .booking { padding-inline: 12px; gap: 16px; }
  .builder-steps { gap: 16px; }

  .colors { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
  .color { padding: 8px 4px 10px; border-radius: 14px; }
  .color svg { width: 54px; height: 62px; }
  .color span { font-size: .8rem; line-height: 1.2; display: block; }

  .charms { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
  .charm { border-radius: 14px; }
  .charm-add { padding: 10px 4px; border-radius: 11px; }
  .charm .emoji { width: 44px; height: 44px; font-size: 1.5rem; }
  .charm .name { font-size: .8rem; line-height: 1.2; }
  .charm .price { font-size: .8rem; }
  .charm-count { top: 4px; right: 4px; min-width: 22px; height: 22px; font-size: .78rem; }
  .charm-minus { top: 4px; left: 4px; width: 28px; height: 28px; }

  .preview-jar svg { width: 160px; height: 184px; }
  .hero h1 { font-size: clamp(1.9rem, 9vw, 2.4rem); }
  .hero p { font-size: 1.05rem; }
  .drawer-head, .drawer-body { padding-inline: 16px; }
  .drawer-foot { padding-inline: 16px; }
  .contact li { padding: 10px 14px; }
}

@media (max-width: 400px) {
  .brand span { display: none; }
  .cal-grid { gap: 4px; }
  .cal-day { border-radius: 9px; font-size: .95rem; }
}

/* Short landscape phones */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-logo img { max-width: 200px; }
  .modal-emoji { display: none; }
}

/* Touch screens: no hover lift that sticks after tapping */
@media (hover: none) {
  .btn:hover, .color:hover, .charm:hover, .social a:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Events popup ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px;
  background: #4a357766; backdrop-filter: blur(4px); animation: fade .25s;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  position: relative; width: min(420px, 100%); text-align: center;
  background: linear-gradient(180deg, #fff, #faf3ff); border: 4px solid #fff; border-radius: 28px;
  max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 32px 24px 20px; box-shadow: 0 20px 60px #4a357755; animation: pop .35s cubic-bezier(.3, 1.5, .5, 1);
}
.modal h2 { font-family: var(--script); font-weight: 400; color: var(--pink-dark); font-size: 2rem; margin: 6px 0 8px; }
.modal p { color: var(--muted); margin: 0 0 20px; }
.modal-emoji { font-size: 2.6rem; letter-spacing: 6px; }
.modal-close { position: absolute; top: 12px; right: 12px; }
.link-btn { border: 0; background: none; color: var(--muted); text-decoration: underline; margin-top: 12px; padding: 6px; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.8); opacity: 0; } }

/* ---------- Events page ---------- */
.events-hero { text-align: center; max-width: 720px; margin: 0 auto; padding: 40px 16px 24px; }
.events-hero h1 { font-size: clamp(2rem, 5vw, 3rem); }
.events-hero h1 span { font-family: var(--script); font-weight: 400; color: var(--pink-dark); }
.events-hero p { color: var(--muted); font-size: 1.1rem; }
.perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.perks span { background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 500; box-shadow: var(--shadow); }
.booking { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; max-width: 1150px; margin: 0 auto 60px; padding: 0 clamp(16px, 4vw, 48px); }
.booking > * { min-width: 0; }

.cal-head { display: flex; align-items: center; justify-content: space-between; margin: 12px 0; }
.cal-head h3 { font-size: 1.15rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.cal-dow { font-size: .8rem; font-weight: 600; color: var(--muted); padding-bottom: 4px; }
.cal-day {
  aspect-ratio: 1; border: 2px solid transparent; border-radius: 12px; background: none;
  font-weight: 500; color: #c7bbe0; cursor: default; padding: 0;
}
.cal-day.available { background: #efe7ff; color: var(--purple-dark); cursor: pointer; }
.cal-day.available:hover { border-color: var(--purple); }
.cal-day.selected { background: var(--pink); color: #fff; border-color: var(--pink-dark); }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); margin-top: 14px; }
.cal-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; vertical-align: -1px; margin-right: 4px; }
.picked { margin-top: 16px; padding: 12px; border-radius: 14px; background: var(--pink-soft); font-weight: 500; text-align: center; }
.cal-note { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: #faf6ff; border: 2px solid var(--purple-soft); font-size: .92rem; text-align: center; }
.cal-note a { color: var(--pink-dark); font-weight: 600; }
.nav-arrow.at-limit { opacity: .45; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 500; font-size: .92rem; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px; min-height: 48px; color: var(--ink); background: #faf6ff;
  border: 2px solid var(--purple-soft); border-radius: 14px; padding: 11px 14px;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--purple); background: #fff; }
.form-section { grid-column: 1 / -1; margin: 10px 0 -4px; font-size: 1rem; color: var(--purple-dark); }
.form-error { color: #d0306a; font-weight: 500; min-height: 1.2em; margin: 12px 0; }
.done { text-align: center; padding: 30px 10px; }
.done div { font-size: 3rem; }
.done h2 { justify-content: center; font-family: var(--script); font-weight: 400; color: var(--pink-dark); font-size: 2rem; }

@media (max-width: 900px) {
  .booking { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- About page ---------- */
.about { max-width: 1000px; margin: 0 auto 60px; padding: 0 clamp(16px, 4vw, 48px); display: grid; gap: 24px; }
.about-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.about-row.flip > :first-child { order: 2; }
.about-row p { color: var(--muted); line-height: 1.6; }
.photo-slot {
  aspect-ratio: 4 / 3; border-radius: var(--radius); border: 3px dashed var(--purple-soft);
  background: #faf6ff; display: grid; place-items: center; color: var(--muted); text-align: center; padding: 16px;
}
.photo-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius) - 4px); }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.values div { background: #faf6ff; border-radius: 18px; padding: 18px; text-align: center; }
.values b { display: block; font-size: 2rem; }
.values p { margin: 6px 0 0; color: var(--muted); }
@media (max-width: 700px) {
  .about-row, .values { grid-template-columns: 1fr; }
  .about-row.flip > :first-child { order: 0; }
}

/* ---------- Footer contact ---------- */
.contact {
  list-style: none; padding: 0; margin: 14px 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.contact li { background: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 500; box-shadow: var(--shadow); }
.contact a { color: var(--purple-dark); text-decoration: none; }
.contact a:hover { color: var(--pink-dark); }

/* ---------- Social links ---------- */
.social { display: flex; justify-content: center; gap: 12px; margin: 6px 0 16px; }
.social a {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: var(--purple-dark); box-shadow: var(--shadow);
  transition: transform .15s, background .15s, color .15s;
}
.social svg { width: 22px; height: 22px; fill: currentColor; }
.social a:hover { transform: translateY(-3px) scale(1.06); color: #fff; }
.social-tiktok:hover { background: #000; }
.social-instagram:hover { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.social-facebook:hover { background: #1877f2; }
.social-youtube:hover { background: #ff0000; }

/* ---------- Made by credit ---------- */
.made-by {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  padding: 7px 14px; border-radius: 999px; background: #ffffff99; border: 1px solid #fff;
  color: var(--muted); font-size: .82rem; text-decoration: none; transition: background .15s;
}
.made-by img { border-radius: 6px; }
.made-by b { color: #0B2F28; font-weight: 600; }
.made-by i { color: #2fae84; font-style: normal; }
.made-by:hover { background: #fff; }

/* ---------- Warnings, consent, legal ---------- */
.warning {
  margin-top: 16px; padding: 12px 14px; border-radius: 14px;
  background: #fff8db; border: 2px solid #f5d65b; color: #5c4a00; font-size: .92rem; text-align: left;
}
.warning.small { font-size: .8rem; margin: 14px 0 0; padding: 10px 12px; }
/* Under "Add to cart": still there, just quieter */
.preview .warning.small, .summary .warning.small { background: #faf6ff; border: 1px solid #ece3fb; color: var(--muted); font-size: .74rem; }
.preview .warning.small b, .summary .warning.small b { color: #8a7a4a; font-weight: 600; }
.deal-hint { margin: -4px 0 14px; font-size: .88rem; color: var(--purple-dark); font-weight: 500; }
.sum.deal { color: #1f8a5f; font-weight: 600; }
.deal-nudge { margin: -8px 0 10px; font-size: .85rem; color: var(--purple-dark); font-weight: 500; }
.warning a { color: inherit; }
.mini-select {
  font: inherit; font-size: 16px; min-height: 40px; color: var(--ink); background: #fff; border: 2px solid var(--purple-soft);
  border-radius: 10px; padding: 4px 8px;
}
.drawer-foot .sum { align-items: center; }
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; margin: 6px 0 14px; text-align: left; cursor: pointer; }
.agree input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--pink-dark); flex: none; }
.agree a { color: var(--purple-dark); }
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 10px 0; font-size: .9rem; }
.legal-links a { color: var(--purple-dark); padding: 6px 2px; }

.legal-page { max-width: 820px; margin: 0 auto 60px; padding: 0 16px; }
.legal-page .card { line-height: 1.65; }
.legal-page h2 { margin: 28px 0 8px; font-size: 1.3rem; scroll-margin-top: 90px; }
.legal-page h2:first-of-type { margin-top: 0; }
.legal-page h3 { margin: 18px 0 6px; font-size: 1.05rem; }
.legal-page p, .legal-page li { color: #5b4a86; }
.legal-page .updated { color: var(--muted); font-size: .9rem; text-align: center; margin-top: -8px; }
.legal-page .fill { background: #fff3a8; border-radius: 4px; padding: 0 4px; }
.legal-page .toc { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
.legal-page .toc a { background: #fff; border-radius: 999px; padding: 6px 14px; color: var(--purple-dark); text-decoration: none; box-shadow: var(--shadow); font-size: .9rem; }


/* ---------- Puffy controls (buttons, arrows, selects, checkboxes) ---------- */
.step-btn, .icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #efe6ff);
  color: var(--purple-dark);
  box-shadow: 0 4px 0 #d3c2f5, 0 6px 14px #6f52c41f;
  transition: transform .1s, box-shadow .1s, color .15s;
}
.step-btn { width: 40px; height: 40px; }
.step-btn svg, .icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.step-btn:hover, .icon-btn:hover { color: var(--pink-dark); }
.step-btn:active, .icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #d3c2f5, 0 2px 6px #6f52c41f; }
.icon-btn:disabled, .step-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.nav-arrow { background: linear-gradient(180deg, var(--pink), var(--pink-dark)); color: #fff; box-shadow: 0 4px 0 #c94489, 0 6px 14px #ec5aa533; }
.nav-arrow:hover { color: #fff; }
.nav-arrow:active { box-shadow: 0 1px 0 #c94489; }

/* Fields get the same soft 3D edge */
.field input, .field select, .field textarea, .mini-select { box-shadow: 0 4px 0 #e6dbfa; }
.field input:focus, .field select:focus, .field textarea:focus, .mini-select:focus { box-shadow: 0 4px 0 var(--purple-soft), 0 0 0 4px #ff7fbf33; outline: none; }

/* Custom select arrow: pink puffy button */
.field select, .mini-select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: 50px;
  background-color: #faf6ff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 34'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff7fbf'/%3E%3Cstop offset='1' stop-color='%23ec5aa5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='16' cy='18' r='14' fill='%23c94489'/%3E%3Ccircle cx='16' cy='15' r='14' fill='url(%23g)'/%3E%3Cpath d='M10.5 13l5.5 5.5 5.5-5.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 30px 32px;
}
.mini-select { padding-right: 44px; background-size: 26px 28px; background-position: right 6px center; }

/* Number stepper */
.stepper { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; }
.stepper input { flex: 1; min-width: 0; text-align: center; font-weight: 600; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Custom checkbox */
.agree input {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  width: 24px; height: 24px; border-radius: 8px; margin: 0;
  background: #fff; border: 2px solid var(--purple-soft);
  box-shadow: 0 3px 0 #d3c2f5; transition: background .15s, border-color .15s;
}
.agree input:checked {
  border-color: var(--pink-dark);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat, linear-gradient(180deg, var(--pink), var(--pink-dark));
  box-shadow: 0 3px 0 #c94489;
}
.agree input:focus-visible, .step-btn:focus-visible, .icon-btn:focus-visible, .btn:focus-visible,
.color:focus-visible, .charm:focus-visible, .cal-day:focus-visible { outline: 3px solid #ff7fbf88; outline-offset: 2px; }

/* Shipping destination toggle (cart) */
.ship-to { margin: 10px 0 12px; }
.ship-label { display: block; font-weight: 500; margin-bottom: 8px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: block; text-align: center; padding: 10px 8px; border-radius: 999px; font-weight: 600; font-size: .95rem;
  background: linear-gradient(180deg, #fff, #efe6ff); color: var(--purple-dark);
  box-shadow: 0 4px 0 #d3c2f5, 0 6px 14px #6f52c41f;
  transition: transform .1s, box-shadow .1s, background .15s, color .15s;
}
.seg label:active span { transform: translateY(3px); box-shadow: 0 1px 0 #d3c2f5; }
.seg input:checked + span {
  background: linear-gradient(180deg, var(--pink), var(--pink-dark)); color: #fff;
  box-shadow: 0 4px 0 #c94489, 0 6px 14px #ec5aa533;
}
.seg input:focus-visible + span { outline: 3px solid #ff7fbf88; outline-offset: 2px; }
.btn.is-disabled { opacity: .5; pointer-events: none; }
.btn-block { text-align: center; }
.sum.muted-row { color: var(--muted); }

/* ---------- Checkout ---------- */
.checkout-hero { padding-bottom: 16px; }
.checkout {
  display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start;
  max-width: 1100px; margin: 0 auto 60px; padding: 0 clamp(16px, 4vw, 48px);
}
.checkout > * { min-width: 0; }
.checkout-form { display: grid; gap: 14px; }
.checkout-form h2 { margin-top: 10px; }
.checkout-form .form-grid { margin-top: 0; }
.test-banner {
  display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px;
  background: #e9fbf3; border: 2px solid #8ee8c4; color: #1f5c46; font-size: .92rem;
}
.test-banner code { background: #fff; border-radius: 6px; padding: 1px 6px; font-size: .88rem; }
.ship-note { margin: -4px 0 0; color: var(--muted); font-size: .9rem; }
.wallets { display: grid; gap: 10px; }
.wallets > div { min-height: 48px; }
.apple-pay { -webkit-appearance: -apple-pay-button; -apple-pay-button-type: buy; -apple-pay-button-style: black; height: 48px; border-radius: 12px; cursor: pointer; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .9rem; }
.or::before, .or::after { content: ''; flex: 1; height: 2px; background: var(--purple-soft); border-radius: 2px; }
.card-box { min-height: 90px; }
.summary { position: sticky; top: 84px; display: grid; gap: 4px; }
.summary h2 { margin-bottom: 8px; }
.summary-items { display: grid; gap: 10px; margin-bottom: 12px; }
.summary .line { background: #faf6ff; }
.back-link { color: var(--purple-dark); font-weight: 500; text-align: center; padding: 10px; }
.checkout-empty { max-width: 460px; margin: 20px auto 60px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.checkout-empty > div { font-size: 3rem; }
.receipt { display: grid; gap: 6px; margin: 16px 0 20px; padding: 14px; border-radius: 14px; background: #faf6ff; text-align: left; }
.receipt div { display: flex; justify-content: space-between; gap: 12px; }
.receipt a { color: var(--purple-dark); font-weight: 600; }
@media (max-width: 900px) {
  .checkout { grid-template-columns: 1fr; }
  .summary { position: static; order: -1; }
}
@media (max-width: 560px) {
  .checkout { padding-inline: 12px; gap: 16px; }
}
.checkout-empty[hidden], .checkout[hidden] { display: none; }

/* ---------- Sprinkle styles ---------- */
.sprinkles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.sprinkle {
  position: relative; background: #faf6ff; border: 3px solid transparent; border-radius: 18px;
  padding: 12px 6px; text-align: center; transition: transform .15s, border-color .15s;
}
.sprinkle:hover { transform: translateY(-3px); }
.sprinkle[aria-pressed="true"] { border-color: var(--pink); background: var(--pink-soft); }
.sprinkle .swatch { display: block; width: 54px; height: 54px; margin: 0 auto 6px; border-radius: 50%; box-shadow: inset 0 -4px 0 #0001, 0 3px 8px #6f52c422; }
.sprinkle .swatch svg { width: 100%; height: 100%; display: block; }
.sprinkle .name { display: block; font-weight: 500; font-size: .92rem; }
.sprinkle:focus-visible { outline: 3px solid #ff7fbf88; outline-offset: 2px; }

/* Included / extra price tags */
.card h2 small.incl { color: #1f8a5f; background: #e3f8ee; border-radius: 999px; padding: 3px 10px; font-weight: 600; }
.charm .price.incl, .breakdown .incl { color: #1f8a5f; }

/* Seasonal / limited-time options: warm autumn tint + a little ribbon */
.sprinkle.seasonal, .charm.seasonal { background: linear-gradient(180deg, #fff4e6, #ffe9d2); }
.sprinkle.seasonal[aria-pressed="true"] { border-color: #ff9a3c; background: #ffe2c4; }
.charm.seasonal.on { border-color: #ff9a3c; background: #ffe2c4; }
.seasonal-tag {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%); z-index: 1;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: linear-gradient(180deg, #ffb35c, #ff8a1f); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; box-shadow: 0 2px 0 #d96d0b;
}
.sprinkles, .charms { padding-top: 6px; }

@media (max-width: 560px) {
  .sprinkles { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
  .sprinkle { padding: 10px 4px; border-radius: 14px; }
  .sprinkle .swatch { width: 44px; height: 44px; }
  .sprinkle .name { font-size: .8rem; line-height: 1.2; }
  .seasonal-tag { font-size: .62rem; padding: 2px 7px; }
}
@media (hover: none) { .sprinkle:hover { transform: none; } }
.made-by em { font-style: normal; color: var(--muted); padding-left: 8px; border-left: 1px solid var(--purple-soft); }
.made-by { flex-wrap: wrap; justify-content: center; row-gap: 4px; max-width: 100%; }
.made-by span, .made-by b, .made-by em { white-space: nowrap; }
@media (max-width: 480px) {
  .made-by em { flex-basis: 100%; text-align: center; border-left: 0; padding-left: 0; }
}
.delivery-hint { margin: -6px 0 14px; font-size: .85rem; color: var(--muted); }

/* Delivery method cards (checkout) */
.delivery-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dopt { cursor: pointer; min-width: 0; }
.dopt input { position: absolute; opacity: 0; pointer-events: none; }
.dopt-box {
  display: grid; gap: 2px; height: 100%; padding: 12px; border-radius: 16px; text-align: left;
  background: linear-gradient(180deg, #fff, #f6f0ff); border: 3px solid transparent;
  box-shadow: 0 4px 0 #d3c2f5, 0 6px 14px #6f52c41f; transition: transform .1s, box-shadow .1s, border-color .15s;
}
.dopt-box b { font-size: 1rem; }
.dopt-box small { color: var(--muted); font-size: .82rem; line-height: 1.3; }
.dopt-box em { font-style: normal; font-weight: 700; color: var(--pink-dark); margin-top: 4px; }
.dopt:active .dopt-box { transform: translateY(3px); box-shadow: 0 1px 0 #d3c2f5; }
.dopt input:checked + .dopt-box { border-color: var(--pink); background: linear-gradient(180deg, #fff, var(--pink-soft)); box-shadow: 0 4px 0 #f0a3c9, 0 6px 14px #ec5aa522; }
.dopt input:focus-visible + .dopt-box { outline: 3px solid #ff7fbf88; outline-offset: 2px; }
.zones { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #faf6ff; font-size: .9rem; }
.zones div { display: flex; justify-content: space-between; gap: 12px; }
.zones div.hit { color: var(--pink-dark); font-weight: 700; }
.zones b { font-variant-numeric: tabular-nums; }
.ship-note.bad { color: #d0306a; font-weight: 500; }
@media (max-width: 560px) {
  .delivery-options { grid-template-columns: 1fr; }
  .dopt-box { grid-template-columns: 1fr auto; align-items: center; }
  .dopt-box b { grid-column: 1; }
  .dopt-box small { grid-column: 1; }
  .dopt-box em { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}

/* Scents */
.color .scent { display: block; font-size: .78rem; color: var(--muted); line-height: 1.2; margin-top: 2px; }
.preview-scent { margin: -8px 0 12px; color: var(--muted); }
.ci { display: inline-block; }

/* Five base colors sit in one row */
.colors { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.color { padding-inline: 4px; }
.color svg { width: min(70px, 100%); height: auto; aspect-ratio: 70 / 80; }
@media (max-width: 560px) {
  .colors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Party packages (events page) ---------- */
.packages { max-width: 1000px; margin: 0 auto 32px; padding: 0 clamp(16px, 4vw, 48px); display: grid; gap: 18px; }
.package-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.package { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; border-color: var(--purple-soft); }
.package h3 { color: var(--purple-dark); font-size: 1.35rem; letter-spacing: .04em; text-transform: uppercase; }
.pkg-intro { margin: 0; font-weight: 600; }
.package ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.package li { position: relative; padding-left: 22px; color: var(--ink); }
.package li::before { content: '✓'; position: absolute; left: 0; color: var(--pink-dark); font-weight: 700; }
.pkg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.pkg-price {
  font-size: 2rem; font-weight: 700; color: var(--purple-dark); background: var(--pink-soft);
  padding: 2px 14px; border-radius: 12px; font-variant-numeric: tabular-nums;
}
.pkg-choose { padding: 11px 18px; font-size: .95rem; }
.addons { background: var(--card); border: 3px solid var(--purple-soft); border-radius: 22px; padding: 18px 22px; box-shadow: var(--shadow); }
.addons h3 { color: var(--pink-dark); text-transform: uppercase; letter-spacing: .06em; font-size: 1.05rem; margin-bottom: 8px; }
.addons ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.addons b { color: var(--purple-dark); }
.tagline { text-align: center; font-family: var(--script); color: var(--pink-dark); font-size: 1.6rem; margin: 4px 0 0; }

/* Package picker in the booking form */
.label { display: block; font-weight: 500; font-size: .92rem; margin-bottom: 6px; }
.pkg-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pkg-pick label { cursor: pointer; }
.pkg-pick input { position: absolute; opacity: 0; pointer-events: none; }
.pkg-pick span {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f6f0ff); border: 3px solid transparent;
  box-shadow: 0 4px 0 #d3c2f5; transition: transform .1s, box-shadow .1s;
}
.pkg-pick em { font-style: normal; font-weight: 700; color: var(--pink-dark); }
.pkg-pick label:active span { transform: translateY(3px); box-shadow: 0 1px 0 #d3c2f5; }
.pkg-pick input:checked + span { border-color: var(--pink); background: linear-gradient(180deg, #fff, var(--pink-soft)); box-shadow: 0 4px 0 #f0a3c9; }
.pkg-pick input:focus-visible + span { outline: 3px solid #ff7fbf88; outline-offset: 2px; }
.estimate { display: grid; gap: 6px; margin-top: 16px; padding: 14px; border-radius: 16px; background: #faf6ff; border: 2px dashed var(--purple-soft); }
.estimate div { display: flex; justify-content: space-between; gap: 12px; }
.estimate b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.estimate .est-total { border-top: 1px dashed var(--purple-soft); padding-top: 8px; font-size: 1.15rem; }
.estimate .est-total b { color: var(--pink-dark); }

@media (max-width: 700px) {
  .package-grid, .pkg-pick { grid-template-columns: 1fr; }
}
.package ul { align-content: start; }

/* Hidden radios behind the pill/card pickers stay inside their label */
.pkg-pick label, .dopt, .seg label { position: relative; }
.pkg-pick input, .dopt input, .seg input { width: 1px; height: 1px; margin: 0; left: 0; top: 0; }
/* About photos: show the photo when the file exists, otherwise the placeholder text */
.photo-slot { position: relative; overflow: hidden; }
.photo-slot img { position: absolute; inset: 0; }
.photo-slot img + span { visibility: hidden; }
.photo-slot:has(img) { aspect-ratio: 4 / 5; border: 3px solid #fff; box-shadow: var(--shadow); padding: 0; }
.photo-slot img { object-position: center 15%; }

/* Anti-spam honeypot field (events form): off-screen, not display:none so bots still see it */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }