/* ===================================================================
   carrito.css — vasitos.es
   Estilos del carrito real (cart/cart.php).
   Usa las mismas variables de site-chrome.css.
=================================================================== */

.vcart-breadcrumb{ max-width:1160px; margin:0 auto; padding:18px 40px 0; font-size:11.5px; color:var(--muted); font-family:'IBM Plex Sans',sans-serif; }
body.woocommerce-cart .entry-title,
body.woocommerce-cart .page-title,
body.woocommerce-cart .entry-header,
body.woocommerce-cart header.entry-header,
body.woocommerce-cart .storefront-breadcrumb,
body.woocommerce-cart .edit-link{ display:none !important; }
body.woocommerce-cart #primary,
body.woocommerce-cart #main,
body.woocommerce-cart .content-area{ padding-top:0 !important; margin-top:0 !important; }
.vcart-breadcrumb a{ color:var(--muted); text-decoration:none; }
.vcart-breadcrumb .sep{ margin:0 6px; opacity:.6; }
.vcart-breadcrumb .current{ color:var(--ink); }
.vcart-page-title{ max-width:1160px; margin:0 auto; padding:18px 40px 0; }
.vcart-page-title h1{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:800; font-size:30px; margin:0; }
.vcart-page-title p{ font-size:12.5px; color:var(--muted); margin-top:4px; font-family:'IBM Plex Sans',sans-serif; }

.vcart-layout{ max-width:1160px; margin:0 auto; padding:28px 40px 70px; display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:28px; align-items:start; font-family:'IBM Plex Sans',sans-serif; }
.vcart-items{ display:flex; flex-direction:column; gap:14px; grid-column:1; }

.vcart-item{
  background:var(--step-bg); border-radius:12px; padding:20px;
  display:grid; grid-template-columns:88px 1fr auto;
  grid-template-areas:"img title price" "img details price";
  column-gap:18px; row-gap:4px; align-items:start;
}
.vcart-item-img{ grid-area:img; width:88px; height:88px; background:var(--surface); border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.vcart-item-img img{ width:100%; height:100%; object-fit:contain; }
.vcart-item-title{ grid-area:title; }
.vcart-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.vcart-name{ display:block; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:17px; font-weight:700; }
.vcart-name a{ color:var(--ink); text-decoration:none; }
.vcart-item-details{ grid-area:details; padding-top:8px; }

.vcart-item-opts .variation{ margin:0 0 10px; }
.vcart-item-opts .variation-Método,
.vcart-item-opts dl.variation{
  margin:0 0 10px; columns:2 130px; column-gap:16px; font-size:11.5px; font-family:'IBM Plex Sans',sans-serif;
}
.vcart-item-opts dl.variation dt,
.vcart-item-opts dl.variation dd{ display:inline; margin:0; padding:0; background:none; font-family:'IBM Plex Sans',sans-serif; }
.vcart-item-opts dl.variation dt{ color:var(--muted); font-weight:400; }
.vcart-item-opts dl.variation dd{ color:var(--ink); font-weight:600; }
.vcart-item-opts dl.variation dd::after{ content:''; display:block; margin-bottom:6px; }
.vcart-item-opts dl.variation dd p{ margin:0; display:inline; white-space:normal; }

.vasitos-color-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:-1px; box-shadow:0 0 0 1px var(--line-strong); flex-shrink:0; }
.vc-dot-translucido{ background:#E3E1DC; }
.vc-dot-naranja{ background:#F46036; }
.vc-dot-amarillo{ background:#F6D33C; }
.vc-dot-rojo{ background:#F2483A; }
.vc-dot-rosa{ background:#E1759F; }
.vc-dot-verde{ background:#4FB84B; }
.vc-dot-azul{ background:#3E9BD6; }
.vc-dot-morado{ background:#A165E0; }
.vc-dot-negro{ background:#1C1C1C; }
.vc-dot-blanco{ background:#FFFFFF; }
.vc-dot-gris{ background:#8C8C88; }
.vc-dot-marron{ background:#7A4B2A; }

.vcart-color-note{ font-size:10.5px; color:var(--muted); line-height:1.5; margin:0 0 12px; font-style:italic; font-family:'IBM Plex Sans',sans-serif; }
.vcart-qty-fixed{ display:inline-block; background:var(--surface); border:1px solid var(--line-strong); border-radius:7px; padding:6px 14px; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; color:var(--ink); }

.vcart-item-price{ grid-area:price; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:10px; padding-top:8px; }
.vcart-price-row{ font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:600; color:var(--ink); }
.vcart-price-row .woocommerce-Price-amount{ font-family:'IBM Plex Mono',monospace; }
.vcart-price-unit{ font-size:12px; color:var(--ink); font-weight:600; margin-top:3px; font-family:'IBM Plex Sans',sans-serif; }
.vcart-item-remove{ display:flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); text-decoration:none; font-family:'IBM Plex Sans',sans-serif; }
.vcart-item-remove:hover{ color:#E2382C; }
.vcart-item-remove svg{ width:13px; height:13px; }

.vcart-continue-shopping{ display:inline-flex; align-items:center; gap:8px; margin-top:8px; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:700; font-size:12.5px; color:var(--ink); text-decoration:none; grid-column:1; }
.vcart-continue-shopping svg{ width:15px; height:15px; }
.vcart-continue-shopping:hover{ color:var(--orange); }

/* ============================================
   RESUMEN DEL PEDIDO
   Mismo componente visual que el .resumen de la ficha de producto,
   pero dando MÁS PESO AL TOTAL a propósito — en el carrito es la
   última cifra que el cliente ve antes de pagar, así que aquí sí debe
   notarse más que en el resumen lateral de la ficha de producto.
============================================ */
.vcart-summary-card{
  background:var(--surface); border-radius:12px; box-shadow:var(--shadow); overflow:hidden;
  padding:22px; position:sticky; top:24px; grid-column:2; grid-row:1/4;
  font-family:'IBM Plex Sans',sans-serif;
}
.vcart-summary-card h3{
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-size:15px;
  color:var(--ink); margin:0 0 14px; letter-spacing:.02em;
}
.vcart-totals h2{ display:none; }
.vcart-totals, .vcart-totals *{ font-family:'IBM Plex Sans',sans-serif; }

.vcart-totals table.shop_table{ width:100%; border-collapse:collapse; }
.vcart-totals table.shop_table tr{ border-bottom:1px solid var(--line); }
.vcart-totals table.shop_table tr:last-child{ border-bottom:none; }
.vcart-totals table.shop_table th,
.vcart-totals table.shop_table td{
  padding:9px 0; font-size:12px; text-align:left; vertical-align:top; color:var(--muted); background:transparent !important;
}
.vcart-totals table.shop_table th{ width:36%; font-weight:400; }
.vcart-totals table.shop_table td{ text-align:right; font-family:'IBM Plex Mono',monospace !important; font-size:12.5px; font-weight:500; color:var(--ink); }
.vcart-totals .woocommerce-Price-amount{ font-family:'IBM Plex Mono',monospace; }

/* --- Fila de envío: siempre a ancho completo (etiqueta arriba, valor
   debajo), esté abierto o cerrado el formulario de "Cambiar
   dirección". Antes intentábamos que solo pasara a ancho completo
   cuando el formulario estaba realmente abierto, pero eso dependía de
   sincronizar JavaScript con las actualizaciones AJAX de WooCommerce,
   y se desajustaba con facilidad. Esta versión es menos vistosa en el
   estado cerrado, pero es 100% fiable siempre. */
.vcart-totals tr.woocommerce-shipping-totals th,
.vcart-totals tr.woocommerce-shipping-totals td{ display:block; width:100% !important; text-align:left; }
.vcart-totals tr.woocommerce-shipping-totals th{ font-size:12px; font-weight:400; color:var(--muted); padding-bottom:6px; }
.vcart-totals tr.woocommerce-shipping-totals td{ text-align:right; padding-top:0; }
.vcart-totals .woocommerce-shipping-methods{ list-style:none; margin:0; padding:0; }
.vcart-totals .woocommerce-shipping-methods li{ margin:0; }
.vcart-totals .woocommerce-shipping-methods label{ font-size:12.5px; font-weight:600; color:var(--ink); }
.vcart-totals .woocommerce-shipping-methods label.is-free{ display:inline-flex; align-items:center; gap:6px; color:#2F7D52; font-weight:700; }
.vcart-totals .woocommerce-shipping-methods label.is-free::before{
  content:'✓'; display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; background:#EAF4EE; font-size:9px; flex-shrink:0;
}
.vcart-totals .woocommerce-shipping-destination{ display:block; font-size:10.5px; color:var(--muted); opacity:.75; margin-top:4px; text-align:right; line-height:1.5; }
.vcart-totals .woocommerce-shipping-destination strong{ color:var(--ink); opacity:1; }

/* --- Fila de impuestos --- */
.vcart-totals tr[class*="tax-rate"] th,
.vcart-totals tr[class*="tax-rate"] td{ font-size:11px; }

/* --- TOTAL — el protagonista de la tarjeta. Más grande y con más
   espacio a su alrededor que el resto de filas, aposta. --- */
.vcart-totals .order-total{ border-top:2px solid var(--ink) !important; border-bottom:none !important; }
.vcart-totals .order-total th{
  padding-top:16px; font-family:'Barlow Condensed',sans-serif !important; text-transform:uppercase;
  font-size:14px; color:var(--ink); font-weight:700; letter-spacing:.02em;
}
.vcart-totals .order-total td{
  padding-top:16px; font-size:30px; font-weight:800; color:var(--orange);
  font-family:'Barlow Condensed',sans-serif !important; line-height:1;
}
.vcart-totals .order-total .woocommerce-Price-amount{ font-family:'Barlow Condensed',sans-serif !important; }

/* --- Calculadora de envío ("Cambiar dirección") --- */
.shipping-calculator-button{
  display:inline-flex; align-items:center; gap:5px; margin-top:8px;
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:700; letter-spacing:.02em;
  font-size:11px; color:var(--orange); text-decoration:none;
}
.shipping-calculator-button:hover{ color:#DB4E27; }
.shipping-calculator-button::after{ content:'→'; font-size:12px; display:inline-block; transition:transform .15s ease; }
.shipping-calculator-button[aria-expanded="true"]::after{ transform:rotate(90deg); }

.shipping-calculator-form{
  margin-top:10px; padding:16px; background:var(--step-bg); border-radius:10px;
  display:flex; flex-direction:column; gap:12px; text-align:left;
  width:100% !important; max-width:100% !important; box-sizing:border-box;
}
/* Todos los campos del formulario van a ancho completo, sin excepción
   — país, provincia, población, código postal y el botón, todos
   iguales, uno debajo de otro. */
.shipping-calculator-form .form-row,
.shipping-calculator-form .form-row > span,
.shipping-calculator-form p{
  display:flex !important; flex-direction:column !important; gap:5px; margin:0 !important; width:100% !important; box-sizing:border-box;
}
.shipping-calculator-form label{ font-family:'IBM Plex Mono',monospace !important; font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.shipping-calculator-form label .required{ color:var(--orange); }

.shipping-calculator-form input[type="text"]{
  height:40px; border:1px solid var(--line-strong); border-radius:8px; padding:0 12px;
  font-size:12.5px; font-family:'IBM Plex Sans',sans-serif; background:var(--surface); color:var(--ink);
  width:100% !important; box-sizing:border-box; display:block;
}
.shipping-calculator-form input[type="text"]:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-wash); }

.shipping-calculator-form button[type="submit"]{
  background:var(--orange); color:#fff; border:none; border-radius:8px; height:42px;
  width:100% !important; box-sizing:border-box; display:block;
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:700;
  letter-spacing:.04em; font-size:13px; cursor:pointer; margin-top:2px;
  box-shadow:0 4px 14px rgba(244,96,54,.25);
}
.shipping-calculator-form button[type="submit"]:hover{ background:#DB4E27; }

/* En escritorio, con más ancho disponible, repartimos los 4 campos en
   2 columnas (País+Provincia en una fila, Población+Código postal en
   la siguiente) — así el formulario ocupa menos alto y aprovecha
   mejor el ancho de la tarjeta. En móvil se queda en 1 sola columna,
   uno debajo de otro (más fácil de rellenar con el dedo). */
@media (min-width:640px){
  .shipping-calculator-form{
    display:grid; grid-template-columns:1fr 1fr; gap:12px 14px;
  }
  .shipping-calculator-form .form-row,
  .shipping-calculator-form p{ margin:0 !important; }
  /* El botón "Actualizar" ocupa las 2 columnas, va siempre al final */
  .shipping-calculator-form button[type="submit"]{ grid-column:1/-1; }
  .shipping-calculator-form p:has(button[type="submit"]){ grid-column:1/-1; }
}

/* País / Provincia: usamos Select2 (el componente que ya trae
   WooCommerce) en vez del <select> nativo del navegador — así el
   desplegable se ve igual de cuidado que el resto de la web, tanto
   cerrado como al abrirlo. El ancho se recalcula por JavaScript justo
   al abrir el formulario (ver cart.php) — sin eso, Select2 calcula mal
   el ancho porque el formulario empieza oculto en la página. */
.shipping-calculator-form .select2-container{ width:100% !important; }
.shipping-calculator-form .select2-selection--single{
  height:40px !important; border:1px solid var(--line-strong) !important; border-radius:8px !important;
  background:var(--surface) !important; display:flex !important; align-items:center;
}
.shipping-calculator-form .select2-selection__rendered{
  font-size:12.5px !important; font-family:'IBM Plex Sans',sans-serif !important; color:var(--ink) !important;
  padding-left:12px !important; line-height:normal !important;
}
.shipping-calculator-form .select2-selection__arrow{ height:38px !important; right:8px !important; }
.shipping-calculator-form .select2-container--open .select2-selection--single{ border-color:var(--orange) !important; box-shadow:0 0 0 3px var(--orange-wash); }
/* La lista desplegable en sí se dibuja aparte, pegada al final de la
   página (no dentro del formulario), por eso estas reglas van sueltas. */
.select2-dropdown{
  border:1px solid var(--line-strong) !important; border-radius:8px !important;
  font-family:'IBM Plex Sans',sans-serif !important; font-size:12.5px;
  box-shadow:0 8px 20px rgba(20,20,20,.12) !important;
}
.select2-search--dropdown{ padding:8px !important; }
.select2-search--dropdown .select2-search__field{
  border:1px solid var(--line-strong) !important; border-radius:6px !important; padding:7px 10px !important; font-size:12px !important;
  outline:none !important;
}
.select2-results__option--highlighted{ background:var(--orange) !important; color:#fff !important; }
.select2-results__option{ font-size:12.5px !important; padding:7px 12px !important; }

/* --- Botón de finalizar compra --- */
.wc-proceed-to-checkout{ margin-top:14px; }
.wc-proceed-to-checkout a.checkout-button{
  display:block; width:100%; background:var(--orange); color:#fff !important; border:none; border-radius:8px;
  padding:15px 0; font-family:'Barlow Condensed',sans-serif !important; text-transform:uppercase; font-weight:700;
  letter-spacing:.04em; font-size:14.5px; text-align:center; text-decoration:none !important;
  box-shadow:0 4px 14px rgba(244,96,54,.25);
}
.wc-proceed-to-checkout a.checkout-button:hover{ background:#DB4E27; }

/* --- Cupón --- */
.woocommerce-cart-form .coupon{ display:flex; gap:8px; margin:16px 0; grid-column:1; }
.woocommerce-cart-form .coupon input#coupon_code{ flex:1; height:42px; border:1px solid var(--line-strong); border-radius:7px; padding:0 14px; font-size:13px; font-family:'IBM Plex Sans',sans-serif; }
.woocommerce-cart-form .coupon button{ background:var(--paper); border:1px solid var(--line-strong); border-radius:7px; padding:0 20px; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; font-weight:700; font-size:12px; cursor:pointer; }
.woocommerce-cart-form .coupon button:hover{ background:var(--step-bg); }

/* --- Sellos de confianza --- */
.vcart-trust{ margin-top:12px; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px; }
.vcart-trust-group{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.vcart-trust-label{ font-family:'IBM Plex Mono',monospace; font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); width:100%; margin-bottom:2px; }
.vcart-trust-group img{ height:13px; width:auto; opacity:.7; }
.vcart-pay-chip{ font-size:8.5px; font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--muted); border:1px solid var(--line-strong); border-radius:4px; padding:3px 7px; }

/* --- Avisos de WooCommerce (ej. "Costes de envío actualizados") --- */
.woocommerce-info, .woocommerce-message, .woocommerce-error{
  max-width:1160px !important; margin:16px auto 0 !important; padding:14px 20px !important;
  background:var(--orange-wash) !important; color:var(--ink) !important; border-radius:10px !important;
  list-style:none !important; font-size:12.5px !important; font-family:'IBM Plex Sans',sans-serif !important;
  border:none !important; border-left:3px solid var(--orange) !important; box-shadow:none !important;
}
.woocommerce-error{ background:#FCEAE8 !important; border-left-color:#E2382C !important; }
.woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before{ content:none !important; display:none !important; }

.vcart-empty{ max-width:1160px; margin:0 auto; padding:60px 40px; text-align:center; font-family:'IBM Plex Sans',sans-serif; }
.vcart-empty p{ color:var(--muted); margin-bottom:16px; }

@media (max-width:860px){
  .vcart-breadcrumb, .vcart-page-title, .vcart-layout{ padding-left:20px; padding-right:20px; }
  .vcart-layout{ grid-template-columns:1fr; gap:20px; }
  .vcart-item{ grid-template-columns:64px 1fr; grid-template-areas:"img title" "details details" "price price"; row-gap:10px; }
  .vcart-item-img{ width:56px; height:56px; }
  .vcart-item-price{ align-items:stretch; text-align:left; border-top:1px solid var(--line-strong); padding-top:10px; }
  .vcart-summary-card{ position:static; grid-column:1; grid-row:auto; }
}