/* =========================================================
   FICHA DE PRODUCTO (single product) — Naccato sobre Woodmart
   ---------------------------------------------------------
   Mejoras presentacionales de la pagina individual de producto.
   Solo se encola en is_product() (ver functions.php). La logica
   PHP (curado de atributos, saneo de descripcion, bloque de
   confianza) vive en inc/single-product.php; el badge/precio sin
   IVA y el boton Caja x12 vienen del plugin / functions.php y NO
   se tocan aca. Depende de los tokens de variables.css.

   Secciones:
     1. Reorden del summary (tabla de atributos debajo del CTA)
     2. Galeria (top-align, sticky desktop, contencion, placeholder)
     3. Tabla de atributos curada
     4. Bloque de confianza (.naccato-trust)
     5. Descripcion corta saneada
     6. Zona de compra (UX-022): stock, espaciado de precio, layout botones
     7. Refuerzos CAM-005F / CAM-005H (ocultar precio x unidad / valoraciones)
     8. Compartir (CAM-005J): share propio WhatsApp + Facebook
   ========================================================= */

/* ---------------------------------------------------------
   1. REORDEN DEL SUMMARY
   En Woodmart, .summary-inner contiene todo como hijos directos
   (breadcrumbs, titulo, precio, descripcion corta, tabla de
   atributos, stock, form de carrito, tabs, meta...). Lo pasamos a
   flex column y empujamos la tabla de atributos, el acordeon de
   tabs, la meta y el share DEBAJO del bloque de compra, para que
   el fold sea: titulo -> precio -> descripcion corta -> stock ->
   cantidad + Caja x12 + Agregar al carrito -> confianza.
   --------------------------------------------------------- */

.single-product .summary .summary-inner {
    display: flex;
    flex-direction: column;
}

/* Todo arranca en order:0 (orden de origen). Solo empujamos hacia abajo
   los bloques pesados/secundarios. */
/* CAM-005I — la descripcion corta baja DEBAJO del bloque de compra
   (precio -> sin IVA -> stepper/Caja/Agregar -> confianza -> DESCRIPCION).
   En origen el excerpt sale a prio 20 (entre precio y add-to-cart); con
   order:2 lo sacamos del grupo order:0 y lo dejamos despues del CTA y la
   confianza, pero antes de la tabla de atributos (order:3). */
.single-product .summary .summary-inner > .woocommerce-product-details__short-description { order: 2; }
.single-product .summary .summary-inner > table.shop_attributes { order: 3; }
.single-product .summary .summary-inner > .woocommerce-tabs     { order: 4; }
.single-product .summary .summary-inner > .product_meta         { order: 5; }
.single-product .summary .summary-inner > .wd-social-icons,
.single-product .summary .summary-inner > .naccato-share        { order: 6; }

/* Aire consistente sobre los bloques reubicados (flex no colapsa margenes). */
.single-product .summary .summary-inner > table.shop_attributes,
.single-product .summary .summary-inner > .woocommerce-tabs {
    margin-top: var(--space-lg);
}

/* ---------------------------------------------------------
   2. GALERIA
   El contenedor .product-image-summary-inner es un grid de 2
   columnas (imagen | summary). Por defecto align-items: stretch
   estira la columna de imagen al alto del summary y la unica foto
   queda centrada verticalmente -> gran espacio en blanco arriba.
   La alineamos arriba y, en desktop, la hacemos sticky.
   --------------------------------------------------------- */

.single-product .product-image-summary-inner {
    align-items: start;
}

/* VENTANA DE ALTURA FIJA + CONTAIN.
   Las fotos del catalogo vienen sin normalizar (scrapeadas de ML:
   verticales 300x610, cuadradas 500x500, grandes 1200x1200). Sin un
   alto acotado, object-fit:contain no tiene caja a la cual ajustarse
   y la imagen toma su alto natural por ratio -> cada ficha mide
   distinto y las verticales quedan larguisimas. Le damos al slide
   (.wd-carousel-item) y al figure un alto fijo, y la imagen lo llena
   en contain centrado: toda foto entra en el mismo marco sin
   deformarse.

   El carousel de Woodmart (Swiper) NO impone un alto inline a la
   .wd-carousel-wrap salvo con la opcion "Main carousel auto height"
   (product_slider_auto_height), que esta OFF y que ademas haria lo
   contrario (seguir el alto natural de cada slide). Aun asi acotamos
   el wrap/inner para que el slide no se estire si en el futuro se
   activara. Funciona igual con galeria de 1 imagen (este caso,
   thumbs-position-without) y de N imagenes (cada slide hereda el alto
   del marco). */
.single-product .woocommerce-product-gallery .wd-carousel-wrap,
.single-product .woocommerce-product-gallery .wd-carousel-inner {
    max-height: var(--naccato-gallery-h, 520px);
}

.single-product .woocommerce-product-gallery .wd-carousel-item,
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
    height: var(--naccato-gallery-h, 520px);
    max-height: var(--naccato-gallery-h, 520px);
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery .wp-post-image,
.single-product .woocommerce-product-gallery img {
    width: 100%;
    height: 100%;
    max-height: var(--naccato-gallery-h, 520px);
    object-fit: contain;
    object-position: center;
}

@media (max-width: 768px) {
    .single-product .woocommerce-product-gallery {
        --naccato-gallery-h: 360px;
    }
}

/* Barra sticky de producto (wd-sticky-btn): el thumbnail de la barra fija
   inferior usaba object-fit:cover sin un recuadro acotado, asi las fotos
   verticales chicas (ej. lata 260x528) se estiraban y le agrandaban el alto
   a toda la barra. Lo encerramos en un cuadro fijo con contain, centrado y
   sin recorte, para que la barra mantenga su altura con cualquier foto. */
.wd-sticky-btn .wd-sticky-btn-thumbnail {
    width: 56px;
    min-width: 56px;
    height: 56px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wd-sticky-btn .wd-sticky-btn-thumbnail img {
    width: 100%;
    height: 100%;
    max-height: 56px;
    object-fit: contain;
    object-position: center;
}

/* Placeholder prolijo cuando el producto no tiene foto: Woodmart/WC
   agrega el modificador --without-images. Le damos un alto contenido
   y fondo de superficie para que no se vea roto ni estirado. */
.single-product .woocommerce-product-gallery--without-images {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-product .woocommerce-product-gallery--without-images img {
    /* Reset de la ventana fija: el placeholder no usa el marco de altura,
       se centra a 55% de ancho con su alto natural. */
    width: auto;
    height: auto;
    max-width: 55%;
    max-height: none;
    object-fit: contain;
    opacity: 0.6;
}

@media (min-width: 1024px) {
    /* La columna de imagen acompana el scroll mientras el summary y los
       atributos son largos. Offset generoso para el header sticky. */
    .single-product .product-image-summary-inner > .product-images {
        position: sticky;
        top: 110px;
        align-self: start;
    }
}

/* ---------------------------------------------------------
   3. TABLA DE ATRIBUTOS CURADA
   Ya filtrada/deduplicada en PHP. Aca solo le damos un estilo
   prolijo y legible, coherente con la tipografia de marca.
   --------------------------------------------------------- */

.single-product table.shop_attributes {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: var(--text-sm);
}

.single-product table.shop_attributes th,
.single-product table.shop_attributes td {
    padding: 0.6em 0.75em;
    border: none;
    border-bottom: 1px solid var(--color-border);
    line-height: 1.4;
    vertical-align: top;
}

.single-product table.shop_attributes th {
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
    width: 42%;
    text-transform: none;
}

.single-product table.shop_attributes td {
    text-align: right;
    color: var(--color-text-primary);
}

/* Zebra suave para escanear filas. Usa crema fijo (#FAF8F5): antes apuntaba
   a --color-bg-surface, pero ese token ahora es blanco y la zebra desaparecia. */
.single-product table.shop_attributes tr:nth-child(odd) th,
.single-product table.shop_attributes tr:nth-child(odd) td {
    background-color: #FAF8F5;
}

/* En mobile, apilar label/valor: los valores largos sin espacios
   (ej. "Con vencimiento,Contiene liquido,Fragil...") alineados a la
   derecha quedan ilegibles en pantallas angostas. */
@media (max-width: 480px) {
    .single-product table.shop_attributes th,
    .single-product table.shop_attributes td {
        display: block;
        width: 100%;
        text-align: left;
    }
    .single-product table.shop_attributes th {
        border-bottom: none;
        padding-bottom: 0;
    }
    .single-product table.shop_attributes td {
        padding-top: 0.15em;
        color: var(--color-text-secondary);
    }
}

/* ---------------------------------------------------------
   4. BLOQUE DE CONFIANZA (.naccato-trust)
   Render por PHP debajo del CTA. Lista de items factuales con
   icono SVG de marca. Touch-friendly y accesible.
   --------------------------------------------------------- */

.naccato-trust {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: var(--space-md) 0;
    padding: var(--space-md);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}

.naccato-trust__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 44px;
}

.naccato-trust__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background-color: var(--color-brand-pale);
    color: var(--color-brand-primary);
}

.naccato-trust__icon svg {
    width: 20px;
    height: 20px;
}

.naccato-trust__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.naccato-trust__title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}

.naccato-trust__sub {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    /* secondary (#555), no muted (#888): muted sobre la superficie clara no
       alcanza el 4.5:1 AA para texto chico. */
    color: var(--color-text-secondary);
}

/* En pantallas anchas, los items en fila para no alargar el summary. */
@media (min-width: 768px) {
    .naccato-trust {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .naccato-trust__item {
        flex: 1 1 0;
        min-width: 160px;
    }
}

/* ---------------------------------------------------------
   5. DESCRIPCION CORTA SANEADA
   Ya limpiada en PHP (sin boilerplate ni separadores). Solo
   aseguramos legibilidad y un interlineado comodo.
   --------------------------------------------------------- */

.single-product .woocommerce-product-details__short-description {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.single-product .woocommerce-product-details__short-description p {
    margin: 0 0 var(--space-sm);
}

/* ---------------------------------------------------------
   ACCESIBILIDAD / FOCUS
   Estado de foco consistente con el resto de los controles de marca.
   --------------------------------------------------------- */

.single-product .summary a:focus-visible,
.single-product .woocommerce-tabs [role="tab"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 98, 122, 0.15);
    border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------
   6. ZONA DE COMPRA — AJUSTES UX-022 (pedido #9 de Matias)
   9a stock · 9b espaciado del precio · 9c layout de botones.
   El tab "Shipping" (9d) se oculta por PHP en inc/single-product.php.
   --------------------------------------------------------- */

/* 9a — Ocultar el contador de stock "X disponibles".
   Se mantiene visible .out-of-stock (Agotado): info de compra critica.
   display:none lo saca del flujo (summary-inner separa con margenes, no
   con gap), asi que no deja hueco en blanco. */
.single-product .stock.in-stock {
    display: none;
}

/* 9b — Pegar "Precio sin IVA" al precio principal.
   Ambas lineas viven dentro de <p class="price">. Colapsamos el
   margin-bottom del bloque de precio y bajamos a 2px el margin-top
   inline (4px) que el plugin pone en .naccato-price-ex-tax. La linea de
   precio por unidad (.naccato-unit-price) es un hermano con su propio
   margin-top, asi que conserva su separacion normal. */
.single-product .summary .price {
    margin-bottom: 4px;
}
.single-product .naccato-price-ex-tax {
    margin-top: 2px !important; /* pisa el inline style del plugin */
}

/* 9c — Stepper + boton "Caja xN" + "Agregar al carrito" en una fila.
   El form .cart pasa a flex. OJO: el orden REAL del DOM es
   [.naccato-box-btn][.quantity][.single_add_to_cart_button] porque el
   boton de caja se engancha en woocommerce_before_add_to_cart_button,
   que en simple.php corre ANTES del stepper. Por eso reordenamos con
   `order` para el orden visual pedido: [- 1 +] | [Caja xN] | [Agregar]. */
.single-product .summary .cart {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-sm, 8px);
}
.single-product .summary .cart .quantity {
    order: 1;
    flex: 0 0 auto;
    margin-bottom: 0;
}
.single-product .summary .cart .naccato-box-btn {
    order: 2;
    flex: 0 0 auto;
    margin: 0;
    width: auto !important; /* cancela el width:100% del @media (max-width:480px) */
    align-self: stretch;
}
.single-product .summary .cart .single_add_to_cart_button {
    order: 3;
    flex: 1 1 auto;
    min-width: 120px;
}

/* ---------------------------------------------------------
   7. REFUERZOS CAM-005F / CAM-005H (barrido ficha + grilla)
   La fuente real se quita por PHP (inc/single-product.php:
   naccato_sp_strip_summary_bits). Estos son cinturones CSS por si
   algun preset/widget de WoodMart reinyecta las estrellas o el precio
   por unidad en la ficha. Acotado a .single-product .summary: no toca
   la grilla, ni el badge, ni los related fuera del summary.
   --------------------------------------------------------- */

/* 005H — valoraciones / estrellas en el summary (rating WC). */
.single-product .summary .woocommerce-product-rating,
.single-product .summary > .star-rating {
    display: none;
}

/* 005F — linea "Precio por kilo/litro" en la ficha. */
.single-product .summary .naccato-unit-price {
    display: none;
}

/* 005H — seccion #reviews completa. El tab "Valoraciones" y las estrellas ya
   se quitan por PHP (naccato_sp_hide_reviews_tab / strip de single_rating), pero
   WoodMart imprime el bloque de resenas (form "Se el primero en valorar...")
   llamando comments_template() FUERA del sistema de tabs, asi que se renderiza
   igual debajo del area de tabs. Lo ocultamos. */
.single-product #reviews,
.single-product .woocommerce-Reviews {
    display: none;
}

/* ---------------------------------------------------------
   8. COMPARTIR (CAM-005J) — share propio WhatsApp + Facebook
   Render por PHP (naccato_sp_share_buttons). Pills on-brand,
   accesibles. Reemplaza .wd-social-icons del tema.
   --------------------------------------------------------- */

/* Cinturon: ocultar la fila de share NATIVA de WoodMart (.wd-social-icons
   .product-share) si llegara a renderizarse en el summary. La fuente real se
   quita por PHP (naccato_sp_replace_share, ahora en 'wp':1001), esto es seguro
   extra. Acotado a .single-product .summary: NO toca el bloque .wd-social-icons
   de contenido (footer / app stores) ni nuestra fila propia .naccato-share. */
.single-product .summary .wd-social-icons.product-share {
    display: none;
}

.naccato-share {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.naccato-share__label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.naccato-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background-color: var(--color-brand-pale);
    color: var(--color-brand-primary);
    transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.naccato-share__btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.naccato-share__btn:hover {
    background-color: var(--color-brand-primary);
    color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
    .naccato-share__btn:hover {
        transform: translateY(-1px);
    }
}

.naccato-share__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 98, 122, 0.15);
}