@charset "UTF-8";
/* ============================================================
   TANTO LAMPS \00b7 Carrito
   Réplica de la estructura de referencia: lista con cabecera
   (Producto·Precio·Cantidad·Total), subtotal centrado con líneas,
   nota de pedido, aviso legal y botón "Continuar Pedido" negro a
   todo el ancho. Paleta neutra de tienda.
   ============================================================ */

.tanto-carrito {
  --tanto-ink: #1c1c1c;
  --tanto-ink-soft: #6a6a6a;
  --tanto-line: #e5e5e5;
  max-width: 900px; margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) clamp(20px, 4vw, 40px) clamp(60px, 8vw, 100px);
  color: var(--tanto-ink);
}

.tanto-carrito__titulo {
  font-family: "Bodoni Moda", Georgia, serif; font-weight: 400;
  font-size: clamp(30px, 3.6vw, 44px); text-align: center; letter-spacing: .01em;
  margin: 0 0 clamp(30px, 4vw, 52px); color: var(--tanto-ink);
}

/* ---- Lista ---- */
.tanto-cart-list { list-style: none; margin: 0; padding: 0; }

.tanto-cart-list__header {
  display: flex; padding-bottom: .7em; border-bottom: 1px solid rgba(17, 17, 17, .2);
  font-family: "Instrument Sans", sans-serif; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tanto-ink-soft); white-space: nowrap;
}
.tanto-cart-list__header .col-image { flex: 0 0 auto; width: 66px; margin-right: 24px; }
.tanto-cart-list__header .col-notimage { display: flex; flex-grow: 1; }
.tanto-cart-list__header .desc { flex-grow: 1; }
.tanto-cart-list__header .item-price { width: 160px; }
.tanto-cart-list__header .quantity-and-remove { width: 128px; margin: 0 24px; text-align: center; }
.tanto-cart-list__header .line-total { width: 100px; text-align: right; }

.tanto-cart-item {
  display: flex; align-items: flex-start; margin: 2em 0;
  padding-bottom: 2em; border-bottom: 1px solid var(--tanto-line);
}
.tanto-cart-item .col-image { flex: 0 0 auto; width: 66px; margin-right: 24px; }
.tanto-cart-item .col-image img { width: 100%; height: auto; display: block; background: #f6f4f1; }
.tanto-cart-item .col-notimage { display: flex; flex-grow: 1; align-items: flex-start; }

.tanto-cart-item .desc { flex-grow: 1; text-align: left; padding-right: 16px; }
.tanto-cart-item .title { line-height: 1.3; }
/* Título de producto: sans-serif (como Terria), 15px peso 600 — no serif. */
.tanto-cart-item .product-title {
  font-family: "Instrument Sans", sans-serif; font-weight: 600;
  font-size: 15px; line-height: 1.35; color: var(--tanto-ink);
}
.tanto-cart-item .title a { text-decoration: none; color: inherit; }
.tanto-cart-item .desc dl,
.tanto-cart-item .variation {
  margin: 6px 0 0; font-family: "Instrument Sans", sans-serif;
  font-size: .82rem; color: var(--tanto-ink-soft);
}
/* Una opción por línea. Iban todas seguidas en un solo párrafo, y al sumarse
   la medida del encargo —cuyo propio valor lleva dos puntos— ya no se sabía
   qué etiqueta iba con qué valor. El salto se pone con un pseudoelemento y no
   con `display: block` para que una opción vacía no deje una línea suelta. */
.tanto-cart-item .desc dl dt { display: inline; margin: 0 5px 0 0; font-weight: 400; }
.tanto-cart-item .desc dl dd { display: inline; margin: 0; font-weight: 400; }
.tanto-cart-item .desc dl dd p { display: inline; margin: 0; }
.tanto-cart-item .desc dl dd::after { content: "\A"; white-space: pre; }
/* No mostrar atributos de variante sin valor. */
.tanto-cart-item .desc dl .variation:empty,
.tanto-cart-item .desc dl dd:empty { display: none; }

.tanto-cart-item .item-price { width: 160px; }
.tanto-cart-item .quantity-and-remove { width: 128px; margin: 0 24px; text-align: center; }
.tanto-cart-item .line-total { width: 100px; text-align: right; }
.tanto-cart-item .item-price,
.tanto-cart-item .line-total {
  font-family: "Instrument Sans", sans-serif; font-size: .95rem; color: var(--tanto-ink);
}
.tanto-cart__lbl { display: none; } /* etiqueta "Precio/Total" solo en móvil */

/* Cantidad: caja con − [n] + (como en la ficha) */
.tanto-qty {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #bbb; height: 44px; width: 118px; margin: 0 auto;
}
.tanto-qty__b {
  flex: 0 0 34px; height: 100%; padding: 0; background: none; border: 0; cursor: pointer;
  font-family: "Instrument Sans", sans-serif; font-size: 1.15rem; line-height: 1; color: #6b6b6b;
  display: flex; align-items: center; justify-content: center; transition: color .2s ease;
}
.tanto-qty__b:hover { color: var(--tanto-ink); }
.tanto-qty__input {
  flex: 1; width: auto; min-width: 0; height: 100%; padding: 0; text-align: center;
  border: 0; background: transparent; color: var(--tanto-ink);
  font-family: "Instrument Sans", sans-serif; font-size: .95rem; -moz-appearance: textfield;
}
.tanto-qty__input::-webkit-outer-spin-button,
.tanto-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tanto-qty-fija { display: inline-block; padding: 10px 0; }

.tanto-cart-item .remove {
  display: inline-block; margin-top: 10px; text-decoration: underline;
  font-family: "Instrument Sans", sans-serif; font-size: .78rem; color: var(--tanto-ink-soft) !important;
  transition: color .2s ease;
}
.tanto-cart-item .remove:hover { color: var(--tanto-ember, #c0401f) !important; }

/* ---- Actualizar | Seguir comprando ---- */
.tanto-cart-update {
  margin: 1.4em 0 0; text-align: center;
  font-family: "Instrument Sans", sans-serif; font-size: .84rem; color: var(--tanto-ink-soft);
}
.tanto-cart-update span { margin: 0 .5em; opacity: .5; }
.tanto-cart-update__btn {
  background: none; border: 0; padding: 2px; cursor: pointer;
  font-family: inherit; font-size: inherit; color: var(--tanto-ink-soft); text-decoration: underline;
}
.tanto-cart-update__btn:hover { color: var(--tanto-ink); }
.tanto-cart-continue { color: var(--tanto-ink-soft); text-decoration: underline; }
.tanto-cart-continue:hover { color: var(--tanto-ink); }

/* ---- Bajo el carrito: subtotal + nota + botón (ancho completo, igual
   que la lista de arriba) ---- */
.tanto-cart-under { max-width: none; margin: clamp(28px, 4vw, 44px) 0 0; }
.tanto-cart-subtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1em 0; border-top: 1px solid var(--tanto-ink); border-bottom: 1px solid var(--tanto-ink);
}
/* Subtotal: MISMA tipografía que los precios de arriba, sin nada especial
   (Instrument Sans, mismo tamaño). Solo lo enmarcan las líneas de la fila. */
.tanto-cart-subtotal__lbl,
.tanto-cart-subtotal__amount {
  font-family: "Instrument Sans", sans-serif; font-weight: 400; font-size: .95rem; color: var(--tanto-ink);
}

/* Personalización: cuadro estrecho y centrado (no de lado a lado), como Terria.
   Es el canal para todo lo que no cabe en un desplegable, así que dice qué se
   puede pedir: de otro modo se lee como el típico «comentarios» del envío. */
.tanto-cart-note { margin: 30px auto 0; max-width: 520px; text-align: center; }
.tanto-cart-note label {
  display: block; margin-bottom: 10px;
  font-family: "Instrument Sans", sans-serif; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tanto-ink-soft);
}
.tanto-cart-note__ayuda {
  margin: 0 0 12px;
  font-family: "Instrument Sans", sans-serif;
  font-size: .82rem; line-height: 1.55; color: var(--tanto-ink-soft);
}
.tanto-cart-note__aviso {
  margin: 10px 0 0;
  font-family: "Instrument Sans", sans-serif;
  font-size: .74rem; line-height: 1.5; color: var(--tanto-ink-soft);
}
.tanto-cart-note textarea {
  width: 100%; min-height: 90px; padding: 12px 16px; resize: vertical; text-align: left;
  border: 1px solid var(--tanto-line); background: #fff; border-radius: 0;
  font-family: "Instrument Sans", sans-serif; font-size: .9rem; color: var(--tanto-ink);
}
.tanto-cart-note textarea:focus { outline: none; border-color: var(--tanto-ink); }

.tanto-cart-rgpd,
.tanto-cart-policies {
  max-width: 560px; margin: 16px auto 0; text-align: center;
  font-family: "Instrument Sans", sans-serif;
  font-size: .78rem; line-height: 1.5; color: var(--tanto-ink-soft);
}
.tanto-cart-rgpd a,
.tanto-cart-policies a { color: var(--tanto-ink-soft); text-decoration: underline; }
.tanto-cart-rgpd a:hover,
.tanto-cart-policies a:hover { color: var(--tanto-ink); }

.tanto-cart-checkout {
  display: block; width: 100%; margin: 1.5em 0 0; padding: 18px 30px; text-align: center;
  background: var(--tanto-ink); color: #fff; text-decoration: none;
  font-family: "Instrument Sans", sans-serif; font-size: 13px; letter-spacing: .13em;
  text-transform: uppercase; border: 1px solid var(--tanto-ink); transition: background .2s ease, color .2s ease;
}
.tanto-cart-checkout:hover { background: #fff; color: var(--tanto-ink); }

/* ---- Responsive ---- */
@media (max-width: 720px) {
  .tanto-cart-list__header { display: none; }
  .tanto-cart-item { align-items: stretch; }
  .tanto-cart-item .col-image { width: 84px; margin-right: 18px; }
  .tanto-cart-item .col-notimage { display: block; }
  .tanto-cart-item .item-price,
  .tanto-cart-item .quantity-and-remove { width: auto; margin: 12px 0 0; text-align: left; }
  .tanto-cart-item .line-total { display: none; }
  .tanto-qty { margin: 0; }
  .tanto-cart__lbl {
    display: inline-block; margin-right: 8px;
    font-family: "Instrument Sans", sans-serif; font-size: .72rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--tanto-ink-soft);
  }
  .tanto-cart-under { max-width: none; }
}

/* ---- Avisos de WooCommerce ---- */
/* En la propia página del carrito, el aviso "X se ha añadido a tu carrito"
   sobra (ya estás viendo el carrito): lo ocultamos. */
.woocommerce-cart .woocommerce-message { display: none; }
.woocommerce-cart .woocommerce-notices-wrapper { max-width: 900px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: #faf9f7; color: #1c1c1c; border: 1px solid #e5e5e5; border-left: 3px solid #1c1c1c;
  border-radius: 0; padding: 14px 18px; margin: 0 0 14px; list-style: none;
  font-family: "Instrument Sans", sans-serif; font-size: .9rem;
}
.woocommerce-cart .woocommerce-error { border-left-color: #c0401f; }
.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-info::before,
.woocommerce-cart .woocommerce-error::before { display: none; }
.woocommerce-cart .woocommerce-message .button,
.woocommerce-cart .woocommerce-info .button {
  background: #1c1c1c; color: #fff; border: 1px solid #1c1c1c; border-radius: 0;
  padding: 9px 18px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
}
.woocommerce-cart .woocommerce-message .button:hover,
.woocommerce-cart .woocommerce-info .button:hover { background: #fff; color: #1c1c1c; }

/* Lo que quita el miedo, en el paso donde más gente se cae. Discreto: es un
   recordatorio, no un cartel. */
.tanto-cart-garantias {
  list-style: none; max-width: 560px; margin: 20px auto 0; padding: 18px 0 0;
  border-top: 1px solid var(--tanto-line);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  text-align: center;
}
.tanto-cart-garantias strong {
  display: block; margin-bottom: 4px;
  font-family: "Instrument Sans", sans-serif;
  font-size: .78rem; font-weight: 600; color: var(--tanto-ink);
}
.tanto-cart-garantias span {
  display: block;
  font-family: "Instrument Sans", sans-serif;
  font-size: .72rem; line-height: 1.45; color: var(--tanto-ink-soft);
}
.tanto-cart-pago {
  max-width: 560px; margin: 14px auto 0; text-align: center;
  font-family: "Instrument Sans", sans-serif;
  font-size: .74rem; color: var(--tanto-ink-soft);
}
@media (max-width: 560px) {
  .tanto-cart-garantias { grid-template-columns: 1fr; gap: 14px; }
}

/* Formas de pago. Con logotipos si están puestos (assets/img/pago/), y si no
   una línea de texto: la clase es la misma para los dos casos. */
ul.tanto-cart-pago {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  list-style: none; max-width: 560px; margin: 16px auto 0; padding: 0;
}
ul.tanto-cart-pago li { display: block; line-height: 0; }
/* Sin borde ni fondo propios: cada marca trae los suyos y son intocables —el
   de Apple Pay es negro, el de Google blanco con su filete—. Enmarcarlos otra
   vez dejaría un doble borde. Lo único que se impone es el alto, para que las
   cinco se lean como una fila y no como cinco pegatinas sueltas. */
ul.tanto-cart-pago img { display: block; height: 26px; width: auto; }