/* ============================================
   KIDS SHELF - PROFESSIONAL THEME OVERHAUL
   Aligns all UI to 60-30-10 brand system.
   Load last to override legacy styles.
   ============================================ */

/* ── Global particle canvas: z-index 2 — above page sections,
      below header (1000) / nav (9999) / bottom-bar (10000)
      pointer-events none → no click blocking ── */
#globalParticleCanvas {
    position: fixed !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Hero stage lifted above global canvas (z-index 2) */

/* ============================================
   OVERRIDES — Ensure design-system tokens win
   ============================================ */

.btn,
.btn-primary,
.btn-secondary,
.add-to-cart-btn,
.featured-add-to-cart,
.bestseller-add-to-cart,
button[type="submit"],
input[type="submit"] {
    font-family: var(--font-heading) !important;
    font-weight: var(--font-weight-medium) !important;
    border-radius: var(--radius-btn) !important;
    transition: all var(--transition-slow) !important;
}

.btn-primary,
.add-to-cart-btn,
.featured-add-to-cart,
.bestseller-add-to-cart {
    background: var(--color-primary) !important;
    color: white !important;
}

.btn-primary:hover,
.add-to-cart-btn:hover,
.featured-add-to-cart:hover,
.bestseller-add-to-cart:hover {
    background: var(--color-primary-dark) !important;
    transform: translateY(-1px) !important;
}

.btn-secondary {
    background: transparent !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary) !important;
}

.btn-secondary:hover {
    background: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* ============================================
   PRODUCT CARDS — 20px padding, 12px radius, soft shadow, 0.3s hover
   ============================================ */

.product-card,
.featured-product-card,
.bestseller-card {
    background: var(--color-bg-primary) !important;
    border-radius: var(--radius-card) !important;
    border: 1px solid var(--color-border-light) !important;
    box-shadow: var(--shadow-card) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.product-card:hover,
.featured-product-card:hover,
.bestseller-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-card-hover) !important;
}

.featured-product-info,
.bestseller-info,
.product-info {
    padding: var(--card-padding-internal) !important;
}

/* Product name — not bold */
.product-name,
.featured-product-name,
.bestseller-name,
.featured-product-card h3,
.bestseller-card h3 {
    font-weight: var(--font-weight-normal) !important;
}

/* Price: 18px bold final; smaller muted original */
.current-price,
.product-price .current-price,
.featured-product-price .current-price,
.bestseller-price .current-price {
    font-size: 18px !important;
    font-weight: var(--font-weight-normal) !important;
    color: var(--color-primary) !important;
}

.original-price,
.product-price .original-price,
.featured-product-price .original-price,
.bestseller-price .original-price {
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-normal) !important;
    color: var(--color-text-secondary) !important;
    text-decoration: line-through !important;
}

/* Brand-colored discount badges (no green) */
.featured-product-badge,
.discount-badge,
.product-image .discount-badge,
.bestseller-image .discount-badge {
    background: var(--badge-discount-bg) !important;
    color: var(--badge-discount-text) !important;
    font-size: 10px !important;
    font-weight: var(--font-weight-normal) !important;
    padding: 4px 8px !important;
    border-radius: var(--radius-sm) !important;
}

.bestseller-rank {
    background: var(--color-primary) !important;
    color: white !important;
}

/* ============================================
   HERO — Solid primary, outlined secondary
   ============================================ */

.hero-title {
    color: #3B1FA8 !important;
}

.hero-description {
    color: #6B4FA8 !important;
}

/* ============================================
   SECTION HEADERS & SPACING
   ============================================ */

.section-title {
    font-family: var(--font-heading) !important;
    font-weight: var(--font-weight-normal) !important;
    color: var(--color-text-primary) !important;
}

.section-title::after {
    background: var(--color-primary) !important;
}

.section-subtitle {
    color: var(--color-text-secondary) !important;
}

/* ============================================
   NAVIGATION
   ============================================ */

.header {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-primary) !important;
}

/* ============================================
   FEATURE CARDS
   ============================================ */

.feature-card {
    padding: var(--card-padding-internal) !important;
    border: 1px solid var(--color-border-light) !important;
}

.feature-icon {
    background: var(--color-primary) !important;
    color: white !important;
}

/* ============================================
   CATEGORY CARDS
   ============================================ */

.category-card:hover {
    transform: translateY(-4px) !important;
}

.category-image {
    border: 1px solid var(--color-border-light) !important;
}

.category-card:hover .category-image {
    border-color: var(--color-primary-light) !important;
    box-shadow: var(--shadow-md) !important;
}

/* ============================================
   PAGE HEADER (collection/shop) — Clean, not full gradient
   ============================================ */

.page-header {
    background: var(--color-bg-primary) !important;
    padding: var(--section-padding-mobile) 0 !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}

@media (min-width: 768px) {
    .page-header {
        padding: var(--section-padding-desktop) 0 !important;
    }
}

.page-title {
    color: var(--color-text-primary) !important;
}

.page-description {
    color: var(--color-text-secondary) !important;
}

/* ============================================
   FOOTER — Calm dark, integrated with theme
   ============================================ */

.footer {
    background: linear-gradient(135deg, #3D3D5C 0%, #2B2D42 100%) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.footer-title {
    color: white !important;
}

.footer-description,
.footer-links a,
.footer-newsletter-text {
    color: rgba(255, 255, 255, 0.85) !important;
}

.footer-links a:hover {
    color: white !important;
}

.social-link:hover {
    background: white !important;
    color: var(--color-primary) !important;
}

/* ============================================
   FILTERS & PAGINATION
   ============================================ */

.mobile-filter-btn,
.sidebar-apply-btn,
.drawer-apply-btn {
    background: var(--color-primary) !important;
}

.mobile-filter-btn:hover,
.sidebar-apply-btn:hover,
.drawer-apply-btn:hover {
    background: var(--color-primary-dark) !important;
}

.page-link.active {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
}

.age-pill:checked + .age-pill-label {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
}

/* ============================================
   CTA & TESTIMONIALS
   ============================================ */

.cta-card {
    border: 1px solid var(--color-border-light) !important;
    box-shadow: var(--shadow-lg) !important;
}

.testimonial-card {
    border: 1px solid var(--color-border-light) !important;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow) !important;
}

.testimonial-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* ============================================
   HERO TITLE ANIMATIONS — Slow, magical, calm
   ============================================ */

/* Stage wraps banner + hero text — canvas lives here
   z-index 3 keeps it above the global particle canvas (z-index 2) */
.hero-stage {
    position: relative !important;
    overflow: hidden !important;
    z-index: 3 !important;
}

/* Canvas spans full stage: over banner AND hero text */
.hero-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Banner image below canvas */
.hero-stage .banner-section,
.hero-stage .banner-slider,
.hero-stage .banner-slide {
    position: relative !important;
    z-index: 0 !important;
}

/* Hero text section — no overflow clip, canvas handles it */
.hero-text-section {
    position: relative !important;
    overflow: visible !important;
}

/* Text and buttons above canvas */
.hero-content,
.hero-actions {
    position: relative !important;
    z-index: 2 !important;
}

/* Whole title: slow gentle float */
.hero-title {
    animation: heroTitleFloat 9s ease-in-out infinite !important;
}

@keyframes heroTitleFloat {
    0%,  100% { transform: translateY(0px);  }
    45%       { transform: translateY(-8px); }
    55%       { transform: translateY(-8px); }
}

/* Per-word wave — staggered via --i custom property */
.hero-word {
    display: inline-block !important;
    color: #3B1FA8 !important;
    -webkit-text-fill-color: #3B1FA8 !important;
    animation: heroWordWave 6s ease-in-out infinite !important;
    animation-delay: calc(var(--i, 0) * 0.55s) !important;
    will-change: transform !important;
}

@keyframes heroWordWave {
    0%,  100% { transform: translateY(0)    rotate(0deg);    }
    25%       { transform: translateY(-7px) rotate(-0.5deg); }
    50%       { transform: translateY(0)    rotate(0deg);    }
    75%       { transform: translateY(4px)  rotate(0.5deg);  }
}

/* "Wonder Tales" — vivid kids rainbow sweep */
.hero-title-gradient {
    background-image: linear-gradient(
        90deg,
        #FFD700  0%,
        #FF8C00  13%,
        #FF4F6B  26%,
        #FF4FC8  39%,
        #BF5FFF  52%,
        #5BC8FF  65%,
        #00DCCC  78%,
        #FFD700  91%,
        #FF8C00  100%
    ) !important;
    background-size: 300% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: heroGradientSweep 5s linear infinite !important;
    display: inline-block !important;
    filter: drop-shadow(0 0 8px rgba(255,215,0,0.35)) !important;
}

@keyframes heroGradientSweep {
    0%   { background-position: 0%   center; }
    100% { background-position: 300% center; }
}

/* Glow pulse on the full hero title */
@keyframes heroTitleGlow {
    0%,  100% { filter: drop-shadow(0 0 6px rgba(255,79,200,0.20)); }
    33%        { filter: drop-shadow(0 0 14px rgba(91,200,255,0.35)); }
    66%        { filter: drop-shadow(0 0 14px rgba(255,215,0,0.30)); }
}

.hero-title {
    animation:
        heroTitleFloat 9s ease-in-out infinite,
        heroTitleGlow  7s ease-in-out infinite !important;
}

/* Shimmer light-beam sweep across the title */
.hero-title::after {
    content: '' !important;
    position: absolute !important;
    top: -20px !important;
    left: -80px !important;
    width: 60px !important;
    height: calc(100% + 40px) !important;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 70%
    ) !important;
    transform: skewX(-18deg) !important;
    animation: heroShimmerSweep 7s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.hero-title {
    position: relative !important;
    overflow: visible !important;
}

@keyframes heroShimmerSweep {
    0%   { left: -80px;  opacity: 0; }
    10%  { opacity: 1;   }
    55%  { left: 110%;   opacity: 1; }
    60%  { opacity: 0;   }
    100% { left: 110%;   opacity: 0; }
}

/* ============================================
   SMOOTH TRANSITIONS GLOBAL
   ============================================ */

a,
button,
.btn,
.product-card,
.feature-card,
.category-card,
.testimonial-card,
.page-link {
    transition-duration: 0.3s !important;
}