/* ================================================================ */
/* CSS UNIFICADO Y FINAL                                            */
/* Basado en la estructura que funciona y con las correcciones.     */
/* ================================================================ */

:root {
  --desktop-col-width: 420px;
  /* La tira de miniaturas: angosta a proposito, para que se lea como miniaturas. */
  --tira-ancho: 130px;

  /* AJUSTA ESTOS VALORES A LA ALTURA REAL DE TU HEADER */
  --header-height-desktop: 80px;
  --header-height-mobile: 60px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

/* Contenedor principal de la página */
.page-wrapper {
  padding-top: 0;
}

.product-layout {
  max-width: calc(var(--desktop-col-width) * 3 + 4rem);
  margin: 0 auto;
  padding: 1rem;
}

/* === ESTILOS BASE (Móvil) === */
.product-layout {
  display: flex;
  flex-direction: column;
}

/* La primera columna (imagen principal fija) está oculta en móvil */
#col1-placeholder {
  display: none;
}

#swiper-col {
  width: 100%;
  aspect-ratio: 3 / 4;
}

/* EN MOVIL LA COLUMNA GRANDE NO EXISTE y la unica foto se muestra en la tira, asi que la forma
   la tiene que tomar ella. La variable vive en .product-layout justamente para que la hereden
   las dos columnas y no haya que repetir la cuenta. */
.product-layout--una-foto #swiper-col {
  aspect-ratio: var(--marco-proporcion, 3 / 4);
}

#details-col {
  padding-top: 2rem;
}

/* === VISTA TABLET (>= 768px) === */
@media (min-width: 768px) {
  .product-layout {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
  }

  #swiper-col {
    width: 60%;
    max-width: 500px;
    aspect-ratio: 3 / 4;
  }

  #details-col {
    width: 40%;
    max-width: 450px;
    padding: 0 1rem;
  }
}

/* === VISTA ESCRITORIO (>= 1200px) === */
@media (min-width: 1200px) {
  .product-layout {
    flex-wrap: nowrap;
  }

  /* LA PRINCIPAL SE QUEDA CON EL ANCHO LIBRE Y LA TIRA SE ACHICA.
     Antes las dos columnas median lo mismo (420px) y la de la derecha se leia como una segunda
     imagen principal, no como miniaturas: con 9 fotos se veian 2 y no habia como saber que
     habia 7 mas. El mockup del cliente pide una tira angosta con varias miniaturas apiladas
     que scrollean. Y de paso se arregla lo otro: al no tener que igualar altura con la tira,
     la principal puede tomar la forma de la foto y desaparecen las bandas grises. */
  /* MANDA EL ALTO Y EL ANCHO SALE DE LA FORMA, en los dos casos (con tira y sin ella).
     Al reves no funciona: fijando el ancho y topeando el alto, el marco deja de respetar la
     proporcion y la foto vuelve a quedar con bandas. El tope existe porque una foto cuadrada
     sin limite daba 840px de alto en una pantalla de 723 y se salia. */
  #col1-placeholder {
    display: block;
    flex: 0 0 auto;
    height: min(68vh, 620px);
    width: auto;
    max-width: calc(var(--desktop-col-width) * 1.6);
    /* La variable la escribe PHP cuando la foto manda; si no vino, 3/4 como siempre. */
    aspect-ratio: var(--marco-proporcion, 3 / 4);
    align-self: flex-start;
  }

  /* LA TIRA LA MANEJA SWIPER, no un overflow encima. Antes esta regla le ponia
     overflow-y:auto y transform:none !important al wrapper para simular el scroll: eso es
     pelearse con la libreria, deja la barra gris del sistema a la vista y queda feo. Swiper ya
     sabe hacer esto con slidesPerView + direction vertical + flechas; aca solo se le dice
     cuanto mide la columna. */
  #swiper-col {
    flex: 0 0 var(--tira-ancho);
    width: var(--tira-ancho);
    aspect-ratio: auto;
    height: min(68vh, 620px);
    align-self: flex-start;
    position: relative;
  }

  #swiper-col .swiper-slide {
    border: 2px solid transparent;
    border-radius: .25rem;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s ease;
  }

  #swiper-col .swiper-slide:hover {
    border-color: #c9c9c9;
  }

  /* Cual se esta viendo en grande. Sin esto, al pasar una foto a la izquierda no queda ninguna
     senal de cual elegiste. */
  #swiper-col .swiper-slide.is-elegida {
    border-color: #222;
  }

  /* Los puntitos van a la IZQUIERDA de la tira, centrados a lo alto: quedan entre la foto
     grande y las miniaturas, sin taparle nada a ninguna de las dos. */
  #swiper-col > .swiper-pagination {
    position: absolute;
    left: -1.1rem;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    z-index: 2;
  }

  #swiper-col .swiper-pagination .swiper-pagination-bullet {
    margin: 0;
  }

  #details-col {
    width: var(--desktop-col-width);
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
  }
}

/* === ESTILOS DE COMPONENTES (sin cambios mayores) === */
.media-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #f8f8f8;
  cursor: pointer;
}

.media-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ====================================================================================
   "COMPLETA": la foto no se corta y el marco toma SU forma.

   Solo se aplica cuando la tienda lo eligio (Opciones de Tienda) Y la imagen tiene sus
   medidas guardadas. La proporcion llega desde PHP en --marco-proporcion, ya topeada
   entre 3/4 y 16/9, asi que el alto nunca se dispara.

   OJO: esta clase NUNCA va sobre el marco de un video. El iframe de YouTube esta
   encuadrado con un scale() calibrado a mano contra la caja 3/4; cambiarle la forma al
   contenedor lo dejaria con bandas negras o mal cortado. El video se sirve por su propia
   regla, mas abajo, y la vista no le pone esta clase.
   ==================================================================================== */
.media-wrapper--completa {
  background-color: #f6f6f4;
}

.media-wrapper--completa img {
  object-fit: contain;
}

/* La tira sigue la misma decision que la foto grande: si la tienda eligio no cortar, aca
   tampoco se corta. Que la principal se vea entera y la miniatura de al lado recortada seria
   contradecirse en la misma pantalla. */
.product-layout--fotos-completas .swiper-slide {
  background-color: #f6f6f4;
}

.product-layout--fotos-completas .swiper-slide img {
  object-fit: contain !important;
}

/* El marco adopta la forma de la foto. PHP escribe --marco-proporcion en el propio
   #col1-placeholder solo cuando corresponde; si no llego, el fallback es el 3/4 de siempre.
   Se resuelve con la variable y no con un selector :has() a proposito: asi no depende de
   soporte del navegador y el que lee el HTML ve de una por que ese marco tiene esa forma. */
#col1-placeholder {
  aspect-ratio: var(--marco-proporcion, 3 / 4);
}

.video-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(1.5);
  border: 0;
  pointer-events: none;
  object-fit: cover;
}

/* EL VIDEO EN LA TIRA (#1503): su miniatura con el boton de play, antes de las fotos. Tocandola
   vuelve el video al marco grande; en el celular, donde no hay marco grande, se reproduce en la
   misma diapositiva. Mientras se ve una foto en grande, el video queda oculto y parado. */
.swiper-slide--video {
  position: relative;
}

.swiper-slide__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 1.1rem;
  pointer-events: none;
}

.swiper-slide--video.is-reproduciendo > img,
.swiper-slide--video.is-reproduciendo .swiper-slide__play {
  visibility: hidden;
}

.media-wrapper img[hidden],
.video-iframe[hidden] {
  display: none;
}

@media (min-width: 1200px) {
  #swiper-col .swiper-slide__play {
    width: 2rem;
    height: 2rem;
    font-size: .75rem;
  }
}

/* UNA SOLA FOTO: no hay tira. En desktop la columna de miniaturas desaparece y la foto se
   queda con el ancho de las dos, que es el caso A de los mockups. En movil y en tablet la
   columna grande esta oculta por diseno, asi que la tira SI se muestra (lleva la unica foto
   adentro). El corte es 1200, el mismo en que aparece la columna grande: con 992 quedaba un
   tramo (992 a 1199) sin ninguna de las dos y el producto sin foto (#1503). */
@media (min-width: 1200px) {
  .product-layout--una-foto #swiper-col {
    display: none;
  }

  /* Sin tira la principal puede estirarse mas y queda centrada; el alto y la forma ya los
     define la regla general de #col1-placeholder, que vale para los dos casos. */
  .product-layout--una-foto #col1-placeholder {
    max-width: calc(var(--desktop-col-width) * 2 + 2rem);
    margin-inline: auto;
  }
}

.swiper {
  width: 100% !important;
  height: 100% !important;
}

.swiper-wrapper {
  height: 100% !important;
}

/* El width/height 100% es para el CARRUSEL (una foto por vez, movil). En la tira la altura la
   reparte Swiper segun slidesPerView, por eso va acotado y no global. */
.swiper-slide {
  overflow: hidden;
  background-color: #f8f8f8;
}

#swiper-col .swiper-slide {
  width: 100%;
}

.swiper-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  cursor: pointer;
}

/* #ccc sobre blanco no se ve. El punto tiene que leerse sin esfuerzo, porque es la unica
   senal de cuantas fotos hay. */
.swiper-pagination-bullet {
  background: #9a9a9a !important;
  opacity: 1 !important;
  width: 7px;
  height: 7px;
}

.swiper-pagination-bullet-active {
  background: #111 !important;
  width: 9px;
  height: 9px;
}

.product-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.product-price {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.accordion-header {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  margin-bottom: 1rem;
  color: #555;
  font-size: 0.8rem;
  line-height: 1.4;
}

.accordion-content.open {
  max-height: 300px;
}

.toggle-sign {
  font-weight: 700;
}

.product-attributes {
  margin-bottom: 1.5rem;
}

.atributo-block {
  margin-bottom: 1rem;
}

.atributo-label {
  font-weight: 600;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 0.5rem;
}

/* === MODO BOTONES (flex wrap) === */
.atributo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}

.btn-atributo {
  padding: 6px 10px;
  border: 1px solid #111;
  background-color: #fff;
  color: #111;
  cursor: pointer;
  font-size: 0.8rem;
  text-align: center;
  transition: all 0.15s ease;
}

.btn-atributo:hover {
  background-color: #f5f5f5;
  border-color: #000;
}

.btn-atributo.selected {
  background-color: #111;
  color: #fff;
}

/* === MODO DROPDOWN (para muchos valores) === */
.atributo-dropdown-wrapper {
  position: relative;
  width: 100%;
  max-width: 300px;
}

.atributo-dropdown {
  position: relative;
}

.dropdown-trigger {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #111;
  background-color: #fff;
  color: #111;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.15s ease;
}

.dropdown-trigger:hover {
  background-color: #f5f5f5;
}

.dropdown-trigger.open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.dropdown-text {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-arrow {
  margin-left: 10px;
  transition: transform 0.3s ease-in-out;
  font-size: 0.75rem;
}

.dropdown-trigger.open .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu-custom {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #111;
  border-top: none;
  max-height: 280px;
  z-index: 100;
  /* Transición suave estilo sidebar */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease-in-out,
              transform 0.3s ease-in-out,
              visibility 0.3s ease-in-out;
}

.dropdown-menu-custom.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-search {
  padding: 8px;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  background: #fff;
}

.dropdown-search-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  font-size: 0.85rem;
  outline: none;
}

.dropdown-search-input:focus {
  border-color: #111;
}

.dropdown-options {
  max-height: 220px;
  overflow-y: auto;
}

.dropdown-option {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background-color 0.2s ease-in-out,
              color 0.2s ease-in-out;
  border-bottom: 1px solid #f5f5f5;
}

.dropdown-option:last-child {
  border-bottom: none;
}

.dropdown-option:hover {
  background-color: #111;
  color: #fff;
}

.dropdown-option.selected {
  background-color: #111;
  color: #fff;
}

.dropdown-option.hidden {
  display: none;
}

.stock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

/* La etiqueta de disponibilidad es la del KDS, igual en toda la tienda (#1021): tienda-kds.css. */
.stock-label { margin: 0; }
.detalle-presentacion-opt .tienda-stock { margin-left: .35rem; }

.quantity-wrapper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #000;
  padding: 4px 12px;
  gap: 8px;
}

.quantity-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

#cantidad {
  width: 40px;
  text-align: center;
  border: none;
  font-size: 1rem;
  outline: none;
  -moz-appearance: textfield;
}

#cantidad::-webkit-inner-spin-button,
#cantidad::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn-primario {
  margin-top: auto;
  border: 1px solid #000;
  background-color: transparent;
  color: #000;
  padding: 10px 24px;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

.btn-primario:hover {
  background-color: #000;
  color: #fff;
}

.modal-dialog {
  max-width: 90vw;
}

.modal-body {
  padding: 0;
}

.zoom-container {
  width: 100%;
  height: 80vh;
  overflow: hidden;
  position: relative;
}

#modalImg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* === BOTONES DE NAVEGACIÓN SWIPER === */
.swiper-button-next,
.swiper-button-prev {
  color: #000 !important;
  background: rgba(255, 255, 255, 0.7);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ocultar por defecto en todas las vistas */
  display: none;
}

/* Mostrar solo en móvil y tablet (horizontal) */
@media (max-width: 1199px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: flex;
  }
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 20px !important;
  font-weight: bold;
}

/* Posicionamiento vertical (desktop) - ahora ocultos */
.swiper-vertical .swiper-button-next,
.swiper-vertical .swiper-button-prev {
  left: 50%;
  transform: translateX(-50%);
}

.swiper-vertical .swiper-button-next {
  top: 10px;
  bottom: auto;
}

.swiper-vertical .swiper-button-prev {
  top: auto;
  bottom: 10px;
}

/* Posicionamiento horizontal (mobile/tablet) */
.swiper-horizontal .swiper-button-next {
  right: 10px;
}

.swiper-horizontal .swiper-button-prev {
  left: 10px;
}

/* ===== Sticky CTA mobile ===== */
.sticky-add-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #fff; border-top: 1px solid #000;
  padding: .65rem .9rem env(safe-area-inset-bottom, .65rem);
  display: flex; align-items: center; gap: .85rem;
  z-index: 1040;
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  animation: stickyUp .25s ease;
}
@keyframes stickyUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sticky-add-bar__info { flex: 1; min-width: 0; }
.sticky-add-bar__name {
  font-size: .78rem; color: #6c757d;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sticky-add-bar__price { font-size: 1.05rem; font-weight: 700; color: #000; margin-top: 1px; }
.sticky-add-bar__cta {
  background: #000; color: #fff; border: 0;
  padding: .75rem 1.4rem; font-size: .85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  cursor: pointer; transition: background .15s ease;
}
.sticky-add-bar__cta:hover { background: #333; }
.sticky-add-bar__cta:disabled { background: #999; cursor: not-allowed; }
@media (min-width: 769px) { .sticky-add-bar { display: none !important; } }

/* ===== Opiniones / reviews ===== */
.dts-reviews { background: #fff; border-top: 2px solid #000; }
.dts-reviews__header { display: flex; justify-content: space-between; align-items: center; padding-bottom: .75rem; border-bottom: 1px solid #e5e5e5; margin-bottom: 1.25rem; flex-wrap: wrap; gap: .5rem; }
.dts-reviews__title { font-size: 1.15rem; font-weight: 700; margin: 0; color: #000; letter-spacing: -.3px; }
.dts-reviews__avg { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.dts-reviews__avg-stars { color: #f4b400; letter-spacing: 1px; font-size: 1rem; }
.dts-reviews__avg-num { font-weight: 700; }
.dts-reviews__avg-count { color: #6c757d; font-size: .8rem; }
.dts-reviews__layout { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; }
@media (max-width: 768px) { .dts-reviews__layout { grid-template-columns: 1fr; } }
.dts-reviews__empty { color: #6c757d; font-size: .9rem; margin: 0; }
.dts-review { padding: 1rem 0; border-bottom: 1px solid #f0f0f0; }
.dts-review:last-child { border-bottom: none; }
.dts-review__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .25rem; }
.dts-review__name { font-weight: 600; color: #000; font-size: .9rem; }
.dts-review__stars { color: #f4b400; letter-spacing: 1px; font-size: .9rem; }
.dts-review__date { color: #6c757d; font-size: .75rem; margin-left: auto; }
.dts-review__titulo { font-weight: 600; margin: .15rem 0; font-size: .9rem; }
.dts-review__comentario { color: #333; font-size: .88rem; line-height: 1.45; margin: 0; }
.dts-reviews__form { background: #fafafa; border: 1px solid #e5e5e5; padding: 1.1rem 1rem; }
.dts-reviews__form-title { font-size: 1rem; font-weight: 700; margin: 0 0 .85rem; }
.dts-reviews__field { margin-bottom: .75rem; }
.dts-reviews__field label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; color: #6c757d; margin-bottom: .25rem; font-weight: 600; }
.dts-reviews__field input, .dts-reviews__field textarea { width: 100%; padding: .5rem .7rem; font-size: .9rem; border: 1px solid #ccc; background: #fff; }
.dts-reviews__field input:focus, .dts-reviews__field textarea:focus { outline: none; border-color: #000; }
.dts-star-input { display: flex; gap: .15rem; }
.dts-star { background: none; border: 0; color: #ddd; font-size: 1.4rem; cursor: pointer; padding: 0 .15rem; line-height: 1; transition: color .1s ease; }
.dts-star:hover, .dts-star.is-active { color: #f4b400; }
.dts-reviews__submit { background: #000; color: #fff; border: 0; padding: .65rem 1.2rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; width: 100%; }
.dts-reviews__submit:hover { background: #333; }
.dts-reviews__submit:disabled { background: #999; cursor: not-allowed; }
.dts-reviews__msg { margin-top: .65rem; font-size: .85rem; }
.dts-reviews__msg.is-ok { color: #1a7c3a; }
.dts-reviews__msg.is-error { color: #c0392b; }

/* ===== Vistos recientemente ===== */
.recently-viewed { background: #fff; border-top: 2px solid #000; margin-top: 2rem; }
.recently-viewed__header { display: flex; flex-direction: column; margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid #e5e5e5; }
.recently-viewed__title { font-size: 1.15rem; font-weight: 700; color: #000; letter-spacing: -.3px; margin: 0; }
.recently-viewed__sub { font-size: 0.7rem; color: #6c757d; text-transform: uppercase; letter-spacing: 1px; margin-top: .15rem; }
.recently-viewed__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.rv-item { display: flex; flex-direction: column; border: 1px solid #e5e5e5; background: #fff; text-decoration: none; color: #000; transition: border-color .15s ease, transform .15s ease; overflow: hidden; }
.rv-item:hover { border-color: #000; color: #000; transform: translateY(-2px); }
.rv-item__img-wrap { width: 100%; aspect-ratio: 1 / 1; background: #fafafa; overflow: hidden; }
.rv-item__img { width: 100%; height: 100%; object-fit: contain; padding: .35rem; }
.rv-item__info { padding: .5rem .6rem .6rem; flex: 1; display: flex; flex-direction: column; }
.rv-item__name { font-size: 0.75rem; font-weight: 500; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .25rem; min-height: 1.9em; }
.rv-item__price { font-size: 0.85rem; font-weight: 700; margin-top: auto; }
@media (max-width: 991px) { .recently-viewed__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .recently-viewed__grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; } }

/* ===== Precio bloqueado (requiere login / vitrina) ===== */
.product-price-locked {
  color: #6c757d;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.product-price-locked i { font-size: .9rem; }
.precio-login-link {
  color: #000;
  font-weight: 700;
  text-decoration: underline;
  font-size: .9rem;
}
.precio-login-link:hover { color: #333; }

/* Ubicación en el catálogo: la ficha dejaba al que compra sin saber de qué marca o rubro
   venía el producto ni cómo volver. Mismo tono que la banda del catálogo, sin migas. */
.prod-ruta {
  padding: 14px 24px 0;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8a8a8a;
}
.prod-ruta a {
  color: #8a8a8a;
  text-decoration: none;
}
.prod-ruta a:hover {
  color: #000;
  text-decoration: underline;
}
.prod-ruta__sep {
  margin: 0 6px;
  color: #cfcfcf;
}
@media (max-width: 767.98px) {
  .prod-ruta { padding: 12px 16px 0; }
}


/* Lo que antes venía en style="" en la ficha (#1000). */
.detalle-al-pie { margin-top: auto; }
.btn-primario--enlace { display: block; text-align: center; text-decoration: none; }
.detalle-zoom { border: none; background: #f8f8f8; }

/* Formas de venta: los mismos botones que las variantes (.btn-atributo), con el precio abajo. */
.detalle-presentaciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.detalle-presentaciones .btn-atributo { display: inline-flex; flex-direction: column; align-items: center; }
.detalle-presentaciones .btn-atributo small { font-size: .72rem; opacity: .8; }
.detalle-presentaciones .btn-atributo:disabled { opacity: .45; cursor: not-allowed; }
.detalle-presentaciones__equivale { display: block; margin-top: .25rem; color: #6c757d; }
.detalle-presentaciones__equivale:empty { display: none; }

/* El precio con oferta en la ficha, con los tamaños que tenía en línea. */
.product-price .precio-oferta__actual { font-size: 1.5rem; }
.product-price .precio-oferta__antes { font-size: 1rem; }
.product-price .precio-oferta__off { font-size: .75rem; }
.btn-primario .ds-loader { margin-right: .4rem; }