/* Catalog filters and products. The category tiles and sidebar sit outside this scope. */
.elow-catalog-main {
    --elow-catalog-ink: #26354a;
    --elow-catalog-accent: #344d86;
    --elow-catalog-muted: #686d77;
    --elow-catalog-line: #e8e4de;
    --elow-catalog-control: #f8f7f5;
    --elow-catalog-hover: #f1efeb;
    --elow-catalog-selected: #edf1f7;
    --elow-catalog-selected-line: #d4ddeb;
    --elow-catalog-count-text: #fff;
    --elow-catalog-shadow: rgba(28, 41, 62, .045);
    --elow-catalog-shadow-raised: rgba(28, 41, 62, .09);
}

.dark-theme .elow-catalog-main {
    --elow-catalog-ink: #e4e8ef;
    --elow-catalog-accent: #bdcff2;
    --elow-catalog-muted: #abb4c2;
    --elow-catalog-line: #3c3f47;
    --elow-catalog-control: #282a30;
    --elow-catalog-hover: #33353d;
    --elow-catalog-selected: #333e53;
    --elow-catalog-selected-line: #536481;
    --elow-catalog-count-text: #202737;
    --elow-catalog-shadow: rgba(0, 0, 0, .16);
    --elow-catalog-shadow-raised: rgba(0, 0, 0, .23);
}

.elow-catalog-main .products-panel :is(.horizontal-filter__head, .category-sorting-m__head, .filter-button-m) {
    background-color: var(--elow-catalog-control);
    color: var(--elow-catalog-ink);
    border-radius: 9px;
    box-shadow: inset 0 0 0 1px var(--elow-catalog-line);
}

.elow-catalog-main .products-panel :is(.horizontal-filter__item.open, .horizontal-filter__item.selected) > .horizontal-filter__head,
.elow-catalog-main .products-panel .category-sorting-m.open > .category-sorting-m__head,
.elow-catalog-main .products-panel .filter-button-m.selected,
.elow-catalog-main .products-panel .views-switch-m__item.selected,
.elow-catalog-main .products-panel .views-switch__bg {
    background-color: var(--elow-catalog-selected);
    color: var(--elow-catalog-accent);
    box-shadow: inset 0 0 0 1px var(--elow-catalog-selected-line);
}

.elow-catalog-main .products-panel .views-switch {
    border-color: var(--elow-catalog-line);
}

.elow-catalog-main .products-panel :is(.views-switch__item, .views-switch-m__item) {
    color: var(--elow-catalog-ink);
}

.elow-catalog-main .products-panel :is(.views-switch__item, .views-switch-m__item).selected {
    color: var(--elow-catalog-accent);
}

.elow-catalog-main .products-panel :is(.views-switch__item, .views-switch-m__item) rect {
    fill: currentColor;
}

.elow-catalog-main .products-panel .horizontal-filter__count,
.elow-catalog-main .products-panel .filter-button-m.selected::after {
    background-color: var(--elow-catalog-accent);
    color: var(--elow-catalog-count-text);
}

.elow-catalog-main .products-panel :is(.horizontal-filter__body-inner, .category-sorting-m__list) {
    box-shadow: 0 0 0 1px var(--elow-catalog-line), 0 8px 22px var(--elow-catalog-shadow-raised);
}

.elow-catalog-main #product-list .js-product:is(.product-tile, .product-mini-v, .product-mini-h, .product-book, .product-line) {
    box-shadow: 0 0 0 1px var(--elow-catalog-line), 0 4px 14px var(--elow-catalog-shadow);
}

.elow-catalog-main #product-list :is(.product-tile__name a, .product-mini-v__name a, a.product-mini-h__link, a.product-book__name, a.product-line__name) {
    color: var(--elow-catalog-ink);
}

.elow-catalog-main #product-list :is(.product-tile__price, .product-tile__product-price, .product-mini-v__price, .product-mini-h__price, .product-book__price, .product-line__price) {
    color: var(--elow-catalog-accent);
}

.elow-catalog-main #product-list .js-product .price-compare {
    color: var(--elow-catalog-muted);
}

.elow-catalog-main .products-panel a:focus-visible,
.elow-catalog-main #product-list :is(.product-tile__name a, .product-mini-v__name a, a.product-mini-h__link, a.product-book__name, a.product-line__name):focus-visible {
    color: var(--elow-catalog-accent);
    text-decoration: underline;
    text-underline-offset: .16em;
}

@media (hover: hover) and (pointer: fine) {
    .elow-catalog-main .products-panel .horizontal-filter__item:not(.open):not(.selected) > .horizontal-filter__head:hover,
    .elow-catalog-main .products-panel .category-sorting-m:not(.open) > .category-sorting-m__head:hover,
    .elow-catalog-main .products-panel .filter-button-m:not(.selected):hover {
        background-color: var(--elow-catalog-hover);
        color: var(--elow-catalog-accent);
    }

    .elow-catalog-main #product-list .js-product:is(.product-tile, .product-mini-v, .product-mini-h, .product-book, .product-line):hover {
        box-shadow: 0 0 0 1px var(--elow-catalog-selected-line), 0 6px 16px var(--elow-catalog-shadow-raised);
    }

    .elow-catalog-main #product-list :is(.product-tile__name a, .product-mini-v__name a, a.product-mini-h__link, a.product-book__name, a.product-line__name):hover {
        color: var(--elow-catalog-accent);
    }
}

/* Let the photo set the height, rather than reserving a fixed-height slot. */
.elow-catalog-main #product-list :is(.product-tile__image, .product-mini-v__image) {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    margin: 0 0 12px;
    padding: 0;
    border-radius: 20px 20px 0 0;
}

.elow-catalog-main #product-list .product-tile__image {
    --elow-catalog-photo-limit: var(--product-tile-image-block-height, 500px);
}

.elow-catalog-main #product-list .product-mini-v__image {
    --elow-catalog-photo-limit: var(--product-mini-v-image-block-height, 250px);
    margin-bottom: 9px;
}

.elow-catalog-main #product-list .product-tile__image-inner {
    display: block;
    height: auto;
    padding: 0;
    border-radius: inherit;
}

.elow-catalog-main #product-list :is(.product-tile__image-inner, .product-mini-v__image) > img.js-img,
.elow-catalog-main #product-list :is(.product-tile__image, .product-mini-v__image) .product-preview-gallery__item > img {
    display: block;
    width: 100%;
    height: auto;
    max-height: var(--elow-catalog-photo-limit);
    object-fit: contain;
    object-position: center top;
    border-radius: 20px 20px 0 0;
}

/* Keep a reasonable placeholder before the theme's lazy image has loaded. */
.elow-catalog-main #product-list :is(.product-tile__image, .product-mini-v__image) img[src$="/img/lazy-image.png"] {
    aspect-ratio: 3 / 4;
}

.elow-catalog-main #product-list :is(.product-tile__image, .product-mini-v__image) .product-preview-gallery {
    width: 100%;
    max-height: none;
    border-radius: inherit;
    align-items: flex-start;
}

.elow-catalog-main #product-list :is(.product-tile__image, .product-mini-v__image) .product-preview-gallery__item {
    display: block;
}

.elow-catalog-main #product-list :is(.product-tile__image, .product-mini-v__image) .owl-stage {
    align-items: flex-start;
}

.elow-catalog-main #product-list :is(.product-tile__image, .product-mini-v__image) .product-preview-gallery__dots {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 16px);
    margin: 0;
    padding: 3px 5px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .87);
}

.elow-catalog-main #product-list :is(.product-tile__badges, .product-mini-v__discount) {
    position: absolute;
    top: 9px;
    left: 9px;
    z-index: 3;
    pointer-events: none;
}

.elow-catalog-main #product-list :is(.product-tile__discount, .product-mini-v__discount) {
    padding-inline: 6px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, .94);
}

.elow-catalog-main #product-list .product-tile__content {
    padding-inline: clamp(12px, 1.4vw, 20px);
    padding-bottom: clamp(12px, 1.4vw, 20px);
}

.elow-catalog-main #product-list .product-tile__features {
    margin-top: 9px;
}

.elow-catalog-main #product-list .product-tile__prices-cart {
    margin-top: 12px;
}

.elow-catalog-main #product-list :is(.product-tile__meta, .product-mini-v__meta):empty {
    display: none;
}

.elow-catalog-main #product-list .product-mini-v__name {
    height: auto;
    overflow-wrap: anywhere;
}

/* Hover only affects the photo area; the cover keeps its original dimensions. */
.elow-catalog-main #product-list [data-elow-gallery] :is(.gallerytile__items, .gallerytile__dots) {
    display: none;
}

.elow-catalog-main #product-list .elow-catalog-gallery-photo {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center top;
    border-radius: inherit;
    background-color: var(--wrap-bg-color, #fff);
    pointer-events: none;
}

@media (any-hover: hover) and (any-pointer: fine) {
    .elow-catalog-main #product-list [data-elow-gallery] .gallerytile__items {
        position: absolute;
        z-index: 2;
        inset: 0;
        display: flex;
    }

    .elow-catalog-main #product-list [data-elow-gallery]:hover .gallerytile__dots {
        position: absolute;
        z-index: 3;
        left: 50%;
        bottom: 8px;
        transform: translateX(-50%);
        display: flex;
        gap: 4px;
        padding: 4px 6px;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, .87);
        pointer-events: none;
    }

    .elow-catalog-main #product-list [data-elow-gallery] .gallerytile__dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #858c99;
    }

    .elow-catalog-main #product-list [data-elow-gallery] .gallerytile__dot.sk-hover {
        background-color: #344d86;
    }
}

/* Temporarily hide the layout switch in the mobile catalog toolbar. */
.elow-catalog-main .products-panel .views-switch-m.-sk-show {
    display: none;
}

@media (max-width: 767px) {
    .elow-catalog-main .products-panel .views-switch-m {
        display: none;
    }
}