/* ========================================================================= LumoMeble - sklep: listy, karta produktu, konfigurator, side cart, koszyk, zamówienie, moje konto, filtry. ========================================================================= */ .lumo-shop { padding-bottom: 96px; } @media (max-width: 1280px) { .lumo-shop { padding-bottom: 90px; } } @media (max-width: 1100px) { .lumo-shop { padding-bottom: 70px; } } @media (max-width: 600px) { .lumo-shop { padding-bottom: 48px; } } /* ---------- Komunikaty WooCommerce ---------- */ .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 20px 0; padding: 14px 18px 14px 48px; position: relative; border-radius: var(--lumo-radius-sm); background: var(--lumo-bg-2); font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: ""; position: absolute; left: 18px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--lumo-ok); } .woocommerce-info::before { background: var(--lumo-ink); } .woocommerce-error { background: var(--lumo-danger-soft); } .woocommerce-error::before { background: var(--lumo-danger); } .woocommerce-error li { width: 100%; } .woocommerce-message .button, .woocommerce-info .button { order: 2; } /* ---------- Przyciski WooCommerce ---------- */ .woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .woocommerce #respond input#submit, .wc-block-components-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 22px; border: 0; border-radius: 999px; background: var(--lumo-ink); color: #fff; font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .25s, color .25s, transform .25s var(--lumo-ease), box-shadow .25s; } .woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover { background: var(--lumo-accent); color: var(--lumo-on-accent); transform: translateY(-1px); } .woocommerce .button.alt, .woocommerce button.button.alt, .single_add_to_cart_button, #place_order, .checkout-button { background: var(--lumo-accent) !important; color: var(--lumo-on-accent) !important; min-height: 56px; padding-inline: 32px; font-size: 16px; } .woocommerce .button.alt:hover, .single_add_to_cart_button:hover, #place_order:hover, .checkout-button:hover { background: var(--lumo-accent-dark) !important; box-shadow: 0 10px 26px rgba(232, 190, 40, .3); } .woocommerce .button.loading { opacity: .6; } .woocommerce .button.added::after { content: "✓"; margin-left: 4px; } .added_to_cart { display: none !important; } /* ---------- Pola WooCommerce ---------- */ .woocommerce form .form-row { margin: 0 0 16px; padding: 0; } .woocommerce form .form-row label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--lumo-ink-2); } .woocommerce form .form-row .required { color: var(--lumo-danger); text-decoration: none; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-cart .coupon input, .select2-container .select2-selection--single, .woocommerce .quantity .qty { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--lumo-input-line); border-radius: var(--lumo-radius-sm); background: #fff; font-size: 15px; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { outline: 0; border-color: var(--lumo-ink); box-shadow: 0 0 0 4px rgba(29, 27, 25, .07); } .woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--lumo-danger); } .select2-container .select2-selection--single { height: 48px; display: flex; align-items: center; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; right: 8px; } .select2-dropdown { border-color: var(--lumo-line); border-radius: var(--lumo-radius-sm); overflow: hidden; } .woocommerce .quantity .qty { width: 84px; text-align: center; } .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: calc(50% - 8px); float: left; } .woocommerce form .form-row-last { float: right; } .woocommerce form .form-row-wide { clear: both; } @media (max-width: 640px) { .woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; float: none; } } /* ---------- Ceny, odznaki ---------- */ .price { color: var(--lumo-ink); font-weight: 600; } .price del { color: var(--lumo-muted); font-weight: 400; margin-right: 6px; font-size: .88em; } .price ins { text-decoration: none; color: var(--lumo-accent-ink); } .lumo-price-from small { font-weight: 400; color: var(--lumo-muted); font-size: .8em; } .lumo-price-net { font-family: var(--lumo-font); font-size: 15px; font-weight: 500; color: var(--lumo-muted); } .lumo-price-gross { flex-basis: 100%; display: block; margin-top: 2px; font-family: var(--lumo-font); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--lumo-muted); } .lumo-price-quote { color: var(--lumo-muted); font-weight: 500; } .lumo-badge { display: inline-block; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; background: #fff; color: var(--lumo-ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); } .lumo-badge--cfg { background: var(--lumo-accent); color: var(--lumo-on-accent); } .lumo-badge--sale { background: var(--lumo-accent); color: var(--lumo-on-accent); } .lumo-badge--hl { background: var(--lumo-ink); color: #fff; } .onsale { position: absolute; top: 14px; left: 14px; z-index: 3; padding: 6px 12px; border-radius: 999px; background: var(--lumo-accent); color: var(--lumo-on-accent); font-size: 12px; font-weight: 700; } /* ---------- Siatka produktów ---------- */ .woocommerce ul.products, .wc-block-grid__products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; list-style: none; margin: 0 0 40px; padding: 0; } @media (max-width: 1280px) { .woocommerce ul.products, .wc-block-grid__products { gap: 31px 24px; } } @media (max-width: 1100px) { .woocommerce ul.products, .wc-block-grid__products { gap: 24px 20px; } } @media (max-width: 600px) { .woocommerce ul.products, .wc-block-grid__products { gap: 16px 12px; } } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none; } .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Katalog na komputerze: 4 produkty w rzędzie obok filtrów (laptopy do 1280 px: 3). */ .lumo-catalog .woocommerce ul.products, .lumo-catalog ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1280px) { .lumo-catalog .woocommerce ul.products, .lumo-catalog ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Nieskończone przewijanie (main.js): kolejne strony wjeżdżają łagodnie, pod listą loader albo „Pokaż więcej”. */ .lumo-catalog ul.products li.product.is-appended { animation: lumo-fade-up .35s var(--lumo-ease) both; animation-delay: var(--d, 0ms); } @keyframes lumo-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .lumo-more { display: grid; place-items: center; min-height: 80px; margin-top: 28px; } .lumo-more__spin { display: none; width: 34px; height: 34px; border: 3px solid var(--lumo-line); border-top-color: var(--lumo-ink); border-radius: 50%; animation: lumo-spin .8s linear infinite; } .lumo-more.is-loading .lumo-more__spin { display: block; } .lumo-more.is-loading button, .lumo-more.is-auto:not(.is-error) button { display: none; } @keyframes lumo-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .lumo-catalog ul.products li.product.is-appended { animation: none; } } @media (max-width: 1100px) { .woocommerce ul.products, .lumo-catalog ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 780px) { .woocommerce ul.products, .lumo-catalog ul.products, .lumo-catalog .woocommerce ul.products, .woocommerce ul.products.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* woocommerce-smallscreen.css daje kafelkom width: 48% i float - w siatce to psuło układ na telefonie. */ .woocommerce ul.products[class*="columns-"] li.product, .woocommerce-page ul.products[class*="columns-"] li.product { width: auto; margin: 0; float: none; clear: none; } /* Kafel produktu: biała karta, zdjęcie na ciepłym tle (białe tło zdjęć znika dzięki mnożeniu), drugie zdjęcie z galerii po najechaniu, serce (ulubione), odznaki, przycisk na całą szerokość. */ .woocommerce ul.products li.product { position: relative; display: flex; flex-direction: column; width: auto; margin: 0; float: none; padding: 10px 10px 14px; border: 1px solid var(--lumo-line); border-radius: 22px; background: #fff; transition: transform .45s var(--lumo-ease), box-shadow .45s var(--lumo-ease), border-color .3s; } .woocommerce ul.products li.product:hover { transform: translateY(-6px); box-shadow: var(--lumo-shadow-md); border-color: transparent; } .lumo-card__media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 16px; background: var(--lumo-card-bg); margin-bottom: 14px; isolation: isolate; } .lumo-card__media::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 10%; width: 70%; height: 10%; margin-left: -35%; border-radius: 50%; background: radial-gradient(rgba(22, 21, 19, .12), transparent 70%); transition: transform .8s var(--lumo-ease); } .lumo-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 1s var(--lumo-ease), opacity .5s; } .lumo-card__alt { position: absolute; inset: 0; opacity: 0; } li.product:hover .lumo-card__media img { transform: scale(1.06); } li.product:hover .lumo-card__media:has(.lumo-card__alt) img:first-child { opacity: 0; } li.product:hover .lumo-card__alt { opacity: 1; } li.product:hover .lumo-card__media::before { transform: scaleX(1.15); } .lumo-card__badges { position: absolute; top: 20px; left: 20px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; } .lumo-fav { position: absolute; top: 20px; right: 20px; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: var(--lumo-ink); box-shadow: 0 4px 14px rgba(22, 21, 19, .1); transition: transform .3s var(--lumo-ease), background-color .25s, opacity .3s; } .lumo-fav:hover { transform: scale(1.1); } .lumo-fav[aria-pressed="true"] { background: var(--lumo-accent); } .lumo-fav[aria-pressed="true"] svg { fill: currentColor; } .lumo-fav.is-pop { animation: lumo-bump .5s var(--lumo-ease); } @media (hover: hover) { .lumo-fav[aria-pressed="false"] { opacity: 0; } li.product:hover .lumo-fav, .lumo-fav:focus-visible { opacity: 1; } } .lumo-card__cat { margin: 0 6px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--lumo-muted); } .lumo-card__title { font-family: var(--lumo-font-display); font-size: 17px !important; font-weight: 600; line-height: 1.3; margin: 0 6px 8px; padding: 0 !important; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lumo-card__title a { text-decoration: none; } .lumo-card__title a::after { content: ""; position: absolute; inset: 0 0 70px 0; z-index: 1; } li.product .price { display: block; margin: 0 6px 8px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; } li.product .price .lumo-price-from small { font-size: 13px; } .lumo-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 6px 14px; font-size: 12.5px; color: var(--lumo-muted); } .lumo-card__meta .lumo-icon { flex: none; } .lumo-card__meta > .lumo-icon + span { margin-left: -6px; } .lumo-card__stock { display: inline-flex; align-items: center; gap: 6px; color: var(--lumo-ok); font-weight: 600; } .lumo-card__stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(31, 122, 67, .15); } .lumo-card__cfg { display: inline-flex; align-items: center; gap: 5px; color: var(--lumo-ink-2); font-weight: 500; } .lumo-card__cfg .lumo-icon { color: var(--lumo-accent-ink); } li.product .button, li.product .lumo-btn { margin-top: auto; width: 100%; position: relative; z-index: 2; min-height: 44px; padding: 10px 18px; font-size: 14px; background: var(--lumo-ink) !important; color: #fff !important; border: 0; } /* 1.20.0 (klient): wszystkie przyciski w kafelkach jednakowe - czarne jak „Konfiguruj” (jasny wyglądał na nieaktywny) */ li.product:hover .button, li.product:hover .lumo-btn { background: var(--lumo-ink) !important; color: #fff !important; } li.product .button:hover, li.product .lumo-btn:hover { background: #000 !important; color: #fff !important; } li.product .button.added, li.product .button.loading { background: var(--lumo-ink) !important; color: #fff !important; } /* "Konfiguruj": ciemny przycisk z trzema próbkami tkanin, które rozsuwają się po najechaniu, słowo podkreślone żółtym markerem */ .lumo-cfgbtn__sw { position: relative; display: inline-flex; flex: none; width: 34px; height: 18px; } .lumo-cfgbtn__sw i { position: absolute; top: 0; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; transition: transform .45s var(--lumo-ease); } .lumo-cfgbtn__sw i:nth-child(1) { left: 0; background: var(--lumo-accent); z-index: 3; } .lumo-cfgbtn__sw i:nth-child(2) { left: 8px; background: #b5562b; z-index: 2; } .lumo-cfgbtn__sw i:nth-child(3) { left: 16px; background: #c9bba6; z-index: 1; } .lumo-cfgbtn:hover .lumo-cfgbtn__sw i:nth-child(1), li.product:hover .lumo-cfgbtn__sw i:nth-child(1) { transform: translateX(-4px) rotate(-10deg); } .lumo-cfgbtn:hover .lumo-cfgbtn__sw i:nth-child(3), li.product:hover .lumo-cfgbtn__sw i:nth-child(3) { transform: translateX(4px); } li.product .lumo-cfgbtn { gap: 10px; background: var(--lumo-ink) !important; color: #fff !important; letter-spacing: .01em; } li.product .lumo-cfgbtn .lumo-cfgbtn__sw i { border-color: var(--lumo-ink); } li.product:hover .lumo-cfgbtn { background: var(--lumo-ink) !important; color: #fff !important; } li.product .lumo-cfgbtn:hover { background: #000 !important; } .lumo-cfgbtn, .lumo-cfgbtn:hover, .lumo-cfgbtn:focus { text-decoration: none !important; } .lumo-cfgbtn__txt { font-family: var(--lumo-font-display); font-weight: 600; font-size: 15px; } li.product .lumo-cfgbtn .lumo-icon { color: var(--lumo-accent); } @media (max-width: 780px) { li.product .lumo-cfgbtn { gap: 8px; padding-inline: 10px; } li.product .lumo-cfgbtn .lumo-icon { display: none; } li.product .lumo-cfgbtn .lumo-cfgbtn__txt { font-size: 14px; } .lumo-cfgbtn__sw { width: 28px; height: 14px; } .lumo-cfgbtn__sw i { width: 14px; height: 14px; } .lumo-cfgbtn__sw i:nth-child(2) { left: 7px; } .lumo-cfgbtn__sw i:nth-child(3) { left: 14px; } } /* Karta produktu: "Konfiguruj" w przycisku głównym */ .lumo-cfgbtn-lg { gap: 14px; } .lumo-cfgbtn-lg .lumo-cfgbtn__sw { width: 40px; height: 20px; } .lumo-cfgbtn-lg .lumo-cfgbtn__sw i { width: 20px; height: 20px; border-color: var(--lumo-accent); } .lumo-cfgbtn-lg .lumo-cfgbtn__sw i:nth-child(1) { background: var(--lumo-ink); } .lumo-cfgbtn-lg .lumo-cfgbtn__sw i:nth-child(2) { left: 10px; } .lumo-cfgbtn-lg .lumo-cfgbtn__sw i:nth-child(3) { left: 20px; } /* Wzmianka o możliwościach konfiguracji nad "Konfiguruj" (31.10) */ .lumo-cfginfo { display: grid; gap: 12px; width: 100%; margin: 0 0 14px; padding: 16px 18px; text-align: left; font: inherit; color: var(--lumo-ink); background: var(--lumo-accent-soft); border: 1px solid #f3e2a0; border-radius: var(--lumo-radius); cursor: pointer; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .lumo-cfginfo:hover, .lumo-cfginfo:focus-visible { border-color: var(--lumo-accent); box-shadow: 0 10px 26px -18px rgba(22, 21, 19, .45); } .lumo-cfginfo__head { display: flex; align-items: center; gap: 8px; font-family: var(--lumo-font-display); font-size: 16px; } .lumo-cfginfo__head .lumo-icon { color: var(--lumo-accent-ink); flex: none; } .lumo-cfginfo__list { display: grid; gap: 10px; } .lumo-cfginfo__row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; } .lumo-cfginfo__row > .lumo-icon { color: var(--lumo-ink); } .lumo-cfginfo__txt { display: grid; gap: 1px; font-size: 14px; line-height: 1.35; } .lumo-cfginfo__txt b { font-weight: 600; } .lumo-cfginfo__txt small { color: var(--lumo-muted); font-size: 13px; } .lumo-cfginfo__sw { display: flex; padding-left: 8px; } .lumo-cfginfo__sw i { width: 26px; height: 26px; margin-left: -8px; border: 2px solid #fff; border-radius: 50%; background: var(--lumo-card-bg) center / cover no-repeat; box-shadow: 0 1px 3px rgba(22, 21, 19, .18); } .lumo-cfginfo__more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--lumo-accent-ink); } .lumo-cfginfo__more .lumo-icon { transition: transform .25s ease; } .lumo-cfginfo:hover .lumo-cfginfo__more .lumo-icon { transform: translateX(3px); } @media (max-width: 600px) { .lumo-cfginfo { padding: 14px; } .lumo-cfginfo__sw i { width: 22px; height: 22px; } } .lumo-cfgword { font-style: normal; font-family: var(--lumo-font-display); font-weight: 700; letter-spacing: .01em; text-decoration: none; } @media (max-width: 780px) { .woocommerce ul.products li.product { padding: 6px 6px 10px; border-radius: 16px; } .lumo-card__media { border-radius: 12px; margin-bottom: 10px; } .lumo-card__badges { top: 12px; left: 12px; } .lumo-card__badges .lumo-badge:nth-child(n+2) { display: none; } .lumo-fav { top: 12px; right: 12px; width: 34px; height: 34px; } .lumo-card__title { font-size: 15px !important; } li.product .price { font-size: 16px; } } /* Karuzela bestsellerów (przewijanie na telefonie) */ @media (max-width: 780px) { .lumo-rail ul.products { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(var(--lumo-gutter) * -1); padding: 4px var(--lumo-gutter) 12px; scrollbar-width: none; } .lumo-rail ul.products li.product { flex: 0 0 70%; scroll-snap-align: start; } } /* Ulubione */ .lumo-favs__empty { padding: 40px 24px; border: 1.5px dashed var(--lumo-line); border-radius: var(--lumo-radius-lg); text-align: center; color: var(--lumo-muted); } /* ---------- Kategorie: nagłówek, podkategorie, filtry ---------- */ /* Hero kategorii (1.8.0): tekst + kolaż zdjęć polecanych produktów, pierścień z logo w tle. */ .lumo-shophero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 58px; margin: 0 0 43px; padding: 49px; border-radius: 32px; background: var(--lumo-bg-2); overflow: hidden; } @media (max-width: 1280px) { .lumo-shophero { gap: 51px; margin: 0 0 38px; padding: 44px; } } @media (max-width: 1100px) { .lumo-shophero { gap: 40px; margin: 0 0 30px; padding: 34px; } } @media (max-width: 600px) { .lumo-shophero { gap: 24px; margin: 0 0 28px; padding: 28px; } } .lumo-shophero.has-media { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .lumo-shophero__ring { position: absolute; z-index: -1; right: -120px; bottom: -200px; width: 460px; height: 460px; border-radius: 50%; border: 70px solid var(--lumo-accent); opacity: .9; } .lumo-shophero.has-media .lumo-shophero__ring { right: 30%; bottom: -260px; width: 380px; height: 380px; border-width: 56px; opacity: .55; } .lumo-shophero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lumo-ink-2); } .lumo-shophero__picto { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; color: var(--lumo-ink); box-shadow: 0 6px 18px rgba(22, 21, 19, .06); } .lumo-shophero__count { padding: 4px 10px; border-radius: 999px; background: var(--lumo-ink); color: #fff; font-size: 12px; letter-spacing: .02em; text-transform: none; } .lumo-shophero__title { margin: 0 0 14px; font-size: 50px; line-height: 1.05; letter-spacing: -.03em; } @media (max-width: 1280px) { .lumo-shophero__title { font-size: 46px; } } @media (max-width: 1100px) { .lumo-shophero__title { font-size: 40px; } } @media (max-width: 600px) { .lumo-shophero__title { font-size: 32px; } } .lumo-shophero__lead { margin: 0 0 20px; max-width: 560px; font-size: 17px; line-height: 1.6; color: var(--lumo-ink-2); } @media (max-width: 1280px) { .lumo-shophero__lead { font-size: 16px; } } .lumo-shophero__desc { margin: 0 0 20px; max-width: 680px; font-size: 16px; } .lumo-shophero__desc.lumo-prose { color: var(--lumo-ink-2); } .lumo-shophero__desc[data-clamp].is-clamped::after { background: linear-gradient(transparent, var(--lumo-bg-2)); } .lumo-shophero__usps { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0 0 22px; padding: 0; font-size: 14px; font-weight: 500; } .lumo-shophero__usps li { display: inline-flex; align-items: center; gap: 7px; } .lumo-shophero__usps .lumo-icon { color: var(--lumo-accent-ink); } .lumo-shophero .lumo-subcats { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } .lumo-shophero .lumo-subcats a { background: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(22, 21, 19, .05); } .lumo-shophero .lumo-subcats a:hover { background: var(--lumo-ink); } .lumo-subcats small { padding: 1px 7px; border-radius: 999px; background: var(--lumo-bg-2); color: var(--lumo-muted); font-size: 11.5px; font-weight: 600; transition: background-color .25s, color .25s; } .lumo-subcats a:hover small { background: rgba(255, 255, 255, .15); color: #fff; } .lumo-shophero__media { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 1.35; max-height: 400px; justify-self: end; width: 100%; } .lumo-shophero__tile { position: relative; display: block; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 14px 40px rgba(22, 21, 19, .07); transition: transform .5s var(--lumo-ease), box-shadow .3s; } .lumo-shophero__tile:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(22, 21, 19, .12); } .lumo-shophero__tile img { width: 100%; height: 100%; object-fit: contain; padding: 10%; } .lumo-shophero__tile--1 { grid-row: 1 / 3; } .lumo-shophero__media:has(.lumo-shophero__tile:only-child) { grid-template-columns: 1fr; } .lumo-shophero__media:has(.lumo-shophero__tile--2:last-child) .lumo-shophero__tile--2 { grid-row: 1 / 3; } .lumo-page-head__desc[data-clamp].is-clamped { max-height: 7.4em; overflow: hidden; position: relative; } .lumo-page-head__desc[data-clamp].is-clamped::after { content: ""; position: absolute; inset: auto 0 0; height: 3em; background: linear-gradient(transparent, #fff); } .lumo-clamp-toggle { margin-top: 8px; } .lumo-subcats { display: flex; gap: 10px; overflow-x: auto; list-style: none; margin: 0 0 32px; padding: 0 0 4px; scrollbar-width: none; } .lumo-subcats a { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; border: 1px solid var(--lumo-line); border-radius: 999px; white-space: nowrap; text-decoration: none; font-weight: 500; transition: all .25s; } .lumo-subcats a:hover { border-color: var(--lumo-ink); background: var(--lumo-ink); color: #fff; } .lumo-subcats .lumo-picto { color: var(--lumo-accent-ink); } .lumo-subcats a:hover .lumo-picto { color: #fff; } /* Filtry (1.8.0): karta z nagłówkiem, listy z kwadratowymi polami i licznikami, przełączniki, "Pokaż wszystkie". */ .lumo-catalog { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 43px; align-items: start; } @media (max-width: 1280px) { .lumo-catalog { gap: 38px; } } @media (max-width: 1100px) { .lumo-catalog { gap: 30px; } } @media (max-width: 600px) { .lumo-catalog { gap: 24px; } } .lumo-filters { position: sticky; top: calc(var(--lumo-header-h) + 16px); max-height: calc(100vh - var(--lumo-header-h) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 6px 18px 0; border: 1px solid var(--lumo-line); border-radius: 24px; background: #fff; } .lumo-filters__head { display: flex; align-items: center; gap: 10px; padding: 14px 0 12px; border-bottom: 1px solid var(--lumo-line); } .lumo-filters__head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; } .lumo-filters__head h2 em { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--lumo-accent); color: var(--lumo-on-accent); font-family: var(--lumo-font); font-size: 12px; font-style: normal; font-weight: 700; } .lumo-filters__clear { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--lumo-muted); text-decoration: underline; text-underline-offset: 3px; } .lumo-filters__clear:hover { color: var(--lumo-ink); } .lumo-filters__close { display: none; } .lumo-filter { border-bottom: 1px solid var(--lumo-line); padding: 16px 0; } .lumo-filter:last-of-type { border-bottom: 0; } .lumo-filter summary { display: flex; align-items: center; gap: 8px; font-family: var(--lumo-font-display); font-size: 15.5px; font-weight: 600; cursor: pointer; list-style: none; } .lumo-filter summary::-webkit-details-marker { display: none; } .lumo-filter summary em { font-style: normal; font-family: var(--lumo-font); font-size: 11.5px; font-weight: 700; background: var(--lumo-accent); color: var(--lumo-on-accent); border-radius: 999px; padding: 1px 7px; } .lumo-filter summary .lumo-icon { margin-left: auto; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--lumo-bg-2); transition: transform .3s var(--lumo-ease), background-color .2s; } .lumo-filter summary:hover .lumo-icon { background: var(--lumo-accent-soft); } .lumo-filter[open] summary .lumo-icon { transform: rotate(180deg); } .lumo-filter > *:not(summary) { margin-top: 12px; } .lumo-filter__links { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; font-size: 14.5px; } .lumo-filter__links a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: 10px; text-decoration: none; transition: background-color .2s; } .lumo-filter__links a:hover { background: var(--lumo-bg-2); } .lumo-filter__links .lumo-picto { flex: none; color: var(--lumo-accent-ink); } .lumo-filter__name { flex: 1; min-width: 0; } .lumo-filter__links small, .lumo-filter__opts small { margin-left: auto; color: var(--lumo-muted); font-size: 12px; font-variant-numeric: tabular-nums; } .lumo-filter__opts { display: grid; gap: 2px; } .lumo-chip input { position: absolute; opacity: 0; pointer-events: none; } .lumo-filter__opts .lumo-chip > span { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: 10px; font-size: 14.5px; cursor: pointer; transition: background-color .2s; } .lumo-filter__opts .lumo-chip > span::before { content: ""; flex: none; width: 20px; height: 20px; border: 1.5px solid #cfc8bc; border-radius: 6px; background: #fff center / 12px no-repeat; transition: background-color .2s, border-color .2s; } .lumo-filter__opts .lumo-chip:hover > span { background: var(--lumo-bg-2); } .lumo-filter__opts .lumo-chip:hover > span::before { border-color: var(--lumo-ink); } .lumo-filter__opts .lumo-chip input:checked + span { font-weight: 600; } .lumo-filter__opts .lumo-chip input:checked + span::before { border-color: var(--lumo-ink); background-color: var(--lumo-ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fddc5c' stroke-width='3.4'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E"); } .lumo-filter__opts .lumo-chip input:focus-visible + span { outline: 2px solid var(--lumo-accent-ink); outline-offset: 1px; } .lumo-filter__opts .lumo-chip.is-extra { display: none; } .lumo-filter__opts.is-expanded .lumo-chip.is-extra { display: block; animation: lumo-fade .3s var(--lumo-ease); } .lumo-filter__more { justify-self: start; margin-top: 6px; padding: 4px 0; border: 0; background: none; color: var(--lumo-ink); font-size: 13.5px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--lumo-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; } .lumo-switch { position: relative; display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 14.5px; cursor: pointer; } .lumo-switch input { position: absolute; opacity: 0; pointer-events: none; } .lumo-switch__track { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: #e3ddd2; transition: background-color .25s; } .lumo-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(22, 21, 19, .25); transition: transform .25s var(--lumo-ease); } .lumo-switch input:checked + .lumo-switch__track { background: var(--lumo-ink); } .lumo-switch input:checked + .lumo-switch__track::after { transform: translateX(16px); background: var(--lumo-accent); } .lumo-switch input:focus-visible + .lumo-switch__track { outline: 2px solid var(--lumo-accent-ink); outline-offset: 2px; } .lumo-filter__price { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .lumo-filter__price label { position: relative; display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--lumo-muted); } .lumo-filter__price input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--lumo-line); border-radius: 12px; background: var(--lumo-bg-2); font-size: 14.5px; transition: border-color .2s, background-color .2s; } .lumo-filter__price input:focus { outline: 0; border-color: var(--lumo-ink); background: #fff; } .lumo-filters__actions { display: grid; gap: 10px; justify-items: center; margin: 0 -18px; padding: 16px 18px 18px; position: sticky; bottom: 0; background: linear-gradient(rgba(255, 255, 255, 0), #fff 28%); } @media (min-width: 1001px) { /* Na komputerze filtry działają od razu po kliknięciu - przycisk zbędny. */ .lumo-filters__actions { display: none; } } .lumo-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .lumo-toolbar .woocommerce-result-count { margin: 0; font-size: 14px; color: var(--lumo-muted); } .lumo-toolbar .woocommerce-ordering { margin: 0 0 0 auto; } .lumo-toolbar select { min-height: 42px; padding: 8px 36px 8px 14px; border: 1px solid var(--lumo-line); border-radius: 999px; background: #fff; font-size: 14px; } .lumo-toolbar__filters { display: none; } .lumo-active-filters { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: -6px 0 22px; padding: 0; } .lumo-active-filters a { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--lumo-bg-2); font-size: 13px; text-decoration: none; } .lumo-active-filters a:hover { background: var(--lumo-accent-soft); } @media (max-width: 1000px) { .lumo-catalog { grid-template-columns: 1fr; } .lumo-toolbar__filters { display: inline-flex; } .lumo-filters { position: fixed; inset: 0 auto 0 0; z-index: 210; width: min(380px, 90vw); max-height: none; padding: 0 20px; border: 0; border-radius: 0 24px 24px 0; background: #fff; box-shadow: var(--lumo-shadow-lg); transform: translateX(-105%); transition: transform .4s var(--lumo-ease); } .lumo-filters.is-open { transform: none; } .lumo-filters__head { padding: 14px 0; position: sticky; top: 0; background: #fff; z-index: 2; } .lumo-filters__head h2 { font-size: 22px; } .lumo-filters__close { display: inline-grid; margin-left: auto; } .lumo-filters__clear + .lumo-filters__close { margin-left: 0; } .lumo-filters__actions { margin: 0 -20px; padding-inline: 20px; } .lumo-shophero.has-media { grid-template-columns: minmax(0, 1fr); } .lumo-shophero__media { max-height: 260px; justify-self: stretch; } } @media (max-width: 600px) { .lumo-shophero { margin-inline: calc(var(--lumo-gutter) * -1); padding: 24px var(--lumo-gutter); border-radius: 0 0 28px 28px; } .lumo-shophero__media { display: none; } .lumo-shophero__ring { right: -160px; bottom: -220px; width: 320px; height: 320px; border-width: 46px; opacity: .6; } .lumo-shophero .lumo-subcats { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--lumo-gutter) * -1); padding: 0 var(--lumo-gutter) 6px; } } /* ---------- Strona produktu ---------- */ .lumo-product { padding-top: 0; } /* 1.18.0 (klient: za duży odstęp od okruszków) - sam margines okruszków */ .single-product .lumo-crumbs { margin-bottom: 16px; } .lumo-product__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 58px; align-items: start; } @media (max-width: 1280px) { .lumo-product__grid { gap: 51px; } } @media (max-width: 1100px) { .lumo-product__grid { gap: 40px; } } @media (max-width: 600px) { .lumo-product__grid { gap: 28px; } } .lumo-product__left { min-width: 0; } .lumo-product__right { position: sticky; top: calc(var(--lumo-header-h) + var(--lumo-nav-h) + 16px); } @media (max-width: 960px) { .lumo-product__grid { grid-template-columns: 1fr; } .lumo-product__right { position: static; } .lumo-product__left { display: contents; } .lumo-product__gallery { order: 1; } .lumo-product__right { order: 2; } .lumo-product__tabs { order: 3; } } .lumo-product__gallery { position: relative; } /* Układ z woocommerce-layout.css (float, width 48%) wyłączony - kolumny robi siatka .lumo-product__grid. */ .woocommerce div.product.lumo-product div.images, .woocommerce div.product.lumo-product div.summary { float: none; width: auto; margin-bottom: 0; } /* Galeria produktu (lumo_product_gallery): pasek ze scroll-snap + miniatury. Zdjęcia na białym tle mieszane z tłem (multiply) - warstwa zdjęcia bez z-index/isolation, inaczej mieszanie przestaje działać. */ .lumo-pg { position: relative; margin: 0; opacity: 1 !important; } .lumo-pg__stage { position: relative; border-radius: 28px; overflow: hidden; background: var(--lumo-card-bg); } .lumo-pg__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .lumo-pg__track::-webkit-scrollbar { display: none; } .lumo-pg__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; } .lumo-pg__slide a { display: block; cursor: zoom-in; } .lumo-pg__slide img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; padding: 0; } /* Bez efektu zoomu po najechaniu (decyzja klienta 30.10) - powiększenie tylko po kliknięciu (lightbox). */ .lumo-pg__nav, .lumo-pg__zoom { position: absolute; z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #fff; color: var(--lumo-ink); box-shadow: var(--lumo-shadow); transition: transform .3s var(--lumo-ease), opacity .25s, background-color .2s; } .lumo-pg__nav { top: 50%; margin-top: -23px; opacity: 0; } .lumo-pg__stage:hover .lumo-pg__nav, .lumo-pg__nav:focus-visible { opacity: 1; } .lumo-pg__nav:hover, .lumo-pg__zoom:hover { background: var(--lumo-accent); transform: scale(1.06); } .lumo-pg__nav.is-prev { left: 16px; } .lumo-pg__nav.is-prev svg { transform: rotate(90deg); } .lumo-pg__nav.is-next { right: 16px; } .lumo-pg__nav.is-next svg { transform: rotate(-90deg); } .lumo-pg.is-first .lumo-pg__nav.is-prev, .lumo-pg.is-last .lumo-pg__nav.is-next { opacity: 0 !important; pointer-events: none; } .lumo-pg__zoom { top: 18px; right: 18px; } .lumo-pg__zoom::before { content: ""; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161513' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat; } .lumo-pg__count { position: absolute; z-index: 3; left: 18px; bottom: 16px; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .lumo-pg__thumbs { display: flex; gap: 10px; margin-top: 12px; padding: 2px; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; } .lumo-pg__thumb { flex: 0 0 auto; width: 88px; aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: var(--lumo-card-bg); box-shadow: inset 0 0 0 1px transparent; scroll-snap-align: start; transition: box-shadow .25s, transform .3s var(--lumo-ease); } .lumo-pg__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; transition: transform .4s var(--lumo-ease); } .lumo-pg__thumb:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px #d6cfc4; } .lumo-pg__thumb:hover img { transform: scale(1.06); } .lumo-pg__thumb[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--lumo-ink); } .lumo-product__gallery { isolation: isolate; } .lumo-product__gallery::before { content: ""; position: absolute; z-index: -1; width: 200px; height: 200px; left: -60px; bottom: 60px; border-radius: 50%; border: 32px solid var(--lumo-accent); opacity: .9; pointer-events: none; animation: lumo-float 12s ease-in-out infinite; } .lumo-product__gallery:has(.lumo-pg__thumbs)::before { bottom: 140px; } @media (max-width: 960px) { .lumo-product__gallery::before { display: none; } } @media (hover: none) { .lumo-pg__nav { display: none; } } /* Prawa kolumna: karta z informacjami */ .lumo-product__summary { padding: 34px; border: 1px solid var(--lumo-line); border-radius: 28px; background: #fff; box-shadow: var(--lumo-shadow); } @media (max-width: 1280px) { .lumo-product__summary { padding: 31px; } } @media (max-width: 1100px) { .lumo-product__summary { padding: 24px; } } @media (max-width: 600px) { .lumo-product__summary { padding: 20px; } } .lumo-product__cat { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 5px 12px 5px 6px; border-radius: 999px; background: var(--lumo-bg-2); font-size: 12.5px; font-weight: 600; text-decoration: none; } .lumo-product__cat .lumo-picto { width: 22px; height: 22px; } .lumo-product__cat:hover { background: var(--lumo-accent-soft); color: var(--lumo-ink); } .lumo-product__summary .product_title { font-size: 37px; line-height: 1.1; margin-bottom: 14px; letter-spacing: -.025em; } @media (max-width: 1280px) { .lumo-product__summary .product_title { font-size: 33px; } } @media (max-width: 1100px) { .lumo-product__summary .product_title { font-size: 26px; } } .lumo-product__summary .woocommerce-product-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 14px; } .lumo-product__summary > .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 18px; padding: 16px 20px; border-radius: 18px; background: var(--lumo-bg-2); font-family: var(--lumo-font-display); font-size: 34px; font-weight: 600; letter-spacing: -.02em; } @media (max-width: 1280px) { .lumo-product__summary > .price { font-size: 31px; } } @media (max-width: 1100px) { .lumo-product__summary > .price { font-size: 26px; } } .lumo-product__summary > .price .lumo-price-from small { font-family: var(--lumo-font); font-size: 15px; } .lumo-product__summary > .price .woocommerce-price-suffix { font-family: var(--lumo-font); font-size: 13px; font-weight: 500; color: var(--lumo-muted); } .lumo-product__summary .woocommerce-product-details__short-description { position: relative; color: var(--lumo-ink-2); font-size: 15.5px; line-height: 1.7; margin-bottom: 22px; } .lumo-product__summary .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; } .lumo-product__summary .woocommerce-product-details__short-description.is-clamped { max-height: 9.6em; overflow: hidden; } .lumo-product__summary .woocommerce-product-details__short-description.is-clamped::after { content: ""; position: absolute; inset: auto 0 0; height: 4em; background: linear-gradient(transparent, #fff); } .lumo-product__summary .lumo-clamp-toggle { margin: -12px 0 20px; font-size: 14px; } .lumo-product__summary form.cart { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; } .lumo-product__summary form.cart .single_add_to_cart_button { flex: 1; } /* Warianty (np. stoły: rozmiar, grubość, kolor blatu): listy zamienione w main.js na przyciski .lumo-varpills (select zostaje ukryty - WooCommerce dalej liczy na nim dostępność i cenę wariantu). */ .lumo-product__summary form.variations_form { display: block; } .lumo-product__summary table.variations { width: 100%; margin: 0 0 6px; border: 0; border-collapse: collapse; } .lumo-product__summary table.variations tr { display: block; padding: 0 0 16px; } .lumo-product__summary table.variations th, .lumo-product__summary table.variations td { display: block; padding: 0; border: 0; text-align: left; background: none; } .lumo-product__summary table.variations th.label { margin-bottom: 10px; } .lumo-product__summary table.variations label { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; color: var(--lumo-ink); } .lumo-product__summary table.variations label .lumo-var-chosen { font-weight: 500; color: var(--lumo-muted); } .lumo-product__summary table.variations label .lumo-var-chosen:not(:empty)::before { content: "·"; margin-right: 8px; } .lumo-product__summary table.variations select { width: 100%; min-height: 50px; padding: 0 44px 0 16px; border: 1.5px solid var(--lumo-line); border-radius: 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161513' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; font-size: 15px; appearance: none; } .lumo-product__summary table.variations select.is-pilled { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; pointer-events: none; } .lumo-varpills { display: flex; flex-wrap: wrap; gap: 8px; } .lumo-varpill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--lumo-line); border-radius: 12px; background: #fff; color: var(--lumo-ink); font-size: 14.5px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s, opacity .2s; } .lumo-varpill:hover { border-color: var(--lumo-ink); } .lumo-varpill[aria-pressed="true"] { border-color: var(--lumo-ink); background: var(--lumo-accent-soft); box-shadow: inset 0 0 0 1px var(--lumo-ink); font-weight: 600; } .lumo-varpill[aria-pressed="true"]::before { content: ""; width: 16px; height: 16px; margin-left: -4px; border-radius: 50%; background: var(--lumo-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161513' stroke-width='3.2'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 10px no-repeat; } .lumo-varpill:disabled, .lumo-varpill.is-off { opacity: .4; text-decoration: line-through; cursor: not-allowed; } .lumo-varpill:disabled:hover { border-color: var(--lumo-line); } .lumo-varpill__sw { width: 22px; height: 22px; margin-left: -6px; border-radius: 6px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(22, 21, 19, .12); } .lumo-product__summary .reset_variations { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--lumo-muted); text-decoration: none; } .lumo-product__summary .reset_variations:hover { color: var(--lumo-ink); } .lumo-product__summary .reset_variations::before { content: "×"; font-size: 16px; line-height: 1; } .lumo-product__summary .single_variation_wrap { display: flex; flex-wrap: wrap; gap: 12px; } .lumo-product__summary .woocommerce-variation.single_variation { flex: 1 0 100%; } .lumo-product__summary .woocommerce-variation.single_variation:empty { display: none; } .lumo-product__summary .woocommerce-variation-price { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px; border-radius: 16px; background: var(--lumo-bg-2); } .lumo-product__summary .woocommerce-variation-price .price { font-family: var(--lumo-font-display); font-size: 26px; font-weight: 600; letter-spacing: -.02em; } .lumo-product__summary .woocommerce-variation-availability p { margin: 8px 0 0; font-size: 13.5px; color: var(--lumo-ok, #2f7a3e); } .lumo-product__summary .woocommerce-variation-description { font-size: 14px; color: var(--lumo-ink-2); } .lumo-product__summary .woocommerce-variation-add-to-cart { display: flex; flex: 1 0 100%; gap: 12px; } .lumo-product__summary .woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1; } .lumo-product__summary .single_add_to_cart_button.disabled { opacity: .55; cursor: not-allowed; } .lumo-buy { margin-bottom: 14px; } .lumo-buy .lumo-btn--lg { min-height: 62px; font-size: 17px; } /* 1.21.0: loże - drugi przycisk „Dodaj do wyceny” pod „Konfiguruj” (obrys, ten sam kształt) */ .lumo-buy .lumo-quotebtn { margin-top: 10px; min-height: 56px; gap: 10px; border-width: 1.5px; font-size: 16px; } .lumo-buy .lumo-quotebtn:hover { --bg: var(--lumo-ink); --fg: #fff; --bd: var(--lumo-ink); } .lumo-buy__or { margin: 10px 0 0; text-align: center; font-size: 13.5px; color: var(--lumo-muted); } @media (max-width: 600px) { .lumo-buy .lumo-quotebtn { min-height: 52px; font-size: 15px; } } .lumo-product__summary form.cart .quantity .qty { min-height: 62px; border-radius: 999px; } .lumo-product__summary form.cart .single_add_to_cart_button { min-height: 62px; font-size: 17px; } .lumo-warranty { display: flex; gap: 10px; align-items: center; width: fit-content; padding: 8px 16px 8px 8px; margin: 0 0 18px; border-radius: 999px; background: var(--lumo-ink); color: #fff; font-size: 14px; font-weight: 600; } .lumo-warranty .lumo-icon { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--lumo-accent); color: var(--lumo-on-accent); } /* Link do strony Próbniki (karta produktu, konfigurator) */ .lumo-samples-link { display: flex; width: 100%; align-items: center; gap: 12px; margin-bottom: 22px; padding: 10px 16px 10px 10px; border: 1.5px dashed var(--lumo-line); border-radius: var(--lumo-radius-sm); background: #fff; color: var(--lumo-ink); font-size: 14px; line-height: 1.35; text-decoration: none; transition: border-color .2s, background-color .2s; } .lumo-samples-link > .lumo-icon:first-child { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 10px; background: var(--lumo-accent); color: var(--lumo-on-accent); } .lumo-samples-link > span { flex: 1; min-width: 0; color: var(--lumo-ink-2); } .lumo-samples-link strong { display: block; font-family: var(--lumo-font-display); font-size: 15px; font-weight: 600; color: var(--lumo-ink); } .lumo-samples-link > .lumo-icon:last-child { flex: none; color: var(--lumo-ink); transition: transform .2s var(--lumo-ease); } .lumo-samples-link:hover { border-color: var(--lumo-ink); background: var(--lumo-accent-soft); } .lumo-samples-link:hover > .lumo-icon:last-child { transform: translateX(3px); } .lumo-samples-link--cfg { margin: 16px 0 0; font-size: 13px; } /* ---------- Strona Próbniki ([lumo_probniki], inc/samples.php) ---------- */ .lumo-samples-page { margin-bottom: 40px; } .lumo-sp__lead { max-width: 760px; margin: 0 0 28px; font-size: 17px; line-height: 1.6; color: var(--lumo-ink-2); } /* 1.16.0: 3 karty o tym samym układzie (nagłówek, wartość, dopisek, opis), wiersze wyrównane subgridem */ .lumo-sp__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; list-style: none; margin: 0 0 36px; padding: 0; } .lumo-sp__cards li { display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 0; padding: 22px 22px 20px; border: 1px solid var(--lumo-line); border-radius: var(--lumo-radius); background: #fff; transition: border-color .25s var(--lumo-ease), box-shadow .25s var(--lumo-ease); } .lumo-sp__cards li:hover { border-color: var(--lumo-accent); box-shadow: 0 10px 28px rgba(22, 21, 19, .06); } .lumo-sp__chead { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .lumo-sp__cards strong { font-family: var(--lumo-font-display); font-size: 18px; font-weight: 600; line-height: 1.25; } .lumo-sp__cards p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--lumo-muted); } .lumo-sp__ico { display: grid; flex: 0 0 auto; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--lumo-accent); color: var(--lumo-on-accent); } .lumo-sp__cards .lumo-sp__price { align-self: end; font-family: var(--lumo-font-display); font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--lumo-ink); } .lumo-sp__price small { font-family: var(--lumo-font); font-size: 13.5px; font-weight: 500; color: var(--lumo-muted); } .lumo-sp__cards .lumo-sp__sub { min-height: 26px; margin-top: 8px; } .lumo-sp__sub span { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--lumo-accent-soft); font-size: 12.5px; font-weight: 600; line-height: 20px; color: var(--lumo-ink); } .lumo-sp__cards .lumo-sp__desc { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lumo-line); } .lumo-sp .lumo-colornote { margin: 0 0 18px; } .lumo-swatch__sample { white-space: nowrap; } .lumo-sp__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; } .lumo-sp__kinds { margin-bottom: 18px; } .lumo-sp__kinds .lumo-tabs__tab { padding: 12px 22px; font-size: 15.5px; font-weight: 600; } /* 1.19.0 (klient): liczba przy zakładce czytelna także na czarnym tle aktywnej zakładki */ .lumo-sp__kinds small { display: inline-grid; place-items: center; min-width: 26px; height: 22px; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--lumo-bg-2); font-size: 12px; font-weight: 600; line-height: 1; color: var(--lumo-ink); vertical-align: 1px; transition: background-color .2s, color .2s; } .lumo-sp__kinds .lumo-tabs__tab[aria-selected="true"] small { background: var(--lumo-accent); color: var(--lumo-on-accent); } /* 1.19.0 (klient): nazwy kolorów wyśrodkowane pod próbką (Próbniki, Wzorniki, konfigurator) */ .lumo-swatch__name { display: block; text-align: center; } .lumo-sp__groups { margin-bottom: 16px; } .lumo-sp__groups .lumo-tabs__tab { padding: 7px 16px; font-size: 13.5px; } .lumo-sp__gtitle { margin: 6px 0 12px; font-size: 17px; } .lumo-sp__main .lumo-swatches__grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); } .lumo-sp__main .lumo-swatch__sample { width: 100%; padding: 7px 8px; } .lumo-sp__main .lumo-swatch__sample.is-added span { font-size: 0; } .lumo-sp__main .lumo-swatch__sample.is-added span::after { content: attr(data-added); font-size: 11.5px; } @media (hover: hover) { .lumo-swatch__sample.is-added:hover span { font-size: 0; } .lumo-swatch__sample.is-added:hover span::after { content: attr(data-remove); font-size: 11.5px; } .lumo-swatch__sample.is-added:hover { background: var(--lumo-danger); border-color: var(--lumo-danger); color: #fff; } } .lumo-sp__empty { display: grid; justify-items: start; gap: 12px; padding: 24px; border: 1.5px dashed var(--lumo-line); border-radius: var(--lumo-radius); background: var(--lumo-bg-2); font-size: 15px; } .lumo-sp__empty p { margin: 0; max-width: 560px; } .lumo-sp__empty > .lumo-icon { color: var(--lumo-accent-ink); } .lumo-sp__basket { position: sticky; top: calc(var(--lumo-header-h, 80px) + var(--lumo-nav-h, 0px) + 20px); display: grid; gap: 14px; padding: 22px; border-radius: var(--lumo-radius); background: var(--lumo-ink); color: #fff; box-shadow: var(--lumo-shadow-md); } .lumo-sp__bhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .lumo-sp__bhead h2 { margin: 0; font-size: 20px; color: #fff; } .lumo-sp__count { font-size: 13px; color: rgba(255, 255, 255, .65); } .lumo-sp__count b { font-size: 18px; color: var(--lumo-accent); } .lumo-sp__list { display: grid; gap: 8px; max-height: 46vh; overflow-y: auto; margin: 0; padding: 0; list-style: none; scrollbar-width: thin; } .lumo-sp__list:empty { display: none; } .lumo-sp__item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px; border-radius: 10px; background: rgba(255, 255, 255, .06); animation: lumo-fade .3s var(--lumo-ease); } .lumo-sp__thumb { width: 44px; height: 44px; border-radius: 8px; background: var(--lumo-dark-2, #333) center / cover; } .lumo-sp__itxt { display: grid; min-width: 0; line-height: 1.3; } .lumo-sp__itxt small { font-size: 11.5px; color: rgba(255, 255, 255, .6); } .lumo-sp__itxt strong { overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .lumo-sp__itxt em { font-size: 12px; font-style: normal; color: var(--lumo-accent); } .lumo-sp__rm { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .7); cursor: pointer; transition: background-color .2s, color .2s; } .lumo-sp__rm:hover { background: rgba(255, 255, 255, .12); color: #fff; } .lumo-sp__hint, .lumo-sp__note { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .65); } .lumo-sp__sum { display: grid; gap: 6px; margin: 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 14px; } .lumo-sp__sum div { display: flex; justify-content: space-between; gap: 10px; } .lumo-sp__sum dt { color: rgba(255, 255, 255, .7); } .lumo-sp__sum dd { margin: 0; font-weight: 600; } .lumo-sp__sum .lumo-sp__gross dt { color: #fff; } .lumo-sp__sum .lumo-sp__gross dd { color: var(--lumo-accent); font-size: 16px; } .lumo-sp__basket [hidden] { display: none; } /* 1.20.0: komplety próbników (cała tkanina / cała paleta blatów) - karta = mozaika kolorów, nazwa, cena, „Do koszyka” */ .lumo-sets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .lumo-sets--one { grid-template-columns: minmax(0, 1fr); } .lumo-set { display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; border: 1px solid var(--lumo-line); border-radius: var(--lumo-radius); background: #fff; transition: border-color .25s var(--lumo-ease), box-shadow .25s var(--lumo-ease); } .lumo-set:hover { border-color: var(--lumo-accent); box-shadow: 0 10px 28px rgba(22, 21, 19, .06); } .lumo-set__mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--lumo-line); } .lumo-set__mosaic span { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--lumo-bg-2); } .lumo-set__mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; } .lumo-set__mosaic b { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(22, 21, 19, .58); font-family: var(--lumo-font-display); font-size: 17px; font-weight: 600; color: #fff; } .lumo-set__body { display: grid; align-content: start; gap: 4px; padding: 16px 18px 4px; } .lumo-set__eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lumo-accent-ink); } .lumo-set__name { margin: 0; font-size: 19px; line-height: 1.25; } .lumo-set__meta { margin: 0; font-size: 14px; color: var(--lumo-muted); } .lumo-set__names { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--lumo-ink-2); } .lumo-set__link { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--lumo-ink); text-decoration: underline; text-decoration-color: var(--lumo-accent); text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; } .lumo-set__link:hover { color: var(--lumo-accent-ink); } .lumo-set__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 18px; } .lumo-set__price { margin: 0; font-size: 13px; color: var(--lumo-muted); white-space: nowrap; } .lumo-set__price b { font-family: var(--lumo-font-display); font-size: 20px; font-weight: 600; color: var(--lumo-ink); } .lumo-set__btn, .lumo-fabric-set__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 18px; border: 1px solid var(--lumo-ink); border-radius: 999px; background: var(--lumo-ink); font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; } .lumo-set__btn:hover { border-color: var(--lumo-accent); background: var(--lumo-accent); color: var(--lumo-on-accent); } .lumo-set__btn.is-added, .lumo-fabric-set__btn.is-added { border-color: var(--lumo-ok); background: var(--lumo-ok); color: #fff; } .lumo-set__btn.is-added span, .lumo-fabric-set__btn.is-added span { font-size: 0; } .lumo-set__btn.is-added span::after, .lumo-fabric-set__btn.is-added span::after { content: attr(data-added); font-size: 14px; } .lumo-set__btn.is-added svg, .lumo-fabric-set__btn.is-added svg { display: none; } @media (hover: hover) { .lumo-set__btn.is-added:hover, .lumo-fabric-set__btn.is-added:hover { border-color: var(--lumo-danger); background: var(--lumo-danger); } .lumo-set__btn.is-added:hover span::after, .lumo-fabric-set__btn.is-added:hover span::after { content: attr(data-remove); } } .lumo-set.lumo-set--wide { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: 1fr auto; } .lumo-set--wide .lumo-set__mosaic { grid-row: span 2; grid-template-columns: repeat(5, minmax(0, 1fr)); align-content: start; } .lumo-set--wide .lumo-set__body { padding: 22px 24px 6px; } .lumo-set--wide .lumo-set__foot { padding: 14px 24px 22px; } @media (max-width: 1280px) { .lumo-sets { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .lumo-sets { grid-template-columns: minmax(0, 1fr); gap: 12px; } .lumo-set.lumo-set--wide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; } .lumo-set--wide .lumo-set__mosaic { grid-row: auto; } .lumo-set__body { padding: 14px 14px 2px; } .lumo-set__foot, .lumo-set--wide .lumo-set__foot { padding: 12px 14px 14px; } } .lumo-usp { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13.5px; line-height: 1.45; } .lumo-usp li { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 14px; background: var(--lumo-bg-2); } .lumo-usp .lumo-icon { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: #fff; color: var(--lumo-ink); } @media (max-width: 480px) { .lumo-usp { grid-template-columns: 1fr; } } .lumo-help { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--lumo-line); font-size: 14px; } .lumo-help p { width: 100%; margin: 0; color: var(--lumo-muted); } .lumo-help a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; } .lumo-help a .lumo-icon { color: var(--lumo-accent-ink); } /* Zakładki produktu */ .lumo-product__tabs { margin-top: 56px; } @media (max-width: 1280px) { .lumo-product__tabs { margin-top: 51px; } } @media (max-width: 1100px) { .lumo-product__tabs { margin-top: 40px; } } @media (max-width: 600px) { .lumo-product__tabs { margin-top: 32px; } } .woocommerce-tabs ul.tabs { position: sticky; top: calc(var(--lumo-header-h) + var(--lumo-nav-h)); z-index: 5; display: flex; gap: 4px; overflow-x: auto; list-style: none; margin: 0 0 28px; padding: 6px; border-radius: 999px; background: var(--lumo-bg-2); scrollbar-width: none; } .woocommerce-tabs ul.tabs::before, .woocommerce-tabs ul.tabs::after { display: none; } .woocommerce-tabs ul.tabs li { flex: none; margin: 0; padding: 0; border: 0; background: none; } .woocommerce-tabs ul.tabs li a { display: block; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 14.5px; text-decoration: none; color: var(--lumo-muted); transition: color .2s, background-color .2s; } .woocommerce-tabs ul.tabs li a:hover { color: var(--lumo-ink); background: rgba(255, 255, 255, .7); } .woocommerce-tabs ul.tabs li.active a { color: #fff; background: var(--lumo-ink); } @media (max-width: 1100px) { .woocommerce-tabs ul.tabs { top: 120px; } } .woocommerce-Tabs-panel { font-size: 16px; line-height: 1.75; color: var(--lumo-ink-2); animation: lumo-fade .4s var(--lumo-ease); } .woocommerce-Tabs-panel h2 { font-size: 30px; } @media (max-width: 1280px) { .woocommerce-Tabs-panel h2 { font-size: 28px; } } @media (max-width: 1100px) { .woocommerce-Tabs-panel h2 { font-size: 22px; } } .woocommerce-Tabs-panel > h2:first-child { display: none; } .woocommerce-Tabs-panel h2, .woocommerce-Tabs-panel h3 { color: var(--lumo-ink); } .woocommerce-Tabs-panel img { border-radius: var(--lumo-radius); } /* Rozwijany opis (JS dodaje .lumo-desc, gdy opis jest długi) */ .lumo-desc { position: relative; padding-bottom: 8px; } .lumo-desc.is-collapsed { max-height: 560px; overflow: hidden; padding-bottom: 0; } .lumo-desc.is-collapsed::after { content: ""; position: absolute; inset: auto 0 0; height: 220px; background: linear-gradient(rgba(255, 255, 255, 0), var(--lumo-bg) 78%); pointer-events: none; } .lumo-desc__toggle { display: flex; align-items: center; gap: 10px; margin: 24px auto 0; padding: 12px 22px 12px 24px; border: 1.5px solid var(--lumo-ink); border-radius: 999px; background: var(--lumo-bg); color: var(--lumo-ink); font-weight: 700; font-size: 14.5px; cursor: pointer; transition: background-color .25s, color .25s, transform .25s var(--lumo-ease); } .lumo-desc.is-collapsed .lumo-desc__toggle { position: absolute; left: 50%; bottom: 18px; z-index: 2; margin: 0; transform: translateX(-50%); box-shadow: 0 10px 30px rgba(22, 21, 19, .12); } .lumo-desc__toggle:hover { background: var(--lumo-ink); color: #fff; } .lumo-desc__toggle svg { transition: transform .3s var(--lumo-ease); } .lumo-desc:not(.is-collapsed) .lumo-desc__toggle svg { transform: rotate(180deg); } .woocommerce-product-attributes { width: 100%; border-collapse: collapse; } .woocommerce-product-attributes th, .woocommerce-product-attributes td { padding: 12px 0; border-bottom: 1px solid var(--lumo-line); text-align: left; vertical-align: top; } .woocommerce-product-attributes th { width: 40%; font-weight: 600; color: var(--lumo-ink); } .woocommerce-product-attributes td p { margin: 0; } .lumo-files { list-style: none; padding: 0; display: grid; gap: 8px; } .lumo-files a { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; } #reviews .commentlist { list-style: none; padding: 0; } #reviews .comment_container { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--lumo-line); } #reviews .avatar { border-radius: 50%; width: 44px; height: 44px; } .star-rating { position: relative; display: inline-block; width: 5.4em; height: 1em; font-size: 14px; line-height: 1; overflow: hidden; letter-spacing: .1em; } .star-rating::before { content: "★★★★★"; color: var(--lumo-line); position: absolute; inset: 0; } .star-rating span { position: absolute; inset: 0; overflow: hidden; padding-top: 1.5em; } .star-rating span::before { content: "★★★★★"; color: #e0a526; position: absolute; top: 0; left: 0; } p.stars a { color: #e0a526; } .related, .upsells { margin-top: 96px; } @media (max-width: 1280px) { .related, .upsells { margin-top: 90px; } } @media (max-width: 1100px) { .related, .upsells { margin-top: 70px; } } @media (max-width: 600px) { .related, .upsells { margin-top: 56px; } } .related > h2, .upsells > h2 { font-size: 36px; margin-bottom: 28px; } @media (max-width: 1100px) { .related > h2, .upsells > h2 { font-size: 30px; } } @media (max-width: 600px) { .related > h2, .upsells > h2 { font-size: 26px; } } /* ---------- Konfigurator (popup) ---------- */ .lumo-cfg { width: min(1240px, calc(100vw - 24px)); height: min(900px, calc(100dvh - 24px)); border-radius: var(--lumo-radius-lg); background: #fff; box-shadow: var(--lumo-shadow-lg); overflow: hidden; } .lumo-cfg__form { display: grid; grid-template-rows: auto 1fr auto; height: 100%; } .lumo-cfg__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--lumo-line); } .lumo-cfg__head .lumo-eyebrow { margin-bottom: 4px; } .lumo-cfg__title { font-size: 28px; margin: 0; } @media (max-width: 1100px) { .lumo-cfg__title { font-size: 24px; } } @media (max-width: 600px) { .lumo-cfg__title { font-size: 20px; } } .lumo-cfg__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); min-height: 0; } .lumo-cfg__preview { padding: 24px; background: var(--lumo-bg-2); overflow-y: auto; } .lumo-cfg__image { position: relative; border-radius: var(--lumo-radius); overflow: hidden; background: #fff; } /* 1.25.0 (klient): zdjęcie w konfiguratorze w całości (contain), bez przycinania. */ .lumo-cfg__image img[data-cfg-photo] { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 12px; background: #fff; } .lumo-cfg__fabric { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 0; border-radius: 999px; background: #fff; color: var(--lumo-ink); box-shadow: var(--lumo-shadow); font-size: 13px; font-weight: 600; cursor: zoom-in; animation: lumo-fade .3s; transition: background-color .2s, transform .2s var(--lumo-ease); } .lumo-cfg__fabric[hidden] { display: none; } .lumo-cfg__fabric:hover { background: var(--lumo-accent-soft); transform: translateY(-1px); } .lumo-cfg__fabric img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .lumo-cfg__summary { margin: 20px 0 0; display: grid; gap: 0; font-size: 14px; } .lumo-cfg__summary div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--lumo-line); } .lumo-cfg__summary dt { color: var(--lumo-muted); } .lumo-cfg__summary dd { margin: 0; font-weight: 600; text-align: right; } .lumo-cfg__steps { overflow-y: auto; padding: 8px 24px 24px; overscroll-behavior: contain; } .lumo-cfg__step { border-bottom: 1px solid var(--lumo-line); } .lumo-cfg__stephead { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 0; border: 0; background: none; text-align: left; } .lumo-cfg__no { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--lumo-bg-2); font-size: 14px; font-weight: 700; transition: all .3s; } .lumo-cfg__step.is-done .lumo-cfg__no { background: var(--lumo-ok); color: #fff; } .lumo-cfg__step.is-open .lumo-cfg__no { background: var(--lumo-ink); color: #fff; } .lumo-cfg__steplabel { font-weight: 600; font-size: 16px; } .lumo-cfg__stepvalue { margin-left: auto; font-size: 13.5px; color: var(--lumo-muted); text-align: right; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lumo-cfg__stephead .lumo-icon { flex: none; transition: transform .3s; } .lumo-cfg__step.is-open .lumo-cfg__stephead .lumo-icon { transform: rotate(180deg); } .lumo-cfg__stepbody { display: none; padding: 0 0 22px; } .lumo-cfg__step.is-open .lumo-cfg__stepbody { display: block; animation: lumo-fade .35s var(--lumo-ease); } .lumo-cfg__step.has-error .lumo-cfg__stephead { color: var(--lumo-danger); } .lumo-swatch__pick { display: grid; gap: 8px; cursor: pointer; } .lumo-swatch__pick input { position: absolute; opacity: 0; pointer-events: none; } .lumo-swatch__pick .lumo-swatch__img { cursor: pointer; } .lumo-swatch__pick input:checked ~ .lumo-swatch__img { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--lumo-ink); } .lumo-swatch__pick input:checked ~ .lumo-swatch__img::after { content: ""; position: absolute; right: 6px; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--lumo-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1b19' stroke-width='3'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat; } .lumo-swatch__pick input:focus-visible ~ .lumo-swatch__img { outline: 2px solid var(--lumo-ink); outline-offset: 3px; } /* Lupa na każdej próbce (zawsze widoczna) - otwiera duży podgląd z przybliżaniem. */ .lumo-swatch__zoom { position: absolute; top: 6px; left: 6px; z-index: 2; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--lumo-ink); box-shadow: 0 2px 8px rgba(22, 21, 19, .18); cursor: zoom-in; transition: background-color .2s, transform .2s var(--lumo-ease); } .lumo-swatch__zoom:hover, .lumo-swatch__zoom:focus-visible { background: var(--lumo-accent); transform: scale(1.1); } /* Informacja o kolorach (konfigurator, wzorniki) */ .lumo-colornote { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 16px 0 0; padding: 14px 16px; border-radius: var(--lumo-radius-sm); background: var(--lumo-accent-soft); font-size: 13.5px; line-height: 1.55; color: var(--lumo-ink-2, var(--lumo-ink)); } .lumo-colornote > .lumo-icon { grid-row: span 2; margin-top: 2px; color: var(--lumo-accent-ink); } .lumo-colornote strong { font-family: var(--lumo-font-display); font-size: 15px; font-weight: 600; } .lumo-colornote p { margin: 0; } .lumo-colornote a { font-weight: 600; color: var(--lumo-ink); text-decoration: underline; text-decoration-color: var(--lumo-accent); text-underline-offset: 3px; } .lumo-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .lumo-choice input { position: absolute; opacity: 0; pointer-events: none; } .lumo-choice__box { display: grid; gap: 6px; height: 100%; padding: 14px; border: 1.5px solid var(--lumo-line); border-radius: var(--lumo-radius-sm); cursor: pointer; transition: all .2s; } .lumo-choice__box img { border-radius: 8px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } .lumo-choice__label { font-weight: 600; font-size: 14.5px; } .lumo-choice__price { font-size: 13px; color: var(--lumo-muted); } .lumo-choice:hover .lumo-choice__box { border-color: var(--lumo-ink); } .lumo-choice input:checked + .lumo-choice__box { border-color: var(--lumo-accent-ink); background: var(--lumo-accent-soft); } .lumo-choice input:focus-visible + .lumo-choice__box { outline: 2px solid var(--lumo-ink); outline-offset: 2px; } /* Loże: kształt (ikony w CSS), wymiary A/B/C, rysunek techniczny (SVG z main.js, wygląd tutaj) */ .lumo-shapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; } .lumo-shape input { position: absolute; opacity: 0; pointer-events: none; } .lumo-shape__box { display: grid; justify-items: center; gap: 8px; height: 100%; padding: 14px 6px 12px; border: 1.5px solid var(--lumo-line); border-radius: var(--lumo-radius-sm); cursor: pointer; text-align: center; color: #b9b2a6; transition: border-color .2s, background-color .2s, color .2s, box-shadow .2s; } .lumo-shape__name { font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--lumo-ink); } .lumo-shape:hover .lumo-shape__box { border-color: var(--lumo-ink); color: #8d8578; } .lumo-shape input:checked + .lumo-shape__box { border-color: var(--lumo-ink); background: var(--lumo-accent-soft); color: var(--lumo-ink); box-shadow: inset 0 0 0 1px var(--lumo-ink); } .lumo-shape input:focus-visible + .lumo-shape__box { outline: 2px solid var(--lumo-ink); outline-offset: 2px; } .lumo-shape__ico { position: relative; width: 60px; height: 44px; } .lumo-shape__ico i, .lumo-shape__ico b { position: absolute; display: none; transition: transform .35s var(--lumo-ease), background-color .2s; } .lumo-shape__ico i { background: currentColor; border-radius: 3px; } .lumo-shape__ico b { border: 1.5px dashed currentColor; border-radius: 3px; opacity: .7; } .lumo-shape__ico i:nth-child(1) { display: block; left: 2px; right: 2px; top: 2px; height: 12px; } .lumo-shape__ico--lr i:nth-child(2), .lumo-shape__ico--u i:nth-child(2) { display: block; right: 2px; top: 2px; bottom: 2px; width: 12px; } .lumo-shape__ico--u i:nth-child(3), .lumo-shape__ico--ll i:nth-child(3) { display: block; left: 2px; top: 2px; bottom: 2px; width: 12px; } .lumo-shape__ico--ll b { display: block; left: 20px; right: 8px; top: 20px; bottom: 6px; } .lumo-shape__ico--i b { display: block; left: 16px; right: 16px; top: 20px; bottom: 4px; } .lumo-shape__ico--lr b { display: block; left: 8px; right: 20px; top: 20px; bottom: 6px; } .lumo-shape__ico--u b { display: block; left: 20px; right: 20px; top: 20px; bottom: 6px; } .lumo-shape:hover .lumo-shape__ico i:nth-child(1) { transform: translateY(-1px); } /* Wymiary A/B/C w jednym rzędzie (jak prismamoebel): etykieta nad polem. */ .lumo-dims--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .lumo-dim { display: grid; gap: 6px; } .lumo-dim[hidden] { display: none; } .lumo-dim__label { font-size: 14px; font-weight: 600; } .lumo-dim input { width: 100%; height: 46px; padding: 0 14px; border: 1.5px solid var(--lumo-line); border-radius: var(--lumo-radius-sm); background: #fff; font: 500 16px/1 var(--lumo-font); -moz-appearance: textfield; transition: border-color .2s, background-color .2s; } .lumo-dim input::-webkit-outer-spin-button, .lumo-dim input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .lumo-dim input:focus { outline: none; border-color: var(--lumo-ink); } .lumo-dim.is-invalid input { border-color: var(--lumo-danger); background: #fff6f5; } .lumo-cfg__dimmsg { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: #fff6f5; color: var(--lumo-danger); font-size: 13.5px; font-weight: 500; } .lumo-cfg__meters { margin: 14px 0 6px; font-size: 14px; } .lumo-cfg__meters strong { font-family: var(--lumo-font-display); font-size: 17px; } .lumo-muted { color: var(--lumo-muted); font-size: 13px; } .lumo-cfg__preview.has-plan { display: flex; flex-direction: column; } .lumo-cfg__viewtabs { display: inline-flex; align-self: flex-start; gap: 2px; padding: 4px; margin-bottom: 14px; border-radius: 999px; background: #fff; box-shadow: var(--lumo-shadow); } .lumo-cfg__viewtabs button { padding: 7px 16px; border: 0; border-radius: 999px; background: none; font-size: 13.5px; font-weight: 600; color: var(--lumo-muted); cursor: pointer; transition: background-color .2s, color .2s; } .lumo-cfg__viewtabs button[aria-selected="true"] { background: var(--lumo-ink); color: #fff; } .lumo-draw { display: grid; gap: 12px; } .lumo-draw[hidden] { display: none; } .lumo-draw figure { margin: 0; padding: 12px 14px 8px; border-radius: var(--lumo-radius); background: #fff; } .lumo-draw figcaption { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lumo-muted); } .lumo-draw svg { display: block; width: 100%; height: auto; overflow: visible; } .lumo-draw__plan svg { aspect-ratio: 560 / 340; } .lumo-draw .d-body { fill: #efe7da; transition: fill .3s; } .lumo-draw .d-back { fill: rgba(22, 21, 19, .16); } .lumo-draw .d-seat { fill: rgba(255, 255, 255, .18); stroke: var(--lumo-ink); stroke-width: 1; stroke-dasharray: 4 3; } .lumo-draw .d-outline { fill: none; stroke: var(--lumo-ink); stroke-width: 1.6; stroke-linejoin: round; } .lumo-draw .d-wall { stroke: #b9b2a6; stroke-width: 5; stroke-linecap: round; } .lumo-draw .d-floor { stroke: #cfc8bc; stroke-width: 2; } .lumo-draw .d-table { fill: none; stroke: #b9b2a6; stroke-width: 1.4; stroke-dasharray: 5 4; } .lumo-draw .d-dim { stroke: #8d8578; stroke-width: 1; } .lumo-draw .d-label { font: 500 14px var(--lumo-font); fill: var(--lumo-ink); } .lumo-draw .d-letter { font-family: var(--lumo-font-display); font-weight: 700; fill: var(--lumo-accent-ink); } .lumo-draw .d-note { font: 500 12px var(--lumo-font); fill: var(--lumo-muted); } .lumo-draw .d-note.is-tag { font-size: 11px; font-weight: 600; fill: var(--lumo-ink); letter-spacing: .04em; paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 3px; stroke-linejoin: round; } .lumo-draw .d-leg { fill: #b88a5a; stroke: var(--lumo-ink); stroke-width: 1.2; } .lumo-draw .d-leg.is-metal { fill: #9aa0a6; } .lumo-draw .d-glide { fill: var(--lumo-ink); } .lumo-draw .d-plinth { fill: #3a3733; stroke: var(--lumo-ink); stroke-width: 1.2; } .lumo-draw .d-plinth.is-upholstered { fill: #efe7da; } .lumo-draw__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0 4px; list-style: none; font-size: 12.5px; color: var(--lumo-muted); } .lumo-draw__legend li { display: flex; align-items: center; gap: 6px; } .lumo-draw__legend i { width: 18px; height: 10px; border-radius: 2px; } .lumo-draw__legend .is-back { background: #cdc5b9; border: 1px solid var(--lumo-ink); } .lumo-draw__legend .is-seat { background: #efe7da; border: 1px dashed var(--lumo-ink); } .lumo-draw__legend .is-wall { height: 5px; background: #b9b2a6; border-radius: 3px; } .lumo-draw__legend .is-table { border: 1.4px dashed #b9b2a6; } .lumo-cfg__preview.has-plan .lumo-cfg__summary { margin-top: 14px; } .lumo-collections__nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .lumo-collections__chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border: 1.5px solid var(--lumo-line); border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .2s, background-color .2s; } .lumo-collections__chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; } .lumo-collections__chip small { font-size: 11.5px; font-weight: 500; color: var(--lumo-muted); } .lumo-collections__chip:hover { border-color: var(--lumo-ink); } .lumo-collections__chip.is-active { border-color: var(--lumo-ink); background: var(--lumo-ink); color: #fff; } .lumo-collections__chip.is-active small { color: var(--lumo-accent); } /* 1.19.0: czytelna liczba na czarnym */ .lumo-collections__panel { animation: lumo-fade .3s var(--lumo-ease); } .lumo-cfg__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px 24px; border-top: 1px solid var(--lumo-line); background: #fff; } .lumo-cfg__total { display: grid; } .lumo-cfg__total-label { font-size: 13px; color: var(--lumo-muted); } .lumo-cfg__price { font-size: 30px; line-height: 1.2; font-family: var(--lumo-font-display); font-weight: 500; } @media (max-width: 1100px) { .lumo-cfg__price { font-size: 24px; } } @media (max-width: 600px) { .lumo-cfg__price { font-size: 22px; } } .lumo-cfg__price.is-bump { animation: lumo-price .45s var(--lumo-ease); } @keyframes lumo-price { 40% { color: var(--lumo-accent-ink); transform: translateY(-2px); } } .lumo-cfg__tax { font-size: 12.5px; color: var(--lumo-muted); } .lumo-cfg__actions { display: flex; gap: 10px; flex-wrap: wrap; } .lumo-cfg__msg { width: 100%; margin: 0; font-size: 14px; font-weight: 500; color: var(--lumo-danger); } .lumo-cfg__msg:empty { display: none; } .lumo-cfg__msg.is-ok { color: var(--lumo-ok); } .lumo-cfg__quote-fields { margin-top: 12px; padding-top: 16px; border-top: 1px dashed var(--lumo-line); } @media (max-width: 860px) { .lumo-cfg { width: 100vw; height: 100dvh; border-radius: 0; } .lumo-cfg__body { grid-template-columns: 1fr; overflow-y: auto; } .lumo-cfg__preview { padding: 16px; display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; } .lumo-cfg__image img[data-cfg-photo] { aspect-ratio: 1; } .lumo-cfg__summary { margin: 0; font-size: 13px; } .lumo-cfg__summary div { padding: 6px 0; } .lumo-cfg__fabric { display: none !important; } .lumo-cfg__steps { overflow: visible; padding: 0 16px 16px; } .lumo-cfg__head, .lumo-cfg__foot { padding-inline: 16px; } .lumo-cfg__actions { width: 100%; } .lumo-cfg__actions .lumo-btn--primary { flex: 1; } /* 1.21.0: koszyk + wycena obok siebie, równe, bez wychodzenia poza ekran */ .lumo-cfg__actions:has([data-switch-quote]) { flex-wrap: nowrap; gap: 8px; } .lumo-cfg__actions:has([data-switch-quote]) .lumo-btn { flex: 1 1 0; min-width: 0; min-height: 50px; padding-inline: 10px; font-size: 14.5px; white-space: nowrap; } } @media (max-width: 380px) { .lumo-cfg__actions:has([data-switch-quote]) .lumo-btn .lumo-icon { display: none; } .lumo-cfg__actions:has([data-switch-quote]) .lumo-btn { font-size: 14px; padding-inline: 8px; } } /* ---------- Side cart ---------- */ .lumo-sidecart { position: fixed; inset: 0; z-index: 220; visibility: hidden; } .lumo-sidecart.is-open { visibility: visible; } .lumo-sidecart__panel { position: absolute; inset: 0 0 0 auto; z-index: 2; width: min(460px, 100vw); display: flex; flex-direction: column; background: #fff; transform: translateX(100%); transition: transform .45s var(--lumo-ease); box-shadow: var(--lumo-shadow-lg); } .lumo-sidecart.is-open .lumo-sidecart__panel { transform: none; } .lumo-sidecart__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 16px 24px; border-bottom: 1px solid var(--lumo-line); } .lumo-sidecart__head h2 { margin: 0; font-size: 24px; display: flex; align-items: center; gap: 10px; } .lumo-sidecart__head .lumo-cart-count { position: static; transform: none; } .lumo-sidecart__body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; } .lumo-sidecart__body.is-loading::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .6); } .lumo-sidecart__inner { display: flex; flex-direction: column; height: 100%; min-height: 0; } .lumo-sidecart__items { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 8px 24px; } .lumo-sidecart__item { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--lumo-line); animation: lumo-fade .35s var(--lumo-ease); } .lumo-sidecart__thumb img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--lumo-radius-sm); background: var(--lumo-bg-2); } .lumo-sidecart__name { margin: 0 0 4px; font-weight: 600; font-size: 14.5px; line-height: 1.35; } .lumo-sidecart__name a { text-decoration: none; } .lumo-sidecart__info dl.variation { margin: 0 0 8px; font-size: 12.5px; color: var(--lumo-muted); display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; } .lumo-sidecart__info dl.variation dt { font-weight: 500; } .lumo-sidecart__info dl.variation dd { margin: 0; } .lumo-sidecart__info dl.variation p { margin: 0; } .lumo-sidecart__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .lumo-sidecart__price { font-weight: 600; } .lumo-sidecart__remove { align-self: start; width: 34px; height: 34px; border: 0; background: none; border-radius: 50%; color: var(--lumo-muted); display: grid; place-items: center; } .lumo-sidecart__remove:hover { background: var(--lumo-accent-soft); color: var(--lumo-accent-ink); } .lumo-sidecart__foot { padding: 18px 24px 24px; border-top: 1px solid var(--lumo-line); display: grid; gap: 10px; background: #fff; } .lumo-sidecart__line { display: flex; justify-content: space-between; margin: 0; font-size: 14px; } .lumo-sidecart__total { font-size: 18px; } .lumo-sidecart__note { margin: 0 0 4px; font-size: 12.5px; color: var(--lumo-muted); } .lumo-sidecart__empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 40px; text-align: center; color: var(--lumo-muted); } .lumo-qty { display: inline-flex; align-items: center; border: 1px solid var(--lumo-line); border-radius: 999px; } .lumo-qty button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; border-radius: 50%; } .lumo-qty button:hover { background: var(--lumo-bg-2); } .lumo-qty input { width: 36px; border: 0; text-align: center; font-weight: 600; -moz-appearance: textfield; background: none; } .lumo-qty input::-webkit-inner-spin-button { display: none; } .lumo-qty-fixed { font-size: 13px; color: var(--lumo-muted); } .lumo-freeship { padding: 14px 24px; background: var(--lumo-bg-2); font-size: 13.5px; } .lumo-freeship p { margin: 0 0 8px; } .lumo-freeship__bar { display: block; height: 6px; border-radius: 3px; background: #fff; overflow: hidden; } .lumo-freeship__bar span { display: block; height: 100%; background: var(--lumo-accent); border-radius: 3px; transition: width .6s var(--lumo-ease); } /* Długi opis SEO kategorii pod listą produktów (1.11.0, pole dlugi_opis) */ /* 1.13.0: jeden rozmiar tekstu, tło z pierścieniem i kropkami, wyraźne separatory sekcji, mniejszy odstęp do stopki */ .lumo-catseo { position: relative; isolation: isolate; overflow: hidden; margin: 72px 0 0; padding: 64px 72px 56px; border-radius: 28px; background: var(--lumo-bg-2); } @media (max-width: 1280px) { .lumo-catseo { margin-top: 64px; padding: 56px 56px 48px; } } @media (max-width: 1100px) { .lumo-catseo { margin-top: 56px; padding: 44px 40px 40px; } } @media (max-width: 600px) { .lumo-catseo { margin-top: 40px; padding: 32px 20px 28px; border-radius: 22px; } } .lumo-catseo::before { content: ""; position: absolute; z-index: -1; right: -120px; top: -120px; width: 360px; height: 360px; border-radius: 50%; border: 64px solid var(--lumo-accent); opacity: .22; } .lumo-catseo::after { content: ""; position: absolute; z-index: -1; left: 0; bottom: 0; width: 340px; height: 260px; background: radial-gradient(rgba(22, 21, 19, .16) 1.2px, transparent 1.6px) 0 0 / 18px 18px; -webkit-mask-image: linear-gradient(45deg, #000 10%, transparent 75%); mask-image: linear-gradient(45deg, #000 10%, transparent 75%); } @media (max-width: 1100px) { .lumo-catseo::before { width: 220px; height: 220px; right: -90px; top: -90px; border-width: 40px; } .lumo-catseo::after { width: 200px; height: 160px; } } .lumo-catseo__body { max-width: 1040px; margin-inline: auto; font-size: 16px; line-height: 1.75; color: var(--lumo-ink-2, #44413b); } .lumo-catseo__body p, .lumo-catseo__body li { font-size: 16px; line-height: 1.75; } .lumo-catseo__body * { font-size: inherit; } .lumo-catseo__body > :first-child { margin-top: 0; } .lumo-catseo__body > p:first-child { font-size: 16px; color: var(--lumo-ink-2, #44413b); } .lumo-catseo__body h2 { position: relative; margin-top: 52px; padding-top: 36px; border-top: 1px solid rgba(22, 21, 19, .16); font-size: 30px; line-height: 1.2; color: var(--lumo-ink); } .lumo-catseo__body h2::before { content: ""; position: absolute; left: 0; top: -2px; width: 56px; height: 3px; border-radius: 2px; background: var(--lumo-accent); } .lumo-catseo__body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .lumo-catseo__body > h2:first-child::before { display: none; } @media (max-width: 1280px) { .lumo-catseo__body h2 { font-size: 28px; } } @media (max-width: 1100px) { .lumo-catseo__body h2 { margin-top: 40px; padding-top: 28px; font-size: 22px; } } .lumo-catseo__body h3 { font-size: 18.5px; color: var(--lumo-ink); } .lumo-catseo__body strong, .lumo-catseo__body b { color: var(--lumo-ink); } .lumo-catseo__body ul { display: grid; gap: 8px; padding: 0; list-style: none; } .lumo-catseo__body ul li { position: relative; margin: 0; padding: 12px 16px 12px 44px; border-radius: 14px; background: #fff; } .lumo-catseo__body ul li::before { content: ""; position: absolute; left: 16px; top: 19px; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--lumo-accent); } .lumo-catseo__body a { font-weight: 600; } .lumo-catseo__body.is-clamped { max-height: 640px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); } .lumo-catseo__more { display: flex; justify-content: center; margin-top: 18px; } .lumo-catseo__more .lumo-btn .lumo-icon { transition: transform .25s; } .lumo-catseo__more [aria-expanded="true"] .lumo-icon { transform: rotate(180deg); } /* ========================================================================= Koszyk, zamówienie, konto (1.11.0 - przebudowa po „koszyk rozwalony, formularz do przerobienia”) Szablony: woocommerce/cart/cart.php, checkout/form-checkout.php, checkout/review-order.php; nagłówek lumo_shop_hero(). Własne klasy (.lumo-cart, .lumo-co), żeby style WooCommerce (float, 48% szerokości) niczego nie rozpychały. ========================================================================= */ /* ---------- Nagłówek stron sklepu + kroki ---------- */ .lumo-page--shop { padding-bottom: 86px; } @media (max-width: 1280px) { .lumo-page--shop { padding-bottom: 77px; } } @media (max-width: 1100px) { .lumo-page--shop { padding-bottom: 60px; } } @media (max-width: 600px) { .lumo-page--shop { padding-bottom: 48px; } } .lumo-shophead { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 40px; margin: 18px 0 40px; padding: 34px 44px 0; border-radius: 28px; background: var(--lumo-bg-2); } @media (max-width: 1280px) { .lumo-shophead { margin: 18px 0 38px; } } @media (max-width: 1100px) { .lumo-shophead { margin: 18px 0 30px; padding: 30px 34px 0; } } @media (max-width: 600px) { .lumo-shophead { margin: 18px 0 24px; padding: 22px 22px 0; } } .lumo-shophead::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: radial-gradient(rgba(22, 21, 19, .07) 1px, transparent 1.2px); background-size: 22px 22px; mask-image: linear-gradient(90deg, transparent 40%, #000); -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); } .lumo-shophead__ring { position: absolute; z-index: -1; left: -70px; bottom: -120px; width: 220px; aspect-ratio: 1; border-radius: 50%; border: 38px solid var(--lumo-accent); opacity: .35; } .lumo-shophead .lumo-eyebrow { margin-bottom: 8px; } .lumo-shophead__title { margin: 0; font-size: 48px; line-height: 1.05; } @media (max-width: 1280px) { .lumo-shophead__title { font-size: 44px; } } @media (max-width: 1100px) { .lumo-shophead__title { font-size: 34px; } } @media (max-width: 600px) { .lumo-shophead__title { font-size: 30px; } } .lumo-shophead__sub { margin: 8px 0 0; color: var(--lumo-muted); font-size: 15.5px; } .lumo-shophead__steps { justify-self: end; } .lumo-shophead__trust { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; margin: 4px calc(44px * -1) 0; padding: 14px 44px; border-top: 1px solid var(--lumo-line); background: rgba(255, 255, 255, .55); font-size: 13.5px; font-weight: 500; color: var(--lumo-ink-2); } @media (max-width: 1100px) { .lumo-shophead__trust { margin: 4px calc(34px * -1) 0; padding: 14px 34px; } } @media (max-width: 600px) { .lumo-shophead__trust { margin: 4px calc(22px * -1) 0; padding: 14px 22px; } } .lumo-shophead__trust li, .lumo-shophead__trust a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .lumo-shophead__trust .lumo-icon { color: var(--lumo-accent-ink); } .lumo-shophead__trust li:last-child { margin-left: auto; font-weight: 600; } .lumo-steps { display: flex; align-items: center; list-style: none; margin: 0; padding: 6px; gap: 2px; border-radius: 999px; background: #fff; box-shadow: var(--lumo-shadow); font-size: 14px; font-weight: 600; color: var(--lumo-muted); } .lumo-steps li { display: flex; align-items: center; } .lumo-steps li > a, .lumo-steps li { text-decoration: none; } .lumo-steps li > a { display: flex; align-items: center; color: inherit; } .lumo-steps li + li::before { content: ""; width: 18px; height: 2px; margin: 0 4px; border-radius: 2px; background: var(--lumo-line); } .lumo-steps li.is-done + li::before, .lumo-steps li.is-current::before { background: var(--lumo-ink); } .lumo-steps em { font-style: normal; padding: 0 12px 0 8px; white-space: nowrap; } .lumo-steps__n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--lumo-bg-2); font-size: 13px; transition: background-color .3s, color .3s; } .lumo-steps .is-current { color: var(--lumo-ink); } .lumo-steps .is-current .lumo-steps__n { background: var(--lumo-accent); color: var(--lumo-on-accent); box-shadow: 0 0 0 4px var(--lumo-accent-soft); } .lumo-steps .is-done { color: var(--lumo-ink-2); } .lumo-steps .is-done .lumo-steps__n { background: var(--lumo-ink); color: #fff; } .lumo-steps li > a:hover em { text-decoration: underline; text-decoration-color: var(--lumo-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; } /* ---------- Koszyk ---------- */ .lumo-cart { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 43px; align-items: start; } @media (max-width: 1280px) { .lumo-cart { gap: 38px; } } @media (max-width: 1100px) { .lumo-cart { gap: 30px; } } @media (max-width: 600px) { .lumo-cart { gap: 24px; } } .lumo-cart__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 14px; } .lumo-cart__title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 28px; } @media (max-width: 1280px) { .lumo-cart__title { font-size: 26px; } } @media (max-width: 1100px) { .lumo-cart__title { font-size: 22px; } } .lumo-cart__count { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--lumo-accent); color: var(--lumo-on-accent); font-family: var(--lumo-font); font-size: 13px; font-weight: 700; } .lumo-icon--flip { transform: scaleX(-1); } .lumo-link:hover .lumo-icon--flip { transform: scaleX(-1) translateX(3px); } .lumo-cart__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .lumo-cart__item { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto 130px 40px; grid-template-areas: "thumb info qty sub rm"; align-items: center; gap: 12px 22px; padding: 14px 18px 14px 14px; border: 1px solid var(--lumo-line); border-radius: 20px; background: #fff; transition: border-color .25s, box-shadow .3s; } .lumo-cart__item:hover { border-color: #d9d1c4; box-shadow: var(--lumo-shadow); } .lumo-cart__thumb { grid-area: thumb; } .lumo-cart__thumb img { display: block; width: 112px; height: 112px; object-fit: contain; border-radius: 14px; background: #fff; } .lumo-cart__thumb a { display: block; border-radius: 14px; background: var(--lumo-card-bg); } .lumo-cart__info { grid-area: info; min-width: 0; } .lumo-cart__name { margin: 0; font-family: var(--lumo-font-display); font-size: 18px; font-weight: 600; line-height: 1.25; } .lumo-cart__name a { text-decoration: none; color: var(--lumo-ink); } .lumo-cart__name a:hover { color: var(--lumo-accent-ink); } .lumo-cart__badge { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px; background: var(--lumo-accent-soft); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .lumo-cart__info dl.variation { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; margin: 8px 0 0; font-size: 13px; color: var(--lumo-muted); } .lumo-cart__info dl.variation dt { font-weight: 500; } .lumo-cart__info dl.variation dd, .lumo-cart__info dl.variation p { margin: 0; } .lumo-cart__unit { margin: 8px 0 0; font-size: 13.5px; color: var(--lumo-muted); } .lumo-cart__unit .amount { color: var(--lumo-ink-2); font-weight: 600; } .lumo-cart__unit .lumo-price-gross { display: none; } .lumo-cart__qty { grid-area: qty; } .lumo-cart__subtotal { grid-area: sub; text-align: right; font-size: 17px; font-weight: 700; } .lumo-cart__remove { grid-area: rm; justify-self: end; } .lumo-cart__remove a.remove { display: grid !important; place-items: center; width: 40px !important; height: 40px !important; border-radius: 50%; color: var(--lumo-muted) !important; background: transparent; font-size: 0 !important; line-height: 1; transition: background-color .2s, color .2s; } .lumo-cart__remove a.remove:hover { background: var(--lumo-danger-soft) !important; color: var(--lumo-danger) !important; } .lumo-cart__actions { display: none; } .no-js .lumo-cart__actions, .lumo-cart__actions:has(> :not(.lumo-cart__update, input[type="hidden"])) { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; } /* Ilość: przyciski −/+ (main.js dokłada .lumo-qty) */ .lumo-qty { display: inline-flex; align-items: center; height: 46px; padding: 3px; border: 1px solid var(--lumo-line); border-radius: 999px; background: #fff; } .lumo-qty button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--lumo-ink); cursor: pointer; transition: background-color .2s; } .lumo-qty button:hover { background: var(--lumo-bg-2); } .lumo-qty button:disabled { opacity: .35; cursor: default; background: transparent; } .lumo-qty .quantity { margin: 0 !important; } .lumo-qty input.qty, .lumo-cart__qty .lumo-qty input.qty { width: 44px !important; min-height: 0 !important; height: 38px; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center; font-size: 16px; font-weight: 700; -moz-appearance: textfield; } .lumo-qty input.qty::-webkit-outer-spin-button, .lumo-qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Podsumowanie koszyka (cart-totals.php WooCommerce w naszej kolumnie) */ .lumo-cart__side { position: sticky; top: calc(var(--lumo-header-h) + var(--lumo-nav-h) + 16px); display: grid; gap: 12px; } .lumo-cart__side .cart-collaterals { width: auto; float: none; } .lumo-cart__side .cart_totals { float: none !important; width: auto !important; padding: 30px; border-radius: 24px; background: var(--lumo-ink); color: #fff; } @media (max-width: 1100px) { .lumo-cart__side .cart_totals { padding: 24px; } } @media (max-width: 600px) { .lumo-cart__side .cart_totals { padding: 22px; } } .lumo-cart__side .cart_totals h2 { margin: 0 0 14px; font-size: 24px; color: #fff; } .lumo-cart__side .cart_totals table.shop_table { width: 100%; border: 0; border-collapse: collapse; font-size: 15px; } .lumo-cart__side .cart_totals table.shop_table tr { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); } .lumo-cart__side .cart_totals table.shop_table th, .lumo-cart__side .cart_totals table.shop_table td { display: block; padding: 0; border: 0; background: none; text-align: left; font-weight: 500; color: rgba(255, 255, 255, .72); text-transform: none; letter-spacing: 0; font-size: 15px; } .lumo-cart__side .cart_totals table.shop_table td { text-align: right; color: #fff; font-weight: 600; } .lumo-cart__side .cart_totals table.shop_table td::before { content: none !important; } .lumo-cart__side .cart_totals .order-total { border-bottom: 0 !important; padding-top: 16px !important; } .lumo-cart__side .cart_totals .order-total th { color: #fff !important; font-size: 17px !important; } .lumo-cart__side .cart_totals .order-total td { font-size: 24px !important; font-weight: 700; color: var(--lumo-accent) !important; } .lumo-cart__side .cart_totals .order-total td small, .lumo-cart__side .cart_totals .includes_tax { display: block; font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, .6); } .lumo-cart__side .cart_totals .woocommerce-shipping-destination, .lumo-cart__side .cart_totals .woocommerce-shipping-contents { margin: 4px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .6); } .lumo-cart__side .cart_totals ul#shipping_method { list-style: none; margin: 0; padding: 0; text-align: right; font-weight: 500; } .lumo-cart__side .cart_totals ul#shipping_method li { justify-content: flex-end; } .lumo-cart__side .cart_totals a { color: var(--lumo-accent); } .lumo-cart__side .wc-proceed-to-checkout { padding: 16px 0 0; } .lumo-cart__side .wc-proceed-to-checkout .checkout-button { display: flex !important; align-items: center; justify-content: center; width: 100%; min-height: 58px; margin: 0; border-radius: 999px; font-size: 17px; font-weight: 700; text-decoration: none; } .lumo-cart__side .wc-proceed-to-checkout .checkout-button::after { content: "→"; margin-left: 10px; transition: transform .25s var(--lumo-ease); } .lumo-cart__side .wc-proceed-to-checkout .checkout-button:hover::after { transform: translateX(4px); } /* Kod rabatowy (koszyk i zamówienie) */ .lumo-coupon { padding: 16px 18px; border: 1px solid var(--lumo-line); border-radius: 20px; background: #fff; } .lumo-coupon summary, .lumo-coupon__label { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; font-size: 15px; cursor: pointer; list-style: none; } .lumo-coupon summary::-webkit-details-marker { display: none; } .lumo-coupon summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s; } .lumo-coupon[open] summary::after { transform: rotate(-135deg); } .lumo-coupon .lumo-icon { color: var(--lumo-accent-ink); } .lumo-coupon__row { display: flex; gap: 8px; margin-top: 12px; } .lumo-coupon__row input.input-text { flex: 1; min-width: 0; min-height: 48px; padding: 10px 16px; border: 1px solid var(--lumo-input-line); border-radius: 999px; background: var(--lumo-bg-2); font-size: 15px; text-transform: uppercase; letter-spacing: .04em; transition: border-color .2s, background-color .2s; } .lumo-coupon__row input.input-text:focus { outline: none; border-color: var(--lumo-ink); background: #fff; } .lumo-coupon__row .lumo-btn { min-height: 48px; padding-inline: 20px; } .lumo-coupon__msg { margin: 8px 0 0; font-size: 13.5px; } .lumo-coupon__msg:empty { display: none; } .lumo-coupon__msg.is-error { color: var(--lumo-danger); } .lumo-coupon__msg.is-ok { color: var(--lumo-ok); } .lumo-coupon .coupon-error-notice { margin: 8px 0 0; color: var(--lumo-danger); font-size: 13.5px; } .lumo-cart-quote { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 20px; background: var(--lumo-accent-soft); font-size: 14px; color: var(--lumo-ink-2); } .lumo-cart-quote > .lumo-icon { flex: none; margin-top: 2px; color: var(--lumo-accent-ink); } .lumo-cart-quote strong { display: block; font-size: 15px; color: var(--lumo-ink); } .lumo-cart-quote p { margin: 2px 0 6px; } .lumo-cart-quote .lumo-link { font-size: 14px; } .cross-sells { margin-top: 72px; } @media (max-width: 1280px) { .cross-sells { margin-top: 64px; } } @media (max-width: 1100px) { .cross-sells { margin-top: 50px; } } @media (max-width: 600px) { .cross-sells { margin-top: 40px; } } .cross-sells > h2 { font-size: 32px; margin: 0 0 20px; } @media (max-width: 1280px) { .cross-sells > h2 { font-size: 31px; } } @media (max-width: 1100px) { .cross-sells > h2 { font-size: 24px; } } .cart-empty { text-align: center; font-size: 18px; padding: 40px 0 10px; } .cart-empty::before { display: none; } .return-to-shop { text-align: center; padding-bottom: 60px; } .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } /* ---------- Zamówienie (checkout) ---------- */ .lumo-shop-page > .woocommerce > .woocommerce-notices-wrapper:not(:empty), .lumo-co > .woocommerce-NoticeGroup { margin-bottom: 20px; } .lumo-co { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 43px; align-items: start; } @media (max-width: 1280px) { .lumo-co { gap: 38px; } } @media (max-width: 1100px) { .lumo-co { gap: 30px; } } @media (max-width: 600px) { .lumo-co { gap: 24px; } } .lumo-co > .woocommerce-NoticeGroup { grid-column: 1 / -1; } .lumo-co__steps { display: grid; gap: 14px; } .lumo-co-step { border: 1px solid var(--lumo-line); border-radius: 24px; background: #fff; transition: border-color .3s, box-shadow .3s; } .lumo-co-step__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 20px 30px; } @media (max-width: 1100px) { .lumo-co-step__head { padding: 20px 24px; } } @media (max-width: 600px) { .lumo-co-step__head { padding: 20px 18px; } } .lumo-co-step__n { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--lumo-bg-2); font-weight: 700; font-size: 15px; transition: background-color .3s, color .3s; } .lumo-co-step__title { margin: 0; font-size: 24px; } @media (max-width: 1280px) { .lumo-co-step__title { font-size: 23px; } } @media (max-width: 1100px) { .lumo-co-step__title { font-size: 20px; } } .lumo-co-step__recap { flex: 1 1 100%; order: 5; margin: 0 0 0 52px; font-size: 14px; color: var(--lumo-muted); display: none; } .lumo-co-step__edit { display: none; margin-left: auto; padding: 8px 16px; border: 1px solid var(--lumo-line); border-radius: 999px; background: #fff; font-weight: 600; font-size: 14px; cursor: pointer; transition: border-color .2s, background-color .2s; } .lumo-co-step__edit:hover { border-color: var(--lumo-ink); } .lumo-co-step__body { padding: 0 30px 30px; } @media (max-width: 1100px) { .lumo-co-step__body { padding: 0 24px 24px; } } @media (max-width: 600px) { .lumo-co-step__body { padding: 0 18px 20px; } } .lumo-co-step__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--lumo-line); } .lumo-co-step__nav .lumo-btn { margin-left: auto; } .lumo-co-step__nav--back { display: none; } /* Tryb krokowy (JS dodaje .is-stepped): widać jeden krok, ukończone zwinięte ze skrótem */ .lumo-co.is-stepped .lumo-co-step:not(.is-open) .lumo-co-step__body { display: none; } .lumo-co.is-stepped .lumo-co-step.is-open { border-color: var(--lumo-ink); box-shadow: var(--lumo-shadow-md); } .lumo-co.is-stepped .lumo-co-step.is-open .lumo-co-step__n { background: var(--lumo-accent); } .lumo-co.is-stepped .lumo-co-step.is-done .lumo-co-step__n { background: var(--lumo-ink); color: #fff; } .lumo-co.is-stepped .lumo-co-step.is-done:not(.is-open) .lumo-co-step__recap:not(:empty) { display: block; } .lumo-co.is-stepped .lumo-co-step.is-done:not(.is-open) .lumo-co-step__edit { display: inline-flex; } .lumo-co.is-stepped .lumo-co-step:not(.is-open):not(.is-done) { background: var(--lumo-bg-2); border-color: transparent; } .lumo-co.is-stepped .lumo-co-step:not(.is-open):not(.is-done) .lumo-co-step__title { color: var(--lumo-muted); } .lumo-co.is-stepped .lumo-co-step__nav--back { display: flex; margin-top: 14px; padding-top: 0; border: 0; } .lumo-co:not(.is-stepped) .lumo-co-step__nav { display: none; } .lumo-co-step.is-entering .lumo-co-step__body { animation: lumo-fade-up .4s var(--lumo-ease); } /* Pola formularza w siatce 2 kolumn (bez floatów WooCommerce) */ .lumo-co .woocommerce-billing-fields > h3, .lumo-co .woocommerce-additional-fields > h3 { display: none; } .lumo-co .woocommerce-billing-fields__field-wrapper, .lumo-co .woocommerce-shipping-fields__field-wrapper, .lumo-co .woocommerce-account-fields .create-account { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .lumo-co .form-row { grid-column: 1 / -1; float: none !important; width: auto !important; margin: 0 0 16px; padding: 0; } .lumo-co .form-row-first { grid-column: 1; } .lumo-co .form-row-last { grid-column: 2; } .lumo-co #billing_address_2_field, .lumo-co #shipping_address_2_field { margin-top: -6px; } .lumo-co #billing_postcode_field, .lumo-co #shipping_postcode_field { grid-column: 1; } .lumo-co #billing_city_field, .lumo-co #shipping_city_field { grid-column: 2; } .lumo-co #billing_state_field, .lumo-co #shipping_state_field { grid-column: 1 / -1; } .woocommerce-cart .lumo-shop-page .woocommerce-message .button { display: none; } .lumo-co .form-row label:not(.checkbox):not(.woocommerce-form__label-for-checkbox) { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--lumo-ink-2); } .lumo-co .form-row .required { color: var(--lumo-danger); text-decoration: none; border: 0; } .lumo-co .form-row .optional { font-weight: 400; color: var(--lumo-muted); } .lumo-co .form-row input.input-text, .lumo-co .form-row textarea, .lumo-co .form-row select, .lumo-co .select2-container .select2-selection--single { width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid var(--lumo-input-line); border-radius: 14px; background: var(--lumo-bg-2); font: inherit; font-size: 15.5px; color: var(--lumo-ink); transition: border-color .2s, background-color .2s, box-shadow .2s; } .lumo-co .form-row textarea { min-height: 110px; resize: vertical; } .lumo-co .form-row input.input-text:hover, .lumo-co .form-row textarea:hover { border-color: #a59e93; } .lumo-co .form-row input.input-text:focus, .lumo-co .form-row textarea:focus, .lumo-co .form-row select:focus { outline: none; border-color: var(--lumo-ink); background: #fff; box-shadow: 0 0 0 4px var(--lumo-accent-soft); } .lumo-co .select2-container .select2-selection--single { display: flex; align-items: center; height: auto; } .lumo-co .select2-container .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 1.4; color: var(--lumo-ink); } .lumo-co .select2-container .select2-selection--single .select2-selection__arrow { top: 50%; right: 12px; transform: translateY(-50%); } .lumo-co .form-row.woocommerce-invalid input.input-text, .lumo-co .form-row.woocommerce-invalid select { border-color: var(--lumo-danger); background: var(--lumo-danger-soft); } .lumo-co .form-row.woocommerce-invalid > label { color: var(--lumo-danger); } .lumo-co .form-row.woocommerce-validated input.input-text { border-color: #c8e2cf; } .lumo-co .checkout-inline-error-message { margin: 6px 0 0; font-size: 13px; color: var(--lumo-danger); } .lumo-co-sub { grid-column: 1 / -1; margin: 10px 0 14px !important; font-family: var(--lumo-font-display); font-size: 18px; font-weight: 600; color: var(--lumo-ink); } .lumo-co .woocommerce-billing-fields .lumo-co-sub { padding-top: 18px; border-top: 1px solid var(--lumo-line); } /* Przełączniki: faktura, inny adres dostawy, załóż konto */ .lumo-co .lumo-inv-toggle label.checkbox, .lumo-co #ship-to-different-address label, .lumo-co .woocommerce-account-fields label.checkbox { display: flex !important; align-items: center; gap: 12px; margin: 0; padding: 14px 16px; border: 1.5px dashed #d7cfc2; border-radius: 16px; font-family: var(--lumo-font); font-size: 15px; font-weight: 600; color: var(--lumo-ink); cursor: pointer; transition: border-color .2s, background-color .2s; } .lumo-co .lumo-inv-toggle label.checkbox:hover, .lumo-co #ship-to-different-address label:hover { border-color: var(--lumo-ink); } .lumo-co .lumo-inv-toggle label.checkbox:has(input:checked), .lumo-co #ship-to-different-address label:has(input:checked) { border-style: solid; border-color: var(--lumo-ink); background: var(--lumo-accent-soft); } .lumo-co .lumo-inv-toggle input, .lumo-co #ship-to-different-address input, .lumo-co .woocommerce-account-fields input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--lumo-ink); flex: none; } .lumo-co .lumo-inv-toggle .optional, .lumo-co .lumo-inv-field .optional { display: none; } .lumo-co .lumo-inv-toggle label.checkbox::after { content: "Faktura VAT"; margin-left: auto; padding: 3px 10px; border-radius: 999px; background: var(--lumo-bg-2); font-size: 12px; font-weight: 600; color: var(--lumo-muted); } .lumo-co.is-js:not(.is-invoice) .lumo-inv-field { display: none; } .lumo-co.is-invoice .lumo-inv-field { animation: lumo-fade-up .3s var(--lumo-ease); } .lumo-co #ship-to-different-address { margin: 18px 0 14px; font-size: 15px; } .lumo-co .shipping_address { padding: 4px 0 0; } .lumo-co .woocommerce-additional-fields { margin-top: 6px; } /* Sposoby dostawy i płatności jako karty */ .lumo-co-ship__list, .lumo-co #payment ul.payment_methods { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 10px; } .lumo-co-opt { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px solid var(--lumo-line); border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s; } .lumo-co-opt:hover { border-color: #cfc6b8; } .lumo-co-opt input { position: absolute; opacity: 0; pointer-events: none; } .lumo-co-opt__mark { flex: none; width: 22px; height: 22px; border: 2px solid #cfc6b8; border-radius: 50%; transition: border-color .2s, box-shadow .2s; } .lumo-co-opt:has(input:checked) { border-color: var(--lumo-ink); background: #fffdf5; box-shadow: 0 0 0 3px var(--lumo-accent-soft); } .lumo-co-opt:has(input:checked) .lumo-co-opt__mark { border-color: var(--lumo-ink); box-shadow: inset 0 0 0 5px #fff; background: var(--lumo-ink); } .lumo-co-opt:has(input:focus-visible) { outline: 2px solid var(--lumo-ink); outline-offset: 2px; } .lumo-co-opt__body { flex: 1; min-width: 0; font-size: 15.5px; } .lumo-co-opt__price { font-weight: 700; white-space: nowrap; } .lumo-co-free { color: var(--lumo-ok); } .lumo-co-ship__none { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--lumo-bg-2); font-size: 14px; color: var(--lumo-muted); } .lumo-co #payment { margin: 0; padding: 0; background: none; border-radius: 0; } .lumo-co #payment ul.payment_methods { border: 0; } .lumo-co #payment ul.payment_methods li { position: relative; margin: 0; padding: 16px 18px; border: 1.5px solid var(--lumo-line); border-radius: 16px; background: #fff; line-height: 1.4; transition: border-color .2s, background-color .2s, box-shadow .2s; } .lumo-co #payment ul.payment_methods li:has(> input:checked) { border-color: var(--lumo-ink); background: #fffdf5; box-shadow: 0 0 0 3px var(--lumo-accent-soft); } .lumo-co #payment ul.payment_methods li > input { width: 20px; height: 20px; margin: 0 10px 0 0; vertical-align: -4px; accent-color: var(--lumo-ink); } .lumo-co #payment ul.payment_methods li > label { display: inline; font-weight: 600; font-size: 15.5px; cursor: pointer; } .lumo-co #payment ul.payment_methods li img { max-height: 24px; display: inline; margin-left: 6px; vertical-align: middle; } .lumo-co #payment .payment_box { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--lumo-bg-2); font-size: 13.5px; color: var(--lumo-ink-2); } .lumo-co #payment .payment_box::before { display: none; } .lumo-co #payment .payment_box p { margin: 0; } .lumo-co #payment .place-order { margin: 18px 0 0; padding: 0; } .lumo-co .woocommerce-terms-and-conditions-wrapper { margin-bottom: 16px; font-size: 13.5px; color: var(--lumo-muted); } .lumo-co .woocommerce-terms-and-conditions-wrapper .form-row { margin-bottom: 0; } .lumo-co .woocommerce-terms-and-conditions-wrapper label.checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 500; color: var(--lumo-ink-2); } .lumo-co .woocommerce-terms-and-conditions-wrapper input { width: 20px; height: 20px; margin: 0; accent-color: var(--lumo-ink); flex: none; } .lumo-co #place_order { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 62px; border-radius: 999px; font-size: 18px; font-weight: 700; } /* Podsumowanie (prawa kolumna) */ .lumo-co__side { position: static; } .lumo-co-summary { padding: 28px; border-radius: 24px; background: var(--lumo-bg-2); } @media (max-width: 1100px) { .lumo-co-summary { padding: 22px; } } @media (max-width: 600px) { .lumo-co-summary { padding: 20px; } } .lumo-co-summary__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .lumo-co-summary__title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; } .lumo-co-summary .lumo-link { font-size: 14px; } .lumo-co-summary__toggle { display: none; } .lumo-co .woocommerce-checkout-review-order { position: static; padding: 0; background: none; border-radius: 0; } .lumo-co-review__items { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; gap: 12px; max-height: 360px; overflow-y: auto; } .lumo-co-review__item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center; } .lumo-co-review__thumb { position: relative; display: block; width: 72px; height: 72px; border-radius: 14px; background: #fff; } .lumo-co-review__thumb img { width: 72px; height: 72px; object-fit: contain; border-radius: 14px; } .lumo-co-review__qty { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--lumo-ink); color: #fff; font-size: 12px; font-weight: 700; } .lumo-co-review__name { font-size: 14.5px; font-weight: 600; line-height: 1.35; } .lumo-co-review__name dl.variation { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 6px; margin: 4px 0 0; font-size: 12.5px; font-weight: 400; color: var(--lumo-muted); } .lumo-co-review__name dl.variation dd, .lumo-co-review__name dl.variation p { margin: 0; } .lumo-co-review__price { font-weight: 700; font-size: 15px; white-space: nowrap; } .lumo-co-review__price .lumo-price-gross { display: none; } .lumo-co-review__totals { width: 100%; margin-top: 18px; border-collapse: collapse; border-top: 1px solid var(--lumo-line); font-size: 15px; } .lumo-co-review__totals th, .lumo-co-review__totals td { padding: 10px 0; border: 0; background: none; text-align: left; font-weight: 500; color: var(--lumo-ink-2); } .lumo-co-review__totals td { text-align: right; font-weight: 600; color: var(--lumo-ink); } .lumo-co-review__totals tr:first-child th, .lumo-co-review__totals tr:first-child td { padding-top: 16px; } .lumo-co-review__totals .order-total th, .lumo-co-review__totals .order-total td { padding-top: 16px; border-top: 1px solid var(--lumo-line); font-size: 17px; font-weight: 700; color: var(--lumo-ink); } .lumo-co-review__totals .order-total td { font-size: 26px; } .lumo-co-review__totals .order-total small, .lumo-co-review__totals .includes_tax { display: block; font-size: 12px; font-weight: 400; color: var(--lumo-muted); } .lumo-co-review__totals .cart-discount td, .lumo-co-review__totals .cart-discount th { color: var(--lumo-ok); } .lumo-co-review__totals .woocommerce-remove-coupon { margin-left: 6px; font-size: 12.5px; color: var(--lumo-muted); } .lumo-coupon--co { margin-top: 16px; background: #fff; border-color: transparent; } .lumo-co-summary__trust { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; font-size: 13.5px; color: var(--lumo-ink-2); } .lumo-co-summary__trust li { display: flex; align-items: center; gap: 10px; } .lumo-co-summary__trust .lumo-icon { flex: none; color: var(--lumo-accent-ink); } .lumo-co .blockUI.blockOverlay { border-radius: 20px; } /* Logowanie powracającego klienta nad formularzem */ .woocommerce-form-login-toggle .woocommerce-info { margin-bottom: 16px; } form.woocommerce-form-login.login { padding: 20px; border: 1px solid var(--lumo-line); border-radius: var(--lumo-radius); margin-bottom: 24px; } @media (max-width: 1180px) { .lumo-cart { grid-template-columns: minmax(0, 1fr) 360px; } .lumo-co { grid-template-columns: minmax(0, 1fr) 380px; } .lumo-cart__item { grid-template-columns: 96px minmax(0, 1fr) auto 40px; grid-template-areas: "thumb info info rm" "thumb qty sub sub"; } .lumo-cart__thumb img { width: 96px; height: 96px; } .lumo-shophead { grid-template-columns: 1fr; } .lumo-shophead__steps { justify-self: start; max-width: 100%; } } /* Podziękowanie */ .woocommerce-order { max-width: 860px; margin-inline: auto; } .woocommerce-thankyou-order-received { font-family: var(--lumo-font-display); font-size: 34px; text-align: center; padding: 10px 0 20px; } @media (max-width: 1100px) { .woocommerce-thankyou-order-received { font-size: 30px; } } @media (max-width: 600px) { .woocommerce-thankyou-order-received { font-size: 24px; } } .woocommerce-thankyou-order-received::before { display: none; } ul.woocommerce-order-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; list-style: none; margin: 0 0 36px; padding: 0; } ul.woocommerce-order-overview li { padding: 16px; background: var(--lumo-bg-2); border-radius: var(--lumo-radius); font-size: 12.5px; color: var(--lumo-muted); text-transform: uppercase; letter-spacing: .06em; } ul.woocommerce-order-overview li strong { display: block; margin-top: 4px; font-size: 16px; color: var(--lumo-ink); text-transform: none; letter-spacing: 0; } .woocommerce-customer-details address { font-style: normal; padding: 20px; border: 1px solid var(--lumo-line); border-radius: var(--lumo-radius); } /* ---------- Moje konto ---------- */ .woocommerce-account .woocommerce { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; } @media (max-width: 1280px) { .woocommerce-account .woocommerce { gap: 51px; } } @media (max-width: 1100px) { .woocommerce-account .woocommerce { gap: 40px; } } @media (max-width: 600px) { .woocommerce-account .woocommerce { gap: 24px; } } .woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 8px; background: var(--lumo-bg-2); border-radius: var(--lumo-radius-lg); display: grid; gap: 2px; } .woocommerce-MyAccount-navigation a { display: block; padding: 12px 16px; border-radius: var(--lumo-radius-sm); text-decoration: none; font-weight: 500; transition: background-color .2s, color .2s; } .woocommerce-MyAccount-navigation a:hover { background: #fff; color: var(--lumo-ink); } .woocommerce-MyAccount-navigation .is-active a { background: var(--lumo-ink); color: #fff; } .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--lumo-muted); } .woocommerce-MyAccount-content { min-width: 0; } .woocommerce-MyAccount-content > p:first-child { font-size: 17px; } .lumo-account-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 28px; } .lumo-account-card { display: grid; gap: 4px; padding: 22px; border: 1px solid var(--lumo-line); border-radius: var(--lumo-radius); text-decoration: none; transition: all .25s var(--lumo-ease); } .lumo-account-card .lumo-icon { color: var(--lumo-accent-ink); margin-bottom: 8px; } .lumo-account-card span { font-size: 13.5px; color: var(--lumo-muted); } .lumo-account-card:hover { border-color: var(--lumo-ink); transform: translateY(-3px); box-shadow: var(--lumo-shadow); color: var(--lumo-ink); } .woocommerce-orders-table .button { min-height: 36px; padding: 8px 14px; font-size: 13px; margin: 2px; } .woocommerce-orders-table mark, .order-status { background: none; font-weight: 600; } .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .woocommerce-Address { padding: 22px; border: 1px solid var(--lumo-line); border-radius: var(--lumo-radius); } .woocommerce-Address-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .woocommerce-Address-title h2 { font-size: 20px; margin: 0; } .woocommerce-Address address { font-style: normal; color: var(--lumo-ink-2); margin-top: 10px; } /* Logowanie / rejestracja (woocommerce/myaccount/form-login.php): karta z zakładkami + ciemny panel korzyści. */ .woocommerce-account:not(.logged-in) .woocommerce { grid-template-columns: 1fr; max-width: 1080px; margin-inline: auto; } .lumo-auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 20px; align-items: stretch; } .lumo-auth__card { padding: 44px; border: 1px solid var(--lumo-line); border-radius: 28px; background: #fff; box-shadow: 0 24px 60px rgba(22, 21, 19, .06); } @media (max-width: 1100px) { .lumo-auth__card { padding: 34px; } } @media (max-width: 600px) { .lumo-auth__card { padding: 24px; } } .lumo-auth__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 28px; padding: 5px; border-radius: 999px; background: var(--lumo-bg-2); } .lumo-auth__tabs [role="tab"] { min-height: 46px; border: 0; border-radius: 999px; background: transparent; font-weight: 600; font-size: 15px; color: var(--lumo-ink-2); cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; } .lumo-auth__tabs [role="tab"][aria-selected="true"] { background: #fff; color: var(--lumo-ink); box-shadow: 0 4px 14px rgba(22, 21, 19, .08); } .lumo-auth__panel { animation: lumo-fade .35s var(--lumo-ease); } .lumo-auth__title { margin: 0 0 6px; font-size: 34px; } @media (max-width: 1280px) { .lumo-auth__title { font-size: 31px; } } @media (max-width: 1100px) { .lumo-auth__title { font-size: 26px; } } .lumo-auth__lead { margin: 0 0 24px; color: var(--lumo-muted); font-size: 15px; } .lumo-auth form.woocommerce-form-login, .lumo-auth form.woocommerce-form-register { margin: 0; padding: 0; border: 0; border-radius: 0; } .lumo-auth .woocommerce-form-row input.input-text { min-height: 54px; border-radius: 14px; background: var(--lumo-bg-2); border-color: var(--lumo-input-line); transition: border-color .2s, background-color .2s, box-shadow .2s; } .lumo-auth .woocommerce-form-row input.input-text:focus { background: #fff; border-color: var(--lumo-ink); } .lumo-auth .password-input { display: block; position: relative; } .lumo-auth .show-password-input { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); border: 0; background: transparent; } .lumo-auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 20px; font-size: 14px; } .lumo-auth__row .lumo-check { margin: 0; align-items: center; } .lumo-auth__lost { font-weight: 600; color: var(--lumo-ink); text-decoration: underline; text-decoration-color: var(--lumo-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; } .lumo-auth__note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--lumo-accent-soft); font-size: 14px; } .lumo-auth__note .lumo-icon { flex: none; color: var(--lumo-accent-ink); } .lumo-auth .woocommerce-privacy-policy-text { font-size: 12.5px; color: var(--lumo-muted); } .lumo-auth__aside { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 44px; border-radius: 28px; background: var(--lumo-ink); color: #fff; } @media (max-width: 1100px) { .lumo-auth__aside { padding: 34px; } } @media (max-width: 600px) { .lumo-auth__aside { padding: 26px; } } .lumo-auth__aside .lumo-eyebrow { color: var(--lumo-accent); } .lumo-auth__aside h2 { margin: 0 0 22px; color: #fff; font-size: 34px; } @media (max-width: 1280px) { .lumo-auth__aside h2 { font-size: 31px; } } @media (max-width: 1100px) { .lumo-auth__aside h2 { font-size: 26px; } } .lumo-auth__aside ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 16px; } .lumo-auth__aside li { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .7); } .lumo-auth__aside li .lumo-icon { flex: none; width: 42px; height: 42px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .08); color: var(--lumo-accent); } .lumo-auth__aside li strong { display: block; margin-bottom: 2px; font-size: 15.5px; color: #fff; } .lumo-auth__guest { margin: auto 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; color: rgba(255, 255, 255, .7); } .lumo-auth__guest a { color: var(--lumo-accent); font-weight: 600; } .lumo-auth__ring { position: absolute; z-index: -1; right: -120px; bottom: -140px; width: 320px; height: 320px; border-radius: 50%; border: 52px solid var(--lumo-accent); opacity: .16; } /* Przypomnienie i ustawienie hasła */ .woocommerce-account:not(.logged-in) .woocommerce > form.woocommerce-ResetPassword { max-width: 560px; width: 100%; margin: 0 auto; padding: 40px; border: 1px solid var(--lumo-line); border-radius: 28px; background: #fff; box-shadow: 0 24px 60px rgba(22, 21, 19, .06); } @media (max-width: 1100px) { .woocommerce-account:not(.logged-in) .woocommerce > form.woocommerce-ResetPassword { padding: 34px; } } @media (max-width: 600px) { .woocommerce-account:not(.logged-in) .woocommerce > form.woocommerce-ResetPassword { padding: 24px; } } .woocommerce-ResetPassword > p:first-child { margin-top: 0; color: var(--lumo-ink-2); } .woocommerce form.woocommerce-ResetPassword .form-row-first, .woocommerce form.woocommerce-ResetPassword .form-row-last { width: 100%; float: none; } .woocommerce-ResetPassword input.input-text { min-height: 54px; border-radius: 14px; } .woocommerce-ResetPassword .button { width: 100%; min-height: 54px; } @media (max-width: 860px) { .woocommerce-account .woocommerce { grid-template-columns: minmax(0, 1fr); } .lumo-auth, .woocommerce-Addresses { grid-template-columns: minmax(0, 1fr); } } /* ---------- Moje konto (1.15.0, klient: „całe do naprawy wizualnie”) ---------- WooCommerce daje nawigacji float + width 30% (w kolumnie 260 px menu miało ~80 px) - tu pełna szerokość kolumny. Menu = biała karta ze strzałkami, aktywna pozycja czarna; treść w kartach; tabele zamówień na telefonie jako karty. */ .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; margin: 0; } .woocommerce-account .woocommerce-MyAccount-navigation { position: sticky; top: calc(var(--lumo-stick) + 20px); } .woocommerce-MyAccount-navigation ul { gap: 4px; padding: 8px; border: 1px solid var(--lumo-line); border-radius: 22px; background: #fff; box-shadow: 0 14px 40px -28px rgba(22, 21, 19, .35); } .woocommerce-MyAccount-navigation li { margin: 0; } .woocommerce-MyAccount-navigation a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-radius: 14px; font-size: 15px; font-weight: 500; color: var(--lumo-ink-2); } .woocommerce-MyAccount-navigation a::after { content: ""; flex: none; width: 7px; height: 7px; border-top: 1.75px solid currentColor; border-right: 1.75px solid currentColor; transform: rotate(45deg); opacity: .35; transition: opacity .2s, transform .2s var(--lumo-ease); } .woocommerce-MyAccount-navigation a:hover { background: var(--lumo-bg-2); color: var(--lumo-ink); } .woocommerce-MyAccount-navigation a:hover::after { opacity: .8; transform: translateX(2px) rotate(45deg); } .woocommerce-MyAccount-navigation .is-active a { background: var(--lumo-ink); color: #fff; } .woocommerce-MyAccount-navigation .is-active a::after { opacity: 1; border-color: var(--lumo-accent); } .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 6px !important; padding-top: 6px; border-top: 1px solid var(--lumo-line); } .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--lumo-muted); } .woocommerce-MyAccount-content > p:first-child { margin: 0 0 8px; font-family: var(--lumo-font-display); font-size: 24px; font-weight: 500; line-height: 1.3; color: var(--lumo-ink); } .woocommerce-MyAccount-content > p:first-child a { font-family: var(--lumo-font); font-size: 14px; font-weight: 600; color: var(--lumo-muted); } .woocommerce-MyAccount-content > p { color: var(--lumo-ink-2); } .woocommerce-MyAccount-content > p a { color: var(--lumo-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lumo-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; } .lumo-account-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 26px 0 32px; } .lumo-account-card { gap: 6px; padding: 24px; border-radius: 22px; background: #fff; color: var(--lumo-ink); } .lumo-account-card .lumo-icon { width: 44px; height: 44px; margin-bottom: 10px; padding: 11px; border-radius: 14px; background: var(--lumo-accent-soft); color: var(--lumo-ink); transition: background-color .25s; } .lumo-account-card:hover .lumo-icon { background: var(--lumo-accent); } .lumo-account-card strong { font-family: var(--lumo-font-display); font-size: 18px; font-weight: 600; } .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 { font-size: 24px; margin: 32px 0 16px; } .woocommerce-MyAccount-content .woocommerce-info, .woocommerce-MyAccount-content .woocommerce-message { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border: 1px solid var(--lumo-line); border-radius: 18px; background: var(--lumo-bg-2); } .woocommerce-MyAccount-content .woocommerce-info .button, .woocommerce-MyAccount-content .woocommerce-message .button { order: 2; } /* Tabela zamówień / wycen */ .woocommerce-orders-table .woocommerce-orders-table__cell-order-status { font-weight: 600; } .woocommerce-orders-table .woocommerce-orders-table__cell-order-status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--lumo-accent); vertical-align: 1px; } .woocommerce-orders-table .button, .woocommerce-orders-table .woocommerce-button { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 16px; border-radius: 999px; background: var(--lumo-ink); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; } .woocommerce-orders-table .button:hover { background: var(--lumo-accent); color: var(--lumo-on-accent); } .woocommerce-pagination--without-numbers { display: flex; gap: 10px; } /* Szczegóły zamówienia w koncie: nagłówek z numerem i statusem */ .woocommerce-MyAccount-content > p:first-child mark { padding: 2px 8px; border-radius: 6px; background: var(--lumo-accent-soft); color: var(--lumo-ink); font-weight: 600; } /* Formularze konta (adres, dane, hasło) */ .woocommerce-MyAccount-content form .form-row input.input-text, .woocommerce-MyAccount-content form .form-row select, .woocommerce-MyAccount-content form .form-row textarea { min-height: 50px; padding: 12px 14px; border: 1px solid var(--lumo-input-line); border-radius: 14px; background: var(--lumo-bg-2); font: inherit; font-size: 15px; } .woocommerce-MyAccount-content form .form-row input.input-text:focus { border-color: var(--lumo-ink); background: #fff; outline: 0; } .woocommerce-MyAccount-content form .form-row label { font-size: 14px; font-weight: 600; } .woocommerce-MyAccount-content fieldset { margin: 28px 0 0; padding: 22px; border: 1px solid var(--lumo-line); border-radius: 20px; } .woocommerce-MyAccount-content fieldset legend { padding: 0 8px; font-family: var(--lumo-font-display); font-size: 18px; font-weight: 600; } .woocommerce-Address { border-radius: 22px; background: #fff; } .woocommerce-Address-title a.edit { font-size: 13.5px; font-weight: 600; color: var(--lumo-accent-ink); } @media (max-width: 860px) { .woocommerce-account .woocommerce-MyAccount-navigation { position: static; } /* Telefon (klient): odnośniki do podstron konta jeden pod drugim, na całą szerokość */ .woocommerce-MyAccount-navigation ul { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; } .woocommerce-MyAccount-navigation a { width: 100%; white-space: normal; } .woocommerce-MyAccount-content > p:first-child { font-size: 20px; } .lumo-account-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .lumo-account-card { padding: 16px; border-radius: 18px; } /* Tabela zamówień jako karty (WC dodaje data-title w komórkach) */ .woocommerce-account table.shop_table_responsive thead { display: none; } .woocommerce-account table.shop_table_responsive, .woocommerce-account table.shop_table_responsive tbody { display: block; border: 0 !important; background: none; overflow: visible; } .woocommerce-account table.shop_table_responsive tbody tr { display: block; margin: 0 0 12px; padding: 6px 16px; border: 1px solid var(--lumo-line); border-radius: 18px; background: #fff; } .woocommerce-account table.shop_table_responsive tbody tr td, .woocommerce-account table.shop_table_responsive tbody tr th { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 !important; border: 0 !important; border-top: 1px solid var(--lumo-line) !important; text-align: right !important; } .woocommerce-account table.shop_table_responsive tbody tr td:first-child, .woocommerce-account table.shop_table_responsive tbody tr th:first-child { border-top: 0 !important; } .woocommerce-account table.shop_table_responsive tbody tr td::before { content: attr(data-title); float: none; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--lumo-muted); text-align: left; } .woocommerce-account table.shop_table_responsive tbody tr td.woocommerce-orders-table__cell-order-actions { justify-content: flex-end; flex-wrap: wrap; } .woocommerce-account table.shop_table_responsive tbody tr td.woocommerce-orders-table__cell-order-actions::before { display: none; } } @media (max-width: 420px) { .lumo-account-cards { grid-template-columns: minmax(0, 1fr); } } /* ---------- Bloki koszyka / zamówienia WooCommerce (gdy używane) ---------- */ .wc-block-cart, .wc-block-checkout { font-family: var(--lumo-font); } .wc-block-components-sidebar { background: var(--lumo-bg-2); border-radius: var(--lumo-radius-lg); padding: 24px !important; } .wc-block-components-button:not(.is-link) { background: var(--lumo-accent) !important; color: var(--lumo-on-accent) !important; border-radius: 999px !important; min-height: 54px; } .wc-block-components-text-input input, .wc-block-components-combobox .components-combobox-control__input { border-radius: var(--lumo-radius-sm) !important; border-color: var(--lumo-line) !important; } /* ---------- Opinie (woocommerce/single-product-reviews.php) ---------- */ .lumo-stars { position: relative; display: inline-flex; vertical-align: middle; line-height: 0; } .lumo-stars svg { flex: none; } .lumo-stars__bg, .lumo-stars__fg { display: inline-flex; gap: 2px; } .lumo-stars__bg { fill: var(--lumo-line); } .lumo-stars__fg { position: absolute; inset: 0 auto 0 0; width: var(--lumo-stars, 0%); overflow: hidden; fill: #f2b01e; } .lumo-reviews__summary { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 30px; border-radius: var(--lumo-radius-lg); background: var(--lumo-bg-2); } @media (max-width: 1280px) { .lumo-reviews__summary { gap: 38px; } } @media (max-width: 1100px) { .lumo-reviews__summary { gap: 30px; padding: 26px; } } @media (max-width: 600px) { .lumo-reviews__summary { gap: 18px; padding: 20px; } } .lumo-reviews__score { display: grid; justify-items: start; gap: 6px; } .lumo-reviews__score strong { font-family: var(--lumo-font-display); font-size: 54px; line-height: 1; font-weight: 600; letter-spacing: -.03em; } .lumo-reviews__score strong.is-empty { color: #c9c1b4; } .lumo-reviews__score > span:last-child { font-size: 14px; color: var(--lumo-muted); } .lumo-reviews__note + .comment-form-rating, #review_form .lumo-rate { margin-top: 4px; } .lumo-reviews__bars { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--lumo-ink-2); } .lumo-reviews__bars li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; gap: 10px; align-items: center; } .lumo-reviews__bars li > span:first-child { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; } .lumo-reviews__bars svg { fill: #f2b01e; } .lumo-reviews__bar { height: 8px; border-radius: 99px; background: #fff; overflow: hidden; } .lumo-reviews__bar span { display: block; height: 100%; border-radius: inherit; background: var(--lumo-ink); transition: width .6s var(--lumo-ease); } .lumo-reviews__n { text-align: right; color: var(--lumo-muted); font-variant-numeric: tabular-nums; } .lumo-reviews__cta p { margin: 0 0 12px; font-size: 14.5px; color: var(--lumo-ink-2); } .lumo-reviews__items { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; } #reviews .lumo-reviews__items .comment_container { padding: 18px 20px; border: 1px solid var(--lumo-line); border-radius: var(--lumo-radius); background: #fff; } #reviews .comment-text { flex: 1; } #reviews .comment-text .star-rating { float: right; } #reviews .comment-text .meta { margin: 0 0 6px; font-size: 14px; color: var(--lumo-muted); } #reviews .comment-text .meta strong { color: var(--lumo-ink); font-size: 15px; } #reviews .comment-text .description p { margin: 0; } .lumo-reviews__formwrap { margin-top: 24px; padding: 32px; border: 1px solid var(--lumo-line); border-radius: var(--lumo-radius-lg); background: #fff; box-shadow: var(--lumo-shadow); scroll-margin-top: calc(var(--lumo-header-h) + var(--lumo-nav-h) + 80px); } @media (max-width: 1100px) { .lumo-reviews__formwrap { padding: 26px; } } @media (max-width: 600px) { .lumo-reviews__formwrap { padding: 20px; } } .lumo-reviews__formtitle { font-size: 28px; margin: 0 0 4px; } @media (max-width: 1100px) { .lumo-reviews__formtitle { font-size: 22px; } } .lumo-reviews__formtitle small { display: block; margin-top: 6px; font-family: var(--lumo-font); font-size: 14px; font-weight: 500; } .lumo-reviews__note { margin: 0 0 18px; font-size: 13.5px; color: var(--lumo-muted); } #review_form .comment-form { margin: 0; } #review_form .comment-form > p { margin: 0; } #review_form .form-submit { margin-top: 6px; } .lumo-rate { margin-bottom: 16px; } .lumo-rate .lumo-field__label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; } .lumo-rate__stars { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 2px; } .lumo-rate__stars input { position: absolute; opacity: 0; pointer-events: none; } .lumo-rate__stars label { cursor: pointer; padding: 2px; border-radius: 8px; line-height: 0; fill: var(--lumo-line); transition: fill .15s, transform .2s var(--lumo-ease); } .lumo-rate__stars label:hover, .lumo-rate__stars label:hover ~ label, .lumo-rate__stars input:checked ~ label { fill: #f2b01e; } .lumo-rate__stars label:hover { transform: scale(1.12); } .lumo-rate__stars input:focus-visible + label { outline: 2px solid var(--lumo-ink); } .lumo-rate__text { order: -1; margin-left: 12px; font-size: 14px; font-weight: 600; color: var(--lumo-ink-2); } @media (max-width: 900px) { .lumo-reviews__summary { grid-template-columns: 1fr 1fr; } .lumo-reviews__cta { grid-column: 1 / -1; } } @media (max-width: 520px) { .lumo-reviews__summary { grid-template-columns: 1fr; } } /* ---------- Zapytaj o produkt (pod kartą produktu) ---------- */ .lumo-ask { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 58px; align-items: center; margin-top: 96px; padding: 56px; border-radius: 32px; background: var(--lumo-dark); color: rgba(255, 255, 255, .78); overflow: hidden; isolation: isolate; } @media (max-width: 1280px) { .lumo-ask { gap: 51px; margin-top: 90px; padding: 51px; } } @media (max-width: 1100px) { .lumo-ask { gap: 40px; margin-top: 70px; padding: 40px; } } @media (max-width: 600px) { .lumo-ask { gap: 24px; margin-top: 56px; padding: 24px; } } .lumo-ask__intro { position: static; } .lumo-ask .lumo-eyebrow { color: #fff; } .lumo-ask__title { font-size: 48px; color: #fff; margin: 0 0 14px; line-height: 1.05; } @media (max-width: 1280px) { .lumo-ask__title { font-size: 44px; } } @media (max-width: 1100px) { .lumo-ask__title { font-size: 34px; } } @media (max-width: 600px) { .lumo-ask__title { font-size: 30px; } } .lumo-ask__lead { max-width: 520px; font-size: 16.5px; } .lumo-ask__contact { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 26px 0 0; padding: 0; } .lumo-ask__contact a { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font-weight: 600; text-decoration: none; transition: background-color .25s, transform .3s var(--lumo-ease); } .lumo-ask__contact a:hover { background: rgba(255, 255, 255, .16); color: #fff; transform: translateY(-2px); } .lumo-ask__contact .lumo-icon { width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: var(--lumo-accent); color: var(--lumo-on-accent); } .lumo-ask__contact small { display: block; font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, .6); line-height: 1.2; } .lumo-ask__ring { position: absolute; z-index: -1; left: -120px; bottom: -200px; width: 300px; height: 300px; border-radius: 50%; border: 52px solid var(--lumo-accent); opacity: .9; } .lumo-ask .lumo-form.lumo-contact { margin: 0; max-width: none; color: var(--lumo-ink); } .lumo-ask .lumo-form.lumo-contact::before { display: none; } @media (max-width: 960px) { .lumo-ask { grid-template-columns: 1fr; border-radius: 24px; } .lumo-ask__ring { left: auto; right: -140px; top: -170px; bottom: auto; width: 240px; height: 240px; border-width: 40px; } } /* ---------- Tryb wyceny: koszyk, side cart, formularz zamiast zamówienia ---------- */ .lumo-quote-note { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 20px; padding: 16px 18px; border-radius: var(--lumo-radius); background: var(--lumo-accent-soft); color: var(--lumo-ink-2); font-size: 14.5px; line-height: 1.55; } .lumo-quote-note .lumo-icon { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: var(--lumo-accent); color: var(--lumo-on-accent); } .lumo-quote-note p { margin: 0; } .lumo-quote-note strong { color: var(--lumo-ink); } .lumo-quote-row th, .lumo-quote-row td { color: var(--lumo-accent-ink); font-weight: 600; } .lumo-sidecart .lumo-price-quote, .woocommerce-cart-form .lumo-price-quote, .lumo-qc .lumo-price-quote { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--lumo-accent-soft); color: var(--lumo-accent-ink); font-size: 12.5px; font-weight: 700; white-space: nowrap; } .lumo-qc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 8px; } @media (max-width: 1280px) { .lumo-qc { gap: 51px; } } @media (max-width: 1100px) { .lumo-qc { gap: 40px; } } @media (max-width: 600px) { .lumo-qc { gap: 24px; } } .lumo-qc__form { padding: 36px; border: 1px solid var(--lumo-line); border-radius: var(--lumo-radius-lg); background: #fff; box-shadow: var(--lumo-shadow); } @media (max-width: 1100px) { .lumo-qc__form { padding: 30px; } } @media (max-width: 600px) { .lumo-qc__form { padding: 20px; } } .lumo-qc__title { font-size: 28px; margin: 0 0 18px; } @media (max-width: 1100px) { .lumo-qc__title { font-size: 22px; } } .lumo-qc__title small { font-family: var(--lumo-font); font-size: 15px; font-weight: 500; color: var(--lumo-muted); } /* 1.19.0 (klient): „Twoje zapytanie” bez sticky; liczba pozycji wyśrodkowana w pionie względem nagłówka */ .lumo-qc__summary .lumo-qc__title { display: flex; align-items: center; gap: 8px; } .lumo-qc__summary .lumo-qc__title small { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; line-height: 1; color: var(--lumo-ink); } .lumo-qc__summary { position: static; align-self: start; padding: 32px; border-radius: var(--lumo-radius-lg); background: var(--lumo-bg-2); } @media (max-width: 1100px) { .lumo-qc__summary { padding: 30px; } } @media (max-width: 600px) { .lumo-qc__summary { padding: 20px; } } .lumo-qc__items { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; } .lumo-qc__item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border-radius: var(--lumo-radius); background: #fff; } .lumo-qc__thumb { border-radius: 12px; overflow: hidden; background: var(--lumo-card-bg); } .lumo-qc__thumb img { width: 64px; height: 64px; object-fit: contain; } .lumo-qc__name { margin: 0 0 4px; font-weight: 600; font-size: 14.5px; line-height: 1.35; } .lumo-qc__info dl.variation { margin: 0; font-size: 12.5px; color: var(--lumo-muted); display: grid; grid-template-columns: auto 1fr; gap: 0 6px; } .lumo-qc__info dl.variation dt, .lumo-qc__info dl.variation dd, .lumo-qc__info dl.variation p { margin: 0; } .lumo-qc__price { font-weight: 600; font-size: 14px; white-space: nowrap; } .lumo-qc__back { font-size: 14px; } .lumo-qc__steps { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--lumo-line); display: grid; gap: 10px; font-size: 14px; color: var(--lumo-ink-2); } .lumo-qc__steps li { display: flex; gap: 10px; align-items: center; } .lumo-qc__steps span { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lumo-ink); color: #fff; font-size: 12px; font-weight: 700; } @media (max-width: 960px) { .lumo-qc { grid-template-columns: 1fr; } .lumo-qc__summary { position: static; order: -1; } } /* 1.19.0: ceny „od” pozycji do wyceny (cena_od) + podsumowanie zapytania bez kwot */ .lumo-qc__price { display: grid; justify-items: end; gap: 6px; } .lumo-price-from--quote { white-space: nowrap; font-weight: 600; } .lumo-price-from--quote small { font-weight: 500; color: var(--lumo-muted); } .lumo-sidecart__price .lumo-price-from--quote { font-size: 14px; } .lumo-cart-total:empty { display: none; } .lumo-cart__side .lumo-quote-totals table.shop_table tr.lumo-quote-row { border-bottom: 1px solid rgba(255, 255, 255, .12); } .lumo-cart__side .lumo-quote-totals table.shop_table th, .lumo-cart__side .lumo-quote-totals table.shop_table td { align-self: center; } .lumo-cart__side .lumo-quote-totals table.shop_table td { margin-left: auto; text-align: right !important; white-space: nowrap; color: #fff !important; } .lumo-cart__side .lumo-quote-totals .lumo-quote-row th { color: var(--lumo-accent) !important; } .lumo-quote-totals__note { margin: 14px 0 18px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .7); } /* ---------- Side cart (1.12.0): kompaktowy pod laptopa, wszystko wyrównane w pionie ---------- */ .lumo-sidecart__panel { width: min(420px, 100vw); } .lumo-sidecart__head { min-height: 64px; padding: 10px 12px 10px 22px; } .lumo-sidecart__head h2 { font-size: 20px; line-height: 1; gap: 8px; } .lumo-sidecart__head .lumo-cart-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; line-height: 1; font-size: 12px; } .lumo-sidecart__items { padding: 0 22px; } .lumo-sidecart__item { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 0; } .lumo-sidecart__thumb, .lumo-sidecart__thumb a { display: block; line-height: 0; } .lumo-sidecart__thumb img { width: 64px; height: 64px; border-radius: 10px; } .lumo-sidecart__info { display: grid; gap: 6px; align-content: center; min-width: 0; } .lumo-sidecart__name { margin: 0; font-size: 14px; line-height: 1.3; } .lumo-sidecart__info dl.variation { margin: 0; font-size: 12px; } .lumo-sidecart__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; align-self: stretch; gap: 8px; } .lumo-sidecart__price { font-size: 14px; font-weight: 600; white-space: nowrap; } .lumo-sidecart__remove { width: 30px; height: 30px; margin: -4px -6px 0 0; align-self: flex-end; transition: background-color .2s, color .2s; } .lumo-qty.lumo-qty--sm { height: 34px; padding: 2px; justify-self: start; } .lumo-qty.lumo-qty--sm button { width: 28px; height: 28px; } .lumo-qty.lumo-qty--sm input { width: 30px; height: 28px; font-size: 14px; } .lumo-sidecart .lumo-qty-fixed { justify-self: start; } .lumo-sidecart__foot { gap: 8px; padding: 14px 22px 18px; } .lumo-sidecart__line { align-items: center; font-size: 14px; line-height: 1.3; } .lumo-sidecart__line--muted { color: var(--lumo-muted); font-size: 13px; } .lumo-sidecart__total { font-size: 16px; font-weight: 600; margin-bottom: 4px; } .lumo-sidecart__total strong { font-size: 18px; } .lumo-sidecart__foot .lumo-btn { min-height: 46px; padding-top: 0; padding-bottom: 0; font-size: 15px; } .lumo-sidecart__foot .lumo-btn--lg { min-height: 50px; } .lumo-sidecart__side { padding-right: 2px; } /* ---------- Karta produktu (1.12.0) ---------- */ /* Cena: lżejsza (klient: za grube), brutto czytelniejsze */ .lumo-product__summary > .price { font-size: 30px; font-weight: 500; letter-spacing: -.015em; padding: 14px 20px; } .lumo-product__summary > .price strong, .lumo-product__summary > .price b { font-weight: 500; } .lumo-product__summary > .price .lumo-price-from small { font-size: 14px; font-weight: 400; } @media (max-width: 1280px) { .lumo-product__summary > .price { font-size: 28px; } } @media (max-width: 1100px) { .lumo-product__summary > .price { font-size: 25px; } } /* 1.15.0 (klient: brutto „źle ostylowane”): netto w 1. wierszu z małą etykietą, brutto w 2. wierszu oddzielone linią, kwota brutto pogrubiona w kolorze tekstu, opis „brutto” mały. */ .lumo-product__summary .price { row-gap: 0; } .lumo-product__summary .price ins { color: var(--lumo-ink); } .lumo-product__summary .price .lumo-price-net { font-family: var(--lumo-font); font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--lumo-muted); } .lumo-product__summary .price .lumo-price-gross { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ddd3bf; font-family: var(--lumo-font); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--lumo-muted); } .lumo-product__summary .price .lumo-price-gross b { font-family: var(--lumo-font-display); font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--lumo-ink); } .lumo-product__summary .price .lumo-price-gross small { font-size: 13px; font-weight: 500; } @media (max-width: 600px) { .lumo-product__summary .price .lumo-price-gross b { font-size: 17px; } } /* Listy produktów: mały dopisek „netto” przy cenie */ li.product .price .lumo-price-net, .lumo-pslider .price .lumo-price-net { font-size: 12px; font-weight: 500; color: var(--lumo-muted); letter-spacing: .02em; } /* „Cena do wyceny” w listach i sliderach: żółta pigułka z ikoną zamiast szarego tekstu */ li.product .lumo-price-quote, .lumo-pslider .lumo-price-quote, .lumo-mega .lumo-price-quote { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--lumo-accent-soft); color: var(--lumo-accent-ink); font-family: var(--lumo-font); font-size: 13px; font-weight: 700; letter-spacing: .01em; } li.product .lumo-price-quote::before, .lumo-pslider .lumo-price-quote::before, .lumo-mega .lumo-price-quote::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lumo-accent); box-shadow: 0 0 0 3px rgba(253, 220, 92, .35); } .lumo-product__summary > .price .lumo-price-quote { font-size: 22px; font-weight: 600; color: var(--lumo-ink); } /* Zakładki: łagodne pojawienie się panelu */ .woocommerce-tabs .woocommerce-Tabs-panel { animation: lumo-tab-in .45s cubic-bezier(.22, .8, .25, 1); } @keyframes lumo-tab-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .lumo-clamp-toggle, .lumo-desc__toggle { transition: color .25s, background-color .25s, border-color .25s, box-shadow .25s; } /* „Rozwiń pełny opis”: cień mieści się w zwiniętym opisie (był ucinany dolną krawędzią) */ .lumo-desc.is-collapsed .lumo-desc__toggle { bottom: 30px; box-shadow: 0 6px 16px rgba(22, 21, 19, .12); } /* Oceny: kolory marki (zamiast pomarańczowego i beżu) */ .lumo-stars__fg, .lumo-reviews__bars svg { fill: #f6c94a; } .lumo-stars__bg { fill: #e4ded3; } .lumo-reviews__score strong.is-empty { color: var(--lumo-ink); opacity: .35; } .lumo-reviews__bar { background: #e9e4da; } /* ---------- Tabele WooCommerce (1.12.0, klient: „tabele tragicznie wyglądają”) ---------- Szczegóły zamówienia po zakupie, zamówienia i wyceny w Moim koncie, adresy, pobrania: karta z zaokrągleniem, nagłówek na beżu, wiersze z cienkimi liniami, suma wyróżniona. */ .woocommerce table.shop_table:not(.lumo-co-review__totals), .woocommerce-table, .woocommerce-orders-table, .woocommerce-MyAccount-downloads { width: 100%; margin: 0 0 32px; border: 1px solid var(--lumo-line) !important; border-radius: 20px !important; border-collapse: separate !important; border-spacing: 0; overflow: hidden; background: #fff; font-size: 15px; } .woocommerce table.shop_table:not(.lumo-co-review__totals) th, .woocommerce table.shop_table:not(.lumo-co-review__totals) td { padding: 16px 20px !important; border: 0 !important; border-top: 1px solid var(--lumo-line) !important; background: none; vertical-align: middle; line-height: 1.45; text-align: left; } .woocommerce table.shop_table:not(.lumo-co-review__totals) thead th { border-top: 0 !important; background: var(--lumo-bg-2); font-family: var(--lumo-font); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lumo-muted); } .woocommerce table.shop_table:not(.lumo-co-review__totals) tbody tr:first-child td, .woocommerce table.shop_table:not(.lumo-co-review__totals) tbody tr:first-child th { border-top-color: transparent !important; } .woocommerce table.shop_table:not(.lumo-co-review__totals) thead + tbody tr:first-child td { border-top-color: var(--lumo-line) !important; } .woocommerce table.shop_table:not(.lumo-co-review__totals) tbody tr { transition: background-color .2s; } .woocommerce table.shop_table:not(.lumo-co-review__totals) tbody tr:hover { background: #fcfbf8; } .woocommerce table.shop_table td.product-name a, .woocommerce-table--order-details td a { font-weight: 600; text-decoration: none; } .woocommerce table.shop_table td.product-name .wc-item-meta { margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--lumo-muted); } .woocommerce table.shop_table td.product-name .wc-item-meta p { display: inline; margin: 0; } .woocommerce table.shop_table td.product-total, .woocommerce table.shop_table tfoot td { text-align: right; font-weight: 600; white-space: nowrap; } .woocommerce table.shop_table tfoot th { font-weight: 500; color: var(--lumo-ink-2); } .woocommerce table.shop_table tfoot tr:last-child th, .woocommerce table.shop_table tfoot tr:last-child td { background: var(--lumo-bg-2); font-size: 17px; font-weight: 700; color: var(--lumo-ink); } .woocommerce table.shop_table .includes_tax, .woocommerce table.shop_table small { display: block; font-size: 12px; font-weight: 400; color: var(--lumo-muted); } /* Sumy w ciemnym podsumowaniu koszyka mają własny układ - bez karty tabeli */ .woocommerce .lumo-cart__side .cart_totals table.shop_table { margin: 0; border: 0 !important; border-radius: 0 !important; overflow: visible; background: none; } .woocommerce .lumo-cart__side .cart_totals table.shop_table th, .woocommerce .lumo-cart__side .cart_totals table.shop_table td { padding: 0 !important; border: 0 !important; background: none !important; font-size: 15px; } .woocommerce .lumo-cart__side .cart_totals table.shop_table tr:hover { background: none; } .woocommerce .lumo-cart__side .cart_totals table.shop_table tfoot tr:last-child th, .woocommerce .lumo-cart__side .cart_totals table.shop_table tfoot tr:last-child td { background: none; } .woocommerce-orders-table .woocommerce-orders-table__cell-order-number a { font-weight: 700; text-decoration: none; } .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions { text-align: right; } .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 16px; border-radius: 999px; background: var(--lumo-ink); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; transition: background-color .25s, transform .25s var(--lumo-ease); } .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button:hover { background: #000; transform: translateY(-1px); } .woocommerce-order-details__title, .woocommerce-column__title, .woocommerce-customer-details h2 { margin: 0 0 16px; font-size: 24px; } .woocommerce-customer-details address { padding: 20px 22px; border: 1px solid var(--lumo-line) !important; border-radius: 20px; font-style: normal; line-height: 1.7; } .woocommerce-customer-details .woocommerce-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .woocommerce-customer-details .woocommerce-column { width: auto !important; float: none !important; } @media (max-width: 780px) { .woocommerce-customer-details .woocommerce-columns { grid-template-columns: minmax(0, 1fr); } .woocommerce table.shop_table_responsive:not(.lumo-co-review__totals) thead { display: none; } .woocommerce table.shop_table_responsive:not(.lumo-co-review__totals) tbody tr { display: block; padding: 8px 0; border-top: 1px solid var(--lumo-line); } .woocommerce table.shop_table_responsive:not(.lumo-co-review__totals) tbody tr:first-child { border-top: 0; } .woocommerce table.shop_table_responsive:not(.lumo-co-review__totals) tbody td { display: flex; justify-content: space-between; gap: 12px; padding: 8px 18px !important; border: 0 !important; text-align: right !important; } .woocommerce table.shop_table_responsive:not(.lumo-co-review__totals) tbody td::before { content: attr(data-title); float: none; font-weight: 600; color: var(--lumo-muted); text-align: left; } .woocommerce table.shop_table:not(.lumo-co-review__totals) th, .woocommerce table.shop_table:not(.lumo-co-review__totals) td { padding: 12px 16px !important; } } /* Warianty (1.12.0): kompaktowe przyciski, kolory blatów jako zdjęcia wzorów */ .lumo-product__summary table.variations tr { padding-bottom: 14px; } .lumo-product__summary table.variations th.label { margin-bottom: 8px; } .lumo-varpills { gap: 6px; } .lumo-varpill { min-height: 38px; padding: 6px 13px; border-radius: 10px; font-size: 14px; transition: border-color .2s, background-color .2s, box-shadow .2s, transform .2s var(--lumo-ease); } .lumo-varpill[aria-pressed="true"]::before { width: 14px; height: 14px; } .lumo-varpills--img { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; } .lumo-varpill.lumo-varpill--img { position: relative; display: grid; grid-template-rows: auto auto; gap: 5px; min-height: 0; padding: 4px 4px 6px; border-radius: 12px; text-align: center; font-size: 12px; font-weight: 500; line-height: 1.2; } .lumo-varpill.lumo-varpill--img::before { display: none; } .lumo-varpill__img { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--lumo-bg-2); box-shadow: inset 0 0 0 1px rgba(22, 21, 19, .08); } .lumo-varpill__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--lumo-ease); } .lumo-varpill--img:hover .lumo-varpill__img img { transform: scale(1.06); } .lumo-varpill__txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; padding: 0 2px; font-size: 11.5px; } .lumo-varpill--img[aria-pressed="true"] { background: #fff; border-color: var(--lumo-ink); box-shadow: 0 0 0 1px var(--lumo-ink); font-weight: 600; } .lumo-varpill--img[aria-pressed="true"] .lumo-varpill__img::after { content: ""; position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--lumo-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161513' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: 0 2px 6px rgba(22, 21, 19, .2); } .lumo-varpill--img.is-off { text-decoration: none; } .lumo-varpill__zoom { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--lumo-ink); opacity: 0; transition: opacity .2s; } .lumo-varpill--img:hover .lumo-varpill__zoom, .lumo-varpill--img:focus-visible .lumo-varpill__zoom { opacity: 1; } @media (hover: none) { .lumo-varpill__zoom { opacity: 1; } } @media (max-width: 600px) { .lumo-varpills--img { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); } } /* Slider podobnych / polecanych produktów (main.js „Slider produktów”) */ .lumo-pslider__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; } .lumo-pslider__titles .lumo-eyebrow { margin: 0 0 10px; } .lumo-pslider__head h2 { margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 40px !important; font-weight: 600; line-height: 1.08; letter-spacing: -.025em; } .lumo-pslider__head h2::before, .lumo-pslider__head h2::after { display: none !important; } @media (max-width: 1280px) { .lumo-pslider__head h2 { font-size: 36px !important; } } @media (max-width: 1100px) { .lumo-pslider__head h2 { font-size: 30px !important; } } @media (max-width: 600px) { .lumo-pslider__head { margin-bottom: 18px; } .lumo-pslider__head h2 { font-size: 26px !important; } } .lumo-pslider__dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .lumo-pslider__dots[hidden] { display: none; } .lumo-pslider__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #d9d2c4; cursor: pointer; transition: width .3s var(--lumo-ease), background-color .25s; } .lumo-pslider__dots button:hover { background: var(--lumo-ink-2); } .lumo-pslider__dots button.is-active { width: 26px; background: var(--lumo-ink); } .lumo-pslider__nav { display: flex; gap: 8px; } .lumo-pslider__nav[hidden] { display: none; } .lumo-pslider__btn { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1.5px solid var(--lumo-line); border-radius: 50%; background: #fff; color: var(--lumo-ink); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--lumo-ease); } .lumo-pslider__btn:hover:not(:disabled) { background: var(--lumo-ink); border-color: var(--lumo-ink); color: #fff; transform: translateY(-2px); } .lumo-pslider__btn:disabled { opacity: .35; cursor: default; } .woocommerce .lumo-pslider ul.products { display: grid !important; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 20px) / 5); gap: 20px !important; margin: 0 -8px !important; padding: 8px 8px 18px !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 8px; scrollbar-width: none; cursor: grab; } .woocommerce .lumo-pslider ul.products::-webkit-scrollbar { display: none; } .woocommerce .lumo-pslider ul.products.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } .woocommerce .lumo-pslider ul.products.is-dragging a { pointer-events: none; } .woocommerce .lumo-pslider ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; scroll-snap-align: start; } .woocommerce .lumo-pslider ul.products li.product img { -webkit-user-drag: none; } @media (max-width: 1280px) { .woocommerce .lumo-pslider ul.products { grid-auto-columns: calc((100% - 3 * 20px) / 4); } } @media (max-width: 1100px) { .woocommerce .lumo-pslider ul.products { grid-auto-columns: calc((100% - 2 * 20px) / 3); gap: 20px !important; } } @media (max-width: 780px) { .woocommerce .lumo-pslider ul.products { grid-auto-columns: 44%; gap: 14px !important; } } @media (max-width: 600px) { .woocommerce .lumo-pslider ul.products { grid-auto-columns: 78%; gap: 12px !important; } .lumo-pslider__btn { width: 40px; height: 40px; } } /* ========================================================================= Tkaniny jako produkty (1.13.0, inc/fabrics.php): parametry w krótkim opisie, wybór koloru = próbnik do koszyka ========================================================================= */ .lumo-fabric-params { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; } .lumo-fabric-params li { display: grid; gap: 2px; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--lumo-bg-2); } .lumo-fabric-params span { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--lumo-muted); } .lumo-fabric-params strong { font-size: 14.5px; font-weight: 600; color: var(--lumo-ink); } .lumo-fabric-pick { margin: 22px 0 8px; padding: 22px; border: 1px solid var(--lumo-line); border-radius: 20px; background: #fff; scroll-margin-top: 140px; } .lumo-fabric-pick__head { margin-bottom: 16px; } .lumo-fabric-pick__title { margin: 0 0 4px; font-family: var(--lumo-font-display); font-size: 20px; font-weight: 600; color: var(--lumo-ink); } .lumo-fabric-pick__title small { margin-left: 6px; font-family: "Inter", system-ui, sans-serif; font-size: 13px; font-weight: 500; color: var(--lumo-muted); } .lumo-fabric-pick__lead { margin: 0; font-size: 14px; line-height: 1.55; color: var(--lumo-muted); } .lumo-fabric-pick .lumo-samples-link { margin-top: 16px; } /* 1.20.0: próbnik całego kompletu na karcie tkaniny */ .lumo-fabric-set { display: grid; gap: 14px; margin: 0 0 22px; padding: 0 0 20px; border-bottom: 1px solid var(--lumo-line); } .lumo-fabric-set__title { margin: 0 0 4px; font-family: var(--lumo-font-display); font-size: 20px; font-weight: 600; color: var(--lumo-ink); } .lumo-fabric-set__lead { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--lumo-ink-2); } .lumo-fabric-set__lead span { color: var(--lumo-muted); } .lumo-fabric-set__btn.lumo-btn { width: 100%; min-height: 54px; border-color: var(--lumo-accent); background: var(--lumo-accent); font-size: 16px; color: var(--lumo-on-accent); } .lumo-fabric-set__btn svg { width: 18px; height: 18px; } .lumo-price-fabric small:first-child { margin-right: 4px; } @media (max-width: 600px) { .lumo-fabric-params { grid-template-columns: minmax(0, 1fr); } .lumo-fabric-pick { padding: 16px; border-radius: 16px; } } /* 1.18.0 (klient: „wybór kolorów usprawnić”): równe kafle, krótki podpis w 1 linii, próbnik = okrągłe „+” w rogu kafla (w koszyku: zielony ptaszek), klik w kafel = zdjęcie koloru w galerii (zaznaczony kafel ma ciemną ramkę). */ .lumo-fabric-pick .lumo-swatches__grid, .lumo-product__summary .lumo-fabric-pick .lumo-swatches__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 12px; margin-bottom: 4px; } .lumo-fabric-pick .lumo-swatch { gap: 6px; } .lumo-fabric-pick .lumo-swatch__img { width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; border: 2px solid #ebe1c8; border-radius: 12px; cursor: pointer; transition: border-color .2s, box-shadow .2s; } .lumo-fabric-pick .lumo-swatch__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } .lumo-fabric-pick .lumo-swatch__img:hover { border-color: #d8c9a4; } .lumo-fabric-pick .lumo-swatch.is-picked .lumo-swatch__img { border-color: var(--lumo-ink); box-shadow: 0 0 0 2px #fff inset; } .lumo-fabric-pick .lumo-swatch__name { overflow: hidden; font-size: 13px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; color: var(--lumo-ink); } .lumo-fabric-pick .lumo-swatch__sample { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 30px; height: 30px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--lumo-ink); box-shadow: 0 2px 8px rgba(22, 21, 19, .22); transition: background-color .2s, color .2s, transform .2s; } .lumo-fabric-pick .lumo-swatch__sample span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .lumo-fabric-pick .lumo-swatch__sample svg { width: 16px; height: 16px; } .lumo-fabric-pick .lumo-swatch__sample:hover { background: var(--lumo-accent); transform: scale(1.08); } .lumo-fabric-pick .lumo-swatch__sample.is-added { background: var(--lumo-ok); color: #fff; } .lumo-fabric-pick .lumo-swatch__sample.is-added svg { display: none; } .lumo-fabric-pick .lumo-swatch__sample.is-added::before { content: ""; width: 12px; height: 7px; margin-top: -3px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); } .lumo-fabric-pick .lumo-swatch__sample.is-added:hover { background: var(--lumo-danger); } .lumo-fabric-pick .lumo-swatch__sample.is-added:hover::before { width: 12px; height: 2px; margin: 0; border: 0; background: currentColor; transform: none; } .lumo-fabric-pick .lumo-swatches__sub { margin-top: 10px; } @media (max-width: 1280px) { .lumo-product__summary .lumo-fabric-pick .lumo-swatches__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ========================================================================== 1.14.0 (31.10, poprawki klienta) ========================================================================== */ /* Zdjęcia produktów: białe tło bez mix-blend-mode (klient: „paskudna rampa”, mieszanie nie działało na każdym zdjęciu). Galeria bez paddingu w %, lista produktów z ramką (passe-partout), która na hover robi się żółta. */ .lumo-pg__stage, .lumo-pg__thumb, .lumo-cart__thumb a, .lumo-cart__thumb img, .lumo-qc__thumb, .lumo-shophero__tile { background: #fff; } /* 1.15.0 (klient: „brakuje wyraźnego bordera, ucina go”): prawdziwa ramka zamiast cienia inset (zdjęcie go zakrywało). Miniatury: 6 w rzędzie (telefon 5), kolejne po przewinięciu. */ .lumo-pg__stage { border: 2px solid #ebe1c8; box-shadow: none; } .lumo-pg__thumbs { gap: 10px; padding: 0; scrollbar-width: none; } .lumo-pg__thumbs::-webkit-scrollbar { display: none; } .lumo-pg__thumb { width: calc((100% - 50px) / 6); border: 2px solid #ebe1c8; border-radius: 14px; box-shadow: none; } .lumo-pg__thumb img { padding: 4px; } .lumo-pg__thumb:hover { box-shadow: none; border-color: #d8c9a4; } .lumo-pg__thumb[aria-current="true"] { box-shadow: none; border-color: var(--lumo-ink); } @media (max-width: 600px) { .lumo-pg__stage { border-radius: 20px; } .lumo-pg__thumbs { gap: 8px; } .lumo-pg__thumb { width: calc((100% - 32px) / 5); border-radius: 12px; } } /* 1.18.0: miniatury bez podskoku (przewijany rząd ucinał górną ramkę i zaokrąglenia), strzałki przy pełnym rzędzie. */ .lumo-pg__thumb:hover, .lumo-pg__thumb:hover img { transform: none; } .lumo-pg__thumbbar { position: relative; margin-top: 12px; } .lumo-pg__thumbbar .lumo-pg__thumbs { margin-top: 0; } .lumo-pg__tnav { position: absolute; z-index: 2; top: 50%; display: none; place-items: center; width: 36px; height: 36px; margin-top: -18px; padding: 0; border: 2px solid #ebe1c8; border-radius: 50%; background: #fff; color: var(--lumo-ink); box-shadow: 0 4px 14px rgba(22, 21, 19, .12); cursor: pointer; transition: background-color .2s, border-color .2s, opacity .2s; } .lumo-pg__tnav:hover { background: var(--lumo-accent); border-color: var(--lumo-accent); } .lumo-pg__tnav.is-prev { left: -12px; } .lumo-pg__tnav.is-prev svg { transform: rotate(90deg); } .lumo-pg__tnav.is-next { right: -12px; } .lumo-pg__tnav.is-next svg { transform: rotate(-90deg); } .lumo-pg__thumbbar.is-scrollable .lumo-pg__tnav { display: grid; } .lumo-pg__thumbbar.is-start .lumo-pg__tnav.is-prev, .lumo-pg__thumbbar.is-end .lumo-pg__tnav.is-next { opacity: 0; pointer-events: none; } @media (max-width: 600px) { .lumo-pg__tnav { width: 32px; height: 32px; margin-top: -16px; } .lumo-pg__tnav.is-prev { left: -6px; } .lumo-pg__tnav.is-next { right: -6px; } } /* Tkaniny: zdjęcie = sama tkanina, wypełnia ramkę razem z zaokrągleniem (bez białego paska wokół). */ .lumo-pg--full .lumo-pg__slide img { object-fit: cover; } .lumo-pg--full .lumo-pg__thumb img { padding: 0; object-fit: cover; } /* 1.15.0 (klient): jedna wyraźna ramka w ciepłym kolorze marki (bez drugiej ramki ::after), zdjęcie bez paddingu */ .lumo-card__media { background: #fff; border: 2px solid #ebe1c8; isolation: auto; transition: border-color .35s var(--lumo-ease); } .lumo-card__media::before { display: none; } li.product:hover .lumo-card__media { border-color: var(--lumo-accent); } .lumo-card__badges, .lumo-fav { z-index: 2; } /* Podkategorie w nagłówku kategorii na telefonie: jedna pod drugą, cała szerokość (klient) */ @media (max-width: 600px) { .lumo-shophero .lumo-subcats { flex-direction: column; flex-wrap: nowrap; gap: 8px; } .lumo-shophero .lumo-subcats li, .lumo-shophero .lumo-subcats a { width: 100%; } .lumo-shophero .lumo-subcats a { justify-content: space-between; white-space: normal; padding: 11px 14px; border-radius: 14px; } .lumo-shophero .lumo-subcats small { margin-left: auto; } } /* Side cart: cena wyśrodkowana w pionie (kosz w rogu), netto i brutto tej samej wielkości */ .lumo-sidecart__item { position: relative; } .lumo-sidecart__side { justify-content: center; align-self: center; padding: 18px 2px 0 0; } .lumo-sidecart__remove { position: absolute; top: 6px; right: -6px; margin: 0; } .lumo-sidecart__price { font-size: 15px; line-height: 1.3; } .lumo-sidecart__line--muted, .lumo-sidecart__total { font-size: 16px; font-weight: 600; color: var(--lumo-ink); margin-bottom: 0; } .lumo-sidecart__line--muted span:first-child, .lumo-sidecart__total span:first-child { font-weight: 500; color: var(--lumo-ink-2); } .lumo-sidecart__total strong { font-size: 16px; font-weight: 700; } /* ---------- Odstąpienie od umowy (1.14.0) - inc/withdrawal.php ---------- */ .lumo-wd { display: grid; gap: 18px; margin-top: 28px; } .lumo-wd__steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 !important; padding: 0 !important; counter-reset: none; } .lumo-prose .lumo-wd__steps li, .lumo-wd__steps li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px 6px 6px !important; border-radius: 999px; background: var(--lumo-bg-2); font-size: 14px; font-weight: 600; color: var(--lumo-muted); } .lumo-prose .lumo-wd__steps li::before { display: none; } .lumo-wd__steps span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; font-size: 12.5px; } .lumo-wd .lumo-wd__steps .is-1, .lumo-wd.is-step2 .lumo-wd__steps .is-2, .lumo-wd.is-done .lumo-wd__steps li { color: var(--lumo-ink); } .lumo-wd .lumo-wd__steps .is-1 span, .lumo-wd.is-step2 .lumo-wd__steps .is-2 span, .lumo-wd.is-done .lumo-wd__steps span { background: var(--lumo-accent); } .lumo-wd__card { display: grid; gap: 16px; padding: 30px; border: 1px solid var(--lumo-line); border-radius: 24px; background: #fff; } .lumo-wd__card[hidden] { display: none; } .lumo-wd__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .lumo-prose .lumo-wd__title, .lumo-wd__title { margin: 0; padding: 0; border: 0; font-size: 23px; } .lumo-prose .lumo-wd__title::after { display: none; } .lumo-wd__lead, .lumo-wd__order { margin: -6px 0 0 !important; font-size: 14.5px; color: var(--lumo-muted); } .lumo-wd__order { font-weight: 600; color: var(--lumo-ink); } .lumo-wd .lumo-btn { justify-self: start; } .lumo-wd .lumo-field input, .lumo-wd .lumo-field textarea { width: 100%; } .lumo-prose ul.lumo-wd__items, .lumo-wd__items { list-style: none; display: grid; gap: 8px; margin: 0 !important; padding: 0 !important; } .lumo-prose ul.lumo-wd__items > li, .lumo-wd__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 !important; padding: 12px 14px !important; border: 1px solid var(--lumo-line); border-radius: 16px; background: var(--lumo-bg-2); } .lumo-prose ul.lumo-wd__items > li::before { display: none; } .lumo-wd__item:has(input:checked) { border-color: var(--lumo-ink); background: #fff; } .lumo-wd__pick { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; min-width: 0; cursor: pointer; } .lumo-wd__thumb { flex: none; width: 52px; height: 52px; border-radius: 10px; background: #fff center / contain no-repeat; box-shadow: inset 0 0 0 1px var(--lumo-line); } .lumo-wd__name { font-size: 15px; font-weight: 600; line-height: 1.35; } .lumo-wd__qty { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--lumo-muted); } .lumo-wd__qty[hidden] { display: none; } .lumo-wd__qty input { width: 72px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--lumo-line); border-radius: 10px; font: inherit; } .lumo-wd__done { justify-items: center; text-align: center; padding-block: 40px; } .lumo-wd__ok { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--lumo-accent); color: var(--lumo-on-accent); } .lumo-wd__done p { max-width: 560px; margin: 0 !important; } @media (max-width: 600px) { .lumo-wd__card { padding: 20px 16px; border-radius: 18px; } .lumo-wd__title { font-size: 20px; } .lumo-wd .lumo-btn { justify-self: stretch; } } /* Opis kategorii: bez kreski nad nagłówkami (klient: „border dziwny, nie cała szerokość”) - sam odstęp i żółta kropka przy H2 */ .lumo-catseo__body h2 { margin-top: 44px; padding-top: 0; padding-left: 26px; border-top: 0; } .lumo-catseo__body h2::before { left: 0; top: .45em; width: 14px; height: 14px; border: 4px solid var(--lumo-accent); border-radius: 50%; background: transparent; } .lumo-catseo__body > h2:first-child { padding-left: 26px; } .lumo-catseo__body > h2:first-child::before { display: block; } /* 1.18.0: podsumowanie z CTA na końcu opisu kategorii (po FAQ) - ciemna karta jak sekcja konfiguratora, żółty przycisk */ .lumo-catseo__body .lumo-catcta { margin: 48px 0 0; padding: 36px 40px; border-radius: 24px; background: var(--lumo-ink); color: rgba(255, 255, 255, .82); } .lumo-catseo__body .lumo-catcta h2 { margin: 0 0 12px; padding: 0; color: #fff; font-size: 30px; } .lumo-catseo__body .lumo-catcta h2::before { display: none; } .lumo-catseo__body .lumo-catcta p { margin: 0 0 20px; max-width: 760px; color: inherit; } .lumo-catseo__body .lumo-catcta .lumo-catcta__btn { margin: 0; } .lumo-catseo__body .lumo-catcta .lumo-btn { text-decoration: none; } @media (max-width: 1100px) { .lumo-catseo__body .lumo-catcta { padding: 28px 26px; } .lumo-catseo__body .lumo-catcta h2 { font-size: 23px; } } @media (max-width: 600px) { .lumo-catseo__body .lumo-catcta { margin-top: 36px; padding: 24px 18px; border-radius: 18px; } .lumo-catseo__body .lumo-catcta h2 { font-size: 21px; } .lumo-catseo__body .lumo-catcta .lumo-btn { width: 100%; justify-content: center; } } /* Koszyk: bez wiersza „Przesyłka” (koszt liczy się w zamówieniu) */ .woocommerce-cart .cart_totals .woocommerce-shipping-totals, .woocommerce-cart .cart_totals .shipping { display: none; } /* Zamówienie: znacznik ilości nie ucięty, lista przewijana z marginesem */ .lumo-co-review__items { padding: 8px 8px 2px 0; } .lumo-co-review__qty { top: -7px; right: -7px; box-shadow: 0 0 0 2px var(--lumo-bg-2); } .lumo-co-review__thumb { box-shadow: inset 0 0 0 1px var(--lumo-line); } /* Lista select2 (kraj, województwo) w stylu motywu */ .select2-dropdown { border: 1px solid var(--lumo-line) !important; border-radius: 14px !important; box-shadow: 0 18px 40px rgba(22, 21, 19, .12); overflow: hidden; font-family: inherit; } .select2-container--open .select2-dropdown--below { margin-top: 6px; } .select2-container--open .select2-dropdown--above { margin-top: -6px; } .select2-search--dropdown { padding: 10px; } .select2-container--default .select2-search--dropdown .select2-search__field { min-height: 42px; padding: 8px 12px; border: 1px solid var(--lumo-line); border-radius: 10px; background: var(--lumo-bg-2); font: inherit; font-size: 15px; outline: 0; } .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--lumo-ink); background: #fff; } .select2-results__options { padding: 4px 6px 6px; } .select2-container--default .select2-results > .select2-results__options { max-height: 280px; } .select2-container--default .select2-results__option { margin: 1px 0; padding: 9px 12px; border-radius: 10px; font-size: 15px; color: var(--lumo-ink); } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--lumo-bg-2); color: var(--lumo-ink); } .select2-container--default .select2-results__option[aria-selected="true"], .select2-container--default .select2-results__option[data-selected="true"] { background: var(--lumo-accent); color: var(--lumo-on-accent); font-weight: 600; } /* Checkboxy (regulamin, faktura, zgody w formularzach): własny kwadrat z żółtym „ptaszkiem” */ .lumo-co input[type="checkbox"], .lumo-check input[type="checkbox"], .woocommerce-form__input-checkbox, .lumo-wd input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 0; border: 1.5px solid #cfc8bb; border-radius: 7px; background: #fff; cursor: pointer; transition: background-color .2s, border-color .2s, box-shadow .2s; } .lumo-co input[type="checkbox"]::after, .lumo-check input[type="checkbox"]::after, .woocommerce-form__input-checkbox::after, .lumo-wd input[type="checkbox"]::after { content: ""; width: 6px; height: 11px; margin-top: -3px; border: solid var(--lumo-accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .2s var(--lumo-ease); } .lumo-co input[type="checkbox"]:checked, .lumo-check input[type="checkbox"]:checked, .woocommerce-form__input-checkbox:checked, .lumo-wd input[type="checkbox"]:checked { border-color: var(--lumo-ink); background: var(--lumo-ink); } .lumo-co input[type="checkbox"]:checked::after, .lumo-check input[type="checkbox"]:checked::after, .woocommerce-form__input-checkbox:checked::after, .lumo-wd input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); } .lumo-co input[type="checkbox"]:hover, .lumo-check input[type="checkbox"]:hover, .woocommerce-form__input-checkbox:hover, .lumo-wd input[type="checkbox"]:hover { border-color: var(--lumo-ink); } .lumo-co input[type="checkbox"]:focus-visible, .lumo-check input[type="checkbox"]:focus-visible, .woocommerce-form__input-checkbox:focus-visible, .lumo-wd input[type="checkbox"]:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(253, 220, 92, .6); } .lumo-check input[type="checkbox"] { margin-top: 0; } .lumo-co .woocommerce-terms-and-conditions-wrapper label.checkbox { align-items: center; gap: 12px; line-height: 1.45; } .lumo-co .woocommerce-terms-and-conditions-wrapper label.checkbox a, .lumo-check a { color: var(--lumo-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lumo-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; } .lumo-co .woocommerce-terms-and-conditions-wrapper .required { color: var(--lumo-danger); text-decoration: none; } .lumo-co .woocommerce-privacy-policy-text p { margin: 0 0 14px; font-size: 13px; line-height: 1.55; } /* 1.16.0 (klient): zdjęcia na białym tle (1. i 2. zdjęcie w listach) = contain + oddech 15 px; zdjęcia pełne (tkaniny) = cover. Jedna ramka: tylko .lumo-card__media (border), zdjęcia bez ramek i cieni. */ .lumo-card__media img, .lumo-card__alt { box-sizing: border-box; padding: 15px; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; } .lumo-card__media--full img, .lumo-card__media--full .lumo-card__alt { padding: 0; object-fit: cover; } li.product:hover .lumo-card__media--full img { transform: scale(1.04); } /* Karta bez własnej ramki i cienia (dawało drugą ramkę 10 px od ramki zdjęcia) - ramka tylko na zdjęciu, hover = żółta ramka zdjęcia. */ .woocommerce ul.products li.product { padding: 0 0 6px; border-color: transparent; border-radius: 0; background: transparent; } .woocommerce ul.products li.product:hover { box-shadow: none; transform: translateY(-4px); } /* Strona główna: 5 produktów w rzędzie (bestsellery, 2 rzędy) */ .woocommerce.lumo-rail ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 20px; } @media (max-width: 1280px) { .woocommerce.lumo-rail ul.products.columns-5 { gap: 28px 16px; } } /* 1.19.0: grupa tkanin bez kolorów (np. Boucle) - informacja zamiast pustej siatki */ .lumo-group-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 4px 0 8px; padding: 22px 24px; border: 1px dashed var(--lumo-line-2, #e3dccd); border-radius: 18px; background: var(--lumo-bg-2); } .lumo-group-empty > .lumo-icon { flex: none; width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--lumo-accent); color: var(--lumo-on-accent); } .lumo-group-empty p { flex: 1 1 260px; margin: 0 !important; font-size: 14.5px; line-height: 1.55; color: var(--lumo-ink-2); } /* 1.19.0: cennik dostawy nad treścią strony „Koszta dostawy” (inc/shipping.php) */ .lumo-shipcards { margin: 0 0 40px; } .lumo-shipcards h2 { margin: 0 0 16px; } .lumo-shipcards ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .lumo-shipcards li { display: grid; align-content: start; gap: 6px; margin: 0 !important; padding: 20px !important; border: 1px solid var(--lumo-line); border-radius: 18px; background: #fff; } .lumo-shipcards li::before { content: none !important; } .lumo-shipcards__ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 50%; background: var(--lumo-accent-soft); color: var(--lumo-ink); } .lumo-shipcards strong { font-family: var(--lumo-font-display); font-size: 16px; line-height: 1.3; color: var(--lumo-ink); } .lumo-shipcards b { font-size: 22px; font-weight: 600; color: var(--lumo-ink); } .lumo-shipcards p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--lumo-muted); } .lumo-shipcards .lumo-shipcards__note { margin-top: 12px; font-size: 13.5px; } /* Zakładka „Dostawa i płatność” na karcie produktu: 2 karty DPD/Raben (1.23.2). */ .lumo-prose ul.lumo-shipcards--tab { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 720px; } .lumo-shipcards--tab li { display: grid; align-content: start; gap: 4px; margin: 0 !important; padding: 18px 20px !important; border: 1px solid var(--lumo-line); border-radius: 18px; background: #fff; } .lumo-shipcards--tab li::before { content: none !important; } .lumo-shipcards--tab .lumo-shipcards__ico { width: 40px; height: 40px; margin-bottom: 6px; } .lumo-shipcards--tab strong { font-family: var(--lumo-font-display); font-size: 16px; line-height: 1.3; color: var(--lumo-ink); } .lumo-shipcards--tab b { font-size: 20px; font-weight: 600; color: var(--lumo-ink); } .lumo-prose .lumo-shipcards--tab p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--lumo-muted); } @media (max-width: 600px) { .lumo-prose ul.lumo-shipcards--tab { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1100px) { .lumo-shipcards ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .lumo-shipcards ul { grid-template-columns: minmax(0, 1fr); } } /* 1.19.0: produkty na zamówienie - bez prawa odstąpienia (karta produktu, zamówienie, wycena, formularz zwrotu) */ .lumo-custom-note { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; padding: 12px 14px; border-radius: 14px; background: var(--lumo-bg-2); color: var(--lumo-ink-2); font-size: 13.5px; line-height: 1.5; } .lumo-custom-note .lumo-icon { flex: none; margin-top: 1px; color: var(--lumo-accent-ink); } .lumo-wd__item.is-custom { opacity: .75; } .lumo-wd__item.is-custom .lumo-wd__pick { cursor: not-allowed; } .lumo-wd__custom { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--lumo-muted); } /* 1.25.0 (klient 02.11): karta produktu 50/50, galeria przyklejona w stałym miejscu (nie jedzie z chowanym menu), zakładki pod spodem na pełną szerokość. Tabele w opisie i specyfikacja jako karty, opinie w 2 kolumnach. */ .lumo-product__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } @media (min-width: 961px) { .lumo-product__left { position: sticky; top: calc(var(--lumo-stick) + 20px); } } .lumo-product__tabs { margin-top: 72px; } @media (max-width: 1100px) { .lumo-product__tabs { margin-top: 48px; } } @media (max-width: 600px) { .lumo-product__tabs { margin-top: 32px; } } .woocommerce-tabs ul.tabs li a:focus { outline: none; } .woocommerce-tabs ul.tabs li a:focus-visible { outline: 2px solid var(--lumo-ink); outline-offset: -2px; } /* 1.25.1 (klient): opis i specyfikacja na pełną szerokość (bez max 1100 px). */ .woocommerce-Tabs-panel--description table, .woocommerce-product-attributes { display: table; width: 100%; margin: 0 0 1.6em; border: 1px solid var(--lumo-line); border-radius: 18px; border-collapse: separate; border-spacing: 0; overflow: hidden; background: #fff; font-size: 15px; line-height: 1.5; } .woocommerce-Tabs-panel--description table th, .woocommerce-Tabs-panel--description table td, .woocommerce-product-attributes th, .woocommerce-product-attributes td { padding: 14px 22px; border: 0; border-bottom: 1px solid var(--lumo-line); text-align: left; vertical-align: top; background: none; color: var(--lumo-ink-2); } .woocommerce-Tabs-panel--description table tr:last-child > *, .woocommerce-product-attributes tr:last-child > * { border-bottom: 0; } .woocommerce-Tabs-panel--description table tr:nth-child(even) > *, .woocommerce-product-attributes tr:nth-child(even) > * { background: #faf8f4; } .woocommerce-Tabs-panel--description table tr > :first-child:not(:only-child), .woocommerce-product-attributes th { width: 34%; font-weight: 600; color: var(--lumo-ink); } .woocommerce-Tabs-panel--description table ul, .woocommerce-Tabs-panel--description table ol { list-style: none; margin: 0; padding: 0; } .woocommerce-Tabs-panel--description table li { margin: 0; padding: 0; } .woocommerce-Tabs-panel--description table li + li { margin-top: 4px; } .woocommerce-Tabs-panel--description table p, .woocommerce-product-attributes td p { margin: 0; } .woocommerce-product-attributes a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--lumo-accent); transition: border-color .2s, color .2s; } .woocommerce-product-attributes a:hover { color: var(--lumo-ink); border-bottom-color: var(--lumo-ink); } @media (max-width: 600px) { .woocommerce-Tabs-panel--description table th, .woocommerce-Tabs-panel--description table td, .woocommerce-product-attributes th, .woocommerce-product-attributes td { padding: 12px 14px; font-size: 14px; } } .lumo-reviews__score strong.is-empty { color: var(--lumo-ink); opacity: 1; } @media (min-width: 1101px) { .lumo-reviews { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; align-items: start; } .lumo-reviews > .lumo-reviews__summary { grid-column: 1; } .lumo-reviews > .lumo-reviews__list { grid-column: 1; } .lumo-reviews > .lumo-reviews__formwrap { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; } .lumo-reviews > :not(.lumo-reviews__summary):not(.lumo-reviews__list):not(.lumo-reviews__formwrap) { grid-column: 1 / -1; } } /* 1.25.1 (klient 02.11): zakładki karty produktu na całą szerokość - równe pola z ikoną w kółku (szablon woocommerce/single-product/tabs/tabs.php), aktywna czarna z żółtą ikoną. Telefon/tablet ≤768: lista pod sobą, 100%. */ .woocommerce-tabs.lumo-tabs ul.lumo-tabs__list { display: grid; grid-template-columns: repeat(var(--lumo-tabs-n, 4), minmax(0, 1fr)); gap: 6px; margin: 0 0 36px; padding: 6px; border-radius: 22px; overflow: visible; } .woocommerce-tabs.lumo-tabs ul.lumo-tabs__list::before, .woocommerce-tabs.lumo-tabs ul.lumo-tabs__list::after, .woocommerce-tabs.lumo-tabs ul.lumo-tabs__list li::before, .woocommerce-tabs.lumo-tabs ul.lumo-tabs__list li::after { content: none !important; display: none !important; } .woocommerce-tabs.lumo-tabs ul.lumo-tabs__list li { min-width: 0; } .woocommerce-tabs.lumo-tabs ul.lumo-tabs__list li a { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 60px; padding: 8px 18px; border-radius: 17px; font-size: 15.5px; font-weight: 600; color: var(--lumo-ink-2); white-space: nowrap; transition: color .25s, background-color .25s, box-shadow .25s; } .lumo-tabs__label { overflow: hidden; text-overflow: ellipsis; } .lumo-tabs__ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--lumo-ink); transition: background-color .25s, color .25s, transform .35s var(--lumo-ease); } .lumo-tabs__badge { flex: none; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; background: #fff; color: var(--lumo-ink); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color .25s, color .25s; } .lumo-tabs__arrow { display: none; } .woocommerce-tabs.lumo-tabs ul.lumo-tabs__list li a:hover { color: var(--lumo-ink); background: #fff; box-shadow: 0 6px 18px rgba(22, 21, 19, .06); } .woocommerce-tabs.lumo-tabs ul.lumo-tabs__list li a:hover .lumo-tabs__ico { background: var(--lumo-accent); color: var(--lumo-on-accent); transform: rotate(-8deg) scale(1.06); } .woocommerce-tabs.lumo-tabs ul.lumo-tabs__list li.active a { color: #fff; background: var(--lumo-ink); box-shadow: 0 10px 24px rgba(22, 21, 19, .18); } .woocommerce-tabs.lumo-tabs ul.lumo-tabs__list li.active .lumo-tabs__ico { background: var(--lumo-accent); color: var(--lumo-on-accent); transform: none; } .woocommerce-tabs.lumo-tabs ul.lumo-tabs__list li.active .lumo-tabs__badge { background: var(--lumo-accent); color: var(--lumo-on-accent); } @media (max-width: 1280px) { .woocommerce-tabs.lumo-tabs ul.lumo-tabs__list li a { gap: 10px; padding-inline: 12px; font-size: 14.5px; } } @media (max-width: 960px) and (min-width: 769px) { .woocommerce-tabs.lumo-tabs ul.lumo-tabs__list li a { gap: 8px; padding-inline: 8px; font-size: 13.5px; } .lumo-tabs__ico { width: 30px; height: 30px; } } @media (max-width: 768px) { .woocommerce-tabs.lumo-tabs ul.lumo-tabs__list { position: static; display: flex; flex-direction: column; gap: 4px; margin: 0 0 24px; padding: 5px; border-radius: 20px; box-shadow: none; } .woocommerce-tabs.lumo-tabs ul.lumo-tabs__list li { width: 100%; } .woocommerce-tabs.lumo-tabs ul.lumo-tabs__list li a { justify-content: flex-start; min-height: 54px; padding: 8px 16px 8px 9px; border-radius: 15px; font-size: 15px; } .lumo-tabs__arrow { display: inline-flex; margin-left: auto; opacity: .45; transition: transform .3s var(--lumo-ease), opacity .25s; } .woocommerce-tabs.lumo-tabs ul.lumo-tabs__list li.active .lumo-tabs__arrow { opacity: 1; color: var(--lumo-accent); transform: rotate(90deg); } .woocommerce-tabs.lumo-tabs ul.lumo-tabs__list li a:hover .lumo-tabs__ico { transform: none; } } /* 1.25.1 (klient: „opinie jakoś lepiej ostyluj”): podsumowanie jako ciemna karta marki (żółty pierścień z logo), ocena + rozkład gwiazdek obok siebie, zachęta z żółtym przyciskiem pod spodem; formularz obok (≥1101). */ .lumo-reviews__summary { position: relative; overflow: hidden; isolation: isolate; grid-template-columns: auto minmax(0, 1fr); gap: 28px 44px; padding: 36px 40px; background: var(--lumo-ink); color: #fff; } .lumo-reviews__summary::before { content: ""; position: absolute; z-index: -1; right: -120px; bottom: -120px; width: 240px; height: 240px; border: 28px solid var(--lumo-accent); border-radius: 50%; opacity: .95; } .lumo-reviews__score strong, .lumo-reviews__score strong.is-empty { font-size: 72px; color: #fff; opacity: 1; } .lumo-reviews__score .lumo-stars__bg { fill: rgba(255, 255, 255, .22); } .lumo-reviews__score > span:last-child { color: rgba(255, 255, 255, .62); } .lumo-reviews__bars { align-self: center; gap: 9px; font-size: 13.5px; color: rgba(255, 255, 255, .85); } .lumo-reviews__bars li { grid-template-columns: 38px minmax(0, 1fr) 28px; } .lumo-reviews__bar { height: 8px; background: rgba(255, 255, 255, .14); } .lumo-reviews__bar span { background: var(--lumo-accent); } .lumo-reviews__n { color: rgba(255, 255, 255, .55); } .lumo-reviews__cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 24px 150px 0 0; border-top: 1px solid rgba(255, 255, 255, .14); } .lumo-reviews__cta p { flex: 1 1 260px; margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .82); } .lumo-reviews__cta .lumo-btn { flex: none; } .lumo-reviews__formwrap { padding: 36px 40px; box-shadow: none; } .lumo-reviews__formtitle { font-size: 30px; } #reviews .lumo-reviews__items .comment_container { padding: 20px 22px; border-radius: 20px; } @media (max-width: 900px) { .lumo-reviews__summary { grid-template-columns: auto minmax(0, 1fr); } } @media (max-width: 600px) { .lumo-reviews__summary { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 26px 22px; } .lumo-reviews__summary::before { right: -110px; bottom: -110px; width: 190px; height: 190px; border-width: 22px; } .lumo-reviews__score { grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 4px 16px; } .lumo-reviews__score strong, .lumo-reviews__score strong.is-empty { grid-row: span 2; font-size: 60px; } .lumo-reviews__cta { padding-right: 70px; } .lumo-reviews__cta .lumo-btn { width: 100%; } .lumo-reviews__formwrap { padding: 22px 18px; } .lumo-reviews__formtitle { font-size: 24px; } } /* 1.25.3 (klient 02.11): galeria produktu. - Ramka zdjęcia jako warstwa NAD zdjęciem (::after) - przewijany pasek zdjęć w zaokrąglonej ramce potrafił ją „rozmazać”, a zdjęcia z szarym brzegiem zlewały się z ramką. Bez marginesu wewnątrz (zdjęcia mają szarawe tło - byłby widać prostokąt). - Sticky bez dziury: stała odległość od samej góry okna (nagłówek, gdy wraca, nachodzi z wierzchu - jak zakładki). - Laptopy: duże zdjęcie najwyżej na wysokość okna minus miniatury, więc przy przyklejeniu miniatury są zawsze widoczne. */ .lumo-pg__stage { border: 0; } .lumo-pg__stage::after { content: ""; position: absolute; inset: 0; z-index: 4; border: 2px solid #ebe1c8; border-radius: inherit; pointer-events: none; } @media (min-width: 961px) { .lumo-product__left { top: calc(var(--lumo-admin-h, 0px) + 20px); } .lumo-pg__slide img { max-height: max(360px, calc(100vh - var(--lumo-admin-h, 0px) - 170px)); } } /* 1.26.0 (klient 02.11): zakładka „Dostawa i płatność” - po lewej podsumowanie (35%), po prawej karty sposobów dostawy z WooCommerce → Cennik dostawy (każdy sposób = karta, siatka sama dobiera liczbę kolumn). */ .lumo-deliv { display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); gap: 32px; align-items: start; } .lumo-deliv__intro { display: grid; align-content: start; gap: 14px; padding: 32px; border: 1px solid var(--lumo-line); border-radius: var(--lumo-radius-lg); background: var(--lumo-bg-2); } .lumo-deliv__badge { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--lumo-accent); color: var(--lumo-ink); } .lumo-deliv__intro h3 { margin: 4px 0 0; font-size: 26px; line-height: 1.2; } .lumo-deliv__intro > p { margin: 0; color: var(--lumo-ink-2); line-height: 1.6; } .lumo-deliv__facts { list-style: none !important; margin: 4px 0 0 !important; padding: 0 !important; display: grid; gap: 10px; } .lumo-deliv__facts li { display: flex; gap: 10px; align-items: flex-start; margin: 0 !important; padding: 0 !important; font-size: 14.5px; line-height: 1.5; color: var(--lumo-ink); } .lumo-deliv__facts li::before, .lumo-deliv__methods li::before { content: none !important; } .lumo-deliv__facts svg { flex: none; margin-top: 1px; color: var(--lumo-accent-ink); } .lumo-deliv__link { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 12px 20px; border-radius: 999px; background: var(--lumo-ink); color: #fff !important; font-weight: 600; font-size: 14px; text-decoration: none !important; transition: background-color .2s, color .2s; } .lumo-deliv__link:hover { background: var(--lumo-accent); color: var(--lumo-ink) !important; } .lumo-deliv__methods { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .lumo-deliv__methods li { display: grid; align-content: start; gap: 6px; margin: 0 !important; padding: 26px !important; border: 1px solid var(--lumo-line); border-radius: 20px; background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s var(--lumo-ease); } .lumo-deliv__methods li:hover { border-color: #e6d69c; box-shadow: var(--lumo-shadow); transform: translateY(-2px); } .lumo-deliv__ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px; border-radius: 14px; background: var(--lumo-accent-soft); color: var(--lumo-ink); } .lumo-deliv__methods strong { font-family: var(--lumo-font-display); font-size: 17px; line-height: 1.3; color: var(--lumo-ink); } .lumo-deliv__methods b { font-size: 26px; font-weight: 600; letter-spacing: -.01em; color: var(--lumo-ink); } .lumo-deliv__methods p { margin: 4px 0 0 !important; font-size: 14px; line-height: 1.55; color: var(--lumo-muted); } @media (max-width: 960px) { .lumo-deliv { grid-template-columns: minmax(0, 1fr); gap: 16px; } .lumo-deliv__intro { padding: 24px; } .lumo-deliv__intro h3 { font-size: 22px; } .lumo-deliv__methods li { padding: 22px !important; } } /* 1.26.0 (klient 02.11): opinie bez czarnego tła. Po lewej (35%) jasna karta: średnia, większe gwiazdki, rozkład ocen, przycisk „Dodaj opinię”; po prawej opinie 3 w rzędzie (telefon 1) albo „Brak opinii”, a po kliknięciu - formularz. */ .lumo-rv { display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); gap: 32px; align-items: start; } .lumo-rv__side { display: grid; gap: 22px; padding: 32px; border: 1px solid var(--lumo-line); border-radius: var(--lumo-radius-lg); background: var(--lumo-bg-2); } .lumo-rv__score { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; } .lumo-rv__meta { display: grid; justify-items: start; gap: 4px; } .lumo-rv__meta b { font-size: 16px; font-weight: 700; color: var(--lumo-ink); margin-top: 4px; } .lumo-rv__meta > span:last-child { font-size: 14px; line-height: 1.45; color: var(--lumo-muted); } .lumo-rv__score strong { font-family: var(--lumo-font-display); font-size: 64px; line-height: 1; font-weight: 600; letter-spacing: -.03em; color: var(--lumo-ink); } .lumo-rv__score .lumo-stars__bg, .lumo-rv__empty .lumo-stars__bg { fill: #ddd5c6; } .lumo-rv__bars { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: 13.5px; color: var(--lumo-ink-2); } .lumo-rv__bars li { display: grid; grid-template-columns: 36px minmax(0, 1fr) 28px; gap: 10px; align-items: center; margin: 0; } .lumo-rv__bars li::before { content: none !important; } .lumo-rv__bars li > span:first-child { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; } .lumo-rv__bars svg { fill: #f2b01e; } .lumo-rv__bar { height: 8px; border-radius: 99px; background: #e6e0d4; overflow: hidden; } .lumo-rv__bar span { display: block; height: 100%; border-radius: inherit; background: var(--lumo-accent-dark); transition: width .6s var(--lumo-ease); } .lumo-rv__n { text-align: right; color: var(--lumo-muted); font-variant-numeric: tabular-nums; } .lumo-rv__cta { display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid #e3ddd1; } .lumo-rv__cta p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--lumo-ink-2); } .lumo-rv__cta .lumo-btn { width: 100%; justify-content: center; gap: 8px; } .lumo-rv.is-writing [data-rv-open] { background: var(--lumo-ink); color: #fff; } .lumo-rv__empty { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 300px; padding: 40px 24px; text-align: center; border: 1px dashed #dcd4c5; border-radius: var(--lumo-radius-lg); background: #fff; } .lumo-rv__empty strong { margin-top: 6px; font-family: var(--lumo-font-display); font-size: 24px; color: var(--lumo-ink); } .lumo-rv__empty p { margin: 0; max-width: 440px; font-size: 15px; line-height: 1.55; color: var(--lumo-muted); } .lumo-rv__items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } #reviews .lumo-rv__items > li { margin: 0; padding: 0; } #reviews .lumo-rv__items > li::before { content: none !important; } #reviews .lumo-rv__items .comment_container { display: block; height: 100%; padding: 22px; border: 1px solid var(--lumo-line); border-radius: 20px; background: #fff; } #reviews .lumo-rv__items .avatar { display: none; } #reviews .lumo-rv__items .comment-text { display: flex; flex-direction: column; gap: 12px; height: 100%; } #reviews .lumo-rv__items .comment-text .star-rating { float: none; order: 0; margin: 0; } #reviews .lumo-rv__items .comment-text .description { order: 1; flex: 1; font-size: 15px; line-height: 1.6; color: var(--lumo-ink); } #reviews .lumo-rv__items .comment-text .meta { order: 2; margin: 0; padding-top: 12px; border-top: 1px solid var(--lumo-line); font-size: 13px; } #reviews .lumo-rv__items .comment-text .meta strong { display: block; } #reviews .lumo-rv__items .woocommerce-review__dash { display: none; } .lumo-rv__list .woocommerce-pagination { margin-top: 20px; } .lumo-rv__form { display: none; position: relative; padding: 32px 36px; border: 1px solid var(--lumo-line); border-radius: var(--lumo-radius-lg); background: #fff; box-shadow: var(--lumo-shadow); scroll-margin-top: calc(var(--lumo-stick, 0px) + 80px); } .lumo-rv.is-writing .lumo-rv__form, .lumo-rv__form:target { display: block; animation: lumoRvIn .35s var(--lumo-ease) both; } .lumo-rv.is-writing .lumo-rv__list, .lumo-rv:has(.lumo-rv__form:target) .lumo-rv__list { display: none; } @keyframes lumoRvIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .lumo-rv__back { position: absolute; top: 24px; right: 24px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--lumo-line); border-radius: 999px; background: #fff; color: var(--lumo-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .2s, border-color .2s; } .lumo-rv__back:hover { background: var(--lumo-bg-2); border-color: #d9d1c2; } .lumo-rv__form .lumo-reviews__formtitle { margin: 0 0 6px; padding-right: 120px; font-size: 30px; } .lumo-rv__form .lumo-rate { margin: 6px 0 20px; } .lumo-rv__form .lumo-rate__stars { gap: 4px; } .lumo-rv__form .lumo-rate__stars label { padding: 2px; } .lumo-rv__form .lumo-rate__stars svg { width: 44px; height: 44px; } .lumo-rv__form .lumo-rate__text { margin-left: 12px; font-weight: 600; } .lumo-rv__form .lumo-grid2 { margin-bottom: 16px; } .lumo-rv__form .comment-form-comment { display: block; margin-bottom: 18px; } @media (max-width: 1280px) { .lumo-rv__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { .lumo-rv { grid-template-columns: minmax(0, 1fr); gap: 16px; } .lumo-rv__side { padding: 24px; } .lumo-rv__score { gap: 16px; } .lumo-rv__score strong { font-size: 56px; } .lumo-rv__form { padding: 24px 20px; } .lumo-rv__form .lumo-reviews__formtitle { font-size: 24px; } .lumo-rv__back { top: 18px; right: 16px; } .lumo-rv__form .lumo-rate__stars svg { width: 40px; height: 40px; } } @media (max-width: 600px) { .lumo-rv__items { grid-template-columns: minmax(0, 1fr); } .lumo-rv__empty { min-height: 0; } } /* ---------- 1.26.1: karta produktu - ilość −/+ i podsumowanie wariantu (main.js „Cena wariantu”) ---------- */ .lumo-product__summary form.cart .lumo-qty { flex: none; height: 62px; padding: 5px; border-color: #c5bfb6; } .lumo-product__summary form.cart .lumo-qty button { width: 50px; height: 50px; } .lumo-product__summary form.cart .lumo-qty input.qty { width: 46px !important; height: 50px; font-size: 17px; } /* Druga cena WC (taka sama jak główna) ukryta - zamiast niej podsumowanie ilość × cena = razem */ .lumo-product__summary .woocommerce-variation-price { display: none; } .lumo-product__summary .woocommerce-variation.single_variation:not(:has(.woocommerce-variation-description *, .woocommerce-variation-availability *)) { display: none; } .lumo-varsum { flex: 1 0 100%; display: grid; gap: 10px; padding: 14px 18px; border: 1px solid var(--lumo-line); border-radius: 16px; background: #fff; } .lumo-varsum[hidden] { display: none; } .lumo-varsum__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding-bottom: 10px; border-bottom: 1px dashed #ddd3bf; font-size: 13px; color: var(--lumo-muted); } .lumo-varsum__head > span:first-child { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lumo-ink); } .lumo-varsum__calc .amount { color: var(--lumo-ink); font-weight: 600; } .lumo-varsum__total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; } .lumo-varsum__label { font-size: 15px; font-weight: 600; } .lumo-varsum__sum { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 2px 6px; text-align: right; } .lumo-varsum__sum > b { font-family: var(--lumo-font-display); font-size: 20px; font-weight: 600; letter-spacing: -.01em; } .lumo-varsum__sum small { font-size: 13px; color: var(--lumo-muted); } .lumo-varsum__gross { flex-basis: 100%; font-size: 14px; color: var(--lumo-muted); } .lumo-varsum__gross .amount { font-weight: 600; color: var(--lumo-ink); } @media (max-width: 768px) { .lumo-product__summary form.cart .lumo-qty { height: 54px; padding: 3px; } .lumo-product__summary form.cart .lumo-qty button { width: 44px; height: 46px; } .lumo-product__summary form.cart .lumo-qty input.qty { width: 36px !important; height: 46px; } .lumo-varsum { padding: 12px 14px; } .lumo-varsum__sum > b { font-size: 18px; } } @media (max-width: 360px) { .lumo-product__summary form.cart .lumo-qty button { width: 34px; } .lumo-product__summary form.cart .lumo-qty input.qty { width: 30px !important; } } /* 1.26.1: z „Chcę fakturę na firmę” nazwa firmy i NIP są wymagane - gwiazdka jak przy innych polach */ .lumo-co.is-invoice .lumo-inv-field > label::after { content: " *"; color: var(--lumo-danger); } /* 1.26.4: cena tkaniny na karcie - „Próbnik” jako etykieta przy netto i brutto (te same wiersze, równe kolumny) */ .lumo-product__summary > .price .lumo-price-fabric { display: inline-flex; align-items: baseline; gap: 8px; } .lumo-product__summary > .price small.lumo-price-tag { display: inline-block; min-width: 74px; margin: 0 !important; padding: 4px 10px; border-radius: 999px; background: #fff; font-family: var(--lumo-font); font-size: 12px !important; font-weight: 600 !important; letter-spacing: .04em; line-height: 1.3; text-align: center; text-transform: uppercase; color: var(--lumo-ink) !important; transform: translateY(-3px); } .lumo-product__summary > .price .lumo-price-gross small.lumo-price-tag { transform: translateY(-1px); } /* 1.26.4: zakładka „Dostawa i płatność” - kwota netto + brutto, tabela stolików z grupy produktu */ .lumo-deliv__main { display: grid; gap: 16px; min-width: 0; } .lumo-deliv__price { display: grid; gap: 2px; } .lumo-deliv__price b { font-size: 26px; font-weight: 600; letter-spacing: -.01em; color: var(--lumo-ink); } .lumo-deliv__price b small, .lumo-deliv__gross small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--lumo-muted); } .lumo-deliv__gross { font-size: 16px; font-weight: 600; color: var(--lumo-ink); } .lumo-deliv__tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .lumo-deliv__table { padding: 22px 26px; border: 1px solid var(--lumo-line); border-radius: 20px; background: #fff; } .lumo-deliv__table-title { margin: 0 0 12px !important; font-family: var(--lumo-font-display); font-size: 17px; font-weight: 600; color: var(--lumo-ink); } .lumo-deliv__table-title small { display: block; margin-top: 2px; font-family: var(--lumo-font); font-size: 13px; font-weight: 500; color: var(--lumo-muted); } .lumo-deliv__table table { width: 100%; margin: 0 !important; border: 0 !important; border-collapse: collapse; font-size: 14.5px; } .lumo-deliv__table th, .lumo-deliv__table td { padding: 10px 12px !important; border: 0 !important; border-bottom: 1px solid var(--lumo-line) !important; background: none !important; text-align: right; } .lumo-deliv__table th:first-child, .lumo-deliv__table td:first-child { padding-left: 0 !important; text-align: left; } .lumo-deliv__table th:last-child, .lumo-deliv__table td:last-child { padding-right: 0 !important; } .lumo-deliv__table th { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lumo-muted); } .lumo-deliv__table td { font-weight: 600; color: var(--lumo-ink); } .lumo-deliv__table td:first-child { font-weight: 500; } .lumo-deliv__table tr:last-child td { border-bottom: 0 !important; } .lumo-deliv__table td.is-free { color: var(--lumo-accent-ink); } @media (max-width: 600px) { .lumo-deliv__price b { font-size: 22px; } .lumo-deliv__table { padding: 18px; } .lumo-deliv__table th, .lumo-deliv__table td { padding: 9px 6px !important; font-size: 14px; } .lumo-deliv__table th { font-size: 11px; } } /* 1.26.9 (klient 03.11: „sekcja zbyt wysoka”, „nie wiedzą, jakie stoliki są małe, a jakie duże”): zakładka „Dostawa i płatność” niższa - karty sposobów z ikoną z boku, jedna tabela stolików (kolumna na grupę, opis blatów w nagłówku). */ .lumo-deliv { gap: 24px; } .lumo-deliv__intro { gap: 10px; padding: 26px; } .lumo-deliv__badge { width: 46px; height: 46px; } .lumo-deliv__intro h3 { margin: 2px 0 0; font-size: 22px; } .lumo-deliv__main { gap: 14px; } .lumo-deliv__methods { gap: 14px; } .lumo-deliv__methods li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 18px 20px !important; border-radius: 16px; } .lumo-deliv__methods li > * { grid-column: 2; } .lumo-deliv__methods .lumo-deliv__ico { grid-column: 1; grid-row: 1 / span 3; width: 40px; height: 40px; margin: 0; border-radius: 12px; } .lumo-deliv__methods strong { font-size: 16px; } .lumo-deliv__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; } .lumo-deliv__price b { font-size: 20px; } .lumo-deliv__price b small, .lumo-deliv__gross small { font-size: 13px; } .lumo-deliv__gross { font-size: 14px; font-weight: 500; color: var(--lumo-ink-2); } .lumo-deliv__methods p { margin: 2px 0 0 !important; font-size: 13.5px; line-height: 1.45; } .lumo-deliv__table { padding: 18px 22px; border-radius: 16px; } .lumo-deliv__table-title { margin-bottom: 6px !important; font-size: 16px; } .lumo-deliv__table th, .lumo-deliv__table td { padding: 7px 12px !important; } .lumo-deliv__table--multi th { vertical-align: bottom; } .lumo-deliv__table--multi th span { display: block; font-size: 12px; } .lumo-deliv__table--multi th small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 500; letter-spacing: 0; line-height: 1.35; text-transform: none; color: var(--lumo-ink-2); } .lumo-deliv__table--multi th:not(:first-child) { width: 40%; } .lumo-deliv__table--multi td { white-space: nowrap; } .lumo-deliv__table--multi td small { font-size: 12px; font-weight: 500; color: var(--lumo-muted); } .lumo-deliv__table--multi td span { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--lumo-muted); } .lumo-deliv__table--multi td.is-free { font-weight: 600; } .lumo-ship-sizes { margin: -4px 0 14px !important; font-size: 15px; color: var(--lumo-ink-2); } @media (max-width: 600px) { .lumo-deliv__intro { padding: 20px; } .lumo-deliv__methods li { padding: 16px !important; } .lumo-deliv__table { padding: 14px 16px; } .lumo-deliv__table th, .lumo-deliv__table td { padding: 7px 4px !important; } .lumo-deliv__table--multi td { white-space: normal; } .lumo-deliv__table--multi td span { display: block; margin: 0; font-size: 12px; } .lumo-deliv__table--multi th small { font-size: 11.5px; } .lumo-deliv__table--multi td:first-child { white-space: nowrap; } .lumo-deliv__methods p { font-size: 14px !important; } } /* ---------- 1.26.10 (klient 03.11: „błąd w stylach info / error”): komunikaty WC z ikoną zamiast samej kropki ---------- */ .woocommerce-message, .woocommerce-info, .woocommerce-error { padding: 14px 18px 14px 52px; border: 1px solid color-mix(in srgb, var(--lumo-ok) 22%, transparent); background: color-mix(in srgb, var(--lumo-ok) 7%, #fff); color: var(--lumo-ink); line-height: 1.5; } .woocommerce-info { border-color: var(--lumo-line); background: var(--lumo-bg-2); } .woocommerce-error { border-color: color-mix(in srgb, var(--lumo-danger) 24%, transparent); background: var(--lumo-danger-soft); } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: "\2713"; left: 18px; width: 22px; height: 22px; margin-top: -11px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; line-height: 1; } .woocommerce-info::before { content: "i"; font-size: 14px; font-style: normal; } .woocommerce-error::before { content: "!"; font-size: 14px; } .woocommerce-error li { margin: 0; padding: 0; } .woocommerce-error li + li { margin-top: 4px; } .woocommerce-message a:not(.button), .woocommerce-info a:not(.button), .woocommerce-error a:not(.button) { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* ≤600 px: ikona przy 1. linii - responsive.css „Komunikaty WC” */ /* 1.26.10 (klient 03.11: „sprawdź cały konfigurator mobilnie 300 px”): kolumna siatki nie rośnie ponad ekran (było ~311 px przy 300) */ .lumo-cfg__form { grid-template-columns: minmax(0, 1fr); } @media (max-width: 860px) { .lumo-cfg__body { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 380px) { .lumo-cfg__head { gap: 10px; padding-block: 14px; } .lumo-cfg__title { font-size: 18px; } .lumo-cfg__head .lumo-iconbtn { flex: none; width: 40px; height: 40px; } .lumo-shapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lumo-cfg .lumo-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .lumo-cfg .lumo-choice__box { padding: 8px; align-content: start; } .lumo-cfg .lumo-choice__label { font-size: 13px !important; line-height: 1.3; } .lumo-cfg .lumo-tabs__nav { margin-inline: -16px; padding-inline: 16px; } .lumo-hint .lumo-icon { flex: none; width: 16px; height: 16px; } } /* 1.26.10 (klient 03.11): cena brutto przed promocją przekreślona jak netto */ .lumo-price-gross del { margin-right: 4px; font-size: .92em; font-weight: 400; color: var(--lumo-muted); } .lumo-product__summary .price .lumo-price-gross del { margin-right: 1px; font-family: var(--lumo-font-display); font-size: 15px; letter-spacing: -.01em; } /* 1.26.12 (klient 03.11: „popraw style notification i w moje konto”) */ /* Komunikaty w Moim koncie: własny padding z „Moje konto (1.15.0)” zasłaniał miejsce na ikonę - ikona nachodziła na tekst */ .woocommerce-MyAccount-content .woocommerce-info, .woocommerce-MyAccount-content .woocommerce-message, .woocommerce-MyAccount-content .woocommerce-error { position: relative; gap: 12px 20px; padding: 16px 18px 16px 56px; border-radius: 18px; } .woocommerce-MyAccount-content .woocommerce-message { border-color: color-mix(in srgb, var(--lumo-ok) 22%, transparent); background: color-mix(in srgb, var(--lumo-ok) 7%, #fff); } .woocommerce-MyAccount-content .woocommerce-info::before, .woocommerce-MyAccount-content .woocommerce-message::before, .woocommerce-MyAccount-content .woocommerce-error::before { top: 50%; left: 20px; } .woocommerce-MyAccount-content .woocommerce-info .button, .woocommerce-MyAccount-content .woocommerce-message .button { margin: 0 0 0 auto; float: none; white-space: nowrap; } /* Szczegóły zamówienia (Moje konto, podziękowanie): clearfix col2-set (::before/::after) zajmował komórki siatki - adresy się rozjeżdżały */ .woocommerce-customer-details .woocommerce-columns::before, .woocommerce-customer-details .woocommerce-columns::after { content: none !important; display: none !important; } .woocommerce-customer-details .woocommerce-columns { align-items: stretch; margin-bottom: 0; } .woocommerce-customer-details .woocommerce-column { display: flex; flex-direction: column; margin: 0 !important; padding: 0 !important; } .woocommerce-customer-details .woocommerce-column address { flex: 1; margin: 0; } .woocommerce-customer-details address p { margin: 6px 0 0; } /* Kwoty w tabeli zamówienia do prawej („Razem” jest ostatnim wierszem - filtr woocommerce_get_order_item_totals w woocommerce.php) */ .woocommerce table.woocommerce-table--order-details td.product-total, .woocommerce table.woocommerce-table--order-details thead th.product-total, .woocommerce table.woocommerce-table--order-details tfoot td { text-align: right !important; } @media (max-width: 600px) { .woocommerce-MyAccount-content .woocommerce-info, .woocommerce-MyAccount-content .woocommerce-message, .woocommerce-MyAccount-content .woocommerce-error { padding: 14px 14px 14px 48px; } .woocommerce-MyAccount-content .woocommerce-info::before, .woocommerce-MyAccount-content .woocommerce-message::before, .woocommerce-MyAccount-content .woocommerce-error::before { top: 14px; left: 14px; margin-top: 0; } .woocommerce-MyAccount-content .woocommerce-info .button, .woocommerce-MyAccount-content .woocommerce-message .button { margin: 0; white-space: normal; } }