/* Tambi layout width — aligned to Vilgain (.container max-width: 1430px) */
:root{
  --tambi-content-max: 1430px;
  --tambi-content-pad: 48px; /* ~3rem like Vilgain desktop */
}
@media (max-width: 959px){
  :root{ --tambi-content-pad: 16px; }
}
@media (min-width: 1600px){
  :root{ --tambi-content-max: 1860px; } /* Vilgain .container-fluid */
}

.brxe-container,
#brxe-mainctn,
#brxe-trustctn,
#brxe-navctn,
#brxe-bestctn,
#brxe-catctn,
#brxe-whyctn,
#brxe-advctn{
  width: 100% !important;
  max-width: var(--tambi-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--tambi-content-pad) !important;
  padding-right: var(--tambi-content-pad) !important;
  box-sizing: border-box !important;
}

/* Header rows use same content width */
#brxe-mainrow,
#brxe-navrow,
#brxe-trustsec{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ===== Hero: left = content edge, right = viewport edge (Vilgain full-overflow) ===== */
#brxe-herosec.brxe-section,
#brxe-herosec{
  --left-inset: max(var(--tambi-content-pad), calc((100vw - var(--tambi-content-max)) / 2 + var(--tambi-content-pad)));
  --hero-gap: 10px;
  --hero-promo: 376px; /* Vilgain .slider--hero item max-width */
  --hero-height: clamp(420px, 40vw, 560px);
  background: #fff !important;
  padding: 24px 0 32px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#brxe-heroctn,
#brxe-heroctn.brxe-block,
#brxe-heroctn.brxe-container{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-left: var(--left-inset) !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

#brxe-heroslider,
#brxe-heroslider.brxe-block{
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  gap: var(--hero-gap) !important;
  width: calc(100vw - var(--left-inset)) !important;
  max-width: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  box-sizing: border-box !important;
}
#brxe-heroslider::-webkit-scrollbar{display:none!important}

/* Vilgain: first slide width 70% / max 1250px */
#brxe-heromain,
#brxe-heromain.brxe-block{
  --hero-track: calc(100vw - var(--left-inset));
  --hero-main: min(1250px, calc(var(--hero-track) * 0.70));
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  flex: 0 0 var(--hero-main) !important;
  width: var(--hero-main) !important;
  min-width: var(--hero-main) !important;
  max-width: var(--hero-main) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
  gap: 0 !important;
  column-gap: 0 !important;
  align-items: stretch !important;
  background: #F4F4F2 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  min-height: var(--hero-height) !important;
  height: var(--hero-height) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#brxe-herotext{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 20px !important;
  padding: clamp(28px, 3.5vw, 56px) clamp(24px, 3vw, 40px) clamp(28px, 3.5vw, 56px) clamp(28px, 3.5vw, 56px) !important;
  min-width: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
}
#brxe-heroh1{
  color:#111!important;
  font-size: clamp(28px, 2.8vw, 48px) !important;
  line-height: 1.12 !important;
  margin: 0 !important;
}
#brxe-herop{
  color:#555!important;
  max-width: 42ch !important;
  margin: 0 !important;
  font-size: clamp(14px, 1.1vw, 16px) !important;
}

/* Vilgain narrow slides max-width: 376px */
#brxe-promotile,
#brxe-promo2,
#brxe-promo3,
#brxe-promo4{
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  flex: 0 0 var(--hero-promo) !important;
  width: var(--hero-promo) !important;
  min-width: var(--hero-promo) !important;
  max-width: var(--hero-promo) !important;
  min-height: var(--hero-height) !important;
  height: var(--hero-height) !important;
  color: #fff !important;
  border-radius: 16px !important;
  padding: 36px 28px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  box-sizing: border-box !important;
}

#brxe-promo2{background:#1A1A1A!important}
#brxe-promo3{background:#222!important}
#brxe-promo4{background:#0D0D0D!important}
#brxe-promoh,#brxe-promop,
#brxe-promo2h,#brxe-promo2p,
#brxe-promo3h,#brxe-promo3p,
#brxe-promo4h,#brxe-promo4p{color:#fff!important;margin:0!important}
#brxe-heroside{display:none!important}

/* Arrows — Vilgain-like, over the visible band */
#brxe-heronav{
  position: absolute !important;
  left: var(--left-inset) !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  z-index: 6 !important;
  background: transparent !important;
}
.tambi-hero-nav{position:absolute;inset:0;pointer-events:none}
.tambi-hero-prev,
.tambi-hero-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
}
.tambi-hero-prev{left: 12px}
.tambi-hero-next{right: 12px}
.tambi-hero-prev:hover,
.tambi-hero-next:hover{transform:translateY(-50%) scale(1.04)}
.tambi-hero-prev:disabled,
.tambi-hero-next:disabled{opacity:.35;cursor:default;transform:translateY(-50%)}

@media (max-width: 959px){
  #brxe-herosec{
    --hero-promo: 78vw;
    --hero-height: auto;
  }
  #brxe-heromain{
    --hero-main: 78vw;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
  }
  #brxe-promotile,
  #brxe-promo2,
  #brxe-promo3,
  #brxe-promo4{
    height: auto !important;
    min-height: 260px !important;
  }
  img#brxe-heroimg{min-height:220px!important;height:220px!important}
}
/* 2nd tile photo bg */
#brxe-promotile{
  background-color:#111!important;
  background-image:url(https://tambi.pl/wp-content/uploads/2026/08/30830fa74c6cb66ab4937f85d352-1024x1024.jpeg)!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  position:relative!important;
  overflow:hidden!important;
}
#brxe-promotile::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.7) 100%)!important;
  pointer-events:none!important;
  z-index:0!important;
}
#brxe-promotile > *{position:relative!important;z-index:1!important}


/* Hero image: large fill, pin left so left side isn't cropped */
#brxe-heromain > .brxe-image{
  position: relative !important;
  align-self: stretch !important;
  overflow: hidden !important;
  min-width: 0 !important;
  height: 100% !important;
  background: #F4F4F2 !important;
  border-radius: 0 !important;
}
#brxe-heromain > .brxe-image img,
#brxe-heroimg,
img#brxe-heroimg{
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: 100% !important;
  min-width: 108% !important; /* keep it big like cover */
  max-width: none !important;
  min-height: 100% !important;
  max-height: none !important;
  transform: translateY(-50%) !important;
  object-fit: cover !important;
  object-position: left center !important;
  border-radius: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: #F4F4F2 !important;
}