.mobile-nav,
.mobile-topbar,
.mobile-menu-contact {
    display: none;
}

@media only screen and (max-width: 1024px) {
    html { scroll-padding-top: calc(88px + env(safe-area-inset-top, 0px)); scroll-padding-bottom: calc(126px + env(safe-area-inset-bottom, 0px)); }
    body { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
    body.mobile-menu-open { overflow: hidden; }
    .main { padding-top: calc(72px + env(safe-area-inset-top, 0px)); }

    /* Nocturne: one quiet floating object, clear labels and a soft active capsule. */
    .mobile-nav { display:block; position:fixed; inset:auto 14px calc(16px + env(safe-area-inset-bottom, 0px)); z-index:30; pointer-events:none; }
    .mobile-nav__inner { position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; gap:2px; max-width:480px; margin:0 auto; padding:6px; border:1px solid #315346; border-radius:25px; background:#183e34; box-shadow:0 12px 26px -13px #142c2477; pointer-events:auto; isolation:isolate; }
    .mobile-nav__indicator { position:absolute; top:6px; bottom:6px; left:6px; width:calc((100% - 20px) / 5); border-radius:18px; background:#e7eddf; transform:translateX(calc(var(--mobile-active-index) * (100% + 2px))); pointer-events:none; }
    .mobile-nav__item { position:relative; z-index:1; display:flex; min-width:0; min-height:56px; padding:6px 2px; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-radius:18px; color:#c2d0c2; text-decoration:none; -webkit-tap-highlight-color:transparent; }
    .mobile-nav__item:hover { color:#f3f5eb; text-decoration:none; }
    .mobile-nav__item.is-current { color:#214d39; }
    .mobile-nav__item:focus-visible { outline:2px solid #b2c89d; outline-offset:-3px; text-decoration:none; }
    .mobile-nav__item.is-current:focus-visible { outline-color:#397754; }
    .mobile-nav__icon { position:relative; display:flex; width:24px; height:24px; align-items:center; justify-content:center; flex-shrink:0; }
    .mobile-nav__icon svg { display:block; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
    .mobile-nav__label { font-family:'Onest',Arial,sans-serif; font-size:13px; font-weight:500; line-height:16px; white-space:nowrap; }
    .mobile-nav__badge { position:absolute; top:-3px; left:17px; min-width:15px; padding:1px 3px; border:1.5px solid #183e34; border-radius:10px; background:#c8d8b7; color:#234a35; font-size:9px; font-weight:600; line-height:11px; text-align:center; }
    .mobile-nav__points { position:absolute; top:-15px; right:0; max-width:calc(100% + 12px); padding:4px 7px; border:2px solid #f9f9f9; border-radius:12px; background:#e4ead8; color:#2b5138; font-size:10px; font-weight:500; line-height:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }

    /* A separate mobile row keeps the desktop header and its controls intact. */
    .header { padding:env(safe-area-inset-top, 0px) 0 0; background:#f9f9f9; }
    .header > .container { max-width:none; padding:0; padding-left:max(14px, env(safe-area-inset-left, 0px)); padding-right:max(14px, env(safe-area-inset-right, 0px)); }
    .header-row { gap:0; }
    .header-top { display:none; }
    .mobile-topbar { position:relative; z-index:26; display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; height:72px; background:#f9f9f9; }
    .mobile-topbar__button { position:relative; display:flex; width:44px; height:44px; padding:10px; align-items:center; justify-content:center; color:#163f36; background:none; border:0; border-radius:8px; }
    .mobile-topbar__button svg { width:24px; height:24px; }
    .mobile-topbar__button:focus-visible,.mobile-topbar__logo:focus-visible { outline:2px solid #0d8064; outline-offset:2px; }
    .mobile-topbar__logo { display:flex; justify-content:center; align-items:center; justify-self:center; min-height:44px; }
    .mobile-topbar__logo img { width:156px; max-width:100%; height:42px; object-fit:contain; }
    .mobile-topbar__burger span { position:absolute; left:12px; width:20px; height:1.5px; border-radius:2px; background:currentColor; transition:transform .22s,top .22s; }
    .mobile-topbar__burger span:first-child { top:17px; }
    .mobile-topbar__burger span:last-child { top:25px; }
    .mobile-topbar__burger[aria-expanded=true] span:first-child { top:21px; transform:rotate(45deg); }
    .mobile-topbar__burger[aria-expanded=true] span:last-child { top:21px; transform:rotate(-45deg); }
    .header-bottom { height:100dvh; padding:calc(92px + env(safe-area-inset-top, 0px)) 24px calc(116px + env(safe-area-inset-bottom, 0px)); align-items:stretch; justify-content:flex-start; gap:24px; background:#f9f9f9; overscroll-behavior:contain; }
    .header-bottom .header-city { position:static; width:auto; }
    .mobile-menu-contact { display:flex; gap:15px; flex-direction:column; align-items:flex-start; border-top:1px solid #dce2d7; padding-top:22px; }
    .mobile-menu-contact button { min-height:44px; padding:12px 20px; background:#183e34; color:#f7f6ef; font-family:inherit; font-size:13px; border:0; }
    .floating-configurator,.configurator-widget { display:none!important; }
}

@media only screen and (max-width:350px) {
    .mobile-nav { left:12px; right:12px; }
    .mobile-nav__label { font-size:12px; letter-spacing:-.02em; }
    .mobile-nav__points { font-size:9px; padding:4px 5px; }
    .mobile-topbar__logo img { width:144px; }
}
@media(prefers-reduced-motion:reduce) { .mobile-topbar__burger span { transition:none; } }

@media(max-width:1024px){.mobile-nav__points{overflow:hidden;text-overflow:ellipsis}.mobile-nav__item[data-mobile-wishlist] .mobile-nav__badge{background:#e7eddf}}

@media(max-width:1024px){
.mobile-nav__item{min-height:70px;padding:8px 1px 6px;justify-content:flex-start}
.mobile-nav__label{max-width:100%;white-space:normal;hyphens:manual;text-align:center}
}
@media(max-width:1024px){
.mobile-nav__inner{align-items:stretch}
.mobile-nav__item[data-mobile-wishlist] .mobile-nav__label{font-size:12px;letter-spacing:-.02em}
}

/* Keep count numerals centered inside a stable badge box. */
@media(max-width:1024px){
    .mobile-nav__badge{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:18px;height:18px;padding:0 4px;font:500 10px/1 'Onest',Arial,sans-serif;font-variant-numeric:tabular-nums;text-align:center}
}

/* Selected colour study 02 — soft graphite. */
@media(max-width:1024px){
.mobile-nav__inner{background:#252525;border-color:transparent;border-radius:22px;box-shadow:0 8px 22px #0000000b}
.mobile-nav__indicator{background:#414141;border-radius:16px}
.mobile-nav__item{min-height:66px;padding:8px 1px 7px;justify-content:center;gap:6px;border-radius:16px;color:#cecece}
.mobile-nav__item:hover,.mobile-nav__item.is-current{color:#fff}
.mobile-nav__item:focus-visible,.mobile-nav__item.is-current:focus-visible{outline-color:#eee}
.mobile-nav__badge,.mobile-nav__item[data-mobile-wishlist] .mobile-nav__badge{background:#e9e9e7;color:#222;border-color:#252525}
.mobile-nav__points{background:#e9e9e7;color:#222}
}
