/**
 * Product Card Overrides - Force Our Design
 * Higher specificity to override WooCommerce/Astra defaults
 *
 * Why !important? Astra and WooCommerce inject inline styles and
 * high-specificity selectors that our normal child theme CSS can't
 * override. This file uses !important to guarantee our design wins.
 *
 * @since 1.0.0
 */


/* ============================================
   HIDE ASTRA SHOPPING BAG HOVER ICON
   Removes the default "add to cart" overlay
   ============================================ */

.woocommerce ul.products li.product .ast-shop-product-out-of-stock,
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .ast-on-card-button,
.woocommerce ul.products li.product .ast-shop-hover-area,
.woocommerce .products .product .button.ajax_add_to_cart {
    display: none !important;
}

/* Remove Astra thumbnail overlay */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap::after {
    display: none !important;
}


/* ============================================
   PRODUCT GRID - Force CSS Grid Layout
   4 columns desktop, 2 tablet, 1 mobile
   ============================================ */

.woocommerce .products,
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
    list-style: none !important;
    margin: 2rem 0 !important;
    padding: 0 !important;
}

/**
 * Sidebar layout — 3 columns when filter panel is visible.
 * Astra adds ast-left-sidebar / ast-right-sidebar to body
 * when a sidebar is active (e.g. Ryefield category pages with WOOF).
 * 4 columns is too cramped with the sidebar taking ~25% width.
 */
@media (min-width: 1025px) {
    .ast-left-sidebar .woocommerce .products,
    .ast-left-sidebar .woocommerce ul.products,
    .ast-right-sidebar .woocommerce .products,
    .ast-right-sidebar .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}


/* ============================================
   PRODUCT CARD BASE
   Clean white cards with subtle border
   ============================================ */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: var(--white, #ffffff) !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}


/* ============================================
   HOVER EFFECT - Card Lift + Shadow
   ============================================ */

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
    border-color: #e63946 !important;
}


/* ============================================
   PRODUCT IMAGE - 1:1 Ratio Container
   Excludes .product-category items (subcategory tiles)
   ============================================ */

/* Product link — normal flow so title + price are visible below image.
   Previously this had padding-top:100% + overflow:hidden which clipped
   the title and price that sit inside the same link element.
   position:static stops Astra's position:relative from making this a
   positioning context (only .astra-shop-thumbnail-wrap should be).
   height:auto + min-height:0 override the global 48px min-height for
   <a> tags (responsive.css touch targets) which constrains this wrapper. */
.woocommerce ul.products li.product:not(.product-category) .woocommerce-loop-product__link,
.woocommerce ul.products li.product:not(.product-category) a.woocommerce-LoopProduct-link {
    display: block !important;
    text-decoration: none !important;
    overflow: visible !important;
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Image wrapper — 1:1 aspect ratio, clips the image zoom effect only */
.woocommerce ul.products li.product:not(.product-category) .astra-shop-thumbnail-wrap {
    position: relative !important;
    padding-top: 100% !important;
    overflow: hidden !important;
    background: var(--light-gray, #f3f4f6) !important;
}

.woocommerce ul.products li.product:not(.product-category) .astra-shop-thumbnail-wrap img,
.woocommerce ul.products li.product:not(.product-category) .astra-shop-thumbnail-wrap .attachment-woocommerce_thumbnail {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Image zoom on hover — scoped to thumbnail wrap */
.woocommerce ul.products li.product:not(.product-category):hover .astra-shop-thumbnail-wrap img,
.woocommerce ul.products li.product:not(.product-category):hover .astra-shop-thumbnail-wrap .attachment-woocommerce_thumbnail {
    transform: scale(1.08) !important;
}

/**
 * Larger thumbnails when sidebar is active.
 * Reduce inner padding from 1rem to 0.5rem so the product image
 * fills more of the 1:1 square, making it more prominent.
 */
.ast-left-sidebar .woocommerce ul.products li.product:not(.product-category) .astra-shop-thumbnail-wrap img,
.ast-right-sidebar .woocommerce ul.products li.product:not(.product-category) .astra-shop-thumbnail-wrap img {
    padding: 0.5rem !important;
}

/* ============================================
   SUBCATEGORY TILES
   Structured card: gray image zone + text area
   Matches product card design language
   ============================================ */

/* Link wrapper — flex column fills the entire card */
.woocommerce ul.products li.product-category a {
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    height: 100% !important;
    padding: 0 !important;
}

/* Image zone — white background, border separates from text */
.woocommerce ul.products li.product-category a img {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 140px !important;
    object-fit: contain !important;
    padding: 0.75rem !important;
    background: var(--white, #ffffff) !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* Title — override Astra's absolute positioning so it flows below the image */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    background-color: #fef2f2 !important;
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: var(--font-size-sm, 0.875rem) !important;
    font-weight: var(--font-weight-semibold, 600) !important;
    color: var(--dark-gray, #1f2937) !important;
    text-transform: none !important;
    text-align: center !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0.75rem !important;
    flex: 1 !important;
}

/* Product count — lighter, smaller, below title */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title mark,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count {
    display: block !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: var(--medium-gray, #6b7280) !important;
    background: none !important;
    margin-top: 0.25rem !important;
}


/* ============================================
   PRODUCT TITLE
   ============================================ */

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product:not(.product-category) h2 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--dark-gray, #1f2937) !important;
    padding: 0 1rem 0.5rem !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 3.9em !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Summary wrap - flex column for element ordering */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
    padding-top: 0.5em !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Order elements within summary wrap: title (1), badges (2), price (3), button (4) */
.woocommerce ul.products li.product .astra-shop-summary-wrap .woocommerce-loop-product__title,
.woocommerce ul.products li.product .astra-shop-summary-wrap h2 {
    order: 1 !important;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap .ye-spec-badges {
    order: 2 !important;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap .price {
    order: 3 !important;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap .button,
.woocommerce ul.products li.product .astra-shop-summary-wrap .add_to_cart_button {
    order: 4 !important;
}


/* ============================================
   PRODUCT PRICE
   Visible upfront - trade customers need prices
   ============================================ */

.woocommerce ul.products li.product .price {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--dark-gray, #1f2937) !important;
    padding: 0 1rem 0.5rem !important;
    margin: 0 !important;
}


/* ============================================
   CATEGORY BADGE - Hidden
   ============================================ */

.woocommerce ul.products li.product .ast-woo-product-category,
.ast-woo-product-category {
    display: none !important;
}


/* ============================================
   ADD TO CART BUTTON
   Red branded CTA at bottom of card
   ============================================ */

.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_simple {
    display: block !important;
    width: calc(100% - 2rem) !important;
    margin: 0 1rem 1rem !important;
    padding: 0.875rem 1.5rem !important;
    background: var(--primary-red, #dc2626) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.woocommerce ul.products li.product .button:hover {
    background: var(--red-hover, #b91c1c) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3) !important;
}


/* ============================================
   STOCK STATUS BADGE
   ============================================ */

.woocommerce ul.products li.product .stock {
    display: inline-block !important;
    padding: 0.25rem 0.75rem !important;
    background: #10b981 !important;
    color: white !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    margin: 0 0 0.5rem 1rem !important;
}

.woocommerce ul.products li.product .out-of-stock {
    background: #ef4444 !important;
}


/* ============================================
   CART — Styles moved to cart.css (v2.0 redesign)
   Remove button is now a subtle "Remove" text link.
   Product name links styled in cart.css.
   ============================================ */


/* ============================================
   RESPONSIVE - Tablet (2 columns)
   ============================================ */

@media (max-width: 1024px) {
    .woocommerce .products,
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* ============================================
   RESPONSIVE - Mobile (1 column)
   ============================================ */

@media (max-width: 768px) {
    .woocommerce .products,
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* Compact product cards on mobile - tighter padding */
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product:not(.product-category) h2 {
        font-size: 0.8rem !important;
        padding: 0 0.625rem 0.35rem !important;
        min-height: 3.12em !important; /* 2-line clamp at smaller font */
    }

    .woocommerce ul.products li.product .price {
        font-size: 0.95rem !important;
        padding: 0 0.625rem 0.35rem !important;
    }

    .woocommerce ul.products li.product .button.add_to_cart_button,
    .woocommerce ul.products li.product .button.product_type_simple {
        width: calc(100% - 1.25rem) !important;
        margin: 0 0.625rem 0.625rem !important;
        padding: 0.625rem 0.75rem !important;
        font-size: 0.8rem !important;
    }
}


/* ============================================
   WOOF FILTER SIDEBAR
   CEF-style compact collapsible filter sections
   ============================================ */

/* --- Sidebar heading --- */
.ye-woof-filters__title {
    font-family: var(--font-heading, 'Outfit', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: var(--font-weight-bold, 700) !important;
    color: var(--dark-gray, #1f2937) !important;
    margin: 0 0 0.5rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 2px solid var(--primary-red, #dc2626) !important;
}


/* --- Filter blocks: zero gap between sections --- */
.ye-woof-filters .woof_container {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    float: none !important;
    width: 100% !important;
}

.ye-woof-filters .woof_container + .woof_container {
    border-top: 1px solid var(--border-color, #e5e7eb) !important;
}

.ye-woof-filters .woof_container_inner {
    padding: 0 !important;
    margin: 0 !important;
}

.ye-woof-filters .woof_container_overlay_item {
    display: none !important;
}


/* --- Toggle header: tight single-line button --- */
.ye-woof-filters h4.ye-woof-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    font-family: var(--font-body, 'DM Sans', sans-serif) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--dark-gray, #1f2937) !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    user-select: none !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
}

.ye-woof-filters h4.ye-woof-toggle:hover {
    color: var(--primary-red, #dc2626) !important;
}

/* Chevron triangle — right-aligned */
.ye-woof-filters h4.ye-woof-toggle::after {
    content: '' !important;
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid currentColor !important;
    flex-shrink: 0 !important;
    margin-left: 8px !important;
    transition: transform 0.15s ease !important;
}

/* Rotate chevron when expanded */
.ye-woof-filters h4.ye-woof-toggle:not(.is-collapsed)::after {
    transform: rotate(180deg) !important;
}


/* --- Checkbox list: tight vertical spacing --- */
.ye-woof-filters .woof_list,
.ye-woof-filters ul.woof_list_checkbox {
    margin: 0 !important;
    padding: 0 0 4px !important;
    list-style: none !important;
}

.ye-woof-filters .woof_list li {
    padding: 1px 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
}

.ye-woof-filters .woof_block_html_items {
    padding: 0 !important;
    margin: 0 !important;
}

/* Checkbox labels — compact */
.ye-woof-filters .woof_checkbox_label {
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    min-height: 0 !important;
}

/* Product count badge */
.ye-woof-filters .woof_checkbox_count {
    font-size: 0.7rem !important;
    color: var(--medium-gray, #6b7280) !important;
}

/* Hide WOOF's own toggle buttons if present */
.ye-woof-filters .woof_container_toggle {
    display: none !important;
}


/* --- Narrower filter sidebar (Astra default 30% is too wide for short labels) --- */
@media (min-width: 993px) {
    .ast-left-sidebar #secondary {
        width: 20% !important;
        padding-right: 24px !important;
    }
    .ast-left-sidebar #primary {
        width: 80% !important;
    }
}


/* --- Move filter chips to sidebar (CEF-style) --- */

/* Hide the chips in the product area — sidebar copy is shown instead */
#primary .woof_products_top_panel,
#primary .woof_products_top_panel_content {
    display: none !important;
}

/* Header: "Filters" left, "Clear" right */
.ye-woof-filters__header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 2px solid var(--primary-red, #dc2626) !important;
    margin-bottom: 0.5rem !important;
}

.ye-woof-filters__title {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}

.ye-woof-filters__clear {
    font-size: 0.8rem !important;
    color: var(--primary-red, #dc2626) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.ye-woof-filters__clear:hover {
    text-decoration: underline !important;
}

/* Sidebar filter chips — gray box like CEF */
#secondary .woof_products_top_panel {
    background: var(--light-gray, #f3f4f6) !important;
    border-radius: var(--radius-sm, 4px) !important;
    padding: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.8rem !important;
    line-height: 1.6 !important;
}

#secondary .woof_products_top_panel ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#secondary .woof_products_top_panel li {
    margin: 0 0 0.25rem !important;
    float: none !important;
}

/* Hide WOOF's "Clear All" inside the panel — we have our own "Clear" in the header */
#secondary .woof_products_top_panel .woof_reset_button_2 {
    display: none !important;
}

/* Hide the old Reset button at bottom (replaced by "Clear" in header) */
.ye-woof-filters .woof_reset_button {
    display: none !important;
}


/* --- Price suffix (inc. VAT / ex. VAT) on product cards --- */
.woocommerce ul.products li.product .price .woocommerce-Price-suffix {
    font-size: 0.7rem !important;
    font-weight: 400 !important;
    color: var(--medium-gray, #6b7280) !important;
    display: inline !important;
}


/* --- Spec badges on product cards (Ryefield category) --- */

/**
 * Badge container — sits between title and price
 * Uses flex-wrap so badges flow onto next line if needed
 */
.ye-spec-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
    padding: 0 1rem 0.5rem !important;
    margin: 0 !important;
    /* Ensure badges are visible and in flow */
    position: relative !important;
    z-index: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/**
 * Individual spec badge — orange pill
 * Uppercase style for clean, scannable text
 */
.ye-spec-badge {
    display: inline-block !important;
    background-color: #f59e0b !important;
    color: #ffffff !important;
    font-family: var(--font-body, 'DM Sans', sans-serif) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
}

/* Mobile: slightly tighter badges */
@media (max-width: 767px) {
    .ye-spec-badges {
        gap: 0.25rem !important;
        padding: 0 0.75rem 0.35rem !important;
    }

    .ye-spec-badge {
        font-size: 0.65rem !important;
        padding: 3px 8px !important;
    }
}


/* ============================================
   RED FILTER CHIPS (Selected Filters)
   Pill-shaped chips showing active filter selections
   ============================================ */

.woof_products_top_panel a[data-tax],
#secondary .woof_products_top_panel a[data-tax] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background-color: #fef2f2 !important;
    color: #e63946 !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border: 1px solid #fecaca !important;
    margin: 4px 4px 4px 0 !important;
    transition: all 0.2s ease !important;
}

.woof_products_top_panel a[data-tax]:hover,
#secondary .woof_products_top_panel a[data-tax]:hover {
    background-color: #fee2e2 !important;
    border-color: #e63946 !important;
}

/* X icon after chip text */
.woof_remove_ppi::after {
    content: '✕' !important;
    font-size: 0.7rem !important;
    margin-left: 4px !important;
    opacity: 0.7 !important;
}


/* ============================================
   CUSTOM CHECKBOXES WITH RED TICKS
   Replace native checkboxes with styled version

   Note: WOOF uses iCheck library which wraps checkboxes in
   <div class="icheckbox_square-blue"> - we need to handle this
   ============================================ */

/* LI container - flex layout for horizontal alignment */
.ye-woof-filters li:has(input.woof_checkbox_term),
.woof_container li:has(input.woof_checkbox_term),
.woof_list li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
    cursor: pointer !important;
}

/* Hide the iCheck wrapper completely - we'll use our own visual */
.ye-woof-filters .icheckbox_square-blue,
.woof_container .icheckbox_square-blue,
.icheckbox_square-blue {
    display: none !important;
}

/* Hide native checkboxes */
.woof_container input.woof_checkbox_term,
.ye-woof-filters input.woof_checkbox_term,
input.woof_checkbox_term {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    opacity: 0 !important;
}

/* Checkbox label - inline display, ::before creates the visual checkbox */
.woof_container .woof_checkbox_label,
.ye-woof-filters .woof_checkbox_label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    color: #6b7280 !important;
    padding: 4px 0 !important;
    transition: color 0.2s ease !important;
    flex: 1 !important;
}

/* Custom checkbox via ::before on label */
.woof_container .woof_checkbox_label::before,
.ye-woof-filters .woof_checkbox_label::before {
    content: '' !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

/* Hover state - label */
.woof_container .woof_checkbox_label:hover,
.ye-woof-filters .woof_checkbox_label:hover {
    color: #1f2937 !important;
}

/* Hover state - checkbox border turns red */
.woof_container .woof_checkbox_label:hover::before,
.ye-woof-filters .woof_checkbox_label:hover::before {
    border-color: #e63946 !important;
}

/* Checked state - use .woof_checkbox_label_selected class that WOOF adds */
.woof_container .woof_checkbox_label_selected,
.ye-woof-filters .woof_checkbox_label_selected,
.woof_checkbox_label_selected {
    color: #1f2937 !important;
    font-weight: 500 !important;
}

.woof_container .woof_checkbox_label_selected::before,
.ye-woof-filters .woof_checkbox_label_selected::before,
.woof_checkbox_label_selected::before {
    background-color: #e63946 !important;
    border-color: #e63946 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") !important;
    background-size: 12px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Also support input:checked + label for non-iCheck scenarios */
.woof_container input.woof_checkbox_term:checked + .woof_checkbox_label,
.ye-woof-filters input.woof_checkbox_term:checked + .woof_checkbox_label {
    color: #1f2937 !important;
    font-weight: 500 !important;
}

.woof_container input.woof_checkbox_term:checked + .woof_checkbox_label::before,
.ye-woof-filters input.woof_checkbox_term:checked + .woof_checkbox_label::before {
    background-color: #e63946 !important;
    border-color: #e63946 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") !important;
    background-size: 12px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}


/* ============================================
   FILTER SIDEBAR BACKGROUND
   Light grey to visually separate from product grid
   ============================================ */

.ast-left-sidebar #secondary,
.ast-right-sidebar #secondary {
    background-color: #f8fafc !important;
    padding: 1rem !important;
    border-radius: 8px !important;
}

.ye-woof-filters {
    background-color: #f8fafc !important;
    padding: 1rem !important;
    border-radius: 8px !important;
}


/* ============================================
   BREADCRUMB STYLING
   Muted grey links, red current page
   ============================================ */

.woocommerce-breadcrumb {
    color: #6b7280 !important;
    font-size: 0.875rem !important;
}

.woocommerce-breadcrumb a {
    color: #6b7280 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.woocommerce-breadcrumb a:hover {
    color: #e63946 !important;
}

/* Current page (last item, not a link) */
.woocommerce-breadcrumb > span:last-child,
.woocommerce-breadcrumb strong,
.woocommerce-breadcrumb > *:last-child:not(a) {
    color: #e63946 !important;
}


/* ============================================
   CLEAR FILTERS LINK
   Red text with hover underline
   ============================================ */

.woof_reset_button,
.woof_reset_button_2,
.woof_products_top_panel .woof_reset_button_2,
.ye-woof-filters__clear {
    color: #e63946 !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.woof_reset_button:hover,
.woof_reset_button_2:hover,
.ye-woof-filters__clear:hover {
    text-decoration: underline !important;
    color: #b91c1c !important;
}


/* ============================================
   DARK CATEGORY NAVIGATION BAR
   Deep navy background with white text
   ============================================ */

.ye-category-nav {
    background-color: #1a2332 !important;
    border-bottom-color: #1a2332 !important;
}

.ye-category-nav__link {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 14px 18px !important;
    transition: all 0.2s ease !important;
    border-bottom: 3px solid transparent !important;
}

.ye-category-nav__link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Active/current category */
.ye-category-nav__item.active .ye-category-nav__link,
.ye-category-nav__item.current-menu-item .ye-category-nav__link,
.ye-category-nav__link[aria-expanded="true"] {
    color: #e63946 !important;
    border-bottom-color: #e63946 !important;
}

/* Chevron icon color */
.ye-category-nav__chevron {
    color: rgba(255, 255, 255, 0.6) !important;
}

.ye-category-nav__item.is-open .ye-category-nav__chevron,
.ye-category-nav__link:hover .ye-category-nav__chevron {
    color: rgba(255, 255, 255, 0.85) !important;
}


/* ============================================
   PAGE TITLE WITH RED ACCENT LINE
   Gradient line extending from category title
   ============================================ */

.woocommerce-products-header__title,
.page-title,
.woocommerce-products-header h1,
.ast-archive-description .ast-archive-title {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 8px !important;
}

.woocommerce-products-header__title::after,
.page-title::after,
.woocommerce-products-header h1::after,
.ast-archive-description .ast-archive-title::after {
    content: '' !important;
    flex: 1 !important;
    height: 3px !important;
    max-width: 120px !important;
    background: linear-gradient(90deg, #e63946 0%, transparent 100%) !important;
    border-radius: 2px !important;
}


/* ============================================
   PAGE HEADER SPACING
   Tighter spacing between title, count, and sort
   ============================================ */

.woocommerce-products-header {
    margin-bottom: 8px !important;
}

.ast-archive-description {
    margin-bottom: 8px !important;
}

.woocommerce-result-count {
    margin-bottom: 12px !important;
    margin-top: 0 !important;
}

.woocommerce-ordering {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

/* Results count and ordering wrapper */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
    margin-bottom: 16px !important;
}

/* Astra specific - archive header */
.ast-woocommerce-container .woocommerce-products-header {
    padding-bottom: 0 !important;
    margin-bottom: 8px !important;
}


/* ============================================
   BREADCRUMB STYLING (ADDITIONAL SELECTORS)
   Ensure breadcrumbs are styled correctly
   ============================================ */

/* Astra breadcrumb selectors */
.ast-breadcrumbs,
.ast-breadcrumbs-wrapper,
nav.woocommerce-breadcrumb,
.woocommerce-breadcrumb {
    color: #6b7280 !important;
    font-size: 0.875rem !important;
    margin-bottom: 12px !important;
}

.ast-breadcrumbs a,
.ast-breadcrumbs-wrapper a,
nav.woocommerce-breadcrumb a,
.woocommerce-breadcrumb a {
    color: #6b7280 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.ast-breadcrumbs a:hover,
.ast-breadcrumbs-wrapper a:hover,
nav.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:hover {
    color: #e63946 !important;
}

/* Current page - typically the last text node or span */
.woocommerce-breadcrumb > span:last-of-type,
.ast-breadcrumbs > span:last-of-type,
.woocommerce-breadcrumb strong {
    color: #e63946 !important;
    font-weight: 500 !important;
}


/* ============================================
   CHECKOUT PAGE — HIDE ORPHANED "— OR —" DIVIDER
   WooCommerce Payments shows this separator between
   express checkout buttons and the billing form.
   In test mode (or when no express buttons render)
   it appears orphaned. Hide it until Stripe is live.
   Re-evaluate once express checkout is enabled.
   ============================================ */

#wcpay-payment-request-button-separator,
#wc-stripe-payment-request-button-separator,
.wcpay-payment-request-wrapper-separator {
    display: none !important;
}