/**
 * Brands PLP — Hyvä layout overrides (cat 161+).
 * @see dev-doc/brands_plp_implement_log.html
 */

body.brands-productlisting-body #maincontent {
    display: block !important;
    min-height: unset;
    overflow-x: hidden;
}

body.brands-productlisting-body .page-main,
body.brands-productlisting-body #maincontent.page-main,
body.brands-productlisting-body.page-layout-1column #maincontent {
    margin: 0 !important;
    margin-block: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    max-width: none;
    padding-inline: 0;
    flex-grow: 0 !important;
}

body.brands-productlisting-body #maincontent > .columns {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none;
}

body.brands-productlisting-body .category-view {
    width: 100%;
    max-width: none;
    padding: 0;
}

body.brands-productlisting-body .brands-wrapper {
    width: 100%;
    max-width: none;
    background-image: url(/cms/images/common/pattern30.png);
    background-repeat: no-repeat;
    background-position: right -639px top 40%;
    background-size: 1278px;
}

body.brands-productlisting-body .vs-common-listingWrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    max-width: 1390px;
    margin: 0 auto;
    padding: 40px 0 200px;
    padding-inline: 0;
    position: relative;
}

/* Desktop: brand/collection in sidebar-top (old_ref); center header hidden */
@media only screen and (min-width: 1024px) {
    body.brands-productlisting-body .brands-header {
        display: none !important;
    }
}

@media only screen and (max-width: 1023px) {
    /* Match old_ref: mobile shows brands-header, hides sidebar titles */
    body.brands-productlisting-body .brands-header {
        display: block;
        padding: 40px 20px 0;
    }

    body.brands-productlisting-body .brands-header h1 {
        text-align: center;
        margin: 0;
    }

    body.brands-productlisting-body .brands-header h1 a {
        text-transform: uppercase;
        color: #212121;
        font-family: "Cormorant Garamond", "Noto Sans TC", "Noto Sans SC", "Heiti TC", "LiHei Pro", "新細明體", PMingLiU, serif;
        font-size: 36px;
        letter-spacing: 0;
        line-height: 1.25em;
        text-decoration: none;
    }

    body.brands-productlisting-body .brands-header .brandCollectionLabel {
        margin-top: 10px;
        text-align: center;
    }

    /* old_ref brands-plp.css: padding-top 40px between header and filter/sort row */
    body.brands-productlisting-body .vs-common-listingWrapper {
        max-width: none;
        margin: 0;
        padding: 40px 20px 200px;
    }
}

/* Mobile toolbar — FILTERS + Position half-width selects (old_ref) */
@media only screen and (max-width: 767px) {
    body.brands-productlisting-body .vs-common-listingWrapper .toolbar .ewcProductFilterSort {
        display: flex !important;
        justify-content: space-between !important;
        width: 100%;
        gap: 16px;
    }

    body.brands-productlisting-body .vs-common-listingWrapper .toolbar .ewcProductFilterSort .ewcProductFilter {
        display: block !important;
        flex: 0 0 calc((100% - 16px) / 2);
        min-width: calc((100% - 16px) / 2) !important;
        max-width: calc((100% - 16px) / 2) !important;
    }

    body.brands-productlisting-body .vs-common-listingWrapper .toolbar .ewcProductFilterSort .ewcProductFilter .filterBtn {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        width: 100% !important;
        height: 32px !important;
        padding: 0 32px 0 8px !important;
        border: 1px solid #99785c !important;
        color: #99785c !important;
        font-size: 16px !important;
        line-height: 1.25em !important;
        text-transform: uppercase;
        text-align: left;
        background-color: transparent;
		background-position-y: 4px;
        box-sizing: border-box;
    }

    body.brands-productlisting-body .vs-common-listingWrapper .toolbar .ewcProductFilterSort .ewcProductSort {
        flex: 0 0 calc((100% - 16px) / 2);
        min-width: calc((100% - 16px) / 2) !important;
        max-width: calc((100% - 16px) / 2) !important;
        width: auto !important;
    }

    body.brands-productlisting-body .vs-common-listingWrapper .toolbar .ewcProductFilterSort .ewcProductSort .toolbar-sorter {
        width: 100%;
    }

    body.brands-productlisting-body .vs-common-listingWrapper .toolbar .ewcProductFilterSort .ewcProductSort .toolbar-sorter .sorter-options {
        width: calc(100% - 32px) !important;
        height: 32px !important;
        font-size: 16px !important;
        line-height: 1.25em !important;
        padding: 0 32px 0 8px !important;
        border: 1px solid #99785c !important;
        border-color: #99785c !important;
        color: #a37e2c !important;
		background-position-y: 4px;
        box-sizing: border-box;
    }
}

/* Product tiles — shadow/margins from brands-plp-layout.css (old vs-common) */
body.brands-productlisting-body .brands-wrapper .vs-common-watchItem .product-item-info,
body.brands-productlisting-body .brands-wrapper .vs-common-watchItem .vs-common-watchItemInner {
    border: none !important;
    border-radius: 0 !important;
}

body.brands-productlisting-body .brands-wrapper .vs-common-watchItem .product-item-photo,
body.brands-productlisting-body .brands-wrapper .vs-common-watchItem .vs-common-watchItem-imageWrapper {
    border: none !important;
    box-shadow: none !important;
}

body.brands-productlisting-body .brands-wrapper .vs-common-watchItem-infoWrapper {
    text-align: center;
}

body.brands-productlisting-body .brands-wrapper .vs-common-watchItem-addToWishlistBtn {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Sort direction — icon only (old site hides span text, shows chevron via ::before) */
body.brands-productlisting-body .vs-common-listingWrapper .toolbar .ewcProductFilterSort .ewcProductSort .toolbar-sorter .sorter-action > span {
    display: none !important;
}

body.brands-productlisting-body .vs-common-listingWrapper .toolbar .ewcProductFilterSort .ewcProductSort .toolbar-sorter .sorter-action::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    color: #99785c;
}

body.brands-productlisting-body .vs-common-listingWrapper .toolbar .ewcProductFilterSort .ewcProductSort .toolbar-sorter .sorter-action.sort-asc::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2399785c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='18 15 12 9 6 15'></polyline></svg>");
}

body.brands-productlisting-body .vs-common-listingWrapper .toolbar .ewcProductFilterSort .ewcProductSort .toolbar-sorter .sorter-action.sort-desc::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2399785c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
}

