/* VDH Grading — WooCommerce dark-mode overrides (cart, checkout blocks, my-account classic). */

/* ─── Page + wrapper ─── */
body.woocommerce,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.woocommerce-page {
    background:
        radial-gradient(1200px 600px at 85% -10%, var(--vdhg-green-soft), transparent 60%),
        radial-gradient(1000px 500px at 10% 20%, var(--vdhg-purple-soft), transparent 60%),
        var(--vdhg-bg);
    color: var(--vdhg-fg);
}

.woocommerce,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout { color: var(--vdhg-fg); }

.woocommerce a,
.wp-block-woocommerce-cart a,
.wp-block-woocommerce-checkout a,
.wc-block-components-notice-banner a { color: var(--vdhg-green); }
.woocommerce a:hover,
.wp-block-woocommerce-cart a:hover,
.wp-block-woocommerce-checkout a:hover,
.wc-block-components-notice-banner a:hover { color: #ffffff; }

.woocommerce h1, .woocommerce h2, .woocommerce h3,
.wp-block-woocommerce-cart h1, .wp-block-woocommerce-cart h2,
.wp-block-woocommerce-checkout h1, .wp-block-woocommerce-checkout h2,
.wc-block-components-title {
    font-family: var(--vdhg-font-display);
    color: var(--vdhg-fg);
}

/* ─── Form fields (WC Blocks) ─── */
.wp-block-woocommerce-cart .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-textarea,
.wp-block-woocommerce-checkout .wc-block-components-combobox input,
.wp-block-woocommerce-checkout input[type="text"],
.wp-block-woocommerce-checkout input[type="email"],
.wp-block-woocommerce-checkout input[type="tel"],
.wp-block-woocommerce-checkout input[type="number"],
.wp-block-woocommerce-checkout input[type="password"],
.wp-block-woocommerce-checkout textarea,
.wp-block-woocommerce-checkout select {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--vdhg-border);
    border-radius: 10px;
    color: var(--vdhg-fg);
    padding: 12px 14px;
    font-family: var(--vdhg-font);
    font-size: 15px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-woocommerce-cart .wc-block-components-text-input input::placeholder,
.wp-block-woocommerce-checkout .wc-block-components-text-input input::placeholder,
.wp-block-woocommerce-checkout textarea::placeholder { color: var(--vdhg-muted); }

.wp-block-woocommerce-cart .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout .wc-block-components-textarea:focus,
.wp-block-woocommerce-checkout input:focus,
.wp-block-woocommerce-checkout textarea:focus,
.wp-block-woocommerce-checkout select:focus {
    outline: 2px solid var(--vdhg-green);
    outline-offset: 1px;
    border-color: var(--vdhg-green);
}

.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-checkout .wc-block-components-textarea label,
.wp-block-woocommerce-cart .wc-block-components-text-input label { color: var(--vdhg-muted); }
.wp-block-woocommerce-checkout .wc-block-components-text-input.is-active label,
.wp-block-woocommerce-cart .wc-block-components-text-input.is-active label { color: var(--vdhg-green); }

/* Custom caret — native dropdown arrow is invisible on dark bg. */
.wp-block-woocommerce-checkout select,
.wp-block-woocommerce-checkout .wc-block-components-select select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%239aa0b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* ─── Checkboxes / radios (WC Blocks) ─── */
.wp-block-woocommerce-checkout .wc-block-components-checkbox input[type="checkbox"],
.wp-block-woocommerce-cart .wc-block-components-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border: 1.5px solid var(--vdhg-border);
    background: var(--vdhg-bg);
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.wp-block-woocommerce-checkout .wc-block-components-checkbox input[type="checkbox"]:checked,
.wp-block-woocommerce-cart .wc-block-components-checkbox input[type="checkbox"]:checked {
    border-color: var(--vdhg-purple);
    background: var(--vdhg-purple);
}
.wp-block-woocommerce-checkout .wc-block-components-checkbox input[type="checkbox"]:checked::after,
.wp-block-woocommerce-cart .wc-block-components-checkbox input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #000; font-weight: 900; font-size: 12px;
}
.wp-block-woocommerce-checkout .wc-block-components-checkbox__label,
.wp-block-woocommerce-cart .wc-block-components-checkbox__label { color: var(--vdhg-fg); }

.wp-block-woocommerce-checkout .wc-block-components-radio-control input[type="radio"],
.wp-block-woocommerce-checkout input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border: 1.5px solid var(--vdhg-border);
    background: var(--vdhg-bg);
    border-radius: 50%;
    cursor: pointer;
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control input[type="radio"]:checked,
.wp-block-woocommerce-checkout input[type="radio"]:checked {
    border-color: var(--vdhg-green);
    background: radial-gradient(circle, var(--vdhg-green) 0 5px, transparent 6px), var(--vdhg-bg);
    box-shadow: 0 0 10px -2px var(--vdhg-green-soft);
}

/* ─── Buttons (WC Blocks) ─── */
.wp-block-woocommerce-cart .wc-block-components-button.contained,
.wp-block-woocommerce-checkout .wc-block-components-button.contained,
.wp-block-woocommerce-cart-checkout-button,
.wp-block-woocommerce-proceed-to-checkout .wc-block-cart__submit-button {
    background: linear-gradient(135deg, var(--vdhg-purple) 0%, #221646 100%);
    color: #ffffff;
    border: 1px solid transparent;
    border-radius: var(--vdhg-radius);
    font-family: var(--vdhg-font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 14px 22px;
    box-shadow: 0 0 0 1px rgba(56, 37, 90, 0.4), 0 10px 30px -8px rgba(56, 37, 90, 0.55);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.wp-block-woocommerce-cart .wc-block-components-button.contained:hover,
.wp-block-woocommerce-checkout .wc-block-components-button.contained:hover,
.wp-block-woocommerce-cart-checkout-button:hover,
.wp-block-woocommerce-proceed-to-checkout .wc-block-cart__submit-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(56, 37, 90, 0.6), 0 16px 40px -10px rgba(56, 37, 90, 0.7);
    color: #ffffff;
}

.wp-block-woocommerce-cart .wc-block-components-button.outlined,
.wp-block-woocommerce-checkout .wc-block-components-button.outlined {
    background: transparent;
    border: 1px solid var(--vdhg-border);
    color: var(--vdhg-fg);
    border-radius: var(--vdhg-radius);
    padding: 10px 16px;
    font-family: var(--vdhg-font-display);
    font-weight: 600;
}
.wp-block-woocommerce-cart .wc-block-components-button.outlined:hover,
.wp-block-woocommerce-checkout .wc-block-components-button.outlined:hover {
    border-color: var(--vdhg-green);
    color: var(--vdhg-green);
}

.wp-block-woocommerce-cart .wc-block-components-button.text,
.wp-block-woocommerce-checkout .wc-block-components-button.text,
.wc-block-cart-item__remove-link {
    background: transparent;
    color: var(--vdhg-muted);
    border: 0;
}
.wp-block-woocommerce-cart .wc-block-components-button.text:hover,
.wp-block-woocommerce-checkout .wc-block-components-button.text:hover,
.wc-block-cart-item__remove-link:hover { color: var(--vdhg-green); }

/* ─── Panels / sidebar / summary ─── */
.wp-block-woocommerce-cart .wc-block-components-sidebar,
.wp-block-woocommerce-checkout .wc-block-components-sidebar,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
    background: var(--vdhg-surface);
    border: 1px solid var(--vdhg-border);
    border-radius: var(--vdhg-radius);
    padding: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 20px 60px -20px rgba(56, 37, 90, 0.3);
}
.wp-block-woocommerce-cart .wc-block-components-panel,
.wp-block-woocommerce-checkout .wc-block-components-panel {
    background: transparent;
    border-top: 1px solid var(--vdhg-border);
    border-bottom: 0;
}
.wp-block-woocommerce-cart .wc-block-components-panel__button,
.wp-block-woocommerce-checkout .wc-block-components-panel__button {
    color: var(--vdhg-fg);
    font-family: var(--vdhg-font-display);
}

/* ─── Cart line items ─── */
.wp-block-woocommerce-cart .wc-block-cart-items { background: transparent; color: var(--vdhg-fg); }
.wp-block-woocommerce-cart .wc-block-cart-items__row,
.wp-block-woocommerce-cart .wc-block-cart-item__row {
    background: var(--vdhg-surface);
    border: 1px solid var(--vdhg-border);
    border-radius: var(--vdhg-radius);
    padding: 16px;
    margin-bottom: 10px;
}
.wp-block-woocommerce-cart .wc-block-cart-item__image img,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__image img {
    border-radius: 10px;
    border: 1px solid var(--vdhg-border);
}
.wp-block-woocommerce-cart .wc-block-cart-item__product-name,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__name {
    color: var(--vdhg-fg);
    font-family: var(--vdhg-font-display);
    font-weight: 700;
}
.wp-block-woocommerce-cart .wc-block-cart-item__product-metadata,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__description {
    color: var(--vdhg-muted);
    font-size: 13px;
}

/* Quantity stepper */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
    display: inline-flex;
    background: var(--vdhg-surface-hi);
    border: 1px solid var(--vdhg-border);
    border-radius: 10px;
    overflow: hidden;
}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector input {
    background: transparent;
    border: 0;
    color: var(--vdhg-fg);
    font-family: var(--vdhg-font-display);
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector button {
    background: transparent;
    border: 0;
    border-left: 1px solid var(--vdhg-border);
    color: var(--vdhg-fg);
    padding: 0 12px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector button:first-of-type {
    border-left: 0;
    border-right: 1px solid var(--vdhg-border);
}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector button:hover {
    background: rgba(161, 203, 9, 0.08);
    color: var(--vdhg-green);
}

/* ─── Totals table (WC Blocks) ─── */
.wp-block-woocommerce-cart .wc-block-components-totals-item,
.wp-block-woocommerce-checkout .wc-block-components-totals-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    color: var(--vdhg-muted);
    font-size: 14px;
    border-bottom: 1px solid var(--vdhg-border);
}
.wp-block-woocommerce-cart .wc-block-components-totals-item__value,
.wp-block-woocommerce-checkout .wc-block-components-totals-item__value {
    color: var(--vdhg-fg);
    font-variant-numeric: tabular-nums;
}
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item,
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item {
    border-top: 1px solid var(--vdhg-border);
    border-bottom: 0;
    padding-top: 16px;
    margin-top: 8px;
    color: var(--vdhg-fg);
    font-family: var(--vdhg-font-display);
    font-size: 20px;
    font-weight: 800;
}
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: var(--vdhg-fg);
    font-size: 22px;
}
.wp-block-woocommerce-cart .wc-block-components-totals-coupon,
.wp-block-woocommerce-checkout .wc-block-components-totals-coupon {
    padding: 12px 0;
    border-bottom: 1px solid var(--vdhg-border);
}

/* ─── Shipping & payment radio cards (match .vdhg-cfg__radio language) ─── */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option,
.wp-block-woocommerce-checkout .wc-block-components-payment-methods__options > label,
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option {
    background: var(--vdhg-surface-hi);
    border: 1px solid var(--vdhg-border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
    transition: border-color 0.15s ease;
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option:hover,
.wp-block-woocommerce-checkout .wc-block-components-payment-methods__options > label:hover,
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option:hover {
    border-color: var(--vdhg-green);
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option--checked,
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option:has(input:checked) {
    border-color: var(--vdhg-border-green);
    background: linear-gradient(180deg, var(--vdhg-surface-hi), rgba(161, 203, 9, 0.04));
}
.wp-block-woocommerce-checkout .wc-block-components-payment-method-label { color: var(--vdhg-fg); font-weight: 600; }
.wp-block-woocommerce-checkout .wc-block-components-payment-method-icons img { filter: brightness(0.9); }

/* ─── Notices / errors (WC Blocks) ─── */
.wc-block-components-notice-banner {
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
}
.wc-block-components-notice-banner.is-error,
.wc-block-components-validation-error {
    background: rgba(255, 60, 90, 0.08);
    border: 1px solid rgba(255, 60, 90, 0.4);
    color: #ff8da3;
}
.wc-block-components-notice-banner.is-success {
    background: var(--vdhg-green-soft);
    border: 1px solid var(--vdhg-border-green);
    color: var(--vdhg-green);
}
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-warning {
    background: var(--vdhg-purple-soft);
    border: 1px solid var(--vdhg-border);
    color: var(--vdhg-fg);
}
.wc-block-components-text-input.has-error input,
.wp-block-woocommerce-checkout input[aria-invalid="true"] {
    border-color: rgba(255, 60, 90, 0.6);
}

/* ═══════════════════════════════════════════════════════════════════════
   WC CLASSIC SHORTCODES (my-account, lost-password, thank-you, addresses)
   ══════════════════════════════════════════════════════════════════════ */

.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a { color: var(--vdhg-muted); }

.woocommerce form .form-row label { color: var(--vdhg-muted); font-size: 14px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--vdhg-border);
    border-radius: 10px;
    color: var(--vdhg-fg);
    padding: 12px 14px;
    font-family: var(--vdhg-font);
    width: 100%;
}
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder { color: var(--vdhg-muted); }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    outline: 2px solid var(--vdhg-green);
    outline-offset: 1px;
    border-color: var(--vdhg-green);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: rgba(255, 60, 90, 0.6); }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: var(--vdhg-border-green); }

/* Classic primary buttons */
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.woocommerce a.button.alt {
    background: linear-gradient(135deg, var(--vdhg-purple) 0%, #221646 100%);
    color: #ffffff;
    border: 1px solid transparent;
    border-radius: var(--vdhg-radius);
    font-family: var(--vdhg-font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 12px 22px;
    box-shadow: 0 0 0 1px rgba(56, 37, 90, 0.4), 0 10px 30px -8px rgba(56, 37, 90, 0.55);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    text-shadow: none;
}
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce a.button.alt:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(56, 37, 90, 0.6), 0 16px 40px -10px rgba(56, 37, 90, 0.7);
    color: #ffffff;
}

/* Classic secondary buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.wc-backward,
.woocommerce .button.wc-forward {
    background: transparent;
    border: 1px solid var(--vdhg-border);
    color: var(--vdhg-fg);
    border-radius: var(--vdhg-radius);
    font-family: var(--vdhg-font-display);
    font-weight: 600;
    padding: 10px 18px;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button.wc-backward:hover,
.woocommerce .button.wc-forward:hover {
    border-color: var(--vdhg-green);
    color: var(--vdhg-green);
    background: transparent;
}

/* Classic status banners */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 14px;
    list-style: none;
    margin: 0 0 18px;
}
.woocommerce-error {
    background: rgba(255, 60, 90, 0.08);
    border: 1px solid rgba(255, 60, 90, 0.4);
    color: #ff8da3;
}
.woocommerce-error a { color: #ff8da3; text-decoration: underline; }
.woocommerce-message {
    background: var(--vdhg-green-soft);
    border: 1px solid var(--vdhg-border-green);
    color: var(--vdhg-green);
}
.woocommerce-info {
    background: var(--vdhg-purple-soft);
    border: 1px solid var(--vdhg-border);
    color: var(--vdhg-fg);
}

/* ─── My Account navigation + content ─── */
.woocommerce-account .woocommerce { display: grid; gap: 28px; }

.woocommerce-MyAccount-navigation ul {
    list-style: none; margin: 0; padding: 0;
    background: var(--vdhg-surface);
    border: 1px solid var(--vdhg-border);
    border-radius: var(--vdhg-radius);
    overflow: hidden;
}
.woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid var(--vdhg-border); }
.woocommerce-MyAccount-navigation ul li:last-child { border-bottom: 0; }
.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 12px 16px;
    color: var(--vdhg-fg);
    font-family: var(--vdhg-font-display);
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}
.woocommerce-MyAccount-navigation ul li a:hover {
    background: rgba(161, 203, 9, 0.06);
    color: var(--vdhg-green);
}
.woocommerce-MyAccount-navigation ul li.is-active a {
    background: linear-gradient(90deg, var(--vdhg-purple-soft), transparent);
    color: var(--vdhg-fg);
    border-left: 3px solid var(--vdhg-green);
    padding-left: 13px;
}

.woocommerce-MyAccount-content {
    background: var(--vdhg-surface);
    border: 1px solid var(--vdhg-border);
    border-radius: var(--vdhg-radius);
    padding: 24px;
    color: var(--vdhg-fg);
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 { font-family: var(--vdhg-font-display); margin-top: 0; }

/* ─── Shop tables (orders, downloads, address) ─── */
.woocommerce table.shop_table {
    background: transparent;
    border: 1px solid var(--vdhg-border);
    border-radius: var(--vdhg-radius);
    border-collapse: separate;
    border-spacing: 0;
    color: var(--vdhg-fg);
    width: 100%;
    overflow: hidden;
}
.woocommerce table.shop_table th {
    background: var(--vdhg-surface-hi);
    color: var(--vdhg-muted);
    font-family: var(--vdhg-font-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--vdhg-border);
}
.woocommerce table.shop_table td {
    padding: 12px 14px;
    border-top: 1px solid var(--vdhg-border);
    color: var(--vdhg-fg);
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td { background: var(--vdhg-surface-hi); }
.woocommerce table.shop_table tr.order-total th,
.woocommerce table.shop_table tr.order-total td {
    font-family: var(--vdhg-font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--vdhg-fg);
}

/* ─── Accessibility / reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
    .wp-block-woocommerce-cart *,
    .wp-block-woocommerce-checkout *,
    .woocommerce *,
    .wc-block-components-notice-banner * {
        transition: none !important; /* override WC Blocks inline transitions */
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Checkout + cart: dark-theme pass for the block containers that still
   inherit white/light defaults from WooCommerce's own stylesheet.
   ═══════════════════════════════════════════════════════════════════════ */

/* Layout columns + top-level blocks — paint them to the page, not white. */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-cart-cross-sells-block,
.wc-block-checkout,
.wc-block-checkout__main,
.wc-block-checkout__sidebar,
.wc-block-cart,
.wc-block-cart__main,
.wc-block-cart__sidebar {
    background: transparent !important;
    color: var(--vdhg-fg);
}

/* Checkout step panels (Contact, Shipping, Payment, …) — surface cards. */
.wc-block-components-checkout-step,
.wc-block-components-panel,
.wc-block-components-order-summary,
.wc-block-components-sidebar,
.wc-block-components-sidebar-layout,
.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-checkout-contact-information-block,
.wp-block-woocommerce-checkout-shipping-address-block,
.wp-block-woocommerce-checkout-billing-address-block,
.wp-block-woocommerce-checkout-shipping-method-block,
.wp-block-woocommerce-checkout-payment-block,
.wp-block-woocommerce-checkout-additional-information-block,
.wp-block-woocommerce-checkout-pickup-options-block,
.wp-block-woocommerce-cart-order-summary-block {
    background: var(--vdhg-surface) !important;
    border: 1px solid var(--vdhg-border) !important;
    border-radius: var(--vdhg-radius) !important;
    color: var(--vdhg-fg);
}

/* Order summary item rows + totals */
.wc-block-components-order-summary-item,
.wc-block-components-order-summary__content,
.wc-block-components-totals-wrapper,
.wc-block-components-totals-item,
.wc-block-cart-items,
.wc-block-cart-items__row,
.wc-block-cart-item__total {
    background: transparent !important;
    border-color: var(--vdhg-border) !important;
    color: var(--vdhg-fg);
}
.wc-block-components-totals-item__label { color: var(--vdhg-muted); }
.wc-block-components-totals-item__value { color: var(--vdhg-fg); font-variant-numeric: tabular-nums; }

/* Payment methods — each method is a tile, keep them visually grouped */
.wc-block-components-radio-control__option,
.wc-block-components-payment-method,
.wc-block-components-payment-method-label,
.wc-block-components-shipping-rates-control__package,
.wc-block-components-shipping-rates-control__no-results-notice {
    background: var(--vdhg-surface-hi) !important;
    border: 1px solid var(--vdhg-border) !important;
    border-radius: 10px !important;
    color: var(--vdhg-fg);
}
.wc-block-components-radio-control__option.wc-block-components-radio-control__option--checked,
.wc-block-components-radio-control__option[aria-checked="true"] {
    border-color: var(--vdhg-green) !important;
    background: linear-gradient(180deg, var(--vdhg-surface-hi), rgba(57,255,20,0.04)) !important;
}

/* Coupon / discount panel */
.wc-block-components-totals-coupon,
.wc-block-components-panel__button,
.wc-block-components-panel__content {
    background: transparent !important;
    color: var(--vdhg-fg);
}
.wc-block-components-panel__button { color: var(--vdhg-fg); }
.wc-block-components-panel__button:hover { color: var(--vdhg-green); }

/* Headings / step numbers */
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-step__description {
    color: var(--vdhg-fg) !important;
}
.wc-block-components-checkout-step__description { color: var(--vdhg-muted) !important; }
.wc-block-components-checkout-step__heading-content { color: var(--vdhg-muted); }

/* Make the browser autofill not paint our dark fields white */
.wp-block-woocommerce-checkout input:-webkit-autofill,
.wp-block-woocommerce-checkout textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--vdhg-surface-hi) inset !important;
    -webkit-text-fill-color: var(--vdhg-fg) !important;
    caret-color: var(--vdhg-fg);
}

/* Combobox (country dropdown) menu */
.components-popover__content,
.wc-block-components-combobox-control__suggestions-container,
.wc-block-components-combobox__suggestions {
    background: var(--vdhg-surface-hi) !important;
    color: var(--vdhg-fg) !important;
    border: 1px solid var(--vdhg-border) !important;
}
.wc-block-components-combobox-control__suggestion--highlighted,
.wc-block-components-combobox__suggestion--highlighted {
    background: rgba(57,255,20,0.08) !important;
    color: var(--vdhg-green) !important;
}

/* Notices inside the checkout */
.wc-block-components-notice-banner,
.wc-block-components-validation-error {
    background: var(--vdhg-surface-hi) !important;
    border: 1px solid var(--vdhg-border) !important;
    color: var(--vdhg-fg);
}
.wc-block-components-notice-banner.is-error,
.wc-block-components-validation-error {
    border-color: #ef6a6a !important;
    color: #ffb2b2;
}

/* Final safety net: any remaining explicit-white container inside checkout
   flips to our surface color. Scoped to the block wrapper so we don't
   affect other white elements on the page. */
.wp-block-woocommerce-checkout [style*="background:#fff"],
.wp-block-woocommerce-checkout [style*="background: #fff"],
.wp-block-woocommerce-checkout [style*="background-color:#fff"],
.wp-block-woocommerce-checkout [style*="background-color: #fff"],
.wp-block-woocommerce-cart [style*="background:#fff"],
.wp-block-woocommerce-cart [style*="background: #fff"] {
    background: var(--vdhg-surface) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Mobile pass 7: checkout at phone widths.
   - 16px inputs kill iOS zoom-on-focus
   - Sidebar collapses to single column
   - Pay button full-width 48px
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    /* Prevent iOS Safari zooming when focusing any form field. */
    .wp-block-woocommerce-checkout .wc-block-components-text-input input,
    .wp-block-woocommerce-checkout .wc-block-components-textarea,
    .wp-block-woocommerce-checkout .wc-block-components-combobox input,
    .wp-block-woocommerce-checkout input[type="text"],
    .wp-block-woocommerce-checkout input[type="email"],
    .wp-block-woocommerce-checkout input[type="tel"],
    .wp-block-woocommerce-checkout input[type="number"],
    .wp-block-woocommerce-checkout input[type="password"],
    .wp-block-woocommerce-checkout textarea,
    .wp-block-woocommerce-checkout select,
    .wp-block-woocommerce-cart input[type="text"],
    .wp-block-woocommerce-cart input[type="email"] {
        font-size: 16px !important;
    }

    /* Collapse the two-column sidebar layout on phones. */
    .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout,
    .wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    /* Sidebar (order summary) sits below main on mobile — acceptable for now. */
    .wc-block-checkout__sidebar,
    .wc-block-cart__sidebar {
        order: 2;
    }

    /* Edge-to-edge step panels so there's more horizontal room for fields. */
    .wc-block-components-checkout-step,
    .wp-block-woocommerce-checkout-order-summary-block,
    .wp-block-woocommerce-checkout-contact-information-block,
    .wp-block-woocommerce-checkout-shipping-address-block,
    .wp-block-woocommerce-checkout-billing-address-block,
    .wp-block-woocommerce-checkout-shipping-method-block,
    .wp-block-woocommerce-checkout-payment-block,
    .wp-block-woocommerce-checkout-additional-information-block,
    .wp-block-woocommerce-cart-order-summary-block {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    /* Pay button + proceed-to-checkout — full width, 48px min. */
    .wp-block-woocommerce-checkout-actions-block .wc-block-components-checkout-place-order-button,
    .wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button,
    .wc-block-components-checkout-place-order-button,
    .wc-block-cart__submit-button {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 16px !important;
    }

    /* Payment methods: larger hit targets. */
    .wc-block-components-radio-control__option {
        padding: 14px 12px !important;
        min-height: 56px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Checkout — round 2: close the white-background + invisible-text gaps.
   Targets selectors from /var/www/html/wp-content/plugins/woocommerce/
   assets/client/blocks/*.css that still paint white on the dark theme.
   ═══════════════════════════════════════════════════════════════════════ */

/* Native select wrapper + the <select> element itself — Woo paints the wrapper
   white and the text near-black, both invisible here. */
.wp-block-woocommerce-checkout .wc-blocks-components-select,
.wp-block-woocommerce-checkout .wc-blocks-components-select__container,
.wp-block-woocommerce-cart .wc-blocks-components-select,
.wp-block-woocommerce-cart .wc-blocks-components-select__container {
    background: var(--vdhg-surface-hi) !important;
    border: 1px solid var(--vdhg-border) !important;
    border-radius: 10px !important;
    color: var(--vdhg-fg) !important;
}
.wp-block-woocommerce-checkout .wc-blocks-components-select__select,
.wp-block-woocommerce-cart .wc-blocks-components-select__select {
    background: transparent !important;
    color: var(--vdhg-fg) !important;
}
/* The floating label that Woo positions over the select */
.wp-block-woocommerce-checkout .wc-blocks-components-select__label,
.wp-block-woocommerce-cart .wc-blocks-components-select__label {
    color: var(--vdhg-muted) !important;
    background: transparent !important;
}

/* Any remaining <select> (state/country fallback, order-notes picker, etc.)
   inside the checkout/cart blocks — force dark fill on the closed control,
   dark <option> rows in the open panel, and tell the browser to render the
   native dropdown UI in dark mode via `color-scheme`. Without this the
   billing State/Country select opens as a white panel with black text. */
.wp-block-woocommerce-checkout select,
.wp-block-woocommerce-cart select,
.wp-block-woocommerce-checkout .wc-blocks-components-select__select,
.wp-block-woocommerce-cart .wc-blocks-components-select__select {
    color-scheme: dark;
    background-color: var(--vdhg-surface-hi) !important;
    color: var(--vdhg-fg) !important;
}
.wp-block-woocommerce-checkout select option,
.wp-block-woocommerce-cart select option,
.wp-block-woocommerce-checkout .wc-blocks-components-select__select option,
.wp-block-woocommerce-cart .wc-blocks-components-select__select option {
    background-color: var(--vdhg-surface-hi);
    color: var(--vdhg-fg);
}
.wp-block-woocommerce-checkout select option:checked,
.wp-block-woocommerce-cart select option:checked,
.wp-block-woocommerce-checkout .wc-blocks-components-select__select option:checked,
.wp-block-woocommerce-cart .wc-blocks-components-select__select option:checked {
    background: linear-gradient(var(--vdhg-purple), var(--vdhg-purple));
    color: #ffffff;
}

/* Address autocomplete suggestions dropdown (Mapbox / Woo address service) */
.wc-block-components-address-autocomplete-suggestions,
.wc-block-components-address-autocomplete-container .wc-block-components-address-autocomplete-suggestions {
    background: var(--vdhg-surface-hi) !important;
    color: var(--vdhg-fg) !important;
    border: 1px solid var(--vdhg-border) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}
.wc-block-components-address-autocomplete-suggestions .suggestions-list li,
.wc-block-components-address-autocomplete-suggestions li {
    color: var(--vdhg-fg) !important;
    background: transparent !important;
}
.wc-block-components-address-autocomplete-suggestions li:hover,
.wc-block-components-address-autocomplete-suggestions li[aria-selected="true"],
.wc-block-components-address-autocomplete-suggestions li.is-active {
    background: rgba(161, 203, 9, 0.08) !important;
    color: var(--vdhg-green) !important;
}
.wc-block-components-address-autocomplete-container .wc-block-components-address-autocomplete-icon {
    background-color: var(--vdhg-muted) !important;
}
/* The provider-branding footer row inside the suggestions panel */
.wc-block-components-address-autocomplete-suggestions .powered-by,
.wc-block-components-address-autocomplete-suggestions [class*="branding"],
.wc-block-components-address-autocomplete-suggestions [class*="footer"] {
    background: var(--vdhg-surface) !important;
    color: var(--vdhg-muted) !important;
    border-top: 1px solid var(--vdhg-border) !important;
}

/* ─── Shipping method tiles — selected state was invisibly dark-on-dark ── */
.wc-block-checkout__shipping-method-container,
.wc-block-components-shipping-rates-control {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.wc-block-checkout__shipping-method-option,
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__option {
    flex: 1 1 260px;            /* prevent the flex-basis: 0 collapse on mid viewports */
    min-width: 220px;
}
/* WC sets background:#fff on the selected card. Flip to surface-hi + neon border. */
.wc-block-checkout__shipping-method-option--selected,
.has-dark-controls .wc-block-checkout__shipping-method-option--selected,
.wc-block-components-radio-control__option.wc-block-components-radio-control__option--checked,
.wc-block-components-radio-control__option[aria-checked="true"] {
    background: linear-gradient(180deg, var(--vdhg-surface-hi), rgba(161, 203, 9, 0.06)) !important;
    border: 1px solid var(--vdhg-border-green) !important;
    box-shadow: 0 0 0 1px var(--vdhg-border-green), 0 0 20px -8px var(--vdhg-green-soft) !important;
    color: var(--vdhg-fg) !important;
}
.wc-block-checkout__shipping-method-option--selected .wc-block-components-radio-control__option-checked-content,
.wc-block-checkout__shipping-method-option--selected *:not(input) {
    color: var(--vdhg-fg) !important;
}

/* ─── Cart item images — never show an untreated white square ── */
.wc-block-cart-item__image,
.wc-block-components-order-summary-item__image {
    background: var(--vdhg-surface) !important;
    border: 1px solid var(--vdhg-border) !important;
    border-radius: 6px !important;
    overflow: hidden;
}
/* (image sizing consolidated at the bottom of this file — round 9 wins) */

/* ─── Order summary totals — ensure dark bg everywhere WC might paint ── */
.wc-block-components-totals-item,
.wc-block-components-totals-footer-item,
.wp-block-woocommerce-checkout .wc-block-components-totals-item,
.wp-block-woocommerce-cart .wc-block-components-totals-item {
    background: transparent !important;
    color: var(--vdhg-fg);
}
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item,
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item {
    border-top: 1px solid var(--vdhg-border) !important;
    padding-top: 10px !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: var(--vdhg-green) !important;
    font-family: var(--vdhg-font-display);
}

/* ─── Autofill fields (browser overrides WC blocks too) ── */
.wp-block-woocommerce-checkout input:-webkit-autofill,
.wp-block-woocommerce-checkout textarea:-webkit-autofill,
.wp-block-woocommerce-checkout select:-webkit-autofill,
.wp-block-woocommerce-cart input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--vdhg-surface-hi) inset !important;
    -webkit-text-fill-color: var(--vdhg-fg) !important;
    caret-color: var(--vdhg-fg);
    border: 1px solid var(--vdhg-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Checkout — round 3: reset WC custom props, style the login prompt,
   fix squished line-item images.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Reset Woo's form-color custom properties that propagate into every
   input/textarea/select in the checkout subtree. High specificity at the
   block root beats the deep descendant selectors in WC's stylesheet. */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart,
.wc-block-checkout,
.wc-block-cart {
    --wp--preset--color--background: transparent !important;
    --wc-form-color-background: var(--vdhg-surface-hi) !important;
    --wc-form-color-text: var(--vdhg-fg) !important;
    --wc-form-color-border: var(--vdhg-border) !important;
    --wc-form-color-border-hover: var(--vdhg-green) !important;
    --wc-form-color-label: var(--vdhg-muted) !important;
}

/* Force an explicit dark background on every form-field. `!important` here
   is intentional — WC's own `background:#fff` rule hits with high specificity
   on deep block selectors we'd otherwise have to chase individually. */
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-text-input input.input,
.wp-block-woocommerce-checkout .wc-block-components-textarea,
.wp-block-woocommerce-checkout .wc-block-components-combobox input,
.wp-block-woocommerce-checkout input[type="text"],
.wp-block-woocommerce-checkout input[type="email"],
.wp-block-woocommerce-checkout input[type="tel"],
.wp-block-woocommerce-checkout input[type="number"],
.wp-block-woocommerce-checkout input[type="password"],
.wp-block-woocommerce-checkout textarea,
.wp-block-woocommerce-checkout select,
.wp-block-woocommerce-cart input[type="text"],
.wp-block-woocommerce-cart input[type="email"] {
    background: var(--vdhg-surface-hi) !important;
    background-color: var(--vdhg-surface-hi) !important;
    color: var(--vdhg-fg) !important;
    border-color: var(--vdhg-border) !important;
}

/* 2. Login prompt — WC emits it inline next to the Contact Info heading.
   Paint it as a proper secondary button so it doesn't read as a stray link. */
.wc-block-checkout-login-prompt,
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading-content a,
.wc-block-components-checkout-step__heading-content a[href*="my-account"],
.wc-block-components-checkout-step__heading-content a[href*="login"] {
    display: inline-flex !important;
    align-items: center;
    padding: 6px 14px !important;
    margin-left: 12px;
    background: var(--vdhg-surface-hi) !important;
    border: 1px solid var(--vdhg-border) !important;
    border-radius: 999px !important;
    color: var(--vdhg-green) !important;
    font-family: var(--vdhg-font-display);
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .12s, border-color .12s, background .12s;
}
.wc-block-checkout-login-prompt:hover,
.wc-block-components-checkout-step__heading-content a:hover {
    background: rgba(161, 203, 9, 0.08) !important;
    border-color: var(--vdhg-border-green) !important;
    color: #fff !important;
}
/* Make sure the Contact Information header + its login CTA sit on the same
   baseline with breathing room; WC's default has them flex-wrap awkwardly. */
.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-step__heading-content {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
}
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__description {
    flex: 0 1 auto;
}

/* 3. Line-item thumbnails — stop squishing. Cards are portrait (~63:88),
   so the wrapper gets a fixed portrait box and the <img> is `contain`. */
.wc-block-cart-item__image,
.wc-block-components-order-summary-item__image {
    width: 56px !important;
    height: 78px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--vdhg-surface) !important;
    border: 1px solid var(--vdhg-border) !important;
    border-radius: 6px !important;
    overflow: hidden;
}
/* (image sizing consolidated at the bottom of this file — round 9 wins) */
/* Any <a> wrapping the image must not force its own sizing. */
.wc-block-cart-item__image a,
.wc-block-components-order-summary-item__image a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════
   Checkout — round 4: spacing between step panels + payment-method overlap.
   ═══════════════════════════════════════════════════════════════════════ */

/* The outer block-checkout should be a transparent page region — only the
   step panels carry the card look. This prevents "card-inside-card"
   appearing visually flush. */
.wp-block-woocommerce-checkout,
.wc-block-checkout,
.wc-block-checkout__main,
.wc-block-checkout__sidebar,
.wc-block-cart,
.wc-block-cart__main,
.wc-block-cart__sidebar {
    background: transparent !important;
    padding: 0 !important;
}

/* Grid gap between main + sidebar (desktop). Mobile already set to 1fr/16px. */
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout,
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
    gap: 20px !important;
}

/* Every step panel = a card. Give each one explicit padding + bottom margin
   so they stack with visible separation, never flush against siblings or
   the outer container. */
.wc-block-components-checkout-step,
.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-checkout-contact-information-block,
.wp-block-woocommerce-checkout-shipping-address-block,
.wp-block-woocommerce-checkout-billing-address-block,
.wp-block-woocommerce-checkout-shipping-method-block,
.wp-block-woocommerce-checkout-payment-block,
.wp-block-woocommerce-checkout-additional-information-block,
.wp-block-woocommerce-checkout-pickup-options-block,
.wp-block-woocommerce-cart-order-summary-block {
    padding: 20px 22px !important;
    margin-bottom: 16px !important;
    background: var(--vdhg-surface) !important;
    border: 1px solid var(--vdhg-border) !important;
    border-radius: 12px !important;
}
.wp-block-woocommerce-checkout-actions-block {
    /* The Place-Order CTA row doesn't need the card framing. Horizontal
       padding matches the step panels' inner gutter so Return to Cart +
       Place Order line up with the form fields above. */
    background: transparent !important;
    border: 0 !important;
    padding: 0 22px !important;
    margin-top: 8px !important;
}
.wp-block-woocommerce-checkout-terms-block {
    background: transparent !important;
    border: 0 !important;
    padding: 0 22px !important;
    margin: 12px 0 !important;
}

/* ─── Payment method: label + expanded form were overlapping ─────────── */

/* Each method tile needs internal padding so the radio + label don't glue
   to the expanded form below. WC collapses/expands via accordion classes —
   cover all known variants. */
.wc-block-components-radio-control__option,
.wc-block-components-payment-method {
    padding: 14px 16px !important;
    display: grid !important;
    grid-template-columns: 20px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 0;
    align-items: center;
}
.wc-block-components-radio-control__option > input[type="radio"] {
    grid-column: 1; grid-row: 1;
}
.wc-block-components-radio-control__label,
.wc-block-components-payment-method-label,
.wc-block-components-radio-control__option-layout {
    grid-column: 2; grid-row: 1;
    font-weight: 600;
    color: var(--vdhg-fg);
    margin: 0 !important;
}
.wc-block-components-radio-control__description,
.wc-block-components-payment-method__saved-payment-method-description {
    grid-column: 2 / -1; grid-row: 2;
    color: var(--vdhg-muted);
    font-size: 12px;
    margin-top: 2px;
}

/* The expanded "content under a selected radio option" — inserted as a
   sibling row, not overlaid. Force a top border + padding so it reads as
   its own section, never stacks on top of the label. */
.wc-block-components-radio-control__option-checked-content,
.wc-block-components-radio-control-accordion-content,
.wc-block-checkout-payment-methods__expanded-content,
.wc-block-components-payment-method-options__expanded-content,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-payment-methods__content {
    display: block !important;
    margin-top: 14px !important;
    padding: 14px 0 4px !important;
    border-top: 1px solid var(--vdhg-border) !important;
    grid-column: 1 / -1 !important;
    position: static !important;           /* any absolute positioning → static so it never overlaps */
}

/* Make sure no nested iframe (Stripe Elements) gets zero height + overlaps */
.wc-block-components-payment-method iframe,
.wc-block-components-payment-methods iframe {
    width: 100% !important;
    min-height: 44px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Checkout — round 5: restore desktop 2-col layout + scope radio-grid
   to payment/shipping only (was over-reaching into address forms).
   ═══════════════════════════════════════════════════════════════════════ */

/* Reset + explicitly force the 2-column layout on desktop. WC normally uses
   a container query here; our transparent-wrapper overrides may have broken
   the container context on some browsers/versions. */
@media (min-width: 820px) {
    .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout,
    .wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) !important;
        align-items: start !important;
        gap: 24px !important;
    }
    .wc-block-checkout__main,
    .wc-block-cart__main     { grid-column: 1 !important; order: 1 !important; }
    .wc-block-checkout__sidebar,
    .wc-block-cart__sidebar  { grid-column: 2 !important; order: 2 !important; }

    /* Sidebar sticks while scrolling the main column on desktop — nice touch. */
    .wc-block-checkout__sidebar,
    .wc-block-cart__sidebar  { position: sticky; top: 20px; }
}

/* Nuke the round-4 radio-option grid on ALL radio controls. Re-apply it ONLY
   to payment method tiles and shipping-rate tiles. Address-form radio groups
   (country/state suggestion widgets etc.) get back their native layout. */
.wc-block-components-radio-control__option {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
    padding: inherit;
    align-items: stretch;
}

/* Re-apply the aligned grid ONLY to payment + shipping method option cards. */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option,
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__option,
.wc-block-checkout__shipping-method-option,
.wc-block-components-payment-method {
    display: grid !important;
    grid-template-columns: 22px 1fr auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    align-items: center !important;
    padding: 14px 16px !important;
}
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option > input[type="radio"],
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__option > input[type="radio"] {
    grid-column: 1; grid-row: 1;
}
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__label,
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__label,
.wc-block-components-payment-method-label {
    grid-column: 2; grid-row: 1;
}
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__description,
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__description {
    grid-column: 2 / -1; grid-row: 2;
    margin-top: 2px;
}

/* Mobile: the 2-col grid stays collapsed to 1fr (set earlier at <=640px). */

/* ═══════════════════════════════════════════════════════════════════════
   Checkout — round 6 (E2E-verified fixes):
   - Hide empty shipping-method + pickup-options blocks
   - Force sidebar to fill its grid cell (was fixed at 133px by WC CSS)
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Hide step-panel blocks that WC renders even when they have nothing to
   show. `:has()` keeps the card visible whenever real content (a radio,
   a form, a title, or any step-content wrapper) is present. */
.wp-block-woocommerce-checkout-shipping-method-block:not(:has(.wc-block-components-shipping-rates-control, .wc-block-components-radio-control__option, input, select)),
.wp-block-woocommerce-checkout-pickup-options-block:not(:has(.wc-block-components-radio-control__option, input)),
.wp-block-woocommerce-checkout-shipping-method-block:empty,
.wp-block-woocommerce-checkout-pickup-options-block:empty {
    display: none !important;
}

/* 2. Sidebar — WC's own stylesheet pins .wc-block-checkout__sidebar to a
   narrow width via container queries. Force it to fill the 380px grid cell. */
@media (min-width: 820px) {
    .wc-block-checkout__sidebar,
    .wc-block-cart__sidebar {
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;
        justify-self: stretch !important;
    }
    .wp-block-woocommerce-checkout-order-summary-block,
    .wp-block-woocommerce-cart-order-summary-block {
        width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Checkout — round 7 (E2E follow-up):
   - Force MAIN column to fill its grid cell (same fix as sidebar had)
   - Add breathing room between order-summary items
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width: 820px) {
    .wc-block-checkout__main,
    .wc-block-cart__main {
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;
        justify-self: stretch !important;
    }
}

/* Order-summary line items need internal padding + a divider so they don't
   visually collide. WC sets these to zero on most line items. */
.wc-block-components-order-summary-item {
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--vdhg-border) !important;
}
.wc-block-components-order-summary-item:last-child {
    border-bottom: 0 !important;
}
.wc-block-components-order-summary-item__content {
    padding: 0 12px !important;
    gap: 4px;
}
.wc-block-components-order-summary-item__description {
    color: var(--vdhg-muted);
    font-size: 12px;
    line-height: 1.4;
    margin-top: 4px;
}
.wc-block-components-order-summary-item__total-price {
    color: var(--vdhg-fg);
    font-family: var(--vdhg-font-display);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════
   Checkout — round 8: bigger card thumbs + hide quantity bubble.
   Our cart has one card per line (qty always 1), so the badge adds noise.
   ═══════════════════════════════════════════════════════════════════════ */

/* Larger portrait thumbnail that actually shows the card. */
.wc-block-cart-item__image,
.wc-block-components-order-summary-item__image {
    width: 96px !important;
    height: 132px !important;
}
/* (image sizing consolidated at the bottom of this file — round 9 wins) */

/* Quantity badge — hide entirely. Per-card lines never exceed qty 1 and the
   badge was covering ~25% of the small card image. */
.wc-block-components-order-summary-item__quantity {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Checkout — round 9: lock image dimensions. Previous rules used 100% which
   cascaded inconsistently (WC's own `.woocommerce img { height: auto }` and
   the summary-specific `max-width: 48px` fought with our overrides and yielded
   mixed heights across items). Explicit fixed pixels + min/max guarantees
   every card renders identically.
   ═══════════════════════════════════════════════════════════════════════ */

.wc-block-cart-item__image,
.wc-block-components-order-summary-item__image {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    height: 144px !important;
    min-height: 144px !important;
    max-height: 144px !important;
    aspect-ratio: 104 / 144;
    flex: 0 0 104px !important;
    /* Crucial: WC reserves 16px of bottom padding for the quantity badge even
       when the badge is hidden. With overflow:hidden + justify-content:center,
       a 144-tall image shifts ~8px up and clips at the top. Zero padding fixes it. */
    padding: 0 !important;
    /* Normalize flex alignment so the full-size image is perfectly framed. */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
}
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img,
/* Scope-specific WC rule uses higher specificity; match it + win via !important */
.wc-block-components-order-summary .wc-block-components-order-summary-item__image > img {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    height: 144px !important;
    min-height: 144px !important;
    max-height: 144px !important;
    /* `contain` shows the full card — no top/bottom crop when the image
       aspect (322:450 ≈ 0.716) differs slightly from the wrap (104:144 ≈ 0.722).
       The wrap's surface acts as the letterbox so it reads intentional. */
    object-fit: contain !important;
    object-position: center center !important;
    display: block;
    border-radius: 4px;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--vdhg-surface);
}

/* ═══════════════════════════════════════════════════════════════════════
   Checkout — round 10: cleaner cart-item card. Image sits on top, card
   name/set/language spans full width below. Tier renders as a neon bubble.
   ═══════════════════════════════════════════════════════════════════════ */

.wc-block-components-order-summary-item {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 14px 14px !important;
    align-items: stretch !important;
}
.wc-block-components-order-summary-item__image {
    justify-self: center;
    align-self: center;
}
.wc-block-components-order-summary-item__description {
    width: 100% !important;
    padding: 0 !important;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Tier product name → neon bubble */
.wc-block-components-product-name {
    display: inline-flex !important;
    align-self: flex-start;
    padding: 4px 14px !important;
    margin: 0 !important;
    background: rgba(161, 203, 9, 0.1) !important;
    color: var(--vdhg-green) !important;
    border: 1px solid var(--vdhg-border-green) !important;
    border-radius: 999px !important;
    font-family: var(--vdhg-font-display) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    line-height: 1.5 !important;
}

/* Drop the "Card value €X to €Y" line — handled server-side via
   woocommerce_product_get_short_description too, this is the belt. */
.wc-block-components-product-metadata__description {
    display: none !important;
}

/* Card name / set / language / add-ons block — make it the hero info */
.wc-block-components-product-metadata {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wc-block-components-product-details {
    font-size: 13px !important;
    color: var(--vdhg-fg) !important;
    line-height: 1.45;
}
/* Break each detail ("Card:", "Language:", "Add-ons:") onto its own line. */
.wc-block-components-product-details > span {
    display: block;
}
.wc-block-components-product-details [aria-hidden="true"] {
    display: none !important;          /* remove the " / " separators */
}
.wc-block-components-product-details__name {
    color: var(--vdhg-muted);
    font-size: 12px;
    margin-right: 4px;
}
.wc-block-components-product-details__card .wc-block-components-product-details__value {
    color: var(--vdhg-fg);
    font-weight: 700;
}

/* Duplicate individual price — hide, the right-side total covers it. */
.wc-block-components-order-summary-item__individual-prices {
    display: none !important;
}
/* Total price at the bottom-right of each item */
.wc-block-components-order-summary-item__total-price {
    align-self: flex-end;
    font-family: var(--vdhg-font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--vdhg-green);
}

/* ═══════════════════════════════════════════════════════════════════════
   Round 11: metallic tier pills. `data-tier` stamped by wc-cart-tier.js.
   Uses subtle gradients instead of flat fills so the metallics read as
   materials rather than chips.
   ═══════════════════════════════════════════════════════════════════════ */

/* Bronze — warm copper */
.wc-block-components-product-name[data-tier="bronze"] {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.18), rgba(140, 80, 30, 0.22)) !important;
    color: #e8a96e !important;
    border: 1px solid rgba(205, 127, 50, 0.55) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 200, 150, 0.15);
}

/* Silver — bright metallic, clearly lighter than Platina's black */
.wc-block-components-product-name[data-tier="silver"] {
    background: linear-gradient(135deg, rgba(245, 247, 252, 0.38), rgba(200, 208, 220, 0.38)) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(235, 238, 245, 0.75) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 10px -4px rgba(220, 230, 245, 0.3);
}

/* Gold — lustrous yellow-gold */
.wc-block-components-product-name[data-tier="gold"] {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.22), rgba(184, 134, 11, 0.28)) !important;
    color: #ffd76a !important;
    border: 1px solid rgba(255, 215, 0, 0.6) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 240, 180, 0.22), 0 0 12px -4px rgba(255, 215, 0, 0.3);
}

/* Platina — rich black with subtle chrome edge */
.wc-block-components-product-name[data-tier="platina"] {
    background: linear-gradient(135deg, #121218, #2a2a34) !important;
    color: #d8d8de !important;
    border: 1px solid #4a4a56 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(0, 0, 0, 0.4);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}

/* Hover tweak (applies to whole item — tier-specific glow) */
.wc-block-components-order-summary-item[data-tier="gold"]:hover .wc-block-components-product-name { box-shadow: inset 0 1px 0 rgba(255, 240, 180, 0.35), 0 0 18px -4px rgba(255, 215, 0, 0.55); }

/* Override the default neon-green pill style from round 10 for tiers we know.
   (The green pill is our fallback when data-tier isn't yet stamped or the
   product isn't a tier product at all.) */
.wc-block-components-product-name[data-tier] {
    /* Above rules win via specificity (data-tier attr adds (0,1,0)). */
}

/* ═══════════════════════════════════════════════════════════════════════
   Round 12: payment-method radio vertical alignment.
   WC applies position:absolute + top:17px on the radio input, which wins
   over our grid row centering and leaves the circle ~8px below the label.
   Force static positioning + self-center within its grid cell.
   ═══════════════════════════════════════════════════════════════════════ */

.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option > input[type="radio"],
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__input,
.wc-block-components-payment-method > input[type="radio"] {
    position: static !important;
    top: auto !important;
    left: auto !important;
    align-self: center !important;
    justify-self: center !important;
    margin: 0 !important;
    /* WC applies transform: translateY(-8px) on the radio which drags it
       above the label's baseline. Neutralize the transform. */
    transform: none !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
}

/* Label row also needs to be vertically centered with the radio. */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__option-layout,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control__label-group {
    align-self: center;
    min-height: 22px;
    align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   Round 13: button-ify "Return to Cart" + fix login-prompt top spacing.
   ═══════════════════════════════════════════════════════════════════════ */

/* Return to Cart — was a plain green text link, now a proper ghost button. */
.wc-block-components-checkout-return-to-cart-button,
a.wc-block-components-checkout-return-to-cart-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 18px !important;
    margin: 0 !important;
    background: var(--vdhg-surface-hi) !important;
    color: var(--vdhg-fg) !important;
    border: 1px solid var(--vdhg-border) !important;
    border-radius: var(--vdhg-radius) !important;
    font-family: var(--vdhg-font-display) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
    min-height: 42px;
    transition: border-color .12s, color .12s, background .12s;
}
.wc-block-components-checkout-return-to-cart-button:hover,
a.wc-block-components-checkout-return-to-cart-button:hover {
    border-color: var(--vdhg-border-green) !important;
    color: var(--vdhg-green) !important;
    background: rgba(161, 203, 9, 0.06) !important;
}

/* Login prompt — WC pulls it up with negative margin-top: -24px to align
   with a text-only heading, but with our step-panel padding that puts it
   right under the card's top edge. Reset the margin so it sits naturally
   in the heading flex row with breathing room. */
.wc-block-checkout__login-prompt,
.wc-block-components-checkout-step__heading-content a[href*="my-account"],
.wc-block-components-checkout-step__heading-content a[href*="login"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: center !important;
}

/* Return-to-cart arrow: scale the 24×24 SVG WC ships down to the text size
   so the icon and the "Return to Cart" label share the same visual baseline. */
.wc-block-components-checkout-return-to-cart-button svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
    align-self: center;
    display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════════════
   Round 14: horizontal breathing room around the whole checkout/cart grid.
   `.wc-block-components-sidebar-layout` is the outermost grid container;
   adding padding here insets both columns from the page edges uniformly.
   ═══════════════════════════════════════════════════════════════════════ */

.wc-block-components-sidebar-layout,
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout,
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
    padding: 24px !important;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .wc-block-components-sidebar-layout,
    .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout,
    .wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
        padding: 14px !important;
    }
}

/* "Edit your cards" button injected at the top of /cart/ — links back to
   the configurator so customers can tweak tier/addons/cards and resubmit. */
.vdhg-cart-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin: 0 24px 16px 24px;
    background: var(--vdhg-surface-hi);
    color: var(--vdhg-green) !important;
    border: 1px solid var(--vdhg-border-green);
    border-radius: var(--vdhg-radius);
    font-family: var(--vdhg-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none !important;
    transition: background .12s, color .12s;
}
.vdhg-cart-edit-btn:hover {
    background: rgba(161, 203, 9, 0.08) !important;
    color: #fff !important;
}
.vdhg-cart-edit-btn svg {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Shipping Kit toggle card — renders at the top of /cart/ above items.
   One per order; server keeps authoritative state. Mobile-first.
   ═══════════════════════════════════════════════════════════════════════ */
.vdhg-shipkit {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon body"
        "toggle toggle";
    gap: 12px 14px;
    margin: 0 24px 16px;
    padding: 16px 18px;
    background: var(--vdhg-surface);
    border: 1px solid var(--vdhg-border);
    border-radius: var(--vdhg-radius);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.vdhg-shipkit.is-on {
    border-color: var(--vdhg-border-green);
    background: linear-gradient(180deg, var(--vdhg-surface), rgba(161, 203, 9, 0.05));
}
.vdhg-shipkit__icon {
    grid-area: icon;
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--vdhg-purple-soft);
    color: var(--vdhg-purple);
    border: 1px solid var(--vdhg-border);
}
.vdhg-shipkit.is-on .vdhg-shipkit__icon {
    background: var(--vdhg-green-soft);
    color: var(--vdhg-green);
    border-color: var(--vdhg-border-green);
}
.vdhg-shipkit__body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.vdhg-shipkit__title {
    font-family: var(--vdhg-font-display);
    font-size: 15px;
    color: var(--vdhg-fg);
    font-weight: 700;
}
.vdhg-shipkit__price {
    color: var(--vdhg-green);
    font-weight: 700;
    margin-left: 6px;
}
.vdhg-shipkit__desc {
    color: var(--vdhg-muted);
    font-size: 13px;
    line-height: 1.45;
}
.vdhg-shipkit__status {
    color: var(--vdhg-muted);
    font-size: 12px;
    margin-top: 4px;
}
/* Rounded switch toggle. The checkbox is visually hidden; the knob
   slides when :checked. Clicking the whole label toggles it. */
.vdhg-shipkit__toggle {
    grid-area: toggle;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px 0;
    cursor: pointer;
    user-select: none;
}
.vdhg-shipkit__toggle input {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--vdhg-border);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    flex: 0 0 auto;
    margin: 0;
}
.vdhg-shipkit__toggle input::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.18s ease;
}
.vdhg-shipkit__toggle input:checked {
    background: var(--vdhg-green);
    border-color: var(--vdhg-green);
}
.vdhg-shipkit__toggle input:checked::before { transform: translateX(20px); }
.vdhg-shipkit__toggle input:disabled { opacity: 0.6; cursor: wait; }
.vdhg-shipkit__knob { display: none; } /* swap-in slot if we ever detach the knob from the input pseudo */
.vdhg-shipkit__toggle-label {
    color: var(--vdhg-fg);
    font-weight: 600;
    font-size: 13px;
}

@media (min-width: 640px) {
    .vdhg-shipkit {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "icon body toggle";
        align-items: center;
    }
    .vdhg-shipkit__toggle {
        padding: 0;
    }
}

/* Compact variant pinned next to the Order Summary title on /checkout/.
   Host block is made relative so we can anchor this absolutely top-right,
   aligned with the baseline of the WC Blocks "Order summary" heading. */
.wp-block-woocommerce-checkout-order-summary-block { position: relative; }
.vdhg-cart-edit-btn--compact {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
    padding: 4px 10px;
    font-size: 11px;
    letter-spacing: 0.03em;
    z-index: 2;
}
.vdhg-cart-edit-btn--compact svg { width: 12px; height: 12px; }
@media (max-width: 640px) {
    .vdhg-cart-edit-btn--compact { top: 8px; right: 8px; padding: 3px 8px; font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Order-received / view-order overview.
   Mirrors the wizard's step-2 locked-card visual (tier pill, per-card price,
   spaced add-on chips) so the customer sees the same layout end-to-end.
   The default WC items table is hidden per-row (see `.vdhg-submission-item-row`
   below); totals and non-submission items stay as Woo renders them.
   ═══════════════════════════════════════════════════════════════════════ */
.vdhg-order-overview {
    margin: 0 0 28px;
    padding: 20px 22px;
    background: var(--vdhg-surface);
    border: 1px solid var(--vdhg-border);
    border-radius: var(--vdhg-radius);
}
.vdhg-order-overview__title {
    margin: 0 0 14px;
    font-family: var(--vdhg-font-display);
    font-size: 18px;
    letter-spacing: 0.02em;
}
.vdhg-order-overview__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vdhg-order-overview__card {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 16px;
    padding: 12px 14px;
    background: var(--vdhg-surface-hi);
    border: 1px solid var(--vdhg-border);
    border-radius: 10px;
    align-items: start;
}
.vdhg-order-overview__img,
.vdhg-order-overview__img--ph {
    width: 64px;
    height: 90px;
    border-radius: 6px;
    object-fit: contain;
    background: var(--vdhg-bg);
    border: 1px solid var(--vdhg-border);
}
.vdhg-order-overview__img--ph { background: linear-gradient(135deg, var(--vdhg-bg), var(--vdhg-surface)); }
.vdhg-order-overview__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    min-width: 0;
    align-items: start;
}
.vdhg-order-overview__meta-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.vdhg-order-overview__title-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.vdhg-order-overview__name {
    font-weight: 600;
    color: var(--vdhg-fg);
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vdhg-order-overview__meta {
    color: var(--vdhg-muted);
    font-size: 12px;
}
.vdhg-order-overview__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 2px;
}
.vdhg-order-overview__tier {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-family: var(--vdhg-font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.05em;
    line-height: 1.4;
    background: var(--vdhg-green-soft);
    color: var(--vdhg-green);
    border: 1px solid var(--vdhg-border-green);
}
.vdhg-order-overview__price {
    color: var(--vdhg-fg);
    font-weight: 600;
    font-size: 14px;
    font-family: var(--vdhg-font-display);
}
.vdhg-order-overview__price small {
    display: inline-block;
    margin-left: 4px;
    color: var(--vdhg-muted);
    font-weight: 400;
    font-size: 11px;
}
/* Spaced add-on chips — replaces the old inline "(+€5 Priority, +€10 Insurance)". */
.vdhg-order-overview__addons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: 6px;
}
.vdhg-order-overview__addon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(56, 37, 90, 0.1);
    border: 1px solid rgba(56, 37, 90, 0.3);
    font-size: 11px;
    font-weight: 500;
    color: var(--vdhg-fg);
}
.vdhg-order-overview__addon-name { color: var(--vdhg-fg); }
.vdhg-order-overview__addon-price { color: var(--vdhg-muted); font-weight: 400; }

/* Metallic tier pills — extends the cart/checkout selectors to our new class. */
.vdhg-order-overview__tier[data-tier="bronze"] {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.18), rgba(140, 80, 30, 0.22));
    color: #e8a96e;
    border-color: rgba(205, 127, 50, 0.55);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 200, 150, 0.15);
}
.vdhg-order-overview__tier[data-tier="silver"] {
    background: linear-gradient(135deg, rgba(245, 247, 252, 0.38), rgba(200, 208, 220, 0.38));
    color: #f8fafc;
    border-color: rgba(235, 238, 245, 0.75);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 10px -4px rgba(220, 230, 245, 0.3);
}
.vdhg-order-overview__tier[data-tier="gold"] {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.22), rgba(184, 134, 11, 0.28));
    color: #ffd76a;
    border-color: rgba(255, 215, 0, 0.6);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 240, 180, 0.22), 0 0 12px -4px rgba(255, 215, 0, 0.3);
}
.vdhg-order-overview__tier[data-tier="platina"] {
    background: linear-gradient(135deg, #121218, #2a2a34);
    color: #d8d8de;
    border-color: #4a4a56;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(0, 0, 0, 0.4);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}

/* Hide the default Woo order-details rows for items that already show up in
   our overview. The tfoot (totals) stays visible so the customer still sees
   shipping + tax + grand total. */
.woocommerce-table--order-details tbody tr.vdhg-submission-item-row,
.woocommerce-order-details tbody tr.vdhg-submission-item-row { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Order-received totals table + customer details — dark-theme polish.
   The default WC /order/order-details.php renders a plain light table and
   unformatted <address> blocks; these rules bring them in line with the
   overview card + checkout styling above.
   ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-order-details {
    margin: 0 0 28px;
}
.woocommerce-order-details > h2,
.woocommerce-customer-details .woocommerce-column__title {
    margin: 0 0 14px;
    font-family: var(--vdhg-font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--vdhg-fg);
}
/* Totals table: surface card, readable rows, clean right-aligned amounts. */
.woocommerce-table--order-details {
    width: 100%;
    background: var(--vdhg-surface);
    border: 1px solid var(--vdhg-border);
    border-radius: var(--vdhg-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
/* <thead> is visually redundant when <tbody> items are hidden by our overview. */
.woocommerce-table--order-details thead { display: none; }
.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
    padding: 10px 18px;
    border-top: 1px solid var(--vdhg-border);
    color: var(--vdhg-fg);
    font-size: 14px;
    vertical-align: top;
}
.woocommerce-table--order-details tfoot tr:first-child th,
.woocommerce-table--order-details tfoot tr:first-child td { border-top: 0; }
.woocommerce-table--order-details tfoot th {
    font-weight: 500;
    color: var(--vdhg-muted);
    text-align: left;
    width: 40%;
}
.woocommerce-table--order-details tfoot td {
    text-align: right;
    font-weight: 600;
}
.woocommerce-table--order-details tfoot td .woocommerce-Price-amount {
    font-family: var(--vdhg-font-display);
}
/* Grand total row — last tfoot tr in the default WC template is "Total:". */
.woocommerce-table--order-details tfoot tr:last-of-type th,
.woocommerce-table--order-details tfoot tr.order-total th,
.woocommerce-table--order-details tfoot tr.order-total td {
    background: var(--vdhg-surface-hi);
    font-size: 15px;
    color: var(--vdhg-fg);
}
.woocommerce-table--order-details tfoot tr.order-total td,
.woocommerce-table--order-details tfoot tr.order-total td .woocommerce-Price-amount {
    color: var(--vdhg-green);
}
/* Note/Payment method/Shipping rows read nicely wrapped. */
.woocommerce-table--order-details tfoot td {
    line-height: 1.45;
    word-break: break-word;
}

/* Customer details — billing + shipping side-by-side when both exist. */
.woocommerce-customer-details {
    margin: 8px 0 36px;
}
.woocommerce-customer-details .woocommerce-columns,
.woocommerce-customer-details .woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.woocommerce-customer-details address,
.woocommerce-customer-details .woocommerce-column--billing-address address,
.woocommerce-customer-details .woocommerce-column--shipping-address address {
    display: block;
    padding: 16px 18px;
    background: var(--vdhg-surface);
    border: 1px solid var(--vdhg-border);
    border-radius: var(--vdhg-radius);
    font-style: normal;
    color: var(--vdhg-fg);
    font-size: 14px;
    line-height: 1.55;
}
.woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-customer-details .woocommerce-customer-details--email {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px dashed var(--vdhg-border);
    color: var(--vdhg-muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    word-break: break-all;
}
.woocommerce-customer-details .woocommerce-customer-details--phone::before  { content: '☎'; color: var(--vdhg-green); }
.woocommerce-customer-details .woocommerce-customer-details--email::before  { content: '✉'; color: var(--vdhg-green); }
.woocommerce-customer-details .woocommerce-customer-details--phone a,
.woocommerce-customer-details .woocommerce-customer-details--email a {
    color: var(--vdhg-fg);
    text-decoration: none;
    border-bottom: 1px dotted var(--vdhg-border);
}
.woocommerce-customer-details .woocommerce-customer-details--phone a:hover,
.woocommerce-customer-details .woocommerce-customer-details--email a:hover {
    color: var(--vdhg-green);
    border-color: var(--vdhg-border-green);
}

@media (max-width: 560px) {
    .woocommerce-table--order-details tfoot th,
    .woocommerce-table--order-details tfoot td { padding: 9px 14px; font-size: 13px; }
    .woocommerce-customer-details address { padding: 14px; }
}

/* Per-card photo controls — right column of the card body, separated from
   the metadata column by a thin vertical rule. The section also doubles as
   the JS root (carries the data-ajax-url etc. for order-photos.js). */
.vdhg-order-overview__photos {
    padding-left: 18px;
    border-left: 1px dashed var(--vdhg-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
/* Stack Front on top of Back on the order page — keeps each row wide enough
   to fit icon+label buttons without squishing. Override the wizard's default
   2-col slots grid. */
.vdhg-order-photos__slots {
    grid-template-columns: 1fr !important;
    gap: 8px;
    margin: 0;
}
/* Per-slot action buttons carry a text label next to the icon on the order
   page — clearer than an icon-only compact control. */
.vdhg-order-photos__action {
    padding: 4px 10px;
    gap: 6px;
    cursor: pointer;
    line-height: 1;
    font-size: 12px;
    font-weight: 500;
}
.vdhg-order-photos__action .vdhg-wiz__photo-btn-label { font-weight: 600; }

/* Device-capability gating — render both in HTML, hide the phone-QR option
   on touch devices where it's pointless noise (the device has a camera
   already). Desktop keeps both affordances: QR for users without a webcam
   (most desks) and file-upload for those with scans already on disk. */
@media (pointer: coarse) {
    .vdhg-photo-action--phone { display: none !important; }
}

@media (max-width: 560px) {
    .vdhg-order-overview__card { grid-template-columns: 56px 1fr; gap: 12px; padding: 10px 12px; }
    .vdhg-order-overview__img,
    .vdhg-order-overview__img--ph { width: 56px; height: 80px; }
    .vdhg-order-overview__name { font-size: 14px; }
    /* Stack meta + photos vertically on phone widths — no room for two cols. */
    .vdhg-order-overview__body {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .vdhg-order-overview__photos {
        padding-left: 0;
        padding-top: 10px;
        border-left: 0;
        border-top: 1px dashed var(--vdhg-border);
    }
}