/* =========================================================
   Amita Free — overrides (loaded last, wins over inline CSS)
   ========================================================= */

/* ---- OMICA font (used for TITLES / HEADINGS only) ---- */
@font-face {
  font-family: 'Omica';
  src: url('style/fonts/Omica/Omica.woff2') format('woff2'),
       url('style/fonts/Omica/Omica.woff')  format('woff'),
       url('style/fonts/Omica/Omica.ttf')   format('truetype'),
       url('style/fonts/Omica/Omica.otf')   format('opentype');
  font-weight: 400 700;   /* single weight file covers normal + bold */
  font-style: normal;
  font-display: swap;
}

/* Apply Omica to headings / titles only */
h1, h2, h3, h4, h5, h6,
#shija-kryesore h3, #shija-kryesore h5,
#info h3,
.pack-label,
#footer h4 {
  font-family: 'Omica', 'Proxima Nova', 'Segoe UI', Arial, sans-serif !important;
}

/* Body / content text: clean, readable sans (NOT the decorative SummerFont) */
body,
p, li, small, label, blockquote, td, th,
.card, .tab-content, .sasia, .sasia span, .barkod-1, .barkod-2,
.copyright, .overlay a,
input, textarea, select, button {
  font-family: 'Proxima Nova', 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* ---- Navbar: proper spacing so items never overlap ---- */
.nav-pc,
.nav-tel {
  align-items: center !important;
}
.nav-pc {
  padding-right: 4% !important;
}
.nav-pc .navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}
.nav-pc .navbar-nav {
  flex-wrap: nowrap !important;
}
.nav-pc .navbar-nav .nav-item {
  width: auto !important;      /* override the fixed 120px from style.css */
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}
.nav-pc .navbar-nav .nav-link {
  width: auto !important;
  padding: 6px 0 !important;
  margin: 0 20px !important;
  font-size: 18px !important;   /* smaller navbar text */
  white-space: nowrap !important;
}
.nav-pc .navbar-nav .nav-item:last-child .nav-link {
  margin-right: 0 !important;
}

/* ---- Flavor detail page: keep the tall HQ bottle inside its card ---- */
#shija-kryesore .amita-free-1 {
  display: flex;
  align-items: center;
  justify-content: center;
}
#shija-kryesore .amita-free-1 img {
  width: auto !important;
  height: auto !important;
  max-height: 480px !important;
  max-width: 100% !important;
}

/* Featured area: show 1L (behind) + 330ml (in front), overlapping */
#shija-kryesore .amita-free-1 .pack-pair-detail {
  position: relative;
  display: inline-block;
  padding-right: 42px;   /* room for the 330ml sticking out */
}
#shija-kryesore .amita-free-1 .pack-pair-detail .pack-1l {
  position: relative;
  z-index: 1;
  height: 420px !important;
  width: auto !important;
  max-height: none !important;
  max-width: none !important;
  display: block;
}
#shija-kryesore .amita-free-1 .pack-pair-detail .pack-330 {
  position: absolute;
  right: -8px;
  bottom: 0;
  z-index: 2;                 /* 330ml in FRONT */
  height: 275px !important;
  width: auto !important;
  max-height: none !important;
  max-width: none !important;
  filter: drop-shadow(0 14px 20px rgba(60, 70, 55, 0.28));
}
@media (max-width: 991px) {
  #shija-kryesore .amita-free-1 .pack-pair-detail .pack-1l { height: 320px !important; }
  #shija-kryesore .amita-free-1 .pack-pair-detail .pack-330 { height: 210px !important; }
}
.nav-pc .navbar-brand {
  display: flex;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
}
.nav-pc .navbar-brand .logo,
.nav-pc .logo {
  width: 82px !important;
  height: auto !important;
  margin: 0 !important;
}
.nav-tel .logo {
  width: 66px !important;
  height: auto !important;
  margin: 0 !important;
}
/* keep the logo small & tidy when the navbar turns solid on scroll */
.navbar.scrolled {
  height: auto !important;
  margin: 0 !important;
  padding: 0.6% 10% !important;
}
.navbar.scrolled .logo {
  width: 72px !important;
  margin-bottom: 0 !important;
}
.nav-tel.scrolled {
  height: auto !important;
  padding: 3% 5% !important;
}

/* ---- Shijet Tona (flavor pages): clean fixed header + content pushed below (DESKTOP only) ---- */
@media (min-width: 651px) {
  body.page-shije { padding-top: 104px; }            /* space for the fixed header */
  body.page-shije .nav-pc {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: #ffffff !important;
    box-shadow: 0 2px 16px rgba(60, 70, 55, 0.08);
    padding: 14px 5% !important;
    align-items: center !important;
    z-index: 500;
  }
  body.page-shije .nav-pc .navbar-brand { display: flex; align-items: center; margin: 0 !important; }
  body.page-shije .nav-pc .logo { width: 74px !important; }
  /* nav links vertically centered on the logo's center — force flex centering at every level */
  body.page-shije .nav-pc .navbar-header,
  body.page-shije .nav-pc .navbar-collapse {
    display: flex !important;
    align-items: center !important;
  }
  body.page-shije .nav-pc .navbar-nav {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }
  body.page-shije .nav-pc .navbar-nav .nav-item { display: flex !important; align-items: center !important; }
  /* keep the menu on the RIGHT (same vertical level) */
  body.page-shije .nav-pc { justify-content: space-between !important; }
  body.page-shije .nav-pc .navbar-collapse { margin-left: auto !important; flex: 0 0 auto !important; }

  /* card no longer pulled up under the header — sits cleanly below it */
  body.page-shije #shija-kryesore {
    margin-top: 0 !important;
    padding-top: 18px !important;
  }
}

/* ---- Remove green "scribble" shapes behind packages / labels (everywhere) ---- */
.amita-free-1 {
  background-image: none !important;
  padding-left: 0 !important;
}
.div1, .div2, .div3, .div4 { background-image: none !important; }
.a1:hover + .div1, .a2:hover + .div2, .a3:hover + .div3, .a4:hover + .div4 { background-image: none !important; }
.background-ere { display: none !important; }
/* remove the green shape that appears on nav-link click (onclick) */
.nav-link:active, nav .nav-link:active { background-image: none !important; }

/* ---- Home showcase: slightly smaller 1L pack (photo 3) ---- */
.pack-pair .pack-1l { height: 328px !important; }
.pack-pair .pack-330 { height: 222px !important; }

/* ---- Flavor featured (photo 1): shift 330ml right so it doesn't block the 1L ---- */
#shija-kryesore .amita-free-1 .pack-pair-detail { padding-right: 78px; }
#shija-kryesore .amita-free-1 .pack-pair-detail .pack-330 { right: -52px; bottom: -4px; }

/* ---- Contact form background -> light blue ---- */
#kontakti form { background: #d0e9f0 !important; }

/* ---- Shijet Tona: dark-green Sasia pills + active "Vlerat ushqyese" tab ---- */
#shija-kryesore .sasia span {
  background-color: #0c733b !important;
  color: #fff !important;
}
#shija-kryesore .nav-pills .nav-link.active {
  background-color: #0c733b !important;
  color: #fff !important;
}

/* ---- Footer logo: new Amita Free logo, properly sized ---- */
#footer .footer-logo {
  width: auto !important;
  height: auto !important;
  max-width: 140px !important;
}
@media (max-width: 650px) {
  #footer .footer-logo { max-width: 105px !important; }
}

/* ---- Hero slider note: force wrap to 2-3 lines (LayerSlider ignores inline width) ---- */
#slider .hero-note {
  width: 300px !important;
  max-width: 300px !important;
  white-space: normal !important;
  word-wrap: break-word;
}

/* ---- Product showcase: 1L behind + 330ml in front (overlapping) ---- */
#produktet-pc {
  display: block;
  padding: 2% 0 5% 0;
}
#produktet-pc .pack-row {
  margin-top: 2.5%;
}
.pack-pair-link {
  display: inline-block;
  text-decoration: none !important;
}
.pack-pair {
  position: relative;
  display: inline-block;
  padding-right: 46px; /* room for the 330ml sticking out on the right */
}
.pack-pair .pack-1l {
  position: relative;
  z-index: 1;
  height: 370px;
  width: auto;
  display: block;
  transition: transform .35s ease;
}
.pack-pair .pack-330 {
  position: absolute;
  right: -6px;
  bottom: 0;
  z-index: 2;                 /* 330ml in FRONT of the 1L */
  height: 248px;
  width: auto;
  filter: drop-shadow(0 14px 20px rgba(60, 70, 55, 0.28));
  transition: transform .35s ease;
}
.pack-pair-link:hover .pack-1l { transform: translateY(-8px); }
.pack-pair-link:hover .pack-330 { transform: translateY(-3px); }
.pack-label {
  display: block;
  margin-top: 26px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: #199A4C;
}

@media (max-width: 1366px) {
  .pack-pair .pack-1l { height: 320px; }
  .pack-pair .pack-330 { height: 214px; }
}