/* ============================================================
   BSS Product Box — Minimal attribute styles
   Scoped to .bss-pbox product boxes
   ============================================================ */

/* Slider wrapper for scrollable attribute lists */
/*.bss-pbox .color-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.bss-pbox .color-slider-wrapper .slider-arrow {
    flex-shrink: 0;
    background: none;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 14px;
    color: #666;
}

.bss-pbox .color-slider-wrapper .slider-arrow:hover {
    border-color: #333;
    color: #333;
}*/

/* Shared attribute squares (color + image) */
/*.bss-pbox .attribute-squares {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    list-style: none;
    padding: 0;
    margin: 0;
    scrollbar-width: none;
}

.bss-pbox .attribute-squares::-webkit-scrollbar {
    display: none;
}*/

.bss-pbox .attribute-squares li {
    flex-shrink: 0;
    cursor: pointer;
}

.bss-pbox .attribute-squares li.selected-value .attribute-square-container {
    outline: 2px solid #333;
    outline-offset: 1px;
}

.bss-pbox .attribute-squares li.not-available .attribute-square-container::after {
    content: '';
    position: absolute;
    inset: 2px;
    background:
        linear-gradient(to top right, transparent 46%, rgba(180,0,0,0.5) 46%, rgba(180,0,0,0.5) 54%, transparent 54%),
        linear-gradient(to top left, transparent 46%, rgba(180,0,0,0.5) 46%, rgba(180,0,0,0.5) 54%, transparent 54%);
    pointer-events: none;
}

/* ============================================================
   ProductBox carousel controls — scoped class names so outer
   Swipers (e.g. Anywhere Carousel) cannot hijack them via
   descendant selectors or restyle them via cascading
   .swiper-pagination / .swiper-button-* rules.
   ============================================================ */

.bss-pbox .bss-pbox-pagination {
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 100%;
    text-align: center;
    z-index: 10;
    transition: 300ms opacity;
    transform: translate3d(0, 0, 0);
}

.bss-pbox .bss-pbox-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    background: #333;
    margin: 0 4px;
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.bss-pbox .bss-pbox-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
}

.bss-pbox .bss-pbox-button-next,
.bss-pbox .bss-pbox-button-prev {
    position: absolute;
    top: 50%;
    width: 27px;
    height: 44px;
    margin-top: -22px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.bss-pbox .bss-pbox-button-next.swiper-button-disabled,
.bss-pbox .bss-pbox-button-prev.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
}

.bss-pbox .bss-pbox-button-prev {
    left: 10px;
}

.bss-pbox .bss-pbox-button-next {
    right: 10px;
}

.bss-pbox .bss-pbox-button-prev::after,
.bss-pbox .bss-pbox-button-next::after {
    font-size: 20px;
    line-height: 1;
    color: #333;
}

.bss-pbox .bss-pbox-button-prev::after {
    content: "\2039";
}

.bss-pbox .bss-pbox-button-next::after {
    content: "\203A";
}

.bss-pbox .swiper-rtl .bss-pbox-button-prev::after {
    content: "\203A";
}

.bss-pbox .swiper-rtl .bss-pbox-button-next::after {
    content: "\2039";
}

/* Color squares */
/*.bss-pbox .attribute-squares.color-squares .attribute-square-container {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 3px;
}

.bss-pbox .attribute-squares.color-squares .attribute-square {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 3px;
}

.bss-pbox .attribute-squares.color-squares input[type="radio"] {
    position: absolute;
    opacity: 0;
}*/

/* Image squares */
/* 
.bss-pbox .attribute-squares.image-squares .attribute-square-container {
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.bss-pbox .attribute-squares.image-squares .attribute-square {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bss-pbox .attribute-squares.image-squares input[type="radio"] {
    position: absolute;
    opacity: 0;
}

/* Gaps between attribute type sections (color squares, image squares, radio lists) */
.bss-pbox .attributes-lists + .attributes-lists,
.bss-pbox .color-slider-wrapper + .color-slider-wrapper,
.bss-pbox .color-slider-wrapper + .attributes-lists,
.bss-pbox .attributes-lists + .color-slider-wrapper {
    margin-top: 4px;
}

/* Reduce excessive spacing on title and price */
.bss-pbox .details .product-title {
    margin-bottom: 0 !important;
}

.bss-pbox .add-info .prices {
    margin-bottom: 0 !important;
}

/* Gap between attributes and add-to-cart buttons */
.bss-pbox .buttons {
    margin-top: 6px;
}

/* Prevent Swiper fade-effect flicker on page load */
.bss-pbox-swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    opacity: 0;
}

/* Allow clicks on all fade-effect slides during transitions — every slide
   shares the same product href, so hitting any of them navigates correctly. */
.bss-pbox .swiper-fade .swiper-slide {
    pointer-events: auto !important;
}