/* ===================================================================
   JOMI Security — "Tech-noir hybrid" dizajn-systém (CELÝ WEB)
   Default = DARK (:root). [data-theme="light"] = LIGHT.
   Obsahuje: tokeny, flip globálnych farieb Astra/Elementor, header/footer,
   blog (článok/výpis), globálny re-skin Elementor/Astra widgetov.
   =================================================================== */

/* ---------- DARK (default) ---------- */
:root{
  --page:#0b1220; --surface:#0e1830; --surface-2:#111c30;
  --text:#d8e3f4; --text-strong:#ffffff; --muted:#9fb1cc; --line:rgba(255,255,255,.10);
  --brand:#2f9bff; --accent:#2f9bff; --cyan:#38e1ff; --eye-hi:#a3d9f0; --logo-ink:#ffffff;
  --head-bg:rgba(8,14,28,.72); --head-bd:rgba(255,255,255,.08); --head-link:#cdd9ec; --head-link-h:#ffffff;
  --nav-mobile-bg:rgba(8,14,28,.97);
  --hero-from:#0a1020; --hero-to:#0e1c38; --hero-grid:rgba(255,255,255,.04);
  --hero-glow1:rgba(47,155,255,.28); --hero-glow2:rgba(56,225,255,.16);
  --hero-h1a:#ffffff; --hero-h1b:#bcd6f5; --hero-eyebrow:#7fc0ff; --hero-dek:#aebfd8; --hero-meta:#9fb1cc;
  --hero-shot-bd:rgba(120,170,255,.35); --hero-shot-shadow:0 30px 80px -20px rgba(0,0,0,.7), 0 0 80px -20px rgba(47,155,255,.5);
  --rec-bg:linear-gradient(180deg,#0f1c33,#0c1730); --rec-bd:#23406b;
  --card-bg:rgba(255,255,255,.03); --card-bd:rgba(255,255,255,.09); --pill-bg:rgba(8,14,28,.6); --pill-tx:#eaf4ff;
  --toc-line:rgba(255,255,255,.12); --toc-link:#8aa0c0; --toc-active:#7fc0ff;
  --chip-bg:rgba(255,255,255,.05); --chip-tx:#cdd9ec; --chip-bd:rgba(255,255,255,.12);
  --faq-ic-bg:#0f1c33; --faq-ic-bd:#2f9bff55;
  --ff-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --ff-body:"Roboto",system-ui,-apple-system,sans-serif;
  --wrap:1180px; --read:760px; --r:16px;

  /* === FLIP globálnych farieb Astra/Elementor (deň/noc na celom webe) === */
  --ast-global-color-0:#2f9bff; --ast-global-color-1:#38e1ff;
  --ast-global-color-2:#e6eefb; --ast-global-color-3:#cbd6e8;
  --ast-global-color-4:#0e1830; --ast-global-color-5:#0b1220;
  --ast-global-color-6:#2a3a55; --ast-global-color-7:#e6eefb;
  --e-global-color-primary:#2f9bff; --e-global-color-secondary:#9fb1cc;
  --e-global-color-text:#d8e3f4; --e-global-color-accent:#38e1ff;
}

/* ---------- LIGHT ---------- */
html[data-theme="light"]{
  --page:#eef3fb; --surface:#ffffff; --surface-2:#f6f9fe;
  --text:#28374e; --text-strong:#0c1730; --muted:#5b6b82; --line:#e4ebf5;
  --brand:#1577bd; --accent:#1c77bd; --cyan:#2f9bff; --eye-hi:#a3d9f0; --logo-ink:#0c1320;
  --head-bg:rgba(255,255,255,.82); --head-bd:rgba(12,30,60,.08); --head-link:#334155; --head-link-h:#0c1730;
  --nav-mobile-bg:rgba(255,255,255,.97);
  --hero-from:#eaf2fd; --hero-to:#d7e6fb; --hero-grid:rgba(20,60,120,.05);
  --hero-glow1:rgba(28,119,189,.16); --hero-glow2:rgba(47,155,255,.10);
  --hero-h1a:#0c1730; --hero-h1b:#1c77bd; --hero-eyebrow:#1c77bd; --hero-dek:#475569; --hero-meta:#5b6b82;
  --hero-shot-bd:rgba(28,119,189,.28); --hero-shot-shadow:0 30px 70px -28px rgba(20,50,90,.4), 0 0 60px -28px rgba(47,155,255,.35);
  --rec-bg:linear-gradient(180deg,#f2f8ff,#ffffff); --rec-bd:#d7e9ff;
  --card-bg:#ffffff; --card-bd:#e4ebf5; --pill-bg:rgba(255,255,255,.85); --pill-tx:#1c77bd;
  --toc-line:#e4ebf5; --toc-link:#7286a3; --toc-active:#1c77bd;
  --chip-bg:#eef3fb; --chip-tx:#33425b; --chip-bd:#dbe6f5;
  --faq-ic-bg:#f2f8ff; --faq-ic-bd:#cfe4ff;
  /* svetlá paleta globálnych farieb (blízko pôvodnej značky) */
  --ast-global-color-0:#1c77bd; --ast-global-color-1:#0f5e9c;
  --ast-global-color-2:#1e293b; --ast-global-color-3:#334155;
  --ast-global-color-4:#F0F5FA; --ast-global-color-5:#ffffff;
  --ast-global-color-6:#d1d5db; --ast-global-color-7:#111111;
  --e-global-color-primary:#1c77bd; --e-global-color-secondary:#5b6b82;
  --e-global-color-text:#28374e; --e-global-color-accent:#2f9bff;
}

/* ============ BASE ============ */
body.jomi-redesign{margin:0; font-family:var(--ff-body); color:var(--text); background:var(--page);
  line-height:1.7; font-size:17px; -webkit-font-smoothing:antialiased; transition:background .3s ease, color .3s ease}
body.jomi-redesign a{color:inherit}
.jomi-redesign img{max-width:100%}
.jomi-head .wrap, .jomi-foot .wrap, .hero .wrap, .list-hero .wrap, .section .wrap, .feed .wrap{max-width:var(--wrap); margin:0 auto; padding-left:24px; padding-right:24px}
.skip-link{position:absolute; left:-9999px}

/* ============ PROGRESS ============ */
#progress{position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--accent),var(--cyan));
  z-index:120; box-shadow:0 0 12px var(--cyan); transition:width .08s linear}

/* ============ LOGO ============ */
.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.logo-img{height:30px; width:auto; display:block}
.logo-img.for-light{display:none}
html[data-theme="light"] .logo-img.for-dark{display:none}
html[data-theme="light"] .logo-img.for-light{display:block}
html .jomi-foot .logo-img.for-dark{display:block}
html .jomi-foot .logo-img.for-light{display:none}
.brand .sec{font-family:var(--ff-display); font-weight:700; font-size:19px; letter-spacing:.3px; color:var(--brand)}

/* ============ HEADER (WP menu) ============ */
.jomi-head{position:sticky; top:0; z-index:100; background:var(--head-bg);
  backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--head-bd); transition:background .3s ease}
.jomi-head .wrap{display:flex; align-items:center; gap:24px; height:68px}
.nav{display:flex; gap:6px; margin-left:auto; align-items:center}
.nav-menu{display:flex; gap:4px; align-items:center; list-style:none; margin:0; padding:0}
.nav-menu li{position:relative}
.nav-menu>li>a{display:block; color:var(--head-link); font-size:14.5px; font-weight:500; padding:9px 13px; border-radius:10px; text-decoration:none; transition:.18s; white-space:nowrap}
.nav-menu>li>a:hover{color:var(--head-link-h); background:rgba(127,160,200,.12)}
.nav-menu>li.current-menu-item>a,.nav-menu>li.current-menu-parent>a{color:var(--head-link-h)}
.nav-menu .sub-menu{position:absolute; top:calc(100% + 8px); left:0; min-width:230px; list-style:none; margin:0; padding:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 50px -24px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:.18s; z-index:10}
.nav-menu li:hover>.sub-menu{opacity:1; visibility:visible; transform:none}
.nav-menu .sub-menu a{display:block; color:var(--text); font-size:14px; padding:9px 12px; border-radius:9px; text-decoration:none}
.nav-menu .sub-menu a:hover{background:var(--chip-bg); color:var(--text-strong)}
.nav-menu .menu-item-has-children>a::after{content:"▾"; margin-left:6px; font-size:10px; opacity:.7}
.nav .zone{margin-left:6px; display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px;
  color:var(--head-link-h); font-weight:600; font-size:13.5px; text-decoration:none;
  background:linear-gradient(180deg,rgba(47,155,255,.16),rgba(47,155,255,.05)); border:1px solid rgba(47,155,255,.42)}
.nav .zone i{width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan)}
.nav .zone .soon{font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); border:1px solid var(--head-bd); padding:1px 6px; border-radius:6px}
.theme-tg{margin-left:8px; display:inline-flex; padding:3px; border-radius:999px; background:rgba(127,160,200,.12); border:1px solid var(--head-bd)}
.theme-tg button{display:grid; place-items:center; width:32px; height:30px; padding:0!important; min-width:0; line-height:0; box-sizing:border-box; border:0; cursor:pointer; background:none; color:var(--head-link); border-radius:999px; transition:.18s}
.theme-tg button svg{width:17px; height:17px}
.theme-tg button.on{color:#03142a; background:linear-gradient(135deg,var(--cyan),var(--accent)); box-shadow:0 0 14px -2px var(--accent)}
.menu-x{display:none; margin-left:auto; width:42px; height:38px; border:1px solid var(--head-bd); border-radius:10px; background:rgba(127,160,200,.12); cursor:pointer; flex-direction:column; gap:4px; align-items:center; justify-content:center}
.menu-x span{display:block; width:18px; height:2px; background:var(--head-link-h); border-radius:2px}

/* ============ HERO (článok) ============ */
.hero{position:relative; background:var(--hero-from); color:var(--hero-meta); overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; background:
  radial-gradient(900px 360px at 78% -10%, var(--hero-glow1), transparent 60%),
  radial-gradient(700px 320px at 8% 110%, var(--hero-glow2), transparent 60%),
  linear-gradient(180deg,var(--hero-from),var(--hero-to))}
.hero::after{content:""; position:absolute; inset:0; opacity:.6; pointer-events:none;
  background-image:linear-gradient(var(--hero-grid) 1px,transparent 1px),linear-gradient(90deg,var(--hero-grid) 1px,transparent 1px);
  background-size:46px 46px; mask-image:linear-gradient(180deg,#000,transparent 75%)}
.hero .wrap{position:relative; z-index:2; padding-top:64px; padding-bottom:340px}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font:600 12px/1 var(--ff-body); letter-spacing:2px; text-transform:uppercase; color:var(--hero-eyebrow); margin-bottom:22px; flex-wrap:wrap}
.eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.eyebrow .mono{font-family:"Space Grotesk",monospace}
.hero h1{font:700 clamp(32px,5vw,56px)/1.06 var(--ff-display); letter-spacing:-.5px; margin:0 0 20px; max-width:20ch;
  background:linear-gradient(180deg,var(--hero-h1a),var(--hero-h1b)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .dek{font-size:18px; line-height:1.6; color:var(--hero-dek); max-width:60ch; margin:0 0 30px}
.hero .meta{display:flex; align-items:center; gap:18px; flex-wrap:wrap; color:var(--hero-meta); font-size:14px}
.authchip{display:inline-flex; align-items:center; gap:10px}
.avatar{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font:700 14px/1 var(--ff-display); color:#031022;
  background:linear-gradient(135deg,var(--cyan),var(--accent)); box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 0 22px -4px var(--accent)}
.authchip b{color:var(--hero-h1a); font-weight:600}
.authchip span{display:block; font-size:12px; color:var(--hero-meta)}
.hero .sep{width:1px; height:26px; background:var(--hero-shot-bd)}
.hero-shot{position:absolute; left:50%; bottom:-110px; transform:translateX(-50%); width:min(1060px,92%); height:clamp(240px,26vw,390px);
  border-radius:20px; z-index:3; background:#0c1730 center/cover no-repeat; border:1px solid var(--hero-shot-bd); box-shadow:var(--hero-shot-shadow); overflow:hidden}
.hero-shot::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(8,14,28,.45))}
.hero-shot img{width:100%; height:100%; object-fit:cover}

/* ============ ARTICLE LAYOUT (Elementor obsah vnútri .article) ============ */
.layout{display:grid; grid-template-columns:1fr; gap:0; padding:160px 0 40px; position:relative; background:var(--surface)}
.toc-rail{display:none}
.article{max-width:var(--read); margin:0 auto; padding:0 24px}
/* typografia tela — cieli reálne Elementor tagy vnútri .article */
.article h2{font:700 clamp(24px,3vw,32px)/1.18 var(--ff-display); color:var(--text-strong); letter-spacing:-.3px; margin:52px 0 14px; display:flex; gap:14px; align-items:baseline; scroll-margin-top:90px}
.article h2 .n{font:700 14px/1 var(--ff-display); color:var(--accent); border:1px solid var(--accent); border-radius:8px; padding:6px 8px; flex:none; box-shadow:0 0 0 3px rgba(47,155,255,.08)}
.article h3{font:600 21px/1.3 var(--ff-display); color:var(--text-strong); margin:34px 0 10px}
.article h4{font:600 13.5px/1.4 var(--ff-body); color:var(--accent); margin:24px 0 6px; text-transform:uppercase; letter-spacing:.6px}
.article p{margin:0 0 18px; color:var(--text)}
.article a:not(.card):not(.more){color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.article ul,.article ol{color:var(--text); margin:0 0 18px; padding-left:22px}
.article li{margin:0 0 8px}
.article img{border-radius:14px}
.article .elementor-widget-divider{margin:8px 0}
.hr-grad{height:1px; border:0; margin:40px 0; background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* Intro lead (prvý odsek tela — JS doplní triedu .lead) */
.article .lead{font-size:21px; line-height:1.65; color:var(--text); font-weight:400; margin:0 0 34px; padding-left:18px; border-left:3px solid var(--accent)}

/* ----- REC box „Odporúčanie JOMI" (JS prerobí text-editor na .rec) ----- */
.article .rec{position:relative; margin:34px 0; padding:24px 26px 24px 30px; border-radius:14px; background:var(--rec-bg); border:1px solid var(--rec-bd); box-shadow:0 10px 30px -18px rgba(47,155,255,.35); text-align:left}
.article .rec::before{content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:4px; background:linear-gradient(180deg,var(--cyan),var(--accent))}
.article .rec .lbl{display:inline-flex; align-items:center; gap:8px; font:700 12px/1 var(--ff-body); letter-spacing:1.2px; text-transform:uppercase; color:var(--accent); margin-bottom:10px}
.article .rec .lbl svg{width:15px;height:15px; flex:none}
.article .rec q{display:block; font-size:17.5px; line-height:1.6; font-style:italic; color:var(--text-strong); quotes:"„" "“"; margin:0}
.article .rec .by{display:flex; align-items:center; gap:11px; margin-top:16px}
.article .rec .by .avatar{width:40px;height:40px}
.article .rec .by b{font-weight:700; color:var(--text-strong)}
.article .rec .by span{display:block; font-size:13px; color:var(--muted)}

/* ----- PROD box „Produktové odporúčanie" (JS) ----- */
.article .prod{margin:34px 0; border-radius:16px; overflow:hidden; border:1px solid var(--card-bd); box-shadow:0 18px 50px -28px rgba(12,23,48,.5); text-align:left}
.article .prod .body.no-pic{grid-template-columns:1fr}
.article .prod .top{display:flex; align-items:center; gap:10px; padding:11px 18px; background:linear-gradient(90deg,#0e1c38,#13233f); color:#cfe3ff}
.article .prod .top .tag{font:700 11px/1 var(--ff-body); letter-spacing:1.4px; text-transform:uppercase; color:#7fc0ff}
.article .prod .top .model{margin-left:auto; font:700 12.5px/1 var(--ff-display); color:#eaf4ff; background:rgba(47,155,255,.18); border:1px solid rgba(47,155,255,.4); padding:6px 11px; border-radius:8px}
.article .prod .body{display:grid; grid-template-columns:150px 1fr; gap:20px; padding:20px; background:var(--surface); align-items:center}
.article .prod .body .pic{aspect-ratio:1; border-radius:12px; background:#0c1730 center/cover no-repeat; border:1px solid var(--line)}
.article .prod q{font-style:italic; font-size:16px; line-height:1.6; color:var(--text); display:block; margin:0; quotes:"„" "“"}
.article .prod .by{display:flex;align-items:center;gap:10px;margin-top:14px}
.article .prod .by b{color:var(--text-strong)}
.article .prod .by span{display:block;font-size:12.5px;color:var(--muted)}

/* ----- FAQ accordion (CSS pripravené; obsah generuje pipeline — Vlna B) ----- */
.article .faq{margin:18px 0}
.article .faq .it{border:1px solid var(--line); border-radius:12px; margin-bottom:12px; overflow:hidden; background:var(--surface); transition:.2s}
.article .faq .it.open{border-color:var(--accent); box-shadow:0 14px 34px -22px rgba(47,155,255,.5)}
.article .faq .q{display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer; border:0; background:none; padding:18px 20px; font:600 17px/1.4 var(--ff-display); color:var(--text-strong)}
.article .faq .q .ic{margin-left:auto; flex:none; width:26px; height:26px; border-radius:50%; position:relative; background:var(--faq-ic-bg); border:1px solid var(--faq-ic-bd); transition:.25s}
.article .faq .it.open .q .ic{background:var(--accent); border-color:var(--accent); transform:rotate(180deg)}
.article .faq .q .ic::before,.article .faq .q .ic::after{content:""; position:absolute; left:50%; top:50%; width:11px; height:2px; background:var(--accent); transform:translate(-50%,-50%); border-radius:2px; transition:.25s}
.article .faq .q .ic::after{transform:translate(-50%,-50%) rotate(90deg)}
.article .faq .it.open .q .ic::before,.article .faq .it.open .q .ic::after{background:#fff}
.article .faq .it.open .q .ic::after{transform:translate(-50%,-50%) rotate(0)}
.article .faq .a{max-height:0; overflow:hidden; transition:max-height .3s ease}
.article .faq .a p{margin:0; padding:0 20px 20px; color:var(--muted)}

/* author cards */
.authors{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:38px 0}
.acard{display:flex; gap:14px; padding:20px; border-radius:16px; background:var(--surface-2); border:1px solid var(--line)}
.acard .avatar{width:54px;height:54px; font-size:18px; flex:none}
.acard h5{margin:0 0 3px; font:700 16px/1.2 var(--ff-display); color:var(--text-strong)}
.acard .role{font-size:12.5px; color:var(--accent); font-weight:600; margin-bottom:7px; text-transform:uppercase; letter-spacing:.4px}
.acard p{font-size:13.5px; line-height:1.55; color:var(--muted); margin:0}

/* ============ SECTIONS / RELATED / CARDS ============ */
.section{padding:54px 0}
.section.related{background:var(--page); position:relative; overflow:hidden}
.section.related::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 300px at 85% -10%,rgba(47,155,255,.14),transparent 60%)}
.section .wrap{position:relative; z-index:2}
.shead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px}
.shead h2{font:700 clamp(24px,3vw,32px)/1.1 var(--ff-display); margin:0; letter-spacing:-.4px; color:var(--text-strong)}
.shead .k{font:600 12px/1 var(--ff-body); letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin-bottom:10px}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{border-radius:16px; overflow:hidden; background:var(--card-bg); border:1px solid var(--card-bd); transition:.25s; position:relative; text-decoration:none; display:block}
.card:hover{transform:translateY(-6px); border-color:var(--accent); box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.card .ph{aspect-ratio:16/10; background:#0c1730 center/cover no-repeat; position:relative}
.card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,14,28,.7))}
.card .pill{position:absolute; z-index:2; top:12px; left:12px; font:600 11px/1 var(--ff-body); letter-spacing:.5px; text-transform:uppercase; color:var(--pill-tx); background:var(--pill-bg); border:1px solid rgba(47,155,255,.4); padding:6px 10px; border-radius:8px; backdrop-filter:blur(4px)}
.card .cb{padding:16px 16px 18px}
.card h3{font:600 17px/1.32 var(--ff-display); color:var(--text-strong); margin:0 0 10px}
.card .more{display:inline-flex; align-items:center; gap:7px; color:var(--accent); font-size:13.5px; font-weight:600}
.card .more svg{width:15px;height:15px; flex:none; transition:.2s}
.card:hover .more svg{transform:translateX(4px)}

/* ============ CTA (always dark feature) ============ */
.cta .box{position:relative; overflow:hidden; border-radius:24px; padding:44px; background:linear-gradient(135deg,#0a1020,#0e1c38); color:#fff;
  border:1px solid rgba(47,155,255,.3); box-shadow:0 40px 90px -40px rgba(47,155,255,.45)}
.cta .box::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 240px at 90% 0,rgba(56,225,255,.25),transparent 60%)}
.cta .inner{position:relative; z-index:2; display:grid; grid-template-columns:1.1fr 1fr; gap:34px; align-items:center}
.cta h2{font:700 clamp(26px,3.3vw,36px)/1.1 var(--ff-display); margin:0 0 12px; letter-spacing:-.4px}
.cta p{color:#b7c8e2; margin:0 0 18px}
.cta ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.cta li{display:flex; gap:10px; align-items:center; color:#d6e3f6; font-size:14.5px}
.cta li svg{width:18px;height:18px;flex:none;color:var(--cyan)}
.jomi-cta-form{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:22px}
/* WPForms vnútri CTA — tmavé */
.jomi-cta-form .wpforms-field-label{color:#9fb3d1!important; font-size:12px!important; font-weight:600!important}
.jomi-cta-form input[type=text],.jomi-cta-form input[type=email],.jomi-cta-form input[type=tel],.jomi-cta-form textarea{
  width:100%; padding:13px 14px; border-radius:10px; background:rgba(255,255,255,.06)!important; border:1px solid rgba(255,255,255,.16)!important; color:#fff!important}
.jomi-cta-form input::placeholder,.jomi-cta-form textarea::placeholder{color:#7e93b3!important}
.jomi-cta-form .wpforms-submit{display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%; cursor:pointer;
  padding:14px 18px!important; border:0!important; border-radius:11px!important; font:700 15px/1 var(--ff-display)!important; color:#03142a!important;
  background:linear-gradient(135deg,var(--cyan),var(--accent))!important; box-shadow:0 0 30px -6px var(--accent)}
.jomi-cta-form .wpforms-field-description,.jomi-cta-form .wpforms-required-label{color:#9fb3d1!important}

/* ============ FOOTER (always dark) ============ */
.jomi-foot{--logo-ink:#fff; background:#070c18; color:#9fb1cc; padding:50px 0 26px; border-top:1px solid rgba(255,255,255,.07)}
/* footer širší než obsah (1280) + rebalans stĺpcov — aby sa dlhšie názvy služieb
   („Montáž kamier na dom", „Montáž videovrátnika") a „Formulár na odstúpenie od
   zmluvy" nezalamovali a footer nepôsobil natlačene. */
.jomi-foot .wrap{max-width:1280px}
.jomi-foot .grid{display:grid; grid-template-columns:1.15fr 1fr 1.3fr 1.05fr; gap:30px}
.jomi-foot h6{color:#fff; font:700 13px/1 var(--ff-body); letter-spacing:1px; text-transform:uppercase; margin:0 0 16px}
.jomi-foot a, .jomi-foot p{font-size:14px; color:#9fb1cc; margin:0 0 9px; text-decoration:none}
.jomi-foot a:hover{color:var(--brand)}
.jomi-foot .legal a::before{content:"›"; color:var(--brand); margin-right:8px}
.jomi-foot .brand{margin-bottom:16px}
.foot-map .map-wrap{height:140px; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.12); margin-bottom:10px; box-shadow:0 10px 30px -18px rgba(0,0,0,.7)}
.foot-map iframe{width:100%; height:100%; border:0; display:block; filter:grayscale(.2)}
.foot-map > a{display:inline-flex; align-items:center; gap:5px; font-size:13px}
.foot-map > a::before{content:none}
.jomi-foot .bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:34px; padding-top:20px; border-top:1px solid rgba(255,255,255,.07); font-size:12.5px; color:#5f718c}
.jomi-foot .bottom a{color:#7e93b3; margin:0}

/* ============ REVEAL ============ */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* ============ LISTING ============ */
.list-hero{background:var(--hero-from); color:var(--hero-meta); position:relative; overflow:hidden}
.list-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 340px at 80% -20%,var(--hero-glow1),transparent 60%),linear-gradient(180deg,var(--hero-from),var(--hero-to))}
.list-hero::after{content:"";position:absolute;inset:0;opacity:.6;background-image:linear-gradient(var(--hero-grid) 1px,transparent 1px),linear-gradient(90deg,var(--hero-grid) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(180deg,#000,transparent 80%)}
.list-hero .wrap{position:relative; z-index:2; padding-top:60px; padding-bottom:34px}
.list-hero h1{font:700 clamp(32px,4.6vw,52px)/1.05 var(--ff-display); margin:14px 0 12px; letter-spacing:-.5px; background:linear-gradient(180deg,var(--hero-h1a),var(--hero-h1b)); -webkit-background-clip:text; background-clip:text; color:transparent}
.list-hero p{color:var(--hero-dek); font-size:17px; max-width:60ch; margin:0}
.chips{display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:2; padding:22px 0 4px}
.chip{font:600 13.5px/1 var(--ff-body); color:var(--chip-tx); padding:10px 16px; border-radius:999px; background:var(--chip-bg); border:1px solid var(--chip-bd); cursor:pointer; transition:.18s; text-decoration:none}
.chip:hover{color:var(--head-link-h); border-color:var(--accent)}
.chip.on{color:#03142a; background:linear-gradient(135deg,var(--cyan),var(--accent)); border-color:transparent; font-weight:700}
.chip b{opacity:.6; font-weight:600; margin-left:4px}
.feed{background:var(--page); padding:30px 0 70px; position:relative}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.feat{grid-column:1/-1; display:grid; grid-template-columns:1.25fr 1fr; gap:0; border-radius:20px; overflow:hidden; border:1px solid var(--card-bd); background:var(--card-bg); margin-bottom:8px; text-decoration:none}
.feat .ph{min-height:320px; background:#0c1730 center/cover no-repeat; position:relative}
.feat .cb{padding:38px}
.feat h2{font:700 clamp(24px,2.6vw,32px)/1.15 var(--ff-display); color:var(--text-strong); margin:0 0 14px; letter-spacing:-.3px}
.feat p{color:var(--muted); margin:0 0 22px; font-size:15.5px}
.feat .more{color:var(--accent);font-weight:600;display:inline-flex;gap:7px;align-items:center}
.feat .more svg{width:15px;height:15px;flex:none}
.pager{display:flex; justify-content:center; margin-top:40px}
.pager .page-numbers{list-style:none; display:flex; gap:8px; padding:0; margin:0}
.pager .page-numbers li a,.pager .page-numbers li span{min-width:42px; height:42px; display:grid; place-items:center; border-radius:11px; color:var(--chip-tx); background:var(--chip-bg); border:1px solid var(--chip-bd); font-weight:600; transition:.18s; text-decoration:none; padding:0 12px}
.pager .page-numbers li span.current{color:#03142a; background:linear-gradient(135deg,var(--cyan),var(--accent)); border-color:transparent}
.pager .page-numbers li a:hover{color:var(--head-link-h); border-color:var(--accent)}

/* ============ PAGE (služby/kontakt/právne — Elementor obsah) ============ */
.jomi-page{min-height:40vh}
.jomi-page.is-classic .jomi-page-head{padding-top:54px; padding-bottom:10px}
.jomi-page-title{font:700 clamp(28px,4vw,44px)/1.1 var(--ff-display); color:var(--text-strong); letter-spacing:-.4px}
.jomi-page.is-classic .jomi-page-content{max-width:var(--read); margin:0 auto; padding:0 24px 60px}

/* ============ GLOBÁLNY RE-SKIN Elementor/Astra (celý web) ============ */
/* Tlačidlá */
.jomi-redesign .elementor-button,
.jomi-redesign .premium-button,
.jomi-redesign .wp-block-button__link{
  border-radius:11px!important; font-family:var(--ff-display)!important; font-weight:700!important; letter-spacing:.2px;
  background:linear-gradient(135deg,var(--cyan),var(--accent))!important; color:#03142a!important; border:0!important;
  box-shadow:0 0 30px -8px var(--accent); transition:.18s}
.jomi-redesign .elementor-button:hover,.jomi-redesign .premium-button:hover{filter:brightness(1.06); transform:translateY(-1px)}
/* Nadpisy mimo článku — display font */
.jomi-redesign .elementor-heading-title{font-family:var(--ff-display)}
/* Karty image-box */
.jomi-redesign .elementor-widget-image-box .elementor-image-box-wrapper{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; transition:.2s}
.jomi-redesign .elementor-widget-image-box .elementor-image-box-wrapper:hover{transform:translateY(-4px); box-shadow:0 24px 50px -30px rgba(0,0,0,.4); border-color:var(--accent)}
.jomi-redesign .elementor-image-box-title{color:var(--text-strong)!important}
.jomi-redesign .elementor-image-box-description{color:var(--muted)!important}
/* Cenníky */
.jomi-redesign .elementor-price-table{background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden}
.jomi-redesign .elementor-price-table__price,.jomi-redesign .elementor-price-table__heading{color:var(--text-strong)}
/* Accordion / toggle */
.jomi-redesign .elementor-accordion .elementor-tab-title,.jomi-redesign .elementor-toggle .elementor-tab-title{background:var(--surface)!important; color:var(--text-strong)!important; border:1px solid var(--line)!important; border-radius:12px!important; margin-bottom:8px}
.jomi-redesign .elementor-accordion .elementor-tab-content{background:var(--surface)!important; color:var(--text)!important; border:1px solid var(--line)!important; border-top:0!important}
/* Icon list */
.jomi-redesign .elementor-icon-list-text{color:var(--text)}
/* Logá značiek (videovrátnik/alarm „značky ktoré inštalujeme") — karty boli rôznej výšky a vertikálne
   rozhádzané. Rovnaká výška kariet (stretch) + vycentrovaný obsah. Cielené cez alt text loga. */
.jomi-redesign .elementor-container:has(img[alt*="vyzer"][alt*="logo"]){align-items:stretch!important}
.jomi-redesign .elementor-column:has(img[alt*="vyzer"][alt*="logo"]) > .elementor-widget-wrap{height:100%!important; justify-content:center!important}
/* Price table (BALÍK karty): deliace čiary PONECHANÉ (originál Elementor).
   Biely ROH (12 rohov = 4×3 karty): za kartou bol .elementor-widget-container s napevno svetlým
   pozadím (#F9FAFA ~42%), ktoré v noci neflipne a presvitá cez zaoblené rohy karty. Tiež jemný biely
   obrys karty. Fix: container transparentný + obrys karty preč. Vysoká špecificita (body.jomi-redesign
   + plný chain), inak prehráme s Elementor .elementor-element-XXX per-widget CSS. */
body.jomi-redesign .elementor-widget-price-table .elementor-widget-container{ background:transparent!important; background-color:transparent!important }
body.jomi-redesign .elementor-widget-price-table .elementor-price-table{ border:0!important }
/* ===== Jednotný PEKNÝ WPForms na celom webe (homepage, kontakt aj článkové CTA) ===== */
.jomi-redesign .wpforms-form{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:24px; max-width:560px; margin:0 auto }
.jomi-redesign .wpforms-form .wpforms-field-label{ color:#9fb3d1!important; font-size:12px!important; font-weight:600!important; margin-bottom:5px!important }
.jomi-redesign .wpforms-form input[type=text],.jomi-redesign .wpforms-form input[type=email],.jomi-redesign .wpforms-form input[type=tel],.jomi-redesign .wpforms-form input[type=url],.jomi-redesign .wpforms-form input[type=number],.jomi-redesign .wpforms-form textarea,.jomi-redesign .wpforms-form select,
.jomi-redesign .wpcf7-form input:not([type=submit]),.jomi-redesign .wpcf7-form textarea{
  width:100%!important; padding:13px 14px!important; border-radius:10px!important; background:rgba(255,255,255,.06)!important; border:1px solid rgba(255,255,255,.16)!important; color:#fff!important }
.jomi-redesign .wpforms-form input::placeholder,.jomi-redesign .wpforms-form textarea::placeholder{ color:#7e93b3!important }
.jomi-redesign .wpforms-form .wpforms-submit{ display:inline-flex!important; align-items:center; justify-content:center; gap:9px; width:100%; cursor:pointer;
  padding:14px 18px!important; border:0!important; border-radius:11px!important; font:700 15px/1 var(--ff-display)!important; color:#03142a!important;
  background:linear-gradient(135deg,var(--cyan),var(--accent))!important; box-shadow:0 0 30px -6px var(--accent) }
.jomi-redesign .wpforms-form .wpforms-field-description,.jomi-redesign .wpforms-form .wpforms-required-label{ color:#9fb3d1!important }
/* V článkovom CTA je karta už na .jomi-cta-form — vnútorný form nech nie je dvojitá karta a vyplní stĺpec */
.jomi-cta-form .wpforms-form{ background:none!important; border:0!important; padding:0!important; max-width:none; margin:0 }

/* ============ RESPONSIVE ============ */
@media(min-width:1100px){
  .layout{grid-template-columns:240px minmax(0,var(--read)); justify-content:center; gap:48px; align-items:stretch}
  .toc-rail{display:block}
  .article{margin:0}
  .toc{position:sticky; top:96px}
  .toc .t{font:700 11px/1 var(--ff-body); letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
  .toc a{display:block; font-size:13.5px; line-height:1.4; color:var(--toc-link); padding:7px 0 7px 14px; border-left:2px solid var(--toc-line); transition:.18s; text-decoration:none}
  .toc a:hover{color:var(--text)}
  .toc a.active{color:var(--toc-active); border-left-color:var(--accent); font-weight:600}
}
@media(max-width:900px){
  .jomi-foot .grid{grid-template-columns:1fr 1fr}
}

/* ============ QA OPRAVY (round 1) ============ */
/* Skry starý Astra/Elementor footer (môj footer = footer.jomi-foot) */
body.jomi-redesign footer.elementor-top-section{display:none!important}
/* Nadpisy mixed-case (Astra global dáva uppercase) */
.hero h1,.list-hero h1,.shead h2,.feat h2,.cta h2,.card h3,.acard h5,
.article h2,.article h3,.article h4,
body.jomi-redesign .jomi-article-body .elementor-heading-title{text-transform:none!important}
/* Hamburger menu už od 960px: desktop header (logo + menu + zóna pill + toggle) potrebuje ~860px,
   takže pod ~960px sa nezmestí a prekrýval sa (najmä iPad na výšku 768px). Header/menu rules majú
   preto vlastný, vyšší breakpoint než obsahové (tie ostávajú na 760px). */
@media(max-width:960px){
  .menu-x{display:flex}
  .nav{position:fixed; top:68px; left:0; right:0; flex-direction:column; align-items:stretch; gap:8px; padding:16px 20px 24px;
    background:var(--nav-mobile-bg); backdrop-filter:blur(14px); border-bottom:1px solid var(--head-bd); transform:translateY(-130%); transition:.25s; max-height:calc(100vh - 68px); overflow:auto}
  body.jomi-nav-open .nav{transform:none}
  .nav-menu{flex-direction:column; align-items:stretch; gap:2px}
  .nav-menu .sub-menu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; background:transparent; padding:0 0 0 14px; min-width:0}
  .nav .zone{margin:6px 0 0; justify-content:center}
  .theme-tg{margin:8px 0 0; align-self:center}
}
@media(max-width:760px){
  .hero .wrap{padding-top:42px; padding-bottom:250px}
  .hero-shot{bottom:-70px; height:190px}
  .layout{padding:150px 0 30px}
  .authors{grid-template-columns:1fr}
  .cards,.grid3{grid-template-columns:1fr}
  .cta .inner{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr}
  .feat .ph{min-height:200px}
  .jomi-foot .grid{grid-template-columns:1fr}
  .article .prod .body{grid-template-columns:1fr}
  .article .prod .body .pic{max-width:180px; margin:0 auto}
}

/* Mobil/tablet (<1100px): .layout ako blok namiesto gridu. Base `.layout` mal
   grid-template-columns:1fr; 1fr track sa rozťahoval na min-content nezmršťovateľného
   IFRAME (vložené video/mapa v článku) → ~47px horizontálny presah na úzkom mobile.
   Blok layout + max-width:100% na telo a embedy to úplne rieši (overené 375px: 0 presah).
   Desktop (≥1100px) ostáva 2-stĺpcový grid (TOC + obsah) podľa pravidla vyššie. */
@media(max-width:1099px){
  body.jomi-redesign .layout{ display:block }
  body.jomi-redesign .jomi-article-body{ max-width:100%; box-sizing:border-box }
}
body.jomi-redesign .jomi-article-body iframe,
body.jomi-redesign .jomi-article-body img{ max-width:100% }

/* ===========================================================================
   DARK NORMALIZER — napevno zadané svetlé pozadia Elementor sekcií, ktoré
   nepoužívajú global-color premenné (preto sa v noci nepreklopia). JS
   (jomi-site.js → jomiNormalizeTheme) im pridá .jomi-dark-bgflip a takmer-
   čiernemu textu vnútri .jomi-dark-textfix. Modrý akcent/svetlý text ostávajú.
   Triedy sa pridávajú LEN v tmavom režime a v dennom sa odoberajú.
   =========================================================================== */
.jomi-dark-bgflip{ background-color:var(--page)!important; background-image:none!important; }
.jomi-dark-textfix{ color:var(--text)!important; }
/* Scrim na foto-pozadie sekcií v noci (hero, OTÁZKY…) — stmaví svetlú foto, text vynikne */
.jomi-dark-scrim{ position:relative; }
.jomi-dark-scrim::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,12,24,.55),rgba(8,12,24,.78)); z-index:0; pointer-events:none; }
.jomi-dark-scrim > *{ position:relative; z-index:1; }

/* ===========================================================================
   QA ROUND 2 (audit 2026-06-14) — opravy DENNÉHO režimu (téma bola ladená
   dark-first; deň mal svetlý-text-na-svetlom na viacerých miestach).
   =========================================================================== */

/* 1) HERO/article H1 gradient-clip: Elementor Global Kit (.elementor-kit-7483 h1)
   nastavuje color:#97D7E8 (svetlá cyan), čo cez -webkit-text-fill-color PREKRYJE
   gradient (180deg --hero-h1a→--hero-h1b) → v deň vymytá svetlá cyan, nečitateľné.
   Vynútenie transparent fill → gradient sa zobrazí korektne v OBOCH režimoch
   (biely→svetlomodrý v noci, navy→modrý v deň). */
body.jomi-redesign .hero h1{ -webkit-text-fill-color:transparent!important; }

/* 2) Obsahové nadpisy v DENNOM režime: kit dáva h1 #97D7E8 (a per-element
   Elementor nadpisy v starších článkoch tiež), čo je na svetlom pozadí vymyté.
   V deň ich stmav na --text-strong (#0c1730). V noci ostáva cyan akcent. */
html[data-theme="light"] body.jomi-redesign .jomi-page-content :where(h1,h2,h3,h4),
html[data-theme="light"] body.jomi-redesign .jomi-page-content .elementor-heading-title,
html[data-theme="light"] body.jomi-redesign .jomi-article-body :where(h1,h2,h3,h4),
html[data-theme="light"] body.jomi-redesign .jomi-article-body .elementor-heading-title{
  color:var(--text-strong)!important; -webkit-text-fill-color:var(--text-strong)!important;
}

/* 3) WPForms v DENNOM režime: re-skin je ladený dark-first (biely text,
   priehľadno-biela karta/inputy). Na svetlých sekciách (homepage, kontakt) sú
   inputy aj písaný text neviditeľné. Prispôsobenie pre svetlú tému.
   VYNECHÁVA článkové CTA (.jomi-cta-form), ktoré sedí na natrvalo TMAVEJ
   .cta .box karte → tam má formulár ostať tmavý. */
html[data-theme="light"] body.jomi-redesign .wpforms-form:not(.jomi-cta-form .wpforms-form){
  background:#fff; border:1px solid rgba(20,45,90,.12); box-shadow:0 10px 30px -16px rgba(20,45,90,.25);
}
html[data-theme="light"] body.jomi-redesign .wpforms-form:not(.jomi-cta-form .wpforms-form) .wpforms-field-label,
html[data-theme="light"] body.jomi-redesign .wpforms-form:not(.jomi-cta-form .wpforms-form) .wpforms-field-description,
html[data-theme="light"] body.jomi-redesign .wpforms-form:not(.jomi-cta-form .wpforms-form) .wpforms-required-label{ color:#48607f!important; }
html[data-theme="light"] body.jomi-redesign .wpforms-form:not(.jomi-cta-form .wpforms-form) input[type=text],
html[data-theme="light"] body.jomi-redesign .wpforms-form:not(.jomi-cta-form .wpforms-form) input[type=email],
html[data-theme="light"] body.jomi-redesign .wpforms-form:not(.jomi-cta-form .wpforms-form) input[type=tel],
html[data-theme="light"] body.jomi-redesign .wpforms-form:not(.jomi-cta-form .wpforms-form) input[type=url],
html[data-theme="light"] body.jomi-redesign .wpforms-form:not(.jomi-cta-form .wpforms-form) input[type=number],
html[data-theme="light"] body.jomi-redesign .wpforms-form:not(.jomi-cta-form .wpforms-form) textarea,
html[data-theme="light"] body.jomi-redesign .wpforms-form:not(.jomi-cta-form .wpforms-form) select{
  background:#fff!important; border-color:rgba(20,45,90,.2)!important; color:#0c1730!important;
}
html[data-theme="light"] body.jomi-redesign .wpforms-form:not(.jomi-cta-form .wpforms-form) input::placeholder,
html[data-theme="light"] body.jomi-redesign .wpforms-form:not(.jomi-cta-form .wpforms-form) textarea::placeholder{ color:#8295ac!important; }

/* 4) Submit gradient je background-IMAGE; Elementor lazy-load pravidlo
   (.e-con.e-parent:nth-of-type(n+N):not(.e-lazyloaded) *{background-image:none!important})
   ho na hlbších sekciách potlačí, kým sa sekcia nescrollne do view → tlačidlo
   môže byť priehľadné (tmavý text neviditeľný). Solídny background-color fallback
   (to pravidlo nuluje len -image, nie -color) → tlačidlo je vždy viditeľné. */
.jomi-redesign .wpforms-form .wpforms-submit,
.jomi-cta-form .wpforms-submit{ background-color:var(--accent)!important; }

/* 5) PROD box stlačený na pol šírky: „Produktové odporúčanie" je v pôvodnom obsahu
   2-stĺpcová Elementor sekcia (text-stĺpec + obrázok-stĺpec). jomi-blog.js obrázok
   v susednom stĺpci SKRYJE a prekreslí ho vnútri .prod boxu → text-stĺpec ostane
   ~326px (pol šírky), citát sa láme po 1-2 slovách, vedľa prázdno. Nech grid-položka
   s .prod boxom zaberie celú šírku (sused je aj tak skrytý). (.rec boxy sú už full-width.)
   Overené 326px→672px na 3 článkoch (kamera-na-branu/-do-garaze, videovratnik-na-dom). */
body.jomi-redesign .jomi-article-body .elementor-element:has(> .elementor-widget-container.prod){ grid-column:1/-1!important; }

/* ===========================================================================
   QA ROUND 3 (2026-06-14) — HOMEPAGE (zabezpecovacie-systemy) doladenie po
   spoločnom prechode deň+noc. Cieli Elementor data-id homepage sekcií.
   Nadpisové pravidlá majú .jomi-page .jomi-page-content kvôli špecificite —
   deň-darkener (QA ROUND 2, pravidlo #2) má variant `.jomi-page-content
   .elementor-heading-title` = (0,4,2), tu treba (0,5,1) aby biely text vyhral.
   =========================================================================== */

/* HERO — text „CHRÁŇTE…" v deň bol čierny (stratil sa), v noci text+logo+tlačidlo
   zanikali. Scrim = box-shadow inset (renderuje sa ZA obsahom, na rozdiel od
   ::after, ktorý pri tejto hlboko-vnorenej flex štruktúre prekrýval obsah).
   Deň jemnejší (.42), noc tmavší (.6). Nadpis vždy biely + text-shadow. */
body.jomi-redesign .elementor-element-iz8e4uj{ box-shadow:inset 0 0 0 2000px rgba(6,11,24,.42)!important; }
html[data-theme="dark"] body.jomi-redesign .elementor-element-iz8e4uj{ box-shadow:inset 0 0 0 2000px rgba(6,11,24,.6)!important; }
body.jomi-redesign .jomi-page .jomi-page-content .elementor-element-iz8e4uj .elementor-heading-title{ color:#fff!important; -webkit-text-fill-color:#fff!important; text-shadow:0 2px 22px rgba(0,0,0,.55); }

/* OTÁZKY — v deň čierny text na tmavej kamere; pozadie ukotvené dole (50% 100%)
   takže kameru nebolo vidno. Fix: biely text + scrim + background-position 50% 30%
   (kamera v zábere). */
body.jomi-redesign .elementor-element-zxc72df{ background-position:50% 30%!important; box-shadow:inset 0 0 0 2000px rgba(6,11,24,.5)!important; }
body.jomi-redesign .jomi-page .jomi-page-content .elementor-element-zxc72df .elementor-heading-title{ color:#fff!important; -webkit-text-fill-color:#fff!important; }
body.jomi-redesign .elementor-element-zxc72df .elementor-widget-text-editor,
body.jomi-redesign .elementor-element-zxc72df p{ color:#fff!important; -webkit-text-fill-color:#fff!important; }

/* Normalizerov .jomi-dark-scrim::after pri hero+OTÁZKY (deep flex con) prekrýval
   obsah (text/logo/tlačidlo bledli v noci) → vypnúť; scrim rieši box-shadow inset vyššie. */
body.jomi-redesign .elementor-element-iz8e4uj.jomi-dark-scrim::after,
body.jomi-redesign .elementor-element-zxc72df.jomi-dark-scrim::after{ display:none!important; }

/* Medzera pred „S NAMI ZÍSKATE" bola priveľká (prev 70 + 120) → zmenšiť. */
body.jomi-redesign .elementor-element-f3owlub{ padding-top:48px!important; }
body.jomi-redesign .elementor-element-tgazw6w{ padding-bottom:24px!important; }

/* ZABEZPEČÍME — PLNÁ SYMETRIA (v1.0.21). Sekcia bola v Elementore postavená
   nekonzistentne: rôzne vnorenia/paddingy stĺpcov, „width-initial" widgety,
   a image-box „bublina" (.elementor-image-box-wrapper) je content-šírky a NEDÁ
   sa rozšíriť (width/padding/flex ju neovplyvnia). Preto je celá mriežka
   zarovnaná takto:
   - 3 stĺpce rovnako široké (flex:1), karty (bubliny) rovnako vysoké cez flex:1
     (rastú do výšky rovnako vysokých stĺpcov → vždy = najvyššej, nezávisle od šírky);
   - 3 fotky zúžené na šírku bubliny (323 = 100%-20px) a vycentrované → bublina aj
     fotka v stĺpci sedia;
   - 2-stĺpcová skupina (ZÁVORY/PERIMETRIA) je insetnutá o 10px → jej vonkajšie
     hrany sadnú na 3-stĺpcovú (obe 305–1375 pri 1120px riadku);
   - PERIMETRIA fotka mala „width-initial" widget (užšia) → vyplnená.
   Len desktop ≥1025px (nižšie sa stĺpce stackujú). Pozn.: keby sa sekcia niekedy
   prestavala v Elementore, tieto data-id cielené pravidlá treba revidovať. */
@media(min-width:1025px){
  /* 3-stĺpcový riadok: rovnaké stĺpce, flex column */
  body.jomi-redesign .elementor-element-195519d{ align-items:stretch!important; }
  body.jomi-redesign .elementor-element-195519d > .e-con{ flex:1 1 0px!important; width:auto!important; max-width:none!important; display:flex!important; flex-direction:column!important; }
  /* ALARMY mal extra wrapper s paddingom → vynulovať, nech vyplní stĺpec */
  body.jomi-redesign .elementor-element-0929888{ padding:0!important; width:100%!important; max-width:100%!important; flex:1 1 auto!important; display:flex!important; flex-direction:column!important; }
  body.jomi-redesign .elementor-element-9f84832{ padding-top:0!important; }
  /* karty-widgety rastú do rovnakej výšky → rovnaké bubliny */
  body.jomi-redesign .elementor-element-b96ee29,
  body.jomi-redesign .elementor-element-ff90c41,
  body.jomi-redesign .elementor-element-1c92403{ flex:1 1 auto!important; min-height:0!important; width:100%!important; max-width:100%!important; }
  body.jomi-redesign .elementor-element-195519d .elementor-image-box-wrapper{ height:100%!important; box-sizing:border-box!important; }
  /* 3-stĺpcové fotky = šírka bubliny (323), vycentrované, rovnaká výška */
  body.jomi-redesign .elementor-element-d5e6a3d img,
  body.jomi-redesign .elementor-element-f202049 img,
  body.jomi-redesign .elementor-element-9a57a3f img{ height:240px!important; width:calc(100% - 20px)!important; margin-left:auto!important; margin-right:auto!important; object-fit:cover!important; display:block!important; }
  /* 2-stĺpcová skupina inset 10px → vonkajšie hrany = 3-stĺpcová */
  body.jomi-redesign .elementor-element-cf3bf69{ padding-left:10px!important; padding-right:10px!important; }
  body.jomi-redesign .elementor-element-4d854eb,
  body.jomi-redesign .elementor-element-dcf62bc{ width:100%!important; max-width:100%!important; }
  body.jomi-redesign .elementor-element-4d854eb > .elementor-widget-container,
  body.jomi-redesign .elementor-element-dcf62bc > .elementor-widget-container{ width:100%!important; }
  body.jomi-redesign .elementor-element-4d854eb img,
  body.jomi-redesign .elementor-element-dcf62bc img{ height:285px!important; width:100%!important; max-width:100%!important; object-fit:cover!important; display:block!important; }
}

/* ===========================================================================
   SLUŽBY — montaz-kamier (page id 7741)
   Hero (x28ifgu) a stredný CTA (bf37e22) sú Premium „Dual Heading" widgety
   (16a43c1 / 61f88b77) s -webkit-text-fill-color:#0c1730 (tmavá) → v DEŇ
   nečitateľné na svetlej fotke. Fix: biely fill + denný box-shadow scrim
   (NOC rieši normalizer .jomi-dark-scrim + textfix, tam je čitateľné).
   =========================================================================== */
html[data-theme="light"] body.jomi-redesign .elementor-element-x28ifgu,
html[data-theme="light"] body.jomi-redesign .elementor-element-bf37e22,
html[data-theme="light"] body.jomi-redesign .elementor-element-b762293{ box-shadow:inset 0 0 0 2000px rgba(6,11,24,.4)!important; }
body.jomi-redesign .elementor-element-16a43c1 .premium-dual-header-first-span,
body.jomi-redesign .elementor-element-16a43c1 .premium-dual-header-second-header,
body.jomi-redesign .elementor-element-61f88b77 .premium-dual-header-first-span,
body.jomi-redesign .elementor-element-61f88b77 .premium-dual-header-second-header,
body.jomi-redesign .elementor-element-76ef6cd .premium-dual-header-first-span,
body.jomi-redesign .elementor-element-76ef6cd .premium-dual-header-second-header{ color:#fff!important; -webkit-text-fill-color:#fff!important; text-shadow:0 2px 18px rgba(0,0,0,.5)!important; }

/* ===========================================================================
   SLUŽBY — montaz-kamier-na-dom (page id 8501)
   4× Premium „Dual Heading" widget má -webkit-text-fill-color:#0c1730 (tmavá)
   → v DEŇ nečitateľný: hero (31a935f) na fotke, 3× CTA (f1a446e/52fbfa9/e9b5b29)
   na čiernom/foto pozadí. Fix: biely fill na všetky 4 + denný box-shadow scrim
   LEN na hero (na fotke). 3 CTA majú tmavé pozadie, scrim netreba.
   NOC rieši normalizer (.jomi-dark-scrim + textfix) — overené že ::after scrim
   neprekrýva text hero (plytšie vnorenie ako na montaz-kamier).
   =========================================================================== */
html[data-theme="light"] body.jomi-redesign .elementor-element-31a935f{ box-shadow:inset 0 0 0 2000px rgba(6,11,24,.42)!important; }
body.jomi-redesign .elementor-element-31a935f .premium-dual-header-first-span,
body.jomi-redesign .elementor-element-31a935f .premium-dual-header-second-header,
body.jomi-redesign .elementor-element-f1a446e .premium-dual-header-first-span,
body.jomi-redesign .elementor-element-f1a446e .premium-dual-header-second-header,
body.jomi-redesign .elementor-element-52fbfa9 .premium-dual-header-first-span,
body.jomi-redesign .elementor-element-52fbfa9 .premium-dual-header-second-header,
body.jomi-redesign .elementor-element-e9b5b29 .premium-dual-header-first-span,
body.jomi-redesign .elementor-element-e9b5b29 .premium-dual-header-second-header{ color:#fff!important; -webkit-text-fill-color:#fff!important; text-shadow:0 2px 18px rgba(0,0,0,.5)!important; }

/* ===========================================================================
   SLUŽBY — montaz-alarmu (page id 8734)
   4× Premium „Dual Heading" má -webkit-text-fill-color:#0c1730 (tmavá) → v DEŇ
   nečitateľný: hero (12e0a0e) na fotke, 3× CTA (d797dbd/cf39f36/3eac052) na
   čiernom/foto pozadí. Fix: biely fill na všetky 4 + denný scrim LEN na hero.
   Naviac: osamotený duplikát „Vyberte si spôsob kontaktovania" (sekcia 1e415f4,
   bez tlačidiel — reálny je v hero) → skryť (v DNI biely=neviditeľný, v noci
   osamotený riadok). NOC rieši normalizer. Rozbitý obrázok (notifikácie) +
   tmavé dual-headery v dátach vyriešené samostatne cez REST (img 10550).
   =========================================================================== */
html[data-theme="light"] body.jomi-redesign .elementor-element-12e0a0e{ box-shadow:inset 0 0 0 2000px rgba(6,11,24,.42)!important; }
body.jomi-redesign .elementor-element-12e0a0e .premium-dual-header-first-span,
body.jomi-redesign .elementor-element-12e0a0e .premium-dual-header-second-header,
body.jomi-redesign .elementor-element-d797dbd .premium-dual-header-first-span,
body.jomi-redesign .elementor-element-d797dbd .premium-dual-header-second-header,
body.jomi-redesign .elementor-element-cf39f36 .premium-dual-header-first-span,
body.jomi-redesign .elementor-element-cf39f36 .premium-dual-header-second-header,
body.jomi-redesign .elementor-element-3eac052 .premium-dual-header-first-span,
body.jomi-redesign .elementor-element-3eac052 .premium-dual-header-second-header{ color:#fff!important; -webkit-text-fill-color:#fff!important; text-shadow:0 2px 18px rgba(0,0,0,.5)!important; }
body.jomi-redesign .elementor-element-1e415f4{ display:none!important; }
/* Logá značiek (sekcia f18eb3f — ZDIEĽANÁ: alarm Ajax/Satel/Paradox/Jablotron aj
   videovrátnik Dahua/Hikvision/2N/Easydoor/Entry). Logá mali rôzne výšky a boli
   zarovnané hore → názvy pod nimi nesedeli. Fix: vertikálne vycentrovať logá do
   rovnakého pásma (150px) → spodky aj názvy zarovnané, karty symetrické.
   Videovrátnik mal navyše SPACERY v niektorých stĺpcoch (Hikvision/Easydoor/Entry),
   ktoré logá tlačili nižšie → skryté (alarm spacery v f18eb3f nemá, neovplyvní ho).
   (Poradie kariet na alarme rieši _elementor_data cez REST.) */
body.jomi-redesign .elementor-element-f18eb3f .elementor-widget-image .elementor-widget-container{ min-height:150px; display:flex; align-items:center; justify-content:center; }
/* Logá fit: max-width + object-fit:contain → celé logo s okrajom, žiadne orezanie/
   pretekanie. Pokrýva široké wordmarky (Hikvision/Dahua/Satel/Paradox/Easydoor) aj
   štvorcové ikony (Jablotron 225x225 — predtým s max-height:120 prevísalo/„nezmestilo sa"). */
body.jomi-redesign .elementor-element-f18eb3f .elementor-widget-image img{ max-width:120px!important; max-height:70px!important; width:auto!important; height:auto!important; object-fit:contain!important; }
body.jomi-redesign .elementor-element-f18eb3f .elementor-widget-spacer{ display:none!important; }
/* Vycentrovať značky: videovrátnik mal 5 stĺpcov (každý 20%), po zmazaní Entry zostali
   4 (80%) zarovnané vľavo → prázdne vpravo. justify-content:center vyváži priestor.
   (Alarm má 4 stĺpce po 25% = 100%, žiadny efekt — bezpečné pre obe.) */
body.jomi-redesign .elementor-element-f18eb3f > .elementor-container{ justify-content:center!important; }
/* „Aký servis" sekcia (3ebjl7c): stredný stĺpec (771a94e) mal GRADIENT pozadie
   (#FAFAFA→#F9F9F9) na vnútornom .elementor-widget-wrap (Elementor maľuje pozadie
   stĺpca tam, nie na .elementor-element-771a94e). Normalizer flipuje len ploché
   background-color, gradient (background-image) nechytí → v noci svietil nabielo
   (svetlý text na bielom). Fix: zrušiť gradient úplne (oba režimy) → stredný stĺpec
   splýva s ľavým/pravým (symetricky), text čitateľný v deň aj noc. */
body.jomi-redesign .elementor-element-771a94e > .elementor-widget-wrap{ background-image:none!important; background-color:transparent!important; }

/* ===========================================================================
   SLUŽBY — montaz-videovratnika (page id 8808)
   4× Premium „Dual Heading" má -webkit-text-fill-color:#0c1730 (tmavá) → v DEŇ
   nečitateľný: hero (d978aa3) na fotke, 3× CTA (1c2af399/c718128/b50df51) na
   čiernom pozadí. Fix: biely fill na všetky 4 + denný scrim LEN na hero.
   Zvyšok stránky čistý (0 rozbitých fotiek, 0 gradientových bannerov, 0 orphan
   duplikátov, mriežka lokalít symetrická, FAQ čitateľný). NOC rieši normalizer.
   =========================================================================== */
html[data-theme="light"] body.jomi-redesign .elementor-element-d978aa3{ box-shadow:inset 0 0 0 2000px rgba(6,11,24,.42)!important; }
body.jomi-redesign .elementor-element-d978aa3 .premium-dual-header-first-span,
body.jomi-redesign .elementor-element-d978aa3 .premium-dual-header-second-header,
body.jomi-redesign .elementor-element-1c2af399 .premium-dual-header-first-span,
body.jomi-redesign .elementor-element-1c2af399 .premium-dual-header-second-header,
body.jomi-redesign .elementor-element-c718128 .premium-dual-header-first-span,
body.jomi-redesign .elementor-element-c718128 .premium-dual-header-second-header,
body.jomi-redesign .elementor-element-b50df51 .premium-dual-header-first-span,
body.jomi-redesign .elementor-element-b50df51 .premium-dual-header-second-header{ color:#fff!important; -webkit-text-fill-color:#fff!important; text-shadow:0 2px 18px rgba(0,0,0,.5)!important; }