/* ============================================================
   Nina Wawa — nuevo sistema visual (rediseño estetico 2026)
   Hoja de estilos independiente, autocontenida. Se carga SOLO en
   las paginas ya migradas al nuevo diseno (body.nw-theme). No debe
   afectar a ninguna pagina que siga usando css/style.css / css/shop.css.
   ============================================================ */

/* Fuentes de marca del cliente (ver .claude/work-log.md para el contexto de
   licencia). Old Klarheit: un unico peso "Regular", sin cursiva real, para
   titulos/nav/logo/botones. Spectral Medium Italic: cursiva real (no
   sintetica) para el resto del texto (parrafos/listas/labels). */
@font-face {
    font-family: 'Old Klarheit';
    src: url('../fonts/OLDKLARHEIT-REGULAR.TTF') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Spectral';
    src: url('../fonts/Spectral-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

html:has(body.nw-theme) {
    overflow-x: hidden;
}

body.nw-theme {
    overflow-x: hidden;
    max-width: 100vw;
    --nw-bg: #F7F6F4;
    --nw-bg-header: #F7F6F4;
    --nw-ink: #211F1D;
    --nw-ink-soft: #4B4844;
    --nw-line: #F0EEEB;
    --nw-nav-bg: #211F1D;
    --nw-nav-ink: #F7F6F4;
    --nw-card-bg: #F0EEEB;
    --nw-frame: #211F1D;
    --nw-focus: #7ecbff;
    /* Rendered height of .nw-nav on desktop (padding + one line at 1.32rem,
       measured ~95px in browser) — used only on .nw-has-hero pages to
       extend .nw-hero upward behind the nav bar, see the HERO section. */
    --nw-nav-h: 6rem;

    --nw-font-display: 'Old Klarheit', Georgia, serif;
    --nw-font-nav: 'Old Klarheit', Georgia, serif;
    --nw-font-body: 'Spectral', 'Old Klarheit', Georgia, serif;

    background: var(--nw-bg);
    color: var(--nw-ink);
    font-family: var(--nw-font-body);
    font-style: italic;
    font-weight: 500;
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body.nw-theme, body.nw-theme * {
    box-sizing: border-box;
}

body.nw-theme h1, body.nw-theme h2, body.nw-theme h3, body.nw-theme h4 {
    font-family: var(--nw-font-display);
    font-style: normal;
    font-weight: 500;
    color: var(--nw-ink);
    letter-spacing: 0.01em;
    margin: 0;
}

body.nw-theme p, body.nw-theme li, body.nw-theme label {
    font-family: var(--nw-font-body);
    font-style: italic;
    font-weight: 500;
    color: var(--nw-ink);
    line-height: 1.6;
}

body.nw-theme a,
body.nw-theme a:visited {
    color: var(--nw-ink);
    text-decoration: none;
}

body.nw-theme button {
    font-family: var(--nw-font-nav);
    font-style: normal;
}

body.nw-theme :focus-visible {
    outline: 2px solid var(--nw-focus);
    outline-offset: 2px;
}

body.nw-theme main {
    display: block;
}

.nw-underline {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ===== Section title (e.g. "PRODUCTS", "ABOUT ME") ===== */
.nw-section-title {
    font-family: var(--nw-font-display);
    font-style: normal;
    font-size: 1.71rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
    margin: 0 0 1.2em 0;
}
.nw-section-title--no-underline {
    text-decoration: none;
}
.nw-section-title--gap {
    margin-bottom: 2.2em;
}

/* ============================================================
   HEADER
   ============================================================ */
.nw-header {
    position: relative;
    z-index: 100;
    /* No background here on purpose: this wrapper spans the white logo row
       AND the dark nav bar below it. If it painted an opaque background,
       it would hide the hero image extended up behind the nav (see
       .nw-hero's negative margin-top) before the nav's own translucent
       black gets a chance to blend with it — only .nw-header-top (the
       logo row) should be solid white. */
}
.nw-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 0.9em 1.4em;
    max-width: 1400px;
    margin: 0 auto;
    background: var(--nw-bg-header);
}
.nw-logo-word {
    font-family: var(--nw-font-display);
    font-style: normal;
    font-weight: 500;
    font-size: 3.2rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.nw-logo-mark {
    display: block;
}
.nw-logo-mark img {
    height: 58px;
    width: auto;
    display: block;
}
.nw-header-actions {
    display: flex;
    align-items: center;
    gap: 1.1em;
    font-family: var(--nw-font-nav);
    font-style: normal;
    min-width: 0;
    flex-shrink: 1;
}
.nw-manage-sub-link {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.nw-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    min-width: 1.4em;
    flex-shrink: 0;
    color: var(--nw-ink);
    cursor: default;
}
.nw-header-actions .nw-icon-btn {
    width: 1.68em;
    height: 1.68em;
    min-width: 1.68em;
}
.nw-icon-btn.is-link {
    cursor: pointer;
}
.nw-icon-btn svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
}
.nw-nav-bar {
    position: relative;
}
.nw-nav-bar::before {
    /* The texture the nav's translucent black sits on top of, so what shows
       through is the drawing itself, not a flat color — lives on the wrapper
       (not .nw-nav) so it still works on mobile, where .nw-nav collapses to
       0 height and .nw-nav-bar is what stays visible. */
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../img/texture_bg.jpg');
    background-size: cover;
    background-position: center;
}
.nw-nav {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.4em;
    flex-wrap: wrap;
    padding: 0.85em 1.2em;
    background: rgba(33, 31, 29, 0.7);
    color: var(--nw-nav-ink);
    font-family: var(--nw-font-display);
    font-style: normal;
    font-variant: small-caps;
    font-size: 1.32rem;
    letter-spacing: 0.03em;
}
body.nw-theme .nw-nav a,
body.nw-theme .nw-nav a:visited {
    color: var(--nw-nav-ink);
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.2em 0;
    opacity: 0.92;
    transition: opacity 0.15s;
}
.nw-nav a.nw-nav-shop {
    font-weight: 700;
}
.nw-nav a:hover,
.nw-nav a.is-active {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}
.nw-nav a.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}
.nw-nav a img {
    height: 2.4em;
    width: auto;
    display: block;
}
.nw-nav-toggle {
    display: none;
}

@media (max-width: 768px) {
    .nw-logo-word { font-size: 1.45rem; }
    .nw-logo-mark img { height: 40px; }
    .nw-header-top { padding: 0.7em 1em; gap: 0.5em; justify-content: flex-start; }
    .nw-header-actions { gap: 0.55em; margin-left: auto; }
    .nw-manage-sub-link { display: none; }
    .nw-center-page-logo { top: 0.7rem; left: 1rem; }

    .nw-nav {
        justify-content: flex-start;
        gap: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        flex-direction: column;
        align-items: stretch;
        transition: max-height 0.25s ease, visibility 0s linear 0.25s;
    }
    .nw-nav.is-open {
        max-height: 60vh;
        visibility: visible;
        padding: 0.5em 1em 0.9em;
        transition: max-height 0.25s ease, visibility 0s linear 0s;
    }
    .nw-nav a {
        padding: 0.6em 0;
        border-bottom: 1px solid rgba(255,255,255,0.12);
    }
    .nw-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.2em;
        height: 2.2em;
        background: none;
        border: none;
        color: var(--nw-ink);
        cursor: pointer;
        margin-left: auto;
    }
    .nw-nav-bar {
        display: flex;
        align-items: center;
    }
}

/* ============================================================
   HERO
   ============================================================ */
.nw-hero {
    position: relative;
    width: 100%;
    /* Sized relative to width (not vh) so it matches the proportions of the
       reference mockup (ESTRUCTURA DEL MENU.jpg) regardless of window height. */
    height: clamp(90px, 11vw, 200px);
    background-image: url('../img/texture_bg.jpg');
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
/* On a page with .nw-hero immediately below the header (nothing else
   in between), the nav's own texture backdrop (.nw-nav-bar::before, see
   NAV above) would be an independent background-size:cover crop of the
   same image, sized to the nav's own (much shorter) box — right above the
   hero's crop of the exact same image, at a different scale. The two
   don't line up: it reads as one texture cut in half and stitched wrong
   ("duplicated"), not a single continuous drawing. So on .nw-has-hero
   pages, turn the nav's own backdrop off and instead stretch the hero
   itself up behind the nav, so there is only ONE crop of the image
   spanning both — see the mobile override further down for why this only
   applies on desktop. Only use nw-has-hero when .nw-hero is the very next
   element after </header> — if another element (e.g. a promo banner) sits
   between them, this trick pulls the hero up behind THAT element instead
   of the nav, which looks wrong; drop nw-has-hero in that case. */
.nw-has-hero .nw-nav-bar::before {
    display: none;
}
.nw-has-hero .nw-hero {
    height: clamp(calc(90px + var(--nw-nav-h)), calc(11vw + var(--nw-nav-h)), calc(200px + var(--nw-nav-h)));
    margin-top: calc(-1 * var(--nw-nav-h));
}
@media (max-width: 768px) {
    .nw-has-hero .nw-nav-bar::before {
        display: block;
    }
    .nw-has-hero .nw-hero {
        height: clamp(90px, 11vw, 200px);
        margin-top: 0;
    }
}
.nw-hero-overlay {
    position: absolute;
    inset: 0;
    background: #211F1D;
    opacity: 0.7;
    pointer-events: none;
}

/* ============================================================
   PRODUCTS CAROUSEL (home)
   ============================================================ */
.nw-products {
    max-width: 1400px;
    margin: 0 auto;
    padding: 3em 1.4em 2.5em;
}
.nw-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6em;
}
.nw-carousel-track {
    display: flex;
    gap: 1.4em;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding: 0.4em 0.2em 1em;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.nw-carousel-track::-webkit-scrollbar { display: none; }
.nw-product-card {
    flex: 0 0 auto;
    width: 220px;
    scroll-snap-align: start;
    background: #E2DFDB;
    box-shadow: 0 2px 6px rgba(33,31,29,0.18);
    padding: 0.5em;
    display: block;
    transition: transform 0.15s, box-shadow 0.15s;
}
.nw-product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(33,31,29,0.22);
}
.nw-product-card img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
}
.nw-product-card .nw-product-name {
    display: block;
    text-align: right;
    font-family: var(--nw-font-body);
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 500;
    margin-top: 0.3em;
    color: #211F1D;
}
.nw-carousel-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4em;
    height: 2.4em;
    border-radius: 50%;
    border: 1px solid var(--nw-line);
    background: var(--nw-bg-header);
    color: var(--nw-ink);
    cursor: pointer;
}
.nw-carousel-arrow:first-child {
    /* Pulls the arrow left by its own width + the carousel gap + the track's
       inner padding, so the first CARD (not the arrow) lines up with the
       section title above — the arrow ends up floating further left still. */
    margin-left: -3.2rem;
}
.nw-carousel-arrow svg {
    width: 1.1em;
    height: 1.1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}
.nw-carousel-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

@media (max-width: 768px) {
    .nw-product-card { width: 44vw; }
    .nw-product-card img { height: 40vw; }

    /* Arrows no longer sit left/right of the track (they were eating into
       the card width on narrow screens) — move them below it instead, so
       the images keep the full width and the arrows just hint "swipe me". */
    .nw-carousel {
        flex-wrap: wrap;
        justify-content: center;
    }
    .nw-carousel-track {
        order: 1;
        flex-basis: 100%;
        width: 100%;
    }
    .nw-carousel-arrow {
        order: 2;
        margin-top: 0.6em;
    }
    .nw-carousel-arrow:first-child {
        margin-left: 0;
    }
}

/* ============================================================
   BUTTONS / FORMS (general)
   ============================================================ */
.nw-btn {
    display: inline-block;
    font-family: var(--nw-font-nav);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: 1.02rem;
    text-transform: uppercase;
    background: var(--nw-ink);
    color: #fff;
    border: none;
    border-radius: 0.3em;
    padding: 0.75em 1.4em;
    cursor: pointer;
    transition: opacity 0.15s;
}
.nw-btn:hover { opacity: 0.85; }
body.nw-theme a.nw-btn,
body.nw-theme a.nw-btn:visited {
    color: #fff;
}
.nw-btn-block { display: block; width: 100%; text-align: center; }
.nw-btn:disabled { opacity: 0.5; cursor: default; }

/* ============================================================
   Login / auth cards (secret-shop login, account email step)
   ============================================================ */
.nw-login-card {
    background: var(--nw-card-bg);
    border: 0.2em solid var(--nw-frame);
    border-radius: 0.3em;
    padding: 2.6em 2.2em;
    max-width: 420px;
    width: 100%;
}
.nw-login-card h1 {
    text-align: center;
    font-size: 1.7rem;
    margin-bottom: 0.4em;
}
.nw-login-card > p {
    text-align: center;
    margin-bottom: 1.6em;
    color: var(--nw-ink-soft);
}
.nw-login-card form {
    display: flex;
    flex-direction: column;
    gap: 1.1em;
}
.nw-login-card label {
    display: block;
    margin-bottom: 0.4em;
    font-size: 0.9rem;
}
.nw-login-card input {
    width: 100%;
    padding: 0.7em;
    border: 1px solid var(--nw-line);
    border-radius: 0.2em;
    background: #fff;
    color: var(--nw-ink);
    font-family: var(--nw-font-body);
    font-style: italic;
    font-weight: 500;
    /* 1rem, not smaller: iOS Safari zooms in on focus for any input under 16px */
    font-size: 1rem;
    box-sizing: border-box;
}
.nw-password-field { position: relative; }
.nw-password-field input { padding-right: 2.8em; }
.toggle-password {
    position: absolute;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--nw-ink-soft);
    cursor: pointer;
    padding: 0.25em;
    display: flex;
}
.nw-error-div {
    display: none;
    color: #a3312a;
    background: rgba(163,49,42,0.08);
    border: 1px solid rgba(163,49,42,0.3);
    border-radius: 0.2em;
    padding: 0.7em;
    text-align: center;
    font-size: 0.9rem;
}
@media (max-width: 768px) {
    .nw-login-card,
    .nw-center-card { padding: 2em 1.4em; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.nw-footer {
    background: var(--nw-bg);
    border-top: 1px solid var(--nw-line);
    padding: 3em 0 2em;
}
.nw-footer-inner {
    /* Horizontal padding lives here (inside the centered, max-width box),
       not on .nw-footer — same pattern .nw-page/.nw-products use. Padding
       on the outer .nw-footer instead would center this box within an
       already-narrower area, shifting it exactly one padding-width off
       from the page content's left edge above it. */
    padding: 0 1.4em;
    /* Matches .nw-page's max-width (1200px), not the 1400px used by the
       hero-width sections on Home/Halloween, so the footer's left edge
       lines up with the page content above it on every other page (About,
       FAQ, policies, Mail Club, etc. all render inside .nw-page). Pages
       whose content is 1400px wide (.nw-products/.nw-mailclub-home/
       .nw-halloween) add body.nw-wide-footer for the override below —
       kept as its own class, independent of nw-has-hero (the nav/hero
       texture trick), since a page can need one without the other. */
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    /* Same gap everywhere in the footer (here and on .nw-footer-links below)
       so the spacing between every group reads as one consistent rhythm,
       instead of tight gaps in some places and one huge leftover gap in
       others (what a stretchy 1fr grid column used to do). */
    gap: 3em;
}
.nw-wide-footer .nw-footer-inner {
    max-width: 1400px;
}
.nw-newsletter {
    max-width: 460px;
    flex: 1 1 320px;
    background: #7c7873;
    border: 0.15em solid var(--nw-frame);
    color: #fff;
    padding: 1.1em 1.3em;
}
.nw-newsletter-section {
    /* Its own centered section at the bottom of the home page, after Past
       Editions and before the footer (moved out of the footer 2026-08-13,
       then out from under "Join the Mail Club" 2026-08-13 later the same
       day — client wanted it standalone and centered, not tucked under a
       button and not inside <footer>). */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.4em 3.5em;
    display: flex;
    justify-content: center;
}
body.nw-theme .nw-newsletter h3 {
    color: #fff;
    font-size: 1.15rem;
    margin: 0 0 0.7em;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.nw-newsletter label {
    display: block;
    color: #fff;
    font-size: 0.96rem;
    margin: 0.5em 0 0.25em;
}
.nw-newsletter input[type="text"],
.nw-newsletter input[type="email"] {
    width: 100%;
    padding: 0.5em 0.6em;
    border: none;
    border-radius: 0.2em;
    font-family: var(--nw-font-body);
    font-style: italic;
    font-weight: 500;
    /* 1rem, not smaller: iOS Safari zooms in on focus for any input under 16px */
    font-size: 1rem;
}
.nw-newsletter button {
    margin-top: 0.8em;
    width: 100%;
}
.nw-newsletter .hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.nw-footer-social {
    display: flex;
    flex-direction: column;
    gap: 0.9em;
    flex-shrink: 0;
}
.nw-footer-social img { width: 40px; height: 40px; display: block; }

.nw-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 3em;
    align-items: flex-start;
    font-size: 1.14rem;
}
.nw-footer-links-col {
    display: flex;
    flex-direction: column;
    gap: 0.7em;
}
.nw-footer-links a {
    cursor: pointer;
}
.nw-footer-links a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.nw-footer-signature img {
    height: 70px;
    width: auto;
    display: block;
}

@media (max-width: 900px) {
    .nw-footer-inner {
        flex-direction: column;
        gap: 2.2em;
    }
}
@media (max-width: 540px) {
    .nw-newsletter {
        flex-basis: auto;
        width: 100%;
    }
}
@media (max-width: 420px) {
    .nw-footer-links {
        gap: 1.4em 2em;
    }
    .nw-footer-social {
        flex-direction: row;
    }
}

/* ============================================================
   COOKIE BANNER (restyled, same #ids/behaviour as before)
   ============================================================ */
.nw-theme #cookie-banner {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 18px;
    width: auto;
    max-width: calc(100vw - 32px);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 0.9em 1.1em;
    background: var(--nw-ink);
    color: #fff;
    border-radius: 0.5em;
    text-align: center;
    font-family: var(--nw-font-nav);
    font-style: normal;
    font-size: 0.85rem;
}
.nw-theme #cookie-banner p { margin: 0; line-height: 1.4; color: #fff; }
.nw-theme #cookie-accept-btn {
    padding: 0.5em 1.2em;
    background: #fff;
    color: var(--nw-ink);
    font-family: var(--nw-font-nav);
    font-style: normal;
    font-weight: 600;
    border: none;
    border-radius: 0.3em;
    cursor: pointer;
    white-space: nowrap;
}
@media (max-width: 480px) {
    /* Shorter copy (see templates/footer.php) already keeps this to 1-2
       lines on a phone, but tighten it further so it never competes with
       whatever content happens to sit behind it on a short viewport. */
    .nw-theme #cookie-banner {
        gap: 8px;
        padding: 0.75em 1em;
        font-size: 0.78rem;
    }
}

/* ============================================================
   POPUPS (Terms of Service / Privacy Policy / newsletter feedback)
   restyled to match the new theme; same #ids/JS (showPopup/closePopup)
   ============================================================ */
.nw-theme .popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(33,31,29,0.45);
    z-index: 9998;
}
.nw-theme .popup-info {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--nw-bg-header);
    color: var(--nw-ink);
    padding: 2.2em 2em 1.8em;
    border-radius: 0.4em;
    border: 1px solid var(--nw-line);
    box-shadow: 0 1em 3em rgba(0,0,0,0.2);
    z-index: 9999;
    min-width: 18em;
    max-width: 92vw;
    max-height: 85vh;
    overflow-y: auto;
    text-align: left;
    font-family: var(--nw-font-body);
    font-style: italic;
    font-weight: 500;
}
.nw-theme .popup-info h2 {
    margin-top: 0;
    font-size: 1.4rem;
}
.nw-theme .popup-info ul {
    list-style: disc;
    padding-left: 1.2em;
    margin-top: 0.75em;
}
.nw-theme .popup-info li { margin-bottom: 0.6em; }
.nw-theme .popup-info .close-btn {
    position: absolute;
    top: 1em;
    right: 1.2em;
    background: var(--nw-ink);
    color: #fff;
    border: none;
    border-radius: 0.3em;
    padding: 0.4em 1em;
    font-size: 0.85rem;
    font-family: var(--nw-font-nav);
    font-style: normal;
    cursor: pointer;
}

/* ============================================================
   Simple content pages (About Me / Contact / FAQ / Policies)
   ============================================================ */
.nw-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3em 1.4em 5em;
}
.nw-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.6em;
}
.nw-gallery-grid .nw-product-card {
    width: 100%;
}
.nw-gallery-grid .nw-product-card img {
    height: auto;
    object-fit: contain;
}
.nw-about {
    display: grid;
    grid-template-columns: minmax(240px, 380px) 1fr;
    gap: 3em;
    align-items: start;
}
.nw-about-photo {
    aspect-ratio: 632 / 806;
    background: #F0EEEB;
    display: block;
    border: 0.22em solid var(--nw-line);
}
.nw-about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.nw-about-text {
    max-width: 440px;
    font-size: 1.1rem;
    line-height: 1.7;
    font-variant: small-caps;
    letter-spacing: 0.02em;
}
@media (max-width: 768px) {
    .nw-about { grid-template-columns: 1fr; }
}

.nw-contact-card {
    max-width: 420px;
    margin: 2em auto 0;
    border-radius: 0.3em;
    overflow: hidden;
    background-image: linear-gradient(rgba(10,9,8,0.35), rgba(10,9,8,0.35)), url('../img/texture_bg.jpg');
    background-size: cover;
    background-position: center;
    padding: 0.9em;
}
.nw-contact-card-inner {
    background: #fff;
    border-radius: 0.3em;
    padding: 1.6em 1.4em;
}
.nw-contact-card-inner h3 {
    font-size: 1.3rem;
    margin-bottom: 0.6em;
}
.nw-contact-card-inner p {
    margin: 0.3em 0;
    font-size: 1.14rem;
}

.nw-policy-list {
    font-size: 1.22rem;
}
.nw-policy-list li { margin-bottom: 0.8em; }

/* ===== FAQ ===== */
.nw-faq-section {
    margin-bottom: 3em;
}
.nw-faq-section:last-child {
    margin-bottom: 0;
}
.nw-faq-heading {
    font-family: var(--nw-font-nav);
    font-style: normal;
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.9em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--nw-line);
}
.nw-faq-intro {
    font-size: 1.14rem;
    color: var(--nw-ink-soft);
    margin: -0.3em 0 1em;
}
.nw-faq-item {
    border-bottom: 1px solid var(--nw-line);
}
.nw-faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1em;
    padding: 0.9em 0;
    font-family: var(--nw-font-nav);
    font-style: normal;
    font-weight: 500;
    font-size: 1.02rem;
}
.nw-faq-item summary::-webkit-details-marker {
    display: none;
}
.nw-faq-item summary::after {
    content: '+';
    font-family: var(--nw-font-display);
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
}
.nw-faq-item[open] summary::after {
    content: '\2212';
}
.nw-faq-answer {
    padding: 0 0 1.1em;
    font-size: 1.18rem;
    max-width: 68ch;
}
.nw-faq-answer p {
    margin: 0 0 0.8em;
}
.nw-faq-answer p:last-child {
    margin-bottom: 0;
}
.nw-faq-answer ul {
    margin: 0 0 0.8em;
    padding-left: 1.3em;
}
.nw-faq-answer li {
    margin-bottom: 0.4em;
}
.nw-faq-table {
    width: 100%;
    max-width: 480px;
    border-collapse: collapse;
    margin: 0.6em 0 1em;
    font-size: 0.95rem;
}
.nw-faq-table th,
.nw-faq-table td {
    text-align: left;
    padding: 0.5em 0.8em 0.5em 0;
    border-bottom: 1px solid var(--nw-line);
}
.nw-faq-table th {
    font-family: var(--nw-font-nav);
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

/* ============================================================
   Mail Club
   ============================================================ */
.nw-mailclub-home {
    max-width: 1400px;
    margin: 0 auto;
    padding: 3em 1.4em 3.5em;
}
.nw-mailclub-grid {
    max-width: 980px;
    display: grid;
    grid-template-columns: minmax(260px, 460px) 1fr;
    gap: 3em;
    align-items: start;
}
/* Home only: center the photo/description/button block under the "Mail
   Club" title, which itself stays flush left — .nw-mailclub-home is the
   section wrapper used only on index.php (mailclub.php's own version of
   this grid has no such wrapper and must stay flush left, matching ITS
   title; do not make this the default for .nw-mailclub-grid). */
.nw-mailclub-home .nw-mailclub-grid {
    margin: 0 auto;
}
.nw-mailclub-photo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.nw-mailclub-photo > img {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    border: 0.22em solid var(--nw-line);
    background: #fff;
}
.nw-mailclub-home .nw-mailclub-photo > img {
    max-width: 357px;
}
.nw-mailclub-thumbs {
    margin-top: 0.8em;
    display: flex;
    gap: 0.6em;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.nw-mailclub-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    cursor: pointer;
    border: 0.16em solid var(--nw-line);
    background: #fff;
}
.nw-mailclub-thumb.active { border-color: var(--nw-frame); }
.nw-mailclub-info { max-width: 620px; }
.nw-mailclub-info p { font-size: 1.2rem; }
.nw-mailclub-info ul { margin: 0.4em 0 1.4em 1.2em; padding: 0; font-size: 1.2rem; }
.nw-mailclub-info li { margin-bottom: 0.5em; }
.nw-mailclub-actions {
    display: flex;
    gap: 1em;
    max-width: 420px;
}
.nw-mailclub-actions .nw-btn { flex: 1; }
body.nw-theme p.nw-mailclub-sold-out-label {
    display: inline-block;
    margin: 0 0 0.6em;
    padding: 0.25em 0.7em;
    font-family: var(--nw-font-nav);
    font-style: normal;
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--nw-ink);
    line-height: 1.4;
}

@media (max-width: 768px) {
    .nw-mailclub-grid { grid-template-columns: 1fr; gap: 2em; }
    .nw-mailclub-actions { flex-direction: column; max-width: 320px; margin: 0 auto; }
}

/* ============================================================
   Minimal centered pages (cancel / success / checkout confirmation)
   ============================================================ */
body.nw-theme main.nw-center-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2em;
    box-sizing: border-box;
    position: relative;
    background: var(--nw-bg);
}
.nw-center-page-logo {
    /* Must land at the exact same spot as the logo in .nw-header-top (used
       on every page with the full header) so it doesn't visibly jump
       between pages. .nw-header-top is `max-width:1400px; margin:0 auto`
       with 0.9em/1.4em padding, so above 1400px+padding viewports its logo
       sits away from the viewport edge, not pinned to it. */
    position: fixed;
    top: 0.9rem;
    left: max(1.4rem, calc((100vw - 1400px) / 2 + 1.4rem));
    z-index: 10;
}
.nw-center-card {
    background: var(--nw-card-bg);
    border: 0.2em solid var(--nw-frame);
    border-radius: 0.3em;
    padding: 2.6em 2.2em;
    max-width: 460px;
    width: 100%;
    text-align: center;
}
.nw-center-card h1 {
    font-size: 1.9rem;
    margin-bottom: 0.6em;
}
.nw-center-card p {
    margin-bottom: 1.6em;
    line-height: 1.6;
}
.nw-center-card .nw-btn {
    text-decoration: none;
}

/* ============================================================
   Home — animated banner linking to the Halloween page
   ============================================================ */
/* Sits ON TOP of .nw-hero (doesn't push it down or add its own flow
   space) - .nw-hero normally clips its contents (overflow:hidden, so the
   background-image crop stays neat), but this banner is meant to be
   bigger than the thin hero bar and hang down over the section below it,
   so this modifier opens that clip back up just on the home page. */
.nw-hero--banner-overlay {
    overflow: visible;
}
.nw-home-halloween-banner {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 5;
    display: block;
}
/* Same animated pennant as halloween.php (templates/halloween_banner.php,
   sized by .nw-halloween-pennant) instead of the old 19MB gif. No hover
   fade on purpose (client asked for it to stay fully opaque). */
/* Phones: banner at least twice its desktop-clamp minimum (160px ->
   ~320-360px), and the Mail Club section pushed down so it starts below
   the banner instead of under it. The banner hangs from the top of the
   hero, which is a fixed 90px tall at this width (clamp(90px,11vw,...)),
   so the extra padding = banner height (width * 1231/962) - 90px + gap.
   Home page only - halloween.php keeps its own size. */
@media (max-width: 768px) {
    .nw-home-halloween-banner .nw-halloween-pennant {
        width: min(70.4vw, 288px);
    }
    .nw-hero--banner-overlay + .nw-mailclub-home {
        padding-top: calc(min(70.4vw, 288px) * 1.2796 - 90px + 2.2em);
    }
}

/* ============================================================
   Halloween Costume Contest page (halloween.php)
   ============================================================ */
.nw-halloween {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2.6em 1.4em 1em;
    position: relative;
}
.nw-halloween-intro {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1.6em;
    margin-bottom: 1.6em;
}
.nw-halloween-pennant {
    width: clamp(160px, 18vw, 260px);
    height: auto;
    flex-shrink: 0;
}
/* Animated pennant (templates/halloween_banner.php) - replaces
   banner_halloween_animado.gif. Layers are stacked absolutely over
   base.png; every position is a % of the original gif so it all scales
   with the root's width. Four motions, like the gif: the whole banner
   swings a little from the rod, each candle flame flickers and turns from
   orange to dark smoke and back, the sparkles twinkle, and the
   "costume contest!" letters glow on and off. */
.nw-hw-banner {
    position: relative;
    aspect-ratio: 962 / 1231;
}
.nw-hw-banner-swing {
    position: absolute;
    inset: 0;
    transform-origin: 50% 9%;
    animation: nw-hw-swing 3.4s ease-in-out infinite alternate;
}
.nw-hw-banner-base,
.nw-hw-banner-text {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.nw-hw-banner-text {
    filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgba(255, 244, 214, 0.95));
    animation: nw-hw-glow 2.6s ease-in-out infinite alternate;
}
.nw-hw-flame {
    position: absolute;
    height: auto;
    display: block;
    transform-origin: 50% 100%;
    animation-name: nw-hw-flicker, nw-hw-smoke;
    animation-duration: 0.9s, 5.2s;
    animation-timing-function: ease-in-out, ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate, normal;
}
.nw-hw-spark {
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #fffdf2 0 28%, #ffe36b 45%, #f2b51f 68%, rgba(242, 181, 31, 0) 72%);
    animation: nw-hw-twinkle 2s ease-in-out infinite;
}
@keyframes nw-hw-swing {
    from { transform: rotate(-0.7deg); }
    to   { transform: rotate(0.7deg); }
}
@keyframes nw-hw-glow {
    from { opacity: 0.25; }
    to   { opacity: 1; }
}
@keyframes nw-hw-flicker {
    0%   { transform: skewX(-5deg) scaleY(0.94); }
    50%  { transform: skewX(3deg) scaleY(1.04); }
    100% { transform: skewX(6deg) scaleY(0.98); }
}
/* Orange flame -> dark wisp of smoke -> orange again (as in the gif). */
@keyframes nw-hw-smoke {
    0%, 40%  { filter: none; }
    55%, 80% { filter: brightness(0.32) saturate(0.7); }
    95%, 100% { filter: none; }
}
@keyframes nw-hw-twinkle {
    0%, 100% { opacity: 0; transform: translate(-50%, -30%) scale(0.5); }
    45%      { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
    70%      { opacity: 0.85; transform: translate(-50%, -70%) scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
    .nw-hw-banner-swing,
    .nw-hw-banner-text,
    .nw-hw-flame,
    .nw-hw-spark { animation: none; }
}
.nw-halloween-stamps-wrap {
    position: relative;
}
/* Both candles flank the TOP of the stamps grid (moved up from an earlier
   version that centered/bottom-anchored them) rather than the whole grid's
   height. */
.nw-halloween-candle {
    width: clamp(80px, 9vw, 130px);
    height: auto;
    display: block;
    position: absolute;
    top: 0;
}
.nw-halloween-candle--left {
    left: 0;
}
.nw-halloween-candle--right {
    right: 0;
}
/* Exactly 4 per row (then 4, then 3), centered - a fixed item width plus a
   container capped to exactly 4 columns + gaps, so flex-wrap breaks the
   row at 4 instead of fitting however many happen to squeeze into the
   available width. Flexbox (not grid) specifically because it centers an
   incomplete last row automatically via justify-content - grid leaves a
   partial row flush left with empty trailing columns. */
.nw-halloween-stamps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.8em 1.4em;
    max-width: 830px;
    margin: 0 auto;
}
.nw-halloween-stamp {
    flex: 0 1 190px;
    min-width: 120px;
    text-align: center;
}
.nw-halloween-stamp img {
    width: 100%;
    max-width: 190px;
    height: auto;
    display: block;
    margin: 0 auto;
}
/* Phones: two stamps per row. flex-wrap breaks lines using the 190px
   flex-basis (not min-width), so on a ~360px screen only one fitted per
   row - give each stamp half the row instead (minus half the 1.4em gap).
   The 11th stamp sits centered on its own row via justify-content. */
@media (max-width: 600px) {
    .nw-halloween-stamp {
        flex: 0 1 calc(50% - 0.7em);
        min-width: 0;
    }
}
.nw-halloween-vote-btn {
    margin-top: 0.6em;
    font-family: var(--nw-font-nav);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: 0.85rem;
    text-transform: uppercase;
    background: #EA8C1E;
    color: #211F1D;
    border: none;
    border-radius: 0.3em;
    padding: 0.45em 1.1em;
    cursor: pointer;
    transition: opacity 0.15s;
}
.nw-halloween-vote-btn:hover {
    opacity: 0.85;
}
.nw-halloween-vote-btn:disabled {
    opacity: 0.5;
    cursor: default;
}
.nw-halloween-result {
    margin-top: 0.6em;
}
.nw-halloween-bar {
    width: 100%;
    height: 0.5em;
    background: var(--nw-line);
    border-radius: 0.3em;
    overflow: hidden;
}
.nw-halloween-bar-fill {
    height: 100%;
    width: 0%;
    background: #EA8C1E;
    transition: width 0.4s ease;
}
.nw-halloween-pct {
    display: block;
    margin-top: 0.3em;
    font-family: var(--nw-font-nav);
    font-style: normal;
    font-size: 0.95rem;
}
/* Sits above the stamps grid (between the pennant and the grid). */
.nw-halloween-vote-status {
    text-align: center;
    max-width: 830px;
    margin: 0 auto 1.6em;
    font-size: 1rem;
}
/* Falling autumn leaves. Created by the inline script in halloween.php
   from one img/halloween/hoja.png; each one is 3 nested boxes so the
   motions stack: .nw-leaf-fall goes top->bottom (to --nw-land, set per leaf
   by JS so it ends inside the leaf bed), .nw-leaf-sway drifts left/right,
   the img spins flat + flutters in 3D (capped at +-50deg so it never goes
   edge-on and shows as a thin line). The layer covers the whole
   .nw-halloween-scene (stamps + bed), in front of the stamps but BEHIND
   .nw-halloween-leafbed, so leaves look like they land in the pile.
   pointer-events:none keeps the Vote buttons clickable. */
.nw-halloween-scene {
    position: relative;
}
.nw-halloween-leaffall {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
}
.nw-leaf-fall {
    position: absolute;
    top: -60px;
    animation: nw-leaf-fall linear infinite;
    will-change: transform;
}
.nw-leaf-sway {
    animation: nw-leaf-sway ease-in-out infinite alternate;
}
.nw-leaf {
    display: block;
    height: auto;
    animation-name: nw-leaf-spin, nw-leaf-flutter;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes nw-leaf-fall {
    0%   { transform: translateY(0); opacity: 1; }
    95%  { opacity: 1; }
    100% { transform: translateY(var(--nw-land, 1200px)); opacity: 0; }
}
@keyframes nw-leaf-sway {
    from { transform: translateX(calc(-1 * var(--nw-sway, 50px))) rotate(-12deg); }
    to   { transform: translateX(var(--nw-sway, 50px)) rotate(12deg); }
}
@keyframes nw-leaf-spin {
    from { rotate: 0deg; }
    to   { rotate: 360deg; }
}
@keyframes nw-leaf-flutter {
    from { transform: rotateY(-50deg) rotateX(12deg); }
    to   { transform: rotateY(50deg) rotateX(-12deg); }
}
@media (prefers-reduced-motion: reduce) {
    .nw-halloween-leaffall { display: none; }
}
/* Static bed of fallen leaves between the Shop/Mail Club buttons and the
   footer, full width. Leaves are absolutely placed by the script in
   halloween.php (denser low down, bumpy top edge); overflow:hidden trims
   the ones that poke past the bottom/sides. */
.nw-halloween-leafbed {
    position: relative;
    z-index: 6;
    width: 100%;
    height: clamp(80px, 9vw, 140px);
    margin-top: 2em;
    overflow: hidden;
    pointer-events: none;
}
.nw-leafbed-leaf {
    position: absolute;
    display: block;
    height: auto;
}
.nw-halloween-cta {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin-top: 2em;
    position: relative;
    z-index: 1;
}
.nw-halloween-btn-shop,
.nw-halloween-btn-mailclub {
    text-decoration: none;
    color: #211F1D;
    text-align: center;
    box-shadow: 0.15em 0.2em 0 rgba(33, 31, 29, 0.5);
}
.nw-halloween-btn-shop {
    background: #EA8C1E;
}
.nw-halloween-btn-mailclub {
    background: #C3D172;
}

@media (max-width: 900px) {
    .nw-halloween-intro {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    .nw-halloween-candle {
        display: none;
    }
}