/* === global-fixes.css ===
 * Combined from header-inline.css + functions-inline.css
 * Enqueued globally via functions.php
 */

/* === From header-inline.css === */
/* CRITICAL FIX FOR VIDEO HOVER */
.video-hover-wrap {
    position: relative !important;
    display: block !important;
    padding-bottom: 56.25% !important; /* 16:9 aspect ratio */
    overflow: hidden !important;
    background: #000 !important;
}

.video-hover-wrap img,
.video-hover-wrap video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Fix 1x1 images */
.video-hover-wrap img[width="1"] {
    width: 100% !important;
    height: 100% !important;
}

.video-box {
    position: relative !important;
}

.video-info {
    margin-top: 10px !important;
}

@media only screen and (max-width: 768px) {
    #videoGrid.video-grid { display: block !important; }
    #videoGrid .video-box { display: block !important; width: 100% !important; margin-bottom: 20px !important; }
}


/* === From functions-inline.css === */
/* === Mobile Product Layout Fix (was functions.php lines 1251-1332) === */
        @media (max-width: 768px) {
            /* Create mobile actions bar above related videos */
            .mobile-actions-bar {
                display: block;
                width: 100%;
                padding: 20px 15px;
                margin: 30px 0 20px 0;
                background: rgba(255,255,255,0.05);
                border-top: 1px solid rgba(255,255,255,0.2);
                border-bottom: 1px solid rgba(255,255,255,0.2);
                border-radius: 8px;
            }

            /* Hide original metadata pills on mobile - STRONGER SELECTORS */
            .product-info-column .metadata-pills .categories-wrapper,
            .product-info-column .featuring-section,
            .metadata-pills .categories-wrapper,
            .categories-wrapper,
            .metadata-pill.categories {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
                height: 0 !important;
                overflow: hidden !important;
            }

            /* Mobile section styling */
            .mobile-section-header {
                font-size: 14px;
                color: #ccc;
                font-weight: 600;
                text-align: center;
                margin-bottom: 10px;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

            .mobile-buttons-container {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 8px;
                margin-bottom: 15px;
            }

            .mobile-category-btn,
            .mobile-model-btn {
                display: inline-block;
                padding: 10px 16px;
                text-decoration: none;
                border-radius: 20px;
                font-size: 13px;
                font-weight: 500;
                transition: all 0.3s ease;
                text-align: center;
                min-width: 60px;
            }

            .mobile-category-btn {
                background: #ec1b61;
                color: white;
            }

            .mobile-category-btn:hover {
                background: #d0185a;
                transform: translateY(-2px);
            }

            .mobile-model-btn {
                background: rgba(255,255,255,0.15);
                color: #ccc;
                border: 1px solid rgba(255,255,255,0.2);
            }

            .mobile-model-btn:hover {
                background: white;
                color: black;
                border-color: white;
            }
        }

/* === Mobile Search Reorder (was functions.php lines 1369-1473) === */
        @media (max-width: 768px) {
            /* Hide search in header on mobile - stronger selectors */
            .cfv-fixed-header .cfv-header-search,
            .single-product .cfv-fixed-header .cfv-header-search,
            body.single-product .cfv-fixed-header .cfv-header-search {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
                height: 0 !important;
                overflow: hidden !important;
            }

            /* Stack mobile layout vertically */
            .single-product .product-main-layout {
                flex-direction: column !important;
            }

            .single-product .video-column,
            .single-product .product-info-column {
                width: 100% !important;
                max-width: 100% !important;
            }

            /* Show mobile banner and search section */
            .mobile-banner-and-search {
                display: block !important;
                width: 100% !important;
                margin: 20px 0 !important;
            }

            /* Style the banner */
            .mobile-banner-and-search .cfv-custom-banner-wrap {
                margin-bottom: 20px !important;
            }

            .mobile-banner-and-search .cfv-custom-banner-wrap img {
                width: 100% !important;
                height: auto !important;
                border-radius: 8px !important;
            }

            /* Style the mobile search section */
            .mobile-search-section {
                display: block !important;
                width: 100% !important;
                padding: 25px 15px !important;
                margin: 0 !important;
                background: rgba(255,255,255,0.05) !important;
                border-top: 2px solid #ec1b61 !important;
                border-bottom: 2px solid #ec1b61 !important;
                border-radius: 8px !important;
                text-align: center !important;
            }

            /* Make search elements full width and vertical */
            .mobile-search-section .advanced-search-container {
                width: 100% !important;
                max-width: none !important;
            }

            .mobile-search-section .search-row {
                display: flex !important;
                flex-direction: column !important;
                gap: 15px !important;
                align-items: center !important;
            }

            .mobile-search-section .compact-filter-container,
            .mobile-search-section .compact-search-container {
                width: 100% !important;
                max-width: 320px !important;
            }

            .mobile-search-section .search-field,
            .mobile-search-section .search-button,
            .mobile-search-section .filter-dropdown {
                width: 100% !important;
                padding: 16px !important;
                font-size: 16px !important;
                border-radius: 8px !important;
            }

            .mobile-search-section .search-button {
                background: #ec1b61 !important;
                color: white !important;
                font-weight: 600 !important;
                border: none !important;
            }

            .mobile-search-section .search-field,
            .mobile-search-section .filter-dropdown {
                background: rgba(0,0,0,0.3) !important;
                border: 1px solid rgba(255,255,255,0.3) !important;
                color: white !important;
            }
        }

        @media (min-width: 769px) {
            /* Hide mobile banner and search section on desktop */
            .mobile-banner-and-search {
                display: none !important;
            }
        }

/* === Mobile Actions 100% Width (was functions.php lines 1482-1550) === */
        @media (max-width: 768px) {
            /* Style mobile actions bar */
            .mobile-actions-bar {
                display: block !important;
                width: 100% !important;
                padding: 20px 15px !important;
                margin: 20px 0 !important;
                background: rgba(255,255,255,0.05) !important;
                border-top: 1px solid rgba(255,255,255,0.2) !important;
                border-bottom: 1px solid rgba(255,255,255,0.2) !important;
                border-radius: 8px !important;
            }

            .mobile-section-header {
                font-size: 16px !important;
                color: white !important;
                font-weight: 700 !important;
                text-align: center !important;
                margin-bottom: 15px !important;
                text-transform: uppercase !important;
                letter-spacing: 1px !important;
            }

            .mobile-buttons-container {
                display: block !important;
                width: 100% !important;
                margin-bottom: 20px !important;
            }

            .mobile-category-btn,
            .mobile-model-btn {
                display: block !important;
                width: 100% !important;
                padding: 16px 20px !important;
                text-decoration: none !important;
                border-radius: 8px !important;
                font-size: 16px !important;
                font-weight: 600 !important;
                transition: all 0.3s ease !important;
                text-align: center !important;
                margin-bottom: 12px !important;
                box-sizing: border-box !important;
            }

            .mobile-category-btn {
                background: #ec1b61 !important;
                color: white !important;
                border: none !important;
            }

            .mobile-category-btn:hover {
                background: #d0185a !important;
                transform: translateY(-2px) !important;
            }

            .mobile-model-btn {
                background: rgba(255,255,255,0.1) !important;
                color: #ddd !important;
                border: 2px solid rgba(255,255,255,0.3) !important;
            }

            .mobile-model-btn:hover {
                background: rgba(255,255,255,0.2) !important;
                border-color: rgba(255,255,255,0.5) !important;
                color: white !important;
            }
        }

/* === Footer Fix (was functions.php lines 1352-1354) === */
    .site-footer .footer-bottom{text-align:center!important;display:flex!important;flex-direction:column!important;align-items:center!important}

/* === Age Overlay (was functions.php lines 2165-2201) === */
      #cfv-age-overlay[hidden]{display:none;}
      #cfv-age-overlay{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;}
      .cfv-age-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);}
      .cfv-age-panel{
        position:relative;z-index:1;
        width:min(92vw,560px);
        background:rgba(17,17,17,.92);color:#fff;
        border-radius:18px;padding:28px 24px;
        box-shadow:0 10px 40px rgba(0,0,0,.5);
        transform:translateY(10px);opacity:0;
        transition:transform .28s ease,opacity .28s ease;
      }
      #cfv-age-overlay.is-visible .cfv-age-panel{transform:translateY(0);opacity:1;}

      .cfv-age-logo{
        display:block;
        max-width:400px;max-height:150px;
        margin:0 auto 16px;object-fit:contain;
      }
      .cfv-age-title{text-align:center;font:700 26px/1.3 system-ui,sans-serif;color:#fff;margin:0 0 12px;}
      .cfv-age-desc{text-align:center;font:16px/1.5 system-ui,sans-serif;margin:0 0 18px;opacity:.9;}
      .cfv-age-actions{display:flex;gap:14px;justify-content:center;align-items:center;}
      .cfv-age-btn{
        cursor:pointer;border:0;border-radius:12px;padding:12px 18px;
        font:700 16px/1 system-ui,sans-serif;
        background:#EC1B61;color:#fff;
      }
      .cfv-age-leave{color:#ddd;text-decoration:underline;font:14px/1.2 system-ui,sans-serif;}

      /* 🔥 universal blur rule — blurs everything except overlay */
      .cfv-blur-underlay body > *:not(#cfv-age-overlay) {
        filter: blur(6px);
        transition: filter 0.3s ease;
      }
      html.cfv-blur-underlay { overflow: hidden; }


/* === Front page category grid === */
.video-carousel-section .cfv-cat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}
.video-carousel-section .cfv-cat-grid .grid-item {
    width: 100% !important;
}
.video-carousel-section .video-title {
    text-align: center;
    text-transform: uppercase;
    font-family: 'Futura', 'Trebuchet MS', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
}
@media (max-width: 992px) {
    .video-carousel-section .cfv-cat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}