/* Skin de marca para el Quick View (posicionamiento y mecánica de popup
   vienen de luna-core/quickView.css; acá solo se reusan los mismos tokens
   y estilos que ya usa la PDP en online-offers/view.css). */

.quickViewPopupTotalContainer {
  border-radius: 12px;
  background-color: var(--web-background);
  box-shadow: 0 12px 35px rgb(0 0 0 / 14%);
}
.qvSlick.slider-for {
  margin-bottom: 0;
  width: 100%;
  margin-left: 0;
  grid-template-columns: 1fr;
}
/* La foto no se adaptaba bien porque .qvSlick comparte la clase .slider-for
   con la galería de la PDP: online-offers/view.css le impone su propio
   aspect-ratio (671/895 en desktop, 359/479 en mobile) y un alto:100% en
   toda la cadena de slick que termina midiendo distinto al 90vh/630px que
   calcula .qvImage por su cuenta (el figure/slick queda más alto o más bajo
   que la imagen real). */

/* Desktop (>1100px): acá .quickViewPopupInfoContainer sí tiene un alto
   definido (100% del popup, fijado por el core), así que alcanza con
   reconstruir la cadena en % de arriba hacia abajo para que cada nivel
   herede ese alto real en vez de calcular su propio aspect-ratio/vh. */
@media screen and (min-width: 1101px) {
  #quickViewPopupContainer .qvLeftColumn {
    height: 100%;
  }

  #quickViewPopupContainer .qvSlick.slider-for {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  #quickViewPopupContainer .qvImageContainer,
  #quickViewPopupContainer .qvVideoContainer,
  #quickViewPopupContainer .qvSlick .slick-list,
  #quickViewPopupContainer .qvSlick .slick-track,
  #quickViewPopupContainer .qvSlick .slick-slide,
  #quickViewPopupContainer .qvSlick .slick-slide > div {
    width: 100%;
    height: 100%;
  }

  #quickViewPopupContainer .qvImage,
  #quickViewPopupContainer .qvVideoContainer video,
  #quickViewPopupContainer .qvVideoContainer .videoComponentPlaceholder {
    height: 100%;
    max-height: none;
  }
}

/* 538px-1100px: acá el propio core apila las columnas y pasa
   .quickViewPopupInfoContainer a height:auto, así que un % ya no sirve de
   nada (un alto en % contra un ancestro con alto auto no se puede resolver
   y el navegador lo ignora). Por eso .qvSlick termina dependiendo pura y
   exclusivamente del aspect-ratio heredado de la PDP, que crece con el
   ancho y deja un hueco por debajo de la imagen (tope en 630px). Se le da
   a toda la cadena un alto fijo propio (mismo criterio que .qvImage en
   desktop) en vez de depender de un % o de ese aspect-ratio ajeno. */
@media screen and (max-width: 1100px) and (min-width: 538px) {
  #quickViewPopupContainer .qvSlick.slider-for,
  #quickViewPopupContainer .qvImageContainer,
  #quickViewPopupContainer .qvVideoContainer,
  #quickViewPopupContainer .qvSlick .slick-list,
  #quickViewPopupContainer .qvSlick .slick-track,
  #quickViewPopupContainer .qvSlick .slick-slide,
  #quickViewPopupContainer .qvSlick .slick-slide > div {
    aspect-ratio: auto;
    height: 90vh;
    max-height: 630px;
  }

  #quickViewPopupContainer .qvImage,
  #quickViewPopupContainer .qvVideoContainer video,
  #quickViewPopupContainer .qvVideoContainer .videoComponentPlaceholder {
    height: 100%;
    max-height: none;
  }

  /* Combo: mismo criterio que ya usa el core (65vh, sin tope en px). La
     clase quickViewComboPopupContainer la agrega el JS al propio
     #quickViewPopupContainer, no a un ancestro nuevo. */
  #quickViewPopupContainer.quickViewComboPopupContainer .qvSlick.slider-for,
  #quickViewPopupContainer.quickViewComboPopupContainer .qvImageContainer,
  #quickViewPopupContainer.quickViewComboPopupContainer .qvVideoContainer,
  #quickViewPopupContainer.quickViewComboPopupContainer .qvSlick .slick-list,
  #quickViewPopupContainer.quickViewComboPopupContainer .qvSlick .slick-track,
  #quickViewPopupContainer.quickViewComboPopupContainer .qvSlick .slick-slide,
  #quickViewPopupContainer.quickViewComboPopupContainer .qvSlick .slick-slide > div {
    height: 65vh;
    max-height: none;
  }
}

#qvLoginCloseDiv {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 8px;
  top: 8px;
  color: var(--base);
  font-size: 20px;
  line-height: 1;
}

/* Flechas de la galería: mismo círculo que el wishlist de la PDP para que
   se lean bien sobre la foto. */
.qvLeftArrow,
.qvRightArrow {
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--base-aux);
}

.qvLeftArrowImg,
.qvRightArrowImg {
  width: 7px;
  filter: var(--icons-invert);
}

.qvProductName {
  color: var(--base);
  font-size: 22px;
  font-weight: 400;
  line-height: 22px;
  border-bottom: 1px solid var(--lines-border-color);
}

.priceRequest,
.priceGreaterThan {
  color: var(--base);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.qvPriceContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.qvPrice {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--base);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.qvoldPrice {
  margin-right: 0;
  color: var(--base);
  font-weight: 400;
  opacity: 0.5;
  text-decoration: line-through;
}

.qvoldPrice::before {
  content: none;
}

.qvbankPriceRow {
  margin: 8px 12px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.qvbankPriceImg {
  width: auto;
  max-width: 54px;
  height: 18px;
  object-fit: contain;
}

.qvDescription {
  color: var(--base);
  font-size: 12px;
  line-height: 20px;
  opacity: 0.8;
}

.qvViewProduct {
  border-bottom: 1px solid var(--base);
  color: var(--base);
  font-size: 12px;
  opacity: 0.8;
}

.qvSpecGroupTitle {
  color: var(--base);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
}

/* #quickViewPopupContainer de más en cada selector de acá para abajo:
   quickView.css (core) define .qvSpec/.qvSpecs con la misma especificidad
   y necesitamos ganarle siempre, no solo por orden de carga. */
#quickViewPopupContainer .qvSpecs {
  gap: 8px;
}

#quickViewPopupContainer .qvSpec {
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  margin: 0;
  padding: 1px;
  border: 1px solid transparent;
  border-radius: var(--border-radius-small);
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

#quickViewPopupContainer .qvSpec:not(.selectedSpec):hover,
#quickViewPopupContainer .qvSpec.selectedSpec {
  background: transparent;
  border: 1px solid transparent;
}

#quickViewPopupContainer .qvSpec.noImageSpec {
  display: inline-flex;
  width: auto;
  height: 17px;
  min-width: 34px;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 0;
  font-size: 14px;
  line-height: 20px;
}

#quickViewPopupContainer .qvSpec.noImageSpec.selectedSpec {
  background: var(--third-color);
}

/* Specs con imagen (Color): mismo tamaño/forma que .imageSpec/.specImage
   de la PDP, no el círculo grande que traía el core por defecto. */
#quickViewPopupContainer .qvSpecImage {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--lines-border-color);
  object-fit: cover;
}

#quickViewPopupContainer .qvSpec:not(.noImageSpec).selectedSpec {
  border-color: #0000004d;
}

.qvCustomizableFieldTitle {
  color: var(--base);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
}

.qvCustomizableFieldRow {
  background: var(--third-color);
  border-radius: var(--border-radius-small);
  color: var(--base);
  font: inherit;
}

.qvQuantityContainer .productInfoLabel {
  color: var(--base);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-transform: uppercase;
}

#quickViewPopupContainer .selectContainer {
  width: 120px;
  height: 50px;
  border: 1px solid var(--base);
  border-radius: calc(var(--border-radius-small) * 2);
  opacity: 0.8;
}

#quickViewPopupContainer .minusSign,
#quickViewPopupContainer .plusSign {
  font-size: 14px;
}

#quickViewPopupContainer .productQuantity {
  color: var(--base);
  font-size: 14px;
}

.qvBuyButton {
  height: 50px;
  border: 1px solid var(--primary);
  border-radius: calc(var(--border-radius-small) * 2);
  background: var(--primary);
  color: var(--button-font-color);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 48px;
}

.isRenderFromCombo .addToComboSelection {
  border-radius: calc(var(--border-radius-small) * 2);
  background: var(--primary);
  border: 1px solid var(--primary);
  color: var(--button-font-color);
}

@media screen and (min-width: 1100px) {
  .isRenderFromCombo .addToComboSelection:hover {
    background: var(--button-font-color);
    color: var(--primary);
  }
}

.qvDescriptionContainer [data-dropdown-container] {
  border-top: 1px solid var(--lines-border-color);
  border-bottom: 1px solid var(--lines-border-color);
}

.qvProductGrouptitle {
  color: var(--base);
  font-size: 14px;
  font-weight: 500;
}

.qvProductGroupInfo {
  color: var(--base);
  font-size: 12px;
  line-height: 20px;
  opacity: 0.8;
}

.qvQuantityPromoTitle {
  color: var(--base);
  font-size: 14px;
  font-weight: 500;
}

.quantityPromoText,
.quantityPromoPrice {
  color: var(--base);
  font-size: 12px;
  line-height: 20px;
}
@media screen and (max-width: 1100px) {
.qvRightColumn.isRenderFromCombo {
		margin-top: 20px;
	}
		#quickViewPopupContainer{
			z-index: 100;
		}
}