/* ════════════════════════════════════════════════════════════════
   HUROM.PL — CUSTOM CSS
   ════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. ZMIENNE (CSS variables)
   ───────────────────────────────────────────── */
:root {
  /* Tlo stopki (footer::before, width:100vw) — ciemny zamiast zielonego.
     Steruje tylko paskiem stopki; zielone hotspoty zostaja (osobne zmienne). */
  --footer-before-background: #1C1F20 !important;
  --hotspot-arrow-color: #78c500 !important;
  --hotspot-arrow-background-hover: #78c500 !important;
  --swiper-pagination-bullet-inactive-color: #BDBDBD;
  /* Naglowki stopki: Poppins (domyslnie szablon dawal Arial) */
  --footer-headline-font-family: 'Poppins', sans-serif !important;
}

/* ─────────────────────────────────────────────
   2. FONTY — markowy font wszędzie + ubicie Inter (TrustMate)
   Zweryfikowane na żywo: Inter 5102 → 0 elementów; Inter NIE jest
   preloadowany, więc ~18 plików nie pobierze się. Gwiazdki ocen OK.
   ───────────────────────────────────────────── */
body {
  font-family: 'Poppins', 'DM Sans', Arial, sans-serif !important;
}

/* TrustMate + edrone — Poppins zamiast Inter / Times.
   Podwojone [class] podbija specyficzność, by wygrać z !important TrustMate. */
[class*="tm-"][class][class],
[class*="tm-"][class][class] *,
[class*="trustmate"][class][class],
[class*="trustmate"][class][class] *,
[id^="edrone--"], [id^="edrone--"] *,
[class*="edrone"], [class*="edrone"] *,
[class*="emm-"], [class*="emm-"] * {
  font-family: 'Poppins', 'DM Sans', Arial, sans-serif !important;
}

/* <strong>/<b> w tresci -> DM Sans 700 (zamiast Poppins).
   Akapit jest DM Sans, wiec pogrubienie tez DM Sans (tylko ciezsze) — bez rozjazdu krojow. */
p strong, p b, li strong, li b,
.newdescription strong, .newdescription b,
#projector_longdescription strong, #projector_longdescription b,
.hb-wrap strong, .hb-wrap b,
#blog-item strong, #blog-item b {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
}

/* ─────────────────────────────────────────────
   3. UKRYTE ELEMENTY (globalne)
   ───────────────────────────────────────────── */
.newsletter { display: none; }
#main_news { display: none; }
#main_tree5 .section { display: none; }
.basket__unknown_delivery { display: none; }

/* ════════════════════════════════════════════════════════════════
   4. OPIS PRODUKTU (Pulse) — UJEDNOLICENIE
   ────────────────────────────────────────────────────────────────
   Cztery scenariusze:
   1. Custom landing z wlasnym <style> (np. Bamix) - tylko biala ramka,
      typografia nieruszana
   2. Czysty HTML opis (np. Garland) - biala ramka + standardowa typografia
   3. Edytor Pulse 1 sekcja (np. Alessi) - biala ramka + typografia
   4. Edytor Pulse wiele sekcji (np. bikerun) - JEDEN wspolny panel
      zamiast osobnych bialych kafelkow
   ════════════════════════════════════════════════════════════════ */

/* A. Opis BEZ edytora - biala ramka wokol (dziala dla custom landingow tez) */
#projector_longdescription:not(.newdescription) {
  background: #fff !important;
  border-radius: 24px !important;
  padding: 40px 56px !important;
  margin: 0 0 40px !important;
}
@media (max-width: 768px) {
  #projector_longdescription:not(.newdescription) {
    padding: 24px 20px !important;
    border-radius: 16px !important;
  }
}

/* B. Opis Z edytora - jeden wspolny bialy panel na cala grupe sekcji */
.newdescription__group {
  background: #fff !important;
  border-radius: 24px !important;
  padding: 40px 56px !important;
  margin: 0 0 40px !important;
  gap: 24px !important;
}
@media (max-width: 768px) {
  .newdescription__group {
    padding: 24px 20px !important;
    border-radius: 16px !important;
    gap: 20px !important;
  }
}

/* B.1 Pojedyncza sekcja - przezroczysta, bez wlasnego panelu */
.newdescription__section {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: block !important;
  gap: 0 !important;
}

/* B.2 Layouty zlozone (column/default z obrazkami) zachowuja grida */
.newdescription__section[data-layout="column"],
.newdescription__section[data-layout="default"] {
  display: grid !important;
  gap: 32px !important;
}

/* C. NAGLOWKI I TEKST - tylko dla opisow Z edytora ORAZ
   zwyklych HTML BEZ wlasnego <style> w srodku (omijamy custom landingi) */

/* C.1 Opisy z edytora Pulse */
.newdescription h2 {
  font-size: 28px !important;
  line-height: 1.25 !important;
  margin: 28px 0 16px !important;
  font-weight: 600 !important;
}
.newdescription h3 {
  font-size: 22px !important;
  line-height: 1.3 !important;
  margin: 24px 0 12px !important;
  font-weight: 600 !important;
}
.newdescription h4 {
  font-size: 18px !important;
  line-height: 1.35 !important;
  margin: 20px 0 10px !important;
  font-weight: 600 !important;
}
.newdescription p {
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin: 0 0 14px !important;
}
.newdescription ul,
.newdescription ol {
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin: 0 0 14px !important;
}

/* C.2 Zwykly HTML opis (bez edytora, bez custom <style>) */
#projector_longdescription:not(.newdescription):not(:has(> style)) h2 {
  font-size: 28px !important;
  line-height: 1.25 !important;
  margin: 28px 0 16px !important;
  font-weight: 600 !important;
}
#projector_longdescription:not(.newdescription):not(:has(> style)) h3 {
  font-size: 22px !important;
  line-height: 1.3 !important;
  margin: 24px 0 12px !important;
  font-weight: 600 !important;
}
#projector_longdescription:not(.newdescription):not(:has(> style)) h4 {
  font-size: 18px !important;
  line-height: 1.35 !important;
  margin: 20px 0 10px !important;
  font-weight: 600 !important;
}
#projector_longdescription:not(.newdescription):not(:has(> style)) p {
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin: 0 0 14px !important;
}
#projector_longdescription:not(.newdescription):not(:has(> style)) ul,
#projector_longdescription:not(.newdescription):not(:has(> style)) ol {
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin: 0 0 14px !important;
}

/* D. Trim marginesow przy krawedziach panelu */
#projector_longdescription:not(.newdescription):not(:has(> style)) > *:first-child,
.newdescription__group > .newdescription__section:first-child > *:first-child,
.newdescription__group > .newdescription__section:first-child {
  margin-top: 0 !important;
}
#projector_longdescription:not(.newdescription):not(:has(> style)) > *:last-child,
.newdescription__group > .newdescription__section:last-child > *:last-child,
.newdescription__group > .newdescription__section:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 768px) {
  .newdescription h2,
  #projector_longdescription:not(.newdescription):not(:has(> style)) h2 { font-size: 22px !important; }
  .newdescription h3,
  #projector_longdescription:not(.newdescription):not(:has(> style)) h3 { font-size: 18px !important; }
  .newdescription h4,
  #projector_longdescription:not(.newdescription):not(:has(> style)) h4 { font-size: 16px !important; }
  .newdescription p,
  .newdescription ul,
  .newdescription ol,
  #projector_longdescription:not(.newdescription):not(:has(> style)) p,
  #projector_longdescription:not(.newdescription):not(:has(> style)) ul,
  #projector_longdescription:not(.newdescription):not(:has(> style)) ol { font-size: 14px !important; }
}

/* Mobile - wylacz wbudowany padding 32px sekcji opisu */
@media (max-width: 978px) {
  .newdescription {
    --longdescription-section-padding: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   5. KARTA PRODUKTU
   ════════════════════════════════════════════════════════════════ */

/* Apple Pay / Google Pay - fix przycinania borderu */
.projector_oneclick__item,
#oneclick_googlePay,
#oneclick_applePay,
[id*="oneclick_"][class*="--googlePay"],
[id*="oneclick_"][class*="--applePay"] {
  min-height: 60px !important;
  height: auto !important;
  overflow: visible !important;
}
.projector_oneclick__items {
  overflow: visible !important;
}
.projector_oneclick__item iframe {
  display: block !important;
  width: 100% !important;
}

.projector_tabs__mobile {
  min-width: 0 !important;
}

/* Ceny - ukryj omnibus / max / before-rebate / new-price / deposit */
.product__prices .price.--omnibus,
.product__prices .price.--max,
.product__prices .price.--before-rebate,
.product__prices .price.--new-price,
.product__prices .price.--deposit {
  order: 3;
  display: none;
}

/* Najnizsza cena / SRP - ukryj */
#projector_form .projector_prices__lowest_price {
  margin: var(--projector-details-lowest-price-margin, 0px);
  padding: var(--projector-details-lowest-price-padding, 0px);
  display: none;
}
#projector_form .projector_prices__srp_wrapper.--active {
  display: none !important;
}

/* Traits / status - ukryj */
#search .product__traits {
  border-top: 1px solid #E5E5E5;
  padding: var(--product-content-padding) 0;
  margin: 0 var(--product-content-padding);
  display: none !important;
}
.traits {
  font-size: 1.4rem;
  margin-bottom: 3.2rem;
  padding: 3.2rem 0;
  border-bottom: 1px solid #E5E5E5;
  border-top: 1px solid #E5E5E5;
  display: none;
}
.projector_status__info_amount {
  display: none;
}

/* Galeria - max 4 zdjecia + kwadratowe kafelki (tylko desktop) */
@media (min-width: 1024px) {

  /* Ukryj slajdy od 5. wzwyz */
  .photos___slider_wrapper .photos__figure.swiper-slide:nth-child(n+5) {
    display: none !important;
  }

  /* Wymus kwadratowy kafelek (ratio 1:1) */
  .photos___slider_wrapper .photos__figure.swiper-slide {
    aspect-ratio: 1 / 1;
    height: auto !important;
    overflow: hidden;
    background: #fff;
    border-radius: 24px; /* dopasuj wartosc jesli trzeba */
  }

  /* Zdjecie wypelnia kafelek bez przycinania */
  .photos___slider_wrapper .photos__figure.swiper-slide picture,
  .photos___slider_wrapper .photos__figure.swiper-slide picture img,
  .photos___slider_wrapper .photos__figure.swiper-slide video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: inherit; /* zeby img tez sie ladnie wpisal */
  }

}

/* ─────────────────────────────────────────────
   6. LISTING / HOTSPOTY
   ───────────────────────────────────────────── */
.hotspot.--list .product .price.--omnibus,
.hotspot.--list .product .price.--max,
.hotspot.--list .product .price.--before-rebate,
.hotspot.--list .product .price.--new-price {
  order: 3;
  display: none;
}

/* ─────────────────────────────────────────────
   7. NAGLOWEK / LAYOUT
   ───────────────────────────────────────────── */
/* Header + menu szersze do 1680px, reszta strony bez zmian */
@media (min-width: 1400px) {

  /* Rozszerz glowny wrapper (header + tresc siedzi w nim) */
  body > #container.max-width-1200 {
    max-width: 1680px !important;
  }

  /* Cofnij szerokosc dla czesci z trescia produktu */
  #container > #layout {
    max-width: 1398px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

}

/* ─────────────────────────────────────────────
   8. BLOG
   ───────────────────────────────────────────── */
/* Featured image tylko gdy wpis ma customowy blok .hb-wrap */
#blog-item .blog-item_sub:has(> .hb-wrap) > img.blog_image {
  display: none !important;
}

/* Karta produktu: max 4 wpisy blogowe */
.projector_page .article__block .article__item:nth-child(1n+5) {
  display: none !important;
}

/* ─────────────────────────────────────────────
   9. STOPKA — menu3 na ciemnym tle
   (tlo stopki = zmienna --footer-before-background w sekcji 1;
    naglowki/linki stopki sa juz biale przez zmienne IdoSell)
   ───────────────────────────────────────────── */
/* Menu3 (dolne menu w stopce) — pozycje widoczne na ciemnym tle.
   Podwojone ID podbija specyficznosc, by wygrac z regula IdoSell. */
footer #menu_categories3#menu_categories3 a,
footer #menu_categories3#menu_categories3 .nav-link,
footer #menu_navbar3#menu_navbar3 a,
footer #menu_navbar3#menu_navbar3 .nav-link {
  color: #ffffff !important;
}
footer #menu_categories3#menu_categories3 a:hover,
footer #menu_navbar3#menu_navbar3 a:hover {
  color: #78c500 !important;
}

/* Odstep nad menu3 — naglowki nie wciskaja sie w krawedz ciemnego paska */
footer #menu_categories3#menu_categories3 {
  padding-top: 48px !important;
}

/* Spojna typografia stopki + menu3: NAGLOWKI = Poppins, LINKI = DM Sans.
   (naglowki stopki ida przez --footer-headline-font-family w sekcji 1) */

/* Naglowki menu3 -> Poppins (wszedzie, takze mobile) */
footer #menu_navbar3#menu_navbar3 > ul.navbar-nav > li.nav-item > .nav-link,
footer #menu_navbar3#menu_navbar3 > ul.navbar-nav > li.nav-item > .nav-link-wrapper > .nav-link {
  font-family: 'Poppins', sans-serif !important;
}
/* Wymiary/odstepy naglowkow = stopka — TYLKO desktop.
   Na mobile (<=978px) rzadzi akordeon modulu (kreska + strzalka). */
@media (min-width: 979px) {
  footer #menu_navbar3#menu_navbar3 > ul.navbar-nav > li.nav-item > .nav-link,
  footer #menu_navbar3#menu_navbar3 > ul.navbar-nav > li.nav-item > .nav-link-wrapper > .nav-link {
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 23.4px !important;
    padding: 0 0 22.6px !important;
  }
}

/* Linki (stopka + menu3 submenu + pasek kontaktowy) -> DM Sans */
#footer_links .footer_links_sub,
#footer_links .footer_links_sub a,
footer #menu_categories3#menu_categories3 .navbar-subnav a,
footer #menu_navbar3#menu_navbar3 .navbar-subnav a,
footer #menu_contact a {
  font-family: 'DM Sans', sans-serif !important;
}

/* Pod-linki menu3 = pod-linki stopki: 400, block, padding 10px 0 (odstep 38px).
   TYLKO desktop — na mobile 'display:block' rozbilby zwijanie akordeonu modulu. */
@media (min-width: 979px) {
  footer #menu_navbar3#menu_navbar3 .navbar-subnav a.nav-link,
  footer #menu_categories3#menu_categories3 .navbar-subnav a {
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 18.2px !important;
    display: block !important;
    padding: 10px 0 !important;
  }
}

/* Usun podkreslenia ze wszystkich linkow w stopce */
footer #menu_categories3#menu_categories3 a,
footer #menu_navbar3#menu_navbar3 a,
#footer_links a,
#footer_links .footer_links_sub a,
footer #menu_contact a,
footer .footer_settings a {
  text-decoration: none !important;
}

/* ─────────────────────────────────────────────
   10. TRUSTMATE / ROZNE
   ───────────────────────────────────────────── */
.tm-multihornet__wrapper .tm-grade-label__star .trustmate-star__icon {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Mniejszy badge TrustMate w menu3 — wiecej miejsca dla kolumn (+~120px).
   TYLKO desktop: na mobile #menu_categories3 jest flex-column, wiec
   flex-basis 365px stalby sie WYSOKOSCIA i zrobil pusta dziure. */
@media (min-width: 979px) {
  #menu_categories3 > div:has(> .tm-dodo2) {
    flex: 0 0 365px !important;
    width: 365px !important;
  }
  #menu_categories3 .tm-dodo2 {
    transform: scale(0.75);
    transform-origin: top left;
    margin-bottom: -34px; /* kompensuje wysokosc po skalowaniu */
  }
}

/* Mobile: badge w naturalnej wielkosci, wysrodkowany, maly odstep pod spodem.
   (na mobile NIE ma flex:365px, wiec nie ma juz pustki 365px) */
@media (max-width: 978px) {
  footer #menu_categories3 > div:has(> .tm-dodo2) {
    align-self: center !important;
    margin: 0 auto !important;
    padding-bottom: 20px !important;
  }
}

.Hurom_AddOn_1_bannerWrap {
  background: #ffffff !important;
}