/* ==========================================================================
   DREAM GARAGE MOTOROS OUTLET — site.css
   Önálló, teljes stíluslap. Kiváltja a korábbi három réteget
   (mobimax/style.css 641 KB + layout-fixes.css + modernize.css): saját reset,
   design tokenek, Font Awesome subset és minden komponens egy helyen.
   ========================================================================== */

/* ==========================================================================
   1. Font Awesome 5 subset — csak a ténylegesen használt ~22 glif.
   A fontfájlok a téma örökségéből maradtak: ../fonts/fa-*.woff2
   ========================================================================== */
@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url(../fonts/fa-solid-900.woff2) format("woff2"),
         url(../fonts/fa-solid-900.woff) format("woff");
}
@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../fonts/fa-regular-400.woff2) format("woff2"),
         url(../fonts/fa-regular-400.woff) format("woff");
}
@font-face {
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../fonts/fa-brands-400.woff2) format("woff2"),
         url(../fonts/fa-brands-400.woff) format("woff");
}
.fa, .fas, .far, .fab {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.fa, .fas { font-family: "Font Awesome 5 Free"; font-weight: 900; }
.far { font-family: "Font Awesome 5 Free"; font-weight: 400; }
.fab { font-family: "Font Awesome 5 Brands"; font-weight: 400; }
.fa::before, .fas::before, .far::before, .fab::before { display: inline-block; }

.fa-award::before { content: "\f559"; }
.fa-chevron-down::before { content: "\f078"; }
.fa-chevron-left::before { content: "\f053"; }
.fa-chevron-right::before { content: "\f054"; }
.fa-clock::before { content: "\f017"; }
.fa-coins::before { content: "\f51e"; }
.fa-envelope::before { content: "\f0e0"; }
.fa-envelope-open::before { content: "\f2b6"; }
.fa-facebook-f::before { content: "\f39e"; }
.fa-facebook-messenger::before { content: "\f39f"; }
.fa-hand-paper::before { content: "\f256"; }
.fa-headset::before { content: "\f590"; }
.fa-heart::before { content: "\f004"; }
.fa-instagram::before { content: "\f16d"; }
.fa-map-marker-alt::before { content: "\f3c5"; }
.fa-phone::before { content: "\f095"; }
.fa-search::before { content: "\f002"; }
.fa-shield-alt::before { content: "\f3ed"; }
.fa-store::before { content: "\f54e"; }
.fa-tags::before { content: "\f02c"; }
.fa-times::before { content: "\f00d"; }
.fa-tshirt::before { content: "\f553"; }
.fa-whatsapp::before { content: "\f232"; }
/* Az átalakított kapcsolat / "Hogyan működik" oldalakhoz pótolt ikonok.
   A glifek eddig is benne voltak a betűkészletben, csak az osztály hiányzott. */
.fa-check::before { content: "\f00c"; }
.fa-info-circle::before { content: "\f05a"; }
.fa-undo::before { content: "\f0e2"; }
.fa-calendar-check::before { content: "\f274"; }
.fa-ruler-combined::before { content: "\f546"; }

/* ==========================================================================
   2. Design tokenek
   ========================================================================== */
:root {
    /* --- Márkaszínek — a Motoros Outlet logóból mintavételezve ------------
       A logó három színt használ: #FCC505 borostyán, #FFFFFF fehér,
       #000000 fekete lap.

       FONTOS: a borostyán fehér alapon csak 1,60:1 kontrasztot ad, ezért
       világos felületen SOHA nem szövegszín. Szerepek:
         --dg-amber       kitöltés (gomb, jelvény, sáv) + fekete felirat 12,4:1
                          és szöveg/ikon SÖTÉT felületen                12,4:1
         --dg-amber-deep  szöveg/ikon VILÁGOS felületen                  5,2:1
         --dg-on-amber    felirat a borostyán kitöltésen                12,4:1 */
    --dg-amber: #fcc505;
    --dg-amber-bright: #ffd83d;
    --dg-amber-deep: #8a6700;
    --dg-amber-tint: rgba(252, 197, 5, .16);
    --dg-on-amber: #0a0a0a;
    --dg-red: #ff1700;          /* Dream Garage piros (dream-garage.hu --dg-red) */
    --dg-red-dark: #d81400;     /* sötétebb piros: hover */

    /* Szemantikus piros — kizárólag "nincs készleten / nem elérhető" */
    --dg-negative: #c62828;
    --dg-negative-tint: rgba(198, 40, 40, .10);

    /* Semlegesek — a logó fekete lapjához igazítva. A fejléc három sötét
       szintre épül: topbar #000, fősor --dg-ink, navigáció --dg-ink-2. */
    --dg-ink: #0a0a0a;
    --dg-ink-2: #17171a;
    --dg-ink-3: #26262b;
    --dg-text: #2e2e2e;
    --dg-text-2: #595959;
    --dg-text-3: #8a8a8a;
    --dg-border: #e6e6e6;
    --dg-surface: #ffffff;
    --dg-surface-2: #f6f6f6;

    /* Linkszín: sötét semleges — a borostyán világos alapon olvashatatlan */
    --dg-link: #1f1f1f;

    /* Forma */
    --dg-radius-sm: 8px;
    --dg-radius: 16px;
    --dg-round: 999px;
    --dg-shadow-sm: 0 2px 8px rgba(0, 0, 0, .06);
    --dg-shadow: 0 6px 20px rgba(0, 0, 0, .08);
    --dg-shadow-lg: 0 12px 32px rgba(0, 0, 0, .16);
    --dg-fast: .16s ease;

    /* Elrendezés */
    --dg-container: 1200px;

    /* Fluid típusskála */
    --dg-fs-h1: clamp(30px, 4vw, 44px);
    --dg-fs-h2: clamp(24px, 3vw, 34px);
    --dg-fs-h3: clamp(19px, 2vw, 24px);
}

/* ==========================================================================
   3. Reset + alap
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    background: var(--dg-surface);
    color: var(--dg-text);
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
html, body {
    max-width: 100%;
    /* A vízszintes túlnyúlás elzárása. FONTOS a sorrend: az `overflow-x: hidden`
       görgetőkontextust hoz létre, ami elrontja a leszármazottak
       `position: sticky`-jét (ezért nem tapadt a mobil fejléc). Az `overflow-x:
       clip` ugyanúgy levág, de nem csinál görgetőkontextust. A `hidden` marad
       elöl fallbacknek: amelyik böngésző nem ismeri a `clip`-et, azt a sort
       eldobja és a régi viselkedést kapja. */
    overflow-x: hidden;
    overflow-x: clip;
}
img, svg, video, iframe {
    max-width: 100%;
}
img {
    height: auto;
    border: 0;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    color: var(--dg-ink);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
}
h1 { font-size: var(--dg-fs-h1); }
h2 { font-size: var(--dg-fs-h2); }
h3 { font-size: var(--dg-fs-h3); }
p {
    margin: 0 0 1em;
}
a {
    color: var(--dg-link);
    text-decoration: none;
    transition: color var(--dg-fast);
}
a:hover {
    color: var(--dg-amber-deep);
}
ul, ol {
    margin: 0 0 1em;
    padding-left: 22px;
}
button, input, select, textarea {
    font: inherit;
    color: inherit;
}
button {
    cursor: pointer;
}
input[type="text"], input[type="email"], input[type="search"],
input[type="tel"], input[type="number"], select, textarea {
    color: var(--dg-text);
    background: var(--dg-surface);
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius-sm);
    padding: 10px 14px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
    outline: 3px solid var(--dg-amber);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(10, 10, 10, .28);
}
table {
    border-collapse: collapse;
    max-width: 100%;
}
[hidden] {
    display: none !important;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.container,
.home-inner,
.site-footer__inner {
    width: 100%;
    max-width: var(--dg-container);
    margin-inline: auto;
    padding-inline: 16px;
}

/* Fő CTA gomb — mindenhol ugyanaz */
.btn-cta {
    display: inline-block;
    padding: 14px 32px;
    background: var(--dg-amber);
    color: var(--dg-on-amber);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-decoration: none;
    border: 0;
    border-radius: var(--dg-radius-sm);
    transition: background-color var(--dg-fast), transform var(--dg-fast);
}
.btn-cta:hover {
    background: var(--dg-amber-bright);
    color: var(--dg-on-amber);
    transform: translateY(-1px);
}
.btn-ghost {
    display: inline-block;
    padding: 13px 26px;
    background: transparent;
    color: #fff;
    font-weight: 700;
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: var(--dg-radius-sm);
    transition: border-color var(--dg-fast), background-color var(--dg-fast);
}
.btn-ghost:hover {
    color: #fff;
    border-color: #fff;
    background: rgba(255, 255, 255, .1);
}

/* ==========================================================================
   4. Fejléc
   ========================================================================== */
/* --- Topbar --- */
/* A fejléc három sötét szintre épül, hogy a logó fekete lapja beleolvadjon:
   topbar #000  ->  fősor --dg-ink  ->  navigáció --dg-ink-2. */
.site-topbar {
    background: #000;
    color: #b8b8b8;
    font-size: 12.5px;
}
.site-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 20px;
    min-height: 34px;
    padding-block: 4px;
}
.site-topbar__group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
}
.site-topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: inherit;
}
.site-topbar__item .fas, .site-topbar__item .far {
    color: var(--dg-amber);
    font-size: 12px;
}
a.site-topbar__item:hover {
    color: #fff;
}

/* --- Fősor --- */
.site-header {
    background: var(--dg-ink);
    color: #fff;
    position: relative;
    z-index: 900;
}
.site-header__main {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 76px;
    padding-block: 10px;
}
.site-header__logo {
    flex: 0 0 auto;
    display: inline-flex;
}
.site-header__logo img {
    max-height: 46px;
    width: auto;
    display: block;
}
.site-header__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.site-header__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    color: #fff;
    font-size: 17px;
    transition: background-color var(--dg-fast), color var(--dg-fast);
}
.site-header__action:hover {
    background: var(--dg-amber-tint);
    color: var(--dg-amber);
}

/* --- Kereső pill + élő találati lista --- */
.site-search {
    position: relative;
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    max-width: 520px;
}
.site-search input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 54px 0 20px;
    border: 1.5px solid rgba(255, 255, 255, .14);
    border-radius: var(--dg-round);
    font-size: 14px;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    transition: border-color var(--dg-fast), background-color var(--dg-fast);
}
.site-search input[type="text"]::placeholder {
    color: #9a9a9a;
}
.site-search input[type="text"]:focus {
    outline: 0;
    border-color: var(--dg-amber);
    background: rgba(255, 255, 255, .14);
}
.site-search button[type="submit"] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--dg-amber);
    color: var(--dg-on-amber);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background-color var(--dg-fast);
}
.site-search button[type="submit"]:hover {
    background: var(--dg-amber-bright);
    color: var(--dg-on-amber);
}

.site-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 950;
    background: var(--dg-surface);
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    box-shadow: var(--dg-shadow-lg);
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px;
}
.site-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: var(--dg-radius-sm);
    color: var(--dg-ink);
}
.site-search-item:hover,
.site-search-item.active {
    background: var(--dg-surface-2);
    color: var(--dg-ink);
}
.site-search-item img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    background: var(--dg-surface-2);
    border-radius: var(--dg-radius-sm);
    flex: 0 0 auto;
}
.site-search-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.site-search-item-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.site-search-item-price {
    font-size: 12px;
    font-weight: 700;
    color: var(--dg-amber-deep);
}
.site-search-more {
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--dg-ink);
    border-top: 1px solid var(--dg-surface-2);
    margin-top: 4px;
}
.site-search-more:hover {
    color: var(--dg-amber-deep);
}
.site-search-empty {
    padding: 14px;
    text-align: center;
    color: var(--dg-text-3);
    font-size: 13px;
}

/* --- Navigációs sor --- */
.site-header__nav {
    background: var(--dg-ink-2);
    border-top: 1px solid rgba(255, 255, 255, .07);
}
.site-header__nav-inner {
    display: flex;
    align-items: stretch;
    gap: 4px;
    position: relative;
}
body.nav-bar-fixed .site-header__nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}

.site-nav {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-nav a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 18px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    transition: background-color var(--dg-fast);
}
.site-nav a:hover {
    color: var(--dg-amber);
    background: rgba(255, 255, 255, .07);
}

/* --- Két kiemelt belépő a fejlécben ---------------------------------------
   A kínálat kettéválása óta két útra kell külön hívni a figyelmet:

     .site-header__dg    → a másik webshop (dream-garage.hu). A FŐSORBAN, a
                           kereső és a kedvencek közt: ott van szabad hely, és
                           nem keveredik az oldal saját menüpontjaival.
     .site-header__used  → a saját használt készlet (/hasznalt-ruhazat/). A
                           NAVIGÁCIÓS SOR jobb szélén, a bal oldali kategória-
                           gomb tömör párjaként, azonos magasságban; a sor
                           görgetéskor felül rögzül, így végig látszik.

   A használt készlet borostyán kitöltés fekete felirattal, a Dream Garage
   gomb a „Új webshop” dobozzal egyező piros (#ff1700) fehér felirattal. Nem
   ütköznek: külön sorban vannak, és eltérő a formájuk — a Dream Garage lekerekített
   pirula (kifelé mutató link), a használt készlet szögletes tömb (saját oldal). */
.site-header__dg {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 18px;
    border-radius: var(--dg-round);
    background: var(--dg-red);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
    transition: background-color var(--dg-fast), transform var(--dg-fast);
}
.site-header__dg:hover {
    background: var(--dg-red-dark);
    color: #fff;
    transform: translateY(-1px);
}
.site-header__dg .fas {
    font-size: 15px;
}
.site-header__dg-arrow {
    display: inline-flex;
}

.site-header__used {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    min-height: 52px;
    padding: 0 22px;
    background: var(--dg-amber);
    color: var(--dg-on-amber);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
    transition: background-color var(--dg-fast);
}
.site-header__used:hover {
    background: var(--dg-amber-bright);
    color: var(--dg-on-amber);
}
.site-header__used .fas {
    font-size: 16px;
}

/* 992–1199 px: a menüsor öt eleme + a használt-gomb együtt kifutna a
   konténerből, ezért itt mindenhol szűkebb a belső margó, és a gomb ikonja
   kiesik. 1200 px felett minden az alapméretén marad. */
@media (min-width: 992px) and (max-width: 1199px) {
    .catmenu__button {
        padding: 0 16px;
    }
    .site-nav a {
        padding: 0 11px;
        font-size: 13px;
    }
    .site-header__used {
        padding: 0 16px;
        font-size: 13px;
    }
    .site-header__used .fas {
        display: none;
    }
}

/* Mobil fősor: a Dream Garage gomb kör alakú ikonra fogy — a logó és a kereső
   mellé feliratos gomb nem fér. A használt készlet a mobil menübe kerül, mert
   a navigációs sor ezen a szélességen amúgy is rejtve van. */
@media (max-width: 991px) {
    .site-header__dg {
        width: 44px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
    .site-header__dg-text,
    .site-header__dg-arrow {
        display: none;
    }
}

/* Mobil menü: a két belépő a menüpontok fölött. A használt készlet az elsődleges
   (borostyán kitöltés), a Dream Garage másodlagos keretes gomb — utóbbi a fejléc
   ikonjából is elérhető, két azonos súlyú sárga tömb pedig egymást oltaná ki. */
.mobile-nav-used,
.mobile-nav-dg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0 20px;
    padding: 13px 16px;
    border-radius: var(--dg-round);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.mobile-nav-used {
    margin-top: 16px;
    background: var(--dg-amber);
    color: var(--dg-on-amber);
}
.mobile-nav-used:active {
    background: var(--dg-amber-bright);
}
.mobile-nav-dg {
    margin-top: 10px;
    margin-bottom: 4px;
    background: var(--dg-red);
    color: #fff;
}
.mobile-nav-dg:active {
    background: var(--dg-red-dark);
}

/* --- Kategória gomb + mega-menü --- */
.catmenu {
    flex: 0 0 auto;
}
.catmenu__button {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    min-height: 52px;
    padding: 0 22px;
    border: 0;
    background: var(--dg-amber);
    color: var(--dg-on-amber);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: pointer;
    transition: background-color var(--dg-fast);
}
.catmenu__button:hover {
    background: var(--dg-amber-bright);
}
.catmenu__button .fa-chevron-down {
    font-size: 11px;
    transition: transform var(--dg-fast);
}
.catmenu__grid-icon {
    display: inline-flex;
    width: 17px;
    height: 17px;
}
.catmenu__grid-icon svg {
    width: 100%;
    height: 100%;
}
.catmenu:hover .catmenu__button .fa-chevron-down,
.catmenu:focus-within .catmenu__button .fa-chevron-down {
    transform: rotate(180deg);
}
.catmenu__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 940;
    width: min(var(--dg-container), calc(100vw - 32px));
    background: var(--dg-surface);
    border-radius: 0 0 var(--dg-radius) var(--dg-radius);
    box-shadow: var(--dg-shadow-lg);
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: opacity .12s ease, visibility .12s ease;
}
.catmenu:hover .catmenu__dropdown,
.catmenu:focus-within .catmenu__dropdown {
    visibility: visible;
    opacity: 1;
}

.category-menu {
    padding: 20px;
}
/* 4 oszlop: 7 kategóriánál kiegyensúlyozott 4+3-as elrendezést ad, a
   korábbi 6 oszlop árva második sora helyett. */
.category-menu__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 1279px) {
    .category-menu__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.category-card {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 16px 12px;
    border: 1px solid var(--dg-border);
    border-radius: 12px;
    background: var(--dg-surface);
    transition: border-color var(--dg-fast), box-shadow var(--dg-fast);
}
.category-card:has(.category-card__title-link:hover),
.category-card:has(.category-card__sub-link:hover) {
    border-color: var(--dg-amber);
    box-shadow: var(--dg-shadow);
}
.category-card:has(.category-card__title-link:hover) .category-card__arrow {
    color: var(--dg-amber-deep);
    transform: translateX(3px);
}

/* Fejléc-sor: ikonkorong + cím/darabszám + nyíl egy sorban */
.category-card__title-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--dg-surface-2);
}
/* A teljes kártya kattintható a fejléc-link kiterjesztésével; az
   alkategória-linkek z-index-szel fölé kerülnek. */
.category-card__title-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
.category-card__title-link:focus-visible::after {
    outline: 3px solid var(--dg-amber);
    outline-offset: 3px;
}
.category-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 8px;
    border-radius: 10px;
    background: var(--dg-amber-tint);
    color: var(--dg-amber-deep);
}
/* A fill/stroke szándékosan nincs kényszerítve: az ikonkészlet vegyesen
   tartalmaz kitöltött és körvonalas SVG-ket, mind currentColor-t használ. */
.category-card__icon svg {
    width: 100%;
    height: 100%;
}
.category-card__title-wrap {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.category-card__title {
    margin: 0;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 700;
}
.category-card__count {
    font-size: 11.5px;
    color: var(--dg-text-3);
}
.category-card__arrow {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: var(--dg-text-3);
    transition: transform var(--dg-fast), color var(--dg-fast);
}
.category-card__arrow svg {
    width: 100%;
    height: 100%;
}

.category-card__subcategories {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.category-card__sub-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 0;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--dg-text-2);
    border-radius: 6px;
}
.category-card__sub-link:hover {
    color: var(--dg-amber-deep);
}
.category-card__sub-count {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--dg-text-3);
}
.category-card__sub-link:hover .category-card__sub-count {
    color: inherit;
}

/* --- Hamburger --- */
.mobile-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 10;
}
.mobile-nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mobil fiók --- */
/* A láthatóságot a natív `hidden` attribútum vezérli (közvetlenül JS-ből),
   nem class + transition — az állapotváltás szándékosan azonnali. */
.mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, .5);
}
.mobile-nav-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100001;
    width: min(85vw, 340px);
    background: var(--dg-surface);
    box-shadow: var(--dg-shadow-lg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.mobile-nav-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: var(--dg-ink);
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    position: sticky;
    top: 0;
}
.mobile-nav-close {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
}
.mobile-nav-links ul {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}
.mobile-nav-links li a {
    display: block;
    padding: 14px 20px;
    color: var(--dg-ink);
    font-weight: 700;
    border-bottom: 1px solid var(--dg-surface-2);
}
.mobile-nav-links li a:active {
    background: var(--dg-surface-2);
}
.mobile-nav-categories {
    padding: 8px 20px 28px;
    border-top: 8px solid var(--dg-surface-2);
}
.mobile-nav-categories h3 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dg-text-3);
    margin: 16px 0 8px;
}
.mobile-nav-categories > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mobile-nav-categories > ul > li > a {
    display: block;
    padding: 10px 0;
    font-weight: 700;
    color: var(--dg-ink);
    border-bottom: 1px solid var(--dg-surface-2);
}
.mobile-nav-categories ul ul {
    list-style: none;
    margin: 0 0 8px;
    padding: 0 0 0 12px;
}
.mobile-nav-categories ul ul li a {
    display: block;
    padding: 8px 0;
    color: var(--dg-text-2);
    font-size: 14px;
}
body.mobile-nav-open {
    overflow: hidden;
}

/* --- Fejléc responsive --- */
@media (max-width: 991px) {
    .site-header__nav {
        display: none;
    }
    .mobile-nav-toggle {
        display: flex;
    }
    .site-header__main {
        flex-wrap: wrap;
        gap: 12px;
        min-height: 64px;
    }
    .site-header__logo img {
        max-height: 38px;
    }
    .site-search {
        order: 3;
        flex: 1 1 100%;
        max-width: none;
        margin-bottom: 4px;
    }

    /* --- Tapadó fejléc mobilon ------------------------------------------
       Asztalin a navigációs sor rögzül (lásd body.nav-bar-fixed), de az a sor
       mobilon rejtve van, ezért korábban semmi nem tapadt: görgetéskor a
       menügomb és a kereső is elgörgött.

       position:sticky elég — a .site-header közvetlen szülője (#wrap) az egész
       oldalt átfogja, így nem kell fixed + placeholder, és nem ugrik a tartalom
       a rögzítés pillanatában. */
    .site-header {
        position: sticky;
        top: 0;
    }
    body.header-compact .site-header {
        box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
    }

    /* A keresősor mobilon külön sorba tördel (order: 3, 100% szélesség), amivel
       a tapadó fejléc ~120 px lenne. Görgetés után összecsukjuk, így a sáv
       ~64 px marad; a nagyító ikonnal visszanyitható. */
    .site-search {
        max-height: 56px;
        transition: max-height .22s ease, opacity .18s ease, margin-bottom .22s ease;
    }
    body.header-compact:not(.search-open) .site-search {
        max-height: 0;
        margin-bottom: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
    }
    body.header-compact .site-header__action--search {
        display: inline-flex;
    }
    body.search-open .site-header__action--search {
        background: var(--dg-amber-tint);
        color: var(--dg-amber);
    }

    /* Görgetéskor a tapadó fejléc alá csúszó horgonyok ne bújjanak el. */
    [id] {
        scroll-margin-top: 84px;
    }
}
@media (max-width: 767px) {
    .site-topbar {
        display: none;
    }
}
@media (max-width: 480px) {
    .site-header__logo img {
        max-height: 32px;
    }
    .mobile-nav-panel {
        width: 100vw;
    }
}

/* ==========================================================================
   5. Oldalfejléc (cím + morzsamenü) — bolt, statikus oldalak, 404
   ========================================================================== */
.page-header {
    background: var(--dg-surface-2);
    padding: 26px 0 22px;
    margin-bottom: 8px;
}
.page-header h1 {
    margin: 0;
}
/* Rövid bevezető a lista fejlécében (ma: a használt készlet oldala). */
.page-header__lead {
    margin: 10px 0 0;
    max-width: 68ch;
    color: var(--dg-text-2);
}
.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--dg-text-3);
}
.breadcrumbs a {
    color: var(--dg-text-2);
}
.breadcrumbs a:hover {
    color: var(--dg-amber-deep);
}
.breadcrumbs span:not(:first-child)::before,
.breadcrumbs a:not(:first-child)::before {
    content: "\203A";
    margin-right: 6px;
    color: #bbb;
}
.page-content {
    display: block;
    padding-block: 24px 8px;
}

/* ==========================================================================
   6. Termékkártya + rács
   ========================================================================== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 24px;
    margin: 20px 0;
}

.product-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--dg-surface);
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.product-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .1);
}
.product-card__media {
    position: relative;
}
.product-card__image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    /* A termékfotók zöme fehér hátterű stúdiókép: fehér kerettel nem látszik
       a négyzetes doboz és a kép széle közti sáv. */
    background: var(--dg-surface);
    padding: 10px;
}
/* `contain`, nem `cover`: a magas (csizma, nadrág) és széles (bukósisak)
   fotókból a `cover` levágta a szélét — a kártyán a teljes termék látszódjon. */
.product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 250ms ease;
}
.product-card:hover .product-card__image img {
    transform: scale(1.04);
}
.product-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 9px;
    border-radius: var(--dg-round);
    background: var(--dg-ink);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
.product-card__favorite {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--dg-radius-sm);
    background: rgba(255, 255, 255, .92);
    color: var(--dg-text-2);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--dg-shadow-sm);
}
.product-card__favorite:hover {
    color: var(--dg-amber-deep);
}
.product-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}
.product-card__brand {
    color: var(--dg-text-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.product-card__title {
    display: -webkit-box;
    min-height: 44px;
    overflow: hidden;
    color: var(--dg-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.product-card__title:hover {
    color: var(--dg-ink);
    text-decoration: underline;
}
.product-card__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 10px;
}
.product-card__price {
    color: var(--dg-amber-deep);
    font-size: 19px;
    font-weight: 750;
    white-space: nowrap;
}
.product-card__availability {
    margin-top: 3px;
    color: #24823d;
    font-size: 12px;
    font-weight: 500;
}
.product-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--dg-radius-sm);
    background: var(--dg-ink);
    color: #fff;
    font-weight: 650;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 150ms ease;
}
.product-card__cta:hover {
    background: var(--dg-amber);
    color: var(--dg-on-amber);
}
@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .product-card__body {
        padding: 12px;
    }
    .product-card__price {
        font-size: 16px;
    }
    .product-card__cta {
        width: 100%;
    }
}

/* ==========================================================================
   7. Bolt: alkategória-chipek, toolbar, lapozó
   ========================================================================== */
.subcat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.subcat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-round);
    background: var(--dg-surface);
    color: var(--dg-ink);
    font-size: 13.5px;
    font-weight: 600;
    transition: border-color var(--dg-fast), background-color var(--dg-fast), color var(--dg-fast);
}
.subcat-chip:hover {
    border-color: var(--dg-amber);
    color: var(--dg-amber-deep);
}
.subcat-chip__count {
    color: var(--dg-text-3);
    font-weight: 400;
    font-size: 12px;
}
.subcat-chip:hover .subcat-chip__count {
    color: inherit;
}

.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 16px 0 4px;
}
.shop-toolbar__count {
    color: var(--dg-text-2);
    font-size: 14px;
}
.shop-toolbar__count strong {
    color: var(--dg-ink);
}
.shop-toolbar__controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.shop-toolbar__controls label {
    font-size: 13px;
    color: var(--dg-text-2);
}
.shop-toolbar__controls select {
    padding: 9px 34px 9px 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--dg-radius-sm);
    background-color: var(--dg-surface);
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23595959' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}
.shop-empty {
    padding: 48px 0 64px;
    text-align: center;
    color: var(--dg-text-2);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 28px 0 40px;
}
.pagination > a,
.pagination > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius-sm);
    background: var(--dg-surface);
    color: var(--dg-ink);
    font-size: 14px;
    font-weight: 600;
    transition: border-color var(--dg-fast), background-color var(--dg-fast), color var(--dg-fast);
}
.pagination a:hover {
    border-color: var(--dg-amber);
    color: var(--dg-amber-deep);
}
.pagination .current {
    background: var(--dg-ink);
    border-color: var(--dg-ink);
    color: #fff;
    pointer-events: none;
}
.pagination .gap {
    border: 0;
    background: transparent;
    color: var(--dg-text-3);
    min-width: 24px;
    pointer-events: none;
}

/* ==========================================================================
   8. Termékoldal
   ========================================================================== */
.product-page {
    max-width: 1400px;
    margin-inline: auto;
    padding: 24px;
}

.product-breadcrumbs {
    margin-bottom: 18px;
}
.product-breadcrumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}
.product-breadcrumbs li:not(:last-child)::after {
    content: "\203A";
    margin-left: 6px;
    color: #bbb;
}
.product-breadcrumbs a {
    color: var(--dg-text-2);
}
.product-breadcrumbs a:hover {
    color: var(--dg-amber-deep);
}
.product-breadcrumbs li[aria-current="page"] {
    color: var(--dg-ink);
    font-weight: 600;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
    gap: 28px;
    align-items: start;
}

/* --- Galéria --- */
.product-gallery {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.product-gallery:not(:has(.product-thumbnails)) {
    grid-template-columns: minmax(0, 1fr);
}
.product-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 640px;
    overflow-y: auto;
}
.product-thumbnail {
    width: 92px;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius-sm);
    background: var(--dg-surface);
    overflow: hidden;
    cursor: pointer;
    padding: 4px;
    min-height: 44px;
    flex: 0 0 auto;
}
.product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.product-thumbnail[aria-current="true"] {
    border: 2px solid var(--dg-ink);
}
.product-main-image {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 620px;
    padding: 32px;
    border-radius: var(--dg-radius);
    border: 1px solid var(--dg-border);
    background: var(--dg-surface);
    cursor: zoom-in;
}
.product-main-image img {
    width: 100%;
    height: 100%;
    max-height: 640px;
    object-fit: contain;
}
.product-zoom-button {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius-sm);
    background: rgba(255, 255, 255, .95);
    color: var(--dg-text);
    cursor: pointer;
    box-shadow: var(--dg-shadow-sm);
}
.product-zoom-button:hover {
    color: var(--dg-amber-deep);
}

/* --- Info panel --- */
.product-panel {
    padding: 32px;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    background: var(--dg-surface);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}
.product-brand {
    display: inline-block;
    color: var(--dg-amber-deep);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.product-title {
    margin: 8px 0 12px;
    font-size: clamp(24px, 2.4vw, 36px);
    line-height: 1.15;
}
.product-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.product-price__current {
    color: var(--dg-amber-deep);
    font-size: 30px;
    font-weight: 800;
    white-space: nowrap;
}
.product-price__original {
    color: var(--dg-text-3);
    font-size: 18px;
}
.product-price__discount {
    padding: 3px 8px;
    border-radius: var(--dg-round);
    background: var(--dg-amber);
    color: var(--dg-on-amber);
    font-size: 13px;
    font-weight: 700;
}
.product-variant-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--dg-text-2);
    font-size: 14px;
}
.product-variant-line > span:not(.stock-status):not(:last-child)::after {
    content: "\00B7";
    margin-left: 8px;
    color: #bbb;
}
.stock-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.stock-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.stock-status--available { color: #16a34a; }
.stock-status--limited { color: #d97706; }
.stock-status--unavailable { color: #dc2626; }
.stock-status--preorder { color: #2563eb; }

.product-meta {
    margin: 20px 0;
    padding-block: 16px;
    border-top: 1px solid var(--dg-border);
    border-bottom: 1px solid var(--dg-border);
}
.product-meta > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 16px;
    padding: 5px 0;
    font-size: 14px;
}
.product-meta dt { color: var(--dg-text-2); }
.product-meta dd { margin: 0; font-weight: 500; }
.product-meta dd a { color: var(--dg-ink); }
.product-meta dd a:hover { color: var(--dg-amber-deep); }

.product-actions {
    display: flex;
    gap: 12px;
    align-items: stretch;
}
.product-cta {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    border: 0;
    border-radius: var(--dg-radius-sm);
    background: var(--dg-ink);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 150ms ease;
}
.product-cta:hover {
    background: var(--dg-amber);
    color: var(--dg-on-amber);
}
.product-cta--disabled {
    background: var(--dg-text-3);
    cursor: not-allowed;
}
.product-favorite {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius-sm);
    background: var(--dg-surface);
    color: var(--dg-text-2);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}
.product-favorite:hover {
    color: var(--dg-amber-deep);
    border-color: var(--dg-amber);
}
.product-phone-hint {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--dg-text-2);
}
.product-phone-hint a {
    color: var(--dg-ink);
    font-weight: 700;
}

.product-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    list-style: none;
    margin: 22px 0;
    padding: 16px 0;
    border-top: 1px solid var(--dg-border);
    border-bottom: 1px solid var(--dg-border);
}
.product-benefits li {
    display: grid;
    gap: 2px;
    font-size: 12px;
    color: var(--dg-text-3);
}
.product-benefits strong {
    font-size: 13px;
    color: var(--dg-ink);
}

/* --- Fülek --- */
.product-tabs [role="tablist"] {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--dg-border);
    margin-bottom: 16px;
}
.product-tabs [role="tab"] {
    padding: 10px 16px;
    min-height: 44px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--dg-text-2);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: -2px;
}
.product-tabs [role="tab"][aria-selected="true"] {
    color: var(--dg-ink);
    border-bottom-color: var(--dg-amber);
}
.product-tabs [role="tabpanel"] {
    font-size: 14px;
    line-height: 1.6;
    color: var(--dg-text);
}
.product-description.clamped {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-description-toggle {
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--dg-amber-deep);
    font-weight: 700;
    cursor: pointer;
}
.product-specifications {
    margin: 0;
}
.product-specifications > div {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--dg-surface-2);
}
.product-specifications dt { color: var(--dg-text-2); }
.product-specifications dd { margin: 0; font-weight: 500; }
.muted { color: var(--dg-text-3); }

/* --- Kapcsolódó termékek --- */
.related-products {
    margin-top: 48px;
}
.related-products h2 {
    font-size: var(--dg-fs-h3);
    margin-bottom: 4px;
}

/* --- Lightbox --- */
.product-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 10, .92);
    padding: 40px;
}
.product-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
}
.product-lightbox__close,
.product-lightbox__nav {
    position: absolute;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.product-lightbox__close:hover,
.product-lightbox__nav:hover {
    background: rgba(255, 255, 255, .25);
}
.product-lightbox__close { top: 18px; right: 18px; }
.product-lightbox__nav--prev { left: 18px; top: 50%; transform: translateY(-50%); }
.product-lightbox__nav--next { right: 18px; top: 50%; transform: translateY(-50%); }
body.lightbox-open { overflow: hidden; }

/* --- Mobil vásárlósáv --- */
.mobile-purchase-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--dg-border);
    backdrop-filter: blur(12px);
}
.mobile-purchase-bar strong {
    color: var(--dg-amber-deep);
    font-size: 18px;
    white-space: nowrap;
}
.mobile-purchase-bar a {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    max-width: 220px;
    border-radius: var(--dg-radius-sm);
    background: var(--dg-ink);
    color: #fff;
    font-weight: 700;
}

/* --- Termékoldal responsive --- */
@media (max-width: 1199px) {
    .product-detail-layout {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
        gap: 20px;
    }
    .product-main-image { min-height: 480px; }
}
@media (max-width: 899px) {
    .product-detail-layout {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 767px) {
    .product-page { padding: 16px; }
    .product-detail-layout { gap: 16px; }
    .product-gallery {
        grid-template-columns: 1fr;
    }
    /* Mobil: a bélyegképsor tördel, nem görget vízszintesen */
    .product-thumbnails {
        order: 2;
        flex-direction: row;
        flex-wrap: wrap;
        max-height: none;
        padding-bottom: 4px;
    }
    .product-thumbnail {
        width: 64px;
    }
    .product-main-image {
        min-height: auto;
        aspect-ratio: 4 / 5;
        padding: 20px;
    }
    .product-panel {
        padding: 20px 16px;
        border-radius: var(--dg-radius-sm);
        box-shadow: none;
    }
    .product-benefits {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .mobile-purchase-bar:not([hidden]) {
        display: flex;
    }
    .product-lightbox { padding: 12px; }
}
@media (min-width: 768px) {
    .mobile-purchase-bar { display: none; }
}

/* ==========================================================================
   9. Főoldal
   ========================================================================== */
/* --- Hero --- */
.home-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 520px;
    background: var(--dg-ink) url(/wp-content/uploads/ADAM-RST-4-scaled.jpg) center / cover no-repeat;
    padding: 72px 0;
}
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .25) 100%);
}
.home-hero .home-inner {
    position: relative;
}
.home-hero__badge {
    display: inline-block;
    margin-bottom: 18px;
    padding: 7px 16px;
    background: var(--dg-amber);
    color: var(--dg-on-amber);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: var(--dg-radius-sm);
}
.home-hero__title {
    margin: 0 0 14px;
    max-width: 22ch;
    color: #fff;
    font-size: clamp(32px, 4.6vw, 54px);
    font-weight: 900;
    line-height: 1.08;
}
.home-hero__brands {
    margin: 0 0 30px;
    max-width: 60ch;
    color: rgba(255, 255, 255, .85);
    font-size: clamp(15px, 1.6vw, 18px);
    font-weight: 600;
    letter-spacing: .04em;
}
.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* --- Értesítő sáv --- */
.home-notice {
    background: var(--dg-surface-2);
    padding: 48px 0;
}
.home-notice .home-inner {
    max-width: 800px;
}
.home-notice__title {
    margin: 0 0 16px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: var(--dg-fs-h2);
}
.home-notice p {
    margin: 0 0 12px;
}
.home-notice__thanks {
    font-weight: 700;
}

/* --- Kettéválás-bejelentő: sáv a hero alatt + popup ------------------------
   Az outlet (használt/kifutó) és a Dream Garage webshop (új, szezonális)
   szétválasztását hirdeti. Sötét felület, ezért itt a borostyán szövegszínként
   is használható (--dg-amber, 12,4:1) — világos alapon soha nem lenne szabad.
   A popup a <body> végére kerül, mert a főoldalon transformált ősök vannak,
   azok pedig elrontanák a position: fixed-et (ugyanaz az ok, mint a
   homepage_popup modálnál).                                                  */
.dg-split {
    position: relative;
    /* Háttér: a régi kezdőlapi banner motoros fotója, erősen sötétítve,
       hogy a fehér/borostyán szöveg és a kártyák olvashatók maradjanak. */
    background:
        linear-gradient(180deg, rgba(10, 10, 10, .78) 0%, rgba(10, 10, 10, .86) 100%),
        url("../images/split-hero-moto.jpg") center 40% / cover no-repeat,
        var(--dg-ink);
    padding: 44px 0;
}
.dg-split::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--dg-amber), #7a5f00 55%, #3a3a3a);
}
.dg-split__head {
    max-width: 760px;
    margin: 0 auto 30px;
    text-align: center;
}
.dg-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    background: var(--dg-amber-tint);
    border: 1px solid rgba(252, 197, 5, .35);
    border-radius: 100px;
    color: var(--dg-amber);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.dg-badge i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dg-amber);
}
.dg-split__title {
    margin: 14px 0 10px;
    color: #fff;
    font-size: clamp(20px, 3.2vw, 31px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.02em;
}
.dg-split__title em {
    font-style: normal;
    color: var(--dg-amber);
}
.dg-split__lead {
    margin: 0;
    color: #a9a9ad;
    font-size: clamp(12.5px, 1.4vw, 14.5px);
    line-height: 1.65;
}
.dg-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 26px;
    align-items: stretch;
    max-width: 1040px;
    margin: 0 auto;
}
.dg-divider {
    position: relative;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .10) 18%, rgba(255, 255, 255, .10) 82%, transparent);
}
.dg-divider span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 8px 6px;
    background: var(--dg-ink);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 100px;
    color: #6e6e72;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
}
.dg-lane {
    display: flex;
    flex-direction: column;
    padding: 28px;
    background: #151517;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.dg-lane:hover {
    transform: translateY(-3px);
}
.dg-lane--outlet {
    border-color: rgba(255, 255, 255, .14);
}
.dg-lane--outlet:hover {
    border-color: rgba(255, 255, 255, .28);
}
.dg-lane--dream {
    background: linear-gradient(165deg, #240603 0%, #151517 60%);
    border-color: rgba(255, 23, 0, .42);
}
.dg-lane--dream:hover {
    border-color: var(--dg-red);
    box-shadow: 0 18px 40px rgba(255, 23, 0, .18);
}
.dg-tag {
    align-self: flex-start;
    margin-bottom: 16px;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.dg-lane--outlet .dg-tag {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #c9c9ce;
}
.dg-lane--dream .dg-tag {
    background: var(--dg-red);
    color: #fff;
}
.dg-lane__name {
    margin: 0 0 4px;
    color: #fff;
    font-size: clamp(17px, 2.1vw, 22px);
    font-weight: 900;
    line-height: 1.2;
}
.dg-lane--dream .dg-lane__name {
    color: var(--dg-red);
}
.dg-lane__role {
    margin: 0 0 16px;
    color: #8a8a8f;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.dg-list {
    display: grid;
    gap: 9px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}
.dg-list li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    color: #c4c4c9;
    font-size: 13px;
    line-height: 1.5;
}
.dg-list li::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: 6px;
    border-radius: 2px;
    background: #5a5a5f;
    transform: rotate(45deg);
}
.dg-lane--dream .dg-list li::before {
    background: var(--dg-red);
}
.dg-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: auto;
    padding: 13px 18px;
    border-radius: var(--dg-radius-sm);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .03em;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.dg-lane--outlet .dg-cta {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .28);
    color: #fff;
}
.dg-lane--outlet .dg-cta:hover {
    background: rgba(255, 255, 255, .06);
    border-color: #fff;
    color: #fff;
}
.dg-lane--dream .dg-cta {
    background: var(--dg-red);
    border: 1.5px solid var(--dg-red);
    color: #fff;
}
.dg-lane--dream .dg-cta:hover {
    background: var(--dg-red-dark);
    border-color: var(--dg-red-dark);
    color: #fff;
}
.dg-note {
    margin: 11px 0 0;
    color: #6e6e72;
    font-size: 11px;
    text-align: center;
}
@media (max-width: 820px) {
    .dg-split {
        padding: 26px 0;
    }
    .dg-grid {
        grid-template-columns: 1fr;
    }
    .dg-divider {
        width: auto;
        height: 1px;
        margin: 2px 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10), transparent);
    }
    .dg-divider span {
        display: none;
    }
}

/* --- Kettéválás-popup --- */
.dg-pop-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(6, 6, 7, .78);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s;
}
.dg-pop-overlay.is-open {
    opacity: 1;
    visibility: visible;
}
.dg-pop {
    position: relative;
    width: min(600px, 100%);
    max-height: 90vh;
    overflow: hidden auto;
    background: #141416;
    border: 1px solid rgba(252, 197, 5, .28);
    border-radius: 16px;
    transform: translateY(14px) scale(.98);
    transition: transform .32s cubic-bezier(.2, .8, .3, 1);
}
.dg-pop-overlay.is-open .dg-pop {
    transform: none;
}
.dg-pop__strip {
    height: 4px;
    background: linear-gradient(90deg, var(--dg-amber), #7a5f00 60%, #3a3a3a);
}
.dg-pop__close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #cfcfd4;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.dg-pop__close:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}
.dg-pop__body {
    padding: 34px;
}
.dg-pop__title {
    margin: 14px 0 10px;
    color: #fff;
    font-size: clamp(19px, 3vw, 26px);
    font-weight: 900;
    line-height: 1.22;
    letter-spacing: -.02em;
}
.dg-pop__title em {
    font-style: normal;
    color: var(--dg-amber);
}
.dg-pop__text {
    margin: 0 0 20px;
    color: #a9a9ad;
    font-size: 13.5px;
    line-height: 1.65;
}
.dg-pop__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 22px;
}
.dg-pop__col {
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 11px;
}
.dg-pop__col--dream {
    background: rgba(252, 197, 5, .05);
    border-color: rgba(252, 197, 5, .30);
}
.dg-pop__col h4 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}
.dg-pop__col--dream h4 {
    color: var(--dg-amber);
}
.dg-pop__col p {
    margin: 0;
    color: #8e8e93;
    font-size: 11.5px;
    line-height: 1.55;
}
.dg-pop__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.dg-pop__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.dg-pop__btn--ghost {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .26);
    color: #fff;
}
.dg-pop__btn--ghost:hover {
    background: rgba(255, 255, 255, .06);
    border-color: #fff;
}
.dg-pop__btn--solid {
    background: var(--dg-amber);
    border: 1.5px solid var(--dg-amber);
    color: var(--dg-on-amber);
}
.dg-pop__btn--solid:hover {
    background: var(--dg-amber-bright);
    color: var(--dg-on-amber);
}
.dg-pop__foot {
    margin: 16px 0 0;
    color: #65656a;
    font-size: 11px;
    text-align: center;
}
@media (max-width: 560px) {
    .dg-pop__body {
        padding: 24px;
    }
    .dg-pop__cols,
    .dg-pop__actions {
        grid-template-columns: 1fr;
    }
}

/* --- Kategória-csempék --- */
.home-cats {
    padding: 64px 0 8px;
}
.cat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.cat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 12px 20px;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    background: var(--dg-surface);
    text-align: center;
    color: var(--dg-ink);
    transition: border-color var(--dg-fast), box-shadow var(--dg-fast), transform var(--dg-fast);
}
.cat-tile:hover {
    color: var(--dg-ink);
    border-color: var(--dg-amber);
    box-shadow: var(--dg-shadow);
    transform: translateY(-3px);
}
.cat-tile__icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    color: var(--dg-amber-deep);
}
.cat-tile__icon svg {
    width: 100%;
    height: 100%;
}
.cat-tile__name {
    display: flex;
    align-items: center;
    min-height: calc(14.5px * 1.3 * 2);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
}
.cat-tile__count {
    margin-top: auto;
    padding-top: 4px;
    font-size: 12px;
    color: var(--dg-text-3);
}

/* --- Szekció-fejlécek --- */
.home-news {
    padding: 64px 0 8px;
}
.home-badge {
    display: table;
    margin: 0 auto 16px;
    padding: 6px 18px;
    background: var(--dg-amber);
    color: var(--dg-on-amber);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: var(--dg-radius-sm);
}
.home-section-title {
    margin: 0 0 32px;
    text-align: center;
    font-size: var(--dg-fs-h2);
    font-weight: 800;
}
.home-news__cta {
    margin: 36px 0 56px;
    text-align: center;
}

/* --- Termék-karusszel (scroll-snap) --- */
.product-carousel {
    position: relative;
    margin-bottom: 36px;
}
.product-carousel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.product-carousel__label {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
}
.product-carousel__all {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}
/* NINCS vízszintes görgetés: minden szélességen rács. 4 kártya fér ki
   asztali nézetben, 2 oszlop alatta — az 5. kártya rejtve marad, az
   „Összes megtekintése" link vezet a teljes listához. */
.product-carousel__track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 4px;
}
@media (min-width: 1100px) {
    .product-carousel__track {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }
}
.product-carousel__track > .product-card:nth-child(n + 5) {
    display: none;
}
/* A prev/next gombok feleslegessé váltak — nincs mit görgetni */
.product-carousel__nav {
    display: none;
}

/* --- "Miért a DREAM GARAGE?" --- */
.home-why {
    background: var(--dg-surface-2);
    padding: 72px 0;
}
.home-why__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    align-items: center;
}
.home-why__eyebrow {
    margin: 0;
    font-size: 18px;
    color: var(--dg-text-2);
}
.home-why__title {
    margin: 0 0 28px;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 900;
    line-height: 1.1;
}
.home-why__media {
    align-self: stretch;
    min-height: 360px;
    border-radius: var(--dg-radius);
    background: var(--dg-ink) url(/wp-content/uploads/ADAM-RST-4-scaled.jpg) center / cover no-repeat;
}

/* --- Feature / ikonos dobozok --- */
.feature-list,
.feature-grid {
    list-style: none;
    margin: 0;
    padding: 0;
}
.home-how {
    padding: 64px 0 72px;
}
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.feature-grid .feature {
    padding: 22px 20px;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    background: var(--dg-surface);
    transition: border-color var(--dg-fast), box-shadow var(--dg-fast);
}
.feature-grid .feature:hover {
    border-color: var(--dg-amber);
    box-shadow: var(--dg-shadow);
}
.feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}
.feature + .feature {
    margin-top: 24px;
}
.feature-grid .feature + .feature {
    margin-top: 0;
}
.feature__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--dg-amber-tint);
    color: var(--dg-amber-deep);
    font-size: 18px;
}
.feature__body {
    min-width: 0;
}
.feature__title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
}
.feature__body p {
    margin: 0 0 6px;
    line-height: 1.6;
    font-size: 14.5px;
    color: var(--dg-text-2);
}

@media (max-width: 991px) {
    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .home-why__inner {
        grid-template-columns: minmax(0, 1fr);
    }
    .home-why__media {
        min-height: 220px;
    }
}
@media (max-width: 767px) {
    .home-hero { min-height: 420px; padding: 56px 0; }
    .home-notice { padding: 36px 0; }
    .home-cats { padding: 40px 0 0; }
    .home-news { padding: 44px 0 0; }
    .home-why { padding: 44px 0; }
    .home-how { padding: 44px 0 52px; }
    .feature-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .product-carousel__nav { display: none; }
    .cat-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   10. Statikus tartalmi oldalak
   ========================================================================== */
.page-section {
    margin: 0 0 48px;
}
.page-section:last-child {
    margin-bottom: 8px;
}
.page-prose {
    max-width: 72ch;
    line-height: 1.7;
}
.page-prose > :first-child {
    margin-top: 0;
}
.page-prose h2 {
    margin: 36px 0 14px;
    font-size: var(--dg-fs-h2);
}
.page-prose h3 {
    margin: 28px 0 10px;
    font-size: 19px;
}
.page-prose p {
    margin: 0 0 14px;
}
.page-prose ul,
.page-prose ol {
    margin: 0 0 14px;
    padding-left: 22px;
}
.page-prose li + li {
    margin-top: 6px;
}
.page-prose img {
    height: auto;
    border-radius: var(--dg-radius);
}

.page-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    align-items: center;
}
.page-split__body,
.page-split__media {
    min-width: 0;
}
.page-split__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--dg-radius);
}

/* --- GYIK harmonika --- */
.faq-list {
    max-width: 860px;
}
.faq-item {
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    background: var(--dg-surface);
    margin-bottom: 12px;
    overflow: hidden;
}
.faq-item[open] {
    border-color: var(--dg-amber);
}
.faq-item__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.faq-item__q::-webkit-details-marker {
    display: none;
}
.faq-item__q::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1;
    color: var(--dg-amber-deep);
}
.faq-item[open] .faq-item__q::after {
    content: "\2212";
}
.faq-item__q:hover {
    color: var(--dg-amber-deep);
}
.faq-item > :not(.faq-item__q) {
    padding: 0 20px;
}
.faq-item > :last-child {
    padding-bottom: 18px;
}

/* --- Kapcsolat-kártyák --- */
.contact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Grid, nem flex: a kártya gyerekei laposak (ikon, h3, a, p…), flex-sorban a
   cím a saját szövege MELLÉ kerülne. Az ikon az 1. oszlop első sora, minden
   más a 2. oszlopban halmozódik. */
.contact-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 4px;
    align-content: start;
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    background: var(--dg-surface);
    transition: border-color var(--dg-fast), box-shadow var(--dg-fast);
}
.contact-card:hover {
    border-color: transparent;
    box-shadow: var(--dg-shadow);
}
.contact-card > * {
    grid-column: 2;
    min-width: 0;
}
.contact-card__icon {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--dg-amber-tint);
    color: var(--dg-amber-deep);
    font-size: 17px;
}
.contact-card h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 42px; /* az ikonkoronghoz igazítja a címet */
}
.contact-card p {
    margin: 0;
}
.contact-card a,
.contact-card p {
    overflow-wrap: anywhere;
}

@media (max-width: 899px) {
    .page-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .page-section {
        margin-bottom: 32px;
    }
}

/* ==========================================================================
   11. Lábléc
   ========================================================================== */
.site-footer {
    margin-top: 48px;
    font-size: 15px;
    line-height: 1.6;
}

/* --- Hírlevél sáv --- */

/* --- Fő oszlopok --- */
.site-footer__main {
    background: var(--dg-ink);
    color: #a3a3a3;
    padding: 48px 0 24px;
}
.site-footer__columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 24px;
    align-items: start;
}
.site-footer__col {
    min-width: 0;
}
.site-footer__col p {
    margin: 0 0 12px;
}
.site-footer__logo {
    max-height: 60px;
    width: auto;
    height: auto;
}
.site-footer__claim {
    color: #fff;
    font-weight: 700;
    margin-top: 12px !important;
}
.site-footer__title {
    margin: 0 0 16px;
    color: #fff;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.site-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer__list li + li {
    margin-top: 8px;
}
.site-footer a {
    color: inherit;
    transition: color var(--dg-fast);
}
.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--dg-amber);
}

/* --- Kapcsolat oszlop --- */
.site-footer__contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer__contact-item + .site-footer__contact-item {
    margin-top: 12px;
}
.site-footer__contact-item a,
.site-footer__contact-static {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.site-footer__contact-icon {
    flex: 0 0 18px;
    width: 18px;
    text-align: center;
    padding-top: 3px;
    color: var(--dg-amber);
}
.site-footer__contact-text {
    min-width: 0;
    overflow-wrap: anywhere;
}
.site-footer__contact-extra {
    display: block;
    margin-top: 2px;
}
.site-footer__social {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 16px;
    transition: background-color var(--dg-fast), color var(--dg-fast);
}
.site-footer__social a:hover {
    background: var(--dg-amber);
    color: var(--dg-on-amber);
}

/* --- Alsó sáv --- */
.site-footer__bottom {
    background: var(--dg-ink);
    color: #7a7a7a;
    padding: 16px 0 24px;
    font-size: 13px;
}
.site-footer__bottom p {
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 16px;
}

@media (max-width: 991px) {
    .site-footer__columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 575px) {
    .site-footer__columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
}

/* ==========================================================================
   12. Kedvencek, kapcsolat és "Hogyan működik" komponensek
   ========================================================================== */

/* --- Segédgomb világos háttérre ------------------------------------------
   A .btn-ghost fehér szövegű, sötét blokkokra való. Világos szekciókban ez a
   változat használandó. */
.btn-outline {
    display: inline-block;
    padding: 12px 24px;
    background: transparent;
    color: var(--dg-ink);
    font-weight: 700;
    text-decoration: none;
    border: 2px solid var(--dg-border);
    border-radius: var(--dg-radius-sm);
    transition: border-color var(--dg-fast), background-color var(--dg-fast), color var(--dg-fast);
}
.btn-outline:hover {
    color: var(--dg-amber-deep);
    border-color: var(--dg-amber);
    background: var(--dg-amber-tint);
}

/* --- Szekciócímek --------------------------------------------------------- */
.section-title {
    margin: 0 0 6px;
    font-size: var(--dg-fs-h2);
}
.section-lead {
    margin: 0 0 24px;
    color: var(--dg-text-2);
    max-width: 62ch;
}
.page-header__lead {
    margin: 6px 0 0;
    color: var(--dg-text-2);
}

/* ==========================================================================
   Kedvencek
   ========================================================================== */

/* Fejléc-ikon + darabszám jelvény */
.site-header__action--fav {
    position: relative;
    text-decoration: none;
}
.site-header__action-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--dg-round);
    background: var(--dg-amber);
    color: var(--dg-on-amber);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
}
.site-header__action-badge[hidden] {
    display: none;
}
/* --- Mobil kereső-nyitó gomb ------------------------------------------------
   Asztalin és a lap tetején nincs rá szükség: ott a teljes keresősor látszik. */
.site-header__action--search {
    display: none;
    border: 0;
    cursor: pointer;
    font: inherit;
}

/* A szívgomb aktív állapota. Borostyán szív fehér pasztillán csak 1,60:1
   lenne, ezért aktívan a pasztilla telik meg borostyánnal, fekete szívvel
   (12,4:1) — így félreérthetetlen és márkahű. A .active osztályt visszafelé
   kompatibilitásból tartjuk. */
.product-card__favorite.is-active,
.product-card__favorite.active,
.product-favorite.is-active,
.product-favorite.active {
    background: var(--dg-amber);
    border-color: var(--dg-amber);
    color: var(--dg-on-amber);
}

/* Visszajelző buborék */
.dg-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(92vw, 460px);
    padding: 13px 18px;
    border-radius: var(--dg-radius-sm);
    background: var(--dg-ink);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--dg-shadow-lg);
    opacity: 0;
    transform: translate(-50%, 12px);
    transition: opacity var(--dg-fast), transform var(--dg-fast);
    pointer-events: none;
}
.dg-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}
.dg-toast a {
    color: var(--dg-amber);
    font-weight: 700;
    white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
    .dg-toast { transition: none; }
}

/* Kedvencek oldal */
.favorites-loading {
    padding: 40px 0;
    color: var(--dg-text-2);
    text-align: center;
}
.favorites-empty {
    max-width: 560px;
    margin: 24px auto 8px;
    padding: 40px 24px;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    background: var(--dg-surface);
    text-align: center;
}
.favorites-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--dg-amber-tint);
    color: var(--dg-amber-deep);
    font-size: 26px;
}
.favorites-empty h2 {
    margin: 0 0 10px;
    font-size: var(--dg-fs-h3);
}
.favorites-empty p {
    margin: 0 0 20px;
    color: var(--dg-text-2);
}
.favorites-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 0;
}
.favorites-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 32px 0 8px;
    padding: 16px 18px;
    border-radius: var(--dg-radius-sm);
    background: var(--dg-surface-2);
    color: var(--dg-text-2);
    font-size: 14px;
}
.favorites-note .fas {
    color: var(--dg-text-3);
    margin-top: 2px;
}
.favorites-note p {
    margin: 0;
}

/* ==========================================================================
   Kapcsolat
   ========================================================================== */
.contact-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}
/* A térkép a jobb oldali panel magasságát veszi fel (nem fix arányt), így nem
   marad üres sáv alatta. Mobilon, egy hasábban visszakapja az arányt. */
.contact-hero__map {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    background: var(--dg-surface-2);
}
.contact-hero__map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.contact-hero__panel {
    display: grid;
    gap: 16px;
    align-content: start;
}
.contact-block {
    padding: 20px;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    background: var(--dg-surface);
}
.contact-block__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
}
.contact-block__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--dg-amber-tint);
    color: var(--dg-amber-deep);
    font-size: 15px;
}
.contact-block p {
    margin: 0 0 10px;
    color: var(--dg-text-2);
}
.contact-block p:last-child {
    margin-bottom: 0;
}
.contact-block__address {
    color: var(--dg-text) !important;
    font-size: 17px;
    font-weight: 600;
}
.contact-block__actions {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
}
.contact-block__actions .btn-cta,
.contact-block__actions .btn-outline {
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: 14px;
}

/* Nyitvatartás */
.contact-hours__live {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--dg-text) !important;
}
.contact-hours__dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: 7px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .16);
}
/* A hosszú "miért változhat" magyarázat összecsukva — korábban ez feszítette
   szét a kártyarácsot. */
.contact-hours__note {
    margin-top: 14px;
    border-top: 1px solid var(--dg-border);
    padding-top: 12px;
    font-size: 14px;
}
.contact-hours__note summary {
    cursor: pointer;
    color: var(--dg-link);
    font-weight: 600;
    list-style: none;
}
.contact-hours__note summary::-webkit-details-marker {
    display: none;
}
.contact-hours__note summary::before {
    content: "\f078";           /* chevron-down */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: inline-block;
    margin-right: 8px;
    font-size: 11px;
    transition: transform var(--dg-fast);
}
.contact-hours__note[open] summary::before {
    transform: rotate(180deg);
}
.contact-hours__note p {
    margin: 10px 0 0;
    color: var(--dg-text-2);
    line-height: 1.65;
}

/* A kapcsolat-kártyák most linkek */
a.contact-card {
    color: inherit;
    text-decoration: none;
}
a.contact-card:hover h3 {
    color: var(--dg-amber-deep);
}
.contact-card p {
    color: var(--dg-text-2);
}

/* Értékelés-sáv */
.review-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border-radius: var(--dg-radius);
    background: var(--dg-surface-2);
}
.review-banner__body {
    flex: 1 1 320px;
    min-width: 0;
}
.review-banner__body h2 {
    margin: 0 0 8px;
    font-size: var(--dg-fs-h3);
}
.review-banner__body p {
    margin: 0 0 16px;
    color: var(--dg-text-2);
    max-width: 52ch;
}
.review-banner__body p:last-child {
    margin-bottom: 0;
}
.review-banner__qr {
    flex: 0 0 auto;
    display: block;
    padding: 10px;
    border-radius: var(--dg-radius-sm);
    background: #fff;
    box-shadow: var(--dg-shadow-sm);
}
.review-banner__qr img {
    display: block;
    width: 132px;
    height: 132px;
}

/* ==========================================================================
   Hogyan működik
   ========================================================================== */
.howto-intro {
    padding: 32px;
    border-radius: var(--dg-radius);
    background: var(--dg-surface-2);
}
.howto-intro__eyebrow {
    margin: 0 0 8px;
    color: var(--dg-amber-deep);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.howto-intro__title {
    margin: 0 0 12px;
    font-size: var(--dg-fs-h2);
}
.howto-intro__lead {
    margin: 0;
    max-width: 68ch;
    color: var(--dg-text-2);
    font-size: 17px;
}
.howto-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 16px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}
.howto-fact {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: var(--dg-radius-sm);
    background: var(--dg-surface);
}
.howto-fact__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 12px;
}
.howto-fact--yes .howto-fact__icon {
    background: rgba(22, 163, 74, .12);
    color: #16a34a;
}
.howto-fact--no .howto-fact__icon {
    background: var(--dg-negative-tint);
    color: var(--dg-negative);
}
.howto-fact strong {
    display: block;
    margin-bottom: 2px;
}
.howto-fact span {
    color: var(--dg-text-2);
    font-size: 14px;
}

/* Számozott lépések */
.howto-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: howto;
}
.howto-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 20px 20px;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    background: var(--dg-surface);
    transition: border-color var(--dg-fast), box-shadow var(--dg-fast), transform var(--dg-fast);
}
.howto-step:hover {
    border-color: transparent;
    box-shadow: var(--dg-shadow);
    transform: translateY(-2px);
}
.howto-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--dg-ink);
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}
.howto-step__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.howto-step__body h3 {
    margin: 0 0 8px;
    font-size: 18px;
}
.howto-step__body p {
    margin: 0 0 12px;
    color: var(--dg-text-2);
}
.howto-step__cta {
    margin: auto 0 0 !important;
    padding-top: 8px;
}
.howto-step__cta .btn-outline {
    padding: 10px 18px;
    font-size: 14px;
}

/* Záró felhívás */
.howto-cta {
    padding: 40px 32px;
    border-radius: var(--dg-radius);
    background: var(--dg-ink);
    color: #fff;
    text-align: center;
}
.howto-cta h2 {
    margin: 0 0 10px;
    color: #fff;
    font-size: var(--dg-fs-h2);
}
.howto-cta p {
    margin: 0 0 22px;
    color: #c9c9c9;
}
.howto-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 0 !important;
}

@media (max-width: 899px) {
    .contact-hero {
        grid-template-columns: minmax(0, 1fr);
    }
    .contact-hero__map {
        aspect-ratio: 16 / 11;
        min-height: 0;
    }
    .howto-intro,
    .howto-cta {
        padding: 24px 20px;
    }
    .review-banner {
        padding: 22px 20px;
    }
}

/* --- Szövegközi linkek -----------------------------------------------------
   A borostyán világos alapon 1,60:1, tehát nem lehet linkszín. A linkeket
   ezért borostyán aláhúzás különbözteti meg a folyó szövegtől — a szín
   önmagában nem hordozza az információt (WCAG 1.4.1). Csak az osztály nélküli
   linkekre vonatkozik bekezdésen/listán belül, így a gombok, kártyák,
   morzsamenü és navigáció érintetlen marad. */
.page-content :is(p, li, dd) a:not([class]),
.page-prose :is(p, li, dd) a:not([class]),
.home-notice p a:not([class]),
.feature__body p a:not([class]),
.product-description :is(p, li) a:not([class]) {
    text-decoration: underline;
    text-decoration-color: var(--dg-amber);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.page-content :is(p, li, dd) a:not([class]):hover,
.page-prose :is(p, li, dd) a:not([class]):hover,
.home-notice p a:not([class]):hover,
.feature__body p a:not([class]):hover,
.product-description :is(p, li) a:not([class]):hover {
    color: var(--dg-amber-deep);
    text-decoration-color: var(--dg-amber-deep);
}

/* ==========================================================================
   14. Sávalapú tartalom (adminból szerkeszthető szekciók)

   A kezdőlap eredeti sávjai a saját, korábbi osztályaikat használják
   (.home-hero, .dg-split, .home-cats, .home-notice, .home-news, .home-why,
   .home-how) — a sávosítás után is pontosan úgy néznek ki, mint előtte.
   Az itt következő .dg-band a KÖZÖS keret az újabb sávtípusoknak: szövegtörzs,
   kép+szöveg, lépések, számok, GYIK, CTA, márkafal, nyitvatartás, kapcsolat,
   vélemény és szabad HTML.
   ========================================================================== */
.dg-band {
    padding: 56px 0;
}
.dg-band__inner {
    width: 100%;
    max-width: var(--dg-container);
    margin-inline: auto;
    padding-inline: 16px;
}
.dg-band__title {
    margin: 0 0 16px;
    font-size: var(--dg-fs-h2);
    font-weight: 800;
}
.dg-band__lead {
    margin: 0 0 24px;
    max-width: 72ch;
    color: var(--dg-text-2);
    font-size: 17px;
}
.dg-band__body > :first-child {
    margin-top: 0;
}
.dg-band__actions {
    margin: 24px 0 0;
}
.dg-band__link {
    font-weight: 700;
}

/* Háttérváltozatok. A sötét sávon a szövegszínt is váltani kell, különben a
   sötétszürke törzsszöveg olvashatatlan lenne — a borostyán ilyenkor
   szövegszínként is használható (12,4:1). */
.dg-band--light { background: var(--dg-surface); }
.dg-band--muted { background: var(--dg-surface-2); }
.dg-band--amber { background: var(--dg-amber-tint); }
.dg-band--dark {
    background: var(--dg-ink);
    color: rgba(255, 255, 255, .88);
}
.dg-band--dark .dg-band__title,
.dg-band--dark h2,
.dg-band--dark h3 {
    color: #fff;
}
.dg-band--dark .dg-band__lead,
.dg-band--dark p {
    color: rgba(255, 255, 255, .78);
}
.dg-band--dark a:not([class]) {
    color: var(--dg-amber);
}

/* Eszközcélzás — a hosszabb sávok mobilon néha feleslegesek. */
@media (max-width: 767px) {
    .dg-only-desktop { display: none !important; }
}
@media (min-width: 768px) {
    .dg-only-mobile { display: none !important; }
}

/* Piszkozat előnézetben: látszódjon, hogy ez még nincs kint élesben. */
.dg-band--draft,
section.dg-band--draft {
    outline: 2px dashed var(--dg-amber-deep);
    outline-offset: -6px;
}

/* --- Kép és szöveg --- */
.page-split--flip .page-split__body { order: 2; }
.page-split--flip .page-split__media { order: 1; }

/* --- Saját háttérképes hero --- */
.home-hero--custom {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.home-hero--custom::before {
    /* A háttérkép már tartalmazza az átmenetet, a duplázás túl sötét lenne. */
    display: none;
}
.home-hero__lead {
    margin: 0 0 20px;
    max-width: 62ch;
    color: rgba(255, 255, 255, .9);
    font-size: 17px;
}

/* --- Számozott lépések --- */
.dg-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.dg-step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    align-content: start;
    padding: 22px;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    background: var(--dg-surface);
}
.dg-step__num {
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--dg-amber);
    color: var(--dg-on-amber);
    font-weight: 900;
    font-size: 18px;
}
.dg-step__title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    line-height: 44px;
}
.dg-step__body p {
    margin: 0 0 8px;
    color: var(--dg-text-2);
}

/* --- Számok --- */
.dg-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
.dg-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dg-stat__value {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 900;
    line-height: 1;
    color: var(--dg-amber);
}
.dg-stat__label {
    font-size: 15px;
    color: var(--dg-text-2);
}
.dg-band--dark .dg-stat__label {
    color: rgba(255, 255, 255, .75);
}

/* --- Márkafal --- */
.dg-brands {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.dg-brand {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-round);
    background: var(--dg-surface);
    font-weight: 700;
    font-size: 14px;
    color: var(--dg-ink);
    transition: border-color var(--dg-fast), box-shadow var(--dg-fast);
}
.dg-brand:hover {
    color: var(--dg-ink);
    border-color: var(--dg-amber);
    box-shadow: var(--dg-shadow-sm);
}

/* --- Nyitvatartás --- */
.dg-hours {
    width: 100%;
    max-width: 520px;
    border-collapse: collapse;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    overflow: hidden;
}
.dg-hours th,
.dg-hours td {
    padding: 11px 16px;
    text-align: left;
    border-bottom: 1px solid var(--dg-border);
    font-size: 15px;
}
.dg-hours tr:last-child th,
.dg-hours tr:last-child td {
    border-bottom: 0;
}
.dg-hours th {
    font-weight: 600;
    color: var(--dg-text-2);
    background: var(--dg-surface);
}
.dg-hours td {
    font-weight: 700;
    background: var(--dg-surface);
}
.dg-hours tr.is-today th,
.dg-hours tr.is-today td {
    background: var(--dg-amber-tint);
}
.dg-hours tr.is-closed td {
    font-weight: 500;
    color: var(--dg-text-3);
}
.dg-hours__today {
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: var(--dg-round);
    background: var(--dg-amber);
    color: var(--dg-on-amber);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.dg-hours__status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    padding: 9px 16px;
    border-radius: var(--dg-round);
    font-weight: 700;
    font-size: 15px;
}
.dg-hours__status.is-open {
    background: rgba(31, 122, 70, .12);
    color: #1f7a46;
}
.dg-hours__status.is-shut {
    background: var(--dg-surface-2);
    color: var(--dg-text-2);
}
.dg-hours__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
}
.dg-hours__next {
    font-weight: 500;
}
.dg-hours__exceptions {
    margin-top: 24px;
}
.dg-hours__exceptions h3 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 800;
}
.dg-hours__exceptions ul {
    margin: 0;
    padding-left: 18px;
}
.dg-hours__exceptions li + li {
    margin-top: 5px;
}
.dg-hours__note {
    color: var(--dg-text-2);
}
.dg-hours__free {
    margin-top: 18px;
    max-width: 72ch;
    color: var(--dg-text-2);
}

/* --- Kapcsolati panel --- */
.dg-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.dg-social {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
}
.dg-map {
    margin-top: 28px;
    border-radius: var(--dg-radius);
    overflow: hidden;
    border: 1px solid var(--dg-border);
    line-height: 0;
}
.dg-map iframe {
    display: block;
    width: 100%;
    min-height: 340px;
    border: 0;
}

/* --- Vélemény-sáv --- */
.dg-review {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.dg-review__copy {
    flex: 1 1 380px;
    min-width: 0;
}
.dg-review__qr img {
    display: block;
    width: 148px;
    height: auto;
    border-radius: var(--dg-radius-sm);
    background: #fff;
    padding: 8px;
}

/* --- Popup: felül elhelyezett kép --- */
.dg-pop__image {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: cover;
}

/* ==========================================================================
   15. Értesítő csík, eltérő nyitvatartás, előnézet
   ========================================================================== */
.dg-notice-bar {
    background: var(--dg-amber);
    color: var(--dg-on-amber);
}
.dg-notice-bar__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: var(--dg-container);
    margin-inline: auto;
    padding: 10px 16px;
    font-size: 14.5px;
}
.dg-notice-bar__badge {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: var(--dg-round);
    background: var(--dg-on-amber);
    color: var(--dg-amber);
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.dg-notice-bar__text {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
}
.dg-notice-bar__cta {
    flex: 0 0 auto;
    font-weight: 800;
    color: var(--dg-on-amber);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.dg-notice-bar__close {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .08);
    color: var(--dg-on-amber);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.dg-notice-bar__close:hover {
    background: rgba(0, 0, 0, .16);
}

.dg-hours-notice {
    background: var(--dg-ink-2);
    color: rgba(255, 255, 255, .9);
}
.dg-hours-notice__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: var(--dg-container);
    margin-inline: auto;
    padding: 9px 16px;
    font-size: 14px;
}
.dg-hours-notice__inner .fa-clock {
    color: var(--dg-amber);
}
.dg-hours-notice p {
    margin: 0;
}
.dg-hours-notice a {
    color: var(--dg-amber);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.dg-hours-notice__note {
    color: rgba(255, 255, 255, .65);
}

.dg-preview-bar {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: #17171a;
    color: #fff;
    font-size: 14px;
}
.dg-preview-bar__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dg-amber);
}
.dg-preview-bar span:not(.dg-preview-bar__dot) {
    color: rgba(255, 255, 255, .72);
}
.dg-preview-bar a {
    margin-left: auto;
    color: var(--dg-amber);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Topbar nyitvatartás-jelzés --- */
.site-topbar__hours {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.site-topbar__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8a8a8a;
}
.site-topbar__hours.is-open .site-topbar__dot {
    background: #4caf50;
}
.site-topbar__hours.is-shut .site-topbar__dot {
    background: #b0413e;
}

/* ==========================================================================
   16. Termék: állapot és csatorna (kettéválás)
   ========================================================================== */
.product-condition {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--dg-round);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.product-condition--hasznalt {
    background: var(--dg-amber-tint);
    color: var(--dg-amber-deep);
}
.product-condition--kifuto {
    background: var(--dg-surface-2);
    color: var(--dg-text-2);
}

.product-moved {
    margin: 20px 0;
    padding: 20px 22px;
    border: 1px solid var(--dg-amber);
    border-left-width: 4px;
    border-radius: var(--dg-radius);
    background: var(--dg-amber-tint);
}
.product-moved__title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 800;
}
.product-moved p {
    margin: 0 0 16px;
    color: var(--dg-text-2);
}
.product-cta--ghost {
    background: transparent;
    border: 2px solid var(--dg-ink);
    color: var(--dg-ink);
}
.product-cta--ghost:hover {
    background: var(--dg-ink);
    color: #fff;
}

@media (max-width: 767px) {
    .dg-band { padding: 40px 0; }
    .dg-notice-bar__inner { flex-wrap: wrap; }
    .dg-notice-bar__text { flex-basis: 100%; order: 3; }
    .dg-review { justify-content: center; text-align: center; }
}

/* ==========================================================================
   BLOG — lista (/blog/) és bejegyzés (/blog/<slug>/)
   A kártya a termékkártya rokona (azonos keret, sugár, emelkedő hover), de a
   kép fekvő 16:9, és a szöveg viszi a főszerepet. A borítót itt szándékosan
   `cover` vágja: a fekvő vágás az illusztráció dolga, nem terméké, ahol a
   teljes darabot látni kell.
   ========================================================================== */
.blog-wrap {
    padding: 32px 0 56px;
}

/* --- Rovatszűrő --- */
.blog-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}
.blog-topic {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-round);
    background: var(--dg-surface);
    color: var(--dg-text);
    font-size: 14px;
    font-weight: 600;
    transition: border-color var(--dg-fast), background-color var(--dg-fast);
}
.blog-topic:hover {
    border-color: var(--dg-ink);
    color: var(--dg-ink);
}
.blog-topic.is-active {
    background: var(--dg-ink);
    border-color: var(--dg-ink);
    color: #fff;
}
.blog-topic__count {
    font-size: 12px;
    color: var(--dg-text-3);
}
.blog-topic.is-active .blog-topic__count {
    color: rgba(255, 255, 255, .7);
}

/* --- Kártyarács --- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--dg-surface);
    border: 1px solid var(--dg-border);
    border-radius: var(--dg-radius);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.blog-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .1);
}
.blog-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--dg-surface-2);
}
.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 250ms ease;
}
.blog-card:hover .blog-card__media img {
    transform: scale(1.04);
}
.blog-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 18px 20px 20px;
}
.blog-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--dg-text-3);
}
.blog-card__topic {
    padding: 3px 10px;
    border-radius: var(--dg-round);
    background: var(--dg-amber-tint);
    color: var(--dg-amber-deep);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.blog-card__title {
    margin: 0 0 8px;
    font-size: 19px;
    line-height: 1.35;
}
.blog-card__title a {
    color: var(--dg-ink);
}
.blog-card__title a:hover {
    color: var(--dg-amber-deep);
}
/* „Kinyújtott" link: a cím hivatkozása egy láthatatlan réteggel lefedi az egész
   kártyát, így a kép, a kivonat és a fehér terület is kattintható — a
   billentyűzetes bejárásban viszont továbbra is egyetlen link marad. */
.blog-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}
.blog-card__title a:focus-visible::after {
    outline: 2px solid var(--dg-ink);
    outline-offset: -3px;
}
.blog-card__teaser {
    margin: 0 0 16px;
    color: var(--dg-text-2);
    font-size: 15px;
}
/* A lefedő réteg fölé emelve, hogy saját hover-állapota legyen — kattintani
   egyébként mindkettőn ugyanoda visz. */
.blog-card__more {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    margin-top: auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--dg-amber-deep);
    transition: color var(--dg-fast);
}
.blog-card__more:hover,
.blog-card:hover .blog-card__more {
    color: var(--dg-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Borító nélküli bejegyzés: a kártya ne tűnjön hiányosnak — halk borostyán
   sáv jelzi a tetejét a kép helyett. */
.blog-card--nocover .blog-card__body {
    border-top: 4px solid var(--dg-amber);
    padding-top: 20px;
}

/* --- Egy bejegyzés --- */
.blog-post__topic {
    margin: 0 0 10px;
}
.blog-post__topic a {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--dg-round);
    background: var(--dg-amber-tint);
    color: var(--dg-amber-deep);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.blog-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--dg-text-3);
}
.blog-post__author::before {
    content: "·";
    margin-right: 16px;
}
/* Szövegtörzs: a .container 1200-as korlátja helyett olvasható sorhossz. */
.blog-post__wrap {
    max-width: 860px;
    padding-top: 32px;
    padding-bottom: 48px;
}
.blog-post__cover {
    margin: 0 0 28px;
    border-radius: var(--dg-radius);
    overflow: hidden;
    background: var(--dg-surface-2);
}
.blog-post__cover img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.blog-post__lead {
    margin: 0 0 24px;
    font-size: 18px;
    font-weight: 500;
    color: var(--dg-text-2);
}
.blog-post__body {
    max-width: none;
}
.blog-post__body img {
    height: auto;
    border-radius: var(--dg-radius);
    margin: 20px 0;
}
/* A Dream Garage-ből átvett cikkek jelölése (dgb-*). */
.blog-post__body .dgb-meta {
    display: inline-block;
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dg-amber-deep);
}
.blog-post__body h3.dgb-h {
    padding-left: 14px;
    border-left: 4px solid var(--dg-amber);
}
.blog-post__body table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin: 20px 0 24px;
    border-collapse: collapse;
    font-size: 15px;
}
.blog-post__body th,
.blog-post__body td {
    padding: 10px 12px;
    border: 1px solid var(--dg-border);
    text-align: left;
    vertical-align: top;
}
.blog-post__body th {
    background: var(--dg-surface-2);
    font-weight: 700;
}
.blog-post__back {
    margin: 40px 0 0;
    font-weight: 700;
}
.blog-related {
    margin-top: 48px;
    padding: 44px 0 56px;
    background: var(--dg-surface-2);
}
.blog-related .home-section-title {
    margin-bottom: 24px;
}

@media (max-width: 599px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .blog-post__lead {
        font-size: 17px;
    }
}