/* --------------------------------------------------------------------
  Custom theme overrides for test.kskdruk.pl
  Revised    : 2025-06-09 (base)
  Update 1   : 2025-06-09 — menu white, buttons grey
  Update 2   : 2025-06-09 — currency/language plain text
  Update 3   : 2025-06-09 — top-bar alignment, pure white nav
  Update 4   : 2025-06-09 — 5-column grid on ≥1200 px
  Update 5   : 2025-06-09 — dropdown: grey hover, shadow, smaller font
  Update 6   : 2025-06-09 — deeper 3-D shadow, bold menu
  Font swap  : 2025-06-09 — Google Font “Lato”
  Hover fix  : 2025-06-09 — show FULL image on hover (object-fit:contain)
  Banner fix : 2025-06-09 — center hero/slider on ultra-wide screens
--------------------------------------------------------------------- */

/* 1. Typography ---------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

:root{
  --font-base : 'Lato', sans-serif;

  --color-primary : #111;
  --color-accent  : #e74c3c;
  --color-grey    : #555;
  --card-border   : #e3e3e3;

  --btn-bg        : #f5f5f5;
  --btn-bg-hover  : #e1e1e1;
  --menu-bg       : #9fb39f;
  --menu-bg-hover : #e3e3e3;
  --menu-font     : 12px;
  --html-font-size : 16px;
  --thumb-img-h  : 260px;    /* wysokość przyciętego zdjęcia (crop) */    /* maks. wysokość zdjęcia w karcie */    /* maks. wysokość zdjęcia w karcie */
}

html,body{
  font-family:var(--font-base);
  background:#F7F2EB;
font-size:var(--html-font-size);
}

/* --------------------------------------------------------------- */
/* 2. Global resets                                                */
.container,.container-xxl,.container-fluid,
#wrapper,#page,.main-wrapper{
  max-width:100%; width:100%; padding:0;
  margin-left:auto !important;
  margin-right:auto !important;
}
.row{ margin-left:-15px; margin-right:-15px; }
@media (min-width:1200px){
  #content .row,
  .product-grid .row{ justify-content:center; }
}
.container,.container-xxl,.container-fluid,
#wrapper,#page,.main-wrapper{ padding:0; }
.row{ margin:0; }

/* --------------------------------------------------------------- */
/* 3. Top bar                                                      */
.header-top,
.topbar{
  background:#9fb39f !important;  /* zmiana z #333 na oliwkowy */
  color:#fff;
  font-size:13px;
}
.header-top a,.topbar a,
.header-top span,.topbar span{ color:#fff !important; }
#form-currency .btn,
#form-language .btn{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:#ccc !important;
  padding:4px 6px !important;
  line-height:28px !important;
  font-size:var(--html-font-size) !important;
}

/* --------------------------------------------------------------- */
/* 4. Main navigation bar                                          */
header,.header,.header-bottom,
.navbar,.navbar-default,.m-navbar{
  background:#fff !important;
  border:none !important;
  box-shadow:none !important;
}
nav#m-menu,.m-menu-wrap.fullwidth,
#menu,#menu ul,.navbar-nav{
  background:var(--menu-bg) !important;
  border:none !important;
  box-shadow:none !important;
}
#menu > ul > li > a,
#m-menu > ul > li > a,
nav#m-menu > ul > li > a,
.navbar-nav > li > a{
  padding:4px 8px  !important;
  font-size:var(--menu-font);
  font-weight:600;
  transition:filter .25s ease;
  text-transform: uppercase;
  padding: 12px 28px;      /* większy padding poziomy */
  letter-spacing: 0.04em;
}
#menu > ul > li:hover > a,
#menu > ul > li.open  > a,
#menu > ul > li.active> a,
#menu > ul > li > a:hover,
#menu > ul > li > a:focus,
#m-menu > ul > li:hover > a,
#m-menu > ul > li.open  > a,
#m-menu > ul > li > a:hover,
nav#m-menu > ul > li:hover > a,
nav#m-menu > ul > li.open  > a,
.navbar-nav > li:hover > a,
.navbar-nav > li.open  > a,
.navbar-nav > li.active> a,
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus{ filter:brightness(.95); }
#menu > ul > li > a:empty,
#m-menu > ul > li > a:empty{ background:transparent !important; }


/* ---- CENTROWANIE MENU ------------------------------------------ */
#menu > ul,
nav#m-menu > ul,
.navbar-nav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  margin:0 auto;
  padding:0;
}
#menu > ul > li,
nav#m-menu > ul > li,
.navbar-nav > li{ float:none; }

/* --------------------------------------------------------------- */


/* --------------------------------------------------------------- */
/* 5. Buttons                                                      */
.btn-inverse,
.slider-caption .btn{
  color:#000 !important;
  background:var(--btn-bg) !important;
  border:1px solid #cfcfcf;
  transition:background-color .3s ease;
}
.btn-inverse:hover,
.slider-caption .btn:hover{
  background:var(--btn-bg-hover) !important;
  color:#000 !important;
}



/* --------------------------------------------------------------- */
/* 6. Product card                                                 */
/* === GLOBALNY ROZMIAR H4 W KARTACH PRODUKTÓW (bez względu na rozdzielczość) === */
#content .product-thumb .caption h4,
#content .product-thumb .caption h4 a{
  font-size:10px !important;  
  line-height:1.3;
}

.product-thumb{
  position:relative;
  margin-bottom:20px;
  border:1px solid var(--card-border);
  border-radius:8px;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.product-layout:hover,
.product-thumb:hover{
  transform:translateY(-6px);
  box-shadow:0 8px 20px rgba(0,0,0,.1);
}

/* Miniatura: pełna szerokość i lekki zoom na hover                     */
.product-thumb img,
.product-thumb .image img {
  width: 100%;
  height: 330px;
  object-fit: cover;
  transition: 0.4s ease;
}

.product-thumb:hover img,
.product-layout:hover img{
    width: 100%;
  height: 500px;
  transform:none !important;
}

/* podpis + cena */
.product-thumb .caption{
  padding:12px 8px;
  text-align:center;
}
.product-thumb .caption a{
  display:block;
  font-size:1rem;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--color-primary);
  line-height:1.3;
}
.product-thumb .price{
  margin-top:8px;
  color:var(--color-grey);
  font-size:1.25rem;
  font-weight:700;
  text-align:center;
}

/* overlay */
.thumb-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:24px;
  letter-spacing:2px;
  transition:opacity .3s ease;
}
.product-thumb:hover .thumb-overlay{ opacity:1; }

/* --------------------------------------------------------------- */
/* 6a. BANNER / SLIDESHOW – pełna szerokość od krawędzi do krawędzi ----------- */
#slideshow,
.swiper-container,
owl-carousel,
.slick-slider,
.slider-wrapper,
.home-banner {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  position: relative;
  left: 0 !important;
  right: 0 !important;
}

/* Dodane: style dla obrazów w bannerze */
#slideshow img,
.swiper-container img,
owl-carousel img,
.slick-slider img,
.slider-wrapper img,
.home-banner img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  min-width: 100vw !important;
}

/* Usuń ograniczenia szerokości na większych rozdzielczościach */
@media (min-width:1600px) {
  #slideshow,
  .swiper-container,
  owl-carousel,
  .slick-slider,
  .slider-wrapper,
  .home-banner {
    max-width: none !important;
    width: 100vw !important;
  }
}

/* --------------------------------------------------------------- */
/* 7. 5-column grid override                                       */
@media (min-width:1200px){
  #content .row,
  .product-grid .row{ display:flex; flex-wrap:wrap; }

  #content .product-layout,
  .product-grid .product-layout{
    flex:0 0 calc(20% - 16px);
    max-width:calc(20% - 16px);
    padding:0 8px;
    box-sizing:border-box;
  }
  #content .product-layout[class*="col-"],
  .product-grid .product-layout[class*="col-"]{
    width:calc(20% - 16px) !important;
  }
}

/* --------------------------------------------------------------- */


/* 7a. MOBILE 2-kolumny + mniejsze napisy + delikatny zoom */
@media (max-width:767.98px){

  /* ---- SIATKA (zostaje bez zmian) ---- */
  #content .row,
  .product-grid .row{
    display:flex;
    flex-wrap:wrap;
  }
  #content .product-layout,
  .product-grid .product-layout{
    flex:0 0 calc(50% - 12px);
    max-width:calc(50% - 12px);
    padding:0 6px;
    box-sizing:border-box;
  }
  #content .product-layout[class*="col-"],
  .product-grid .product-layout[class*="col-"]{
    width:calc(50% - 12px) !important;
  }

  /* ---- TYPOGRAFIA ---- */
  #content .product-thumb .caption h4,
  #content .product-thumb .caption h4 a{
    font-size:11px !important;
    line-height:1.25em !important;
    font-weight:600;
    margin:8px 0 4px !important;
    white-space:normal !important;
    text-transform:none !important;
  }
  #content .product-thumb .caption .price{
    font-size:13px !important;
    margin:0 !important;
  }

  /* ---- OBRAZEK ---- */
  /* Zero sztucznego min-height – bierzemy realną wysokość */
  #content .product-thumb .image{
    min-height:auto !important;
  }
  /* Widoczny obrazek: kwadrat 140 px, lekki zoom przy hoverze */
  #content .product-thumb .image img{
    width:100%;
    height:140px;
    object-fit:cover;
    transition:transform .35s ease;
  }

  /* powiększenie tylko tam, gdzie jest kursor (telefony i tak „tapują”) */
  @media (hover:hover){
    #content .product-thumb:hover .image img{
      transform:scale(1.05);
    }
  }

  /* tylko w górnym pasku (#top) i prawej kolumnie ikon */
  #top .hidden-xs,
  header .hidden-xs{
    display:inline-block !important;   /* zamiast none */
    margin-left:4px;                   /* drobny odstęp od ikonki */
  }

} /* ← KONIEC media-query */

/* --------------------------------------------------------------- */

/* 8. Promo bar                                                    */
.promo-bar{
  background:#000;
  color:#fff;
  padding:6px 10px;
  font-size:13px;
  text-align:center;
  letter-spacing:.05em;
}

/* --------------------------------------------------------------- */
/* 9. Fallback .image-wrap                                         */
.image-wrap{ position:relative; display:block; }
.image-wrap img{
  display:block;
  width:100%;
  height:auto;
  transition:opacity .35s ease;
  transform:none !important;
  filter:none !important;
}
.image-wrap .img-hover{
  position:absolute;
  inset:0;
  opacity:0;
}
.image-wrap:hover .img-hover{ opacity:1; }
.image-wrap:hover .img-primary{ opacity:0; }

/* Kolorowanie pozycji menu SZKOLNE i URODZINY na czerwono */
nav#m-menu ul li a[href*="tla-szkolne"],
#menu ul li a[href*="tla-szkolne"],
.navbar-nav li a[href*="tla-szkolne"],
nav#m-menu ul li a[href*="tematyczne"],
#menu ul li a[href*="tematyczne"],
.navbar-nav li a[href*="tematyczne"] {
  color: var(--color-accent) !important;
}

/* Nadpisanie koloru górnego paska */
#top {
    background-color: var(--menu-bg) !important;
    border-bottom: 1px solid var(--menu-bg) !important;
    padding: 4px 0px 3px 0;
    margin: 0;
    min-height: 40px;
}

/* Kolor napisów w górnym pasku */
#top, 
#top a,
#top span,
#top .btn,
#form-currency .btn,
#form-language .btn {
    color: var(--color-primary) !important; /* czarny kolor z zmiennej */
}

/* Style dla zdjęć produktu - usunięcie białych marginesów */
@media (min-width: 992px) {
    ul.thumbnails > li:not(.image-additional) .thumbnail {
        width: 900px !important;
    }
}

ul.thumbnails > li:not(.image-additional) .thumbnail img {
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    display: block !important;
}
ul.breadcrumb a {
  color: #000 !important;
}
/* Wyśrodkowanie logo */
#logo              { text-align: left !important; }   /* ustawia wyrównanie na lewo elementów wewnątrz div-a */
#logo img          { margin: 0; }       /* sprawia, że sam obrazek zajmuje „lewy” */

.open > .dropdown-menu,
.dropdown-menu {
  background-color:var(--menu-bg-hover) !important; /* nadpisuje #303030 */
}

/* ===================================================================
   CUSTOM.CSS – header dropdown overrides
   Updated: 2025‑06‑12 – olive hover, grey menu background, open on click
   =================================================================== */

/* 1. CSS variables ------------------------------------------------ */
:root {
  --menu-bg:        #9fb39f; /* olive for HOVER row */
  --menu-bg-hover:  #e3e3e3; /* grey background for dropdown box */
}

/* 2. Right‑column links (Moje konto / koszyk / zamów) ------------- */
.col-sm-3 ul.list-unstyled > li > a,
.col-sm-3 .dropdown-toggle {
  color:#000 !important;
}

/* 3. Dropdown box itself (po kliknięciu) -------------------------- */
.dropdown-menu {
  background: var(--menu-bg-hover) !important; /* light grey */
}

/* 4. Domyślny wygląd pozycji w menu ------------------------------ */
.dropdown-menu > li > a,
.dropdown-menu > li > button,
.dropdown-menu > li > .btn,
.dropdown-menu > li > .btn-link {
  color:#000 !important;
  background:transparent !important;
}

/* 5. OLIVE HOVER (wszystkie warianty) ----------------------------- */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:active,
.dropdown-menu > li.active > a,
.dropdown-menu > li > button:hover,
.dropdown-menu > li > button:focus,
.dropdown-menu > li > button:active,
.dropdown-menu > li.active > button,
.dropdown-menu > li > .btn-link:hover,
.dropdown-menu > li > .btn-link:focus,
.dropdown-menu > li > .btn-link:active,
.dropdown-menu .currency-select:hover,
.dropdown-menu .currency-select:focus,
.dropdown-menu .currency-select:active {
  background: var(--menu-bg) !important;
  color:#fff !important;
}
/* Dodatkowe wzmocnienie dla BUTTONÓW waluty/języka (li:hover) */
.dropdown-menu > li:hover,
.dropdown-menu > li:focus,
.dropdown-menu > li:active {
  background: var(--menu-bg) !important;
}
.dropdown-menu > li:hover > button,
.dropdown-menu > li:focus > button,
.dropdown-menu > li:active > button {
  background: transparent !important; /* button sam jest przezroczysty */
  color:#fff !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:active,
.dropdown-menu > li.active > a,
.dropdown-menu > li > button:hover,
.dropdown-menu > li > button:focus,
.dropdown-menu > li > button:active,
.dropdown-menu > li.active > button,
.dropdown-menu > li > .btn-link:hover,
.dropdown-menu > li > .btn-link:focus,
.dropdown-menu > li > .btn-link:active,
.dropdown-menu .currency-select:hover,
.dropdown-menu .currency-select:focus,
.dropdown-menu .currency-select:active {
  background: var(--menu-bg) !important;
  color:#fff !important;
}

/* 6. Additional specificity for Moje konto (blue override) ------- */
.col-sm-3 .dropdown-menu > li > a:hover,
.col-sm-3 .dropdown-menu > li > button:hover { background:var(--menu-bg)!important; color:#fff!important; }

/* 7. Left column (telefon / kontakt) ----------------------------- */
.col-sm-4 a { color:#000 !important; }

/* =========================================================
   Column width overrides – 13 VI 2025
   Ustawienia 20 % / 80 % od ≥768 px - chowa menu po lewej stronie + oliwkowy footer
   ========================================================= */
@media (min-width: 768px) {
  .col-sm-3 {        /* lewa kolumna */
    width: 15% !important;
  }
  .col-sm-9 {        /* prawa kolumna */
    width: 85% !important;
  }
}
footer, #footer, .footer{
  background:var(--menu-bg) !important;
}
/* --- UKRYJ WYŁĄCZNIE #column-left (desktop) -------------------- */
@media (min-width:768px){
  /* chowamy tylko lewy sidebar */
  #column-left{display:none !important;}

  /* jeśli #content ma siatkową klasę  col-sm-9/col-md-9/col-lg-9
     — rozszerzamy ją na pełną szerokość */
  #content.col-sm-9,
  #content.col-md-9,
  #content.col-lg-9{
    width:100% !important;
    float:none !important;
  }
}

/* ==================================================================
   KATEGORIE – karty (zgodne z produktami)
   ================================================================== */
.karty-galeria {
  /* Grid inspirowany .row + .col‑* Bootstrapa */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

  /* 15 px gutter po bokach (jak karty produktów) */
  padding: 20px 45px;     
  margin: 0;          /* kompensacja paddingu rodzica .row */

  gap: 15px;                /* 2 × 12 px między sąsiadami => optycznie ~produkty */
  list-style: none;
}

.karty-galeria .karta {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  text-align: center;
  overflow: hidden;
  transition: transform .15s ease;
}
.karty-galeria .karta:hover { transform: translateY(-4px); }

/* miniatura – całe zdjęcie na białym tle */
.karty-galeria .karta img {
  display: block;
  width: 100%;
  height: 260px;          /* ~produkty, pomniejszone o padding */
  padding: 10px 0px 0px 0px;          /* białe obramowanie 5 px dookoła */
  box-sizing: border-box; /* padding wlicza się w wymiary */
  object-fit: contain;    /* całe zdjęcie widoczne */
  background: #fff;       /* białe tło pod paskami */
}

/* nagłówek */
.karty-galeria .karta h3 {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0.6rem 0 0.8rem;   /* ciaśniejsze odstępy */
  padding: 0 0.6rem;
  color: #443b32;
}

/* od 1200 px – 5 równych kolumn */
@media (min-width: 1200px) {
  .karty-galeria {
    grid-template-columns: repeat(5, 1fr);
  }
}
/* --------------------------------------------------------------------
   Update 7 : 2025-07-04 — „Formularz kontaktowy” jako przycisk
   -------------------------------------------------------------------- */
@media (min-width:768px){
  /* 1. Styl przycisku */
  #top .list-inline > li > a[href*="kontakt"],
  #top .list-inline > li > a[href*="contact"]{
    display:inline-block;
    padding:6px 18px;
    background:var(--btn-bg);
    border:1px solid #cfcfcf;
    border-radius:4px;
    font-weight:600;
    text-transform:uppercase;
    line-height:24px;          /* identyczna wysokość jak w koszyku */
    position:relative;
    top:4px;                   /* -4 → wyżej, +4 → niżej – dostosuj */
    margin-left:12px;          /* niewielki odstęp od numeru telefonu */
    color:#000 !important;     /* zapewnia kontrast */
    transition:background .3s ease,color .3s ease;
  }
  /* 2. Hover */
  #top .list-inline > li > a[href*="kontakt"]:hover,
  #top .list-inline > li > a[href*="contact"]:hover{
    background:var(--btn-bg-hover);
    color:#000 !important;
  }

  /* 3. Pionowe wyrównanie całej lewej kolumny (tel + przycisk) */
  #top .col-sm-4{
    display:flex;
    align-items:center;   /* środek w pionie */
    gap:8px;              /* mikro-odstęp między ikoną, tel. i przyciskiem */
  }
}