@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700&display=swap');

.font-babu {
  font-family: 'Bubblegum Sans', cursive;
}

body {
  font-family: 'Outfit', sans-serif;
}

h1,
h2,
h3,
.babu-text {
  font-family: 'Bubblegum Sans', cursive !important;
  letter-spacing: 0.02em;
}

/* Book titles use readable font */
h4 {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

.pause-animation {
  animation-play-state: paused;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #f15a24;
}

/* Ensure Lucide Icons align nicely */
.lucide {
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════
   MOBILE PRODUCT PAGE — Premium Minimal (high specificity)
   Loaded after Tailwind CDN to reliably override it.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

    /* Image panel */
    section.product-hero .image-frame { position: static !important; }
    section.product-hero .image-frame > div { position: static !important; }
    section.product-hero .image-frame > div > div:first-child { display: none !important; }
    section.product-hero .image-frame > div > div:last-child {
        border: none !important;
        box-shadow: none !important;
        aspect-ratio: unset !important;
        height: auto !important;
        background: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-bottom: 1px solid #f1f5f9 !important;
        overflow: visible !important;
    }
    section.product-hero .image-frame > div > div:last-child img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 90vw !important;
        min-height: 220px !important;
        object-fit: contain !important;
        display: block !important;
        padding: 8px 8px !important;
        margin: 0 auto !important;
    }

    /* Trust badges strip */
    section.product-hero .trust-badges {
        display: flex !important;
        flex-direction: row !important;
        gap: 0 !important;
        margin-top: 0 !important;
        border-top: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        background: #fafafa !important;
        overflow: visible !important;
        flex-wrap: nowrap !important;
    }
    section.product-hero .trust-badges > div {
        flex: 1 !important;
        min-width: 0 !important;
        border: none !important;
        border-right: 1px solid #f1f5f9 !important;
        border-radius: 0 !important;
        padding: 9px 4px !important;
        box-shadow: none !important;
        background: transparent !important;
        text-align: center !important;
    }
    section.product-hero .trust-badges > div:last-child { border-right: none !important; }

    /* Product info block */
    div.prod-info-col {
        padding: 16px 16px 110px !important;
        background: #fff !important;
    }

    /* Title */
    h1.prod-title {
        font-size: 17px !important;
        line-height: 1.35 !important;
        margin-bottom: 5px !important;
        letter-spacing: -0.01em !important;
        color: #0f172a !important;
    }

    /* Price */
    span.prod-price {
        font-size: 24px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        color: #F05A00 !important;
    }

    /* Spec pills */
    div.spec-strip { margin-bottom: 14px !important; gap: 6px !important; }
    div.spec-pill {
        padding: 7px 10px !important;
        min-width: 88px !important;
        background: #f8fafc !important;
        border: 1px solid #e8edf3 !important;
    }

    /* Hide desktop ATC */
    div.desk-atc { display: none !important; }

    /* Hero wrapper */
    section.product-hero { padding: 0 !important; background: #fff !important; }
    section.product-hero > div { padding: 0 !important; }
    section.product-hero .grid { gap: 0 !important; display: block !important; }
}

@media (max-width: 480px) {
    h1.prod-title { font-size: 15px !important; }
    span.prod-price { font-size: 21px !important; }
    section.product-hero .image-frame > div > div:last-child img {
        max-height: 92vw !important;
        padding: 6px 6px !important;
    }
}

/* ── Mobile product block show/hide ── */
@media (max-width: 1023px) {
    #mob-product { display: block !important; }
    section.desk-product-hero { display: none !important; }
}
@media (min-width: 1024px) {
    #mob-product { display: none !important; }
    section.desk-product-hero { display: block !important; }
}

/* Search spinner */
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }