@charset "UTF-8"; *, *::before, *::after { font-optical-sizing: none !important; } /* ========================================================================== Styl24Nadruki - arkusz stylow sklepu. Arkusz wspolny dla czterech stron: index.html, sklep.html, produkt.html, panel.html. Wersja: jedna stala ?v= we wszystkich HTML (ta sama co WERSJA w js/dane.js). SYSTEM WIZUALNY - ten sam, ktorego trzymamy sie w naszych realizacjach: - PRAWDZIWE ZDJECIA produktow w , aspect-ratio 3/4, object-fit:cover, - szeryf 'Outfit' w naglowkach i w cenach, 'Plus Jakarta Sans' w tekscie i UI, - kremowa paleta, jeden stonowany akcent (palona terakota), zloto jako drugi glos, - miekkie zaokraglenia: 16px karty i panele, 14px karta produktu, 10px miniatury, - przyciski zawsze pigulki, plakietki na zdjeciu male i w wersalikach. ZERO rysowania produktu CSS-em. Nie ma tu klasy .produkt, .wzor ani .dodatek. Produkt na tej stronie to ze zdjeciem. Poprawki wzgledem wzorca bazowego (celowe, nie kopiujemy jego bledow): 1. .prod ma position:relative, wiec .serce trzyma sie karty, a nie okna przegladarki, 2. jest podmiana zdjecia po najechaniu (.foto-druga) - wzorzec jej nie mial, 3. szuflady chowamy przez opacity + visibility, NIGDY przez wyjazd poza ekran, 4. .btn--maly ma 44px wysokosci (dotyk), nie 40px, 5. siatki schodza do jednej kolumny na <=600px, 6. zero alert() - komunikaty ida do .toast i do .komunikat. ========================================================================== */ /* ========================================================================== 1. RESET I BAZA MOBILE ========================================================================== */ *, *::before, *::after{ box-sizing:border-box; } html, body{ overflow-x:clip; } html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } body{ margin:0; overflow-wrap:anywhere; } img, video, svg, iframe{ max-width:100%; height:auto; display:block; } input, select, textarea, button{ font-size:16px; font-family:inherit; line-height:1.25; } button{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; } [hidden]{ display:none !important; } select{ -webkit-appearance:none; appearance:none; min-height:46px; padding-right:38px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A463C' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; } @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } } /* ========================================================================== 2. PALETA I TYPOGRAFIA ========================================================================== */ :root{ --kremowy:#F7F3E7; --kremowy2:#ECE6D4; --bialy:#fff; --noc:#10201D; --noc2:#1B302C; --ink:#10201D; --muted:#4A463C; /* 8,48:1 na kremowym, 7,54:1 na kremowym2, 8,15:1 na akcent-jasny */ --muted2:#554F3F; /* obrysy, ikony i drobne podpisy: 7,35:1 na kremowym, 8,15:1 na bieli */ --akcent:#E8C877; /* zloto logo (jasnosc 69%). Na jasnym tle NIE jako tekst (1,6:1): klasa html.w-marka-gleboka przepina --akcent na --akcent-ciemny */ --akcent-ciemny:#65440B; /* glebokie zloto: 7,94:1 na kremowym, 7,06:1 na kremowym2, 7,63:1 na akcent-jasny; biel na nim 8,80:1 */ --akcent-jasny:#F8EED6; /* zloto 30% z biela: kafle i plakietki */ --zloto:#E8C877; /* 10,40:1 na --noc */ --line:rgba(16,32,29,.12); --line2:rgba(16,32,29,.07); --tap:48px; --safe-b:env(safe-area-inset-bottom,0px); --cien:0 2px 10px rgba(16,32,29,.06); --cien2:0 12px 40px rgba(16,32,29,.14); color-scheme:light; } html{ scroll-behavior:smooth; scroll-padding-top:132px; } /* na index i w sklepie naglowek ma dwa poziomy (68px + 48px pasek kategorii), wiec kotwice dostaja jeszcze 20px zapasu - razem 116px, dokladnie tyle, ile trzeba */ section[id], .kotwica{ scroll-margin-top:20px; } body{ font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--ink); background:var(--kremowy); line-height:1.65; font-size:16px; -webkit-font-smoothing:antialiased; } h1, h2, h3, h4{ font-family:'Outfit',Arial,'Times New Roman',serif; font-weight:500; line-height:1.1; letter-spacing:-.005em; margin:0; } p{ margin:0 0 14px; } p:last-child{ margin-bottom:0; } a{ color:inherit; text-decoration:none; } a:hover{ color:var(--akcent); } :focus-visible{ outline:2px solid var(--akcent); outline-offset:3px; } ::selection{ background:var(--akcent-jasny); color:var(--akcent-ciemny); } .wrap{ width:100%; max-width:1260px; margin-inline:auto; padding-inline:clamp(16px,4vw,30px); } section{ padding:clamp(52px,7vw,88px) 0; } .sekcja--biala{ background:var(--bialy); } .sekcja--kremowa2{ background:var(--kremowy2); } /* ciemne sekcje: ten sam podnieciony kolor co stopka (13,7:1 zamiast 9,4:1) */ .sekcja--noc{ background:var(--noc); color:#EFE7DE; } .sekcja--noc h1, .sekcja--noc h2, .sekcja--noc h3{ color:#fff; } .sekcja--waska{ padding-top:clamp(22px,3vw,32px); } .eyebrow{ font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--akcent-ciemny); font-weight:700; margin:0 0 14px; } .sekcja--noc .eyebrow{ color:var(--zloto); } .lead{ max-width:640px; margin-bottom:clamp(28px,4vw,44px); } .lead h2{ font-size:clamp(27px,4.4vw,44px); } .lead p{ color:var(--muted); margin:13px 0 0; font-size:clamp(15px,2vw,17px); } .sekcja--noc .lead p{ color:#EFE7DE; } /* wstep + tresc wysrodkowane - ten sam rytm w kazdej sekcji */ .srodek{ margin-inline:auto; text-align:center; } .lead .eyebrow{ color:var(--akcent-ciemny); font-size:11.5px; margin:0 0 14px; } .sekcja--noc .lead .eyebrow, .df-zaufanie .lead .eyebrow{ color:var(--zloto); } .lead-rzad{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; max-width:none; } /* drobna nota "[do uzupelnienia]" - kolor, ktory przechodzi kontrast (nie muted2) */ .nota{ font-size:12.5px; color:var(--muted); margin-top:12px; line-height:1.55; } .okruszek{ font-size:13px; color:var(--muted); margin:0 0 10px; } .nw{ white-space:nowrap; } /* ========================================================================== 3. FAIL-SAFE: tresc czytelna bez JS ========================================================================== */ .bez-js [data-tylko-js]{ display:none !important; } .bez-js .bez-js-info{ display:block; } .bez-js-info{ display:none; background:var(--akcent-jasny); color:var(--akcent-ciemny); font-size:13.5px; padding:12px 16px; border-radius:12px; margin-bottom:18px; } /* bez skryptu zadna warstwa nie moze przykryc tresci */ .bez-js .ovl, .bez-js .toast{ display:none; } .reveal{ opacity:1; transform:none; } html.js-anim .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); } html.js-anim .reveal.in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ html.js-anim .reveal{ opacity:1; transform:none; } } /* ========================================================================== 4. PRZYCISKI ========================================================================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:var(--tap); cursor:pointer; font:700 14px 'Plus Jakarta Sans',sans-serif; padding:13px 26px; border-radius:100px; border:1px solid var(--akcent); background:var(--akcent); color:#fff; transition:transform .18s ease, background .2s ease, border-color .2s ease; touch-action:manipulation; -webkit-tap-highlight-color:transparent; text-align:center; } .btn--kontur{ background:transparent; color:var(--ink); border-color:var(--line); } .btn--noc{ background:var(--noc); border-color:var(--noc); color:#fff; } .btn--zloto{ background:var(--zloto); border-color:var(--zloto); color:#2A1D10; } .btn--maly{ min-height:44px; padding:10px 18px; font-size:13px; } /* 44px, nie 40 - dotyk */ .btn--pelny{ width:100%; } .btn--kwadrat{ min-width:56px; padding-inline:14px; } .btn--obrys{ background:transparent; color:var(--ink); border-color:var(--line); } /* druga nazwa .btn--kontur */ .btn[disabled]{ opacity:.5; cursor:not-allowed; } .btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; } @media (hover:hover) and (pointer:fine){ .btn:hover{ background:var(--akcent-ciemny); border-color:var(--akcent-ciemny); color:#fff; transform:translateY(-1px); } .btn--kontur:hover, .btn--obrys:hover{ background:var(--kremowy2); border-color:var(--ink); color:var(--ink); } .btn--noc:hover{ background:var(--noc2); border-color:var(--noc2); color:#fff; } .btn--zloto:hover{ background:#B98F58; border-color:#B98F58; color:#2A1D10; } } .link-podkreslony{ color:var(--akcent-ciemny); text-decoration:underline; text-underline-offset:3px; font-weight:600; } /* ========================================================================== 5. PASEK PROMOCYJNY + NAGLOWEK ========================================================================== */ .pasek-demo, .demobar{ background:var(--noc); color:#EFE2D6; font-size:12.5px; text-align:center; padding:8px 14px; line-height:1.5; } .pasek-demo a, .demobar a{ color:var(--zloto); border-bottom:1px solid currentColor; } .pasek-demo a:hover, .demobar a:hover{ color:#E2C08A; } .vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .pasek-promo{ background:var(--noc); color:#EFE2D6; padding:7px 0; overflow:hidden; } .promo-tor{ display:flex; width:max-content; animation:promo-plynie 40s linear infinite; } .promo-grupa{ display:flex; flex:none; min-width:100vw; justify-content:space-around; } .promo-poz{ flex:none; padding:0 34px; font-size:12.5px; line-height:17px; letter-spacing:.03em; white-space:nowrap; } .promo-poz b{ color:var(--zloto); font-weight:700; } /* od -50% do 0 = ruch W PRAWO; zdublowana zawartosc domyka petle */ @keyframes promo-plynie{ from{ transform:translateX(-50%) } to{ transform:translateX(0) } } /* Bez animacji: tasma staje, pokazujemy jedna pare komunikatow na srodku. */ @media (prefers-reduced-motion:reduce){ .promo-tor{ animation:none; width:100%; justify-content:center; } .promo-grupa + .promo-grupa{ display:none; } .promo-grupa{ flex-wrap:wrap; justify-content:center; } .promo-grupa .promo-poz:nth-child(n+3){ display:none; } } @media (max-width:420px){ .promo-poz{ font-size:11.5px; padding:0 22px; } } header.nav{ position:sticky; top:0; z-index:70; background:rgba(247,248,247,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line2); } .nav-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; height:68px; } .brand{ font-family:'Outfit',Arial,serif; font-size:23px; letter-spacing:.02em; display:inline-flex; align-items:center; min-height:44px; color:var(--ink); } .brand:hover{ color:var(--ink); } .brand em{ font-style:italic; color:var(--akcent); } .brand small{ font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-left:10px; } .brand--logo{ flex:none; } .brand--logo img{ display:block; width:auto; height:34px; flex:none; } /* Na telefonie logo jest nizsze, a miejsce robia ikony schodzace do menu (nizej). */ @media (max-width:600px){ .brand--logo img{ height:26px; } } @media (max-width:360px){ .brand--logo img{ height:24px; } } .nav-linki{ display:flex; gap:24px; align-items:center; } .nav-linki a.link{ font-size:14.5px; font-weight:600; color:var(--ink); display:inline-flex; align-items:center; min-height:44px; } /* 7,6:1 zamiast 5,0:1 - terakota na kremie to ten sam cieply odcien co tlo */ .nav-linki a.link:hover, .nav-linki a.link.akt{ color:var(--akcent-ciemny); } .nav-akcje{ display:flex; align-items:center; gap:6px; flex:none; } @media (max-width:600px){ .nav-akcje .ikonabtn--chowana{ display:none; } } .nav-linki a.link.nav-konto{ display:none; } @media (max-width:600px){ .nav-linki a.link.nav-konto{ display:inline-flex; } } .ikonabtn{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border:0; background:none; cursor:pointer; position:relative; border-radius:50%; color:var(--ink); transition:background .2s ease; } .ikonabtn svg{ width:21px; height:21px; stroke:var(--ink); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } @media (hover:hover){ .ikonabtn:hover{ background:var(--kremowy2); } } .licznik{ position:absolute; top:4px; right:2px; min-width:19px; height:19px; padding:0 5px; border-radius:100px; background:var(--akcent); color:#fff; font:700 11px 'Plus Jakarta Sans',sans-serif; display:flex; align-items:center; justify-content:center; } /* hamburger: schowany na duzych ekranach, ale ZAWSZE 44x44 - bez tego na podstronie, ktora nie doda mu klasy .ikonabtn, przycisk mierzyl 6 px i nie dalo sie w niego trafic */ .nav-toggle{ display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; } /* pasek kategorii - drugi poziom naglowka (index i sklep) */ .katbar{ border-top:1px solid var(--line2); background:var(--bialy); position:relative; } .katbar-inner{ display:flex; gap:6px; align-items:stretch; justify-content:center; height:48px; } .katbar-inner::-webkit-scrollbar{ display:none; } .kat-poz{ display:flex; align-items:stretch; } .katbar .kat-link{ font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap; display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 13px; } .katbar .kat-link:hover, .kat-poz:hover .kat-link, .kat-poz:focus-within .kat-link{ color:var(--akcent); } .katbar .kat-link--akcent{ color:var(--akcent); } .kat-strzalka{ width:9px; height:6px; opacity:.6; transition:transform .2s; } .kat-poz:hover .kat-strzalka, .kat-poz:focus-within .kat-strzalka{ transform:rotate(180deg); } @media (prefers-reduced-motion:reduce){ .kat-strzalka{ transition:none; } } /* mega-panel: pelna szerokosc, zakotwiczony do .katbar */ .kat-menu{ display:none; position:absolute; left:0; right:0; top:100%; z-index:60; background:var(--bialy); border-top:1px solid var(--line2); border-bottom:1px solid var(--line); box-shadow:0 30px 50px -30px rgba(16,32,29,.35); padding:28px 0 34px; } .kat-poz:hover .kat-menu, .kat-poz:focus-within .kat-menu{ display:block; } /* dlugie panele (zawody: 53 pozycje) przewijaja sie w srodku, nie rozpychaja strony */ .kat-menu{ max-height:min(74vh, 680px); overflow:auto; overscroll-behavior:contain; } .kat-kolumny{ display:grid; grid-template-columns:repeat(4, minmax(180px, auto)); gap:26px 46px; justify-content:center; } @media (max-width:1180px){ .kat-kolumny{ grid-template-columns:repeat(3, minmax(160px, auto)); } } .kat-siatka{ display:grid; grid-template-columns:repeat(4, minmax(180px, auto)); gap:4px 46px; justify-content:center; } @media (max-width:1180px){ .kat-siatka{ grid-template-columns:repeat(3, minmax(160px, auto)); } } .kat-siatka a{ font-size:13.5px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:13px 0; min-height:44px; display:inline-flex; align-items:center; border-bottom:1px solid var(--line); } .kat-siatka a:hover{ color:var(--akcent); } .kat-naglowek{ font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); padding-bottom:10px; margin:0 0 8px; border-bottom:1px solid var(--line); } .kat-kol{ display:flex; flex-direction:column; } .kat-kol a{ font-size:13.5px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:8px 0; min-height:34px; display:inline-flex; align-items:center; } .kat-kol a:hover{ color:var(--akcent); } /* telefon i waski tablet: pasek przewijany, bez dropdownow */ @media (max-width:900px){ .katbar-inner{ justify-content:flex-start; gap:14px; overflow-x:auto; scrollbar-width:none; } .kat-menu{ display:none !important; } .kat-strzalka{ display:none; } .katbar .kat-link{ padding:0 2px; } } /* ========================================================================== 6. HERO (index.html) ========================================================================== */ .hero{ position:relative; padding:0; min-height:min(calc(100svh - var(--bars,116px)),780px); display:flex; align-items:flex-end; overflow:hidden; } .hero-bg{ position:absolute; inset:0; } .hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; } .hero-bg::after{ content:''; position:absolute; inset:0; background: linear-gradient(90deg,rgba(14,26,24,.80),rgba(14,26,24,.28) 62%,transparent), linear-gradient(0deg,rgba(14,26,24,.86),transparent 58%); } .hero-inner{ position:relative; z-index:2; padding-block:0 clamp(40px,6vw,74px); max-width:660px; color:#fff; } .hero h1{ font-size:clamp(38px,6.6vw,72px); color:#fff; margin:0 0 16px; } .hero h1 em{ font-style:italic; color:var(--zloto); } .hero p.sub{ font-size:clamp(15.5px,2vw,19px); color:#F2E6DA; max-width:520px; margin:0 0 24px; } .hero .eyebrow{ color:var(--zloto); } .hero-cta{ display:flex; gap:12px; flex-wrap:wrap; } .btn--nahero{ color:#fff; border-color:rgba(255,255,255,.62); background:rgba(14,26,24,.45); } @media (hover:hover) and (pointer:fine){ .btn--nahero:hover{ background:rgba(14,26,24,.72); border-color:#fff; color:#fff; } } @media (min-width:1100px){ .hero-inner{ max-width:1000px; } .hero h1{ font-size:clamp(56px,5.9vw,88px); letter-spacing:-.015em; } .hero p.sub{ max-width:660px; font-size:20px; } .hero .eyebrow{ letter-spacing:.28em; } } @media (min-width:1500px){ .hero-inner{ max-width:1120px; } .hero h1{ font-size:92px; } .hero p.sub{ max-width:720px; } } /* ========================================================================== 7. PASEK ZAUFANIA I LICZBY ========================================================================== */ .zaufanie{ background:var(--noc); color:#EFE7DE; } .zaufanie-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:20px; padding:26px 0; } .zaufanie-grid > *{ min-width:0; } .zt{ display:flex; gap:12px; align-items:flex-start; font-size:14px; } .zt svg{ width:22px; height:22px; stroke:var(--zloto); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; margin-top:1px; } .zt b{ display:block; color:#fff; font-size:14.5px; margin-bottom:2px; } /* ten sam pasek uzyty na jasnym tle (karta produktu) */ .zaufanie-grid--jasny{ padding:18px 0 0; gap:12px; } .zaufanie-grid--jasny .zt{ color:var(--muted); } .zaufanie-grid--jasny .zt svg{ stroke:var(--akcent); } .zaufanie-grid--jasny .zt b{ color:var(--ink); } .fakty{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr)); gap:16px; } .fakty > *{ min-width:0; } .fakt{ background:var(--bialy); border:1px solid var(--line2); border-radius:16px; padding:20px 18px; } .fakt b{ display:block; font-family:'Outfit',Arial,serif; font-weight:500; font-size:32px; line-height:1.05; margin-bottom:6px; } .fakt span{ display:block; font-size:13.5px; color:var(--muted); } /* ========================================================================== 8. KAFLE KATEGORII I OKAZJI ========================================================================== */ /* flex-wrap, nie grid - ostatni rzad domyka sie do krawedzi, zero sierotek */ .kafle{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:16px; } .kafle > *{ min-width:0; } .kafel{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:3/4; display:block; background:var(--kremowy2); } .kafel img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; } .kafel::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(14,26,24,.74),transparent 58%); } .kafel span{ position:absolute; left:18px; right:18px; bottom:16px; z-index:2; color:#fff; font-family:'Outfit',Arial,serif; font-size:21px; } .kafel small{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:12.5px; color:#E9DCCD; margin-top:3px; line-height:1.45; } @media (hover:hover){ .kafel:hover img{ transform:scale(1.05); } } /* pigulki okazji - linkuja do sklepu z parametrem */ .okazje{ display:flex; flex-wrap:wrap; gap:10px; } .chip-okazja{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 18px; border-radius:100px; border:1px solid var(--line); background:var(--bialy); font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; transition:background .2s ease, border-color .2s ease, color .2s ease; } .chip-okazja:hover, .chip-okazja.akt{ background:var(--akcent-jasny); border-color:var(--akcent); color:var(--akcent-ciemny); } /* ========================================================================== 9. SIATKA PRODUKTOW I KARTA W SIATCE ========================================================================== */ .produkty{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:clamp(14px,2vw,24px); } .produkty > *{ min-width:0; max-width:none; } .prod{ position:relative; /* poprawka wzgledem wzorca - .serce trzyma sie karty */ background:var(--bialy); border:1px solid var(--line2); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .25s ease, transform .25s ease; } .prod-foto{ position:relative; overflow:hidden; background:var(--kremowy2); display:block; } /* app.js owija zdjecia w - link musi byc blokiem, inaczej pod zdjeciem zostaje szczelina po linii bazowej tekstu */ .prod-foto-link{ display:block; position:relative; } /* stala proporcja zdjecia = rowne rzedy kart, niezaleznie od dlugosci nazwy */ .prod-foto img{ width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .6s ease, opacity .45s ease; } /* drugie zdjecie - podmiana po najechaniu; wzorzec tego nie mial, tu jest. Dwie nazwy, bo app.js rysuje .prod-foto-2, a karty wpisane w HTML .foto-druga. */ .prod-foto .foto-druga, .prod-foto .prod-foto-2{ position:absolute; inset:0; width:100%; height:100%; opacity:0; } .prod-plakietki{ position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:6px; z-index:2; } .plakietka{ font:700 11px 'Plus Jakarta Sans',sans-serif; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:100px; background:var(--noc); color:#fff; align-self:flex-start; } .plakietka--nowosc{ background:var(--akcent); color:#fff; } .plakietka--imie{ background:var(--zloto); color:#2A1D10; } /* personalizacja imieniem */ .plakietka--zestaw{ background:var(--noc); color:#fff; } /* dwie nazwy tej samej plakietki - app.js pisze --bestseller, karty w HTML --hit */ .plakietka--hit, .plakietka--bestseller{ background:var(--bialy); color:var(--akcent-ciemny); box-shadow:var(--cien); } .serce{ position:absolute; top:6px; right:6px; z-index:3; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s ease; } .serce svg{ width:18px; height:18px; stroke:var(--ink); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .serce.akt svg{ fill:var(--akcent); stroke:var(--akcent); } @media (hover:hover){ .serce:hover{ background:#fff; } } .serce-duze{ width:var(--tap); height:var(--tap); } .prod-body{ padding:14px 15px 16px; display:flex; flex-direction:column; flex:1; } .prod-kat{ font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin:0 0 6px; } /* nazwa produktu celowo groteskiem - szeryf zostaje dla naglowkow i ceny */ .prod h3{ font-family:'Plus Jakarta Sans',sans-serif; font-size:14.5px; font-weight:600; line-height:1.4; margin:0 0 8px; } .prod h3 a:hover{ color:var(--akcent); } /* opcjonalna druga linijka pod nazwa (linia produktu, haslo z wzoru) - to zwykly tekst, nie grafika. Dwie nazwy: app.js pisze .prod-linia, karty w HTML .prod-haslo. */ .prod-haslo, .prod-linia{ font-family:'Outfit',Arial,serif; font-size:15px; color:var(--muted); margin:0 0 10px; line-height:1.35; } .prod-rozmiary{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px; } .rozm{ font-size:11.5px; font-weight:600; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:3px 7px; } /* cena i przycisk zawsze przy dolnej krawedzi - caly rzad stoi w jednej linii */ .cena-omnibus{ margin:6px 0 0; font-size:12.5px; line-height:1.35; color:var(--muted); } .prod-dol{ margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding-top:10px; } .prod-dol .btn{ white-space:nowrap; } .cena{ font-family:'Outfit',Arial,serif; font-size:19px; font-weight:500; white-space:nowrap; } .cena-stara{ font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; color:var(--muted); text-decoration:line-through; margin-left:7px; } @media (hover:hover) and (pointer:fine){ .prod:hover{ box-shadow:var(--cien2); transform:translateY(-3px); } .prod:hover .prod-foto img{ transform:scale(1.04); } .prod:hover .prod-foto .foto-druga, .prod:hover .prod-foto .prod-foto-2{ opacity:1; } } /* ========================================================================== 10. SKLEP - uklad z panelem filtrow ========================================================================== */ .sklep-uklad{ display:grid; grid-template-columns:272px 1fr; gap:clamp(20px,3vw,38px); align-items:start; } .filtry{ position:sticky; top:126px; background:var(--bialy); border:1px solid var(--line2); border-radius:16px; padding:20px 18px; } .filtr-grupa{ border-top:0; padding-top:0; margin-top:0; } .filtr-grupa + .filtr-grupa{ border-top:1px solid var(--line2); padding-top:16px; margin-top:16px; } .filtr-grupa h4{ font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 11px; } .opcje{ display:flex; flex-direction:column; gap:2px; } .opcja{ display:flex; align-items:center; gap:11px; font-size:14px; cursor:pointer; min-height:44px; } .opcja input{ width:18px; height:18px; accent-color:var(--akcent); flex:none; } .opcja .ile{ margin-left:auto; font-size:12px; color:var(--muted); } .chipy-rozm, .chipy-wybor{ display:flex; flex-wrap:wrap; gap:7px; } .chip-rozm{ border:1px solid var(--line); background:var(--bialy); border-radius:8px; padding:8px 12px; font:600 13px 'Plus Jakarta Sans',sans-serif; cursor:pointer; min-height:44px; min-width:44px; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background .2s ease, border-color .2s ease, color .2s ease; } .chip-rozm.akt{ background:var(--akcent); border-color:var(--akcent); color:#fff; } @media (hover:hover){ .chip-rozm:hover{ border-color:var(--ink); } .chip-rozm.akt:hover{ background:var(--akcent-ciemny); border-color:var(--akcent-ciemny); } } .probka{ width:14px; height:14px; border-radius:50%; border:1px solid var(--line); flex:none; } .opcja--pusta{ color:var(--muted); cursor:default; } .opcja--pusta input{ cursor:not-allowed; } .chip-rozm.opcja--pusta{ border-style:dashed; } /* Grupy sa teraz
. `list-style:none` + wlasna strzalka, bo domyslny trojkat przegladarki nie da sie ostylowac spojnie miedzy Chrome a Safari. */ .filtr-grupa > summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; cursor:pointer; list-style:none; user-select:none; } .filtr-grupa > summary::-webkit-details-marker{ display:none; } .filtr-grupa > summary::after{ content:''; width:9px; height:9px; flex:none; margin-right:2px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg) translateY(-2px); transition:transform .18s ease; } .filtr-grupa[open] > summary::after{ transform:rotate(-135deg) translateY(-2px); } .filtr-grupa > summary h4{ margin:0; } /* h4 mial `margin:0 0 11px` - w ten odstep przestaje dzielic naglowek od opcji, bo opcje leza JUZ POZA summary. Odstep przenosimy na sam summary. */ .filtr-grupa > summary{ padding-bottom:9px; } .filtr-grupa > summary:focus-visible{ outline:2px solid var(--akcent); outline-offset:3px; border-radius:6px; } /* Chip zaznaczony - ten sam wyglad co `.akt`, tylko sterowany stanem pola wyboru. */ .chip-rozm:has(input:checked){ background:var(--akcent); border-color:var(--akcent); color:#fff; } .filtry-gora{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; } .filtry-gora h3{ margin:0; font-size:15px; display:flex; align-items:center; gap:8px; } .filtry-gora .licznik{ position:static; } .f-nota{ margin:8px 0 0; font-size:12.5px; line-height:1.45; color:var(--muted); } .btn-filtry .licznik{ position:static; margin-left:7px; } .suwak{ width:100%; accent-color:var(--akcent); } .sklep-gora{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px; } .szukajka{ position:relative; flex:1; min-width:220px; } .szukajka input{ width:100%; min-height:46px; padding:13px 15px 13px 44px; border:1px solid var(--line); border-radius:100px; background:var(--bialy); color:var(--ink); } .szukajka input::placeholder{ color:var(--muted); } .szukajka svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; stroke:var(--muted); fill:none; stroke-width:1.8; stroke-linecap:round; } .sortuj{ border:1px solid var(--line); border-radius:100px; background:var(--bialy); padding:0 38px 0 16px; min-height:46px; min-width:196px; flex:none; color:var(--ink); } .btn-filtry{ display:none; } .wyniki-info{ font-size:13.5px; color:var(--muted); margin:0 0 14px; } .aktywne-filtry{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; } .aktywne-filtry:empty{ display:none; margin:0; } .tag-filtr{ display:inline-flex; align-items:center; gap:7px; background:var(--akcent-jasny); color:var(--akcent-ciemny); border:0; border-radius:100px; padding:7px 12px; font:600 12.5px 'Plus Jakarta Sans',sans-serif; cursor:pointer; min-height:34px; } @media (hover:hover){ .tag-filtr:hover{ background:#EFDBCF; } } .pusto{ text-align:center; padding:50px 20px; color:var(--muted); } .pusto h3{ font-size:18px; margin-bottom:8px; color:var(--ink); } /* ========================================================================== 11. SZUFLADY: koszyk, filtry na telefonie, menu Chowamy przez opacity + visibility. NIGDY translateX poza ekran. ========================================================================== */ .ovl{ position:fixed; inset:0; background:rgba(14,26,24,.48); z-index:90; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; } .ovl.open{ opacity:1; visibility:visible; } .szuflada{ position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:var(--kremowy); z-index:95; display:flex; flex-direction:column; box-shadow:var(--cien2); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .28s ease, transform .28s cubic-bezier(.32,.72,0,1), visibility .28s; } .szuflada.open{ opacity:1; visibility:visible; transform:none; } .szuflada--lewa{ right:auto; left:0; } .szuflada-gora{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 20px; border-bottom:1px solid var(--line2); } .szuflada-gora h3{ font-size:19px; } .zamknij{ width:44px; height:44px; border:0; background:none; cursor:pointer; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; border-radius:50%; } .zamknij svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; } @media (hover:hover){ .zamknij:hover{ background:var(--kremowy2); } } .szuflada-tresc{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:18px 20px; -webkit-overflow-scrolling:touch; } .szuflada-dol{ padding:18px 20px calc(18px + var(--safe-b)); border-top:1px solid var(--line2); background:var(--bialy); } .pozycja{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line2); } .pozycja img{ width:64px; height:84px; object-fit:cover; border-radius:8px; flex:none; background:var(--kremowy2); } .pozycja-t{ flex:1; min-width:0; } .pozycja-t h4{ font-family:'Plus Jakarta Sans',sans-serif; font-size:13.5px; font-weight:600; line-height:1.35; margin:0 0 2px; } .pozycja-t small{ color:var(--muted); font-size:12px; display:block; } /* kwota i "Usun" w jednym wierszu pozycji koszyka - bez tej reguly napisy sklejaly sie w "26,99 zlUsun" (app.js rysuje .pozycja-dol > b.kwota + button.usun) */ .pozycja-dol{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:8px; } .pozycja-kwota, .pozycja-dol .kwota{ font-family:'Outfit',Arial,serif; font-size:17px; font-weight:500; white-space:nowrap; } .ilosc{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:100px; margin-top:7px; background:var(--bialy); } .ilosc button{ width:34px; height:34px; border:0; background:none; cursor:pointer; font-size:16px; color:var(--ink); border-radius:50%; } .ilosc span{ min-width:26px; text-align:center; font-size:13.5px; font-weight:600; } .usun{ border:0; background:none; color:var(--muted); font-size:12px; cursor:pointer; text-decoration:underline; padding:6px 0; min-height:32px; } @media (hover:hover){ .usun:hover{ color:var(--akcent-ciemny); } } .pasek-progu{ height:6px; border-radius:100px; background:var(--kremowy2); overflow:hidden; margin:6px 0 8px; } .pasek-progu i{ display:block; height:100%; background:var(--akcent); border-radius:100px; transition:width .4s ease; } .suma{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px; font-size:15px; } .suma b{ font-family:'Outfit',Arial,serif; font-size:24px; font-weight:500; } .suma b.suma-slowo{ font-family:'Inter',sans-serif; font-size:15px; font-weight:600; } .suma > :last-child{ white-space: nowrap; } .suma > .suma-slowo{ white-space: normal; } .dostawa-info{ font-size:12.5px; color:var(--muted); margin:0 0 14px; } /* ========================================================================== 12. KARTA PRODUKTU (produkt.html) ========================================================================== */ .karta{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(22px,4vw,52px); align-items:start; } .karta--srodek{ align-items:center; } .galeria-glowna{ border-radius:16px; overflow:hidden; background:var(--kremowy2); } .galeria-glowna img{ width:100%; aspect-ratio:1/1; object-fit:cover; } .miniatury{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px; } .miniatury button{ border:2px solid transparent; border-radius:10px; overflow:hidden; padding:0; background:var(--kremowy2); cursor:pointer; } .miniatury button.akt{ border-color:var(--akcent); } .miniatury img{ width:100%; aspect-ratio:1/1; object-fit:cover; } .karta h1{ font-size:clamp(26px,3.6vw,40px); margin:0 0 10px; } .cena-duza{ font-family:'Outfit',Arial,serif; font-size:31px; font-weight:500; margin:14px 0 6px; } .wybor h4{ font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:20px 0 10px; } .akcje-produkt{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; } .akcje-produkt > .btn:first-child{ flex:1; min-width:190px; } /* personalizacja imieniem - POLE TEKSTOWE, zadnego rysowanego produktu */ .personalizacja{ background:var(--akcent-jasny); border:1px solid rgba(101,68,11,.18); border-radius:16px; padding:16px 18px; margin-top:20px; } .personalizacja h4{ font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#6E3419; margin:0 0 10px; } /* 8,2:1 - 12 px potrzebuje zapasu nad progiem */ .personalizacja input[type="text"]{ width:100%; min-height:var(--tap); padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--bialy); color:var(--ink); } .personalizacja input:focus{ outline:none; border-color:var(--akcent); box-shadow:0 0 0 3px rgba(101,68,11,.15); } .personalizacja .nota{ color:var(--akcent-ciemny); margin-top:10px; } .licznik-znakow{ font-size:12px; color:#6E3419; margin-top:7px; text-align:right; } /* 8,2:1 - drobny tekst potrzebuje zapasu nad progiem */ .podglad-imienia{ font-family:'Outfit',Arial,serif; font-size:22px; color:var(--ink); margin-top:12px; min-height:30px; } /* akordeon */ .akordeon{ border-top:1px solid var(--line); margin-top:24px; } .akordeon details{ border-bottom:1px solid var(--line); } .akordeon summary{ cursor:pointer; padding:15px 0; font-weight:600; font-size:15px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:var(--tap); } .akordeon summary::-webkit-details-marker{ display:none; } .akordeon summary::after{ content:'+'; font-size:20px; color:var(--akcent); flex:none; } .akordeon details[open] summary::after{ content:'-'; } .akordeon p, .akordeon ul{ padding:0 0 16px; color:var(--muted); font-size:14.5px; margin:0; } .akordeon ul{ padding-left:18px; } .akordeon li{ margin-bottom:6px; } .tabela{ width:100%; border-collapse:collapse; font-size:14px; } .tabela th, .tabela td{ text-align:left; padding:9px 8px; border-bottom:1px solid var(--line2); } .tabela th{ font-weight:700; color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase; } /* ========================================================================== 13. FORMULARZE I KOMUNIKATY ========================================================================== */ .pole{ display:block; margin-bottom:14px; } /* TYLKO bezposredni span jest etykieta. Bez ">" kazdy zagniezdzony tez dostawal display:block i "Adres e-mail" lamalo sie na dwa wiersze. */ .pole > span{ display:block; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:6px; } .pole input, .pole select, .pole textarea{ width:100%; min-height:var(--tap); padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--kremowy); color:var(--ink); } .pole textarea{ min-height:110px; resize:vertical; line-height:1.55; } .pole input:focus, .pole select:focus, .pole textarea:focus{ outline:none; border-color:var(--akcent); box-shadow:0 0 0 3px rgba(101,68,11,.15); } .pole input::placeholder, .pole textarea::placeholder{ color:var(--muted); } .dane-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .dane-grid > .pelny-rzad{ grid-column:1/-1; } .zgoda{ display:flex; gap:11px; align-items:flex-start; font-size:13px; color:var(--muted); line-height:1.55; margin-bottom:14px; } .zgoda input{ width:20px; height:20px; accent-color:var(--akcent); flex:none; margin-top:2px; } .komunikat{ margin-top:14px; padding:12px 15px; border-radius:12px; background:var(--akcent-jasny); color:var(--akcent-ciemny); font-size:13.5px; font-weight:600; line-height:1.5; } .komunikat:empty{ display:none; padding:0; margin:0; } .komunikat--ok{ background:#E6F0E7; color:#1F5B33; } .komunikat--blad{ background:#FBE9E4; color:#8E2F16; } .komunikat.blad{ background:#FBE9E4; color:#8E2F16; } .komunikat--noc{ background:#F4E8DF; color:#6B3418; } .log-uklad{ max-width:440px; margin-inline:auto; } .zakladki{ display:flex; gap:6px; background:var(--kremowy2); padding:5px; border-radius:100px; margin-bottom:22px; } .zakladki button{ flex:1; border:0; background:none; cursor:pointer; padding:11px; border-radius:100px; /* #6B5C4D, nie --muted: nieaktywna zakladka na --kremowy2 mialaby 4,37:1, a musi miec 4,5:1 */ font:700 14px 'Plus Jakarta Sans',sans-serif; color:#6B5C4D; min-height:44px; } .zakladki button.akt{ background:var(--bialy); color:var(--ink); box-shadow:var(--cien); } .demo-konta{ background:var(--akcent-jasny); border-radius:12px; padding:14px 16px; font-size:13px; color:var(--akcent-ciemny); margin-top:18px; line-height:1.6; } .demo-konta b{ display:block; margin-bottom:5px; } .demo-konta-lista{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .konto-demo{ display:inline-flex; align-items:center; min-height:44px; padding:9px 15px; border:1px solid rgba(101,68,11,.28); border-radius:100px; background:var(--bialy); color:var(--akcent-ciemny); font:600 12.5px 'Plus Jakarta Sans',sans-serif; cursor:pointer; transition:background .2s ease, border-color .2s ease; } @media (hover:hover){ .konto-demo:hover{ background:var(--kremowy2); border-color:var(--akcent); } } .panel-uklad{ display:grid; grid-template-columns:250px 1fr; gap:clamp(20px,3vw,36px); align-items:start; } .panel-menu{ background:var(--bialy); border:1px solid var(--line2); border-radius:16px; padding:14px; position:sticky; top:110px; } .panel-menu button{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; border:0; background:none; cursor:pointer; padding:12px 13px; border-radius:10px; font:600 14.5px 'Plus Jakarta Sans',sans-serif; color:var(--ink); min-height:46px; } .panel-menu button svg{ width:19px; height:19px; stroke:var(--muted); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; } .panel-menu button.akt{ background:var(--akcent-jasny); color:#6E3419; } /* 8,2:1, bylo 7,0:1 */ .panel-menu button.akt svg{ stroke:var(--akcent); } @media (hover:hover){ .panel-menu button:hover{ background:var(--kremowy2); } .panel-menu button.akt:hover{ background:var(--akcent-jasny); } } .panel-karta{ background:var(--bialy); border:1px solid var(--line2); border-radius:16px; padding:clamp(18px,3vw,28px); } .panel-karta h2{ font-size:24px; margin-bottom:6px; } .panel-sekcja{ display:none; } .panel-sekcja.akt{ display:block; } .panel-naglowek{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:22px; } .zam{ border:1px solid var(--line2); border-radius:14px; padding:16px; margin-bottom:14px; } .zam-gora{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:12px; } .zam-nr{ font-weight:700; font-size:15px; } .status{ font:700 11.5px 'Plus Jakarta Sans',sans-serif; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:100px; white-space:nowrap; } .status--w-drodze{ background:#E7F0FB; color:#1C4F8F; } .status--gotowe{ background:#E6F4EC; color:#12492B; } /* 9,2:1, bylo 5,7:1 */ .status--pakowane{ background:#FDF0E3; color:#6B3E0A; } /* 8,1:1, bylo 5,6:1 */ .status--zwrot{ background:var(--akcent-jasny); color:var(--akcent-ciemny); } .status--nieznane{ background:#EEF0F3; color:#353C48; } .zam-poz{ display:flex; gap:10px; align-items:center; font-size:13.5px; color:var(--muted); } .zam-poz img{ width:44px; height:56px; object-fit:cover; border-radius:6px; flex:none; background:var(--kremowy2); } .zam-poz b{ color:var(--ink); } .kroki-dostawy{ display:flex; gap:6px; margin:14px 0 4px; } .krok{ flex:1; text-align:center; font-size:11px; color:var(--muted); } .krok i{ display:block; height:4px; border-radius:100px; background:var(--kremowy2); margin-bottom:6px; } .krok.zrobione i{ background:var(--akcent); } .krok.zrobione{ color:var(--akcent-ciemny); font-weight:600; } /* checklista (np. lista prezentow na okazje) */ .lista-check .opcja{ border-bottom:1px solid var(--line2); } .lista-check .opcja:last-child{ border-bottom:0; } .lista-check .opcja.zrobione{ color:var(--muted); text-decoration:line-through; } .znacznik{ margin-left:auto; font:700 11px 'Plus Jakarta Sans',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-decoration:none; } .bon{ background:linear-gradient(135deg,var(--noc),#4A3624); color:#fff; border-radius:16px; padding:22px; } .bon .kod{ font-family:'Outfit',Arial,serif; font-size:26px; letter-spacing:.1em; margin:10px 0 4px; } .bon p{ color:#D9C9B6; font-size:13.5px; } .puste-info{ text-align:center; padding:36px 16px; color:var(--muted); } .puste-info b{ display:block; font-size:15.5px; color:var(--ink); margin-bottom:6px; } .info-kafel{ background:var(--kremowy); border:1px solid var(--line2); border-radius:12px; padding:14px 16px; font-size:13.5px; color:var(--muted); } /* -------------------------------------------------------------------------- 14b. PANEL - reszta slownika uzywanego przez panel.html Te klasy stoja w markupie konta i do tej pory nie mialy tu ani jednej reguly. -------------------------------------------------------------------------- */ .sklep-naglowek{ padding-bottom:0; } .sklep-naglowek h1{ font-size:clamp(28px,4.4vw,44px); margin-bottom:10px; } .mute{ color:var(--muted); } .odstep{ margin-top:16px; } .panel-cialo .panel-sekcja.akt{ background:var(--bialy); border:1px solid var(--line2); border-radius:16px; padding:clamp(18px,3vw,28px); } .panel-cialo .panel-sekcja h2{ font-size:24px; margin-bottom:6px; } .panel-powitanie{ margin-bottom:clamp(18px,3vw,26px); } /* etapy dostawy: pasek rysuje ::before, bo w markupie nie ma */ .krok-d{ flex:1; text-align:center; font-size:11px; color:var(--muted); } .kroki-dostawy .krok::before{ content:''; display:block; height:4px; border-radius:100px; background:var(--kremowy2); margin-bottom:6px; } .kroki-dostawy .krok.zrobione::before{ background:var(--akcent); } .status--w-druku{ background:#FDF0E3; color:#6B3E0A; } /* to samo, co --pakowane */ .status--wyslane{ background:#E7F0FB; color:#1C4F8F; } /* to samo, co --w-drodze */ .zam-akcje{ display:flex; gap:9px; flex-wrap:wrap; margin-top:16px; } .zam-nazwa{ color:var(--ink); } /* formularz w panelu: ta sama siatka, co .dane-grid, inna nazwa w markupie */ .formularz{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .formularz .pole{ margin-bottom:0; } .formularz > .szeroko{ grid-column:1/-1; } .formularz > .szeroko .btn{ margin-top:2px; } .tabela-otoczka{ position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch; } .tabela caption{ font-size:12.5px; color:var(--muted); } .parametry{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:2px; } .parametry li{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--line2); font-size:14px; color:var(--muted); } .parametry li:last-child{ border-bottom:0; } .parametry b{ color:var(--ink); font-weight:600; text-align:right; } .blok-prawny{ background:var(--kremowy); border:1px solid var(--line2); border-left:3px solid var(--akcent); border-radius:12px; padding:16px 18px; margin-top:20px; font-size:13.5px; color:var(--muted); line-height:1.6; } .blok-prawny b{ color:var(--ink); } /* zapisane wzory - TEKST w ramce, nigdy rysowany produkt */ .wzory-lista{ display:grid; gap:12px; margin-top:16px; } .wzor-zapis{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; background:var(--kremowy); border:1px solid var(--line2); border-radius:14px; padding:14px 16px; } .wzor-zapis-t{ flex:1 1 200px; min-width:0; } .wzor-zapis-t b{ display:block; font-size:14.5px; margin-bottom:3px; } .wzor-zapis-t small{ display:block; font-size:12.5px; color:var(--muted); line-height:1.5; } /* ========================================================================== 15. TOAST (zamiast alert - iOS potrafi go zablokowac) ========================================================================== */ .toast{ position:fixed; left:50%; bottom:calc(20px + var(--safe-b)); z-index:120; transform:translateX(-50%) translateY(20px); background:var(--noc); color:#fff; padding:13px 20px; border-radius:100px; font-size:14px; font-weight:600; box-shadow:var(--cien2); max-width:92vw; text-align:center; opacity:0; visibility:hidden; transition:opacity .25s ease, transform .25s ease, visibility .25s; } .toast.pokaz{ opacity:1; visibility:visible; transform:translateX(-50%); } /* ========================================================================== 16. STOPKA ========================================================================== */ /* Stopka: #EFE7DE (13,7:1), nie bezowy #CFBFAE (9,4:1). Liczba byla dobra, ale cieply bez na cieplym brazie czyta sie jak ten sam kolor. */ footer{ background:var(--noc); color:#EFE7DE; padding:clamp(44px,6vw,64px) 0 26px; } .foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:26px 22px; } .foot-grid > *{ min-width:0; } footer h4{ font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin:0 0 13px; } footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:2px; font-size:14px; } footer ul a{ display:inline-flex; align-items:center; min-height:40px; padding:2px 0; } footer a{ color:#EFE7DE; } footer a:hover{ color:#fff; } .soc-lista{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:2px; } .soc{ display:inline-flex; align-items:center; gap:11px; min-height:44px; font-size:14px; } .soc svg{ width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .soc svg .pelne{ fill:currentColor; stroke:none; } .stopka-logo{ display:inline-block; } .stopka-logo img{ display:block; width:auto; height:38px; } .pp-gora{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:16px; } .pp-szukaj{ flex:1 1 260px; } .pp-szukaj .pole{ margin:0; } /* „Dostepny" to informacja sprzedazowa, nie nota robocza - dlatego ciemniejsza i z zielona kropka, zamiast szarego drobnego druku. */ /* „Kup teraz" na karcie w katalogu - pelna szerokosc pod cena i koszykiem, w obrysie, zeby nie konkurowalo wizualnie z glownym przyciskiem. */ .prod-kup{ width:100%; margin-top:10px; } /* Panel wyszukiwarki jest WARSTWA nad trescia - nie wchodzi w uklad, wiec hero nie zjezdza w dol. Zjezdza z gory z lekkim przenikaniem. */ .szukaj-panel{ position:absolute; top:100%; left:0; right:0; z-index:5; background:var(--bialy); border-bottom:1px solid var(--line); box-shadow:0 18px 44px rgba(16,32,29,.16); max-height:min(70vh,560px); overflow-y:auto; opacity:0; transform:translateY(-10px); transition:opacity .2s ease, transform .2s ease; } .szukaj-panel.otwarty{ opacity:1; transform:none; } .szukaj-zaslona{ position:fixed; inset:0; z-index:65; background:rgba(13,24,22,.32); opacity:0; transition:opacity .2s ease; } .szukaj-zaslona.otwarta{ opacity:1; } @media (prefers-reduced-motion:reduce){ .szukaj-panel, .szukaj-zaslona{ transition:none; } } .szukaj-panel-tresc{ display:grid; grid-template-columns:1fr auto; gap:10px; padding:16px 0; align-items:center; } .szukaj-panel .pole{ margin:0; } .szukaj-zamknij{ width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:none; cursor:pointer; color:var(--ink); display:flex; align-items:center; justify-content:center; } .szukaj-zamknij svg{ width:18px; height:18px; } .szukaj-wyniki{ grid-column:1/-1; display:flex; flex-direction:column; gap:6px; } .szukaj-poz{ display:flex; align-items:center; gap:12px; padding:8px; border-radius:12px; color:var(--ink); } @media (hover:hover){ .szukaj-poz:hover{ background:var(--kremowy); color:var(--ink); } } .szukaj-poz img{ width:44px; height:58px; object-fit:cover; border-radius:8px; flex:none; background:var(--bialy); } .szukaj-t{ flex:1; min-width:0; } .szukaj-t b{ display:block; font-size:14.5px; } .szukaj-t small{ display:block; font-size:12.5px; color:var(--ink); opacity:.72; } .szukaj-cena{ font-weight:700; font-size:14px; white-space:nowrap; } .szukaj-info{ margin:0; padding:8px 4px; font-size:14px; color:var(--ink); } .szukaj-wiecej{ display:block; text-align:center; padding:10px; font-weight:600; min-height:44px; } /* STRONICOWANIE KATALOGU */ .stronicowanie{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:28px; } .str-btn{ min-width:44px; min-height:44px; padding:0 12px; border-radius:12px; cursor:pointer; border:1px solid var(--line); background:var(--bialy); color:var(--ink); font:600 14.5px 'Plus Jakarta Sans',sans-serif; } .str-btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; } .str-btn.jest{ background:var(--akcent); border-color:var(--akcent); color:#fff; } .str-btn[disabled], .str-btn--nieczynny{ opacity:.4; cursor:default; } @media (hover:hover){ .str-btn:not(.jest):not([disabled]):not(.str-btn--nieczynny):hover{ border-color:var(--akcent); } } .dostepnosc{ color:var(--ink); font-size:14px; display:flex; align-items:center; gap:8px; } .dostepnosc::before{ content:''; width:8px; height:8px; border-radius:50%; background:#12492B; flex:none; } .dostepnosc--brak::before{ background:#8A3D12; } .dostepnosc--brak{ color:#6B3E0A; } /* Adres produktu, ktorego kupujacy nie ma prawa zobaczyc (szkic albo martwy link). */ .brak-produktu{ max-width:560px; margin:60px auto; text-align:center; } .brak-produktu h1{ font-size:clamp(26px,4vw,38px); margin:0 0 14px; } .brak-produktu .nota{ margin:0 0 22px; font-size:16px; color:var(--muted); } .opis-pod-zdjeciami{ margin-top:26px; } .opis-pod-zdjeciami h2{ font-size:22px; margin:0 0 12px; } .opis-pod-zdjeciami p{ margin:0 0 12px; line-height:1.75; color:var(--ink); } .opis-tresc h3{ font-family:'Outfit',Arial,serif; font-size:18px; margin:20px 0 8px; color:var(--ink); } .opis-tresc h4{ font-size:16px; margin:16px 0 6px; color:var(--ink); } .opis-tresc h3:first-child, .opis-tresc h4:first-child{ margin-top:0; } .opis-tresc ul, .opis-tresc ol{ margin:0 0 12px; padding-left:22px; } .opis-tresc li{ margin-bottom:6px; line-height:1.75; color:var(--ink); } .opis-tresc strong{ font-weight:700; } .opis-tresc p:last-child, .opis-tresc ul:last-child, .opis-tresc ol:last-child{ margin-bottom:0; } .sl-blok{ margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line); } .sl-naglowek{ margin-bottom:4px; } .sl-lista{ display:flex; flex-direction:column; gap:6px; margin-top:10px; } .sl-poz{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:var(--bialy); } /* Podkategoria stoi z wcieciem POD swoim rodzicem - bez tego nie widac, co gdzie lezy. */ .sl-poz--podkat{ margin-left:26px; background:var(--kremowy); } .sl-wciecie{ color:var(--muted2); margin-right:2px; } .sl-nazwa{ font-size:14px; font-weight:600; color:var(--ink); } .sl-info{ font-size:12.5px; color:var(--muted); } .sl-info code{ font-size:11.5px; color:var(--muted2); } .sl-zero{ color:var(--akcent-ciemny); font-weight:600; } .sl-chip{ display:inline-block; padding:1px 7px; border-radius:999px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; background:var(--kremowy2); color:var(--muted); border:1px solid var(--line); } .sl-akcje{ display:flex; align-items:center; gap:6px; margin-left:auto; } /* Slajdy strony glownej w panelu - wiersz rozwija sie w formularz. */ .sl-slajd{ flex-direction:column; align-items:stretch; gap:0; } .sl-slajd-glowa{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .sl-slajd-tresc{ display:flex; flex-direction:column; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); } .sl-slajd-tresc[hidden]{ display:none; } .sl-slajd-tresc .pe-pole{ margin:0; } /* Pola wyboru kategorii w edytorze produktu */ .pe-kat-lista{ display:flex; flex-direction:column; gap:2px; max-height:520px; overflow-y:auto; border:1px solid var(--line); border-radius:10px; padding:8px; background:var(--bialy); } .pe-kat-lista .pe-ptaszek{ margin-right:0; } .pe-ptaszek--podkat{ padding-left:22px; } .pe-ptaszek--sierota span{ color:var(--akcent-ciemny); } /* Dwa przyciski w kolumnie akcji - na waskim ekranie jeden pod drugim. */ .pp-akcja{ white-space:nowrap; text-align:right; } .pp-akcja .btn{ white-space:nowrap; padding-left:12px; padding-right:12px; } .pp-akcja .btn + .btn{ margin-left:6px; } .pp-dubluj{ white-space:nowrap; } /* Na waskim ekranie jeden pod drugim, wyrownane do prawej krawedzi kolumny. */ @media (max-width:1180px){ .pp-akcja .btn{ display:block; margin:0 0 6px auto; } .pp-akcja .btn + .btn{ margin-left:auto; } .pp-akcja .btn:last-child{ margin-bottom:0; } } /* „+" pod kazda lista - dodawanie bez wychodzenia z produktu. */ .pe-kat-dodaj{ display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; margin-top:8px; } .pe-kat-dodaj .pe-pole{ flex:1 1 150px; margin:0; } .pe-kat-dodaj .btn{ flex:0 0 auto; margin-bottom:1px; } .pe-kat-dodaj select, .pe-kat-dodaj input{ min-height:44px; } .pe-kat-licznik{ margin:0 0 6px; font-size:12.5px; color:var(--muted); } .pe-kat-licznik.zle{ color:var(--akcent-ciemny); font-weight:600; } /* Plakietka oznaczenia dodanego przez sklep - neutralna, bez obiecywania czegokolwiek. */ .plakietka--wlasne{ background:var(--kremowy2); color:var(--muted); border:1px solid var(--line); } .plakietka--brak{ background:var(--noc); color:#F7F8F7; } /* Podkategoria w pasku kategorii sklepu */ .katbar-podkat{ padding-left:22px; font-size:13px; color:var(--muted); } .pp-filtry{ margin:12px 0 0; border:1px solid var(--line); border-radius:14px; background:var(--bialy); } .pp-filtry-sum{ display:flex; align-items:center; gap:10px; min-height:48px; padding:0 14px; cursor:pointer; list-style:none; font-size:13.5px; font-weight:600; color:var(--ink); } .pp-filtry-sum::-webkit-details-marker{ display:none; } .pp-filtry-sum::after{ content:'rozwiń'; margin-left:auto; font-size:12.5px; font-weight:400; color:var(--muted); } .pp-filtry[open] .pp-filtry-sum::after{ content:'zwiń'; } .pp-filtry-sum:focus-visible{ outline:2px solid var(--akcent); outline-offset:-2px; } .pp-filtry-ile{ padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600; background:var(--akcent-jasny); color:var(--akcent-ciemny); } .pp-filtry-pola{ display:grid; gap:12px; padding:4px 14px 0; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); } .pp-filtry-pola .pe-pole{ margin:0; } .pp-filtry .pe-pole input, .pp-filtry .pe-pole select{ min-height:48px; font-size:16px; border-color:#8A7F73; background:var(--bialy); } .pp-filtry .pp-zakres-para{ display:flex; gap:8px; } .pp-filtry .pp-zakres-para input{ flex:1 1 0; min-width:0; } /* Para pol potrzebuje dwoch kolumn siatki, inaczej sasiednie pole spada do nowego rzedu. */ .pp-filtry .pp-filtr-zakres{ grid-column:span 2; } @media (max-width:700px){ .pp-filtry .pp-filtr-zakres{ grid-column:auto; } } .pp-filtry-akcje{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0; padding:12px 14px 14px; } .pp-filtry-chipy{ display:flex; gap:6px; flex-wrap:wrap; } .pp-chip{ display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:4px 10px; font:inherit; font-size:12.5px; color:var(--akcent-ciemny); background:var(--akcent-jasny); border:1px solid var(--akcent); border-radius:999px; cursor:pointer; } .pp-chip:hover{ background:var(--akcent); color:#fff; } .pp-wynik{ margin:10px 0 0; font-weight:600; color:var(--akcent-ciemny); } .pp-wynik[hidden]{ display:none; } .pp-pusto .btn{ margin-left:10px; } @media (max-width:700px){ .pp-filtry-pola{ grid-template-columns:1fr; } } .pep-summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; min-height:44px; } .pep-summary::-webkit-details-marker{ display:none; } .pep-summary::after{ content:'zwiń'; margin-left:auto; font-size:12.5px; color:var(--muted); } .pep-zwin:not([open]) .pep-summary::after{ content:'rozwiń'; } .pep-przelacznik{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; } .pep-btn{ min-height:44px; padding:8px 14px; font:inherit; font-size:13px; color:var(--ink); background:var(--bialy); border:1px solid var(--line); border-radius:999px; cursor:pointer; } .pep-btn:hover{ border-color:var(--akcent); color:var(--akcent-ciemny); } .pep-btn:focus-visible{ outline:2px solid var(--akcent); outline-offset:2px; } .pep-btn.akt{ background:var(--akcent); border-color:var(--akcent-ciemny); color:#fff; box-shadow:inset 0 0 0 2px var(--akcent-ciemny); } .pep-scena{ background:var(--kremowy2); padding:16px; border-radius:12px; container-type:inline-size; } .pep-plocha{ pointer-events:none; user-select:none; } .pep-siatka{ max-width:280px; margin-left:auto; margin-right:auto; } .pep-karta{ background:var(--bialy); border:1px solid var(--line); border-radius:14px; padding:16px; display:grid; grid-template-columns:minmax(0,1fr); gap:14px; } .pep-karta > .pep-foto{ max-width:210px; margin-inline:auto; width:100%; } @container (min-width: 470px){ .pep-karta{ grid-template-columns:200px minmax(0,1fr); gap:18px; } .pep-karta > .pep-foto{ max-width:none; margin-inline:0; } } /* Podglad w panelu MUSI miec te sama proporcje co sklep - inaczej sklep ustawialby kadr, ktorego kupujacy nigdy nie zobaczy. */ .pep-foto{ position:relative; aspect-ratio:1/1; background:var(--kremowy); border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center; } .pep-foto img{ width:100%; height:100%; object-fit:cover; } .pep-brakfoto{ font-size:12.5px; color:var(--muted); } .pep-plakietki{ position:absolute; left:8px; top:8px; display:flex; gap:6px; flex-wrap:wrap; } .pep-tresc{ min-width:0; } .pep-meta{ margin:0 0 4px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .pep-nazwa{ margin:0 0 6px; font-family:'Outfit',Arial,serif; font-size:22px; line-height:1.15; color:var(--ink); } .pep-cytat{ margin:0 0 8px; font-size:15px; color:var(--muted); } .pep-cena{ margin:0 0 4px; font-family:'Outfit',Arial,serif; font-size:24px; color:var(--ink); } .pep-kupilo{ margin:0 0 8px; font-size:12.5px; color:var(--muted); } .pep-stale{ margin:0 0 12px; font-size:12.5px; color:var(--muted); } .pep-chip{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; background:var(--kremowy2); color:var(--muted); border:1px solid var(--line); } .pep-etykieta{ margin:12px 0 6px; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .pep-kolka{ display:flex; gap:8px; flex-wrap:wrap; } .pep-kolka .kolko{ display:inline-block; } .pep-nota-kolor, .pep-nota{ margin:6px 0 0; font-size:12.5px; line-height:1.55; color:var(--muted); } .pep-rozmiary{ display:flex; gap:8px; flex-wrap:wrap; } .pep-rozmiary .chip-rozm{ display:inline-flex; align-items:center; } .pep-atrapa{ display:block; padding:10px 12px; border:1px dashed var(--muted2); border-radius:10px; font-size:13px; color:var(--muted); background:var(--kremowy); } .pep-akcje{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 0; } .pep-atrapa-btn{ padding:10px 16px; border-radius:999px; font-size:13.5px; font-weight:600; background:var(--akcent); color:#fff; } .pep-atrapa-btn--ciemny{ background:var(--noc); } /* Podglad pokazuje to, co ZOBACZY kupujacy - przy braku na stanie nie ma przyciskow zakupu. */ .pep-atrapa-btn--wyl{ background:var(--kremowy2); color:var(--muted); border:1px dashed var(--line); } .pep-stale--brak{ color:#6B3E0A; } .pep-opis{ grid-column:1 / -1; border-top:1px solid var(--line); padding-top:12px; } .pep-brak{ color:var(--akcent-ciemny); font-weight:600; } .pep-tabela{ grid-column:1 / -1; width:100%; border-collapse:collapse; font-size:13px; } .pep-tabela th, .pep-tabela td{ padding:7px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } .pep-tabela th{ width:44%; font-weight:600; color:var(--muted); } .pep-tabela td{ color:var(--ink); } .pep-streszczenie{ margin:12px 0 0; padding:0; list-style:none; font-size:12.5px; line-height:1.7; color:var(--muted); } .pep-streszczenie b{ color:var(--ink); font-weight:600; } @media (max-width:900px){ .pep-karta{ grid-template-columns:1fr; } .pep-foto{ max-width:220px; } } .pe-pole--opis{ display:flex; flex-direction:column; gap:6px; } .pe-etykieta{ font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; } .pe-nrz{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:6px; border:1px solid var(--line); border-bottom:0; border-radius:10px 10px 0 0; background:var(--kremowy); } .pe-nrz-btn{ min-height:36px; padding:6px 10px; font:inherit; font-size:13px; color:var(--ink); background:var(--bialy); border:1px solid var(--line); border-radius:8px; cursor:pointer; } .pe-nrz-btn--b{ font-weight:700; min-width:40px; } .pe-nrz-btn:hover{ border-color:var(--akcent); color:var(--akcent-ciemny); } .pe-nrz-btn:focus-visible{ outline:2px solid var(--akcent); outline-offset:2px; } .pe-nrz-btn[aria-pressed="true"]{ background:var(--akcent); border-color:var(--akcent-ciemny); color:#fff; box-shadow:inset 0 0 0 2px var(--akcent-ciemny); } .pe-nrz-kreska{ width:1px; height:24px; background:var(--line); margin:0 2px; } .pe-opis{ min-height:140px; padding:12px; font:inherit; font-size:14px; line-height:1.7; color:var(--ink); background:var(--bialy); border:1px solid var(--line); border-radius:0 0 10px 10px; overflow-y:auto; max-height:340px; } .pe-opis:focus{ outline:2px solid var(--akcent); outline-offset:-2px; } .pe-opis h3{ font-size:17px; margin:14px 0 6px; } .pe-opis h4{ font-size:15px; margin:12px 0 4px; } .pe-opis h3:first-child, .pe-opis h4:first-child, .pe-opis p:first-child{ margin-top:0; } .pe-opis p{ margin:0 0 10px; } .pe-opis ul, .pe-opis ol{ margin:0 0 10px; padding-left:22px; } .pe-opis li{ margin-bottom:4px; } .pe-licznik{ margin:0; font-size:12.5px; color:var(--muted); } .pe-licznik.zle{ color:var(--akcent-ciemny); font-weight:600; } @media (max-width:700px){ .pe-nrz-btn{ flex:1 1 auto; min-height:44px; } .pe-nrz-kreska{ display:none; } } /* szybki zakup - ciemny, zeby nie konkurowal z glownym przyciskiem koszyka */ .btn--szybki{ flex:1 1 160px; min-height:56px; } @media (max-width:520px){ .btn--szybki{ flex:1 1 100%; order:4; } } .pp-tabela-okno{ position:relative; overflow-x:auto; background:var(--bialy); border:1px solid var(--line); border-radius:16px; } .pp-tabela{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:1000px; } .pp-stan{ white-space:nowrap; } /* Pozycja koszyka, ktorej produkt zniknal z oferty. Wiersz MUSI istniec razem z przyciskiem usuwania - inaczej licznik nad ikona liczy sztuke, ktorej nie widac. */ .koszyk-poz--znikl{ opacity:.85; } /* Pozycja w koszyku, ktorej nie da sie kupic - musi rzucac sie w oczy JUZ w szufladzie, a nie dopiero przy ostatnim kliknieciu w kasie. */ .pozycja--niedostepna{ background:#FDF6EF; border-radius:12px; } /* Pozycja w podsumowaniu kasy, ktorej nie da sie kupic - z przyciskiem, ktory ja zdejmuje. */ /* Naglowek panelu bez tytulu - samo zdanie pod tytulem z sekcji wyzej. */ .sklep-naglowek--ciag{ padding-top:0; } .sp-niedostepna{ background:#FDF6EF; border-radius:10px; } .sp-niedostepna .sp-nazwa small{ display:block; margin-top:2px; font-size:12px; color:#6B3E0A; } .sp-usun{ border:1px solid var(--line); background:var(--bialy); color:#6B3E0A; border-radius:100px; padding:6px 14px; font:600 13px 'Plus Jakarta Sans',sans-serif; cursor:pointer; min-height:36px; } @media (hover:hover){ .sp-usun:hover{ border-color:#8A3D12; } } .poz-uwaga{ margin:4px 0 0; font-size:12.5px; line-height:1.5; color:#6B3E0A; } .pozycja--niedostepna .kwota{ color:#6B3E0A; font-weight:600; } .koszyk-poz--znikl .kp-t b{ color:#6B3E0A; } .pp-tabela td:nth-child(6){ white-space:nowrap; } .pp-tabela th{ text-align:left; padding:13px 16px; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--line); } .pp-tabela td{ padding:13px 16px; border-bottom:1px solid var(--line2); color:var(--ink); vertical-align:middle; } .pp-tabela tr:last-child td{ border-bottom:0; } .pp-tabela td small{ display:block; font-size:12.5px; color:var(--ink); opacity:.72; margin-top:2px; } .pp-cena{ font-weight:700; white-space:nowrap; } .pp-akcja{ text-align:right; white-space:nowrap; } .pp-pusto{ text-align:center; padding:28px 16px; } .pp-stan{ display:inline-block; padding:4px 11px; border-radius:100px; font-size:12px; font-weight:700; background:var(--kremowy2); color:var(--ink); } .pp-stan--best{ background:var(--akcent-jasny); color:var(--akcent-ciemny); } .pp-stan--nowosc{ background:#E6F4EC; color:#12492B; } .pp-stan--ukryty{ background:#FDF0E3; color:#6B3E0A; } .pp-stan--aktywny{ background:#E6F4EC; color:#12492B; } .pp-stan--brak{ background:#FDF0E3; color:#6B3E0A; } .pp-stan--szkic{ background:#ECE7E1; color:#3A3128; } /* Oznaczenia maja WLASNA kolumne - status i plakietka marketingowa to dwie rozne rzeczy. */ .pp-kol-ozn{ max-width:190px; } .pp-ozn{ display:inline-block; margin:2px 4px 2px 0; padding:3px 9px; border-radius:100px; background:var(--akcent-jasny); color:var(--akcent-ciemny); font-size:11.5px; font-weight:700; white-space:nowrap; } /* Oznaczenie skasowane ze slownika: pokazujemy identyfikator zamiast pomijac wiersz. */ .pp-ozn--nieznane{ background:var(--kremowy2); color:var(--muted); border:1px dashed var(--line); } .szuflada--szeroka{ width:min(560px,100%); } .pp-akcje{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; } /* link w menu panelu wyglada jak zakladka, ale prowadzi na osobna strone */ .panel-zak--link{ display:flex; align-items:center; gap:11px; text-decoration:none; } .pp-usun{ margin-left:auto; color:#8C2F1B; border-color:#E0BDB2; } @media (hover:hover){ .pp-usun:hover{ background:#8C2F1B; border-color:#8C2F1B; color:#fff; } } .galeria-glowna, .prod-foto, .miniatury button, .pozycja img, .prop-kafel img{ background:var(--bialy); } @media (max-width:600px){ .stopka-logo img{ height:32px; } } .soc small{ display:block; font-size:12.5px; opacity:.8; } @media (hover:hover){ .soc:hover svg{ stroke:var(--zloto); } } footer p{ font-size:14px; } footer .brand{ color:#fff; } footer .brand em{ color:var(--zloto); } .copy{ margin-top:30px; border-top:1px solid rgba(255,255,255,.1); padding-top:18px; /* --muted2 dawal tu 5,5:1 - najciemniejszy wiersz calej stopki. */ font-size:12.5px; color:#D8CCC0; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; } /* 8,7:1 zamiast 6,9:1 - drobny tekst 12,5 px potrzebuje zapasu */ .copy a{ color:#E8C877; } .copy a:hover{ color:#E2C08A; } footer a[href*="partweb"], .copy a, .pasek-demo a, .demobar a{ white-space:nowrap; } /* ========================================================================== 17. RESPONSYWNOSC ========================================================================== */ /* laptopy o niskim ekranie - hero nie moze zajac calego widoku */ @media (max-height:780px){ .hero h1{ font-size:clamp(30px,4.4vw,48px); margin-bottom:11px; } .hero p.sub{ font-size:15px; margin-bottom:14px; } .hero-inner{ padding-block:0 clamp(22px,4vw,40px); } } @media (max-width:1000px){ .sklep-uklad, .panel-uklad{ grid-template-columns:1fr; } .filtry{ display:none; } /* ten sam panel filtrow przenoszony skryptem do szuflady - zero duplikatow ID */ .filtry.mob{ display:block; position:static; border:0; padding:0; background:none; } .btn-filtry{ display:inline-flex; } .panel-menu{ position:static; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:8px; } .panel-menu::-webkit-scrollbar{ display:none; } .panel-menu button{ white-space:nowrap; width:auto; } .karta{ grid-template-columns:1fr; } .foot-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:1023px){ /* menu mobilne: panel wysuwany pod naglowkiem, chowany opacity + visibility */ .nav-linki{ position:absolute; left:0; right:0; top:100%; z-index:60; background:var(--kremowy); flex-direction:column; gap:0; align-items:stretch; border-bottom:1px solid var(--line); box-shadow:var(--cien2); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .26s ease, transform .26s ease, visibility .26s; } .nav-linki.open{ opacity:1; visibility:visible; transform:none; } .nav-linki a.link{ padding:14px 24px; width:100%; border-bottom:1px solid var(--line2); min-height:52px; } .nav-linki a.link:last-child{ border-bottom:0; } .nav-toggle{ display:inline-flex; } .brand small{ display:none; } } @media (max-width:640px){ .sortuj, .szukajka, .btn-filtry{ width:100%; flex:1 1 100%; } .produkty{ gap:12px; } .prod-body{ padding:12px 12px 14px; } .cena{ font-size:18px; } .dane-grid, .formularz{ grid-template-columns:1fr; } .foot-grid{ grid-template-columns:1fr; } .wzor-zapis{ gap:12px; } .panel-naglowek{ align-items:flex-start; } } /* zelazna zasada: na telefonie siatki schodza do JEDNEJ kolumny */ @media (max-width:600px){ .produkty, .kafle, .fakty{ grid-template-columns:1fr; } .produkty > *, .kafle > *, .fakty > *{ max-width:100%; } .akcje-produkt > .btn{ flex:1 1 100%; min-width:0; } .akcje-produkt > .btn--kwadrat{ flex:0 0 auto; } .szuflada{ width:100%; } } @media (max-width:1000px){ .kafle:has(> *:first-child:nth-last-child(4)), .produkty:has(> *:first-child:nth-last-child(4)){ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:600px){ .kafle:has(> *:first-child:nth-last-child(4)), .produkty:has(> *:first-child:nth-last-child(4)){ grid-template-columns:1fr; } } /* ========================================================================== 19. POZIOME PASKI NA TELEFONIE Pelna szerokosc, przyciaganie do kafla, wygaszenie maska. Maska znika, gdy pasek dojedzie do konca (atrybut data-koniec ustawia app.js). ========================================================================== */ @media (max-width:640px){ .katbar-inner, .panel-menu, .okazje--pasek{ scroll-snap-type:x proximity; scrollbar-width:none; flex-wrap:nowrap; overflow-x:auto; padding-inline:18px; scroll-padding-inline:18px; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 52px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 52px),transparent); } .katbar-inner[data-koniec], .panel-menu[data-koniec], .okazje--pasek[data-koniec]{ -webkit-mask-image:none; mask-image:none; } .katbar-inner > *, .panel-menu > *, .okazje--pasek > *{ flex:none; scroll-snap-align:start; } .katbar-inner::-webkit-scrollbar, .panel-menu::-webkit-scrollbar, .okazje--pasek::-webkit-scrollbar{ display:none; } /* pasek okazji rozciagniety na pelna szerokosc ekranu, poza padding .wrap */ .okazje--pasek{ margin-inline:calc(-1 * clamp(16px,4vw,30px)); } } /* ========================================================================== 20. DRUK - strona bywa drukowana do PDF ========================================================================== */ @media print{ .pasek-demo, .demobar, .pasek-promo, header.nav, .ovl, .szuflada, .toast, .btn{ display:none !important; } body{ background:#fff; } section{ padding:18px 0; break-inside:avoid; } .prod, .kafel, .panel-karta{ break-inside:avoid; } } /* --- personalizacja: pole wielolinijkowe zamiast jednej linii --- */ .personalizacja h4 .opcjonalnie{ font-weight:400; color:var(--muted); font-size:14px; } .pole--goly span.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .personalizacja textarea{ width:100%; min-height:104px; resize:vertical; padding:13px 15px; border:1px solid var(--line); border-radius:12px; background:var(--bialy); font-family:inherit; font-size:16px; line-height:1.5; color:var(--ink); } .personalizacja textarea:focus{ outline:2px solid var(--akcent); outline-offset:1px; border-color:transparent; } .personalizacja textarea::placeholder{ color:var(--muted2); } /* --- rzad zakupowy: minus/liczba/plus + duzy przycisk + serce --- */ .kup-rzad{ display:flex; gap:12px; align-items:stretch; margin-top:20px; flex-wrap:wrap; } .kup-rzad .ilosc{ flex:none; } .kup-rzad .btn--kup{ flex:1 1 240px; min-height:56px; font-size:15px; letter-spacing:.04em; } .kup-rzad .btn--kwadrat{ flex:none; min-height:56px; width:56px; } @media (max-width:520px){ .kup-rzad .btn--kup{ flex:1 1 100%; order:3; } .kup-rzad .ilosc{ flex:1 1 auto; } } /* --- jedna linia o wysylce pod przyciskiem --- */ .wysylka-linia{ display:flex; align-items:center; justify-content:center; gap:10px; margin:16px 0 0; font-size:14.5px; color:var(--muted); text-align:center; } .wysylka-linia svg{ width:20px; height:20px; flex:none; fill:none; stroke:var(--akcent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .wysylka-linia b{ color:var(--ink); font-weight:600; } .wysylka-linia .kropka{ opacity:.45; } /* --- DODATKI („Wzbogac swoj zakup") --- */ .dodatki-sekcja{ margin-top:30px; } .dodatki-tyt{ font-size:19px; margin:0 0 12px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } .dodatki-tyt span{ font-family:'Plus Jakarta Sans',sans-serif; font-size:13.5px; font-weight:400; color:var(--muted); } .dodatek{ display:flex; align-items:center; gap:14px; padding:14px 16px; cursor:pointer; background:var(--bialy); border:1px solid var(--line); border-radius:14px; transition:border-color .2s, box-shadow .2s; } .dodatek + .dodatek{ margin-top:10px; } .dodatek:has(input:checked){ border-color:var(--akcent); box-shadow:0 0 0 1px var(--akcent) inset; } @media (hover:hover){ .dodatek:hover{ border-color:var(--akcent); } } .dodatek-znak{ flex:none; width:64px; height:64px; border-radius:10px; background:var(--kremowy2); display:grid; place-items:center; } .dodatek-znak svg{ width:30px; height:30px; fill:none; stroke:var(--akcent); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } .dodatek-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } .dodatek-t b{ font-size:15px; line-height:1.35; } .dodatek-t small{ font-size:13px; color:var(--muted); line-height:1.5; } .dod-warianty{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; } .dod-wzor{ flex:1 1 calc(25% - 6px); min-width:84px; cursor:pointer; border:1px solid var(--line); border-radius:12px; background:var(--bialy); padding:8px 6px 6px; text-align:center; transition:border-color .2s ease, box-shadow .2s ease; } .dod-wzor img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; } .dod-wzor-nazwa{ display:block; margin-top:5px; font-size:12px; font-weight:600; color:var(--ink); } .dod-wzor.jest{ border-color:var(--akcent); box-shadow:0 0 0 1px var(--akcent) inset; } .dod-wzor:focus-within{ outline:2px solid var(--akcent); outline-offset:2px; } @media (hover:hover){ .dod-wzor:hover{ border-color:var(--akcent); } } @media (max-width:520px){ .dod-wzor{ flex:1 1 calc(50% - 4px); } } .dodatek-cena{ font-size:14.5px; font-weight:700; color:var(--akcent-ciemny); } .dodatek input[type="checkbox"]{ flex:none; width:24px; height:24px; accent-color:var(--akcent); cursor:pointer; margin:0; } @media (max-width:520px){ .dodatek-znak{ width:52px; height:52px; } .dodatek-znak svg{ width:24px; height:24px; } } .karta-produktu .akordeon{ background:var(--bialy); border:1px solid var(--line); border-radius:14px; padding:2px 18px; } .karta-produktu .akordeon details{ border-bottom:1px solid var(--line2); } .karta-produktu .akordeon details:last-child{ border-bottom:0; } /* naglowki sekcji: „Opis Produktu", „Wysylka", „Szczegoly produktu" */ .karta-produktu .akordeon summary{ color:var(--ink); font-weight:700; font-size:15.5px; } /* tresc opisow: pelny kontrast zamiast wyplowialego brazu */ .karta-produktu .akordeon p, .karta-produktu .akordeon ul, .karta-produktu .akordeon li, .karta-produktu .akordeon td, .karta-produktu .akordeon th{ color:var(--ink); } .karta-produktu .akordeon th{ font-weight:700; } /* DODATKI - naglowek na czarno, opis pozycji czytelny, kafle na bialym */ .karta-produktu .dodatki-tyt{ font-weight:700; } .karta-produktu .dodatki-tyt span{ color:var(--ink); } .karta-produktu .dodatek{ background:var(--bialy); } .karta-produktu .dodatek-t small{ color:var(--ink); } /* linia o wysylce + naglowek personalizacji */ .karta-produktu .wysylka-linia{ color:var(--ink); } .karta-produktu .personalizacja h4{ font-weight:700; } .karta-produktu .personalizacja h4 .opcjonalnie{ color:var(--ink); } /* .dodatki-sekcja to
, wiec lapala globalne section{padding:clamp(52px,7vw,88px) 0} - wewnatrz karty produktu dawalo to 88 px pustki nad „Dodatkami" i pod nimi. */ .karta-produktu .dodatki-sekcja{ padding:0; } .hero--slajder{ display:block; align-items:stretch; } .hero--slajder .hero-bg::after{ background: linear-gradient(90deg,rgba(9,18,16,.95) 0%,rgba(9,18,16,.89) 42%,rgba(9,18,16,.74) 70%,rgba(9,18,16,.24) 90%,transparent 100%), linear-gradient(0deg,rgba(9,18,16,.76) 0%,rgba(9,18,16,.55) 45%,rgba(9,18,16,.28) 78%,transparent 96%); } .hero-tor{ display:grid; } .hero-slajd{ grid-area:1/1; position:relative; display:flex; align-items:center; min-height:min(calc(100svh - var(--bars,116px)),780px); opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s linear .45s; } .hero-slajd.jest{ opacity:1; visibility:visible; transition:opacity .45s ease, visibility 0s; } /* tytul slajdow 2-5 to

- ma wygladac dokladnie jak

ze slajdu 1 */ .hero .hero-tyt{ font-family:'Outfit',Arial,serif; font-weight:500; line-height:1.04; font-size:clamp(38px,6.6vw,72px); color:#fff; margin:0 0 16px; } .hero .hero-tyt em{ font-style:italic; color:var(--zloto); } /* Etykieta w hero ZAWSZE na ciemnym. Piec roznych zdjec oznacza pieciu roznych jasnosci pod napisem, a sam scrim nie wystarczy przy 13-punktowej etykiecie w kolorze akcentu. Pigulka daje stale tlo niezaleznie od kadru. */ .hero--slajder .eyebrow{ display:inline-block; background:rgba(9,18,16,.78); color:#F5D6BA; padding:7px 14px; border-radius:999px; margin-bottom:14px; } /* delikatne wejscie tresci - tylko transform i opacity */ .hero-slajd .hero-inner > *{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; } .hero-slajd.jest .hero-inner > *{ opacity:1; transform:none; } .hero-slajd.jest .hero-inner > *:nth-child(2){ transition-delay:.07s; } .hero-slajd.jest .hero-inner > *:nth-child(3){ transition-delay:.14s; } .hero-slajd.jest .hero-inner > *:nth-child(4){ transition-delay:.21s; } /* --- sterowanie: strzalki po bokach, kropki na dole --- */ .hero-sterowanie{ position:absolute; inset:auto 0 0; z-index:3; pointer-events:none; display:flex; align-items:center; justify-content:center; gap:14px; padding:0 0 18px; } .hero-strzalka{ pointer-events:auto; flex:none; width:var(--tap,44px); height:var(--tap,44px); display:none; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.55); border-radius:50%; background:rgba(14,26,24,.42); color:#fff; cursor:pointer; transition:background .2s ease, border-color .2s ease; } .hero-strzalka svg{ width:20px; height:20px; } @media (hover:hover) and (pointer:fine){ .hero-strzalka:hover{ background:rgba(14,26,24,.78); border-color:#fff; } } .hero-kropki{ pointer-events:auto; display:flex; align-items:center; justify-content:center; gap:4px; } .hero-kropka{ width:var(--tap,44px); height:var(--tap,44px); padding:0; border:0; background:none; cursor:pointer; position:relative; border-radius:50%; } /* pole dotyku ma 44 px, ale widac tylko kropke w srodku. Swiadomie KOLKO, nie kreska - pozioma kreska czyta sie jak dlugi myslnik i lapie ja kontrola jakosci "ozdobne kreski przed etykietami". */ .hero-kropka::after{ content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.45); transition:background .25s ease, box-shadow .25s ease; } .hero-kropka.jest::after{ background:var(--zloto); box-shadow:0 0 0 4px rgba(232,200,119,.26); } @media (hover:hover) and (pointer:fine){ .hero-kropka:hover::after{ background:rgba(255,255,255,.8); } } /* miejsce na kropki pod przyciskami, zeby nic na siebie nie wchodzilo */ .hero--slajder .hero-inner{ padding-bottom:calc(clamp(40px,6vw,74px) + 30px); } @media (min-width:900px){ /* na duzym ekranie strzalki wchodza po bokach, kropki zostaja na dole */ .hero-strzalka{ display:flex; position:absolute; top:50%; transform:translateY(-50%); } .hero-strzalka--wstecz{ left:clamp(12px,2.4vw,30px); } .hero-strzalka--dalej{ right:clamp(12px,2.4vw,30px); } } @media (max-width:899px){ /* telefon: bez strzalek, zostaja kropki i przesuniecie palcem */ .hero-tor{ touch-action:pan-y; } .hero-sterowanie{ padding-bottom:8px; } .hero--slajder .hero-inner{ padding-bottom:calc(clamp(40px,6vw,74px) + 22px); } } @media (prefers-reduced-motion:reduce){ .hero-slajd, .hero-slajd .hero-inner > *{ transition:none; } .hero-slajd .hero-inner > *{ opacity:1; transform:none; } } /* naglowek kasy - bez menu, zeby nie wyprowadzac z zakupu */ .nav--kasa .nav-top{ justify-content:space-between; } .kasa-bezpiecznie{ display:flex; align-items:center; gap:8px; margin:0; font-size:13px; color:var(--ink); font-weight:600; } .kasa-bezpiecznie svg{ width:19px; height:19px; color:var(--akcent); flex:none; } .sekcja--gora0{ padding-top:0; } .kasa{ display:grid; gap:26px; align-items:start; } @media (min-width:980px){ .kasa{ grid-template-columns:minmax(0,1fr) 350px; gap:32px; } } .kasa > *{ min-width:0; } /* --- krok --- */ .kasa-krok{ background:var(--bialy); border:1px solid var(--line); border-radius:16px; padding:18px 20px; margin-bottom:14px; } .kasa-krok.zablokowany{ opacity:.5; } .kasa-krok.zablokowany .krok-tresc{ display:none; } .kasa-krok.gotowy .krok-tresc{ display:block; } .kasa-krok:not(.jest):not(.gotowy) .krok-tresc{ display:none; } .krok-gora{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; } .krok-tyt{ font-family:'Plus Jakarta Sans',sans-serif; font-size:17px; font-weight:700; color:var(--ink); margin:0; display:flex; align-items:center; gap:11px; min-height:var(--tap,44px); } .kasa-krok:not(.zablokowany) .krok-tyt{ cursor:pointer; } .krok-nr{ width:28px; height:28px; flex:none; border-radius:50%; background:var(--akcent); color:#fff; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; } .kasa-krok.zablokowany .krok-nr{ background:var(--muted); } .kasa-krok.gotowy .krok-nr{ background:var(--noc); } .krok-tresc{ padding-top:14px; } .krok-akcje{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; } /* --- formularz adresu --- */ /* .formularz jest siatka 1fr 1fr, wiec dwa bloki .pola-2 staly OBOK siebie i dawaly cztery waskie pola w rzedzie. Kazdy blok ma zajac cala szerokosc. */ .pola-2{ display:grid; gap:0 14px; grid-template-columns:1fr; grid-column:1/-1; } .formularz > .pole, .formularz > .nota, .formularz > .komunikat, .formularz > .krok-akcje{ grid-column:1/-1; } @media (min-width:640px){ .pola-2{ grid-template-columns:1fr 1fr; } .pola-2:has(.pole--waskie){ grid-template-columns:140px 1fr; } } .formularz .pola-2 .pole{ margin-bottom:14px; } .karta-blok{ background:var(--kremowy); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:14px; } .etykieta-mala{ margin:0 0 6px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); font-weight:700; } .adres-tekst{ margin:0 0 8px; font-size:14.5px; line-height:1.6; color:var(--ink); } .link-akcja{ border:0; background:none; padding:0; cursor:pointer; color:var(--akcent-ciemny); font:inherit; font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:3px; min-height:var(--tap,44px); } /* --- wybor dostawy: najpierw rodzaj, potem przewoznik --- */ .grupy-dostawy{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; } .grupa-dost{ flex:1 1 190px; text-align:left; cursor:pointer; background:var(--bialy); border:1px solid var(--line); border-radius:14px; padding:13px 15px; min-height:var(--tap,44px); font:inherit; color:var(--ink); } .grupa-dost b{ display:block; font-size:15px; } .grupa-dost small{ display:block; font-size:12.5px; color:var(--ink); opacity:.72; margin-top:2px; } .grupa-dost.jest{ border-color:var(--akcent); box-shadow:0 0 0 1px var(--akcent) inset; } @media (hover:hover){ .grupa-dost:hover{ border-color:var(--akcent); } } .wybor-przewoznika, .wybor-platnosci{ display:flex; flex-direction:column; gap:10px; } .przewoznik, .platnosc{ display:flex; align-items:center; gap:13px; cursor:pointer; background:var(--bialy); border:1px solid var(--line); border-radius:14px; padding:13px 15px; min-height:var(--tap,44px); } .przewoznik.jest, .platnosc.jest{ border-color:var(--akcent); box-shadow:0 0 0 1px var(--akcent) inset; } @media (hover:hover){ .przewoznik:hover, .platnosc:hover{ border-color:var(--akcent); } } .przewoznik input, .platnosc input{ width:20px; height:20px; flex:none; accent-color:var(--akcent); } .pw-tresc, .pl-tresc{ flex:1; min-width:0; } .pw-tresc b, .pl-tresc b{ display:block; font-size:15px; color:var(--ink); } .pw-tresc small, .pl-tresc small{ display:block; font-size:12.5px; color:var(--ink); opacity:.75; margin-top:2px; } .pw-nota{ font-style:italic; } .pw-cena, .pl-doplata{ flex:none; font-size:14.5px; font-weight:700; color:var(--akcent-ciemny); } /* --- punkt odbioru --- */ .punkt-szukaj{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px; } .punkt-szukaj .pole{ flex:1 1 200px; margin:0; } .punkt-wyniki{ margin-top:12px; } .punkt-wynik{ display:block; width:100%; text-align:left; cursor:pointer; margin-top:8px; background:var(--bialy); border:1px solid var(--line); border-radius:12px; padding:12px 14px; font:inherit; color:var(--ink); min-height:var(--tap,44px); } .punkt-wynik b{ display:block; font-size:14.5px; } .punkt-wynik small{ display:block; font-size:12.5px; color:var(--ink); opacity:.75; } .punkt-wynik.jest{ border-color:var(--akcent); box-shadow:0 0 0 1px var(--akcent) inset; } /* --- zgody --- */ .zgoda{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; font-size:14px; line-height:1.6; color:var(--ink); cursor:pointer; } .zgoda input{ width:20px; height:20px; flex:none; margin-top:2px; accent-color:var(--akcent); } /* zgoda-przelacznik w kroku 1 kasy (faktura) stoi w siatce formularza */ .zgoda--faktura{ grid-column:1/-1; margin:4px 0 10px; } /* Zgody czyta sie z gory na dol, wiec kazda zajmuje CALY rzad. Bez tego siatka .formularz (1fr 1fr) ustawiala je w dwie kolumny i kolejnosc skakala na boki. */ #formZgody > .zgoda, #formZgody > .klauzula, #formZgody > .komunikat, #formZgody > .krok-akcje{ grid-column:1/-1; } .zgoda--wszystkie{ padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--line); } .zgoda i{ font-style:normal; color:var(--ink); opacity:.72; } .klauzula{ position:relative; margin:6px 0 14px; } .klauzula-tekst{ margin:0; font-size:12px; line-height:1.6; color:var(--ink); max-height:66px; overflow:hidden; -webkit-mask-image:linear-gradient(#000 55%,transparent); mask-image:linear-gradient(#000 55%,transparent); } .klauzula.rozwinieta .klauzula-tekst{ max-height:none; -webkit-mask-image:none; mask-image:none; } .klauzula-wiecej{ display:block; margin:6px auto 0; } /* --- podsumowanie po prawej --- */ .suma-karta{ background:var(--bialy); border:1px solid var(--line); border-radius:16px; padding:18px 18px 16px; } @media (min-width:980px){ .kasa-suma{ position:sticky; top:calc(var(--bars,116px) + 16px); } } .suma-tyt{ font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; font-weight:700; margin:0 0 12px; color:var(--ink); } .suma-pozycje{ list-style:none; margin:12px 0 14px; padding:0; border-top:1px solid var(--line2); } .suma-pozycje li{ display:flex; gap:10px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line2); font-size:13.5px; color:var(--ink); } .sp-ile{ flex:none; font-weight:700; color:var(--akcent-ciemny); } .sp-nazwa{ flex:1; min-width:0; } .sp-cena{ flex:none; font-weight:600; white-space:nowrap; } .suma--razem{ border-top:1px solid var(--line); margin-top:10px; padding-top:10px; } .suma--rabat span{ color:var(--akcent-ciemny); font-weight:600; } .kod-blok{ margin:16px 0 14px; padding-top:14px; border-top:1px solid var(--line2); } .kod-rzad{ display:flex; gap:8px; align-items:center; } .kod-rzad .pole{ flex:1; min-width:0; margin:0; } .kod-rzad .btn{ flex:none; } .btn--duzy{ min-height:56px; font-size:15px; width:100%; } /* link udajacy wylaczony przycisk (pusty koszyk) - nie ma atrybutu disabled */ .btn--wylaczony{ opacity:.45; pointer-events:none; } /* PODSTRONY INFORMACYJNE (dostawa, platnosci, zwroty, regulamin, polityka, cookies, sledzenie) - jedna waska kolumna, bo to tekst do czytania. */ .tresc-waska{ max-width:760px; } .tresc-waska h2{ font-size:clamp(22px,2.6vw,27px); margin:34px 0 12px; } .tresc-waska h2:first-child{ margin-top:0; } .tresc-waska p{ margin:0 0 12px; line-height:1.75; } .tresc-waska .karta-blok{ margin-bottom:26px; } .lista-tresci{ margin:0 0 12px; padding-left:20px; } .lista-tresci li{ margin-bottom:8px; line-height:1.7; } .wpisy-lista{ display:flex; flex-wrap:wrap; gap:22px; } .wpis-karta{ flex:1 1 320px; min-width:0; background:var(--bialy); border:1px solid var(--line2); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .25s ease, transform .25s ease; } @media (hover:hover){ .wpis-karta:hover{ box-shadow:var(--cien2); transform:translateY(-3px); } } .wpis-foto{ display:block; aspect-ratio:3/2; overflow:hidden; background:var(--kremowy2); } .wpis-foto img{ width:100%; height:100%; object-fit:cover; } .wpis-tresc{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; } .wpis-tresc h2{ font-size:21px; margin:0; line-height:1.25; } .wpis-tresc h2 a{ color:var(--ink); } .wpis-tresc p{ margin:0; font-size:14.5px; line-height:1.65; } .wpis-meta{ display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin:0 0 6px; } .wpis-kat{ background:var(--akcent-jasny); color:var(--akcent-ciemny); padding:4px 10px; border-radius:100px; font-weight:700; } .wpis-wiecej{ margin-top:auto; padding-top:6px; font-weight:600; } .wpis-glowne{ margin:0 0 26px; border-radius:18px; overflow:hidden; } .wpis-glowne img{ width:100%; height:auto; display:block; } .wpis-cta{ margin:30px 0; } .wpis-cta .btn{ margin-top:10px; } .newsletter{ display:grid; gap:18px 34px; align-items:start; margin-top:34px; padding-top:28px; border-top:1px solid rgba(255,255,255,.12); } @media (min-width:900px){ .newsletter{ grid-template-columns:minmax(0,1fr) minmax(0,460px); } } .nl-tekst h4{ margin:0 0 6px; font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; letter-spacing:.02em; text-transform:none; color:#fff; } .nl-tekst p{ margin:0; font-size:14px; max-width:420px; } /* Pole+przycisk to OSOBNY rzad; zgoda i komunikat ida pod spodem jako pelna szerokosc. Wczesniej wszystko lezalo w jednej siatce dwukolumnowej i kontrola QA slusznie widziala dziure w ostatnim rzedzie. */ .nl-form{ display:flex; flex-direction:column; gap:10px; } .nl-rzad{ display:flex; gap:10px; align-items:center; } .nl-rzad .pole{ flex:1; min-width:0; margin:0; } .nl-form .pole{ margin:0; } .nl-form input[type='email']{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.28); color:#fff; } .nl-form input[type='email']::placeholder{ color:rgba(235,239,238,.62); } .nl-form .btn{ flex:none; } .nl-zgoda{ margin:0; font-size:13px; color:#EFE7DE; } .nl-zgoda input{ margin-top:1px; } .newsletter .komunikat{ margin:0; color:#EFE7DE; } .newsletter .komunikat.blad{ color:#F3C9AE; } .propozycje{ padding:16px 20px 4px; border-top:1px solid var(--line2); } .propozycje--panel{ padding:0; border:0; margin-bottom:26px; } .prop-lista{ display:flex; flex-direction:column; gap:8px; margin-top:10px; } .propozycje--panel .prop-lista{ flex-direction:row; flex-wrap:wrap; } .prop-kafel{ display:flex; align-items:center; gap:12px; padding:8px; border-radius:12px; border:1px solid var(--line2); background:var(--bialy); color:var(--ink); min-height:44px; } .propozycje--panel .prop-kafel{ flex:1 1 220px; min-width:0; } .prop-kafel img{ width:52px; height:68px; object-fit:cover; border-radius:8px; flex:none; background:var(--kremowy2); } .prop-t{ min-width:0; } .prop-t b{ display:block; font-size:14px; line-height:1.3; } .prop-t small{ display:block; font-size:13px; font-weight:700; color:var(--akcent-ciemny); margin-top:2px; } @media (hover:hover){ .prop-kafel:hover{ border-color:var(--akcent); color:var(--ink); } } .pod-haslem{ margin:0 0 10px; text-align:right; } .df-h2{ font-family:"Outfit",Arial,serif; font-weight:500; font-size:clamp(26px, 3.4vw, 38px); line-height:1.18; margin:6px 0 22px; } .df-h3{ font-family:"Outfit",Arial,serif; font-weight:500; font-size:22px; line-height:1.25; margin:2px 0 14px; } .df-lead-cta{ max-width:60ch; margin:0 auto 22px; color:var(--muted); font-size:16.5px; line-height:1.65; } .srodek .df-lead-cta{ margin-inline:auto; } .df-akcje-gora{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:26px 0 0; } .df-akcje-gora .btn{ width:auto; flex:0 0 auto; } .sklep-naglowek .df-akcje-gora{ justify-content:flex-start; } .sklep-naglowek .df-akcje-gora{ margin-top:22px; } /* --- kafle zastosowan --- */ .df-siatka{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:18px; } .df-karta{ background:var(--bialy); border:1px solid var(--line); border-radius:16px; padding:24px 22px; box-shadow:var(--cien); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .df-karta h3{ font-family:"Outfit",Arial,serif; font-weight:500; font-size:20px; margin:0 0 10px; } .df-karta p{ margin:0; color:var(--muted); font-size:15px; line-height:1.65; } @media (hover:hover) and (pointer:fine){ .df-karta:hover{ transform:translateY(-3px); box-shadow:var(--cien2); border-color:var(--akcent); } } /* --- tabela linii --- */ .df-tabela th[scope="row"]{ font-weight:700; white-space:normal; } .df-cena{ font-family:"Outfit",Arial,serif; font-size:17px; color:var(--akcent-ciemny); white-space:nowrap; } .df-nota-rabat{ margin-top:14px; } /* --- kroki --- */ .df-kroki{ list-style:none; margin:0; padding:0; display:grid; gap:14px; counter-reset:none; } .df-krok{ display:flex; gap:16px; align-items:flex-start; background:var(--bialy); border:1px solid var(--line); border-radius:14px; padding:18px 20px; } .df-krok-nr{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--akcent); color:#fff; display:grid; place-items:center; font-weight:700; font-size:15px; } .df-krok > div > b{ display:block; margin-bottom:4px; font-size:16px; } .df-krok p{ margin:0; color:var(--muted); font-size:15px; line-height:1.6; } /* --- dwie kolumny: lista + ramka --- */ .df-dwie{ display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:start; } .df-box{ background:var(--bialy); border:1px solid var(--line); border-radius:16px; padding:24px 22px; box-shadow:var(--cien); } .df-box h3{ font-family:"Outfit",Arial,serif; font-weight:500; font-size:19px; margin:0 0 8px; } .df-box h3 + p{ margin-top:0; } .df-box p{ color:var(--muted); font-size:15px; line-height:1.65; } .df-box h3:not(:first-child){ margin-top:20px; padding-top:18px; border-top:1px solid var(--line2); } /* --- pasek liczb na ciemnym --- */ .df-zaufanie{ background:var(--noc); color:#F6EDE4; } .df-h2-noc{ color:#FFFFFF; } .df-eyebrow-noc{ color:var(--zloto); } .df-nota-noc{ color:#E4D6C6; margin-top:18px; } .df-liczby{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:20px; margin-top:8px; } .df-liczba{ border-left:2px solid var(--zloto); padding-left:16px; } .df-liczba b{ display:block; font-family:"Outfit",Arial,serif; font-weight:500; font-size:clamp(26px, 3vw, 34px); color:#FFFFFF; line-height:1.1; } .df-liczba span{ display:block; margin-top:4px; font-size:14px; color:#E4D6C6; line-height:1.45; } /* --- odnosnik z sekcji hurtowej na stronie glownej (ciemne tlo) --- */ .df-link-oferta{ margin-top:14px; } .df-link-oferta a{ color:var(--zloto); } /* ===== KREATOR ============================================================= */ .df-uklad{ display:grid; grid-template-columns:1fr 360px; gap:34px; align-items:start; } .df-kreator{ display:grid; gap:18px; min-width:0; } .df-blok{ background:var(--bialy); border:1px solid var(--line); border-radius:16px; padding:22px 22px 24px; box-shadow:var(--cien); } .df-numer{ margin:0 0 2px; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--akcent-ciemny); } .df-pigulki{ display:flex; flex-wrap:wrap; gap:10px; } .df-pig{ flex:1 1 190px; min-width:0; text-align:left; background:var(--kremowy); border:1px solid var(--line); border-radius:12px; padding:13px 15px; cursor:pointer; font:inherit; color:var(--ink); transition:border-color .18s ease, background .18s ease, box-shadow .18s ease; min-height:var(--tap); } .df-pig b{ display:block; font-size:15px; font-weight:700; } .df-pig small{ display:block; margin-top:3px; font-size:13px; color:var(--muted); line-height:1.4; } .df-pig.akt{ border-color:var(--akcent); background:var(--akcent-jasny); box-shadow:inset 0 0 0 1px var(--akcent); } .df-pig.akt small{ color:var(--akcent-ciemny); } @media (hover:hover) and (pointer:fine){ .df-pig:hover{ border-color:var(--akcent); background:var(--akcent-jasny); } } .df-pigulki--male{ margin-top:12px; } .df-pig--maly{ flex:0 0 auto; min-width:64px; text-align:center; font-weight:700; padding:10px 16px; } .df-licznik{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .df-lbtn{ width:var(--tap); height:var(--tap); flex:none; border:1px solid var(--line); background:var(--kremowy); border-radius:10px; font-size:20px; line-height:1; cursor:pointer; color:var(--ink); } .df-licznik input{ width:110px; height:var(--tap); text-align:center; font:inherit; font-weight:700; font-size:17px; border:1px solid var(--line); border-radius:10px; background:var(--bialy); color:var(--ink); } .df-lopis{ color:var(--muted); font-size:15px; } @media (hover:hover) and (pointer:fine){ .df-lbtn:hover{ border-color:var(--akcent); background:var(--akcent-jasny); } } .df-data-pole{ margin:14px 0 0; max-width:280px; } /* --- podsumowanie --- */ .df-podsum{ min-width:0; } .df-sticky{ position:sticky; top:96px; } .df-zdanie{ margin:0 0 14px; font-size:15.5px; line-height:1.65; color:var(--muted); } .df-zdanie b{ color:var(--ink); } .df-pozycje{ margin:0 0 16px; } .df-pozycje li{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line2); font-size:14.5px; } .df-pozycje li span{ color:var(--muted); } .df-pozycje li b{ text-align:right; } .df-wycena{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:14px 16px; background:var(--akcent-jasny); border-radius:12px; margin-bottom:12px; } .df-wycena span{ font-size:14.5px; color:var(--muted); } .df-wycena b{ font-family:"Outfit",Arial,serif; font-size:17px; color:var(--akcent-ciemny); text-align:right; } .df-srodek-btn{ margin:6px 0 0; } .tresc-waska p.df-nota-pod{ margin-top:24px; } @media (max-width:980px){ .df-uklad{ grid-template-columns:1fr; } .df-dwie{ grid-template-columns:1fr; gap:24px; } .df-sticky{ position:static; } } @media (max-width:600px){ .df-pig{ flex:1 1 100%; } .df-krok{ padding:16px; } .df-akcje-gora{ flex-direction:column; align-items:stretch; } .df-akcje-gora .btn{ width:100%; } } .kt-siatka{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:16px; } .kt-karta{ background:var(--bialy); border:1px solid var(--line); border-radius:16px; padding:20px 19px; box-shadow:var(--cien); display:flex; gap:13px; align-items:flex-start; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .kt-karta svg{ width:22px; height:22px; flex:none; margin-top:2px; stroke:var(--akcent); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .kt-karta b{ display:block; font-size:15.5px; margin-bottom:5px; } .kt-karta p{ margin:0; font-size:14px; line-height:1.6; color:var(--muted); } .kt-karta a{ color:var(--akcent-ciemny); font-weight:600; } .kt-dane a{ display:block; font-size:15px; margin-bottom:2px; } @media (hover:hover) and (pointer:fine){ .kt-karta:hover{ transform:translateY(-3px); box-shadow:var(--cien2); border-color:var(--akcent); } } .kt-uklad{ display:grid; grid-template-columns:1fr 330px; gap:34px; align-items:start; } .kt-form{ background:var(--bialy); border:1px solid var(--line); border-radius:16px; padding:24px 22px 26px; box-shadow:var(--cien); min-width:0; } .kt-bok{ background:var(--akcent-jasny); border-radius:16px; padding:22px 20px; } .kt-bok h3{ font-family:"Outfit",Arial,serif; font-weight:500; font-size:18px; margin:0 0 10px; } .kt-bok ul{ margin:0 0 14px; padding-left:18px; } .kt-bok li{ font-size:14px; line-height:1.6; color:var(--muted); margin-bottom:6px; } .kt-bok p{ font-size:13.5px; line-height:1.6; color:var(--muted); margin:0; } .kt-bok p + h3{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(101,68,11,.18); } .kt-pola{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .kt-pola > .kt-cala{ grid-column:1/-1; } .kt-form .komunikat{ margin-top:16px; } .kt-licznik{ display:block; margin-top:5px; font-size:12.5px; color:var(--muted2); text-align:right; } .kt-srodek{ text-align:center; margin:18px 0 0; } .kt-h2{ font-family:"Outfit",Arial,serif; font-weight:500; font-size:clamp(24px, 3vw, 34px); line-height:1.2; margin:6px 0 20px; } .kt-lead{ max-width:62ch; color:var(--muted); font-size:16px; line-height:1.65; margin:0 0 24px; } .tresc-waska p.kt-nota-dol{ margin-top:22px; } @media (max-width:900px){ .kt-uklad{ grid-template-columns:1fr; } } @media (max-width:600px){ .kt-pola{ grid-template-columns:1fr; } } .bl-hero{ background:var(--noc); color:#F6EDE4; padding:clamp(46px,7vw,86px) 0 clamp(40px,6vw,70px); text-align:center; } .bl-eyebrow{ margin:0 0 10px; font-size:12.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--zloto); } .bl-tytul{ font-family:"Outfit",Arial,serif; font-weight:400; font-style:italic; font-size:clamp(44px,7vw,78px); line-height:1; margin:0 0 14px; color:#FFFFFF; } .bl-lead{ max-width:56ch; margin:0 auto 18px; font-size:clamp(15px,1.8vw,17px); line-height:1.7; color:#E4D6C6; } .bl-okruszki{ margin:0; font-size:13.5px; color:#C9B7A4; } .bl-okruszki a{ color:#E4D6C6; } .bl-okruszki span{ margin:0 7px; opacity:.6; } /* --- wpis wyrozniony --- */ .bl-wyroznik{ display:grid; grid-template-columns:1.05fr 1fr; gap:0; background:var(--bialy); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--cien); } .bl-wyroznik-foto{ display:block; min-height:100%; } /* Kadr LICZONY 3:2 (jak kafle listy). Bez aspect-ratio wysokosc dyktowal PLIK: pionowe zdjecie 760x880 robilo karte 804 px przy 305 px tekstu (1440) i zdjecie 706x817 na tablecie. `contain`, nie `cover`: cover wycinal z pionowej lampki tabliczke z grawerem, czyli to, co wpis pokazuje. Zdjecia produktow maja biale tlo, wiec zlewaja sie z biala karta. */ .bl-wyroznik-foto img{ width:100%; height:100%; aspect-ratio:3/2; min-height:320px; object-fit:contain; background:var(--bialy); display:block; } .bl-wyroznik-tresc{ padding:clamp(24px,3vw,38px); display:flex; flex-direction:column; justify-content:center; } .bl-wyroznik-tresc h2{ font-family:"Outfit",Arial,serif; font-weight:500; font-size:clamp(24px,2.8vw,34px); line-height:1.2; margin:0 0 12px; } .bl-wyroznik-tresc h2 a{ color:var(--ink); } .bl-plakietka{ align-self:flex-start; margin:0 0 14px; padding:6px 14px; border-radius:999px; background:var(--akcent-jasny); color:var(--akcent-ciemny); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; } .bl-meta{ margin:0 0 8px; font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--akcent-ciemny); } .bl-meta span{ margin:0 5px; opacity:.6; } .bl-zajawka{ margin:0 0 16px; color:var(--muted); font-size:15px; line-height:1.7; } .bl-wiecej{ margin:0; } .bl-wiecej a{ font-weight:700; color:var(--akcent-ciemny); } .bl-wiecej a::after{ content:" \2192"; } /* --- pigulki kategorii --- */ .bl-filtry{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 clamp(22px,3vw,30px); } .bl-pig{ border:1px solid var(--line); background:var(--bialy); color:var(--ink); border-radius:999px; padding:10px 20px; min-height:var(--tap); font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; transition:background .18s ease, border-color .18s ease, color .18s ease; } .bl-pig.akt{ background:var(--akcent); border-color:var(--akcent); color:#fff; } @media (hover:hover) and (pointer:fine){ .bl-pig:hover{ border-color:var(--akcent); } .bl-pig.akt:hover{ background:var(--akcent-ciemny); } } /* --- siatka kart --- */ .bl-siatka{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:22px; } .bl-karta{ background:var(--bialy); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--cien); display:flex; flex-direction:column; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .bl-karta[hidden]{ display:none; } .bl-foto{ display:block; } .bl-foto img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; } .bl-tresc{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1 1 auto; } .bl-tresc h3{ font-family:"Outfit",Arial,serif; font-weight:500; font-size:20px; line-height:1.28; margin:0 0 10px; } .bl-tresc h3 a{ color:var(--ink); } .bl-tresc .bl-wiecej{ margin-top:auto; padding-top:6px; } .bl-pusto{ margin:24px 0 0; text-align:center; color:var(--muted); } @media (hover:hover) and (pointer:fine){ .bl-karta:hover{ transform:translateY(-3px); box-shadow:var(--cien2); border-color:var(--akcent); } .bl-tresc h3 a:hover, .bl-wyroznik-tresc h2 a:hover{ color:var(--akcent-ciemny); } } /* --- pas CTA na dole --- */ .bl-cta{ background:var(--noc); color:#F6EDE4; padding:clamp(44px,6vw,74px) 0; text-align:center; } .bl-cta-tyt{ font-family:"Outfit",Arial,serif; font-weight:500; font-size:clamp(26px,3.4vw,38px); line-height:1.2; margin:0 0 12px; color:#FFFFFF; } .bl-cta-lead{ max-width:56ch; margin:0 auto 24px; color:#E4D6C6; font-size:16px; line-height:1.65; } .bl-cta-akcje{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:0; } .bl-cta-akcje .btn{ width:auto; flex:0 0 auto; } @media (max-width:860px){ .bl-wyroznik{ grid-template-columns:1fr; } .bl-wyroznik-foto img{ min-height:240px; } } @media (max-width:600px){ .bl-cta-akcje{ flex-direction:column; align-items:stretch; } .bl-cta-akcje .btn{ width:100%; } } .kt-hero{ background:var(--noc); color:#F6EDE4; padding:clamp(44px,6.5vw,80px) 0 clamp(36px,5vw,62px); text-align:center; } .kt-hero-eyebrow{ margin:0 0 10px; font-size:12.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--zloto); } .kt-hero-tytul{ font-family:"Outfit",Arial,serif; font-weight:400; font-style:italic; font-size:clamp(40px,6.5vw,72px); line-height:1; margin:0 0 14px; color:#FFFFFF; } .kt-hero-lead{ max-width:56ch; margin:0 auto 16px; font-size:clamp(15px,1.8vw,17px); line-height:1.7; color:#E4D6C6; } .kt-okruszki{ margin:0; font-size:13.5px; color:#C9B7A4; } .kt-okruszki a{ color:#E4D6C6; } .kt-okruszki span{ margin:0 7px; opacity:.6; } /* --- dwie kolumny: dane | formularz --- */ .kt-kolumny{ display:grid; grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr); gap:26px; align-items:start; } .kt-lista{ display:grid; gap:12px; min-width:0; } .kt-poz{ display:flex; gap:14px; align-items:center; background:var(--bialy); border:1px solid var(--line); border-radius:14px; padding:16px 18px; box-shadow:var(--cien); } .kt-poz-ikona{ flex:none; width:44px; height:44px; border-radius:12px; background:var(--akcent-jasny); display:grid; place-items:center; } .kt-poz-ikona svg{ width:20px; height:20px; stroke:var(--akcent-ciemny); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .kt-poz-etykieta{ margin:0 0 3px; font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .kt-poz > div > .kt-poz-wartosc{ margin:0; font-family:"Outfit",Arial,serif; font-size:18px; line-height:1.35; color:var(--ink); } .kt-poz-wartosc a{ color:var(--ink); } .kt-poz-wartosc .nw{ display:inline; } .kt-poz-mala{ margin:3px 0 0; font-size:13px; line-height:1.5; color:var(--muted); font-family:inherit; } @media (hover:hover) and (pointer:fine){ .kt-poz:hover{ border-color:var(--akcent); } .kt-poz-wartosc a:hover{ color:var(--akcent-ciemny); } } .kt-formbox{ background:var(--bialy); border:1px solid var(--line); border-radius:18px; padding:clamp(22px,2.6vw,32px); box-shadow:var(--cien2); min-width:0; } /* --- skroty pod kolumnami --- */ .kt-skroty{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:14px; } .kt-skrot{ display:block; background:var(--bialy); border:1px solid var(--line); border-radius:14px; padding:18px 18px 16px; box-shadow:var(--cien); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .kt-skrot b{ display:block; font-size:15px; margin-bottom:5px; color:var(--ink); } .kt-skrot span{ display:block; font-size:13.5px; line-height:1.55; color:var(--muted); } .kt-skrot em{ display:block; margin-top:8px; font-style:normal; font-size:13.5px; font-weight:700; color:var(--akcent-ciemny); } .kt-skrot em::after{ content:" \2192"; } @media (hover:hover) and (pointer:fine){ .kt-skrot:hover{ transform:translateY(-3px); box-shadow:var(--cien2); border-color:var(--akcent); } } /* --- ciemny pas na dole --- */ .kt-cta{ background:var(--noc); color:#F6EDE4; padding:clamp(40px,5.5vw,68px) 0; text-align:center; } .kt-cta-tyt{ font-family:"Outfit",Arial,serif; font-weight:500; font-size:clamp(24px,3.2vw,34px); line-height:1.2; margin:0 0 10px; color:#FFFFFF; } .kt-cta-lead{ max-width:54ch; margin:0 auto 22px; color:#E4D6C6; font-size:15.5px; line-height:1.65; } .kt-cta-akcje{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:0; } .kt-cta-akcje .btn{ width:auto; flex:0 0 auto; } @media (max-width:900px){ .kt-kolumny{ grid-template-columns:1fr; } } @media (max-width:600px){ .kt-cta-akcje{ flex-direction:column; align-items:stretch; } .kt-cta-akcje .btn{ width:100%; } } .pod-hero{ position:relative; isolation:isolate; padding:clamp(52px,7vw,96px) 0 clamp(44px,6vw,76px); text-align:center; color:#fff; background:var(--noc); overflow:hidden; } .pod-hero-foto{ position:absolute; inset:0; z-index:-2; } .pod-hero-foto img{ width:100%; height:100%; object-fit:cover; display:block; } .pod-hero::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(13,24,22,.80) 0%, rgba(13,24,22,.62) 45%, rgba(13,24,22,.84) 100%); } .pod-hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(120% 80% at 50% 50%, rgba(13,24,22,.50) 0%, rgba(13,24,22,.20) 70%, rgba(13,24,22,.16) 100%); } .pod-hero-tresc{ position:relative; } .pod-hero-eyebrow{ margin:0 0 10px; font-size:12.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--zloto); } .pod-hero-tytul{ font-family:"Outfit",Arial,serif; font-weight:400; font-style:italic; font-size:clamp(38px,6vw,68px); line-height:1.04; margin:0 0 14px; color:#FFFFFF; } .pod-hero-tytul--zwykly{ font-size:clamp(30px,4.4vw,48px); } .pod-hero-tytul em{ font-style:normal; color:var(--zloto); } .pod-hero-lead{ max-width:58ch; margin:0 auto 16px; font-size:clamp(15px,1.8vw,17.5px); line-height:1.7; color:#F3E7DA; } .pod-hero-okruszki{ margin:0; font-size:13.5px; color:#D8C7B5; } .pod-hero-okruszki a{ color:#F3E7DA; } .pod-hero-okruszki span{ margin:0 7px; opacity:.6; } @media (hover:hover) and (pointer:fine){ .pod-hero-okruszki a:hover{ color:#fff; } } /* Sekcja tuz pod hero nie potrzebuje juz gornego oddechu - hero go daje. */ .pod-hero + .sekcja{ padding-top:clamp(40px,5vw,64px); } .panel-powitanie{ justify-content:space-between; align-items:flex-start; } .panel-powitanie > div{ min-width:0; } .panel-powitanie #wyloguj{ flex:none; margin-top:4px; } .panel-menu .panel-zak--link{ padding:12px 13px; border-radius:10px; font:600 14.5px 'Plus Jakarta Sans', system-ui, sans-serif; color:var(--muted); margin-top:6px; padding-top:16px; border-top:1px solid var(--line2); } .panel-menu .panel-zak--link::after{ content:" \2197"; margin-left:auto; opacity:.6; } @media (hover:hover) and (pointer:fine){ .panel-menu .panel-zak--link:hover{ background:var(--kremowy2); color:var(--akcent-ciemny); } } /* --- PANEL: krotkie pola parami --------------------------------------------- zostalo dodane pod KASE, gdzie kazde pole ma isc przez cala szerokosc. W panelu dawalo to dziewiec pol w jednej kolumnie („Dane i adresy" ciagnely sie przez dwa ekrany). Tu wracamy do siatki dwukolumnowej; pola oznaczone (ulica, uwagi) dalej biora caly rzad. */ .panel-sekcja .formularz > .pole{ grid-column:auto; } .panel-sekcja .formularz > .pole.szeroko{ grid-column:1/-1; } .demo-konta .nota{ margin-top:12px; } .pe-edytor{ position:fixed; inset:0; width:100%; max-width:none; transform:none; background:var(--kremowy2); z-index:120; display:none; overflow:auto; border-radius:0; box-shadow:none; } .pe-edytor.open{ display:block; transform:none; } .pe-pasek{ position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:14px; background:var(--noc); color:#F6EDE4; padding:12px clamp(14px,3vw,26px); } .pe-wroc{ flex:none; width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:9px; background:rgba(255,255,255,.10); color:#F6EDE4; cursor:pointer; } .pe-wroc svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .pe-stan{ margin:0; font-weight:700; font-size:15px; } .pe-akcje{ margin-left:auto; display:flex; gap:10px; } .pe-btn{ border:1px solid rgba(255,255,255,.28); background:transparent; color:#F6EDE4; border-radius:9px; padding:9px 16px; font:600 14px 'Plus Jakarta Sans', system-ui, sans-serif; cursor:pointer; min-height:40px; } .pe-btn--zapisz{ background:var(--akcent); border-color:var(--akcent); color:#fff; } @media (hover:hover) and (pointer:fine){ .pe-wroc:hover{ background:rgba(255,255,255,.18); } .pe-btn:hover{ background:rgba(255,255,255,.12); } .pe-btn--zapisz:hover{ background:var(--akcent-ciemny); border-color:var(--akcent-ciemny); } } .pe-plocho{ padding:clamp(18px,3vw,32px) clamp(14px,3vw,26px) 60px; } .pe-uklad{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start; max-width:1180px; margin-inline:auto; } .pe-glowna, .pe-bok{ display:grid; gap:16px; min-width:0; } @media (min-width:981px){ .pe-bok{ position:sticky; top:14px; align-self:start; max-height:calc(100vh - 96px); overflow-y:auto; overscroll-behavior:contain; padding-right:4px; } .pe-bok::-webkit-scrollbar{ width:8px; } .pe-bok::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; } } /* Oczko w pasku edytora - jedyna droga do podgladu, gdy kolumny ustawia sie jedna pod druga i podglad zjedzie poza ekran. */ .pe-btn--oko{ display:inline-flex; align-items:center; gap:7px; } .pe-btn--oko svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .pe-btn--oko[aria-expanded="false"] svg{ opacity:.5; } @media (max-width:600px){ .pe-btn--oko span{ display:none; } } .pe-karta{ background:var(--bialy); border:1px solid var(--line); border-radius:14px; padding:20px 20px 22px; box-shadow:var(--cien); } .pe-tyt{ margin:0 0 14px; font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-size:15px; font-weight:700; color:var(--ink); } .pe-karta--groza{ border-color:rgba(101,68,11,.28); } .pe-pole{ display:block; margin-bottom:16px; } .pe-pole:last-child{ margin-bottom:0; } .pe-pole > span{ display:block; margin-bottom:6px; font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--muted); } .pe-pole input, .pe-pole select, .pe-pole textarea{ width:100%; font:inherit; font-size:15px; color:var(--ink); background:var(--kremowy); border:1px solid var(--line); border-radius:10px; padding:11px 13px; min-height:46px; } .pe-pole textarea{ min-height:120px; resize:vertical; line-height:1.6; } .pe-pole input:focus, .pe-pole select:focus, .pe-pole textarea:focus{ outline:2px solid var(--akcent); outline-offset:1px; } .pe-pole small{ display:block; margin-top:6px; font-size:12.5px; line-height:1.5; color:var(--muted2); } .pe-rzad{ display:flex; gap:16px; flex-wrap:wrap; } .pe-pole--waska{ flex:0 0 220px; margin-bottom:0; } .pe-pole--rosnie{ flex:1 1 260px; margin-bottom:0; } .pe-nota{ margin:12px 0 0; font-size:12.5px; line-height:1.55; color:var(--muted2); } .pe-kwota{ position:relative; display:block; } .pe-kwota em{ position:absolute; right:13px; top:50%; transform:translateY(-50%); font-style:normal; font-size:14px; color:var(--muted2); } .pe-kwota input{ padding-right:34px; } .pe-media{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; } .pe-media-podglad{ flex:none; width:104px; height:104px; border-radius:12px; border:1px dashed var(--line); background:var(--kremowy) center/cover no-repeat; } .pe-media-podglad.pusty::after{ content:"bez zdjęcia"; display:grid; place-items:center; height:100%; font-size:11.5px; color:var(--muted2); text-align:center; } .pe-przelacznik{ display:flex; align-items:center; gap:11px; padding:11px 0; border-top:1px solid var(--line2); font-size:14.5px; cursor:pointer; } .pe-karta > .pe-przelacznik:first-of-type{ border-top:0; padding-top:0; } .pe-przelacznik input{ flex:none; width:20px; height:20px; accent-color:var(--akcent); } .pe-serp{ background:var(--kremowy); border:1px solid var(--line2); border-radius:12px; padding:14px 16px; } .pe-serp-url{ margin:0 0 4px; font-size:12.5px; color:var(--muted2); } .pe-serp-tytul{ margin:0 0 4px; font-size:17px; line-height:1.3; color:#1a3ba3; } .pe-serp-opis{ margin:0; font-size:13.5px; line-height:1.55; color:var(--muted); } .pe-komunikat{ grid-column:1/-1; margin:0; } @media (max-width:980px){ .pe-uklad{ grid-template-columns:1fr; } .pe-bok{ order:-1; } } @media (max-width:600px){ .pe-akcje{ gap:8px; } .pe-btn{ padding:9px 12px; } .pe-stan{ font-size:14px; } } .ad-kafle{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr)); gap:12px; margin:18px 0 0; } .ad-kafel{ background:var(--kremowy); border:1px solid var(--line2); border-radius:14px; padding:16px 16px 14px; } .ad-kafel b{ display:block; font-family:"Outfit",Arial,serif; font-weight:500; font-size:clamp(22px,2.6vw,28px); line-height:1.1; color:var(--ink); } .ad-kafel span{ display:block; margin-top:6px; font-size:13.5px; font-weight:700; color:var(--ink); } .ad-kafel small{ display:block; margin-top:2px; font-size:12px; line-height:1.45; color:var(--muted); } .ad-podtytul{ margin:26px 0 12px; font-family:"Plus Jakarta Sans",system-ui,sans-serif; font-size:15px; font-weight:700; } .ad-lista{ list-style:none; margin:0; padding:0; display:grid; gap:8px; } .ad-wiersz{ width:100%; display:flex; align-items:center; gap:14px; text-align:left; background:var(--kremowy); border:1px solid var(--line2); border-radius:12px; padding:12px 14px; font:inherit; color:var(--ink); cursor:pointer; } .ad-wiersz-nr{ flex:1 1 auto; font-weight:700; font-size:14.5px; min-width:0; } .ad-wiersz-nr small{ display:block; font-weight:400; font-size:13px; color:var(--muted); } .ad-wiersz-kwota{ font-family:"Outfit",Arial,serif; font-size:16px; white-space:nowrap; } .ad-pusto{ color:var(--muted); font-size:14px; padding:14px 0; } .ad-filtry{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 12px; } .ad-filtr{ border:1px solid var(--line); background:var(--bialy); color:var(--ink); border-radius:999px; padding:8px 16px; min-height:40px; font:600 13.5px "Plus Jakarta Sans",system-ui,sans-serif; cursor:pointer; } .ad-filtr.akt{ background:var(--akcent); border-color:var(--akcent); color:#fff; } .ad-licznik{ margin:0 0 10px; font-size:13px; color:var(--muted2); } .ad-tabela td{ vertical-align:top; } .ad-kwota{ font-family:"Outfit",Arial,serif; font-size:16px; white-space:nowrap; } .ad-akcje-sekcji{ margin:16px 0 0; } .ad-szczegoly{ margin-top:20px; background:var(--kremowy); border:1px solid var(--line); border-radius:16px; padding:20px; } .ad-szczegoly-gora{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:6px; } .ad-szczegoly-gora h3{ margin:0; font-size:18px; } .ad-meta{ margin:0 0 16px; font-size:13.5px; color:var(--muted); } .ad-dwie{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; } .ad-dane{ margin:4px 0 0; font-size:14px; line-height:1.6; } .ad-pozycje{ list-style:none; margin:0 0 12px; padding:0; } .ad-pozycje li{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line2); font-size:14px; } .ad-pozycje li span:first-child{ flex:1 1 auto; min-width:0; } /* dluga nota przy pozycji sciskala „szt.” i kwote do kilkunastu pikseli na telefonie */ .ad-pozycje li > span:not(:first-child), .ad-pozycje li > b{ flex:none; white-space:nowrap; } .ad-pozycje small{ display:block; color:var(--muted); font-size:12.5px; } .ad-suma{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:14px; color:var(--muted); } .ad-suma--razem{ border-top:1px solid var(--line); margin-top:4px; padding-top:12px; color:var(--ink); font-size:15px; } .ad-suma--razem b{ font-family:"Outfit",Arial,serif; font-size:19px; } .ad-etap{ margin:18px 0 8px; } .ad-etapy{ display:flex; flex-wrap:wrap; gap:8px; } .ad-etap-btn{ border:1px solid var(--line); background:var(--bialy); color:var(--ink); border-radius:999px; padding:8px 15px; min-height:40px; font:600 13.5px "Plus Jakarta Sans",system-ui,sans-serif; cursor:pointer; } .ad-etap-btn.akt{ background:var(--akcent-jasny); border-color:var(--akcent); color:var(--akcent-ciemny); } .ad-przesylka{ margin:16px 0 0; max-width:340px; } .ad-akcje-szcz{ margin:14px 0 0; } @media (hover:hover) and (pointer:fine){ .ad-wiersz:hover, .ad-filtr:hover, .ad-etap-btn:hover{ border-color:var(--akcent); } } @media (max-width:640px){ .ad-dwie{ grid-template-columns:1fr; } } .pe-mini{ display:flex; flex-wrap:wrap; gap:8px; margin:-6px 0 16px; } .pe-mini span{ width:56px; height:56px; border-radius:8px; border:1px solid var(--line); background:var(--kremowy) center/cover no-repeat; } .pe-netto{ margin:10px 0 0; font-size:13.5px; font-weight:700; color:var(--akcent-ciemny); } .pe-etykieta{ margin:18px 0 8px; } .pe-opcje{ display:grid; gap:10px; } .pe-opcja{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 40px; gap:10px; align-items:end; background:var(--kremowy); border:1px solid var(--line2); border-radius:12px; padding:12px; } .pe-opcja .pe-pole{ margin-bottom:0; } .pe-opcja-usun{ width:40px; height:46px; border:1px solid var(--line); background:var(--bialy); border-radius:10px; font-size:20px; line-height:1; color:var(--muted); cursor:pointer; } .pe-siatka2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .pe-siatka2 .pe-pole{ margin-bottom:0; } .pe-dodatki .pe-przelacznik small{ display:block; font-size:12.5px; color:var(--muted2); font-weight:400; } @media (hover:hover) and (pointer:fine){ .pe-opcja-usun:hover{ border-color:var(--akcent); color:var(--akcent-ciemny); } } @media (max-width:700px){ .pe-opcja{ grid-template-columns:1fr; } .pe-opcja-usun{ width:100%; } .pe-siatka2{ grid-template-columns:1fr; } } .sa{ background:var(--kremowy2); min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; } .sa-pasek{ position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:16px; background:var(--noc); color:#F6EDE4; padding:10px clamp(14px,2.5vw,22px); } .sa-marka{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:15px; color:#fff; text-decoration:none; } .sa-marka .sa-marka-dopisek{ font-weight:400; color:#C9B7A4; } /* 8,1:1 na --noc; `.mute` mialby 1,8:1 */ .sa-marka svg{ width:20px; height:20px; stroke:var(--zloto); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .sa-szukaj{ flex:1 1 auto; max-width:520px; margin-inline:auto; position:relative; } .sa-szukaj input{ width:100%; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); border-radius:10px; color:#F6EDE4; font:inherit; font-size:14px; padding:9px 13px 9px 36px; min-height:40px; } .sa-szukaj input::placeholder{ color:#C9B7A4; } .sa-szukaj svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:17px; height:17px; stroke:#C9B7A4; fill:none; stroke-width:1.9; } .sa-konto{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:#E4D6C6; } .sa-awatar{ width:30px; height:30px; border-radius:8px; background:var(--akcent); color:#fff; display:grid; place-items:center; font-size:12.5px; font-weight:700; } .sa-wyloguj{ border:1px solid rgba(255,255,255,.24); background:transparent; color:#F6EDE4; border-radius:9px; padding:7px 13px; font:600 13px 'Plus Jakarta Sans',system-ui,sans-serif; cursor:pointer; min-height:36px; } .sa-uklad{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:0; align-items:start; flex:1 1 auto; } .sa-menu{ position:sticky; top:60px; align-self:start; padding:16px 12px 40px; display:grid; gap:3px; } .sa-poz{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; border:0; background:none; border-radius:9px; padding:10px 12px; font:600 14px 'Plus Jakarta Sans',system-ui,sans-serif; color:#EDE4DA; cursor:pointer; } /* jasny tekst na ciemnym pasku - 13,4:1 */ .sa-poz svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; } /* Aktywna pozycja to rozjasnienie tla, nie biala pigulka - na ciemnym pasku biale pole wygladaloby jak dziura. Biel na tym tle daje 12,4:1. */ .sa-poz.akt{ background:rgba(255,255,255,.10); color:#FFFFFF; box-shadow:none; } .sa-poz .sa-licznik{ margin-left:auto; background:var(--zloto); color:var(--ink); border-radius:999px; padding:2px 8px; font-size:12px; } /* 8,7:1 */ .sa-poz .sa-licznik:empty{ display:none; } @media (hover:hover) and (pointer:fine){ .sa-poz:hover{ background:rgba(255,255,255,.08); color:#FFFFFF; } .sa-wyloguj:hover{ background:rgba(255,255,255,.12); } } .sa-tresc{ padding:clamp(16px,2.4vw,26px) clamp(14px,2.4vw,26px) 60px; min-width:0; } .sa-naglowek{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; } .sa-naglowek h2{ margin:0; font-size:clamp(21px,2.6vw,26px); } .sa-naglowek .sa-akcje{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; } .sa-opis{ margin:-8px 0 16px; font-size:14px; line-height:1.6; color:var(--muted); max-width:78ch; } .sa-karta{ background:var(--bialy); border:1px solid var(--line); border-radius:14px; padding:18px 18px 20px; box-shadow:var(--cien); margin-bottom:16px; } .sa-karta > h3{ margin:0 0 12px; font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:15px; font-weight:700; } .sa-filtr-rzad{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; } .sa-szukajka{ flex:1 1 240px; min-width:0; } .sa-szukajka input{ width:100%; font:inherit; font-size:14px; background:var(--kremowy); border:1px solid var(--line); border-radius:10px; padding:10px 13px; min-height:44px; } @media (max-width:900px){ .sa-uklad{ grid-template-columns:1fr; } .sa-menu{ position:static; display:flex; overflow-x:auto; gap:6px; padding:10px 12px; scrollbar-width:none; } .sa-menu::-webkit-scrollbar{ display:none; } .sa-poz{ width:auto; white-space:nowrap; min-height:44px; } .sa-poz .sa-licznik{ margin-left:6px; } .sa-szukaj{ display:none; } } .sa-tresc .panel-sekcja h2{ font-size:clamp(21px,2.6vw,26px); margin:0 0 6px; } .sa-tresc .panel-sekcja > .mute{ margin:0 0 16px; font-size:14px; line-height:1.6; max-width:78ch; } .sa-tresc .tabela-otoczka, .sa-tresc .pp-tabela-okno{ background:var(--bialy); border:1px solid var(--line); border-radius:14px; box-shadow:var(--cien); overflow:hidden; overflow-x:auto; } .sa-tresc .tabela{ margin:0; } .sa-tresc .ad-filtry{ margin-top:0; } .sa-tresc .pp-gora{ margin-bottom:14px; } .sa-tresc .ad-kafle{ margin-top:0; } .sa-tresc .ad-szczegoly{ background:var(--bialy); box-shadow:var(--cien); } /* --- panel sklepu: kreska przy menu ----------------------------------------- */ .sa-uklad{ background:linear-gradient(to right, var(--noc) 0 236px, transparent 236px); } @media (max-width:900px){ .sa-uklad{ background:none; } .sa-menu{ background:var(--noc); border-bottom:0; } } /* --- panel sklepu: pasek i tabele na telefonie ------------------------------ */ .sa-marka, .sa-wyloguj, .sa-konto span{ white-space:nowrap; } /* bez tego kolumny scieraja sie do jednej litery w pionie - okno i tak przewija w bok */ .sa-tresc .ad-tabela{ min-width:620px; } .sa-tresc .ad-tabela th{ white-space:nowrap; } /* naglowki nie lamia sie na „SZTU / K" */ @media (max-width:900px){ .sa-pasek{ padding:8px 12px; gap:10px; } .sa-marka-dopisek{ display:none; } .sa-konto .tb-chowaj{ display:none; } .sa-tresc{ padding-inline:12px; } } /* --- akcje w hero (zamiast osobnej sekcji z przyciskami w pustce) ----------- */ .pod-hero-akcje{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:24px 0 0; } .pod-hero-akcje .btn{ width:auto; flex:0 0 auto; } .pod-hero-akcje + .pod-hero-okruszki{ margin-top:22px; } .pod-hero-akcje .btn--obrys{ background:rgba(14,26,24,.55); border-color:rgba(255,255,255,.8); color:#fff; } @media (hover:hover) and (pointer:fine){ .pod-hero-akcje .btn--obrys:hover{ background:rgba(14,26,24,.78); border-color:#fff; } } /* --- dwie kolumny tresc + zdjecie (odpowiednik `.duet` ze strony glownej) --- */ .df-duet{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(24px,4vw,54px); align-items:center; } .df-duet h2{ font-size:clamp(26px,4vw,42px); margin-bottom:14px; } .df-duet-foto{ border-radius:16px; overflow:hidden; background:var(--kremowy2); } .df-duet-foto img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; } @media (max-width:1000px){ .df-duet{ grid-template-columns:1fr; } .df-duet-foto{ order:-1; } } /* --- ZAKLADKI SYTUACJI: kafle ze strony glownej pelnia role przelacznika ---- */ .kafel--btn{ border:0; padding:0; width:100%; cursor:pointer; font:inherit; text-align:left; } .kafel--btn[aria-pressed="true"]{ box-shadow:0 0 0 3px var(--akcent); } .kafel--btn[aria-pressed="true"] span{ color:#fff; } .dfz-panel{ margin-top:clamp(18px,2.6vw,26px); background:var(--bialy); border:1px solid var(--line); border-radius:18px; box-shadow:var(--cien); overflow:hidden; display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); align-items:stretch; } .dfz-panel > .dfz-foto{ background:var(--kremowy2); } .dfz-foto img{ width:100%; height:100%; min-height:220px; object-fit:cover; display:block; } .dfz-tresc{ padding:clamp(20px,2.6vw,30px); } .dfz-tresc h3{ font-family:"Outfit",Arial,serif; font-weight:500; font-size:clamp(21px,2.6vw,27px); margin:0 0 10px; } .dfz-tresc p{ margin:0 0 14px; color:var(--muted); font-size:15.5px; line-height:1.7; } .dfz-lista{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; gap:8px; } .dfz-lista li{ background:var(--kremowy); border:1px solid var(--line2); border-radius:100px; padding:7px 14px; font-size:13.5px; color:var(--ink); } .dfz-akcja{ margin:0; } body.bez-js .dfz-panel[hidden]{ display:grid !important; } @media (max-width:820px){ .dfz-panel{ grid-template-columns:1fr; } .dfz-foto img{ min-height:200px; max-height:260px; } } /* --- KONFIGURATOR PRODUKTU FIRMOWEGO ------------------------------------------ */ .dfk{ display:grid; grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:clamp(22px,3.4vw,44px); align-items:start; } /* Podglad jedzie razem z ustawieniami - prawa kolumna jest o ~700 px dluzsza, wiec bez tego pod produktem zostawala pusta plama na pol ekranu. */ /* 132 px = wysokosc przyklejonego naglowka (118) plus oddech; ta sama liczba, co `scroll-padding-top` w arkuszu - inaczej podglad chowa sie pod menu. */ @media (min-width:901px){ .dfk-lewa{ position:sticky; top:132px; } } .dfk-podglad{ position:relative; border-radius:18px; overflow:hidden; background:var(--kremowy2); box-shadow:var(--cien2); } .dfk-podglad img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; } .dfk-arkusz{ position:absolute; left:clamp(14px,5%,28px); right:clamp(14px,5%,28px); bottom:clamp(14px,5%,28px); background:rgba(255,255,255,.95); border-radius:14px; padding:16px 16px 18px; text-align:center; } .dfk-znak{ width:66px; height:66px; margin:0 auto 12px; border:1px dashed var(--line); border-radius:12px; display:grid; place-items:center; text-align:center; font-size:9.5px; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:6px; } .dfk-nazwa{ display:block; font-family:"Outfit",Arial,serif; font-weight:500; font-size:clamp(19px,2.4vw,25px); line-height:1.15; color:var(--ink); word-break:break-word; } .dfk-haslo{ display:block; margin-top:6px; font-size:13px; letter-spacing:.06em; color:var(--muted); word-break:break-word; } .dfk-plakietka{ position:absolute; top:14px; left:14px; background:rgba(16,32,29,.82); color:#fff; border-radius:100px; padding:6px 13px; font-size:12px; font-weight:600; } .dfk-prawa{ display:grid; gap:16px; min-width:0; } .dfk-prawa > *{ min-width:0; } .dfk-pasek{ min-width:0; } .dfk-krok{ background:var(--bialy); border:1px solid var(--line); border-radius:16px; padding:20px 20px 22px; box-shadow:var(--cien); } .dfk-tyt{ margin:0 0 12px; font-family:"Outfit",Arial,serif; font-weight:500; font-size:20px; } .dfk-pasek{ display:flex; gap:10px; overflow-x:auto; padding:2px 2px 8px; scroll-snap-type:x proximity; } .dfk-pasek::-webkit-scrollbar{ height:6px; } .dfk-pasek::-webkit-scrollbar-thumb{ background:var(--line); border-radius:100px; } .dfk-linia{ flex:0 0 128px; scroll-snap-align:start; border:1px solid var(--line); border-radius:14px; background:var(--kremowy); padding:8px 8px 10px; cursor:pointer; font:inherit; color:var(--ink); text-align:left; transition:border-color .18s ease, background .18s ease, transform .18s ease; } .dfk-linia img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; display:block; margin-bottom:8px; } .dfk-linia b{ display:block; font-size:13px; line-height:1.3; } .dfk-linia small{ display:block; margin-top:3px; font-size:12px; color:var(--muted); } .dfk-linia.akt{ border-color:var(--akcent); background:var(--akcent-jasny); box-shadow:inset 0 0 0 1px var(--akcent); } .dfk-linia.akt small{ color:var(--akcent-ciemny); } @media (hover:hover) and (pointer:fine){ .dfk-linia:hover{ border-color:var(--akcent); transform:translateY(-2px); } } .dfk-pola{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .dfk-pola .pole{ margin:0; } @media (max-width:620px){ .dfk-pola{ grid-template-columns:1fr; } } .dfk-tabela{ margin-top:14px; border-top:1px solid var(--line2); padding-top:10px; } .dfk-tabela > summary{ cursor:pointer; font-weight:600; font-size:14px; color:var(--akcent-ciemny); list-style:none; min-height:var(--tap); display:flex; align-items:center; gap:8px; } .dfk-tabela > summary::-webkit-details-marker{ display:none; } .dfk-tabela > summary::after{ content:'+'; font-size:18px; } .dfk-tabela[open] > summary::after{ content:'-'; } .dfk-podsum{ background:var(--akcent-jasny); border:1px solid var(--akcent); border-radius:16px; padding:20px 20px 22px; } .dfk-zdanie{ margin:0 0 14px; font-size:16px; line-height:1.65; color:var(--ink); } .dfk-zdanie b{ font-weight:700; } .dfk-cena{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin:0 0 16px; padding-top:14px; border-top:1px solid rgba(101,68,11,.25); font-size:14.5px; color:var(--akcent-ciemny); } .dfk-cena b{ font-family:"Outfit",Arial,serif; font-weight:500; font-size:19px; color:var(--ink); } .dfk-akcje{ margin:0; display:flex; justify-content:center; } .dfk-podsum .nota{ text-align:center; max-width:64ch; margin-inline:auto; } @media (max-width:900px){ .dfk{ grid-template-columns:1fr; } } /* --- OS PIECIU KROKOW (klikana) -------------------------------------------- */ .pasek-przewijany{ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent); } .pasek-przewijany[data-koniec]{ -webkit-mask-image:none; mask-image:none; } .dfs-tor{ display:flex; gap:6px; overflow-x:auto; padding:2px 2px 10px; } .dfs-krok{ flex:1 1 0; min-width:132px; border:0; background:none; cursor:pointer; font:inherit; text-align:center; padding:0; color:var(--muted); } .dfs-kolo{ width:44px; height:44px; margin:0 auto 8px; border-radius:50%; background:var(--kremowy2); border:1px solid var(--line); display:grid; place-items:center; font-weight:700; font-size:15px; color:var(--ink); transition:background .2s ease, color .2s ease, border-color .2s ease; } .dfs-krok b{ display:block; font-size:13.5px; line-height:1.35; color:var(--ink); font-weight:600; } .dfs-krok.akt .dfs-kolo{ background:var(--akcent); border-color:var(--akcent); color:#fff; } .dfs-krok.zrobiony .dfs-kolo{ background:var(--akcent-jasny); border-color:var(--akcent); color:var(--akcent-ciemny); } @media (hover:hover) and (pointer:fine){ .dfs-krok:hover .dfs-kolo{ border-color:var(--akcent); } } .dfs-pasek{ height:4px; border-radius:100px; background:var(--kremowy2); overflow:hidden; margin:0 0 18px; } .dfs-pasek i{ display:block; height:100%; background:var(--akcent); border-radius:100px; transition:width .35s ease; } .dfs-opisy{ display:grid; gap:12px; } .dfs-opis{ background:var(--bialy); border:1px solid var(--line); border-radius:16px; padding:20px 22px 22px; box-shadow:var(--cien); } .dfs-opis h3{ font-family:"Outfit",Arial,serif; font-weight:500; font-size:21px; margin:0 0 8px; } .dfs-opis p{ margin:0; color:var(--muted); font-size:15.5px; line-height:1.7; } .dfs-opis p + p{ margin-top:10px; } /* bez skryptu widac wszystkie piec opisow - jak wyzej, przez `.bez-js` */ body.bez-js .dfs-opis[hidden]{ display:block !important; } /* --- lista „czego potrzebujemy" z podswietleniem wiersza ------------------- */ .df-wymagania{ list-style:none; margin:0; padding:0; display:grid; gap:8px; } .df-wymagania li{ background:var(--bialy); border:1px solid var(--line2); border-radius:12px; padding:13px 16px; font-size:15px; line-height:1.6; color:var(--muted); transition:border-color .18s ease, transform .18s ease; } .df-wymagania li b{ color:var(--ink); } @media (hover:hover) and (pointer:fine){ .df-wymagania li:hover{ border-color:var(--akcent); transform:translateX(3px); } .df-box:hover{ border-color:var(--akcent); } } .df-box{ transition:border-color .18s ease; } .pe-gal-gora{ display:flex; align-items:baseline; gap:10px; margin:18px 0 8px; } .pe-gal-tyt{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .pe-gal-licznik{ margin-left:auto; font-size:12.5px; color:var(--muted); } .pe-galeria{ display:grid; gap:8px; } .pe-slot{ display:flex; align-items:center; gap:10px; background:var(--kremowy); border:1px solid var(--line2); border-radius:12px; padding:8px 10px; } .pe-slot-nr{ flex:none; width:22px; text-align:center; font-size:12.5px; font-weight:700; color:var(--muted); } .pe-slot-foto{ flex:none; width:46px; height:46px; border-radius:9px; border:1px solid var(--line); background:var(--bialy) center/cover no-repeat; } .pe-slot-foto.pusty{ background:var(--kremowy2); border-style:dashed; } .pe-slot-pole{ flex:1 1 auto; min-width:0; margin-bottom:0; } .pe-slot-pole input{ min-height:40px; font-size:13.5px; } .pe-slot-akcje{ flex:none; display:flex; gap:4px; } .pe-slot-btn{ width:32px; height:40px; border:1px solid var(--line); background:var(--bialy); border-radius:9px; font-size:14px; line-height:1; color:var(--muted); cursor:pointer; } .pe-slot-usun{ font-size:18px; } .pe-gal-akcje{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:10px 0 0; } .pe-gal-akcje .btn[disabled]{ opacity:.5; cursor:not-allowed; } .pe-gal-info{ font-size:12.5px; color:var(--akcent-ciemny); } .pe-pod-gal{ display:block; margin-top:8px; font-size:12.5px; line-height:1.55; color:var(--muted); } @media (hover:hover) and (pointer:fine){ .pe-slot:hover{ border-color:var(--line); } .pe-slot-btn:hover{ border-color:var(--akcent); color:var(--akcent-ciemny); } } @media (max-width:620px){ .pe-slot{ flex-wrap:wrap; } .pe-slot-pole{ flex:1 1 100%; order:3; } } .pe-media-podglad{ position:relative; cursor:pointer; display:grid; place-items:center; background-size:cover; background-position:center; } .pe-media-znak{ font-size:11px; line-height:1.35; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:center; } .pe-media-podglad.ma-foto .pe-media-znak{ display:none; } .pe-media-podglad.nad{ border-color:var(--akcent); box-shadow:inset 0 0 0 2px var(--akcent); } .pe-slot-foto{ cursor:pointer; } .pe-slot-foto.nad{ border-color:var(--akcent); box-shadow:0 0 0 2px var(--akcent); } .pe-plik-chip{ display:block; background:var(--akcent-jasny); border:1px solid var(--akcent); border-radius:10px; padding:11px 14px; font-size:13.5px; font-weight:600; color:var(--akcent-ciemny); min-height:var(--tap); display:flex; align-items:center; } .pe-zrzut{ display:grid; gap:3px; justify-items:center; text-align:center; cursor:pointer; margin-top:10px; padding:16px 14px; border:1px dashed var(--line); border-radius:12px; background:var(--kremowy); transition:border-color .18s ease, background .18s ease; } .pe-zrzut b{ font-size:14px; } .pe-zrzut span{ font-size:12.5px; color:var(--muted); } .pe-zrzut.nad{ border-color:var(--akcent); background:var(--akcent-jasny); } @media (hover:hover) and (pointer:fine){ .pe-zrzut:hover{ border-color:var(--akcent); } .pe-media-podglad:hover{ border-color:var(--akcent); } } .pe-wiersze{ display:grid; gap:8px; } .pe-wiersz{ display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr) auto; gap:8px; align-items:center; background:var(--kremowy); border:1px solid var(--line2); border-radius:12px; padding:8px 10px; } .pe-wiersz .pe-pole{ margin-bottom:0; } .pe-wiersz input{ min-height:42px; font-size:14px; } .pe-wiersz-akcje{ display:flex; gap:4px; } .pe-wiersz-btn{ width:32px; height:42px; border:1px solid var(--line); background:var(--bialy); border-radius:9px; font-size:14px; line-height:1; color:var(--muted); cursor:pointer; } .pe-wiersz-usun{ font-size:18px; } .pe-szablon{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0 0; } .pe-szablon-info{ font-size:12.5px; color:var(--muted); } .pe-gal-tyt + .pe-wiersze{ margin-top:6px; } @media (hover:hover) and (pointer:fine){ .pe-wiersz-btn:hover{ border-color:var(--akcent); color:var(--akcent-ciemny); } } @media (max-width:700px){ .pe-wiersz{ grid-template-columns:1fr auto; } .pe-wiersz .pe-pole--wartosc{ grid-column:1/-1; order:3; } } .pp-kol-zazn{ width:44px; text-align:center; } .pp-tabela th{ white-space:nowrap; } .pp-kol-zazn input{ width:18px; height:18px; accent-color:var(--akcent); cursor:pointer; } .pp-wiersz-zazn{ background:#FCF4EF; box-shadow:inset 3px 0 0 var(--akcent); } .pp-sku{ font-size:13px; color:var(--muted); white-space:nowrap; } .pp-zbiorczo{ background:var(--akcent-jasny); border:1px solid var(--akcent); border-radius:14px; padding:14px 16px 16px; margin-bottom:14px; } .pp-zbiorczo-info{ margin:0 0 10px; font-size:14px; color:var(--akcent-ciemny); } .pp-zbiorczo-info b{ font-size:16px; color:var(--ink); } .pp-zbiorczo-akcje{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .pp-zbiorczo-pole{ margin:0; min-width:220px; } .pp-zbiorczo-wartosc{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .pp-zbiorczo-wartosc em{ font-style:normal; font-size:13px; color:var(--akcent-ciemny); } .pp-zbiorczo-wartosc input, .pp-zbiorczo-wartosc select{ min-height:44px; font:inherit; font-size:14px; background:var(--bialy); border:1px solid var(--line); border-radius:10px; padding:10px 12px; min-width:150px; } .pp-zbiorczo .pe-nota{ margin-top:10px; color:var(--akcent-ciemny); } @media (max-width:700px){ .pp-zbiorczo-akcje{ flex-direction:column; align-items:stretch; } .pp-zbiorczo-wartosc{ flex-direction:column; align-items:stretch; } } .wybor-nazwa{ font-weight:600; color:var(--muted); } .kolka{ display:flex; gap:10px; flex-wrap:wrap; margin:2px 0 8px; } .kolko{ width:34px; height:34px; min-width:34px; padding:0; border-radius:50%; border:1px solid var(--line); cursor:pointer; position:relative; box-shadow:inset 0 0 0 2px #fff; transition:transform .12s ease, box-shadow .12s ease; } .kolko:hover{ transform:scale(1.06); } /* Obwodka zamiast zmiany koloru - inaczej nie widac, ktory odcien jest wybrany. */ .kolko.akt{ box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px var(--ink); } .kolko:focus-visible{ outline:2px solid var(--akcent); outline-offset:3px; } .kolka::before{ content:''; } .kolko::after{ content:''; position:absolute; inset:-5px; border-radius:50%; } .kolko--aukcja{ display:inline-block; } .chip-rozm--brak{ text-decoration:line-through; cursor:not-allowed; color:var(--muted); border-color:var(--muted2); } .chip-rozm--brak:hover{ background:transparent; border-color:var(--muted2); color:var(--muted); } .kolko--brak{ cursor:not-allowed; box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 40px rgba(247,248,247,.45); border-color:var(--muted2); } .kolko--brak:hover{ transform:none; } .kolko--brak::before{ content:''; position:absolute; left:-4px; right:-4px; top:50%; height:6px; margin-top:-3px; border-radius:3px; transform:rotate(-45deg); background:linear-gradient(#F7F8F7 0 2px, #10201D 2px 4px, #F7F8F7 4px 6px); } /* Zdanie pod kolkami: opis wariantu albo powod wygaszenia. */ .nota--kolor{ margin-top:6px; color:var(--muted); } .btn--nieczynny{ cursor:not-allowed; } .nota--brak-ceny{ color:var(--akcent-ciemny); font-weight:600; } .btn--nieczynny{ background:var(--kremowy2); border-color:var(--muted2); color:var(--muted); cursor:not-allowed; } .btn--nieczynny:hover{ background:var(--kremowy2); border-color:var(--muted2); color:var(--muted); } .pe-gal-gora--kolory{ margin-top:16px; } .pe-kolory-foto{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px; } .pe-kolor{ border:1px solid var(--line); border-radius:12px; background:var(--bialy); } .pe-kolor-glowa{ display:flex; align-items:center; gap:10px; padding:8px 10px; } .pe-kolor-kropka{ width:22px; height:22px; min-width:22px; border-radius:50%; border:1px solid var(--line); box-shadow:inset 0 0 0 1px #fff; } .pe-kolor-nazwa{ font-size:13.5px; color:var(--ink); font-weight:600; } .pe-kolor-znacznik{ font-size:12.5px; color:var(--muted); } .pe-kolor-akcje{ display:flex; align-items:center; gap:6px; margin-left:auto; } .pe-kolor-tresc{ border-top:1px solid var(--line); padding:12px 12px 14px; display:flex; flex-direction:column; gap:12px; } .pe-kolor-tresc[hidden]{ display:none; } .pe-pole--hex{ max-width:264px; } .pe-pole .pe-hex-para{ display:flex; gap:8px; align-items:center; flex-wrap:nowrap; } .pe-pole .pe-hex-para input[type="text"]{ flex:1 1 auto; width:auto; min-width:0; min-height:44px; font:inherit; font-size:13.5px; background:var(--bialy); border:1px solid var(--line); border-radius:10px; padding:10px 12px; } .pe-pole .pe-hex-para input[type="color"]{ flex:0 0 44px; width:44px; height:44px; padding:2px; border:1px solid var(--line); border-radius:10px; background:var(--bialy); cursor:pointer; } .pe-pole .pe-hex-para input.zle{ border-color:var(--akcent-ciemny); } .pe-k-rozmiary{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:0; } .pe-k-rozmiary legend{ font-size:12.5px; color:var(--muted); padding:0 4px; } .pe-ptaszek{ display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-right:16px; font-size:13.5px; color:var(--ink); cursor:pointer; } .pe-k-rozmiary small{ display:block; font-size:12.5px; line-height:1.55; color:var(--muted2); } .pe-k-fotki{ display:flex; flex-direction:column; gap:8px; } .pe-k-foto-wiersz{ display:flex; align-items:center; gap:6px; } .pe-k-foto{ flex:1; min-width:0; min-height:44px; font:inherit; font-size:13.5px; background:var(--bialy); border:1px solid var(--line); border-radius:10px; padding:10px 12px; } .pe-k-wklej, .pe-k-opis{ width:100%; min-height:60px; font:inherit; font-size:13.5px; background:var(--bialy); border:1px solid var(--line); border-radius:10px; padding:10px 12px; resize:vertical; } .pe-kolor-dodaj{ display:flex; flex-direction:column; gap:14px; margin-top:10px; padding:14px; border:1px dashed var(--muted2); border-radius:12px; } .pe-kolor-dodaj-blok{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; } .pe-kolor-dodaj-blok--wlasny{ border-top:1px solid var(--line); padding-top:14px; } .pe-kolor-dodaj-blok > .pe-pole{ flex:1 1 200px; margin:0; } .pe-kolor-dodaj-blok > .pe-pole--hex{ flex:0 0 264px; } /* Etykieta stoi nad polem, wiec przycisk rownamy do DOLU rzedu - inaczej wisi w powietrzu. */ .pe-kolor-dodaj-blok > .btn{ flex:0 0 auto; margin-bottom:1px; } .pe-kolor-dodaj select{ min-height:44px; } .pe-kolor-komunikat{ margin:8px 0 0; font-size:12.5px; line-height:1.55; color:var(--muted); } .pe-kolor-komunikat.zle{ color:var(--akcent-ciemny); font-weight:600; } @media (max-width:700px){ .pe-kolor-glowa{ flex-wrap:wrap; } .pe-kolor-akcje{ margin-left:0; width:100%; } .pe-kolor-znacznik{ flex:1 0 100%; } .pe-pole--hex{ max-width:none; flex:1 0 100%; } .pe-kolor-dodaj-blok > .pe-pole--hex{ flex:1 0 100%; } .pe-kolor-dodaj-blok > .btn{ flex:1 0 100%; } } .kupilo{ margin:6px 0 0; font-size:13.5px; color:var(--akcent-ciemny); } .kupilo b{ font-size:15px; color:var(--ink); } .dodatek-cena s{ color:var(--muted); font-weight:400; margin-right:4px; } .dodatek-gratis{ color:#12492B; background:#E6F4EC; border-radius:100px; padding:2px 9px; font-size:12.5px; font-weight:700; } .dfk-opis{ margin-top:14px; padding:16px 18px; background:var(--kremowy); border:1px solid var(--line); border-radius:14px; } .dfk-opis-etykieta{ margin:0; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--akcent-ciemny); } .dfk-opis-tyt{ margin:4px 0 6px; font-size:20px; } .dfk-opis-tresc{ margin:0; font-size:15px; line-height:1.6; color:var(--ink); } .dfk-opis-cena{ margin:10px 0 0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } .dfk-opis-cena b{ font-size:22px; color:var(--akcent-ciemny); } .dfk-opis-cena span{ font-size:12.5px; color:var(--muted); } .dfk-opis .nota{ margin-top:10px; } .pp-kol-foto{ width:108px; } .pp-mini{ display:block; width:76px; height:76px; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:var(--kremowy2); } .pp-tabela td.pp-kol-foto{ padding:10px 8px 10px 16px; } /* Produkt bez zdjecia: pusty kafelek z napisem, zeby wiersz nie skakal i zeby bylo widac, ze zdjecia BRAKUJE - a nie zeby udawac, ze jest. */ .pp-mini--brak{ display:flex; align-items:center; justify-content:center; text-align:center; font-size:11px; line-height:1.2; color:var(--muted); padding:4px; } .ad-znaki{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:3px; } .ad-sku{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; letter-spacing:.02em; background:var(--kremowy2); color:var(--ink); border-radius:6px; padding:2px 8px; } .ad-sku--brak{ background:#FDF0E3; color:#6B3E0A; font-weight:700; font-family:inherit; font-size:11.5px; letter-spacing:0; } .ad-wariant{ font-size:12px; color:var(--muted); } /* ============================================================================ KONFIGURATOR PRODUKTU (wzor ukladu: edytor projektu online) Uklad jak w programie graficznym: narzedzia po lewej, plotno na srodku, ustawienia i warstwy po prawej. Na telefonie kolumny ida jedna pod druga, a pasek narzedzi kladzie sie w poziomie nad plotnem. ============================================================================ */ /* Ostrzezenie o wzoru zlewajacym sie z produktem - informacja produkcyjna, nie estetyczna. */ .kf-ostrzezenie{ margin:0 auto 12px; padding:12px 16px; background:#FDF0E3; color:#6B3E0A; border:1px solid #E8C9A0; border-radius:12px; font-size:14px; font-weight:600; line-height:1.5; } .kf-gora{ display:flex; gap:20px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; padding-top:34px; } .kf-tytul{ margin:6px 0 8px; font-size:clamp(28px, 4vw, 40px); } .kf-lead{ margin:0; max-width:56ch; color:var(--muted); line-height:1.6; } .kf-gora-akcje{ display:flex; gap:8px; flex-wrap:wrap; } .kf-uklad{ display:grid; grid-template-columns:110px minmax(0,1fr) 330px; gap:20px; max-width:1400px; align-items:start; padding-bottom:56px; } /* --- lewy pasek narzedzi --- */ .kf-narzedzia{ display:flex; flex-direction:column; gap:8px; position:sticky; top:132px; } .kf-narzedzie{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 6px; min-height:78px; background:var(--bialy); border:1px solid var(--line); border-radius:14px; cursor:pointer; font:inherit; font-size:12.5px; font-weight:600; color:var(--ink); text-align:center; transition:border-color .15s, background .15s; } .kf-narzedzie:hover{ border-color:var(--akcent); background:var(--akcent-jasny); } .kf-n-ikona{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background:var(--kremowy2); font-size:17px; } /* --- plotno --- */ .kf-nazwa-produktu{ margin:0 0 8px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--akcent-ciemny); } .kf-plotno{ position:relative; background:var(--kremowy2); border:1px solid var(--line); border-radius:16px; overflow:hidden; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; } .kf-plotno{ background:var(--kremowy); } .kf-plotno--mockup{ background:#FFFFFF; } .kf-produkt{ position:absolute; inset:0; } .kf-produkt svg{ width:100%; height:100%; } .kf-pole{ position:absolute; left:27%; top:31%; width:44%; height:44%; border:2px dashed var(--akcent); border-radius:4px; } .kf-pusto{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); margin:0; padding:8px 14px; background:rgba(255,255,255,.92); border-radius:100px; font-size:13px; color:var(--ink); white-space:nowrap; } .kf-el{ position:absolute; cursor:grab; border:1px solid transparent; } .kf-el:hover{ border-color:rgba(101,68,11,.5); } .kf-el.akt{ border-color:var(--akcent); border-style:dashed; } .kf-el--zamek{ cursor:not-allowed; } .kf-el img{ display:block; width:100%; height:auto; } .kf-el:focus-visible{ outline:2px solid var(--akcent); outline-offset:2px; } /* Uchwyt skalowania. 18 px to minimum, ktore da sie zlapac palcem na telefonie. */ .kf-uchwyt{ position:absolute; right:-9px; bottom:-9px; width:18px; height:18px; background:var(--akcent); border:2px solid #fff; border-radius:50%; cursor:nwse-resize; } /* --- prawy panel --- */ .kf-panel{ display:flex; flex-direction:column; gap:14px; position:sticky; top:132px; } .kf-blok{ background:var(--bialy); border:1px solid var(--line); border-radius:16px; padding:16px 18px; } .kf-blok-tyt{ margin:0 0 10px; font-size:14px; letter-spacing:.04em; text-transform:uppercase; font-family:var(--font-tekst, inherit); font-weight:700; color:var(--ink); } .kf-ilosc{ display:flex; align-items:center; gap:8px; } .kf-ilosc button{ width:44px; height:44px; font-size:20px; background:var(--kremowy); border:1px solid var(--line); border-radius:10px; cursor:pointer; color:var(--ink); } .kf-ilosc input{ flex:1; min-width:0; height:44px; text-align:center; font:inherit; font-size:16px; border:1px solid var(--line); border-radius:10px; background:var(--bialy); } .kf-cena-w{ display:flex; justify-content:space-between; gap:12px; margin:0 0 8px; font-size:14px; color:var(--muted); } .kf-cena-w b{ color:var(--ink); } .kf-cena-w--razem{ padding-top:10px; border-top:1px solid var(--line2); font-size:16px; } .kf-cena-w--razem b{ font-size:20px; color:var(--akcent-ciemny); } .kf-kup{ width:100%; margin-top:12px; } /* --- warstwy --- */ .kf-warstwy{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; } .kf-warstwa{ display:flex; align-items:center; gap:6px; background:var(--kremowy); border:1px solid var(--line); border-radius:10px; padding:4px 6px 4px 4px; } .kf-warstwa.akt{ border-color:var(--akcent); background:var(--akcent-jasny); } .kf-warstwa--pusto{ display:block; padding:12px; font-size:13px; color:var(--muted); background:transparent; border-style:dashed; } .kf-w-nazwa{ display:flex; align-items:center; gap:8px; flex:1; min-width:0; padding:6px; background:none; border:0; cursor:pointer; font:inherit; font-size:13px; color:var(--ink); text-align:left; } .kf-w-nazwa span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .kf-w-ikona{ display:flex; align-items:center; justify-content:center; width:24px; height:24px; min-width:24px; background:var(--bialy); border:1px solid var(--line); border-radius:6px; font-size:12px; font-weight:700; } .kf-w-akcje{ display:flex; gap:1px; } .kf-w-akcje button{ width:26px; height:30px; background:none; border:0; cursor:pointer; font-size:12px; color:var(--muted); border-radius:6px; } .kf-w-akcje button:hover{ background:var(--bialy); color:var(--ink); } /* --- okna --- */ .kf-okno{ position:fixed; inset:0; z-index:100; display:flex; align-items:flex-start; justify-content:center; padding:16px; background:rgba(16,32,29,.5); overflow:hidden; overscroll-behavior:contain; } .kf-okno-karta{ width:100%; max-width:460px; margin:auto; background:var(--bialy); border-radius:18px; padding:0 24px 24px; max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain; } .kf-okno-karta--szeroka{ max-width:760px; } .kf-okno-gora{ position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 -24px 14px; padding:18px 24px 12px; background:var(--bialy); border-radius:18px 18px 0 0; border-bottom:1px solid var(--line2); } /* Gdy okno jest otwarte, tlo pod nim ma stac w miejscu - inaczej przewijanie rusza strone zamiast okna i wyglada to jak zaciecie. */ body.kf-blokada{ overflow:hidden; } .kf-okno-gora h2{ margin:0; font-size:20px; } .kf-okno-x{ width:36px; height:36px; background:var(--kremowy); border:1px solid var(--line); border-radius:10px; cursor:pointer; font-size:14px; color:var(--ink); } .kf-okno-akcje{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 0; } .kf-suwaki{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .kf-etykieta{ margin:0 0 6px; font-size:13px; font-weight:600; color:var(--ink); } .kf-wyrownanie{ display:flex; gap:6px; } .kf-wyrownanie button{ flex:1; min-height:44px; background:var(--kremowy); border:1px solid var(--line); border-radius:10px; cursor:pointer; font:inherit; font-size:13px; color:var(--ink); } .kf-wyrownanie button.akt{ background:var(--akcent); border-color:var(--akcent); color:#fff; } .pole--kolor input{ width:64px; height:44px; padding:2px; border:1px solid var(--line); border-radius:10px; background:var(--bialy); cursor:pointer; } .kf-zrzut{ display:block; padding:26px 18px; text-align:center; cursor:pointer; background:var(--kremowy); border:2px dashed var(--line); border-radius:14px; } .kf-zrzut b{ display:block; margin-bottom:6px; font-size:15px; } .kf-zrzut span{ font-size:13px; color:var(--muted); line-height:1.5; } .kf-zgoda{ margin-top:14px; } .kf-cliparty{ list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:10px; } .kf-clipart{ width:100%; padding:12px 8px; background:var(--kremowy); border:1px solid var(--line); border-radius:12px; cursor:pointer; font:inherit; font-size:12.5px; color:var(--ink); } .kf-clipart:hover{ border-color:var(--akcent); background:var(--akcent-jasny); } .kf-clipart svg{ display:block; width:46px; height:46px; margin:0 auto 6px; } .kf-clipart-pusto{ grid-column:1/-1; padding:16px; font-size:13.5px; color:var(--muted); } .kf-grupa{ grid-column:1/-1; margin:10px 0 0; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .kf-grupa:first-child{ margin-top:0; } .kf-produkty{ list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px; } .kf-ksztalt{ width:100%; padding:14px; background:var(--bialy); border:1px solid var(--line); border-radius:16px; cursor:pointer; font:inherit; color:var(--ink); text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; transition:border-color .15s, box-shadow .15s; } .kf-ksztalt img{ width:100%; max-width:260px; height:auto; aspect-ratio:1/1; object-fit:contain; display:block; } .kf-ksztalt b{ font-size:16px; } .kf-ksztalt small{ font-size:14px; color:var(--dym); } @media (hover: hover){ .kf-ksztalt:hover{ border-color:var(--akcent); box-shadow:0 6px 18px rgba(0,0,0,.07); } } .kf-ksztalt.akt{ border-color:var(--akcent); box-shadow:0 0 0 2px var(--akcent) inset; } .kf-produkt{ width:100%; padding:10px; background:var(--kremowy); border:1px solid var(--line); border-radius:14px; cursor:pointer; font:inherit; text-align:left; color:var(--ink); } .kf-produkt.akt{ border-color:var(--akcent); background:var(--akcent-jasny); } .kf-produkt--zwarty{ min-height:64px; display:flex; flex-direction:column; justify-content:center; gap:2px; } .kf-produkty-grupa{ grid-column:1 / -1; list-style:none; margin:6px 0 0; } .kf-produkty-grupa:first-child{ margin-top:0; } .kf-produkty-grupa{ display:flex; align-items:center; gap:12px; } .kf-produkty-grupa img{ width:64px; height:64px; object-fit:contain; flex:none; background:var(--bialy); border:1px solid var(--line); border-radius:12px; } .kf-produkty-grupa h3{ flex:1; margin:0; padding:0 2px 6px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--dym); border-bottom:1px solid var(--line); } .kf-zmien-produkt{ width:100%; justify-content:center; } .kf-produkt img{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; margin-bottom:8px; } .kf-produkt b{ display:block; font-size:13.5px; line-height:1.35; } .kf-produkt small{ display:block; margin-top:3px; font-size:12.5px; color:var(--muted); } @media (max-width:1080px){ .kf-uklad{ grid-template-columns:88px minmax(0,1fr); } .kf-panel{ grid-column:1/-1; position:static; } } @media (max-width:700px){ .kf-uklad{ grid-template-columns:1fr; } /* Na telefonie pasek narzedzi klaadzie sie w poziomie NAD plotnem - pionowa kolumna zjadalaby polowe szerokosci ekranu. */ .kf-narzedzia{ flex-direction:row; position:static; overflow-x:auto; } .kf-narzedzie{ flex:1 0 auto; min-width:82px; } .kf-suwaki{ grid-template-columns:1fr; } .kf-plotno{ aspect-ratio:1/1; } } .kf-hist:disabled{ opacity:.45; cursor:not-allowed; } /* Ostrzezenia produkcyjne - lista, bo potrafia wystapic naraz. */ .kf-ostrzezenie{ display:flex; flex-direction:column; gap:6px; margin:0 auto 12px; padding:12px 16px; background:#FDF0E3; color:#6B3E0A; border:1px solid #E8C9A0; border-radius:12px; font-size:14px; font-weight:600; line-height:1.5; } /* Prowadnice srodka - widoczne tylko w chwili zaskoczenia. */ .kf-prowadnica{ position:absolute; background:var(--akcent); pointer-events:none; z-index:99; } .kf-prowadnica--x{ left:50%; top:-8px; bottom:-8px; width:1px; } .kf-prowadnica--y{ top:50%; left:-8px; right:-8px; height:1px; } /* Pasek akcji nad zaznaczonym elementem. */ .kf-pasek-el{ position:absolute; z-index:100; display:flex; gap:2px; transform:translateX(-50%); padding:3px; background:var(--noc); border-radius:10px; box-shadow:0 6px 18px rgba(16,32,29,.25); } .kf-pasek-el button{ width:30px; height:30px; background:none; border:0; border-radius:7px; cursor:pointer; color:#fff; font-size:13px; line-height:1; } .kf-pasek-el button:hover{ background:rgba(255,255,255,.18); } /* Uchwyt obrotu nad elementem - odsuniety, zeby nie mylil sie z uchwytem skali. */ .kf-obrotka{ position:absolute; left:50%; top:-22px; width:16px; height:16px; margin-left:-8px; background:#fff; border:2px solid var(--akcent); border-radius:50%; cursor:grab; } .kf-widoki, .kf-rownaj{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:12px; } .kf-widoki-etykieta{ font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--akcent-ciemny); margin-right:4px; } .kf-rownaj button{ width:40px; height:40px; background:var(--bialy); border:1px solid var(--line); border-radius:9px; cursor:pointer; font-size:15px; color:var(--ink); } .kf-rownaj button:hover{ border-color:var(--akcent); background:var(--akcent-jasny); } .kf-skroty{ margin-top:12px; background:var(--bialy); border:1px solid var(--line); border-radius:12px; padding:10px 14px; } .kf-skroty summary{ cursor:pointer; font-size:13.5px; font-weight:600; color:var(--ink); } .kf-skroty ul{ margin:10px 0 2px; padding-left:18px; } .kf-skroty li{ font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:4px; } .ad-graf-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:8px; } .ad-graf-form .pe-pole{ margin:0; min-width:180px; } .ad-graf-plik{ display:inline-flex; align-items:center; cursor:pointer; } .ad-grafiki{ list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; } .ad-graf{ display:flex; align-items:center; gap:10px; padding:8px; background:var(--bialy); border:1px solid var(--line); border-radius:12px; } .ad-graf img{ width:56px; height:56px; min-width:56px; object-fit:contain; background:var(--kremowy2); border-radius:8px; } .ad-graf-opis{ flex:1; min-width:0; } .ad-graf-opis b{ display:block; font-size:13.5px; line-height:1.3; } .ad-graf-opis small{ font-size:12px; color:var(--muted); } .ad-graf--pusto{ grid-column:1/-1; display:block; padding:16px; font-size:13.5px; color:var(--muted); border-style:dashed; } @media (max-width:700px){ .ad-graf-form .pe-pole{ min-width:100%; } } .kf-podglad-fontu{ margin:10px 0 0; padding:14px 16px; min-height:64px; display:flex; align-items:center; justify-content:center; text-align:center; background:var(--kremowy); border:1px solid var(--line); border-radius:12px; font-size:26px; line-height:1.25; word-break:break-word; } .kf-zakladki, .kf-kategorie{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; } .kf-kategorie{ margin-top:8px; } .kf-clipart img{ display:block; width:52px; height:52px; margin:0 auto 6px; object-fit:contain; } .ad-projekt{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; } .ad-projekt-foto{ display:block; width:132px; text-decoration:none; color:var(--muted); } .ad-projekt-foto img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--kremowy); border:1px solid var(--line); border-radius:10px; } .ad-projekt-foto b{ display:block; margin-top:3px; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--akcent-ciemny); } .ad-projekt-foto:hover img{ border-color:var(--akcent); } .kf-szablony{ list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px; } .kf-szablon{ width:100%; padding:0; background:var(--kremowy); border:1px solid var(--line); border-radius:14px; cursor:pointer; font:inherit; text-align:left; color:var(--ink); overflow:hidden; } .kf-szablon:hover{ border-color:var(--akcent); } .kf-szablon-podglad{ display:block; height:118px; background:var(--bialy); border-bottom:1px solid var(--line); position:relative; overflow:hidden; } .kf-szablon-podglad span{ position:absolute; left:8%; right:8%; text-align:center; line-height:1.2; word-break:break-word; } .kf-szablon-opis{ display:block; padding:9px 11px 11px; } .kf-szablon-opis b{ display:block; font-size:13.5px; line-height:1.3; } .kf-szablon-opis small{ display:block; margin-top:2px; font-size:12px; color:var(--muted); } .kf-kolory-tekstu{ display:grid; grid-template-columns:auto auto 1fr; gap:12px; align-items:end; } .kf-przelaczniki{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; } @media (max-width:520px){ .kf-kolory-tekstu{ grid-template-columns:1fr 1fr; } } .kf-margines{ position:absolute; inset:7%; border:1px dashed rgba(101,68,11,.35); border-radius:3px; pointer-events:none; } .kf-qr-podglad{ display:flex; justify-content:center; margin:14px 0 6px; min-height:8px; } .kf-qr-podglad img{ width:172px; height:172px; image-rendering:pixelated; background:#fff; border:1px solid var(--line); border-radius:6px; padding:6px; } .prod-projektuj{ margin:12px 0 0; display:flex; flex-direction:column; gap:6px; } .prod-projektuj .nota{ margin:0; } .prod-projektuj[hidden]{ display:none; } .kf-licznik{ display:inline-block; min-width:18px; margin-left:6px; padding:0 5px; border-radius:9px; background:var(--akcent); color:#fff; font-size:12px; line-height:18px; text-align:center; font-weight:700; } .kf-projekty{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; } .kf-projekt{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--bialy); } .kf-projekt-opis{ display:flex; flex-direction:column; gap:2px; min-width:0; } .kf-projekt-opis b{ font-size:15px; } .kf-projekt-opis small{ color:var(--muted); font-size:12.5px; } .kf-projekt-akcje{ display:flex; align-items:center; gap:6px; } .kf-projekt-x{ width:32px; height:32px; border:1px solid var(--line); border-radius:9px; background:var(--bialy); color:var(--muted); cursor:pointer; font-size:14px; } .kf-projekt-x:hover{ border-color:var(--akcent-ciemny); color:var(--akcent-ciemny); } .kf-projekt-pusto{ padding:14px; border:1px dashed var(--line); border-radius:12px; color:var(--muted); font-size:14px; } .ad-grafiki{ grid-template-columns:1fr; } .ad-graf-akcje{ display:flex; align-items:center; gap:6px; margin-left:auto; flex-wrap:wrap; } .ad-graf-strzalka{ width:30px; height:30px; border:1px solid var(--line); border-radius:8px; background:var(--bialy); color:var(--ink); cursor:pointer; font-size:14px; line-height:1; } .ad-graf-strzalka:hover:not(:disabled){ border-color:var(--akcent-ciemny); color:var(--akcent-ciemny); } .ad-graf-strzalka:disabled{ opacity:.35; cursor:not-allowed; } .ad-graf--edycja{ align-items:flex-start; } .ad-graf-pola{ display:flex; gap:10px; flex:1 1 260px; min-width:0; flex-wrap:wrap; } .ad-graf-pola .pe-pole{ flex:1 1 160px; margin:0; } @media (max-width:900px){ .kf-narzedzia--pasek{ scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%); padding-right:26px; } .kf-narzedzia--pasek::-webkit-scrollbar{ display:none; } .kf-narzedzia--pasek > *{ scroll-snap-align:start; flex:0 0 auto; } } /* Do LEWEJ, nie na srodek: naglowek sekcji jest wyrownany do lewej, wiec pojedyncza karta na srodku wygladala jak zgubiona. */ #razem{ grid-template-columns:repeat(auto-fill,280px); justify-content:start; } #razem > *{ max-width:280px; } @media (max-width:600px){ #razem{ grid-template-columns:1fr; } #razem > *{ max-width:100%; } } .prod-razem{ display:inline-block; margin:0 0 8px; padding:3px 9px; border-radius:999px; background:var(--akcent-jasny); color:var(--akcent-ciemny); font-size:12px; font-weight:600; letter-spacing:.01em; } .nota--razem{ margin-top:18px; } .kt-godziny{ display:flex; flex-direction:column; gap:2px; } .kt-godziny em{ font-style:normal; color:var(--muted); } .kolko::after{ content:""; position:absolute; width:44px; height:44px; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; } @media (hover:hover){ .kolko::after{ display:none; } } /* myszka trafia dokladnie */ .ad-fv{ display:inline-block; padding:1px 7px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.06em; background:var(--akcent-jasny); color:var(--akcent-ciemny); vertical-align:middle; } .ad-filtr--fv{ position:relative; margin-left:16px; } /* Wlosowa kreska: „Wymaga FV" to inna os niz etap, a nie kolejny etap. */ .ad-filtr--fv::before{ content:''; position:absolute; left:-9px; top:50%; transform:translateY(-50%); width:1px; height:22px; background:var(--line); } .ad-filtr--fv[aria-pressed="true"]{ background:var(--akcent); border-color:var(--akcent); color:#fff; } @media (max-width:700px){ /* pasek sie zawija - kreska trafialaby na poczatek wiersza */ .ad-filtr--fv{ margin-left:0; } .ad-filtr--fv::before{ display:none; } .ad-filtr{ min-height:44px; } } .ad-fv-blok{ margin-top:14px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--kremowy); } .ad-fv-blok .etykieta-mala{ margin:0 0 4px; } .sl-menu-btn{ opacity:.34; } .sl-menu-btn--akt{ opacity:1; background:var(--zloto); color:var(--ink); border-color:var(--zloto); } @media (hover:hover) and (pointer:fine){ .sl-menu-btn:hover{ opacity:1; } } .oceny{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:2px 0 12px; font-size:14px; line-height:1.45; } .gwiazdki{ position:relative; display:inline-block; line-height:1; white-space:nowrap; font-size:17px; letter-spacing:1px; } .gwiazdki-tlo{ color:#CFC3B4; } .gwiazdki-wypelnienie{ position:absolute; top:0; left:0; bottom:0; overflow:hidden; color:#8A6216; } .oceny-liczba{ font-weight:700; color:var(--ink); } .oceny-ile{ color:var(--muted); } .oceny-zrodlo{ color:var(--muted); font-size:13px; } @media (max-width:520px){ .oceny{ gap:7px; } .oceny-zrodlo{ flex-basis:100%; } } /* Pole z adresem produktu - ostatnia droga, gdy przegladarka nie daje ani systemowego udostepniania, ani schowka. Ma byc SZEROKIE i zaznaczone, zeby dalo sie zrobic Ctrl+C. */ .link-do-skopiowania{ width:100%; max-width:420px; margin-top:6px; padding:8px 10px; border:1px solid var(--linia); border-radius:8px; background:#fff; font:400 13px/1.4 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--ink); } .kf-opis{ margin:52px auto 8px; } .kf-opis-uklad{ display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); gap:40px 52px; align-items:start; } .kf-opis h2{ font-size:clamp(23px, 2.8vw, 30px); margin:0 0 14px; } .kf-opis-wstep{ margin:0 0 22px; font-size:16px; line-height:1.7; color:var(--ink); max-width:62ch; } .kf-opis-tresc h3{ font-size:16px; margin:22px 0 8px; } .kf-opis-tresc h3:first-of-type{ margin-top:0; } .kf-opis-lista{ margin:0; padding:0; list-style:none; } .kf-opis-lista li{ position:relative; padding-left:18px; margin-bottom:8px; font-size:15px; line-height:1.65; color:var(--muted); max-width:60ch; } .kf-opis-lista li::before{ content:''; position:absolute; left:2px; top:9px; width:5px; height:5px; border-radius:50%; background:var(--zloto); } .kf-opis-lista strong{ color:var(--ink); } .kf-opis-firmy{ margin:22px 0 0; font-size:15px; line-height:1.65; color:var(--muted); } .kf-opis-foto{ margin:0; } @media (min-width:901px){ .kf-opis-foto{ position:sticky; top:96px; } } .kf-opis-foto img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:16px; background:var(--kremowy2); } .kf-opis-foto figcaption{ margin-top:10px; font-size:13px; line-height:1.55; color:var(--muted); } @media (max-width:900px){ /* Zdjecie idzie POD tresc, nie znika - to jedyny obrazek w tej sekcji. */ .kf-opis-uklad{ grid-template-columns:1fr; gap:26px; } .kf-opis-foto img{ max-width:420px; } } @media (max-width:620px){ .kf-opis{ margin-top:34px; } } @media (max-width: 900px) { .foot-grid a, .stopka-logo, details > summary { display: flex; align-items: center; min-height: 44px; } .foot-grid li { margin: 0; } /* Tytul produktu na kafelku ma 16 px wysokosci. NIE rozpychamy go do 44 px, bo cale zdjecie kafla (356x356) prowadzi pod TEN SAM adres - wiekszy cel juz istnieje. Dokladamy tylko odstep, zeby palec nie musial trafiac w sam wiersz tekstu. */ .prod h3 a, .prod-tytul a { display: inline-block; padding: 7px 0; } .kf-rownaj button { min-width: 44px; min-height: 44px; } /* Znacznik `summary` ma wlasna strzalke - `flex` ustawia ja rowno z tekstem. */ details > summary { gap: 8px; } } .fakty:has(> *:first-child:nth-last-child(2)){ grid-template-columns:repeat(2,minmax(0,1fr)); } .fakty:has(> *:first-child:nth-last-child(3)){ grid-template-columns:repeat(3,minmax(0,1fr)); } .kafle:has(> *:first-child:nth-last-child(2)){ grid-template-columns:repeat(2,minmax(0,1fr)); } .kafle:has(> *:first-child:nth-last-child(3)){ grid-template-columns:repeat(3,minmax(0,1fr)); } .kafle:has(> *:first-child:nth-last-child(4)){ grid-template-columns:repeat(4,minmax(0,1fr)); } .kafle:has(> *:first-child:nth-last-child(5)){ grid-template-columns:repeat(5,minmax(0,1fr)); } .bl-siatka:has(> *:first-child:nth-last-child(2)){ grid-template-columns:repeat(2,minmax(0,1fr)); } .bl-siatka:has(> *:first-child:nth-last-child(3)){ grid-template-columns:repeat(3,minmax(0,1fr)); } @media (max-width:1000px){ .fakty:has(> *:first-child:nth-last-child(3)){ grid-template-columns:repeat(2,minmax(0,1fr)); } .kafle:has(> *:first-child:nth-last-child(3)){ grid-template-columns:repeat(2,minmax(0,1fr)); } .kafle:has(> *:first-child:nth-last-child(4)), .kafle:has(> *:first-child:nth-last-child(5)){ grid-template-columns:repeat(3,minmax(0,1fr)); } .bl-siatka:has(> *:first-child:nth-last-child(3)){ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:600px){ .fakty:has(> *:first-child:nth-last-child(2)), .fakty:has(> *:first-child:nth-last-child(3)){ grid-template-columns:1fr; } .kafle:has(> *:first-child:nth-last-child(2)), .kafle:has(> *:first-child:nth-last-child(3)), .kafle:has(> *:first-child:nth-last-child(4)), .kafle:has(> *:first-child:nth-last-child(5)){ grid-template-columns:1fr; } .bl-siatka:has(> *:first-child:nth-last-child(2)), .bl-siatka:has(> *:first-child:nth-last-child(3)){ grid-template-columns:1fr; } } /* Font display NIE MA kroju pochylego - przegladarka rysowalaby SYNTETYCZNA kursywe, ktora rozjezdza polskie ogonki. Wyroznienie niesie kolor. BEZ KURSYWY */ h1 em, h2 em, h3 em, h4 em, .hero-slajd em, em.akc { font-style: normal; color: var(--akcent-ciemny); } .sekcja--noc h1 em, .sekcja--noc h2 em, .hero-slajd em { color: var(--zloto); } .gr-warstwa{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .25s ease; } .gr-warstwa.jest{ opacity:1; } .gr-warstwa svg{ width:100%; height:100%; display:block; } .gr-warstwa text{ fill:rgba(16,32,29,.82); paint-order:stroke; stroke:rgba(255,255,255,.55); stroke-width:2.5px; } .gr-wstep{ margin:0 0 12px; } .gr-pola{ display:grid; gap:10px; } .gr-pole{ position:relative; margin-bottom:0; } .gr-pole > span:first-child{ font-size:13px; color:var(--muted); } .gr-opc{ color:var(--muted2); } .gr-licznik{ position:absolute; right:12px; bottom:10px; font-size:12px; color:var(--muted2); pointer-events:none; } .gr-licznik.za-duzo{ color:var(--akcent-ciemny); font-weight:600; } .gr-czcionki{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; } .gr-czcionka{ flex:0 0 auto; min-height:44px; padding:8px 16px; border-radius:10px; font-size:17px; border:1px solid var(--line); background:var(--bialy); color:var(--ink); cursor:pointer; } .gr-czcionka.akt{ border-color:var(--akcent); box-shadow:inset 0 0 0 1px var(--akcent); } @media (hover:hover){ .gr-czcionka:hover{ border-color:var(--akcent); } } .gr-limit-nota{ margin-top:10px; } .gr-blad{ margin:12px 0 0; padding:10px 12px; border-radius:10px; font-size:14px; line-height:1.5; background:var(--akcent-jasny); color:var(--akcent-ciemny); border:1px solid rgba(101,68,11,.28); } .gr-zgoda{ display:flex; gap:10px; align-items:flex-start; margin-top:14px; font-size:14px; line-height:1.5; min-height:44px; cursor:pointer; } .gr-zgoda input{ width:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--akcent); } .gr-zgoda input:disabled{ cursor:not-allowed; } .gr-zgoda input:disabled + span{ color:var(--muted2); } .gr-nota-podglad{ margin-top:8px; } /* Przy pustym grawerze zgoda nie jest potrzebna - produkt bez graweru to poprawne zamowienie. */ .wybor.personalizacja.gr-pusty .gr-zgoda{ opacity:.55; } .ad-pozycje .ad-grawer{ display:block; margin-top:6px; padding:8px 10px; border-radius:8px; background:var(--akcent-jasny); color:var(--akcent-ciemny); font-size:13px; line-height:1.55; } .ad-pozycje .ad-grawer b{ font-size:14.5px; font-weight:700; letter-spacing:.01em; } .bl-alarmy .komunikat{ margin:0 0 12px; } .bl-alarm{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; } .bl-alarm > span{ flex:1 1 320px; min-width:0; } .bl-opis{ font-size:13.5px; line-height:1.6; max-width:78ch; margin:0 0 14px; } .bl-stan{ list-style:none; margin:0; padding:0; display:grid; gap:8px; } .bl-stan li{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:10px 14px; border-radius:10px; border:1px solid var(--line2); background:var(--kremowy); font-size:13.5px; line-height:1.5; } .bl-stan li > b{ flex:0 0 auto; } .bl-stan li > span{ flex:1 1 260px; min-width:0; color:var(--muted); } .bl-stan li.bl-ok > b{ color:#1F5B33; } .bl-stan li.bl-brak{ background:#FBE9E4; border-color:#F0CBBF; } .bl-stan li.bl-brak > b{ color:#8E2F16; } .bl-adres{ flex:1 1 260px; min-width:0; overflow-wrap:anywhere; font:500 13px ui-monospace,Consolas,monospace; background:var(--bialy); border:1px solid var(--line); border-radius:8px; padding:8px 10px; } .bl-wybor{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 12px; } .bl-liczniki{ list-style:none; margin:16px 0 12px; padding:0; display:flex; flex-wrap:wrap; gap:8px; } .bl-licznik{ display:flex; align-items:baseline; gap:6px; padding:7px 13px; border-radius:999px; background:var(--kremowy); border:1px solid var(--line2); font-size:13px; color:var(--muted); } .bl-licznik b{ font-family:"Outfit",Arial,serif; font-size:16px; font-weight:500; color:var(--ink); } .bl-licznik--do_potwierdzenia, .bl-licznik--niejednoznaczny, .bl-licznik--zniknal_czeka{ background:#FDF0E3; border-color:#F2D9BD; color:#6B3E0A; } .bl-licznik--razem{ background:none; border-style:dashed; } .bl-rozwin{ margin:12px 0; } .bl-rozwin > summary{ cursor:pointer; font-weight:700; font-size:14px; padding:10px 0; min-height:44px; } .sa-karta.bl-rozwin > summary{ padding:0; display:flex; align-items:center; } .bl-rozwin .tabela-otoczka{ box-shadow:none; } .bl-spadek{ color:#8E2F16; font-weight:700; white-space:nowrap; } .bl-wzrost{ color:#1F5B33; font-weight:700; white-space:nowrap; } .bl-lista{ list-style:none; margin:0; padding:0; display:grid; gap:10px; } .bl-poz{ border:1px solid var(--line2); border-radius:12px; padding:14px 16px; background:var(--kremowy); } .bl-poz-tytul b{ display:block; font-size:14.5px; line-height:1.45; overflow-wrap:anywhere; } .bl-poz-tytul small{ display:block; margin-top:3px; font-size:12.5px; line-height:1.5; color:var(--muted); overflow-wrap:anywhere; } /* potwierdzenie mailem NIE wyszlo - obsluga ma to zauwazyc bez czytania calej karty */ .bl-poz-tytul small.bl-uwaga{ color:var(--akcent-ciemny); font-weight:700; } .bl-kandydaci{ border:0; margin:12px 0 0; padding:0; display:grid; gap:6px; } .bl-kand{ display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:10px; background:var(--bialy); border:1px solid var(--line2); cursor:pointer; min-height:44px; } .bl-kand:has(input:checked){ border-color:var(--akcent); background:var(--akcent-jasny); } .bl-kand input{ width:20px; height:20px; flex:none; accent-color:var(--akcent); } .bl-kand-wiersz{ display:flex; align-items:center; gap:8px; } .bl-kand-wiersz > .bl-kand{ flex:1 1 auto; min-width:0; } .bl-kand-link{ flex:none; display:inline-flex; align-items:center; min-height:44px; padding:0 10px; font-size:12.5px; font-weight:700; color:var(--akcent-ciemny); white-space:nowrap; } .bl-ta-cena{ display:inline-block; margin-left:8px; padding:1px 8px; border-radius:999px; background:#E6F0E7; color:#1F5B33; font-weight:700; font-size:11.5px; } .bl-kand-opis{ min-width:0; } .bl-kand-opis b{ display:block; font-size:13.5px; font-weight:600; line-height:1.45; overflow-wrap:anywhere; } .bl-kand-opis small{ display:block; font-size:12.5px; color:var(--muted); } img.bl-foto{ width:56px; height:56px; object-fit:cover; border-radius:8px; flex:none; background:var(--kremowy2); } .bl-akcje{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .bl-poz-kom{ margin-top:10px; } .bl-szkic .bl-kand{ background:none; border:0; padding:0; } .bl-hurt{ margin:0 0 12px; } .bl-zapisz{ margin:18px 0 0; } .bl-postep{ display:grid; gap:8px; margin-top:14px; } .bl-pasek{ display:block; height:8px; border-radius:999px; background:var(--kremowy2); overflow:hidden; } .bl-pasek i{ display:block; height:100%; width:0; background:var(--akcent); transition:width .3s ease; } .bl-postep-tekst{ font-size:13.5px; color:var(--muted); } @media (prefers-reduced-motion:reduce){ .bl-pasek i{ transition:none; } } @media (max-width:640px){ .bl-wybor{ grid-template-columns:1fr; } .bl-poz{ padding:12px; } .bl-akcje .btn{ flex:1 1 100%; } .bl-kand-wiersz{ flex-wrap:wrap; gap:0; } .bl-kand-link{ margin-left:auto; } } .bs-ustawienia{ max-width:520px; } .bs-pola select{ min-height:40px; min-width:190px; font:inherit; font-size:13.5px; padding:6px 36px 6px 10px; border:1px solid var(--line); border-radius:8px; background-color:var(--bialy); color:var(--ink); } .bs-pola td{ vertical-align:middle; } @media (max-width:600px){ .sa-tresc .ad-tabela.bs-pola, .ad-tabela.bs-pola{ min-width:0; } .bs-pola select{ min-width:0; width:100%; } } .bs-adres{ overflow-wrap:anywhere; } .bs-zgoda{ display:flex; align-items:center; gap:10px; min-height:44px; font-size:13.5px; cursor:pointer; } .bs-zgoda input{ width:20px; height:20px; flex:none; accent-color:var(--akcent); } .bs-start{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; } .bs-zakladki{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 10px; } .bs-gora{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:6px 12px; } .bs-gora > .bl-poz-tytul{ flex:1 1 320px; min-width:0; } .bs-wybor{ display:flex; align-items:flex-start; gap:10px; min-height:44px; cursor:pointer; } .bs-wybor input{ width:20px; height:20px; flex:none; margin-top:2px; accent-color:var(--akcent); } .bs-porownanie{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; } .bs-kol{ min-width:0; padding:10px 12px; border-radius:10px; border:1px solid var(--line2); background:var(--bialy); } .bs-kol-tytul{ display:block; margin:0 0 8px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .bs-zdjecia{ display:flex; flex-wrap:wrap; gap:6px; } .bs-zdjecia img.bl-foto{ width:64px; height:64px; } .bs-tekst{ margin:0; max-height:14em; overflow:auto; font-size:13.5px; line-height:1.55; overflow-wrap:anywhere; white-space:pre-line; } .bs-szukaj{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:0 10px; max-width:640px; } .bs-szukaj .pole{ flex:1 1 260px; min-width:0; } .bs-szukaj .btn{ margin-bottom:14px; } .bs-strony{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0 0; } @media (max-width:640px){ .bs-porownanie{ grid-template-columns:1fr; } } /* Obrazki z opisu produktu (synchronizacja z BaseLinkerem, tylko kopie z img/bl/). */ .opis-tresc img{ display:block; max-width:100%; height:auto; margin:14px 0; border-radius:10px; } .opis-pod-zdjeciami > .opis-tresc + p{ margin-top:12px; } /* Podglad graweru jest ustawiony na zdjecie 1 (strefa w ulamkach TEGO kadru). Na innym zdjeciu napis wisial w tym samym miejscu, np. na rekawie. Chowamy go, dopoki aktywna miniatura nie jest pierwsza; wraca po kliknieciu pierwszej. */ .galeria-glowna:has(~ .miniatury > button.akt:not(:first-child)) .gr-warstwa{ opacity:0; } /* Karty kontaktu przy 320-375 px: tresc karty (flex) nie mogla sie zwezic ponizej adresu e-mail i wychodzila poza ekran. Adres lamie sie dopiero, gdy naprawde nie ma miejsca. */ .kt-poz > div{ min-width:0; } .kt-poz-wartosc a[href^="mailto:"]{ white-space:normal; overflow-wrap:anywhere; } .kt-lista{ grid-template-columns:minmax(0,1fr); } @media (max-width:400px){ .kt-poz-wartosc .nw{ white-space:normal; } } /* otwarta szuflada: gest na podsumowaniu przewijal strone POD nia (body mialo overflow hidden, ale przewija sie html) */ html:has(.szuflada.open){ overflow:hidden; } /* toast lezal nad przyciskiem „Przejdz do zamowienia” w szufladzie i polykal tapniecie */ .toast{ pointer-events:none; } /* tresc graweru pod nazwa pozycji w podsumowaniu kasy */ .sp-nazwa small.sp-grawer{ display:block; margin-top:2px; font-size:12.5px; color:var(--muted); } /* PW cart 1.0 - wspolne zrodlo: scripts/koszyk-polecane/koszyk.css */ body:has(#koszyk.pw-cart.open) .toast { opacity: 0 !important; pointer-events: none; } #koszyk.szuflada.pw-cart { top: 0; right: 0; bottom: 0; border-radius: 0; width: min(540px, 100%); height: 100dvh; max-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; } #koszyk.szuflada.pw-cart *, #koszyk.szuflada.pw-cart *::before, #koszyk.szuflada.pw-cart *::after { box-sizing: border-box; } #koszyk.szuflada.pw-cart .szuflada-gora { flex: 0 0 auto; padding: 14px 22px; min-height: 68px; } #koszyk.szuflada.pw-cart .szuflada-gora h3 { font-size: 23px; line-height: 1.2; } #koszyk.szuflada.pw-cart .pw-cart-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; } #koszyk.szuflada.pw-cart #koszykLista { flex: none; min-height: 0; overflow: visible; padding: 4px 22px 12px; } #koszyk.szuflada.pw-cart .pozycja { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; margin: 0; } #koszyk.szuflada.pw-cart .pozycja:last-child { border-bottom: 0; } #koszyk.szuflada.pw-cart .pozycja > img { width: 100px; height: 110px; object-fit: contain; border-radius: 10px; background: var(--bialy); } #koszyk.szuflada.pw-cart .pozycja-t { min-width: 0; flex: 1; } #koszyk.szuflada.pw-cart .pozycja-t h4 { font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; } #koszyk.szuflada.pw-cart .pozycja-t small { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; margin-top: 4px; } #koszyk.szuflada.pw-cart .pozycja-dol { align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; } #koszyk.szuflada.pw-cart .pozycja-dol .kwota { font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.3; white-space: normal; } #koszyk.szuflada.pw-cart .ilosc { margin-top: 8px; flex-shrink: 0; } #koszyk.szuflada.pw-cart .ilosc button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; font-size: 18px; } #koszyk.szuflada.pw-cart .ilosc span { min-width: 28px; font-size: 15px; } #koszyk.szuflada.pw-cart .usun { min-height: 44px; min-width: 44px; padding: 8px 2px; font-size: 13px; } #koszyk.szuflada.pw-cart .poz-sterowanie { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } #koszyk.szuflada.pw-cart .poz-waga { flex-wrap: wrap; min-width: 0; } #koszyk.szuflada.pw-cart .poz-waga-pole { font-size: 16px; height: 44px; min-width: 80px; max-width: 100%; } #koszyk.szuflada.pw-cart #propozycjeKoszyk { flex: none; display: block; overflow: visible; padding: 10px 22px 18px; border-top: 1px solid var(--line2); } #koszyk.szuflada.pw-cart #propozycjeKoszyk[hidden] { display: none; } #koszyk.szuflada.pw-cart .pw-cart-rec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } #koszyk.szuflada.pw-cart .pw-cart-rec-head .etykieta-mala { font-size: 15px; line-height: 1.3; font-weight: 700; margin: 0; letter-spacing: 0; text-transform: none; } #koszyk.szuflada.pw-cart .pw-cart-rec-nav { display: flex; flex: none; gap: 4px; } #koszyk.szuflada.pw-cart .pw-cart-rec-nav button { width: 44px; height: 44px; padding: 11px; border: 1px solid var(--line2); border-radius: 50%; background: var(--bialy); color: var(--ink); cursor: pointer; } #koszyk.szuflada.pw-cart .pw-cart-rec-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; } #koszyk.szuflada.pw-cart .pw-cart-rec-nav button:disabled { opacity: .38; cursor: default; } #koszyk.szuflada.pw-cart #propListaKoszyk { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 12px; margin: 8px 0 0; padding: 2px 2px 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain; scroll-padding-inline: 2px; } #koszyk.szuflada.pw-cart #propListaKoszyk .prop-kafel { flex: 0 0 min(340px, 91%); min-width: 0; width: auto; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; scroll-snap-align: start; text-decoration: none; } #koszyk.szuflada.pw-cart .prop-kafel:only-child { flex-basis: 100%; } #koszyk.szuflada.pw-cart .prop-kafel img, #koszyk.szuflada.pw-cart .pw-cart-no-photo { width: 72px; height: 82px; object-fit: contain; background: var(--bialy); border-radius: 6px; flex: none; } #koszyk.szuflada.pw-cart .prop-t b { font-size: 13px; line-height: 1.4; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } #koszyk.szuflada.pw-cart .prop-t small { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.4; margin-top: 5px; } #koszyk.szuflada.pw-cart .prop-t small span { font-weight: 400; font-size: 12px; } #koszyk.szuflada.pw-cart .pw-cart-rec-link { display: block; font-size: 12px; font-weight: 600; color: var(--akcent-ciemny); text-decoration: underline; text-underline-offset: 3px; margin-top: 6px; } #koszyk.szuflada.pw-cart .pw-cart-details { margin: 0 22px 16px; border-top: 1px solid var(--line2); } #koszyk.szuflada.pw-cart .pw-cart-details summary { min-height: 48px; padding: 14px 2px; font-size: 14px; font-weight: 600; cursor: pointer; } #koszyk.szuflada.pw-cart .pw-cart-breakdown { padding: 0 2px 12px; } #koszyk.szuflada.pw-cart .pw-cart-breakdown .suma { font-size: 13px; gap: 12px; line-height: 1.5; align-items: baseline; } #koszyk.szuflada.pw-cart .pw-cart-breakdown .suma > :last-child { flex: none; max-width: 50%; text-align: right; } #koszyk.szuflada.pw-cart .szuflada-dol { flex: 0 0 auto; padding: 14px 22px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--bialy); border-top: 1px solid var(--line2); } #koszyk.szuflada.pw-cart .szuflada-dol .suma--razem { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; padding: 0; border: 0; font-size: 14px; line-height: 1.4; } #koszyk.szuflada.pw-cart .szuflada-dol .suma--razem > span { max-width: 60%; } #koszyk.szuflada.pw-cart .szuflada-dol .suma--razem b { font-family: inherit; font-size: 22px; font-weight: 700; text-align: right; line-height: 1.3; } #koszyk.szuflada.pw-cart .szuflada-dol .suma--razem b.suma-slowo { font-size: 14px; } #koszyk.szuflada.pw-cart #btnZamow { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 50px; padding: 12px; margin: 0; font-size: 15px; line-height: 1.3; } #koszyk.szuflada.pw-cart .pw-cart-continue { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px; margin: 0; border: 0; background: transparent; color: var(--ink); font-size: 13px; box-shadow: none; } #koszyk.szuflada.pw-cart :is(button,a,summary,select,[tabindex]):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } @media (max-width: 400px) { #koszyk.szuflada.pw-cart .szuflada-gora { padding: 10px 16px; min-height: 64px; } #koszyk.szuflada.pw-cart #koszykLista { padding-inline: 16px; } #koszyk.szuflada.pw-cart .pozycja { gap: 12px; padding-block: 16px; } #koszyk.szuflada.pw-cart .pozycja > img { width: 80px; height: 92px; } #koszyk.szuflada.pw-cart .pozycja-t h4 { font-size: 15px; } #koszyk.szuflada.pw-cart #propozycjeKoszyk { padding-inline: 16px; } #koszyk.szuflada.pw-cart .prop-kafel { gap: 10px; padding: 10px; } #koszyk.szuflada.pw-cart .prop-kafel img { width: 60px; height: 72px; } #koszyk.szuflada.pw-cart .pw-cart-details { margin-inline: 16px; } #koszyk.szuflada.pw-cart .szuflada-dol { padding-inline: 16px; } } @media (max-height: 500px) { #koszyk.szuflada.pw-cart .szuflada-gora { min-height: 48px; padding-block: 2px; } #koszyk.szuflada.pw-cart .szuflada-dol { padding-top: 6px; } #koszyk.szuflada.pw-cart .szuflada-dol .suma--razem { margin-bottom: 6px; } #koszyk.szuflada.pw-cart .szuflada-gora h3 { font-size: 20px; } } @media (prefers-reduced-motion: reduce) { #koszyk.szuflada.pw-cart, #koszyk.szuflada.pw-cart * { scroll-behavior: auto; transition: none !important; } } /* /PW cart */