/*
 * ER Commerce Chrome (Build 007 Gates 12-15) — cart, checkout, my account,
 * and WooCommerce notices. Scoped to commerce contexts only (see
 * er_enqueue_assets() in functions.php), matching the existing
 * er_dequeue_woocommerce_assets_outside_commerce() scoping.
 *
 * Cart and Checkout render through WooCommerce Blocks (confirmed via the
 * page content: <!-- wp:woocommerce/cart --> / <!-- wp:woocommerce/checkout
 * -->), not the classic shortcode templates — so this file themes the
 * actual wc-block-* class names WC Blocks renders, rather than fighting the
 * block system with PHP template overrides. My Account still renders via
 * the classic [woocommerce_my_account] shortcode, themed via WooCommerce's
 * standard .woocommerce-* classes.
 */

/* Kadence wraps every page's content in <article class="entry content-bg">
   with a hardcoded white background (visible in Kadence's own page-builder
   contexts) — invisible on every other page in this theme because those
   pages set their own section backgrounds first, but cart/checkout/account
   render through WordPress's plain page template via the_content(), so
   this is the first background painted underneath the WC Blocks markup.
   This file only loads in commerce contexts, so overriding it here is safe. */
.content-bg {
    background: var(--er-bg) !important;
}

/* ============ GATE 12: CART ============ */

.wc-block-cart {
    font-family: var(--er-font-body);
}

.wc-block-components-main,
.wc-block-components-sidebar {
    background: transparent;
}

.wc-block-cart-items {
    border-color: var(--er-border);
}

.wc-block-cart-items__header {
    border-bottom: 1px solid var(--er-border);
}

.wc-block-cart-items__header-image,
.wc-block-cart-items__header-product,
.wc-block-cart-items__header-total {
    font-family: var(--er-font-mono);
    font-size: var(--er-text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--er-text-faint);
}

.wc-block-cart-item {
    border-bottom: 1px solid var(--er-border);
}

/* WC Blocks' Store API returns its own bundled woocommerce-placeholder.webp
   for products with no image — a different code path from the classic
   wc_placeholder_img() filter er_product_placeholder_image() already
   replaces (functions.php), so it needs its own treatment here: a dark
   branded tile instead of a plain white square with a generic icon
   (Build 004R Gate 11's "no broken-image-style placeholder" rule). */
.wc-block-cart-item__image,
.wc-block-components-product-image {
    background: var(--er-bg-panel);
    border-radius: var(--er-radius-sm);
}

.wc-block-cart-item__image img,
.wc-block-components-product-image img {
    opacity: 0.55;
    mix-blend-mode: luminosity;
}

.wc-block-components-product-name {
    color: var(--er-text);
    font-weight: 600;
    font-family: var(--er-font-display);
}

.wc-block-components-product-name:hover {
    color: var(--er-accent-strong);
}

.wc-block-components-product-price,
.wc-block-components-formatted-money-amount {
    color: var(--er-accent-strong);
    font-family: var(--er-font-mono);
}

.wc-block-components-product-metadata {
    color: var(--er-text-faint);
}

/* Quantity stepper */
.wc-block-components-quantity-selector {
    border-color: var(--er-border-strong);
    border-radius: var(--er-radius-sm);
    background: var(--er-bg-raised);
}

.wc-block-components-quantity-selector__input {
    background: transparent;
    color: var(--er-text);
    font-family: var(--er-font-mono);
}

.wc-block-components-quantity-selector__button {
    color: var(--er-text-dim);
}

.wc-block-components-quantity-selector__button:hover {
    color: var(--er-accent-strong);
    background: var(--er-bg-panel);
}

.wc-block-cart-item__remove-link {
    color: var(--er-text-faint);
    font-size: var(--er-text-sm);
}

.wc-block-cart-item__remove-link:hover {
    color: var(--er-risk);
}

/* Totals sidebar */
.wc-block-components-totals-wrapper {
    border-color: var(--er-border);
}

.wc-block-cart__totals-title {
    font-family: var(--er-font-display);
    color: var(--er-text);
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
    color: var(--er-text-dim);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    color: var(--er-text);
    font-weight: 700;
    font-size: var(--er-text-lg);
}

/* Primary CTA buttons across cart + checkout — same visual language as .er-btn--primary */
.wc-block-components-button.wp-element-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
    background: var(--er-accent) !important;
    color: var(--er-carbon-900) !important;
    border-radius: var(--er-radius-sm) !important;
    font-weight: 600 !important;
    font-family: var(--er-font-body) !important;
    text-transform: none !important;
    border: none !important;
    min-height: 44px;
    transition: background var(--er-motion-fast) var(--er-ease-standard), box-shadow var(--er-motion-fast) var(--er-ease-out);
}

.wc-block-components-button.wp-element-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
    background: var(--er-accent-strong) !important;
    box-shadow: var(--er-shadow-glow);
}

/* Secondary / outline buttons (coupon apply, etc.) */
.wc-block-components-button.is-style-outline {
    border-color: var(--er-border-strong) !important;
    color: var(--er-text) !important;
    background: transparent !important;
}

/* Empty cart state */
.wc-block-cart__empty-cart__title {
    font-family: var(--er-font-display);
    color: var(--er-text);
}

.wc-block-cart__empty-cart__description {
    color: var(--er-text-dim);
}

/* ============ GATE 13: CHECKOUT ============ */

.wc-block-checkout__main,
.wc-block-checkout__sidebar {
    background: transparent;
}

.wc-block-components-checkout-step__title {
    font-family: var(--er-font-display);
    color: var(--er-text);
    font-size: var(--er-text-lg);
}

.wc-block-components-checkout-step__description {
    color: var(--er-text-faint);
}

.wc-block-components-checkout-step {
    border-bottom: 1px solid var(--er-border);
}

/* Form fields — text inputs, selects */
.wc-block-components-text-input input,
.wc-block-components-address-form select,
.wc-block-checkout__form select {
    background: var(--er-bg-raised) !important;
    border: 1px solid var(--er-border-strong) !important;
    color: var(--er-text) !important;
    border-radius: var(--er-radius-sm) !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-address-form select:focus {
    border-color: var(--er-accent-strong) !important;
    box-shadow: 0 0 0 1px var(--er-accent-strong) !important;
}

.wc-block-components-text-input label,
.wc-block-components-address-form label {
    color: var(--er-text-faint) !important;
}

/* Validation errors — text + icon, not color alone */
.wc-block-components-validation-error {
    color: var(--er-risk);
    font-size: var(--er-text-sm);
}

.wc-block-components-validation-error p::before {
    content: "⚠ ";
}

/* Payment method panel */
.wc-block-checkout__payment-method .wc-block-components-radio-control__label {
    color: var(--er-text);
}

.wc-block-components-radio-control__description {
    color: var(--er-text-faint);
    font-size: var(--er-text-sm);
}

/* Order summary sidebar */
.wc-block-components-order-summary {
    border-color: var(--er-border);
}

.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
    color: var(--er-accent-strong);
}

/* ============ GATE 14: MY ACCOUNT ============ */

.woocommerce-account .woocommerce {
    color: var(--er-text-dim);
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--er-space-2);
    border-right: 1px solid var(--er-border);
    padding-right: var(--er-space-5);
}

.woocommerce-MyAccount-navigation-link a {
    display: block;
    padding: var(--er-space-3) var(--er-space-4);
    color: var(--er-text-dim) !important;
    border-radius: var(--er-radius-sm);
    font-family: var(--er-font-mono);
    font-size: var(--er-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.woocommerce-MyAccount-navigation-link a:hover {
    background: var(--er-bg-raised);
    color: var(--er-text) !important;
}

/* !important throughout this block: Kadence's own WooCommerce account-nav
   styling (kadence/assets/css/woocommerce.min.css, still enqueued here
   since account pages are a commerce context) wins the cascade on plain
   specificity — confirmed via computed-style check showing its metallic-300
   text color surviving over this rule without !important. */
.woocommerce-MyAccount-navigation-link.is-active a {
    background: var(--er-bg-panel);
    color: var(--er-accent-strong) !important;
    box-shadow: inset 2px 0 0 var(--er-accent-strong);
}

.woocommerce-form-row label,
.form-row label {
    color: var(--er-text-faint);
    font-size: var(--er-text-sm);
    display: block;
    margin-bottom: var(--er-space-1);
}

.woocommerce-Input,
.woocommerce form .input-text,
.woocommerce-form input[type="text"],
.woocommerce-form input[type="email"],
.woocommerce-form input[type="password"] {
    background: var(--er-bg-raised);
    border: 1px solid var(--er-border-strong);
    color: var(--er-text);
    border-radius: var(--er-radius-sm);
    padding: var(--er-space-3) var(--er-space-4);
    width: 100%;
}

.woocommerce-Input:focus {
    border-color: var(--er-accent-strong);
    outline: none;
    box-shadow: 0 0 0 1px var(--er-accent-strong);
}

.woocommerce-button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background: var(--er-accent);
    color: var(--er-carbon-900);
    border: none;
    border-radius: var(--er-radius-sm);
    padding: var(--er-space-3) var(--er-space-6);
    font-weight: 600;
    font-family: var(--er-font-body);
    cursor: pointer;
    min-height: 44px;
}

.woocommerce-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background: var(--er-accent-strong);
    box-shadow: var(--er-shadow-glow);
}

.woocommerce-orders-table,
.woocommerce-MyAccount-orders,
.woocommerce-table {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-orders-table th,
.woocommerce-orders-table td,
.woocommerce-table th,
.woocommerce-table td {
    border-bottom: 1px solid var(--er-border);
    padding: var(--er-space-3) var(--er-space-4);
    color: var(--er-text-dim);
    text-align: left;
}

.woocommerce-orders-table th {
    font-family: var(--er-font-mono);
    font-size: var(--er-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--er-text-faint);
}

.woocommerce-order-status,
.woocommerce-orders-table__cell-order-status {
    font-family: var(--er-font-mono);
    font-size: var(--er-text-xs);
    text-transform: uppercase;
    color: var(--er-accent-strong) !important;
}

.woocommerce-Address {
    background: var(--er-bg-raised);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-md);
    padding: var(--er-space-5);
}

.woocommerce-Address-title h3 {
    font-size: var(--er-text-md);
}

/* ============ GATE 15: NOTICES ============ */

/* Classic notices (my account, some legacy fragments) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
    background: var(--er-bg-raised);
    border: 1px solid var(--er-border-strong);
    border-left: 3px solid var(--er-accent-strong);
    border-radius: var(--er-radius-sm);
    color: var(--er-text);
    padding: var(--er-space-4) var(--er-space-5);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--er-space-4);
    flex-wrap: wrap;
}

.woocommerce-message::before,
.woocommerce-error::before {
    content: none; /* remove WC's default dashicon glyph — replaced by the left border + explicit text below */
}

.woocommerce-message a.button,
.woocommerce-error a.button {
    background: var(--er-accent);
    color: var(--er-carbon-900);
}

.woocommerce-error {
    border-left-color: var(--er-risk);
}

.woocommerce-error::after,
.woocommerce-message::after {
    order: -1;
    font-family: var(--er-font-mono);
    font-size: var(--er-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--er-text-faint);
    content: "Notice";
}

.woocommerce-error {
    color: var(--er-text);
}

/* Blocks-based notices (Cart/Checkout Store API errors, coupon feedback) */
.wc-block-components-notice-banner {
    background: var(--er-bg-raised) !important;
    border: 1px solid var(--er-border-strong) !important;
    border-left: 3px solid var(--er-accent-strong) !important;
    border-radius: var(--er-radius-sm) !important;
    color: var(--er-text) !important;
}

.wc-block-components-notice-banner.is-error {
    border-left-color: var(--er-risk) !important;
}

.wc-block-components-notice-banner.is-success {
    border-left-color: var(--er-accent-strong) !important;
}

.wc-block-components-notice-banner .wc-block-components-notice-banner__content {
    color: var(--er-text-dim) !important;
}