/*
Theme Name: Blocksy Child
Theme URI: https://metzler.cz/
Description: Child theme for custom Metzler WooCommerce category cards.
Author: Metzler
Template: blocksy
Version: 2.2.4
Text Domain: blocksy-child
*/

.metzler-language-bar {
  background: #005253; /* primary teal - zladene s hornou listom + intro CTA */
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  position: sticky;
  /* Blocksy parent nastavuje --admin-bar dynamicky podla realnej viditelnosti
   * admin baru (zohladnuje aj mobile/theme-hidden stav). */
  top: var(--admin-bar, 0px);
  z-index: 9100; /* nad header, pod modalmi (mli-modal 9500, consent 9700) */
  transform: translateY(0);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

/* Scroll-aware reveal: lang-bar-scroll.js prida tuto triedu pri scroll dole.
 * Aktivne IBA v theme-header kontexte (homepage, kategorie). V shop sticky
 * stack-u sa lang bar nehlda + nehida (vid metzler-shop-sticky-stack nizsie). */
.metzler-language-bar.is-scroll-hidden {
  transform: translateY(-105%); /* -105% pre istotu pre border-bottom */
  pointer-events: none;
}

/* ===========================================================================
 * Sticky stack wrapper - obchod-scroll a single product page.
 * Plugin metzler-scrolling-shop renderuje lang bar + search bar v tomto
 * wrapperi. Wrapper je sticky; vnutri sa lang bar a search bar prevedie z
 * 'position: sticky' do 'position: static' (aby sa nestackovali nezavisle a
 * nepoborovali sa).
 * =========================================================================== */
.metzler-shop-sticky-stack {
  position: sticky;
  top: var(--admin-bar, 0px);
  /* z-index: 40 - pod metzler-cat-sidebar (z-index 50). Pri prekryti
   * (sticky stack + sticky sidebar) sidebar bude vrchu, search bar pod nim. */
  z-index: 40;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #e6e6e6;
}

/* Na single-product stránke je lang bar sticky (standalone, z-index 9100)
 * nad search sticky-stack (z-index 40). Obe majú top: var(--admin-bar, 0px)
 * → stack sa skrýva za bar. Fix: posuň stack pod lang bar pomocou
 * --metzler-lang-bar-height nastavenej v lang-bar-scroll.js. */
.single-product .metzler-similar-products .metzler-shop-sticky-stack {
  top: calc(var(--admin-bar, 0px) + var(--metzler-lang-bar-height, 38px));
  transition: top 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Keď lang bar zmizne (scroll dole), search stack sa posunie navrch
 * s rovnakou easing-krivkou ako lang bar transform. */
.single-product:has(.metzler-language-bar.is-scroll-hidden) .metzler-similar-products .metzler-shop-sticky-stack {
  top: var(--admin-bar, 0px);
}

/* Ked je lang dropdown otvoreny, stack ide nad sidebar (z-index 50).
 * Dropdown menu je v stacking-context stacku, takze stack-uroven
 * z-indexu rozhoduje. :has() umoznuje state-based override.
 * Browser support: Chrome 105+, Safari 15.4+, Firefox 121+. */
.metzler-shop-sticky-stack:has(.metzler-language-bar__dropdown[open]) {
  z-index: 70 !important;
}

/* Default block layout pre stack (no flex/grid tricks - rodic na
 * product-detail nie je flex container). */
.metzler-shop-sticky-stack {
  display: block;
  height: auto;
  min-height: 0;
}

/* Mobile: tvrdy clamp na stack a deti aby Webkit/Blink height bug
 * neinflate-oval na ~400px. Sticky behavior z desktop pravidla je zachovane
 * (stack zostane na top viewport-u pri scroll-e), len je obmedzeny vyskou. */
@media (max-width: 767px) {
  .metzler-shop-sticky-stack {
    /* overflow: visible aby dropdown menu mohol pretiec cez stack hranice. */
    overflow: visible !important;
  }
}

/* Reset sticky pre vnutorny lang bar - presunie sa s wrapper-om.
 * Stack wrapper uz ma align-self/flex reset takze deti su pod normalnym
 * block flow - ziadny max-height clamp tu nie je potreba.
 * Farba: deep cyan (vyrazny od cierneho theme-header lang baru). */
/* Full-bleed cyan + dropdown variant pre stack na obchod-scroll a product detail.
 * Lang bar zaplna celu sirku viewport-u, content je <details> dropdown
 * (jediny visible element = current jazyk; klik rozbali ostatne). */
.metzler-shop-sticky-stack .metzler-language-bar {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  transform: none !important;
  transition: none !important;
  will-change: auto;
  padding: 0;
  min-height: 0;
  height: auto;
  display: block;
  background: #005253; /* primary teal - zladene s hornou listou */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

/* Dropdown wrapper: <details> sam o sebe je block. */
.metzler-shop-sticky-stack .metzler-language-bar__dropdown {
  position: relative;
  margin: 0 auto;
  padding: 6px 16px;
  max-width: 1290px; /* match ct-container max-width pre center alignment */
}

/* Summary = current jazyk. Reset native marker, vlastny chevron. */
.metzler-shop-sticky-stack .metzler-language-bar__current {
  list-style: none; /* odstrani triangle marker */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 600;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  user-select: none;
}
.metzler-shop-sticky-stack .metzler-language-bar__current::-webkit-details-marker {
  display: none; /* Safari/iOS */
}
.metzler-shop-sticky-stack .metzler-language-bar__current::marker {
  content: ''; /* moderny browser */
}
.metzler-shop-sticky-stack .metzler-language-bar__current:hover {
  background: rgba(255, 255, 255, 0.1);
}

.metzler-shop-sticky-stack .metzler-language-bar__flag {
  font-size: 18px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
    "Twemoji Mozilla", "EmojiOne Color", sans-serif;
}

.metzler-shop-sticky-stack .metzler-language-bar__current-name {
  font-size: 14px;
}

.metzler-shop-sticky-stack .metzler-language-bar__chevron {
  font-size: 12px;
  transition: transform 180ms ease;
}
.metzler-shop-sticky-stack .metzler-language-bar__dropdown[open] .metzler-language-bar__chevron {
  transform: rotate(180deg);
}

/* Rozbaleny zoznam - absolute pod summary, nepretlaca content baru. */
.metzler-shop-sticky-stack .metzler-language-bar__list--dropdown {
  position: absolute;
  top: calc(100% - 2px);
  left: 16px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  min-width: 160px;
  z-index: 100;
}

.metzler-shop-sticky-stack .metzler-language-bar__list--dropdown li {
  margin: 0;
  padding: 0;
}

.metzler-shop-sticky-stack .metzler-language-bar__list--dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 14px;
  border: 0;
  border-radius: 0;
  min-height: auto;
}
.metzler-shop-sticky-stack .metzler-language-bar__list--dropdown a:hover {
  background: #f4f4f4;
}

/* Lang bar nav - kompaktny v stack-u (vsetko 1 riadok). */
.metzler-shop-sticky-stack .metzler-language-bar__nav {
  min-height: 0;
  height: auto;
  padding: 6px 12px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.metzler-shop-sticky-stack .metzler-language-bar__list {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

.metzler-shop-sticky-stack .metzler-language-bar__list a {
  margin: 0 !important;
}

/* Mobile/tablet specific overrides pre dropdown - mensi padding aby sa
 * dropdown summary zmestil. Dropdown markup nepouziva ::before vlajky
 * (su priamo v markup-e ako emoji), takze tu nie su pseudo-element rules. */
@media (max-width: 767px) {
  .metzler-shop-sticky-stack .metzler-language-bar__dropdown {
    padding: 5px 14px;
  }
  .metzler-shop-sticky-stack .metzler-language-bar__current {
    padding: 3px 10px;
  }
  .metzler-shop-sticky-stack .metzler-language-bar__current-name {
    font-size: 13px;
  }
}

/* Reset sticky pre vnutorny search bar - presunie sa s wrapper-om.
 * Wrapper preberá jeho background + border-bottom; search bar ich rusi. */
.metzler-shop-sticky-stack .metzler-scroll-search {
  position: static;
  top: auto;
  z-index: auto;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
}

.metzler-language-bar .ct-container {
  display: flex;
  justify-content: flex-end;
}

.metzler-language-bar__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
}

.metzler-language-bar__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.68);
}

.metzler-language-bar__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.metzler-language-bar__list li {
  margin: 0;
}

.metzler-language-bar__list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.metzler-language-bar__list a:hover,
.metzler-language-bar__list a:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.38);
}

.metzler-language-bar__list li.is-current a {
  background: #fff;
  color: #111;
  border-color: #fff;
}

.metzler-language-bar__code {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metzler-language-bar__name {
  font-size: 13px;
  line-height: 1;
}

@media (max-width: 767px) {
  .metzler-language-bar .ct-container {
    justify-content: center;
  }

  .metzler-language-bar__nav {
    width: 100%;
    justify-content: center;
    gap: 10px;
    padding: 8px 0;
  }

  .metzler-language-bar__label {
    display: none;
  }

  .metzler-language-bar__list {
    justify-content: center;
  }
}

.metzler-category-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 12px;
}

.metzler-category-path__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* Pill-chip vzhľad pre breadcrumb itemy (linky aj current). */
.metzler-category-path__link,
.metzler-category-path__current {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 500;
  background: #f4f4f4;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  text-decoration: none !important;
  color: #1a1a1a !important;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  max-width: 100%;
}
.metzler-category-path__link {
  cursor: pointer;
}
.metzler-category-path__link:hover,
.metzler-category-path__link:focus {
  background: #005253;
  border-color: #005253;
  color: #fff !important;
}

/* Root link "Všetky produkty" - bez thumb, mensi horizontalny padding. */
.metzler-category-path__link--root {
  padding: 5px 14px;
}

/* Sipka medzi pills sa nahradila gap-om - odstranena. Root nemal nikdy. */
.metzler-category-path__link::before {
  content: none;
}

/* Current item (posledny, produkt - non-link) bez hover/cursor, jemne dim. */
.metzler-category-path__current {
  background: #fff;
  color: #555 !important;
  cursor: default;
  /* Limit pre dlhe nazvy produktov - ellipsis. */
  max-width: 320px;
  overflow: hidden;
}
.metzler-category-path__current .metzler-category-path__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metzler-category-path__thumb {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  display: inline-block;
  border: 1px solid #e6e6e6;
}
.metzler-category-path__link:hover .metzler-category-path__thumb,
.metzler-category-path__link:focus .metzler-category-path__thumb {
  border-color: rgba(255, 255, 255, 0.5);
}

.metzler-category-path__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  .metzler-category-path__link,
  .metzler-category-path__current {
    font-size: 12px;
    padding: 4px 10px 4px 5px;
  }
  .metzler-category-path__link--root {
    padding: 4px 11px;
  }
  .metzler-category-path__thumb {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }
  .metzler-category-path__current {
    max-width: 220px;
  }
}

.metzler-category-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 28px;
}

.metzler-category-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: #fff;
  padding: 8px 12px;
  min-height: 72px;
  flex: 1 1 280px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.metzler-category-card:hover,
.metzler-category-card:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.metzler-category-card__image-wrap {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 8px;
  overflow: hidden;
  background: #f7f7f7;
}

.metzler-category-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.metzler-category-card__title {
  display: block;
  padding: 0;
  font-weight: 600;
  color: #111;
  line-height: 1.3;
}

@media (max-width: 767px) {
  .metzler-category-cards .metzler-category-card {
    flex: 1 1 100%;
  }
}
.metzler-variation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.metzler-variation-grid__item {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 8px 10px;
  width: 100%;
  text-align: left;
  border: 1px solid #d7d7d7;
  border-radius: 10px;
  background: #fff;
  padding: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.metzler-variation-grid__item:hover,
.metzler-variation-grid__item:focus,
.metzler-variation-grid__item.is-active {
  border-color: #111;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.metzler-variation-grid__thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  background: #f7f7f7;
}

.metzler-variation-grid__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.metzler-variation-grid__label {
  font-size: 13px;
  line-height: 1.25;
  color: #111;
  grid-column: 2;
}

.metzler-variation-grid__price {
  font-size: 12px;
  line-height: 1.2;
  color: #555;
  grid-column: 1 / -1;
  margin-top: 4px;
}

.single-product form.variations_form.metzler-variation-grid-ready .metzler-variation-grid + table.variations {
  display: none;
}

.single-product form.variations_form.metzler-variation-grid-ready .metzler-variation-grid ~ .reset_variations {
  display: none !important;
}

@media (max-width: 767px) {
  .metzler-variation-grid {
    grid-template-columns: 1fr;
  }
}
.single-product .ct-breadcrumbs,
.single-product .entry-summary .ct-breadcrumbs,
.single-product .woocommerce-breadcrumb,
.post-type-archive-product .ct-breadcrumbs,
.post-type-archive-product .woocommerce-breadcrumb,
.tax-product_cat .ct-breadcrumbs,
.tax-product_cat .woocommerce-breadcrumb {
  display: none !important;
}

.metzler-special-path-row {
  margin: 0 0 14px;
  padding: 6px 0 10px;
  border-bottom: 1px solid #ececec;
}

.metzler-special-path-row .metzler-category-path {
  margin: 0;
}

.metzler-category-path--product {
  margin: 0;
}

.single-product div.product > .metzler-special-path-row--product {
  padding-left: 50px;
}

.metzler-category-path__current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #111;
  line-height: 1.2;
  font-size: 14px;
  padding: 4px 0;
}

.metzler-category-path__current::before {
  content: '\2192';
  margin-right: 2px;
  color: #777;
}

.metzler-category-path__current--root::before {
  content: none;
  margin-right: 0;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery .flexy-item img {
  border: 1px solid #d9d9d9;
  border-radius: 12px;
}

/* Shop/category product card image frame (Blocksy loop) */
[data-products] .product figure .ct-media-container {
  border: 1px solid #d9d9d9;
  border-radius: 12px !important;
  overflow: hidden;
  background: #fff;
  box-sizing: border-box;
}

[data-products] .product figure .ct-media-container :is(img, picture) {
  border: 0;
  border-radius: 0;
}

.metzler-custom-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.metzler-custom-gallery__main {
  position: relative;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.metzler-custom-gallery__main-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.metzler-custom-gallery__main-image {
  opacity: 1;
}

.metzler-custom-gallery__main-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--metzler-fade-ms, 200ms) ease;
  pointer-events: none;
}

.metzler-custom-gallery__main-overlay.is-visible {
  opacity: 1;
}

.metzler-custom-gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.metzler-custom-gallery__thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.metzler-custom-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
}

.metzler-custom-gallery__thumb.is-active {
  border-color: #111;
}

@media (max-width: 767px) {
  .metzler-custom-gallery__thumb {
    width: 62px;
    height: 62px;
  }
}


/* ------------------------------------------------------------------ */
/* Scraped description shim                                           */
/* ------------------------------------------------------------------ */
/* Popis produktov je scrap-nuty 1:1 zo zdrojovej stranky a obsahuje   */
/* triedy Bootstrap gridu + custom utility (opc-hidden-*, etk-*,       */
/* dpflex-a-c). Bez nich sa stlpce neformatuju vedla seba a obrazky    */
/* renderovane v "mobile" + "desktop" variante sa zobrazia oba naraz   */
/* (tej istej fotky duplicita). Vsetky pravidla su scope-ovane pod     */
/* .opc-Container aby neovplyvnovali zvysok shopu.                     */

.opc-Container .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
  margin-right: -12px;
}

.opc-Container .row > [class*="col"] {
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}

.opc-Container .col {
  flex: 1 0 0%;
}

/* Mobil-first: defaultne plna sirka */
.opc-Container .col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.opc-Container .col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

@media (min-width: 576px) {
  .opc-Container .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .opc-Container .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 768px) {
  .opc-Container .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .opc-Container .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 992px) {
  .opc-Container .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .opc-Container .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1200px) {
  .opc-Container .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
  .opc-Container .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Show/hide utility - kazdy `opc-hidden-{bp}` skryva v range pre dany   */
/* breakpoint. Typicky pattern v scrape:                                */
/*   <div class="opc-hidden-md opc-hidden-lg">  - mobil-only           */
/*   <div class="opc-hidden-xs opc-hidden-sm">  - desktop-only         */
@media (max-width: 575px) {
  .opc-Container .opc-hidden-xs { display: none !important; }
}
@media (min-width: 576px) and (max-width: 767px) {
  .opc-Container .opc-hidden-sm { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .opc-Container .opc-hidden-md { display: none !important; }
}
@media (min-width: 992px) {
  .opc-Container .opc-hidden-lg { display: none !important; }
}

/* Bootstrap visibility utility (d-* triedy v clearfix elementoch).     */
.opc-Container .d-none { display: none !important; }
.opc-Container .d-block { display: block !important; }
.opc-Container .d-flex { display: flex !important; }
@media (min-width: 576px) {
  .opc-Container .d-sm-none { display: none !important; }
  .opc-Container .d-sm-block { display: block !important; }
}
@media (min-width: 768px) {
  .opc-Container .d-md-none { display: none !important; }
  .opc-Container .d-md-block { display: block !important; }
}
@media (min-width: 992px) {
  .opc-Container .d-lg-none { display: none !important; }
  .opc-Container .d-lg-block { display: block !important; }
}
@media (min-width: 1200px) {
  .opc-Container .d-xl-none { display: none !important; }
  .opc-Container .d-xl-block { display: block !important; }
}

.opc-Container .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Layout utility z opc-source */
.opc-Container .dpflex-a-c {
  display: flex;
  align-items: center;
}

/* Typografia sekcii */
.opc-Container .etk-sec-1-h {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.opc-Container .etk-sec-1-h.h3,
.opc-Container .etk-sec-1-h h3,
.opc-Container h3.etk-sec-1-h {
  font-size: 1.25rem;
}

.opc-Container .etk-sec-1-p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Image utility */
.opc-Container .img-fluid,
.opc-Container .img-aspect-ratio {
  max-width: 100%;
  height: auto;
}

.opc-Container .w-100 {
  width: 100% !important;
}


/* ===========================================================================
 * Cyan brand top header (Blocksy theme override)
 * Tenka horna lista (~64px) s primary teal #005253 + biele logo/nav.
 * Hero karta nasleduje hned za bez medzery.
 * =========================================================================== */

/* Vyska headeru znizena z default 120px na 64px desktop, 56px mobile. */
[data-header*="type-1"] {
  --header-height: 64px !important;
}
[data-header*="type-1"] .ct-header [data-row*="middle"] {
  --height: 64px !important;
  --row-padding: 0 24px !important;
  background-color: #005253 !important;
  background-image: none !important;
  --theme-border-top: none !important;
  --theme-border-bottom: none !important;
}
@media (max-width: 999.98px) {
  [data-header*="type-1"] {
    --header-height: 56px !important;
  }
  [data-header*="type-1"] .ct-header [data-row*="middle"] {
    --height: 56px !important;
    --row-padding: 0 16px !important;
  }
}

/* Background na celej hlavicke (pre konzistenciu pri sticky variantoch). */
[data-header*="type-1"] .ct-header [data-row*="middle"] > div {
  background-color: #005253 !important;
  background-image: none !important;
}

/* Logo + site title biele na cyan. */
[data-header*="type-1"] .ct-header [data-id="logo"] .site-title,
[data-header*="type-1"] .ct-header [data-id="logo"] .site-title a,
[data-header*="type-1"] .ct-header [data-id="logo"] a {
  color: #fff !important;
}

/* Menu links biele + light hover. */
[data-header*="type-1"] .ct-header [data-row*="middle"] .ct-menu-link,
[data-header*="type-1"] .ct-header [data-row*="middle"] [data-id*="menu"] a {
  color: #fff !important;
}
[data-header*="type-1"] .ct-header [data-row*="middle"] .ct-menu-link:hover,
[data-header*="type-1"] .ct-header [data-row*="middle"] [data-id*="menu"] a:hover {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Trigger (mobile hamburger) biely. */
[data-header*="type-1"] [data-id="trigger"] {
  color: #fff !important;
}
[data-header*="type-1"] [data-id="trigger"] .ct-icon,
[data-header*="type-1"] [data-id="trigger"] svg {
  color: #fff !important;
  fill: currentColor !important;
}

/* Hero hned za hlavickou bez gap-u (intro page tiles variant). */
.metzler-intro--tiles .metzler-intro__hero {
  margin-top: 0 !important;
}
/* Site main margin reset aby hero nemal medzeru pred sebou. */
body.page-template-default #main-container > .site-main,
body.home #main-container > .site-main {
  margin-top: 0;
  padding-top: 0;
}

/* Intro page only: posun metzler-bottom-bar (desktop top-right pill) o 15px
 * nizsie aby neprekryval cyan brand top header + lang bar. Iba na intro
 * page (body.is-metzler-intro), ostatne stranky zachovany default. */
@media (min-width: 1024px) {
  body.is-metzler-intro .metzler-bottom-bar {
    top: calc(var(--admin-bar, 0px) + 41px) !important; /* 24 + 17 */
  }
}

/* Bottom-bar (desktop top-right pill) v popredi nad lang barom (9100).
 * Pod modalmi (mli-modal 9500, lang-consent 9700) - tie ostavaju nad. */
.metzler-bottom-bar {
  z-index: 9200 !important;
}

/* ===========================================================================
 * Dropdown lang variant v theme header (intro stranka, kategorie, atd).
 * Rovnaky pattern ako v sticky stack-u na obchod-scroll/product detail.
 * Generalizovane selektory bez .metzler-shop-sticky-stack parent.
 * =========================================================================== */

.metzler-language-bar__dropdown {
  position: relative;
  margin: 0 auto;
  padding: 6px 16px;
  max-width: 1290px;
}

.metzler-language-bar__current {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 600;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  user-select: none;
}
.metzler-language-bar__current::-webkit-details-marker { display: none; }
.metzler-language-bar__current::marker { content: ''; }
.metzler-language-bar__current:hover {
  background: rgba(255, 255, 255, 0.1);
}

.metzler-language-bar__flag {
  font-size: 18px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
    "Twemoji Mozilla", "EmojiOne Color", sans-serif;
}

.metzler-language-bar__current-name {
  font-size: 14px;
}

.metzler-language-bar__chevron {
  font-size: 12px;
  transition: transform 180ms ease;
}
.metzler-language-bar__dropdown[open] .metzler-language-bar__chevron {
  transform: rotate(180deg);
}

.metzler-language-bar__list--dropdown {
  position: absolute;
  top: calc(100% - 2px);
  left: 16px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  min-width: 160px;
  z-index: 100;
}
.metzler-language-bar__list--dropdown li {
  margin: 0;
  padding: 0;
}
.metzler-language-bar__list--dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: #1a1a1a !important;
  text-decoration: none;
  font-size: 14px;
  border: 0;
  border-radius: 0;
  min-height: auto;
  background: #fff;
}
.metzler-language-bar__list--dropdown a:hover {
  background: #f4f4f4;
}

@media (max-width: 767px) {
  .metzler-language-bar__dropdown { padding: 5px 14px; }
  .metzler-language-bar__current { padding: 3px 10px; }
  .metzler-language-bar__current-name { font-size: 13px; }
}

/* ===========================================================================
 * Breadcrumbs (Blocksy .ct-breadcrumbs) as rounded pill chips.
 * Aplikuje sa globalne; primarne pre product detail kde su 3-5 items.
 * =========================================================================== */
.ct-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  padding: 6px 0;
}
.ct-breadcrumbs > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ct-breadcrumbs > span > a {
  display: inline-block;
  padding: 5px 14px;
  background: #f4f4f4;
  color: #1a1a1a !important;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  white-space: nowrap;
}
.ct-breadcrumbs > span > a:hover,
.ct-breadcrumbs > span > a:focus {
  background: #005253;
  color: #fff !important;
  border-color: #005253;
}
/* Posledny item (current page) - bez linka, len text. */
.ct-breadcrumbs > span.last-item,
.ct-breadcrumbs > span:last-child {
  padding: 5px 14px;
  background: #fff;
  color: #555;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Separator svg medzi pills - mensiu a v sedej. */
.ct-breadcrumbs .ct-separator {
  color: #bbb;
  opacity: 0.7;
}
@media (max-width: 767px) {
  .ct-breadcrumbs {
    font-size: 12px;
    gap: 4px;
  }
  .ct-breadcrumbs > span > a,
  .ct-breadcrumbs > span.last-item,
  .ct-breadcrumbs > span:last-child {
    padding: 4px 10px;
  }
}