/*
Theme Name: BHS Headless
Theme URI: https://bassheadsupply.com
Author: Adire Audio
Description: Custom WordPress theme that mirrors the Basshead Supply Next.js storefront chrome for WooCommerce checkout, my-account, and other WP-served pages. Provides visual continuity between the headless storefront and WP-served pages.
Version: 1.0.0
License: Proprietary
Text Domain: bhs-headless
*/

/* ===== Brand variables (mirrors storefront globals.css) ===== */
:root {
    --color-bg-dark: #0a0a0a;
    --color-bg-card: #141414;
    --color-bg-card-hover: #1a1a1a;
    --color-bg-surface: #111111;
    --color-text-primary: #f0ece4;
    --color-text-secondary: #b8b3ae;
    --color-text-muted: #8e8983; /* WCAG AA — 5.31:1 on bg-card, see audit 2026-05-16 */
    --color-accent: #c8553a;
    --color-accent-light: #e06b4f;
    --color-accent-dark: #9e3f2a;
    --color-border: rgba(255, 255, 255, 0.06);
    --color-border-light: rgba(255, 255, 255, 0.1);
    --font-display: "Bebas Neue", sans-serif;
    --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    padding: 0;
    background: var(--color-bg-dark);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--color-accent-light);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--color-text-primary);
}

img {
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-primary);
    font-weight: 600;
    margin: 0 0 16px;
}

p {
    margin: 0 0 12px;
}

/* ===== Container ===== */
.bhs-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 16px;
}

@media (min-width: 768px) {
    .bhs-container {
        padding: 0 32px;
    }
}

/* ===== Announcement Bar ===== */
.bhs-announcement {
    background: var(--color-accent-dark);
    text-align: center;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--color-text-primary);
}

.bhs-announcement strong {
    color: #ffffff;
}

/* ===== Header ===== */
.bhs-header {
    background: rgba(10, 10, 10, 0.92);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: sticky;
    top: 0;
    z-index: 50;
}

.bhs-header-inner {
    display: flex;
    align-items: center;
    height: 64px;
    gap: 20px;
}

.bhs-logo img {
    height: 36px;
    width: auto;
    display: block;
}

@media (min-width: 640px) {
    .bhs-logo img {
        height: 45px;
    }
}

.bhs-nav {
    display: none;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .bhs-nav {
        display: flex;
    }
}

/* Nav list — structured ul/li to support dropdowns + animated
   underline, mirroring the Next.js Header component for visual parity
   between WP-served and storefront pages. */
.bhs-nav-list {
    display: flex;
    align-items: center;
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bhs-nav-item {
    position: relative;
}

.bhs-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* Use primary text color (same brightness as the storefront's
       hover state) — even though Next.js technically uses text-secondary
       at rest, the user perceives the storefront nav as "more white".
       Likely the next/font self-hosted Instrument Sans renders crisper
       than Google Fonts CDN load, making the same #b8b3ae appear
       brighter. Using primary closes the gap for WP-served pages. */
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    white-space: nowrap;
    position: relative;
    padding: 4px 0;
    transition: color 0.15s ease;
    text-decoration: none;
}

.bhs-nav-link:hover {
    color: #ffffff;
}

.bhs-nav-link-accent {
    color: var(--color-accent);
    font-weight: 600;
}

.bhs-nav-link-accent:hover {
    color: #ffffff;
}

/* Animated underline on hover — accent-colored sliver under each nav
   link. Matches the storefront's group-hover:w-full pattern. */
.bhs-nav-underline {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 1.5px;
    background: var(--color-accent);
    transition: width 0.3s ease;
}

.bhs-nav-link:hover .bhs-nav-underline {
    width: 100%;
}

/* Dropdown caret indicator */
.bhs-nav-caret {
    font-size: 9px;
    margin-left: 2px;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.bhs-nav-has-dropdown:hover .bhs-nav-caret {
    opacity: 1;
}

/* Dropdown panel — hidden by default, shown on hover via opacity +
   visibility (preserves space for transition). pt-2 gap above the
   panel keeps a hover-buffer between trigger and panel so the menu
   doesn't snap shut as the cursor crosses. */
.bhs-nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100;
}

.bhs-nav-dropdown-right {
    left: auto;
    right: 0;
}

.bhs-nav-has-dropdown:hover .bhs-nav-dropdown,
.bhs-nav-has-dropdown:focus-within .bhs-nav-dropdown {
    opacity: 1;
    visibility: visible;
}

.bhs-nav-dropdown-inner {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    padding: 8px 0;
    min-width: 220px;
}

.bhs-nav-dropdown-inner a {
    display: block;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    transition: color 0.15s ease, background 0.15s ease;
}

.bhs-nav-dropdown-inner a:hover {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.bhs-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .bhs-header-right {
        gap: 20px;
    }
}

.bhs-header-right a {
    color: var(--color-text-secondary);
    white-space: nowrap;
    transition: color 0.15s ease;
}

.bhs-header-right a:hover {
    color: var(--color-text-primary);
}

/* ===== Main content ===== */
.bhs-main {
    min-height: 60vh;
    padding: 40px 0 60px;
}

.bhs-page-title {
    margin-bottom: 32px;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* ===== Form Elements (stronger overrides for WC checkout) ===== */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="password"],
body input[type="number"],
body input[type="search"],
body input[type="url"],
body select,
body textarea,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce select,
.woocommerce textarea,
.woocommerce-checkout input,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.select2-container--default .select2-selection--single {
    background-color: var(--color-bg-card) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 4px !important;
    padding: 12px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    width: 100% !important;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
    box-shadow: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-text-primary) !important;
    line-height: 1.6 !important;
    padding-left: 0 !important;
}

body input:focus,
body select:focus,
body textarea:focus,
.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
    border-color: var(--color-accent) !important;
    outline: none !important;
}

input::placeholder, textarea::placeholder {
    color: var(--color-text-muted) !important;
}

select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8b3ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
}

label {
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 4px;
}

.required {
    color: var(--color-accent);
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    accent-color: var(--color-accent);
    margin-right: 6px;
}

/* ===== Buttons ===== */
button,
input[type="submit"],
.button,
.wp-element-button,
#place_order {
    background-color: var(--color-accent);
    color: var(--color-text-primary);
    border: none;
    border-radius: 4px;
    padding: 12px 28px;
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.15s ease;
    text-decoration: none;
    display: inline-block;
}

button:hover,
input[type="submit"]:hover,
.button:hover,
#place_order:hover {
    background-color: var(--color-accent-light);
    color: var(--color-text-primary);
}

button:disabled,
#place_order:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== WooCommerce ===== */
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce h4,
.woocommerce-checkout h3,
#order_review_heading,
#customer_details h3 {
    color: var(--color-text-primary);
    margin: 24px 0 16px;
}

#order_review_heading,
#customer_details h3 {
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 8px;
}

/* WC tables */
.woocommerce table.shop_table,
.woocommerce-checkout-review-order-table,
.woocommerce-cart-form table {
    background-color: var(--color-bg-card);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    border-collapse: collapse;
    width: 100%;
    margin: 16px 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    border-top: 1px solid var(--color-border);
    color: var(--color-text-primary);
    padding: 12px;
    text-align: left;
}

.woocommerce table.shop_table thead th {
    background-color: var(--color-bg-surface);
    color: var(--color-text-secondary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* Payment methods */
.woocommerce-checkout-payment,
#payment {
    background-color: var(--color-bg-card) !important;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    padding: 16px;
    margin-top: 16px;
}

/* WC notices */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-notice {
    background-color: var(--color-bg-card);
    color: var(--color-text-primary);
    border-left: 3px solid var(--color-accent);
    padding: 12px 16px;
    list-style: none;
    margin: 16px 0;
    border-radius: 0 4px 4px 0;
}

.woocommerce-error {
    border-left-color: #e84e1f;
}

/* Coupon entry form — matches the notice cards above so login toggle,
   coupon toggle notice, and the open coupon form all read as one
   visual family. The toggle wrappers (.woocommerce-form-coupon-toggle,
   .woocommerce-form-login-toggle) are NOT styled as cards here — only
   the inner .woocommerce-info gets the card treatment (see further
   down). Avoids the double-card-around-notice issue. */
.checkout_coupon {
    background: var(--color-bg-card) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 6px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
}

/* Checkout layout — collapse WC's internal billing/shipping float-cols,
   then grid the customer_details vs order_review siblings */
.woocommerce-checkout #customer_details {
    width: 100% !important;
    float: none !important;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    width: 100% !important;
    float: none !important;
    max-width: 100% !important;
    padding: 0 !important;
    clear: both !important;
    margin-bottom: 16px;
}

.woocommerce-checkout form.checkout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
}

@media (min-width: 992px) {
    .woocommerce-checkout form.checkout {
        grid-template-columns: 1.5fr 1fr !important;
        align-items: start !important;
    }

    .woocommerce-checkout #customer_details {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
    }

    .woocommerce-checkout #order_review_heading {
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin-bottom: 0 !important;
    }

    .woocommerce-checkout #order_review,
    .woocommerce-checkout .bhs-order-review {
        grid-column: 2 !important;
        grid-row: 2 !important;
        position: static !important;
        align-self: start !important;
    }
}

/* Form rows */
.woocommerce form .form-row {
    margin-bottom: 16px;
}

.woocommerce form .form-row label {
    display: block;
    margin-bottom: 6px;
}

.woocommerce-additional-fields,
.woocommerce-billing-fields,
.woocommerce-shipping-fields {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    padding: 24px;
    margin-bottom: 24px;
}

/* My Account */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
}

.woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid var(--color-border);
}

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

.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 12px 16px;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-card-hover);
}

.woocommerce-MyAccount-content {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    padding: 24px;
}

@media (min-width: 768px) {
    .woocommerce-account .woocommerce {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 32px;
    }
}

/* ===== Footer ===== */
.bhs-footer {
    background: var(--color-bg-dark);
    border-top: 1px solid var(--color-border);
    padding: 60px 0 32px;
    margin-top: 60px;
}

.bhs-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

@media (min-width: 640px) {
    .bhs-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .bhs-footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    }
}

.bhs-footer-brand-name {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 2px;
    color: var(--color-text-primary);
    line-height: 1;
    margin-bottom: 16px;
}

.bhs-footer-brand-name .accent {
    color: var(--color-accent);
}

.bhs-footer-brand p {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    max-width: 280px;
    margin-bottom: 20px;
}

.bhs-social {
    display: flex;
    gap: 10px;
}

.bhs-social a {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text-secondary);
    transition: all 0.15s ease;
}

.bhs-social a:hover {
    color: var(--color-text-primary);
    border-color: var(--color-border-light);
    background: var(--color-bg-card-hover);
}

.bhs-social svg {
    width: 16px;
    height: 16px;
}

.bhs-footer-col h4 {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 1px;
    margin: 0 0 16px;
    color: var(--color-text-primary);
}

.bhs-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bhs-footer-col a {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.bhs-footer-col a:hover {
    color: var(--color-text-primary);
}

.bhs-footer-copyright {
    border-top: 1px solid var(--color-border);
    padding-top: 24px;
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
}

/* Hide admin bar entirely */
#wpadminbar {
    display: none !important;
}

html {
    margin-top: 0 !important;
}

/* Hide Coupon Box popup if it appears */
#wccp_popup, .wccp_popup_overlay {
    display: none !important;
}

/* Cart page */
.woocommerce-cart-form,
.cart-collaterals {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    padding: 24px;
    margin-bottom: 24px;
}

.cart_totals h2,
.cart-collaterals h2 {
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.checkout-button.button {
    width: 100%;
    text-align: center;
    padding: 16px;
    font-size: 14px;
}

/* ============================================================================
   CHECKOUT POLISH PASSES (1–9) — cascade architecture
   ============================================================================
   The /checkout styling evolved iteratively against the live WC markup. Each
   pass below layers refinements on top of the previous one. THE CASCADE ORDER
   IS LOAD-BEARING — later passes override specific properties from earlier
   passes (e.g. PASS 9 reduces #place_order padding/font-size set in PASS 2).
   Do NOT reorder passes or merge them inline without first verifying every
   property in the earlier rule is still set somewhere downstream.

   Map of #checkout rule layers (selector → passes that touch it):
     #place_order             : PASS 2, 4, 9   (PASS 1 fully shadowed, removed)
     ul.payment_methods       : PASS 1, 2, 5, 7
     ul.payment_methods > li  : PASS 2, 3, 4, 5, 7, 9
     payment_box              : PASS 1, 2, 3, 4, 7
     #customer_details > div  : PASS 1, 5

   When adding a 10th pass, append it AFTER PASS 9 — never insert mid-stack.
   ============================================================================ */

/* ============================================
   POLISH PASS 1 — Initial dark-card layout
   ============================================ */

/* Make customer_details a cleaner card stack */
#customer_details > div {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    padding: 24px;
    margin-bottom: 16px;
}

#customer_details h3 {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 16px;
    padding: 0;
    border: none;
    color: var(--color-text-primary);
}

#customer_details h3 span,
#customer_details h3 .optional {
    color: var(--color-text-muted);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    font-family: var(--font-body);
    font-weight: 400;
    margin-left: 8px;
}

/* Order review heading */
#order_review_heading {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 16px;
    padding: 0;
    border: none;
    color: var(--color-text-primary);
}

/* The order review card */
.bhs-order-review,
#order_review {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    padding: 24px;
}

/* Order summary used to be sticky on desktop. Removed because the
   right column is taller than the viewport (table + shipping options +
   tax + total + payment + place_order button) — sticky positioning
   clipped the bottom and the user couldn't scroll to the Place Order
   button. Static positioning lets the column scroll naturally with
   the page so all content stays reachable. */
@media (min-width: 992px) {
    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout #order_review,
    .woocommerce-checkout .bhs-order-review {
        position: static !important;
    }
}

/* Order review table polish */
.bhs-order-review table.shop_table,
#order_review table.shop_table {
    background: transparent !important;
    border: none !important;
    margin: 0 0 16px;
}

.bhs-order-review table.shop_table thead th,
#order_review table.shop_table thead th {
    background: transparent !important;
    border-bottom: 1px solid var(--color-border-light);
    padding: 0 0 12px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-weight: 600;
}

.bhs-order-review table.shop_table tbody td,
#order_review table.shop_table tbody td {
    padding: 16px 0;
    border-top: 1px solid var(--color-border);
    vertical-align: middle;
}

.bhs-order-review table.shop_table tbody tr:first-child td,
#order_review table.shop_table tbody tr:first-child td {
    border-top: none;
}

/* Product thumbnail */
.bhs-order-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    display: block;
}

.product-thumbnail {
    padding-right: 12px !important;
    width: 76px;
}

/* Product name + qty */
.bhs-product-name {
    display: block;
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 14px;
    line-height: 1.4;
}

.bhs-product-qty {
    color: var(--color-text-muted);
    font-size: 13px;
    white-space: nowrap;
    margin-right: 10px;
}

.product-total {
    text-align: right;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
}

/* Totals rows */
.bhs-order-review table.shop_table tfoot th,
.bhs-order-review table.shop_table tfoot td,
#order_review table.shop_table tfoot th,
#order_review table.shop_table tfoot td {
    border-top: 1px solid var(--color-border);
    padding: 10px 0;
    color: var(--color-text-secondary);
    font-weight: 400;
}

.bhs-order-review table.shop_table tfoot tr.order-total th,
.bhs-order-review table.shop_table tfoot tr.order-total td,
#order_review table.shop_table tfoot tr.order-total th,
#order_review table.shop_table tfoot tr.order-total td {
    color: var(--color-text-primary);
    font-weight: 700;
    font-size: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border-light);
}

.bhs-order-review table.shop_table tfoot tr.order-total td,
#order_review table.shop_table tfoot tr.order-total td {
    text-align: right;
}

.bhs-order-review table.shop_table tfoot td,
#order_review table.shop_table tfoot td {
    text-align: right;
}

/* Shipping row exception — its td contains <ul#shipping_method> with
   radio + label list items. Right-aligning those pushes the radios all
   the way against the right edge and looks broken. Keep them left. */
.bhs-order-review table.shop_table tfoot tr.shipping td,
#order_review table.shop_table tfoot tr.shipping td {
    text-align: left !important;
}

/* Narrow the entire checkout container — the global .bhs-container is
   1600px (right for product grids and the homepage), but a checkout
   reads better at ~1280px. Combined with the 520px right column, this
   keeps the form focused while giving product names enough room to
   stay on one or two lines instead of being smushed.
   Scoped strictly to the .bhs-main > .bhs-container — DON'T touch
   .bhs-header-inner or the footer's .bhs-container, which need the
   full site width. */
body.woocommerce-checkout .bhs-main > .bhs-container {
    max-width: 1280px !important;
}

/* Constrain the right column inside the (now narrower) container. */
@media (min-width: 992px) {
    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout #order_review,
    .woocommerce-checkout .bhs-order-review {
        max-width: 520px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        justify-self: end !important;
    }
}

/* Wrap the order review as a defined card with internal padding rather
   than stretching naked content to the column edges. Inner table then
   doesn't need its own per-cell horizontal padding to look insetted —
   the wrapper provides it. */
.woocommerce-checkout #order_review {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 8px !important;
    padding: 20px !important;
}

.woocommerce-checkout #order_review_heading {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

/* Strip per-cell horizontal padding now that the wrapper handles inset.
   Vertical padding stays for row spacing. */
#order_review table.shop_table tbody td,
#order_review table.shop_table tbody th,
#order_review table.shop_table tfoot td,
#order_review table.shop_table tfoot th,
#order_review table.shop_table thead td,
#order_review table.shop_table thead th,
.woocommerce-checkout-review-order-table tbody td,
.woocommerce-checkout-review-order-table tbody th,
.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-checkout-review-order-table tfoot th {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* The order review table is now inside a 400px-wide card, so the
   default 2-col table layout (label TH | value TD) compresses
   naturally. Force layout to fixed so the value column doesn't
   over-allocate. */
#order_review table.shop_table {
    table-layout: auto !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Inside the card, the payment box is its own visual unit. Strip its
   redundant outer card styles so it reads as a sub-section rather than
   a card-within-a-card. */
.woocommerce-checkout #order_review #payment,
.woocommerce-checkout #order_review .woocommerce-checkout-payment {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 12px 0 0 !important;
}

/* PayPal pay-later teaser */
.woocommerce-checkout #order_review .ppcp-paylater-message,
.woocommerce-checkout #order_review [class*="paylater"],
.woocommerce-checkout #order_review .ppcp-messages {
    padding: 0 !important;
    margin-top: 12px !important;
    font-size: 12px !important;
}

/* PPCP plugin bug workaround: when a vaulted card is selected, PPCP
   adds .ppcp-hidden to WC's standard #place_order AND removes its
   own DCC #place_order from the DOM. Net result: NO visible submit
   button. For saved-card flow there's nothing to tokenize — WC's
   standard submit posts the saved-token reference and PPCP's gateway
   processor handles it server-side correctly. Force WC's button
   visible regardless of PPCP's class manipulation. */
.woocommerce-checkout button#place_order:not(.ppcp-dcc-order-button) {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Keep PPCP's own DCC button hidden by default (its inline style says
   display:none). PPCP's JS removes that inline style when it wants to
   show the DCC flow — at which point this rule's specificity matters.
   Use a more specific selector + !important to ensure WC's button
   is always the visible one for now. */
.woocommerce-checkout button#place_order.ppcp-dcc-order-button {
    display: none !important;
}

/* Tighten the universal `button, .button, ...` rule so it doesn't paint
   PayPal/Affirm/Klarna/Acima/Intuit gateway buttons orange. Those
   gateways render their own branded buttons; if we paint them orange
   they look identical to the WC Place Order button and the user sees
   them as duplicates. Excluding gateway-button selectors here. */
.woocommerce-checkout #payment ul.payment_methods button,
.woocommerce-checkout #payment ul.payment_methods .button,
.woocommerce-checkout #payment ul.payment_methods input[type="submit"],
.woocommerce-checkout #payment .ppcp-button,
.woocommerce-checkout #payment [class*="paypal"] button,
.woocommerce-checkout #payment [class*="acima"] button,
.woocommerce-checkout #payment [class*="affirm"] button,
.woocommerce-checkout #payment [class*="klarna"] button,
.woocommerce-checkout #payment [id*="paypal"] button,
.woocommerce-checkout #payment .sv-wc-payment-gateway-payment-form-manage-payment-methods,
.woocommerce-checkout #order_review .ppcp-messages button,
.woocommerce-checkout #order_review [class*="route"] button,
.woocommerce-checkout #order_review [id*="route"] button {
    background: transparent !important;
    color: inherit !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 4px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    width: auto !important;
}

/* Stack the shipping row vertically — "Shipment" label on top, options
   list below taking full column width. Side-by-side layout in the
   narrow 420px sidebar squeezes long labels (e.g. "UPS Next Day Air
   Saver: $111.28") onto two lines. */
#order_review table.shop_table tr.shipping,
#order_review table.shop_table tr.woocommerce-shipping-totals,
.woocommerce-checkout-review-order-table tr.shipping,
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
    display: block !important;
}

#order_review table.shop_table tr.shipping th,
#order_review table.shop_table tr.shipping td,
#order_review table.shop_table tr.woocommerce-shipping-totals th,
#order_review table.shop_table tr.woocommerce-shipping-totals td,
.woocommerce-checkout-review-order-table tr.shipping th,
.woocommerce-checkout-review-order-table tr.shipping td {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    border-top: none !important;
}

#order_review table.shop_table tr.shipping th,
#order_review table.shop_table tr.woocommerce-shipping-totals th {
    padding: 12px 0 6px 0 !important;
    font-weight: 600 !important;
    color: var(--color-text-secondary) !important;
    font-size: 13px !important;
    border-bottom: none !important;
}

#order_review table.shop_table tr.shipping td,
#order_review table.shop_table tr.woocommerce-shipping-totals td {
    padding: 0 !important;
}

#order_review ul#shipping_method,
#order_review ul.woocommerce-shipping-methods {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#order_review ul#shipping_method li,
#order_review ul.woocommerce-shipping-methods li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 0 !important;
    line-height: 1.4 !important;
}

#order_review ul#shipping_method li input[type="radio"],
#order_review ul.woocommerce-shipping-methods li input[type="radio"] {
    margin: 0 !important;
    flex: 0 0 auto !important;
}

#order_review ul#shipping_method li label,
#order_review ul.woocommerce-shipping-methods li label {
    margin: 0 !important;
    cursor: pointer !important;
    color: var(--color-text-primary) !important;
    font-size: 14px !important;
    flex: 1 1 auto !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Payment methods polish */
.woocommerce-checkout-payment {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

ul.payment_methods {
    border: 1px solid var(--color-border-light) !important;
    border-radius: 6px !important;
    overflow: hidden;
    margin-top: 16px !important;
}

ul.payment_methods li {
    padding: 14px 16px !important;
    transition: background 0.15s ease;
}

ul.payment_methods li:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}

ul.payment_methods li label {
    color: var(--color-text-primary) !important;
    cursor: pointer;
    margin-left: 8px !important;
    font-size: 14px;
    font-weight: 500;
}

ul.payment_methods li input[type="radio"] {
    accent-color: var(--color-accent);
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

ul.payment_methods li .payment_box {
    background: var(--color-bg-surface) !important;
    color: var(--color-text-secondary) !important;
    border: 1px solid var(--color-border) !important;
    margin-top: 12px !important;
    padding: 14px !important;
    border-radius: 4px !important;
}

/* NOTE: PASS 1 #place_order block removed — all four properties (width,
   margin-top, padding, font-size) are re-set with !important by PASS 2
   at the next "Place order button" rule below, so this block was 100%
   shadowed. See cascade map at top of polish-pass section. */

/* Coupon area at top */
.woocommerce-form-coupon-toggle .woocommerce-info {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-left: 3px solid var(--color-accent) !important;
    border-radius: 4px !important;
    padding: 12px 16px !important;
    color: var(--color-text-secondary) !important;
    margin: 0 0 24px !important;
}

.woocommerce-form-coupon-toggle .showcoupon {
    color: var(--color-accent-light) !important;
    font-weight: 600;
}

/* Form row layout — two columns on desktop for First/Last name etc */
.woocommerce form .form-row {
    margin-bottom: 14px !important;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
    width: 48%;
    display: inline-block;
}

.woocommerce form .form-row-first {
    margin-right: 3%;
}

@media (max-width: 640px) {
    .woocommerce form .form-row-first,
    .woocommerce form .form-row-last {
        width: 100%;
        margin-right: 0;
    }
}

/* Checkboxes — Create account, Ship to different address */
.woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.woocommerce-form__input-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
}

/* select2 dropdown polish */
.select2-dropdown {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
}

.select2-results__option {
    color: var(--color-text-primary) !important;
}

.select2-results__option--highlighted[aria-selected],
.select2-results__option--highlighted {
    background: var(--color-accent) !important;
    color: white !important;
}

.select2-search--dropdown .select2-search__field {
    background: var(--color-bg-surface) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-light) !important;
}

/* The "Place order" loading spinner */
.woocommerce form .form-row.processing .blockUI.blockOverlay {
    background: rgba(10, 10, 10, 0.7) !important;
}

/* ============================================
   POLISH PASS 2 — Product image sizing + finishing
   ============================================ */

/* Thumbnail injected via woocommerce_cart_item_name filter — force size against inline width/height attrs from get_image() */
.bhs-order-thumb-wrap {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 56px !important;
    height: 56px !important;
    margin-right: 12px;
    vertical-align: middle;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
}

.bhs-order-thumb-wrap img,
.bhs-order-thumb-wrap .bhs-order-thumb-inline,
.woocommerce-checkout-review-order-table .product-name img {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 4px;
}

.bhs-order-name-wrap {
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 80px);
    font-weight: 500;
    color: var(--color-text-primary);
    font-size: 13px;
    line-height: 1.4;
}

/* Product row in order summary — flex layout for image | name | price */
.woocommerce-checkout-review-order-table tbody tr.cart_item td.product-name {
    display: flex !important;
    align-items: center;
    line-height: 1.4;
    padding: 14px 0 !important;
    border-top: 1px solid var(--color-border);
    border-bottom: none;
}

.woocommerce-checkout-review-order-table tbody tr.cart_item td.product-total {
    padding: 14px 0 !important;
    border-top: 1px solid var(--color-border);
    border-bottom: none;
    text-align: right;
    font-weight: 600;
    color: var(--color-text-primary) !important;
    white-space: nowrap;
    vertical-align: middle;
}

.woocommerce-checkout-review-order-table .product-quantity,
.woocommerce-checkout-review-order-table strong.product-quantity {
    color: var(--color-text-muted);
    font-weight: 400;
    margin-left: 4px;
    font-size: 12px;
}

/* Tighten the tfoot rows — subtotal / shipping / tax / total */
#order_review table.shop_table tfoot th,
#order_review table.shop_table tfoot td,
.bhs-order-review table.shop_table tfoot th,
.bhs-order-review table.shop_table tfoot td {
    padding: 8px 0 !important;
    font-size: 13px !important;
    color: var(--color-text-secondary) !important;
    font-weight: 400 !important;
}

#order_review table.shop_table tfoot tr.order-total th,
#order_review table.shop_table tfoot tr.order-total td,
.bhs-order-review table.shop_table tfoot tr.order-total th,
.bhs-order-review table.shop_table tfoot tr.order-total td {
    padding-top: 14px !important;
    font-size: 18px !important;
    letter-spacing: 0.5px;
    color: var(--color-text-primary) !important;
    font-weight: 700 !important;
}

/* Payment methods — tighter, cleaner */
ul.payment_methods {
    margin: 20px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

ul.payment_methods > li {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--color-border) !important;
    background: transparent !important;
}

ul.payment_methods > li:last-child {
    border-bottom: none !important;
}

ul.payment_methods li input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px;
    vertical-align: middle;
    accent-color: var(--color-accent);
}

ul.payment_methods li label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--color-text-primary) !important;
    vertical-align: middle;
    cursor: pointer;
}

ul.payment_methods li label img {
    max-height: 24px !important;
    width: auto !important;
    vertical-align: middle;
    margin-left: 4px;
    display: inline-block;
}

ul.payment_methods li .payment_box {
    margin-top: 12px !important;
}

/* Place order button — full width, bold */
#place_order,
button#place_order,
.woocommerce-checkout #place_order {
    width: 100% !important;
    margin-top: 20px !important;
    padding: 18px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    background: var(--color-accent) !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
}

#place_order:hover {
    background: var(--color-accent-light) !important;
}

/* Order review card — refined padding/border-radius */
#order_review,
.bhs-order-review {
    padding: 24px !important;
    border-radius: 8px !important;
}

/* Privacy policy text below payment methods — muted */
.woocommerce-privacy-policy-text,
.woocommerce-privacy-policy-text p {
    color: var(--color-text-muted) !important;
    font-size: 12px !important;
    margin: 12px 0 !important;
    line-height: 1.5 !important;
}

.woocommerce-privacy-policy-text a {
    color: var(--color-accent-light) !important;
}

/* Form label refinement — small uppercase labels */
.woocommerce form .form-row label,
#customer_details label {
    font-size: 11px !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text-secondary) !important;
    margin-bottom: 6px !important;
    font-weight: 500;
}

/* Required asterisk */
.required {
    color: var(--color-accent) !important;
    text-decoration: none !important;
    font-weight: 600;
}

/* "Returning customer?" and "Have a coupon?" top notices — tighter */
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info {
    padding: 10px 16px !important;
    font-size: 13px !important;
    margin: 0 0 12px !important;
}

/* Coupon Box plugin popup — kill on checkout */
#wccp_popup, .wccp_popup_overlay {
    display: none !important;
}

/* ============================================
   POLISH PASS 3 — Fix radio buttons & payment row layout
   ============================================ */

/* Reset radios + checkboxes from the form-input styling above (which was
   matching them via .woocommerce-checkout input) */
input[type="radio"],
input[type="checkbox"],
body input[type="radio"],
body input[type="checkbox"],
.woocommerce input[type="radio"],
.woocommerce input[type="checkbox"],
.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 1px solid var(--color-border-light) !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    display: inline-block !important;
    vertical-align: middle !important;
    accent-color: var(--color-accent) !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

input[type="checkbox"],
body input[type="checkbox"] {
    border-radius: 3px !important;
}

/* Payment method rows — flex layout: radio | label | (full-width payment_box below) */
ul.payment_methods > li {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--color-border) !important;
    background: transparent !important;
}

ul.payment_methods > li:last-child {
    border-bottom: none !important;
}

ul.payment_methods > li > input[type="radio"] {
    margin-right: 12px !important;
}

ul.payment_methods > li > label {
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--color-text-primary) !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

ul.payment_methods > li > .payment_box {
    flex-basis: 100% !important;
    margin: 10px 0 0 28px !important;
    padding: 12px !important;
    background: var(--color-bg-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 4px !important;
    color: var(--color-text-secondary) !important;
}

/* Smaller arrow on payment_box */
ul.payment_methods > li > .payment_box::before {
    border-bottom-color: var(--color-bg-surface) !important;
    left: 12px !important;
}

/* Acima / Klarna / Affirm logos inside payment_box */
ul.payment_methods > li > .payment_box img {
    max-height: 32px !important;
    width: auto !important;
}

/* Checkboxes (Create account, Ship to different address, etc.) */
.woocommerce-form__label-for-checkbox,
label.checkbox {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    color: var(--color-text-primary) !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 14px !important;
}

/* ============================================
   POLISH PASS 4 — Grid layout for payment rows + cleanup
   ============================================ */

/* Use grid for payment method rows — handles label with embedded floated icons cleanly.
   Top row uses align-items:center so the radio + label + icon row line up
   vertically. Cards/icons inside the label space-between against the text. */
ul.payment_methods > li {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    align-items: center !important;
    padding: 18px 20px !important;
    border-bottom: 1px solid var(--color-border) !important;
    background: transparent !important;
}

ul.payment_methods > li:last-child {
    border-bottom: none !important;
}

ul.payment_methods > li > input[type="radio"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    align-self: center !important;
}

ul.payment_methods > li > label {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    flex-wrap: wrap;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--color-text-primary) !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}

ul.payment_methods > li > label > img,
ul.payment_methods > li > label img {
    display: inline-block !important;
    vertical-align: middle !important;
    max-height: 22px !important;
    width: auto !important;
    margin: 0 2px !important;
    float: none !important;
}

ul.payment_methods > li > .payment_box {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin: 10px 0 0 !important;
    padding: 12px !important;
    background: var(--color-bg-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 4px !important;
    color: var(--color-text-secondary) !important;
    position: relative;
}

/* Hide WC's default arrow on payment_box (it points up but we don't need it with grid layout) */
ul.payment_methods > li > .payment_box::before {
    display: none !important;
}

/* Hide CusRev review opt-in checkbox + label at bottom of checkout */
.cr_qcwc_optin-form,
.cr_qcwc-form-row,
.cr_qcwc,
p.cr_qcwc_optin-form,
.form-row.cr_qcwc_optin-form,
.woocommerce-checkout .cr_qcwc,
.woocommerce-checkout p.form-row[class*="cr_qcwc"] {
    display: none !important;
}

/* ============================================
   POLISH PASS 5 — Simplify to match clean reference
   Inspired by Gallinée checkout: airy, minimal, low visual weight
   ============================================ */

/* Remove the heavy card boxes around customer_details > div sections.
   Use clean spacing + section headers instead */
#customer_details > div,
#customer_details .woocommerce-billing-fields,
#customer_details .woocommerce-shipping-fields,
#customer_details .woocommerce-additional-fields {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 40px !important;
}

/* Section headers — small caps, subtle, NOT big Bebas Neue */
#customer_details h3,
#customer_details .woocommerce-billing-fields h3,
#customer_details .woocommerce-shipping-fields h3,
#customer_details .woocommerce-additional-fields h3,
#order_review_heading {
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    color: var(--color-text-secondary) !important;
    margin: 0 0 20px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid var(--color-border) !important;
}

/* Inputs — slightly lighter than page bg so they're visible, with visible border */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="password"],
body input[type="number"],
body input[type="search"],
body input[type="url"],
body select,
body textarea,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce select,
.woocommerce textarea {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 4px !important;
    padding: 14px 14px !important;
    font-size: 14px !important;
    color: var(--color-text-primary) !important;
    transition: border-color 0.15s ease, background 0.15s ease;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--color-accent) !important;
    background: var(--color-bg-card-hover) !important;
}

/* Visible placeholder */
input::placeholder, textarea::placeholder {
    color: var(--color-text-muted) !important;
    font-size: 14px;
}

/* Form labels — slightly brighter for readability */
.woocommerce form .form-row label,
#customer_details label {
    color: var(--color-text-secondary) !important;
    font-weight: 500 !important;
}

/* Order review card — strip the heavy card */
#order_review,
.bhs-order-review {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Order review TABLE — strip table chrome */
#order_review table.shop_table,
.bhs-order-review table.shop_table {
    border: none !important;
    background: transparent !important;
}

#order_review table.shop_table thead,
.bhs-order-review table.shop_table thead {
    display: none !important; /* Skip the PRODUCT/SUBTOTAL header row — redundant */
}

/* Smaller thumbnail to match reference */
.bhs-order-thumb-wrap {
    width: 48px !important;
    height: 48px !important;
    margin-right: 12px;
}

.bhs-order-thumb-wrap img,
.bhs-order-thumb-wrap .bhs-order-thumb-inline,
.woocommerce-checkout-review-order-table .product-name img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
}

/* Payment methods — strip the wrapping border, use simple bottom dividers */
ul.payment_methods {
    border: none !important;
    border-radius: 0 !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
}

ul.payment_methods > li {
    padding: 18px 20px !important;
    border-bottom: 1px solid var(--color-border) !important;
}

ul.payment_methods > li:first-child {
    border-top: 1px solid var(--color-border) !important;
}

/* Inner saved-cards / new-card panel — match the row's left padding so
   the saved card "Visa ending in 4281" radio aligns with the header
   "Debit & Credit Cards" radio above it. */
ul.payment_methods > li > .payment_box {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* PAYMENT section header — match other section headers */
#payment::before {
    content: "PAYMENT";
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: 32px 0 0;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--color-border);
}

/* "Returning customer?" / "Have a coupon?" — subtle inset card style. */
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    color: var(--color-text-secondary) !important;
}

/* Hide WC's default ::before info icon on checkout notices — they
   render as small blue/purple icons on our dark theme that look
   broken. Broader selector covers login toggle, coupon toggle, and
   any .woocommerce-info on checkout that isn't an explicit alert. */
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-form-login-toggle .woocommerce-info::before,
.woocommerce-form-coupon-toggle .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before {
    display: none !important;
    content: none !important;
}

/* Apply Coupon button on checkout — was rendering as default
   light/gray theme. Match the rest of the storefront's button styling. */
.woocommerce-form-coupon button[name="apply_coupon"],
.checkout_coupon button[name="apply_coupon"],
.woocommerce-form-coupon .button,
.checkout_coupon .button {
    background: var(--color-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    font-family: var(--font-display) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 12px 24px !important;
    cursor: pointer !important;
}

.woocommerce-form-coupon button[name="apply_coupon"]:hover,
.checkout_coupon button[name="apply_coupon"]:hover,
.woocommerce-form-coupon .button:hover,
.checkout_coupon .button:hover {
    background: var(--color-accent-light) !important;
}

.woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-form-coupon-toggle .woocommerce-info a {
    color: var(--color-accent-light) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    font-size: 11px;
}

/* Total row — bigger, prominent */
#order_review table.shop_table tfoot tr.order-total th,
#order_review table.shop_table tfoot tr.order-total td,
.bhs-order-review table.shop_table tfoot tr.order-total th,
.bhs-order-review table.shop_table tfoot tr.order-total td {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-top: 1px solid var(--color-border-light) !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}

/* Place order button — outline style to match reference */
#place_order,
button#place_order,
.woocommerce-checkout #place_order {
    width: 100% !important;
    margin-top: 28px !important;
    padding: 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    background: var(--color-accent) !important;
    color: #ffffff !important;
    border-radius: 4px !important;
}

#place_order:hover {
    background: var(--color-accent-light) !important;
}

/* Privacy policy text — small, muted */
.woocommerce-privacy-policy-text {
    margin: 20px 0 0 !important;
}

.woocommerce-privacy-policy-text p {
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: var(--color-text-muted) !important;
    margin: 0 !important;
}

/* Form-row labels — minimal */
.woocommerce form .form-row label {
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--color-text-muted) !important;
    margin-bottom: 6px !important;
    font-weight: 500 !important;
}

/* Two-column first/last name */
.woocommerce form .form-row-first {
    width: 48% !important;
    margin-right: 4% !important;
    float: left !important;
    clear: left !important;
}

.woocommerce form .form-row-last {
    width: 48% !important;
    float: right !important;
    clear: right !important;
}

.woocommerce form .form-row-wide {
    clear: both !important;
}

/* Checkboxes (Create account, Ship to different address) — clean */
.woocommerce-form__label-for-checkbox,
label.checkbox {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--color-text-secondary) !important;
    font-weight: 500 !important;
}

/* ============================================
   POLISH PASS 6 — Fix stuck spinner, right-align icons, kill CusRev
   ============================================ */

/* Kill the stuck blockUI loading overlay that WC leaves on the product row.
   It often gets stuck visible because the AJAX update completes but the
   overlay-removal JS doesn't fire reliably. */
.blockUI.blockOverlay,
.blockUI.blockMsg,
.woocommerce-checkout .blockUI,
.woocommerce-checkout-review-order .blockUI,
.woocommerce-checkout-review-order-table .blockUI {
    display: none !important;
    background: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Right-align payment method icons (Klarna badge, card logos, etc.) */
ul.payment_methods > li > label {
    justify-content: flex-start !important;
}

ul.payment_methods > li > label img {
    margin-left: auto !important;
    max-height: 22px !important;
    width: auto !important;
}

/* Klarna's "What is Klarna?" link — keep it next to the badge on the right */
ul.payment_methods > li > label a,
ul.payment_methods > li > label span.klarna-payments-katapult,
ul.payment_methods > li > label .what_is_klarna {
    margin-left: 8px !important;
    font-size: 12px !important;
}

/* Multiple icons (Credit Card row with Visa/MC/Amex/etc) — group them right */
ul.payment_methods > li > label img + img,
ul.payment_methods > li > label img + img + img,
ul.payment_methods > li > label img + img + img + img {
    margin-left: 4px !important;
}

/* For Credit Card, the icons appear inline after the label text.
   Force a wrapper or use flexbox to keep them grouped on the right. */
ul.payment_methods > li > label > * {
    flex-shrink: 0;
}

/* Hide CusRev review opt-in — broader selectors */
.cr_qcwc_optin-form,
.cr_qcwc-form-row,
.cr_qcwc,
p.cr_qcwc_optin-form,
.form-row.cr_qcwc_optin-form,
.woocommerce-checkout .cr_qcwc,
.woocommerce-checkout p.form-row[class*="cr_qcwc"],
.form-row[class*="cusrev"],
.form-row[class*="cr_qcwc"],
.form-row[id*="cusrev"],
.form-row[id*="cr_qcwc"],
input[id*="cr_qcwc_optin"],
input[id*="cusrev_optin"],
input[name*="cr_qcwc_optin"],
input[name*="cusrev_optin"],
label[for*="cr_qcwc"],
label[for*="cusrev"],
.woocommerce-checkout .form-row:has(input[id*="cr_qcwc"]),
.woocommerce-checkout .form-row:has(input[id*="cusrev"]) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* ============================================
   POLISH PASS 7 — Compact density to match user's other WC site
   Goal: tight rows, less visual weight, more text-driven less image-heavy
   ============================================ */

/* Tighter padding on order summary rows */
.woocommerce-checkout-review-order-table tbody tr.cart_item td.product-name,
.woocommerce-checkout-review-order-table tbody tr.cart_item td.product-total {
    padding: 10px 0 !important;
    font-size: 14px !important;
}

/* Smaller product thumbnail — 36px to match compact reference */
.bhs-order-thumb-wrap {
    width: 36px !important;
    height: 36px !important;
    margin-right: 10px;
    border-radius: 3px;
}

.bhs-order-thumb-wrap img,
.bhs-order-thumb-wrap .bhs-order-thumb-inline,
.woocommerce-checkout-review-order-table .product-name img {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    border-radius: 3px;
}

.bhs-order-name-wrap {
    font-size: 14px !important;
    font-weight: 500;
}

/* Tighter totals rows */
#order_review table.shop_table tfoot th,
#order_review table.shop_table tfoot td,
.bhs-order-review table.shop_table tfoot th,
.bhs-order-review table.shop_table tfoot td {
    padding: 8px 0 !important;
    font-size: 13px !important;
}

#order_review table.shop_table tfoot tr.order-total th,
#order_review table.shop_table tfoot tr.order-total td,
.bhs-order-review table.shop_table tfoot tr.order-total th,
.bhs-order-review table.shop_table tfoot tr.order-total td {
    padding: 14px 0 !important;
    font-size: 16px !important;
}

/* Tighter payment method rows */
ul.payment_methods {
    margin: 16px 0 0 !important;
}

ul.payment_methods > li {
    padding: 10px 0 !important;
    gap: 10px !important;
}

ul.payment_methods > li > label {
    font-size: 13px !important;
}

/* Smaller payment icons */
ul.payment_methods > li > label img {
    max-height: 18px !important;
}

/* Tighter form fields — less vertical padding */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="password"],
body input[type="number"],
body input[type="search"],
body input[type="url"],
body select,
body textarea,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce select,
.woocommerce textarea {
    padding: 11px 12px !important;
    font-size: 14px !important;
}

/* Tighter form row spacing */
.woocommerce form .form-row {
    margin-bottom: 10px !important;
}

/* Tighter section spacing */
#customer_details > div,
#customer_details .woocommerce-billing-fields,
#customer_details .woocommerce-shipping-fields,
#customer_details .woocommerce-additional-fields {
    margin-bottom: 24px !important;
}

#customer_details h3,
#order_review_heading {
    margin: 0 0 14px !important;
    padding-bottom: 8px !important;
}

/* Payment box (expanded — Acima logo, etc) — tighter */
ul.payment_methods > li > .payment_box {
    padding: 10px 12px !important;
    margin: 8px 0 0 !important;
    font-size: 13px !important;
}

/* NOTE: PASS 6 #place_order block removed — all three properties
   (margin-top, padding, font-size) are re-set with !important by PASS 9
   below (which also adds letter-spacing). 100% shadowed. */

/* ============================================
   POLISH PASS 8 — Kill redundant table header + close vertical gap
   ============================================ */

/* Aggressively hide the table's Product / Subtotal thead row */
.woocommerce-checkout-review-order-table thead,
.woocommerce-checkout-review-order-table > thead,
#order_review table thead,
#order_review .shop_table thead,
.bhs-order-review table thead,
.bhs-order-review .shop_table thead {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}
/* NOTE: removed unscoped `table.shop_table thead` rule that was nuking the
   orders-table headers on /my-account/orders. Hide is now checkout-scoped. */

/* Hide the visible row even if display:none is overridden — collapse the row */
.woocommerce-checkout-review-order-table thead tr,
.woocommerce-checkout-review-order-table thead th {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    visibility: hidden !important;
    line-height: 0 !important;
}

/* Fix the vertical gap between "YOUR ORDER" and the order table.
   Override the grid-row assignments — let them flow naturally in column 2. */
@media (min-width: 992px) {
    .woocommerce-checkout #order_review_heading {
        grid-column: 2 !important;
        grid-row: auto !important;
        margin: 0 0 14px !important;
    }

    .woocommerce-checkout #order_review,
    .woocommerce-checkout .bhs-order-review {
        grid-column: 2 !important;
        grid-row: auto !important;
        position: relative !important;
        top: auto !important;
        align-self: start !important;
        margin-top: 0 !important;
    }

    /* customer_details stays in column 1, spanning rows */
    .woocommerce-checkout #customer_details {
        grid-column: 1 !important;
        grid-row: 1 / span 10 !important;
    }
}

/* Strip top padding/margin on the order review so it sits flush with heading */
#order_review > *:first-child,
.bhs-order-review > *:first-child {
    margin-top: 0 !important;
}

/* Ensure the table starts immediately after the heading */
#order_review .shop_table,
.bhs-order-review .shop_table {
    margin-top: 0 !important;
}

/* Tighten the first row of the order table */
.woocommerce-checkout-review-order-table tbody tr:first-child td {
    padding-top: 0 !important;
    border-top: none !important;
}

/* ============================================
   POLISH PASS 9 — Compact everything (matching user's reference)
   Note: was originally labeled "PASS 7" in source — renumbered to
   reflect actual cascade position (after PASS 8).
   ============================================ */

/* Restore the PRODUCT/SUBTOTAL thead row */
#order_review table.shop_table thead,
.bhs-order-review table.shop_table thead {
    display: table-header-group !important;
}

#order_review table.shop_table thead th,
.bhs-order-review table.shop_table thead th {
    padding: 0 0 10px !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    color: var(--color-text-primary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: capitalize !important;
    background: transparent !important;
}

/* Compact product row */
.woocommerce-checkout-review-order-table tbody tr.cart_item td.product-name,
.woocommerce-checkout-review-order-table tbody tr.cart_item td.product-total {
    padding: 12px 0 !important;
}

/* Compact tfoot rows — minimal padding, hairline separators */
#order_review table.shop_table tfoot tr,
.bhs-order-review table.shop_table tfoot tr {
    border-bottom: 1px solid var(--color-border) !important;
}

#order_review table.shop_table tfoot th,
#order_review table.shop_table tfoot td,
.bhs-order-review table.shop_table tfoot th,
.bhs-order-review table.shop_table tfoot td {
    padding: 10px 0 !important;
    font-size: 13px !important;
    border-top: none !important;
}

#order_review table.shop_table tfoot tr.order-total th,
#order_review table.shop_table tfoot tr.order-total td,
.bhs-order-review table.shop_table tfoot tr.order-total th,
.bhs-order-review table.shop_table tfoot tr.order-total td {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-top: 1px solid var(--color-border-light) !important;
    border-bottom: none !important;
}

/* Even more compact payment rows */
ul.payment_methods > li {
    padding: 10px 0 !important;
    border-bottom: none !important;
    grid-template-columns: 24px 1fr !important;
    gap: 8px !important;
}

ul.payment_methods > li:first-child {
    border-top: none !important;
}

ul.payment_methods > li > label {
    font-size: 13px !important;
}

ul.payment_methods > li > .payment_box {
    margin: 8px 0 0 !important;
    padding: 12px !important;
    background: var(--color-bg-card) !important;
    font-size: 13px !important;
}

/* Tighten PAYMENT section header */
#payment::before {
    margin: 24px 0 0 !important;
    padding: 0 0 10px !important;
}

/* Smaller place order button */
#place_order,
button#place_order,
.woocommerce-checkout #place_order {
    margin-top: 20px !important;
    padding: 14px !important;
    font-size: 13px !important;
    letter-spacing: 1.5px !important;
}

/* Tighter section spacing in customer_details */
#customer_details > div,
#customer_details .woocommerce-billing-fields,
#customer_details .woocommerce-shipping-fields,
#customer_details .woocommerce-additional-fields {
    margin-bottom: 28px !important;
}

/* Tighter form rows */
.woocommerce form .form-row {
    margin-bottom: 12px !important;
}

/* Compact section dividers — section headers smaller padding */
#customer_details h3,
#customer_details .woocommerce-billing-fields h3,
#customer_details .woocommerce-shipping-fields h3,
#customer_details .woocommerce-additional-fields h3,
#order_review_heading {
    margin: 0 0 14px !important;
    padding: 0 0 10px !important;
    font-size: 11px !important;
}

/* Compact inputs */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="password"],
body input[type="number"],
body input[type="search"],
body input[type="url"],
body select,
body textarea,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce select,
.woocommerce textarea {
    padding: 12px !important;
    font-size: 14px !important;
}

/* Returning customer / coupon notices — even tighter */
.woocommerce-form-login-toggle,
.woocommerce-form-coupon-toggle {
    margin-bottom: 16px !important;
}

/* ============================================
   POLISH PASS 10 — Kill duplicate product thumbnails in order summary
   When multiple of the same item are in cart, having two thumbnails
   render next to each other looks weird. The template no longer renders
   a dedicated thumbnail TD, but plugins may still inject <img> tags via
   the woocommerce_cart_item_name filter — defensively hide any leftover
   imgs in the product-name cell so the row stays text-only.
   ============================================ */

.woocommerce-checkout-review-order-table .product-name img,
.bhs-order-thumb,
.bhs-order-thumb-wrap {
    display: none !important;
}

/* ============================================
   POLISH PASS 11 — Restore normal table-row layout for shipping
   Earlier passes set tr.shipping (and its cells) to display:block to
   stack "Shipment" label above options when the sidebar was 420px wide.
   That broke the table's column-width calc for the next row's
   border-top, causing the divider under Free Shipping to render short.
   With the sidebar now 520px, side-by-side th/td fits fine — revert
   to normal table-row so the cascade-default border-top spans full
   width again.
   ============================================ */

#order_review table.shop_table tr.shipping,
#order_review table.shop_table tr.woocommerce-shipping-totals,
.woocommerce-checkout-review-order-table tr.shipping,
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
    display: table-row !important;
}

#order_review table.shop_table tr.shipping th,
#order_review table.shop_table tr.shipping td,
#order_review table.shop_table tr.woocommerce-shipping-totals th,
#order_review table.shop_table tr.woocommerce-shipping-totals td,
.woocommerce-checkout-review-order-table tr.shipping th,
.woocommerce-checkout-review-order-table tr.shipping td {
    display: table-cell !important;
    width: auto !important;
    border-top: 1px solid var(--color-border) !important;
    padding: 8px 0 !important;
}

#order_review table.shop_table tr.shipping th,
#order_review table.shop_table tr.woocommerce-shipping-totals th {
    text-align: left !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    color: var(--color-text-secondary) !important;
}

#order_review table.shop_table tr.shipping td,
#order_review table.shop_table tr.woocommerce-shipping-totals td {
    text-align: right !important;
    color: var(--color-text-primary) !important;
    font-size: 13px !important;
}

/* If multi-option shipping (radios in a list), keep them on the right but
   allow vertical stacking inside the cell — no flex constraints that
   force the label to nowrap. */
#order_review tr.shipping ul#shipping_method,
#order_review tr.shipping ul.woocommerce-shipping-methods {
    text-align: left !important;
    margin: 0 !important;
}

#order_review tr.shipping ul#shipping_method li label,
#order_review tr.shipping ul.woocommerce-shipping-methods li label {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* ============================================
   POLISH PASS 12 — WCAG 2.1 AA accessibility additions (2026-05-16)
   Three additions from the static a11y audit:
   1. Skip-to-content link (WCAG 2.4.1 Bypass Blocks) — visually
      hidden until keyboard-focused, then visible top-left so users
      can skip past the sticky header + nav directly to main content.
   2. Visible focus indicators (WCAG 2.4.7) — earlier passes set
      `outline: none !important` on inputs/buttons. Restore a visible
      accent outline on :focus-visible so keyboard users see where
      focus lands. Mouse users keep the clean look (:focus-visible
      doesn't trigger on click).
   3. Honor prefers-reduced-motion (WCAG 2.3.3, treated as table-stakes).
   ============================================ */

/* Screen-reader-only utility — for content that should be announced to
   AT but not visible (table captions, supplementary form instructions). */
.bhs-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Skip link — visually hidden until focused */
.bhs-skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: 100000;
    padding: 10px 16px;
    background: var(--color-accent);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: top 0.15s ease;
}
.bhs-skip-link:focus,
.bhs-skip-link:focus-visible {
    top: 8px;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    color: #ffffff;
}

/* Restore visible focus indicators for keyboard users on inputs,
   buttons, and nav links. :focus-visible only matches keyboard focus
   (Tab navigation), not mouse clicks, so the clean look is preserved
   for sighted mouse users. */
.bhs-main input:focus-visible,
.bhs-main select:focus-visible,
.bhs-main textarea:focus-visible,
.woocommerce input:focus-visible,
.woocommerce select:focus-visible,
.woocommerce textarea:focus-visible,
.bhs-main button:focus-visible,
.woocommerce button:focus-visible {
    outline: 2px solid var(--color-accent) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(200, 85, 58, 0.2) !important;
}

/* Header + footer link focus — give nav links a visible focus ring
   for keyboard users. */
.bhs-header a:focus-visible,
.bhs-nav-link:focus-visible {
    outline: 2px solid var(--color-accent) !important;
    outline-offset: 4px !important;
    border-radius: 2px;
}

/* Dropdown link focus — visible target inside open dropdown panels. */
.bhs-nav-dropdown-inner a:focus,
.bhs-nav-dropdown-inner a:focus-visible {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--color-text-primary) !important;
    outline: 2px solid var(--color-accent) !important;
    outline-offset: -2px !important;
}

/* Honor prefers-reduced-motion — kill non-essential transitions for
   users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   MY-ACCOUNT SUBPAGES — extending coverage beyond the dashboard
   Covers: orders list, view-order detail, addresses, edit-account,
   edit-address, downloads, payment methods, lost-password.
   ============================================ */

/* Greeting + intro paragraphs at top of subpages */
.woocommerce-MyAccount-content > p:first-of-type {
    color: var(--color-text-secondary) !important;
    font-size: 14px !important;
    margin: 0 0 20px !important;
}

.woocommerce-MyAccount-content > p:first-of-type strong {
    color: var(--color-text-primary) !important;
}

/* Subpage section headings */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--color-text-primary) !important;
    margin: 0 0 20px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}

/* ----- Orders table ----- */
.woocommerce-orders-table,
table.my_account_orders,
.woocommerce-MyAccount-downloads,
.woocommerce-MyAccount-paymentMethods {
    background: transparent !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 6px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin: 0 0 24px !important;
    overflow: hidden;
}

.woocommerce-orders-table thead th,
table.my_account_orders thead th,
.woocommerce-MyAccount-downloads thead th,
.woocommerce-MyAccount-paymentMethods thead th {
    background: var(--color-bg-surface) !important;
    color: var(--color-text-secondary) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 12px 14px !important;
    text-align: left !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}

.woocommerce-orders-table tbody td,
table.my_account_orders tbody td,
.woocommerce-MyAccount-downloads tbody td,
.woocommerce-MyAccount-paymentMethods tbody td {
    padding: 14px !important;
    color: var(--color-text-primary) !important;
    font-size: 13px !important;
    border-top: 1px solid var(--color-border) !important;
    background: transparent !important;
    vertical-align: middle !important;
}

.woocommerce-orders-table tbody tr:first-child td,
table.my_account_orders tbody tr:first-child td {
    border-top: none !important;
}

.woocommerce-orders-table tbody tr:hover td,
table.my_account_orders tbody tr:hover td {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Order number column — make the number a clear accent link */
.woocommerce-orders-table__cell-order-number a,
table.my_account_orders .order-number a {
    color: var(--color-accent-light) !important;
    font-weight: 600 !important;
}

.woocommerce-orders-table__cell-order-number a:hover,
table.my_account_orders .order-number a:hover {
    color: var(--color-accent) !important;
}

/* Order action buttons (View / Pay / Cancel) */
.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-orders-table__cell-order-actions a.button,
table.my_account_orders .order-actions .button {
    padding: 6px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    margin: 0 2px !important;
    background: var(--color-bg-card) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border-light) !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    border-radius: 3px !important;
}

.woocommerce-orders-table__cell-order-actions .button:hover,
table.my_account_orders .order-actions .button:hover {
    background: var(--color-bg-card-hover) !important;
    border-color: var(--color-accent) !important;
}

/* "Pay" button — make accent so it stands out */
.woocommerce-orders-table__cell-order-actions .button.pay,
table.my_account_orders .order-actions .button.pay {
    background: var(--color-accent) !important;
    color: #ffffff !important;
    border-color: var(--color-accent) !important;
}

.woocommerce-orders-table__cell-order-actions .button.pay:hover,
table.my_account_orders .order-actions .button.pay:hover {
    background: var(--color-accent-light) !important;
    border-color: var(--color-accent-light) !important;
}

/* ----- Order status badges (status- classes WC injects) -----
   ONLY target the mark element. Do NOT include the TD selector
   (.woocommerce-orders-table__cell-order-status) — applying inline-block
   + border to the TD makes the TD shrink-wrap and draw a box around
   the badge. Mark gets the styling; TD stays a plain table cell. */
.woocommerce-orders-table__cell-order-status mark,
mark.order-status {
    display: inline-block !important;
    background: var(--color-bg-card) !important;
    color: var(--color-text-secondary) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 4px 10px !important;
    border-radius: 3px !important;
    border: 1px solid var(--color-border-light) !important;
    line-height: 1.4 !important;
}

mark.order-status.status-completed,
.status-completed mark {
    background: rgba(67, 160, 71, 0.12) !important;
    color: #6dc36e !important;
    border-color: rgba(67, 160, 71, 0.3) !important;
}

mark.order-status.status-processing,
.status-processing mark {
    background: rgba(200, 85, 58, 0.12) !important;
    color: var(--color-accent-light) !important;
    border-color: rgba(200, 85, 58, 0.3) !important;
}

mark.order-status.status-on-hold,
.status-on-hold mark {
    background: rgba(201, 168, 76, 0.12) !important;
    color: #d4b85c !important;
    border-color: rgba(201, 168, 76, 0.3) !important;
}

mark.order-status.status-cancelled,
mark.order-status.status-failed,
mark.order-status.status-refunded,
.status-cancelled mark,
.status-failed mark,
.status-refunded mark {
    background: rgba(232, 78, 31, 0.12) !important;
    color: #e84e1f !important;
    border-color: rgba(232, 78, 31, 0.3) !important;
}

/* ----- Addresses page (billing + shipping side by side) -----
   Uses the same flex+explicit-width pattern as #customer_login because
   the same WC layout quirks apply here. */
body .woocommerce .woocommerce-Addresses,
body .woocommerce .woocommerce-Addresses.u-columns,
body .woocommerce .woocommerce-Addresses.col2-set {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    width: 100% !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

@media (min-width: 768px) {
    body .woocommerce .woocommerce-Addresses,
    body .woocommerce .woocommerce-Addresses.u-columns,
    body .woocommerce .woocommerce-Addresses.col2-set {
        flex-direction: row !important;
        align-items: stretch !important;
    }
}

body .woocommerce-Addresses .u-column1,
body .woocommerce-Addresses .u-column2,
body .woocommerce-Addresses .col-1,
body .woocommerce-Addresses .col-2 {
    flex: 1 1 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.woocommerce-Address {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 6px !important;
    padding: 24px !important;
}

.woocommerce-Address-title {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 16px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid var(--color-border) !important;
}

.woocommerce-Address-title h3 {
    font-family: var(--font-display) !important;
    font-size: 18px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--color-text-primary) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.woocommerce-Address-title .edit {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--color-accent-light) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.woocommerce-Address-title .edit:hover {
    color: var(--color-accent) !important;
}

.woocommerce-Address address {
    color: var(--color-text-secondary) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    font-style: normal !important;
    margin: 0 !important;
}

/* ----- Edit-account / edit-address forms ----- */
.woocommerce-EditAccountForm fieldset,
.woocommerce-address fieldset {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 6px !important;
    padding: 24px !important;
    margin: 0 0 20px !important;
}

.woocommerce-EditAccountForm fieldset legend,
.woocommerce-address fieldset legend {
    font-family: var(--font-display) !important;
    font-size: 16px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--color-text-primary) !important;
    padding: 0 8px !important;
    margin: 0 !important;
}

/* ----- Lost-password form (when shown via /my-account/lost-password) ----- */
.woocommerce-ResetPassword.lost_reset_password {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 6px !important;
    padding: 24px !important;
    max-width: 480px !important;
    margin: 0 auto !important;
}

.woocommerce-ResetPassword.lost_reset_password p {
    color: var(--color-text-secondary) !important;
    font-size: 14px !important;
}

/* ----- Downloads table — empty state ----- */
.woocommerce-MyAccount-downloads-file .button {
    padding: 6px 14px !important;
    font-size: 11px !important;
}

/* ----- Payment methods table ----- */
.woocommerce-MyAccount-paymentMethods .button.delete {
    background: transparent !important;
    color: var(--color-text-muted) !important;
    border: 1px solid var(--color-border-light) !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
}

.woocommerce-MyAccount-paymentMethods .button.delete:hover {
    color: #e84e1f !important;
    border-color: rgba(232, 78, 31, 0.4) !important;
}

/* "Add payment method" link below the table */
.woocommerce-MyAccount-content a.button {
    margin-top: 16px !important;
}

/* ----- View-order page (single order detail) ----- */
.woocommerce-order-details,
.woocommerce-customer-details {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 6px !important;
    padding: 24px !important;
    margin: 0 0 24px !important;
}

.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
    font-family: var(--font-display) !important;
    font-size: 18px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--color-text-primary) !important;
    margin: 0 0 16px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid var(--color-border) !important;
}

.woocommerce-table--order-details {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}

.woocommerce-table--order-details thead th,
.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
    background: transparent !important;
    color: var(--color-text-secondary) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 8px 0 !important;
    border-top: 1px solid var(--color-border) !important;
}

.woocommerce-table--order-details tbody td {
    padding: 12px 0 !important;
    border-top: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
    color: var(--color-text-primary) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    border-top: 1px solid var(--color-border-light) !important;
    padding-top: 14px !important;
}

/* ============================================
   /order-received polish — Rosetta-inspired layout adapted to dark
   theme. Big "Order Received" heading, refined metadata strip,
   product items with thumbnails, side-by-side addresses.
   ============================================ */

/* Big "Order Received" entry heading from page title */
body.woocommerce-checkout .bhs-page-title,
body.woocommerce-order-received .bhs-page-title,
body.page-id-7 .bhs-page-title /* checkout page */ {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 8px 0 12px;
}

/* Hide page title only on the checkout form page (we already do this
   via #cart and dealer pages). Keep it visible on /order-received. */

/* Order-line product row with thumbnail */
.bhs-order-line .bhs-order-line-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.bhs-order-line .bhs-order-line-thumb {
    flex: 0 0 64px;
    display: block;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--color-bg-card-hover);
    border: 1px solid var(--color-border-light);
}

.bhs-order-line .bhs-order-line-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bhs-order-line .bhs-order-line-info {
    flex: 1 1 auto;
    min-width: 0;
}

.bhs-order-line .bhs-order-line-name {
    color: var(--color-accent-light) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    display: block;
    line-height: 1.4;
}

.bhs-order-line .bhs-order-line-name:hover {
    color: var(--color-accent) !important;
    text-decoration: none !important;
}

.bhs-order-line .bhs-order-line-qty {
    color: var(--color-text-secondary) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    display: inline-block;
    margin-top: 4px;
}

/* Side-by-side billing + shipping addresses on /order-received and
   /my-account/view-order. Default WC stacks them; this is more
   space-efficient and matches the WC default thank-you layout. */
.woocommerce-customer-details .col2-set,
.woocommerce-customer-details > .columns,
.woocommerce-order-details + .woocommerce-customer-details,
.woocommerce-order-received .woocommerce-customer-details > .col2-set {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

.woocommerce-customer-details .col-1,
.woocommerce-customer-details .col-2,
.woocommerce-customer-details .woocommerce-column {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 768px) {
    .woocommerce-customer-details .col2-set,
    .woocommerce-customer-details > .columns,
    .woocommerce-order-details + .woocommerce-customer-details,
    .woocommerce-order-received .woocommerce-customer-details > .col2-set {
        grid-template-columns: 1fr !important;
    }
}

/* Order overview — top strip on /order-received showing order #/date/
   email/total/payment method. minmax(140px) was too narrow — long
   emails wrap mid-domain awkwardly. Bump to 180px so the grid wraps
   to two rows on narrower viewports rather than squeezing each
   column. */
.woocommerce-order-overview {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 20px 24px !important;
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 6px !important;
    padding: 20px 24px !important;
}

.woocommerce-order-overview li {
    border: none !important;
    padding: 0 !important;
    color: var(--color-text-secondary) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
    min-width: 0 !important;
}

.woocommerce-order-overview li strong {
    display: block !important;
    color: var(--color-text-primary) !important;
    font-size: 16px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
    /* Allow long email/order-number values to wrap naturally instead
       of breaking mid-character or overflowing the column. */
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    word-break: break-word !important;
}

/* ----- "No orders yet" / empty-state notices ----- */
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-message {
    margin: 0 0 24px !important;
}

.woocommerce-MyAccount-content .woocommerce-Button.button {
    background: var(--color-accent) !important;
    color: #ffffff !important;
}

/* ----- Pagination on orders list ----- */
.woocommerce-pagination,
.woocommerce-Pagination {
    margin: 24px 0 !important;
    text-align: center !important;
}

.woocommerce-pagination ul,
.woocommerce-Pagination ul {
    display: inline-flex !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 4px !important;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span,
.woocommerce-Pagination ul li a,
.woocommerce-Pagination ul li span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 4px !important;
    color: var(--color-text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    background: var(--color-bg-card) !important;
}

.woocommerce-pagination ul li span.current,
.woocommerce-Pagination ul li span.current {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #ffffff !important;
}

/* ----- Account dashboard — tighten the WC-injected p > a actions row ----- */
.woocommerce-MyAccount-content > p > a {
    color: var(--color-accent-light) !important;
    font-weight: 500 !important;
}

/* ============================================
   /MY-ACCOUNT — LOGGED-OUT (Login + Register columns)
   Targets WC's #customer_login.u-columns wrapper containing two forms:
   .woocommerce-form-login and .woocommerce-form-register.
   ============================================ */

/* Force the WC wrapper to be a normal full-width block (some plugins / WC defaults
   give it inline-block or flex that shrinks children to content width). */
.bhs-main .woocommerce,
.bhs-container > .woocommerce,
body .woocommerce {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

/* Two cards side-by-side, both centered together as a group.
   Stacks vertically on mobile. */
body .woocommerce #customer_login,
body .woocommerce #customer_login.u-columns,
body .woocommerce #customer_login.col2-set,
.bhs-main #customer_login.u-columns {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (min-width: 768px) {
    body .woocommerce #customer_login,
    body .woocommerce #customer_login.u-columns,
    body .woocommerce #customer_login.col2-set,
    .bhs-main #customer_login.u-columns {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 48px !important;
    }
}

/* Column wrappers — fixed width matching the card; no flex grow */
body #customer_login .u-column1,
body #customer_login .u-column2,
body #customer_login .col-1,
body #customer_login .col-2 {
    flex: 0 0 auto !important;
    width: 420px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    float: none !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Login / Register section headers */
#customer_login h2 {
    font-family: var(--font-display) !important;
    font-size: 24px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--color-text-primary) !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: none !important;
}

/* The forms themselves — wrap each in a dark card.
   Match the wp-login.php card width (420px) for visual parity.
   IMPORTANT: scope to body.woocommerce-account so this doesn't fire on
   /checkout where WC adds inline style="display:none" to the login
   form (toggled visible only when "Click here to login" is clicked).
   The previous unscoped `display: block !important` was overriding
   that inline style and forcing the login form open on checkout. */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 6px !important;
    padding: 28px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
}

/* Checkout-page expanded login form (after clicking "Click here to
   login"). Matches the toggle-notice cards and the open coupon form
   so all three pieces of the checkout-top stack read as one family.
   No max-width — let it fill the checkout column like the coupon
   form does. */
body.woocommerce-checkout .woocommerce-form-login {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 6px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    box-shadow: none !important;
    color: var(--color-text-secondary) !important;
}

/* Section headers also constrained to the card width and centered above each card */
body #customer_login .u-column1 > h2,
body #customer_login .u-column2 > h2,
body #customer_login .col-1 > h2,
body #customer_login .col-2 > h2 {
    max-width: 420px !important;
    margin: 0 auto 16px !important;
    text-align: left !important;
}

/* Lost-password link — also constrained so it sits centered under the login card */
body #customer_login .u-column1 .woocommerce-LostPassword,
body #customer_login .col-1 .woocommerce-LostPassword {
    max-width: 420px !important;
    margin: 18px auto 0 !important;
}

/* Inputs inside login/register — bg-white wash so they contrast with the card bg */
.woocommerce-form-login input.input-text,
.woocommerce-form-register input.input-text,
.woocommerce-form-login input.woocommerce-Input,
.woocommerce-form-register input.woocommerce-Input,
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="password"],
.woocommerce-form-register input[type="email"] {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 4px !important;
    color: var(--color-text-primary) !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
}

.woocommerce-form-login input.input-text:focus,
.woocommerce-form-register input.input-text:focus,
.woocommerce-form-login input.woocommerce-Input:focus,
.woocommerce-form-register input.woocommerce-Input:focus {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 3px rgba(200, 85, 58, 0.06) !important;
    outline: none !important;
}

/* Autofill — kill Chrome/Edge lavender on these forms too */
.woocommerce-form-login input:-webkit-autofill,
.woocommerce-form-register input:-webkit-autofill,
.woocommerce-form-login input:-webkit-autofill:focus,
.woocommerce-form-register input:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 1000px var(--color-bg-card-hover) !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
    caret-color: var(--color-text-primary) !important;
    transition: background-color 0s 600000s, color 0s 600000s !important;
}

/* Form rows */
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row {
    display: block !important;
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
}

/* Form labels (small caps, secondary color, tracked) */
.woocommerce-form-login label,
.woocommerce-form-register label {
    display: block !important;
    color: var(--color-text-secondary) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 0 6px !important;
    line-height: 1.4 !important;
}

/* Required-asterisk handling */
.woocommerce-form-login label .required,
.woocommerce-form-register label .required {
    color: var(--color-accent) !important;
    text-decoration: none !important;
}

/* Remember-me row — checkbox + "Remember me" inline */
.woocommerce-form-login__rememberme {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--color-text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    margin-bottom: 16px !important;
}

.woocommerce-form-login__rememberme input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--color-accent) !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
}

.woocommerce-form-login__rememberme span {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 13px !important;
    color: var(--color-text-secondary) !important;
    font-weight: 500 !important;
}

/* Submit buttons — full width, accent, on their own line below everything else */
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
button.woocommerce-form-login__submit,
button.woocommerce-form-register__submit {
    display: block !important;
    width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 14px !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    background: var(--color-accent) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: background 0.15s ease !important;
}

.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover {
    background: var(--color-accent-light) !important;
    color: #ffffff !important;
}

/* Lost password link — centered below the login form */
.woocommerce-LostPassword,
.woocommerce-LostPassword.lost_password {
    text-align: center !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    width: 100% !important;
}

.woocommerce-LostPassword a,
.woocommerce-LostPassword.lost_password a {
    color: var(--color-text-secondary) !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.woocommerce-LostPassword a:hover,
.woocommerce-LostPassword.lost_password a:hover {
    color: var(--color-accent-light) !important;
}

/* hCaptcha widget — breathing room above and below */
.woocommerce-form-login .h-captcha,
.woocommerce-form-register .h-captcha {
    margin: 4px 0 16px !important;
    max-width: 100% !important;
}

/* Privacy policy text inside register form */
.woocommerce-form-register .woocommerce-privacy-policy-text {
    margin: 0 0 16px !important;
}

.woocommerce-form-register .woocommerce-privacy-policy-text p {
    color: var(--color-text-muted) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.woocommerce-form-register .woocommerce-privacy-policy-text a {
    color: var(--color-accent-light) !important;
    text-decoration: none !important;
}

.woocommerce-form-register .woocommerce-privacy-policy-text a:hover {
    color: var(--color-accent) !important;
    text-decoration: underline !important;
}

/* Hide WC's hidden inputs cleanly (they show as 1px lines in some themes) */
.woocommerce-form-login input[type="hidden"],
.woocommerce-form-register input[type="hidden"] {
    display: none !important;
}

/* WC notices on the login page */
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info {
    margin: 0 0 20px !important;
    list-style: none !important;
    padding: 12px 16px !important;
}

/* ============================================
   Suppress the woo-coupon-box "WANT COUPON" popup site-wide.
   Plugin uses .wcb-coupon-box for the modal and .wcb-md-overlay for the dim layer.
   ============================================ */
.wcb-coupon-box,
.wcb-md-overlay,
.wcb-coupon-box .wcb-md-content,
[class*="wcb-md-effect"],
[id^="wcb_popup"],
.woo-coupon-box-overlay,
div.wcb-coupon-box-newsletter,
.wcb-newsletter {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Defensive: kill body classes the plugin adds when popup is open */
body.wcb-popup-open,
body.wcb-modal-open {
    overflow: auto !important;
}

/* ============================================
   PREMIUM POLISH — /my-account section
   Elevate the dashboard, orders, addresses, payment methods to feel
   continuous with the storefront's premium aesthetic.
   ============================================ */

/* ----- The MyAccount layout shell — flex with explicit widths ----- */
/* Hide WC's empty notices wrapper so it doesn't steal layout space */
body.woocommerce-account .woocommerce-notices-wrapper:empty {
    display: none !important;
}

@media (min-width: 768px) {
    body.woocommerce-account .woocommerce {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 40px !important;
        align-items: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation {
        flex: 0 0 240px !important;
        width: 240px !important;
        max-width: 240px !important;
        min-width: 0 !important;
    }

    body.woocommerce-account .woocommerce-MyAccount-content {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Notices: if non-empty, full-width above the row */
    body.woocommerce-account .woocommerce-notices-wrapper:not(:empty) {
        flex: 1 0 100% !important;
        order: -1 !important;
        margin-bottom: 16px !important;
    }
}

@media (max-width: 767px) {
    body.woocommerce-account .woocommerce {
        display: block !important;
    }

    body.woocommerce-account .woocommerce-MyAccount-navigation {
        margin-bottom: 24px !important;
    }
}

/* ----- Sidebar nav — more refined ----- */
.woocommerce-MyAccount-navigation ul {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 8px !important;
    padding: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.woocommerce-MyAccount-navigation li {
    border: none !important;
    margin: 0 !important;
}

.woocommerce-MyAccount-navigation li a {
    display: block !important;
    padding: 10px 14px !important;
    color: var(--color-text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.woocommerce-MyAccount-navigation li a:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--color-text-primary) !important;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a,
.woocommerce-MyAccount-navigation li[class*="is-active"] a {
    background: var(--color-accent) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ----- Content card — more padding, better shadow ----- */
.woocommerce-MyAccount-content {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 8px !important;
    padding: 32px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    box-sizing: border-box !important;
}

/* ----- Dashboard greeting — slight elevation ----- */
.woocommerce-MyAccount-content > p:first-of-type {
    color: var(--color-text-secondary) !important;
    font-size: 15px !important;
    margin: 0 0 24px !important;
    padding: 0 0 20px !important;
    border-bottom: 1px solid var(--color-border) !important;
    line-height: 1.6 !important;
}

.woocommerce-MyAccount-content > p:first-of-type strong {
    color: var(--color-text-primary) !important;
    font-weight: 600 !important;
}

/* ----- Orders table — better polish -----
   Use border-collapse: collapse so adjacent cell borders MERGE into
   one — removes any possibility of double-thick lines between rows.
   Rounded corners still work because overflow:hidden clips the inner
   borders to the table's border-radius. */
.woocommerce-orders-table,
table.my_account_orders {
    background: transparent !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

/* Explicitly show the orders-table header row (defends against any
   global `thead { display: none }` rule from elsewhere in the file) */
.woocommerce-orders-table thead,
table.my_account_orders thead,
.woocommerce-MyAccount-content .woocommerce-orders-table thead,
.woocommerce-MyAccount-content table.shop_table thead {
    display: table-header-group !important;
    visibility: visible !important;
    height: auto !important;
    background: transparent !important;
}

.woocommerce-orders-table thead tr,
table.my_account_orders thead tr,
.woocommerce-MyAccount-content table.shop_table thead tr {
    display: table-row !important;
    visibility: visible !important;
    height: auto !important;
}

.woocommerce-orders-table thead th,
table.my_account_orders thead th {
    padding: 14px 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--color-text-muted) !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    background: transparent !important;
}

.woocommerce-orders-table tbody tr,
table.my_account_orders tbody tr {
    transition: background 0.12s ease !important;
}

.woocommerce-orders-table tbody tr:hover,
table.my_account_orders tbody tr:hover {
    background: rgba(255, 255, 255, 0.025) !important;
}

.woocommerce-orders-table tbody td,
.woocommerce-orders-table tbody th,
table.my_account_orders tbody td,
table.my_account_orders tbody th {
    padding: 16px !important;
    color: var(--color-text-primary) !important;
    font-size: 14px !important;
    border-top: 1px solid var(--color-border-light) !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom: none !important;
    background: transparent !important;
    vertical-align: middle !important;
}

/* WC defaults a different border-top color on tbody th (color-mix of
   currentColor 20%). Order-number TH inherits accent-orange currentColor,
   which made its border-top tint orange — visually thicker/different from
   the gray TD borders. Force the same border-light color regardless of
   currentColor inheritance. */
.woocommerce table.shop_table tbody th,
.woocommerce-orders-table tbody th,
table.my_account_orders tbody th {
    border-top: 1px solid var(--color-border-light) !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom: none !important;
}

/* Remove any vertical lines from header cells. Single 1px border-bottom
   on header (the divider between header row and first data row).
   First-data-row's border-top is suppressed below to avoid border doubling. */
.woocommerce-orders-table thead th,
.woocommerce-orders-table thead td,
table.my_account_orders thead th,
table.my_account_orders thead td,
.woocommerce table.shop_table thead th {
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}

/* First data row: no top border (header's border-bottom is the divider) */
.woocommerce-orders-table tbody tr:first-child td,
table.my_account_orders tbody tr:first-child td,
.woocommerce-orders-table tbody tr:first-child th,
table.my_account_orders tbody tr:first-child th {
    border-top: none !important;
}

/* Order number — make it pop with accent + Bebas Neue feel */
.woocommerce-orders-table__cell-order-number,
table.my_account_orders .order-number,
td.woocommerce-orders-table__cell-order-number {
    font-family: var(--font-display) !important;
    font-size: 18px !important;
    letter-spacing: 1px !important;
}

.woocommerce-orders-table__cell-order-number a,
table.my_account_orders .order-number a {
    color: var(--color-accent-light) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.woocommerce-orders-table__cell-order-number a:hover {
    color: var(--color-accent) !important;
}

/* Date column — muted */
.woocommerce-orders-table__cell-order-date,
table.my_account_orders .order-date {
    color: var(--color-text-secondary) !important;
    font-size: 13px !important;
}

/* Total column — right-align, bold */
.woocommerce-orders-table__cell-order-total,
table.my_account_orders .order-total {
    color: var(--color-text-primary) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* ----- Status badges — vibrant, pill-shaped, semantic colors ----- */
.woocommerce-orders-table mark.order-status,
table.my_account_orders mark.order-status,
mark.order-status {
    display: inline-block !important;
    background: var(--color-bg-card) !important;
    color: var(--color-text-secondary) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    border: 1px solid var(--color-border-light) !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

/* Status badges — high-specificity semantic colors. Targeting the badge
   directly AND inside any nested span (WC sometimes wraps the label). */
body .woocommerce-orders-table mark.order-status.status-completed,
body table.my_account_orders mark.order-status.status-completed,
body mark.order-status.status-completed,
body mark.order-status.status-completed span {
    background: rgba(67, 160, 71, 0.18) !important;
    color: #7ed47f !important;
    border-color: rgba(67, 160, 71, 0.5) !important;
}

body .woocommerce-orders-table mark.order-status.status-processing,
body table.my_account_orders mark.order-status.status-processing,
body mark.order-status.status-processing,
body mark.order-status.status-processing span {
    background: rgba(200, 85, 58, 0.18) !important;
    color: var(--color-accent-light) !important;
    border-color: rgba(200, 85, 58, 0.5) !important;
}

body mark.order-status.status-on-hold,
body mark.order-status.status-pending,
body mark.order-status.status-on-hold span,
body mark.order-status.status-pending span {
    background: rgba(212, 184, 92, 0.18) !important;
    color: #e5cf78 !important;
    border-color: rgba(212, 184, 92, 0.5) !important;
}

body mark.order-status.status-cancelled,
body mark.order-status.status-failed,
body mark.order-status.status-refunded,
body mark.order-status.status-cancelled span,
body mark.order-status.status-failed span,
body mark.order-status.status-refunded span {
    background: rgba(232, 78, 31, 0.18) !important;
    color: #f08566 !important;
    border-color: rgba(232, 78, 31, 0.5) !important;
}

/* ----- Action buttons (View / Pay / Cancel) ----- */
.woocommerce-orders-table__cell-order-actions .button,
table.my_account_orders .order-actions .button,
.woocommerce-orders-table .button {
    padding: 7px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    background: transparent !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 4px !important;
    margin: 0 4px 0 0 !important;
    transition: all 0.15s ease !important;
}

.woocommerce-orders-table__cell-order-actions .button:hover,
table.my_account_orders .order-actions .button:hover {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #ffffff !important;
}

/* "Pay" gets accent fill since it's the primary action */
.woocommerce-orders-table__cell-order-actions .button.pay,
table.my_account_orders .order-actions .button.pay {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #ffffff !important;
}

.woocommerce-orders-table__cell-order-actions .button.pay:hover {
    background: var(--color-accent-light) !important;
    border-color: var(--color-accent-light) !important;
}

/* ============================================
   Page-numbered orders pagination (from our orders.php override)
   ============================================ */
.bhs-orders-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 28px 0 8px !important;
    flex-wrap: wrap !important;
}

.bhs-pagination-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--color-text-secondary) !important;
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

.bhs-pagination-link:not(.is-disabled):not(.bhs-pagination-current):hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-text-primary) !important;
}

.bhs-pagination-current {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #ffffff !important;
    cursor: default !important;
}

.bhs-pagination-prev,
.bhs-pagination-next {
    padding: 0 16px !important;
    gap: 6px !important;
}

.bhs-pagination-prev span,
.bhs-pagination-next span {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.bhs-pagination-link.is-disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}

.bhs-pagination-ellipsis {
    color: var(--color-text-muted) !important;
    padding: 0 4px !important;
    font-size: 14px !important;
    align-self: center !important;
}

/* Hide WC's default pagination if it ever leaks through */
.woocommerce-pagination--without-numbers {
    display: none !important;
}

/* ============================================
   Addresses cards — premium polish
   Normal block flow inside the card so content sits naturally below
   the title (no flex stretching the address element).
   ============================================ */
.woocommerce-Address {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 10px !important;
    padding: 32px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25) !important;
    height: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.woocommerce-Address:hover {
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

.woocommerce-Address-title {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 0 18px !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
}

.woocommerce-Address-title h3,
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: var(--color-text-primary) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    line-height: 1.1 !important;
    background: transparent !important;
}

.woocommerce-Address-title .edit {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: var(--color-accent-light) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
    white-space: nowrap !important;
}

.woocommerce-Address-title .edit:hover {
    color: var(--color-accent) !important;
}

.woocommerce-Address address {
    color: var(--color-text-secondary) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    font-style: normal !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
}

/* "The following addresses..." intro line */
.woocommerce-MyAccount-content > .myaccount-address-intro,
.woocommerce-MyAccount-content > p:has(+ .woocommerce-Addresses) {
    color: var(--color-text-secondary) !important;
    font-size: 14px !important;
    margin: 0 0 24px !important;
}

/* ============================================
   Payment methods — better card-like rows
   ============================================ */
.woocommerce-MyAccount-paymentMethods {
    border: 1px solid var(--color-border-light) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.woocommerce-MyAccount-paymentMethods tbody td {
    padding: 18px 20px !important;
    font-size: 14px !important;
}

.woocommerce-MyAccount-paymentMethods .button.delete {
    background: transparent !important;
    color: var(--color-text-muted) !important;
    border: 1px solid var(--color-border-light) !important;
    padding: 7px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    transition: all 0.15s ease !important;
}

.woocommerce-MyAccount-paymentMethods .button.delete:hover {
    color: #f08566 !important;
    border-color: rgba(232, 78, 31, 0.5) !important;
    background: rgba(232, 78, 31, 0.08) !important;
}

/* "Default" badge on payment methods */
.woocommerce-PaymentMethod-actions .button,
.woocommerce-MyAccount-paymentMethods .default {
    background: rgba(67, 160, 71, 0.15) !important;
    color: #7ed47f !important;
    border: 1px solid rgba(67, 160, 71, 0.4) !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

/* "Add payment method" button */
.woocommerce-MyAccount-content a.woocommerce-button.button,
.woocommerce-MyAccount-content > a.button {
    display: inline-block !important;
    margin-top: 20px !important;
    background: var(--color-accent) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 24px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    transition: background 0.15s ease !important;
    text-decoration: none !important;
}

.woocommerce-MyAccount-content a.woocommerce-button.button:hover {
    background: var(--color-accent-light) !important;
}

/* ============================================
   Empty states (no orders / no payment methods etc.)
   ============================================ */
.bhs-empty-state {
    text-align: center !important;
    padding: 48px 24px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px dashed var(--color-border-light) !important;
    border-radius: 8px !important;
    border-left: 1px dashed var(--color-border-light) !important;
}

.bhs-empty-state-title {
    font-family: var(--font-display) !important;
    font-size: 24px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--color-text-primary) !important;
    margin: 0 0 8px !important;
}

.bhs-empty-state-text {
    color: var(--color-text-secondary) !important;
    font-size: 14px !important;
    margin: 0 0 24px !important;
}

.bhs-empty-state-cta {
    display: inline-block !important;
    background: var(--color-accent) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px 28px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
}

.bhs-empty-state-cta:hover {
    background: var(--color-accent-light) !important;
}

/* ============================================
   FINAL OVERRIDES — guarantee these rules win the cascade
   Earlier sections of this file have ~3 duplicate definitions of the
   address card and status badge that conflict with each other. Rather
   than de-dupe inline (high regression risk), this block at the very end
   uses maximum-specificity selectors so the cascade always lands here.
   ============================================ */

/* ----- Address card — equal heights, fills its parent column ----- */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
    height: 100% !important;
    min-height: 0 !important;
    padding: 28px !important;
    display: block !important;
    border-radius: 10px !important;
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25) !important;
    box-sizing: border-box !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 0 18px !important;
    padding: 0 0 16px !important;
    border: none !important;
    border-bottom: 1px solid var(--color-border) !important;
    background: transparent !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3 {
    font-family: var(--font-display) !important;
    font-size: 22px !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: var(--color-text-primary) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    line-height: 1.1 !important;
    background: transparent !important;
}

/* The <address> element — kill the leftover flex from earlier rules */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address {
    display: block !important;
    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--color-text-secondary) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    font-style: normal !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Parent stretching — let cards size naturally instead of equal-height */
body .woocommerce-Addresses .col-1,
body .woocommerce-Addresses .col-2,
body .woocommerce-Addresses .u-column1,
body .woocommerce-Addresses .u-column2 {
    align-self: flex-start !important;
}

/* ----- Order status badges — pill shape + semantic colors ----- */
body .woocommerce-MyAccount-content mark.order-status,
body .woocommerce-orders-table mark.order-status,
body .woocommerce-orders-table__cell-order-status mark {
    display: inline-block !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    border-width: 1px !important;
    border-style: solid !important;
    white-space: nowrap !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border-light) !important;
}

body .woocommerce-MyAccount-content mark.order-status.status-completed,
body .woocommerce-MyAccount-content mark.status-completed {
    background: rgba(67, 160, 71, 0.20) !important;
    color: #7ed47f !important;
    border-color: rgba(67, 160, 71, 0.55) !important;
}

body .woocommerce-MyAccount-content mark.order-status.status-processing,
body .woocommerce-MyAccount-content mark.status-processing {
    background: rgba(200, 85, 58, 0.20) !important;
    color: #f0937a !important;
    border-color: rgba(200, 85, 58, 0.55) !important;
}

body .woocommerce-MyAccount-content mark.order-status.status-on-hold,
body .woocommerce-MyAccount-content mark.order-status.status-pending,
body .woocommerce-MyAccount-content mark.status-on-hold,
body .woocommerce-MyAccount-content mark.status-pending {
    background: rgba(212, 184, 92, 0.20) !important;
    color: #e5cf78 !important;
    border-color: rgba(212, 184, 92, 0.55) !important;
}

body .woocommerce-MyAccount-content mark.order-status.status-cancelled,
body .woocommerce-MyAccount-content mark.order-status.status-failed,
body .woocommerce-MyAccount-content mark.order-status.status-refunded,
body .woocommerce-MyAccount-content mark.status-cancelled,
body .woocommerce-MyAccount-content mark.status-failed,
body .woocommerce-MyAccount-content mark.status-refunded {
    background: rgba(232, 78, 31, 0.20) !important;
    color: #f08566 !important;
    border-color: rgba(232, 78, 31, 0.55) !important;
}

/* The span inside the mark — inherit colors so the text picks up our colors */
body .woocommerce-MyAccount-content mark.order-status span {
    color: inherit !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
}

/* ============================================
   /dealer-inventory — login form (dealer-inventory-viewer-1 plugin)
   The plugin's div_dealer_inventory_shortcode() emits hardcoded inline
   styles + onfocus/onmouseover JS handlers. None of those use !important,
   so class rules with !important win the cascade — including against the
   JS-set inline styles (JS sets style.borderColor without !important).
   ============================================ */

.dealer-login-container.dealer-login-container {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
    color: var(--color-text-primary) !important;
    max-width: 440px !important;
    margin: 60px auto !important;
    padding: 40px !important;
}

.dealer-login-container h2 {
    color: var(--color-text-primary) !important;
    font-family: var(--font-display) !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin: 0 0 8px 0 !important;
}

.dealer-login-container > div:first-child > p,
.dealer-login-container p {
    color: var(--color-text-secondary) !important;
    font-size: 13px !important;
}

.dealer-login-container label {
    color: var(--color-text-secondary) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

.dealer-login-container input[type="text"],
.dealer-login-container input[type="password"],
.dealer-login-container input[type="email"] {
    background: var(--color-bg-card-hover) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 4px !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    padding: 12px 14px !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
}

/* Beats the JS onfocus="this.style.borderColor='#27ae60'" because that
   JS write doesn't carry !important. */
.dealer-login-container input[type="text"]:focus,
.dealer-login-container input[type="password"]:focus,
.dealer-login-container input[type="email"]:focus {
    border-color: var(--color-accent) !important;
    background: var(--color-bg-card) !important;
    outline: none !important;
}

/* Chrome autofill — match the dark card */
.dealer-login-container input:-webkit-autofill,
.dealer-login-container input:-webkit-autofill:hover,
.dealer-login-container input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text-primary) !important;
    -webkit-box-shadow: inset 0 0 0 1000px var(--color-bg-card-hover) !important;
    caret-color: var(--color-text-primary) !important;
    border-color: var(--color-border-light) !important;
}

.dealer-login-container button[type="submit"] {
    background: var(--color-accent) !important;
    border: none !important;
    border-radius: 4px !important;
    color: #fff !important;
    cursor: pointer !important;
    font-family: var(--font-display) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 1.5px !important;
    padding: 14px !important;
    text-transform: uppercase !important;
    transition: background 0.15s ease !important;
    width: 100% !important;
}

/* Beats the JS onmouseover="this.style.background='#1a252f'" */
.dealer-login-container button[type="submit"]:hover,
.dealer-login-container button[type="submit"]:focus {
    background: var(--color-accent-hover, var(--color-accent-light)) !important;
}

.dealer-login-container a {
    color: var(--color-accent-light) !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.dealer-login-container a:hover {
    color: var(--color-accent) !important;
}

/* Bottom divider above "Not a dealer?" line */
.dealer-login-container > div:last-child {
    border-top-color: var(--color-border-light) !important;
}

/* hCaptcha widget on a dark background — its iframe uses dark theme by
   data-attribute, but if we don't set it the default light theme renders
   white. Centered already by the inline flex wrapper. */
.dealer-login-container .h-captcha {
    margin: 0 auto !important;
}

/* ============================================
   /dealer-inventory — page title dedup
   The plugin's section h2 "Available Inventory" (logged-in) and "Dealer
   Login" (logged-out) already label the content. The theme's
   .bhs-page-title "Dealer Inventory" is redundant on this page only.
   ============================================ */
body.page-id-21828 .bhs-page-title {
    display: none !important;
}

/* ============================================
   /dealer-inventory — logged-in inventory view
   Plugin emits inline styles: white bg tables, #2c3e50 h3 color, #666
   helper text, alternating #fff/#f8f9fa rows. Override with !important.
   The colored thead bars (green=HQ, blue=East Coast) are kept as
   meaningful location accents, but darkened to fit. The qty badges
   (red/yellow/green) stay — they encode stock-level UX.
   ============================================ */

.dealer-inventory-container {
    color: var(--color-text-primary) !important;
}

/* "Available Inventory" h2 */
.dealer-inventory-container > div:first-child h2 {
    color: var(--color-text-primary) !important;
    font-family: var(--font-display) !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

/* "Welcome, X | Last updated" line */
.dealer-inventory-container > div:first-child > span {
    color: var(--color-text-muted) !important;
    font-size: 13px !important;
}

/* Section h3 — "Basshead Supply HQ Inventory" / "East Coast Inventory" */
.dealer-inventory-container h3 {
    color: var(--color-text-primary) !important;
    font-family: var(--font-display) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

/* Unit-count span inside the section h3 — "(46 units)" */
.dealer-inventory-container h3 span {
    color: var(--color-text-muted) !important;
    font-family: var(--font-body) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Tables — kill the white bg and box-shadow, dark transparent instead */
.dealer-inventory-table {
    background: var(--color-bg-card) !important;
    box-shadow: none !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* THEAD — keep the colored bar but tone it down a touch.
   The plugin uses #27ae60 (green) for HQ and #3498db (blue) for
   East Coast — both at full saturation. Inline styles win against
   plain selectors, so we leave the colors and just normalize text. */
.dealer-inventory-table thead th {
    color: #fff !important;
    font-family: var(--font-display) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 14px 16px !important;
    border: none !important;
}

/* TBODY rows — override the alternating #fff/#f8f9fa zebra with subtle
   dark zebra. Inline styles live on each <tr> so we need !important. */
.dealer-inventory-table tbody tr {
    background: transparent !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}

.dealer-inventory-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02) !important;
}

.dealer-inventory-table tbody tr:last-child {
    border-bottom: none !important;
}

/* Override the plugin's .dealer-inventory-table tr:hover { #f0f7ff } —
   match specificity (0,1,2) and add an extra class to win. */
.dealer-inventory-table.dealer-inventory-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.dealer-inventory-table.dealer-inventory-table tbody tr.expandable-row:hover {
    background: rgba(232, 113, 30, 0.08) !important;
}

/* Body cells */
.dealer-inventory-table tbody td {
    color: var(--color-text-primary) !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    border: none !important;
}

/* Expand-row reveal panel — "Compatible Speakers" inner div is a green
   tinted box (#e8fcf0) on a green-tinted row (#f0fff0). Make it dark. */
.dealer-inventory-table tr.designs-row {
    background: rgba(255, 255, 255, 0.02) !important;
}

.dealer-inventory-table tr.designs-row > td > div {
    background: var(--color-bg-card-hover) !important;
    border: 1px solid var(--color-border-light) !important;
}

.dealer-inventory-table tr.designs-row > td > div > div:first-child {
    color: var(--color-text-muted) !important;
}

.dealer-inventory-table tr.designs-row > td > div > div:not(:first-child) {
    color: var(--color-text-primary) !important;
    border-bottom-color: var(--color-border-light) !important;
}

/* Plugin's link rule .dealer-inventory-container a { #27ae60 } already
   uses !important — match selector + add class to outweigh it. */
.dealer-inventory-container.dealer-inventory-container a {
    color: var(--color-accent-light) !important;
}

.dealer-inventory-container.dealer-inventory-container a:hover {
    color: var(--color-accent) !important;
}

/* Empty-state cards — plugin uses light gray bg (#f9f9f9) + #666 text.
   Match the dark card style. */
.dealer-inventory-container > div[style*="background: #f9f9f9"],
.dealer-inventory-container > div[style*="#f9f9f9"] {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    color: var(--color-text-secondary) !important;
}

.dealer-inventory-container > div[style*="background: #f9f9f9"] p,
.dealer-inventory-container > div[style*="#f9f9f9"] p {
    color: var(--color-text-secondary) !important;
}

/* "Total Inventory" summary box — plugin emits a green-tinted card
   (#e8f6f3 bg, #1e8449 text, #27ae60 left border) with the cross-location
   totals. Useful info — restyle for dark theme, keep the green accent. */
.dealer-inventory-container > div[style*="#e8f6f3"] {
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border-light) !important;
    border-left: 4px solid #27ae60 !important;
}

.dealer-inventory-container > div[style*="#e8f6f3"] p {
    color: var(--color-text-primary) !important;
}

/* "Ready to order? Contact us at sales@..." box — REMOVED at the source
   in dealer-inventory-viewer plugin (lines ~1050-1055), so no CSS hide
   rule needed. */