/* ==========================================================================
   WooCommerce — Dark Theme Overrides
   ========================================================================== */

/* Wrapper */
.ecushop-wc-wrapper {
    padding: 48px 0;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.woocommerce-breadcrumb {
    padding: 16px 0;
    font-size: 0.8125rem;
    color: var(--ecu-text-secondary);
    border-bottom: 1px solid var(--ecu-border);
    margin-bottom: 32px;
}

.woocommerce-breadcrumb a {
    color: var(--ecu-text-secondary);
}

.woocommerce-breadcrumb a:hover {
    color: var(--ecu-red);
}

.breadcrumb-sep {
    margin: 0 8px;
    color: var(--ecu-border-light);
}

/* ==========================================================================
   Product Archive / Category
   ========================================================================== */

.woocommerce-result-count {
    color: var(--ecu-text-secondary);
    font-size: 0.875rem;
}

.woocommerce-ordering select {
    background: var(--ecu-bg-input);
    border: 1px solid var(--ecu-border);
    color: var(--ecu-text-primary);
    border-radius: 6px;
    padding: 8px 12px;
}

/* Product Grid */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ecu-gap);
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce ul.products li.product {
    background: var(--ecu-bg-secondary);
    border: 1px solid var(--ecu-border);
    border-radius: var(--ecu-card-radius);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    float: none;
    width: auto !important;
    margin: 0 !important;
    position: relative;
}

/* Gradient top border on hover */
.woocommerce ul.products li.product::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ecu-red), var(--ecu-red-light), var(--ecu-red));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 20px var(--ecu-red-glow-soft);
    border-color: var(--ecu-border-light);
}

.woocommerce ul.products li.product:hover::before {
    opacity: 1;
}

.woocommerce ul.products li.product a img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    margin: 0;
    transition: transform 0.5s ease;
}

.woocommerce ul.products li.product:hover a img {
    transform: scale(1.03);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 16px 16px 0;
    font-family: var(--ecu-font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ecu-text-primary);
}

.woocommerce ul.products li.product .price {
    padding: 8px 16px;
    color: var(--ecu-text-primary);
    font-size: 1.125rem;
    font-weight: 700;
    font-family: var(--ecu-font-heading);
}

.woocommerce ul.products li.product .price del {
    color: var(--ecu-text-secondary);
    opacity: 0.6;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    color: var(--ecu-red);
}

.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol {
    font-size: 0.875em;
}

.price-suffix {
    font-size: 0.75rem;
    color: var(--ecu-text-secondary);
    font-weight: 400;
}

/* Add to Cart Button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button {
    display: block;
    margin: 12px 16px 16px;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--ecu-red), var(--ecu-red-dark));
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: var(--ecu-font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Shimmer effect on product buttons */
.woocommerce ul.products li.product .button::before,
.woocommerce ul.products li.product a.add_to_cart_button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    transition: left 0.5s ease;
}

.woocommerce ul.products li.product .button:hover::before,
.woocommerce ul.products li.product a.add_to_cart_button:hover::before {
    left: 100%;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.add_to_cart_button:hover {
    background: linear-gradient(135deg, var(--ecu-red-light), var(--ecu-red));
    box-shadow: 0 4px 16px var(--ecu-red-glow);
}

/* Sale badge with animation */
.woocommerce span.onsale {
    background: linear-gradient(135deg, var(--ecu-red), var(--ecu-red-dark));
    color: #fff;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    min-width: auto;
    min-height: auto;
    line-height: 1.4;
    transform: rotate(-2deg);
    box-shadow: 0 2px 8px var(--ecu-red-glow);
    animation: salePulse 2s ease-in-out infinite;
}

@keyframes salePulse {
    0%, 100% { box-shadow: 0 2px 8px var(--ecu-red-glow); }
    50% { box-shadow: 0 4px 16px var(--ecu-red-glow); }
}

/* ==========================================================================
   Single Product
   ========================================================================== */

.woocommerce div.product {
    margin-top: 16px;
}

.woocommerce div.product div.images {
    background: var(--ecu-bg-secondary);
    border-radius: var(--ecu-card-radius);
    overflow: hidden;
}

.woocommerce div.product .product_title {
    font-family: var(--ecu-font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--ecu-text-primary);
    margin-bottom: 8px;
}

.woocommerce div.product p.price {
    font-size: 1.75rem;
    font-weight: 700;
    font-family: var(--ecu-font-heading);
    color: var(--ecu-text-primary);
    margin-bottom: 16px;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--ecu-text-secondary);
    margin-bottom: 24px;
    line-height: 1.7;
}

.woocommerce div.product form.cart {
    margin-bottom: 32px;
}

.woocommerce div.product form.cart .quantity input {
    background: var(--ecu-bg-input);
    border: 1px solid var(--ecu-border);
    color: var(--ecu-text-primary);
    border-radius: 6px;
    padding: 10px;
    width: 70px;
}

.woocommerce div.product form.cart .button {
    background: linear-gradient(135deg, var(--ecu-red), var(--ecu-red-dark));
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 14px 32px;
    font-family: var(--ecu-font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.woocommerce div.product form.cart .button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.5s ease;
}

.woocommerce div.product form.cart .button:hover::before {
    left: 100%;
}

.woocommerce div.product form.cart .button:hover {
    background: linear-gradient(135deg, var(--ecu-red-light), var(--ecu-red));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--ecu-red-glow);
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs {
    margin-top: 48px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 2px solid var(--ecu-border);
    overflow: visible;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    display: none;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 12px 24px;
    font-family: var(--ecu-font-heading);
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ecu-text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s ease;
}

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

.woocommerce div.product .woocommerce-tabs .panel {
    padding: 24px 0;
    color: var(--ecu-text-secondary);
    background: transparent;
    border: none;
    box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
    font-size: 1.25rem;
    margin-bottom: 16px;
}

/* Related Products */
.woocommerce .related.products {
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid var(--ecu-border);
}

.woocommerce .related.products h2 {
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}

/* ==========================================================================
   Cart
   ========================================================================== */

/* Two-column cart layout: line items on the left, totals summary on the right.
   Replaces WooCommerce's default float (full-width table + 48% floated totals),
   which left an awkward gap beside the table and dropped the totals low-right. */
.woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 28%, 380px);
    align-items: start;
    gap: 32px;
}

/* Notices (e.g. "Cart updated") span the full width above both columns */
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
}

.woocommerce-cart .woocommerce-cart-form {
    margin: 0;
    min-width: 0;
}

/* Line-items table fills its column (WC default width:auto left a gap) */
.woocommerce-cart table.cart {
    width: 100%;
}

/* Totals card fills the right column instead of floating at 48% */
.woocommerce-cart .cart-collaterals {
    width: auto;
    margin: 0;
}

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cross-sells {
    float: none;
    width: 100%;
}

@media (max-width: 980px) {
    .woocommerce-cart .woocommerce {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.woocommerce-cart .woocommerce table.shop_table {
    border: 1px solid var(--ecu-border);
    border-radius: var(--ecu-card-radius);
    overflow: hidden;
}

/* Cart line-item product thumbnail — constrain so it doesn't dominate the row */
.woocommerce-cart .woocommerce table.shop_table td.product-thumbnail {
    width: 110px;
    padding: 12px 16px;
}

.woocommerce-cart .woocommerce table.shop_table td.product-thumbnail img,
.woocommerce-cart .woocommerce table.shop_table td.product-thumbnail a img {
    width: 90px;
    height: 90px;
    max-width: 90px;
    max-height: 90px;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    padding: 4px;
    display: block;
}

@media (max-width: 600px) {
    .woocommerce-cart .woocommerce table.shop_table td.product-thumbnail {
        width: 80px;
        padding: 10px;
    }
    .woocommerce-cart .woocommerce table.shop_table td.product-thumbnail img,
    .woocommerce-cart .woocommerce table.shop_table td.product-thumbnail a img {
        width: 64px;
        height: 64px;
        max-width: 64px;
        max-height: 64px;
    }
}

.woocommerce table.shop_table {
    background: var(--ecu-bg-secondary);
    border-collapse: collapse;
}

.woocommerce table.shop_table th {
    background: var(--ecu-bg-tertiary);
    color: var(--ecu-text-primary);
    font-family: var(--ecu-font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8125rem;
    letter-spacing: 0.5px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ecu-border);
}

.woocommerce table.shop_table td {
    padding: 16px;
    color: var(--ecu-text-secondary);
    border-bottom: 1px solid var(--ecu-border);
    vertical-align: middle;
}

.woocommerce table.shop_table td.product-name a {
    color: var(--ecu-text-primary);
    font-weight: 500;
}

.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal {
    font-weight: 600;
    color: var(--ecu-text-primary);
}

.woocommerce table.shop_table td.product-remove a {
    color: var(--ecu-red) !important;
    font-size: 1.25rem;
}

.woocommerce .cart-collaterals .cart_totals {
    background: var(--ecu-bg-secondary);
    border: 1px solid var(--ecu-border);
    border-radius: var(--ecu-card-radius);
    padding: 24px;
}

.woocommerce .cart-collaterals .cart_totals h2 {
    font-size: 1.25rem;
    margin-bottom: 16px;
}

/* Tighter totals table rhythm — the default 16px per cell feels over-airy
   for a 3-row summary. */
.woocommerce .cart-collaterals .cart_totals table.shop_table td,
.woocommerce .cart-collaterals .cart_totals table.shop_table th {
    padding: 12px 16px;
    line-height: 1.5;
}

/* Shipping calculator toggle — "Calculate shipping" link.
   Render as a quiet inline text link rather than a heavy red underline. */
.woocommerce .shipping-calculator-button,
.woocommerce .shipping-calculator-button:visited {
    display: inline-block;
    margin-top: 6px;
    color: var(--ecu-red);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
    padding-bottom: 1px;
}

.woocommerce .shipping-calculator-button:hover {
    color: var(--ecu-red-light, var(--ecu-red));
    border-bottom-style: solid;
}

/* wc-proceed-to-checkout — the wrapper around the button.
   Give it top breathing room away from the totals table. */
.woocommerce .wc-proceed-to-checkout {
    margin-top: 20px;
    padding: 0;
}

/* Proceed to Checkout — kill the inherited underline, fill width cleanly. */
.woocommerce a.checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, var(--ecu-red), var(--ecu-red-dark)) !important;
    color: #fff !important;
    border-radius: 8px;
    font-family: var(--ecu-font-heading);
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none !important;
    letter-spacing: 1px;
    padding: 16px 32px;
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.woocommerce a.checkout-button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
    background: linear-gradient(135deg, var(--ecu-red-light), var(--ecu-red)) !important;
    box-shadow: 0 6px 20px var(--ecu-red-glow);
    transform: translateY(-1px);
}

.woocommerce a.checkout-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ==========================================================================
   Checkout
   ========================================================================== */

.woocommerce-checkout .woocommerce-form-row label {
    color: var(--ecu-text-secondary);
    font-size: 0.875rem;
}

.woocommerce-checkout .woocommerce-form-row input,
.woocommerce-checkout .woocommerce-form-row select,
.woocommerce-checkout .woocommerce-form-row textarea {
    background: var(--ecu-bg-input);
    border: 1px solid var(--ecu-border);
    color: var(--ecu-text-primary);
    border-radius: 6px;
}

.woocommerce-checkout #order_review {
    background: var(--ecu-bg-secondary);
    border: 1px solid var(--ecu-border);
    border-radius: var(--ecu-card-radius);
    padding: 24px;
}

.woocommerce-checkout #place_order {
    background: linear-gradient(135deg, var(--ecu-red), var(--ecu-red-dark));
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 16px 32px;
    font-family: var(--ecu-font-heading);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
}

.woocommerce-checkout #place_order:hover {
    background: linear-gradient(135deg, var(--ecu-red-light), var(--ecu-red));
    box-shadow: 0 6px 20px var(--ecu-red-glow);
}

/* ==========================================================================
   Notices / Messages
   ========================================================================== */

.woocommerce-message,
.woocommerce-info {
    background: var(--ecu-bg-tertiary);
    border-top-color: var(--ecu-green);
    color: var(--ecu-text-primary);
}

.woocommerce-message::before {
    color: var(--ecu-green);
}

.woocommerce-error {
    background: var(--ecu-bg-tertiary);
    border-top-color: var(--ecu-red);
    color: var(--ecu-text-primary);
}

.woocommerce-error::before {
    color: var(--ecu-red);
}

.woocommerce-message a,
.woocommerce-info a {
    color: var(--ecu-red);
}

/* ==========================================================================
   Sticky Mobile Add to Cart Bar
   ========================================================================== */

.mobile-add-to-cart-bar {
    display: none;
}

@media (max-width: 767px) {
    .mobile-add-to-cart-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(13, 17, 23, 0.95);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--ecu-border);
        padding: 12px 16px;
        z-index: 999;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }

    .mobile-add-to-cart-bar.visible {
        transform: translateY(0);
    }

    .mobile-add-to-cart-bar__info {
        flex: 1;
        min-width: 0;
    }

    .mobile-add-to-cart-bar__name {
        font-size: 0.8125rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-add-to-cart-bar__price {
        font-size: 1rem;
        font-weight: 700;
        font-family: var(--ecu-font-heading);
        color: var(--ecu-red);
    }

    .mobile-add-to-cart-bar .btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

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

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.875rem;
        padding: 12px 12px 0;
    }

    .woocommerce ul.products li.product .price {
        padding: 4px 12px;
        font-size: 1rem;
    }

    .woocommerce ul.products li.product .button {
        margin: 8px 12px 12px;
        padding: 8px 12px;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr;
    }
}

/* Focus styles for keyboard accessibility */
.woo-add-to-cart:focus-visible,
.checkout-button:focus-visible,
.place-order-btn:focus-visible {
    outline: 2px solid var(--ecu-red);
    outline-offset: 2px;
}

.product-card a:focus-visible {
    outline: 2px solid var(--ecu-red);
    outline-offset: 4px;
    border-radius: var(--ecu-card-radius);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .sale-badge {
        animation: none;
    }

    .product-card__image img {
        transition: none;
    }

    .woo-add-to-cart::before {
        animation: none;
    }
}

/* Archive Category Intro */
.category-intro {
    padding: 32px;
    border-radius: var(--ecu-card-radius);
    margin-bottom: 32px;
}

.category-intro .bsn-features {
    margin: 16px 0;
}

.category-intro__video {
    margin-top: 24px;
}

.category-intro__video .video-facade {
    max-width: 640px;
    border-radius: var(--ecu-card-radius);
    overflow: hidden;
}

.category-intro__list {
    margin: 16px 0;
    color: var(--ecu-text-secondary);
    padding-left: 0;
}

.category-intro__list li {
    padding: 6px 0 6px 24px;
    position: relative;
}

.category-intro__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ecu-red);
    opacity: 0.7;
}

/* Afterpay note in archive product loop */
.loop-afterpay {
    padding: 0 16px 4px;
    font-size: 0.75rem;
    color: var(--ecu-text-secondary);
    margin: 0;
}

.loop-afterpay .afterpay-logo {
    font-weight: 700;
    color: #b2fce4;
}

.wc-archive-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

/* Vehicle badge on product cards */
.loop-vehicle-badge {
    display: inline-block;
    margin: 4px 16px 0;
    padding: 2px 10px;
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: var(--ecu-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ecu-amber);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 4px;
}

/* Category filter bar */
.category-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ecu-border);
}

.category-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-family: var(--ecu-font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ecu-text-secondary);
    background: var(--ecu-bg-secondary);
    border: 1px solid var(--ecu-border);
    border-radius: 6px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.category-filter-pill:hover {
    color: var(--ecu-text-primary);
    border-color: var(--ecu-red);
    background: rgba(230, 57, 70, 0.08);
}

.category-filter-pill--active {
    color: #fff;
    background: linear-gradient(135deg, var(--ecu-red), var(--ecu-red-dark));
    border-color: var(--ecu-red);
}

.category-filter-pill--active:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--ecu-red-light), var(--ecu-red));
}

.category-filter-pill__count {
    font-size: 0.6875rem;
    opacity: 0.7;
}

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

/* Mobile archive toolbar stacking */
@media (max-width: 575px) {
    .wc-archive-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .loop-afterpay {
        padding: 0 12px 4px;
        font-size: 0.6875rem;
    }

    .loop-vehicle-badge {
        margin: 4px 12px 0;
        font-size: 0.625rem;
    }

    .category-intro {
        padding: 20px 16px;
    }

    .category-filter-bar {
        gap: 6px;
    }

    .category-filter-pill {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   WooCommerce Blocks Checkout — readable on the dark theme
   The legacy .woocommerce-form-row rules above don't apply to the new
   block-based checkout (WC Blocks). These selectors target the block
   shortcode's own DOM and CSS variables.
   ========================================================================== */

.wc-block-checkout,
.wc-block-cart {
    --wc-blocks-text-color: var(--ecu-text-primary);
    --wc-blocks-form-label-color: var(--ecu-text-primary);
    color: var(--ecu-text-primary);
}

/* Section headings: "Contact information", "Shipping address", "Shipping options", "Payment options" */
.wc-block-components-checkout-step__heading,
.wc-block-components-title.wc-block-components-checkout-step__title {
    color: var(--ecu-text-primary);
}

/* Text fields.
   IMPORTANT: the border + fill live on the <input> itself, not on the wrapper.
   The Stripe gateway builds the appearance of its own card iframes by reading
   the *computed style of `.wc-block-components-text-input input`* off this page.
   When the border sat on the wrapper and the input was transparent/border-0,
   Stripe copied "no border, no background" into the card number / expiry /CVC
   fields and they rendered invisible. Styling the input directly keeps the card
   fields matched to the rest of the form. Do not move these back to the wrapper.
   (After changing anything here, clear the `wc_stripe_blocks_appearance`
   transient so Stripe re-samples: wp transient delete wc_stripe_blocks_appearance) */
.wc-block-components-text-input,
.wc-block-components-select {
    background: transparent !important;
    border: 0 !important;
}

.wc-block-components-text-input input,
.wc-block-components-text-input input.input-text,
.wc-block-components-select select,
.wc-block-components-address-form input,
.wc-block-components-address-form select {
    background: var(--ecu-bg-input, #161b22) !important;
    color: var(--ecu-text-primary) !important;
    border: 1px solid var(--ecu-border, rgba(255, 255, 255, 0.12)) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-block-components-address-form input:focus,
.wc-block-components-address-form select:focus {
    border-color: var(--ecu-accent, #2e9ecb) !important;
    box-shadow: 0 0 0 3px rgba(46, 158, 203, 0.22) !important;
    outline: none !important;
}

/* Floating label — when empty, it sits inside the field as a placeholder.
   Lift the colour from light grey to a readable mid-tone. */
.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-block-components-form__label {
    color: var(--ecu-text-secondary, #b8c0cc) !important;
}

/* Active / floated label (input has content or focus).
   These labels shrink and sit at the top edge of the field, so nearly every
   filled row shows this state — it must read as a quiet field name, not an
   alarm. (It was --ecu-red, which made the whole form look like validation
   errors.) */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label,
.wc-block-components-text-input input:not(:placeholder-shown) + label,
.wc-block-components-select.is-active label {
    color: var(--ecu-text-muted, #8b949e) !important;
    font-weight: 500 !important;
}

/* Focused field: name it in the accent so focus is obvious. */
.wc-block-components-text-input input:focus + label {
    color: var(--ecu-accent, #2e9ecb) !important;
}

/* Placeholder color (older browsers / fallback) */
.wc-block-checkout input::placeholder,
.wc-block-checkout textarea::placeholder {
    color: var(--ecu-text-muted, #8b949e) !important;
    opacity: 1 !important;
}

/* "You are currently checking out as a guest" + helper text under fields */
.wc-block-components-checkout-step__description,
.wc-block-components-validation-error,
.wc-block-components-form__description,
small.wc-block-components-input-info,
.wc-block-checkout small {
    color: var(--ecu-text-muted, #8b949e) !important;
}

/* Validation errors stay red regardless */
.wc-block-components-validation-error,
.has-error .wc-block-components-validation-error {
    color: #f87171 !important;
}

/* "+ Add flat, suite, etc." style add-line link */
.wc-block-components-address-form__address-2-toggle,
.wc-block-components-address-form a {
    color: var(--ecu-accent, #2e9ecb) !important;
    text-decoration: none !important;
    border-bottom: 1px dashed currentColor;
}

/* Checkboxes (newsletter opt-in, "Use same address for billing", "Add a note") */
.wc-block-components-checkbox__label,
.wc-block-components-checkbox span,
label.wc-block-components-checkbox {
    color: var(--ecu-text-primary) !important;
}

.wc-block-components-checkbox__input,
.wc-block-components-checkbox input[type="checkbox"] {
    accent-color: var(--ecu-accent, #2e9ecb);
}

.wc-block-components-checkbox__mark {
    color: #fff !important;
}

/* ==========================================================================
   Checkout — choice rows (shipping rates + payment methods)

   WooCommerce absolutely-positions the radio dot inside the label, so a flat
   `padding: 14px 16px` put the text straight on top of the dot. Reserve a
   left gutter for the control instead.
   ========================================================================== */
.wc-block-components-radio-control__option,
.wc-block-components-shipping-rates-control__option {
    background: var(--ecu-bg-input, #161b22);
    border: 1px solid var(--ecu-border, rgba(255, 255, 255, 0.12));
    border-radius: 10px;
    padding: 14px 16px 14px 46px !important;
    color: var(--ecu-text-primary);
}

.wc-block-components-radio-control .wc-block-components-radio-control__input {
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    background: var(--ecu-bg-input, #161b22);
    border-color: var(--ecu-text-muted, #8b949e);
}

.wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
    background: var(--ecu-accent, #2e9ecb);
    border-color: var(--ecu-accent, #2e9ecb);
    box-shadow: inset 0 0 0 3px var(--ecu-bg-input, #161b22);
}

/* Selected row: accent outline, not the danger red it used to use. */
.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__option[data-checked="true"] {
    border-color: var(--ecu-accent, #2e9ecb);
    box-shadow: 0 0 0 1px var(--ecu-accent, #2e9ecb);
}

/* --- Single option = not a choice ------------------------------------------
   When a package offers exactly one shipping rate there is nothing to pick, so
   drop the radio and present it as a plain summary row. `:first-child:last-child`
   means this only ever applies while the option really is the only one; add a
   second rate and both immediately render as normal selectable rows again. */
.wc-block-components-shipping-rates-control__package
    .wc-block-components-radio-control__option:first-child:last-child {
    padding-left: 16px !important;
    box-shadow: none;
    border-color: var(--ecu-border, rgba(255, 255, 255, 0.12));
    cursor: default;
}

.wc-block-components-shipping-rates-control__package
    .wc-block-components-radio-control__option:first-child:last-child
    .wc-block-components-radio-control__input {
    display: none;
}

/* ==========================================================================
   Checkout — payment methods

   With a single gateway (the Stripe payment element, which renders Card and
   Afterpay inside itself) the outer accordion header is a box labelled
   "Payment methods" wrapping a list of one. It reads as a dropdown that never
   collapses. Hide the redundant header and let the payment form sit directly
   under the "Payment options" heading. Same :first-child:last-child guard —
   add a second gateway and the normal selectable accordion returns.
   ========================================================================== */
.wc-block-checkout__payment-method
    .wc-block-components-radio-control-accordion-option:first-child:last-child {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.wc-block-checkout__payment-method
    .wc-block-components-radio-control-accordion-option:first-child:last-child
    > .wc-block-components-radio-control__option {
    display: none;
}

.wc-block-checkout__payment-method
    .wc-block-components-radio-control-accordion-option:first-child:last-child
    .wc-block-components-radio-control-accordion-content {
    margin: 0;
    padding: 0;
}

/* Multi-gateway case keeps a normal card, just without the red. */
.wc-block-components-radio-control-accordion-option {
    border-radius: 10px;
}

.wc-block-components-radio-control-accordion-content {
    color: var(--ecu-text-primary);
}

.wc-block-components-radio-control__label,
.wc-block-components-radio-control__description {
    color: var(--ecu-text-primary) !important;
}

/* "Place Order" — primary CTA at end of checkout */
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button,
button.wc-block-components-checkout-place-order-button {
    background: linear-gradient(135deg, var(--ecu-red), var(--ecu-red-dark, var(--ecu-red))) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 16px 32px !important;
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease !important;
}

.wc-block-components-checkout-place-order-button:hover {
    background: linear-gradient(135deg, var(--ecu-red-light, var(--ecu-red)), var(--ecu-red)) !important;
    box-shadow: 0 6px 20px var(--ecu-red-glow, rgba(230, 57, 70, 0.4)) !important;
    transform: translateY(-1px);
}

/* "Return to Cart" link styling */
.wc-block-components-checkout-return-to-cart-button,
.wc-block-checkout__actions a {
    color: var(--ecu-red) !important;
}

/* Cart blocks — same input treatment, sidebar totals readable */
.wc-block-cart__sidebar,
.wc-block-components-totals-wrapper {
    color: var(--ecu-text-primary);
}

/* Notice banner ("There are no payment methods available...") — keep red but
   ensure the text reads on the light-pink background it ships with. */
.wc-block-components-notice-banner.is-error {
    color: #7a1d24 !important;
}

.wc-block-components-notice-banner.is-error a {
    color: #7a1d24 !important;
    font-weight: 600;
}

/* ==========================================================================
   Checkout — dropdown options (Country / Region selects)
   The browser-rendered <option> panel inherits its own styling and many
   browsers default to light. Force dark options + white text so the open
   dropdown panel matches the rest of the checkout.
   ========================================================================== */

.wc-block-checkout select,
.wc-block-cart select,
.woocommerce-checkout select,
.woocommerce-cart select {
    color-scheme: dark;
}

.wc-block-checkout select option,
.wc-block-cart select option,
.woocommerce-checkout select option,
.woocommerce-cart select option {
    background: var(--ecu-bg-secondary, #161b22) !important;
    color: var(--ecu-text-primary, #ffffff) !important;
}

/* Custom combobox dropdown panel (WC Blocks Country/Region uses a search-as-
   you-type combobox, not a native select) — force dark surface + readable
   item text. */
.wc-block-components-combobox,
.wc-block-components-combobox-control,
.components-form-token-field__suggestions-list,
.components-combobox-control__suggestions-container {
    background: var(--ecu-bg-secondary, #161b22) !important;
    color: var(--ecu-text-primary, #ffffff) !important;
    border-color: var(--ecu-border, rgba(255, 255, 255, 0.15)) !important;
}

.components-form-token-field__suggestion,
.components-combobox-control__suggestions-container li {
    color: var(--ecu-text-primary, #ffffff) !important;
    background: var(--ecu-bg-secondary, #161b22) !important;
    padding: 10px 14px !important;
}

.components-form-token-field__suggestion.is-selected,
.components-form-token-field__suggestion:hover,
.components-combobox-control__suggestions-container li:hover {
    background: var(--ecu-bg-tertiary, #222940) !important;
    color: #fff !important;
}

/* Combobox input itself (where the user types the country) */
.wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-combobox input,
.components-combobox-control input {
    background: transparent !important;
    color: var(--ecu-text-primary, #ffffff) !important;
}

/* WC Blocks country/state-specific wrappers */
.wc-block-components-country-input,
.wc-block-components-state-input {
    background: var(--ecu-bg-input, #161b22) !important;
    border: 1px solid var(--ecu-border, rgba(255, 255, 255, 0.12)) !important;
    border-radius: 8px !important;
}

.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
    background: transparent !important;
    color: var(--ecu-text-primary, #ffffff) !important;
}

.wc-block-components-country-input label,
.wc-block-components-state-input label {
    color: var(--ecu-text-secondary, #b8c0cc) !important;
}

/* ==========================================================================
   Cart — coupon field
   WooCommerce core (woocommerce-layout.css) pins td.actions .input-text to a
   fixed 80px. With this theme's input padding that leaves 46px of text room for
   an ~102px "Coupon code" placeholder, so the word visibly clips. Let the input
   size to its content instead, and lay the row out as a flex pair so the Apply
   button wraps cleanly on narrow screens.
   ========================================================================== */
.woocommerce table.cart td.actions .coupon,
.woocommerce-page table.cart td.actions .coupon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.woocommerce #content table.cart td.actions .coupon .input-text,
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce-page #content table.cart td.actions .coupon .input-text,
.woocommerce-page table.cart td.actions .coupon .input-text {
    width: auto;
    flex: 1 1 200px;
    min-width: 0;
    max-width: 280px;
    margin: 0;
}

/* ==========================================================================
   Checkout — country field

   Selling locations are restricted to New Zealand only (WooCommerce →
   Settings → General), so the country field has exactly one possible value and
   WooCommerce pre-fills it. Hiding it removes a dead control from the form.

   Visibility only — the field stays in the DOM and keeps posting "NZ", which
   is what shipping-zone matching and tax rely on. Do not remove it from the
   markup. If the store ever sells outside NZ again, delete this block and
   widen the selling locations setting.
   ========================================================================== */
.wc-block-checkout .wc-block-components-country-input,
.wc-block-checkout .wc-block-components-address-form__country {
    display: none !important;
}

/* ==========================================================================
   Checkout — layout rhythm
   Give the steps room to breathe so the form is easier to scan top to bottom.
   ========================================================================== */
.wc-block-components-checkout-step {
    margin-bottom: 28px !important;
}

.wc-block-components-title.wc-block-components-checkout-step__title {
    font-family: var(--ecu-font-heading, inherit);
    font-size: 1.125rem !important;
    letter-spacing: 0.01em;
}

.wc-block-components-address-form,
.wc-block-components-address-form .wc-block-components-text-input {
    margin-top: 0;
}

.wc-block-components-address-form .wc-block-components-text-input,
.wc-block-checkout__contact-fields .wc-block-components-text-input {
    margin-bottom: 12px;
}

/* Order summary panel: match the form's surface treatment. */
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-order-summary {
    color: var(--ecu-text-primary);
}