/* ----------------------------------------------------
   Responsive Design & Overrides
   ---------------------------------------------------- */

/* Responsiveness overrides for premium footer */
@media (max-width: 1024px) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media (max-width: 640px) {
    .footer-container {
        grid-template-columns: 1fr;
        padding: 0 20px 40px 20px;
        gap: 30px;
    }
    
    .footer-bottom-container {
        flex-direction: column;
        text-align: center;
        padding: 0 20px;
    }
}

/* ----------------------------------------------------
   7. Responsive Design (Media Queries)
---------------------------------------------------- */
@media (max-width: 1024px) {
    .hero-container {
        padding: 0 40px;
    }
    
    .slider-arrow.left {
        left: 20px;
    }

    .slider-arrow.right {
        right: 20px;
    }
}

@media (max-width: 900px) {
    .nav-container {
        padding: 0 24px;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 90px;
        left: 0;
        width: 100%;
        background-color: var(--color-bg-base);
        flex-direction: column;
        padding: 30px 0;
        gap: 20px;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    .nav-links.active {
        display: flex;
        animation: fadeIn 0.3s ease forwards;
    }

    .menu-toggle {
        display: flex;
    }

    .logo-image {
        height: 45px;
    }
}

@media (max-width: 640px) {
    .header {
        height: 80px;
    }
    
    .nav-links {
        top: 80px;
    }

    .hero-section {
        height: calc(100vh - 80px);
        background-position: 70% center; /* Adjust model alignment on narrow screens */
    }

    .hero-container {
        padding: 0 20px;
    }

    .hero-content {
        max-width: 100%;
        background-color: rgba(247, 243, 235, 0.85); /* Semi-transparent overlay to ensure text readability on mobile */
        padding: 30px 24px;
        border-radius: 12px;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-cta-group {
        flex-direction: column;
        gap: 12px;
    }

    .btn {
        width: 100%;
    }

    .slider-arrow {
        display: none; /* Hide arrows on mobile sliders, touch swipe pattern implied or simplified navigation */
    }
}

/* Responsive Grid overrides */
@media (max-width: 1200px) {
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 900px) {
    .categories-section {
        padding: 60px 24px;
    }
}

@media (max-width: 640px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .section-header {
        gap: 16px;
        margin-bottom: 35px;
    }
    
    .section-title {
        font-size: 1.1rem;
    }
    
    .header-line {
        max-width: 60px;
    }
}

/* ----------------------------------------------------
   11. Responsiveness Overrides for New Sections
---------------------------------------------------- */
@media (max-width: 1024px) {
    .promo-banner-container {
        grid-template-columns: 1.1fr 1fr;
    }
}

@media (max-width: 900px) {
    .features-bar-container {
        flex-wrap: wrap;
        gap: 24px;
        justify-content: center;
    }

    .feature-bar-item {
        flex: none;
        width: calc(50% - 24px);
    }
    
    .feature-bar-item:not(:last-child) {
        border-right: none;
    }
    
    .feature-bar-item:nth-child(2n) {
        border-left: 1px solid rgba(214, 171, 81, 0.15);
        padding-left: 20px;
    }
    
    .promo-banner-section {
        margin-top: 40px;
    }
}

@media (max-width: 640px) {
    .features-bar-section {
        padding: 20px 0;
    }
    
    .features-bar-container {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 24px;
        gap: 20px;
    }
    
    .feature-bar-item {
        width: 100%;
        justify-content: flex-start;
        padding: 0;
    }
    
    .feature-bar-item:nth-child(2n) {
        border-left: none;
        padding-left: 0;
    }
    
    .promo-banner-section {
        padding: 0 20px;
    }
    
    .promo-banner-container {
        grid-template-columns: 1fr;
        height: auto;
        padding: 0;
    }
    
    .promo-banner-content {
        padding: 45px 24px;
        align-items: center;
        text-align: center;
    }
    
    .promo-banner-right-wrapper {
        display: none;
    }
}

/* Responsiveness overrides for split bottom sections replacement */
@media (max-width: 1024px) {
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 800px) {
    .why-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 640px) {
    .why-choose-us-section,
    .reviews-section {
        padding: 50px 0;
    }
    
    .why-choose-us-container,
    .reviews-container {
        padding: 0 20px;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .review-card-item {
        padding: 20px;
    }
}

/* ----------------------------------------------------
   15. Responsiveness overrides for Category Overlaid Grid
---------------------------------------------------- */
@media (max-width: 1024px) {
    .shop-categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .shop-categories-section {
        padding: 0 20px;
    }
    
    .shop-categories-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .shop-category-card {
        aspect-ratio: 1.25;
    }
}

/* Product Detail Responsiveness */
@media (max-width: 1024px) {
    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .product-lower-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .zoom-image-crop {
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .product-detail-page {
        padding: 0 20px;
        margin-top: 20px;
    }

    .product-gallery-block {
        flex-direction: column-reverse;
    }

    .product-thumbnails {
        flex-direction: row;
        justify-content: center;
    }

    .product-trust-row {
        flex-direction: column;
        gap: 12px;
    }

    .tabs-navigation {
        gap: 15px;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* About Page Responsiveness */
@media (max-width: 1024px) {
    .premium-story-section {
        padding: 80px 40px;
    }
    
    .premium-story-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .premium-story-col {
        display: flex;
        flex-direction: column;
    }

    .col-right {
        flex-direction: column-reverse;
    }

    .col-right .premium-story-content-block {
        margin-top: 30px;
        margin-bottom: 0;
    }
}

@media (max-width: 900px) {
    .about-grid-3col {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .about-page-banner {
        height: 200px;
    }
    
    .about-mission-section {
        padding: 50px 0 40px 0;
    }
    
    .premium-story-section {
        padding: 60px 20px;
    }
    
    .premium-story-container {
        gap: 50px;
    }

    .premium-story-content-block {
        align-items: center;
        text-align: center;
    }

    .premium-story-highlights {
        grid-template-columns: 1fr;
        gap: 14px;
        text-align: left;
        max-width: 280px;
        margin: 0 auto 30px auto;
    }

    .premium-story-btn {
        width: 100%;
        box-sizing: border-box;
    }
    
    .about-section {
        padding: 60px 0;
    }
    
    .about-container {
        padding: 0 20px;
    }
    
    .about-quote-text {
        font-size: 1.25rem;
    }
    
    .about-cta-title {
        font-size: 1.7rem;
    }
}

/* Statistics Section Responsiveness */
@media (max-width: 1024px) {
    .stats-container {
        padding: 0 40px;
        gap: 40px;
    }
}

@media (max-width: 900px) {
    .stats-container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
        padding: 0 30px;
    }
    
    .stats-title-col {
        flex: none;
        max-width: 100%;
    }
    
    .stats-metrics-col {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px 10px;
    }
    
    .stat-metric-item {
        flex: 0 0 calc(50% - 10px);
    }
    
    .metric-divider {
        display: none;
    }
}

@media (max-width: 640px) {
    .stats-section {
        padding: 60px 0;
    }
    
    .stats-container {
        padding: 0 20px;
        gap: 30px;
    }
    
    .stats-title {
        font-size: 1.8rem;
    }
}

/* Customer Reviews Split Section Responsiveness */
@media (max-width: 900px) {
    .reviews-split-container {
        grid-template-columns: 1fr;
        height: auto;
    }
    .reviews-content-col {
        order: 2;
        padding: 80px 20px;
    }
    .reviews-image-col {
        order: 1;
        height: 380px;
    }
}

/* Store Features Bar Section Responsiveness */
@media (max-width: 900px) {
    .features-bar-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px 20px;
    }
    
    .feature-bar-item {
        flex: 0 0 calc(33.333% - 20px);
        min-width: 180px;
    }
    
    .feature-bar-divider {
        display: none;
    }
}

@media (max-width: 640px) {
    .features-bar-section {
        padding: 50px 0;
        margin-top: 40px;
    }
    
    .feature-bar-item {
        flex: 0 0 calc(50% - 15px);
        min-width: 140px;
    }
}

/* Contact Page Responsiveness */
@media (max-width: 900px) {
    .contact-grid-section {
        padding: 80px 40px;
    }
    
    .contact-grid-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .showroom-map-section {
        padding: 0 40px 80px 40px;
    }
}

@media (max-width: 640px) {
    .contact-grid-section {
        padding: 60px 20px;
    }
    
    .contact-form-card {
        padding: 40px 24px;
    }
    
    .showroom-map-section {
        padding: 0 20px 60px 20px;
    }
    
    .showroom-map-placeholder {
        height: 350px;
    }
}

/* FAQ Page Responsiveness */
@media (max-width: 900px) {
    .faq-grid-section {
        padding: 80px 40px;
    }
    
    .faq-grid-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .faq-sidebar-sticky {
        position: relative;
        top: 0;
    }
    
    .faq-sidebar-title {
        font-size: 1.5rem;
        margin-bottom: 16px;
    }
    
    .faq-sidebar-menu {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px 20px;
        margin-bottom: 30px;
        border-bottom: 1px solid rgba(17, 17, 17, 0.08);
        padding-bottom: 16px;
    }
    
    .faq-sidebar-link {
        border-left: none;
        padding-left: 0;
        padding-bottom: 6px;
        border-bottom: 2px solid transparent;
    }
    
    .faq-sidebar-link:hover,
    .faq-sidebar-link.active {
        border-left: none;
        padding-left: 0;
        border-bottom: 2px solid var(--color-accent-gold-dark);
    }
    
    .faq-sidebar-contact {
        display: none;
    }
    
    .faq-content-col {
        gap: 45px;
    }
    
    .faq-group-title {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
}

@media (max-width: 640px) {
    .faq-grid-section {
        padding: 60px 20px;
    }
    
    .faq-question {
        padding: 20px;
        font-size: 0.92rem;
    }
    
    .faq-answer-inner {
        padding: 0 20px 20px 20px;
    }
    
    .faq-sidebar-menu {
        gap: 8px 16px;
    }
    
    .faq-sidebar-link {
        font-size: 0.85rem;
    }
}

/* Complaint Page Responsiveness */
@media (max-width: 1024px) {
    .complaint-redesign-grid {
        gap: 30px;
        padding: 0 24px;
    }
}

@media (max-width: 900px) {
    .complaint-section {
        padding: 80px 0;
    }
    
    .complaint-redesign-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .complaint-card {
        padding: 40px 30px;
    }
}

@media (max-width: 640px) {
    .complaint-section {
        padding: 60px 0;
    }
    
    .complaint-card {
        padding: 30px 20px;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .premium-complaint-form {
        gap: 16px;
    }
    
    .ticket-info-box {
        padding: 16px 20px;
    }
    
    .ticket-id {
        font-size: 1.25rem;
    }
    
    .success-details {
        padding: 16px 20px;
    }
}