/* ==========================================================================
GASTROKAFE — redesign
Soubor: /user/documents/upload/code/gastrokafe_12.css
Verze: _12 (2026-08-10)
KOMPLETNÍ stylopis — nahrazuje všechny předchozí verze.
V záhlaví má být JEN jeden , na tento soubor.
Při další změně: uložit jako _4, přepsat číslo v záhlaví, starý smazat.
Obsah:
01. Tokeny
02. Řazení sekcí homepage (bez JS)
03. Hero — Vyberte si kávovar
03b. Kategorie — Rozcestník
03c. Loga značek
04. USP pás (benefitBanner)
05. Volitelné / poznámky
06. Hlavička (jen desktop >= 992px)
Vkládat AŽ ZA /user/documents/style.min.css
========================================================================== */
/* ==========================================================================
01. TOKENY
========================================================================== */
:root {
/* barvy značky */
--gk-green: #7d9050;
--gk-green-dark: #616f3e;
/* text */
--gk-ink: #0d0702; /* nadpis USP */
--gk-ink-soft: #59473b; /* popisek USP + podnadpis hero */
--gk-hero-h1: #291a12;
--gk-hero-eye: #624e44;
/* plochy a linky */
--gk-line: #e0e0e0;
--gk-icon-bg: #f0f4ea; /* kruh pod USP ikonou (součást PNG) */
--gk-surface: #f7f7f7; /* plocha dlaždic a pruhu log */
--gk-hero-bg: #f8f5ef;
--gk-font: "Inter", "Noto Sans", sans-serif;
}
/* ==========================================================================
02. ŘAZENÍ SEKCÍ HOMEPAGE
--------------------------------------------------------------------------
Shoptet vkládá obsah editoru úvodní stránky do trojice obalů:
.welcome-wrapper > .welcome > div > [tvoje sekce]
display:contents je zruší jako boxy, takže se sekce stanou přímými
položkami flexu #content a lze jim dát vlastní order.
POZOR: tím padá i .container-narrow (max-width) a padding .welcome —
šířku i odsazení si proto řídí každá sekce sama.
========================================================================== */
.in-index #content {
display: flex;
flex-direction: column;
padding-top: 0; /* Shoptet dává 20px — hero má navazovat na menu */
}
.in-index .welcome-wrapper,
.in-index .welcome-wrapper > .welcome,
.in-index .welcome-wrapper > .welcome > div {
display: contents;
}
.in-index .gk-hero { order: -40; }
.in-index .benefitBanner.position--benefitHomepage { order: -30; }
.in-index .gk-kategorie { order: -20; }
.in-index .gk-znacky { order: -10; }
/* produktové bloky Shoptetu = order 0 (výchozí, drží pořadí z DOM) */
.in-index .gk-pribeh { order: 10; }
/* sekce O nás — flex pravidla se přesouvají z .welcome > div sem,
protože ten obal už není box */
.in-index .gk-pribeh {
display: flex;
justify-content: space-between;
column-gap: 56px;
max-width: 1280px;
margin: 0 auto;
padding: 40px 20px;
}
.in-index .gk-pribeh .pribeh-1 { flex-basis: 50%; }
.in-index .gk-pribeh .pribeh-2 { flex-basis: 50%; margin-top: auto; margin-bottom: auto; }
@media (max-width: 992px) {
.in-index .gk-pribeh { display: block; }
.in-index .gk-pribeh .pribeh-1 { margin-bottom: 32px !important; }
}
/* ==========================================================================
03. HERO — Vyberte si kávovar
========================================================================== */
.gk-hero {
/* full-bleed: krémové pozadí od kraje ke kraji okna */
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background: var(--gk-hero-bg);
font-family: var(--gk-font);
}
/* Pojistka proti vodorovnému posouvání. MUSÍ být na , ne na
#content-wrapper — ten má třídu .container s PEVNOU šířkou (1418px od
1440px výš a nic nad tím), takže by hero ořízl na svoji šířku a na
širokém monitoru by vznikly bílé okraje. clip (ne hidden) nerozbíjí
position:sticky. */
html { overflow-x: clip; }
.gk-hero__in {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
max-width: 1280px;
min-height: 480px;
margin: 0 auto;
padding: 56px 20px;
}
.gk-hero__text { flex: 1 1 auto; min-width: 0; }
.gk-hero__eyebrow {
margin: 0 0 6px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.195px;
color: var(--gk-hero-eye);
}
.gk-hero__title,
.in-index .gk-hero .gk-hero__title {
margin: 0 0 26px;
/* zalomení na 3 řádky řídí
v HTML — v ch/px by se rozjelo,
jakmile naběhne Inter (je o ~5 % širší než Noto Sans) */
font-family: var(--gk-font); /* přebíjí Bebas Neue z style.min.css */
font-size: 46px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.5px;
color: var(--gk-hero-h1);
text-transform: none;
}
.gk-hero__sub {
margin: 0 0 32px;
font-size: 15px;
font-weight: 400;
line-height: 1.45;
color: var(--gk-ink-soft);
}
/* --- CTA tlačítka --------------------------------------------------------- */
.gk-hero__cta {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin: 0;
}
.gk-hero .gk-btn,
.in-index .gk-hero a.gk-btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 48px;
padding: 0 18px;
border-radius: 24px;
background: var(--gk-green);
color: #fff;
font-family: var(--gk-font);
font-size: 13px;
font-weight: 500;
line-height: 1;
text-decoration: none;
transition: background-color .15s ease;
}
.in-index .gk-hero a.gk-btn:hover,
.in-index .gk-hero a.gk-btn:focus-visible {
background: var(--gk-green-dark);
color: #fff;
text-decoration: none;
}
/* ikony (Lucide) jako data-URI — žádný další HTTP request, přežije WYSIWYG */
.gk-hero .gk-btn::before {
content: "";
flex: 0 0 20px;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-position: center;
background-size: 20px 20px;
}
.gk-hero .gk-btn--dom::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}
.gk-hero .gk-btn--kancelar::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 12h4'/%3E%3Cpath d='M10 8h4'/%3E%3Cpath d='M14 21v-3a2 2 0 0 0-4 0v3'/%3E%3Cpath d='M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2'/%3E%3Cpath d='M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16'/%3E%3C/svg%3E");
}
.gk-hero .gk-btn--provoz::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5'/%3E%3Cpath d='M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244'/%3E%3Cpath d='M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05'/%3E%3C/svg%3E");
}
/* --- obrázek -------------------------------------------------------------- */
.gk-hero__media {
flex: 0 0 420px;
margin: 0;
line-height: 0;
}
.gk-hero__media img {
display: block;
width: 420px;
height: auto;
max-width: 100%;
}
/* --- hero responsive ------------------------------------------------------ */
@media (max-width: 1100px) {
.gk-hero__in { gap: 24px; padding: 44px 20px; min-height: 0; }
.gk-hero__title { font-size: 38px; }
.gk-hero__media { flex: 0 1 340px; }
.gk-hero__media img { width: 100%; }
}
@media (max-width: 767px) {
.gk-hero__in {
flex-direction: column-reverse; /* obrázek nahoru, text pod něj */
align-items: stretch;
text-align: left;
gap: 20px;
padding: 28px 16px 36px;
}
/* plynule mezi 320 a 767 px: 19px na malém telefonu, ~20px na běžném (390),
24px na velkém. Pokud bude pořád velký, snížit prostřední hodnotu (5.2vw). */
.gk-hero__title { font-size: clamp(19px, 5.2vw, 24px); margin-bottom: 14px; }
/* na mobilu zalomit přirozeně — v HTML MUSÍ být mezera PŘED
,
jinak se po skrytí slepí slova ("kávovarpodle") */
.gk-hero__title br { display: none; }
.gk-hero__sub { margin-bottom: 22px; font-size: 14px; } /* drží hierarchii k menšímu nadpisu */
.gk-hero__media { flex: 0 0 auto; align-self: center; max-width: 300px; }
.gk-hero__cta { gap: 10px; }
.gk-hero .gk-btn { height: 44px; padding: 0 16px; }
}
@media (max-width: 400px) {
.gk-hero__cta { flex-direction: column; align-items: stretch; }
.gk-hero .gk-btn { justify-content: flex-start; }
}
/* ==========================================================================
03b. KATEGORIE — Rozcestník
Ikony jsou exportované z Figmy (Lucide je nemá — kávovar, pákovač, mlýnek
ani tamper nejsou univerzální symboly) a vložené jako data-URI, takže
nepřidávají žádný HTTP request a přežijí WYSIWYG editor.
========================================================================== */
.gk-kategorie {
background: #fff;
font-family: var(--gk-font);
}
.gk-kategorie__in {
max-width: 1280px;
margin: 0 auto;
padding: 56px 20px;
}
/* společné pro nadpisy sekcí (použije i sekce Loga značek) */
.gk-sec-eyebrow {
margin: 0 0 4px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.96px;
color: var(--gk-green);
}
.gk-sec-title,
.in-index .gk-sec-title {
margin: 0 0 32px;
font-family: var(--gk-font); /* přebíjí Bebas Neue z style.min.css */
font-size: 28px;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.3px;
color: var(--gk-ink);
text-transform: none;
}
/* --- mřížka dlaždic -------------------------------------------------------- */
.gk-kategorie__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
}
.gk-kategorie .gk-kat,
.in-index .gk-kategorie a.gk-kat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
min-height: 156px;
padding: 16px 10px;
background: var(--gk-surface);
border: 1px solid var(--gk-line);
border-radius: 12px;
color: var(--gk-ink);
text-decoration: none;
transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.in-index .gk-kategorie a.gk-kat:hover,
.in-index .gk-kategorie a.gk-kat:focus-visible {
background: #fff;
border-color: var(--gk-green);
color: var(--gk-ink);
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(41, 26, 18, .07);
}
/* ikona jako pseudoprvek — v HTML není žádný prázdný element,
který by mohl editor smazat */
.gk-kat::before {
content: "";
display: block;
flex: 0 0 48px;
width: 48px;
height: 48px;
background-repeat: no-repeat;
background-position: center;
background-size: 48px 48px;
}
.gk-kat__label {
font-size: 13px;
font-weight: 500;
line-height: 1.4;
text-align: center;
}
/* --- ikony (export z Figmy) ------------------------------------------------ */
.gk-kat--auto::before { background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35 8H13C11.3431 8 10 9.34315 10 11V41C10 42.6569 11.3431 44 13 44H35C36.6569 44 38 42.6569 38 41V11C38 9.34315 36.6569 8 35 8Z' stroke='%237D9050' stroke-width='1.8'/%3E%3Cpath d='M30 14H18C16.8954 14 16 14.8954 16 16V22C16 23.1046 16.8954 24 18 24H30C31.1046 24 32 23.1046 32 22V16C32 14.8954 31.1046 14 30 14Z' stroke='%237D9050' stroke-width='1.5'/%3E%3Cpath d='M24 37C25.6569 37 27 35.6569 27 34C27 32.3431 25.6569 31 24 31C22.3431 31 21 32.3431 21 34C21 35.6569 22.3431 37 24 37Z' stroke='%237D9050' stroke-width='1.5'/%3E%3Cpath d='M38 18H42V26H38' stroke='%237D9050' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M19 40H29' stroke='%237D9050' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.gk-kat--pakove::before { background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31 14H11C9.34315 14 8 15.3431 8 17V33C8 34.6569 9.34315 36 11 36H31C32.6569 36 34 34.6569 34 33V17C34 15.3431 32.6569 14 31 14Z' stroke='%237D9050' stroke-width='1.8'/%3E%3Cpath d='M34 20H38C40.2 20 42 21.8 42 24C42 26.2 40.2 28 38 28H34' stroke='%237D9050' stroke-width='1.5'/%3E%3Cpath d='M16 36V42' stroke='%237D9050' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M26 36V42' stroke='%237D9050' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M13 14V10C13 8.9 13.9 8 15 8H22' stroke='%237D9050' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M24 10C25.1046 10 26 9.10457 26 8C26 6.89543 25.1046 6 24 6C22.8954 6 22 6.89543 22 8C22 9.10457 22.8954 10 24 10Z' stroke='%237D9050' stroke-width='1.5'/%3E%3C/svg%3E"); }
.gk-kat--mlynky::before { background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31 20H17C15.8954 20 15 20.8954 15 22V40C15 41.1046 15.8954 42 17 42H31C32.1046 42 33 41.1046 33 40V22C33 20.8954 32.1046 20 31 20Z' stroke='%237D9050' stroke-width='1.8'/%3E%3Cpath d='M18 20V14C18 11.8 19.8 10 22 10H26C28.2 10 30 11.8 30 14V20' stroke='%237D9050' stroke-width='1.5'/%3E%3Cpath d='M19 30H29' stroke='%237D9050' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M19 34H25' stroke='%237D9050' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M24 17C25.1046 17 26 16.1046 26 15C26 13.8954 25.1046 13 24 13C22.8954 13 22 13.8954 22 15C22 16.1046 22.8954 17 24 17Z' stroke='%237D9050' stroke-width='1.3'/%3E%3C/svg%3E"); }
.gk-kat--kava::before { background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 20H34L31 38H17L14 20Z' stroke='%237D9050' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M34 24H38C40.2 24 42 25.8 42 28C42 30.2 40.2 32 38 32H31' stroke='%237D9050' stroke-width='1.5'/%3E%3Cpath d='M11 42H37' stroke='%237D9050' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M19 14C19 14 20 11 22 12C24 13 25 10 25 10' stroke='%237D9050' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.gk-kat--chemie::before { background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 8H28V14L34 20V40C34 41.1 33.1 42 32 42H16C14.9 42 14 41.1 14 40V20L20 14V8Z' stroke='%237D9050' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M14 24H34' stroke='%237D9050' stroke-width='1.5'/%3E%3Cpath d='M24 36C25.6569 36 27 34.6569 27 33C27 31.3431 25.6569 30 24 30C22.3431 30 21 31.3431 21 33C21 34.6569 22.3431 36 24 36Z' stroke='%237D9050' stroke-width='1.4'/%3E%3C/svg%3E"); }
.gk-kat--baristicke::before { background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 38C16 38 14 30 14 24C14 17.4 18.7 12 24 12C29.3 12 34 17.4 34 24C34 30 32 38 32 38H16Z' stroke='%237D9050' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M16 38H32' stroke='%237D9050' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M20 38V42' stroke='%237D9050' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M28 38V42' stroke='%237D9050' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M18 42H30' stroke='%237D9050' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* --- kategorie responsive -------------------------------------------------- */
@media (max-width: 1100px) {
.gk-kategorie__grid { grid-template-columns: repeat(3, 1fr); }
.gk-kategorie__in { padding: 44px 20px; }
}
@media (max-width: 767px) {
.gk-kategorie__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.gk-kategorie__in { padding: 32px 16px; }
.gk-sec-title, .in-index .gk-sec-title { font-size: clamp(20px, 5.4vw, 24px); margin-bottom: 20px; }
.gk-kategorie .gk-kat,
.in-index .gk-kategorie a.gk-kat { min-height: 128px; gap: 10px; padding: 14px 8px; }
.gk-kat::before { flex: 0 0 40px; width: 40px; height: 40px; background-size: 40px 40px; }
.gk-kat__label { font-size: 12.5px; }
}
/* ==========================================================================
03c. LOGA ZNAČEK
Soubory (export z Figmy, board „EXPORT PRO WEB"):
/user/documents/upload/soubory/logo-jura.png (PNG @2x)
/user/documents/upload/soubory/logo-astoria.svg (vektor)
/user/documents/upload/soubory/logo-nivona.png (PNG @2x)
/user/documents/upload/soubory/logo-drcoffee.svg (vektor)
========================================================================== */
.gk-znacky {
/* full-bleed — šedá plocha i linky jdou od kraje ke kraji, jako v návrhu */
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background: var(--gk-surface); /* Figma: #F7F7F7, ne bílá */
border-top: 1px solid var(--gk-line);
border-bottom: 1px solid var(--gk-line);
font-family: var(--gk-font);
}
.gk-znacky__in {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
max-width: 1280px;
min-height: 96px;
margin: 0 auto;
padding: 16px 20px;
}
.gk-znacky .gk-znacka,
.in-index .gk-znacky a.gk-znacka {
position: relative; /* kotva pro divider */
display: flex;
align-items: center;
justify-content: center;
/* rozestupy dopočítané z Figmy: 4 loga = 429 px, zbytek kontejneru
rozdělený na 8 stejných odsazení -> ~106 px. Oddělovač sedí na left:0,
tedy přesně doprostřed mezery mezi dvěma logy. */
padding: 0 clamp(24px, 7vw, 106px);
text-decoration: none;
opacity: 1;
transition: opacity .15s ease;
}
.in-index .gk-znacky a.gk-znacka:hover,
.in-index .gk-znacky a.gk-znacka:focus-visible {
opacity: .6;
text-decoration: none;
}
/* svislý oddělovač — stejný jako v USP pásu */
.gk-znacka + .gk-znacka::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 48px;
background: var(--gk-line);
}
/* šířky přesně podle Figmy — loga mají různé proporce,
sjednocovat je na stejnou výšku by je opticky rozhodilo */
.gk-znacka img {
display: block;
width: auto;
height: auto;
max-width: 100%;
}
.gk-znacka--jura img { width: 80px; }
.gk-znacka--astoria img { width: 130px; }
.gk-znacka--nivona img { width: 89px; }
.gk-znacka--drcoffee img { width: 130px; }
/* --- loga responsive ------------------------------------------------------- */
@media (max-width: 1100px) {
.gk-znacky .gk-znacka,
.in-index .gk-znacky a.gk-znacka { padding: 0 clamp(18px, 5vw, 56px); }
}
@media (max-width: 767px) {
.gk-znacky__in { flex-wrap: wrap; gap: 24px 0; min-height: 0; padding: 24px 16px; }
.gk-znacky .gk-znacka,
.in-index .gk-znacky a.gk-znacka { flex: 0 0 50%; padding: 0 12px; }
.gk-znacka + .gk-znacka::before { display: none; } /* na mobilu bez linek */
.gk-znacka--jura img { width: 70px; }
.gk-znacka--astoria img { width: 114px; }
.gk-znacka--nivona img { width: 78px; }
.gk-znacka--drcoffee img { width: 114px; }
}
/* ==========================================================================
04. USP PÁS (.benefitBanner.position--benefitHomepage)
--------------------------------------------------------------------------
DOM Shoptetu (pozor, není jednotný!):
.benefitBanner__item
└ a.benefitBanner__link <- POUZE u položek s prolinkem (1. a 2.)
└ .benefitBanner__picture > img.benefitBanner__img
└ .benefitBanner__content > strong.benefitBanner__title + .benefitBanner__data
Selektory proto musí sedět na obě varianty (s odkazem i bez).
========================================================================== */
/* --- kontejner sekce ------------------------------------------------------ */
.benefitBanner.position--benefitHomepage {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
justify-content: center;
gap: 0;
width: 100%;
margin: 24px auto;
padding: 20px 0;
background: #fff;
border-top: 1px solid var(--gk-line);
border-bottom: 1px solid var(--gk-line);
font-family: var(--gk-font);
}
/* --- jedna položka -------------------------------------------------------- */
.benefitBanner.position--benefitHomepage .benefitBanner__item {
position: relative; /* kotva pro divider */
flex: 1 1 25%;
max-width: 320px;
display: flex;
align-items: center;
gap: 14px; /* Figma: mezera ikona ↔ text */
margin: 0; /* Shoptet dává margin-bottom:15px */
padding: 0 28px;
overflow: visible; /* Shoptet dává overflow:hidden -> ořízlo by divider */
}
.benefitBanner.position--benefitHomepage .benefitBanner__item:first-child { padding-left: 0; }
.benefitBanner.position--benefitHomepage .benefitBanner__item:last-child { padding-right: 0; }
/* svislý oddělovač mezi položkami — Figma: 1×48 px, #E0E0E0 */
.benefitBanner.position--benefitHomepage .benefitBanner__item + .benefitBanner__item::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 48px;
background: var(--gk-line);
}
/* --- odkaz (jen u 1. a 2. položky) ---------------------------------------- */
.benefitBanner.position--benefitHomepage .benefitBanner__link {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
color: inherit; /* zabíjí zelenou z a{color:#7d9050} */
text-decoration: none;
}
.benefitBanner.position--benefitHomepage .benefitBanner__link:hover {
opacity: 1; /* Shoptet default: opacity:.8 — fádní */
color: inherit;
text-decoration: none;
}
.benefitBanner.position--benefitHomepage .benefitBanner__link:hover .benefitBanner__title {
color: var(--gk-green); /* čitelná zpětná vazba místo ztmavení celého bloku */
}
/* --- ikona ---------------------------------------------------------------- */
.benefitBanner.position--benefitHomepage .benefitBanner__picture {
flex: 0 0 40px; /* Shoptet default: 75px */
width: 40px;
max-width: 40px;
height: 40px;
margin: 0; /* Shoptet default: margin-right:10px */
display: flex;
align-items: center;
justify-content: center;
}
.benefitBanner.position--benefitHomepage .benefitBanner__img {
width: 40px;
height: 40px;
display: block;
object-fit: contain;
}
/* --- texty ---------------------------------------------------------------- */
.benefitBanner.position--benefitHomepage .benefitBanner__content {
min-width: 0;
padding: 0; /* Shoptet default: padding-right:10px */
overflow: visible;
word-break: normal; /* Shoptet default: break-word -> trhalo slova */
overflow-wrap: break-word;
hyphens: none;
}
.benefitBanner.position--benefitHomepage .benefitBanner__title {
display: block;
width: 100%;
margin: 0;
font-family: var(--gk-font);
font-size: 13px; /* Shoptet default: 1.1em */
font-weight: 700;
line-height: 1.38;
letter-spacing: 0;
color: var(--gk-ink);
text-transform: none;
}
.benefitBanner.position--benefitHomepage .benefitBanner__data {
margin-top: 2px;
font-family: var(--gk-font);
font-size: 11.5px;
font-weight: 400;
line-height: 1.4;
color: var(--gk-ink-soft);
}
/* položka bez popisku (1. — „Certifikovaný prodejce") drží text na 2 řádky
jako ve Figmě, ať se pás nerozjede */
.benefitBanner.position--benefitHomepage .benefitBanner__item:first-child .benefitBanner__title {
max-width: 22ch;
}
/* --- USP responsive ------------------------------------------------------- */
/* užší desktop / tablet na šířku — zmenšit odsazení, ať se text neláme */
@media (max-width: 1279px) {
.benefitBanner.position--benefitHomepage .benefitBanner__item { padding: 0 18px; gap: 12px; }
.benefitBanner.position--benefitHomepage .benefitBanner__link { gap: 12px; }
}
/* tablet — 2×2 */
@media (max-width: 991px) {
.benefitBanner.position--benefitHomepage { flex-wrap: wrap; padding: 16px 0; }
.benefitBanner.position--benefitHomepage .benefitBanner__item {
flex: 0 0 50%;
max-width: 50%;
padding: 12px 20px;
}
.benefitBanner.position--benefitHomepage .benefitBanner__item:first-child { padding-left: 20px; }
.benefitBanner.position--benefitHomepage .benefitBanner__item:last-child { padding-right: 20px; }
/* divider jen mezi sloupci, ne mezi řádky */
.benefitBanner.position--benefitHomepage .benefitBanner__item + .benefitBanner__item::before { display: none; }
.benefitBanner.position--benefitHomepage .benefitBanner__item:nth-child(2n)::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 40px;
background: var(--gk-line);
}
}
/* mobil — 1 sloupec pod sebou */
@media (max-width: 575px) {
.benefitBanner.position--benefitHomepage { padding: 8px 0; }
.benefitBanner.position--benefitHomepage .benefitBanner__item,
.benefitBanner.position--benefitHomepage .benefitBanner__item:first-child,
.benefitBanner.position--benefitHomepage .benefitBanner__item:last-child {
flex: 0 0 100%;
max-width: 100%;
padding: 10px 0; /* :first-child/:last-child nutno vyjmenovat — jinak přebije
tabletové pravidlo výše (vyšší specificita pseudotřídy) */
}
.benefitBanner.position--benefitHomepage .benefitBanner__item:nth-child(2n)::before { display: none; }
.benefitBanner.position--benefitHomepage .benefitBanner__item + .benefitBanner__item {
border-top: 1px solid var(--gk-line);
}
.benefitBanner.position--benefitHomepage .benefitBanner__item:first-child .benefitBanner__title { max-width: none; }
}
/* ==========================================================================
05. VOLITELNÉ / POZNÁMKY
--------------------------------------------------------------------------
A) Linky USP pásu přes celou šířku okna (jako hero). Zapnout jen po
otestování, že nevzniká vodorovný scroll:
.benefitBanner.position--benefitHomepage {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: 20px;
padding-right: 20px;
}
B) Globální přepnutí písma na Inter. Zatím NEAKTIVNÍ — style.min.css má
natvrdo "Exo Soft", takže nastavení fontu v administraci nemá efekt.
Zapnutím se změní celý web včetně nadpisů (dnes Bebas Neue):
.external-fonts-loaded body, body, body.blank-mode {
font-family: var(--gk-font);
font-weight: 400;
}
========================================================================== */
/* ==========================================================================
06. HLAVIČKA
--------------------------------------------------------------------------
DOM Shoptetu:
.top-navigation-bar > .container > .top-navigation-menu > ul.top-navigation-bar-menu
header > .header-top > .container.header-top-wrapper
> .site-name (logo)
> .search > form.search-form > input.query-input
> .navigation-buttons > a.cart-count > span.cart-price
> .header-bottom > .container.header-bottom-wrapper > nav .menu-level-1
POZOR: celá sekce je schválně jen pro desktop (>= 992 px). Mobilní hlavička
má v Shoptetu jinou stavbu (hamburger, sticky, překryvná okna) a návrh ji
neřeší — necháváme ji zatím tak, jak je.
========================================================================== */
@media (min-width: 992px) {
/* --- společná šířka obsahu, stejná jako u sekcí homepage ---------------- */
.top-navigation-bar > .container,
.header-top-wrapper,
.header-bottom-wrapper {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
/* Bootstrap clearfix: .container má ::before a ::after, které se ve flexu
chovají jako plnohodnotné položky a rozstrkají obsah (logo mi kvůli nim
odskočilo o 112 px od kraje). Musí pryč, jinak nic dalšího nesedí. */
.top-navigation-bar > .container::before,
.top-navigation-bar > .container::after,
.header-top-wrapper::before,
.header-top-wrapper::after,
.header-bottom-wrapper::before,
.header-bottom-wrapper::after { display: none !important; }
/* Shoptet dává logu, vyhledávání i tlačítkům flex-basis:33.3333%, takže se
do řádku nevejdou a zalomí se. Přebít jde jen !important — vyšší
specificita nestačila. */
.header-top .container.header-top-wrapper > .site-name {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
padding: 0 !important;
}
.header-top .container.header-top-wrapper > .search {
flex: 1 1 620px !important;
max-width: 620px !important;
padding: 0 !important;
}
.header-top .container.header-top-wrapper > .navigation-buttons {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
padding: 0 !important;
margin-left: 0 !important; /* Shoptet má auto → zmáčklo by vyhledávání k logu */
}
/* --- servisní lišta ----------------------------------------------------- */
.top-navigation-bar {
background: var(--gk-hero-bg); /* #F8F5EF, jako hero */
border-bottom: 1px solid var(--gk-line);
font-family: var(--gk-font);
}
.top-navigation-bar > .container {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 38px;
}
.top-navigation-bar-menu {
display: flex;
align-items: center;
gap: 26px;
margin: 0;
padding: 0;
list-style: none;
}
.top-navigation-bar-menu > li { margin: 0; padding: 0; }
/* Shoptet měří šířku a přebytek schová do rozbalovátka „Více" (třída .cropped).
Po přerovnání na flex se všechny vejdou, takže je vrátíme a helper skryjeme.
POZOR: bez prvního řádku zmizí „Poradna" úplně. */
.top-navigation-bar-menu > li.cropped { display: block !important; }
.top-navigation-bar .top-navigation-menu-trigger,
.top-navigation-bar .top-navigation-bar-menu-helper { display: none !important; }
.top-navigation-bar a {
font-family: var(--gk-font);
font-size: 12.5px;
font-weight: 400;
line-height: 1;
color: var(--gk-hero-eye); /* #624E44 */
text-decoration: none;
transition: color .15s ease;
}
.top-navigation-bar a:hover { color: var(--gk-green); text-decoration: none; }
/* přihlášení / registrace vpravo */
.top-navigation-bar [data-testid="signin"],
.top-navigation-bar [data-testid="registration"],
.top-navigation-tools a {
font-weight: 500;
color: var(--gk-ink-soft); /* #59473B */
}
/* --- hlavní řádek ------------------------------------------------------- */
.header-top { background: #fff; }
.header-top-wrapper {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 0; /* rozestupy dělá space-between, gap by je rozhodil */
min-height: 100px;
}
.header-top-wrapper .site-name { margin: 0; flex: 0 0 auto; }
.header-top-wrapper .site-name img { max-height: 84px; width: auto; }
/* --- vyhledávání jako pilulka ------------------------------------------- */
.header-top-wrapper .search {
flex: 0 1 620px;
max-width: 620px;
margin: 0;
}
/* form i fieldset se jinak smrsknou na obsah (236 px místo 620) */
.header-top-wrapper .search-form {
width: 100% !important;
max-width: none !important;
display: block;
}
.header-top-wrapper .search-form fieldset {
width: 100% !important;
max-width: none !important;
position: relative;
display: flex;
align-items: center;
height: 48px;
padding: 0 18px;
background: var(--gk-surface); /* #F7F7F7 */
border: 1px solid var(--gk-line);
border-radius: 24px;
transition: border-color .15s ease, background-color .15s ease;
}
.header-top-wrapper .search-form fieldset:focus-within {
background: #fff;
border-color: var(--gk-green);
}
.header-top-wrapper .search-input-icon {
position: static !important; /* Shoptet ji má absolutně → plavala přes text */
left: auto !important;
top: auto !important;
flex: 0 0 20px;
width: 20px;
height: 20px;
margin-right: 10px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d9050' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}
.header-top-wrapper .search-input-icon::before { display: none; } /* ikonfont Shoptetu */
/* input má vlastní bílé pozadí a rámeček → uvnitř pilulky vznikalo druhé pole */
.header-top-wrapper .query-input,
.header-top-wrapper input.form-control.search-input {
flex: 1 1 auto;
height: 100%;
padding: 0;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: var(--gk-font);
font-size: 15px;
font-weight: 400;
color: var(--gk-ink);
}
.header-top-wrapper .query-input::placeholder { color: var(--gk-hero-eye); opacity: 1; }
.header-top-wrapper .query-input:focus { outline: none; box-shadow: none; }
.header-top-wrapper .search-button { display: none; } /* odesílá se Enterem */
/* --- košík jako pilulka -------------------------------------------------- */
.header-top-wrapper .navigation-buttons {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.header-top-wrapper a.cart-count {
display: inline-flex;
align-items: center;
gap: 10px;
height: 48px;
width: auto;
padding: 0 18px;
background: #fff;
border: 1px solid var(--gk-line);
border-radius: 24px;
color: var(--gk-ink);
font-family: var(--gk-font);
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: border-color .15s ease;
}
.header-top-wrapper a.cart-count:hover { border-color: var(--gk-green); color: var(--gk-ink); }
/* ikona košíku — Lucide shopping-bag místo ikonfontu */
.header-top-wrapper a.cart-count::before {
content: "";
position: relative;
flex: 0 0 20px;
width: 20px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d9050' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3Cpath d='M3.103 6.034h17.794'/%3E%3Cpath d='M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}
.header-top-wrapper .cart-price {
font-family: var(--gk-font);
font-size: 14px;
font-weight: 500;
color: var(--gk-ink);
}
/* košík s obsahem — cena je tučnější než text „Prázdný košík" */
.header-top-wrapper .cart-count.full .cart-price { font-weight: 800; }
/* --- navigační pruh ------------------------------------------------------ */
.header-bottom {
background: var(--gk-hero-h1); /* #291A12 */
padding: 0 !important;
margin-bottom: 0 !important; /* style.min.css dává 15px */
}
/* nav má vlastní hnědé pozadí, které by tmavý pruh překrylo */
.header-bottom nav,
.header-bottom nav.fitted,
.header-bottom .navigation-in { background: transparent !important; }
.header-bottom nav,
.header-bottom .navigation-in,
.header-bottom .menu-level-1 { margin: 0 !important; padding: 0 !important; }
.header-bottom-wrapper { min-height: 54px; display: flex; align-items: center; padding: 0 !important; }
.header-bottom .menu-level-1 {
display: flex;
align-items: center;
gap: 40px;
margin: 0;
padding: 0;
list-style: none;
}
.header-bottom .menu-level-1 > li { margin: 0; padding: 0; }
.header-bottom .menu-level-1 > li > a {
position: relative;
display: block;
padding: 18px 0;
background: none;
font-family: var(--gk-font);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.07px;
color: #fff;
text-decoration: none;
}
/* Staré style.min.css rozhazuje položky při najetí:
.navigation-in ul li a:hover>b { font-weight:300 } → skok šířky
#navigation .menu-level-1>li>a { width:calc(100% - 50px) }
.header-bottom { margin-bottom:15px }
Proto se to tady drží napevno. */
.header-bottom .menu-level-1 > li > a,
.header-bottom .menu-level-1 > li > a:hover,
#navigation .menu-level-1 > li > a {
width: auto !important;
padding-right: 0 !important;
text-decoration: none !important;
}
.header-bottom .menu-level-1 > li > a b,
.header-bottom .menu-level-1 > li > a:hover b,
.navigation-in ul li a > b,
.navigation-in ul li a:hover > b {
font-weight: 500 !important;
text-decoration: none !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
color: #fff !important;
}
.header-bottom .navigation-in > ul { padding-top: 0 !important; padding-bottom: 0 !important; }
/* zelený indikátor aktivní / najeté položky */
.header-bottom .menu-level-1 > li > a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 12px;
height: 2px;
border-radius: 1px;
background: var(--gk-green);
opacity: 0;
transition: opacity .15s ease;
}
.header-bottom .menu-level-1 > li > a:hover::after,
.header-bottom .menu-level-1 > li.active > a::after,
.header-bottom .menu-level-1 > li.exp > a::after { opacity: 1; }
.header-bottom .menu-level-1 > li > a:hover { color: #fff; }
/* --- MINI KOŠÍK (vyskakovací panel) -------------------------------------- */
.popup-widget.cart-widget {
border: 1px solid var(--gk-line);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(41, 26, 18, .14);
margin-top: 10px;
font-family: var(--gk-font);
}
.cart-widget .cart-widget-product {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
border-bottom: 1px solid var(--gk-line);
}
.cart-widget .cart-widget-product-image { flex: 0 0 60px; width: 60px; height: 60px; }
.cart-widget .cart-widget-product-image img { max-height: 60px; width: auto; }
.cart-widget .cart-widget-product-name {
flex: 1 1 auto;
min-width: 0;
font-size: 14px;
line-height: 1.35;
color: var(--gk-ink);
}
.cart-widget .cart-widget-product-name > strong { font-weight: 600; }
.cart-widget .cart-widget-product-variant,
.cart-widget .cart-widget-product-name > span {
display: block;
font-size: 12px;
font-weight: 400;
color: var(--gk-ink-soft);
}
/* stepper množství jako pilulka */
.cart-widget .cart-widget-product-amount { flex: 0 0 auto; width: auto; padding: 0; }
/* DOM pořadí Shoptetu je: tooltipy, label(input), increase, decrease —
vizuálně to musí být − 1 +, proto order. */
.cart-widget .cart-widget-product-amount .quantity {
display: flex;
align-items: center;
width: auto;
max-width: none;
height: 36px;
border: 1px solid var(--gk-line);
border-radius: 18px;
overflow: hidden;
}
.cart-widget .cart-widget-product-amount .quantity input {
height: 36px;
width: 32px;
border: 0;
background: transparent;
text-align: center;
font-family: var(--gk-font);
font-size: 14px;
color: var(--gk-ink);
}
.cart-widget .cart-widget-product-amount .quantity .decrease,
.cart-widget .cart-widget-product-amount .quantity .increase {
position: static !important; /* Shoptet je má absolutně */
height: 36px;
width: 30px;
border: 0;
background: transparent;
color: var(--gk-ink-soft);
}
.cart-widget .quantity .decrease { order: 1; }
.cart-widget .quantity label { order: 2; margin: 0; display: flex; align-items: center; }
.cart-widget .quantity .increase { order: 3; }
.cart-widget .quantity .increase-tooltip,
.cart-widget .quantity .decrease-tooltip { display: none; }
.cart-widget .cart-widget-product-unit { flex: 0 0 auto; width: auto; font-size: 12px; color: var(--gk-ink-soft); }
.cart-widget .cart-widget-product-price {
flex: 0 0 auto;
text-align: right;
font-size: 15px;
color: var(--gk-ink);
}
.cart-widget .cart-widget-product-price strong { font-weight: 800; }
/* CTA */
.cart-widget .cart-widget-button { padding: 16px; text-align: center; }
.cart-widget .cart-widget-button .btn.btn-conversion,
.cart-widget .cart-widget-button a.btn {
display: block;
width: 100%;
height: 48px;
line-height: 48px;
padding: 0;
border-radius: 24px;
background: var(--gk-green);
color: #fff;
font-family: var(--gk-font);
font-size: 14px;
font-weight: 500;
}
.cart-widget .cart-widget-button .btn.btn-conversion:hover { background: var(--gk-green-dark); }
/* doprava zdarma + ukazatel průběhu */
.cart-widget .cart-free-shipping {
padding: 0 16px 16px;
font-family: var(--gk-font);
font-size: 12.5px;
line-height: 1.4;
color: var(--gk-ink-soft);
text-align: center;
}
.cart-widget .cart-free-shipping > div { display: block; padding: 0; }
.cart-widget .cart-free-shipping strong { font-weight: 800; color: var(--gk-ink); }
.cart-widget .cart-free-shipping strong:last-of-type { color: var(--gk-green); }
.cart-widget .cart-free-shipping .price-range {
margin: 10px 0 0;
height: 6px;
border-radius: 3px;
background: var(--gk-line);
overflow: hidden;
}
.cart-widget .cart-free-shipping .price-range > div {
height: 6px;
border-radius: 3px;
background: var(--gk-green);
}
}