/*
 * woocommerce.css — Cryotech theme overrides
 *
 * WooCommerce auto-enqueues this as woocommerce-theme-styles after its own
 * core stylesheets. Also explicitly registered as cryotech-wc-overrides in
 * functions.php with deps [woocommerce-general, cryotech-main]. Rules here
 * win by load order. Keep only targeted overrides — no WC base layout duplication.
 *
 * Design tokens (from main.css :root):
 *   --bg: #05050d   --card: #12122a   --blue: #0087de   --cyan: #0087de
 *   --border: rgba(0,135,222,0.18)    --text: rgba(255,255,255,0.90)
 *   --text-dim: rgba(255,255,255,0.50)  --glow: rgba(0,135,222,0.35)
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. EMPTY CART STATE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide all default WooCommerce empty-cart chrome */
.woocommerce-cart .cart-empty,
.woocommerce-cart p.cart-empty,
.woocommerce-cart .return-to-shop,
.woocommerce-cart .woocommerce-cart-form:empty,
.woocommerce-cart .wc-empty-cart-message {
    display: none !important;
}

/*
 * Custom empty-cart block — injected via PHP (see functions.php).
 * If for any reason the PHP hook doesn't fire, this CSS still looks correct
 * because we target the WC-generated wrapper directly.
 */
.ct-empty-cart {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 80px 24px !important;
    text-align: center !important;
}

.ct-empty-cart__icon {
    width: 72px !important;
    height: 72px !important;
    margin: 0 auto 28px !important;
    opacity: 0.35 !important;
}

.ct-empty-cart__title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 10px !important;
}

.ct-empty-cart__sub {
    font-size: 0.9rem !important;
    color: rgba(255, 255, 255, 0.45) !important;
    margin: 0 0 32px !important;
}

.ct-empty-cart__btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #0087de, #0087de) !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 13px 28px !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 0 32px rgba(0, 135, 222, 0.35) !important;
    transition: opacity 0.18s, transform 0.18s !important;
}

.ct-empty-cart__btn:hover {
    opacity: 0.88 !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. REMOVE ALL BULLETS / DOTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cart table rows */
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .woocommerce-cart-form *,
.woocommerce-cart table.cart,
.woocommerce-cart table.cart tr,
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td dl,
.woocommerce-cart table.cart td dl dt,
.woocommerce-cart table.cart td dl dd,
.woocommerce-cart table.cart td ul,
.woocommerce-cart table.cart td ul li {
    list-style: none !important;
    list-style-type: none !important;
}

/* Any stray separator dots WooCommerce renders above cross-sells on empty cart */
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper + *::before,
.woocommerce-cart .cart-collaterals::before,
.woocommerce-cart hr,
.woocommerce-cart .woocommerce-page hr {
    display: none !important;
    border: none !important;
    margin: 0 !important;
}

/* Cross-sell list items */
.woocommerce-cart .cross-sells ul.products,
.woocommerce-cart .cross-sells ul.products li.product {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.woocommerce-cart .cross-sells ul.products::before,
.woocommerce-cart .cross-sells ul.products::after,
.woocommerce-cart .cross-sells ul.products li.product::before,
.woocommerce-cart .cross-sells ul.products li.product::after {
    display: none !important;
    content: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2b. CART PAGE — PRODUCT THUMBNAIL
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * WooCommerce's own layout stylesheet (woocommerce-layout.css) is suppressed
 * when a theme declares add_theme_support('woocommerce'), so we must provide
 * the cart table thumbnail styles ourselves.
 */
.woocommerce-cart table.cart td.product-thumbnail {
    width: 80px !important;
    padding: 12px 8px !important;
}

.woocommerce-cart table.cart td.product-thumbnail a {
    display: block !important;
}

.woocommerce-cart table.cart td.product-thumbnail a img,
.woocommerce-cart table.cart td.product-thumbnail img {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 8px !important;
    background: linear-gradient(145deg, #0a0a1e, #0f0f28) !important;
    padding: 6px !important;
    display: block !important;
    margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. CROSS-SELLS ("NEW IN STORE") — spacing, grid, cards
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section spacing */
.woocommerce-cart .cross-sells {
    margin-top: 80px !important;
    padding-top: 0 !important;
}

/* Section heading */
.woocommerce-cart .cross-sells h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding-bottom: 14px !important;
    margin-bottom: 32px !important;
    border-bottom: 1px solid rgba(0, 135, 222, 0.18) !important;
}

/* 4-column grid */
.woocommerce-cart .cross-sells ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 900px) {
    .woocommerce-cart .cross-sells ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 520px) {
    .woocommerce-cart .cross-sells ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* Product card */
.woocommerce-cart .cross-sells ul.products li.product {
    background: #12122a !important;
    border: 1px solid rgba(0, 135, 222, 0.18) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s !important;
}

.woocommerce-cart .cross-sells ul.products li.product:hover {
    border-color: rgba(0, 135, 222, 0.45) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 32px rgba(0, 135, 222, 0.18) !important;
}

/* Image container — fixed height, dark bg */
.woocommerce-cart .cross-sells ul.products li.product a img,
.woocommerce-cart .cross-sells ul.products li.product img {
    height: 220px !important;
    width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #0b0b1a !important;
    display: block !important;
    padding: 16px !important;
    margin: 0 !important;
}

/* Card body padding */
.woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title,
.woocommerce-cart .cross-sells ul.products li.product h2.woocommerce-loop-product__title {
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    padding: 14px 16px 4px !important;
    margin: 0 !important;
    line-height: 1.35 !important;
}

/* Price */
.woocommerce-cart .cross-sells ul.products li.product .price,
.woocommerce-cart .cross-sells ul.products li.product .price span,
.woocommerce-cart .cross-sells ul.products li.product .woocommerce-Price-amount {
    color: #0087de !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    padding: 0 16px 16px !important;
    display: block !important;
}

/* "Add to cart" button inside cross-sell cards */
.woocommerce-cart .cross-sells ul.products li.product .button,
.woocommerce-cart .cross-sells ul.products li.product a.button {
    display: block !important;
    width: calc(100% - 32px) !important;
    margin: 0 16px 16px !important;
    padding: 10px 16px !important;
    background: rgba(0, 135, 222, 0.12) !important;
    border: 1px solid rgba(0, 135, 222, 0.35) !important;
    color: #0087de !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: background 0.18s, border-color 0.18s, color 0.18s !important;
}

.woocommerce-cart .cross-sells ul.products li.product .button:hover,
.woocommerce-cart .cross-sells ul.products li.product a.button:hover {
    background: #0087de !important;
    border-color: #0087de !important;
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. CART TOTALS — "Proceed to Checkout" button
   ═══════════════════════════════════════════════════════════════════════════ */

.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
    padding: 0 !important;
}

.woocommerce-cart .cart_totals a.checkout-button,
.woocommerce a.checkout-button,
.woocommerce button.checkout-button {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    background: linear-gradient(135deg, #0087de, #0087de) !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 16px 24px !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: 0 0 28px rgba(0, 135, 222, 0.35) !important;
    margin: 8px 0 0 !important;
    transition: opacity 0.18s, transform 0.18s !important;
    cursor: pointer !important;
}

.woocommerce-cart .cart_totals a.checkout-button:hover,
.woocommerce a.checkout-button:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. CHECKOUT PAGE — two-column layout + dark form inputs
   ═══════════════════════════════════════════════════════════════════════════ */

/* Two-column grid: billing/shipping form left, order summary right */
.woocommerce-checkout #customer_details,
.woocommerce-checkout form.woocommerce-checkout {
    display: contents !important; /* let children participate in the parent grid */
}

.woocommerce-checkout .woocommerce {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
    align-items: start !important;
    max-width: 1200px !important;
    margin: 60px auto !important;
    padding: 0 24px !important;
}

/* WooCommerce wraps billing in #customer_details and order review in
   #order_review — place them explicitly in the grid columns */
.woocommerce-checkout .woocommerce #customer_details { grid-column: 1 !important; }
.woocommerce-checkout .woocommerce #order_review_heading,
.woocommerce-checkout .woocommerce #order_review     { grid-column: 2 !important; }

/* Woo notices span full width */
.woocommerce-checkout .woocommerce .woocommerce-notices-wrapper {
    grid-column: 1 / -1 !important;
}

@media (max-width: 860px) {
    .woocommerce-checkout .woocommerce {
        grid-template-columns: 1fr !important;
        margin: 32px auto !important;
    }
    .woocommerce-checkout .woocommerce #customer_details,
    .woocommerce-checkout .woocommerce #order_review_heading,
    .woocommerce-checkout .woocommerce #order_review {
        grid-column: 1 !important;
    }
}

/* ── Dark form inputs ─────────────────────────────────────────────────────── */

.woocommerce-checkout .woocommerce input[type="text"],
.woocommerce-checkout .woocommerce input[type="email"],
.woocommerce-checkout .woocommerce input[type="tel"],
.woocommerce-checkout .woocommerce input[type="password"],
.woocommerce-checkout .woocommerce input[type="number"],
.woocommerce-checkout .woocommerce textarea,
/* broader fallback — catches inputs WC renders outside .woocommerce wrapper */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout textarea {
    background-color: #0d0d22 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: inherit !important;
    padding: 11px 14px !important;
    width: 100% !important;
    transition: border-color 0.18s !important;
}

.woocommerce-checkout input[type="text"]:focus,
.woocommerce-checkout input[type="email"]:focus,
.woocommerce-checkout input[type="tel"]:focus,
.woocommerce-checkout input[type="password"]:focus,
.woocommerce-checkout input[type="number"]:focus,
.woocommerce-checkout textarea:focus {
    border-color: #0087de !important;
    background-color: rgba(0, 135, 222, 0.06) !important;
    box-shadow: 0 0 0 3px rgba(0, 135, 222, 0.15) !important;
    outline: none !important;
}

/* Placeholder text */
.woocommerce-checkout input::placeholder,
.woocommerce-checkout textarea::placeholder {
    color: rgba(255, 255, 255, 0.28) !important;
    opacity: 1 !important;
}

/* ── Country / State select dropdowns ────────────────────────────────────── */
/*
 * Kill any white background WooCommerce sets on Select2 wrapper elements or
 * the woocommerce-input-wrapper div that surrounds country/state dropdowns.
 */
.woocommerce-checkout .select2-container,
.woocommerce-checkout .select2-container--default,
.woocommerce-checkout .woocommerce-input-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/*
 * appearance: none removes the browser-native dropdown arrow so we can
 * inject a custom SVG chevron via background-image.
 */
.woocommerce-checkout .woocommerce select,
.woocommerce-checkout select,
.woocommerce-checkout .select2-container .select2-selection--single {
    background-color: #0d0d22 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230087de' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    padding: 11px 36px 11px 14px !important;
    width: 100% !important;
    box-shadow: none !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: border-color 0.18s !important;
}

.woocommerce-checkout select:focus,
.woocommerce-checkout .select2-container--open .select2-selection--single {
    border-color: #0087de !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 135, 222, 0.15) !important;
}

/* select option elements (native dropdown list) */
.woocommerce-checkout select option {
    background-color: #0d0d22 !important;
    color: #ffffff !important;
}

/* Select2 — WooCommerce uses this JS library for country/state dropdowns */
.woocommerce-checkout .select2-container .select2-selection--single {
    height: auto !important;
    line-height: normal !important;
    display: flex !important;
    align-items: center !important;
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
    padding: 0 !important;
    line-height: normal !important;
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
    display: none !important; /* hidden — custom chevron via background-image above */
}

.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__placeholder {
    color: rgba(255, 255, 255, 0.28) !important;
}

/* Select2 dropdown panel */
.select2-dropdown {
    background-color: #0d0d22 !important;
    border: 1px solid rgba(0, 135, 222, 0.35) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

.select2-search__field {
    background-color: #12122a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 4px !important;
    padding: 8px 10px !important;
    outline: none !important;
}

.select2-search__field::placeholder { color: rgba(255, 255, 255, 0.28) !important; }

.select2-results__option {
    color: rgba(255, 255, 255, 0.75) !important;
    padding: 9px 12px !important;
}

.select2-results__option--highlighted,
.select2-results__option[aria-selected="true"] {
    background-color: rgba(0, 135, 222, 0.18) !important;
    color: #ffffff !important;
}

/* ── Form labels ──────────────────────────────────────────────────────────── */
.woocommerce-checkout .woocommerce form .form-row label,
.woocommerce-checkout form .form-row label {
    color: rgba(255, 255, 255, 0.50) !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 6px !important;
    display: block !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* ── Ensure Select2 / woocommerce-input-wrapper don't collapse under label ── */
.woocommerce-checkout .woocommerce-input-wrapper {
    display: block !important;
    width: 100% !important;
}
.woocommerce-checkout .select2-container {
    display: block !important;
    width: 100% !important;
}
/* Give Select2 selection the same padding as text inputs */
.woocommerce-checkout .select2-container--default .select2-selection--single {
    height: auto !important;
    min-height: 44px !important;
    padding: 11px 36px 11px 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    background-color: #0d0d22 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230087de' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    display: flex !important;
    align-items: center !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
    line-height: normal !important;
    padding: 0 !important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none !important;
}

/* Required star */
.woocommerce-checkout form .form-row label .required { color: #0087de !important; }

/* ── Section headings (Billing, Your order) ───────────────────────────────── */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    margin: 0 0 24px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(0, 135, 222, 0.18) !important;
}

/* ── Order review table ───────────────────────────────────────────────────── */
.woocommerce-checkout #order_review .shop_table {
    background: #12122a !important;
    border: 1px solid rgba(0, 135, 222, 0.18) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td {
    color: rgba(255, 255, 255, 0.85) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 13px 18px !important;
    background: transparent !important;
}

.woocommerce-checkout #order_review .shop_table thead th {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    border-top: none !important;
}

.woocommerce-checkout #order_review .shop_table .order-total th,
.woocommerce-checkout #order_review .shop_table .order-total td {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
}

/* ── Payment box ──────────────────────────────────────────────────────────── */
.woocommerce-checkout #payment {
    background: #12122a !important;
    border: 1px solid rgba(0, 135, 222, 0.18) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-top: 24px !important;
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
    list-style: none !important;
    padding-left: 0 !important;
}

.woocommerce-checkout #payment ul.payment_methods li label {
    color: rgba(255, 255, 255, 0.75) !important;
    text-transform: none !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

.woocommerce-checkout #payment .payment_box {
    background: rgba(0, 135, 222, 0.06) !important;
    border: 1px solid rgba(0, 135, 222, 0.18) !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.50) !important;
    padding: 14px !important;
    font-size: 0.85rem !important;
}

/* ── Place Order button ───────────────────────────────────────────────────── */
.woocommerce-checkout #payment #place_order,
.woocommerce-checkout button#place_order {
    display: block !important;
    width: 100% !important;
    background: linear-gradient(135deg, #0087de, #0087de) !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    padding: 16px 24px !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 0 28px rgba(0, 135, 222, 0.35) !important;
    cursor: pointer !important;
    transition: opacity 0.18s, transform 0.18s !important;
    margin-top: 16px !important;
}

.woocommerce-checkout #payment #place_order:hover,
.woocommerce-checkout button#place_order:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. CHECKOUT — STATIC LABELS (prevent floating-label overlap)
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Force all checkout form-row containers to use normal block flow so labels
 * always sit above their input rather than floating over it.
 */
.woocommerce-checkout .form-row,
.woocommerce-checkout .woocommerce form .form-row {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Kill any floating-label absolute positioning — labels must be static */
.woocommerce-checkout .form-row label,
.woocommerce-checkout .form-row legend,
.woocommerce-checkout .woocommerce form .form-row label,
.woocommerce-checkout .woocommerce form .form-row legend,
body.woocommerce-checkout .form-row label,
body.woocommerce-checkout .form-row legend {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.50) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 6px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    display: block !important;
    background: transparent !important;
    pointer-events: none !important;
    order: -1 !important;
    z-index: auto !important;
    opacity: 1 !important;
    transition: none !important;
    line-height: 1.4 !important;
}

/* Inputs sit below their label with consistent padding */
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row input[type="number"],
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    order: 0 !important;
}

/* Prevent any js-added .is-active / .has-content class from moving the label */
.woocommerce-checkout .form-row.is-active label,
.woocommerce-checkout .form-row.has-content label,
.woocommerce-checkout .form-row.focused label {
    position: static !important;
    transform: none !important;
    top: auto !important;
    font-size: 0.74rem !important;
}

/* Hide "View cart" link WooCommerce appends after AJAX add-to-cart */
.ct-card-footer-right a.added_to_cart {
    display: none !important;
}

/* ── Catalog ordering / sort dropdown ───────────────────────────────────── */
.woocommerce-ordering {
    margin-bottom: 0;
}

.woocommerce-ordering select,
.woocommerce-ordering select:focus,
select.orderby,
select.orderby:focus {
    background-color: var(--card) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: 8px !important;
    padding: 9px 36px 9px 14px !important;
    font-family: inherit !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    transition: border-color 0.18s !important;
    outline: none !important;
    box-shadow: none !important;
}

.woocommerce-ordering select:hover,
select.orderby:hover {
    border-color: var(--border2) !important;
}

/* Dropdown option rows */
.woocommerce-ordering select option,
select.orderby option {
    background-color: var(--card) !important;
    color: var(--text) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. ACCOUNT PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide default WC account navigation sidebar */
.woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-navigation {
    display: none !important;
}

/* Ensure WC wrapper divs don't constrain width */
.woocommerce-account .woocommerce {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

/* Remove default content wrapper padding WC adds */
.woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* ── Shared card ─────────────────────────────────────────────────────────── */
.ct-account-card {
    background: #12122a;
    border: 1px solid rgba(0, 135, 222, 0.18);
    border-radius: 16px;
    padding: 32px 36px;
    margin-bottom: 20px;
}

.ct-account-card--auth {
    width: 100%;
    max-width: 860px;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
}

@media (max-width: 600px) {
    .ct-account-card {
        padding: 24px 20px;
    }
}

/* ── Auth two-column layout ──────────────────────────────────────────────── */
.ct-auth-cols {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.ct-auth-cols--single .ct-auth-col {
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
}

.ct-auth-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ct-auth-col .ct-account-form {
    display: flex;
    flex-direction: column;
}

.ct-auth-col__heading {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
    margin: 0 0 20px;
}

.ct-auth-vdivider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0 28px;
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.ct-auth-vdivider::before,
.ct-auth-vdivider::after {
    content: '';
    flex: 1;
    width: 1px;
    background: rgba(255, 255, 255, 0.10);
    margin: 10px 0;
}

.ct-register-privacy,
.ct-auth-col .woocommerce-privacy-policy-text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.30);
    line-height: 1.55;
    margin: 16px 0 8px;
}

.ct-register-privacy a,
.ct-auth-col .woocommerce-privacy-policy-text a {
    color: rgba(255, 255, 255, 0.50);
    text-decoration: underline;
}

.ct-register-privacy a:hover,
.ct-auth-col .woocommerce-privacy-policy-text a:hover {
    color: #0087de;
}

@media (max-width: 640px) {
    .ct-auth-cols {
        flex-direction: column;
    }

    .ct-auth-vdivider {
        flex-direction: row;
        padding: 20px 0;
    }

    .ct-auth-vdivider::before,
    .ct-auth-vdivider::after {
        flex: 1;
        width: auto;
        height: 1px;
        margin: 0 10px;
    }
}

/* ── Eyebrow label ───────────────────────────────────────────────────────── */
.ct-account-eyebrow {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    color: #0087de;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* ── Auth card top description ───────────────────────────────────────────── */
.ct-account-card__top {
    margin-bottom: 28px;
}

.ct-account-card__desc {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 8px 0 0;
    line-height: 1.6;
}

/* ── Greeting heading ────────────────────────────────────────────────────── */
.ct-account-greeting {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    margin: 4px 0 24px;
    letter-spacing: -0.02em;
}

/* ── Profile field rows ──────────────────────────────────────────────────── */
.ct-account-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ct-account-field--last {
    border-bottom: none;
    margin-bottom: 24px;
}

.ct-account-field__meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.ct-account-field__label {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ct-account-field__value {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
}

/* ── Inline name edit ────────────────────────────────────────────────────── */
.ct-name-form {
    display: flex;
    flex: 1;
    min-width: 0;
}

.ct-inline-input {
    background: rgba(0, 135, 222, 0.08) !important;
    border: 1px solid rgba(0, 135, 222, 0.40) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    padding: 7px 12px !important;
    width: 100% !important;
    outline: none !important;
}

.ct-inline-input:focus {
    border-color: #0087de !important;
    box-shadow: 0 0 0 3px rgba(0, 135, 222, 0.15) !important;
}

/* ── Action buttons row ──────────────────────────────────────────────────── */
.ct-account-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.ct-account-empty {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.40);
    margin: 12px 0 0;
}

/* ── Order list ──────────────────────────────────────────────────────────── */
.ct-order-list {
    margin-top: 16px;
}

.ct-order-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}

.ct-order-row:last-child {
    border-bottom: none;
}

.ct-order-row__info {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    min-width: 0;
}

.ct-order-row__num {
    font-weight: 700;
    color: #ffffff;
    font-size: 0.9rem;
}

.ct-order-row__date,
.ct-order-row__status {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.45);
}

.ct-order-row__total {
    font-weight: 700;
    color: #0087de;
    font-size: 0.95rem;
    white-space: nowrap;
}

/* ── Button grid (support / legal) ──────────────────────────────────────── */
.ct-account-btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

@media (max-width: 480px) {
    .ct-account-btn-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Form rows ───────────────────────────────────────────────────────────── */
.ct-account-form .ct-form-row,
.ct-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.ct-account-form .ct-form-row:last-of-type,
.ct-form-row:last-of-type {
    margin-bottom: 0;
}

.ct-form-row label {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
}

.ct-form-row input[type="text"],
.ct-form-row input[type="email"],
.ct-form-row input[type="password"] {
    background: #0d0d22 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 0.95rem !important;
    padding: 12px 14px !important;
    width: 100% !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
}

.ct-form-row input:focus {
    border-color: #0087de !important;
    box-shadow: 0 0 0 3px rgba(0, 135, 222, 0.15) !important;
}

.ct-form-row input::placeholder {
    color: rgba(255, 255, 255, 0.22) !important;
    opacity: 1 !important;
}

/* ── OR divider ──────────────────────────────────────────────────────────── */
.ct-or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0;
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.ct-or-divider::before,
.ct-or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.10);
}

/* ── Lost password link ──────────────────────────────────────────────────── */
.ct-lost-password {
    margin: 12px 0 0;
    text-align: center;
    font-size: 0.82rem;
}

.ct-lost-password a {
    color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    transition: color 0.18s;
}

.ct-lost-password a:hover {
    color: #0087de;
}

/* ── Button base ─────────────────────────────────────────────────────────── */
.ct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: opacity 0.18s, transform 0.18s, background 0.18s, border-color 0.18s, color 0.18s;
    white-space: nowrap;
    line-height: 1;
}

.ct-btn:hover {
    text-decoration: none;
}

/* Primary — solid blue */
.ct-btn--primary {
    background: #0087de;
    color: #ffffff;
    box-shadow: 0 0 24px rgba(0, 135, 222, 0.30);
}

.ct-btn--primary:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    color: #ffffff;
}

/* Outline */
.ct-btn--outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.80);
}

.ct-btn--outline:hover {
    border-color: rgba(0, 135, 222, 0.55);
    color: #ffffff;
    background: rgba(0, 135, 222, 0.07);
}

/* Ghost */
.ct-btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.45);
}

.ct-btn--ghost:hover {
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.75);
}

/* Danger */
.ct-btn--danger {
    background: rgba(220, 50, 50, 0.85);
    color: #ffffff;
    border: none;
}

.ct-btn--danger:hover {
    background: #dc2626;
    color: #ffffff;
}

/* Full width */
.ct-btn--full {
    width: 100%;
    margin-top: 8px;
}

/* Small */
.ct-btn--sm {
    padding: 8px 14px;
    font-size: 0.72rem;
}

/* ── Sign in button in auth card ─────────────────────────────────────────── */
.ct-account-card--auth .ct-btn--primary {
    padding: 15px 20px;
    font-size: 0.82rem;
}

.ct-account-card--auth .ct-btn--outline {
    padding: 14px 20px;
    font-size: 0.82rem;
    border-color: rgba(255, 255, 255, 0.15);
}

/* ── Delete confirm modal ────────────────────────────────────────────────── */
.ct-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ct-confirm-modal {
    background: #12122a;
    border: 1px solid rgba(0, 135, 222, 0.25);
    border-radius: 16px;
    padding: 40px 36px;
    max-width: 420px;
    width: 100%;
    text-align: center;
}

.ct-confirm-modal h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 12px;
}

.ct-confirm-modal p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.50);
    margin: 0 0 28px;
    line-height: 1.6;
}

.ct-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── WC notice styling on account page ──────────────────────────────────── */
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-info {
    border-radius: 10px !important;
    margin-bottom: 20px !important;
}

/* Suppress WC's default "my account" content wrapper styles */
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* ── Center login card in viewport ──────────────────────────────────────── */
.woocommerce-account:not(.logged-in) .ct-section {
    min-height: calc(100vh - 160px);
    display: flex;
    align-items: center;
    padding: 60px 0;
}

.woocommerce-account:not(.logged-in) .ct-wrap {
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. VIEW ORDER PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Back link ───────────────────────────────────────────────────────────── */
.ct-order-detail__back {
    margin-bottom: 20px;
}

/* ── Meta grid ───────────────────────────────────────────────────────────── */
.ct-order-detail__meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px 32px;
    margin-bottom: 24px;
}

.ct-order-detail__meta-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ct-order-detail__total-val {
    font-weight: 800 !important;
    color: #0087de !important;
    font-size: 1.05rem !important;
}

/* ── Status badge ────────────────────────────────────────────────────────── */
.ct-order-detail__status {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    width: fit-content;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.60);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.ct-order-status--processing,
.ct-order-status--on-hold {
    background: rgba(0, 135, 222, 0.12);
    color: #4db8ff;
    border-color: rgba(0, 135, 222, 0.30);
}

.ct-order-status--completed {
    background: rgba(34, 197, 94, 0.10);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.25);
}

.ct-order-status--cancelled,
.ct-order-status--refunded,
.ct-order-status--failed {
    background: rgba(239, 68, 68, 0.10);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.25);
}

.ct-order-status--pending {
    background: rgba(245, 158, 11, 0.10);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.25);
}

.ct-order-status--draft {
    background: rgba(139, 92, 246, 0.10);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.25);
}

/* ── Pay now action ──────────────────────────────────────────────────────── */
.ct-order-detail__pay-action {
    margin-top: 8px;
}

/* ── Order items ─────────────────────────────────────────────────────────── */
.ct-order-items {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ct-order-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ct-order-item:last-of-type {
    border-bottom: none;
}

.ct-order-item__thumb {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.ct-order-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ct-order-item__thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

.ct-order-item__info {
    flex: 1;
    min-width: 0;
}

.ct-order-item__name {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    line-height: 1.3;
    margin-bottom: 4px;
}

.ct-order-item__name:hover {
    color: #0087de;
}

.ct-order-item__meta {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ct-order-item__meta-key {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 4px;
}

.ct-order-item__meta-val {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
}

.ct-order-item__qty-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.ct-order-item__qty {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 600;
}

.ct-order-item__price {
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

/* ── Totals table ────────────────────────────────────────────────────────── */
.ct-order-totals {
    margin-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ct-order-totals__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ct-order-totals__row:last-child {
    border-bottom: none;
}

.ct-order-totals__label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.50);
}

.ct-order-totals__label em {
    font-style: normal;
    color: rgba(255, 255, 255, 0.30);
    font-size: 0.78rem;
}

.ct-order-totals__val {
    font-size: 0.90rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.80);
}

.ct-order-totals__row--discount .ct-order-totals__val {
    color: #4ade80;
}

.ct-order-totals__row--grand {
    padding-top: 14px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.ct-order-totals__row--grand .ct-order-totals__label {
    font-size: 0.90rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.80);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ct-order-totals__row--grand .ct-order-totals__val {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0087de;
}

/* ── Addresses ───────────────────────────────────────────────────────────── */
.ct-order-detail__address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 40px;
    margin-top: 20px;
}

@media (max-width: 540px) {
    .ct-order-detail__address-grid {
        grid-template-columns: 1fr;
    }
}

.ct-order-detail__address-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ct-order-detail__address-label {
    font-size: 0.70rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ct-order-detail__address-block address {
    font-style: normal;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.65;
}

.ct-order-detail__address-email {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.45);
}

/* ── Order notes ─────────────────────────────────────────────────────────── */
.ct-order-notes {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ct-order-note {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ct-order-note:last-child {
    border-bottom: none;
}

.ct-order-note__date {
    font-size: 0.70rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.30);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ct-order-note__text {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 540px) {
    .ct-order-detail__meta-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ct-order-item__thumb {
        width: 48px;
        height: 48px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. CHECKOUT PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Kill WooCommerce default floats / widths on checkout pages ──────────── */
.woocommerce-checkout .woocommerce,
.woocommerce-order-pay .woocommerce {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    float: none !important;
    width: 100% !important;
}

.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
    float: none !important;
    width: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT — two-column layout (ct-checkout-form)
   ═══════════════════════════════════════════════════════════════════════════ */

.ct-checkout-form {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 32px !important;
    align-items: flex-start !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Left column — billing/shipping fields */
.ct-checkout-left {
    flex: 1 1 480px !important;
    min-width: 0 !important;
}

/* Right column — order review + payment */
.ct-checkout-right {
    flex: 0 0 460px !important;
    width: 460px !important;
    max-width: 100% !important;
    position: sticky !important;
    top: 120px !important;
}

@media (max-width: 920px) {
    .ct-checkout-left,
    .ct-checkout-right {
        flex: 1 1 100% !important;
        width: 100% !important;
        position: static !important;
    }
}

/* Card wrapper for each section */
.ct-checkout-section {
    background: #12122a !important;
    border: 1px solid rgba(0, 135, 222, 0.18) !important;
    border-radius: 16px !important;
    padding: 28px 32px !important;
    margin-bottom: 20px !important;
}

.ct-checkout-section > .ct-account-eyebrow {
    margin-bottom: 20px !important;
}

@media (max-width: 600px) {
    .ct-checkout-section {
        padding: 22px 20px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORDER-PAY PAGE — two-column layout at ct-wrap level (ct-pay-outer)
   ═══════════════════════════════════════════════════════════════════════════ */

/* The .woocommerce shortcode wrapper inside ct-pay-payment must not constrain */
.ct-pay-payment .woocommerce {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

.ct-pay-outer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    width: 100%;
}

@media (max-width: 960px) {
    .ct-pay-outer {
        grid-template-columns: 1fr;
    }

    .ct-pay-payment {
        position: static !important;
    }
}

/* Left: order summary card */
.ct-pay-summary {
    background: #12122a;
    border: 1px solid rgba(0, 135, 222, 0.18);
    border-radius: 16px;
    padding: 32px 36px;
    min-width: 0;
}

/* Right: payment card */
.ct-pay-payment {
    min-width: 0;
    position: sticky;
    top: 120px;
    background: #12122a;
    border: 1px solid rgba(0, 135, 222, 0.18);
    border-radius: 16px;
    padding: 32px 32px 28px;
}

@media (max-width: 960px) {
    .ct-pay-summary,
    .ct-pay-payment {
        position: static;
    }
}

.ct-pay-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 6px 0 24px;
}

/* Items in order-pay summary */
.ct-pay-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 4px;
}

.ct-pay-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ct-pay-item:last-child {
    border-bottom: none;
}

.ct-pay-item__thumb {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.ct-pay-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ct-pay-item__thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

.ct-pay-item__info {
    flex: 1;
    min-width: 0;
}

.ct-pay-item__name {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    line-height: 1.3;
}

.ct-pay-item__name:hover {
    color: #0087de;
}

.ct-pay-item__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.ct-pay-item__qty {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 600;
}

.ct-pay-item__price {
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.80);
}

/* Totals in order-pay summary */
.ct-pay-totals {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 12px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
}

.ct-pay-totals__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ct-pay-totals__row:last-child {
    border-bottom: none;
}

.ct-pay-totals__label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.50);
}

.ct-pay-totals__val {
    font-size: 0.90rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.80);
}

.ct-pay-totals__row--grand {
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.ct-pay-totals__row--grand .ct-pay-totals__label {
    font-size: 0.90rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.80);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ct-pay-totals__row--grand .ct-pay-totals__val {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0087de;
}

/* Order meta row at bottom of summary */
.ct-pay-meta {
    display: flex;
    gap: 24px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}

.ct-pay-meta__item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ct-pay-meta__label {
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.30);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.ct-pay-meta__val {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.70);
}

/* Payment elements inside the ct-pay-payment card — no extra card needed */
.ct-pay-payment #payment,
.ct-pay-payment .woocommerce #payment {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ct-pay-form {
    margin: 0 !important;
    padding: 0 !important;
}

/* Kill the white fieldset box WooCommerce wraps around Stripe elements */
.ct-pay-payment fieldset,
.ct-pay-payment fieldset#wc-stripe-cc-form,
.ct-pay-payment .payment_method_stripe fieldset,
.ct-pay-payment .wc-stripe-payment-element-wrapper,
.ct-pay-payment #wc-stripe-payment-element,
.ct-pay-payment .wc-stripe-upe-element,
.ct-pay-payment #stripe-card-element,
.ct-pay-payment #wc-stripe-card-element {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Individual legacy StripeElement iframes */
.ct-pay-payment .StripeElement {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(0, 135, 222, 0.22) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
}

.ct-pay-payment .StripeElement--focus {
    border-color: rgba(0, 135, 222, 0.60) !important;
    box-shadow: 0 0 0 3px rgba(0, 135, 222, 0.15) !important;
}

.ct-pay-payment .StripeElement--invalid {
    border-color: #e74c3c !important;
}

/* Stripe payment method radio label */
.ct-pay-payment .wc_payment_method label {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* payment_box — no double-card, no background */
.ct-pay-payment .payment_box {
    background: transparent !important;
    border: none !important;
    padding: 12px 0 0 !important;
    margin: 0 !important;
}

.ct-pay-payment .payment_box::before {
    display: none !important;
}

/* Place order button in pay form */
.ct-place-order {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    background: #0087de !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 16px 24px !important;
    cursor: pointer !important;
    box-shadow: 0 0 24px rgba(0, 135, 222, 0.30) !important;
    transition: opacity 0.18s, transform 0.18s !important;
    margin-top: 16px !important;
    float: none !important;
}

.ct-place-order:hover {
    opacity: 0.88 !important;
    transform: translateY(-1px) !important;
}

/* WooCommerce Blocks checkout sidebar (fallback) */
.wp-block-woocommerce-checkout .wc-block-checkout {
    max-width: 100% !important;
    gap: 32px !important;
}

.wp-block-woocommerce-checkout .wc-block-checkout__main {
    flex: 1 1 480px !important;
}

.wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
    flex: 0 0 460px !important;
    width: 460px !important;
    max-width: 100% !important;
}

@media (max-width: 920px) {
    .wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}

/* ── Checkout h3 headings ────────────────────────────────────────────────── */
.ct-checkout-form h3,
.woocommerce-checkout h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.90rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: none !important;
}

/* ── Billing/shipping field groups — no extra card (wrapped by ct-checkout-section) */
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Field wrappers & labels ─────────────────────────────────────────────── */
.woocommerce-checkout .form-row {
    margin-bottom: 20px !important;
    padding: 0 !important;
}

.woocommerce-checkout .form-row label {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    margin: 0 0 8px !important;
    display: block !important;
    position: static !important;
    transform: none !important;
}

.woocommerce-checkout .form-row .required {
    color: #0087de !important;
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    background: #0d0d22 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.92rem !important;
    padding: 13px 16px !important;
    width: 100% !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
    height: auto !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
    border-color: #0087de !important;
    box-shadow: 0 0 0 3px rgba(0, 135, 222, 0.15) !important;
}

.woocommerce-checkout .form-row input.input-text::placeholder,
.woocommerce-checkout .form-row textarea::placeholder {
    color: rgba(255, 255, 255, 0.20) !important;
    opacity: 1 !important;
}

.woocommerce-checkout .form-row select option {
    background: #12122a !important;
    color: #ffffff !important;
}

/* ── Half-width side-by-side fields — clear floats, use inline-block ────── */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 16px !important;
}

.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 160px !important;
    float: none !important;
    width: auto !important;
}

.woocommerce-checkout .form-row-wide {
    flex: 1 1 100% !important;
    float: none !important;
    clear: none !important;
}

@media (max-width: 480px) {
    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last {
        flex: 1 1 100% !important;
    }
}

/* ── Country/state select2 overrides ────────────────────────────────────── */
.woocommerce-checkout .select2-container--default .select2-selection--single {
    background: #0d0d22 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
    line-height: 1 !important;
    padding-left: 16px !important;
    font-size: 0.92rem !important;
    font-family: 'Montserrat', sans-serif !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px !important;
    right: 12px !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: rgba(255,255,255,0.40) transparent transparent transparent !important;
}

.select2-dropdown {
    background: #12122a !important;
    border: 1px solid rgba(0, 135, 222, 0.25) !important;
    border-radius: 8px !important;
}

.select2-results__option {
    color: rgba(255,255,255,0.80) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.88rem !important;
    padding: 10px 14px !important;
}

.select2-results__option--highlighted {
    background: rgba(0, 135, 222, 0.18) !important;
    color: #ffffff !important;
}

.select2-search--dropdown .select2-search__field {
    background: #0d0d22 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    padding: 8px 12px !important;
    outline: none !important;
}

/* ── Order review table (in regular checkout, card comes from ct-checkout-section) */
.ct-checkout-right #order_review {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.woocommerce-checkout-review-order-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 0 !important;
}

.woocommerce-checkout-review-order-table thead th {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.35) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    padding: 0 0 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.woocommerce-checkout-review-order-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.woocommerce-checkout-review-order-table tbody td {
    padding: 12px 0 !important;
    font-size: 0.88rem !important;
    color: rgba(255, 255, 255, 0.80) !important;
    vertical-align: middle !important;
    border: none !important;
}

.woocommerce-checkout-review-order-table tfoot tr th,
.woocommerce-checkout-review-order-table tfoot tr td {
    padding: 10px 0 !important;
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding-top: 14px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}

.woocommerce-checkout-review-order-table tfoot .order-total td strong {
    color: #0087de !important;
    font-size: 1.05rem !important;
}

/* ── Product names in review ─────────────────────────────────────────────── */
.woocommerce-checkout-review-order-table .product-name {
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.woocommerce-checkout-review-order-table .product-quantity {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 0.80rem !important;
}

/* ── Order summary mobile ────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .woocommerce-checkout-review-order-table {
        font-size: 0.82rem !important;
    }
    .woocommerce-checkout-review-order-table thead th {
        font-size: 0.65rem !important;
        padding: 0 0 8px !important;
    }
    .woocommerce-checkout-review-order-table tbody td,
    .woocommerce-checkout-review-order-table tfoot tr th,
    .woocommerce-checkout-review-order-table tfoot tr td {
        padding: 10px 0 !important;
        font-size: 0.82rem !important;
    }
    .woocommerce-checkout-review-order-table .product-name {
        max-width: 55vw !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    .woocommerce-checkout-review-order-table tfoot,
    .woocommerce-checkout-review-order-table tfoot tr {
        background: transparent !important;
    }
    /* Prevent the order summary card from overflowing the viewport */
    .ct-checkout-right .ct-checkout-section {
        overflow-x: hidden !important;
    }
}

/* ── Payment box ─────────────────────────────────────────────────────────── */
#payment {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* In checkout right column, #payment sits inside ct-checkout-section card */
.ct-checkout-right #payment,
/* In order-pay, #payment sits inside ct-pay-payment card */
.ct-pay-payment #payment {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

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

#payment .payment_methods li {
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#payment .payment_methods li:last-child {
    border-bottom: none !important;
}

#payment .payment_methods label {
    font-size: 0.90rem !important;
    color: rgba(255, 255, 255, 0.80) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

#payment .payment_methods input[type="radio"] {
    accent-color: #0087de !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

#payment .payment_box {
    background: rgba(0, 135, 222, 0.06) !important;
    border: 1px solid rgba(0, 135, 222, 0.15) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    margin: 10px 0 4px !important;
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
    line-height: 1.6 !important;
}

/* ── Place order button ──────────────────────────────────────────────────── */
#payment #place_order,
.woocommerce-checkout #place_order {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    background: #0087de !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 16px 24px !important;
    cursor: pointer !important;
    box-shadow: 0 0 24px rgba(0, 135, 222, 0.30) !important;
    transition: opacity 0.18s, transform 0.18s !important;
    margin-top: 8px !important;
}

#payment #place_order:hover,
.woocommerce-checkout #place_order:hover {
    opacity: 0.88 !important;
    transform: translateY(-1px) !important;
}

/* ── Privacy/terms notice ────────────────────────────────────────────────── */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    font-size: 0.78rem !important;
    color: rgba(255, 255, 255, 0.30) !important;
    margin-bottom: 16px !important;
    line-height: 1.55 !important;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a {
    color: rgba(255, 255, 255, 0.50) !important;
    text-decoration: underline !important;
}

/* ── Returning customer login notice ────────────────────────────────────── */
.woocommerce-info {
    background: rgba(0, 135, 222, 0.08) !important;
    border: 1px solid rgba(0, 135, 222, 0.20) !important;
    border-radius: 10px !important;
    color: rgba(255, 255, 255, 0.65) !important;
    padding: 14px 18px !important;
    font-size: 0.85rem !important;
    margin-bottom: 24px !important;
    list-style: none !important;
}

.woocommerce-info::before {
    color: #0087de !important;
}

.woocommerce-info a {
    color: #0087de !important;
    font-weight: 600 !important;
}

/* ── Coupon row ──────────────────────────────────────────────────────────── */
.woocommerce-checkout .checkout_coupon {
    background: rgba(0, 135, 222, 0.06) !important;
    border: 1px solid rgba(0, 135, 222, 0.18) !important;
    border-radius: 10px !important;
    padding: 20px 24px !important;
    margin-bottom: 24px !important;
}

.woocommerce-checkout .checkout_coupon p {
    color: rgba(255,255,255,0.50) !important;
    font-size: 0.85rem !important;
    margin-bottom: 12px !important;
}

.woocommerce-checkout .checkout_coupon .form-row {
    display: flex !important;
    gap: 10px !important;
    margin: 0 !important;
}

.woocommerce-checkout .checkout_coupon input[type="text"] {
    flex: 1 !important;
}

.woocommerce-checkout .checkout_coupon .button {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 8px !important;
    color: rgba(255,255,255,0.75) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    padding: 0 18px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: border-color 0.18s, color 0.18s !important;
}

.woocommerce-checkout .checkout_coupon .button:hover {
    border-color: rgba(0, 135, 222, 0.55) !important;
    color: #ffffff !important;
}

/* ── Field validation errors ─────────────────────────────────────────────── */
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select {
    border-color: rgba(239, 68, 68, 0.60) !important;
}

.woocommerce-checkout .form-row.woocommerce-valid input.input-text,
.woocommerce-checkout .form-row.woocommerce-valid select {
    border-color: rgba(34, 197, 94, 0.40) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WOOCOMMERCE BLOCKS CHECKOUT
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Outer block wrapper — remove default padding WC Blocks adds ── */
.wp-block-woocommerce-checkout {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* ── Two-column layout
 * WC Blocks uses .wc-block-components-sidebar-layout as the flex container,
 * .wc-block-components-main for the left (form) column,
 * .wc-block-components-sidebar for the right (order summary) column.
 * We also target the older .wc-block-checkout__* aliases for safety.
 ── */
.wc-block-components-sidebar-layout,
.wc-block-checkout {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 32px !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Left / form column */
.wc-block-components-main,
.wc-block-checkout__main {
    flex: 1 1 460px !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Right / summary column */
.wc-block-components-sidebar,
.wc-block-checkout__sidebar {
    flex: 0 0 380px !important;
    width: 380px !important;
    max-width: 100% !important;
    padding: 0 !important;
    position: sticky !important;
    top: 120px !important;
    box-sizing: border-box !important;
}

@media (max-width: 900px) {
    .wc-block-components-main,
    .wc-block-checkout__main,
    .wc-block-components-sidebar,
    .wc-block-checkout__sidebar {
        flex: 1 1 100% !important;
        width: 100% !important;
        position: static !important;
    }
}

/* ── Form steps — card style matching the rest of the site ── */
.wc-block-components-form-step {
    background: #12122a !important;
    border: 1px solid rgba(0, 135, 222, 0.18) !important;
    border-radius: 16px !important;
    padding: 28px 32px !important;
    margin-bottom: 20px !important;
}

@media (max-width: 600px) {
    .wc-block-components-form-step {
        padding: 22px 20px !important;
    }
}

/* ── Step headings (Contact information, Shipping address, etc.) ── */
.wc-block-components-form-step__heading,
.wc-block-components-form-step__heading * {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.0rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* ── Express checkout — hidden (user preference) ── */
.wp-block-woocommerce-checkout-express-payment-block,
.wc-block-components-express-payment,
.wc-block-components-express-payment-continue-rule {
    display: none !important;
}

/* ── Text inputs (floating-label wrapper) ── */
/*
 * WC Blocks renders label AFTER input in the DOM for floating-label CSS tricks.
 * We use flex-direction:column-reverse so the label visually appears above the
 * input without touching the HTML, then convert the label to a static header.
 */
.wc-block-components-text-input,
.wc-block-components-country-input,
.wc-block-components-state-input {
    display: flex !important;
    flex-direction: column-reverse !important;
    position: static !important;
    margin-bottom: 16px !important;
}

/* Label — last in DOM, floats visually to top via column-reverse */
.wc-block-components-text-input label,
.wc-block-components-country-input label,
.wc-block-components-state-input label {
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 8px !important;
    /* Kill all WC Blocks floating-label absolute positioning */
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    pointer-events: auto !important;
    transition: none !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    opacity: 1 !important;
}

/* Keep label static regardless of JS-toggled classes */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input.has-error label,
.wc-block-components-country-input.is-active label,
.wc-block-components-state-input.is-active label {
    position: static !important;
    transform: none !important;
    font-size: 0.68rem !important;
    color: rgba(255, 255, 255, 0.45) !important;
    margin-bottom: 8px !important;
}

/* Actual input fields ── */
.wc-block-components-text-input input,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="password"] {
    background: #0d0d22 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.92rem !important;
    /* Uniform padding — no extra top for floating label */
    padding: 13px 16px !important;
    width: 100% !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
    height: auto !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-country-input input:focus,
.wc-block-components-state-input input:focus {
    border-color: #0087de !important;
    box-shadow: 0 0 0 3px rgba(0, 135, 222, 0.15) !important;
}

.wc-block-components-text-input input::placeholder {
    color: rgba(255, 255, 255, 0.20) !important;
    opacity: 1 !important;
}

/* Validation states ── */
.wc-block-components-text-input.has-error input {
    border-color: rgba(239, 68, 68, 0.60) !important;
}

.wc-block-components-validation-error {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.75rem !important;
    color: rgba(239, 68, 68, 0.85) !important;
    margin-top: 6px !important;
}

/* ── Select / country dropdowns ── */
.wc-block-components-country-input .wc-block-components-combobox,
.wc-block-components-state-input .wc-block-components-combobox {
    background: #0d0d22 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.92rem !important;
    padding: 13px 16px !important;
    width: 100% !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.wc-block-components-combobox-control,
.wc-block-components-combobox-control input {
    background: #0d0d22 !important;
    color: #ffffff !important;
    border: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.92rem !important;
}

/* ── Address form two-column grid ── */
.wc-block-components-address-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 16px !important;
}

.wc-block-components-address-form .wc-block-components-text-input,
.wc-block-components-address-form .wc-block-components-country-input,
.wc-block-components-address-form .wc-block-components-state-input {
    grid-column: span 2 !important;
}

.wc-block-components-address-form .wc-block-components-text-input:first-child,
.wc-block-components-address-form .wc-block-components-text-input:nth-child(2) {
    grid-column: span 1 !important;
}

/* Force first_name and last_name to always be exactly equal width */
.wc-block-components-address-form .wc-block-components-address-form__first_name,
.wc-block-components-address-form .wc-block-components-address-form__last_name {
    grid-column: span 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 540px) {
    .wc-block-components-address-form {
        grid-template-columns: 1fr !important;
    }
    .wc-block-components-address-form .wc-block-components-text-input,
    .wc-block-components-address-form .wc-block-components-text-input:first-child,
    .wc-block-components-address-form .wc-block-components-text-input:nth-child(2) {
        grid-column: span 1 !important;
    }
}

/* ── Checkboxes ── */
.wc-block-components-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
}

.wc-block-components-checkbox input[type="checkbox"] {
    accent-color: #0087de !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

.wc-block-components-checkbox__label {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.70) !important;
    cursor: pointer !important;
}

/* ── Shipping rates / radio controls ── */
.wc-block-components-shipping-rates-control__package {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.wc-block-components-radio-control {
    margin: 0 !important;
    padding: 0 !important;
}

/*
 * WC Blocks absolutely positions the radio circle at left:16px inside the option,
 * then uses 48px left-padding to push text clear of it.
 * We keep that layout but fix: white box ::after, white circle background,
 * and black ::before dot on checked state.
 */
.wc-block-components-radio-control__option {
    /* keep WC Blocks block + absolute-input layout */
    display: block !important;
    position: relative !important;
    padding: 12px 16px 12px 48px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    cursor: pointer !important;
    background: transparent !important;
}

.wc-block-components-radio-control__option:last-child {
    border-bottom: none !important;
}

/* Kill the white-box ::after that WC Blocks uses for highlight borders */
.wc-block-components-radio-control__option::after,
.wc-block-components-radio-control--highlight-checked::after,
.wc-block-components-radio-control-accordion-option::after {
    display: none !important;
}

/* The custom radio circle — WC Blocks hardcodes background:#fff here */
.wc-block-components-radio-control .wc-block-components-radio-control__input {
    background: #0d0d22 !important;
    border-color: rgba(255, 255, 255, 0.30) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
    background: #0d0d22 !important;
    border-color: #0087de !important;
}

/* The inner dot — WC Blocks hardcodes background:#000 here */
.wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
    background: #0087de !important;
    /* keep WC Blocks sizing */
    content: "" !important;
    border-radius: 50% !important;
    display: block !important;
    height: 10px !important;
    width: 10px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.wc-block-components-radio-control__option--checked-option-highlighted {
    box-shadow: none !important;
}

.wc-block-components-radio-control__label,
.wc-block-components-radio-control__label-group {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.88rem !important;
    color: rgba(255, 255, 255, 0.80) !important;
}

.wc-block-components-radio-control__secondary-label {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 0.85rem !important;
}

/* ── Payment methods ── */
/*
 * WC Blocks payment methods use .wc-block-components-radio-control-accordion-option
 * with ::after pseudo-elements for the white outline box. We kill those and apply
 * our own dark card style.
 */
.wc-block-components-payment-methods,
.wc-block-checkout__payment-method .wc-block-components-radio-control {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: none !important;
    background: transparent !important;
}

/* The outer wrapper that gets a white border by default */
.wc-block-checkout__payment-method {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Each payment option row */
.wc-block-components-radio-control-accordion-option {
    background: transparent !important;
    border: none !important;
}

/* Kill ALL ::after pseudo white-box borders in payment section */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option::after,
.wc-block-checkout__payment-method .wc-block-components-radio-control__option::after,
.wc-block-checkout__payment-method .wc-block-components-radio-control::after {
    display: none !important;
    border: none !important;
    background: none !important;
    content: none !important;
}

/* Payment accordion content (card details area) */
.wc-block-components-radio-control-accordion-content {
    background: rgba(0, 135, 222, 0.06) !important;
    border: 1px solid rgba(0, 135, 222, 0.15) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    margin-top: 8px !important;
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

.wc-block-components-payment-method__content {
    background: rgba(0, 135, 222, 0.06) !important;
    border: 1px solid rgba(0, 135, 222, 0.15) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    margin-top: 10px !important;
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Test mode badge ── */
.wc-block-gateway-container .payment-method-test-badge,
[class*="payment_method_test-mode"] {
    background: rgba(255, 193, 7, 0.15) !important;
    color: rgba(255, 193, 7, 0.90) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

/* ── Order notes textarea ── */
.wc-block-components-order-note-container textarea,
.wc-block-components-form-step textarea {
    background: #0d0d22 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.90rem !important;
    padding: 13px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    resize: vertical !important;
    outline: none !important;
    transition: border-color 0.18s !important;
}

.wc-block-components-order-note-container textarea:focus,
.wc-block-components-form-step textarea:focus {
    border-color: #0087de !important;
    box-shadow: 0 0 0 3px rgba(0, 135, 222, 0.15) !important;
}

/* ── Terms and privacy notice ── */
.wc-block-components-checkout-step__description,
.wc-block-components-privacy-policy {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.78rem !important;
    color: rgba(255, 255, 255, 0.30) !important;
    line-height: 1.55 !important;
    margin-bottom: 12px !important;
}

.wc-block-components-privacy-policy a,
.wc-block-components-checkout-step__description a {
    color: rgba(255, 255, 255, 0.50) !important;
    text-decoration: underline !important;
}

/* ── Place order button ── */
.wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button.wc-block-components-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    background: #0087de !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 16px 24px !important;
    cursor: pointer !important;
    box-shadow: 0 0 24px rgba(0, 135, 222, 0.30) !important;
    transition: opacity 0.18s, transform 0.18s !important;
    margin-top: 16px !important;
}

.wc-block-components-checkout-place-order-button:hover {
    opacity: 0.88 !important;
    transform: translateY(-1px) !important;
}

/* ── Return to cart link ── */
.wc-block-components-checkout-return-to-cart-button {
    display: block !important;
    text-align: center !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.35) !important;
    text-decoration: none !important;
    margin-top: 14px !important;
    letter-spacing: 0.04em !important;
    transition: color 0.18s !important;
}

.wc-block-components-checkout-return-to-cart-button:hover {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ── Sidebar: single unified card ── */
/* The entire sidebar column is one dark card. All child blocks are flat inside it. */
.wc-block-components-sidebar,
.wc-block-checkout__sidebar {
    background: #12122a !important;
    border: 1px solid rgba(0, 135, 222, 0.18) !important;
    border-radius: 16px !important;
    padding: 24px 28px !important;
    overflow: hidden !important;
}

/* Strip card/border styling from every child block inside the sidebar */
.wc-block-components-sidebar > *,
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-sidebar .wc-block-components-order-summary,
.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-components-sidebar .wc-block-components-totals-coupon,
.wc-block-components-sidebar [class*="wp-block-woocommerce-checkout-order-summary"],
.wc-block-checkout__sidebar > *,
.wc-block-checkout__sidebar .wc-block-components-panel,
.wc-block-checkout__sidebar .wc-block-components-order-summary,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Order summary heading ── */
.wc-block-components-order-summary__button,
.wc-block-components-panel__button {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    background: none !important;
    border: none !important;
    padding: 0 0 16px !important;
    width: 100% !important;
    text-align: left !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Order item rows ── */
.wc-block-components-order-summary-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.wc-block-components-order-summary-item:last-child {
    border-bottom: none !important;
}

.wc-block-components-order-summary-item__image img {
    border-radius: 6px !important;
}

.wc-block-components-order-summary-item__description {
    flex: 1 !important;
}

.wc-block-components-order-summary-item__full-name {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.wc-block-components-order-summary-item__quantity {
    font-size: 0.78rem !important;
    color: rgba(255, 255, 255, 0.35) !important;
}

.wc-block-components-order-summary-item__individual-prices {
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.70) !important;
    text-align: right !important;
}

/* ── Totals items — flat rows inside the unified sidebar card ── */
.wc-block-components-totals-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 0 !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.55) !important;
}

.wc-block-components-totals-item:first-child {
    border-top: none !important;
}

/* Divider between order items list and totals rows */
.wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-totals-block,
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-totals-block {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
}

.wc-block-components-totals-footer-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    margin-top: 4px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.0rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.35) !important;
}

.wc-block-formatted-money-amount {
    font-family: 'Montserrat', sans-serif !important;
}

.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
    color: #0087de !important;
}

/* ── Coupon in sidebar ── */
.wc-block-components-totals-coupon {
    padding: 12px 0 !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: none !important;
    border-radius: 0 !important;
}

.wc-block-components-totals-coupon__form {
    display: flex !important;
    gap: 10px !important;
}

.wc-block-components-totals-coupon__input input {
    background: #0d0d22 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.88rem !important;
    padding: 10px 14px !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.18s !important;
}

.wc-block-components-totals-coupon__input input:focus {
    border-color: #0087de !important;
    box-shadow: 0 0 0 3px rgba(0, 135, 222, 0.15) !important;
}

.wc-block-components-totals-coupon__button {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    padding: 0 16px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: border-color 0.18s, color 0.18s !important;
}

.wc-block-components-totals-coupon__button:hover {
    border-color: rgba(0, 135, 222, 0.55) !important;
    color: #ffffff !important;
}

/* ── Notices / alerts ── */
.wc-block-components-notice-banner,
.wc-block-components-notice {
    background: rgba(0, 135, 222, 0.08) !important;
    border: 1px solid rgba(0, 135, 222, 0.20) !important;
    border-radius: 10px !important;
    color: rgba(255, 255, 255, 0.65) !important;
    padding: 14px 18px !important;
    font-size: 0.85rem !important;
    margin-bottom: 20px !important;
}

.wc-block-components-notice-banner a,
.wc-block-components-notice a {
    color: #0087de !important;
    font-weight: 600 !important;
}

/* ── Loading spinner ── */
.wc-block-components-spinner::after {
    border-color: rgba(255, 255, 255, 0.15) !important;
    border-top-color: #0087de !important;
}

/* ── Blocks checkout: "By proceeding" text ── */
.wc-block-checkout__terms {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.78rem !important;
    color: rgba(255, 255, 255, 0.30) !important;
    text-align: center !important;
    margin-top: 12px !important;
    line-height: 1.55 !important;
}

.wc-block-checkout__terms a {
    color: rgba(255, 255, 255, 0.50) !important;
    text-decoration: underline !important;
}

/* ── Address card (saved address display) ── */
/* WC Blocks hardcodes a near-black secondary colour and a currentColor border */
.wc-block-components-address-card {
    background: #0d0d22 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.88rem !important;
    padding: 14px 16px !important;
}

.wc-block-components-address-card address {
    color: #ffffff !important;
}

/* Primary line (name) */
.wc-block-components-address-card__address-section--primary {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Secondary line (full address) — WC Blocks sets hsla(0,0%,7%,.7) = near-black */
.wc-block-components-address-card__address-section--secondary,
.wc-block-components-address-card address .wc-block-components-address-card__address-section--secondary {
    color: rgba(255, 255, 255, 0.55) !important;
}

.wc-block-components-address-card__edit {
    color: #0087de !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    margin-left: auto !important;
}

.wc-block-components-address-card__edit:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ── Kill ALL white-box pseudo-elements from highlight-checked pattern ── */
/* WC Blocks uses ::after on .radio-control--highlight-checked and its children
   with color-mix(currentColor 20%) = white on dark backgrounds */
.wc-block-components-radio-control--highlight-checked::after,
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option::after,
.wc-block-components-radio-control--highlight-checked div.wc-block-components-radio-control-accordion-option::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
}

/* Kill inset white box-shadow on checked accordion option */
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* The payment method container (wraps all the accordion options) */
.wc-block-checkout__payment-method .wc-block-components-radio-control--highlight-checked {
    border: none !important;
    background: transparent !important;
}

/* Any remaining ::after on payment accordion options */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option::after,
.wc-block-checkout__payment-method .wc-block-components-radio-control__option::after {
    display: none !important;
    content: none !important;
}

/* ── Step description text (e.g. contact info description) ── */
.wc-block-components-checkout-step__description {
    color: rgba(255, 255, 255, 0.40) !important;
    font-size: 0.80rem !important;
    font-family: 'Montserrat', sans-serif !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

/* ── Global: kill any remaining color-mix white borders on dark bg ── */
.wc-block-checkout .wc-block-components-panel,
.wc-block-components-sidebar .wc-block-components-panel {
    border: none !important;
    background: transparent !important;
}

/* ── Any h2/h3 inside form steps ── */
.wc-block-checkout .wc-block-components-form-step h2,
.wc-block-checkout .wc-block-components-form-step h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.0rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: none !important;
    text-transform: none !important;
}

/* ── "Or continue below" divider ── */
.wc-block-components-express-payment__title-text,
.wc-block-components-express-payment-continue-rule__text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.70rem !important;
    color: rgba(255, 255, 255, 0.35) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX: CHECKOUT WHITE BOX — WC Blocks uses wc-blocks-components-select
   (note plural "blocks") with background:#fff baked into the plugin CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

.wc-blocks-components-select .wc-blocks-components-select__container,
.wc-blocks-components-select .wc-blocks-components-select__container:focus {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    line-height: normal !important;
}

.wc-blocks-components-select .wc-blocks-components-select__select {
    background: #0d0d22 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.92rem !important;
    height: auto !important;
    padding: 13px 36px 13px 16px !important;
}

.wc-blocks-components-select .wc-blocks-components-select__select:focus {
    border-color: #0087de !important;
    box-shadow: 0 0 0 3px rgba(0, 135, 222, 0.15) !important;
}

.wc-blocks-components-select .wc-blocks-components-select__label {
    color: rgba(255, 255, 255, 0.45) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
}

.wc-blocks-components-select .wc-blocks-components-select__expand {
    fill: rgba(255, 255, 255, 0.6) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX: CHECKOUT ORDER SUMMARY MOBILE — WC Blocks sidebar on small screens
   ═══════════════════════════════════════════════════════════════════════════ */

/* Kill color-mix borders that WC Blocks bakes onto the order summary block —
   these appear as white/light outlines on the dark sidebar card */
.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block * {
    border-color: rgba(255, 255, 255, 0.07) !important;
}

/* Order summary collapsible title borders */
.wc-block-components-checkout-order-summary__title,
.wc-block-components-panel__button {
    border-top-color: rgba(255, 255, 255, 0.07) !important;
    border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

/* Opened content bottom border */
.wc-block-components-checkout-order-summary__content.is-open {
    border-bottom-color: rgba(255, 255, 255, 0.07) !important;
}

@media (max-width: 600px) {
    .wc-block-components-sidebar,
    .wc-block-checkout__sidebar {
        padding: 20px 18px !important;
    }

    .wc-block-components-order-summary-item {
        gap: 10px !important;
        padding: 10px 0 !important;
    }

    .wc-block-components-order-summary-item__image {
        width: 44px !important;
        flex-shrink: 0 !important;
    }

    .wc-block-components-order-summary-item__image > img {
        width: 44px !important;
        max-width: 44px !important;
    }

    .wc-block-components-order-summary-item__full-name {
        font-size: 0.82rem !important;
    }

    .wc-block-components-order-summary-item__individual-prices {
        font-size: 0.82rem !important;
        min-width: 56px !important;
    }

    .wc-block-components-totals-item {
        font-size: 0.82rem !important;
        padding: 8px 0 !important;
    }

    .wc-block-components-totals-footer-item {
        font-size: 0.92rem !important;
        padding: 12px 0 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX: DUPLICATE ORDER SUMMARY — WC Blocks renders a "fill-wrapper" order
   summary inside the fields area (shown on mobile), PLUS the sidebar order
   summary (shown first on mobile via order:0). This hides the duplicate and
   removes the collapsible toggle so the sidebar summary is always open.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide the fill-wrapper duplicate (rendered inside the fields column on mobile) */
.wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper {
    display: none !important;
}

/* Remove the accordion/toggle — always show order summary content */
.wc-block-components-checkout-order-summary__title-open-close,
.wc-block-components-checkout-order-summary__title-icon,
.wc-block-components-checkout-order-summary__title-price {
    display: none !important;
}

.wc-block-components-checkout-order-summary__title {
    cursor: default !important;
    pointer-events: none !important;
    padding: 16px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-bottom: none !important;
}

.wc-block-components-checkout-order-summary__content,
.wc-block-components-checkout-order-summary__content.is-open {
    display: block !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX: CART & CHECKOUT IMAGES — WC Blocks cart uses wc-block-cart-item__image
   and checkout order summary uses wc-block-components-order-summary-item__image.
   The <a> inside the image cell has no display:block in loaded state, which
   can collapse the image in some browsers/layouts.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cart block — image column */
.wc-block-cart-item__image {
    width: 80px !important;
    min-width: 80px !important;
}

.wc-block-cart-item__image a {
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: linear-gradient(145deg, #0a0a1e, #0f0f28) !important;
    flex-shrink: 0 !important;
}

.wc-block-cart-item__image a img,
.wc-block-cart-item__image img {
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 6px !important;
    margin: 0 !important;
    max-width: none !important;
}

/* Checkout order summary — product image */
.wc-block-components-order-summary-item__image {
    width: 90px !important;
    flex-shrink: 0 !important;
}

.wc-block-components-order-summary-item__image > a {
    display: block !important;
    width: 90px !important;
    height: 90px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

.wc-block-components-order-summary-item__image > img,
.wc-block-components-order-summary-item__image > a > img {
    display: block !important;
    width: 90px !important;
    height: 90px !important;
    max-width: 90px !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 6px !important;
    padding: 4px !important;
    margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ORDER RECEIVED / THANK YOU PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Suppress WooCommerce's own wrapper floats on the thank-you page */
.woocommerce-order-received .woocommerce {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Stack the ct-account-card blocks */
.ct-thankyou {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Success / fail banner ───────────────────────────────────────────────── */
.ct-thankyou__banner {
    text-align: center;
}

.ct-thankyou__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.ct-thankyou__icon--ok {
    background: rgba(0, 135, 222, 0.10);
    border: 1px solid rgba(0, 135, 222, 0.25);
}

.ct-thankyou__icon--fail {
    background: rgba(220, 38, 38, 0.10);
    border: 1px solid rgba(220, 38, 38, 0.25);
}

.ct-thankyou__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 8px 0 12px;
}

.ct-thankyou__sub {
    font-size: 0.90rem;
    color: rgba(255, 255, 255, 0.50);
    line-height: 1.65;
    margin: 0 auto 28px;
    max-width: 520px;
}

/* ── Order meta grid inside banner ──────────────────────────────────────── */
.ct-thankyou__meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px 32px;
    margin-top: 8px;
    text-align: left;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 24px;
}

.ct-thankyou__order-num {
    font-weight: 800 !important;
    color: #0087de !important;
}

/* ── Actions row (failed state + CTA) ───────────────────────────────────── */
.ct-thankyou__actions,
.ct-thankyou__cta {
    display: flex !important;
    gap: 16px !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-top: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ct-thankyou__cta .ct-btn,
.ct-thankyou__actions .ct-btn {
    min-width: 220px !important;
    justify-content: center !important;
    text-align: center !important;
}

/* ── Suppress default WC thank-you order overview list ──────────────────── */
.woocommerce-order-received ul.woocommerce-order-overview,
.woocommerce-order-received .woocommerce-thankyou-order-details,
.woocommerce-order-received .order_details,
.woocommerce-order-received .woocommerce-notice--success.woocommerce-thankyou-order-received {
    display: none !important;
}

@media (max-width: 600px) {
    .ct-thankyou__title {
        font-size: 1.25rem;
    }

    .ct-thankyou__meta-grid {
        grid-template-columns: 1fr 1fr;
    }
}