:root{
    --navbar-h: 84px;
    --ink: #1a1a1a;
    --paper: #ffffff;
  }
  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ height:100%; overflow-x: hidden; }
  body{ height:100%; }
  /* preglednik sam pazi da zadnji redak odlomka ne ostane s jednom rijeci */
  p{
    text-wrap: pretty;
  }
  body{
    font-family: 'DM Sans', sans-serif;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
  }

  /* ---------- NAVBAR ---------- */
  .navbar{
    /* jednaka margina gore i sa strana; visina se ravna po logu, pa logo
       stoji 40px od vrha i 40px od lijevog ruba, u liniji s hero tekstom ispod */
    height: auto;
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px;
    position: relative;
    z-index: 10;
  }
  .nav-logo{
    display: block;
    flex-shrink: 0;
    line-height: 0;
  }
  .nav-logo img{
    width: 52px;
    height: auto;
    display: block;
  }
  .logo-block{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    line-height: 1;
  }
  .logo-title{
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-size: 24px;
    letter-spacing: -0.05em;
  }
  .logo-sub{
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: -0.05em;
    color: #444;
  }

  .nav-right{
    display: flex;
    align-items: center;
    gap: 40px;
  }
  .nav-links{
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
  }
  .nav-links a{
    position: relative;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: 0;
    text-decoration: none;
    color: var(--ink);
    text-transform: uppercase;
    padding-bottom: 3px;
  }
  .nav-links a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--ink);
    transition: width 0.3s ease;
  }
  .nav-links a:hover::after{
    width: 100%;
  }
  .menu-icon{
    /* burger je samo za mobilnu/tablet verziju - na desktopu su poveznice
       vec ispisane u .nav-links, pa se ikona ondje ne prikazuje duplo */
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    padding: 0;
    position: relative;
    z-index: 210;
  }
  .menu-icon span{
    display: block;
    height: 1px;
    background: var(--ink);
    width: 100%;
    transition: transform 0.3s ease, opacity 0.25s ease;
  }
  .menu-icon.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .menu-icon.is-open span:nth-child(2){ opacity: 0; }
  .menu-icon.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

  .mobile-hero-menu{
    display: none;
  }

  /* ---------- SITE MENU (bocna ploha) ---------- */
  .site-menu{
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear 0.45s;
  }
  /* ostatak zaslona se samo zamuti */
  .site-menu-overlay{
    position: absolute;
    inset: 0;
    background: rgba(20,20,20,0.28);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .site-menu-panel{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 420px;
    max-width: 86vw;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 48px;
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(.22,.61,.36,1);
  }
  .site-menu.is-open{
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s linear 0s;
  }
  .site-menu.is-open .site-menu-overlay{ opacity: 1; }
  .site-menu.is-open .site-menu-panel{ transform: translateX(0); }

  .site-menu-links{
    display: flex;
    flex-direction: column;
  }
  .site-menu-links a{
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    transition: padding-left 0.35s ease, opacity 0.25s ease;
  }
  .site-menu-links a:first-child{ border-top: 1px solid rgba(0,0,0,0.1); }
  @media (hover: hover){
    .site-menu-links a:hover{ padding-left: 14px; opacity: 0.55; }
  }

  @media (max-width: 720px){
    .site-menu-panel{
      width: 100%;
      max-width: 84vw;
      padding: 30px 24px;
    }
    .site-menu-links a{
      font-size: 18px;
      padding: 14px 0;
    }
  }

  /* ---------- HERO ---------- */
  .hero{
    position: relative;
    height: calc(100vh - var(--navbar-h));
    height: calc(100svh - var(--navbar-h));
    min-height: 480px;
    background-color: #2b2b2b;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
  }
  /* fotografija/slajder je u svom sloju da se moze zoomirati bez utjecaja na tekst */
  .hero-photo{
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-color: #2b2b2b;
  }
  /* ---------- HERO SLAJDER (slike i/ili videi) ---------- */
  /* svaki .hero-slide moze sadrzavati <img> ili <video> - radi identicno
     na mobitelu i desktopu jer dijele isti sloj kao i dosadasnja fotografija */
  .hero-slide{
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s ease;
  }
  .hero-slide.is-active{
    opacity: 1;
  }
  .hero-slide img,
  .hero-slide video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .hero-slider-dots{
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .hero-slider-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
  }
  .hero-slider-dot.is-active{
    background: #fff;
    transform: scale(1.4);
  }
  /* crni gradient od dna prema vrhu */
  .hero-gradient{
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 100%);
  }
  /* logo u sredini i tri poveznice postoje samo na mobilnoj verziji */
  .hero-mobile{ display: none; }
  .hero-mobile-links{ display: none; }

  .hero-inner{
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 0 40px 40px;
  }
  .mobile-break{ display: none; }
  .mobile-hide-break{ display: inline; }
  .desktop-break{ display: inline; }

  .hero-copy{
    max-width: 560px;
    color: #fff;
  }
  .hero-copy h1{
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    line-height: 1.25;
    margin-bottom: 15px;
  }
  .hero-copy p{
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: 0;
    color: rgba(255,255,255,0.92);
    max-width: 420px;
  }

  .hero-actions{
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
  }
  .btn{
    height: 40px;
    padding: 0 26px;
    border-radius: 0;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* bez ovoga se dugme u uskom retku stisne, a tekst zbog nowrap iscuri
       izvan podloge na obje strane i djeluje kao da nije centriran */
    flex-shrink: 0;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
  .btn-light{
    background: #fff;
    color: var(--ink);
    border: 1px solid #fff;
  }
  .btn-light:hover{
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.8);
  }
  .btn-outline{
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.8);
  }
  .btn-outline:hover{
    background: #fff;
    color: var(--ink);
    border-color: #fff;
  }

  /* ---------- WINES SECTION ---------- */
  .wines{
    background: #F8F8F8;
    padding: 130px 48px 130px;
  }
  .wines-container{
    max-width: 1364px;
    margin: 0 auto;
  }
  .wines-header{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
  }
  .wines-header h2{
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    line-height: 1.25;
    color: var(--ink);
    flex-shrink: 0;
  }
  .scroll-indicator{
    position: relative;
    flex: 1;
    max-width: 480px;
    height: 2px;
    background: #dcdcdc;
    margin-bottom: 9px;
  }
  .scroll-indicator .scroll-fill{
    position: absolute;
    left: 0;
    top: 0;
    height: 2px;
    width: 90px;
    background: var(--ink);
  }
  .scroll-indicator-mobile{ display: none; }

  .wines-row-wrap{
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-top: 60px;
  }
  .wines-nav{
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    /* 400px (visina boxa vina) - 40px (visina strelice) = donji rubovi poravnati */
    margin-top: 360px;
  }
  .arrow-btn{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--ink);
    border-radius: 0;
    cursor: pointer;
    color: var(--ink);
    padding: 0;
    transition: border-radius 0.35s cubic-bezier(.22,.61,.36,1);
  }
  /* na hover kvadrat prelazi u krug */
  .arrow-btn:hover{ border-radius: 50%; }
  .arrow-btn svg{
    width: 16px;
    height: 16px;
    display: block;
  }

  .wines-row{
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    /* red se proteže do desnog ruba containera, tj. točno do kraja scroll indikatora */
    flex: 1;
    margin-left: 130px;
    overflow-x: auto;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .wines-row::-webkit-scrollbar{
    display: none;
  }
  .wines-row.is-dragging{
    cursor: grabbing;
    scroll-behavior: auto;
  }
  .wines-row.is-dragging img{ pointer-events: none; }
  /* kartica = trećina reda, pa u kadru uvijek stoje točno tri, bez virenja */
  .wine-card{
    width: calc((100% - 40px) / 3);
    flex-shrink: 0;
  }
  .wine-img-box{
    position: relative;
    width: 100%;
    height: 400px;
    background: #F0F0F0;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  /* na hover se boca samo malo priblizi */
  @media (hover: hover){
    .wine-img-box img{
      transition: scale 0.5s cubic-bezier(.22,.61,.36,1);
    }
    .wine-card:hover .wine-img-box img{
      scale: 1.07;
    }
  }

  /* Boce su fiksne - samo bazni pomak u masku (bez scroll efekta). */
  .wine-img-box img{
    position: relative;
    z-index: 1;
    width: 24.5%;
    height: auto;
    display: block;
    translate: 0 49px;
  }
  /* Dodatni pomak za veće/više boce - dodaj klasu "shift-more" na <img> po potrebi */
  .wine-img-box img.shift-more{
    translate: 0 45px;
  }
  .wine-img-box img.wine-big{
    width: 29%;
    translate: 0 49px;
  }
  /* Za vina koja trebaju izgledati udaljenije/manje, s vidljivom etiketom (npr. "p" grupa) */
  .wine-img-box img.wine-far{
    width: 19%;
    translate: 0 32px;
  }
  /* Muskat zuti je iste velicine kao "p" grupa, ali spada medju ostala vina */
  .wine-img-box img.wine-far.wine-nize{
    translate: 0 42px;
  }
  .wine-name{
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #494949;
    margin-top: 18px;
    text-align: center;
  }
  .wine-price{
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: 0;
    color: #494949;
    margin-top: 10px;
    text-align: center;
  }

  .wines-footer{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-top: 80px;
  }
  .wines-desc{
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: 0;
    color: #686868;
    max-width: 420px;
  }
  .wines-cta{
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ---------- CELLAR SECTION ---------- */
  .cellar{
    position: relative;
    /* ista visina kao terroir video i Rudinske glave */
    height: calc(100vh + 100px);
    height: calc(100svh + 100px);
    min-height: 740px;
    overflow: hidden;
    background-color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  /* Fotografija je u svom sloju da se moze pomicati transformacijom.
     Transform vodi kompozitor i ne trazi ponovno crtanje, za razliku od
     pomicanja background-position, koje je znalo trzati pri scrollu. */
  .cellar::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("img/tajna naseg podruma.jpg");
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
  }
  .cellar::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.25) 100%);
  }
  .cellar-content{
    position: relative;
    z-index: 2;
    max-width: 560px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .cellar-content h2{
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    line-height: 1.25;
    color: #fff;
    margin-bottom: 15px;
  }
  .cellar-content p{
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: 0;
    color: #fff;
    max-width: 420px;
    margin-bottom: 32px;
  }

  /* ---------- STORY SECTION ---------- */
  .story{
    background: #fff;
    padding: 130px 200px 0 188px;
  }
  .story-row{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
  }
  .story-text{
    max-width: 600px;
  }
  .story-label{
    display: block;
    margin-bottom: 14px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #686868;
  }
  .story-text h2{
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: 30px;
  }
  .story-text p{
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: 0;
    color: #686868;
  }
  .story-text p + p{
    margin-top: 20px;
  }
  /* redak s brojkama koji upotpunjuje sekciju i sazima kljucne cinjenice */
  .story-stats{
    display: flex;
    gap: 40px;
    margin-top: 46px;
    padding-top: 30px;
    border-top: 1px solid #e5e5e5;
  }
  .story-stat{
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .story-stat-num{
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.03em;
    color: var(--ink);
  }
  .story-stat-label{
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 10px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #8a8a8a;
  }
  .story-image{
    width: 380px;
    height: 680px;
    flex-shrink: 0;
    background-image: url("img/prica3.jpg");
    background-color: #e5e5e5;
    background-size: 150%;
    background-position: 50% 8%;
    position: relative;
    z-index: 5;
  }

  /* ---------- STORY SECTION 2 ---------- */
  .story2{
    background: #fff;
    padding: 0 48px 100px 45px;
    margin-top: -60px;
  }
  .story2-row{
    display: flex;
    align-items: center;
    gap: 40px;
  }
  .story2-image{
    width: 630px;
    height: 900px;
    flex-shrink: 0;
    background-image: url("img/prica2.jpg");
    background-color: #e5e5e5;
    background-size: 150%;
    background-position: 50% 8%;
  }
  .story2-text{
    max-width: 450px;
    transform: translateY(-40px);
  }
  .story2-text h2{
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: 30px;
  }
  .story2-text p{
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: 0;
    color: #686868;
  }
  .story2-text p + p{
    margin-top: 20px;
  }

  /* ---------- STORY SECTION 3 ---------- */
  .story3{
    background: #fff;
    padding: 0 104px 130px 140px;
  }
  .story3-row{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 130px;
  }
  .story3-text{
    max-width: 320px;
    flex-shrink: 0;
  }
  .story3-text h2{
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: 30px;
    white-space: nowrap;
  }
  .story3-text p{
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: 0;
    color: #686868;
  }
  .story3-text p + p{
    margin-top: 20px;
  }
  .story3-image{
    width: 770px;
    height: 600px;
    flex-shrink: 0;
    background-image: url("img/prica1.jpg");
    background-color: #e5e5e5;
    background-size: cover;
    background-position: center;
  }

  /* ---------- TERROIR DETAIL SECTION ---------- */
  .terroir-detail{
    background: #F4F4F4;
    padding: 120px 48px;
  }
  .terroir-inner{
    max-width: 1200px;
    margin: 0 auto;
  }
  .terroir-naslov{
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 48px;
    line-height: 1.17;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: var(--ink);
  }
  /* odlomci lijevo, poveznica desno uz rub zadnjeg boxa, poravnati po dnu */
  .terroir-red{
    margin-top: 60px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
  }
  .terroir-uvod{
    max-width: 530px;
  }
  .terroir-uvod p{
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 1.45;
    color: #686868;
  }
  .terroir-uvod p + p{ margin-top: 18px; }
  .terroir-vise{
    display: inline-flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 10px;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
  }
  .terroir-tocka{
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    /* verzalna slova nemaju repove pa se u retku drze gornjeg dijela;
       bez ovog pomaka tockica djeluje nize od teksta */
    margin-bottom: 2px;
    border-radius: 50%;
    background: #000;
    transition: transform 0.3s ease;
  }
  .terroir-vise:hover .terroir-tocka{ transform: scale(1.5); }

  /* --- cetiri boxa s brojkama --- */
  .terroir-boxes{
    /* isti razmak kao od naslova do odlomaka */
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
  .terroir-box{
    position: relative;
    height: 620px;
    border-radius: 20px;
    background: #FCFCFC;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .terroir-box-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* prostor za sliku ili gif svake kartice - samo zamijeni src u HTML-u */
  .terroir-box-media{
    width: 100%;
    height: 160px;
    margin-top: 16px;
    border-radius: 12px;
    overflow: hidden;
    background: #ececec;
  }
  .terroir-box-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .terroir-box-num{
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .terroir-box-dot{
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 1px solid var(--ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .terroir-box-dot::after{
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink);
  }
  /* tekst je prilijepljen uz dno boxa, pa svi naslovi stoje u istoj liniji */
  .terroir-box-text{ margin-top: auto; }
  .terroir-box-text h3{
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--ink);
  }
  .terroir-box-text p{
    margin-top: 14px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 11px;
    line-height: 1.4;
    color: #686868;
    /* rezervirana visina cetiri retka drzi naslove u istoj liniji */
    min-height: 5.6em;
  }


  @media (max-width: 1100px){
    .terroir-naslov{ font-size: 38px; }
    .terroir-boxes{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 720px){
    .terroir-detail{ padding: 50px 20px; }
    /* bez rucnih prijeloma; tekst se lomi sam */
    .terroir-naslov{ font-size: 20px; line-height: 1.1; }
    .terroir-red{
      flex-direction: column;
      align-items: flex-start;
      gap: 30px;
      margin-top: 30px;
    }
    .terroir-uvod{ max-width: none; }
    .terroir-uvod p{ font-size: 10px; }
    .terroir-boxes{
      grid-template-columns: 1fr;
      gap: 20px;
      margin-top: 30px;
    }
    .terroir-box{ height: 340px; }
    .terroir-box-num{ font-size: 20px; }
    .terroir-box-dot{ width: 16px; height: 16px; }
    .terroir-box-dot::after{ width: 6px; height: 6px; }
    .terroir-box-media{ height: 110px; margin-top: 12px; }
    .terroir-box-text h3{ font-size: 14px; }
    .terroir-box-text p{ font-size: 10px; min-height: 0; }
  }

  /* ---------- RUDINSKE GLAVE SECTION ---------- */
  .rudinske-glave{
    position: relative;
    width: 100%;
    height: calc(100vh + 100px);
    height: calc(100svh + 100px);
    min-height: 740px;
    overflow: hidden;
    background: #000;
    padding: 0 48px;
    display: flex;
    align-items: center;
  }
  .rudinske-glave-content{
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
  }
  .rudinske-glave-copy{
    flex-shrink: 0;
    width: 460px;
  }
  .rudinske-glave-label{
    display: block;
    margin-bottom: 10px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: rgba(255,255,255,0.96);
  }
  .rudinske-glave-copy h2{
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 26px;
  }

  .rudinske-link{
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 1.1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
  }

  /* red konzola - ide do desnog ruba zaslona i klize se vodoravno */
  .rudinske-row{
    flex: 1;
    min-width: 0;
    margin-right: calc(-1 * max(48px, (100vw - 1240px) / 2));
    display: flex;
    align-items: center;
    gap: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
  }
  .rudinske-row::-webkit-scrollbar{ display: none; }
  .rudinske-row.is-dragging{
    cursor: grabbing;
    scroll-behavior: auto;
  }
  .rudinske-row.is-dragging img{ pointer-events: none; }
  .rudinska-card{
    flex-shrink: 0;
    /* dvije cijele i polovica trece, koliko god zaslon bio sirok */
    width: calc((100% - 40px) / 2.5);
  }
  .rudinska-card:last-child{ margin-right: 20px; }
  .rudinska-card img{
    width: 100%;
    height: auto;
    display: block;
  }

  @media (max-width: 1200px){
    .rudinske-glave-content{ gap: 40px; }
    .rudinske-glave-copy{ width: 300px; }
  }

  /* ---------- FINAL / SOCIAL SECTION ---------- */
  .final-section{
    background:#fff;
    padding:120px 48px 120px;
  }
  .final-section-inner{
    width:100%;
    max-width:1240px;
    margin:0 auto;
  }
  .final-section-top{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .final-section-heading{
    max-width:570px;
    margin:0 auto;
    text-align:center;
  }
  .final-socials{ justify-content:center; }
  .final-section-heading h2{
    font-family:'DM Sans', sans-serif;
    font-weight:500;
    font-size:30px;
    line-height:1.05;
    letter-spacing:-0.05em;
    color:var(--ink);
    margin-bottom:18px;
  }
  .final-section-heading p{
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
    font-family:'DM Sans', sans-serif;
    font-weight:300;
    font-size:12px;
    line-height:1.2;
    color:#686868;
  }
  .final-socials{
    display:flex;
    gap:6px;
    margin-top:18px;
  }
  .final-social{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    border-radius:0;
    background:#000;
    /* obrub je od pocetka tu, u boji podloge, da se box na hover ne pomakne */
    border:1px solid #000;
    color:#fff;
    text-decoration:none;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
  .final-social:hover{
    background: transparent;
    border-color: #000;
    color: #000;
  }
  .final-social svg{
    width: 16px;
    height: 16px;
  }
  .final-social.icon-fb{
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1;
  }
  .final-social:hover{
    background:#333;
    color:#fff;
  }
  /* red se proteze preko cijele sirine zaslona */
  .final-fotke{
    margin: 42px calc(-1 * max(48px, (100vw - 1240px) / 2)) 0;
    overflow: hidden;
  }
  /* Na desktopu se traka vrti u krug: sadrzi dvije jednake devetorke, a pomak
     od 50% vraca je tocno na pocetak, pa se spoj ne primjecuje. */
  .final-fotke-red{
    display: flex;
    gap: 16px;
    width: max-content;
    animation: fotkeVrti 90s linear infinite;
  }
  @keyframes fotkeVrti{
    from{ transform: translate3d(0, 0, 0); }
    to{ transform: translate3d(-50%, 0, 0); }
  }
  .final-fotka{
    position: relative;
    flex-shrink: 0;
    width: 300px;
    height: 500px;
    overflow: hidden;
    background: #e6e6e6;
  }

  .final-fotka img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }


  @media (max-width: 720px){
    .final-section{
      padding:50px 20px;
    }
    .final-section-top{
      gap:0;
    }
    .final-section-heading h2{
      font-size:20px;
      font-weight:500;
      line-height: 1.1;
      letter-spacing: -0.05em;
    }
    .final-section-heading p{
      font-size:12px;
      font-weight:300;
      max-width: 85%;
    }
    /* na mobitelu se ne vrti, nego se prelistava prstom */
    .final-fotke{
      margin: 30px -20px 0;
      padding-left: 20px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .final-fotke::-webkit-scrollbar{ display: none; }
    .final-fotke-red{
      width: auto;
      animation: none;
      transform: none;
    }
    .final-fotka{ width: 240px; height: 400px; }
    .final-fotka.je-kopija{ display: none; }
  }


  /* ---------- POSJETITE NAS ---------- */
  .posjet{
    position: relative;
    height: 500px;
    overflow: hidden;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .posjet-video{
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .posjet::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba(0,0,0,0.18);
  }
  .posjet-content{
    position: relative;
    z-index: 2;
    max-width: 620px;
    padding: 0 20px;
  }
  .posjet-label{
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
  }
  .posjet-content h2{
    margin-top: 18px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: #fff;
  }
  .posjet-content .btn{ margin-top: 34px; }

  @media (max-width: 720px){
    .posjet{ height: 100vh; height: 100svh; }
    .posjet-label{ font-size: 10px; }
    .posjet-content h2{ margin-top: 12px; font-size: 20px; }
    .posjet-content .btn{ margin-top: 24px; }
  }

  /* ---------- FOOTER ---------- */
  .site-footer{
    background:#000;
    color:#fff;
  }
  .site-footer-main{
    padding: 80px 48px 50px;
  }
  .site-footer-inner{
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
  }
  .footer-logo{
    display: inline-block;
    line-height: 0;
  }
  .footer-logo img{
    width: 72px;
    height: auto;
    display: block;
  }
  .site-footer-tagline{
    margin: 26px auto 0;
    max-width: 430px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,0.72);
  }
  .footer-nav{
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 26px;
  }
  .footer-nav a{
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: color 0.25s ease;
  }
  .footer-nav a:hover{ color: #fff; }

  .footer-line{
    height: 1px;
    background: rgba(255,255,255,0.15);
    margin: 44px 0;
  }

  .site-footer-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
  .footer-col h3{
    font-family:'DM Sans', sans-serif;
    font-weight:600;
    font-size:12px;
    line-height:1.1;
    text-transform:uppercase;
    letter-spacing: 0.5px;
    margin-bottom:16px;
    color:#fff;
  }
  .footer-col p,
  .footer-col a{
    display:block;
    margin:0 0 8px;
    font-family:'DM Sans', sans-serif;
    font-weight:300;
    font-size:13px;
    line-height:1.5;
    color:rgba(255,255,255,0.72);
    text-decoration:none;
  }
  .footer-col a:hover{ color:#fff; }

  .site-footer-socials{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
  }
  .site-footer-socials a{
    width: 32px;
    height: 32px;
    border-radius: 0;
    background: rgba(255,255,255,0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s ease, color 0.25s ease;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
  }
  .site-footer-socials a:hover{ background: #fff; color: #111; }
  .site-footer-socials svg{ width: 13px; height: 13px; }

  .site-footer-bottom{
    background:#fff;
    color:rgba(0,0,0,0.6);
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding:14px 48px;
  }
  .site-footer-bottom span{
    font-family:'DM Sans', sans-serif;
    font-weight:300;
    font-size:11px;
    line-height:1.4;
  }
  .site-footer-bottom span:first-child{
    font-size: 13px;
    font-weight:600;
    color:#111;
    letter-spacing: -0.05em;
    text-transform: uppercase;
  }
  .site-footer-bottom span:last-child{
    font-size: 13px;
  }

  @media (max-width: 900px){
    .site-footer-main{ padding:60px 20px 44px; }
    .footer-logo img{ width: 58px; }
    .site-footer-grid{ grid-template-columns:1fr; gap:30px; }
    .footer-line{ margin: 34px 0; }
    .site-footer-bottom{ padding: 16px 20px; justify-content: center; text-align: center; }
  }
  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 720px){
    .navbar{ padding: 20px; height: auto; justify-content: space-between; align-items: center; }
    .nav-logo img{ width: 44px; }
    /* hamburger stoji u navbaru uz logo, pa su margine s obje strane jednake */
    .nav-right{ display: flex; }
    .nav-links{ display: none; }
    .menu-icon{ display: flex; }
    .mobile-hero-menu{
      display: none;
    }
    .mobile-hero-menu span{
      display: block;
      height: 1px;
      background: #fff;
      width: 100%;
      transition: transform 0.3s ease, opacity 0.25s ease;
    }
    .mobile-hero-menu.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
    .mobile-hero-menu.is-open span:nth-child(2){ opacity: 0; }
    .mobile-hero-menu.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
    .btn{ height: 30px; padding: 0 16px; font-size: 8px; }
    .logo-title{ font-size: 20px; font-weight: 400; }
    .logo-sub{ font-size: 12px; }
    /* ----- mobilna pocetna: logo u sredini, tri poveznice pri dnu ----- */
    .hero-inner{ display: none; }
    /* na mobitelu vrijedi zamucenje s crnom podlogom, ne gradient */
    .hero-gradient{ display: none; }
    /* tockice slajdera skrivene na mobitelu - preklapale bi se s hero-mobile poveznicama */
    .hero-slider-dots{ display: none; }
    /* logo je u sredini hero sekcije, ali navbar zadrzava svoju visinu
       da hamburger ostane tocno ondje gdje je i bio */
    .navbar{ justify-content: flex-end; min-height: 84px; }
    .nav-logo{ display: none; }

    /* fotografija se pojavi iz prozirnosti i polako priblizava 3 sekunde */
    .hero{ animation: heroPojava 1.2s ease both; }
    .hero-photo{ animation: heroZoom 3.2s ease-out both; }
    @keyframes heroZoom{
      from{ transform: scale(1); }
      to{ transform: scale(1.09); }
    }

    /* Zamucenje ulazi nakon fotografije. backdrop-filter zamucuje ono sto je
       IZA sloja, dakle fotografiju, a ne logo i poveznice iznad njega. */
    .hero::after{
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: rgba(0,0,0,0.10);
      -webkit-backdrop-filter: blur(4.5px);
      backdrop-filter: blur(4.5px);
      opacity: 0;
      transition: opacity 1.1s ease;
    }
    .hero.is-ready::after{ opacity: 1; transition-delay: 3.1s; }

    .hero-mobile{
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    .hero-mobile-logo{
      position: relative;
      width: 100px;
      display: block;
    }
    .hero-mobile-logo img{
      width: 100%;
      height: auto;
      display: block;
    }
    /* prvo blijedi obris loga... */
    .hero-logo-obris{ opacity: 0; }
    .hero.is-ready .hero-logo-obris{
      animation: logoObris 0.9s ease 3.1s both;
    }
    /* ...pa se preko njega odozdo prema gore digne puna bijela ispuna */
    .hero-logo-ispuna{
      position: absolute;
      inset: 0;
      clip-path: inset(100% 0 0 0);
    }
    .hero.is-ready .hero-logo-ispuna{
      animation: logoIspuna 1.3s cubic-bezier(.16,.84,.44,1) 3.7s both;
    }
    @keyframes logoObris{
      from{ opacity: 0; }
      to{ opacity: 0.28; }
    }
    @keyframes logoIspuna{
      from{ clip-path: inset(100% 0 0 0); }
      to{ clip-path: inset(0 0 0 0); }
    }

    .hero-mobile-links{
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: 60px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px 18px;
      pointer-events: auto;
      opacity: 0;
    }
    .hero.is-ready .hero-mobile-links{
      animation: heroPojava 0.9s ease 4.7s both;
    }
    .hero-mobile-links a{
      font-family: 'DM Sans', sans-serif;
      font-weight: 500;
      font-size: 10px;
      line-height: 1.1;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #fff;
      text-decoration: underline;
      text-underline-offset: 4px;
      text-decoration-thickness: 1px;
    }
    @keyframes heroPojava{
      from{ opacity: 0; }
      to{ opacity: 1; }
    }

    .mobile-break{ display: inline; }
    .mobile-hide-break{ display: none; }
    .desktop-break{ display: none; }

    .wines{
      padding: 50px 20px;
      box-sizing: border-box;
    }
    .wines-header{ flex-direction: column; align-items: flex-start; gap: 20px; }
    .wines-container{ width: 100%; max-width: 100%; }
    .wines-header .scroll-indicator{ display: none; }
    .wines-row-wrap{ flex-direction: column; align-items: flex-start; margin-top: 25px; }
    .wines-nav{ display: none; }
    /* pomak vodi skripta (inercija), pa snap i smooth ovdje samo smetaju */
    .wines-row{ width: 100%; overflow-x: auto; justify-content: flex-start; margin-left: 0; }
    .wine-card{ width: 270px; }
    .wine-img-box{ width: 270px; height: 400px; }
    /* boce 40px niže nego na desktopu */
    .wine-img-box img{ width: 30%; translate: 0 89px; }
    .wine-img-box img.shift-more{ translate: 0 85px; }
    .wine-img-box img.wine-big{ width: 36%; translate: 0 89px; }
    .wine-img-box img.wine-far{ width: 23.5%; translate: 0 72px; }
    .wine-img-box img.wine-far.wine-nize{ translate: 0 82px; }
    .scroll-indicator-mobile{
      display: block;
      width: 100%;
      max-width: 100%;
      margin-top: 24px;
    }
    .wines-footer{ flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 40px; }
    .wines-desc{ font-size: 10px; }
    .wines-cta{ font-size: 12px; }

    .cellar{
      height: 100vh;
      height: 100svh;
    }
    .cellar::before{ background-size: 240%; }
    .cellar-content h2{ font-size: 20px; font-weight: 500; margin-bottom: 10px; line-height: 1.1; letter-spacing: -0.05em; }
    .cellar-content p{ font-size: 10px; font-weight: 400; max-width: 260px; margin-bottom: 20px; }

    .story{ padding: 50px 20px 0 20px; }
    .story-row{ flex-direction: column; gap: 20px; }
    .story-text{ max-width: 85%; }
    .story-label{ font-size: 10px; margin-bottom: 10px; }
    .story-text h2{ font-size: 20px; font-weight: 500; margin-bottom: 20px; line-height: 1.1; letter-spacing: -0.05em; }
    .story-text p{ font-size: 10px; font-weight: 300; }
    .story-text p + p{ margin-top: 20px; }
    .story-stats{ gap: 24px; margin-top: 30px; padding-top: 20px; flex-wrap: wrap; }
    .story-stat-num{ font-size: 16px; }
    .story-stat-label{ font-size: 8px; }
    .story-image{ width: 200px; height: 400px; }
  }

  @media (max-width: 720px){
    .story2{ padding: 0 20px 0 20px; margin-top: 50px; }
    .story2-row{ flex-direction: column; align-items: flex-start; gap: 20px; }
    .story2-text{ order: 1; max-width: 85%; text-align: left; transform: none; }
    .story2-image{ order: 2; width: 300px; height: 500px; }
    .story2-text h2{ font-size: 20px; font-weight: 500; margin-bottom: 20px; line-height: 1.1; letter-spacing: -0.05em; }
    .story2-text p + p{ margin-top: 20px; }
    .story2-text p{ font-size: 10px; font-weight: 300; }
  }

  @media (max-width: 720px){
    .story3{ padding: 50px 20px 50px 20px; }
    .story3-row{ flex-direction: column; align-items: flex-start; gap: 20px; }
    .story3-image{ width: 100%; height: 500px; }
    .story3-text{ max-width: 100%; }
    /* 18px umjesto 20px: rijec "prepoznatljivog" cini drugi redak preduljim
       za sirinu telefona, pa bi "potpisa" ispao u treci redak.
       balance uz to izjednacava duljinu oba retka. */
    .story3-text h2{ font-size: 18px; font-weight: 500; margin-bottom: 20px; line-height: 1.1; letter-spacing: -0.05em; white-space: normal; text-wrap: balance; }
    .story3-text p + p{ margin-top: 20px; }
    .story3-text p{ font-size: 10px; font-weight: 300; max-width: 85%; }
  }

  /* ---------- TERROIR VIDEO SECTION ---------- */
  .terroir-video{
    position: relative;
    height: calc(100vh + 100px);
    height: calc(100svh + 100px);
    min-height: 740px;
    overflow: hidden;
    background: #1a1a1a;
  }
  .terroir-video-media{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.12);
  }
  .terroir-video-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,0.16) 78%, rgba(0,0,0,0.55) 100%);
  }
  .terroir-video-content{
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 24px;
    padding: 0 40px;
  }
  .terroir-video-text{ max-width: 560px; }
  .terroir-label{
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 10px;
  }
  .terroir-video-text h2{
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    line-height: 1.25;
    color: #fff;
    max-width: 600px;
    /* donji razmak jednak lijevom - bez ovoga prazna polovica proreda
       ispod zadnjeg retka dodaje jos 3.75px */
    margin-bottom: -0.125em;
  }

  @media (max-width: 720px){
    .rudinske-glave{
      height: auto;
      min-height: 0;
      padding: 50px 0 50px 20px;
      align-items: flex-start;
    }
    .rudinske-glave-content{
      max-width: none;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      gap: 30px;
    }
    .rudinske-glave-copy{ width: 100%; padding-right: 20px; }
    .rudinske-glave-copy h2{ font-size: 20px; font-weight: 500; line-height: 1.1; letter-spacing: -0.05em; margin-bottom: 20px; }
    .rudinske-row{ width: 100%; gap: 20px; margin-right: 0; align-items: center; }
    .rudinska-card{ width: 250px; height: auto; }
    .rudinska-card img{ width: 100%; height: auto; }
    .rudinska-card:last-child{ margin-right: 20px; }
  }
  @media (max-width: 720px){
    .terroir-video{ height: 100vh; height: 100svh; }
    .terroir-video-content{ gap: 18px; padding: 0 20px; }
    .terroir-video-text h2{ font-size: 20px; font-weight: 500; line-height: 1.1; letter-spacing: -0.05em; }
  }

  /* ---------- MOBILNI DOTJERAVANJE (dodatna provjera cijele stranice) ---------- */
  @media (max-width: 720px){
    .wines-header h2{ font-size: 20px; font-weight: 500; line-height: 1.1; letter-spacing: -0.05em; }
    .wine-name{ font-size: 12px; font-weight: 400; }
    .wine-price{ font-size: 12px; margin-top: 8px; }
    .wines-desc{ max-width: 100%; font-size: 10px; font-weight: 300; }
  }

  @media (max-width: 380px){
  }

  /* ---------- NAVBAR PREKO HERO FOTOGRAFIJE ---------- */
  @media (min-width: 0px){
    .navbar{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      background: transparent;
      z-index: 20;
    }
    .navbar .logo-title{ color: #fff; }
    .navbar .logo-sub{ color: rgba(255,255,255,0.85); }
    .navbar .nav-links a{ color: #fff; }
    .navbar .nav-links a::after{ background: #fff; }
    .navbar .menu-icon span{ background: #fff; }
    /* navbar vise ne zauzima prostor, pa hero ide preko cijelog zaslona */
    .hero{
      height: 100vh;
      height: 100svh;
    }
  }

  /* razmak od cijene do prvog naslova */
  .wine-acc-list{ margin-top: 30px; }
  /* naslovi s plusom; otvoren moze biti samo jedan opis */
  .wine-acc{ border-bottom: 1px solid #d9d9d9; }
  .wine-acc-head{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--ink);
  }
  .wine-acc-plus{
    position: relative;
    width: 11px;
    height: 11px;
    flex-shrink: 0;
  }
  .wine-acc-plus::before,
  .wine-acc-plus::after{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 11px;
    height: 1px;
    background: var(--ink);
    transition: transform 0.3s ease;
  }
  .wine-acc-plus::after{ transform: rotate(90deg); }
  .wine-acc.is-open .wine-acc-plus::after{ transform: rotate(0deg); }
  .wine-acc-body{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }
  .wine-acc-body p{
    margin: 0 0 16px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 1.5;
    color: #686868;
  }


  /* Podcrtane poveznice: crta je stalno tu, a na hover se ponovno "ucita" -
     povuce se udesno do nule pa se iznova iscrta slijeva, kao u navbaru. */
  .wines-cta,
  .rudinske-link{
    position: relative;
    text-decoration: none;
  }
  .wines-cta::after,
  .rudinske-link::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(1);
    transform-origin: right center;
  }
  @media (hover: hover){
    .wines-cta:hover::after,
    .rudinske-link:hover::after{
      animation: crtaPonovo 0.6s cubic-bezier(.22,.61,.36,1);
    }
  }
  @keyframes crtaPonovo{
    0%{   transform: scaleX(1); transform-origin: right center; }
    45%{  transform: scaleX(0); transform-origin: right center; }
    55%{  transform: scaleX(0); transform-origin: left center; }
    100%{ transform: scaleX(1); transform-origin: left center; }
  }

  /* ---------- POP-UP: POJEDINACNO VINO ---------- */
  .wine-modal{
    position: fixed;
    inset: 0;
    z-index: 300;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(248,248,248,0.78);
    -webkit-backdrop-filter: blur(16px) saturate(115%);
    backdrop-filter: blur(16px) saturate(115%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }
  .wine-modal.is-open{
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0s linear 0s;
  }
  .wine-modal-inner{
    max-width: 720px;
    margin: 0 auto;
    padding: 62px 20px 40px;
  }

  .wine-modal-close{
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 5;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--ink);
    transition: transform 0.3s ease;
  }
  .wine-modal-close:hover{ transform: rotate(90deg); }
  .wine-modal-close svg{ width: 22px; height: 22px; display: block; }

  /* fotografija boce sa strelicama */
  .wine-modal-photo{
    position: relative;
    width: 100%;
    height: 436px;
    background: #F8F8F8;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.055);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .wine-modal-photo img{
    max-height: 68%;
    max-width: 60%;
    object-fit: contain;
    display: block;
  }

  /* podaci o vinu */
  .wine-modal-label{
    display: block;
    margin-top: 22px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 10px;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--ink);
  }
  .wine-modal-title{
    margin-top: 10px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .wine-modal-desc{
    margin-top: 12px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 1.5;
    color: #686868;
  }
  .wine-modal-badges{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
  }
  .wine-modal-badge{
    height: 30px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .wine-modal-price{
    margin-top: 20px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.1;
    color: var(--ink);
  }

  /* gastro preporuka i ostali blokovi */

  /* gdje kupiti - zamucena fotografija preko cijele sirine */


  /* ----- desktop: lijevo mirna boca, desno tekst koji se skrola -----
     Pop-up ima backdrop-filter, a on za sve unutar sebe ponistava
     'position: fixed' - fiksirani element se onda ipak pomice sa sadrzajem.
     Zato se ovdje ne skrola cijeli pop-up, nego samo desni stupac. */
  @media (min-width: 721px){
    /* Zamucenje se prebacuje na sloj koji prelazi rubove zaslona. Kad blur
       zavrsava tocno na vrhu ekrana, preglednik nema sto uzorkovati iznad pa
       razvuce zadnji red piksela - to se vidi kao svijetla traka uz gornji rub. */
    .wine-modal{
      overflow: hidden;
      background: transparent;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    .wine-modal::before{
      content: "";
      position: absolute;
      inset: -90px;
      z-index: 0;
      pointer-events: none;
      background: rgba(248,248,248,0.78);
      -webkit-backdrop-filter: blur(16px) saturate(115%);
      backdrop-filter: blur(16px) saturate(115%);
    }
    .wine-modal-inner{ position: relative; z-index: 1; }
    .wine-modal-inner{
      max-width: none;
      margin: 0;
      padding: 0;
      display: flex;
      height: 100vh;
    }
    .wine-modal-photo{
      position: relative;
      flex-shrink: 0;
      width: 50%;
      height: 100vh;
      box-shadow: inset 0 0 90px rgba(0,0,0,0.05);
    }
    .wine-modal-photo img{
      max-height: 62%;
      max-width: 32%;
    }
    .wine-modal-body{
      width: 50%;
      height: 100vh;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 40px 60px 40px 30px;
      /* sadrzaj lezi na istoj sredisnjoj liniji kao boca lijevo;
         "safe" znaci da se pri duljem sadrzaju vrati na vrh umjesto
         da gornji dio zavrsi izvan dosega scrolla */
      display: flex;
      flex-direction: column;
      justify-content: center;
      justify-content: safe center;
    }
    .wine-modal-label{ margin-top: 0; font-size: 12px; }
    .wine-modal-title{ margin-top: 12px; font-size: 24px; }
    .wine-modal-desc{ margin-top: 16px; font-size: 12px; }
    .wine-modal-badges{ margin-top: 24px; }
    .wine-modal-badge{ height: 32px; padding: 0 18px; font-size: 10px; }
    .wine-modal-price{ margin-top: 26px; font-size: 20px; }
    .wine-acc-head{ font-size: 14px; padding: 18px 0; }
    .wine-acc-body p{ font-size: 12px; margin-bottom: 20px; }
  }

  /* ---------- PROVJERA PUNOLJETNOSTI ---------- */
  .age-gate{
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #141414;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
  }
  .age-gate.is-open{
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
  }
  .age-gate-inner{
    max-width: 460px;
    width: 100%;
    text-align: center;
    transform: translateY(14px);
    transition: transform 0.5s ease;
  }
  .age-gate.is-open .age-gate-inner{
    transform: translateY(0);
  }
  .age-gate-logo{
    width: 44px;
    height: auto;
    margin: 0 auto 32px;
    display: block;
  }
  .age-gate-title{
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: #fff;
  }
  .age-gate-text{
    margin-top: 16px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255,255,255,0.75);
  }
  .age-gate-actions{
    margin-top: 34px;
    display: flex;
    gap: 14px;
    justify-content: center;
  }
  .age-gate-btn{
    min-width: 150px;
    appearance: none;
    -webkit-appearance: none;
    font-family: 'DM Sans', sans-serif;
  }
  .age-gate-note{
    margin-top: 28px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 9px;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.4);
  }

  .age-gate-blocked{
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #141414;
    text-align: center;
  }
  .age-gate-blocked.is-open{ display: flex; }
  .age-gate-blocked-inner{ max-width: 420px; }
  .age-gate-blocked p{
    font-family: 'DM Sans', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
  }
  .age-gate-blocked .age-gate-btn{
    margin-top: 28px;
  }

  @media (max-width: 720px){
    .age-gate{ padding: 24px; }
    .age-gate-logo{ width: 36px; margin-bottom: 24px; }
    .age-gate-title{ font-size: 20px; }
    .age-gate-text{ font-size: 11px; }
    .age-gate-actions{ flex-direction: column; gap: 10px; margin-top: 28px; }
    .age-gate-btn{ width: 100%; }
  }