/* ============================================================
   Carrito, pago y confirmación del pedido (bloque 5C)
   ------------------------------------------------------------
   Viste con los tokens de B3 los bloques Cart y Checkout de WooCommerce. Aquí no se cambia
   ninguna estructura: solo tipografía, color, trazo y espacio. Los cálculos, los campos, los
   mensajes y el envío del pedido siguen siendo del plugin.

   Nunca se toca b3.css ni b3-home.css: son la copia literal del prototipo aprobado.
   ============================================================ */

/* ---------- Marco de las tres rutas ---------- */
.b3-comercio {
  padding: clamp(2rem, 1rem + 3vw, 3.5rem) 0 var(--b3-section);
  background: var(--b3-white);
}

.b3-comercio__cuerpo > * + * {
  margin-top: 1.5rem;
}

.b3-comercio__titulo {
  margin: 0 0 1.75rem;
  font-family: var(--b3-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* La ficha y el catálogo ya traen el contenedor; aquí solo se asegura el ancho máximo. */
.b3-comercio .b3-container {
  width: 100%;
}

/* ---------- Aviso de «sin JavaScript» ---------- */
.b3-sinjs {
  margin: 0 0 2rem;
  padding: 1.5rem;
  border: 1px solid var(--b3-champagne-deep);
  background: var(--b3-ivory);
}

.b3-sinjs__titulo {
  margin: 0 0 0.5rem;
  font-family: var(--b3-display);
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--b3-ink);
}

.b3-sinjs__texto,
.b3-sinjs__tel {
  margin: 0 0 0.5rem;
  font-family: var(--b3-sans);
  font-size: var(--b3-fs-body);
  line-height: 1.6;
  color: var(--b3-ink-muted);
}

.b3-sinjs__tel a {
  color: var(--b3-champagne-deep);
  font-weight: 700;
}

/* ---------- Tipografía común de los bloques de WooCommerce ---------- */
.b3-comercio .wc-block-components-title,
.b3-comercio .wc-block-cart__submit-container,
.b3-comercio .wc-block-components-product-name,
.b3-comercio .wc-block-components-totals-item__label,
.b3-comercio .wc-block-components-totals-item__value,
.b3-comercio .wc-block-components-button,
.b3-comercio input,
.b3-comercio select,
.b3-comercio textarea,
.b3-comercio label {
  font-family: var(--b3-sans);
}

.b3-comercio .wc-block-components-title {
  font-family: var(--b3-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--b3-ink);
}

/* B3 no usa esquinas redondeadas en ningún sitio. */
.b3-comercio :is(input, select, textarea, button, .wc-block-components-button, .wc-block-components-panel, .wc-block-components-notice-banner, .wc-block-components-radio-control-accordion-option) {
  border-radius: 0;
}

/* ---------- Botones ---------- */
.b3-comercio .wc-block-components-button:not(.is-link) {
  min-height: 3.375rem;
  padding: 0.85rem 1.75rem;
  border: 1px solid var(--b3-ink);
  background: var(--b3-ink);
  color: var(--b3-white);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 450ms var(--b3-ease), color 450ms var(--b3-ease), border-color 450ms var(--b3-ease);
}

.b3-comercio .wc-block-components-button:not(.is-link):hover {
  background: var(--b3-champagne-deep);
  border-color: var(--b3-champagne-deep);
  color: var(--b3-white);
}

.b3-comercio .wc-block-components-button.outlined {
  background: transparent;
  border-color: var(--b3-champagne-deep);
  color: var(--b3-champagne-deep);
}

.b3-comercio .wc-block-components-button.outlined:hover {
  background: var(--b3-champagne-deep);
  color: var(--b3-white);
}

.b3-comercio .wc-block-components-button.is-link {
  color: var(--b3-champagne-deep);
  font-weight: 600;
}

/* ---------- Campos: trazo, alto y foco ---------- */
.b3-comercio :is(input[type='text'], input[type='email'], input[type='tel'], input[type='number'], input[type='search'], select, textarea) {
  border: 1px solid var(--b3-line);
  background: var(--b3-white);
  color: var(--b3-ink);
  font-size: var(--b3-fs-body);
}

/* El foco global de B3 no cubre textarea; aquí sí, porque el pago tiene notas del pedido. */
.b3-comercio textarea:focus-visible {
  outline: 2px solid var(--b3-focus);
  outline-offset: 3px;
}

.b3-comercio .wc-block-components-text-input.is-active label,
.b3-comercio .wc-block-components-text-input label {
  color: var(--b3-ink-muted);
}

/* ---------- Errores de validación ---------- */
.b3-comercio .wc-block-components-validation-error {
  color: #a4181b; /* rojo oscuro: 5,9:1 sobre blanco */
  font-size: var(--b3-fs-small);
  font-weight: 600;
}

.b3-comercio :is(input, select, textarea)[aria-invalid='true'] {
  border-color: #a4181b;
}

/* ---------- Avisos de la tienda ---------- */
.b3-comercio .wc-block-components-notice-banner {
  border-width: 1px;
  font-family: var(--b3-sans);
  font-size: var(--b3-fs-body);
}

/* ---------- Carrito ---------- */
.b3-comercio .wc-block-cart {
  margin: 0;
}

.b3-comercio .wc-block-cart-items {
  border-collapse: collapse;
}

.b3-comercio .wc-block-cart-items__header {
  font-family: var(--b3-sans);
  font-size: var(--b3-fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--b3-ink-muted);
  border-bottom: 1px solid var(--b3-line);
}

.b3-comercio .wc-block-cart-items__row {
  border-bottom: 1px solid var(--b3-line);
}

.b3-comercio .wc-block-cart-item__image img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/*
 * Líneas sin fotografía: el hueco propio de B3, no el archivo de WooCommerce.
 *
 * El bloque de carrito pinta `woocommerce-placeholder-300x300.webp`, un archivo generado que
 * puede no existir. Se reconoce por su nombre en el `src` —es lo único que lo distingue: no
 * lleva clase— y se tapa con el mismo panel que usan la tarjeta del catálogo y la ficha. La
 * imagen es decorativa (`alt=""` y el enlace que la envuelve está fuera del tabulador), así que
 * el nombre accesible sigue viniendo del enlace del producto, como antes.
 */
.b3-comercio .wc-block-cart-item__image img[src*="woocommerce-placeholder"],
.b3-comercio .wc-block-components-order-summary-item__image img[src*="woocommerce-placeholder"] {
  box-sizing: border-box;
  object-fit: contain;
  background-color: var(--b3-ivory);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%236f5935' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='19' r='8.5'/%3E%3Ccircle cx='16' cy='19' r='6'/%3E%3Cpath d='M12.5 8.5h7l2 2.5-5.5 5-5.5-5z'/%3E%3Cpath d='M10.5 11h11'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% 60%;
  border: 1px solid var(--b3-line);
  /* Deja de mostrar el archivo del plugin sin quitar el elemento: si el archivo no existe, el
     icono roto tampoco aparece. */
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3C/svg%3E");
}

.b3-comercio .wc-block-components-product-name {
  font-family: var(--b3-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--b3-ink);
  text-decoration: none;
}

.b3-comercio .wc-block-components-product-name:hover {
  color: var(--b3-champagne-deep);
}

.b3-comercio .wc-block-components-product-metadata {
  color: var(--b3-ink-muted);
}

.b3-comercio .wc-block-components-quantity-selector {
  border: 1px solid var(--b3-line);
}

.b3-comercio .wc-block-components-quantity-selector__button {
  color: var(--b3-ink);
}

/* ---------- Totales, en panel de marfil ---------- */
.b3-comercio .wc-block-components-sidebar .wc-block-components-panel,
.b3-comercio .wp-block-woocommerce-cart-order-summary-block,
.b3-comercio .wp-block-woocommerce-checkout-order-summary-block {
  padding: 1.5rem;
  border: 1px solid var(--b3-line);
  background: var(--b3-ivory);
}

.b3-comercio .wc-block-components-totals-item {
  font-size: var(--b3-fs-body);
  color: var(--b3-ink-muted);
}

.b3-comercio .wc-block-components-totals-footer-item {
  border-top: 1px solid var(--b3-line);
  color: var(--b3-ink);
  font-weight: 700;
}

.b3-comercio .wc-block-components-formatted-money-amount {
  font-family: var(--b3-sans);
  font-variant-numeric: tabular-nums;
}

/* Cupones: el desplegable nativo, con el trazo de B3. */
.b3-comercio .wc-block-components-totals-coupon .wc-block-components-panel__button {
  color: var(--b3-champagne-deep);
  font-weight: 600;
}

.b3-comercio .wc-block-components-chip {
  border: 1px solid var(--b3-champagne-deep);
  background: var(--b3-white);
  color: var(--b3-champagne-deep);
}

/* ---------- Carrito vacío ---------- */
.b3-comercio .wp-block-woocommerce-empty-cart-block {
  padding: clamp(2rem, 1rem + 3vw, 4rem) 0;
  text-align: center;
}

.b3-comercio .wp-block-woocommerce-empty-cart-block .wc-block-components-product-image {
  display: none; /* el bloque vacío propone productos con imagen; aquí basta el texto y el enlace */
}

/* ---------- Pago ---------- */
.b3-comercio .wc-block-checkout__form .wc-block-components-checkout-step {
  border: 0;
  padding-left: 0;
}

.b3-comercio .wc-block-components-checkout-step__title {
  font-family: var(--b3-display);
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--b3-ink);
}

.b3-comercio .wc-block-components-checkout-step__description {
  color: var(--b3-ink-muted);
}

.b3-comercio .wc-block-components-radio-control-accordion-option,
.b3-comercio .wc-block-components-radio-control__option {
  border-color: var(--b3-line);
}

.b3-comercio .wc-block-components-radio-control__option--checked-option-highlighted,
.b3-comercio .wc-block-components-radio-control-accordion-option:has(input:checked) {
  border-color: var(--b3-champagne-deep);
}

.b3-comercio .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
  width: 100%;
}

/* ---------- Pedido recibido ---------- */
.b3-pedido__estado {
  margin: 0 0 0.75rem;
  font-family: var(--b3-display);
  font-size: var(--b3-fs-h2);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--b3-ink);
}

.b3-pedido__resumen {
  margin: 0 0 2rem;
  color: var(--b3-ink-muted);
}

.b3-pedido__titulo {
  margin: 2.5rem 0 1rem;
  font-family: var(--b3-display);
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--b3-ink);
}

.b3-comercio--pedido .wc-block-order-confirmation-summary-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem 2rem;
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--b3-line);
  background: var(--b3-ivory);
  list-style: none;
}

.b3-comercio--pedido .wc-block-order-confirmation-summary-list-item__key {
  display: block;
  font-size: var(--b3-fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--b3-ink-muted);
}

.b3-comercio--pedido .wc-block-order-confirmation-summary-list-item__value {
  color: var(--b3-ink);
}

.b3-comercio--pedido table {
  width: 100%;
  border-collapse: collapse;
}

.b3-comercio--pedido table :is(th, td) {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--b3-line);
  text-align: left;
  vertical-align: top;
}

.b3-pedido__direcciones {
  gap: 2rem;
}

.b3-comercio--pedido address {
  font-style: normal;
  color: var(--b3-ink-muted);
  line-height: 1.7;
}

/* ---------- Anchos pequeños ---------- */
@media (max-width: 767px) {
  .b3-comercio {
    padding-bottom: clamp(3rem, 2rem + 6vw, 5rem);
  }

  .b3-pedido__direcciones {
    gap: 1.5rem;
  }
}

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .b3-comercio .wc-block-components-button:not(.is-link) {
    transition: none;
  }
}