/* ============================================================
   MORLENCERIA PRODUCTO — tallas.css v1.3.0
   Selector de talla + galería (móvil: full-bleed retrato; PC:
   medida fija 3:4, sin miniaturas, flechas y badges más grandes)
   + botón de zoom + orden de ficha (precio→título→descripción)
   + precio con descuento y badge "Ahorras $X".
   El badge de stock y el contador de imágenes tienen su base en
   Morlenceria Core (CSS compartido).
   ============================================================ */

/* ── SELECTOR DE TALLA ── */
.morl-tallas-wrap    { margin-bottom: 18px; }
.morl-tallas-label   { font-size: 13px; font-weight: 600; letter-spacing: .05em; margin-bottom: 10px; }
.morl-tallas-botones { display: flex; flex-wrap: wrap; gap: 8px; }

.morl-btn-talla {
    min-width: 52px; padding: 8px 14px;
    border: 1.5px solid #ccc; background: #fff; color: #333;
    font-size: 13px; font-weight: 600; cursor: pointer;
    border-radius: 4px;
    transition: border-color .15s, background .15s, color .15s;
}
.morl-btn-talla:hover             { border-color: #333; }
.morl-btn-talla.morl-seleccionada { border-color: #333; background: #333; color: #fff; }


/* ============================================================
   GALERÍA EN MÓVIL — full-bleed + alto retrato (PC se deja igual)
   Basado en el diseño previo: ancho 100vw y alto 135vw.
   ============================================================ */
@media (max-width: 768px) {

  /* Galería a todo el ancho de la pantalla, pegada al header */
  .woocommerce-product-gallery {
    width: 100vw !important;
    margin-left: calc(-1 * (100vw - 100%) / 2) !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Imagen retrato (no cuadrada), llena el ancho */
  .woocommerce-product-gallery__image img {
    width: 100vw !important;
    height: 135vw !important;
    object-fit: cover !important;
    display: block !important;
  }
}


/* ============================================================
   BOTÓN DE ZOOM (lupa) — un solo elemento, optimizado
   Reemplaza el icono original del tema por el de "expandir".
   El botón real de WooCommerce sigue siendo el clicable (zoom),
   solo le cambiamos el aspecto. Sin capas/superposiciones extra.
   ============================================================ */
.woocommerce-product-gallery { position: relative; }

.woocommerce-product-gallery__trigger {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 24px !important;
  height: 24px !important;
  z-index: 20 !important;
  border-radius: 6px !important;
  background-color: rgba(0,0,0,.30) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E") !important;
  background-size: 12px 12px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 1 !important;
  -webkit-tap-highlight-color: transparent !important;
}
/* Oculta el icono original del tema (emoji, texto, <svg> o ::before/::after) */
.woocommerce-product-gallery__trigger > * { display: none !important; }
.woocommerce-product-gallery__trigger::before,
.woocommerce-product-gallery__trigger::after { content: none !important; display: none !important; }
.woocommerce-product-gallery__trigger:focus,
.woocommerce-product-gallery__trigger:active,
.woocommerce-product-gallery__trigger:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background-color: rgba(0,0,0,.30) !important;
}


/* ============================================================
   GALERÍA EN PC (≥769px) — medida fija 3:4, sin miniaturas,
   flechas para navegar, y badges (talla + contador) más grandes.
   ============================================================ */
@media (min-width: 769px) {

  /* 1. Medida estándar: misma forma 3:4 para todos los productos */
  .woocommerce-product-gallery__image img {
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
  }

  /* 2. Ocultar miniaturas */
  .single-product .woocommerce-product-gallery .flex-control-thumbs,
  .single-product ol.flex-control-nav { display: none !important; }

  /* 3. Flechas para navegar (reemplazan las miniaturas; aparecen al pasar el mouse) */
  .woocommerce-product-gallery .flex-direction-nav { margin: 0; padding: 0; list-style: none; }
  .woocommerce-product-gallery .flex-direction-nav a {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; z-index: 25;
    display: flex !important; align-items: center; justify-content: center;
    background-color: rgba(0,0,0,.35); border-radius: 50%;
    text-indent: -9999px; overflow: hidden;
    background-repeat: no-repeat; background-position: center; background-size: 18px 18px;
    opacity: 0; transition: opacity .2s; cursor: pointer;
  }
  .woocommerce-product-gallery:hover .flex-direction-nav a { opacity: 1; }
  .woocommerce-product-gallery .flex-direction-nav a.flex-prev {
    left: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
  }
  .woocommerce-product-gallery .flex-direction-nav a.flex-next {
    right: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
  }

  /* 4. Badges más grandes en PC (acordes a la imagen grande) */
  .single-product .morl-badge--single { display: flex; bottom: 16px; left: 16px; }
  .single-product .morl-badge--single .morl-badge__label { font-size: 9.5px; padding: 6px 7.5px; }
  .single-product .morl-badge--single .morl-badge__sizes { font-size: 11px; padding: 6px 11px; }
  .single-product .morl-badge--single .morl-badge__sizes span + span::before { margin: 0 5px; }

  .single-product .morl-img-counter {
    display: flex; bottom: 16px; right: 16px;
    font-size: 10px; padding: 5px 9px; border-radius: 6px;
  }
}

/* En móvil no mostramos flechas (se navega deslizando) */
@media (max-width: 768px) {
  .woocommerce-product-gallery .flex-direction-nav { display: none !important; }
}


/* ============================================================
   FICHA — PRECIO → TÍTULO → DESCRIPCIÓN
   El ORDEN lo hace el PHP (prioridades de WooCommerce). Aquí
   solo el formato. Inter es global: NO declaramos font-family,
   solo peso/tamaño/color.
   ============================================================ */

/* Precio (va primero) — 22px PC, peso un poco mayor */
.single-product .summary .price,
.single-product .summary .price .woocommerce-Price-amount {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #111 !important;
}
.single-product .summary .price { margin: 0 0 4px !important; }

/* Precio regular tachado: 1px más chico, más delgado y opaco */
.single-product .summary .price del { text-decoration: none !important; }
.single-product .summary .price del .woocommerce-Price-amount {
  font-size: 21px !important;
  font-weight: 400 !important;
  color: #bbb !important;
  text-decoration: line-through !important;
}

/* Badge "Ahorras $X" — acorde (proporcional) al tamaño del precio */
.woo-ahorro-badge {
  display: inline-block;
  font-size: 12px !important;
  font-weight: 700 !important;
  background: #fef08a !important;
  color: #92400e !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
  vertical-align: middle !important;
  margin-left: 8px !important;
}

/* Ocultar el badge de oferta por defecto de WooCommerce */
.single-product .onsale { display: none !important; }

/* Título */
.single-product .product_title {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #111 !important;
  margin: 0 0 2px !important;
}

/* Descripción reubicada — 1 línea + "ver más" sutil AL LADO */
.single-product .woo-desc-inline {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #aaa !important;
  line-height: 1.6 !important;
  margin: 2px 0 12px !important;
}

/* Colapsada: texto en 1 línea (…) y el botón al lado, misma línea */
.single-product .woo-desc-inline:not(.is-expanded) {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.single-product .woo-desc-inline:not(.is-expanded) .woo-desc-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.single-product .woo-desc-inline:not(.is-expanded) .woo-desc-text p { display: inline; margin: 0; }
.single-product .woo-desc-inline:not(.is-expanded) .woo-desc-toggle { flex: 0 0 auto; }

/* Expandida: texto completo con párrafos (el botón queda debajo) */
.single-product .woo-desc-inline.is-expanded .woo-desc-text p { margin: 0 0 6px; }
.single-product .woo-desc-inline.is-expanded .woo-desc-text p:last-child { margin-bottom: 0; }

/* Botón "ver más / ver menos" — sutil */
.single-product .woo-desc-toggle {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  color: #888;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.single-product .woo-desc-toggle[hidden] { display: none !important; } /* respeta el atributo hidden */
.single-product .woo-desc-toggle:hover { color: #555; text-decoration: underline; }


/* ── MÓVIL: solo tamaños de texto (sin tarjeta/contenedor especial) ── */
@media (max-width: 768px) {
  .single-product .summary .price,
  .single-product .summary .price .woocommerce-Price-amount { font-size: 19px !important; }
  .single-product .summary .price del .woocommerce-Price-amount { font-size: 18px !important; }
  .single-product .summary .price { margin: 0 0 2px !important; }
  .woo-ahorro-badge { font-size: 11px !important; padding: 2px 7px !important; margin-left: 7px !important; }
  .single-product .product_title  { font-size: 16px !important; }
  .single-product .woo-desc-inline { font-size: 12px !important; margin: 2px 0 8px !important; }
}