/* CSS Overrides for Vanilla JS Interactive Fixes */

/* 1. Force Gallery Visibility & Reset */
.flickity-viewport {
    height: auto !important;
    min-height: 600px;
    overflow: visible !important;
    /* Allow arrows to be seen if strictly bound */
    position: relative !important;
    touch-action: pan-y;
}



/* 8. Remove Top Promo Block */
.free-shipping-bar {
    display: none !important;
}

/* 9. Fix Mobile Video Responsiveness */
@media (max-width: 767px) {
    .s-feature-spotlight.min-h-500-mobile {
        min-height: auto !important;
        padding-top: 56.25%;
        /* 16:9 Aspect Ratio placeholder space */
        position: relative;
    }

    /* Scope absolute positioning only to the video section */
    .s-feature-spotlight.min-h-500-mobile .s-feature-spotlight-content {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        z-index: 2;
        padding: 20px;
    }

    /* Reset for "For Every Cat" section to allow natural flow */
    .s-feature-spotlight.min-h-600-mobile {
        min-height: auto !important;
        padding-top: 0 !important;
        background-color: #000;
        /* Ensure black bg */
        display: block !important;
    }

    .s-feature-spotlight.min-h-600-mobile+.section-bg {
        display: block !important;
        position: relative !important;
        height: auto !important;
    }

    .s-feature-spotlight.min-h-600-mobile+.section-bg img {
        display: block !important;
        width: 100%;
        height: auto;
    }

    .s-feature-spotlight.min-h-600-mobile .s-feature-spotlight-content {
        position: relative !important;
        top: auto !important;
        transform: none !important;
        padding: 40px 20px !important;
        text-align: center;
    }

    .background-video-wrapper {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

    .background-html-video {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Fix for second video (Split Feature) */
    .s-feature-split-item-media .background-video-wrapper {
        position: relative !important;
        padding-top: 56.25%;
        height: 0 !important;
        width: 100% !important;
    }
}

.flickity-slider {
    position: relative !important;
    height: 600px !important;
    width: 100% !important;
    transform: none !important;
    /* Stop Flickity moving things */
}

.product-media-image {
    width: 100%;
    display: block !important;
    /* Opacity controlled by JS */
}

/* Ensure images fit nicely */
.product-media-image img {
    margin: 0 auto;
    display: block;
    max-height: 600px;
    width: auto;
    max-width: 100%;
}

/* 2. Custom Gallery Navigation */
.custom-gallery-nav {
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
}

.custom-gallery-nav:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1) !important;
    background: #fff !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* 3. Thumbnails */
.product-thumbnail-image {
    border: 2px solid transparent;
    /* Prepare for selection border */
    transition: border-color 0.2s;
}

.product-thumbnail-image.is-nav-selected {
    border-color: #37cd8f !important;
}

/* 4. FAQ Accordion Styling Fixes */
.s-faq-accordion.active [data-role="content"] {
    display: block !important;
}

/* 5. Tab Content Visibility */
.product-info-introduction-content [data-role="content"].hidden {
    display: none !important;
}

.product-info-introduction-content [data-role="content"]:not(.hidden) {
    display: block !important;
}

/* 6. Swatches Selected State */
.tiled-swatch-choice.selected {
    outline: 2px solid #37cd8f;
    border-color: #37cd8f;
}

/* 7. Center and Resize Logo */
@media (min-width: 768px) {
    .header-main {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .header-logo.desktop {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 50%;
        margin-top: -13px;
        /* Adjusted half-height */
        display: block !important;
        z-index: 100;
        float: none;
    }

    .header-logo.desktop img {
        width: 150px;
        /* Bigger by approx 30% from 114px */
        height: auto;
        max-width: none;
    }
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .header-main {
        position: relative;
        /* Ensure absolute positioning works separately from desktop */
    }

    .header-logo.mobile {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 50%;
        margin-top: -10px;
        /* Adjust based on logo height/2 */
        width: auto !important;
        /* Allow auto width */
        z-index: 100;
        display: block !important;
        text-align: center;
    }

    .header-logo.mobile img {
        width: 120px;
        /* Slightly smaller for mobile if needed, or keeping 130px */
        height: auto;
        max-width: none;
    }
}