/* Úvodná stránka kracaj.sk v štýle Kráčaj (návrh v2, 12. 10. 2026).
   Platí len pre úvodnú stránku (.in-index). Selektory začínajú #content, lebo šablóna Disco
   má pravidlá ako #content p { margin: 0 0 22px }, ktoré by triedy inak prebili.
   Mobil je hlavný (vyše 90 % návštev), desktop je rozšírenie. */

.in-index {
  --u-sage: #a0a98c; --u-sage4: #818a6d; --u-sage-l: #eef0e6; --u-line: #e3e6d9;
  --u-copper: #e1895c; --u-amber: #fbc776; --u-blue: #728dad; --u-black: #1a1a1a; --u-cream: #faf6ee;
}

/* ---------- Poradie blokov (Disco ich má vedľa seba v #content) ---------- */
.in-index #content { display: flex; flex-wrap: wrap; }
.in-index #content > * { flex: 0 0 100%; max-width: 100%; }
.in-index #content > .banners-row { order: 1; }
.in-index #content > .body-banners { order: 2; display: block; }
.in-index #content > .u-pb-head,
.in-index #content > .homepage-group-title,
.in-index #content > .products-wrapper { order: 3; }
.in-index #content > .benefitBanner { order: 4; }
.in-index #content > .footer-banners { order: 5; }
.in-index #content > .welcome-wrapper { order: 6; }

/* ---------- Spoločné prvky ---------- */
.in-index #content .u-h2 { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--u-black); text-align: left; margin: 0 0 14px; }
.in-index .u-zv { position: relative; display: inline-block; isolation: isolate; font-style: italic; font-weight: 800; padding: 0 .18em; }
.in-index .u-zv::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: .14em; bottom: .02em; background: var(--u-amber); transform: skewX(-12deg); border-radius: 3px; }
.in-index .u-zv.s::before { background: var(--u-sage); }
.in-index .u-zv.m::before { background: var(--u-blue); }
.in-index #content .u-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 15px;
  text-decoration: none; background: var(--u-black); color: #fff; border: 2px solid var(--u-black); }
.in-index #content .u-btn-a { background: var(--u-amber); border-color: var(--u-amber); color: var(--u-black); }
.in-index #content .u-nalepka { display: none; } /* na mobile žiadne ozdoby navyše */
/* celoplošný šalviový pás bez vodorovného posúvania */
.in-index #content > .benefitBanner,
.in-index #content .u-pred { background: var(--u-sage); box-shadow: 0 0 0 100vmax var(--u-sage); clip-path: inset(0 -100vmax); }

/* ---------- 1 Carousel: úvodná snímka ---------- */
/* Mobil: rovnaký pomer ako mobilné bannery (1080 × 1350), aby carousel pri striedaní neskákal. */
.in-index .carousel-inner > .item > .u-hero,
.in-index .u-hero { container-type: inline-size; display: grid; grid-template-rows: auto 1fr; aspect-ratio: 1080 / 1350;
  background: var(--u-sage); color: var(--u-black); text-decoration: none; overflow: hidden; }
.in-index #content .u-hero-txt { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2.2cqw; padding: 8cqw 7cqw 6cqw; }
.in-index #content .u-hero-mini { margin: 0; font-size: 3.4cqw; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.in-index #content .u-hero h2 { margin: 0; font-size: 11.5cqw; font-weight: 800; line-height: 1.02; letter-spacing: -.02em; color: var(--u-black); }
.in-index #content .u-hero h2 em { position: relative; isolation: isolate; font-style: italic; padding: 0 .12em; }
.in-index #content .u-hero h2 em::before { content: ""; position: absolute; z-index: -1; inset: .12em 0 .02em; background: var(--u-amber); transform: skewX(-12deg); border-radius: 4px; }
.in-index #content .u-hero-sub { margin: 0; max-width: 24em; font-size: 4.6cqw; font-weight: 600; line-height: 1.3; }
.in-index #content .u-hero-btn { margin-top: 1.5cqw; padding: 2.6cqw 6cqw; border-radius: 999px; background: var(--u-black); color: #fff; font-size: 4.2cqw; font-weight: 700; }
.in-index .carousel-inner > .item > .u-hero > img.u-hero-foto,
.in-index .u-hero-foto { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 48% 72%;
  filter: saturate(.9) contrast(.95) brightness(1.04); }

/* šípky carouselu na mobile nižšie, aby neprekrývali tlačidlo úvodnej snímky */
@media (max-width: 767px) { .in-index .carousel-control { top: auto; bottom: 14%; } }

/* Snímka „Všetko skladom“: tmavá šalvia, pečiatka cez fotku */
.in-index .u-hero-sklad { background: var(--u-sage4); }
.in-index #content .u-hero-sklad .u-hero-mini { color: var(--u-amber); }
.in-index #content .u-hero-sklad h2, .in-index #content .u-hero-sklad .u-hero-sub { color: #fff; }
.in-index #content .u-hero-sklad h2 em { color: var(--u-black); }
.in-index #content .u-hero-sklad .u-hero-btn { background: var(--u-amber); color: var(--u-black); }
.in-index .u-hero-obr { position: relative; min-height: 0; }
.in-index .u-hero-sklad .u-hero-foto { object-position: 50% 45%; }
.in-index .u-peciatka { position: absolute; z-index: 2; top: -9cqw; right: 5cqw; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1cqw; width: 26cqw; height: 26cqw; border-radius: 50%; background: var(--u-amber); color: var(--u-black); transform: rotate(-10deg);
  box-shadow: 0 0 0 1.2cqw var(--u-sage4), 0 8px 20px rgba(0,0,0,.25); text-align: center; }
.in-index .u-hero .u-peciatka img { width: 9cqw; height: 9cqw; border-radius: 50%; }
.in-index .u-peciatka b { font-size: 3.3cqw; line-height: 1.05; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }

/* Snímka „Zimné topánky“ (od 12. 10. 2026 večer, predtým modrá so snehom): ľadové pozadie, dievčenská a chlapčenská topánka, pečiatka */
.in-index .u-hero-zima-b { background: #e8eef5; }
.in-index #content .u-hero-zima-b .u-hero-mini { color: var(--u-blue); }
.in-index .u-hero-zima-b .u-hero-foto { object-position: 50% 80%; filter: none; }
.in-index .u-hero-zima-b .u-peciatka { box-shadow: 0 0 0 1.2cqw #e8eef5, 0 8px 20px rgba(0,0,0,.18); }

/* Snímka „Celoročné topánky“: medená, fotka z predajne */
.in-index .u-hero-celo { background: var(--u-copper); }
.in-index #content .u-hero-celo h2 em::before { background: var(--u-cream); }
.in-index .u-hero-celo .u-hero-foto { object-position: 50% 42%; }

/* Snímky „Gumáky“ a „Papučky“ (od 13. 10. 2026, nahrádzajú obrázkové bannery). Gumáky: štýl zimnej, pozadie obrázka = pozadie snímky */
.in-index .u-hero-gumaky { background: #fbf0d6; }
.in-index #content .u-hero-gumaky .u-hero-mini { color: var(--u-blue); }
.in-index #content .u-hero-gumaky h2 em { color: #fff; }
.in-index #content .u-hero-gumaky h2 em::before { background: var(--u-blue); }
.in-index .u-hero-gumaky .u-hero-foto { object-position: 50% 80%; filter: none; }
/* Papučky: fotka papučiek na polici z predajne, pozadie vo farbe preglejky */
.in-index .u-hero-papucky { background: #ece1cf; }
.in-index #content .u-hero-papucky .u-hero-mini { color: #6b4f2a; }
.in-index #content .u-hero-papucky h2 em::before { background: #fff; }
.in-index .u-hero-papucky .u-hero-foto { object-position: 40% 70%; }

/* Snímka „Overené značky“ (od 12. 10. 2026, nahrádza obrázkový banner Naše-značky-pc): názvy značiek ako farebné nálepky v troch veľkostiach (l, m, s),
   mierne natočené. Názvy namiesto log, aby sa dali ľahko meniť. Mobil ukáže l a m, desktop všetky. */
.in-index .u-hero-znacky { background: var(--u-sage-l); }
.in-index #content .u-hero-znacky .u-hero-mini { color: var(--u-sage4); }
/* na mobile užší oblak, aby šípky carouselu (dole po bokoch) neprekrývali nálepky */
.in-index .u-znacky { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 17cqw 6cqw; }
.in-index #content .u-znacky ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2cqw 1.4cqw; }
.in-index #content .u-znacky li { margin: 0; padding: .55em .9em; border-radius: .6em; background: #fff; color: var(--u-black);
  box-shadow: 0 2px 6px rgba(26,26,26,.1); font-weight: 800; letter-spacing: -.01em; line-height: 1; white-space: nowrap; transform: rotate(-3deg); }
.in-index #content .u-znacky li:nth-child(3n+2) { transform: rotate(2.5deg); }
.in-index #content .u-znacky li:nth-child(3n) { transform: rotate(-1deg); }
.in-index #content .u-znacky .u-zn-l { font-size: 3.8cqw; }
.in-index #content .u-znacky .u-zn-m { font-size: 3.2cqw; }
.in-index #content .u-znacky .u-zn-s { display: none; font-size: 3.2cqw; font-weight: 700; }
.in-index #content .u-znacky .u-zn-sage { background: var(--u-sage4); color: #fff; }
.in-index #content .u-znacky .u-zn-modra { background: var(--u-blue); color: #fff; }
.in-index #content .u-znacky .u-zn-amber { background: var(--u-amber); }
.in-index #content .u-znacky .u-zn-med { background: var(--u-copper); color: #fff; }
.in-index #content .u-znacky .u-zn-dalsie { font-size: 3cqw; font-weight: 700; font-style: italic; background: transparent; box-shadow: none;
  border: 2px dashed var(--u-sage4); color: var(--u-sage4); }
.in-index .u-hero .u-znacky-nalepka { display: none; }

/* Desktop: rovnaký pomer ako desktopové bannery (4320 × 1600), text vľavo ako na ostatných snímkach. */
@media (min-width: 768px) {
  .in-index .carousel-inner > .item > .u-hero,
  .in-index .u-hero { aspect-ratio: 4320 / 1600; grid-template-rows: none; grid-template-columns: 37% 63%; }
  .in-index .u-hero-foto { object-position: 48% 62%; }
  .in-index #content .u-hero-txt { align-items: flex-start; text-align: left; justify-content: center; gap: 1.3cqw; padding: 0 2cqw 0 7.5cqw; }
  .in-index #content .u-hero-mini { font-size: 1.1cqw; }
  .in-index #content .u-hero h2 { font-size: 4.3cqw; }
  .in-index #content .u-hero-sub { font-size: 1.6cqw; }
  .in-index #content .u-hero-btn { margin-top: .6cqw; padding: 1cqw 2.2cqw; font-size: 1.25cqw; }
  .in-index #content .u-hero:hover .u-hero-btn { background: #000; }
  .in-index #content .u-hero-sklad:hover .u-hero-btn { background: #ffd48f; }
  .in-index .u-hero-celo .u-hero-foto { object-position: 50% 32%; }
  .in-index .u-hero-gumaky .u-hero-foto { object-position: 50% 75%; }
  .in-index .u-hero-papucky .u-hero-foto { object-position: 30% 65%; }
  .in-index .u-znacky { padding: 3cqw 10cqw 3cqw 2cqw; }
  .in-index #content .u-znacky ul { gap: 1.3cqw 1.1cqw; }
  .in-index #content .u-znacky .u-zn-l { font-size: 2.3cqw; }
  .in-index #content .u-znacky .u-zn-m { font-size: 1.8cqw; }
  .in-index #content .u-znacky .u-zn-s { display: block; font-size: 1.4cqw; }
  .in-index #content .u-znacky .u-zn-dalsie { font-size: 1.4cqw; }
  .in-index .u-hero .u-znacky-nalepka { display: block; position: absolute; right: 1.5cqw; bottom: 2cqw; width: 7.5cqw; height: auto; transform: rotate(-8deg);
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.15)); }
  .in-index .u-hero-zima-b .u-hero-foto { object-position: 50% 75%; }
  .in-index .u-hero-zima-b .u-peciatka { top: 5%; left: auto; right: 4cqw; box-shadow: 0 0 0 .5cqw #e8eef5, 0 8px 20px rgba(0,0,0,.18); }
  .in-index #content .u-hero-sklad h2 { font-size: 3.7cqw; }
  .in-index .u-peciatka { top: 9%; left: 3cqw; right: auto; width: 12cqw; height: 12cqw; gap: .4cqw; box-shadow: 0 0 0 .5cqw var(--u-sage4), 0 8px 20px rgba(0,0,0,.25); }
  .in-index .u-hero .u-peciatka img { width: 4cqw; height: 4cqw; }
  .in-index .u-peciatka b { font-size: 1.45cqw; }
}

/* ---------- 2 Kam dnes vykročíme (banner Stred) — vzhľad ako podkategórie v menu ---------- */
.in-index #content .u-kat { padding: 22px 0 6px; }
.in-index #content .u-kat-mriezka { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.in-index #content .u-kat-mriezka a { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 5px 10px; background: #fff;
  border: 1px solid var(--u-line); border-radius: 12px; color: var(--u-black); font-size: 14px; font-weight: 700; text-decoration: none; }
.in-index #content .u-kat-mriezka a:hover { border-color: var(--u-sage); background: var(--u-sage-l); }
.in-index #content .u-kat-mriezka img { flex: none; width: 46px; height: 40px; object-fit: contain; mix-blend-mode: multiply; transform: none; }
.in-index #content .u-kat-vsetko { background: var(--u-sage-l); border-color: var(--u-sage); }
.in-index #content .u-kat-vsetko i { flex: none; display: grid; place-items: center; width: 46px; height: 40px; font-style: normal; font-size: 22px; font-weight: 700; }

@media (min-width: 768px) {
  .in-index #content .u-kat { padding: 40px 0 10px; }
  .in-index #content .u-kat-mriezka { grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .in-index #content .u-kat-mriezka a { min-height: 72px; padding: 8px 14px; gap: 14px; font-size: 15px; }
  .in-index #content .u-kat-mriezka img, .in-index #content .u-kat-vsetko i { width: 64px; height: 52px; }
}

/* ---------- 3 Produkty na titulnej strane (záložky robí uvodna-stranka.js) ---------- */
.in-index #content > .homepage-group-title { font-size: 22px; font-weight: 700; text-align: left; margin: 30px 0 14px; }
.in-index #content > .u-pb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 30px 0 14px; }
.in-index #content > .u-pb-head .u-h2 { margin: 0; }
.in-index #content .u-tabs { display: flex; gap: 8px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.in-index #content .u-tabs::-webkit-scrollbar { display: none; }
.in-index #content .u-tabs button { flex: none; padding: 7px 15px; border: 2px solid var(--u-black); border-radius: 999px; background: #fff; color: var(--u-black);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.in-index #content .u-tabs button.on { background: var(--u-black); color: #fff; }
.in-index #content.u-zalozky > .homepage-group-title { display: none; }
.in-index #content > .products-wrapper.u-skryte { display: none; }
.in-index #content > .products-wrapper .p .image img { border-radius: 16px; }
@media (min-width: 768px) {
  .in-index #content > .u-pb-head { margin-top: 50px; }
  .in-index #content .u-h2, .in-index #content > .homepage-group-title { font-size: 30px; }
}

/* ---------- 4 Konkurenčné výhody na šalviovom páse ---------- */
.in-index #content > .benefitBanner { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; margin: 30px 0 0; padding: 18px 0; }
.in-index #content > .benefitBanner .benefitBanner__item { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; width: auto; max-width: none; flex: none; }
.in-index #content > .benefitBanner .benefitBanner__picture { flex: none; width: 46px; height: 46px; margin: 0; padding: 7px; background: #fff; border-radius: 50%; }
.in-index #content > .benefitBanner .benefitBanner__img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.in-index #content > .benefitBanner .benefitBanner__content { padding: 0; }
.in-index #content > .benefitBanner .benefitBanner__title { display: block; font-size: 13px; line-height: 1.25; color: var(--u-black); }
.in-index #content > .benefitBanner .benefitBanner__data { font-size: 12px; line-height: 1.3; color: #2c3125; }
@media (min-width: 768px) {
  .in-index #content > .benefitBanner { grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 50px; padding: 30px 0; }
  .in-index #content > .benefitBanner .benefitBanner__picture { width: 66px; height: 66px; padding: 10px; }
  .in-index #content > .benefitBanner .benefitBanner__title { font-size: 16px; }
  .in-index #content > .benefitBanner .benefitBanner__data { font-size: 14px; }
}

/* ---------- 5–6 Bannery Zápätie: Disco ich dáva po dvoch vedľa seba, tu sú pod sebou ---------- */
.in-index #content > .footer-banners { margin: 0; }
.in-index #content > .footer-banners > .footer-banner { flex: 0 0 100%; width: 100%; max-width: 100%; float: none; padding-left: 0; padding-right: 0; }
.in-index #content .footer-banner a img { transform: none; }


/* 5 Zásady a citát */
.in-index #content .u-zasady { padding: 34px 0 10px; }
.in-index #content .u-zasady > .u-h2 { text-align: center; margin-bottom: 10px; }
.in-index #content .u-kroky { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px;
  margin: 0 -10px; padding: 16px 10px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 10px; scrollbar-width: none; }
.in-index #content .u-kroky::-webkit-scrollbar { display: none; }
.in-index #content .u-kroky-ciara { display: none; }
/* bodky pod kartami (pridá uvodna-stranka.js), vzhľad ako stránkovanie produktov v šablóne */
.in-index #content .u-bodky { display: flex; justify-content: center; margin-top: 4px; }
.in-index #content .u-bodky button { width: 40px; height: 24px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.in-index #content .u-bodky button::before { content: ""; display: block; width: 32px; height: 2px; margin: 0 auto;
  background: var(--colors-foregrounds-borders-secondary, #d4d4d4); }
.in-index #content .u-bodky button.on::before { background: var(--color-primary, var(--u-black)); }
.in-index #content .u-krok { position: relative; scroll-snap-align: start; background: var(--u-sage); border-radius: 24px; padding: 34px 18px 18px; }
.in-index #content .u-krok b { position: absolute; left: 14px; top: -14px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  font-size: 18px; font-style: italic; font-weight: 800; color: var(--u-black); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.in-index #content .u-krok:nth-child(2) b { background: var(--u-copper); }
.in-index #content .u-krok:nth-child(3) b { background: var(--u-amber); }
.in-index #content .u-krok:nth-child(4) b { background: var(--u-blue); color: #fff; }
.in-index #content .u-krok p { margin: 0; color: var(--u-black); font-size: 14.5px; line-height: 1.5; }
.in-index #content .u-krok strong { display: block; font-size: 16px; font-style: italic; margin-bottom: 2px; }
.in-index #content .u-krok a { color: var(--u-black); font-weight: 700; text-decoration: underline; }
.in-index #content .u-citat { position: relative; display: flex; flex-wrap: wrap; margin-top: 30px; background: var(--u-sage4); border-radius: 28px; }
.in-index #content .u-citat-foto { position: relative; flex: 1 1 100%; height: 200px; border-radius: 28px 28px 0 0; overflow: hidden; }
.in-index #content .u-citat-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; filter: saturate(.9) contrast(.95) brightness(1.04); }
.in-index #content .u-citat-txt { position: relative; flex: 1 1 100%; padding: 24px 18px 24px; }
.in-index #content .u-bublina { position: relative; margin-bottom: 28px; padding: 16px 20px; background: #fff; border-radius: 28px; font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--u-black); }
.in-index #content .u-bublina em { font-weight: 800; }
.in-index #content .u-bublina::after { content: ""; position: absolute; left: 44px; bottom: -20px; width: 34px; height: 34px; background: #fff; border-radius: 0 0 0 34px; transform: skewX(-20deg); }
.in-index #content .u-citat-txt > p { margin: 0 0 18px; color: var(--u-black); font-size: 14.5px; }
.in-index #content .u-citat .u-btn { font-size: 13.5px; padding: 10px 16px; }
.in-index #content .u-kvietok { position: absolute; right: 10px; top: -40px; width: 64px; transform: rotate(14deg); }

/* 6 Predajňa */
.in-index #content .u-pred { margin-top: 34px; padding: 24px 0; }
.in-index #content .u-pred-grid { display: grid; }
.in-index #content .u-pred-foto { position: relative; height: 190px; border-radius: 24px 24px 0 0; overflow: hidden; }
.in-index #content .u-pred-foto > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(.95) brightness(1.04); }
.in-index #content .u-pred-karta { position: relative; padding: 22px 18px 24px; background: #fff; border-radius: 0 0 24px 24px; }
.in-index #content .u-mini { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--u-sage4); }
.in-index #content .u-pred-karta > p { margin: 0 0 14px; color: #444; font-size: 14.5px; }
.in-index #content .u-hodiny { margin: 0 0 18px; border-collapse: collapse; font-size: 13px; }
.in-index #content .u-hodiny tbody { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
.in-index #content .u-hodiny tr { display: flex; justify-content: space-between; gap: 8px; }
.in-index #content .u-hodiny th { padding: 3px 0; text-align: left; font-weight: 700; color: var(--u-black); }
.in-index #content .u-hodiny td { padding: 3px 0; color: #555; }
.in-index #content .u-odznak { position: absolute; right: 14px; top: -56px; width: 92px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.15)); }

@media (min-width: 768px) {
  .in-index #content .u-nalepka { display: block; position: absolute; width: 96px; }
  .in-index #content .u-zasady { padding: 60px 0 20px; }
  .in-index #content .u-zasady > .u-h2 { margin-bottom: 40px; }
  .in-index #content .u-kroky { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: 34px; margin: 0; padding: 0 0 0 26px; overflow: visible; }
  .in-index #content .u-bodky { display: none; }
  .in-index #content .u-kroky-ciara { display: block; position: absolute; left: 0; right: 0; top: 18px; width: 100%; height: 120px; z-index: 0; }
  .in-index #content .u-krok { z-index: 1; border-radius: 44px; padding: 26px 28px 28px 50px; }
  .in-index #content .u-krok b { left: -24px; top: -16px; width: 62px; height: 62px; font-size: 26px; }
  .in-index #content .u-krok { padding: 26px 28px 28px 50px; }
  .in-index #content .u-krok p { font-size: 15.5px; }
  .in-index #content .u-krok strong { font-size: 18px; }
  .in-index #content .u-citat { margin-top: 64px; border-radius: 34px; flex-wrap: nowrap; }
  .in-index #content .u-citat-foto { flex: 0 0 38%; height: auto; min-height: 380px; border-radius: 34px 0 0 34px; }
  .in-index #content .u-citat-txt { flex: 1 1 auto; padding: 50px 56px; }
  .in-index #content .u-bublina { font-size: 27px; padding: 30px 36px; border-radius: 48px; margin-bottom: 40px; }
  .in-index #content .u-citat-txt > p { font-size: 16px; }
  .in-index #content .u-kvietok { right: -16px; top: -40px; width: 96px; }
  .in-index #content .u-pred { margin-top: 60px; padding: 70px 0; }
  .in-index #content .u-pred-grid { grid-template-columns: 1.1fr 1fr; }
  .in-index #content .u-pred-foto { height: auto; min-height: 460px; border-radius: 30px 0 0 30px; }
  .in-index #content .u-st1 { left: 22px; bottom: 22px; transform: rotate(-10deg); }
  .in-index #content .u-st3 { right: 22px; top: 22px; transform: rotate(10deg); }
  .in-index #content .u-pred-karta { padding: 44px 48px 48px; border-radius: 0 30px 30px 0; }
  .in-index #content .u-pred-karta > .u-h2 { font-size: 32px; }
  .in-index #content .u-pred-karta > p { font-size: 16px; }
  .in-index #content .u-hodiny { font-size: 14.5px; }
  .in-index #content .u-hodiny tbody { display: table-row-group; }
  .in-index #content .u-hodiny tr { display: table-row; }
  .in-index #content .u-hodiny th { padding: 4px 28px 4px 0; }
  .in-index #content .u-odznak { left: -66px; right: auto; top: auto; bottom: -40px; width: 130px; }
}

/* ---------- Uvítací text ako záver: krémový pás, „všetko skladom“ a cesta objednávky v 3 krokoch ---------- */
.in-index #content > .welcome-wrapper { margin: 34px 0 0; padding: 34px 0 30px; text-align: center; max-width: none;
  background: var(--u-cream); box-shadow: 0 0 0 100vmax var(--u-cream); clip-path: inset(0 -100vmax); }
.in-index #content > .welcome-wrapper .welcome { max-width: 760px; margin: 0 auto; }
.in-index #content > .welcome-wrapper .h1 { font-family: Montserrat, sans-serif; font-size: 22px; font-weight: 700; margin: 0 0 12px; }
.in-index #content > .welcome-wrapper .h1::before { content: ""; display: block; width: 40px; height: 31px; margin: 0 auto 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 54'%3E%3Cpolygon fill='%23a0a98c' points='49.41 0 35 13.95 20.6 0 0 19.94 14.41 33.9 35 53.84 70 19.94'/%3E%3C/svg%3E") center / contain no-repeat; }
.in-index #content > .welcome-wrapper p { margin: 0 0 12px; color: #444; font-size: 14.5px; text-wrap: balance; }
.in-index #content > .welcome-wrapper p strong { color: var(--u-black); }
.in-index #content .u-cesta { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0 10px; padding: 0; list-style: none; counter-reset: krok; }
.in-index #content .u-cesta::before { content: ""; position: absolute; top: 31px; left: 16%; right: 16%; border-top: 3px dashed var(--u-sage); }
.in-index #content .u-cesta li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 0; counter-increment: krok; }
.in-index #content .u-cesta li::before { content: counter(krok); position: absolute; top: -6px; left: calc(50% + 18px); display: grid; place-items: center;
  width: 22px; height: 22px; margin: 0; border-radius: 50%; background: var(--u-copper); color: var(--u-black); font: italic 800 12px/1 Montserrat, sans-serif; }
.in-index #content .u-cesta li:nth-child(2)::before { background: var(--u-amber); }
.in-index #content .u-cesta li:nth-child(3)::before { background: var(--u-blue); color: #fff; }
.in-index #content .u-cesta img { position: relative; width: 62px; height: 62px; padding: 9px; background: #fff; border: 2px solid var(--u-sage); border-radius: 50%; }
.in-index #content .u-cesta strong { font-size: 13px; line-height: 1.3; color: var(--u-black); }
.in-index #content > .welcome-wrapper .u-cesta-pozn { font-size: 12px; color: #6a6a6a; margin-bottom: 20px; }
.in-index #content > .welcome-wrapper .u-dakujeme { margin: 0; font-size: 16px; color: var(--u-black); }
@media (min-width: 768px) {
  .in-index #content > .welcome-wrapper { margin-top: 60px; padding: 64px 0 60px; }
  .in-index #content > .welcome-wrapper .h1 { font-size: 30px; }
  .in-index #content > .welcome-wrapper p { font-size: 16px; }
  .in-index #content .u-cesta { gap: 20px; margin: 34px auto 14px; max-width: 620px; }
  .in-index #content .u-cesta::before { top: 41px; }
  .in-index #content .u-cesta li::before { left: calc(50% + 26px); width: 26px; height: 26px; font-size: 14px; }
  .in-index #content .u-cesta img { width: 82px; height: 82px; padding: 13px; }
  .in-index #content .u-cesta strong { font-size: 15px; }
  .in-index #content > .welcome-wrapper .u-cesta-pozn { font-size: 13px; margin-bottom: 26px; }
  .in-index #content > .welcome-wrapper .u-dakujeme { font-size: 19px; }
}