@charset "UTF-8";
/* Gastro Kafe - produktové popisy, VERZE 4 (15. 10. 2026).
Obsah = verze 2 (29. 9. 2026) beze změny + doplněk na konci souboru.
Proti verzi 3 jen užší sloupec v tabulkách výčtů, aby se text nelámal po písmenech.
Původní hlavička verze 2 následuje. */
/* Gastro Kafe — společné produktové popisy, verze 2, 29. 9. 2026.
NOVÉ POPISY: obal .gk-product, prvky .gkp-*.
ZPĚTNÁ KOMPATIBILITA: stávající #gk-jura-e10 a .e10-* fungují také.
Žádný import dalšího CSS, žádné globální změny šablony.
Ve společném HEAD má být pouze jeden odkaz na tento soubor.
Existující gastrokafe_28.css, chatbot, Euroleasing a landing pages neměnit.
*/
:is(.gk-product, #gk-jura-e10) {
--gkp-ink: #0d0702;
--gkp-muted: #624e44;
--gkp-green: #7d9050;
--gkp-green-dark: #52672d;
--gkp-soft: #f3f6ea;
--gkp-cream: #f7f6f2;
--gkp-line: #dddcd4;
box-sizing: border-box;
container-type: inline-size;
width: 100%;
max-width: 1140px;
min-width: 0;
margin: 24px auto;
padding: 0;
color: var(--gkp-ink);
background: #fff;
font-family: inherit;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
text-align: left;
overflow-wrap: break-word;
}
:is(.gk-product, #gk-jura-e10) *,
:is(.gk-product, #gk-jura-e10) *::before,
:is(.gk-product, #gk-jura-e10) *::after {
box-sizing: border-box;
}
:is(.gk-product, #gk-jura-e10) h2,
:is(.gk-product, #gk-jura-e10) h3 {
margin: 0 0 18px;
color: var(--gkp-ink);
font-family: "Bebas Neue", "Arial Narrow", Arial, sans-serif;
font-weight: 700;
line-height: 1.16;
letter-spacing: .015em;
text-transform: none;
overflow-wrap: break-word;
}
:is(.gk-product, #gk-jura-e10) h2 { font-size: clamp(27px, 3vw, 37px); }
:is(.gk-product, #gk-jura-e10) h3 { font-size: clamp(23px, 2.3vw, 28px); }
:is(.gk-product, #gk-jura-e10) p { margin: 0 0 17px; font-size: inherit; line-height: inherit; }
:is(.gk-product, #gk-jura-e10) p:last-child { margin-bottom: 0; }
:is(.gk-product, #gk-jura-e10) strong { color: inherit; font-weight: 700; }
:is(.gk-product, #gk-jura-e10) a { color: var(--gkp-green-dark); text-decoration: underline; text-underline-offset: 3px; }
:is(.gk-product, #gk-jura-e10) a:hover { color: var(--gkp-ink); }
:is(.gk-product, #gk-jura-e10) a:focus-visible { outline: 3px solid var(--gkp-green-dark); outline-offset: 5px; }
:is(.gk-product, #gk-jura-e10) img { display: block; float: none; width: auto; max-width: 100%; height: auto; margin: 0 auto; border: 0; }
:is(.gk-product, #gk-jura-e10) figure { min-width: 0; margin: 0; padding: 0; }
:is(.gk-product, #gk-jura-e10) figcaption { margin-top: 12px; color: var(--gkp-muted); font-size: 13px; line-height: 1.5; }
:is(.gk-product, #gk-jura-e10) [id] { scroll-margin-top: 100px; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-hero, .e10-hero) {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
align-items: center;
gap: 36px;
padding: 36px;
border-top: 4px solid var(--gkp-green);
background: var(--gkp-cream);
}
:is(.gk-product, #gk-jura-e10) :is(.gkp-hero, .e10-hero) > *,
:is(.gk-product, #gk-jura-e10) :is(.gkp-split, .e10-split) > *,
:is(.gk-product, #gk-jura-e10) :is(.gkp-worlds, .e10-worlds) > * { min-width: 0; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-eyebrow, .e10-eyebrow) {
margin: 0 0 14px;
color: var(--gkp-green-dark);
font-family: inherit;
font-size: 12px;
font-weight: 700;
line-height: 1.5;
letter-spacing: .13em;
text-transform: uppercase;
}
:is(.gk-product, #gk-jura-e10) :is(.gkp-hero, .e10-hero) h2 { font-size: clamp(30px, 3.3vw, 43px); line-height: 1.08; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-lead, .e10-lead) { font-size: 18px; line-height: 1.6; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-hero-media, .e10-hero-media) { padding: 24px; background: #fff; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-hero-media, .e10-hero-media) img { width: 100%; max-width: 340px; max-height: 470px; object-fit: contain; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-facts, .e10-facts) {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin: 0;
padding: 0;
border-bottom: 1px solid var(--gkp-line);
list-style: none;
}
:is(.gk-product, #gk-jura-e10) :is(.gkp-facts, .e10-facts) li {
min-width: 0;
margin: 0;
padding: 22px 18px;
border-right: 1px solid var(--gkp-line);
font-size: 14px;
line-height: 1.5;
text-align: center;
list-style: none;
}
:is(.gk-product, #gk-jura-e10) :is(.gkp-facts, .e10-facts) li:last-child { border-right: 0; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-facts, .e10-facts) li::before { content: none; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-facts, .e10-facts) strong {
display: block;
margin-bottom: 5px;
color: var(--gkp-green-dark);
font-size: 23px;
line-height: 1.25;
}
:is(.gk-product, #gk-jura-e10) :is(.gkp-section, .e10-section) { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--gkp-line); }
:is(.gk-product, #gk-jura-e10) :is(.gkp-section-intro, .e10-section-intro) { max-width: 820px; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-split, .e10-split) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
gap: 36px;
}
:is(.gk-product, #gk-jura-e10) :is(.gkp-split--reverse, .e10-split--reverse) :is(.gkp-media, .e10-media) { order: -1; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-media, .e10-media) { background: var(--gkp-cream); }
:is(.gk-product, #gk-jura-e10) :is(.gkp-media, .e10-media) img { width: 100%; object-fit: contain; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-worlds, .e10-worlds) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 36px; margin-top: 26px; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-world, .e10-world) { padding: 22px 0 0; border-top: 3px solid var(--gkp-green); }
:is(.gk-product, #gk-jura-e10) :is(.gkp-world, .e10-world) h3 { margin-bottom: 12px; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-world-label, .e10-world-label) { display: block; margin-bottom: 8px; color: var(--gkp-green-dark); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-note, .e10-note) { margin: 22px 0; padding: 16px 20px; border-left: 3px solid var(--gkp-green); background: var(--gkp-soft); font-size: 14px; line-height: 1.6; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-note, .e10-note) p { margin: 0; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-checks, .e10-checks) { margin: 16px 0 0; padding: 0 0 0 22px; list-style: disc outside; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-checks, .e10-checks) li { margin: 0 0 9px; padding: 0; line-height: 1.65; list-style: disc outside; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-checks, .e10-checks) li::before { content: none; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-checks, .e10-checks) li::marker { color: var(--gkp-green-dark); }
:is(.gk-product, #gk-jura-e10) :is(.gkp-table-wrap, .e10-table-wrap) { width: 100%; max-width: 100%; margin-top: 24px; }
:is(.gk-product, #gk-jura-e10) table {
float: none;
width: 100%;
max-width: 100%;
margin: 0;
border: 0;
border-collapse: collapse;
table-layout: fixed;
background: #fff;
font-size: 15px;
line-height: 1.6;
}
:is(.gk-product, #gk-jura-e10) caption { padding: 0 0 14px; color: var(--gkp-muted); text-align: left; font-size: 14px; }
:is(.gk-product, #gk-jura-e10) th,
:is(.gk-product, #gk-jura-e10) td { padding: 13px 16px; border: 0; border-bottom: 1px solid var(--gkp-line); vertical-align: top; color: var(--gkp-ink); text-align: left; overflow-wrap: anywhere; }
:is(.gk-product, #gk-jura-e10) th { width: 39%; background: var(--gkp-cream); font-weight: 700; }
:is(.gk-product, #gk-jura-e10) td { background: #fff; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-faq-item, .e10-faq-item) { padding: 24px 0; border-bottom: 1px solid var(--gkp-line); }
:is(.gk-product, #gk-jura-e10) :is(.gkp-faq-item, .e10-faq-item) h3 { margin-bottom: 12px; font-family: inherit; font-size: 18px; line-height: 1.4; letter-spacing: 0; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-faq-item, .e10-faq-item) p { margin-bottom: 0; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-showroom, .e10-showroom) { margin-top: 40px; padding: 32px; border-left: 5px solid var(--gkp-green); background: var(--gkp-soft); }
:is(.gk-product, #gk-jura-e10) :is(.gkp-actions, .e10-actions) { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 24px; }
:is(.gk-product, #gk-jura-e10) a:is(.gkp-button, .e10-button) {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
max-width: 100%;
padding: 13px 23px;
border: 2px solid var(--gkp-green-dark);
border-radius: 3px;
background: var(--gkp-green-dark);
color: #fff;
font-family: inherit;
font-size: 15px;
font-weight: 700;
line-height: 1.4;
text-align: center;
text-decoration: none;
white-space: normal;
}
:is(.gk-product, #gk-jura-e10) a:is(.gkp-button, .e10-button):hover { background: var(--gkp-ink); border-color: var(--gkp-ink); color: #fff; }
:is(.gk-product, #gk-jura-e10) a:is(.gkp-button--secondary, .e10-button--secondary) { border-color: var(--gkp-green-dark); background: transparent; color: var(--gkp-green-dark); }
:is(.gk-product, #gk-jura-e10) a:is(.gkp-button--secondary, .e10-button--secondary):hover { background: var(--gkp-green-dark); color: #fff; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-footnote, .e10-footnote) { margin-top: 18px; color: var(--gkp-muted); font-size: 13px; line-height: 1.6; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-video, .e10-video) { display: block; width: 100%; max-width: 100%; height: auto; margin: 24px 0 0; background: #0d0702; }
@media (max-width: 900px) {
:is(.gk-product, #gk-jura-e10) :is(.gkp-hero, .e10-hero) { gap: 24px; padding: 26px; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-hero-media, .e10-hero-media) { padding: 16px; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-split, .e10-split) { gap: 26px; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-facts, .e10-facts) li { padding: 19px 10px; font-size: 13px; }
}
@media (max-width: 700px) {
:is(.gk-product, #gk-jura-e10) { margin: 16px auto; font-size: 15px; line-height: 1.65; }
:is(.gk-product, #gk-jura-e10) h2 { font-size: 28px; }
:is(.gk-product, #gk-jura-e10) h3 { font-size: 24px; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-hero, .e10-hero) { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 20px; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-hero, .e10-hero) h2 { font-size: 35px; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-lead, .e10-lead) { font-size: 17px; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-hero-media, .e10-hero-media) { padding: 18px; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-hero-media, .e10-hero-media) img { max-width: 240px; max-height: 310px; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-facts, .e10-facts) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.gk-product, #gk-jura-e10) :is(.gkp-facts, .e10-facts) li { padding: 18px 12px; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-facts, .e10-facts) li:nth-child(2n) { border-right: 0; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-facts, .e10-facts) li:nth-child(-n+2) { border-bottom: 1px solid var(--gkp-line); }
:is(.gk-product, #gk-jura-e10) :is(.gkp-section, .e10-section) { margin-top: 28px; padding-top: 26px; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-split, .e10-split),
:is(.gk-product, #gk-jura-e10) :is(.gkp-worlds, .e10-worlds) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-split--reverse, .e10-split--reverse) :is(.gkp-media, .e10-media) { order: 0; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-world, .e10-world) { padding-top: 18px; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-note, .e10-note) { padding: 15px 17px; }
:is(.gk-product, #gk-jura-e10) table { font-size: 14px; }
:is(.gk-product, #gk-jura-e10) th,
:is(.gk-product, #gk-jura-e10) td { padding: 11px 10px; }
:is(.gk-product, #gk-jura-e10) th { width: 43%; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-showroom, .e10-showroom) { margin-top: 28px; padding: 25px 20px; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-actions, .e10-actions) { align-items: stretch; gap: 12px; }
:is(.gk-product, #gk-jura-e10) a:is(.gkp-button, .e10-button) { width: 100%; }
}
@media print {
:is(.gk-product, #gk-jura-e10) { max-width: none; margin: 0; color: #000; font-size: 11pt; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-hero, .e10-hero),
:is(.gk-product, #gk-jura-e10) :is(.gkp-showroom, .e10-showroom),
:is(.gk-product, #gk-jura-e10) :is(.gkp-faq-item, .e10-faq-item) { break-inside: avoid; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-hero, .e10-hero) { padding: 20px; }
:is(.gk-product, #gk-jura-e10) h2,
:is(.gk-product, #gk-jura-e10) h3 { break-after: avoid; }
}
/* Související položky: bez ručně zapsaných cen a skladových stavů. */
:is(.gk-product, #gk-jura-e10) .gkp-related {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px; margin-top: 24px;
}
:is(.gk-product, #gk-jura-e10) .gkp-related-card {
display: flex; flex-direction: column; min-width: 0;
padding: 22px; border: 1px solid var(--gkp-line); background: #fff;
}
:is(.gk-product, #gk-jura-e10) .gkp-related-card h3 { font-size: 23px; }
:is(.gk-product, #gk-jura-e10) .gkp-related-card .gkp-card-link {
display: block; margin-top: auto; padding-top: 12px; font-weight: 700;
}
/* Rozložení reaguje i na skutečnou šířku popisu v šabloně, ne jen na okno. */
@container (max-width: 720px) {
:is(.gk-product, #gk-jura-e10) :is(.gkp-hero, .e10-hero) {
grid-template-columns: minmax(0, 1fr); padding: 24px 20px; gap: 24px;
}
:is(.gk-product, #gk-jura-e10) :is(.gkp-hero, .e10-hero) h2 { font-size: 34px; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-hero-media, .e10-hero-media) img {
max-width: 260px; max-height: 350px;
}
:is(.gk-product, #gk-jura-e10) :is(.gkp-facts, .e10-facts) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
:is(.gk-product, #gk-jura-e10) :is(.gkp-facts, .e10-facts) li:nth-child(2n) { border-right: 0; }
:is(.gk-product, #gk-jura-e10) :is(.gkp-facts, .e10-facts) li:nth-child(-n+2) {
border-bottom: 1px solid var(--gkp-line);
}
}
@container (max-width: 510px) {
:is(.gk-product, #gk-jura-e10) :is(.gkp-worlds, .e10-worlds),
:is(.gk-product, #gk-jura-e10) :is(.gkp-split, .e10-split),
:is(.gk-product, #gk-jura-e10) .gkp-related { grid-template-columns: minmax(0, 1fr); }
:is(.gk-product, #gk-jura-e10) :is(.gkp-button, .e10-button) { width: 100%; }
}
@media (max-width: 600px) {
:is(.gk-product, #gk-jura-e10) .gkp-related { grid-template-columns: minmax(0, 1fr); }
}
/* Verze 2: čtyři světy chutí JURA E10 podle barev displeje.
Beze změny HTML. Pořadí v již vloženém popisu:
1 Hot Brew, 2 Cold Brew, 3 Light Brew, 4 Sweet Foam.
Změna se týká pouze těchto čtyř karet; ostatní produktové bloky beze změny.
*/
#gk-jura-e10 #e10-chute :is(.gkp-worlds, .e10-worlds) > :is(.gkp-world, .e10-world):nth-child(1) {
--gkp-world-background: #585958;
--gkp-world-foreground: #ffffff;
--gkp-world-edge: #424342;
}
#gk-jura-e10 #e10-chute :is(.gkp-worlds, .e10-worlds) > :is(.gkp-world, .e10-world):nth-child(2) {
--gkp-world-background: #54a7c5;
--gkp-world-foreground: #102832;
--gkp-world-edge: #2b7d9b;
}
#gk-jura-e10 #e10-chute :is(.gkp-worlds, .e10-worlds) > :is(.gkp-world, .e10-world):nth-child(3) {
--gkp-world-background: #976535;
--gkp-world-foreground: #ffffff;
--gkp-world-edge: #754c27;
}
#gk-jura-e10 #e10-chute :is(.gkp-worlds, .e10-worlds) > :is(.gkp-world, .e10-world):nth-child(4) {
--gkp-world-background: #e1b044;
--gkp-world-foreground: #30220a;
--gkp-world-edge: #bb8b29;
}
#gk-jura-e10 #e10-chute :is(.gkp-worlds, .e10-worlds) > :is(.gkp-world, .e10-world) {
min-width: 0;
height: 100%;
padding: 24px;
border: 1px solid var(--gkp-world-edge);
border-top: 4px solid var(--gkp-world-edge);
border-radius: 6px;
background: var(--gkp-world-background);
color: var(--gkp-world-foreground);
}
#gk-jura-e10 #e10-chute :is(.gkp-world, .e10-world) :is(h3, p, strong, a, .gkp-world-label, .e10-world-label) {
color: var(--gkp-world-foreground);
}
#gk-jura-e10 #e10-chute :is(.gkp-world, .e10-world) :is(.gkp-world-label, .e10-world-label) {
margin-bottom: 12px;
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
opacity: 1;
}
#gk-jura-e10 #e10-chute :is(.gkp-world, .e10-world) h3 {
margin-bottom: 14px;
}
#gk-jura-e10 #e10-chute :is(.gkp-world, .e10-world) a:focus-visible {
outline-color: var(--gkp-world-foreground);
}
@media (max-width: 700px) {
#gk-jura-e10 #e10-chute :is(.gkp-worlds, .e10-worlds) > :is(.gkp-world, .e10-world) {
padding: 22px 20px;
}
}
@container (max-width: 510px) {
#gk-jura-e10 #e10-chute :is(.gkp-worlds, .e10-worlds) > :is(.gkp-world, .e10-world) {
padding: 22px 20px;
}
}
@media print {
#gk-jura-e10 #e10-chute :is(.gkp-worlds, .e10-worlds) > :is(.gkp-world, .e10-world) {
--gkp-world-foreground: #000000;
background: #ffffff;
break-inside: avoid;
}
}
/* ==========================================================================
Gastro Kafe - produktové popisy, DOPLNĚK VERZE 3 (10. 10. 2026)
--------------------------------------------------------------------------
Přidává se ZA obsah gk-produkty-v2.css, nic v něm nepřepisuje ani nemaže.
Výsledný soubor je gk-produkty-v3.css (jeden odkaz v hlavičce, jako dosud).
Co doplňuje:
0. Mezera nad samostatným nadpisem a galerie (.gkp-galerie) pro popisy, kde Pobo mělo blok galerie.
1. Tokeny pohybu a plynulé přechody u všech stavů (pravidla design databáze,
kapitola 8). Verze 2 má hover bez přechodu a bez @media (hover: hover),
takže na dotyku stav „visí" - doplněk to srovnává.
2. Bloky, které potřebují popisy přenesené z Poba: užší foto, video z YouTube
v poměru 16:9 a dva sloupce vedle sebe.
========================================================================== */
:is(.gk-product, #gk-jura-e10) {
--gkp-duration-instant: 100ms;
--gkp-duration-fast: 150ms;
--gkp-duration-normal: 220ms;
--gkp-ease: cubic-bezier(.2, 0, 0, 1);
}
/* --- odkazy v textu ------------------------------------------------------- */
:is(.gk-product, #gk-jura-e10) a {
transition: color var(--gkp-duration-fast) var(--gkp-ease);
}
:is(.gk-product, #gk-jura-e10) a:active { color: var(--gkp-ink); }
/* --- tlačítka ------------------------------------------------------------- */
:is(.gk-product, #gk-jura-e10) a:is(.gkp-button, .e10-button) {
transition:
background-color var(--gkp-duration-fast) var(--gkp-ease),
border-color var(--gkp-duration-fast) var(--gkp-ease),
color var(--gkp-duration-fast) var(--gkp-ease),
transform var(--gkp-duration-instant) var(--gkp-ease);
}
:is(.gk-product, #gk-jura-e10) a:is(.gkp-button, .e10-button):active { transform: translateY(1px); }
/* Na dotykovém zařízení hover ze stylopisu v2 vracíme zpět, ať nezůstane
„zaseknutý" po klepnutí. Fokusový rámeček zůstává beze změny a bez prodlevy. */
@media (hover: none) {
:is(.gk-product, #gk-jura-e10) a:is(.gkp-button, .e10-button):hover {
background: var(--gkp-green-dark);
border-color: var(--gkp-green-dark);
color: #fff;
}
:is(.gk-product, #gk-jura-e10) a:is(.gkp-button--secondary, .e10-button--secondary):hover {
background: transparent;
color: var(--gkp-green-dark);
}
:is(.gk-product, #gk-jura-e10) a:hover { color: var(--gkp-green-dark); }
}
/* --- karty souvisejících produktů ----------------------------------------- */
:is(.gk-product, #gk-jura-e10) .gkp-related-card {
transition:
border-color var(--gkp-duration-fast) var(--gkp-ease),
box-shadow var(--gkp-duration-fast) var(--gkp-ease),
transform var(--gkp-duration-fast) var(--gkp-ease);
}
@media (hover: hover) {
:is(.gk-product, #gk-jura-e10) .gkp-related-card:hover {
border-color: var(--gkp-green);
box-shadow: 0 6px 18px rgba(13, 7, 2, .08);
transform: translateY(-2px);
}
}
/* --- řádky tabulky parametrů ---------------------------------------------- */
:is(.gk-product, #gk-jura-e10) tbody tr :is(th, td) {
transition: background-color var(--gkp-duration-fast) var(--gkp-ease);
}
@media (hover: hover) {
:is(.gk-product, #gk-jura-e10) tbody tr:hover :is(th, td) { background: var(--gkp-soft); }
}
/* --- tabulky přenesené z Poba --------------------------------------------
Verze 2 drží u tabulky parametrů pevné rozložení a popisek na 39 % šířky.
U přenesených tabulek jsou řádky různorodé (dlouhé názvy funkcí i krátké
hodnoty), proto si šířky sloupců spočítá prohlížeč podle obsahu.
Tabulky na stávajících stránkách (JURA E10) se tím nemění. */
:is(.gk-product, #gk-jura-e10) table.gkp-table--prenesena { table-layout: auto; }
:is(.gk-product, #gk-jura-e10) table.gkp-table--prenesena :is(th, td) { width: auto; }
/* výčet „funkce + fajfka": popisek bez podbarvení, značka v úzkém sloupci.
Sloupec se nesmí zúžit natolik, aby se delší hodnota lámala po písmenech. */
:is(.gk-product, #gk-jura-e10) table.gkp-table--seznam { table-layout: auto; }
:is(.gk-product, #gk-jura-e10) table.gkp-table--seznam th { width: auto; background: #fff; font-weight: 400; }
:is(.gk-product, #gk-jura-e10) table.gkp-table--seznam td {
width: 1%;
min-width: 90px;
text-align: center;
color: var(--gkp-green-dark);
text-wrap: balance;
}
/* --- časté dotazy jako rozbalovací (nepovinné) ----------------------------
Statické h3 + odstavec z verze 2 fungují dál. Když AI vygeneruje
…
… (dělicí linka Poba).
Verze 2 dává nadpisům jen spodní mezeru, nad nimi by se text lepil. */
:is(.gk-product, #gk-jura-e10) > h2:not(:first-child) { margin-top: 44px; }
/* --- galerie přenesená z Poba ---------------------------------------------- */
/* Dvě až čtyři fotky vedle sebe, na mobilu pod sebou. Používá ji převodník
u popisů, kde Pobo mělo blok galerie. */
:is(.gk-product, #gk-jura-e10) .gkp-galerie {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px 24px;
align-items: start;
}
:is(.gk-product, #gk-jura-e10) .gkp-galerie > * {
min-width: 0;
margin: 0;
}
/* --- omezený pohyb --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:is(.gk-product, #gk-jura-e10) *,
:is(.gk-product, #gk-jura-e10) *::before,
:is(.gk-product, #gk-jura-e10) *::after {
transition-duration: 1ms !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
}
:is(.gk-product, #gk-jura-e10) .gkp-related-card:hover,
:is(.gk-product, #gk-jura-e10) a:is(.gkp-button, .e10-button):active { transform: none; }
}