/* Product listing proportions matched to the SpillHut catalogue while retaining EFM data. */
.shop-grid {
    gap: 10px;
}

.shop-toolbar > .results-count {
    display: none;
}

.shop-grid .product-card {
    padding: 15px;
}

.product-card h3 {
    min-height: 39px;
    max-height: 39px;
    margin: 7px 0 6px;
    font-size: 14px;
    line-height: 1.4;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.card-price {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.4;
}

.card-button {
    height: 42px;
    min-height: 42px;
    font-size: 13px;
}

.product-card > .sku {
    font-size: 12px;
    line-height: 1.4;
    color: #333;
    font-weight: 600;
}

.product-card > .sku span {
    color: #aaa;
    font-weight: 400;
}

.product-card .wish-form .icon-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 6px #0002;
}

.product-card .sale-badge {
    display: flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
}

.filter-drawer-heading,
.filter-overlay {
    display: none;
}

.filter-advanced > summary {
    display: none;
}

.filter-advanced > div {
    display: contents;
}

.price-values > p {
    display: none;
}

@media (min-width: 1200px) {
    .shop-layout {
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 30px;
    }

    .shop-grid .product-card {
        min-height: 514px;
    }

    .shop-grid .product-card h3 {
        min-height: 39px;
        max-height: 39px;
    }

    .shop-grid .card-price {
        margin-top: auto;
    }
}

@media (max-width: 600px) {
    .shop-title {
        padding: 15px;
    }

    .shop-title h1 {
        font-size: 36px;
        line-height: 1.2;
    }

    .home-products .product-card {
        gap: 0;
    }

    .shop-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 16px 10px;
        margin-bottom: 22px;
    }

    .shop-toolbar .breadcrumbs,
    .shop-toolbar .results-count {
        max-width: none;
        margin: 0;
        font-size: 12px;
    }

    .shop-toolbar .breadcrumbs {
        color: #333;
        font-size: 13px;
    }

    .shop-toolbar .results-count {
        display: block;
        text-align: right;
        white-space: nowrap;
    }

    .shop-view-controls {
        grid-column: 1 / -1;
        display: flex;
        width: 100%;
        max-width: none;
        justify-content: space-between;
        gap: 12px;
    }

    .shop-view-controls > span {
        display: none;
    }

    .shop-toolbar .shop-filter-button,
    .shop-toolbar .shop-filter-button.button.dark {
        min-height: 38px;
        padding: 8px 0;
        border: 0;
        background: transparent;
        color: #222;
        font-size: 13px;
        text-transform: none;
        margin: 0;
    }

    .shop-toolbar .shop-filter-button:hover,
    .shop-toolbar .shop-filter-button.button.dark:hover {
        background: transparent;
        border: 0;
        color: var(--brand);
    }

    .shop-toolbar form {
        min-width: 150px;
    }

    .shop-toolbar select {
        min-height: 38px;
        border-bottom: 0;
        font-size: 12px;
    }

    .category-chips {
        display: none;
    }

    .shop-grid .product-card {
        padding: 10px;
    }

    .product-card h3,
    .shop-grid .product-card h3,
    .home-grid .product-card h3,
    .related-grid .product-card h3,
    .home-products .product-card h3 {
        min-height: 35px;
        max-height: 35px;
        margin: 7px 0 6px;
        font-size: 13px;
        line-height: 1.36;
    }

    .card-price {
        min-height: 18px;
        margin-bottom: 8px;
        font-size: 13px;
        line-height: 1.36;
        white-space: nowrap;
    }

    .home-products .card-price {
        margin-top: 0;
        margin-bottom: 8px;
    }

    .card-price small {
        display: inline;
        font-size: 9px;
    }

    .card-button {
        height: 38px;
        min-height: 38px;
        padding-top: 0;
        padding-bottom: 0;
        font-size: 13px;
    }

    .home-products .card-button {
        height: 38px;
        min-height: 38px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .product-card > .sku {
        margin-top: 8px;
        font-size: 12px;
        line-height: 1.4;
    }

    .product-card .wish-form .icon-button {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
    }

    .product-card .sale-badge {
        width: 48px;
        height: 48px;
        font-size: 12px;
    }

    .home-products .product-card > .sku {
        margin: 8px 0 0;
    }

    body.filter-drawer-open {
        overflow: hidden;
    }

    .filter-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 79;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(0, 0, 0, .55);
    }

    .shop-sidebar,
    .shop-sidebar.open {
        display: block;
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 80;
        width: 300px;
        max-width: calc(100vw - 44px);
        margin: 0;
        padding: 0 30px 30px;
        overflow-y: auto;
        border: 0;
        background: #fff;
        box-shadow: 4px 0 18px rgba(0, 0, 0, .16);
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform .22s ease, visibility 0s linear .22s;
    }

    .shop-sidebar.filter-drawer-visible {
        transform: translateX(0);
        visibility: visible;
        transition: transform .22s ease;
    }

    .filter-drawer-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 66px;
        margin: 0 -30px 30px;
        padding: 0 15px;
        border-bottom: 1px solid var(--border);
    }

    .filter-drawer-heading strong {
        font-size: 13px;
        letter-spacing: .02em;
    }

    .filter-close {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 0;
        border: 0;
        background: transparent;
        color: #222;
        font-size: 14px;
        font-weight: 600;
        text-transform: none;
        margin-left: auto;
    }

    .filter-close .icon {
        font-size: 12px;
    }

    .shop-sidebar h2,
    .shop-sidebar h2:first-child {
        margin: 0 0 20px;
        font-size: 16px;
        line-height: 1.4;
    }

    .shop-sidebar > form {
        display: block;
    }

    .shop-sidebar form > h2:not(:first-child) {
        position: relative;
        margin-top: 60px;
    }

    .shop-sidebar form > h2:not(:first-child)::before {
        position: absolute;
        top: -30px;
        right: -30px;
        left: -30px;
        border-top: 1px solid var(--border);
        content: "";
    }

    .shop-sidebar .price-range {
        position: relative;
        display: block;
        height: 26px;
        margin: 0 0 14px;
    }

    .price-range-track {
        position: absolute;
        top: 11px;
        right: 0;
        left: 0;
        height: 3px;
        background: #111;
    }

    .shop-sidebar .price-range input[type="range"] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 26px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        pointer-events: none;
        appearance: none;
        -webkit-appearance: none;
    }

    .shop-sidebar .price-range input[type="range"]::-webkit-slider-runnable-track {
        height: 3px;
        background: transparent;
    }

    .shop-sidebar .price-range input[type="range"]::-webkit-slider-thumb {
        width: 5px;
        height: 17px;
        margin-top: -7px;
        border: 0;
        border-radius: 0;
        background: #111;
        pointer-events: auto;
        -webkit-appearance: none;
    }

    .shop-sidebar .price-range input[type="range"]::-moz-range-track {
        height: 3px;
        background: transparent;
    }

    .shop-sidebar .price-range input[type="range"]::-moz-range-thumb {
        width: 5px;
        height: 17px;
        border: 0;
        border-radius: 0;
        background: #111;
        pointer-events: auto;
    }

    .shop-sidebar .price-values {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 12px;
    }

    .shop-sidebar .price-values > p {
        display: block;
        margin: 0;
        color: #555;
        font-size: 14px;
        white-space: nowrap;
    }

    .shop-sidebar .price-values output {
        color: #222;
        font-weight: 600;
    }

    .shop-sidebar .price-values > label {
        display: none;
    }

    .shop-sidebar .price-values .button {
        min-height: 36px;
        padding: 7px 16px;
        font-size: 12px;
    }

    .shop-sidebar > form > input,
    .shop-sidebar select {
        margin-bottom: 0;
    }

    .shop-sidebar #category-search {
        display: none;
    }

    .shop-sidebar #category-filter {
        width: 100% !important;
        max-width: 100%;
        height: 42px;
        min-height: 42px;
        border: 2px solid #111;
        padding: 6px 14px;
        font-size: 14px;
    }

    .filter-advanced {
        margin-top: 25px;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    .filter-advanced > summary {
        display: flex;
        min-height: 48px;
        align-items: center;
        justify-content: space-between;
        list-style: none;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
    }

    .filter-advanced > summary::-webkit-details-marker {
        display: none;
    }

    .filter-advanced[open] > summary .icon {
        transform: rotate(180deg);
    }

    .filter-advanced > div {
        display: block;
        padding: 0 0 20px;
    }

    .shop-sidebar .sidebar-products,
    .shop-sidebar > h2 {
        display: block;
    }

    .shop-sidebar > h2 {
        margin-top: 28px;
    }

    .shop-sidebar .help-box {
        display: none;
    }
}

@media(max-width:600px){
    .shop-filter-button{display:inline-flex;align-items:center;gap:6px}
    .shop-filter-button .icon{font-size:14px}
    .shop-toolbar .shop-sort-control{position:relative;min-width:30px;width:30px;height:38px;margin-left:auto}
    .shop-sort-control::after{content:'\f119';font-family:woodmart-font;font-size:17px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
    .shop-toolbar .shop-sort-control select{width:30px;height:38px;min-height:38px;padding:0;opacity:0;cursor:pointer}
    .shop-sort-control:focus-within{outline:2px solid var(--brand);outline-offset:2px}
}