/*
Theme Name: eMart Child - Alpha Air
Theme URI: https://alphaair.co.uk
Description: Alpha Air customisations for eMart theme
Author: Alpha Air
Author URI: https://alphaair.co.uk
Template: emart
Version: 1.0.0
*/

/* ==========================================================================
   ALPHA AIR BRAND STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Variables - Brand Colours & Z-Index Scale
   -------------------------------------------------------------------------- */
:root {
    /* Brand colours */
    --alpha-blue: #1d3dbd;
    /* Yellow adjusted for WCAG AA contrast (4.5:1) on dark backgrounds */
    --alpha-yellow: #FFE256;
    /* Yellow with sufficient contrast for text on white (use for accents only) */
    --alpha-yellow-dark: #B8860B; /* For text on light backgrounds - passes WCAG AA */
    --alpha-red: #BD1D45;
    --alpha-dark: #4D4D4D;
    --alpha-black: #000000;
    --alpha-text: #212121;
    /* Muted text adjusted for WCAG AA contrast (4.5:1 minimum) */
    --alpha-muted: #6B6B6B; /* Changed from #ADADAD for better contrast */
    --alpha-light-bg: #F9F9F9;
    --alpha-border: #E7E7E7;

    /* Z-Index Scale (organized layers for maintainability)
       Use these variables instead of magic numbers */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-fixed-button: 99999; /* Back-to-top, floating buttons */
}

/* --------------------------------------------------------------------------
   Typography - Poppins Font (self-hosted via theme.json for performance)
   -------------------------------------------------------------------------- */
/* Poppins woff2 files loaded via theme.json @font-face — no render-blocking @import */

body {
    font-family: 'Poppins', sans-serif;
    color: var(--alpha-text);
}

/* --------------------------------------------------------------------------
   Kill the sliver of horizontal scroll (site "slightly too wide")
   Cause: .header-bottom's full-bleed uses width:100vw, and 100vw INCLUDES the
   vertical scrollbar width — so the page is always ~8-15px wider than the
   viewport. clip (not hidden) is used deliberately: it doesn't turn the root
   into a scroll container, so position:sticky/fixed keep working. The hidden
   line is a fallback for older browsers.
   -------------------------------------------------------------------------- */
html, body {
    overflow-x: hidden;
    overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Homepage hero on mobile — the cover block's van image ends up UNDER the
   headline at narrow widths ("One Day Away." collided with the van). Give the
   text a soft white scrim on small screens; van stays visible behind it.
   Scoped to the hero via its image (attachment 19459) so no other cover block
   is affected; browsers without :has() simply keep the current appearance.
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
    .wp-block-cover:has(.wp-image-19459) .wp-block-cover__inner-container {
        background: rgba(255, 255, 255, 0.82);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        border-radius: 10px;
        padding: 18px 16px;
        margin-left: 12px;
        margin-right: 12px;
        width: auto;
    }
}

/* --------------------------------------------------------------------------
   Page Top Spacer - 30px White Bar
   -------------------------------------------------------------------------- */
body::before {
    content: '';
    display: block;
    height: 30px;
    background-color: #ffffff;
    width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--alpha-black);
}

/* --------------------------------------------------------------------------
   Header Search Bar - Border
   -------------------------------------------------------------------------- */
.header-wrap .wp-block-search {
    border: 1px solid var(--alpha-border);
    border-radius: 8px;
}

/* --------------------------------------------------------------------------
   Header to Menu Spacer - 5px
   -------------------------------------------------------------------------- */
.header-v1 .has-primary-background-color {
    margin-bottom: 5px;
}

/* --------------------------------------------------------------------------
   Header - White Background
   -------------------------------------------------------------------------- */
.wp-block-group.has-primary-background-color:has(.header-wrap) {
    background-color: #ffffff !important;
}

/* Header text and icons - make them dark on white background */
.header-wrap,
.header-wrap a,
.header-wrap .wp-block-navigation-item__content {
    color: var(--alpha-black) !important;
}

/* --------------------------------------------------------------------------
   Primary Navigation Menu - Blue Background (Full Width)
   -------------------------------------------------------------------------- */

/* Target the header-bottom container for full width blue background */
.header-bottom {
    background-color: var(--alpha-blue) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    padding-left: calc(50vw - 50%) !important;
    padding-right: calc(50vw - 50%) !important;
    box-sizing: border-box !important;
    border-bottom: none !important;
}

/* Primary menu and its containers */
.primary-menu,
nav.primary-menu,
.wp-block-navigation.primary-menu {
    background-color: transparent !important;
}

/* Primary menu links - white text */
.primary-menu .wp-block-navigation-item__content,
.primary-menu .wp-block-navigation-item__label,
.primary-menu a,
.header-bottom a {
    color: #ffffff !important;
}

/* Primary menu hover state */
.primary-menu .wp-block-navigation-item:hover .wp-block-navigation-item__content,
.primary-menu a:hover,
.header-bottom a:hover {
    color: var(--alpha-yellow) !important;
}

/* Hide vertical menu in header-bottom if not needed, or style it */
.header-bottom .vertical-menu {
    display: none;
}

/* --------------------------------------------------------------------------
   Footer Navigation Links — Alpha Air Blue
   -------------------------------------------------------------------------- */
.footer-widgets .wp-block-navigation a,
.footer-widgets .wp-block-navigation-item__content,
.footer-widgets .wp-block-navigation-item__label {
    color: #2959D3 !important;
}
.footer-widgets .wp-block-navigation a:hover,
.footer-widgets .wp-block-navigation-item__content:hover {
    color: #1d3dbd !important;
    text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */
a {
    color: var(--alpha-blue);
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: #1250b0;
}

/* --------------------------------------------------------------------------
   Buttons - Primary (Yellow)
   -------------------------------------------------------------------------- */
.wp-block-button__link,
.wc-block-components-button,
.button,
button[type="submit"],
.add_to_cart_button,
.single_add_to_cart_button {
    background-color: var(--alpha-yellow) !important;
    color: var(--alpha-black) !important;
    border: none !important;
    transition: all 0.2s ease;
}

.wp-block-button__link:hover,
.wc-block-components-button:hover,
.button:hover,
button[type="submit"]:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover {
    background-color: #e6cc4d !important;
    color: var(--alpha-black) !important;
}

/* --------------------------------------------------------------------------
   Buttons - Secondary/Outline (Blue)
   8 Sep 2026 (Matt: "commit to the yellow"): `.button.alt` REMOVED from this
   block. WooCommerce's `alt` class marks its MOST IMPORTANT buttons (add to
   basket, proceed to checkout, pay for order) — styling them as outline
   inverted the semantics and was the source of every ghost primary CTA on
   the site. They now fall through to the primary yellow rule above. Only
   deliberately-outlined blocks keep the outline style.
   -------------------------------------------------------------------------- */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    border: 2px solid var(--alpha-blue) !important;
    color: var(--alpha-blue) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--alpha-blue) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Buttons - Out of Stock / Alerts (Red)
   -------------------------------------------------------------------------- */
.outofstock .add_to_cart_button,
.button.disabled,
.button[disabled],
.woocommerce .outofstock .button {
    background-color: var(--alpha-red) !important;
    color: #ffffff !important;
    cursor: not-allowed;
}

/* Stock status text */
.out-of-stock,
.stock.out-of-stock {
    color: var(--alpha-red);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer,
.site-footer,
.wp-block-template-part[data-area="footer"],
footer.wp-block-group {
    background-color: var(--alpha-dark) !important;
    color: #ffffff;
}

footer a,
.site-footer a,
footer.wp-block-group a {
    color: #ffffff;
    text-decoration: none;
    transition: text-decoration 0.2s ease;
}

footer a:hover,
.site-footer a:hover,
footer.wp-block-group a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Footer text and headings */
footer p,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.site-footer p,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6 {
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */
.bg-alpha-blue { background-color: var(--alpha-blue); }
.bg-alpha-yellow { background-color: var(--alpha-yellow); }
.bg-alpha-light { background-color: var(--alpha-light-bg); }
.text-alpha-blue { color: var(--alpha-blue); }
.text-alpha-muted { color: var(--alpha-muted); }
.border-alpha { border-color: var(--alpha-border); }

/* --------------------------------------------------------------------------
   Two Column Banner - Equal Height Cards
   --------------------------------------------------------------------------
   Ensures both banner cards are equal height with images positioned
   in the bottom-right corner.
   -------------------------------------------------------------------------- */

/* Equal height columns */
.wp-block-column.relative {
    display: flex;
    flex-direction: column;
}

/* Card container - equal size with rounded corners */
.wp-block-column.relative > .wp-block-group.has-background {
    flex: 1;
    min-height: 350px;
    position: relative !important;
    overflow: hidden;
    border-radius: 12px !important;
}

/* Grid container */
.wp-block-column.relative .wp-block-group.grid {
    position: static !important;
    height: 100%;
}

/* Text content area */
.wp-block-column.relative .grid-span-full:not(.flex) {
    position: relative;
    z-index: 2;
}

/* Image container - fixed to bottom right */
.wp-block-column.relative .wp-block-group.grid-span-full.flex.d-sm-none {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    top: auto !important;
    left: auto !important;
    z-index: 1;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* Remove any conflicting layout styles */
.wp-block-column.relative .wp-block-group.grid-span-full.flex.d-sm-none.is-layout-constrained {
    display: block !important;
}

/* Product card images */
.wp-block-column.relative figure.product-card-image,
.wp-block-column.relative figure.stretched-link {
    margin: 0 !important;
    padding: 0 !important;
}

.wp-block-column.relative .product-card-image img,
.wp-block-column.relative .stretched-link img {
    width: 400px !important;
    height: 400px !important;
    object-fit: contain;
    display: block;
}

/* Right box image background */
.wp-block-column.relative:nth-child(2) .product-card-image img,
.wp-block-column.relative:nth-child(2) .stretched-link img {
    background-color: #80D5B3;
}

/* --------------------------------------------------------------------------
   Product Category Pages - Hide Sorting
   -------------------------------------------------------------------------- */
body.woocommerce .woocommerce-ordering,
body .wc-block-sort-select {
    display: none;
}

/* --------------------------------------------------------------------------
   Product Category Pages - Infinite Scroll
   -------------------------------------------------------------------------- */
/* Hide pagination when infinite scroll is active */
body.woocommerce .woocommerce-pagination,
body .wc-block-pagination {
    display: none;
}

/* Loading spinner */
.infinite-scroll-loading {
    text-align: center;
    padding: 30px;
    width: 100%;
}

.infinite-scroll-loading::after {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid var(--alpha-border);
    border-top-color: var(--alpha-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* End message */
.infinite-scroll-end {
    text-align: center;
    padding: 30px;
    color: var(--alpha-muted);
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   Back to Top Button
   -------------------------------------------------------------------------- */
button#backToTop.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--alpha-blue);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: var(--z-fixed-button);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    padding: 0;
    min-width: 0;
    min-height: 0;
}

button#backToTop.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

button#backToTop.back-to-top:hover {
    background-color: #1250b0;
    transform: translateY(-3px);
}

button#backToTop.back-to-top::before {
    content: '';
    width: 12px;
    height: 12px;
    border-left: 3px solid #ffffff;
    border-top: 3px solid #ffffff;
    transform: rotate(45deg) translateY(3px);
}

/* --------------------------------------------------------------------------
   Product Card Hover - Zoom Out Effect
   -------------------------------------------------------------------------- */
/* Product card image container */
.wc-block-components-product-image,
.woocommerce-loop-product__link img,
ul.products li.product img {
    transition: transform 0.3s ease, filter 0.25s ease; /* filter = title-reveal dim */
}

/* Zoom out on hover */
.wp-block-post:hover .wc-block-components-product-image img,
li.product:hover .woocommerce-loop-product__link img,
ul.products li.product:hover img {
    transform: scale(0.95);
}

/* Ensure container clips the image properly */
.wc-block-components-product-image,
.woocommerce-loop-product__link {
    overflow: hidden;
}

/* ==========================================================================
   CHECKOUT PAGE LAYOUT FIXES
   ==========================================================================
   Layout:
   - Estimated Delivery: Full width at top
   - Billing Details: Left column
   - Delivery Address: Below billing, left column
   - Your Order: Right column, sticky, level with billing
   ========================================================================== */

/* --------------------------------------------------------------------------
   Checkout Form - Main Grid Layout
   -------------------------------------------------------------------------- */
body.woocommerce-checkout form.checkout,
body.woocommerce-checkout form.checkout.woocommerce-checkout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 30px !important;
}

@media (min-width: 992px) {
    body.woocommerce-checkout form.checkout,
    body.woocommerce-checkout form.checkout.woocommerce-checkout {
        grid-template-columns: 1.3fr 1fr !important;
        grid-template-rows: auto 1fr !important;
        grid-template-areas:
            "delivery delivery"
            "customer order" !important;
        align-items: start !important;
    }
}

/* --------------------------------------------------------------------------
   Estimated Delivery Box - Full Width Top
   -------------------------------------------------------------------------- */
body.woocommerce-checkout .checkout-delivery-estimate {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 20px 25px !important;
    overflow: visible !important;
    background: #e8f5e9 !important;
    border: 2px solid #4CAF50 !important;
    border-radius: 8px !important;
    order: -2 !important;
}

@media (min-width: 992px) {
    body.woocommerce-checkout .checkout-delivery-estimate {
        grid-area: delivery !important;
    }
}

body.woocommerce-checkout .checkout-delivery-estimate p {
    margin: 0 0 5px 0;
    word-wrap: break-word;
    line-height: 1.5;
}

body.woocommerce-checkout .checkout-delivery-estimate p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Customer Details (Billing + Shipping) - Left Column, Stacked
   -------------------------------------------------------------------------- */
body.woocommerce-checkout form.checkout #customer_details,
body.woocommerce-checkout .col2-set#customer_details {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    margin-bottom: 0 !important;
    order: -1 !important;
}

@media (min-width: 992px) {
    body.woocommerce-checkout form.checkout #customer_details,
    body.woocommerce-checkout .col2-set#customer_details {
        grid-area: customer !important;
        grid-column: 1 / 2 !important;
        grid-row: 2 / 3 !important;
    }
}

/* Billing (col-1) and Shipping (col-2) - Full width, stacked */
body.woocommerce-checkout .col2-set#customer_details .col-1,
body.woocommerce-checkout .col2-set#customer_details .col-2 {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    flex: none !important;
}

/* Section headings */
body.woocommerce-checkout .col2-set h3,
body.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout .woocommerce-shipping-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields h3 {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--alpha-blue);
    color: var(--alpha-black);
    font-size: 1.3em;
}

/* Ship to different address label styling */
body.woocommerce-checkout #ship-to-different-address {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--alpha-blue);
}

body.woocommerce-checkout #ship-to-different-address label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.3em;
    color: var(--alpha-black);
}

body.woocommerce-checkout #ship-to-different-address label span {
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Order Review & Payment - Right Column, Sticky
   -------------------------------------------------------------------------- */
body.woocommerce-checkout form.checkout #order_review,
body.woocommerce-checkout form.checkout.woocommerce-checkout #order_review {
    background: var(--alpha-light-bg) !important;
    padding: 25px !important;
    border-radius: 12px !important;
    border: 1px solid var(--alpha-border) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    margin-top: 0 !important;
}

@media (min-width: 992px) {
    body.woocommerce-checkout form.checkout #order_review,
    body.woocommerce-checkout form.checkout.woocommerce-checkout #order_review {
        grid-area: order !important;
        grid-column: 2 / 3 !important;
        grid-row: 2 / 3 !important;
        position: sticky !important;
        top: 120px !important;
        align-self: start !important;
    }
}

#order_review_heading {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--alpha-blue);
    font-size: 1.3em;
    color: var(--alpha-black);
}

/* Order review table */
.woocommerce-checkout-review-order-table {
    width: 100%;
    margin-bottom: 20px;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 12px 8px;
    border-bottom: 1px solid var(--alpha-border);
}

.woocommerce-checkout-review-order-table .cart_item .product-name {
    font-size: 0.9em;
}

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    font-size: 1.1em;
    font-weight: 600;
    border-top: 2px solid var(--alpha-border);
    border-bottom: none;
    padding-top: 15px;
}

/* --------------------------------------------------------------------------
   Payment Methods Styling
   -------------------------------------------------------------------------- */
#payment {
    background: transparent;
    border-radius: 0;
}

#payment .payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    border: none;
}

#payment .payment_methods li {
    padding: 15px;
    margin-bottom: 10px;
    background: #ffffff;
    border: 1px solid var(--alpha-border);
    border-radius: 8px;
}

#payment .payment_box {
    padding: 15px 0 0 0;
    background: transparent;
}

/* Stripe card input */
#payment .wc-stripe-upe-element {
    padding: 12px;
    background: #ffffff;
    border: 1px solid var(--alpha-border);
    border-radius: 6px;
}

/* Place order button */
#payment .place-order {
    padding-top: 20px;
}

#payment #place_order {
    width: 100%;
    padding: 15px 25px !important;
    font-size: 1.1em;
    font-weight: 600;
    border-radius: 8px !important;
}

/* --------------------------------------------------------------------------
   Checkout Form Fields
   -------------------------------------------------------------------------- */
.woocommerce-checkout .form-row {
    margin-bottom: 15px;
}

.woocommerce-checkout .form-row label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--alpha-text);
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--alpha-border);
    border-radius: 6px;
    font-size: 1em;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
    border-color: var(--alpha-blue);
    box-shadow: 0 0 0 3px rgba(29, 61, 189, 0.1);
    outline: none;
}

/* --------------------------------------------------------------------------
   Checkout Responsive Adjustments
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
    .woocommerce-checkout form.checkout {
        flex-direction: column;
    }

    .woocommerce-checkout #customer_details,
    .woocommerce-checkout #order_review {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .woocommerce-checkout #order_review {
        position: static;
        margin-top: 20px;
    }
}

@media screen and (max-width: 768px) {
    .woocommerce-checkout .col2-set {
        flex-direction: column;
    }

    .woocommerce-checkout .col2-set .col-1,
    .woocommerce-checkout .col2-set .col-2 {
        flex: 1 1 100%;
    }

    .woocommerce-checkout #order_review {
        padding: 20px;
    }

    .checkout-delivery-estimate {
        padding: 15px !important;
    }
}

/* --------------------------------------------------------------------------
   Shipping Address Toggle
   -------------------------------------------------------------------------- */
#ship-to-different-address {
    margin-bottom: 15px;
}

#ship-to-different-address label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 500;
}

#ship-to-different-address input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--alpha-blue);
}

/* Shipping address fields container */
.shipping_address {
    padding-top: 15px;
    border-top: 1px solid var(--alpha-border);
    margin-top: 15px;
}

/* --------------------------------------------------------------------------
   Homepage Product/Category Cards - Responsive Text Overflow Fix
   -------------------------------------------------------------------------- */

/* Override text-nowrap class on card headings and buttons at smaller widths */
@media screen and (max-width: 1200px) {
    /* Allow text to wrap in category card headings */
    .wp-block-group.has-background .wp-block-buttons.text-nowrap,
    .wp-block-group.has-background .wp-block-heading.text-nowrap {
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    /* Responsive font size for card headings (h5 -> h2 in the 8 Sep heading pass;
       scoped to the 200px-min-height card groups so other h2s are untouched) */
    .wp-block-group.has-background[style*="min-height:200px"] h2.wp-block-heading {
        font-size: clamp(14px, 2.5vw, 18px) !important;
        line-height: 1.4 !important;
    }
}

/* Tablet - allow columns to wrap */
@media screen and (max-width: 1024px) {
    /* Make the 4-column row wrap to 2x2 */
    .wp-block-columns:has(> .wp-block-column > .wp-block-group.has-background[style*="min-height:200px"]) {
        flex-wrap: wrap !important;
    }

    .wp-block-columns:has(> .wp-block-column > .wp-block-group.has-background[style*="min-height:200px"]) > .wp-block-column {
        flex-basis: calc(50% - 14px) !important;
        flex-grow: 0 !important;
        margin-bottom: 20px !important;
    }
}

/* Mobile - stack to single column */
@media screen and (max-width: 768px) {
    .wp-block-columns:has(> .wp-block-column > .wp-block-group.has-background[style*="min-height:200px"]) > .wp-block-column {
        flex-basis: 100% !important;
    }

    /* Ensure inner columns don't force side-by-side layout */
    .wp-block-group.has-background .wp-block-columns.is-not-stacked-on-mobile {
        flex-wrap: wrap !important;
    }

    /* Reduce/hide the 30px white bar on mobile to save screen space */
    body::before {
        height: 15px;
    }
}

/* --------------------------------------------------------------------------
   Mobile Touch Targets & Accessibility
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    /* Ensure minimum 44px touch targets for buttons and links */
    .wp-block-button__link,
    .wc-block-components-button,
    .button,
    button,
    .add_to_cart_button,
    .single_add_to_cart_button {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 20px !important;
    }

    /* Increase touch targets for navigation links */
    .wp-block-navigation-item__content {
        min-height: 44px;
        padding: 10px 12px !important;
    }

    /* Larger touch targets for form inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        min-height: 44px;
        padding: 12px 15px;
    }

    /* WooCommerce quantity buttons */
    .quantity .qty,
    .quantity input[type="number"] {
        min-height: 44px !important;
        min-width: 60px !important;
        text-align: center;
    }

    /* Remove from cart links */
    .woocommerce-cart-form .product-remove a,
    .remove_from_cart_button {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Checkbox and radio labels - increase clickable area */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 24px;
        min-height: 24px;
    }

    input[type="checkbox"] + label,
    input[type="radio"] + label,
    .woocommerce-form__label-for-checkbox {
        padding: 10px 0;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    /* Product tabs - larger touch targets */
    .woocommerce-tabs ul.tabs li a,
    .wc-tabs li a {
        min-height: 44px;
        padding: 12px 16px !important;
        display: inline-flex;
        align-items: center;
    }

    /* Custom size/length input fields */
    .custom-size-field input,
    .custom-size-field select,
    .custom-length-field input,
    .custom-length-field select {
        min-height: 48px !important;
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }

    /* Close/dismiss buttons */
    [class*="close"],
    [class*="dismiss"] {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

/* --------------------------------------------------------------------------
   Focus States for Accessibility
   -------------------------------------------------------------------------- */
/* Visible focus indicators for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible {
    outline: 2px solid var(--alpha-blue);
    outline-offset: 2px;
}

/* Back to top button focus state */
button#backToTop.back-to-top:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Utility Classes (to reduce inline styles)
   -------------------------------------------------------------------------- */

/* Spacing utilities */
.mt-0 { margin-top: 0 !important; }
.mt-8 { margin-top: 8px !important; }
.mt-12 { margin-top: 12px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.mb-0 { margin-bottom: 0 !important; }

/* Padding utilities */
.p-20 { padding: 20px !important; }
.p-30 { padding: 30px !important; }
.px-30 { padding-left: 30px !important; padding-right: 30px !important; }
.py-20 { padding-top: 20px !important; padding-bottom: 20px !important; }

/* Typography utilities */
.text-14 { font-size: 14px !important; }
.text-16 { font-size: 16px !important; }
.text-24 { font-size: 24px !important; }
.font-500 { font-weight: 500 !important; }
.font-600 { font-weight: 600 !important; }
.font-700 { font-weight: 700 !important; }
.lh-14 { line-height: 1.4 !important; }
.lh-15 { line-height: 1.5 !important; }
.uppercase { text-transform: uppercase !important; }

/* Image utilities */
.img-400 {
    width: 400px !important;
    height: 400px !important;
    object-fit: contain;
}

/* Border radius utilities */
.rounded-8 { border-radius: 8px !important; }
.rounded-12 { border-radius: 12px !important; }

/* Screen reader only (visually hidden but accessible) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Live region for screen readers (dynamic content updates) */
.aria-live-region {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ==========================================================================
   CATEGORY PAGE SEO CONTENT
   ========================================================================== */

/* Intro text above product grid */
.alpha-air-category-intro {
    margin-bottom: 30px;
    padding: 0 0 20px 0;
    border-bottom: 1px solid var(--alpha-border);
}

.alpha-air-category-intro .category-intro-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--alpha-text);
    max-width: 900px;
}

.alpha-air-category-intro .category-intro-text p:last-child {
    margin-bottom: 0;
}

/* Extended content, FAQ, and related categories below product grid */
.alpha-air-category-seo-content {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid var(--alpha-border);
}

.category-extended-description {
    font-size: 15px;
    line-height: 1.8;
    color: var(--alpha-text);
    margin-bottom: 40px;
    max-width: 900px;
}

.category-extended-description h2,
.category-extended-description h3 {
    margin-top: 30px;
    margin-bottom: 15px;
}

.category-extended-description p {
    margin-bottom: 15px;
}

.category-extended-description ul,
.category-extended-description ol {
    margin-bottom: 15px;
    padding-left: 25px;
}

.category-extended-description li {
    margin-bottom: 8px;
}

/* FAQ section */
.category-faq-section {
    margin-bottom: 40px;
    max-width: 900px;
}

.category-faq-heading {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--alpha-black);
}

.category-faq-item {
    margin-bottom: 20px;
    padding: 20px 25px;
    background: var(--alpha-light-bg);
    border-radius: 8px;
    border-left: 4px solid var(--alpha-blue);
}

.category-faq-question {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--alpha-black);
}

.category-faq-answer {
    font-size: 15px;
    line-height: 1.7;
    color: var(--alpha-text);
}

.category-faq-answer p:last-child {
    margin-bottom: 0;
}

/* Related categories */
.category-related-section {
    margin-bottom: 30px;
}

.category-related-heading {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--alpha-black);
}

.category-related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.category-related-link {
    display: inline-block;
    padding: 10px 20px;
    background: var(--alpha-light-bg);
    border: 1px solid var(--alpha-border);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--alpha-blue) !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.category-related-link:hover {
    background: var(--alpha-blue);
    color: #ffffff !important;
    border-color: var(--alpha-blue);
}

/* ==========================================================================
   YOU'LL ALSO NEED (CROSS-SELL)
   ========================================================================== */
.alpha-air-youll-also-need {
    margin: 40px 0;
    padding-top: 30px;
    border-top: 1px solid var(--alpha-border);
}

.alpha-air-youll-also-need h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--alpha-black);
}

.alpha-air-youll-also-need ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ==========================================================================
   HOMEPAGE SECTIONS
   ========================================================================== */

/* Hero section */
.homepage-hero {
    border-radius: 0 !important;
}

/* Trust bar */
.homepage-trust-bar {
    border-bottom: 1px solid var(--alpha-border);
}

.homepage-trust-bar p {
    margin: 0;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Category cards from WooCommerce block */
.wc-block-product-categories-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    list-style: none !important;
    padding: 0 !important;
}

.wc-block-product-categories-list-item {
    text-align: center;
}

.wc-block-product-categories-list-item a {
    display: block;
    padding: 20px 15px;
    background: var(--alpha-light-bg);
    border: 1px solid var(--alpha-border);
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 500;
    color: var(--alpha-text) !important;
    transition: all 0.2s ease;
}

.wc-block-product-categories-list-item a:hover {
    border-color: var(--alpha-blue);
    box-shadow: 0 2px 10px rgba(29, 61, 189, 0.1);
}

/* CTA section outline buttons */
.homepage-cta .is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
}

.homepage-cta .is-style-outline .wp-block-button__link:hover {
    background-color: #ffffff !important;
    color: var(--alpha-blue) !important;
}

/* Hero outline buttons */
.homepage-hero .is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
}

.homepage-hero .is-style-outline .wp-block-button__link:hover {
    background-color: #ffffff !important;
    color: var(--alpha-blue) !important;
}

/* ==========================================================================
   CATEGORY RELATED LINKS RESPONSIVE
   ========================================================================== */
@media screen and (max-width: 600px) {
    .category-related-links {
        flex-direction: column;
    }

    .category-related-link {
        text-align: center;
    }
}

/* ==========================================================================
   PRODUCT FAQ TAB
   ========================================================================== */
.alpha-air-product-faqs {
    max-width: 800px;
}

.product-faq-item {
    border-left: 3px solid var(--alpha-blue);
    padding: 12px 16px;
    margin-bottom: 16px;
    background: #f8f9fa;
    border-radius: 0 4px 4px 0;
}

.product-faq-question {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--alpha-text);
}

.product-faq-answer {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--alpha-dark);
}

.product-faq-answer p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   DELIVERY TAB
   ========================================================================== */
.alpha-air-delivery-info {
    max-width: 800px;
}

.delivery-status {
    padding: 16px 20px;
    border-radius: 6px;
    margin-bottom: 24px;
}

.delivery-in-stock {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
}

.delivery-short-lead {
    background: #fff8e1;
    border: 1px solid #ffe082;
}

.delivery-made-to-order {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
}

.delivery-badge {
    display: inline-block;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 8px;
}

.delivery-badge--green {
    background: #28a745;
    color: #fff;
}

.delivery-badge--amber {
    background: #f59e0b;
    color: #fff;
}

.delivery-badge--grey {
    background: #6b7280;
    color: #fff;
}

.delivery-options-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 20px;
    font-size: 0.9375rem;
}

.delivery-options-table th {
    background: var(--alpha-blue);
    color: #fff;
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
}

.delivery-options-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
}

.delivery-options-table tr:last-child td {
    border-bottom: none;
}

/* ==========================================================================
   STOCK / AVAILABILITY INDICATOR
   ========================================================================== */
.alpha-air-availability {
    margin: 0 0 16px;
}

.availability-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 6px 14px;
    border-radius: 4px;
}

.availability-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.availability-badge--green {
    background: #e8f5e9;
    color: #1b5e20;
}

.availability-badge--green .availability-dot {
    background: #28a745;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2);
}

.availability-badge--amber {
    background: #fff8e1;
    color: #92400e;
}

.availability-badge--amber .availability-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.availability-badge--grey {
    background: #f3f4f6;
    color: #374151;
}

.availability-badge--grey .availability-dot {
    background: #6b7280;
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.2);
}

/* ==========================================================================
   STICKY ADD-TO-CART BAR (MOBILE)
   ========================================================================== */
.alpha-air-sticky-atc {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
    border-top: 1px solid #e5e7eb;
}

.sticky-atc-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    max-width: 100%;
    gap: 12px;
}

.sticky-atc-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.sticky-atc-name {
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--alpha-text);
}

.sticky-atc-price {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--alpha-blue);
}

.sticky-atc-price del {
    font-size: 0.75rem;
    font-weight: 400;
}

.sticky-atc-btn {
    flex-shrink: 0;
    background: #FFE256; /* unified CTA yellow (8 Sep 2026) */
    color: #16232e;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.sticky-atc-btn:hover,
.sticky-atc-btn:focus {
    background: #f5d63e;
    color: #16232e;
}

/* Hide sticky bar on desktop */
@media screen and (min-width: 769px) {
    .alpha-air-sticky-atc {
        display: none !important;
    }
}

/* ==========================================================================
   CATEGORY READ MORE (MOBILE)
   ========================================================================== */
.category-readmore-btn {
    background: none;
    border: none;
    color: var(--alpha-blue);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 4px 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.category-readmore-btn:hover {
    color: #162ea0;
}

/* ==========================================================================
   404 PAGE
   ========================================================================== */
.alpha-air-404 {
    text-align: center;
    padding: 60px 20px 80px;
    max-width: 800px;
    margin: 0 auto;
}

.alpha-air-404 h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 16px;
}

.alpha-air-404 .error-subtitle {
    font-size: 1.125rem;
    color: var(--alpha-dark);
    margin-bottom: 32px;
}

.alpha-air-404 .search-form-404 {
    max-width: 500px;
    margin: 0 auto 48px;
    display: flex;
    gap: 8px;
}

.alpha-air-404 .search-form-404 input[type="search"] {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 1rem;
}

.alpha-air-404 .search-form-404 input[type="search"]:focus {
    border-color: var(--alpha-blue);
    outline: none;
}

.alpha-air-404 .search-form-404 button {
    background: var(--alpha-blue);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.alpha-air-404-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 24px;
    text-align: center;
}

.alpha-air-404-categories a {
    display: block;
    padding: 16px 12px;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--alpha-text);
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}

.alpha-air-404-categories a:hover {
    border-color: var(--alpha-blue);
    background: #eef1fb;
    color: var(--alpha-blue);
}

.alpha-air-404 .error-contact {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
    font-size: 0.9375rem;
    color: var(--alpha-dark);
}

@media screen and (max-width: 600px) {
    .alpha-air-404 {
        padding: 40px 16px 60px;
    }

    .alpha-air-404 .search-form-404 {
        flex-direction: column;
    }

    .alpha-air-404-categories {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Homepage category-panel product images (3 July 2026): product photo on a white
   rounded chip, pinned bottom-right inside the tinted card so long nowrap
   headings never collide with the image. */
.aa-panel-img{margin:0}
.aa-panel-img img{background:#fff;border-radius:8px;padding:5px;max-height:110px;width:auto;max-width:100%;display:block;box-shadow:0 1px 4px rgba(16,24,40,.08);object-fit:contain}
.wp-block-column:has(> .aa-panel-img){display:flex;align-items:flex-end;justify-content:flex-end}
/* Category sidebar (Filter / Filter by Price / Brand) hidden always (Matt, 26 Aug
   2026) — the products column expands to full width. Filters kept in the DOM so
   re-enabling is one CSS deletion. */
.archive-product .wp-block-columns > .wp-block-column:has(.filter-content) { display: none; }
.archive-product .wp-block-columns:has(.filter-content) > .wp-block-column:not(:has(.filter-content)) {
	flex-basis: 100% !important;
	max-width: 100%;
}

/* USP strip lives in BOTH the footer (site-wide) and the homepage hero position
   (Matt, 26 Aug 2026). Hide the footer's copy on the homepage so it shows once. */
.home footer .wp-block-group:has(> .wp-block-columns.footer-features) { display: none; }

/* USP strip + Trusted Partners: infinite marquee (Matt, 27 Aug pm).
   JS (functions.php) doubles the row's children and tags it .aa-marquee;
   the animation loops seamlessly at -50%. USP marquees below 1024px only
   (desktop keeps the static 4-across); partners marquee at all widths.
   Reduced-motion users get a static scrollable row. */
.aa-marquee {
	flex-wrap: nowrap !important;
	overflow: visible !important;
	width: max-content !important;
	animation: aa-marquee-scroll var(--aa-marquee-dur, 30s) linear infinite;
}
.aa-marquee > .wp-block-column {
	flex: 0 0 auto !important;
	min-width: 160px;
}
.aa-marquee-clip {
	overflow: hidden !important;
}
.aa-marquee:hover { animation-play-state: paused; }
@keyframes aa-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.aa-marquee { animation: none; }
	.aa-marquee-clip { overflow-x: auto !important; }
}
@media (max-width: 781px) {
	.footer-features { scrollbar-width: none; }
	.footer-features::-webkit-scrollbar { display: none; }
}

/* Hide-on-mobile utility (first use: the blue Spiral Duct & Fittings homepage
   strip — Matt, 27 Aug pm). Add className "aa-hide-sm" to any block. */
@media (max-width: 781px) {
	.aa-hide-sm { display: none !important; }
}

/* Sticky header (Matt, 27 Aug pm — "by the time someone scrolls they won't
   know there's a nav"). Desktop: negative top parks the logo row off-screen
   and keeps the blue nav bar (75px offset measured live). Mobile: the whole
   compact header row sticks. html/body use overflow-x:clip (not hidden), so
   sticky works — do not "fix" that. */
.wp-block-template-part:has(> .header-v1),
header.wp-block-template-part:has(.header-v1) {
	position: sticky;
	z-index: 980;
}
.header-v1 { background: #fff; }
/* Countdown sits flush under the header inside the sticky unit — the header's
   30px bottom padding read as a gap above the banner (Matt, 27 Aug pm). */
.wp-block-template-part:has(.alpha-delivery-countdown-banner) .header-v1 {
	padding-bottom: 0 !important;
}
@media (min-width: 1200px) {
	.wp-block-template-part:has(> .header-v1),
	header.wp-block-template-part:has(.header-v1) { top: -75px; }
	body.admin-bar .wp-block-template-part:has(> .header-v1),
	body.admin-bar header.wp-block-template-part:has(.header-v1) { top: -43px; }
}
@media (max-width: 1199px) {
	.wp-block-template-part:has(> .header-v1),
	header.wp-block-template-part:has(.header-v1) { top: 0; }
	/* Admin-bar users only: stick below the bar (32px, 46px on phones) */
	body.admin-bar .wp-block-template-part:has(> .header-v1),
	body.admin-bar header.wp-block-template-part:has(.header-v1) { top: 32px; }
}
@media (max-width: 782px) {
	body.admin-bar .wp-block-template-part:has(> .header-v1),
	body.admin-bar header.wp-block-template-part:has(.header-v1) { top: 46px; }
}
/* Category pages: the products header carried a 94px bottom margin — the
   whitespace gap between "Read more" and the results count (Matt Q1, 28 Aug). */
.archive-product .woocommerce-products-header {
	margin-bottom: 28px !important;
}

/* Blue product-strip rows (e.g. Spiral Duct & Fittings) show a desktop
   scrollbar in the tablet band; hide it cosmetically (QA review, 27 Aug). */
@media (min-width: 782px) and (max-width: 1199px) {
	.aa-hide-sm * { scrollbar-width: none; }
	.aa-hide-sm *::-webkit-scrollbar { display: none; }
}

/* Classic cart: shipping cell alignment on mobile (Matt, 27 Aug pm — radio
   labels wrapped ragged-right under the option column). */
@media (max-width: 781px) {
	.woocommerce-cart .cart_totals .woocommerce-shipping-totals td,
	.woocommerce-cart .cart_totals .woocommerce-shipping-totals th {
		text-align: left !important;
	}
	.woocommerce-cart ul#shipping_method li {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		text-align: left;
	}
	.woocommerce-cart ul#shipping_method li input[type="radio"] {
		flex: 0 0 auto;
		margin-top: 5px;
	}
	.woocommerce-cart ul#shipping_method li label {
		flex: 1;
		text-align: left;
	}
	.woocommerce-cart .woocommerce-shipping-destination,
	.woocommerce-cart .woocommerce-shipping-calculator,
	.woocommerce-cart .cart_totals .woocommerce-shipping-totals p {
		text-align: left !important;
	}
}

/* Footer legal line: stack the three registration facts on mobile (Matt,
   27 Aug pm) — spans added in footer-v1 markup; separators hidden when
   stacked. */
@media (max-width: 781px) {
	.aa-legal-seg { display: block; margin-top: 2px; }
	.aa-legal-sep { display: none; }
}

/* Mobile menu drawer: the close X sat on top of the injected search box
   (Matt, 27 Aug pm). Give the search bar its own row below the X. */
.wp-block-navigation__responsive-container.is-menu-open .aa-mobile-menu-search {
	margin-top: 52px !important;
}

/* WPForms confirmations: the footer newsletter's success message inherited
   WHITE text on the white footer — form vanished with no visible confirmation
   (Matt, 27 Aug pm, iPhone). Green box, everywhere a message confirmation
   renders. */
.wpforms-confirmation-container,
.wpforms-confirmation-container-full {
	background: #e8f5e9 !important;
	border: 1px solid #4caf50;
	border-radius: 6px;
	padding: 12px 16px;
	color: #2e7d32 !important;
	font-size: 14px;
}
.wpforms-confirmation-container p,
.wpforms-confirmation-container-full p {
	color: #2e7d32 !important;
	margin: 0;
}

/* Product tile buttons: they're flex containers stretched to the row's tallest
   sibling, and the label sat at the TOP of the stretched box (Matt, 27 Aug pm
   mobile screenshot). Centre the label; harmless where no stretching occurs. */
ul.products li.product .button.wp-element-button,
.products a.add_to_cart_button,
.products a.button {
	align-items: center !important;
	justify-content: center !important;
}
/* And on mobile, anchor buttons to the tile bottom so a 2-line and a 3-line
   title in the same row still give level buttons (QA eyeball, 27 Aug pm). */
@media (max-width: 781px) {
	ul.products li.product {
		display: flex !important;
		flex-direction: column !important;
	}
	ul.products li.product .button.wp-element-button {
		margin-top: auto !important;
	}
}

/* Category-page breadcrumb at half-window widths (27 Aug 2026): the parent
   theme absolutely pins it top-left of the archive container and only clears
   space for it (padding-top:153px) at >=1024px — between ~782-1023px the page
   title rides up underneath it. Put it back in normal flow below 1024. */
@media (max-width: 1023px) {
	.archive-product .woocommerce-breadcrumb {
		position: static !important;
		margin: 10px 0 4px;
	}
}

/* Mobile menu drawer at half-window widths (27 Aug 2026): WordPress only
   applies its accordion submenu styles below 600px, so a drawer opened in the
   600-1199px band (eMart shows the hamburger up to ~1200) renders submenus as
   desktop hover-popovers — a floating shadowed card beside a squeezed parent
   label. Scoped to the OPEN drawer only: wrap the item and drop the submenu
   below it, full width, like the phone accordion. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
	flex-wrap: wrap !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	flex: 1 1 auto !important;
	width: auto !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	flex-basis: 100% !important;
	width: 100% !important;
	min-width: 0 !important;
	box-shadow: none !important;
	border: none !important;
	background: transparent !important;
	padding-left: 16px !important;
}

/* Desktop: pin every panel chip to the SAME spot in its card (Matt, 26 Aug 2026 —
   flex-end seating varied 0-6px per card because each card's inner DOM differs).
   Mirrors the mobile absolute-anchor approach further down.
   27 Aug 2026: breakpoint raised 782→1200 — at half-window widths (2-up cards)
   the 150px right padding + fixed image column squeezed headings to ~80px
   (mid-word wraps); the compact centre-right treatment below now covers
   everything under 1200px. */
@media (min-width: 1200px) {
	body .wp-block-group.relative.has-background:has(.aa-panel-img) {
		min-height: 200px;
		padding-right: 150px !important;
	}
	body .wp-block-group.relative.has-background:has(.aa-panel-img) .aa-panel-img {
		position: absolute;
		right: 10px;
		bottom: 10px;
		margin: 0;
	}
}

/* Footer newsletter (WPForms 342): on narrow screens the Subscribe button wrapped
   mid-word ("Subsc-ribe"). Keep it on one line and let the email field flex. */
@media (max-width: 600px) {
	footer .wpforms-submit,
	.footer-widgets .wpforms-submit,
	.wp-block-template-part .wpforms-submit {
		white-space: nowrap;
		padding-left: 16px;
		padding-right: 16px;
		font-size: 14px;
	}
}

/* ---- Classic cart on mobile: stacked item cards (14 Aug 2026) ----
   The theme let the cart table collapse into a centred jumble with a stray
   horizontal scroll strip. Rebuild each row as a card using Woo's data-title
   attributes; kill the h-scroll; neutralise the alarming disabled Update button. */
@media (max-width: 768px) {
	.woocommerce-cart-form { overflow: visible !important; }
	.woocommerce-cart-form table.shop_table_responsive thead { display: none; }
	.woocommerce-cart-form table.shop_table_responsive,
	.woocommerce-cart-form table.shop_table_responsive tbody { display: block; width: 100%; }
	.woocommerce-cart-form table.shop_table_responsive tr.woocommerce-cart-form__cart-item {
		display: block; position: relative; background: #fff; border: 1px solid #e7e9ef;
		border-radius: 10px; padding: 14px 14px 8px; margin-bottom: 12px;
		box-shadow: 0 1px 3px rgba(16,24,40,.05);
	}
	.woocommerce-cart-form table.shop_table_responsive td {
		display: flex; align-items: center; justify-content: space-between; gap: 10px;
		border: none !important; padding: 7px 0 !important; text-align: right; width: 100%;
	}
	.woocommerce-cart-form table.shop_table_responsive td[data-title]::before {
		content: attr(data-title); font-weight: 600; color: #101828;
		margin-right: auto; text-align: left; font-size: 13px;
	}
	.woocommerce-cart-form td.product-remove {
		position: absolute; top: 6px; right: 8px; width: auto; padding: 0 !important;
	}
	.woocommerce-cart-form td.product-remove a { font-size: 20px; line-height: 1; }
	.woocommerce-cart-form td.product-thumbnail { justify-content: flex-start; padding-right: 30px !important; }
	.woocommerce-cart-form td.product-thumbnail img { width: 72px; height: auto; }
	.woocommerce-cart-form td.product-name { text-align: right; font-weight: 600; }
	.woocommerce-cart-form td.product-quantity .quantity { margin: 0; }
	.woocommerce-cart-form td.product-subtotal { border-top: 1px solid #eef0f4 !important; margin-top: 4px; }
	.woocommerce-cart-form button[name="update_cart"] { width: 100%; }
}
/* Native <select> elements don't inherit the page font — every onchange
   selector (damper axes, product family, Elta, silencer, frame/core) was
   rendering its options in Arial against a Poppins page (styling scan,
   8 Sep 2026). */
.damper-selector select,
.product-family-selector select,
.elta-fan-selector__select,
form.cart select,
.aa-sb select,
.aa-gb select {
	font-family: inherit;
}

/* Proceed to Checkout: the funnel's primary action rendered as a GHOST/outline
   button — visually weaker than the footer Subscribe. Solid yellow like every
   other primary CTA (add-to-basket, Place Order, order-received CTA). 8 Sep 2026. */
body .wc-proceed-to-checkout a.checkout-button.wp-element-button,
body .wc-proceed-to-checkout a.checkout-button {
	background: #FFE256 !important;
	border-color: #FFE256 !important;
	color: #16232e !important;
	font-weight: 700;
	box-shadow: none !important;
}
body .wc-proceed-to-checkout a.checkout-button.wp-element-button:hover,
body .wc-proceed-to-checkout a.checkout-button:hover {
	filter: brightness(.95);
	background: #FFE256 !important;
	color: #16232e !important;
}

/* Disabled Update button read as an angry pink CTA — make it clearly inert (all widths). */
.woocommerce-cart-form button[name="update_cart"]:disabled,
.woocommerce-cart-form button[name="update_cart"][aria-disabled="true"] {
	background: #eef0f4 !important; color: #98a2b3 !important; box-shadow: none !important;
}
@media (max-width: 768px) {
	/* the theme gives .shop_table a min-width that forced 400px and clipped values */
	.woocommerce-cart-form table.shop_table_responsive { min-width: 0 !important; width: 100% !important; }
	.woocommerce-cart-form table.shop_table_responsive td { min-width: 0; flex-wrap: wrap; }
}

/* ---- "Choose Options" tiles (14 Aug 2026; metrics matched to Add to Basket 25 Aug) ----
   In blockified grids the replacement anchor sits directly in the flex tile with no
   button wrapper, so the theme stretched it into a giant block. Pin it back to a
   button shape — with the SAME metrics as the theme's add-to-basket buttons
   (14px vertical padding, 24px line-height, 50px icon clearance → 52px tall). */
li.product a.aa-choose-options,
.wp-block-post a.aa-choose-options,
a.aa-choose-options {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	/* Match the natural width of the theme's "Add to basket" button (Matt, 26 Aug
	   2026 — the shorter label left this one visibly narrower). 15.7em = the
	   add-to-basket width at the same font; scales with font size, caps at tile. */
	box-sizing: border-box;
	min-width: 15.7em;
	max-width: 100%;
	flex: 0 0 auto !important;
	align-self: flex-start;
	padding: 14px 18px 14px 50px !important; /* left pad clears the theme's cart-icon chip */
	line-height: 24px !important;
	margin-top: 6px;
}

/* ---- Product tile titles: stop cutting them off (Matt, 25 Aug 2026) ----
   The parent theme clamps loop titles to 2 lines, but this catalogue's titles
   average 66 chars (79% exceed 60) — sizes/specs live in the name, so the part
   that distinguishes products was exactly what got cut. Allow up to 4 lines
   (covers the longest visible title at desktop and mobile tile widths; the
   clamp stays as a guard against pathological titles). Category tiles keep the
   theme's 2 lines — their names are short. */
li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
	-webkit-line-clamp: 4;
}

/* ---- Long-title hover reveal (Matt, 25 Aug 2026) ----
   Tiles whose title is STILL truncated at 4 lines expand the full title upward
   over the product image on hover — price and button never move, and the image
   dims so the overlapping text reads clearly. JS wraps the title text in
   .aa-ti, moves the clamp onto it (h2 gets .aa-wrapped), and adds .aa-tr to
   the tile on hover only when the title actually overflows. */
li.product .woocommerce-loop-product__title.aa-wrapped {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
	position: relative;
	z-index: 5;
}
li.product .aa-wrapped .aa-ti {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}
li.product.aa-tr .aa-wrapped .aa-ti {
	-webkit-line-clamp: unset;
	position: absolute;
	bottom: 0;
	left: -10px;
	right: -10px;
	padding: 8px 10px;
	background: rgba(255, 255, 255, 0.97);
	border-radius: 4px;
	box-shadow: 0 -8px 22px rgba(16, 24, 40, 0.12);
	animation: aaTitleReveal 0.18s ease;
}
@keyframes aaTitleReveal {
	from { opacity: 0.5; transform: translateY(5px); }
	to   { opacity: 1;   transform: none; }
}
li.product.aa-tr img { filter: brightness(0.55); }

/* ---- 14 Aug polish batch (full-site visual audit) ---- */
/* Back-to-top button sat on the sticky add-to-basket bar on mobile product pages. */
@media (max-width: 768px) {
	.single-product #backToTop { bottom: 96px; }
}
/* Touch carousels showed Windows scrollbar chrome (grey track + arrow buttons). */
@media (max-width: 768px) {
	.wp-block-woocommerce-product-collection ul,
	.wc-block-grid__products,
	[class*="carousel"],
	.products-block-post-template {
		scrollbar-width: none;
	}
	.wp-block-woocommerce-product-collection ul::-webkit-scrollbar,
	.wc-block-grid__products::-webkit-scrollbar,
	[class*="carousel"]::-webkit-scrollbar,
	.products-block-post-template::-webkit-scrollbar { display: none; }
}
/* Mobile menu: submenu chevrons sat a line below their label. */
.wp-block-navigation__responsive-container .wp-block-navigation__submenu-icon,
.wp-block-navigation .wp-block-navigation__submenu-icon { align-self: center; }
/* 404 search input: placeholder clipped against the button on narrow screens. */
@media (max-width: 480px) {
	.error404 .wp-block-search__input { font-size: 14px; min-width: 0; }
}

/* ---- Quantity stepper rebuild (14 Aug 2026) ----
   The theme's .qty-container rendered as an oversized box with the - / + hanging
   half-clipped at the edges. Rebuild as a compact segmented control everywhere. */
.qty-container {
	display: inline-flex !important;
	align-items: stretch;
	height: 42px;
	width: auto !important;
	border: 1px solid #d6dae3;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	position: relative;
}
.qty-container .qty-minus,
.qty-container .qty-plus {
	position: static !important;
	width: 38px;
	height: auto !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #f6f7f9 !important;
	color: #101828 !important;
	font-size: 18px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0 !important;
	margin: 0 !important;
}
.qty-container .qty-minus { order: -1; border-right: 1px solid #e4e7ee !important; }
.qty-container .qty-plus { border-left: 1px solid #e4e7ee !important; }
.qty-container .qty-minus:hover,
.qty-container .qty-plus:hover { background: #eceef2 !important; }
.qty-container input.qty {
	border: 0 !important;
	width: 46px !important;
	height: auto !important;
	min-height: 0 !important;
	text-align: center;
	font-weight: 600;
	font-size: 15px;
	background: #fff;
	-moz-appearance: textfield;
	appearance: textfield;
	padding: 0 !important;
	margin: 0 !important;
}
.qty-container input.qty::-webkit-outer-spin-button,
.qty-container input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }


/* ---- Homepage feature cards: consistent image size + placement (14 Aug 2026) ----
   The louvre render is baked onto black (its card) and the plenum photo onto green;
   respect that design — no chips — but give every card the SAME image treatment:
   right-aligned, vertically centred, equal visual size. Card green tuned to the
   photo's exact backdrop (#80d5b3 vs the old #7fd3b2) so the photo melts in. */
.home figure.product-card-image:has(img[src*="Rectangualar-Louvre-1"]),
.home figure.product-card-image:has(img[src*="Galvansied-Grille-Boxes"]) {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.home figure.product-card-image img[src*="Rectangualar-Louvre-1"],
.home figure.product-card-image img[src*="Galvansied-Grille-Boxes"] {
	height: 300px !important;
	width: auto !important;
	max-width: none !important;
	object-fit: contain;
}
.home .wp-block-group.has-background:has(img[src*="Galvansied-Grille-Boxes"]) {
	background-color: #80d5b3 !important;
}
/* LSD band drawing: centre it vertically against its text instead of floating high. */
.home figure:has(img[src*="linear-slot-diffuser-alpha-air"]) {
	margin: 0;
	display: flex;
	align-items: center;
	height: 100%;
}
.home img[src*="linear-slot-diffuser-alpha-air"] { max-height: 200px; width: auto; }

/* Mobile menu rows: the submenu-expand button was ~full-width and wrapped below the
   label, leaving a stray chevron on its own line. One row: label left, chevron right. */
.wp-block-navigation__responsive-container .wp-block-navigation-submenu.wp-block-navigation-item {
	flex-wrap: nowrap !important;
	align-items: center !important;
}
.wp-block-navigation__responsive-container .wp-block-navigation-item__content { flex: 1 1 auto; }
.wp-block-navigation__responsive-container button.wp-block-navigation__submenu-icon {
	flex: 0 0 44px;
	width: 44px !important;
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	/* The theme absolutely-positions this button and the row's full-width link
	   painted OVER it (z auto) — every chevron tap navigated instead of expanding
	   (nav audit 25 Aug 2026). Lift it above the link. */
	z-index: 10;
}
.wp-block-navigation__responsive-container .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
}

/* ---- Disabled buttons: inert grey, never crimson-pink (14 Aug 2026) ----
   The theme's disabled state was the danger red at 50% opacity = dusty pink on the
   most important CTAs (add-to-basket awaiting a size, update-basket, etc). */
.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled,
button.button:disabled,
.wp-element-button:disabled,
button[disabled].wp-element-button {
	background: #eef0f4 !important;
	color: #98a2b3 !important;
	border-color: #e4e7ee !important;
	box-shadow: none !important;
	opacity: 1 !important;
	cursor: not-allowed;
}
.single_add_to_cart_button.disabled i,
.single_add_to_cart_button:disabled i { opacity: .5; }
/* Stepper container must size to its content — a theme width cap (130px) was
   clipping the + segment on product forms. */
.quantity, .qty-container { width: max-content !important; max-width: none !important; }
form.cart .qty-container input.qty,
.woocommerce form.cart .qty-container input.qty,
.qty-container input.qty { width: 46px !important; min-width: 46px !important; }

/* Frame/Core segmented switches: stop labels wrapping to two lines (lopsided
   segments) — let segments grow and keep labels on one line. */
.aa-frame-seg { flex-wrap: nowrap; }
.aa-frame-seg .aa-frame-opt { white-space: nowrap; flex: 0 1 auto; }
@media (max-width: 480px) {
	.aa-frame-seg .aa-frame-opt { font-size: 12.5px; padding-left: 10px; padding-right: 10px; }
}
/* Header cart-count badge: dark text on the yellow dot (was white-on-yellow). */
.cart-contents .count, .header-cart .count, [class*="cart-count"], .mini-cart-count {
	color: #101828 !important;
	font-weight: 700;
}

/* ---- iOS input fixes (14 Aug 2026) ----
   1) Safari auto-zooms when a focused input's font-size is under 16px — the mobile
      menu search was 15px, and checkout/size inputs vary. 16px on all mobile inputs.
   2) The open menu panel kept an identity transform, which desyncs the text caret
      in Safari (known WebKit quirk: any transformed ancestor of a focused input). */
@media (max-width: 782px) {
	input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
	input[type="number"], input[type="password"], input[type="url"], select, textarea {
		font-size: 16px !important;
	}
}
.wp-block-navigation__responsive-container.is-menu-open { transform: none !important; }

/* The theme injects a 15px body::before spacer above the header — invisible when
   the top strip was white, but a white sliver above the dark mobile utility bar. */
@media (max-width: 782px) {
	body::before { content: none !important; display: none !important; height: 0 !important; }
}

/* ---- Top category panels on mobile: one consistent layout (14 Aug 2026) ----
   Stacked columns put each panel's image chip at a different height (top, middle
   or bottom depending on authored column order). Force text-left / chip-right,
   vertically centred, identical on every card. */
@media (max-width: 1199px) {
	/* 27 Aug 2026: flattened from a forced flex row to plain flow. The chip is
	   absolutely anchored (below), so column order no longer matters — and the
	   flex forcing broke differently per card because each card's authored DOM
	   differs (the Spiral card's heading sits a level deeper than the others,
	   which collapsed its text column to zero width at half-window sizes).
	   Block flow gives the text the card's full width minus the chip reserve,
	   uniformly on every card. */
	.wp-block-group.relative.has-background:has(.aa-panel-img) .wp-block-columns,
	.wp-block-group.relative.has-background:has(.aa-panel-img) .wp-block-column {
		display: block !important;
		width: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* Keep the cards' text inset (the authored 30px lived on the flattened
	   columns' padding, zeroed above) — 27 Aug pm, Matt: mobile text hugged
	   the card edge. */
	.wp-block-group.relative.has-background:has(.aa-panel-img) > .wp-block-group > .wp-block-columns,
	.wp-block-group.relative.has-background:has(.aa-panel-img) .wp-block-columns {
		padding-left: 30px !important;
	}
	.aa-panel-img img { max-height: 96px !important; }
}

/* LSD feature band: the product image column is d-none d-lg-block (desktop
   only, from the original design). Matt wants it on mobile too (27 Aug) —
   shown below/beside the text, scoped to this band's image only. */
@media (max-width: 991px) {
	.wp-block-column.d-none.d-lg-block:has(img[src*="linear-slot-diffuser"]) {
		display: block !important;
		padding-left: 0 !important;
	}
	.wp-block-column.d-none.d-lg-block:has(img[src*="linear-slot-diffuser"]) figure {
		margin: 0 auto 28px;
	}
	.wp-block-column.d-none.d-lg-block:has(img[src*="linear-slot-diffuser"]) img {
		width: 220px !important;
		height: auto !important;
		display: block;
		margin: 0 auto;
	}
}
/* Structure-agnostic version: each card's DOM differs, so anchor the chip
   centre-right of the card itself and reserve space for it. */
@media (max-width: 1199px) {
	body .wp-block-group.relative.has-background:has(.aa-panel-img) {
		padding-right: 146px !important;
		min-height: 150px;
	}
	body .wp-block-group.relative.has-background:has(.aa-panel-img) .aa-panel-img {
		position: absolute;
		right: 18px;
		top: 50%;
		transform: translateY(-50%);
		margin: 0;
	}
	body .wp-block-group.relative.has-background:has(.aa-panel-img) .aa-panel-img img {
		max-height: 104px !important;
		width: auto;
	}
}

/* ---- Category description clamp (14 Aug 2026, Matt's call) ----
   The long SEO copy pushed product cards below the fold. Content stays fully in
   the DOM (indexable); visually clamped to a short intro with a Read more toggle. */
.aa-desc-clamp { position: relative; max-height: 9.5em; overflow: hidden; }
.aa-desc-clamp::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.5em;
	background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 85%);
	pointer-events: none;
}
.aa-desc-expanded { max-height: none; }
.aa-desc-expanded::after { display: none; }
/* Heading-boundary clip (25 Aug 2026): the cut lands on clean whitespace above the
   first subheading, so the "more below" gradient would just wash out the last
   intro line — hide it for this mode. */
.aa-clip-heading::after { display: none; }
.aa-readmore {
	display: inline-flex; align-items: center; gap: 6px;
	background: none; border: 0; padding: 4px 0; margin: 2px 0 6px;
	font: inherit; font-weight: 600; font-size: 14px; color: #2959D3; cursor: pointer;
}
.aa-readmore::after { content: "▾"; font-size: 11px; transition: transform .2s; }
.aa-readmore[aria-expanded="true"]::after { transform: rotate(180deg); }