/*!
Theme Name: ProfiECU2024
Theme URI: http://underscores.me/
Author: Ondřej Tóth
Author URI: https://otrock.cz
Description: Šablona na míru pro ProfiECU.cz
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: profiecu2024
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

ProfiECU2024 is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
    -webkit-appearance: textfield;
    appearance: textfield;
    outline-offset: -2px;
}

/**∂
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #000;
	font-family: var(--font-display);
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: var(--color-accent);
	text-decoration: none;
}

a:hover,
a:focus,
a:active {
	color: var(--color-accent);
	text-decoration: underline;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;

}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin:0;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}




/* Header Styles */
.site-header {
    width: 100%;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    background-color: #FEF4E6; 
    padding: 10px 40px;
    color: #000;
}

.top-bar .dotaz {
	font-size: 12px;
	font-weight: bold;
	padding-right: 50px;
}

.top-bar .contact {
	font-size: 12px;
	font-weight: 800;
}

.top-bar .greytext {
	font-size: 12px;
	font-weight: normal;
	color: #666666;
	padding-right: 50px;
	padding-left: 10px;
}

.top-bar .registrace {
	font-size: 12px;
	color: #000;
	font-weight: 400;
	margin-right: 25px;
}

.top-bar .problemstart {
	font-size: 12px;
	color: var(--color-accent);
	font-weight: bold;
	margin-right: 5px;
}

.top-bar .problemend {
	font-size: 12px;
	font-weight: 800;
	color: var(--color-accent);
}

.mobile-br {
	display: none;
}

.top-bar-right a {
    text-decoration: none;
}

.top-bar-right a:hover {
    text-decoration: underline;
}

.top-bar-left a {
    margin-right: 10px;
    text-decoration: none;
}

.second-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    border-bottom: 1px solid #E5E5E5;
}


.site-branding img {
    height: 60px;
    width: auto; /* Maintain aspect ratio */
}


.header-search {
    flex: 1;
    text-align: center;
}

.header-search input {
    width: 80%;
    padding: 8px;
    font-size: 16px;
}

.main-navigation {
    text-align: right;
}

.header-buttons {
    display: flex;
    gap: 10px;
}

.button {
    padding: 15px 25px;
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    text-align: center;
    border-radius: var(--radius-btn);
    font-size: 12px;
}

.yellow-button {
    background-color: #FEF4E6;
    color: var(--color-accent);
}

.yellow-button:hover, .green-button:hover {
    background-color: var(--color-accent);
    color: #FFF;
}

.green-button {
    background-color: var(--color-cta-primary);
}

@media (max-width: 768px) {
    .second-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-search {
        text-align: left;
        margin-top: 10px;
    }

    .header-buttons {
        flex-direction: column;
        width: 100%;
        margin-top: 10px;
    }
}

/* Menu Item Styles */
.main-navigation ul li a {
    font-size: 14px;
    color: #000;
    font-weight: 800;
    text-decoration: none;
    padding: 0 15px; /* Add space between menu items */
}

.homepage-postup-text p {
	color: #F8B44D;
	font-size: 16px;
	font-weight: 800;

}

.main-navigation ul li a:hover {
    color: var(--color-accent); /* Change color on hover */
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end; /* Align menu items to the right */
    margin-right: 25px;
}

.main-navigation ul li {
    margin: 0;
    padding: 0;
}

/* Footer Styles */
.site-footer {
    padding: 20px 40px;
    border-top: 1px solid #E5E5E5;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    margin: 40px auto 0 auto;
    width: 90%;
    max-width: 1200px;
}

.footer-column {
    flex: 1;
    text-align: center;
}

.footer-column img {
    max-height: 150px;
}

.footer-column ul {
	text-align: left;
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin: 5px 0;
}

.footer-column ul li a {
    color: #000;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
}

.footer-column ul li a:hover {
    color: var(--color-accent); /* Same hover color as menu */
}

.footer-text p {
    font-weight: 800;
    font-size: 16px;
    margin: 0;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    font-size: 14px;
        width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-bottom-left {
    flex: 1;
    text-align: left;
	color: rgba(0,0,0,0.4);
}

.footer-bottom-center {
    flex: 1;
    text-align: center;
    color: #000;
}

.footer-bottom-right {
    flex: 1;
    text-align: right;
}

.footer-bottom-right a {
    color: #3b5998; /* Facebook blue */
    font-size: 20px;
    text-decoration: none;
}

.footer-bottom-right a:hover {
    color: var(--color-accent); /* Match the hover color */
}

/* Upravujeme šířku jednotlivých sloupců */
.footer-column:nth-child(1),
.footer-column:nth-child(4) {
    flex: 0 0 40%; /* otrock: První a čtvrtý sloupec zabírají 30% šířky */
}

.footer-column:nth-child(1) {
	text-align: left;
}
.footer-column:nth-child(2),
.footer-column:nth-child(3) {
    flex: 0 0 10%; /* otrock: Druhý a třetí sloupec zabírají 20% šířky */
}

.footer-column:nth-child(3) {
	padding-left: 30px;
}

/* Zarovnání LI seznamů ke spodní části sloupce */
.footer-column {
    display: flex;           /* otrock: Kontejner jako flexbox */
    flex-direction: column;  /* otrock: Uspořádání obsahu ve sloupci vertikálně */
}

.footer-column ul {
    margin-top: auto;   
    margin-left: 0;     /* otrock: Posune UL seznam na spodní konec kontejneru */
}

.mobil-footer, .mobil-footer-bottom {
	display: none;
}

.mobil-footer a {
	    color: #000;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
}


/* Pro zařízení mezi 1024px a 768px (tablety na šířku i výšku) */
@media only screen and (max-width: 1024px) and (min-width: 768px) {
    /* Vaše CSS kód zde */

    .site-footer {
    	padding: 0;
    }

    .footer-column:nth-child(1),
.footer-column:nth-child(4) {
    flex: 0 0 30%; /* otrock: První a čtvrtý sloupec zabírají 30% šířky */
}

.footer-column:nth-child(1) {
	text-align: left;
}
.footer-column:nth-child(2),
.footer-column:nth-child(3) {
    flex: 0 0 20%; /* otrock: Druhý a třetí sloupec zabírají 20% šířky */
}

.footer-column:nth-child(2),
.footer-column:nth-child(3) {
	padding-left: 30px;
	margin-left: 0;
}
}

/* Pro zařízení 768px a méně (mobilní zařízení a menší tablety) */
@media only screen and (max-width: 768px) {

.footer-column:nth-child(3) {
	margin-left: 0;
}
		.desktop {
		display: none;
	}

   .site-footer {
    padding:0;

}
.footer-column-mobile {
    display: flex
;
    flex-direction: row;

        gap: 50px;
}

.footer-top {
	flex-direction: column;
	    width: 90%;
    margin: 0 auto;
    padding-top: 25px;
}

 .footer-bottom  {
	flex-direction: column;
	    width: 90%;
    margin: 0 auto;
}

.mobil-footer-bottom {
	display: block;
}
.footer-column ul {
	margin-left: 0;
	flex: 1;
}
	.mobil-footer {
		display: block;
		text-align: center;
		padding-top: 75px;
		    padding-left: 50px;
    padding-right: 50px;
	}


.footer-bottom-center p, .footer-bottom-left p { margin-bottom: 10px;}

.footer-bottom-left p {
	font-weight: bold!important;
	color: #000!important;
	font-size: 12px!important;
	text-align: center;

}

.footer-bottom-center p {
	font-weight: 800;
	color: rgba(0, 0, 0, 0.3);
	font-size: 10px;
	text-align: center;

}

.footer-bottom-right {
	text-align: center;
	padding-top: 25px;
	padding-bottom: 25px;
}
}


/* Breadcrumbs */
.breadcrumbs, .breadcrumbs a {
    margin-bottom: 20px;
    font-size: 14px;
    color: #C7C7C7;
    text-align: left;
    text-decoration: none;}

    .breadcrumbs a:hover {
    color: var(--color-accent);
    text-decoration: underline;}

/* Container for the Two-Column Layout */
.single-co-nabizime-jednotky-container {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 50px;
    padding-left: 0; /* No additional padding needed for this specific container */
    padding-right: 0; /* No additional padding needed for this specific container */
    margin-top: 100px;
}

.single-produkt .single-co-nabizime-jednotky-container {

    margin-top: 100px;

}

.single-produkt .brand-row-link {
   display: none;
}

/* Left Column: Featured Image */
.single-co-nabizime-jednotky-left {
    width: 50%;
    padding-right: 20px;
}

.single-co-nabizime-jednotky-left .post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;

}

.single-co-nabizime-jednotky-left .post-thumbnail {
position: relative;

}

/* Right Column: Post Title and Description */
.single-co-nabizime-jednotky-right {
    width: 50%;
    padding-left: 20px;
}

.single-co-nabizime-jednotky-right .entry-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 0px;
    margin-top: 0;
    line-height: 42px; /* absolutní záměrně (= 1.5×28px) — NEnahrazovat var(--lh-heading): násobitel se dědí per font-size potomků (Batch C review) */

}

.single-co-nabizime-jednotky-right .desc p {
    font-size: 16px;
    font-weight: 600;
    margin-top: 0;
    line-height: 22px;
    color: rgba(0,0,0,0.5);
    margin-bottom: 10px;

}

.main-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto; /* Center the container */

    box-sizing: border-box; /* Ensure padding doesn't affect overall width */
}

/* Attributes List Styles */


.attribute-item {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
}

.single-co-nabizime-jednotky-container-next .single-co-nabizime-jednotky-left .attribute-item:last-child {
    margin-bottom: 0;
}

.attribute-icon {
    flex: 0 0 50px; /* Fixed width for the icon */
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-circle {
    width: 50px;
    height: 50px;
    background-color: #FEF4E6; /* Yellow Circle */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-circle i {
    color: var(--color-accent); /* White check icon */
    font-size: 25px;
}

.attribute-content {
    flex: 1;
    padding-left: 15px;
}

.attribute-title {
    font-size: 14px;
    font-weight: 400;
    color: #A5A5A5;
    margin: 0 0 5px 0;
        font-family: var(--font-meta);
}

.attribute-value {
    font-size: 14px;
    font-weight: 800;
    color: #000!important;
    margin: 0!important;
}


.podtrzeno {
    position: relative;
    display: inline-block;
    text-decoration-line: underline !important;
    text-decoration-color: var(--color-accent) !important;
    text-decoration-thickness: 2px !important;
    text-underline-position: under;
}

.header-search {
	margin: 0 15px;
}
.custom-search {
    position: relative;
    width: 100%;

}

.custom-search input[type="text"] {
    width: 100%;
    padding: 10px 40px 10px 15px; /* Padding na text i místo pro ikonu */
    border: 1px solid #ccc; /* Šedý okraj */
    border-radius: var(--radius-input); /* Zaoblené rohy */
    font-size: 12px;
    color: #000; /* Černý text při psaní */
    outline: none; /* Odstranění modrého okraje při zaměření */
    box-sizing: border-box;
}

.custom-search input[type="text"]::placeholder {
    color: #aaa; /* Šedý placeholder */
}

.custom-search button {
    position: absolute;
    top: 50%;
    right: 10px; /* Nastavení polohy ikony vpravo */
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    height: 20px; /* Přizpůsobení velikosti ikoně */
    width: 20px;
}

.custom-search button img {
    width: 100%;
    height: auto;
    display: block;
}

.podtrzeno-sedy {
    position: relative;
    display: inline-block;
    color: black;
    text-decoration-line: underline !important;
    text-decoration-color: #CCC !important;
    text-decoration-thickness: 1px !important;
    text-underline-position: under;
}



/* New container class to replace the old one */
.attribute-item-new {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    margin-top: 40px;

}

/* New content class for the text */
.attribute-content-new {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap; /* Ensures text and icon stay on one line */
}

/* LINK-01: P3 -> P1 kontextovy blok na detailu dilu (modely-aut L4) */
.cn-context-links { margin-top: 20px; }
.cn-context-links-title { font-weight: 600; margin: 0 0 8px; }
.cn-context-links-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cn-context-links-list a { display: inline-flex; align-items: center; gap: 8px; }
.cn-context-links-list svg { flex: 0 0 auto; }

/* New icon class to place the icon immediately after the text */
.attribute-icon-new {
    margin-left: 20px; /* Space between text and icon */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Reusing your existing circle and icon styles */
.icon-circle {
    width: 50px;
    height: 50px;
    background-color: #FEF4E6; /* Yellow Circle */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-circle i {
    color: var(--color-accent); /* White check icon */
    font-size: 25px;
}

/* Reusing your existing text styles */
.attribute-text {
    font-size: 20px;
    font-weight: 800; /* Adjusted weight for emphasis */
}

.cena-title {
	font-size: 20px;
}

.cenadesc {
	font-weight: 400;
	color: #A5A5A5;
	margin-bottom: 30px;
	font-size: 12px;
	font-family: var(--font-meta);
}

.contact-last-phase {
	font-size: 16px;
	font-weight: 800;
	padding-left: 5px;
}

.telnum {
	display: flex;
	align-items: center;
	gap: 10px;
}

.telnum-phone {
	display: flex;
	align-items: center;
	gap: 5px;
}

/* Section container */
.brand-section {
    text-align: center;
    padding: 20px 0;
    margin: var(--spacing-section-vertical) auto; /* Center the grid */
    box-shadow: 0px 20px 99px #00000029;
border-radius: var(--radius-card);
background-color: #FFF;

}

.brand-section-two {
    text-align: center;
    padding: 0;
    margin: var(--spacing-section-vertical) auto; /* Center the grid */
}

/* Headline styling */
.brand-section-title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 20px;
    color: rgba(0, 0, 0, 0.35);
}

.brand-section-link-mobile {
    display: none;
}

/* Brand row container */
.brand-row {
    display: grid;
    grid-template-columns: repeat(10, 1fr); /* 10 equal-width columns */

}

/* Individual brand item */
.brand-item {
    position: relative;
    padding-top: 100%; /* Maintain aspect ratio (1:1 square) */
    overflow: hidden;
    background-color: #FFF; /* Placeholder background color */
}

/* Brand image styling */
.brand-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--radius-img); /* Matches the .brand-item border-radius */
}

/* Brand section link styling */
.brand-section a {
    color: #000;
    font-size: 16px;
    font-weight: 900;
    text-decoration: none;
}

.brand-section a:hover {
    color: var(--color-accent);
}

.brand-section-two a {
    color: rgba(165, 165, 165, 1);
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
}

.brand-section-two a:hover {
    color: var(--color-accent);
}



@media only screen and (max-width: 1024px) and (min-width: 768px) {

.brand-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 10 equal-width columns */
    margin: 0 auto; /* Center the grid */
    padding-bottom: 25px;
    width: 100%;
}

}

.brand-row-mobil {
	display: none;
}

@media only screen and (max-width: 767px) {

.brand-row-mobil {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 10 equal-width columns */
    margin: 0 auto; /* Center the grid */
    padding-bottom: 50px;
    width: 100%;
}

.brand-row {
    display: none;

}
}




/* Section container */
.gallery-section {
    text-align: center;
    margin: var(--spacing-section-vertical) auto;
}

/* Headline styling */
.gallery-section .section-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 40px;
    color: rgba(0,0,0,0.35);
}

/* Gallery row container */
.gallery-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 equal-width columns */
    gap: 40px; /* Adjust gap between grid items as needed */
    margin: 0 auto; /* Center the grid */
}

/* Pro zařízení mezi 1024px a 768px (tablety na šířku i výšku) */
@media only screen and (max-width: 1024px) and (min-width: 768px) {
    /* Vaše CSS kód zde */
}

/* Pro zařízení 768px a méně (mobilní zařízení a menší tablety) */
@media only screen and (max-width: 768px) {
    .gallery-row {
    grid-template-columns: repeat(3, 1fr); /* 5 equal-width columns */
    gap: 10px; /* Adjust gap between grid items as needed */

}
}



/* Individual gallery item */
.gallery-item {
    position: relative;
    padding-top: 100%; /* Maintain aspect ratio (1:1 square) */
    overflow: hidden;
    border-radius: var(--radius-card); /* Optional: for rounded corners */
    background-color: #f0f0f0; /* Placeholder background color */
}

/* Gallery image styling */
.gallery-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-img); /* Matches the .gallery-item border-radius */
}


/* New custom box with background, larger shadow, and border radius */
.custom-box {
    background-color: #fff;
    box-shadow: var(--shadow-box); /* Larger shadow */
    padding: 20px 50px;
    margin-bottom: 50px;
    position: relative;
    z-index: 1;
    overflow: visible; /* Ensure overflow is visible */
    border-radius: var(--radius-box); /* Rounded corners */
}

.custom-box .attribute-value {
    padding-left: 10px;
    padding-top: 10px;
}

/* Flexbox to align text on the left and image on the right */
.custom-box-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Left side: text */
.custom-text {
    flex: 1;
}

.custom-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: #333;
}

.custom-description {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* Right side: image */
.custom-image {
    flex: 0 0 50%; /* Adjust the width of the image container */
    position: relative;
    z-index: 0;
      text-align: right;
}

.custom-image img {
    height: 125px;


    border-radius: var(--radius-box); /* Ensure the image also has rounded corners */
}

/* Desktop/Mobile visibility for custom-box */
.custom-box-desktop {
    display: block;
}

.custom-box-mobile {
    display: none;
}

.single-co-nabizime-jednotky-container-next {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    margin: 50px auto;
}

.single-co-nabizime-jednotky-container-next .single-co-nabizime-jednotky-right {
    display: flex;
    flex-direction: column;
}

.single-co-nabizime-jednotky-container-next .rating-produkt-tabs {
    margin-top: auto;
}

/* Section container */
.vyhody-section {
    text-align: center;
    margin: var(--spacing-section-vertical) 0;
}

.vyhody-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 equal-width columns */
    gap: 20px; /* Gap between grid items */


}

/* Individual vyhody item */
.vyhody-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 10px; /* Optional: rounded corners */
}


/* Pro zařízení mezi 1024px a 768px (tablety na šířku i výšku) */
@media only screen and (max-width: 1024px) and (min-width: 768px) {


    .vyhody-row {
    grid-template-columns: repeat(2, 1fr); /* 4 equal-width columns */

}
.vyhody-item {
	padding: 0;
}
}

/* Pro zařízení 768px a méně (mobilní zařízení a menší tablety) */
@media only screen and (max-width: 768px) {
    .vyhody-row {

    grid-template-columns: repeat(1, 1fr); /* 4 equal-width columns */


}
.vyhody-item {
	padding: 0;
}
}




/* Icon container with square image */
.vyhody-icon {
    flex: 0 0 25px; /* Fixed size for the icon */
    overflow: hidden;
    border-radius: 10px; /* Match with item border radius if needed */
    margin-right: 35px;
}

.vyhody-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure the image covers the square */
}

/* Text container */
.vyhody-text {
    flex: 1;
    text-align: left;
}

.vyhody-title {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 0 0;
}


/* FAQ Section */
.profiecu-faq-section {
    width: 90%;
    max-width: 800px;
    margin: 60px auto;
}

.profiecu-faq-heading {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 25px 0;
    text-align: center;
}

.profiecu-faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profiecu-faq-item {
    border: 1px solid #e8e8e8;
    border-radius: var(--radius-faq);
    overflow: hidden;
    transition: border-color 0.2s;
}

.profiecu-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    color: #1a1a1a;
    line-height: 1.4;
}

.profiecu-faq-question:hover {
    background: #FEF4E6;
}

.profiecu-faq-item.active {
    background-color: #FEF4E6;
}

.profiecu-faq-item.active .profiecu-faq-question {
    background: transparent;
}

.profiecu-faq-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background-color: #FEF4E6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s;
}

.profiecu-faq-icon i {
    color: #1a1a1a;
    font-size: 13px;
}

.profiecu-faq-item.active .profiecu-faq-icon {
    transform: rotate(180deg);
}

.profiecu-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 20px 0 66px;
}

.profiecu-faq-item.active .profiecu-faq-answer {
    max-height: 500px;
    padding: 0 20px 20px 66px;
}

.profiecu-faq-answer p {
    margin: 0 0 10px 0;
    font-size: 14px;
    line-height: 1.7;
    color: #444;
}

.profiecu-faq-answer p:last-child {
    margin-bottom: 0;
}

.profiecu-faq-answer ul {
    margin: 8px 0 0 0;
    padding: 0 0 0 18px;
    font-size: 14px;
    line-height: 1.7;
    color: #444;
}

.profiecu-faq-answer ul li {
    margin-bottom: 4px;
}

.profiecu-faq-answer a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}

.profiecu-faq-answer a:hover {
    text-decoration: underline;
}

/* Tablet + mobile: žádný boční margin, width i max-width 100% na faq sekci (user req). */
@media (max-width: 1024px) {
    .profiecu-faq-section {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .profiecu-faq-section {
        margin: 40px 0;
    }

    .profiecu-faq-question {
        font-size: 14px;
        padding: 15px 15px;
        gap: 12px;
    }

    /* Sjednotit velikost fontu odpovědi s otázkou (14px) na mobilu —
       drží to i pro text mimo <p>, <li>, <a> atd. */
    .profiecu-faq-answer,
    .profiecu-faq-answer p,
    .profiecu-faq-answer li,
    .profiecu-faq-answer a {
        font-size: 14px;
    }

    .profiecu-faq-answer {
        padding: 0 15px 0 59px;
    }

    .profiecu-faq-item.active .profiecu-faq-answer {
        padding: 0 15px 15px 59px;
    }
}

/* Dalsi Kategorie Slider Section */
.dalsi-kategorie-slider {
    width: 100%;
    background-color: #FEF4E6; /* Yellow background */
    padding: 30px 0;
}

.souvisejici-slider, .zkatalogu-slider {
    width: 100%;
    padding: 30px 0;
}


.slider-container {
    width: 90%;
    margin: 0 auto;
    max-width: 1200px;
}

.slider-headline {
    font-size: 24px;
    font-weight: 800;
    text-align: left;
    margin-top: 0;
}


.product-box {
    background-color: #fff;
    border-radius: var(--radius-card);
    padding: 20px;
       position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex!important;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease;
    height: 100%;
    margin-bottom: 20px;

}

.product-box a, .modely-aut-grid-item-slider a {color: #000!important;}
.product-box a:hover, .modely-aut-grid-item-slider a:hover {color: var(--color-accent)!important; text-decoration: none!important;}
.product-box-up, .modely-aut-grid-item-slider-up {
	height: 97%;
}

.modely-aut-grid-item-slider {
    border: 1px solid #EFEFEF;
    border-radius: var(--radius-card);
    padding: 15px;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.product-image {
    position: relative;
    margin-bottom: 5px;
    border-radius: 15px;
    overflow: hidden; /* To ensure the badge stays within the image */
}

.slick-track
{
    display: flex !important;
    align-items: stretch;
}

.slick-slide
{
    height: inherit !important;
    padding: 0 10px 0 10px;
}

.product-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 15px;
}

/* Category badge inside the image */
.product-category {
    position: absolute;
    bottom: 10px;
    left: 0px;
    background-color: #FEF4E6;
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 5px;
}

.product-type,
.product-name {
    text-align: left;
    font-size: 18px;
    font-weight: 800;
    margin: 0;
}


.product-footer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.product-footer-2 {
    width: 100%;
text-align: center;
}

.product-price {
    font-size: 16px;
    color: #000;
    font-weight: 700;
}

.product-arrow i {
    font-size: 18px;
    color: #000;
    transition: color 0.3s ease;
}

.product-arrow i:hover {
    color: #555;
}



@media (max-width: 480px) {
    .slider-headline {
        font-size: 24px;
        margin-bottom: 30px;
    }
    .product-box {
        width: 100%; /* 1 box per row */
    }
    .product-box {
        padding: 15px;
    }
    .product-category {
        font-size: 10px;
        padding: 4px 8px;
    }
    .product-type {
        font-size: 14px;
    }
    .product-name {
        font-size: 12px;
    }
    .product-price {
        font-size: 14px;
    }
    .product-arrow i {
        font-size: 16px;
    }
}

/* Tab container styling */
.tab-container {
    width: 90%;
    margin-bottom: 50px;
    max-width: 1200px;
    margin: 0 auto 50px auto;
}



.tab-titles {
    display: flex;
    gap: 20px;
    padding-bottom: 20px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
.tab-titles {

        width: 90%;
}
  }
.tab-title {
    cursor: pointer;
    transition: color 0.3s ease;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 0px;
    text-align: left;
    color: rgba(0,0,0,0.5);
}

.tab-title.active {
    color: black;
}

    .tab-content {
        display: none;
        width: 100%;
        overflow: hidden;
    }

    .tab-content.active {
        display: block;
        overflow: hidden;
    }

    .tab-container {
        overflow: hidden;
        width: 100%;
       
    }

    /* During initialization, both tabs are shown for proper slider sizing */
    .tabs-initializing .tab-content {
        display: block !important;
        position: absolute; 
        top: -9999px; 
        left: -9999px;
        visibility: hidden;
    }
    .tabs-initializing .tab-content.active {
        position: static; 
        top: auto;
        left: auto;
        visibility: visible;
    }

.slider-container {
    width: 90%;
    margin: 0 auto;
}

/* Container for the custom tabs */
.custom-tabs {
  width: 100%;
  margin: 0 0 20px 0;
}

/* Container for the custom tab buttons */
.custom-tab-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}

/* Styling for the custom tab buttons */
.custom-tab-title {
  padding: 10px 25px;
  border: none;
  border-radius: var(--radius-btn); /* Zaoblení tlačítek */
  background-color: #F0F0F0; /* Pozadí tlačítek - změň barvu dle potřeby */
  color: #B2B2B2; /* Barva textu tlačítek */
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  transition: background-color 0.3s ease;
}

/* Active button styling */
.custom-tab-title.active {
  background-color: #FEF4E6; /* Barva aktivního tlačítka - změň dle potřeby */
  color: var(--color-accent);
}

/* Styling for the custom tab content */
.custom-tab-content {
  display: none; /* Skrýt všechny taby ve výchozím stavu */
  color: #A5A5A5;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--font-meta);
  
  ;
}
.custom-tab-content strong, .custom-tab-content b {
    color: #000;    
}
/* Show the active tab */
.custom-tab-content.active {
  display: block; /* Zobrazit pouze aktivní tab */
}

/* Styling for the rating-produkt-tabs box */
.rating-produkt-tabs {
  width: 100%; /* Full width */
  padding: 30px 50px; /* Padding on all sides */
  margin-top: 50px;
  background-color: #F7F7F7; /* Light grey background */
  border-radius: var(--radius-card); /* Rounded corners */
  box-sizing: border-box; /* Include padding in width calculation */
}

.rating-stars i.fa-star,
.rating-stars i.fa-star-half-alt, .rating-stars-small i.fa-star,
.rating-stars-small i.fa-star-half-alt, .rating-stars-small-top i.fa-star,
.rating-stars-small-top i.fa-star-half-alt   {
  color: #F0B053;
}

.rating-stars-small-top {
  font-size: 16px;
  flex-basis: 50%;
  vertical-align: middle;
  margin-top: 10px;
  margin-bottom: 20px;

}
.model-bot {
	text-align: center;
}

.totalhodnoceni-top {
	
font-size: 16px;
font-weight: 700;
padding-right: 10px;
}

.totalcount-top {
	
font-size: 12px;
font-weight: 500;
padding-left: 10px;
}



.rating-stars {
  font-size: 24px;
  color: #ddd;
  flex-basis: 50%;
  vertical-align: middle;
}

.rating-stars i {
  cursor: pointer;
}

.rating-stars-small {
  font-size: 26px;
  flex-basis: 50%;
  vertical-align: middle;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #000000;
}

.rating-stars-small .rating-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.rating-stars-small .rating-right {
  display: flex;
  align-items: center;
}

.totalhodnoceni {
    
font-size: 26px;
font-weight: 800;
padding-right: 10px;
}

.totalcount {
margin-top: 5px;
margin-left: 0;
width: 100%;
font-size: 16px;
font-weight: 500;
}

.rating-bg 
{
    background-color: rgba(251, 176, 59, 0.15);
    border-radius: var(--radius-box);
    padding: 15px;
    margin-top: 20px;
}
.rating-flex {
    display: flex;
    margin-top: 20px;


}

.final-rating {
    font-size: 24px;
    font-weight: 800;
    text-align: center;
}

.rating-display {
    flex-basis: 50%;
    align-self: center;
    text-align: center;

}
.count-rating {
    font-size: 12px;
    font-weight: 500;
    text-align: center
}

.rating [type="radio"] {margin: 10px;}

.rating-button {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.6em;
    letter-spacing: 0px;
    border-radius: 10px 10px 10px 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 10px 10px 10px 10px;
    background-color: #23A455;
    color: #FFF;
    border: none;
    cursor: pointer;
}

.rating-button:hover {
      background-color: var(--color-accent);
      color: #FEF4E6;
}

.rating-button:focus, .rating-button:active {
      background-color: var(--color-accent);
      color: #FEF4E6;
}

@media (max-width: 768px) {
 .rating-stars {
  font-size: 16px;
}

.rating-flex {
    padding: 15px;
}

.rating-stars-small {
gap: 20px;
  text-align: center;
  flex-direction: column !important;
  align-items: center !important;
}

.rating-stars-small .rating-left {
  justify-content: center;
}

.rating-stars-small .rating-right {
  text-align: center;
}

.rating-bg {
    width: 100%;
}

}

.napsat-hodnoceni {
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
	margin-top: 0;
}

.page-title {
	font-size: 26px;
	font-weight: 800;
	text-align: center;
	width: 50%;
	margin: 0 auto;

}

.page-title-kontakt {
	font-size: 24px;
	font-weight: 800;
	text-align: center;
	margin-bottom: 10px;
}

.page-desc {
	font-size: 14px;
	color: #A5A5A5;
	font-weight: 700;
	margin: 12px auto;
	text-align: center;
}

.page-desc p {
	margin: 0;
}

.page-desc-kontakt {
	font-size: 14px;
	color: #000;
	width: 40%;
	margin: 0 auto;
	text-align: center;
}



@media only screen and (max-width: 1024px) and (min-width: 768px) {




}


@media only screen and (max-width: 767px) {

.page-title-kontakt {
	text-align: left;
}

.page-desc-kontakt {
	text-align: left;
	width: 100%;
}

}



#katalog-seznam-kategorii {
  padding: 20px;
}

.katalog-seznam-kategorii-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  margin-top: 40px;
  margin-bottom: 40px;
}

/* Každá unikátní položka */
.katalog-seznam-kategorii-item {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.katalog-seznam-kategorii-item-left {
  display: flex;
  justify-content: center; /* Centers the image horizontally */
  align-items: center; /* Centers the image vertically */
  width: 150px; /* Fixed width for consistent sizing */
  height: 150px; /* Adjust height as needed */
  position: relative; /* Allows absolute positioning for the badge */
  flex-shrink: 0; /* Prevents the column from shrinking */
}

/* Image styling to be smaller and centered */
.katalog-seznam-kategorii-item-left img {
  max-width: 100%; /* Keeps the image within the container */
  height: auto; /* Maintains aspect ratio */
  object-fit: cover;
}

/* Badge centered horizontally on the image */
.katalog-seznam-kategorii-badge {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #FEF4E6;
  color: var(--color-accent);
  padding: 5px 10px;
  font-size: 14px;
  border-radius: 10px;
  font-weight: 500;
  z-index: 1; /* Ensures badge stays on top of the image */
}

/* Pravá část s nadpisem a odkazy */
.katalog-seznam-kategorii-item-right {
  flex: 2;
}

/* Nadpis položky */
.katalog-seznam-kategorii-item-right h2 {
  font-size: 22px;
  margin: 0 0 10px 0;
  font-weight: 800;
}

div.katalog-seznam-kategorii-item-right > h2 > a
{	color: #000;
	text-decoration: none;
}

div.katalog-seznam-kategorii-item-right > h2 > a:hover
{	color: #000;
	text-decoration: underline;
}

/* Odkazy rozdělené vertikální čarou */
.katalog-seznam-kategorii-links {
  margin-bottom: 10px;
}

.katalog-seznam-kategorii-links a {
  text-decoration: none;
  font-size: 14px;
  color: #000;
  font-weight: 600;
}

/* Hlavní odkaz pod odkazy */
.katalog-seznam-kategorii-main-link {
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.katalog-seznam-kategorii-links a:hover {
  text-decoration: underline;
  color: var(--color-accent);
  font-weight: 600;
}

/* Hlavní odkaz pod odkazy */
.katalog-seznam-kategorii-main-link:hover {
  color: var(--color-accent);
  text-decoration: none!important;
}

/* Styl pro druhý řádek s 2 položkami */
.katalog-seznam-kategorii-grid-container > .katalog-seznam-kategorii-item:nth-child(4),
.katalog-seznam-kategorii-grid-container > .katalog-seznam-kategorii-item:nth-child(5) {
  grid-column: span 1 / span 2;
}

.katalog-form-box {
  padding: 25px;
  position: relative; /* Allows positioning for overflow */
  background-color: #FEF4E6; /* Adds yellow background to the whole container */
  overflow: visible; /* Allows child elements to overflow */
  border-radius: var(--radius-card);
  margin-top: 100px;
  margin-bottom: 100px;
}

.katalog-form-container {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* Left column two-thirds, right one-third */
  gap: 20px;
  align-items: start; /* Align items to the top */
}

/* Left column with text */
.katalog-form-left {
  padding: 10px;
}

/* Right column with image */
.katalog-form-right {
  position: relative; /* Allows absolute positioning for the image and badge */
  display: flex;
  justify-content: flex-end; /* Align the image container to the right */
  overflow: visible; /* Allows overflow beyond the container */
}

/* Container for the image */
.katalog-image-container {
  position: absolute; /* Absolute positioning to allow overflow */
  top: -50px; /* Adjust to make the image overflow above the main container */
  left: 30px; /* Adjust right overflow */
  width: 80%; /* Image container takes only half of its column */
  overflow: visible; /* Ensures the image and badge can overflow */
}

/* Image styling */
.katalog-image-container img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 5px; /* Optional: Adds rounded corners */
}

/* Badge positioned at the bottom-right, overflowing the image */
.katalog-badge {
  position: absolute;
  bottom: -30px; /* Overflows below the image */
  right: -50px; /* Overflows to the right */
  background-color: #FFF;
  color: #000;
  padding: 15px 25px;
  border-radius: var(--radius-card);
  font-size: 14px;
  z-index: 1; /* Ensures the badge is on top */
}

.katalog-form-box h3 {
	font-size: 24px;
	font-weight: 800;
	margin-top: 0px;
}

.katalog-grid-vypis-section {

margin: 0 auto;
width: 90%;
max-width: 1200px;
}

.katalog-grid-vypis-title {
    margin-bottom: 10px;
    font-size: 16px;
}

.gap50 {
	gap: 50px;
}

.modely-grid-vypis-container {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 35px;

}

.katalog-grid-vypis-item {
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card); 
    padding: 15px 30px;
    text-align: left;
    display: flex;
    flex-direction: column; 
    justify-content: space-between; 
    height: 100%; 
}

.modely-grid-vypis-item {
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card); 
    padding: 15px 30px;
    text-align: left;
    display: flex;
    flex-direction: column; 
    justify-content: space-between; 
    height: 100%; 
}

.modely-grid-vypis-item-model {
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card); 
    padding: 15px 30px;
    text-align: left;
    display: flex;
    flex-direction: column; 
    height: 100%; 
}



.katalog-grid-vypis-image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    height: auto;
    aspect-ratio: 214 / 244; /* §4 C1: rezervace místa (= změřený poměr buňky) → lazy bez CLS pop-inu; mobil 1/1 override @9714 zůstává */
    overflow: hidden;
}

.modely-grid-vypis-image-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden; /* Hide any overflow to maintain the design */
}

.katalog-grid-vypis-image {
    width: 100%;
    height: 100%; /* Makes the image fill the entire container */
    object-fit: contain; /* Ensures the image covers the area while maintaining aspect ratio */
    border-radius: var(--radius-img) var(--radius-img) 0 0; /* Keeps the top corners rounded */
}

.modely-grid-vypis-image {
    width: 100%;
    height: 100%; /* Makes the image fill the entire container */
    object-fit: contain; /* Ensures the image covers the area while maintaining aspect ratio */
    border-radius: var(--radius-img) var(--radius-img) 0 0; /* Keeps the top corners rounded */
}


/* Category badge inside the image */
.katalog-grid-vypis-badge {
    position: absolute;
    bottom: 10px;
    left: 0px;
    background-color: #FEF4E6;
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 5px;
}

.katalog-grid-vypis-item-title {
    font-weight: 800;
    margin: 20px 0 10px 0;
    color: #000;
    text-decoration: none;
    font-size: 16px;
    line-height: var(--lh-heading);
    text-align: center;
}

.modely-grid-vypis-item-title {
    font-size: 16px;
    font-weight: 800;
    margin: 20px 0 10px 0;
    line-height: var(--lh-heading);
}



.katalog-grid-vypis-attributes {
	text-align: center;
	display: flex;
	flex-direction: column;
	column-gap: 10px;
    margin-bottom: 0px;
}

.modely-grid-vypis-attributes {
	text-align: center;
	display: flex;
	flex-direction: column;
	column-gap: 10px;
    margin-bottom: 0;
}


.katalog-grid-vypis-attribute-one {
    font-size: 12px;
    color: #000;
    font-weight: 400;
    font-family: var(--font-meta);
    display: block;
    line-height: 1.3;
}

.modely-grid-vypis-attribute-one {
        font-size: 12px;
    font-weight: 700;
    color: #000;
    font-family: var(--font-meta);
}


.katalog-grid-vypis-attribute {
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-meta);
    color: #000;
}

.katalog-grid-vypis-attribute-velikost {
    font-size: 10px;
    font-weight: 400;
    font-family: var(--font-meta);
    color: #898989;
    margin-top: 20px;
}

.katalog-grid-vypis-link {
    font-size: 7px;
    font-weight: 700;
    text-align: center;
    display: block;
    color: #000;
    margin-top: 10px;
    margin-bottom: 10px;
    text-decoration: none;
}

.footer-bottom-left p {
	color: rgba(0, 0, 0, 0.35);
	font-size: 14px;
	font-weight: 800;
}

.katalog-grid-vypis-link:hover {
    color: var(--color-accent);
}

.katalog-grid-vypis-link-main {
    color: #000;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.katalog-grid-vypis-link-main:hover {
    color: var(--color-accent);
}

.katalog-grid-vypis-link-main-model {
    color: #000;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
}

.katalog-grid-vypis-link-main-model:hover {
    color: var(--color-accent);
}

.modely-cena {
	color: var(--color-price);
}


.modely-cena-last {
	color: var(--color-price);
}

.modely-grid-vypis-link-main {
    color: #000;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
}

.modely-grid-vypis-link-main:hover {
    color: var(--color-accent);
}


.katalog-grid-vypis-pagination {
    display: flex;
    justify-content: center; /* Centers the pagination horizontally */
    gap: 10px; /* Optional: Adds space between pagination items */
    margin-bottom: 70px;
    margin-top: 40px;
        align-items: center;
}

.katalog-grid-vypis-pagination a, 
.katalog-grid-vypis-pagination .page-numbers {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-decoration: none;
    margin: 0 5px;
    font-size: 16px;
    font-weight: 800;
    color: #000;
}

.katalog-grid-vypis-pagination .page-numbers {
    border: 1px solid #00000029;
    background-color: white;
    padding: 20px;
}

.katalog-grid-vypis-pagination .current {
    background-color: #FEF4E6;
    border: 1px solid transparent; /* Removes border from the active page */
}

.katalog-grid-vypis-pagination .prev, 
.katalog-grid-vypis-pagination .next {
    border: none;
    background: none;
    display: inline-flex;
    font-size: 14px;
    align-items: center;
}

.katalog-grid-vypis-pagination .dots {
    display: inline-block;
    border: none;
    background: none;
    width: auto; /* Removes the circle effect */
    height: auto; /* Removes the circle effect */
    padding: 0;
}

/* §2 CC-09 REVERT 2026-07-07: desktop base grid pravidlo omylem smazané v 039bc00.
   Bez něj desktop (>1024px) neměl žádné grid-template-columns (přeživší 2-col/1-col
   pravidla jsou uvnitř media queries) → grid padal na 1 položku na řádek.
   Tablet (@1024 repeat 2) i mobil (@768 repeat 1) ho korektně přebijí (pozdější v pořadí). */
.katalog-grid-vypis-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;
}

/* Responsive styles */
@media (max-width: 768px) {
    .katalog-grid-vypis-container {
        grid-template-columns: repeat(1, 1fr);
    }



}

.katalog-grid-vypis-title {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
}

.katalog-two-top-section {
    margin-bottom: 20px;
}

.katalog-two-top-container {
    display: flex;
    gap: 50px;
}

.modely-two-top-container {
    display: flex;
    gap: 50px;
}

.modely-two-top-container-model {
    display: flex;
    gap: 50px;
    margin-bottom: 50px;
    margin-top: 50px;
}


.katalog-two-top-left {
  flex: 1; /* 1/3 of the container */
    display: flex;
    align-items: center;
    justify-content: center;
}
.model-two-top-left {
  flex: 1 1 30%; /* 1/3 of the container */
    display: flex;
    align-items: center;
    justify-content: center;
}

.model-two-top-left-three {
  flex: 1 1 15%; /* 1/3 of the container */
    display: flex;
}

.model-odsazeni {
	padding-left: 30px;
}

.katalog-two-top-image {
    width: 100%;
    display: block;
    height: 500px; /* Ensures the image does not exceed 500px in height */
    object-fit: contain; /* Keeps the entire image visible within its container */
}

.model-two-top-image {
    width: 100%;
    display: block;
    object-fit: contain; /* Keeps the entire image visible within its container */
}

.model-two-top-image-model {
    width: 75%;
    display: block;
    object-fit: contain; /* Keeps the entire image visible within its container */
}

:root{
  --otrock-badge-size: 42px;      /* průměr kolečka */
  --otrock-text: #111;            /* barva textu */

  /* === Profiecu design tokeny === */

  /* Barvy — primární akce a akcenty */
  --color-cta-primary: #187a3b;         /* primární zelená CTA (WCAG AA ~7.2:1 na bílém) */
  --color-price:       #1f9a4b;         /* zelená orientačních cen */
  --color-accent:      #F7A223;         /* amber/oranžová — ikony, hover, badge */
  --color-label-muted: rgba(0,0,0,.35); /* ztlumený popisek / ghost label */

  /* Border-radius — tvarosloví */
  --radius-card:  20px; /* produktové karty, sekce — dominantní 101× */
  --radius-btn:   20px; /* CTA tlačítka */
  --radius-input: 20px; /* formulářové vstupy */
  --radius-faq:   12px; /* FAQ accordion položka */
  --radius-box:   15px; /* info boxy */
  --radius-img:    8px; /* obrázky v kartách */

  /* Stíny */
  --shadow-card: 0 4px 30px rgba(0, 0, 0, 0.2); /* stín produktové karty v mřížce */
  --shadow-box:  0 8px 16px rgba(0, 0, 0, 0.2); /* stín info boxu na detailech */

  /* Fonty */
  --font-display: 'Nunito', sans-serif;     /* displejový font — tělo, nadpisy, CTA */
  --font-meta:    'Montserrat', sans-serif; /* meta font — atributy, ceny, breadcrumb-small */

  /* Typografie */
  --lh-heading: 1.5; /* norma výšky řádku pro nadpisy */

  /* Spacing */
  --spacing-section-vertical: 75px; /* vertikální rytmus sekcí */
}

.otrock-step{         /* číslo + text vedle sebe */          /* vertikální zarovnání */
  gap:15px;                       /* mezera mezi kolečkem a textem */
  color:var(--otrock-text);
  font-size: 18px;
  font-weight: 800;
}

/* Kolečko s číslem */
.otrock-step__badge{ /* white text on green — darkened #1F9A4B→#187a3b for WCAG AA (K-03) */
  width:var(--otrock-badge-size);
  height:var(--otrock-badge-size);
  border-radius:50%;              /* dělá z toho kruh */
  background: var(--color-cta-primary);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:calc(var(--otrock-badge-size) * 0.45); /* škáluje číslo s velikostí kolečka */
}

.modely-aut-subtitle-main {
	margin-top: 0;
}

.modely-aut-subtitle-main-model {
	margin-top: 0;
}



/* Pro zařízení mezi 1024px a 768px (tablety na šířku i výšku) */
@media only screen and (max-width: 1024px) and (min-width: 768px) {
    /* Vaše CSS kód zde */
}

/* Pro zařízení 768px a méně (mobilní zařízení a menší tablety) */
@media only screen and (max-width: 768px) {
    .katalog-two-top-image {

    height: auto; /* Ensures the image does not exceed 500px in height */

}
}


.katalog-two-top-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
     align-items: flex-start; /* Align content to the start */
}

.model-two-top-right {
  flex: 1 1 55%; /* 1/3 of the container */
    display: flex;
    flex-direction: column;
     align-items: flex-start; /* Align content to the start */
}

.model-two-top-right-model {
  flex: 1 1 55%; /* 1/3 of the container */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Align content to the start */
}
/* 
.katalog-two-top-right-inner {
    width: 75%; Restrict the inner content to 50% width of the second column 
}
*/
.katalog-two-top-badge-wrapper {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 15px;
}

.katalog-two-top-badge {
    display: inline-block;
    background-color: #FEF4E6;
    color: var(--color-accent);
    font-size: 14px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: var(--radius-card);
    white-space: nowrap;
}

.katalog-two-top-title {
    font-size: 25px;
    margin: 0 0 10px;
}

.katalog-two-top-text {
    font-size: 16px;
    margin-bottom: 10px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .katalog-two-top-container {
        flex-direction: column-reverse;
    }

        .modely-two-top-container {
        flex-direction: column;
    }

            .modely-two-top-container-model {
        flex-direction: column;
    }

    .katalog-two-top-left, 
    .katalog-two-top-right {
        flex: 1;
        max-width: 100%;
    }

    .katalog-two-top-right-inner {
        width: 100%; /* Expand to full width on smaller screens */
        text-align: center;
    }

    .katalog-two-top-title {
    	font-size: 20px;
    }

    .katalog-two-top-right-inner p {
    	font-size: 14px;
    }
}

.contact-icon-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Makes all columns the same height */
    gap: 20px;
    padding-top: 35px;
    padding-bottom: 35px;
    margin: 0 auto;
}

.contact-icon-row-column {
    display: flex;
    align-items: flex-start; /* Aligns the content to the top of each column */
    gap: 10px;
    flex: 1; /* Ensures each column takes up equal width */
    max-width: 33.33%; /* Limits each column to a third of the section */
}





.contact-icon-row-headline h2 {
    font-size: 24px;
    margin: 0;
    text-align: left;
    font-weight: 800;
    color: #F0B053;
}

.contact-icon-row-phone {
    display: flex;
    gap: 10px;
    justify-content: center;

}

.contact-icon-row-phone-icon {
    font-size: 30px;
    color: #B2B2B2;
}

.contact-icon-row-phone-text {
    display: flex;
    flex-direction: column;
}

.contact-icon-row-phone-main, .contact-icon-row-email-text {
    font-size: 24px;
    font-weight: 800;
}

.contact-icon-row-phone-sub {
    font-size: 14px;
    color: #B2B2B2;
    margin-top: 10px;
}

.contact-icon-row-email {
    display: flex;
    gap: 10px;
    justify-content: end;
}

.contact-icon-row-email-icon {
    font-size: 30px;
    color: #B2B2B2;
}


.contact-form-section {
    background-color: #FEF4E6;
    padding: 30px;
    border-radius: var(--radius-card);
    display: flex;
    justify-content: center;
    width: 66%;
    margin: 0 auto;
}

.contact-form-container {
    text-align: center;
}

.contact-form-title {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 800;
    margin-top: 0px;
}

.contact-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;

}

.contact-form-group {
    flex: 1 1 calc(33.33% - 10px);
    display: flex;
    flex-direction: column;
    position: relative;
}

.contact-form-label {
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 14px;
    color: #aaa;
    pointer-events: none;
    transition: all 0.2s ease;
}

.page-template-page-katalog .page-title {margin-bottom:  25px;}

.page-template-page-katalog  .homepage-categories-grid-section {
	padding-top: 0;
}

.contact-form-input, .contact-form-group input[type="text"], .contact-form-group input[type="email"], 
.contact-form-textarea {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 30px;
    padding-bottom: 10px;
    border: none;
    border-radius: var(--radius-input);
    font-size: 14px;
    font-weight: 800;
    color: #000;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    width: 100%;
}

.contact-form-input:focus,
.contact-form-input:not(:placeholder-shown),
.contact-form-textarea:focus,
.contact-form-textarea:not(:placeholder-shown) {
    border-color: #333;
}

.contact-form-input:focus + .contact-form-label,
.contact-form-input:not(:placeholder-shown) + .contact-form-label,
.contact-form-textarea:focus + .contact-form-label,
.contact-form-textarea:not(:placeholder-shown) + .contact-form-label {
    top: 10px;
    left: 20px;
    font-size: 14px;
    color: #000;
    font-weight: 800;
}

.contact-form-input::placeholder, .contact-form-textarea::placeholder {
    color: #000; /* Changes the placeholder text color to red */
}

.contact-form-message .contact-form-textarea {
    height: 300px;
    border-radius: var(--radius-input);
    resize: none;
}

.flex100 {
	flex-basis: 100%;
}

.contact-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Aligns checkbox and button to the right */
    gap: 10px;
    width: 100%; /* Ensures it takes the full width under the textarea */
    margin-top: 0px; /* Adds spacing above the actions container */
}


.contact-form-checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto; /* Pushes the checkbox group to the right */
}


.contact-form-checkbox {
    accent-color: #F0B053;
    border: 2px solid #F0B053; /* Adds a red border */
    width: 18px;
    height: 18px;
    border-radius: 5px;
}

.contact-form-checkbox-label {
    font-size: 14px;
    color: #000;
    padding-right: 50px;
}

.contact-form-submit {
    background-color: var(--color-cta-primary);
    color: #fff;
    padding: 20px 30px;
    border: none;
    border-radius: var(--radius-btn);
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Ensures text is on the left and icon is on the right */
    gap: 5px;
    width: 200px; /* Makes the button wider; adjust width as needed */
    height: 50px;
    text-align: left; /* Aligns the text to the start */
}

.contact-form-submit-icon {
    margin-left: auto; /* Pushes the icon to the end of the button */
    font-size: 18px;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {

.contact-form-section {
	width: 100%;
}

}


@media only screen and (max-width: 767px) {

.contact-icon-row {

    flex-direction: column;

}

.contact-icon-row-column {
    max-width: 100%; /* Limits each column to a third of the section */
}
.contact-icon-row-phone, .contact-icon-row-email  {
	justify-content: left;
	align-items: center;
	gap: 15px;
}

.contact-form-section {
    background-color: #FEF4E6;
    border-radius: var(--radius-card);
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    padding: 15px;
}

.contact-form {
	flex-direction: column;

}

.contact-form-actions {
	flex-direction: column;
	align-items: start;
}

.contact-form-submit {
	width: 100%;
}

.contact-form-checkbox-label {
	padding-right: 0px;
}
}


.info-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 50px;
}

/* Pro zařízení mezi 1024px a 768px (tablety na šířku i výšku) */
@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .info-section {
    padding: 0;

}
}

/* Pro zařízení 768px a méně (mobilní zařízení a menší tablety) */
@media only screen and (max-width: 768px) {
   .info-section {

    padding: 0;

}


}


.info-section-top-text {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically centers the icon and text */
    justify-content: center; /* Horizontally centers the icon and text */
    font-size: 14px;
    color: #F8B44D;
    font-weight: bold;
    gap: 10px; /* Adds space between the icon and text */
}

.info-section-content {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the content horizontally */
    gap: 10px; /* Decrease the gap between the image and text */
    text-align: center; /* Center-align the text */
    margin-top: 50px;

}

.info-section-image-container {
    position: relative;
    margin-right: 50px;
    width: 200px; /* Match image width */
    height: 200px; /* Match image height */
    background-image: url('images/elipse.png'); /* Path to the background image in your theme folder */
    background-size: contain; /* Ensures the background image fits within the container */
    background-repeat: no-repeat; /* Prevents the background image from repeating */
    background-position: center; /* Centers the background image within the container */
    display: flex;
    justify-content: center;
    align-items: center; /* Centers the image within the background */
}



/* Pro zařízení 768px a méně (mobilní zařízení a menší tablety) */
@media only screen and (max-width: 768px) {
        .info-section-image-container {
    margin-right: 10px;
    width: 150px; /* Match image width */
    height: 150px; /* Match image height */
}
}


.info-section-image {
    width: 100%;
    height: auto;
    position: relative; /* Keeps the image on top of the background */
    z-index: 1; /* Ensures the image stays above the background */
    margin-right: -50px;
}
.info-section-text {
    display: flex;
    flex-direction: column;
    gap: 3px; /* Reduce the gap between text elements */
    text-align: left;
    font-size: 14px;
}

.info-section-text h3 {
    margin: 0;
    font-size: 16px; /* Smaller heading size */
    color: #999;
    font-weight: normal;
}

.info-section-text .firma {
    font-size: 22px; /* Smaller heading size */
    color: #000;
    font-weight: 800;
}


.info-section-text p {
	margin-bottom: 5px;
	margin-top: 0;
    font-size: 14px; /* Smaller paragraph text */
    color: #000;
}


.info-section-bottom-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    margin-top: 50px;
}

.info-section-bottom-text a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: inherit;
}

.info-section-bottom-text i {
    font-size: 18px;
}

.invoice-icon {
	height: 35px;
	margin-right: 15px;
}

.slider-grid-vypis-attributes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    margin-top: 10px;
}

.slider-grid-vypis-attribute-one {
    font-size: 14px;
    color: #BDBDBD;
}

.slider-grid-vypis-attribute {
    font-size: 14px;
}

/* Grid container styling */
.modely-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Four items per row */
    gap: 25px; /* Space between grid items */
    margin: 20px 0;
}

/* Individual grid item styling */
.grid-item {
    display: flex;
    border: none;
    padding: 10px;
}

/* Left column for featured image */
.item-left {
    flex: 1;
    padding-right: 10px;
}

/* Right column for brand details */
.item-right {
    flex: 1;
}

/* Additional styling for images and text */
.item-right img {
    max-width: 100%;
    height: 75px;
    display: block;
    margin-bottom: 10px;
}

.term-name {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 5px;
}

.product-info {
    font-size: 14px;
}

.product-title {
    font-weight: 800;
    font-size: 20px;
    margin-bottom: 5px;
}

.product-price {
	font-size: 12px;
    margin-bottom: 5px;
}

.product-sku {
    font-size: 12px;
}

.page-id-98491 .entry-header {
display: none;
}


/* Main grid item container */
.modely-aut-grid-item {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
           background: #fff;
        border-radius: var(--radius-card);
        box-shadow: var(--shadow-card);
        padding: 12px 15px;
}
/* Main link styling */
.modely-aut-main-link {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
}

/* Brand image as watermark */
.modely-aut-brand-image {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;
}

.modely-aut-brand-image img {
    height: 60px;
    width: 100%;
}


/* Main image wrapper */
.modely-aut-main-image-wrapper {
    position: relative;
}

/* Main image styling */
.modely-aut-main-image {
    width: 100%;
    display: block;
    border-radius: var(--radius-card);
}



/* Category badge inside the image */
.modely-aut-badge {
    position: absolute;
    bottom: 10px;
    left: 0px;
    background-color: #FEF4E6;
    color: var(--color-accent);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 5px;
}

/* Title link styling */
.modely-aut-title-link {
    text-decoration: none;
    color: #000;
}

.modely-aut-title-link:hover, .modely-aut-title-link:hover .podtrzeno {
    color: var(--color-accent);
}

/* Title styling under the main image */
.modely-aut-title {
    margin-bottom: 5px;
    font-size: 16px;
    margin-top: 10px;
    font-weight: 800;
}

.modely-aut-title-last {
    margin-bottom: 5px;
    font-size: 14px;
    margin-top: 10px;
    font-weight: 800;
    text-align: center;
}

.modely-aut-title-main {
	font-size: 28px;
	text-align: center;
	margin-bottom: 50px;

}

.modely-aut-title-variant {
    margin-bottom: 15px;
    font-size: 10px;
    color: #A5A5A5;
    text-align: center;
        width: 60%;
    margin: 0 auto;
}


/* Variant styling */
.modely-aut-variant {
    font-size: 10px;
    color: #666;
    text-align: center;
    margin-bottom: 10px;
}

/* Bottom information container styling */
.modely-aut-bottom-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-bottom: 10px;
}


/* Responsive styles */
@media (max-width: 768px) {

    .modely-grid-vypis-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .modely-aut-title-main {
    	font-size: 18px;
    	padding: 0 10px;
    	margin-top: 25px;
    	margin-bottom: 0;
    }

    .otrock-step {
    	font-size: 14px;
    }

    .model-two-top-left-three.mobil {
    	display: flex;
    }

    .modely-aut-subtitle-main {
    	padding: 0 10px;
    	font-size: 16px;
    }

        .modely-aut-subtitle-main-model {
    	padding: 0;
    	font-size: 18px;
    	   text-align: center;
    	   margin-top: 25px;
    }



     .model-odsazeni {
     		padding: 0 10px;
     }

     .mobilpad {
     		padding: 0 10px;
     }

     .mobcen {
     		text-align: center;
     }



}


.katalog-grid-vypis-count {
font-size: 16px;
    font-weight: 800;

}
/* Bottom left text */
.modely-aut-bottom-text {
    font-size: 12px;
    color: #000;
}

/* Bottom price link */
.modely-aut-bottom-link {
    text-decoration: none;
    color: #000;
}

.modely-aut-bottom-link:hover,.modely-aut-bottom-link:hover i, .modely-aut-bottom-link-category:hover {
    color: var(--color-accent);
}


.modely-aut-bottom-link-category {
    text-decoration: underline;
    color: #A5A5A5;
    font-weight: 600;
    font-size: 10px;
    text-align: center;
}

/* Bottom price styling */
.modely-aut-bottom-price {
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

/* Arrow styling */
.modely-aut-arrow {
    margin-left: 5px;
    font-size: 14px;
    color: #666;
}

/* SKU styling */
.modely-aut-sku {
    font-size: 10px;
    color: #A5A5A5;
    text-align: center;
    margin-top: 10px;
}

.modely-aut-sku-value {
    font-size: 10px;
    color: #A5A5A5;
    text-align: center;
    font-weight: 800;
    margin-bottom: 5px;
}

.modely-aut-product-arrow i {
    font-size: 16px;
    color: #000;
    margin-left: 10px;
}

.modely-aut-product-arrow i:hover {
 color: var(--color-accent);
}

.cerne {
	color: #000;
}

.homepage-postup-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Dynamic grid */
    background-color: #FEF4E6;
    border-radius: var(--radius-card);
    padding: 35px;
    align-items: center; /* Vertical alignment */
    margin: 50px 0;
}

.homepage-postup-column {
    display: flex;
}

.homepage-postup-text {
    justify-content: flex-start; /* Align text to the left */
    flex-direction: column; /* Stack title and description */
}

.homepage-postup-text h2 {
    font-size: 22px;
    font-weight: 800;
    color: #000;
    margin: 0;
        margin-bottom: 15px;
}


.homepage-postup-text p {
    font-size: 16px;
    color: #F8B44D;
    margin-top: 5px;
    font-weight: 700;
}

.homepage-postup-icon-text {
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
}

/* Pro zařízení mezi 1024px a 768px (tablety na šířku i výšku) */
@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .homepage-postup-icon-text {

    justify-content: left; /* Center content horizontally */
    margin-bottom: 25px;

}

.homepage-postup-container {
    display: grid;
   grid-template-columns: 1fr; /* Custom grid ratios */
}

}

/* Pro zařízení 768px a méně (mobilní zařízení a menší tablety) */
@media only screen and (max-width: 768px) {
    .homepage-postup-icon-text {

    justify-content: left; /* Center content horizontally */
    margin-bottom: 25px;

}

    .homepage-postup-container .homepage-postup-icon-text:last-child {
        margin-bottom: 0;
    }

.homepage-postup-container {

    padding: 20px 30px;
    margin-top: 0;
    grid-template-columns: 1fr;


}

    body.page-template-page-konfigurator .homepage-postup-container {
        margin-top: 30px;
    }

}

body.page-template-page-konfigurator .breadcrumbs {
    margin-bottom: 40px;
}

/* === Mobile typography unification (Kontakt/O nás/Konfigurace) === */

/* O nás — H2 "Originální jednotky..." had no specific class, was falling into generic h2 (multiple definitions). Explicitly bind to katalog-two-top-right h2. */
.katalog-two-top-right h2 {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 12px;
}

@media only screen and (max-width: 768px) {
    /* Kontakt — phone/email number too big on mobile */
    .contact-icon-row-phone-main,
    .contact-icon-row-email-text {
        font-size: 20px;
    }

    /* Kontakt — H2 "Zavolejte nebo napište nám" too big on mobile */
    .contact-icon-row-headline h2 {
        font-size: 20px;
    }

    /* O nás — H2 subtitle */
    .katalog-two-top-right h2 {
        font-size: 18px;
    }

    /* page-id 11 — vyhody-section without top spacing on mobile */
    body.page-id-11 .vyhody-section {
        margin-top: 0;
    }

    /* page-id 20 — jak-zacit-steps-button without top spacing on mobile */
    body.page-id-20 .jak-zacit-steps-button {
        margin-top: 0;
    }

    /* page-id 20 — full width hero image on mobile */
    body.page-id-20 .jak-zacit-blob-container .homepage-top-image-mobil {
        width: 100%;
    }
}


.homepage-postup-icon {
    width: 64px; /* Set width for the icon */
    height: 64px; /* Set height for the icon */
    background-color: #fff; /* White background for the icon */
    border-radius: 50%; /* Make the background a circle */
    display: flex;
    justify-content: center;
    align-items: center; /* Center the image inside the circle */
    margin-right: 20px; /* Space between icon and text */
}

.homepage-postup-icon img {
    width: 32px; /* Image width */
    height: 32px; /* Image height */
}

.homepage-postup-title a {
    color: #000;
    font-size: 22px;
    font-weight: 800;
    text-align: left;
    text-decoration: none;
}

.homepage-postup-title a:hover {
    color: #F8B44D;
}

.homepage-postup-icon-text:hover .homepage-postup-title {
    color: #F8B44D;
}

/* Base styles for the search section */
.homepage-search-section {
    background-color: #fdf4e8;
    padding: 0;
        overflow: visible; /* Allow overflow */
    position: relative; /* Establish stacking context for z-index */
    margin-bottom: 50px;
}

.homepage-search-container {
    display: flex; /* Flexbox for two-column layout */
    align-items: center;
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    gap: 25px; /* Space between columns */
    padding: 0 20px;
}

.homepage-search-column {
    flex: 2; /* Each column takes equal space */
    position: relative; /* Needed for absolute positioning in the image column */
}

/* Image column styling */
.homepage-search-image {
    display: flex; /* Flex to control image position */
    align-items: flex-end; /* Align image to bottom */
    justify-content: center; /* Center horizontally */
    flex: 1;
    position: relative; /* Ensure positioning for z-index to work */
}

.homepage-search-image img {
    width: 100%; /* otrock: Zajišťuje, že obrázek bude responsivní */
    position: relative; /* otrock: Umožňuje posunout obrázek pomocí vlastnosti top */
    z-index: 2; /* otrock: Zajišťuje, že obrázek bude nad ostatním obsahem */
    top: -30px; /* otrock: Posune obrázek nahoru o 50px, čímž "vystoupí" mimo okraj sekce */
    left: -100px;
}
/* Content column styling */
.homepage-search-content h2 {
	font-family: var(--font-display);
    font-size: 22px;
    font-weight: bold;
    color: #000;
    margin-bottom: 20px;
    margin-top: 0;
}

/* Styles for the search field container */
.homepage-search-field {
    position: relative; /* Relative for label positioning */
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 40px;
    padding: 5px 15px;
    max-width: 600px;
}

/* Input field styling */
.homepage-search-field input[type="text"] {
    border: none;
    outline: none;
    flex: 1;
    padding: 30px 20px 10px; /* Adjusted padding for label overlay */
    font-size: 16px;
    color: #000;
    border-radius: 40px;
    font-family: inherit;
    width: 100%;
}

/* Label styling for input field */
.contact-form-label {
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 12px;
    color: #00000059;
    pointer-events: none; /* Prevent label from blocking input */
}

/* Button styling with Font Awesome icon */
.homepage-search-field button {
    background-color: var(--color-cta-primary);
    border: none;
    color: #FFF;
    padding: 20px 20px;
    font-size: 12px;
    border-radius: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 100px; /* Space between text and icon */
}

.homepage-search-field button:hover {
    background-color: #f7941d;
}

.homepage-search-field input::placeholder {
    color: #000; /* Placeholder text color */
    font-size: 14px;
    font-weight: 800;
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .homepage-search-container {
        flex-direction: column; /* Stack columns on smaller screens */
    }

    .homepage-search-image img {
        margin-bottom: 0; /* Remove overflow effect on smaller screens */
    }

.homepage-search-image {
    /* display: flex
; */
    /* align-items: flex-end; */
    justify-content: center;
    /* flex: 1; */
    position: absolute;
    top: -50px;
    right: 5%;
    width: 150px;
}

    .homepage-search-image img {
        position: static;
    }


}


.homepage-categories-grid-section {
  text-align: center;
  padding: 40px 0;
}

.homepage-categories-grid-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 50px;
    color: #000;
}


.homepage-categories-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  justify-items: center;
  margin: 50px auto;
}

.page-template-page-co-nabizime .homepage-categories-grid {

  grid-template-columns: repeat(3, 1fr);
      gap: 60px 20px;

}


@media only screen and (max-width: 1024px) and (min-width: 768px) {

.homepage-categories-grid {
  grid-template-columns: repeat(3, 1fr);

}

}


@media only screen and (max-width: 767px) {

.homepage-categories-grid {
  grid-template-columns: repeat(2, 1fr);

}


}




.homepage-categories-grid-item {
  position: relative;
  text-align: center;
  padding: 0;
}

.homepage-categories-grid-badge {
  position: absolute;
  top: -10px;
  left: 35px;
  background-color: #FEF4E6;
  color: var(--color-accent);
  padding: 5px 10px;
  border-radius: var(--radius-card);
  font-size: 12px;
  font-weight: 600;
  z-index: 1;
}

.homepage-categories-grid-image {
  width: 100%;
  aspect-ratio: 1 / 1; /* §4 C1: rezervace (zdroj 1024² čtverec, renderuje se 1:1) → lazy bez CLS */
  border-radius: var(--radius-card);
  display: block;
  border: 1px solid #EFEFEF; /* Border around the image only */
}

.homepage-categories-grid-link {
  margin-top: 10px;
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #000;
  text-decoration: none;
}

.homepage-categories-grid-link:hover {

  color: var(--color-accent);
}

.homepage-categories-grid-show-more {
  margin-top: 20px;
  display: inline-block;
  font-size: 14px;
  color: #000;
  text-decoration: none;
  padding-bottom: 5px;
}


.homepage-blog-section {
    background-color: #FEF4E6; /* Adjust this to your section background color */
    text-align: center;
    padding: 50px 0;
    
}

.homepage-blog-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 90%;
    margin: 0 auto;
    padding-bottom: 50px;
    max-width: 1200px;

}


@media only screen and (max-width: 1024px) and (min-width: 768px) {

.homepage-blog-container {

    grid-template-columns: repeat(2, 1fr);


}

}


@media only screen and (max-width: 767px) {

.homepage-blog-container {

    grid-template-columns: repeat(1, 1fr);


}


}




.homepage-blog-item {
    background-color: #ffffff;
    border-radius: var(--radius-card);
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    flex-direction: column; /* Ensure children stack vertically */
    justify-content: space-between; /* Space out children to push the link to the bottom */
    height: 100%; /* Make items take full height */
}

.homepage-blog-image {
    position: relative;
}

.homepage-blog-image img {
    width: 100%;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.homepage-blog-badge {
    position: absolute;
    bottom: 10px;
    left: 0;
    background-color: #FEF4E6; /* Adjust this to your badge background color */
    color: var(--color-accent);
    padding: 5px 10px;
    border-radius: var(--radius-card);
    font-size: 12px;
    font-weight: 600;
}

.homepage-blog-title {
    font-size: 16px;
    font-weight: 800;
    text-align: left;
}

.homepage-blog-meta {
	color: #00000059;
    display: flex;
    align-items: center;
    margin: 10px 0;
    text-align: left;
}

.homepage-blog-date {
    font-size: 12px;
    color: #00000059;
}

.homepage-blog-divider {
    display: inline-block;
    width: 40px;
    height: 2px;
    background-color: var(--color-accent);
    margin-left: 10px;
}

.homepage-blog-excerpt {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 15px;
    text-align: left;
}

.homepage-blog-readmore {
    margin-top: auto; /* Push the link to the bottom */

}

.archive-blog-section {
    background-color: #fff;
    text-align: center;
    padding: 50px 0;
}

.archive-blog-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 90%;
    margin: 0 auto;
    padding-bottom: 50px;
    padding-top: 50px;
    max-width: 1200px;
}


@media only screen and (max-width: 1024px) and (min-width: 768px) {

.archive-blog-container {

    grid-template-columns: 1fr 1fr;
}

}


@media only screen and (max-width: 768px) {

.archive-blog-container {

    grid-template-columns: 1fr;
}


}


.archive-blog-item {
    background-color: #ffffff;
    border-radius: var(--radius-card);
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.archive-blog-image {
    position: relative;
}

.archive-blog-image img {
    width: 100%;
    height: 200px; /* Set a fixed height for all images */
    object-fit: contain; /* Maintain the aspect ratio and ensure the entire image fits */
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.archive-blog-badge {
    position: absolute;
    bottom: 10px;
    left: 0;
    background-color: #FEF4E6;
    color: var(--color-accent);
    padding: 5px 10px;
    border-radius: var(--radius-card);
    font-size: 12px;
    font-weight: 600;
}

.archive-blog-title {
    font-size: 16px;
    font-weight: 800;
    text-align: left;
}

.archive-blog-meta {
    color: #00000059;
    display: flex;
    align-items: center;
    margin: 10px 0;
    text-align: left;
}

.archive-blog-date {
    font-size: 12px;
    color: #00000059;
}

.archive-blog-divider {
    display: inline-block;
    width: 40px;
    height: 2px;
    background-color: var(--color-accent);
    margin-left: 10px;
}

.archive-blog-excerpt {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 15px;
    text-align: left;
}

.archive-blog-readmore {
    margin-top: auto;
    font-size: 14px;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
}

.archive-blog-pagination {
    margin-top: 30px;
    text-align: center;
}

.archive-blog-pagination a {
    color: var(--color-accent);
    padding: 5px 10px;
    text-decoration: none;
    font-weight: bold;
}

.archive-blog-pagination .current {
    color: #333;
    padding: 5px 10px;
    background-color: var(--color-accent);
    border-radius: 3px;
}

/* Container for the whole section */
.homepage-top-section {
  padding: 0;
  background-color: #fff;
}

/* Flex container for the two columns */
.homepage-top-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

/* Left column styles */
.homepage-top-left {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.homepage-top-image-wrapper {
  position: relative; /* This makes the text box relative to the image */
  display: inline-block;
}

.homepage-top-image {
  height: auto;
  display: block;
}

/* Box overlaying the image */
.homepage-top-text-box {
  position: absolute;
  left: -100px;
  bottom: 25%;
  transform: translateY(-25%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  max-width: 250px;
  background-color: #FFF;
  color: #000;
  padding: 15px 25px;
  border-radius: var(--radius-card);
  font-size: 14px;
  z-index: 1;
}

.homepage-top-box-title {
  margin: 0;
  font-size: 14px;
  color: #00000059;
}

.homepage-top-box-subtitle 
{
  margin-top: 5px;
  font-size: 14px;
  color: #000;
  font-weight: 800;
}

/* Right column styles */
.homepage-top-right {
  flex: 1;
  padding-left: 40px;
  text-align: left;
}

.homepage-top-right h1 {
  font-size: 50px;
  margin-bottom: 10px;
  color: #000;
  font-weight: 800;
}

.homepage-top-subtitle {
  font-size: 16px;
  color: #000;
  margin-bottom: 20px;
  font-weight: 800;
}

.homepage-top-icon-text {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.homepage-top-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border: 1px solid #EAEAEA;
}

.homepage-top-icon-text span {
  font-size: 16px;
}

/* Button styles */
.homepage-top-button {
  padding: 15px 20px;
  font-size: 12px;
  background-color: #28a745;
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.homepage-top-button i {
	margin-left: 25px;
}
.homepage-top-button:hover {
  background-color: #218838;
}

/* Button styles */
.homepage-top-button-new {
  padding: 15px 80px;
  font-size: 16px;
  background-color: #F9BC61;
  font-weight: 700;
  text-align: center;
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.homepage-top-button-new:hover {
  background-color: #28a745;
  color: #FFF;

}

.homepage-hero-button-container {
	display: flex;
    flex-direction: column;
    width: 50%;
    text-align: center;
    row-gap: 25px;
    margin-top: 50px;
}

.homepage-hero-button-container span {
	font-weight: 700;
	font-size: 20px;
	color: #000;
}

.h2home, .homepage-categories-grid-section h2 {
	text-align: center;
	font-weight: 800;
	font-size: 16px;
	margin: 0;
    margin-bottom: 50px;
}

.homepage-top-column {
    display: flex;
    margin-bottom: 25px;
    margin-top: 25px;
}

.homepage-top-icon-text:hover .homepage-top-title {
    color: #F8B44D;
}

.homepage-top-icon-text {
    display: flex;
    justify-content: left; /* Center content horizontally */
    align-items: center; /* Center content vertically */
}

.homepage-top-icon {
    width: 64px; /* Set width for the icon */
    height: 64px; /* Set height for the icon */
    background-color: #fff; /* White background for the icon */
    border-radius: 50%; /* Make the background a circle */
    display: flex;
    justify-content: center;
    align-items: center; /* Center the image inside the circle */
    margin-right: 20px; /* Space between icon and text */
}

.homepage-top-icon img {
    width: 32px; /* Image width */
    height: 32px; /* Image height */
}

.homepage-top-title a {
    color: #000;
    font-size: 22px;
    font-weight: 800;
    text-align: left;
    text-decoration: none;
}

.homepage-top-title a:hover {
    color: #F8B44D;
}

/* Styles for the configurator section */
.homepage-configurator-section {
    display: flex;
    background-color: #FEF4E6;
    padding: 60px 30px;
    position: relative;
    border-radius: var(--radius-card);
   	margin-top: 100px;
   	margin-bottom: 50px;
}

.homepage-configurator-left {
    flex: 1;
}

.homepage-configurator-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Custom select dropdown */
.homepage-configurator-custom-select {
    position: relative;
    max-width: 450px;
    width: 100%;
    cursor: pointer;
    padding-bottom: 10px; /* Added padding to create space for label */
}

/* Label inside the select field */
.homepage-configurator-label-inside {
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 12px;
    color: #00000059;
    pointer-events: none;
}

/* Display area of the select field */
.homepage-configurator-select-display {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: var(--radius-input);
    padding: 40px 20px 15px 20px; /* Increased padding */
    border: none;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

/* Icon and text inside the select display */
.homepage-configurator-select-icon-left {
    display: flex;
    align-items: center;
}

.homepage-configurator-select-icon-left img {
    width: 30px; /* Increased size for better visibility */
    height: 30px;
    margin-right: 0;
}

#selected-value {
    font-size: 14px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    margin-left: 10px;
    font-weight: 800;
}

/* Dropdown menu */
.homepage-configurator-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    border: none;
    border-radius: var(--radius-card);
    display: none; /* Hidden by default */
    z-index: 10;
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.homepage-configurator-select-options li {
    padding: 15px 20px; /* Increased padding */
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
}

.homepage-configurator-select-options li img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.homepage-configurator-select-options li:hover {
    background-color: #f0f0f0;
}

.homepage-configurator-select-options li:first-child:hover {
    background-color: #f0f0f0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.homepage-configurator-select-options li:last-child:hover {
    background-color: #f0f0f0;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}

/* Show the options when the dropdown is active */
.homepage-configurator-custom-select.active .homepage-configurator-select-options {
    display: block;
}

/* Font Awesome arrow on the right of the select field */
.homepage-configurator-select-arrow-right {
    margin-left: 10px;
    margin-top: -25px;
}

.homepage-configurator-select-arrow-right i {
    font-size: 16px;
    color: #000;
}

/* Submit Button */
.homepage-configurator-submit-btn {
    width: 100%;
    padding: 20px; /* Increased padding */
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: var(--radius-btn);
    font-size: 12px;
    cursor: pointer;
    max-width: 450px;
    display: flex;
    justify-content: space-between; /* Ensure text is on the left and icon on the right */
    align-items: center;
    margin-top: 15px;
}

.homepage-configurator-submit-btn i {
    font-size: 12px; /* Adjust the size of the arrow icon */
    margin-left: 10px; /* Add some space between text and arrow */
}

.homepage-configurator-main-image {
   /*  height: 450px; */
    object-fit: cover;
    display: block;
    max-width: 100%; /* Ensures the image scales based on its container */
    width: auto;
    padding: 50px;
 /*   margin-top: -150px;*/
}

/* Information box */
.homepage-configurator-info-box {
    background-color: #fff;
    position: absolute;
    right: 50px; /* Adjust as needed */
    bottom: -50px; /* Position relative to the image, adjust as needed */
    max-width: 250px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: #000;
    padding: 15px 25px;
    border-radius: var(--radius-card);
    font-size: 14px;
}

.homepage-configurator-info-box h4 {
  margin: 0;
  font-size: 14px;
  color: #00000059;
}

.homepage-configurator-info-box p
{
  margin-top: 5px;
  font-size: 14px;
  color: #000;
  font-weight: 800;
}


.homepage-configurator-section h2 {
    font-size: 22px;
    font-weight: 800;
}

/* Wrapper for image and info box */
.homepage-configurator-image-wrapper {
    position: relative; /* This makes the info box positioned relative to the image */
    display: inline-block;
}

.hodnoceni-box-container {
    background-color: #FEF4E6;
    border-radius: var(--radius-card);
    border: 1px solid #F0B053;
    padding: 20px;
    max-width: 400px;
    position: relative;
}

.hodnoceni-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.hodnoceni-box-header h3 {
    font-size: 22px;
    margin: 0;
    font-weight: 800;
}

.hodnoceni-box-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
}

.hodnoceni-box-field {
    position: relative;
    margin-bottom: 15px;
    padding-top: 15px;
}

.hodnoceni-box-field input,
.hodnoceni-box-field textarea {
    width: 100%;
    padding: 30px 20px 15px 20px;
    background-color: #fff;
    border-radius: var(--radius-input);
    border: none;
    border: 1px solid #fff;
    font-size: 14px;
    font-weight: 800;
    outline: none;
    color: #000;
}

.hodnoceni-box-field input::placeholder,
.hodnoceni-box-field textarea::placeholder {
    color: #000;
}

.hodnoceni-box-label {
    position: absolute;
    top: 25px;
    left: 20px;
    font-size: 12px;
    color: #00000059;
    pointer-events: none;
}

.hodnoceni-box-field input:focus,
.hodnoceni-box-field textarea:focus {
    border: 1px dashed #F0B053;
}

.hodnoceni-box-rating-field input {
    padding-top: 30px;
}

/* Rating stars and value */
.hodnoceni-box-rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 20px 15px 20px;
    background-color: #FFF;
    border-radius: var(--radius-card);
}

.hodnoceni-box-stars {
    display: flex;
    gap: 5px;
}

.hodnoceni-box-stars i {
    color: #F0B053;
    font-size: 20px;
    cursor: pointer;
}

.hodnoceni-box-rating-value {
    font-size: 14px;
    color: #000;
    font-weight: 800;
}

/* Textarea styling */
.hodnoceni-box-field textarea {
    resize: none;
    height: 100px;
}

/* Full-width submit button */
.hodnoceni-box-submit {
    background-color: #32a852;
    color: #fff;
    padding: 15px 20px;
    border: none;
    border-radius: var(--radius-btn);
    cursor: pointer;
    font-size: 14px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hodnoceni-box-submit i {
    margin-left: 10px;
}

.hodnoceni-box-stars i {
    color: #d3d3d3; /* Default grey color for inactive stars */
    font-size: 20px;
    cursor: pointer;
}
.rating-input:checked + .rating-star i {
    color: #F0B053; /* Yellow color for active stars */
}

/* Hide radio inputs */
.rating-input {
    display: none;
}

/* Default star color (grey) */
.rating-star i {
    color: #d3d3d3;
    font-size: 20px;
    cursor: pointer;
}

/* Change color of the stars when selected */
.rating-input:checked ~ label i {
    color: #F0B053; /* Yellow color for selected stars */
}

.jak-zacit-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

.jak-zacit-container {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.jak-zacit-left-column,
.jak-zacit-right-column {
    flex: 1;
    display: flex;
    justify-content: start;
    align-items: center;
}

.jak-zacit-info-box {
    background-color: #FEF4E6;
    border-radius: var(--radius-card);
    padding: 35px;
    text-align: left;
    width: 80%;
}

.jak-zacit-title {
    font-size: 24px;
    font-weight: 800;
    color: #000;
    margin-bottom: 10px;
}

.jak-zacit-subtitle {
    font-size: 14px;
    color: #F8B44D;
    font-weight: 800;
}

.jak-zacit-right-column {
    position: relative;
    display: flex;
    align-items: center;
}

.jak-zacit-blob-container {
position: relative;
}

.page-template-page-konfigurace .jak-zacit-blob-container {
    width: 350px;
    height: 350px;
    background-size: cover;
    background-position: center;
    position: static;
}


.jak-zacit-blob-image {
    width: 350px;
    height: 350px;
    /* background-image: url('images/elipse.png'); /* Add blob background image URL here */
    background-size: cover;
    background-position: center;
    position: absolute;
}

.page-template-page-konfigurace .jak-zacit-blob-image {
    width: 350px;
    height: 350px;
    background-image: url('images/elipse.png'); /* Add blob background image URL here */
    background-size: cover;
    background-position: center;
}


.page-template-page-konfigurace .jak-zacit-product-image {
    width: 350px;
    border-radius: 50px;
}

.jak-zacit-product-image {
    width: 350px;
    border-radius: 50px;
    position: relative;
}


.jak-zacit-description-box {
    position: absolute;
    bottom: 100px;
    left: -100px;
    background-color: #ffffff;
    border-radius: var(--radius-card);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 15px 25px;
    max-width: 250px;
    color: #000;
    font-size: 14px;
}

.jak-zacit-description-title  {
  margin: 0;
  font-size: 14px;
  color: #00000059;
}

.jak-zacit-description-text
{
  margin-top: 5px;
  font-size: 14px;
  color: #000;
  font-weight: 800;
}

/* Responsiveness */
@media (max-width: 767px) {
    .jak-zacit-container {
        flex-direction: column;
    }

    .jak-zacit-right-column {
        margin-top: 20px;
    }

    .jak-zacit-blob-image {
        width: 200px;
        height: 200px;
        margin: 0 auto;
    }

    .jak-zacit-product-image {
        width: 200px;
        right: auto;
        left: 150px;
    }

    .jak-zacit-description-box {
        left: 0;
        max-width: 200px;
    }


}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .jak-zacit-blob-image {
        width: 250px;
        height: 250px;
        margin: 0 auto;
    }

    .jak-zacit-product-image {
        width: 400px;
        right: auto;
        left: 50px;
    }

        .jak-zacit-description-box {
        left: -50px;
        bottom: -50px;
        max-width: 200px;
    }




}


.jak-zacit-steps-section {
    padding: 50px 0;
    background-color: #fff;
}

.jak-zacit-steps-container {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
}

.jak-zacit-steps-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.jak-zacit-steps-number-col {
    flex: 0 0 10%;
    display: flex;
    justify-content: left;
    align-items: center;
}

.jak-zacit-steps-number-circle {
    background-color: #FEF4E6;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    font-weight: 800;
    color: #F8B44D;
}

.jak-zacit-steps-text-col {
    flex: 0 0 60%;
    padding-left: 20px;
}

.jak-zacit-steps-title {
    font-size: 20px;
    font-weight: 800;
    color: #000;
    margin-bottom: 10px;
}

.jak-zacit-steps-description {
    font-size: 14px;
    color: #A5A5A5;
}

.jak-zacit-step-link,
.jak-zacit-step-link:hover,
.jak-zacit-step-link:focus {
    display: block;
    text-decoration: none;
    color: inherit;
}
.jak-zacit-step-link:hover .jak-zacit-steps-title {
    color: #F0B053;
}
.jak-zacit-step-link:hover .jak-zacit-steps-description {
    color: #7a7a7a;
}

.jak-zacit-steps-image-col {
    flex: 0 0 20%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.jak-zacit-steps-image-container {
    position: relative;
}

.jak-zacit-steps-image {
    width: 200px;
    object-fit: contain;
    display: block;
    height: 200px;
}

.jak-zacit-steps-icon-container {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 75px;
    height: 75px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.jak-zacit-steps-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px;
}

/* Button and contact info */
.jak-zacit-steps-button {
    display: inline-block;
    padding: 15px 60px;
    background-color: var(--color-cta-primary); /* Green background */
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    border-radius: var(--radius-btn);
    font-weight: bold;
    margin-right: 15px;
}

.jak-zacit-steps-button:hover {
    background-color: #F8B44D; /* Green background */
    color: #fff;

}


.jak-zacit-steps-contact {
    font-size: 14px;
    font-weight: bold;
    color: #000;
    vertical-align: middle;
}


/* Responsiveness */
@media (max-width: 768px) {
    .jak-zacit-steps-row {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 20px;
    }

    .jak-zacit-steps-number-col,
    .jak-zacit-steps-image-col {
        margin-bottom: 20px;
    }

    .jak-zacit-steps-number-circle {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }


    .jak-zacit-steps-icon-container {
        width: 40px;
        height: 40px;
    }

    .jak-zacit-steps-icon {
        padding: 5px;
    }
}

/* ── Mobil: kroky konfigurace (postup s/bez vozidla) — 2026-06-19 ──
   Scope JEN tyto 2 šablony (body-class), nic jiného se nemění.
   Řeší klientovu připomínku „mobil: nelogicky rozmístěné / moc velké":
   číslo + obrázek dát k sobě vlevo (zrušit prázdno), zmenšit přerostlý 200px
   obrázek a zrušit bílý letterbox (height:auto), sjednotit mezery mezi kroky. */
@media (max-width: 767px) {
    .page-template-page-konfigurace-s-vozidlem .jak-zacit-steps-number-col,
    .page-template-page-konfigurace-bez-vozidla .jak-zacit-steps-number-col {
        justify-content: flex-start;
        align-items: center;
        gap: 16px;
    }
    .page-template-page-konfigurace-s-vozidlem .jak-zacit-steps-image-container.mobil,
    .page-template-page-konfigurace-bez-vozidla .jak-zacit-steps-image-container.mobil {
        flex: 0 0 auto;
    }
    .page-template-page-konfigurace-s-vozidlem .jak-zacit-steps-image-container.mobil .jak-zacit-steps-image,
    .page-template-page-konfigurace-bez-vozidla .jak-zacit-steps-image-container.mobil .jak-zacit-steps-image {
        width: 120px;
        height: auto;
    }
    .page-template-page-konfigurace-s-vozidlem .jak-zacit-steps-row,
    .page-template-page-konfigurace-bez-vozidla .jak-zacit-steps-row {
        margin-bottom: 28px;
    }
}

/* ── Mobil: O nás + hlavní Konfigurace — zmenšit přerostlé obrázky / volné mezery (2026-06-19) ──
   Scope JEN tyto 2 šablony (body-class), hero překryv konfigurace se NEdotýká (křehké neg. marginy). */
@media (max-width: 767px) {
    /* O nás — hero obrázek byl 437px čtverec (foto jednotky na světlém pozadí) → zmenšit */
    .page-template-page-o-nas .katalog-two-top-left { height: auto; }
    .page-template-page-o-nas .katalog-two-top-image {
        height: auto;
        max-height: 240px;
        width: auto;
        max-width: 240px;
        margin: 0 auto;
    }
    /* Konfigurace — stáhnout přebytečnou mezeru pod hero (info-box) + zmenšit Component-Protection obrázek */
    .page-template-page-konfigurace .konfigurace-info-box { margin-top: 60px; }
    .page-template-page-konfigurace .konfigurator-desc-section-image {
        max-height: 230px;
        width: auto;
    }
}

.jak-zacit-steps-button-contact-wrapper {
    display: flex;
    align-items: center; /* Ensures both the button and contact info are vertically centered */
    margin-top: 10px;
    justify-content: center;
}

.jak-zacit-steps-contact-wrapper {
    display: flex;
    align-items: center;
    margin-left: 15px; /* Adds spacing between the button and the contact info */
}

.jak-zacit-steps-phone-icon {
    height: 20px;
    margin-right: 10px;
}

.jak-zacit-steps-contact {
    display: flex; /* Ensures the text aligns well inside the contact wrapper */
    align-items: center;
}

.jak-zacit-end-section {
    padding: 50px 0;
    background-color: #fff;
}

.jak-zacit-end-container {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.jak-zacit-end-logo-col {
    flex: 0 0 20%; /* Logo column takes 20% width */
    display: flex;
    justify-content: center;
    align-items: center;
}

.jak-zacit-end-logo {
    max-width: 100%; /* Ensures the logo takes up the full column width */
    height: auto;
    padding: 25px;
}

.jak-zacit-end-text-col {
    flex: 0 0 80%; /* Text column takes 80% width */
    display: flex;
    align-items: center;
}

.jak-zacit-end-text-box {
    background-color: #FEF4E6;
    border-radius: var(--radius-card);
    padding: 35px;
    max-width: 100%;
}

.jak-zacit-end-title {
    font-size: 20px;
    font-weight: 800;
    color: #F8B44D; /* Orange text color for the title */
    margin-bottom: 10px;
}

.jak-zacit-end-subtitle {
    font-size: 14px;
    color: #000;
    font-weight: 800;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .jak-zacit-end-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .jak-zacit-end-logo-col {
        margin-bottom: 20px;
    }
}

.jak-zacit-poptavka-section {
    margin: 50px auto;
    background-color: #fff;
}

.jak-zacit-poptavka-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px; /* Spacing between the title and the button */
    max-width: 1200px;
    margin: 0 auto;
}

.jak-zacit-poptavka-title {
    font-size: 18px;
    font-weight: 800;
    color: #000;
    position: relative;
    padding-bottom: 5px;
}

.jak-zacit-poptavka-button {
 display: inline-flex;
    align-items: center;
    justify-content: space-between; /* Distribute space between text and icon */
    padding: 20px 20px;
    background-color: var(--color-cta-primary); /* Green color */
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    border-radius: var(--radius-btn); /* Rounded corners */
    text-decoration: none;
    transition: background-color 0.3s ease;
    width: 200px;
}

.jak-zacit-poptavka-button:hover {
    background-color: #F8B44D; /* Green color */
    color: #fff;

}

.jak-zacit-poptavka-button i {
    margin-left: 10px; /* Space between the text and the icon */
}

.jak-zacit-poptavka-button:hover {
    background-color: #218838; /* Darker green on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .jak-zacit-poptavka-container {
        flex-direction: column;
        gap: 25px; /* Less space between the title and button on small screens */
    }
}


/* Badge styles */
.search-result-part-one-badge {
  display: inline-block;
  background-color: #FEF4E6; /* Light orange background */
  color: var(--color-accent); /* Orange text */
  padding: 10px 20px;
  border-radius: var(--radius-card);
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 15px;
  margin-top: 20px;
}

/* Grid layout using CSS Grid */
.search-result-part-one-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 35px;
  margin-bottom: 35px;
}

/* Individual grid item */
.search-result-part-one-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: white;
  border-radius: var(--radius-card);
  padding: 15px 30px;
  box-shadow: var(--shadow-card);
}

/* Image inside item */
.search-result-part-one-image {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  object-fit: contain;
  border-radius: var(--radius-img) var(--radius-img) 0 0;
}

/* Title inside item */
.search-result-part-one-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  margin: 10px 0 5px 0;
}

/* Optional title styles */
.search-result-title {
  font-size: 20px;
  font-weight: 800;
}

.site-main .archive-blog-container {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Badge styles (same as before) */
.search-result-part-two-badge {
  display: inline-block;
  background-color: #FEF4E6; /* Light orange background */
  color: var(--color-accent); /* Orange text */
  padding: 10px 20px;
  border-radius: var(--radius-card);
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 15px;
  margin-top: 20px;
}

/* Grid layout using CSS Grid */
.search-result-part-two-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 35px;
  align-items: stretch;
  margin-bottom: 35px;
}

/* Individual grid item */
.search-result-part-two-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: white;
  border-radius: var(--radius-card);
  padding: 15px 30px;
  box-shadow: var(--shadow-card);
}

/* Image inside item (centered) */
.search-result-part-two-image {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  object-fit: contain;
  border-radius: var(--radius-img) var(--radius-img) 0 0;
}

/* Title and subtitle styles */
.search-result-part-two-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  margin: 10px 0 5px 0;
}

.search-result-part-two-subtitle {
  font-size: 12px;
  font-weight: 700;
  color: #000;
}

.search-blog-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;
    margin: 0 auto;
    margin-bottom: 50px;
}

.search-blog-item {
    background-color: #ffffff;
    border-radius: var(--radius-card);
    padding: 0;
    box-shadow: var(--shadow-card);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.search-blog-image {
    position: relative;
}

.search-blog-image img {
    width: 100%;
    height: 180px;
    border-radius: 0;
    object-fit: cover;
    display: block;
}

.search-blog-badge {
    position: absolute;
    bottom: 10px;
    left: 0;
    background-color: #FEF4E6; /* Adjust this to your badge background color */
    color: var(--color-accent);
    padding: 5px 10px;
    border-radius: var(--radius-card);
    font-size: 12px;
    font-weight: 600;
}

.search-blog-title {
    font-size: 16px;
    font-weight: 800;
    text-align: left;
    padding: 15px 20px 0 20px;
    margin: 0;
}

.search-blog-title a {
    color: #000;
    text-decoration: none;
}

.search-blog-title a:hover {
    color: var(--color-accent);
}

.search-blog-meta {
	color: #00000059;
    display: flex;
    align-items: center;
    margin: 5px 0 0 0;
    padding: 0 20px;
    text-align: left;
}

.search-blog-date {
    font-size: 12px;
    color: #00000059;
}

.search-blog-divider {
    display: inline-block;
    width: 40px;
    height: 2px;
    background-color: var(--color-accent);
    margin-left: 10px;
}

.search-blog-excerpt {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    margin: 10px 0 20px 0;
    padding: 0 20px;
    text-align: left;
}

.search-blog-readmore {
    margin-top: auto; /* Push the link to the bottom */

}

.single-post-new-container {
    background-color: #FFF; /* Adjust to your desired background color */
    border-radius: var(--radius-card);
    overflow: hidden;
    margin: 0 auto;
    position: relative;
}





.single-post-new-image-wrapper {
    position: relative;
    height: 300px;
    overflow: hidden;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.single-post-new-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.single-post-new-category {
    position: absolute;
    bottom: 25px;
    left: 10px;
    color: var(--color-accent);
    background-color: #FEF4E6; /* Adjust badge background */
    padding: 5px 10px;
    border-radius: var(--radius-card);
    font-size: 12px;
    font-weight: 800;
    z-index: 2;
}

.single-post-new-content {
    padding: 15px;
}

.single-post-new-meta {
    display: flex;
    align-items: center;
    justify-content: start;
    margin-bottom: 10px;
}

.single-post-new-date {
    font-size: 12px;
    color: #000;
}

.single-post-new-line {
    height: 2px;
    background-color: var(--color-accent); /* Adjust the line color */
    margin-left: 10px;
    width: 50px;
}

.single-post-new-excerpt {
    font-size: 14px;
    color: #000;
    padding: 25px;
}

.single-blog-section {
    background-color: #FEF4E6;
    text-align: center;
    padding: 15px 0;
}

.single-blog-section .breadcrumbs a, .single-blog-section .breadcrumbs {
	color: #000;

}

@media only screen and (max-width: 1024px) and (min-width: 768px) {

.single-post-new-container {
    max-width: 100%; /* Adjust as needed */

}

.single-post-new-excerpt {padding: 0;}

}


@media only screen and (max-width: 768px) {
.single-post-new-excerpt {padding: 0;}
.single-post-new-container {
    max-width: 100%; /* Adjust as needed */
}


}

.konfigurace-title {
	font-size: 24px;
	font-weight: 800;
	color: #000;
	margin-top: 50px;
}

.konfigurace-text {
	font-size: 14px;
	color: #000;
	width: 80%;
	margin-bottom: 50px;
 font-family: var(--font-meta);
}

.konfigurace-left-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.konfigurace-info-box {
    background-color: rgba(254, 244, 230, 0.4);
    border-radius: var(--radius-card);
    padding: 35px;
  	display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align content to the left */
    width: 80%;
}

.konfigurace-info-box p {
	font-size: 12px;
	font-weight: 600;
	color: #000;
	text-align: center;
	margin-bottom: 25px;
	 font-family: var(--font-meta);
}


.konfigurace-info-box .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 50%;
    padding: 10px;
}

.konfigurace-info-box .info-icon {
    width: 30px; /* Adjust size of the icon */
    height: 30px;
    display: block;
}

.quote-section {
    display: flex;
    flex-direction: column;
    width: 75%;
    max-width: 800px;
    margin: 100px auto 50px auto; /* Center the whole container horizontally */
    text-align: left; /* Align the text to the left inside the container */
}


.quote-icon {
    font-size: 50px; /* Larger size for the quotation mark */
    font-weight: 800;
    color: #ccc; /* Light grey color to make it subtle */
    position: relative;
    bottom: -25px; /* Push the quote mark down */
}

.quote-text {
    font-size: 16px;
    font-weight: 800;
    color: #000; /* You can adjust the color as needed */
    margin: 0;
}

.konfigurace-typy-section-main {
    margin: 0 auto; /* Center the whole section horizontally */

    background-color: #FEF4E6; /* Background color similar to the image */
}

.konfigurace-typy-section {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Space between columns */
    margin: 50px auto; /* Center the whole section horizontally */
        width: 90%;
            max-width: 1200px;
    padding: 50px 0;

}

.konfigurace-typy-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center; /* Align everything to the left */
    text-align: left;
    padding: 20px;
}

.konfigurace-typy-icon-container {
    width: 55px; /* Set a fixed width */
    height: 55px; /* Set a fixed height */
    background-color: white;
    border-radius: 50%;
    margin-bottom: 10px; /* Space between icon and title */
    display: flex;
    align-items: center;
    justify-content: center;
}

.konfigurace-typy-icon {
    max-width: 55%;
    max-height: 55%;
    object-fit: contain; /* Ensure the image scales without stretching */
}

.konfigurace-typy-column h3 {
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 0;
}

.konfigurace-typy-column p {
    font-size: 11px;
    font-weight: 600;
    color: #000; /* Adjust text color if needed */
    margin-bottom: 0;
    font-family: var(--font-meta);
    font-weight: 600;
}

.konfigurace-jak-zacit-description-box {
    position: absolute;
    bottom: -50px;
    left: -100px;
    background-color: #ffffff;
    border-radius: var(--radius-card);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 15px 25px;
    max-width: 250px;
    color: #000;
    font-size: 14px;
}

.konfigurace-jak-zacit-description-title  {
  margin: 0;
  font-size: 14px;
  color: #00000059;
}

.konfigurace-jak-zacit-description-text
{
  margin-top: 5px;
  font-size: 14px;
  color: #000;
  font-weight: 800;
}

.konfigurace-jak-zacit-poptavka-section {
    margin: 100px auto;
    background-color: #fff;
}

 .konfigurator-desc-section {
    display: flex;
    width: 100%;
    
         padding-bottom: 50px;
    border-bottom: solid 1px #E5E5E5;

  }
  .konfigurator-desc-section-wrapper {
    display: flex;
    width: 90%;
    gap: 50px;
    max-width: 1200px;
     margin: 50px auto;

  }


  .konfigurator-desc-section-left {
    flex: 1;
  }
  .konfigurator-desc-section-title {
    font-size: 20px;
    font-weight: 800;
  }
  .konfigurator-desc-section-text {
    font-size: 14px;
    margin-bottom: 25px;
    font-family: var(--font-meta);
  }
  .konfigurator-desc-section-highlight {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 25px;
  }
  .konfigurator-desc-section-right {
    flex: 1;
    position: relative;
  }
  .konfigurator-desc-section-image-container {
    position: relative;
  }
  .konfigurator-desc-section-image {
    width: 75%;
    height: auto;
    padding: 0px;
    margin: 0 auto;
  }


 .konfigurace-big-icon {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 80px;
    height: 80px;
    background-color: #FEF4E6;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .konfigurace-big-icon img {
    width: 40px;
    height: 40px;
  }

.konfigurator-end-section-wrapper {
  display: flex;
  gap: 50px;
  justify-content: space-between;
  margin: 50px auto;
}

.konfigurator-end-left-column,
.konfigurator-end-right-column {
  flex: 1 1 50%;
}

.konfigurator-end-box {
  display: flex;
  align-items: center;
  background-color: white;
    box-shadow: 0px 5px 20px #00000029;
  border-radius: var(--radius-card);
  padding: 0 20px;
  margin-bottom: 20px;
}

.konfigurator-end-box-left {
  flex: 0 0 33%;
  position: relative;
}

.konfigurator-end-box-right {
  flex: 0 0 67%;
  padding-left: 20px;
}

.konfigurator-end-image-container {
  position: relative;
  width: 100%;
  padding-top: 100%; /* Aspect ratio for square image */
  overflow: hidden;
}

.konfigurator-end-box-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.konfigurator-end-badge-wrapper {
  position: absolute;
  bottom: 15px;
  right: 5px;
  width: 50px;
  height: 50px;
  z-index: 1000;
}

.konfigurator-end-badge {
  background-color: var(--color-cta-primary);
  color: #FFF;
  border-radius: 50%;
  padding: 10px;
  font-size: 17px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.konfigurator-end-box-text {
  font-size: 14px;

}

.konfigurator-end-right-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 100px;
}

.konfigurator-end-right-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 15px;
}

.konfigurator-end-right-text {
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: 400;
  line-height: 22px;
}

.konfigurator-end-right-subtitle {
  font-size: 18px;
  font-weight: 800;
  margin-top: 20px;
  margin-bottom: 0;
}

.poptavka-desc-link {
	font-size: 14px;
	color: #000;
	width: 40%;
	margin: 0 auto;
	text-align: center;
	font-weight: 800;
}



@media only screen and (max-width: 1024px) and (min-width: 768px) {

.poptavka-desc-link {


	margin-top: 25px;

}

}


@media only screen and (max-width: 767px) {

.poptavka-desc-link {

	width: 100%;
	text-align: left;
	margin-top: 15px;

}

}

.modely-grid-vypis-item-title-model {
    font-size: 16px;
    text-align: center;
    font-weight: 800;
    margin: 0;
    margin-top: 10px;
}


.mg-top-50 {
	margin-top: 50px;
}

.blob-poptavka {
	width: 400px;
	margin: 100px auto;
}

.blob-reg {
	width: 250px;
	margin: 25px auto;
}


@media only screen and (max-width: 1024px) and (min-width: 768px) {



}


@media only screen and (max-width: 768px) {

    .blob-poptavka {
        width: 100%;
        margin-top: 100px;
        margin-bottom: 25px;
    }

}

.registrace-form-section {
    background-color: #FEF4E6;
    padding: 50px;
    border-radius: var(--radius-card);
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.registrace-form-container {
    text-align: center;
    max-width: 600px;
}

.registrace-form-title {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 800;
    margin-top: 0px;
}

.registrace-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.registrace-form-group {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.ares-button-group {
    display: flex;
    justify-content: flex-end;
}

.registrace-ares-button {
    padding: 12px 20px;
    background-color: #333;
    color: white;
    border: none;
    border-radius: var(--radius-btn);
    cursor: pointer;
    font-weight: 800;
    font-size: 14px;
}

.registrace-form-label {
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 14px;
    color: #aaa;
    pointer-events: none;
    transition: all 0.2s ease;
}


.registrace-form-input, .registrace-form-group input[type="text"], .registrace-form-group input[type="email"], .registrace-form-textarea {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 30px;
    padding-bottom: 10px;
    border: none;
    border-radius: var(--radius-input);
    font-size: 14px;
    font-weight: 800;
    color: #000;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    width: 100%;
    background-color: #fff;
}

.registrace-form-input:focus,
.registrace-form-input:not(:placeholder-shown) {
    border-color: #333;
}

.registrace-form-input:focus + .registrace-form-label,
.registrace-form-input:not(:placeholder-shown) + .registrace-form-label {
    top: 10px;
    left: 10px;
    font-size: 14px;
    color: #000;
    font-weight: 800;
}

.registrace-form-actions {
    display: flex;
    align-items: start;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin-top: 20px;
}

.registrace-form-checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.registrace-form-checkbox {
    accent-color: #F0B053;
    width: 18px;
    height: 18px;
    border-radius: 5px;
}

.registrace-form-checkbox-label {
    font-size: 14px;
    color: #000;
    text-align: left;
}

.registrace-form-submit {
    background-color: var(--color-cta-primary);
    color: #fff;
    padding: 20px 30px;
    border: none;
    border-radius: var(--radius-btn);
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    width: 200px;
    height: 50px;
    text-align: left;
}

.registrace-form-submit-icon {
    margin-left: auto;
    font-size: 18px;
}

.registrace-main-container {
    display: flex;
    column-gap: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.registrace-main-column {
    flex: 1; /* Makes both columns take equal space */
    /* Additional styling for the columns can go here */
}

.registrace-vyhody-section {
    padding: 20px;
    margin: 0 auto;
    max-width: 600px;
}

.registrace-vyhody-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.registrace-vyhody-item {
    display: flex;
    align-items: center;
}

.registrace-vyhody-icon {
    flex: 0 0 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.registrace-vyhody-icon-circle {
    width: 50px;
    height: 50px;
    background-color: #FEF4E6;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.registrace-vyhody-icon-img {
    width: 25px;
    height: 25px;
}

.registrace-vyhody-content {
    flex: 1;
    padding-left: 15px;
}

.registrace-vyhody-text {
    font-size: 14px;
    color: #000;
    font-weight: 400;
    margin: 0;
}

.registrace-vyhody-title {
    font-size: 14px;
    color: #000;
    font-weight: 800;
    margin-top: 0px;
    margin-bottom: 10px;
}

.registrace-vyhody-title-2 {
    font-size: 14px;
    color: #000;
    font-weight: 800;
    margin-top: 25px;
    margin-bottom: 10px;
}

.registrace-info-section-top-text {
    display: flex; /* Use flexbox for alignment */
    align-items: start; /* Vertically centers the icon and text */
    justify-content: start; /* Horizontally centers the icon and text */
    font-size: 14px;
    color: #F8B44D;
    font-weight: bold;
    gap: 10px; /* Adds space between the icon and text */
    margin-top: 25px;
}

.konfig-link {
	text-decoration: none;
	color: #000;
}

.konfig-link:hover {
	color: #F8B44D;
}

/* Pop-up container styling */
.poptavkovy-formular-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
      background-color: #FEF4E6;
    border-radius: var(--radius-card);
    width: 400px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 9999;
    border: 1px solid #F0B053;
    padding: 20px;
}

.rating-formular-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
      background-color: #FEF4E6;
    border-radius: var(--radius-card);
    width: 400px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 9999;
    border: 1px solid #F0B053;
    padding: 20px;
}



.poptavkovy-formular-title {
    font-size: 22px;
    font-weight: 800;
    color: #000;
    text-align: left;
    margin-bottom: 20px;
}


/* Input groups */
.poptavkovy-formular-group {
    position: relative;
    margin-bottom: 20px;
}

.poptavkovy-formular-label {
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.35);
    pointer-events: none;
    transition: all 0.2s ease;
}

.poptavkovy-formular-input, .poptavkovy-formular-textarea {
    padding: 30px 20px 10px;
    border-radius: var(--radius-input);
    background-color: #fff;
    border: 1px solid #fFF;
    font-size: 14px;
    font-weight: 800;
    color: #000;
    width: 100%;
    outline: none;
    box-sizing: border-box;
}

.poptavkovy-formular-group input[type="text"], .poptavkovy-formular-group input[type="email"], .poptavka-inline-group input[type="text"], .poptavka-inline-group input[type="email"]  {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 30px;
    padding-bottom: 10px;
    border: 1px solid #FFF;
    border-radius: var(--radius-input);
    font-size: 14px;
    font-weight: 800;
    color: #000;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    width: 100%;
}

.poptavkovy-formular-group input[type="text"]:focus,.poptavka-inline-group input[type="text"]:focus,
.poptavkovy-formular-textarea:focus {
    border: 1px dashed #F0B053;
}



.poptavkovy-formular-textarea {
    resize: none;
    height: 100px;
}

.poptavkovy-formular-input:focus + .poptavkovy-formular-label,
.poptavkovy-formular-input:not(:placeholder-shown) + .poptavkovy-formular-label,
.poptavkovy-formular-textarea:focus + .poptavkovy-formular-label,
.poptavkovy-formular-textarea:not(:placeholder-shown) + .poptavkovy-formular-label {
    top: 10px;
    left: 10px;
    font-size: 14px;
    color: #000;
    font-weight: 800;
}

/* File upload area */
.poptavkovy-formular-upload {
    border: 1px dashed #F0B053;
    border-radius: var(--radius-card);
    text-align: center;
    padding: 20px;
    cursor: pointer;
    position: relative;
    background-color: #FFF;
}

.poptavkovy-formular-input-upload {
    display: none;
}

.upload-area-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.upload-area-inner i {
    font-size: 24px;
    color: #555;
}

.upload-area-inner p {
    font-size: 14px;
    color: #555;
}

/* Submit button */
.poptavkovy-formular-submit {
    background-color: var(--color-cta-primary);
    color: #fff;
    padding: 20px 30px;
    border: none;
    border-radius: var(--radius-btn);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.poptavkovy-formular-submit-icon {
    margin-left: auto;
    font-size: 18px;
}

/* Close button */
.poptavkovy-formular-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #000;
    padding: 0;
}

/* Button to open the form */
.open-poptavkovy-formular {
    padding: 10px 20px;
    background-color: var(--color-cta-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-btn);
    cursor: pointer;
}

/* File info display after upload */
.upload-area-file-info {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#file-name {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

/* Button to remove/change the file */
.poptavkovy-formular-remove {
    background-color: #f44336;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.poptavkovy-formular-remove:hover {
    background-color: #d32f2f;
}

/* Add this for the white overlay effect */
.overlay-active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.75); /* 50% white overlay */
    z-index: 999; /* Ensure it appears above everything */
}

.badge-brand {
    position: absolute;
    top: 0; /* Uprav podle potřeby */
    left: 0; /* Uprav podle potřeby */
    width: 150px!important; /* Nastavení šířky pro badge, uprav podle potřeby */
    height: auto!important; /* Zachování poměru stran */
    z-index: 10; /* Zajišťuje, že badge bude nad obrázkem */
}



.poptavka-inline-header h3 {
    font-size: 22px;
    font-weight: 800;
    color: #000;
    text-align: center;
    margin-bottom: 20px;
}

/* Form Row */
.poptavka-inline-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Ensure both columns have equal height */
}

/* Right Column */
.poptavka-inline-right-column {
    flex: 1;
    display: flex;
    align-items: stretch; /* Ensure the upload area fills the column */
    text-align: center;
}


/* Left Column */
.poptavka-inline-left-column {
    flex: 1;
    margin-right: 20px;
}

/* Right Column */
.poptavka-inline-right-column {
    flex: 1;
    text-align: center;
}

/* Input groups */
.poptavka-inline-group {
    margin-bottom: 20px;
    position: relative;
}

 
.poptavka-inline-label{
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 12px;
    color: var(--color-label-muted);
    pointer-events: none;
    transition: all 0.2s ease;
}


.poptavka-inline-input {
    padding: 10px 15px;
    border-radius: var(--radius-input);
    background-color: #fff;
    border: 1px solid #fFF;
    font-size: 14px;
    color: #000;
    width: 100%;
    box-sizing: border-box;
}

.poptavka-inline-input:focus {
    border: 1px dashed #F0B053;
}

/* File upload area */
.poptavka-inline-upload {
    border: 1px dashed #F0B053;
    border-radius: var(--radius-card);
    padding: 20px 20px 0 20px;
    cursor: pointer;
    background-color: #FFF;
    text-align: center;
}

.poptavka-inline-input-upload {
    display: none;
}

.poptavka-inline-upload-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.poptavka-inline-upload-inner i {
    font-size: 24px;
    color: #555;
}

.poptavka-inline-upload-inner p {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.35);
    margin-bottom: 0;
}

/* File info display after upload */
.poptavka-inline-upload-file-info {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.poptavka-inline-remove {
    background-color: #f44336;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Submit button */
.poptavka-inline-submit {
    background-color: var(--color-cta-primary);
    color: #fff;
    padding: 20px 30px;
    border: none;
    border-radius: var(--radius-btn);
    cursor: pointer;
    font-size: 14px;

    align-items: center;
    font-weight: 800;

    width: 200px;  /* Remove full width */

}

.poptavka-inline-submit-icon {
    margin-left: auto;
    font-size: 18px;
}


/* Footer container for the text and submit button */
.poptavka-inline-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px; /* Space between the text and button */
    margin-top: 10px;
}

/* Styling for the text with the icon */
.poptavka-inline-footer-text {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #555;
    gap: 20px;
}

.poptavka-inline-footer-text img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}



.vsechny {
    font-size: 14px;
    color: #F8B44D;
    font-weight: bold;

}

.attribute-value a, .search-result-part-one-title-link, .search-result-part-two-title-link {
	color: #000;
}

.attribute-value a:hover {
	color: var(--color-accent);
}

#custom-options li {
    display: list-item; /* or block, based on your design */
}

#custom-options li[data-index]:not([style*="block"]) {
    display: none; /* Hides the elements when JS adds display: none */
}

/* Styles for the configurator section */
.navigator-configurator-section {
    display: flex;
    background-color: #FFF;
    box-shadow: 0px 20px 99px #00000029;
    padding: 15px 0;
    position: relative;
    border-radius: 25px;
    align-items: center;
    width: 80%;
    margin: 50px auto;
    justify-content: center;
    gap: 50px;
}

.navigator-configurator-left {
    flex: 1;
}

.navigator-configurator-right {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Custom select dropdown */
.navigator-configurator-custom-select {
    position: relative;
    cursor: pointer;
}

/* Label inside the select field */
.navigator-configurator-label-inside {
    position: absolute;
    top: 5px;
    left: 20px;
    font-size: 12px;
    color: #00000059;
    pointer-events: none;
    font-weight: 800;
}

/* Display area of the select field */
.navigator-configurator-select-display {
    display: flex;
    align-items: center;
    background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #00000029;
width: 300px;
    border-radius: var(--radius-input);
    padding: 20px 20px 10px 20px; /* Increased padding */
    border: none;
    justify-content: space-between;
    position: relative;
}

/* Icon and text inside the select display */
.navigator-configurator-select-icon-left {
    display: flex;
    align-items: center;
}

.navigator-configurator-select-icon-left img {
    width: 30px; /* Increased size for better visibility */
    height: 30px;
    margin-right: 0;
}

#selected-value {
    font-size: 14px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    margin-left: 10px;
    font-weight: 800;
}

/* Dropdown menu */
.navigator-configurator-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    border: none;
    border-radius: var(--radius-card);
    display: none; /* Hidden by default */
    z-index: 10;
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.navigator-configurator-select-options li {
    padding: 15px 20px; /* Increased padding */
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
}

.mobil {
	display: none;
}

.tablet {
	display: none;
}



.navigator-configurator-select-options li img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.navigator-configurator-select-options li:hover {
    background-color: #f0f0f0;
}

.navigator-configurator-select-options li:first-child:hover {
    background-color: #f0f0f0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.navigator-configurator-select-options li:last-child:hover {
    background-color: #f0f0f0;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}

/* Show the options when the dropdown is active */
.navigator-configurator-custom-select.active .navigator-configurator-select-options {
    display: block;
}

/* Font Awesome arrow on the right of the select field */
.navigator-configurator-select-arrow-right {
    margin-left: 10px;
        margin-top: -10px;
}

.navigator-configurator-select-arrow-right i {
    font-size: 16px;
    color: #000;
}

/* Submit Button */
.navigator-configurator-submit-btn {
    padding: 15px 75px; /* Increased padding */
    background: #1C1C1C 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #00000029;
border-radius: var(--radius-btn);
opacity: 0.45;
    color: #fff;
    border: none;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    justify-content: space-between; /* Ensure text is on the left and icon on the right */
    align-items: center;
}

.navigator-configurator-submit-btn i {
    font-size: 12px; /* Adjust the size of the arrow icon */
    margin-left: 10px; /* Add some space between text and arrow */
}

.navigator-configurator-main-image {
    
    object-fit: cover;
    display: block;
    max-width: 100%; /* Ensures the image scales based on its container */
    width: auto;
    margin-top: -150px;
}

/* Information box */
.navigator-configurator-info-box {
    background-color: #fff;
    position: absolute;
    left: -100px; /* Adjust as needed */
    bottom: 25px; /* Position relative to the image, adjust as needed */
    max-width: 250px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: #000;
    padding: 15px 25px;
    border-radius: var(--radius-card);
    font-size: 14px;
}

.navigator-configurator-info-box h4 {
  margin: 0;
  font-size: 14px;
  color: #00000059;
}

.navigator-configurator-info-box p
{
  margin-top: 5px;
  font-size: 14px;
  color: #000;
  font-weight: 800;
}


.navigator-configurator-section h2 {
    font-size: 15px;
    font-weight: 800;
}

/* Wrapper for image and info box */
.navigator-configurator-image-wrapper {
    position: relative; /* This makes the info box positioned relative to the image */
    display: inline-block;
}

/* Dropdown items */
.navigator-configurator-select-options li {
    display: flex; /* Ensure proper display for list items */
}

/* Initially hidden items */
.navigator-configurator-select-options li[data-index]:not(:nth-child(-n+20)) {
    display: none; /* Hide all items except the first 20 */
}

/* Pagination button */
.navigator-pagination {
    text-align: center;
    margin-top: 10px;
}

.navigator-pagination button {
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: var(--radius-btn);
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

.navigator-pagination button:hover {
    background-color: #333;
}

/* Motorizace load more button */
.motorizace-load-more-wrapper {
    text-align: center;
    margin: 20px 0;
    margin-top: 40px; 
}

.motorizace-load-more-btn {
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: var(--radius-btn);
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

.motorizace-load-more-btn:hover {
    background-color: #333;
}

.motorizace-vyber-nadpis {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 15px 0;
}

/* Styles for the configurator section */
.stepkonfigurator-configurator-section {
    display: flex;
    background-color: #FEF4E6;
    padding: 30px 60px;
    position: relative;
    border-radius: var(--radius-card);
}

.stepkonfigurator-configurator-left {
    flex: 1;
}

.stepkonfigurator-configurator-right {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Custom select dropdown */
.stepkonfigurator-configurator-custom-select {
    position: relative;
    width: 100%;
    cursor: pointer;
    padding-bottom: 10px; /* Added padding to create space for label */
}

/* Label inside the select field */
.stepkonfigurator-configurator-label-inside {
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 12px;
    font-weight: 800;
    color: #000;
    pointer-events: none;
}

/* Display area of the select field */
.stepkonfigurator-configurator-select-display {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: var(--radius-input);
    padding: 40px 20px 15px 20px; /* Increased padding */
    border: none;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

/* Icon and text inside the select display */
.stepkonfigurator-configurator-select-icon-left {
    display: flex;
    align-items: center;
}

.stepkonfigurator-configurator-select-icon-left img {
    width: 30px; /* Increased size for better visibility */
    height: 30px;
    margin-right: 0;
}

#selected-value, #selected-value-2 ,#selected-value-3  {
    font-size: 12px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    margin-left: 10px;
    font-weight: 800;
    color: #000;
}

/* Dropdown menu */
.stepkonfigurator-configurator-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    border: none;
    border-radius: var(--radius-card);
    display: none; /* Hidden by default */
    z-index: 10;
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.stepkonfigurator-configurator-select-options li {
    padding: 15px 20px; /* Increased padding */
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
}

.stepkonfigurator-configurator-select-options li img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.stepkonfigurator-configurator-select-options li:hover {
    background-color: #f0f0f0;
}

.stepkonfigurator-configurator-select-options li:first-child:hover {
    background-color: #f0f0f0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.stepkonfigurator-configurator-select-options li:last-child:hover {
    background-color: #f0f0f0;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}

/* Show the options when the dropdown is active */
.stepkonfigurator-configurator-custom-select.active .stepkonfigurator-configurator-select-options {
    display: block;
}

/* Font Awesome arrow on the right of the select field */
.stepkonfigurator-configurator-select-arrow-right {
    margin-left: 10px;
    margin-top: -25px;
}

.stepkonfigurator-configurator-select-arrow-right i {
    font-size: 16px;
    color: #000;
}

/* Submit Button */
.stepkonfigurator-configurator-submit-btn {
    width: 100%;
    padding: 20px; /* Increased padding */
    background-color: var(--color-cta-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-btn);
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between; /* Ensure text is on the left and icon on the right */
    align-items: center;
    margin-top: 15px;
    pointer-events: auto !important;
}

.stepkonfigurator-configurator-submit-btn i {
    font-size: 25px; /* Adjust the size of the arrow icon */
    margin-left: 10px; /* Add some space between text and arrow */
}

.stepkonfigurator-configurator-main-image {
    height: 450px;
    object-fit: cover;
    display: block;
    max-width: 100%; /* Ensures the image scales based on its container */
    width: auto;
    margin-top: -150px;
}

/* Information box */
.stepkonfigurator-configurator-info-box {
    background-color: #fff;
    position: absolute;
    left: -100px; /* Adjust as needed */
    bottom: 25px; /* Position relative to the image, adjust as needed */
    max-width: 250px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: #000;
    padding: 15px 25px;
    border-radius: var(--radius-card);
    font-size: 14px;
}

.stepkonfigurator-configurator-info-box h4 {
  margin: 0;
  font-size: 14px;
  color: #00000059;
}

.stepkonfigurator-configurator-info-box p
{
  margin-top: 5px;
  font-size: 14px;
  color: #000;
  font-weight: 800;
}


.stepkonfigurator-configurator-section h2 {
    font-size: 22px;
    font-weight: 800;
}

/* Wrapper for image and info box */
.stepkonfigurator-configurator-image-wrapper {
    position: relative; /* This makes the info box positioned relative to the image */
    display: inline-block;
}

/* Dropdown items */
.stepkonfigurator-configurator-select-options li {
    display: flex; /* Ensure proper display for list items */
}

/* Initially hidden items */
.stepkonfigurator-configurator-select-options li[data-index]:not(:nth-child(-n+20)) {
    display: none; /* Hide all items except the first 20 */
}

/* Pagination button */
.stepkonfigurator-pagination {
    text-align: center;
    margin-top: 10px;
}

.stepkonfigurator-pagination button {
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: var(--radius-btn);
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

.stepkonfigurator-pagination button:hover {
    background-color: #333;
}
.stepkonfigurator-configurator-custom-select {
    margin-bottom: 20px; /* Space between dropdowns */
}

/* Search field inside dropdown */
.stepkonfigurator-search-container {
    padding: 10px 15px;
    border-bottom: 1px solid #ccc; /* Divider between search and options */
    background-color: #fff;
    position: sticky; /* Ensures search bar stays on top if dropdown scrolls */
    top: 0;
    z-index: 1;
}

.stepkonfigurator-search-container input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 15px;
    font-size: 14px;
    box-sizing: border-box;
}

/* Adjust dropdown options to account for the search bar */
.stepkonfigurator-configurator-select-options {
    max-height: 300px; /* Add a height limit to enable scrolling */
    overflow-y: auto; /* Allow scrolling for long dropdowns */
    padding-top: 0; /* No extra space at the top */
}


/* Search field inside the dropdown */
.stepkonfigurator-search-container {
    padding: 10px 15px;
    border-bottom: 1px solid #ccc; /* Divider between search and options */
    background-color: #fff;
}

.stepkonfigurator-configurator-search-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
}

/* Adjust dropdown options for spacing with the search field */
.stepkonfigurator-configurator-select-options {
    max-height: 300px; /* Limit height for scrolling */
    overflow-y: auto;
    padding-top: 0; /* No extra space at the top */
    margin-top: 0;
}

/* Style for active dropdown state */
.stepkonfigurator-configurator-custom-select.active .stepkonfigurator-configurator-select-options {
    display: block;
}

#registered-toggle {
	cursor: pointer;
}


.thank-you-message {
	border-radius: 15px;
	background-color: #C4F1BE;
	text-align: center;
	padding: 15px;
	margin-top: 50px;
}


.phone-icone-inline {
    vertical-align: middle;
    margin-left: 25px;
    font-size: 20px;
    color: #B2B2B2;
}

.mini-odkaz-poptavka {
	font-size: 12px;
    font-weight: 800;
    color: var(--color-accent);
}

.homepage-top-image-mobil {
	display: none;
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
   
.homepage-top-left {
	display: none;
}

.homepage-top-right {
	padding-left: 0;
}


.homepage-top-button {
  display: inline-flex; /* Use flexbox for layout */
  align-items: center; /* Center align items vertically */
  justify-content: space-between; /* Push text and icon to edges */
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
}

.homepage-top-button i {
  display: inline-block;
}

.homepage-top-container {
	margin: 0;
	padding: 0;
}


.homepage-top-image-mobil {
	display: block;
	margin-bottom: 0;
}


.stepkonfigurator-configurator-section {
	flex-direction: column;
	padding: 15px 15px 55px 15px;
}
.navigator-configurator-section {margin: 0 auto; width: 100%; gap: 25px;}

.stepkonfigurator-configurator-section h2 {
    font-size: 22px;
    margin-top: 10px;
}

.homepage-configurator-image-wrapper, .navigator-configurator-image-wrapper {
  display: flex; /* Použijte flexbox pro zarovnání */
  justify-content: flex-end; /* Umístěte obsah doprava */
  margin-top: 25px;
}

.homepage-configurator-main-image, .navigator-configurator-main-image {
	  width: 100%; /* Nastavte obrázku poloviční velikost */
  height: auto; /* Zachovejte poměr stran obrázku */
}

.homepage-configurator-info-box{
    left: 0;
    bottom: -25px;
    max-width: 225px;

    padding: 15px 15px 0 15px;

}

.navigator-configurator-info-box {
    left: 25px;
    bottom: -25px;
    max-width: 225px;
    padding: 15px 15px 0 15px;

}

.stepkonfigurator-configurator-custom-select, .stepkonfigurator-configurator-submit-btn {
	max-width: 100%;
}


.navigator-configurator-main-image {
    margin-top: -100px;
}

.navigator-configurator-right {flex: 1;} 

.homepage-search-image img {
	margin-right: 50px;
	width:100%;
	margin-bottom: 0;
	    top: 0;
    left: 0;
}

.homepage-search-field button {

    gap: 30px;
}

.katalog-form-container {
	    grid-template-columns: 1fr;

}

.katalog-form-right {
    justify-content: center;

}

.katalog-image-container {
    position: relative;
    top: 0;
    left: 0;
    width: 50%;
}

.katalog-badge {
    position: relative;
    bottom: 0;
    left: 0;

    padding: 10px 25px 10px 25px;

    width: 80%;
    margin: -50px auto 0 auto;
}

.katalog-form-box {
	margin-top: 50px;
}

.katalog-grid-vypis-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.katalog-grid-vypis-title {
    margin-top: 50px;
    margin-bottom: 25px;
}

.single-co-nabizime-jednotky-right .green-button {
	display: block;

}

.mobile-tablet-info-section .info-item {
font-size: 16px!important;}

.tab-content{
    max-width: 90%;
    margin: 0 auto;
}

.modely-slider-glide .glide__slide .modely-aut-main-image  {
    height: 150px;
}

.modely-slider-glide .glide__slide .modely-grid-vypis-attribute-one-left {
    text-align: center;
}
.tablet {
	display: block;
}

.single-co-nabizime-jednotky-left {
	display: none;
}

.single-co-nabizime-jednotky-right {
	width: 100%;
	padding-left: 0;
}

.cenadesc {
	margin-bottom: 25px;
}

.telnum {
	display: flex;
	align-items: center;
	gap: 10px;
}

.telnum-phone {
	display: flex;
	align-items: center;
	gap: 5px;
}


.konfigurace-jak-zacit-description-box {
	left: -50px;
	bottom: -50px;

}

.konfigurace-jak-zacit-description-text {
	margin-bottom: 0;
}


.konfigurace-title {

    margin-top: 0px;
}

.konfigurace-info-box {
	padding: 15px;
}

.konfigurace-text {
	margin-bottom: 25px;
}

.konfigurator-desc-section-right {
    align-content: center;
}

.konfigurator-desc-section-wrapper {
	margin: 0 auto;
}

.konfigurator-end-section-wrapper {
	margin: 0 auto 50px auto;}

.konfigurator-end-right-column {
	padding-left: 0;
}

.konfigurace-jak-zacit-poptavka-section {
	margin: 50px auto;
}

.registrace-form-section {
	padding: 15px;
}

.registrace-form-submit {
	width: 100%;
}

}


@media (max-width: 767px) {
    .modely-slider-glide .glide__slide .modely-aut-main-image
    {
        height: 150px;
    }
    .single-produkt .brand-section-two {
       display: none;
    }
.quote-text {
    font-size: 14px;
    text-align: center;

}
	.homepage-configurator-info-box h4 {
    font-size: 10px;
    color: rgba(0, 0, 0, 0.35);
}


.homepage-configurator-info-box p {
	font-size: 10px;

}

.homepage-configurator-info-box {
	width: 150px;

}
    
.homepage-top-left {
	display: none;
}

.homepage-top-right {
	padding-left: 0;
}

.homepage-top-right h1 {
	font-size: 32px;
}

.homepage-top-button {
  display: inline-flex; /* Use flexbox for layout */
  align-items: center; /* Center align items vertically */
  justify-content: space-between; /* Push text and icon to edges */
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
}

.homepage-top-button i {
  display: inline-block;
}

.homepage-top-container {
	margin: 0;
	padding: 0;
}

.homepage-top-image-mobil {
	        display: flex
;
        margin-bottom: 0;
        width: 60%;
        justify-self: end;
        margin: 50px auto 0 auto;
}

.homepage-top-section {
	padding-bottom: 0;
}


.stepkonfigurator-configurator-section  {
	flex-direction: column;
	padding: 15px 25px 55px 25px;
}


.stepkonfigurator-configurator-section h2, .navigator-configurator-section h2 {
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 20px;
}

.homepage-configurator-image-wrapper, .navigator-configurator-image-wrapper {
  display: flex; /* Použijte flexbox pro zarovnání */
  justify-content: space-between; /* Umístěte obsah doprava */
  margin-top: 25px;
          margin-bottom: -125px;
          width: 100%;

}

.homepage-configurator-main-image, .navigator-configurator-main-image {
    width: 100px;
    height: 100%;
    padding: 0;
}


.homepage-configurator-info-box, .navigator-configurator-info-box {
    left: auto;
    bottom: auto;
    max-width: auto;

    padding: 15px 15px 0 15px;

}

.brand-section {
padding: 0;
background: none;
box-shadow: none;
margin-top: 150px;
margin-bottom: 0;
}


.homepage-categories-grid-section {
	padding-top: 50px;
}

.homepage-categories-grid-link {
    font-size: 14px;
    padding: 0 10px;

}

.homepage-search-container {
	padding: 25px 0 50px 0;
}

.homepage-search-section {
	margin-top: 50px;
	margin-bottom: 0;
}

.homepage-search-field button {

    gap: 20px;
    font-size: 14px;
}

.page-title  {
	text-align: left;
	width: 100%;

}

.page-desc {
    width: 100%;
    text-align: left;
    margin-top: 25px;
    color: #000;
    font-weight: 700;
    font-size: 14px;
}

.navigator-configurator-section {

    flex-direction: column;
    margin-top: 50px;
    padding: 15px 15px 55px 15px;
}

.navigator-configurator-main-image {
	margin-top: 0px;
}

.katalog-form-box {
    padding: 15px 15px 50px 15px;
    margin-top: 50px;
    margin-bottom: 100px;

}

.katalog-form-container {
    grid-template-columns: 1fr;
            padding-bottom: 40px;

}

.katalog-form-left {
	padding: 0;
}

.poptavka-inline-row {
    flex-direction: column;
}

.poptavka-inline-upload-inner p {
    margin-bottom: 15px;
    font-weight: 800;
    text-align: left;
}

.poptavka-inline-footer {
    flex-direction: column-reverse;
}

.poptavka-inline-submit {
    width: 100%;
    text-align: center;
}

.poptavka-inline-left-column {
    margin-right: 0;
}

.katalog-image-container {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;

}

.poptavka-inline-footer {

    gap: 20px;
}

.katalog-badge {
    position: relative;
    bottom: 0;
    left: 0;

    padding: 10px 25px 10px 25px;

    width: 80%;
    margin: -50px auto 0 auto;
}

.gallery-section {
	margin-top: 50px;
}

.katalog-grid-vypis-title {

    margin-bottom: 25px;
    margin-top: 25px;
    font-size: 15px;
}

.katalog-grid-vypis-pagination {
	flex-direction: column;
}

.katalog-two-top-container {
	gap: 0;
}

.modely-two-top-container {
	gap: 0;
}

.modely-two-top-container-model {
	gap: 0;
	margin-bottom: 25px;
	margin-top: 0;
}

.homepage-categories-grid-section {
	padding-bottom: 0px;

}

.page-template-page-katalog .homepage-categories-grid-section {
	padding-top: 50px;
}

.single-co-nabizime-jednotky-container {
flex-direction: column-reverse;
}

.single-produkt .single-co-nabizime-jednotky-container  {
flex-direction: column-reverse;
margin-top: 0;
}

.single-co-nabizime-jednotky-right {
	width: 100%;
	padding-left: 0;
}

.single-co-nabizime-jednotky-right .green-button {
	display: block;

}
.cenadesc {
	margin-bottom: 25px;
}

.telnum {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.telnum .green-button {
	width: 100%;
}

.telnum-phone {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.telnum-phone .phone-icone-inline {
	margin-left: 0;
}

.mobil {
	display: block;
}

.single-co-nabizime-jednotky-left {
	width: 100%;
    padding-right: 0;

}

.single-co-nabizime-jednotky-container .single-co-nabizime-jednotky-left,.single-co-nabizime-jednotky-container-next  .single-co-nabizime-jednotky-attributes {

    display: none;
}
.single-co-nabizime-jednotky-container-next {
    flex-direction: column;
}



.custom-box .attribute-value {
    padding-left: 0px;
    padding-top: 10px;
}

.custom-box {
    padding: 20px;
    margin-bottom: 0;
}

/* Show mobile version, hide desktop version on mobile */
.custom-box-desktop {
    display: none;
}

.custom-box-mobile {
    display: block;
    overflow: visible;
    margin: 60px 0 30px;
    
}

.custom-box-mobile .custom-box-content {
    display: flex;
    align-items: center;
    position: relative;
}

.custom-box-mobile .custom-text {
    flex: 1;
    padding-right: 90px; /* space for the image */
}

.custom-box-mobile .custom-image-mobile {
    position: absolute;
    right: -15px;
    top: -80px;
    bottom: -10px;
}

.custom-box-mobile .custom-image-mobile img {
    height: 120%;
    width: auto;
    object-fit: contain;
}


.slick-prev {
    left: 20px!important;
    z-index: 500;
}

.slick-next {
    right: 25px!important;
    z-index: 500;
}

.poptavkovy-formular-container, #rating-form-wrapper {
width: 90%;
margin: 0 auto;
}

 .konfigurace-title {
 	margin-top: 0;
 	font-size: 20px;
 }

 .jak-zacit-product-image {
 	display: none;
 }

.jak-zacit-right-column {
	display: none;
}

.jak-zacit-blob-container .homepage-top-image-mobil {
	margin-bottom: 0;
	border-radius: 50px;
	 margin: 50px auto 0 auto;
	 width: 80%;
	 z-index: 50;
}

.konfigurace-text {
    font-size: 12px;
    color: #000;
    width: 100%;
    font-weight: 600;
    margin-bottom: 0;
}

.konfigurace-jak-zacit-description-box {
    position: relative;
    left: 0;
    bottom: 0;
    max-width: 200px;
    margin: -325px auto 0 auto;
}

.konfigurace-info-box {

    padding: 12px;
    width: 100%;
    margin-top: 140px;
}

.quote-section {

    width: 100%;
    margin: 50px auto 50px auto;
}

.konfigurace-typy-section {
flex-direction: column;
}

.konfigurace-typy-column {
	padding: 0;
	    align-items: start;
}

.konfigurace-typy-column h3 {
	margin-top: 0;
	font-size: 18px;
}

.konfigurace-typy-section {
	margin-bottom: 0;
}

.konfigurace-jak-zacit-poptavka-section {
	margin: 50px auto;
}

.jak-zacit-steps-button {
text-align: center;
margin-right: 0;
}

.konfigurator-desc-section-right {display: none;}

.konfigurator-desc-section-wrapper  {
	margin: 0 auto;
}

.konfigurator-desc-section-title {
	margin-top: 0;
	font-size: 18px;
	text-align: center;
}



.konfigurator-end-section-wrapper {
	flex-direction: column;
	margin: 50px auto;
	gap: 25px;
}

.konfigurator-end-right-column {
	padding-left: 0;
}

.jak-zacit-steps-button-contact-wrapper {
	flex-direction: column-reverse;
	margin-top: 0px;

}
.jak-zacit-steps-button {
	margin-top: 25px;
}

.konfigurator-end-right-text {
    font-weight: 400;
    text-align: center;
    font-size: 14px;

}


.jak-zacit-info-box {
	width: 100%;
	padding: 15px;
}

.jak-zacit-steps-text-col {
	padding-left: 0;
}

.jak-zacit-steps-number-col {
	width: 100%;
}


.jak-zacit-steps-image-container {
	flex: 1;
	justify-items: end;
}

.jak-zacit-steps-number-col {
	margin-bottom: 0;
}

.jak-zacit-steps-image-col {
	display: none;
}

.jak-zacit-steps-row {
	margin-bottom: 0;
	padding-bottom: 0;
}

.jak-zacit-poptavka-section {
    margin: 25px auto;

}

.jak-zacit-end-text-box {
	padding: 15px;
}

.jak-zacit-end-section {
    padding: 0;

}

.registrace-main-container {
	margin-top: 0;
}

.registrace-form-section {
	padding: 15px;
}

.registrace-main-container {
	flex-direction: column-reverse;
}

.registrace-vyhody-section {
	padding: 0;
}


.registrace-vyhody-section .jak-zacit-product-image
 {
	display: block;
	left: 50px;
}

.registrace-vyhody-section .jak-zacit-description-box {
	bottom: -50px;
}

.registrace-info-section-top-text {
	margin: 50px auto;
}

.registrace-form-submit {
	width: 100%;
}

.page-id-98491 .katalog-grid-vypis-container {
	margin: 50px auto;
}

.page-id-98491   .katalog-grid-vypis-container {
        grid-template-columns: 1fr 1fr;
    }

    .page-id-98491   .katalog-grid-vypis-container-last {
        grid-template-columns: 1fr;
    }

 .page-id-98491  .katalog-grid-vypis-image-wrapper {

    height: auto;

}

.badge-brand-mobil {
    position: absolute;
    top: 0;
    left: 0;
    width: 75px !important;
    height: auto !important;
    z-index: 10;
}

.katalog-seznam-kategorii-grid-container {

    grid-template-columns: repeat(1, 1fr);

    margin-bottom: 50px;
}

.katalog-seznam-kategorii-item-left {

    width: 75px;
    height: 75px;

}


   .blob-poptavka .jak-zacit-product-image {
        display: block;
    }

.site-header {
	display: none;
}


.mobile-br {
	display: inline-block;
}
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {


	.site-header {display: none;}
    .page-id-98491 .katalog-grid-vypis-container {
        display: grid
;
        grid-template-columns: repeat(1, 1fr);
        gap: 25px;
    }

    .badge-brand-mobil {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px !important;
    height: auto !important;
    z-index: 10;
}

.page-title, .page-desc {
    width: 100%;

}

.katalog-seznam-kategorii-grid-container {

    grid-template-columns: repeat(2, 1fr);

    margin-bottom: 0px;
}

}


.otrock-2 {
    text-decoration: underline;
    text-decoration-color: #F8B44E;
    text-decoration-thickness: 2px;
}

.mobile-header {
    width: 100%;
    background-color: #f5f5f5;
}

.mobile-top-row {
    display: flex;
    align-items: center;
    height: 75px;
    background-color: #ffffff;
    gap: 20px;
}

.mobile-logo-container {
    flex: 1;
    padding-left: 15px;
    display: flex;
    align-items: center;
}

.mobile-logo {
    max-height: 50px;
    width: auto;
}

.mobile-menu-icon-container {
    width: 75px;
    height: 75px;
    background-color: #FEF4E6;
    display: flex;
    border-radius: 0 0 0 10px;
    justify-content: center;
    align-items: center;
}

.mobile-menu-icon {
    max-width: 50%;
    max-height: 50%;
}

.mobile-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #ffffff;
}

.mobile-left-button {
    padding: 10px 10px;
    font-size: 12px;
    border: none;
    font-weight: 700;
    border-radius: var(--radius-btn);
    cursor: pointer;
    background-color: #FEF4E6;
    color: #000;
}

.mobile-right-button {
    padding: 10px 10px;
    font-size: 12px;
    border: none;
    font-weight: 700;
    border-radius: var(--radius-btn);
    cursor: pointer;
    background-color: #F0B053;
    color: #FFF;
}

.mobile-left-button:hover,
.mobile-right-button:hover {
    background-color: #28a745;
    color: #FFF;
}

/* Skrytý overlay a menu */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 1000;
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100%;
    background-color: #ffffff;
    padding: 20px;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 1001;
}

/* Hlava menu */
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.mobile-menu-logo {
    max-height: 50px;
    width: auto;
}

.mobile-menu-close {
    max-height: 30px;
    width: auto;
    cursor: pointer;
}

/* Aktivní stav */
.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu-header-logo {
	height: 50px;
}



@media (max-width: 767px) {


	.stepkonfigurator-configurator-select-arrow-right i {
margin-top: 30px;
font-size: 14px;
}

.stepkonfigurator-configurator-label-inside {
	font-size: 11px;
}

.header-search {
	margin: 0 ;
}

.custom-search input[type="text"] {
    width: 100%;
    padding: 10px 30px 10px 15px; /* Padding na text i místo pro ikonu */
    border: 1px solid #ccc; /* Šedý okraj */
    border-radius: var(--radius-input); /* Zaoblené rohy */
    font-size: 12px;
    color: #000; /* Černý text při psaní */
    outline: none; /* Odstranění modrého okraje při zaměření */
    box-sizing: border-box;
}

.custom-search button {
    position: absolute;
    top: 50%;
    right: 10px; /* Nastavení polohy ikony vpravo */
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    height: 15px; /* Přizpůsobení velikosti ikoně */
    width: 15px;
}

}


/* Styly pro seznam menu */
.mobile-menu-items {
    margin-top: 20px;
}

.mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}


.mobile-menu-list li a {
    text-decoration: none;
    color: #000;
    font-size: 16px;
    font-weight: 800;
    flex: 1;
            display: flex;

        justify-content: space-between;
}

.mobile-menu-list li img {
    max-width: 20px;
    max-height: 20px;
    margin-left: 10px;
    cursor: pointer;
}

/* Položky menu */
.mobile-menu-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
}




.menu-arrow {
    max-width: 20px;
    max-height: 20px;
    margin-left: 10px;
}

/* Odkaz na registraci */
.mobile-register-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    color: #000;
    font-weight: 800;
    padding: 10px 0;
    margin: 20px 0;
    position: relative;
    background-color: #fff;
    z-index: 1;
}

/* Šedý horní a dolní border */
.mobile-register-link::before,
.mobile-register-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #ccc;
    z-index: -1;
}

.mobile-register-link::before {
    top: 0;
}

.mobile-register-link::after {
    bottom: 0;
}

/* Ikonka a text */
.mobile-register-icon {
    max-width: 20px;
    max-height: 20px;
    margin-right: 10px;
}

.mobile-register-text {
    font-size: 16px;
    font-weight: bold;
}

/* Kontejner pro obrázek a text */
.mobile-image-text-row {
    display: flex;
    align-items: center;
    background-color: #fff;
}

/* Obrázek nalevo */
.mobile-row-image {
    max-width: 50px;
    max-height: 50px;
    margin-right: 15px;
}

/* Text napravo */
.mobile-row-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Nadpis */
.mobile-row-title {
    font-size: 14px;
    font-weight: 800;
    margin: 0;
    color: #000;
}

/* Podnadpis */
.mobile-row-subtitle {
    font-size: 12px;
    color: #A5A5A5;
    margin: 5px 0 0 0;
}

.mobile-wrap-kontakt {
	border: 1px #ccc solid;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	padding: 10px 0;
	margin: 20px 0;
	display: flex;
	flex-direction: column;

}

.mobile-wrap-kontakt a {
	color: #000;
	display: flex;
	padding: 5px 0;
}


@media only screen and (max-width: 1024px) and (min-width: 768px) {

	.katalog-grid-vypis-item {
		justify-content: start;
	}

	.katalog-grid-vypis-item-title {
		margin: 0 0 10px 0;
	}

	.katalog-grid-vypis-image-wrapper {
		height: auto;
	}



	.modely-aut-grid-item {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #fff;
    display: grid
;
    grid-template-columns: 30% 70%;
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 12px 15px;
            align-items: center;
}

.modely-aut-brand-image img {
    height: 50px;
    width: 100%;
}

.modely-aut-title-last {
	text-align: left;
}

.model-bot {
	text-align: left;
}

.modely-aut-sku, .modely-aut-sku-value {
	text-align: left;
}

.modely-aut-bottom-link-category {
	text-align: left;
	margin-bottom: 10px;

}

.gap50 {
    gap: 25px;
}

.modely-aut-title-variant {
	width: 100%;
	text-align: left;
}

.modely-grid-vypis-item-title-model {
	margin-top: 0;
	text-align: left;
}

	.modely-grid-vypis-item {
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card); 
    padding: 12px 15px;
    text-align: left;
    display: grid;
    grid-template-columns: 10% 50% 40%;
    height: 100%; 
          align-items: center;
}

	.modely-grid-vypis-item-model {
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card); 
    padding: 12px 15px;
    text-align: left;
    display: grid;
    grid-template-columns: 10% 90%;
    height: 100%; 
          align-items: center;
}

.modely-grid-vypis-image {
	width: 30px;
}

.modely-grid-vypis-container {
	gap: 15px;
}

.modely-grid-vypis-item-title {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    text-align: left;
}
.modely-grid-vypis-link-main {
	  font-size: 14px;
	text-align: left;
}

.modely-cena {
	color: var(--color-price);
}

.modely-cena-last {
	color: var(--color-price);
}

.modely-grid-vypis-attributes {
    text-align: left;
    display: flex
;
    flex-direction: column;
    column-gap: 10px;
    margin-bottom: 0;
}


.modely-grid-vypis-attribute-one {
    font-size: 12px;
    color: #000;
    text-align: right;
}

.modely-grid-vypis-attribute-one-left {

    text-align: left;
}

.modely-grid-vypis-image-wrapper {
	justify-content: start;
}

 .modely-grid-vypis-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .modely-aut-title-main {
    	font-size: 18px;
    	padding: 0 10px;
    	margin-top: 25px;
    	margin-bottom: 50px;
    }

    .otrock-step {
    	font-size: 14px;
    }
        .model-two-top-left-three {
    	display: none;
    }


    .model-two-top-left-three.mobil {
    	display: flex;
    }


    .modely-aut-subtitle-main {
   
    	font-size: 16px;
    }

        .modely-aut-subtitle-main-model {
   
    	font-size: 16px;
    }

.model-odsazeni {
	padding-left: 0;
}
	

	.mobile-top-row {height: auto}

	.h2home {
    margin-top: 50px;
}

.homepage-search-container {
	padding-bottom: 50px;
	padding-top: 50px;
}

.homepage-hero-button-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    row-gap: 25px;
    margin-top: 50px;
}


}
.mobile-only-br {
	display: none;
}

@media (max-width: 767px) {
	.info-section-top-text {
   
    font-weight: 400;

}
		.desktop {
		display: none;
	}

	.poptavkovy-formular-group input[type="text"], .poptavkovy-formular-group input[type="email"], .poptavka-inline-group input[type="text"], .poptavka-inline-group input[type="email"] {
		font-size: 12px;
	}
.navigator-configurator-select-display {
	width: 100%;
}

.navigator-configurator-custom-select {
	width: 90%;

}
 .navigator-configurator-section h2 {
	margin-bottom: 0;
}

.navigator-configurator-section {
	width: 100%;
	gap: 25px;
}
	.homepage-search-field input::placeholder {
    color: #000; /* Placeholder text color */
    font-size: 12px;
    font-weight: 800;
    opacity: 1;
}


	.mobile-only-br {
		display: inline-block;
	}

	.homepage-configurator-info-box {
		position: static;
		height: fit-content;
	}

	.katalog-form-container .homepage-configurator-info-box {
		height: auto;
	}

.homepage-hero-button-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    row-gap: 25px;
    margin-top: 50px;
}

.homepage-top-subtitle {
    margin-bottom: 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.56);
    line-height: 20px;
    width: 75%;
    font-weight: 600;

}

.h2home {
    margin-top: 50px;
    font-size: 14px;
}

.homepage-hero-button-container span, .homepage-top-button-new, .stepkonfigurator-configurator-submit-btn  {
	font-size: 14px;
}

.homepage-top-button-new {
	width: 80%;
	margin: 0 auto;
  font-family: var(--font-meta);
	padding: 15px 0;
}

.stepkonfigurator-configurator-submit-btn i {font-size: 20px;}

.homepage-postup-text h2, .homepage-categories-grid-section h2 {
	font-size: 20px;
	text-align: center;
}

 .brand-section-title {
	font-size: 16px;
	text-align: center;
	font-weight: 500;
}

.brand-section-two .brand-section-title {
	font-size: 12px;
	text-align: center;
	font-weight: 800;
	color: rgba(0, 0, 0, 0.35);
}


.brand-section-two a {
color: rgba(0, 0, 0, 0.35);
font-weight: 800;
	font-size: 12px;
}

  .brand-section-two  .brand-row-mobil {

        padding-bottom: 0;

    }

.brand-section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgba(0, 0, 0, 0.35);
}

.brand-section-title .brand-title-arrow {
    display: none;
}

.brand-section-title .brand-title-link {
    display: none;
}

.brand-section-link-mobile {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.35);
    text-align: center;
    text-decoration: underline;
    margin-top: 10px;
}

.homepage-categories-grid-title {
	font-size: 20px;
	text-align: left;
	margin: 0 30px 25px 30px;
}

.homepage-postup-text p {
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	color: #F8B44D;
}

.homepage-postup-title a  {
	font-size: 18px;
}

.homepage-postup-icon {
	width: 50px;
	height: 50px;
}
.homepage-postup-icon img {
		width: 25px;
	height: 25px;

}

.vyhody-title {
	font-size: 16px;
}

.katalog-form-box h3 {
	font-weight: 800;
	font-size: 16px;
	text-align: center;
}

.poptavka-inline-label {
	color: var(--color-label-muted);
	font-size: 11px;
	font-weight: 400;
}

/* File upload area */
.poptavka-inline-upload {

    padding: 25px;
}
.poptavka-inline-upload-inner {
 flex-direction: row;
 gap: 50px;

}

.poptavka-inline-footer-text {
	display: none;
}

.katalog-grid-vypis-badge {
	display: none;
}

.katalog-grid-vypis-link-main {
	font-size: 14px;
	font-weight: 800;
	line-height: 1.3!important;
}

.katalog-grid-vypis-link-main-model {
	font-size: 14px;
	font-weight: 700;


}

.katalog-grid-vypis-item-title {
	text-align: left;
	margin: 0;
}


.katalog-grid-vypis-attributes {
    text-align: left;
    display: flex
;
    flex-direction: column;
    column-gap: 12px;
    margin-bottom: 0px;
}

.modely-grid-vypis-attributes {
    text-align: left;
    display: flex
;
    flex-direction: column;
    column-gap: 10px;
    margin-bottom: 0;
}

.katalog-grid-vypis-attribute-one {
    font-size: 12px;
    display: inline;
}

.modely-grid-vypis-attribute-one {
    font-size: 12px;
    color: #000;
    text-align: right;
}

.modely-grid-vypis-image-wrapper {
	justify-content: start;
}

.page-id-98491 .katalog-form-box {
	margin-top: 50px;
}
.katalog-grid-vypis-attribute-velikost {
	margin-top: 0;
}

.katalog-grid-vypis-attribute {
    font-size: 8px;
    font-weight: 700;
}

.katalog-grid-vypis-link {
	display: none;
}


.katalog-grid-vypis-image-wrapper {
	 	height: auto;
}

.katalog-grid-vypis-item {
    justify-content: start;
        flex-direction: row;
}

.modely-grid-vypis-item {
    justify-content: start;
}

.modely-grid-vypis-item-model {
    justify-content: start;

}

/* --- Mobile layout: obrázek vlevo (fix šířka), text vpravo (1fr) --- */
.katalog-grid-vypis-item {
  display: grid;                 /* grid = nejčistší */
  grid-template-columns: 96px 1fr;/* fixní levý sloupec, pravý roztáhnout */
  gap: 15px;                      /* mezera mezi sloupci */
  align-items: stretch;           /* stejné vertikální natažení */
      padding: 15px;
}

/* levý sloupec – čtvercový box, všechny obrázky stejně velké */
.katalog-grid-vypis-image-wrapper {
  width: 96px;
  aspect-ratio: 1 / 1;           /* drží čtverec */
  overflow: hidden;
  height: 100%;
}

.katalog-grid-vypis-image-wrapper img {
  width: 100%;
  height: 100%;
  display: block;
}

/* pravý sloupec – stack textů */
.katalog-grid-vypis-content {
        display: flex
;
        grid-template-rows: auto 1fr;
        min-height: 96px;
        flex-direction: column;
        justify-content: space-between;  /* title nahoře, atributy vyplní zbytek */
  min-height: 96px;               /* vizuální vyrovnání výšky itemu */
}


}



.konfigurator-desc-section-left p {
	margin-bottom: 40px;
	width: 75%;
}

.mojeh2 {
	font-size: 18px;
	font-weight: 400;
	text-align: center;
	margin-top: 50px;
}
.page-template-page-co-nabizime-phase-2 .katalog-two-top-right-inner p, .conabizimeprelast .katalog-two-top-right-inner p{ 
			color: #898989;

}

@media (max-width: 768px) {
.katalogmobilgrid {
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}
	.page-template-page-co-nabizime-phase-2 .katalog-two-top-title, .conabizimeprelast .katalog-two-top-title {
		text-align: left;
	}

	.cenadesc {
	font-weight: 500;
	color: #A5A5A5;
	margin-bottom: 50px;
	font-size: 11px;
	font-family: var(--font-meta);
}
.page-template-page-co-nabizime-phase-2 .katalog-grid-vypis-item, .conabizimeprelast .katalog-grid-vypis-item {
	        grid-template-columns: 50px 1fr;
}

 .page-template-page-co-nabizime-phase-2   .katalog-grid-vypis-image-wrapper, .conabizimeprelast  .katalog-grid-vypis-image-wrapper{
        width: 50px;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        height: 100%;
    }

   .page-template-page-co-nabizime-phase-2  .katalog-grid-vypis-link-main, .conabizimeprelast .katalog-grid-vypis-link-main {
        font-size: 14px;
        font-weight: 800;
        line-height: 1.3 !important;
    }


	.page-template-page-co-nabizime-phase-2 .katalog-two-top-right-inner p, .conabizimeprelast .katalog-two-top-right-inner p {
		text-align: left;
		color: #898989;
		font-size: 14px;
		font-weight: 600;
	}

	.page-template-page-co-nabizime-phase-2 .katalog-two-top-image, .conabizimeprelast  .katalog-two-top-image{
		width: 50%;
		margin: 0 auto;
	}
	.page-template-page-co-nabizime-phase-2 .katalog-two-top-title, .conabizimeprelast .katalog-two-top-title {
		font-size: 25px;
	}
	.homepage-search-content h2 {
		font-size: 17px;
		margin-top: 0;
	}

	.contact-form-label {
		font-size: 14px;
	}

	.homepage-blog-badge {
		font-size: 11px;
	}

	.vyhody-icon {
		margin-left: 25px;
	}
	.glide-kategorie  {
		padding-top: 0;
		padding-bottom: 50px;
		
	}
  .otrock-categories-slider .glide__slides {
    display: flex;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 5%;
      padding-right: 30px;
  }

  .otrock-categories-slider .glide__slide {
    width: calc(100% / 2.5);
    flex-shrink: 0;
    padding-right: 10px;
    box-sizing: border-box;

  }

 .homepage-categories-grid-section.mobil h2{ padding-left: 30px; padding-right: 30px;

  }

}

.glide-kategorie .homepage-categories-grid-link {
	font-size: 10px;
	font-weight: 800;
}


.glide-kategorie .homepage-categories-grid-item {
	box-shadow: 0px 5px 10px #00000029;
border-radius: var(--radius-card);
min-height: 200px;

}

.glide-kategorie  .homepage-categories-grid-image {
	border: 0;
}
.konfig-link:hover {
    text-decoration: none;

}
@media (max-width: 767px) {
.totalcount {

    font-size: 12px;}

.modely-grid-vypis-item {
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card); 
    padding: 12px 15px;
    text-align: left;
    display: grid;
    grid-template-columns: 15% 45% 40%;
    height: 100%; 
          align-items: center;
}

.modely-grid-vypis-item-model {
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card); 
    padding: 12px 15px;
    text-align: left;
    display: grid;
    grid-template-columns: 15% 85%;
    height: 100%; 
    align-items: center;
}




.modely-grid-vypis-image {
	width: 30px;
}

.modely-grid-vypis-container {
	gap: 15px;
}

.modely-grid-vypis-item-title-model {
	text-align: left;
	margin-top: 0;
}

.modely-aut-grid-item {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #fff;
    display: grid
;
    grid-template-columns: 40% 60%;
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 12px 15px;
            align-items: center;
}

.modely-aut-brand-image img {
    height: 25px;
    width: 100%;
}

.modely-aut-title-last {
	text-align: left;
}

.model-bot {
	text-align: left;
}

.modely-aut-sku, .modely-aut-sku-value {
	text-align: left;
}

.modely-aut-bottom-link-category {
	text-align: left;
	margin-bottom: 10px;

}

.gap50 {
    gap: 25px;
}

.modely-aut-title-variant {
	width: 100%;
	text-align: left;
}

.modely-grid-vypis-item-title {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    text-align: left;
}


.modely-grid-vypis-link-main {
	  font-size: 14px;
	text-align: left;
}

.modely-cena {
	color: var(--color-price);
}


.model-two-top-image-model {
	width: 50%;
	margin: 0 auto 50px auto;

}


	.konfigurator-desc-section-left p {
text-align: center;
    width: 100%;
    font-size: 12px;
} 
.konfigurator-desc-section-image-container {
	text-align: center;
}
  .glide-blog .glide__slides {
    display: flex;
    padding: 20px 30px;
  }

  .glide-blog .archive-blog-readmore {
  	display: none;
  }

  .glide-blog .glide__slide {
    width: calc(100% / 1.5);
    flex-shrink: 0;
    padding-right: 15px;
    box-sizing: border-box;
  }

  .homepage-blog-section h2 {
  	padding: 0;
  }

  .homepage-blog-section.mobil h2 {
padding: 0;
font-size: 16px;
  }
  .page-template-page-konfigurace .mojeh2  {
  	font-size: 16px;

  }

  .glide-blog  .homepage-blog-item {
  	min-height: 450px;
  	    justify-content: start;
  }

  .glide-blog .homepage-blog-excerpt {
  	font-size: 9px;
  }

  .glide-blog .homepage-blog-title{
  	font-size: 14px;
  }

  .homepage-blog-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }

  .homepage-blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    display: block;
  }
}

@media (max-width: 1024px) {

  .page-template-page-konfigurace .mojeh2  {
  	font-size: 16px;
  	margin-bottom: 50px;

  }

  .glide-gallery .glide__slide {
    width: calc(100% / 2); /* zobrazí 2 celé a část 3. */
    flex-shrink: 0;
    box-sizing: border-box;
  }

  .glide-gallery .gallery-item img {
    width: 100%;
    border-radius: 16px;
    display: block;
  }

  .gallery-section.mobil h2 {
    padding: 0 30px;
  }
  .mobile-tablet-info-section {
    display: flex;
    gap: 20px;
    margin-top: 50px;
    flex-direction: column;

}

.rating-stars-small-top {
    margin-bottom: 40px;
}

.single-co-nabizime-jednotky-container {
  margin-top: 20px;
}
}
.poptavka-button .green-button {
    font-size: 18px;
    font-weight: 700;

}

.poptavka-button .green-button:hover {    
    text-decoration: none;


}
/* Mobile/Tablet info section - two columns */


.mobile-tablet-info-section .attribute-icon {
flex: 0 0 40px;
}

.mobile-tablet-info-section .attribute-content {
    padding-left: 20px;
    text-decoration: underline;
        
}
.mobile-tablet-info-section .icon-circle {
    width: 40px;
    height: 40px;
}

.mobile-tablet-info-section  .icon-circle i {
    font-size: 20px;

    
}

.mobile-tablet-info-section .info-item {
    display: flex;
    align-items: center;
    gap: 0px;
    flex: 1;
    font-size: 18px;
    color: #F0B053;
    font-weight: 700;
}

.mobile-tablet-info-section .info-item  .konfig-link {
      color: #F0B053;
}

/* Glide slider - PC version boxed with shadow padding */
.product-slider-glide {
    position: relative;
    padding:0;
    margin: 0;
}

.product-slider-glide .glide__track {
    overflow: visible;
    padding: 0;
}

/* Slides container */
.product-slider-glide .glide__slides {
    align-items: stretch;
    padding: 0;
}

/* Individual slide */
.product-slider-glide .glide__slide {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    padding: 0px;
}

/* Card inside slide - must fill entire li height */
.product-slider-glide .glide__slide .katalog-grid-vypis-item {
    flex: 1 1 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    box-sizing: border-box;
    box-shadow: none!important;
        border: 1px solid #EFEFEF;
}

.product-slider-glide .glide__slide .katalog-grid-vypis-image-wrapper {
    width: 100% !important;
    height: 150px !important;
    flex-shrink: 0;
 
}

.product-slider-glide .glide__slide .katalog-grid-vypis-content {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0;
    gap: 0 !important;
    justify-content: flex-start !important;
}

.product-slider-glide .katalog-grid-vypis-item-title, .product-slider-glide .katalog-grid-vypis-attributes {
    text-align: center;
}

.product-slider-glide .katalog-grid-vypis-item-title {
    display: flex;
    align-items: flex-start;
}



/* Slider section container - boxed on PC like .main-container */
.dalsi-kategorie-slider .slider-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.dalsi-kategorie-slider .product-slider-glide,
.tab-container .product-slider-glide {
    overflow: hidden;
}

@media (max-width: 768px) {
    /* Full width on mobile */
    .dalsi-kategorie-slider .slider-container {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .dalsi-kategorie-slider .slider-headline {
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
        padding-bottom: 15px;
    }

    .dalsi-kategorie-slider .product-slider-glide,
    .tab-container .product-slider-glide {
        width: 100%;
        overflow: hidden;
    }

    .dalsi-kategorie-slider .glide__track,
    .tab-container .glide__track {
        overflow: visible;
    }

    .product-slider-glide .katalog-grid-vypis-attribute-velikost {
        margin-top: 20px;
    }
}

/* Glide slider for modely-aut cards */
.modely-slider-glide {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.modely-slider-glide .glide__track {
    overflow: visible;
    padding: 0;
}

.modely-slider-glide .glide__slides {
    align-items: stretch;
    padding: 0;
}

.modely-slider-glide .glide__slide {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    padding: 0px;
}

.modely-slider-glide .glide__slide > div {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
}

.modely-slider-glide .glide__slide .modely-aut-grid-item {
    flex: 1 1 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    box-sizing: border-box;
    margin-bottom: 0;
    box-shadow: none;   
    border: 1px solid #EFEFEF;  
}

.modely-slider-glide .glide__slide .modely-aut-main-image-wrapper {
    width: 100% !important;
    height: 100% !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modely-slider-glide .glide__slide .modely-aut-main-image {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.modely-slider-glide .glide__slide .model-bot {
    display: flex !important;
    flex-direction: column !important;
    flex: 1;
    min-height: 0;
}

.modely-slider-glide .modely-aut-title-last,
.modely-slider-glide .modely-aut-title-variant,
.modely-slider-glide .modely-aut-sku,
.modely-slider-glide .modely-aut-sku-value,
.modely-slider-glide .modely-grid-vypis-attributes {
    text-align: center;
}

.modely-slider-glide .modely-aut-bottom-link-category.desktop {
    display: block;
    text-align: center;
    margin-top: auto;
    padding-top: 10px;
}

.modely-slider-glide .modely-aut-bottom-link-category.mobil {
    display: none;
}

.tab-container .modely-slider-glide {
    overflow: hidden;
}

@media (max-width: 768px) {
    .tab-container .modely-slider-glide {
        width: 100%;
        overflow: hidden;
    }

   .modely-slider-glide  .modely-grid-vypis-attribute-one  {
    text-align: center;
   }

    .modely-slider-glide .glide__slide .modely-aut-grid-item {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
    }
}

/* Glide slider arrows - desktop only, centered below slider */
.glide .glide__arrows {
    display: none;
}

@media (min-width: 1025px) {
    .glide .glide__arrows {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin-top: 20px;
        position: static;
    }

    .glide .glide__arrow {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: #FEF4E6;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        padding: 0;
        margin: 0;
        transition: background-color 0.2s ease;
        box-shadow: none;
        text-transform: none;
        text-shadow: none;
        opacity: 1;
    }

    .glide .glide__arrow:hover {
        background-color: #fde9cc;
    }

    .glide .glide__arrow i {
        color: var(--color-accent);
        font-size: 16px;
        line-height: 1;
    }

    .glide .glide__arrow[disabled] {
        opacity: 0.35;
        cursor: default;
        pointer-events: none;
    }
}

.single-produkt .brand-section-two {
    width: 80%;
    margin: var(--spacing-section-vertical) auto;
}



@media (max-width: 1024px) {
    .single-produkt .brand-section-two {
        width: 100%;
    }

    .search-result-part-two-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: stretch;
    margin-bottom: 35px;
}

.search-blog-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 0 auto;
    margin-bottom: 50px;
}
}

.entry-title a {
    color: #000;
    text-decoration: none;
}

i.entry-title-search-icon {
    color: var(--color-accent) !important;
    font-size: 14px;
    vertical-align: middle;
    margin-left: 4px;
}

/* mp-flow — mobile/tablet section reorder pro konečné produkty (3 pipeline).
   Mechanismus:
   - .mp-flow je flex column container (gap:30px = default mezera mezi sekcemi)
   - .main-container drží svůj box (width:90%/max-width:1200/margin:0 auto) a sama
     je flex column gap:30px → flattened items se uvnitř seřadí podle [data-mp-order]
   - vnitřní wrappery (.single-co-nabizime-jednotky-container[-next], -left, -right,
     -attributes) mají display:contents → jejich box mizí, děti se stávají flex
     potomky .main-container (kvůli tomu funguje order napříč původními wrappery)
   - [data-mp-order] dostane CSS variabilní order, .poptavkovy-formular-container
     a #overlay jdou na konec (order:999)

   Cílené úpravy mezer mezi konkrétními dvojicemi sekcí se řeší přidáním
   margin-top/-bottom na konkrétní [data-mp-order="X"] níže v tomto bloku
   (gap:30px je baseline, jednotlivé override jsou níže).
*/
@media (max-width: 1024px) {
    .mp-flow {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        overflow-x: hidden;
    }
    /* .main-container nesmí mít display:contents (jinak zmizí padding boků).
       Místo toho je sám flex column kontejner, drží svůj 90% width.
       gap záměrně chybí — mezery se řídí margin-bottom jednotlivých sekcí níže. */
    .mp-flow .main-container {
        display: flex;
        flex-direction: column;
    }
    .mp-flow .single-co-nabizime-jednotky-container,
    .mp-flow .single-co-nabizime-jednotky-container-next,
    .mp-flow .single-co-nabizime-jednotky-left,
    .mp-flow .single-co-nabizime-jednotky-right,
    .mp-flow .single-co-nabizime-jednotky-attributes {
        display: contents;
    }
    .mp-flow [data-mp-order] {
        order: var(--mp-order, 0);
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    .mp-flow .poptavkovy-formular-container,
    .mp-flow #overlay {
        order: 999;
    }
    .mp-flow .post-thumbnail:not(.mobil):not(.tablet) {
        display: none;
    }

    /* Mobil/tablet variants — show on celý mp-flow viewport (≤1024), ne jen ≤768.
       Místo broad `.mp-flow .mobil { display:block }` cílíme jen konkrétní elementy
       s jejich PŮVODNÍM display value, aby se nepřebíjely vlastní flex/inline layouty
       (např. .modely-aut-bottom-link-category.mobil je <a>, chce zůstat inline). */
    .mp-flow .gallery-section.mobil            { display: block; }
    .mp-flow .post-thumbnail.mobil             { display: block; }
    .mp-flow .mobile-tablet-info-section.mobil { display: flex;  }
    .mp-flow .desktop {
        display: none;
    }

    /* === Per-section margin-bottom ===
       Každá sekce má svoji vlastní mezeru pod sebou. Default 30px.
       Tunit znamená změnit číslo na konkrétním řádku — žádné negativní hry s gap.
       Pro "žádná mezera pod sekcí" stačí dát 0.
    */
    .mp-flow .breadcrumbs              { margin-bottom: 0; }
    .mp-flow .thank-you-message        { margin-bottom: 30px; }
    .mp-flow [data-mp-order="1"]       { margin-bottom: 0; }
    .mp-flow [data-mp-order="2"]       { margin-bottom: 0; }
    .mp-flow [data-mp-order="3"]       { margin-bottom: 0; }
    /* mp=4 (button) a mp=5 (phone-wrap) jsou na tabletu uvnitř .telnum-row wrapperu
       (flex row), takže margin-bottom 0 zde — vnější mezera je na samotném
       .mp-flow .telnum-row (margin-bottom:30px). Na phone se ale wrapper rozplyne
       (display:contents) a button/phone se stanou samostatnými flex children — tehdy
       potřebují vlastní margin-bottom, viz @media (max-width:768) níže. */
    .mp-flow [data-mp-order="4"]       { margin-bottom: 0; }
    .mp-flow [data-mp-order="5"]       { margin-bottom: 0; }
    .mp-flow [data-mp-order="6"]       { margin-bottom: 30px; margin-top: 30px; margin-left: 0; margin-right: 0; }
    .mp-flow [data-mp-order="7"]       { margin-bottom: 30px; }
    .mp-flow [data-mp-order="8"]       { margin-bottom: 30px; }
    /* Gallery (mobil) full-bleed: width:100vw + negativní margin vyruší padding
       rodičovského .main-container. Pravidlo je v .mp-flow @media bloku jen kvůli
       organizaci — samotná regule je NEzávislá na .mp-flow scope a aplikuje se
       na všechny stránky kde existuje .gallery-section.mobil uvnitř .main-container.
       Viz globální duplicate níže v @media (max-width: 1024px). */
    .mp-flow .gallery-section.mobil {
        margin-top: 0;  /* mp-flow-specific: žádná mezera nad galerií (mp=8 mB:30 ji už dělá) */
    }
    .mp-flow [data-mp-order="9"]       { margin-bottom: 30px; }
    .mp-flow [data-mp-order="10"]      { margin-bottom: 30px; }
    .mp-flow [data-mp-order="11"]      { margin-bottom: 0; }
    .mp-flow [data-mp-order="12"]      { margin-bottom: 30px; margin-top: 50px;}
    .mp-flow [data-mp-order="13"]      { margin-bottom: 30px; }
    .mp-flow [data-mp-order="14"]      { margin-bottom: 30px; }
    .mp-flow [data-mp-order="15"]      { margin-bottom: 30px; }
    .mp-flow [data-mp-order="16"]      { margin-bottom: 30px; }

     .mp-flow [data-mp-order="3"]  .attribute-item-new {

    margin-top: 0px;
}
}

/* Phone (≤768) override: na phone se .telnum-row stává display:contents,
   button (mp=4) a phone-wrap (mp=5) se stanou samostatnými flex-children
   main-containeru. Restoruje se jejich margin-bottom (na tabletu byly 0
   protože byli uvnitř flex-row wrapperu s vnějším marginem). */
@media (max-width: 768px) {
    .mp-flow [data-mp-order="4"] { margin-bottom: 30px; }
    .mp-flow [data-mp-order="5"] { margin-bottom: 30px; }
}

/* .telnum-row — wrapper kolem button (mp=4) + phone-wrap (mp=5).
   Důvod: commit bc1a803 rozdělil původní <div.telnum> na dvě sourozenecké divy,
   tím se rozbilo flex zarovnání button + phone na desktopu.
   Cíl: button + phone INLINE na všech viewportech (desktop, tablet, phone).
   Wrapper sám má `order: 4` v mp-flow (tj. pozice mezi mp=3 a mp=5+) — uvnitř
   wrapperu mp=4 a mp=5 určují pořadí button → phone (zhoduje se s DOM source). */
.telnum-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
/* Tablet (769–1024) v mp-flow: telnum-row zůstává flex row (button+phone inline),
   sedí na pozici 4 v parent flex column, s vlastním margin-bottom. */
@media (max-width: 1024px) {
    .mp-flow .telnum-row {
        order: 4;
        margin-bottom: 30px;
    }
}
/* Phone (≤768) v mp-flow: .telnum má .telnum { flex-direction:column } a
   .green-button { width:100% } (řádek 8364), což by vyrušilo inline layout.
   Proto na phone udělat wrapper display:contents — button (mp=4) a phone-wrap
   (mp=5) se stanou samostatnými flex-children main-containeru, každý na vlastní
   řádce v column. Jejich margin-bottom restorujeme níže v per-section pravidle. */
@media (max-width: 768px) {
    .mp-flow .telnum-row {
        display: contents;
    }
}

/* Gallery (mobil) full-bleed na všech stránkách — ne jen mp-flow.
   Předtím sklad.php zavíral main-container před gallery.mobil aby měla
   přirozeně full šíři. Teď je gallery uvnitř main-container (pro mp-order
   reorder), takže ji vytahujeme zpět negativním marginem na všech stránkách. */
@media (max-width: 1024px) {
    .gallery-section.mobil {
        width: 100vw;
        max-width: none;
        margin-left: calc((100% - 100vw) / 2);
        margin-right: calc((100% - 100vw) / 2);
    }
}

/* iOS Safari zoomne na focus inputu s font-size < 16px → force 16px na mobilu = žádný zoom.
   Catch-all přes typy inputů + !important, protože specifičtější pravidla
   (např. `.poptavka-inline-group input[type="text"]` = 12px @767, ř. ~9423)
   jinak úzký fix přebíjela. Pokrývá poptávkové i inline formuláře i header search.
   Klient bod 3 — přepsáno na komplexní 2026-06-19. */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="password"],
    input[type="url"],
    input:not([type]),
    textarea {
        font-size: 16px !important;
    }
}

body.home .brand-section-title,
body.home .brand-section-link-mobile {
    display: none;
}

@media (max-width: 768px) {
    body.home .brand-section {
        padding: 0;
        background: none;
        box-shadow: none;
        margin-top: var(--spacing-section-vertical);
        margin-bottom: 0;
    }
}

/* === Dokumenty page === */
.dokumenty-section {
    margin: 40px 0 80px;
}
.dokumenty-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 50px;
}
.dokumenty-title {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #000;
}
.dokumenty-subtitle {
    font-size: 16px;
    color: #555;
    margin: 0;
}
.dokumenty-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.dokumenty-card {
    background: #fef0e0;
    border-radius: var(--radius-card);
    padding: 30px 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}
.dokumenty-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.dokumenty-card-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #000;
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(247, 162, 35, 0.25);
}
.dokumenty-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.dokumenty-card-list li {
    position: relative;
    padding-left: 22px;
    line-height: 1.4;
}
.dokumenty-card-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F7A223'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 7V3.5L18.5 9H13z'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
}
.dokumenty-card-link {
    font-size: 14px;
    color: #000;
    font-weight: 500;
}

@media (max-width: 1024px) {
    .dokumenty-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .dokumenty-title {
        font-size: 28px;
    }
    .dokumenty-section {
        margin: 20px 0 60px;
    }
    .dokumenty-header {
        margin-bottom: 30px;
    }
}
@media (max-width: 768px) {
    .dokumenty-card {
        padding: 24px 22px;
    }
    .dokumenty-title {
        font-size: 24px;
    }
}

/* Footer-bottom Dokumenty link */
.footer-bottom-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(247, 162, 35, 0.6);
    text-underline-offset: 3px;
}
.footer-bottom-link:hover {
    color: var(--color-accent);
}
.footer-bottom-sep {
    opacity: 0.4;
    margin: 0 4px;
}
/* P3 modely-aut: mezera nad mřížkou produktů (náhrada za inline margin-top:100px v pluginu — VK-P3SEP) */
.modely-vysledky-separator {
    margin-top: 100px;
}

@media (max-width: 1024px) {
    .modely-vysledky-separator {
        margin-top: 20px;
    }
}