/* ============================================================
   WONDER TOYS — playful storefront theme
   A cohesive overlay that carries the homepage "toy arcade"
   language (logo neon palette + Bangers display font + rounded,
   bold, sticker-y shapes) across every shopping/content page,
   while keeping those pages light and readable.

   Loaded AFTER style.css + pages.css so it wins on shared class
   names. It targets only storefront classes (.product-card,
   .pd-*, .pdp-*, .cartpg-*, .co-*, page heroes) — never .th-*
   (the homepage arcade) and never the admin panel.
   ============================================================ */

:root {
  --toy-orange: #ff6a2b;
  --toy-yellow: #ffd166;
  --toy-teal: #14b8a6;
  --toy-magenta: #ff2d9a;
  --toy-purple: #8b5cf6;
  --toy-green: #16a34a;
  --toy-ink: #14121c;
  --toy-grad: linear-gradient(96deg, #ff6a2b 0%, #ff2d9a 100%);
  --toy-grad-warm: linear-gradient(96deg, #ff8a3d 0%, #ffb02e 100%);
  /* brighten the legacy accent so every existing accent usage turns toy-orange */
  --accent: #ff5a1f;
  --accent-h: #ff7a45;
}

/* Display font for headings — the same Bangers used on the homepage. */
.toy-display,
.section-heading,
.shop-hero-title,
.contact-hero-title,
.page-hero-title,
.cms-hero-title {
  font-family: "Bangers", "Outfit", cursive !important;
  letter-spacing: 0.02em;
  font-weight: 400;
}

/* ============================================================
   PRODUCT CARD — playful toy tile
   ============================================================ */
.product-card {
  border-radius: 20px !important;
  border: 1.5px solid #f0eef4 !important;
  box-shadow: 0 4px 16px rgba(20, 18, 28, 0.06) !important;
  transition: transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 0.25s, border-color 0.25s !important;
}
.product-card:hover {
  transform: translateY(-6px) rotate(-0.6deg) !important;
  border-color: rgba(255, 106, 43, 0.5) !important;
  box-shadow: 0 22px 44px -18px rgba(255, 106, 43, 0.5), 0 10px 28px rgba(20, 18, 28, 0.12) !important;
}
.product-img-wrap {
  background: radial-gradient(120% 120% at 50% 0%, #fff 0%, #f6f4fb 100%) !important;
  position: relative;
}
/* image fills the card edge-to-edge (no inner padding) */
.product-img { padding: 0 !important; }
/* on hover: no scale — sweep a glossy shine across the image instead */
.product-card:hover .product-img { transform: none !important; }
.product-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.55) 48%, transparent 60%);
  transform: translateX(-130%);
}
.product-card:hover .product-img-wrap::after {
  animation: pc-shine 0.8s ease;
}
@keyframes pc-shine {
  to { transform: translateX(130%); }
}

/* discount → a tilted sticker in the corner */
.product-price-row { position: relative; }
.price-off {
  font-family: "Bangers", "Outfit", cursive;
  font-size: 14px !important;
  letter-spacing: 0.04em;
  color: #14060a !important;
  background: var(--toy-yellow);
  padding: 2px 9px;
  border-radius: 8px;
  transform: rotate(-3deg);
  box-shadow: 0 5px 12px rgba(255, 209, 102, 0.5);
}
.price-sale {
  color: var(--toy-green) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}
.product-name a:hover { color: var(--toy-orange); }

/* wishlist heart */
.pc-wish.is-active,
.product-wish:hover { color: var(--toy-magenta) !important; }

/* CTA — gradient pill with a lift */
.product-cta {
  background: var(--toy-grad) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  box-shadow: 0 8px 20px -8px rgba(255, 45, 154, 0.6);
  transition: transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 0.2s !important;
}
.product-cta:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 26px -8px rgba(255, 45, 154, 0.7);
  letter-spacing: 0.03em !important;
}
.product-cta--notify {
  background: #f1f0f5 !important;
  color: #a7a2b4 !important;
  box-shadow: none;
}
.soon-tag {
  color: var(--toy-purple) !important;
  border-color: rgba(139, 92, 246, 0.4) !important;
  background: rgba(139, 92, 246, 0.07);
}

/* ============================================================
   SHARED PLAYFUL BUTTON — applied to primary CTAs across pages
   ============================================================ */
.btn-primary,
.pd-btn-cart,
.co-place,
.cd-checkout,
.auth-submit,
.form-submit,
.contact-submit {
  background: var(--toy-grad) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 12px 28px -10px rgba(255, 45, 154, 0.6) !important;
  transition: transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 0.2s !important;
}
.btn-primary:hover,
.pd-btn-cart:hover,
.co-place:hover,
.cd-checkout:hover,
.auth-submit:hover,
.form-submit:hover,
.contact-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 36px -10px rgba(255, 45, 154, 0.7) !important;
}
/* Buy Now gets the warm variant so the two PDP buttons read differently */
.pd-btn-buy {
  background: var(--toy-grad-warm) !important;
  color: #14060a !important;
  border: none !important;
  box-shadow: 0 12px 28px -10px rgba(255, 106, 43, 0.6) !important;
  transition: transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 0.2s !important;
}
.pd-btn-buy:hover { transform: translateY(-2px) !important; }
.pd-btn-wish.is-on { color: var(--toy-magenta) !important; border-color: var(--toy-magenta) !important; }

/* ============================================================
   SHOP / LISTING PAGE HERO — bright toy energy
   ============================================================ */
.shop-hero {
  background: radial-gradient(130% 130% at 78% -20%, #241a3a 0%, #140f22 50%, #0b0812 100%) !important;
}
.shop-hero-glow { background: radial-gradient(circle, rgba(255, 106, 43, 0.45), transparent 62%) !important; }
.shop-hero::after { background: radial-gradient(circle, rgba(255, 45, 154, 0.3), transparent 66%) !important; }
.shop-hero::before { background: linear-gradient(108deg, transparent 38%, rgba(255, 209, 102, 0.1) 50%, transparent 62%) !important; }
.shop-hero-eyebrow { color: var(--toy-yellow) !important; }
.shop-hero-title {
  font-size: clamp(40px, 6vw, 68px) !important;
  font-weight: 400 !important;
}
.shop-hero-title span {
  background: var(--toy-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
.shop-hero-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
.shop-hero-badge b { color: var(--toy-yellow) !important; }

/* ============================================================
   PDP — playful accents on the buy box + section titles
   ============================================================ */
.pdp-sec-title,
.pd-related-title,
.pdp-reviews-title {
  font-family: "Bangers", "Outfit", cursive !important;
  letter-spacing: 0.03em;
  font-weight: 400 !important;
}
/* colour swatches — selected ring in brand orange */
.pd-swatch.is-active { border-color: var(--toy-orange) !important; box-shadow: 0 0 0 3px rgba(255, 106, 43, 0.22) !important; }
.pd-price-now { color: var(--toy-green) !important; }
.pd-save { color: var(--toy-green) !important; }
.pd-price-off {
  font-family: "Bangers", "Outfit", cursive;
  color: #14060a !important;
  background: var(--toy-yellow) !important;
  padding: 1px 9px;
  border-radius: 7px;
  transform: rotate(-2deg);
  display: inline-block;
}

/* ============================================================
   CART + CHECKOUT — rounded summary cards
   ============================================================ */
.cartpg-summary,
.co-summary,
.cd-foot,
.order-summary {
  border-radius: 18px !important;
  border: 1.5px solid #f0eef4 !important;
}
.cart-free-note,
.cd-progress-fill { background: var(--toy-grad) !important; }

/* ============================================================
   CONTENT PAGE HEROES (contact, about, policy, careers…)
   ============================================================ */
.contact-hero-eyebrow,
.page-hero-eyebrow { color: var(--toy-orange) !important; }
.contact-hero-title span,
.page-hero-title span {
  background: var(--toy-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ============================================================
   MOBILE BOTTOM NAV — active tab in brand colour
   ============================================================ */
.mbn-item.is-active,
.mbn-item.active { color: var(--toy-orange) !important; }

/* ============================================================
   SECTION HEADINGS used on storefront content
   ============================================================ */
.section-heading .cat-heading-accent,
.section-heading em {
  background: var(--toy-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
   MOBILE POLISH
   ============================================================ */
@media (max-width: 600px) {
  .product-cta { padding: 10px 14px !important; font-size: 12px !important; }
  .price-sale { font-size: 16px !important; }
  .shop-hero-title { font-size: clamp(34px, 9vw, 48px) !important; }
}

/* ============================================================
   FOOTER — bright toy theme
   Flips the dark arcade footer to a cream, colourful footer that
   matches the homepage. Loaded last so it wins over style.css.
   ============================================================ */
.site-footer { background: #fff8f0 !important; }

/* --- newsletter: a bold toy-gradient banner --- */
.footer-newsletter {
  background: linear-gradient(100deg, #ff6a2b 0%, #ff2d9a 52%, #8b5cf6 100%) !important;
  border-top: none !important;
  border-bottom: none !important;
}
.footer-newsletter::before { display: none !important; }
.footer-nl-heading {
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
}
.footer-nl-sub { color: rgba(255, 255, 255, 0.92) !important; }
.footer-nl-input {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #fff !important;
}
.footer-nl-input::placeholder { color: rgba(255, 255, 255, 0.72) !important; }
.footer-nl-input:focus {
  background: rgba(255, 255, 255, 0.26) !important;
  border-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28) !important;
}
.footer-nl-btn {
  background: #fff !important;
  color: #14060a !important;
  box-shadow: 0 8px 22px rgba(20, 18, 40, 0.22) !important;
}
.footer-nl-btn:hover { background: #ffe9d6 !important; }

/* --- trust strip: white with the colourful icons kept --- */
.footer-trust-strip {
  background: #ffffff !important;
  border-top: 1px solid #f0e7dc !important;
  border-bottom: 1px solid #f0e7dc !important;
}
.footer-trust-item:hover { background: rgba(20, 18, 40, 0.03) !important; }
.footer-trust-num { color: #1f1a33 !important; }
.footer-trust-label { color: #8a8399 !important; }
.footer-trust-sep { background: rgba(20, 18, 40, 0.09) !important; }

/* --- body: cream with dark ink --- */
.footer-body { background: #fff8f0 !important; }
.footer-col-heading { color: #1f1a33 !important; }
.footer-logo-text { color: #1f1a33 !important; }
.footer-brand-desc { color: #6f6a86 !important; }
.footer-badge {
  border-color: rgba(255, 106, 43, 0.4) !important;
  color: #d94f13 !important;
}
.footer-social-btn {
  background: #ffffff !important;
  border-color: #ece3d7 !important;
  color: #6f6a86 !important;
}
.footer-social-btn:hover { color: #fff !important; }
.footer-links a { color: #6f6a86 !important; }
.footer-links a:hover { color: #ff6a2b !important; }
.footer-link--highlight,
.footer-link--highlight:hover { color: #ec1c8c !important; }
.footer-contact-list li { color: #6f6a86 !important; }
.footer-contact-list li svg { color: #ff6a2b !important; }
.footer-contact-list a { color: #6f6a86 !important; }
.footer-contact-list a:hover { color: #14b8a6 !important; }

/* --- bottom bar --- */
.footer-bottom {
  background: #fffdf9 !important;
  border-top: 1px solid #f0e7dc !important;
}
.footer-copy { color: #8a8399 !important; }
.footer-made-in { color: #6f6a86 !important; }
.footer-secured-label { color: #8a8399 !important; }

/* ============================================================
   MEGA MENU — playful category icons in colour-tinted badges
   (replaces the plain product-photo thumbnails)
   ============================================================ */
.mega-menu { width: 580px !important; }
.mega-cat { transition: background 0.16s ease, transform 0.14s ease !important; }
.mega-cat:hover {
  background: var(--cat-glow, #f5f6f8) !important;
  transform: translateY(-1px);
}
.mega-cat:hover .mega-cat-name { color: var(--cat-solid, #1c1c1c); }
/* wider product-photo thumbnail with a subtle per-category frame */
.mega-cat-img {
  width: 68px !important;
  height: 52px !important;
  background: #f6f4fa !important;
  border: 1.5px solid var(--cat-border, rgba(255, 106, 43, 0.45));
  border-radius: 12px !important;
  transition: transform 0.22s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.mega-cat:hover .mega-cat-img { transform: scale(1.05); }

/* "View all products" → gradient toy button */
.mega-all {
  background: var(--toy-grad) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px -8px rgba(255, 45, 154, 0.55);
}
.mega-all:hover {
  background: var(--toy-grad) !important;
  transform: translateY(-1px);
  box-shadow: 0 13px 28px -8px rgba(255, 45, 154, 0.65);
  gap: 11px !important;
}