/*
 * Nagyigurumi: „Nagyi asztala a vásárban” (2026. szeptember)
 *
 * A világ szabályai röviden:
 * - A darabok a zöld terítőn állnak (.ni-terito), minden más papíron (fehér).
 * - Az ár mindig kraftpapír árcédulán van (.ni-cedula), lyukasztással.
 * - Árnyékot csak a terítőn álló tárgy kap; papíron vonalak tagolnak.
 * - Címek és árak: Besley. Szöveg és kezelőelemek: Inter.
 * - Egyetlen mozgás: a cédula meglendül, ha a darabhoz érsz.
 *
 * A régi, Tailwind-alapú oldalak (Rólunk, GYIK, jogi oldalak stb.) a
 * lap alján lévő felülírásokkal kapják meg ugyanezt a világot.
 */

/* ── Betűk ───────────────────────────────────────────────────────────── */

@font-face {
    font-family: "Besley";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(/assets/fonts/besley-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Besley";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(/assets/fonts/besley-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Alapértékek ─────────────────────────────────────────────────────── */

:root {
    /* terítő */
    --terito: #1c4631;
    --terito-sotet: #133224;
    --terito-vilagos: #245a40;
    --terito-szoveg: rgba(255, 255, 255, .8);
    --terito-vonal: rgba(255, 255, 255, .16);

    /* papír és tinta */
    --papir: #fff;
    --len: #f2f4f1;
    --tinta: #1c211e;
    --tinta-2: #4b5550;
    --tinta-3: #66706a;
    --vonal: #dde3df;
    --vonal-2: #c5cfc8;
    --zold-tinta: #123c28;
    --zold: #1f5a3e;

    /* árcédula */
    --kraft: #d4b48c;
    --kraft-2: #b8946a;
    --kraft-halvany: #efe3d3;

    --hiba: #b42318;
    --hiba-hatter: #fef3f2;
    --siker-hatter: #edf5ef;

    --betu-cim: "Besley", Georgia, "Times New Roman", serif;
    --betu-szoveg: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --szel: 76rem;
    --margo: clamp(1rem, .45rem + 2.6vw, 2rem);
    --sav: clamp(3.25rem, 2.2rem + 4.5vw, 6rem);

    --r-kicsi: 6px;
    --r: 10px;

    --arnyek-targy: 0 1px 2px rgba(0, 0, 0, .2), 0 14px 26px -16px rgba(0, 0, 0, .7);
    --arnyek-targy-fent: 0 2px 4px rgba(0, 0, 0, .2), 0 22px 34px -18px rgba(0, 0, 0, .75);
    --ease-out: cubic-bezier(.22, 1, .36, 1);

    accent-color: var(--terito);
    caret-color: var(--terito);
    scrollbar-color: var(--vonal-2) transparent;
}

::selection { background: var(--kraft); color: var(--tinta); }

body.ni {
    font-variant-numeric: lining-nums;
    font-family: var(--betu-szoveg);
    color: var(--tinta);
    background: var(--papir);
    font-size: 1rem;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

.ni :focus-visible {
    outline: 3px solid var(--zold);
    outline-offset: 3px;
    border-radius: 4px;
}
.ni .ni-terito :focus-visible,
.ni .ni-lab :focus-visible { outline-color: var(--kraft); }

.ni img { max-width: 100%; }

.ni-wrap {
    width: 100%;
    max-width: var(--szel);
    margin-inline: auto;
    padding-inline: var(--margo);
}

.ni-sav { padding-block: var(--sav); }
.ni-sav--len { background: var(--len); }
/* a nyitó alatt folytatódó terítő: ugyanaz az asztal, nem kell újabb nagy hézag */
.ni-sav--fent-kicsi { padding-top: .5rem; }
.ni-sav--lista { padding-top: 2rem; }

/* A JavaScript a Tailwind „hidden” osztályával rejt el; a saját display
   értékű elemeinken ez csak akkor hat, ha itt külön kimondjuk. */
.ni-mezok.hidden,
.ni-foxpost-valasztott.hidden,
.ni-foxpost-gomb.hidden,
.ni-valaszto.hidden,
.ni-osszeg-sor.hidden { display: none; }

.ni-mt { margin-top: 1rem; }
.ni-mb { margin-bottom: 1rem; }

.ni-rejtett {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ── Tipográfia ──────────────────────────────────────────────────────── */

.ni-h1,
.ni-h2,
.ni-h3 {
    font-family: var(--betu-cim);
    color: var(--zold-tinta);
    text-wrap: balance;
    overflow-wrap: break-word;
    margin: 0;
}
.ni-h1 {
    font-weight: 800;
    font-size: clamp(2.05rem, 1.4rem + 2.7vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -.018em;
}
.ni-h2 {
    font-weight: 700;
    font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -.012em;
}
.ni-h3 {
    font-weight: 700;
    font-size: 1.1875rem;
    line-height: 1.25;
}
.ni-terito .ni-h1,
.ni-terito .ni-h2,
.ni-terito .ni-h3 { color: #fff; }

.ni-bevezeto {
    font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
    line-height: 1.6;
    color: var(--tinta-2);
    max-width: 38em;
    margin: 0;
}
.ni-terito .ni-bevezeto { color: var(--terito-szoveg); }

.ni-szoveg { max-width: 65ch; hyphens: auto; }
@media (min-width: 960px) { .ni-szoveg { hyphens: manual; } }
.ni-szoveg p { margin: 0 0 1em; }
.ni-szoveg p:last-child { margin-bottom: 0; }

.ni-link {
    color: var(--zold);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
    transition: color .15s;
}
.ni-link:hover { color: var(--zold-tinta); text-decoration-thickness: 2px; }
.ni-terito .ni-link { color: #fff; }

.ni-nyillink {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--zold);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.ni-nyillink svg { width: 1.05rem; height: 1.05rem; transition: transform .25s var(--ease-out); }
.ni-nyillink:hover { color: var(--zold-tinta); }
.ni-nyillink:hover svg { transform: translateX(3px); }
.ni-terito .ni-nyillink { color: #fff; }
.ni-terito .ni-nyillink:hover { color: var(--kraft-halvany); }

/* ── Gombok ──────────────────────────────────────────────────────────── */

.ni-gomb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 3.125rem;
    padding: .8rem 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--r-kicsi);
    font: 600 1rem/1.2 var(--betu-szoveg);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background-color .18s, color .18s, border-color .18s, transform .16s var(--ease-out);
}
.ni-gomb svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
.ni-gomb:active { transform: scale(.98); }
.ni-gomb[disabled],
.ni-gomb[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

.ni-gomb--fo { background: var(--terito); color: #fff; }
.ni-gomb--fo:hover { background: var(--terito-sotet); }

.ni-gomb--papir { background: #fff; color: var(--zold-tinta); }
.ni-gomb--papir:hover { background: var(--kraft-halvany); }

.ni-gomb--keret { background: transparent; color: var(--zold-tinta); border-color: var(--vonal-2); }
.ni-gomb--keret:hover { border-color: var(--zold); background: var(--len); }

.ni-gomb--szeles { width: 100%; }

/* ── Árcédula ────────────────────────────────────────────────────────── */
/* Külső elem: árnyék és lengés. Belső: a kivágott kraftpapír. */

.ni-cedula {
    display: inline-block;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .28));
    transform-origin: .7rem 50%;
}
.ni-cedula__papir {
    display: inline-flex;
    align-items: baseline;
    gap: .45em;
    padding: .34rem .75rem .36rem 1.45rem;
    background: var(--kraft);
    color: var(--tinta);
    font: 800 1.0625rem/1.1 var(--betu-cim);
    letter-spacing: -.005em;
    white-space: nowrap;
    clip-path: polygon(.72rem 0, 100% 0, 100% 100%, .72rem 100%, 0 50%);
}
/* a lyukasztás, erősítő gyűrűvel */
.ni-cedula__papir::before {
    content: "";
    position: absolute;
    left: .52rem;
    top: 50%;
    width: .42rem;
    height: .42rem;
    margin-top: -.21rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1.5px var(--kraft-2);
}
.ni-cedula__regi {
    font: 500 .8125rem/1 var(--betu-szoveg);
    text-decoration: line-through;
    color: #4a3a26; /* 5,6:1 a kraft alapon */
}
.ni-cedula--nagy .ni-cedula__papir {
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    padding: .45rem 1.1rem .5rem 2.1rem;
    clip-path: polygon(1rem 0, 100% 0, 100% 100%, 1rem 100%, 0 50%);
}
.ni-cedula--nagy { transform-origin: 1rem 50%; }
.ni-cedula--nagy .ni-cedula__papir::before { left: .78rem; width: .55rem; height: .55rem; margin-top: -.275rem; }
.ni-cedula--nagy .ni-cedula__regi { font-size: 1rem; }

@keyframes ni-leng {
    0% { transform: rotate(0); }
    22% { transform: rotate(-6deg); }
    48% { transform: rotate(3.5deg); }
    72% { transform: rotate(-1.5deg); }
    100% { transform: rotate(0); }
}

/* ── Terítő ──────────────────────────────────────────────────────────── */

.ni-terito {
    position: relative;
    background: var(--terito);
    color: #fff;
}
/* varrott szegély: öltéssor a terítő szélén */
.ni-szeg-fent::before,
.ni-szeg-lent::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .24) 0 11px, transparent 11px 19px);
    pointer-events: none;
}
.ni-szeg-fent::before { top: 11px; }
.ni-szeg-lent::after { bottom: 11px; }

/* ── Értesítősáv és fejléc ───────────────────────────────────────────── */

.ni-hirsav {
    position: relative;
    background: var(--terito-sotet);
    color: rgba(255, 255, 255, .9);
    font-size: .8125rem;
    line-height: 1.35;
    text-align: center;
    padding: .55rem 2.75rem;
}
.ni-hirsav.is-hidden { display: none; }
/* akciósáv: kraftpapír, mint az árcédula (a sale.css színátmenetét felülírja) */
.ni-akciosav {
    position: relative;
    background: var(--kraft);
    color: var(--tinta);
    font-size: .875rem;
    line-height: 1.35;
    text-align: center;
    padding: .6rem 2.75rem;
}
.ni-akciosav.is-hidden { display: none; }
.ni-akciosav__link { color: inherit; text-decoration: none; }
.ni-akciosav__link:hover { text-decoration: underline; text-underline-offset: .2em; }
.ni-akciosav .ni-hirsav__zar { color: rgba(28, 33, 30, .7); }
.ni-akciosav .ni-hirsav__zar:hover { color: var(--tinta); background: rgba(0, 0, 0, .06); }
.ni-akciosav .sale-countdown-num { font-variant-numeric: lining-nums tabular-nums; font-weight: 600; white-space: nowrap; }
.ni-hirsav strong { color: #fff; font-weight: 600; }
.ni-hirsav__zar {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    border-radius: 6px;
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
}
.ni-hirsav__zar:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.ni-hirsav__zar svg { width: 1rem; height: 1rem; }

.ni-fejlec {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--vonal);
    transition: box-shadow .25s;
}
.ni-fejlec.header-scrolled { box-shadow: 0 8px 22px -16px rgba(0, 0, 0, .45); }
.ni-fejlec__sor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 4rem;
}
.ni-marka {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: var(--zold-tinta);
    flex-shrink: 0;
}
.ni-marka img { width: 2.375rem; height: 2.375rem; border-radius: 50%; }
.ni-marka span {
    font: 800 1.3rem/1 var(--betu-cim);
    letter-spacing: -.015em;
}
.ni-menu { display: none; }
.ni-menu a {
    color: var(--tinta-2);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    padding: .5rem 0;
    transition: color .15s;
}
.ni-menu a:hover { color: var(--zold-tinta); }
.ni-menu a[aria-current="page"] {
    color: var(--zold-tinta);
    text-decoration: underline;
    text-decoration-color: var(--kraft-2);
    text-decoration-thickness: 2px;
    text-underline-offset: .55em;
}
.ni-fejlec__ikonok { display: flex; align-items: center; gap: .1rem; margin-right: -.5rem; }
.ni-ikongomb {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--tinta-2);
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s, background-color .15s;
}
.ni-ikongomb:hover { color: var(--zold-tinta); background: var(--len); }
.ni-ikongomb svg { width: 1.375rem; height: 1.375rem; }
#cart-badge,
#fav-badge {
    position: absolute;
    top: .3rem;
    right: .2rem;
    left: auto;
    min-width: 1.125rem;
    height: 1.125rem;
    width: auto;
    padding: 0 .25rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--terito);
    color: #fff;
    font: 700 .6875rem/1 var(--betu-szoveg);
    box-shadow: 0 0 0 2px #fff;
}

.ni-mobilmenu { border-top: 1px solid var(--vonal); background: #fff; }
.ni-mobilmenu:not(.hidden) { display: block; }
.ni-mobilmenu nav { display: flex; flex-direction: column; padding-block: .5rem 1rem; }
.ni-mobilmenu nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 0;
    border-bottom: 1px solid var(--vonal);
    color: var(--tinta);
    font-size: 1.0625rem;
    font-weight: 500;
    text-decoration: none;
}
.ni-mobilmenu nav a svg { width: 1.1rem; height: 1.1rem; color: var(--tinta-3); }
.ni-mobilmenu nav a[aria-current="page"] { color: var(--zold-tinta); font-weight: 700; }
.ni-mobilmenu__info {
    margin: .25rem 0 1.25rem;
    padding: .9rem 1rem;
    background: var(--len);
    border-radius: var(--r-kicsi);
    font-size: .875rem;
    color: var(--tinta-2);
}
.ni-mobilmenu__info p { margin: 0; }
.ni-mobilmenu__info p + p { margin-top: .35rem; }

.ni-kereso {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(12, 26, 18, .55);
}
.ni-kereso:not(.hidden) { display: block; }
.ni-kereso__panel {
    background: #fff;
    padding: 1rem 0 1.25rem;
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .6);
}
.ni-kereso form { display: flex; gap: .5rem; align-items: center; }
.ni-kereso input {
    flex: 1;
    min-width: 0;
    height: 3.25rem;
    padding: 0 1rem;
    border: 2px solid var(--vonal-2);
    border-radius: var(--r-kicsi);
    font: 400 1.0625rem var(--betu-szoveg);
    color: var(--tinta);
    background: #fff;
    outline: none;
}
.ni-kereso input:focus { border-color: var(--zold); }

@media (max-width: 419px) {
    .ni-marka img { width: 2.125rem; height: 2.125rem; }
    .ni-marka span { font-size: 1.2rem; }
    .ni-ikongomb { width: 2.5rem; }
    .ni-fejlec__ikonok .ni-kedvenc-gomb { display: none; }
}

@media (min-width: 1024px) {
    .ni-fejlec__sor { height: 4.75rem; }
    .ni-marka img { width: 2.75rem; height: 2.75rem; }
    .ni-marka span { font-size: 1.55rem; }
}
@media (min-width: 1100px) {
    .ni-menu { display: flex; align-items: center; gap: 1.6rem; }
    .ni-csak-mobil { display: none !important; }
}

/* ── Üzenetsáv (flash) ───────────────────────────────────────────────── */

.ni-uzenet { border-bottom: 1px solid; padding: .9rem 0; font-size: .9375rem; }
.ni-uzenet .ni-wrap { display: flex; align-items: flex-start; gap: .75rem; }
.ni-uzenet svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: .1rem; }
.ni-uzenet--siker { background: var(--siker-hatter); border-color: #cfe3d5; color: var(--zold-tinta); }
.ni-uzenet--hiba { background: var(--hiba-hatter); border-color: #f5c9c4; color: #7a1a12; }

/* ── Nyitó (főoldal) ─────────────────────────────────────────────────── */

.ni-nyito { padding-block: 1.75rem 2.75rem; }
.ni-nyito__racs { display: grid; gap: 1.75rem; }
.ni-nyito__kep { position: relative; margin: 0 0 1.25rem; }
.ni-nyito__foto {
    display: block;
    background: #fff;
    padding: 6px;
    border-radius: var(--r-kicsi);
    box-shadow: var(--arnyek-targy-fent);
}
.ni-nyito__foto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 3px;
}
/* fehér keretes fotó a terítőn (Rólunk) */
.ni-keret { background: #fff; padding: 6px; border-radius: var(--r-kicsi); box-shadow: var(--arnyek-targy-fent); }
.ni-keret img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.ni-nyito__nagyi {
    position: absolute;
    left: .75rem;
    bottom: -1.25rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
}
.ni-nyito__nagyi img {
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: var(--arnyek-targy);
    object-fit: cover;
}
.ni-nyito__nagyi figcaption {
    background: #fff;
    color: var(--zold-tinta);
    font: 700 .9375rem/1.2 var(--betu-cim);
    padding: .45rem .7rem;
    border-radius: 4px;
    box-shadow: var(--arnyek-targy);
    margin-top: 1.4rem;
}
.ni-nyito__szoveg { display: flex; flex-direction: column; gap: 1.1rem; }
.ni-nyito__gombok { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: .35rem; }
.ni-nyito__gombok .ni-gomb { flex: 1 1 100%; }

@media (min-width: 640px) {
    .ni-nyito__gombok .ni-gomb { flex: 0 0 auto; }
}
@media (min-width: 960px) {
    .ni-nyito { padding-block: 4rem 4.5rem; }
    .ni-nyito__racs {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
        align-items: center;
        gap: 4.5rem;
    }
    .ni-nyito__kep { order: 2; margin: 0; }
    .ni-nyito__foto img { aspect-ratio: 4 / 5; }
    .ni-nyito__nagyi { left: -1.5rem; bottom: 2rem; }
    .ni-nyito__nagyi img { width: 5.5rem; height: 5.5rem; }
    .ni-nyito__nagyi figcaption { font-size: 1rem; margin-top: 2.2rem; }
    .ni-nyito__szoveg { gap: 1.4rem; }
}

/* ── Asztal: termékrács a terítőn ────────────────────────────────────── */

.ni-asztal-fej {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem 2rem;
    margin-bottom: 1.5rem;
}
.ni-asztal-fej__szoveg { display: flex; flex-direction: column; gap: .45rem; }
.ni-asztal-fej p { margin: 0; }

.ni-asztal {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem .8rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (min-width: 700px) {
    .ni-asztal { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.25rem; }
}
@media (min-width: 1080px) {
    .ni-asztal { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
}

.ni-darab {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: var(--r);
    box-shadow: var(--arnyek-targy);
    color: var(--tinta);
}
.ni-darab__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
    border-radius: var(--r);
}
.ni-darab__kep {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--r) var(--r) 0 0;
    background: var(--len);
}
.ni-darab__kep img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ni-darab__test { display: flex; flex-direction: column; flex: 1; padding: 0 .8rem .95rem; }
.ni-darab .ni-cedula { align-self: flex-start; margin: -1.1rem 0 0 -.45rem; }
.ni-darab__nev {
    margin: .6rem 0 0;
    font: 700 1rem/1.25 var(--betu-cim);
    color: var(--zold-tinta);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ni-darab__regi { color: var(--tinta-3); text-decoration-thickness: 1px; }
.ni-darab__meta {
    margin: .35rem 0 0;
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--tinta-3);
}
.ni-kedvenc {
    position: absolute;
    right: .45rem;
    top: .45rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--tinta);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s var(--ease-out);
}
.ni-kedvenc:active { transform: scale(.92); }
.ni-kedvenc svg { width: 1.2rem; height: 1.2rem; }

@media (min-width: 700px) {
    .ni-darab__test { padding: 0 1rem 1.1rem; }
    .ni-darab__nev { font-size: 1.0625rem; -webkit-line-clamp: 2; }
    .ni-darab__meta { font-size: .875rem; }
}

/* Az oldal egyetlen mozgása: ha a darabhoz érsz, a cédula meglendül a lyukánál fogva. */
@media (hover: hover) and (pointer: fine) {
    .ni-darab:hover .ni-cedula { animation: ni-leng .95s var(--ease-out); }
}
.ni-darab__link:focus-visible .ni-cedula { animation: ni-leng .95s var(--ease-out); }

.ni-asztal-lab {
    display: flex;
    justify-content: center;
    margin-top: 2.25rem;
}

/* ── Így kerül hozzád (lépések) ──────────────────────────────────────── */

.ni-lepesek {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    gap: 0;
    border-top: 1px solid var(--vonal);
}
.ni-lepes {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: .25rem 1rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--vonal);
    align-content: start;
}
.ni-lepes__szam {
    grid-row: span 2;
    font: 800 2.4rem/1 var(--betu-cim);
    color: var(--kraft-2);
}
.ni-lepes > :not(.ni-lepes__szam) { grid-column: 2; }
.ni-lepes h3 { margin: .15rem 0 0; }
.ni-lepes p { margin: 0; color: var(--tinta-2); max-width: 40ch; }
.ni-lepes__jelek { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; color: var(--tinta-2); }
.ni-lepes__jelek svg { width: 2.4rem; height: 2.4rem; }
.ni-lepes__jelek img { height: 2.25rem; width: auto; border-radius: 4px; }

@media (min-width: 900px) {
    .ni-lepesek { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; gap: 2.5rem; }
    .ni-lepes {
        grid-template-columns: minmax(0, 1fr);
        border-bottom: 0;
        border-top: 1px solid var(--vonal-2);
        padding: 1.25rem 0 0;
    }
    .ni-lepes__szam { grid-row: auto; font-size: 3rem; margin-bottom: .6rem; }
    .ni-lepes > :not(.ni-lepes__szam) { grid-column: auto; }
}

/* ── Nagyi ───────────────────────────────────────────────────────────── */

.ni-nagyi { display: grid; gap: 2rem; align-items: center; }
.ni-nagyi__kep { margin: 0; max-width: 26rem; }
.ni-nagyi__kep img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--r-kicsi);
}
.ni-nagyi__kep figcaption { margin-top: .6rem; font-size: .875rem; color: var(--tinta-3); }
.ni-nagyi__szoveg { display: flex; flex-direction: column; gap: 1.1rem; }
.ni-nagyi__szoveg p { margin: 0; color: var(--tinta-2); font-size: 1.0625rem; max-width: 36em; }

@media (min-width: 900px) {
    .ni-nagyi { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4.5rem; }
}

/* ── Vélemények ──────────────────────────────────────────────────────── */

.ni-velemenyek { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 2rem; }
.ni-velemeny { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--vonal-2); }
.ni-velemeny blockquote { margin: 0; }
.ni-velemeny blockquote p {
    margin: 0;
    font: 500 1.125rem/1.55 var(--betu-cim);
    color: var(--tinta);
}
.ni-velemeny blockquote p::before { content: "„"; }
.ni-velemeny blockquote p::after { content: "”"; }
.ni-velemeny figcaption { margin-top: .9rem; font-size: .875rem; color: var(--tinta-3); }
.ni-velemeny figcaption strong { color: var(--tinta); font-weight: 600; }

@media (min-width: 900px) {
    .ni-velemenyek { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
}

/* ── Kérdések ────────────────────────────────────────────────────────── */

.ni-kerdesek { display: grid; gap: 0; margin: 2rem 0 0; }
.ni-kerdes { padding: 1.25rem 0; border-top: 1px solid var(--vonal); }
.ni-kerdes dt { font: 700 1.1875rem/1.3 var(--betu-cim); color: var(--zold-tinta); }
.ni-kerdes dd { margin: .45rem 0 0; color: var(--tinta-2); max-width: 44ch; }
.ni-kerdes dd a { white-space: nowrap; }

@media (min-width: 900px) {
    .ni-kerdesek { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.5rem; }
}
.ni-kerdesek-lab { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--vonal); }

/* ── Két hasáb, űrlap, pipák (belső oldalak) ─────────────────────────── */

.ni-ket-hasab { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 900px) {
    .ni-ket-hasab { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
    .ni-ket-hasab--kozep { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}
.ni-terito .ni-nagyi__szoveg p { color: var(--terito-szoveg); }
.ni-urlap { max-width: 40rem; }
.ni-kapcsolat-info { order: 2; }
@media (min-width: 900px) { .ni-kapcsolat-info { order: 0; } }
.ni-pipak { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .6rem; }
.ni-pipak li { display: flex; align-items: center; gap: .6rem; }
.ni-pipak svg { width: 1.2rem; height: 1.2rem; color: var(--kraft); flex-shrink: 0; }
.ni-kerdes-doboz {
    margin-top: 3rem;
    padding: 1.5rem;
    border-radius: var(--r);
    background: var(--len);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
    max-width: 48rem;
}
.ni-kerdes-doboz p { margin: 0; color: var(--tinta-2); }
.ni-lepesek--kicsi { margin-top: 0; margin-bottom: 3rem; }
.ni-lepesek--kicsi .ni-lepes__szam { font-size: 2rem; }
.ni-mintak { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.ni-mintak img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.ni-fajl { padding: .55rem; cursor: pointer; }
.ni-fajl::file-selector-button {
    margin-right: .8rem;
    padding: .45rem .9rem;
    border: 1px solid var(--vonal-2);
    border-radius: 4px;
    background: var(--len);
    color: var(--zold-tinta);
    font: 600 .875rem var(--betu-szoveg);
    cursor: pointer;
}

/* ── Oldalfej (belső oldalak) ────────────────────────────────────────── */

.ni-oldalfej { padding-block: 1rem 2rem; border-bottom: 1px solid var(--vonal); }
.ni-oldalfej .ni-h1 { margin-top: .35rem; }
.ni-oldalfej .ni-bevezeto { margin-top: .75rem; }
.ni-oldalfej--terito { border-bottom: 0; }

.ni-morzsa ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: .5rem 0;
    list-style: none;
    font-size: .875rem;
    color: var(--tinta-3);
}
.ni-morzsa li { display: inline-flex; align-items: center; gap: .35rem; }
.ni-morzsa svg { width: .85rem; height: .85rem; color: var(--vonal-2); }
.ni-morzsa a { color: var(--tinta-2); text-decoration: none; }
.ni-morzsa a:hover { color: var(--zold-tinta); text-decoration: underline; text-underline-offset: .2em; }
.ni-morzsa [aria-current="page"] { color: var(--tinta); font-weight: 500; }

/* ── Szűrő (terméklista) ─────────────────────────────────────────────── */

.ni-szuro { display: flex; flex-direction: column; gap: 1rem; padding-block: 1.25rem; }
.ni-chipek { display: flex; gap: .5rem; overflow-x: auto; margin-inline: calc(var(--margo) * -1); padding: .15rem var(--margo); scrollbar-width: none; }
.ni-chipek::-webkit-scrollbar { display: none; }
.ni-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.5rem;
    padding: .45rem 1rem;
    border: 1px solid var(--vonal-2);
    border-radius: 999px;
    background: #fff;
    color: var(--tinta);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .15s, background-color .15s;
}
.ni-chip span { color: var(--tinta-3); font-size: .8125rem; }
.ni-chip:hover { border-color: var(--zold); }
.ni-chip[aria-current="true"] { background: var(--terito); border-color: var(--terito); color: #fff; }
.ni-chip[aria-current="true"] span { color: rgba(255, 255, 255, .75); }

.ni-szuro__sor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
.ni-szuro__db { margin: 0; font-size: .9375rem; color: var(--tinta-2); }
.ni-szuro__eszkozok { display: flex; gap: .5rem; flex: 1 1 auto; justify-content: flex-end; }
.ni-szuro__eszkozok form { flex: 1 1 14rem; max-width: 20rem; position: relative; }
.ni-szuro__eszkozok form svg { position: absolute; left: .8rem; top: 50%; width: 1.1rem; height: 1.1rem; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; }
.ni-szuro input[type="search"] { padding-left: 2.5rem; }

/* ── Lapozó, ismertető, üres állapot ─────────────────────────────────── */

.ni-lapozo { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 2.5rem; }
.ni-lapozo a,
.ni-lapozo span {
    display: inline-grid;
    place-items: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: .5rem .9rem;
    border-radius: var(--r-kicsi);
    font-weight: 600;
    text-decoration: none;
    color: var(--zold-tinta);
    border: 1px solid var(--vonal-2);
    background: #fff;
}
.ni-lapozo a:hover { border-color: var(--zold); }
.ni-lapozo span[aria-current] { background: var(--terito); border-color: var(--terito); color: #fff; }
.ni-terito .ni-lapozo a { background: rgba(255, 255, 255, .08); border-color: var(--terito-vonal); color: #fff; }
.ni-terito .ni-lapozo a:hover { background: rgba(255, 255, 255, .16); }
.ni-terito .ni-lapozo span[aria-current] { background: #fff; border-color: #fff; color: var(--zold-tinta); }

.ni-ismerteto { color: var(--tinta-2); }
.ni-ismerteto .ni-h2 { margin-bottom: 1rem; }
.ni-ismerteto .ni-h3 { margin: 2rem 0 .6rem; }
.ni-ismerteto ul { margin: 0 0 1em; padding-left: 1.2rem; }
.ni-ismerteto li { margin: .35rem 0; }
.ni-ismerteto li::marker { color: var(--kraft-2); }
.ni-ismerteto strong { color: var(--tinta); }

/* ── Űrlapmezők ──────────────────────────────────────────────────────── */

.ni-mezo,
.ni select.ni-mezo {
    width: 100%;
    min-height: 3rem;
    padding: .65rem .9rem;
    border: 1px solid var(--vonal-2);
    border-radius: var(--r-kicsi);
    background: #fff;
    color: var(--tinta);
    font: 400 1rem/1.4 var(--betu-szoveg);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance: none;
}
.ni select.ni-mezo {
    width: auto;
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5550' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1rem;
    cursor: pointer;
}
.ni-mezo::placeholder { color: #7b847e; }
.ni-mezo:focus { border-color: var(--zold); box-shadow: 0 0 0 3px rgba(31, 90, 62, .18); }
.ni-mezo[readonly] { background: var(--len); color: var(--tinta-2); }
textarea.ni-mezo { min-height: 6rem; resize: vertical; }
.ni-cimke { display: block; margin-bottom: .4rem; font-size: .9375rem; font-weight: 600; color: var(--tinta); }
.ni-cimke small { font-weight: 400; color: var(--tinta-3); }
.ni-sugo { margin: .4rem 0 0; font-size: .8125rem; color: var(--tinta-3); }

/* ── Termékoldal ─────────────────────────────────────────────────────── */

.ni-termek { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
/* mobilon a fotó mögött teljes szélességű terítősáv */
.ni-termek__galeria-sav {
    background: var(--terito);
    margin-inline: calc(var(--margo) * -1);
    padding-inline: var(--margo);
}
.ni-galeria { padding: 1.25rem 0 1.5rem; }
.ni-termek__nev { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem); }
.ni-adatok-cim { margin-bottom: .75rem; }
.ni-galeria__fo {
    position: relative;
    display: block;
    width: 100%;
    padding: 6px;
    border: 0;
    background: #fff;
    border-radius: var(--r-kicsi);
    box-shadow: var(--arnyek-targy-fent);
    cursor: zoom-in;
    overflow: hidden;
}
.ni-galeria__fo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.ni-galeria__nagyit {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .6rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, .92);
    color: var(--tinta);
    font-size: .8125rem;
    font-weight: 500;
}
.ni-galeria__nagyit svg { width: .95rem; height: .95rem; }
.ni-galeria__kicsik { display: flex; gap: .6rem; margin-top: .9rem; overflow-x: auto; padding-bottom: .25rem; }
.ni-galeria__kicsi {
    flex: 0 0 4.25rem;
    height: 4.25rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    opacity: .7;
    transition: opacity .15s, border-color .15s;
}
.ni-galeria__kicsi img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ni-galeria__kicsi:hover { opacity: 1; }
.ni-galeria__kicsi[aria-current="true"] { border-color: var(--kraft); opacity: 1; }
.ni-galeria__pottyok { display: flex; justify-content: center; margin-top: .3rem; }
.ni-galeria__pottyok button {
    width: 2.5rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    background: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ni-galeria__pottyok span { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(255, 255, 255, .42); transition: background-color .2s, transform .2s var(--ease-out); }
.ni-galeria__pottyok [aria-current="true"] span { background: #fff; transform: scale(1.3); }
@media (max-width: 959px) {
    .ni-galeria__kicsik { display: none; }
    .ni-galeria { padding: .9rem 0 .5rem; }
    .ni-termek__info { padding-block: 1.1rem 2.5rem; gap: 1rem; }
    .ni-termek__nev { font-size: clamp(1.7rem, 1.35rem + 1.8vw, 2.2rem); }
    /* a termékoldalon mobilon csak a visszalépés látszik: ‹ Termékek */
    .ni-termek-morzsa .ni-morzsa li { display: none; }
    .ni-termek-morzsa .ni-morzsa li:nth-last-child(2) { display: inline-flex; }
    .ni-termek-morzsa .ni-morzsa li:nth-last-child(2) svg { transform: rotate(180deg); width: 1rem; height: 1rem; color: var(--tinta-2); }
}
@media (min-width: 960px) {
    .ni-galeria__pottyok { display: none; }
}
.ni-termek__meret { font-size: 1rem; font-weight: 600; color: var(--tinta-2); }
.ni-termek__kerdes { margin: .9rem 0 0; font-size: .9375rem; color: var(--tinta-2); }

.ni-termek__info { padding-block: 1.75rem 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.ni-termek__cim { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ni-termek__cim .ni-kedvenc { position: static; flex-shrink: 0; border: 1px solid var(--vonal-2); box-shadow: none; }
.ni-termek__ar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.ni-termek__keszlet { margin: 0; font-size: .9375rem; color: var(--tinta-2); }
.ni-termek__keszlet strong { color: var(--zold-tinta); font-weight: 600; }
.ni-termek__rovid { margin: 0; font-size: 1.0625rem; color: var(--tinta-2); max-width: 38em; }
.ni-termek__vasarlas { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; }
.ni-termek__vasarlas .ni-gomb--fo { flex: 1 1 14rem; min-height: 3.5rem; font-size: 1.0625rem; }
.ni-mennyiseg {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--vonal-2);
    border-radius: var(--r-kicsi);
    background: #fff;
}
.ni-mennyiseg button {
    width: 2.75rem;
    height: 100%;
    min-height: 3.5rem;
    border: 0;
    background: none;
    color: var(--tinta-2);
    cursor: pointer;
    display: grid;
    place-items: center;
}
.ni-mennyiseg button svg { width: 1rem; height: 1rem; }
.ni-mennyiseg input {
    width: 2.75rem;
    border: 0;
    text-align: center;
    font: 600 1rem var(--betu-szoveg);
    color: var(--tinta);
    background: none;
    -moz-appearance: textfield;
}
.ni-mennyiseg input::-webkit-outer-spin-button,
.ni-mennyiseg input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ni-horgolta { display: flex; align-items: center; gap: .75rem; font-size: .9375rem; color: var(--tinta-2); }
.ni-horgolta img { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; }
.ni-horgolta strong { color: var(--zold-tinta); font-weight: 600; }

.ni-adatok { margin: 0; border-top: 1px solid var(--vonal); }
.ni-adatok > div {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: .25rem 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--vonal);
}
.ni-adatok dt { font-weight: 600; color: var(--tinta); font-size: .9375rem; }
.ni-adatok dd { margin: 0; color: var(--tinta-2); font-size: .9375rem; }
.ni-adatok dd a { font-weight: 600; }

.ni-ertesito {
    padding: 1rem 1.1rem;
    border-radius: var(--r-kicsi);
    background: var(--kraft-halvany);
}
.ni-ertesito p { margin: 0 0 .6rem; font-weight: 600; font-size: .9375rem; }
.ni-ertesito form { display: flex; gap: .5rem; flex-wrap: wrap; }
.ni-ertesito .ni-mezo { flex: 1 1 12rem; }

.ni-leiras h2 { margin-bottom: .75rem; }
.ni-leiras .ni-szoveg { color: var(--tinta-2); font-size: 1.0625rem; }

.ni-gyik { display: grid; gap: 0; border-top: 1px solid var(--vonal); max-width: 48rem; }
.ni-gyik details { border-bottom: 1px solid var(--vonal); }
.ni-gyik summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--tinta);
}
.ni-gyik summary::-webkit-details-marker { display: none; }
.ni-gyik summary svg { width: 1.1rem; height: 1.1rem; color: var(--tinta-3); flex-shrink: 0; transition: transform .25s var(--ease-out); }
.ni-gyik details[open] summary svg { transform: rotate(180deg); }
.ni-gyik details > div { padding: 0 0 1.1rem; color: var(--tinta-2); max-width: 60ch; }

/* ragadós vásárlósáv mobilon, ha a fő gomb már kiment a képből */
.ni-vasarlosav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem var(--margo) calc(.65rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .98);
    border-top: 1px solid var(--vonal);
    box-shadow: 0 -10px 24px -18px rgba(0, 0, 0, .45);
    transform: translateY(110%);
    transition: transform .3s var(--ease-out);
}
.ni-vasarlosav.is-latszik { transform: translateY(0); }
/* a ragadós sáv ne takarja a lábléc alját a termékoldalon */
@media (max-width: 959px) { body:has(#vasarlosav) .ni-lab__also { padding-bottom: 6rem; } }
.ni-vasarlosav__nev { flex: 1; min-width: 0; }
.ni-vasarlosav__nev p { margin: 0; font: 700 .9375rem/1.2 var(--betu-cim); color: var(--zold-tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ni-vasarlosav__nev span { font-size: .875rem; color: var(--tinta-2); }
.ni-vasarlosav .ni-gomb { min-height: 2.9rem; padding-inline: 1.1rem; }

@media (min-width: 960px) {
    .ni-termek { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; }
    /* asztali nézetben a terítő a bal hasáb mögött a képernyő széléig fut */
    .ni-termek__galeria-sav {
        position: relative;
        isolation: isolate;
        background: none;
        margin-inline: 0;
        padding-inline: 0;
    }
    .ni-termek__galeria-sav::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: -100vw;
        background: var(--terito);
        z-index: -1;
    }
    .ni-galeria { padding: 2.5rem 3rem 3rem 0; position: sticky; top: 5.5rem; }
    .ni-termek__info { padding: 2.5rem 0 3rem 3.5rem; }
    .ni-vasarlosav { display: none; }
}

/* ── Kosár és pénztár ────────────────────────────────────────────────── */

.ni-kosar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 2rem 4rem; }
.ni-tetelek { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--vonal); }
.ni-tetel {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    gap: .25rem 1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--vonal);
    align-items: start;
}
.ni-tetel__kep { grid-row: span 2; }
.ni-tetel__kep img { display: block; width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: 6px; background: var(--len); }
.ni-tetel__nev { font: 700 1.0625rem/1.3 var(--betu-cim); color: var(--zold-tinta); text-decoration: none; }
.ni-tetel__nev:hover { text-decoration: underline; text-underline-offset: .2em; }
.ni-tetel__egyseg { margin: .2rem 0 0; font-size: .875rem; color: var(--tinta-3); }
.ni-tetel__ar { font: 700 1.0625rem/1.3 var(--betu-cim); color: var(--tinta); text-align: right; white-space: nowrap; font-variant-numeric: lining-nums proportional-nums; }
.ni-tetel__muveletek { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: .5rem; }
.ni-tetel__muveletek form { margin: 0; }
.ni-tetel .ni-mennyiseg button,
.ni-tetel .ni-mennyiseg span { min-height: 2.5rem; }
.ni-tetel .ni-mennyiseg span { display: grid; place-items: center; min-width: 2.25rem; font-weight: 600; }
.ni-torles {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.5rem;
    padding: 0 .25rem;
    border: 0;
    background: none;
    color: var(--tinta-3);
    font: 500 .875rem var(--betu-szoveg);
    cursor: pointer;
}
.ni-torles:hover { color: var(--hiba); }
.ni-torles svg { width: 1rem; height: 1rem; }

.ni-osszesito {
    align-self: start;
    padding: 1.4rem;
    border-radius: var(--r);
    background: var(--len);
}
.ni-osszesito h2 { font: 700 1.3rem/1.2 var(--betu-cim); color: var(--zold-tinta); margin: 0 0 1rem; }
.ni-osszeg-sor { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; font-size: .9375rem; color: var(--tinta-2); font-variant-numeric: lining-nums tabular-nums; }
.ni-osszeg-sor span:last-child { color: var(--tinta); font-weight: 500; text-align: right; }
.ni-osszeg-sor--vege {
    margin-top: .6rem;
    padding-top: .9rem;
    border-top: 1px solid var(--vonal-2);
    font-size: 1.0625rem;
    color: var(--tinta);
    font-weight: 600;
}
.ni-osszeg-sor--vege span:last-child { font: 800 1.5rem/1.1 var(--betu-cim); color: var(--zold-tinta); font-variant-numeric: lining-nums proportional-nums; }
.ni-kuszob { margin: .9rem 0 0; font-size: .875rem; color: var(--tinta-2); }
.ni-kuszob__sav { height: 6px; margin-top: .5rem; border-radius: 999px; background: #dfe5e0; overflow: hidden; }
.ni-kuszob__sav span { display: block; height: 100%; border-radius: inherit; background: var(--kraft-2); }
.ni-kuszob--kesz { color: var(--zold-tinta); font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.ni-kuszob--kesz svg { width: 1.1rem; height: 1.1rem; }
.ni-osszesito .ni-gomb { margin-top: 1.25rem; }
.ni-fizetesi-jelek { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; color: var(--tinta-2); flex-wrap: wrap; }
.ni-fizetesi-jelek svg { width: 2.25rem; height: 2.25rem; }
.ni-fizetesi-jelek small { width: 100%; font-size: .8125rem; color: var(--tinta-3); }

.ni-ures { padding-block: 3rem 1rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.ni-ures p { margin: 0; color: var(--tinta-2); max-width: 32em; }

@media (min-width: 900px) {
    .ni-kosar { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 3.5rem; }
    .ni-osszesito { position: sticky; top: 6rem; padding: 1.75rem; }
    .ni-tetel { grid-template-columns: 6.5rem minmax(0, 1fr) auto; }
    .ni-tetel__kep img { width: 6.5rem; height: 6.5rem; }
}

.ni-penztar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-block: 1.5rem 4rem; }
.ni-lepesblokk { padding: 1.4rem 0 1.6rem; border-top: 1px solid var(--vonal); }
.ni-lepesblokk:first-child { border-top: 0; padding-top: .25rem; }
.ni-lepesblokk__fej { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1.1rem; }
.ni-lepesblokk__fej span {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--terito);
    color: #fff;
    font: 800 1rem/1 var(--betu-cim);
    flex-shrink: 0;
    transform: translateY(.3rem);
}
.ni-lepesblokk__fej h2 { font: 700 1.3rem/1.2 var(--betu-cim); color: var(--zold-tinta); margin: 0; }
.ni-lepesblokk__fej .ni-jobbra { margin-left: auto; }
.ni-mezok { display: grid; gap: 1rem; }
.ni-mezok--ketto { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
    .ni-mezok--ketto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ni-mezok .ni-teljes { grid-column: 1 / -1; }
}
.ni-mezok--cim { grid-template-columns: 8.25rem minmax(0, 1fr); }

.ni-valasztok { display: grid; gap: .75rem; }
.ni-valaszto {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--vonal-2);
    border-radius: var(--r-kicsi);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.ni-valaszto:hover { border-color: var(--zold); }
.ni-valaszto:has(input:checked) { border-color: var(--terito); background: var(--siker-hatter); box-shadow: inset 0 0 0 1px var(--terito); }
.ni-valaszto input[type="radio"] { width: 1.2rem; height: 1.2rem; margin: .15rem 0 0; flex-shrink: 0; accent-color: var(--terito); }
.ni-valaszto__szoveg { flex: 1; min-width: 0; }
.ni-valaszto__cim { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-weight: 600; color: var(--tinta); }
.ni-valaszto__cim em { font-style: normal; margin-left: auto; font-weight: 600; color: var(--zold-tinta); }
.ni-valaszto__leiras { display: block; margin-top: .25rem; font-size: .875rem; color: var(--tinta-2); }
.ni-valaszto__logo { width: 2.25rem; height: 2.25rem; border-radius: 4px; flex-shrink: 0; }
.ni-valaszto .ni-fizetesi-jelek { margin-top: .5rem; }
.ni-valaszto .ni-fizetesi-jelek svg { width: 2.1rem; height: 2.1rem; }
.ni-ajanlott {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: 4px;
    background: var(--kraft);
    color: var(--tinta);
    font-size: .75rem;
    font-weight: 600;
}

.ni-foxpost-valasztott {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    border-radius: var(--r-kicsi);
    background: var(--siker-hatter);
    border: 1px solid #cfe3d5;
}
.ni-foxpost-valasztott p { margin: 0; }
.ni-foxpost-gomb {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 3.25rem;
    padding: .75rem 1rem;
    border: 2px dashed var(--vonal-2);
    border-radius: var(--r-kicsi);
    background: #fff;
    color: var(--zold-tinta);
    font: 600 1rem var(--betu-szoveg);
    cursor: pointer;
}
.ni-foxpost-gomb:hover { border-color: var(--zold); background: var(--len); }
.ni-foxpost-gomb svg { width: 1.25rem; height: 1.25rem; }
.ni-foxpost-hiba { margin: .5rem 0 0; color: var(--hiba); font-size: .875rem; font-weight: 500; }
.ni-szoveggomb {
    background: none;
    border: 0;
    padding: .25rem 0;
    color: var(--zold);
    font: 600 .9375rem var(--betu-szoveg);
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
}
.ni-elfogadas--elso { margin-top: 0; }
.ni-mezo[aria-invalid="true"] { border-color: var(--hiba); box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
.ni-mennyiseg button[disabled] { opacity: .35; cursor: not-allowed; }
.ni-kosar-tovabb { margin: 1.25rem 0 0; }

.ni-megjegyzes-doboz {
    padding: 1rem 1.1rem;
    border-radius: var(--r-kicsi);
    background: var(--kraft-halvany);
    color: #4a3a26;
    font-size: .9375rem;
}
.ni-megjegyzes-doboz p { margin: 0; }
.ni-megjegyzes-doboz p + p { margin-top: .4rem; }

.ni-penztar .ni-osszesito { background: var(--len); }
.ni-rendeles-tetel { display: flex; gap: .75rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--vonal); }
.ni-rendeles-tetel img { width: 3rem; height: 3rem; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.ni-rendeles-tetel div { flex: 1; min-width: 0; }
.ni-rendeles-tetel p { margin: 0; font-size: .9375rem; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ni-rendeles-tetel small { color: var(--tinta-3); }
.ni-rendeles-tetel strong { font-weight: 600; font-size: .9375rem; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.ni-kupon { margin-top: 1rem; }
.ni-kupon summary { cursor: pointer; font-size: .9375rem; font-weight: 600; color: var(--zold); list-style: none; }
.ni-kupon summary::-webkit-details-marker { display: none; }
.ni-kupon__sor { display: flex; gap: .5rem; margin-top: .6rem; }
.ni-kupon__sor .ni-mezo { min-height: 2.75rem; }
.ni-kupon__sor .ni-gomb { min-height: 2.75rem; padding-inline: 1rem; }
.ni-elfogadas { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1.1rem; font-size: .875rem; color: var(--tinta-2); cursor: pointer; }
.ni-elfogadas input { width: 1.2rem; height: 1.2rem; margin-top: .1rem; flex-shrink: 0; accent-color: var(--terito); }
.ni-mi-tortenik { margin-top: 1rem; font-size: .875rem; color: var(--tinta-2); }
.ni-mi-tortenik strong { color: var(--tinta); }
.ni-bizalom { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .45rem; font-size: .8125rem; color: var(--tinta-2); }
.ni-bizalom li { display: flex; gap: .5rem; align-items: flex-start; }
.ni-bizalom svg { width: 1rem; height: 1rem; color: var(--zold); flex-shrink: 0; margin-top: .1rem; }

@media (min-width: 960px) {
    .ni-penztar { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
    .ni-penztar .ni-osszesito { position: sticky; top: 6rem; }
}

/* ── Lábléc ──────────────────────────────────────────────────────────── */

.ni-lab { position: relative; background: var(--terito-sotet); color: rgba(255, 255, 255, .82); font-size: .9375rem; }
.ni-lab a { color: #fff; text-decoration: none; }
.ni-lab a:hover { text-decoration: underline; text-underline-offset: .2em; }
.ni-lab__felso { display: grid; gap: 2.5rem; padding-block: 3.5rem 2.5rem; }
.ni-lab__marka { display: flex; flex-direction: column; gap: .9rem; max-width: 22rem; }
.ni-lab__marka .ni-marka { color: #fff; }
.ni-lab__marka p { margin: 0; }
.ni-lab__kozosseg { display: flex; gap: .5rem; }
.ni-lab__kozosseg a {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid var(--terito-vonal);
}
.ni-lab__kozosseg a:hover { background: var(--terito); text-decoration: none; }
.ni-lab__kozosseg svg { width: 1.1rem; height: 1.1rem; }
.ni-lab__oszlopok { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.ni-lab h2 { margin: 0 0 .8rem; font: 700 1.0625rem/1.2 var(--betu-cim); color: #fff; }
.ni-lab ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ni-lab__hirlevel p { margin: 0 0 .8rem; }
.ni-lab__hirlevel form { display: flex; flex-wrap: wrap; gap: .5rem; }
.ni-lab__hirlevel input {
    flex: 1 1 12rem;
    min-width: 0;
    min-height: 2.9rem;
    padding: 0 .85rem;
    border: 1px solid var(--terito-vonal);
    border-radius: var(--r-kicsi);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font: 400 1rem var(--betu-szoveg);
    outline: none;
}
.ni-lab__hirlevel input::placeholder { color: rgba(255, 255, 255, .6); }
.ni-lab__hirlevel input:focus { border-color: var(--kraft); }
.ni-lab__hirlevel .ni-gomb { min-height: 2.9rem; padding-inline: 1.1rem; }
.ni-lab__bizalom { display: grid; gap: 1.5rem; padding-block: 2rem; border-top: 1px solid var(--terito-vonal); }
.ni-lab__bizalom h3 { margin: 0 0 .4rem; font-size: .9375rem; font-weight: 600; color: #fff; }
.ni-lab__bizalom p,
.ni-lab__bizalom address { margin: 0; font-style: normal; font-size: .875rem; line-height: 1.6; color: rgba(255, 255, 255, .75); }
.ni-lab__kartyak { display: flex; gap: .6rem; margin-top: .5rem; color: rgba(255, 255, 255, .85); }
.ni-lab__kartyak svg { width: 2.2rem; height: 2.2rem; }
.ni-lab__also {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding-block: 1.25rem 2rem;
    border-top: 1px solid var(--terito-vonal);
    font-size: .8125rem;
    color: rgba(255, 255, 255, .62);
}

@media (min-width: 900px) {
    .ni-lab__felso { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 4rem; padding-block: 4.5rem 3rem; }
    .ni-lab__oszlopok { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); }
    .ni-lab__hirlevel { grid-column: auto; }
    .ni-lab__bizalom { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
}
@media (max-width: 899px) {
    .ni-lab__hirlevel { grid-column: 1 / -1; }
}

/* ── Sütisáv ─────────────────────────────────────────────────────────── */

.ni-suti { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: .75rem; }
.ni-suti:not(.hidden) { display: block; }
.ni-suti__doboz {
    max-width: 44rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem 1.25rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--r);
    background: var(--terito-sotet);
    color: rgba(255, 255, 255, .88);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6);
    font-size: .9375rem;
}
.ni-suti__doboz p { flex: 1 1 18rem; margin: 0; }
.ni-suti__doboz a { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.ni-suti__gombok { display: flex; gap: .5rem; flex-wrap: wrap; }
.ni-suti__gombok .ni-gomb { min-height: 2.75rem; padding: .55rem 1rem; }
.ni-suti .ni-gomb--keret { color: #fff; border-color: rgba(255, 255, 255, .35); }
.ni-suti .ni-gomb--keret:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }

/* ── Mozgás ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ni *,
    .ni *::before,
    .ni *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── A régi (Tailwind) oldalak áthangolása ───────────────────────────── */
/* A Tailwind v4 minden színt és betűt változóból vesz, így ezekkel a
   felülírásokkal a nem újraírt oldalak is az új világban jelennek meg. */

:root {
    --font-display: var(--betu-cim);
    --color-brand-50: #eef4f0;
    --color-brand-100: #dce8df;
    --color-brand-200: #b9d0bf;
    --color-brand-300: #8db39a;
    --color-brand-400: #4f8a66;
    --color-brand-500: #2a6848;
    --color-brand-600: #1c4631;
    --color-brand-700: #133224;
    --color-brand-900: #0c2a1c;
    --color-cream-50: #fff;
    --color-cream-100: var(--len);
    --color-warm-400: var(--kraft);
    --color-warm-500: var(--kraft-2);
}
.ni .font-display { font-weight: 700; letter-spacing: -.01em; }
/* a sablonos díszek nélkül */
.ni .yarn-divider,
.ni .hero-doodle,
.ni .decorative-blob,
.ni .scallop-bottom-cream { display: none !important; }
.ni .squiggle { background-image: none !important; }
.ni .bg-dots-pattern,
.ni .bg-grid-pattern { background-image: none !important; }
.ni .float-badge,
.ni .float-badge-delayed { animation: none !important; }
.ni .product-grid .card-tilt,
.ni .polaroid { transform: none !important; }
.ni .stitch-frame { border: 0; }
/* A régi oldalak színátmenetes fejléce helyett papír, a cím fölötti nagybetűs
   „szemöldökcímke” nélkül (a jogi oldalakon is, a jogi szöveg érintése nélkül). */
.ni section.bg-gradient-to-br.from-brand-50 { background: #fff; }
.ni p.text-sm.font-semibold.text-brand-600.uppercase.tracking-wider.mb-2 { display: none; }