/* =========================================================
   COMPONENTES CUSTOM NACCATO sobre Woodmart
   Portados desde el child de Storefront (naccato-child).
   La logica PHP vive en functions.php (Caja x12) y en el plugin
   naccato-gbp-sync (precio sin IVA + descuento UX-001); aca solo
   estan los estilos. Dependen de los tokens de variables.css.
   ========================================================= */

/* ---------------------------------------------------------
   FICHA DE PRODUCTO — boton "caja cerrada" (UX-002)
   Va junto al stepper de cantidad nativo de WooCommerce.
   Neutro: no compite con "Agregar al carrito" (boton de marca).
   --------------------------------------------------------- */

.naccato-box-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 44px;
    padding: 0.5em 0.9em;
    margin: 0 0 var(--space-sm) var(--space-sm);
    vertical-align: top;

    /* Skin Vegetables: el boton secundario "Caja xN" lleva un relleno crema
       sutil propio. Antes usaba --color-bg-surface (gris #f7f7f7), pero ese
       token ahora es blanco y se confundiria con las cards blancas. */
    background-color: #FAF8F5;
    color: var(--color-brand-primary);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);

    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-sm);
    text-transform: none;
    letter-spacing: 0.01em;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;

    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.naccato-box-btn:hover,
.naccato-box-btn:focus-visible {
    background-color: var(--color-brand-pale);
    border-color: var(--color-brand-primary);
    color: var(--color-brand-dark);
}

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

.naccato-box-btn__icon {
    width: 18px;
    height: 18px;
    flex: none;
}

.naccato-box-btn__label {
    display: inline-block;
}

/* En mobile: reset del margen izquierdo (el cart es flex, el gap lo maneja). */
@media (max-width: 480px) {
    .naccato-box-btn {
        margin-left: 0;
    }
}

/* ---------------------------------------------------------
   GRILLA DE CATALOGO — boton "caja cerrada" (CAM-006)
   Va debajo del precio, dentro de la card. A diferencia del
   boton de la ficha, agrega directo al carrito con 1 click
   (AJAX nativo), asi que lleva su propio label "Caja x N".
   --------------------------------------------------------- */

.naccato-box-btn-loop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 40px;
    padding: 0.35em 0.7em;
    margin-top: var(--space-xs);

    background-color: #FAF8F5;
    color: var(--color-brand-primary);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);

    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-sm);
    text-transform: none;
    letter-spacing: 0.01em;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;

    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.naccato-box-btn-loop:hover,
.naccato-box-btn-loop:focus-visible {
    background-color: var(--color-brand-pale);
    border-color: var(--color-brand-primary);
    color: var(--color-brand-dark);
    text-decoration: none;
}

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

.naccato-box-btn-loop__icon {
    width: 14px;
    height: 14px;
    flex: none;
}

.naccato-box-btn-loop__label {
    display: inline-block;
}

/* Placeholder invisible del boton "Caja xN": hereda toda la caja del boton real
   (.naccato-box-btn-loop -> min-height 40px + margin-top + padding + borde) pero
   no se pinta ni es interactivo. Reserva su espacio en las cards SIN venta por
   caja para que el CTA "Agregar al carrito" alinee en la misma altura Y en toda
   la fila / carrusel (el grid float de WoodMart no iguala alturas). */
.naccato-box-btn-loop--placeholder {
    visibility: hidden;
    pointer-events: none;
}

/* CTA primario "Agregar al carrito" del LOOP (boton core de WoodMart).
   Unificamos SOLO forma/tamano/tipografia con el boton secundario "Caja xN"
   (.naccato-box-btn-loop): mismo radio (--radius-md = 10px), misma altura
   (min-height 40px) y mismo font-size (--text-sm ~13px), y matamos el
   text-transform: capitalize del core. NO se toca color ni relleno: la jerarquia
   se mantiene (primario = solido oscuro sin borde; secundario = outline claro con
   borde). Se EXCLUYE el mega-menu (.naccato-mm-featured-products) y el propio
   boton de caja via :not(.naccato-box-btn-loop) (que tambien lleva
   .add_to_cart_button). Los !important son necesarios porque el skin de WoodMart
   pinta radio/tipografia de estos botones con CSS de Theme Settings de alta
   especificidad. NO afecta la ficha (usa .single_add_to_cart_button bajo
   .single-product .summary .cart, con su propio patron en single-product.css). */
.wd-products:not(.naccato-mm-featured-products .wd-products)
    .product-grid-item a.add_to_cart_button:not(.naccato-box-btn-loop) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 40px !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-sm) !important;
    text-transform: none !important;
}

/* ---------------------------------------------------------
   DESCUENTO POR PRODUCTO (UX-001)
   Capa visual: precio referencia tachado + precio cliente + badge "X% OFF".
   La inyecta el plugin via woocommerce_get_price_html; sirve en el loop
   del catalogo y en la ficha.
   --------------------------------------------------------- */

.naccato-price-wrap {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25em;
}

.naccato-price-original {
    text-decoration: line-through;
    color: var(--color-text-muted);
    font-size: 0.85em;
    margin-right: 0.4em;
}

/* Precio "ahora": reusa los tokens de marca del tema para .price */
.naccato-price-current,
.naccato-price-current .woocommerce-Price-amount {
    color: var(--color-brand-primary);
    font-family: var(--font-body);
    font-weight: 700;
}

/* Pill inline de ahorro, estilo "X% OFF".
   Color via token semantico --color-discount-badge-bg (verde de marca =
   ahorro); reapuntar ese token cambia el color del badge en 1 linea. */
.naccato-discount-badge {
    display: inline-block;
    background-color: var(--color-discount-badge-bg);
    color: #ffffff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.7em;
    line-height: 1.2;
    padding: 0.15em 0.55em;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: middle;
}

@media (max-width: 600px) {
    /* En cards angostas el badge no debe desbordar */
    .naccato-price-wrap {
        gap: 0.2em;
    }
    .naccato-discount-badge {
        font-size: 0.65em;
        padding: 0.12em 0.45em;
    }
}

/* Reserva de alto de la linea de precio en el LOOP (grid de catalogo + carrusel
   de destacados del home; ambos usan .wd-products .product-grid-item). El caso
   "con descuento" (.naccato-price-wrap: precio tachado + actual + badge) puede
   ocupar 2 lineas y el "sin descuento" 1 sola, desalineando cards vecinas. La
   reserva de ~2 lineas (em -> escala con la tipografia del precio) vive en el
   contenedor .wrap-price puesto en columna, para que el precio quede alineado
   arriba y el min-height absorba la diferencia sin apilar contenido inline.
   Se EXCLUYE el mega-menu (reglas propias) y NO afecta la ficha (usa p.price en
   el summary, no .product-grid-item). Valor tunable si al verificar en el
   navegador el descuento envuelve mas/menos de lo previsto. */
.wd-products:not(.naccato-mm-featured-products .wd-products)
    .product-grid-item .wrap-price {
    display: flex;
    flex-direction: column;
    min-height: 2.8em;
}

/* ---------------------------------------------------------
   SELLOS (BADGES) DE PRODUCTO sobre la imagen
   Sistema config-driven (inc/product-badges.php). Stack arriba-izquierda
   (Sin T.A.C.C. oficial + sellos custom, tope 2) y chip de origen abajo-izq.
   - Sin T.A.C.C.: logo OFICIAL (assets/img/sin-tacc.png), render imagen.
   - Vegano / Sin lactosa / Sin azucar / Sushi: chips DESCRIPTIVOS custom
     (icono SVG + texto), color por variante; el color nunca es el unico
     indicador (siempre hay texto).
   --------------------------------------------------------- */

/* Contexto de posicionamiento. Woodmart ya los declara relative, pero lo
   reforzamos para que los sellos anclen aunque cambie el markup del theme. */
.product-element-top,
.woocommerce-product-gallery {
    position: relative;
}

/* Contenedores absolutos */
.naccato-badges {
    position: absolute;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    pointer-events: none; /* no interceptar el click del producto */
}

.naccato-badges--diet {
    top: var(--space-sm);
    left: var(--space-sm);
    align-items: flex-start;
}

.naccato-badges--origin-wrap {
    bottom: var(--space-sm);
    left: var(--space-sm);
}

.naccato-badges--content-wrap {
    bottom: var(--space-sm);
    right: var(--space-sm);
    align-items: flex-end;
}

.naccato-badges--cold-wrap {
    top: var(--space-sm);
    right: var(--space-sm);
    align-items: flex-end;
}

.naccato-badge {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* Sello oficial (logo Sin T.A.C.C.). No es cuadrado (262x304): ancho fijo,
   alto natural. */
.naccato-badge--official {
    width: clamp(40px, 22%, 58px);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.22));
}
.naccato-badge--official img {
    display: block;
    width: 100%;
    height: auto;
}

/* Chips custom (vegano / lactosa / azucar / sushi) */
.naccato-badge--pill {
    gap: 0.3em;
    padding: 0.3em 0.55em;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid currentColor; /* color = variante */
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(8px, 2.4vw, 11px);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}
.naccato-badge--pill svg {
    width: 1.15em;
    height: 1.15em;
    flex: none;
}
.naccato-badge__txt {
    color: var(--color-text-primary);
    white-space: nowrap;
}

/* Variantes de color (borde + icono via currentColor; el texto queda oscuro).
   Paleta naccatizada (Enfoque B): azul de marca como base + acentos derivados
   de la marca, via tokens de variables.css (future-proof, sigue la paleta si
   cambia). Reemplaza los Material colors genericos anteriores
   (#2e7d32 / #1565c0 / #00796b / #37474f). */
.naccato-badge--green { color: var(--color-success); }       /* Vegano: verde de marca */
.naccato-badge--blue  { color: var(--color-brand-primary); } /* Sin lactosa: Azul Legado */
.naccato-badge--teal  { color: var(--color-brand-light); }   /* Sin azucar: azul claro de marca */
.naccato-badge--dark  { color: var(--color-brand-dark); }    /* Apto sushi: azul profundo de marca */

/* Sello PROPIO "Sin gluten" (autodeclarado — NO es el logo oficial RNPA).
   Pill VERDE SOLIDA con espiga tachada: se lee como claim dietario positivo
   y es inconfundible frente al logo oficial de certificacion. Sobreescribe el
   render 'pill' (fondo/borde/texto) para el fill solido. */
.naccato-badge--pill.naccato-badge--gluten {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.03em;
}
.naccato-badge--gluten .naccato-badge__txt { color: #ffffff; }

/* Chip de origen (banderita + pais), fondo azul-marca translucido (brand-dark
   #24424f a .82) para coherencia de marca; la banderita resalta y el texto
   blanco mantiene contraste AA. */
.naccato-badge--origin {
    gap: 0.4em;
    padding: 0.28em 0.55em;
    border-radius: var(--radius-pill);
    background: rgba(36, 66, 79, 0.82);
    color: #ffffff;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(8px, 2.2vw, 10px);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.naccato-badge--origin .naccato-badge__txt { color: #ffffff; }
.naccato-badge--origin .naccato-flag {
    width: 1.5em;
    height: auto;
    border-radius: 2px;
    display: block;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.naccato-badge--origin .naccato-globe {
    width: 1.1em;
    height: 1.1em;
    flex: none;
}

/* Chips de cadena de frio (copo): Refrigerado = outline azul claro, Congelado
   = azul Legado solido (mas intenso = mas frio). Ambos esquina sup-derecha.
   Naccatizado: gama azul de marca via tokens. */
.naccato-badge--cold,
.naccato-badge--frozen {
    gap: 0.3em;
    padding: 0.3em 0.55em;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(8px, 2.4vw, 11px);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}
.naccato-badge--cold svg,
.naccato-badge--frozen svg {
    width: 1.15em;
    height: 1.15em;
    flex: none;
}

/* Refrigerado: chip claro con borde/copo azul claro de marca, texto oscuro */
.naccato-badge--cold {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--color-brand-light);
    color: var(--color-brand-light);
}

/* Congelado: chip Azul Legado solido, copo + texto en blanco (AA: blanco
   sobre #38627A = 4.8:1) */
.naccato-badge--frozen {
    background: var(--color-brand-primary);
    border: 1px solid var(--color-brand-primary);
    color: #ffffff;
}
.naccato-badge--frozen .naccato-badge__txt {
    color: #ffffff;
}

/* Icono de conservacion en la tabla de atributos de la ficha */
.naccato-attr-icon {
    display: inline-flex;
    vertical-align: -0.18em;
    margin-right: 0.4em;
}
.naccato-attr-icon svg {
    width: 1.05em;
    height: 1.05em;
}
.naccato-attr-icon--cold { color: var(--color-brand-light); }   /* refrigerado: azul claro de marca */
.naccato-attr-icon--frozen { color: var(--color-brand-primary); }/* congelado: Azul Legado */
.naccato-attr-icon--ambient { color: #c0762b; }                 /* ambiente: ambar calido (unico acento calido, contrasta con el frio azul) */

/* Chip de contenido neto (peso/volumen): neutro/spec, chip claro */
.naccato-badge--content {
    padding: 0.25em 0.55em;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(8px, 2.2vw, 11px);
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}

/* En la ficha la imagen es grande: sellos un poco mayores y mas separados. */
.woocommerce-product-gallery .naccato-badges--diet {
    top: var(--space-md);
    left: var(--space-md);
    z-index: 50;
}
.woocommerce-product-gallery .naccato-badge--official {
    width: clamp(56px, 14%, 92px);
}
.woocommerce-product-gallery .naccato-badge--pill,
.woocommerce-product-gallery .naccato-badge--content,
.woocommerce-product-gallery .naccato-badge--cold,
.woocommerce-product-gallery .naccato-badge--frozen {
    font-size: clamp(10px, 1.4vw, 12px);
}

@media (max-width: 600px) {
    .naccato-badges--diet {
        top: var(--space-xs);
        left: var(--space-xs);
    }
    .naccato-badge--official {
        width: clamp(34px, 26%, 48px);
    }
    .naccato-badge--pill {
        padding: 0.25em 0.45em;
    }
}

/* ─────────────────────────────────────────────
   PRECIO POR UNIDAD DE MEDIDA (≈ $X / kg | ≈ $X / L)
   Etiqueta de gondola: equivalente derivado, SUBORDINADO al precio principal
   (que es brand-primary + bold). Por eso va en texto secundario/muted con la
   tipografia de UI de marca (Roboto) y la escala tipografica del brandbook.
   Cifras tabulares para que los importes alineen entre cards. El "≈" deja
   claro que es un equivalente, no el precio de venta.
   ───────────────────────────────────────────── */
.naccato-unit-price {
    margin-top: var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1.3;
    color: var(--color-text-secondary);
}

/* Variante grilla: un escalon mas chica y muted para no recargar las cards */
.naccato-unit-price--loop {
    margin-top: calc(var(--space-xs) / 2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.naccato-unit-price__amount {
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.naccato-unit-price--loop .naccato-unit-price__amount {
    color: inherit;
}

/* Precio sin IVA (neto) en las cards del catalogo (pedido #7). Reemplaza al
   precio por kilo/litro en el loop; mismo registro visual muted/compacto. */
.naccato-price-ex-tax--loop {
    margin-top: calc(var(--space-xs) / 2);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    line-height: 1.3;
    color: var(--color-text-muted);
}

.naccato-price-ex-tax--loop .naccato-price-ex-tax__amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* UX-023 (revisado 07/07 por Seba) — Subcategorias del home como TEXTO PLANO,
   replicando el demo Vegetables (antes eran pill-buttons, mail Modificaciones 25/06;
   decision superada por Seba). Target del demo: links 14px/400, color #838383,
   apilados (display block), padding 8px 0, SIN borde/radius/fondo, text-transform none.
   Hover = azul de marca real --wd-primary-color (#38627A). Acotado a .home.
   El truncado + boton "Ver +" siguen vivos (style.css + category-subcats-expand.js). */
.home .elementor-widget-wd_product_categories .wd-cat-footer.wd-sub-menu {
    display: block;
    margin: 5px 0 0;
    padding: 0;
    list-style: none;
}
.home .elementor-widget-wd_product_categories .wd-cat-footer.wd-sub-menu li {
    margin: 0;
}
.home .elementor-widget-wd_product_categories .wd-cat-footer.wd-sub-menu li > a {
    display: block;
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: #838383;
    text-transform: none;
    text-decoration: none;
    transition: color var(--transition);
}
.home .elementor-widget-wd_product_categories .wd-cat-footer.wd-sub-menu li > a:hover {
    color: var(--wd-primary-color, var(--color-brand-primary));
    background: none;
}

/* UX-024 — Badge de fecha estimada de entrega (ficha + checkout de bloques).
   Ficha: mensaje generico, variante --amba (tint azul de marca).
   Checkout: --amba (azul, CP de AMBA) / --interior (gris, fuera de AMBA).
   Icono camion SVG inline (currentColor), sin depender del font-icon de WoodMart. */
.naccato-delivery-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--radius-sm, 4px);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    max-width: 100%;
    box-sizing: border-box;
}
.naccato-delivery-badge__icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}
/* AMBA / generico: verde estilo Mercado Libre (UX-024 addendum, Matias 14/07).
   Aplica a ficha (badge --generic) y checkout: comparten la clase --amba.
   El icono SVG hereda el color via currentColor -> tambien queda verde. */
.naccato-delivery-badge--amba {
    background-color: #E7F8ED; /* verde clarito */
    border: none;              /* sin borde (pedido explicito) */
    color: #0A8A3F;            /* verde oscuro, contraste AA */
}
/* Interior: gris neutro informativo. */
.naccato-delivery-badge--interior {
    background-color: #f4f4f4;
    border: 1px solid #c8c8c8;
    color: #555;
}
/* Ficha: separar del precio/CTA. */
.single-product .naccato-delivery-badge--generic {
    margin: 10px 0 4px;
}
/* Checkout: separar de las opciones de envio. */
#shipping-option .naccato-delivery-badge {
    margin-top: 12px;
}
@media (max-width: 480px) {
    .naccato-delivery-badge {
        font-size: 12px;
        white-space: normal;
    }
}