/* style.css (LIGHT premium + red accents, stable layout, mobile-first) */

/* =========================
   THEME TOKENS
========================= */
:root{
  --red: rgb(227, 6, 19);
  --black: rgb(0, 0, 0);
  --white: rgb(255, 255, 255);
  --gray: rgb(133, 135, 140);
  --bluegray: rgb(36, 46, 64);

  /* Light UI */
  --page: #f4f6f9;
  --page-2: #ffffff;
  --header: #c8ceda;
  --footer: #c8ceda;

  --text: #0f172a;         /* slate-900 */
  --muted: #475569;        /* slate-600 */
  --muted-2: #64748b;      /* slate-500 */

  --card: #ffffff;
  --border: rgba(15, 23, 42, .10);

  --radius: 18px;
  --radius-sm: 14px;

  --shadow: 0 18px 55px rgba(15, 23, 42, .14);
  --shadow-soft: 0 10px 22px rgba(15, 23, 42, .10);

  --container: 1120px;
}


/* Ensure hidden attribute works reliably */
[hidden]{display:none !important;}
/* =========================
   BASE
========================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html, body { height: 100%; }

body{
  margin:0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);

  /* premium light background (global) */
  background:
    radial-gradient(900px 520px at 0% 100%, rgba(227,6,19,.10), transparent 62%),
    radial-gradient(850px 520px at 100% 0%, rgba(36,46,64,.08), transparent 60%),
    linear-gradient(180deg, var(--page-2), var(--page));
  line-height: 1.6;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Jedinstvena pozadina između headera i footera (belo -> crvenkasto, bez “crtice”) */
main{
  flex: 1;
  background:
    radial-gradient(900px 520px at 12% 88%, rgba(227,6,19,.14), transparent 60%),
    radial-gradient(800px 520px at 88% 8%, rgba(227,6,19,.08), transparent 62%),
    linear-gradient(
      180deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.96) 28%,
      rgba(227,6,19,.06) 74%,
      rgba(227,6,19,.12) 100%
    );
}

/* Ako negde koristiš .page-fill (npr. brendovi), neka bude identično i bez border-top */
.page-fill{
  background:
    radial-gradient(900px 520px at 12% 88%, rgba(227,6,19,.14), transparent 60%),
    radial-gradient(800px 520px at 88% 8%, rgba(227,6,19,.08), transparent 62%),
    linear-gradient(
      180deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.96) 28%,
      rgba(227,6,19,.06) 74%,
      rgba(227,6,19,.12) 100%
    );
  color: var(--bluegray);
  border-top: 0; /* nema crte */
}

footer{ flex-shrink: 0; }

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
.no-scroll{overflow:hidden}

.container{
  width: min(100% - 32px, var(--container));
  margin-inline:auto;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px;
  width:auto; height:auto;
  padding:10px 12px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  z-index: 9999;
}

.muted{color: var(--muted)}
.tiny{font-size: 12px}
.icon{display:inline-block; width:1.2em; text-align:center}

.h2{
  margin: 0 0 8px;
  font-size: 24px;
  color: var(--text);
}
.h3{
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--text);
}
.lead{
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}

/* =========================
   TOPBAR
========================= */
.topbar{
  background: var(--header);
  color: var(--text);
  font-size: 13px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 8px 0;
}
.topbar__left{display:flex; gap:14px; flex-wrap:wrap; flex:1; min-width:0}
.topbar__item{
  display:inline-flex;
  gap:8px;
  align-items:center;
  color: rgba(15,23,42,.85);
}
.topbar__item:hover{color: var(--text)}

/* =========================
   HEADER + NAV (light)
========================= */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header);
  border-bottom: 1px solid rgba(15,23,42,.10);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 0;
  gap: 12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 220px;
}
.brand__logo{
  height: 28px;
  width: auto;
  object-fit: contain;
}
.brand__name{
  font-weight: 900;
  letter-spacing: .4px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.1;
}
.brand__tagline{
  font-size: 12px;
  color: var(--muted);
}

/* Nav */
.nav{display:flex; align-items:center}
.nav__toggle{
  appearance:none;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.75);
  border-radius: 12px;
  padding: 10px 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: var(--shadow-soft);
}
.nav__burger{
  width: 18px; height: 2px;
  background: rgba(15,23,42,.85);
  position: relative;
  display:block;
}
.nav__burger::before,
.nav__burger::after{
  content:"";
  position:absolute;
  left:0;
  width: 18px; height:2px;
  background: rgba(15,23,42,.85);
}
.nav__burger::before{top:-6px}
.nav__burger::after{top:6px}

.nav__panel{
  position: fixed;
  inset: 0;
  transform: translateX(110%);
  transition: transform .25s ease;
  background: rgba(255,255,255,.98);
  padding: 16px;
  display:flex;
  flex-direction:column;
  gap: 14px;
  z-index: 80; /* above everything */
}
.nav__panel.is-open{transform: translateX(0)}
.nav__backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.35);
  z-index: 75;
}

.nav__close{
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.85);
  border-radius: 14px;
  width: 44px;
  height: 44px;
  display:grid;
  place-items:center;
  margin-left: auto;
  cursor:pointer;
  box-shadow: var(--shadow-soft);
}
@media (min-width: 720px){
  .nav__close{display:none;}
}

.nav__list{
  list-style:none;
  padding:0;
  margin: 6px 0 0;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.nav__link{
  display:block;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.03);
  font-weight: 800;
  color: rgba(15,23,42,.90);
}
.nav__link:hover{border-color: rgba(227,6,19,.25)}
.nav__link.is-active{
  border-color: rgba(227,6,19,.35);
  background: rgba(227,6,19,.08);
  color: rgba(15,23,42,.95);
}

.nav__actions{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.lang{
  display:flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  background: rgba(15,23,42,.03);
  width: fit-content;
}
.lang__btn{
  border:0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 10px;
  cursor:pointer;
  font-weight: 900;
  color: rgba(15,23,42,.65);
}
.lang__btn.is-active{
  background: rgba(255,255,255,.85);
  color: rgba(15,23,42,.95);
  box-shadow: var(--shadow-soft);
}

/* Desktop nav */
@media (min-width: 720px){
  .nav__toggle{display:none}
  .nav__panel{
    position: static;
    inset: auto;
    transform: none;
    background: transparent;
    padding: 0;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    z-index: auto;
  }
  .nav__list{
    flex-direction: row;
    gap: 10px;
    margin: 0;
  }
  .nav__link{
    background: transparent;
    border: 0;
    padding: 10px 10px;
  }
  .nav__link:hover{text-decoration: underline; text-underline-offset: 6px;}
  .nav__link.is-active{
    background: transparent;
    border: 0;
    text-decoration: underline;
    text-decoration-color: rgba(227,6,19,.85);
    text-underline-offset: 6px;
  }
  .nav__actions{
    margin-top: 0;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .nav__backdrop{display:none !important}
}

/* =========================
   BUTTONS
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.12);
  cursor:pointer;
  font-weight: 900;
  box-shadow: var(--shadow-soft);
  transition: transform .05s ease, border-color .2s ease, background .2s ease;
  color: rgba(15,23,42,.92);
  background: rgba(255,255,255,.80);
}
.btn:active{transform: translateY(1px)}
.btn--primary{
  background: var(--red);
  color: var(--white);
  border-color: rgba(227,6,19,.70);
}
.btn--primary:hover{border-color: rgba(227,6,19,1)}
.btn--ghost{
  background: rgba(255,255,255,.75);
  color: rgba(15,23,42,.92);
}

.link{
  color: var(--red);
  font-weight: 900;
}
.link:hover{text-decoration:underline}

/* =========================
   HERO SLIDER
========================= */
.heroSlider{
  background:
    radial-gradient(900px 520px at 0% 100%, rgba(227,6,19,.10), transparent 62%),
    linear-gradient(180deg, var(--page-2), var(--page));
}
.heroSlider__viewport{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(15,23,42,.08);
  height: clamp(240px, 42vw, 480px);
}
.heroSlide{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity .35s ease;
}
.heroSlide.is-active{opacity:1}
.heroSlide img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* arrow visibility */
.heroSlider__viewport::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(15,23,42,.10), transparent 20%, transparent 80%, rgba(15,23,42,.10));
  pointer-events:none;
}

.heroSlider__arrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(15,23,42,.35);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index: 3;
  backdrop-filter: blur(6px);
}
.heroSlider__arrow:hover{background: rgba(15,23,42,.50)}
.heroSlider__arrow--prev{left: 14px;}
.heroSlider__arrow--next{right: 14px;}

.heroSlider__dots{
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  display:flex;
  gap: 8px;
  z-index: 3;
}
.heroDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.35);
  cursor:pointer;
}
.heroDot.is-active{
  background: rgba(227,6,19,.95);
  border-color: rgba(227,6,19,.95);
}

/* =========================
   HERO COPY
========================= */
.heroCopy{
  padding: 22px 0 6px;
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(227,6,19,.10), transparent 55%),
    linear-gradient(180deg, var(--page-2), var(--page));
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.heroCopy__inner{
  display:grid;
  gap: 16px;
  align-items: start;
}
.heroCopy__title{
  margin: 0 0 8px;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.12;
  letter-spacing: -.3px;
}
.heroCopy__subtitle{
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}
.heroCopy__cta{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.heroPills{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-start;
}
.heroPill{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(227,6,19,.20);
  background: rgba(227,6,19,.06);
  font-weight: 900;
  color: rgba(15,23,42,.92);
}
@media (min-width: 720px){
  .heroCopy__inner{grid-template-columns: 1.2fr .8fr;}
  .heroPills{justify-content:flex-end;}
}

/* =========================
   SECTIONS + COMPONENTS
========================= */
.section{padding: 28px 0}
.section--alt{
  background:
    radial-gradient(900px 520px at 0% 100%, rgba(227,6,19,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
  border-top: 1px solid rgba(15,23,42,.06);
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.grid2{
  display:grid;
  gap: 16px;
}
@media (min-width: 720px){
  .grid2{grid-template-columns: 1fr 1fr; align-items: start}
}

.cards{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 720px){
  .cards{grid-template-columns: 1fr 1fr}
}

.card, .panel{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}
.card__title, .panel .h3{font-weight: 900;}
.card__text, .panel__text{color: var(--muted);}

/* =========================
   FOOTER (fix logo stretching)
========================= */
.footer{
  border-top: 1px solid rgba(15,23,42,.10);
  background: var(--footer);
  padding: 18px 0 78px; /* space for quickbar */
  color: rgba(15,23,42,.92);
}
.footer__inner{
  display:grid;
  gap: 12px;
}
.footer__left{
  display:flex;
  flex-direction:column;
  gap: 4px;
}

/* ključ: nikad ne razvlači logo */
.footer__mark{
  height: 28px;
  width: auto !important;
  max-width: 120px;
  object-fit: contain;
}

.footer__brand{font-weight: 900;}
.footer__muted{font-size: 13px; color: rgba(15,23,42,.70)}
.footer__center{text-align:center;}
.footer__legal{font-size: 13.5px;}
.footer__legal--stack{display:grid; gap: 6px;}
.footer__copyright{margin-top: 8px; color: rgba(15,23,42,.65); font-size: 12px;}
.footer__right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 10px;
}
.footer__hours{font-size: 13px; color: rgba(15,23,42,.70); text-align:right;}
.footer__socials{display:flex; gap: 10px; justify-content:flex-end;}

.social{
  width: 40px; height: 40px;
  display:grid; place-items:center;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  color: rgba(15,23,42,.90);
  box-shadow: var(--shadow-soft);
}

@media (min-width: 720px){
  .footer__inner{
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
  }
}
@media (max-width: 719px){
  /* Keep the language switch always inside the viewport on very narrow devices.
     We reserve space inside the nav and absolutely position the switch.
     This prevents it from pushing layout and overflowing to the right. */
  /* Mobile header: language switch is in the TOPBAR (row 2), so do not reserve space in the nav. */
  .nav{ position: relative; padding-right: 0; }
  /* Hide the (old) mobile switch near the burger to avoid layout shifts/overflow. */
  .lang--mobile{ display: none !important; }
  .footer__left{align-items:center;}
  .footer__right{align-items:center;}
  .footer__hours{text-align:center;}
  .footer__socials{justify-content:center;}
}

/* =========================
   QUICKBAR (mobile)
========================= */
.quickbar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 10px;
  background: rgba(15,23,42,.92);
  border-top: 1px solid rgba(255,255,255,.12);
  z-index: 90;
}
.quickbar__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  font-weight: 900;
  color: rgba(255,255,255,.92);
}
.quickbar__btn--primary{
  background: var(--red);
  border-color: rgba(227,6,19,.70);
  color: var(--white);
}
@media (min-width: 720px){
  .quickbar{display:none}
  .footer{padding-bottom: 18px}
}

/* Mobile CTA full width */
@media (max-width: 520px){
  .heroCopy__cta .btn{width: 100%;}
}

/* =========================
   BRANDS PAGE (clean + no duplicates)
========================= */
.brandsIntro{
  max-width: 860px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 16px;
  margin-bottom: 16px;
}
.brandsIntro .h2{ color: var(--text); margin: 0 0 6px; }
.brandsIntro .lead{ color: rgba(36,46,64,.86); margin: 0; }

.brandsGrid{
  display:grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px){
  .brandsGrid{ grid-template-columns: 1fr 1fr; }
}

.brandCard{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 16px;
  color: var(--bluegray);
}
.brandCard__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.brandCard__link{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}
.brandCard__name{
  font-weight: 900;
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brandCard__site{
  font-weight: 900;
  color: var(--red);
  white-space: nowrap;
}
.brandCard__site:hover{ text-decoration: underline; }

/* Logo – da se ne razvlači */
.brandLogoImg{
  width: 160px;
  height: 56px;
  object-fit: contain;
  display:block;
  flex: 0 0 auto;
}
@media (max-width: 520px){
  .brandLogoImg{
    width: 140px;
    height: 52px;
  }
}

.brandCard__desc{
  margin: 0;
  color: rgba(36,46,64,.86);
  line-height: 1.7;
}

/* =========================
   DOWNLOAD PAGE (body simple + list)
========================= */
.downloadWrap{
  display:grid;
  gap: 14px;
  max-width: 980px;
}

.downloadIntro .h2{ margin-bottom: 6px; }

.downloadDocs{
  display:grid;
  gap: 10px;
}
.downloadDoc{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.downloadDoc__left{
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.downloadDoc__title{
  font-weight: 900;
}
.downloadDoc__meta{
  font-size: 13px;
  color: rgba(15,23,42,.65);
}
.downloadDoc__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Floating CTA – samo desktop (na mobilnom postoji quickbar) */
.floatingCta{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 85;
  box-shadow: var(--shadow);
}
@media (max-width: 719px){
  .floatingCta{ display:none; }
}
/* =========================
   CONTACT PAGE
========================= */
.contactIntro{ margin-bottom: 14px; }

.contactGrid2{
  display:grid;
  gap: 14px;
}
@media (min-width: 720px){
  .contactGrid2{ grid-template-columns: 1fr 1.25fr; align-items:start; }
}

.contactList{
  margin-top: 12px;
  display:grid;
  gap: 10px;
}
.contactItem{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.03);
  font-weight: 800;
  color: rgba(15,23,42,.90);
}
.contactItem:hover{ border-color: rgba(227,6,19,.25); }

.formGrid{
  margin-top: 12px;
  display:grid;
  gap: 10px;
}
@media (min-width: 720px){
  .formGrid{ grid-template-columns: 1fr 1fr; }
  .field--full{ grid-column: 1 / -1; }
}

.field{ display:grid; gap: 6px; }
.field__label{ font-weight: 900; color: rgba(15,23,42,.85); }

.field__input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.85);
  box-shadow: var(--shadow-soft);
  font-weight: 600;
  color: rgba(15,23,42,.92);
  outline: none;
}
.field__input:focus{ border-color: rgba(227,6,19,.35); }

.field__textarea{
  min-height: 140px;
  resize: vertical;
}

.check{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  color: rgba(15,23,42,.80);
  font-weight: 600;
}
.check input{ margin-top: 3px; }

.formActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Honeypot: sakriven */
.hp{ display:none; }

.mapWrap{
  margin-top: 14px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadow-soft);
  background: rgba(255,255,255,.8);
}
.mapIframe{
  width: 100%;
  height: 340px;
  border: 0;
  display:block;
}
@media (min-width: 720px){
  .mapIframe{ height: 420px; }
}
/* =========================
   PRODUCTS PAGE
========================= */
.productsIntro{ margin-bottom: 14px; }

.productsSections{
  display: grid;
  gap: 14px;
}

.productSection__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.productSection__title{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
}
.productSection__badge{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(227,6,19,.20);
  background: rgba(227,6,19,.06);
  font-weight: 900;
  color: rgba(15,23,42,.92);
}

.productText{
  color: var(--muted);
  line-height: 1.8;
  margin-top: 10px;
}

.productGallery{
  margin-top: 14px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px){
  .productGallery{ grid-template-columns: repeat(3, 1fr); }
}

.productImg{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.7);
  box-shadow: var(--shadow-soft);
}
.productImg img{
  width: 100%;
  height: 210px;
  object-fit: cover;
  display:block;
}
@media (min-width: 720px){
  .productImg img{ height: 240px; }
}

/* quick jump buttons (optional) */
.productsJump{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* =========================
   CONTACT (equal height columns)
   Works for local file:/// testing and hosting
========================= */
@media (min-width: 720px){
  /* Make the two columns share the same height */
  /* Make the two heading blocks the same height so panels align nicely */
  .page-contact .contactHead{
    min-height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
  }
  .page-contact .contactHead p{ margin: 0; }

  .page-contact .grid2.contactGrid{
    align-items: stretch; /* important: allow equal-height columns */
  }

  /* Turn each column into a flex stack */
  .page-contact .grid2.contactGrid > div{
    display: flex;
    flex-direction: column;
  }

  /* Let the white box (panel / form.panel) fill the remaining height */
  .page-contact .grid2.contactGrid > div > .panel,
  .page-contact .grid2.contactGrid > div > form.panel{
    flex: 1;
  }

  /* Keep form content nicely arranged inside the stretched panel */
  .page-contact .grid2.contactGrid > div > form.panel{
    display: flex;
    flex-direction: column;
  }

  /* Push the form buttons to the bottom if there is extra space */
  .page-contact .grid2.contactGrid > div > form.panel .formActions{
    margin-top: auto;
  }
}


/* Mobile language switch in TOPBAR (always fits on narrow screens) */
.topbar__right{
  display:flex;
  align-items:center;
  flex-shrink:0;
}


.lang--topbar{
  padding: 4px;
  border-radius: 14px;
}

/* Header language switch: hidden by default (enabled on mobile) */
.lang--header{ display: none; }


.lang--topbar .lang__btn{
  padding: 6px 10px;
  min-width: 44px;
  text-align: center;
  font-size: 12px;
}

/* Desktop vs mobile language switch placement */
@media (max-width: 719px){
  .lang--topbar{display:none !important;}
  .lang--header{display:flex !important;}
}
@media (min-width: 720px){
  .lang--header{display:none !important;}
}
/* Mobile language switch next to burger (visible without opening menu) */
.lang--mobile{
  margin-left: 8px;
  align-self: center;
  /* Stack SR/EN vertically on narrow screens so it never overflows */
  flex-direction: column;
  gap: 6px;
}
@media (max-width: 719px){
  /* On very narrow devices show only ONE language button (the other language)
     to avoid any chance of overflowing the header. Example: on SR pages show EN,
     on EN pages show SR. */
  .lang--mobile .lang__btn.is-active{ display: none; }

  /* Keep the switch compact in the header flow */
  .lang--mobile{ flex-direction: row; gap: 0; }
  /* Slightly tighter buttons on mobile */
  .lang--mobile .lang__btn{
    padding: 6px 8px;
    min-width: 44px;
    text-align: center;
    font-size: 12px;
  }
  /* Hide language switch inside the slide-in menu to avoid duplicates */
  .nav__actions{display:none;}
}
@media (min-width: 720px){
  .lang--mobile{display:none;}
  /* nav__actions is controlled by existing desktop nav rules */
}



/* ===== Language switch in TOPBAR: never overflow on small screens ===== */
.topbar__inner{ flex-wrap: wrap; }
.topbar__right{ flex: 0 0 auto; margin-left: auto; }

/* If space is tight, put language button on its own row, aligned right */
@media (max-width: 420px){
  .topbar__inner{ justify-content: flex-start; }
  .topbar__right{
    flex-basis: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .lang--topbar{ padding: 4px; border-radius: 12px; }
  .lang__btn{ padding: 6px 10px; }
}

/* ===== Prevent tiny horizontal overflow on mobile (safe clamp) ===== */
html, body { overflow-x: hidden; }

/* ===== Quickbar: allow columns to shrink without forcing overflow ===== */
.quickbar{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 100vw;
}
.quickbar__btn{ min-width: 0; }
.quickbar__btn span{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Extra-tight screens */
@media (max-width: 380px){
  .quickbar{ padding: 8px; gap: 6px; }
  .quickbar__btn{ padding: 11px 8px; font-size: 13px; }
}

/* Language button: slightly tighter on narrow screens */
@media (max-width: 420px){
  .lang--topbar .lang__btn{ padding: 6px 8px; min-width: 40px; }
}


/* =========================
   MOBILE HEADER CLEANUP (v9b)
   Desktop must stay unchanged
========================= */
@media (max-width: 719px){
  /* Topbar: 2 lines, centered */
  .topbar__inner{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 0;
  }
  .topbar__left{
    width: 100%;
    justify-content: center;
    flex: 0 0 auto;
  }
  .topbar__right{
    width: 100%;
    display: none;
    justify-content: center;
  
  /* topbar__right hidden on mobile (language moved to header) */
  }

  /* Show BOTH language buttons on mobile (centered) */
  .lang--topbar{
    justify-content: center;
  }
  .lang--topbar .lang__btn{
    min-width: 46px;
    padding: 8px 12px;
  }
  .lang--topbar .lang__btn.is-active{
    /* keep active visible on mobile */
    display: inline-flex;
  }

  /* Move language switch into header on mobile */
  .lang--topbar{ display: none !important; }
  .lang--header{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  .lang--header .lang__btn{ padding: 8px 12px; min-width: 46px; }

  /* Header grid: logo left, language centered, burger right */
  .header__inner{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-content: initial;
    gap: 10px;
  }
  .brand{ grid-column: 1; min-width: 0; gap: 0; }
  .lang--header{ grid-column: 2; justify-self: center; }
  .nav{ grid-column: 3; justify-self: end; }

  /* Mobile header content: icon-only (no title/tagline) */
  .brand__logo{ width: 92px; height: auto; }
  .brand__text{ display: none !important; }


  /* Bigger tap target for burger on mobile */
  .nav__toggle{ padding: 12px 14px; border-radius: 14px; }
  .nav__burger{ width: 22px; height: 3px; }
  .nav__burger::before,
  .nav__burger::after{ width: 22px; height: 3px; }

}