/* ye-bundle variables=5298 header-custom=20984 category-nav=6929 navigation=12977 products=25975 homepage=8583 responsive=8595 product-overrides=33894 soft-ui=2820 */
/* ===== variables.css ===== */
/**
 * Design System Variables
 * Your Electrics - Color, Typography, Spacing Standards
 *
 * This file defines ALL design tokens used across the theme.
 * Change values here to update the entire site's appearance.
 */

/* ============================================
   SELF-HOSTED GOOGLE FONTS
   Eliminates external DNS lookups to fonts.googleapis.com
   and fonts.gstatic.com (saves 200-400ms on mobile).
   ============================================ */

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dm-sans-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/dm-sans-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/dm-sans-latin-700-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/outfit-latin-600-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/outfit-latin-700-normal.woff2') format('woff2');
}

:root {
    /* ============================================
       COLORS
       ============================================ */

    /* Brand Colors */
    --primary-red: #dc2626;
    --red-hover: #b91c1c;
    --red-light: #fecaca;

    /* Status Colors — success */
    --success-green: #16a34a;
    --success-green-bg: #f0fdf4;

    /* Neutral Colors */
    --dark-gray: #1f2937;
    --medium-gray: #6b7280;
    --light-gray: #f3f4f6;
    --white: #ffffff;
    --black: #000000;

    /* Border & Dividers */
    --border-color: #e5e7eb;
    --border-light: #f3f4f6;

    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #fafafa;
    --bg-tertiary: #f3f4f6;

    /* ============================================
       TYPOGRAPHY
       ============================================ */

    /* Font Families */
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Courier New', Courier, monospace;

    /* Font Sizes */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ============================================
       SPACING
       ============================================ */

    /* Base spacing unit: 1rem = 16px */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 2.5rem;   /* 40px */
    --spacing-3xl: 3rem;     /* 48px */
    --spacing-4xl: 4rem;     /* 64px */

    /* ============================================
       LAYOUT
       ============================================ */

    /* Max Widths */
    --max-width-container: 1400px;
    --max-width-content: 1200px;
    --max-width-narrow: 800px;

    /* Breakpoints (reference values - use media queries in CSS) */
    --breakpoint-mobile: 320px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1400px;

    /* ============================================
       EFFECTS
       ============================================ */

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Z-Index Layers */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
}

/* ============================================
   BASE TYPOGRAPHY
   Apply font families to body and headings
   ============================================ */

body {
    font-family: var(--font-body);
    color: var(--dark-gray);
    line-height: var(--line-height-normal);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

/* ===== header-custom.css ===== */
/**
 * Custom Header & Footer Styles
 * Your Electrics - Replaces Astra default header/footer
 *
 * Structure:
 * 1. Header Top Bar (logo, phone/email, search, cart, login)
 * 2. Mobile Header Adjustments
 * 3. Footer
 */


/* ============================================
   0. ANNOUNCEMENT / TRUST BAR
   Slim bar above header — delivery info, trade CTA
   ============================================ */

.ye-announcement-bar {
    background-color: var(--dark-gray);
    color: var(--white);
    font-size: var(--font-size-xs);
    line-height: 1;
}

.ye-announcement-bar__container {
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
}

.ye-announcement-bar__items {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-sm) 0;
}

.ye-announcement-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.85);
}

.ye-announcement-bar__item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.ye-announcement-bar__item--cta a {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: var(--font-weight-semibold);
    transition: color var(--transition-fast);
}

.ye-announcement-bar__item--cta a:hover {
    color: var(--primary-red);
}

/* Mobile: hide announcement bar — saves vertical space,
   text items don't fit on small screens */
@media (max-width: 767px) {
    .ye-announcement-bar {
        display: none;
    }
}


/* Hide reCAPTCHA v3 badge — attribution text in footer per Google's terms */
.grecaptcha-badge {
    visibility: hidden !important;
}


/* ============================================
   1. HEADER TOP BAR
   White background with logo, phone, search, cart, login
   ============================================ */

.ye-header {
    background-color: var(--white);
    position: sticky;
    top: 0;
    z-index: var(--z-index-sticky);
}

/**
 * Top bar — contains all header elements
 */
.ye-header__top {
    border-bottom: 1px solid var(--border-color);
    padding: var(--spacing-md) 0;
}

/* ── Shrinking sticky header ──────────────────────────────
   On scroll, navigation.js adds .ye-header--compact.
   Hides secondary elements (contact, account, VAT toggle)
   and shrinks the logo, reducing the header from ~123px
   to ~50px. Only applies on desktop where the full header
   is shown. Transitions provide a smooth collapse.
   ───────────────────────────────────────────────────────── */
@media (min-width: 1024px) {

    /* Transition the padding so the collapse is smooth */
    .ye-header__top {
        transition: padding 0.25s ease;
    }

    .ye-header--compact .ye-header__top {
        padding: 6px 0;
    }

    /* Logo: shrink from 90px to 36px */
    .ye-header__logo img {
        transition: max-height 0.25s ease;
    }

    .ye-header--compact .ye-header__logo img {
        max-height: 36px;
    }

    /* Hide secondary elements: contact info, account link, VAT toggle */
    .ye-header__contact,
    .ye-header__account,
    .ye-header__container > .ye-vat-toggle {
        transition: opacity 0.2s ease, max-height 0.25s ease;
        overflow: hidden;
        max-height: 60px; /* enough for the full content */
    }

    .ye-header--compact .ye-header__contact,
    .ye-header--compact .ye-header__account,
    .ye-header--compact .ye-header__container > .ye-vat-toggle {
        opacity: 0;
        max-height: 0;
        pointer-events: none;
        margin: 0;
        padding: 0;
    }

    /* Search bar: reduce height slightly */
    .ye-header--compact .ye-header__search input[type="search"],
    .ye-header--compact .ye-header__search .search-field {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        min-height: 38px;
    }

    /* Cart button: slightly more compact */
    .ye-header--compact .ye-header-cart {
        padding: 0.5rem 1rem;
        min-height: 38px;
    }
}

/* ── Phone and tablet: collapse the search row on scroll ──────
   Below 1024px the header is two rows (logo/menu/icons, then a full-width
   search row) and ~129–155px tall, plus the 66px sticky add-to-cart bar.
   Once scrolled (navigation.js adds .ye-header--compact; enter 120 / exit 20),
   the search row is removed and the top padding trims, leaving ~65px.
   The row-gap is zeroed too, or the empty collapsed row would still leave a gap.
   visibility:hidden takes the hidden input out of the tab order. Never applied
   before the visitor interacts — see the JS.

   NO height transitions here, deliberately. The header is in the page flow, so
   re-expanding it as you reach the top used to push the whole page down ~58px
   (~0.08 layout shift). The JS measures how much height the compact state gives
   up (--ye-compact-comp) and this rule hands exactly that back as margin below
   it, so the page never moves. That only holds if the height and the margin
   change in the same frame, so they must not animate. ── */
@media (max-width: 1023px) {

    .ye-header--compact {
        margin-bottom: var(--ye-compact-comp, 0px);
    }

    .ye-header--compact .ye-header__top {
        padding: 8px 0;
    }

    .ye-header--compact .ye-header__container {
        row-gap: 0;
    }

    .ye-header--compact .ye-header__search {
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        pointer-events: none;
    }

    /* Used only for the JS dry-run measurement: no transitions anywhere in the
       header, so reading heights is instant and nothing flashes. */
    .ye-header--measuring,
    .ye-header--measuring * {
        transition: none !important;
    }
}

/**
 * Header container — flex layout
 * Aligns: logo | phone | search | cart | login | hamburger(mobile)
 */
.ye-header__container {
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

/**
 * Logo — image-based
 */
.ye-header__logo {
    text-decoration: none;
    flex-shrink: 0;
    line-height: 0; /* removes extra space below img */
}

.ye-header__logo img {
    max-height: 90px;
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
}

.ye-header__logo:hover {
    opacity: 0.85;
}

/**
 * Contact section — phone + email, stacked vertically
 */
.ye-header__contact {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex-shrink: 0;
}

.ye-header__contact-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    line-height: 1;
}

.ye-header__contact-row svg {
    flex-shrink: 0;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px;
    max-width: 14px;
    color: var(--primary-red);
}

.ye-header__contact-row a {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--font-size-sm);
    text-decoration: none;
    line-height: 1;
    padding: 0;
    margin: 0;
    min-height: 0 !important; /* Override Astra's 48px min-height on all <a> tags */
}

.ye-header__phone-number {
    font-weight: var(--font-weight-bold);
    color: var(--dark-gray);
}

.ye-header__phone-number:hover {
    color: var(--primary-red);
}

.ye-header__email {
    color: var(--medium-gray);
}

.ye-header__email:hover {
    color: var(--primary-red);
}

/**
 * Search bar — flexible width, with magnifying glass icon
 */
.ye-header__search {
    flex: 1;
    max-width: 550px;
    min-width: 200px;
    position: relative;
}

/* Style the WooCommerce product search form */
.ye-header__search .woocommerce-product-search,
.ye-header__search .search-form {
    display: flex;
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden; /* Clip the button to the input's rounded shape */
}

.ye-header__search input[type="search"],
.ye-header__search .search-field {
    width: 100%;
    padding: 0.75rem 3rem 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    min-height: 44px;
    transition: border-color var(--transition-base);
    background-color: var(--white);
}

.ye-header__search input[type="search"]:focus,
.ye-header__search .search-field:focus {
    outline: none;
    border-color: var(--primary-red);
}

/**
 * Search submit button — styled as a magnifying glass icon
 * WooCommerce renders <button type="submit"> (not <input>),
 * so we target both element types for safety.
 * Uses an inline SVG data URI as background image so the button
 * is fully clickable and submits the search form.
 */
.ye-header__search input[type="submit"],
.ye-header__search button[type="submit"],
.ye-header__search .search-submit {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 44px;
    background-color: var(--primary-red);
    border: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    cursor: pointer;
    font-size: 0;
    color: transparent;
    line-height: 0;
    padding: 0;
    z-index: 2;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;

    /* White magnifying glass on red background */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    transition: background-color var(--transition-fast);
}

.ye-header__search input[type="submit"]:hover,
.ye-header__search button[type="submit"]:hover,
.ye-header__search .search-submit:hover {
    background-color: var(--red-hover);
}

/**
 * Cart button — red with icon, text, and price
 */
.ye-header-cart {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.75rem 1.25rem;
    background-color: var(--primary-red);
    color: var(--white);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 48px;
    transition: background-color var(--transition-fast);
}

.ye-header-cart:hover {
    background-color: var(--red-hover);
    color: var(--white);
}

.ye-header-cart svg {
    flex-shrink: 0;
}

.ye-header-cart__total {
    background: var(--white);
    color: var(--primary-red);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.ye-header-cart__count {
    background: var(--white);
    color: var(--primary-red);
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

/**
 * Login / Register link
 */
.ye-header__account {
    flex-shrink: 0;
}

.ye-header__account a {
    color: var(--medium-gray);
    text-decoration: none;
    font-size: var(--font-size-sm);
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.ye-header__account a:hover {
    color: var(--primary-red);
}


/* ============================================
   2. MOBILE HEADER ADJUSTMENTS
   ============================================ */

/* Hamburger hidden on desktop (shown via navigation.css on mobile) */
.ye-hamburger {
    display: none;
}

/* Mobile: compact header — two rows
   Row 1: hamburger | logo | phone-icon | cart-icon
   Row 2: full-width search bar */
@media (max-width: 767px) {

    .ye-header__container {
        padding: 0 var(--spacing-md);
        gap: var(--spacing-sm);
        flex-wrap: wrap;
    }

    .ye-header__logo {
        margin-right: auto; /* Push phone + cart to the right */
    }

    .ye-header__logo img {
        max-height: 50px;
    }

    .ye-hamburger {
        display: flex;
        order: -1;
    }

    /* Phone + email: icon-only on mobile — tapping calls/emails */
    .ye-header__contact {
        flex-direction: row;
        gap: var(--spacing-sm);
    }

    .ye-header__contact .ye-header__phone-number,
    .ye-header__contact .ye-header__email {
        font-size: 0;        /* Hide text */
        min-height: 44px;    /* Keep tappable */
        display: flex;
        align-items: center;
    }

    .ye-header__contact .ye-header__contact-row svg {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px;
        max-width: 20px;
    }

    .ye-header__account {
        display: none;
    }

    /* Search bar: full-width row below */
    .ye-header__search {
        order: 5;
        flex-basis: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Cart: icon-only on mobile */
    .ye-header-cart {
        padding: 0.5rem 0.75rem;
        gap: 0.25rem;
        font-size: 0; /* Hide bare "Cart" text */
    }

    .ye-header-cart svg,
    .ye-header-cart__count {
        font-size: var(--font-size-xs);
    }

    .ye-header-cart__total {
        display: none;
    }
}

/* Small phones: shrink logo further */
@media (max-width: 480px) {
    .ye-header__logo img {
        max-height: 40px;
    }
}

/* Tablet: search full-width below */
@media (min-width: 768px) and (max-width: 1023px) {
    .ye-hamburger {
        display: flex;
    }

    .ye-header__container {
        flex-wrap: wrap;
    }

    .ye-header__search {
        order: 5;
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* Desktop: full header, hide hamburger */
@media (min-width: 1024px) {
    .ye-hamburger {
        display: none;
    }

    .ye-mobile-menu,
    .ye-menu-overlay {
        display: none;
    }
}

/* Mobile menu category list styling */
.ye-mobile-menu__categories {
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.ye-mobile-menu__categories h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary-red);
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--primary-red);
}

.ye-mobile-menu__categories ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ye-mobile-menu__categories li {
    border-bottom: 1px solid var(--border-light);
}

.ye-mobile-menu__categories a {
    display: block;
    padding: var(--spacing-sm) 0;
    color: var(--dark-gray);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.ye-mobile-menu__categories a:hover {
    color: var(--primary-red);
}


/* ============================================
   VAT TOGGLE — INC/EX VAT PRICE DISPLAY
   Segmented pill control in header
   ============================================ */

/**
 * Toggle container — pill shape, flex row
 */
.ye-vat-toggle {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    overflow: hidden;
    flex-shrink: 0;
}

/**
 * Toggle buttons — two segments
 */
.ye-vat-toggle__btn {
    padding: 0.375rem 0.625rem;
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--medium-gray);
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
    line-height: 1;
    min-height: 0;
}

.ye-vat-toggle__btn:hover {
    color: var(--dark-gray);
}

/**
 * Price visibility toggle — dual-render approach.
 * Server outputs both inc-VAT and ex-VAT price spans.
 * CSS shows only the active version based on .ye-vat-excl on <html>.
 * Default: inc-VAT visible, ex-VAT hidden.
 */
.ye-price--exc {
    display: none !important;
}

.ye-vat-excl .ye-price--inc {
    display: none !important;
}

.ye-vat-excl .ye-price--exc {
    display: revert !important;
}

/**
 * Toggle button active state — CSS-driven, no .is-active class.
 * Uses dark-gray (not red) to keep it subtle — it's a utility, not a CTA.
 * Default: "Inc. VAT" button active.
 */
.ye-vat-toggle__btn[data-vat="incl"] {
    background-color: var(--dark-gray);
    color: var(--white);
    font-weight: var(--font-weight-semibold);
}

/* Ex-VAT mode: swap which button looks active */
.ye-vat-excl .ye-vat-toggle__btn[data-vat="incl"] {
    background-color: transparent;
    color: var(--medium-gray);
    font-weight: var(--font-weight-medium);
}

.ye-vat-excl .ye-vat-toggle__btn[data-vat="excl"] {
    background-color: var(--dark-gray);
    color: var(--white);
    font-weight: var(--font-weight-semibold);
}

/**
 * Mobile menu VAT toggle — sits between header and categories
 */
.ye-mobile-menu__vat {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.ye-mobile-menu__vat::before {
    content: 'Prices:';
    font-size: var(--font-size-sm);
    color: var(--medium-gray);
    white-space: nowrap;
}

/* Mobile: compact toggle in header row */
@media (max-width: 767px) {
    .ye-header__container > .ye-vat-toggle {
        order: 3;
    }

    .ye-vat-toggle__btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.65rem;
    }

    /* Tap target: the pill stays small, but each segment is ~44px tall to tap.
       The pill's overflow:hidden would clip the extra area, so let it overflow
       and round the segments' own outer corners instead. Vertical-only, so the
       two segments' areas never overlap. */
    .ye-vat-toggle {
        overflow: visible;
    }

    .ye-vat-toggle__btn {
        position: relative;
    }

    .ye-vat-toggle__btn:first-child {
        border-radius: var(--radius-full) 0 0 var(--radius-full);
    }

    .ye-vat-toggle__btn:last-child {
        border-radius: 0 var(--radius-full) var(--radius-full) 0;
    }

    .ye-vat-toggle__btn::after {
        content: "";
        position: absolute;
        inset: -13px 0;
    }
}

/* Tablet: keep toggle visible */
@media (min-width: 768px) and (max-width: 1023px) {
    .ye-header__container > .ye-vat-toggle {
        order: 0;
    }
}


/* ============================================
   3. FOOTER
   Dark gray bar with links and copyright
   ============================================ */

.ye-footer {
    background-color: var(--dark-gray);
    color: var(--white);
    padding: var(--spacing-xl) 0;
    margin-top: var(--spacing-lg);
}

.ye-footer__container {
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-lg);
}

.ye-footer__menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.ye-footer__menu li a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.ye-footer__menu li a:hover {
    color: var(--primary-red);
}

.ye-footer__copyright {
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--font-size-sm);
    text-align: right;
    flex-shrink: 0;
}

.ye-footer__recaptcha-notice {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.7rem;
    text-align: center;
    width: 100%;
    margin-top: var(--spacing-sm);
}

.ye-footer__recaptcha-notice a {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: underline;
}

/* Mobile footer: stack vertically */
@media (max-width: 767px) {
    .ye-footer__container {
        flex-direction: column;
        text-align: center;
        padding: 0 var(--spacing-md);
    }

    .ye-footer__menu {
        justify-content: center;
        /* Links are 44px tall below, which already spaces the rows */
        gap: 0 var(--spacing-lg);
    }

    .ye-footer__menu li a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .ye-footer__copyright {
        text-align: center;
    }

    /* Clearance for Astra's fixed back-to-top button (#ast-scroll-top, 30px from
       the corner), so it never sits on the footer text or the reCAPTCHA notice. */
    .ye-footer {
        padding-bottom: calc(var(--spacing-xl) + 56px);
    }
}

/* ===== category-nav.css ===== */
/**
 * Category Mega Menu Navigation Bar
 * Your Electrics - Horizontal categories with dropdown subcategory panels
 *
 * Appears on ALL pages (desktop only), below the dark navigation bar.
 * Each top-level category opens a dropdown showing its subcategories.
 * Hidden below 1024px (categories accessible via mobile slide-out menu).
 *
 * Structure:
 * 1. Bar Layout & Positioning
 * 2. Category Items & Links
 * 3. Chevron Icon
 * 4. Active & Hover States
 * 5. Dropdown Panel
 * 6. Subcategory Grid
 * 7. View All Link
 * 8. Responsive (hide on mobile/tablet)
 */


/* ============================================
   1. BAR LAYOUT & POSITIONING
   Sticky white bar below main nav
   ============================================ */

/**
 * Sticky bar anchored to top on scroll.
 * Also serves as the positioning context for dropdown panels
 * (items use position: static so dropdowns anchor here).
 */
.ye-category-nav {
    background-color: var(--white);
    border-bottom: 2px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

/**
 * Two-row category bar on desktop.
 * flex-wrap: wrap allows categories to flow onto a second line.
 * Dropdowns are positioned relative to .ye-category-nav (items are static),
 * so they are NOT clipped by the container.
 */
.ye-category-nav__container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.25rem 0;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
}


/* ============================================
   2. CATEGORY ITEMS & LINKS
   ============================================ */

/**
 * Position is static (not relative) so the dropdown
 * positions relative to .ye-category-nav instead.
 * This prevents dropdowns from being offset when
 * a category is on the second row of a wrapped layout.
 */
.ye-category-nav__item {
    position: static;
}

/**
 * Category trigger link
 * Compact single-line layout to fit all categories in one row
 */
.ye-category-nav__link {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 0.6rem;
    color: var(--dark-gray);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px; /* Overlap the container border */
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}


/* ============================================
   3. CHEVRON ICON
   Small down arrow on categories with subcategories
   ============================================ */

.ye-category-nav__chevron {
    flex-shrink: 0;
    opacity: 0.5;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Rotate chevron when dropdown is open */
.ye-category-nav__item.is-open .ye-category-nav__chevron {
    transform: rotate(180deg);
    opacity: 1;
}


/* ============================================
   4. ACTIVE & HOVER STATES
   ============================================ */

.ye-category-nav__link:hover {
    background-color: var(--bg-tertiary);
    color: var(--dark-gray);
}

/* Active category — red text and red bottom border */
.ye-category-nav__item.is-active .ye-category-nav__link {
    color: var(--primary-red);
    border-bottom-color: var(--primary-red);
    font-weight: var(--font-weight-semibold);
}

/* Hover/open state for items with dropdowns */
.ye-category-nav__item.is-open .ye-category-nav__link,
.ye-category-nav__item:hover .ye-category-nav__link {
    color: var(--primary-red);
    border-bottom-color: var(--primary-red);
}


/* ============================================
   5. DROPDOWN PANEL
   Full-width panel that appears below the category bar
   ============================================ */

.ye-category-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;

    /* Full viewport width, anchored to left edge */
    width: 100vw;
    margin-left: calc(-50vw + 50%);

    background-color: var(--white);
    border-top: 3px solid var(--primary-red);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: var(--z-index-dropdown);

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
        opacity var(--transition-fast),
        visibility var(--transition-fast),
        transform var(--transition-fast);

    /* Prevent dropdown from being clipped */
    pointer-events: none;
}

/* Show dropdown via JS-triggered .is-open class only (hover handled by JS for intent delay) */
.ye-category-nav__item.is-open .ye-category-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}


/* ============================================
   6. SUBCATEGORY GRID
   Multi-column layout for subcategory links
   ============================================ */

.ye-category-nav__dropdown-inner {
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
}

/**
 * CSS columns for subcategory links
 * Automatically flows into columns, avoiding orphan links
 */
.ye-category-nav__dropdown-grid {
    column-count: 5;
    column-gap: var(--spacing-xl);
}

.ye-category-nav__dropdown-grid a {
    display: block;
    padding: var(--spacing-xs) 0;
    color: var(--dark-gray);
    text-decoration: none;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    break-inside: avoid; /* Prevent link from splitting across columns */
    transition: color var(--transition-fast);
}

.ye-category-nav__dropdown-grid a:hover {
    color: var(--primary-red);
}

/* Fewer columns for categories with fewer subcategories */
.ye-category-nav__dropdown-grid--narrow {
    column-count: 3;
}


/* ============================================
   7. VIEW ALL LINK
   Bottom link to parent category archive
   ============================================ */

.ye-category-nav__view-all {
    display: inline-block;
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    color: var(--primary-red);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: color var(--transition-fast);
    width: 100%;
}

.ye-category-nav__view-all:hover {
    color: var(--red-hover);
}

.ye-category-nav__view-all::after {
    content: ' \2192'; /* → arrow */
}


/* ============================================
   8. RESPONSIVE
   Hide entire category bar on tablet/mobile
   (categories accessible via mobile slide-out menu)
   ============================================ */

@media (max-width: 1023px) {
    .ye-category-nav {
        display: none;
    }
}

/* ===== navigation.css ===== */
/**
 * Navigation Styles
 * Your Electrics - Mega Menu & Mobile Navigation
 *
 * Mobile-first approach:
 * - Default styles are for mobile
 * - Desktop enhancements at 1024px+
 *
 * Structure:
 * 1. Header & Search Bar
 * 2. Mobile Navigation (hamburger, slide-out, accordion)
 * 3. Desktop Mega Menu (dropdown, grid layout)
 * 4. Shared Navigation Utilities
 */


/* ============================================
   1. HEADER & SEARCH BAR
   ============================================ */

/**
 * Main site header
 * Contains logo, search bar, cart icon
 */
.site-header {
    background-color: var(--white);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: var(--z-index-sticky);
}

/**
 * Header inner container
 * Flexbox layout: logo | search | cart
 */
.site-header .ast-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    max-width: var(--max-width-container);
    margin: 0 auto;
}

/**
 * Search bar styling
 * Prominent search for trade customers who search by product codes
 */
.ye-search-bar {
    flex: 1;
    max-width: 600px;
    margin: 0 var(--spacing-md);
}

.ye-search-bar input[type="search"] {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-base);
    /* Minimum 48px height for touch targets */
    min-height: 48px;
}

.ye-search-bar input[type="search"]:focus {
    outline: none;
    border-color: var(--primary-red);
}

/**
 * Cart icon with item count badge
 */
.ye-cart-icon {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--spacing-sm);
    min-width: 48px;
    min-height: 48px;
    justify-content: center;
}

.ye-cart-count {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--primary-red);
    color: var(--white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}


/* ============================================
   2. MOBILE NAVIGATION
   Default styles (shown below 1024px)
   ============================================ */

/**
 * Hamburger menu button
 * Three-line icon, 48px touch target
 */
.ye-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    padding: var(--spacing-sm);
    background: none;
    border: none;
    cursor: pointer;
    z-index: calc(var(--z-index-modal) + 1);
}

.ye-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--dark-gray);
    margin: 3px 0;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Hide hamburger when menu is open —
   the panel's own × button is the close control */
.ye-hamburger.is-active {
    visibility: hidden;
}

/**
 * Mobile menu overlay backdrop
 * Semi-transparent dark background behind slide-out
 */
.ye-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-index-modal-backdrop);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.ye-menu-overlay.is-visible {
    display: block;
    opacity: 1;
}

/**
 * Mobile slide-out menu panel
 * Slides in from the left side
 */
.ye-mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 360px;
    height: 100vh;
    background-color: var(--white);
    z-index: var(--z-index-modal);
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ye-mobile-menu.is-open {
    transform: translateX(0);
}

/**
 * Mobile menu header
 * Contains close button and branding
 */
.ye-mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.ye-mobile-menu__close {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: var(--font-size-2xl);
    cursor: pointer;
    color: var(--dark-gray);
}

/**
 * Mobile menu navigation list
 */
.ye-mobile-menu__nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ye-mobile-menu__nav li {
    border-bottom: 1px solid var(--border-light);
}

.ye-mobile-menu__nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    color: var(--dark-gray);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    min-height: 48px;
    transition: background-color var(--transition-fast);
}

.ye-mobile-menu__nav a:hover,
.ye-mobile-menu__nav a:focus {
    background-color: var(--bg-tertiary);
}

/**
 * Mobile accordion sub-menus
 * Category items expand/collapse on tap
 */
.ye-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: none;
    border: none;
    border-left: 1px solid var(--border-light);
    cursor: pointer;
    font-size: var(--font-size-lg);
    color: var(--medium-gray);
    transition: transform var(--transition-base);
}

/* Rotate arrow when accordion is open */
.ye-accordion-toggle.is-expanded {
    transform: rotate(180deg);
}

/**
 * Accordion sub-menu content
 * Hidden by default, slides open on toggle
 */
.ye-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
    background-color: var(--bg-secondary);
}

.ye-accordion-content.is-expanded {
    max-height: 500px; /* Enough for most sub-menus */
}

.ye-accordion-content a {
    padding-left: var(--spacing-xl);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-sm);
}


/* ============================================
   3. DESKTOP MEGA MENU
   Only visible at 1024px and above
   ============================================ */

@media (min-width: 1024px) {

    /* Hide hamburger on desktop */
    .ye-hamburger {
        display: none;
    }

    /* Hide mobile menu on desktop */
    .ye-mobile-menu,
    .ye-menu-overlay {
        display: none;
    }

    /**
     * Main navigation bar
     * Sits below the header, contains "All Products" trigger
     */
    .ye-main-nav {
        background-color: var(--dark-gray);
        position: relative;
    }

    .ye-main-nav__container {
        display: flex;
        align-items: center;
        max-width: var(--max-width-container);
        margin: 0 auto;
        padding: 0 var(--spacing-md);
    }

    /**
     * Navigation links
     */
    .ye-main-nav__list {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .ye-main-nav__list > li {
        position: relative;
    }

    .ye-main-nav__list > li > a {
        display: flex;
        align-items: center;
        padding: var(--spacing-sm) var(--spacing-md);
        color: var(--white);
        text-decoration: none;
        font-family: var(--font-body);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        white-space: nowrap;
        transition: background-color var(--transition-fast);
        min-height: 48px;
    }

    .ye-main-nav__list > li > a:hover,
    .ye-main-nav__list > li > a:focus {
        background-color: rgba(255, 255, 255, 0.1);
    }

    /**
     * "All Products" mega menu trigger
     * Red background to stand out as primary CTA
     */
    .ye-mega-trigger {
        background-color: var(--primary-red);
    }

    .ye-mega-trigger > a {
        font-weight: var(--font-weight-bold);
    }

    .ye-mega-trigger > a:hover,
    .ye-mega-trigger > a:focus {
        background-color: var(--red-hover);
    }

    /**
     * Mega menu dropdown panel
     * Full-width dropdown with 4-column grid
     */
    .ye-mega-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100vw;
        /* Position relative to viewport left edge */
        margin-left: calc(-50vw + 50%);
        background-color: var(--white);
        border-top: 3px solid var(--primary-red);
        box-shadow: var(--shadow-xl);
        z-index: var(--z-index-dropdown);

        /* Hidden by default */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition:
            opacity var(--transition-base),
            visibility var(--transition-base),
            transform var(--transition-base);
    }

    /* Show mega menu on hover */
    .ye-mega-trigger:hover .ye-mega-menu,
    .ye-mega-trigger:focus-within .ye-mega-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /**
     * Mega menu inner container
     * Constrains content width and adds padding
     */
    .ye-mega-menu__inner {
        max-width: var(--max-width-container);
        margin: 0 auto;
        padding: var(--spacing-xl);
    }

    /**
     * Mega menu 4-column grid
     * Shows product categories organized by type
     */
    .ye-mega-menu__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-xl);
    }

    /**
     * Mega menu category group
     * Each column has a group heading and list of subcategories
     */
    .ye-mega-menu__group {
        padding: 0;
    }

    .ye-mega-menu__group-title {
        font-family: var(--font-heading);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--primary-red);
        padding-bottom: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
        border-bottom: 2px solid var(--primary-red);
    }

    .ye-mega-menu__group ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .ye-mega-menu__group li {
        margin-bottom: var(--spacing-xs);
    }

    .ye-mega-menu__group a {
        display: block;
        padding: var(--spacing-xs) 0;
        color: var(--dark-gray);
        text-decoration: none;
        font-size: var(--font-size-sm);
        transition: color var(--transition-fast);
    }

    .ye-mega-menu__group a:hover,
    .ye-mega-menu__group a:focus {
        color: var(--primary-red);
    }

    /**
     * "View All" link at bottom of each group
     */
    .ye-mega-menu__view-all {
        display: inline-block;
        margin-top: var(--spacing-sm);
        color: var(--primary-red);
        font-weight: var(--font-weight-semibold);
        font-size: var(--font-size-sm);
        text-decoration: none;
        transition: color var(--transition-fast);
    }

    .ye-mega-menu__view-all:hover {
        color: var(--red-hover);
    }

    .ye-mega-menu__view-all::after {
        content: ' \2192'; /* Right arrow */
    }
}


/* ============================================
   4. SHARED NAVIGATION UTILITIES
   ============================================ */

/**
 * Prevent body scroll when mobile menu is open
 */
body.ye-menu-open {
    overflow: hidden;
}

/**
 * Skip to content link (accessibility)
 * Hidden until focused via keyboard
 */
.ye-skip-link {
    position: absolute;
    top: -100%;
    left: var(--spacing-md);
    background-color: var(--primary-red);
    color: var(--white);
    padding: var(--spacing-sm) var(--spacing-md);
    z-index: var(--z-index-tooltip);
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    transition: top var(--transition-fast);
}

.ye-skip-link:focus {
    top: 0;
}

/**
 * Active/current page indicator
 */
.ye-main-nav__list > li.current-menu-item > a,
.ye-mobile-menu__nav > li.current-menu-item > a {
    color: var(--primary-red);
    font-weight: var(--font-weight-bold);
}

/**
 * Breadcrumb navigation
 * Shows path: Home > Category > Product
 */
.ye-breadcrumbs {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--medium-gray);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.ye-breadcrumbs a {
    color: var(--medium-gray);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.ye-breadcrumbs a:hover {
    color: var(--primary-red);
}

.ye-breadcrumbs .separator {
    margin: 0 var(--spacing-xs);
}

/* ===== products.css ===== */
/**
 * Product Styles
 * Your Electrics - WooCommerce Product Cards, Grids & Pages
 *
 * Mobile-first approach:
 * - Default: 1 column (mobile)
 * - 768px+: 2 columns (tablet)
 * - 1024px+: 3 columns (desktop)
 *
 * Structure:
 * 1. Product Grid Layout
 * 2. Product Cards
 * 3. Product Card Hover Effects
 * 4. Category Cards
 * 5. Single Product Page
 * 6. Price & Stock Display
 * 7. Add to Cart Button
 * 8. Product Search Results
 */


/* ============================================
   1. PRODUCT GRID LAYOUT
   CSS Grid - responsive columns
   ============================================ */

/**
 * WooCommerce product grid
 * Overrides default WooCommerce grid with CSS Grid
 * Mobile: 1 column, Tablet: 2, Desktop: 3
 */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xl);
    }
}

/**
 * Remove default WooCommerce float-based layout
 * We use CSS Grid instead
 */
.woocommerce ul.products li.product {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
}


/* ============================================
   2. PRODUCT CARDS
   Clean white cards with subtle borders
   ============================================ */

/**
 * Individual product card
 * White background, border, rounded corners
 */
.woocommerce ul.products li.product {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
    display: flex;
    flex-direction: column;
}

/**
 * Product image container
 * 1:1 aspect ratio for consistent grid appearance
 */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .woocommerce-product-gallery img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background-color: var(--bg-secondary);
    padding: var(--spacing-md);
    transition: transform var(--transition-base);
}

/**
 * Product image link wrapper
 * Overflow visible — clipping is handled by .astra-shop-thumbnail-wrap
 */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    display: block;
    overflow: visible;
    text-decoration: none;
}

/* Hide category label and remove its space */
.ast-woo-product-category {
    display: none;
}

/* Tighten up product card spacing */
.woocommerce ul.products li.product .astra-shop-summary-wrap {
    padding-top: 0.5em;
}

/**
 * Product card content area
 * Title, price, button below the image
 */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .button {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/**
 * Product title
 * 3-line clamp with fixed min-height for consistent card sizing
 * Full title available on hover (title attribute) and on the product page
 */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--dark-gray);
    margin-top: 0;
    margin-bottom: var(--spacing-xs);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 3.9em;
}

/**
 * Product SKU / product code display
 * Monospace for clarity (trade customers search by exact codes)
 */
.ye-product-sku {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    color: var(--medium-gray);
    padding: 0 var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}


/* ============================================
   3. PRODUCT CARD HOVER EFFECTS
   Lift, shadow, image zoom
   ============================================ */

/**
 * Card hover - lift up and add shadow
 * Only on devices that support hover (not touch)
 */
@media (hover: hover) {
    .woocommerce ul.products li.product:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

    /* Image zoom on card hover */
    .woocommerce ul.products li.product:hover a img {
        transform: scale(1.05);
    }
}

/**
 * Focus styles for keyboard navigation (accessibility)
 */
.woocommerce ul.products li.product:focus-within {
    box-shadow: 0 0 0 3px var(--primary-red), var(--shadow-lg);
}


/* ============================================
   4. CATEGORY CARDS
   For shop/category landing pages
   ============================================ */

/**
 * Category card on shop page
 * Shows category image, name, and product count
 */
.ye-category-card {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

.ye-category-card__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: var(--bg-secondary);
}

.ye-category-card__content {
    padding: var(--spacing-md);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ye-category-card__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--dark-gray);
    margin: 0 0 var(--spacing-xs);
}

.ye-category-card__count {
    font-size: var(--font-size-sm);
    color: var(--medium-gray);
    margin-bottom: var(--spacing-sm);
}

/**
 * "View Products" call-to-action link
 */
.ye-category-card__link {
    display: inline-flex;
    align-items: center;
    color: var(--primary-red);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-decoration: none;
    margin-top: auto;
    transition: color var(--transition-fast);
}

.ye-category-card__link::after {
    content: ' \2192'; /* Right arrow */
    margin-left: var(--spacing-xs);
    transition: transform var(--transition-fast);
}

@media (hover: hover) {
    .ye-category-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
    }

    .ye-category-card:hover .ye-category-card__link::after {
        transform: translateX(4px);
    }
}


/* ============================================
   5. SINGLE PRODUCT PAGE
   Individual product detail view
   ============================================ */

/**
 * Single product layout
 * Image on left, details on right (desktop)
 * Stacked on mobile
 */
.woocommerce div.product {
    padding: var(--spacing-lg) 0;
}

/**
 * Product gallery (images)
 */
.woocommerce div.product div.images {
    margin-bottom: var(--spacing-lg);
}

.woocommerce div.product div.images img {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

/**
 * Product summary (title, price, description, add to cart)
 */
.woocommerce div.product .product_title {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--dark-gray);
    margin-bottom: var(--spacing-sm);
}

.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: var(--font-size-base);
    color: var(--medium-gray);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-lg);
}

/**
 * Product tabs (Description, Additional Info, Reviews)
 */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    list-style: none;
    padding: 0;
    margin: var(--spacing-xl) 0 0;
    display: flex;
    border-bottom: 2px solid var(--border-color);
    gap: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--medium-gray);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--primary-red);
    border-bottom-color: var(--primary-red);
}

.woocommerce div.product .woocommerce-tabs .panel {
    padding: var(--spacing-lg) 0;
}

/**
 * Related products section
 */
.woocommerce div.product .related.products {
    margin-top: var(--spacing-3xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--border-color);
}

.woocommerce div.product .related.products h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-lg);
}


/* ============================================
   6. PRICE & STOCK DISPLAY
   Clear pricing visible upfront
   ============================================ */

/**
 * Product price
 * Must be clearly visible - trade customers need prices upfront
 */
.woocommerce ul.products li.product .price {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--dark-gray);
    margin: var(--spacing-xs) 0 var(--spacing-md);
}

/* Current/sale price */
.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    font-weight: var(--font-weight-bold);
}

/* Original price (struck through) */
.woocommerce ul.products li.product .price del {
    color: var(--medium-gray);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    margin-right: var(--spacing-xs);
}

/**
 * Single product page price (larger)
 */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--dark-gray);
    margin-bottom: var(--spacing-md);
}

/**
 * Sale badge
 */
.woocommerce span.onsale {
    background-color: var(--primary-red);
    color: var(--white);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    z-index: 1;
    min-width: auto;
    min-height: auto;
    line-height: 1.5;
}

/**
 * Stock status
 */
.woocommerce div.product .stock {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-md);
}

.woocommerce div.product .stock.in-stock {
    color: #059669; /* Green for in stock */
}

.woocommerce div.product .stock.out-of-stock {
    color: var(--primary-red);
}


/* ============================================
   7. ADD TO CART BUTTON
   Clear CTA, branded red
   ============================================ */

/**
 * Add to cart button on product cards
 */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
    display: block;
    width: calc(100% - var(--spacing-md) * 2);
    margin: 0 var(--spacing-md) var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--primary-red);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
    background-color: var(--red-hover);
}

/**
 * Single product page add to cart button (larger)
 */
.woocommerce div.product .single_add_to_cart_button {
    background-color: var(--primary-red);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-2xl);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    min-height: 48px;
    transition: background-color var(--transition-fast);
}

.woocommerce div.product .single_add_to_cart_button:hover {
    background-color: var(--red-hover);
}

/**
 * Quantity input (single product page)
 */
.woocommerce div.product .quantity .qty {
    width: 80px;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    text-align: center;
    min-height: 48px;
}


/* ============================================
   8. PRODUCT SEARCH RESULTS
   Styling for search results page
   ============================================ */

/**
 * Search results use the same product grid
 * These styles handle the search-specific elements
 */
.woocommerce-result-count {
    font-size: var(--font-size-sm);
    color: var(--medium-gray);
    margin-bottom: var(--spacing-md);
}

.woocommerce-ordering {
    margin-bottom: var(--spacing-lg);
}

.woocommerce-ordering select {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    min-height: 48px;
    background-color: var(--white);
}

/**
 * Pagination
 * Bottom of product listings
 */
.woocommerce nav.woocommerce-pagination {
    margin-top: var(--spacing-xl);
    text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
    display: inline-flex;
    gap: var(--spacing-xs);
    list-style: none;
    padding: 0;
    margin: 0;
    border: none;
}

.woocommerce nav.woocommerce-pagination ul li {
    border: none;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--dark-gray);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--primary-red);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
    background-color: var(--primary-red);
    color: var(--white);
    border-color: var(--primary-red);
}

/**
 * "No products found" message
 */
.woocommerce-info {
    padding: var(--spacing-lg);
    background-color: var(--bg-tertiary);
    border-left: 4px solid var(--primary-red);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    color: var(--dark-gray);
}


/* ============================================
   9. CATEGORY DESCRIPTION — COLLAPSIBLE
   Show first ~3 lines, "Read more" expands the rest.
   Google indexes hidden accordion content (no SEO penalty).

   Truncation is gated by .is-collapsible — added server-side by
   ye_taxonomy_archive_description() in PHP only when the description
   is long enough to need truncating. Short descriptions get no class
   and render at natural height. This + the server-rendered toggle
   button avoid the CLS that occurred when JS measured scrollHeight
   post-paint and injected the button via DOM insertion.
   ============================================ */

/**
 * Collapsed state — clip to ~3 lines with gradient fade
 */
.term-description.is-collapsible,
.taxonomy-description.is-collapsible {
    position: relative;
    max-height: 4.5em;
    overflow: hidden;
    line-height: 1.5;
    transition: max-height var(--transition-base);
}

/**
 * Gradient overlay hints at hidden content
 */
.term-description.is-collapsible:not(.is-expanded)::after,
.taxonomy-description.is-collapsible:not(.is-expanded)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2em;
    background: linear-gradient(to bottom, transparent, var(--white, #fff));
    pointer-events: none;
}

/**
 * Expanded state — show full content
 */
.term-description.is-collapsible.is-expanded,
.taxonomy-description.is-collapsible.is-expanded {
    max-height: 2000px;
}

/**
 * No gradient when expanded
 */
.term-description.is-collapsible.is-expanded::after,
.taxonomy-description.is-collapsible.is-expanded::after {
    display: none;
}

/**
 * "Read more / Read less" toggle button
 * Injected by JS only when description is tall enough.
 * Red text by default (visible as clickable), darker on hover.
 * !important on everything to override Astra's generic button styles.
 */
.ye-desc-toggle {
    display: inline-block !important;
    background: transparent !important;
    border: none !important;
    color: var(--primary-red) !important;
    font-family: var(--font-body) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
    cursor: pointer !important;
    padding: var(--spacing-xs) 0 !important;
    margin-top: var(--spacing-sm) !important;
    margin-bottom: var(--spacing-md) !important;
    transition: color var(--transition-base), transform var(--transition-base) !important;
    position: relative !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.ye-desc-toggle:hover {
    color: var(--red-hover) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: translateX(2px) !important;
}

.ye-desc-toggle:focus,
.ye-desc-toggle:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--primary-red) !important;
}

.ye-desc-toggle:focus-visible {
    outline: 2px solid var(--border-color) !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
    background: transparent !important;
}

/* Animated underline on hover */
.ye-desc-toggle::after {
    content: '' !important;
    display: block !important;
    width: 0 !important;
    height: 2px !important;
    background: var(--red-hover) !important;
    transition: width var(--transition-base) !important;
    margin-top: 2px !important;
}

.ye-desc-toggle:hover::after {
    width: 100% !important;
}


/* ============================================
   10. WOOCOMMERCE SUCCESS MESSAGE
   "[Product] has been added to your basket." notice that appears
   after add-to-cart. WC's default renders it as a UL with a floated
   button and the built-in icon-font tick — looks broken on our layout
   because there's no container, the button drifts to the far right,
   and the whole product block gets shoved down the page on reload.

   Rebuild as a contained banner: soft green card, circular tick on
   the left, message centre-left, "View basket" button anchored right.
   Until AJAX add-to-cart (phase 2) lands, this is what the user sees
   after every add — so it needs to look intentional.
   ============================================ */

.woocommerce-notices-wrapper {
    margin: var(--spacing-md) 0;
}

.woocommerce-notices-wrapper:empty {
    margin: 0;
}

.woocommerce-message {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--success-green-bg);
    border: 1px solid var(--success-green);
    border-radius: var(--radius-md);
    color: var(--dark-gray);
    font-size: var(--font-size-base);
}

/* Suppress WooCommerce's default icon-font tick on the UL */
.woocommerce-message::before {
    display: none !important;
}

.woocommerce-message li {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    margin: 0;
    list-style: none;
    line-height: var(--line-height-tight);
}

/* Circular green-fill tick to the left of the message */
.woocommerce-message li::before {
    content: '✓';
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--success-green);
    color: var(--white);
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-bold);
    font-size: 0.9rem;
    line-height: 1;
}

/* "View basket" button — WC injects .button.wc-forward.
   Override the default floated chunky style with a slim outline
   pill anchored to the right via margin-left:auto. */
.woocommerce-message .button.wc-forward {
    order: 2;
    margin-left: auto;
    flex-shrink: 0;
    float: none;
    background: var(--white);
    color: var(--dark-gray);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    line-height: 1.2;
    text-decoration: none;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.woocommerce-message .button.wc-forward:hover {
    background: var(--success-green);
    color: var(--white);
    border-color: var(--success-green);
}

.woocommerce-message .button.wc-forward:focus-visible {
    outline: 2px solid var(--success-green);
    outline-offset: 2px;
}

/* Mobile — stack the button below the message so the row doesn't
   squash. Tap target stays full-width which is easier with a thumb. */
@media (max-width: 600px) {
    .woocommerce-message li {
        flex-wrap: wrap;
    }
    .woocommerce-message .button.wc-forward {
        order: 3;
        width: 100%;
        margin-left: 0;
        margin-top: var(--spacing-xs);
        text-align: center;
        padding: 0.625rem 1rem;
    }
}


/* ============================================
   11. SINGLE PRODUCT — AJAX TOAST NOTIFICATION
   Slim card pinned under the header after a successful (or failed)
   add-to-cart AJAX call. Mirrors sticky-cart.js dynamic top
   positioning via header.getBoundingClientRect().bottom, so it
   adapts to the announcement bar scrolling away and the
   .ye-header--compact transition.

   The .woocommerce-message banner from Section 10 stays in place
   as the no-JS / hard-reload fallback; the toast is the JS path.
   ============================================ */

.ye-toast {
    position: fixed;
    top: 0;
    right: var(--spacing-md);
    z-index: var(--z-index-tooltip);
    width: min(360px, calc(100vw - 2 * var(--spacing-md)));
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.ye-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Variant colour stripes — left border + icon colour pick up the state */
.ye-toast--success {
    border-left: 4px solid var(--success-green);
}

.ye-toast--success .ye-toast__icon {
    color: var(--success-green);
}

.ye-toast--error {
    border-left: 4px solid var(--primary-red);
}

.ye-toast--error .ye-toast__icon {
    color: var(--primary-red);
}

/* Errors don't get a "View basket" action — the add didn't happen */
.ye-toast--error .ye-toast__action {
    display: none;
}

.ye-toast__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.ye-toast__message {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--dark-gray);
    line-height: var(--line-height-normal);
}

.ye-toast__action {
    flex-shrink: 0;
    color: var(--primary-red);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.ye-toast__action:hover,
.ye-toast__action:focus-visible {
    color: var(--red-hover);
}

.ye-toast__close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: var(--spacing-xs);
    background: transparent;
    border: 0;
    color: var(--medium-gray);
    cursor: pointer;
    line-height: 1;
    font-size: var(--font-size-base);
    border-radius: var(--radius-sm);
}

.ye-toast__close:hover,
.ye-toast__close:focus-visible {
    color: var(--dark-gray);
    background: var(--bg-tertiary);
}

/* Loading state shared by the main add-to-cart and sticky-cart buttons.
   Disabled attribute handles pointer events; this is the visual signal. */
.single_add_to_cart_button.ye-loading,
.ye-sticky-cart__btn.ye-loading {
    opacity: 0.7;
    cursor: progress;
}

/* Mobile — full-bleed minus side gutters. 600px matches the Section 10
   banner breakpoint so the two notice surfaces switch to mobile layout
   in lock-step. */
@media (max-width: 600px) {
    .ye-toast {
        right: var(--spacing-sm);
        left: var(--spacing-sm);
        width: auto;
    }
}

/* Respect users who've opted out of motion */
@media (prefers-reduced-motion: reduce) {
    .ye-toast {
        transition: opacity var(--transition-fast);
        transform: none;
    }
    .ye-toast.is-visible {
        transform: none;
    }
}

/* ===== homepage.css ===== */
/**
 * Homepage Styles
 * Your Electrics - Front page layout and components
 *
 * Only loaded on the front page (conditional in functions.php)
 *
 * Structure:
 * 1. Page Override (reset Astra container)
 * 2. Full-Width Layout
 * 3. Intro Section
 * 4. Category Cards Grid (4-column)
 * 5. Brand Logos Section
 */


/* ============================================
   1. PAGE OVERRIDE
   Reset Astra's default content container for homepage
   ============================================ */

.ye-homepage-page #content > .ast-container {
    max-width: 100%;
    padding: 0;
}

/* Remove default Astra top margin on homepage primary content area */
.ye-homepage-page.ast-plain-container.ast-no-sidebar #primary {
    margin-top: 0;
    margin-bottom: 0;
}

/* Remove gap between content and footer on homepage */
.ye-homepage-page .ye-footer {
    margin-top: 0.75rem;
}

/* Remove Astra's default page title and breadcrumbs on homepage */
.ye-homepage-page .ast-breadcrumbs-wrapper,
.ye-homepage-page .entry-header {
    display: none;
}


/* ============================================
   2. FULL-WIDTH LAYOUT
   Single column, no sidebar
   ============================================ */

.ye-homepage {
    max-width: var(--max-width-container);
    margin: var(--spacing-xl) auto 0;
    padding: 0 var(--spacing-xl);
}

@media (max-width: 1023px) {
    .ye-homepage {
        padding: 0 var(--spacing-md);
        margin: var(--spacing-md) auto;
    }
}


/* ============================================
   3. HERO SECTION
   Full-width centred intro — tagline, heading, description
   ============================================ */

.ye-homepage__hero {
    background: var(--light-gray);
    border-bottom: 1px solid var(--border-color);
    padding: var(--spacing-md) var(--spacing-xl);
    text-align: center;
}

.ye-homepage__hero-inner {
    max-width: 720px;
    margin: 0 auto;
}

.ye-homepage__tagline {
    color: var(--primary-red);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 var(--spacing-xs);
}

.ye-homepage__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--dark-gray);
    margin: 0 0 var(--spacing-xs);
    line-height: var(--line-height-tight);
}

.ye-homepage__subtitle {
    color: var(--medium-gray);
    font-size: var(--font-size-base);
    margin: 0;
}

/* Responsive hero sizing */
@media (max-width: 767px) {
    .ye-homepage__hero {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .ye-homepage__title {
        font-size: var(--font-size-xl);
    }
}


/* ============================================
   4. CATEGORY CARDS GRID
   Product category cards — 4 columns on desktop
   ============================================ */

.ye-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

/**
 * Individual category card
 * Whole card is a link (<a> element)
 */
.ye-category-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
    cursor: pointer;
}

@media (hover: hover) {
    .ye-category-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
        border-color: var(--primary-red);
    }
}

/**
 * Category image — 1:1 aspect ratio
 */
.ye-category-card__image-wrap {
    position: relative;
    padding-top: 100%; /* 1:1 ratio */
    overflow: hidden;
    background: var(--light-gray);
}

.ye-category-card__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

@media (hover: hover) {
    .ye-category-card:hover .ye-category-card__image {
        transform: scale(1.05);
    }
}

/**
 * Category info area below image
 */
.ye-category-card__content {
    padding: var(--spacing-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ye-category-card__title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold);
    color: var(--dark-gray);
    margin: 0 0 var(--spacing-sm);
}

/**
 * Divider line between title and meta
 */
.ye-category-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.ye-category-card__count {
    color: var(--medium-gray);
    font-size: var(--font-size-sm);
}

/**
 * "View Products →" link
 */
.ye-category-card__link {
    color: var(--primary-red);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: gap var(--transition-fast);
}

.ye-category-card__link::after {
    content: '\2192'; /* → arrow */
}

@media (hover: hover) {
    .ye-category-card:hover .ye-category-card__link {
        gap: 0.5rem;
    }
}

/* Tablet: 3 columns */
@media (max-width: 1023px) {
    .ye-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Small tablet: 2 columns */
@media (max-width: 767px) {
    .ye-category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
}

/* Mobile: 2 columns - trade customers want to scan categories quickly */
@media (max-width: 479px) {
    .ye-category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    /* Tighter card content on small screens */
    .ye-category-card__content {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .ye-category-card__title {
        font-size: 0.9rem;
    }

    .ye-category-card__meta {
        padding-top: var(--spacing-sm);
    }

    /* Hide count on mobile — not useful, saves space */
    .ye-category-card__count {
        display: none;
    }

    .ye-category-card__link {
        font-size: var(--font-size-xs);
    }
}


/* ============================================
   5. BRAND LOGOS SECTION
   Trusted brands bar at bottom of homepage
   ============================================ */

.ye-brands {
    margin-top: var(--spacing-3xl);
    padding-top: var(--spacing-2xl);
    border-top: 1px solid var(--border-color);
}

.ye-brands__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--medium-gray);
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.ye-brands__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl) var(--spacing-2xl);
    max-width: 1000px;
    margin: 0 auto;
}

/**
 * Individual brand logo
 * Grayscale + faded by default, full color on hover
 */
.ye-brands__logo {
    width: 140px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: grayscale(100%) opacity(0.5);
    transition: all var(--transition-base);
}

.ye-brands__logo:hover {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1);
}

.ye-brands__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/**
 * Brand name placeholder (shown when no image uploaded)
 */
.ye-brands__logo-placeholder {
    width: 140px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-gray);
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--medium-gray);
    filter: grayscale(100%) opacity(0.6);
    transition: all var(--transition-base);
}

.ye-brands__logo-placeholder:hover {
    filter: grayscale(0%) opacity(1);
    background: var(--bg-tertiary);
    color: var(--dark-gray);
}

/* Mobile: smaller brand logos */
@media (max-width: 767px) {
    .ye-brands__grid {
        gap: var(--spacing-lg);
    }

    .ye-brands__logo,
    .ye-brands__logo-placeholder {
        width: 100px;
        height: 45px;
    }
}

/* ===== responsive.css ===== */
/**
 * Responsive Styles
 * Your Electrics - Global Mobile-First Responsive Overrides
 *
 * This file contains responsive adjustments that span multiple components.
 * Component-specific responsive styles live in their own files:
 * - navigation.css handles nav breakpoints
 * - products.css handles product grid breakpoints
 *
 * This file handles:
 * 1. Mobile Base (default, up to 767px)
 * 2. Tablet (768px - 1023px)
 * 3. Desktop (1024px+)
 * 4. Wide screens (1400px+)
 * 5. Print styles
 *
 * Approach: Mobile-first
 * Default styles = mobile, then enhance for larger screens
 */


/* ============================================
   1. MOBILE BASE STYLES
   Default styles for phones (320px - 767px)
   These apply to ALL screen sizes as the base
   ============================================ */

/**
 * Global mobile layout
 * Single column, full-width elements
 */
body {
    font-size: var(--font-size-base); /* 16px - readable on mobile */
    -webkit-text-size-adjust: 100%; /* Prevent iOS text inflation */
}

/**
 * Container width - full width with padding on mobile
 */
.ast-container,
.site-content .ast-container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/**
 * Mobile typography
 * Slightly smaller headings on small screens
 */
h1 { font-size: var(--font-size-2xl); }   /* 24px on mobile */
h2 { font-size: var(--font-size-xl); }    /* 20px on mobile */
h3 { font-size: var(--font-size-lg); }    /* 18px on mobile */
h4 { font-size: var(--font-size-base); }  /* 16px on mobile */

/**
 * Mobile header adjustments
 * Stack elements vertically, compact spacing
 */
.site-header .ast-container {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/**
 * Search bar - full width below logo on mobile
 */
.ye-search-bar {
    order: 3; /* Push below logo and cart */
    flex-basis: 100%;
    max-width: 100%;
    margin: 0;
}

/**
 * Mobile touch targets
 * All interactive elements must be at least 48px
 */
a,
button,
input[type="submit"],
input[type="button"],
select {
    min-height: 48px;
}

/**
 * Mobile images
 * Prevent horizontal scrolling
 */
img {
    max-width: 100%;
    height: auto;
}

/**
 * Mobile tables — scoped to small screens only.
 * On desktop, tables must remain display:table for proper
 * two-column layouts (e.g. cart page, order tables).
 */

/**
 * Single product - stacked layout on mobile
 */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
    width: 100%;
    float: none;
}

/**
 * Sticky add-to-cart bar — mobile & tablet only
 * Keeps quantity + button visible while scrolling product specs.
 * Resets to normal flow at 1024px+ (desktop section below).
 */
@media (max-width: 1023px) {
    .woocommerce div.product form.cart {
        position: sticky;
        bottom: 0;
        background: var(--white);
        padding: var(--spacing-md);
        margin-left: calc(var(--spacing-md) * -1);
        margin-right: calc(var(--spacing-md) * -1);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
        z-index: var(--z-index-sticky);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        border-top: 1px solid var(--border-color);
    }

    .woocommerce div.product form.cart .quantity {
        flex-shrink: 0;
    }

    .woocommerce div.product form.cart .single_add_to_cart_button {
        flex: 1;
    }
}

/**
 * Footer - single column on mobile
 */
.site-footer .ast-container {
    text-align: center;
}

.site-footer .ast-row {
    flex-direction: column;
    gap: var(--spacing-lg);
}


/* ============================================
   2. TABLET STYLES
   768px and above
   ============================================ */

@media (max-width: 767px) {
    /**
     * Mobile tables — horizontal scroll for wide data tables.
     * Cart tables are overridden in cart.css with display:table !important.
     */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


@media (min-width: 768px) {

    /**
     * Tablet typography
     * Slightly larger than mobile
     */
    h1 { font-size: var(--font-size-3xl); }   /* 30px */
    h2 { font-size: var(--font-size-2xl); }    /* 24px */
    h3 { font-size: var(--font-size-xl); }     /* 20px */

    /**
     * Tablet header
     * Search bar inline with logo
     */
    .site-header .ast-container {
        flex-wrap: nowrap;
    }

    .ye-search-bar {
        order: unset;
        flex-basis: auto;
        max-width: 400px;
        margin: 0 var(--spacing-md);
    }

    /**
     * Tablet containers
     * Add more padding
     */
    .ast-container,
    .site-content .ast-container {
        padding-left: var(--spacing-xl);
        padding-right: var(--spacing-xl);
    }

    /**
     * WooCommerce result bar
     * Count and ordering side by side
     */
    .woocommerce .woocommerce-result-count,
    .woocommerce .woocommerce-ordering {
        display: inline-block;
    }

    .woocommerce .woocommerce-result-count {
        float: left;
        line-height: 48px; /* Align with dropdown */
    }

    .woocommerce .woocommerce-ordering {
        float: right;
    }

    /**
     * Footer - 2 column layout on tablet
     */
    .site-footer .ast-row {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .site-footer .ast-row > * {
        flex: 1 1 45%;
    }
}


/* ============================================
   3. DESKTOP STYLES
   1024px and above
   ============================================ */

@media (min-width: 1024px) {

    /**
     * Desktop typography
     * Full-size headings
     */
    h1 { font-size: var(--font-size-4xl); }   /* 36px */
    h2 { font-size: var(--font-size-3xl); }    /* 30px */
    h3 { font-size: var(--font-size-2xl); }    /* 24px */
    h4 { font-size: var(--font-size-xl); }     /* 20px */

    /**
     * Desktop container
     * Centered with max width
     */
    .ast-container,
    .site-content .ast-container {
        max-width: var(--max-width-container);
        margin-left: auto;
        margin-right: auto;
    }

    /**
     * Desktop search bar
     * Larger on desktop
     */
    .ye-search-bar {
        max-width: 600px;
    }

    /* Single product layout moved to css/single-product.css (CSS Grid) */

    /**
     * Desktop footer - multi-column
     */
    .site-footer .ast-row {
        flex-wrap: nowrap;
    }

    .site-footer .ast-row > * {
        flex: 1;
    }

    .site-footer .ast-container {
        text-align: left;
    }
}


/* ============================================
   4. WIDE SCREEN STYLES
   1400px and above
   ============================================ */

@media (min-width: 1400px) {

    /**
     * Wide screen product grid
     * 4 columns for very large screens
     */
    .woocommerce ul.products {
        grid-template-columns: repeat(4, 1fr);
    }

    /**
     * Wider container padding
     */
    .ast-container,
    .site-content .ast-container {
        padding-left: var(--spacing-xl);
        padding-right: var(--spacing-xl);
    }
}


/* ============================================
   5. PRINT STYLES
   Clean output when customers print pages
   ============================================ */

@media print {

    /* Hide non-essential elements */
    .site-header,
    .ye-main-nav,
    .ye-breadcrumbs,
    .site-footer,
    .woocommerce-ordering,
    .woocommerce-pagination,
    .add_to_cart_button,
    .single_add_to_cart_button,
    .related.products {
        display: none;
    }

    /* Clean white background */
    body {
        background: white;
        color: black;
        font-size: 12pt;
    }

    /* Show full product info */
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        width: 100%;
        float: none;
    }

    /* Show URLs after links */
    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 10pt;
        color: #666;
    }
}


/* ============================================
   6. UTILITY CLASSES
   Responsive show/hide helpers
   ============================================ */

/**
 * Show/hide elements based on screen size
 * Usage: <div class="ye-hide-mobile">Only on tablet+</div>
 */
.ye-hide-mobile {
    display: none;
}

.ye-hide-desktop {
    display: block;
}

@media (min-width: 768px) {
    .ye-hide-mobile {
        display: block;
    }

    .ye-hide-tablet {
        display: none;
    }
}

@media (min-width: 1024px) {
    .ye-hide-desktop {
        display: none;
    }

    .ye-hide-tablet {
        display: block;
    }
}

/* ===== product-overrides.css ===== */
/**
 * 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;
    /* NO padding-bottom — spacing below the title is margin. `overflow: hidden`
       clips at the PADDING box, so any bottom padding is a window the clamped-off
       line 4 shows through (tops of glyphs visible under the ellipsis). Keep the
       vertical gap as margin and the clip lands exactly on the 3rd baseline. */
    padding: 0 1rem !important;
    margin: 0 0 0.5rem !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;
    /* 3 lines x 1.3 line-height = 3.9em (font-size independent, em tracks
       this element's own size). No vertical padding now, so under border-box
       this is the content height exactly — no add-back needed. */
    min-height: 3.9em !important;
    flex-shrink: 0 !important; /* .astra-shop-summary-wrap is a flex column */
    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;
        /* Bottom gap is margin, not padding — see the desktop rule. */
        padding: 0 0.625rem !important;
        margin: 0 0 0.35rem !important;
        /* 3.9em, NOT 3.12em. em is relative to this element's own font-size,
           so it already tracks the 0.8rem — writing the rem-scaled figure
           here applied the 0.8 factor twice and showed only ~2 lines. */
        min-height: 3.9em !important;
    }

    /* Related products on a product page: larger titles. The root font size on
       this site is ~14.6px (not 16px), so 0.8rem above is only ~11.7px; 0.925rem
       gives ~13.5px. The 3-line clamp and the em-based min-height above are
       unchanged, so the card height tracks the font size and nothing shifts. */
    .woocommerce .related.products ul.products li.product .woocommerce-loop-product__title,
    .woocommerce .related.products ul.products li.product:not(.product-category) h2 {
        font-size: 0.925rem !important;
    }

    .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).
   WOOF renders it as .woof_reset_search_form once a filter is active. */
.ye-woof-filters .woof_reset_button,
.ye-woof-filters .woof_reset_search_form {
    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;
}

/* ===== soft-ui.css ===== */
/**
 * Soft UI Experiment (Safe / Reversible)
 *
 * Reduces pure white glare by using off-white page backgrounds,
 * subtle card borders, and light section contrast.
 *
 * No layout or HTML changes. Remove this file's enqueue in
 * functions.php to revert instantly.
 */


/* ============================================
   1. GLOBAL BACKGROUND
   Off-white body removes the pure white glare
   ============================================ */
body {
    background-color: #f9fafb;
}


/* ============================================
   2. MAIN CONTENT AREAS — STAY WHITE
   Keeps the content readable against the off-white body
   ============================================ */
#main.site-main,
.ast-container,
.site-content {
    background-color: #ffffff;
}


/* ============================================
   3. CARD-STYLE BLOCKS
   Subtle borders and shadows on product/content cards
   ============================================ */

/* WooCommerce product cards */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Homepage category cards */
.ye-category-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Summary card on single product */
.woocommerce div.product .summary.entry-summary {
    background-color: #ffffff;
}

/* Tab panels */
.woocommerce div.product .woocommerce-tabs .panel {
    background-color: #ffffff;
}


/* ============================================
   4. SECTION CONTRAST
   Alternating subtle tones for visual rhythm
   ============================================ */

/* Hero section already uses --light-gray, keep it */
.ye-homepage__hero {
    background-color: #f3f4f6;
}

/* Brands section — subtle contrast */
.ye-brands {
    background-color: #f9fafb;
}

/* Trust signals inside summary */
.ye-trust-signal {
    background-color: #f9fafb;
}


/* ============================================
   5. TYPOGRAPHY SOFTENING
   Slightly warmer text colours to reduce contrast
   ============================================ */
body {
    color: #374151;
}

h1, h2, h3, h4 {
    color: #1f2937;
}


/* ============================================
   6. BUTTONS — RED STAYS INTENTIONAL
   Primary action buttons keep brand colour
   ============================================ */
.button-primary,
.btn-primary,
.single_add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background-color: #dc2626;
    color: #ffffff;
}

.button-primary:hover,
.btn-primary:hover,
.single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background-color: #b91c1c;
}