galali-shoptet 1.0.5 → 1.0.7

package/package.json

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

package/style.css

@@ -564,6 +564,7 @@ header#header nav#navigation ul.menu-level-1 > li > a .submenu-arrow {
 header#header nav#navigation ul.menu-level-1 > li > ul.menu-level-2 {
     flex-direction: column !important;
     flex-wrap: nowrap !important;
+    align-items: stretch !important; /* vendor align-items:center → stretch (column stack) */
     position: absolute;
     top: 100%;
     left: 0;
@@ -596,7 +597,10 @@ header#header nav#navigation ul.menu-level-2 .menu-image {
 header#header nav#navigation ul.menu-level-2 > li {
     display: block !important;
     width: 100% !important;
-    flex: 0 0 100% !important;
+    /* POZOR: v column flexu flex-basis cílí na VÝŠKU → 100% roztáhlo li na celou výšku.
+       + vendor dává min-height: 75px (rezerva folder ikony) → obří rozestupy. */
+    flex: 0 0 auto !important;
+    min-height: 0 !important;
     margin: 0;
     padding: 0;
     background: none;
@@ -865,8 +869,8 @@ header#header nav#navigation ul.menu-level-3 > li > a:focus {
 /* CTA hover/focus — celý <a> je klikací, reagujeme na hover anchor */
 .content-wrapper.homepage-box.before-carousel .carousel-inner > .item > a:hover .extended-banner-link,
 .content-wrapper.homepage-box.before-carousel .carousel-inner > .item > a:focus-visible .extended-banner-link {
-    background: var(--gl-fg-1);
-    color: var(--gl-white);
+    background: var(--gl-fg-1) !important; /* base má bg white !important → hover musí taky !important */
+    color: var(--gl-white) !important;
     transform: translateY(-1px);
 }
 .content-wrapper.homepage-box.before-carousel .carousel-inner > .item > a:focus-visible {
@@ -984,7 +988,8 @@ section.gutter {
     width: 100%;
     max-width: var(--gl-page-max);
     margin: 0 auto;
-    padding: var(--gl-section-gap) var(--gl-gutter) 0;
+    /* bottom padding (dřív 0) → popisky kategorií nejsou nalepené na spodní hraně šedého bloku */
+    padding: var(--gl-section-gap) var(--gl-gutter);
     background: transparent;
 }
 /* Vendor Shoptet .welcome > div > * dostává max-width: 800px → roztrhat */
@@ -1112,7 +1117,7 @@ section.gutter .picto:focus-visible {
 /* Responsive — odvozeno ze sqrl.dev breakpointů, --gl-section-gap se zmenšuje */
 @media (max-width: 1279px) {
     :root { --gl-section-gap: 96px; }
-    section.gutter { padding: var(--gl-section-gap) 32px 0; }
+    section.gutter { padding: var(--gl-section-gap) 32px; }
     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; }
@@ -1124,15 +1129,16 @@ section.gutter .picto:focus-visible {
 
 @media (max-width: 767px) {
     :root { --gl-section-gap: 64px; }
-    section.gutter { padding: var(--gl-section-gap) 20px 0; }
+    section.gutter { padding: var(--gl-section-gap) 20px; }
     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; }
     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; }
 }
 
 /* ============================================ */
@@ -1254,6 +1260,12 @@ main.content > .products.products-block > .product a.name {
     letter-spacing: normal;
     transition: text-decoration-color .15s;
     text-decoration-color: transparent;
+    /* Vendor dává fixní height 45px + overflow:hidden → 2řádkový název se ořezal.
+       Povolit plnou výšku, min-height drží 2 řádky pro zarovnání cen v gridu. */
+    height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+    min-height: 52px;
 }
 main.content > .products.products-block > .product a.name span {
     font-size: inherit;
@@ -1321,13 +1333,19 @@ main.content > .products.products-block > .product .price-final strong {
     main.content > .homepage-group-title { font-size: 40px; line-height: 42px; margin: 80px 0 32px; }
     main.content > .homepage-products-heading-2 { margin-top: 60px; }
     main.content > .products.products-block { grid-template-columns: repeat(3, 1fr); column-gap: 24px; row-gap: 36px; }
-    main.content > .products.products-block > .product a.name { font-size: 18px; line-height: 22px; }
+    main.content > .products.products-block > .product a.name { font-size: 18px; line-height: 22px; min-height: 44px; }
     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; }
-    main.content > .homepage-group-title { font-size: 28px; line-height: 30px; margin: 60px 0 24px; }
-    main.content > .homepage-products-heading-2 { margin-top: 48px; }
+    /* #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: 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; }
@@ -1402,17 +1420,17 @@ footer#footer.footer > .container.footer-bottom {
     border: 0;
 }
 
-/* --- Brand sloupec: logo nahoře, kontakt pod ním (1-col stack) --- */
+/* --- Brand sloupce: logo (sloupec 1) | kontakt email+tel (sloupec 2), vedle sebe --- */
 footer#footer .footer-rows {
     display: flex;
-    flex-direction: column;
-    gap: 24px;
+    flex-direction: row;
+    gap: 60px;
     align-items: flex-start;
 }
 
-/* Site-name (logo) — col 1, nahoře */
+/* Site-name (logo) — sloupec 1 */
 footer#footer .footer-rows .site-name {
-    grid-column: 1 / 2;
+    flex: 0 0 auto;
     margin: 0;
     padding: 0;
 }
@@ -1431,14 +1449,15 @@ footer#footer .footer-rows .site-name img {
     filter: brightness(0) invert(1);
 }
 
-/* Custom footer (kontakt) — pod logem v col 1 */
+/* Custom footer (kontakt email+tel) — sloupec 2, vedle loga */
 footer#footer .footer-rows .custom-footer {
-    grid-column: 1 / 2;
+    flex: 1 1 auto;
     display: flex;
     flex-direction: column;
     align-items: stretch; /* fix: stretch children full width (Shoptet default je 'normal') */
     gap: 18px;
-    margin-top: 8px;
+    margin-top: 0 !important;
+    border-top: 0 !important; /* vendor dává 1px divider → pryč */
     width: 100%;
     color: var(--gl-white);
 }
@@ -1673,10 +1692,18 @@ footer#footer .footer-bottom .copyright a.cookies-settings:focus-visible {
         padding: 0 20px !important;
     }
     footer#footer.footer > .container.footer-bottom { padding: 24px 20px 0 !important; }
+    /* Brand sloupce zpět na stack (logo nad kontaktem) */
+    footer#footer .footer-rows { flex-direction: column; gap: 20px; }
+    /* Logo — vendor ho na mobilu skrývá (display:none) → force zobrazit */
+    footer#footer .footer-rows .site-name { display: block !important; }
     footer#footer .footer-rows .site-name a { font-size: 28px; line-height: 30px; }
+    footer#footer .footer-rows .custom-footer { width: 100%; }
     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; font-size: 12px; }
+    /* Copyright + cookies pod sebou (ne vedle sebe) */
+    footer#footer .footer-bottom .copyright { display: block; }
+    footer#footer .footer-bottom .copyright a.cookies-settings { display: block; margin-top: 8px; }
 }
 
 /* ============================================ */
@@ -2035,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) === */
@@ -4919,17 +4957,37 @@ ol.cart-header > li a {
     background: transparent !important;
 }
 
-/* --- Cart counter badge (header): vendor blue -> black --- */
+/* --- Cart counter badge (header): bílé kolečko s černým číslem, vpravo dole u ikony ---
+   Pill je černý → černý badge by zmizel. Bílé kolečko = kontrast.
+   Ikona košíku je vlevo (padding-left 18px, šířka 22px) → badge na její pravý-dolní roh. */
 a.cart-count i,
 a.cart-count i[data-testid="headerCartCount"],
+header#header .navigation-buttons a.cart-count i[data-testid="headerCartCount"],
 [data-testid="headerCartCount"],
 .cart-count .amount,
 .cart-count .count {
-    background: var(--gl-fg-1) !important;
-    background-color: var(--gl-fg-1) !important;
-    color: var(--gl-white) !important;
-    border: 0 !important;
+    position: absolute !important;
+    top: 23px !important;
+    left: 28px !important;
+    right: auto !important;
+    bottom: auto !important;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 4px !important;
+    margin: 0 !important;
+    background: var(--gl-white) !important;
+    background-color: var(--gl-white) !important;
+    color: var(--gl-black) !important;
+    border: 2px solid var(--gl-black) !important;
+    border-radius: 999px !important;
     font-family: var(--gl-font-ui) !important;
+    font-size: 11px !important;
+    font-weight: var(--gl-w-bold, 700) !important;
+    line-height: 1 !important;
     font-style: normal !important;
 }
 
@@ -6316,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;
@@ -6389,3 +6481,178 @@ body.type-detail .content-wrapper-in {
         font-size: 22px !important;
     }
 }
+
+/* ============================================================
+   === Review fixes 2 (košík popup, mobil logo, mobil drawer) ===
+   ============================================================ */
+
+/* --- #2 Cart hover popup (#cart-widget) --- */
+/* Popup je position:absolute vůči body, vendor ho zarovnal na pravý okraj .container (1573),
+   ale košík sahá až na gutter (vw - 60) → popup mířil "vedle". Zarovnat pravou hranu na gutter. */
+@media (min-width: 1024px) {
+    #cart-widget.cart-widget,
+    .user-action-cart.cart-widget {
+        left: auto !important;
+        right: var(--gl-gutter) !important;
+        margin-left: 0 !important;
+    }
+}
+/* Horizontální scrollbar pryč — vendor řádek (display:table) se roztahuje nad šířku */
+#cart-widget .cart-widget-products,
+.cart-widget .cart-widget-products {
+    overflow-x: hidden !important;
+}
+#cart-widget .cart-widget-products-inner,
+#cart-widget .cart-widget-product {
+    max-width: 100% !important;
+    table-layout: fixed;
+}
+/* "Pokračovat do košíku" — vendor teal/gradient → černá (barva šablony) */
+#cart-widget .btn-conversion,
+#cart-widget a.btn-conversion,
+.cart-widget .btn.btn-conversion {
+    background: var(--gl-black) !important;
+    background-color: var(--gl-black) !important;
+    background-image: none !important;
+    color: var(--gl-white) !important;
+    border: 0 !important;
+    transition: background .15s !important;
+}
+#cart-widget .btn-conversion:hover,
+#cart-widget a.btn-conversion:hover,
+.cart-widget .btn.btn-conversion:hover {
+    background: #1a1a1a !important;
+    background-color: #1a1a1a !important;
+    color: var(--gl-white) !important;
+}
+
+@media (max-width: 1023px) {
+    /* --- #7 Mobil logo — vendor dává .site-name { position:absolute; top:-50px }
+       (mobile-header-version-1) → logo skočí na y=0 pod neprůhlednou top-navigation-bar.
+       Vrátit do toku, ať se zobrazí v header-top. --- */
+    header#header .site-name {
+        position: static !important;
+        top: auto !important;
+        left: auto !important;
+    }
+    header#header .site-name-wrapper {
+        display: flex;
+        align-items: center;
+        width: auto;
+        height: auto;
+    }
+
+    /* === #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;
+    }
+    .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;
+    }
+}