/* Product Short List Block - Content Layout Styles */

/* Content row - container for slider and outside arrows */
.product-short-list-block__content-row {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

/* Content wrapper */
.product-short-list-block__content-wrapper {
    flex: 1 1 0;
    width: 100%;
    position: relative;
    min-width: 0;
}

/* Slider container */
.product-short-list-block__slider {
    width: 100%;
    position: relative;
    overflow: hidden;
    height: auto;
    min-height: 0;
}

.product-short-list-block__slider.single-slide {
    overflow: visible;
}

/* Arrows blocks for outside positioning */
.product-short-list-block__arrows-block {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-short-list-block__arrows-block--left {
    order: 1;
}

.product-short-list-block__arrows-block--right {
    order: 3;
}

/* Content wrapper order */
.product-short-list-block__content-wrapper {
    order: 2;
}

/* Arrows positioning */
.product-short-list-block__arrows--outside {
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-short-list-block__arrows--inside {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.product-short-list-block__arrows--inside-left {
    left: 20px;
}

.product-short-list-block__arrows--inside-right {
    right: 20px;
}

.product-short-list-block__arrows--inside .product-short-list-block__arrow {
    pointer-events: auto;
}

/* Slides container */
.product-short-list-block__slides {
    width: 100%;
    position: relative;
    height: auto;
    min-height: 0;
}

.product-short-list-block__slide {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 0;
    height: auto;
    min-height: 0;
}

/* Hide all slides except first until slick is initialized */
.product-short-list-block__slides:not(.slick-initialized) .product-short-list-block__slide:not(:first-child) {
    display: none !important;
}

.product-short-list-block__slides:not(.slick-initialized) .product-short-list-block__slide:first-child {
    display: block;
}

/* Hide extra items on slide until JS initializes adaptive columns */
.product-short-list-block__grid:not([style*="grid-template-columns"]) .product-short-list-block__item {
    display: none !important;
}

/* Show only first 4 items by default (desktop default) until JS sets proper columns */
.product-short-list-block__grid:not([style*="grid-template-columns"]) .product-short-list-block__item:nth-child(-n+4) {
    display: block !important;
}

/* Limit slider height before JS initialization to prevent layout shift */
.product-short-list-block__slider:not(.slick-initialized) {
    max-height: 1000px;
    overflow: hidden;
}

/* Ensure images are constrained before JS initialization */
.product-short-list-block__slider:not(.slick-initialized) .product-short-list-block__image {
    max-height: 50vh;
}

.product-short-list-block__slide--placeholder {
    opacity: 0.3;
}

.product-short-list-block__slide-content {
    width: 100%;
}

.product-short-list-block__grid {
    display: grid;
    /* grid-template-columns, grid-template-rows and gap are set inline */
    gap: 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    grid-auto-flow: row;
    align-items: start;
    height: auto;
    min-height: 0;
}

/* Card styles moved to card.css */
.product-short-list-block__card--placeholder {
    aspect-ratio: var(--aspect-ratio, 0.846);
    background-color: var(--wp--preset--color--neutral-100);
    border-radius: 12px;
    overflow: hidden;
}

.product-short-list-block__card-inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.02) 100%);
}