/* Osnovno */
.et-nav { position: fixed; z-index: 50; background:#fff; border-bottom:1px solid #eee; width: 100%; opacity: 0;}
/* pristupačni fallback */
@media (prefers-reduced-motion: reduce) {
  .et-nav { opacity: 1 !important; }
}

/* fade-in */
@keyframes et-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.et-nav.is-visible {
  animation: et-fade-in 320ms ease-out forwards;
  /* možeš malo zadržati, po želji */
  animation-delay: 120ms;
}

.et-nav__inner{
  margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  position:relative; z-index:50;
}
.et-nav__group{ display:flex; align-items:center; gap:24px; }

.et-logo{ font-weight:600; font-size:33px; color:#111; text-decoration:none;  width: auto;}

.et-item{ position:relative; }
.et-link{
  display:inline-block; padding:6px 4px;
  color:#111; text-decoration:none; font-weight:600;
  font-size: 19px;
  transition: color 0.25s ease; 
}
.et-link:hover{ color:#e30000; }

/* Mega panel */
.et-mega{
  display:none; position:absolute; top:100%; left:0;
  background:#fff; border:1px solid #eee;
  box-shadow:0 12px 24px rgba(0,0,0,.08);
  border-radius:12px; padding:10px 14px; min-width:720px;
}
.et-mega__row{
  display:flex; align-items:center; gap:16px;
  white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.et-mega__link{
  transition: all 200ms ease;
  display:inline-block; padding:6px 4px; border-radius:8px;
  color:#111; text-decoration:none; font-weight:600;
}
.et-mega__link:hover{ background:#f5f5f5; }
.et-mega__link--accent{ color:#e30000; }

/* Otvori na hover i na fokus (tastatura) */
.et-has-mega:hover .et-mega,
.et-has-mega:focus-within .et-mega{ display:block; }

/* Pobrinimo se da ništa ne “reže” panel */
.et-nav, .et-nav__inner{ overflow:visible; }

/* Minimalni responsive (stack na užem ekranu) */
@media (max-width: 991px){
  .et-nav__inner{ flex-wrap:wrap; row-gap:8px; }
  .et-logo{ order:1; width:auto; text-align:center; }
  .et-nav__group:first-child{ order:2; }
  .et-nav__group:last-child{ order:3; }
  .et-mega{ min-width: 86vw; }
}

/* Aktivna stavka u mega meniju (desktop) i u mobilnom podmeniju */
.et-mega__link.is-active,
.et-submenu a.is-active {
  color:#e30000;
  font-weight:700;
}





/* ========== HAMBURGER ========== */
.et-burger{
    display:none; background:transparent; border:0; padding:6px; cursor:pointer;
    margin-left:auto; /* gurne ga desno kad je logo centar */
    position: absolute;
    right: 0;
  }
  .et-burger span{
    display:block; width:26px; height:2px; background:#111; margin:5px 0; transition:transform .2s ease, opacity .2s ease;
  }
  /* X stanje (opciono) */
  .et-burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .et-burger.is-open span:nth-child(2){ opacity:0; }
  .et-burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  
  /* ========== MOBILNI PANEL ========== */
  .et-mobile{
    display:none;
    position:fixed; left:0; right:0; top:var(--et-nav-top, 64px);
    background:#fff; border-top:1px solid #eee; box-shadow:0 10px 24px rgba(0,0,0,.08);
    z-index:999; padding:10px 16px;
  }
  .et-mobile.is-open{ display:block; }
  .et-mobile__list{ list-style:none; margin:0; padding:0; }
  .et-mobile__item{ border-bottom:1px solid #f1f1f1; }
  .et-mobile__link, .et-subtoggle{
    display:flex; width:100%; justify-content:space-between; align-items:center;
    padding:14px 4px; text-decoration:none; color:#111; font-weight:600;
    background:none; border:0; cursor:pointer; font-size:18px;
    transition: color .2s ease;
  }
  .et-mobile__link:hover, .et-subtoggle:hover{ color:#e30000; }
  
  /* SUBMENU (dropdown na klik) */
  .et-submenu{ display:none; padding:6px 0 12px 4px; }
  .et-submenu a{
    display:block; padding:10px 4px; text-decoration:none; color:#111; border-radius:8px;
    transition: background-color .15s ease, color .15s ease;
    font-size: 16px;
  }
  .et-submenu a:hover{ background:#f5f5f5; }
  .et-submenu a.accent{ color:#e30000; }
  
  /* Aktivno stanje preko klase .is-open na parentu */
  .et-has-sub.is-open > .et-subtoggle{ color:#e30000; }
  .et-has-sub.is-open > .et-submenu{ display:block; }
  
  /* ========== BREAKPOINT ≤ 991px ========== */
  @media (max-width: 991px){
    /* centriraj logo, sakrij desktop grupe */
    .et-nav__inner{ flex-wrap:nowrap; }
    .et-nav__group{ display:none; }
    .et-logo{ margin:0 auto; }     /* logo centar */
    .et-burger{ display:block; }   /* pokaži hamburger */
  
    /* visina headera – koriguj po potrebi */
    :root{ --et-nav-top: 64px; }
  }



  /*responsive for eurotrend link*/
  @media only screen and (max-width: 767px) {
    .et-logo {
      font-size: 27.65px;
    }
    .et-mobile{
      top: 61px;
    }
    .et-subtoggle{
      font-size: 17px;
    }
  }
  @media only screen and (max-width: 479px) {
    .et-logo {
      font-size: 19.2px;
    }
    .et-mobile{
      top: 50px;
    }
    .et-subtoggle{
      font-size: 16px;
    }
    .et-submenu a{
      font-size: 15px!important;
    }

  }
  
  



  /* Layout toolbar-a */
.et-toolbar { margin-top: 24px; }

.et-toolbar .container {margin:0 auto;}
.et-toolbar__row{
  display:flex; align-items:center; gap:16px;
  padding: 16px 0 16px 0;
}




@media (max-width: 991px){
  .et-toolbar { margin-top: 16px; }
  .et-toolbar__row{
    display:flex; align-items:center; gap:16px;
    padding: 8px 0 8px 0;
  }
}
@media (max-width: 767px){
  .et-toolbar__row{
    font-size: 14px;
  }
  .et-search input{
    font-size: 14px;
  }
}



/* Brend dropdown */
.et-filter--brand{ position:relative; }
.et-dd__button{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border:1px solid #e6e6e6; border-radius:10px;
  background:#fff; font-weight:600; color:#111; cursor:pointer;
}
.et-dd__button:hover{ border-color:#d8d8d8; }
.et-caret{ font-size:12px; line-height:1; }

.et-dd{
  position:absolute; top:calc(100% + 8px); left:0;
  width:min(420px, 92vw);
  background:#fff; border:1px solid #eee; border-radius:12px;
  box-shadow:0 12px 24px rgba(0,0,0,.08);
  padding:10px; z-index:30;
}
.et-dd__list{
  display:grid; grid-template-columns:1fr 1fr; gap:8px 16px;
  max-height: 280px; overflow:auto; padding:6px 2px;
}
.et-chk{ display:flex; gap:8px; align-items:center; font-weight:600; color:#111; }
.et-chk input{ transform: translateY(1px); }

.et-dd__actions{
  display:flex; justify-content:flex-end; gap:8px; margin-top:10px;
}
.et-btn{
  padding:10px 12px; border-radius:10px; font-weight:700; cursor:pointer; border:1px solid transparent;
}
.et-btn--primary{ background:#e30000; color:#fff; }
.et-btn--primary:hover{ filter:brightness(.95); }
.et-btn--ghost{ background:#fff; border-color:#e6e6e6; }
.et-btn--ghost:hover{ border-color:#d8d8d8; }

/* Pretraga + Sort */
.et-search{ 
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex:1; }
.et-search input{
  width:100%; padding:10px 12px; border:1px solid #e6e6e6; border-radius:10px; font-size:16px;
}

.et-search__btn{
 background-color: transparent; 
}
.et-search input:focus{ outline:none; border-color:#d8d8d8; }

.et-sort{ display:flex; align-items:center; gap:10px; }
.et-sort__label{ color:#555; font-weight:600; }
.et-sort__select{
  padding:10px 12px; border:1px solid #e6e6e6; border-radius:10px; background:#fff; font-weight:600;
}


/* Responsive */
@media (max-width: 900px){
  .et-toolbar__row{ flex-wrap:wrap; row-gap:12px; }
  .et-search{ min-width: 180px; order:3; width:100%; }
  .et-sort{ margin-left:auto; }
}


@media (max-width: 991px){
  .et-toolbar { margin-top: 16px; }
  .et-toolbar__row{
    display:flex; align-items:center; gap:16px;
    padding: 8px 0 8px 0;
  }
}
@media (max-width: 767px){
  .et-toolbar__row{
    font-size: 14px;
        flex-direction: column;
        justify-content: left;
        align-items: end;
  }
  .et-search input{
    font-size: 14px;
  }
}


/* --- default: desktop prikazuje dropdown, tablet prikazuje ikonu --- */
.et-filterbtn{ display:none; align-items:center; gap:8px; padding:10px 12px;
  border:1px solid #e6e6e6; border-radius:10px; background:#fff; font-weight:700; cursor:pointer;
}
.et-filterbtn:hover{ border-color:#d8d8d8; }

/* OFF-CANVAS panel */
.et-offcanvas{ position:fixed; inset:0; z-index: 100; display:none; }
.et-offcanvas.is-open{ display:block; }

.et-offcanvas__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.28);
  opacity:0; transition: opacity .2s ease;
}
.et-offcanvas.is-open .et-offcanvas__backdrop{ opacity:1; }

.et-offcanvas__inner{
  position:absolute; right:0; top:0; height:100%; width:min(360px, 92vw);
  background:#fff; border-left:1px solid #eee; box-shadow:-12px 0 24px rgba(0,0,0,.08);
  display:flex; flex-direction:column; gap:12px;
  transform: translateX(100%); transition: transform .25s ease;
  padding:14px;
}
.et-offcanvas.is-open .et-offcanvas__inner{ transform: translateX(0); z-index: 101;}

.et-offcanvas__head{ display:flex; justify-content:space-between; align-items:center; }
.et-offcanvas__close{ border:0; background:transparent; font-size:20px; cursor:pointer; }

.et-offcanvas__list{
  display:grid; grid-template-columns:1fr; gap:10px; overflow:auto; padding-right:6px;
}
.et-offcanvas__actions{ margin-top:auto; display:flex; justify-content:flex-end; gap:8px; }

/* --- breakpoint: tablet & dolje --- */
@media (max-width: 900px){
  /* sakrij desktop dropdown “Brendovi”, prikaži filter ikonu */
  .et-filter--brand{ display:none; }
  .et-filterbtn{ display:inline-flex; }

  /* raspored: filter ikona lijevo, search preko cijele širine (ako ga ima), sort desno */
  .et-toolbar__row{ flex-wrap:wrap; }
}



@media (max-width: 991px){
  #no-results{
    margin-top: 20px!important;
    font-size: 18px;
  }
}
@media (max-width: 767px){
  #no-results{
    margin-top: 16px!important;
    font-size: 16px;
  }
}






/*ABOUT US AND HOW TO ORDER CSS*/

#about-us-section-id{
  padding-top: 110px;
}
#about-us-section-id .home-section-left-content-wrapper{
  max-width: 772px;
  padding-top: 40px;
}
.how-to-order-section{
  margin-top: 80px;
}
.how-to-order-section h3{
  text-align: center;
  margin-bottom: 50px;
}
.steps-to-order-wrapper{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px
}
.steps-to-order-wrapper .step-wrapper{
  border: 1px solid var(--border-gray);
  padding: 24px 75px;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  width: 100%;
}
.step-left-content-wrapper{
  max-width: 480px;
}


@media (max-width: 991px){
  #about-us-section-id{
    padding-top: 40px;
  }
  #about-us-section-id h2{
    text-align: center!important;
  }
  #about-us-section-id .home-section-left-content-wrapper{
    max-width: 100%;
  }
  .how-to-order-img-wrapper{
    text-align: center!important;
  }
  .how-to-order-img-wrapper img{
    max-width: 60%;
  }
  .how-to-order-section{
    margin-top: 60px;
  }
  .how-to-order-section h3{
    margin-bottom: 40px;
    font-size: 33.81px;
  }
  .steps-to-order-wrapper .step-wrapper{
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .step-left-content-wrapper h4{
    text-align: center!important;
  }
}


@media screen and (max-width: 767px) {
  .how-to-order-section{
    margin-top: 40px;
  }
  .how-to-order-section h3{
    font-size: 23.04px;
    margin-bottom: 32px;
  }
  .steps-to-order-wrapper .step-wrapper{
    gap: 18px;
  }
  .step-left-content-wrapper h4{
    font-size: 19.2px;
  }
  .steps-to-order-wrapper .step-wrapper{
    padding: 18px 32px;
  }
  .steps-to-order-wrapper{
    gap: 24px;
  }
}


@media screen and (max-width: 479px) {
  .how-to-order-section{
    margin-top: 32px;
  }
  .how-to-order-section h3{
    font-size: 19.2px;
    margin-bottom: 20px;
  }
  #about-us-section-id .home-section-left-content-wrapper{
    padding-top: 20px;
  }
  .steps-to-order-wrapper{
    gap: 20px;
  }
  .step-left-content-wrapper{
    text-align: center;
  }
  .step-left-content-wrapper img{
    max-width: 80%;
  }
}




.about-us-main-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 32px;
}

.about-us-content-wrapper{
  padding: 24px 64px;
  border: 1px solid var(--border-gray);
  border-radius: 20px;
  max-width: 603px;
  height: 100%;
}
.about-us-content-wrapper-our-story{
  padding-bottom: 84px;
}

@media (max-width: 991px){
  .about-us-content-wrapper-our-story{
    padding-bottom: auto;
  }
  .about-us-main-wrapper{
    flex-direction: column;
  }
  .about-us-main-wrapper .about-us-content-wrapper{
    max-width: 100%;
  }
  .about-us-main-wrapper .about-us-content-wrapper p{
    text-align: left!important;
  }
}
@media screen and (max-width: 767px) {
 .about-us-content-wrapper{
  padding: 16px 32px;
 }
 .about-us-content-wrapper .heading-4{
  font-size: 19.2px!important;
  font-weight: 600!important;
 }
 .about-us-main-wrapper{
  gap: 20px;
 }
}


@media screen and (max-width: 479px) {
  .about-us-content-wrapper{
    padding: 12px 20px;
   }
   .about-us-content-wrapper .heading-4{
    font-size: 16px!important;
    font-weight: 600!important;
   }
   .about-us-main-wrapper{
    gap: 16px;
   }
  }