galali-shoptet 1.0.14 → 1.0.16

package/package.json

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

package/style.css

@@ -2966,7 +2966,6 @@ body.type-detail .content-wrapper .similar-products .products {
 
 /* Layout: main 8/4 split (cart items / sidebar), responsive */
 body.ordering-process main#content,
-body.ordering-process main#content,
 body:has(#cart-wrapper) main#content {
     padding: 0 var(--gl-gutter) var(--gl-section-gap) !important;
     box-sizing: border-box;
@@ -3297,21 +3296,7 @@ table.cart-table td.p-total strong.price-final {
 }
 table.cart-table td.p-total form.inline { display: inline-block; }
 table.cart-table td.p-total button.remove-item {
-    /*! position: absolute; */
-    /*! right: 0; */
-    /*! top: 50%; */
-    /*! transform: translateY(-50%); */
-    /*! width: 32px; */
-    /*! height: 32px; */
-    /*! background: transparent; */
-    /*! border: none; */
     cursor: pointer;
-    /*! padding: 0; */
-    /*! transition: opacity .15s; */
-    /*! background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23828282' stroke-width='1.5' stroke-linecap='round'><path d='M4 4l8 8M12 4l-8 8'/></svg>"); */
-    /*! background-position: center; */
-    /*! background-repeat: no-repeat; */
-    /*! background-size: 16px 16px; */
     min-width: 0;
     border: 1px solid black;
     margin-left: 5px;
@@ -3629,7 +3614,6 @@ button[type="submit"]:not(#orderFormButton):not(.btn-conversion):hover {
 
 /* Responsive košík */
 @media (max-width: 1023px) {
-    body.ordering-process main#content,
     body.ordering-process main#content { padding: 0 32px 96px !important; }
     #cart-wrapper .row.cart-row {
         grid-template-columns: 1fr !important;
@@ -3646,7 +3630,6 @@ button[type="submit"]:not(#orderFormButton):not(.btn-conversion):hover {
     .cart-summary .extras-wrapper { grid-template-columns: 1fr; }
 }
 @media (max-width: 767px) {
-    body.ordering-process main#content,
     body.ordering-process main#content { padding: 0 16px 64px !important; }
     #cart-wrapper { padding: 16px 0 0; }
     ol.cart-header > li,
@@ -4875,30 +4858,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 +7383,223 @@ 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;
+        /* Bar leží (fixed, z60) přes logo v headeru → jinak přebírá kliky a logo
+           není klikatelné. none = kliky projdou na logo pod ním; ikony mají auto níž. */
+        pointer-events: none !important;
+    }
+    .top-navigation-bar .top-navigation-tools,
+    .top-navigation-bar .responsive-tools,
+    .top-navigation-bar .responsive-tools * {
+        pointer-events: auto !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.
+       position:relative + z-index → ikony vždy nad sourozenci (na checkoutu byl
+       search anchor jinak nehittestovatelný = neklikatelný). --- */
+    .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;
+        position: relative !important;
+        z-index: 2 !important;
+        pointer-events: auto !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; }
+