/* ============================================================================ Moduly brandideon v téme Nizu — CSS, ktoré sa nedá vyjadriť Tailwind triedami. Tailwind sa načítava bez preflightu (viď inc/bd-zaklad.php), takže tu sú len triedy, na ktoré sa moduly odvolávajú menom: tlačidlo, panel košíka, pokladňa, vyhľadávanie a blog. Všetko drží farby a písmo témy Nizu. ========================================================================= */ /* ── Primárne tlačidlo ──────────────────────────────────────────────────── */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-color); color: var(--black-color); border: none; border-radius: 6px; padding: 0.875rem 1.75rem; font-weight: 700; cursor: pointer; transition: opacity .2s, transform .1s; font-family: inherit; text-decoration: none; white-space: nowrap; line-height: 1.2; letter-spacing: 1.5px; } .btn-primary:hover { opacity: .88; } .btn-primary:active { transform: scale(.98); } .btn-primary.loading, .btn-primary:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; } /* ── Toast ──────────────────────────────────────────────────────────────── */ #bd-toast-container { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 100000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .bd-toast { background: var(--black-color); color: #fff; padding: .7rem 1.1rem; border-radius: 6px; font-size: .9rem; letter-spacing: 1.5px; box-shadow: 0 6px 24px rgba(0,0,0,.18); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; } .bd-toast.viditelny { opacity: 1; transform: translateY(0); } /* ── Pokladňa ───────────────────────────────────────────────────────────── */ /* Prvky, ktoré kreslí WooCommerce vnútri našej pokladne (select2, notices). */ .bd-co .form-row, .bd-co2 .form-row { margin: 0; padding: 0; } .bd-co .form-row label, .bd-co2 .form-row label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .3rem; color: var(--black-color); letter-spacing: 1.5px; } .bd-co .form-row .required, .bd-co2 .form-row .required { color: #ef4444; text-decoration: none; } .bd-co input[type="text"], .bd-co input[type="email"], .bd-co input[type="tel"], .bd-co input[type="password"], .bd-co textarea, .bd-co select, .bd-co2 input[type="text"], .bd-co2 input[type="email"], .bd-co2 input[type="tel"], .bd-co2 input[type="password"], .bd-co2 textarea, .bd-co2 select { width: 100%; max-width: 100%; box-sizing: border-box; padding: .7rem .9rem; border: 1px solid rgba(0,0,0,.12); border-radius: 6px; background: #fff; color: var(--black-color); font-family: inherit; font-size: .9rem; outline: none; transition: border-color .2s; } .bd-co input:focus, .bd-co textarea:focus, .bd-co select:focus, .bd-co2 input:focus, .bd-co2 textarea:focus, .bd-co2 select:focus { border-color: var(--primary-color); } .bd-co .select2-container, .bd-co2 .select2-container { max-width: 100% !important; } /* Súhrn objednávky — na mobile pod seba, nech sa cena neoreže */ @media (max-width: 639px) { #bd-co-review table { display: block; width: 100%; } #bd-co-review thead { display: none; } #bd-co-review tbody, #bd-co-review tfoot { display: block; width: 100%; } #bd-co-review tr { display: block; width: 100%; padding: .5rem 0; } #bd-co-review th, #bd-co-review td { display: block; width: 100%; text-align: left !important; white-space: normal !important; padding-left: 0; padding-right: 0; } #bd-co-review tr.cart_item + tr.cart_item { border-top: 1px solid #f3f4f6; } } /* ── Poistka proti pretekaniu ───────────────────────────────────────────── */ /* Moduly musia zniesť aj veľmi úzku obrazovku (testované od 250 px). */ @layer base { .bd-modul img, .bd-modul svg, .bd-modul video, .bd-modul iframe { max-width: 100%; } .bd-modul input, .bd-modul textarea, .bd-modul select, .bd-modul button { max-width: 100%; box-sizing: border-box; } .bd-modul table { max-width: 100%; } } .bd-modul *, #mini-kosik *, .bd-co *, .bd-co2 * { min-width: 0; } .bd-co, .bd-co2, #bd-co-review, #mini-kosik { overflow-wrap: anywhere; } /* ── Blog: typografia obsahu z editora ────────────────────────────────────── Článok píše majiteľ v editore WordPressu, preto tu dostávajú nadpisy, zoznamy, citáty a tabuľky vzhľad. Farby a veľkosti sa berú z tokenov témy (viď inc/bd-zaklad.php), takže držia dizajn Nizu. */ .bd-clanok { line-height: 1.75; } .bd-clanok > *:first-child { margin-top: 0; } .bd-clanok > *:last-child { margin-bottom: 0; } .bd-clanok p, .bd-clanok ul, .bd-clanok ol, .bd-clanok table, .bd-clanok pre { margin: 0 0 1.15em; } .bd-clanok h2, .bd-clanok h3, .bd-clanok h4 { color: var(--color-black, #131312); font-weight: 700; line-height: 1.25; margin: 1.9em 0 .5em; } .bd-clanok h2 { font-size: var(--text-small-mobile, 1.1rem); } .bd-clanok h3 { font-size: var(--text-size-text-mobile, 0.9rem); } .bd-clanok h4 { font-size: var(--text-size-text-mobile, 0.9rem); opacity: .85; } @media (min-width: 768px) { .bd-clanok h2 { font-size: var(--text-small-pc, 1.2rem); } .bd-clanok h3 { font-size: var(--text-size-text-pc, 0.9rem); } .bd-clanok h4 { font-size: var(--text-size-text-pc, 0.9rem); } } .bd-clanok a { color: var(--black-color, #131312); text-decoration: underline; text-underline-offset: 3px; } .bd-clanok a:hover { text-decoration: none; } .bd-clanok strong { color: var(--color-black, #131312); font-weight: 700; } .bd-clanok ul, .bd-clanok ol { padding-left: 1.35em; } .bd-clanok ul { list-style: disc; } .bd-clanok ol { list-style: decimal; } .bd-clanok li { margin-bottom: .45em; } .bd-clanok li::marker { color: var(--color-primary, #EFCFA0); } .bd-clanok blockquote { margin: 1.6em 0; padding: 1.1em 1.4em; border-left: 4px solid var(--color-primary, #EFCFA0); background: var(--color-contrast, #f4f4f4); border-radius: 0 12px 12px 0; color: var(--color-black, #131312); } .bd-clanok blockquote p:last-child { margin-bottom: 0; } .bd-clanok img, .bd-clanok video, .bd-clanok iframe { max-width: 100%; height: auto; border-radius: 14px; display: block; } .bd-clanok figure { margin: 1.6em 0; } .bd-clanok figcaption { margin-top: .6em; text-align: center; opacity: .7; font-size: var(--text-size-text-mobile, 0.9rem); } .bd-clanok hr { border: 0; border-top: 1px solid rgba(0,0,0,.1); margin: 2.2em 0; } /* Tabuľka má vlastný vodorovný posun, nech na mobile nepretečie */ .bd-clanok .bd-tabulka-obal { overflow-x: auto; margin: 0 0 1.15em; } .bd-clanok table { width: 100%; border-collapse: collapse; text-align: left; } .bd-clanok th, .bd-clanok td { padding: .55em .8em; border-bottom: 1px solid rgba(0,0,0,.1); vertical-align: top; } .bd-clanok th { color: var(--color-black, #131312); font-weight: 700; } .bd-clanok code { background: var(--color-contrast, #f4f4f4); padding: .12em .4em; border-radius: 6px; } /* Preformátovaný blok z editora je text, nie kód — číta sa ako odsek a zalamuje sa. */ .bd-clanok pre { background: none; color: inherit; padding: 0; border-radius: 0; font-family: inherit; font-size: inherit; white-space: pre-wrap; overflow-wrap: anywhere; } /* Skutočný blok kódu si vzhľad kódu ponecháva. */ .bd-clanok pre.wp-block-code, .bd-clanok pre:has(> code) { background: var(--color-black, #131312); color: #fff; padding: 1em 1.2em; border-radius: 12px; overflow-x: auto; white-space: pre; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .bd-clanok pre code { background: none; padding: 0; color: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Tlačidlo na primárnej farbe — moduly ho používajú menom */ .button-for-primary { font-weight: 600; border-radius: 10px; display: inline-block; } /* ── Vyhľadávanie: lupa v lište a panel pod hlavičkou ─────────────────────── Rovnaké ako na ostatných našich eshopoch — políčko aj dropdown majú tie isté ID a triedy, takže ich obsluhuje priamo modul vyhľadávania. Navyše je nad políčkom prepínač, či sa hľadá medzi produktmi, článkami alebo receptmi. */ .bd-search-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: transparent; border: 0; cursor: pointer; color: var(--black-color, #131312); font-size: 1.05rem; transition: opacity .2s; } .bd-search-toggle:hover { opacity: .65; } .search-wrapper { display: none; background: #fff; border-bottom: 1px solid #e5e5e5; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .search-wrapper.on { display: block; } /* Prepínač „čo hľadať" nad políčkom */ .search-wrapper .bd-hladanie-prepinac { margin-bottom: .6rem; } /* ── Chipy kategórií nad výpisom ────────────────────────────────────────── */ .bd-chipy { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; margin: 0; } .bd-chip { display: inline-flex; align-items: center; justify-content: center; padding: .5rem 1.15rem; border-radius: 999px; background: #fff; color: var(--black-color, #131312); border: 1px solid rgba(0,0,0,.1); text-decoration: none; font-weight: 600; line-height: 1.2; transition: border-color .2s, background-color .2s; } .bd-chip:hover { border-color: var(--primary-color, #EFCFA0); } .bd-chip.je-aktivny { background: var(--primary-color, #EFCFA0); border-color: var(--primary-color, #EFCFA0); } /* ── Stránkovanie výpisu ────────────────────────────────────────────────── */ /* Vlastné CSS, nie Tailwind triedy: téma má pravidlá priamo na