/*
Theme Name:   ObjeMiru (Astra Child)
Theme URI:    https://objemiru.si
Description:  Otroška tema za Astro — oblikovni sistem strani ObjeMiru (barve, tipografija, komponente za Elementor).
Author:       ObjeMiru
Template:     astra
Version:      1.6.7
Text Domain:  objemmiru-child
*/

/* ============================================================
   1. BARVE IN TIPOGRAFIJA
   Trenutna paleta: JUB Vitality 75 (620C) — svetlejša zelena.
   Za zamenjavo palete spremeni samo spodnje vrednosti
   (druge palete so zapisane na dnu te datoteke).
   ============================================================ */
:root{
  --om-ink:        #2E4547;  /* Slate iz logotipa — naslovi */
  --om-night:      #235144;  /* Jelka — noga, temni pas */
  --om-brand:      #61AD88;  /* JUB Vitality 75 (620C) — ikone, obrobe, prelivi */
  --om-brand-deep: #3A8062;  /* gumbi, povezave, nadnaslovi */
  --om-brand-dark: #2E6B51;  /* hover gumbov */
  --om-brand-soft: #E4F2EA;  /* ozadja sekcij */
  --om-mist:       #E9F3EA;  /* prelivi */
  --om-gold:       #DFBB88;  /* zvezdice, ločila */
  --om-cloud:      #FBFAF8;  /* osnovno ozadje */
  --om-cloud-warm: #F5F1EB;  /* izmenično ozadje */
  --om-body:       #4E635C;  /* besedilo */
  --om-line:       rgba(46,69,71,.12);

  --om-font-title: "Fraunces", Georgia, "Times New Roman", serif;
  --om-font-body:  "Nunito Sans", "Segoe UI", Helvetica, Arial, sans-serif;

  --om-radius: 22px;
  --om-shadow-s: 0 6px 24px rgba(30,58,50,.07);
  --om-shadow-m: 0 18px 50px rgba(30,58,50,.12);
}

body{
  background:var(--om-cloud);
  color:var(--om-body);
  font-family:var(--om-font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,
.elementor-heading-title{
  font-family:var(--om-font-title);
  color:var(--om-ink);
  font-weight:400;
  line-height:1.18;
}
h1,.elementor-widget-heading h1.elementor-heading-title{font-size:clamp(2.1rem,4.9vw,3.5rem); letter-spacing:-.01em}
h2,.elementor-widget-heading h2.elementor-heading-title{font-size:clamp(1.62rem,3.2vw,2.35rem)}
h3,.elementor-widget-heading h3.elementor-heading-title{font-size:1.28rem}
a{color:var(--om-brand-deep); text-decoration:none}
a:hover{color:var(--om-brand-dark)}
p{margin:0 0 1.1em}

/* Astra: brez naslova strani in brez odmika nad vsebino */
.ast-single-entry-banner,
.page .entry-header,
.ast-no-thumb-padding{display:none}
.ast-page-builder-template .site-content > .ast-container{max-width:100%; padding:0}

/* ============================================================
   2. SKUPNE KOMPONENTE
   ============================================================ */

/* --- Sekcije --- */
.om-section{padding:110px 0 !important}
.om-section--soft{background:var(--om-cloud-warm)}
.om-section--sky{background:linear-gradient(180deg,#F5FBF7 0%, var(--om-brand-soft) 100%)}
.om-narrow{max-width:860px; margin-inline:auto}

/* --- Nadnaslov --- */
.om-eyebrow .elementor-heading-title{
  font-family:var(--om-font-body); font-size:.95rem; letter-spacing:.01em;
  color:var(--om-brand-deep); font-weight:600;
}
.om-eyebrow .elementor-heading-title::before{
  content:"\2726"; color:var(--om-gold); margin-right:8px; letter-spacing:0;
}

/* --- Zlato ločilo --- */
.om-divider .elementor-divider-separator{border-color:var(--om-gold) !important}
.om-divider .elementor-divider{padding-block:14px}

/* --- Gumbi --- */
.elementor-button,
.ast-custom-button{
  font-family:var(--om-font-body); font-size:.95rem; font-weight:600;
  letter-spacing:.01em;
  padding:15px 32px; border-radius:999px; border:1px solid transparent;
  background:var(--om-brand-deep); color:#fff;
  box-shadow:0 10px 26px rgba(58,128,98,.26);
  transition:.35s cubic-bezier(.2,.7,.3,1);
}
.elementor-button:hover,.elementor-button:focus,
.ast-header-button-1 .ast-custom-button:hover{
  background:var(--om-brand-dark); color:#fff; transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(46,107,81,.32);
}
.om-btn-ghost .elementor-button{
  background:transparent; color:var(--om-ink); border-color:rgba(46,69,71,.28); box-shadow:none;
}
.om-btn-ghost .elementor-button:hover{background:var(--om-ink); color:#fff; border-color:var(--om-ink)}
.om-btn-light .elementor-button{background:#fff; color:var(--om-ink); box-shadow:none}
.om-btn-light .elementor-button:hover{background:var(--om-gold); color:#fff}
.om-btn-small .elementor-button{padding:13px 26px; font-size:.88rem}
/* gumb v glavi (Astra Header Builder) */
.ast-header-button-1 .ast-custom-button{padding:13px 28px; font-size:.9rem; box-shadow:none}
.ast-header-button-1 .ast-custom-button:hover{transform:none; box-shadow:0 10px 24px rgba(46,107,81,.28)}

/* ============================================================
   3. NASLOVNA SEKCIJA
   ============================================================ */
.om-hero{
  position:relative; overflow:hidden; min-height:88vh;
  display:flex; align-items:center;
  padding:240px 0 84px !important;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(170deg, #E4F3EA 0%, #EFF3E9 45%, #F8F2EA 100%);
}
.om-hero::before{ /* zvezdice */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(223,187,136,.9) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 82% 16%, rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(2px 2px at 68% 34%, rgba(223,187,136,.7) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 26% 68%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 90% 62%, rgba(223,187,136,.65) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 44% 12%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 82%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 34% 44%, rgba(223,187,136,.55) 50%, transparent 51%);
  animation:om-twinkle 7s ease-in-out infinite alternate;
}
.om-hero::after{ /* sij */
  content:""; position:absolute; top:-190px; right:-160px; width:760px; height:760px;
  border-radius:50%; filter:blur(90px); pointer-events:none;
  background:radial-gradient(circle, rgba(97,173,136,.32) 0%, rgba(214,235,222,.30) 45%, transparent 70%);
}
@keyframes om-twinkle{from{opacity:.35}to{opacity:.9}}
.om-hero > .elementor-container{position:relative; z-index:2}

/* vodni žig — Image widget z razredom om-hero-mark.
   Elementorjevo pravilo .elementor-widget-wrap > .elementor-element{width:100%}
   je močnejše od enega razreda, zato tu potrebujemo večjo specifičnost in !important. */
.om-hero .elementor-container,
.om-hero .elementor-column,
.om-hero .elementor-widget-wrap{position:static}
.om-hero .elementor-widget.om-hero-mark{
  position:absolute !important; top:auto !important; bottom:190px !important; left:50% !important;
  transform:translateX(-50%) !important; width:min(1120px,92vw) !important;
  opacity:.17; pointer-events:none; z-index:1;
}
.om-hero .om-hero-mark img{display:block; width:100%; height:auto}

/* prostor med opisom in gumboma, kamor pade napis
   »tvoja energija, tvoja pot« iz vodnega žiga */
.om-hero .elementor-inner-section{margin-top:160px}

/* Elementor 3.3x ne izrise vec .elementor-widget-container, zato so pravila
   pripeta kar na gradnik sam - deluje v obeh nacinih izrisa. */
.om-hero-sub{font-size:1.2rem; max-width:640px; margin-inline:auto}
.om-hero-note{font-size:.9rem; color:rgba(78,99,92,.85); margin-top:36px}

/* ============================================================
   4. TRAK POD NASLOVNO SEKCIJO
   ============================================================ */
.om-strip{background:var(--om-ink); padding:26px 0 !important}
.om-strip .elementor-icon-list-items{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px 50px; margin:0;
}
.om-strip .elementor-icon-list-item{margin:0 !important}
.om-strip .elementor-icon-list-text{
  color:rgba(255,255,255,.92); font-size:.95rem; letter-spacing:.01em; font-weight:600;
}
.om-strip .elementor-icon-list-icon svg,
.om-strip .elementor-icon-list-icon i{color:var(--om-gold); fill:var(--om-gold)}

/* ============================================================
   5. TRI VPRAŠANJA
   ============================================================ */
.om-question .elementor-heading-title{
  font-size:clamp(1.4rem,2.7vw,2.05rem); line-height:1.3; color:var(--om-ink);
}
.om-qsep .elementor-divider-separator{
  border-top:none !important; border-left:1px solid var(--om-gold) !important;
  height:34px; width:0 !important; margin-inline:auto; opacity:.7;
}

/* ============================================================
   6. O MENI
   ============================================================ */
/* .elementor-widget pred razredom: Elementorjevo pravilo .elementor img
   ima enako specifičnost in se naloži kasneje, zato bi sicer povozilo zaobljenje */
.elementor-widget.om-portrait img{border-radius:var(--om-radius); box-shadow:var(--om-shadow-m)}

/* fotografija v razdelku Izkušnja, nad tremi koraki (Image z razredom om-photo) */
.elementor-widget.om-photo img{
  display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--om-radius); box-shadow:var(--om-shadow-m);
}
.om-signature .elementor-heading-title{
  font-family:var(--om-font-title); font-style:italic; font-size:1.32rem; color:var(--om-ink);
}

/* ============================================================
   7. KOMU JE NAMENJENO
   ============================================================ */
/* devet postavk se izide v mrezo 3 x 3; kartice v vrstici so enako visoke */
.om-needs .elementor-icon-list-items{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.om-needs .elementor-icon-list-item{
  background:#fff; border-radius:20px; padding:30px 28px !important;
  box-shadow:var(--om-shadow-s); border:1px solid rgba(223,187,136,.35);
  align-items:flex-start; margin:0 !important;
  transition:.4s cubic-bezier(.2,.7,.3,1);
}
.om-needs .elementor-icon-list-item:hover{
  transform:translateY(-6px); box-shadow:var(--om-shadow-m); border-color:var(--om-gold);
}
.om-needs .elementor-icon-list-icon{
  flex:0 0 44px; width:44px; height:44px; border-radius:50%; margin-right:18px;
  background:linear-gradient(150deg,#F7EEE0,#FCF8F2);
  display:flex; align-items:center; justify-content:center;
}
.om-needs .elementor-icon-list-item .elementor-icon-list-icon svg,
.om-needs .elementor-icon-list-item .elementor-icon-list-icon i{
  width:17px; height:17px; font-size:15px; margin:0;
  color:var(--om-gold); fill:var(--om-gold);
}
.om-needs .elementor-icon-list-text{
  color:var(--om-body); font-size:1.04rem; line-height:1.6; padding-left:0;
}

/* ============================================================
   8. IZKUŠNJA (časovnica: Icon Box na zlati niti)
   ============================================================ */
/* drobne oznake pod uvodom — Icon List (inline) z razredom om-chips */
.om-chips .elementor-icon-list-items{justify-content:center; gap:10px}
.om-chips .elementor-icon-list-item{
  background:#fff; border:1px solid rgba(223,187,136,.55); border-radius:999px;
  padding:9px 18px !important; margin:0 !important;
  font-size:.82rem; letter-spacing:.04em;
}
.om-chips .elementor-icon-list-icon i,
.om-chips .elementor-icon-list-icon svg{
  color:var(--om-gold); fill:var(--om-gold); font-size:14px; width:14px; height:14px;
}
.om-chips .elementor-icon-list-text{padding-left:9px; color:var(--om-ink)}

/* Zlata nit, ki povezuje vse tri korake. Narišemo jo kot ozadje stolpca in ne
   kot ::before same sekcije — tako teče točno skozi središča ikon (41 px od roba
   vsebine) ne glede na notranji odmik, ki ga stolpcu doda Elementor. */
.om-flow .elementor-widget-wrap{
  background-image:linear-gradient(180deg,transparent,var(--om-gold) 12%,
                                   var(--om-gold) 88%,transparent);
  background-repeat:no-repeat;
  background-origin:content-box;
  background-size:1px calc(100% - 60px);
  background-position:41px 30px;
}

/* korak: ikona stoji na niti, besedilo je bela kartica */
.om-feature{margin-bottom:26px}
/* razmik 32 px mora premagati Elementorjevo lastno pravilo, sicer se opomba
   pod prvim korakom ne poravna z robom kartic */
.om-feature .elementor-icon-box-wrapper{
  display:flex; align-items:flex-start; gap:32px !important; text-align:left;
}
.om-feature .elementor-icon-box-icon{
  flex:0 0 82px; margin:0 !important; position:relative; z-index:1;
}
.om-feature .elementor-icon{
  width:82px; height:82px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,#EAF7F0,#DCEFE3);
  color:var(--om-brand-deep); box-shadow:0 0 0 8px var(--om-cloud-warm);
}
.om-feature .elementor-icon svg{width:36px; height:36px; fill:var(--om-brand-deep)}
.om-feature .elementor-icon i{font-size:32px}
.om-feature .elementor-icon-box-content{
  background:#fff; border-radius:var(--om-radius); padding:34px 40px;
  box-shadow:var(--om-shadow-s); transition:.4s cubic-bezier(.2,.7,.3,1);
}
.om-feature:hover .elementor-icon-box-content{
  transform:translateY(-6px); box-shadow:var(--om-shadow-m);
}
.om-feature .elementor-icon-box-title{margin-bottom:.45em}
.om-feature .elementor-icon-box-description{color:var(--om-body)}

/* drobna oznaka koraka nad naslovom (span v naslovu gradnika) */
.om-step-meta{
  display:block; font-family:var(--om-font-body); font-size:.84rem; font-weight:600;
  letter-spacing:.02em; color:var(--om-brand-deep);
  margin-bottom:.7em;
}
/* uvodni stavek koraka in mirna vrstica na koncu drugega koraka */
.om-kicker{font-size:1.06rem; color:var(--om-ink)}
.om-mantra{
  display:block; margin-top:20px; padding-top:20px; border-top:1px solid var(--om-line);
  font-family:var(--om-font-title); font-style:italic; font-size:1.15rem; color:var(--om-ink);
}
.om-mantra i{color:var(--om-gold); font-style:normal}

/* poudarjena opomba med prvim in drugim korakom */
.om-note-gold{
  background:#fff; border-left:3px solid var(--om-gold); border-radius:14px;
  padding:26px 32px !important; margin:0 0 26px 114px; box-shadow:var(--om-shadow-s);
}
.om-note-gold p{margin:0; font-size:1rem}
.om-note-gold strong{color:var(--om-ink); font-weight:500}

/* ============================================================
   9. PONUDBA
   ============================================================ */
.om-price-main{
  background-color:#fff; border:1px solid rgba(223,187,136,.6); border-radius:var(--om-radius);
  padding:46px !important; box-shadow:var(--om-shadow-m); margin-bottom:34px; position:relative;
}
.om-price-main::before{
  content:"Osrednja izkušnja"; position:absolute; top:-13px; left:46px;
  background:var(--om-gold); color:#fff; font-family:var(--om-font-body);
  font-size:.82rem; font-weight:600; letter-spacing:.01em; padding:6px 16px; border-radius:999px;
}
/* Kartice ponudbe so oblikovane kot karte za branje: dvojni zlati okvir in zvezda.
   Bela podlaga je na .elementor-widget-wrap, ne na stolpcu, zato je med karticami
   pravi razmik; vrstica se z negativnim robom poravna z osrednjo ponudbo nad njo. */
.om-prices-row > .elementor-container{gap:24px}
.om-prices-row .om-price{
  width:auto !important; flex:1 1 0; padding:0 !important;
  background:none !important; box-shadow:none !important; border:0 !important;
}
/* Pero kot vodni žig v karticah ponudbe — kartice so oblikovane kot karte za
   branje in pero je znak zapisanega sporočila. Risba je v slike/pero.svg,
   prosojnost pa je zapisana v njej: ozadja ni mogoče zbledeti ločeno od vsebine,
   ::before in ::after pa sta na kartici že zasedena (okvir in zvezdica). */
.om-price > .elementor-widget-wrap{
  background-image:url("slike/pero.svg");
  background-repeat:no-repeat;
  background-position:right 12px bottom 12px;
  background-size:auto 150px;
}
/* Na osrednji kartici pero pade za seznam vključenega, zato stoji v polju s ceno. */
.om-buy{
  background-image:url("slike/pero.svg");
  background-repeat:no-repeat;
  background-position:right 8px bottom 6px;
  background-size:auto 112px;
}

.om-price > .elementor-widget-wrap{
  position:relative; background-color:#fff; border-radius:22px;
  border:1px solid rgba(223,187,136,.5); box-shadow:var(--om-shadow-s);
  padding:48px 24px 26px !important;
  transition:.45s cubic-bezier(.2,.7,.3,1);
}
.om-price > .elementor-widget-wrap::before{   /* notranji okvir karte */
  content:""; position:absolute; inset:9px; border-radius:15px;
  border:1px solid rgba(223,187,136,.35); pointer-events:none;
}
.om-price > .elementor-widget-wrap::after{    /* zvezda na vrhu karte */
  content:"\2726"; position:absolute; top:19px; left:50%; transform:translateX(-50%);
  color:var(--om-gold); font-size:.8rem; line-height:1; pointer-events:none;
}
.om-price:hover > .elementor-widget-wrap{
  transform:translateY(-10px) rotate(-.8deg);
  box-shadow:var(--om-shadow-m); border-color:var(--om-gold);
}
.om-price:nth-child(even):hover > .elementor-widget-wrap{
  transform:translateY(-10px) rotate(.8deg);
}

/* Naslovi in cene v ceniku so v osnovni (sans) pisavi — zaradi berljivosti. */
.om-price .elementor-heading-title,
.om-price-main .elementor-heading-title{font-family:var(--om-font-body); letter-spacing:0}
.om-price h3.elementor-heading-title{font-size:1.06rem; font-weight:600; line-height:1.35}
.om-price-main h3.elementor-heading-title{font-size:1.45rem; font-weight:600; line-height:1.3}

.om-price-type .elementor-heading-title{
  font-size:.84rem; font-weight:600; letter-spacing:.02em;
  color:var(--om-brand-deep);
}
.om-amount .elementor-heading-title{
  font-weight:600; letter-spacing:-.02em; font-size:2rem; line-height:1; color:var(--om-ink);
}
.om-price-main .om-amount .elementor-heading-title{font-size:clamp(2.3rem,3.9vw,3rem)}
/* Drobna oznaka ob ceni: cene so z DDV (zakonska navedba, zato ne sme izginiti). */
.om-ddv{
  font-size:.85rem; font-weight:400; letter-spacing:.02em; color:var(--om-body);
  white-space:nowrap; vertical-align:.18em; margin-left:.35em;
}
.om-unit,
.om-minutes{
  font-size:.88rem; letter-spacing:.01em; color:var(--om-brand-deep);
}
.om-buy{
  background-color:var(--om-cloud-warm); border-radius:18px; padding:30px 24px !important; text-align:center;
}
.om-buy .elementor-button{width:100%}
.om-buy .om-note{font-size:.8rem; color:var(--om-body); opacity:.8}
/* karta je stolpec, noga se prilepi na dno -> vse karte so poravnane */
.om-price > .elementor-widget-wrap{
  display:flex; flex-direction:column; flex-wrap:nowrap; align-content:stretch;
}
.om-price .om-slots{margin-top:auto}
.om-slots{
  border-top:1px solid var(--om-line); padding-top:16px;
  font-size:.88rem; letter-spacing:.01em; color:var(--om-brand-deep);
}
.om-slots p{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  flex-wrap:wrap; margin:0;
}
.om-slots a{font-weight:500; white-space:nowrap}
.om-slots p span{white-space:nowrap}
.om-price .om-slots{font-size:.84rem; letter-spacing:0}
/* v ozkih karticah gresta stevilo mest in poziv vedno v dve vrstici,
   da so noge vseh kartic enako visoke */
.om-price .om-slots p{flex-direction:column; align-items:flex-start; gap:7px}

/* Kaj vključuje — Icon List z ikono fas fa-check in razredom om-incl */
.om-incl .elementor-icon-list-items{display:grid; gap:11px}
.om-incl .elementor-icon-list-item{margin:0 !important; align-items:flex-start}
/* kljukica je ozadje krogca, zato je vedno natanko na sredini */
.om-incl .elementor-icon-list-icon{
  flex:0 0 20px; width:20px; height:20px; border-radius:50%; margin-top:4px; margin-right:12px;
  background:var(--om-brand-deep) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/></svg>") center/12px no-repeat;
}
.om-incl .elementor-icon-list-item .elementor-icon-list-icon svg,
.om-incl .elementor-icon-list-item .elementor-icon-list-icon i{display:none}
.om-incl .elementor-icon-list-text{
  color:var(--om-body); font-size:.95rem; line-height:1.55; padding-left:0;
}
.om-price .om-incl .elementor-icon-list-text{font-size:.9rem}
.om-price .om-incl .elementor-icon-list-icon{
  flex-basis:17px; width:17px; height:17px; margin-top:3px; background-size:10px;
}
/* na namizju enako visoki naslovi in seznami -> simetricne kartice */
@media (min-width:1025px){
  .om-price h3.elementor-heading-title{min-height:2.4em}
  .om-price .om-incl{min-height:132px}
}
/* cena v osrednji ponudbi naj bo navpicno na sredini kartice */
.om-price-main .om-buy .elementor-widget-wrap{align-content:center}
.om-prices-note{font-size:.9rem; opacity:.9}

/* ============================================================
   10. TEMNI PAS
   ============================================================ */
.om-band{
  position:relative; overflow:hidden; padding:120px 0 !important;
  background:linear-gradient(150deg,#3E8F6B 0%, var(--om-night) 55%, #1B4438 100%);
}
.om-band .elementor-heading-title,
.om-band .elementor-widget-text-editor{color:#fff}
.om-band .elementor-widget-text-editor{color:rgba(255,255,255,.82)}
.om-band .om-eyebrow .elementor-heading-title{color:var(--om-gold)}

/* ============================================================
   11. KORAKI
   ============================================================ */
.om-step-num .elementor-heading-title{
  width:66px; height:66px; margin:0 auto 22px; border-radius:50%;
  border:1px solid var(--om-gold); background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--om-font-title); font-size:1.3rem; color:var(--om-ink);
}

/* ============================================================
   12. POGOSTA VPRAŠANJA (Accordion)
   ============================================================ */
.om-faq .elementor-accordion-item{
  background:#fff; border:1px solid rgba(46,69,71,.06) !important;
  border-radius:16px; margin-bottom:14px; box-shadow:var(--om-shadow-s); overflow:hidden;
}
.om-faq .elementor-tab-title{
  padding:22px 28px; font-family:var(--om-font-title); font-size:1.08rem; color:var(--om-ink);
}
.om-faq .elementor-tab-title a{color:var(--om-ink)}
.om-faq .elementor-tab-content{padding:0 28px 24px; font-size:.98rem; border:0 !important}
.om-faq .elementor-accordion-icon{color:var(--om-brand)}

/* ============================================================
   13. KONTAKT IN OBRAZEC
   ============================================================ */
.om-contact-list .elementor-icon-list-item{margin-bottom:22px !important; align-items:flex-start}
.om-contact-list .elementor-icon-list-icon{
  width:46px; height:46px; border-radius:50%; background:#fff; box-shadow:var(--om-shadow-s);
  display:flex; align-items:center; justify-content:center; margin-right:16px;
}
.om-contact-list .elementor-icon-list-icon svg{width:20px; height:20px; fill:var(--om-brand-deep)}
.om-contact-list .elementor-icon-list-text{color:var(--om-body)}
.om-contact-list .elementor-icon-list-text b{
  display:block; color:var(--om-ink); font-weight:600; font-size:.9rem;
  letter-spacing:.01em;
}
.om-form-card{
  background:#fff; border-radius:var(--om-radius); padding:42px !important; box-shadow:var(--om-shadow-m);
}
/* Contact Form 7 v enotnem videzu */
.om-form-card input[type=text],
.om-form-card input[type=email],
.om-form-card input[type=tel],
.om-form-card select,
.om-form-card textarea,
.om-booking input[type=text],
.om-booking input[type=email],
.om-booking input[type=tel],
.om-booking select,
.om-booking textarea{
  width:100%; padding:14px 16px; border:1px solid var(--om-line); border-radius:12px;
  font-family:var(--om-font-body); font-weight:400; font-size:.98rem; color:var(--om-ink);
  background:#FCFCFB;
}
.om-form-card input:focus,.om-form-card select:focus,.om-form-card textarea:focus,
.om-booking input:focus,.om-booking select:focus,.om-booking textarea:focus{
  outline:none; border-color:var(--om-brand); box-shadow:0 0 0 4px rgba(97,173,136,.18);
}
.om-form-card label,.om-booking label{
  font-size:.9rem; font-weight:600; letter-spacing:.01em; color:var(--om-ink);
}
.om-form-card button[type=submit],
.om-form-card input[type=submit],
.om-booking button[type=submit],
.om-booking input[type=submit]{
  width:100%; border:0; border-radius:999px; padding:16px 34px; cursor:pointer;
  background:var(--om-brand-deep); color:#fff;
  font-family:var(--om-font-body); font-size:.95rem; font-weight:600;
  letter-spacing:.01em;
}
.om-form-card button[type=submit]:hover,
.om-form-card input[type=submit]:hover,
.om-booking button[type=submit]:hover,
.om-booking input[type=submit]:hover{background:var(--om-brand-dark)}

/* ============================================================
   13b. DOGOVOR ZA TERMIN (obrazec Contact Form 7)
   Kratka koda obrazca v gradniku Shortcode z razredom om-booking.
   Termin se dogovori prek obrazca, po telefonu ali e-pošti — brez koledarja.
   ============================================================ */
.om-booking{
  background:#fff; border-radius:var(--om-radius); box-shadow:var(--om-shadow-m);
  padding:46px !important; max-width:960px; margin-inline:auto; text-align:left;
}

/* razporeditev polj v dva stolpca */
.om-fields{display:grid; grid-template-columns:1fr 1fr; gap:22px 24px}
.om-fields > p{margin:0}
.om-f--full{grid-column:1 / -1}
.om-fields label{display:block; margin-bottom:8px}
.om-fields .wpcf7-form-control-wrap{display:block}
.om-req{color:var(--om-brand-deep)}

/* sporočila, napake, soglasje, gumb */
.wpcf7 form .wpcf7-response-output{
  margin:26px 0 0; padding:14px 18px; border-radius:12px; border-width:1px;
  font-size:.92rem; color:var(--om-ink);
}
.wpcf7 form.sent .wpcf7-response-output{
  border-color:var(--om-brand); background:var(--om-brand-soft);
}
.wpcf7-not-valid-tip{
  color:#B3453A; font-size:.8rem; margin-top:6px; letter-spacing:.02em; text-transform:none;
}
.om-consent .wpcf7-list-item{margin:0}
.om-consent .wpcf7-list-item-label,
.om-consent label{
  display:flex; gap:12px; align-items:flex-start; margin:0;
  font-size:.86rem; letter-spacing:0; text-transform:none;
  color:var(--om-body); line-height:1.7;
}
.om-consent input[type=checkbox]{
  width:18px; height:18px; margin-top:4px; accent-color:var(--om-brand-deep); flex:0 0 auto;
}
.om-submit{display:flex; justify-content:center; margin-top:6px}
.om-submit .wpcf7-submit{width:auto !important; min-width:300px}
.wpcf7-spinner{display:block; margin:14px auto 0}

/* ============================================================
   14. NOGA (Astra Footer Builder)
   ============================================================ */
.site-footer,
.site-primary-footer-wrap,
.site-below-footer-wrap,
.ast-footer-copyright{background-color:var(--om-night) !important; color:rgba(255,255,255,.7)}
.site-footer .footer-widget-area,
.site-footer .widget{background:transparent}
/* štirje stolpci noge (Astra brez Pro ponudi tri) */
.site-primary-footer-wrap .ast-builder-grid-row{
  grid-template-columns:1.5fr 1fr 1.1fr 1.2fr !important; gap:44px;
}
@media (max-width:920px){
  .site-primary-footer-wrap .ast-builder-grid-row{grid-template-columns:1fr 1fr !important}
}
@media (max-width:600px){
  .site-primary-footer-wrap .ast-builder-grid-row{grid-template-columns:1fr !important}
}
/* vrstica noge je omejena na 1180 px brez stranskega odmika — pod to širino
   (tablica, telefon, manjši prenosnik) se je vsebina dotikala roba zaslona */
@media (max-width:1260px){
  .site-primary-footer-inner-wrap,
  .site-below-footer-inner-wrap{padding-inline:clamp(20px,4vw,40px) !important; box-sizing:border-box}
}
.site-footer a{color:rgba(255,255,255,.7)}
.site-footer a:hover{color:var(--om-gold)}
.site-footer .widget-title{color:#fff; font-family:var(--om-font-title); font-size:1.02rem}
.site-footer .custom-logo-link img,.site-footer img.om-footer-logo{height:56px !important; width:auto !important}
.om-legal{font-style:normal; font-size:.86rem; line-height:1.9; color:rgba(255,255,255,.6)}
.om-legal strong{display:block; color:rgba(255,255,255,.85); font-weight:400; margin-bottom:6px}

/* Stik in podatki podjetja v nogi: ikone so vgrajeni SVG v gradniku Poljubni HTML,
   ker Font Awesome na strani ni več naložen (glej functions.php). */
.om-footer-stik{list-style:none; margin:0; padding:0; display:grid; gap:13px}
.om-footer-stik li{display:flex; align-items:flex-start; gap:11px}
.om-footer-stik svg{
  flex:0 0 auto; width:18px; height:18px; margin-top:4px;
  stroke:var(--om-gold); fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.om-footer-stik a{color:rgba(255,255,255,.78)}
.om-footer-stik a:hover{color:var(--om-gold)}
ul.om-legal{line-height:1.7}
ul.om-legal strong{margin-bottom:2px}

/* ============================================================
   15. GLAVA (Astra Header Builder)
   ============================================================ */
.ast-primary-header-bar,.site-header{background:transparent}

/* lepljiva glava brez Astra Pro */
.site-header{position:sticky; top:0; z-index:99; transition:background .3s ease, box-shadow .3s ease}
html{scroll-behavior:smooth}
:target,[id]{scroll-margin-top:96px}
.ast-header-sticked .ast-primary-header-bar,
.ast-sticky-active .ast-primary-header-bar{
  background:rgba(251,250,248,.92) !important; backdrop-filter:blur(12px);
  box-shadow:0 2px 20px rgba(30,58,50,.08);
}
.main-header-menu a,
.main-header-menu .menu-link{
  font-family:var(--om-font-body); font-size:.95rem; font-weight:500; letter-spacing:.01em;
  color:var(--om-ink);
}
/* Ob prehodu z miško in ob izbiri: temnejša zelena (5,8:1 namesto 4,3:1)
   in tanka zlata črta, da je izbrana postavka razpoznavna tudi brez barve. */
.main-header-menu a:hover,
.main-header-menu .menu-link:hover,
.main-header-menu .menu-link:focus-visible,
.main-header-menu .current-menu-item > .menu-link{color:var(--om-brand-dark)}
/* Astra barva meni z .ast-desktop .main-header-menu > .menu-item > .menu-link (0,3,1),
   kar je močnejše od enega razreda — zato tu enak izbirnik, le kasneje v datoteki. */
.ast-desktop .main-header-menu > .menu-item > .menu-link,
.ast-header-break-point .main-header-menu .menu-link{color:var(--om-ink)}
.ast-desktop .main-header-menu > .menu-item > .menu-link:hover,
.ast-desktop .main-header-menu > .menu-item > .menu-link:focus-visible,
.ast-desktop .main-header-menu > .current-menu-item > .menu-link{color:var(--om-brand-dark)}
.main-header-menu .menu-link{position:relative}
.ast-desktop .main-header-menu > .menu-item > .menu-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:var(--om-gold); transform:scaleX(0); transform-origin:center;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.ast-desktop .main-header-menu > .menu-item > .menu-link:hover::after,
.ast-desktop .main-header-menu > .menu-item > .menu-link:focus-visible::after,
.ast-desktop .main-header-menu > .current-menu-item > .menu-link::after{transform:scaleX(1)}
/* Obroba ob tipkovnem fokusu sledi obliki gumbov na strani (zaobljena),
   ne oglat okvir okoli besede. */
.main-header-menu .menu-link:focus-visible,
#ast-hf-mobile-menu .menu-link:focus-visible{
  outline:2px solid var(--om-brand-dark); outline-offset:6px; border-radius:999px;
}

/* Označena postavka menija: razred .om-aktivno med drsenjem doda JavaScript
   (objemmiru_menu_spy_script v functions.php). Astra na enostranski strani s sidri
   .current-menu-item ne dodeli, zato oznako vodi lastna koda.
   Na namizju se pokaže zlata črta pod besedo, na telefonu zlat rob ob postavki. */
/* Izbirnik mora biti enako dolg kot Astrin (.ast-desktop .main-header-menu >
   .menu-item > .menu-link), sicer barva oznake izgubi po specifičnosti. */
.main-header-menu .menu-link.om-aktivno,
.ast-desktop .main-header-menu > .menu-item > .menu-link.om-aktivno,
.ast-header-break-point .main-header-menu .menu-link.om-aktivno,
#ast-hf-mobile-menu .menu-link.om-aktivno{color:var(--om-brand-dark); font-weight:700}
/* Črta pod označeno postavko ostane izrisana (hover jo samo prikaže, oznaka jo drži)
   in je debelejša od tiste ob prehodu z miško, da se loči od nje.
   Krepka pisava razširi besedo za 1–3 px, kar sosednjih postavk vidno ne premakne. */
.ast-desktop .main-header-menu > .menu-item > .menu-link.om-aktivno::after{
  transform:scaleX(1); height:2px; bottom:-7px;
}
#ast-hf-mobile-menu .menu-link.om-aktivno{
  color:var(--om-brand-dark);
  background:rgba(97,173,136,.09);
  box-shadow:inset 3px 0 0 var(--om-gold);
}
/* Logotip ostane enako velik tudi ob drsenju. Prej se je skrčil s 66 na 52 px;
   ker glava stoji v toku strani (position:sticky), se je ob tem skrajšala tudi
   glava in vsebina pod njo je poskočila za 14 px. Ob drsenju se zato spremenita
   samo ozadje in senca, obe pa sta animirani. */
.custom-logo-link img{height:66px !important; width:auto !important}

/* ============================================================
   16. ODZIVNOST
   Vrstni red je pomemben: pravila za ožje zaslone morajo priti za
   pravili za širše, sicer jih ta prepišejo (enaka specifičnost — zadnji zmaga).
   ============================================================ */

/* --- Tablice --- */
@media (max-width:1024px){
  .om-section{padding:90px 0 !important}
  .om-needs .elementor-icon-list-items{grid-template-columns:1fr 1fr; gap:20px}
  /* karte gredo v dve vrsti, da ne postanejo pretesne */
  .om-prices-row > .elementor-container{flex-wrap:wrap}
  .om-prices-row .om-price{flex:1 1 calc(50% - 12px)}
}

/* --- Manjše tablice in večji telefoni --- */
@media (max-width:820px){
  .om-section{padding:78px 0 !important}
  .om-hero{min-height:auto; padding:124px 0 62px !important}
  .om-hero .elementor-inner-section{margin-top:100px}
  .om-needs .elementor-icon-list-items{grid-template-columns:1fr; gap:18px}
  .om-needs .elementor-icon-list-item{padding:24px 22px !important}
  .om-flow .elementor-widget-wrap{background-image:none}
  .om-feature .elementor-icon-box-wrapper{flex-direction:column; gap:16px !important}
  .om-feature .elementor-icon-box-icon{flex:0 0 auto; box-shadow:none}
  .om-feature .elementor-icon{box-shadow:none}
  .om-feature .elementor-icon-box-content{padding:28px 24px}
  .om-note-gold{margin-left:0; padding:22px 24px !important}
  .om-price-main{padding:38px 26px !important; text-align:center}
  .om-price-main::before{left:50%; transform:translateX(-50%)}
  .om-form-card{padding:30px 24px !important}
  .om-booking{padding:30px 24px !important}
  .om-fields{grid-template-columns:1fr}
  .om-submit .wpcf7-submit{min-width:100%; min-height:52px}

  /* Obrazec na telefonu: pisava pod 16px sproži na iPhonu samodejno
     povečavo strani ob dotiku polja, iz česar se obiskovalec ne zna vrniti.
     Polja hkrati dvignemo na 48px, da so lahka za zadetek. */
  .om-booking input[type=text],
  .om-booking input[type=email],
  .om-booking input[type=tel],
  .om-booking select,
  .om-booking textarea,
  .om-form-card input[type=text],
  .om-form-card input[type=email],
  .om-form-card input[type=tel],
  .om-form-card select,
  .om-form-card textarea{
    font-size:16px !important; min-height:48px; padding:12px 14px;
  }
  .om-booking textarea,
  .om-form-card textarea{min-height:132px}
  .om-consent input[type=checkbox]{width:22px; height:22px; margin-top:2px}
  .om-consent .wpcf7-list-item-label{line-height:1.55}
  .om-strip .elementor-icon-list-items{gap:12px 26px}
  .om-strip .elementor-icon-list-text{font-size:.88rem}
  /* gumba v naslovni sekciji se na telefonu zlozita drug pod drugega */
  .om-hero .elementor-align-right,
  .om-hero .elementor-align-left{text-align:center !important}
}

/* --- Telefoni --- */
@media (max-width:600px){

  /* Razmiki: na telefonu je 78px med sekcijami skoraj pol zaslona praznine.
     Stran je bila zato dolga ~17.700px; s tem blokom se skrajša za približno petino. */
  .om-section{padding:58px 0 !important}
  .om-band{padding:76px 0 !important}
  .om-hero{padding:88px 0 52px !important; overflow:hidden}
  .om-hero .elementor-inner-section{margin-top:56px}
  .elementor-widget-spacer .elementor-spacer-inner{height:calc(var(--spacer-size, 50px) * .6)}

  /* Glava: nižji logotip pomeni več vidne vsebine ob prihodu na stran. */
  .custom-logo-link img{height:52px !important}
  :target,[id]{scroll-margin-top:76px}

  /* Tapljive tarče: prst potrebuje vsaj 44px, sicer se zgreši.
     Naslovi vprašanj, povezave v ceniku, v nogi in v kontaktu so bili visoki 17–24px. */
  .om-faq .elementor-tab-title{
    padding:16px 18px !important; min-height:56px;
    display:flex; align-items:center; gap:10px;
  }
  .om-faq .elementor-tab-content{padding:0 18px 20px}
  .om-price .om-slots{font-size:.76rem; letter-spacing:.08em}
  .om-price .om-slots p{flex-direction:row; align-items:center; justify-content:space-between; gap:10px}
  .om-slots a{display:inline-flex; align-items:center; min-height:44px; padding:4px 0}
  .om-contact-list .elementor-icon-list-item{margin-bottom:14px !important}
  .om-contact-list .elementor-icon-list-text,
  .om-contact-list a{display:inline-flex; align-items:center; min-height:44px}
  .site-footer .menu-link{display:inline-block; padding:9px 0; line-height:26px}
  .om-buy a.elementor-button{min-height:50px; font-size:.88rem !important; padding:14px 16px !important}

  /* Karte: manj notranjega odmika — vsebina se prej pokaže, brati je enako lahko. */
  .om-needs .elementor-icon-list-item{padding:18px 18px !important}
  .om-needs .elementor-icon-list-items{gap:14px}
  .om-feature .elementor-icon-box-content{padding:24px 20px}
  .om-price-main{padding:32px 22px !important}
  /* Elementorjev privzeti razmik med gradniki (20px) se v visokih karticah
     sešteje v več sto pikslov praznine; na telefonu zadošča polovica. */
  .om-price .elementor-widget:not(:last-child),
  .om-price-main .elementor-widget:not(:last-child){margin-bottom:12px !important}
  .om-price .elementor-widget-wrap{padding:34px 20px 24px !important}
  .om-price .elementor-widget-spacer{display:none}
  .om-form-card{padding:26px 20px !important}
  .om-booking{padding:26px 20px !important}
  .om-prices-row .om-price{flex:1 1 100%}

  /* Okrasni napis v naslovni sekciji je širši od zaslona — hero ga poreže,
     da stran nikoli ne dobi vodoravnega drsnika. (overflow-x na body ne pride
     v poštev: pokvari lepljivo glavo.) */
  /* Vodni žig: pri 160vw ga rob zaslona odreže na pol — na telefonu naj bo
     cel viden, zato ga zožimo pod širino zaslona. */
  .om-hero .elementor-widget.om-hero-mark{
    bottom:236px !important; width:min(420px,88vw) !important; opacity:.13;
  }

  /* Mobilni meni (Astra): postavke so bile visoke 35px in pisane z 11px —
     premalo za prst in za branje. */
  #ast-hf-mobile-menu .menu-link{
    display:flex; align-items:center; min-height:52px;
    padding:0 22px; font-size:.95rem; letter-spacing:.01em;
    border-bottom:1px solid var(--om-line);
  }
  #ast-hf-mobile-menu > .menu-item:last-child > .menu-link{border-bottom:0}
  .main-header-bar-navigation.toggle-on #ast-hf-mobile-menu{
    box-shadow:0 18px 40px rgba(30,58,50,.12);
  }

  /* Dolge slovenske besede v ozkem stolpcu */
  .om-section p,
  .elementor-widget-text-editor p{overflow-wrap:break-word}
}

/* --- Najožji telefoni (iPhone SE in podobni) --- */
@media (max-width:380px){
  .om-section{padding:52px 0 !important}
  h1, .elementor-widget-heading h1.elementor-heading-title{font-size:clamp(1.75rem, 8vw, 2.1rem)}
  h2, .elementor-widget-heading h2.elementor-heading-title{font-size:clamp(1.4rem, 6.4vw, 1.7rem)}
  .elementor-widget-button .elementor-button,
  .elementor-widget-button a.elementor-button{padding:15px 22px !important; font-size:.78rem !important}
  .om-hero .elementor-widget.om-hero-mark{bottom:250px !important; width:min(330px,86vw) !important}
}

/* gumb za mobilni meni v barvi znamke */
.ast-mobile-menu-trigger-minimal,
.ast-mobile-menu-trigger-fill,
.ast-mobile-menu-trigger-outline{color:var(--om-brand-deep) !important; border-color:var(--om-line) !important}
.ast-mobile-menu-trigger-minimal svg,
.ast-mobile-menu-trigger-fill svg{fill:var(--om-brand-deep) !important}

/* ============================================================
   17. USKLADITEV Z ASTRO IN ELEMENTORJEM
   Astra svoje gumbe oblikuje z močnejšimi izbirniki kot .elementor-button,
   zato jih tu prepišemo z enakimi vrednostmi kot v razdelku Gumbi zgoraj.
   ============================================================ */
.elementor-widget-button .elementor-button,
.elementor-widget-button a.elementor-button,
.elementor-button-wrapper .elementor-button{
  background-color:var(--om-brand-deep) !important;
  color:#fff !important;
  border-radius:999px !important;
  border:1px solid transparent !important;
  padding:16px 34px !important;
  font-family:var(--om-font-body) !important;
  font-size:.95rem !important;
  font-weight:600 !important;
  letter-spacing:.01em;
}
.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus{
  background-color:var(--om-brand-dark) !important; color:#fff !important;
}
.om-btn-ghost a.elementor-button{
  background-color:transparent !important; color:var(--om-ink) !important;
  border-color:rgba(46,69,71,.28) !important; box-shadow:none;
}
.om-btn-ghost a.elementor-button:hover{
  background-color:var(--om-ink) !important; color:#fff !important; border-color:var(--om-ink) !important;
}
.om-btn-light a.elementor-button{background-color:#fff !important; color:var(--om-ink) !important; box-shadow:none}
.om-btn-light a.elementor-button:hover{background-color:var(--om-gold) !important; color:#fff !important}
.om-btn-small a.elementor-button{padding:13px 26px !important; font-size:.88rem !important}
.om-buy a.elementor-button{
  width:100%; padding:15px 16px !important; font-size:.88rem !important;
  letter-spacing:.01em; line-height:1.4;
}

/* ime strani ob logotipu skrijemo — napis nosi že logotip sam */
.site-header .site-title{display:none}


/* ============================================================
   18. PRIKAZOVANJE RAZDELKOV OB DRSENJU
   Razred .om-reveal doda JavaScript (functions.php), zato je stran
   brez njega in za iskalnike v celoti vidna takoj.
   ============================================================ */
.om-reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
  will-change:opacity, transform;
}
.om-reveal.om-vidno{opacity:1; transform:none; will-change:auto}
@media (prefers-reduced-motion: reduce){
  .om-reveal,.om-reveal.om-vidno{opacity:1; transform:none; transition:none}
}

/* ============================================================
   19. OBVESTILO O PIŠKOTKIH (desno spodaj)
   Stran nalaga samo lastne vire (pisave so lokalne, sledilnikov ni),
   zato gre za obvestilo o nujnih piškotkih in ne za upravljanje privolitev.
   Če se kdaj doda analitika ali vdelan video, to zamenja pravi vtičnik (Complianz).
   ============================================================ */
.om-piskotki{
  position:fixed; right:22px; bottom:22px; z-index:9999;
  width:min(360px, calc(100vw - 44px));
  background:#fff; border:1px solid var(--om-line); border-radius:18px;
  box-shadow:var(--om-shadow-m); padding:22px 24px;
  font-size:.92rem; line-height:1.6; color:var(--om-body);
  opacity:0; transform:translateY(16px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1);
}
.om-piskotki.om-vidno{opacity:1; transform:none}
.om-piskotki p{margin:0 0 16px}
.om-piskotki strong{
  display:block; font-family:var(--om-font-title); font-size:1.12rem;
  color:var(--om-ink); font-weight:400; margin-bottom:7px;
}
.om-piskotki button{
  font-family:var(--om-font-body); font-size:.9rem; font-weight:600;
  border:0; border-radius:999px; padding:12px 26px; min-height:44px; cursor:pointer;
  background:var(--om-brand-deep); color:#fff;
  transition:background .25s ease, transform .25s ease;
}
.om-piskotki button:hover{background:var(--om-brand-dark); transform:translateY(-2px)}
.om-piskotki button:focus-visible{outline:2px solid var(--om-brand-dark); outline-offset:3px}
@media (max-width:600px){
  .om-piskotki{right:12px; left:12px; bottom:12px; width:auto; padding:20px}
}
@media (prefers-reduced-motion: reduce){
  .om-piskotki{transition:none}
  .om-piskotki button:hover{transform:none}
}

/* ============================================================
   DRUGE PALETE — za zamenjavo prekopiraj vrednosti v :root zgoraj
   ------------------------------------------------------------
   A) Nebeško modra
      --om-night:#22384F; --om-brand:#6E9BC0; --om-brand-deep:#4E7DA4;
      --om-brand-dark:#3E668A; --om-brand-soft:#DCE9F2; --om-mist:#DED9EC;
      --om-body:#52646A;
      hero preliv: #E7F0F8 → #EDE9F3 → #F7F1E9
      temni pas:   #2B4A66 → #22384F → #1B2E42

   B) JUB Vitality 70 (620B)
      --om-night:#1E3A32; --om-brand:#41936C; --om-brand-deep:#2F7355;
      --om-brand-dark:#24614A; --om-brand-soft:#DDEBE3; --om-mist:#E2EBDF;
      --om-body:#4E635C;
      hero preliv: #E1EFE7 → #EDF1E7 → #F7F1E9
      temni pas:   #2E6B53 → #1E3A32 → #16302A

   C) JUB Vitality 75 (620C) — trenutno aktivna
   ============================================================ */