galali-shoptet 1.0.7 → 1.0.9

package/package.json

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

package/style.css

@@ -6656,3 +6656,515 @@ body.type-detail .content-wrapper-in {
         text-align: center !important;
     }
 }
+
+/* ============================================================
+   === Review fixes 4 (desktop polish dle improvement.txt) ===
+   ============================================================ */
+
+/* --- #1 Top bar: menu odkazy vertikálně na střed + rovnoměrné oddělovače ---
+   Vendor přebíjí .top-navigation-menu na display:block (UL pak sedí nahoře,
+   ne na středu). Vendor oddělovač li::before "|" je position:absolute → nestejné
+   rozestupy. Force flex-center + oddělovač static, symetrický v mezeře. */
+.top-navigation-bar .top-navigation-menu {
+    display: flex !important;
+    align-items: center !important;
+}
+.top-navigation-bar ul.top-navigation-bar-menu {
+    align-items: center;
+    height: auto;
+    gap: 0 !important;
+}
+.top-navigation-bar ul.top-navigation-bar-menu > li > a {
+    padding: 0 13px;
+}
+.top-navigation-bar ul.top-navigation-bar-menu > li::before {
+    content: "|" !important;
+    position: static !important;
+    display: inline-block !important;
+    margin: 0 !important;
+    color: var(--gl-mute);
+    font-weight: var(--gl-w-regular);
+    line-height: 1;
+    align-self: center;
+}
+.top-navigation-bar ul.top-navigation-bar-menu > li:first-child::before {
+    content: none !important;
+    display: none !important;
+}
+
+/* --- #2 Breadcrumbs: domeček + vertikální zarovnání + čisté oddělovače ---
+   Vendor dává linkům min-height:38px (text pak sedí nahoře → "Pexesa, karty"
+   vypadá níž) a chevron přes a::before/a::after. Zrušit obojí, oddělovač řešit
+   přes .navigation-bullet jako "›", na první položku přidat ikonu domečku. */
+body:not(.in-index) .breadcrumbs a,
+body:not(.in-index) .breadcrumbs span {
+    min-height: 0 !important;
+    height: auto !important;
+    line-height: 1;
+}
+body:not(.in-index) .breadcrumbs a::before,
+body:not(.in-index) .breadcrumbs a::after {
+    content: none !important;
+    display: none !important;
+}
+body:not(.in-index) .breadcrumbs > span {
+    display: inline-flex !important;
+    align-items: center;
+}
+/* Oddělovač "›" z navigation-bullet (vendor "/" skrytý display:none) */
+body:not(.in-index) .breadcrumbs .navigation-bullet {
+    display: inline-flex !important;
+    align-items: center;
+    width: auto !important;
+    height: auto !important;
+    margin: 0 4px !important;
+    padding: 0 !important;
+    font-size: 0 !important;
+    color: var(--gl-fg-2);
+    opacity: .5;
+}
+body:not(.in-index) .breadcrumbs .navigation-bullet::before {
+    content: "\203A"; /* › */
+    font-size: 18px;
+    line-height: 1;
+}
+/* Ikona domečku na první (home) položce */
+body:not(.in-index) .breadcrumbs a.navigation-home-icon {
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+    width: 18px !important;
+    height: 18px !important;
+    min-height: 18px !important;
+    flex: 0 0 18px;
+    padding: 0 !important;
+    background: center / 16px 16px no-repeat
+        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5'/><path d='M5 9.5V20h14V9.5'/></svg>") !important;
+    opacity: .55;
+    transition: opacity .15s;
+}
+body:not(.in-index) .breadcrumbs a.navigation-home-icon:hover { opacity: .9; }
+
+/* --- #3 Řazení produktů: položky namačkané (column-gap normal=0) → provzdušnit ---
+   .listSorting (div wrapper) má gap, ale skutečný UL .listSorting__controls ne. */
+ul.listSorting__controls {
+    display: flex !important;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 28px !important;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/* --- #4 Filtr: čitelný 2-sloupcový layout v šedivém kontejneru + černý slider ---
+   col1 = Cena (slider), col2 = ostatní filtry (skladem + značky). */
+#filters.filters.visible {
+    display: grid !important;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px 48px;
+    align-items: start;
+    background: var(--gl-paper-2);
+    padding: 28px 32px;
+    margin: 0 0 32px;
+    box-sizing: border-box;
+}
+#filters.filters.visible .slider-wrapper {
+    grid-column: 1;
+    grid-row: 1;
+    width: 100% !important;
+    max-width: none !important;
+    margin: 0 !important;
+    left: auto !important;
+    box-sizing: border-box;
+}
+#filters.filters.visible #price-filter-form {
+    grid-column: 1;
+    grid-row: 2;
+    margin: 0;
+}
+#filters.filters.visible .filter-sections {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+    margin: 0;
+}
+/* Slider modrý (jQuery UI) → černý */
+#filters .ui-slider-range {
+    background: var(--gl-fg-1) !important;
+}
+#filters .ui-slider-handle {
+    background: var(--gl-fg-1) !important;
+    border-color: var(--gl-fg-1) !important;
+}
+
+/* --- #5 Patička: logo zarovnat nahoru + start kontejneru jako copyright ---
+   Vendor dává .site-name position:absolute (top:96px, left:20px) → logo plave
+   dolů a vlevo. Static ho vrátí do flow → respektuje footer-rows padding (60px)
+   = stejný start jako footer-bottom (copyright), a top-align s ostatními sloupci. */
+footer#footer .footer-rows .site-name {
+    position: static !important;
+    top: auto !important;
+    left: auto !important;
+}
+/* Bootstrap `.container::before/::after` clearfix se ve flex containeru chová jako
+   flex-item (0 šířky) → posune první obsah o `gap` (logo +60, copyright +16) →
+   logo nezačínalo na stejné x jako copyright. Skrýt phantom pseudo-itemy. */
+footer#footer .container.footer-rows::before,
+footer#footer .container.footer-rows::after,
+footer#footer .container.footer-bottom::before,
+footer#footer .container.footer-bottom::after,
+footer#footer .footer-bottom::before,
+footer#footer .footer-bottom::after {
+    display: none !important;
+    content: none !important;
+}
+
+/* --- #7 Detail produktu: hodnocení/značka/cena k sobě + stepper polish ---
+   Obrázek (col1) spanuje 3 grid-řádky (~700px) → nafoukne auto-řádky a vznikne
+   obří mezera mezi značkou (row2) a cenou (row3). Poslední řádek na 1fr →
+   přebytečný prostor jde POD cenu, ne mezi značku a cenu. */
+body.type-detail .p-detail-inner {
+    grid-template-rows: min-content min-content 1fr !important;
+    row-gap: 8px !important;
+}
+body.type-detail .row.product-top > .col-lg-6.p-info-wrapper,
+body.type-detail .row.product-top > .p-info-wrapper {
+    margin-top: 16px !important; /* malý odstup značka → cena, ne 170px */
+}
+
+/* Stepper: vendor zabíjí pravý border (border-right:0 → "useknutá pravá část").
+   Vynutit celý rámeček. */
+body.type-detail span.quantity {
+    border: 1px solid var(--gl-stroke-1) !important;
+}
+/* Odstup stepperu od "Přidat do košíku" (bylo nalepené 12px) */
+body.type-detail div.add-to-cart {
+    gap: 18px !important;
+}
+/* "Šipka nad jedničkou" = vendor increase/decrease tooltip (pop-up nad buttonem
+   s CSS šipkou). Skrýt úplně. */
+body.type-detail span.quantity .increase-tooltip,
+body.type-detail span.quantity .decrease-tooltip,
+body.type-detail span.quantity .js-increase,
+body.type-detail span.quantity .js-decrease {
+    display: none !important;
+}
+/* Pojistka: number spinner úplně pryč (i bez .amount class) */
+body.type-detail span.quantity input[type="number"]::-webkit-inner-spin-button,
+body.type-detail span.quantity input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none !important;
+    appearance: none !important;
+    display: none !important;
+    margin: 0 !important;
+}
+
+/* --- #8 Cart hover popup: čitelný layout řádku produktu ---
+   Vendor řádek je display:table; navíc detail span.quantity (52px) prosakuje
+   do widgetu na detail stránce → stepper přeteče buňku a překryje název/cenu.
+   Přestavit na flex [obrázek | název+cena | stepper | ×] + kompaktní stepper. */
+#cart-widget .cart-widget-product {
+    display: flex !important;
+    align-items: center;
+    gap: 14px;
+    width: 100% !important;
+    box-sizing: border-box;
+    padding: 4px 0;
+}
+#cart-widget .cart-widget-product > * {
+    display: block !important; /* zrušit table-cell */
+}
+#cart-widget .cart-widget-product-image {
+    order: 1;
+    flex: 0 0 56px;
+    width: 56px !important;
+}
+#cart-widget .cart-widget-product-image a,
+#cart-widget .cart-widget-product-image img {
+    width: 56px !important;
+    height: 56px !important;
+    object-fit: cover;
+}
+#cart-widget .cart-widget-product-name {
+    order: 2;
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex !important;
+    flex-direction: column;
+    gap: 2px;
+    text-align: left !important;
+}
+#cart-widget .cart-widget-product-name strong {
+    font-family: var(--gl-font-ui);
+    font-size: 14px;
+    font-weight: var(--gl-w-medium);
+    line-height: 1.3;
+    color: var(--gl-fg-1);
+}
+#cart-widget .cart-widget-product-name span {
+    font-size: 14px;
+    color: var(--gl-fg-2);
+}
+#cart-widget .cart-widget-product-unit {
+    display: none !important; /* "ks" redundantní */
+}
+#cart-widget .cart-widget-product-amount {
+    order: 3;
+    flex: 0 0 auto;
+}
+#cart-widget .cart-widget-product-delete {
+    order: 4;
+    flex: 0 0 auto;
+}
+/* Kompaktní stepper ve widgetu (override detail leak) */
+#cart-widget span.quantity {
+    height: 32px !important;
+    border: 1px solid var(--gl-stroke-1) !important;
+    width: auto !important;
+}
+#cart-widget span.quantity button.increase,
+#cart-widget span.quantity button.decrease {
+    width: 26px !important;
+    min-width: 26px !important;
+    height: 30px !important;
+    font-size: 14px !important;
+}
+#cart-widget span.quantity > label,
+#cart-widget span.quantity input.amount,
+#cart-widget span.quantity input[type="number"] {
+    width: 32px !important;
+    height: 30px !important;
+    font-size: 14px !important;
+    line-height: 30px !important;
+}
+/* Tooltip "šipka nad 1" + spinner pryč i ve widgetu */
+#cart-widget .increase-tooltip,
+#cart-widget .decrease-tooltip,
+#cart-widget .js-increase,
+#cart-widget .js-decrease {
+    display: none !important;
+}
+#cart-widget input[type="number"]::-webkit-inner-spin-button,
+#cart-widget input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none !important;
+    appearance: none !important;
+    display: none !important;
+}
+/* "Dopravu máte zdarma!" — zvýraznit + oddělit (vendor fialová na child elementu) */
+#cart-widget .cart-free-shipping {
+    display: block !important;
+    background: var(--gl-paper-2) !important;
+    padding: 10px 14px !important;
+    margin: 10px 0 !important;
+    text-align: center !important;
+    border-radius: 2px;
+}
+#cart-widget .cart-free-shipping,
+#cart-widget .cart-free-shipping * {
+    color: var(--gl-fg-1) !important;
+    font-weight: var(--gl-w-medium) !important;
+}
+
+/* --- #9 Checkout krok-1/2/3: sidebar překrývá formulář (blokuje klikání) ---
+   Grid layout je scoped na `#cart-wrapper .row.cart-row`, ale na checkout krocích
+   je `.row.cart-row` pod `.cart-inner > main.content` (NE #cart-wrapper) → grid se
+   neaplikuje, row zůstane display:block. #checkoutSidebar má width:100% (grid-column:2
+   ignorováno) → plovoucí přes col-md-8 → elementFromPoint vrací sidebar = nelze klikat.
+   Řešení: aplikovat grid i mimo #cart-wrapper přes body.ordering-process. */
+body.ordering-process .row.cart-row {
+    display: grid !important;
+    grid-template-columns: 1fr 380px;
+    grid-template-rows: auto;
+    gap: 40px;
+    margin: 0 !important;
+    direction: ltr !important;
+}
+body.ordering-process .row.cart-row > #checkoutContent.col-md-8,
+body.ordering-process .row.cart-row > .col-md-8 {
+    box-sizing: border-box;
+    width: 100% !important;
+    max-width: none !important;
+    margin: 0 !important;
+    float: none !important;
+    grid-column: 1 !important;
+    grid-row: 1 !important;
+    direction: ltr;
+}
+body.ordering-process .row.cart-row > #checkoutSidebar.col-md-4,
+body.ordering-process .row.cart-row > .col-md-4 {
+    box-sizing: border-box;
+    width: 100% !important;
+    max-width: none !important;
+    margin: 0 !important;
+    float: none !important;
+    grid-column: 2 !important;
+    grid-row: 1 !important;
+    direction: ltr;
+}
+/* Mobil: stack pod sebe (1 sloupec), reset grid-column na obou */
+@media (max-width: 1023px) {
+    body.ordering-process .row.cart-row {
+        grid-template-columns: 1fr !important;
+        gap: 28px;
+    }
+    body.ordering-process .row.cart-row > #checkoutContent.col-md-8,
+    body.ordering-process .row.cart-row > .col-md-8,
+    body.ordering-process .row.cart-row > #checkoutSidebar.col-md-4,
+    body.ordering-process .row.cart-row > .col-md-4 {
+        grid-column: 1 !important;
+    }
+    body.ordering-process .row.cart-row > #checkoutSidebar.col-md-4,
+    body.ordering-process .row.cart-row > .col-md-4 {
+        grid-row: 2 !important;
+    }
+}
+
+/* --- #6a Našeptávač (.search-whisperer): černé písmo + černý border + padding ---
+   Vendor má modré písmo (rgb(16,118,183)), žádný border, padding 5px (nalepené). */
+.search-whisperer {
+    border: 1px solid var(--gl-stroke-1) !important;
+    border-top: 0 !important; /* navazuje na input s černým borderem */
+    background: var(--gl-white) !important;
+    padding: 8px !important;
+    box-shadow: none !important;
+    box-sizing: border-box;
+}
+.search-whisperer,
+.search-whisperer a,
+.search-whisperer span,
+.search-whisperer em,
+.search-whisperer li,
+.search-whisperer strong,
+.search-whisperer .search-whisperer-document {
+    color: var(--gl-fg-1) !important;
+}
+.search-whisperer a,
+.search-whisperer .search-whisperer-document {
+    display: block;
+    padding: 9px 12px !important;
+    text-decoration: none !important;
+    border-radius: 2px;
+    transition: background .12s;
+}
+.search-whisperer a:hover,
+.search-whisperer .search-whisperer-document:hover,
+.search-whisperer li:hover > a {
+    background: var(--gl-paper-2) !important;
+    color: var(--gl-fg-1) !important;
+}
+/* Nadpisy skupin (Kategorie / Produkty / Články) */
+.search-whisperer .search-whisperer-title,
+.search-whisperer h3,
+.search-whisperer .whisperer-heading {
+    color: var(--gl-fg-2) !important;
+    font-family: var(--gl-font-ui);
+    font-size: 12px;
+    font-weight: var(--gl-w-medium);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    padding: 8px 12px 4px !important;
+}
+
+/* --- #6b Výsledky vyhledávání: produkty do gridu jako kategorie (ne starý flex) --- */
+body.type-search .products.products-block,
+body.in-vyhledavani .products.products-block {
+    display: grid !important;
+    grid-template-columns: repeat(4, 1fr) !important;
+    column-gap: 40px !important;
+    row-gap: 50px !important;
+    flex-wrap: nowrap !important;
+    margin: 0 0 40px !important;
+    padding: 0 !important;
+}
+body.type-search .products.products-block > .product {
+    box-sizing: border-box;
+    width: auto !important;
+    max-width: none !important;
+    flex: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    background: transparent !important;
+    border: 0 !important;
+    box-shadow: none !important;
+}
+body.type-search .products.products-block .product > .p,
+body.type-search .products.products-block .product div.p {
+    display: flex !important;
+    flex-direction: column;
+    gap: 14px;
+    height: auto;
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+}
+body.type-search .products.products-block .product a.image {
+    display: block;
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    margin: 0;
+    background: var(--gl-surface-alt);
+    overflow: hidden;
+    border-radius: 0;
+}
+body.type-search .products.products-block .product a.image img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform .4s ease;
+}
+body.type-search .products.products-block .product:hover a.image img {
+    transform: scale(1.04);
+}
+body.type-search .products.products-block .product a.name {
+    display: block;
+    height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+    min-height: 52px;
+    margin: 0;
+    padding: 0;
+    color: var(--gl-fg-1);
+    text-decoration: none;
+    font-family: var(--gl-font-ui);
+    font-size: 20px;
+    font-weight: var(--gl-w-medium);
+    line-height: 26px;
+}
+body.type-search .products.products-block .product a.name:hover {
+    text-decoration: underline;
+    text-underline-offset: 4px;
+}
+body.type-search .products.products-block .product .price.price-final,
+body.type-search .products.products-block .product .price.price-final strong {
+    color: var(--gl-fg-1);
+    font-family: var(--gl-font-ui);
+    font-size: 20px;
+    font-weight: var(--gl-w-regular);
+    line-height: 24px;
+}
+/* Skrýt vendor meta na search kartách (kód, dostupnost, hvězdy, tlačítka) */
+body.type-search .products.products-block .product .ratings-wrapper,
+body.type-search .products.products-block .product .stars-wrapper,
+body.type-search .products.products-block .product .availability,
+body.type-search .products.products-block .product .p-code,
+body.type-search .products.products-block .product .p-desc,
+body.type-search .products.products-block .product .p-tools,
+body.type-search .products.products-block .product .add-to-cart {
+    display: none !important;
+}
+@media (max-width: 1279px) {
+    body.type-search .products.products-block {
+        grid-template-columns: repeat(3, 1fr) !important;
+        column-gap: 24px !important; row-gap: 36px !important;
+    }
+}
+@media (max-width: 767px) {
+    body.type-search .products.products-block {
+        grid-template-columns: repeat(2, 1fr) !important;
+        column-gap: 12px !important; row-gap: 24px !important;
+    }
+    body.type-search .products.products-block .product a.name { font-size: 14px; line-height: 18px; min-height: 36px; }
+    body.type-search .products.products-block .product .price.price-final { font-size: 14px; }
+}