@import url("./pages.css");
@import url("./cart.css");
/* ==========================================================================
ESHOP CSS (theme-ready, layout separated)
- HTML: jen struktura + semantické třídy
- CSS: barvy, spacing, layout, responsivita, komponenty
========================================================================== */
/* ==========================================================================
1) FONT / GLOBAL DEFAULTS
========================================================================== */
:root {
--font-main: "Montserrat", sans-serif;
--page-footer-gap: 96px;
}
body.eshop {
font-family: var(--font-main);
background: var(--bg);
color: var(--text);
min-height: 100vh;
display: flex;
flex-direction: column;
}
body.eshop main {
flex: 1 0 auto;
}
.eshop-footer {
margin-top: auto;
}
body.eshop.has-hero-bg {
background:
linear-gradient(rgba(10, 12, 14, 0.55), rgba(10, 12, 14, 0.55)),
url("../images/eshop-bg.jpg") center/cover no-repeat;
}
body.eshop.has-hero-bg main {
background: transparent;
}
body.eshop.has-hero-bg .productlist-hero-overlay {
opacity: 0;
}
body.eshop.has-hero-bg .productlist-hero {
background: transparent;
}
body.eshop.has-hero-bg .contact-hero-shell {
background: transparent;
}
body.eshop.has-hero-bg .contact-hero-overlay {
/*opacity: 2;*/
background: rgba(0, 0, 0, 0.6);
}
/* ==========================================================================
2) THEME TOKENS (design tokens)
- Přepínání tématu: , případně theme-light
========================================================================== */
body.eshop {
/* Base */
--bg: #ffffff;
--text: #212529;
/* Accent */
--accent: #A8B741;
--accent-contrast: #000;
/* Navbar */
--navbar-height: 80px;
--navbar-bg: #1f1f1f;
--navbar-text: #ffffff;
--navbar-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
/* Offcanvas */
--offcanvas-bg-hover: rgba(0, 0, 0, .03);
/* Dropdown */
--dropdown-bg: #1f1f1f;
--dropdown-text: #ffffff;
--dropdown-hover-bg: rgba(255, 255, 255, 0.12);
/* Footer */
--footer-bg: #1f1f1f;
--footer-text: #bbb;
--footer-link: #bbb;
--footer-link-hover: #fff;
/* Hero */
--hero-text: #ffffff;
--hero-overlay: rgba(0, 0, 0, 0.45);
/* Content */
--content-text: #212529;
/* Components */
--card-text: #212529;
--select-radius: 0.75rem;
--shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.10);
--product-card-padding: 18px;
/* Promo badge tokens */
--promo-badge-bg: rgba(155, 178, 0, 0.95);
--promo-badge-text: #ffffff;
}
body.eshop.theme-light {
--navbar-bg: #ffffff;
--navbar-text: #212529;
--dropdown-bg: #ffffff;
--dropdown-text: #212529;
--dropdown-hover-bg: rgba(0, 0, 0, 0.06);
--footer-bg: #f5f5f5;
--footer-text: #444;
--footer-link: #444;
--footer-link-hover: #000;
--hero-overlay: rgba(0, 0, 0, 0.35);
}
/* ==========================================================================
3) LAYOUT HELPERS
========================================================================== */
.pt-navbar {
padding-top: var(--navbar-height);
padding-bottom: var(--page-footer-gap);
}
.pt-navbar:has(> section:first-child.index-hero),
.pt-navbar:has(> section:first-child.productlist-hero) {
padding-bottom: 0;
}
/* Container maximum width (nezávislé na Bootstrapu) */
.eshop-container {
max-width: 1280px;
margin: 0 auto;
padding-inline: 1.25rem;
}
/* ==========================================================================
4) NAVBAR (desktop + mobile)
========================================================================== */
.eshop-navbar {
background: var(--navbar-bg);
box-shadow: var(--navbar-shadow);
height: var(--navbar-height);
}
/* Full-width inner wrapper: brand zarovnaný doleva (s paddingem) */
.eshop-navbar-inner {
max-width: 1600px;
margin: 0 auto;
width: 100%;
height: 100%;
display: flex;
align-items: center;
padding-inline: 1.25rem;
white-space: nowrap; /* nezalamovat */
overflow: visible; /* když je to dlouhé */
text-overflow: ellipsis; /* … na konci */
}
/* Brand: smí se zmenšovat, aby nevytlačil menu */
.eshop-navbar-brand {
color: var(--navbar-text);
text-decoration: none;
font-weight: 600;
letter-spacing: 0.2px;
line-height: 1.2;
font-size: 1.3rem;
white-space: nowrap;
flex: 0 0 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 0.75rem;
}
.eshop-navbar-brand:hover {
color: var(--navbar-text);
opacity: 0.9;
}
/* obal loga */
.eshop-navbar-logo {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
/* samotné logo – držet v rámci navbaru */
.eshop-navbar-logo img {
height: calc(var(--navbar-height) - 18px); /* cca přes oba řádky */
max-height: 62px; /* pojistka */
width: auto;
display: block;
}
/* textový blok (2 řádky) */
.eshop-navbar-brand-text {
display: flex;
flex-direction: column;
line-height: 1.1;
min-width: 0; /* umožní zkracování při nedostatku místa */
}
/* hlavní řádek */
.eshop-navbar-title {
display: block;
font-weight: 600;
letter-spacing: 0.2px;
}
.eshop-navbar-slogan {
display: block;
font-size: 0.875rem;
opacity: 0.85;
line-height: 1.15;
}
/* Desktop nav wrapper */
.eshop-navbar-nav {
display: none; /* zobrazuje se až na desktopu */
margin-left: auto; /* tlačí menu doprava */
flex: 0 0 auto;
}
/* Menu list: držet na jednom řádku */
.eshop-navbar-list {
display: flex;
align-items: center;
gap: 1.5rem;
list-style: none;
margin: 0;
padding: 0;
flex-wrap: nowrap;
white-space: nowrap;
}
.eshop-nav-link {
background: none;
border: 0;
color: var(--navbar-text);
text-decoration: none;
font-weight: 500;
font-size: 1.15rem;
cursor: pointer;
}
.eshop-nav-link:hover {
color: var(--navbar-text);
opacity: 0.9;
}
/* Caret pro dropdown (přidej do šablony class "eshop-nav-link--dropdown") */
.eshop-nav-link--dropdown::after {
content: "";
display: inline-block;
margin-left: 0.4rem;
vertical-align: 0.15rem;
border-top: 0.35em solid currentColor;
border-right: 0.35em solid transparent;
border-left: 0.35em solid transparent;
}
/* Divider + cart */
.eshop-navbar-divider {
width: 1px;
height: 24px;
background: rgba(255, 255, 255, 0.4);
}
.eshop-navbar-cart a {
color: var(--navbar-text);
text-decoration: none;
font-weight: 500;
font-size: 1.15rem;
}
.eshop-navbar-cart a:hover {
color: var(--navbar-text);
opacity: 0.9;
}
/* Cart badge wrapper (icon + badge) */
.eshop-cart-icon-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
/* Badge */
.eshop-cart-badge {
position: absolute;
top: -8px;
right: -12px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--accent);
color: var(--accent-contrast);
font-size: 12px;
line-height: 18px;
text-align: center;
font-weight: 700;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
/* Dropdown (pure CSS hover) */
.eshop-nav-item--dropdown {
position: relative;
z-index: 2000;
}
.eshop-dropdown {
position: absolute;
top: 100%;
left: 0;
background: var(--dropdown-bg);
min-width: 220px;
list-style: none;
padding: 0.5rem 0;
margin: 0;
/* animation */
opacity: 0;
transform: translateY(6px);
visibility: hidden;
pointer-events: none;
transition: opacity 260ms ease, transform 260ms ease, visibility 200ms linear 160ms;
}
.eshop-nav-item--dropdown:hover .eshop-dropdown,
.eshop-nav-item--dropdown.is-open .eshop-dropdown {
display: block;
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
transition: opacity 260ms ease, transform 260ms ease, visibility 100ms;
}
.eshop-nav-item--dropdown.is-open {
z-index: 2100;
}
.eshop-dropdown-link {
display: block;
padding: 0.5rem 1rem;
color: var(--dropdown-text);
text-decoration: none;
}
.eshop-dropdown-link:hover {
background: var(--dropdown-hover-bg);
}
.eshop-nav-more .eshop-dropdown {
min-width: 240px;
}
/* "Více" dropdown: zarovnat doprava k tlačítku, aby se rozbaloval doleva */
.eshop-nav-more .eshop-dropdown {
left: auto;
right: 0;
z-index: 2000;
}
/* Položka ve dropdownu, která má submenu */
.eshop-dropdown-item--has-submenu {
position: relative;
z-index: 2000;
}
/* šipka doprava (jako webnode) */
.eshop-dropdown-link--parent {
display: flex;
align-items: center;
justify-content: space-between;
}
.eshop-dropdown-link--parent::after {
content: "›";
opacity: 0.8;
margin-left: 1rem;
}
/* Submenu (2. úroveň) – defaultně skryté */
.eshop-dropdown-submenu {
position: absolute;
top: 0;
left: 100%;
background: var(--dropdown-bg);
min-width: 240px;
list-style: none;
padding: 0.5rem 0;
margin: 0;
opacity: 0;
transform: translateX(6px);
visibility: hidden;
pointer-events: none;
transition: opacity 200ms ease, transform 200ms ease, visibility 120ms linear 120ms;
z-index: 2000;
}
/* Zobrazení submenu na hover */
.eshop-dropdown-item--has-submenu:hover > .eshop-dropdown-submenu,
.eshop-dropdown-item--has-submenu.is-open > .eshop-dropdown-submenu {
z-index: 2300;
opacity: 1;
transform: translateX(0);
visibility: visible;
pointer-events: auto;
transition: opacity 200ms ease, transform 200ms ease, visibility 0ms;
}
/* DŮLEŽITÉ: ve "Více" chceme 2. úroveň otvírat doleva, aby se neřezala o pravý okraj */
.eshop-nav-more .eshop-dropdown-item--has-submenu > .eshop-dropdown-submenu {
left: auto;
right: 100%;
transform: translateX(-6px);
}
.eshop-nav-more .eshop-dropdown-item--has-submenu:hover > .eshop-dropdown-submenu {
transform: translateX(0);
}
/* Active navbar items */
.eshop-nav-link.is-active,
.eshop-nav-item.is-active > .eshop-nav-link {
color: var(--accent);
/*opacity: 1;*/
/*text-decoration: underline;*/
/*text-underline-offset: 6px;*/
/*text-decoration-thickness: 2px;*/
}
/* Active dropdown parent (button) */
.eshop-nav-link.is-active-parent {
color: var(--accent);
/*opacity: 1;*/
/*text-decoration: underline;*/
/*text-underline-offset: 6px;*/
/*text-decoration-thickness: 2px;*/
}
/* Active dropdown child */
.eshop-dropdown-link.is-active {
color: var(--accent);
/*background: var(--dropdown-hover-bg);*/
/*font-weight: 400;*/
}
/* Mobile active link */
.eshop-offcanvas-link.is-active {
color: var(--accent);
background: var(--offcanvas-bg-hover);
/*font-weight: 400;*/
}
/* Mobile icons */
.eshop-navbar-actions {
display: flex;
gap: 1rem;
}
.eshop-navbar-actions--mobile {
/*display: flex;*/
margin-left: auto;
}
.eshop-navbar-icon {
background: none;
border: 0;
color: var(--navbar-text);
cursor: pointer;
padding: 0;
line-height: 1;
font-size: 1.5rem;
}
.eshop-navbar-icon:hover {
opacity: 0.9;
}
/* Desktop breakpoint */
@media (min-width: 992px) {
.eshop-navbar-actions--mobile {
display: none;
}
.eshop-navbar-nav {
display: block;
}
/* Volitelné: limit šířky brandu, aby se na menších desktopech lépe vešlo menu */
.eshop-navbar-brand {
max-width: 560px;
font-size: 1.7rem;
}
}
/* ==========================================================================
OFFCANVAS (mobile menu) – styled like original
========================================================================== */
.eshop-offcanvas {
max-width: 360px; /* působí podobně jako původní */
}
/* header */
.eshop-offcanvas-header {
padding: 1rem 1.25rem;
border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.eshop-offcanvas-title {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
}
/* list */
.eshop-offcanvas-list {
list-style: none;
margin: 0;
padding: 0;
}
/* row items */
.eshop-offcanvas-item {
border-bottom: 1px solid rgba(0, 0, 0, .08);
}
/* links as full-width rows */
.eshop-offcanvas-link {
display: flex;
align-items: center;
width: 100%;
padding: 1.05rem 1.25rem;
color: var(--text);
text-decoration: none;
font-weight: 600;
background: transparent;
}
.eshop-offcanvas-link:hover {
background: var(--offcanvas-bg-hover);
}
/* section toggle row */
.eshop-offcanvas-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
padding: 1.05rem 1.25rem;
background: transparent;
border: 0;
color: var(--text);
font-weight: 600;
cursor: pointer;
}
.eshop-offcanvas-toggle:hover {
background: var(--offcanvas-bg-hover);
}
/* label */
.eshop-offcanvas-label {
text-align: left;
}
/* chevron (right) */
.eshop-offcanvas-chevron {
width: 10px;
height: 10px;
border-right: 2px solid rgba(0, 0, 0, .45);
border-bottom: 2px solid rgba(0, 0, 0, .45);
transform: rotate(-45deg); /* ">" */
transition: transform 160ms ease, opacity 160ms ease;
opacity: 0.8;
}
/* expanded state: rotate down */
.eshop-offcanvas-item--open .eshop-offcanvas-chevron {
transform: rotate(45deg); /* "v" */
opacity: 1;
}
/* submenu */
.eshop-offcanvas-submenu {
list-style: none;
margin: 0;
padding: 0;
}
.eshop-offcanvas-subitem .eshop-offcanvas-link {
padding-left: 2.25rem; /* odsazení jako v původním */
font-weight: 600;
opacity: 0.9;
}
/* subtle section highlight (like original active-ish) */
.eshop-offcanvas-item--open > .eshop-offcanvas-toggle {
color: var(--accent);
background: var(--offcanvas-bg-hover);
}
.eshop-offcanvas-close {
width: 44px;
height: 44px;
background: none;
border: 0;
position: relative;
cursor: pointer;
}
.eshop-offcanvas-close::before,
.eshop-offcanvas-close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 2px;
background: rgba(0, 0, 0, .45);
transform-origin: center;
}
.eshop-offcanvas-close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.eshop-offcanvas-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.eshop-offcanvas-close:hover::before,
.eshop-offcanvas-close:hover::after {
background: rgba(0, 0, 0, .65);
}
/* ======================================================================
GLOBAL HERO – první full-width sekce pod navbarem
====================================================================== */
.pt-navbar > section:first-child {
min-height: calc(100vh - var(--navbar-height));
}
.pt-navbar:has(> section:first-child.productlist-hero) > section:first-child.productlist-hero {
min-height: clamp(420px, 55vh, 680px);
}
/* ==========================================================================
6) HERO (index)
========================================================================== */
.index-hero {
background-image: url("../images/eshop-bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.index-hero-overlay {
position: absolute;
inset: 0;
background: var(--hero-overlay);
z-index: 0;
}
.index-hero-content {
position: relative;
z-index: 1;
padding-block: 3rem;
text-align: center;
}
.index-hero-content h1,
.index-hero-content p {
color: var(--hero-text);
}
/* Optional: hero categories pills (pokud použiješ v šabloně) */
.index-categories {
margin-top: 1.5rem;
}
.index-categories .nav-link {
color: #eee;
border: 1px solid rgba(255, 255, 255, 0.3);
margin: 0 0.25rem;
}
.index-categories .nav-link:hover {
background: rgba(255, 255, 255, 0.15);
color: var(--hero-text);
}
.index-categories .nav-link.active {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-contrast);
}
.index-hero-header {
margin-bottom: 20px;
}
.index-hero-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
margin: 0 0 10px 0;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.index-hero-lead {
font-size: 1.15rem;
margin: 0;
opacity: 0.92;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.index-hero-text {
max-width: 980px;
margin: 18px auto 0;
font-size: 1.05rem;
line-height: 1.65;
opacity: 0.95;
}
.index-hero-text p {
margin: 0 0 12px 0;
}
.index-hero-actions {
margin-top: 22px;
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.index-hero-cta,
.index-hero-secondary {
padding: 12px 18px;
font-weight: 700;
}
/* =========================
PRODUCT LIST (Product grid)
========================= */
.productlist-hero {
background-image: url("../images/eshop-bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
padding-top: 32px;
padding-bottom: 56px;
}
/* overlay jako u index-hero (ponecháme stejný pattern) */
.productlist-hero-overlay {
position: absolute;
inset: 0;
background: var(--hero-overlay);
pointer-events: none;
}
.productlist-hero-inner {
position: relative;
z-index: 1;
}
.productlist-hero-header {
text-align: center;
margin-bottom: 40px;
}
.productlist-hero-title,
.productlist-hero-lead {
color: var(--hero-text);
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.productlist-hero-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
margin: 0 0 10px 0;
}
.productlist-hero-lead {
font-size: 1.15rem;
margin: 0;
opacity: 0.9;
}
.productlist-grid-wrap {
margin-top: 12px;
}
/* =========================
PHOTO GALLERY
========================= */
.photogallery-hero {
position: relative;
padding-bottom: 64px;
}
.photogallery-panel {
background: rgba(10, 10, 10, 0.72);
border-radius: 18px;
padding: 24px;
backdrop-filter: blur(6px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}
.photogallery-viewer {
margin-bottom: 18px;
}
.photogallery-figure {
position: relative;
margin: 0;
background:
radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.2) 55%),
linear-gradient(135deg, rgba(6, 6, 6, 0.95), rgba(28, 28, 28, 0.9));
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.15);
overflow: hidden;
aspect-ratio: 1600 / 1066;
}
.photogallery-main-image {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.photogallery-caption {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
padding: 8px 14px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
max-width: calc(100% - 24px);
text-align: center;
font-size: 1rem;
border-radius: 8px;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
white-space: nowrap;
}
.photogallery-caption.is-visible {
opacity: 1;
}
.photogallery-nav {
position: absolute;
inset: 0;
display: flex;
justify-content: space-between;
align-items: center;
pointer-events: none;
}
.photogallery-nav-btn {
pointer-events: auto;
border: none;
background: rgba(10, 10, 10, 0.45);
color: #fff;
font-size: 2rem;
line-height: 1;
width: 54px;
height: 64px;
border-radius: 10px;
margin: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 160ms ease, transform 160ms ease, opacity 160ms ease;
}
.photogallery-nav-btn:hover {
background: rgba(10, 10, 10, 0.7);
transform: translateY(-1px);
}
.photogallery-nav-btn:disabled {
opacity: 0.35;
cursor: default;
transform: none;
}
.photogallery-thumbs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}
.photogallery-thumb {
border: none;
padding: 0;
background: transparent;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
outline: none;
position: relative;
}
.photogallery-thumb-media {
display: block;
width: 100%;
aspect-ratio: 1600 / 1066;
background:
radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.2) 55%),
linear-gradient(135deg, rgba(6, 6, 6, 0.95), rgba(28, 28, 28, 0.9));
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.15);
overflow: hidden;
}
.photogallery-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 160ms ease;
}
.photogallery-thumb:hover img {
transform: translateY(-2px);
}
.photogallery-thumb:hover .photogallery-thumb-media {
border-color: rgba(255, 255, 255, 0.4);
}
.photogallery-thumb.is-active .photogallery-thumb-media {
border-color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 768px) {
.photogallery-panel {
padding: 18px;
}
}
/* ======================================================================
PRODUCT LIST – ABOUT block (intro pod nabídkou)
====================================================================== */
.productlist-about {
background: var(--bg);
color: var(--text);
padding: 64px 0;
}
.productlist-hero + .productlist-about {
padding-top: 36px;
}
/* =========================
CONTACT
========================= */
.page-contact {
background: transparent;
}
.contact-hero {
background: transparent;
color: var(--hero-text);
padding: 0 0 28px;
}
.contact-hero-shell {
position: relative;
background: url("../images/eshop-bg.jpg") center/cover no-repeat;
border-radius: 24px;
padding: 56px 36px;
overflow: hidden;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
width: 100%;
box-sizing: border-box;
}
.contact-hero-overlay {
position: absolute;
inset: 0;
background: var(--hero-overlay);
pointer-events: none;
}
.contact-hero-inner {
display: grid;
gap: 24px;
position: relative;
z-index: 1;
}
.contact-hero-title {
font-size: clamp(2rem, 4vw, 3rem);
margin: 0 0 10px;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.contact-hero-lead {
margin: 0 0 18px;
opacity: 0.9;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.contact-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.contact-hero-action {
display: inline-flex;
align-items: center;
padding: 10px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.16);
color: #fff;
text-decoration: none;
font-weight: 600;
border: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(6px);
}
.contact-hero-action:hover {
background: var(--accent);
color: var(--accent-contrast);
border-color: rgba(0, 0, 0, 0.1);
}
.contact-hero-card {
background: rgba(255, 255, 255, 0.98);
border-radius: 14px;
padding: 18px 20px;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 14px 26px rgba(0, 0, 0, 0.18);
border-top: 4px solid var(--accent);
color: #1b1b1b;
}
.contact-hero-card-title {
font-weight: 700;
margin-bottom: 6px;
}
.contact-hero-card-line {
opacity: 0.9;
}
.page-contact-map {
padding: 0 0 32px;
background: transparent;
}
.page-contact-map-inner {
width: 100%;
max-width: 100%;
margin: 20px 0 0;
padding: 0;
aspect-ratio: auto;
overflow: visible;
}
.page-contact-map-iframe {
position: static;
inset: auto;
display: block;
width: 100%;
height: clamp(320px, 40vw, 520px);
border: 0;
border-radius: 16px;
box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2);
}
.contact-map-cta {
display: flex;
justify-content: center;
margin: 12px auto 0;
}
.contact-cta-link {
padding: 12px 20px;
font-weight: 700;
}
.contact-grid {
display: grid;
gap: 18px;
padding: 24px 0 64px;
}
.contact-card {
background: #fff;
border-radius: 14px;
padding: 18px 20px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}
.contact-card-title {
font-weight: 700;
margin-bottom: 10px;
}
.contact-card-line {
margin-bottom: 8px;
}
.contact-card-line:last-child {
margin-bottom: 0;
}
.contact-card-line--tight {
margin-bottom: 6px;
line-height: 1.4;
}
.contact-card-cta {
margin-top: 14px;
display: flex;
justify-content: flex-start;
}
.contact-card-list {
margin: 0;
padding-left: 18px;
}
.contact-card-muted {
opacity: 0.75;
}
@media (min-width: 992px) {
.contact-hero-inner {
grid-template-columns: 1.4fr 0.8fr;
align-items: center;
}
.contact-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.page-contact-map-iframe {
height: clamp(360px, 36vw, 560px);
}
}
/* =========================
DOC PAGES (USEFUL INFO + TERMS)
========================= */
.page-docs {
--page-title-align: left;
--page-title-size: clamp(2rem, 3vw, 2.6rem);
--page-title-weight: 800;
--page-section-pad-y: 56px;
--prose-h2-margin-top: 1.9rem;
--prose-paragraph-gap: 0.9rem;
background: var(--bg);
}
.page-docs .page-header {
margin-bottom: 24px;
}
.page-docs .page-lead {
margin: 12px 0 0;
max-width: 72ch;
color: rgba(0, 0, 0, 0.72);
}
.page-docs--compact .page-header {
margin-bottom: 16px;
}
.faq-item + .faq-item {
margin-top: 24px;
}
.faq-answer > *:last-child {
margin-bottom: 0;
}
.content-cta-secondary {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
margin: 2px 0;
white-space: nowrap;
}
.productlist-about-title {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 800;
margin: 0 0 14px 0;
}
.productlist-about-text p {
margin: 0 0 12px 0;
line-height: 1.7;
max-width: 70ch;
margin-left: auto;
margin-right: auto;
}
/* responsivní rozložení: mobil = pod sebou, desktop = 2 sloupce */
.productlist-about-grid {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
align-items: start;
}
.productlist-about-text {
max-width: 860px;
margin: 0 auto;
}
.productlist-about-cta {
display: flex;
justify-content: flex-start;
}
.productlist-about-cta--center {
justify-content: center;
margin: 18px 0;
}
.productlist-about-btn {
font-weight: 800;
padding: 12px 18px;
}
@media (min-width: 992px) {
.productlist-about {
padding: 88px 0;
}
.productlist-about-grid {
grid-template-columns: minmax(0, 1fr);
gap: 32px;
align-items: start;
}
.productlist-about-cta {
justify-content: flex-end;
}
.productlist-about-cta--center {
justify-content: center;
}
}
.productlist-about-img {
display: block;
width: 100%;
height: auto;
border-radius: 14px;
max-width: 70ch;
margin: 16px auto;
object-fit: cover;
}
.productlist-about-img--intro {
margin-top: 12px;
}
.productlist-about-img--end {
margin-top: 20px;
}
/* mobil */
@media (max-width: 768px) {
.productlist-about-img--end {
max-width: 100%;
}
}
/* =========================
SIMPLE HEADER
========================= */
.page-header--compact {
text-align: center;
margin-bottom: 24px;
}
.page-lead {
margin: 10px 0 0;
opacity: 0.85;
}
/* =========================
PRODUCT GRID
========================= */
.product-grid {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(280px, 1fr)
);
gap: 24px;
justify-items: center;
}
/* Omezí maximální šířku karty */
.product-grid-item {
width: 100%;
max-width: 360px;
}
/* =========================
PRODUCT CARDS (grid)
========================= */
.product-card {
border-radius: 8px;
overflow: hidden;
min-width: 220px;
/* Default (no hover): transparent, no blur */
background: transparent;
backdrop-filter: none;
border: 0px solid rgba(255, 255, 255, 0.14);
box-shadow: none;
background: rgba(0, 0, 0, 0.28);
backdrop-filter: blur(2px);
border-color: rgba(255, 255, 255, 0.22);
transition: background 180ms ease,
backdrop-filter 180ms ease,
border-color 180ms ease,
transform 180ms ease;
}
/* Hover effects only on devices that actually support hover */
@media (hover: hover) and (pointer: fine) {
.product-card:hover {
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(2px);
border-color: rgba(255, 255, 255, 0.22);
/*transform: translateY(-10px);*/
transform: scale(1.05);
}
}
.product-card-media {
position: relative;
display: block;
padding: var(--product-card-padding, 18px);
}
.product-card-badge {
position: absolute;
top: calc(var(--product-card-padding, 18px) + 16px);
left: var(--product-card-padding, 18px);
z-index: 2;
background: var(--promo-badge-bg);
color: var(--promo-badge-text);
font-weight: 400;
font-size: 0.90rem;
padding: 4px 14px;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
pointer-events: none;
}
.product-card-image {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
border-radius: 8px;
}
.product-card-body {
padding: 0 18px 18px 18px;
text-align: center;
}
.product-card-title {
margin: 8px 0 6px 0;
font-size: 1.45rem;
font-weight: 700;
color: var(--hero-text);
}
.product-card-title-link {
color: inherit;
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.product-card-title-link:hover {
opacity: 0.92;
}
}
.product-card-price {
margin: 0;
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.85);
}
/* Hide the button area if the whole card is meant to be navigable */
.product-card-footer {
display: none;
}
/* ==========================================================================
8) FORMS
========================================================================== */
.form-select {
border-radius: var(--select-radius);
}
/* ==========================================================================
9) FOOTER
========================================================================== */
.eshop-footer {
background: var(--footer-bg);
color: var(--footer-text);
padding: 1.25rem 0;
}
.eshop-footer a {
color: var(--footer-link);
text-decoration: none;
}
.eshop-footer a:hover {
color: var(--footer-link-hover);
text-decoration: underline;
}
/* =========================
PRODUCT DETAIL
========================= */
.productdetail {
padding: 24px 0;
/* aby fixed CTA bar nepřekryl konec obsahu na mobilu */
padding-bottom: 92px;
padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
/* layout tokens pro detail */
--productdetail-gap: 24px; /* default mobile gap */
--productdetail-title-badge-gap: 8px; /* jak těsně má být badge pod title */
}
/* Mobile default */
.productdetail-grid {
display: flex;
flex-direction: column;
gap: var(--productdetail-gap);
}
/*
DŮLEŽITÉ pro pořadí na mobilu:
- v HTML je nadpis uvnitř .productdetail-info
- order funguje jen pro přímé děti flexu
-> "rozbalíme" .productdetail-info tak, aby se její děti chovaly jako přímé děti .productdetail-grid
*/
.productdetail-info {
display: contents;
}
/* Mobilní pořadí: Nadpis -> fotky -> zbytek */
.productdetail-title {
order: 1;
}
.productdetail-images {
order: 2;
}
/*
Primární (správná) varianta:
- zbytek pravého panelu obal do ...
*/
.productdetail-info-body {
order: 3;
}
/*
Fallback kdybys ještě NEMĚL .productdetail-info-body:
- zbytek pravého panelu se řadí přirozeně za title (order auto)
- pokud chceš 100% jistotu bez wrapperu, obal zbytek pravého panelu a dej mu tuto třídu:
...
*/
/* Základní prvky detailu (platí pro všechny šířky) */
.productdetail-mainimage {
width: 100%;
/*height: 500px;*/
display: block;
border-radius: 8px;
height: auto;
}
.productdetail-mainimagewrap {
position: relative;
}
.productdetail-imagealt {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
padding: 8px 14px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
max-width: 100%;
white-space: normal;
text-align: center;
font-size: 0.9rem;
line-height: 0.9;
white-space: nowrap;
font-weight: 500;
letter-spacing: 0px;
border-radius: 8px;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
.productdetail-imagealt.is-visible {
opacity: 1;
}
.productdetail-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 10px;
}
.productdetail-thumbbtn {
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.productdetail-thumbimg {
width: 100%;
height: 100%;
display: block;
border-radius: 8px;
object-fit: cover;
}
.productdetail-title {
margin: 0 0 10px 0;
font-size: 2rem;
font-weight: 700;
color: var(--content-text);
}
/* Badge: fit-content + řízené přiblížení k title */
.productdetail-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
background: var(--promo-badge-bg);
color: var(--promo-badge-text);
font-size: 0.95rem;
width: fit-content;
max-width: 100%;
/* kompenzace flex gap mezi title a badge */
margin-top: calc(var(--productdetail-title-badge-gap) - var(--productdetail-gap));
}
.productdetail-description {
margin-top: 14px;
color: var(--content-text);
}
.productdetail-separator {
height: 1px;
background: rgba(255, 255, 255, 0.18);
margin: 18px 0;
}
.productdetail-form {
display: grid;
gap: 12px;
}
.productdetail-label {
font-weight: 600;
color: var(--content-text);
}
.productdetail-select {
border-radius: var(--select-radius);
padding: 10px 12px;
}
.productdetail-price {
font-size: 1.5rem;
font-weight: 700;
color: var(--content-text);
}
.productdetail-variantimagewrap {
margin-top: 8px;
}
.productdetail-variantimage {
width: 100%;
display: block;
border-radius: 8px;
object-fit: cover;
}
.productdetail-variantinfo {
color: var(--content-text);
}
.productdetail-variantselector--single {
display: none;
}
/* Disabled stav – používá JS při "loading" a krátce po success */
.productdetail-cta:disabled {
cursor: default;
opacity: 0.8;
}
/* Button states (set by JS) */
.productdetail-cta.is-loading {
opacity: 0.9;
}
.productdetail-cta.is-success {
animation: eshopBtnPop 220ms ease-out;
}
@keyframes eshopBtnPop {
from { transform: scale(0.98); }
to { transform: scale(1); }
}
/* Spinner element injected by JS */
.eshop-btn-spinner {
display: inline-block;
width: 14px;
height: 14px;
margin-right: 8px;
vertical-align: -2px;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.25);
border-top-color: rgba(0, 0, 0, 0.75);
animation: eshopSpin 700ms linear infinite;
}
@keyframes eshopSpin {
to { transform: rotate(360deg); }
}
.productdetail-select.is-invalid {
outline: 2px solid rgba(220, 53, 69, 0.6);
outline-offset: 2px;
}
.productdetail-unavailable {
padding: 12px 14px;
border-radius: 8px;
background: rgba(255, 200, 0, 0.12);
color: var(--hero-text);
border: 1px solid rgba(255, 200, 0, 0.25);
}
.productdetail-cta-bar {
}
/* tlačítko ať je přes celou šířku v baru */
.productdetail-cta-bar .productdetail-cta {
width: 100%;
}
/* Mobilní pořadí */
.productdetail-title { order: 1; }
.productdetail-badge { order: 2; }
.productdetail-images { order: 3; }
.productdetail-info-body { order: 4; }
.productdetail-title {
margin-bottom: 4px;
}
/* Desktop */
@media (min-width: 992px) {
.productdetail {
padding-bottom: 24px;
/* desktop může mít jiné rytmy */
--productdetail-gap: 24px;
--productdetail-title-badge-gap: 10px;
}
/* na desktopu tohle přitahování nechceme */
.productdetail-badge {
margin-top: 0;
}
.productdetail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: start;
}
.productdetail-title {
margin-bottom: 10px;
}
/* na desktopu pravý panel funguje normálně jako wrapper */
.productdetail-info {
display: block;
}
/* na desktopu řeší pořadí grid, order netřeba */
.productdetail-title,
.productdetail-badge,
.productdetail-images,
.productdetail-info-body {
order: unset;
}
/* CTA bar vypnout (vrátit do normálního toku) */
.productdetail-cta-bar {
position: static;
left: auto;
right: auto;
bottom: auto;
padding: 0;
background: transparent;
box-shadow: none;
z-index: auto;
}
.productdetail-cta-bar .productdetail-cta {
width: auto;
}
}
/* =========================
PRODUCT DETAIL – CTA secondary action
========================= */
.productdetail-cta-actions {
display: flex;
flex-direction: column;
gap: 10px;
}
/* sekundární CTA pod hlavním */
.productdetail-cta-secondary {
justify-content: center;
font-size: 0.95rem;
}
/* v sticky baru ať se chová stejně */
.productdetail-cta-bar .productdetail-cta-actions {
width: 100%;
}
/* =========================
BUTTONS – global
========================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 52px;
padding: 0 22px;
border-radius: 10px;
font-weight: 800;
text-decoration: none;
border: 0;
cursor: pointer;
line-height: 1;
white-space: nowrap;
transition:
background-color 160ms ease,
color 160ms ease,
filter 160ms ease,
box-shadow 160ms ease,
transform 120ms ease;
}
/* PRIMARY */
.btn--primary,
.btn-primary {
background: var(--accent);
color: var(--accent-contrast);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.btn.btn--primary:hover,
.btn.btn--primary:focus-visible,
.btn.btn-primary:hover,
.btn.btn-primary:focus-visible {
background: var(--accent);
color: var(--accent-contrast);
}
.btn--primary:hover,
.btn-primary:hover {
filter: brightness(1.1);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}
/* SECONDARY (link-style) */
.btn--secondary {
background: transparent;
color: var(--accent);
padding-left: 0;
padding-right: 0;
height: auto;
font-weight: 600;
}
.btn--secondary:hover {
/*text-decoration: underline;*/
}