/* Elite Center — WC Blocks Cart Styles (Sprint Rediseno 4 — REWRITE)
 *
 * CRITICAL FIX (2026-05-20): WC Blocks renders cart items as a real <table>
 * with <thead>/<tbody>/<tr>/<td>. The previous version applied `display:flex`
 * to .wc-block-cart-items__row (a <tr>), which collapsed the entire layout.
 *
 * This rewrite respects the native table structure:
 *   - NO `display:flex` or `display:grid` on .wc-block-cart-items, __row, or any <td>.
 *   - The 2-column wrapper layout (main + sidebar) DOES use flex/grid — at the
 *     `.wc-block-cart` level, NOT inside the table.
 *   - All styling = colors, typography, borders, cell padding, sidebar, CTA.
 *
 * Scope: 100% under `.wp-block-woocommerce-cart`. Zero collisions with classic
 * WC (`.woocommerce-cart`) or chrome.css.
 * Tokens consumed from tokens.css (Brand v2).
 */

/* ═══════════════════════════════════════════════════════════════
 * 1. ROOT WRAPPER + 2-COLUMN LAYOUT (main + sidebar)
 *    Flex/Grid lives HERE, NOT inside the items table.
 * ═══════════════════════════════════════════════════════════════ */
.wp-block-woocommerce-cart {
  font-family: var(--ec-font-body);
  color: var(--ec-text-primary);
  /* min(1280px, 100%) = nunca excede el viewport en mobile aunque exista padding
   * acumulado del parent (Woodmart .container injecta gutters); 1280px en desktop. */
  max-width: min(1280px, 100%);
  margin: 0 auto;
  padding: var(--sp-xl) var(--sp-md);
  box-sizing: border-box;
  /* MED-4 (2026-05-23): overflow-x hidden es defensa mobile contra el <table>
   * interno + sidebar que pueden empujar el ancho. No se aplica container-type
   * en este archivo (validado), por lo que la combinación overflow + sticky
   * funciona. Si en futuro se agrega container-type aquí, mover este overflow
   * al hijo .wc-block-components-sidebar-layout para no romper sticky. */
  overflow-x: hidden;
}

/* MED-1 (2026-05-23): .wc-block-cart SÍ existe como clase compuesta sobre el
 * mismo elemento que .wc-block-components-sidebar-layout. Verificado en source
 * del plugin (wp-content/plugins/woocommerce/assets/client/blocks/cart.css)
 * que usa selectores como `.wc-block-cart .wp-block-woocommerce-cart-order-summary-block`.
 * El selector es válido y aplica al wrapper de columnas del layout. */
.wp-block-woocommerce-cart .wc-block-cart {
  display: grid;
  grid-template-columns: 1fr; /* mobile: single column */
  gap: var(--sp-lg);
  align-items: start;
}

@media (min-width: 1024px) {
  .wp-block-woocommerce-cart .wc-block-cart {
    /* v6.3 item 6 Benjamin: aumentar sidebar 380→440px. Balance desktop ~65/35. */
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: var(--sp-xl);
  }
  /* MED-2 (2026-05-23): override consciente del top:24px nativo del plugin
   * (clase .is-sticky cuando aplica). Necesitamos 90px de offset porque el
   * sitio tiene chrome header sticky propio (~70-80px) que solapa el sidebar
   * si usamos el valor default. Justificación visual: el sidebar debe quedar
   * por debajo del header con un colchón de respiro de ~10px. */
  .wp-block-woocommerce-cart .wc-block-cart__sidebar {
    position: sticky;
    top: 90px;
  }
}

.wp-block-woocommerce-cart .wc-block-cart__main {
  min-width: 0; /* prevents table from breaking grid track */
}

/* ═══════════════════════════════════════════════════════════════
 * 2. ITEMS TABLE — respect native <table> rendering.
 *    No flex/grid here. Only spacing, borders, typography.
 * ═══════════════════════════════════════════════════════════════ */
.wp-block-woocommerce-cart .wc-block-cart-items {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  padding: 0;
  background: var(--ec-surface);
  /* Force table-layout fixed in mobile to honour td widths and prevent
   * native algorithm from expanding columns beyond viewport. Overridden
   * to auto in desktop where horizontal real-estate is abundant. */
  table-layout: fixed;
}

@media (min-width: 768px) {
  .wp-block-woocommerce-cart .wc-block-cart-items {
    table-layout: auto;
  }
}

/* Column header row (<thead><tr>) */
.wp-block-woocommerce-cart .wc-block-cart-items__header {
  border-bottom: 1px solid var(--ec-border);
}

.wp-block-woocommerce-cart .wc-block-cart-items__header th {
  font-family: var(--ec-font-label, var(--ec-font-display));
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ec-text-muted);
  text-align: left;
  padding: var(--sp-sm) var(--sp-sm);
  background: transparent;
  border: none;
  vertical-align: middle;
}

.wp-block-woocommerce-cart
  .wc-block-cart-items__header
  .wc-block-cart-items__header-image {
  width: 96px;
}

.wp-block-woocommerce-cart
  .wc-block-cart-items__header
  .wc-block-cart-items__header-quantity {
  width: 160px;
  text-align: center;
}

.wp-block-woocommerce-cart
  .wc-block-cart-items__header
  .wc-block-cart-items__header-total {
  width: 140px;
  text-align: right;
}

/* Each product row (<tr>) — border-bottom only. NO flex. */
.wp-block-woocommerce-cart .wc-block-cart-items__row {
  border-bottom: 1px solid var(--ec-border);
  background: transparent;
}

.wp-block-woocommerce-cart .wc-block-cart-items__row:last-child {
  border-bottom: none;
}

/* All <td> cells share base padding + vertical-align top.
   No display override — must remain table-cell. */
.wp-block-woocommerce-cart .wc-block-cart-items__row > td,
.wp-block-woocommerce-cart .wc-block-cart-item__image,
.wp-block-woocommerce-cart .wc-block-cart-item__product,
.wp-block-woocommerce-cart .wc-block-cart-item__quantity,
.wp-block-woocommerce-cart .wc-block-cart-item__total {
  padding: var(--sp-md) var(--sp-sm);
  vertical-align: top;
  border: none;
}

/* ═══════════════════════════════════════════════════════════════
 * 3. IMAGE CELL
 * ═══════════════════════════════════════════════════════════════ */
.wp-block-woocommerce-cart .wc-block-cart-item__image {
  width: 96px;
}

.wp-block-woocommerce-cart .wc-block-cart-item__image a {
  display: block;
}

.wp-block-woocommerce-cart .wc-block-cart-item__image img {
  width: 80px;
  height: 80px;
  max-width: 80px;
  object-fit: contain;
  border-radius: var(--ec-r-md);
  border: 1px solid var(--ec-border);
  background: var(--ec-surface-2);
  padding: 4px;
  box-sizing: border-box;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
 * 4. PRODUCT CELL (name + metadata + price)
 * ═══════════════════════════════════════════════════════════════ */
.wp-block-woocommerce-cart .wc-block-cart-item__product {
  /* table-cell behaves like a flexible column; just constrain content */
  min-width: 0;
  /* Prevent long SKUs / model codes from forcing table to overflow viewport.
   * overflow-wrap:anywhere ya cubre el caso (rompe palabras donde sea necesario);
   * word-break redundante removido en cleanup 2026-05-23. */
  overflow-wrap: anywhere;
}

.wp-block-woocommerce-cart .wc-block-cart-item__product-name,
.wp-block-woocommerce-cart .wc-block-cart-item__product h2,
.wp-block-woocommerce-cart .wc-block-cart-item__product h2 a,
.wp-block-woocommerce-cart .wc-block-cart-item__product a {
  font-family: var(--ec-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--ec-text-primary);
  text-decoration: none;
  display: block;
  margin: 0 0 var(--sp-xs) 0;
  transition: color 0.15s ease;
  /* SKU / model codes con guiones largos no rompen layout.
   * overflow-wrap:anywhere es suficiente; word-break redundante removido. */
  overflow-wrap: anywhere;
}

.wp-block-woocommerce-cart .wc-block-cart-item__product a:hover,
.wp-block-woocommerce-cart .wc-block-cart-item__product h2 a:hover {
  color: var(--ec-primary);
}

/* Hide noisy short-description / attribute metadata (B2B: name+SKU+price only). */
.wp-block-woocommerce-cart .wc-block-components-product-metadata,
.wp-block-woocommerce-cart .wc-block-cart-item__product-metadata,
.wp-block-woocommerce-cart .wc-block-components-product-details,
.wp-block-woocommerce-cart .wc-block-components-product-details__list,
.wp-block-woocommerce-cart .wc-block-components-product-summary,
.wp-block-woocommerce-cart .wc-block-components-product-metadata__description {
  display: none !important;
}

/* Unit price inside product cell — small + muted (line total is the headline). */
.wp-block-woocommerce-cart
  .wc-block-cart-item__product
  .wc-block-components-product-price {
  font-family: var(--ec-font-mono);
  font-size: 0.85rem;
  color: var(--ec-text-muted);
  margin-top: var(--sp-2xs);
  font-variant-numeric: tabular-nums;
  display: block;
}

.wp-block-woocommerce-cart
  .wc-block-cart-item__product
  .wc-block-components-product-price__value {
  font-family: var(--ec-font-mono);
  color: var(--ec-text-muted);
  font-weight: 500;
}

.wp-block-woocommerce-cart
  .wc-block-cart-item__product
  .wc-block-components-product-price__regular {
  color: var(--ec-text-hint);
  text-decoration: line-through;
  margin-right: var(--sp-xs);
}

/* SKU / sale badges inside product cell stay subtle */
.wp-block-woocommerce-cart .wc-block-components-product-sale-badge {
  display: inline-block;
  background: var(--ec-black);
  color: #fff;
  font-family: var(--ec-font-label, var(--ec-font-body));
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: var(--ec-r-sm);
  margin-top: var(--sp-xs);
}

/* ═══════════════════════════════════════════════════════════════
 * 5. QUANTITY CELL — stepper + remove link
 *    Quantity selector itself uses flex (it's a <div>, not a <tr>).
 * ═══════════════════════════════════════════════════════════════ */
.wp-block-woocommerce-cart .wc-block-cart-item__quantity {
  width: 160px;
  text-align: center;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-r-md);
  overflow: hidden;
  background: var(--ec-surface);
  margin: 0 auto;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector button {
  background: var(--ec-surface-2);
  border: none;
  padding: 0 var(--sp-sm);
  cursor: pointer;
  color: var(--ec-text-primary);
  font-size: 1.1rem;
  line-height: 1;
  min-width: 36px;
  min-height: 36px;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button:hover,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector button:hover {
  background: var(--ec-primary-light);
  color: var(--ec-primary);
}

.wp-block-woocommerce-cart
  .wc-block-components-quantity-selector__button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector__input,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector input {
  width: 44px;
  text-align: center;
  border: none;
  font-family: var(--ec-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ec-text-primary);
  background: transparent;
  padding: 0;
  -moz-appearance: textfield;
}

.wp-block-woocommerce-cart
  .wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
.wp-block-woocommerce-cart
  .wc-block-components-quantity-selector__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector__input:focus {
  outline: none;
}

/* Remove link sits below the stepper, in the same cell. */
.wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
  display: block;
  margin: var(--sp-xs) auto 0;
  font-family: var(--ec-font-body);
  font-size: 0.78rem;
  color: var(--ec-text-muted);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: center;
  transition: color 0.15s ease;
}

.wp-block-woocommerce-cart .wc-block-cart-item__remove-link:hover {
  color: var(--ec-error);
}

/* ═══════════════════════════════════════════════════════════════
 * 6. TOTAL CELL — line total, right-aligned, mono
 * ═══════════════════════════════════════════════════════════════ */
.wp-block-woocommerce-cart .wc-block-cart-item__total {
  width: 140px;
  text-align: right;
}

.wp-block-woocommerce-cart
  .wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wp-block-woocommerce-cart
  .wc-block-cart-item__total
  .wc-block-components-product-price {
  font-family: var(--ec-font-mono);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ec-text-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.wp-block-woocommerce-cart
  .wc-block-cart-item__total
  .wc-block-components-product-price__value {
  color: var(--ec-text-primary);
  font-weight: 700;
}

.wp-block-woocommerce-cart
  .wc-block-cart-item__total
  .wc-block-components-product-price__regular {
  color: var(--ec-text-hint);
  text-decoration: line-through;
  display: block;
  font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════════
 * 7. SIDEBAR — TOTALES (card on --ec-surface-2)
 *
 * CRIT-1 fix (2026-05-23): el card visual se aplica al HIJO NATIVO
 * .wp-block-woocommerce-cart-order-summary-block, NO al wrapper de columna
 * .wc-block-cart__sidebar. Antes ambos elementos recibían bg+border+padding,
 * generando efecto "caja dentro de caja" visible en desktop y mobile.
 *
 * El wrapper .wc-block-cart__sidebar queda transparente, solo gobierna
 * layout (position sticky en desktop, definido en sección 1).
 *
 * Los siblings (express-payment, proceed-to-checkout, accepted-payment-methods)
 * quedan como bloques independientes con su propio spacing top, separados
 * visualmente del card del summary.
 * ═══════════════════════════════════════════════════════════════ */

/* Card visual: aplicado al hijo nativo que el plugin trata como unidad. */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
  background: var(--ec-surface-2);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-r-xl);
  padding: var(--sp-lg);
  /* Reset del border-bottom nativo del plugin (hsla 0 0% 7% .11) para evitar
   * línea visible redundante dentro del card. El plugin lo agrega para
   * separar el summary del siguiente sibling, pero ya tenemos margin-top
   * en proceed-to-checkout y el border completo del card. */
  border-bottom: 1px solid var(--ec-border);
  /* Reset del margin-bottom nativo (16px) para que el spacing entre summary
   * y siguiente bloque lo controle nuestro margin-top consistente. */
  margin-bottom: 0;
}

/* Siblings del summary dentro del sidebar: spacing coherente, sin double border. */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-express-payment-block,
.wp-block-woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block,
.wp-block-woocommerce-cart
  .wp-block-woocommerce-cart-accepted-payment-methods-block {
  margin-top: var(--sp-md);
}

.wp-block-woocommerce-cart .wc-block-components-totals-wrapper {
  font-family: var(--ec-font-body);
}

.wp-block-woocommerce-cart .wc-block-cart__totals-title,
.wp-block-woocommerce-cart h2.wc-block-cart__totals-title {
  font-family: var(--ec-font-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ec-text-primary);
  margin: 0 0 var(--sp-md) 0;
  padding-bottom: var(--sp-sm);
  border-bottom: 1px solid var(--ec-border);
}

.wp-block-woocommerce-cart .wc-block-components-totals-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--sp-xs) 0;
  color: var(--ec-text-secondary);
  font-family: var(--ec-font-body);
  font-size: 0.9rem;
}

.wp-block-woocommerce-cart .wc-block-components-totals-item__label {
  color: var(--ec-text-secondary);
}

.wp-block-woocommerce-cart .wc-block-components-totals-item__value {
  font-family: var(--ec-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ec-text-primary);
}

/* Total final (footer) — emphasized but not louder than CTA. */
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item,
.wp-block-woocommerce-cart .wc-block-components-totals-item--total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--ec-border);
  margin-top: var(--sp-sm);
  padding-top: var(--sp-md);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ec-text-primary);
}

.wp-block-woocommerce-cart
  .wc-block-components-totals-footer-item
  .wc-block-components-totals-item__value,
.wp-block-woocommerce-cart
  .wc-block-components-totals-item--total
  .wc-block-components-totals-item__value {
  font-family: var(--ec-font-mono);
  font-size: 1.05rem;
  color: var(--ec-text-primary);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
 * 7B. SIDEBAR WIDTH RESET — Issue H (v2 2026-05-23)
 *
 * El plugin nativo aplica `width: 35%; padding-left: 2.26%` sobre el
 * wrapper de columna del sidebar y sobre `.wp-block-woocommerce-cart-totals-block`,
 * compitiendo con nuestro grid layout `minmax(0, 1fr) 380px` definido en la
 * sección 1. Reset para que grid gane limpio sin offsets ni width nativos.
 *
 * Sin este reset, en algunas resoluciones el sidebar quedaba con padding
 * extra o width fraccional restando ancho útil al main column del cart.
 * ═══════════════════════════════════════════════════════════════ */
.wp-block-woocommerce-cart .wc-block-cart__sidebar,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-totals-block {
  width: auto;
  padding-left: 0;
  padding-right: 0;
}

/* v4 FIX (2026-05-23 post-DOM-inspection): plugin nativo aplica
 * width:65%; padding-right:2.26% al .wc-block-components-main que también
 * es .wc-block-cart__main. Mi grid track de 1fr lo expande a 836px pero el
 * width:65% interno lo limita a 543px, dejando 293px vacios entre cart items
 * y sidebar (visible como "muy separado en desktop"). Reset width auto. */
.wp-block-woocommerce-cart .wc-block-components-main,
.wp-block-woocommerce-cart .wc-block-cart__main,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-items-block {
  width: auto;
  max-width: 100%;
  padding-right: 0;
}

/* Issue H (v2 2026-05-23): el plugin nativo aplica background skeleton
 * `color-mix(currentColor 5%, transparent)` sobre el wrapper del
 * proceed-to-checkout durante el estado de carga. Ese halo gris persiste
 * visualmente post-load (skeleton no se limpia bien) y rodea el botón
 * "Finalizar compra" con una sombra fantasma. Reset transparente. */
.wp-block-woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block {
  background: transparent;
  border-radius: 0;
  min-height: 0;
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════
 * 8. CTA — "Finalizar compra" (full-width indigo pill)
 * ═══════════════════════════════════════════════════════════════ */
.wp-block-woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block,
.wp-block-woocommerce-cart .wc-block-cart__submit-container {
  margin-top: var(--sp-md);
}

.wp-block-woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block a,
.wp-block-woocommerce-cart
  .wp-block-woocommerce-proceed-to-checkout-block
  button,
.wp-block-woocommerce-cart a.wc-block-cart__submit-button,
.wp-block-woocommerce-cart button.wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
  display: block !important;
  width: 100% !important;
  /* v6.3 item 4 Benjamin: azul Design MD #444ce7 forzado. */
  background: var(--ec-primary, #444ce7) !important;
  background-color: var(--ec-primary, #444ce7) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-family: var(--ec-font-display) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: var(--sp-md) var(--sp-lg) !important;
  border-radius: var(--ec-r-pill) !important;
  border: none !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 12px rgba(68, 76, 231, 0.25) !important;
  transition:
    background 0.2s ease,
    transform 0.12s ease,
    box-shadow 0.2s ease !important;
}

.wp-block-woocommerce-cart
  .wp-block-woocommerce-proceed-to-checkout-block
  a:hover,
.wp-block-woocommerce-cart
  .wp-block-woocommerce-proceed-to-checkout-block
  button:hover,
.wp-block-woocommerce-cart a.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart button.wc-block-cart__submit-button:hover {
  background: var(--ec-primary-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(68, 76, 231, 0.35) !important;
}

.wp-block-woocommerce-cart
  .wp-block-woocommerce-proceed-to-checkout-block
  a:focus-visible,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:focus-visible {
  outline: 0;
  box-shadow:
    0 4px 12px rgba(68, 76, 231, 0.25),
    0 0 0 3px color-mix(in oklab, var(--ec-primary) 32%, transparent) !important;
}

/* ═══════════════════════════════════════════════════════════════
 * 9. COUPON INPUT (collapsible panel inside totals)
 * ═══════════════════════════════════════════════════════════════ */
.wp-block-woocommerce-cart .wc-block-components-totals-coupon {
  padding: var(--sp-sm) 0;
  border-top: 1px solid var(--ec-border);
  margin-top: var(--sp-sm);
}

.wp-block-woocommerce-cart .wc-block-components-totals-coupon__form {
  display: flex;
  gap: var(--sp-xs);
  align-items: stretch;
}

.wp-block-woocommerce-cart .wc-block-components-totals-coupon input,
.wp-block-woocommerce-cart .wc-block-components-totals-coupon__input input {
  font-family: var(--ec-font-body);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-r-md);
  padding: var(--sp-xs) var(--sp-sm);
  font-size: 0.9rem;
  background: var(--ec-surface);
  color: var(--ec-text-primary);
  flex: 1;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.wp-block-woocommerce-cart .wc-block-components-totals-coupon input:focus {
  outline: none;
  border-color: var(--ec-primary);
  box-shadow: 0 0 0 3px var(--ec-primary-light);
}

.wp-block-woocommerce-cart .wc-block-components-totals-coupon button {
  background: transparent;
  border: 1px solid var(--ec-primary);
  color: var(--ec-primary);
  border-radius: var(--ec-r-md);
  padding: var(--sp-xs) var(--sp-md);
  font-family: var(--ec-font-body);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  white-space: nowrap;
}

.wp-block-woocommerce-cart .wc-block-components-totals-coupon button:hover {
  background: var(--ec-primary);
  color: #fff;
}

.wp-block-woocommerce-cart .wc-block-components-panel__button {
  font-family: var(--ec-font-body);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ec-primary);
  background: none;
  border: none;
  padding: var(--sp-xs) 0;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
 * 10. EMPTY CART
 * ═══════════════════════════════════════════════════════════════ */
.wp-block-woocommerce-cart .wc-block-cart--is-loading,
.wp-block-woocommerce-cart .wc-empty-cart-message,
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block {
  text-align: center;
  padding: var(--sp-2xl) var(--sp-lg);
  color: var(--ec-text-muted);
  font-family: var(--ec-font-body);
}

.wp-block-woocommerce-cart .wc-empty-cart-message h2,
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block h2 {
  font-family: var(--ec-font-display);
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ec-text-primary);
  margin-bottom: var(--sp-md);
}

.wp-block-woocommerce-cart .wc-empty-cart-message p,
.wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block p {
  font-size: 1rem;
  margin-bottom: var(--sp-lg);
  color: var(--ec-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
 * 11. CROSS-SELLS
 * ═══════════════════════════════════════════════════════════════ */
.wp-block-woocommerce-cart .wc-block-cart__cross-sells,
.wp-block-woocommerce-cart .wc-block-cross-sells,
.wp-block-woocommerce-cart .cross-sells {
  margin-top: var(--sp-xl);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--ec-border);
}

.wp-block-woocommerce-cart .wc-block-cart__cross-sells h2,
.wp-block-woocommerce-cart .wc-block-cross-sells h2,
.wp-block-woocommerce-cart .cross-sells h2 {
  font-family: var(--ec-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ec-text-primary);
  margin-bottom: var(--sp-md);
}

.wp-block-woocommerce-cart .cross-sells ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════════
 * 12. MOBILE OVERRIDES — TIER 1: ≤767px tablet-ish portrait
 *    Tabla compacta pero sigue siendo <table>. Shrink + tighten only.
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .wp-block-woocommerce-cart {
    padding: var(--sp-md);
  }

  .wp-block-woocommerce-cart .wc-block-cart-items__header {
    display: none; /* hide column headers on mobile to save room */
  }

  .wp-block-woocommerce-cart .wc-block-cart-items__row > td,
  .wp-block-woocommerce-cart .wc-block-cart-item__image,
  .wp-block-woocommerce-cart .wc-block-cart-item__product,
  .wp-block-woocommerce-cart .wc-block-cart-item__quantity,
  .wp-block-woocommerce-cart .wc-block-cart-item__total {
    padding: var(--sp-sm) 4px;
  }

  .wp-block-woocommerce-cart .wc-block-cart-item__image {
    width: 72px;
  }

  .wp-block-woocommerce-cart .wc-block-cart-item__image img {
    width: 60px;
    height: 60px;
    max-width: 60px;
  }

  .wp-block-woocommerce-cart .wc-block-cart-item__quantity {
    width: 120px;
  }

  .wp-block-woocommerce-cart .wc-block-cart-item__total {
    width: 100px;
  }

  .wp-block-woocommerce-cart .wc-block-cart-item__product-name,
  .wp-block-woocommerce-cart .wc-block-cart-item__product a {
    font-size: 0.875rem;
  }

  .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button {
    min-width: 32px;
    min-height: 32px;
    padding: 0 8px;
  }

  .wp-block-woocommerce-cart .wc-block-components-quantity-selector__input {
    width: 36px;
  }
}

/* ═══════════════════════════════════════════════════════════════
 * 12B. MOBILE OVERRIDES — TIER 2: ≤480px narrow phones (Samsung S25 = 360px)
 *
 *    A 360px hay 328px utilizables (16+16 padding). Repartir 64 imagen
 *    + 110 qty + 88 total = 262px en columnas fijas deja ≤66px para
 *    el nombre de producto — INSUFICIENTE.
 *
 *    SOLUCIÓN: transformar las <td> a display:block visualmente, manteniendo
 *    la estructura <tr><td> nativa intacta. Cada celda se apila en 2 filas:
 *      Row visual 1: imagen (float left) + nombre + precio unitario
 *      Row visual 2: qty stepper (left) + total (right) alineados
 *
 *    NO se rompe la <table>; sólo cambia el display para que cada <td> ocupe
 *    100% del ancho del <tr>. Tabla nativa sigue siendo válida.
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Reduce padding del wrapper aún más para 360px */
  .wp-block-woocommerce-cart {
    padding: var(--sp-sm);
  }

  /* Row visual: padding generoso interno, hairline border bottom */
  .wp-block-woocommerce-cart .wc-block-cart-items__row {
    display: block;
    padding: var(--sp-md) var(--sp-xs);
    border-bottom: 1px solid var(--ec-border);
    position: relative;
  }
  .wp-block-woocommerce-cart .wc-block-cart-items__row:last-child {
    border-bottom: none;
  }

  /* Cada <td> ocupa el ancho disponible — auto reset de table-cell */
  .wp-block-woocommerce-cart .wc-block-cart-items__row > td {
    display: block;
    width: auto;
    padding: 0;
    text-align: left;
  }

  /* Imagen: float izquierda dentro de la celda del producto */
  .wp-block-woocommerce-cart .wc-block-cart-item__image {
    float: left;
    width: auto;
    margin: 0 var(--sp-sm) var(--sp-xs) 0;
  }
  .wp-block-woocommerce-cart .wc-block-cart-item__image img {
    width: 64px;
    height: 64px;
    max-width: 64px;
  }

  /* Producto: ocupa el residuo a la derecha de la imagen */
  .wp-block-woocommerce-cart .wc-block-cart-item__product {
    overflow: hidden; /* clear context para el float */
    min-height: 64px;
    padding-bottom: var(--sp-xs);
  }

  .wp-block-woocommerce-cart .wc-block-cart-item__product-name,
  .wp-block-woocommerce-cart .wc-block-cart-item__product a {
    font-size: 0.875rem;
    line-height: 1.3;
  }

  .wp-block-woocommerce-cart
    .wc-block-cart-item__product
    .wc-block-components-product-price {
    font-size: 0.8rem;
  }

  /* Quantity + Total: comparten una fila visual, clear left para resetear float */
  .wp-block-woocommerce-cart .wc-block-cart-item__quantity {
    clear: left;
    display: inline-block;
    width: auto;
    text-align: left;
    margin-top: var(--sp-xs);
    vertical-align: middle;
  }

  .wp-block-woocommerce-cart .wc-block-cart-item__total {
    display: inline-block;
    width: auto;
    text-align: right;
    float: right;
    margin-top: var(--sp-xs);
    vertical-align: middle;
  }

  /* Stepper más compacto (botones 28px, input 32px) para no comer espacio */
  .wp-block-woocommerce-cart .wc-block-components-quantity-selector__button,
  .wp-block-woocommerce-cart .wc-block-components-quantity-selector button {
    min-width: 30px;
    min-height: 32px;
    padding: 0 6px;
    font-size: 1rem;
  }

  .wp-block-woocommerce-cart .wc-block-components-quantity-selector__input,
  .wp-block-woocommerce-cart .wc-block-components-quantity-selector input {
    width: 32px;
    font-size: 0.85rem;
  }

  /* Remove link: align with stepper, abajo */
  .wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
    display: inline-block;
    margin: var(--sp-xs) 0 0 var(--sp-sm);
    font-size: 0.75rem;
    vertical-align: middle;
  }

  /* Total final price más prominente que precio unitario */
  .wp-block-woocommerce-cart
    .wc-block-cart-item__total
    .wc-block-components-product-price,
  .wp-block-woocommerce-cart
    .wc-block-cart-item__total-price-and-sale-badge-wrapper {
    font-size: 0.95rem;
  }

  /* Sidebar card: padding mobile más compacto para totales legibles.
   * Post CRIT-1 fix: el card ahora vive en el hijo nativo, no en el wrapper. */
  .wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
    padding: var(--sp-md);
    border-radius: var(--ec-r-lg);
  }

  /* Coupon form en mobile estrecho: stack vertical (button debajo del input) */
  .wp-block-woocommerce-cart .wc-block-components-totals-coupon__form {
    flex-direction: column;
    gap: var(--sp-xs);
  }
  .wp-block-woocommerce-cart .wc-block-components-totals-coupon__form button {
    width: 100%;
  }

  /* Cross-sells: 2 columnas en mobile estrecho para densidad */
  .wp-block-woocommerce-cart .cross-sells ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-sm);
  }
}

/* ═══════════════════════════════════════════════════════════════
 * 12C. ANCHOR SCROLL OFFSET — sticky mobile header ~55px
 *
 * Cuando WC Blocks dispara scroll a una validación inline (ej:
 * coupon error, item out of stock), el sticky header del chrome
 * mobile (.ec-chrome-mobile) tapa el target. scroll-padding-top
 * resuelve sin tocar chrome.css. Scoped a html cuando la página
 * tiene `.wp-block-woocommerce-cart` para no afectar otras vistas.
 *
 * MED-5 (2026-05-23): :has() tiene soporte ~91% global (Chrome 105+,
 * Edge 105+, Safari 15.4+, Firefox 121+). En browsers sin soporte
 * (Safari iOS <15.4, Firefox <121), el scroll-padding-top no aplica
 * y el scroll a inline-validation puede quedar tapado por el header.
 * Riesgo aceptado: degradación graceful, no rompe el flujo, sólo
 * deja una UX subóptima en ~9% de sesiones legacy. No vale agregar
 * un fallback JS por este edge case.
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  html:has(.wp-block-woocommerce-cart) {
    scroll-padding-top: 70px;
  }
}

/* ═══════════════════════════════════════════════════════════════
 * 13. REDUCED MOTION
 * ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .wp-block-woocommerce-cart * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .wp-block-woocommerce-cart
    .wp-block-woocommerce-proceed-to-checkout-block
    a:hover,
  .wp-block-woocommerce-cart .wc-block-cart__submit-button:hover {
    transform: none;
  }
}