/* ============================================================ KAMÍNKY.EU — REDESIGN LAYER ("Premium Natural Editorial") Design tokeny + inkrementální reskin nad legacy CSS. Light = default; dark přes . Načítá se AŽ ZA legacy style.min.css, takže přepisuje. ============================================================ */ /* ---------- BARVOVÉ TOKENY ---------- */ :root, :root[data-theme="light"] { --bg:#FAF7F1; --surface:#FFFFFF; --surface-2:#F3ECE0; --border:#E5DCCB; --border-2:#D6C9B2; --text:#1C1917; --text-2:#5B5344; --text-3:#8A8172; --accent:#B8791F; --accent-ink:#8A5A16; --on-accent:#1C1917; --amethyst:#6D4C7D; --terracotta:#C0492E; --sage:#5E6B3E; --card-shadow:0 10px 30px rgba(28,25,23,.07); --hairline:rgba(28,25,23,.09); --header-bg:#1C1917; --header-fg:#F5EFE3; --header-muted:#B9AE97; --btn-glow:rgba(184,121,31,.30); --btn-glow-strong:rgba(184,121,31,.42); } :root[data-theme="dark"] { color-scheme:dark; /* nativní scrollbary/formuláře v tmavé */ --bg:#15110C; --surface:#221B14; --surface-2:#2A2318; --border:#3A3125; --border-2:#4C4030; --text:#F5EFE3; --text-2:#CBBEA5; --text-3:#9A8E76; --accent:#E4C07A; --accent-ink:#E9C888; --on-accent:#1C1917; --amethyst:#C3A9D6; --terracotta:#C0492E; --sage:#A6B57E; --card-shadow:0 14px 36px rgba(0,0,0,.45); --hairline:rgba(255,255,255,.08); --header-bg:#100C09; --header-fg:#F5EFE3; --header-muted:#9A8E76; --btn-glow:rgba(228,192,122,.26); --btn-glow-strong:rgba(228,192,122,.40); } /* ---------- NEBAREVNÉ TOKENY ---------- */ :root { --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif; --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --r-sm:11px; --r-md:14px; --r-lg:16px; --r-pill:999px; --maxw:1200px; /* jemný „líc" tlačítka: světlo shora → stín dole (dodá hloubku, funguje na light i dark accentu) */ --btn-face:linear-gradient(180deg, rgba(255,255,255,.17), rgba(0,0,0,.06)); --btn-hi:inset 0 1px 0 rgba(255,255,255,.30); /* jemné zrno (SVG šum) — „papírová/kamenná“ textura pod hero pruhy */ --rd-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E"); } /* ---------- BASE ---------- */ html[data-theme] body { background:var(--bg) !important; color:var(--text) !important; font-family:var(--font-body) !important; font-size:17px !important; line-height:1.65 !important; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } html[data-theme] p { font-size:1rem; color:var(--text-2); } html[data-theme] ::selection { background:var(--accent); color:var(--on-accent); } /* nadpisy — Cormorant Garamond */ html[data-theme] h1, html[data-theme] h2, html[data-theme] h3, html[data-theme] h4 { font-family:var(--font-display) !important; color:var(--text) !important; font-weight:600 !important; letter-spacing:-.01em !important; text-transform:none !important; text-shadow:none !important; } html[data-theme] h1 { font-size:clamp(30px,5vw,46px) !important; line-height:1.1; margin:.2em 0 .6em; } html[data-theme] h2 { font-size:clamp(22px,3.4vw,30px) !important; } html[data-theme] h3 { font-size:20px !important; } /* odkazy */ html[data-theme] a { color:var(--accent-ink) !important; transition:color .2s ease; } html[data-theme] a:hover { color:var(--accent) !important; } /* seznamy — pryč s legacy li.png odrážkou v obsahu */ html[data-theme] .content ul li, html[data-theme] #main ul li { list-style-image:none !important; } /* ---------- HLAVIČKA (tmavý basalt pruh v obou tématech) ---------- */ html[data-theme] #head { height:auto !important; background:var(--header-bg) !important; border-bottom:1px solid var(--hairline); box-shadow:0 1px 24px rgba(0,0,0,.10); padding:6px 0; } html[data-theme] #head .inner { max-width:var(--maxw); } html[data-theme] #head, html[data-theme] #head a, html[data-theme] #head p { color:var(--header-fg) !important; } html[data-theme] #head .yellow, html[data-theme] #head #head_cart { color:var(--accent) !important; } /* zachovat ikonu lupy v hledání (jinak by ji přebilo tlačítkové stylování) */ html[data-theme] #head input[type="submit"], html[data-theme] #head_search input[type="submit"] { background-color:transparent !important; border:0 !important; box-shadow:none !important; } html[data-theme] #head_search input[type="text"] { background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.18) !important; color:var(--header-fg) !important; border-radius:var(--r-pill) !important; } /* ---------- HLAVNÍ MENU ---------- */ html[data-theme] #headmenu { background:var(--header-bg) !important; box-shadow:none; } html[data-theme] #headmenu .inner { background:transparent !important; border:0 !important; border-top:1px solid var(--hairline) !important; border-radius:0 !important; } html[data-theme] #headmenu a { color:var(--header-fg) !important; font-family:var(--font-body) !important; font-weight:500 !important; letter-spacing:.01em; } html[data-theme] #headmenu a:hover { color:var(--accent) !important; } /* ---------- OBSAH / PLOCHY ---------- */ html[data-theme] #maincont, html[data-theme] #main { background:transparent !important; } html[data-theme] .content > .inner { color:var(--text) !important; } /* ---------- PRODUKTOVÁ KARTA + VÝPIS ---------- Kompletní styl karty, mřížky a okolí výpisu je dole v samostatné sekci „PRODUKTOVÝ VÝPIS • MŘÍŽKA • KARTA" (na konci souboru). */ /* ---------- TLAČÍTKA (skutečná tlačítka, ne overlay .submit) ---------- Plná zlatá tlačítka: jemný glow, lift na hover, press na :active, decentní „shine" sweep (jen prvky s ::before — ho nemá). Animace pouze transform/opacity → prakticky nulový dopad na výkon. */ html[data-theme] .button, html[data-theme] .button_s, html[data-theme] input[type="submit"], html[data-theme] input[type="button"] { position:relative; overflow:hidden; background:var(--btn-face), var(--accent) !important; color:var(--on-accent) !important; border:0 !important; border-radius:var(--r-pill) !important; font-family:var(--font-body) !important; font-weight:600 !important; letter-spacing:.07em !important; text-transform:uppercase !important; text-shadow:none !important; /* legacy .card .cart a / .submit_cart mají emboss text-shadow:1px 1px #efdcb9 */ box-shadow:0 2px 8px var(--btn-glow), var(--btn-hi) !important; padding:.72em 1.6em !important; cursor:pointer; transition:transform .16s ease, box-shadow .22s ease, background .2s ease, color .2s ease; } html[data-theme] .button:hover, html[data-theme] .button_s:hover, html[data-theme] input[type="submit"]:hover, html[data-theme] input[type="button"]:hover { background:var(--btn-face), var(--accent-ink) !important; color:#fff !important; transform:translateY(-2px); box-shadow:0 10px 24px var(--btn-glow-strong), var(--btn-hi) !important; } html[data-theme] .button:active, html[data-theme] .button_s:active, html[data-theme] input[type="submit"]:active, html[data-theme] input[type="button"]:active { transform:translateY(0) scale(.98); box-shadow:0 2px 6px var(--btn-glow) !important; transition-duration:.05s; } html[data-theme] .button:focus-visible, html[data-theme] .button_s:focus-visible, html[data-theme] input[type="submit"]:focus-visible, html[data-theme] input[type="button"]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } /* „shine" sweep — jen elementy s pseudem (a/button/span), ne */ html[data-theme] .button::before, html[data-theme] .button_s::before { content:""; position:absolute; top:0; left:0; width:60%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform:translateX(-180%) skewX(-18deg); pointer-events:none; transition:transform .6s ease; } html[data-theme] .button:hover::before, html[data-theme] .button_s:hover::before { transform:translateX(280%) skewX(-18deg); } @media (prefers-reduced-motion:reduce){ html[data-theme] .button, html[data-theme] .button_s, html[data-theme] input[type="submit"], html[data-theme] input[type="button"]{ transition:background .2s ease, color .2s ease !important; } html[data-theme] .button:hover, html[data-theme] .button_s:hover, html[data-theme] input[type="submit"]:hover, html[data-theme] input[type="button"]:hover{ transform:none; } html[data-theme] .button::before, html[data-theme] .button_s::before{ display:none !important; } } /* ---------- FORMULÁŘE ---------- */ html[data-theme] input[type="text"], html[data-theme] input[type="email"], html[data-theme] input[type="password"], html[data-theme] input[type="tel"], html[data-theme] textarea, html[data-theme] select { background:var(--surface) !important; border:1px solid var(--border-2) !important; color:var(--text) !important; border-radius:var(--r-md) !important; font-family:var(--font-body) !important; font-size:15px !important; padding:.6em .8em !important; /* legacy má select{height:2em} i input[type=password]{height:2em}; s naším paddingem to nativní , ten by roztažené radio překrylo a nešel by rozbalit */ html[data-theme] #detail .atributy .atr_radio:not(:has(.atr_sub)) input.atr { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:pointer; z-index:1; } html[data-theme] #detail .atributy .atr_radio:has(input.atr:checked) { border-color:var(--accent); background:rgba(184,121,31,.10); box-shadow:inset 0 0 0 1px var(--accent); } html[data-theme] #detail .atributy .atr_radio:hover:not(:has(input.atr:disabled)) { border-color:var(--accent); } html[data-theme] #detail .atributy .atr_radio:has(input.atr:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; } html[data-theme] #detail .atributy .atr_radio:has(input.atr:disabled) { opacity:.45; cursor:not-allowed; } html[data-theme] #detail .atributy .atr_nazev { padding-left:0 !important; font-size:14px !important; font-weight:600 !important; color:var(--text) !important; } html[data-theme] #detail .atributy .atr_cena { padding:0 !important; font-size:13px !important; font-weight:600 !important; color:var(--accent-ink) !important; } html[data-theme] #detail .atributy .atr_parametr { position:static !important; top:auto !important; height:auto !important; display:inline !important; margin:0 !important; font-style:normal !important; font-size:12px !important; color:var(--text-3) !important; } html[data-theme] #detail .atributy .atr_sub { display:inline-block !important; position:relative; z-index:2; padding-left:8px !important; } /* select variant (velikost/parametr) = pořádný dropdown s vlastní šipkou, ať je čitelný a vypadá klikatelně (legacy byl holý nativní select) */ html[data-theme] #detail .atributy select { -webkit-appearance:none; -moz-appearance:none; appearance:none; width:auto !important; min-width:170px; max-width:100%; min-height:44px; margin:0 !important; padding:10px 40px 10px 15px !important; font-family:var(--font-body) !important; font-size:15px !important; font-weight:500 !important; color:var(--text) !important; background-color:var(--surface) !important; background-image:url('data:image/svg+xml;utf8,'); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; border:1px solid var(--border-2) !important; border-radius:var(--r-sm) !important; cursor:pointer; transition:border-color .18s ease, box-shadow .18s ease; } html[data-theme] #detail .atributy select:hover { border-color:var(--accent) !important; } html[data-theme] #detail .atributy select:focus { outline:none !important; border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(184,121,31,.15) !important; } html[data-theme] #detail .atributy select.atrsubselect { min-width:120px; } /* ---------- SPECIFIKACE (.attrib) ---------- */ html[data-theme] #detail .attrib { display:grid; grid-template-columns:minmax(0,40%) minmax(0,60%); gap:2px 16px; width:auto !important; padding:11px 0 !important; background:none !important; border-top:1px solid var(--hairline); font-size:14px !important; font-weight:400 !important; } html[data-theme] #detail .attrib.dark, html[data-theme] #detail .attrib.light { background:none !important; } html[data-theme] #detail .attrib span.atr_naz { display:block !important; width:auto !important; float:none !important; font-weight:400 !important; color:var(--text-3) !important; } html[data-theme] #detail .atributy span.atr_hodnota { display:block !important; width:auto !important; float:none !important; font-weight:600 !important; color:var(--text) !important; } html[data-theme] #detail #tabulka table { width:100% !important; font-size:14px !important; } /* ---------- POPIS ---------- */ html[data-theme] #detail .popis { max-height:none !important; overflow:visible !important; /* legacy .popis mělo 300px scroll → klipovalo obsah */ width:auto !important; max-width:72ch; margin:clamp(28px,4vw,48px) 0 0 !important; padding:clamp(24px,3vw,32px) 0 0 !important; border-top:1px solid var(--border); font-size:16px !important; line-height:1.75 !important; color:var(--text-2) !important; } /* barvy uvnitř bývají ze starého tmavého webu (#fff, #f0b72f) → paleta */ html[data-theme] #detail .popis p, html[data-theme] #detail .popis li, html[data-theme] #detail .popis div, html[data-theme] #detail .popis span { color:var(--text-2) !important; line-height:1.75; } html[data-theme] #detail .popis h1, html[data-theme] #detail .popis h2, html[data-theme] #detail .popis h3, html[data-theme] #detail .popis h4 { color:var(--text) !important; margin:1.4em 0 .5em !important; } html[data-theme] #detail .popis h1 { font-size:27px !important; } html[data-theme] #detail .popis h2 { font-size:23px !important; } html[data-theme] #detail .popis h3 { font-size:20px !important; } html[data-theme] #detail .popis img { max-width:100%; height:auto; border-radius:var(--r-md); } html[data-theme] #detail .popis .logo { max-width:120px !important; } /* ---------- SPEC TABULKA V POPISU ---------- Skoro každý produkt (1600 z 1690) má v popisu tuhle 2sloupcovou tabulku (obvod/váha, čakra, znamení, léčebné využití…). V administraci je to syrové WYSIWYG: inline zlatý border #fcb102, pevné šířky td, všechno v , align="center". Návrh: NE box s rámečkem a mřížkou (působilo „hranatě“), ale měkký zaoblený panel s teplým podkladem, vzdušné řádky, jen tlumené vodorovné linky — jako definice v magazínu. Inline styly → všude !important. */ html[data-theme] #detail .rd-spec { width:100% !important; max-width:500px; margin:26px 0 !important; /* přebít align="center" */ border-collapse:separate !important; border-spacing:0 !important; background:var(--surface-2) !important; border:0 !important; border-radius:var(--r-xl,22px); padding:clamp(6px,1.4vw,16px) clamp(16px,2.6vw,28px) !important; box-shadow:none !important; font-family:var(--font-body) !important; font-size:15px !important; } html[data-theme] #detail .rd-spec tbody, html[data-theme] #detail .rd-spec tr { background:none !important; } html[data-theme] #detail .rd-spec td { width:auto !important; height:auto !important; padding:15px 0 !important; vertical-align:baseline; border:0 !important; border-bottom:1px solid var(--border) !important; text-align:left !important; background:none !important; } /* poslední řádek bez linky (dvě buňky posledního řádku) */ html[data-theme] #detail .rd-spec tr:last-child td { border-bottom:0 !important; } /* levý sloupec = štítek jako tiché verzálkové eyebrow; ŽÁDNÁ svislá linka */ html[data-theme] #detail .rd-spec td:first-child { width:40% !important; padding-right:20px !important; } html[data-theme] #detail .rd-spec td:first-child strong, html[data-theme] #detail .rd-spec td:first-child span { font-size:11px !important; font-weight:600 !important; letter-spacing:.07em !important; text-transform:uppercase !important; color:var(--text-3) !important; line-height:1.55 !important; } /* pravý sloupec = hodnota inkoustem, klidně větší */ html[data-theme] #detail .rd-spec td:last-child, html[data-theme] #detail .rd-spec td:last-child strong, html[data-theme] #detail .rd-spec td:last-child span { font-size:15px !important; font-weight:500 !important; color:var(--text) !important; line-height:1.6 !important; } /* fallback pro buňky bez / */ html[data-theme] #detail .rd-spec strong, html[data-theme] #detail .rd-spec span { font-size:inherit; line-height:inherit; } /* A/B/C hodnoty jsou každá ve vlastním
→ nechat jako řádky (dřív display:inline je slepovalo do „16cmB: 17cm“) */ html[data-theme] #detail .rd-spec td > div { display:block; } /* odkazy (čakra/znamení → probud.se) */ html[data-theme] #detail .rd-spec a { color:var(--accent-ink) !important; font-weight:600 !important; text-decoration:underline; text-underline-offset:2px; } html[data-theme] #detail .rd-spec a:hover { color:var(--accent) !important; } @media (max-width:520px){ html[data-theme] #detail .rd-spec { padding:2px 16px !important; } html[data-theme] #detail .rd-spec td { padding:13px 0 !important; } html[data-theme] #detail .rd-spec td:first-child { width:42% !important; padding-right:14px !important; } } /* rd-spec POJISTKA: inline styl přebíjíme natvrdo, ať nikde neprosvítá zlatý rámeček ani pevné šířky */ html[data-theme] #detail .rd-spec, html[data-theme] #detail .popis .rd-spec { border:0 !important; background:var(--surface-2) !important; border-radius:var(--r-xl,22px) !important; box-shadow:none !important; width:100% !important; max-width:500px !important; } html[data-theme] #detail .rd-spec td { width:auto !important; } /* ---------- SOUVISEJÍCÍ PRODUKTY ---------- */ html[data-theme] #detail h3.alike { margin:clamp(32px,4vw,52px) 0 20px !important; padding:0 !important; font-family:var(--font-display) !important; font-size:clamp(22px,2.6vw,30px) !important; font-weight:600 !important; text-transform:none !important; color:var(--text) !important; } html[data-theme] #detail .whitebox_top, html[data-theme] #detail .whitebox_bot { display:none !important; } html[data-theme] #detail ul.small_gal { display:grid; gap:18px; overflow:visible !important; margin:0 0 8px !important; padding:0 !important; grid-template-columns:repeat(2,1fr); } @media (min-width:640px) { html[data-theme] #detail ul.small_gal { grid-template-columns:repeat(3,1fr); } } @media (min-width:1024px) { html[data-theme] #detail ul.small_gal { grid-template-columns:repeat(5,1fr); } } html[data-theme] #detail ul.small_gal li { display:flex; flex-direction:column; width:auto !important; height:auto !important; float:none !important; margin:0 !important; padding:0 !important; list-style:none !important; font-size:inherit !important; overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--card-shadow); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } html[data-theme] #detail ul.small_gal li:hover { transform:translateY(-4px); border-color:var(--border-2); box-shadow:0 18px 40px rgba(28,25,23,.14) !important; } html[data-theme="dark"] #detail ul.small_gal li:hover { box-shadow:0 18px 44px rgba(0,0,0,.5) !important; } html[data-theme] #detail ul.small_gal li a { display:flex; flex-direction:column; text-decoration:none !important; } html[data-theme] #detail ul.small_gal .sg_img { width:100% !important; height:auto !important; aspect-ratio:1/1; margin:0 !important; padding:0 !important; overflow:hidden; background:var(--surface-2); border-bottom:1px solid var(--border); } html[data-theme] #detail ul.small_gal .sg_img img { width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:cover; object-position:center; display:block; transition:transform .5s ease; } html[data-theme] #detail ul.small_gal li:hover .sg_img img { transform:scale(1.06); } /* renderSmallGal dává názvu class="nazev", renderGroupGal holý */ html[data-theme] #detail ul.small_gal a > span:not(.sg_img) { height:auto !important; padding:12px 14px 0 !important; margin:0 !important; font-family:var(--font-display) !important; font-size:17px !important; font-weight:600 !important; line-height:1.25 !important; color:var(--text) !important; text-align:left; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } html[data-theme] #detail ul.small_gal li:hover a > span:not(.sg_img) { color:var(--accent-ink) !important; } html[data-theme] #detail p.alike_cena { margin:0 !important; padding:6px 14px 14px !important; font-family:var(--font-body) !important; font-size:17px !important; font-weight:700 !important; color:var(--accent-ink) !important; text-align:left; } html[data-theme] #detail p.alike_cena .sleva { position:static !important; margin-left:8px; font-size:72% !important; font-weight:400 !important; color:var(--text-3) !important; text-decoration:line-through; } @media (prefers-reduced-motion:reduce){ html[data-theme] #detail input[type="submit"].submit_cart, html[data-theme] #detail ul.small_gal li { transition:background-color .2s ease, color .2s ease !important; } html[data-theme] #detail input[type="submit"].submit_cart:hover, html[data-theme] #detail ul.small_gal li:hover { transform:none; } html[data-theme] #detail ul.small_gal li:hover .sg_img img { transform:none; } } .elastislide-wrapper{ height: 100% !important; } /* ============================================================ TOASTER (nahrazuje nativní alert() — košík, dostupnost, ověření) Volá se přes window.rdToast(zpráva, 'error'|'success'|'info'). Markup dělá js/redesign.js (rdToast). ============================================================ */ #rd-toasts { position:fixed; z-index:4000; top:calc(var(--rd-header-h,64px) + 14px); right:16px; display:flex; flex-direction:column; gap:10px; width:min(92vw,380px); pointer-events:none; } @media (max-width:560px){ #rd-toasts { left:16px; right:16px; width:auto; top:12px; } } .rd-toast { --toast-accent:var(--accent); pointer-events:auto; position:relative; display:flex; align-items:flex-start; gap:11px; padding:13px 42px 13px 14px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-left:3px solid var(--toast-accent); border-radius:var(--r-md); box-shadow:0 16px 40px rgba(28,25,23,.20); font-family:var(--font-body); font-size:14px; line-height:1.45; opacity:0; transform:translateY(-8px) scale(.98); transition:opacity .28s var(--ease,ease), transform .28s var(--ease,ease); } html[data-theme="dark"] .rd-toast { box-shadow:0 16px 40px rgba(0,0,0,.5); } .rd-toast--in { opacity:1; transform:none; } .rd-toast--out { opacity:0; transform:translateY(-8px) scale(.98); } .rd-toast--error { --toast-accent:var(--terracotta); } .rd-toast--success { --toast-accent:var(--sage); } .rd-toast--info { --toast-accent:var(--accent); } .rd-toast__ico { flex:0 0 20px; width:20px; height:20px; margin-top:1px; color:var(--toast-accent); } .rd-toast__ico svg { width:20px; height:20px; display:block; } .rd-toast__msg { flex:1 1 auto; color:var(--text-2); font-weight:500; } .rd-toast__x { position:absolute; top:7px; right:7px; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; padding:0; background:none; border:0; border-radius:50%; color:var(--text-3); cursor:pointer; transition:color .15s ease, background .15s ease; } .rd-toast__x svg { width:15px; height:15px; } .rd-toast__x:hover { color:var(--terracotta); background:var(--surface-2); } .rd-toast__x:focus-visible { outline:2px solid var(--accent); outline-offset:1px; } @media (prefers-reduced-motion:reduce){ .rd-toast { transition:opacity .2s ease; transform:none; } .rd-toast--in, .rd-toast--out { transform:none; } } /* ============================================================ STRÁNKA „DODACÍ PODMÍNKY" (#dodaci-podminky) Obsah = legacy WYSIWYG z administrace: vše zabalené v , inline barvy #ff0000/#ff6600/#ff9900, text-align:justify, font-size:x/xx-large, zdvojené
, tabulky bez tříd (2 cenové + 1 obrázková „dárkové balení"). Přebíjíme inline styly (!important) a skládáme z toho čistou brandovou stránku; obsah zůstává editovatelný v adminu. ============================================================ */ html[data-theme] #dodaci-podminky { max-width:820px; margin-left:auto !important; margin-right:auto !important; color:var(--text) !important; line-height:1.75; text-align:left !important; font-size:16px; } html[data-theme] #dodaci-podminky h1 { font-family:var(--font-display) !important; font-weight:600 !important; font-size:clamp(28px,6vw,40px) !important; line-height:1.1; margin:0 0 .7em !important; } /* — normalizace WYSIWYG chaosu — */ html[data-theme] #dodaci-podminky [style*="text-align"] { text-align:left !important; } html[data-theme] #dodaci-podminky [style*="font-size"] { font-size:inherit !important; } html[data-theme] #dodaci-podminky br + br { display:none; } html[data-theme] #dodaci-podminky strong { font-weight:500 !important; } /* vše je → klidná střední váha */ html[data-theme] #dodaci-podminky [style*="#ff9900"], html[data-theme] #dodaci-podminky [style*="#ff6600"] { color:var(--accent-ink) !important; } html[data-theme] #dodaci-podminky [style*="#ff0000"] { color:var(--terracotta) !important; font-weight:700 !important; } html[data-theme] #dodaci-podminky > div { margin:0 0 .5em; } /* — „Platba": v markupu je to jen velký červený , ne

→ povýšíme na nadpis sekce (pravidlo je ZA normalizací font-size i barvy, aby vyhrálo) — */ html[data-theme] #dodaci-podminky [style*="xx-large"] { display:block; font-family:var(--font-display) !important; font-weight:600 !important; font-size:clamp(20px,5vw,26px) !important; color:var(--text) !important; margin:1.9em 0 .5em; padding-bottom:.45em; border-bottom:2px solid var(--accent); } /* — sekce (H2) s logem přepravce — */ html[data-theme] #dodaci-podminky h2 { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-family:var(--font-display) !important; font-weight:600 !important; font-size:clamp(19px,4.5vw,25px) !important; line-height:1.2; color:var(--text) !important; margin:2em 0 .5em !important; padding-bottom:.45em; border-bottom:2px solid var(--accent); } html[data-theme] #dodaci-podminky h2 br { display:none; } html[data-theme] #dodaci-podminky h2 strong, html[data-theme] #dodaci-podminky h2 span { font-weight:inherit !important; color:inherit !important; } html[data-theme] #dodaci-podminky h2 img { height:36px !important; width:auto !important; border-radius:6px; background:#fff; padding:3px; box-sizing:content-box; box-shadow:0 1px 4px rgba(0,0,0,.14); } /* legacy WYSIWYG dává tabulkám inline height (gift tabulka má height:75px) → obsah přetéká z boxu a překrývá další odstavec. Nulujeme výšku i inline width. */ html[data-theme] #dodaci-podminky table, html[data-theme] #dodaci-podminky table tbody, html[data-theme] #dodaci-podminky table tr, html[data-theme] #dodaci-podminky table td { height:auto !important; } /* — cenové tabulky (poštovné): tabulky BEZ obrázků — */ html[data-theme] #dodaci-podminky table:not(:has(img)) { width:100% !important; max-width:none !important; border-collapse:separate; border-spacing:0; margin:.2em 0 1.1em; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; } html[data-theme] #dodaci-podminky table:not(:has(img)) td { padding:12px 15px !important; border-top:1px solid var(--border); width:auto !important; color:var(--text-2) !important; vertical-align:middle; } html[data-theme] #dodaci-podminky table:not(:has(img)) tr:first-child td { border-top:0; } html[data-theme] #dodaci-podminky table:not(:has(img)) td:first-child { font-weight:600; color:var(--text) !important; } html[data-theme] #dodaci-podminky table:not(:has(img)) td:nth-child(2) { color:var(--accent-ink) !important; font-weight:700; white-space:nowrap; } html[data-theme] #dodaci-podminky table:not(:has(img)) td:nth-child(3) { font-size:13px; color:var(--text-3) !important; font-weight:400; } html[data-theme] #dodaci-podminky table td strong { font-weight:inherit !important; color:inherit !important; } /* — „poštovné ZDARMA" prahy: h2/řádky s oranžovou barvou už mají accent; zvýrazníme klíčové věty s „ZDARMA" pomocí accent + váhy přes barevné mapování výše — */ /* — dárkové balení: tabulka S obrázky → prostý stacked layout, žádné rámečky — */ html[data-theme] #dodaci-podminky table:has(img), html[data-theme] #dodaci-podminky table:has(img) tbody, html[data-theme] #dodaci-podminky table:has(img) tr { display:block; width:auto !important; } html[data-theme] #dodaci-podminky table:has(img) td { display:block; width:auto !important; padding:4px 0 !important; border:0 !important; text-align:center; } html[data-theme] #dodaci-podminky table:has(img) img { max-width:190px; width:100%; height:auto !important; margin:10px auto 0; display:inline-block; border-radius:var(--r-md); border:1px solid var(--border); } @media (min-width:560px){ html[data-theme] #dodaci-podminky table:has(img) tr { display:flex; flex-wrap:wrap; align-items:center; gap:16px; justify-content:center; } html[data-theme] #dodaci-podminky table:has(img) td { flex:1 1 200px; } } /* ============================================================ COOKIE CONSENT (GDPR opt-in) — #cc-banner + #cc-modal Vlastní manažer (redesign.js) místo starého „pokračováním souhlasíte". Rovnocenná tlačítka Přijmout/Odmítnout, kategorie s přepínači, světlo/tma. ============================================================ */ /* --- lišta dole --- */ html[data-theme] #cc-banner { position:fixed; z-index:1000; left:16px; right:16px; bottom:16px; max-width:560px; margin:0 auto; display:none; flex-direction:column; gap:14px; /* reveal = display toggle (instant, spolehlivé i v throttlovaném tabu) */ background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:0 14px 44px rgba(0,0,0,.22); padding:20px 22px; } html[data-theme] #cc-banner.cc-show { display:flex; } html[data-theme] #cc-banner .cc-banner__title { font-family:var(--font-display); font-size:19px; font-weight:600; margin:0 0 4px; } html[data-theme] #cc-banner .cc-banner__text { margin:0; font-size:14px; line-height:1.6; color:var(--text-2); } html[data-theme] #cc-banner .cc-banner__text a { color:var(--accent-ink); text-decoration:underline; } html[data-theme] #cc-banner .cc-banner__actions { display:flex; flex-wrap:wrap; gap:8px; } /* --- tlačítka (Přijmout/Odmítnout rovnocenná) --- */ html[data-theme] .cc-btn { flex:1 1 auto; min-width:118px; padding:11px 16px; border-radius:var(--r-pill); font-family:var(--font-body); font-size:14px; font-weight:600; line-height:1; cursor:pointer; border:1px solid var(--border-2); background:var(--surface-2); color:var(--text); transition:background .18s, border-color .18s, color .18s, transform .1s, box-shadow .18s; } html[data-theme] .cc-btn:hover { border-color:var(--accent); } html[data-theme] .cc-btn:active { transform:translateY(1px); } html[data-theme] .cc-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } html[data-theme] .cc-btn--primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); box-shadow:0 4px 14px var(--btn-glow); } html[data-theme] .cc-btn--primary:hover { box-shadow:0 8px 22px var(--btn-glow-strong); } /* --- modal nastavení --- */ html[data-theme] #cc-modal[hidden] { display:none; } html[data-theme] #cc-modal { position:fixed; inset:0; z-index:1001; display:flex; align-items:center; justify-content:center; padding:16px; } html[data-theme] #cc-modal .cc-modal__overlay { position:absolute; inset:0; background:rgba(0,0,0,.5); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); } html[data-theme] #cc-modal .cc-modal__card { position:relative; z-index:1; width:100%; max-width:560px; max-height:88vh; overflow:auto; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:0 24px 64px rgba(0,0,0,.36); padding:26px 26px 22px; } html[data-theme] #cc-modal .cc-modal__close { position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; border:0; cursor:pointer; background:var(--surface-2); color:var(--text-2); display:inline-flex; align-items:center; justify-content:center; transition:background .18s, color .18s; } html[data-theme] #cc-modal .cc-modal__close:hover { background:var(--border); color:var(--terracotta); } html[data-theme] #cc-modal .cc-modal__close svg { width:18px; height:18px; } html[data-theme] #cc-modal .cc-modal__title { font-family:var(--font-display); font-size:24px; font-weight:600; margin:0 6px 6px 0; } html[data-theme] #cc-modal .cc-modal__lead { margin:0 0 18px; font-size:14px; color:var(--text-2); line-height:1.6; } html[data-theme] #cc-modal .cc-modal__actions { display:flex; flex-wrap:wrap; gap:8px; } /* --- kategorie --- */ html[data-theme] .cc-cats { list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:12px; } html[data-theme] .cc-cat { border:1px solid var(--border); border-radius:var(--r-md); padding:14px 16px; background:var(--surface-2); } html[data-theme] .cc-cat__head { display:flex; align-items:center; justify-content:space-between; gap:12px; } html[data-theme] .cc-cat__name { font-weight:600; font-size:15px; } html[data-theme] .cc-cat__lock { font-size:11px; color:var(--text-3); font-weight:600; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; } html[data-theme] .cc-cat__desc { margin:6px 0 0; font-size:13px; color:var(--text-2); line-height:1.55; } /* --- přepínač --- */ html[data-theme] .cc-switch { position:relative; display:inline-block; width:44px; height:24px; flex:0 0 auto; cursor:pointer; } html[data-theme] .cc-switch input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; } html[data-theme] .cc-switch__track { position:absolute; inset:0; background:var(--border-2); border-radius:999px; transition:background .18s; } html[data-theme] .cc-switch__track::before { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .18s; } html[data-theme] .cc-switch input:checked + .cc-switch__track { background:var(--accent); } html[data-theme] .cc-switch input:checked + .cc-switch__track::before { transform:translateX(20px); } html[data-theme] .cc-switch input:focus-visible + .cc-switch__track { outline:2px solid var(--accent); outline-offset:2px; } body.cc-modal-on { overflow:hidden; } /* překladač bez souhlasu → odkaz na nastavení cookies */ html[data-theme] .rd-translate-off { font-size:13px; color:var(--text-2) !important; text-decoration:underline; cursor:pointer; } html[data-theme] .rd-translate-off:hover { color:var(--accent-ink) !important; } html[data-theme] .cc-footer-link { cursor:pointer; } @media (max-width:560px){ html[data-theme] #cc-banner { left:8px; right:8px; bottom:8px; padding:16px 16px 14px; } html[data-theme] .cc-btn { flex:1 1 100%; } } /* ============================================================ OBJEDNÁVKOVÝ PROCES / CHECKOUT Pokrývá: #pokladna (views/pokladna.php — krok 2: doprava+platba, include includes/uhrada-a-doprava.php → renderDopravci/renderPlatby) #objednat (views/vase-udaje.php, objednat.php, uhrada-a-doprava.php — krok 3: rekapitulace + adresní/registrační formulář) .dokonceni / #result (views/objednavka-dokonceni.php — poděkování) Kroky (.steps), souhrn košíku (.table.kosik) a modaly jsou stylované výše — sem patří jen formulářová část, kterou legacy nechává neotémovanou. Radiová volba dopravy/platby má DVĚ markup varianty: • include (pokladna): #zaslat_jako > … > #dopravci .dopravce | #zpusob_platby #platby > div > span.show • legacy view (#objednat): #zaslat_jako … span[id].show | #zpusob_platby … span[id].show Proto scopujeme přes společné kontejnery #zaslat_jako / #zpusob_platby. POZOR: legacy .hide{display:none} NESMÍ přebít → volby scopujeme jen na .show/.dopravce. ============================================================ */ /* ---------- kontejner stránky ---------- */ html[data-theme] #pokladna.rightborder, html[data-theme] #objednat.rightborder { border:0 !important; background:transparent !important; padding:0 !important; } html[data-theme] #pokladna > h1, html[data-theme] #objednat > h1 { color:var(--text) !important; } /* legacy plovoucí utility uvnitř checkoutu, které nechceme */ html[data-theme] #pokladna .f_right, html[data-theme] #objednat .f_right { float:none !important; } html[data-theme] #pokladna .botspace, html[data-theme] #objednat .botspace { margin-bottom:18px !important; } /* sekční nadpisy uvnitř toku (Výběr dopravy, Způsob platby, …) */ html[data-theme] #pokladna h2, html[data-theme] #objednat h2 { margin:30px 0 12px !important; } html[data-theme] #zaslat_jako > h3, html[data-theme] #zpusob_platby > h3, html[data-theme] #pokladna h3.f_left { margin:0 0 12px !important; } /* ---------- fieldset jako karta ---------- legacy fieldset má tenký šedý rámeček + kurzívní legendu; překreslíme. */ html[data-theme] #pokladna fieldset, html[data-theme] #objednat fieldset { border:1px solid var(--border) !important; border-radius:var(--r-lg) !important; background:var(--surface) !important; margin:0 0 20px !important; padding:20px 22px !important; min-width:0; } /* = eyebrow popisek karty (NE span.legend, to je popiska radia) */ html[data-theme] #pokladna fieldset > legend, html[data-theme] #objednat fieldset > legend { font-family:var(--font-body) !important; font-size:11px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.1em !important; font-style:normal !important; color:var(--text-3) !important; padding:0 8px !important; margin:0 0 0 -4px !important; } /* ---------- výběr STÁTU (nad dopravci) ---------- */ html[data-theme] #zaslat_jako > fieldset > .input_cont { margin:0 0 16px !important; padding:0 !important; } html[data-theme] #zaslat_jako select, html[data-theme] #select_state { width:100% !important; max-width:280px !important; margin:0 !important; } /* ============ RADIOVÉ VOLBY (doprava + platba) ============ */ /* Každá volba je blokový flex box → karty se skládají pod sebe samy. NEflexujeme
(kvůli je to napříč prohlížeči vratké) — svislé rozestupy řeší margin-bottom na kartě. */ html[data-theme] #zaslat_jako .dopravce, html[data-theme] #zaslat_jako > fieldset > div > span.show, html[data-theme] #zpusob_platby span.show { display:flex !important; flex-wrap:wrap; align-items:flex-start; gap:2px 12px; position:relative !important; width:auto !important; float:none !important; min-height:0 !important; margin:0 0 10px !important; padding:14px 16px !important; border:1.5px solid var(--border) !important; border-radius:var(--r-md) !important; background:var(--surface) !important; transition:border-color .18s ease, background .18s ease, box-shadow .18s ease; } /* legacy obal
okolo platby → jen průtok, kartou je vnitřní span */ html[data-theme] #zpusob_platby #platby > div.show { display:block; margin:0; padding:0; } /* #dopravci a #platby jsou → zblokovat, ať karty tečou čistě pod sebou */ html[data-theme] #dopravci, html[data-theme] #platby { display:block; } /* radio */ html[data-theme] #zaslat_jako input[type="radio"], html[data-theme] #zpusob_platby input[type="radio"] { flex:0 0 auto; width:20px; height:20px; margin:1px 0 0 !important; accent-color:var(--accent); cursor:pointer; } /* popiska volby (span.legend) — název tučně */ html[data-theme] #zaslat_jako .legend, html[data-theme] #zpusob_platby .legend { flex:1 1 0; min-width:0; padding:0 !important; margin:0 !important; font-family:var(--font-body) !important; font-weight:600 !important; font-size:15px !important; color:var(--text) !important; line-height:1.4; } /* doplňkový popis pod názvem */ html[data-theme] #zaslat_jako .objednat_text, html[data-theme] #zpusob_platby .objednat_text { display:block; margin:3px 0 0 !important; font-family:var(--font-body) !important; font-style:normal !important; font-size:13px !important; font-weight:400 !important; color:var(--text-2) !important; } html[data-theme] #zaslat_jako .legend .red, html[data-theme] #zpusob_platby .legend .red { color:var(--sage) !important; font-weight:700 !important; } /* mrtvé
uvnitř karet (legacy rozestupy) */ html[data-theme] #zaslat_jako .dopravce br, html[data-theme] #zaslat_jako span.show br, html[data-theme] #zpusob_platby span.show br { display:none !important; } /* logo dopravce / ikonka „i" v popisce */ html[data-theme] #zaslat_jako .objednat_logo, html[data-theme] #zpusob_platby .legend img { height:20px !important; width:auto !important; vertical-align:middle; margin:0 6px !important; position:static !important; top:auto !important; border-radius:4px; display:inline-block; } /* vybraná pošta / info řádek přes celou šířku karty */ html[data-theme] #zaslat_jako .dopravce > p, html[data-theme] #zaslat_jako span.show > p { flex-basis:100%; margin:8px 0 0 !important; font-size:13px; color:var(--text-2) !important; } /* iframe „vyber poštu" a info bubliny */ html[data-theme] #napostu_set { flex-basis:100%; } html[data-theme] #napostu_set iframe { width:100% !important; max-width:100%; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); } html[data-theme] #bubble1, html[data-theme] #bubble2 { flex-basis:100%; margin:8px 0 0; padding:12px 14px; font-size:13px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); color:var(--text-2); } /* Packeta „vybrat výdejní místo" — kontejner i tlačítko na PLNOU šířku karty, ať dlouhý nepřetéká vpravo mimo kartu volby (input nezalomí text → font přes clamp, aby se text vešel i na úzkém mobilu). */ html[data-theme] #zaslat_jako .packetery-branch-list { flex-basis:100% !important; width:100% !important; margin:10px 0 0 !important; min-width:0; padding:0 !important; } html[data-theme] #zaslat_jako .packetery-branch-list input[type="button"] { width:100% !important; max-width:100% !important; box-sizing:border-box !important; margin:0 !important; padding:.85em .7em !important; min-height:46px; font-size:clamp(10px,3.1vw,13px) !important; letter-spacing:.02em !important; } html[data-theme] #zaslat_jako .packeta-point-info { display:none; /* skryté dokud se nevybere místo; JS pak nastaví inline display:block (dřív moje display:block + legacy .toggle() → po výběru se to naopak SKRYLO) */ margin:8px 0 0 !important; padding:8px 12px !important; background:var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--sage); border-radius:var(--r-md); font-size:13.5px !important; font-weight:600 !important; color:var(--text) !important; line-height:1.4; } /* stav VYBRÁNO — přes :has(:checked) */ html[data-theme] #zaslat_jako .dopravce:has(input:checked), html[data-theme] #zaslat_jako > fieldset > div > span.show:has(input:checked), html[data-theme] #zpusob_platby span.show:has(input:checked) { border-color:var(--accent) !important; background:color-mix(in srgb, var(--accent) 8%, var(--surface)) !important; box-shadow:0 0 0 1px var(--accent) inset, 0 6px 18px var(--btn-glow) !important; } html[data-theme] #zaslat_jako .dopravce:hover, html[data-theme] #zaslat_jako > fieldset > div > span.show:hover, html[data-theme] #zpusob_platby span.show:hover { border-color:var(--border-2) !important; } /* CHYBNÁ volba (JS validace: zvolená Zásilkovna/pošta bez výdejního místa). Třídu .rd-field-error přidá js/main.js → rdCheckoutInvalid() + scroll + toast. */ html[data-theme] .rd-field-error { border-color:var(--terracotta) !important; background:color-mix(in srgb, var(--terracotta) 7%, var(--surface)) !important; box-shadow:0 0 0 1px var(--terracotta) inset, 0 8px 22px rgba(192,73,46,.20) !important; animation:rd-field-shake .4s ease both; } @keyframes rd-field-shake { 20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)} 100%{transform:translateX(0)} } @media (prefers-reduced-motion:reduce){ html[data-theme] .rd-field-error { animation:none !important; } } /* ---------- VÝSLEDNÁ CENA (celkem s dopravou) ---------- */ html[data-theme] #final_cena { margin:4px 0 8px !important; padding:16px 20px !important; background:var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--r-md); font-family:var(--font-display) !important; font-size:30px !important; font-weight:700 !important; color:var(--text) !important; line-height:1.1; } html[data-theme] #final_cena strong { font-size:1em !important; color:var(--accent-ink) !important; } html[data-theme] #final_cena .red { color:var(--sage) !important; } html[data-theme] #final_cena .medium, html[data-theme] #final_cena span:not(.red) { font-family:var(--font-body) !important; font-size:14px !important; font-weight:500 !important; color:var(--text-2) !important; } /* ---------- sleva / poznámky ---------- */ html[data-theme] #pokladna .zakaznicka_sleva, html[data-theme] #objednat .zakaznicka_sleva { margin:0 !important; } html[data-theme] #pokladna .zakaznicka_sleva strong, html[data-theme] #objednat .zakaznicka_sleva strong { font-size:20px !important; color:var(--accent-ink) !important; } html[data-theme] #pokladna .red, html[data-theme] #objednat .red { color:var(--terracotta) !important; } /* ============ ADRESNÍ / REGISTRAČNÍ FORMULÁŘ ============ */ /* řádek pole: popiska nad polem (konec legacy float:left width:190px) */ html[data-theme] #pokladna .input_cont, html[data-theme] #objednat .input_cont { margin:0 0 14px !important; padding:0 !important; } html[data-theme] #pokladna .input_cont > label, html[data-theme] #objednat .input_cont > label { display:block !important; float:none !important; width:auto !important; margin:0 0 6px !important; font-size:11px !important; font-weight:600 !important; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3) !important; } html[data-theme] #pokladna .input_cont input[type="text"], html[data-theme] #pokladna .input_cont input[type="password"], html[data-theme] #objednat .input_cont input[type="text"], html[data-theme] #objednat .input_cont input[type="password"], html[data-theme] #objednat .input_cont select { width:100% !important; margin:0 !important; } /* zaškrtávací řádky (jiné fakturační údaje, souhlasy) → checkbox vlevo od popisky */ html[data-theme] #pokladna .input_cont:has(> input[type="checkbox"]), html[data-theme] #objednat .input_cont:has(> input[type="checkbox"]) { display:flex; flex-direction:row-reverse; justify-content:flex-end; align-items:center; gap:10px; } html[data-theme] #pokladna .input_cont:has(> input[type="checkbox"]) > label, html[data-theme] #objednat .input_cont:has(> input[type="checkbox"]) > label { margin:0 !important; text-transform:none; letter-spacing:0; font-size:14px !important; color:var(--text) !important; font-weight:500; } html[data-theme] #pokladna .input_cont input[type="checkbox"], html[data-theme] #objednat .input_cont input[type="checkbox"], html[data-theme] #objednat #regcheck { width:20px !important; height:20px !important; margin:0 !important; accent-color:var(--accent); cursor:pointer; flex:0 0 auto; } /* vysvětlivky pod souhlasy */ html[data-theme] #objednat .input_cont.xsmall, html[data-theme] #objednat .input_cont.italic { margin:-8px 0 12px !important; font-size:12.5px !important; font-style:normal !important; color:var(--text-3) !important; } /* nadpisy sekcí v registračním formuláři */ html[data-theme] .regform h3 { padding:0 0 8px !important; margin:22px 0 14px !important; border-bottom:1px solid var(--border); font-size:18px !important; } html[data-theme] .regform h3:first-child { margin-top:4px !important; } /* měřič síly hesla — nech legacy, jen zarovnání */ html[data-theme] #passwordStrength { border-radius:var(--r-pill); overflow:hidden; } /* info seznam reg/bez reg (.orange) — pryč křiklavé oranžové */ html[data-theme] #pokladna .orange, html[data-theme] #objednat .orange, html[data-theme] .moznosti .orange { background:var(--surface-2) !important; color:var(--text-2) !important; border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--r-md); margin:0 0 8px !important; padding:12px 16px 12px 34px !important; list-style:none !important; } html[data-theme] #pokladna .orange li, html[data-theme] #objednat .orange li, html[data-theme] .moznosti .orange li { list-style:none !important; position:relative; color:var(--text-2) !important; font-size:13.5px !important; line-height:1.55; margin:2px 0 !important; } html[data-theme] #pokladna .orange li::before, html[data-theme] #objednat .orange li::before, html[data-theme] .moznosti .orange li::before { content:""; position:absolute; left:-18px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--accent); } /* přihlašovací dlaždice v reg. formuláři (FB / Google / e-shop) */ html[data-theme] .moznosti .login_block { display:block; width:auto !important; margin:0 0 10px !important; } html[data-theme] .moznosti .login_button { display:flex !important; align-items:center; gap:10px; width:100% !important; min-width:0 !important; padding:12px 16px !important; text-align:left; justify-content:flex-start; } html[data-theme] .moznosti .login_button span { position:static !important; top:auto !important; padding:0 !important; font-size:13px !important; line-height:1.3 !important; text-transform:none !important; letter-spacing:0 !important; } html[data-theme] .moznosti .login_button svg { flex:0 0 auto; } /* ============ REKAPITULAČNÍ / ADRESNÍ KARTY ============ */ html[data-theme] #pokladna .address, html[data-theme] #objednat .address, html[data-theme] #objednat .quarter { box-sizing:border-box; background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--r-md) !important; padding:16px 18px !important; margin:0 0 14px !important; } /* dvě adresy vedle sebe (pokladna: dodací + fakturační) */ html[data-theme] #pokladna fieldset:has(> .address.half) { display:flex; flex-wrap:wrap; gap:16px; } html[data-theme] #pokladna fieldset:has(> .address.half) > legend { flex-basis:100%; } html[data-theme] #pokladna fieldset:has(> .address.half) > hr.cleaner { display:none !important; } html[data-theme] #pokladna .address.half { flex:1 1 240px; float:none !important; width:auto !important; } html[data-theme] #pokladna .quarter_spacer { display:none !important; } /* hlavička adresní karty: nadpis + tlačítko Editovat/Změnit v řádku */ html[data-theme] #pokladna .address h3, html[data-theme] #objednat .address h3, html[data-theme] #objednat .quarter h2 { float:none !important; display:block; margin:0 0 10px !important; font-size:17px !important; } /* řádky adresy (renderDodaciAdresa:

Ulice: …) */ html[data-theme] #pokladna .address p, html[data-theme] #objednat .address p, html[data-theme] #objednat .quarter p { display:flex; gap:8px; margin:4px 0 !important; padding:0 !important; font-weight:600 !important; color:var(--text) !important; font-size:14px !important; } html[data-theme] #pokladna .address p span, html[data-theme] #objednat .address p span { display:inline-block !important; width:auto !important; min-width:74px; float:none !important; color:var(--text-3) !important; font-weight:500 !important; } html[data-theme] #objednat .quarter .large { font-size:16px !important; color:var(--text) !important; font-weight:600; } /* ---------- sekundární tlačítka (Editovat / Změnit / ověřit kód) ---------- */ html[data-theme] #pokladna .submit_s, html[data-theme] #objednat .submit_s, html[data-theme] #pokladna .ad_button, html[data-theme] #objednat .ad_button { display:inline-flex; align-items:center; justify-content:center; background:transparent !important; color:var(--text-2) !important; border:1.5px solid var(--border-2) !important; border-radius:var(--r-pill) !important; padding:.42em 1.1em !important; margin:0 !important; position:static !important; top:auto !important; font-family:var(--font-body) !important; font-size:12px !important; font-weight:600 !important; text-transform:uppercase; letter-spacing:.06em; text-decoration:none !important; box-shadow:none !important; min-height:36px; transition:border-color .18s ease, color .18s ease, background .18s ease; } html[data-theme] #pokladna .submit_s span, html[data-theme] #objednat .submit_s span { font-size:12px !important; } html[data-theme] #pokladna .submit_s:hover, html[data-theme] #objednat .submit_s:hover, html[data-theme] #pokladna .ad_button:hover, html[data-theme] #objednat .ad_button:hover { border-color:var(--accent) !important; color:var(--accent-ink) !important; background:var(--surface-2) !important; } /* poznámka k objednávce */ html[data-theme] #objednat textarea, html[data-theme] #objednat .textarea { width:100% !important; min-height:110px; resize:vertical; } /* hlavní CTA „Pokračovat / Objednat" — přes celou šířku, ať je nepřehlédnutelné */ html[data-theme] #pokladna > form > input[type="submit"], html[data-theme] #pokladna .uhrada + input[type="submit"], html[data-theme] #pokladna input.submit_l, html[data-theme] #objednat input.submit_l, html[data-theme] #objednat input[type="submit"].submit { min-height:54px; padding:1em 2em !important; font-size:14px !important; margin-top:6px; } /* flash hlášky uvnitř checkoutu (Render::warning → .error, notice → .notice) */ html[data-theme] #pokladna .error, html[data-theme] #objednat .error, html[data-theme] .content .error { width:auto !important; background:color-mix(in srgb, var(--terracotta) 10%, var(--surface)) !important; color:var(--text) !important; border:1px solid var(--terracotta) !important; border-top:2px solid var(--terracotta) !important; border-radius:var(--r-md) !important; padding:14px 18px !important; font-weight:600 !important; font-family:var(--font-body) !important; font-size:15px !important; } html[data-theme] .content .success { width:auto !important; background:color-mix(in srgb, var(--sage) 14%, var(--surface)) !important; color:var(--text) !important; border:1px solid var(--sage) !important; border-top:2px solid var(--sage) !important; border-radius:var(--r-md) !important; padding:14px 18px !important; font-weight:600 !important; font-family:var(--font-body) !important; font-size:15px !important; } /* ============ DOKONČENÍ OBJEDNÁVKY (poděkování) ============ */ html[data-theme] .dokonceni { text-align:center; max-width:640px; margin:0 auto; padding:8px 0 20px; } html[data-theme] .dokonceni h1 { margin-top:.2em !important; } html[data-theme] .dokonceni h3 { font-weight:500 !important; color:var(--text-2) !important; line-height:1.5; margin:0 auto 16px; max-width:52ch; } html[data-theme] .dokonceni h3 strong { color:var(--text) !important; } html[data-theme] .dokonceni p { color:var(--text-2) !important; } html[data-theme] .dokonceni a[href*="moje-objednavky"] { display:inline-block; margin-top:6px; font-weight:600; } /* pozn.: úmyslně BEZ univerzálního „success" zaškrtnutí přes ::before — .dokonceni obaluje i chybové/přesměrovací stavy platby (GoPay/PayU „platba nebyla dokončena"), kde by zelená fajfka klamala. */ /* bankovní/QR fallback (když platba selže) — čitelné řádky */ html[data-theme] .dokonceni h3 span { color:var(--accent-ink) !important; } html[data-theme] .dokonceni .alert { border-radius:var(--r-md); padding:12px 16px; margin:0 auto 14px; max-width:520px; } /* ---------- RESPONZIVNÍ (mobil) ---------- */ @media (max-width:640px){ html[data-theme] #pokladna fieldset, html[data-theme] #objednat fieldset { padding:16px 15px !important; } html[data-theme] #pokladna .address.half { flex:1 1 100%; } html[data-theme] #objednat .quarter { width:auto !important; float:none !important; } html[data-theme] #final_cena { font-size:25px !important; padding:14px 16px !important; } /* hlavní CTA vždy přes celou šířku */ html[data-theme] #pokladna > form > input[type="submit"], html[data-theme] #pokladna input.submit_l, html[data-theme] #objednat input.submit_l, html[data-theme] #objednat input[type="submit"].submit, html[data-theme] #objednat input[type="submit"].green { width:100% !important; } } /* ============================================================ GLOBÁLNÍ FLASH HLÁŠKY (Render::warning/notice/success → h5) .notice má vlastní pravidlo výše; tady doplňujeme error+success globálně (checkoutová varianta výše zůstává, stejný vzhled). ============================================================ */ html[data-theme] h5.error, html[data-theme] .content .error { width:auto !important; background:color-mix(in srgb, var(--terracotta) 12%, var(--surface)) !important; color:var(--text) !important; border:1px solid var(--terracotta) !important; border-top:2px solid var(--terracotta) !important; border-radius:var(--r-md) !important; padding:14px 18px !important; font-family:var(--font-body) !important; font-size:15px !important; font-weight:600 !important; text-transform:none !important; text-align:left !important; margin:0 0 14px !important; } html[data-theme] h5.success { width:auto !important; background:color-mix(in srgb, var(--sage) 14%, var(--surface)) !important; color:var(--text) !important; border:1px solid var(--sage) !important; border-top:2px solid var(--sage) !important; border-radius:var(--r-md) !important; padding:14px 18px !important; font-family:var(--font-body) !important; font-size:15px !important; font-weight:600 !important; text-transform:none !important; text-align:left !important; margin:0 0 14px !important; } /* ============================================================ ÚČET — MOJE OBJEDNÁVKY + DETAIL OBJEDNÁVKY (#moje_objednavky) List = odkazové řádky → karty s šipkou. Detail = SKUTEČNÁ

(ne div renderCart!) → vracíme display:table, který globální .table.kosik{display:block} rozbíjí. ============================================================ */ html[data-theme] #moje_objednavky.inner { background:transparent !important; } html[data-theme] #moje_objednavky > ul { margin:0 !important; padding:0 !important; list-style:none !important; } html[data-theme] #moje_objednavky > ul > li { margin:0 0 10px !important; padding:0 !important; list-style:none !important; } html[data-theme] #moje_objednavky > ul > li > a { position:relative; display:block; padding:16px 48px 16px 18px !important; background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--r-md) !important; color:var(--text) !important; text-decoration:none !important; font-weight:500 !important; font-size:14.5px !important; line-height:1.5; transition:border-color .18s ease, background .18s ease, transform .16s ease; } html[data-theme] #moje_objednavky > ul > li > a:hover { border-color:var(--accent) !important; background:var(--surface-2) !important; transform:translateY(-1px); } html[data-theme] #moje_objednavky > ul > li > a::after { content:""; position:absolute; right:16px; top:50%; width:9px; height:9px; margin-top:-6px; border-top:2px solid var(--text-3); border-right:2px solid var(--text-3); transform:rotate(45deg); transition:border-color .18s ease; } html[data-theme] #moje_objednavky > ul > li > a:hover::after { border-color:var(--accent-ink); } html[data-theme] #moje_objednavky > p > a { font-weight:600; } /* detail objednávky — obnova tabulkového layoutu + dark plochy */ html[data-theme] #moje_objednavky .table.kosik { display:table !important; width:100% !important; border-collapse:collapse !important; background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--r-md) !important; overflow:hidden; } html[data-theme] #moje_objednavky .table.kosik td { padding:12px 12px !important; border-bottom:1px solid var(--hairline) !important; background:transparent !important; /* přebíjí inline #fff na foto buňce */ color:var(--text-2) !important; vertical-align:middle; font-size:14px !important; } html[data-theme] #moje_objednavky .table.kosik tr.table_head td { background:var(--surface-2) !important; color:var(--text-3) !important; font-size:11px !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.08em; } html[data-theme] #moje_objednavky .table.kosik tr.light, html[data-theme] #moje_objednavky .table.kosik tr.dark { background:transparent !important; } html[data-theme] #moje_objednavky .table.kosik img { width:56px; height:56px; object-fit:cover; display:block; margin:0 auto; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface-2); } html[data-theme] #moje_objednavky .table.kosik ul { margin:0 !important; padding:0 !important; list-style:none !important; } html[data-theme] #moje_objednavky .table.kosik ul li { list-style:none !important; margin:0 !important; font-size:12.5px !important; color:var(--text-3) !important; } html[data-theme] #moje_objednavky .table.kosik tr.table_celkem { background:var(--surface-2) !important; display:table-row !important; border-top:2px solid var(--border-2) !important; } html[data-theme] #moje_objednavky .table.kosik tr.table_celkem td { padding:12px !important; color:var(--text) !important; font-weight:600 !important; border-bottom:0 !important; } html[data-theme] #moje_objednavky .table.kosik .red { color:var(--accent-ink) !important; } @media (max-width:640px){ /* úzký displej → tabulka scrolluje ve vlastním boxu (osvědčený trik display:block) */ html[data-theme] #moje_objednavky .table.kosik { display:block !important; overflow-x:auto; -webkit-overflow-scrolling:touch; } } /* ============================================================ FORMULÁŘOVÉ STRÁNKY (P3): #reg (registrace), #zapomenute-heslo, #kontakty/#kontakt (kontakt cz/en), #recenze, #specialni-objednavka Registrace re-usuje includes/regform.php (.input_cont) — checkout styl je scopnutý na #pokladna/#objednat, tady ho zrcadlíme pro #reg. ============================================================ */ html[data-theme] #reg.inner { background:transparent !important; max-width:680px; } html[data-theme] #reg .input_cont { margin:0 0 14px !important; padding:0 !important; } html[data-theme] #reg .input_cont > label { display:block !important; float:none !important; width:auto !important; margin:0 0 6px !important; font-size:11px !important; font-weight:600 !important; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3) !important; } html[data-theme] #reg .input_cont input[type="text"], html[data-theme] #reg .input_cont input[type="password"], html[data-theme] #reg .input_cont select { width:100% !important; margin:0 !important; } html[data-theme] #reg .input_cont:has(> input[type="checkbox"]) { display:flex; flex-direction:row-reverse; justify-content:flex-end; align-items:center; gap:10px; } html[data-theme] #reg .input_cont:has(> input[type="checkbox"]) > label { margin:0 !important; text-transform:none; letter-spacing:0; font-size:14px !important; color:var(--text) !important; font-weight:500; } html[data-theme] #reg .input_cont input[type="checkbox"] { width:20px !important; height:20px !important; margin:0 !important; accent-color:var(--accent); cursor:pointer; flex:0 0 auto; } html[data-theme] #reg .input_cont.xsmall, html[data-theme] #reg .input_cont.italic { margin:-8px 0 12px !important; font-size:12.5px !important; font-style:normal !important; color:var(--text-3) !important; } html[data-theme] #reg .regform h3 { padding:0 0 8px !important; margin:22px 0 14px !important; border-bottom:1px solid var(--border); font-size:18px !important; } html[data-theme] #reg input[type="submit"] { min-height:50px; } /* „zpět k pokladně" — legacy šedý .graycont → outline pilulka */ html[data-theme] #reg .graycont { float:none !important; display:inline-block; background:transparent !important; border:1.5px solid var(--border-2); border-radius:var(--r-pill); padding:0 !important; margin:0 0 12px; } html[data-theme] #reg .graycont a { display:inline-flex; align-items:center; min-height:38px; padding:0 16px !important; color:var(--text-2) !important; font-size:12px !important; font-weight:600 !important; text-transform:uppercase; letter-spacing:.06em; text-decoration:none !important; } html[data-theme] #reg .graycont:hover { border-color:var(--accent); } html[data-theme] #reg .graycont:hover a { color:var(--accent-ink) !important; } /* zapomenuté heslo — malá centrovaná karta */ html[data-theme] #zapomenute-heslo { max-width:440px; margin:24px auto; padding:26px 24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); } html[data-theme] #zapomenute-heslo h1 { font-size:clamp(24px,4vw,32px) !important; margin:0 0 .4em !important; } html[data-theme] #zapomenute-heslo p { font-size:14px !important; } html[data-theme] #zapomenute-heslo label { display:block; margin:10px 0 6px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); } html[data-theme] #zapomenute-heslo input[type="text"] { width:100% !important; margin:0 0 12px !important; } html[data-theme] #zapomenute-heslo input[type="submit"] { width:100%; min-height:48px; } /* kontakty (cz #kontakty, en #kontakt) — info bloky + formulář */ html[data-theme] #kontakty, html[data-theme] #kontakt { max-width:760px; } html[data-theme] #kontakty .third, html[data-theme] #kontakty .half, html[data-theme] #kontakt > div[style] { width:auto !important; float:none !important; display:block !important; background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--r-md) !important; padding:18px 20px !important; margin:0 0 14px !important; } html[data-theme] #kontakty .third h2 { font-size:20px !important; margin:0 0 8px !important; } html[data-theme] #kontakty .name, html[data-theme] #kontakt address { font-style:normal !important; } html[data-theme] #kontakty .name { display:inline-block; min-width:120px; color:var(--text-3) !important; font-size:13px !important; font-weight:500; } /* formulář — inline floaty popisek pryč, pole na plnou šířku */ html[data-theme] #kontakty form label, html[data-theme] #kontakt form label { display:block !important; float:none !important; width:auto !important; margin:12px 0 6px !important; font-size:11px !important; font-weight:600 !important; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3) !important; } html[data-theme] #kontakty form input[type="text"], html[data-theme] #kontakt form input[type="text"] { width:100% !important; max-width:420px; } html[data-theme] #kontakty form textarea, html[data-theme] #kontakt form textarea { width:100% !important; max-width:640px; min-height:140px; } html[data-theme] #kontakty form br, html[data-theme] #kontakt form br { display:none; } html[data-theme] #kontakty form input[type="submit"], html[data-theme] #kontakt form input[type="submit"] { margin-top:14px; min-height:46px; } html[data-theme] #kontakty .map iframe { width:100% !important; max-width:100%; border:1px solid var(--border) !important; border-radius:var(--r-md); display:block; } html[data-theme] #kontakty .map + ul { list-style:none; padding:0; margin:8px 0 0; } html[data-theme] #kontakty .map + ul li { list-style:none; margin:0; } /* captcha obrázek na kontaktu (en) */ html[data-theme] #kontakt img#captcha { border-radius:var(--r-sm); border:1px solid var(--border); } /* recenze — testimonial karty s uvozovkou */ html[data-theme] #recenze .reviews .title h2 { margin:0 !important; } html[data-theme] #recenze .reviews hr.underline { display:none !important; } html[data-theme] #recenze .rev { position:relative; margin:0 0 14px; padding:20px 22px 16px 52px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); } html[data-theme] #recenze .rev::before { content:"\201C"; position:absolute; left:16px; top:6px; font-family:var(--font-display); font-size:44px; line-height:1; color:var(--accent); } html[data-theme] #recenze .rev p { margin:0 0 8px !important; padding:0 !important; color:var(--text) !important; font-size:15px !important; line-height:1.6; } html[data-theme] #recenze .rev .name { color:var(--accent-ink) !important; font-weight:600; font-size:13.5px; } html[data-theme] #recenze .rev .date { color:var(--text-3) !important; font-size:12.5px; } /* ============================================================ VYHLEDÁVÁNÍ (#vyhledavani) — prázdný stav + hlavička Karty výsledků re-usují .card ✓ (stylované výše). ============================================================ */ html[data-theme] #vyhledavani.inner { background:transparent !important; } html[data-theme] #vyhledavani > h1 { margin-bottom:.3em !important; } html[data-theme] #vyhledavani .error { /* „nic nenalezeno" → přátelský panel, ne červený křik */ background:var(--surface-2) !important; border-color:var(--border) !important; border-top:2px solid var(--accent) !important; color:var(--text-2) !important; text-align:center !important; padding:26px 20px !important; font-weight:500 !important; } /* ============================================================ BLOG (#blog + sidebar #left .box) a ČLÁNKY UŽIVATELE (#user) Konzervativně: plochy, karty příspěvků, data; layout neměníme. ============================================================ */ html[data-theme] #left .box { background:transparent !important; } html[data-theme] #left .box .inner { background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--r-md) !important; padding:16px 18px !important; margin:0 0 14px !important; color:var(--text) !important; } html[data-theme] #left .box h4 { font-size:11px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.1em !important; color:var(--text-3) !important; margin:0 0 10px !important; font-family:var(--font-body) !important; } html[data-theme] #left .box .post { padding:8px 0; border-top:1px solid var(--hairline); } html[data-theme] #left .box .post:first-of-type { border-top:0; } html[data-theme] #left .box .post a { font-weight:600; font-size:14px; text-decoration:none !important; } html[data-theme] #left .box .post .date { display:block; font-size:12px; color:var(--text-3) !important; } html[data-theme] #left .box .post .btext { font-size:12.5px !important; color:var(--text-2) !important; margin:4px 0 0 !important; padding:0 !important; } html[data-theme] #blog .half .block { background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--r-md) !important; padding:16px 18px !important; margin:0 0 16px !important; } html[data-theme] #blog .half .block img { border-radius:var(--r-sm); max-width:100%; height:auto; } html[data-theme] #blog .half .block h2 { font-size:20px !important; text-align:left !important; } html[data-theme] #blog .half .block .date { font-size:12px; color:var(--text-3) !important; margin-top:8px; } html[data-theme] #blog .half .block .border { display:none; } html[data-theme] #blog .block .info { font-size:13px !important; color:var(--text-3) !important; } html[data-theme] #blog .rpost { display:inline-block; width:180px; margin:0 12px 12px 0; vertical-align:top; } html[data-theme] #blog .rpost img { width:100%; height:110px; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--border); } html[data-theme] #blog .rpost h3 { font-size:14px !important; } /* uživatelské články (#user) — bootstrap-ish .btn → brand */ html[data-theme] #user .unit .inner { background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--r-md) !important; padding:10px 16px !important; } html[data-theme] #user .unit.active .inner { border-color:var(--accent) !important; } html[data-theme] #user .unit .inner h3 { margin:0 !important; font-size:15px !important; } html[data-theme] #user .btn { background:var(--btn-face), var(--accent) !important; color:var(--on-accent) !important; border:0 !important; border-radius:var(--r-pill) !important; padding:.6em 1.3em !important; font-family:var(--font-body) !important; font-weight:600 !important; cursor:pointer; } html[data-theme] #user .btn-mini { padding:.25em .8em !important; font-size:11px !important; } html[data-theme] #user .btn-warning { background:var(--terracotta) !important; color:#fff !important; } /* ============================================================ GALERIE (#fotogalerie) — thumbnaily karuselu ============================================================ */ html[data-theme] #fotogalerie .galbox .gal img { border-radius:var(--r-md); border:1px solid var(--border); background:var(--surface-2); margin:0 6px; transition:border-color .18s ease, opacity .18s ease; } html[data-theme] #fotogalerie .galbox .gal:hover img { border-color:var(--accent); opacity:.92; } html[data-theme] #fotogalerie h2 { margin-bottom:.6em !important; } /* ============================================================ OBSAHOVÉ TABULKY (.text table) — poštovné, doprava, platba, tabulka velikostí, velikosti prstenů… (stejný jazyk jako dodací podmínky). Cenové tabulky bez obrázků. ============================================================ */ html[data-theme] .text table:not(:has(img)) { width:100%; max-width:720px; border-collapse:collapse !important; background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--r-md); overflow:hidden; margin:14px 0 22px; } html[data-theme] .text table:not(:has(img)) td, html[data-theme] .text table:not(:has(img)) th { padding:11px 14px !important; border:0 !important; border-bottom:1px solid var(--hairline) !important; color:var(--text-2) !important; font-size:14px !important; background:transparent !important; } html[data-theme] .text table:not(:has(img)) tr.first td, html[data-theme] .text table:not(:has(img)) tr:first-child td { background:var(--surface-2) !important; color:var(--text-3) !important; font-size:11px !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.08em; } html[data-theme] .text table:not(:has(img)) tr:last-child td { border-bottom:0 !important; } /* ============================================================ KOMPONENTY ============================================================ */ /* --- našeptávač hledání (jQuery UI .ui-autocomplete) --- */ html[data-theme] ul.ui-autocomplete { background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--r-md) !important; box-shadow:0 18px 44px rgba(0,0,0,.45) !important; padding:6px !important; margin:6px 0 0 !important; list-style:none !important; z-index:3000 !important; max-height:min(60vh,420px); overflow-y:auto; overscroll-behavior:contain; font-family:var(--font-body) !important; } html[data-theme] ul.ui-autocomplete li { list-style:none !important; margin:0 !important; padding:0 !important; } html[data-theme] ul.ui-autocomplete a.suggestion, html[data-theme] ul.ui-autocomplete .ui-menu-item-wrapper { display:block; padding:9px 12px !important; border-radius:9px; color:var(--text) !important; font-size:14px !important; text-decoration:none !important; border:0 !important; background:transparent !important; cursor:pointer; } html[data-theme] ul.ui-autocomplete a.suggestion:hover, html[data-theme] ul.ui-autocomplete li:hover > a, html[data-theme] ul.ui-autocomplete .ui-state-active, html[data-theme] ul.ui-autocomplete .ui-state-focus { background:var(--surface-2) !important; color:var(--accent-ink) !important; } /* --- panel měna/jazyk (#settings) --- */ html[data-theme] #settings { background:transparent !important; } html[data-theme] #settings .inner { display:flex; align-items:center; justify-content:center; gap:18px; background:transparent !important; border:0 !important; padding:10px 0 !important; } html[data-theme] #settings .curr { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:32px; padding:2px 10px; border:1px solid var(--border-2); border-radius:var(--r-pill); color:var(--text-2) !important; font-size:12px; font-weight:700; letter-spacing:.05em; text-decoration:none !important; background:none !important; transition:border-color .18s ease, color .18s ease; } html[data-theme] #settings .curr:hover { border-color:var(--accent); color:var(--accent-ink) !important; } html[data-theme] #settings .curr.eur::after { content:"EUR"; } html[data-theme] #settings .curr.czk::after { content:"CZK"; } /* velký dropdown menu na nízkých displejích (#7) */ @media (max-height:760px){ html[data-theme] #qm0 ul ul { max-height:66vh !important; } } @media (max-height:600px){ html[data-theme] #qm0 ul ul { max-height:56vh !important; } } /* ============================================================ VRÁCENÍ ZBOŽÍ (#vraceni-zbozi) — odstoupení od smlouvy Interaktivní formulář dle NV 363/2013 Sb.; potvrzení §1830 řeší Controller::return_form(). Formulář zrcadlí checkout vzory. ============================================================ */ html[data-theme] #vraceni-zbozi.inner { background:transparent !important; max-width:680px; } html[data-theme] #vraceni-zbozi .rd-lead { font-size:15.5px !important; color:var(--text-2) !important; max-width:56ch; } html[data-theme] #vraceni-zbozi .rd-return-info { background:var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--r-md); padding:16px 18px; margin:18px 0 22px; } html[data-theme] #vraceni-zbozi .rd-return-info h3 { font-family:var(--font-body) !important; font-size:11px !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.1em; color:var(--text-3) !important; margin:0 0 8px !important; } html[data-theme] #vraceni-zbozi .rd-return-info p { margin:2px 0 !important; padding:0 !important; font-size:14px !important; color:var(--text) !important; } html[data-theme] #vraceni-zbozi .rd-return-info p span { color:var(--text-3); } html[data-theme] #vraceni-zbozi fieldset { border:1px solid var(--border) !important; border-radius:var(--r-lg) !important; background:var(--surface) !important; padding:20px 22px !important; margin:0 0 20px !important; min-width:0; } html[data-theme] #vraceni-zbozi fieldset > legend { font-family:var(--font-body) !important; font-size:11px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:.1em !important; color:var(--text-3) !important; padding:0 8px !important; margin:0 0 0 -4px !important; } html[data-theme] #vraceni-zbozi .rd-form-note { font-size:14px !important; color:var(--text-2) !important; margin:0 0 16px !important; } html[data-theme] #vraceni-zbozi .rd-form-note--small { font-size:12.5px !important; color:var(--text-3) !important; margin:14px 0 !important; } html[data-theme] #vraceni-zbozi .input_cont { margin:0 0 14px !important; padding:0 !important; } html[data-theme] #vraceni-zbozi .input_cont > label { display:block !important; margin:0 0 6px !important; font-size:11px !important; font-weight:600 !important; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3) !important; } html[data-theme] #vraceni-zbozi .input_cont > label em { font-style:normal; text-transform:none; letter-spacing:0; font-weight:500; color:var(--text-3); } html[data-theme] #vraceni-zbozi .input_cont input, html[data-theme] #vraceni-zbozi .input_cont textarea { width:100% !important; margin:0 !important; } html[data-theme] #vraceni-zbozi textarea { resize:vertical; min-height:0; } html[data-theme] #vraceni-zbozi .rd-return-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 14px; } html[data-theme] #vraceni-zbozi input[type="submit"] { width:100%; min-height:52px; margin-top:4px; } /* honeypot — mimo obrazovku (display:none by některé boty přeskočily) */ html[data-theme] #vraceni-zbozi .rd-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; } html[data-theme] #vraceni-zbozi .rd-return-legal h3 { font-size:18px !important; margin:26px 0 10px !important; } html[data-theme] #vraceni-zbozi .rd-return-legal ul { margin:0 0 12px !important; padding:0 0 0 2px !important; list-style:none !important; } html[data-theme] #vraceni-zbozi .rd-return-legal li { list-style:none !important; position:relative; margin:0 0 8px !important; padding-left:24px !important; color:var(--text-2) !important; font-size:14px !important; line-height:1.55; } html[data-theme] #vraceni-zbozi .rd-return-legal li::before { content:""; position:absolute; left:0; top:.28em; width:14px; height:14px; background-color:var(--sage); -webkit-mask:url('data:image/svg+xml;utf8,') no-repeat center / contain; mask:url('data:image/svg+xml;utf8,') no-repeat center / contain; } /* --- mobil pro nové sekce --- */ @media (max-width:640px){ html[data-theme] #vraceni-zbozi .rd-return-grid { grid-template-columns:1fr; } html[data-theme] #reg.inner, html[data-theme] #kontakty, html[data-theme] #kontakt { max-width:none; } html[data-theme] #kontakty form input[type="text"], html[data-theme] #kontakt form input[type="text"], html[data-theme] #kontakty form textarea, html[data-theme] #kontakt form textarea { max-width:none; } html[data-theme] #kontakty form input[type="submit"], html[data-theme] #kontakt form input[type="submit"] { width:100%; } html[data-theme] #zapomenute-heslo { margin:10px auto; } html[data-theme] #blog .half { width:100% !important; float:none !important; } html[data-theme] #moje_objednavky > ul > li > a { font-size:13.5px !important; } }