/* === ELYPSE Muse — przeszczep designu z PL Elypse MM (selektywny) 02.07.2026 === */

/* 1. Ceny czyste + wysrodkowane */
.projector_prices__info{display:none !important;}
.price_vat,.price_sellby{display:none !important;}
.price.main,.price{display:block !important;text-align:left !important;}

/* 2. Ukrycia natywne (premium) */
#freeShipping{display:none !important;}
.menu_search__item{display:none !important;}
#projector_stocks,#contact_map,.contact_stocks,#projector_amount{display:none !important;}
.projector_page .breadcrumbs{display:none !important;}

/* 3. Typografia marki */
.big_label,.headline{font-size:3rem;font-weight:800;}
.product__name{margin-top:1rem;font-size:1.4rem;}
.product__content_wrapper .product__name{display:block !important;text-align:left !important;width:100%;}
.main_txt h1{font-size:3rem;font-weight:800;letter-spacing:3px;}
.projector_tabs__name{font-size:1.4rem;font-weight:800;text-transform:uppercase;}
.max-width-1200{max-width:1440px;}
header .navbar-nav{display:flex;justify-content:center;gap:0 20px;}
header .nav-link{font-weight:600;padding:5px 10px;font-size:1.4rem;}

/* 4. Kafle produktow = 2:3 pod zdjecia (padding, sprawdzone na Muse) */
.hotspot .product__icon{height:0 !important;padding-bottom:150% !important;position:relative !important;overflow:hidden !important;display:block !important;background:#f1f1f1;}
.hotspot .product__icon img,.hotspot .product__icon picture img,.hotspot .product__icon picture{position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;object-fit:cover !important;object-position:center top !important;}
.hotspot .swiper .products{gap:0;}

/* 5. Filmy hero na pelna szerokosc */
html,body{overflow-x:hidden;}
#main_banner1{width:100vw;margin-left:calc(50% - 50vw);max-width:none;}
#main_banner1 video,#main_banner1 .main_slider__item video{width:100% !important;height:100%;object-fit:cover;max-width:unset;}
.video-container{max-width:unset;width:100%;height:100%;object-fit:cover;position:relative;}
#menu_buttons2{width:100vw !important;margin-left:calc(50% - 50vw) !important;max-width:none !important;}
#menu_buttons2 .menu_button_wrapper{width:100% !important;margin-left:0 !important;padding:0;}
#menu_buttons2 .ecb-wrap{width:100% !important;}
#menu_buttons2 .ecb-wrap video{width:100% !important;object-fit:cover;}

/* 6. Napisy overlay na filmach (design PL) */
.banner_containter_txt{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:flex-end;z-index:2;}
.banner_txt{width:100%;max-width:1440px;margin:0 auto;position:relative;bottom:15%;display:flex;flex-direction:column;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5);}
.banner_txt h1{font-size:clamp(2.5rem,4vw,5rem);text-transform:uppercase;color:#fff;letter-spacing:1px;margin:0;}
.banner_txt h2{color:#fff;letter-spacing:1px;font-weight:400;font-size:clamp(1.3rem,1.6vw,2rem);margin:10px 0 20px;}
.banner_txt a{border:1px solid #fff;width:fit-content;padding:10px 18px;color:#000 !important;text-decoration:none;border-radius:5px;background:#fff;font-weight:600;transition:.3s;}
.banner_txt a:hover{color:#fff !important;background:#000;border-color:#000;}
@media(max-width:978px){.banner_txt{left:20px;bottom:12%;padding-right:20px;}}

/* 7. Galeria PDP mobile — pelna szerokosc, bez strzalek, kropki */
@media (max-width:900px){
  #projector_photos{width:100vw;margin-left:calc(50% - 50vw);max-width:none;}
  #projector_photos .photos__slider,#projector_photos .photos__figure,#projector_photos .photos__photo,#projector_photos picture{width:100% !important;max-width:none;}
  #projector_photos .galleryNavigation,#projector_photos .swiper-button-next,#projector_photos .swiper-button-prev{display:none !important;}
  #projector_photos .galleryPagination{display:block !important;}
  #projector_photos .swiper-pagination{display:block !important;bottom:12px;}
  /* Kropki galerii = jak .el-ig-dot w polecane: 6px szara / 7px czarna, bez ::after */
  #projector_photos .swiper-pagination-bullet{width:6px !important;height:6px !important;margin:0 4px !important;background:rgba(0,0,0,.32) !important;border-radius:50% !important;opacity:1 !important;}
  #projector_photos .swiper-pagination-bullet:after{display:none !important;}
  #projector_photos .swiper-pagination-bullet-active{width:7px !important;height:7px !important;background:#111 !important;}
}

/* 8. Mobile: usun bialy odstep nad naglowkiem (nadmiarowy padding-top; header jest sticky) */
@media(max-width:978px){body{padding-top:0 !important;} #container.main_page,.main_page{padding-top:0 !important;}}

/* 9. Mobile: hero film WYZSZY (3:4 portret, jak konkurencja); poziomy film kadruje sie na srodku */
@media(max-width:978px){#main_banner1 .main_slider__item{aspect-ratio:3/4 !important;max-height:none !important;height:auto !important;} #main_banner1 .main_slider__item video,#main_banner1 video{width:100% !important;height:100% !important;object-fit:cover !important;object-position:center !important;}}

/* 10. Mobile: badge opinii nie zaslania produktow */
@media(max-width:978px){#opinions_badge{display:none !important;}}

/* 11. Mobile: ciasniejsze odstepy w karuzeli (jak konkurencja) */
@media(max-width:978px){.hotspot .swiper-slide,.hotspot .hotspot__product{margin-right:12px !important;} .hotspot .swiper-wrapper,.hotspot .swiper .products{gap:0 !important;}}
/* Ukryj badge Jakosc sklepu od Google (mobile) */
@media(max-width:978px){#google-merchantwidget-iframe-wrapper,#merchantwidgetiframe{display:none !important;}}
/* Usun przycisk do gory (strona niedluga) */
#backTop{display:none !important;}
/* Ukryj sekcje Blog na stronie glownej (za wczesnie na blog) */
#main_blog{display:none !important;}
/* Ukryj punkty lojalnosciowe w kaflach karuzeli (spojnosc) */
.hotspot .price[class~="--points"]{display:none !important;}

/* === 6. Galeria PDP mobile — pelne 2:3, obraz wypelnia kadr (03.07.2026) === */
@media(max-width:900px){
 #projector_photos .photos___slider_wrapper.swiper-wrapper,
 #projector_photos .photos__figure.swiper-slide{height:auto !important;}
 #projector_photos figure.photos__figure > picture{display:block !important;width:100% !important;height:auto !important;}
 #projector_photos figure.photos__figure picture img.photos__photo{width:100% !important;height:auto !important;max-height:none !important;aspect-ratio:2/3 !important;object-fit:cover !important;display:block !important;}
}

/* === 7. PDP mobile — bialy pasek (oddzielony) + galeria 2:3 pod nim (04.07.2026 v3, przywrocone) === */
@media(max-width:900px){
 #container.projector_page header.commercial_banner{background:#fff !important;position:static !important;transform:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;box-shadow:none !important;}
 #container.projector_page #content{margin-top:0 !important;}
}

/* === 8. PDP — ukrycie zepsutej grafiki statusu dostepnosci (graph_1_1.png 404 w EN) (04.07.2026) === */
.projector_status__gfx{display:none !important;}

/* === 9. Strona glowna — spojny, responsywny rytm odstepow miedzy sekcjami (04.07.2026) === */
@media(max-width:900px){
 #content #main_banner1,
 #content section[id^="main_hotspot_zone"],
 #content #menu_buttons2,
 #content #instagram{margin-bottom:clamp(18px,5vw,30px) !important;}
 #content .hotspot__name{margin:0 0 clamp(18px,5vw,30px) !important;}
}
/* === 10. PDP mobile — slim naglowek + sticky bar + jednolita biel (04.07.2026 v2, skonsolidowane) === */
@media(max-width:900px){
 /* 10a. Naglowek: logo + WSZYSTKIE ikony (lupa, serce, koszyk, hamburger) na jednej osi.
    Kazdy kontener ikon = 40px z trescia wysrodkowana => wspolna os ze srodkiem logo.
    Maly odstep u gory (6px), wiekszy u dolu (13px) => logo nie dotyka gornej krawedzi ani zdjecia. */
 #container.projector_page header.commercial_banner{
  align-items:center !important;height:auto !important;min-height:0 !important;max-height:none !important;
  padding-top:6px !important;padding-bottom:13px !important;margin:0 !important;}
 #container.projector_page header.commercial_banner #logo,
 #container.projector_page header.commercial_banner #menu_search,
 #container.projector_page header.commercial_banner #menu_top,
 #container.projector_page header.commercial_banner #menu_categories .navbar-toggler{
  display:flex !important;align-items:center !important;align-self:center !important;
  height:40px !important;min-height:0 !important;max-height:40px !important;
  padding-top:0 !important;padding-bottom:0 !important;margin-top:0 !important;margin-bottom:0 !important;}
 #container.projector_page header.commercial_banner #logo img{max-height:40px !important;width:auto !important;}
 #container.projector_page header.commercial_banner #menu_categories .navbar-toggler{justify-content:center !important;}
 /* 10b. Dolny sticky bar zakupu: zwezony; cien = hairline zamiast miekkiego szarego pasa 14px
    (to on dawal "roznice odcienia" miedzy zdjeciem a paskiem ceny). */
 #elypse-sticky-cta{padding-top:8px !important;padding-bottom:calc(8px + env(safe-area-inset-bottom)) !important;box-shadow:0 -1px 0 rgba(0,0,0,.06) !important;}
 #elypse-sticky-cta .esc-btn{padding-top:10px !important;padding-bottom:10px !important;}
 #elypse-sticky-cta .esc-price{font-size:16px !important;}
 /* 10c. Galeria: tlo kadru = biel strony (kadr #f1f1f1 dawal szary odcien pod/obok zdjecia). */
 #projector_photos .photos__figure,#projector_photos figure.photos__figure,#projector_photos .photos__slider{background:#fff !important;}
}