/* =====================================================
   TerraSpice Co. — Responsive Stylesheet
   Tablet & Mobile Breakpoints
   ===================================================== */

/* ============ Large Desktops / below 1199px ============ */
@media (max-width: 1199px) {
    .hero-content h1 { font-size: 48px; }
    .section-heading h2 { font-size: 36px; }
    .offer-content h2 { font-size: 36px; }
    main section { padding: 75px 0; }
}

/* ============ Tablets / below 991px (navbar collapses) ============ */
@media (max-width: 991px) {
    main section { padding: 60px 0; }

    /* Top bar: drop email, keep phone + social to save space */
    .top-bar-left a:nth-child(2) { display: none; }

    /* Mobile nav panel */
    .navbar-collapse {
        background: var(--color-beige-light);
        margin-top: 16px;
        padding: 18px;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-medium);
    }
    .main-nav { gap: 0; width: 100%; }
    .main-nav .nav-link { padding: 12px 10px !important; border-bottom: 1px solid var(--color-border); }
    .main-nav .nav-item:last-child .nav-link { border-bottom: none; }
    .main-nav .nav-link::after { display: none; }
    .main-nav .dropdown-menu { box-shadow: none; border: 1px solid var(--color-border); background: var(--color-white); }

    .navbar-toggler.collapsed .toggler-bar:nth-child(1) { transform: none; }
    #mainNav.show ~ .header-icons .navbar-toggler .toggler-bar:nth-child(1),
    .navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(2) { opacity: 0; }
    .navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Hero */
    .hero-banner { min-height: auto; }
    .hero-carousel .carousel-item { min-height: auto; }
    .hero-slide-inner { padding: 130px 0 80px; }
    .hero-content h1 { font-size: 40px; }
    .hero-content p { font-size: 15.5px; }
    .floating-spice { display: none; }
    .fs-1, .fs-2 { display: block; width: 80px; height: 80px; }
    .fs-1 { top: 6%; right: 4%; }
    .fs-2 { top: auto; bottom: 6%; right: 6%; }

    .category-card { height: 380px; }

    .discount-circle { width: 100px; height: 100px; top: -20px; right: 10px; }
    .discount-circle strong { font-size: 26px; }

    .qv-img-wrap { min-height: 260px; }
    .qv-details { padding: 28px; }
}

/* ============ Small Tablets / below 767px ============ */
@media (max-width: 767px) {
    .top-bar { display: none; }

    main section { padding: 50px 0; }
    .section-heading { margin-bottom: 36px; }
    .section-heading h2 { font-size: 30px; }
    .section-heading p { font-size: 14.5px; }

    .hero-slide-inner { padding: 120px 0 70px; }
    .hero-content h1 { font-size: 32px; }
    .hero-carousel .carousel-control-prev,
    .hero-carousel .carousel-control-next { display: none; }
    .hero-indicators { bottom: 18px; }
    .hero-cta { gap: 12px; }
    .btn-premium-gold, .btn-premium-outline { padding: 13px 26px; font-size: 14px; }
    .hero-stats { gap: 26px; }
    .hero-stats strong { font-size: 24px; }

    .category-card { height: 320px; }
    .category-content { padding: 26px; }
    .category-content h3 { font-size: 24px; }

    .product-tabs .nav-link { padding: 10px 22px; font-size: 13.5px; }

    .offer-content h2 { font-size: 28px; }
    .offer-content { padding: 20px 0; }
    .discount-circle { position: static; transform: none; margin-bottom: 20px; width: 90px; height: 90px; }
    .offer-content .section-label { display: block; }

    .process-step { font-size: 26px; top: 14px; right: 18px; }

    .testimonial-text { font-size: 19px; }
    .testimonial-carousel .carousel-control-prev,
    .testimonial-carousel .carousel-control-next { display: none; }

    .blog-img-wrap { height: 200px; }

    .newsletter-form { flex-direction: column; border-radius: var(--radius-md); padding: 10px; }
    .newsletter-form input { padding: 12px 14px; text-align: center; }
    .newsletter-form button { margin-top: 8px; width: 100%; padding: 13px; }

    .qv-details { padding: 24px; }
    .qv-details h3 { font-size: 22px; }

    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-about { max-width: 100%; }

    #backToTop { bottom: 18px; right: 18px; width: 42px; height: 42px; }
}

/* ============ Mobile Phones / below 575px ============ */
@media (max-width: 575px) {
    .brand-text { font-size: 19px; }
    .brand-logo svg { width: 32px; height: 32px; }

    .icon-btn { width: 36px; height: 36px; }
    .header-icons { gap: 0; }

    .hero-content h1 { font-size: 27px; }
    .hero-content p { font-size: 14px; margin-bottom: 26px; }
    .eyebrow-badge { font-size: 12px; padding: 7px 14px; }
    .hero-stats { gap: 18px; width: 100%; justify-content: space-between; }

    .category-card { height: 280px; }
    .category-content p { display: none; }

    .section-label { font-size: 12px; }
    .section-heading h2 { font-size: 25px; }

    .product-info { padding: 16px; }
    .product-title { font-size: 16px; }
    .current-price { font-size: 18px; }

    .feature-card { padding: 30px 18px; }

    .search-form input { font-size: 22px; }
    .search-close { top: 18px; right: 18px; width: 42px; height: 42px; }

    .qv-img-wrap { min-height: 200px; }

    .payment-icons { flex-wrap: wrap; justify-content: center; }
}

/* ============ Extra small / below 400px ============ */
@media (max-width: 400px) {
    .hero-stats { flex-wrap: wrap; row-gap: 14px; }
    .btn-premium-gold, .btn-premium-outline { width: 100%; }
    .hero-cta { flex-direction: column; }
}