/**
 * H-Moon Hydro - Theme Override Stylesheet
 * 
 * PURPOSE: Stabilize theme appearance without modifying parent theme,
 *          Beaver Builder, or WooCommerce plugin files.
 * 
 * RULES:
 * - All selectors should be specific enough to override without !important
 * - Use CSS custom properties from :root when possible
 * - Group by component, not by page
 * - Comment every rule group with the problem it solves
 * 
 * @version 1.0.0
 * @since   2026-02-25
 */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (H-Moon Palette)
   Source: docs/COLOR_PALETTE.md
   ========================================================================== */

:root {
    /* -------------------------------------------------------------------------
       H-Moon Brand Palette — from live Shopify store
       ------------------------------------------------------------------------- */
    
    /* Greens */
    --hmh-green-dark:       #295907;    /* forest green — primary buttons, nav */
    --hmh-green-mid:        #5e8c3f;    /* medium green — button hover states */
    --hmh-green-light:      #afc89e;    /* sage green — variant hover bg */
    
    /* Amber Accent */
    --hmh-amber:            #f28705;    /* orange amber — hover accent, review stars, CTA */
    
    /* Backgrounds */
    --hmh-cream:            #f5f1e6;    /* warm beige — page/section backgrounds */
    --hmh-white:            #ffffff;    /* cards, inputs, overlays */
    
    /* Text & Borders */
    --hmh-near-black:       #1a1a1a;    /* near-black body text */
    --hmh-border-gray:      #e7e7e5;    /* warm light border */
    
    /* Extended Neutrals */
    --hmh-charcoal:         #2f2f2f;    /* dark charcoal for headings */
    --hmh-muted:            #6b7280;    /* muted gray for secondary text */
    --hmh-surface-alt:      #f7f8f9;    /* alternate surface (cooler) */
    
    /* Feedback Colors */
    --hmh-success:          #28a745;    /* success green */
    --hmh-warning:          #ffc107;    /* warning yellow */
    --hmh-error:            #b91c1c;    /* error red */
    
    /* -------------------------------------------------------------------------
       UI Token Aliases — semantic mappings for consistent usage
       ------------------------------------------------------------------------- */
    
    /* Backgrounds */
    --hmh-bg:               var(--hmh-cream);           /* page background */
    --hmh-surface:          var(--hmh-white);           /* cards, modals, inputs */
    
    /* Brand Colors */
    --hmh-primary:          var(--hmh-green-dark);      /* primary actions, buttons */
    --hmh-primary-hover:    var(--hmh-green-mid);       /* primary button hover */
    --hmh-accent:           var(--hmh-amber);           /* accent highlights, CTAs */
    
    /* Text & Borders */
    --hmh-text:             var(--hmh-near-black);      /* body text */
    --hmh-border:           var(--hmh-border-gray);     /* card/input borders */
    
    /* -------------------------------------------------------------------------
       Typography Scale
       ------------------------------------------------------------------------- */
    --hmh-font-body:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --hmh-font-heading:     var(--hmh-font-body);
    
    /* -------------------------------------------------------------------------
       Spacing Scale (px — BB sets html { font-size: 10px }, breaking rem)
       ------------------------------------------------------------------------- */
    --hmh-space-xs:         4px;
    --hmh-space-sm:         8px;
    --hmh-space-md:         16px;
    --hmh-space-lg:         24px;
    --hmh-space-xl:         32px;
    --hmh-space-2xl:        48px;
    
    /* -------------------------------------------------------------------------
       Shadows
       ------------------------------------------------------------------------- */
    --hmh-shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.06);
    --hmh-shadow-md:        0 4px 12px rgba(0, 0, 0, 0.08);

    /* -------------------------------------------------------------------------
       Border Radius
       ------------------------------------------------------------------------- */
    --hmh-radius:           6px;        /* default radius shorthand */
    --hmh-radius-sm:        4px;
    --hmh-radius-md:        8px;
    --hmh-radius-lg:        12px;
    --hmh-radius-full:      9999px;
}

/* ==========================================================================
   2. BASE DEFAULTS & TYPOGRAPHY
   Problem: BB parent theme sets body { color: #757575; font-size: 14px;
   font-family: "Helvetica" }. We need higher specificity to override.
   Using html body selector (specificity 0,0,2) beats parent's body (0,0,1).
   ========================================================================== */

/* 2.0 Body Defaults
   -------------------------------------------------------------------------- */
html body {
    background-color: var(--hmh-bg);
    color: var(--hmh-text);
    font-family: var(--hmh-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 2.1 Headings
   -------------------------------------------------------------------------- */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
    color: var(--hmh-charcoal);
    font-family: var(--hmh-font-heading);
    font-weight: 700;
}

/* 2.2 Body Text
   -------------------------------------------------------------------------- */
html body p,
html body li,
html body td,
html body th,
html body dd,
html body dt,
html body label {
    color: var(--hmh-text);
}

html body small,
html body .description,
html body .woocommerce-product-details__short-description {
    color: var(--hmh-muted);
}

/* 2.3 Links
   -------------------------------------------------------------------------- */
html body a {
    color: var(--hmh-green-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

html body a:hover,
html body a:focus {
    color: var(--hmh-green-mid);
}

/* 2.4 Global Border Consistency
   -------------------------------------------------------------------------- */
hr {
    border-color: var(--hmh-border-gray);
}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */

/* 3.1 Primary Buttons
   Problem: Inconsistent button colors across BB modules and theme defaults
   -------------------------------------------------------------------------- */
body .fl-builder-content button,
body .fl-builder-content .fl-button,
body .fl-builder-content a.fl-button,
body button.button,
body input[type="submit"],
body input[type="button"],
body a.button,
body .wp-block-button__link {
    background-color: var(--hmh-primary);
    color: var(--hmh-white);
    border: 2px solid var(--hmh-primary);
    border-radius: var(--hmh-radius-sm);
    padding: 12px 24px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body .fl-builder-content button:hover,
body .fl-builder-content .fl-button:hover,
body .fl-builder-content a.fl-button:hover,
body button.button:hover,
body input[type="submit"]:hover,
body input[type="button"]:hover,
body a.button:hover,
body .wp-block-button__link:hover {
    background-color: var(--hmh-primary-hover);
    border-color: var(--hmh-primary-hover);
    color: var(--hmh-white);
}

body .fl-builder-content button:focus,
body .fl-builder-content .fl-button:focus,
body .fl-builder-content a.fl-button:focus,
body button.button:focus,
body input[type="submit"]:focus,
body input[type="button"]:focus,
body a.button:focus,
body .wp-block-button__link:focus {
    outline: 2px solid var(--hmh-accent);
    outline-offset: 2px;
}

/* 3.2 Secondary/Outline Buttons
   Problem: No consistent secondary button style
   -------------------------------------------------------------------------- */
body button.button-secondary,
body a.button-secondary,
body .button.alt-outline,
body .fl-builder-content .fl-button-secondary {
    background-color: transparent;
    color: var(--hmh-primary);
    border: 2px solid var(--hmh-primary);
}

body button.button-secondary:hover,
body a.button-secondary:hover,
body .button.alt-outline:hover,
body .fl-builder-content .fl-button-secondary:hover {
    background-color: var(--hmh-primary);
    color: var(--hmh-white);
    border-color: var(--hmh-primary);
}

/* 3.3 WooCommerce Buttons (Add to Cart, Checkout)
   Problem: WooCommerce buttons override theme styles inconsistently
   -------------------------------------------------------------------------- */
body.woocommerce button.button,
body.woocommerce a.button,
body.woocommerce input.button,
body.woocommerce #respond input#submit,
body .woocommerce button.button,
body .woocommerce a.button,
body .woocommerce input.button,
body .woocommerce #respond input#submit {
    background-color: var(--hmh-primary);
    color: var(--hmh-white);
    border: 2px solid var(--hmh-primary);
    border-radius: var(--hmh-radius-sm);
    font-weight: 600;
}

body.woocommerce button.button:hover,
body.woocommerce a.button:hover,
body.woocommerce input.button:hover,
body.woocommerce #respond input#submit:hover,
body .woocommerce button.button:hover,
body .woocommerce a.button:hover,
body .woocommerce input.button:hover,
body .woocommerce #respond input#submit:hover {
    background-color: var(--hmh-primary-hover);
    border-color: var(--hmh-primary-hover);
    color: var(--hmh-white);
}

/* Add to Cart button - product grid */
body .woocommerce ul.products li.product a.button.add_to_cart_button,
body .woocommerce ul.products li.product a.button.product_type_simple {
    background-color: var(--hmh-primary);
    color: var(--hmh-white);
    border: 2px solid var(--hmh-primary);
    padding: 10px 20px;
    font-size: 14px;
}

body .woocommerce ul.products li.product a.button.add_to_cart_button:hover,
body .woocommerce ul.products li.product a.button.product_type_simple:hover {
    background-color: var(--hmh-primary-hover);
    border-color: var(--hmh-primary-hover);
}

/* Single product Add to Cart */
body .woocommerce div.product form.cart button.single_add_to_cart_button {
    background-color: var(--hmh-primary);
    color: var(--hmh-white);
    border: 2px solid var(--hmh-primary);
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 700;
}

body .woocommerce div.product form.cart button.single_add_to_cart_button:hover {
    background-color: var(--hmh-primary-hover);
    border-color: var(--hmh-primary-hover);
}

/* Alt button style (checkout, view cart) */
body.woocommerce button.button.alt,
body.woocommerce a.button.alt,
body.woocommerce input.button.alt,
body .woocommerce button.button.alt,
body .woocommerce a.button.alt,
body .woocommerce input.button.alt {
    background-color: var(--hmh-primary);
    border-color: var(--hmh-primary);
    color: var(--hmh-white);
}

body.woocommerce button.button.alt:hover,
body.woocommerce a.button.alt:hover,
body.woocommerce input.button.alt:hover,
body .woocommerce button.button.alt:hover,
body .woocommerce a.button.alt:hover,
body .woocommerce input.button.alt:hover {
    background-color: var(--hmh-primary-hover);
    border-color: var(--hmh-primary-hover);
}

/* Disabled button state */
body .woocommerce button.button:disabled,
body .woocommerce button.button.disabled,
body .woocommerce a.button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   4. FORMS
   ========================================================================== */

/* 4.1 Input Fields
   Problem: Inconsistent input styling across BB and WooCommerce
   -------------------------------------------------------------------------- */
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="search"],
body input[type="tel"],
body input[type="url"],
body input[type="number"],
body input[type="date"],
body textarea,
body .fl-builder-content input[type="text"],
body .fl-builder-content input[type="email"],
body .fl-builder-content textarea {
    background-color: var(--hmh-surface);
    border: 1px solid var(--hmh-border);
    border-radius: var(--hmh-radius-sm);
    padding: 10px 14px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--hmh-text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body input[type="text"]:hover,
body input[type="email"]:hover,
body input[type="password"]:hover,
body input[type="search"]:hover,
body input[type="tel"]:hover,
body input[type="url"]:hover,
body input[type="number"]:hover,
body input[type="date"]:hover,
body textarea:hover {
    border-color: var(--hmh-green-light);
}

body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="password"]:focus,
body input[type="search"]:focus,
body input[type="tel"]:focus,
body input[type="url"]:focus,
body input[type="number"]:focus,
body input[type="date"]:focus,
body textarea:focus,
body .fl-builder-content input:focus,
body .fl-builder-content textarea:focus {
    outline: none;
    border-color: var(--hmh-accent);
    box-shadow: 0 0 0 3px rgba(242, 135, 5, 0.2);
}

/* Placeholder text */
body input::placeholder,
body textarea::placeholder {
    color: var(--hmh-muted);
    opacity: 1;
}

/* 4.2 Select Dropdowns
   Problem: Selects don't match input styling
   -------------------------------------------------------------------------- */
body select,
body .fl-builder-content select {
    background-color: var(--hmh-surface);
    border: 1px solid var(--hmh-border);
    border-radius: var(--hmh-radius-sm);
    padding: 10px 40px 10px 14px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--hmh-text);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body select:hover {
    border-color: var(--hmh-green-light);
}

body select:focus {
    outline: none;
    border-color: var(--hmh-accent);
    box-shadow: 0 0 0 3px rgba(242, 135, 5, 0.2);
}

/* 4.3 Checkboxes & Radios
   -------------------------------------------------------------------------- */
body input[type="checkbox"],
body input[type="radio"] {
    accent-color: var(--hmh-primary);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

body input[type="checkbox"]:focus,
body input[type="radio"]:focus {
    outline: 2px solid var(--hmh-accent);
    outline-offset: 2px;
}

/* 4.4 Form Validation States
   -------------------------------------------------------------------------- */
body input.woocommerce-invalid,
body input.invalid,
body input:invalid:not(:placeholder-shown),
body .woocommerce form .form-row.woocommerce-invalid input {
    border-color: var(--hmh-error);
}

body input.woocommerce-invalid:focus,
body input.invalid:focus {
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.2);
}

body .woocommerce form .form-row.woocommerce-validated input {
    border-color: var(--hmh-success);
}

/* ==========================================================================
   5. NAVIGATION
   ========================================================================== */

/* 5.1 Header Nav
   Problem: Header background/border inconsistent; nav links lack clear
   hover/active states; dropdown menus have no visual containment.
   -------------------------------------------------------------------------- */

/* --- Header wrapper --- */
body .fl-page-header,
body .fl-page-header-wrap,
body header.site-header {
    background-color: var(--hmh-surface);
    border-bottom: 1px solid var(--hmh-border-gray);
}

/* --- Primary nav links --- */
body .fl-page-nav .navbar-nav > li > a,
body .fl-page-nav .navbar-nav > li > .fl-has-submenu-container > a,
body nav.primary-navigation a,
body .main-navigation a {
    color: var(--hmh-charcoal);
    font-weight: 600;
    font-size: 15px;
    padding: var(--hmh-space-sm) var(--hmh-space-md);
    text-decoration: none;
    transition: color 0.2s ease;
}

body .fl-page-nav .navbar-nav > li > a:hover,
body .fl-page-nav .navbar-nav > li > a:focus,
body .fl-page-nav .navbar-nav > li > .fl-has-submenu-container > a:hover,
body .fl-page-nav .navbar-nav > li > .fl-has-submenu-container > a:focus,
body nav.primary-navigation a:hover,
body nav.primary-navigation a:focus,
body .main-navigation a:hover,
body .main-navigation a:focus {
    color: var(--hmh-green-dark);
}

/* Active / current page */
body .fl-page-nav .navbar-nav > li.current-menu-item > a,
body .fl-page-nav .navbar-nav > li.current-menu-ancestor > a,
body nav.primary-navigation li.current-menu-item > a,
body .main-navigation li.current-menu-item > a {
    color: var(--hmh-green-dark);
    border-bottom: 2px solid var(--hmh-green-dark);
}

/* --- Dropdown / submenu --- */
body .fl-page-nav .navbar-nav .sub-menu,
body .fl-page-nav .navbar-nav .fl-sub-menu,
body nav.primary-navigation ul.sub-menu,
body .main-navigation ul.sub-menu {
    background-color: var(--hmh-surface);
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius);
    box-shadow: var(--hmh-shadow-md);
    padding: var(--hmh-space-xs) 0;
}

body .fl-page-nav .navbar-nav .sub-menu li a,
body .fl-page-nav .navbar-nav .fl-sub-menu li a,
body nav.primary-navigation .sub-menu li a,
body .main-navigation .sub-menu li a {
    color: var(--hmh-charcoal);
    padding: var(--hmh-space-xs) var(--hmh-space-md);
    font-weight: 400;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body .fl-page-nav .navbar-nav .sub-menu li a:hover,
body .fl-page-nav .navbar-nav .sub-menu li a:focus,
body .fl-page-nav .navbar-nav .fl-sub-menu li a:hover,
body .fl-page-nav .navbar-nav .fl-sub-menu li a:focus,
body nav.primary-navigation .sub-menu li a:hover,
body .main-navigation .sub-menu li a:hover {
    background-color: var(--hmh-surface-alt);
    color: var(--hmh-green-dark);
}

/* --- Header utility links (cart, account, search) --- */
body .fl-page-header .fl-page-header-icons a,
body .fl-page-header .fl-menu-cart-toggle,
body .fl-page-header .fl-page-header-icon,
body header.site-header .cart-contents,
body header.site-header .site-header-cart a,
body header.site-header .site-search-toggle {
    color: var(--hmh-charcoal);
    transition: color 0.2s ease;
}

body .fl-page-header .fl-page-header-icons a:hover,
body .fl-page-header .fl-menu-cart-toggle:hover,
body .fl-page-header .fl-page-header-icon:hover,
body header.site-header .cart-contents:hover,
body header.site-header .site-header-cart a:hover,
body header.site-header .site-search-toggle:hover {
    color: var(--hmh-green-dark);
}

/* 5.2 Mobile Menu
   Problem: Mobile nav often inherits desktop colors, poor touch targets,
   insufficient contrast on small screens.
   -------------------------------------------------------------------------- */
body .fl-page-nav-collapse,
body .fl-responsive-nav-layout,
body .fl-page-nav-toggle-visible .fl-page-nav-collapse {
    background-color: var(--hmh-surface);
    border-top: 1px solid var(--hmh-border-gray);
}

body .fl-page-nav-collapse .navbar-nav > li > a,
body .fl-page-nav-collapse .navbar-nav > li > .fl-has-submenu-container > a {
    color: var(--hmh-charcoal);
    padding: var(--hmh-space-sm) var(--hmh-space-md);
    border-bottom: 1px solid var(--hmh-border-gray);
    font-size: 16px;
}

body .fl-page-nav-collapse .navbar-nav > li > a:hover,
body .fl-page-nav-collapse .navbar-nav > li > a:focus,
body .fl-page-nav-collapse .navbar-nav > li > .fl-has-submenu-container > a:hover {
    background-color: var(--hmh-surface-alt);
    color: var(--hmh-green-dark);
}

/* Mobile submenu indentation */
body .fl-page-nav-collapse .navbar-nav .sub-menu {
    background-color: var(--hmh-surface-alt);
    box-shadow: none;
    border: none;
    padding-left: var(--hmh-space-md);
}

body .fl-page-nav-collapse .navbar-nav .sub-menu li a {
    padding: var(--hmh-space-xs) var(--hmh-space-md);
    font-size: 14px;
    color: var(--hmh-muted);
}

body .fl-page-nav-collapse .navbar-nav .sub-menu li a:hover,
body .fl-page-nav-collapse .navbar-nav .sub-menu li a:focus {
    color: var(--hmh-green-dark);
}

/* Hamburger toggle icon */
body .fl-page-nav-toggle,
body .navbar-toggle {
    color: var(--hmh-charcoal);
}

/* 5.3 Footer Nav
   Problem: Footer links often unstyled or inherit body defaults.
   -------------------------------------------------------------------------- */
body .fl-page-footer-wrap,
body footer.site-footer {
    background-color: var(--hmh-charcoal);
    color: var(--hmh-surface-alt);
    border-top: 1px solid var(--hmh-border-gray);
}

body .fl-page-footer-wrap a,
body footer.site-footer a {
    color: var(--hmh-surface-alt);
    transition: color 0.2s ease;
}

body .fl-page-footer-wrap a:hover,
body .fl-page-footer-wrap a:focus,
body footer.site-footer a:hover,
body footer.site-footer a:focus {
    color: var(--hmh-amber);
}

body .fl-page-footer-wrap .fl-page-footer-text,
body footer.site-footer .site-info {
    color: var(--hmh-muted);
    font-size: 14px;
}

/* 5.4 Breadcrumbs
   Problem: Breadcrumbs lack spacing, separator visibility, and link contrast.
   -------------------------------------------------------------------------- */
body .woocommerce-breadcrumb,
body .fl-builder-content .woocommerce-breadcrumb,
body .breadcrumbs,
body nav.woocommerce-breadcrumb {
    font-size: 14px;
    color: var(--hmh-muted);
    padding: var(--hmh-space-sm) 0;
    margin-bottom: var(--hmh-space-md);
}

body .woocommerce-breadcrumb a,
body .breadcrumbs a,
body nav.woocommerce-breadcrumb a {
    color: var(--hmh-green-dark);
    text-decoration: none;
}

body .woocommerce-breadcrumb a:hover,
body .breadcrumbs a:hover,
body nav.woocommerce-breadcrumb a:hover {
    color: var(--hmh-green-mid);
    text-decoration: underline;
}

/* ==========================================================================
   6. CARDS & CONTAINERS
   ========================================================================== */

/* 6.1 Generic Cards
   Problem: BB content blocks lack visual containment
   -------------------------------------------------------------------------- */
body .fl-builder-content .fl-module-content {
    padding: var(--hmh-space-md);
}

/* Card-like surfaces (account, checkout panels, widgets) */
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
    background-color: var(--hmh-surface);
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius);
    padding: var(--hmh-space-md) var(--hmh-space-lg);
    margin-bottom: var(--hmh-space-md);
}

body .woocommerce-message {
    border-left: 4px solid var(--hmh-success);
}

body .woocommerce-info {
    border-left: 4px solid var(--hmh-green-dark);
}

body .woocommerce-error {
    border-left: 4px solid var(--hmh-error);
}

/* 6.2 Product Cards
   Problem: Inconsistent padding, no clear visual containment, cluttered appearance
   -------------------------------------------------------------------------- */
body .woocommerce ul.products li.product,
body.woocommerce ul.products li.product {
    background-color: var(--hmh-surface);
    border: 1px solid var(--hmh-border-gray);
    border-radius: 8px;
    padding: 20px 16px 16px;
    margin-bottom: 0;
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    position: relative;
}

body .woocommerce ul.products li.product:hover,
body.woocommerce ul.products li.product:hover {
    border-color: var(--hmh-green-light);
    box-shadow: 0 8px 24px rgba(41, 89, 7, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}

/* Remove default WooCommerce border/shadow conflicts */
body .woocommerce ul.products li.product .woocommerce-loop-product__link {
    text-decoration: none;
    display: block;
}

/* 6.3 Content Boxes
   -------------------------------------------------------------------------- */

/* ==========================================================================
   6.5 ANNOUNCEMENT / TOP BAR
   Problem: Top bar (fuel surcharge notice) uses inline dark-red background
   with no spacing or typography control.
   ========================================================================== */
body .fl-page-bar,
body .fl-page-bar-wrap,
body .fl-page-header-fixed .fl-page-bar,
body .site-header .top-bar,
body [class*="topbar"],
body [class*="announcement"] {
    background-color: var(--hmh-charcoal);
    color: var(--hmh-surface-alt);
    font-size: 13px;
    line-height: 1.4;
    padding: var(--hmh-space-xs) var(--hmh-space-md);
    text-align: center;
    border-bottom: 1px solid var(--hmh-border-gray);
}

body .fl-page-bar a,
body .fl-page-bar-wrap a,
body .site-header .top-bar a,
body [class*="topbar"] a,
body [class*="announcement"] a {
    color: var(--hmh-amber);
    text-decoration: underline;
}

body .fl-page-bar a:hover,
body .site-header .top-bar a:hover {
    color: var(--hmh-white);
}

/* ==========================================================================
   7. WOOCOMMERCE - PRODUCT GRID
   Crafted grid: clean containment, generous whitespace, subtle depth.
   All dimensions in px to avoid BB's html { font-size: 10px } rem issue.
   ========================================================================== */

/* 7.1 Grid Layout — CSS Grid with clearfix/float nuclear reset
   -------------------------------------------------------------------------- */
body .woocommerce ul.products,
body.woocommerce ul.products,
body .woocommerce-page ul.products,
body .woocommerce[class*="columns-"] ul.products,
body.woocommerce[class*="columns-"] ul.products {
    display: grid !important; /* !important: WooCommerce/BB apply display:flex or float contexts */
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 0;
    margin: 0 auto;
    list-style: none;
    width: 100%;
    max-width: 1200px;
}

/* Kill WooCommerce clearfix pseudo-elements that interfere with grid */
body .woocommerce ul.products::before,
body .woocommerce ul.products::after,
body.woocommerce ul.products::before,
body.woocommerce ul.products::after {
    display: none !important; /* !important: WooCommerce sets display:table on clearfix pseudos */
    content: none !important; /* !important: prevents content:" " from creating phantom grid items */
}

/* Reset float-based layout remnants on all list items */
body .woocommerce ul.products li.product,
body.woocommerce ul.products li.product,
body .woocommerce ul.products li.product-category,
body.woocommerce ul.products li.product-category,
body .woocommerce[class*="columns-"] ul.products li.product,
body.woocommerce[class*="columns-"] ul.products li.product,
body .woocommerce[class*="columns-"] ul.products li.product-category,
body.woocommerce[class*="columns-"] ul.products li.product-category {
    float: none !important; /* !important: overrides WooCommerce float:left */
    width: auto !important; /* !important: overrides WooCommerce percentage widths */
    margin: 0 !important; /* !important: overrides WooCommerce column margins */
    max-width: none;
    min-width: 0; /* prevent CSS Grid blowout from content overflow */
    clear: none;
}

/* Product cards: flex column for proper child stacking + bottom-pinned buttons */
body .woocommerce ul.products li.product,
body.woocommerce ul.products li.product {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* -------------------------------------------------------------------------
   7.1b Category Cards — the /shop/ page grid
   Designed: generous padding, centered layout, soft elevation on hover,
   icon + label + count as a clean vertical stack.
   ------------------------------------------------------------------------- */
body .woocommerce ul.products li.product-category,
body.woocommerce ul.products li.product-category {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--hmh-surface);
    border: 1px solid var(--hmh-border-gray);
    border-radius: 10px;
    padding: 28px 16px 24px;
    text-align: center;
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

body .woocommerce ul.products li.product-category:hover {
    border-color: var(--hmh-green-light);
    box-shadow: 0 8px 24px rgba(41, 89, 7, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04);
    transform: translateY(-3px);
}

/* Category link — fills the card, stacks children */
body .woocommerce ul.products li.product-category > a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    color: inherit;
}

/* Category icon */
body .woocommerce ul.products li.product-category a img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin: 0 auto;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

body .woocommerce ul.products li.product-category:hover a img {
    transform: scale(1.06);
}

/* Category title */
body .woocommerce ul.products li.product-category a h2,
body .woocommerce ul.products li.product-category a .woocommerce-loop-category__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--hmh-charcoal);
    line-height: 1.35;
    margin: 4px 0 0 0;
    padding: 0;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: 100%;
}

/* Category count badge — styled as a subtle pill */
body .woocommerce ul.products li.product-category a .count,
body .woocommerce ul.products li.product-category .count,
body .woocommerce ul.products li.product-category a h2 mark.count,
body .woocommerce ul.products li.product-category a .woocommerce-loop-category__title mark.count {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--hmh-muted);
    background-color: var(--hmh-surface-alt);
    border: 1px solid var(--hmh-border-gray);
    border-radius: 12px;
    padding: 2px 8px;
    margin-top: 6px;
    line-height: 1.4;
}

/* Prevent orphan items from stretching */
body .woocommerce ul.products li.product:last-child {
    margin-bottom: 0;
}

/* 7.2 Product Images
   -------------------------------------------------------------------------- */
body .woocommerce ul.products li.product a img,
body.woocommerce ul.products li.product a img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background-color: var(--hmh-surface-alt);
    border-radius: 6px;
    margin-bottom: 12px;
    transition: opacity 0.25s ease, transform 0.25s ease;
    /* Prevent broken/missing images from collapsing or stretching the card */
    min-height: 120px;
    max-height: 300px;
}

body .woocommerce ul.products li.product:hover a img {
    opacity: 0.94;
    transform: scale(1.02);
}

/* 7.3 Product Titles
   -------------------------------------------------------------------------- */
body .woocommerce ul.products li.product .woocommerce-loop-product__title,
body.woocommerce ul.products li.product .woocommerce-loop-product__title,
body .woocommerce ul.products li.product h2:not(.woocommerce-loop-category__title) {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--hmh-charcoal);
    margin: 0 0 6px 0;
    padding: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
    /* Prevent title from being crushed to zero width by grid/flex overflow */
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

body .woocommerce ul.products li.product a:hover .woocommerce-loop-product__title,
body .woocommerce ul.products li.product a:hover h2:not(.woocommerce-loop-category__title) {
    color: var(--hmh-green-dark);
}

/* 7.4 Prices & Sale Badges
   -------------------------------------------------------------------------- */
body .woocommerce ul.products li.product .price,
body.woocommerce ul.products li.product .price {
    font-size: 16px;
    font-weight: 700;
    color: var(--hmh-green-dark);
    margin: 4px 0 12px 0;
    display: block;
    letter-spacing: -0.01em;
    /* Prevent price from wrapping mid-value ($29 and .00 on separate lines) */
    white-space: nowrap;
    overflow: visible;
}

body .woocommerce ul.products li.product .price .woocommerce-Price-amount {
    color: var(--hmh-green-dark);
    display: inline;
    white-space: nowrap;
}

body .woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol {
    display: inline;
}

body .woocommerce ul.products li.product .price del,
body.woocommerce ul.products li.product .price del {
    color: var(--hmh-muted);
    font-size: 13px;
    font-weight: 400;
    margin-right: 6px;
    opacity: 0.7;
}

body .woocommerce ul.products li.product .price ins,
body.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    font-weight: 700;
    color: var(--hmh-green-dark);
}

/* Sale badge — amber ribbon */
body .woocommerce ul.products li.product .onsale,
body.woocommerce ul.products li.product .onsale,
body .woocommerce span.onsale {
    background-color: var(--hmh-accent);
    color: var(--hmh-white);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 0 4px 4px 0;
    position: absolute;
    top: 12px;
    left: 0;
    z-index: 10;
    line-height: 1.3;
    min-width: auto;
    min-height: auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

/* Out of stock badge */
body .woocommerce ul.products li.product .outofstock-badge,
body .woocommerce ul.products li.product .soldout,
body .woocommerce .outofstock .stock {
    background-color: var(--hmh-muted);
    color: var(--hmh-white);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 4px;
}

/* 7.5 Star Ratings
   -------------------------------------------------------------------------- */
body .woocommerce ul.products li.product .star-rating,
body.woocommerce ul.products li.product .star-rating {
    font-size: 13px;
    color: var(--hmh-accent);
    margin: 2px 0 4px 0;
    display: block;
}

body .woocommerce ul.products li.product .star-rating::before {
    color: var(--hmh-border-gray);
}

body .woocommerce ul.products li.product .star-rating span::before {
    color: var(--hmh-accent);
}

body .woocommerce ul.products li.product .star-rating + .count,
body .woocommerce ul.products li.product .woocommerce-review-link {
    font-size: 11px;
    color: var(--hmh-muted);
}

/* 7.6 Product Meta — reduce clutter
   -------------------------------------------------------------------------- */
body .woocommerce ul.products li.product .product-category,
body .woocommerce ul.products li.product .posted_in {
    font-size: 11px;
    color: var(--hmh-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

body .woocommerce ul.products li.product .product_meta,
body .woocommerce ul.products li.product .sku_wrapper {
    display: none;
}

/* 7.7 Add to Cart / Action Buttons
   <a> elements must be display:block to honor width:100%.
   margin-top:auto pins to card bottom (parent is flex column).
   -------------------------------------------------------------------------- */
body .woocommerce ul.products li.product .button,
body.woocommerce ul.products li.product .button,
body .woocommerce ul.products li.product a.button,
body.woocommerce ul.products li.product a.button,
body .woocommerce ul.products li.product a.add_to_cart_button,
body .woocommerce ul.products li.product a.product_type_simple,
body .woocommerce ul.products li.product a.product_type_variable,
body .woocommerce ul.products li.product a.product_type_grouped,
body .woocommerce ul.products li.product a.product_type_external {
    display: block;
    width: 100%;
    margin-top: auto;
    padding: 10px 14px;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    border-radius: 6px;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

body .woocommerce ul.products li.product .button:active,
body .woocommerce ul.products li.product a.button:active {
    transform: scale(0.97);
}

/* Quick View buttons (YITH, WooCommerce Quick View, etc.)
   -------------------------------------------------------------------------- */
body .woocommerce ul.products li.product .yith-wcqv-button,
body .woocommerce ul.products li.product .quick-view-button,
body .woocommerce ul.products li.product .product-quick-view,
body .woocommerce ul.products li.product [class*="quick-view"],
body .woocommerce ul.products li.product [class*="quickview"] {
    display: block;
    width: 100%;
    padding: 8px 14px;
    margin-top: 6px;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--hmh-charcoal);
    background-color: transparent;
    border: 1px solid var(--hmh-border-gray);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body .woocommerce ul.products li.product .yith-wcqv-button:hover,
body .woocommerce ul.products li.product .quick-view-button:hover,
body .woocommerce ul.products li.product [class*="quick-view"]:hover,
body .woocommerce ul.products li.product [class*="quickview"]:hover {
    background-color: var(--hmh-surface-alt);
    border-color: var(--hmh-green-light);
    color: var(--hmh-green-dark);
}

/* AJAX add-to-cart loading spinner */
body .woocommerce ul.products li.product .button.loading::after {
    border-color: var(--hmh-white) transparent transparent transparent;
}

/* "View cart" link after add */
body .woocommerce ul.products li.product .added_to_cart {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--hmh-green-dark);
    text-align: center;
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.2s ease;
}

body .woocommerce ul.products li.product .added_to_cart:hover {
    color: var(--hmh-green-mid);
    text-decoration: underline;
}

/* ==========================================================================
   8. WOOCOMMERCE - SINGLE PRODUCT
   ========================================================================== */

/* 8.1 Gallery
   Problem: Gallery images may lack consistent sizing
   -------------------------------------------------------------------------- */
body .woocommerce div.product div.images img,
body.woocommerce div.product div.images img {
    border-radius: var(--hmh-radius);
    background-color: var(--hmh-surface);
}

body .woocommerce div.product div.images .flex-control-thumbs li img {
    border: 2px solid transparent;
    border-radius: var(--hmh-radius-sm);
    transition: border-color 0.2s ease;
}

body .woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
body .woocommerce div.product div.images .flex-control-thumbs li img:hover {
    border-color: var(--hmh-green-dark);
}

/* 8.2 Product Summary
   Problem: Summary area spacing and hierarchy
   -------------------------------------------------------------------------- */
body .woocommerce div.product .product_title {
    font-size: 28px;
    font-weight: 700;
    color: var(--hmh-charcoal);
    margin-bottom: var(--hmh-space-sm);
}

body .woocommerce div.product p.price,
body.woocommerce div.product p.price {
    font-size: 24px;
    font-weight: 700;
    color: var(--hmh-green-dark);
    margin-bottom: var(--hmh-space-md);
}

body .woocommerce div.product p.price del {
    color: var(--hmh-muted);
    font-size: 18px;
    font-weight: 400;
}

body .woocommerce div.product p.price ins {
    text-decoration: none;
}

body .woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--hmh-muted);
    margin-bottom: var(--hmh-space-md);
    line-height: 1.6;
}

body .woocommerce div.product .product_meta {
    font-size: 14px;
    color: var(--hmh-muted);
    padding-top: var(--hmh-space-md);
    border-top: 1px solid var(--hmh-border-gray);
    margin-top: var(--hmh-space-md);
}

body .woocommerce div.product .product_meta a {
    color: var(--hmh-green-dark);
}

/* 8.3 Variations
   Problem: Variation selects and labels need consistent styling
   -------------------------------------------------------------------------- */
body .woocommerce div.product .variations td,
body .woocommerce div.product .variations th {
    padding: var(--hmh-space-xs) var(--hmh-space-sm) var(--hmh-space-xs) 0;
    vertical-align: middle;
}

body .woocommerce div.product .variations select {
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius-sm);
    padding: 8px 12px;
    background-color: var(--hmh-surface);
}

body .woocommerce div.product .variations .reset_variations {
    color: var(--hmh-muted);
    font-size: 14px;
}

/* 8.4 Quantity Selector
   Problem: Quantity inputs look different from other inputs, +/- buttons inconsistent
   -------------------------------------------------------------------------- */
body .woocommerce .quantity,
body .woocommerce-page .quantity {
    display: inline-flex;
    align-items: stretch;
}

body .woocommerce .quantity input.qty,
body .woocommerce-page .quantity input.qty {
    background-color: var(--hmh-surface);
    border: 1px solid var(--hmh-border);
    border-radius: var(--hmh-radius-sm);
    padding: 8px;
    width: 56px;
    text-align: center;
    font-size: 16px;
    color: var(--hmh-text);
    -moz-appearance: textfield;
}

body .woocommerce .quantity input.qty::-webkit-inner-spin-button,
body .woocommerce .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body .woocommerce .quantity input.qty:focus {
    outline: none;
    border-color: var(--hmh-accent);
    box-shadow: 0 0 0 3px rgba(242, 135, 5, 0.2);
}

/* Quantity +/- buttons (if theme/plugin adds them) */
body .woocommerce .quantity .qty-btn,
body .woocommerce .quantity .plus,
body .woocommerce .quantity .minus {
    background-color: var(--hmh-surface);
    border: 1px solid var(--hmh-border);
    color: var(--hmh-text);
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

body .woocommerce .quantity .minus {
    border-radius: var(--hmh-radius-sm) 0 0 var(--hmh-radius-sm);
    border-right: none;
}

body .woocommerce .quantity .plus {
    border-radius: 0 var(--hmh-radius-sm) var(--hmh-radius-sm) 0;
    border-left: none;
}

body .woocommerce .quantity .qty-btn:hover,
body .woocommerce .quantity .plus:hover,
body .woocommerce .quantity .minus:hover {
    background-color: var(--hmh-green-light);
    border-color: var(--hmh-green-light);
}

/* 8.5 Tabs (Description, Reviews)
   Problem: Tabs lack visual separation and active state
   -------------------------------------------------------------------------- */
body .woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0;
    margin: 0 0 var(--hmh-space-md) 0;
    list-style: none;
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--hmh-border-gray);
}

body .woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
}

body .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: var(--hmh-space-sm) var(--hmh-space-md);
    color: var(--hmh-muted);
    font-weight: 600;
    text-decoration: none;
    display: block;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

body .woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
body .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--hmh-green-dark);
    border-bottom-color: var(--hmh-green-dark);
}

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

/* ==========================================================================
   9. WOOCOMMERCE - CART
   ========================================================================== */

/* 9.1 Cart Table
   -------------------------------------------------------------------------- */
body .woocommerce-cart table.shop_table,
body .woocommerce table.shop_table {
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    width: 100%;
    font-size: 15px;
    line-height: 1.5;
}

body .woocommerce-cart table.shop_table th,
body .woocommerce table.shop_table th {
    background-color: var(--hmh-surface-alt);
    color: var(--hmh-charcoal);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: var(--hmh-space-sm) var(--hmh-space-md);
    border-bottom: 2px solid var(--hmh-border-gray);
    text-align: left;
}

body .woocommerce-cart table.shop_table td,
body .woocommerce table.shop_table td {
    padding: var(--hmh-space-md);
    border-bottom: 1px solid var(--hmh-border-gray);
    vertical-align: middle;
    color: var(--hmh-charcoal);
}

body .woocommerce-cart table.shop_table tr:last-child td,
body .woocommerce table.shop_table tr:last-child td {
    border-bottom: none;
}

body .woocommerce table.shop_table .product-thumbnail img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: var(--hmh-radius-sm);
    border: 1px solid var(--hmh-border-gray);
}

body .woocommerce table.shop_table .product-name a {
    color: var(--hmh-charcoal);
    font-weight: 600;
    text-decoration: none;
}

body .woocommerce table.shop_table .product-name a:hover {
    color: var(--hmh-green-dark);
    text-decoration: underline;
}

body .woocommerce table.shop_table .product-price,
body .woocommerce table.shop_table .product-subtotal {
    font-weight: 600;
    color: var(--hmh-charcoal);
}

body .woocommerce table.shop_table .product-quantity .qty {
    width: 60px;
    text-align: center;
    padding: var(--hmh-space-xs) var(--hmh-space-sm);
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius-sm);
    font-size: 15px;
}

body .woocommerce table.shop_table .product-remove a {
    color: var(--hmh-muted);
    font-size: 20px;
    text-decoration: none;
}

body .woocommerce table.shop_table .product-remove a:hover {
    color: var(--hmh-error);
}

/* Cart actions row (update cart button) */
body .woocommerce-cart table.shop_table td.actions {
    padding: var(--hmh-space-md);
    background-color: var(--hmh-surface-alt);
    border-bottom: none;
}

body .woocommerce-cart table.shop_table td.actions .button {
    background-color: var(--hmh-green-dark);
    color: var(--hmh-white);
    border: none;
    border-radius: var(--hmh-radius);
    padding: var(--hmh-space-sm) var(--hmh-space-lg);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

body .woocommerce-cart table.shop_table td.actions .button:hover {
    background-color: var(--hmh-green-mid);
}

/* 9.2 Cart Totals
   -------------------------------------------------------------------------- */
body .woocommerce .cart_totals,
body .woocommerce-cart .cart_totals {
    background-color: var(--hmh-surface);
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius);
    padding: var(--hmh-space-lg);
    box-shadow: var(--hmh-shadow-sm);
}

body .woocommerce .cart_totals h2,
body .woocommerce-cart .cart_totals h2 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: var(--hmh-space-md);
    padding-bottom: var(--hmh-space-sm);
    border-bottom: 2px solid var(--hmh-border-gray);
    color: var(--hmh-charcoal);
}

body .woocommerce .cart_totals table.shop_table {
    border: none;
    box-shadow: none;
}

body .woocommerce .cart_totals table.shop_table th {
    background-color: transparent;
    text-transform: none;
    letter-spacing: normal;
    font-size: 15px;
    color: var(--hmh-muted);
    padding: var(--hmh-space-sm) var(--hmh-space-sm) var(--hmh-space-sm) 0;
    border-bottom: 1px solid var(--hmh-border-gray);
}

body .woocommerce .cart_totals table.shop_table td {
    padding: var(--hmh-space-sm);
    text-align: right;
    border-bottom: 1px solid var(--hmh-border-gray);
}

body .woocommerce .cart_totals .order-total th {
    color: var(--hmh-charcoal);
    font-weight: 700;
    font-size: 16px;
}

body .woocommerce .cart_totals .order-total .woocommerce-Price-amount {
    color: var(--hmh-green-dark);
    font-weight: 700;
    font-size: 21px;
}

/* Cart totals proceed-to-checkout CTA */
body .woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button,
body .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--hmh-green-dark);
    color: var(--hmh-white);
    border: none;
    border-radius: var(--hmh-radius);
    padding: 14px 24px;
    font-size: 17px;
    font-weight: 700;
    margin-top: var(--hmh-space-md);
    transition: background-color 0.2s ease;
    text-decoration: none;
}

body .woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button:hover,
body .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: var(--hmh-green-mid);
}

/* 9.3 Coupon Form
   -------------------------------------------------------------------------- */
body .woocommerce .coupon,
body .woocommerce-cart .coupon,
body .checkout_coupon {
    display: flex;
    gap: var(--hmh-space-sm);
    align-items: center;
    flex-wrap: wrap;
}

body .woocommerce .coupon input.input-text,
body .checkout_coupon input.input-text {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
    padding: var(--hmh-space-sm) var(--hmh-space-md);
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius-sm);
    font-size: 15px;
    color: var(--hmh-charcoal);
    background-color: var(--hmh-surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body .woocommerce .coupon input.input-text:focus,
body .checkout_coupon input.input-text:focus {
    border-color: var(--hmh-green-dark);
    box-shadow: 0 0 0 2px rgba(41, 89, 7, 0.15);
    outline: none;
}

body .woocommerce .coupon .button,
body .checkout_coupon .button {
    background-color: var(--hmh-surface-alt);
    color: var(--hmh-charcoal);
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius-sm);
    padding: var(--hmh-space-sm) var(--hmh-space-md);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

body .woocommerce .coupon .button:hover,
body .checkout_coupon .button:hover {
    background-color: var(--hmh-border-gray);
    border-color: var(--hmh-muted);
}

/* ==========================================================================
   10. WOOCOMMERCE - CHECKOUT
   ========================================================================== */

/* 10.1 Billing/Shipping Forms
   -------------------------------------------------------------------------- */
body .woocommerce-checkout .woocommerce-billing-fields,
body .woocommerce-checkout .woocommerce-shipping-fields {
    background-color: var(--hmh-surface);
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius);
    padding: var(--hmh-space-lg);
    margin-bottom: var(--hmh-space-lg);
}

body .woocommerce-checkout h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--hmh-charcoal);
    margin-bottom: var(--hmh-space-md);
}

/* 10.1b Checkout field normalization — consistent with tokenized inputs
   -------------------------------------------------------------------------- */
body .woocommerce-checkout form.checkout .form-row input.input-text,
body .woocommerce-checkout form.checkout .form-row textarea,
body .woocommerce-checkout form.checkout .form-row select {
    width: 100%;
    padding: var(--hmh-space-sm) var(--hmh-space-md);
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius-sm);
    background-color: var(--hmh-surface);
    color: var(--hmh-charcoal);
    font-size: 15px;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body .woocommerce-checkout form.checkout .form-row input.input-text:focus,
body .woocommerce-checkout form.checkout .form-row textarea:focus,
body .woocommerce-checkout form.checkout .form-row select:focus {
    border-color: var(--hmh-green-dark);
    box-shadow: 0 0 0 2px rgba(41, 89, 7, 0.15);
    outline: none;
}

body .woocommerce-checkout form.checkout .form-row label {
    font-size: 14px;
    font-weight: 600;
    color: var(--hmh-charcoal);
    margin-bottom: var(--hmh-space-xs);
    display: block;
}

body .woocommerce-checkout form.checkout .form-row {
    margin-bottom: var(--hmh-space-md);
}

/* 10.2 Order Review
   -------------------------------------------------------------------------- */
body .woocommerce-checkout #order_review,
body .woocommerce-checkout-review-order {
    background-color: var(--hmh-surface);
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius);
    padding: var(--hmh-space-lg);
    margin-bottom: var(--hmh-space-lg);
}

body .woocommerce-checkout #order_review_heading {
    font-size: 20px;
    font-weight: 700;
    color: var(--hmh-charcoal);
    margin-bottom: var(--hmh-space-md);
    padding-bottom: var(--hmh-space-sm);
    border-bottom: 2px solid var(--hmh-border-gray);
}

/* Order review table — lighter than cart table */
body .woocommerce-checkout #order_review table.shop_table {
    border: none;
    box-shadow: none;
    font-size: 14px;
}

body .woocommerce-checkout #order_review table.shop_table th {
    background-color: transparent;
    font-size: 13px;
    color: var(--hmh-muted);
    border-bottom: 1px solid var(--hmh-border-gray);
}

body .woocommerce-checkout #order_review table.shop_table td {
    border-bottom: 1px solid var(--hmh-border-gray);
    padding: var(--hmh-space-sm) var(--hmh-space-md);
}

body .woocommerce-checkout #order_review table.shop_table .order-total th,
body .woocommerce-checkout #order_review table.shop_table .order-total td {
    font-weight: 700;
    font-size: 16px;
    color: var(--hmh-charcoal);
    border-bottom: none;
    padding-top: var(--hmh-space-md);
}

body .woocommerce-checkout #order_review table.shop_table .order-total .woocommerce-Price-amount {
    color: var(--hmh-green-dark);
    font-size: 20px;
}

/* 10.3 Payment Methods (ACH integration)
   -------------------------------------------------------------------------- */
body .woocommerce-checkout #payment,
body .woocommerce-checkout .woocommerce-checkout-payment {
    background-color: var(--hmh-surface);
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius);
    overflow: hidden;
}

body .woocommerce-checkout #payment ul.payment_methods {
    padding: var(--hmh-space-md);
    margin: 0;
    list-style: none;
    border-bottom: 1px solid var(--hmh-border-gray);
}

body .woocommerce-checkout #payment ul.payment_methods li {
    padding: var(--hmh-space-sm) 0;
    border-bottom: 1px solid var(--hmh-border-gray);
}

body .woocommerce-checkout #payment ul.payment_methods li:last-child {
    border-bottom: none;
}

body .woocommerce-checkout #payment ul.payment_methods li label {
    font-weight: 600;
    color: var(--hmh-charcoal);
    cursor: pointer;
}

body .woocommerce-checkout #payment .payment_box {
    background-color: var(--hmh-surface-alt);
    border-radius: var(--hmh-radius-sm);
    padding: var(--hmh-space-md);
    margin-top: var(--hmh-space-sm);
    color: var(--hmh-charcoal);
    font-size: 14px;
    line-height: 1.5;
}

/* 10.4 Place Order CTA
   -------------------------------------------------------------------------- */
body .woocommerce-checkout #payment .place-order,
body .woocommerce-checkout .place-order {
    padding: var(--hmh-space-md);
    background-color: var(--hmh-surface-alt);
}

body .woocommerce-checkout #payment #place_order,
body .woocommerce-checkout .place-order .button {
    display: block;
    width: 100%;
    background-color: var(--hmh-green-dark);
    color: var(--hmh-white);
    border: none;
    border-radius: var(--hmh-radius);
    font-size: 18px;
    font-weight: 700;
    padding: 14px 24px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.02em;
}

body .woocommerce-checkout #payment #place_order:hover,
body .woocommerce-checkout .place-order .button:hover {
    background-color: var(--hmh-green-mid);
}

body .woocommerce-checkout #payment #place_order:focus,
body .woocommerce-checkout .place-order .button:focus {
    outline: 2px solid var(--hmh-accent);
    outline-offset: 2px;
}

/* 10.5 Checkout notices / terms
   -------------------------------------------------------------------------- */
body .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    padding: var(--hmh-space-sm) 0;
    font-size: 14px;
    color: var(--hmh-muted);
}

body .woocommerce-checkout .woocommerce-privacy-policy-text {
    font-size: 14px;
    color: var(--hmh-muted);
    line-height: 1.5;
}

/* ==========================================================================
   11. BEAVER BUILDER OVERRIDES
   ========================================================================== */

/* 11.1 Row Spacing Normalization
   Problem: BB rows have inconsistent top/bottom padding
   -------------------------------------------------------------------------- */
body .fl-builder-content .fl-row-content-wrap {
    padding: var(--hmh-space-xl) var(--hmh-space-md);
}

/* 11.2 Column Gaps
   Problem: BB columns have no consistent gutter
   -------------------------------------------------------------------------- */
body .fl-builder-content .fl-col {
    padding: 0 var(--hmh-space-sm);
}

/* 11.3 Module-Specific Fixes
   Problem: BB text/photo modules lack consistent spacing
   -------------------------------------------------------------------------- */
body .fl-builder-content .fl-module-rich-text,
body .fl-builder-content .fl-module-heading {
    margin-bottom: var(--hmh-space-md);
}

body .fl-builder-content .fl-module-photo .fl-photo-img {
    border-radius: var(--hmh-radius);
}

body .fl-builder-content .fl-module-separator .fl-separator {
    border-color: var(--hmh-border-gray);
}

/* BB callout module */
body .fl-builder-content .fl-module-callout .fl-callout-text {
    color: var(--hmh-charcoal);
}

body .fl-builder-content .fl-module-callout .fl-callout-title {
    color: var(--hmh-charcoal);
    font-weight: 700;
}

/* ==========================================================================
   12. UTILITIES
   ========================================================================== */

/* 12.1 Visibility Helpers
   -------------------------------------------------------------------------- */
.hmh-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;
}

.hmh-hidden {
    display: none;
}

/* 12.2 Spacing Utilities
   -------------------------------------------------------------------------- */
.hmh-mt-0  { margin-top: 0; }
.hmh-mt-sm { margin-top: var(--hmh-space-sm); }
.hmh-mt-md { margin-top: var(--hmh-space-md); }
.hmh-mt-lg { margin-top: var(--hmh-space-lg); }
.hmh-mb-0  { margin-bottom: 0; }
.hmh-mb-sm { margin-bottom: var(--hmh-space-sm); }
.hmh-mb-md { margin-bottom: var(--hmh-space-md); }
.hmh-mb-lg { margin-bottom: var(--hmh-space-lg); }
.hmh-p-0   { padding: 0; }
.hmh-p-sm  { padding: var(--hmh-space-sm); }
.hmh-p-md  { padding: var(--hmh-space-md); }
.hmh-p-lg  { padding: var(--hmh-space-lg); }

/* 12.3 Text Utilities
   -------------------------------------------------------------------------- */
.hmh-text-center   { text-align: center; }
.hmh-text-right    { text-align: right; }
.hmh-text-left     { text-align: left; }
.hmh-text-muted    { color: var(--hmh-muted); }
.hmh-text-success  { color: var(--hmh-success); }
.hmh-text-error    { color: var(--hmh-error); }
.hmh-font-bold     { font-weight: 700; }
.hmh-font-semibold { font-weight: 600; }
.hmh-text-sm       { font-size: 13px; }
.hmh-text-base     { font-size: 15px; }
.hmh-text-lg       { font-size: 18px; }

/* ==========================================================================
   13. RESPONSIVE OVERRIDES
   ========================================================================== */

/* 13.1 Tablet (max-width: 1024px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    body .woocommerce ul.products,
    body.woocommerce ul.products,
    body .woocommerce[class*="columns-"] ul.products {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    body .woocommerce ul.products li.product-category {
        padding: 24px 14px 20px;
    }

    body .woocommerce ul.products li.product-category a img {
        width: 68px;
        height: 68px;
    }
}

/* 13.2 Mobile (max-width: 768px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    body .woocommerce ul.products,
    body.woocommerce ul.products,
    body .woocommerce[class*="columns-"] ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    body .woocommerce ul.products li.product-category {
        padding: 20px 12px 16px;
    }

    body .woocommerce ul.products li.product-category a img {
        width: 56px;
        height: 56px;
    }

    body .woocommerce ul.products li.product-category a h2,
    body .woocommerce ul.products li.product-category a .woocommerce-loop-category__title {
        font-size: 13px;
    }

    body .woocommerce div.product .product_title {
        font-size: 22px;
    }

    body .woocommerce div.product p.price {
        font-size: 20px;
    }

    body .woocommerce div.product .woocommerce-tabs ul.tabs {
        flex-wrap: wrap;
    }

    body .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        padding: 6px 12px;
        font-size: 13px;
    }

    /* Stack cart coupon form */
    body .woocommerce .coupon {
        flex-direction: column;
    }

    body .woocommerce .coupon input.input-text {
        width: 100%;
    }

    /* BB row padding reduction */
    body .fl-builder-content .fl-row-content-wrap {
        padding: 24px 12px;
    }
}

/* 13.3 Small Mobile (max-width: 480px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
    body .woocommerce ul.products,
    body.woocommerce ul.products,
    body .woocommerce[class*="columns-"] ul.products {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    body .woocommerce ul.products li.product-category {
        padding: 18px 14px 16px;
        flex-direction: row;
        gap: 14px;
        text-align: left;
    }

    body .woocommerce ul.products li.product-category > a {
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }

    body .woocommerce ul.products li.product-category a img {
        width: 48px;
        height: 48px;
    }

    body .woocommerce ul.products li.product-category a h2,
    body .woocommerce ul.products li.product-category a .woocommerce-loop-category__title {
        text-align: left;
    }

    body .woocommerce table.shop_table {
        font-size: 13px;
    }

    body .woocommerce table.shop_table .product-thumbnail img {
        width: 48px;
        height: 48px;
    }

    body .woocommerce-checkout .woocommerce-billing-fields,
    body .woocommerce-checkout .woocommerce-shipping-fields,
    body .woocommerce-checkout-review-order,
    body .woocommerce .cart_totals {
        padding: 16px;
    }
}

/* ==========================================================================
   SECTIONS 14–19 — Added 2026-02-25
   ──────────────────────────────────────────────────────────────────────────
   14. WOOCOMMERCE - MY ACCOUNT
       14.1 Account Layout (flex nav + content)
       14.2 Navigation Menu
       14.3 Content Area
       14.4 Orders Table
       14.5 Addresses
       14.6 Account Forms
       14.7 My Account Responsive
   15. WOOCOMMERCE - MINI CART (HEADER)
   16. WOOCOMMERCE - ENHANCED NOTICES
   17. WOOCOMMERCE BLOCKS COMPATIBILITY
       17.1 Block Cart
       17.2 Block Checkout
       17.3 Block Product Grid
   18. CART RESPONSIVE STACKING
   19. CHECKOUT TWO-COLUMN LAYOUT
   ========================================================================== */

/* ==========================================================================
   14. WOOCOMMERCE - MY ACCOUNT
   ========================================================================== */

/* 14.1 Account Layout — side-by-side nav + content
   Uses flex on the .woocommerce wrapper inside the account page.
   -------------------------------------------------------------------------- */
body.woocommerce-account .woocommerce {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hmh-space-lg);
    align-items: flex-start;
}

/* Notices span full width above the two columns */
body.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
    flex: 0 0 100%;
}

/* 14.2 Navigation Menu
   -------------------------------------------------------------------------- */
body .woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 220px;
    background-color: var(--hmh-surface);
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius);
    padding: var(--hmh-space-sm) 0;
    box-shadow: var(--hmh-shadow-sm);
}

body .woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

body .woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0;
    border-bottom: 1px solid var(--hmh-border-gray);
}

body .woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}

body .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: var(--hmh-space-sm) var(--hmh-space-md);
    color: var(--hmh-charcoal);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

body .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
body .woocommerce-account .woocommerce-MyAccount-navigation ul li a:focus {
    background-color: var(--hmh-surface-alt);
    color: var(--hmh-green-dark);
}

body .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    color: var(--hmh-green-dark);
    font-weight: 700;
    border-left: 3px solid var(--hmh-green-dark);
    background-color: var(--hmh-surface-alt);
}

/* 14.3 Content Area
   -------------------------------------------------------------------------- */
body .woocommerce-account .woocommerce-MyAccount-content {
    flex: 1;
    min-width: 0;
    background-color: var(--hmh-surface);
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius);
    padding: var(--hmh-space-lg);
}

/* 14.4 Orders Table
   -------------------------------------------------------------------------- */
body .woocommerce-account .woocommerce-orders-table {
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    width: 100%;
}

body .woocommerce-account .woocommerce-orders-table th {
    background-color: var(--hmh-surface-alt);
    color: var(--hmh-charcoal);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: var(--hmh-space-sm) var(--hmh-space-md);
    border-bottom: 2px solid var(--hmh-border-gray);
    text-align: left;
}

body .woocommerce-account .woocommerce-orders-table td {
    padding: var(--hmh-space-sm) var(--hmh-space-md);
    border-bottom: 1px solid var(--hmh-border-gray);
    vertical-align: middle;
    font-size: 14px;
    color: var(--hmh-charcoal);
}

body .woocommerce-account .woocommerce-orders-table tr:last-child td {
    border-bottom: none;
}

body .woocommerce-account .woocommerce-orders-table .button {
    padding: var(--hmh-space-xs) var(--hmh-space-md);
    font-size: 13px;
}

/* 14.5 Addresses
   -------------------------------------------------------------------------- */
body .woocommerce-account .woocommerce-Addresses {
    display: flex;
    gap: var(--hmh-space-lg);
    flex-wrap: wrap;
}

body .woocommerce-account .woocommerce-Addresses .woocommerce-Address {
    flex: 1;
    min-width: 250px;
    background-color: var(--hmh-surface-alt);
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius);
    padding: var(--hmh-space-md);
}

body .woocommerce-account .woocommerce-Addresses .woocommerce-Address header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--hmh-charcoal);
    margin-bottom: var(--hmh-space-sm);
}

body .woocommerce-account .woocommerce-Addresses .woocommerce-Address address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.6;
    color: var(--hmh-charcoal);
}

/* 14.6 Account Forms (edit account, login/register)
   -------------------------------------------------------------------------- */
body .woocommerce-account .woocommerce-EditAccountForm .form-row,
body .woocommerce-account .woocommerce-form-login .form-row,
body .woocommerce-account .woocommerce-form-register .form-row {
    margin-bottom: var(--hmh-space-md);
}

body .woocommerce-account .woocommerce-EditAccountForm label,
body .woocommerce-account .woocommerce-form-login label,
body .woocommerce-account .woocommerce-form-register label {
    font-size: 14px;
    font-weight: 600;
    color: var(--hmh-charcoal);
    margin-bottom: var(--hmh-space-xs);
    display: block;
}

body .woocommerce-account .woocommerce-EditAccountForm input.input-text,
body .woocommerce-account .woocommerce-form-login input.input-text,
body .woocommerce-account .woocommerce-form-register input.input-text {
    width: 100%;
    padding: var(--hmh-space-sm) var(--hmh-space-md);
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius-sm);
    background-color: var(--hmh-surface);
    font-size: 15px;
    color: var(--hmh-charcoal);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body .woocommerce-account .woocommerce-EditAccountForm input.input-text:focus,
body .woocommerce-account .woocommerce-form-login input.input-text:focus,
body .woocommerce-account .woocommerce-form-register input.input-text:focus {
    border-color: var(--hmh-green-dark);
    box-shadow: 0 0 0 2px rgba(41, 89, 7, 0.15);
    outline: none;
}

/* Login/Register two-column layout */
body .woocommerce-account .u-columns {
    display: flex;
    gap: var(--hmh-space-lg);
    flex-wrap: wrap;
}

body .woocommerce-account .u-columns .u-column1,
body .woocommerce-account .u-columns .u-column2 {
    flex: 1;
    min-width: 280px;
}

/* 14.7 My Account Responsive
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    body.woocommerce-account .woocommerce {
        flex-direction: column;
    }

    body .woocommerce-account .woocommerce-MyAccount-navigation {
        flex: 0 0 auto;
        width: 100%;
    }

    body .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
    }

    body .woocommerce-account .woocommerce-MyAccount-navigation ul li {
        flex: 1;
        min-width: 0;
        border-bottom: none;
        border-right: 1px solid var(--hmh-border-gray);
    }

    body .woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
        border-right: none;
    }

    body .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        text-align: center;
        padding: var(--hmh-space-sm) var(--hmh-space-xs);
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
        border-left: none;
        border-bottom: 3px solid var(--hmh-green-dark);
    }

    body .woocommerce-account .woocommerce-MyAccount-content {
        padding: var(--hmh-space-md);
    }

    /* Orders table — stacked card layout on mobile */
    body .woocommerce-account .woocommerce-orders-table,
    body .woocommerce-account .woocommerce-orders-table thead,
    body .woocommerce-account .woocommerce-orders-table tbody,
    body .woocommerce-account .woocommerce-orders-table th,
    body .woocommerce-account .woocommerce-orders-table td,
    body .woocommerce-account .woocommerce-orders-table tr {
        display: block;
    }

    body .woocommerce-account .woocommerce-orders-table thead {
        display: none;
    }

    body .woocommerce-account .woocommerce-orders-table tr {
        border: 1px solid var(--hmh-border-gray);
        border-radius: var(--hmh-radius);
        padding: var(--hmh-space-md);
        margin-bottom: var(--hmh-space-md);
        background-color: var(--hmh-surface);
    }

    body .woocommerce-account .woocommerce-orders-table td {
        padding: var(--hmh-space-xs) 0;
        border-bottom: none;
        text-align: left;
        display: flex;
        justify-content: space-between;
    }

    body .woocommerce-account .woocommerce-orders-table td::before {
        content: attr(data-title);
        font-weight: 600;
        color: var(--hmh-muted);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-right: var(--hmh-space-sm);
    }

    /* Addresses stack */
    body .woocommerce-account .woocommerce-Addresses {
        flex-direction: column;
    }

    body .woocommerce-account .woocommerce-Addresses .woocommerce-Address {
        min-width: auto;
    }

    /* Login/register stack */
    body .woocommerce-account .u-columns {
        flex-direction: column;
    }
}

/* ==========================================================================
   15. WOOCOMMERCE - MINI CART (HEADER)
   Styles the dropdown/flyout cart widget used in the header.
   ========================================================================== */

body .widget_shopping_cart,
body .fl-menu-cart-contents,
body .woocommerce-mini-cart__contents {
    background-color: var(--hmh-surface);
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius);
    box-shadow: var(--hmh-shadow-md);
    padding: var(--hmh-space-md);
    min-width: 300px;
}

body .widget_shopping_cart .woocommerce-mini-cart {
    list-style: none;
    padding: 0;
    margin: 0;
}

body .widget_shopping_cart .woocommerce-mini-cart li.mini_cart_item {
    display: flex;
    align-items: center;
    gap: var(--hmh-space-sm);
    padding: var(--hmh-space-sm) 0;
    border-bottom: 1px solid var(--hmh-border-gray);
    font-size: 14px;
}

body .widget_shopping_cart .woocommerce-mini-cart li.mini_cart_item:last-child {
    border-bottom: none;
}

body .widget_shopping_cart .woocommerce-mini-cart li.mini_cart_item img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: var(--hmh-radius-sm);
    border: 1px solid var(--hmh-border-gray);
    flex-shrink: 0;
}

body .widget_shopping_cart .woocommerce-mini-cart li.mini_cart_item a:not(.remove) {
    color: var(--hmh-charcoal);
    font-weight: 500;
    text-decoration: none;
    flex: 1;
}

body .widget_shopping_cart .woocommerce-mini-cart li.mini_cart_item a:not(.remove):hover {
    color: var(--hmh-green-dark);
}

body .widget_shopping_cart .woocommerce-mini-cart li.mini_cart_item .remove {
    color: var(--hmh-muted);
    font-size: 18px;
    text-decoration: none;
    flex-shrink: 0;
}

body .widget_shopping_cart .woocommerce-mini-cart li.mini_cart_item .remove:hover {
    color: var(--hmh-error);
}

body .widget_shopping_cart .woocommerce-mini-cart li.mini_cart_item .quantity {
    font-size: 13px;
    color: var(--hmh-muted);
}

body .widget_shopping_cart .woocommerce-mini-cart__total {
    padding: var(--hmh-space-sm) 0;
    margin-top: var(--hmh-space-sm);
    border-top: 2px solid var(--hmh-border-gray);
    font-weight: 700;
    color: var(--hmh-charcoal);
    display: flex;
    justify-content: space-between;
}

body .widget_shopping_cart .woocommerce-mini-cart__total .woocommerce-Price-amount {
    color: var(--hmh-green-dark);
}

body .widget_shopping_cart .woocommerce-mini-cart__buttons {
    display: flex;
    gap: var(--hmh-space-sm);
    padding-top: var(--hmh-space-sm);
}

body .widget_shopping_cart .woocommerce-mini-cart__buttons a.button {
    flex: 1;
    text-align: center;
    padding: var(--hmh-space-sm) var(--hmh-space-md);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--hmh-radius-sm);
}

/* "View cart" link (secondary style) */
body .widget_shopping_cart .woocommerce-mini-cart__buttons a.button.wc-forward:not(.checkout) {
    background-color: var(--hmh-surface-alt);
    color: var(--hmh-charcoal);
    border: 1px solid var(--hmh-border-gray);
}

body .widget_shopping_cart .woocommerce-mini-cart__buttons a.button.wc-forward:not(.checkout):hover {
    background-color: var(--hmh-border-gray);
}

/* "Checkout" link (primary style) */
body .widget_shopping_cart .woocommerce-mini-cart__buttons a.button.checkout {
    background-color: var(--hmh-green-dark);
    color: var(--hmh-white);
    border: none;
}

body .widget_shopping_cart .woocommerce-mini-cart__buttons a.button.checkout:hover {
    background-color: var(--hmh-green-mid);
}

/* Empty cart state */
body .widget_shopping_cart .woocommerce-mini-cart__empty-message {
    text-align: center;
    color: var(--hmh-muted);
    font-size: 14px;
    padding: var(--hmh-space-lg) 0;
}

/* ==========================================================================
   16. WOOCOMMERCE - ENHANCED NOTICES
   Builds upon the basic card from section 6.1 with flex layout for icon +
   text + action button alignment, subtle background tints, and close-button
   positioning. Covers both classic and Block notice banners.
   ========================================================================== */

body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error,
body .wc-block-components-notice-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--hmh-space-md);
    padding: var(--hmh-space-md) var(--hmh-space-lg);
    margin-bottom: var(--hmh-space-md);
    font-size: 15px;
    line-height: 1.5;
    color: var(--hmh-charcoal);
    background-color: var(--hmh-surface);
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius);
    position: relative;
}

/* Icon alignment — WooCommerce uses ::before pseudo for notice icons */
body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Success notice */
body .woocommerce-message {
    border-left: 4px solid var(--hmh-success);
    background-color: #f0fdf4;
}

body .woocommerce-message::before {
    color: var(--hmh-success);
}

/* Info notice */
body .woocommerce-info {
    border-left: 4px solid var(--hmh-green-dark);
    background-color: #f0f9f0;
}

body .woocommerce-info::before {
    color: var(--hmh-green-dark);
}

/* Error notice */
body .woocommerce-error {
    border-left: 4px solid var(--hmh-error);
    background-color: #fef2f2;
}

body .woocommerce-error::before {
    color: var(--hmh-error);
}

body .woocommerce-error li {
    margin-bottom: var(--hmh-space-xs);
}

body .woocommerce-error li:last-child {
    margin-bottom: 0;
}

/* Notice action buttons (e.g., "View cart" link in success message) */
body .woocommerce-message a.button,
body .woocommerce-info a.button,
body .woocommerce-error a.button {
    margin-left: auto;
    flex-shrink: 0;
    padding: var(--hmh-space-xs) var(--hmh-space-md);
    font-size: 13px;
    white-space: nowrap;
}

/* Close / dismiss for notices */
body .woocommerce-message .close,
body .woocommerce-info .close,
body .woocommerce-error .close,
body .woocommerce-store-notice__dismiss-link {
    position: absolute;
    top: var(--hmh-space-sm);
    right: var(--hmh-space-sm);
    color: var(--hmh-muted);
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;
    padding: var(--hmh-space-xs);
    line-height: 1;
    transition: color 0.2s ease;
}

body .woocommerce-message .close:hover,
body .woocommerce-info .close:hover,
body .woocommerce-error .close:hover,
body .woocommerce-store-notice__dismiss-link:hover {
    color: var(--hmh-charcoal);
}

/* Store-wide notice banner (demo store / promotional) */
body .woocommerce-store-notice,
body .demo_store {
    background-color: var(--hmh-green-dark);
    color: var(--hmh-white);
    padding: var(--hmh-space-sm) var(--hmh-space-md);
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    position: relative;
}

body .woocommerce-store-notice a,
body .demo_store a {
    color: var(--hmh-amber);
}

/* ==========================================================================
   17. WOOCOMMERCE BLOCKS COMPATIBILITY
   Ensures consistent styling whether the store uses classic shortcodes or
   WooCommerce Cart/Checkout Blocks (.wc-block-*). These selectors use the
   same --hmh-* tokens for visual consistency.
   ========================================================================== */

/* 17.1 Block Cart
   -------------------------------------------------------------------------- */
body .wc-block-cart .wc-block-cart__main,
body .wp-block-woocommerce-cart .wc-block-cart__main {
    font-family: var(--hmh-font-body);
    color: var(--hmh-charcoal);
}

/* Cart item rows */
body .wc-block-cart .wc-block-cart-items .wc-block-cart-items__row {
    border-bottom: 1px solid var(--hmh-border-gray);
    padding: var(--hmh-space-md) 0;
}

body .wc-block-cart .wc-block-cart-items .wc-block-cart-items__row:last-child {
    border-bottom: none;
}

body .wc-block-cart .wc-block-cart-items .wc-block-components-product-name {
    color: var(--hmh-charcoal);
    font-weight: 600;
    text-decoration: none;
}

body .wc-block-cart .wc-block-cart-items .wc-block-components-product-name:hover {
    color: var(--hmh-green-dark);
}

body .wc-block-cart .wc-block-cart-items .wc-block-components-product-metadata {
    color: var(--hmh-muted);
    font-size: 13px;
}

body .wc-block-cart .wc-block-cart-items .wc-block-components-product-price {
    color: var(--hmh-charcoal);
    font-weight: 600;
}

/* Block cart product images */
body .wc-block-cart .wc-block-cart-items .wc-block-components-product-image img {
    border-radius: var(--hmh-radius-sm);
    border: 1px solid var(--hmh-border-gray);
}

/* Block quantity selector */
body .wc-block-cart .wc-block-components-quantity-selector {
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius-sm);
    overflow: hidden;
}

body .wc-block-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
    color: var(--hmh-charcoal);
    font-weight: 600;
    border: none;
}

body .wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
    color: var(--hmh-charcoal);
    background-color: var(--hmh-surface-alt);
    transition: background-color 0.2s ease;
}

body .wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover {
    background-color: var(--hmh-green-light);
}

/* Block cart sidebar / totals */
body .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper {
    border-color: var(--hmh-border-gray);
}

body .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-item__label {
    color: var(--hmh-muted);
}

body .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-item__value {
    color: var(--hmh-charcoal);
    font-weight: 600;
}

body .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: var(--hmh-green-dark);
    font-weight: 700;
    font-size: 20px;
}

/* Block proceed-to-checkout CTA */
body .wc-block-cart .wc-block-cart__submit-button,
body .wc-block-cart .wc-block-components-button.wc-block-cart__submit-button {
    background-color: var(--hmh-green-dark);
    color: var(--hmh-white);
    border: none;
    border-radius: var(--hmh-radius);
    font-size: 17px;
    font-weight: 700;
    padding: 14px 24px;
    width: 100%;
    transition: background-color 0.2s ease;
}

body .wc-block-cart .wc-block-cart__submit-button:hover,
body .wc-block-cart .wc-block-components-button.wc-block-cart__submit-button:hover {
    background-color: var(--hmh-green-mid);
}

body .wc-block-cart .wc-block-cart__submit-button:focus {
    outline: 2px solid var(--hmh-accent);
    outline-offset: 2px;
}

/* Block coupon input */
body .wc-block-cart .wc-block-components-totals-coupon .wc-block-components-text-input input {
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius-sm);
    padding: var(--hmh-space-sm) var(--hmh-space-md);
    font-size: 15px;
    color: var(--hmh-charcoal);
}

body .wc-block-cart .wc-block-components-totals-coupon .wc-block-components-text-input input:focus {
    border-color: var(--hmh-green-dark);
    box-shadow: 0 0 0 2px rgba(41, 89, 7, 0.15);
}

/* 17.2 Block Checkout
   -------------------------------------------------------------------------- */
body .wc-block-checkout .wc-block-components-main,
body .wp-block-woocommerce-checkout .wc-block-components-main {
    font-family: var(--hmh-font-body);
    color: var(--hmh-charcoal);
}

/* Checkout step sections */
body .wc-block-checkout .wc-block-components-checkout-step {
    border-bottom: 1px solid var(--hmh-border-gray);
    padding-bottom: var(--hmh-space-lg);
    margin-bottom: var(--hmh-space-lg);
}

body .wc-block-checkout .wc-block-components-checkout-step:last-child {
    border-bottom: none;
}

body .wc-block-checkout .wc-block-components-checkout-step__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--hmh-charcoal);
}

body .wc-block-checkout .wc-block-components-checkout-step__description {
    color: var(--hmh-muted);
    font-size: 14px;
}

/* Block checkout inputs */
body .wc-block-checkout .wc-block-components-text-input input,
body .wc-block-checkout .wc-block-components-text-input textarea {
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius-sm);
    background-color: var(--hmh-surface);
    color: var(--hmh-charcoal);
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body .wc-block-checkout .wc-block-components-text-input input:focus,
body .wc-block-checkout .wc-block-components-text-input textarea:focus {
    border-color: var(--hmh-green-dark);
    box-shadow: 0 0 0 2px rgba(41, 89, 7, 0.15);
    outline: none;
}

body .wc-block-checkout .wc-block-components-text-input label {
    color: var(--hmh-muted);
    font-size: 14px;
}

/* Block checkout combobox / select */
body .wc-block-checkout .wc-block-components-combobox .wc-block-components-combobox-control input {
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius-sm);
    background-color: var(--hmh-surface);
    color: var(--hmh-charcoal);
}

/* Payment method radio options */
body .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option {
    padding: var(--hmh-space-sm) var(--hmh-space-md);
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius-sm);
    margin-bottom: var(--hmh-space-xs);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

body .wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option--checked {
    border-color: var(--hmh-green-dark);
    background-color: #f0f9f0;
}

body .wc-block-checkout .wc-block-components-radio-control__label {
    font-weight: 600;
    color: var(--hmh-charcoal);
}

body .wc-block-checkout .wc-block-components-radio-control__description {
    color: var(--hmh-muted);
    font-size: 13px;
}

/* Block checkout order summary sidebar */
body .wc-block-checkout .wc-block-components-order-summary {
    background-color: var(--hmh-surface);
    border: 1px solid var(--hmh-border-gray);
    border-radius: var(--hmh-radius);
    padding: var(--hmh-space-md);
}

body .wc-block-checkout .wc-block-components-order-summary .wc-block-components-product-name {
    color: var(--hmh-charcoal);
    font-weight: 600;
    text-decoration: none;
}

body .wc-block-checkout .wc-block-components-order-summary .wc-block-components-product-metadata {
    color: var(--hmh-muted);
    font-size: 12px;
}

/* Block place order CTA */
body .wc-block-checkout .wc-block-components-checkout-place-order-button,
body .wc-block-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button {
    background-color: var(--hmh-green-dark);
    color: var(--hmh-white);
    border: none;
    border-radius: var(--hmh-radius);
    font-size: 18px;
    font-weight: 700;
    padding: 14px 24px;
    width: 100%;
    transition: background-color 0.2s ease;
    letter-spacing: 0.02em;
}

body .wc-block-checkout .wc-block-components-checkout-place-order-button:hover {
    background-color: var(--hmh-green-mid);
}

body .wc-block-checkout .wc-block-components-checkout-place-order-button:focus {
    outline: 2px solid var(--hmh-accent);
    outline-offset: 2px;
}

/* Block notice banners (success/error/info) */
body .wc-block-components-notice-banner {
    border-radius: var(--hmh-radius);
    padding: var(--hmh-space-md) var(--hmh-space-lg);
    margin-bottom: var(--hmh-space-md);
    font-size: 14px;
}

body .wc-block-components-notice-banner.is-success {
    background-color: #f0fdf4;
    border-left: 4px solid var(--hmh-success);
    color: var(--hmh-charcoal);
}

body .wc-block-components-notice-banner.is-error {
    background-color: #fef2f2;
    border-left: 4px solid var(--hmh-error);
    color: var(--hmh-charcoal);
}

body .wc-block-components-notice-banner.is-info {
    background-color: #f0f9f0;
    border-left: 4px solid var(--hmh-green-dark);
    color: var(--hmh-charcoal);
}

/* 17.3 Block Product Grid
   -------------------------------------------------------------------------- */
body .wc-block-grid .wc-block-grid__products {
    gap: 24px;
}

body .wc-block-grid .wc-block-grid__product {
    background-color: var(--hmh-surface);
    border: 1px solid var(--hmh-border-gray);
    border-radius: 8px;
    padding: 20px 16px 16px;
    transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

body .wc-block-grid .wc-block-grid__product:hover {
    border-color: var(--hmh-green-light);
    box-shadow: 0 8px 24px rgba(41, 89, 7, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}

body .wc-block-grid .wc-block-grid__product-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--hmh-charcoal);
}

body .wc-block-grid .wc-block-grid__product-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--hmh-green-dark);
}

body .wc-block-grid .wc-block-grid__product-image img {
    border-radius: 6px;
}

body .wc-block-grid .wc-block-grid__product-add-to-cart .wp-block-button__link {
    background-color: var(--hmh-green-dark);
    color: var(--hmh-white);
    border-radius: var(--hmh-radius-sm);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 20px;
    width: 100%;
    text-align: center;
    transition: background-color 0.2s ease;
}

body .wc-block-grid .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
    background-color: var(--hmh-green-mid);
}

body .wc-block-grid .wc-block-grid__product-onsale {
    background-color: var(--hmh-accent);
    color: var(--hmh-white);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 0 4px 4px 0;
}

body .wc-block-grid .wc-block-grid__product-rating .wc-block-grid__product-rating__stars {
    color: var(--hmh-accent);
}

/* ==========================================================================
   18. CART RESPONSIVE STACKING
   On mobile, converts the classic cart table from a traditional table layout
   into stacked cards for better readability and touch interaction.
   ========================================================================== */

@media screen and (max-width: 768px) {
    body .woocommerce-cart table.shop_table,
    body .woocommerce-cart table.shop_table thead,
    body .woocommerce-cart table.shop_table tbody,
    body .woocommerce-cart table.shop_table th,
    body .woocommerce-cart table.shop_table td,
    body .woocommerce-cart table.shop_table tr {
        display: block;
    }

    body .woocommerce-cart table.shop_table {
        border: none;
    }

    body .woocommerce-cart table.shop_table thead {
        display: none;
    }

    body .woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item {
        border: 1px solid var(--hmh-border-gray);
        border-radius: var(--hmh-radius);
        padding: var(--hmh-space-md);
        margin-bottom: var(--hmh-space-md);
        background-color: var(--hmh-surface);
        position: relative;
        display: grid;
        grid-template-columns: 60px 1fr;
        grid-template-rows: auto;
        gap: var(--hmh-space-xs) var(--hmh-space-md);
        align-items: center;
    }

    body .woocommerce-cart table.shop_table td {
        border-bottom: none;
        padding: var(--hmh-space-xs) 0;
    }

    body .woocommerce-cart table.shop_table .product-thumbnail {
        grid-row: 1 / 4;
        grid-column: 1;
    }

    body .woocommerce-cart table.shop_table .product-thumbnail img {
        width: 60px;
        height: 60px;
    }

    body .woocommerce-cart table.shop_table .product-name {
        grid-column: 2;
        font-weight: 600;
    }

    body .woocommerce-cart table.shop_table .product-price {
        grid-column: 2;
    }

    body .woocommerce-cart table.shop_table .product-price::before {
        content: "Price: ";
        font-weight: 600;
        color: var(--hmh-muted);
        font-size: 12px;
    }

    body .woocommerce-cart table.shop_table .product-quantity {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: var(--hmh-space-sm);
    }

    body .woocommerce-cart table.shop_table .product-quantity::before {
        content: "Qty:";
        font-weight: 600;
        color: var(--hmh-muted);
        font-size: 12px;
    }

    body .woocommerce-cart table.shop_table .product-subtotal {
        grid-column: 1 / -1;
        text-align: right;
        font-weight: 700;
        color: var(--hmh-green-dark);
        font-size: 16px;
        padding-top: var(--hmh-space-sm);
        border-top: 1px solid var(--hmh-border-gray);
    }

    body .woocommerce-cart table.shop_table .product-subtotal::before {
        content: "Subtotal: ";
        font-weight: 600;
        color: var(--hmh-muted);
        font-size: 12px;
    }

    body .woocommerce-cart table.shop_table .product-remove {
        position: absolute;
        top: var(--hmh-space-sm);
        right: var(--hmh-space-sm);
    }

    /* Cart actions row — full width */
    body .woocommerce-cart table.shop_table td.actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--hmh-space-sm);
        padding: var(--hmh-space-md) 0;
    }

    /* Cart totals full width on mobile */
    body .woocommerce-cart .cart-collaterals {
        width: 100%;
    }

    body .woocommerce-cart .cart_totals {
        width: 100%;
        float: none;
    }
}

/* ==========================================================================
   19. CHECKOUT TWO-COLUMN LAYOUT
   On desktop (≥769px), display billing/shipping fields and order review
   side by side. Falls back to stacked on tablet and below.
   Block checkout already handles its own two-column; we just add sticky
   sidebar for consistency.
   ========================================================================== */

/* Classic checkout two-column */
@media screen and (min-width: 769px) {
    body .woocommerce-checkout .col2-set {
        display: flex;
        gap: var(--hmh-space-lg);
    }

    body .woocommerce-checkout .col2-set .col-1,
    body .woocommerce-checkout .col2-set .col-2 {
        flex: 1;
        min-width: 0;
    }

    body .woocommerce-checkout form.checkout {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: var(--hmh-space-lg);
        align-items: start;
    }

    body .woocommerce-checkout form.checkout .col2-set {
        grid-column: 1;
    }

    body .woocommerce-checkout form.checkout #order_review,
    body .woocommerce-checkout form.checkout .woocommerce-checkout-review-order-table-wrap,
    body .woocommerce-checkout form.checkout #order_review_heading {
        grid-column: 2;
    }

    body .woocommerce-checkout form.checkout #order_review_heading {
        grid-row: 1;
    }

    body .woocommerce-checkout form.checkout #order_review {
        grid-row: 2;
        position: sticky;
        top: var(--hmh-space-lg);
    }

    body .woocommerce-checkout form.checkout .woocommerce-additional-fields {
        grid-column: 1;
    }
}

/* Block checkout — sticky sidebar */
@media screen and (min-width: 769px) {
    body .wc-block-checkout .wc-block-checkout__sidebar {
        position: sticky;
        top: var(--hmh-space-lg);
    }
}