/* Preserve the production filter component and its range/query behavior. */
.widget_wpc_filters_widget,
.widget_wpc_filters_widget *,
.widget_wpc_filters_widget *::before,
.widget_wpc_filters_widget *::after {
    box-shadow:none !important;
    text-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}
.widget_wpc_filters_widget :is(a,button,input):focus-visible {
    outline:2px solid var(--wd-primary-color,#0e2a47);
    outline-offset:2px;
}

/* Native category banners and information; no builder stylesheet required. */
body.ga-native-category #main-content { width:100%; max-width:none; padding:0 15px 40px; }
.ga-native-category .site-content > .term-description { margin:0 0 40px; }
.ga-native-category .product-grid-item,.ga-native-category .product-grid-item * { box-shadow:none!important; text-shadow:none!important; }
.ga-category-information { display:flow-root; padding:28px 0; color:var(--ga-text-secondary,#374151); line-height:1.75; }
.ga-category-information > h2 { color:#012244; font-size:28px; margin:10px 0 18px; }
.ga-category-image { float:right; width:280px; height:auto; max-width:30%; margin:25px 20px 25px 40px; object-fit:contain; }
.ga-category-intro { margin-bottom:20px; }
.ga-category-information .woocommerce-breadcrumb { font-size:13px; }
.ga-category-tabs { clear:both; width:100%; padding-top:20px; }
.ga-category-tab-list { display:flex; gap:0; overflow-x:auto; border-bottom:1px solid #dce3e9; }
.ga-category-tab-list [role=tab] { flex:0 0 auto; min-height:48px; border:0; border-bottom:3px solid transparent; padding:13px 25px; background:#fff; color:#333; font:600 15px/1.4 var(--wd-text-font,inherit); cursor:pointer; }
.ga-category-tab-list [aria-selected=true] { color:#012244; border-bottom-color:#012244; background:#f5f8fa; }
.ga-category-tab-panel { padding:25px 22px; border:1px solid #dce3e9; border-top:0; font-size:15px; line-height:1.8; }
.ga-category-tab-panel[hidden] { display:none!important; }
.ga-category-tab-panel :is(h2,h3,h4,h5) { color:#012244; margin-top:20px; }
.ga-category-tabs :is(button,[role=tabpanel]):focus-visible { outline:2px solid #012244; outline-offset:-3px; }
@media(max-width:767px) {
 .ga-native-category .site-content > .term-description { margin-bottom:25px; }
 .ga-category-tab-list [role=tab] { padding:12px 16px; font-size:14px; }.ga-category-tab-panel { padding:20px 16px; font-size:14px; }
 .ga-category-image { float:none; display:block; max-width:100%; width:200px; margin:10px auto 25px; }.ga-category-information > h2 { font-size:25px; }
}
@media(prefers-reduced-motion:reduce) { .ga-category-hero video { animation:none; } }

/* Category banner CSS supplied by the user. */
/* ----------------------------------------------------
   SHARED DESKTOP BANNER STYLES (>= 992px)
   Light off-white background, 60% shifted video on right with smooth gradient blend
---------------------------------------------------- */
.custom-gem-banner {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 55vh;
    min-height: 380px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #f8f9fa;
}

.custom-gem-video-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.custom-gem-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.20);
    object-position: center;
}

/* Seamless Gradient Mask */
.custom-gem-video-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #f8f9fa 0%, rgba(248, 249, 250, 0.6) 25%, rgba(248, 249, 250, 0.05) 55%, rgba(248, 249, 250, 0) 100%),
                linear-gradient(to bottom, rgba(248, 249, 250, 0.2) 0%, transparent 20%, transparent 80%, rgba(248, 249, 250, 0.2) 100%);
    z-index: 2;
}

.custom-gem-content-wrapper {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 0 6%;
    pointer-events: none;
}

.custom-gem-content {
    max-width: 600px;
    pointer-events: auto;
}

.custom-gem-serif-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.8rem;
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: 12px;
    color: #012244;
}

.custom-gem-small-text {
    font-size: 1.15rem;
    font-weight: 400;
    color: #012244;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.custom-gem-bold-tags {
    font-size: 1.3rem;
    font-weight: 600;
    color: #012244 !important;
    letter-spacing: 0.5px;
    line-height: 1.4;
}

/* ----------------------------------------------------
   RESPONSIVE TABLET & MOBILE VIEW (< 992px)
   Full bleed background video with dark bottom overlay and centered white text
---------------------------------------------------- */
@media (max-width: 991px) {
    .custom-gem-banner {
        width: 100vw;
        left: 50%;
        right: 50%;
        margin-top:-100px;
        margin-left: -50vw;
        margin-right: -50vw;
        height: 75vh;
        min-height: 350px;
        align-items: flex-end;
        justify-content: center;
    }

    .custom-gem-video-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        right: 0;
    }

    .custom-gem-video-bg video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: none;
    }

    /* Dark Overlay for Mobile */
    .custom-gem-video-bg::after {
        background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%);
    }

    .custom-gem-content-wrapper {
        padding: 0 20px 8%;
        max-width: 800px;
    }

    .custom-gem-content {
        text-align: center;
        max-width: 100%;
        color: #ffffff;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    }

    .custom-gem-serif-title {
        font-size: 2.2rem;
        color: #ffffff !important;
        margin-bottom: 15px;
        line-height: 1.2;
    }

    .custom-gem-small-text {
        font-size: 0.95rem;
        color: #ffffff !important;
        margin-bottom: 5px;
    }

    .custom-gem-bold-tags {
        font-size: 1rem;
        color: #ffffff !important;
        margin-bottom: 10px;
    }
}