/* DESKTOP FORCE CSS - Load LAST to override everything for desktop */
/* This file MUST be loaded after all other CSS files */
/* Desktop: 1024px and up */

/* Mobile Menu Override - Ensure white text even in desktop preview mode */
@media (max-width: 1023px) {
    .mobile-menu .mobile-menu-header h3,
    .mobile-menu-header h3,
    .mobile-menu-header > h3 {
        color: white !important;
        font-family: 'League Spartan', sans-serif !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) !important;
    }
}

/* Medium Desktop / Laptop: 1024px - 1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
    /* Hero Section - 16:9 aspect ratio for laptops */
    .hero-section {
        width: 100vw !important;
        height: 56.25vw !important; /* 16:9 ratio */
        max-height: 576px !important; /* Cap at reasonable height for 1024px width */
        min-height: 400px !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }
    
    .hero-slider {
        height: 100% !important;
        border-radius: 0 !important;
    }
    
    .hero-slide {
        height: 100% !important;
        border-radius: 0 !important;
    }
    
    /* ABOUT PAGE SPECIFIC - Medium Desktop */
    .about-hero {
        margin-top: -120px !important;
        padding-top: 120px !important;
    }
    
    /* VALUES SECTION - Remove padding */
    .values-section {
        padding: 0 !important;
    }
    
    /* CONTACT PAGE SPECIFIC - Remove contact hero padding */
    .contact-hero {
        margin-top: -120px !important;
        padding: 120px 0 0 0 !important;
    }

    /* INFO PAGES WITH IMAGES - No negative margin so image is fully visible */
    .faq-hero,
    .shipping-hero,
    .returns-hero {
        margin-top: 0 !important;
        padding: 0 !important;
    }

    /* FAQ SECTION - Remove margin and padding */
    .faq-section {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* CONTACT SECTION - Remove margin-bottom to eliminate space before FAQ */
    .contact-section {
        margin-bottom: 0 !important;
    }
    
    /* CONTACT MAIN - Small bottom padding for visual breathing space */
    .contact-main {
        padding-bottom: 50px !important;
    }
    
    /* MAIN FOOTER - Small top padding for visual breathing space */
    .main-footer {
        padding-top: 50px !important;
    }
}

/* Large Desktop: 1440px - 1919px */
@media (min-width: 1440px) and (max-width: 1919px) {
    /* Hero Section - 16:9 aspect ratio for large monitors */
    .hero-section {
        width: 100vw !important;
        height: 56.25vw !important; /* 16:9 ratio */
        max-height: 810px !important; /* Cap at reasonable height */
        min-height: 576px !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }
    
    .hero-slider {
        height: 100% !important;
        border-radius: 0 !important;
    }
    
    .hero-slide {
        height: 100% !important;
        border-radius: 0 !important;
    }
    
    /* ABOUT PAGE SPECIFIC - Large Desktop */
    .about-hero {
        margin-top: -120px !important;
        padding-top: 120px !important;
    }
    
    /* VALUES SECTION - Remove padding */
    .values-section {
        padding: 0 !important;
    }
    
    /* CONTACT PAGE SPECIFIC - Remove contact hero padding */
    .contact-hero {
        margin-top: -120px !important;
        padding: 120px 0 0 0 !important;
    }

    /* INFO PAGES WITH IMAGES - No negative margin so image is fully visible */
    .faq-hero,
    .shipping-hero,
    .returns-hero {
        margin-top: 0 !important;
        padding: 0 !important;
    }

    /* FAQ SECTION - Remove margin and padding */
    .faq-section {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* CONTACT SECTION - Remove margin-bottom to eliminate space before FAQ */
    .contact-section {
        margin-bottom: 0 !important;
    }
    
    /* CONTACT MAIN - Small bottom padding for visual breathing space */
    .contact-main {
        padding-bottom: 50px !important;
    }
    
    /* MAIN FOOTER - Small top padding for visual breathing space */
    .main-footer {
        padding-top: 50px !important;
    }
}

/* Extra Large Desktop: 1920px and up */
@media (min-width: 1920px) {
    /* Hero Section - Fixed height for very large monitors */
    .hero-section {
        width: 100vw !important;
        height: 1080px !important; /* Fixed at 1080px for 1920px+ screens */
        border-radius: 0 !important;
        overflow: hidden !important;
    }
    
    .hero-slider {
        height: 100% !important;
        border-radius: 0 !important;
    }
    
    .hero-slide {
        height: 100% !important;
        border-radius: 0 !important;
    }
    
    /* ABOUT PAGE SPECIFIC - Extra Large Desktop */
    .about-hero {
        margin-top: -120px !important;
        padding-top: 120px !important;
    }
    
    /* VALUES SECTION - Remove padding */
    .values-section {
        padding: 0 !important;
    }
    
    /* CONTACT PAGE SPECIFIC - Remove contact hero padding */
    .contact-hero {
        margin-top: -120px !important;
        padding: 120px 0 0 0 !important;
    }

    /* INFO PAGES WITH IMAGES - No negative margin so image is fully visible */
    .faq-hero,
    .shipping-hero,
    .returns-hero {
        margin-top: 0 !important;
        padding: 0 !important;
    }

    /* FAQ SECTION - Remove margin and padding */
    .faq-section {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* CONTACT SECTION - Remove margin-bottom to eliminate space before FAQ */
    .contact-section {
        margin-bottom: 0 !important;
    }
    
    /* CONTACT MAIN - Small bottom padding for visual breathing space */
    .contact-main {
        padding-bottom: 50px !important;
    }
    
    /* MAIN FOOTER - Small top padding for visual breathing space */
    .main-footer {
        padding-top: 50px !important;
    }
}

/* General rules for all desktop sizes */
@media (min-width: 1024px) {
    /* 1. HEADER TOP - Increase text size to 16px AND force purple color */
    .header-top {
        font-size: 16px !important;
        color: #4b3c4e !important;
    }
    
    .header-top *,
    .header-top p,
    .header-top span,
    .header-top a,
    .header-top i,
    .info-item,
    .info-item *,
    .info-text,
    .info-text *,
    .header-link,
    .header-link * {
        font-size: 16px !important;
        color: #4b3c4e !important;
    }
    
    /* Force icons color too */
    .header-top .fa,
    .header-top .fas,
    .header-top .far,
    .header-top .fab {
        color: #4b3c4e !important;
    }
    
    /* 2. HEADER CONTENT - Remove scroll and allow dropdown overflow */
    .header-content {
        overflow: visible !important; /* Allow dropdown to show */
        overflow-y: visible !important;
        overflow-x: visible !important;
        height: auto !important; /* Remove fixed height */
        max-height: none !important;
    }
    
    .main-header {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    
    /* Logo 50% bigger - ULTRA SPECIFIC */
    html body .main-header .logo img,
    html body .header-main .logo img,
    html body .header-content .logo img {
        height: 144px !important; /* 96px + 50% = 144px */
        width: auto !important;
        max-width: none !important;
        min-height: 144px !important;
    }
    
    /* 3. MAIN MENU - 18px text and move to the right */
    .main-nav {
        margin-left: 100px !important; /* Move menu to the right to avoid logo */
    }
    
    .main-nav a,
    .nav-menu a,
    .nav-link {
        font-size: 18px !important;
    }
    
    /* Submenu always on top - COMPLETE SOLUTION */
    .nav-item .dropdown-menu,
    .nav-item .submenu,
    .dropdown-menu,
    .has-dropdown .dropdown-menu,
    .nav-menu .dropdown-menu,
    .dropdown {
        z-index: 9999999 !important;
        position: absolute !important;
        top: 100% !important; /* Position below the menu item */
        left: 0 !important;
        background: white !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
        pointer-events: auto !important;
        min-width: 200px !important;
    }
    
    /* Ensure all parent containers allow overflow and remove height limits */
    .nav-item,
    .has-dropdown,
    .main-nav,
    .nav-menu,
    .header-content,
    .header-main,
    .main-header,
    .container {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    
    /* Fix any clipping masks */
    .main-header,
    .header-main,
    .header-content {
        clip: auto !important;
        clip-path: none !important;
    }
    
    /* Force hero and all sections below header to lower z-index */
    .hero-section,
    .hero-slider,
    .hero-slide,
    section,
    main {
        z-index: 1 !important;
        position: relative !important;
    }
    
    /* Dropdown hidden by default, shown on hover */
    .dropdown-menu {
        display: none;
    }
    
    .nav-item:hover .dropdown-menu,
    .has-dropdown:hover .dropdown-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .dropdown-menu a,
    .submenu a {
        font-size: 18px !important;
    }
    
    /* 4. HERO SECTION - Height now handled by specific media queries above */
    /* Removed to avoid conflicts with responsive breakpoints */
    
    /* Fix hero slider functionality on desktop */
    .hero-slide {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateX(0) !important; /* Override transform-based animations */
        transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out !important;
    }
    
    /* Active slide must be visible */
    .hero-slide.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
        z-index: 2 !important;
    }
    
    /* Previous slides should be hidden */
    .hero-slide.prev {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateX(0) !important; /* Keep at same position */
        z-index: 1 !important;
    }
    
    /* Fix hero images visibility on desktop */
    .hero-bg-image {
        display: block !important;
        visibility: inherit !important; /* Inherit from parent slide */
        opacity: 1 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
    }
    
    .hero-bg-image picture {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
    }
    
    .hero-bg-image img {
        display: block !important;
        visibility: inherit !important; /* Inherit visibility from parent */
        opacity: 1 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 0 !important;
    }
    
    /* Ensure only active slide content is visible */
    .hero-slide:not(.active) .hero-bg-image,
    .hero-slide:not(.active) .hero-bg-image img {
        visibility: hidden !important;
    }
    
    /* Force no rounded corners on any hero element */
    .hero-section,
    .hero-section *,
    .hero-slider,
    .hero-slider *,
    .hero-slide,
    .hero-slide * {
        border-radius: 0 !important;
    }
    
    /* 5. NEW ARRIVALS SECTION TITLE - FORCE OVERRIDE PLAYFAIR */
    html body .products-section h2,
    html body .products-section .section-title,
    html body #newArrivals h2,
    html body #newArrivals .section-title,
    html body .new-arrivals h2,
    html body .new-arrivals .section-title,
    html body section h2.section-title {
        font-family: 'League Spartan', sans-serif !important;
        font-size: 28.8px !important;
    }
    
    /* 6. PRODUCTS GRID - Bigger images, only name and price */
    .products-grid,
    #newArrivalsGrid,
    #bestsellersGrid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 30px !important;
        padding: 30px !important;
    }
    
    .product-card {
        background: white !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
        overflow: hidden !important;
    }
    
    .product-image {
        width: 324px !important;
        height: 324px !important;
        max-width: 100% !important;
        background: #f8f8f8 !important; /* Light background for square images */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    html body .product-image img {
        object-fit: contain !important; /* Show full square image without cropping */
        width: 100% !important;
        height: 100% !important;
    }
    
    .product-info {
        padding: 15px !important;
    }
    
    /* Show only name and price */
    .product-name,
    .product-title {
        font-size: 1.1rem !important;
        margin: 0 0 8px 0 !important;
        color: #333 !important;
    }
    
    .product-price,
    .price {
        font-size: 1.3rem !important;
        color: #4b3c4e !important;
        font-weight: 600 !important;
        margin: 0 !important;
    }
    
    /* Hide everything else */
    .stock-warning,
    .product-description,
    .product-rating,
    /* .product-actions, */    /* Iconos de productos restaurados para desktop */
    .add-to-cart,
    /* .product-badge, */    /* Etiqueta "Destacado" restaurada para desktop */
    .product-colors,
    .product-meta {
        display: none !important;
    }
    
    /* 7. FOOTER - All text purple */
    .main-footer,
    .main-footer * {
        color: #4b3c4e !important;
    }
    
    .footer-section h3,
    .footer-section h4,
    .footer-section p,
    .footer-section a,
    .footer-section span,
    .footer-section li,
    .footer-section i {
        color: #4b3c4e !important;
    }
    
    .footer-bottom,
    .footer-bottom *,
    .footer-bottom p,
    .footer-copyright,
    .copyright-text {
        color: #4b3c4e !important;
    }
    
    /* Social icons */
    .social-links a {
        color: #4b3c4e !important;
        border-color: #4b3c4e !important;
    }
    
    .social-links a:hover {
        background: #4b3c4e !important;
        color: white !important;
    }
    
    /* ABOUT PAGE SPECIFIC - Remove space after header for all desktop sizes */
    .about-hero {
        margin-top: -120px !important; /* Compensate for header height */
        padding-top: 120px !important; /* Add padding back to maintain image display */
    }
    
    /* VALUES SECTION - Remove padding */
    .values-section {
        padding: 0 !important;
    }
    
    /* CONTACT PAGE SPECIFIC - Remove contact hero padding for all desktop sizes */
    .contact-hero {
        margin-top: -120px !important; /* Compensate for header height */
        padding: 120px 0 0 0 !important; /* Remove original padding, add top space for header */
    }

    /* INFO PAGES WITH IMAGES - No negative margin so image is fully visible */
    .faq-hero,
    .shipping-hero,
    .returns-hero {
        margin-top: 0 !important;
        padding: 0 !important;
    }

    /* FAQ SECTION - Remove margin and padding for all desktop sizes */
    .faq-section {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* CONTACT SECTION - Remove margin-bottom to eliminate space before FAQ */
    .contact-section {
        margin-bottom: 0 !important;
    }
    
    /* CONTACT MAIN - Small bottom padding for visual breathing space */
    .contact-main {
        padding-bottom: 50px !important;
    }
    
    /* MAIN FOOTER - Small top padding for visual breathing space */
    .main-footer {
        padding-top: 50px !important;
    }
}