/* ═══════════ CARRITO Y CHECKOUT (páginas completas) ═══════════
   La estructura HTML es la que genera WooCommerce —y sobre ella,
   los campos de región/comuna/RUT que arma mp-checkout-cl— así
   que este archivo solo viste esa estructura, nunca la reemplaza. */

/*
 * OJO con el selector: `.mp-ancho` es el contenedor genérico de ancho del sitio y lo
 * usan TAMBIÉN la cabecera, la fila de servicio, cada columna del mega-menú y las dos
 * franjas del pie. Escrito como `.woocommerce-cart .mp-ancho` este relleno caía sobre
 * los quince, y la cabecera del carrito, del checkout y de Mi cuenta terminaba con
 * 32 px arriba y 96 px abajo: 168 px de alto para un logotipo de 25 px, absurdo en un
 * teléfono. El relleno es para el CONTENIDO, así que se pide hijo directo del <main>.
 */
.woocommerce-cart .mp-principal > .mp-ancho,
.woocommerce-checkout .mp-principal > .mp-ancho,
.woocommerce-account .mp-principal > .mp-ancho{
  padding-block:var(--mp-e4) var(--mp-e7);
}
.woocommerce-cart h1.entry-title, .woocommerce-checkout h1.entry-title{ margin-bottom:var(--mp-e4) }

/* ── tabla del carrito ── */
table.shop_table{
  width:100%; border-collapse:collapse; margin-bottom:var(--mp-e4);
}
table.shop_table thead th{
  text-align:left; font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mp-tinta-3); font-weight:500; padding-block:.7rem; border-bottom:1px solid var(--mp-tinta);
}
table.shop_table td{ padding-block:1.1rem; border-bottom:1px solid var(--mp-hilo); vertical-align:middle }
table.shop_table td.product-thumbnail{ width:84px }
table.shop_table td.product-thumbnail img{ width:72px; aspect-ratio:2/3; object-fit:cover; display:block }
table.shop_table td.product-name a{ font-size:.875rem }
table.shop_table td.product-price, table.shop_table td.product-subtotal{ font-variant-numeric:tabular-nums; font-size:.8438rem }
table.shop_table td.product-remove a{
  display:flex; align-items:center; justify-content:center; width:1.6rem; height:1.6rem;
  color:var(--mp-tinta-3); border:1px solid var(--mp-hilo-firme); border-radius:50%; font-size:0;
}
table.shop_table td.product-remove a::before{ content:"×"; font-size:1rem; line-height:1 }
table.shop_table td.product-remove a:hover{ color:var(--mp-vino); border-color:var(--mp-vino) }

.quantity .qty{
  width:3.4rem; padding:.5rem; text-align:center; border:1px solid var(--mp-hilo-firme);
  font-family:var(--mp-sans); background:var(--mp-papel); color:var(--mp-tinta);
}
.actions .coupon{ display:flex; gap:.6rem; align-items:center; margin-top:var(--mp-e2) }
.actions .coupon .input-text{ padding:.6rem .8rem; border:1px solid var(--mp-hilo-firme); background:var(--mp-papel); font-size:.8125rem }

.cart_totals{ max-width:380px; margin-left:auto; border-top:1px solid var(--mp-tinta); padding-top:var(--mp-e3) }
.cart_totals table{ width:100% }
.cart_totals th, .cart_totals td{ padding-block:.6rem; border-bottom:1px solid var(--mp-hilo); font-size:.8438rem }
.cart_totals .order-total th, .cart_totals .order-total td{ font-weight:600; font-size:1rem; border-bottom:0 }

/* ── botones ── */
.wc-proceed-to-checkout a.checkout-button,
#place_order{
  display:block; width:100%; text-align:center; padding:.95rem 1.2rem;
  background:var(--mp-tinta) !important; color:var(--mp-papel) !important; border:0;
  font-family:var(--mp-sans); font-size:.8125rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; margin-top:var(--mp-e2);
  transition:background-color var(--mp-rapido) var(--mp-easing);
}
.wc-proceed-to-checkout a.checkout-button:hover, #place_order:hover{ background:var(--mp-vino) !important }
/* el botón genérico `.button` también vive en carrito.css */

/* ── formulario de checkout: campos, incluidos región/comuna/RUT de mp-checkout-cl ── */
.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields{ margin-bottom:var(--mp-e4) }
.woocommerce-billing-fields h3, #order_review_heading, .woocommerce-additional-fields h3{
  font-family:var(--mp-serif); font-size:1.375rem; margin-bottom:var(--mp-e3);
}
.form-row{ margin-bottom:1.1rem }
.form-row label{ display:block; font-size:.75rem; letter-spacing:.04em; color:var(--mp-tinta-2); margin-bottom:.4rem }
.form-row .required{ color:var(--mp-vino); text-decoration:none }
.form-row input.input-text, .form-row select, .form-row textarea{
  width:100%; padding:.75rem .85rem; border:1px solid var(--mp-hilo-firme);
  background:var(--mp-papel); color:var(--mp-tinta);
  font-family:var(--mp-sans); font-size:.875rem;
}
.form-row input.input-text:focus, .form-row select:focus, .form-row textarea:focus{
  outline:2px solid var(--mp-vino); outline-offset:1px; border-color:var(--mp-vino);
}
.form-row.woocommerce-invalid input.input-text, .form-row.woocommerce-invalid select{ border-color:var(--mp-vino) }
.select2-container .select2-selection--single{
  height:auto !important; padding:.75rem .85rem !important; border:1px solid var(--mp-hilo-firme) !important; border-radius:0 !important;
}

#order_review{ background:var(--mp-lino); padding:var(--mp-e3); margin-top:var(--mp-e3) }
@media (min-width:960px){ #order_review{ margin-top:0 } }
#order_review table.shop_table td, #order_review table.shop_table th{ border-color:var(--mp-hilo-firme) }

.woocommerce-checkout #payment{ background:var(--mp-lino); padding:var(--mp-e3); margin-top:var(--mp-e3) }
ul.wc_payment_methods{ list-style:none; margin:0; padding:0 }
ul.payment_methods li{ padding-block:.6rem; border-bottom:1px solid var(--mp-hilo-firme); font-size:.875rem }
ul.payment_methods li:last-child{ border-bottom:0 }
.payment_box{ margin-top:.6rem; padding:.9rem; background:var(--mp-papel); font-size:.8125rem; color:var(--mp-tinta-2) }

/* Los mensajes de Woo (cupón aplicado, error de validación…) se visten en carrito.css,
   que se carga en todo el sitio: el mismo aviso sale al añadir al carrito desde la ficha. */

/* ── mi cuenta ── */
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0 }
.woocommerce-MyAccount-navigation li{ border-bottom:1px solid var(--mp-hilo) }
.woocommerce-MyAccount-navigation a{ display:block; padding-block:.7rem; font-size:.8125rem; letter-spacing:.04em; text-transform:uppercase }
.woocommerce-MyAccount-navigation li.is-active a{ color:var(--mp-vino) }

@media (max-width:780px){
  /*
   * OJO: esta rejilla es SÓLO para la tabla del carrito, la única que lleva miniatura.
   * Esos 72px de la primera columna son la foto. Estaba escrita contra `table.shop_table`
   * a secas y se la comían también el resumen del checkout y el detalle del pedido, que
   * usan la misma clase pero NO tienen miniatura: el nombre de la prenda caía en la
   * columna reservada para una foto inexistente y se partía en cuatro líneas
   * («Aros / Ariana / Blanco / × 1») mientras el precio se quedaba con todo el ancho.
   */
  .woocommerce-cart-form__contents thead{ display:none }
  /*
   * Colocación explícita: foto | nombre + cantidad | quitar + importe.
   * Apilando las celdas en el orden del HTML salían dos «$14.990» seguidos sin etiqueta
   * (el unitario y el subtotal, idénticos cuando se lleva una sola unidad) y el selector
   * de cantidad quedaba suelto al margen: parecía un error de la tienda.
   */
  .woocommerce-cart-form__contents tr.cart_item{
    display:grid; grid-template-columns:72px 1fr auto;
    gap:.55rem .9rem; align-items:center;
    padding-block:1rem; border-bottom:1px solid var(--mp-hilo);
  }
  /* WooCommerce pinta un `border-top` en cada celda: dentro de la rejilla quedaban
     como rayas sueltas flotando sobre el nombre y sobre el importe */
  .woocommerce-cart-form__contents tr.cart_item td{ border:0; padding:0 }
  .woocommerce-cart-form__contents td.product-thumbnail{ grid-column:1; grid-row:1/3; align-self:start }
  .woocommerce-cart-form__contents td.product-name{ grid-column:2; grid-row:1 }
  .woocommerce-cart-form__contents td.product-remove{ grid-column:3; grid-row:1; justify-self:end }
  /* el unitario se repite en el importe de la línea; en un ancho de teléfono estorba */
  .woocommerce-cart-form__contents td.product-price{ display:none }
  .woocommerce-cart-form__contents td.product-quantity{ grid-column:2; grid-row:2; justify-self:start }
  .woocommerce-cart-form__contents td.product-subtotal{ grid-column:3; grid-row:2; justify-self:end; font-weight:500 }

  /*
   * La última fila del carrito no es un producto: es un `td` con colspan que lleva el
   * cupón y el botón «Actualizar carrito». Con la rejilla encima caía en la columna de
   * 72px de la miniatura y el botón salía escrito en vertical, una letra por línea.
   */
  .woocommerce-cart-form__contents tr:not(.cart_item) td{ display:block; width:auto; padding-block:1rem; border-bottom:0 }
  .woocommerce-cart-form__contents tr:not(.cart_item) .button{ width:100% }

  /*
   * Las tablas de dos columnas (resumen del checkout, totales del carrito, detalle del
   * pedido) se quedan como tablas de verdad. Con `fixed` manda el reparto que fijamos
   * acá y no el capricho del contenido: el nombre largo pide el ancho, no el importe.
   */
  table.shop_table:not(.woocommerce-cart-form__contents){ table-layout:fixed }
  table.shop_table:not(.woocommerce-cart-form__contents) thead{ display:none }
  table.shop_table:not(.woocommerce-cart-form__contents) td,
  table.shop_table:not(.woocommerce-cart-form__contents) th{ padding-block:.85rem }
  table.shop_table:not(.woocommerce-cart-form__contents) td.product-name,
  table.shop_table:not(.woocommerce-cart-form__contents) th{ width:64% }
  table.shop_table:not(.woocommerce-cart-form__contents) td.product-total,
  table.shop_table:not(.woocommerce-cart-form__contents) td{ width:36%; text-align:right }
  /* el nombre no se parte por sílabas ni deja huérfano el «× 1» */
  table.shop_table:not(.woocommerce-cart-form__contents) td.product-name{ text-align:left; text-wrap:pretty }

  /*
   * La fila de envío no lleva un importe: lleva una dirección entera («Retiro en tienda.
   * Embajador Doussinague 1767, local D1 — Gratis»). Encajada en la columna estrecha de
   * los precios se partía en cinco líneas contra el borde. Y darle más ancho con `width`
   * no sirve: con `table-layout:fixed` sólo manda la PRIMERA fila de la tabla. Así que
   * esta fila sale del reparto de columnas y ocupa el ancho completo, etiqueta arriba.
   */
  table.shop_table tr.woocommerce-shipping-totals{
    display:block; padding:.85rem 12px;          /* 12px = el mismo costado que las celdas */
    border-bottom:1px solid var(--mp-hilo-firme);
  }
  table.shop_table tr.woocommerce-shipping-totals th,
  table.shop_table tr.woocommerce-shipping-totals td{
    display:block; width:auto; padding:0; border:0; text-align:left;
  }
  table.shop_table tr.woocommerce-shipping-totals th{ padding-bottom:.3rem }
}

/* ═══════════════════════════════════════════════════════════════════
   CHECKOUT EN DOS COLUMNAS
   Referencia: el checkout de Shopify. Datos a la izquierda, resumen a la
   derecha y fijo, sin navegación que invite a salirse a medio pagar.
   ═══════════════════════════════════════════════════════════════════ */

/* ── la cabecera pierde todo lo que sea una puerta de salida ── */
body.mp-checkout-limpio .mp-promos,
body.mp-checkout-limpio .mp-cab__servicio,
body.mp-checkout-limpio .mp-cab__nav,
body.mp-checkout-limpio .mp-cab__menu-btn,
body.mp-checkout-limpio .mp-mega{ display:none !important }
/* quedan el buscador, los favoritos y el carrito: no sacan de la compra.
   OJO: al esconder el burger y el menú quedan SÓLO dos hijos en la rejilla. Con tres
   columnas caían los dos en las primeras y todo se apelotonaba a la izquierda con la
   pantalla vacía a la derecha. Acá son dos columnas de verdad: marca y utilidades. */
body.mp-checkout-limpio .mp-cab__barra{
  grid-template-columns:1fr auto;
  max-width:1100px;              /* la cabecera se alinea con el contenido */
}
body.mp-checkout-limpio .mp-cab__marca{ justify-self:start }
body.mp-checkout-limpio .mp-cab__util{ justify-self:end }

.mp-checkout__volver{ margin-bottom:var(--mp-e2); font-size:.8125rem }
.mp-checkout__volver a{ color:var(--mp-tinta-2) }
.mp-checkout__volver a:hover{ color:var(--mp-vino) }

/* ── la rejilla ── */
.mp-checkout__cols{ display:block }
@media (min-width:900px){
  .mp-checkout__cols{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px, 400px);
    gap:var(--mp-e5);
    align-items:start;
  }
  /* el resumen acompaña el scroll: el total siempre a la vista */
  .mp-checkout__resumen{ position:sticky; top:calc(var(--mp-cab-alto) + 1rem) }
}
.mp-checkout__resumen-int{ background:var(--mp-lino); padding:var(--mp-e2) }
.mp-checkout__resumen-tit{ font-size:1.125rem; margin-bottom:var(--mp-e2) }

/* en la columna de datos ya no hace falta la caja gris que traía WooCommerce */
.mp-checkout__datos #order_review,
.mp-checkout__datos .woocommerce-checkout-payment{ background:transparent }

/* nombre y apellido lado a lado: dos campos cortos en una línea, no dos renglones */
@media (min-width:560px){
  .mp-checkout__datos .form-row-first,
  .mp-checkout__datos .form-row-last{ float:none; width:auto }
  .mp-checkout__datos .woocommerce-billing-fields__field-wrapper{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 var(--mp-e2);
  }
  .mp-checkout__datos .woocommerce-billing-fields__field-wrapper > .form-row{ grid-column:1 / -1 }
  .mp-checkout__datos .woocommerce-billing-fields__field-wrapper > #billing_first_name_field{ grid-column:1 }
  .mp-checkout__datos .woocommerce-billing-fields__field-wrapper > #billing_last_name_field{ grid-column:2 }
}

/* ── cada línea del resumen, con su foto ── */
.mp-linea{ display:flex; align-items:flex-start; gap:.7rem }
.mp-linea__foto{
  position:relative; flex:0 0 auto; width:56px;
  background:var(--mp-papel); display:block;
}
.mp-linea__foto img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block }
.mp-linea__cant{
  position:absolute; top:-7px; right:-7px;
  min-width:19px; height:19px; padding:0 4px;
  background:var(--mp-tinta); color:var(--mp-papel);
  font-size:.625rem; font-weight:600; line-height:19px; text-align:center;
  border-radius:10px; font-variant-numeric:tabular-nums;
}
.mp-linea__txt{ flex:1 1 auto; min-width:0; line-height:1.4 }
/* la cantidad ya está en el disco de la foto: el «× 1» del texto sobra,
   pero NO se borra del marcado porque su filtro tiene que seguir corriendo */
.mp-linea__txt .product-quantity{ display:none }

/* ── envío gratis ── */
.mp-envio-gratis{ margin-bottom:var(--mp-e2) }
.mp-envio-gratis__txt{ font-size:.75rem; letter-spacing:.02em; margin-bottom:.45rem; color:var(--mp-tinta-2) }
.mp-envio-gratis__txt .amount{ color:var(--mp-tinta); font-weight:600 }
.mp-envio-gratis__riel{ height:3px; background:var(--mp-hilo-firme); overflow:hidden }
.mp-envio-gratis__avance{
  display:block; height:100%; background:var(--mp-vino);
  transition:width var(--mp-medio) var(--mp-easing);
}
.mp-envio-gratis.is-logrado .mp-envio-gratis__txt{ color:var(--mp-vino); font-weight:500 }
.mp-envio-gratis.is-logrado .mp-envio-gratis__avance{ background:var(--mp-vino) }

/* ── cupón ── */
.mp-cupon-fila td{ padding:.6rem 0 !important; border:0 !important }
.mp-cupon summary{
  cursor:pointer; font-size:.75rem; color:var(--mp-vino);
  text-decoration:underline; text-underline-offset:3px; list-style:none;
}
.mp-cupon summary::-webkit-details-marker{ display:none }
.mp-cupon__caja{ display:flex; gap:.4rem; margin-top:.6rem }
.mp-cupon__campo{
  flex:1 1 auto; min-width:0; padding:.55rem .7rem;
  border:1px solid var(--mp-hilo-firme); background:var(--mp-papel);
  font-size:.8125rem;
}
.mp-cupon__boton{
  flex:0 0 auto; padding:.55rem .9rem; border:1px solid var(--mp-tinta);
  background:transparent; color:var(--mp-tinta); cursor:pointer;
  font-size:.6875rem; letter-spacing:.08em; text-transform:uppercase;
}
.mp-cupon__boton:hover{ background:var(--mp-tinta); color:var(--mp-papel) }
.mp-cupon__aviso{ margin-top:.5rem; font-size:.75rem }
.mp-cupon__aviso.is-error{ color:#9b2c2c }
.mp-cupon__aviso.is-ok{ color:var(--mp-vino) }

/* ── el sugerido dentro del resumen ── */
.mp-checkout__sug .mp-drawer__sugerido{ padding:0 0 var(--mp-e2); border-top:0 }

/* ── confianza ── */
.mp-confianza{
  list-style:none; margin:var(--mp-e2) 0 0; padding:0;
  display:flex; flex-direction:column; gap:.4rem;
  font-size:.75rem; color:var(--mp-tinta-2);
}
.mp-confianza a{ color:var(--mp-vino); text-decoration:underline; text-underline-offset:3px }

/* ── el resumen plegable del teléfono ── */
.mp-resumen-movil{ display:none }
@media (max-width:899px){
  .mp-resumen-movil{
    display:block; margin:0 calc(-1 * var(--mp-gutter)) var(--mp-e3);
    background:var(--mp-lino); border-block:1px solid var(--mp-hilo-firme);
  }
  .mp-resumen-movil__cab{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.85rem var(--mp-gutter); cursor:pointer; list-style:none;
  }
  .mp-resumen-movil__cab::-webkit-details-marker{ display:none }
  .mp-resumen-movil__ver{ font-size:.8125rem; color:var(--mp-vino) }
  .mp-resumen-movil__ver::after{ content:" ⌄" }
  .mp-resumen-movil[open] .mp-resumen-movil__ver::after{ content:" ⌃" }
  .mp-resumen-movil__total{ font-weight:600; font-variant-numeric:tabular-nums }
  .mp-resumen-movil__lista{
    list-style:none; margin:0; padding:0 var(--mp-gutter) .85rem;
    display:flex; flex-direction:column; gap:.8rem;
  }
  .mp-resumen-movil__lista li{ display:flex; align-items:flex-start; gap:.7rem }
  .mp-resumen-movil__datos{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.1rem }
  .mp-resumen-movil__nom{ font-size:.8125rem; line-height:1.35 }

  /* el detalle ya está arriba: en el resumen de abajo quedan totales y pago */
  #order_review .woocommerce-checkout-review-order-table tbody{ display:none }
  .mp-checkout__resumen-tit{ display:none }
}

/* ── el ancho del contenedor ──
   La página del checkout hereda de page.php el ancho de LECTURA (66ch ≈ 560px).
   Partido en dos columnas, cada una quedaba en 250px: «Nombre» se cortaba en dos
   líneas y el correo no cabía. Acá manda un ancho de checkout, no de texto: 1100px
   deja el formulario en ~640 y el resumen en ~400, que es la proporción de Shopify. */
body.mp-checkout-limpio .mp-principal > .mp-ancho{ max-width:1100px }

/* ── la tabla del resumen, más liviana ──
   Sin encabezado (PRODUCTO / SUBTOTAL no aporta: se entiende solo) y sin la caja
   con bordes, que competía con el fondo lino del panel. */
#order_review .woocommerce-checkout-review-order-table{ background:transparent; border:0 }
#order_review .woocommerce-checkout-review-order-table thead{ display:none }
#order_review .woocommerce-checkout-review-order-table td,
#order_review .woocommerce-checkout-review-order-table th{
  background:transparent; border-left:0; border-right:0; padding-inline:0;
}
#order_review .woocommerce-checkout-review-order-table tr.cart_item td{ border-bottom:0; padding-block:.55rem }
#order_review .woocommerce-checkout-review-order-table tbody{ border-bottom:1px solid var(--mp-hilo-firme) }
#order_review .order-total th,
#order_review .order-total td{ font-size:1rem; border-bottom:0 }

/* el nombre de la prenda no se parte sílaba por sílaba */
#order_review .mp-linea__txt{ overflow-wrap:break-word; hyphens:none }

/* el bloque de pago, sin la caja gris de WooCommerce dentro del panel */
#order_review .woocommerce-checkout-payment{ background:transparent !important; padding:0 }
#order_review .woocommerce-checkout-payment ul.payment_methods{ padding:0; border-bottom:1px solid var(--mp-hilo-firme) }
#order_review .woocommerce-checkout-payment .place-order{ padding:var(--mp-e2) 0 0 }
#order_review #place_order{ width:100% }