/* ==========================================================================
   MOFAY RESPONSIVE BREAKPOINTS MEDIA QUERIES
   ========================================================================== */

/* Laptop / Large Tablets (max-width: 1199px) */
@media screen and (max-width: 1199px) {
    .mofay-category-grid-container {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .mofay-trust-badges-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .footer-widgets-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .hero-title {
        font-size: 2.8rem;
    }
}

/* Medium Tablets (max-width: 991px) */
@media screen and (max-width: 991px) {
    .hide-tablet {
        display: none !important;
    }
    
    .show-tablet {
        display: flex !important;
    }
    
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 20px;
    }
    
    .hero-badge-wrap, .hero-ctas {
        justify-content: center;
    }
    
    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-graphics-container {
        height: 300px;
        order: -1;
    }
    
    .parents-love-inner {
        grid-template-columns: 1fr;
    }
    
    .parents-love-graphic {
        order: -1;
    }
    
    .mofay-single-product-grid-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .mofay-cart-grid, .mofay-checkout-grid {
        grid-template-columns: 1fr;
    }
    
    .mofay-shop-grid-layout, .mofay-shop-layout-grid {
        grid-template-columns: 1fr;
    }
    
    /* display: none removed to support drawer overlays on mobile/tablet */
    
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .newsletter-inner {
        flex-direction: column;
        text-align: center;
    }
    
    .newsletter-form-wrap {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* Small Tablets / Mobiles (max-width: 767px) */
@media screen and (max-width: 767px) {
    html {
        font-size: 15px;
    }
    
    .hide-mobile {
        display: none !important;
    }
    
    .topbar-inner {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }
    
    .topbar-left, .topbar-right {
        justify-content: center;
        width: 100%;
    }
    
    .mofay-search-form-wrap {
        display: none; /* Hide main search bar on mobile headers, use drawer search */
    }
    
    .hero-title {
        font-size: 2.2rem;
    }
    
    .mofay-category-grid-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
        overflow-x: visible !important;
        padding-bottom: 0 !important;
    }
    .mofay-category-card {
        flex: 0 0 calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        min-width: 0 !important;
    }
    
    .mofay-trust-badges-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .minified-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mofay-benefits-list {
        grid-template-columns: 1fr;
    }
    
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    ul.products,
    .mofay-catalog-products-loop-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }
    
    .mofay-product-card-wrap {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }
    
    .mofay-product-card {
        padding: 10px 10px 12px !important;
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }
    
    .mofay-product-image-container {
        aspect-ratio: 3 / 4 !important;
        max-height: 180px !important;
        border-radius: 10px !important;
    }
    
    .mofay-product-card-content {
        padding: 6px 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
    }
    
    .product-card-category {
        font-size: 9px !important;
    }
    
    .mofay-card-badges-inline {
        gap: 4px !important;
        margin-bottom: 4px !important;
    }
    
    .badge-inline {
        font-size: 8px !important;
        padding: 1px 5px !important;
    }
    
    .product-card-title {
        font-size: 11px !important;
        line-height: 1.3 !important;
        min-height: 28px !important;
        margin-bottom: 4px !important;
    }
    
    .product-rating {
        margin-bottom: 4px !important;
    }
    
    .mofay-stars-display {
        font-size: 11px !important;
    }
    
    .product-price {
        font-size: 13px !important;
        margin-bottom: 6px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 4px 6px !important;
    }
    
    .mofay-price-discount-tag {
        margin-left: 2px !important;
    }
    
    .card-checkout-buttons {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }
    
    .card-btn-add {
        display: none !important;
    }
    
    .card-btn-buy, .btn-whatsapp-order-card {
        padding: 6px 8px !important;
        font-size: 10px !important;
        height: auto !important;
        border-radius: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    

    .footer-widgets-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .copyright-inner {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .mofay-cart-actions {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .mofay-coupon-box {
        flex-direction: column;
    }
    
    .mofay-whatsapp-floating-wrap,
    #mofay-whatsapp-floating,
    .mofay-whatsapp-floating-btn {
        display: none !important;
    }
    
    .mofay-back-to-top {
        bottom: 20px;
        left: 20px;
        width: 40px;
        height: 40px;
    }

    /* Responsive Table Scroll */
    .size-chart-wrapper,
    .woocommerce-product-details__short-description table,
    .entry-content table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Increase Touch Targets for Icons */
    .mofay-header-actions a,
    .mofay-header-actions button,
    .mofay-header-actions div {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Global Horizontal Scroll & Text Wrap Guards on Mobile */
    html, body {
        max-width: 100% !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    .site, #page, .site-content, main, article, section, div, p, span, a, h1, h2, h3, h4, h5, h6 {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Force word wrap on headers and long words */
    h1, h2, h3, h4, h5, h6, p, a, span, li, td, th {
        word-wrap: break-word !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Ensure all images and tables scale down nicely */
    img, table, iframe, video {
        max-width: 100% !important;
    }
}

/* ============================================================
   LANDSCAPE MOBILE OVERFLOW FIXES
   ============================================================ */
@media screen and (max-height: 520px) and (max-width: 900px) {
    /* GLOBAL OVERFLOW PREVENTION */
    html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 100vh !important;
    }
    
    .site, #page, .site-content {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    /* Force all containers to respect viewport */
    .mofay-container,
    .mofay-container-fluid,
    .woocommerce,
    .woocommerce-page {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Prevent any element from causing overflow */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Tables scroll horizontally if needed (EXCEPT checkout review order table) */
    .woocommerce-table,
    .shop_table:not(.woocommerce-checkout-review-order-table),
    .mofay-cart-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .woocommerce-checkout-review-order-table {
        display: table !important;
        width: 100% !important;
        table-layout: fixed !important;
        overflow: hidden !important;
    }

    /* ===== HERO SECTION ===== */
    .mofay-hero-section {
        padding: 15px 0 !important;
        min-height: auto !important;
    }
    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .hero-graphics-container {
        height: 160px !important;
    }
    .hero-collage-container {
        height: 140px !important;
    }
    .collage-pirate {
        height: 120px !important;
    }
    .collage-bg-circle {
        width: 120px !important;
        height: 120px !important;
    }
    .hero-title {
        font-size: 1.3rem !important;
        margin-bottom: 5px !important;
    }
    .hero-subtitle {
        font-size: 0.75rem !important;
        margin-bottom: 8px !important;
    }
    .hero-badge-wrap {
        margin-bottom: 5px !important;
    }
    .hero-badge, .hero-badge-tag {
        font-size: 0.55rem !important;
        padding: 2px 8px !important;
    }
    .hero-ctas .btn-mofay-primary,
    .hero-ctas .btn-mofay-secondary {
        padding: 4px 12px !important;
        font-size: 0.7rem !important;
    }

    /* ===== HEADER ===== */
    .mofay-topbar {
        padding: 2px 0 !important;
        font-size: 0.6rem !important;
    }
    .topbar-inner {
        gap: 2px !important;
    }
    .topbar-left, .topbar-right {
        gap: 8px !important;
    }
    .mofay-header-main {
        padding: 3px 0 !important;
    }
    .header-inner {
        gap: 8px !important;
    }
    .site-branding img {
        max-height: 25px !important;
    }
    .mofay-navigation-bar {
        display: none !important;
    }

    /* ===== MOBILE MENU ===== */
    .mofay-mobile-menu-drawer {
        width: 240px !important;
        padding: 8px !important;
    }
    .mofay-mobile-menu-drawer .drawer-content {
        padding: 3px 0 !important;
    }
    .mobile-navigation li {
        margin-bottom: 5px !important;
    }
    .mobile-navigation a {
        font-size: 0.85rem !important;
    }
    .drawer-header {
        padding-bottom: 5px !important;
        margin-bottom: 5px !important;
    }
    .drawer-title {
        font-size: 0.9rem !important;
    }
    .drawer-close {
        font-size: 1rem !important;
    }

    /* ===== CATEGORY GRID MOBILE UI/UX FIX ===== */
    .mofay-category-grid-container {
    /* ===== CATEGORY GRID MOBILE UI/UX FIX (NO OVERLAY BOX) ===== */
    .mofay-category-grid-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 16px 12px !important;
        overflow-x: visible !important;
        padding-bottom: 0 !important;
    }
    .mofay-category-card {
        flex: 0 0 calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        min-width: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    .mofay-category-card .category-card-inner {
        padding: 0 !important;
        text-align: center !important;
    }
    .mofay-category-card .category-image-wrap {
        width: 95px !important;
        height: 95px !important;
        margin: 0 auto 8px auto !important;
    }
    .mofay-category-card .category-card-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        margin-bottom: 0 !important;
    }
    .category-action-text {
        font-size: 0.5rem !important;
    }

    /* ===== PRODUCT CARDS ===== */
    .mofay-catalog-products-loop-grid,
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .mofay-product-card {
        padding: 4px !important;
    }
    .mofay-product-image-container {
        aspect-ratio: 3 / 4 !important;
        max-height: 160px !important;
        border-radius: 8px !important;
    }
    .mofay-product-card-content {
        padding: 2px 4px !important;
    }
    .product-card-category {
        font-size: 8px !important;
    }
    .mofay-card-badges-inline {
        gap: 3px !important;
    }
    .badge-inline {
        font-size: 7px !important;
        padding: 1px 4px !important;
    }
    .product-card-title {
        font-size: 11px !important;
        min-height: 24px !important;
        margin-bottom: 2px !important;
    }
    .product-rating {
        margin-bottom: 2px !important;
    }
    .mofay-stars-display {
        font-size: 11px !important;
    }
    .product-price {
        font-size: 13px !important;
        margin-bottom: 3px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 4px 6px !important;
    }
    .card-btn-buy, .card-btn-add {
        padding: 3px 5px !important;
        font-size: 8px !important;
        border-radius: 4px !important;
    }
    .btn-whatsapp-order-card {
        padding: 3px 5px !important;
        font-size: 8px !important;
        border-radius: 4px !important;
    }

    /* ===== CART ===== */
    .mofay-cart-grid {
        gap: 10px !important;
    }
    .mofay-cart-table th,
    .mofay-cart-table td {
        padding: 4px 6px !important;
        font-size: 0.7rem !important;
    }
    .mofay-cart-table td.product-thumbnail img {
        width: 30px !important;
    }
    .quantity input.qty {
        width: 25px !important;
        font-size: 0.7rem !important;
    }
    .mofay-coupon-box input {
        padding: 3px 8px !important;
        font-size: 0.7rem !important;
    }
    .btn-apply-coupon, .btn-update-cart {
        padding: 3px 10px !important;
        font-size: 0.65rem !important;
    }
    .cart-trust-badges {
        display: none !important;
    }

    /* ===== CHECKOUT ===== */
    .mofay-checkout-grid {
        gap: 10px !important;
    }
    .mofay-checkout-page-wrapper {
        padding: 8px !important;
    }
    .woocommerce-checkout input[type="text"],
    .woocommerce-checkout input[type="email"],
    .woocommerce-checkout select {
        height: 30px !important;
        padding: 3px 8px !important;
        font-size: 0.7rem !important;
    }
    .woocommerce-checkout textarea {
        height: 60px !important;
        font-size: 0.7rem !important;
    }
    .woocommerce-checkout label {
        font-size: 0.7rem !important;
    }
    .woocommerce-checkout-review-order-table td {
        padding: 4px 6px !important;
        font-size: 0.7rem !important;
    }
    .woocommerce-checkout-review-order-table thead th {
        padding: 4px 6px !important;
        font-size: 0.65rem !important;
    }
    .woocommerce-checkout-review-order-table tr.order-total td {
        font-size: 1rem !important;
        padding: 6px 8px !important;
    }
    #payment {
        padding: 8px !important;
    }
    #payment ul.payment_methods li {
        margin-bottom: 8px !important;
        font-size: 0.75rem !important;
    }
    #payment div.payment_box {
        padding: 8px !important;
        font-size: 0.7rem !important;
    }
    .woocommerce-checkout #place_order {
        padding: 8px !important;
        font-size: 0.8rem !important;
    }

    /* ===== FOOTER ===== */
    .mofay-footer-main {
        padding: 15px 0 0 !important;
    }
    .footer-widgets-grid {
        gap: 10px !important;
        padding-bottom: 10px !important;
        grid-template-columns: 1fr !important;
    }
    .footer-widget-title {
        font-size: 0.8rem !important;
        margin-bottom: 5px !important;
    }
    .footer-links-list li {
        margin-bottom: 3px !important;
    }
    .footer-links-list a {
        font-size: 0.7rem !important;
    }
    .footer-contact-details li {
        font-size: 0.7rem !important;
        margin-bottom: 4px !important;
    }
    .footer-copyright-bar {
        padding: 6px 0 !important;
        font-size: 0.6rem !important;
    }
    .mofay-payment-gateways {
        font-size: 1rem !important;
        gap: 6px !important;
    }

    /* ===== NEWSLETTER ===== */
    .mofay-newsletter-section-global {
        padding: 10px 0 !important;
    }
    .newsletter-title {
        font-size: 1rem !important;
    }
    .newsletter-subtitle {
        font-size: 0.7rem !important;
        margin-bottom: 3px !important;
    }
    .social-proof {
        font-size: 0.65rem !important;
    }
    .mofay-newsletter-form {
        padding: 2px !important;
        max-width: 280px !important;
    }
    .newsletter-input {
        padding: 4px 10px !important;
        font-size: 0.7rem !important;
    }
    .newsletter-submit-btn {
        padding: 4px 10px !important;
        font-size: 0.7rem !important;
    }

    /* ===== STICKY CTA ===== */
    .mofay-sticky-cta {
        padding: 3px 6px !important;
        height: 34px !important;
        border-top-width: 1px !important;
    }
    .sticky-title {
        font-size: 9px !important;
    }
    .sticky-price {
        font-size: 11px !important;
    }
    .sticky-whatsapp {
        padding: 3px 8px !important;
        font-size: 10px !important;
        height: 24px !important;
        border-radius: 4px !important;
    }
    .sticky-info {
        flex-direction: row !important;
        gap: 4px !important;
        align-items: center !important;
    }
    .sticky-actions {
        gap: 4px !important;
    }

    /* ===== HIDE NON-ESSENTIAL ELEMENTS ===== */
    .mofay-why-parents-love-home,
    .mofay-trust-badges-home,
    .mofay-size-guide-home,
    .mofay-home-dual-ads,
    .mofay-promo-banners-section {
        padding: 20px 0 !important;
    }

    .mofay-section-title {
        font-size: 1.2rem !important;
        margin-bottom: 15px !important;
    }
    .mofay-section-title::after {
        width: 30px !important;
        height: 3px !important;
        margin-top: 6px !important;
    }

    .mofay-back-to-top {
        width: 30px !important;
        height: 30px !important;
        bottom: 10px !important;
        left: 10px !important;
        font-size: 0.8rem !important;
    }

    .mofay-side-drawer {
        width: 280px !important;
    }

    .checkout-product-thumbnail {
        width: 30px !important;
        height: 30px !important;
    }
    .checkout-product-title-text {
        font-size: 0.7rem !important;
    }
    .checkout-qty-wrapper {
        height: 20px !important;
    }
    .checkout-qty-btn {
        width: 18px !important;
        height: 18px !important;
        font-size: 0.6rem !important;
    }
    .checkout-qty-val {
        font-size: 0.6rem !important;
        padding: 0 4px !important;
    }
    .mofay-checkout-remove-item {
        font-size: 0.7rem !important;
        margin-left: 6px !important;
    }
}

/* ============================================================
   MOBILE PERFECT - NO IMAGE CROP
   ============================================================ */

@media screen and (max-width: 767px) {
    /* Force grid */
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .woocommerce .related.products ul.products,
    .woocommerce-page .related.products ul.products,
    ul.products.mofay-catalog-products-loop-grid,
    .mofay-catalog-products-loop-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 4px !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* Card wrapper */
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product,
    li.product.mofay-product-card-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        clear: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    /* Image - FULL VISIBILITY */
    .mofay-product-image-container {
        width: 100% !important;
        aspect-ratio: 3 / 4 !important;
        border-radius: 6px !important;
        overflow: hidden !important;
        background: #f5f5f5 !important;
        /* NO CROP */
        max-height: none !important;
        min-height: auto !important;
    }
    
    .mofay-product-image-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
        /* FULL VISIBILITY */
        max-width: 100% !important;
        max-height: 100% !important;
        min-height: 100% !important;
    }
    
    /* Content padding */
    .mofay-product-card-content {
        padding: 0 2px !important;
    }
    
    /* Fix overflow */
    .mofay-product-card {
        overflow: visible !important;
    }
}

/* ===== VERY SMALL PHONES ===== */
@media screen and (max-width: 350px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .woocommerce .related.products ul.products,
    .woocommerce-page .related.products ul.products,
    ul.products.mofay-catalog-products-loop-grid,
    .mofay-catalog-products-loop-grid {
        gap: 6px !important;
        padding: 0 2px !important;
    }
    
    .mofay-product-image-container {
        border-radius: 4px !important;
    }
    
    .product-card-title {
        font-size: 10px !important;
        min-height: 22px !important;
    }
    
    .product-price-row {
        font-size: 10px !important;
    }
    
    .btn-add-to-cart-loop {
        font-size: 8px !important;
        padding: 4px 6px !important;
    }
}