/* Theme Name: brandideon Author: Brandideon | Michal Halaj Author URI: https://brandideon.com/ Version: 1.1.0 */ /* * Google Fonts @import and Tailwind @theme tokens are output dynamically * by inc/dynamic-styles.php based on the "Nastavenia obchodu" settings. */ /* ── Base ────────────────────────────────────────────────────────────── */ /* Vodorovné orezanie patrí na , nie na . Keď je overflow-x na body, body sa stane vlastným scroll kontajnerom a prestane fungovať position:sticky na hlavičke. Na sa hodnota propaguje na viewport, takže orezanie funguje rovnako a sticky drží. */ html { overflow-x: hidden; } /* `clip` orezáva rovnako ako `hidden`, ale nerobí zo scroll kontajner, takže sticky hlavička ostáva funkčná. Bez neho sa dá na iOS stránkou pohnúť do strán kvôli bočnému panelu košíka za pravým okrajom obrazovky. */ @supports (overflow: clip) { html, body { overflow-x: clip; } } html, body { margin: 0; color: var(--color-black-text, #555); font-family: var(--bd-font-body, "Cabin", sans-serif); font-weight: 400; font-optical-sizing: auto; } a { text-decoration: none; } h1,h2,h3,h4,h5,h6 { line-height:1.05; margin-top: 0!important; margin-bottom: 0.9rem!important; } p { margin-top: 0!important; margin-bottom: 1.2rem!important; } /* ── Primary button ──────────────────────────────────────────────────── */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--bd-primary-text); border: none; border-radius: 12px; padding: 0.875rem 1.75rem; font-weight: 700; cursor: pointer; transition: opacity 0.2s, transform 0.1s; font-family: var(--bd-font-body, inherit); text-decoration: none; white-space: nowrap; line-height: 1.2; } .btn-primary:hover { opacity: 0.88; } .btn-primary:active { transform: scale(0.98); } .btn-primary.loading, .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* ── White button (slider overlay) ──────────────────────────────────── */ .button-type-white { background: white; color: var(--color-black); font-weight: 600; border-radius: 10px; } .button-type-white:hover { background: white; color: var(--color-primary); font-weight: 600; border-radius: 10px; } .button-for-primary { font-weight: 600; border-radius: 10px; } .button-for-primary:hover { font-weight: 600; border-radius: 10px; } /* ── Hamburger toggle ────────────────────────────────────────────────── */ .toggle { display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; } .line-toggle { display: block; width: 24px; height: 2px; background: var(--color-black); transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; } .toggle.activate .line-toggle:nth-child(1) { transform: translateY(7px) rotate(45deg); } .toggle.activate .line-toggle:nth-child(2) { opacity: 0; } .toggle.activate .line-toggle:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Mobilná navigácia ───────────────────────────────────────────────── */ .m-nav { display: none; background: var(--color-black); padding: 1em 2em; } .m-nav.on { display: block; } .m-nav ul, .m-nav .primary { display: flex; flex-direction: column; gap: 0; } .m-nav li { border-bottom: 1px solid rgba(255,255,255,0.08); } .m-nav a { display: block; color: #fff; padding: 0.8em 0; text-transform: uppercase; letter-spacing: 0.04em; } .m-nav a:hover { color: var(--color-primary); } /* ── Vyhľadávací panel ───────────────────────────────────────────────── */ .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; } /* ── Účet dropdown ───────────────────────────────────────────────────── */ .ucet-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.10); min-width: 180px; z-index: 500; overflow: hidden; } .ucet-dropdown.otvoreny { display: block; } .ucet-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 0.75em 1.1em; color: var(--color-black); transition: background 0.15s; border-bottom: 1px solid #f5f5f5; } .ucet-dropdown-item:last-child { border-bottom: none; } .ucet-dropdown-item:hover { background: #f5f5f5; color: var(--color-black); } .ucet-dropdown-item .fa { width: 16px; text-align: center; color: #888; } @media (max-width: 1023px) { .ucet-dropdown { right: 0; left: auto; } } /* ── Cena bez DPH ────────────────────────────────────────────────────── */ .bd-bez-dph { display: block; color: #888; font-weight: 400; margin-top: 2px; } /* ── WooCommerce overrides ───────────────────────────────────────────── */ .woocommerce-message, .woocommerce-info, .woocommerce-error { margin: 1em 0; } .woocommerce ul.products li.product .price { color: var(--color-black); font-weight: 600; } .woocommerce .woocommerce-ordering select, .woocommerce-page .woocommerce-ordering select { border: 1px solid #ddd; padding: 0.4em 0.8em; } a.added_to_cart { display: none !important; } /* cenový slider */ .ui-slider-horizontal { height: 4px; background: #ddd; border-radius: 2px; } .ui-slider-horizontal .ui-slider-handle { width: 16px; height: 16px; background: var(--color-primary); border-radius: 50%; border: none; top: -6px; cursor: pointer; } .ui-slider-horizontal .ui-slider-range { background: var(--color-primary); } /* ── Filter panel ────────────────────────────────────────────────────── */ .flex-form-filter { display: none; } .flex-form-filter.on { display: flex; } /* Pagination */ .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: 8px; font-weight: 500; color: var(--color-black-text, #444); text-decoration: none; transition: background 0.15s, color 0.15s; padding: 0 6px; margin: 0 2px; } .page-numbers:hover { background: #f5f5f5; } .page-numbers.current { background: var(--color-primary); color: var(--bd-primary-text); font-weight: 700; } .page-numbers.dots { background: none; } /* ── Značky lišta ────────────────────────────────────────────────────── */ .brands-menu-list { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 0 2em; scrollbar-width: none; } .brands-menu-list::-webkit-scrollbar { display: none; } .brands-menu-list li { flex-shrink: 0; } .brand-item { display: block; padding: 0.3em 0.6em; } .brand-item__thumb { width: auto; height: 28px; object-fit: contain; } /* ── Sticky header ───────────────────────────────────────────────────── */ header[role="banner"] { position: sticky; top: 0; z-index: 500; transition: box-shadow 0.25s, transform 0.28s ease; } header[role="banner"].bd-sticky { box-shadow: 0 2px 16px rgba(0,0,0,0.08); } header[role="banner"].bd-sticky .brands { max-height: 0; overflow: hidden; padding: 0; } .brands { max-height: 100px; transition: max-height 0.3s ease; overflow: hidden; } /* Skrývanie pri scrollovaní dole (zapína sa cez data-bd-autohide na hlavičke). Hore sa lišta vráti. Posúva sa o vlastnú výšku, nech nezostane pruh. */ header[role="banner"].bd-skryta { transform: translateY(-100%); } /* Používateľ si prial pohyb bez animácie? Lišta sa stále schová, len bez posuvu — nie je dôvod brať mu funkciu, stačí vypnúť animáciu. */ @media (prefers-reduced-motion: reduce) { header[role="banner"] { transition: box-shadow 0.25s; } } /* ── Mobilná zásuvka: vlastný scroll, stránka pod ňou stojí ──────────── */ /* Zámok musí byť na — samotné body{overflow:hidden} stránku nezamkne, pretože viewport scrolluje podľa koreňového elementu. */ html.bd-mnav-open, html.bd-mnav-open body { overflow: hidden; } /* Zámok scrollu zruší position:sticky (html prestane byť scroll kontajner), takže hlavička by pri otvorení zásuvky odletela mimo obrazovku aj s krížikom. Kým je zásuvka otvorená, držíme ju preto natvrdo hore. */ html.bd-mnav-open header[role="banner"] { position: fixed; top: 0; left: 0; right: 0; transform: none; } .m-nav.on { position: fixed; left: 0; right: 0; top: var(--bd-mnav-top, 64px); bottom: 0; z-index: 499; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* ── Back to top ─────────────────────────────────────────────────────── */ #bd-back-top { position: fixed; bottom: 2rem; right: 1.5rem; width: 42px; height: 42px; border-radius: 50%; background: var(--color-black); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 400; opacity: 0; transform: translateY(12px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; } #bd-back-top.viditelny { opacity: 1; transform: translateY(0); pointer-events: auto; } #bd-back-top:hover { background: var(--color-primary); color: var(--bd-primary-text); } /* ── Toast ───────────────────────────────────────────────────────────── */ #bd-toast-container { position: fixed; bottom: 5rem; right: 1.5rem; z-index: 9998; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .bd-toast { background: var(--color-black); color: #fff; padding: 0.75em 1.2em; border-radius: 8px; display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateX(20px); transition: opacity 0.3s, transform 0.3s; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,0.18); } .bd-toast .fa { color: var(--color-primary); } .bd-toast.viditelny { opacity: 1; transform: translateX(0); } .bd-toast--error { background: #dc2626; } .bd-toast--error .fa { color: #fca5a5; } /* ── Sticky add-to-cart bar (mobile) ─────────────────────────────────── */ .sticky-kosik-bar { /* Na mobile ide obsah pod seba — názov produktu tak nemusí súperiť o šírku s tlačidlom a nikde sa neoreže. */ display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #e5e5e5; padding: 0.75em 1.25em; z-index: 300; flex-direction: column; align-items: stretch; gap: 0.6em; box-shadow: 0 -4px 16px rgba(0,0,0,0.08); } @media (max-width: 1023px) { .sticky-kosik-bar.viditelny { display: flex; } } .sticky-kosik-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .sticky-kosik-nazov { font-weight: 500; line-height: 1.25; } .sticky-kosik-cena { font-weight: 700; } .sticky-kosik-btn { background: var(--color-black); color: #fff; border: none; border-radius: 6px; padding: 0.85em 1.4em; font-weight: 600; cursor: pointer; width: 100%; white-space: nowrap; flex-shrink: 0; transition: background 0.2s; } .sticky-kosik-btn:hover { background: var(--color-primary); color: var(--bd-primary-text); } /* ── Promo slider ────────────────────────────────────────────────────── */ .bd-ps-slide[data-href] { cursor: pointer; } /* ═══════════════════════════════════════════════════════════════════════ PRODUCT DETAIL PAGE ═══════════════════════════════════════════════════════════════════════ */ /* Gallery */ .bd-gallery { outline: none; } .bd-gal-main { position: relative; background: #fff; border-radius: 20px; overflow: hidden; cursor: grab; user-select: none; aspect-ratio: 1/1; } .bd-gal-main:active { cursor: grabbing; } .bd-gal-track { display: flex; width: 100%; height: 100%; will-change: transform; } .bd-gal-slide { flex: 0 0 100%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .bd-gal-slide img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; padding: 24px; pointer-events: none; } /* Arrows */ .bd-gal-prev, .bd-gal-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.92); border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 2px 10px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-black); padding: 0; transition: background 0.2s, box-shadow 0.2s; } .bd-gal-prev { left: 12px; } .bd-gal-next { right: 12px; } .bd-gal-prev:hover, .bd-gal-next:hover { background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.15); } /* Counter */ .bd-gal-counter { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,0.38); color: #fff; font-weight: 600; padding: 3px 9px; border-radius: 999px; line-height: 1.6; pointer-events: none; } /* Thumbnails */ .bd-gal-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; margin-top: 12px; } .bd-gal-thumbs::-webkit-scrollbar { display: none; } .bd-gal-thumb { flex-shrink: 0; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: #fff; cursor: pointer; transition: border-color 0.18s; padding: 0; } .bd-gal-thumb img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: block; } .bd-gal-thumb:hover { border-color: #ccc; } .bd-thumb-active { border-color: var(--color-primary) !important; } /* Variation buttons — selected state */ .bd-var-btn.bd-var-selected { background: var(--color-primary); border-color: var(--color-primary); color: var(--bd-primary-text); font-weight: 700; } /* Tabs */ .bd-tab-btn { flex-shrink: 0; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 14px 22px; font-weight: 600; color: #999; cursor: pointer; transition: color 0.18s, border-color 0.18s; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-family: var(--bd-font-body, inherit); } .bd-tab-btn:hover { color: var(--color-black); } .bd-tab-active { color: var(--color-black) !important; border-bottom-color: var(--color-primary) !important; } .bd-tab-badge { background: var(--color-primary); color: var(--bd-primary-text); font-weight: 700; padding: 1px 6px; border-radius: 999px; line-height: 1.6; } .bd-tab-panel { display: none; } .bd-tab-panel-active { display: block; } /* Content prose */ .bd-prose { line-height: 1.8; color: var(--color-black-text, #444); } .bd-prose p { margin: 0 0 12px; } .bd-prose h2 { font-weight: 700; margin: 20px 0 8px; color: var(--color-black); font-family: var(--bd-font-heading, inherit); } .bd-prose h3 { font-weight: 600; margin: 16px 0 6px; color: var(--color-black); font-family: var(--bd-font-heading, inherit); } .bd-prose ul { list-style: disc; padding-left: 20px; margin: 0 0 12px; } .bd-prose li { margin-bottom: 4px; } /* Specs grid */ .bd-specs-grid { display: grid; grid-template-columns: 1fr; border: 1px solid #efefef; border-radius: 14px; overflow: hidden; } @media (min-width: 640px) { .bd-specs-grid { grid-template-columns: 1fr 1fr; } } .bd-spec-row { display: flex; align-items: stretch; border-bottom: 1px solid #f5f5f5; } .bd-spec-row:last-child { border-bottom: none; } .bd-spec-dt { flex: 0 0 44%; background: #fafafa; font-weight: 600; color: var(--color-black-text, #555); padding: 12px 16px; border-right: 1px solid #f0f0f0; } .bd-spec-dd { flex: 1; color: var(--color-black); padding: 12px 16px; margin: 0; } /* WC Reviews */ .woocommerce-Reviews h2, .comment-reply-title { font-weight: 700 !important; color: var(--color-black) !important; margin-bottom: 16px !important; font-family: var(--bd-font-heading, inherit) !important; } .woocommerce-Reviews .comment-form textarea, .woocommerce-Reviews .comment-form input[type="text"], .woocommerce-Reviews .comment-form input[type="email"] { width: 100%; border: 1px solid #e0e0e0; border-radius: 10px; padding: 10px 14px; outline: none; transition: border-color 0.2s; font-family: var(--bd-font-body, inherit); box-sizing: border-box; } .woocommerce-Reviews .comment-form textarea:focus, .woocommerce-Reviews .comment-form input:focus { border-color: var(--color-primary); } .woocommerce-Reviews .form-submit input[type="submit"] { background: var(--color-primary); color: var(--bd-primary-text); border: none; border-radius: 12px; padding: 12px 28px; font-weight: 700; cursor: pointer; transition: opacity 0.2s; font-family: var(--bd-font-body, inherit); } .woocommerce-Reviews .form-submit input[type="submit"]:hover { opacity: 0.85; } /* Gallery column sticky (desktop) */ @media (min-width: 768px) { .bd-gallery-col, .bd-gallery { position: sticky; top: 80px; align-self: start; } } /* ── Blog: typografia obsahu z editora ─────────────────────────────────── Tailwind preflight zruší východiskový vzhľad nadpisov a zoznamov, takže článok napísaný v editore by sa vykreslil ako plochý text. Veľkosti sa berú z tokenov (nastavenia obchodu), farby z premenných témy. */ .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, #161515); font-weight: 700; line-height: 1.25; margin: 1.9em 0 .5em; } .bd-clanok h2 { font-size: var(--text-small-mobile, 1.2rem); } .bd-clanok h3 { font-size: var(--text-size-text-mobile, 1rem); } .bd-clanok h4 { font-size: var(--text-size-text-mobile, 1rem); opacity: .85; } @media (min-width: 768px) { .bd-clanok h2 { font-size: var(--text-small-pc, 1.6rem); } .bd-clanok h3 { font-size: var(--text-size-text-pc, 1.1rem); } .bd-clanok h4 { font-size: var(--text-size-text-pc, 1.1rem); } } .bd-clanok a { color: var(--color-primary, #8e8292); text-decoration: underline; text-underline-offset: 3px; } .bd-clanok a:hover { text-decoration: none; } .bd-clanok strong { color: var(--color-black, #161515); 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, #8e8292); } .bd-clanok blockquote { margin: 1.6em 0; padding: 1.1em 1.4em; border-left: 4px solid var(--color-primary, #8e8292); background: var(--color-contrast, #f3f3f1); border-radius: 0 12px 12px 0; color: var(--color-black, #161515); } .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, 1rem); } .bd-clanok hr { border: 0; border-top: 1px solid rgba(0,0,0,.1); margin: 2.2em 0; } /* Tabuľka musí mať 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, #161515); font-weight: 700; } .bd-clanok code { background: var(--color-contrast, #f3f3f1); padding: .12em .4em; border-radius: 6px; } .bd-clanok pre { background: var(--color-black, #161515); color: #fff; padding: 1em 1.2em; border-radius: 12px; overflow-x: auto; } .bd-clanok pre code { background: none; padding: 0; color: inherit; } /* ── Formulár z pluginu (Contact Form 7) ───────────────────────────────── Majiteľ si polia skladá sám v plugine, vzhľad drží téma. Selektory sú zámerne aj bez .wpcf7, aby to sadlo aj na iný formulárový plugin. Všetko cez premenné témy — po zmene farieb v nastaveniach sadne aj sem. */ .bd-formular p { margin: 0 0 1rem !important; } .bd-formular label { display: block; color: var(--color-black, #161515); font-weight: 600; } .bd-formular br { display: none; } /* Polia */ .bd-formular input[type="text"], .bd-formular input[type="email"], .bd-formular input[type="tel"], .bd-formular input[type="url"], .bd-formular input[type="number"], .bd-formular input[type="date"], .bd-formular select, .bd-formular textarea { width: 100%; box-sizing: border-box; margin-top: .38rem; padding: .65rem .875rem; background: #fff; color: var(--color-black, #161515); border: 1px solid rgba(0,0,0,.1); border-radius: 10px; font-family: inherit; font-size: var(--text-size-text-mobile, 1rem); line-height: 1.5; outline: none; transition: border-color .15s; } @media (min-width: 768px) { .bd-formular input[type="text"], .bd-formular input[type="email"], .bd-formular input[type="tel"], .bd-formular input[type="url"], .bd-formular input[type="number"], .bd-formular input[type="date"], .bd-formular select, .bd-formular textarea { font-size: var(--text-size-text-pc, 1.1rem); } } .bd-formular input:focus, .bd-formular select:focus, .bd-formular textarea:focus { border-color: var(--color-primary, #8e8292); } .bd-formular textarea { min-height: 130px; resize: vertical; } .bd-formular ::placeholder { color: rgba(0,0,0,.35); } /* Zaškrtávacie polia a prepínače */ .bd-formular .wpcf7-checkbox, .bd-formular .wpcf7-radio, .bd-formular .wpcf7-acceptance { display: flex; flex-direction: column; gap: .5rem; margin-top: .38rem; } .bd-formular .wpcf7-list-item { display: block; margin: 0; } .bd-formular .wpcf7-list-item label { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; cursor: pointer; } .bd-formular .wpcf7-list-item-label { color: var(--color-black-text, #555); line-height: 1.5; } .bd-formular input[type="checkbox"], .bd-formular input[type="radio"] { width: 1.05rem; height: 1.05rem; margin: .2rem 0 0; flex-shrink: 0; accent-color: var(--color-primary, #8e8292); cursor: pointer; } /* Odosielacie tlačidlo — rovnaké ako primárne tlačidlá v téme */ .bd-formular input[type="submit"], .bd-formular button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: .8rem 2rem; background: var(--color-primary, #8e8292); color: var(--bd-primary-text, #fff); border: 0; border-radius: 12px; font-family: inherit; font-weight: 700; font-size: var(--text-size-text-mobile, 1rem); line-height: 1.2; cursor: pointer; transition: opacity .2s; } @media (min-width: 640px) { .bd-formular input[type="submit"], .bd-formular button[type="submit"] { width: auto; } } @media (min-width: 768px) { .bd-formular input[type="submit"], .bd-formular button[type="submit"] { font-size: var(--text-size-text-pc, 1.1rem); } } .bd-formular input[type="submit"]:hover, .bd-formular button[type="submit"]:hover { opacity: .9; } .bd-formular input[type="submit"]:disabled { opacity: .5; cursor: not-allowed; } /* Hlásenia a validácia */ .bd-formular .wpcf7-not-valid-tip { display: block; margin-top: .35rem; color: #b3261e; font-size: var(--text-size-text-mobile, 1rem); } .bd-formular .wpcf7-not-valid { border-color: #b3261e !important; } .bd-formular .wpcf7-response-output { margin: 1.2rem 0 0 !important; padding: .8rem 1rem !important; border: 1px solid rgba(0,0,0,.1) !important; border-left: 4px solid var(--color-primary, #8e8292) !important; border-radius: 0 10px 10px 0 !important; background: var(--color-contrast, #f3f3f1); color: var(--color-black, #161515); } .bd-formular form.sent .wpcf7-response-output { border-left-color: #2e7d32 !important; } .bd-formular form.invalid .wpcf7-response-output, .bd-formular form.failed .wpcf7-response-output { border-left-color: #b3261e !important; } .bd-formular .wpcf7-spinner { margin: 0 0 0 .6rem; } /* Mobilny panel kategorii sa sprava ako zasuvka — od spodku hlavicky az na spodok obrazovky, so scrollom a bez presvitania stranky. */ .bd-catmob-panel:not(.hidden) { position: fixed; left: 0; right: 0; top: var(--bd-mnav-top, 64px); bottom: 0; z-index: 499; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* ── Pokladňa: súhrn objednávky na mobile ───────────────────────────────── Tabuľka súhrnu má dva stĺpce (názov | cena). Na úzkom displeji sa cena nezmestila a orezávala sa, preto do 639 px idú bunky pod seba na plnú šírku. Od 640 px zostáva pôvodná dvojstĺpcová tabuľka. */ @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: 0.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; } /* Cena nech sa od názvu opticky oddelí */ #bd-co-review td { margin-top: 0.15rem; } #bd-co-review tr.cart_item + tr.cart_item { border-top: 1px solid #f3f4f6; } } /* ── koniec: súhrn objednávky na mobile ────────────────────────────────── */ /* ═══ POISTKA PROTI PRETEKANIU ═══════════════════════════════════════════ Layout musí zniesť ľubovoľne úzku obrazovku (testované od 240 px). Nič sa nesmie roztiahnuť širšie, než je preň miesto. POZOR: pravidlá, ktoré sa bijú s Tailwind utilitami, musia byť v @layer. Nezaradené pravidlo prebije každú vrstvu, takže by `h-[62px]` a spol. prestali fungovať. */ @layer base { /* 1. Médiá a vložený obsah — height nechávame na Tailwind preflight */ img, svg, video, canvas, iframe, embed, object { max-width: 100%; } /* 2. Formulárové polia — bez box-sizing ich padding pretlačí cez rodiča */ input, textarea, select, button { max-width: 100%; box-sizing: border-box; } /* 3. Tabuľky */ table { max-width: 100%; } /* 4. Prvky s `shrink-0` (logá) sa nesmú roztiahnuť cez rodiča */ .shrink-0, .flex-shrink-0 { max-width: 100%; } } /* 5. select2 (výber krajiny v pokladni) si šírku ráta sám */ .select2-container { max-width: 100% !important; } /* 6. Deti flex/grid kontajnerov sa musia vedieť zmenšiť pod šírku obsahu. Bez min-width:0 flex prvok nikdy neklesne pod svoju min-content šírku a vytlačí celý blok do strany — najčastejšia príčina pretekania. */ .bd-co *, .bd-co2 *, .bd-co-row *, #bd-co-review * { min-width: 0; } /* 7. Dlhé reťazce bez medzier (SKU, e-mail, dlhý názov) nesmú rozťahovať kartu — `anywhere` na rozdiel od `break-word` znižuje aj min-content šírku, takže sa premietne do výpočtu layoutu. */ .bd-co, .bd-co2, #bd-co-review, .bd-co-row, #bd-footer { overflow-wrap: anywhere; } /* 8. Pod 380 px uber z odsadenia, nech na obsah ostane miesto */ @media (max-width: 380px) { .bd-co .p-5, .bd-co2 .p-5 { padding: 0.85rem; } .bd-co .px-5, .bd-co2 .px-5 { padding-left: 0.85rem; padding-right: 0.85rem; } .bd-co .px-4, .bd-co2 .px-4 { padding-left: 0.6rem; padding-right: 0.6rem; } .bd-co .px-6, .bd-co2 .px-6 { padding-left: 0.85rem; padding-right: 0.85rem; } #bd-footer .p-6 { padding: 0.75rem; } #bd-footer .p-10 { padding: 1rem; } #bd-footer .px-6 { padding-left: 0.75rem; padding-right: 0.75rem; } /* stranky s pôvodným odsadením 2em (O nás, Kontakt) */ main .px-\[2em\] { padding-left: 1rem; padding-right: 1rem; } main .p-\[2em\] { padding: 1rem; } } /* ═══ koniec poistky ════════════════════════════════════════════════════ */ /* ═══ WOOCOMMERCE vs. VÝŠKA OBRÁZKOV ════════════════════════════════════ WooCommerce nastavuje `.woocommerce-page img { height: auto }`. Pravidlo je mimo @layer a má vyššiu špecificitu než utilita `.h-full`, takže obrázkom cez celú plochu (pozadie newslettera, slider, dlaždice) zhodí výšku. Toto pravidlo musí ostať mimo @layer, inak by ho WooCommerce znova prebilo. */ .woocommerce img.h-full, .woocommerce-page img.h-full { height: 100%; } .woocommerce img.w-full, .woocommerce-page img.w-full { width: 100%; } .woocommerce img.object-cover, .woocommerce-page img.object-cover { object-fit: cover; } /* ═══ koniec ════════════════════════════════════════════════════════════ */