/* ============================================================
   Reset y estilos base
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
    /* Dark backdrop: the page top (hero) and bottom (footer) are both dark,
       so the iOS overscroll "rubber-band" and the landscape notch safe-area
       read as dark instead of showing the cream body colour as a white gap.
       (iOS Safari ignores overscroll-behavior, so this is what fixes it there.)
       The cream <body> still covers the whole document in between. */
    background-color: var(--color-oscuro);
    /* Offset anchor jumps so the target lands below the fixed header
       instead of underneath it (applies to all in-page #anchor links).
       --sc-header-offset is set by JS to the real header height (which
       varies by breakpoint and whether the shipping banner is showing);
       the token is the no-JS fallback. */
    scroll-padding-top: var(--sc-header-offset, var(--header-height));
    -webkit-text-size-adjust: 100%;
    /* No overflow-x on html: `hidden` breaks wheel scroll and `clip` can force
       overflow-y to clip too (kills vertical scroll). The cart drawer stays
       off-canvas via transform (no horizontal overflow); body clips the rest. */
    overscroll-behavior: none;   /* no scroll-chaining / rubber-band bounce */
    touch-action: pan-x pan-y;   /* allow scroll, block pinch / double-tap zoom */
    /* Sin flash gris de iOS al tocar; los controles tienen estados :active propios */
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-texto);
    background-color: var(--color-crema);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    overscroll-behavior: none; /* prevent elastic/rubber-band scroll (both axes) */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.2;
    font-weight: 700;
}

/* Reparte las palabras entre líneas en títulos multilínea (sin viudas) */
h1, h2, h3 {
    text-wrap: balance;
}

::selection {
    background: var(--color-dorado);
    color: var(--color-oscuro);
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Sin "fantasma" al hacer click-y-arrastrar sobre imágenes (WebKit/Chrome).
       Firefox se cubre con el handler de dragstart en main.js. */
    -webkit-user-drag: none;
    user-select: none;
}

ul, ol {
    list-style: none;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

/* ============================================================
   Precios — dígitos tabulares para que los montos no cambien
   de ancho al actualizarse por AJAX (250g↔1kg, carrito, totales)
   ============================================================ */
.product-card__price,
.product-card__price-was,
.product-card__weight-price,
.product-detail__price,
.cart-item__total,
.mini-cart-item__line,
.woocommerce-Price-amount {
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Skip link — primer elemento enfocable; oculto hasta recibir
   focus por teclado, entonces aparece sobre el header.
   ============================================================ */
.skip-link {
    position: fixed;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    z-index: 9999;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-dorado);
    color: var(--color-oscuro);
    font-weight: 600;
    border-radius: var(--radius-sm);
    transform: translateY(calc(-100% - var(--spacing-lg)));
}

.skip-link:focus {
    transform: translateY(0);
}

/* ============================================================
   Focus visible — anillo dorado para navegación por teclado.
   Los inputs con tratamiento propio (borde dorado + glow) lo
   suprimen con su outline: none puntual.
   ============================================================ */
:focus-visible {
    outline: 2px solid var(--color-dorado);
    outline-offset: 2px;
}

/* ============================================================
   Reduced motion — colapsa animaciones y transiciones para
   usuarios con sensibilidad al movimiento (vestibular, etc.)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}