galali-shoptet 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "galali-shoptet",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Custom CSS for Galali Shoptet theme (designshop.galali.cz)",
   "main": "style.css",
   "style": "style.css",

package/style.css

@@ -20,6 +20,7 @@
     --gl-gutter: 60px;
     --gl-page-max: 1920px;
     --gl-content-max: 1800px;
+    --gl-section-gap: 130px;
     --gl-font-body: "Neue Haas Grotesk Text Pro", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
     --gl-font-ui: "Inter", "Neue Haas Grotesk Text Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
     --gl-size-ui: 20px;
@@ -125,6 +126,12 @@ body {
     opacity: 1;
     text-decoration: none;
 }
+.top-navigation-bar .top-navigation-contacts a:focus-visible,
+.top-navigation-bar ul.top-navigation-bar-menu > li > a:focus-visible,
+.top-navigation-bar .top-navigation-tools button.top-nav-button-login:focus-visible {
+    outline: 2px solid var(--gl-fg-1);
+    outline-offset: 4px;
+}
 .top-navigation-bar .top-navigation-contacts a span {
     display: inline;
 }
@@ -195,8 +202,9 @@ body {
     padding: 0;
     flex-shrink: 0;
 }
+/* Desktop: responsive-tools skrytý (mobile burger nepotřebný) */
 .top-navigation-bar .top-navigation-tools .responsive-tools {
-    display: none !important;
+    display: none;
 }
 .top-navigation-bar .top-navigation-tools button.top-nav-button-login,
 .top-navigation-bar .top-navigation-tools .top-nav-button {
@@ -245,6 +253,20 @@ header#header {
     margin: 0;
     padding: 0;
     height: auto;
+    transition: box-shadow .25s ease;
+}
+/* Sticky shadow při scrollu — animation-timeline: scroll() je supported v Chromium 115+
+   (designshop primárně desktop Chrome) */
+@supports (animation-timeline: scroll()) {
+    header#header {
+        animation: gl-header-shadow linear both;
+        animation-timeline: scroll(root);
+        animation-range: 0 200px;
+    }
+    @keyframes gl-header-shadow {
+        from { box-shadow: 0 0 0 rgba(0,0,0,0); }
+        to   { box-shadow: 0 2px 16px rgba(0,0,0,.08); }
+    }
 }
 
 header#header .container.navigation-wrapper {
@@ -382,6 +404,16 @@ header#header .navigation-buttons a[data-target="cart"]:hover {
     background: #1a1a1a;
     color: var(--gl-white);
 }
+header#header .navigation-buttons a.cart-count:focus-visible,
+header#header .navigation-buttons a[data-target="cart"]:focus-visible {
+    outline: 2px solid var(--gl-fg-1);
+    outline-offset: 3px;
+}
+/* Search input focus state — bez tohoto user neví že tam je */
+header#header .search-form:focus-within {
+    border-color: var(--gl-fg-1);
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
+}
 header#header .navigation-buttons a.cart-count::before {
     content: "";
     width: 22px;
@@ -436,6 +468,15 @@ header#header nav#navigation ul.menu-level-1 {
     padding: 0;
     list-style: none;
     background: transparent;
+    visibility: visible !important;
+}
+/* Vendor Shoptet skrývá menu položky přes visibility: hidden (na li úrovni) → force visible */
+header#header nav#navigation ul.menu-level-1 > li,
+header#header nav#navigation ul.menu-level-1 > li > a,
+header#header nav#navigation ul.menu-level-2,
+header#header nav#navigation ul.menu-level-2 > li,
+header#header nav#navigation ul.menu-level-2 > li > a {
+    visibility: visible !important;
 }
 header#header nav#navigation ul.menu-level-1 > li {
     display: flex;
@@ -474,6 +515,11 @@ header#header nav#navigation ul.menu-level-1 > li > a:focus {
     background: transparent;
     color: var(--gl-black);
 }
+header#header nav#navigation ul.menu-level-1 > li > a:focus-visible {
+    outline: 2px solid var(--gl-fg-1);
+    outline-offset: 4px;
+    opacity: 1;
+}
 header#header nav#navigation ul.menu-level-1 > li > a > b {
     font-weight: var(--gl-w-medium);
 }
@@ -505,12 +551,18 @@ header#header nav#navigation ul.menu-level-1 > li > a .submenu-arrow {
     transition: transform .2s;
 }
 
-/* --- Dropdown (menu-level-2 ≙ sqrl.dev .dd) --- */
+/* --- Dropdown (menu-level-2 ≙ sqrl.dev .dd) ---
+   POZOR: nepřepisuj display! Shoptet JS přepíná display:none/flex přes aria-expanded.
+   Když je menu otevřené, vendor dá display:flex → my jen převrátíme na column stack. */
 header#header nav#navigation ul.menu-level-1 > li > ul.menu-level-2 {
+    flex-direction: column !important;
+    flex-wrap: nowrap !important;
     position: absolute;
     top: 100%;
     left: 0;
-    min-width: 240px;
+    min-width: 260px;
+    width: max-content;
+    max-width: 360px;
     padding: 18px 22px;
     margin: 0;
     background: var(--gl-white);
@@ -520,7 +572,12 @@ header#header nav#navigation ul.menu-level-1 > li > ul.menu-level-2 {
     box-shadow: 0 6px 20px rgba(0, 0, 0, .04);
     list-style: none;
     z-index: 60;
-    /* viditelnost řídí Shoptet (aria-expanded / hover) — tady jen vzhled */
+}
+
+/* Skrýt menu-level-3 (vnořené pod-kategorie) — sqrl design má jen 2 úrovně */
+header#header nav#navigation ul.menu-level-3,
+header#header nav#navigation ul.menu-level-2 .has-more-items {
+    display: none !important;
 }
 
 /* Skrýt Shoptet "menu-image" placeholder (folder.svg) — sqrl.dev návrh nemá */
@@ -530,7 +587,9 @@ header#header nav#navigation ul.menu-level-2 .menu-image {
 }
 
 header#header nav#navigation ul.menu-level-2 > li {
-    display: block;
+    display: block !important;
+    width: 100% !important;
+    flex: 0 0 100% !important;
     margin: 0;
     padding: 0;
     background: none;
@@ -704,7 +763,7 @@ header#header nav#navigation ul.menu-level-3 > li > a:focus {
     width: 100%;
     height: 720px;
     margin: 0;
-    padding: 0 80px 0 120px;
+    padding: 0 var(--gl-gutter);
     box-sizing: border-box;
     background: transparent;
     position: static;
@@ -717,7 +776,7 @@ header#header nav#navigation ul.menu-level-3 > li > a:focus {
     padding: 0 !important;
 }
 
-/* Title — H1 ekvivalent (vendor pozicuje absolute, my static v copy sloupci) */
+/* Title — H1 ekvivalent (vendor pozicuje absolute + dává bílý border + box-shadow → odstraň všechno) */
 .content-wrapper.homepage-box.before-carousel .extended-banner-texts .extended-banner-title {
     position: static !important;
     display: block;
@@ -732,10 +791,12 @@ header#header nav#navigation ul.menu-level-3 > li > a:focus {
     line-height: 80px;
     letter-spacing: normal;
     text-transform: none;
-    background: transparent;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
 }
 
-/* Subtitle (taky vendor absolute → static) */
+/* Subtitle (taky vendor absolute → static + vendor border/shadow off) */
 .content-wrapper.homepage-box.before-carousel .extended-banner-texts .extended-banner-text {
     position: static !important;
     display: block;
@@ -748,7 +809,9 @@ header#header nav#navigation ul.menu-level-3 > li > a:focus {
     font-size: 26px;
     font-weight: var(--gl-w-regular);
     line-height: 30px;
-    background: transparent;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
 }
 
 /* CTA odkaz "Zobrazit produkt" — bílé tlačítko s černým textem (vendor má černý overlay) */
@@ -827,7 +890,7 @@ header#header nav#navigation ul.menu-level-3 > li > a:focus {
         grid-template-rows: 520px;
     }
     .content-wrapper.homepage-box.before-carousel .carousel-inner > .item > a > .extended-banner-texts {
-        padding: 0 40px 0 60px;
+        padding: 0 32px;
         gap: 20px;
     }
     .content-wrapper.homepage-box.before-carousel .extended-banner-texts .extended-banner-title {
@@ -885,27 +948,27 @@ header#header nav#navigation ul.menu-level-3 > li > a:focus {
 /* === Nakupte podle kategorií (pictos) === */
 /* ============================================ */
 
-/* Override Shoptet content/welcome wrapperů (kontejnery omezené na ~800-1418px),
-   aby naše sekce mohly vyplnit celou šířku stránky */
+/* Override Shoptet vnějších wrapperů (rozlomit theme max-width 1418px do full bleed).
+   POZOR: neaplikovat na `main.content` — to musí mít vlastní gutter + page-max centering. */
 .welcome > div,
 .welcome,
 .welcome-wrapper,
 .container.welcome-wrapper,
-div.container,
-.content-wrapper.container,
-div.content-wrapper.container,
-body .content-wrapper.container,
-.content-wrapper-in,
-main.content,
-main.content.content-wrapper-in {
+.content-wrapper.homepage-box.welcome-wrapper,
+.overall-wrapper > .content-wrapper.container:not(#content-wrapper):not(.homepage-box) {
     max-width: none !important;
     width: 100% !important;
     margin: 0 !important;
     padding: 0 !important;
 }
-.content-wrapper.homepage-box.welcome-wrapper {
-    padding: 0 !important;
+/* Vnitřní content-wrapper-in uvnitř welcome / content-wrapper.container — taky full width */
+.content-wrapper.homepage-box.welcome-wrapper > .content-wrapper-in,
+.overall-wrapper > .content-wrapper.container:not(#content-wrapper):not(.homepage-box) > .content-wrapper-in {
+    max-width: none !important;
+    width: 100% !important;
     margin: 0 !important;
+    padding: 0 !important;
+    display: block;
 }
 
 /* Sekce wrapper — .gutter section vložená přes HTML blok v adminu */
@@ -914,9 +977,19 @@ section.gutter {
     width: 100%;
     max-width: var(--gl-page-max);
     margin: 0 auto;
-    padding: 130px var(--gl-gutter) 0;
+    padding: var(--gl-section-gap) var(--gl-gutter) 0;
     background: transparent;
 }
+/* Vendor Shoptet .welcome > div > * dostává max-width: 800px → roztrhat */
+section.gutter .sec-head,
+section.gutter .pictos,
+section.gutter .sec-title,
+section.gutter .sec-link {
+    max-width: none !important;
+    width: 100%;
+}
+section.gutter .sec-link { width: auto; }
+section.gutter .sec-title { width: auto; }
 
 /* Hlavička sekce: nadpis vlevo, "Všechny kategorie" odkaz vpravo */
 section.gutter .sec-head {
@@ -1029,9 +1102,10 @@ section.gutter .picto:focus-visible {
     outline-offset: 4px;
 }
 
-/* Responsive — odvozeno ze sqrl.dev breakpointů */
+/* Responsive — odvozeno ze sqrl.dev breakpointů, --gl-section-gap se zmenšuje */
 @media (max-width: 1279px) {
-    section.gutter { padding: 96px 32px 0; }
+    :root { --gl-section-gap: 96px; }
+    section.gutter { padding: var(--gl-section-gap) 32px 0; }
     section.gutter .sec-head { margin-bottom: 36px; gap: 16px; flex-wrap: wrap; }
     section.gutter .sec-title { font-size: 40px; line-height: 42px; }
     section.gutter .sec-link { font-size: 16px; }
@@ -1042,7 +1116,8 @@ section.gutter .picto:focus-visible {
 }
 
 @media (max-width: 767px) {
-    section.gutter { padding: 64px 28px 0; }
+    :root { --gl-section-gap: 64px; }
+    section.gutter { padding: var(--gl-section-gap) 20px 0; }
     section.gutter .sec-head { margin-bottom: 24px; gap: 12px; }
     section.gutter .sec-title { font-size: 28px; line-height: 30px; }
     section.gutter .sec-link { font-size: 14px; gap: 10px; }
@@ -1057,18 +1132,19 @@ section.gutter .picto:focus-visible {
 /* === Akční zboží + Novinky (homepage produkty) === */
 /* ============================================ */
 
-/* main.content má 1418px theme limit — rozšířit na page-max */
+/* main.content má 1418px theme limit — rozšířit na page-max, ale s gutter L/R */
+main.content,
 main.content:not(.wide) {
     box-sizing: border-box;
     width: 100%;
     max-width: var(--gl-page-max);
     margin: 0 auto;
-    padding: 0 var(--gl-gutter);
+    padding: 0 var(--gl-gutter) !important;
 }
 
 /* Nadpis sekce (Shoptet renderuje jako div.h4) — stylujeme jako h2.sec-title */
 main.content > .homepage-group-title {
-    margin: 130px 0 60px;
+    margin: var(--gl-section-gap) 0 60px;
     padding: 0;
     font-family: var(--gl-font-ui);
     font-size: 56px;
@@ -1078,9 +1154,9 @@ main.content > .homepage-group-title {
     letter-spacing: normal;
     text-transform: none;
 }
-/* Druhý nadpis (Novinky) — menší top margin (sqrl má 80px) */
+/* Druhý nadpis (Novinky) — stejný gap jako ostatní sekce */
 main.content > .homepage-products-heading-2 {
-    margin-top: 80px;
+    margin-top: var(--gl-section-gap);
 }
 
 /* Mřížka produktů — 4 sloupce, gap 50/40 jako sqrl.dev */
@@ -1258,69 +1334,63 @@ main.content > .products.products-block > .product .price-final strong {
 footer#footer.footer {
     background: var(--gl-black);
     color: var(--gl-white);
-    margin: 140px 0 0;
+    margin: var(--gl-section-gap) 0 0;
     padding: 110px 0 40px;
     font-family: var(--gl-font-body);
     font-size: 16px;
     border: 0;
-    /* 2-col flex: brand (rows) | zákaznický servis (links-icons); bottom strip full width */
+    /* Jednoduchý flex: brand (60%) + servis (40%) + bottom strip plné šířky.
+       Vše v jednom inner wrapperu se 60px gutter. */
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
-    row-gap: 40px;
-}
-/* Sloupcové přiřazení sourozenců — footer.footer je flex parent */
-footer#footer > h2.sr-only {
-    flex: 0 0 100%;
-    order: 0;
+    row-gap: 60px;
+    column-gap: 0;
 }
-footer#footer > .container.footer-rows {
-    flex: 1 1 360px;
-    max-width: 60%;
+/* sr-only schovat (bere row v flexu jinak) */
+footer#footer.footer > h2.sr-only,
+footer#footer .sr-only {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
     margin: 0;
-    padding-left: var(--gl-gutter);
-    padding-right: 40px;
-    box-sizing: border-box;
-    order: 1;
+    padding: 0;
+    flex: 0 0 0 !important;
 }
-footer#footer > .container.footer-links-icons {
-    flex: 1 1 280px;
-    max-width: 40%;
-    margin: 0;
-    padding-left: 40px;
-    padding-right: var(--gl-gutter);
+/* Brand sloupec — 60% šířky, padding-left = gutter, padding-right = vnitřní gap */
+footer#footer.footer > .container.footer-rows {
+    flex: 0 1 60%;
     box-sizing: border-box;
-    order: 2;
+    width: 100% !important;
+    max-width: none !important;
+    margin: 0 !important;
+    padding: 0 40px 0 var(--gl-gutter) !important;
+    background: transparent;
+    border: 0;
 }
-footer#footer > .container.footer-bottom {
-    flex: 0 0 100%;
-    margin: 0;
-    padding-left: var(--gl-gutter);
-    padding-right: var(--gl-gutter);
+/* Zákaznický servis — 40%, padding-right = gutter */
+footer#footer.footer > .container.footer-links-icons {
+    flex: 0 1 40%;
     box-sizing: border-box;
-    order: 3;
-}
-
-/* Reset Shoptet sr-only nadpisu */
-footer#footer .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-    white-space: nowrap;
+    width: 100% !important;
+    max-width: none !important;
+    margin: 0 !important;
+    padding: 0 var(--gl-gutter) 0 40px !important;
+    background: transparent;
     border: 0;
 }
-
-/* Wrapper kontejnerů — full width až do page-max, padding 60px */
-footer#footer .container.footer-rows,
-footer#footer .container.footer-links-icons,
-footer#footer .container.footer-bottom {
+/* Spodní strip — plná šířka, gutter L/R */
+footer#footer.footer > .container.footer-bottom {
+    flex: 0 0 100%;
     box-sizing: border-box;
-    width: 100%;
-    max-width: var(--gl-page-max);
-    margin: 0 auto;
-    padding: 0 var(--gl-gutter);
+    width: 100% !important;
+    max-width: none !important;
+    margin: 0 !important;
+    padding: 30px var(--gl-gutter) 0 !important;
     background: transparent;
     border: 0;
 }
@@ -1574,26 +1644,32 @@ footer#footer .footer-bottom .copyright a.cookies-settings:focus-visible {
     outline-offset: 4px;
 }
 
-/* Responsive footer */
+/* Responsive footer — používá `footer#footer.footer` selektor stejné specificity */
 @media (max-width: 1279px) {
-    footer#footer { padding: 80px 0 60px; margin-top: 100px; }
-    footer#footer > .container.footer-rows { padding-left: var(--gl-gutter); padding-right: 32px; }
-    footer#footer > .container.footer-links-icons { padding-left: 32px; padding-right: var(--gl-gutter); }
-    footer#footer > .container.footer-bottom { margin-top: 32px; }
+    footer#footer.footer { padding: 80px 0 40px; margin-top: 100px; row-gap: 40px; }
+    footer#footer.footer > .container.footer-rows { padding: 0 24px 0 32px !important; }
+    footer#footer.footer > .container.footer-links-icons { padding: 0 32px 0 24px !important; }
+    footer#footer.footer > .container.footer-bottom { padding: 24px 32px 0 !important; }
 }
 @media (max-width: 767px) {
-    footer#footer { padding: 60px 0 40px; margin-top: 80px; row-gap: 32px; }
-    footer#footer > .container.footer-rows,
-    footer#footer > .container.footer-links-icons,
-    footer#footer > .container.footer-bottom {
+    footer#footer.footer {
+        padding: 60px 0 32px;
+        margin-top: 80px;
+        row-gap: 32px;
+        flex-direction: column;
+    }
+    footer#footer.footer > .container.footer-rows,
+    footer#footer.footer > .container.footer-links-icons,
+    footer#footer.footer > .container.footer-bottom {
         flex: 0 0 100%;
-        max-width: 100%;
-        padding: 0 16px;
+        max-width: 100% !important;
+        padding: 0 20px !important;
     }
+    footer#footer.footer > .container.footer-bottom { padding: 24px 20px 0 !important; }
     footer#footer .footer-rows .site-name a { font-size: 28px; line-height: 30px; }
     footer#footer .footer-rows .custom-footer__contact .contact-box { font-size: 18px; }
     footer#footer .footer-links-icons ul.footer-links li a { font-size: 18px; }
-    footer#footer .footer-bottom { flex-direction: column; align-items: flex-start; margin-top: 24px; padding: 24px 16px 0; font-size: 12px; }
+    footer#footer .footer-bottom { flex-direction: column; align-items: flex-start; font-size: 12px; }
 }
 
 /* ============================================ */
@@ -1605,7 +1681,7 @@ footer#footer .footer-bottom .copyright a.cookies-settings:focus-visible {
 .homepage-group-title.homepage-products-heading-2 {
     box-sizing: border-box;
     margin: 0 0 60px;
-    padding: 130px var(--gl-gutter) 0;
+    padding: var(--gl-section-gap) var(--gl-gutter) 0;
     max-width: var(--gl-page-max);
     width: 100%;
     font-family: var(--gl-font-ui);
@@ -1813,29 +1889,9 @@ footer#footer .footer-bottom .copyright a.cookies-settings:focus-visible {
     z-index: 2;
 }
 
-/* Generované badges přes CSS ::before na image kontejneru.
-   Sekce 1 (Akční zboží) → "Bestseller", sekce 2 (Novinky) → "Novinka". */
-.products.products-block.homepage-products-1 .product a.image::before,
-.products.products-block.homepage-products-2 .product a.image::before {
-    content: "Bestseller";
-    position: absolute;
-    top: 14px;
-    left: 14px;
-    z-index: 2;
-    padding: 4px 10px;
-    background: var(--gl-black);
-    color: var(--gl-white);
-    font-family: var(--gl-font-ui);
-    font-size: 13px;
-    font-weight: var(--gl-w-regular);
-    line-height: 16px;
-    letter-spacing: .04em;
-    text-transform: none;
-    pointer-events: none;
-}
-.products.products-block.homepage-products-2 .product a.image::before {
-    content: "Novinka";
-}
+/* Pseudo-badges odstraněny: dekorovat všechny karty stejnou nálepkou ztrácí informační hodnotu.
+   Pokud chce admin označit produkt, použije Shoptet vendor flag (.flag/.flags) — ten je již
+   nastylovaný výše (.products.products-block .product .flag). */
 
 /* Responsive */
 @media (max-width: 1279px) {
@@ -2041,3 +2097,207 @@ footer#footer .footer-bottom .copyright a.cookies-settings:focus-visible {
         min-width: 0;
     }
 }
+
+/* ============================================ */
+/* === Mobile menu (hamburger) === */
+/* ============================================ */
+/* Desktop: hide responsive-tools (mobile burger irrelevant) — definováno výše.
+   Mobile: skryj desktop nav + topnav menu/contacts, ukáš hamburger + search/login ikonky. */
+
+@media (max-width: 1023px) {
+    /* Mobile drawer pro nav#navigation. Shoptet JS přidá body.navigation-window-visible
+       po kliku na hamburger → drawer se vysune zleva.
+       NEDÁVEJ `display: none !important` — přebíjí Shoptet show stav. */
+    header#header nav#navigation {
+        display: block !important;
+        position: fixed !important;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: 320px;
+        max-width: 85vw;
+        height: 100vh;
+        max-height: 100vh;
+        background: var(--gl-white);
+        box-shadow: 4px 0 20px rgba(0, 0, 0, .12);
+        transform: translateX(-100%);
+        transition: transform .3s ease;
+        z-index: 200;
+        overflow-y: auto;
+        padding: 64px 0 24px;
+    }
+    body.navigation-window-visible header#header nav#navigation {
+        transform: translateX(0);
+    }
+    /* Drawer obsah — vertical stack */
+    header#header nav#navigation .navigation-in,
+    header#header nav#navigation .navigation-in.menu {
+        display: block !important;
+        width: 100% !important;
+        height: auto !important;
+        max-width: none !important;
+        padding: 0 !important;
+    }
+    header#header nav#navigation ul.menu-level-1 {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: stretch !important;
+        gap: 0 !important;
+        height: auto !important;
+        width: 100% !important;
+    }
+    header#header nav#navigation ul.menu-level-1 > li {
+        display: block !important;
+        width: 100% !important;
+        padding: 0 !important;
+        border-bottom: 1px solid var(--gl-divider);
+    }
+    header#header nav#navigation ul.menu-level-1 > li > a {
+        height: auto !important;
+        padding: 16px 24px !important;
+        font-size: 18px !important;
+        width: 100%;
+        justify-content: space-between;
+    }
+    /* Drawer dropdown — static (nikoli absolute) — nested */
+    header#header nav#navigation ul.menu-level-1 > li > ul.menu-level-2 {
+        position: static !important;
+        box-shadow: none !important;
+        border: none !important;
+        border-top: 1px solid var(--gl-divider) !important;
+        background: var(--gl-surface-alt) !important;
+        padding: 8px 24px 12px !important;
+        width: 100% !important;
+        max-width: none !important;
+        min-width: 0 !important;
+    }
+    /* Drawer backdrop (Shoptet vendor pridava .user-action-visible) */
+    body.navigation-window-visible::before {
+        content: "";
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, .4);
+        z-index: 150;
+        pointer-events: none;
+    }
+    /* Skryj topnav contacts (telefon/email) — moc info na mobil */
+    .top-navigation-bar .top-navigation-contacts {
+        display: none !important;
+    }
+    /* Skryj topnav menu (Jak nakupovat / OP / Kontakty) — zařadí se do drawer */
+    .top-navigation-bar .top-navigation-menu {
+        display: none !important;
+    }
+    /* Skryj topnav desktop login button (nahradí ho login ikonka v responsive-tools) */
+    .top-navigation-bar .top-navigation-tools > button.top-nav-button-login {
+        display: none !important;
+    }
+    /* Top-navigation-tools — force flex (vendor přebíjí na block) */
+    .top-navigation-bar .top-navigation-tools {
+        display: flex !important;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 14px;
+        margin-left: auto;
+    }
+    /* Force responsive-tools display — vendor `.desktop .responsive-tools { display: none }` přebít */
+    .top-navigation-bar .top-navigation-tools .responsive-tools,
+    body.desktop .top-navigation-bar .top-navigation-tools .responsive-tools {
+        display: inline-flex !important;
+        align-items: center;
+        gap: 14px;
+        margin-left: auto;
+        position: static !important;
+    }
+    /* Toggle-window <a> elementy — explicitní rozměry (vendor je dělá 0×0) */
+    .top-navigation-bar .top-navigation-tools .responsive-tools a.toggle-window {
+        display: inline-block !important;
+        width: 28px !important;
+        height: 28px !important;
+        padding: 0 !important;
+        margin: 0;
+        background: transparent center/22px 22px no-repeat;
+        text-decoration: none;
+        color: var(--gl-fg-1);
+        cursor: pointer;
+        position: static !important;
+        transition: opacity .15s;
+        font-size: 0;
+        line-height: 0;
+        text-indent: -9999px;
+        overflow: hidden;
+    }
+    .top-navigation-bar .top-navigation-tools .responsive-tools a.toggle-window:hover,
+    .top-navigation-bar .top-navigation-tools .responsive-tools a.toggle-window:focus-visible {
+        opacity: .65;
+    }
+    .top-navigation-bar .top-navigation-tools .responsive-tools a.toggle-window:focus-visible {
+        outline: 2px solid var(--gl-fg-1);
+        outline-offset: 4px;
+    }
+    /* Hamburger ikona (data-target="navigation") */
+    .top-navigation-bar .top-navigation-tools .responsive-tools a.toggle-window[data-target="navigation"] {
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='square'><path d='M4 8h20M4 14h20M4 20h20'/></svg>") !important;
+    }
+    /* Search ikona (data-target="search") */
+    .top-navigation-bar .top-navigation-tools .responsive-tools a.toggle-window[data-target="search"] {
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='1.8'><circle cx='12' cy='12' r='7'/><path d='m24 24-6-6'/></svg>") !important;
+    }
+    /* Login ikona (data-target="login") */
+    .top-navigation-bar .top-navigation-tools .responsive-tools a.toggle-window[data-target="login"] {
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='1.8'><circle cx='14' cy='10' r='4'/><path d='M6 24c0-4 4-7 8-7s8 3 8 7'/></svg>") !important;
+    }
+    /* Topnav container layout fix */
+    .top-navigation-bar .container {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding: 0 16px;
+        height: 56px;
+    }
+    /* Topnav bar — fixed nahoře (Shoptet vendor) → kompenzace */
+    .top-navigation-bar {
+        height: 56px;
+    }
+    /* Hide search bar v headeru — search se otevře přes ikonu */
+    header#header .search {
+        display: none;
+    }
+    /* Header layout: logo + cart only (search hidden, nav hidden) */
+    header#header .header-top {
+        grid-template-columns: auto 1fr auto;
+        gap: 12px;
+        height: 64px;
+        padding: 0 16px;
+    }
+    header#header .site-name img {
+        height: 36px;
+        max-width: 180px;
+    }
+    /* Cart pill smaller na mobile */
+    header#header .navigation-buttons a.cart-count,
+    header#header .navigation-buttons a[data-target="cart"] {
+        height: 40px;
+        padding: 8px 12px;
+        font-size: 14px;
+    }
+    header#header .navigation-buttons a.cart-count::before {
+        width: 18px;
+        height: 18px;
+    }
+    header#header .navigation-buttons a.cart-count .cart-price {
+        display: none;
+    }
+}
+
+@media (max-width: 767px) {
+    /* Mobil: ještě menší padding, max compact */
+    .top-navigation-bar .container { padding: 0 12px; height: 52px; }
+    .top-navigation-bar .top-navigation-tools .responsive-tools { gap: 10px !important; }
+    .top-navigation-bar .top-navigation-tools .responsive-tools a.toggle-window {
+        width: 24px !important;
+        height: 24px !important;
+    }
+    header#header .header-top { padding: 0 12px; height: 56px; }
+    header#header .site-name img { height: 32px; max-width: 140px; }
+}