/**
 * Volttier Builder 1.0.12 · la lista, el panel lateral, la barra y el carrito.
 *
 * **Los colores.** El azul de la marca es `#0F50FF`, y va donde hace de
 * fondo o de borde: botones, bordes de lo elegido, marcas. Como TEXTO sobre el
 * fondo oscuro de la tienda no llega a 4,5:1, así que el texto azul usa
 * `#8AA9FF`. No hay verde. El rojo es solo para el descuento y los errores.
 *
 * **Todo va con prefijo `vtb-`.** Esta hoja se carga en toda la tienda —el
 * bloque del carrito sale fuera de la ficha—, y un selector sin prefijo aquí
 * sería un estilo cambiado en una página que no es nuestra. Las dos únicas
 * clases que se le ponen a `<body>` son `vtb-con-barra`, `vtb-panel-abierto` y
 * `vtb-oculta-comprar`, y las tres las pone el JavaScript del módulo solo en
 * una ficha que tiene configurador.
 *
 * **No hay `@import` de tipografías ni familia propia**: el bloque hereda la
 * de la tienda. Y no hay ninguna medida de maqueta que dependa del ancho de la
 * ventana salvo las dos que tienen que depender de él, que son las de las dos
 * piezas que SÍ se pegan a la ventana: el panel lateral y la barra.
 *
 * **Sí hay `position: fixed`, y es a propósito desde la 1.0.7**: el panel y la
 * barra. Las versiones anteriores lo evitaban porque una barra que aparece y
 * desaparece cambia la geometría del documento y la página salta; esta barra
 * está siempre, mide siempre lo mismo y la página le reserva su sitio con
 * `body.vtb-con-barra`.
 */

.vtb,
.vtb-capa,
.vtb-barra,
.vtb-cart-line {
  --vtb-azul: #0F50FF;
  --vtb-azul-texto: #8AA9FF;
  --vtb-fondo: #202020;
  --vtb-panel: #292929;
  --vtb-panel-alto: #242424;
  --vtb-borde: #454545;
  --vtb-borde-fuerte: #66717D;
  --vtb-texto: #F7F9FC;
  --vtb-texto-suave: #D8DEE6;
  --vtb-texto-tenue: #AEB8C5;
  --vtb-aviso: #F5A524;
  --vtb-rojo: #FF6B62;
  --vtb-rojo-fondo: rgba(255, 107, 98, 0.12);

  box-sizing: border-box;
  color: var(--vtb-texto);
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
}

.vtb *,
.vtb *::before,
.vtb *::after,
.vtb-capa *,
.vtb-capa *::before,
.vtb-capa *::after,
.vtb-barra *,
.vtb-barra *::before,
.vtb-barra *::after,
.vtb-cart-line *,
.vtb-cart-line *::before,
.vtb-cart-line *::after {
  box-sizing: border-box;
}

/* Lo que lleva `hidden` no se ve, diga lo que diga el `display` de su clase. */
.vtb [hidden],
.vtb-capa [hidden],
.vtb-capa[hidden],
.vtb-barra [hidden] {
  display: none !important;
}

/* Un foco que se ve, en todo lo que se puede pulsar. */
.vtb button:focus-visible,
.vtb-capa button:focus-visible,
.vtb-capa .vtb-panel:focus-visible,
.vtb-barra button:focus-visible,
.vtb-cart-line summary:focus-visible {
  outline: 2px solid var(--vtb-azul-texto);
  outline-offset: 2px;
}

/* ---------- el bloque de la ficha ---------- */

.vtb {
  margin: 22px 0;
  border: 1px solid #3B3B3B;
  /* El filo azul de arriba: lo único de la caja que lleva el color de marca. */
  border-top: 3px solid var(--vtb-azul);
  border-radius: 12px;
  background: var(--vtb-fondo);
  overflow: hidden;
}

/* La cabecera, centrada y compacta: título, raya, frase y estado; en un
   escritorio no pasa de unos 110 px de alto. El brillo es un degradado muy
   suave que nace en el filo azul y se apaga hacia abajo: debajo queda el mismo
   gris de antes, así que el texto se lee igual. */
.vtb__head {
  padding: 14px 16px 12px;
  border-bottom: 1px solid #3B3B3B;
  background:
    radial-gradient(ellipse 60% 110% at 50% 0, rgba(15, 80, 255, 0.12), transparent 70%),
    #252525;
  text-align: center;
}

/* La fuente es la del tema: aquí no se declara ninguna. 20 px, y 18 px en el
   móvil —abajo, con lo demás de las pantallas pequeñas—. El relleno de la
   izquierda compensa el espaciado que sobra tras la última letra, para que el
   título quede centrado de verdad. */
.vtb__title {
  margin: 0;
  padding-left: 0.08em;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFF;
}

.vtb__raya {
  display: block;
  width: 32px;
  height: 2px;
  margin: 8px auto;
  border-radius: 1px;
  background: var(--vtb-azul);
}

.vtb__lead {
  margin: 0 0 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--vtb-texto-suave);
}

.vtb__estado {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--vtb-texto-tenue);
}

/* ---------- lo que se oculta del tema ----------
 *
 * Dos cosas, y las dos se OCULTAN, no se quitan: siguen en el documento.
 *
 * El botón de añadir del tema, en una ficha con configurador: el único botón
 * es el de la barra, que pulsa este por dentro. Hace falta que siga en su
 * formulario, con el token y la cantidad, porque es el que añade de verdad.
 * El selector va acotado al formulario del producto: las miniaturas de
 * «productos relacionados» llevan botones con la misma marca y no se tocan.
 *
 * Y `.vtb-oculto`, que el script le pone al enlace «Personalización del
 * producto» de las líneas del carrito que llevan un bloque nuestro.
 */

body.vtb-oculta-comprar #add-to-cart-or-refresh [data-button-action="add-to-cart"],
body.vtb-oculta-comprar .product-add-to-cart [data-button-action="add-to-cart"] {
  display: none !important;
}

.vtb-oculto {
  display: none !important;
}

/* El estado que se escribe debajo del precio del tema. */
.vtb-cabecera-estado {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  opacity: 0.8;
}

.vtb-icono {
  display: block;
  width: 24px;
  height: 24px;
}

/* ---------- el aviso de «no sabemos el precio» ----------
 *
 * Ámbar y no rojo: el rojo es el del descuento y el de los errores de
 * validación. Esto no es un error del cliente.
 */

.vtb-aviso {
  margin: 16px 18px 0;
  padding: 12px 14px;
  border: 1px solid var(--vtb-aviso);
  border-radius: 8px;
  background: rgba(245, 165, 36, 0.08);
  color: var(--vtb-texto);
  font-size: 13px;
}

.vtb-aviso strong {
  display: block;
  color: var(--vtb-aviso);
}

/* ---------- la lista ---------- */

.vtb-lista,
.vtb-fijos__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vtb-fila {
  border-bottom: 1px solid #333;
}

.vtb-fila__boton,
.vtb-fijo {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  color: var(--vtb-texto);
  font: inherit;
  text-align: left;
}

.vtb-fila__boton {
  cursor: pointer;
}

.vtb-fila__boton:hover {
  background: rgba(255, 255, 255, 0.04);
}

.vtb-fila__icono {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Solo el icono de línea, sin recuadro: ni borde ni fondo. */
  width: 24px;
  height: 24px;
  margin: 0 5px;
  color: var(--vtb-texto-suave);
}

/* La marca de estado, en la esquina inferior derecha del icono: 14 px, con un
   cerco del color del fondo para que no se pegue a las líneas del icono. */
.vtb-fila__marca {
  position: absolute;
  right: -6px;
  bottom: -5px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  box-shadow: 0 0 0 2px var(--vtb-fondo);
  border-radius: 999px;
  color: #FFF;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.vtb-fila__marca.is-ok {
  display: flex;
  background: var(--vtb-azul);
}

.vtb-fila__marca.is-ok::before {
  content: "✓";
}

.vtb-fila__marca.is-falta {
  display: flex;
  background: #D9342B;
}

.vtb-fila__marca.is-falta::before {
  content: "×";
}

.vtb-fila__texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.vtb-fila__nombre {
  font-size: 12px;
  color: var(--vtb-texto-tenue);
}

/* «Opcional»: gris, con un borde fino. Ni azul ni rojo: no es un estado, es
   un dato del grupo. Va junto al nombre en la fila y junto al título del panel. */
.vtb-opcional {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid #5C6470;
  border-radius: 4px;
  color: var(--vtb-texto-tenue);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 1px;
  white-space: nowrap;
}

/* En el panel, pegada al título: el hueco sobrante queda a su derecha. */
.vtb-opcional--panel {
  flex: none;
  margin: 0 auto 0 -2px;
  font-size: 11px;
}

.vtb-fila__seleccion {
  font-weight: 700;
  overflow-wrap: break-word;
}

.vtb-fila__suplemento {
  flex: none;
  font-weight: 700;
  white-space: nowrap;
  color: var(--vtb-azul-texto);
  font-variant-numeric: tabular-nums;
}

.vtb-fila__flecha {
  flex: none;
  width: 18px;
  text-align: center;
  color: var(--vtb-texto-tenue);
  font-size: 18px;
  line-height: 1;
}

.vtb-fila__flecha::before {
  content: "›";
}

.vtb-fila__flecha--mas::before {
  content: "+";
}

/* Falta una obligatoria: fondo rojo suave y el texto lo dice. */
.vtb-fila.is-falta {
  background: var(--vtb-rojo-fondo);
}

.vtb-fila.is-falta .vtb-fila__seleccion {
  color: var(--vtb-rojo);
}

/* ---------- las piezas fijas ---------- */

.vtb-fijos {
  padding: 12px 16px 14px;
}

.vtb-fijos__boton {
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--vtb-azul-texto);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.vtb-fijos__boton::after {
  content: " ▾";
}

.vtb-fijos__boton[aria-expanded="true"]::after {
  content: " ▴";
}

.vtb-fijos__lista {
  margin-top: 6px;
  border: 1px solid #333;
  border-radius: 10px;
}

.vtb-fijo {
  border-bottom: 1px solid #333;
  padding: 8px 12px;
  min-height: 54px;
}

.vtb-fijo:last-child {
  border-bottom: 0;
}

.vtb-fijo__candado {
  flex: none;
  color: var(--vtb-texto-tenue);
}

.vtb-fijo__candado .vtb-icono {
  width: 18px;
  height: 18px;
}

/* ---------- restablecer ---------- */

.vtb-restablecer {
  padding: 0 16px 14px;
}

.vtb-restablecer__boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--vtb-azul-texto);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.vtb-restablecer__boton .vtb-icono {
  width: 16px;
  height: 16px;
}

.vtb-restablecer__boton:disabled {
  color: #6B6B6B;
  text-decoration: none;
  cursor: default;
}

/* ---------- mensajes ---------- */

.vtb-message {
  margin: 0 16px 16px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--vtb-panel);
  color: var(--vtb-texto);
  font-size: 14px;
}

.vtb-message--error {
  border: 1px solid var(--vtb-rojo);
  color: var(--vtb-rojo);
}

/* ---------- botones ---------- */

.vtb-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 22px;
  border: 1px solid var(--vtb-azul);
  border-radius: 8px;
  background: var(--vtb-azul);
  color: #FFF;
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.vtb-boton:hover {
  background: #3D72FF;
  border-color: #3D72FF;
}

.vtb-boton:disabled {
  border-color: var(--vtb-borde);
  background: #3A3A3A;
  color: var(--vtb-texto-tenue);
  cursor: not-allowed;
}

/* ---------- importes ---------- */

.vtb-tachado {
  color: var(--vtb-texto-tenue);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.vtb-total {
  color: #FFF;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.vtb-total--grande {
  font-size: 24px;
  line-height: 1.1;
}

/* La insignia del descuento: de lo poco que va en rojo. */
.vtb-insignia {
  padding: 2px 7px;
  border-radius: 6px;
  background: #D9342B;
  color: #FFF;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- el panel lateral ---------- */

.vtb-capa {
  position: fixed;
  inset: 0;
  z-index: 100000;
}

.vtb-capa__fondo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}

.vtb-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 600px;
  max-width: 100%;
  background: var(--vtb-fondo);
  border-left: 1px solid #3B3B3B;
  box-shadow: -18px 0 40px rgba(0, 0, 0, 0.45);
}

/* Con un grupo en cuadrícula, más ancho: caben cuatro tarjetas. La clase la
   pone y la quita el script al abrir cada grupo. */
.vtb-panel--ancho {
  width: 760px;
  max-width: 94vw;
}

.vtb-panel__cabecera {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #3B3B3B;
  background: #252525;
}

.vtb-panel__titulo {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #FFF;
}

.vtb-panel__cerrar,
.vtb-panel__volver {
  flex: none;
  padding: 8px 10px;
  border: 1px solid var(--vtb-borde);
  border-radius: 8px;
  background: transparent;
  color: var(--vtb-texto-suave);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.vtb-panel__cuerpo,
.vtb-panel__detalle {
  /* La barra de desplazamiento, oscura como el panel. */
  scrollbar-color: #5A5A5A transparent;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 18px 18px;
  position: relative;
}

.vtb-panel__volver {
  margin-bottom: 14px;
}

.vtb-panel__pie {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid #3B3B3B;
  background: #252525;
}

.vtb-panel__total {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vtb-panel__rotulo,
.vtb-panel__sobre {
  font-size: 12px;
  color: var(--vtb-texto-tenue);
}

.vtb-panel__importes {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
}

.vtb-panel__importes .vtb-total {
  font-size: 22px;
}

/* Las pestañas de sección: se quedan arriba mientras se recorre la lista. */
.vtb-pestanas {
  position: sticky;
  top: -14px;
  z-index: 1;
  display: flex;
  gap: 8px;
  margin: -14px -18px 12px;
  padding: 10px 18px;
  overflow-x: auto;
  background: var(--vtb-fondo);
  border-bottom: 1px solid #333;
}

.vtb-pestana {
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--vtb-borde);
  border-radius: 999px;
  background: transparent;
  color: var(--vtb-texto-suave);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.vtb-seccion__titulo {
  margin: 14px 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vtb-texto-tenue);
}

.vtb-opciones__nota {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--vtb-texto-tenue);
}

/* ---------- una opción ---------- */

.vtb-opcion {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 8px;
}

.vtb-opcion__elegir {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 12px;
  /* Dos píxeles siempre, y lo que cambia es el color: así una opción no se
     mueve al elegirla. */
  border: 2px solid var(--vtb-borde);
  border-radius: 10px;
  background: var(--vtb-panel);
  color: var(--vtb-texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.vtb-opcion__elegir:hover {
  border-color: var(--vtb-borde-fuerte);
}

.vtb-opcion__elegir[aria-pressed="true"] {
  border-color: var(--vtb-azul);
  background: #252A34;
}

.vtb-opcion__radio {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--vtb-borde-fuerte);
  border-radius: 999px;
}

.vtb-opcion__elegir[aria-pressed="true"] .vtb-opcion__radio {
  border-color: var(--vtb-azul);
  background: radial-gradient(circle, var(--vtb-azul) 0 45%, transparent 50%);
}

/* La miniatura: entera dentro de su caja, sin recortar, sobre fondo oscuro. */
.vtb-opcion__mini {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: #161616;
  object-fit: contain;
}

.vtb-opcion__cuerpo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.vtb-opcion__nombre {
  font-weight: 700;
  overflow-wrap: break-word;
}

.vtb-opcion__spec {
  font-size: 13px;
  color: var(--vtb-texto-tenue);
  overflow-wrap: break-word;
}

.vtb-opcion__precio {
  flex: none;
  white-space: nowrap;
  color: var(--vtb-texto-tenue);
  font-variant-numeric: tabular-nums;
}

.vtb-opcion__precio--suma {
  color: var(--vtb-azul-texto);
  font-weight: 700;
}

.vtb-opcion__detalles {
  flex: none;
  padding: 0 10px;
  border: 1px solid var(--vtb-borde);
  border-radius: 10px;
  background: transparent;
  color: var(--vtb-azul-texto);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* ---------- la cuadrícula de tarjetas ----------
 *
 * El MISMO marcado que la lista, con otra hoja: la tiene el grupo cuyas
 * opciones llevan todas imagen. Cada sección es una rejilla de cuatro columnas
 * en el panel ancho —760 px—, de tres si el panel mide menos de 640 y de dos
 * en un móvil. Se mide el panel, no la ventana: el contenedor es el panel
 * menos su borde y su relleno, 37 px, y de ahí salen los 602.
 *
 * La tarjeta entera elige: el botón de elegir se estira con un `::after` que
 * la cubre, y «Detalles» queda por encima de esa capa, como botón aparte.
 */

.vtb-opciones--rejilla {
  container-type: inline-size;
}

.vtb-opciones--rejilla .vtb-seccion {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

@container (max-width: 602px) {
  .vtb-opciones--rejilla .vtb-seccion {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container (max-width: 479px) {
  .vtb-opciones--rejilla .vtb-seccion {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.vtb-opciones--rejilla .vtb-seccion__titulo {
  grid-column: 1 / -1;
  margin: 8px 0 0;
}

.vtb-opciones--rejilla .vtb-opcion {
  position: relative;
  flex-flow: column nowrap;
  gap: 0;
  margin: 0;
  /* Dos píxeles siempre: al elegirla cambia el color, no el tamaño. */
  border: 2px solid var(--vtb-borde);
  border-radius: 10px;
  background: var(--vtb-panel);
  overflow: hidden;
}

.vtb-opciones--rejilla .vtb-opcion:hover {
  border-color: var(--vtb-borde-fuerte);
}

.vtb-opciones--rejilla .vtb-opcion--elegida,
.vtb-opciones--rejilla .vtb-opcion--elegida:hover {
  border-color: var(--vtb-azul);
  background: #232B3F;
}

.vtb-opciones--rejilla .vtb-opcion__elegir {
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-height: 0;
  padding: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.vtb-opciones--rejilla .vtb-opcion__elegir::after {
  content: "";
  position: absolute;
  inset: 0;
}

.vtb-opciones--rejilla .vtb-opcion__elegir:focus-visible {
  outline-offset: -4px;
}

/* La foto: apaisada, de 120 px de alto como mucho, entera y sin recortar. */
.vtb-opciones--rejilla .vtb-opcion__mini,
.vtb-opcion__sin {
  width: 100%;
  height: auto;
  max-height: 120px;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: #161616;
}

/* «Sin …»: un icono donde las demás llevan la foto. */
.vtb-opcion__sin {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vtb-texto-tenue);
}

.vtb-opcion__sin .vtb-icono {
  width: 36px;
  height: 36px;
}

/* El check: blanco sobre un círculo azul, arriba a la izquierda, y solo en la
   elegida. Es el mismo elemento que hace de botón de radio en la lista. */
.vtb-opciones--rejilla .vtb-opcion__radio {
  display: none;
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  width: 20px;
  height: 20px;
  border: 0;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}

.vtb-opciones--rejilla .vtb-opcion__elegir[aria-pressed="true"] .vtb-opcion__radio {
  display: block;
  background: var(--vtb-azul);
}

.vtb-opciones--rejilla .vtb-opcion__radio::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 7px;
  width: 6px;
  height: 10px;
  border: solid #FFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.vtb-opciones--rejilla .vtb-opcion__cuerpo {
  flex: none;
}

.vtb-opciones--rejilla .vtb-opcion__nombre {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.vtb-opciones--rejilla .vtb-opcion__spec {
  font-size: 12px;
  line-height: 1.35;
}

/* «Incluida» en gris y el suplemento en azul claro: los colores son los de la
   lista, aquí solo cambian el tamaño y el peso. */
.vtb-opciones--rejilla .vtb-opcion__precio {
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

/* «Detalles» va en la línea del importe, a la derecha: una línea menos por
   tarjeta, que es lo que deja ver dos filas sin bajar. Sigue siendo un botón
   aparte, por encima de la capa que elige. */
.vtb-opciones--rejilla .vtb-opcion__detalles {
  position: absolute;
  right: 8px;
  bottom: 7px;
  z-index: 1;
  padding: 1px 0;
  border: 0;
  border-radius: 0;
  font-size: 12px;
  line-height: 1.35;
  text-decoration: underline;
}

/* En dos columnas —un móvil— la tarjeta puede ser demasiado estrecha para el
   importe y «Detalles» en la misma línea: ahí va debajo, como antes. */
@container (max-width: 479px) {
  .vtb-opciones--rejilla .vtb-opcion__elegir {
    padding-bottom: 2px;
  }

  .vtb-opciones--rejilla .vtb-opcion__detalles {
    position: relative;
    right: auto;
    bottom: auto;
    align-self: flex-start;
    margin: 0 8px 6px;
    padding: 2px 0;
  }
}

/* En la tarjeta, «Recomendado» va sobre la foto, arriba a la derecha: dentro
   del nombre se lo comería el corte a dos líneas. */
.vtb-opciones--rejilla .vtb-etiqueta {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  margin: 0;
  font-size: 10px;
}

/* «Recomendado»: fondo azul de la marca, texto blanco. */
.vtb-etiqueta {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--vtb-azul);
  color: #FFF;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---------- el detalle ---------- */

.vtb-detalle__foto {
  display: block;
  width: 100%;
  max-height: 360px;
  margin: 0 auto 14px;
  border-radius: 10px;
  background: #161616;
  object-fit: contain;
}

/* Los datos de la opción: «Medidas / 430 x 220 mm». */
.vtb-detalle__datos {
  margin: 0 0 12px;
  border-top: 1px solid #333;
}

.vtb-detalle__dato {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid #333;
}

.vtb-detalle__dato dt {
  margin: 0;
  font-weight: 400;
  color: var(--vtb-texto-tenue);
}

.vtb-detalle__dato dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
  color: var(--vtb-texto);
}

.vtb-detalle__nombre {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: #FFF;
}

.vtb-detalle__texto {
  margin: 0 0 10px;
  color: var(--vtb-texto-suave);
  overflow-wrap: break-word;
}

.vtb-detalle__texto--vacio,
.vtb-detalle__ref {
  font-size: 13px;
  color: var(--vtb-texto-tenue);
}

.vtb-detalle__ref {
  margin: 0;
}

/* ---------- un periférico ---------- */

.vtb-tarjeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 2px solid var(--vtb-borde);
  border-radius: 10px;
  background: var(--vtb-panel);
}

.vtb-tarjeta__foto {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
  background: #FFF;
}

.vtb-tarjeta__cuerpo {
  flex: 1 1 140px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.vtb-tarjeta__nombre {
  font-weight: 700;
  overflow-wrap: break-word;
}

.vtb-tarjeta__precio {
  color: var(--vtb-azul-texto);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.vtb-tarjeta .vtb-opcion__detalles {
  padding: 4px 0;
  border: 0;
}

.vtb-contador {
  flex: none;
  display: flex;
  align-items: center;
  border: 1px solid var(--vtb-borde);
  border-radius: 8px;
}

.vtb-contador__boton {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--vtb-texto);
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}

.vtb-contador__boton:disabled {
  color: #5A5A5A;
  cursor: not-allowed;
}

.vtb-contador__cifra {
  min-width: 28px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- la barra fija ---------- */

.vtb-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99990;
  border-top: 1px solid #3B3B3B;
  background: #1B1B1B;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.4);
}

/* El sitio que la página le deja a la barra, para que no tape el pie. */
body.vtb-con-barra {
  padding-bottom: 96px;
}

/* Con el panel abierto, lo de detrás no se desplaza. */
body.vtb-panel-abierto {
  overflow: hidden;
}

.vtb-barra__fila {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
}

.vtb-barra__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.vtb-barra__nombre {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.vtb-barra__estado {
  font-size: 12px;
  color: var(--vtb-texto-tenue);
}

.vtb-barra__desglose {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--vtb-azul-texto);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.vtb-barra__precio {
  flex: none;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px 8px;
  max-width: 46%;
}

.vtb-barra__iva {
  flex: 1 0 100%;
  text-align: right;
  font-size: 11px;
  color: var(--vtb-texto-tenue);
}

.vtb-barra__accion {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  max-width: 40%;
}

.vtb-barra__falta {
  font-size: 12px;
  color: var(--vtb-rojo);
  text-align: right;
}

.vtb-barra__falta:empty {
  display: none;
}

/* El desglose: se abre hacia arriba, encima de la barra. */
.vtb-desglose {
  max-width: 1200px;
  max-height: 50vh;
  margin: 0 auto;
  padding: 12px 16px 4px;
  overflow-y: auto;
  border-bottom: 1px solid #333;
  font-size: 13px;
}

.vtb-desglose__fila,
.vtb-desglose__cambios li,
.vtb-desglose__perifericos li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  color: var(--vtb-texto-suave);
}

.vtb-desglose__cambios,
.vtb-desglose__perifericos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vtb-desglose__perifericos:not(:empty) {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #3B3B3B;
}

.vtb-desglose__importe {
  flex: none;
  white-space: nowrap;
  color: var(--vtb-azul-texto);
  font-variant-numeric: tabular-nums;
}

.vtb-desglose__fila--descuento {
  color: var(--vtb-rojo);
}

.vtb-desglose__fila--total {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid #3B3B3B;
  color: #FFF;
  font-weight: 700;
}

/* ---------- la línea del carrito ----------
 *
 * El hook que pinta este bloque, `displayCartExtraProductActions`, es según el
 * núcleo «extra buttons to the product lines»: el tema lo deja en la columna de
 * la papelera, que mide lo que un botón. La 1.0.6 le puso `width: 100%` —que
 * es el 100 % de ESA columna— con `overflow-wrap: break-word` y un rótulo en
 * mayúsculas con `letter-spacing`: el resultado fue un título partido letra a
 * letra y la lista cortada.
 *
 * Aquí hay dos estados, y el primero no necesita JavaScript:
 *
 *   sin recolocar   un enlace corto, en una línea, que cabe en la columna de la
 *                   papelera. Al abrirlo, la lista sale en una caja flotante
 *                   de ancho propio, hacia la izquierda
 *   recolocado      `.vtb-cart-line--ancha`: el script lo ha puesto debajo del
 *                   nombre y del precio, y la lista va en el flujo, a todo el
 *                   ancho de la columna de información
 *
 * Y se neutraliza lo que el bloque pueda heredar de la zona de botones del
 * tema: sentido de la escritura, espaciado de letras, mayúsculas y cortes.
 */

.vtb-cart-line {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 8px 0 4px;
  font-size: 13px;
  font-weight: 400;
  writing-mode: horizontal-tb;
  letter-spacing: normal;
  text-transform: none;
  word-break: normal;
  overflow-wrap: normal;
  white-space: normal;
}

/* Sin recolocar, el enlace es más ancho que la columna de la papelera. Con el
   sentido del bloque de derecha a izquierda, lo que no cabe se sale hacia la
   IZQUIERDA —hacia la línea— y no por el borde de la pantalla. El texto de
   dentro sigue leyéndose de izquierda a derecha. */
.vtb-cart-line:not(.vtb-cart-line--ancha),
.vtb-cart-line:not(.vtb-cart-line--ancha) .vtb-cart-line__plegable {
  direction: rtl;
}

.vtb-cart-line:not(.vtb-cart-line--ancha) .vtb-cart-line__enlace,
.vtb-cart-line:not(.vtb-cart-line--ancha) .vtb-cart-line__lista {
  direction: ltr;
}

.vtb-cart-line--ancha {
  display: block;
  width: 100%;
}

.vtb-cart-line__enlace {
  display: inline-block;
  color: var(--vtb-azul-texto);
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.vtb-cart-line__enlace::-webkit-details-marker {
  display: none;
}

.vtb-cart-line__ocultar,
.vtb-cart-line__plegable[open] .vtb-cart-line__ver {
  display: none;
}

.vtb-cart-line__plegable[open] .vtb-cart-line__ocultar {
  display: inline;
}

.vtb-cart-line__lista {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  width: max-content;
  min-width: 260px;
  max-width: 86vw;
  margin: 6px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--vtb-borde);
  border-left: 3px solid var(--vtb-azul);
  border-radius: 9px;
  background: #1D1D1D;
  color: var(--vtb-texto-suave);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.vtb-cart-line--ancha .vtb-cart-line__lista {
  position: static;
  width: auto;
  min-width: 0;
  max-width: none;
  box-shadow: none;
}

/* Tres columnas, y son de la LISTA entera, no de cada fila —las filas son
   `display: contents`—: así todas comparten anchos y quedan alineadas.

     etiqueta    tan ancha como la más larga, y en una línea: NUNCA se parte
     lo elegido  lo que quede; si no cabe, baja de línea por los espacios
     suplemento  a la derecha, en la misma línea

   No hay `word-break` ni `hyphens` en ningún sitio. */
.vtb-cart-line__lista {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: 5px 14px;
  align-items: baseline;
}

.vtb-cart-line__fila {
  display: contents;
}

.vtb-cart-line__fila dt {
  margin: 0;
  font-weight: 400;
  color: var(--vtb-texto-tenue);
  white-space: nowrap;
}

.vtb-cart-line__opcion {
  margin: 0;
  font-weight: 700;
  color: var(--vtb-texto);
}

.vtb-cart-line__suplemento {
  margin: 0;
  text-align: right;
  font-weight: 700;
  color: var(--vtb-azul-texto);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Sin recolocar —sin script, o en un tema que no se reconoce— la lista es una
   caja que flota desde la columna de la papelera, y ahí no se sabe cuánto
   sitio hay: la etiqueta va en su línea y debajo lo elegido y su suplemento. */
.vtb-cart-line:not(.vtb-cart-line--ancha) .vtb-cart-line__lista {
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 0 12px;
}

.vtb-cart-line:not(.vtb-cart-line--ancha) .vtb-cart-line__fila dt {
  grid-column: 1 / -1;
  margin-top: 6px;
  white-space: normal;
}

/* Cuando el BLOQUE es estrecho —un móvil—, la etiqueta pasa a su propia línea
   y debajo van lo elegido y su suplemento. Se mide el bloque, no la ventana:
   en un escritorio con la columna estrecha tiene que pasar lo mismo. */
.vtb-cart-line--ancha {
  container-type: inline-size;
}

@container (max-width: 359px) {
  .vtb-cart-line__lista {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 0 12px;
  }

  .vtb-cart-line__fila dt {
    grid-column: 1 / -1;
    margin-top: 6px;
    white-space: normal;
  }
}

/* ---------- pantallas pequeñas ----------
 *
 * Las dos piezas pegadas a la ventana: el panel pasa a ocuparla entera y la
 * barra se queda con el total y el botón.
 */
@media (max-width: 767px) {
  .vtb-panel {
    width: 100%;
    border-left: 0;
  }

  .vtb-panel--ancho {
    max-width: 100%;
  }

  .vtb__title {
    font-size: 18px;
  }

  .vtb-barra__fila {
    gap: 10px;
    padding: 8px 12px;
  }

  .vtb-barra__nombre,
  .vtb-barra__estado,
  .vtb-barra .vtb-tachado,
  .vtb-barra .vtb-insignia {
    display: none;
  }

  .vtb-barra__precio {
    max-width: none;
  }

  .vtb-total--grande {
    font-size: 20px;
  }

  .vtb-barra .vtb-boton {
    padding: 10px 14px;
  }

  .vtb-barra__accion {
    max-width: 52%;
  }

  body.vtb-con-barra {
    padding-bottom: 84px;
  }

  .vtb-opcion {
    flex-wrap: wrap;
  }

  .vtb-opcion__elegir {
    flex: 1 1 100%;
  }

  .vtb-opcion__detalles {
    padding: 6px 10px;
  }
}