/* ---------------------------------------------------------------------------
   Catalog archive
   Rewritten 2026-10-20. The left filter sidebar is gone: with Type and Price
   removed there was one filter left and a 230px column holding it. The filter
   is now a row of pills above the grid, which hands the full measure back to
   the products.

   This file previously carried ~250 lines of sidebar rules that no longer have
   anything to style, so it was rewritten rather than appended to again.
   --------------------------------------------------------------------------- */

@media (min-width: 922px) {
    .woocommerce-page .site-content > .ast-container,
    .tax-product_brand .site-content > .ast-container,
    .tax-product_cat .site-content > .ast-container {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

@media (min-width: 922px) and (max-width: 1200px) {
    .woocommerce-page .site-content > .ast-container,
    .tax-product_brand .site-content > .ast-container,
    .tax-product_cat .site-content > .ast-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* --- Filter pills ----------------------------------------------------------- */

.ma-catalog-filter {
    margin: 0 0 2rem;
}

.ma-catalog-filter__list {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ma-catalog-filter__pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid rgba(27, 46, 75, .18);
    border-radius: 999px;
    padding: .5rem 1.1rem;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ma-navy, #1B2E4B);
    background: #fff;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.ma-catalog-filter__pill:hover {
    border-color: var(--ma-secondary, #267CC0);
    color: var(--ma-secondary, #267CC0);
}

.ma-catalog-filter__pill.is-active {
    background: var(--ma-secondary, #267CC0);
    border-color: var(--ma-secondary, #267CC0);
    color: #fff;
}

.ma-catalog-filter__pill:focus-visible {
    outline: 3px solid var(--ma-primary, #F58331);
    outline-offset: 2px;
}

.ma-catalog-filter__count {
    font-size: .8rem;
    font-weight: 400;
    opacity: .7;
}

/* --- Product grid ----------------------------------------------------------- */

/*
 * No column rule here on purpose.
 *
 * Astra already stores shop columns responsively in astra-settings as
 * {"desktop":4,"tablet":3,"mobile":2} and emits the CSS for it, so the
 * Customizer control works natively. The child theme previously hardcoded
 * three columns with !important, which silently beat that control: changing it
 * in the Customizer did nothing and gave no clue why. Only the gap is set here.
 */
@media (min-width: 922px) {
    .woocommerce-page ul.products,
    .tax-product_brand ul.products,
    .tax-product_cat ul.products {
        gap: 1.5rem;
    }
}

/* --- Product cards ---------------------------------------------------------- */

.woocommerce-page ul.products > li.product,
.tax-product_brand ul.products > li.product,
.tax-product_cat ul.products > li.product {
    display: flex;
    flex-direction: column;
    background: var(--ma-white, #fff);
    border: 1px solid rgba(27, 46, 75, .10);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(27, 46, 75, .06);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.woocommerce-page ul.products > li.product:hover,
.tax-product_brand ul.products > li.product:hover,
.tax-product_cat ul.products > li.product:hover {
    box-shadow: 0 14px 34px rgba(27, 46, 75, .16);
    border-color: rgba(38, 124, 192, .35);
    transform: translateY(-3px);
}

/* Keyboard users get the same affordance as a hover. */
.woocommerce-page ul.products > li.product:focus-within,
.tax-product_brand ul.products > li.product:focus-within,
.tax-product_cat ul.products > li.product:focus-within {
    box-shadow: 0 14px 34px rgba(27, 46, 75, .16);
    border-color: var(--ma-secondary, #267CC0);
}

.woocommerce-page ul.products > li.product .astra-shop-thumbnail-wrap,
.tax-product_brand ul.products > li.product .astra-shop-thumbnail-wrap,
.tax-product_cat ul.products > li.product .astra-shop-thumbnail-wrap {
    margin: 0;
}

/*
 * Every thumbnail renders at the same ratio so the rows line up.
 *
 * The product artwork is not uniform: eight of ten are ~1.19:1, "Live Tutoring
 * Sessions" is square and "Pathways to Certification" is 1.5:1, which made the
 * second row look broken. 6/5 is the ratio the majority already are, so eight
 * images are untouched and only the two outliers get cropped.
 *
 * object-fit: cover crops rather than squashes, so nothing distorts. object-
 * position is centred, which suits this artwork; if a specific product ends up
 * badly cropped it can be nudged per-product rather than changing the ratio.
 */
.woocommerce-page ul.products > li.product .astra-shop-thumbnail-wrap img,
.tax-product_brand ul.products > li.product .astra-shop-thumbnail-wrap img,
.tax-product_cat ul.products > li.product .astra-shop-thumbnail-wrap img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 6 / 5;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    background: #F4F6F8;   /* shows while lazy-loading instead of a white gap */
}

/*
 * Tightened from 1.1/1.25/1.35rem. The cards read as "bigger than needed" in
 * the notes, and the width was never the problem: it was ~270px of summary
 * under a 180px image.
 */
.woocommerce-page ul.products > li.product .astra-shop-summary-wrap,
.tax-product_brand ul.products > li.product .astra-shop-summary-wrap,
.tax-product_cat ul.products > li.product .astra-shop-summary-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: .85rem 1rem 1rem;
}

.woocommerce-page ul.products > li.product .woocommerce-loop-product__title,
.tax-product_brand ul.products > li.product .woocommerce-loop-product__title,
.tax-product_cat ul.products > li.product .woocommerce-loop-product__title {
    flex: 1 1 auto;
    font-size: 1rem;
    line-height: 1.35;
    margin-bottom: .35rem;
}

.woocommerce-page ul.products > li.product .ast-woo-product-category,
.tax-product_brand ul.products > li.product .ast-woo-product-category,
.tax-product_cat ul.products > li.product .ast-woo-product-category {
    font-size: .75rem;
    margin-bottom: .2rem;
}

.woocommerce-page ul.products > li.product .price,
.tax-product_brand ul.products > li.product .price,
.tax-product_cat ul.products > li.product .price {
    margin-bottom: .65rem;
    font-size: 1rem;
}

.woocommerce-page ul.products > li.product .add_to_cart_button,
.tax-product_brand ul.products > li.product .add_to_cart_button,
.tax-product_cat ul.products > li.product .add_to_cart_button {
    align-self: flex-start;
    margin-top: auto;
    padding: .5rem 1.1rem;
    font-size: .88rem;
}

/* --- Phones ----------------------------------------------------------------- */

@media (max-width: 544px) {
    .woocommerce-page ul.products > li.product .astra-shop-summary-wrap,
    .tax-product_brand ul.products > li.product .astra-shop-summary-wrap,
    .tax-product_cat ul.products > li.product .astra-shop-summary-wrap {
        padding: .8rem .75rem .9rem;
    }

    .woocommerce-page ul.products > li.product .add_to_cart_button,
    .tax-product_brand ul.products > li.product .add_to_cart_button,
    .tax-product_cat ul.products > li.product .add_to_cart_button {
        align-self: stretch;
        text-align: center;
    }

    .ma-catalog-filter__pill {
        padding: .45rem .9rem;
        font-size: .86rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .woocommerce-page ul.products > li.product,
    .tax-product_brand ul.products > li.product,
    .tax-product_cat ul.products > li.product {
        transition: none;
    }

    .woocommerce-page ul.products > li.product:hover,
    .tax-product_brand ul.products > li.product:hover,
    .tax-product_cat ul.products > li.product:hover {
        transform: none;
    }
}