.collections { 
    --filtersWidth: min(50rem, 40vw); 
    --filtersMargin: var(--space-2);
    --duration: 500ms;

    @media (width < 1520px) {
        --filtersWidth: clamp(36rem, min(40rem, 30vw), 40rem);
    }
}

.page-intro, .product-list { padding: var(--layoutInline) }

.page-intro .poster img { max-height: 85vh } 

facets-form { display: block; }

.page-quickLinks { padding-inline: var(--layoutInline) }

.pages-articles a { display: block; padding-block: var(--space-1) }

.listoftags { --gap: 0 }

section.product-list .empty { --gap: var(--space-10) }

/* Grid view controller */
#ajaxContainer { transition: all var(--globalAnimeTime) var(--easeOutBack); transform: none }
html.js #ajaxContainer.preloading { opacity: 0; filter: blur(15px); pointer-events: none; transform: translateY(3rem) }

@media (max-width: 777px) {
    .filter-trigger:has(details) { transition: margin var(--globalAnimeTime) var(--easeOutBack) }
    .filter-trigger:has(details[open]) { margin-block-end: var(--space-5) }
}

grid-view-controller {
    details { position: relative }
    details-menu {
        --gap: 0; 
        position: absolute; 
        z-index: 2;
        inset-inline-end: 0;

        @media (width > 777px) {
            inset-inline-end: 150%;
            inset-block-start: 0;
        }

        button.active { font-weight: 800; text-decoration: underline }
    }
}

@media (min-width: 778px) and (max-width: 1024px) { grid-view-controller button:is([data-col="1"],[data-col="6"],[data-col="10"]) { display: none } }
@media (max-width: 777px) { grid-view-controller button[data-col="5"] { display: none } }

/* Drawer */
html[dir="rtl"] #filtersBox { --drawerDirection: translateX(-100vw) }

#filtersBox {
    --drawerDirection: translateX(100vw);

    position: fixed;
    z-index: 100;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: var(--filtersWidth);
    height: calc(100% - (var(--filtersMargin) * 2));
    margin: var(--filtersMargin);
    border-radius: var(--radius);
    background: var(--bg);
    background-attachment: fixed;
    color: var(--color);

    overscroll-behavior: contain;
    overflow-y: auto;

    transition: all var(--duration) var(--globalAnimeEase); 
    opacity: 0;
    transform: var(--drawerDirection);

    @media (width < 777px) {
        --drawerDirection: translateY(105vh);

        z-index: 100; 
        inset: 0;
        margin: 0;
        width: 100%;
        height: 100dvh;
        border-radius: 0;
        transform: var(--drawerDirection);
        transition: transform var(--duration) var(--globalAnimeEase);
    }
}

body.do-filtersBox #filtersBox[open] { transform: none; opacity: 1 }

#filtersBox > *:not(drawer-header) { padding: 0 var(--padding) var(--padding) }
#filtersBox > drawer-header { z-index: 21 }
#filtersBox > drawer-header h2 { padding-inline: var(--padding) }
#filtersBox > drawer-header button { padding: var(--space-4) }

/* desktop only */
@media (min-width: 777px) {
    body.do-filtersBox .filter-trigger { opacity: 0; pointer-events: none }

    /* Drawer location - END (default) */
    .willShrink { width: 100%; transition: all var(--duration) var(--easeOutBack) }  
    body.do-filtersBox .willShrink { width: calc(100vw - (var(--filtersWidth) + var(--layoutInline))) }

    /* Drawer location - START */
    [filter-location="start"] #filtersBox { inset-inline-start: 0; transform: translateX(-100vw) }
    [filter-location="start"] #filtersBox:target { transform: translateX(0) }

    [filter-location="start"] #filtersBox .willShrink { transform-origin: right; margin-inline-start: 0 }
    body.do-filtersBox [filter-location="start"] .willShrink { transform-origin: right; margin-inline-start: calc(var(--filtersWidth) + var(--layoutInline)) }
}

/* Tokens */
#filtersBox .toggle-token { --gap: var(--space-1) var(--space-3); --tokenMargin: 0 }
#filtersBox .toggle-token.custom > x-flex:has(.swatches) { --gap: var(--space-4) }

/* a11y */
#filtersBox .toggle-token.custom label:has(input:focus-visible) { --a11yOutline: 2px var(--a11yStyle) var(--a11yColor); outline: var(--a11yOutline); box-shadow: var(--a11yStyle) var(--a11yColor) }

#filtersBox .custom.toggle-token.toggle-token .disabled { --disabledOpacity: 0.4 }



#filtersBox .custom.toggle-token .count {
    display: inline-block;
    padding: .1ex .8em;
    opacity: 0;
    text-align: center;
    text-decoration: none;
    transform: scale(0.5);
    transition: all 250ms var(--globalAnimeEase);
}

#filtersBox .custom.toggle-token .swatches .count { display: block;  }

#filtersBox .custom.toggle-token .active .count,
#filtersBox .custom.toggle-token :where(.labels,.swatches):is(:hover,:focus,:focus-visible,:focus-within) .count { opacity: 1; text-decoration: none; transform: none }

coretex-accordion filter-container { display: block; position: relative; margin-block: var(--space-1) var(--space-5) }

coretex-accordion filter-container:before {
    content: var(--openSymbol);
    display: inline;
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: 2px;
}

html[dir="rtl"] coretex-accordion filter-container:before { rotate: 270deg }

section#sortBySection coretex-accordion filter-container:before { inset-block-start: 0 }

coretex-accordion filter-container > fieldset.toggle-token { display: block; margin-inline-start: var(--space-4) }

section#sortBySection { margin-block-end: var(--margin) }

.filter-trigger { padding-inline: var(--layoutInline) }
.filter-trigger .button { padding-inline: 0; margin: 0}

facets-form:not([filters="true"]) [data-facets-form-content="clear-button"] { display: none }
facets-form coretex-accordion details[open] summary { position: relative }

x-grid product-card[medialess] .meta { margin: auto }
@media (min-width: 1023px) { x-grid[columns="10"] product-card:not([medialess]) .meta { display: none } }
@media (min-width: 778px) and (max-width: 1023px) { x-grid[columns-m="5"] product-card:not([medialess]) .meta { display: none } }
@media (max-width: 777px) { x-grid[columns-s="4"] product-card:not([medialess]) .meta { display: none } }

[data-facets-form-content="clear-button"] { margin-block-start: var(--space-3) }

/* Search */
section.search-page .empty { margin-block: var(--margin) }