/* ==========================================================================
   Bottle Gases — Product page + shop archive fixes
   --------------------------------------------------------------------------
   Owner reported: "PRODUCT PAGES ARE KINDA BROKEN, PRODUCT LIST PAGES TEXT
   IS ALL OVER THE PLACE." This sheet patches both. Loaded AFTER
   `brand-tokens.css` so it can override Woodmart rules that the parent token
   sheet loses to in the cascade.

   Token references — defined in brand-tokens.css (DO NOT redefine here).
   If a token is missing it's noted in the report so it can be added there.

   Scoping rule: every selector starts with .single-product, .woocommerce.archive,
   .post-type-archive-product, .product, or .products. NO global selectors.
   ========================================================================== */


/* ==========================================================================
   1. SINGLE PRODUCT PAGE
   ========================================================================== */

/* --- Title -----------------------------------------------------------------
   Anton ALL-CAPS at 34px on long product names like
   "Argon Shielding Gas Regulator for MIG and TIG Welding Gases. Single Stage,
   2 Guage, 300Bar. 30lpm flow" reads as a wall of caps that wraps badly.
   Switch to Manrope, sentence case, brand brown, sane size + line-height.
--------------------------------------------------------------------------- */
.single-product .product_title.entry-title,
.single-product h1.product_title {
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.01em;
    font-size: 28px;
    line-height: 1.3;
    color: var(--bg-navy-900);
    margin-bottom: 12px;
}

@media (max-width: 767px) {
    .single-product .product_title.entry-title,
    .single-product h1.product_title {
        font-size: 22px;
        line-height: 1.3;
    }
}


/* --- Price -----------------------------------------------------------------
   Make the variable-product price line read like the most important number on
   the page. brand-tokens already does .price > .amount in ink-900 700 — bump
   it to brown-700 specifically inside the single-product summary, larger.
--------------------------------------------------------------------------- */
.single-product .product .price,
.single-product .product .price > .amount,
.single-product .product .price ins .amount,
.single-product .product .woocommerce-variation-price .price .amount {
    color: var(--bg-navy-700);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
}

.single-product .product .price del,
.single-product .product .price del .amount {
    color: var(--bg-ink-400);
    font-weight: 500;
    font-size: 18px;
}


/* --- Add-to-basket button --------------------------------------------------
   PRIMARY FIX. The Woodmart default `.single_add_to_cart_button{background-
   color:var(--btn-accented-bgcolor);text-transform:var(--btn-transform,
   uppercase)…}` rule sits LATER in the LiteSpeed bundle than the brand-tokens
   override at the same specificity — so the brand override loses.
   We win here by combining a higher-specificity selector
   (.single-product .single_add_to_cart_button) AND setting the underlying
   Woodmart custom properties so any sibling `.button.alt`-style rules
   inherit our colours too.
--------------------------------------------------------------------------- */
.single-product .single_add_to_cart_button,
.single-product form.cart .single_add_to_cart_button,
.single-product button.single_add_to_cart_button.button.alt {
    --btn-accented-bgcolor: var(--bg-yellow);
    --btn-accented-bgcolor-hover: var(--bg-yellow-hover);
    --btn-accented-color: var(--bg-navy-900);
    --btn-accented-color-hover: var(--bg-navy-900);
    --btn-accented-brd-radius: var(--r-md);
    --btn-accented-transform: none;
    --btn-transform: none;

    background-color: var(--bg-yellow);
    color: var(--bg-navy-900);
    border: 1px solid var(--bg-yellow);
    border-radius: var(--r-md);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    padding: 12px 24px;
    box-shadow: var(--shadow-sm);
    transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.single-product .single_add_to_cart_button:hover,
.single-product form.cart .single_add_to_cart_button:hover,
.single-product button.single_add_to_cart_button.button.alt:hover {
    background-color: var(--bg-yellow-hover);
    border-color: var(--bg-yellow-hover);
    color: var(--bg-navy-900);
    box-shadow: var(--shadow-md);
}

.single-product .single_add_to_cart_button:active,
.single-product form.cart .single_add_to_cart_button:active {
    background-color: var(--bg-yellow-hover);
    border-color: var(--bg-yellow-hover);
    color: var(--bg-navy-900);
}

.single-product .single_add_to_cart_button:disabled,
.single-product .single_add_to_cart_button.disabled {
    background-color: var(--bg-ink-300);
    border-color: var(--bg-ink-300);
    cursor: not-allowed;
    box-shadow: none;
}

/* Buy Now button (Woodmart) sits next to add-to-basket with same broken
   accented-* variables. Outline NAVY so the two CTAs read distinctly:
   yellow primary (Add to basket) + navy outline secondary (Buy Now). */
.single-product .wd-buy-now-btn {
    --btn-accented-bgcolor: #FFFFFF;
    --btn-accented-bgcolor-hover: var(--bg-navy-50);
    --btn-accented-color: var(--bg-navy-500);
    --btn-accented-color-hover: var(--bg-navy-700);
    --btn-accented-transform: none;

    background-color: #FFFFFF;
    color: var(--bg-navy-500);
    border: 1px solid var(--bg-navy-500);
    border-radius: var(--r-md);
    text-transform: none;
    font-family: var(--font-body);
    font-weight: 700;
    padding: 12px 24px;
}

.single-product .wd-buy-now-btn:hover {
    background-color: var(--bg-navy-50);
    color: var(--bg-navy-700);
    border-color: var(--bg-navy-500);
}


/* --- Quantity selector ----------------------------------------------------- */
.single-product .quantity {
    border-radius: var(--r-md);
    overflow: hidden;
}

.single-product .quantity input[type="number"],
.single-product .quantity input.qty {
    border: 1px solid var(--bg-ink-200);
    border-radius: var(--r-md);
    background-color: #FFFFFF;
    color: var(--bg-ink-900);
    font-family: var(--font-body);
    font-weight: 600;
    min-height: 44px;
    padding: 0 8px;
    text-align: center;
}

.single-product .quantity input[type="number"]:focus,
.single-product .quantity input.qty:focus {
    border-color: var(--bg-navy-500);
    box-shadow: 0 0 0 3px rgba(124, 79, 42, 0.18);
    outline: none;
}

.single-product .quantity input[type="button"].plus,
.single-product .quantity input[type="button"].minus {
    background-color: #FFFFFF;
    color: var(--bg-navy-600);
    border: 1px solid var(--bg-ink-200);
    border-radius: var(--r-md);
    font-family: var(--font-body);
    font-weight: 700;
    min-height: 44px;
    min-width: 36px;
    transition: background-color 150ms ease, color 150ms ease;
}

.single-product .quantity input[type="button"].plus:hover,
.single-product .quantity input[type="button"].minus:hover {
    background-color: var(--bg-navy-50);
    color: var(--bg-navy-700);
    border-color: var(--bg-navy-300);
}


/* --- WC tabs (Description / Additional information / Reviews) ------------- */
.single-product .wd-single-tabs .wd-nav-tabs {
    border-bottom: 1px solid var(--bg-ink-200);
    --nav-color: var(--bg-ink-500);
    --nav-color-hover: var(--bg-navy-700);
    --nav-color-active: var(--bg-navy-700);
}

.single-product .wd-single-tabs .wd-nav-tabs > li > a {
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--bg-ink-500);
    padding-bottom: 12px;
    transition: color 150ms ease;
}

.single-product .wd-single-tabs .wd-nav-tabs > li > a:hover {
    color: var(--bg-navy-700);
}

.single-product .wd-single-tabs .wd-nav-tabs > li.active > a,
.single-product .wd-single-tabs .wd-nav-tabs > li[aria-selected="true"] > a {
    color: var(--bg-navy-700);
}

/* Active-tab brown underline (replaces Woodmart's default --wd-primary line). */
.single-product .wd-single-tabs .wd-nav-tabs > li.active > a::after,
.single-product .wd-single-tabs .wd-nav-tabs > li.description_tab.active > a::after,
.single-product .wd-single-tabs .wd-nav-tabs > li.additional_information_tab.active > a::after,
.single-product .wd-single-tabs .wd-nav-tabs > li.reviews_tab.active > a::after {
    background-color: var(--bg-navy-500);
}

.single-product .woocommerce-Tabs-panel {
    font-family: var(--font-body);
    color: var(--bg-ink-700);
    line-height: 1.6;
}

.single-product .woocommerce-Tabs-panel h2,
.single-product .woocommerce-Tabs-panel h3 {
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: none;
    color: var(--bg-navy-900);
    margin-top: 24px;
    margin-bottom: 12px;
}

.single-product .woocommerce-Tabs-panel a {
    color: var(--bg-navy-600);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.single-product .woocommerce-Tabs-panel a:hover {
    color: var(--bg-navy-700);
}


/* --- Product image gallery ------------------------------------------------- */
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image img {
    border-radius: var(--r-md);
}

.single-product .woocommerce-product-gallery__image {
    border: 1px solid var(--bg-ink-200);
    background-color: #FFFFFF;
}


/* --- TM Extra Product Options (TM EPO) ------------------------------------ */
.single-product .tm-extra-product-options {
    font-family: var(--font-body);
    color: var(--bg-ink-700);
}

.single-product .tm-extra-product-options .tc-epo-label,
.single-product .tm-extra-product-options .tm-epo-element-label,
.single-product .tm-extra-product-options .tc-epo-element-label-text {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--bg-navy-900);
    text-transform: none;
}

.single-product .tm-extra-product-options .tm-epo-required {
    color: var(--bg-danger);
}

.single-product .tm-extra-product-options .tmcp-field {
    font-family: var(--font-body);
    color: var(--bg-ink-900);
    border: 1px solid var(--bg-ink-200);
    border-radius: var(--r-md);
    background-color: #FFFFFF;
}

.single-product .tm-extra-product-options select.tmcp-field,
.single-product .tm-extra-product-options input.tmcp-field {
    min-height: 42px;
    padding: 0 12px;
}

.single-product .tm-extra-product-options select.tmcp-field:focus,
.single-product .tm-extra-product-options input.tmcp-field:focus {
    border-color: var(--bg-navy-500);
    outline: none;
    box-shadow: 0 0 0 3px rgba(124, 79, 42, 0.18);
}

.single-product .tm-extra-product-options .tc-price,
.single-product .tm-extra-product-options .price.amount {
    color: var(--bg-navy-700);
    font-weight: 700;
}

.single-product .tm-extra-product-options .reset_variations,
.single-product .tm-extra-product-options a[href="#reset"] {
    color: var(--bg-navy-600);
    font-family: var(--font-body);
    font-weight: 600;
}

.single-product .tm-extra-product-options .reset_variations:hover {
    color: var(--bg-navy-700);
}

/* TM EPO totals block — keep it visually separated from the form. */
.single-product .tm-extra-product-options-totals,
.single-product .tm-custom-price-totals {
    border-top: 1px solid var(--bg-ink-200);
    padding-top: 12px;
    margin-top: 12px;
    font-family: var(--font-body);
    color: var(--bg-ink-700);
}

.single-product .tm-extra-product-options-totals .price.amount,
.single-product .tm-custom-price-totals .price.amount {
    color: var(--bg-navy-700);
    font-weight: 700;
}


/* --- Variations table (the swatch / dropdown selector) -------------------- */
.single-product table.variations th.label label {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--bg-navy-900);
    text-transform: none;
}

.single-product table.variations select {
    border-radius: var(--r-md);
    border: 1px solid var(--bg-ink-200);
    min-height: 42px;
    font-family: var(--font-body);
    color: var(--bg-ink-900);
}

.single-product table.variations .reset_variations,
.single-product .wd-reset-var .reset_variations {
    color: var(--bg-navy-600);
    font-family: var(--font-body);
}


/* --- SKU / category meta line --------------------------------------------- */
.single-product .product_meta {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--bg-ink-500);
    border-top: 1px solid var(--bg-ink-200);
    padding-top: 16px;
    margin-top: 24px;
}

.single-product .product_meta a {
    color: var(--bg-navy-600);
}


/* ==========================================================================
   2. SHOP / CATEGORY ARCHIVE PAGE
   ========================================================================== */

/* --- Card frame ------------------------------------------------------------
   Owner: "TEXT IS ALL OVER THE PLACE". Cards currently have no surface, no
   border, no padding — title widths/wrap differ per card and prices wrap
   inconsistently. Apply the brand card pattern.
--------------------------------------------------------------------------- */
.woocommerce.archive .products .product-grid-item.wd-product,
.post-type-archive-product .products .product-grid-item.wd-product,
.woocommerce.tax-product_cat .products .product-grid-item.wd-product,
.woocommerce-page .products .product-grid-item.wd-product {
    background-color: #FFFFFF;
    border: 1px solid var(--bg-border, var(--bg-ink-200));
    border-radius: var(--r-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
    display: flex;
    flex-direction: column;
}

.woocommerce.archive .products .product-grid-item.wd-product:hover,
.post-type-archive-product .products .product-grid-item.wd-product:hover,
.woocommerce.tax-product_cat .products .product-grid-item.wd-product:hover,
.woocommerce-page .products .product-grid-item.wd-product:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--bg-navy-200);
}

/* Image hover-scale (1.0 → 1.03) – brand spec */
.woocommerce.archive .products .product-grid-item .wd-product-thumb img,
.post-type-archive-product .products .product-grid-item .wd-product-thumb img,
.woocommerce.tax-product_cat .products .product-grid-item .wd-product-thumb img,
.woocommerce-page .products .product-grid-item .wd-product-thumb img {
    transition: transform 200ms ease;
}

.woocommerce.archive .products .product-grid-item:hover .wd-product-thumb img,
.post-type-archive-product .products .product-grid-item:hover .wd-product-thumb img,
.woocommerce.tax-product_cat .products .product-grid-item:hover .wd-product-thumb img,
.woocommerce-page .products .product-grid-item:hover .wd-product-thumb img {
    transform: scale(1.03);
}

/* Image radius + neutral surrounding to match card */
.woocommerce.archive .products .product-grid-item .wd-product-thumb,
.post-type-archive-product .products .product-grid-item .wd-product-thumb,
.woocommerce.tax-product_cat .products .product-grid-item .wd-product-thumb,
.woocommerce-page .products .product-grid-item .wd-product-thumb {
    border-radius: calc(var(--r-md) - 2px);
    overflow: hidden;
    margin-bottom: 12px;
}


/* --- Card title (2-line clamp + min-height for alignment) -----------------
   This is THE fix for "text all over the place". Long titles get clamped to
   2 lines + ellipsis; short titles get min-height so all cards line up.
--------------------------------------------------------------------------- */
.woocommerce .products .product-grid-item .wd-product-header h3.wd-entities-title,
.woocommerce.archive .products .product-grid-item h3.wd-entities-title,
.post-type-archive-product .products .product-grid-item h3.wd-entities-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.35;
    color: var(--bg-navy-900);
    text-transform: none;
    letter-spacing: 0;
    margin: 0 0 8px 0;
    min-height: calc(15px * 1.35 * 2);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.woocommerce .products .product-grid-item .wd-product-header h3.wd-entities-title a,
.woocommerce.archive .products .product-grid-item h3.wd-entities-title a {
    color: inherit;
    text-decoration: none;
}

.woocommerce.archive .products .product-grid-item:hover h3.wd-entities-title,
.woocommerce.archive .products .product-grid-item:hover h3.wd-entities-title a,
.post-type-archive-product .products .product-grid-item:hover h3.wd-entities-title,
.post-type-archive-product .products .product-grid-item:hover h3.wd-entities-title a {
    color: var(--bg-navy-600);
}


/* --- Card category chip (the small "MIG Welding Gas" tag under the title)  */
.woocommerce.archive .products .product-grid-item .wd-product-cats,
.post-type-archive-product .products .product-grid-item .wd-product-cats,
.woocommerce.tax-product_cat .products .product-grid-item .wd-product-cats {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bg-ink-500);
    margin-bottom: 6px;
}

.woocommerce.archive .products .product-grid-item .wd-product-cats a,
.post-type-archive-product .products .product-grid-item .wd-product-cats a {
    color: var(--bg-ink-500);
    text-decoration: none;
}

.woocommerce.archive .products .product-grid-item .wd-product-cats a:hover,
.post-type-archive-product .products .product-grid-item .wd-product-cats a:hover {
    color: var(--bg-navy-600);
}


/* --- Card price ------------------------------------------------------------ */
.woocommerce.archive .products .product-grid-item .wrap-price .price,
.woocommerce.archive .products .product-grid-item .wrap-price .price > .amount,
.woocommerce.archive .products .product-grid-item .wrap-price .amount,
.post-type-archive-product .products .product-grid-item .wrap-price .price,
.post-type-archive-product .products .product-grid-item .wrap-price .amount,
.woocommerce.tax-product_cat .products .product-grid-item .wrap-price .price,
.woocommerce.tax-product_cat .products .product-grid-item .wrap-price .amount {
    color: var(--bg-navy-700);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
}

.woocommerce.archive .products .product-grid-item .wrap-price del,
.post-type-archive-product .products .product-grid-item .wrap-price del,
.woocommerce.tax-product_cat .products .product-grid-item .wrap-price del {
    color: var(--bg-ink-400);
    font-weight: 500;
    font-size: 14px;
}


/* --- "Select delivery location" button inside the card (PI Shipping plugin)
   Currently renders as a default Woodmart .button (uppercase, dark grey).
   Tone it down so it doesn't compete with the price.
--------------------------------------------------------------------------- */
.woocommerce.archive .products .product-grid-item .pisol-shipping-calculator-button,
.post-type-archive-product .products .product-grid-item .pisol-shipping-calculator-button,
.woocommerce.tax-product_cat .products .product-grid-item .pisol-shipping-calculator-button {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 8px;
    background-color: transparent !important;
    color: var(--bg-navy-600) !important;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    text-transform: none !important;
    letter-spacing: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    min-height: 0;
    line-height: 1.4;
}

.woocommerce.archive .products .product-grid-item .pisol-shipping-calculator-button:hover,
.post-type-archive-product .products .product-grid-item .pisol-shipping-calculator-button:hover,
.woocommerce.tax-product_cat .products .product-grid-item .pisol-shipping-calculator-button:hover {
    color: var(--bg-navy-700) !important;
}


/* --- Card "Add to basket" mini button (loop-add-to-cart) — PRIMARY action,
       yellow accent matches sitewide .add_to_cart_button + hero CTA. -------- */
.woocommerce .products .product-grid-item .add_to_cart_button,
.woocommerce .products .product-grid-item .product_type_simple,
.woocommerce .products .product-grid-item .product_type_variable {
    background-color: var(--bg-yellow);
    color: var(--bg-navy-900);
    border: 1px solid var(--bg-yellow);
    border-radius: var(--r-md);
    text-transform: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    padding: 8px 14px;
    box-shadow: var(--shadow-sm);
    transition: background-color 150ms ease, border-color 150ms ease;
}

.woocommerce .products .product-grid-item .add_to_cart_button:hover,
.woocommerce .products .product-grid-item .product_type_simple:hover,
.woocommerce .products .product-grid-item .product_type_variable:hover {
    background-color: var(--bg-yellow-hover);
    border-color: var(--bg-yellow-hover);
    color: var(--bg-navy-900);
}


/* --- Sale badge (.product-label.onsale) -----------------------------------
   brand-tokens already does background + colour. Pin it to the top-left and
   keep it small.
--------------------------------------------------------------------------- */
.woocommerce.archive .products .product-grid-item .product-labels .onsale,
.woocommerce.archive .products .product-grid-item .product-labels .product-label.onsale,
.post-type-archive-product .products .product-grid-item .product-labels .product-label.onsale,
.woocommerce.tax-product_cat .products .product-grid-item .product-labels .product-label.onsale {
    top: 8px;
    left: 8px;
    padding: 2px 10px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.6;
}


/* --- Wishlist icon button on card ----------------------------------------- */
.woocommerce.archive .products .product-grid-item .wd-wishlist-btn .wd-action-icon,
.post-type-archive-product .products .product-grid-item .wd-wishlist-btn .wd-action-icon {
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--bg-navy-600);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-sm);
}

.woocommerce.archive .products .product-grid-item .wd-wishlist-btn:hover .wd-action-icon,
.post-type-archive-product .products .product-grid-item .wd-wishlist-btn:hover .wd-action-icon {
    color: var(--bg-navy-700);
    background-color: #FFFFFF;
}


/* --- Pagination -----------------------------------------------------------
   .page-numbers.current already renders with primary brown via --wd-primary-
   color. Tighten typography + spacing.
--------------------------------------------------------------------------- */
.woocommerce.archive .woocommerce-pagination,
.post-type-archive-product .woocommerce-pagination,
.woocommerce.tax-product_cat .woocommerce-pagination {
    margin-top: 32px;
}

.woocommerce.archive .woocommerce-pagination .page-numbers,
.post-type-archive-product .woocommerce-pagination .page-numbers,
.woocommerce.tax-product_cat .woocommerce-pagination .page-numbers {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--bg-ink-700);
    border-radius: var(--r-md);
    padding: 6px 12px;
    transition: background-color 150ms ease, color 150ms ease;
}

.woocommerce.archive .woocommerce-pagination .page-numbers:hover:not(.current),
.post-type-archive-product .woocommerce-pagination .page-numbers:hover:not(.current),
.woocommerce.tax-product_cat .woocommerce-pagination .page-numbers:hover:not(.current) {
    background-color: var(--bg-navy-50);
    color: var(--bg-navy-700);
}

.woocommerce.archive .woocommerce-pagination .page-numbers.current,
.post-type-archive-product .woocommerce-pagination .page-numbers.current,
.woocommerce.tax-product_cat .woocommerce-pagination .page-numbers.current {
    background-color: var(--bg-navy-500);
    color: #FFFFFF;
}


/* --- Sort dropdown / per-page selector ------------------------------------ */
.woocommerce.archive .woocommerce-ordering select.orderby,
.post-type-archive-product .woocommerce-ordering select.orderby,
.woocommerce.tax-product_cat .woocommerce-ordering select.orderby {
    font-family: var(--font-body);
    color: var(--bg-ink-700);
    border: 1px solid var(--bg-ink-200);
    border-radius: var(--r-md);
}

.woocommerce.archive .wd-products-per-page .per-page-variation.current-variation,
.post-type-archive-product .wd-products-per-page .per-page-variation.current-variation,
.woocommerce.tax-product_cat .wd-products-per-page .per-page-variation.current-variation {
    color: var(--bg-navy-600);
    font-weight: 700;
}

.woocommerce.archive .woocommerce-result-count,
.post-type-archive-product .woocommerce-result-count,
.woocommerce.tax-product_cat .woocommerce-result-count {
    font-family: var(--font-body);
    color: var(--bg-ink-500);
    font-size: 14px;
}


/* --- View-mode toggle (grid 2/3/4-up) ------------------------------------- */
.woocommerce.archive .wd-products-shop-view .shop-view.active,
.woocommerce.archive .wd-products-shop-view .shop-view:hover,
.post-type-archive-product .wd-products-shop-view .shop-view.active,
.post-type-archive-product .wd-products-shop-view .shop-view:hover,
.woocommerce.tax-product_cat .wd-products-shop-view .shop-view.active,
.woocommerce.tax-product_cat .wd-products-shop-view .shop-view:hover {
    color: var(--bg-navy-600);
}


/* ==========================================================================
   3. MOBILE TIGHTENING (≤ 767px)
   ========================================================================== */

@media (max-width: 767px) {
    .woocommerce.archive .products .product-grid-item.wd-product,
    .post-type-archive-product .products .product-grid-item.wd-product,
    .woocommerce.tax-product_cat .products .product-grid-item.wd-product {
        padding: 12px;
    }

    .woocommerce .products .product-grid-item .wd-product-header h3.wd-entities-title {
        font-size: 14px;
    }

    .single-product .single_add_to_cart_button {
        font-size: 15px;
        padding: 12px 18px;
    }
}