/* ==========================================================================
   Vella Boutique — Ficha de producto (Fase Visual 2B)
   Alcance: exclusivamente la página de producto individual.
   Raíz de todos los selectores: .single-product-page  →  no afecta a la Home,
   ni a la cabecera, ni al pie, ni al catálogo.
   ========================================================================== */

.single-product-page {
  --vella-tinta:        #340E21;
  --vella-oro:          #C8A259;
  --vella-magenta:      #D03982;
  --vella-rosa:         #F6D7E6;
  --vella-champagne:    #F7EED9;
  --vella-blanco:       #FFFFFF;
  --vella-linea:        rgba(52, 14, 33, .14);
  --vella-serif:        "Baskervville", Baskerville, "Baskerville Old Face", Georgia, serif;
  --vella-script:       "Corinthia", "Snell Roundhand", cursive;

  /* Neutraliza el azul heredado de la demo Cosmetics dentro de la ficha. */
  --wd-primary-color:        var(--vella-tinta);
  --wd-alternative-color:    var(--vella-oro);
  --wd-link-color:           var(--vella-tinta);
  --wd-link-color-hover:     var(--vella-oro);
  --wd-text-font:            var(--vella-serif);
  --wd-title-font:           var(--vella-serif);
  --wd-entities-title-font:  var(--vella-serif);
  --wd-text-color:           #5A4450;
  --wd-title-color:          var(--vella-tinta);
}

.single-product-page,
.single-product-page p,
.single-product-page li,
.single-product-page dd,
.single-product-page dt {
  font-family: var(--vella-serif);
  color: #5A4450;
}

/* --------------------------------------------------------------------------
   1 · Reparto 55 / 45 y aire alrededor de la fotografía
   -------------------------------------------------------------------------- */

/* WoodMart maqueta este bloque con una rejilla CSS de 12 columnas
   (--wd-col-lg: 12), no con flexbox: el reparto se cambia redefiniendo
   grid-template-columns y anulando el span que el tema pone en cada hijo. */
@media (min-width: 1025px) {
  .single-product-page .product-image-summary-inner {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    column-gap: 60px;
    align-items: start;
  }

  .single-product-page .product-image-summary-inner > .product-images,
  .single-product-page .product-image-summary-inner > .summary {
    grid-column: auto;
    width: auto;
    max-width: none;
  }

  /* La fotografía no debe dominar: se limita el ancho y se centra en su
     columna, de modo que nunca se amplía por encima de su resolución real. */
  .single-product-page .woocommerce-product-gallery {
    max-width: 700px;
    margin-inline: auto;
  }

  .single-product-page .summary-inner {
    padding-top: 6px;
  }
}

/* Composición en columna editorial, alineada a la izquierda. Anula
   visualmente el «product-align-center» que traía la demo; el ajuste del tema
   no se toca, así que revertirlo es borrar este bloque. */
.single-product-page .summary,
.single-product-page .summary-inner,
.single-product-page .summary .price,
.single-product-page table.variations th.label,
.single-product-page table.variations td.value {
  text-align: left;
}

.single-product-page .wd-swatches-single,
.single-product-page .woocommerce-variation-add-to-cart,
.single-product-page .wd-sizeguide-btn,
.single-product-page .wd-wishlist-btn,
.single-product-page .product_meta,
.single-product-page .social-share {
  justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   2 · Antetítulo, título y precio
   -------------------------------------------------------------------------- */

.single-product-page .vella-antetitulo {
  font-family: var(--vella-script);
  font-size: 32px;
  line-height: 1;
  color: var(--vella-oro);
  margin: 0 0 -2px;
  letter-spacing: .01em;
}

.single-product-page .product_title.entry-title {
  font-family: var(--vella-serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: .005em;
  color: var(--vella-tinta);
  margin: 0 0 9px;
  text-wrap: balance;
}

.single-product-page .summary .price,
.single-product-page .summary .price .amount,
.single-product-page .summary .price bdi,
.single-product-page .summary .price .woocommerce-Price-currencySymbol {
  font-family: var(--vella-serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.3;
  color: var(--vella-tinta);
}

.single-product-page .summary .price {
  margin: 0 0 7px;
}

/* --------------------------------------------------------------------------
   3 · Microlínea y descripción corta
   -------------------------------------------------------------------------- */

.single-product-page .vella-microlinea {
  font-family: var(--vella-serif);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vella-oro);
  margin: 0 0 15px;
}

.single-product-page .woocommerce-product-details__short-description {
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--vella-linea);
}

.single-product-page .woocommerce-product-details__short-description p {
  font-size: 15px;
  line-height: 1.85;
  color: #5A4450;
  max-width: 46ch;
  margin: 0;
}

/* --------------------------------------------------------------------------
   4 · Selectores de talla y color
   -------------------------------------------------------------------------- */

.single-product-page table.variations {
  margin: 0 0 6px;
}

.single-product-page table.variations th.label,
.single-product-page table.variations th.label label {
  font-family: var(--vella-serif);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vella-tinta);
  padding-bottom: 10px;
}

.single-product-page table.variations tr + tr th.label,
.single-product-page table.variations tr + tr td.value {
  padding-top: 16px;
}

/* Talla: botones rectangulares, no círculos. */
.single-product-page .wd-swatches-single[data-id="pa_talla"] {
  gap: 8px;
}

.single-product-page .wd-swatches-single[data-id="pa_talla"] .wd-swatch,
.single-product-page .wd-swatches-single[data-id="pa_color"] .wd-swatch.wd-text {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 54px !important;
  height: 44px !important;
  padding: 0 16px !important;
  border: 1px solid var(--vella-linea);
  border-radius: 0;
  background: var(--vella-blanco);
  box-shadow: none;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.single-product-page .wd-swatches-single[data-id="pa_talla"] .wd-swatch .wd-swatch-text,
.single-product-page .wd-swatches-single[data-id="pa_color"] .wd-swatch.wd-text .wd-swatch-text {
  font-family: var(--vella-serif);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--vella-tinta);
  background: transparent;
}

.single-product-page .wd-swatches-single[data-id="pa_talla"] .wd-swatch:hover,
.single-product-page .wd-swatches-single[data-id="pa_color"] .wd-swatch.wd-text:hover {
  border-color: var(--vella-oro);
  background: var(--vella-champagne);
}

.single-product-page .wd-swatches-single[data-id="pa_talla"] .wd-swatch.wd-active,
.single-product-page .wd-swatches-single[data-id="pa_talla"] .wd-swatch[aria-checked="true"],
.single-product-page .wd-swatches-single[data-id="pa_color"] .wd-swatch.wd-text.wd-active,
.single-product-page .wd-swatches-single[data-id="pa_color"] .wd-swatch.wd-text[aria-checked="true"] {
  background: var(--vella-tinta);
  border-color: var(--vella-tinta);
}

.single-product-page .wd-swatches-single[data-id="pa_talla"] .wd-swatch.wd-active .wd-swatch-text,
.single-product-page .wd-swatches-single[data-id="pa_talla"] .wd-swatch[aria-checked="true"] .wd-swatch-text,
.single-product-page .wd-swatches-single[data-id="pa_color"] .wd-swatch.wd-text.wd-active .wd-swatch-text,
.single-product-page .wd-swatches-single[data-id="pa_color"] .wd-swatch.wd-text[aria-checked="true"] .wd-swatch-text {
  color: var(--vella-blanco);
}

/* Color: el término que trae tono propio conserva su círculo, con un aro fino
   que lo separa del fondo. Los que no lo traen se dibujan como pastilla de
   texto con el nombre real del color: nunca se inventa un tono. */
.single-product-page .wd-swatches-single[data-id="pa_color"] .wd-swatch:not(.wd-text) {
  box-shadow: 0 0 0 1px var(--vella-linea);
}

.single-product-page .wd-swatches-single[data-id="pa_color"] .wd-swatch:not(.wd-text).wd-active,
.single-product-page .wd-swatches-single[data-id="pa_color"] .wd-swatch:not(.wd-text)[aria-checked="true"] {
  box-shadow: 0 0 0 1px var(--vella-tinta), 0 0 0 4px var(--vella-blanco), 0 0 0 5px var(--vella-tinta);
}

/* Cuando el producto tiene un único color, su nombre se muestra junto al
   círculo. Sale del aria-label que ya genera WoodMart, así que nunca inventa
   un valor: si hubiera varios colores esta regla no se aplica. */
.single-product-page .wd-swatches-single[data-id="pa_color"] .wd-swatch:not(.wd-text):only-child {
  position: relative;
  overflow: visible;
}

.single-product-page .wd-swatches-single[data-id="pa_color"] .wd-swatch:not(.wd-text):only-child::after {
  content: attr(aria-label);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--vella-serif);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vella-tinta);
  white-space: nowrap;
  pointer-events: none;
}

/* El nombre del color es más largo que una talla, así que va en versalitas y
   un punto más pequeño para que la pastilla no se desborde. */
.single-product-page .wd-swatches-single[data-id="pa_color"] .wd-swatch.wd-text .wd-swatch-text {
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* WooCommerce inserta «Limpiar» al elegir una variación. WoodMart lo coloca en
   posición absoluta por debajo de la tabla (.wd-reset-bottom-*), justo encima
   de la guía de tallas. Devolverlo al flujo lo deja al lado de los selectores
   y la guía recupera su línea. El botón sigue visible y funcionando. */
.single-product-page .wd-reset-bottom-lg .wd-reset-var,
.single-product-page .wd-reset-bottom-md .wd-reset-var {
  position: static;
  inset-inline: auto;
  top: auto;
  margin-top: 10px;
}

.single-product-page .reset_variations {
  position: static;
  display: inline-block;
  margin: 12px 0 0;
  font-family: var(--vella-serif);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vella-magenta);
  opacity: 1;
  visibility: visible;
}

.single-product-page .wd-swatches-single[data-id="pa_color"] {
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   5 · Guía de tallas, ahora entre los selectores y el botón
   -------------------------------------------------------------------------- */

.single-product-page .single_variation_wrap > .wd-sizeguide-btn,
.single-product-page form.variations_form > .wd-sizeguide-btn,
.single-product-page .variations_form .wd-sizeguide-btn {
  clear: both;
  margin: 18px 0 18px;
}

.single-product-page .wd-sizeguide-btn a {
  font-family: var(--vella-serif);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vella-tinta);
  border-bottom: 1px solid var(--vella-oro);
  padding-bottom: 2px;
}

.single-product-page .wd-sizeguide-btn a:hover {
  color: var(--vella-magenta);
  border-bottom-color: var(--vella-magenta);
}

/* --------------------------------------------------------------------------
   6 · Llamada a la acción
   -------------------------------------------------------------------------- */

.single-product-page .woocommerce-variation-add-to-cart,
.single-product-page form.cart:not(.variations_form) {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 4px;
}

.single-product-page .woocommerce-variation-add-to-cart .quantity,
.single-product-page form.cart .quantity {
  flex: 0 0 118px;
}

.single-product-page .quantity input.qty,
.single-product-page .quantity .wd-qty-btn {
  height: 56px;
  border-color: var(--vella-linea);
  color: var(--vella-tinta);
  font-family: var(--vella-serif);
  background: var(--vella-blanco);
}

.single-product-page .single_add_to_cart_button {
  flex: 1 1 auto;
  width: auto;
  min-height: 56px;
  padding: 0 28px;
  border: 1px solid var(--vella-tinta);
  border-radius: 0;
  background: var(--vella-tinta);
  color: var(--vella-blanco);
  font-family: var(--vella-serif);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.single-product-page .single_add_to_cart_button:hover,
.single-product-page .single_add_to_cart_button:focus-visible {
  background: var(--vella-oro);
  border-color: var(--vella-oro);
  color: var(--vella-tinta);
}

/* Sin talla elegida el botón sigue siendo el elemento principal: se vacía,
   pero conserva su peso tipográfico y su contorno. */
.single-product-page .single_add_to_cart_button.disabled,
.single-product-page .single_add_to_cart_button:disabled {
  background: var(--vella-blanco);
  color: var(--vella-tinta);
  border-color: var(--vella-tinta);
  opacity: 1;
  cursor: not-allowed;
}

.single-product-page .single_add_to_cart_button.disabled:hover,
.single-product-page .single_add_to_cart_button:disabled:hover {
  background: var(--vella-champagne);
  border-color: var(--vella-tinta);
  color: var(--vella-tinta);
}

/* --------------------------------------------------------------------------
   7 · Acciones secundarias y metadatos
   -------------------------------------------------------------------------- */

/* Comparar no aporta nada en moda: se retira de la ficha. */
.single-product-page .wd-compare-btn {
  display: none !important;
}

.single-product-page .wd-wishlist-btn {
  margin-top: 18px;
}

.single-product-page .wd-wishlist-btn a,
.single-product-page .wd-action-btn.wd-style-text a {
  font-family: var(--vella-serif);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vella-tinta);
}

.single-product-page .wd-wishlist-btn a:hover {
  color: var(--vella-magenta);
}

.single-product-page .product_meta {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--vella-linea);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: rgba(52, 14, 33, .55);
}

.single-product-page .product_meta a {
  color: rgba(52, 14, 33, .68);
  border-bottom: 1px solid transparent;
}

.single-product-page .product_meta a:hover {
  color: var(--vella-tinta);
  border-bottom-color: var(--vella-oro);
}

.single-product-page .social-share {
  margin-top: 14px;
}

.single-product-page .social-share .wd-label {
  font-family: var(--vella-serif);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(52, 14, 33, .5);
}

.single-product-page .social-share .wd-social-icon {
  color: rgba(52, 14, 33, .55);
}

.single-product-page .social-share .wd-social-icon:hover {
  color: var(--vella-magenta);
}

/* --------------------------------------------------------------------------
   8 · Marcadores de pendiente (solo administración)
   -------------------------------------------------------------------------- */

.single-product-page .vella-pendiente {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 14px;
  border: 1px dashed var(--vella-oro);
  background: var(--vella-champagne);
}

.single-product-page .vella-pendiente-etiqueta {
  flex: 0 0 auto;
  font-family: var(--vella-serif);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vella-oro);
}

.single-product-page .vella-pendiente-texto {
  font-family: var(--vella-serif);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(52, 14, 33, .7);
}

/* --------------------------------------------------------------------------
   9 · Pestañas
   -------------------------------------------------------------------------- */

.single-product-page .woocommerce-tabs {
  margin-top: 60px;
  border-top: 1px solid var(--vella-linea);
  padding-top: 8px;
}

/* El contenido de las pestañas se centra como bloque, pero el texto sigue
   alineado a la izquierda: ancho de lectura de revista, no de WooCommerce. */
.single-product-page .wc-tab {
  max-width: 790px;
  margin-inline: auto;
  padding-top: 12px;
}

.single-product-page .wd-nav-tabs > li > a {
  font-family: var(--vella-serif);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(52, 14, 33, .55);
  padding: 20px 0;
  white-space: nowrap;
}

.single-product-page .wd-nav-tabs > li {
  margin-right: 26px;
  margin-left: 26px;
}

/* Un filete continuo bajo toda la fila hace que las tres pestañas se lean
   como un único componente y no como tres columnas sueltas. */
.single-product-page .wd-nav-tabs {
  border-bottom: 1px solid var(--vella-linea);
}

.single-product-page .wd-nav-tabs > li:first-child {
  margin-left: 0;
}

.single-product-page .wd-nav-tabs > li:last-child {
  margin-right: 0;
}

.single-product-page .wd-nav-tabs > li > a:hover {
  color: var(--vella-tinta);
}

.single-product-page .wd-nav-tabs > li.active > a,
.single-product-page .wd-nav-tabs > li.wd-active > a {
  color: var(--vella-tinta);
  box-shadow: inset 0 -1px 0 0 var(--vella-oro);
}

.single-product-page .wc-tab,
.single-product-page .wc-tab p {
  font-size: 15px;
  line-height: 1.9;
  color: #5A4450;
}

.single-product-page .wc-tab p {
  max-width: none;
}

/* --------------------------------------------------------------------------
   10 · Pestaña Detalles
   -------------------------------------------------------------------------- */

.single-product-page .vella-detalles {
  display: grid;
  gap: 34px;
  align-items: start;
}

@media (min-width: 900px) {
  .single-product-page .vella-detalles {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }
}

.single-product-page .vella-detalles-diseno {
  margin: 0;
  padding: 0;
  list-style: none;
}

.single-product-page .vella-detalles-diseno li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.7;
  color: #5A4450;
}

.single-product-page .vella-detalles-diseno li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 8px;
  height: 1px;
  background: var(--vella-oro);
}

.single-product-page .vella-detalles-ficha {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
  gap: 0;
  margin: 0;
}

.single-product-page .vella-detalles-ficha dt {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(52, 14, 33, .55);
  padding: 12px 16px 12px 0;
  border-top: 1px solid var(--vella-linea);
}

.single-product-page .vella-detalles-ficha dd {
  margin: 0;
  padding: 12px 0;
  font-size: 15px;
  color: var(--vella-tinta);
  border-top: 1px solid var(--vella-linea);
}

/* --------------------------------------------------------------------------
   11 · También te puede gustar
   -------------------------------------------------------------------------- */

.single-product-page .related > h2,
.single-product-page .up-sells > h2,
.single-product-page .related .title,
.single-product-page .up-sells .title {
  font-family: var(--vella-serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: .02em;
  color: var(--vella-tinta);
  text-align: center;
  margin-bottom: 34px;
}

.single-product-page .related .wd-entities-title,
.single-product-page .up-sells .wd-entities-title {
  font-family: var(--vella-serif);
  font-weight: 400;
  color: var(--vella-tinta);
}

.single-product-page .related .price,
.single-product-page .up-sells .price {
  font-family: var(--vella-serif);
  color: var(--vella-tinta);
}

/* --------------------------------------------------------------------------
   12 · Responsive
   -------------------------------------------------------------------------- */

/* Por debajo de 1025px manda la rejilla responsive del propio WoodMart, que
   ya apila galería y resumen en ese orden. Esto solo asegura el ancho. */
@media (max-width: 1024px) {
  .single-product-page .product-image-summary-inner > .product-images,
  .single-product-page .product-image-summary-inner > .summary {
    width: 100%;
    max-width: 100%;
  }

  .single-product-page .woocommerce-product-gallery {
    max-width: 560px;
    margin-inline: auto;
  }

  .single-product-page .summary-inner {
    padding-top: 28px;
  }
}

@media (max-width: 768px) {
  .single-product-page .vella-antetitulo {
    font-size: 26px;
  }

  .single-product-page .product_title.entry-title {
    font-size: 25px;
  }

  .single-product-page .summary .price,
  .single-product-page .summary .price .amount,
  .single-product-page .summary .price bdi {
    font-size: 19px;
  }

  /* Área táctil cómoda en los botones de talla y de color. */
  .single-product-page .wd-swatches-single[data-id="pa_talla"] .wd-swatch,
  .single-product-page .wd-swatches-single[data-id="pa_color"] .wd-swatch.wd-text {
    min-width: 62px !important;
    height: 48px !important;
  }

  .single-product-page .woocommerce-variation-add-to-cart,
  .single-product-page form.cart:not(.variations_form) {
    flex-wrap: wrap;
  }

  .single-product-page .woocommerce-variation-add-to-cart .quantity,
  .single-product-page form.cart .quantity {
    flex: 0 0 104px;
  }

  .single-product-page .single_add_to_cart_button {
    flex: 1 1 180px;
    letter-spacing: .12em;
  }

  .single-product-page .wd-nav-tabs > li {
    margin-right: 24px;
  }

  .single-product-page .wd-nav-tabs > li > a {
    font-size: 11px;
    letter-spacing: .12em;
    padding: 16px 0;
  }
}

/* Protección de desbordamiento acotada a lo que realmente puede desbordar. */
.single-product-page img,
.single-product-page table,
.single-product-page iframe {
  max-width: 100%;
}

.single-product-page .responsive-table {
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   13 · Guía de tallas
   Magnific Popup mueve #wd_sizeguide fuera de .single-product-page al abrirlo,
   así que este bloque se ancla en el propio popup. La hoja solo se carga en
   páginas de producto, de modo que sigue sin salir de la ficha.
   -------------------------------------------------------------------------- */

#wd_sizeguide,
.wd-sizeguide-wrap {
  --vella-tinta:     #340E21;
  --vella-oro:       #C8A259;
  --vella-magenta:   #D03982;
  --vella-champagne: #F7EED9;
  --vella-blanco:    #FFFFFF;
  --vella-linea:     rgba(52, 14, 33, .14);
  --vella-serif:     "Baskervville", Baskerville, "Baskerville Old Face", Georgia, serif;
}

#wd_sizeguide.wd-sizeguide {
  max-width: 640px;
  padding: 48px 48px 44px;
  border-radius: 0;
  background: var(--vella-blanco);
  box-shadow: 0 24px 70px -30px rgba(52, 14, 33, .45);
}

#wd_sizeguide .wd-sizeguide-title {
  font-family: var(--vella-serif);
  font-weight: 400;
  font-size: 29px;
  line-height: 1.25;
  letter-spacing: .005em;
  text-transform: none;
  color: var(--vella-tinta);
  text-align: left;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
}

#wd_sizeguide .wd-sizeguide-content {
  font-family: var(--vella-serif);
  text-align: left;
  color: #5A4450;
}

#wd_sizeguide .wd-sizeguide-content p {
  font-family: var(--vella-serif);
  font-size: 14.5px;
  line-height: 1.8;
  color: #5A4450;
  margin: 0 0 10px;
}

/* Subtítulo discreto bajo el título. */
#wd_sizeguide .wd-sizeguide-content p.vella-sg-sub {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vella-oro);
  margin: 0 0 22px;
}

/* Estado mientras no existen medidas reales. */
#wd_sizeguide .wd-sizeguide-content p.vella-sg-pendiente {
  position: relative;
  margin: 0;
  padding: 20px 0 4px;
  border-top: 1px solid var(--vella-linea);
  font-size: 15px;
  line-height: 1.75;
  color: var(--vella-tinta);
}

/* Aviso interno, solo para administración. Magnific saca el popup de
   .single-product-page, así que el marcador necesita su propia copia. */
#wd_sizeguide .vella-pendiente {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 24px;
  padding: 12px 14px;
  border: 1px dashed var(--vella-oro);
  background: var(--vella-champagne);
}

#wd_sizeguide .vella-pendiente-etiqueta {
  flex: 0 0 auto;
  font-family: var(--vella-serif);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vella-oro);
}

#wd_sizeguide .vella-pendiente-texto {
  font-family: var(--vella-serif);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(52, 14, 33, .7);
}

/* --- Estilo preparado para cuando existan medidas reales ---------------- */

#wd_sizeguide .responsive-table {
  margin-top: 26px;
  overflow-x: auto;
}

#wd_sizeguide table.wd-sizeguide-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--vella-blanco);
  font-family: var(--vella-serif);
  font-variant-numeric: tabular-nums;
}

#wd_sizeguide table.wd-sizeguide-table tr:first-child td {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vella-tinta);
  font-weight: 400;
  padding-bottom: 12px;
  border: 0;
  border-bottom: 1px solid var(--vella-oro);
  background: transparent;
}

#wd_sizeguide table.wd-sizeguide-table td {
  padding: 13px 16px 13px 0;
  border: 0;
  border-bottom: 1px solid var(--vella-linea);
  background: transparent;
  font-size: 14.5px;
  color: #5A4450;
  text-align: left;
}

#wd_sizeguide table.wd-sizeguide-table tr td:first-child {
  color: var(--vella-tinta);
  letter-spacing: .06em;
}

#wd_sizeguide table.wd-sizeguide-table tr:last-child td {
  border-bottom: 0;
}

/* --- Cierre discreto ---------------------------------------------------- */

.wd-sizeguide-wrap .wd-popup-close {
  top: 14px;
  right: 14px;
}

.wd-sizeguide-wrap .wd-popup-close a {
  color: rgba(52, 14, 33, .5);
}

.wd-sizeguide-wrap .wd-popup-close a:hover,
.wd-sizeguide-wrap .wd-popup-close a:focus-visible {
  color: var(--vella-magenta);
}

/* El icono de cruz ya existe y conserva su title y su foco; solo se retira
   la palabra «Cerrar», que competía con el título del popup. */
.wd-sizeguide-wrap .wd-popup-close .wd-action-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  #wd_sizeguide.wd-sizeguide {
    padding: 36px 24px 32px;
  }

  #wd_sizeguide .wd-sizeguide-title {
    font-size: 24px;
  }
}