/* WooCommerce archive */

.hob-shop {
    --hob-shop-columns: 3;
    padding-top: 0;
}

.hob-shop--columns-2 {
    --hob-shop-columns: 2;
}

.hob-shop--columns-2 .hob-shop__inner {
    max-width: 1120px;
}

.hob-shop--columns-3 {
    --hob-shop-columns: 3;
}

.hob-shop--columns-4 {
    --hob-shop-columns: 4;
}

.hob-shop__inner {
    display: grid;
    gap: 28px;
    padding-top: 28px;
}

.hob-shop__hero {
    padding: clamp(32px, 6vw, 72px) 0;
    background: var(--hob-surface-color);
}

.hob-shop__hero-inner {
    display: grid;
    gap: 12px;
}

.hob-shop__eyebrow {
    margin: 0;
    color: var(--hob-accent-color);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hob-shop__title {
    margin: 0;
    font-size: clamp(1.65rem, 3.2vw, 2.85rem);
}

.hob-shop__description {
    max-width: 760px;
}

.hob-shop__description > *:last-child {
    margin-bottom: 0;
}

.hob-shop__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: var(--hob-border-width) solid var(--hob-border-color);
}

.hob-shop__result-count .woocommerce-result-count,
.hob-shop__ordering .woocommerce-ordering {
    float: none;
    margin: 0;
}

.hob-shop__ordering select {
    min-height: 42px;
    padding: 0 12px;
    border: var(--hob-border-width) solid var(--hob-border-color);
    border-radius: var(--hob-radius-button);
    background: var(--hob-background-color);
}

.woocommerce .hob-shop__grid.products {
    display: grid;
    grid-template-columns: repeat(var(--hob-shop-columns), minmax(0, 1fr));
    column-gap: 28px;
    row-gap: clamp(44px, 5vw, 72px);
    padding: 0;
    margin: 0;
    list-style: none;
}

.woocommerce .hob-shop__grid.products::before,
.woocommerce .hob-shop__grid.products::after {
    display: none;
}

.woocommerce ul.products.hob-shop__grid li.product {
    width: auto;
    float: none;
    margin: 0;
}


@media (max-width: 900px) {
    .hob-shop {
        --hob-shop-columns: 2;
    }

    .woocommerce .hob-shop__grid.products {
        column-gap: 20px;
        row-gap: 44px;
    }
}

@media (max-width: 560px) {
    .hob-shop {
        --hob-shop-columns: 1;
    }
}