galali-shoptet 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "galali-shoptet",
-  "version": "1.0.1",
+  "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;
@@ -41,6 +42,27 @@ body {
 .menu-helper { display: none !important; }
 .navigationActions { display: none !important; }
 
+/* === Pořadí sekcí homepage: banner → kategorie → produkty (sjednoceno se sqrl) === */
+.overall-wrapper {
+    display: flex;
+    flex-direction: column;
+}
+/* Header + topnav + user-action default order 0 → zůstávají nahoře */
+.overall-wrapper > .content-wrapper.homepage-box.before-carousel {
+    order: 10;
+}
+.overall-wrapper > .content-wrapper.homepage-box.welcome-wrapper {
+    order: 20;
+}
+/* Produktový wrapper (Akční zboží + Novinky) — bez id, bez homepage-box class */
+.overall-wrapper > .content-wrapper.container:not(#content-wrapper):not(.homepage-box) {
+    order: 30;
+}
+/* Prázdný #content-wrapper schovat */
+.overall-wrapper > #content-wrapper.content-wrapper.container {
+    display: none;
+}
+
 /* ============================================ */
 /* === TOP PANEL (ustrip) === */
 /* ============================================ */
@@ -104,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;
 }
@@ -174,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 {
@@ -224,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 {
@@ -361,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;
@@ -415,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;
@@ -453,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);
 }
@@ -484,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);
@@ -499,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á */
@@ -509,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;
@@ -683,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;
@@ -696,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;
@@ -711,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;
@@ -727,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) */
@@ -806,14 +890,14 @@ 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-title {
+    .content-wrapper.homepage-box.before-carousel .extended-banner-texts .extended-banner-title {
         font-size: 56px;
         line-height: 56px;
     }
-    .content-wrapper.homepage-box.before-carousel .extended-banner-text {
+    .content-wrapper.homepage-box.before-carousel .extended-banner-texts .extended-banner-text {
         font-size: 20px;
         line-height: 24px;
     }
@@ -844,18 +928,19 @@ header#header nav#navigation ul.menu-level-3 > li > a:focus {
         padding: 32px 16px;
         gap: 16px;
     }
-    .content-wrapper.homepage-box.before-carousel .extended-banner-title {
+    .content-wrapper.homepage-box.before-carousel .extended-banner-texts .extended-banner-title {
         font-size: 36px;
         line-height: 38px;
     }
-    .content-wrapper.homepage-box.before-carousel .extended-banner-text {
+    .content-wrapper.homepage-box.before-carousel .extended-banner-texts .extended-banner-text {
         font-size: 16px;
         line-height: 20px;
         margin: 0;
     }
-    .content-wrapper.homepage-box.before-carousel .extended-banner-link {
+    .content-wrapper.homepage-box.before-carousel .extended-banner-texts .extended-banner-link {
         height: 42px;
         font-size: 16px;
+        padding: 0 24px;
     }
 }
 
@@ -863,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 */
@@ -892,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 {
@@ -1007,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; }
@@ -1020,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; }
@@ -1035,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;
@@ -1056,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 */
@@ -1236,70 +1334,73 @@ main.content > .products.products-block > .product .price-final strong {
 footer#footer.footer {
     background: var(--gl-black);
     color: var(--gl-white);
-    padding: 110px 0 100px;
-    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;
-    /* grid overlay: footer-rows + footer-links-icons sdílí row 1, footer-bottom row 2 */
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: auto auto;
-    row-gap: 0;
+    /* 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: 60px;
+    column-gap: 0;
 }
-
-/* Reset Shoptet sr-only nadpisu */
+/* sr-only schovat (bere row v flexu jinak) */
+footer#footer.footer > h2.sr-only,
 footer#footer .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
+    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: 0;
+    flex: 0 0 0 !important;
 }
-
-/* 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 {
+/* 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;
-    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: 0 40px 0 var(--gl-gutter) !important;
     background: transparent;
     border: 0;
 }
-
-/* Grid overlay: rows + links-icons share row 1; bottom = row 2 */
-footer#footer > .container.footer-rows {
-    grid-row: 1;
-    grid-column: 1;
-}
-footer#footer > .container.footer-links-icons {
-    grid-row: 1;
-    grid-column: 1;
-    justify-self: end;
-    width: auto;
-    pointer-events: none; /* aby brand klikable elementy nepřekrývaly */
-}
-footer#footer > .container.footer-links-icons * {
-    pointer-events: auto;
+/* Zákaznický servis — 40%, padding-right = gutter */
+footer#footer.footer > .container.footer-links-icons {
+    flex: 0 1 40%;
+    box-sizing: border-box;
+    width: 100% !important;
+    max-width: none !important;
+    margin: 0 !important;
+    padding: 0 var(--gl-gutter) 0 40px !important;
+    background: transparent;
+    border: 0;
 }
-footer#footer > .container.footer-bottom {
-    grid-row: 2;
-    grid-column: 1;
+/* Spodní strip — plná šířka, gutter L/R */
+footer#footer.footer > .container.footer-bottom {
+    flex: 0 0 100%;
+    box-sizing: border-box;
+    width: 100% !important;
+    max-width: none !important;
+    margin: 0 !important;
+    padding: 30px var(--gl-gutter) 0 !important;
+    background: transparent;
+    border: 0;
 }
 
-/* --- Horní mřížka: brand block + custom-footer + footer-links ---
-   2-col layout (Shoptet renderuje jen 2 obsahové bloky, ne sqrl 4) */
+/* --- Brand sloupec: logo nahoře, kontakt pod ním (1-col stack) --- */
 footer#footer .footer-rows {
-    display: grid;
-    grid-template-columns: minmax(360px, 1.4fr) minmax(0, 1fr);
-    column-gap: 80px;
-    row-gap: 40px;
-    align-items: start;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    align-items: flex-start;
 }
 
 /* Site-name (logo) — col 1, nahoře */
@@ -1359,7 +1460,7 @@ footer#footer .footer-rows .custom-footer__contact .contact-box {
 footer#footer .footer-rows .custom-footer__contact .contact-box ul {
     display: flex;
     flex-direction: column;
-    gap: 14px;
+    gap: 18px;
     margin: 0;
     padding: 0;
     list-style: none;
@@ -1398,8 +1499,12 @@ footer#footer .footer-rows .custom-footer__contact .contact-box a:focus-visible
     outline-offset: 4px;
 }
 
-/* Instagram blok (sociální) */
+/* Instagram blok (sociální) — Shoptet renderuje prázdný container.
+   Skrýt, dokud admin nedoplní social linky. */
 footer#footer .footer-rows .custom-footer__instagram {
+    display: none;
+}
+footer#footer .footer-rows .custom-footer__instagram.has-content {
     grid-column: 1 / 2;
     display: flex;
     gap: 12px;
@@ -1430,15 +1535,7 @@ footer#footer .footer-rows .custom-footer__instagram svg {
     filter: brightness(0) invert(1);
 }
 
-/* --- Footer-links-icons — pravý sloupec (Zákaznický servis) ---
-   Pozicováno přes grid overlay (justify-self: end). Vlastní šířka, padding pravý. */
-footer#footer .footer-links-icons {
-    margin: 0;
-    padding: 0 var(--gl-gutter);
-    width: auto;
-    max-width: 460px;
-    box-sizing: border-box;
-}
+/* --- Footer-links-icons sloupec (vnitřní layout) --- */
 footer#footer .footer-links-icons::before {
     content: "Zákaznický servis";
     display: block;
@@ -1492,8 +1589,8 @@ footer#footer .footer-bottom {
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 16px;
-    margin: 60px auto 0;
-    padding: 30px var(--gl-gutter) 0;
+    margin: 60px 0 0;
+    padding: 30px 0 0;
     border-top: 1px solid rgba(255, 255, 255, 0.15);
     color: var(--gl-fg-2);
     font-family: var(--gl-font-ui);
@@ -1547,24 +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 .footer-rows { grid-template-columns: 1fr 1fr; row-gap: 32px; column-gap: 32px; }
-    footer#footer .footer-links-icons { margin-top: 32px; padding-left: var(--gl-gutter); padding-right: var(--gl-gutter); }
-    footer#footer .footer-bottom { margin-top: 40px; }
+    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; }
-    footer#footer .container.footer-rows,
-    footer#footer .container.footer-links-icons,
-    footer#footer .container.footer-bottom { padding: 0 16px; }
-    footer#footer .footer-rows { grid-template-columns: 1fr; row-gap: 24px; }
+    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% !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 { margin-top: 24px; padding-left: 16px; padding-right: 16px; }
     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: 32px; padding: 24px 16px 0; font-size: 12px; }
+    footer#footer .footer-bottom { flex-direction: column; align-items: flex-start; font-size: 12px; }
 }
 
 /* ============================================ */
@@ -1576,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);
@@ -1784,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) {
@@ -2012,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; }
+}