/* ----------------------------------------------------------------
	Detalle de producto (core/vo/resources/templates/shop/detail.php)

	Estilos base del template compartido: lo carga el propio template,
	así se ve bien en cualquier site sin depender de su CSS.

	- Colores: variables --brand-* del site, con fallback neutro.
	- Tipografía: hereda la del site (font-family: inherit).
	- Casi todo va envuelto en :where() (especificidad 0) para que
	  cualquier regla del site lo pise sin importar el orden de carga.
	  Solo el acordeón y los inputs usan especificidad de clase, porque
	  si no pierden contra los estilos de <button>/.form-control del
	  navegador y de Bootstrap.
-----------------------------------------------------------------*/
:where(.vo-product-detail) { padding: 2rem 0 0; }

/* Galería — thumbs a la izquierda en desktop, franja debajo en mobile */
:where(.vo-detail-gallery) {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: flex-start;
}
:where(.vo-detail-thumbs-col) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 72px;
  flex-shrink: 0;
}
:where(.vo-detail-main-wrap) {
  flex: 1;
  min-width: 0;
  background: var(--brand-surface, #f4f4f4);
  overflow: hidden;
}
:where(.vo-detail-main-img) {
  display: block;
  width: 100%;
  height: auto; /* el <img> lleva width/height (CONFIG_IMG): proporción por aspect-ratio */
  object-fit: cover;
  aspect-ratio: 3 / 4;
  transition: transform 0.4s ease;
}
:where(.vo-detail-main-wrap:hover .vo-detail-main-img) { transform: scale(1.04); }

:where(.vo-detail-thumb) {
  display: block;
  width: 72px;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 0.2s;
  border: 1.5px solid transparent;
  flex-shrink: 0;
}
:where(.vo-detail-thumb img) { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
:where(.vo-detail-thumb:hover, .vo-detail-thumb.active) { opacity: 1; border-color: var(--brand-black, #111); }

/* Info */
:where(.vo-detail-cat) {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-sand, #777);
  margin-bottom: 0.5rem;
}
:where(.vo-detail-cat a) { color: inherit; text-decoration: none; }
:where(.vo-detail-cat a:hover) { color: var(--brand-black, #111); }

:where(.vo-detail-title) {
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.12;
  color: var(--brand-black, #111);
  margin-bottom: 0.5rem;
}

:where(.vo-detail-code) {
  font-size: 0.7rem;
  color: #999;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}
:where(.vo-detail-code span) { color: #666; }

/* Precio */
:where(.vo-detail-price) {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin: 1.25rem 0 0.4rem;
  flex-wrap: wrap;
}
:where(.vo-detail-price-main) {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--brand-black, #111);
}
:where(.vo-detail-price-original) {
  font-size: 1.1rem;
  font-weight: 400;
  color: #bbb;
  text-decoration: line-through;
}
:where(.vo-detail-cuotas) {
  font-size: 0.72rem;
  color: #666;
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}

:where(.vo-detail-divider) {
  border: none;
  border-top: 1px solid var(--brand-border, #e5e5e5);
  opacity: 1;
  margin: 1.4rem 0;
}

/* Formulario de compra */
:where(.vo-detail-label) {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-black, #111);
  margin-bottom: 0.4rem;
}
.vo-detail-select,
.vo-detail-qty-input,
.vo-detail-input {
  border: 1px solid #c8c3bc;
  border-radius: 0;
  background-color: var(--brand-white, #fff);
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--brand-black, #111);
  padding: 0.55rem 0.85rem;
}
.vo-detail-select { padding-right: 2.25rem; }
.vo-detail-select:focus,
.vo-detail-qty-input:focus,
.vo-detail-input:focus {
  border-color: var(--brand-black, #111);
  box-shadow: none;
  outline: none;
}
.vo-detail-qty-input { width: 80px; text-align: center; }

:where(.vo-detail-buy-row) {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 0.25rem;
}
:where(.vo-detail-buy-btn) { flex: 1; justify-content: center; }

/* Secciones en acordeón (Descripción / Consultanos) */
:where(.vo-detail-section) { border-top: 1px solid var(--brand-border, #e5e5e5); }
:where(.vo-detail-form + .vo-detail-section) { margin-top: 1.5rem; }

.vo-detail-accordion {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 1rem 0;
  font-family: inherit;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: var(--brand-black, #111);
  cursor: pointer;
  transition: color 0.2s;
}
.vo-detail-accordion:hover,
.vo-detail-accordion:focus-visible { color: var(--brand-sand, #555); }
.vo-detail-accordion i {
  transition: transform 0.25s;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.vo-detail-accordion.open i { transform: rotate(180deg); }
.vo-detail-acc-body {
  display: none;
  padding-bottom: 1.25rem;
}
.vo-detail-acc-body.open { display: block; }
:where(.vo-detail-acc-body) {
  font-size: 0.88rem;
  color: #444;
  line-height: 1.75;
}
:where(.vo-detail-acc-body > :last-child) { margin-bottom: 0; }

:where(.vo-detail-loc-text) {
  font-size: 0.8rem;
  color: #666;
}

/* Tags */
:where(.vo-detail-tags) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.75rem 0 1rem;
  border-top: 1px solid var(--brand-border, #e5e5e5);
}
:where(.vo-detail-tag) {
  display: inline-block;
  padding: 0.3rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--brand-border, #e5e5e5);
  color: #777;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
:where(.vo-detail-tag:hover) { border-color: var(--brand-black, #111); color: var(--brand-black, #111); }

@media (max-width: 767px) {
  /* stretch: en columna, con flex-start la foto principal tomaba ancho shrink-to-fit y medía
     0x0 hasta cargar (CLS al llegar la imagen). Así ocupa todo el ancho desde el primer pintado. */
  :where(.vo-detail-gallery) { flex-direction: column; align-items: stretch; }
  :where(.vo-detail-thumbs-col) {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    order: 2;
  }
  :where(.vo-detail-main-wrap) { order: 1; }
  :where(.vo-detail-thumb) { width: 64px; }
  :where(.vo-detail-title) { font-size: 1.9rem; }
}

/* Selector de variante por atributo (_common/select_variamt/by_attribute.php) */
:where(.vo-variant-attr) { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
:where(.vo-variant-attr-value) { font-weight: 400; text-transform: none; letter-spacing: 0; }
:where(.vo-variant-options) { display: flex; flex-wrap: wrap; gap: 0.5rem; }
:where(.vo-variant-option) { position: relative; cursor: pointer; margin: 0; }
:where(.vo-variant-pill) {
  display: inline-block;
  min-width: 2.5rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid #c8c3bc;
  background: var(--brand-white, #fff);
  font-size: 0.8rem;
  text-align: center;
}
:where(.vo-variant-swatch) {
  display: block;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1px solid #c8c3bc;
  box-shadow: inset 0 0 0 2px var(--brand-white, #fff);
}
:where(.vo-variant-option input:checked + .vo-variant-pill) {
  border-color: var(--brand-black, #111);
  background: var(--brand-black, #111);
  color: var(--brand-white, #fff);
}
:where(.vo-variant-option input:checked + .vo-variant-swatch) {
  border-color: var(--brand-black, #111);
  outline: 1px solid var(--brand-black, #111);
}
:where(.vo-variant-option input:focus-visible + span) { outline: 2px solid var(--brand-black, #111); outline-offset: 2px; }
:where(.vo-variant-option.is-unavailable) { opacity: 0.45; }
:where(.vo-variant-option.is-unavailable .vo-variant-pill) { text-decoration: line-through; }
:where(.vo-variant-option:has(input:disabled)) { opacity: 0.3; cursor: not-allowed; }
:where(.vo-variant-option:has(input:disabled) .vo-variant-pill) { text-decoration: line-through; }
/* Swatch de color sin stock / sin combinación: tachado en diagonal (como las pastillas de
   talle), no solo la opacidad. Línea oscura con borde blanco para que se vea sobre cualquier color;
   background-image se pinta encima del background-color inline del swatch. */
:where(.vo-variant-option.is-unavailable .vo-variant-swatch, .vo-variant-option:has(input:disabled) .vo-variant-swatch) {
  background-image: linear-gradient(to top right,
    transparent calc(50% - 2px), #fff calc(50% - 2px),
    #fff calc(50% - 0.75px), #111 calc(50% - 0.75px),
    #111 calc(50% + 0.75px), #fff calc(50% + 0.75px),
    #fff calc(50% + 2px), transparent calc(50% + 2px));
}
:where(.vo-variant-msg) { margin: 0.25rem 0 0; font-size: 0.8rem; color: #b42318; }