/* =====================================================
   style.css — SHARED GLOBAL STYLES
   Used by: index.html, shop/shop.html, story/story.html, archive/archive.html
   ===================================================== */

:root{
  --pond-ink:#2C2016;
  
  /* ── Macaron & Candy Pastel Palette (Client Swatch Board) ── */
  --lemon:#FAFFC7;             /* Base Macaron Yellow */
  --lemon-cream:#FCFEEB;       /* Light Luminous Canvas */
  --macaron-green:#C8DE9D;     /* Deco Green */
  --macaron-green-light:#E0EEA3;/* Tidal Green */
  --azalea:#F7C9D4;            /* Dark Pastel Pink (Azalea) */
  --bloom:#FFD1D5;             /* Bloom Pink */
  --pale-pink:#FFE1E6;         /* Pale Pink Card Background */
  --lavender-blush:#FFF1F4;    /* Lavender Blush Neutral */
  
  /* Semantic Aliases */
  --moss:#7E9C52;
  --moss-deep:#587332;
  --moss-soft:#EAF5D5;
  --blush:#F7C9D4;
  --blush-deep:#E86B8B;
  --berry-rose:#E86B8B;
  --berry-deep:#9E2D4A;
  --parchment:#FCFEEB;         /* Swapped to macaron lemon-cream base */
  --parchment-dark:#F2F7D0;
  --gold:#ECC440;
  --gold-deep:#B58B16;
  --cork:#FFE4DC;
  --sepia:#F6EBDD;
  --paper-line:rgba(44,32,22,0.06);

  /* ── Universal Stock Badge Tokens ── */
  --stock-green:  #10b981;   /* In Stock       */
  --stock-amber:  #d97706;   /* Low Stock      */
  --stock-red:    #dc2626;   /* Out of Stock   */
  --stock-custom: #E86B8B;   /* Made to Order  → Lilypad berry rose */
}

*{box-sizing:border-box;}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
  background: var(--pond-ink); /* Seamless match for iOS rubber-band bounce below footer */
}
body {
  margin: 0;
  background: var(--parchment);
  color: var(--pond-ink);
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
}
h1,h2,h3{
  font-family:'Baloo 2',cursive;
  font-weight:700;
  margin:0;
  line-height:1.1;
  letter-spacing:-0.01em;
}
.hand{
  font-family:'Caveat',cursive;
  font-weight:700;
  color:var(--moss-deep);
  letter-spacing:-0.01em;
}
.whimsical{
  font-family:'Baloo 2', cursive;
  font-weight:600;
  letter-spacing:-0.01em;
}
.eyebrow-tape{
  font-family:'Baloo 2', cursive !important;
  font-weight:700 !important;
}
.froggo-speech-bubble{
  font-family:'Baloo 2', cursive !important;
  font-weight:600 !important;
}

.hand-squiggle-wrap {
  position: relative;
  display: inline-block;
}
.hand-squiggle-wrap svg.squiggle-underline {
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 12px;
  pointer-events: none;
  overflow: visible;
  stroke: var(--blush-deep);
  stroke-width: 3.5;
  fill: none;
  stroke-linecap: round;
}

.washi-tape-strip {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 90px;
  height: 22px;
  background: var(--blush);
  border: 1.5px dashed rgba(35,29,18,0.25);
  box-shadow: 0 2px 5px rgba(35,29,18,0.1);
  z-index: 4;
  pointer-events: none;
}

/* ---------- VECTOR SPARKLES & ARTISAN ILLUSTRATION ACCENTS ---------- */
.vector-sparkle {
  position: absolute;
  color: var(--gold);
  pointer-events: none;
  z-index: 5;
  animation: sparkleFloat 3s ease-in-out infinite alternate;
}
.vector-sparkle-sm {
  width: 16px;
  height: 16px;
}
.vector-sparkle-lg {
  width: 26px;
  height: 26px;
}

@keyframes sparkleFloat {
  0% { transform: scale(0.9) rotate(0deg); opacity: 0.75; }
  50% { transform: scale(1.15) rotate(12deg); opacity: 1; }
  100% { transform: scale(0.95) rotate(-6deg); opacity: 0.8; }
}

/* ---------- ARTISAN STUDIO SEAL EMBLEM ---------- */
.artisan-studio-seal {
  position: absolute;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 2px dashed var(--blush-deep);
  background: #FAF6ED;
  box-shadow: 3px 3px 0 var(--pond-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Baloo 2', cursive;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--pond-ink);
  line-height: 1.15;
  transform: rotate(-12deg);
  z-index: 6;
  pointer-events: none;
  padding: 6px;
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ---------- SECTION HEADING ---------- */
.sec-h{position:relative;display:inline-block;}

/* ---------- SITE-WIDE CARD ROTATION STAGGER ---------- */
/* extend the pin-drop rotation to pinboard/product cards so grid symmetry is broken everywhere */
.rot0{transform:rotate(0deg);}
.rot2{transform:rotate(1.4deg);}
.rot3{transform:rotate(-0.9deg);}
.rot4{transform:rotate(0.6deg);}
/* stagger nth-child tilts on any pinboard or shop card grid */
.pinboard > *:nth-child(3n+1){transform:rotate(-1.1deg);}
.pinboard > *:nth-child(3n+2){transform:rotate(0.8deg);}
.pinboard > *:nth-child(3n){transform:rotate(-0.4deg);}
.pinboard > *:hover{transform:rotate(0deg) scale(1.02);transition:transform .2s ease;}


/* ── Universal Stock Badge ───────────────────────────────── */
.stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 5px 0 8px;
  transition: color 0.2s ease;
}
.stock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
/* In Stock */
.stock-badge.is-in-stock { color: var(--stock-green); }
.stock-badge.is-in-stock .stock-dot {
  background: var(--stock-green);
  box-shadow: 0 0 6px rgba(16,185,129,0.45);
}
/* Low Stock */
.stock-badge.is-low-stock { color: var(--stock-amber); }
.stock-badge.is-low-stock .stock-dot {
  background: var(--stock-amber);
  box-shadow: 0 0 6px rgba(217,119,6,0.45);
}
/* Out of Stock */
.stock-badge.is-out-of-stock { color: var(--stock-red); }
.stock-badge.is-out-of-stock .stock-dot { background: var(--stock-red); }
/* Made to Order / Custom */
.stock-badge.is-custom { color: var(--stock-custom); }
.stock-badge.is-custom .stock-dot { background: var(--stock-custom); }
/* Disabled cart button */
.cart-btn:disabled,
.add-to-cart-direct-btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}



/* ---------- CART BUTTON & BADGE ---------- */
.cart-nav-btn {
  background: var(--blush);
  color: var(--pond-ink);
  border: 2px solid var(--pond-ink);
  padding: 8px 16px;
  font-weight: 700;
  font-size: .88rem;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 2.5px 2.5px 0 var(--pond-ink);
  transition: all .15s ease;
  cursor: pointer;
}
.cart-nav-btn:hover {
  background: #e18299;
  color: #fff;
  transform: translate(-1px, -1px);
}
.cart-badge {
  background: var(--pond-ink);
  color: #FDFAF2;
  font-size: .75rem;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 12px;
}

/* ---------- CART BACKDROP & DRAWER ---------- */
.cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(44, 36, 22, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.cart-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 92vw);
  background: #FDFAF2;
  border-left: 3px solid var(--pond-ink);
  z-index: 999999;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 30px rgba(44,36,22,0.3);
}
.cart-drawer.open {
  transform: translateX(0);
}

.cart-header {
  padding: max(20px, env(safe-area-inset-top, 20px)) 24px 18px;
  border-bottom: 2px solid var(--pond-ink);
  background: #F4ECE1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-title-wrap h3 {
  font-family: 'Baloo 2', cursive;
  font-size: 1.35rem;
  color: var(--pond-ink);
}
.cart-title-wrap span {
  font-family: 'Caveat', cursive;
  font-size: 1.15rem;
  color: var(--blush-deep);
  font-weight: 700;
}
.cart-close-btn {
  background: var(--pond-ink);
  color: #FDFAF2;
  border: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s;
}
.cart-close-btn:hover { background: #e18299; }

.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
.cart-empty-msg {
  text-align: center;
  padding: 60px 20px;
  color: var(--moss-deep);
}
.cart-empty-msg p {
  font-family: 'Caveat', cursive;
  font-size: 1.5rem;
  margin-top: 10px;
}

.cart-item {
  position: relative;
  background: #fff;
  border: 2px solid var(--pond-ink);
  padding: 14px;
  margin-bottom: 16px;
  box-shadow: 4px 4px 0 rgba(44,36,22,0.12);
  display: flex;
  gap: 14px;
  align-items: center;
}
.cart-item-thumb {
  width: 64px; height: 74px;
  background: var(--parchment-dark);
  border: 1px solid rgba(44,36,22,0.2);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.cart-item-thumb img,
.cart-item-thumb picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-item-thumb svg { width: 80%; height: 80%; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name {
  font-family: 'Baloo 2', cursive;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--pond-ink);
  margin-bottom: 4px;
}
.cart-item-meta {
  font-size: .8rem;
  color: #555;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cart-item-meta .badge-meta {
  display: inline-block;
  background: #F4ECE1;
  border: 1px solid rgba(44,36,22,0.2);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
  font-size: .74rem;
  color: var(--pond-ink);
  width: fit-content;
}
.cart-item-price {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--moss-deep);
  margin-top: 4px;
}

.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.qty-btn {
  width: 26px; height: 26px;
  background: #FDFAF2;
  border: 1.5px solid var(--pond-ink);
  font-weight: 800;
  font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.qty-btn:hover { background: var(--blush); }
.qty-val { font-weight: 800; font-size: .88rem; min-width: 18px; text-align: center; }
.remove-item-btn {
  background: none; border: none;
  color: #c54a4a; font-size: 1rem;
  cursor: pointer; padding: 4px; margin-left: auto;
}
.remove-item-btn:hover { color: #8a1f1f; }

.cart-footer {
  padding: 20px 24px max(20px, env(safe-area-inset-bottom, 20px));
  background: #F4ECE1;
  border-top: 2px solid var(--pond-ink);
}
.cart-subtotal-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.cart-subtotal-label { font-family: 'Baloo 2', cursive; font-size: 1.1rem; }
.cart-subtotal-val { font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.6rem; color: var(--moss-deep); }
.cart-note {
  font-size: .78rem; color: #665c4c; margin-bottom: 16px; line-height: 1.4;
}
.cart-checkout-btn {
  width: 100%;
  background: var(--berry-rose);
  color: #FFFDF8;
  border: 2px solid var(--pond-ink);
  border-radius: 12px;
  padding: 14px;
  font-family: 'Baloo 2', cursive;
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 3px 3.5px 0 var(--berry-deep), 0 4px 10px rgba(122,40,61,0.18);
  transition: all .15s ease;
  display: block; text-align: center;
}
.cart-checkout-btn:hover {
  background: var(--berry-deep);
  color: #FFFDF8;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4.5px 0 var(--pond-ink), 0 6px 14px rgba(122,40,61,0.22);
}

/* ---------- ITEM OPTION PICKER MODAL ---------- */
.option-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(44, 36, 22, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  padding: 20px;
}
.option-modal-backdrop.open {
  opacity: 1; pointer-events: auto;
}
.option-modal-card {
  background: #FDFAF2;
  border: 2.5px solid var(--pond-ink);
  box-shadow: 8px 8px 0 var(--pond-ink);
  max-width: 480px; width: 100%;
  padding: 28px 24px;
  position: relative;
  max-height: 90vh; overflow-y: auto;
}
.option-modal-close {
  position: absolute; top: 16px; right: 16px;
  background: var(--pond-ink); color: #FDFAF2;
  border: none; width: 30px; height: 30px; border-radius: 50%;
  font-weight: 700; cursor: pointer;
}
.option-modal-title { font-size: 1.35rem; margin-bottom: 4px; }
.option-modal-price { font-family: 'Caveat', cursive; font-size: 1.3rem; color: var(--moss-deep); margin-bottom: 20px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 700; font-size: .84rem; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em; }
.form-group select, .form-group input {
  width: 100%; padding: 11px 12px;
  border: 2px solid var(--pond-ink);
  background: #fff; color: var(--pond-ink);
  font-family: 'Karla', sans-serif; font-size: .95rem; font-weight: 600;
}
.modal-confirm-btn {
  width: 100%; background: var(--moss-deep); color: #FDFAF2;
  border: 2px solid var(--pond-ink); padding: 14px;
  font-weight: 800; font-size: .95rem; cursor: pointer;
  box-shadow: 3px 3px 0 var(--pond-ink); margin-top: 10px;
}
.modal-confirm-btn:hover { background: var(--pond-ink); }

/* ---------- TOAST NOTIFICATION ---------- */
.add-cart-card-btn {
  margin-top: 12px;
  width: 100%;
  background: var(--moss-deep);
  color: var(--parchment);
  border: 1.5px solid var(--pond-ink);
  padding: 8px 12px;
  font-weight: 700;
  font-size: .84rem;
  cursor: pointer;
  transition: all .15s ease;
}
.add-cart-card-btn:hover {
  background: var(--pond-ink);
}

.toast-msg {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px);
  background: var(--pond-ink); color: #FDFAF2;
  padding: 12px 24px; border-radius: 30px;
  font-weight: 700; font-size: .9rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  z-index: 99999; transition: transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.toast-msg.show { transform: translateX(-50%) translateY(0); }

/* ---------- FROGGO MASCOT ASSETS ---------- */
.froggo-float {
  /* Static grounded mascot without floating animation */
  animation: none !important;
}

.corkboard-froggo {
  position: absolute;
  right: -24px;
  bottom: -35px;
  width: 140px;
  height: auto;
  z-index: 6;
  filter: drop-shadow(4px 8px 16px rgba(44, 36, 22, 0.3));
  pointer-events: none;
}

.story-froggo-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.story-froggo-img {
  width: 160px;
  height: auto;
  filter: drop-shadow(4px 8px 16px rgba(44, 36, 22, 0.22));
}
.froggo-speech-bubble {
  font-family: 'Caveat', cursive;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pond-ink);
  background: #FDFAF2;
  border: 1.5px solid var(--pond-ink);
  padding: 4px 14px;
  border-radius: 16px;
  box-shadow: 2px 2px 0 var(--blush-deep);
  margin-top: -10px;
  z-index: 2;
}

.supplies-froggo-badge {
  width: 120px;
  height: auto;
  filter: drop-shadow(3px 6px 12px rgba(44, 36, 22, 0.2));
  margin-left: auto;
}

@media (max-width: 720px) {
  .corkboard-froggo { width: 100px; right: -10px; bottom: -25px; }
  .story-froggo-img { width: 120px; }
}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}

/* ---------- CUTESY SCALLOPED RIBBON STRIP (INSPIRATION MATCH) ---------- */
.flagstrip{
  height:16px;
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16' width='28' height='16'%3E%3Cpath d='M 0 0 H 28 V 4 A 7 7 0 0 1 14 4 A 7 7 0 0 1 0 4 Z' fill='%23F7A8B8'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:28px 16px;
  background-position:center top;
  border:none;
  margin:0;
}

/* ---------- nav ---------- */
.nav{
  position:-webkit-sticky;
  position:sticky;
  top:0;
  z-index:9999;
  background:rgba(252,254,235,0.96);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:2px solid var(--pond-ink);
}
.navrow{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;max-width:1180px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer;text-decoration:none;}
.brand img{width:40px;height:40px;aspect-ratio:1/1;border-radius:50%;object-fit:cover;border:1.5px solid var(--pond-ink);background:#FFFFFF;box-shadow:1.5px 1.5px 0 var(--pond-ink);flex-shrink:0;display:block;}
.brand h1{font-family:'Baloo 2', cursive;font-size:1.35rem;font-weight:800;letter-spacing:-0.02em;line-height:1;margin:0;color:var(--pond-ink);}
.brand small{display:block;font-family:'Karla';font-weight:600;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--moss-deep);margin-top:2px;}
.navlinks{display:flex;gap:28px;align-items:center;font-weight:600;font-size:.92rem;}
.navlinks a{position:relative;padding:4px 0;transition:color .18s ease;}
.navlinks a:after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--berry-rose);transition:width .18s ease;}
.navlinks a:hover:after{width:100%;}
.navlinks a.active{color:var(--berry-rose);font-weight:700;}
.navlinks a.active:after{width:100%;background:var(--berry-rose);}
.order-btn{
  background:var(--berry-rose);color:#FFFDF8;
  border:1.8px solid var(--pond-ink);border-radius:10px;padding:9px 18px;font-family:'Baloo 2', cursive;font-weight:800;font-size:.92rem;
  box-shadow:2px 2px 0 var(--pond-ink);transition:all .15s ease;
}
.order-btn:hover{background:var(--berry-deep);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--pond-ink);}

/* ---------- SLEEK CLEAN HAMBURGER BUTTON ---------- */
.navtoggle{
  display:none;
  background:transparent;
  border:none;
  width:28px;
  height:20px;
  position:relative;
  cursor:pointer;
  padding:0;
  z-index:60;
  outline:none;
}
.navtoggle span{
  display:block;
  width:100%;
  height:2.2px;
  background:var(--pond-ink);
  border-radius:4px;
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
  transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.navtoggle span:before,
.navtoggle span:after{
  content:"";
  position:absolute;
  width:100%;
  height:2.2px;
  background:var(--pond-ink);
  border-radius:4px;
  left:0;
  transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.navtoggle span:before{top:-7px;}
.navtoggle span:after{top:7px;}

.navtoggle.active span{background:transparent;}
.navtoggle.active span:before{top:0;transform:rotate(45deg);}
.navtoggle.active span:after{top:0;transform:rotate(-45deg);}

/* ---------- section utility ---------- */
section{padding:86px 0;}
.section-head{max-width:560px;margin-bottom:48px;}
/* ---------- section labels / tags ---------- */
.section-tag{
  font-family:'Caveat',cursive;
  font-size:1.2rem;
  font-weight:700;
  color:var(--blush-deep);
  display:block;
  margin-bottom:6px;
  letter-spacing:-0.01em;
}
.section-title{font-size:clamp(1.9rem,3.4vw,2.5rem); color:var(--pond-ink);}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

.washi{
  height:18px;
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 18' width='28' height='18'%3E%3Cpath d='M 0 0 H 28 V 5 A 7 7 0 0 1 14 5 A 7 7 0 0 1 0 5 Z' fill='%23F7A8B8'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:28px 18px;
  background-position:center top;
  margin:0;
  border:none;
}

/* ---------- buttons & utils ---------- */
.btn-primary{
  background:var(--berry-rose);
  color:#FFFDF8;
  border:2.5px solid var(--pond-ink);
  border-radius:14px;
  padding:14px 30px;
  font-family:'Baloo 2', cursive;
  font-weight:800;
  font-size:1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:3.5px 4px 0 var(--berry-deep), 0 4px 12px rgba(122,40,61,0.18);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn-primary:hover{
  background:var(--berry-deep);
  color:#FFFDF8;
  transform:translate(-2px, -2px);
  box-shadow:5.5px 6px 0 var(--pond-ink), 0 8px 18px rgba(122,40,61,0.25);
}
.btn-primary:active{
  transform:translate(2px, 2px);
  box-shadow:1.5px 1.5px 0 var(--pond-ink);
}

.btn-ghost{
  background:#FAF6ED;
  color:var(--pond-ink);
  border:2.5px solid var(--pond-ink);
  border-radius:14px;
  padding:14px 28px;
  font-family:'Baloo 2', cursive;
  font-weight:700;
  font-size:1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:3.5px 4px 0 rgba(74,52,38,0.25);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn-ghost:hover{
  background:var(--blush);
  color:var(--pond-ink);
  transform:translate(-2px, -2px);
  box-shadow:5.5px 6px 0 var(--pond-ink);
}
.btn-ghost:active{
  transform:translate(2px, 2px);
  box-shadow:1.5px 1.5px 0 var(--pond-ink);
}

.dot{width:6px;height:6px;border-radius:50%;background:var(--berry-rose);flex:none;}

/* ---------- CANDY SHOP ACCENTS ---------- */
.candy-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--azalea);
  border:1.5px solid var(--pond-ink);
  display:inline-block;
}

/* ---------- footer ---------- */
footer{
  background:var(--pond-ink);
  color:#FDFAF2;
  padding:56px 0 max(30px, env(safe-area-inset-bottom, 30px));
  position:relative;
  z-index:30;
  width: 100%;
  margin-top: auto;
}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:36px;padding-bottom:36px;border-bottom:1px solid rgba(241,232,214,0.2);}
.foot-brand{display:flex;align-items:center;gap:14px;}
.foot-brand img{width:48px;height:48px;aspect-ratio:1/1;border-radius:50%;object-fit:cover;border:1.5px solid var(--parchment);background:#FFFFFF;flex-shrink:0;display:block;}
.foot-links{display:flex;gap:50px;flex-wrap:wrap;}
.foot-col h4{font-family:'Karla',sans-serif;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blush);margin-bottom:12px;font-weight:700;}
.foot-col a{display:block;font-size:.92rem;padding:5px 0;opacity:.9;color:#FDFAF2;text-decoration:none;cursor:pointer;pointer-events:auto !important;transition:opacity 0.15s ease, color 0.15s ease;}
.foot-col a:hover{opacity:1;text-decoration:underline;color:var(--blush);}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:22px;font-size:.8rem;opacity:.75;}

/* ---------- animations ---------- */
.pin-drop{animation:pinDrop .55s cubic-bezier(.2,.9,.3,1.2) both;}
@keyframes pinDrop{from{opacity:0;transform:translateY(-18px) rotate(0deg);}}

/* ---------- NAVBAR RIGHT ACTIONS GROUP ---------- */
.nav-right-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ---------- responsive (shared) ---------- */
@media(max-width:992px){
  .navrow {
    padding: 12px 20px;
    gap: 12px;
  }
  .brand {
    gap: 8px;
    flex-shrink: 1;
    min-width: 0;
  }
  .brand img {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
  }
  .brand h1 {
    font-size: 1.15rem;
    white-space: nowrap;
  }
  .brand small {
    font-size: .56rem;
    white-space: nowrap;
  }
  .nav-right-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
  }
  .cart-nav-btn {
    padding: 7px 14px;
    font-size: .84rem;
    border-radius: 12px;
    border: 1.5px solid var(--pond-ink);
    box-shadow: 2px 2px 0 var(--pond-ink);
    gap: 6px;
    white-space: nowrap;
  }
  .cart-badge {
    padding: 1px 6px;
    font-size: .72rem;
    border-radius: 10px;
  }
  .navtoggle {
    display: flex !important;
  }
  .navlinks{
    display: none !important;
  }
  .foot-grid{flex-direction:column;gap:24px;}
  .foot-links{gap:28px;}
  .foot-bottom{flex-direction:column;gap:6px;text-align:center;}
}

@media(max-width:580px){
  .navrow {
    padding: 10px 14px;
    gap: 8px;
  }
  .brand img {
    width: 30px;
    height: 30px;
  }
  .brand h1 {
    font-size: 1.02rem;
  }
  .brand small {
    font-size: .5rem;
  }
  .cart-nav-btn {
    padding: 5px 10px;
    font-size: .8rem;
  }
  .nav-right-actions {
    gap: 8px;
  }
}

/* ---------- FULL-SCREEN IMMERSIVE MOBILE MENU (LILYPAD CUTESY VIBE) ---------- */
.mobile-nav-fullscreen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background-color: #FFE4EC; /* Sweet pastel pink base */
  background-image: 
    linear-gradient(90deg, rgba(247, 185, 202, 0.45) 50%, transparent 50%),
    linear-gradient(rgba(247, 185, 202, 0.45) 50%, transparent 50%);
  background-size: 34px 34px;
  color: var(--pond-ink);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 28px 36px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.97);
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}
.mobile-nav-fullscreen.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

.mobile-fs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.mobile-fs-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.mobile-fs-brand img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--pond-ink);
  object-fit: cover;
  box-shadow: 2px 2px 0 var(--pond-ink);
  background: #FFFDF8;
}
.mobile-fs-brand span {
  font-family: 'Baloo 2', cursive;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--pond-ink);
  letter-spacing: -0.01em;
}
.mobile-fs-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FFFDF8;
  border: 2px solid var(--pond-ink);
  box-shadow: 2.5px 2.5px 0 var(--pond-ink);
  color: var(--pond-ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
.mobile-fs-close:hover {
  transform: rotate(90deg) scale(1.08);
  background: var(--azalea);
}

.mobile-fs-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 24px 0;
  gap: 28px;
}

.mobile-fs-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.mobile-fs-link {
  font-family: 'Caveat', cursive;
  font-size: clamp(2rem, 6.5vw, 2.75rem);
  font-weight: 400;
  color: var(--pond-ink);
  text-decoration: none;
  line-height: 1.25;
  letter-spacing: -0.01em;
  padding: 4px 18px;
  border-radius: 14px;
  transition: transform 0.18s ease, color 0.18s ease, background-color 0.18s ease;
  position: relative;
}
.mobile-fs-link:hover,
.mobile-fs-link.active {
  color: var(--berry-deep);
  background: rgba(255, 253, 248, 0.85);
  border: 1.5px dashed var(--berry-rose);
  transform: scale(1.08) rotate(-1deg);
  box-shadow: 3px 3px 0 #C8DE9D;
}

.mobile-fs-cta-wrap {
  width: 100%;
  max-width: 320px;
  text-align: center;
}
.mobile-fs-cta-btn {
  display: block;
  width: 100%;
  background: var(--berry-rose);
  color: #FFFDF8 !important;
  border: 2.2px solid var(--pond-ink);
  border-radius: 14px;
  padding: 16px 24px;
  font-family: 'Baloo 2', cursive;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  text-align: center;
  box-shadow: 4px 4.5px 0 var(--berry-deep), 0 8px 20px rgba(158, 45, 74, 0.25);
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.mobile-fs-cta-btn:hover {
  background: var(--berry-deep);
  transform: translateY(-2px);
  box-shadow: 5px 6px 0 var(--pond-ink), 0 12px 24px rgba(158, 45, 74, 0.35);
}
.mobile-fs-cta-btn:active {
  transform: translateY(1px);
}

.mobile-fs-footer {
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--moss-deep);
  padding-top: 8px;
}
@media(max-width:480px){
  .wrap{padding:0 16px;}
  section{padding:52px 0;}
  .section-head{margin-bottom:32px;}
  .section-title{font-size:clamp(1.5rem,6vw,2rem);}
}

/* ---------- PRODUCT OPTION SELECTION MODAL ---------- */
.option-modal-backdrop {
  position: fixed; inset: 0; z-index: 999999;
  background: rgba(44, 36, 22, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.option-modal-backdrop.open {
  opacity: 1; pointer-events: auto;
}

.option-modal-card {
  position: relative;
  width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
  background: #FDFAF2;
  border: 2px solid var(--pond-ink);
  border-radius: 16px;
  padding: 24px 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  transform: translateY(12px);
  transition: transform .25s ease;
}
.option-modal-backdrop.open .option-modal-card {
  transform: translateY(0);
}

.option-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%; border: 1.5px solid var(--pond-ink);
  background: #FFFFFF; color: var(--pond-ink);
  font-size: 1.2rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.option-modal-close:hover { background: #F5EFE6; }

.option-modal-title {
  font-family: 'Baloo 2', cursive;
  font-size: 1.4rem;
  color: var(--pond-ink);
  margin: 0 0 2px;
}
.option-modal-price {
  font-family: 'Caveat', cursive;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--moss-deep);
}

.modal-form-sec {
  margin-bottom: 20px;
  background: #FFFFFF;
  border: 1px solid #E5DFD5;
  border-radius: 12px;
  padding: 16px;
}
.modal-sec-label {
  display: block;
  font-size: .84rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #2C2416;
  margin-bottom: 10px;
}

.modal-guide-card {
  margin-bottom: 10px;
  border-radius: 12px;
  overflow: hidden;
  border: none;
  background: transparent;
  position: relative;
}
.modal-guide-tag {
  display: none;
}
.modal-guide-img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  display: block;
  background: transparent;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(44, 36, 22, 0.06);
}

.modal-select-field {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #D8CFC2;
  background: #FFFFFF;
  font-family: 'Karla', sans-serif;
  font-size: .94rem;
  font-weight: 700;
  color: #2C2416;
  cursor: pointer;
}
.modal-select-field:focus {
  outline: none;
  border-color: #2C2416;
  box-shadow: 0 0 0 3px rgba(44, 36, 22, 0.08);
}

.modal-textarea-field {
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid #D8CFC2;
  background: #FFFFFF;
  font-family: 'Karla', sans-serif;
  font-size: .9rem;
  color: #2C2416;
  resize: vertical;
}
.modal-textarea-field:focus {
  outline: none;
  border-color: #2C2416;
  box-shadow: 0 0 0 3px rgba(44, 36, 22, 0.08);
}

/* Modal Actions Row (Qty + Confirm) */
.modal-actions-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.modal-qty-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1.5px solid #D8CFC2;
  border-radius: 8px;
  padding: 6px 12px;
}
.modal-qty-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid #D8CFC2;
  background: #FAF7F2;
  color: #2C2416;
  font-size: 1rem; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.modal-qty-btn:hover { background: #EFE8DE; }
.modal-qty-num {
  font-family: 'Karla', sans-serif;
  font-size: 1rem; font-weight: 800;
  color: #2C2416;
  min-width: 20px; text-align: center;
}

.modal-confirm-btn {
  flex: 1;
  background: var(--pond-ink);
  color: #FDFAF2;
  border: none;
  border-radius: 8px;
  padding: 14px 20px;
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
  box-shadow: 2px 2px 0 var(--moss-deep);
}
.modal-confirm-btn:hover {
  background: #423624;
  transform: translateY(-1px);
}

/* ── Universal Lilypad Trust Loader Overlay ── */
.lilypad-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(26, 20, 11, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s ease;
}
.lilypad-loader-overlay.active {
  opacity: 1;
  visibility: visible;
}
.lilypad-loader-card {
  background: #FDFAF2;
  border: 2px solid #2C2416;
  border-radius: 20px;
  padding: 32px 34px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 6px 6px 0 #D4889A;
  transform: scale(0.92);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}
.lilypad-loader-overlay.active .lilypad-loader-card {
  transform: scale(1);
}
.lilypad-loader-icon-wrap {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto 16px;
}
.lilypad-loader-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid #2C2416;
  box-shadow: 0 4px 12px rgba(44, 36, 22, 0.15);
  display: block;
}
.lilypad-loader-spinner {
  position: absolute;
  inset: -6px;
  border: 3.5px solid transparent;
  border-top-color: var(--pond-ink, #2C2416);
  border-right-color: var(--blush-deep, #D4889A);
  border-radius: 50%;
  animation: lilypadSpin 0.9s linear infinite;
}
@keyframes lilypadSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.lilypad-loader-title {
  font-family: 'Baloo 2', cursive;
  font-size: 1.25rem;
  font-weight: 700;
  color: #2C2416;
  margin: 0 0 6px;
  line-height: 1.25;
}
.lilypad-loader-sub {
  font-size: 0.84rem;
  color: #6B5E4F;
  margin: 0 0 16px;
  line-height: 1.4;
}
.lilypad-loader-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.lilypad-loader-dots span {
  width: 7px;
  height: 7px;
  background: #2C2416;
  border-radius: 50%;
  animation: lilypadBounce 1.4s infinite ease-in-out both;
}
.lilypad-loader-dots span:nth-child(1) { animation-delay: -0.32s; }
.lilypad-loader-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes lilypadBounce {
  0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
  40% { transform: scale(1); opacity: 1; }
}

/* =====================================================
   CUTSIE ORDERS CLOSED MODAL & STATUS BADGES
   ===================================================== */
.orders-closed-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(44, 36, 22, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.orders-closed-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.orders-closed-modal-card {
  position: relative;
  background: #FFF1F4;
  border: 2.5px solid #2C2416;
  border-radius: 20px;
  box-shadow: 6px 8px 0 #C8DE9D, 0 20px 40px rgba(44, 32, 22, 0.25);
  width: 100%;
  max-width: 400px;
  padding: 28px 24px;
  text-align: center;
  transform: scale(0.88) translateY(16px);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.orders-closed-modal-overlay.active .orders-closed-modal-card {
  transform: scale(1) translateY(0);
}
.modal-close-x {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  font-weight: 700;
  color: #2C2416;
  cursor: pointer;
  line-height: 1;
}
.cute-modal-icon {
  font-size: 2.8rem;
  margin-bottom: 8px;
}
.modal-title {
  font-family: 'Baloo 2', cursive;
  font-weight: 800;
  font-size: 1.4rem;
  color: #E53E3E;
  margin: 0 0 8px;
}
.modal-msg {
  font-family: 'Karla', sans-serif;
  font-size: 0.95rem;
  color: #2C2416;
  line-height: 1.45;
  margin: 0 0 20px;
}
.modal-btn-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.btn-modal-ig {
  background: #E86B8B;
  color: #FFFFFF !important;
  text-decoration: none;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1.8px solid #2C2416;
  box-shadow: 2px 2px 0 #2C2416;
  transition: transform 0.15s ease;
  display: inline-block;
}
.btn-modal-ig:hover {
  transform: translateY(-2px);
}
.btn-modal-dismiss {
  background: #2C2416;
  color: #FFFDF8;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1.8px solid #2C2416;
  cursor: pointer;
}

/* Storefront Closed Badge State (Turns from Pink to Red!) */
.eyebrow-tape.closed,
.customs-status-badge.closed {
  background: #E53E3E !important;
  color: #FFFFFF !important;
  border-color: #9B1C1C !important;
}

/* =====================================================
   STICKY RED ANNOUNCEMENT BAR (WHEN ORDERS ARE CLOSED)
   ===================================================== */
.sticky-orders-closed-bar {
  position: relative;
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  z-index: 10000;
  background: #DC2626;
  color: #FFFFFF;
  text-align: center;
  padding: 8px 16px;
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  border-bottom: 1.5px solid #991B1B;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.4;
  text-transform: uppercase;
}

.sticky-orders-closed-bar span {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.sticky-orders-closed-bar a {
  color: #FFFDF8;
  text-decoration: underline;
  font-weight: 800;
}

body.has-closed-bar {
  padding-top: 0 !important;
}

body.has-closed-bar .nav,
body.has-closed-bar .checkout-header {
  top: 0 !important;
}

/* =====================================================
   CLEAN MINIMAL TRANSPARENT CIRCLE SPINNER LOADER
   ===================================================== */
.transparent-product-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 999990;
  background: rgba(253, 250, 242, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease;
}

.transparent-product-loader-overlay.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.clean-circle-spinner {
  width: 44px;
  height: 44px;
  border: 3.5px solid rgba(44, 36, 22, 0.15);
  border-top-color: #E86B8B;
  border-right-color: #2C2416;
  border-radius: 50%;
  animation: cleanCircleSpin 0.75s linear infinite;
}

@keyframes cleanCircleSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}