/* Block Styles */
/* Block: video */
.mb-96 { margin-bottom: 96px;} .video-block { background-color: #f1f5f9; height: 500px; } .video-container { width: 100%; height: 100%; aspect-ratio: 16 / 9; overflow: hidden; max-height: 500px; position: relative; } .video-element { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; z-index: 0; } /* Overlay for centering logo + text */ .video-overlay { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; /* stack vertically */ justify-content: center; align-items: center; text-align: center; padding: 2rem; color: #fff; background: rgba(0, 0, 0, 0.3); /* optional dark overlay */ } /* Logo styling */ .video-logo { margin-bottom: 1.25rem; /* space below logo */ } .video-logo svg { max-width: 500px; width: 100%; height: auto; } /* Text below logo */ .video-copy { max-width: 700px; } .video-hero-heading { font-weight: 700; letter-spacing: 4px; margin-bottom: 0.75rem; font-size: 1.4rem; } .video-hero-text { font-size: 1.1rem; line-height: 1.6; opacity: 0.9; } /* Hide native controls by default */ .video-element::-webkit-media-controls { display: none !important; } .video-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; background-color: rgba(241, 245, 249, 0.8); } /* Shared drop shadow style */ .video-overlay .video-logo, .video-overlay .video-hero-heading, .video-overlay .video-hero-text { text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); } /* Optional — if the logo is an SVG, also add a filter for crisper shadow edges */ .video-logo svg { filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); } @media (max-width: 991px) { .video-logo svg { max-width: 190px; } .video-hero-heading { font-weight: 700; letter-spacing: 3px; font-size: 20px; } .video-hero-text { font-size: 17px; line-height: 1.6; opacity: 0.9; } }

/* Block: paragraph_image */
.mb-96 { margin-bottom: 96px; } .paragraph-image-block { background-color: #ffffff; margin-left: auto; margin-right: auto; } .paragraph-image-block.paragraph-image-border { padding-left: 30px; padding-right: 30px; } .paragraph-image-block.paragraph-image-border > .paragraph-image-container { padding-top: 30px; padding-bottom: 20px; } .paragraph-image-container { margin: 0 auto; display: flex; align-items: center; gap: 3rem; } /* Desktop - Image position handling */ @media (min-width: 992px) { .paragraph-image-container.image-left { flex-direction: row; } .paragraph-image-container.image-right { flex-direction: row-reverse; } } .paragraph-image-border { border: 1px solid #d1d5db; border-radius: 0.75rem; } .paragraph-image-text { flex: 1; } .paragraph-image-image { flex: 1; } .paragraph-image-title { font-size: 1.875rem; font-weight: 700; margin-bottom: 1rem; color: #0f172a; } .paragraph-image-content { font-size: 1rem; color: #64748b; line-height: 1.625; } .paragraph-image-content > p { margin-bottom: 0; } .paragraph-image-content:last-child { margin-bottom: 0; } .paragraph-image-content:not(:last-child) { margin-bottom: 1.5rem; } .paragraph-image-image-container { border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; } .paragraph-image-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.5rem; } .paragraph-image-cta { display: inline-flex; align-items: center; justify-content: center; width: 221px; height: 56px; background-color: #e50026; color: #ffffff; font-size: 20px; font-weight: 600; text-decoration: none; border-radius: 33px; transition: background-color 0.3s ease, transform 0.2s ease; cursor: pointer; } .paragraph-image-cta:hover { color: #ffffff; background-color: #c4001f; transform: translateY(-2px); } /* Mobile styles - stack image above text on screens smaller than 992px */ @media (max-width: 991px) { .paragraph-image-container { flex-direction: column !important; gap: 2rem; } .paragraph-image-image { width: 100%; flex: none; } .paragraph-image-text { width: 100%; flex: none; } /* Adjust title size for mobile */ .paragraph-image-title { font-size: 1.5rem; } .paragraph-image-content p { font-size: 0.9rem; line-height: inherit; } .paragraph-image-block.paragraph-image-border > .paragraph-image-container { margin-bottom: 0; } .paragraph-image-cta { margin-top: 5px; font-size: 1rem; padding: 0.8rem 1.6rem; } }

/* Block: product_carousel */
.mb-96 { margin-bottom: 96px; } .product-carousel-container { overflow: hidden; text-align: center; background-color: transparent; //max-width: 72rem; max-width: 100%; margin-left: auto; margin-right: auto; } .carousel-title { font-size: 36px; font-weight: 700; margin-bottom: 6px; color: #0f172a; } .carousel-subTitle { font-size: 18px; margin-bottom: 6px; color: #5f5f5f; } .carousel-wrapper { position: relative; max-width: 1400px; margin: 40px auto 0 auto; text-align: left; } .carousel-track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #9ca3af #e5e7eb; padding-bottom: 1rem; } .carousel-track::-webkit-scrollbar { height: 6px; } .carousel-track::-webkit-scrollbar-track { background: #e5e7eb; border-radius: 3px; } .carousel-track::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 3px; } .carousel-track::-webkit-scrollbar-thumb:hover { background: #6b7280; } .product-card { background-color: #ffffff; border: 1px solid #d9d9d9; border-radius: 16px; display: flex; flex-direction: column; max-width: 340px; width: 100%; min-width: 306px; z-index: 1; } .product-card:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .product-link { text-decoration: none; color: inherit; display: block; flex-grow: 1; } .product-link:hover { text-decoration: none; } .product-image { aspect-ratio: 1; overflow: hidden; position: relative; padding: 10px 10px; } .product-image img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.2s ease; transform: scale(0.8); } .product-card:hover img { transform: scale(0.9); } .placeholder-image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .placeholder-icon { width: 3rem; height: 3rem; color: #9ca3af; } .product-info { padding: 1.3rem; display: flex; flex-direction: column; gap: 0; } .product-name { font-size: 20px; font-weight: 400; color: #111827; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-anotace { font-size: 16px; color: #6b7280; margin: 0; } .product-price { font-size: 26px; font-weight: 700; color: #000000; margin: 0.9rem 0 0 0; } .product-actions { position: relative; width: 100%; padding: 0 1.3rem 1.3rem 1.3rem; } .btn-cart-icon { border: 1px solid #e50026; border-radius: 50px; background-color: transparent; color: #e50026; font-family: 'Figtree', sans-serif; font-weight: 600; font-size: 18px; line-height: normal; padding: 10px 32px; height: 52px; width: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .btn-cart-icon:hover { background-color: #e50026; color: #ffffff; } /* Mobile responsive */ @media (max-width: 768px) { .product-carousel-container { padding: 2rem 1rem; } .carousel-title { font-size: 1.5rem; margin-bottom: 2rem; } .product-card { flex: 0 0 200px; } } @media (max-width: 991px) { .carousel-title { font-size: 1.5rem; } .product-name { font-size: 18px; } .product-anotace { min-height: 35px; } .product-card { min-width: 230px; } }

/* Block: highlights */
.highlights-block { position: relative; padding: 4rem 2rem; overflow: hidden; margin-bottom: 4rem; } .highlights-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 1; } .highlights-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 2; } .highlights-container { position: relative; z-index: 10; max-width: 72rem; margin: 0 auto; } .highlights-title { font-size: 1.875rem; font-weight: 700; margin-bottom: 3rem; text-align: center; color: white; } .highlights-item-title { color: white; } .highlights-grid { display: flex; flex-wrap: wrap; justify-content: center; /* vycentrování při méně položkách */ gap: 1.5rem; } .highlights-item { flex: 1 1 200px; /* šířka bloku, automaticky se zalamuje */ max-width: 250px; text-align: center; } .highlights-icon { width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; position: relative; } .highlights-icon img { width: 3rem; height: 3rem; object-fit: contain; } .highlights-description { font-size: 0.875rem; color: #979798; line-height: 1.6; } @media (max-width: 992px) { .highlights-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 768px) { .highlights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }