:root {

  --bg-white: #F9F8F7;
  --dark-gray: #131210;
  --light-gray: #5A5450;
  --body-text-black: #0A0A0A;
  --extra-light-gray: #CCCCCC;
  --footer-text-gray: #B0AFAE;
  --footer-title-gray: #7F7E7D;
}




/* Osnovno */
.et-nav { position: fixed; z-index: 50; background:var(--bg-white); 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:24px 0 24px 0;
  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-family: "Cormorant Garamond", serif; font-weight:600; font-size:27px; color:var(--dark-gray); text-decoration:none;  width: auto; letter-spacing: 8%; text-transform: uppercase;}

.et-item{ position:relative; }
.et-link{
  display:inline-block; padding:6px 4px;
  color:var(--light-gray); text-decoration:none; font-weight:300;
  font-size: 16px;
  transition: color 0.25s ease; 
}
.et-link:hover{ color: var(--dark-gray); }

/* 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);
   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; 
  color:var(--light-gray); text-decoration:none; font-weight:300;
}
.et-mega__link:hover{ background:var(--bg-white); }
.et-mega__link--accent{ color:var(--dark-gray); font-weight: 500; }

/* 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; 
  padding-top: 12px;
  padding-bottom: 12px;}
  .et-logo{ order:1; width:auto; text-align:center; font-size: 19.2px; }
  .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: var(--dark-gray);
  font-weight:500;
}





/* ========== 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:50px;
    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 var(--extra-light-gray); }
  .et-mobile__link, .et-subtoggle{
    display:flex; width:100%; justify-content:space-between; align-items:center;
    padding:10px 0; text-decoration:none; color:var(--dark-gray); font-weight:400;
      font-family: "Jost", sans-serif;letter-spacing: 4%;
    background:none; border:0; cursor:pointer; font-size:16px;
    transition: color .2s ease;
  }
  .et-mobile__link:hover, .et-subtoggle:hover{ font-weight: 500; }
  
  /* 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{ font-weight: 500; }
  
  /* Aktivno stanje preko klase .is-open na parentu */
  .et-has-sub.is-open > .et-subtoggle{ font-weight: 500; }
  .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: 19px;
    }
    .et-mobile{
      top: 50px;
    }
    .et-subtoggle{
      font-size: 16px;
    }
  }
  @media only screen and (max-width: 479px) {
    .et-logo {
      font-size: 16px;
    }
    .et-mobile{
      top: 46px;
    }
    .et-subtoggle{
      font-size: 13.33px;
    }
    .et-submenu a{
      font-size: 13.33px!important;
    }
      .et-mobile__link, .et-subtoggle{
    font-size: 13.33px;
  }

  }
  
  



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

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




@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:8px 24px; border:1px solid var(--extra-light-gray);
  background:transparent; font-weight:400; color:var(--dark-gray); cursor:pointer;font-size: 13.33px; font-family: "Jost", sans-serif;  text-transform: uppercase; letter-spacing: 4%;
}
.et-dd__button:hover{ border-color:#d8d8d8; }


.et-dd{
  position:absolute; top:calc(100% + 8px); left:0;
  width:min(420px, 92vw);
  background:var(--bg-white); border:1px solid var(--extra-light-gray); 
 
  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:400; color:var(--dark-gray); font-family: "Jost", sans-serif; letter-spacing: 4%; }
.et-chk input{ transform: translateY(1px); }

.et-dd__actions{
  display:flex; justify-content:flex-end; gap:8px; margin-top:10px;
}
.et-btn{
  padding:8px 20px; font-weight:400; cursor:pointer; border:1px solid var(--extra-light-gray); font-family: "Jost", sans-serif; letter-spacing: 4%; font-size: 16px;
}
.et-btn--primary{ background:var(--dark-gray); color:var(--bg-white); }
.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;
  border: 1px solid var(--extra-light-gray);
  gap: 1px;
  flex:1; }
.et-search input{
  width:100%; padding:8px 8px 8px 0; font-size:13.33px; font-weight: 400; font-family: "Jost", sans-serif; text-transform: uppercase; background-color: transparent; border: none;
  letter-spacing: 4%;
}

.et-search__btn{
 background-color: transparent; 
 padding-left: 12px;

}
.et-search__btn img{
   max-width: 24px;
 max-height: 20px;
}
.et-search input:focus{ outline:none; border-color:#d8d8d8; }

.et-sort{ display:flex; align-items:center; gap:10px; }
.et-sort__label{ color:var(--dark-gray); font-weight:400; letter-spacing: 4%; font-family: "Jost", sans-serif; text-transform: uppercase; margin-bottom: 0!important;}
.et-sort__select{
  padding:8px 24px; border:1px solid var(--extra-light-gray); background:transparent; font-weight:400; letter-spacing: 4%; font-family: "Jost";
}


/* 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;
  }
  .et-sort__select{
  padding:8px 12px; 
}
}
@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:8px 12px;
  border:1px solid var(--extra-light-gray);  background:transparent; font-weight:400; cursor:pointer;  font-family: "Jost", sans-serif; letter-spacing: 4%;
}
.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{

  border-bottom: 1px solid var(--extra-light-gray);
  overflow: hidden;
}
#about-us-section-id .home-section-left-content-wrapper{
  max-width: 772px;
  padding-bottom: 64px;
  padding-top: 80px;
}
.about-us-main-image{

  position: absolute;
  bottom: 0;
  right: 0;
  object-fit: cover;
}

.main-section-heading{
  font-size: 47.67px;
  font-weight: 600;
  font-family: "Cormorant Garamond", serif;
}

.how-to-order-section{
  margin-top: 64px;
}
.how-to-order-section h3{
  text-align: center;
  margin-bottom: 40px;
}
.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(--extra-light-gray);
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  width: 100%;
    background-color: white;
}
.steps-to-order-wrapper .step-wrapper .step-indicator-wrapper{
    font-family: "Jost", sans-serif;
    font-weight: 500;
    font-size: 33.18px;
    color: var(--extra-light-gray);
}
.step-left-content-wrapper{
  max-width: 480px;
}
.home-main-img-wrapper .about-us-main-img{
  object-fit: cover;
  object-position: center;
  height: 100%;
}




@media (max-width: 991px){
  .steps-to-order-wrapper .step-wrapper .step-indicator-wrapper{

    font-size: 27.65px;

}
  .about-us-section-main-wrapper{
    display: flex;
  }

.about-us-main-image{
  max-width: 75%;
}
  .main-section-heading{
  font-size: 33.16px;
  font-weight: 600;
  font-family: "Cormorant Garamond", serif;
}
  #about-us-section-id .home-section-left-content-wrapper{
  max-width: 772px;
  padding-bottom: 40px;
  padding-top: 0;


}
  #about-us-section-id{
    padding-top: 40px;
  }
  .how-to-order-main-section{
    padding-top: 0!important;
  }
  #about-us-section-id h2{
    text-align: left!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-section{
    margin-top: 32px;
  }
  .how-to-order-section h3{
    margin-bottom: 32px;
    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: left!important;
    font-size: 27.62px;
  }
}

@media (max-width: 910px){
.about-us-main-image{
  max-width: 84%;
}

}
@media (max-width: 850px){
.about-us-main-image{
  max-width: 95%;
}

}


@media screen and (max-width: 767px) {
    .steps-to-order-wrapper .step-wrapper .step-indicator-wrapper{

    font-size: 23.04px;

}
  .about-us-section-main-wrapper{
    gap: 83px;
    padding-top: 0!important;
  }
    .about-us-section-left-content-wrapper{
    padding-top: 0!important;
  }
  .main-section-heading{
    font-size: 27.65px;
  }
  .about-us-main-image{
  max-width: 100%;
}
  .how-to-order-section{
    margin-top: 20px;
  }
  .how-to-order-section h3{
    font-size: 23.04px;
    margin-bottom: 20px;
  }
  .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;
  }
    #about-us-section-id .home-section-left-content-wrapper{
  padding-top: 0;
  }
  #about-us-section-id{
    padding-top: 32px;
  }
}

@media screen and (max-width: 680px) {
  .about-us-section-main-wrapper{
    gap: 20px;
  }
}

@media screen and (max-width: 614px) {
  .about-us-section-main-wrapper{
    display: block!important;
  }
  .home-section-right-content-wrapper{
    /*height: 370px;*/
  }
  .about-us-main-image{
    max-width: 410px;
  }
}


@media screen and (max-width: 479px) {
  .step-left-content-wrapper h4{
    font-size: 16px;
  }
    .steps-to-order-wrapper .step-wrapper{
    padding: 12px 20px;
  }
      .steps-to-order-wrapper .step-wrapper .step-indicator-wrapper{
    text-align: left;
    font-size: 19.2px;

}
  #about-us-section-id{
    padding-top: 20px;
  }
    .home-section-right-content-wrapper{
    /*height: 332px;*/
  }
  .about-us-main-image{
    max-width: 340px;
  }
  #about-us-section-id .home-section-left-content-wrapper{
    padding-bottom: 0!important;
  }
  .how-to-order-section{
    margin-top: 20px;
  }
  .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: 100%;
  }
}




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

.about-us-content-wrapper{
  padding: 32px 24px;
  width: 100%;
  height: 100%;
  background-color: white;
}
.about-us-content-wrapper-our-story{
  border-left: 0.5px solid var(--extra-light-gray);
}
.about-us-content-wrapper-left-content-wrapper{
  border-right: 0.5px solid var(--extra-light-gray);
}
.about-us-heading4{
  margin-top: 0!important;
    margin-bottom: 0!important;
}
.about-us-span-text-bold{
  font-weight: 400!important;
}
@media (max-width: 991px){
  .about-us-heading4{
  font-size: 27.65px;
}
.about-us-content-wrapper-left-content-wrapper{
  border: none;
}
.about-us-content-wrapper-our-story{
  border: none;
}
  .about-us-content-wrapper-our-story{
    padding-bottom: auto;
  }
  .about-us-main-wrapper{
    flex-direction: column;
    gap: 32px;
  }
  .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: 12px 16px;
 }
 .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;
   }
  }

  @media screen and (max-width: 350px) {
    .home-section-right-content-wrapper{
    /*height: 280px;*/
  }
  .about-us-main-image{
    max-width: 280px;
  }}