/* 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. */ .product-specifications table { width: 100%; border-collapse: separate; border-spacing: 0 10px; } .product-specifications td { text-align: left !important; vertical-align: top; padding: 0; } .product-specifications td:first-child { width: 180px; padding-right: 30px; font-weight: 700; } .product-specifications td:last-child { width: auto; } 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; } /* ── Base ────────────────────────────────────────────────────────────── */ /* Vodorovné orezanie: `hidden` na je záloha pre staršie prehliadače. Na ho dať nesmieme — body by sa stal vlastným scroll kontajnerom a position:sticky na hlavičke by prestalo fungovať. `clip` orezáva rovnako, ale scroll kontajner nerobí, takže ho dáme na oboje. Bez neho sa dá na iOS stránkou pohnúť do strán kvôli bočnému panelu košíka, ktorý je zaparkovaný za pravým okrajom obrazovky. */ html { overflow-x: hidden; } @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; } /* ── 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 { 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; align-items: center; justify-content: space-between; gap: 1em; 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; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sticky-kosik-cena { font-weight: 700; } .sticky-kosik-btn { background: var(--color-black); color: #fff; border: none; border-radius: 6px; padding: 0.7em 1.4em; font-weight: 600; cursor: pointer; 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; } } /* ── 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. Inline SVG (ikony v tlačidlách) vynechané: majú pevný rozmer a v tlačidle s paddingom (.btn-primary + w-11) by ich max-width zrazil na 0 px. */ img, 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 ════════════════════════════════════════════════════════════ */