/* =========================================================
   IDOSELL FASHION — CLEAN & MODERN REFACTOR (Custom CSS)
   - porządek selektorów
   - zmienne kolorów/typografii
   - łagodniejsze cienie, przejścia, focus (WCAG)
   - zachowane brandowe żółcie + istniejące moduły
   ========================================================= */

/* ============ 0) Zmienne motywu ============ */
:root{
  /* Brand & UI */
  --brand-yellow: #ffdb00;    /* główny żółty */
  --brand-yellow-2: #ffd623;  /* wariacja z istniejących */
  --brand-green: #22b517;     /* bar top */
  --accent-green: #68b900;    /* link „Wielopaki” */
  --ink: #000000;
  --ink-muted: #5f5f5f;
  --bg: #ffffff;
  --line: #e8e8e8;

  /* Użyteczne szarości */
  --gray-50:#fafafa; --gray-100:#f5f5f5; --gray-200:#eee; --gray-300:#dbdbdb;
  --gray-700:#343434; --gray-800:#222; --gray-900:#111;

  /* Promienie i cienie */
  --radius: 12px; --radius-lg: 18px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.10);

  /* Typografia (fluid) */
  --fs-xs: clamp(12px,.8vw,13px);
  --fs-sm: clamp(13px,.9vw,14px);
  --fs-md: clamp(14px,1vw,16px);
  --fs-lg: clamp(16px,1.2vw,18px);
  --fs-xl: clamp(18px,1.6vw,22px);
}

/* ============ 1) Baza / Reset delikatny ============ */
html{scroll-behavior:smooth}
body{
  background: var(--bg);
  color: var(--ink);
  font-weight: 300; /* z oryginału */
  font-size: var(--fs-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{display:block;max-width:100%;height:auto;border-radius: 8px}
a{color:inherit;text-decoration:none;transition: color .2s ease, opacity .2s ease}
a:hover{opacity:.9}

:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--brand-yellow) 65%, #fff);
  outline-offset: 2px; border-radius: 8px;
}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

/* ============ 2) Layout / kontenery ============ */
.max-width-1200{max-width:1400px} /* z oryginału */
.row{margin-right:0;margin-left:0} /* z oryginału */

/* ============ 3) Header / Menu / Logo ============ */
#logo img{max-height:70px}
#menu_categories{
  background: var(--brand-yellow-2);
  border-radius: 30px;
  margin-bottom: 0; /* desktop keep */
  text-transform: uppercase;
}
#menu_navbar{padding:5px 25px}
#menu_search .menu_search__input{
  border:1px solid var(--gray-300);
  border-radius: 20px !important;
  transition: box-shadow .2s ease, border-color .2s ease;
}
#menu_search .menu_search__input:focus{
  border-color: color-mix(in oklab, var(--brand-yellow) 45%, var(--gray-300));
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--brand-yellow) 18%, transparent);
}
header .navbar-collapse ul{
  justify-content: space-around; /* czytelniejsze na szeroko */
  gap: 1%;
}

/* Subnav (desktop) */
@media (min-width:979px){
  header .navbar-subnav{
    padding:10px 50px;
    background:#f9f9f9;
    border:2px solid #000;
    border-radius: var(--radius);
  }
}

/* Header kolor na mobile */
@media (max-width:978px){
  header{background: var(--brand-yellow)}
}

/* ============ 4) Top / Bottom Bary ============ */
.topbar_menu{margin:0;list-style:none}
.topbar_menu>li{display:table-cell;vertical-align:middle}
.topbar_menu>li>a,.topbar_menu>li>p{
  display:inline-block;line-height:1;font-size:1.2rem;padding:.3rem;text-align:center;cursor:pointer
}
.top-row-icon{filter: invert(100%)}
.top-bar{
  padding:1px 2%;
  width: calc(100% + 30px);
  z-index:999;
  margin-left:calc(-15px + env(safe-area-inset-right));
}
@media (min-width:1200px){
  .top-bar,.bottom-bar{padding:1px calc((100vw - 1180px)/2)}
}
.top-bar a:hover{color: darkgreen}
.bottom-bar{position:fixed;bottom:0;width:100%;z-index:9999}
.first-bar{
  background: var(--brand-green);
  color:#fff;padding:7px;font-size:1.2rem;text-align:center
}
.second-bar{
  background: var(--brand-yellow);text-align:center;font-size:1.2rem
}
.second-bar>a{text-decoration:none}
.top-bar-left{float:left}.top-bar-right{float:right}
.top-bar--separator{margin:0 10px;color:#5e501a;font-weight:100}
.top-bar-a-mark{color:#ab0000}
.rabate-codes-link{font-weight:bold;color:#0a3fbb}

/* ============ 5) Sekcje ze zdjęciami / hero ============ */
.photos__figure{mix-blend-mode: darken}
.photos__link,.slick-track{height:100%}
.photos__link{background:none!important;display:flex;justify-content:center;align-items:center}
.photos__slider{background:none!important}
@media (min-width:757px){
  .photos.--gallery .photos__figure:not(.--nav){flex:0 0 49%;max-width:49%}
  .photos__slider_wrapper{padding:2%;flex-flow: row-reverse}
  .photos.--gallery .photos__photo{mix-blend-mode: darken}
}

/* ============ 6) Różne elementy UI ============ */
.hotspot{padding:0 10px}
#main_cms2,.article__block.row{padding:2%}
.headline{text-align:center}
.article__block{grid-template-columns:1fr 1fr 1fr}
.firm_logo>img,.product__icon img{mix-blend-mode: darken}
.firm_logo>img{min-height:25px}
.main_producers{padding:1%}
.search_page aside{opacity:.8;height:-webkit-fill-available}
.menu_search__input{border-radius:20px!important}

/* Sticky banner u dołu (Top info) */
#top-info{
  position:fixed;bottom:0;width:100%;display:grid;grid-template-columns:1fr 50px;grid-template-areas:"txt close";
  height:6vh;color:#000;font-size:1.6rem;align-content:center;text-align:center;padding:10px 5px;z-index:999;
  transition:.5s;border-top:1px solid #fff;background: var(--brand-yellow);cursor:pointer
}
@media (max-width:719px){#top-info{border-top:8px solid #fff}}
@media only screen and (max-width:768px){#top-info{position:fixed;bottom:0;top:auto;height:fit-content}}
.top-info-txt{grid-area:txt;width:100%;margin:auto}
.top-info-close{grid-area:close;width:100%;height:100%;font-size:2.2rem;text-align:center;color:#000;cursor:pointer}
.top-info-close:hover{color:navy}
.top-info-link{text-decoration:none;text-transform:uppercase}
#top-info .top-info-txt > a{color:#000}
#top-info .top-info-txt > a > b{text-shadow:1px 1px 2px #000}
#top-info .top-info-txt > a:hover,#top-info .top-info-txt > a > b:hover{color:#feffda}
.top-info-display-none,.projector_prices__unit_converted_price{display:none}

/* Newsletter — efekt „fala” zachowany, lekkie wygładzenie */
.newsletter-trigger{cursor:pointer}
.newsletter-section{
  display:block;padding:20px!important;position:relative;min-height:300px;transition:.3s;margin-bottom:10px;
  border:4px solid #fff;border-radius: var(--radius);box-shadow: var(--shadow-sm)
}
.newsletter-section:hover{background:#fffce9;box-shadow: var(--shadow-md)}
.newsletter-txt{position:relative;top:150px;color:#282828}
.newsletter-bar{position:relative}
.newsletter-bar h2{color:#fff;font-size:4.8vw;position:absolute}
@media (max-width:1024px){.newsletter-bar h2{font-size:6vw;padding:8px}.newsletter-txt{top:100px}}
@media (max-width:600px){.newsletter-bar h2{font-size:7vw}.newsletter-txt{top:80px}.newsletter-section{padding:10px!important}}
@media (max-width:320px){.newsletter-bar h2{font-size:6.5vw}}
.newsletter-bar h2:nth-child(1){color:transparent;-webkit-text-stroke:1px #000}
.newsletter-bar h2:nth-child(2){color:#ffcd00;animation: water-animate 4s ease-in-out infinite}
@keyframes water-animate{
  0%,100%{clip-path:polygon(0% 45%,16% 44%,33% 50%,54% 60%,70% 61%,84% 59%,100% 52%,100% 100%,0% 100%)}
  50%{clip-path:polygon(0% 60%,15% 65%,34% 66%,51% 62%,67% 50%,84% 45%,100% 46%,100% 100%,0% 100%)}
}

/* ============ 7) Labelki / badże / kolory filterów ============ */
span.label{font-size:1.2rem}
.label.--bargain{color:#000;background:#ffd000}

/* Kolory atrybutów (zachowane) */
label[for="filter_traits21_60"]:before{background:#edb463!important}
label[for="filter_traits21_40"]:before{background:#ffffff!important}
label[for="filter_traits21_55"]:before{background:#783939!important}
label[for="filter_traits21_38"]:before{background:#000000!important}
label[for="filter_traits21_61"]:before{background:#1e267a!important}
label[for="filter_traits21_48"]:before{background:#3694e1!important}
label[for="filter_traits21_56"]:before{background:#f89406!important}
label[for="filter_traits21_58"]:before{background:#ffacac!important}
label[for="filter_traits21_63"]:before{background:#dfdfdf!important}
label[for="filter_traits21_23"]:before{background:#8f8f8f!important}
label[for="filter_traits21_54"]:before{background:#2f8f3a!important}
label[for="filter_traits21_62"]:before{background:#efc01e!important}
label[for="filter_traits21_53"]:before{background:red!important}
label[for="filter_traits21_47"]:before{background:#ffeb39!important}
label[for="filter_traits21_50"]:before{background:#500000!important}
label[for="filter_traits21_1698"]:before{background:#ADD8E6!important}
label[for="filter_traits21_59"]:before{background:#a200e2!important}
label[for="filter_traits21_3763"]:before{background:#30d5c8!important}
label[for="filter_traits21_4319"]:before{background:#36454f!important}
label[for="filter_traits21_587"]:before{
  background:linear-gradient(45deg,#fff 50%,#020024 50%)!important
}

/* ============ 8) Tabele / typografia ============ */
th,td{border:1px solid var(--gray-200);text-align:center;padding:6px}
.table-stroke tbody th,.table-stroke tbody td,.table-condensed th,th,td{
  border:1px solid #cfb890!important;text-align:center;align-content:center
}
.product_name__name{
  font-size:1.6rem;text-transform:uppercase;font-weight:bold;
  letter-spacing:.02em
}

/* ============ 9) CTA / Przyciski / Koszyk ============ */
button#projector_express_checkout{
  background:#df8510;border:1px solid #df8510;color:#fff;
  border-radius: var(--radius);box-shadow: var(--shadow-sm);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease
}
button#projector_express_checkout:hover{
  background:#f1a542;border-color:#f1a542;box-shadow: var(--shadow-md);transform: translateY(-1px)
}
button#projector_button_basket{
  background-color:#89f744;border-color:#89f744;border-radius: var(--radius)
}
.btn.--large.--solid{
  background: var(--brand-yellow-2);
  border:2px solid #464646;color:#000;border-radius: var(--radius)
}

/* Mini-kafel kodu rabatowego */
.kod-box{
  display:inline-block;padding:3px 8px;background: var(--gray-700);color: var(--brand-yellow);
  border-radius:6px;margin-bottom:5px;font-size:1.2rem;cursor:pointer;transition: background .2s ease,color .2s ease
}
.kod-box:hover{background:#000;color:#fff4db}

/* Mikroprzyciski (pokaż/ukryj/zatwierdź) */
span.--show,span.--hide,span.--submit,button.--submit.btn.py-0.pl-0.pr-3{
  padding:4px 6px!important;font-weight:700;border-radius:6px
}
span.--show{background: var(--brand-yellow)}
span.--hide{background:#ffc970}
span.--submit,button.--submit.btn.py-0.pl-0.pr-3{background:#aae759}

/* ============ 10) Statusy / ceny / informacje ============ */
#___ratingbadge_0,
#projector_sizes_cont > div > div > ul > li > a > span.count,
.projector_prices__info,
.projector_info__item.--stocks.projector_stocks,
.projector_status__info_amount,
.stock_info_hours,
.projector_prices__unit_converted_price,
div#rabateCode{display:none!important}
.projector_details .projector_status.--status-hide strong{font-weight:700;color:green}
.summary_delivery_time__time{color:#05bd05}
.summary_delivery_time{font-size:150%}
#projector_price_value{font-size:2.6rem}
#projector_price_srp{font-size:large;font-weight:600;opacity:.9}

/* Wyróżnienia linków */
a.projector_chart__link{
  color:#000;text-decoration:none;padding:4px 8px;border:2px solid #000;
  background: var(--brand-yellow);transition:.2s;background-clip: padding-box;border-radius: 10px
}
a.projector_chart__link:hover{transform: translateY(-1px)}

/* ============ 11) Popupy / Tooltipy / Size-popup ============ */
.popup{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  height:400px;width:300px;z-index:9999;line-height:1;cursor:pointer;
  box-shadow:0 0 7px #0005;border-radius: var(--radius);background:#fff
}
.close-btn{position:absolute;top:0;right:5px;font-size:2rem;height:30px;color:#fff;cursor:pointer}
.tooltip{
  display:none;position:absolute;background:#daffb0;padding:10px;border-radius:8px;
  box-shadow:0 0 10px #d5f8ffb3;font-size:1.4rem;color:#000;cursor:pointer
}
.tooltip:after{border-color:transparent transparent #daffb0 transparent}

/* Size Popup */
#size-popup{
  display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:#fff;padding:20px;border:2px solid #ffe566;border-radius:10px;max-width:600px;width:95%;
  max-height:80vh;overflow-y:auto;z-index:9999
}
.size-close-btn{position:absolute;top:10px;right:10px;cursor:pointer;color:#777}
.size-tile{
  width:50px;height:50px;border:1px solid #d9d9d9;display:inline-block;margin:5px;text-align:center;line-height:50px;cursor:pointer;border-radius:8px
}
.size-tile.selected{background: var(--brand-yellow);font-weight:700}
#size-btn-open{
  margin:7px auto;background: var(--brand-yellow-2);color:#000;border-radius:7px;width:98%
}
#size-add{margin:7px auto;background:#aae759;color:#000;border-radius:7px}
#size-tab{margin:25px 15px}

/* ============ 12) Scrollbar (zachowane, lekko wygładzone) ============ */
*{scrollbar-width:auto;scrollbar-color:#888 #f9f8f2}
*::-webkit-scrollbar{width:14px} /* nieco węższy */
*::-webkit-scrollbar-track{background:#f9f8f2}
*::-webkit-scrollbar-thumb{background:#888;border-radius:10px;border:3px solid #f9f8f2}

/* ============ 13) Dodatki / porządki ============ */
.l_welcome__element.--logout{
  position:absolute!important;right:5px!important;top:25px!important;border:2px solid;font-weight:bold;border-radius:10px;padding:6px 10px;background:#fff
}
.oscop_rebate_code{background:#e6ff00}
.dictionary__more{color:#77b500}
#menu_categories2{display:none}
span.price.--convert{display:none;}
#client_new_social, .price_sellby{display:none!important}
#freeShipping{background:#ffdf55;border:none}
header .navbar-collapse {border-bottom: none;
a.nav-link[title="Wielopaki"]{color: var(--accent-green);font-weight:900;text-decoration:underline}
li.links_footer_3_item{max-width:100px}
@media (max-width:757px){aside[class*='col-']{max-width:86vw}}