/* ============================================================
   Decorative shapes -- purely visual, storefront only.
   A playful kids'-party layer: balloons, stars, clouds,
   hearts, flowers, diamonds, confetti and lollipops in a bright
   mixed palette. Drawn with ::before / ::after (each holding
   several shapes as stacked backgrounds), so there's no extra
   markup. Shapes sit behind content, ignore clicks, keep to the
   side margins, never cause sideways scrolling, and thin out on
   phones. Remove this stylesheet's <link> to turn them all off.

   Palette: pink #ff8fb1, sky #6ec6ff, sun #ffd23f, mint #5fd3a8,
   lavender #b39cff, coral #ff9f6e, brand rose #ad4368.
   ============================================================ */

/* Shape variables live in /css/shapes.css (loaded just before this file). */

/* Never let a shape poke past the edge of the screen. */
html, body { overflow-x: clip; }

/* ---------- Shared plumbing ---------- */
.section,
.page-hero,
.trust-strip { position: relative; isolation: isolate; }
.section > .container,
.page-hero > .container,
.trust-strip > .container { position: relative; z-index: 1; }

.section::before,
.section::after,
.page-hero::before,
.page-hero::after,
.trust-strip::before,
.trust-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
}

/* ---------- Content sections: four rotating mixes, shapes in the margins ---------- */
.section:nth-of-type(4n+1)::before {
  background-image: var(--s-blob), var(--s-balloon-sky), var(--s-star-sun), var(--s-dot-coral);
  background-size: 300px 300px, 38px 76px, 34px 34px, 14px 14px;
  background-position: -150px 10px, left 3% bottom 40px, right 4% top 34px, right 9% bottom 60px;
}
.section:nth-of-type(4n+1)::after {
  background-image: var(--s-confetti), var(--s-heart), var(--s-triangle);
  background-size: 130px 98px, 28px 25px, 30px 30px;
  background-position: right 1.5% bottom 18px, left 6% top 40%, right 3% top 46%;
  opacity: 0.9;
}
.section:nth-of-type(4n+2)::before {
  background-image: var(--s-blob-sky), var(--s-cloud), var(--s-balloon-pink), var(--s-dot-sky);
  background-size: 280px 280px, 110px 55px, 38px 76px, 16px 16px;
  background-position: right -140px top 0, left 2% top 30px, right 3% bottom 40px, left 8% bottom 70px;
}
.section:nth-of-type(4n+2)::after {
  background-image: var(--s-diamond), var(--s-star-lav), var(--s-circle);
  background-size: 26px 26px, 28px 28px, 30px 30px;
  background-position: right 4% top 40px, left 4% bottom 26px, right 7% top 55%;
}
.section:nth-of-type(4n+3)::before {
  background-image: var(--s-blob), var(--s-cloud), var(--s-lollipop), var(--s-star-sun);
  background-size: 260px 260px, 110px 55px, 30px 60px, 26px 26px;
  background-position: right -110px bottom -60px, left 1.5% top 26px, right 3.5% top 40px, left 8% bottom 40px;
}
.section:nth-of-type(4n+3)::after {
  background-image: var(--s-flower), var(--s-heart), var(--s-dot-coral), var(--s-triangle);
  background-size: 30px 30px, 24px 22px, 12px 12px, 26px 26px;
  background-position: left 2% bottom 30px, right 6% bottom 50px, left 10% top 45%, right 2% top 35%;
}
.section:nth-of-type(4n)::before {
  background-image: var(--s-blob-sky), var(--s-balloon-sun), var(--s-balloon-mint), var(--s-confetti);
  background-size: 300px 300px, 34px 68px, 30px 60px, 110px 83px;
  background-position: -160px bottom -40px, right 4% top 30px, right 7.5% top 60px, left 2% top 24px;
}
.section:nth-of-type(4n)::after {
  background-image: var(--s-circle), var(--s-star-lav), var(--s-diamond);
  background-size: 26px 26px, 30px 30px, 24px 24px;
  background-position: left 5% top 45%, right 3% bottom 34px, left 3% bottom 26px;
}

/* ---------- Page hero (About / Contact) ---------- */
.page-hero::before {
  background-image: var(--s-balloon-pink), var(--s-balloon-sky), var(--s-star-sun), var(--s-cloud);
  background-size: 40px 80px, 34px 68px, 34px 34px, 110px 55px;
  background-position: left 9% top 28px, left 13% top 56px, right 12% top 30px, right 4% bottom 18px;
}
.page-hero::after {
  background-image: var(--s-confetti), var(--s-cloud), var(--s-heart);
  background-size: 120px 90px, 90px 45px, 24px 22px;
  background-position: left 3% bottom 10px, right 17% bottom 22px, left 22% bottom 30px;
  opacity: 0.85;
}

/* ---------- Trust strip (home) ---------- */
.trust-strip::before {
  background-image: var(--s-star-sun), var(--s-dot-sky), var(--s-heart);
  background-size: 26px 26px, 12px 12px, 20px 18px;
  background-position: left 2.5% top 14px, left 5% bottom 16px, right 3% top 16px;
}
.trust-strip::after {
  background-image: var(--s-confetti);
  background-size: 90px 68px;
  background-position: right 1% bottom 4px;
  opacity: 0.8;
}

/* ---------- Home hero: balloons, stars and confetti around the headline ---------- */
.hero__inner::before,
.hero__inner::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
}
.hero__inner::before {
  width: 190px; height: 230px; top: -70px; left: -210px;
  background-image: var(--s-balloon-pink), var(--s-balloon-sky), var(--s-balloon-sun), var(--s-confetti);
  background-size: 52px 104px, 46px 92px, 40px 80px, 140px 105px;
  background-position: 20px 0, 70px 30px, 120px 8px, 10px 125px;
  animation: decor-float 6s ease-in-out infinite;
}
.hero__inner::after {
  width: 170px; height: 200px; bottom: -40px; right: -200px;
  background-image: var(--s-star-sun), var(--s-star-lav), var(--s-balloon-mint), var(--s-sparkle);
  background-size: 44px 44px, 30px 30px, 46px 92px, 30px 30px;
  background-position: 10px 20px, 120px 0, 90px 70px, 30px 130px;
  animation: decor-float 7s ease-in-out -2s infinite;
}
@keyframes decor-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---------- Footer: a scalloped top edge, like a cupcake liner ---------- */
.site-footer { position: relative; }
.site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -23px; height: 24px;
  pointer-events: none;
  background: var(--color-ink);
  -webkit-mask: radial-gradient(circle at 18px 0, transparent 17px, #000 18px) 0 0 / 36px 24px repeat-x;
          mask: radial-gradient(circle at 18px 0, transparent 17px, #000 18px) 0 0 / 36px 24px repeat-x;
}
/* ...with a few party sprinkles above it. */
.site-footer::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -92px; height: 66px;
  pointer-events: none;
  background-image: var(--s-confetti), var(--s-balloon-sky), var(--s-star-sun);
  background-size: 100px 75px, 26px 52px, 24px 24px;
  background-position: left 4% bottom 0, right 6% bottom 0, left 46% bottom 10px;
  background-repeat: no-repeat;
}

/* ---------- Product page: a blob and a balloon peeking out behind the photo ---------- */
.product-detail { position: relative; }
.product-detail::before {
  content: "";
  position: absolute; z-index: -1;
  width: 300px; height: 300px; left: -80px; top: 50%;
  background-image: var(--s-balloon-pink), var(--s-blob);
  background-size: 36px 72px, contain;
  background-position: 30px 10px, center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* ---------- Cart drawer: big party shapes across the list ---------- */
/* Shapes fill the list area (between the header and the subtotal/checkout
   footer), including around the items, but the item text, photos and buttons
   sit on top of them so everything stays readable and tappable. */
.cart-drawer__body { position: relative; z-index: 1; }
.cart-drawer__item-name,
.cart-drawer__item-color,
.cart-drawer__item-price,
.cart-drawer__qty span,
.cart-drawer__empty {
  /* soft white halo so text stays legible where it crosses a shape */
  text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 8px #fff;
}
.cart-drawer__item img { position: relative; }
.cart-drawer__qty button,
.cart-drawer__remove { background-color: var(--color-surface); }
.cart-drawer::after {
  content: "";
  position: absolute;
  inset: 72px 0 150px;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    var(--s-balloon-pink), var(--s-balloon-sky), var(--s-balloon-sun),
    var(--s-star-sun), var(--s-star-lav), var(--s-flower), var(--s-heart),
    var(--s-confetti);
  background-size:
    74px 148px, 64px 128px, 56px 112px,
    64px 64px, 44px 44px, 50px 50px, 38px 34px,
    190px 143px;
  background-position:
    right 30px bottom 60px, right 96px bottom 30px, right 156px bottom 76px,
    left 30px bottom 190px, right 24px top 120px, left 110px bottom 100px, left 56px bottom 26px,
    center bottom 0;
}
/* Big soft blobs stay behind everything as background colour. */
.cart-drawer { isolation: isolate; }
.cart-drawer::before {
  content: "";
  position: absolute;
  inset: 72px 0 150px;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image: var(--s-blob), var(--s-blob-sky);
  background-size: 360px 360px, 300px 300px;
  background-position: right -110px bottom -60px, left -120px bottom 120px;
}

@media (max-width: 760px) {
  /* Phones have almost no side margin, so shapes behind the content would be
     hidden by cards and text. Split them into two layers instead:
       ::after  -> big soft blobs, behind everything (background colour);
       ::before -> small "sticker" shapes IN FRONT of the content, kept to
                   the section's top/bottom padding and outer corners so
                   they never sit on top of words (and ignore taps). */
  .hero__inner::after,
  .site-footer::after { display: none; }

  .section::before,
  .page-hero::before,
  .trust-strip::before { z-index: 2; opacity: 1; }
  .section::after,
  .page-hero::after,
  .trust-strip::after { z-index: 0; opacity: 1; }

  /* Front stickers: top-right in the top padding, bottom corners in the bottom padding. */
  .section:nth-of-type(4n+1)::before {
    background-image: var(--s-star-sun), var(--s-balloon-sky), var(--s-heart);
    background-size: 30px 30px, 28px 56px, 24px 22px;
    background-position: right 14px top 12px, right 10px bottom 2px, left 14px bottom 16px;
  }
  .section:nth-of-type(4n+2)::before {
    background-image: var(--s-flower), var(--s-balloon-pink), var(--s-star-lav);
    background-size: 30px 30px, 28px 56px, 26px 26px;
    background-position: right 16px top 12px, left 10px bottom 2px, right 18px bottom 16px;
  }
  .section:nth-of-type(4n+3)::before {
    background-image: var(--s-heart), var(--s-balloon-sun), var(--s-diamond);
    background-size: 26px 24px, 26px 52px, 22px 22px;
    background-position: right 16px top 14px, right 12px bottom 2px, left 16px bottom 18px;
  }
  .section:nth-of-type(4n)::before {
    background-image: var(--s-star-sun), var(--s-balloon-mint), var(--s-flower);
    background-size: 28px 28px, 26px 52px, 26px 26px;
    background-position: right 14px top 12px, left 12px bottom 2px, right 16px bottom 16px;
  }

  /* Behind: one big soft blob per section, alternating sides. */
  .section:nth-of-type(odd)::after {
    background-image: var(--s-blob);
    background-size: 200px 200px;
    background-position: -120px 30%;
  }
  .section:nth-of-type(even)::after {
    background-image: var(--s-blob-sky);
    background-size: 200px 200px;
    background-position: right -120px top 40%;
  }

  .page-hero::before {
    background-image: var(--s-balloon-pink), var(--s-balloon-sky), var(--s-star-sun), var(--s-heart);
    background-size: 26px 52px, 22px 44px, 24px 24px, 20px 18px;
    background-position: left 12px top 10px, left 40px top 22px, right 16px top 14px, right 22px bottom 12px;
  }
  .page-hero::after {
    background-image: var(--s-confetti);
    background-size: 80px 60px;
    background-position: left 8px bottom 4px;
  }

  .trust-strip::before {
    background-image: var(--s-star-sun), var(--s-heart);
    background-size: 22px 22px, 18px 16px;
    background-position: left 10px top 8px, right 12px top 10px;
  }
  .trust-strip::after { display: none; }

  .hero__inner::before {
    width: 120px; height: 110px; top: -86px; left: -10px;
    background-image: var(--s-balloon-pink), var(--s-balloon-sky), var(--s-balloon-sun);
    background-size: 30px 60px, 26px 52px, 24px 48px;
    background-position: 0 0, 34px 18px, 66px 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__inner::before,
  .hero__inner::after { animation: none; }
}