/* ==============================
FOQI – Global styles
============================== */
:root{
/* ===== UNIFIED E-SHOP COLORS ===== */
/* Tyto barvy se používají napříč celým e-shopem pro konzistentní design */
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--primary-color: #667eea;
--primary-dark: #5568d3;
--primary-darker: #653a8a;
/* DEFAULT pro celý e-shop - fialový gradient */
--current-product-bg: #667eea;
--current-product-bg-hover: linear-gradient(135deg, #5568d3 0%, #653a8a 100%);
--current-product-text: #fff;
--current-product-shadow: 0 0 20px rgba(102, 126, 234, 0.45);
--current-product-color: #667eea;
--current-product-color-hover: linear-gradient(135deg, #5568d3 0%, #653a8a 100%);
/* ===== PRODUCT-SPECIFIC COLORS (pro landing pages) ===== */
/* Tyto barvy se používají pouze na specifických produktových landing pages */
--focus-color: #2E3A87;
--relax-color: #7C3AED;
--imunity-color: #DC2626;
--premium-color: #FBBF24;
--premium-text-color: #000000;
/* Hover gradienty pro produktové landing pages */
--focus-color-hover: linear-gradient(135deg, #3d4cc2, #2E3A87);
--relax-color-hover: linear-gradient(135deg, #9d5eff, #7C3AED);
--imunity-color-hover: linear-gradient(135deg, #f87171, #dc2626);
--premium-color-hover: linear-gradient(135deg, #ffe37b, #fbbf24);
--bg-light: #f6f8f7;
--bg-dark: #122017;
--foqi-bg:#f7f8fb;
--foqi-text:#0e0f0f;
--foqi-cream:#f6f3ea;
--foqi-cream-2:#f4efe4;
--foqi-accent:#3c8f6b;
--foqi-black:#000000;
--foqi-green:#1c8f5b;
--foqi-green-focus: rgba(28, 143, 91, 0.41);
--foqi-ink:#0e0f0f;
--foqi-ink-70:#3b3b3b;
--foqi-radius:16px;
--foqi-shadow:0 6px 20px rgba(16,16,16,.08);
--foqi-paper: #ffffff;
--foqi-ink-60:#6b6f76;
--foqi-line:#e9ecf2;
/* accenty pro kolekce */
--foqi-focus:#1e6f9f; /* Focus = modrozelený akcent */
--foqi-relax:#6a4bb7; /* Relax = fialová */
--foqi-immunity:#d26a10; /* Imunita = oranžová */
--foqi-premium:#000000; /* Premium = černá */
--paper:#fff;
--ink:#141414;
--gold:#a07b36;
--gold-ink:#8e6b2f;
--cream:#f6f3ea;
--accent:#0f6; /* used only for focus rings */
--brand:#C8A24B; /* FOQI gold */
--brand-ink:#111; /* tmavý text */
--ok:#2BB673; /* zelené prvky (save/ok) */
--muted:#8D93A1; /* sekundární text */
--bg:#fff;
--card:#fff;
--line:#E8E8ED;
--radius:16px;
--shadow:0 8px 24px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.05);
--shadow-sm:0 4px 12px rgba(0,0,0,.05);
--pd-sticky-offset: 6.5rem;
}
*{ box-sizing:border-box; }
/* Základní styly odkazů - nepoužívej white globálně! */
a {
color: var(--foqi-green);
text-decoration: none;
}
a:hover {
color: var(--foqi-accent);
}
body{
font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
background: var(--foqi-cream);
color: var(--foqi-text);
}
body{
font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
body[data-theme="dark"]{ background-color:var(--bg-dark); color:#fff; }
body:not([data-theme="dark"]){ background-color:var(--bg-light); color:#000; }
/* ==============================
Product-specific color overrides (DISABLED for e-shop consistency)
============================== */
/*
POZNÁMKA: Tyto přepínače jsou ZÁMĚRNĚ ZAKOMENTOVANÉ, aby všechny stránky
(detail produktu, košík, checkout) používaly jednotný fialový gradient.
Pokud chceš produktově specifické barvy na marketing landing pages,
použij třídu .btn-product-specific místo .btn-foqi
*/
/* ZAKOMENTOVÁNO - pokud chceš produktové barvy zpět, odkomentuj:
body[data-product="focus"]{
--current-product-bg: var(--focus-color);
--current-product-bg-hover: var(--focus-color-hover);
--current-product-text:#fff;
--current-product-shadow: 0 0 20px rgba(46,58,135,.45);
--current-product-color: var(--focus-color);
--current-product-color-hover: var(--focus-color-hover);
}
body[data-product="relax"]{
--current-product-bg: var(--relax-color);
--current-product-bg-hover: var(--relax-color-hover);
--current-product-text:#fff;
--current-product-shadow: 0 0 20px rgba(124,58,237,.45);
--current-product-color: var(--relax-color);
--current-product-color-hover: var(--relax-color-hover);
}
body[data-product="imunity"]{
--current-product-bg: var(--imunity-color);
--current-product-bg-hover: var(--imunity-color-hover);
--current-product-text:#fff;
--current-product-shadow: 0 0 20px rgba(220,38,38,.45);
--current-product-color: var(--imunity-color);
--current-product-color-hover: var(--imunity-color-hover);
}
body[data-product="premium"]{
--current-product-bg: var(--premium-color);
--current-product-bg-hover: var(--premium-color-hover);
--current-product-text: var(--premium-text-color);
--current-product-shadow: 0 0 24px rgba(251,191,36,.55);
--current-product-color: var(--premium-color);
--current-product-color-hover: var(--premium-color-hover);
}
*/
body{
background: var(--foqi-bg);
color: var(--foqi-ink);
}
html, body{ overflow-x: clip; }
/* ==============================
Navbar
============================== */
.bg-dark{ --bs-bg-opacity:1; background-color:var(--foqi-black)!important; }
.bg-gold{ --bs-bg-opacity:1; background-color:var(--current-product-color)!important; }
.navbar{
--bs-navbar-padding-y:.8rem;
box-shadow:0 2px 16px rgba(15,20,18,.06);
}
.navbar .nav-link{ font-weight:500; }
.navbar .nav-link:hover,
.navbar .dropdown-item:hover{ color:var(--current-product-color); }
.navbar-toggler{
border:1px solid rgba(255,255,255,.95);
border-radius:14px;
}
@media (min-width: 992px) {
.navbar .navbar-brand { margin: 0; }
.navbar .nav-left, .navbar .nav-right { min-width: 0; }
.navbar .nav-left .navbar-nav,
.navbar .nav-right .navbar-nav { align-items: center; }
}
@media (max-width: 370px) {
.navbar-brand img { width: 100px; height: auto}
.navbar-brand {left: 45% !important;}
}
/* ==============================
Buttons / badges / cards / misc
============================== */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:12px 18px;
border-radius:999px;
color:#fff;
text-decoration:none;
font-weight:700
}
.btn:hover{filter:brightness(.95)}
.btn--ghost{background:#fff; color:var(--gold-ink)}
.btn:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.btn-success {
--bs-btn-color: #fff;
--bs-btn-bg: var(--current-product-color); /* základní zlatá */
--bs-btn-border-color: var(--current-product-color);
--bs-btn-hover-color: #fff;
--bs-btn-focus-shadow-rgb: 160, 123, 54; /* odpovídá #a07b36 */
--bs-btn-active-color: #fff;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: var(--current-product-color);
--bs-btn-disabled-border-color: var(--current-product-color);
}
.btn-black{ background:var(--foqi-black); color:#fff; border:0; border-radius:12px; font-weight:800;}
.btn-ghost{ border:1px solid rgba(0,0,0,.18); background:#fff; }
/* ==============================
E-shop Button Styles
============================== */
/*
IMPORTANT: Primary e-shop button styles (.btn-foqi, .btn-primary, .btn-checkout, etc.)
are now defined in /www/assets/css/shop.css with unified gradient design.
Shop.css loads AFTER style.css and contains priority overrides to ensure
consistent gradient buttons across Cart, Checkout, and Product pages.
For product landing pages that need product-specific colors, use:
- .btn-product-specific (defined below)
- Or apply product colors directly via inline styles
*/
/* Product-specific button variant (for landing pages outside e-shop flow) */
.btn-product-specific {
background: var(--current-product-color);
color: #fff;
border: 0;
border-radius: 12px;
font-weight: 800;
}
.btn-product-specific:hover {
background: var(--current-product-color-hover);
filter: none;
color: #fff;
}
.badge-soft{
background:rgba(160,123,54,.10);
color:var(--current-product-color);
border:1px solid rgba(160,123,54,.25);
}
.pill{
border:1px solid rgba(0,0,0,.12);
border-radius:999px;
padding:.35rem .7rem;
font-size:.9rem;
}
.card{
border-radius:14px;
border:1px solid rgba(0,0,0,.06);
box-shadow:0 6px 20px rgba(15,20,18,.04);
}
.footer{
background:var(--foqi-black);
border-top:1px solid rgba(0,0,0,.06);
color: white;
}
.section-title{ letter-spacing:.2px; color:#171717; }
.price{ font-weight:800; font-size:1.2rem; color:#111; }
.oldprice{ color:#9b9b9b; text-decoration:line-through; margin-left:.5rem; }
/* ==============================
Hero
============================== */
.foqi-hero{ margin:20px; border-radius:16px; background:var(--foqi-black); color:#fff; --hero-h:400px; min-height:var(--hero-h); overflow:hidden; }
.foqi-hero h1{ letter-spacing:.2px; }
.foqi-hero .row{ min-height:var(--hero-h); }
.hero-img-shadow{ filter: drop-shadow(0 22px 30px rgba(15,20,18,.18)); }
.bg-cream{ background:var(--foqi-cream-2); }
.hero-media{ height:100%; display:flex; align-items:center; justify-content:center; }
.hero-img{ max-height:100%; width:auto; object-fit:contain; }
@media (max-width:380px){ .foqi-hero{ --hero-h:360px; } }
/* ==============================
Offcanvas (mobilní menu)
============================== */
.offcanvas-start{
--bs-offcanvas-width:min(90vw,480px);
border-right:1px solid rgba(0,0,0,.06);
box-shadow:8px 0 24px rgba(0,0,0,.06);
}
.offcanvas-start .btn-close{ padding:.75rem; margin-right:-.5rem; }
.offcanvas-backdrop.show{ opacity:.25; }
.offcanvas .nav-link{ color:#111; }
.offcanvas .nav-link:hover{ text-decoration:underline; }
/* ==============================
Product Cards – carousel
============================== */
.cards-carousel{ position:relative; }
/* kolejnice */
.cards-track{
display:flex;
gap:18px;
padding:2px 20px;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none; -ms-overflow-style:none;
scroll-snap-type:x proximity;
scroll-padding-left:20px;
cursor:grab; user-select:none; -webkit-user-select:none;
touch-action:pan-x;
overscroll-behavior-inline:contain;
}
.cards-track::-webkit-scrollbar{ display:none; }
.cards-track.is-dragging{ scroll-snap-type:none; cursor:grabbing; }
@media (hover:hover) and (pointer:fine){
.product-card a, .product-card img{ -webkit-user-drag:none; }
.product-card img{ pointer-events:none; }
}
/* karta */
.product-card{
flex:0 0 auto;
scroll-snap-align:start;
width:82vw;
max-width:360px;
}
.product-card .ratio{ background:#fff; border-bottom:1px solid rgba(0,0,0,.06); }
.product-card img{ width:100%; height:100%; object-fit:contain; }
@media (min-width:768px){
.product-card{ width:calc(50vw - 48px); max-width:420px; }
}
@media (min-width:992px){
.product-card{ width:340px; }
}
/* fade „peek“ okraje */
.cards-carousel::before,
.cards-carousel::after{
content:""; position:absolute; top:0; bottom:0; width:22px; pointer-events:none; z-index:2;
transition:opacity .2s ease;
}
.cards-carousel::before{ left:0; transform:scaleX(-1); }
.cards-carousel::after{ right:0; }
.cards-carousel.at-start::before{ opacity:0; }
.cards-carousel.at-end::after{ opacity:0; }
/* alternativní track (nechán kvůli zpětné kompatibilitě) */
.cards-carousel { position: relative; }
.cards-track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: .5rem; -webkit-overflow-scrolling: touch; }
.cards-track::-webkit-scrollbar { display: none; }
.product-card { flex: 0 0 auto; min-width: 240px; scroll-snap-align: start; }
.pc-media { position: relative; }
.pc-badges {
position: absolute; top: .5rem; left: .5rem;
pointer-events: none;
z-index: 2;
}
/* šipky */
.cards-arrow{
background:rgb(0 0 0);
color:#fff;
box-shadow:0 4px 14px rgba(0,0,0,.25);
position: absolute; top: 50%; transform: translateY(-50%);
border: 0; background: rgba(0,0,0,.6); color: #fff;
width: 2.25rem; height: 2.25rem; border-radius: 50%;
display: grid; place-items: center;
z-index: 5;
}
.cards-arrow:hover { background: rgba(0,0,0,.75); }
.cards-arrow[disabled] { opacity: .4; pointer-events: none; }
.cards-arrow:active{ transform:translateY(-50%) scale(.97); }
.cards-arrow-prev { left: -.5rem; }
.cards-arrow-next { right: -.5rem; }
.cards-carousel.at-start .cards-arrow-prev { opacity: .4; pointer-events: none; }
.cards-carousel.at-end .cards-arrow-next { opacity: .4; pointer-events: none; }
@media (hover:hover) and (pointer:fine){
.cards-carousel.show-arrows-hover .cards-arrow{ opacity:0; pointer-events:none; }
.cards-carousel.show-arrows-hover:hover .cards-arrow{ opacity:1; pointer-events:auto; }
}
.cards-carousel.no-scroll .cards-arrow { display: none !important; }
/* ==============================
Product card – vizuální polish
============================== */
.product-card--elevated{
border-radius:16px;
box-shadow:0 10px 24px rgba(15,20,18,.06);
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
border:1px solid rgba(0,0,0,.06);
background:#fff;
}
.product-card--elevated:hover{
transform:translateY(-4px);
box-shadow:0 18px 36px rgba(15,20,18,.10);
border-color:rgba(160,123,54,.24);
}
.product-card .stretched-link::after{ content:""; background: transparent !important; opacity: 0 !important; }
.product-card:hover .stretched-link::after{ opacity:0 !important; }
.product-card,
.product-card .stretched-link { cursor: pointer; }
.product-card { position: relative; }
.product-card .stretched-link::after{ z-index: 1; }
.pc-actions{ position: relative; z-index: 5; padding: 0 1rem 1rem; }
.pc-actions .btn{ border-radius: 12px; padding: .6rem .9rem; font-weight: 700; }
.product-card--elevated:hover{
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(15,20,18,.09);
}
.pc-media{ position:relative; background:#fdfdfd; }
.pc-badges{ display:flex; align-items:flex-start; gap:6px; flex-direction:column; }
.pc-badge{
--_bg:rgba(17,17,17,.85);
background:var(--_bg);
color:#fff;
border:1px solid rgba(255,255,255,.22);
padding:.25rem .5rem;
font-size:.75rem;
border-radius:999px;
line-height:1; white-space:nowrap;
display:inline-flex; align-items:center; height:auto;
}
.pc-badge--sale{ --_bg:var(--current-product-color); color:#fff; }
.pc-badge--stock{ --_bg:rgba(17,17,17,.85); }
.pc-media img{ z-index:1; }
.pc-badges, .pc-quick{ z-index:3; position:absolute; }
.pc-badges{ left:10px; top:10px; }
.pc-quick{
position:absolute; right:10px; top:10px; z-index:3;
background:rgba(255,255,255,.85);
border:1px solid rgba(0,0,0,.08);
box-shadow:0 6px 18px rgba(0,0,0,.12);
border-radius:10px; padding:.35rem .45rem;
}
.pc-quick .bi{ font-size:1rem; color:#333; }
.pc-title{
font-weight:700; letter-spacing:.2px;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pc-sub{
display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
/* ==============================
USP tiles
============================== */
.usp-li{
background:#111; color:#fff;
border-radius:16px;
border:1px solid rgba(255,255,255,.06);
box-shadow:0 6px 20px rgba(0,0,0,.20);
}
.usp-li .text-muted{ color:rgba(255,255,255,.7)!important; }
.usp-card{
background:#fff; color:#111;
border:1px solid rgba(0,0,0,.06);
border-radius:14px;
box-shadow:0 6px 20px rgba(15,20,18,.04);
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.usp-card:hover{
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(15,20,18,.08);
border-color:rgba(160,123,54,.25);
}
.usp-thumb{
width:48px; height:48px; flex:0 0 48px;
border-radius:12px;
display:inline-flex; align-items:center; justify-content:center;
background:rgba(160,123,54,.12);
border:1px solid rgba(160,123,54,.35);
}
.usp-thumb .bi{ font-size:1.35rem; color:var(--current-product-color); line-height:1; }
.usp-thumb--sm{ width:40px; height:40px; border-radius:10px; }
.usp-thumb--sm .bi{ font-size:1.1rem; }
/* ==============================
Utilities
============================== */
.rating{ color:#ffb300; }
.ratio > picture,
.ratio > img{ position:absolute; inset:0; }
.ratio > picture > img,
.pc-img{ width:100%; height:100%; object-fit:contain; display:block; }
.pc-media{ position:relative; overflow:hidden; border-radius:14px 14px 0 0; }
/* hero */
.faqi-hero, .foqi-hero .hero-swiper { overflow: hidden; }
.hero-swiper .swiper-pagination { bottom: 12px; }
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
color: #222;
width: 42px; height: 42px; border-radius: 50%;
background: rgba(255,255,255,.8);
box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.hero-swiper .swiper-button-prev:after,
.hero-swiper .swiper-button-next:after { font-size: 18px; }
.hero-img-shadow { filter: drop-shadow(0 16px 24px rgba(0,0,0,.18)); }
.offcanvas-foqi .offcanvas-header { min-height: 56px; }
.offcanvas-foqi .navbar-brand img { height: 50px; }
.offcanvas-foqi .nav-link { font-size: 1.05rem; }
.offcanvas-foqi .collapse .nav-link { padding-left: .5rem; }
.offcanvas-foqi .input-group .form-control,
.offcanvas-foqi .input-group .input-group-text { border-color: var(--bs-border-color,#dee2e6); }
.offcanvas-foqi .input-group .input-group-text { border-right: 0; }
.offcanvas-foqi .input-group .form-control { border-left: 0; }
.offcanvas-search { --bs-offcanvas-height: auto; }
@media (max-width: 991.98px){ .offcanvas-search { --bs-offcanvas-height: 45vh; } }
.offcanvas-search .input-group .input-group-text { border-right: 0; }
.offcanvas-search .input-group .form-control { border-left: 0; }
/* Promo topbar nad headerem */
.promo-topbar .badge.bg-gold{ background-color:#d4af37; color:#111 !important; letter-spacing:.2px; }
/* Promo Topbar (centrovaná kapsle) */
.promo-topbar{ background:var(--current-product-color); border-bottom:1px solid rgba(255,255,255,.06); text-align:center; }
.promo-capsule{
margin:0 auto; padding:.4rem .75rem; border-radius:9999px;
backdrop-filter:blur(6px);
}
.promo-badge{
display:inline-block; padding:.2rem .6rem; border-radius:9999px;
background-color:#d4af37; color:#111; font-weight:700; letter-spacing:.2px;
text-transform:uppercase; line-height:1; animation:promoPulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .promo-badge{ animation:none; } }
@keyframes promoPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(212,175,55,.45); } 50%{ box-shadow:0 0 0 8px rgba(212,175,55,0); } }
.btn-close-plain{ color:inherit; background:transparent; border:0; line-height:1; opacity:.8; }
.btn-close-plain:hover{ opacity:1; }
.promo-capsule .btn.btn-foqi{ padding:.275rem .75rem; font-weight:600; }
.promo-text strong{ color:#ffd76a; }
@media (max-width:575.98px){ .promo-capsule{ padding:.35rem .6rem; } }
.promo-countdown{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"ss01" 0; white-space:nowrap; margin-left:.25rem; }
.promo-countdown b { letter-spacing:.5px; }
.promo-topbar.is-ended .promo-capsule{ opacity:.85; border-color:rgba(212,175,55,.35); box-shadow:none; }
.promo-topbar.is-ended .promo-badge{ background:#777; color:#111; animation:none; }
/* Mini-cart: polish */
#miniCartDropdown .list-group-item { padding:.6rem .75rem; }
#miniCartDropdown img { object-fit:cover; }
/* gifts */
.gift-tile { position:relative; padding-left:.75rem; padding-right:.75rem; }
.gift-free-ribbon{
font-size:.72rem; font-weight:700; color:#0f5132; background:#d1e7dd;
border:1px solid #badbcc; border-radius:.35rem; padding:.1rem .35rem;
position:absolute; top:-10px; left:-8px;
}
.bundle-card.active .fw-bold { text-decoration-thickness:2px; }
/* =========================================
Product detail polish (ActiveGreens-like)
========================================= */
/* karty */
.foqi-card{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:var(--foqi-radius); box-shadow:var(--foqi-shadow); }
/* chips/badges */
.foqi-badge, .badge.foqi-badge{ background:var(--current-product-color); color:#000; font-weight:700; border-radius:999px; padding:.25rem .6rem; }
.foqi-badge-dark{ background:#000; color:#fff; border-radius:999px; padding:.25rem .6rem; }
.foqi-chip{ background:var(--foqi-cream); color:#000; border:1px solid rgba(0,0,0,.12); border-radius:999px; padding:.35rem .6rem; font-weight:600; font-size:.9rem; }
/* text */
.foqi-lead{ color:var(--foqi-ink-70); }
.foqi-why li{ padding-left:.2rem; }
/* galerie */
.pg-thumbs{ margin:0; padding:0; }
.pg-thumb .ratio{ transition:transform .2s, box-shadow .2s, outline-color .2s; }
.pg-thumb .ratio.thumb-active{ outline: 2px solid color-mix(in srgb, var(--current-product-color) 45%, transparent); box-shadow:0 0 0 4px rgba(200,168,107,.20); }
.pg-thumb .ratio:hover{ transform:translateY(-2px); }
/* hero stats */
.foqi-hero-stats .stat{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.foqi-hero-stats .value{ font-weight:700; font-size:1.25rem; line-height:1; }
.foqi-hero-stats .label{ font-size:.8rem; color:#666; }
.foqi-hero-stats--overlay{ margin-top:-12px; }
.foqi-hero-stats--overlay .inner{ border-radius:999px; padding:.5rem .8rem !important; box-shadow:var(--foqi-shadow); }
.foqi-hero-stats .value{ font-weight:800; font-size:1rem }
.foqi-hero-stats .label{ font-size:.74rem; color:#6b6b6b }
/* bundly */
.bundle-card{
position:relative; display:flex; align-items:center; justify-content:space-between; gap:.9rem;
background:#fff; border:2px solid #e8dfcf; border-radius:calc(var(--foqi-radius) - .25rem);
padding:.8rem 1rem; transition:border-color .2s, box-shadow .2s, transform .12s; cursor:pointer;
}
.bundle-card:hover{ border-color:var(--current-product-color); transform:translateY(-1px); }
.bundle-card::before{ content:""; width:18px; height:18px; border-radius:50%; border:2px solid #d8c7a5; flex:0 0 18px; }
.bundle-card.active{ border-color:var(--current-product-color); box-shadow:0 0 0 4px rgba(200,168,107,.22); }
.bundle-card.active::before{ background:var(--current-product-color); border-color:var(--current-product-color); box-shadow:0 0 0 4px rgba(200,168,107,.20); }
.bundle-best{ background:var(--current-product-color); color:#000; font-weight:800; border-radius:999px; padding:.18rem .55rem; font-size:.78rem; }
.bundle-saving{ color:#0a7a48; font-weight:800; font-size:.8rem; }
.bundle-card .price-now{ display:inline-block; background:#e9f6ef; color:#0a7a48; font-weight:800; font-size:1.06rem; padding:.15rem .5rem; border-radius:.5rem; }
.bundle-card .price-was{ color:#8b8b8b; text-decoration:line-through; font-size:.85rem; margin-top:.1rem; }
/* dárky */
#gifts-strip{ --gift-min:138px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.5rem; }
@media (min-width:420px){ #gifts-strip{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.gift-tile{ position:relative; min-width:var(--gift-min); background:var(--foqi-cream-2); border:1px solid #eadfc9; border-radius:.8rem; padding:.5rem .6rem; transition:all .2s; }
.gift-tile img{ width:44px; height:44px; object-fit:cover; }
.gift-tile .small{ line-height:1.2; }
.gift-tile.active{ background:#fff; border-color:var(--current-product-color); box-shadow:0 0 0 3px rgba(200,168,107,.22); }
.gift-tile.inactive{ opacity:.6; filter:saturate(.75); }
.gift-free-ribbon{ position:absolute; top:-8px; left:-8px; background:#1c8f5b; color:#fff; font-weight:800; font-size:.72rem; padding:.2rem .45rem; border-radius:.5rem; }
/* trust row */
.foqi-trust{ list-style:none; margin:0; padding:0; }
.foqi-trust li{ display:flex; align-items:center; gap:.5rem; }
.foqi-trust .icon{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; }
/* --- Add to Cart / Sticky --- */
/* sjednocení vzhledu ceny */
[data-final-price]{ font-variant-numeric:tabular-nums; }
/* pokud produkt má bundly → schovej qty prvky (množství řeší uživatel v košíku) */
#pd-root[data-bundles]:not([data-bundles="[]"]) #field-qtyBundles,
#pd-root[data-bundles]:not([data-bundles="[]"]) [data-qty-plus],
#pd-root[data-bundles]:not([data-bundles="[]"]) [data-qty-minus]{ display:none !important; }
/* kompaktnější karta ATC */
#atc-block .foqi-addtocart{ padding:.75rem .9rem; }
/* Full-bleed article bez vnitřního paddingu */
.pd-root{display:block;width:100%;margin:0;padding:0;
/*background:rgb(246 248 247 / var(--tw-bg-opacity, 1));*/
}
/* Sekční systém: full-bleed backgroundy, text uvnitř containeru */
.pd-section{padding:2rem 0;}
@media (min-width:992px){ .pd-section{padding:3rem 0;} }
/* Témata pozadí (využívá tvoje CSS proměnné) */
.theme-white{background:#fff;}
.theme-cream{background:var(--foqi-cream);}
.theme-cream-2{background:var(--foqi-cream-2);}
.theme-ink{background:var(--foqi-black); color:#fff;}
.theme-ink a{color:#fff;}
.pill{border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:.35rem .7rem;font-size:.9rem;background:#fff}
.pill--dark{background:#0e0e0e;color:#fff;border-color:#0e0e0e}
.foqi-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;box-shadow:0 6px 20px rgba(15,20,18,.06);}
.foqi-chip{background:white;color:black;border:2px solid rgba(0,0,0,.12);border-radius:999px;padding:.35rem .6rem;font-weight:600;font-size:.9rem}
/* Galerie – vizuální polish */
.pg-thumbs{margin:0;padding:0}
.pg-thumb .ratio{transition:transform .2s, box-shadow .2s, outline-color .2s}
.pg-thumb .ratio.thumb-active{outline: 2px solid color-mix(in srgb, var(--current-product-color) 45%, transparent);box-shadow:0 0 0 4px rgba(200,168,107,.20)}
.pg-thumb .ratio:hover{transform:translateY(-2px)}
/* Grid rozložení dlaždic */
.gifts-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:.75rem;
}
/* Karta dárku */
.gift-card{
background:#fff;
border:2px dashed rgba(0,0,0,.22);
border-radius:14px;
padding:.5rem .6rem .7rem;
text-align:center;
position:relative;
transition:border-color .2s, box-shadow .2s, transform .12s, opacity .2s;
}
.gift-card:hover{ transform:translateY(-1px); }
/* Horní řádek s přeškrtnutou cenou */
.gift-card__top{
min-height:22px;
display:flex;
align-items:center;
justify-content:center;
}
.gift-card__old{
color:#9aa0a6;
font-weight:600;
font-size:.9rem;
}
/* Obrázek */
.gift-card__img img{
display:block;
width:auto;
height:40px;
object-fit:cover;
border-radius:10px;
margin:0 auto;
border:1px solid rgba(0,0,0,.06);
}
/* Název dárku */
.gift-card__name{
font-weight:600;
font-size:.9rem;
line-height:1.25;
min-height:2.2em; /* drží výšku u kratších názvů */
margin-bottom:.35rem;
}
/* Spodní badge ZDARMA */
.gift-card__free{
display:inline-block;
font-weight:700;
font-size:.8rem;
padding:.25rem .65rem;
border-radius:999px;
color:#1f7a3b;
background:#e9f7ee;
border:1px solid #cfead6;
}
/* Stav aktivní / neaktivní (ovládá JS) */
.gift-card.active{
border-style:solid;
border-color:#1f7a3b;
box-shadow:0 0 0 3px rgba(31,122,59,.16);
}
.gift-card.inactive{
opacity:.4;
}
.gift-card.inactive .gift-card__free{ opacity:.75; }
.gift-card__now{font-weight:700; margin-right:.35rem;}
.gift-card__old{opacity:.85; text-decoration-thickness:2px;}
.gift-card__old{
color:#77808f; /* barva textu staré ceny */
text-decoration-line: line-through;
text-decoration-color:#e34b4b; /* BARVA přeškrtnutí */
text-decoration-thickness:2px;
text-decoration-skip-ink:none;
}
/* zvýraznění samotné částky */
.gift-card__old .amount{
color:#111; /* kontrastnější než zbytek */
font-weight:800;
font-size:1.05rem;
}
/* měna může být méně výrazná */
.gift-card__old .currency{
opacity:.85;
font-weight:600;
}
.gift-card__old{
position:relative;
color:#77808f;
text-decoration:none; /* vypnout defaultní strike */
}
.gift-card__old::after{
content:"";
position:absolute; left:0; right:0;
top:55%; height:2px;
background:#e34b4b; /* barva čáry */
transform:rotate(-6deg); /* náklon čáry */
pointer-events:none;
}
/* Chip s cenou za kus */
.bundle-per-unit{
display:inline-flex;
align-items:center;
gap:.35rem;
padding:.18rem .6rem;
border-radius:999px;
background:var(--foqi-cream, #fff7e6);
border:1px solid rgba(201,164,98,.35); /* zlatavý nádech */
color:#6a4c12; /* tlumená „gold“ hnědá */
line-height:1.1;
}
.bundle-per-unit .muted{opacity:.8; font-weight:600; font-size:.85rem;}
.bundle-per-unit .num{font-weight:800; font-size:.95rem;}
.bundle-per-unit .suffix{opacity:.9; font-weight:600; font-size:.85rem;}
/* Volitelně: u aktivního BEST DEAL balíčku lehce zvýraznit */
.bundle-card.active .bundle-per-unit{
border-color: rgba(201,164,98,.55);
box-shadow: 0 0 0 2px rgba(201,164,98,.14);
}
/* GRID pro bundle-card: drží layout na desktopu, nesype se na mobilu */
.bundle-card{
display:grid;
grid-template-columns: 1fr auto;
align-items:center;
gap:.75rem 1rem;
}
.bundle-card .bundle-left{min-width:0;} /* lepší zalamování */
.bundle-card .bundle-right{min-width:9.5rem;}/* drž cena a chip */
@media (max-width: 576px){
.bundle-card{
grid-template-columns: 1fr; /* 1 sloupec na mobilu */
grid-auto-rows: auto;
text-align:left;
}
.bundle-card .bundle-right{
text-align:left; min-width:0;
}
}
/* Chip s cenou za kus – decentní gold styl */
.bundle-per-unit{
display:inline-flex; align-items:center; gap:.35rem;
padding:.18rem .6rem;
border-radius:999px;
background:var(--foqi-cream, #fff7e6);
border:1px solid rgba(201,164,98,.35);
color:#6a4c12;
line-height:1.1;
}
.bundle-per-unit .muted{opacity:.8; font-weight:600; font-size:.85rem;}
.bundle-per-unit .num{font-weight:800; font-size:.95rem;}
.bundle-per-unit .suffix{opacity:.9; font-weight:600; font-size:.85rem;}
.bundle-card.active .bundle-per-unit{
border-color: rgba(201,164,98,.55);
box-shadow: 0 0 0 2px rgba(201,164,98,.12);
}
/* Rozložení karty: vlevo text, vpravo ceny */
.bundle-card{
display:grid;
grid-template-columns: 1fr auto;
align-items:center;
gap:.75rem 1rem;
}
.bc-left{min-width:0}
.bc-right{min-width:10rem}
.bc-right .price-now{font-variant-numeric: tabular-nums;}
/* Mobil: vše pod sebe, bez rozjíždění */
@media (max-width: 576px){
.bundle-card{
grid-template-columns: 1fr;
text-align:left;
}
.bc-right{text-align:left; min-width:0}
}
/* „Za kus“ chip – jemný gold styl */
.bundle-per-unit{
display:inline-flex; align-items:center; gap:.35rem;
padding:.22rem .6rem;
border-radius:999px;
background:var(--foqi-cream, #fff7e6);
border:1px solid rgba(201,164,98,.35);
color:#6a4c12;
line-height:1.05;
}
.bundle-per-unit .muted{opacity:.8; font-weight:600; font-size:.82rem;}
.bundle-per-unit .num{font-weight:800; font-size:.95rem;}
.bundle-per-unit .suffix{opacity:.85; font-weight:600; font-size:.82rem;}
.bundle-card.active .bundle-per-unit{
border-color: rgba(201,164,98,.55);
box-shadow: 0 0 0 2px rgba(201,164,98,.12);
}
/* Lehká typografie pro lepší čitelnost čísel */
.price-now, .price-was, .bundle-per-unit .num{
font-variant-numeric: tabular-nums;
}
/* Overlay pro spolehlivé zarovnání */
.pg-arrows-overlay{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:space-between;
pointer-events:none; /* kliky propouští na img, kromě šipek */
padding:0 .4rem; /* malý vnitřní offset od okrajů */
}
/* Tlačítka šipek */
.pg-arrow{
pointer-events:auto;
width:42px;
height:42px;
border-radius:999px;
border:1px solid rgba(255,255,255,.5);
background:rgba(0,0,0,.45);
color:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow:0 2px 8px rgba(0,0,0,.25);
transition:transform .15s ease, background-color .15s ease, opacity .2s ease;
opacity:.95;
}
.pg-arrow:hover,
.pg-arrow:focus-visible{
background:rgba(0,0,0,.6);
transform:scale(1.05);
outline:2px solid var(--current-product-color);
outline-offset:2px;
}
/* Mobil menší, desktop větší */
@media (max-width: 575.98px){
.pg-arrow{ width:36px; height:36px; }
.pg-arrows-overlay{ padding:0 .25rem; }
}
@media (min-width: 992px){
.pg-arrow{ width:46px; height:46px; }
}
/* Volitelné: mírné skrytí, zobrazit při hoveru na desktopu */
@media (hover:hover){
.pg-arrow{ opacity:.0; }
.pg-arrows-overlay:hover .pg-arrow{ opacity:.95; }
}
.pg-arrow-right {
right: 0.5rem !important;
left: auto !important;
}
/* ať je křížek vždy nad obsahem modalu */
#pgLightbox .btn-close {
z-index: 1060; /* backdrop 1050, modal 1055 → 1060 je bezpečné */
}
#pgLightbox .modal-content { position: relative; } /* pro jistotu */
#pgLightbox .btn-close { pointer-events:auto; }
/* ===== 2-tone title ===== */
.foqi-title-2tone{ line-height:1.1; }
.foqi-title-accent{ color:var(--current-product-color, #a07b36); }
.foqi-title-rest{ color:var(--foqi-text, #0e0f0f); }
/* ===== Rating row (hvězdy) ===== */
.foqi-rating-row{ display:flex; align-items:center; }
.foqi-stars{
--star-size: 18px;
--star-gap: 2px;
position: relative;
width: calc(var(--star-size) * 5 + var(--star-gap) * 4);
height: var(--star-size);
mask: url('data:image/svg+xml;utf8,') no-repeat center/contain;
}
/* ===== Bundles grid ===== */
.foqi-bundles-grid{
display:grid;
gap:.75rem;
grid-template-columns:1fr;
}
@media (min-width: 576px){
.foqi-bundles-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1440px){
.foqi-bundles-grid{ grid-template-columns: repeat(3, 1fr); }
}
/* Karta balení – velká */
.bundle-card-xl{
position:relative;
display:flex;
flex-direction:column;
border:1.5px solid #e9ecef;
border-radius:16px;
padding:12px;
background:#fff;
cursor:pointer;
transition:border-color .15s ease, box-shadow .15s ease, transform .04s ease;
align-items: center;
}
.bundle-card-xl:hover{ border-color:#d6d9df; }
.bundle-card-xl.active{
border-color: var(--current-product-color, #a07b36);
box-shadow: 0 4px 18px rgba(0,0,0,.06);
}
/* Head */
.bc-head{ margin-bottom:.35rem; }
.bc-badges{ display:flex; gap:.25rem; margin-bottom:.25rem; }
.bc-badge{
font-size:.65rem; font-weight:700; letter-spacing:.02em;
padding:.15rem .4rem; border-radius:999px;
border:1px solid transparent;
}
.bc-badge-popular{ background:#FF7A00; color:#fff; border-color:#FF7A00; }
.bc-badge-best{ background:#efe7d6; color:#7b5a17; border-color:#e4d5b7; }
.bc-title{ font-weight:600; }
/* Cena */
.bc-price-now{ font-size:1.1rem; font-weight:800; }
.bc-price-was{ text-decoration:line-through; color:#9aa1a7; font-size:.9rem; }
.bc-perunit{ margin-top:.15rem; }
.bc-saving{ color:#1c8f5b; font-weight:700; font-size:.85rem; }
/* Přístupnost focus */
.bundle-card-xl:has(input:focus-visible){ outline:2px solid var(--current-product-color,#a07b36); outline-offset:3px; }
/* Zmenšení textů na XS, ať se to nerozbíjí */
@media (max-width: 360px){
.bc-badge{ font-size:.58rem; }
.bc-price-now{ font-size:1rem; }
}
/* ===== Bundle picker — zpřehlednění ===== */
/* grid: 3 sloupce od sm */
.foqi-bundles-grid{ display:grid; gap:.85rem; grid-template-columns:1fr; }
@media (min-width:576px){ .foqi-bundles-grid{ grid-template-columns:repeat(3,1fr); } }
/* karta: stejné výšky, výraznější orámování, vnitřní layout */
.bundle-card-xl{
position:relative; display:flex; flex-direction:column; justify-content:space-between;
min-height: 150px; /* stejné výšky */
border:2px solid #ece7db; border-radius:16px; padding:14px 12px;
transition:border-color .15s, box-shadow .15s, transform .04s;
background:#fff; cursor:pointer;
}
.bundle-card-xl:hover{ border-color: var(--current-product-color,#a07b36); }
.bundle-card-xl.active{ border-color: var(--current-product-color,#a07b36); box-shadow:0 0 0 4px rgba(200,168,107,.14); }
/* rohová stuha */
.bc-ribbon{
position:absolute; top:10px; right:10px; z-index:2;
background: #fff7e6; color:#7b5a17; border:1px solid #ebd8b3;
font-weight:800; font-size:.7rem; padding:.22rem .48rem; border-radius:999px;
box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.bundle-card-xl.is-popular .bc-ribbon{ background:#ffeeda; color:#8a4e00; border-color:#ffd7ad; }
.bundle-card-xl.is-best .bc-ribbon{ background:#efe7d6; color:#6f5314; border-color:#e4d5b7; }
/* badge řada – větší a „pill“ */
.bc-badges{ display:flex; gap:.35rem; margin-bottom:.35rem; flex-wrap:wrap; }
.bc-badge{
font-size:.72rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
padding:.22rem .55rem; border-radius:999px; border:1px solid transparent; line-height:1;
}
.bc-badge-popular{ background:#E85D04; color:#fff; border-color:#E85D04; }
.bc-badge-best{ background:#1C8F5B; color:#fff; border-color:#1C8F5B; }
/* saving řádek s tečkou */
.bc-saving{ color:#137b46; font-weight:800; font-size:.86rem; display:flex; align-items:center; gap:.35rem; }
.bc-saving-dot{ width:6px; height:6px; background:#137b46; border-radius:50%; display:inline-block; }
/* titulek balíčku */
.bc-title{ font-weight:700; }
/* pravý blok: ceny jako sloupec */
.bc-price{ margin-top:.25rem; }
.bc-price-stack{ display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.bc-price-now{ font-size:1.2rem; font-weight:900; font-variant-numeric:tabular-nums; }
.bc-price-was{ color:#9aa1a7; text-decoration: line-through; font-weight:700; }
/* „za kus“ chip – už ho máš, jen dotweakujeme odsazení */
.bc-perunit{ margin-top:.2rem; }
/* check bublina vpravo dole při výběru */
.bc-check{
position:absolute; right:10px; bottom:10px;
width:22px; height:22px; border-radius:50%;
border:2px solid #d8c7a5; background:#fff;
display:inline-flex; align-items:center; justify-content:center;
transition:all .15s ease;
}
.bundle-card-xl.active .bc-check{
border-color: var(--current-product-color,#a07b36); background: var(--current-product-color,#a07b36);
}
.bundle-card-xl.active .bc-check::after{
content:""; width:10px; height:6px; border:2px solid #fff; border-top:0; border-left:0; transform:rotate(45deg);
}
/* fokus pro přístupnost */
.bundle-card-xl:has(input:focus-visible){ outline:2px solid var(--current-product-color,#a07b36); outline-offset:3px; }
/* ===== AddToCart – zarovnání ceny a tlačítka ===== */
.foqi-addtocart-form .foqi-atc{
display: grid;
grid-template-columns: auto 1fr;
gap: .75rem;
align-items: center;
}
.foqi-addtocart-form .foqi-touchspin{
min-width: 120px;
}
/* řádek cena + CTA */
.foqi-addtocart-form .foqi-cta-wrap{
display: grid;
grid-template-columns: auto 1fr; /* cena vlevo, tlačítko vpravo */
align-items: center;
gap: .6rem;
}
/* „pilulka“ s cenou – viz sticky */
.foqi-addtocart-form .foqi-price{
font-weight: 900;
font-size: 1.05rem;
line-height: 1;
font-variant-numeric: tabular-nums;
background: #eaf6ef;
color: #137b46;
padding: .36rem .6rem;
border-radius: .6rem;
box-shadow: inset 0 0 0 1px #cfead6;
white-space: nowrap;
}
/* CTA */
.foqi-addtocart-form .foqi-cta{
height: 46px;
border-radius: 12px;
font-weight: 800;
letter-spacing: .2px;
padding: 0 16px;
width: 100%;
}
/* velmi úzké telefony – zalomení na dva řádky (tlačítko nad cenou) */
@media (max-width: 360px){
.foqi-addtocart-form .foqi-cta-wrap{
grid-template-columns: 1fr;
gap: .45rem;
}
.foqi-addtocart-form .foqi-price{
justify-self: start;
font-size: 1rem;
padding: .28rem .5rem;
}
}
.form-check-input:checked {
background-color: var(--foqi-green);
border-color: var(--foqi-green);
}
.form-check-input:focus {
border-color: var(--foqi-green-focus);
box-shadow: 0 0 0 .25rem var(--foqi-green-focus);
}
/* zelený focus kolečko pro switch */
.form-switch .form-check-input:focus {
--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23137b46'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
background-position: right center;
--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=checkbox] {
--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
/* ===== Reusable “bar” jako sticky, ale v kartě ===== */
.foqi-bar--card{
background:#fff;
border:1px solid rgba(0,0,0,.06);
border-radius:12px;
box-shadow: 0 4px 20px rgba(0,0,0,.06);
padding:.6rem .75rem .65rem;
}
.foqi-bar .bar-row{
display:grid;
grid-template-columns: auto 1fr; /* cena + tlačítko */
align-items:center;
gap:.6rem;
}
/* pilulka s cenou – shodně se sticky */
.foqi-price-pill{
font-weight:900;
font-size:1.6rem;
line-height:1;
font-variant-numeric: tabular-nums;
color:var(--foqi-black); /* foqi green */
padding:.28rem .6rem;
white-space:nowrap;
text-align: center;
}
/* CTA jako ve sticky */
.foqi-bar .bar-btn{
height:46px;
border-radius:12px;
font-weight:800;
letter-spacing:.2px;
padding:0 16px;
width:100%;
}
/* meta řádek */
.foqi-bar .bar-meta{ margin-top:.35rem; }
.foqi-bar .bar-status{
color:#137b46;
font-weight:800;
line-height:1.15;
margin-bottom:.05rem;
}
.foqi-bar .bar-status u{ text-underline-offset:2px; }
.foqi-bar .bar-benefits{
color:#6b7280;
font-size:.86rem;
line-height:1.2;
}
.foqi-dot{ display:inline-block; margin:0 .35rem; opacity:.55; }
/* úzké telefony: CTA přes celý řádek, cena pod ním */
@media (max-width: 360px){
.foqi-bar .bar-row{ grid-template-columns: 1fr; gap:.45rem; }
.foqi-price-pill{ font-size:1.45rem; padding:.24rem .5rem; }
}
/* dotykový spinner – menší mezera pod ním */
.foqi-touchspin.mb-2{ margin-bottom:.5rem !important; }
.foqi-usp-box {
display: flex;
flex-direction: column;
gap: 12px;
margin: 1rem 0;
}
.foqi-usp-item {
display: flex;
align-items: flex-start;
gap: 10px;
}
.foqi-usp-icon {
font-size: 1.3rem;
line-height: 1;
color: #1c8f5b; /* zelená (brand) */
flex-shrink: 0;
margin-top: 2px;
}
.foqi-usp-item p {
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
}
/* FOQI – Help */
.foqi-help .foqi-card { border-radius: 16px; }
.foqi-help .help-photo img{
width: 100px;
height: 100px;
object-fit: cover;
border: 3px solid var(--current-product-color, #a07b36);
}
.foqi-help .help-contacts{ width: 100%; }
/* Help section */
.foqi-help .foqi-card{
border:1px solid rgba(0,0,0,.06);
border-radius:12px;
background:#fff;
box-shadow:0 4px 16px rgba(0,0,0,.05);
}
.foqi-help .help-link i{
color:var(--current-product-color);
margin-right:.4rem;
}
.foqi-help .help-link{
font-weight:600;
font-size:.95rem;
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .45rem .8rem;
border: 1px solid var(--foqi-cream-2, #f1f1f1);
border-radius: 999px;
color: var(--foqi-text, #0e0f0f);
text-decoration: none;
line-height: 1;
transition: border-color .2s, box-shadow .2s, background .2s;
}
.foqi-help .help-link:hover{
color:var(--current-product-color);
border-color: var(--current-product-color, #a07b36);
box-shadow: 0 2px 6px rgba(0,0,0,.08);
background: #fffdf7;
}
/* jemné dorovnání desktopu */
@media (min-width: 768px){
.foqi-help .help-contacts{ justify-content: flex-start; }
}
/* D2C price block */
.bc-price.d2c { display:grid; gap:.35rem; align-content:start; justify-items: center;}
.bc-price.d2c .bc-save{
background: #1C8F5B;
color: #fff;
border-color: #1C8F5B;
font-weight:600;
padding:.25rem .5rem; letter-spacing:.2px; width:max-content;
}
.bc-price.d2c .bc-total{ display:flex; align-items:baseline; gap:.5rem;
justify-content: space-around;}
.bc-price.d2c .bc-total .was{
color:#8a8a8a; text-decoration:line-through; font-size:.95rem;
}
.bc-price.d2c .bc-total .now{
color: var(--foqi-text); font-weight:800; font-size:1.35rem;
}
.bc-price.d2c .bc-perunit{
color:#4b4b4b; font-size:.95rem;
}
.bc-price.d2c .bc-cta{
margin-top:.1rem;
display:inline-flex; align-items:center; justify-content:center;
padding:.5rem .75rem; border-radius:999px; font-weight:700;
background: var(--foqi-black); color:var(--foqi-cream);
box-shadow: 0 6px 18px rgba(0,0,0,.15);
transition: transform .15s ease, box-shadow .15s ease, background .2s;
}
.bundle-card-xl.active .bc-price.d2c .bc-cta,
.bundle-card.active .bc-price.d2c .bc-cta{
background: var(--current-product-color);
}
.bc-price.d2c .bc-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.18); }
/* ===== FOQI – D2C Landing polish ===== */
/* 1) HERO */
#lp-hero .lead { color: #3a3a3a; }
.foqi-benefit{display:flex;align-items:center;gap:.6rem;padding:.35rem .5rem;border-radius:999px;}
.foqi-benefit svg{flex:0 0 22px;color:var(--current-product-color);}
#lp-hero .btn-primary-foqi{
background:var(--current-product-color); color:#000; font-weight:800;
border:none; border-radius:999px; padding:.7rem 1.25rem;
box-shadow:0 8px 20px rgba(0,0,0,.15);
transition:transform .15s ease, box-shadow .15s ease, background .2s;
}
#lp-hero .btn-primary-foqi:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(0,0,0,.2); }
/* trust mini-bar pod benefity */
.lp-trust{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.35rem;}
.lp-trust .chip{
display:flex;align-items:center;gap:.4rem;
background:var(--foqi-cream-2); color:#222; font-size:.9rem;
padding:.4rem .7rem; border-radius:999px;
}
.lp-trust .chip svg{width:18px;height:18px;}
/* 2) Ingredients (dark section) */
#lp-ingredients{ padding-top:3rem; padding-bottom:3rem; }
#lp-ingredients .h2{ letter-spacing:.2px; }
.ing-card{
padding:1rem; display:flex; gap:.85rem; align-items:flex-start;
}
@media (min-width: 768px){ .ing-card{ padding:1.25rem 1.35rem; } }
.ing-thumb{
width:96px;height:96px; border-radius:.8rem; object-fit:cover; flex:0 0 96px;
box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.ing-title{ margin:.1rem 0 .25rem; font-weight:800; }
.ing-points{ margin:0; padding-left:1.1rem; }
.ing-points li{ margin:.15rem 0; }
/* lepší kontrast nad černým pozadím */
#lp-ingredients .text-muted{ color:#cfcfcf !important; }
/* 3) Drobná typografie */
.h2{font-weight:900;}
.h5{font-weight:800;}
/* ===== FOQI – Ingredients split sections ===== */
#lp-ingredients{padding:2.5rem 0 3rem; }
#lp-ingredients .section-title{ color:#fff; letter-spacing:.2px; }
.ingredient{ padding:2rem 0; border-top:1px solid rgba(255,255,255,.06); }
.ingredient:last-of-type{ border-bottom:1px solid rgba(255,255,255,.06); }
.ingredient .ing-photo{
width:100%; aspect-ratio:4/3; object-fit:cover;
border-radius:1.25rem; background:#000;
border:2px solid rgba(160,123,54,.55); /* gold ring */
box-shadow:0 16px 42px rgba(0,0,0,.45);
}
@media (max-width: 575.98px){ .ingredient .ing-photo{ aspect-ratio:1/1; } }
.ingredient .ing-card{
color:#111;padding:1.15rem 1.25rem;
}
@media (min-width:768px){ .ingredient .ing-card{ padding:1.35rem 1.6rem; } }
.ingredient .ing-title{ font-weight:900; margin:.1rem 0 .4rem; }
.ingredient .ing-points{ margin:0; padding-left:1.1rem; }
.ingredient .ing-points li{ margin:.2rem 0; }
.ingredient .note{ font-size:.92rem; color:#4b4b4b; }
/* střídání sloupců pro lepší rytmus */
@media (min-width:992px){
.ingredient.alt .col-media{ order:2; }
.ingredient.alt .col-copy{ order:1; }
}
/* ====== INGREDIENTS – kompaktní verze ====== */
#lp-ingredients .ingredient { padding-block: 0.75rem; }
#lp-ingredients .ingredient + .ingredient { border-top: 1px solid rgba(0,0,0,.06); }
#lp-ingredients .ingredient.alt { background: transparent; }
#lp-ingredients .ing-card {
padding: .9rem 1rem;
}
#lp-ingredients .ing-title {
line-height: 1.25;
color: var(--foqi-black,#000);
margin-bottom: .25rem;
}
#lp-ingredients .ing-points {
margin: 0 0 .25rem 0;
padding-left: 1.1rem;
font-size: .95rem;
}
#lp-ingredients .ing-points li { margin-bottom: .25rem; }
#lp-ingredients .note { font-size: .9rem; opacity: .85; }
#lp-ingredients .ing-photo {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: 14px;
}
@media (min-width: 992px){
#lp-ingredients .ing-card { padding: 1rem 1.1rem; }
#lp-ingredients .ing-points { font-size: .95rem; }
#lp-ingredients .ing-photo { aspect-ratio: 3/2; }
}
/* ===== INGREDIENTS – zkompaktnění a vyčištění ===== */
#lp-ingredients .ingredient{padding-block:.75rem}
#lp-ingredients .ingredient + .ingredient{border-top:1px solid rgba(0,0,0,.06)}
#lp-ingredients .col-copy{max-width:680px} /* lepší čitelnost dlouhých řádků */
#lp-ingredients .ing-card{
padding:.75rem .9rem;
flex-direction: column;
}
#lp-ingredients .ing-title{
margin:0 0 .25rem 0;
line-height:1.2;
font-weight:700;
color:var(--foqi-black,#000);
}
#lp-ingredients .ing-points{
margin:.1rem 0 .25rem 0;
padding-left:1rem;
font-size:.95rem;
line-height:1.45;
}
#lp-ingredients .ing-points li{margin-bottom:.15rem}
#lp-ingredients .note{font-size:.9rem;opacity:.75;margin-top:.1rem}
/* Obrázky menší: cap výšky + jemný rámeček/stín */
#lp-ingredients .ing-photo{
width:100%;
height:auto;
max-height:260px; /* klíč k menšímu vzhledu */
aspect-ratio:auto; /* necháme přirozený poměr */
object-fit:cover;
border-radius:12px;
border:1px solid rgba(0,0,0,.08);
box-shadow:0 6px 18px rgba(0,0,0,.08);
}
/* Alternace – obrázek vpravo u .ingredient.alt */
@media (min-width: 992px){
#lp-ingredients .ingredient.alt .col-media{order:2}
#lp-ingredients .ingredient.alt .col-copy{order:1}
#lp-ingredients .ing-card{padding:.85rem 1rem;
display: flex;
flex-direction: column;}
#lp-ingredients .ing-photo{max-height:220px} /* na desktop o chlup menší */
}
/* Ultra kompakt přepínač, když budeš chtít ještě menší:
přidej .compact-very na #lp-ingredients */
#lp-ingredients.compact-very .ing-photo{max-height:190px}
#lp-ingredients.compact-very .ing-card{padding:.6rem .75rem}
#lp-ingredients.compact-very .ing-points{font-size:.9rem}
/* WOW BENEFITS sekce */
.wow-benefits {
padding: 3rem 0;
background: var(--foqi-cream);
}
.wow-benefits .section-title {
color: var(--foqi-black);
font-weight: 900;
}
.benefit-card {
padding: 1.8rem 1.2rem;
border-radius: 1rem;
color: #fff;
text-align: center;
min-height: 100%;
transition: transform .25s ease, box-shadow .25s ease;
}
.benefit-card:hover {
transform: translateY(-6px);
box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.benefit-card .icon {
font-size: 2rem;
margin-bottom: .6rem;
}
.benefit-card h3 {
font-size: 1.25rem;
font-weight: 800;
margin-bottom: .5rem;
}
.benefit-card p {
font-size: .95rem;
line-height: 1.5;
margin: 0;
}
/* Barevné varianty — ladíme do FOQI barev */
.bc-energy { background: linear-gradient(135deg, var(--current-product-color), var(--current-product-color-hover)); }
.bc-focus { background: linear-gradient(135deg, #1c8f5b, #0f1412); } /* green-black akcent */
.bc-immunity { background: linear-gradient(135deg, #d35400, #a07b36); } /* oranžovo-zlatá */
.bc-calm { background: linear-gradient(135deg, #000, #444); } /* černá elegance */
/* 1) ikony + claims */
.foqi-icons{ background: linear-gradient(180deg, #fff 0%, #fff 40%, var(--foqi-cream) 100%); padding: 3rem 0; }
.foqi-icons .icon-row{
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(2,1fr); gap: 12px;
}
@media(min-width: 992px){ .foqi-icons .icon-row{ grid-template-columns: repeat(4,1fr); gap: 16px; } }
.foqi-icons .icon-row li{
background: #fff; border: 1px solid rgba(0,0,0,.06);
border-radius: 999px; padding: 14px 16px; text-align: center;
box-shadow: 0 10px 24px rgba(0,0,0,.06);
transition: transform .2s ease, box-shadow .2s ease;
}
.foqi-icons .icon-row li:hover{ transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,.12); }
.foqi-icons .icon-row h3{ font-size: 1.05rem; margin: 6px 0 2px; font-weight: 800; }
.foqi-icons .icon-row p{ font-size: .95rem; color: #555; margin: 0; }
/* jednoduché inline „ikony“ s gradientem */
.i{ display:inline-block; width:40px; height:40px; border-radius:50%;
position: relative; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.i:after{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow: 0 4px 10px rgba(0,0,0,.25) inset; opacity:.35; }
.i-bolt::before{ content:"⚡"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; }
.i-brain::before{ content:"🧠"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:18px; }
.i-shield::before{ content:"🛡️"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:18px; }
.i-heart::before{ content:"❤"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:16px; }
/* 2) ingredience – karty */
.foqi-ingredients-grid{ background: var(--foqi-cream); padding: 3rem 0; }
.foqi-ingredients-grid .ing-card{
background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:16px 18px;
box-shadow: 0 10px 26px rgba(0,0,0,.10);
transition: transform .2s ease, box-shadow .2s ease;
}
.foqi-ingredients-grid .ing-card:hover{ transform: translateY(-5px); box-shadow: 0 16px 36px rgba(0,0,0,.16); }
.foqi-ingredients-grid .ing-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.foqi-ingredients-grid .pill{
display:inline-block; background: #ffe7b3; color:#3b2a0d; border:1px solid rgba(160,123,54,.35);
padding:4px 10px; border-radius:999px; font-size:.85rem; font-weight:700; white-space:nowrap;
}
.foqi-ingredients-grid .ing-txt{ margin:0; color:#333; }
/* 3) věda – text + SVG křivka */
.foqi-science{ background:#fff; padding: 3rem 0; }
.foqi-science .qa{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:12px 14px; box-shadow: 0 6px 16px rgba(0,0,0,.06); margin-bottom:12px; }
.energy-curve{ width:100%; margin:0; border-radius:16px; border:1px solid rgba(0,0,0,.06); box-shadow: 0 8px 22px rgba(0,0,0,.08); background: linear-gradient(180deg,#fff, #faf7ef); }
/* 4) srovnání – tabulka */
.foqi-compare{ background-color: var(--foqi-cream); padding: 3.2rem 0; }
.foqi-compare .h2{ color:black; }
.compare-card{
background:#fff; border-radius:20px; padding:18px; max-width:980px; margin:0 auto;
box-shadow: 0 20px 40px rgba(0,0,0,.22);
}
.cmp-head{ display:flex; align-items:center; gap:12px; color: var(--foqi-black); }
.cmp-head strong{ font-size:1.05rem; }
.cmp-head span{ color:#444; }
.thumb{ width:54px; height:54px; border-radius:12px; background:#000; box-shadow: 0 6px 18px rgba(0,0,0,.25) inset; }
.thumb-foqi{ background: linear-gradient(135deg, var(--current-product-color), var(--current-product-color-hover)); }
.thumb-coffee{ background:#111; }
.cmp-list{ list-style:none; margin:10px 0 0; padding:0; }
.cmp-list li{
display:grid; grid-template-columns: 1fr 40px 40px;
align-items:center; gap:6px; padding:12px 8px; border-top:1px solid rgba(0,0,0,.08);
}
.cmp-list li span{ color:#222; }
.cmp-list .yes{ color: var(--foqi-green); font-weight:800; text-align:center; }
.cmp-list .no { color: #e33; font-weight:800; text-align:center; }
/* FOQI – ingredience s obrázkem */
.foqi-ingredients-grid .ing-card.ing-h{
display:grid;
grid-template-columns: 110px 1fr; /* média | text */
gap: 14px;
background:#fff;
border:1px solid rgba(0,0,0,.06);
border-radius:16px;
padding:14px;
box-shadow:0 10px 24px rgba(0,0,0,.10);
transition:transform .2s ease, box-shadow .2s ease;
}
@media (min-width: 576px){
.foqi-ingredients-grid .ing-card.ing-h{ grid-template-columns: 140px 1fr; padding:16px; }
}
.foqi-ingredients-grid .ing-card.ing-h:hover{
transform: translateY(-4px);
box-shadow:0 16px 36px rgba(0,0,0,.16);
}
.foqi-ingredients-grid .ing-media{
align-self:center;
}
.foqi-ingredients-grid .ing-thumb{
width:100%;
aspect-ratio: 4/3; /* moderní poměr; na mobilu drží tvar */
object-fit: cover;
border-radius:14px;
border:1px solid rgba(0,0,0,.08);
box-shadow: 0 6px 18px rgba(0,0,0,.08);
background:#f8f8f8;
}
.foqi-ingredients-grid .ing-body{ min-width:0; } /* prevence přetékání textu */
.foqi-ingredients-grid .ing-head{
display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px;
}
.foqi-ingredients-grid .pill{
display:inline-block; background:#ffe7b3; color:#3b2a0d;
border:1px solid rgba(160,123,54,.35);
padding:4px 10px; border-radius:999px; font-size:.85rem; font-weight:700; white-space:nowrap;
}
.foqi-ingredients-grid .ing-txt{ margin:0; color:#333; line-height:1.55; }
/* ===== FOQI compare – prémiový vzhled ===== */
.foqi-compare{
background: linear-gradient(180deg, #fff 0, #fff 40%, #f3efe5 100%); /* krémový přechod */
padding: 3.2rem 0;
}
.foqi-compare .text-muted{ color:#6b6b6b; }
.compare-card{
background:#fff; border-radius:22px; padding:18px;
box-shadow: 0 24px 48px rgba(0,0,0,.18);
max-width: 980px; margin: 0 auto;
border:1px solid rgba(0,0,0,.06);
}
/* Hlavička dvou sloupců */
.cmp-headrow{
display:grid; grid-template-columns: 1fr 1fr; gap: 16px;
padding: 8px 8px 12px;
border-bottom: 1px solid rgba(0,0,0,.08);
}
.cmp-head{
display:flex; align-items:center; gap:12px;
}
.cmp-head .sub{ display:block; font-size:.8rem; color:#666; margin-top:2px; }
.thumb{ width:48px; height:48px; border-radius:12px; box-shadow: inset 0 6px 16px rgba(0,0,0,.25); }
.thumb-foqi { background: linear-gradient(135deg, var(--current-product-color), var(--current-product-color-hover)); }
.thumb-coffee { background: #111; }
/* Grid řádků */
.cmp-list{
list-style:none; margin:0; padding:0;
display:grid; gap:0;
}
.cmp-list li{
display:grid; align-items:center;
grid-template-columns: 1fr 64px 64px; /* Label | FOQI | Káva */
gap:8px; padding:14px 8px;
border-bottom: 1px solid rgba(0,0,0,.06);
}
.cmp-list li:last-child{ border-bottom: 0; }
/* zebra + zvýraznění na hover (desktop) */
@media (hover:hover){
.cmp-list li:nth-child(odd){ background: rgba(160,123,54,.04); }
.cmp-list li:hover{ background: rgba(160,123,54,.08); }
}
/* štítky a ikonky */
.cmp-list .label{ color:#222; font-weight:600; line-height:1.35; }
.cmp-list .yes, .cmp-list .no{
display:flex; align-items:center; justify-content:center;
height:40px; width:100%;
border-radius:10px; font-weight:800;
}
.cmp-list .yes{ color:#0f5; background: rgba(28,143,91,.12); border:1px solid rgba(28,143,91,.3); }
.cmp-list .no { color:#e33; background: rgba(227,51,51,.10); border:1px solid rgba(227,51,51,.28); }
/* minimalistické SVG ikony */
.cmp-list .ico{
width:22px; height:22px; stroke: currentColor; stroke-width:2.5; fill:none;
}
/* Mobil – stack a lepší čitelnost */
@media (max-width: 575.98px){
.cmp-list li{
grid-template-columns: 1fr 48px 48px;
padding:12px 6px;
}
.cmp-list .label{ font-size:.98rem; }
}
/* Téma: drž se brandu */
.foqi-compare .h2{ color: var(--foqi-black); }
.energy-curve{
background: linear-gradient(180deg,#fff 0%, #faf7ef 100%);
border: 1px solid rgba(0,0,0,.06);
border-radius: 16px;
box-shadow: 0 10px 26px rgba(0,0,0,.10);
padding: 8px;
}
/* === FIX: INGREDIENCE – mobile overflow pillek, lepší zalamování === */
/* 1) menší grid na úzkých telefonech + čtvercový thumb */
@media (max-width: 400px){
.foqi-ingredients-grid .ing-card.ing-h{
grid-template-columns: 88px 1fr;
gap: 10px; padding: 12px;
}
.foqi-ingredients-grid .ing-thumb{
aspect-ratio: 1 / 1; /* stabilní čtverec */
}
}
/* 2) hlavička se zalomí do 2 řádků (titulek nahoře, pill pod ním) */
.foqi-ingredients-grid .ing-head{
flex-wrap: wrap; /* umožní zalomení */
row-gap: 4px;
}
.foqi-ingredients-grid .ing-head .h5{
flex: 0 1 100%; /* nad celý řádek */
margin: 0; /* už máme mezery přes row-gap */
}
/* 3) pill – na mobilu bez nowrapu a menší padding/font-size */
.foqi-ingredients-grid .pill{
max-width: 100%;
white-space: nowrap; /* default desktop */
}
@media (max-width: 575.98px){
.foqi-ingredients-grid .pill{
white-space: normal; /* dovolí zalomení */
font-size: .8rem;
line-height: 1.2;
padding: .25rem .5rem;
}
}
/* 4) drobný typografický polish pro body text na mobilu */
@media (max-width: 400px){
.foqi-ingredients-grid .ing-txt{ font-size: .95rem; }
}
/* === FIX: „Bubliny“ (foqi-icons) – na mobilu kompaktní kartičky === */
/* Mobil: z pillů uděláme karty s ikonou vlevo a textem vpravo */
@media (max-width: 575.98px){
.foqi-icons{ padding: 2rem 0; }
.foqi-icons .icon-row{
grid-template-columns: 1fr; /* 1 sloupec */
gap: 10px;
}
.foqi-icons .icon-row li{
border-radius: 14px; /* už ne mega-ovál */
padding: 12px;
text-align: left;
box-shadow: 0 6px 16px rgba(0,0,0,.06);
display: grid;
grid-template-columns: 40px 1fr;
column-gap: 10px;
align-items: center;
}
.foqi-icons .icon-row h3{
font-size: 1rem;
margin: 0 0 2px;
}
.foqi-icons .icon-row p{
font-size: .92rem;
color: #666;
}
/* ikona – lehký brandový podklad, ať nepůsobí „plovoucí“ */
.foqi-icons .i{
box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
}
}
/* Desktop: zachovej původní oválný vzhled a hover efekt */
@media (min-width: 576px){
.foqi-icons .icon-row li{ border-radius: 999px; }
}
/* ============== FOQI ICONS — MOBILE FIX (bez změny HTML) ============== */
@media (max-width: 575.98px){
/* jeden sloupec karet */
.foqi-icons .icon-row{
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
/* karta = 2-řádkový grid: [ikona] [nadpis] [popis] */
.foqi-icons .icon-row li{
display: grid;
grid-template-columns: 42px 1fr; /* ikona | text */
grid-template-rows: auto auto; /* h3 | p */
column-gap: 10px;
row-gap: 2px;
align-items: start;
width: 100%;
padding: 12px 14px;
border-radius: 14px;
text-align: left;
box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
/* ikona přes oba řádky */
.foqi-icons .i{
width: 42px; height: 42px;
grid-column: 1; grid-row: 1 / span 2;
border-radius: 50%;
box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
}
/* textová část – dovol zalomení, zruš staré šířkové limity */
.foqi-icons .icon-row h3,
.foqi-icons .icon-row p{
max-width: none !important;
white-space: normal;
min-width: 0; /* klíčové pro zalamování ve flex/grid kontejnerech */
}
.foqi-icons .icon-row h3{
grid-column: 2; grid-row: 1;
margin: 0 0 2px;
font-size: 1rem;
font-weight: 800;
}
.foqi-icons .icon-row p{
grid-column: 2; grid-row: 2;
margin: 0;
font-size: .92rem;
line-height: 1.35;
color: #666;
}
}
/* extra úzké telefony */
@media (max-width: 360px){
.foqi-icons .icon-row h3{ font-size: .98rem; }
.foqi-icons .icon-row p { font-size: .9rem; }
}
/* ===== Compare V2 – dvě karty vedle sebe (mobile-first) ===== */
.foqi-compare--v2{ padding: 3rem 0; }
.foqi-compare--v2 .cmp2-grid{
display: grid; gap: 16px;
grid-template-columns: 1fr; /* mobil: 1 sloupec */
}
@media(min-width: 992px){
.foqi-compare--v2 .cmp2-grid{ grid-template-columns: 1fr 1fr; }
}
.foqi-compare--v2 .cmp2-card{
background:#fff; border:1px solid rgba(0,0,0,.06);
border-radius: 20px; padding: 16px;
box-shadow: 0 20px 40px rgba(0,0,0,.12);
}
.foqi-compare--v2 .cmp2-figure{
display:flex; flex-direction: column; align-items:center; gap:10px;
margin: 0 0 6px;
}
.foqi-compare--v2 .thumb{ width:56px; height:56px; border-radius:14px; box-shadow: inset 0 6px 16px rgba(0,0,0,.25); }
.foqi-compare--v2 .thumb-foqi{ background: linear-gradient(135deg, var(--current-product-color), var(--current-product-color-hover)); }
.foqi-compare--v2 .thumb-coffee{ background:#111; }
.foqi-compare--v2 .cmp2-title{ font-size:1.05rem; font-weight:900; margin:0; color: var(--foqi-black); text-align:center; }
.foqi-compare--v2 .cmp2-sub{ color:#666; display:block; text-align:center; }
.foqi-compare--v2 .cmp2-list{
list-style:none; padding: 6px 0 0; margin: 0;
display:flex; flex-direction: column; gap: 8px;
}
.foqi-compare--v2 .cmp2-list li{
display:flex; gap:8px; align-items:flex-start;
padding:10px 12px; border:1px solid rgba(0,0,0,.06);
border-radius:12px; background:#fff;
}
.foqi-compare--v2 .cmp2-list li + li{ box-shadow: 0 2px 0 rgba(0,0,0,.02) inset; }
/* Ikonky – inline SVG, používá currentColor */
.foqi-compare--v2 .cmp2-list .ico{ flex:0 0 28px; width:28px; height:28px;
display:grid; place-items:center; border-radius:8px; }
.foqi-compare--v2 .cmp2-list .ico svg{ width:18px; height:18px; stroke: currentColor; stroke-width:2.5; fill:none; }
/* Pozitivní (FOQI) */
.foqi-compare--v2 .cmp2-card--foqi .cmp2-list li{ border-color: rgba(28,143,91,.25); }
.foqi-compare--v2 .cmp2-card--foqi .ico{ color: var(--foqi-green); background: rgba(28,143,91,.12); }
/* Negativní (běžná káva) */
.foqi-compare--v2 .cmp2-card--coffee .cmp2-list li{ border-color: rgba(227,51,51,.22); }
.foqi-compare--v2 .cmp2-card--coffee .ico{ color:#e33; background: rgba(227,51,51,.10); }
/* Hover (desktop) */
@media(hover:hover){
.foqi-compare--v2 .cmp2-list li{ transition: transform .15s ease, box-shadow .15s ease; }
.foqi-compare--v2 .cmp2-list li:hover{ transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.10); }
}
/* Extra úzké telefony – menší paddingy, aby se nic nelámalo */
@media(max-width: 360px){
.foqi-compare--v2 .cmp2-list li{ padding:8px 10px; }
.foqi-compare--v2 .cmp2-title{ font-size:1rem; }
}
/* ================= WOW BENEFITS – prémiový vzhled ================= */
.wow-benefits{
padding: 3rem 0;
background: linear-gradient(180deg,#fff 0,#fff 40%, #f3efe5 100%);
}
.wow-benefits .section-title{ color: var(--foqi-black); font-weight: 900; }
.benefit-card{
position: relative;
height: 100%;
padding: 18px 16px;
border-radius: 16px;
color: #fff;
overflow: hidden;
display: grid;
grid-template-rows: auto auto 1fr;
gap: 6px;
box-shadow: 0 16px 34px rgba(0,0,0,.18);
border: 1px solid rgba(255,255,255,.08);
transition: transform .18s ease, box-shadow .18s ease;
}
.benefit-card::after{ /* jemná „vignette“ pro čitelnost textu */
content:""; position:absolute; inset:0;
background: radial-gradient(120% 100% at 100% 0, rgba(255,255,255,.12) 0, transparent 55%);
pointer-events:none;
}
.benefit-card:hover{ transform: translateY(-6px); box-shadow: 0 22px 44px rgba(0,0,0,.22); }
.benefit-card:focus-visible{ outline: 3px solid rgba(255,255,255,.6); outline-offset: 2px; }
/* ikona v kruhu (sjednocená pro všechny karty) */
.benefit-icon{
width: 56px; height: 56px; border-radius: 50%;
display:grid; place-items:center;
background: rgba(255,255,255,.16);
border: 1.5px solid rgba(255,255,255,.45);
box-shadow: inset 0 8px 20px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.25);
margin: 2px auto 4px;
}
.benefit-icon svg{ width: 26px; height: 26px; stroke: #fff; stroke-width: 2.4; fill: none; }
/* text */
.benefit-card h3{
margin: 0;
font-size: 1.15rem;
font-weight: 900;
letter-spacing: .2px;
}
.benefit-card p{
margin: 0;
font-size: .95rem;
line-height: 1.5;
opacity: .95;
}
/* Barevné varianty – brand konzistentní */
.bc-energy { background: linear-gradient(135deg, var(--current-product-color), var(--current-product-color-hover)); }
.bc-focus { background: linear-gradient(135deg, #1c8f5b, #0f2f24); }
.bc-immunity{ background: linear-gradient(135deg, #d26a10, #a07b36); }
.bc-calm { background: linear-gradient(135deg, #000, #3b3b3b); }
/* Mobile polish: přiměřené velikosti, žádné přelivy */
@media (max-width: 575.98px){
.benefit-card{ padding: 16px 14px; border-radius: 14px; }
.benefit-icon{ width: 50px; height: 50px; }
.benefit-card h3{ font-size: 1.05rem; }
.benefit-card p{ font-size: .93rem; }
}
/* Vizuální sjednocení roztečí v gridu Bootstrapu */
#lp-benefits .row > [class*="col-"]{ display: flex; }
#lp-benefits .benefit-card{ width: 100%; }
.breadcrumb a {
color: black;
text-decoration: none
}
/* ===================== Newsletter bar ===================== */
.newsletter-bar{
background: #f6f3ea; /* cream */
padding: 18px 0;
border-top: 1px solid rgba(0,0,0,.06);
border-bottom: 1px solid rgba(0,0,0,.06);
}
.newsletter-form{
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
.newsletter-form input[type="email"],
.newsletter-form input[type="text"]{
font-size: 1rem;
border: 1px solid rgba(0,0,0,.18);
border-radius: 12px;
padding: 10px 12px;
width: 100%;
background: #fff;
}
.newsletter-form .hp{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.newsletter-form .nl-btn{
display: inline-flex; align-items: center; gap: 8px;
border: 1px solid var(--current-product-color-hover);
background: linear-gradient(135deg, var(--current-product-color), var(--current-product-color-hover));
color:#fff; padding: 10px 16px; border-radius: 12px; font-weight: 800;
}
.newsletter-form .nl-btn svg{ width: 18px; height: 18px; stroke:#fff; stroke-width:2.2; fill:none; }
.newsletter-form input:focus{ outline: 3px solid rgba(160,123,54,.25); }
/* ===================== Footer (white) ===================== */
.foqi-footer{
background: #fff;
color: #111;
padding: 36px 0 24px;
}
.foqi-footer a{ color: #111; text-decoration: none; }
.foqi-footer a:hover{ color: var(--current-product-color-hover); }
.foqi-footer .logo-title{
font-weight: 900; letter-spacing: .3px; color: var(--foqi-black);
}
.foqi-footer .footer-h{
font-size: .95rem; text-transform: uppercase; letter-spacing: .5px;
font-weight: 900; margin: 0 0 .6rem; color: var(--foqi-black);
}
.foqi-footer .footer-nav{ list-style: none; padding: 0; margin: 0; }
.foqi-footer .footer-nav li{ margin: .28rem 0; }
.foqi-footer .contact{ margin: 0; }
.foqi-footer .contact li{
display: flex; gap: 8px; align-items: center; margin: .35rem 0;
}
.foqi-footer .contact svg{
width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none;
}
.foqi-footer .contact svg path[fill]{ fill: currentColor; stroke: none; } /* pro některé tvary */
.foqi-footer .blog-list{
list-style: none; padding: 0; margin: 0;
}
.foqi-footer .blog-list li{
display: flex; justify-content: space-between; gap: 10px;
padding: .3rem 0; border-bottom: 1px dashed rgba(0,0,0,.08);
}
.foqi-footer .blog-list li:last-child{ border-bottom: 0; }
.foqi-footer .blog-list time{ color: #777; font-size: .85rem; white-space: nowrap; }
.foqi-footer .footer-sep{
border: 0; height: 1px; background: rgba(0,0,0,.08);
margin: 18px 0;
}
/* „chips“ badges */
.foqi-footer .chip{
display: inline-block;
background: #f6f3ea;
border: 1px solid rgba(160,123,54,.35);
color: #3b2a0d;
border-radius: 999px;
padding: 6px 12px;
font-weight: 700; font-size: .9rem;
}
/* Responsivita */
@media (max-width: 575.98px){
.newsletter-form{ grid-template-columns: 1fr; }
.foqi-footer{ padding: 28px 0 20px; }
}
/* ===== FOQI Breadcrumbs ===== */
.foqi-bc{
/*background: linear-gradient(180deg,#fff 0,#fff 50%, #f6f3ea 100%);*/
border-bottom: 1px solid rgba(0,0,0,.06);
padding: .5rem 0 .35rem;
}
/* základ */
.foqi-bc .breadcrumb{
--sep-color: #a0a0a0;
--link: #111;
--link-hover: var(--current-product-color-hover);
display: flex;
gap: .25rem;
margin: 0;
padding: 0;
background: transparent;
flex-wrap: nowrap;
}
/* položky – musí umět zkracovat */
.foqi-bc .breadcrumb-item{
display: inline-flex;
align-items: center;
min-width: 0; /* klíčové pro text-overflow ve flexu */
color: #6b6b6b;
font-size: .95rem;
}
.foqi-bc .breadcrumb-item + .breadcrumb-item::before{
content: "›";
color: var(--sep-color);
padding: 0 .35rem;
}
/* odkazy / text – ellipsis */
.foqi-bc .breadcrumb-item a,
.foqi-bc .breadcrumb-item span{
display: inline-block;
min-width: 0;
max-width: clamp(120px, 30vw, 420px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--link);
text-decoration: none;
}
.foqi-bc .breadcrumb-item a:hover{ color: var(--link-hover); text-decoration: underline; }
/* poslední položka jako "aktivní" (i když přijde jako ) */
.foqi-bc .breadcrumb-item:last-child a{
pointer-events: none;
color: #222;
font-weight: 800;
text-decoration: none;
}
/* Domů – drobná ikona (nepovinné) */
.foqi-bc .breadcrumb-item:first-child a::before{
content: "";
display:inline-block; width: .85rem; height: .85rem; margin-right: .25rem;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
background: currentColor;
opacity: .9;
}
/* Mobil: nechat jen první a poslední (Domů › Aktuální) */
@media (max-width: 575.98px){
.foqi-bc{ padding: .4rem 0; }
.foqi-bc .breadcrumb{ gap: .15rem; }
.foqi-bc .breadcrumb-item:not(:first-child):not(:last-child){ display: none; }
.foqi-bc .breadcrumb-item a, .foqi-bc .breadcrumb-item span{
max-width: 62vw; /* víc místa pro název produktu */
}
}
/* ===== FOQI breadcrumbs ===== */
.foqi-bc{
/*background: #fff;*/
padding: .5rem 0;
}
/* Fallback, když zůstaneš u .row uvnitř navu (zrušíme negativní okraje) */
.foqi-bc > .row{ margin-left: 0; margin-right: 0; padding-left: .75rem; padding-right: .75rem; }
.foqi-bc .breadcrumb{
--sep-color: #a0a0a0;
--link: #111;
--link-hover: var(--current-product-color-hover);
display: flex; align-items: center;
gap: .25rem;
margin: 0; padding: 0;
background: transparent;
flex-wrap: nowrap; /* vše na jeden řádek */
overflow: hidden;
}
/* položky musí umět zkracovat */
.foqi-bc .breadcrumb-item{
display: inline-flex; align-items: center;
min-width: 0; /* důležité pro text-overflow ve flexu */
color: #6b6b6b; font-size: .95rem;
}
.foqi-bc .breadcrumb-item + .breadcrumb-item::before{
content: "›";
color: var(--sep-color);
padding: 0 .45rem;
}
/* odkazy / text – ellipsis */
.foqi-bc .breadcrumb-item a,
.foqi-bc .breadcrumb-item span{
display: inline-block;
min-width: 0;
max-width: clamp(160px, 52vw, 640px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--link);
text-decoration: none;
}
.foqi-bc .breadcrumb-item a:hover{
color: var(--link-hover);
text-decoration: underline;
}
/* poslední položka jako aktivní (i kdyby přišla jako ) */
.foqi-bc .breadcrumb-item:last-child a{
pointer-events: none;
color: #222; font-weight: 800; text-decoration: none;
}
/* „Domů“ ikona před prvním odkazem (není nutné měnit HTML) */
.foqi-bc .breadcrumb-item:first-child a::before{
content: "";
display:inline-block; width:.9rem; height:.9rem; margin-right:.25rem;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
background: currentColor; opacity:.9;
}
/* Mobil: nech jen první a poslední (Domů › aktuální) a dej víc prostoru názvu */
@media (max-width: 575.98px){
.foqi-bc{ padding: .4rem 0; }
.foqi-bc .breadcrumb{ gap: .15rem; font-size: .92rem; }
.foqi-bc .breadcrumb-item:not(:first-child):not(:last-child){ display: none; }
.foqi-bc .breadcrumb-item a,
.foqi-bc .breadcrumb-item span{ max-width: 72vw; }
}
/* ===== LAYOUT ===== */
.lm-article{background:var(--cream); color:var(--ink); font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji"; line-height:1.6;}
.lm-wrap{max-width:980px; margin-inline:auto; padding:24px; }
.lm-hero{background:linear-gradient(180deg,#fff, #f8f6f0); border:1px solid var(--line); border-radius:20px; padding:28px; position:relative; overflow:hidden;}
.lm-kicker{font-size:.82rem; letter-spacing:.12em; color:var(--gold-ink); font-weight:700; text-transform:uppercase;}
.lm-hero h1{font-size:clamp(1.6rem, 4.5vw, 2.6rem); line-height:1.2; margin:.4rem 0 1rem;}
.lm-hero p{color:#2b2b2b; max-width:62ch;}
.lm-hero .lm-badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.lm-badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:.9rem}
.lm-badge i{font-style:normal}
.lm-cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.lm-grid{display:grid; gap:20px; margin-top:28px}
@media (min-width:900px){ .lm-grid{grid-template-columns: 1.1fr .9fr;} }
.lm-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px}
.lm-card h2, .lm-card h3{margin:0 0 .6rem}
.lm-card p{margin:.2rem 0 .6rem}
.lm-checks{display:grid; gap:10px}
.lm-check{display:flex; gap:10px; align-items:flex-start}
.lm-check i{color:var(--ok)}
.lm-note{font-size:.92rem; color:var(--muted)}
.lm-split{display:grid; gap:18px}
@media (min-width:800px){ .lm-split{grid-template-columns: 1fr 1fr;} }
.lm-list{padding-left:1rem}
.lm-list li{margin:.3rem 0}
.lm-faq details{border:1px solid var(--line); border-radius:12px; background:#fff; padding:14px 16px}
.lm-faq details+details{margin-top:10px}
.lm-faq summary{cursor:pointer; font-weight:700}
.lm-faq p{margin:.6rem 0 0}
.lm-quote{background:var(--paper); border-left:4px solid var(--gold); padding:16px; border-radius:8px}
.lm-legal{font-size:.85rem; color:var(--muted)}
.lm-img{aspect-ratio: 4/3; border-radius:14px; background:
radial-gradient(120% 120% at 0% 0%, #fff 0%, #f4efe4 60%, #efe9db 100%);
border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:12px; text-align:center; color:#7a6a4b}
.lm-img b{display:block; margin-top:8px}
.lm-cta-box{background:#0f1412; color:#fff; border-radius:18px; padding:20px; display:grid; gap:14px; border:1px solid rgba(255,255,255,.06)}
.lm-cta-box small{color:#d0d5cd}
.lm-price{font-size:1.6rem; font-weight:800}
.lm-save{color:#b0f0c7; font-weight:700}
.lm-table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px; border:1px solid var(--line); background:#fff}
.lm-table th, .lm-table td{padding:12px 14px; border-bottom:1px solid var(--line); text-align:left}
.lm-table tr:last-child td{border-bottom:none}
.lm-pill{display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:#fff}
/* Globál */
.section-title{ color:#111; }
/* Header (čistší, vzdušnější) */
.navbar{
--bs-navbar-padding-y:.9rem;
background:white !important;
border-bottom:1px solid white !important;
box-shadow:none;
}
.navbar .nav-link{ color:#fff; opacity:.9; }
.navbar .nav-link:hover{ color:var(--current-product-color); }
/* Promo topbar – decentní kapsle, bez „hnědé“ */
.promo-topbar{
background: #111;
color:#fff;
border-bottom:1px solid rgba(255,255,255,.06);
}
/* Karty produktů – světlé, ploché */
.product-card--elevated{
background: var(--foqi-paper);
border:1px solid var(--foqi-line);
box-shadow:none;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.product-card--elevated:hover{
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(17, 24, 39, .08);
border-color:#dfe3ea;
}
.pc-media{ background:#fff; }
.pc-badge{ background:#111; border-color:rgba(255,255,255,.18); }
.pc-badge--sale{ background:var(--current-product-color); }
/* Ceny a CTA – pilulky méně „křiklavé“ */
.price{ font-weight:900; color:#111; }
.oldprice{ color:#9aa0a6; }
/* Katalog grid spacing */
.cards-track{ padding: 2px 8px; gap: 16px; }
.product-card{ max-width: 340px; }
/* Newsletter pás – světlejší, plochý */
.newsletter-bar{
background:#fff;
border-top:1px solid var(--foqi-line);
border-bottom:1px solid var(--foqi-line);
}
/* Footer – bílý s jemnou linkou */
.foqi-footer{
background:#fff;
border-top:1px solid var(--foqi-line);
}
/* Breadcrumbs – čisté, bez krémového pozadí */
.foqi-bc{
/*background:#fff;*/
border-bottom:1px solid var(--foqi-line);
}
/* === Kolekční akcenty na kartách (barevná „pilulka“ v pravém horním rohu) === */
.pc-quick{ background:#fff; border:1px solid var(--foqi-line); }
[data-collection="focus"] .pc-quick{ border-color: color-mix(in oklab, var(--foqi-focus) 40%, #fff); }
[data-collection="relax"] .pc-quick{ border-color: color-mix(in oklab, var(--foqi-relax) 40%, #fff); }
[data-collection="immunity"].pc-quick,
[data-collection="immunity"] .pc-quick{ border-color: color-mix(in oklab, var(--foqi-immunity) 40%, #fff); }
[data-collection="premium"] .pc-quick{ border-color:#111; }
/* drobnosti */
.badge-soft{
background: rgba(160,123,54,.08);
border-color: rgba(160,123,54,.22);
color: var(--current-product-color);
}
/* Hero bloky – raději čisté černobílé s jedním akcentem */
.foqi-hero{
margin: 16px;
background: #111;
border-radius: 18px;
}
.hero-img-shadow{ filter: drop-shadow(0 14px 22px rgba(0,0,0,.22)); }
.foqi-hero {
max-height: 550px;
overflow: hidden; /* aby nic nepřetékalo */
padding-top: 0.5rem; /* zmenšíme defaultní bootstrap padding */
padding-bottom: 0.5rem;
}
.foqi-hero .hero-img {
max-height: 100%;
max-width: 100%;
height: auto;
object-fit: contain; /* nebo cover podle toho, co chceš */
}
.hero-media {
height: unset;
}
/* HERO – fix výšky slideru */
.foqi-hero {
margin: 16px;
border-radius: 18px;
background: #111;
/* zrušíme starý min-height přes proměnnou */
}
.foqi-hero .row { min-height: auto !important; } /* přepíše původní min-height */
.foqi-hero { overflow: hidden; }
/* ať má samotný Swiper pevnou max výšku */
.foqi-hero .hero-swiper,
.foqi-hero .swiper-wrapper,
.foqi-hero .swiper-slide {
height: 300px; /* držíme 400px na desktopu */
}
/* obrázek uvnitř slidu */
.foqi-hero .hero-img {
width: 100%;
height: 100%;
object-fit: cover; /* nebo 'contain', pokud nechceš ořez */
display: block;
}
/* mobil – nižší hero, ať nepůsobí mohutně */
@media (max-width: 576px){
.foqi-hero .hero-swiper,
.foqi-hero .swiper-wrapper,
.foqi-hero .swiper-slide { height: 260px; }
}
.foqi-hero .hero-swiper { height: min(350px, 40vh); }
/* pevná výška hero */
.foqi-hero { --hero-h: 350px; }
.foqi-hero .hero-swiper,
.foqi-hero .swiper-wrapper,
.foqi-hero .swiper-slide,
.foqi-hero .hero-media { height: var(--hero-h); }
/* vertikální zarovnání obsahu slide */
.foqi-hero .swiper-slide{
display:flex;
align-items:center;
justify-content:center;
}
/* zruší „nafukování“ z dřívějších stylů */
.foqi-hero .row,
.foqi-hero .col-lg-6 { min-height:auto !important; padding:0; }
/* samotný IMG: ať má výšku kontejneru, ne vlastní obří */
.foqi-hero img.hero-img{
width:100%;
height:100% !important;
max-height:none !important;
object-fit:cover; /* nebo contain, pokud nechceš ořez */
display:block;
}
/* pro jistotu, ať nic nepřetéká vizuálně */
.foqi-hero { overflow:hidden; }
.foqi-hero { --hero-h: 350px; }
.foqi-hero .hero-bg{
height: var(--hero-h);
border-radius:18px;
background-size: cover; /* vyplní a ořízne */
background-position: center;
background-repeat: no-repeat;
}
/* === Variant Picker === */
.variant-picker {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin: 1.25rem 0;
}
.variant-option {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
padding: 0.6rem 1.2rem;
border: 2px solid #ddd;
border-radius: 12px;
background-color: #fff;
font-size: 0.95rem;
font-weight: 600;
color: #333;
transition: all 0.2s ease-in-out;
min-width: 110px;
text-align: center;
}
/* Hover efekt */
.variant-option:hover {
border-color: #000;
background-color: #fafafa;
}
/* Skrytý input */
.variant-option input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* Aktivní (checked) */
.variant-option input[type="radio"]:checked + span {
color: #fff;
background-color: #000;
border-color: #000;
}
/* Efekt přes obal labelu */
.variant-option input[type="radio"]:checked ~ span {
background-color: #000;
color: #fff;
}
/* Styl samotného textu */
.variant-option span {
display: inline-block;
padding: 0.4rem 0.8rem;
border-radius: 10px;
transition: all 0.2s ease-in-out;
width: 100%;
}
/* Zvýraznění focusu pro přístupnost */
.variant-option input[type="radio"]:focus-visible + span {
outline: 3px solid #000;
outline-offset: 2px;
}
/* Responsivita */
@media (max-width: 576px) {
.variant-picker {
gap: 0.5rem;
}
.variant-option {
flex: 1 1 45%;
font-size: 0.9rem;
padding: 0.5rem 1rem;
}
}
#purchase-type{ margin-bottom:.75rem; }
.variant-picker{
display:flex; flex-wrap:wrap; gap:.6rem;
padding:.6rem; background:#fafafa; border:1px solid var(--line);
border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.variant-option{
position:relative; cursor:pointer; user-select:none;
border:2px solid var(--line); border-radius:999px;
background:var(--bg); color:var(--brand-ink);
padding:.55rem 1rem; font-weight:600; transition:.18s ease;
}
.variant-option:hover{ border-color:var(--brand); box-shadow:var(--shadow-sm); }
.variant-option input{ position:absolute; inset:0; opacity:0; }
.variant-option input:checked + span{
color:#fff; background:var(--brand);
}
.variant-option span{ display:inline-block; border-radius:999px; padding:.15rem .35rem; }
@media (max-width: 540px){
.variant-option{ flex:1 1 44%; text-align:center; }
}
.foqi-bundles-grid{
--min: 280px;
display:grid; gap:1rem; margin-top:1rem;
grid-template-columns: repeat(auto-fill, minmax(var(--min),1fr));
}
.bundle-card-xl{
position:relative; display:flex; flex-direction:column; gap:.5rem;
border:2px solid var(--line); border-radius:var(--radius);
background:var(--card); box-shadow:var(--shadow-sm);
transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
padding:1rem;
}
.bundle-card-xl:hover{ transform:translateY(-2px); border-color:#d6d6de; box-shadow:var(--shadow); }
.bundle-card-xl.active{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(200,162,75,.15), var(--shadow); }
.bc-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; }
.bc-title{ font-weight:700; line-height:1.2; }
.bc-badges{ display:flex; gap:.4rem; }
.bc-badge{
font-size:.7rem; letter-spacing:.02em; text-transform:uppercase;
padding:.25rem .5rem; border-radius:999px; font-weight:800; white-space:nowrap;
}
.bc-badge-popular{ background:#ffece1; color:#C74C00; border:1px solid #ffd2b5; }
.bc-badge-best{ background:#fff7e7; color:#7a5a1b; border:1px solid #f2d9a2; }
.bc-price img{ display:block; width:auto; max-width:100%; height:110px; object-fit:contain; margin:auto; }
.bc-price.d2c{ display:grid; gap:.35rem; margin-top:.25rem; }
.bc-save{ background:rgba(43,182,115,.12); color:var(--ok); font-weight:800; border:1px solid rgba(43,182,115,.35); }
.bc-total{
display: flex;
align-items: center;
gap: .5rem;
flex-direction: column;
}
.bc-total .was{ color:#9aa0ad; text-decoration:line-through; font-weight:600; }
.bc-total .now{ font-size:1.35rem; font-weight:900; }
.bc-perunit{ color:var(--muted); font-weight:600; }
.bc-cta{
margin-top:.25rem; text-align:center; font-weight:800;
background:var(--brand); color:#fff; border-radius:12px; padding:.6rem .9rem;
transition:filter .15s ease;
}
.bundle-card-xl:hover .bc-cta{ filter:brightness(.95); }
.bundle-card-xl input[type="radio"]{ display:none; }
.text-product{ color:var(--current-product-color) !important; }
.bg-product{ background-color:var(--current-product-color) !important; }
.border-product{ border-color:color-mix(in srgb, var(--current-product-color) 25%, transparent) !important; }
.shadow-product{ box-shadow:0 10px 15px -3px color-mix(in srgb, var(--current-product-color) 45%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--current-product-color) 45%, transparent)!important; }
.text-product-contrast{ color:var(--current-product-text) !important; }
.bg-surface { background: color-mix(in srgb, var(--current-product-color) 6%, transparent); }
.bg-surface-strong { background: color-mix(in srgb, var(--current-product-color) 12%, transparent); }
/* Utility helpers */
.rounded-xl{ border-radius:1rem; }
.rounded-xxl{ border-radius:1.5rem; }
.ratio-4x3{ --bs-aspect-ratio: 75%; }
.thumb{ border:2px solid transparent; cursor:pointer; }
.thumb.active{ border-color:var(--current-product-color); box-shadow:0 0 0 .25rem color-mix(in srgb, var(--current-product-color) 40%, transparent); }
.icon{ font-family:'Material Symbols Outlined'; vertical-align:middle; }
/* Dark section fallback (když nechceš systémový dark) */
.dark-card{ background: #0f0f13; border-color:#2b2b31; }
/* Badge-y se mají absolutně pozicovat k labelu */
#bundle-picker label.w-100{
position: relative;
display: block;
cursor: pointer;
}
/* Hover/focus zvýraznění karty */
#bundle-picker .card{
transition: box-shadow .2s ease, outline-color .2s ease, transform .1s ease;
}
#bundle-picker label:hover .card,
#bundle-picker input[type="radio"].btn-check:focus ~ .card{
box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--current-product-color) 15%, transparent);
}
/* AKTIVNÍ: když je radio checked, zvýrazni kartu */
#bundle-picker input[type="radio"].btn-check:checked ~ .card{
outline: 2px solid color-mix(in srgb, var(--current-product-color) 65%, transparent);
box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
transform: translateY(-1px);
}
/* Volitelné – jemné zvýraznění aktivního “sloupce” */
#bundle-picker input[type="radio"].btn-check:checked ~ .card .bc-total .now{
color: var(--current-product-color);
}
#bundle-picker [data-bundle-id].is-active .card{
outline: 2px solid color-mix(in srgb, var(--current-product-color) 45%, transparent);
}
.badge {
z-index: 1;
}
/* ===== Product gallery ===== */
.pg-thumbs{
/* d-flex + gap řešíme v HTML, tady jen drobnosti */
margin: 0;
padding: 0;
}
.pg-thumbs .pg-thumb .ratio{
/* sjednocená velikost thumbů */
width: 96px; /* můžeš změnit na 84–112px dle potřeby */
max-width: 20vw;
transition: box-shadow .15s ease, transform .08s ease, border-color .15s ease;
}
.pg-thumbs .pg-thumb img{
display: block;
}
/* hover */
.pg-thumbs .pg-thumb:hover .ratio{
box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--current-product-color) 18%, transparent);
transform: translateY(-1px);
}
/* aktivní náhled – doplníme border a jemný ring */
.pg-thumbs .thumb-active{
outline: 2px solid color-mix(in srgb, var(--current-product-color) 55%, transparent);
box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--current-product-color) 20%, transparent);
}
/* pro menší obrazovky klidně o fous menší */
@media (max-width: 576px){
.pg-thumbs .pg-thumb .ratio{ width: 84px; }
}
/* ===== Sticky Add-to-Cart (mobile, čistá verze) ===== */
#stickyBar{
position:fixed; left:0; right:0; bottom:0; z-index:1060;
background:#fff;
border-top:1px solid rgba(0,0,0,.08);
box-shadow:0 -10px 24px rgba(0,0,0,.08);
padding: .55rem .75rem max(.5rem, env(safe-area-inset-bottom));
width:100%; overflow-x:hidden;
transition:transform .18s ease, opacity .18s ease;
}
#stickyBar.is-hidden{ transform:translateY(110%); opacity:0; pointer-events:none; }
/* vnitřní layout */
#stickyBar .sticky-wrap{
display:flex; align-items:center; gap:.75rem;
}
#stickyBar .sticky-price{
flex:1 1 auto; min-width:0;
font-weight:900; font-size:1.08rem; line-height:1;
font-variant-numeric:tabular-nums; color:#111;
padding:.2rem .5rem;
}
#stickyBar .sticky-btn{
flex:0 0 auto; height:46px; border-radius:12px;
font-weight:800; padding:0 16px; white-space:nowrap; max-width:100%;
}
/* sekundární řádek s benefity – volitelný */
#stickyBar .sticky-meta{
margin-top:.25rem; color:#6b7280; font-size:.86rem; line-height:1.2;
}
#stickyBar .sticky-meta .status{ color:#137b46; font-weight:800; }
/* zrušit bootstrapí negativní okraje, kdyby ses držel .row/.col- */
#stickyBar .row{ margin-left:0 !important; margin-right:0 !important; }
#stickyBar [class^="col-"], #stickyBar [class*=" col-"]{
padding-left:.75rem !important; padding-right:.75rem !important;
box-sizing:border-box;
}
/* velmi úzké telefony – button na celý řádek, cena pod něj */
@media (max-width:360px){
#stickyBar .sticky-wrap{ flex-direction:column; align-items:stretch; gap:.45rem; }
#stickyBar .sticky-btn{ width:100%; height:44px; }
#stickyBar .sticky-price{ align-self:flex-start; font-size:1rem; padding:.15rem .4rem; }
}
/* desktop: bar neschovávej */
@media (min-width:992px){ #stickyBar{ display:none !important; } }
/* ===== Support box (mobile) ===== */
.foqi-help{
--help-border: color-mix(in oklab, var(--current-product-bg) 45%, #ffffff 0%);
--help-bg: color-mix(in oklab, var(--current-product-bg) 4%, #ffffff 96%);
border:1px solid var(--help-border);
border-radius: 14px;
background: var(--help-bg);
box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.foqi-help__photo{
width:64px; height:64px; object-fit:cover;
box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.foqi-help__icon{
font-size: 20px; line-height: 1; display:inline-block; vertical-align: middle;
color: var(--current-product-bg);
}
/* Telefon jako „pill“ */
.foqi-help__tel-link{
display:inline-flex; align-items:center;
padding:.5rem .75rem;
border-radius: 999px;
border:1px solid color-mix(in oklab, var(--current-product-bg) 70%, #fff 0%);
background:#fff;
color:#0b1222;
font-weight:800;
letter-spacing:.02em;
text-decoration:none;
box-shadow: 0 4px 14px rgba(0,0,0,.06);
transition: transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.foqi-help__tel-link:hover{
background: var(--current-product-bg-hover);
color: var(--current-product-text);
border-color: transparent;
transform: translateY(-1px);
box-shadow: var(--current-product-shadow, 0 6px 18px rgba(0,0,0,.12));
}
/* Otevírací doba – jemný štítek */
.foqi-help__hours{
padding:.35rem .6rem;
border-radius: 999px;
border:1px dashed rgba(0,0,0,.08);
background: rgba(0,0,0,.02);
}
/* Větší rohy helper (pokud někde používáš) */
.rounded-xl{ border-radius: 14px !important; }
.border-product{ border-color: var(--current-product-bg) !important; }
.display-5 {
font-weight: 800;
}
.foqi-rating-row .material-symbols-outlined {
color: #f5bc00;
}
/* Základní styl pro Material Symbols (prázdná – obrys) */
.material-symbols-outlined{
font-family: "Material Symbols Outlined";
font-weight: normal; /* nenech to přepsat globálním font-weight */
font-style: normal;
line-height: 1;
display: inline-block;
vertical-align: middle;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* Plná hvězda (vyplněná) */
.star-full{
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* Volitelně velikost/ barva pro celý rating */
.rating .material-symbols-outlined{ font-size: 20px; color: currentColor; }
/* prázdná (obrys) */
.material-symbols-outlined{
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
font-family: "Material Symbols Outlined";
font-weight: normal; font-style: normal; line-height: 1;
}
/* plná (vyplněná) */
.ms-fill{
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.display-6 {
font-weight: 800;
}
/* Helper: ancestor pro sticky nikdy nesmí mít overflow != visible */
.sticky-ancestor-fix { overflow: visible !important; }
/* Sticky jen pro galerii – bezpečné chování */
/* Ancestor řádku pro sticky – žádné overflow, žádný stretch */
.pd-sticky-scope{
overflow: visible !important; /* klíčové pro sticky */
align-items: flex-start !important; /* zruší natahování výšky */
}
/* Sticky přímo na levý sloupec od lg */
@media (min-width: 992px){
.pd-sticky-col{
position: sticky;
top: var(--pd-sticky-offset);
align-self: flex-start; /* jistota, že se sloupec „nelepí“ na stretch */
overflow: visible;
}
/* pro jistotu – i děti a předci uvnitř řádku bez overflowu */
.pd-sticky-scope > [class*="col-"]{ overflow: visible; }
}
/* Pokud máš někde staré varianty: vypni je, ať si nešlapou na paty */
@media (min-width: 992px){
.pg-sticky { position: static !important; } /* už nepoužíváme */
}
/* Upsell modal */
#upsellList .upsell-card {
border: 1px solid var(--bs-border-color);
border-radius: 1rem;
transition: box-shadow .2s ease, transform .15s ease;
height: 100%;
}
#upsellList .upsell-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
#upsellList .upsell-img {
width: 100%;
height: 140px;
object-fit: cover;
border-radius: .75rem;
}
#upsellList .upsell-price {
font-weight: 800;
color: var(--current-product-color, #2E3A87);
}
.upsell-modal{
z-index: 1061;
}
/* ======= UPSSELL MODAL — FINAL ======= */
/* hlavička */
.upsell-modal .upsell-head{
background: var(--current-product-color, #2E3A87);
color: var(--current-product-text, #fff);
}
.upsell-modal .upsell-head .material-symbols-outlined{
font-variation-settings: "FILL" 1, "wght" 700, "opsz" 24, "GRAD" 0;
}
/* karta */
.upsell-card{
border: 2px solid var(--bs-border-color);
border-radius: 1rem;
padding: 1rem;
height: 100%;
display: flex;
gap: 1rem;
background: #fff;
transition: box-shadow .2s ease, transform .15s ease, border-color .2s ease;
align-items: center;
flex-direction: column-reverse;
}
.upsell-card:hover{
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.upsell-card.is-primary{
border-color: color-mix(in srgb, var(--current-product-color) 55%, #fff);
box-shadow: 0 8px 24px color-mix(in srgb, var(--current-product-color) 22%, transparent);
}
/* vnitřek karty */
.upsell-info{ flex:1 1 auto; min-width:0; }
.upsell-img{
flex:0 0 260px; max-width:260px; min-height:180px;
border-radius:.75rem; background:#f7f7f7 center/cover no-repeat;
}
@media (max-width: 991.98px){
.upsell-card{ flex-direction: column-reverse; }
.upsell-img{ width:100%; max-width:100%; min-height:160px; }
}
.upsell-subtitle{ font-weight:800; color:var(--current-product-color,#2E3A87); margin-bottom:.25rem; }
.upsell-name{ font-weight:800; line-height:1.2; margin:0 0 .25rem; font-size:clamp(1.05rem, 2.2vw, 1.25rem); }
.upsell-desc{ color: var(--bs-secondary-color); margin-bottom:.5rem; }
.upsell-price{ display:flex; align-items:baseline; gap:.75rem; margin:.25rem 0 .75rem; }
.upsell-price .now{ font-weight:900; font-size:clamp(1.2rem, 3.2vw, 1.5rem); color:#111; }
.upsell-price .was{ color: var(--bs-secondary-color); text-decoration: line-through; }
.badge-save{
display:inline-flex; align-items:center; gap:.35rem;
border-radius:999px; font-size:.75rem; font-weight:800;
padding:.35rem .6rem; color:#6f2cff; background:#efe8ff; border:1px solid #e0d5ff;
}
.upsell-cta{
border-radius:.75rem; font-weight:800; padding:.75rem 1rem;
border:2px solid var(--current-product-color,#2E3A87);
color:var(--current-product-color,#2E3A87); background:#fff;
}
.upsell-cta:hover{ background: color-mix(in srgb, var(--current-product-color) 6%, #fff); }
.upsell-card.theme-relax { --current-product-color: var(--relax-color); }
.upsell-card.theme-imunity { --current-product-color: var(--imunity-color); }
.upsell-card.theme-premium { --current-product-color: var(--premium-color); }
/* ======= CAROUSEL ======= */
.upsell-carousel{ position:relative; margin:.25rem 0 0; padding-bottom:8px; }
/* track – mobile-first: drag, bez scrollbarů */
.upsell-carousel .cards-track{
display:flex; gap:14px;
overflow-x:auto; -webkit-overflow-scrolling:touch;
scroll-snap-type:x proximity; scroll-behavior:smooth;
padding:2px 8px;
scrollbar-width:none; -ms-overflow-style:none;
cursor:grab; user-select:none; touch-action:pan-x;
}
.upsell-carousel .cards-track:active{ cursor:grabbing; }
.upsell-carousel .cards-track::-webkit-scrollbar{ display:none; }
/* slide šířky – 1 a „peek“ druhé na mobilu */
.upsell-carousel .upsell-slide{
flex:0 0 86%;
max-width:560px;
scroll-snap-align:start;
scroll-margin-left:8px;
}
/* ≥576: trochu širší, pořád scroll */
@media (min-width:576px){
.upsell-carousel .upsell-slide{ flex-basis: 65%; }
}
/* ≥992: desktop – žádný horizontální scroll, centrované karty */
@media (min-width:992px){
.upsell-carousel .cards-track{
overflow: visible;
justify-content: center;
padding: 4px 0;
}
.upsell-carousel .upsell-slide{
flex: 0 0 440px; /* 2–3 pěkné karty vedle sebe dle šířky */
max-width: 440px;
}
}
/* šipky (přebírají existující .cards-arrow styly) – lehké posuny v modalu */
.upsell-carousel .cards-arrow{ top: 50%; transform: translateY(-50%); }
.upsell-carousel .cards-arrow-prev{ left: .25rem; }
.upsell-carousel .cards-arrow-next{ right: .25rem; }
/* když není co scrollovat → skryj šipky (JS přidává .no-scroll) */
.upsell-carousel.no-scroll .cards-arrow{ display:none !important; }
/* Mini cart – obecný kontejner */
.mini-cart { max-height: min(75vh, 640px); display:flex; flex-direction:column; }
/* Dropdown varianta – širší a přizpůsobivá */
.mini-cart-dd { width: min(420px, 92vw); max-height: 80vh; overflow: hidden; }
/* Seznam položek – vlastní scroll, bez skákání footeru */
.mini-cart .mc-items { overflow:auto; padding-top: .25rem; padding-bottom: .25rem; }
/* Tenký progressbar */
.progress-thin .progress-bar { transition: width .25s ease; }
/* Název/varianty do jedné řádky s ellipsis */
.mini-cart .mc-title { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Obrázek – drž rozměr a neprohýbej řádky */
.mini-cart .mc-thumb { object-fit: cover; width:56px; height:56px; }
/* Patička je sticky uvnitř mini-cart (nepřeteče) */
.mini-cart .mc-footer { z-index: 1; }
/* Hustší vizuál řádků v drobné ploše */
.mini-cart .mc-item { line-height: 1.25; }
/* ===== TinyMCE Content Images ===== */
/* Zajistí, aby se obrázky z TinyMCE editoru nikdy nezdeformovaly */
/* Zachová aspect ratio i při změně šířky */
main img {
max-width: 100%;
height: auto !important; /* Přebije HTML atribut height, zachová poměr stran */
}