galali-shoptet 1.0.11 → 1.0.12

package/package.json

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

package/style.css

@@ -3279,7 +3279,7 @@ table.cart-table td.p-total {
     width: 160px;
     text-align: right;
     position: relative;
-    padding-right: 40px !important;
+    padding-right: 0;
 }
 table.cart-table td.p-total strong.price-final {
     color: var(--gl-fg-1);
@@ -3289,24 +3289,27 @@ 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;
+    /*! 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;
+    /*! 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;
 }
 table.cart-table td.p-total button.remove-item:hover {
-    opacity: .6;
+    opacity: 1;
 }
 table.cart-table td.p-total button.remove-item:focus-visible {
     outline: 2px solid var(--gl-fg-1);
@@ -3339,8 +3342,7 @@ table.cart-table td.p-total button.remove-item .sr-only {
     background: transparent;
 }
 .cart-summary .extras-wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+    display: flex;
     gap: 24px;
     align-items: start;
 }
@@ -3357,7 +3359,7 @@ table.cart-table td.p-total button.remove-item .sr-only {
     display: flex;
     align-items: center;
     gap: 10px;
-    padding: 14px 18px;
+    padding: 14px 18px 14px 56px;
     background: var(--gl-paper-2);
     border: 1px solid var(--gl-divider);
     color: var(--gl-fg-1);
@@ -3371,6 +3373,8 @@ table.cart-table td.p-total button.remove-item .sr-only {
     height: 22px;
     background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='1.4'><path d='M2 6h11v8H2z'/><path d='M13 9h4l3 3v2h-7'/><circle cx='6' cy='16' r='1.8'/><circle cx='16' cy='16' r='1.8'/></svg>") center/contain no-repeat;
     flex-shrink: 0;
+    margin-top: -13px;
+    margin-left: 20px;
 }
 .cart-summary .extra.delivery span { display: inline; }
 .cart-summary .extra.delivery strong {
@@ -3395,7 +3399,7 @@ table.cart-table td.p-total button.remove-item .sr-only {
 .sidebar-in-cart .box-bg-default {
     padding: 24px;
     margin: 0;
-    background: var(--gl-paper-2);
+    background: white;
     border: 1px solid var(--gl-divider);
     border-radius: 0;
     box-shadow: none;
@@ -3596,11 +3600,7 @@ body.in-kosik main#content > h1 {
 }
 
 /* HLEDAT button v search formách — kompletní override (purple → black) */
-button.btn-default[type="submit"],
-button[type="submit"].btn-default,
-button[type="submit"].btn-primary,
-button[type="submit"][value="Hledat"],
-form button[type="submit"]:not(#orderFormButton):not(.btn-conversion):not(.add-to-cart) {
+button.btn-default[type="submit"], button[type="submit"].btn-default, button[type="submit"].btn-primary, button[type="submit"][value="Hledat"] {
     background: var(--gl-black) !important;
     background-image: none !important;
     color: var(--gl-white) !important;
@@ -3975,6 +3975,9 @@ body.ordering-process .form-control:focus-visible {
     background: radial-gradient(var(--gl-fg-1) 0 6px, var(--gl-white) 7px 100%);
     border-color: var(--gl-fg-1);
 }
+.shipping-billing-table .radio-wrapper.active label::after, .shipping-billing-table .radio-wrapper:has(input:checked) label::after {
+    display:none;
+}
 .shipping-billing-table .radio-wrapper:focus-within label::before {
     outline: 2px solid var(--gl-fg-1);
     outline-offset: 4px;
@@ -4115,7 +4118,7 @@ body.ordering-process .form-control:focus-visible {
     box-sizing: border-box;
     padding: 24px;
     margin: 0;
-    background: var(--gl-paper-2);
+    background: white;
     border: 1px solid var(--gl-divider);
     border-radius: 0;
     box-shadow: none;
@@ -4143,11 +4146,13 @@ body.ordering-process .form-control:focus-visible {
 .cart-item {
     display: grid;
     grid-template-columns: 1fr auto auto;
-    gap: 12px;
-    padding: 8px 0;
+    gap: 0;
+    padding: 0px 0;
     align-items: baseline;
     font-family: var(--gl-font-ui);
     font-size: 14px;
+    align-items: stretch;
+    margin-bottom: -1px;
 }
 .cart-item + .cart-item {
     border-top: 1px solid var(--gl-divider);
@@ -4418,6 +4423,179 @@ button.btn-conversion:focus-visible {
     outline-offset: 3px;
 }
 
+/* === Krok-2 (informace o vás) — opravy zarovnání desktop === */
+
+/* 1) Sekční heading (Osobní údaje / Fakturační adresa / …) — vendor dává
+   `margin-left:-120px; padding-left:120px` + absolutní ::before ikonu v levém
+   gutteru (mimo kartu). Tyhle h4 NEmají class `.order-icon`, takže je moje
+   `.box h4.order-icon` pravidla míjela. Normalizuj na inline heading s ikonou. */
+body.ordering-process .cart-content fieldset > h4 {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin: 0 0 24px !important;
+    margin-left: 0 !important;
+    padding: 0 0 16px !important;
+    padding-left: 0 !important;
+    position: static !important;
+    border-bottom: 1px solid var(--gl-divider);
+    background: transparent !important;
+    background-image: none !important;
+    color: var(--gl-fg-1);
+    font-family: var(--gl-font-ui);
+    font-size: 14px;
+    font-weight: var(--gl-w-medium);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+body.ordering-process .cart-content fieldset > h4::before {
+    content: "" !important;
+    display: inline-flex !important;
+    position: static !important;
+    left: auto !important;
+    top: auto !important;
+    flex-shrink: 0;
+    width: 28px !important;
+    height: 28px !important;
+    margin: 0 !important;
+    border-radius: 50% !important;
+    background-color: var(--gl-paper-3) !important;
+    background-repeat: no-repeat !important;
+    background-position: center !important;
+    background-size: 16px 16px !important;
+    /* default: osoba */
+    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='black' stroke-width='1.3'><circle cx='8' cy='5' r='2.4'/><path d='M3.4 13c0-2.5 2-4.2 4.6-4.2s4.6 1.7 4.6 4.2'/></svg>") !important;
+}
+body.ordering-process .cart-content fieldset > h4::after { content: none !important; display: none !important; }
+/* Fakturační / doručovací adresa → pin ikona (vyšší specificita než base rule) */
+body.ordering-process .cart-content fieldset > h4.header-billing::before,
+body.ordering-process .cart-content fieldset > h4.header-delivery::before,
+body.ordering-process .cart-content fieldset > h4.header-shipping::before {
+    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='black' stroke-width='1.3'><path d='M8 1.6c2.2 0 4 1.8 4 4 0 3-4 8.4-4 8.4S4 8.6 4 5.6c0-2.2 1.8-4 4-4z'/><circle cx='8' cy='5.6' r='1.5'/></svg>") !important;
+}
+
+/* 2) Karty sekcí — sjednotit šířku + zarovnání. Billing/delivery fieldset nemá
+   `.co-box`, takže moje `.box.co-box` karta ho míjela → bez rámečku, odsazený
+   (x220 vs x100). `:has(> h4)` cílí jen sekce s headingem (ne prázdné boxy). */
+body.ordering-process .cart-content fieldset:has(> h4) {
+    box-sizing: border-box;
+    width: 100% !important;
+    max-width: none !important;
+    margin: 0 0 24px !important;
+    padding: 28px 32px !important;
+    background: var(--gl-white);
+    border: 1px solid var(--gl-divider);
+    border-radius: 0;
+    box-shadow: none;
+}
+
+/* 2b) Wrapper `div.co-box` (co-billing-address / co-delivery-address) má vendor
+   `padding-left:120px` (rezerva pro starou gutter ikonu) → odsazuje fieldset kartu
+   na x220/w1085 místo x100/w1285. Ikony jsou teď inline → gutter zrušit. */
+body.ordering-process .cart-content div.co-box,
+body.ordering-process .cart-content div.co-billing-address,
+body.ordering-process .cart-content div.co-delivery-address {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    margin-left: 0 !important;
+}
+
+/* 3) Telefon input — vendor `.phone-combined-input` je shrink-fit (max-width:217px),
+   tel input jen 129px. Roztáhnout na plnou šířku form-group. */
+body.ordering-process .phone-combined-input {
+    width: 100% !important;
+    max-width: none !important;
+    gap: 8px;
+}
+body.ordering-process .phone-combined-input .country-flags { flex: 0 0 auto !important; }
+body.ordering-process .phone-combined-input input.form-control,
+body.ordering-process .phone-combined-input input[type="tel"],
+body.ordering-process .phone-combined-input input.js-phone-form-control {
+    flex: 1 1 auto !important;
+    width: auto !important;
+    min-width: 0 !important;
+}
+
+/* 4) Checkbox přes text — `company-shopping` label má padding-left:0, absolutní
+   checkbox (20px) tak leze do textu "Nakupuji na firmu". Odsadit label. */
+body.ordering-process .form-group.company-shopping label,
+body.ordering-process label[for="company-shopping"],
+body.ordering-process label[for="add-note"],
+body.ordering-process label[for="set-registration"] {
+    padding-left: 30px !important;
+    position: relative;
+    cursor: pointer;
+}
+
+/* 5) Objednat button — skutečné id je `#submit-order.next-step-finish`
+   (ne #orderFormButton). Má 2 řádky ("Objednat" + "s povinností platby") ve
+   fixní výšce 52px → text přetéká. Column layout + auto výška + bez šipky. */
+body.ordering-process button#submit-order,
+body.ordering-process button.btn-conversion.next-step-finish,
+button.btn-conversion.next-step-finish {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 2px !important;
+    height: auto !important;
+    min-height: 60px !important;
+    padding: 12px 24px !important;
+    line-height: 1.15 !important;
+}
+body.ordering-process button#submit-order::after,
+button.btn-conversion.next-step-finish::after {
+    content: none !important;
+    display: none !important;
+}
+body.ordering-process button#submit-order .order-button-text,
+button.next-step-finish .order-button-text {
+    font-size: 15px !important;
+    font-weight: var(--gl-w-medium) !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.08em !important;
+    line-height: 1.1 !important;
+}
+body.ordering-process button#submit-order .order-button-suffix,
+button.next-step-finish .order-button-suffix {
+    font-size: 11px !important;
+    font-weight: var(--gl-w-regular, 400) !important;
+    text-transform: none !important;
+    letter-spacing: 0.02em !important;
+    line-height: 1.1 !important;
+    opacity: 0.82;
+}
+
+/* 6) Validační hlášky — vendor `.js-validator-msg.msg-error` má `margin: 5px 0 5px 175px`
+   (175px levý odsazení z inline layoutu) → hláška odsazená ~175px vpravo od levé hrany
+   pole. Ve stacked layoutu zarovnat pod pole (label/input left). */
+body.ordering-process .js-validator-msg,
+body.ordering-process .js-validator-msg.msg-error,
+body.ordering-process div.msg-error {
+    margin: 6px 0 2px !important;
+    padding: 0 !important;
+    font-family: var(--gl-font-ui) !important;
+    font-size: 13px !important;
+    line-height: 1.4 !important;
+    color: #d33a36 !important;
+}
+/* Invalid inputy — vendor dává `.error-field`/`.js-error-field`, ale moje generické
+   input pravidlo drží černý border → uživatel nepozná chybné pole. Červený rámeček. */
+body.ordering-process input.error-field,
+body.ordering-process input.js-error-field,
+body.ordering-process .error-field.form-control,
+body.ordering-process select.error-field,
+body.ordering-process textarea.error-field,
+body.ordering-process .js-error-field.form-control {
+    border-color: #d33a36 !important;
+    box-shadow: 0 0 0 1px rgba(211, 58, 54, .18) !important;
+}
+body.ordering-process input.error-field:focus,
+body.ordering-process input.js-error-field:focus {
+    border-color: #d33a36 !important;
+    box-shadow: 0 0 0 2px rgba(211, 58, 54, .22) !important;
+}
+
 /* Back step link */
 .next-step .next-step-back,
 .next-step a.next-step-back,
@@ -7180,3 +7358,4 @@ body.type-search .products.products-block .product .add-to-cart {
     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; }
 }
+