/* ============================================================ SHOP - hero, search, filters, grid, cards, cart, checkout, admin ============================================================ */ /* ===== HERO ===== */ .hero{background:linear-gradient(135deg,var(--bg2) 0%,var(--bg) 100%);color:var(--text);border:1.5px solid var(--border);border-left:4px solid var(--accent);border-radius:var(--r);padding:36px 36px 30px;margin-bottom:32px;position:relative;overflow:hidden;box-shadow:var(--shadow,0 1px 3px rgba(0,0,0,.04))} .hero::before{content:'';position:absolute;top:-40%;right:-10%;width:380px;height:380px;background:radial-gradient(circle,rgba(213,48,83,.14) 0%,transparent 70%);pointer-events:none} .hero h1{font-family:var(--font-display);font-size:34px;font-weight:700;margin-bottom:10px;letter-spacing:-1.5px;position:relative;color:var(--text);line-height:1.15} .hero p{font-size:15px;color:var(--text2);max-width:540px;line-height:1.6;position:relative} .hero-perks{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px} /* Políčka s výhodami v heru - jen mírně prosvětlený podklad, ať se odliší od gradientu heru a nesvítí. */ .hero-perk{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.045);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;transition:border-color .25s ease,background-color .25s ease} .hero-perk:hover{background:rgba(255,255,255,.07);border-color:#3a3a46} .hero-perk-ico{color:var(--accent);flex-shrink:0;display:flex} .hero-perk-ico svg{width:22px;height:22px} .hero-perk-txt{display:flex;flex-direction:column;line-height:1.3} .hero-perk-txt strong{font-size:13px;font-weight:600;color:var(--text)} .hero-perk-txt span{font-size:12px;color:var(--text3)} @media(max-width:820px){.hero-perks{grid-template-columns:1fr 1fr}} /* ===== SEARCH BAR ===== */ .sbar{position:relative;margin-bottom:24px} /* Vzhled pole jde ze sdíleného :where(input...) v base.css - tady jen místo pro ikonku lupy. */ .sbar input{padding-left:44px} .sbar .si{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text3)} /* ===== FILTERS ===== */ .flt{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap} .fbtn{display:inline-flex;align-items:center;justify-content:center;background:var(--card);border:1.5px solid var(--border);font-family:inherit;font-size:15px;font-weight:500;height:40px;padding:0 17px;line-height:1;border-radius:var(--r);cursor:pointer;transition:all .3s ease;color:var(--text2)} .fbtn:hover{border-color:var(--text3);color:var(--text)} .fbtn.on{background:var(--accent);color:#fff;border-color:var(--accent)} /* ===== GROUP TABS ===== .gtabs-row drží skupiny vlevo a řazení vpravo na jednom řádku, na užších displejích se zalomí pod sebe. */ .gtabs-row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:10px 16px;margin-bottom:16px} .gtabs-row .gtabs{margin-bottom:0;min-width:0} /* Záložky se NIKDY nesmí zalamovat do víc řádků (dlouhý název skupiny by rozhodil celou lištu) - když se nevejdou, řádek se posouvá do strany. Posuvník je schovaný, ať lišta na mobilu vypadá čistě. */ .gtabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:2px solid var(--border);padding-bottom:0;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain} .gtabs::-webkit-scrollbar{display:none} .gtab{flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;background:0 0;border:0;border-bottom:3px solid transparent;font-family:inherit;font-size:15px;font-weight:600;height:40px;padding:0 17px;line-height:1;cursor:pointer;transition:all .3s ease;color:var(--text3);margin-bottom:-2px} .gtab:hover{color:var(--text);border-bottom-color:var(--text3)} .gtab.on{color:var(--accent);border-bottom-color:var(--accent)} .gtab.on:hover{border-bottom-color:var(--accent)} /* Tlačítka pořadí produktů (Náhodně/A-Z/Z-A) - stejná ikonková tlačítka jako v adminu (.padm-icon-btn níž). Aktivní režim (.on) zůstává trvale zvýrazněný, ať je vidět, podle čeho se řadí. */ .sort-actions{display:flex;gap:8px;margin-bottom:16px} .sort-actions .padm-icon-btn.on{border-color:var(--accent);color:var(--accent-dk);background:var(--accent-lt)} /* ===== GRID & CARDS ===== 3 sloupce na desktopu, 2 na středních šířkách (@media 900px níž), 1 na mobilu (@media 640px, viz responzivní sekce). */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px} .related-grid{grid-template-columns:repeat(3,1fr);margin-bottom:16px} .card.card-featured{grid-column:1/-1} .card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;transition:all .25s;display:flex;flex-direction:column} .card:hover{border-color:var(--text3);box-shadow:var(--shadow-lg);transform:translateY(-2px)} /* Bestseller kartu schválně nic vizuálně neodlišuje - jen rohový odznak (.card-corner-badge/.bbest). Třída .card-bestseller zůstává v markupu jako JS/CSS hook, ale nic se pro ni nepřepisuje. */ @media(max-width:900px){ .grid{grid-template-columns:repeat(2,1fr)} } /* Fotka produktu je vždy čtverec 1:1, ať je karta v gridu jakkoli široká. */ .card-img{width:100%;aspect-ratio:1/1;background:var(--bg3);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;text-decoration:none} .card-img svg{width:100%;height:100%;display:block} /* Nahraná fotka se NEOŘEZÁVÁ (contain) - vždy je vidět celá, prázdný prostor kolem doplní pozadí .card-img. */ .card-img img{width:100%;height:100%;object-fit:contain;display:block} /* Zástupný obrázek bez fotky se na rozdíl od skutečné fotky rám VYPLNÍ (cover) a nechá oříznout - jinak by uprostřed tmavého rámu svítil světlejší čtverec. Platí pro webp i záložní vestavěné SVG. */ .card-img .prod-noimg{width:100%;height:100%;object-fit:cover;display:block} .card-body{padding:24px;display:flex;flex-direction:column;flex:1} /* NEPOUŽÍVAT :first-of-type - chytilo by první DIV mezi sourozenci (i .card-badges je div), ne první .vrow. Místo toho dostane margin-top:auto každý .vrow a další v pořadí si ho vrátí na 0, ať skupina drží pohromadě a k patě karty ji přitáhne jen ten první. */ .card-body .vrow{margin-top:auto} .card-body .vrow~.vrow{margin-top:0} .related-grid .card-body{padding:20px} .card h3{font-family:var(--font-display);font-size:19px;font-weight:700;margin:10px 0;line-height:1.3;letter-spacing:-.6px} .related-grid .card h3{font-size:17px;letter-spacing:-.5px} .card .card-title-link{color:inherit;transition:all .3s ease} .card .card-title-link:hover{color:var(--accent)} .card .desc{font-size:15px;color:var(--text2);line-height:1.5;margin-bottom:16px} .related-grid .card .desc{font-size:13px;margin-bottom:14px} /* ===== BADGES ===== */ .pbadge{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;border-radius:var(--r-pill);margin-bottom:12px} .pbadge+.pbadge{margin-left:6px} /* .card-body je flex sloupec (kvůli zarovnání .vrow ke spodku), takže odznaky MUSÍ být zabalené v tomhle jednom wrapperu - jinak by se jako přímé děti flex-sloupce zalomily každý na vlastní řádek. */ .card-badges{display:flex;flex-wrap:wrap} /* Barvy odznaků kategorií - barva se vybírá v administraci (Produkty → Kategorie). Princip je tmavý podsvit odstínu + syté písmo; opačně (světlá výplň, tmavý text) by z nich na tmavém webu byly svítící bloby. */ .ccol-zluta{background:#2a2010;color:#ffc24b} .ccol-oranzova{background:#2b1c0e;color:#ff9f45} .ccol-cervena{background:#3a0f18;color:#ffb9cc} .ccol-fuchsie{background:#2d1229;color:#e98ad4} .ccol-modra{background:#0f1d28;color:#7cc0ea} .ccol-tyrkys{background:#0d2422;color:#5fd6cf} .ccol-zelena{background:#16240f;color:#8ee066} .ccol-hneda{background:#241a12;color:#c79a6e} /* Bestseller - tlumeně zlatý odznak, který jemně "dýchá". */ .bbest{background:linear-gradient(135deg,#d9b54a,#c1902e);color:#2e2408;animation:bestPulse 2s ease-in-out infinite alternate} @keyframes bestPulse{from{box-shadow:0 0 0 0 rgba(201,144,46,.25)}to{box-shadow:0 0 6px 1px rgba(201,144,46,.2)}} /* Odznak "Poslední kusy" (sklad 1-2 ks, viz productLowStock()) - sytá značková --accent + tmavý text, stejný princip jako .bbest výš, ne tlumený podsvit jako u kategorií. */ .blast{background:var(--accent);color:#3a0a16} /* Odznak "Vyprodáno" (viz productOutOfStock()) - sytá --danger s bílým textem, ať je jasně odlišný od značkové růžové u .blast výš. */ .bout{background:var(--danger);color:#fff} /* Ztlumená fotka vyprodaného produktu - JEN na kartě ve výpisu, na detailu zůstává fotka beze změny (tam stačí odznak .bout). */ .card-img-out img,.card-img-out .prod-noimg,.card-img-out svg{opacity:.5} /* Rohové odznaky PŘES fotku - Bestseller vlevo, Poslední kusy vpravo nahoře (vykreslují se uvnitř .card-img, který je position:relative). margin-bottom z .pbadge se nuluje, u absolutního umístění nedává smysl. */ .card-corner-badge{position:absolute;top:8px;margin-bottom:0;z-index:2;box-shadow:0 2px 6px rgba(0,0,0,.35)} .card-corner-tl{left:8px} .card-corner-tr{right:8px} /* .pbadge+.pbadge výš přidává margin-left, tady jsou ale oba umístěné absolutně a margin by je zbytečně posunul stranou. */ .card-corner-badge+.card-corner-badge{margin-left:0} .specs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap} .spec{font-size:11px;font-weight:500;padding:3px 8px;background:var(--bg2);border-radius:var(--r-pill);color:var(--text2)} /* ===== VARIANT ROW ===== +/- a Přidat (.vrow-actions) drží VŽDY pohromadě jako jedna skupina. margin-left:auto musí být na celé skupině, ne na tlačítku - jinak by se +/- a Přidat rozjely každý ke svému okraji. .vrow-info dnes obsahuje jen .vprice, ale zůstává jako obal kvůli sdílenému layoutu. */ .vrow{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--bg2);gap:8px 16px;flex-wrap:wrap} /* VARIANTA / SKLADEM / DODÁNÍ - vlastní řádek nad cenou, jen v detailu produktu. flex:1 0 100% ho vynutí na vlastní řádek, i když .vrow je jinak flex row. .vmeta-name zůstává v DOM i prázdný, ať space-between pořád zarovná odznak doprava. */ .vrow .vmeta{flex:1 0 100%;display:flex;align-items:center;justify-content:space-between;gap:10px}.vmeta-stock{font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;padding:3px 9px;border-radius:var(--r-pill);flex-shrink:0} /* Stejná zelená jako odznaky v e-mailech (includes/emaily.php). */ .vmeta-stock-sklad{background:#16240f;color:#6acf39} /* "DODÁNÍ 15-30 DNŮ" - žlutá, stejná rodina jako zelené SKLADEM a červené VYPRODÁNO. */ .vmeta-stock-objednavka{background:var(--yellow-lt);color:var(--yellow)} /* VYPRODÁNO - červená --danger, ať je odlišné od zeleného SKLADEM a žlutého DODÁNÍ. */ .vmeta-stock-out{background:var(--danger-lt);color:var(--danger)}/* Mobilní výjimky pro odznaky variant zatím žádné nejsou. */@media(max-width:640px){} /* Výběr VELIKOSTI - vlastní řádek mezi SKLADEM/DODÁNÍ a +/- kusů, sdílí layout .vmeta. .csel-toggle je jinak vždy width:100%, proto je tady container záměrně užší, ať nezabírá celý řádek jako select ve formuláři. */ .vsize-csel{flex:0 0 auto;width:150px;max-width:60%} .vsize-toggle{height:36px;padding:0 12px;font-size:14px} .vsize-toggle .csel-caret{width:10px;height:10px} .vrow-info{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex:1 1 auto} .vprice{font-size:18px;font-weight:700;color:var(--accent);white-space:nowrap} .vprice small{font-size:13px;font-weight:500;color:var(--text3)} .vrow-actions{display:flex;align-items:center;gap:10px;margin-left:auto} /* ⚠️ Pro .related-grid ("Mohlo by se ti hodit") schválně NENÍ žádná výjimka. Zarovnání musí být všude stejné - cena vlevo, celá skupina ovládání pohromadě vpravo, což zařizuje margin-left:auto na .vrow-actions výš. */ /* Karta ve výpisu - cena + počet + Přidat MUSÍ zůstat v jednom řádku i na úzké kartě a mobilu (viz i @media(max-width:640px) níž). Kompaktnější rozměry qty tlačítek a Přidat dělají místo, ať se to vejde vedle sebe. */ .vrow-card{flex-wrap:nowrap;gap:6px;padding:10px 0} /* ⚠️ Cena se nesmí smršťovat. S flex-shrink:1 a min-width:0 se .vrow-info smrskne pod šířku obsahu, .vprice má white-space:nowrap, takže text nezalomí, ale přeteče a překryje se s .vrow-actions vedle. V nouzi ustupuje .vrow-actions, ne cena. */ .vrow-card .vrow-info{flex:0 0 auto;min-width:auto} .vrow-card .vprice{font-size:16px} .vrow-card .vrow-actions{flex-shrink:1;gap:6px;min-width:0} /* .qc musí mít stejnou výšku jako tlačítko Přidat (.abtn dědí 40px z .btn1). */ .vrow-card .qc{height:40px} .vrow-card .qb{width:26px;font-size:14px} .vrow-card .qv{width:26px;font-size:13px} .vrow-card .abtn{padding:0 10px;font-size:13px;gap:4px} /* ===== VARIANTA - detail produktu ===== Každá varianta je vlastní .det-section.vsec se 3-4 řádky (.vsec-row): SKLADEM/DODÁNÍ (bez čáry), VARIANTA + barva, VELIKOST (nepovinně) a cena/qty/Přidat (bez čáry). Odsazení od čar dělá padding na .vsec-row. */ .vsec{margin-bottom:20px} .vsec-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0} .vsec-border{border-bottom:1px solid var(--bg3)} .vsec-stock{justify-content:flex-end;padding-bottom:0} .vsec-lbl{font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--text3);text-transform:uppercase} .vsec-val{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--text)} /* Poslední řádek sekce je pořád .vrow (sdílí layout s kartou výpisu), jen se mu vypne border-top - jinak by s čárou řádku nad ním vznikla dvojitá čára. */ .vsec-price{border-top:0;padding-top:14px} /* Kolečko s barvou varianty - napravo od názvu varianty. */ .vswatch{width:40px;height:40px;border-radius:50%;border:2px solid var(--border);flex-shrink:0} /* "Zobrazit varianty" na kartě produktů s víc variantami - obyčejný odkaz na detail. V klidu tlumené --accent-lt se světle růžovým textem, při hoveru zesytí na plnou --accent s bílým textem jako .btn1. */ .btn-varianty{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:var(--r);font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;background:var(--accent-lt);color:var(--accent-fg);transition:all .3s ease;cursor:pointer} .btn-varianty:hover,.btn-varianty:active,.btn-varianty:focus-visible{background:var(--accent);color:#fff} .vrow-card .btn-varianty{font-size:13px;padding:0 12px} /* ===== QUANTITY CONTROLS ===== */ .qc{display:flex;align-items:center;height:40px;border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden} .qb{background:var(--bg2);border:0;width:32px;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;color:var(--text);font-size:16px;font-weight:700;line-height:1} .qb:hover{background:var(--bg3)} .qv{width:38px;padding:0;text-align:center;font-size:15px;font-weight:600;font-family:inherit;border:0;border-radius:0;background:var(--bg2);height:100%;outline:0} /* .abtn se používá spolu s .btn1 (class="btn1 abtn"), barvu a tvar tedy dává .btn1 - tady zůstávají jen odlišnosti: netáhne se na 100 % šířku, nezalamuje text a je zarovnané doprava. Vlastní :disabled je záměrně přísnější než .btn1:disabled - je to referenční "vypnutý" vzhled pro zbytek appky (viz .acc-tab-disabled). */ .abtn{width:auto;white-space:nowrap;gap:6px;margin-left:auto} .abtn:disabled{background:var(--bg3);opacity:.4;cursor:not-allowed;pointer-events:none} /* Uvnitř .vrow-actions řeší pozici rodič, takže se auto margin z .abtn (potřebný jinde, např. v košíku) vypíná. */ .vrow-actions .abtn{margin-left:0} /* ===== CART PANEL ===== */ .cpanel{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden} .citem{display:flex;align-items:center;padding:16px 24px;border-bottom:1px solid var(--bg2);gap:16px} .cinfo{flex:1;min-width:0} .cname{font-size:15px;font-weight:600;margin-bottom:2px;word-wrap:break-word;overflow-wrap:break-word} .cname-link{color:var(--text);text-decoration:none;transition:all .3s ease} .cname-link:hover{color:var(--accent);text-decoration:underline} .cvar{font-size:13px;color:var(--text3)} /* Vyprodaná položka v košíku (viz renderCartPage() v js/cart-page.js). */ .citem-out{opacity:.7} .cvar-out{font-size:12.5px;font-weight:700;color:var(--danger);margin-top:4px} /* Pevná šířka ceny (bez ohledu na počet číslic) - jinak by sloupec s počtem kusů byl v každém řádku jinde. */ .cprc{font-size:16px;font-weight:700;color:var(--accent);white-space:nowrap;flex-shrink:0;min-width:120px;text-align:right} .crem{background:0 0;border:0;color:var(--text3);cursor:pointer;width:40px;height:40px;padding:0;border-radius:var(--r);transition:all .3s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0} .crem:hover{color:var(--accent);background:var(--bg2)} .qv-display{display:flex;align-items:center;justify-content:center} .empty-ic{color:var(--text3)} .csum{background:var(--bg);padding:20px 24px;border-top:1.5px solid var(--border)} /* "Celkem" + částka vždy na jednom řádku (i na mobilu) - proto nowrap, ne flex-wrap. */ .ctot{display:flex;justify-content:space-between;align-items:center;font-size:18px;font-weight:700;margin-bottom:16px;gap:12px;flex-wrap:nowrap} /* Stejný princip jako .acm-actions v adminu: na desktopu tlačítka jen tak velká, aby se vešel text, zarovnaná doprava; na mobilu (media query níž) pružná šířka, takže se zalomí až když se opravdu nevejdou. */ .csum-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:flex-end} .csum-actions .btn1,.csum-actions .btn2{width:auto;padding:11px 20px} /* ===== CHECKOUT ===== */ .cogrid{display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start} .cosec{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r);padding:24px;margin-bottom:20px} .cosec h3{font-size:17px;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:10px} .cosec>:last-child{margin-bottom:0} /* ===== FORMULÁŘ - sjednocené paddingy a marginy ===== */ .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px} .fgrid:last-child{margin-bottom:0} .fgrid .full,.fg-full{grid-column:1/-1} /* Adresa - Ulice/Č.p./Č.o. a Město/PSČ vždy vedle sebe v jednom řádku i na mobilu (na rozdíl od .fgrid výš, který se pod 640px zalomí do sloupce). minmax(0,...) brání přetečení užších sloupců na úzkých mobilech. */ .addr-row-3{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:8px} .addr-row-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px} .fg{display:flex;flex-direction:column} /* Lehčí popisky - normální velikost písmen a nižší váha, kapitálky a tučné na tmavém pozadí křičely. */ .fg label{display:block;font-size:13px;font-weight:500;color:var(--text2);margin-bottom:7px} /* Vzhled samotných polí jde ze sdíleného :where(input,select,textarea) v base.css. */ /* Hint text pod inputem */ .fg-hint{display:block;font-size:12px;color:var(--text3);margin-top:5px;line-height:1.4;transition:color .15s} .fg-hint-err{color:var(--accent);font-weight:600} /* ===== BUYER TABS (Firma / Soukromá osoba) ===== */ .buyer-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px} /* Stejná výška a síla ohraničení jako u inputů a tlačítek. */ .buyer-tab{background:var(--card);border:1px solid var(--border);border-radius:var(--r);font-family:inherit;font-size:15px;font-weight:600;height:40px;padding:0 17px;line-height:1;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--text2)} .buyer-tab:hover{border-color:var(--text3);color:var(--text)} .buyer-tab.on{background:var(--accent-lt);border-color:var(--accent);color:var(--accent-dk)} /* ===== CHECK ROW (checkbox + label) ===== Vlastní vzhled (appearance:none) místo nativního accent-color, ať checkbox vypadá jako ostatní pole a ne podle prohlížeče a OS. */ .check-row{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:15px;padding:8px 0 14px;user-select:none} .check-row input[type=checkbox]{ appearance:none;-webkit-appearance:none;-moz-appearance:none; width:20px;height:20px; margin:0; border:1.5px solid var(--border); border-radius:5px; background:var(--card); cursor:pointer; flex-shrink:0; position:relative; transition:all .15s; } .check-row input[type=checkbox]:hover{border-color:var(--text3)} .check-row input[type=checkbox]:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-lt)} .check-row input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)} .check-row input[type=checkbox]:checked::after{ content:''; position:absolute; left:6px;top:2px; width:5px;height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); } .check-row input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5} .check-row:has(input:disabled){cursor:not-allowed} .check-row span{font-weight:500;color:var(--text)} /* ===== CHECKOUT: nevyplněná/nevybraná místa ===== Zčervená celá sekce i nevybrané dlaždice a po dorolování jednou pulzne - samotná hláška pod dlaždicí je v dlouhém formuláři k přehlédnutí. Zapíná to _checkoutZvyrazniChyby() v js/checkout.js. */ .cosec.chk-invalid{border-color:var(--danger)} .cosec.chk-invalid > h3{color:var(--danger)} .sopt.chk-invalid{border-color:var(--danger)} @keyframes chk-pulse{ 0% {box-shadow:0 0 0 0 rgba(255,92,92,.45)} 70% {box-shadow:0 0 0 10px rgba(255,92,92,0)} 100% {box-shadow:0 0 0 0 rgba(255,92,92,0)} } .chk-pulse{animation:chk-pulse 1.1s ease-out 1} /* Kdo má v systému vypnuté animace, dostane jen statické zvýraznění. */ @media(prefers-reduced-motion:reduce){ .chk-pulse{animation:none} } /* ===== SHIPPING ===== */ .sopt{display:flex;align-items:center;padding:16px 18px;border:1.5px solid var(--border);border-radius:var(--r);margin-bottom:10px;cursor:pointer;transition:all .3s ease;gap:14px} .sopt:hover{border-color:var(--text3)} .sopt.sel{border-color:var(--accent);background:var(--accent-lt)} .srad{width:20px;height:20px;border-radius:var(--r-dot);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s} .sopt.sel .srad{border-color:var(--accent)} .srad i{width:10px;height:10px;border-radius:var(--r-dot);background:var(--accent);transform:scale(0);transition:transform .2s;display:block} .sopt.sel .srad i{transform:scale(1)} .sname{font-size:15px;font-weight:600} .sdesc{font-size:13px;color:var(--text3);margin-top:2px} /* Vybraná dlaždice má červené pozadí, na kterém je šedý popisek špatně čitelný - proto po výběru přepne na --accent-fg. */ .sopt.sel .sdesc{color:var(--accent-fg)} .sopt-info{flex:1} .sprc{font-size:15px;font-weight:700;white-space:nowrap} .sprc small{font-weight:500;color:var(--text3);font-size:11px} .ship-hint{background:var(--green-lt);border:1px solid #2c4a1e;border-radius:var(--r);padding:16px 14px;margin-top:6px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center} .ship-hint-txt{font-size:14px;color:var(--green);line-height:1.4} .ship-hint-txt strong{font-weight:700} .ship-hint-bell{display:inline-block;transform-origin:50% 0;animation:bellRing 2.2s ease-in-out infinite} .ship-hint-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:#0d1a08;font-size:15px;font-weight:600;height:40px;padding:0 17px;line-height:1;border-radius:var(--r);text-decoration:none;transition:all .3s ease} .ship-hint-btn:hover{background:#4ea828} /* ===== VÝDEJNÍ MÍSTO ZÁSILKOVNA ===== Přímo v dlaždici dopravy pod .sdesc (viz _shippingPickupRow() v js/checkout.js). */ .sopt-pickup{display:flex;align-items:center;gap:6px;margin-top:8px} /* Ikonka + odkaz jsou bílé (--text), ne značkově červené - čitelné v obou stavech dlaždice, takže tu na rozdíl od .sdesc a .fg-hint-err není potřeba zvláštní barva pro .sel. */ .sopt-pickup-ic{color:var(--text);flex-shrink:0;display:flex} .sopt-pickup-ic svg{width:15px;height:15px} .sopt-pickup-link{font-size:13px;font-weight:600;color:var(--text);text-decoration:underline} .sopt-pickup-link:hover{color:var(--text2)} /* Chybová hláška by na tmavě červeném pozadí vybrané dlaždice splynula, proto zesvětlí - stejný princip jako u .sdesc výš. */ .sopt.sel .fg-hint-err{color:var(--accent-fg)} @keyframes bellRing{0%,55%,100%{transform:rotate(0)}60%{transform:rotate(12deg)}65%{transform:rotate(-10deg)}70%{transform:rotate(8deg)}75%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}85%{transform:rotate(0)}} @media(prefers-reduced-motion:reduce){.ship-hint-bell{animation:none}} /* ===== ORDER SIDEBAR ===== */ .osb{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r);position:sticky;top:80px;overflow:hidden} .osb h3{padding:18px 20px 14px;font-size:17px;font-weight:700;border-bottom:1px solid var(--bg2)} .osb-vat-note{font-size:12px;font-weight:400;color:var(--text3)} .osb-items{max-height:260px;overflow-y:auto;padding:6px 0} .osb-row{display:flex;justify-content:space-between;padding:8px 20px;font-size:14px;gap:10px} .osb-row span:first-child{color:var(--text2);line-height:1.4;min-width:0} .osb-row span:last-child{font-weight:600;white-space:nowrap;flex-shrink:0} .osb-prod-link{color:var(--text2);text-decoration:none;border-bottom:1px dotted var(--text3);transition:all .3s ease} .osb-prod-link:hover{color:var(--accent);border-bottom-color:var(--accent)} /* marketingový banner dopravy */ .osb-ship-banner{margin:4px 16px 0;padding:12px 14px;border-radius:var(--r);font-size:13px} .osb-ship-banner strong{font-size:14px;font-weight:700} /* zdarma - řádkový zelený */ .osb-ship-free{display:flex;align-items:center;gap:12px;background:var(--green-lt);color:var(--green)} .osb-ship-free strong{display:block;margin-bottom:1px} .osb-ship-free span{display:block;line-height:1.35} .osb-ship-ico{font-size:20px;flex-shrink:0;line-height:1} /* pobídka - náklaďák vlevo, text vpravo, tlačítko pod */ .osb-ship-near{display:flex;flex-direction:column;gap:10px;background:var(--accent-lt);color:var(--accent-dk);padding:14px} .osb-ship-near-top{display:flex;align-items:center;gap:12px;text-align:left} .osb-ship-near-txt strong{color:var(--accent-dk);line-height:1.35;font-size:14px;font-weight:700} .osb-ship-sub{display:block;font-size:13px;line-height:1.3;margin-top:2px} .osb-ship-truck{font-size:30px;line-height:1;flex-shrink:0;display:inline-block;animation:truckBounce 1.4s ease-in-out infinite} .osb-ship-btn{display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-size:15px;font-weight:600;height:40px;padding:0 17px;line-height:1;border-radius:var(--r);text-decoration:none;transition:all .3s ease;text-align:center} .osb-ship-btn:hover{background:var(--accent-dk)} @keyframes truckBounce{0%,100%{transform:translateY(0)}25%{transform:translateY(-5px)}50%{transform:translateY(0)}55%{transform:translateY(-2px)}60%{transform:translateY(0)}} @media(prefers-reduced-motion:reduce){.osb-ship-truck{animation:none}} /* součtová sekce */ .osb-tot{border-top:1.5px solid var(--border);padding:16px 20px;margin-top:8px} .osb-tr{display:flex;justify-content:space-between;margin-bottom:9px;font-size:14px;gap:8px;color:var(--text2);align-items:center} .osb-tr span:last-child{white-space:nowrap;flex-shrink:0} .osb-tr span:first-child{min-width:0}.osb-total{margin-top:12px;padding-top:12px;border-top:1.5px solid var(--border);font-size:16px;font-weight:600;color:var(--text)} .osb-total span:last-child{font-weight:600} .osb-vat{font-size:13px;margin-bottom:0;color:var(--text3)} .osb-vat span:last-child{font-weight:600;color:var(--accent)} /* cena v dlaždici dopravy/platby */ .sprc-strike{text-decoration:line-through;color:var(--text3);font-weight:500;font-size:13px}.sprc-badge{display:inline-block;background:var(--green-lt);color:var(--green);font-size:12px;font-weight:700;padding:4px 10px;border-radius:var(--r-pill);letter-spacing:.3px;vertical-align:middle} /* ===== CONFIRMATION ===== */ .cfbox{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r);padding:48px;text-align:center;max-width:640px;margin:40px auto} .cficon{width:72px;height:72px;background:var(--green-lt);border-radius:var(--r-dot);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:var(--green)} .cfbox h2{font-family:var(--font-display);font-size:28px;margin-bottom:12px;font-weight:700;letter-spacing:-1px} .cfbox>p{color:var(--text2);font-size:15px;line-height:1.6} .cfdet{background:var(--bg);border-radius:var(--r);padding:20px;margin-top:24px;text-align:left} .cfdet h4{font-size:15px;font-weight:600;margin-bottom:12px} /* Cena vpravo se NIKDY nesmí zalomit mezi číslo a „Kč" - u dlouhých názvů položek se jinak pravý sloupec zúží a vznikne „897" a „Kč" pod sebou. Proto levý sloupec min-width:0 (zalamuje se on) a pravý nowrap. */ .cfr{display:flex;justify-content:space-between;gap:16px;font-size:15px;padding:4px 0} .cfr span:first-child{color:var(--text3);min-width:0} .cfr span:last-child{text-align:right} .cfr .cf-cena{white-space:nowrap;flex-shrink:0} /* Výdejní místo Zásilkovna na potvrzení objednávky (viz fuOrderDeliveryLabel() v js/form-utils.js). */ .cf-address-box{background:var(--bg);border-radius:var(--r);padding:20px;margin-top:16px;text-align:left} .cf-address-box h4{font-size:15px;font-weight:600;margin-bottom:8px} .cf-address-box p{font-size:15px;color:var(--text2);line-height:1.5} /* Confirmation utility */ .cf-empty{text-align:center;padding:40px;font-size:15px} .cf-empty-link{color:var(--accent)} .cf-shipping-row{border-top:1px solid var(--border);margin-top:8px;padding-top:8px} /* Míchaná objednávka (zboží + vstupenka): druhý řádek pod názvem dopravy, ať se na mobilu dlouhý text neláme přes celý souhrn. */ .cf-ship-plus{display:block;font-size:12px;color:var(--text3);line-height:1.45;margin-top:2px} .cf-total-row{font-weight:700;font-size:16px;margin-top:8px} .cf-total-row span:last-child{color:var(--accent)} .cf-back-btn{margin-top:24px}/* ===== ADMIN ===== */.atw{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r);overflow-x:auto} .at{width:100%;border-collapse:collapse;font-size:15px;min-width:700px} .at th{background:var(--bg2);padding:12px 16px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);border-bottom:1.5px solid var(--border)} .at td{padding:12px 16px;border-bottom:1px solid var(--bg2);vertical-align:top} .at tr:hover td{background:var(--bg)} /* ===== IKONY (SVG velikosti 1em) ===== */ .ic{display:inline-block;vertical-align:-.125em;flex-shrink:0;width:1em;height:1em} .ptitle .ic{width:.85em;height:.85em} .cfbox h2 .ic{width:.85em;height:.85em} /* ===== UTILITY LAYOUT ===== */ .fg-mb{margin-bottom:18px} /* sladěno s gapem .fgrid výš */ .btn-block{width:100%;justify-content:center} .btn-submit-order{margin-bottom:24px} .mt-20{margin-top:20px} /* ===== AUTH (přihlášení / registrace / zapomenuté heslo) ===== Vždy je vidět jen JEDEN boxík - přepíná authSwitchBox() přes .auth-box.on, tady je jen vzhled. */ .auth-switcher{max-width:560px;margin:0 auto} /* Výjimka jen pro nadpis nad přihlašovacím boxíkem - má stejnou šířku a zarovnání jako .auth-switcher pod ním. Nastavuje SCHVÁLNĚ jen levý a pravý margin, svislé mezery zůstávají na .ptitle. */ .auth-heading{max-width:560px;margin-left:auto;margin-right:auto} .auth-box{display:none} .auth-box.on{display:block} .auth-intro{color:var(--text2);font-size:15px;margin-bottom:18px;line-height:1.5} /* Přepínač E-mail / Telefon / IČO přímo nad polem přihlášení a zapomenutého hesla. Podtržené záložky, stejný vzhled jako .gtab a .ao-tab. flex:1 rozloží 2 i 3 záložky rovnoměrně samo, žádná třída podle počtu netřeba. Vodorovný padding kontejneru je SCHVÁLNĚ nenulový - podtržení krajních záložek pak nezasahuje do zaoblených rohů pole pod nimi. */ .auth-mode-tabs{display:flex;padding:0 10px;margin-bottom:7px} .auth-mode-tab{flex:1;background:0 0;border:0;border-bottom:2px solid transparent;font-family:inherit;font-size:13px;font-weight:600;color:var(--text3);padding:0 2px 7px;line-height:1.2;cursor:pointer;transition:all .3s ease;text-align:center;white-space:nowrap} .auth-mode-tab:hover{color:var(--text2);border-bottom-color:var(--text3)} .auth-mode-tab.on{color:var(--accent);border-bottom-color:var(--accent)} /* Hlášky přihlášení/registrace tu SCHVÁLNĚ nemají vlastní styl - jdou vždy přes showToast() jako všechny ostatní hlášky v appce, ať existuje jen jedna cesta, jak se hláška zobrazí. */ /* Přepínací odkazy pod tlačítkem boxíku ("Nemám účet" apod.). */ .auth-switch{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;font-size:14px} .auth-switch a{color:var(--text2);text-decoration:underline;text-underline-offset:2px;cursor:pointer;transition:color .3s ease} .auth-switch a:hover{color:var(--text)} .auth-switch-dot{color:var(--text3);font-size:6px} /* ===== KONTAKT STRÁNKA ===== */ /* Sloupec s dopravou je v HTML první, aby byl na mobilu nahoře; na desktopu ho pořadím (order) přehodíme doprava. */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start} .contact-col-right{order:1} .contact-col-left{order:2}/* .contact-fakt, .ship-hero-badge a .ship-phone-link jsou definované až níž (Fakturační tabulka / SHIP OPTIONS) - schválně každá jen na jednom místě, dřív tu byly starší duplicitní kopie. *//* Výdejní místo */.pickup-row .ic{margin-top:1px;flex-shrink:0;color:var(--green)}/* ===== SHIP OPTIONS ===== */ .ship-option{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r);padding:18px;margin-bottom:12px} .ship-option:last-child{margin-bottom:0} .ship-option-header{display:flex;align-items:center;gap:14px;margin-bottom:12px} .ship-option-icon{width:44px;height:44px;border-radius:var(--r-dot);background:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text2);border:1.5px solid rgba(0,0,0,.06)} .ship-option-green .ship-option-icon{background:var(--green-lt);color:var(--green);border-color:rgba(106,207,57,.25)} /* Specifická barva pro PPL (truck = červená/accent) */ .ship-option:not(.ship-option-green) .ship-option-icon{background:var(--accent-lt);color:var(--accent-fg);border-color:rgba(211,47,47,.15)} .ship-option-info{flex:1;min-width:0} .ship-option-info strong{display:block;font-size:16px;font-weight:700;color:var(--text)} .ship-option-info span{font-size:13px;color:var(--text3)} .ship-option-price{font-size:18px;font-weight:700;color:var(--accent);white-space:nowrap;flex-shrink:0} .ship-option-price small{font-size:13px;font-weight:500;color:var(--text3);margin-left:2px} .ship-option-desc{font-size:15px;color:var(--text2);line-height:1.6;margin-bottom:0} .ship-option-green .ship-option-desc{color:var(--green)} /* ===== O NÁS ===== */ .about-text{display:flex;flex-direction:column;gap:12px} .about-text p{font-size:15px;color:var(--text2);line-height:1.7}/* ===== ADMIN HLAVIČKA - přihlášený uživatel ===== */.at-email{font-size:11px;color:var(--text3)} /* ===== INFO BANNER (search across sections) ===== */ .search-info{background:var(--bg2);padding:12px 16px;border-radius:var(--r);margin-bottom:20px;font-size:15px;color:var(--text2);display:flex;align-items:center;gap:10px;flex-wrap:wrap} .search-info strong{color:var(--text)} /* ===== RESPONSIVE ===== */ @media(max-width:840px){ .cogrid{grid-template-columns:1fr} .related-grid{grid-template-columns:repeat(2,1fr)} .osb{position:static;max-height:none} .osb-items{max-height:none} /* na mobilu nejdřív shrnutí, pak formulář */ #checkoutSidebar{order:1} #checkoutMain{order:2} } @media(max-width:768px){ /* Kontakt: jednosloupcové, pravá (doprava) nahoře, levá dole */ .contact-grid{grid-template-columns:1fr} .contact-col-right{order:1} .contact-col-left{order:2} } @media(max-width:640px){ .hero{padding:28px 22px} .hero h1{font-size:25px} .hero-perks{grid-template-columns:1fr 1fr;gap:10px} /* Na mobilu má lišta sekcí celý řádek pro sebe a tlačítka pořadí jsou na vlastním řádku pod ní, zarovnaná doprava. */ .gtabs-row{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:10px} .gtabs-row .sort-actions{align-self:flex-end;margin-bottom:0} .grid{grid-template-columns:1fr} .related-grid{grid-template-columns:1fr} .fgrid{grid-template-columns:1fr} .fgrid .full,.fg-full{grid-column:1} /* .addr-row-3/.addr-row-2 zůstávají ZÁMĚRNĚ vícesloupcové i tady - jen se zúží padding a mezery. */ .addr-row-3,.addr-row-2{gap:6px} .addr-row-3 .fg input,.addr-row-2 .fg input{padding:8px 10px} /* Pod 640px má každá varianta v DETAILU produktu 2 řádky: cena nahoře, +/-/Přidat dole, obě skupiny přes celou šířku. Karta ve výpisu (.vrow-card) tohle zalomení nemá, proto se pravidla dvěma řádky níž zase vracejí zpět. ⚠️ Je to JEDINÉ místo, kde .vrow-actions nedrží pohromadě vpravo, a je to záměr - prvky tu stojí na vlastním řádku pod cenou, takže "vpravo" by nechalo půl řádku prázdnou a dotykové cíle malé. */ .vrow-info{width:100%} .vrow-actions{width:100%;margin-left:0;justify-content:space-between} .vrow-card .vrow-info{width:auto} .vrow-card .vrow-actions{width:auto;margin-left:auto;justify-content:flex-end} .cfbox{padding:32px 20px} /* Košík na mobilu */ .citem{padding:14px 16px;flex-wrap:wrap;gap:8px;position:relative} .cinfo{flex:1 1 calc(100% - 44px);min-width:0} .citem .qc{order:2;flex-shrink:0} .cprc{order:3;flex:1;text-align:right} .crem{position:absolute;top:10px;right:10px} .csum{padding:14px 16px} .ctot{font-size:16px} /* Tlačítka mají stejnou pružnou šířku - vedle sebe, když se obě vejdou, jinak se každé zalomí na celý řádek. POZOR: flex musí být na přímém potomkovi .csum-actions (obalující ), ne na