/* ============================================================
   CM DESCANSO · CARRITO Y CHECKOUT (F5, spec 03 C3 "maximo cuidado")
   Carrito (7) y Checkout (8) NO son paginas Elementor: usan los bloques
   nativos de WooCommerce (Cart & Checkout Blocks, prefijo wc-block-*).
   SOLO SKIN: tipografia, color, bordes, radios. NUNCA display/logica/
   estructura. Scope por body class (woocommerce-cart/woocommerce-checkout,
   ya anadidas por WooCommerce) para no afectar ninguna otra pagina.
   ============================================================ */

/* ---- Boton primario: "Realizar el pedido" (checkout) y "Finalizar compra"
   (carrito) al lenguaje del sistema (tinta, hover terracota). Sin esto, el
   boton de "Realizar el pedido" sale en rosa (color base del kit de
   Elementor sobre <button>, R7 "pink-killer"); el de "Finalizar compra" del
   carrito sale con texto terracota sobre gris azulado (color por defecto del
   bloque nativo wc-block-cart__submit-button). OJO: el header tiene un widget
   "Menu Cart" con SU PROPIO footer/boton (.elementor-button--checkout, oculto
   hasta que se abre el dropdown) que NO es este boton, no confundir los dos. */
/* G5-polish: CAMINO DE COMPRA EN TERRACOTA — el acento en reposo (era tinta con
   hover terracota y no destacaba). Mismo lenguaje que el add-to-cart de la PDP. */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
body.woocommerce-cart .wc-block-cart__submit-button {
  background: var(--cmd-green) !important;
  color: #FDFBF7 !important;
  border-color: var(--cmd-green) !important;
  border-radius: var(--cmd-r-sm) !important;
  font-family: var(--cmd-font-body) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
body.woocommerce-cart .wc-block-cart__submit-button:hover {
  background: var(--cmd-green-deep) !important;
  border-color: var(--cmd-green-deep) !important;
  color: #FDFBF7 !important;
}

/* ---- Titulos: heredan Fraunces del sistema (ya lo hacen via cmd-scope); solo
   se afina el peso para que coincida con el resto del sitio (480, no bold). ---- */
body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title,
body.woocommerce-cart h1.entry-title,
body.woocommerce-checkout h1.entry-title {
  font-weight: 480;
  letter-spacing: -.018em;
}
body.woocommerce-checkout h2,
body.woocommerce-cart h2,
body.woocommerce-checkout .wc-block-components-title {
  font-family: var(--cmd-font-display);
  font-weight: 480;
  color: var(--cmd-ink);
  letter-spacing: -.01em;
}

/* ---- Inputs de texto/select del checkout: hairline del sistema, radius 4. ---- */
body.woocommerce-checkout .wc-block-components-text-input input[type="text"],
body.woocommerce-checkout .wc-block-components-text-input input[type="email"],
body.woocommerce-checkout .wc-block-components-text-input input[type="tel"],
body.woocommerce-checkout .wc-block-components-address-form select,
body.woocommerce-checkout select {
  font-family: var(--cmd-font-body);
  border-radius: var(--cmd-r-sm) !important;
  border-color: var(--cmd-line-strong) !important;
}
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout select:focus {
  border-color: var(--cmd-ink) !important;
  box-shadow: none !important;
}
body.woocommerce-checkout label,
body.woocommerce-checkout .wc-block-components-text-input > label {
  font-family: var(--cmd-font-body);
  color: var(--cmd-muted);
}

/* ---- Radios y checkboxes: acento del sistema en vez del azul/rosa por defecto. ---- */
body.woocommerce-checkout input[type="radio"],
body.woocommerce-cart input[type="radio"] {
  accent-color: var(--cmd-ink);
}
body.woocommerce-checkout .wc-block-components-checkbox__input,
body.woocommerce-cart input[type="checkbox"] {
  accent-color: var(--cmd-ink);
}

/* ---- Tablas/paneles de resumen (carrito y "Resumen del pedido"): hairlines
   del sistema en vez del gris por defecto de WooCommerce. ---- */
body.woocommerce-cart table.shop_table,
body.woocommerce-cart .wc-block-cart-items,
body.woocommerce-checkout .wc-block-components-sidebar,
body.woocommerce-checkout .wc-block-components-order-summary {
  border-color: var(--cmd-line) !important;
}
body.woocommerce-cart table.shop_table th,
body.woocommerce-cart table.shop_table td,
body.woocommerce-checkout .wc-block-components-totals-item,
body.woocommerce-checkout .wc-block-components-order-summary-item {
  border-color: var(--cmd-line) !important;
  font-family: var(--cmd-font-body);
}
body.woocommerce-cart .wc-block-components-product-name,
body.woocommerce-checkout .wc-block-components-product-name {
  font-family: var(--cmd-font-display);
  color: var(--cmd-ink);
  font-weight: 480;
}
body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--cmd-font-body);
  font-weight: 600;
  color: var(--cmd-ink);
}

/* ---- F6 (pasada movil final): el carrito usa la plantilla de pagina CLASICA de Hello
   Elementor (main.site-main/.page-header/.entry-title, NO Elementor). La causa raiz real
   es `main.site-main{width:390px;box-sizing:content-box;padding:0 10px;margin-right:-20px}`
   del tema padre: content-box SUMA el padding al ancho (390+10+10=410px reales en un
   viewport de 390px), y el margin-right negativo NO reduce el ancho propio de la caja
   (solo afecta a como se posiciona el siguiente hermano), asi que main desborda 20px
   igual. El checkout no usa esta plantilla (bypass total a bloques Woo), por eso no le
   pasa. border-box en toda la cadena lo deja dentro del viewport sin tocar el padding
   visual (h1/page-header quedaban corregidos con esto solo, pero el desbordamiento real
   era el de `main`, un nivel mas arriba). ---- */
body.woocommerce-cart main.site-main,
body.woocommerce-cart .page-header,
body.woocommerce-cart .entry-title {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* ---- Enlaces dentro del checkout (Terminos, Privacidad): terracota del sistema
   (ya lo hacen via cmd-scope; se deja explicito por si el bloque de Woo pisa). ---- */
body.woocommerce-checkout .wc-block-checkout__terms a,
body.woocommerce-cart .woocommerce-cart-form a {
  color: var(--cmd-green);
}

/* ---- G1 (block theme): el grid de cross-sells del carrito (wc-block-grid)
   trae margin -8px a cada lado (gutter clasico de Woo) y en la plantilla
   page-cart del block theme no hay contenedor que lo absorba: 8px de
   desbordamiento horizontal en movil (lo cazo qa-full). Sin margenes
   negativos: los items ya llevan su propio padding de 8px. ---- */
body.woocommerce-cart .wc-block-grid__products,
body.woocommerce-checkout .wc-block-grid__products {
  margin-inline: 0;
}

/* ============================================================
   G5-polish · EL CARRITO AL SISTEMA. La pagina nunca recibio el
   tratamiento: H1 pegado al borde sin contenedor, emoji triste
   gigante de Woo, rejilla "Nuevo en la tienda" con titulos en
   terracota y alturas desiguales ("texto pegado a la izquierda",
   aviso de Mario).
   ============================================================ */

/* contenedor y gutter unificados (los mismos 24px del resto del sitio).
   OJO: el carrito/checkout NO usan page.html — WooCommerce sirve su propio
   wrapper (woocommerce/page-content-wrapper) cuyo <main> NO lleva .cmd-main:
   el selector va al main a secas, scoped por body class. */
body.woocommerce-cart main,
body.woocommerce-checkout main {
  max-width: 1200px; margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) 24px clamp(3rem, 6vw, 5rem);
  box-sizing: border-box;
}
/* el H1 de la pagina (wp-block-post-title del wrapper de Woo), al sistema */
body.woocommerce-cart main h1.wp-block-post-title,
body.woocommerce-checkout main h1.wp-block-post-title {
  font-family: var(--cmd-font-display); font-weight: 480; color: var(--cmd-ink);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem); letter-spacing: -.018em;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}

/* ---- carrito VACIO: el "emoji triste" es un ::before de la clase
   with-empty-cart-icon del propio h2 (no una imagen): fuera. Y fuera el
   separador de puntitos. Mensaje editorial centrado. ---- */
body.woocommerce-cart .wc-block-cart__empty-cart__title::before,
body.woocommerce-cart .with-empty-cart-icon::before { display: none !important; content: none !important; }
body.woocommerce-cart .wc-block-cart__empty-cart__image { display: none !important; }
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block hr.wp-block-separator { display: none !important; }
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block h2 {
  text-align: center; font-family: var(--cmd-font-display); font-weight: 480;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); color: var(--cmd-ink);
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.25rem);
}

/* ---- "Nuevo en la tienda" (wc-block-grid): contrato de tarjeta del sistema.
   Alturas iguales (flex column + boton al fondo), imagen a ratio fijo sobre
   banda arena, titulo en tinta (era el color de enlace terracota), precio
   junto al boton. ---- */
body.woocommerce-cart .wc-block-grid__products { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 26px 22px; padding: 0; }
body.woocommerce-cart .wc-block-grid__product {
  display: flex; flex-direction: column; text-align: left;
  width: auto !important; max-width: none !important; float: none !important;
  margin: 0 !important; padding: 0 !important; border: 0;
}
body.woocommerce-cart .wc-block-grid__product-link { display: flex; flex-direction: column; flex: 1 1 auto; text-decoration: none; color: inherit; }
body.woocommerce-cart .wc-block-grid__product-image { margin: 0 0 14px; }
body.woocommerce-cart .wc-block-grid__product-image img {
  aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto;
  border-radius: var(--cmd-r-sm); background: var(--cmd-band);
}
body.woocommerce-cart .wc-block-grid__product-title {
  font-family: var(--cmd-font-display) !important; font-size: 17px !important;
  font-weight: 480 !important; color: var(--cmd-ink) !important;
  letter-spacing: -.01em; line-height: 1.25; margin: 0 0 4px; text-align: left;
}
body.woocommerce-cart .wc-block-grid__product-price {
  font-family: var(--cmd-font-body) !important; font-size: 14.5px !important;
  font-weight: 600 !important; color: var(--cmd-ink) !important;
  display: block; margin: auto 0 0 !important; padding-top: 6px; text-align: left;
}
body.woocommerce-cart .wc-block-grid__product-add-to-cart { margin-top: 12px; text-align: left; width: 100%; }
/* compra directa = terracota (mismo camino de compra que el resto del sitio) */
body.woocommerce-cart .wc-block-grid__product-add-to-cart .add_to_cart_button,
body.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link {
  display: block; width: 100% !important; box-sizing: border-box; text-align: center;
  background: var(--cmd-green) !important; color: #FDFBF7 !important;
  border: 1px solid var(--cmd-green) !important; border-radius: var(--cmd-r-sm) !important;
  padding: 10px 14px !important; font-family: var(--cmd-font-body) !important;
  font-size: 13px !important; font-weight: 600 !important; text-transform: none !important;
  transition: background .2s, box-shadow .2s;
}
body.woocommerce-cart .wc-block-grid__product-add-to-cart .add_to_cart_button:hover,
body.woocommerce-cart .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
  background: var(--cmd-green-deep) !important; border-color: var(--cmd-green-deep) !important;
  box-shadow: 0 4px 14px rgba(26,28,22,.10);
}
body.woocommerce-cart .wc-block-grid__product .wc-block-grid__product-onsale { display: none !important; }
@media (max-width: 960px) {
  body.woocommerce-cart .wc-block-grid__products { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 600px) {
  body.woocommerce-cart .wc-block-grid__products { grid-template-columns: 1fr; }
}

/* ---- G9-polish · cabecera del checkout con logo (peticion Mario) ----
   Overrider del template part checkout-header de Woo (parts/checkout-header.html):
   logo centrado, vuelta al carrito a la izquierda, sello de pago seguro a la
   derecha. Solo presentacion: la logica de pago no se toca. */
.cmd-cohead { background: var(--cmd-paper); border-bottom: 1px solid var(--cmd-line); }
.cmd-cohead-in {
  max-width: 1112px; margin: 0 auto; min-height: 62px; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.cmd-cohead-logo { display: inline-flex; }
.cmd-cohead-logo img { height: 28px; width: auto; display: block; }
.cmd-cohead-back, .cmd-cohead-safe {
  display: inline-flex; align-items: center; gap: 7px; flex: 1 1 0; min-width: 0;
  font-size: 12.5px; letter-spacing: .02em; color: var(--cmd-text);
}
.cmd-cohead-back { text-decoration: none; transition: opacity .2s; }
.cmd-cohead-back:hover { opacity: .55; }
.cmd-cohead-safe { justify-content: flex-end; color: var(--cmd-muted); }
@media (max-width: 640px) {
  .cmd-cohead-in { min-height: 54px; padding: 0 16px; }
  .cmd-cohead-logo img { height: 24px; }
  .cmd-cohead-back span, .cmd-cohead-safe span { display: none; } /* solo iconos */
}

/* GRATIS a caja baja: el chip de envio de los bloques Woo grita en mayusculas
   (string de core); la voz de la casa no grita. Solo presentacion. */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__label-group,
.wc-block-components-totals-item__value,
.wc-block-components-radio-control__secondary-label {
  text-transform: none;
}

/* el "GRATIS" del envio es el product-badge de los bloques Woo (uppercase de
   core): a caja normal, sin tracking gritado */
.wc-block-components-product-badge { text-transform: none !important; letter-spacing: .01em !important; }
.wc-block-checkout__shipping-option--free { text-transform: none !important; }
.wc-block-components-totals-item__value, .wc-block-components-totals-item__value * { text-transform: none !important; }
/* el logo colapsaba a 0: los flancos flex:1 exprimian al ancla y el max-width:100%
   global sobre contenedor de 0 ancho hace circulo vicioso. Ancla rigida. */
.cmd-cohead-logo { flex: 0 0 auto; }
.cmd-cohead-logo img { max-width: none; }
/* el reset responsive (height:auto!important + max-width:100%) anula el height
   del img y con un ancla que se dimensiona por contenido colapsa a 0 (circulo).
   Se rompe dimensionando el ANCLA: el img llena el ancla y el alto sale solo. */
.cmd-cohead-logo { width: 179px; }
.cmd-cohead-logo img { width: 100%; }
@media (max-width: 640px) { .cmd-cohead-logo { width: 153px; } }