:root{
--bg: #0b0e1a;
--panel: #131829;
--panel-light: #1a2036;
--yellow: #FFD600;
--yellow-soft: #ffe14d;
--orange: #FF7A1A;
--white: #ffffff;
--muted: #a8adc4;
--radius-lg: 28px;
--radius-md: 18px;
--radius-sm: 10px;
--shadow-yellow: 0 14px 28px -12px rgba(0,0,0,0.5);
--shadow-dark: 0 16px 34px -16px rgba(0,0,0,0.55);
--font-display: 'Syne', sans-serif;
--font-body: 'DM Sans', sans-serif;
--ease: cubic-bezier(.16,.84,.44,1);
--header-h: 150px;
}
*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
background: var(--bg);
color: var(--white);
font-family: var(--font-body);
overflow-x: hidden;
line-height: 1.5;
}
/* touch-action: manipulation vypíná double-tap-zoom (rychlé poklepání na
tlačítko typu + na stepperu ho jinak náhodou spouštělo) - ale NAVĚŠUJE se
jen na klikací prvky, ne na celé body/scrollovatelné kontejnery (viz
.cart-items, #mobile-menu), ať to nijak neruší rozpoznání scroll gesta. */
button, a, input, .card, .qty-step-btn{ touch-action: manipulation; }
::selection{ background: var(--yellow); color: #0b0e1a; }
/* Syne (display font) je čitelný jen ve velkém a řídkém použití (hero,
nadpisy sekcí) - u opakovaného textu jako názvy produktů v mřížce nebo
položky menu působil nečitelně (feedback zákazníků). Proto teď Syne
zůstává jen na skutečných "headline" místech (.hero-title, .section-title,
.logo...), zbytek nadpisů dědí normální DM Sans, ale tučně. Váha 700 (ne
800) u DM Sans schválně - 800 není v načtených řezech fontu (viz
v ), prohlížeč by ho jinak dopočítával synteticky a text by
vypadal rozmazaně/tlustě, hlavně v menších velikostech. */
h1,h2,h3,h4{ font-weight: 700; letter-spacing: -0.02em; }
.hero-title, .section-title{ font-family: var(--font-display); font-weight: 800; }
a{ color: inherit; text-decoration: none; }
button{ font-family: var(--font-body); cursor: pointer; border: none; background: none; color: inherit; }
img,svg{ display:block; max-width:100%; }
.container{
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
}
section[id]{ scroll-margin-top: var(--header-h); }
svg{ vertical-align: middle; }
/* ---------- page reveal ---------- */
#page-veil{
position: fixed; inset:0; z-index: 9999;
background: var(--bg);
display:flex; align-items:center; justify-content:center;
animation: veilOut 1.4s var(--ease) forwards;
animation-delay: .9s;
pointer-events:none;
}
#page-veil .veil-logo{
font-family: var(--font-display);
font-size: clamp(2rem, 6vw, 4rem);
font-weight: 800;
color: var(--yellow);
display:flex; gap:.15em;
}
#page-veil .veil-logo span{
opacity:0;
display:inline-block;
animation: veilLetter .5s var(--ease) forwards;
}
@keyframes veilLetter{ to{ opacity:1; transform:translateY(0);} from{ transform:translateY(20px);} }
@keyframes veilOut{
0%{ clip-path: inset(0 0 0 0); }
100%{ clip-path: inset(0 0 100% 0); pointer-events:none; }
}
/* ---------- scrollbar ---------- */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--panel-light); border-radius: 10px; }
/* ---------- navbar ---------- */
#navbar{
position: fixed; top:0; left:0; right:0; z-index: 1000;
padding: 22px 0;
transition: all .45s var(--ease);
}
#navbar.scrolled{
padding: 12px 0;
background: rgba(11,14,26,0.75);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-inner{
display:flex; align-items:center; justify-content:space-between;
}
.logo{
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 800;
display:flex; align-items:center; gap:10px;
letter-spacing: -0.03em;
flex-shrink:0;
}
.logo img.logo-img{
width:42px; height:42px; border-radius:50%;
object-fit: cover;
}
.nav-search{
display:flex; align-items:center; gap:10px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 999px;
padding: 11px 20px;
flex: 1; max-width: 380px; margin: 0 28px;
transition: border-color .3s;
}
.nav-search:focus-within{ border-color: rgba(255,214,0,0.5); }
.nav-search input{
background:none; border:none; outline:none; color: var(--white);
font-family: var(--font-body); font-size:.9rem; width:100%;
}
.nav-search input::placeholder{ color: var(--muted); }
.nav-search svg{ width:17px; height:17px; opacity:.6; flex-shrink:0; }
.nav-links{
display:flex; gap:34px; list-style:none; flex-shrink:0;
}
.nav-links a{
font-size: .95rem; font-weight:500; color: var(--muted);
position:relative; padding: 4px 0;
transition: color .25s;
}
.nav-links a::after{
content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
background: var(--yellow);
transition: width .3s var(--ease);
}
.nav-links a:hover{ color: var(--white); }
.nav-links a:hover::after{ width:100%; }
.nav-right{ display:flex; align-items:center; gap:20px; flex-shrink:0; }
.nav-actions{ display:flex; align-items:center; gap:24px; }
.nav-action-btn{
position:relative;
display:flex; flex-direction:column; align-items:center; gap:5px;
color: var(--muted); font-size:.68rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
transition: color .25s;
}
.nav-action-btn svg{ width:22px; height:22px; }
.nav-action-btn:hover{ color: var(--white); }
.nav-action-btn.active{ color: var(--yellow); }
.icon-count{
position:absolute; top:-6px; right:-14px;
background: var(--yellow); color:#0b0e1a;
font-size:.68rem; font-weight:800;
width:18px; height:18px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
transition: transform .3s var(--ease);
}
.icon-count.bounce{ animation: bounceCount .5s var(--ease); }
@keyframes bounceCount{
0%{ transform: scale(1); }
35%{ transform: scale(1.6) rotate(15deg); }
60%{ transform: scale(0.85); }
100%{ transform: scale(1); }
}
.hamburger{
display:none; flex-direction:column; gap:5px; width:32px; height:24px;
background: none;
}
.hamburger span{
display:block; height:2px; width:100%; background: var(--white);
transition: all .35s var(--ease);
}
.hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
.mobile-menu{
position: fixed; top:0; right:0; width:min(80vw, 320px); height:100vh;
background: var(--panel);
/* Musí být NAD #overlay (z-index 1998), který se zobrazuje současně
(viz initMobileMenu() v app.js) - jinak menu sedí POD ztmaveným/
rozostřeným overlay a přesně tohle způsobovalo nahlášený bug
("rozmazané menu, nejde vyhledávat" - kliky padaly na overlay,
ne na vyhledávací pole pod ním). */
z-index: 2050;
display:flex; flex-direction:column; gap: 26px;
padding: 120px 36px 40px;
transform: translateX(100%);
transition: transform .45s var(--ease);
box-shadow: -20px 0 60px rgba(0,0,0,0.5);
}
.mobile-menu.open{ transform: translateX(0); }
.mobile-menu a{ font-size:1.25rem; font-weight:700; }
.mobile-search{
display:flex; align-items:center; gap:10px;
background: var(--panel-light); border-radius:999px; padding: 12px 18px;
margin-top:auto;
}
.mobile-search svg{ width:18px; height:18px; color: var(--muted); flex-shrink:0; }
.mobile-search input{ background:none; border:none; outline:none; color:var(--white); width:100%; font-family:var(--font-body); }
.search-clear-btn{
flex-shrink:0; display:flex; align-items:center; justify-content:center;
width:22px; height:22px; border-radius:50%; color: var(--muted);
transition: color .2s, background .2s;
}
.search-clear-btn svg{ width:13px; height:13px; }
.search-clear-btn:hover{ color: var(--white); background: rgba(255,255,255,0.1); }
/* ---------- hero ---------- */
#hero{
padding-top: calc(var(--header-h) + 24px);
}
.hero-banner{
position:relative;
padding: 64px 0;
display:grid; grid-template-columns: 1.15fr 1fr;
align-items:center; gap:32px;
}
.hero-banner-text{ position:relative; z-index:2; }
.hero-banner-text .btn-primary{
margin-top: 36px;
opacity:0; animation: fadeUp .9s var(--ease) forwards; animation-delay: 1.55s;
}
.hero-banner-photo{
position:relative; z-index:2;
height: 460px;
display:flex; align-items:center; justify-content:center;
opacity:0; animation: fadeUp 1.1s var(--ease) forwards; animation-delay: 1.3s;
}
.hero-banner-photo img{
height:100%; width:auto; max-width:100%;
object-fit:contain;
filter: drop-shadow(0 20px 32px rgba(0,0,0,0.55));
}
.hero-title{
font-size: clamp(1.5rem, 3.6vw, 2.9rem);
line-height: 1.05;
overflow:hidden;
}
.hero-title .line{ overflow:hidden; display:block; }
.hero-title .line span{
display:block;
transform: translateY(110%);
animation: lineUp .9s var(--ease) forwards;
}
.hero-title .accent{ color: var(--yellow); font-style:normal; }
.hero-title .line:nth-child(1) span{ animation-delay: 1.0s; }
.hero-title .line:nth-child(2) span{ animation-delay: 1.15s; }
.hero-title .line:nth-child(3) span{ animation-delay: 1.3s; }
@keyframes lineUp{ to{ transform: translateY(0); } }
.hero-subtitle{
color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.15rem);
margin-top: 18px; max-width: 46ch;
opacity:0; animation: fadeUp .9s var(--ease) forwards; animation-delay: 1.4s;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:translateY(0);} }
.btn-primary{
position:relative; overflow:hidden;
background: var(--yellow);
color: #0b0e1a;
font-weight:700; font-size: 1rem;
padding: 18px 34px;
border-radius: 999px;
display:inline-flex; align-items:center; gap:10px;
transition: transform .35s var(--ease), box-shadow .35s var(--ease);
box-shadow: var(--shadow-yellow);
}
/* Šipka uvnitř nemá žádný wrapper se stanovenou velikostí (na rozdíl od
.add-btn .arrow) - bez tohohle se SVG vykreslí v prohlížečově výchozí
(obří) velikosti. Většinou to bylo schované za tím, že tlačítko sedělo
v natěsno flexboxu, co ho spolu s ikonou smrskl - jakmile dostalo víc
místa (celoobrazovkový detail produktu na mobilu), vylezlo to najevo
jako obří žluté oválné tlačítko. */
.btn-primary svg{ width:18px; height:18px; flex-shrink:0; }
.btn-primary:hover{ transform: translateY(-4px) scale(1.03); box-shadow: 0 25px 70px -10px rgba(255,214,0,0.55); }
.btn-primary:active{ transform: translateY(-1px) scale(.98); }
.btn-primary .ripple{
position:absolute; border-radius:50%; background: rgba(255,255,255,0.5);
transform: scale(0); animation: rippleAnim .6s linear;
pointer-events:none;
}
@keyframes rippleAnim{ to{ transform: scale(3); opacity:0; } }
.btn-primary span svg{ width:16px; height:16px; display:block; }
/* ---------- section shared ---------- */
.section{ padding: 120px 0; position:relative; }
.section-head{ margin-bottom: 64px; max-width: 720px; }
.section-tag{
color: var(--orange); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
font-size:.85rem; margin-bottom: 14px; display:block;
}
.section-title{ font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.reveal{
opacity:0; transform: translateY(50px);
transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.visible{ opacity:1; transform: translateY(0); }
/* ---------- theme / category grid ---------- */
.theme-grid{
display:grid; grid-template-columns: repeat(6, 1fr); gap: 28px 20px;
}
.theme-card{
background: none; border: none; padding: 0;
display:flex; flex-direction:column; align-items:center; gap:16px;
transition: transform .35s var(--ease);
text-align:center;
}
.theme-card:hover{ transform: translateY(-6px); }
.theme-photo{
width:100%; aspect-ratio: 1/1; border-radius: 50%;
background: var(--panel);
border: 3px solid rgba(255,255,255,0.06);
display:flex; align-items:center; justify-content:center;
overflow:hidden;
transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.theme-photo img{ width:100%; height:100%; object-fit:cover; object-position: center 15%; }
.theme-photo svg{ width:38%; height:38%; color: var(--yellow); }
.theme-card:hover .theme-photo{ border-color: rgba(255,214,0,0.4); box-shadow: var(--shadow-yellow); }
.theme-card.active .theme-photo{ border-color: var(--yellow); box-shadow: var(--shadow-yellow); }
.theme-name{ font-weight:700; font-size:.98rem; }
.theme-toggle-btn{
display:flex; align-items:center; gap:10px; margin: 36px auto 0;
padding: 12px 26px; border-radius:999px;
border:1px solid rgba(255,255,255,0.14); color: var(--muted);
font-weight:600; font-size:.9rem;
transition: all .25s var(--ease);
}
.theme-toggle-btn:hover{ border-color: var(--yellow); color: var(--white); }
.theme-toggle-btn span:first-child{
width:22px; height:22px; border-radius:50%; background: var(--yellow); color:#0b0e1a;
display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem; flex-shrink:0;
}
.active-theme-chip{
display:none; align-items:center; gap:10px;
background: var(--panel-light); border:1px solid rgba(255,214,0,0.3);
padding: 10px 18px; border-radius:999px; margin-bottom: 24px;
font-size:.85rem; font-weight:600; color: var(--yellow);
}
.active-theme-chip button{ color: var(--muted); font-weight:700; display:flex; }
.active-theme-chip button svg{ width:12px; height:12px; }
.active-theme-chip button:hover{ color:#FF3B5C; }
/* ---------- filters ---------- */
.controls-row{
display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom: 32px;
}
.sort-tab, .type-tab{
padding: 12px 24px; border-radius: 999px;
border: 1px solid rgba(255,255,255,0.14);
color: var(--muted); font-weight:600; font-size:.9rem;
transition: all .3s var(--ease);
}
.sort-tab:hover, .type-tab:hover{ border-color: var(--yellow); color: var(--white); }
.sort-tab.active, .type-tab.active{
background: var(--yellow); color:#0b0e1a; border-color: var(--yellow);
}
.sort-row, .type-row{
display:flex; gap:12px; flex-wrap:wrap;
}
.type-tab{ padding: 9px 20px; font-size:.85rem; }
.controls-divider{
width:1px; align-self:stretch; min-height:28px;
background: rgba(255,255,255,0.14);
}
/* ---------- product grid ---------- */
.product-grid{
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
.card{
position:relative;
background: var(--panel);
border-radius: var(--radius-lg);
border: 1px solid rgba(255,255,255,0.06);
padding: 28px;
display:flex; flex-direction:column;
overflow:hidden;
cursor:pointer;
transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card::before{
content:''; position:absolute; inset:0;
background: radial-gradient(circle at 80% -10%, rgba(255,214,0,0.12), transparent 55%);
opacity:0; transition: opacity .5s;
pointer-events:none;
}
.card:hover{
transform: translateY(-10px);
box-shadow: var(--shadow-dark);
border-color: rgba(255,214,0,0.3);
}
.card:hover::before{ opacity:1; }
.card-badge{
position:absolute; top:24px; left:24px; z-index:3;
padding: 7px 16px; border-radius: 999px;
font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.badge-novinka{ background: var(--yellow); color:#0b0e1a; }
.badge-bestseller{ background: var(--orange); color:#fff; }
.badge-limitovana{ background: #7C5CFF; color:#fff; }
.badge-vyprodej{ background: #FF3B5C; color:#fff; }
.card-thumb-wrap{ position:relative; }
.card-thumb{
width:100%; height: 294px; border-radius: var(--radius-md);
background: var(--panel-light);
display:flex; align-items:center; justify-content:center;
margin-bottom: 22px; overflow:hidden;
position:relative;
}
.card-thumb svg{ width:56%; height:56%; transition: transform .4s var(--ease); }
.card:hover .card-thumb svg{ transform: scale(1.05); }
.card-thumb img{
width:100%; height:100%;
object-fit:cover; object-position: center 15%;
transition: transform .4s var(--ease);
}
.card:hover .card-thumb img{ transform: scale(1.05); }
.card-condition{
position:absolute; bottom:14px; right:14px;
display:flex; align-items:center; gap:5px;
font-size:.72rem; font-weight:700; letter-spacing:.02em;
padding: 5px 12px; border-radius:8px;
border: 1px solid;
backdrop-filter: blur(6px);
box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.card-condition svg{ width:12px; height:12px; }
.cond-nove{ background: rgba(30,26,10,0.62); color: var(--yellow); border-color: rgba(255,214,0,0.5); }
.cond-pouzite{ background: rgba(28,22,46,0.62); color:#c7bcff; border-color: rgba(124,92,255,0.5); }
.cond-zanovni{ background: rgba(12,32,22,0.62); color:#7dfaa2; border-color: rgba(60,196,106,0.5); }
.cond-ostatni{ background: rgba(20,22,30,0.62); color:#d7dbe8; border-color: rgba(168,173,196,0.45); }
.card-meta{
color: var(--muted); font-size:.82rem; font-weight:600; letter-spacing:.03em;
margin-bottom: 8px; text-transform:uppercase;
}
.card-meta svg{ width:13px; height:13px; color: var(--yellow); vertical-align:-2px; }
.card-title{
font-size: 1.3rem; margin-bottom: 10px; line-height:1.15;
}
.card-footer{
display:flex; align-items:center; justify-content:space-between; gap: 14px;
margin-top:auto; padding-top: 18px;
}
.card-price{
font-family: var(--font-display); font-weight:800; font-size:1.4rem; color: var(--yellow);
}
.add-btn{
display:flex; align-items:center; gap:8px;
background: var(--panel-light);
color: var(--white); font-weight:700; font-size:.88rem;
padding: 13px 20px; border-radius: 999px;
border: 1px solid rgba(255,255,255,0.1);
transition: all .35s var(--ease);
white-space:nowrap;
}
.add-btn .arrow{ display:flex; transition: transform .3s var(--ease); }
.add-btn .arrow svg{ width:15px; height:15px; }
.add-btn:hover{ background: var(--yellow); color:#0b0e1a; border-color: var(--yellow); }
.add-btn:hover .arrow{ transform: translateX(4px); }
.add-btn.added{ background: #33C46A; color:#fff; border-color:#33C46A; }
.card-stock-note{
display:flex; align-items:center; gap:6px;
color: var(--muted); font-size:.78rem; font-weight:600; margin-bottom:10px;
}
.card-stock-note svg{ width:13px; height:13px; color: var(--yellow); }
/* Skeleton loading - dokud se nenačtou produkty z backendu, karty na svém
místě "naznačí" obsah místo prázdné plochy (viz app.js -> renderProductSkeletons). */
.skeleton-card{ cursor:default; }
.skeleton-card:hover{ transform:none; box-shadow:none; border-color: rgba(255,255,255,0.06); }
.skeleton-card::before{ display:none; }
.skeleton-block{
border-radius: var(--radius-sm);
background: linear-gradient(100deg, var(--panel-light) 30%, rgba(255,255,255,0.09) 50%, var(--panel-light) 70%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-line{ height:14px; border-radius:6px; }
.skeleton-line.meta{ width:40%; height:12px; margin-bottom:10px; }
.skeleton-line.title{ width:75%; height:22px; margin-bottom:20px; }
.skeleton-line.price{ width:70px; height:26px; }
.skeleton-btn{ width:120px; height:44px; border-radius:999px; }
@keyframes skeleton-shimmer{
0%{ background-position: 200% 0; }
100%{ background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce){
.skeleton-block{ animation:none; }
}
.qty-stepper{
display:flex; align-items:center; gap:2px; margin-top:12px;
background: var(--panel-light); border-radius:999px; padding:4px;
width:fit-content;
}
/* `display:flex` výše by jinak přebilo prohlížečovo výchozí
[hidden]{display:none} (autorský styl má přednost bez ohledu na
pořadí/specificitu vůči UA stylesheetu) - viz stejný fix v admin.css. */
.qty-stepper[hidden]{ display:none; }
.qty-step-btn{
width:28px; height:28px; border-radius:50%; color: var(--white);
font-size:1.1rem; font-weight:700; display:flex; align-items:center; justify-content:center;
transition: background .2s;
}
.qty-step-btn:hover{ background: rgba(255,255,255,0.12); }
.qty-step-value{ min-width:28px; text-align:center; font-weight:700; font-size:.92rem; }
.wishlist-btn{
position:absolute; top:24px; right:24px; z-index:3;
width:38px; height:38px; border-radius:50%;
background: rgba(11,14,26,0.6);
display:flex; align-items:center; justify-content:center;
color: var(--white);
transition: all .25s var(--ease);
}
.wishlist-btn svg{ width:18px; height:18px; }
.wishlist-btn:hover{ background: rgba(11,14,26,0.8); }
.wishlist-btn.active{ color: #FF3B5C; }
.cart-qty-pill{
position:absolute; bottom:24px; left:24px; z-index:3;
background: var(--yellow); color:#0b0e1a;
font-weight:800; font-size:.78rem;
padding: 5px 12px; border-radius:999px;
display:none; align-items:center; gap:5px;
}
.cart-qty-pill svg{ width:12px; height:12px; }
.cart-qty-pill.show{ display:flex; }
.empty-state{
grid-column: 1 / -1;
text-align:center; padding: 90px 20px; color: var(--muted);
}
.empty-state svg{ width:44px; height:44px; margin:0 auto 18px; }
.empty-state button{ margin-top:18px; color: var(--yellow); font-weight:700; text-decoration:underline; }
/* ---------- pagination ---------- */
.pagination-row{
display:flex; align-items:center; justify-content:center; gap:22px;
margin-top: 44px;
}
.pagination-arrow{
width:44px; height:44px; border-radius:50%;
background: var(--panel); border: 1px solid rgba(255,255,255,0.1);
display:flex; align-items:center; justify-content:center;
color: var(--white);
transition: all .25s var(--ease);
}
.pagination-arrow svg{ width:18px; height:18px; }
.pagination-arrow:hover:not(:disabled){ background: var(--yellow); color:#0b0e1a; border-color: var(--yellow); }
.pagination-arrow:disabled{ opacity:.35; cursor:default; }
.pagination-info{ color: var(--muted); font-size:.9rem; font-weight:600; white-space:nowrap; }
/* ---------- detail produktu ----------
Žádný position:fixed overlay/modal, žádný vlastní scroll kontejner -
#product-view je normální blokový prvek v běžném toku dokumentu. Otevření
jen schová #homepage-content a ukáže tohle misto - scrolluje se úplně
stejně jako zbytek webu (okno/stránka), přes to samé okno, co nikdy
nemělo problém se scrollem. Žádné position:fixed, žádný nested
overflow:auto, žádné ruční touch handlery - nemá tedy co selhat. */
#product-view{ background: var(--bg); min-height:100vh; min-height:100dvh; padding-top: var(--header-h); }
.pv-header{
position: sticky; top: var(--header-h); z-index:5;
background: var(--panel);
border-bottom: 1px solid rgba(255,255,255,0.08);
padding: 16px 24px;
}
.pv-back{
display:inline-flex; align-items:center; gap:8px;
color: var(--white); font-weight:700; font-size:.92rem;
max-width: 1100px; margin:0 auto;
}
.pv-back svg{ width:16px; height:16px; }
.pv-back:hover{ color: var(--yellow); }
.product-view-body{
max-width: 1100px; margin:0 auto; padding: 40px 24px 80px;
display:grid; grid-template-columns: 1fr 1fr; gap:56px;
align-items:start;
}
.qv-visual{
background: var(--panel-light);
border-radius: var(--radius-lg);
display:flex; align-items:center; justify-content:center; padding: 50px;
position: sticky; top: calc(var(--header-h) + 76px);
height: min(560px, 70vh);
}
/* #qv-thumb (wrapper vloženého ![]()
nebo SVG fallbacku) je explicitně
100% × 100% a centruje si svůj obsah sám - bez tohodle by jeho šířka jako
flex položky v .qv-visual záležela na nejednoznačném "auto" flex-basis
výpočtu prohlížeče a obrázek občas skončil zarovnaný vlevo místo na střed. */
#qv-thumb{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.qv-visual svg{ width:62%; }
.qv-visual img{ max-width:78%; max-height:78%; width:auto; height:auto; object-fit:contain; border-radius: 14px; }
/* Kulaté zavírací tlačítko - sdílená utilitní třída (checkout i Balíkovna
modal ho taky používají), nejen bývalý detail produktu. */
.qv-close{
position:absolute; top:18px; right:18px;
width:38px; height:38px; border-radius:50%; background: rgba(11,14,26,0.5);
display:flex; align-items:center; justify-content:center; z-index:3;
transition: all .3s var(--ease);
}
.qv-close svg{ width:16px; height:16px; }
.qv-close:hover{ background: var(--yellow); color:#0b0e1a; }
.qv-gallery-arrow{
position:absolute; top:50%; transform: translateY(-50%);
width:38px; height:38px; border-radius:50%; background: rgba(11,14,26,0.5);
display:flex; align-items:center; justify-content:center; z-index:3;
color:#fff;
transition: all .3s var(--ease);
}
.qv-gallery-arrow svg{ width:16px; height:16px; }
.qv-gallery-arrow:hover{ background: var(--yellow); color:#0b0e1a; }
.qv-gallery-prev{ left:18px; }
.qv-gallery-next{ right:18px; }
.qv-gallery-dots{
display:none; position:absolute; bottom:16px; left:50%; transform: translateX(-50%);
gap:8px; z-index:3;
}
.qv-dot{
width:8px; height:8px; border-radius:50%;
background: rgba(255,255,255,0.35);
transition: background .25s var(--ease);
}
.qv-dot.active{ background: var(--yellow); }
/* ---------- checkout details modal ---------- */
#checkout-overlay{
position: fixed; inset:0; z-index: 2600;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(4px);
display:flex; align-items:center; justify-content:center;
opacity:0; pointer-events:none;
transition: opacity .35s var(--ease);
padding: 24px;
}
#checkout-overlay.show{ opacity:1; pointer-events:auto; }
.checkout-modal{
position:relative;
background: var(--panel);
border-radius: var(--radius-lg);
max-width: 460px; width:100%;
padding: 44px;
transform: translateY(30px) scale(.97); opacity:0;
transition: all .4s var(--ease);
max-height: 88vh; overflow-y:auto;
}
#checkout-overlay.show .checkout-modal{ transform: translateY(0) scale(1); opacity:1; }
.checkout-modal h3{ font-family: var(--font-display); font-size:1.4rem; margin-bottom:10px; }
.checkout-modal-hint{ color: var(--muted); font-size:.85rem; margin-bottom:24px; line-height:1.5; }
.checkout-form{ display:flex; flex-direction:column; gap:14px; }
.checkout-form-row{ display:flex; gap:14px; }
.checkout-form input, .checkout-form select{
background: var(--panel-light); border:1px solid rgba(255,255,255,0.1); border-radius: var(--radius-sm);
padding:14px 16px; color: var(--white); font-family: var(--font-body); font-size:.95rem; width:100%;
}
.checkout-form button[type="submit"]{ margin-top:8px; width:100%; justify-content:center; }
.checkout-form button[type="submit"]:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.checkout-form button[type="submit"]:disabled:hover{ transform:none; box-shadow:none; }
.btn-secondary-outline{
width:100%; padding:14px 16px; border-radius: var(--radius-sm);
border:1px dashed rgba(255,255,255,0.25);
color: var(--white); font-weight:600; font-size:.92rem;
transition: all .25s var(--ease);
}
.btn-secondary-outline:hover{ border-color: var(--yellow); color: var(--yellow); }
.pickup-point-result{
display:flex; align-items:flex-start; gap:10px;
background: rgba(60,196,106,0.1); border:1px solid rgba(60,196,106,0.35);
border-radius: var(--radius-sm); padding:12px 14px;
font-size:.88rem; color:#7dfaa2; line-height:1.4;
}
.pickup-point-result svg{ width:18px; height:18px; flex-shrink:0; margin-top:2px; }
.carrier-choice-row{ display:flex; gap:10px; }
.carrier-choice-btn{
flex:1; padding:14px 12px; border-radius: var(--radius-sm);
border:1px dashed rgba(255,255,255,0.25);
display:flex; flex-direction:column; align-items:center; gap:4px;
color: var(--white); font-weight:600; font-size:.92rem;
transition: all .25s var(--ease);
}
.carrier-choice-btn:hover{ border-color: var(--yellow); color: var(--yellow); }
.carrier-choice-btn.active{
border-style: solid; border-color: var(--yellow);
background: rgba(255,214,0,0.1); color: var(--yellow);
}
.carrier-price{ font-weight:500; font-size:.78rem; color: var(--muted); }
.carrier-choice-btn:hover .carrier-price,
.carrier-choice-btn.active .carrier-price{ color: inherit; opacity:.85; }
/* ---------- Balíkovna picker (iframe) ---------- */
#balikovna-overlay{
position: fixed; inset:0; z-index: 2700;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(4px);
display:flex; align-items:center; justify-content:center;
opacity:0; pointer-events:none;
transition: opacity .3s var(--ease);
padding: 24px;
}
#balikovna-overlay.show{ opacity:1; pointer-events:auto; }
.balikovna-modal{
position:relative;
background: var(--panel);
border-radius: var(--radius-lg);
width:100%; max-width: 420px; height: min(800px, 86vh);
overflow:hidden;
transform: translateY(20px) scale(.98); opacity:0;
transition: all .3s var(--ease);
}
#balikovna-overlay.show .balikovna-modal{ transform: translateY(0) scale(1); opacity:1; }
#balikovna-iframe{ width:100%; height:100%; border:none; display:block; }
.qv-info{ display:flex; flex-direction:column; padding-top:6px; }
.qv-info .card-meta{ margin-bottom:12px; }
.qv-info h2{ font-size:1.7rem; margin-bottom:14px; }
.qv-info .qv-desc{ color: var(--muted); font-size:.98rem; margin-bottom:24px; line-height:1.6; white-space: pre-line; }
.qv-desc-link{ color: var(--yellow); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.qv-desc-link:hover{ color: var(--orange); }
.qv-meta{ display:flex; gap:10px; margin-bottom:28px; flex-wrap:wrap; }
.qv-meta span{
background: var(--panel-light); padding:8px 14px; border-radius:999px;
font-size:.8rem; color: var(--muted); font-weight:600;
}
.qv-price-row{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; gap:16px; flex-wrap:wrap; }
/* Bez flex-shrink:0 flexbox tlačítko v natěsno řadě (cena + stepper +
tlačítko) zmenšuje jako první, čímž se text "Do košíku" zalomí na dva
řádky - tlačítko má mít vždycky svou přirozenou velikost, ať se místo
něj zmenší/zalomí něco jiného (nebo se to na mobilu přesune na vlastní
řádek, viz media query níže). */
#qv-add-btn{ flex-shrink:0; white-space:nowrap; }
.qv-price{ font-family: var(--font-display); font-weight:800; font-size:1.9rem; color: var(--yellow); white-space:nowrap; }
/* ---------- features ---------- */
.feature-grid{
display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.feature-card{
background: var(--panel);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius-md);
padding: 34px 28px;
transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.feature-card:hover{ transform: translateY(-8px); border-color: rgba(255,214,0,0.35); }
.feature-icon{
width:56px; height:56px; border-radius: 16px;
background: var(--yellow); color:#0b0e1a;
display:flex; align-items:center; justify-content:center;
margin-bottom: 22px;
}
.feature-icon svg{ width:26px; height:26px; }
.feature-card h3{ font-size:1.15rem; margin-bottom:10px; }
.feature-card p{ color: var(--muted); font-size:.92rem; }
/* ---------- stats strip ---------- */
.stats-strip{
display:grid; grid-template-columns: repeat(3,1fr);
gap: 24px;
padding: 60px 0;
}
.stat-item{ text-align:center; position:relative; }
.stat-item:not(:last-child)::after{
content:''; position:absolute; right:-12px; top:10%; height:80%; width:1px;
background: rgba(255,255,255,0.08);
}
.stat-num{
font-family: var(--font-display); font-weight:800;
font-size: clamp(2rem, 4vw, 3rem);
height: clamp(3rem, 6vw, 4.5rem);
color: var(--yellow);
display:flex; align-items:center; justify-content:center; gap:2px;
}
.stat-num-text{ font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
.stat-label{ color: var(--muted); font-size:.88rem; margin-top:8px; font-weight:500; }
/* ---------- FAQ ---------- */
.faq-list{ max-width: 820px; }
.faq-item{
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.faq-question{
width:100%; display:flex; justify-content:space-between; align-items:center;
padding: 26px 4px; text-align:left;
font-family: var(--font-display); font-weight:700; font-size:1.1rem;
}
.faq-icon{
width:32px; height:32px; border-radius:50%; background: var(--panel);
display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-left:20px;
transition: transform .4s var(--ease), background .3s;
}
.faq-icon svg{ width:16px; height:16px; }
.faq-item.open .faq-icon{ transform: rotate(180deg); background: var(--yellow); color:#0b0e1a; }
.faq-answer{
max-height:0; overflow:hidden;
transition: max-height .5s var(--ease);
}
.faq-answer p{ color: var(--muted); padding: 0 4px 26px; max-width: 640px; font-size:.95rem; }
/* ---------- newsletter band ---------- */
.newsletter-band{
background: var(--yellow);
border-radius: var(--radius-lg);
padding: 64px 60px;
color: #0b0e1a;
display:flex; align-items:center; justify-content:space-between; gap:40px;
position:relative; overflow:hidden;
}
.newsletter-band::before{
content:''; position:absolute; width:220px; height:220px; border-radius:50%;
background: rgba(11,14,26,0.06);
top:-80px; right:-60px;
}
.newsletter-band h2{ font-size: clamp(1.8rem, 3.2vw, 2.6rem); max-width:480px; position:relative; z-index:1; }
.newsletter-band p{ margin-top:10px; opacity:.75; font-weight:500; }
.newsletter-form{ display:flex; gap:12px; position:relative; z-index:1; flex-shrink:0; }
.newsletter-form input{
padding: 16px 22px; border-radius: 999px; border:none; outline:none;
font-family: var(--font-body); font-size:.95rem; width:260px;
background: rgba(11,14,26,0.1);
color:#0b0e1a; font-weight:600;
}
.newsletter-form input::placeholder{ color: rgba(11,14,26,0.55); }
.newsletter-form button{
background:#0b0e1a; color:var(--yellow); font-weight:700;
padding: 16px 28px; border-radius:999px; white-space:nowrap;
transition: transform .3s var(--ease);
}
.newsletter-form button:hover{ transform: scale(1.05); }
/* ---------- footer ---------- */
footer{
background: #070912;
border-top: 1px solid rgba(255,255,255,0.06);
}
/* aspect-ratio přesně 2/1 (banner je 960x480) - na rozdíl od dřívějšího
pevného max-height:320px se tak obrázek nikdy neořízne bez ohledu na
šířku obrazovky, jen se plynule zmenšuje/zvětšuje jako celek. */
.footer-banner{ width:100%; aspect-ratio: 2 / 1; overflow:hidden; }
.footer-banner img{ width:100%; height:100%; object-fit:cover; display:block; }
.footer-content{ padding: 60px 0 30px; }
.footer-grid{
display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
margin-bottom: 60px;
}
.footer-grid h4{ font-size:1rem; margin-bottom:18px; color: var(--white); }
.footer-grid p{ color: var(--muted); font-size:.9rem; max-width: 320px; }
.footer-grid ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer-grid a{ color: var(--muted); font-size:.9rem; transition: color .25s; }
.footer-grid a:hover{ color: var(--yellow); }
.footer-bottom{
display:flex; justify-content:space-between; align-items:center;
padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.06);
color: var(--muted); font-size:.82rem; flex-wrap:wrap; gap:12px;
}
.footer-bottom a{ text-decoration: underline; text-underline-offset: 2px; transition: color .25s var(--ease); }
.footer-bottom a:hover{ color: var(--yellow); }
/* ---------- cart drawer ---------- */
#overlay{
position: fixed; inset:0; background: rgba(0,0,0,0.6);
z-index: 1998; opacity:0; pointer-events:none; transition: opacity .4s var(--ease);
backdrop-filter: blur(2px);
}
#overlay.show{ opacity:1; pointer-events:auto; }
/* Košík NENÍ position:fixed panel s vlastním scrollem - přesně tahle
kombinace (fixed panel + overflow:auto potomek/sebe sama) se na reálném
iOS Safari opakovaně ukázala nespolehlivá (detail produktu i dřívější
verze tohohle košíku, viz historie oprav - žádná CSS/JS záplata
nepomohla). Košík je proto normální blok v běžném toku dokumentu, přesně
jako #product-view - dočasně nahradí homepage/detail produktu obsah a
scrolluje se přes to samé okno jako zbytek webu. */
#cart-drawer{
background: var(--bg); min-height:100vh; min-height:100dvh;
padding-top: var(--header-h);
}
.cart-header{
position: sticky; top: var(--header-h); z-index:5;
background: var(--panel);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cart-header-inner{
max-width: 640px; margin:0 auto;
display:flex; align-items:center; justify-content:space-between;
padding: 20px 28px;
}
.cart-header h3{ font-size:1.4rem; }
.cart-close{
width:38px; height:38px; border-radius:50%; background: var(--panel-light);
display:flex; align-items:center; justify-content:center; font-size:1.1rem;
transition: all .3s var(--ease);
}
.cart-close svg{ width:16px; height:16px; }
.cart-close:hover{ background: var(--yellow); color:#0b0e1a; }
.cart-body{ max-width: 640px; margin:0 auto; padding: 0 28px; }
.cart-vacation-notice{
margin: 20px 0 0;
background: rgba(255,140,0,0.12); border:1px solid rgba(255,140,0,0.35);
border-radius: var(--radius-sm); padding:12px 14px;
font-size:.85rem; color:#ffb066; line-height:1.4;
}
.cart-shipping{ padding: 20px 0 18px; }
.cart-shipping-label{ display:flex; justify-content:space-between; font-size:.8rem; color: var(--muted); margin-bottom:8px; }
.cart-shipping-label b{ color: var(--yellow); }
.cart-shipping-bar{ height:6px; border-radius:999px; background: var(--panel-light); overflow:hidden; }
.cart-shipping-fill{
height:100%; background: linear-gradient(90deg, var(--orange), var(--yellow));
width:0%; transition: width .5s var(--ease); border-radius:999px;
}
.cart-items{ padding: 0 0 20px; display:flex; flex-direction:column; gap:18px; }
.cart-empty{ color: var(--muted); text-align:center; margin-top: 60px; }
.cart-empty svg{ width:40px; height:40px; margin:0 auto 16px; }
.cart-item{
display:flex; gap:14px; align-items:center;
background: var(--panel-light);
border-radius: var(--radius-sm);
padding: 14px;
animation: itemIn .4s var(--ease);
}
@keyframes itemIn{ from{ opacity:0; transform: translateX(20px);} to{ opacity:1; transform:translateX(0);} }
.cart-item-thumb{ width:60px; height:60px; border-radius:10px; background: var(--panel); flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cart-item-thumb svg{ width:70%; height:70%; }
.cart-item-thumb img{ width:100%; height:100%; object-fit:cover; border-radius: 10px; }
.cart-item-info{ flex:1; min-width:0; }
.cart-item-info h4{ font-size:.92rem; font-weight:700; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-item-price{ color: var(--yellow); font-weight:700; font-size:.88rem; }
.qty-controls{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.qty-btn{
width:24px; height:24px; border-radius:6px; background: var(--panel);
display:flex; align-items:center; justify-content:center; font-weight:700;
transition: all .25s;
border: 1px solid rgba(255,255,255,0.1);
}
.qty-btn svg{ width:11px; height:11px; }
.qty-btn:hover:not(:disabled){ background: var(--yellow); color:#0b0e1a; }
.qty-btn:disabled{ opacity:.35; cursor:default; }
.cart-item-qty-num{ font-weight:700; font-size:.85rem; min-width:14px; text-align:center; }
.remove-btn{
color: #FF3B5C; font-size:.78rem; font-weight:600; margin-left:auto;
transition: opacity .2s;
}
.remove-btn:hover{ opacity:.7; }
.cart-footer{
position: sticky; bottom:0; z-index:5;
background: var(--panel);
border-top: 1px solid rgba(255,255,255,0.08);
}
.cart-footer-inner{ max-width: 640px; margin:0 auto; padding: 24px 28px 30px; }
.cart-total-row{
display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;
font-family: var(--font-display); font-size:1.2rem; font-weight:800;
}
.cart-total-row span:last-child{ color: var(--yellow); }
.checkout-btn{
width:100%; padding:18px; border-radius:999px;
background: var(--yellow); color:#0b0e1a; font-weight:800; font-size:1rem;
transition: all .3s var(--ease);
}
.checkout-btn:hover{ box-shadow: var(--shadow-yellow); transform: translateY(-3px); }
/* toast */
#toast{
position: fixed; bottom: 28px; left:50%; transform: translateX(-50%) translateY(30px);
background: var(--white); color:#0b0e1a; font-weight:700;
padding: 16px 26px; border-radius: 999px;
z-index: 3000; opacity:0; pointer-events:none;
transition: all .4s var(--ease);
display:flex; align-items:center; gap:10px;
box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
#toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }
#toast svg{ width:16px; height:16px; flex-shrink:0; }
/* ---------- responsive ---------- */
@media (max-width: 980px){
.hero-banner{ grid-template-columns: 1fr; padding: 44px 36px; text-align:center; }
.hero-banner-text{ order:1; }
.hero-banner-text .btn-primary{ margin-left:auto; margin-right:auto; }
.hero-banner-photo{ order:0; height: 320px; }
.product-grid{ grid-template-columns: repeat(3,1fr); gap: 22px; }
.card-thumb{ height:auto; aspect-ratio: 3/4; }
.feature-grid{ grid-template-columns: repeat(2,1fr); }
.footer-grid{ grid-template-columns: 1fr 1fr; }
.nav-links{ display:none; }
.nav-search{ display:none; }
.nav-action-btn .nav-action-label{ display:none; }
.nav-actions{ gap:14px; }
.hamburger{ display:flex; }
.newsletter-band{ flex-direction:column; align-items:flex-start; padding: 44px 32px; }
.newsletter-form{ width:100%; }
.newsletter-form input{ width:100%; }
/* Pod 980px se foto a text detailu produktu skládají pod sebe - ne dva
sloupce vedle sebe. Scrolluje se pořád jen okno/stránka (žádný vlastní
kontejner), takže tu není nic navíc k doladění. Foto NENÍ sticky -
na malé obrazovce by trvale zabíralo většinu místa a na text by
zbyl jen úzký pruh (zpětná vazba) - odscrolluje se pryč jako
normální obsah, ať je na text i tlačítko víc prostoru. */
.product-view-body{ grid-template-columns: none; gap:0; padding: 0 0 60px; }
.qv-visual{
position: static;
height: 46vh; border-radius:0;
padding: 24px;
}
.qv-info{ padding: 28px 24px 0; }
/* Cena (+ případně stepper) a tlačítko "Do košíku" se na užší obrazovce
do jednoho řádku obvykle nevejdou (viz .qv-price-row flex-wrap v
základním pravidle výše) - když se zalomí, ať tlačítko zabere celou
šířku vlastního řádku, ne jen svou přirozenou (malou) velikost. */
#qv-add-btn{ width:100%; justify-content:center; order:3; }
.theme-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 600px){
.container{ padding: 0 20px; }
.product-grid{ grid-template-columns: repeat(2,1fr); gap: 14px; }
.card{ padding: 16px; border-radius: 18px; }
.card-thumb{ margin-bottom: 14px; border-radius: 12px; }
.card-badge{ top:12px; left:12px; padding:5px 10px; font-size:.62rem; }
.wishlist-btn{ top:12px; right:12px; width:30px; height:30px; }
.wishlist-btn svg{ width:14px; height:14px; }
.card-condition{ bottom:8px; right:8px; padding:4px 8px; gap:3px; font-size:.6rem; }
.card-condition svg{ width:10px; height:10px; }
.cart-qty-pill{ bottom:12px; left:12px; padding:4px 9px; font-size:.68rem; }
.card-meta{ font-size:.7rem; margin-bottom:6px; }
.card-title{ font-size:1rem; margin-bottom:8px; }
.card-footer{ flex-direction:column; align-items:stretch; gap:8px; padding-top:14px; }
.card-price{ font-size:1.15rem; }
.add-btn{ justify-content:center; padding:11px 16px; font-size:.82rem; }
.controls-row{ flex-direction:column; align-items:flex-start; gap:14px; }
.controls-divider{ display:none; }
.feature-grid{ grid-template-columns: 1fr; }
.footer-grid{ grid-template-columns: 1fr 1fr; gap: 30px 20px; }
.section{ padding: 80px 0; }
.hero-banner{ padding: 32px 0; }
.hero-banner-photo{ height: 190px; }
.hero-banner-text .btn-primary{ width:100%; justify-content:center; }
.stats-strip{ grid-template-columns: 1fr; row-gap: 28px; }
.stat-item:not(:last-child)::after{ display:none; }
.newsletter-form{ flex-direction:column; }
.qv-info{ padding: 30px; }
.theme-grid{ grid-template-columns: repeat(3,1fr); gap: 18px 12px; }
.theme-card{ gap:8px; }
.theme-photo{ border-width:2px; }
.theme-photo svg{ width:32%; height:32%; }
.theme-name{ font-size:.72rem; }
.theme-toggle-btn{ padding:10px 20px; font-size:.82rem; }
}
@media (max-width: 360px){
.product-grid{ gap: 10px; }
.card{ padding: 12px; }
.card-title{ font-size:.92rem; }
.add-btn{ padding:10px 12px; font-size:.76rem; }
}
/* =========================================================
SEO PRODUKTOVÉ STRÁNKY (viz backend/generate_seo_pages.py) —
statické stránky mimo SPA, ale vizuálně navazují na zbytek webu.
========================================================= */
.seo-product-body{ background: var(--bg); }
.seo-product-nav{
display:flex; align-items:center; justify-content:space-between;
max-width:1100px; margin:0 auto; padding:24px 24px 0;
}
.seo-product-nav .logo{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:800; }
.seo-product-nav .logo-img{ height:32px; width:auto; }
.seo-nav-back{ color: var(--muted); font-weight:600; font-size:.88rem; }
.seo-nav-back:hover{ color: var(--yellow); }
.seo-product-page{ max-width:1100px; margin:0 auto; padding:32px 24px 80px; }
.seo-breadcrumb{ color: var(--muted); font-size:.85rem; margin-bottom:24px; }
.seo-breadcrumb a{ color: var(--muted); }
.seo-breadcrumb a:hover{ color: var(--yellow); }
.seo-product-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:48px; }
.seo-product-photo{
background: var(--panel); border-radius: var(--radius-md); overflow:hidden;
display:flex; align-items:center; justify-content:center; min-height:340px;
}
.seo-product-photo img{ width:100%; height:100%; object-fit:contain; }
.seo-photo-placeholder{ width:100%; min-height:340px; background: var(--panel-light); }
.seo-photo-placeholder.small{ min-height:64px; border-radius: var(--radius-sm); }
.seo-condition-badge{
display:inline-flex; align-items:center; gap:5px;
font-size:.72rem; font-weight:700; letter-spacing:.02em;
padding: 5px 12px; border-radius:8px; border: 1px solid;
}
.seo-product-info h1{ font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin:14px 0 8px; }
.seo-product-price{ font-family: var(--font-display); font-weight:800; font-size:1.8rem; color: var(--yellow); margin:16px 0 6px; }
.seo-availability{ color:#7dfaa2; font-size:.88rem; margin-bottom:20px; }
.seo-product-desc{ margin-bottom:28px; }
.seo-buy-btn{ display:inline-flex; align-items:center; gap:8px; padding:16px 28px; }
.seo-hint{ color: var(--muted); font-size:.8rem; margin-top:10px; }
.seo-related{ margin-top:64px; }
.seo-related h2{ font-size:1.2rem; margin-bottom:18px; }
.seo-related-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; }
.seo-related-card{
background: var(--panel); border-radius: var(--radius-sm); padding:14px;
display:flex; flex-direction:column; gap:8px; transition: transform .2s var(--ease), border-color .2s;
border:1px solid transparent;
}
.seo-related-card:hover{ border-color: var(--yellow); transform: translateY(-3px); }
.seo-related-card img, .seo-related-card .seo-photo-placeholder.small{ border-radius:8px; width:100%; aspect-ratio:1; object-fit:cover; }
.seo-related-card span{ font-size:.85rem; font-weight:600; line-height:1.3; }
.seo-related-card strong{ color: var(--yellow); font-size:.85rem; }
.seo-product-footer{ text-align:center; color: var(--muted); font-size:.82rem; padding:24px; }
.seo-product-footer a{ color: var(--muted); text-decoration:underline; }
.seo-product-footer a:hover{ color: var(--yellow); }
@media (max-width: 760px){
.seo-product-grid{ grid-template-columns: 1fr; gap:24px; }
.seo-related-grid{ grid-template-columns: repeat(2, 1fr); }
}