/* TABLET FORCE CSS - Load LAST to override everything for tablets */
/* This file MUST be loaded after all other CSS files */
/* Tablets: 768px to 1023px */

@media (min-width: 768px) and (max-width: 1023px) {
    /* 1. FORCE HEADER TOP - Remove top space and purple text color */
    body {
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
    }
    
    .header-top {
        margin-top: 0 !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        background: #f8f8f8 !important;
        position: relative !important;
        top: 0 !important;
    }
    
    /* Force ALL text in header-top to be purple */
    .header-top,
    .header-top *,
    .header-top a,
    .header-top span,
    .header-top p,
    .header-top div {
        color: #4b3c4e !important;
    }
    
    /* 2. FORCE MAIN HEADER - Horizontal layout */
    .main-header {
        position: fixed !important;
        width: 100% !important;
        z-index: 1000 !important;
        background: white !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    }
    
    .header-content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 !important; /* Remove ALL padding */
        height: 80px !important;
        background: white !important; /* Force white background */
        overflow: hidden !important; /* Hide scrollbar */
    }
    
    /* Force all elements in single row */
    .header-left,
    .header-right {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        padding: 0 20px !important; /* Move padding to individual sections */
    }
    
    /* Show mobile menu button and ensure it works - MAXIMUM PRIORITY */
    html body .mobile-menu-btn,
    body .mobile-menu-btn,
    .mobile-menu-btn,
    #mobileMenuBtn {
        display: flex !important;
        background: none !important;
        border: none !important;
        font-size: 24px !important;
        cursor: pointer !important;
        color: #333 !important;
        z-index: 10000 !important;
        pointer-events: auto !important;
        position: relative !important;
        width: 44px !important;
        height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Ensure hamburger icon is visible */
    .mobile-menu-btn i,
    #mobileMenuBtn i {
        display: block !important;
        pointer-events: none !important;
        font-size: 24px !important;
        color: #333 !important;
    }
    
    /* FORCE mobile menu to be HIDDEN by default - MAXIMUM SPECIFICITY */
    html body .mobile-menu,
    body .mobile-menu,
    .mobile-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 80% !important;
        max-width: 350px !important;
        height: 100vh !important;
        background: white !important;
        z-index: 9999 !important;
        box-shadow: 2px 0 25px rgba(0,0,0,0.15) !important;
        transition: left 0.3s ease !important;
    }
    
    /* ONLY show when explicitly activated */
    html body .mobile-menu.active,
    body .mobile-menu.active,
    .mobile-menu.active {
        left: 0 !important;
    }
    
    /* Show search button */
    .search-btn {
        display: block !important;
    }
    
    /* Center logo */
    .logo {
        order: 2 !important;
        margin: 0 auto !important;
    }
    
    .logo img {
        height: 60px !important;
        width: auto !important;
    }
    
    /* Right side icons */
    .wishlist-btn,
    .cart-btn {
        display: block !important;
        position: relative !important;
    }
    
    /* Show cart badge/count */
    .cart-count,
    .cart-badge,
    .badge {
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Ensure proper order: left (hamburger, search) - center (logo) - right (heart, cart) */
    .header-left {
        order: 1 !important;
    }
    
    .logo {
        order: 2 !important;
    }
    
    .header-right {
        order: 3 !important;
    }
    
    /* Hide desktop navigation */
    .main-nav {
        display: none !important;
    }
    
    /* Adjust body padding for fixed header */
    body {
        padding-top: 140px !important; /* header-top + main-header */
    }
    
    /* 3. HERO SECTION - 16:9 aspect ratio for tablets */
    .hero-section {
        margin-top: -20px !important;
        position: relative !important;
        width: 100vw !important;
        height: 56.25vw !important; /* 16:9 ratio */
        max-height: 432px !important; /* Cap at reasonable height for 768px width */
        min-height: 300px !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;
    }
    
    /* Force no rounded corners on any hero element */
    .hero-section,
    .hero-section *,
    .hero-slider,
    .hero-slider *,
    .hero-slide,
    .hero-slide * {
        border-radius: 0 !important;
    }
    
    /* 4. PRODUCTS GRID - Moderate padding */
    .products-section,
    .bestsellers-section {
        padding: 20px 10px !important;
    }
    
    .products-section .container,
    .bestsellers-section .container {
        padding: 0 10px !important;
        max-width: 100% !important;
    }
    
    .products-grid,
    #newArrivalsGrid,
    #bestsellersGrid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
        padding: 15px !important;
    }
    
    .product-card {
        padding: 0 !important;
        margin: 0 !important;
        background: white !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    .product-image {
        width: 100% !important;
        height: 280px !important;
        background: #f8f8f8 !important; /* Light background for square images */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px 8px 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: 8px 8px 0 0 !important;
    }
    
    .product-info {
        padding: 10px !important;
    }
    
    /* Show only name and price */
    .product-name,
    .product-title {
        font-size: 0.9rem !important;
        margin: 0 0 5px 0 !important;
        color: #333 !important;
    }
    
    .product-price,
    .price {
        font-size: 1.1rem !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 tablet */
    .add-to-cart,
    /* .product-badge, */    /* Etiqueta "Destacado" restaurada para tablet */
    .product-colors {
        display: none !important;
    }
    
    /* 5. FOOTER TEXT COLOR */
    .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 {
        color: #4b3c4e !important;
    }
    
    .footer-bottom,
    .footer-bottom * {
        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;
    }
    
    /* Ensure mobile menu works */
    .mobile-menu {
        z-index: 9999 !important;
    }
    
    /* MODERN MOBILE MENU DESIGN FOR TABLET */
    .mobile-menu {
        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 */
        left: -100% !important;
        width: 80% !important;
        max-width: 350px !important;
        height: 100vh !important;
        top: 0 !important;
        transform: translateX(0) !important;
        transition: left 0.3s ease !important;
        display: flex !important;
        flex-direction: column !important; /* Allow header and nav to stack */
    }
    
    .mobile-menu.active {
        left: 0 !important;
        transform: translateX(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 tablet */
    .footer-column:nth-child(2) {
        display: none !important;
    }
    
    /* ===================================
       PRODUCT ACTIONS - ALWAYS VISIBLE ON TABLET
       =================================== */
    
    /* Override desktop hover behavior - make product actions always visible on tablet */
    html body .product-card .product-actions {
        opacity: 1 !important;
        transform: translateX(0) !important;
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        z-index: 10 !important;
    }
    
    /* Action button styling for tablet touch */
    html body .product-card .action-btn {
        width: 36px !important;
        height: 36px !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: 14px !important;
        transition: all 0.3s ease !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* Action button hover/active state for tablet */
    html body .product-card .action-btn:active,
    html body .product-card .action-btn:focus,
    html body .product-card .action-btn:hover {
        background: #4b3c4e !important;
        color: white !important;
        transform: scale(1.1) !important;
        box-shadow: 0 4px 15px rgba(75, 60, 78, 0.3) !important;
    }
    
    /* Specific button colors for better UX on tablet */
    html body .product-card .wishlist-btn:active,
    html body .product-card .wishlist-btn:focus,
    html body .product-card .wishlist-btn:hover {
        background: #e91e63 !important;
        color: white !important;
    }
    
    html body .product-card .quick-view-btn:active,
    html body .product-card .quick-view-btn:focus,
    html body .product-card .quick-view-btn:hover {
        background: #2196f3 !important;
        color: white !important;
    }
    
    html body .product-card .quick-add-btn:active,
    html body .product-card .quick-add-btn:focus,
    html body .product-card .quick-add-btn:hover {
        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;
    }
    
    /* ===================================
       WISHLIST MODAL - BETTER IMAGE DISPLAY ON TABLET
       =================================== */
    
    /* Override wishlist image styling for tablet to show complete images */
    html body #wishlistModal .wishlist-image {
        width: 140px !important;
        height: 140px !important;
        background: #f8f8f8 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        flex-shrink: 0 !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 tablet */
    html body #wishlistModal .wishlist-item {
        display: flex !important;
        flex-direction: row !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
        background: white !important;
        margin-bottom: 15px !important;
        min-height: 140px !important;
    }
    
    /* Wishlist info section styling */
    html body #wishlistModal .wishlist-info {
        padding: 20px !important;
        background: white !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }
    
    /* Product name styling */
    html body #wishlistModal .wishlist-info h4 {
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin: 0 0 10px 0 !important;
        line-height: 1.3 !important;
    }
    
    /* Price styling */
    html body #wishlistModal .wishlist-info .price {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: #7046B9 !important;
        margin: 0 0 15px 0 !important;
    }
    
    /* Action buttons side by side on tablet */
    html body #wishlistModal .wishlist-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        margin-top: auto !important;
    }
    
    html body #wishlistModal .btn-sm {
        flex: 1 !important;
        padding: 10px 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 10px rgba(218, 194, 245, 0.4) !important;
    }
    
    html body #wishlistModal .add-to-cart-from-wishlist:hover,
    html body #wishlistModal .add-to-cart-from-wishlist:active {
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 15px 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:hover,
    html body #wishlistModal .remove-from-wishlist:active {
        background: #e9ecef !important;
        color: #495057 !important;
        transform: translateY(-1px) !important;
    }
    
    /* Modal grid for tablet */
    html body #wishlistModal .wishlist-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        margin-top: 20px !important;
    }
    
    /* Modal header adjustments */
    html body #wishlistModal .modal-header {
        padding: 25px 20px !important;
        text-align: center !important;
    }
    
    html body #wishlistModal .modal-header h2 {
        font-size: 1.6rem !important;
        margin-bottom: 8px !important;
    }
    
    html body #wishlistModal .modal-body {
        padding: 0 20px 25px 20px !important;
    }
    
    /* ABOUT PAGE SPECIFIC - Remove space after fixed header */
    .about-hero {
        margin-top: -140px !important; /* Compensate for fixed header height (header-top + header-main) */
        padding-top: 140px !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: -140px !important; /* Compensate for fixed header height */
        padding: 140px 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: -140px !important;
        padding-top: 140px !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: 40px !important;
    }
    
    /* MAIN FOOTER - Small top padding for visual breathing space */
    .main-footer {
        padding-top: 40px !important;
    }
}