/* Moduły custom (header itd.) — @import musi poprzedzać wszystkie reguły stylów (poza @charset),
   inaczej przeglądarka go ignoruje. Tokeny z :root rozwiązują się niezależnie od kolejności. */
@import "custom/index.css";

/* --- Fustat (self-host, wariant zmienny 200–800, subsety latin + latin-ext) --- */
@font-face {
  font-family: 'Fustat';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/fustat/fustat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fustat';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/fustat/fustat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Design tokens (:root) live in custom/tokens.css, imported via custom/index.css. */

/* Globalna typografia — Fustat przez zmienną (nadpisuje Manrope z classica) */
body, input, select, textarea, button {
  font-family: var(--font-family), sans-serif;
}

/* =========================================================================
   Nadpisanie domyślnych klas motywu Classic (Bootstrap) — DRY
   Domyślne przyciski w całym sklepie dostosowują się do Figma
   Figma określa tylko dwa typy głównych przycisków: Primary (Czerwony) i Secondary (Różowy)
   ========================================================================= */
.btn {
  font-family: var(--font-family), sans-serif !important;
  font-weight: var(--btn-font-weight) !important;
  border-radius: var(--btn-radius) !important;
  text-transform: uppercase !important;
  padding: var(--btn-padding) !important;
  font-size: var(--btn-font-size) !important;
  border: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
  box-shadow: none !important;
  outline: none !important;
}

.btn-sm,
.btn.btn-sm {
  padding: var(--btn-padding-sm) !important;
  font-size: var(--btn-font-size-sm) !important;
}

/* Przyciski główne (Primary) - Z Figmy: Czerwone, biały tekst */
.btn-primary,
.btn-outline-primary {
  background-color: var(--color-red) !important;
  color: var(--color-white) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--color-red-dark) !important;
  color: var(--color-white) !important;
}

/* Przyciski drugorzędne (Secondary) - Z Figmy: Różowe, czarny tekst */
.btn-secondary,
.btn-tertiary,
.btn-outline-secondary {
  background-color: var(--color-pink) !important;
  color: var(--color-black) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.btn-tertiary:hover,
.btn-tertiary:focus,
.btn-tertiary:active,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  background-color: var(--color-pink-dark) !important;
  color: var(--color-black) !important;
}

/* Domyślne formularze (inputy, selecty) - DRY z Figmy */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select,
.form-control,
.custom-select {
  font-family: var(--font-family), sans-serif;
  background-color: var(--color-white) !important;
  border: 1px solid var(--element-border-color) !important;
  border-radius: var(--image-radius) !important;
  color: var(--color-black) !important;
  padding: 10px 15px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none !important;
  box-shadow: none !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus,
.form-control:focus,
.custom-select:focus {
  border-color: var(--color-red) !important;
  background-color: var(--color-white) !important;
  outline: none !important;
  box-shadow: none !important;
}


/* Nieaktywny (szary, nieklikalny) — działa dla :disabled, [disabled] i .is-disabled */
.btn:disabled,
.btn[disabled],
.btn.is-disabled {
  background-color: var(--color-gray-light) !important;
  color: var(--color-white) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* =========================================================================
   GLOBAL CONTAINERS & BODY
   ========================================================================= */
/* Rozwiązanie problemu bocznego scrolla bez psucia Chrome DevTools:
   Zamiast dawać overflow-x: hidden na html/body, dajemy je na kontener <main>, 
   który opina cały nagłówek, treść i stopkę. */
main {
  overflow-x: clip;
  width: 100%;
  position: relative;
}


@media (min-width: 992px) {
  .container { width: 100% !important; max-width: 1440px !important; }
}



/* =========================================================================
   Figmy wdrożenie - Hovery, Strzałki, Sociale, Swatche, Linki (DRY)
   ========================================================================= */

/* 1. Domyślne nieaktywne przyciski (disabled) w motywie */
.btn:disabled,
.btn[disabled],
.btn.disabled,
.btn.is-disabled {
  background-color: var(--color-gray-light) !important;
  border-color: var(--color-gray-light) !important;
  color: var(--color-white) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* 2. Strzałki nawigacyjne karuzeli (slidery, galeria produktu) - Okrągłe z Figmy */
.carousel-control-prev,
.carousel-control-next,
.slick-prev,
.slick-next,
.owl-prev,
.owl-next,
.scroll-box-arrows .left,
.scroll-box-arrows .right {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-pink) !important;
  border-radius: 50% !important;
  color: var(--color-red) !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease !important;
  opacity: 1 !important;
  text-decoration: none !important;
  z-index: 10 !important;
}

/* Stan hover dla okrągłych strzałek */
.carousel-control-prev:hover,
.carousel-control-next:hover,
.slick-prev:hover,
.slick-next:hover,
.owl-prev:hover,
.owl-next:hover,
.scroll-box-arrows .left:hover,
.scroll-box-arrows .right:hover,
.carousel-control-prev:focus,
.carousel-control-next:focus {
  border-color: var(--color-red) !important;
  color: var(--color-red) !important;
  background-color: var(--color-white) !important;
  outline: none !important;
}

/* Wygaszenie domyślnych styli ikon wewnątrz strzałek w Bootstrapie */
.carousel-control-prev .icon-prev::before,
.carousel-control-next .icon-next::before,
.carousel-control-prev i,
.carousel-control-next i {
  color: var(--color-red) !important;
  font-size: 20px !important;
}

/* 3. Ikony społecznościowe (Social Icons) - czerwone koło, hover czarne */
.block-social li,
.block-social ul li,
.social-sharing li {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 0.5rem !important;
}

.block-social li img,
.block-social ul li img,
.social-sharing li img {
  width: 40px !important;
  height: 40px !important;
  transition: filter 0.15s ease !important;
}

.block-social li a,
.block-social ul li a,
.social-sharing li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 0 !important;
  color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
}

/* Ustawienie koloru wektorów (currentColor odziedziczy to, a nie text-color a) */
.block-social li a svg,
.block-social ul li a svg,
.social-sharing li a svg {
  color: var(--color-red) !important;
  transition: color 0.15s ease !important;
}

/* Social Icon Hover */
.block-social li:hover svg,
.block-social ul li:hover svg,
.social-sharing li:hover svg {
  color: var(--color-black) !important;
}

.block-social li:hover img,
.block-social ul li:hover img,
.social-sharing li:hover img {
  /* Dla innych obrazków pozostaje filtr jako fallback */
  filter: brightness(0) !important;
}

/* Wygaszenie starych ikon FontAwesome z motywu Classic na hoverze i w tle */
.block-social li::before,
.block-social li::after,
.block-social li a::before,
.block-social li a::after,
.social-sharing li::before,
.social-sharing li::after,
.social-sharing li a::before,
.social-sharing li a::after {
  content: none !important;
  display: none !important;
}

.block-social li:hover,
/* Ekstremalne wygaszenie wszelkich ikonek z motywu (np. .facebook, .youtube) */
.block-social li.facebook,
.block-social li.youtube,
.block-social li.instagram,
.block-social li.facebook a,
.block-social li.youtube a,
.block-social li.instagram a,
.block-social li.facebook:hover,
.block-social li.youtube:hover,
.block-social li.instagram:hover,
.block-social li.facebook a:hover,
.block-social li.youtube a:hover,
.block-social li.instagram a:hover {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

.block-social li.facebook::before, .block-social li.facebook::after,
.block-social li.youtube::before, .block-social li.youtube::after,
.block-social li.instagram::before, .block-social li.instagram::after,
.block-social li.facebook a::before, .block-social li.facebook a::after,
.block-social li.youtube a::before, .block-social li.youtube a::after,
.block-social li.instagram a::before, .block-social li.instagram a::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.block-social li a:hover,
.block-social ul li a:hover,
.social-sharing li a:hover {
  text-decoration: none !important;
}

/* 4. Hovery napisów - Linki wstecz / powrotu (np. Powrót do oferty, Wstecz) */
a.label,
.page-footer-link,
.continue-shopping,
.back-to-shop,
.back-to-product {
  color: var(--color-red) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

a.label:hover,
.page-footer-link:hover,
.continue-shopping:hover,
.back-to-shop:hover,
.back-to-product:hover {
  color: var(--color-black) !important;
  text-decoration: none !important;
}

/* 5. Linki nawigacyjne głównego menu - hover czerwony */
.cbp-hrmenu a:hover,
.cbp-hrmenu .cbp-active > a,
.iqitmegamenu-wrapper a:hover {
  color: var(--color-red) !important;
}
.cbp-hrmenu .cbp-submenu-aindicator {
  display: inline-block !important;
}

/* 6. Nazwy produktów na listach/kafelkach - hover czerwony */
.product-title a:hover,
.product-name a:hover,
.product-line-info a:hover,
.menuCategory__title a:hover,
.offer__title a:hover,
.offer__inner a:hover .offer__title,
.offer__inner:hover .offer__title {
  color: var(--color-red) !important;
}

/* 7. Przycisk Usuń w koszyku - hover czerwony + podkreślenie */
.remove-from-cart {
  color: var(--color-gray) !important;
  transition: color 0.15s ease, text-decoration 0.15s ease !important;
}

.remove-from-cart:hover {
  color: var(--color-red) !important;
  text-decoration: underline !important;
}

/* 8. Aktywne próbki kolorów (Wybrane swatche) - podwójne obramowanie (białe wewnątrz, czarne zewnątrz) */
.product-variants .input-color:checked + .color,
.product-variants .input-color:checked + span,
.product-variants .color.selected,
.product-variants .color.active {
  outline: 2px solid var(--color-black) !important;
  outline-offset: 2px !important;
  border: 2px solid var(--color-white) !important;
  box-shadow: none !important;
}
/* =========================================================================
   Nadpisanie hoverów dla podkategorii (likwidacja niebieskiego koloru i obramowań)
   ========================================================================= */
.subcategories-list li:hover .subcategory-name,
.subcategories-list li:hover a.subcategory-name,
.subcategories-list a.subcategory-name:hover,
.subcategories-list li:hover {
  color: var(--color-red) !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.subcategories-list .subcategory-name {
  color: var(--color-black);
  transition: color 0.15s ease;
}
.subcategories-list .subcategory-name:hover {
  color: var(--color-red) !important;
}

/* Gruba niebieska ramka dookoła obrazka podkategorii */
.subcategory-image a:hover,
.subcategories-list li:hover .subcategory-image a,
.subcategories-list li:hover .subcategory-image img,
.subcategory-image img:hover {
  border-color: var(--color-red) !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* =========================================================================
   Wygaszenie jakichkolwiek resztek niebieskich ikon (np. plusy w filtrach/menu)
   ========================================================================= */
.collapse-icons .add,
.collapse-icons .remove,
.navbar-toggler .add,
.navbar-toggler .remove,
.material-icons.add,
.material-icons.remove,
[data-toggle="collapse"] .material-icons {
  color: var(--color-black) !important;
}
.collapse-icons:hover .add,
.collapse-icons:hover .remove,
.navbar-toggler:hover .add,
.navbar-toggler:hover .remove,
[data-toggle="collapse"]:hover .material-icons {
  color: var(--color-red) !important;
}

/* =========================================================================
   Nadpisanie domyślnego niebieskiego koloru z motywu Classic
   ========================================================================= */
.dropdown-menu {
  background-color: var(--color-white) !important;
  border: 1px solid var(--element-border-color) !important;
  border-radius: var(--image-radius) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
  padding: 0.5rem 0 !important;
  margin: 0 !important;
}

.dropdown-menu .select-list,
.dropdown-item {
  color: var(--color-black) !important;
  font-family: var(--font-family), sans-serif !important;
  font-size: 0.9rem !important;
  padding: 8px 20px !important;
  background: transparent !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
  display: block;
  text-decoration: none !important;
}

.dropdown-menu .select-list:hover,
.dropdown-menu .select-list:focus,
.dropdown-menu .select-list.current,
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
  color: var(--color-red) !important;
  background-color: var(--color-pink) !important;
  text-decoration: none !important;
}

/* =========================================================================
/* Globalne linki i akcenty */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-black);
}

a,
p a,
.block-category a,
.text-muted a,
.page-cms #content a,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.subcategory-name {
  color: var(--color-red);
  text-decoration: none !important;
  transition: color 0.15s ease;
}

a:hover,
p a:hover,
.block-category a:hover,
.text-muted a:hover,
.page-cms #content a:hover,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
.subcategory-name:hover {
  color: var(--color-black);
}

/* Paginacja */
.page-list li.current a,
.page-list li.current a:hover {
  background-color: var(--color-red) !important;
  border-color: var(--color-red) !important;
  color: var(--color-white) !important;
}

.page-list li a {
  color: var(--color-black);
}
.page-list li a:hover {
  color: var(--color-red);
}

/* Szybki podgląd (Quick view) */
.quick-view {
  color: var(--color-black) !important;
  transition: color 0.15s ease !important;
}

.quick-view i {
  color: var(--color-black) !important;
  transition: color 0.15s ease !important;
}

.quick-view:hover,
.quick-view:hover i {
  color: var(--color-red) !important;
}

/* Link "Wszystkie produkty" */
.all-product-link {
  color: var(--color-gray) !important;
  transition: color 0.15s ease !important;
}

.all-product-link:hover {
  color: var(--color-red) !important;
}

/* =========================================================================
   Nadpisanie klas pomocniczych (Bootstrap Utilities)
   ========================================================================= */
.mb-3 {
    margin-bottom: 16px !important;
}

#wrapper {
    background: #fff !important;
}

/* Globalne marginesy dla wszystkich kontenerów jak prosiłeś */
.container, .container-fluid {
    margin-left: auto;
    margin-right: auto;
    padding-left: 34px;
    padding-right: 34px;
}


/* Breadcrumb */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb li::after {
  content: none !important;
}

.breadcrumb li:not(:first-child)::before {
  content: ">" !important;
  margin: 0 0.375rem;
  color: var(--color-black) !important;
}

.breadcrumb,
.breadcrumb a,
.breadcrumb a span,
.breadcrumb span {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-black) !important;
  text-decoration: none !important;
}


.page-cms:not(.faq-question-page):not(.faq-category-page) #content img {
    display: block !important;
    margin: 0px auto !important;
    max-width: 100%;
}

#main .page-content h6 {
    margin-bottom: 0 !important; /* Nadpisuje regułę z theme.css: margin-bottom: 1.125rem; */
}

/* Tylko poniżej 576px (max-width: 575px) */
@media (max-width: 575px) {
    .container, .container-fluid {
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}