/* Header / Navigation – domyślnie styl hero (blur, białe elementy).
   Modyfikator .header--light nadpisuje na styl podstron (transparent, ciemne). */
.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: max(30px, env(safe-area-inset-top, 0px)) 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Usunięto transition: padding — wywołuje Layout reflow na każdej klatce */
}

/* Gradient + blur nad hero – ok. 150px wysokości dla czytelności menu na jasnym tle */
.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(14, 14, 19,0.7) 0%, rgba(14, 14, 19,0.7) 80px, transparent 150px);
    backdrop-filter: var(--backdrop-blur-lg);
    -webkit-backdrop-filter: var(--backdrop-blur-lg);
    mask-image: linear-gradient(to bottom, #0e0e13, transparent);
    -webkit-mask-image: linear-gradient(to bottom, #0e0e13, transparent);
}

.header.scrolled::before {
    height: 100%;
    background: rgba(14, 14, 19, 0.92);
    mask-image: none;
    -webkit-mask-image: none;
}

/* Gdy menu jest otwarte: rozmycie headera przy górnej krawędzi
   tylko po prawej od panelu (od 50rem), żeby nie było rozmazanego paska nad menu */
body.menu-open .header::before {
    mask-image: linear-gradient(to right, transparent 0, transparent 50rem, #0e0e13 50rem);
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 50rem, #0e0e13 50rem);
}

body.menu-open .header.scrolled::before {
    mask-image: linear-gradient(to right, transparent 0, transparent 50rem, #0e0e13 50rem);
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 50rem, #0e0e13 50rem);
}

/* Przy otwartym menu: hamburger (→ X) NAD panelem menu, żeby X był widoczny i klikalny w SWOIM
 * miejscu (zamknięcie). Nagłówek tworzy własny kontekst z-index, więc podnosimy CAŁY nagłówek nad
 * panel (11000), a resztę (logo, PL/EN, ikony, gradient) chowamy — widać tylko X. */
body.menu-open .header {
    z-index: 11050;
}
body.menu-open .header::before {
    display: none;
}
body.menu-open .header.header--light {
    background: transparent;
    border-bottom-color: transparent;
}
body.menu-open .header-logo,
body.menu-open .header-right {
    opacity: 0;
    pointer-events: none;
}

/* Na desktop: przy otwartym menu header ma większy padding */
@media (min-width: 1025px) {
    body.menu-open .header {
        padding: max(30px, env(safe-area-inset-top, 0px)) 5.5rem 3rem;
    }
}

.header-left {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    /* Nad resztą paska (np. wiersz języków na mobile), żeby hamburger zawsze był klikalny. */
    z-index: 1010;
}

.header-logo {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.6rem; /* logo + przełącznik języka obok (wizytówka); na sklepie logo jest jedynym dzieckiem */
}

/* Wizytówka (bez sklepu): PL/EN — bez zbędnego marginesu z układu paska. */
.header-lang-switcher--logo {
    margin: 0;
}

/* Desktop wizytówki: PL/EN dosunięte do PRAWEJ krawędzi strony (nie obok logo).
   Absolutnie względem .header (relative na light / absolute na hero) — logo zostaje wyśrodkowane. */
@media (min-width: 769px) {
    .header--vitrine .header-lang-switcher--logo {
        position: absolute;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
    }
}

.header-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2rem;
}

.header-lang-switcher {
    display: inline-flex;
    align-items: center;
}

.header-lang-switcher .footer-lang-switch,
.header-lang-switcher .footer-lang-option {
    border-radius: var(--radius-sm);
}

.header-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    background-color: transparent;
    transition: background-color var(--transition), color var(--transition);
    border: none;
    cursor: pointer;
    font: inherit;
}

.header-account:hover {
    background-color: rgba(255,255,255,0.12);
    color: #ffffff;
}

.header-account svg {
    width: var(--size-24);
    height: var(--size-24);
    display: block;
}

.logo {
    height: var(--size-32);
    width: auto;
}

@media (max-width: 1024px) {
    .logo {
        height: var(--size-24);
    }
}

.menu-toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--size-48);
    min-height: var(--size-40);
    padding: var(--space-8);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    color: #ffffff;
    transition: background var(--transition), color var(--transition);
    position: relative;
    z-index: 1005;
}

.menu-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Panel otwarty: czarny napis/ikonka na jasnym panelu — bez wypełnienia tła przycisku. */
.menu-toggle.is-open {
    color: var(--color-text);
    background: transparent;
}

.menu-toggle.is-open:hover {
    background: rgba(14, 14, 19, 0.06);
    color: var(--color-text);
}

.menu-toggle svg {
    width: var(--size-56);
    height: auto;
}

.menu-line {
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform-origin: center;
    transform-box: fill-box;
}

.menu-toggle.is-open .menu-line-1 {
    transform: translateY(4px) rotate(45deg);
}

.menu-toggle.is-open .menu-line-2 {
    opacity: 0;
}

.menu-toggle.is-open .menu-line-3 {
    transform: translateY(-4px) rotate(-45deg);
}

/* Menu panel – slides from left.
 * Bez transform na tym kontenerze: inaczej fixed (.hgv-offcanvas-submenu) jest „uwięziony”
 * wewnątrz panelu i druga kolumna podmenu nie widać na viewportcie (jak na makiecie). */
.menu-panel {
    position: fixed;
    top: 0;
    left: calc(-1 * min(100vw, 50rem));
    width: min(100vw, 50rem);
    max-width: 50rem;
    height: 100vh;
    /* Wyżej niż header (1000), żeby całe menu zasłaniało pasek HGV. */
    z-index: 11000;
    background: #fff;
    padding: 16rem 4rem 16rem;
    /* Płynny, zdecelerowany slide; ten sam czas i easing co backdrop → ruch spójny. */
    transition: left 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Zamknięty panel nadal bywa w drzewie hit-test — nie może blokować klików w hamburger */
    pointer-events: none;
}

.menu-panel.is-open {
    left: 0;
    pointer-events: auto;
}

/* Backdrop na CAŁĄ szerokość (nie tylko na prawo od panelu) — inaczej podczas wysuwania
 * obszar panelu był niezaszarzony i widać było „przezroczysty prostokąt". Panel (z-index 11000,
 * biały) i tak zasłania swoją część, a reszta strony przyciemnia się jednolicie i płynnie. */
.menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Nad treścią, ale pod panelem menu; wyżej niż header (.header z-index: 1000). */
    z-index: 10990;
    background: rgba(14, 14, 19, 0.4);
    backdrop-filter: var(--backdrop-blur-lg);
    -webkit-backdrop-filter: var(--backdrop-blur-lg);
    opacity: 0;
    pointer-events: none;
    /* Ten sam czas/easing co panel → tło i menu pojawiają się razem, spójnie. */
    transition: opacity 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.menu-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Panel logowania – z lewej jak menu */
.account-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 50rem;
    height: 100vh;
    z-index: 1004;
    background: #fff;
    padding: 16rem 4rem 4rem;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-sizing: border-box;
}

.account-panel.is-open {
    transform: translateX(0);
}

.account-backdrop {
    position: fixed;
    top: 0;
    left: 50rem;
    right: 0;
    bottom: 0;
    z-index: 1003;
    background: rgba(14, 14, 19, 0.4);
    backdrop-filter: var(--backdrop-blur-lg);
    -webkit-backdrop-filter: var(--backdrop-blur-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.account-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.account-panel-close {
    position: absolute;
    top: 2.5rem;
    right: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-40);
    height: var(--size-40);
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}

.account-panel-close:hover {
    background: var(--color-bg-alt);
}

.account-panel-title {
    font-size: var(--font-size-h4);
    font-weight: 400;
    margin: 0 0 3rem;
    color: var(--color-text);
}

.account-panel .contact-form-field {
    margin-bottom: 2rem;
}

/* Koszyk – panel wysuwany z prawej (minicart); nad menu offcanvas (11000). */
.cart-backdrop {
    position: fixed;
    inset: 0;
    z-index: 11990;
    background: rgba(14, 14, 19, 0.35);
    backdrop-filter: var(--backdrop-blur-sm);
    -webkit-backdrop-filter: var(--backdrop-blur-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.cart-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
.cart-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 52rem;
    height: 100vh;
    z-index: 12000;
    background: #fff;
    box-shadow: -8px 0 40px rgba(14, 14, 19, 0.12);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.cart-panel.is-open {
    transform: translateX(0);
}
.cart-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 2.5rem;
    border-bottom: 1px solid var(--color-bg-alt);
    flex-shrink: 0;
}
.cart-panel-title {
    font-size: var(--font-size-h5);
    font-weight: 400;
    letter-spacing: var(--letter-spacing);
    margin: 0;
    color: var(--color-text);
}
.cart-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-40);
    height: var(--size-40);
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    border-radius: var(--radius-lg);
    transition: background 0.2s, color 0.2s;
    font-size: 3.2rem;
    line-height: 1;
}
.cart-panel-close span {
    display: block;
    line-height: 1;
    font-weight: 300;
}
.cart-panel-close:hover {
    background: var(--color-bg-alt);
    color: var(--color-text);
}
.cart-panel-content {
    flex: 1;
    padding: 3rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.cart-panel-content.hgv-minicart-panel-content {
    display: block;
    padding: 2rem 2.5rem 1rem;
    overflow-y: auto;
}
.cart-panel-content.hgv-minicart-panel-content:has(.woocommerce-mini-cart__empty-message) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.hgv-minicart-fragments .woocommerce-mini-cart__empty-message {
    font-size: var(--font-size-h5);
    font-weight: 500;
    color: var(--color-text);
    margin: 0 0 1rem;
    letter-spacing: var(--letter-spacing);
}
.hgv-minicart-empty-hint {
    font-size: var(--font-size-body-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0 auto 2rem;
    max-width: 32rem;
}
.hgv-minicart-footer {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem 2rem;
    padding: 2rem 2.5rem 2.5rem;
    border-top: 1px solid var(--color-bg-alt);
}
.hgv-minicart-cta--shop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    background: var(--color-text);
    color: #fff;
    font-size: var(--font-size-body);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background 0.25s ease, color 0.25s ease;
}
.hgv-minicart-cta--shop:hover {
    background: #333;
    color: #fff;
}
.hgv-minicart-footer__cart {
    font-size: var(--font-size-body-sm);
    color: var(--color-accent);
    text-decoration: underline;
}
.hgv-minicart-footer__cart:hover {
    color: var(--color-accent-hover);
}
.hgv-minicart-fragments .woocommerce-mini-cart {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hgv-minicart-fragments .woocommerce-mini-cart-item {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-bg-alt);
}
.hgv-minicart-fragments .woocommerce-mini-cart-item:last-child {
    border-bottom: none;
}
.hgv-minicart-fragments .woocommerce-mini-cart__buttons {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-bg-alt);
}
.hgv-minicart-fragments .woocommerce-mini-cart__buttons .button {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* ---- Mini-koszyk: spójny styl HGV (scope na pewny .hgv-minicart-panel, bo po AJAX
   kontener bywa bez klasy .hgv-minicart-fragments). Nadpisuje domyślny wygląd WooCommerce. ---- */
.hgv-minicart-panel .woocommerce-mini-cart {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hgv-minicart-panel .woocommerce-mini-cart-item {
    position: relative;
    display: block;
    /* prawy gutter: miniatura (5.4rem) + odstęp + „×" (2rem) */
    padding: 1.5rem 9rem 1.5rem 0;
    min-height: 5.4rem;
    border-bottom: 1px solid var(--color-bg-alt);
}
.hgv-minicart-panel .woocommerce-mini-cart-item::after {
    content: '';
    display: block;
    clear: both;
}
.hgv-minicart-panel .woocommerce-mini-cart-item:last-child {
    border-bottom: none;
}
/* Przycisk usuwania „×” — dyskretny (nie domyślny czerwony) */
.hgv-minicart-panel a.remove,
.hgv-minicart-panel a.remove_from_cart_button {
    position: absolute;
    left: auto;
    right: 0;                 /* po prawej stronie miniaturki (prawa krawędź itemu) */
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    color: var(--color-text-muted) !important;
    font-size: 1.8rem;
    text-decoration: none;
    border-radius: 50%;
    transition: color 0.2s ease, background 0.2s ease;
}
.hgv-minicart-panel a.remove:hover,
.hgv-minicart-panel a.remove_from_cart_button:hover {
    color: #c0392b !important;
    background: rgba(192, 57, 43, 0.08);
}
/* Nazwa produktu — ciemny tekst (nie domyślny fiolet/niebieski), miniatura po prawej */
.hgv-minicart-panel .woocommerce-mini-cart-item > a:not(.remove) {
    display: block;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--font-size-body-sm);
    line-height: 1.35;
}
.hgv-minicart-panel .woocommerce-mini-cart-item > a:not(.remove):hover {
    color: var(--color-accent);
}
.hgv-minicart-panel .woocommerce-mini-cart-item img {
    position: absolute;
    right: 3rem;                 /* miniatura, a „×" (right:0) na prawo od niej */
    top: 50%;
    transform: translateY(-50%);
    float: none;
    width: 5.4rem;
    height: 5.4rem;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin: 0;
}
.hgv-minicart-panel .woocommerce-mini-cart-item .quantity {
    display: block;
    margin-top: 0.4rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
}
.hgv-minicart-panel .woocommerce-mini-cart__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 1.6rem 0 0;
    padding: 1.6rem 0 0;
    border-top: 1px solid var(--color-bg-alt);
    font-size: var(--font-size-body-sm);
    color: var(--color-text);
}
.hgv-minicart-panel .woocommerce-mini-cart__total strong {
    font-weight: 700;
}
/* Domyślne przyciski WC (Zobacz koszyk / Zamówienie) — ukryte: stopka panelu ma własne CTA. */
.hgv-minicart-panel .woocommerce-mini-cart__buttons {
    display: none;
}

body.hgv-minicart-open {
    overflow: hidden;
}
.cart-empty {
    text-align: center;
    max-width: 35rem;
}
.cart-empty-icon {
    color: var(--color-bg-alt);
    margin-bottom: 2rem;
}
.cart-empty-icon svg {
    display: block;
    margin: 0 auto;
}
.cart-empty-title {
    font-size: var(--font-size-h5);
    font-weight: 500;
    color: var(--color-text);
    margin: 0 0 0.75rem;
    letter-spacing: var(--letter-spacing);
}
.cart-empty-desc {
    font-size: var(--font-size-body-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0 0 2rem;
}
.cart-empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    background: var(--color-text);
    color: #fff;
    font-size: var(--font-size-body);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background 0.25s ease, color 0.25s ease;
}
.cart-empty-cta:hover {
    background: #333;
    color: #fff;
}

/* Panel kategorii produktów – pojawia się po prawej od menu po kliknięciu Produkty */
.menu-products-panel {
    position: fixed;
    top: 0;
    left: 50rem;
    width: 52rem;
    max-width: calc(100vw - 50rem);
    height: 100vh;
    z-index: 1001;
    background: #e2e2e2;
    padding: 13rem 6rem 4rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-16px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.menu-products-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Custom scrollbar – niebieski, bez strzałek, rozszerza się przy najechaniu */
.menu-products-panel {
    scrollbar-color: var(--color-accent) #d8d8d8;
    scrollbar-width: thin;
}
.menu-products-panel::-webkit-scrollbar {
    width: var(--size-8);
}
.menu-products-panel:hover::-webkit-scrollbar {
    width: var(--size-16);
}
.menu-products-panel::-webkit-scrollbar-track {
    background: #d8d8d8;
}
.menu-products-panel::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: var(--radius-sm);
}
.menu-products-panel::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-hover);
}
.menu-products-panel::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}
.menu-products-panel::-webkit-scrollbar-button:vertical {
    display: none;
    height: 0;
    max-height: 0;
}
.menu-products-panel::-webkit-scrollbar-button:vertical:decrement,
.menu-products-panel::-webkit-scrollbar-button:vertical:increment {
    display: none;
    height: 0;
    background: transparent;
}

.menu-products-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Kafle Produkty / Usługi: pełne zdjęcie edge-to-edge + gradient u dołu + tytuł i chevron */
.menu-product-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    isolation: isolate;
    padding: 0;
    overflow: hidden;
    border: none;
    border-radius: 1.25rem;
    aspect-ratio: 16 / 10;
    min-height: 11rem;
    color: #fff;
    text-decoration: none;
    text-align: left;
    background-color: #0e0e13;
    box-shadow: 0 4px 20px rgba(14, 14, 19, 0.12);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-product-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(to top, rgba(14, 14, 19, 0.78) 0%, rgba(14, 14, 19, 0.28) 45%, transparent 72%);
    pointer-events: none;
}

.menu-product-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(14, 14, 19, 0.18);
}

.menu-product-item img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center;
    display: block;
    border: none;
    border-radius: 0;
}

.menu-product-item h3 {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 1.5rem 1.25rem 1.35rem 1.5rem;
    font-size: 2.4rem;
    font-weight: 400;
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    color: #fff;
}

.menu-product-item h3::after {
    content: '';
    flex-shrink: 0;
    width: var(--size-24);
    height: var(--size-24);
    background: var(--icon-chevron-right-white) no-repeat center;
    background-size: var(--size-24) var(--size-24);
    opacity: 0.95;
}

body.menu-products-open .menu-backdrop {
    left: 102rem;
}

body.menu-products-open .header::before {
    mask-image: linear-gradient(to right, transparent 0, transparent 102rem, #0e0e13 102rem);
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 102rem, #0e0e13 102rem);
}

body.menu-products-open .header.scrolled::before {
    mask-image: linear-gradient(to right, transparent 0, transparent 102rem, #0e0e13 102rem);
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 102rem, #0e0e13 102rem);
}

/* Panel usług – po prawej od menu, układ jak Produkty (etykieta + obraz) */
.menu-services-panel {
    position: fixed;
    top: 0;
    left: 50rem;
    width: 52rem;
    max-width: calc(100vw - 50rem);
    height: 100vh;
    z-index: 1001;
    background: #e2e2e2;
    padding: 13rem 6rem 4rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-16px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    scrollbar-color: var(--color-accent) #d8d8d8;
    scrollbar-width: thin;
}
.menu-services-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
.menu-services-panel::-webkit-scrollbar { width: var(--size-8); }
.menu-services-panel:hover::-webkit-scrollbar { width: var(--size-16); }
.menu-services-panel::-webkit-scrollbar-track { background: #d8d8d8; }
.menu-services-panel::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: var(--radius-sm); }
.menu-services-panel::-webkit-scrollbar-thumb:hover { background: var(--color-accent-hover); }
.menu-services-panel::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.menu-services-panel::-webkit-scrollbar-button:vertical { display: none; height: 0; max-height: 0; }
.menu-services-panel::-webkit-scrollbar-button:vertical:decrement,
.menu-services-panel::-webkit-scrollbar-button:vertical:increment { display: none; height: 0; background: transparent; }

.menu-services-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.menu-back-button {
    display: none;
    align-items: center;
    gap: 0.75rem;
    margin: 0 auto 2.5rem;
    padding: 0.5rem 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: var(--color-text);
}

.menu-back-button svg {
    width: var(--size-18);
    height: var(--size-18);
}

body.menu-services-open .menu-backdrop {
    left: 102rem;
}
body.menu-services-open .header::before {
    mask-image: linear-gradient(to right, transparent 0, transparent 102rem, #0e0e13 102rem);
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 102rem, #0e0e13 102rem);
}
body.menu-services-open .header.scrolled::before {
    mask-image: linear-gradient(to right, transparent 0, transparent 102rem, #0e0e13 102rem);
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 102rem, #0e0e13 102rem);
}

/* Panel logowania w menu – kolumna po prawej od białego menu (jak zakładka).
 * z-index > .menu-panel (11000), żeby na wąskim ekranie (oba full width) logowanie było nad menu. */
.menu-account-panel {
    position: fixed;
    top: 0;
    left: 50rem;
    width: 52rem;
    max-width: calc(100vw - 50rem);
    height: 100vh;
    z-index: 11020;
    background: #e2e2e2;
    padding: 13rem 6rem 4rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-16px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    scrollbar-color: var(--color-accent) #d8d8d8;
    scrollbar-width: thin;
    box-sizing: border-box;
}
.menu-account-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
.menu-account-panel::-webkit-scrollbar { width: var(--size-8); }
.menu-account-panel:hover::-webkit-scrollbar { width: var(--size-16); }
.menu-account-panel::-webkit-scrollbar-track { background: #d8d8d8; }
.menu-account-panel::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: var(--radius-sm); }
.menu-account-panel::-webkit-scrollbar-thumb:hover { background: var(--color-accent-hover); }
.menu-account-panel::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.menu-account-panel .account-panel-title {
    margin-bottom: 2rem;
}
.menu-account-panel .menu-account-panel__form {
    margin-bottom: 2rem;
}
.menu-account-panel .menu-account-panel__form .woocommerce-notices-wrapper {
    margin-bottom: 1.5rem;
}
.menu-account-panel .woocommerce-form-login .form-row {
    margin: 0 0 2rem;
}
.menu-account-panel .woocommerce-form-login label {
    display: block;
    font-size: var(--font-size-body-sm);
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
    font-weight: 400;
}
.menu-account-panel .woocommerce-form-login .input-text,
.menu-account-panel .woocommerce-form-login input[type="password"],
.menu-account-panel .woocommerce-form-login input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--color-text);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--font-size-body-sm);
    background: #fff;
    color: var(--color-text);
}
.menu-account-panel .woocommerce-form-login .woocommerce-button,
.menu-account-panel .woocommerce-form-login button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0.5rem;
    padding: 1.25rem 2rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--color-text);
    color: #fff;
    font: inherit;
    font-size: var(--font-size-body-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
}
.menu-account-panel .woocommerce-form-login .woocommerce-button:hover,
.menu-account-panel .woocommerce-form-login button[type="submit"]:hover {
    opacity: 0.92;
}
.menu-account-panel .woocommerce-form-login .woocommerce-LostPassword,
.menu-account-panel .woocommerce-form-login .lost_password {
    display: none;
}
.menu-account-panel__forgot,
.menu-account-panel__register,
.menu-account-panel__full {
    margin: 0 0 1.5rem;
    font-size: var(--font-size-body-sm);
}
.menu-account-panel__forgot a,
.menu-account-panel__register a,
.menu-account-panel__full a {
    color: var(--color-accent);
    text-decoration: underline;
}
.menu-account-panel__forgot a:hover,
.menu-account-panel__register a:hover,
.menu-account-panel__full a:hover {
    color: var(--color-accent-hover);
}
.menu-account-panel #loginform p {
    margin-bottom: 1.5rem;
}
.menu-account-panel #loginform label {
    display: block;
    font-size: var(--font-size-body-sm);
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}
.menu-account-panel #loginform input[type="text"],
.menu-account-panel #loginform input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--color-text);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--font-size-body-sm);
    background: #fff;
}
.menu-account-panel #loginform input[type="submit"] {
    width: 100%;
    padding: 1.25rem 2rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--color-text);
    color: #fff;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}
.menu-panel .nav a.nav-item-featured.hgv-offcanvas-account-trigger.is-active,
.menu-panel .nav a.nav-item-featured.hgv-offcanvas-account-trigger.is-active:hover {
	font-weight: 500;
}

.menu-account-panel--logged-in .menu-account-panel__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.menu-account-panel--logged-in .menu-account-panel__nav a {
    display: block;
    padding: 1.4rem 0;
    border-bottom: 1px solid rgba(14,14,19,0.1);
    font-size: var(--font-size-body);
    color: var(--color-text);
    text-decoration: none;
}
.menu-account-panel--logged-in .menu-account-panel__nav a:hover {
    color: var(--color-accent);
}
.menu-account-panel--logged-in .menu-account-panel__nav a.menu-account-panel__logout {
    margin-top: 2rem;
    border-bottom: none;
    color: var(--color-text-muted);
    font-size: var(--font-size-body-sm);
}

body.menu-account-open .menu-backdrop {
    left: 102rem;
}
body.menu-account-open .header::before {
    mask-image: linear-gradient(to right, transparent 0, transparent 102rem, #0e0e13 102rem);
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 102rem, #0e0e13 102rem);
}
body.menu-account-open .header.scrolled::before {
    mask-image: linear-gradient(to right, transparent 0, transparent 102rem, #0e0e13 102rem);
    -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 102rem, #0e0e13 102rem);
}

.menu-panel .nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}

.menu-panel .nav-section-panel {
    margin-top: auto;
    padding-top: 3rem;
    border-top: 1px solid rgba(14, 14, 19, 0.1);
}

.menu-panel .nav .nav-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.menu-panel .nav .nav-section-featured {
    margin-bottom: 1rem;
}

.menu-panel .nav a {
    display: block;
    padding: 2rem 0 1rem 1.5rem;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 400;
    font-size: 2.8rem;
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
}

.menu-panel .nav a:hover {
    background: #B3C7CE;
    color: var(--color-text);
}

.menu-panel .nav .nav-section:not(.nav-section-featured) a:hover {
    color: var(--color-text);
    -webkit-backdrop-filter: blur(32px);
    backdrop-filter: blur(32px);
    background-color: rgba(148, 149, 152, 0.18);
}

.menu-panel .nav .nav-section:not(.nav-section-featured) a {
    padding: var(--space-10) 0 var(--space-10) var(--space-12);
}

.menu-panel .nav a.nav-item-featured {
    font-size: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 0.5rem;
}

.menu-panel .nav a.nav-item-featured:hover {
    background: transparent;
}

.menu-panel .nav a.nav-item-featured::after {
    content: '';
    flex-shrink: 0;
    width: var(--size-24);
    height: var(--size-24);
    background: var(--icon-chevron-right) no-repeat center;
    background-size: var(--size-24) var(--size-24);
    transition: transform var(--transition);
}

.menu-panel .nav a.nav-item-featured:hover::after {
    transform: translateX(6px);
}

.menu-panel .nav a.nav-item-featured.is-active::after,
.menu-panel .nav a.nav-item-featured.is-active:hover::after {
    transform: translateX(12px);
}

.menu-panel .nav a.nav-item-featured--no-arrow::after,
.menu-panel .nav a.nav-item-featured--no-arrow:hover::after {
    display: none;
}

.menu-panel .nav .btn-primary {
    margin-top: var(--space-8);
    width: 100%;
    max-width: 25rem;
}

/*
 * Dwa źródła listy: sztywny blok .nav-section-featured (wszystkie linki ze strzałką)
 * oraz .nav-section-wp-menu — wtedy widać podwójne „Produkty / Usługi / Sklep”.
 * Ukrywamy „featured”, gdy zaraz obok jest menu WordPress (często motyw potomny / stary kod).
 */
.menu-panel .nav .nav-section-featured:has(+ .nav-section-wp-menu) {
    display: none;
}
.menu-panel .nav .nav-section-wp-menu + .nav-section-featured {
    display: none;
}

.menu-panel .nav .hgv-offcanvas-menu-fallback-notice p {
    margin: 0 0 2rem;
    font-size: 2rem;
    line-height: 1.4;
    color: var(--color-text-muted, #666);
}

/* Menu WordPress w panelu (Motyw → Menu → „Main Menu”) */
/* Domyślne ul.sub-menu pod poziomem głównym — ukryte; podstrony są w panelu po prawej (.hgv-offcanvas-submenu). */
.menu-panel .nav-section-wp-menu ul.menu.hgv-offcanvas-wp > li.menu-item-has-children > ul.sub-menu {
    display: none;
}

.menu-panel .nav .nav-section-wp-menu .menu.hgv-offcanvas-wp {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu-panel .nav .nav-section-wp-menu .menu.hgv-offcanvas-wp > li {
    margin: 0;
}
.menu-panel .nav .nav-section-wp-menu .menu.hgv-offcanvas-wp > li > a {
    display: block;
    padding: var(--space-10) 0 var(--space-10) var(--space-12);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 400;
    font-size: 2.8rem;
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
}
.menu-panel .nav .nav-section-wp-menu .menu.hgv-offcanvas-wp > li > a:hover {
    color: var(--color-text);
    -webkit-backdrop-filter: blur(32px);
    backdrop-filter: blur(32px);
    background-color: rgba(148, 149, 152, 0.18);
}
.menu-panel .nav .nav-section-wp-menu .menu.hgv-offcanvas-wp .sub-menu {
    list-style: none;
    margin: 0 0 var(--space-8);
    padding: 0 0 0 var(--space-12);
}
.menu-panel .nav .nav-section-wp-menu .menu.hgv-offcanvas-wp .sub-menu a {
    display: block;
    padding: 1.2rem 0 1.2rem var(--space-12);
    font-size: 2.2rem;
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
}
.menu-panel .nav .nav-section-wp-menu .menu.hgv-offcanvas-wp .sub-menu a:hover {
    background: rgba(148, 149, 152, 0.12);
    color: var(--color-text);
}

/* Pozycje z podmenu — chevron jak dawniej przy „Produkty / Usługi / Sklep” */
.menu-panel .nav .nav-section-wp-menu .menu.hgv-offcanvas-wp > li.menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 0.5rem;
}
.menu-panel .nav .nav-section-wp-menu .menu.hgv-offcanvas-wp > li.menu-item-has-children > a::after {
    content: '';
    flex-shrink: 0;
    width: var(--size-24);
    height: var(--size-24);
    background: var(--icon-chevron-right) no-repeat center;
    background-size: var(--size-24) var(--size-24);
    transition: transform var(--transition);
}
.menu-panel .nav .nav-section-wp-menu .menu.hgv-offcanvas-wp > li.menu-item-has-children > a:hover {
    background: transparent;
    color: var(--color-text);
}
.menu-panel .nav .nav-section-wp-menu .menu.hgv-offcanvas-wp > li.menu-item-has-children > a:hover::after {
    transform: translateX(6px);
}

/* Druga kolumna (szara): ta sama szerokość co białe menu; nie rozciąga się na resztę viewportu (makietą HGV). */
.hgv-offcanvas-submenu-bg {
    position: fixed;
    top: 0;
    bottom: 0;
    left: var(--hgv-submenu-left, var(--hgv-submenu-left-fallback));
    width: var(--hgv-submenu-left, var(--hgv-submenu-left-fallback));
    right: auto;
    z-index: 10995;
    box-sizing: border-box;
    background: #e8e9eb;
    background-image: linear-gradient(180deg, #ececee 0%, #e2e3e6 100%);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease,
        visibility 0.3s,
        left 0.2s ease,
        width 0.2s ease;
}
body.menu-open .hgv-offcanvas-submenu-bg.is-active {
    opacity: 1;
    visibility: visible;
}

/* Karty: ten sam „pas” co .hgv-offcanvas-submenu-bg (szerokość = pierwsza kolumna). */
.hgv-offcanvas-submenu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: var(--hgv-submenu-left, var(--hgv-submenu-left-fallback));
    width: var(--hgv-submenu-left, var(--hgv-submenu-left-fallback));
    right: auto;
    z-index: 11010;
    box-sizing: border-box;
    padding: 12rem 4rem 6rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: transparent;
    transform: translateX(100%);
    visibility: hidden;
    transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.35s,
        left 0.2s ease,
        width 0.2s ease;
}
.hgv-offcanvas-submenu.is-active {
    transform: translateX(0);
    visibility: visible;
}

/* ── Desktop: cały szary moduł (tło + karty) wyjeżdża WOLNO, ZZA białego panelu menu ──
   Karty schodzą pod biały panel (.menu-panel z-index 11000), więc moduł wyłania się spod
   białego tła, a nie przejeżdża po wierzchu. Telefon: zachowanie domyślne (rozwiązane osobno). */
@keyframes hgv-submenu-module-in {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
@keyframes hgv-cards-appear {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (min-width: 769px) {
    /* Animuje się SAMO szare tło — wyjeżdża wolno zza białego panelu menu. */
    .hgv-offcanvas-submenu-bg { transform: translateX(-100%); }
    body.menu-open .hgv-offcanvas-submenu-bg.is-active {
        animation: hgv-submenu-module-in 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    /* Karty pojawiają się (fade in) — opóźnienie 0,1s. */
    .hgv-offcanvas-submenu.is-active .hgv-offcanvas-submenu__cards {
        animation: hgv-cards-appear 0.3s ease 0.1s backwards;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.menu-open .hgv-offcanvas-submenu-bg.is-active,
    .hgv-offcanvas-submenu.is-active { animation: none; }
}
.menu-panel .menu.hgv-offcanvas-wp > li.menu-item-has-children.is-submenu-open > a.hgv-offcanvas-branch {
    font-weight: 500;
}
/* Kontener kart na pełną szerokość szarej kolumny (kolumna już dopasowana w CSS wyżej). */
.hgv-offcanvas-submenu__inner {
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}
.hgv-offcanvas-submenu__cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.hgv-offcanvas-card-item {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

/* Karty podmenu — jak .menu-product-item (obraz edge-to-edge + tytuł na dole) */
.hgv-offcanvas-submenu .hgv-offcanvas-card.menu-product-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    isolation: isolate;
    min-height: 11rem;
    aspect-ratio: 16 / 10;
    padding: 0;
    overflow: hidden;
    border: none;
    outline: none;
    border-radius: 1.25rem;
    color: #fff;
    text-decoration: none;
    background-color: #0e0e13;
    background-image: var(--hgv-card-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 4px 20px rgba(14, 14, 19, 0.12);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.hgv-offcanvas-submenu .hgv-offcanvas-card.menu-product-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(to top, rgba(14, 14, 19, 0.78) 0%, rgba(14, 14, 19, 0.28) 45%, transparent 72%);
    pointer-events: none;
}
.hgv-offcanvas-submenu .hgv-offcanvas-card.menu-product-item:hover {
    transform: translateY(-3px);
    filter: none;
    box-shadow: 0 12px 36px rgba(14, 14, 19, 0.18);
}
.hgv-offcanvas-submenu .hgv-offcanvas-card.menu-product-item .hgv-offcanvas-card__img,
.hgv-offcanvas-submenu .hgv-offcanvas-card.menu-product-item img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center;
    display: block;
    border: none;
    border-radius: 0;
}
.hgv-offcanvas-submenu .hgv-offcanvas-card.menu-product-item .hgv-offcanvas-card__title,
.hgv-offcanvas-submenu .hgv-offcanvas-card.menu-product-item h3 {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin: 0;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    padding: 1.5rem 1.25rem 1.35rem 1.5rem;
    font-size: 2.4rem;
    font-weight: 400;
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    color: #fff;
}
.hgv-offcanvas-submenu .hgv-offcanvas-card.menu-product-item::after {
    display: none;
}
.hgv-offcanvas-submenu .hgv-offcanvas-card.menu-product-item .hgv-offcanvas-card__title::after,
.hgv-offcanvas-submenu .hgv-offcanvas-card.menu-product-item h3::after {
    content: '';
    flex-shrink: 0;
    width: var(--size-24);
    height: var(--size-24);
    background: var(--icon-chevron-right-white) no-repeat center;
    background-size: var(--size-24) var(--size-24);
    opacity: 0.95;
}

@media (min-width: 993px) {
    .hgv-offcanvas-submenu-bg.is-active {
        background: #e2e2e2;
        background-image: none;
    }
    .hgv-offcanvas-submenu {
        padding: 13rem 6rem 4rem;
    }
}

@media (max-width: 768px) {
    .hgv-offcanvas-submenu .hgv-offcanvas-card.menu-product-item .hgv-offcanvas-card__title,
    .hgv-offcanvas-submenu .hgv-offcanvas-card.menu-product-item h3 {
        font-size: 2.6667rem;
    }
}
/* Przyciemnienie dopiero za dwiema kolumnami (biała + szara tej samej szerokości). */
.menu-panel.menu-panel--drilldown .menu-backdrop.is-open {
    left: calc(2 * var(--hgv-submenu-left, var(--hgv-submenu-left-fallback)));
    right: 0;
}

/*
 * DevTools: w <main id="content"> → <article> → <header class="header"> jest ::before (pasek ~150px)
 * oraz <h1 class="entry-title"> — to NIE jest #header z header.php (ten ma id="header" i siedzi nad #container).
 * Ktoś nadał nagłówkowi wpisu klasę „header”, więc dziedziczy style paska nawigacji. Wyłączamy tylko ten duplikat.
 */
main#content article header.header::before,
#content article header.header::before,
main#content article header.header.scrolled::before,
#content article header.header.scrolled::before {
    display: none;
    content: none;
    mask-image: none;
    -webkit-mask-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

main#content article header.header h1.entry-title,
#content article header.header h1.entry-title {
    display: none;
}

/* Modal „Dodano do koszyka” — jak homepage.html (.product-cart-modal). */
body.product-cart-modal-open,
body.hgv-atc-popup-open {
    overflow: hidden;
}
#hgv-atc-popup.product-cart-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.4rem;
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.38s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0.38s step-end;
}
#hgv-atc-popup.product-cart-modal.is-open {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.38s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0s step-start;
}
#hgv-atc-popup .product-cart-modal__backdrop {
    position: absolute;
    inset: 0;
    background: linear-gradient(165deg, rgba(20, 22, 26, 0.52) 0%, rgba(12, 14, 18, 0.62) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.4s ease;
}
#hgv-atc-popup.product-cart-modal.is-open .product-cart-modal__backdrop {
    opacity: 1;
}
#hgv-atc-popup .product-cart-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 52rem;
    background: var(--color-bg, #fff);
    border-radius: var(--radius-xl, 12px);
    box-shadow:
        0 4px 6px rgba(14, 14, 19, 0.04),
        0 24px 48px rgba(14, 14, 19, 0.12),
        0 0 0 1px rgba(14, 14, 19, 0.05);
    padding: 3.2rem 3.6rem 3rem;
    box-sizing: border-box;
    transform: translateY(1.2rem) scale(0.985);
    opacity: 0;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.38s ease;
}
#hgv-atc-popup.product-cart-modal.is-open .product-cart-modal__dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}
#hgv-atc-popup .product-cart-modal__close {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: var(--color-text-muted, #6b6b6b);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}
#hgv-atc-popup .product-cart-modal__close:hover {
    color: var(--color-text, #111);
    background: var(--color-bg-alt, #f0f0f0);
}
#hgv-atc-popup .product-cart-modal__close svg {
    width: 2.2rem;
    height: 2.2rem;
}
#hgv-atc-popup .product-cart-modal__top {
    display: flex;
    flex-direction: row;
    gap: 2.4rem;
    align-items: flex-start;
    margin-bottom: 3rem;
    padding-right: 2rem;
}
#hgv-atc-popup .product-cart-modal__thumb {
    flex: 0 0 14rem;
    width: 14rem;
    aspect-ratio: 1;
    border-radius: var(--radius-lg, 10px);
    overflow: hidden;
    background: var(--color-bg-alt, #e8e8e8);
    box-shadow: 0 2px 12px rgba(14, 14, 19, 0.06);
}
#hgv-atc-popup .product-cart-modal__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#hgv-atc-popup .product-cart-modal__intro {
    flex: 1;
    min-width: 0;
    padding-top: 0.4rem;
}
#hgv-atc-popup .product-cart-modal__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.2rem;
    font-size: var(--font-size-caption, 1.2rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-accent, #057ed5);
}
#hgv-atc-popup .product-cart-modal__badge svg {
    flex-shrink: 0;
}
#hgv-atc-popup .product-cart-modal__title {
    font-size: var(--font-size-h4, 3rem);
    font-weight: 600;
    color: var(--color-text, #111);
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
#hgv-atc-popup .product-cart-modal__meta {
    margin: 0;
    font-size: var(--font-size-body-sm, 1.4rem);
    color: var(--color-text-muted, #6b6b6b);
    line-height: 1.55;
    font-weight: 500;
}
#hgv-atc-popup .product-cart-modal__meta strong {
    color: var(--color-text, #111);
    font-weight: 600;
}
#hgv-atc-popup .product-cart-modal__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem 2rem;
}
#hgv-atc-popup .product-cart-modal__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 5.2rem;
    padding: 0 2.4rem;
    font-family: inherit;
    font-size: var(--font-size-body-sm, 1.4rem);
    font-weight: 600;
    letter-spacing: var(--letter-spacing, 0);
    border-radius: var(--radius-md, 8px);
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
#hgv-atc-popup .product-cart-modal__btn--secondary {
    border: 1px solid rgba(14, 14, 19, 0.18);
    background: #fff;
    color: var(--color-text, #111);
}
#hgv-atc-popup .product-cart-modal__btn--secondary:hover {
    border-color: var(--color-text, #111);
    background: var(--color-bg-alt, #f0f0f0);
}
#hgv-atc-popup .product-cart-modal__btn--primary {
    border: none;
    background: var(--color-text, #111);
    color: #fff;
    box-shadow: 0 2px 8px rgba(14, 14, 19, 0.12);
}
#hgv-atc-popup .product-cart-modal__btn--primary:hover {
    background: #333;
    color: #fff;
}
@media (max-width: 600px) {
    #hgv-atc-popup.product-cart-modal {
        padding: 1.6rem;
    }
    #hgv-atc-popup .product-cart-modal__dialog {
        padding: 2.8rem 2rem 2.4rem;
    }
    #hgv-atc-popup .product-cart-modal__top {
        flex-direction: column;
        align-items: stretch;
        padding-right: 0;
    }
    #hgv-atc-popup .product-cart-modal__thumb {
        flex-basis: auto;
        width: 100%;
        max-width: 20rem;
    }
    #hgv-atc-popup .product-cart-modal__actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    #hgv-atc-popup .product-cart-modal__btn {
        width: 100%;
    }
}

/*
 * Testowy kwadrat ATC ze starej wersji motywu — jeśli serwer/cache nadal je wypuszcza,
 * nie może zasłaniać ceny ani treści (#hgv-atc-popup go nie używa).
 */
#hgv-atc-square-wrap,
#hgv-atc-square-backdrop,
#hgv-atc-square {
    display: none;
    visibility: hidden;
    pointer-events: none;
}

/*
 * Podstrony (.header--light): w flow, nie nad treścią.
 * Wyższa specyficzność niż .header { position: absolute } na górze pliku
 * (style.css ładuje się wcześniej — sama klasa .header--light przegrywała).
 */
header#header.header.header--light,
.header.header--light {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
}

/* Mobile: dwa wiersze — górny czarny pasek (PL/EN po lewej, konto+koszyk po prawej,
   białe ikony) + dolny wiersz (MENU po lewej, logo HGV wyśrodkowane). */
@media (max-width: 768px) {
    .header {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 0.9rem 1.25rem;
        padding: 8px 5% 1.25rem;   /* 8px przestrzeni nad nagłówkiem; niżej czarny pasek */
    }

    /* Górny czarny pasek — pełna szerokość (full-bleed do krawędzi i do samej góry) */
    .header-right {
        grid-row: 1;
        grid-column: 1 / -1;
        display: flex;
        flex: none;
        align-items: center;
        justify-content: flex-end;
        gap: 0.75rem;
        background: #0e0e13;
        margin: 0 -5%;
        padding: max(1.6rem, env(safe-area-inset-top, 0px)) 5% 1.1rem;
    }
    .header-right .header-lang-switcher {
        order: 0;
        margin-right: auto;   /* PL/EN dosunięte do lewej, ikony zostają po prawej */
    }
    .header-right .header-account,
    .header-right .header-cart {
        order: 1;
        color: #fff;
    }
    .header-right .header-account svg,
    .header-right .header-cart svg {
        color: #fff;
        stroke: #fff;
    }
    /* Przełącznik języka czytelny na czarnym pasku */
    .header-right .footer-lang-switch {
        border: 1px solid rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.08);
    }
    .header-right .footer-lang-option {
        color: rgba(255, 255, 255, 0.75);
    }
    .header-right .footer-lang-option.is-active {
        background-color: #fff;
        color: #0a0a0d;
    }

    /* Drugi wiersz: MENU po lewej, logo wyśrodkowane na całej szerokości */
    .header-left {
        grid-row: 2;
        grid-column: 1;
        justify-self: start;
    }

    .header-logo {
        grid-row: 2;
        grid-column: 1 / -1;
        justify-self: center;
        justify-content: center;
    }

    /* Wizytówka (bez sklepu): brak koszyka i ukryte konto → górny pasek byłby pusty.
       Jeden wiersz: MENU po lewej, HGV wyśrodkowane, PL/EN dosunięte do prawej krawędzi. */
    .header.header--vitrine {
        grid-template-rows: auto;
    }
    .header--vitrine .header-right {
        display: none;
    }
    .header--vitrine .header-left {
        grid-row: 1;
        grid-column: 1;
    }
    /* header-logo znika jako box (display:contents) — logo i język stają się osobnymi
       elementami gridu: logo w środku (col 2), język przy prawej krawędzi (col 3). */
    .header--vitrine .header-logo {
        display: contents;
    }
    .header--vitrine .header-logo .logo-link {
        grid-row: 1;
        grid-column: 2;
        justify-self: center;
    }
    .header--vitrine .header-lang-switcher--logo {
        grid-row: 1;
        grid-column: 3;
        justify-self: end;
    }

    body.menu-open .header-logo {
        opacity: 0;
        pointer-events: none;
    }

    .menu-panel,
    .account-panel {
        top: 7rem;
        height: calc(100vh - 7rem);
    }

    .menu-backdrop,
    .account-backdrop {
        top: 7rem;
    }
}