/* ==========================================================================
   shop.css — Shop & category pages (header, toolbar, sort, filter drawer)
   Herba Sparsh Child Theme · loaded on shop/archive pages only
   --------------------------------------------------------------------------
   Same container, section-header pattern, grid and product card as the
   homepage's "Featured Products" (layout.css), so the two read as one site.
   Markup: inc/shop.php. Everything uses the design tokens in style.css, so
   the colour themes apply automatically.
   ========================================================================== */

/* ---- 1. Container: one centred 1200px column, like the homepage sections ----
   Storefront leaves a sidebar layout behind (content-area 73% + float:right),
   which pushed the grid to the right. Reset it. */
:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) .site-content > .col-full,
:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) .storefront-breadcrumb > .col-full {
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding-inline: var(--space-xl);
    box-sizing: content-box;
}

:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) #primary.content-area {
    float: none;
    width: 100%;
    margin: 0;
}

:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) .storefront-breadcrumb {
    margin: 0;
    padding: var(--space-md) 0 0;
    background: transparent;
}

:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) .woocommerce-breadcrumb {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-foreground-muted);
}

:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) .woocommerce-breadcrumb a {
    color: var(--color-secondary);
}

/* WooCommerce's own (now empty) archive header still reserves ~108px; we print our own header. */
.woocommerce-products-header {
    display: none;
}

/* ---- 2. Page header (mirrors .hst-featured-section__header) ---- */
.hst-shop-header {
    text-align: center;
    padding: var(--space-xl) 0 var(--space-xl);
}

.hst-shop-header__title {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0 0 var(--space-xs) 0;
}

.hst-shop-header__sub,
.hst-shop-header__sub p {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-foreground-muted);
    margin: 0;
}

/* ---- 3. Toolbar: result count left, Filters + Sort right ---- */
.hst-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    margin-bottom: var(--space-lg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.hst-shop-toolbar__count .woocommerce-result-count {
    float: none;
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-foreground-muted);
}

.hst-shop-toolbar__controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.hst-filter-toggle,
.hst-sort .woocommerce-ordering select {
    height: 44px;
    border: 1px solid var(--color-border-hover);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.hst-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0 var(--space-md);
    cursor: pointer;
}

.hst-filter-toggle:hover,
.hst-sort .woocommerce-ordering select:hover {
    border-color: var(--color-accent);
    background-color: var(--color-muted);
}

.hst-filter-toggle:focus-visible,
.hst-sort .woocommerce-ordering select:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-glow);
}

.hst-filter-toggle__badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* Sort: WooCommerce's own <select>, restyled (custom chevron, same height as the Filters button). */
.hst-sort .woocommerce-ordering {
    float: none;
    margin: 0;
}

.hst-sort .woocommerce-ordering select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 210px;
    padding: 0 40px 0 var(--space-md);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6560' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* ---- 4. Active filter chips ---- */
.hst-filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin: calc(-1 * var(--space-sm)) 0 var(--space-lg);
}

.hst-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    background: var(--color-accent-tint);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 200ms ease;
}

.hst-chip:hover,
.hst-chip:focus-visible {
    background: var(--color-border);
    outline: none;
}

.hst-chip--clear {
    background: transparent;
    color: var(--color-foreground-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- 5. Filter drawer (right side; nav drawer is on the left) ---- */
.hst-filter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 300ms ease;
}

.hst-filter-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.hst-filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    max-width: 92vw;
    background: var(--color-background);
    z-index: 2001;
    transform: translateX(100%);
    visibility: hidden;
    /* visibility flips instantly when opening (so the close button can take focus
       in the same frame) and only after the slide-out when closing. */
    transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s linear 300ms;
    box-shadow: var(--shadow-xl);
}

.hst-filter-drawer.is-active {
    transform: translateX(0);
    visibility: visible;
    transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s linear 0s;
}

.hst-filter-form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hst-filter-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.hst-filter-drawer__header h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
}

.hst-filter-drawer__close {
    display: inline-flex;
    padding: 8px;
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-foreground);
    cursor: pointer;
    transition: background-color 200ms ease;
}

.hst-filter-drawer__close:hover {
    background: var(--color-muted);
}

.hst-filter-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
}

.hst-filter-group {
    margin: 0 0 var(--space-xl);
    padding: 0;
    border: 0;
    background: none; /* Storefront gives fieldsets a background */
}

.hst-filter-group legend {
    padding: 0;
    background: none;
    float: none;
    margin-bottom: var(--space-sm);
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-foreground);
}

.hst-check {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 44px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-foreground);
}

.hst-check input {
    position: absolute;
    opacity: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

.hst-check__box {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--color-border-hover);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.hst-check input:checked + .hst-check__box {
    background: var(--color-accent);
    border-color: var(--color-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
}

.hst-check input:focus-visible + .hst-check__box {
    box-shadow: var(--shadow-glow);
    border-color: var(--color-accent);
}

.hst-check__label {
    flex: 1;
}

.hst-check__count {
    font-size: 0.8125rem;
    color: var(--color-foreground-muted);
}

.hst-price-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.hst-price-row label {
    flex: 1;
    min-width: 0;
}

.hst-price-row__to {
    color: var(--color-foreground-muted);
}

.hst-price-input {
    position: relative;
    display: block;
}

.hst-price-input i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-style: normal;
    color: var(--color-foreground-muted);
}

.hst-price-input input {
    width: 100%;
    height: 44px;
    padding: 0 12px 0 30px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-foreground);
    box-sizing: border-box;
    -moz-appearance: textfield;
    appearance: textfield;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.hst-price-input input::-webkit-outer-spin-button,
.hst-price-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.hst-price-input input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-glow);
}

.hst-filter-drawer__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-border);
    background: var(--color-background);
}

.hst-filter-clear {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- 6. Product card additions (rating, sold-out) ---- */
.hst-product-card__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--space-xs);
}

.hst-product-card__rating .hst-review-stars {
    margin: 0;
    gap: 1px;
}

.hst-product-card__rating .hst-review-stars svg {
    width: 14px;
    height: 14px;
}

.hst-product-card__rating-count {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-foreground-muted);
}

.hst-product-card__badge--muted {
    background: var(--color-foreground-muted);
}

.hst-product-card__badge--coming-soon {
    background: var(--color-secondary);
}

/* Own colour, distinct from Coming Soon (--color-secondary) — a pre-order
   is purchasable right now, a meaningfully different state from "not yet
   browsable at all". See inc/preorder.php. */
.hst-product-card__badge--preorder {
    background: var(--color-accent);
}

.hst-product-card.is-out-of-stock .hst-product-card__media img {
    opacity: 0.6;
}

/* A Coming Soon card also carries is-out-of-stock (it's "not in stock"
   under the hood — see inc/coming-soon.php), so this has to come after
   that rule to win the same-specificity tie and keep the image closer to
   full strength, instead of looking faded/unavailable like a real
   out-of-stock product. */
.hst-product-card.is-coming-soon .hst-product-card__media img {
    opacity: 0.85;
}

/* A blocked pre-order also carries is-out-of-stock (not in stock under the
   hood, see inc/preorder.php) — same reasoning as Coming Soon above. */
.hst-product-card.is-preorder .hst-product-card__media img {
    opacity: 0.85;
}

.hst-product-card__cta.is-muted {
    background: transparent;
    color: var(--color-secondary);
    border: 1px solid var(--color-border-hover);
}

/* ---- 7. Pagination ---- */
.woocommerce-pagination {
    margin-top: var(--space-2xl);
    text-align: center;
}

.woocommerce-pagination ul.page-numbers {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
}

.woocommerce-pagination ul.page-numbers li {
    margin: 0;
    padding: 0;
    border: 0;
    float: none;
}

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-weight: 600;
    text-decoration: none;
    transition: border-color 200ms ease, background-color 200ms ease;
}

.woocommerce-pagination .page-numbers a:hover {
    border-color: var(--color-accent);
    background: var(--color-muted);
}

.woocommerce-pagination .page-numbers .current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

/* ---- 8. Empty result ---- */
.hst-empty-results {
    max-width: 480px;
    margin: var(--space-xl) auto var(--space-3xl);
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.hst-empty-results__title {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-foreground);
}

.hst-empty-results p {
    color: var(--color-foreground-muted);
    margin: 0 0 var(--space-lg);
}

/* ---- 9. Trust bar sits under the products here. Scoped to the actual shop
   views — this stylesheet also loads on the homepage (for the Coming Soon
   badge colours), and an unscoped rule here was silently overriding the
   homepage's own, intentionally different, trust-bar spacing. ---- */
:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) .hst-trust-bar {
    margin-top: var(--space-3xl);
}

/* ---- 10. Small screens: full-width controls, full-width drawer ---- */
@media (max-width: 640px) {
    :is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) .site-content > .col-full,
    :is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) .storefront-breadcrumb > .col-full {
        padding-inline: var(--space-lg);
    }

    .hst-shop-header__title {
        font-size: 1.75rem;
    }

    .hst-shop-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }

    .hst-shop-toolbar__count {
        order: 2;
        text-align: center;
    }

    .hst-shop-toolbar__controls {
        order: 1;
    }

    .hst-filter-toggle {
        flex: 1;
        justify-content: center;
    }

    .hst-sort {
        flex: 1;
    }

    .hst-sort .woocommerce-ordering select {
        width: 100%;
        min-width: 0;
        padding: 0 32px 0 var(--space-md);
        font-size: 0.875rem;
        background-position: right 10px center;
        text-overflow: ellipsis;
    }

    .hst-filter-toggle {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .hst-filter-drawer {
        width: 100vw;
        max-width: 100vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hst-filter-drawer,
    .hst-filter-overlay {
        transition: none;
    }
}