/**
 * 101 Storefront Polish - v4.5.1
 *
 * Fixes:
 *   1. Header bottom border removed cleanly on static + sticky states.
 *      No more pseudo-element hiding (which broke the desktop sticky layout
 *      in v1.0.1).
 *   2. 16px right padding on the mobile Featured Products tab strip.
 *   3. Product card gallery: absolute-positioned slides with opacity
 *      crossfade. Bypasses Motta's Swiper transform entirely.
 */

/* =========================================================
 * FIX 1 - Header bottom border removal (static + sticky)
 * ========================================================= */

:root {
    --mt-header-border-color: transparent !important;
}

/* Border + box-shadow removal on row-level containers only. */

/* Static-state row containers */
header#site-header,
header#site-header > .header-v4,
header#site-header .site-header__desktop,
header#site-header .site-header__mobile,
header#site-header .header-v4 .header-mobile-main,
header#site-header .header-v4 .header-main,
header#site-header .header-v4 .header-bottom,
header#site-header .header-v4 .header-top,
header#site-header .header-mobile-main,
header#site-header .header-main,
header#site-header .header-bottom,
header#site-header .header-top,

/* Sticky-state classes */
.header-mobile-sticky,
.header-desktop-sticky,
.header-sticky,
.header-sticky--normal,
.motta-header-sticky,
.motta-header-sticky.header-sticky--normal,
header#site-header .header-mobile-sticky,
header#site-header .header-desktop-sticky,
header#site-header .header-sticky,
header#site-header .motta-header-sticky,
header#site-header .site-header__desktop.motta-header-sticky,
header#site-header .site-header__mobile.motta-header-sticky,

/* Minimised header */
#site-header-minimized,
#site-header-minimized .header-v4,
#site-header-minimized .header-mobile-main,
#site-header-minimized .header-main,
#site-header-minimized .header-bottom,
#site-header-minimized .header-mobile-sticky,
#site-header-minimized .header-desktop-sticky {
    border-bottom: 0 !important;
    border-bottom-width: 0 !important;
    border-bottom-color: transparent !important;
    border-bottom-style: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* Pseudo-elements on row containers */
header#site-header .header-mobile-main::after,
header#site-header .header-mobile-main::before,
header#site-header .header-main::after,
header#site-header .header-main::before,
header#site-header .header-bottom::after,
header#site-header .header-bottom::before,
header#site-header .site-header__desktop::after,
header#site-header .site-header__desktop::before,
header#site-header .site-header__mobile::after,
header#site-header .site-header__mobile::before,
.header-mobile-sticky::after,
.header-mobile-sticky::before,
.header-desktop-sticky::after,
.header-desktop-sticky::before,
.header-sticky::after,
.header-sticky::before {
    border-bottom: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* =========================================================
 * FIX 2 - Mobile Featured Products tab strip right padding
 * ========================================================= */
@media (max-width: 767px) {
    .motta-product-tabs,
    .motta-product-tabs .tabs,
    .motta-product-tabs .motta-tabs,
    .motta-product-tabs nav,
    .motta-tabs.motta-product-tabs__tabs {
        padding-right: 16px !important;
        scroll-padding-right: 16px !important;
        box-sizing: border-box !important;
    }
    .motta-product-tabs .tabs::after,
    .motta-product-tabs .motta-tabs::after,
    .motta-product-tabs nav::after {
        content: '';
        display: inline-block;
        flex: 0 0 16px;
        width: 16px;
        height: 1px;
    }
}

/* =========================================================
 * FIX 3 - Product card gallery (opacity crossfade)
 * ========================================================= */

/* Slider container — position context for absolute slides */
ul.products li.product .product-thumbnail.sp101-ready,
ul.products li.product .product-thumbnail.sp101-ready .product-thumbnails-slider,
ul.products li.product .product-thumbnail.sp101-ready .swiper-container {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 8px !important;
}

/* Wrapper holds the stack */
ul.products li.product .product-thumbnail.sp101-ready .swiper-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    transition: none !important;
    display: block !important;
    aspect-ratio: 1 / 1;
}

/* Every slide stacks absolutely; opacity controls visibility */
ul.products li.product .product-thumbnail.sp101-ready .swiper-wrapper > .swiper-slide,
ul.products li.product .product-thumbnail.sp101-ready .swiper-wrapper > a.swiper-slide,
ul.products li.product .product-thumbnail.sp101-ready .swiper-wrapper > .swiper-slide.swiper-slide-active,
ul.products li.product .product-thumbnail.sp101-ready .swiper-wrapper > .swiper-slide.swiper-slide-next,
ul.products li.product .product-thumbnail.sp101-ready .swiper-wrapper > .swiper-slide.swiper-slide-prev {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 0 !important;
    visibility: visible !important;
    transition: opacity 0.35s ease !important;
    z-index: 1 !important;
    pointer-events: none !important;
    display: block !important;
}

/* Active slide */
ul.products li.product .product-thumbnail.sp101-ready .swiper-wrapper > .swiper-slide.sp101-active,
ul.products li.product .product-thumbnail.sp101-ready .swiper-wrapper > a.swiper-slide.sp101-active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

/* Force images visible regardless of Motta/Swiper visibility logic */
ul.products li.product .product-thumbnail.sp101-ready .swiper-wrapper > .swiper-slide img,
ul.products li.product .product-thumbnail.sp101-ready .swiper-wrapper > a.swiper-slide img {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Images fill the slide */
ul.products li.product .product-thumbnail.sp101-ready .swiper-slide a,
ul.products li.product .product-thumbnail.sp101-ready .swiper-slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 8px !important;
}

ul.products li.product .product-thumbnail.sp101-ready .swiper-slide img {
    object-fit: cover !important;
    object-position: center !important;
}

/* Cap visible slides at 5 (CSS belt; JS removes the extras from DOM) */
ul.products li.product .product-thumbnail.sp101-ready .swiper-wrapper > .swiper-slide:nth-child(n+6) {
    display: none !important;
}

/* Pagination dots */
ul.products li.product .product-thumbnail .sp101-dots {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    pointer-events: auto;
    transition: opacity 0.25s ease;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

ul.products li.product .product-thumbnail .sp101-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.08);
    opacity: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

ul.products li.product .product-thumbnail .sp101-dot.is-active {
    background: #06B18F;
    border-color: #06B18F;
    transform: scale(1.15);
}

/* Hide Motta's native swiper-pagination on managed cards */
ul.products li.product .product-thumbnail.sp101-ready .swiper-pagination {
    display: none !important;
}

/* Desktop: dots fade in on hover */
@media (min-width: 768px) {
    ul.products li.product .product-thumbnail .sp101-dots {
        opacity: 0;
    }
    ul.products li.product:hover .product-thumbnail .sp101-dots {
        opacity: 1;
    }
}

/* Mobile: dots always visible */
@media (max-width: 767px) {
    ul.products li.product .product-thumbnail .sp101-dots {
        opacity: 1;
    }
}

/* Single-image products — no dots */
ul.products li.product .product-thumbnail.sp101-single .sp101-dots {
    display: none !important;
}

/* =========================================================
 * FIX 4 - Product card color swatches
 * ========================================================= */
ul.products li.product .sp101-card-swatches {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 4px 0 0;
    min-height: 16px;
    width: 100%;
    flex: 0 0 100%;
}

ul.products li.product .sold-by-meta.show-attributes,
ul.products li.product .sold-by-meta,
ul.products li.product .product-summary-show-vendor,
ul.products li.product .product-summary-show-vendor .sold-by-meta.show-attributes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

ul.products li.product .sold-by-meta.show-attributes > a,
ul.products li.product .sold-by-meta > a,
ul.products li.product .product-summary-show-vendor a[href*="/store/"],
ul.products li.product .product-summary-show-vendor a[href*="/vendor/"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    flex: 0 1 auto;
}

ul.products li.product .sold-by-meta.show-attributes > a .vendor-name,
ul.products li.product .sold-by-meta > a .vendor-name,
ul.products li.product .product-summary-show-vendor .vendor-name {
    display: inline;
    min-width: auto;
    white-space: normal;
}

ul.products li.product .sp101-card-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

ul.products li.product .sp101-card-swatch-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 1px solid rgba(17, 24, 39, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
}

ul.products li.product .sp101-card-swatch-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
}