/* MOBILE FORCE CSS - Load LAST to override everything */
/* This file MUST be loaded after all other CSS files */

@media (max-width: 767px) {
    /* 1. FORCE HEADER CHANGES - Logo bigger, minimal padding, shorter header */
    .main-header,
    header,
    .header-main {
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
    }
    
    .header-content {
        padding: 4px 8px !important; /* Minimal padding */
        height: 60px !important; /* Short header */
        min-height: 60px !important;
        max-height: 60px !important;
        overflow: hidden !important; /* Hide scrollbar */
    }
    
    .logo {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .logo img {
        height: 80px !important;
        max-height: 80px !important;
        min-height: 80px !important;
        width: auto !important;
    }
    
    /* Adjust body padding for shorter header */
    body {
        padding-top: 60px !important; /* Reduced from 120px to match actual header height */
    }
    
    /* Remove any borders/lines from header elements */
    .header-content,
    .header-main,
    .main-header,
    .header-right,
    .header-icons,
    .container {
        border: none !important;
        border-right: none !important;
        border-left: none !important;
        box-shadow: none !important;
        outline: none !important;
    }
    
    /* Remove any pseudo-elements that might create lines */
    .header-content::after,
    .header-content::before,
    .header-right::after,
    .header-right::before,
    .header-icons::after,
    .header-icons::before {
        display: none !important;
        content: none !important;
    }
    
    /* 2. FORCE HERO IMAGES - Show mobile images only and START AFTER HEADER */
    .hero-section {
        margin-top: 60px !important; /* Margin to start after complete header */
        position: relative !important;
        z-index: 1 !important;
        top: 0px !important; /* Reset top positioning */
        border-radius: 0 !important; /* Remove rounded corners */
        overflow: hidden !important;
        width: 100vw !important;
        height: 56.25vw !important; /* 16:9 aspect ratio */
        min-height: 200px !important;
        max-height: 400px !important;
    }
    
    /* Remove rounded corners from all hero elements */
    .hero-slider {
        border-radius: 0 !important;
        height: 100% !important;
        width: 100% !important;
    }
    
    .hero-slide {
        border-radius: 0 !important;
        height: 100% !important;
        width: 100% !important;
    }
    
    .hero-bg-image {
        border-radius: 0 !important;
        height: 100% !important;
        width: 100% !important;
    }
    
    /* Hide ALL desktop images completely */
    .hero-bg-image img {
        display: none !important;
    }
    
    /* Force mobile images to show with direct CSS content replacement */
    /* Updated for 16:9 aspect ratio images (1820x1024) */
    .hero-slide:nth-child(1) .hero-bg-image::before {
        content: '';
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        background-image: url('../img/hero/hero-slide-1-movil_250x250.jpg') !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        border-radius: 0 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    .hero-slide:nth-child(2) .hero-bg-image::before {
        content: '';
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        background-image: url('../img/hero/hero-slide-2-movil_250x250.jpg') !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        border-radius: 0 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    .hero-slide:nth-child(3) .hero-bg-image::before {
        content: '';
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        background-image: url('../img/hero/hero-slide-3-movil_250x250.jpg') !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        border-radius: 0 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    .hero-slide:nth-child(4) .hero-bg-image::before {
        content: '';
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        background-image: url('../img/hero/hero-slide-4-movil_250x250.jpg') !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        border-radius: 0 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    .hero-slide:nth-child(5) .hero-bg-image::before {
        content: '';
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        background-image: url('../img/hero/hero-slide-5-movil_250x250.jpg') !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        border-radius: 0 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    .hero-slide:nth-child(6) .hero-bg-image::before {
        content: '';
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        background-image: url('../img/hero/hero-slide-6-movil_250x250.jpg') !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        border-radius: 0 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    /* Force no rounded corners on any hero element in mobile */
    .hero-section,
    .hero-section *,
    .hero-slider,
    .hero-slider *,
    .hero-slide,
    .hero-slide *,
    .hero-bg-image,
    .hero-bg-image::before,
    .hero-bg-image::after {
        border-radius: 0 !important;
    }
    
    /* HIDE Hero carousel navigation buttons on mobile - users can swipe */
    .carousel-controls {
        display: none !important;
    }
    
    .carousel-btn.prev,
    .carousel-btn.next,
    #prevSlide,
    #nextSlide {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* 3. FORCE PRODUCTS GRID - No padding, bigger images */
    .products-section .container {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .products-grid {
        padding: 0 !important;
        margin: 0 !important;
        gap: 4px !important;
        background: transparent !important;
        border-radius: 0 !important;
    }
    
    .product-card {
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        border-radius: 12px !important;
    }
    
    .product-image {
        height: 180px !important; /* Smaller images as requested */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #f8f8f8 !important; /* Light background for square images */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px 12px 0 0 !important;
    }
    
    html body .product-image img {
        object-fit: contain !important; /* Show full square image without cropping */
        width: 100% !important;
        height: 100% !important;
        border-radius: 12px 12px 0 0 !important;
    }
    
    .product-info {
        padding: 8px !important; /* Minimal padding */
    }
    
    .product-name,
    .product-title {
        font-size: 0.85rem !important;
        margin: 0 0 4px 0 !important;
    }
    
    .product-price,
    .price {
        font-size: 1rem !important;
        margin: 0 !important;
    }
    
    /* Hide everything except name and price */
    .stock-warning,
    .product-description,
    .product-rating,
    /* .product-actions, */    /* REMOVED: Product actions should be visible on mobile */
    .add-to-cart {
        display: none !important;
    }
    
    /* Section padding adjustments */
    .products-section {
        padding: 1rem 0 !important;
    }
    
    /* New Arrivals specific padding on mobile */
    #new-arrivals.products-section {
        padding: 2.5rem 0 !important;
    }
    
    /* HEADER TOP - Force purple color for ALL text and icons */
    html body .header-top,
    html body .header-top *,
    html body .header-top * *,
    html body .header-top a,
    html body .header-top span,
    html body .header-top p,
    html body .header-top div,
    html body .header-top i,
    html body .header-top .fa,
    html body .header-top .fas,
    html body .header-top .far,
    html body .header-top .fab,
    html body .info-item,
    html body .info-item *,
    html body .info-text,
    html body .info-text * {
        color: #4b3c4e !important;
    }
    
    /* FOOTER - Force purple color for ALL text */
    html body .main-footer,
    html body .main-footer *,
    html body .main-footer * *,
    html body .footer-section,
    html body .footer-section *,
    html body .footer-section * *,
    html body .footer-bottom,
    html body .footer-bottom *,
    html body .footer-bottom * * {
        color: #4b3c4e !important;
    }
    
    html body .footer-section h3,
    html body .footer-section h4,
    html body .footer-section p,
    html body .footer-section a,
    html body .footer-section span,
    html body .footer-section li,
    html body .footer-section i,
    html body .footer-section .fa,
    html body .footer-section .fas,
    html body .footer-section .far,
    html body .footer-section .fab {
        color: #4b3c4e !important;
    }
    
    /* Social icons */
    html body .social-links a,
    html body .social-links a i {
        color: #4b3c4e !important;
        border-color: #4b3c4e !important;
    }
    
    html body .social-links a:hover {
        background: #4b3c4e !important;
        color: white !important;
    }
    
    /* Newsletter section */
    html body .newsletter-section,
    html body .newsletter-section *,
    html body .newsletter-text,
    html body .newsletter-text * {
        color: #4b3c4e !important;
    }
    
    /* HERO SECTIONS - Reduce height on mobile BUT preserve image background */
    .about-hero,
    .contact-hero {
        min-height: 200px !important;
        padding: 60px 0 40px !important;
    }
    
    /* PRESERVE about-hero image background functionality */
    .about-hero .hero-image-bg {
        display: block !important;
        background-image: url('../img/about.jpg') !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
    }
    
    .about-hero .hero-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(255, 182, 213, 0.4) !important;
        z-index: 2 !important;
    }
    
    .about-hero .hero-content {
        position: relative !important;
        z-index: 3 !important;
    }
    
    .about-hero .hero-content h1,
    .contact-hero .hero-content h1 {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .about-hero .hero-content p,
    .contact-hero .hero-content p {
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }
    
    /* CART BADGE - Always show, even with 0 items */
    .cart-count,
    .cart-badge,
    .badge,
    .cart-btn .badge {
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
        min-width: 18px !important;
        height: 18px !important;
        background: linear-gradient(135deg, #FFB6D5 0%, #F4C2C2 100%) !important;
        color: white !important;
        border-radius: 50% !important;
        font-size: 12px !important;
        text-align: center !important;
        line-height: 18px !important;
        position: absolute !important;
        top: -5px !important;
        right: -5px !important;
    }
    
    /* MODERN MOBILE MENU DESIGN */
    .mobile-menu {
        position: fixed !important;
        top: 0 !important;
        left: -300px !important;
        width: 300px !important;
        height: 100vh !important;
        background: #ffffff !important;
        box-shadow: 2px 0 25px rgba(0,0,0,0.15) !important;
        border-radius: 0 25px 25px 0 !important;
        overflow: hidden !important; /* Keep horizontal overflow hidden */
        transition: left 0.3s ease !important;
        z-index: 9999 !important;
        display: flex !important;
        flex-direction: column !important; /* Allow header and nav to stack */
    }
    
    .mobile-menu.active {
        left: 0 !important;
    }
    
    .mobile-menu-header {
        background: linear-gradient(135deg, #FFB6D5 0%, #F4C2C2 100%) !important;
        color: white !important;
        padding: 20px 25px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        box-shadow: 0 2px 10px rgba(255, 182, 213, 0.3) !important;
        flex-shrink: 0 !important; /* Prevent header from shrinking */
    }
    
    .mobile-menu .mobile-menu-header h3,
    .mobile-menu-header h3 {
        margin: 0 !important;
        font-size: 1.4rem !important;
        font-weight: 600 !important;
        color: white !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) !important;
        font-family: 'League Spartan', sans-serif !important;
        letter-spacing: 0.5px !important;
    }
    
    /* Sobrescribir cualquier color específico */
    .mobile-menu-header h3 * {
        color: white !important;
    }
    
    .close-mobile-menu {
        background: rgba(255, 255, 255, 0.2) !important;
        border: none !important;
        color: white !important;
        width: 35px !important;
        height: 35px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }
    
    .close-mobile-menu:hover {
        background: rgba(255,255,255,0.3) !important;
        transform: rotate(90deg) !important;
    }
    
    .mobile-menu-nav {
        padding: 10px 0 !important;
        overflow-y: auto !important; /* Enable vertical scrolling */
        overflow-x: hidden !important; /* Prevent horizontal scroll */
        flex: 1 !important; /* Take remaining space */
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
    }
    
    .mobile-menu-nav ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .mobile-menu-nav li {
        margin: 0 !important;
        border-bottom: 1px solid rgba(245,245,245,0.8) !important;
    }
    
    .mobile-menu-nav li:last-child {
        border-bottom: none !important;
    }
    
    .mobile-menu-nav a {
        display: flex !important;
        align-items: center !important;
        padding: 12px 25px !important;
        color: #4b3c4e !important;
        text-decoration: none !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        transition: all 0.3s ease !important;
        position: relative !important;
    }
    
    .mobile-menu-nav a:hover,
    .mobile-menu-nav a:active {
        background: linear-gradient(135deg, rgba(107,70,193,0.08) 0%, rgba(180,148,244,0.12) 100%) !important;
        color: #6b46c1 !important;
        padding-left: 30px !important;
    }
    
    .mobile-menu-nav a::before {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 4px !important;
        background: linear-gradient(135deg, #6b46c1 0%, #b794f4 100%) !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }
    
    .mobile-menu-nav a:hover::before {
        opacity: 1 !important;
    }
    
    .mobile-user-section a {
        background: linear-gradient(135deg, rgba(107,70,193,0.1) 0%, rgba(180,148,244,0.15) 100%) !important;
        border-radius: 15px !important;
        margin: 8px 15px !important;
        padding: 12px 20px !important;
        border: 2px solid transparent !important;
    }
    
    .mobile-user-section a:hover {
        border-color: rgba(107,70,193,0.3) !important;
        background: linear-gradient(135deg, rgba(107,70,193,0.15) 0%, rgba(180,148,244,0.2) 100%) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 15px rgba(107,70,193,0.2) !important;
    }
    
    .mobile-user-section .fas.fa-user-circle {
        font-size: 1.3rem !important;
        margin-right: 12px !important;
        color: #6b46c1 !important;
    }
    
    .mobile-divider {
        height: 1px !important;
        background: linear-gradient(90deg, transparent 0%, rgba(107,70,193,0.2) 50%, transparent 100%) !important;
        margin: 8px 25px !important;
        border: none !important;
    }
    
    .submenu-toggle .fas.fa-chevron-down {
        margin-left: auto !important;
        transition: transform 0.3s ease !important;
        color: #6b46c1 !important;
    }
    
    .submenu-toggle.active .fas.fa-chevron-down {
        transform: rotate(180deg) !important;
    }
    
    .mobile-menu .submenu {
        background: #f8f9ff !important;
        display: none !important;
        overflow: hidden !important;
        transition: all 0.3s ease !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    
    .mobile-menu .has-submenu.active .submenu {
        display: block !important;
        padding: 5px 0 !important;
    }
    
    .submenu li {
        border-bottom: 1px solid rgba(107,70,193,0.1) !important;
    }
    
    .submenu a {
        padding: 10px 25px 10px 45px !important;
        font-size: 0.9rem !important;
        color: #5a5a5a !important;
        background: none !important;
    }
    
    .submenu a:hover {
        background: rgba(107,70,193,0.08) !important;
        color: #6b46c1 !important;
        padding-left: 50px !important;
    }
    
    #mobileTrackOrder {
        background: linear-gradient(135deg, rgba(180,148,244,0.1) 0%, rgba(212,180,226,0.15) 100%) !important;
        border-radius: 15px !important;
        margin: 8px 15px !important;
        padding: 12px 20px !important;
        border: 2px solid transparent !important;
    }
    
    #mobileTrackOrder:hover {
        border-color: rgba(180,148,244,0.4) !important;
        background: linear-gradient(135deg, rgba(180,148,244,0.15) 0%, rgba(212,180,226,0.2) 100%) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 15px rgba(180,148,244,0.3) !important;
    }
    
    #mobileTrackOrder .fas.fa-truck {
        margin-right: 12px !important;
        color: #b794f4 !important;
        font-size: 1.1rem !important;
    }
    
    /* HIDE "Enlaces Rápidos" section in footer on mobile only */
    .footer-column:nth-child(2) {
        display: none !important;
    }
}

/* Force these styles to load with highest priority */
.main-header .header-content {
    padding: 4px 8px !important;
}

.main-header .logo img {
    height: 80px !important;
}

/* Additional fixes for mobile - remove any vertical lines */
@media (max-width: 767px) {
    /* Aggressively remove any borders or dividers */
    .header-content *,
    .header-main *,
    .header-right *,
    .header-icons * {
        border-right: none !important;
        border-left: none !important;
        border: none !important;
    }
    
    /* Remove container borders - EXCEPT footer column h4 lines */
    .container::after,
    .container::before {
        display: none !important;
    }
    
    /* PROTECT footer h4 lines - Force them to show */
    .footer-column h4::before {
        display: block !important;
        content: '' !important;
        position: absolute !important;
        top: -20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 80% !important;
        height: 3px !important;
        background: #4b3c4e !important;
        border-radius: 4px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Force all content to stick together with no gaps */
    .hero-section,
    section {
        margin-top: -5px !important;
    }
    
    /* First section after header should start after complete header */
    .hero-section {
        margin-top: 60px !important;
    }
    
    /* ===================================
       PRODUCT ACTIONS - ALWAYS VISIBLE ON MOBILE
       =================================== */
    
    /* Override desktop hover behavior - make product actions always visible on mobile */
    html body .product-card .product-actions,
    .product-card .product-actions,
    .product-actions {
        opacity: 1 !important;
        transform: translateX(0) !important;
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        z-index: 10 !important;
        visibility: visible !important;
    }
    
    /* Action button styling for mobile touch */
    html body .product-card .action-btn {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        color: #4b3c4e !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        transition: all 0.3s ease !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* Action button hover/active state for mobile */
    html body .product-card .action-btn:active,
    html body .product-card .action-btn:focus {
        background: #4b3c4e !important;
        color: white !important;
        transform: scale(1.1) !important;
        box-shadow: 0 4px 12px rgba(75, 60, 78, 0.3) !important;
    }
    
    /* Specific button colors for better UX */
    html body .product-card .wishlist-btn:active,
    html body .product-card .wishlist-btn:focus {
        background: #e91e63 !important;
        color: white !important;
    }
    
    html body .product-card .quick-view-btn:active,
    html body .product-card .quick-view-btn:focus {
        background: #2196f3 !important;
        color: white !important;
    }
    
    html body .product-card .quick-add-btn:active,
    html body .product-card .quick-add-btn:focus {
        background: #4caf50 !important;
        color: white !important;
    }
    
    /* Ensure product image doesn't cover the actions */
    html body .product-card .product-image {
        position: relative !important;
        overflow: visible !important;
    }
    
    /* Adjust product card to accommodate always-visible actions */
    html body .product-card {
        position: relative !important;
        overflow: visible !important;
    }
    
    /* FORCE OVERRIDE - Additional specificity for stubborn cases */
    @media (max-width: 767px) {
        .product-card .product-actions {
            opacity: 1 !important;
            display: flex !important;
            visibility: visible !important;
        }
        
        /* Override any hover states that might interfere */
        .product-card:hover .product-actions,
        .product-card:not(:hover) .product-actions {
            opacity: 1 !important;
            display: flex !important;
        }
    }
    
    /* ===================================
       WISHLIST MODAL - BETTER IMAGE DISPLAY ON MOBILE
       =================================== */
    
    /* Override wishlist image styling for mobile to show complete images */
    html body #wishlistModal .wishlist-image {
        width: 100% !important;
        height: 200px !important;
        background: #f8f8f8 !important;
        border-radius: 8px 8px 0 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }
    
    /* Show complete image without cropping */
    html body #wishlistModal .wishlist-image img {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        border-radius: 0 !important;
    }
    
    /* Enhanced wishlist item layout for mobile */
    html body #wishlistModal .wishlist-item {
        flex-direction: column !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        background: white !important;
        margin-bottom: 15px !important;
    }
    
    /* Wishlist info section padding */
    html body #wishlistModal .wishlist-info {
        padding: 15px !important;
        background: white !important;
    }
    
    /* Product name styling */
    html body #wishlistModal .wishlist-info h4 {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin: 0 0 8px 0 !important;
        text-align: center !important;
    }
    
    /* Price styling */
    html body #wishlistModal .wishlist-info .price {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #7046B9 !important;
        text-align: center !important;
        margin: 0 0 15px 0 !important;
    }
    
    /* Action buttons full width on mobile */
    html body #wishlistModal .wishlist-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: auto !important;
    }
    
    html body #wishlistModal .btn-sm {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        text-align: center !important;
        justify-content: center !important;
    }
    
    /* Enhanced add to cart button */
    html body #wishlistModal .add-to-cart-from-wishlist {
        background: linear-gradient(135deg, #DAC2F5, #F4C2C2) !important;
        color: white !important;
        font-weight: 600 !important;
        border: none !important;
        box-shadow: 0 2px 8px rgba(218, 194, 245, 0.4) !important;
    }
    
    html body #wishlistModal .add-to-cart-from-wishlist:active {
        transform: translateY(1px) !important;
        box-shadow: 0 1px 4px rgba(218, 194, 245, 0.6) !important;
    }
    
    /* Remove button styling */
    html body #wishlistModal .remove-from-wishlist {
        background: #f8f9fa !important;
        color: #6c757d !important;
        border: 1px solid #dee2e6 !important;
    }
    
    html body #wishlistModal .remove-from-wishlist:active {
        background: #e9ecef !important;
        color: #495057 !important;
    }
    
    /* Modal grid for mobile */
    html body #wishlistModal .wishlist-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        margin-top: 15px !important;
    }
    
    /* Modal header adjustments */
    html body #wishlistModal .modal-header {
        padding: 20px 15px !important;
        text-align: center !important;
    }
    
    html body #wishlistModal .modal-header h2 {
        font-size: 1.4rem !important;
        margin-bottom: 5px !important;
    }
    
    html body #wishlistModal .modal-body {
        padding: 0 15px 20px 15px !important;
    }
    
    /* ABOUT PAGE SPECIFIC - Remove space after header */
    .about-hero {
        margin-top: -60px !important; /* Compensate for body padding-top */
        padding-top: 60px !important; /* Add padding back to maintain image display */
    }
    
    /* VALUES SECTION - Remove padding */
    .values-section {
        padding: 0 !important;
    }
    
    /* CONTACT PAGE SPECIFIC - Remove contact hero padding */
    .contact-hero {
        margin-top: -60px !important; /* Compensate for body padding-top */
        padding: 60px 0 0 0 !important; /* Remove original padding, add top space for header */
    }

    /* INFO PAGES WITH IMAGES - Same technique as about-hero to eliminate gap after header */
    .faq-hero,
    .shipping-hero,
    .returns-hero,
    .sweet-box-hero,
    .bow-gifts-hero {
        margin-top: -60px !important;
        padding-top: 60px !important;
    }

    /* INFO PAGES - Mobile hero images */
    .faq-hero {
        background-image: url('../img/faqs-mobile.jpeg') !important;
    }

    .shipping-hero {
        background-image: url('../img/shipping-mobile.jpeg') !important;
    }

    .returns-hero {
        background-image: url('../img/returns-mobile.jpeg') !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: 30px !important;
    }
    
    /* MAIN FOOTER - Small top padding for visual breathing space */
    .main-footer {
        padding-top: 30px !important;
    }
}