/* ============================================================
   Heavypro — brand layer over Shoptet Disco (template 13)
   Master file: web/shoptet/heavypro.css (repo)
   Deploy: SFTP /css/heavypro.css + bump ?v= in Záhlaví HTML kód
   v68 (2026-08-31): radek hledani odsazen od hlavickoveho CTA (12px),
     --hp-search-h 40 -> 52px aby offset obsahu sedel.
   v67 (2026-08-31): odsazeni amber CTA od hamburgeru v mobilni hlavicce.
   v66 (2026-08-31): mobilni vyhledavani - obsah se posune, kdyz se hlavicka
     rozsiri o radek hledani (--hp-search-h); vlastni focus stav pole.
   v65 (2026-08-31): mobilni zasuvka zacina pod hlavickou (top 50 -> 86px)
     a vyska hlavicky je nyni promenna --hp-header-h.
   v64 (2026-08-31): podkategorie v mobilni zasuvce zpet SLOZENE (sipka
     sablony je rozbali); zasuvka 905px -> 281px.
   v63 (2026-08-31): mobilni zasuvka prekreslena (petrol, sevreny rytmus,
     rozbalene podkategorie, bez megamenu CTA); .overall-wrapper 86px
     kvuli drobeckum pod fixni hlavickou; rozestup tlacitek .hp-emptycat.
   v62 (2026-08-31): mobilni menu bylo BILE NA BILEM - barva odkazu je nyni
     scopovana (desktop bila / mobil petrolova).
   v61 (2026-08-31): oprava prazdneho mobilniho hamburgeru — #navigation
     height:48px a megamenu geometrie nebyly omezeny na desktop.
     Obe sekce nyni v @media (min-width: 768px).
   Fonts are loaded via Google Fonts <link> in the same slot.
   ============================================================ */

/* --- typography: Saira (headings, uppercase) + Inter (text) --- */
body {
  font-family: 'Inter', 'Source Sans 3', system-ui, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.btn, button,
#navigation, .navigation-in {
  font-family: 'Saira', 'Exo 2', 'Arial Narrow', sans-serif;
}
h1, h2, h3 {
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* (topbar: white per mockup — rules live in the parity section below) */

/* --- main navigation: petrol bar, white Saira uppercase, amber hover --- */
.header-bottom-wrapper, .header-bottom { background: #003847; }
#navigation { background-color: transparent; }
.navigation-in .menu-level-1 > li > a {
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 14px;
}
/* Barva odkazu MUSI sledovat podklad: desktop = bily text na petrolove
   liste, mobil = petrolovy text na BILE off-canvas zasuvce (sablona ji
   kresli bilou). Nescopovana bila = menu je v hamburgeru neviditelne. */
@media (min-width: 768px) {
  .navigation-in .menu-level-1 > li > a { color: #fff; }
  .navigation-in .menu-level-1 > li > a:hover,
  .navigation-in .menu-level-1 > li.exp > a {
    background: #00242E;
    color: #E89611;
  }
}
@media (max-width: 767px) {
  .navigation-in .menu-level-1 > li > a { color: #003847; }
}

/* Menu: kategorie v hlavní navigaci vždy viditelné — oprava chybného
   přepočtu šířky menu při pozdním načtení webfontu (JS je jinak odsune
   do overflow "..."). Na mobilu menu řeší hamburger, pravidlo se neuplatní. */
@media (min-width: 992px) {
  .navigation-in .menu-level-1 > li.appended-category {
    display: block !important;
  }
}

/* --- search button petrol --- */
.search-button.btn-default {
  background: #003847; color: #fff; border-color: #003847;
}
.search-button.btn-default:hover {
  background: #00647D; border-color: #00647D; color: #fff;
}

/* --- footer: petrol-dark with white Saira headings (mockup .sfooter) --- */
.custom-footer { background: #00242E; color: #A9C4CC; }
.custom-footer h4 {
  color: #fff; letter-spacing: .12em; text-transform: uppercase; font-size: 12px;
}
.custom-footer a { color: #A9C4CC; }
.custom-footer a:hover { color: #E89611; }
.footer-bottom { background: #00242E; color: #7E9BA4; }
.footer-bottom a { color: #7E9BA4; }

/* --- hero (carousel) overlay per mockup --- */
.extended-banner-texts {
  position: absolute; top: auto !important; right: auto; bottom: 44px; left: 48px;
  height: auto !important;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  max-width: 660px; width: auto;
}
/* descendant, NOT child: the CTA now sits one level deeper inside
   .hp-hero-btns, and a child combinator would hand it back to Disco's
   position:absolute — which pulls it out of the button row. */
.extended-banner-texts > span,
.extended-banner-texts a.extended-banner-link,
.extended-banner-texts > div.hp-hero-btns { position: static !important; margin: 0 !important; }
.extended-banner-title, .extended-banner-text { padding: 0 !important; }
.extended-banner-title, .extended-banner-text { text-shadow: 0 1px 12px rgba(0, 36, 46, .55); }
.extended-banner-title {
  font-family: 'Saira', sans-serif; text-transform: uppercase; font-weight: 700;
  font-size: 36px; line-height: 1.12; letter-spacing: .01em; color: #fff;
}
.extended-banner-text { font-size: 16px; font-weight: 400; color: #E8F0F2; max-width: 60ch; }
/* dual-color slogan: second line amber (mockup h1 span) */
.extended-banner-title span { color: #E89611; }
/* hero is not a link — only its buttons (Zápatí JS strips the wrapper href) */
.carousel-inner a:not([href]) { cursor: default; }
.extended-banner-link {
  display: inline-block; background: #E89611; color: #111110 !important;
  font-family: 'Saira', sans-serif; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 600; font-size: 13px; padding: 12px 22px !important; border-radius: 2px; margin-top: 8px !important;
}
.extended-banner-link:hover { background: #F2A83C; }

/* --- empty-catalog launch mode: cart hidden (plan, balíček D) --- */
.cart-count { display: none !important; }

/* --- header CTA (element inserted by the Zápatí script) --- */
.hp-header-cta {
  display: inline-flex; align-items: center; background: #E89611; color: #111110;
  font-family: 'Saira', sans-serif; text-transform: uppercase; font-weight: 600;
  letter-spacing: .08em; font-size: 13px; padding: 12px 20px; border-radius: 2px;
  white-space: nowrap; text-decoration: none;
}
.hp-header-cta:hover { background: #F2A83C; color: #111110; text-decoration: none; }

/* --- footer petrol-dark (mockup .sfooter) --- */
footer.footer { background: #00242E !important; color: #A9C4CC; }
footer.footer a { color: #A9C4CC; }
footer.footer a:hover { color: #E89611; }

/* --- brand color tokens (mirror of the approved palette) --- */
:root {
  --hp-petrol: #003847;
  --hp-petrol-dk: #00242E;
  --hp-petrol-web: #00647D; /* links/hover on white — 6.73:1 */
  --hp-amber: #E89611;      /* never as text color on white (2.39:1) */
  --hp-ink: #111110;        /* text on amber — 7.92:1 */
  --hp-gray: #6B6B68;
  --hp-line: #EDEDEA;
}


/* ================= agent-validated parity patches ================= */

/* ===== layout width standardization (2026-08-24, per Marek):
   ONE grid = Disco's standard .container (width 1418px incl. 20px side
   padding). Disco's container-narrow (1178px) is neutralized on the
   content wrapper so page content spans the same width as nav/footer.
   Running text keeps its ~74ch caps for readability. ===== */
#content-wrapper.container-narrow { width: 1418px; }

/* ========== topbar (agent-validated) ========== */
/* --- topbar parity: live .top-navigation-bar -> mockup .stopbar (white strip) --- */
.top-navigation-bar {
  background: #fff;
  color: #6B6B68;
  border-bottom: 1px solid #E3E6E6;
}
.top-navigation-bar .container {
  max-width: 1418px;
  margin: 0 auto;
  padding: 0 20px;
}
.top-navigation-bar a,
.top-navigation-bar .top-nav-button,
.top-navigation-bar .top-navigation-menu-trigger {
  color: #6B6B68;
  font-family: 'Inter', 'Source Sans 3', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  text-transform: none;
}
.top-navigation-bar a:hover,
.top-navigation-bar .top-nav-button:hover {
  color: #00647D;
}
.top-navigation-bar .top-navigation-bar-menu > li > a {
  padding: 8px 18px 8px 0;
}
.top-navigation-bar .top-nav-button {
  background: transparent;
  border: 0;
  padding: 8px 0 8px 18px;
}

/* ========== header (agent-validated) ========== */
/* === PATCH: header top row (logo / search / CTA) — parity with mockup .sheader === */
.header-top { padding: 18px 0 !important; }
.header-top .container { max-width: 1418px; margin: 0 auto; }
.header-top .site-name { flex: 0 0 auto; line-height: 0; height: auto !important; }
.header-top .site-name img { display: block; }
.header-top .site-name a { display: block; line-height: 0; }
.header-top .search { flex: 1 1 auto !important; padding: 0 22px !important; }
.header-top .navigation-buttons { flex: 0 0 auto !important; width: auto !important; justify-content: flex-end; }

/* search: bordered input + attached solid petrol "Hledat" button (mockup .ssearch) */
.header-top .search form { width: 100% !important; max-width: none !important; }
.header-top .search-form fieldset { display: flex; align-items: center; width: 100%; }
.header-top .search .search-input-icon { display: none !important; }
.header-top .search .query-input {
  flex: 1 1 auto; min-width: 0; height: 40px; width: 100%;
  border: 1px solid #CFD8D8 !important; border-right: 0 !important;
  border-radius: 3px 0 0 3px;
  padding: 11px 14px !important;
  font-size: 14px; background: #fff;
}
.header-top .search .search-button {
  display: inline-flex !important; align-items: center; justify-content: center;
  flex: 0 0 auto;
  height: 40px; padding: 0 18px !important;
  border: 0; border-radius: 0 3px 3px 0;
  font-family: 'Inter', sans-serif; font-size: 13px !important; font-weight: 600;
  line-height: 1 !important; letter-spacing: 0; text-transform: none;
}

/* header CTA: mockup .scart (cart icon + two-line label, amber, 3px radius) */
.header-top .hp-header-cta {
  font-family: 'Inter', sans-serif;
  font-size: 13px !important; line-height: 1.25 !important;
  font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none;
  padding: 9px 14px !important; border-radius: 3px;
  margin-left: 20px !important;
  white-space: normal; text-align: left;
  display: inline-flex; align-items: center; gap: 9px;
}
.hp-header-cta svg { width: 20px; height: 20px; flex: 0 0 auto; }
.hp-header-cta span { display: flex; flex-direction: column; }
.hp-header-cta b { font-weight: 700; }

/* ========== nav (agent-validated) ========== */
/* --- nav parity with mockup .snav (audit 2026-08-23) --- */
/* bar height: template pins 68px on the whole chain; mockup bar is ~48px.
   #navigation has overflow:hidden and collapses with height:auto — pin 48px. */
/* MUSI byt jen desktop: pod 768px je #navigation off-canvas zasuvka
   (sablona: height:100%; position:fixed; width:0) a #navigation ma
   globalne overflow:hidden — nescopovanych 48px zasuvku orizne
   a hamburger se otevre prazdny. */
@media (min-width: 768px) {
#navigation,
#navigation .navigation-in,
.navigation-in .menu-level-1,
.navigation-in .menu-level-1 > li {
  height: 48px !important;
}
}
.navigation-in .menu-level-1 > li > a {
  font-size: 13px !important;
  line-height: 20px !important;
  padding: 14px 16px !important;
}
/* mockup hover = dark bg + amber text only, no underline */
.navigation-in .menu-level-1 > li > a:hover,
.navigation-in .menu-level-1 > li > a:hover b,
.navigation-in .menu-level-1 > li.exp > a,
.navigation-in .menu-level-1 > li.exp > a b {
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* mockup weight is 600; template's <b> renders 700 */
.navigation-in .menu-level-1 > li > a b {
  font-weight: 600;
}
/* chevron on items with a submenu (mockup .navitem > a::after) */
.navigation-in .menu-level-1 > li.ext > a {
  display: flex;
  align-items: center;
  gap: 7px;
}
.navigation-in .menu-level-1 > li.ext > a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: .7;
}

/* ========== hero (agent-validated) ========== */
/* --- hero parity: petrol scrim, copy right + vertically centered (mockup .bhero) --- */
#carousel .item { position: relative; }
#carousel .item::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,56,71,0) 26%, rgba(0,56,71,.42) 46%, rgba(0,56,71,.88) 64%, rgba(0,56,71,.95) 100%);
}
.carousel-inner { min-height: 0 !important; }
#carousel .item img { width: 100%; height: 457px; object-fit: cover; object-position: 28% 50%; }
.extended-banner-texts {
  z-index: 2;
  left: auto !important; right: 148px; bottom: auto;
  top: 50% !important; transform: translateY(-50%);
  max-width: 436px; gap: 14px;
}
.extended-banner-title { font-size: 40px; line-height: 42px; letter-spacing: .01em; text-shadow: none; }
.extended-banner-text { font-size: 15px; line-height: 23px; color: #CFE2E8; text-shadow: none; }
.extended-banner-link { padding: 13px 22px !important; border: 2px solid transparent; letter-spacing: .1em; }

/* ========== usp (agent-validated) ========== */
/* --- USP benefit banner: match mockup .trio (icon above title, Saira uppercase) --- */
.benefitBanner { gap: 20px; margin: 24px 0; }
.benefitBanner__item {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 0;
}
.benefitBanner__picture {
  width: 48px; height: 48px;
  margin: 0 0 4px;
  flex: 0 0 auto;
}
.benefitBanner__img { width: 48px; height: 48px; }
.benefitBanner__content { margin: 0; padding: 0; }
.benefitBanner__title {
  display: block;
  font-family: 'Saira', 'Exo 2', 'Arial Narrow', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: #111110;
  margin-bottom: 4px;
}
.benefitBanner__data {
  font-size: 14px;
  line-height: 1.55;
  color: #6B6B68;
}

/* ========== kdojsme (agent-validated) ========== */
/* --- "Kdo jsme" welcome block: moved UNDER the USP trio by the Zápatí JS,
   full-bleed tinted band (bg alternation: hero dark / USP white / this tint
   / Kategorie white / amber / petrol footer) --- */
.welcome-wrapper { padding: 0; }
.welcome { max-width: 1378px; margin: 0 auto; }
.welcome p { max-width: 74ch; }
.welcome .h1 {
  text-transform: uppercase;
  font-family: 'Saira', 'Exo 2', 'Arial Narrow', sans-serif;
  font-size: 27px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.55;
  color: #111110;
  margin: 0 0 10px;
}
.welcome p {
  color: #6B6B68;
  font-size: 15px;
  line-height: 1.55;
}

/* ========== footer (agent-validated) ========== */
/* --- footer: parity with mockup .sfooter / .madeby --- */
#footer.footer { padding-top: 44px; font-size: 14px; }
#footer .footer-links-icons { padding-bottom: 34px; }
#footer .footer-links li a { font-size: 14px; color: #A9C4CC; }
#footer .footer-links li a:hover { color: #E89611; }
#footer .footer-bottom { background: #00242E; padding: 0; font-size: 12px; color: #7E9BA4; }
#footer .footer-bottom > .container {
  border-top: 1px solid #2C4750;
  padding-top: 16px;
  padding-bottom: 16px;
}
#footer .footer-bottom .copyright,
#footer .footer-bottom a,
#footer .footer-bottom #signature a.title { color: #7E9BA4; font-size: 12px; }
#footer .footer-bottom a:hover { color: #E89611; }

/* ================================================================
   Structural additions (elements injected by the Zápatí script
   or hosted in banner positions) — mockup parity
   ================================================================ */
/* (shipstrip removed 2026-08-25 per Marek) */
/* "Naše kategorie" cards: two Střed banners side by side */
.body-banners { display: flex; flex-wrap: wrap; }
.body-banners > .col-sm-12 { flex: 0 0 50%; max-width: 50%; }
@media (max-width: 767px) {
  .body-banners > .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}
/* amber band: single footer banner, full width */
.footer-banners .footer-banner { flex: 0 0 100%; max-width: 100%; width: 100%; }
/* hero eyebrow (injected span before the title) */
.hp-hero-eyebrow {
  display: block;
  font-family: 'Saira', sans-serif; color: #E89611;
  text-transform: uppercase; letter-spacing: 3px;
  font-size: 12px; font-weight: 600;
}
/* hero buttons: ONE flex row — the ghost used to be absolutely positioned
   from a measured bounding box, which went stale as soon as the Saira
   webfont swapped in and moved the amber CTA. Never measure; lay out. */
.hp-hero-btns {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 14px;
  margin-top: 4px !important;
}
.hp-hero-btns > .extended-banner-link {
  position: static !important; margin: 0 !important;
  display: inline-flex; align-items: center;
}
.hp-hero-ghost {
  display: inline-flex; align-items: center;
  border: 2px solid rgba(255,255,255,.45); color: #fff !important;
  font-family: 'Saira', sans-serif; text-transform: uppercase;
  letter-spacing: 1.3px; font-weight: 600; font-size: 13px;
  padding: 13px 22px; border-radius: 2px; text-decoration: none;
}
.hp-hero-ghost:hover { border-color: #fff; color: #fff !important; text-decoration: none; }


/* --- menu order per mockup (items are real menu entries; CSS only orders) --- */
#navigation .menu-level-1 > li { order: 50; }
#navigation li.menu-item-external-27 { order: 1; }  /* Úvod */
#navigation li.menu-item-768 { order: 2; }          /* O nás */
#navigation li.menu-item-708 { order: 3; }          /* Filtry */
#navigation li.menu-item-706 { order: 4; }          /* Oleje - Maziva - Chemie */
#navigation li.menu-item-771 { order: 5; }          /* Consulting */
#navigation li.menu-item-29 { order: 6; }           /* Kontakty */
#navigation li.menu-item-39 { display: none !important; } /* Obchodní podmínky — žije v horní liště */

/* hero ghost: positioned inline by the Zápatí script */


/* --- category cards: equal 2-up, images fill columns --- */
.body-banners > div { flex: 0 0 50% !important; max-width: 50% !important; }
.body-banners .banner-wrapper img { width: 100% !important; height: auto !important; }
@media (max-width: 767px) {
  .body-banners > div { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* --- USP trio order per mockup (admin content order differs) --- */
.benefitBanner__content { display: flex; }
.benefitBanner__item:nth-child(1) { order: 3; } /* Individuální přístup -> last */
.benefitBanner__item:nth-child(2) { order: 2; } /* Odborný přístup -> middle */
.benefitBanner__item:nth-child(3) { order: 1; } /* Široký sortiment -> first */


/* --- USP items: stack icon / title / text vertically (mockup .trio) --- */
.benefitBanner__item { display: block !important; }
.benefitBanner__item .benefitBanner__data { display: block; margin-top: 6px; }


/* --- hero: full-bleed image, copy aligned to the 1418px container
   (content edge = 50% - 709px + 20px padding = 50% - 689px) --- */
@media (min-width: 1460px) {
  .extended-banner-texts {
    left: auto !important;
    right: calc(50% - 689px) !important;
    max-width: 560px;
  }
}
@media (max-width: 1459px) {
  .extended-banner-texts { left: auto !important; right: 48px !important; max-width: 520px; }
}

/* ================================================================
   Hero: slow infinite crossfade across THREE client photos with a subtle
   Ken Burns drift. Layer A is the banner's own <img> (hero.jpg), layer B
   is photo 2 (bg-hero-web-02), layer C is photo 3 (bg-hero-web-03).
   One 42s cycle, ~11s per photo, ~2.9s fades.
   B fades out while it is hidden BEHIND C (74→80%), so the final fade of
   C reveals A cleanly instead of blending three layers at once.
   Stacking in .item: img 0 · b 1 · c 2 · scrim 3 · copy 4 · ghost 5.
   ================================================================ */
.hp-hero-anim { overflow: hidden; }
.hp-hero-b, .hp-hero-c, .hp-hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
}
.hp-hero-b, .hp-hero-c {
  opacity: 0; will-change: opacity, transform;
  background-position: center center; background-size: cover; background-repeat: no-repeat;
}
.hp-hero-b {
  z-index: 1;
  background-image: url('https://cdn.myshoptet.com/usr/807234.myshoptet.com/user/documents/img/hero2-1920.jpg');
  background-image: -webkit-image-set(url('https://cdn.myshoptet.com/usr/807234.myshoptet.com/user/documents/img/hero2-1920.webp') type("image/webp"), url('https://cdn.myshoptet.com/usr/807234.myshoptet.com/user/documents/img/hero2-1920.jpg') type("image/jpeg"));
  background-image: image-set(url('https://cdn.myshoptet.com/usr/807234.myshoptet.com/user/documents/img/hero2-1920.webp') type("image/webp"), url('https://cdn.myshoptet.com/usr/807234.myshoptet.com/user/documents/img/hero2-1920.jpg') type("image/jpeg"));
  animation: hpHeroFadeB 42s ease-in-out infinite, hpHeroKenB 42s ease-in-out infinite;
}
.hp-hero-c {
  z-index: 2;
  background-image: url('https://cdn.myshoptet.com/usr/807234.myshoptet.com/user/documents/img/hero3-1920.jpg');
  background-image: -webkit-image-set(url('https://cdn.myshoptet.com/usr/807234.myshoptet.com/user/documents/img/hero3-1920.webp') type("image/webp"), url('https://cdn.myshoptet.com/usr/807234.myshoptet.com/user/documents/img/hero3-1920.jpg') type("image/jpeg"));
  background-image: image-set(url('https://cdn.myshoptet.com/usr/807234.myshoptet.com/user/documents/img/hero3-1920.webp') type("image/webp"), url('https://cdn.myshoptet.com/usr/807234.myshoptet.com/user/documents/img/hero3-1920.jpg') type("image/jpeg"));
  animation: hpHeroFadeC 42s ease-in-out infinite, hpHeroKenC 42s ease-in-out infinite;
}
@media (max-width: 767px) {
  .hp-hero-b {
    background-image: url('https://cdn.myshoptet.com/usr/807234.myshoptet.com/user/documents/img/hero2-960.jpg');
    background-image: image-set(url('https://cdn.myshoptet.com/usr/807234.myshoptet.com/user/documents/img/hero2-960.webp') type("image/webp"), url('https://cdn.myshoptet.com/usr/807234.myshoptet.com/user/documents/img/hero2-960.jpg') type("image/jpeg"));
  }
  .hp-hero-c {
    background-image: url('https://cdn.myshoptet.com/usr/807234.myshoptet.com/user/documents/img/hero3-960.jpg');
    background-image: image-set(url('https://cdn.myshoptet.com/usr/807234.myshoptet.com/user/documents/img/hero3-960.webp') type("image/webp"), url('https://cdn.myshoptet.com/usr/807234.myshoptet.com/user/documents/img/hero3-960.jpg') type("image/jpeg"));
  }
}
/* layer A drifts the opposite way */
.hp-hero-anim > a > img, .hp-hero-anim > img {
  will-change: transform;
  animation: hpHeroKenA 42s ease-in-out infinite;
}
/* legibility scrim — photos 2 and 3 are bright where the copy sits */
.hp-hero-scrim {
  z-index: 3;
  background: linear-gradient(90deg,
    rgba(0,36,46,0) 0%, rgba(0,36,46,.08) 26%, rgba(0,36,46,.42) 50%,
    rgba(0,36,46,.72) 74%, rgba(0,36,46,.82) 100%);
}
.hp-hero-anim .extended-banner-texts { z-index: 4 !important; }
.hp-hero-ghost { z-index: 5; }
@keyframes hpHeroFadeB {
  0%, 31% { opacity: 0; }
  38%, 74% { opacity: 1; }
  80%, 100% { opacity: 0; }
}
@keyframes hpHeroFadeC {
  0%, 64% { opacity: 0; }
  71%, 93% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes hpHeroKenA {
  0% { transform: scale(1.05) translate3d(0, 0, 0); }
  50% { transform: scale(1.005) translate3d(0.6%, 0, 0); }
  100% { transform: scale(1.05) translate3d(0, 0, 0); }
}
@keyframes hpHeroKenB {
  0% { transform: scale(1.005) translate3d(-0.6%, 0, 0); }
  50% { transform: scale(1.05) translate3d(0, 0, 0); }
  100% { transform: scale(1.005) translate3d(-0.6%, 0, 0); }
}
@keyframes hpHeroKenC {
  0% { transform: scale(1.045) translate3d(0.4%, 0, 0); }
  50% { transform: scale(1.005) translate3d(-0.4%, 0, 0); }
  100% { transform: scale(1.045) translate3d(0.4%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hp-hero-b, .hp-hero-c,
  .hp-hero-anim > a > img, .hp-hero-anim > img { animation: none !important; }
  .hp-hero-b, .hp-hero-c { opacity: 0; }
}

/* --- footer links: flowing centered row(s) (columns come with contact data) --- */
footer.footer .footer-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 30px; list-style: none; padding: 0;
}
footer.footer .footer-links a {
  font-size: 13px; letter-spacing: .02em;
}


/* --- hero: true full-bleed (breaks out of Disco's container cap) --- */
main.content .banners-row {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 100vw !important;
}
@media (min-width: 768px) {
  main.content .banners-row .carousel-inner img {
    width: 100% !important;
    height: clamp(420px, 34vw, 640px) !important;
    object-fit: cover;
  }
}


/* --- empty-catalog box (Nastavení kategorií → Text v prázdné kategorii) --- */
.hp-emptycat {
  border: 1px solid #EDEDEA; border-left: 3px solid #E89611;
  border-radius: 3px; padding: 24px 26px; margin: 18px 0; background: #fff;
}
.hp-emptycat h3 { font-family: 'Saira', sans-serif; text-transform: uppercase; font-size: 18px; margin: 0 0 8px; color: #111110; }
.hp-emptycat p { color: #6B6B68; font-size: 14px; }
.hp-btn-amber {
  display: inline-block; background: #E89611; color: #111110 !important;
  font-family: 'Saira', sans-serif; text-transform: uppercase; letter-spacing: 1px;
  font-weight: 600; font-size: 13px; padding: 12px 20px; border-radius: 2px;
  margin-right: 10px; text-decoration: none !important;
}
.hp-btn-amber:hover { background: #F2A83C; }
.hp-btn-outline {
  display: inline-block; border: 2px solid #003847; color: #003847;
  font-family: 'Saira', sans-serif; text-transform: uppercase; letter-spacing: 1px;
  font-weight: 600; font-size: 13px; padding: 10px 20px; border-radius: 2px; text-decoration: none;
}
.hp-btn-outline:hover { background: #003847; color: #fff; }


/* ===== round-2 audit patches (validated) ===== */

/* ===== audit:home2 (validated) ===== */
/* ========== home content rhythm (agent-validated, audit home2) ========== */

/* USP row: fix broken flex (title+text were side by side) and center at the
   mockup's 1144px content width; mockup section rhythm ~56px */
.benefitBanner.position--benefitHomepage {
  max-width: 1378px;
  margin: 56px auto;
}
.benefitBanner__content { display: block; }
.benefitBanner__title { line-height: 1.55; }

/* category-card row: mockup .bsec.alt — full-bleed light band, cards centered
   at native image size (562px each + 20px gap = 1144px) */
.body-banners.banners-content {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 calc(50% - 50vw) 0 !important;
  padding: 58px max(10px, calc(50vw - 582px)) !important;
  background: #F4F6F6;
  border-top: 1px solid #E3E6E6;
  border-bottom: 1px solid #E3E6E6;
}
.body-banners > div { padding: 0 10px !important; }

/* amber band: kill the template's -20px pull-up that clipped the cards */
.footer-banners { margin-top: 0 !important; }

/* welcome band: full-bleed tint (sits under the USP trio, moved by JS) */
.welcome-wrapper.container-narrow {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 calc(50% - 50vw) !important;
  background: #EEF3F4;
  border-top: 1px solid #E3E6E6;
  border-bottom: 1px solid #E3E6E6;
  padding: 56px 20px;
}
.welcome .h1 { margin-bottom: 10px !important; }

/* ===== audit:onas (validated) ===== */
/* ========== o-nas / text pages (agent-validated) ========== */
/* page ground: mockup body is white (live template setting is lavender) */
body { background-color: #fff !important; }

/* breadcrumbs: mockup .crumb (12.5px gray, 14px vertical padding) */
.breadcrumbs { font-size: 12.5px; color: #6B6B68; padding-top: 14px; padding-bottom: 14px; }
.breadcrumbs a { color: #6B6B68; }
.breadcrumbs a:hover { color: #00647D; }

/* --- content column (mockup .txtpage / .pblock) --- */
.type-page .pageArticleDetail { padding-top: 12px; padding-bottom: 40px; }
.type-page .pageArticleDetail h1 {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: .7px;
  color: #003847;
  margin: 6px 0 10px;
}
.type-page .pageArticleDetail h2 {
  display: inline-block;
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: 2.1px;
  color: #003847;
  margin: 28px 0 14px;
  padding-bottom: 9px;
  border-bottom: 2px solid #E89611;
}
.type-page .pageArticleDetail p {
  font-size: 15px;
  line-height: 1.55;
  color: #111110;
  max-width: 74ch;
  margin-bottom: 12px;
}
.type-page .pageArticleDetail ul {
  list-style: disc;
  margin: 0 0 12px;
  padding-left: 17px;
  max-width: 74ch;
}
.type-page .pageArticleDetail ul li {
  list-style: disc !important;
  font-size: 15px;
  line-height: 1.55;
  color: #111110;
  padding-left: 2px;
  margin-bottom: 9px;
}
.type-page .pageArticleDetail ul li::before { display: none !important; content: none !important; }
.type-page .pageArticleDetail ul li::marker { color: #E89611; }

/* Kontaktovat: plain link -> mockup .bbtn.amber button */
.type-page .pageArticleDetail a[href="/kontakty/"] {
  display: inline-flex;
  align-items: center;
  background: #E89611;
  color: #111110;
  font-family: 'Saira', 'Exo 2', 'Arial Narrow', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  padding: 13px 22px;
  border: 2px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  margin-top: 8px;
}
.type-page .pageArticleDetail a[href="/kontakty/"]:hover {
  background: #F2A83C;
  color: #111110;
  text-decoration: none;
}

/* ================================================================
   Sidebar category tree — ONE clean system (redesigned 2026-08-25).
   Anatomy: petrol panel label ("Kategorie") · white root rows in Saira
   caps · indented Inter sub rows · only the ACTIVE root expanded
   (Zápatí JS strips .expanded from inactive roots; headings navigate).
   This block is the only source of truth — the two former overlapping
   blocks were removed. Separators are border-TOP only (no doubles).
   ================================================================ */
.sidebar .box-categories {
  border: 1px solid #E3E6E6;
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
  padding: 0;
}
/* panel label: un-hide the template's sr-only heading */
.sidebar .box-categories > h3.sr-only {
  position: static !important;
  width: auto !important; height: auto !important;
  clip: auto !important; clip-path: none !important;
  overflow: visible !important; white-space: normal !important;
  margin: 0 !important;
  padding: 13px 16px;
  background: #003847;
  color: #fff;
  font-family: 'Saira', 'Exo 2', 'Arial Narrow', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
}
/* root groups are plain rows inside the one panel — no own boxes */
.sidebar #categories .categories {
  border: 0; border-radius: 0; background: transparent;
  margin: 0; overflow: visible;
}
/* root heading row: Saira caps, petrol on white */
.sidebar #categories .topic a {
  display: block;
  background: #fff;
  color: #003847;
  font-family: 'Saira', 'Exo 2', 'Arial Narrow', sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  line-height: 20px;
  padding: 12px 16px;
  border-top: 1px solid #E3E6E6;
  border-bottom: 0;
  text-decoration: none;
}
.sidebar .box-categories .categories:first-child > .topic a { border-top: 0; }
.sidebar #categories .topic a:hover { background: #F4F6F6; color: #003847; }
/* active root: amber inset bar (inset shadow keeps text aligned) */
.sidebar #categories .categories.active > .topic a {
  background: #F4F6F6;
  box-shadow: inset 3px 0 0 #E89611;
}
/* sub rows: Inter, indented, hairline separators */
.sidebar #categories ul { list-style: none; margin: 0; padding: 0; background: #fff; }
.sidebar #categories ul li { margin: 0; padding: 0; }
.sidebar #categories ul li a {
  display: block;
  padding: 9px 16px 9px 28px;
  font-family: 'Inter', 'Source Sans 3', system-ui, sans-serif;
  font-size: 14px; font-weight: 400;
  line-height: 21px;
  color: #111110;
  border-top: 1px solid #EDEDEA;
  border-bottom: 0;
  text-decoration: none;
}
.sidebar #categories ul li a:hover { background: #FAFBFB; color: #00647D; }
.sidebar #categories ul li.active > a,
.sidebar #categories ul li a.active { color: #003847; font-weight: 600; }
/* only the active root shows its children */
.sidebar .box-categories .categories:not(.expanded) > ul { display: none; }
/* expand dash hidden on desktop: headings navigate */
@media (min-width: 992px) {
  .sidebar #categories .topic .cat-trigger { display: none !important; }
}

/* ===== audit:consulting (validated) ===== */
/* ===== text pages: give the prose something to sit beside =====
   O nas and Consulting were one column of running text inside the 1418px
   container, so the right half of a desktop screen stayed empty - the client's
   "vyuziva 2/3 obrazovky zleva". The measure itself was right; what was missing
   was anything occupying the rest of the grid. The intro now runs beside a
   photograph, the offer lists spread across the width, and the two closing
   sections sit side by side. Nothing here widens the running text. */
/* Two equal columns, and the intro column carries the offer list as well -
   with only the opening paragraph beside it the photo stood three times taller
   than the words it was meant to accompany. */
.hp-ptop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: start;
  margin: 4px 0 30px;
}
.hp-ptop > div > h2:first-child,
.hp-pcols > div > h2:first-child { margin-top: 0; }
.hp-pfig { margin: 0; border-radius: 2px; overflow: hidden; background: #F4F6F6; }
.hp-pfig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.hp-pcols { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; margin-bottom: 6px; }
@media (max-width: 900px) {
  .hp-ptop, .hp-pcols { grid-template-columns: 1fr; gap: 24px; }
  .hp-ptop { margin-bottom: 22px; }
  /* the photo is context, not content - it follows the words on a phone */
  .hp-pfig { order: 2; }
}

/* ===== category icons =====
   The client asked for an icon next to each category "viz profibagr.cz", and
   scoped it himself: the horizontal menu and the category boxes yes, the
   vertical sidebar bar no. The icons are Lucide (ISC), injected by the footer
   script and keyed on the category slug, so renaming a category keeps them. */
.hp-mmico { flex: 0 0 auto; width: 17px; height: 17px; color: #00647D; }
#navigation .menu-level-2 a.hp-hasico { display: flex; align-items: center; gap: 9px; }
#navigation .menu-level-2 a.hp-hasico:hover .hp-mmico { color: #E89611; }
.subcategories a.hp-hasico { display: flex; align-items: center; gap: 11px; }
.subcategories a.hp-hasico .hp-mmico { width: 22px; height: 22px; }
.subcategories a.hp-hasico:hover .hp-mmico { color: #E89611; }

/* ========== consulting / type-page (agent audit 2026-08-24) ========== */
/* page ground: template "custom background" paints lavender; mockup is white */
body { background: #fff !important; }

/* Consulting mockup has no sidebar — full-width content column */
.in-consulting .sidebar { display: none; }
.in-consulting #content { width: 100%; max-width: 100%; }

/* breadcrumbs: mockup .crumb (12.5px gray) */
.type-page .breadcrumbs,
.type-page .breadcrumbs a { font-size: 12.5px; color: #6B6B68; }

/* H1: petrol Saira 600 (mockup .txtpage h1) */
.type-page #content h1 {
  color: #003847;
  font-weight: 600;
  line-height: 1.4;
  margin: 6px 0 10px;
}

/* H2: small petrol Saira with amber underline (mockup .pblock h2) */
.type-page #content h2 {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2.2px;
  line-height: 1.5;
  color: #003847;
  border-bottom: 2px solid #E89611;
  padding-bottom: 9px;
  margin: 26px 0 14px;
}

/* body text: 15px ink, 1.55, measure capped like the mockup */
.type-page #content p {
  font-size: 15px;
  line-height: 1.55;
  color: #111110;
  max-width: 74ch;
}
/* lead: first paragraph under the H1 (mockup .lead) — #content keeps specificity above the p rule */
.type-page #content .pageArticleDetail [itemprop="about"] > p:first-child {
  font-size: 17px;
  color: #6B6B68;
  max-width: 66ch;
  margin-bottom: 34px;
}

/* Kontaktovat link -> outlined petrol button (mockup .bbtn.out) */
.in-consulting .pageArticleDetail a[href*="/kontakt"] {
  display: table;
  margin-top: 20px;
  border: 2px solid #003847;
  border-radius: 2px;
  background: transparent;
  color: #003847;
  font-family: 'Saira', 'Exo 2', 'Arial Narrow', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  padding: 13px 22px;
  text-decoration: none;
}
.in-consulting .pageArticleDetail a[href*="/kontakt"]:hover {
  background: #003847;
  color: #fff;
  text-decoration: none;
}

/* ===== audit:kontakty (validated) ===== */
/* ========== kontakty + contact form (agent-validated) ========== */

/* page ground: Disco default lavender body -> mockup white */
body { background-color: #fff !important; }

/* text-page heading: mockup .txtpage h1 (petrol, 600) */
main.content .content-inner h1 {
  color: #003847;
  font-weight: 600;
  margin-bottom: 12px;
}

/* lead paragraph under the H1 (mockup .lead) */
main.content .content-inner > p,
main.content .pageArticleDetail [itemprop="about"] > p {
  font-size: 17px;
  line-height: 26px;
  color: #6B6B68;
}

/* mockup text pages have no sidebar — hide Disco's category/payments rail
   on article and contact-form pages only */
.content-wrapper-in:has(.pageArticleDetail) > aside.sidebar,
.content-wrapper-in:has(#formContact) > aside.sidebar { display: none !important; }
.content-wrapper-in:has(.pageArticleDetail) > main.content,
.content-wrapper-in:has(#formContact) > main.content {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100%;
}

/* ---- Shoptet contact form (form.contact-form, /napiste-nam/) ----
   mockup: static labels above bordered inputs, amber submit */
form.contact-form { width: 100% !important; max-width: 640px !important; }
form.contact-form fieldset,
form.contact-form .form-group,
form.contact-form .form-control-wrapper { width: 100%; max-width: none; }
form.contact-form .form-group { margin-bottom: 16px; }

/* smart-label -> static label above the field */
form.contact-form .smart-label-wrapper label,
form.contact-form .smart-label-wrapper label span {
  position: static !important;
  transform: none !important;
  transition: none !important;
  display: block;
  padding: 0 !important;
  margin: 0 0 6px;
  font-family: 'Inter', 'Source Sans 3', system-ui, sans-serif;
  font-size: 13px !important;
  font-weight: 500;
  line-height: 21px;
  color: #111110;
}
form.contact-form label .required-asterisk::after { color: #00647D; }

/* inputs: 1px #CFD8D8, 3px radius, ~40px height (mockup .f input) */
form.contact-form .form-control {
  height: 42px;
  padding: 10px 13px !important;
  border: 1px solid #CFD8D8 !important;
  border-radius: 3px;
  background: #fff;
  color: #111110;
  font-size: 15px;
  line-height: 20px;
}
form.contact-form textarea.form-control { height: auto; min-height: 150px; resize: vertical; }
form.contact-form .form-control:focus {
  border-color: #00647D !important;
  box-shadow: none;
  outline: 2px solid rgba(0, 100, 125, .25);
  outline-offset: 0;
}

/* consent line (mockup .consent) */
form.contact-form .consents .label {
  font-size: 14px;
  line-height: 22px;
  color: #6B6B68;
  margin: 2px 0 6px;
}
form.contact-form .consents .label a { color: #00647D; }

/* submit: amber, dark text, Saira uppercase (mockup .bbtn.amber) */
form.contact-form .btn.btn-primary {
  background: #E89611 !important;
  border: 0 !important;
  color: #111110 !important;
  font-family: 'Saira', 'Exo 2', 'Arial Narrow', sans-serif;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  padding: 13px 22px !important;
  border-radius: 2px;
  height: auto;
}
form.contact-form .btn.btn-primary:hover,
form.contact-form .btn.btn-primary:focus {
  background: #F2A83C !important;
  color: #111110 !important;
}

/* ===== audit:kategorie (validated) ===== */
/* ========== kategorie (agent-validated) ========== */
/* --- category page parity with mockup heavypro-filtry.html (audit 2026-08-24) --- */
/* container: standard 1418px grid (max-width cap removed 2026-08-24) */
.type-category #content-wrapper.content-wrapper {
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
/* breadcrumbs: mockup .crumb (12.5px gray, 14px vertical, no underline) */
.type-category .breadcrumbs {
  font-size: 12.5px;
  color: #6B6B68;
  padding: 14px 0;
}
.type-category .breadcrumbs a { color: #6B6B68; text-decoration: none; }
.type-category .breadcrumbs a:hover { text-decoration: underline; }
/* layout: mockup .catwrap = 250px sidebar + 32px gap + content */
@media (min-width: 992px) {
  .type-category .content-wrapper-in > aside.sidebar-left {
    width: 282px;
    min-width: 282px;
    max-width: 282px;
    padding: 0 32px 0 0;
  }
  .type-category .content-wrapper-in > main.content {
    width: calc(100% - 282px);
    padding: 0;
  }
}
/* H1: mockup .cath1 (Saira 30px/600, petrol) — live is 34px/700 ink */
.type-category h1.category-title {
  font-size: 30px;
  font-weight: 600;
  color: #003847;
  line-height: 1.35;
  margin: 6px 0 14px;
}
/* category description (mockup .catdesc) — applies once the text is entered in admin */
.type-category .category-perex:not(.empty-content) {
  color: #6B6B68;
  font-size: 15px;
  line-height: 1.55;
  max-width: 74ch;
  margin-bottom: 24px;
}
/* subcategory tiles: mockup .subtile (bordered white tiles, Inter 13.5px/600) */
.type-category ul.subcategories {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin: 0 0 28px;
}
.type-category ul.subcategories li {
  flex: 0 0 calc(25% - 9px);
  max-width: calc(25% - 9px);
  padding: 0;
}
@media (max-width: 991px) {
  .type-category ul.subcategories li {
    flex-basis: calc(50% - 6px);
    max-width: calc(50% - 6px);
  }
}
.type-category ul.subcategories li a {
  display: flex;
  align-items: flex-start;
  height: 100%;
  border: 1px solid #E3E6E6;
  border-radius: 3px;
  background: #fff;
  padding: 16px 14px;
}
.type-category ul.subcategories li a .image { display: none; }
.type-category ul.subcategories li a .text {
  padding: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 21px;
  color: #111110;
}
.type-category ul.subcategories li a:hover { border-color: #00647D; text-decoration: none; }
.type-category ul.subcategories li a:hover .text { color: #00647D; }
/* (category-tree styling unified into the single sidebar block above,
   2026-08-25 — do not re-add per-page tree rules here) */
/* empty-state: brand alignment only (petrol heading, Inter body, brand button) */
.type-category .empty-content h2 { color: #003847; font-weight: 600; }
.type-category .empty-content p {
  font-family: 'Inter', 'Source Sans 3', system-ui, sans-serif;
  font-size: 15px;
  color: #6B6B68;
}
.type-category .empty-content .btn {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  padding: 13px 22px;
  border-radius: 2px;
}
/* page ground: template paints a lavender body background (admin design setting
   wins the cascade) — mockup ground is white */
html, body { background-color: #fff !important; }
/* USP trio on category position: mockup category page does not carry it
   (homepage keeps its validated benefitBanner styling) */
.benefitBanner.position--benefitCategory { display: none; }

/* ================================================================
   v16 additions
   ================================================================ */
/* retire the image category-card banners (replaced by dynamic .hp-katsec) */
.body-banners { display: none !important; }

/* dynamic "Naše kategorie" section (built by the Zápatí script from the menu) */
.hp-katsec {
  background: #fff;
  width: 100vw; margin: 0 calc(50% - 50vw); padding: 58px 20px;
}
.hp-katwrap { max-width: 1378px; margin: 0 auto; }
.hp-eye {
  display: block; font-family: 'Saira', sans-serif; font-size: 12px;
  letter-spacing: 3px; text-transform: uppercase; color: #00647D;
  font-weight: 600; margin-bottom: 8px;
}
.hp-kathead h2 {
  font-family: 'Saira', sans-serif; font-size: 27px; text-transform: uppercase;
  color: #111110; margin: 0 0 26px; letter-spacing: .3px;
}
.hp-kcards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 767px) { .hp-kcards { grid-template-columns: 1fr; } }
.hp-kcard {
  background: #FAFBFB; border: 1px solid #E3E6E6; border-top: 3px solid #E89611;
  border-radius: 3px; padding: 26px 28px;
}
.hp-kcard h3 { font-family: 'Saira', sans-serif; text-transform: uppercase; font-size: 19px; color: #003847; margin: 0 0 10px; }
.hp-kcard p { color: #6B6B68; font-size: 14px; margin: 0 0 14px; }
.hp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.hp-chip { border: 1px solid #E3E6E6; border-radius: 3px; padding: 7px 12px; font-size: 13px; color: #6B6B68; background: #fff; text-decoration: none; }
.hp-chip:hover { border-color: #00647D; color: #00647D; text-decoration: none; }

/* amber band: real HTML text banner, borderless full-bleed */
.footer-banners {
  width: 100vw !important; max-width: 100vw !important;
  margin: 0 calc(50% - 50vw) !important;
  background: #E89611; border: 0 !important;
}
.footer-banners .footer-banner { flex: 0 0 100%; max-width: 1418px; margin: 0 auto; float: none; }
.footer-banners .banner-wrapper { background: transparent; }
.hp-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 34px 20px; flex-wrap: wrap; }
.hp-band h2 { font-family: 'Saira', sans-serif; text-transform: uppercase; font-size: 24px; color: #111110; margin: 0 0 6px; }
.hp-band p { color: rgba(17,17,16,.78); font-size: 14px; margin: 0; }
.hp-band-btn {
  background: #00242E; color: #fff !important; font-family: 'Saira', sans-serif;
  text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600; font-size: 13px;
  padding: 14px 24px; border-radius: 2px; text-decoration: none; white-space: nowrap;
}
.hp-band-btn:hover { background: #003847; text-decoration: none; }

/* sidebar: hide non-category boxes (payments badges violate launch copy rule) */
.sidebar .sidebar-inner > .box:not([class*="categor"]) { display: none !important; }

/* no benefit trio on category pages (mockup has none there) */
.position--benefitCategory { display: none !important; }


/* ================================================================
   Product detail (Disco) — pixel parity with heavypro-produkt-detail
   mockup (2026-08-25 pass; container width intentionally 1418 grid).
   Zápatí JS on type-product: builds .hp-pdmeta under h1 (from the
   in-form availability/code table, then hides it), injects .hp-benefits
   after the cart block and the cart icon into the add-to-cart button.
   ================================================================ */
/* full-width detail: mockup has no sidebar on the product page */
body.type-product .sidebar { display: none !important; }
body.type-product .content-wrapper-in > main.content {
  width: 100% !important; max-width: 100% !important; flex: 1 1 100%;
}
/* breadcrumbs: Disco reserves the sidebar width as margin-left (879px on a
   1418 grid) — the product page has no sidebar, so reset it */
body.type-product .breadcrumbs {
  text-align: left;
  margin-left: 0 !important;
  width: auto !important;
  padding-left: 20px;
}
/* frame: mockup has no box around the whole detail; two clean columns */
.p-detail-inner { border: 0; border-radius: 0; }
/* H1: Saira 28px/600 petrol (mockup .pd h1) */
.p-detail-inner-header h1 {
  font-family: 'Saira', sans-serif; text-transform: uppercase;
  color: #003847; font-size: 28px; letter-spacing: .5px; font-weight: 600;
  line-height: 1.15; margin: 2px 0 12px;
}
/* no rating stars on the mockup */
.p-detail .ratings-and-brand { display: none !important; }
/* short description = lead directly under the H1 */
.p-detail .p-short-description { color: #6B6B68; font-size: 15px; margin: 0 0 12px; }
/* meta row built by JS: Kód · availability — sits UNDER the short description */
.hp-pdmeta {
  display: flex; gap: 8px 22px; flex-wrap: wrap;
  font-size: 13.5px; color: #6B6B68; margin: 0 0 20px;
}
.hp-pdmeta .avail { color: #2E7D4F; font-weight: 600; }
/* the template's availability/code table is replaced by .hp-pdmeta */
.p-detail form.pr-action > .detail-parameters { display: none !important; }
/* buy box: paper panel (mockup .pricebox) */
.p-detail .p-to-cart-block {
  border: 1px solid #E3E6E6; border-radius: 3px; background: #F4F6F6;
  padding: 22px 24px; margin-bottom: 20px;
}
/* price: Saira 34px/700 petrol (mockup .price) */
.p-detail .price-final, .p-detail-inner .price-final {
  font-family: 'Saira', sans-serif; color: #003847; font-size: 34px;
  font-weight: 700; line-height: 1.1;
}
/* "bez DPH" line (Shoptet .price-standard / JS-injected .hp-novat) */
.p-detail .price-standard, .hp-novat { font-size: 13.8px; color: #6B6B68; margin-top: 3px; }
/* quantity stepper (mockup .qty) */
.p-detail .quantity, .p-detail .pr-quantity {
  border: 1px solid #CFD8D8; border-radius: 3px; background: #fff; overflow: hidden;
}
.p-detail .quantity input, .p-detail .pr-quantity input {
  border: 0; border-left: 1px solid #E3E6E6; border-right: 1px solid #E3E6E6;
  width: 54px; text-align: center; font-size: 15px;
}
.p-detail .quantity .increase, .p-detail .quantity .decrease,
.p-detail .pr-quantity .increase, .p-detail .pr-quantity .decrease {
  background: #fff; color: #003847; border: 0;
}
.p-detail .quantity .increase:hover, .p-detail .quantity .decrease:hover { background: #F4F6F6; }
/* add-to-cart: amber, dark text, cart icon (JS-injected svg) */
.p-detail [data-testid="buttonAddToCart"], .p-detail .add-to-cart-btn,
.p-detail .p-to-cart-block .btn-primary, .p-detail button[type="submit"].btn {
  background: #E89611 !important; border-color: #E89611 !important; color: #111110 !important;
  font-family: 'Saira', sans-serif; text-transform: uppercase; letter-spacing: 1.6px;
  font-weight: 600; font-size: 13px; border-radius: 2px; padding: 13px 22px;
}
.p-detail [data-testid="buttonAddToCart"]:hover, .p-detail .add-to-cart-btn:hover {
  background: #F2A83C !important; border-color: #F2A83C !important; color: #111110 !important;
}
.p-detail .add-to-cart-btn svg, .p-detail [data-testid="buttonAddToCart"] svg {
  width: 17px; height: 17px; margin-right: 8px; vertical-align: -3px;
}
/* benefits list under the buy box (JS-injected, mockup .benefits) */
.hp-benefits {
  list-style: none; margin: 0 0 6px; padding: 0;
  display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; color: #111110;
}
.hp-benefits li { display: flex; gap: 10px; align-items: center; }
.hp-benefits svg { width: 17px; height: 17px; flex: none; color: #E89611; }
/* Tisk / Zeptat se / Sdílet: quiet meta row under the benefits (kept per
   Marek 2026-08-25 — the mockup omitted it, the live design keeps it) */
.p-detail .cofidis-buttons-wrapper,
.p-detail .hledejceny-buttons-wrapper { display: none !important; }
.p-detail .social-buttons-wrapper {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #EDEDEA;
}
/* Tisk and Sdílet removed at the client's request - "nerozumiem tlačítkam
   tisk a sdielet". "Zeptat se" goes with them: it opens the same enquiry as
   the amber button 200px above it, so on its own it was a stranded duplicate
   of the page's primary action rather than a utility row. */
.p-detail .link-icons { display: none !important; }
.p-detail .link-icons { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.p-detail .link-icons .link-icon {
  font-family: 'Inter', 'Source Sans 3', system-ui, sans-serif;
  font-size: 13.5px; font-weight: 400; line-height: 20px;
  color: #6B6B68; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.p-detail .link-icons .link-icon::before { color: #E89611; font-size: 15px; }
.p-detail .link-icons .link-icon:hover { color: #00647D; text-decoration: none; }
.p-detail .link-icons .link-icon:hover::before { color: #00647D; }
/* no USP trio on the detail (mockup) */
.position--benefitProduct { display: none !important; }
/* gallery: paper ground + hairline border (mockup .gal .main) */
.p-detail .p-image {
  background: #F4F6F6; border: 1px solid #E3E6E6; border-radius: 3px; padding: 14px;
}
.p-detail .p-image img { mix-blend-mode: multiply; }
.p-detail .p-thumbnails img { border: 1px solid #E3E6E6; border-radius: 3px; }
.p-detail .p-thumbnails .active img, .p-detail .p-thumbnails a.highlighted img { border-color: #E89611; }
/* NO TABS on the product detail — the mockup stacks the sections
   (Popis · Parametry · Ke stažení) as .pblock blocks, each with a Saira
   heading over an amber rule. The tab nav is hidden and every pane forced
   open; "Ke stažení" is moved above Související produkty by the JS. */
body.type-product ul.shp-tabs,
body.type-product .p-detail-tabs,
body.type-product .responsive-tools { display: none !important; }
body.type-product .tab-pane#description,
body.type-product .tab-pane#relatedFiles {
  display: block !important; opacity: 1 !important; height: auto !important;
}
body.type-product .tab-pane#productDiscussion { display: none !important; }
/* #relatedFiles is a <ul> — its heading is a sibling inserted by the JS */
body.type-product #relatedFiles {
  margin: 0 0 46px; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
body.type-product .hp-dlhead { margin-top: 38px; }

/* shared section heading (mockup .pblock h2 / .relhead) */
.hp-sechead {
  display: inline-block;
  font-family: 'Saira', sans-serif; font-size: 18px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: #003847;
  margin: 0 0 14px; padding-bottom: 9px; box-shadow: inset 0 -2px 0 #E89611;
}
/* no Diskuze tab on the mockup */
.shp-tab-link[href*="diskuze"], a.shp-tab-link[data-testid*="discussion"] { display: none !important; }
/* tab body: readable measure */
.shp-tabs-wrapper p, .p-detail .extended-description p { max-width: 74ch; }
/* Popis + Parametry stack as separate sections (mockup .pblock), instead of
   Disco's two-column description/parameters split */
.p-detail .description-inner { display: block !important; }
.p-detail .description-inner > .basic-description,
.p-detail .description-inner > .extended-description {
  width: 100% !important; max-width: none !important; flex: none !important; padding: 0 !important;
}
.p-detail .description-inner > .extended-description { margin-top: 38px; }
/* section heading ("Parametry", renamed by JS) — mockup .pblock h2.
   Disco wraps it in a <p>, so match the nested strong too */
.p-detail .extended-description > p > strong,
.p-detail .extended-description > strong,
.p-detail .extended-description > .h2,
.p-detail .extended-description > h2 {
  display: inline-block;
  font-family: 'Saira', sans-serif; font-size: 18px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: #003847;
  margin: 0 0 14px; padding-bottom: 9px; box-shadow: inset 0 -2px 0 #E89611;
}
/* parameters table: striped rows, 600px cap (mockup .params) */
.p-detail .extended-description .detail-parameters {
  max-width: 600px; width: 100%; border-collapse: collapse;
}
/* first row is Disco's "Kategorie" — mockup lists product specs only */
.p-detail .extended-description .detail-parameters tr:first-child { display: none; }
.p-detail .extended-description .detail-parameters tr { border-bottom: 1px solid #E3E6E6; }
.p-detail .extended-description .detail-parameters tr:nth-child(even) { background: #F4F6F6; }
.p-detail .extended-description .detail-parameters th,
.p-detail .extended-description .detail-parameters td {
  padding: 10px 14px; font-size: 14px; background-image: none;
}
.p-detail .extended-description .detail-parameters th {
  color: #6B6B68; font-weight: 400; text-align: left; width: 44%;
  position: static;
}
/* Disco draws a 1px "leader" line between label and value via th::after */
.p-detail .extended-description .detail-parameters th::after,
.p-detail .extended-description .detail-parameters .row-header-label::after { display: none !important; }
.p-detail .extended-description .detail-parameters .row-header-label-colon { display: none; }
/* the label span carries its own white background — it punched a white patch
   through the striped rows */
.p-detail .extended-description .detail-parameters .row-header-label {
  background: transparent !important; padding: 0 !important;
}
.p-detail .extended-description .detail-parameters td { font-weight: 500; color: #111110; }
/* related block: left-aligned heading like the mockup .relhead */
.products-related-header, .products-related-wrapper h2 { text-align: left !important; }
/* Related products stay a SLIDER (Disco's own carousel, arrows kept); it
   shows 4 cards per view instead of 3 — driven by `data-columns="4"`, which
   the Zápatí script sets before the slider initialises. No width/transform
   overrides here: the slider JS owns the track geometry. */

/* "Ke stažení" file links (mockup .dlrow): file-type badge + petrol-web link.
   Label falls back to the filename when the file record has no title — set
   titles when uploading through the admin dialog for nicer wording. */
.p-detail a.hp-file {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 14.5px; color: #00647D; text-decoration: none; padding: 5px 0;
}
.p-detail a.hp-file:hover { text-decoration: underline; }
.p-detail a.hp-file .hp-ft {
  border: 1px solid #E3E6E6; border-radius: 2px; background: #fff;
  padding: 2px 8px; font-size: 11px; letter-spacing: .06em;
  color: #6B6B68; flex: none; text-decoration: none;
}
/* related products header per mockup .relhead */
.products-related-header h2, .products-header h2, h2.products-related-heading {
  font-family: 'Saira', sans-serif; text-transform: uppercase; font-size: 18px;
  letter-spacing: 2px; color: #003847; font-weight: 600;
  display: inline-block; padding-bottom: 9px; box-shadow: inset 0 -2px 0 #E89611;
}
/* product cards (listing + related, mockup .pcard) */
.p .price-final { font-family: 'Saira', sans-serif; font-weight: 600; color: #003847; }
.p .availability .show-tooltip, .p .availability-label { font-size: 12.5px; }


/* ================================================================
   Footer 4 columns (built by Zápatí JS — mockup .sfooter .cols)
   ================================================================ */
.hp-footcols {
  max-width: 1418px; margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 34px;
  padding: 44px 20px 34px; text-align: left;
}
@media (max-width: 991px) { .hp-footcols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .hp-footcols { grid-template-columns: 1fr; } }
.hp-fcol h4 {
  font-family: 'Saira', sans-serif; color: #fff; text-transform: uppercase;
  letter-spacing: 1.8px; font-size: 12px; font-weight: 600; margin: 0 0 14px;
}
.hp-fcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hp-fcol li { color: #A9C4CC; font-size: 13.5px; line-height: 1.5; }
.hp-fcol a { color: #A9C4CC; font-size: 13.5px; text-decoration: none; }
.hp-fcol a:hover { color: #E89611; text-decoration: none; }
.hp-fcol p { color: #A9C4CC; font-size: 13.5px; line-height: 1.55; margin: 0; }
/* the logo closes the Kontakt column, so the space goes above it */
.hp-flogo { height: 44px; width: auto; display: block; margin: 22px 0 0; }
/* the Kramp link closes the Sortiment column — set apart, not just another row */
.hp-fkramp { color: #E89611 !important; font-weight: 600; }
.hp-fcol li:has(> .hp-fkramp) { margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(169,196,204,.22); }
.hp-kramp-note { color: #7E9BA4; font-size: 12px; float: right; }
@media (max-width: 767px) { .hp-kramp-note { float: none; display: block; margin-top: 6px; } }

/* kontakty page: two-column contact/bank grid (mockup) */
.hp-kontakt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 22px; }
@media (max-width: 767px) { .hp-kontakt-grid { grid-template-columns: 1fr; } }


/* ================================================================
   Megamenu (Disco .menu-level-2) — mockup .drop styling
   ================================================================ */
/* Megamenu je desktopovy vzor: absolutni pozicovani, padding 400px
   vpravo a 3sloupcovy flex nedavaji v mobilni zasuvce smysl a rozbijeji
   ji. Pod 768px se submenu vykresli sablonovym (mobilnim) stylem. */
@media (min-width: 768px) {
#navigation .menu-level-1 > li > ul.menu-level-2 {
  border-top: 3px solid #E89611 !important;
  border-bottom: 1px solid #E3E6E6 !important;
  border-left: 0 !important; border-right: 0 !important;
  box-shadow: 0 20px 44px rgba(0, 56, 71, .18);
  padding: 64px 400px 30px 40px !important;
  position: absolute;
}
/* category name heading (fixed strings per menu id) */
#navigation .menu-level-1 > li > ul.menu-level-2::before {
  position: absolute; top: 26px; left: 40px;
  font-family: 'Saira', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 1.7px; text-transform: uppercase; color: #003847;
}
#navigation .menu-item-708 > ul.menu-level-2::before { content: "Filtry"; }
#navigation .menu-item-706 > ul.menu-level-2::before { content: "Oleje - Maziva - Chemie"; }
/* subcategory links: small, gray, 3 columns in the left area */
#navigation .menu-level-2 > li {
  flex: 0 0 33.333% !important; width: 33.333% !important;
  min-height: 0 !important; align-items: flex-start !important;
}
#navigation .menu-level-2 > li > a {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important; font-weight: 400 !important;
  color: #6B6B68 !important; text-transform: none !important;
  letter-spacing: 0 !important; padding: 5px 12px 5px 0 !important;
  min-height: 0 !important; line-height: 1.55 !important;
}
#navigation .menu-level-2 > li > a:hover { color: #00647D !important; }
/* hide Disco's submenu images if any */
#navigation .menu-level-2 .menu-image { display: none !important; }
/* CTA box (injected li.hp-mm-cta) */
#navigation .menu-level-2 li.hp-mm-cta {
  position: absolute !important; top: 26px; right: 40px;
  width: 347px !important; flex: none !important;
  background: #F4F6F6; border: 1px solid #E3E6E6; border-radius: 3px;
  padding: 20px 22px; display: block !important; min-height: 0 !important;
}
#navigation .hp-mm-cta b {
  display: block; font-family: 'Saira', sans-serif; font-size: 13px;
  letter-spacing: 1.2px; text-transform: uppercase; color: #111110; margin-bottom: 8px;
}
#navigation .hp-mm-cta p { color: #6B6B68; font-size: 13.5px; line-height: 1.5; margin: 0 0 14px; font-family: 'Inter', sans-serif; }
#navigation .hp-mm-cta a.hp-btn-amber {
  display: inline-block; background: #E89611 !important; color: #111110 !important;
  font-family: 'Saira', sans-serif !important; text-transform: uppercase !important;
  letter-spacing: 1px !important; font-weight: 600 !important;
  font-size: 12px !important; padding: 11px 16px !important; margin: 0;
  border-radius: 2px; text-decoration: none !important;
}
#navigation .hp-mm-cta a.hp-btn-amber:hover { background: #F2A83C !important; color: #111110 !important; }
}

/* ================================================================
   v20: utility pages without category sidebar + injected contact form
   ================================================================ */
body.in-registrace .sidebar, body.in-napiste-nam .sidebar,
body.in-prihlaseni .sidebar, body.in-kosik .sidebar,
body.in-zapomenute-heslo .sidebar, body.in-moje-objednavka .sidebar {
  display: none !important;
}
body.in-registrace main.content, body.in-napiste-nam main.content,
body.in-prihlaseni main.content, body.in-kosik main.content,
body.in-zapomenute-heslo main.content, body.in-moje-objednavka main.content {
  width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important;
}

/* kontakty: injected contact form (fetched from /napiste-nam/) */
/* #formular target: clear the sticky header when jumped to */
.hp-kform { scroll-margin-top: 90px; }
.hp-kform { margin-top: 40px; max-width: 720px; }
.hp-kform h2 {
  font-family: 'Saira', sans-serif; font-size: 17.5px; letter-spacing: 2px;
  text-transform: uppercase; color: #003847; margin: 0 0 16px;
  display: inline-block; padding-bottom: 9px; box-shadow: inset 0 -2px 0 #E89611;
}
.hp-kform label { font-family: 'Inter', sans-serif; font-size: 13px; color: #111110; }
.hp-kform input[type=text], .hp-kform input[type=email], .hp-kform textarea {
  width: 100%; border: 1px solid #E3E6E6 !important; border-radius: 3px;
  padding: 10px 12px; font-size: 14px; font-family: 'Inter', sans-serif;
  background: #fff; min-height: 40px;
}
.hp-kform textarea { min-height: 140px; }
.hp-kform button[type=submit], .hp-kform input[type=submit] {
  background: #E89611 !important; border: 0 !important; color: #111110 !important;
  font-family: 'Saira', sans-serif !important; text-transform: uppercase;
  letter-spacing: 1.2px; font-weight: 600; font-size: 13px !important;
  padding: 13px 24px !important; border-radius: 2px; cursor: pointer;
}
.hp-kform button[type=submit]:hover, .hp-kform input[type=submit]:hover { background: #F2A83C !important; }
.hp-kform .form-group, .hp-kform p { margin-bottom: 14px; }


/* menu hover: kill Disco's negative margin (2px width jump) */
.navigation-in .menu-level-1 > li > a:hover,
.navigation-in .menu-level-1 > li.exp > a {
  margin: 0 !important;
}


/* ================================================================
   MOBILE PASS (2026-08-27) — verified at 414px in a same-origin
   iframe (window.resizeTo is a no-op in this browser, an iframe
   evaluates media queries against its own width).
   ================================================================ */

/* 1. Category listing overflowed by 40px: Disco parks non-visible
   product slides with `.products-top > div.inactive{position:absolute}`,
   and their flex parent is NOT a positioned ancestor — so width:100%
   resolved against the outer .container (399px) instead of the column
   (359px). Give the parent a containing block. */
.products.products-top { position: relative; }

/* 2. USP order was wrong on mobile. The order values live on
   .benefitBanner__item, but Disco switches .benefitBanner to
   display:block below 992px — and `order` is ignored outside a flex
   container, so the items fell back to DOM order. */
@media (max-width: 991px) {
  .benefitBanner { display: flex; flex-direction: column; }
}

/* 3. Header CTA collided with the hamburger — it was squeezed to a
   50px square and its label wrapped to three lines. Keep the CTA
   (it is the primary commercial action) but shorten it to one word. */
@media (max-width: 991px) {
  /* Disco sets `#header .navigation-buttons a{width:50px}` under 480px and our
     own .header-top rule owns the padding — both outrank a bare .hp-header-cta,
     so the mobile override has to match their weight. */
  #header .navigation-buttons a.hp-header-cta,
  .header-top .hp-header-cta {
    width: auto !important; min-width: 0;
    padding: 9px 12px !important; font-size: 12px !important;
    margin-left: 10px !important; white-space: nowrap;
    flex: 0 0 auto;
  }
  .hp-header-cta svg { width: 17px; height: 17px; flex: 0 0 auto; }
  .hp-header-cta span b { display: none; }
  .hp-header-cta span { margin-left: 5px; }
}

/* 4. Hero: the copy block is absolutely centred and was TALLER than
   the banner at 414px, so the ghost button was clipped off the bottom.
   Shrink the type, let the copy span the full width with its own
   padding, stack the buttons full-width for tap targets. */
@media (max-width: 767px) {
  #carousel .item img { height: 430px; }
  .extended-banner-texts {
    left: 0 !important; right: 0 !important; max-width: none !important;
    padding: 0 20px; gap: 10px;
  }
  .hp-hero-eyebrow { font-size: 10px; letter-spacing: 2px; }
  .extended-banner-title { font-size: 26px; line-height: 30px; }
  .extended-banner-text { font-size: 14px; line-height: 21px; }
  .hp-hero-btns { width: 100%; gap: 10px; }
  .hp-hero-btns > .extended-banner-link,
  .hp-hero-ghost { flex: 1 1 100%; justify-content: center; text-align: center; }
  /* the horizontal scrim aims at copy on the right; on mobile the copy
     spans the full width, so darken from the bottom instead */
  .hp-hero-scrim {
    background: linear-gradient(180deg, rgba(0,36,46,.30) 0%, rgba(0,36,46,.62) 45%, rgba(0,36,46,.84) 100%);
  }
}

/* 5. Latent bomb: the 1418px content-wrapper is a FIXED width. It does
   not currently apply on phones, but if Disco ever keeps the class
   there it would blow the layout out by a kilometre. */
@media (max-width: 991px) {
  #content-wrapper.container-narrow { width: auto; max-width: 100%; }
}

/* 6. Mobile menu order was DOM order (Kontakty first, Úvod fourth). Same
   root cause as the USP trio: the menu order lives in `order` values on
   #navigation .menu-level-1 > li, and the off-canvas list is display:block
   below 992px, where `order` does nothing. */
@media (max-width: 991px) {
  #navigation .menu-level-1 { display: flex; flex-direction: column; }
}


/* ================================================================
   PRODUCT LISTING (2026-08-30)
   Every photo in this catalogue is the same blue FUCHS canister on
   white, so the image carries almost no information on a grid — the
   NAME and the viscosity grade do. Shrink the photo, stand it on the
   same paper ground (#F4F6F6) the product-detail gallery uses, and
   let the type do the work.
   ================================================================ */

/* Disco absolutely-positions .p-code inside the card, so a long code
   ("Kód: FUCHS-TITAN-TRUCK-PLUS-15W-40") lands directly ON the photo.
   The code belongs on the detail page — it is already in .hp-pdmeta
   there — not on a grid people scan by name. */
.products-block .product .p-code { display: none !important; }

.products-block .product > .p {
  background: #fff;
  border: 1px solid #EDEDEA;
  border-radius: 2px;
  padding: 0 0 18px;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.products-block .product > .p:hover {
  border-color: #E89611;
  box-shadow: 0 6px 18px rgba(0, 56, 71, .09);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .products-block .product > .p { transition: none; }
  .products-block .product > .p:hover { transform: none; }
}

.products-block .product a.image {
  display: flex; align-items: center; justify-content: center;
  height: 172px; padding: 14px; margin-bottom: 14px;
  background: #F4F6F6;
}
.products-block .product a.image img {
  max-height: 144px; max-width: 100%; width: auto; height: auto;
  object-fit: contain; mix-blend-mode: multiply;
}

.products-block .product .p-in { padding: 0 16px; }
.products-block .product a.name {
  font-family: 'Saira', sans-serif;
  font-size: 15.5px; line-height: 1.3; font-weight: 600;
  color: #003847; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 40px;   /* keeps rows aligned on 1- and 2-line names */
}
.products-block .product a.name:hover { color: #00647D; text-decoration: none; }
.products-block .product .availability { font-size: 12.5px; margin-top: 2px; }
.products-block .product .price.price-final {
  font-family: 'Saira', sans-serif;
  font-size: 21px; font-weight: 700; color: #003847;
}
.products-block .product .p-tools { margin-top: 8px; }

/* ================================================================
   Cookie bar — brand colours.
   Both choices keep the SAME size and weight; only the hue differs.
   Reject must be as easy as accept, so this is deliberately not a
   loud-accept / quiet-decline pair.
   ================================================================ */
.siteCookies__form {
  background: #003847 !important;
  border-radius: 2px;
  color: #CFE2E8;
}
.siteCookies__content,
.siteCookies__content p { color: #CFE2E8; }
.siteCookies__content a { color: #fff; text-decoration: underline; }
.siteCookies__content a:hover { color: #E89611; }
.siteCookies__button {
  font-family: 'Saira', sans-serif;
  text-transform: uppercase; letter-spacing: .06em;
  font-size: 12.5px; font-weight: 600;
  border: 0; border-radius: 2px !important;
  background: #F4F6F6 !important; color: #111110 !important;
}
.siteCookies__button:last-of-type {          /* Souhlasím */
  background: #E89611 !important; color: #111110 !important;
}
.siteCookies__button:hover { filter: brightness(.95); }
.siteCookies__link {
  color: #A9C4CC !important; text-decoration: underline;
  font-family: 'Inter', sans-serif; text-transform: none; letter-spacing: 0;
}
.siteCookies__link:hover { color: #E89611 !important; }

/* The short description opens by repeating the product name, then gives
   the one fact the name omits — the pack size ("balení 20L"). Clamp it
   to two lines so that fact survives without the card growing a
   paragraph. Left-aligned: centred body copy is hard to scan down a
   column of six. */
.products-block .product .p-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px; line-height: 1.5; color: #6B6B68;
  text-align: left; margin: 12px 0 0;
}
.products-block .product a.name,
.products-block .product .availability,
.products-block .product .prices { text-align: left; }
.products-block .product .p-tools { justify-content: flex-start; }

/* One content edge. Disco nests four different horizontal insets inside the
   card — .p-in pads 16, a.name pads another 16, .p-bottom adds 10, and the
   quantity stepper is centred in its form — so name, availability, price,
   stepper and description each started at a different x. Zero the nested
   paddings and let .p-in's 16px be the only inset. */
.products-block .product a.name { padding-left: 0; padding-right: 0; }
.products-block .product .p-bottom { padding-left: 0; padding-right: 0; }
.products-block .product .p-tools,
.products-block .product form.pr-action { justify-content: flex-start; text-align: left; }

/* The bar is TWO elements: .siteCookies is the full-width fixed band and
   .siteCookies__form is the panel inside it. Styling only the panel left the
   band on Shoptet's navy #1A1937. Band takes the footer's petrol-dark so the
   pairing reads like footer / footer-bottom rather than an accident. */
.siteCookies,
.siteCookies--dark { background: #00242E !important; }

/* "Nastavení" is a BUTTON (button.siteCookies__link), not a link: Shoptet gives
   it a 2px near-white border while leaving the label muted, so the frame shouted
   louder than the text — and my first hover rule recoloured only the label,
   putting amber text inside a white box. Treat it as the same ghost button as
   the hero's "Poptat díl": border and label move together, and the underline
   goes because a border already carries the affordance. */
.siteCookies__link {
  border: 2px solid rgba(255, 255, 255, .40) !important;
  border-radius: 2px !important;
  color: #CFE2E8 !important;
  text-decoration: none !important;
  transition: color .16s ease, border-color .16s ease;
}
.siteCookies__link:hover,
.siteCookies__link:focus-visible {
  color: #E89611 !important;
  border-color: #E89611 !important;
  text-decoration: none !important;
}
.siteCookies__link:focus-visible { outline: 2px solid #E89611; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .siteCookies__link { transition: none; } }

/* the inline "zde" inside the paragraph IS a link — it keeps its underline */
.siteCookies__content p a { text-decoration: underline !important; }

/* hpAudit: Disco's `.products-block > div .p .p-bottom` (0-3-1) outranks
   `.products-block .product .p-bottom` (0-3-0) by a single type selector, so the
   inset reset above lost. Match the weight rather than guess at a longer chain. */
.products-block .product a.name { padding-left: 0 !important; padding-right: 0 !important; }
.products-block .product .p-bottom { padding-left: 0 !important; padding-right: 0 !important; }
.products-block .product .p-tools,
.products-block .product form.pr-action { justify-content: flex-start !important; text-align: left !important; }

/* Tighter vertical rhythm. Disco wraps the 52px add-to-cart control in a
   .p-tools box padded 22px top AND bottom, then .p-bottom adds 20 above it and
   .p-desc 22 below — 100px of air around three lines of type. Card 519 -> 461. */
.products-block .product .p-bottom { padding-top: 12px !important; }
.products-block .product .prices { margin-bottom: 0 !important; }
.products-block .product .p-tools { margin-top: 2px !important; padding: 12px 0 0 !important; }
.products-block .product .p-desc { margin: 10px 0 0 !important; }

/* Action row spans the card: fixed-width stepper, CTA takes the rest. */
.products-block .product form.pr-action { display: flex !important; gap: 8px; width: 100%; }
.products-block .product form.pr-action span.quantity { flex: 0 0 132px; }
.products-block .product form.pr-action .add-to-cart-button { flex: 1 1 auto !important; width: auto !important; }

/* The alternatives carousel renders as .products-alternative-* (Shoptet calls
   the field "Podobné produkty"), not .products-related-* which our earlier
   detail styling targeted — so its heading had reverted to centred stock. */
.products-alternative-header,
.products-alternative-wrapper h2 { text-align: left !important; }
.products-alternative-header {
  font-family: 'Saira', sans-serif; font-size: 18px; font-weight: 600;
  color: #003847; text-transform: none; position: relative;
  padding-bottom: 8px; margin-bottom: 18px;
}
.products-alternative-header:after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 2px; background: #E89611;
}

/* ================================================================
   POPTÁVKOVÝ REŽIM (2026-08-30)
   Prices stay visible; buying is off until doprava/platby/legal texts
   are in place. Shoptet's own setting (Tlačítko Košík = nezobrazovat)
   handles the listings; the product detail has no equivalent, so the
   buy box swaps its cart form for an enquiry CTA — the path stays,
   only the commitment changes.
   ================================================================ */
/* NOT the whole form — `form.pr-action` wraps the price panel too, so hiding it
   took the price and the CTA with it. Hide only the two buying controls. */
/* keyed off .hp-noshop so the selling switch in zapati.js controls this too;
   do NOT hide form.pr-action — it wraps the price panel */
.hp-noshop body.type-product .p-detail .add-to-cart,
.hp-noshop body.type-product .p-detail .add-to-cart-button { display: none !important; }
.hp-poptat {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: #E89611; color: #111110 !important;
  font-family: 'Saira', sans-serif; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 600; font-size: 13px;
  padding: 14px 26px; border-radius: 2px; text-decoration: none;
  margin-top: 14px;
}
.hp-poptat:hover { background: #F2A83C; color: #111110 !important; text-decoration: none; }
.hp-poptat svg { width: 18px; height: 18px; }
.hp-poptat-note {
  display: block; margin-top: 8px;
  font-size: 12.5px; line-height: 1.5; color: #6B6B68;
}

/* ================================================================
   v63 - MOBIL (<=767px): off-canvas zasuvka, odsazeni pod fixni
   hlavicku, rozestup tlacitek v prazdne kategorii
   ================================================================ */
@media (max-width: 767px) {
  /* Fixni hlavicka je u nas 86px (vetsi logo + dvouradkove CTA); sablona
     pocita s 50px -> drobecky mizely pod ni a zasuvka zacinala UVNITR
     hlavicky. Vyska zije na jednom miste - pri zmene hlavicky meň jen tady. */
  :root { --hp-header-h: 86px; --hp-search-h: 52px; }
  .overall-wrapper { padding-top: var(--hp-header-h); }

  /* Otevrene vyhledavani prida do hlavicky dalsi radek (86 -> 126px).
     Bez teto korekce se 30px obsahu schovalo pod hlavicku. */
  .search-window-visible .overall-wrapper {
    padding-top: calc(var(--hp-header-h) + var(--hp-search-h));
  }
  .header-top .search { padding: 0 16px !important; }
  /* Hledat sedel presne pod amber CTA (mezera 0 px) - radek hledani nize. */
  .search-window-visible .header-top .search { margin-top: 12px !important; }
  #navigation {
    top: var(--hp-header-h) !important;
    height: calc(100vh - var(--hp-header-h)) !important;
  }

  /* Zasuvka = petrolovy podklad (stejny jako desktopova lista), sevrenejsi rytmus */
  #navigation, #navigation .navigation-in { background: #003847 !important; }
  .navigation-in .menu-level-1 { flex-direction: column; }
  .navigation-in .menu-level-1 > li { border-top: 1px solid rgba(255,255,255,.10); }
  .navigation-in .menu-level-1 > li > a {
    color: #fff !important; padding: 0 18px !important;
    font-size: 12.5px !important; letter-spacing: .10em !important; min-height: 0 !important;
  }
  .navigation-in .menu-level-1 > li > a > b { padding: 13px 0 !important; font-weight: 600 !important; }
  .navigation-in .menu-level-1 > li.ext > a::after { display: none !important; }
  .navigation-in .menu-level-1 > li > a,
  .navigation-in .menu-level-1 > li > a b,
  #navigation .menu-level-2 > li > a {
    text-decoration: none !important; box-shadow: none !important; border-bottom: 0 !important;
  }

  /* Podkategorie zustavaji SLOZENE - rozbaluje je sipka sablony (li.exp).
     Rozbalene natvrdo delalo zasuvku 905px vysokou a s dalsimi korenovymi
     kategoriemi (Faze 2) by rostla dal. Slozene = 281px. */
  #navigation .menu-level-1 > li > a .submenu-arrow {
    display: block !important; color: #fff !important; opacity: .85;
    height: 46px !important; line-height: 46px !important; width: 46px !important;
    right: 4px !important; top: 0 !important;
  }
  /* po rozbaleni tece podmenu v zasuvce pod polozkou, ne jako absolutni dropdown */
  #navigation .menu-level-1 > li > ul.menu-level-2 {
    position: static !important; width: auto !important; top: auto !important; left: auto !important;
    background: transparent !important; border: 0 !important;
    border-left: 2px solid #E89611 !important;
    margin: 0 0 10px 18px !important; padding: 2px 0 0 14px !important;
  }
  #navigation .menu-level-2 > li {
    min-height: 0 !important; border: 0 !important; width: auto !important; flex: none !important;
  }
  #navigation .menu-level-2 > li > a {
    font-family: 'Inter', sans-serif !important; font-size: 13.5px !important;
    font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important;
    color: rgba(255,255,255,.72) !important; padding: 6px 0 !important; min-height: 0 !important;
  }
  /* CTA box patri do desktopoveho megamenu, v zasuvce nema co delat */
  #navigation li.hp-mm-cta { display: none !important; }

  #navigation .navigationActions { border-top: 1px solid rgba(255,255,255,.16); }
  #navigation .navigationActions > li > a {
    color: rgba(255,255,255,.72) !important; font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important; text-transform: none !important; padding: 13px 18px !important;
  }
}

/* Tlacitka v prazdne kategorii se pri zalomeni dotykala (inline-block bez
   vertikalniho marginu) - flex + gap resi oba smery najednou. */
.hp-emptycat p:last-of-type { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hp-emptycat p:last-of-type a { margin: 0 !important; }

/* Vlastni focus stav vyhledavaciho pole - misto modreho ringu prohlizece,
   ktery pretekal pres zaoblene rohy a nesedel do znacky. */
.header-top .search .query-input:focus,
.header-top .search .query-input:focus-visible {
  outline: none !important;
  border-color: #00647D !important;
  box-shadow: 0 0 0 3px rgba(0, 100, 125, .18);
}
.header-top .search .search-button:focus-visible {
  outline: 2px solid #E89611;
  outline-offset: 2px;
}

/* Amber CTA v hlavicce se na mobilu dotykal hamburgeru (mezera 0 px).
   Lupa a hamburger jsou 50px dotykove cile s opticky odsazenym glyfem,
   CTA je plny blok - proto vlastni margin na obou stranach. */
@media (max-width: 767px) {
  .header-top .hp-header-cta {
    margin-left: 10px !important;
    margin-right: 12px !important;
  }
}