/* =========================================================
   ULTRACOAT – Fonts + Typography + UI patches
   File: /upload/uc.css  (served as /user/documents/upload/uc.css)
   ========================================================= */

/* ===== ULTRACOAT FONTS (@font-face) ===== */

/* Archivo – body text */
@font-face {
  font-family: "Archivo";
  src: url("/user/documents/upload/fonts/Archivo-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/user/documents/upload/fonts/Archivo-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/user/documents/upload/fonts/Archivo-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/user/documents/upload/fonts/Archivo-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Staff X Wide – headlines */
@font-face {
  font-family: "Staff X Wide";
  src:
    url("/user/documents/upload/fonts/StaffXWide-MediumItalic.woff2") format("woff2"),
    url("/user/documents/upload/fonts/StaffXWide-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Staff X Wide";
  src:
    url("/user/documents/upload/fonts/StaffXWide-SemiBoldItalic.woff2") format("woff2"),
    url("/user/documents/upload/fonts/StaffXWide-SemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Staff X Wide";
  src:
    url("/user/documents/upload/fonts/StaffXWide-BoldItalic.woff2") format("woff2"),
    url("/user/documents/upload/fonts/StaffXWide-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ===== HOMEPAGE VIDEO BANNER (CSS part only) ===== */
body.in-index .banners-row,
body.in-index .container--bannersBenefit{
  display:none;
}
#uc-video-bg{
  width:100%;
  background:#000;
}
#uc-video-banner{
  position:relative;
  width:100%;
  max-width:1440px;
  margin:0 auto;
  aspect-ratio:16/9;
  overflow:hidden;
}
#uc-video-banner video{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}

/* ===== TYPOGRAPHY SYSTEM ===== */

/* Base: Archivo everywhere */
html, body, .content, #content, .content-inner,
p, li, ul, ol, span, div, small,
input, textarea, select, button, label,
table, th, td, .price, .availability-value {
  font-family: "Archivo", sans-serif !important;
  font-style: normal !important;
  text-transform: none !important;
}

/* Headlines / navigation / product names: Staff X Wide */
h1, h2, h3, h4, h5, h6,
#header #navigation a,
.navigation-list a, .navigation-list-item a,
#navigation-mobile a, .mobile-menu a, .mobile-navigation a,
.products .p-name, .products .p-name a,
.products .name, .products .name a,
.product .name a, .product-item .name a, .product-card .name a,
.product-item__name, .product-item__name a,
.product-card__name, .product-card__name a,
.uc-intro-headline, .uc-section-title, .uc-partner-headline,
.homepage-group-title:after,
.homepage-articles-wrapper a, .homepage-group-title~* a {
  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
}

/* Buttons / CTAs */
.btn, .btn.btn-primary, .btn.buy-btn, .btn-add-to-cart,
.products .p-tools a, .product .p-tools a, .product-item .p-tools a, .product-card .p-tools a,
.shp-form .btn, .shp-form button, .shp-form input[type="submit"], form .btn[type="submit"] {
  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
}

/* ===== PATCHES (Shoptet variants) ===== */

/* Top nav / header */
#header, #header * ,
.header, .header * ,
#navigation, #navigation *,
.navigation, .navigation *,
.navigation__item, .navigation__link,
.menu, .menu * ,
.menu-level-1 a, .menu-level-2 a, .menu-level-3 a,
#navigation-mobile, #navigation-mobile * ,
.mobile-navigation, .mobile-navigation * ,
.mobile-menu, .mobile-menu * {
  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
}

/* Icons / counters stay readable */
.navigation .cart-count, .navigation .cart-count * ,
.header .cart-count, .header .cart-count * {
  font-family: "Archivo", sans-serif !important;
  font-style: normal !important;
  text-transform: none !important;
}

/* Page titles / category headings / breadcrumbs */
.page-title, .category-title, .category-header__title,
.content h1, .content-inner h1,
h1.page-title, .h1, .title, .page-heading,
.breadcrumb, .breadcrumbs, .breadcrumb a, .breadcrumbs a {
  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
}

/* Cart / checkout */
.cart, .cart * ,
.order, .order * ,
.checkout, .checkout * ,
.co-box, .co-box * ,
.shp-cart, .shp-cart * ,
.summary, .summary * {
  font-family: "Archivo", sans-serif !important;
  font-style: normal !important;
  text-transform: none !important;
}

/* Cart buttons / primary actions */
.cart .btn, .cart button, .cart a.btn,
.order .btn, .checkout .btn, .co-box .btn,
.summary .btn, .summary button {
  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
}

/* ===== Legacy layout/styles moved from BODY (fonts removed) ===== */

@media (min-width: 992px){
  #header #navigation{margin-left:32px}
  #header #navigation a{color:#fff!important}
  #header #navigation a:hover{color:#0bbf59!important}
}
@media (max-width: 991px){
  #header #navigation a{color:#000!important}
  #header #navigation a:hover{color:#0bbf59!important}
}

.uc-intro-center,.uc-intro-text,.uc-partner-wrap{max-width:900px;margin:40px auto;text-align:center!important}
.uc-partner-wrap>div{max-width:900px;margin:0 auto 24px}
.uc-intro-headline,.uc-section-title,.uc-partner-headline{font-size:32px!important;margin-bottom:28px!important}
@media(max-width:767px){.uc-intro-headline,.uc-section-title,.uc-partner-headline{font-size:22px!important}}

.uc-section-subtitle,.uc-partner-label{
  display:inline-block!important;
  padding:4px 16px!important;
  border-radius:30px!important;
  background:#000!important;
  color:#0BBF59!important;
  font-size:12px!important;
  margin-bottom:12px!important
}
.uc-partner-wrap p,.uc-intro-text p{line-height:1.4;margin:0 0 8px}

body.in-index .homepage-tabs-wrapper .products .product .p-tools a{
  display:inline-block;
  padding:10px 24px;
  border-radius:999px;
  background:#0bbf59;
  color:#fff!important;
  border:0
}
body.in-index .homepage-tabs-wrapper .products .product .p-tools a:hover{background:#1f8c4e;color:#fff!important}

.shp-form .btn,.shp-form button,.shp-form input[type="submit"],form .btn[type="submit"]{
  padding:10px 24px;
  border-radius:999px;
  background:#0bbf59;
  color:#fff!important;
  border:0;
  cursor:pointer
}
.shp-form .btn:hover,.shp-form button:hover,.shp-form input[type="submit"]:hover,form .btn[type="submit"]:hover{
  background:#1f8c4e;
  color:#fff!important
}

body:not(.in-index) .content-inner h1:first-of-type,
body:not(.in-index) .content h1:first-of-type,
body:not(.in-index) h1.page-title:first-of-type,
body:not(.in-index) h1.uc-top-heading:first-of-type{
  position:relative;
  z-index:1;
  text-align:center;
  color:#fff!important;
  font-size:40px!important;
  margin:0 0 40px!important;
  padding:32px 0
}
body:not(.in-index) .content-inner h1:first-of-type:before,
body:not(.in-index) .content h1:first-of-type:before,
body:not(.in-index) h1.page-title:first-of-type:before,
body:not(.in-index) h1.uc-top-heading:first-of-type:before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:100vw;
  height:100%;
  background:#000;
  z-index:-1
}
@media(max-width:767px){
  body:not(.in-index) .content-inner h1:first-of-type,
  body:not(.in-index) .content h1:first-of-type,
  body:not(.in-index) h1.page-title:first-of-type,
  body:not(.in-index) h1.uc-top-heading:first-of-type{
    font-size:26px!important;
    padding:24px 0;
    margin-bottom:24px!important
  }
}

body.type-product .content-inner h1:first-of-type,
body.type-product .content h1:first-of-type,
body.type-product h1.page-title:first-of-type,
body.type-product h1.uc-top-heading:first-of-type{
  position:static!important;
  color:#111!important;
  padding:0!important;
  margin:0 0 20px!important
}
body.type-product .content-inner h1:first-of-type:before,
body.type-product .content h1:first-of-type:before,
body.type-product h1.page-title:first-of-type:before,
body.type-product h1.uc-top-heading:first-of-type:before{
  display:none!important
}

.products .p-name,.products .p-name a,.products .name,.products .name a,
.product .p-name,.product .p-name a,.product .name,.product .name a,
.product-item__name,.product-item__name a,
.product-card__name,.product-card__name a{
  font-size:14px!important;
  letter-spacing:0!important;
  color:#111!important;
  display:block;
  margin-bottom:22px!important
}

.homepage-group-title{font-size:0!important;text-align:center;margin:40px 0 32px}
.homepage-group-title:before{
  content:"ULTRACOAT LIFE";
  display:inline-block;
  padding:6px 26px;
  border-radius:999px;
  background:#000;
  color:#0BBF59
}
.homepage-group-title:after{
  content:"BLOG";
  display:block;
  margin-top:40px;
  font-size:32px;
  letter-spacing:0;
  color:#111;
  background:none;
  padding:0;
  border-radius:0
}
@media(max-width:767px){.homepage-group-title:after{font-size:22px}}

.homepage-articles-wrapper a,
.homepage-group-title~* a{
  font-size:14px!important;
  letter-spacing:0!important;
  color:#111!important;
  display:block;
  margin-bottom:12px
}

@media(max-width:991px){
  nav a,#navigation-mobile a,.mobile-navigation a,.mobile-menu a,
  .navigation-list a,.navigation-list-item a{
    color:#0bbf59!important
  }
}

.products .p-tools a,.product .p-tools a,.product-item .p-tools a,.product-card .p-tools a,
.btn.btn-primary,.btn.buy-btn,.btn-add-to-cart{
  display:inline-block;
  padding:10px 24px;
  border-radius:999px;
  background:#0bbf59!important;
  color:#fff!important;
  border:0!important;
  cursor:pointer;
  text-decoration:none!important
}
.products .p-tools a:hover,.product .p-tools a:hover,.product-item .p-tools a:hover,.product-card .p-tools a:hover,
.btn.btn-primary:hover,.btn.buy-btn:hover,.btn-add-to-cart:hover{
  background:#1f8c4e!important;
  color:#fff!important
}

/* ===== Homepage hero headline fix ===== */
body.in-index h1,
body.in-index .content h1,
body.in-index .content-inner h1,
body.in-index .welcome-text h1,
body.in-index .homepage-welcome-wrapper h1,
body.in-index .homepage-welcome h1,
body.in-index .homepage__headline,
body.in-index .homepage-headline,
body.in-index .hp-headline {
  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
}

/* ===== Homepage hero typography – force correct fonts over inline styles ===== */

/* MAIN HERO HEADLINE › Staff X Wide */
body.in-index div[style*="font-family:'Work Sans'"][style*="text-transform:uppercase"]{
  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
}

/* HERO SUBTEXTS › Archivo */
body.in-index p[style*="font-family:'Work Sans'"]{
  font-family: "Archivo", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ===== Homepage texts block (bottom CTA section) ===== */
body.in-index .homepage-texts-wrapper,
body.in-index .homepage-texts-wrapper *{
  font-family: "Archivo", sans-serif !important;
  font-style: normal !important;
  text-transform: none !important;
}

/* Headline inside the block › Staff */
body.in-index .homepage-texts-wrapper h1,
body.in-index .homepage-texts-wrapper h2,
body.in-index .homepage-texts-wrapper h3{
  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
}

/* Buttons inside the block › Staff */
body.in-index .homepage-texts-wrapper .btn,
body.in-index .homepage-texts-wrapper a.btn,
body.in-index .homepage-texts-wrapper button{
  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
}

/* If Shoptet injected inline Work Sans inside homepage-texts-wrapper */
body.in-index .homepage-texts-wrapper [style*="font-family:'Work Sans'"],
body.in-index .homepage-texts-wrapper [style*='font-family:"Work Sans"']{
  font-family: "Archivo", sans-serif !important;
}

/* ===== Homepage bottom CTA (homepage-texts-wrapper) – override inline Work Sans ===== */

/* Headline div (it has inline uppercase + 32px) › Staff */
body.in-index .homepage-texts-wrapper div[style*="font-family"][style*="text-transform: uppercase"][style*="font-size: 32px"]{
  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
}

/* Paragraphs / smaller texts that still have inline Work Sans › Archivo */
body.in-index .homepage-texts-wrapper p[style*="font-family"],
body.in-index .homepage-texts-wrapper div[style*="font-family"][style*="font-size: 14px"],
body.in-index .homepage-texts-wrapper span[style*="font-family"]{
  font-family: "Archivo", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
/* ===== Homepage pill label (PARTNERSTVÍ / etc.) – match Ultracoat.pl ===== */
body.in-index div[style*="background: #000"][style*="border-radius: 999px"][style*="text-transform: uppercase"]{
  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: uppercase !important;

  /* closer to ultracoat.pl feel */
  font-size: 13px !important;
  padding: 8px 20px !important;
  border-radius: 999px !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

/* ===== Unified black pill labels (homepage) ===== */
body.in-index div[style*="background:#000"][style*="border-radius:999px"]{
  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 500 !important;   /* <- PILLS ONLY */
  font-style: italic !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}

/* ===== FINAL: force black pill labels to weight 500 ===== */
body.in-index div[style*="background:#000"][style*="border-radius:999px"]{
  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 500 !important;  /* <- pill */
  font-style: italic !important;
  text-transform: uppercase !important;
}

/* Safety: keep real headings bold */
body.in-index h1,
body.in-index h2,
body.in-index h3{
  font-weight: 700 !important;
}
/* ===== FINAL FINAL: black pills (any #000 variant) › Staff 500 ===== */
body.in-index div[style*="border-radius:999px"][style*="background:#000"],
body.in-index div[style*="border-radius: 999px"][style*="background:#000"],
body.in-index div[style*="border-radius:999px"][style*="background: #000"],
body.in-index div[style*="border-radius:999px"][style*="background:#000000"],
body.in-index div[style*="border-radius:999px"][style*="background: #000000"],
body.in-index div[style*="border-radius: 999px"][style*="background:#000000"],
body.in-index div[style*="border-radius: 999px"][style*="background: #000000"]{
  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 500 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}
/* ===== Force pill labels with inline font-weight:800 to Staff 500 ===== */
body.in-index div[style*="border-radius: 999px"][style*="background: #000000"][style*="font-weight: 800"],
body.in-index div[style*="border-radius:999px"][style*="background:#000000"][style*="font-weight:800"],
body.in-index div[style*="border-radius: 999px"][style*="background: #000000"][style*="font-family: 'Work Sans'"],
body.in-index div[style*="border-radius:999px"][style*="background:#000000"][style*="font-family:'Work Sans'"]{
  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 500 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
}
/* ===== ULTRACOAT CTA – FINAL ===== */
:root{
  --uc-green: #01DF82;
  --uc-green-hover: #00B86B; /* darker green for hover */
}

/* Base CTA */
.products .p-tools a,
.product .p-tools a,
.product-item .p-tools a,
.product-card .p-tools a,
a.btn,
.btn,
.btn.btn-primary,
.btn.buy-btn,
.btn-add-to-cart,
.shp-form .btn,
.shp-form button,
.shp-form input[type="submit"],
form .btn[type="submit"],
button[type="submit"],
input[type="submit"]{
  background: var(--uc-green) !important;
  border-color: var(--uc-green) !important;
  color: #000 !important;                 /* black text */
  box-shadow: none !important;
  transition: background .2s ease, color .2s ease;
}

/* Hover / focus */
.products .p-tools a:hover,
.product .p-tools a:hover,
.product-item .p-tools a:hover,
.product-card .p-tools a:hover,
a.btn:hover,
.btn:hover,
.btn.btn-primary:hover,
.btn.buy-btn:hover,
.btn-add-to-cart:hover,
.shp-form .btn:hover,
.shp-form button:hover,
.shp-form input[type="submit"]:hover,
form .btn[type="submit"]:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.products .p-tools a:focus,
.product .p-tools a:focus,
.btn:focus,
button:focus,
input[type="submit"]:focus{
  background: var(--uc-green-hover) !important;
  border-color: var(--uc-green-hover) !important;
  color: #fff !important;                 /* white on hover */
}
/* ===== FIX: Homepage featured products CTA in tabs ===== */
body.in-index .shp-tabs-wrapper.homepage-tabs-wrapper .p-tools a,
body.in-index .shp-tabs-wrapper.homepage-tabs-wrapper a.btn,
body.in-index .shp-tabs-wrapper.homepage-tabs-wrapper .btn.btn-primary{
  background: var(--uc-green) !important;
  border-color: var(--uc-green) !important;
  color: #000 !important;
}

body.in-index .shp-tabs-wrapper.homepage-tabs-wrapper .p-tools a:hover,
body.in-index .shp-tabs-wrapper.homepage-tabs-wrapper a.btn:hover,
body.in-index .shp-tabs-wrapper.homepage-tabs-wrapper .btn.btn-primary:hover{
  background: var(--uc-green-hover) !important;
  border-color: var(--uc-green-hover) !important;
  color: #fff !important;
}
/* ===== FIX: Inline CTA button (e.g. "Více o spolupráci") ===== */
body.in-index a[style*="border-radius: 999px"][style*="background"],
body.in-index a[style*="border-radius:999px"][style*="background"]{
  background: var(--uc-green) !important;
  border-color: var(--uc-green) !important;
  color: #000 !important;

  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

body.in-index a[style*="border-radius: 999px"][style*="background"]:hover,
body.in-index a[style*="border-radius:999px"][style*="background"]:hover{
  background: var(--uc-green-hover) !important;
  border-color: var(--uc-green-hover) !important;
  color: #fff !important;
}
/* ===== HARD FIX: Homepage tabs / featured products CTA ===== */
body.in-index .homepage-tabs-wrapper .p-tools a,
body.in-index .homepage-tabs-wrapper .p-tools a.btn,
body.in-index .homepage-tabs-wrapper .p-tools a.btn-primary,
body.in-index .homepage-tabs-wrapper .p-tools .btn,
body.in-index .homepage-tabs-wrapper .p-tools .btn-primary,
body.in-index .homepage-tabs-wrapper .product .p-tools a,
body.in-index .homepage-tabs-wrapper .products .p-tools a,
body.in-index .homepage-tabs-wrapper a.btn.btn-primary{
  background-color: var(--uc-green) !important;
  border-color: var(--uc-green) !important;
  background-image: none !important;
  color: #000 !important;
}

/* Some themes paint buttons via pseudo elements */
body.in-index .homepage-tabs-wrapper .p-tools a::before,
body.in-index .homepage-tabs-wrapper .p-tools a::after{
  background: none !important;
  content: none !important;
}

body.in-index .homepage-tabs-wrapper .p-tools a:hover,
body.in-index .homepage-tabs-wrapper .p-tools a.btn:hover,
body.in-index .homepage-tabs-wrapper .p-tools .btn:hover,
body.in-index .homepage-tabs-wrapper a.btn.btn-primary:hover{
  background-color: var(--uc-green-hover) !important;
  border-color: var(--uc-green-hover) !important;
  background-image: none !important;
  color: #fff !important;
}
/* ================================
   ULTRACOAT DESIGN TOKENS (GLOBAL)
================================ */
:root{
  --uc-green: #01DF82;
  --uc-green-hover: #00B86B;
  --uc-pill-bg: #000;
  --uc-pill-text: #01DF82;
}

/* Force any leftover old green from legacy rules */
:root{
  --brand-green: var(--uc-green);
}
/* ================================
   BLACK PILL LABELS (GLOBAL)
   - unified across site
================================ */

/* 1) Inline pills (your case) */
div[style*="border-radius: 999px"][style*="background"],
div[style*="border-radius:999px"][style*="background"]{
  background: var(--uc-pill-bg) !important;
  color: var(--uc-pill-text) !important;

  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 500 !important;
  font-style: italic !important;
  text-transform: uppercase !important;

  padding: 8px 20px !important;
  border-radius: 999px !important;
  line-height: 1.2 !important;
}

/* 2) Pills created via classes (if any) */
.uc-pill, .pill, .badge, .label{
  background: var(--uc-pill-bg) !important;
  color: var(--uc-pill-text) !important;

  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 500 !important;
  font-style: italic !important;
  text-transform: uppercase !important;

  padding: 8px 20px !important;
  border-radius: 999px !important;
  line-height: 1.2 !important;
}
/* ================================
   BLOG HEADER PILL: "ULTRACOAT LIFE"
================================ */
body.in-index .homepage-group-title{
  font-size: 0 !important;          /* hide original text safely */
  text-align: center !important;
  margin: 40px 0 32px !important;
}

body.in-index .homepage-group-title::before{
  content: "ULTRACOAT LIFE" !important;
  display: inline-block !important;
  padding: 8px 20px !important;
  border-radius: 999px !important;
  background: var(--uc-pill-bg) !important;
  color: var(--uc-pill-text) !important;

  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 500 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}
/* ================================
   HOMEPAGE TABS CTA (DETAIL) – FORCE COLOR
================================ */
body.in-index .homepage-tabs-wrapper a.btn.btn-primary{
  background-color: var(--uc-green) !important;
  border-color: var(--uc-green) !important;
  background-image: none !important;
  color: #000 !important;
}

body.in-index .homepage-tabs-wrapper a.btn.btn-primary:hover{
  background-color: var(--uc-green-hover) !important;
  border-color: var(--uc-green-hover) !important;
  background-image: none !important;
  color: #fff !important;
}
/* ================================
   LEGACY GREEN OVERRIDE
   (replace old #0BBF59 usage)
================================ */
*[style*="#0BBF59"], *[style*="#0bbf59"]{
  /* do NOT change text color globally; only fix backgrounds/borders if present */
}

/* Most common legacy cases */
a[style*="background: #0BBF59"],
a[style*="background:#0BBF59"],
a[style*="background: #0bbf59"],
a[style*="background:#0bbf59"],
button[style*="background: #0BBF59"],
button[style*="background:#0BBF59"],
.btn[style*="background: #0BBF59"],
.btn[style*="background:#0BBF59"]{
  background: var(--uc-green) !important;
  border-color: var(--uc-green) !important;
}
/* ===== BLOG section pill: ULTRACOAT LIFE (guaranteed) ===== */
body.in-index .homepage-blog-wrapper{
  position: relative;
  padding-top: 56px; /* space for pill above BLOG */
}

body.in-index .homepage-blog-wrapper::before{
  content: "ULTRACOAT LIFE";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;

  padding: 8px 20px;
  border-radius: 999px;
  background: #000;
  color: #01DF82;

  font-family: "Staff X Wide", sans-serif;
  font-weight: 500;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.2;
  z-index: 5;
}
/* ===== Homepage products block: force CTA text black (default) ===== */
body.in-index .products-block .p-tools a.btn,
body.in-index .products-block .p-tools a.btn.btn-primary,
body.in-index .products-block .p-tools a{
  color: #000 !important;
}

/* Hover stays white */
body.in-index .products-block .p-tools a.btn:hover,
body.in-index .products-block .p-tools a.btn.btn-primary:hover,
body.in-index .products-block .p-tools a:hover{
  color: #fff !important;
}
/* Extra safe for the exact homepage block you showed (products-7) */
body.in-index #products-7 .p-tools a.btn.btn-primary{
  color: #000 !important;
}
body.in-index #products-7 .p-tools a.btn.btn-primary:hover{
  color: #fff !important;
}
/* ===== Remove the empty mini pill/dash above BLOG ===== */
body.in-index .homepage-group-title::before,
body.in-index .homepage-group-title::after{
  content: none !important;
  display: none !important;
}
/* ===== Blog pill positioned like the top pill above H1 ===== */
body.in-index .homepage-blog-wrapper{
  position: relative;
  padding-top: 78px !important; /* space for pill */
}

body.in-index .homepage-blog-wrapper::before{
  content: "ULTRACOAT LIFE" !important;
  position: absolute;
  top: 10px;                 /* <- move up/down here */
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;

  padding: 8px 22px;
  border-radius: 999px;
  background: #000;
  color: var(--uc-green);

  font-family: "Staff X Wide", sans-serif;
  font-weight: 500;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1.2;
  z-index: 10;
}
/* ===== More breathing room between video and hero (pill + H1) ===== */
body.in-index .homepage-texts-wrapper,
body.in-index .welcome-wrapper{
  margin-top: 40px !important;
}
/* ===== BLOG cards typography ===== */

/* Article titles */
body.in-index .homepage-blog-wrapper a,
body.in-index .homepage-blog-wrapper .news-item a,
body.in-index .homepage-blog-wrapper h3,
body.in-index .homepage-blog-wrapper h4{
  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
}

/* Article preview text */
body.in-index .homepage-blog-wrapper p,
body.in-index .homepage-blog-wrapper .news-item p,
body.in-index .homepage-blog-wrapper .news-item{
  font-family: "Archivo", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
}
/* ================================
   BLOG HEADER: restore BLOG + ULTRACOAT LIFE pill
================================ */

/* undo our previous removal */
body.in-index .homepage-group-title::before,
body.in-index .homepage-group-title::after{
  display: block !important;
}

/* make the BLOG title visible again */
body.in-index .homepage-group-title{
  font-size: 32px !important;              /* BLOG visible */
  line-height: 1.1 !important;
  text-align: center !important;
  margin: 22px 0 28px !important;          /* reasonable spacing */
  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
}

/* ULTRACOAT LIFE pill above BLOG */
body.in-index .homepage-group-title::before{
  content: "ULTRACOAT LIFE" !important;
  display: inline-block !important;
  margin: 0 auto 16px !important;

  padding: 8px 22px !important;
  border-radius: 999px !important;
  background: #000 !important;
  color: var(--uc-green) !important;

  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 500 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

/* remove any decorative dash (if theme generates it as ::after) */
body.in-index .homepage-group-title::after{
  content: none !important;
}
/* ================================
   Undo blog-wrapper pill positioning (remove huge gaps)
================================ */
body.in-index .homepage-blog-wrapper{
  padding-top: 0 !important;
}
body.in-index .homepage-blog-wrapper::before{
  content: none !important;
  display: none !important;
}
/* ================================
   Tighten spacing between BLOG and next section
================================ */
body.in-index .homepage-blog-wrapper{
  margin-bottom: 40px !important;
}
body.in-index .homepage-texts-wrapper{
  margin-top: 40px !important;
}
/* ================================
   More spacing under video (hero area only)
================================ */
body.in-index #uc-video-bg + *{
  margin-top: 28px !important;
}
body.in-index .index-content-wrapper,
body.in-index .index-content-wrapper > .container{
  padding-top: 28px !important;
}
/* ===== BLOG header layout fix (pill above title, centered) ===== */
body.in-index .homepage-group-title{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;

  margin: 40px 0 28px !important;
  text-align: center !important;

  /* title styling */
  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
}

/* ULTRACOAT LIFE pill */
body.in-index .homepage-group-title::before{
  content: "ULTRACOAT LIFE" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 8px 22px !important;
  border-radius: 999px !important;
  background: #000 !important;
  color: var(--uc-green) !important;

  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 500 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  line-height: 1 !important;

  max-width: 100% !important;
  white-space: nowrap !important;
}

/* kill any remaining decorative dash */
body.in-index .homepage-group-title::after{
  content: none !important;
  display: none !important;
}
/* ===== Global typography sizing (make it readable like UC PL) ===== */
html{ font-size: 16px !important; }

body,
.content,
#content,
.content-inner{
  font-size: 16px !important;
  line-height: 1.55 !important;
}
/* ===== BLOG text weight fix ===== */
body.in-index .homepage-blog-wrapper p,
body.in-index .homepage-blog-wrapper .news-item p,
body.in-index .homepage-blog-wrapper .news-item{
  font-family: "Archivo", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  line-height: 1.55 !important;
}
/* ================================
   HOTFIX: stop ULTRACOAT LIFE injection globally
================================ */
body.in-index .homepage-group-title::before{
  content: none !important;
  display: none !important;
}
body.in-index .homepage-group-title::after{
  content: none !important;
  display: none !important;
}
/* ================================
   BLOG ONLY: ULTRACOAT LIFE pill + BLOG title
================================ */
body.in-index .homepage-blog-wrapper .homepage-group-title{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;

  text-align: center !important;
  margin: 40px 0 28px !important;

  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
}

/* Title text should be BLOG (force) */
body.in-index .homepage-blog-wrapper .homepage-group-title{
  /* we can’t reliably change inner text without JS,
     so we keep the existing "NOVÉ ČLÁNKY" for now unless you rename it in admin */
}

/* Pill above it */
body.in-index .homepage-blog-wrapper .homepage-group-title::before{
  content: "ULTRACOAT LIFE" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 8px 22px !important;
  border-radius: 999px !important;
  background: #000 !important;
  color: var(--uc-green) !important;

  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 500 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
/* ================================
   PRODUCTS section: keep it clean (no BLOG hacks)
================================ */
body.in-index .homepage-tabs-wrapper .homepage-group-title,
body.in-index .shp-tabs-wrapper .homepage-group-title{
  display: block !important;
  margin: 40px 0 32px !important;
  text-align: center !important;
}
/* ================================
   Readability: global body text (gentle)
================================ */
body, .content, #content, .content-inner{
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* paragraphs and list text */
p, li{
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}
/* ================================
   BLOG perex weight (force normal)
================================ */
body.in-index .homepage-blog-wrapper .news-item p,
body.in-index .homepage-blog-wrapper .news-item,
body.in-index .homepage-blog-wrapper .news-item *:not(h1):not(h2):not(h3):not(h4){
  font-family: "Archivo", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
}
/* =========================
   TYPO: bigger Archivo (global)
========================= */
html { font-size: 16px !important; } /* base */

body, .content, #content, .content-inner{
  font-size: 16px !important;
  line-height: 1.65 !important;
}

p, li, .text, .description, .category-description,
.products .p-desc, .product-detail-description, .news-item p{
  font-size: 16px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
}
/* =========================
   HOME products: hide small "OBJEVTE ULTRACOAT" (the tiny group label)
========================= */
body.in-index .homepage-tabs-wrapper .homepage-group-title,
body.in-index .shp-tabs-wrapper .homepage-group-title{
  display: none !important;
}
/* =========================
   PILL system (same size everywhere)
========================= */
:root{
  --uc-pill-font: "Staff X Wide", sans-serif;
  --uc-pill-size: 12px;
  --uc-pill-pad-v: 6px;
  --uc-pill-pad-h: 18px;
  --uc-pill-weight: 500;
}

body.in-index .homepage-blog-wrapper .homepage-group-title::before,
body.in-index .uc-pill,
body.in-index .uc-section-subtitle,
body.in-index .uc-partner-label{
  font-family: var(--uc-pill-font) !important;
  font-size: var(--uc-pill-size) !important;
  padding: var(--uc-pill-pad-v) var(--uc-pill-pad-h) !important;
  font-weight: var(--uc-pill-weight) !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
}
/* =========================
   BLOG cards: stronger titles
========================= */
body.in-index .homepage-blog-wrapper .news-item h3,
body.in-index .homepage-blog-wrapper .news-item .title,
body.in-index .homepage-blog-wrapper .news-item a{
  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}
/* =========================
   BLOG typography (make it readable)
========================= */
body.in-index .homepage-blog-wrapper .news-item h3,
body.in-index .homepage-blog-wrapper .news-item h3 a{
  font-size: 20px !important;
  line-height: 1.15 !important;
  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
}

body.in-index .homepage-blog-wrapper .news-item p{
  font-size: 16px !important;
  line-height: 1.6 !important;
  font-family: "Archivo", sans-serif !important;
  font-weight: 400 !important;
}
/* =========================
   HOME products: remove leftover bar/line after hiding the group title
========================= */
body.in-index .homepage-tabs-wrapper .homepage-group-title,
body.in-index .shp-tabs-wrapper .homepage-group-title{
  display:none !important;
}

/* zbytky: margin/padding/line kolem */
body.in-index .homepage-tabs-wrapper .homepage-group-title + *,
body.in-index .shp-tabs-wrapper .homepage-group-title + *{
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* často je to hr/line přímo v tab-content */
body.in-index .homepage-tabs-wrapper .tab-content hr,
body.in-index .shp-tabs-wrapper .tab-content hr{
  display:none !important;
}
/* =========================
   PILL system (unified)
========================= */
:root{
  --uc-pill-bg:#000;
  --uc-pill-fg:#0BBF59;
  --uc-pill-font:"Staff X Wide", sans-serif;
  --uc-pill-size:12px;
  --uc-pill-weight:500;
  --uc-pill-pad-v:6px;
  --uc-pill-pad-h:18px;
}

body.in-index .uc-pill,
body.in-index .uc-section-subtitle,
body.in-index .uc-partner-label,
body.in-index .homepage-blog-wrapper .homepage-group-title::before{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:var(--uc-pill-bg) !important;
  color:var(--uc-pill-fg) !important;
  font-family:var(--uc-pill-font) !important;
  font-size:var(--uc-pill-size) !important;
  font-weight:var(--uc-pill-weight) !important;
  font-style:italic !important;
  text-transform:uppercase !important;
  letter-spacing:0 !important;
  border-radius:999px !important;
  padding:var(--uc-pill-pad-v) var(--uc-pill-pad-h) !important;
  line-height:1 !important;
}

/* =========================
   Section spacing (layout)
========================= */

/* posuň BLOG blok níž od produktů */
body.in-index .homepage-blog-wrapper{
  margin-top: 48px !important;
}

/* vytáhni PARTNERSTVÍ blíž k blogu */
body.in-index .homepage-texts-wrapper{
  margin-top: 32px !important;
}

/* zmenši mega mezeru mezi blog a partnerství (když ji dělá wrapper) */
body.in-index .homepage-blog-wrapper.row.blog-wrapper{
  margin-bottom: 32px !important;
}
/* =========================
   HOME: remove TAB "OBJEVTE ULTRACOAT" bar completely
========================= */

/* schovej konkrétní tab link (podle href i data-testid) */
body.in-index a.shp-tab-link[href="#homepageProducts7"],
body.in-index a.shp-tab-link[data-testid="eshopHeader"]{
  display: none !important;
}

/* když je to poslední/ jediný tab, tak schovej celý tab strip */
body.in-index .shp-tabs-wrapper .shp-tabs,
body.in-index .homepage-tabs-wrapper .shp-tabs{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* často ten "pruh" dělá ještě wrapper okolo tabů */
body.in-index .shp-tabs-wrapper,
body.in-index .homepage-tabs-wrapper{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-top: 0 !important;
}

/* kdyby tam byl separator line */
body.in-index .shp-tabs-wrapper:before,
body.in-index .shp-tabs-wrapper:after,
body.in-index .homepage-tabs-wrapper:before,
body.in-index .homepage-tabs-wrapper:after{
  display: none !important;
  content: none !important;
}
/* =========================================
   HOME products: remove tab bar + add H1 title
========================================= */

/* 1) Hide the tab strip / link that creates the line+frame */
body.in-index .shp-tabs-wrapper,
body.in-index .homepage-tabs-wrapper,
body.in-index .shp-tabs,
body.in-index .shp-tabs-wrapper .shp-tabs,
body.in-index .homepage-tabs-wrapper .shp-tabs{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* kill the specific tab link if it still exists */
body.in-index a.shp-tab-link[href="#homepageProducts7"],
body.in-index a.shp-tab-link[data-testid="eshopHeader"]{
  display: none !important;
}

/* remove any leftover top/bottom separator line */
body.in-index .shp-tabs-wrapper:before,
body.in-index .shp-tabs-wrapper:after,
body.in-index .homepage-tabs-wrapper:before,
body.in-index .homepage-tabs-wrapper:after{
  display: none !important;
  content: none !important;
}

/* 2) Add our own H1 "OBJEVTE ULTRACOAT" above the products grid */
body.in-index #products-7{
  position: relative !important;
  padding-top: 56px !important; /* space for the inserted heading */
}

body.in-index #products-7:before{
  content: "OBJEVTE ULTRACOAT" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  text-align: center !important;

  font-family: "Staff X Wide", sans-serif !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  font-size: 34px !important;
  line-height: 1.05 !important;
  color: #111 !important;
}
/* ULTRACOAT LIFE pill (jen vzhled, nic nemažeme) */
body.in-index .homepage-blog-wrapper .homepage-group-title::before{
  content:"ULTRACOAT LIFE" !important;
  display:inline-block !important;
  padding:6px 26px !important;
  border-radius:999px !important;
  background:#000 !important;
  color:#0BBF59 !important;

  font-family:"Staff X Wide", sans-serif !important;
  font-weight:500 !important;
  font-style:italic !important;
  font-size:12px !important;
  line-height:1 !important;
  text-transform:uppercase !important;
}
/* ULTRACOAT LIFE pill – sjednotit s ostatními pill */
body.in-index .homepage-blog-wrapper .homepage-group-title::before{
  content:"ULTRACOAT LIFE" !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:6px 26px !important;
  border-radius:999px !important;

  background:#000 !important;
  color:#0BBF59 !important;

  font-family:"Staff X Wide", sans-serif !important;
  font-weight:500 !important;
  font-style:italic !important;
  font-size:12px !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  letter-spacing:0 !important;

  height:auto !important;
  box-shadow:none !important;
  border:0 !important;
}
body.in-index .homepage-blog-wrapper .homepage-group-title{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:16px !important;
  text-align:center !important;
}
/* ULTRACOAT LIFE pill – stejná jako PARTNERSTVÍ */
body.in-index .homepage-blog-wrapper .homepage-group-title::before{
  content:"ULTRACOAT LIFE" !important;
  display:inline-block !important;

  padding:6px 26px !important;
  border-radius:999px !important;

  background:#000000 !important;
  color:#0bbf59 !important;

  font-family:"Work Sans", sans-serif !important;
  font-size:14px !important;
  font-weight:800 !important;
  font-style:italic !important;
  letter-spacing:0em !important;
  text-transform:uppercase !important;

  margin-bottom:22px !important;
}
body.in-index .homepage-blog-wrapper .homepage-group-title{
  text-align:center !important;
}
/* BLOG title stack (pill nad nadpisem) */
body.in-index .homepage-blog-wrapper .homepage-group-title{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* ULTRACOAT LIFE pill – pixel copy PARTNERSTVÍ */
body.in-index .homepage-blog-wrapper .homepage-group-title::before{
  all: unset !important;                 /* <- zabije styly šablony */
  content: "ULTRACOAT LIFE" !important;

  display: inline-block !important;
  padding: 6px 26px !important;
  border-radius: 999px !important;

  background: #000000 !important;
  color: #0bbf59 !important;

  font-family: "Work Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  font-style: italic !important;
  letter-spacing: 0em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;

  margin-bottom: 22px !important;

  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
}
body.in-index .homepage-blog-wrapper .homepage-group-title::before,
body.in-index .homepage-blog-wrapper .homepage-group-title::after{
  content: none !important;
  display: none !important;
}
body.in-index .homepage-blog-wrapper .homepage-group-title{
  text-align: center !important;
}
body.in-index .homepage-blog-wrapper .uc-pill{
  margin-left: auto;
  margin-right: auto;
}
body.in-index .homepage-blog-wrapper .homepage-group-title::before,
body.in-index .homepage-blog-wrapper .homepage-group-title::after{
  content: none !important;
  display: none !important;
}
/* FINAL HOTFIX – BLOG pill (brandbook green + spacing) */
body.in-index .homepage-blog-wrapper .uc-pill{
  color: #01df82 !important;      /* JEDINÁ SPRÁVNÁ ZELENÁ */
  margin-bottom: 10px !important; /* stáhne pilulku k BLOG */
}
:root { --uc-green: #01df82; }

.pill, .badge, .tag,
.button-primary, .btn-primary,
body.in-index .homepage-blog-wrapper .uc-pill{
  color: var(--uc-green) !important;
  border-color: var(--uc-green) !important;
}
/* spacing mezi ULTRACOAT LIFE a BLOG – stejné jako pill + H1 */
body.in-index .homepage-blog-wrapper .uc-pill{
  margin-bottom: 22px !important;
}
/* BLOG spacing – sjednotit s pill + H1 */
body.in-index .homepage-blog-wrapper .uc-pill{
  margin-bottom: 22px !important;   /* správná mezera z pilulky */
}

body.in-index .homepage-blog-wrapper .homepage-group-title{
  margin-top: 0 !important;         /* zabít extra mezeru nad BLOG */
}
/* =========================
   MOBILE MENU – QUICK STABILIZER
   ========================= */
@media (max-width: 768px){

  /* zabránit horizontálnímu scrollu kvůli menu/backgroundům */
  html, body{
    overflow-x: hidden !important;
  }

  /* aby menu nepřetékalo mimo viewport */
  .navigation,
  .navigation *{
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* dlouhé položky zalomit místo přetečení */
  .navigation a{
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* dropdowny a jejich wrappery ať mají plnou šířku */
  .navigation ul,
  .navigation li,
  .navigation .submenu,
  .navigation .sub-menu{
    width: 100% !important;
  }

  /* když je header fixní, ať nic nepřekrývá obsah */
  header, .header{
    max-width: 100% !important;
  }
}
/* =========================
   MOBILE HOTFIX (overflow + spacing + pills)
   ========================= */
@media (max-width: 768px){

  /* 1) STOP horizontálnímu přetékání */
  html, body{
    overflow-x: hidden !important;
  }

  /* 2) Všechny texty se musí umět zalomit */
  h1,h2,h3,h4,h5,h6,
  .h1,.h2,.h3,.h4,.h5,.h6,
  p, a, span, div{
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }

  /* 3) Titulky byly moc velké – zmenšit a dát normální line-height */
  h1, .h1{
    font-size: clamp(28px, 9vw, 44px) !important;
    line-height: 1.05 !important;
  }
  h2, .h2{
    font-size: clamp(24px, 8vw, 38px) !important;
    line-height: 1.08 !important;
  }
  h3, .h3, h4, .h4{
    font-size: clamp(20px, 7vw, 32px) !important;
    line-height: 1.1 !important;
  }

  /* 4) “Objevte Ultracoat” nalepené na produktech – přidat mezeru mezi sekcema */
  .index-content-wrapper,
  .index-content-wrapper .banners-row,
  .index-content-wrapper .body-banners,
  .index-content-wrapper .products,
  .index-content-wrapper .products-block{
    margin-bottom: 40px !important;
  }

  /* 5) Blog pilulka vlevo – vycentrovat a omezit šířku */
  body.in-index .homepage-blog-wrapper{
    text-align: center !important;
  }
  body.in-index .homepage-blog-wrapper .uc-pill{
    display: block !important;
    width: fit-content !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 auto 22px !important; /* stejné jako pill + H1 */
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* 6) Uvítací pilulka (INOVATIVNÍ KOSMETIKA...) – aby nepřetékala z obrazovky */
  body.in-index .welcome-wrapper div[style*="border-radius:999px"],
  body.in-index .homepage-texts-wrapper div[style*="border-radius:999px"]{
    display: block !important;
    width: fit-content !important;
    max-width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* 7) CTA tlačítka – ať se vejdou a nevypadají debilně */
  .btn, .button, button, input[type="submit"], a.btn{
    max-width: calc(100% - 32px) !important;
    box-sizing: border-box !important;
  }
}
/* =========================
   MOBILE FIX v2 – stop rozpad slov + lepší sizing
   ========================= */
@media (max-width: 768px){

  /* 0) jistota: žádný boční scroll */
  html, body{ overflow-x:hidden !important; }

  /* 1) NADPISY – NIKDY nelámat uprostřed slov (zruší OBJE. / VTE apod.) */
  h1,h2,h3,h4,h5,h6,
  .h1,.h2,.h3,.h4,.h5,.h6{
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: manual !important;
  }

  /* 2) CTA / BUTTONS – držet na 1 řádek + trochu menší font */
  .btn, .button, button, input[type="submit"], a.btn{
    white-space: nowrap !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    max-width: calc(100% - 32px) !important;
    box-sizing: border-box !important;
  }

  /* 3) PRODUKTY – ať se “DETAIL” nerozpadá */
  .products .btn,
  .product .btn,
  .products a.btn{
    white-space: nowrap !important;
  }

  /* 4) HOME – “OBJEVTE ULTRACOAT” nesmí lézt do gridu */
  .index-content-wrapper .homepage-group-title,
  .index-content-wrapper .homepage-group-title.h4,
  .index-content-wrapper h2,
  .index-content-wrapper h3{
    margin-bottom: 24px !important;
  }
  .products,
  .products-block,
  .products-wrapper{
    margin-top: 16px !important;
  }

  /* 5) MOBILE TYPO – zmenšit obří titulky (hlavně košík / prázdný košík) */
  h1, .h1{ font-size: clamp(26px, 8.5vw, 40px) !important; }
  h2, .h2{ font-size: clamp(22px, 7.5vw, 34px) !important; }
  h3, .h3, h4, .h4{ font-size: clamp(18px, 6.5vw, 28px) !important; }

  /* 6) BLOG pill vycentrovat na mobilu (kdyby ujížděla vlevo) */
  body.in-index .homepage-blog-wrapper .uc-pill{
    display:block !important;
    width: fit-content !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 auto 22px !important;
    text-align:center !important;
    box-sizing: border-box !important;
  }
}
/* =========================
   MOBILE FIX v3 – OBJEVTE + CTA DETAIL center
   ========================= */
@media (max-width: 768px){

  /* --- 1) “OBJEVTE ULTRACOAT” – zabránit rozsekání a dát spacing nad produkty --- */
  body.in-index .products-wrapper .homepage-group-title,
  body.in-index .products-block .homepage-group-title,
  body.in-index .homepage-products-wrapper .homepage-group-title,
  body.in-index .body-banners .homepage-group-title,
  body.in-index .index-content-wrapper .homepage-group-title{
    display: block !important;
    text-align: center !important;

    /* žádné hyphen/rozsekávání uvnitř slov */
    hyphens: none !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;

    /* ať se to neláme “divně” */
    line-height: 1.02 !important;
    margin: 0 16px 28px !important;   /* důležitá mezera POD nadpisem */
    position: relative !important;
    z-index: 2 !important;
  }

  /* přidej prostor NAD grid produktů, aby nadpis nelezel do karet */
  body.in-index .products,
  body.in-index .products-block,
  body.in-index .products-wrapper{
    margin-top: 18px !important;
    padding-top: 18px !important;
  }

  /* --- 2) CTA “DETAIL” v produktech – vycentrovat text uvnitř pilulky --- */
  body.in-index .products a.btn,
  body.in-index .products .btn,
  body.in-index .products-block a.btn,
  body.in-index .products-block .btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;

    white-space: nowrap !important;
    line-height: 1 !important;
  }
}
/* MOBILE – “OBJEVTE ULTRACOAT” je dvakrát, nech jen první */
@media (max-width: 768px){

  /* v rámci stejné sekce schovej všechny další group-title po prvním */
  body.in-index .products-wrapper .homepage-group-title ~ .homepage-group-title,
  body.in-index .products-block .homepage-group-title ~ .homepage-group-title,
  body.in-index .homepage-products-wrapper .homepage-group-title ~ .homepage-group-title,
  body.in-index .index-content-wrapper .homepage-group-title ~ .homepage-group-title{
    display: none !important;
  }
}
/* =========================
   MOBILE: kill "OBJEVTE ULTRACOAT" graphic behind products
   (non-selectable = background/pseudo)
   ========================= */
@media (max-width: 768px){

  /* 1) Vypnout pseudo-elementy v okolí produktové sekce */
  body.in-index .products-wrapper::before,
  body.in-index .products-wrapper::after,
  body.in-index .products-block::before,
  body.in-index .products-block::after,
  body.in-index .homepage-products-wrapper::before,
  body.in-index .homepage-products-wrapper::after,
  body.in-index .index-content-wrapper::before,
  body.in-index .index-content-wrapper::after{
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* 2) Vypnout background obrázky na těchto wrappech (často je to tady) */
  body.in-index .products-wrapper,
  body.in-index .products-block,
  body.in-index .homepage-products-wrapper,
  body.in-index .index-content-wrapper{
    background-image: none !important;
  }

  /* 3) Pojistka: produkty vždy nad vším */
  body.in-index .products,
  body.in-index .products-block,
  body.in-index .products-wrapper{
    position: relative !important;
    z-index: 5 !important;
  }
}
/* ===============================
   GLOBAL DARK MODE
   VŠE KROMĚ HOMEPAGE
   =============================== */

body:not(.in-index) {
    background: #000 !important;
    color: #fff !important;
}

/* hlavní obsah */
body:not(.in-index) #content-wrapper,
body:not(.in-index) .content-wrapper,
body:not(.in-index) .content-wrapper-in,
body:not(.in-index) main,
body:not(.in-index) .content-inner,
body:not(.in-index) article {
    background: #000 !important;
    color: #fff !important;
}

/* nadpisy */
body:not(.in-index) h1,
body:not(.in-index) h2,
body:not(.in-index) h3,
body:not(.in-index) h4,
body:not(.in-index) h5,
body:not(.in-index) h6 {
    color: #fff !important;
}

/* běžný text */
body:not(.in-index) p,
body:not(.in-index) span,
body:not(.in-index) li,
body:not(.in-index) label {
    color: #fff !important;
}

/* odkazy */
body:not(.in-index) a {
    color: #01df82;
}
body:not(.in-index) a:hover {
    color: #01df82;
    opacity: .85;
}

/* breadcrumbs */
body:not(.in-index) .breadcrumbs {
    background: #000 !important;
}
body:not(.in-index) .breadcrumbs * {
    color: #aaa !important;
}

/* formuláře */
body:not(.in-index) input,
body:not(.in-index) textarea,
body:not(.in-index) select {
    background: #111 !important;
    color: #fff !important;
    border-color: #333 !important;
}

/* boxy, sekce */
body:not(.in-index) .box,
body:not(.in-index) .pageArticleDetail,
body:not(.in-index) .pageArticleDetail > * {
    background: #000 !important;
}

/* horizontální oddělovače */
body:not(.in-index) hr {
    border-color: #222;
}
/* ===== SHOP/LISTING – FORCE WHITE PRODUCT CARDS ===== */
/* pokrývá kategorie, vyhledávání, štítky, výrobce atd. */
body:not(.in-index) .products-block div.p,
body:not(.in-index) .products-page div.p,
body:not(.in-index) .products-page .products-block div.p{
  background:#fff !important;
  border:1px solid #e6e6e6 !important;
}

body:not(.in-index) .products-block div.p .p-in,
body:not(.in-index) .products-page div.p .p-in,
body:not(.in-index) .products-page .products-block div.p .p-in{
  background:#fff !important;
  color:#111 !important;
}

/* texty na kartě černě */
body:not(.in-index) .products-block div.p .name,
body:not(.in-index) .products-block div.p .name a,
body:not(.in-index) .products-block div.p .price,
body:not(.in-index) .products-block div.p .availability,
body:not(.in-index) .products-block div.p .availability-value,
body:not(.in-index) .products-block div.p a{
  color:#111 !important;
}
/* ===== LISTING CONTROLS / FILTERS – GREEN + NO WHITE BOXES ===== */
body:not(.in-index) .listingControls,
body:not(.in-index) #filters-wrapper,
body:not(.in-index) .filters-wrapper{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* linky řazení */
body:not(.in-index) .listingControls a,
body:not(.in-index) .listingControls a span{
  color:#01df82 !important;
}

/* aktivní/hover */
body:not(.in-index) .listingControls a:hover,
body:not(.in-index) .listingControls a.active,
body:not(.in-index) .listingControls .active a{
  color:#01df82 !important;
}

/* selecty (Nejprodávanější apod.) – text i okraj zeleně */
body:not(.in-index) .listingControls select,
body:not(.in-index) .listingControls .form-control,
body:not(.in-index) .listingControls .selectbox,
body:not(.in-index) .listingControls .selectbox__value{
  color:#01df82 !important;
  border-color:#01df82 !important;
  background: transparent !important;
  box-shadow:none !important;
}
/* ===== MOBILE MENU – FORCE SUBMENU COLORS ===== */
@media (max-width: 991px){

  /* pozadí submenu */
  #navigation .menu-level-2,
  #navigation .navigation-in .menu-level-2,
  .menu-helper .menu-level-2{
    background:#000 !important;
  }

  /* text submenu */
  #navigation .menu-level-2 a,
  #navigation .menu-level-2 a span,
  #navigation .navigation-in .menu-level-2 a,
  #navigation .navigation-in .menu-level-2 a span,
  .menu-helper .menu-level-2 a,
  .menu-helper .menu-level-2 a span{
    color:#fff !important;
  }

  /* hover/active zeleně */
  #navigation .menu-level-2 a:hover,
  #navigation .menu-level-2 a:hover span,
  #navigation .menu-level-2 .active > a,
  #navigation .menu-level-2 .active > a span{
    color:#01df82 !important;
  }
}
/* ===== PRODUCT CARDS – BLACK TEXT ON WHITE ===== */
body:not(.in-index) .products-block div.p,
body:not(.in-index) .products-block div.p *{
  color:#111 !important;
}

/* názvy produktů */
body:not(.in-index) .products-block .name,
body:not(.in-index) .products-block .name a{
  color:#111 !important;
}

/* dostupnost + cena */
body:not(.in-index) .products-block .availability,
body:not(.in-index) .products-block .availability-value,
body:not(.in-index) .products-block .price{
  color:#111 !important;
}
/* ===== LISTING FILTERS / SORTING – NO BOXES ===== */
body:not(.in-index) .listingControls,
body:not(.in-index) .listSorting,
body:not(.in-index) .listSorting_controls,
body:not(.in-index) #filters-wrapper{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
/* text filtrů / řazení */
body:not(.in-index) .listSorting_controls a,
body:not(.in-index) .listSorting_controls button,
body:not(.in-index) .listSorting_controls span{
  color:#01df82 !important;
  background:transparent !important;
  border:0 !important;
}

/* aktivní stav */
body:not(.in-index) .listSorting_controls .active,
body:not(.in-index) .listSorting_controls .active a,
body:not(.in-index) .listSorting_controls .active button{
  color:#01df82 !important;
}

/* hover */
body:not(.in-index) .listSorting_controls a:hover,
body:not(.in-index) .listSorting_controls button:hover{
  color:#01df82 !important;
}
body:not(.in-index) .btn-filter,
body:not(.in-index) .filters-trigger,
body:not(.in-index) #open-filters{
  background:#01df82 !important;
  color:#000 !important;
  border:0 !important;
}
body:not(.in-index) .products-block div.p{
  box-shadow:0 0 0 1px #e6e6e6 inset !important;
}
/* ===== SHOP – SORTING BUTTONS (FILTERS) ===== */

/* základ */
body:not(.in-index) .listSorting__control{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  color: #01df82 !important;          /* brand green */
  font-weight: 600;
  text-transform: none;
  padding: 6px 14px;
}

/* hover */
body:not(.in-index) .listSorting__control:hover{
  color: #0bbf59 !important;          /* tmavší green */
}

/* aktivní stav */
body:not(.in-index) .listSorting__control.active,
body:not(.in-index) .listSorting__control[aria-current="true"]{
  color: #01df82 !important;
  text-decoration: underline;         /* jemná indikace, žádný box */
}

/* focus (klávesnice / accessibility) */
body:not(.in-index) .listSorting__control:focus-visible{
  outline: none;
  color: #0bbf59 !important;
}
/* ===== PRODUCT LISTING – WHITE CARD, DARK TEXT ===== */

body.in-shop .products .product,
body.in-category .products .product {
  background: #ffffff !important;
  color: #000000 !important;
}

/* název produktu */
body.in-shop .products .name,
body.in-shop .products .name a,
body.in-category .products .name,
body.in-category .products .name a {
  color: #000000 !important;
}

/* cena */
body.in-shop .products .price,
body.in-category .products .price {
  color: #000000 !important;
}
/* ===== PRODUCT DETAIL – FORCE H1 GREEN (brand) ===== */
body:not(.in-index) .p-detail .p-detail-inner-header h1,
body:not(.in-index) .p-detail h1,
body:not(.in-index).type-detail .p-detail h1,
body:not(.in-index).type-product .p-detail h1 {
  color: #01df82 !important;
}

/* kdyby byl H1 uvnitř odkazu nebo spanů (některé šablony to tak dělají) */
body:not(.in-index) .p-detail .p-detail-inner-header h1 * {
  color: #01df82 !important;
}
/* ===== MAIN MENU – HOVER & ACTIVE (brand green) ===== */

/* top-level menu položky */
#navigation .menu-level-1 > li > a:hover,
#navigation .menu-level-1 > li > a:focus,
#navigation .menu-level-1 > li.active > a {
  color: #01df82 !important;
}

/* text uvnitř <b> nebo <span> */
#navigation .menu-level-1 > li > a:hover *,
#navigation .menu-level-1 > li.active > a * {
  color: #01df82 !important;
}

/* dropdown (submenu) položky */
#navigation .menu-level-2 li a:hover,
#navigation .menu-level-2 li a:focus,
#navigation .menu-level-2 li.active a {
  color: #01df82 !important;
}

/* případné podtržení / border (některé varianty šablony) */
#navigation .menu-level-1 > li > a::after {
  background-color: #01df82 !important;
}
/* ===== MOBILE MENU ===== */
.menu-helper .menu-level-1 li a:hover,
.menu-helper .menu-level-1 li a:focus,
.menu-helper .menu-level-1 li.active a {
  color: #01df82 !important;
}
/* MENU hover / active = brand green */
#header .navigation-in a:hover,
#header .navigation-in a:focus,
#header .navigation-in .menu-item > a:hover,
#header .navigation-in .menu-item > a:focus,
#header .navigation-in li.menu-item.active > a,
#header .navigation-in li.menu-item > a[aria-expanded="true"]{
  color:#01df82 !important;
}

/* šipka u dropdownu, když hoveruješ */
#header .navigation-in .submenu-arrow,
#header .navigation-in .menu-item > a:hover .submenu-arrow{
  border-top-color:#01df82 !important;
}
/* BIG H1 like PL (only non-homepage) */
body:not(.in-index) #content header[itemprop="headline"] h1,
body:not(.in-index) #content .category-header h1,
body:not(.in-index) #content .category-header h2{
  color:#fff !important;
  text-transform:uppercase;
  font-weight:900 !important;
  font-style:italic;
  letter-spacing:0;
  line-height:0.92;
  text-align:left !important;
  margin:30px 0 22px !important;

  /* responsive size */
  font-size:clamp(42px, 6.2vw, 110px) !important;
}

/* aby to sedělo “nalevo jako poláci” i když je wrapper centrovanej */
body:not(.in-index) #content header[itemprop="headline"],
body:not(.in-index) #content .category-header{
  text-align:left !important;
}

/* na mobilu ať to není rozbitý a má dýchání */
@media (max-width: 767px){
  body:not(.in-index) #content header[itemprop="headline"] h1,
  body:not(.in-index) #content .category-header h1,
  body:not(.in-index) #content .category-header h2{
    font-size:clamp(34px, 10vw, 56px) !important;
    margin:18px 0 14px !important;
    line-height:0.95;
  }
}
/* BLOG – sjednocení H1 s ostatními podstránkami */
body.in-blog h1,
body.in-blog .content h1 {
  text-align: left !important;
  font-size: clamp(42px, 6vw, 92px) !important;
  font-weight: 900 !important;
  font-style: italic;
  letter-spacing: 0.02em;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* odsazení shora – stejné jako B2B / Kontakty */
body.in-blog .content-inner {
  padding-top: 60px;
}

/* mobil */
@media (max-width: 768px) {
  body.in-blog h1,
  body.in-blog .content h1 {
    font-size: 42px !important;
  }
}
/* Hlavní menu – hover barva */
#navigation a:hover,
#navigation a:focus,
#navigation .menu-item > a:hover {
  color: #01df82 !important;
}

/* aktivní položka */
#navigation .active > a {
  color: #01df82 !important;
}
/* dropdown pozadí */
.menu-level-2 {
  background: #000 !important;
}

/* položky submenu */
.menu-level-2 a {
  color: #fff !important;
}

/* hover submenu */
.menu-level-2 a:hover {
  color: #01df82 !important;
}
/* mobilní menu text */
@media (max-width: 991px) {
  .menu-helper,
  .menu-helper a {
    color: #fff !important;
  }

  .menu-helper a:hover {
    color: #01df82 !important;
  }
}