/* ============================================================
   The Good Shisha — Ficha de producto (opción 1b, panel claro)
   Se carga solo en is_product() (ver inc/enqueue.php).
   Los selectores largos con .woocommerce div.product existen para ganar
   a woocommerce.css / woocommerce-layout.css sin recurrir a !important.
   Mobile-first; escritorio a partir de 980px.
   ============================================================ */

/* ---------- 1. Estructura ---------- */
/* Los márgenes laterales de la página los pone cada módulo (10-base.css deja
   el contenedor del padre a cero). En la ficha no se carga 40-woo-shop.css,
   así que el gutter tiene que salir de aquí o el contenido va a sangre. */
.tgs-pdp{
  display:flex;flex-direction:column;gap:22px;
  padding:4px var(--tgs-pad) 28px;
  font-family:var(--tgs-font);
}
/* Sin esto los hijos de la rejilla de escritorio no encogen y desbordan. */
.tgs-pdp > *{min-width:0}
/* WooCommerce usa clearfix con pseudoelementos: en flex se cuelan como items. */
.tgs-pdp::before,.tgs-pdp::after{content:none;display:none}

/* Migas y avisos viven FUERA de div.product y también necesitan el gutter.
   (Sus estilos "oficiales" están en 40-woo-shop.css, que aquí no se carga.) */
.single-product .tgs-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin:0;padding:14px var(--tgs-pad) 0;
  color:var(--tgs-text-meta);font-size:11.5px;font-weight:700;
}
.single-product .tgs-crumbs a{color:inherit;text-decoration:none}
.single-product .tgs-crumbs a:hover{color:var(--tgs-text)}
.single-product .tgs-crumbs .tgs-crumbs__sep{opacity:.6}
.single-product .woocommerce-notices-wrapper{margin:0;padding:12px var(--tgs-pad) 0}
.single-product .woocommerce-notices-wrapper:empty{padding:0}

/* ---------- 2. Galería (nativa: solo se estiliza, no se sustituye) ---------- */
.tgs-pdp__gallery{position:relative}

.woocommerce div.product.tgs-pdp .woocommerce-product-gallery{
  float:none;width:100%;margin:0;padding:16px;
  background:var(--tgs-card);
  border:1px solid var(--tgs-card-bd);
  border-radius:var(--tgs-r-screen);
  /* La galería nace con opacity:0 en línea y la sube su JS: si el JS falla,
     el producto tiene que verse igual. */
  opacity:1 !important;
}
.tgs-pdp .woocommerce-product-gallery__wrapper{margin:0}
.tgs-pdp .woocommerce-product-gallery__image{text-align:center}
.woocommerce div.product.tgs-pdp div.images img{
  width:auto;max-width:100%;max-height:300px;height:auto;
  margin:0 auto;object-fit:contain;border-radius:14px;
}
.woocommerce div.product.tgs-pdp .woocommerce-product-gallery__trigger{
  /* woocommerce.css ya lo posiciona, pero no dependemos de ello. */
  position:absolute;top:26px;right:26px;z-index:4;
  width:38px;height:38px;line-height:36px;
  background:var(--tgs-card);
  border:1px solid var(--tgs-card-bd);
  border-radius:var(--tgs-r-pill);
  color:var(--tgs-text);font-size:16px;text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

/* miniaturas 64px, la activa con borde negro */
.woocommerce div.product.tgs-pdp div.images .flex-control-thumbs{
  display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;
  margin:12px 0 0;padding:0;list-style:none;
}
.woocommerce div.product.tgs-pdp div.images .flex-control-thumbs li{
  float:none;flex:0 0 auto;width:64px;height:64px;margin:0;list-style:none;
}
.woocommerce div.product.tgs-pdp div.images .flex-control-thumbs li img{
  width:100%;height:100%;max-height:none;padding:6px;margin:0;
  object-fit:contain;opacity:1;cursor:pointer;
  background:var(--tgs-card);
  border:1.5px solid var(--tgs-bd-input);
  border-radius:var(--tgs-r-input);
  transition:border-color .15s;
}
.woocommerce div.product.tgs-pdp div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product.tgs-pdp div.images .flex-control-thumbs li img:hover{
  border-color:var(--tgs-ink);border-width:2px;opacity:1;
}

.tgs-pdp__badge{position:absolute;top:26px;left:26px;z-index:4}

/* ---------- 3. Panel de compra ---------- */
.woocommerce div.product.tgs-pdp div.summary{
  float:none;width:100%;margin:0;
  display:flex;flex-direction:column;
}
/* El punto de color es .tgs-pill__dot (20-components.css); aquí solo tamaño. */
.tgs-pdp__stock{align-self:flex-start;font-size:12px}
/* La disponibilidad nativa duplicaría la pill de arriba. */
.tgs-pdp div.summary > p.stock{display:none}

.woocommerce div.product.tgs-pdp .product_title{
  margin:12px 0 0;padding:0;
  color:var(--tgs-text);
  font-size:28px;font-weight:900;line-height:1.08;letter-spacing:-.01em;
  text-transform:uppercase;overflow-wrap:anywhere;
}
.tgs-pdp__brand{
  margin-top:5px;
  color:var(--tgs-text-meta);
  font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}

.tgs-pdp__price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin-top:14px}
.woocommerce div.product.tgs-pdp p.price{
  margin:0;color:var(--tgs-text);
  font-size:32px;font-weight:900;line-height:1.1;
}
.woocommerce div.product.tgs-pdp p.price del{
  margin-right:6px;opacity:1;
  color:var(--tgs-text-disabled);font-size:16px;font-weight:700;
}
.woocommerce div.product.tgs-pdp p.price ins{background:none;text-decoration:none;color:var(--tgs-red)}
.tgs-pdp__sequra{font-size:11.5px}
.tgs-pdp__sequra[hidden]{display:none}

/* ---------- 4. Variaciones ---------- */
.tgs-pdp .variations{width:100%;margin:22px 0 0;border:0;border-collapse:collapse}
.tgs-pdp .variations tbody,
.tgs-pdp .variations tr,
.tgs-pdp .variations th,
.tgs-pdp .variations td{
  display:block;width:auto;margin:0;padding:0;border:0;background:none;text-align:left;
}
.tgs-pdp .variations tr + tr,
.tgs-pdp .variations .variation-row + .variation-row{margin-top:18px}
.tgs-pdp .variations label{
  display:block;margin:0 0 10px;
  color:var(--tgs-text);
  font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
}
/* nombre de la opción elegida, junto a la etiqueta (MADERA: Movingui) */
.tgs-pdp__var-value{color:var(--tgs-text-meta);font-weight:700;letter-spacing:0;text-transform:none}
.tgs-pdp__var-value:not(:empty)::before{content:": "}

.tgs-pdp .reset_variations{
  display:inline-block;margin-top:10px;
  color:var(--tgs-text-meta);
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.tgs-pdp .variations select{
  width:100%;max-width:320px;min-height:48px;padding:12px 14px;
  background:var(--tgs-card);
  border:1.5px solid var(--tgs-bd-input);
  border-radius:var(--tgs-r-input);
  color:var(--tgs-text);
  font-family:var(--tgs-font);font-size:14px;font-weight:700;
}
/* Cuando el fallback pinta swatches, el select sigue en el DOM (lo necesita
   el JS de variaciones de WooCommerce) pero sale del flujo visual. */
.tgs-pdp .variations select.tgs-pdp__select-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;
  overflow:hidden;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);
}

/* 4.1 Swatches del plugin woo-variation-swatches (NO se duplica su función:
   solo se le da la forma cuadrada del diseño 1b). */
.tgs-pdp .variable-items-wrapper{
  display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none;
}
.tgs-pdp .variable-items-wrapper .variable-item{
  position:relative;overflow:hidden;
  width:40px;height:40px;min-width:40px;margin:0 !important;padding:0;
  background:var(--tgs-card);
  border:2.5px solid transparent !important;
  border-radius:12px !important;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.3),0 2px 5px rgba(0,0,0,.12) !important;
  transition:border-color .15s;
}
.tgs-pdp .variable-items-wrapper .variable-item.selected{border-color:var(--tgs-ink) !important}
.tgs-pdp .variable-items-wrapper .variable-item .variable-item-span{
  display:block;width:100%;height:100%;margin:0;
  border-radius:9px;background-size:cover;background-position:center;
}
/* los de tipo botón conservan su texto */
.tgs-pdp .variable-items-wrapper .button-variable-item{
  width:auto;min-width:44px;height:44px;padding:0 14px;
  border:1.5px solid var(--tgs-bd-input) !important;
  box-shadow:none !important;
}
.tgs-pdp .variable-items-wrapper .button-variable-item.selected{
  border-color:var(--tgs-ink) !important;border-width:2.5px !important;
}
.tgs-pdp .variable-items-wrapper .button-variable-item .variable-item-span{
  display:flex;align-items:center;justify-content:center;
  color:var(--tgs-text);
  font-size:12.5px;font-weight:800;text-transform:uppercase;white-space:nowrap;
}
.tgs-pdp .variable-items-wrapper .variable-item.disabled,
.tgs-pdp .variable-items-wrapper .variable-item.out-of-stock{opacity:.35}

/* 4.2 Swatches propios (solo si el plugin no está activo) */
.tgs-pdp__swatches{display:flex;flex-wrap:wrap;gap:10px}
.tgs-pdp__swatch{
  position:relative;
  width:40px;height:40px;min-width:40px;padding:0;
  background:var(--tgs-card);
  border:2.5px solid transparent;
  border-radius:12px;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.3),0 2px 5px rgba(0,0,0,.12);
  background-image:linear-gradient(135deg,#b98d5a,#7a5433);
  cursor:pointer;transition:border-color .15s;
}
/* el cuadrado mide 40px por diseño; el área táctil se estira a 46px */
.tgs-pdp__swatch::after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px}
.tgs-pdp__swatch.is-active{border-color:var(--tgs-ink)}
.tgs-pdp__swatch:not(.tgs-pdp__swatch--text) .tgs-pdp__swatch-name{
  position:absolute;width:1px;height:1px;overflow:hidden;
  white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);
}
.tgs-pdp__swatch--text{
  width:auto;height:44px;padding:0 14px;
  background-image:none;box-shadow:none;
  border:1.5px solid var(--tgs-bd-input);
  color:var(--tgs-text);
  font-family:var(--tgs-font);font-size:12.5px;font-weight:800;text-transform:uppercase;
}
.tgs-pdp__swatch--text.is-active{border-color:var(--tgs-ink);border-width:2.5px}

/* 4.3 Degradados de madera (valen para los swatches del plugin y para los propios) */
.tgs-pdp .variable-item[data-value*="movingui"]:not(.button-variable-item) .variable-item-span,
.tgs-pdp__swatch[data-value*="movingui"]{background-image:linear-gradient(135deg,#d9b25e,#a97e33)}
.tgs-pdp .variable-item[data-value*="zebrano"]:not(.button-variable-item) .variable-item-span,
.tgs-pdp__swatch[data-value*="zebrano"]{background-image:linear-gradient(135deg,#c49a5f,#6e4f2a)}
.tgs-pdp .variable-item[data-value*="paduc"]:not(.button-variable-item) .variable-item-span,
.tgs-pdp .variable-item[data-value*="padouk"]:not(.button-variable-item) .variable-item-span,
.tgs-pdp__swatch[data-value*="paduc"],
.tgs-pdp__swatch[data-value*="padouk"]{background-image:linear-gradient(135deg,#c2603a,#8a3a1e)}
.tgs-pdp .variable-item[data-value*="amaranth"]:not(.button-variable-item) .variable-item-span,
.tgs-pdp .variable-item[data-value*="amaranto"]:not(.button-variable-item) .variable-item-span,
.tgs-pdp__swatch[data-value*="amaranth"],
.tgs-pdp__swatch[data-value*="amaranto"]{background-image:linear-gradient(135deg,#8e4257,#5c2536)}
.tgs-pdp .variable-item[data-value*="lacewood"]:not(.button-variable-item) .variable-item-span,
.tgs-pdp__swatch[data-value*="lacewood"]{background-image:linear-gradient(135deg,#b57e58,#7d4f33)}
.tgs-pdp .variable-item[data-value*="walnut"]:not(.button-variable-item) .variable-item-span,
.tgs-pdp .variable-item[data-value*="nogal"]:not(.button-variable-item) .variable-item-span,
.tgs-pdp__swatch[data-value*="walnut"],
.tgs-pdp__swatch[data-value*="nogal"]{background-image:linear-gradient(135deg,#7a5a41,#4c3423)}
.tgs-pdp .variable-item[data-value*="wengue"]:not(.button-variable-item) .variable-item-span,
.tgs-pdp .variable-item[data-value*="wenge"]:not(.button-variable-item) .variable-item-span,
.tgs-pdp__swatch[data-value*="wengue"],
.tgs-pdp__swatch[data-value*="wenge"]{background-image:linear-gradient(135deg,#54443a,#2e241e)}
.tgs-pdp .variable-item[data-value*="ebano"]:not(.button-variable-item) .variable-item-span,
.tgs-pdp__swatch[data-value*="ebano"]{background-image:linear-gradient(135deg,#2b2622,#14100e)}
.tgs-pdp .variable-item[data-value*="roble"]:not(.button-variable-item) .variable-item-span,
.tgs-pdp__swatch[data-value*="roble"]{background-image:linear-gradient(135deg,#d2ab74,#a87a45)}
.tgs-pdp .variable-item[data-value*="teca"]:not(.button-variable-item) .variable-item-span,
.tgs-pdp__swatch[data-value*="teca"]{background-image:linear-gradient(135deg,#c9955a,#8c5f2e)}
.tgs-pdp .variable-item[data-value*="olivo"]:not(.button-variable-item) .variable-item-span,
.tgs-pdp__swatch[data-value*="olivo"]{background-image:linear-gradient(135deg,#cbbd8a,#8a7a45)}
.tgs-pdp .variable-item[data-value*="cerezo"]:not(.button-variable-item) .variable-item-span,
.tgs-pdp__swatch[data-value*="cerezo"]{background-image:linear-gradient(135deg,#b4614a,#7b3a2a)}
.tgs-pdp .variable-item[data-value*="arce"]:not(.button-variable-item) .variable-item-span,
.tgs-pdp__swatch[data-value*="arce"]{background-image:linear-gradient(135deg,#e3d0a8,#bda772)}
.tgs-pdp .variable-item[data-value*="bambu"]:not(.button-variable-item) .variable-item-span,
.tgs-pdp__swatch[data-value*="bambu"]{background-image:linear-gradient(135deg,#dcc189,#ac8a4c)}

/* ---------- 5. Cantidad + añadir al carrito ---------- */
.woocommerce div.product.tgs-pdp form.cart{margin:0;display:block}
.woocommerce div.product.tgs-pdp form.cart::before,
.woocommerce div.product.tgs-pdp form.cart::after{content:none;display:none}

.tgs-pdp__buy-row{display:flex;align-items:stretch;gap:10px;margin-top:22px}
/* El aspecto del stepper lo define .tgs-stepper--lg (20-components.css).
   Aquí solo se encaja el <div class="quantity"> que mete WooCommerce en medio. */
.tgs-pdp__stepper{flex:none}
.woocommerce div.product.tgs-pdp form.cart .tgs-pdp__stepper div.quantity{
  float:none;margin:0;display:flex;align-items:center;
}
/* Venta individual o stock = 1: WooCommerce imprime la cantidad oculta,
   así que el stepper sobra y el botón ocupa toda la fila. */
.woocommerce div.product.tgs-pdp form.cart .tgs-pdp__stepper div.quantity.hidden{display:none}
.tgs-pdp__stepper:has(div.quantity.hidden){display:none}
/* .woocommerce .quantity .qty gana por especificidad al componente base. */
.woocommerce div.product.tgs-pdp form.cart .tgs-pdp__stepper input.qty{
  width:38px;min-width:38px;height:auto;padding:0;margin:0;
  background:none;border:0;box-shadow:none;text-align:center;
  color:var(--tgs-text);
  font-family:var(--tgs-font);font-size:16px;font-weight:800;
  -moz-appearance:textfield;appearance:textfield;
}

/* El botón nativo no admite clases por filtro, así que replica .tgs-btn--dark. */
.woocommerce div.product.tgs-pdp form.cart button.single_add_to_cart_button,
.woocommerce div.product.tgs-pdp form.cart .single_add_to_cart_button.button{
  flex:1;min-height:52px;padding:14px 22px;
  background:var(--tgs-ink);color:#fff;
  border:0;border-radius:14px;
  font-family:var(--tgs-font);font-size:14px;font-weight:900;letter-spacing:.05em;
  text-transform:uppercase;text-align:center;
  transition:transform .1s,opacity .15s;
}
.woocommerce div.product.tgs-pdp form.cart button.single_add_to_cart_button:hover{
  background:var(--tgs-ink);color:#fff;opacity:.92;
}
.woocommerce div.product.tgs-pdp form.cart button.single_add_to_cart_button:active{transform:scale(.97)}
.woocommerce div.product.tgs-pdp form.cart button.single_add_to_cart_button.disabled,
.woocommerce div.product.tgs-pdp form.cart button.single_add_to_cart_button:disabled{
  opacity:.4;cursor:not-allowed;
}

.tgs-pdp__wa{margin-top:10px;min-height:48px;border-radius:14px;font-size:13px}

.tgs-pdp .single_variation_wrap{margin-top:4px}
.tgs-pdp .woocommerce-variation-price .price{color:var(--tgs-text);font-size:24px;font-weight:900}
.tgs-pdp .woocommerce-variation-availability p{
  margin:0;color:var(--tgs-text-body);font-size:12.5px;font-weight:700;
}
.tgs-pdp .woocommerce-variation-description p{
  color:var(--tgs-text-body);font-size:13px;line-height:1.6;
}

/* ---------- 6. Iconos de confianza ---------- */
.tgs-pdp__trust{
  display:flex;justify-content:space-between;gap:10px;padding:22px 0 0;
  color:var(--tgs-text-body);
  font-size:10.5px;font-weight:700;text-align:center;
}
.tgs-pdp__trust-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.tgs-pdp__trust-item span{font-size:16px;line-height:1}

/* ---------- 7. Pestañas ---------- */
.woocommerce div.product.tgs-pdp .woocommerce-tabs{
  margin:0;padding:0;overflow:hidden;
  background:var(--tgs-card);
  border:1px solid var(--tgs-card-bd);
  border-radius:var(--tgs-r-card);
}
.woocommerce div.product.tgs-pdp .woocommerce-tabs ul.tabs{
  display:flex;margin:0;padding:0;overflow-x:auto;list-style:none;
  background:none;border:0;border-bottom:1px solid var(--tgs-sep);
}
.woocommerce div.product.tgs-pdp .woocommerce-tabs ul.tabs::before,
.woocommerce div.product.tgs-pdp .woocommerce-tabs ul.tabs::after,
.woocommerce div.product.tgs-pdp .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product.tgs-pdp .woocommerce-tabs ul.tabs li::after{
  content:none;display:none;border:0;box-shadow:none;
}
.woocommerce div.product.tgs-pdp .woocommerce-tabs ul.tabs li{
  flex:1 0 auto;margin:0;padding:0;text-align:center;
  background:none;border:0;border-bottom:2.5px solid transparent;border-radius:0;
  box-shadow:none;transition:border-color .15s;
}
.woocommerce div.product.tgs-pdp .woocommerce-tabs ul.tabs li a{
  display:block;padding:14px 12px;
  color:var(--tgs-text-meta);
  font-size:12px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
}
.woocommerce div.product.tgs-pdp .woocommerce-tabs ul.tabs li.active{
  background:none;border-bottom-color:var(--tgs-ink);
}
.woocommerce div.product.tgs-pdp .woocommerce-tabs ul.tabs li.active a{color:var(--tgs-text)}
.woocommerce div.product.tgs-pdp .woocommerce-tabs .panel{margin:0;padding:18px;background:none}
/* el h2 del panel repite el nombre de la pestaña */
.tgs-pdp .woocommerce-Tabs-panel > h2,
.tgs-pdp #tab-description > h2{display:none}
.tgs-pdp .woocommerce-Tabs-panel p,
.tgs-pdp .woocommerce-Tabs-panel li{color:var(--tgs-text-body);font-size:13.5px;line-height:1.65}
.tgs-pdp .woocommerce-Tabs-panel > *:first-child{margin-top:0}
.tgs-pdp .woocommerce-Tabs-panel > *:last-child{margin-bottom:0}

.tgs-pdp__includes{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.tgs-pdp__includes li{color:var(--tgs-text-body);font-size:13.5px;font-weight:600;line-height:1.4}
.tgs-pdp__includes li::before{
  content:"✓";margin-right:8px;color:var(--tgs-green-text);font-weight:900;
}

/* opiniones */
.tgs-pdp #reviews .woocommerce-noreviews,
.tgs-pdp #reviews .woocommerce-verification-required{
  color:var(--tgs-text-meta);font-size:13px;font-weight:600;
}
.tgs-pdp #reviews .commentlist{margin:0 0 18px;padding:0;list-style:none}
.tgs-pdp #reviews .comment_container{display:flex;gap:12px;align-items:flex-start}
.tgs-pdp #reviews .comment_container img.avatar{
  position:static;width:38px;height:38px;padding:0;margin:0;border-radius:var(--tgs-r-pill);border:0;
}
.tgs-pdp #reviews .comment-text{margin:0;padding:0;border:0;width:auto}
.tgs-pdp #reviews .comment-reply-title,
.tgs-pdp #reviews #reply-title{
  display:block;margin-bottom:10px;
  color:var(--tgs-text);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
}
.tgs-pdp #reviews .comment-form input[type="text"],
.tgs-pdp #reviews .comment-form input[type="email"],
.tgs-pdp #reviews .comment-form textarea{
  width:100%;padding:13px 14px;
  background:var(--tgs-card);
  border:1.5px solid var(--tgs-bd-input);
  border-radius:var(--tgs-r-input);
  color:var(--tgs-text);
  font-family:var(--tgs-font);font-size:14px;font-weight:600;
}
.tgs-pdp #reviews .comment-form input[type="submit"]{
  min-height:48px;padding:13px 24px;
  background:var(--tgs-ink);color:#fff;border:0;border-radius:var(--tgs-r-pill);
  font-family:var(--tgs-font);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;
}

/* ---------- 8. También te recomendamos ----------
   El marcado de las tarjetas del loop lo genera inc/woo-shop.php (.tgs-pcard)
   en TODO el sitio, pero 40-woo-shop.css no se carga en la ficha (su condición
   en inc/enqueue.php es tgs_is_woo_listing). Por eso se replican aquí, y solo
   aquí, los estilos de tarjeta que necesita el carril: todo va acotado a
   .tgs-pdp__recs, así que si algún día se cargara también el CSS de tienda
   estas reglas seguirían ganando por especificidad sin efectos cruzados. */
.tgs-pdp__recs{display:flex;flex-direction:column;gap:22px}
/* Sin upsells ni relacionados el contenedor queda vacío: fuera el hueco. */
.tgs-pdp__recs:empty{display:none}
.woocommerce div.product.tgs-pdp .tgs-pdp__recs .up-sells,
.woocommerce div.product.tgs-pdp .tgs-pdp__recs .related{
  float:none;width:100%;margin:0;padding:0;
}
/* Solo el título de la sección: los <h2> de las tarjetas del loop cuelgan más
   abajo y no deben heredar la cursiva ni el tamaño del titular. */
.tgs-pdp__recs > * > h2{
  margin:0 0 12px;color:var(--tgs-text);
  font-size:19px;font-weight:900;font-style:italic;letter-spacing:-.01em;text-transform:uppercase;
}
.woocommerce div.product.tgs-pdp .tgs-pdp__recs ul.products{
  display:flex;gap:12px;margin:0;padding:0 0 8px;list-style:none;
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.woocommerce div.product.tgs-pdp .tgs-pdp__recs ul.products::before,
.woocommerce div.product.tgs-pdp .tgs-pdp__recs ul.products::after{content:none;display:none}
/* woocommerce.css flota los li al 48%: hay que anularlo aquí, porque el
   `width:auto !important` de 40-woo-shop.css no está disponible en la ficha. */
.woocommerce div.product.tgs-pdp .tgs-pdp__recs ul.products li.product{
  position:relative;float:none;clear:none;width:auto;flex:0 0 160px;min-width:160px;
  margin:0;padding:0;
  display:flex;flex-direction:column;text-align:left;
  scroll-snap-align:start;
}
.woocommerce div.product.tgs-pdp .tgs-pdp__recs ul.products li.product::before,
.woocommerce div.product.tgs-pdp .tgs-pdp__recs ul.products li.product::after{
  content:none;display:none;
}

/* --- Tarjeta .tgs-pcard dentro del carril --- */
.tgs-pdp__recs .tgs-pcard{
  position:relative;flex:1;
  display:flex;flex-direction:column;gap:8px;
  padding:12px;
  background:var(--tgs-card);
  border:1px solid var(--tgs-card-bd);
  border-radius:var(--tgs-r-card);
}
.tgs-pdp__recs .tgs-pcard__media{position:relative;height:120px;display:grid;place-items:center}
.tgs-pdp__recs .tgs-pcard__medialink{display:grid;place-items:center;width:100%;height:100%}
.woocommerce div.product.tgs-pdp .tgs-pdp__recs ul.products li.product .tgs-pcard__media img{
  width:auto;height:auto;max-width:90%;max-height:112px;margin:0;
  display:block;object-fit:contain;border-radius:0;box-shadow:none;
}
.tgs-pdp__recs .tgs-pcard__badge{
  position:absolute;top:0;left:0;z-index:2;
  display:inline-flex;align-items:center;
  padding:4px 8px;border-radius:var(--tgs-r-pill);
  background:var(--tgs-ink);color:var(--tgs-card);
  font-size:9.5px;font-weight:800;letter-spacing:.02em;line-height:1.2;
}
.tgs-pdp__recs .tgs-pcard__badge--soon{background:var(--tgs-text-meta)}
.tgs-pdp__recs .tgs-pcard__badge.tgs-badge--offer{background:var(--tgs-red);font-size:10px;font-weight:900}
.tgs-pdp__recs .tgs-pcard__fav{
  position:absolute;top:-2px;right:-2px;z-index:3;
  width:34px;height:34px;padding:0;
  display:grid;place-items:center;
  background:var(--tgs-card);border:1px solid var(--tgs-card-bd);
  border-radius:var(--tgs-r-pill);
  font-size:14px;line-height:1;cursor:pointer;
}
.tgs-pdp__recs .tgs-pcard__fav:active{transform:scale(.9)}
.tgs-pdp__recs .tgs-pcard__body{display:flex;flex-direction:column;gap:6px;flex:1}
.tgs-pdp__recs .tgs-pcard__brand{
  color:var(--tgs-text-meta);font-size:10px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.woocommerce div.product.tgs-pdp .tgs-pdp__recs ul.products li.product .tgs-pcard__title{
  margin:0;padding:0;min-height:29px;
  color:var(--tgs-text);
  font-size:11.5px;font-weight:800;font-style:normal;line-height:1.25;text-transform:uppercase;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tgs-pdp__recs .tgs-pcard__link{color:inherit;text-decoration:none}
/* El enlace del título cubre la tarjeta entera (mismo truco que en el listado). */
.tgs-pdp__recs .tgs-pcard__link::after{content:"";position:absolute;inset:0;z-index:1}
.tgs-pdp__recs .tgs-pcard__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:6px;flex-wrap:wrap;margin-top:auto;
}
.woocommerce div.product.tgs-pdp .tgs-pdp__recs ul.products li.product .tgs-pcard__price{
  margin:0;color:var(--tgs-text);font-size:14px;font-weight:900;line-height:1.2;
}
.tgs-pdp__recs .tgs-pcard__price del{
  display:block;color:var(--tgs-text-disabled);font-size:11px;font-weight:700;opacity:1;
}
.tgs-pdp__recs .tgs-pcard__price ins{
  display:block;background:none;text-decoration:none;color:var(--tgs-red);font-weight:900;
}
.woocommerce div.product.tgs-pdp .tgs-pdp__recs ul.products li.product .star-rating{display:none}

/* Botón circular de añadir (enlace AJAX nativo restilizado en woo-shop.php). */
.woocommerce div.product.tgs-pdp .tgs-pdp__recs ul.products li.product .tgs-pcard__add{
  position:relative;z-index:3;flex:none;
  display:inline-flex;align-items:center;justify-content:center;gap:0;
  width:40px;height:40px;min-height:0;padding:0;margin:0;
  background:var(--tgs-ink);color:var(--tgs-card);
  border:0;border-radius:var(--tgs-r-pill);
  font-family:var(--tgs-font);font-size:18px;font-weight:900;line-height:1;
  text-decoration:none;text-align:center;cursor:pointer;
}
.tgs-pdp__recs .tgs-pcard__add::after{content:"";position:absolute;inset:-6px;border-radius:inherit}
.tgs-pdp__recs .tgs-pcard__add:hover{background:var(--tgs-black-2);color:var(--tgs-card)}
.tgs-pdp__recs .tgs-pcard__add:active{transform:scale(.9)}
.tgs-pdp__recs .tgs-pcard__add .tgs-add__label{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.tgs-pdp__recs .tgs-pcard__add.loading{opacity:.6;pointer-events:none}
.tgs-pdp__recs .tgs-pcard__add.added .tgs-add__glyph{visibility:hidden}
.tgs-pdp__recs .tgs-pcard__add.added::before{
  content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:16px;
}
.woocommerce div.product.tgs-pdp .tgs-pdp__recs ul.products li.product .added_to_cart{
  position:relative;z-index:3;flex-basis:100%;margin:0;
  color:var(--tgs-text-meta);font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-align:left;
}

/* ============================================================
   ESCRITORIO (>= 980px)
   ============================================================ */
@media (min-width:980px){
  .single-product .tgs-crumbs{padding:18px var(--tgs-pad-desk) 0;font-size:12px}
  .single-product .woocommerce-notices-wrapper{padding:14px var(--tgs-pad-desk) 0}

  .tgs-pdp{
    display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;
    padding:6px var(--tgs-pad-desk) 48px;
  }
  .tgs-pdp > *{grid-column:1 / -1}
  .tgs-pdp > .tgs-pdp__gallery{grid-column:1;grid-row:1}
  .tgs-pdp > .summary{grid-column:2;grid-row:1}

  .tgs-pdp__gallery{position:sticky;top:22px}
  .woocommerce div.product.tgs-pdp .woocommerce-product-gallery{padding:20px;border-radius:24px}
  .woocommerce div.product.tgs-pdp div.images img{max-height:400px}
  .woocommerce div.product.tgs-pdp div.images .flex-control-thumbs li{width:76px;height:76px}

  .woocommerce div.product.tgs-pdp .product_title{font-size:38px}
  .tgs-pdp__brand{font-size:13.5px}
  .woocommerce div.product.tgs-pdp p.price{font-size:38px}
  .tgs-pdp__sequra{font-size:12.5px}

  .tgs-pdp .variable-items-wrapper .variable-item,
  .tgs-pdp__swatch{width:44px;height:44px;min-width:44px}
  .tgs-pdp__swatch--text,
  .tgs-pdp .variable-items-wrapper .button-variable-item{width:auto}

  .tgs-pdp__buy-row{max-width:520px}
  .tgs-pdp__wa{max-width:520px}

  .tgs-pdp__trust{justify-content:flex-start;gap:36px;padding:28px 0 0;font-size:12px}
  .tgs-pdp__trust-item span{font-size:20px}

  .woocommerce div.product.tgs-pdp .woocommerce-tabs ul.tabs li{flex:0 1 auto;min-width:180px}
  .woocommerce div.product.tgs-pdp .woocommerce-tabs ul.tabs li a{font-size:13px;padding:16px 18px}
  .woocommerce div.product.tgs-pdp .woocommerce-tabs .panel{padding:26px}

  .tgs-pdp__recs h2{font-size:26px;margin-bottom:16px}
  .woocommerce div.product.tgs-pdp .tgs-pdp__recs ul.products{
    display:grid;grid-template-columns:repeat(4,1fr);gap:18px;overflow:visible;padding:0;
  }
  .woocommerce div.product.tgs-pdp .tgs-pdp__recs ul.products li.product{
    flex:none;min-width:0;padding:0;
  }
  .tgs-pdp__recs .tgs-pcard{
    padding:18px;gap:10px;
    border-radius:var(--tgs-r-card-desk);
    transition:transform .2s,box-shadow .2s;
  }
  .woocommerce div.product.tgs-pdp .tgs-pdp__recs ul.products li.product:hover .tgs-pcard{
    transform:translateY(-4px);box-shadow:var(--tgs-shadow-card-hover);
  }
  .tgs-pdp__recs .tgs-pcard__media{height:190px}
  .woocommerce div.product.tgs-pdp .tgs-pdp__recs ul.products li.product .tgs-pcard__media img{
    max-height:180px;
  }
  .tgs-pdp__recs .tgs-pcard__badge{font-size:10.5px;padding:5px 10px}
  .tgs-pdp__recs .tgs-pcard__badge.tgs-badge--offer{font-size:11px}
  .tgs-pdp__recs .tgs-pcard__brand{font-size:10.5px}
  .woocommerce div.product.tgs-pdp .tgs-pdp__recs ul.products li.product .tgs-pcard__title{
    font-size:13.5px;line-height:1.3;min-height:35px;
  }
  .woocommerce div.product.tgs-pdp .tgs-pdp__recs ul.products li.product .tgs-pcard__price{font-size:17px}
  .tgs-pdp__recs .tgs-pcard__price del{font-size:12.5px}

  /* En escritorio el botón crece y muestra la etiqueta (igual que en el listado). */
  .woocommerce div.product.tgs-pdp .tgs-pdp__recs ul.products li.product .tgs-pcard__add{
    width:auto;height:38px;padding:0 16px;gap:7px;font-size:12px;
  }
  .tgs-pdp__recs .tgs-pcard__add .tgs-add__glyph{font-size:15px}
  .tgs-pdp__recs .tgs-pcard__add .tgs-add__label{
    position:static;width:auto;height:auto;overflow:visible;
    clip:auto;clip-path:none;white-space:nowrap;
  }
}