galali-shoptet 1.0.6 → 1.0.8

package/package.json

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

package/style.css

@@ -1134,10 +1134,11 @@ section.gutter .picto:focus-visible {
     section.gutter .sec-title { font-size: 28px; line-height: 30px; }
     section.gutter .sec-link { font-size: 14px; gap: 10px; }
     section.gutter .sec-link svg { width: 14px; height: 14px; }
-    section.gutter .pictos { grid-template-columns: repeat(3, 1fr); gap: 8px; }
-    section.gutter .picto { gap: 12px; padding: 12px; }
-    section.gutter .picto svg { width: 38px; height: 38px; }
-    section.gutter .picto .name { font-size: 12px; line-height: 14px; }
+    /* minmax(0,1fr) místo 1fr → buňky se nesnaží roztáhnout na min-content (jinak overflow viewportu) */
+    section.gutter .pictos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
+    section.gutter .picto { gap: 14px; padding: 16px 8px; min-width: 0; }
+    section.gutter .picto svg { width: 52px; height: 52px; max-width: 100%; }
+    section.gutter .picto .name { font-size: 13px; line-height: 15px; overflow-wrap: anywhere; }
 }
 
 /* ============================================ */
@@ -1336,10 +1337,15 @@ main.content > .products.products-block > .product .price-final strong {
     main.content > .products.products-block > .product .price-final { font-size: 18px; line-height: 22px; }
 }
 @media (max-width: 767px) {
-    main.content:not(.wide) { padding: 0 16px; }
+    /* #2: base má padding 0 var(--gl-gutter)(=60px) !important → na mobilu úzké uprostřed.
+       Roztáhnout na (skoro) plnou šířku. */
+    main.content,
+    main.content:not(.wide) { padding: 0 12px !important; }
+    /* #4: oddělit produkty (Akční/Novinky) od sekce "Nakupte podle kategorií" nad i patičky pod */
+    main.content { margin: 48px 0 72px !important; }
     main.content > .products.products-block > .product a.name { min-height: 38px; }
-    main.content > .homepage-group-title { font-size: 28px; line-height: 30px; margin: 60px 0 24px; }
-    main.content > .homepage-products-heading-2 { margin-top: 48px; }
+    main.content > .homepage-group-title { font-size: 28px; line-height: 30px; margin: 48px 0 24px; }
+    main.content > .homepage-products-heading-2 { margin-top: 56px; }
     main.content > .products.products-block { grid-template-columns: repeat(2, 1fr); column-gap: 12px; row-gap: 24px; }
     main.content > .products.products-block > .product > .p { gap: 10px; }
     main.content > .products.products-block > .product a.name { font-size: 15px; line-height: 19px; }
@@ -2056,6 +2062,17 @@ body:not(.in-index) .breadcrumbs-wrapper::after,
 body:not(.in-index) .breadcrumbs-wrapper::before {
     display: none !important;
 }
+/* Vendor dává home ikonu (domeček) přes ::before na .navigation-home-icon-wrapper
+   (= sama .breadcrumbs) → při zalomení překrývá text ("Vázy"). Skrýt. */
+body:not(.in-index) .breadcrumbs.navigation-home-icon-wrapper::before,
+body:not(.in-index) .breadcrumbs::before,
+body:not(.in-index) .breadcrumbs::after {
+    content: none !important;
+    display: none !important;
+    background: none !important;
+    width: 0 !important;
+    height: 0 !important;
+}
 
 /* ============================================ */
 /* === Kategorie (listing) === */
@@ -6357,28 +6374,62 @@ body.type-detail .content-wrapper-in {
 
 /* --- Responsive: tablet & mobile --- */
 @media (max-width: 1023px) {
+    /* Detail hlavička: desktop 2-sloupcový grid → mobil 1-sloupcový STACK přes flex+order.
+       (grid-column reset nestačil: .col-lg-6.p-info-wrapper{grid-column:2} má vyšší
+       specificitu než .p-info-wrapper{grid-column:1} → grid zůstával 2-col a překrýval se.) */
     body.type-detail .p-detail-inner {
-        grid-template-columns: 1fr !important;
+        display: flex !important;
+        flex-direction: column !important;
         column-gap: 0 !important;
+        row-gap: 0 !important;
     }
     body.type-detail .p-detail-inner > .p-detail-inner-header,
+    body.type-detail .row.product-top > .col-xs-12,
     body.type-detail .row.product-top > .col-xs-12:not(.col-lg-6),
+    body.type-detail .row.product-top > .col-lg-6.p-image-wrapper,
     body.type-detail .row.product-top > .p-image-wrapper,
+    body.type-detail .row.product-top > .col-lg-6.p-info-wrapper,
     body.type-detail .row.product-top > .p-info-wrapper {
-        grid-column: 1 !important;
-    }
-    body.type-detail .row.product-top > .p-image-wrapper {
-        grid-row: 1 !important;
+        grid-column: auto !important;
+        grid-row: auto !important;
+        width: 100% !important;
+        max-width: 100% !important;
     }
+    /* Pořadí: title → obrázek → značka/rating → cena+košík+dostupnost */
     body.type-detail .p-detail-inner > .p-detail-inner-header {
-        grid-row: 2 !important;
-        margin-top: 24px !important;
+        order: 1 !important;
+        margin: 0 0 16px !important;
+    }
+    body.type-detail .row.product-top > .col-lg-6.p-image-wrapper,
+    body.type-detail .row.product-top > .p-image-wrapper {
+        order: 2 !important;
     }
     body.type-detail .row.product-top > .col-xs-12:not(.col-lg-6) {
-        grid-row: 3 !important;
+        order: 3 !important;
+        margin-top: 16px !important;
     }
+    body.type-detail .row.product-top > .col-lg-6.p-info-wrapper,
     body.type-detail .row.product-top > .p-info-wrapper {
-        grid-row: 4 !important;
+        order: 4 !important;
+        margin-top: 16px !important;
+    }
+    /* Obrázek na 1 řádek (plná šířka), náhledy pod ním (horizontálně) */
+    body.type-detail .p-image-wrapper {
+        flex-direction: column !important;
+    }
+    body.type-detail .p-image-wrapper .p-image { order: 1 !important; width: 100% !important; }
+    body.type-detail .p-image-wrapper .p-thumbnails-wrapper {
+        order: 2 !important;
+        width: 100% !important;
+        margin-top: 10px !important;
+    }
+    body.type-detail .p-image-wrapper .p-thumbnails,
+    body.type-detail .p-image-wrapper .p-thumbnails-horizontal,
+    body.type-detail .p-image-wrapper .p-thumbnails-inner {
+        width: 100% !important;
+        max-width: none !important;
+        flex-direction: row !important;
+        flex-wrap: wrap !important;
     }
     body.type-detail .benefitBanner.position--benefitProduct {
         grid-template-columns: repeat(2, 1fr) !important;
@@ -6491,22 +6542,117 @@ body.type-detail .content-wrapper-in {
         height: auto;
     }
 
-    /* --- #1 Cart badge na mobilu — menší ikona (padding 8/12, icon 18px) → posun badge --- */
-    header#header .navigation-buttons a.cart-count i[data-testid="headerCartCount"],
-    a.cart-count i[data-testid="headerCartCount"] {
-        top: 18px !important;
-        left: 20px !important;
-        min-width: 15px;
-        height: 15px;
-        font-size: 10px !important;
-        border-width: 1.5px !important;
+    /* === #1 Sloučit logo + ikony do JEDNOHO řádku ===
+       Dříve: topnav (fixed, ikony) řádek 1, header (logo) řádek 2 → 2 řádky.
+       Řešení: zrušit rezervní padding-top → header na y=0; topnav transparentní overlay
+       (ikony vpravo) ve stejném 56px řádku jako logo (header bílé pozadí pod ikonami). */
+    .overall-wrapper { padding-top: 0 !important; }
+    .top-navigation-bar {
+        background: transparent !important;
+        box-shadow: none !important;
+        border: 0 !important;
     }
-
-    /* --- #10 Mobil drawer overlay — header má z-index:50 (sticky → stacking context),
-       drawer (z:200) je uvnitř → maluje na úrovni 50. Backdrop body::before (z:150) maluje PŘES
-       celý header vč. draweru (a pointer-events:none obchází hit-test, proto vypadal "skrz").
-       Zvednout header nad backdrop při otevřeném menu. --- */
+    .top-navigation-bar .container { pointer-events: none; }
+    .top-navigation-bar .top-navigation-tools,
+    .top-navigation-bar .responsive-tools,
+    .top-navigation-bar .responsive-tools * { pointer-events: auto; }
+    header#header .header-top { height: 56px; align-items: center; }
+    /* Košík pill je v headeru, ale překrývá se s topnav ikonami a není v mobil designu → skrýt */
+    header#header .navigation-buttons { display: none !important; }
+
+    /* === #5 Mobil drawer overlay ===
+       header má z-index:50 (sticky → stacking context), drawer (z:200) je uvnitř → maluje
+       na úrovni 50. Backdrop body::before (z:150) maluje PŘES celý header vč. draweru.
+       Zvednout header nad backdrop, ALE udělat ho průhledný (jinak bílý header řádek leží
+       nad overlayem) — viditelný zůstane jen drawer. Košík je už skrytý (nahoře). */
     body.navigation-window-visible header#header {
         z-index: 300 !important;
+        background: transparent !important;
+    }
+    body.navigation-window-visible header#header .header-top,
+    body.navigation-window-visible header#header .container.navigation-wrapper {
+        background: transparent !important;
+    }
+}
+
+/* ============================================================
+   === Review fixes 3 (košík /kosik mobil) ===
+   ============================================================ */
+
+/* --- #9 Černá linka pod menu: ol.cart-header active step má border-bottom 3px black
+   a na mobilu je full-width (ostatní steps w=0) → černá čára přes celou šířku.
+   Zrušit full-width border, podtrhnout jen text aktivního kroku. --- */
+@media (max-width: 1023px) {
+    ol.cart-header > li.step.active,
+    ol.cart-header > li.active {
+        border-bottom: 0 !important;
+    }
+    ol.cart-header > li.active > strong > span,
+    ol.cart-header > li.active > a > span {
+        border-bottom: 2px solid var(--gl-fg-1);
+        padding-bottom: 4px;
+    }
+}
+
+@media (max-width: 767px) {
+    /* --- #8 Košík položka: remove (×) tlačítko bylo vendor 100×44 černé absolute →
+       překrývalo "Součet". Udělat malé transparentní × v pravém horním rohu řádku. --- */
+    table.cart-table tr.removeable { position: relative !important; }
+    table.cart-table td.p-total {
+        position: static !important;
+        padding-right: 0 !important;
+    }
+    table.cart-table td.p-name { padding-right: 40px !important; } /* místo pro × vpravo nahoře */
+    /* Vysoká specificita + background shorthand !important — vendor dává remove buttonu
+       černé pozadí (background-color) které přebíjelo můj transparent. */
+    #cart-wrapper table.cart-table tr.removeable td.p-total button.remove-item,
+    #cart-wrapper table.cart-table tr.removeable button.remove-item,
+    #cart-wrapper table.cart-table button.remove-item,
+    table.cart-table td.p-total button.remove-item,
+    table.cart-table button.remove-item {
+        position: absolute !important;
+        top: 14px !important;
+        right: 0 !important;
+        bottom: auto !important;
+        left: auto !important;
+        transform: none !important;
+        width: 30px !important;
+        height: 30px !important;
+        min-width: 0 !important;
+        padding: 0 !important;
+        background-color: transparent !important;
+        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>") !important;
+        background-position: center !important;
+        background-repeat: no-repeat !important;
+        background-size: 16px 16px !important;
+        border: 0 !important;
+        box-shadow: none !important;
+        color: transparent !important;
+        font-size: 0 !important;
+    }
+    body.ordering-process table.cart-table button.remove-item:hover { opacity: .6; }
+
+    /* --- #8 Souhrn (Doprava zdarma / Celkem za zboží / tlačítka) na střed --- */
+    #cart-wrapper .row.cart-row > .col-md-4,
+    #cart-wrapper .row.cart-row > .col-md-4 .summary-wrapper,
+    #cart-wrapper .cart-summary,
+    #cart-wrapper .cart-summary .extras-wrapper,
+    #cart-wrapper .cart-summary .extras-col {
+        text-align: center !important;
+    }
+    /* extras-wrapper je grid (2 sloupce) → "Doprava zdarma" skončí v levém sloupci.
+       Na mobilu block + full-width, ať centrování zabere. */
+    #cart-wrapper .cart-summary .extras-wrapper {
+        display: block !important;
+        grid-template-columns: 1fr !important;
+    }
+    #cart-wrapper .cart-summary .extras-col { width: 100% !important; }
+    #cart-wrapper .cart-summary .extras-wrap,
+    #cart-wrapper .cart-summary [class*="free-shipping"],
+    #cart-wrapper .cart-summary [class*="shipping"] {
+        display: flex !important;
+        justify-content: center !important;
+        align-items: center !important;
+        text-align: center !important;
     }
 }