/* === AREAAL Gallery Layout Fix v1.2.2 ===
 *
 * Forces horizontal thumbnails BELOW the main product image, overriding
 * Porto's full_width.css which absolutely-positions .product-thumbnails as
 * a vertical overlay.
 *
 * v1.2.2 changes vs v1.2.1:
 *   - Dropped position:static !important from wrapper rules 1+2. Porto's
 *     .pin-wrapper sticky scroll relies on the descendant chain having no
 *     overrides; forcing static on the gallery containers was killing the
 *     sticky behaviour on the PDP. Only Rule 3 (.product-thumbnails) keeps
 *     position:static, which is the actual fix for the absolute overlay.
 *   - Added a defensive Rule 9 to pin the active-menu underline pseudo to
 *     1px (Porto's theme.css declares 3px on the same selector with later
 *     declaration order, so the existing 1px-RUCSS-cached rule was losing
 *     the cascade — !important pins it).
 *
 * Loaded as enqueued stylesheet (not inline <style>) so WP Rocket RUCSS
 * keeps the rules during used-CSS analysis.
 */


/* 1. Force the gallery wrapper to stack vertically (image on top, thumbs below) */
/*    DO NOT touch position — that breaks .pin-wrapper sticky scroll. */
.single-product .product-layout-full_width .product-media,
.single-product .product-media,
.single-product .woocommerce-product-gallery.images,
.single-product .woocommerce-product-gallery__wrapper {
    display: block !important;
    width: 100% !important;
    float: none !important;
}

/* 2. Main image full width — DO NOT touch position. */
.single-product .woocommerce-main-thumb,
.single-product .woocommerce-product-gallery__image,
.single-product .pin-wrapper > a:first-child {
    width: 100% !important;
    float: none !important;
    display: block !important;
}

/* 3. Thumbnail strip — NO ancestor requirement, target the class directly */
.single-product .product-thumbnails {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    margin: 15px 0 0 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    transform: none !important;
    z-index: auto !important;
    overflow: visible !important;
}

/* 4. Inner container — horizontal flex */
.single-product .product-thumbnails-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    transform: none !important;
}

/* 5. Each thumb — explicit width, no float, no vertical stacking */
.single-product .product-thumbnails-inner > * {
    flex: 0 0 90px !important;
    width: 90px !important;
    height: 90px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
}

.single-product .product-thumbnails-inner .img-thumbnail,
.single-product .product-thumbnails-inner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 2px !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
}

/* 6. Active thumb highlight */
.single-product .product-thumbnails-inner .current .img-thumbnail,
.single-product .product-thumbnails-inner .active .img-thumbnail,
.single-product .product-thumbnails-inner > .current,
.single-product .product-thumbnails-inner > .active,
.single-product .product-thumbnails-inner > .selected,
.single-product .product-thumbnails-inner .img-thumbnail.selected,
.single-product .product-thumbnails-inner .img-thumbnail.current,
.single-product .product-thumbnails-inner .img-thumbnail.active {
    border: 2px solid #222 !important;
}

/* 7. Mobile */
@media (max-width: 768px) {
    .single-product .product-thumbnails-inner > * {
        flex: 0 0 70px !important;
        width: 70px !important;
        height: 70px !important;
    }
}

/* 8. Hide the horizontal scrollbar visually but keep scroll functional */
.single-product .product-thumbnails-inner {
    scrollbar-width: none !important;          /* Firefox */
    -ms-overflow-style: none !important;       /* IE/old Edge */
}
.single-product .product-thumbnails-inner::-webkit-scrollbar {
    display: none !important;                  /* Chrome, Safari, new Edge */
    width: 0 !important;
    height: 0 !important;
}


/* 9. Restore skinny 1px active-menu underline.
 *    Porto's theme.css declares the pseudo at 3px and the cached 1px rule
 *    loses the cascade. Pin to 1px on the original selector — narrowly
 *    scoped to .mega-menu.menu-hover-line so it can't bleed elsewhere. */
.mega-menu.menu-hover-line > li.menu-item > a::before,
.mega-menu.menu-hover-line > li.menu-item > a:before {
    height: 1px !important;
}


/* === Cart-badge defensive rule ===
 * QA across 7 shops x 2 viewports = 14 measurements just confirmed the
 * cart-items badge is currently rgb(34,37,41) (near-black) with white text
 * everywhere. The user reported a red transient state earlier — likely a
 * brief gap during WP Rocket RUCSS rebuild. This rule pins the canonical
 * Porto colour values explicitly so a future RUCSS rebuild that drops the
 * Porto rule cannot regress to red. Targets the actual element confirmed
 * by the diagnostic: span.cart-items.
 */
span.cart-items,
.minicart-icon .cart-items,
.cart-items-count,
.header-cart-count {
    background-color: rgb(34, 37, 41) !important;
    color: #ffffff !important;
}