galali-shoptet 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "galali-shoptet",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "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,7 +1129,7 @@ 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; }
@@ -1254,6 +1259,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,11 +1332,12 @@ 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 > .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 > .products.products-block { grid-template-columns: repeat(2, 1fr); column-gap: 12px; row-gap: 24px; }
@@ -1402,17 +1414,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 +1443,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 +1686,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; }
 }
 
 /* ============================================ */
@@ -4919,17 +4940,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;
 }
 
@@ -6389,3 +6430,83 @@ 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 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;
+    }
+
+    /* --- #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. --- */
+    body.navigation-window-visible header#header {
+        z-index: 300 !important;
+    }
+}