galali-shoptet 1.0.14 → 1.0.15

package/package.json

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

package/style.css

@@ -4875,30 +4875,35 @@ body.ordering-process input[type="checkbox"] {
     outline-offset: 4px;
 }
 
-/* Mobile */
-@media (max-width: 767px) {
+/* Mobile — POZOR: base .siteCookies__button má min-width:140px !important,
+   takže mobilní shrink MUSÍ mít taky !important, jinak buttony nezmenší → banner
+   přeteče 390px → roztáhne layout viewport (ikony headeru ujedou z obrazovky). */
+@media (max-width: 1023px) {
     .siteCookies,
     .siteCookies.siteCookies--bottom,
     .siteCookies.siteCookies--light,
     .siteCookies.siteCookies--scrolled {
-        left: 16px;
-        right: 16px;
-        bottom: 16px;
+        left: 12px !important;
+        right: 12px !important;
+        bottom: 12px !important;
+        max-width: calc(100vw - 24px) !important;
+        box-sizing: border-box !important;
     }
     .siteCookies .siteCookies__form {
-        flex-direction: column;
-        align-items: stretch;
-        gap: 16px;
-        padding: 16px;
+        flex-direction: column !important;
+        align-items: stretch !important;
+        gap: 14px !important;
+        padding: 16px !important;
     }
     .siteCookies .siteCookies__buttonWrap {
-        flex-direction: column;
-        gap: 8px;
+        flex-direction: column !important;
+        gap: 8px !important;
+        width: 100% !important;
     }
     .siteCookies button.siteCookies__button,
     .siteCookies .siteCookies__button {
-        width: 100%;
-        min-width: 0;
+        width: 100% !important;
+        min-width: 0 !important;
     }
 }
 
@@ -7395,3 +7400,210 @@ body.type-search .products.products-block .product .add-to-cart {
     body.type-search .products.products-block .product .price.price-final { font-size: 14px; }
 }
 
+/* ============================================================
+   === Mobil audit fixes (2026-07-03) — konzistence napříč eshopem ===
+   Zdroj: full mobile audit (home/detail/kategorie/search/košík/checkout/registrace/login/heslo).
+   ============================================================ */
+
+@media (max-width: 1023px) {
+    /* --- A1) Skryj topnav menu (Jak nakupovat / OP) na mobilu ---
+       Globální "desktop polish" rule `.top-navigation-menu{display:flex}` (bez media query,
+       pozdější v pořadí) přebíjela mobilní `display:none` → menu se zobrazovalo a jeho bílé
+       pozadí PŘEKRÝVALO logo. Late-source !important vrací hidden. */
+    .top-navigation-bar .top-navigation-menu,
+    .top-navigation-bar .top-navigation-menu-trigger,
+    .top-navigation-bar ul.top-navigation-bar-menu {
+        display: none !important;
+    }
+
+    /* --- A2) Topnav VŽDY fixed overlay (konzistentně) ---
+       Vendor dává topnav `fixed` na homepage, ale `static` na kategorii/detailu/košíku/checkoutu
+       → tam header spadl na 2. řádek (logo pod ikonami) a checkout step-bar (ol.cart-header)
+       se schoval za header (vykukoval jen černý kroužek kroku = "blob").
+       Fixed = header sedí na y=0 (logo vlevo), ikony transparentně přes něj vpravo,
+       obsah teče pod headerem → 1 řádek na VŠECH stránkách + step-bar viditelný. */
+    .top-navigation-bar {
+        position: fixed !important;
+        top: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        width: 100% !important;
+        z-index: 60 !important;
+        background: transparent !important;
+        border: 0 !important;
+        box-shadow: none !important;
+    }
+    header#header {
+        position: sticky !important;
+        top: 0 !important;
+    }
+
+    /* --- A3) Reset ordering-process login boxu na HEADER ikoně ---
+       Rule `body.ordering-process .toggle-window[data-target=login]` (mířená na checkout
+       login trigger) trefovala i header ikonu → bílý bordered box místo ikony. Vrátit ikonu. */
+    body.ordering-process .top-navigation-bar .responsive-tools a.toggle-window[data-target="login"] {
+        padding: 0 !important;
+        background-color: transparent !important;
+        border: 0 !important;
+        border-radius: 0 !important;
+        letter-spacing: 0 !important;
+        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;
+        background-position: center !important;
+        background-repeat: no-repeat !important;
+        background-size: 22px 22px !important;
+    }
+
+    /* --- A4) Větší tap-target ikon (min 44px hit area), vizuální ikona 22px --- */
+    .top-navigation-bar .top-navigation-tools .responsive-tools a.toggle-window {
+        width: 44px !important;
+        min-width: 44px !important;
+        height: 44px !important;
+        background-size: 22px 22px !important;
+    }
+    .top-navigation-bar .top-navigation-tools .responsive-tools { gap: 2px !important; }
+    .top-navigation-bar .container { height: 56px !important; padding: 0 8px 0 16px !important; }
+}
+
+/* --- B) Account/form primární tlačítka: modrá/purpurová → černá ---
+   REGISTROVAT (input.btn-login), PŘIHLÁSIT SE (button.btn-login), ODESLAT (input.btn-primary),
+   404 "Zpět do obchodu" (a.btn-default). Vendor je nechává modré/purpurové. */
+input.btn.btn-primary, input[type="submit"].btn-primary, input[type="submit"].btn-login,
+input.btn.btn-login, button.btn.btn-login,
+a.btn.btn-default:not(.unveil-button):not(.toggle-contacts):not(.next-step-forward) {
+    background: var(--gl-black) !important;
+    background-color: var(--gl-black) !important;
+    background-image: none !important;
+    color: var(--gl-white) !important;
+    border: 1px solid var(--gl-black) !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.06em !important;
+    font-family: var(--gl-font-ui) !important;
+    font-weight: var(--gl-w-medium) !important;
+    padding: 12px 24px !important;
+    min-height: 44px !important;
+    cursor: pointer;
+    transition: background .15s;
+}
+input.btn.btn-primary:hover, input.btn.btn-login:hover,
+button.btn.btn-login:hover, a.btn.btn-default:not(.unveil-button):hover {
+    background: #1a1a1a !important;
+    background-color: #1a1a1a !important;
+}
+
+/* --- C) Load-more + "Nahoru": modrá → černá outline --- */
+button.loadMore__button, a.loadMore__button, .loadMore__button,
+a.goToTop__button, .goToTop__button.btn {
+    color: var(--gl-fg-1) !important;
+    background: var(--gl-white) !important;
+    background-color: var(--gl-white) !important;
+    background-image: none !important;
+    border: 1px solid var(--gl-fg-1) !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.06em !important;
+    font-family: var(--gl-font-ui) !important;
+    font-weight: var(--gl-w-medium) !important;
+}
+button.loadMore__button:hover, a.goToTop__button:hover, .loadMore__button:hover {
+    background: var(--gl-fg-1) !important;
+    background-color: var(--gl-fg-1) !important;
+    color: var(--gl-white) !important;
+}
+
+/* --- D) Modré textové odkazy (account formuláře, search kategorie) → černá podtržená --- */
+body.in-login #formLogin a,
+body.in-login #formLoginIncluded a,
+body.in-registrace #register-form a,
+body.in-zapomenute-heslo main a:not(.btn),
+#customerLogin #formLoginIncluded a,
+body.type-search #search-group-categories a,
+body.type-search .search-results-group a {
+    color: var(--gl-fg-1) !important;
+    text-decoration: underline !important;
+    text-underline-offset: 3px;
+}
+body.in-login #formLogin a:hover,
+body.in-registrace #register-form a:hover,
+body.type-search .search-results-group a:hover {
+    opacity: .7;
+}
+/* Search kategorie: zruš disc odrážky (vendor UL) → čistý seznam */
+body.type-search #search-group-categories ul,
+body.type-search .search-results-group-list {
+    list-style: none !important;
+    padding-left: 0 !important;
+    margin-left: 0 !important;
+}
+body.type-search #search-group-categories li,
+body.type-search .search-results-group-list li {
+    list-style: none !important;
+}
+
+/* --- E) Checkout: vybraná doprava/platba (b.shipping-billing-name) je modrá → černá --- */
+b.shipping-billing-name,
+.shipping-billing-name,
+body.ordering-process .shipping-billing-name,
+body.ordering-process .cart-recap .price,
+body.ordering-process td.shipping-billing-name {
+    color: var(--gl-fg-1) !important;
+}
+
+/* --- F) Košík quantity stepper: vendor dává +/− buttonům position:absolute →
+   vypadnou z gridu (cart CSS je narozdíl od detailu neresetuje) → rozhozený box.
+   Přepnout na flex [− 1 +] jako na detailu. --- */
+table.cart-table span.quantity {
+    display: inline-flex !important;
+    flex-direction: row !important;
+    align-items: stretch !important;
+    width: 120px !important;
+    height: 40px !important;
+    padding: 0 !important;
+    position: relative;
+    overflow: hidden;
+}
+table.cart-table span.quantity button.decrease,
+table.cart-table span.quantity button.increase {
+    position: static !important;
+    inset: auto !important;
+    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
+    width: 36px !important;
+    min-width: 36px !important;
+    height: auto !important;
+    align-self: stretch !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    font-size: 0 !important;
+    background: transparent !important;
+}
+table.cart-table span.quantity button.decrease { order: 1 !important; border-right: 1px solid var(--gl-divider) !important; }
+table.cart-table span.quantity label { order: 2 !important; flex: 1 1 auto !important; margin: 0 !important; }
+table.cart-table span.quantity input.amount { width: 100% !important; }
+table.cart-table span.quantity button.increase { order: 3 !important; border-left: 1px solid var(--gl-divider) !important; }
+table.cart-table span.quantity button.decrease::before,
+table.cart-table span.quantity button.increase::before {
+    position: static !important;
+    inset: auto !important;
+    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
+    display: block !important;
+    width: auto !important;
+    height: auto !important;
+    margin: 0 !important;
+    transform: none !important;
+    font-size: 18px !important;
+    line-height: 1 !important;
+    color: var(--gl-fg-1) !important;
+    background: none !important;
+}
+table.cart-table span.quantity button.decrease::before { content: "−" !important; }
+table.cart-table span.quantity button.increase::before { content: "+" !important; }
+table.cart-table span.quantity .increase__sign,
+table.cart-table span.quantity .decrease__sign,
+table.cart-table span.quantity .increase-tooltip,
+table.cart-table span.quantity .decrease-tooltip,
+table.cart-table span.quantity .js-increase-tooltip,
+table.cart-table span.quantity .js-decrease-tooltip { display: none !important; }
+