/* ============================================================
   STUDIO B - PDP STYLES
   Portado del prototipo Studio B Producto.html
   Solo se carga en is_product() (ver functions.php)
   ============================================================ */

/* === Wrapper del producto (necesario para el JS de WC gallery) === */
.studiob-product-wrapper{ display: block; }

/* === Breadcrumb === */
.studiob-crumb{
  padding: 22px 36px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.studiob-crumb a{
  color: var(--ink); opacity: .7;
  text-decoration: none;
}
.studiob-crumb a:hover{ opacity: 1; }
.studiob-crumb .sep::before{ content: ' / '; opacity: .4; margin: 0 6px; }

/* === PDP layout === */
.studiob-pdp{
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 64px;
  padding: 0 36px 80px;
  max-width: 1640px;
  margin: 0 auto;
  align-items: start;
}

/* Gallery (override de WC) */
.studiob-pdp-gallery .woocommerce-product-gallery{
  width: 100% !important;
}
.studiob-pdp-gallery .woocommerce-product-gallery__image img{
  width: 100%; height: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
  background: var(--paper-2);
}
.studiob-pdp-gallery .flex-control-nav.flex-control-thumbs{
  display: flex; gap: 8px; margin-top: 8px;
  padding: 0; list-style: none;
}
.studiob-pdp-gallery .flex-control-thumbs li{
  flex: 0 0 90px;
}
.studiob-pdp-gallery .flex-control-thumbs img{
  aspect-ratio: 3/4;
  object-fit: cover;
  cursor: pointer;
  opacity: .7;
  border: 1px solid transparent;
  transition: opacity .15s, border-color .15s;
}
.studiob-pdp-gallery .flex-control-thumbs img:hover,
.studiob-pdp-gallery .flex-control-thumbs img.flex-active{
  opacity: 1;
  border-color: var(--ink);
}

/* Info column */
.studiob-pdp-info{
  position: sticky;
  top: 140px;
  display: flex; flex-direction: column;
  gap: 24px;
}
.studiob-pdp-info .brand{
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
}
.studiob-pdp-info .title,
.studiob-pdp-info h1{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 54px);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 6px 0 0;
}

/* WC star rating */
.studiob-pdp-info .woocommerce-product-rating{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--muted);
}
.studiob-pdp-info .woocommerce-product-rating .star-rating{ color: var(--ink); }

/* Precio */
.studiob-pdp-info .price-box{
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.studiob-pdp-info .price-now,
.studiob-pdp-info .price-now .woocommerce-Price-amount{
  font-family: var(--font-display) !important;
  font-size: 38px !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  color: var(--ink) !important;
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
}
.studiob-pdp-info .price-now del{
  text-decoration: line-through;
  opacity: .45;
  font-size: 18px !important;
  font-weight: 400;
}
.studiob-pdp-info .price-now ins{ text-decoration: none; }
.studiob-pdp-info .cuotas{
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  margin-top: 8px;
}
.studiob-pdp-info .cuotas strong{ font-weight: 600; }
.studiob-pdp-info .cuotas-extra{
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
}

/* Ship info */
.studiob-pdp-info .ship-info{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
}

/* === WC: variations form + add to cart === */
.studiob-pdp-info form.cart{ margin-top: 0; }
.studiob-pdp-info .variations{
  width: 100%;
  border: none;
  margin: 0;
}
.studiob-pdp-info .variations td{
  padding: 8px 0;
  border: none;
}
.studiob-pdp-info .variations label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
}
.studiob-pdp-info .variations select{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
}
.studiob-pdp-info .quantity input.qty{
  width: 70px;
  height: 56px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
}
.studiob-pdp-info form.cart button.button{
  flex: 1;
  height: 56px;
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: .28em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 0 28px !important;
  margin: 0 !important;
  transition: background .2s, color .2s;
}
.studiob-pdp-info form.cart button.button:hover{
  background: var(--paper) !important;
  color: var(--ink) !important;
}

/* === Acordeones === */
.studiob-pdp-details{
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 36px 80px;
}
.studiob-pdp-details .details-inner{
  max-width: 840px;
  margin: 0 auto;
}
.studiob-pdp-details .acc{
  border-top: 1px solid var(--line);
}
.studiob-pdp-details .acc:last-child{
  border-bottom: 1px solid var(--line);
}
.studiob-pdp-details .acc summary{
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.studiob-pdp-details .acc summary::-webkit-details-marker{ display: none; }
.studiob-pdp-details .acc summary .ic{
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 300;
  transition: transform .25s;
}
.studiob-pdp-details .acc[open] summary .ic{ transform: rotate(45deg); }
.studiob-pdp-details .acc .body{
  padding: 0 0 32px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
}
.studiob-pdp-details .acc .body p{ margin: 0 0 16px; }
.studiob-pdp-details .acc .body a{ color: var(--ink); text-decoration: underline; }

/* Measure list */
.studiob-pdp-details .measure-list p{ margin: 0; line-height: 1.7; }
.studiob-pdp-details .model-note{
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--paper-2);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.6;
}
.studiob-pdp-details .measure-diagram{
  margin: 28px auto 6px;
  max-width: 380px;
  width: 100%;
  background: var(--paper);
  padding: 12px 0;
}
.studiob-pdp-details .measure-diagram img{
  width: 100%; height: auto; display: block;
}

/* === Related products (override del WC related) === */
.studiob-pdp-related{
  padding: 0 36px 80px;
  max-width: 1640px;
  margin: 0 auto;
}
.studiob-pdp-related .related.products > h2{
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin: 0 0 32px !important;
  padding-bottom: 32px !important;
  border-bottom: 1px solid var(--line) !important;
}

/* === Mobile === */
@media (max-width: 1100px){
  .studiob-pdp{
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 18px 60px;
  }
  .studiob-pdp-info{ position: static; }
  .studiob-pdp-info .title,
  .studiob-pdp-info h1{ font-size: 36px; }
  .studiob-crumb{ padding: 18px; }
  .studiob-pdp-details,
  .studiob-pdp-related{ padding-left: 18px; padding-right: 18px; }
  .studiob-pdp-details .acc summary{ font-size: 20px; padding: 18px 0; }
}


/* Estado disabled del Add to Cart: opacity más sólida (Ink Warm con 65% en vez de 50%) */
.studiob-pdp-info form.cart button.button.disabled,
.studiob-pdp-info form.cart button.button:disabled,
.studiob-pdp-info form.cart button.single_add_to_cart_button.disabled {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-color: var(--ink) !important;
  opacity: 0.65 !important;
  cursor: not-allowed !important;
}
.studiob-pdp-info form.cart button.button.disabled:hover,
.studiob-pdp-info form.cart button.button:disabled:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
}


/* === Ajustes finos v2 === */

/* Título: más chico para entrar en 1-2 líneas */
.studiob-pdp-info .title,
.studiob-pdp-info h1.title{
  font-size: clamp(22px, 2.4vw, 30px) !important;
  line-height: 1.1 !important;
  margin: 6px 0 0 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Short description debajo del título */
.studiob-pdp-info .short-desc{
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 42ch;
  margin-top: 4px;
}
.studiob-pdp-info .short-desc p{ margin: 0; }

/* Precio sin impuestos en chico */
.studiob-pdp-info .price-tax{
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: .02em;
}

/* Precio principal más compacto */
.studiob-pdp-info .price-now,
.studiob-pdp-info .price-now .woocommerce-Price-amount{
  font-size: 30px !important;
  letter-spacing: .02em !important;
}

/* Envíos en 1 línea */
.studiob-pdp-info .ship-info{
  white-space: nowrap;
  font-size: 12px;
}
.studiob-pdp-info .ship-info svg{ flex-shrink: 0; }

/* Reducir margen general del header de la PDP */
.studiob-pdp{
  padding-top: 12px !important;
  gap: 48px !important;
}

/* Cuotas/info más compactas */
.studiob-pdp-info .price-box{
  padding: 18px 0 !important;
}
.studiob-pdp-info .cuotas{ font-size: 13px; }

@media (max-width: 1100px){
  .studiob-pdp-info .title{ font-size: 22px !important; white-space: normal !important; }
  .studiob-pdp-info .ship-info{ white-space: normal; }
  
}





/* === STUDIO B GALLERY FALLBACK (sin depender de flexslider) === */

/* Por default ocultar TODAS las imágenes secundarias del slider */
.studiob-pdp-gallery .woocommerce-product-gallery__image{
  position: relative;
}
.studiob-pdp-gallery .woocommerce-product-gallery__image:not(:first-child){
  display: none !important;
}
.studiob-pdp-gallery .woocommerce-product-gallery__image.studiob-active{
  display: block !important;
}
.studiob-pdp-gallery .woocommerce-product-gallery__image:not(.studiob-active):not(:first-child){
  display: none !important;
}

/* La imagen principal */
.studiob-pdp-gallery .woocommerce-product-gallery__image{
  aspect-ratio: 3/4;
  background: var(--paper-2);
  overflow: hidden;
}
.studiob-pdp-gallery .woocommerce-product-gallery__image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center;
  max-width: 100%;
}

/* Miniaturas (las thumbnails de WC se ocultan, hago las propias) */
.studiob-pdp-gallery .flex-control-nav,
.studiob-pdp-gallery .flex-direction-nav{ display: none !important; }

/* Mis thumbnails custom debajo de la imagen principal */
.studiob-gallery-thumbs{
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.studiob-gallery-thumbs .thumb{
  width: 90px;
  aspect-ratio: 3/4;
  cursor: pointer;
  background: var(--paper-2);
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color .15s, opacity .15s;
  opacity: .65;
}
.studiob-gallery-thumbs .thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.studiob-gallery-thumbs .thumb:hover{ opacity: 1; }
.studiob-gallery-thumbs .thumb.active{
  border-color: var(--ink);
  opacity: 1;
}


/* Ocultar el overlay zoomImg (del wc-product-gallery-zoom) que tapa la imagen real */
.studiob-pdp-gallery .zoomImg,
.studiob-pdp-gallery img.zoomImg{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}


/* === GALLERY IMAGE SIZE FIX v3 ===
   El wrapper de cada imagen mantiene aspect-ratio 3:4 (formato editorial),
   limitado al viewport, y la imagen llena con object-fit cover. */
.studiob-pdp-gallery{
  position: relative;
  width: 100%;
}
.studiob-pdp-gallery .woocommerce-product-gallery{
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}
.studiob-pdp-gallery .woocommerce-product-gallery__image{
  aspect-ratio: unset !important;
  max-height: none !important;
  width: 100% !important;
  overflow: visible !important;
  background: var(--paper-2);
  position: relative;
}
.studiob-pdp-gallery .woocommerce-product-gallery__image > a,
.studiob-pdp-gallery .woocommerce-product-gallery__image > .wp-post-image,
.studiob-pdp-gallery .woocommerce-product-gallery__image img{
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
}

/* Si la imagen tiene aspect-ratio width:height que difiere de 3:4, recortamos al centro */
.studiob-pdp-gallery .woocommerce-product-gallery__image > a{
  display: block !important;
}

@media (max-width: 1100px){
  .studiob-pdp-gallery .woocommerce-product-gallery__image{
    max-height: 80vh !important;
  }
}


/* === NEUTRALIZE FLEXSLIDER INLINE STYLES ===
   Flexslider aplica width:800% al wrapper y width:1040px float:left a cada imagen
   sin terminar de inicializar el slider. Forzamos a anularlos. */
.studiob-pdp-gallery .woocommerce-product-gallery__wrapper,
.studiob-pdp-gallery .flex-viewport{
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  transition: none !important;
  height: auto !important;
  overflow: visible !important;
}
.studiob-pdp-gallery .woocommerce-product-gallery__image{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  margin-right: 0 !important;
  float: none !important;
  display: none;
  aspect-ratio: unset !important;
  max-height: none !important;
  overflow: visible !important;
  background: var(--paper-2);
  position: relative;
}
.studiob-pdp-gallery .woocommerce-product-gallery__image:first-child,
.studiob-pdp-gallery .woocommerce-product-gallery__image.studiob-active{
  display: block !important;
}
.studiob-pdp-gallery .woocommerce-product-gallery__image > a,
.studiob-pdp-gallery .woocommerce-product-gallery__image img,
.studiob-pdp-gallery .woocommerce-product-gallery__image .wp-post-image{
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: auto !important;
  min-height: unset !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  position: relative !important;
}


/* === SWATCHES CIRCULARES (talles y colores) === */
/* Talles: botones circulares - sobreescribe .wvs-style-squared del plugin */
.variable-items-wrapper .variable-item.button-variable-item,
.wvs-style-squared .variable-item.button-variable-item {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: .05em !important;
  padding: 0 !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  transition: background .15s, border-color .15s !important;
  cursor: pointer !important;
}

.variable-item.button-variable-item:hover,
.variable-item.button-variable-item.selected {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-color: var(--ink) !important;
}

.variable-item.button-variable-item.disabled,
.variable-item.button-variable-item.wvs-disabled {
  opacity: .35 !important;
  cursor: not-allowed !important;
  text-decoration: none !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
}

/* Colores: círculos */
.variable-items-wrapper .variable-item.color-variable-item,
.wvs-style-squared .variable-item.color-variable-item {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 2px solid transparent !important;
  outline: 2px solid transparent !important;
  transition: outline-color .15s !important;
  padding: 0 !important;
}

.variable-items-wrapper .variable-item.color-variable-item.selected,
.variable-items-wrapper .variable-item.color-variable-item:hover {
  border: 2px solid var(--paper) !important;
  outline: 2px solid var(--ink) !important;
}

/* old rule kept for fallback */
.variable-item.color-variable-item.selected,
.variable-item.color-variable-item:hover {
  border: 2px solid var(--paper) !important;
  outline: 2px solid var(--ink) !important;
}

.variable-item.color-variable-item .color-variable-item-span,
.variable-item.color-variable-item > span {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  display: block !important;
}

/* El span interno con tachado (XL agotado) - mantener círculo */
.variable-item.button-variable-item.disabled .variable-item-span::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 45%,
    var(--line-strong) 45%,
    var(--line-strong) 55%,
    transparent 55%
  );
  pointer-events: none;
}
.variable-item.button-variable-item.disabled {
  position: relative !important;
}

/* === CARRITO: cantidad + botón en la misma fila === */
form.cart .woocommerce-variation-add-to-cart,
.single_variation_wrap .woocommerce-variation-add-to-cart {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 12px !important;
}

form.cart .woocommerce-variation-add-to-cart .quantity,
.single_variation_wrap .woocommerce-variation-add-to-cart .quantity {
  flex-shrink: 0 !important;
  width: auto !important;
}

form.cart .woocommerce-variation-add-to-cart button.single_add_to_cart_button,
.single_variation_wrap .woocommerce-variation-add-to-cart button.single_add_to_cart_button {
  flex: 1 !important;
  margin: 0 !important;
}


/* === OVERRIDE PLUGIN WVS: forzar círculos independientemente del estilo del plugin === */
.wvs-style-squared .variable-item.button-variable-item,
.wvs-style-rounded .variable-item.button-variable-item,
body .variable-items-wrapper .variable-item.button-variable-item {
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
}

.wvs-style-squared .variable-item.color-variable-item,
.wvs-style-rounded .variable-item.color-variable-item,
body .variable-items-wrapper .variable-item.color-variable-item {
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
}

.wvs-style-squared .variable-item.color-variable-item > span,
body .variable-items-wrapper .variable-item.color-variable-item > span {
  border-radius: 50% !important;
}