.elementor-icon-wrapper {
	cursor: pointer;
}

#hero-img {
	background-position-y: 0;
}

.home .elementor-location-header {
	position: fixed;
	z-index: 999;
	border-bottom: 1px solid var(--white);
}
.home .elementor-location-header #oppio-nav {
	background-color: transparent !important;
}
/* .home .elementor-location-header.nav-scroll #oppio-nav {
	background-color: var(--project-green-dark) !important;
} */
/* body:not(.home) .elementor-location-header.nav-scroll #oppio-nav, */
.home .elementor-location-header.nav-scroll #oppio-nav {
	background-color: var(--project-light);
}

.home .elementor-6307 .elementor-element.elementor-view-default .elementor-icon,
.home .elementor-6368 .elementor-element.elementor-view-default .elementor-icon {
  color: var(--project-light) !important;
}

.home .elementor-sticky__spacer {
    display: none !important;
}

.dark-logo {
	display: none !important;
}
body:not(.home) .dark-logo {
	display: block !important;
}

body.home .light-logo {
	display: block !important;
}
body:not(.home) .light-logo {
	display: none !important;
}

/* OPPIO – zmena 31. 8. 2026
   Hlavička sa zlievala so stránkou: pozadie bolo #FDFBEF (podklad stránky
   je #FAF7F0) a linka bola biela, teda neviditeľná.
   Teraz: biele pozadie a linka #D7CDB9 – rovnaká ako pod nadpismi sekcií
   a okolo navigácie v e-shope.
   Návrat späť: background-color zmazať a farbu linky vrátiť
   na rgba(255, 255, 255, 0.7). */
#oppio-nav__main {
    background-color: #FFFFFF;
    border-bottom: 1px solid #D7CDB9;
}

#oppio-nav__contact p {
    margin: 0;
}

.home .elementor-location-header #oppio-nav {
	background-color: var(--project-green-dark);
}
body:not(.home) .elementor-location-header #oppio-nav {
	background-color: var(--project-light);
}

.custom-nav-sin a {
	font-size: 22px;
    font-weight: bold;
    color: var(--project-light);
    text-transform: uppercase;
	margin-right: 7%;
	transform: all 0.33 ease;
}
.custom-nav-sin a:hover,
.custom-nav-sin a:focus {
	color: var(--project-light-2);
}

.page-id-6309 .elementor-menu-cart--items-indicator-bubble .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty[data-counter] {
	color: var(--project-light);
}

/* SCROLL NAV color text, icons */
body:not(.home) #oppio-nav__main ul.menu > li > a,
body:not(.home) #oppio-nav__main .elementor-icon svg,
body:not(.home) #oppio-nav__main .sin-cart-header__icon--wrapper svg,
body:not(.home) #oppio-nav__main .sin-price {
	color: var(--black) !important;
	fill: var(--black) !important;
}


/* #oppio-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  transition: transform 0.3s ease;
}

#oppio-nav.nav-hidden {
  transform: translateY(-100%);
} */

#oppio-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform; /* Optimalizácia pre animácie */
}

#oppio-nav.nav-hidden {
  transform: translateY(-100%);
}

/* Ochrana pre dropdown menu */
#oppio-nav:hover {
  transform: translateY(0) !important;
}

/* Mobile optimalizácia */
@media (max-width: 768px) {
  #oppio-nav {
    transition: transform 0.25s ease-out;
  }
}

/* NAvigation */
#oppio-nav.no-float {
    position: fixed !important;
    top: 0 !important;
    transform: none !important;
    z-index: 9999;
}

body.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
}


/* =====================================================================
   OPPIO – mobilné menu a ovládacie prvky v hlavičke
   Pridané 31. 8. 2026, overené naživo na oppio.sk pri šírke 375 px
   ---------------------------------------------------------------------
   PREČO SA PODMENU OTVÁRALO NABOK

   Mobilné menu nie je Elementorovo mobilné menu. Hamburger otvára
   Elementor popup č. 4227 a v ňom je nav menu vykreslené ako
   D E S K T O P O V É  (trieda .elementor-nav-menu--main).
   Desktopové menu vysúva podmenu ako plávajúci panel:

       position: absolute;  left: 0;  top: 46px;  width: 156px;

   Na úzkej obrazovke ho SmartMenus posunie doľava a skončí mimo
   displeja — vidno z neho len biely prúžok pri ľavom okraji.

   Popup je vykreslený na konci stránky, NIE v hlavičke. Preto naň
   nezaberajú pravidlá viazané na .elementor-location-header.
   Správny rozsah je .elementor-popup-modal.
   ===================================================================== */

/* ---------- 1. Ikony v hlavičke: minimálne 44 × 44 ----------
   Odmerané: ikona účtu mala 26 × 19 px, košík 50 × 34 px.
   Minimum na pohodlné ťuknutie prstom je 44 × 44.
   min-height a min-width sú spodná hranica, nie pevná veľkosť,
   takže na počítači sa nič nemení.
   Košík je vlastný prvok z OPPIO mini-cartu (button.sin-minicart-toggle),
   nie Elementorov — preto sú tu obidva selektory. */
#oppio-nav__main .user-icon,
#oppio-nav__main .sin-minicart-toggle,
#oppio-nav__main .sin-cart-header,
#oppio-nav__main .elementor-menu-cart__toggle_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

/* ---------- 2. Mobilné menu v popupe ----------
   Hranica 1024 px: pri tejto šírke je na webe už hamburger
   a desktopové menu nie je vidieť — overené. */
@media (max-width: 1024px) {

    /* 2a. HLAVNÁ OPRAVA
       Podmenu sa vráti do toku: pribudne pod rodičom cez celú šírku.
       !important je tu nutné — SmartMenus zapisuje polohu priamo
       do atribútu style. */
    .elementor-popup-modal .elementor-nav-menu .sub-menu {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        box-shadow: none !important;
        border: 0 !important;
        background: transparent !important;
    }

    /* 2b. Položky prvej úrovne: 56 px vysoké, čitateľné písmo.
       Ľavý okraj drží popup, preto tu vlastné odsadenie nedávame —
       všetky položky prvej úrovne tak začínajú na jednej linke. */
    .elementor-popup-modal .elementor-nav-menu a.elementor-item {
        display: flex;
        align-items: center;
        min-height: 56px;
        padding: 0;
        font-size: 17px;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: .01em;
        color: #252525;
        background: transparent !important;
    }

    /* 2c. Šípka hneď za slovom, nie pri pravom okraji.
       Prepínačom je celý riadok, takže šípka nie je terč na ťuknutie,
       ale značka — a značka patrí k slovu. Pri okraji, sama v prázdnom
       stĺpci, pôsobila odtrhnuto.
       Pozor: pevná výška (height) by riadok natiahla na 82 px —
       preto align-self: stretch. */
    .elementor-popup-modal .elementor-nav-menu li.menu-item-has-children > a.elementor-item {
        justify-content: flex-start;
    }
    .elementor-popup-modal .elementor-nav-menu .sub-arrow {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex: none;
        width: auto;
        margin: 0 0 0 2px;
        padding: 0 8px;
        align-self: stretch;
        min-height: 0;
        transition: transform .18s ease;
    }
    .elementor-popup-modal .elementor-nav-menu .sub-arrow svg,
    .elementor-popup-modal .elementor-nav-menu .sub-arrow i {
        width: 11px;
        height: 11px;
        font-size: 11px;
    }
    /* Po rozbalení sa šípka otočí — vidno, že je otvorené. */
    .elementor-popup-modal .elementor-nav-menu li.menu-item-has-children.highlighted > a .sub-arrow,
    .elementor-popup-modal .elementor-nav-menu li.menu-item-has-children.elementor-active > a .sub-arrow,
    .elementor-popup-modal .elementor-nav-menu li.menu-item-has-children[aria-expanded="true"] > a .sub-arrow {
        transform: rotate(180deg);
    }

    /* 2d. Podpoložky: odsadené o 20 px, menšie a tlmenejšie.
       Odsadenie je zhodné s tým, ktoré dáva Elementor, aby sa
       obidve hodnoty nebili a ľavá hrana bola jedna. */
    .elementor-popup-modal .elementor-nav-menu .sub-menu a.elementor-item {
        min-height: 50px;
        padding-left: 20px !important;
        font-size: 15.5px;
        font-weight: 500;
        color: #252525;
        opacity: .7;
    }

    /* 2e. Žiadny tmavý pruh na aktívnej položke.
       Elementor podfarbuje položku aktuálnej stránky tmavou plochou,
       ktorá sa ťahá cez celú šírku panela a lícuje s rodičmi, hoci
       text v nej je odsadený — pôsobí to nezarovnane.
       Aktuálnu stránku označíme len značkovou zelenou. */
    .elementor-popup-modal .elementor-nav-menu a.elementor-item.elementor-item-active,
    .elementor-popup-modal .elementor-nav-menu a.elementor-item:hover,
    .elementor-popup-modal .elementor-nav-menu a.elementor-item:focus {
        background: transparent !important;
        color: #123F32 !important;
        opacity: 1;
    }
}