/* ============================================================
   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 (index.php) 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 the home page (the only page with a .nw-hero) 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 this page specifically, 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. */
.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 the home page, 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). Home is the one
       page where content is 1400px wide (.nw-products/.nw-mailclub-home),
       and it already has the nw-has-hero override below for that. */
    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-has-hero .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;
}