/* ============ VESPER SINGLE PRODUCT v5 - coherencia blanco/gris/morado ============ */
body.single-product{background:#FFFFFF;}
body.single-product .site-main,body.single-product.woocommerce-page .site-main{max-width:1290px;margin:0 auto;padding:5rem 2rem 6rem;background:#FFFFFF;}
body.single-product .entry-header,body.single-product .page-title:not(.product_title){display:none!important;}

/* OCULTAR LUPAS DEFAULT y botón "Ver carrito" */
body.single-product .woocommerce-product-gallery__trigger,body.single-product .zoom-button,body.single-product .product-gallery__zoom,body.single-product .ekit-wid-con .woocommerce-product-gallery__trigger,body.single-product .product-gallery-zoom,body.single-product .kadence-product-image-trigger{display:none!important;}

/* OCULTAR TAB "Información adicional" (redundante) */
/* additional_information tab REACTIVADA en v6 - ahora tiene las notas olfativas */

/* === BREADCRUMBS Geist italic editorial === */
body.single-product .woocommerce-breadcrumb{font-family:'Geist',sans-serif!important;font-size:13.5px!important;font-style:italic!important;font-weight:400!important;color:var(--vsp-tinta-2)!important;margin:0 0 3rem!important;padding:0!important;letter-spacing:0!important;text-transform:none!important;line-height:1.6!important;}
body.single-product .woocommerce-breadcrumb a{color:var(--vsp-tinta-2)!important;text-decoration:none!important;transition:color .3s ease;font-family:'Geist',sans-serif!important;font-style:italic!important;}
body.single-product .woocommerce-breadcrumb a:hover{color:#654F6F!important;}

/* === PRODUCT LAYOUT === */
body.single-product div.product{display:grid;grid-template-columns:1.05fr 1fr!important;gap:5rem!important;margin:0 0 4rem;animation:vspFadeIn .8s var(--vsp-ease) both;}
body.single-product div.product::before,body.single-product div.product::after{display:none!important;content:none!important;}
@keyframes vspFadeIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

/* === GALLERY === */
/* La galeria arranca en la misma linea de la rejilla que la columna del titulo: sin
   desplazamientos ni numeros magicos. Verificado: contenedor, resumen, titulo y galeria
   caen todos en la misma coordenada exacta (0,000 px de diferencia) en todos los
   productos. 'position:relative' no es una eleccion nuestra: Kadence lo impone con mas
   especificidad, se declara para que el codigo diga lo que de verdad ocurre. */
body.single-product .woocommerce-product-gallery{width:100%!important;float:none!important;margin:0!important;opacity:1!important;position:relative!important;align-self:start;}
body.single-product .woocommerce-product-gallery__wrapper{margin:0!important;overflow:hidden;position:relative;border-radius:16px;padding:1.5rem;}
/* NOTA sobre los !important de esta hoja, 13/8/2026.
   En dos pasadas se retiraron 191: primero 77 de reglas enteramente inertes, y despues 114
   mas de reglas mixtas, expandiendo cada propiedad abreviada a sus partes y quitandola solo
   cuando TODAS son inertes. Por eso .product_title conserva !important en font-size pero lo
   perdio en font-family: una tiene rival y la otra no.
   Primera pasada: 77 de 22 reglas cuyas declaraciones NO le ganaban a nadie: se comprobo, para
   cada una, que ninguna otra regla declara esa propiedad sobre esos elementos, en tienda,
   inicio, ficha de producto, carrito, mi cuenta y categoria. Y despues se quitaron en vivo
   sobre el CSSOM comparando el estilo calculado ENTERO de cada elemento afectado: cero
   cambios, y la misma altura de documento.
   Las que siguen marcadas es porque tienen rival real, casi siempre Kadence. No se quitan
   sin repetir la medicion: el procedimiento esta en INSTRUCCIONES-VESPER.md, 2.11. */
body.single-product .woocommerce-product-gallery__image{margin:0;}
body.single-product .woocommerce-product-gallery__image img,body.single-product .woocommerce-product-gallery img{width:100%!important;height:auto!important;aspect-ratio:4/5!important;object-fit:contain!important;display:block!important;transition:transform .25s var(--vsp-ease)!important;}
body.single-product .woocommerce-product-gallery:hover img{transform:none;}
body.single-product .flex-control-thumbs{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:0.5rem!important;margin:0.6rem 0 0!important;padding:0!important;list-style:none!important;}
body.single-product .flex-control-thumbs li{width:100%!important;margin:0!important;list-style:none!important;float:none!important;}
body.single-product .flex-control-thumbs img{width:100%!important;aspect-ratio:1!important;object-fit:cover!important;cursor:pointer;opacity:0.55;transition:opacity .25s ease,transform .25s ease;border:none!important;}
body.single-product .flex-control-thumbs img.flex-active,body.single-product .flex-control-thumbs img:hover{opacity:1;transform:scale(0.97);}

/* === BADGE "OFERTA" Awwwards-style con backdrop blur === */


/* === SUMMARY === */
body.single-product .summary.entry-summary{width:100%!important;float:none!important;margin:0!important;padding:0;display:flex;flex-direction:column;}
body.single-product .product_title.entry-title{font-family:'Geist',sans-serif;font-size:46px!important;line-height:1.05;font-weight:600;letter-spacing:-0.02em;color:#1F271B;margin:0 0 1.25rem;padding:0;text-align:left;}

/* Price */
body.single-product .summary .price{font-family:'Geist',sans-serif;font-weight:600;color:#1F271B;margin:0 0 2rem!important;display:flex;flex-wrap:wrap;align-items:baseline;gap:0.85rem;}
body.single-product .summary .price > .woocommerce-Price-amount{font-size:28px!important;color:#1F271B!important;}
/* Sin opacity: WooCommerce pone 0.5 desde .woocommerce div.product span.price del, mas
   especifico. El 1 que habia aqui nunca se aplico. */
body.single-product .summary .price del{color:rgba(31,39,27,0.70);font-weight:400;font-size:17px;text-decoration:line-through;text-decoration-color:var(--vsp-tinta-2);}
body.single-product .summary .price del .woocommerce-Price-amount{font-size:17px;font-weight:400;color:rgba(31,39,27,0.70);}
body.single-product .summary .price ins{background:transparent!important;color:#654F6F;text-decoration:none;font-weight:600!important;}
body.single-product .summary .price ins .woocommerce-Price-amount{color:#654F6F;font-size:28px!important;}

/* Short description */
body.single-product .woocommerce-product-details__short-description{font-family:'Geist',sans-serif;font-size:14px;line-height:1.8;font-weight:300;color:rgba(31,39,27,0.78);margin:0;padding:1.75rem 0 1.25rem;border-top:1px solid rgba(31,39,27,0.1);}
/* El bloque de caracteristicas cierra la caja que abre la descripcion corta: por eso lleva
   el borde inferior y no lleva el superior. Antes eran el mismo <ul> dentro del mismo marco;
   ahora son dos elementos y hay que mantener el marco entre los dos. */
body.single-product .vsp-caract{list-style:none;margin:0 0 2rem;padding:0 0 1.75rem;border-bottom:1px solid rgba(31,39,27,0.1);display:grid;grid-template-columns:1fr 1fr;gap:0.9rem 1rem;}
body.single-product .vsp-caract__fila{margin:0;padding:0;}
body.single-product .vsp-caract__et{display:block;margin-bottom:0.3rem;color:#654F6F;font-family:'Geist',sans-serif;font-weight:500;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;}
/* Texto corrido y sobrio, no pastillas: la pastilla es el lenguaje de la piramide olfativa.
   Lo unico que marca que se puede pulsar es el subrayado, separado del texto para que no
   parezca un enlace de sistema. */
body.single-product .vsp-caract__vals,body.single-product .vsp-caract__txt{display:block;font-family:'Geist',sans-serif;font-size:12px;font-weight:300;line-height:1.7;letter-spacing:0.02em;color:rgba(31,39,27,0.78);}
body.single-product .vsp-caract__v{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(31,39,27,0.3);transition:color .22s var(--vsp-ease),text-decoration-color .22s var(--vsp-ease);}
body.single-product .vsp-caract__v:hover{color:#654F6F;text-decoration-color:#654F6F;}
body.single-product .woocommerce-product-details__short-description p{margin:0 0 1rem!important;}
body.single-product .woocommerce-product-details__short-description p:last-child{margin-bottom:0!important;}

/* Stock */
body.single-product .stock:not(.out-of-stock){font-family:'Geist',sans-serif;font-size:10px!important;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:#654F6F!important;margin:0 0 1rem!important;display:inline-flex;align-items:center;gap:0.5rem;}
body.single-product .stock.in-stock::before{content:'';display:inline-block;width:6px;height:6px;background:#BFD8CC;border-radius:50%;}
/* El color de "Agotado" lo decide .stock.out-of-stock en la hoja principal (#9a6a2f).
   Aqui habia una segunda declaracion con el rojo antiguo y mas especificidad, asi que el
   ambar elegido no se veia nunca y el aviso salia en rojo de error. Borrada. */

/* === VARIATIONS & FORM CART === */
body.single-product form.cart,body.single-product form.variations_form{margin:0 0 1.5rem!important;padding:0!important;border:none!important;}
body.single-product .variations{width:100%!important;margin:0 0 1.25rem!important;border:none!important;}
body.single-product .variations tr,body.single-product .variations td{display:block!important;width:100%;background:transparent;border:none!important;padding:0!important;}
body.single-product .variations .label{padding:0 0 0.5rem!important;}
body.single-product .variations .label label{font-family:'Geist',sans-serif!important;font-size:10px!important;font-weight:600!important;letter-spacing:0.12em!important;text-transform:uppercase!important;color:#1F271B!important;}
body.single-product .variations td.value{padding:0!important;margin:0 0 1rem;}
body.single-product .variations select{font-family:'Geist',sans-serif;font-size:13px;font-weight:500;letter-spacing:0.04em;color:#1F271B;background:transparent;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2714%27%20height%3D%2714%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231F271B%27%20stroke-width%3D%272%27%3E%3Cpolyline%20points%3D%276%209%2012%2015%2018%209%27%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:right 16px center;border:1px solid rgba(31,39,27,0.18);padding:14px 40px 14px 18px;-webkit-appearance:none;appearance:none;cursor:pointer;width:100%;max-width:280px;transition:border-color .3s ease;}
body.single-product .variations select:focus,body.single-product .variations select:hover{border-color:#1F271B!important;outline:none;}
body.single-product .reset_variations{font-family:'Geist',sans-serif;font-size:10px!important;letter-spacing:0.08em;text-transform:uppercase;color:#654F6F;text-decoration:none;margin-left:1rem;}

/* Las pestanas del producto.
   WooCommerce entrega los paneles visibles y su JavaScript oculta los inactivos al terminar
   de cargar. Medido en vivo: la ficha se pintaba 1173px mas alta en escritorio y 1642px mas
   alta en movil, y luego se encogia de golpe. Aqui se ocultan de entrada, que es el estado
   final. Sin !important a proposito: WooCommerce alterna las pestanas con estilos en linea,
   que mandan sobre esto, y asi el clic sigue funcionando igual. */
body.single-product .woocommerce-tabs > .wc-tab{display:none;}
body.single-product .woocommerce-tabs > .wc-tab:first-of-type{display:block;}

body.single-product .single_variation_wrap{margin-top:1rem;}
body.single-product .woocommerce-variation-price{margin:0 0 1rem;}

body.single-product .woocommerce-variation-add-to-cart,body.single-product form.cart .quantity + .single_add_to_cart_button,body.single-product .variations_form .single_variation_wrap > .woocommerce-variation-add-to-cart{display:flex!important;flex-wrap:wrap;gap:0.75rem;align-items:stretch;}
/* En movil esa zona pasa a rejilla de dos columnas: arriba cantidad y boton de anadir,
   debajo el corazon con su texto al lado. Se cambia esta misma regla en vez de escribir
   otra que la venza. */
@media (max-width:768px){
body.single-product .woocommerce-variation-add-to-cart,body.single-product .variations_form .single_variation_wrap > .woocommerce-variation-add-to-cart{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;column-gap:0.75rem!important;row-gap:0.9rem!important;align-items:center!important;}
body.single-product .woocommerce-variation-add-to-cart > .quantity{grid-column:1;grid-row:1;}
body.single-product .woocommerce-variation-add-to-cart > .single_add_to_cart_button{grid-column:2;grid-row:1;width:100%!important;min-width:0!important;padding-left:0.9rem!important;padding-right:0.9rem!important;margin:0;}
/* El margen izquierdo del corazon existe para cuando va en linea junto al boton; aqui
   va solo en su fila y el hueco lo da la rejilla, asi que se anula. */
body.single-product .woocommerce-variation-add-to-cart > .vesper-wl-btn{grid-column:1;grid-row:2;justify-self:start;margin-left:0;}
/* El texto no se alinea con la columna del boton -quedaba a 91px del corazon- sino que
   arranca justo despues del corazon, con el mismo hueco que hay entre cantidad y boton.
   La medida sale de la propia variable del corazon: si cambia su tamano, esto le sigue. */
body.single-product .woocommerce-variation-add-to-cart > .vsp-wl-hint{grid-column:1/-1;grid-row:2;margin:0 0 0 calc(var(--vsp-wl-tamano,56px) + 0.75rem);text-align:left;}
}

body.single-product .quantity{margin:0!important;}
body.single-product .quantity input.qty{width:70px;text-align:center!important;border:none!important;background:transparent!important;font-family:'Geist',sans-serif;font-size:16px;font-weight:600;color:#1F271B;padding:0;height:52px;-moz-appearance:textfield;}
body.single-product .quantity input::-webkit-outer-spin-button,body.single-product .quantity input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* Add to cart button */
body.single-product .single_add_to_cart_button,body.single-product button.single_add_to_cart_button{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:0.65rem!important;background:#1F271B!important;color:#FFFFFF!important;font-family:'Geist',sans-serif!important;font-size:11px!important;font-weight:550!important;letter-spacing:0.01em!important;padding:0 2.5rem!important;border:1px solid #1F271B!important;transition:background-color .25s var(--vsp-ease),color .25s var(--vsp-ease),border-color .25s var(--vsp-ease),box-shadow .25s var(--vsp-ease),transform 160ms var(--vsp-ease)!important;width:auto!important;min-width:240px!important;height:52px!important;line-height:1!important;text-shadow:none!important;box-shadow:none!important;float:none!important;position:relative;overflow:hidden;}
body.single-product .single_add_to_cart_button::before{content:'';position:absolute;inset:0;background:#654F6F;transform:translateX(-101%);transition:transform .25s var(--vsp-ease);z-index:-1;}
body.single-product .single_add_to_cart_button:hover,body.single-product .single_add_to_cart_button:focus{background:#654F6F!important;color:#FFFFFF!important;border-color:#654F6F!important;}
body.single-product .single_add_to_cart_button:hover::before{transform:translateX(0);}

/* === PRODUCT META v4 - Grid 2 columnas, sin puntos, "Casa" diferenciada === */
/* La columna de la foto tiene dos filas: imagen arriba, referencia/categoria/casa debajo.
   La columna de detalles ocupa las dos. El row-gap se pone a 0 porque duplicaba el
   espacio: las pestanas y los relacionados ya traian su propio margen de 80px y sumaban
   160. Ahora ese 160 lo declara cada seccion, una sola fuente de separacion. */
/* La separacion vertical entre bloques la declara SOLO el margen de cada seccion.
   Antes se sumaba tambien el row-gap de la rejilla (80+80=160px) y quedaba un hueco
   enorme entre la ficha tecnica y las pestanas, y entre las pestanas y los relacionados.
   En movil no se toca: la rejilla apilada sigue con su gap de 3rem.
   Escritorio: la foto y su ficha tecnica comparten columna, apiladas.
   Movil: 'display:contents' disuelve el contenedor, sus hijos vuelven a ser celdas de
   la rejilla y se recupera el orden de siempre -- foto, nombre y precio, y la ficha
   tecnica al final. El contenedor es nuestro y no tiene estilos propios, asi que
   disolverlo no pierde nada (hacerlo sobre la galeria si rompia la maquetacion). */
@media (min-width:1025px){
body.single-product div.product{row-gap:0!important;}
body.single-product div.product > .vsp-col-foto{grid-column:1;align-self:start;min-width:0;}
body.single-product .vsp-col-foto .woocommerce-product-gallery{width:100%!important;}
}
@media (max-width:1024px){
/* Fallo previo: la columna se calculaba en 401px dentro de un contenedor de 317 y la
   foto se salia 85px por la derecha. Una pista '1fr' no puede encoger por debajo del
   contenido minimo de sus hijos, y la imagen impone el suyo; min-width:0 lo libera. */
body.single-product div.product > *{min-width:0!important;}
body.single-product .woocommerce-product-gallery,body.single-product .woocommerce-product-gallery__wrapper,body.single-product .woocommerce-product-gallery img{max-width:100%;}
body.single-product div.product > .vsp-col-foto{display:contents;}
body.single-product div.product > .vsp-col-foto > .woocommerce-product-gallery{order:1;}
body.single-product div.product > .summary{order:2;}
body.single-product div.product > .vsp-col-foto > .product_meta{order:3;}
body.single-product div.product > .woocommerce-tabs{order:4;}
body.single-product div.product > .related.products{order:5;}
}
body.single-product .product_meta{margin:2.5rem 0 0;padding:2rem 0 0;border-top:1px solid rgba(31,39,27,0.1);font-family:'Geist',sans-serif;display:grid;grid-template-columns:repeat(2,1fr)!important;gap:1.5rem 2.5rem;}
body.single-product .product_meta > span{display:flex!important;flex-direction:column;align-items:flex-start;gap:0.5rem;padding:0;border:none;margin:0;font-size:0!important;letter-spacing:0;text-transform:none;line-height:0;}

/* Label custom encima del valor */
body.single-product .product_meta > span::before{display:block!important;font-family:'Geist',sans-serif!important;font-size:10px!important;font-weight:600!important;letter-spacing:0.12em!important;text-transform:uppercase!important;color:#654F6F!important;line-height:1.4!important;margin-bottom:0.1rem!important;}
body.single-product .product_meta .sku_wrapper::before{content:'Referencia';}
body.single-product .product_meta .posted_in::before{content:'Categoría';}
body.single-product .product_meta .tagged_as::before{content:'Notas';}

body.single-product .product_meta .vsp-meta-casa::before{content:'Casa';}

/* Selectores adicionales por si el plugin de marcas usa otras clases */

/* Restaurar visibilidad solo en hijos elemento (las comas como text nodes quedan ocultas) */
body.single-product .product_meta > span > a,body.single-product .product_meta > span > .sku{display:inline-block;line-height:1.5;}

/* SKU value */
body.single-product .product_meta .sku{font-family:'Geist',sans-serif;font-size:14px;font-weight:500;color:#1F271B;letter-spacing:0.1em;font-style:normal;}

/* Links de categoría / notas / casa - Geist italic SIN separadores · */
body.single-product .product_meta > span > a{color:#1F271B!important;text-decoration:none;font-family:'Geist',sans-serif;font-size:15px;font-style:italic;font-weight:400;letter-spacing:0.01em;transition:color .3s ease!important;margin:0 0.85rem 0.15rem 0;}
body.single-product .product_meta > span > a:hover{color:#654F6F!important;}

/* === TABS === */
body.single-product .woocommerce-tabs{grid-column:1 / -1;margin:5rem 0 0!important;padding:3rem 0 0;}
body.single-product .woocommerce-tabs,body.single-product .woocommerce-tabs.wc-tabs-wrapper{border:0!important;border-top:1px solid rgba(31,39,27,0.1)!important;border-radius:0!important;box-shadow:none!important;}
/* Sin linea bajo las pestanas. Ese border-bottom llevaba aqui desde siempre pero no se
   veia: el `border:none!important` de la misma regla lo tapaba. Al quitarle el !important
   en la v272 desperto, y no pinta nada. Se elimina la declaracion, que es la que sobra. */
body.single-product .woocommerce-tabs ul.tabs.wc-tabs{border:none;padding:0;margin:0 0 3.5rem;display:flex;gap:0!important;background:transparent;justify-content:flex-start;}
body.single-product .woocommerce-tabs ul.tabs::before,body.single-product .woocommerce-tabs ul.tabs::after,body.single-product .woocommerce-tabs ul.tabs li::before{display:none!important;content:none!important;}
body.single-product .woocommerce-tabs ul.tabs li{background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;margin:0 3rem 0 0!important;position:relative;box-shadow:none;}
body.single-product .woocommerce-tabs ul.tabs li:last-child{margin-right:0!important;}
body.single-product .woocommerce-tabs ul.tabs li a{font-family:'Geist',sans-serif;font-size:10px!important;font-weight:600!important;letter-spacing:0.12em!important;text-transform:uppercase;color:rgba(31,39,27,0.72)!important;padding:0 0 1.25rem!important;text-decoration:none!important;display:block;transition:color .25s ease!important;position:relative;}
body.single-product .woocommerce-tabs ul.tabs li a::after{content:''!important;display:block!important;position:absolute!important;bottom:-1px!important;left:0!important;width:100%!important;height:1px!important;background:#1F271B!important;border:none!important;transform:scaleX(0)!important;transform-origin:left!important;transition:transform .25s var(--vsp-ease)!important;opacity:1!important;border-radius:0!important;box-shadow:none!important;}
body.single-product .woocommerce-tabs ul.tabs li.active a::after,body.single-product .woocommerce-tabs ul.tabs li:hover a::after{transform:scaleX(1)!important;}
body.single-product .woocommerce-tabs ul.tabs li.active a,body.single-product .woocommerce-tabs ul.tabs li:hover a{color:#1F271B!important;}

/* Tab content */
body.single-product .woocommerce-Tabs-panel{font-family:'Geist',sans-serif;font-size:15px;line-height:1.85;font-weight:300;color:rgba(31,39,27,0.85);max-width:820px;animation:vspTabFade .45s var(--vsp-ease) both;}
@keyframes vspTabFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
body.single-product .woocommerce-Tabs-panel--description > h2:first-child,body.single-product .woocommerce-Tabs-panel--additional_information > h2:first-child,body.single-product .woocommerce-Tabs-panel--reviews > h2:first-child{display:none!important;}
/* Valoraciones alineadas como el resto de pestanas. Habia un script que le ponia
   max-width:880px y margenes automaticos en linea, asi que era el unico panel
   centrado mientras Descripcion y Piramide iban a la izquierda. Ese script se
   elimino; lo que si hacia falta -- deshacer los float que WooCommerce aplica a
   comentarios y formulario -- se resuelve aqui, que es donde corresponde. */
body.single-product #reviews{max-width:none;margin-left:0;margin-right:0;}
body.single-product #reviews #comments,body.single-product #reviews #review_form_wrapper{float:none;width:100%;}
body.single-product #reviews #comments{padding-right:0;margin-bottom:2.4rem;}
body.single-product #review_form textarea{width:100%;max-width:100%;}
body.single-product .woocommerce-Tabs-panel h2,body.single-product .woocommerce-Tabs-panel h3{font-family:'Geist',sans-serif!important;letter-spacing:0.01em;}
body.single-product .woocommerce-Tabs-panel h2{font-size:34px!important;margin:0 0 1.5rem!important;line-height:1.15!important;}
body.single-product .woocommerce-Tabs-panel h3{font-size:19px;margin:2.75rem 0 1.25rem;font-style:normal;color:#654F6F;font-weight:500;line-height:1.3;position:relative;padding-left:1.5rem;}

body.single-product .woocommerce-Tabs-panel p{margin:0 0 1.25rem!important;}
body.single-product .woocommerce-Tabs-panel ul{padding:0;margin:0 0 2rem;list-style:none;}
body.single-product .woocommerce-Tabs-panel ul li{padding:1.1rem 0;border-bottom:1px solid rgba(31,39,27,0.07);margin:0;line-height:1.7;}
body.single-product .woocommerce-Tabs-panel ul li:first-child{border-top:1px solid rgba(31,39,27,0.07);}
body.single-product .woocommerce-Tabs-panel ul li b{color:#654F6F;font-weight:500;display:block;margin-bottom:0.35rem;font-family:'Geist',sans-serif;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;}
body.single-product .woocommerce-Tabs-panel a{color:#654F6F!important;text-decoration:underline;text-decoration-color:rgba(101,79,111,0.4);text-underline-offset:3px;}

/* === RELATED PRODUCTS === */
body.single-product .related.products,body.single-product .upsells.products{grid-column:1 / -1!important;margin:5rem 0 0!important;padding:3.5rem 0 0!important;border-top:1px solid rgba(31,39,27,0.1);clear:both;}
body.single-product .related.products > h2,body.single-product .upsells.products > h2{font-family:'Geist',sans-serif!important;font-size:33px!important;font-weight:600!important;color:#1F271B!important;margin:0 0 3rem!important;text-align:left!important;letter-spacing:0.01em!important;}
body.single-product .related.products ul.products,body.single-product .upsells.products ul.products{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:2rem!important;list-style:none!important;margin:0!important;padding:0!important;}
body.single-product .related.products ul.products li.product,body.single-product .upsells.products ul.products li.product{width:100%!important;margin:0!important;padding:0!important;float:none!important;background:transparent!important;text-align:left!important;}

body.single-product .related.products li.product img,body.single-product .upsells.products li.product img{width:100%!important;aspect-ratio:1!important;object-fit:contain!important;background:transparent;transition:transform .25s var(--vsp-ease)!important;}
body.single-product .related.products li.product:hover img,body.single-product .upsells.products li.product:hover img{transform:scale(1.04);}


/* === PIRÁMIDE OLFATIVA (tab Información adicional rediseñada) === */
/* Renombrar visualmente la tab a "Pirámide Olfativa" */
body.single-product .woocommerce-tabs ul.tabs.wc-tabs li.additional_information_tab a{font-size:0!important;letter-spacing:0!important;}
body.single-product .woocommerce-tabs ul.tabs.wc-tabs li.additional_information_tab a::before{content:'Pirámide Olfativa';font-family:'Geist',sans-serif;font-size:10px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:inherit;display:inline-block;}

/* Tabla shop_attributes estilo pirámide editorial */
body.single-product .woocommerce-Tabs-panel--additional_information{padding:0;}
body.single-product .shop_attributes{font-family:'Geist',sans-serif;border:none;width:100%;max-width:760px;margin:0;}
body.single-product .shop_attributes tbody{display:flex;flex-direction:column;gap:0;}
body.single-product .shop_attributes tr{display:grid;grid-template-columns:170px 1fr;gap:2rem;border-bottom:1px solid rgba(31,39,27,0.12)!important;padding:1.75rem 0;background:transparent;align-items:start;}
body.single-product .shop_attributes tr:last-child{border-bottom:none!important;}
/* El relleno izquierdo deja sitio al guion del ::before de abajo. Estaba escrito en una
   segunda declaracion que nunca llegaba a aplicarse, porque el `padding:0!important` de
   esta misma regla la tapaba: el guion se montaba sobre el texto. Ahora va en una sola
   declaracion y no hay nada que interpretar. */
body.single-product .shop_attributes th{font-family:'Geist',sans-serif;font-weight:600;color:#654F6F;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;padding:0 0 0 1.25rem;background:transparent!important;border:none;text-align:left;line-height:1.5;position:relative;}
body.single-product .shop_attributes td{font-size:0;color:rgba(31,39,27,0.85);font-weight:300;padding:0;background:transparent!important;border:none;font-style:normal;line-height:1.7;letter-spacing:0;}
body.single-product .shop_attributes td p{margin:0!important;display:flex;flex-wrap:wrap;gap:0.4rem 0.5rem;}
body.single-product .shop_attributes td p > *{font-size:13px!important;}

/* Cada nota como pill clickeable */
body.single-product .shop_attributes td a{display:inline-flex;align-items:center;padding:0.4rem 0.95rem;background:transparent;color:#1F271B!important;border:1px solid rgba(31,39,27,0.18);border-radius:30px;font-family:'Geist',sans-serif;font-size:11px!important;font-weight:500;letter-spacing:0.04em;text-decoration:none;text-transform:none;transition:background-color .25s var(--vsp-ease),color .25s var(--vsp-ease),border-color .25s var(--vsp-ease),box-shadow .25s var(--vsp-ease),transform 160ms var(--vsp-ease)!important;line-height:1.3;}
/* Al pulsar la foto del producto se abre el visor (PhotoSwipe) y su boton de cerrar estaba
   en display:none: medido, 0x0, con la barra superior visible pero vacia. El visitante se
   quedaba dentro sin ninguna pista de como salir -solo la tecla Esc, que en un movil no
   existe-. Se devuelve el boton y se le pinta una X propia, para no depender del sprite del
   plugin, que es justo lo que se veia mal y probablemente el motivo de que se ocultara. */
.pswp__button--close{display:block!important;width:44px!important;height:44px!important;background:none!important;opacity:1!important;position:relative;}
.pswp__button--close::before{content:'\00d7';position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-family:'Geist',sans-serif;font-size:30px;line-height:1;color:#FFFFFF;}
/* El fondo del visor era negro solido: la pagina desaparecia y el unico modo de volver era
   el boton. Translucido se ve la tienda detras, y eso convierte el "tocar fuera para salir"
   en un gesto evidente en lugar de una adivinanza.
   Se cambia el COLOR a rgba, no la opacidad: PhotoSwipe anima la opacidad por JavaScript al
   abrir y cerrar, y pisarla desde CSS le romperia la transicion. */
/* Dos zonas, no una: el area de la FOTO conserva su fondo gris oscuro a su tamano -como se
   ve dentro de la ficha- y solo lo que queda a los lados es translucido, para que se
   entienda que ahi fuera esta la tienda y que tocando ahi se sale.
   Un unico velo uniforme no comunicaba eso: o tapaba todo o aclaraba tambien la foto. */
/* LA CAUSA, medida en su momento: la cabecera fija tenia z-index 9000 y el visor 1500, asi que la cabecera
   se pintaba ENCIMA del visor. Preguntandole al navegador que elemento hay en el punto exacto
   del boton de cerrar (1644, 32) respondia HEADER.vesper-header: el boton no estaba oculto ni
   era invisible, estaba debajo de la cabecera. Se veia tambien en la pantalla, donde la
   cabecera aparecia a plena luz mientras el resto quedaba atenuado.
   Un visor de imagen es una capa modal: mientras esta abierto debe estar por encima de todo,
   cabecera incluida. Se le da 10000. Desde la v515 la cabecera vale 50 en toda la web y ya no
   compite, pero el 10000 se queda: es lo que lo pone tambien por encima de los paneles. */
body.single-product .pswp{z-index:10000!important;}
body.single-product .pswp .pswp__bg{background:rgba(20,16,22,0.55)!important;}
body.single-product .pswp .pswp__img{background:#F5F5F4;}

/* El boton de cerrar no se veia porque nuestra propia regla de arriba -la que oculta el icono
   de lupa sobre la foto- incluia tambien `.pswp__button`, que son los controles DEL VISOR y no
   tienen nada que ver con la lupa. Se quito de ese selector y el visor recupera su boton
   nativo. No se le pone ningun estilo encima: si hubo que retocarlo tres veces fue por estar
   peleando con una regla que no debia existir.
   Lo unico que se conserva es evitar que la barra se desvanezca sola tras unos segundos de
   inactividad, que es comportamiento del plugin y en una tienda deja al visitante sin salida
   visible. */
body.single-product .pswp .pswp__ui--idle .pswp__top-bar,
body.single-product .pswp .pswp__top-bar{opacity:1!important;}

/* El boton nativo del visor, estilizado. No se sustituye ni se le pone nada encima: es el
   mismo elemento que trae PhotoSwipe, con su comportamiento intacto.
   Se le quita la imagen de sprite -que es lo que fallaba: si esa imagen no carga, el boton
   queda en blanco y parece que no existe- y se dibuja la X con tipografia, que siempre se ve.
   La sombra la mantiene legible tanto sobre una foto clara como sobre una oscura. */
/* Medido con el visor abierto: el boton existe, mide 48x48, esta visible y su X se pinta en
   blanco a 34px. No se veia por CONTRASTE, no por estar oculto: arriba a la derecha lo que
   hay detras es la cabecera blanca de la tienda vista a traves del velo translucido, y el
   degradado de la barra solo aporta un 27% de negro a esa altura. Blanco sobre casi blanco.
   Se le da al propio boton un circulo oscuro, que es lo unico que garantiza que se lea sobre
   una foto clara, sobre una oscura o sobre la pagina. */
/* La barra del visor, estilizada -no sustituida-. Es la misma que trae PhotoSwipe.
   Sus iconos venian de una imagen de sprite: generica, ajena a la tipografia de Vesper y, si
   esa imagen no carga, invisible. Se dibujan con tipografia, que siempre se ve, y los tres
   botones comparten la misma pastilla oscura para que se lean sobre cualquier foto.
   La barra deja de ser una franja con degradado y pasa a ser solo aire con los botones
   alineados a la derecha, separados del borde. */
body.single-product .pswp .pswp__top-bar{background:none!important;height:auto!important;padding:16px 18px 0 0!important;display:flex!important;justify-content:flex-end;align-items:center;gap:10px;}
body.single-product .pswp .pswp__top-bar .pswp__button{background:rgba(20,16,22,0.55)!important;border-radius:50%!important;width:44px!important;height:44px!important;opacity:1!important;position:relative;margin:0!important;box-shadow:0 2px 10px rgba(0,0,0,0.22);transition:background-color .2s ease;}
body.single-product .pswp .pswp__top-bar .pswp__button:hover{background:rgba(20,16,22,0.88)!important;}
body.single-product .pswp .pswp__top-bar .pswp__button::before{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-family:'Geist',sans-serif;font-weight:300;color:#FFFFFF;line-height:1;}
body.single-product .pswp .pswp__button--close::before{content:'\00d7';font-size:30px;}
body.single-product .pswp .pswp__button--zoom::before{content:'\002b';font-size:26px;}
/* Los botones de pantalla completa y compartir no se ocultan con CSS: no se crean. Ver
   vesper_core_visor_opciones(). Un boton oculto sigue existiendo en el DOM, sigue siendo
   enfocable con el teclado y sigue teniendo su funcion detras. */

body.single-product .shop_attributes td p.vsp-notas{column-gap:1rem;}
body.single-product .shop_attributes td .vsp-nota{display:inline-flex;align-items:center;padding:0.4rem 0.95rem;background:transparent;color:#1F271B;border:1px solid rgba(31,39,27,0.18);border-radius:30px;font-family:'Geist',sans-serif;font-size:11px!important;font-weight:500;letter-spacing:0.04em;text-transform:none;line-height:1.3;}
body.single-product .shop_attributes td a:hover{background:#1F271B!important;color:#FFFFFF!important;border-color:#1F271B!important;}
body.single-product .shop_attributes td a:not(:last-child)::after{content:none!important;}

/* Espacio superior coherente con Carrito y Finalizar compra (el tema apilaba 80+80+80px) */
body.single-product .content-area{margin-top:0;}
body.single-product .content-container,body.single-product .content-container.site-container{padding-top:0!important;}
body.single-product .entry-content-wrap{padding-top:0!important;}
body.single-product .woocommerce-breadcrumb{margin-top:0!important;}

/* === RESPONSIVE === */
@media (max-width:1024px){body.single-product .site-main{padding:3rem 2rem 4rem!important;}/* SECCION 3 de la consolidacion: ficha de producto.
   Medido antes: hasta 1024px la ficha iba en UNA columna, asi que a ese ancho la foto ocupaba
   945px de lado a lado y los datos quedaban debajo, fuera de vista. Solo a partir de 1100 se
   partia en dos.
   El corte baja a 900: por debajo -movil y tablet vertical- una columna sigue siendo lo
   correcto, porque dos quedarian estrechas; de 901 en adelante caben las dos.
   Medido con el cambio: a 1024 la galeria pasa de 945px a 459px y los datos vuelven al lado. */
@media(max-width:900px){body.single-product div.product{grid-template-columns:1fr!important;gap:3rem!important;}}body.single-product .woocommerce-product-gallery{position:static!important;}body.single-product .product_title.entry-title{font-size:42px!important;}body.single-product .related.products > h2{font-size:30px!important;}/* Los relacionados sufrian lo mismo que la tienda: dos columnas hasta 1024 daban tarjetas de
   328 a 456px, mas grandes que en escritorio (379-387px). Con tres en ese rango bajan a
   208-294px, el tamano de siempre. Por debajo de 600 mandan las dos columnas del telefono,
   que ya estaban puestas mas abajo. */
body.single-product .related.products ul.products{grid-template-columns:repeat(3,minmax(0,1fr))!important;}}
@media (max-width:600px){body.single-product .site-main{padding:2.5rem 1.25rem 3.5rem!important;}body.single-product .product_title.entry-title{font-size:32px!important;}body.single-product .summary .price > .woocommerce-Price-amount,body.single-product .summary .price ins .woocommerce-Price-amount{font-size:22px!important;}body.single-product .single_add_to_cart_button{width:100%!important;}body.single-product .woocommerce-tabs ul.tabs.wc-tabs{gap:0!important;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}body.single-product .woocommerce-tabs ul.tabs.wc-tabs::-webkit-scrollbar{display:none;}body.single-product .woocommerce-tabs ul.tabs li{margin-right:1.4rem!important;flex:0 0 auto;}body.single-product .woocommerce-tabs a,body.single-product .woocommerce-Tabs-panel *{-webkit-tap-highlight-color:transparent;}body.single-product .related.products > h2{font-size:26px!important;}body.single-product .related.products ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0.9rem!important;}body.single-product .vsp-caract{grid-template-columns:1fr;}body.single-product .product_meta{grid-template-columns:1fr!important;}}
@media (prefers-reduced-motion: reduce){body.single-product *{transition:none!important;animation:none!important;}}