:root {
    --front-radios: 50px;
    --front-radios-sm: 20px;
}

/* La barra fija de abajo (total + "Continuar") usaba --front-cta-bg (azul,
   #2f6fd1); se pide el mismo naranja que ya trae el contador de descuento de
   arriba (--front-orange). Se redefine la variable en vez de tocar
   .sticky-cta directo porque el color del botón "Continuar" (fondo blanco,
   texto en este mismo tono) también depende de ella — cambiarla acá
   mantiene los dos sincronizados con un solo valor. */
body.tpl-plantilla-uno {
    --front-cta-bg: var(--front-orange);
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  margin-top: 8px !important;
}
.feature-item span {
  background: var(--front-primary-dark);
  color: #fff;
  font-weight: 700;
  font-size: .78rem;
  padding: .3rem 0.7rem !important;
  border-radius: 999px;
  white-space: nowrap;
  margin-bottom: -16px !important;
}

/* Tablet y móvil: los 4 íconos en una sola fila (el truco de márgenes
   negativos que arma el óvalo necesita el ancho holgado del desktop, así
   que acá se cae a una fila simple, centrada). El texto de cada uno no
   ocupa espacio fijo: se oculta por defecto y aparece flotando arriba del
   ícono recién al tocarlo (initFeatureItemTooltips en front.js agrega/saca
   la clase .is-active) — position:relative en .feature-item es lo que le
   da un ancla al span absoluto. */
@media (max-width: 991.98px) {
  .feature-strip-track {
    border: none !important;
    border-radius: 0 !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: clamp(.75rem, 6vw, 2.5rem) !important;
    padding: 0 !important;
  }
  .feature-item {
    margin-top: 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    position: relative;
    cursor: pointer;
  }
  .feature-item img {
    width: 34px !important;
    height: 34px !important;
  }
  .feature-item span {
    position: absolute !important;
    bottom: calc(100% + 10px) !important;
    left: 50% !important;
    margin-bottom: 0 !important;
    transform: translateX(-50%) translateY(4px);
    white-space: nowrap !important;
    max-width: none !important;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 5;
  }
  .feature-item.is-active span {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}


.related-card {
  max-width: 920px;
  margin: 0 auto;
  /* Gris ahora del lado del texto (antes detrás de la imagen): con fondo
     blanco propio en la foto (ya no transparente) el gris detrás quedaba
     como un borde raro. El zigzag de tarjetas pares también se invirtió a
     juego (resources/css/stylefront.css, misma lógica). Blanco puro al 50%
     (no gris sólido): degradé continuo claro → blanco → gris en todo el
     ancho, en vez de aplanarse a partir de la mitad. */
  background: linear-gradient(to right, #f7f7f7 0%, #fff 50%, #ccc 100%);
  border-radius: var(--front-radios) !important;
  box-shadow: 0 4px 16px #00000014;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 1.25rem !important;
}

/* Con padding en el card, la imagen ya no toca los bordes redondeados
   externos — le doy su propio radio más chico para que no se vea como un
   rectángulo suelto flotando adentro. */
.related-card-media {
  border-radius: var(--front-radios-sm) !important;
  overflow: hidden;
}

/* La imagen debe ocupar toda la altura del card, no una altura fija propia:
   .related-card-main es flex con align-items:stretch por defecto (ver
   stylefront.css), así que basta con NO ponerle una altura fija a
   .related-card-media — se estira sola hasta igualar a .related-card-info,
   que es la que manda la altura real (texto + miniaturas). Antes tenía
   height:300px fijo, y cuando el texto ocupaba más que eso quedaba una
   franja de card vacía debajo de la imagen. */
.related-card-media {
  height: auto !important;
  min-height: 0 !important;
  align-self: stretch;
}
.related-card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Título del producto en 2 líneas (la primera palabra aparte del resto, ver
   $relatedNameParts en el blade): la primera en gris oscuro sin negrita, el
   resto —el nombre "propio" del producto— en naranja, negrita y bien grande,
   igual que la referencia. display:block en los spans para forzar el salto
   de línea entre ambos sin importar el ancho disponible. */
.related-card-name {
  display: block !important;
}
.related-card-name-lead {
  display: block;
  color: #1e2430;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.2;
}
.related-card-name-highlight {
  display: block;
  color: var(--front-orange, #ff6a00) !important;
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.15;
}

/* Descripción más grande, igual que la referencia. */
.related-card-desc {
  font-size: 1.1rem !important;
}

/* Botón "añadir a carrito": naranja y con texto más grande. */
.related-card-add-btn {
  background: var(--front-orange, #ff6a00) !important;
  font-size: 1rem !important;
  padding: .6rem 1.2rem !important;
}

/* Miniaturas sin recorte: contain (no cover) muestra la foto completa dentro
   del cuadro en vez de recortar los bordes para llenarlo. Con hasta 5
   miniaturas (frontal/espalda/costado/detalle 1/detalle 2) deben entrar
   siempre en una sola fila — nowrap explícito + 84px (en vez de los 100px de
   antes) es lo que cabe sin desbordar ni en la columna de info más angosta
   (tablet, con la tarjeta ya achicada al ancho del viewport). */
.related-card-thumbs {
  flex-wrap: nowrap !important;
}
.related-card-thumb {
  width: 84px !important;
  height: 84px !important;
  max-width: 84px !important;
}
.related-card-thumb img {
  object-fit: contain !important;
}

/* En pantallas angostas la columna de texto se achica junto con la tarjeta,
   pero las miniaturas de 100px no — terminaban ocupando casi todo el ancho
   de esa columna y quedando pegadas contra la imagen principal. Achicarlas
   acá les da aire sin tocar el tamaño más grande de desktop/tablet. */
@media (max-width: 575.98px) {
  /* Más alta que ancha a propósito: junto con object-fit:cover de abajo, esto
     recorta los costados de la foto en vez de mostrarla completa (contain) —
     se ve más grande/zoomeada dentro del mismo espacio disponible, que es
     justo lo que se pidió ("se ven muy pequeñas"). Sólo en móvil: en
     desktop/tablet se sigue viendo la foto completa (84px, contain, arriba). */
  .related-card-thumb {
    width: 68px !important;
    height: 100px !important;
    max-width: 68px !important;
  }
  .related-card-thumb img {
    object-fit: cover !important;
  }
  .related-card-thumbs {
    gap: .4rem !important;
  }

  /* Solo en móvil: la fila imagen+info pasa a columna (imagen arriba, a todo
     el ancho); dentro de la columna de info, las miniaturas se reordenan con
     `order` para que queden pegadas debajo de la imagen, antes que el
     título/descripción — sin tocar el HTML ni el layout de tablet/desktop. */
  .related-card-main {
    flex-direction: column !important;
  }
  /* La altura fija de 300px (pensada para el layout de fila en desktop/tablet)
     es lo que achicaba la foto en móvil: con object-fit:contain, una foto en
     formato retrato dentro de una caja de 100% ancho pero solo 300px de alto
     queda acotada por el alto, no por el ancho, y se ve angosta con aire a
     los costados. Alto automático = la foto escala a su proporción real
     ocupando todo el ancho de la tarjeta. */
  .related-card-media {
    width: 100% !important;
    height: auto !important;
  }
  .related-card-media img {
    height: auto !important;
  }
  .related-card-thumbs-wrap {
    order: -1;
    width: 100%;
    margin-top: 0 !important;
    padding-bottom: .9rem !important;
  }
  .related-card-thumbs {
    justify-content: center;
  }

  /* Más de 4 fotos: no entran en una sola fila a este ancho (68px c/u) sin
     desbordar — en vez de partirse en una segunda fila (bloque roto), la tira
     se vuelve un carrusel con scroll horizontal + snap, y aparecen flechas a
     los costados (initRelatedCardThumbsCarousel en front.js mueve el scroll).
     Solo aplica con .has-carousel (>4 miniaturas, ver product-card.blade.php)
     y solo en este breakpoint — en desktop/tablet las 5 miniaturas ya entran
     holgadas en una fila (84px, ver arriba) y no hace falta ocultar nada. */
  .related-card-thumbs-wrap.has-carousel .related-card-thumbs {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-width: 0;
    scrollbar-width: none;
  }
  .related-card-thumbs-wrap.has-carousel .related-card-thumbs::-webkit-scrollbar {
    display: none;
  }
  .related-card-thumbs-wrap.has-carousel .related-card-thumb {
    scroll-snap-align: start;
  }
  .related-card-thumbs-wrap.has-carousel .related-card-thumbs-nav {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    color: var(--front-orange, #ff6a00);
    font-size: 1rem;
    line-height: 1;
    z-index: 2;
  }

  /* El degradé (claro/gris) es cosa de escritorio — en móvil la tarjeta va
     apilada (imagen arriba, texto abajo), y a ese ancho el degradé se ve
     como una franja de color sin mucho sentido. Fondo sólido blanco en vez
     de degradé, sin distinción par/impar (el zigzag ya no aplica en móvil,
     column !important le gana al row-reverse igual que antes). */
  .related-card {
    background: #fff !important;
    /* Menos padding = más ancho útil para .related-card-media (100% del
       card en móvil, ver arriba) = la foto se ve más grande. Solo acá: en
       desktop/tablet el padding de 1.25rem (base, arriba en el archivo)
       sigue igual. */
    padding: .25rem !important;
  }
}

/* En móvil, con fotos en formato retrato pero menos alargadas que la propia
   pantalla, "contain" siempre deja franjas grises arriba/abajo — es aritmética
   del aspect ratio, no un bug de centrado, y no hay forma de eliminarlas sin
   recortar la foto. En vez de pelear contra eso, se asume: la foto se muestra
   como una tarjeta centrada (fondo claro, esquinas redondeadas, sombra) del
   tamaño real de la imagen, no un rectángulo flotando en un vacío gris — así
   el "espacio" alrededor se lee como marco intencional, no como hueco roto.
   Ningún pixel de la foto se pierde. */
@media (max-width: 575.98px) {
  .lg-outer .lg-img-wrap {
    top: 47px !important;
    bottom: 44px !important;
    height: auto !important;
  }
  .lg-sub-html {
    padding: 8px 30px !important;
  }
  .lg-outer .lg-image {
    background: linear-gradient(135deg, #ffffff, #f2f2f4) !important;
    border-radius: 20px !important;
    padding: 18px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
    box-sizing: border-box !important;
  }
}