/* ========== MOBILE IMAGE FIXES ========== */
/* Naprawa zbyt dużych obrazów produktów na urządzeniach mobilnych */
@media (max-width: 800px) {
  /* Główny obraz produktu */
  .product-cover img,
  #product .product-cover img,
  .product-cover .js-qv-product-cover img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  
  /* Kontener obrazów produktu */
  .images-container,
  #product .images-container,
  .product-images-container {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Mask dla obrazów */
  #main .images-container .js-qv-mask,
  #main .images-container .js-qv-mask.scroll,
  .quickview .images-container .js-qv-mask {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Obrazy w karuzeli produktów */
  .product-images .owl-item img,
  .images-container .product-images .owl-item img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  
  /* Obrazy w miniaturkach */
  .thumb-container img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* Dodatkowe style dla bardzo małych urządzeń (400px) */
@media (max-width: 480px) {
  .product-cover img,
  #product .product-cover img,
  .product-cover .js-qv-product-cover img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
  
  .images-container,
  #product .images-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 10px !important;
  }
  
  #main .images-container .js-qv-mask,
  #main .images-container .js-qv-mask.scroll {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto 20px auto !important;
  }
  
  .product-images .owl-item,
  .images-container .product-images .owl-item {
    padding: 0 2px !important;
  }
  
  .product-images .owl-item img,
  .images-container .product-images .owl-item img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  
  /* Kontener produktu - upewnij się, że obraz nie wychodzi poza kontener */
  #product #content .product-cover,
  #product .product-cover {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  
  /* Obrazy w liście produktów */
  #js-product-list .product_content .js-product-miniature .img_block img,
  .item-product .product-miniature img,
  .product-miniature img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* ========== ELEMENTOR PRODUCT IMAGES FIX ========== */
/* Naprawa obrazów produktów Elementor na urządzeniach mobilnych */
@media (max-width: 800px) {
  /* Kontener produktu Elementor */
  .elementor-product-miniature {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Kontener obrazu Elementor */
  .elementor-image,
  .elementor-product-miniature .elementor-image {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  
  /* Obrazy w picture elementach Elementor */
  .elementor-cover-image,
  .elementor-second-image,
  picture.elementor-cover-image,
  picture.elementor-second-image {
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
  }
  
  /* Wszystkie obrazy w Elementor */
  .elementor-cover-image img,
  .elementor-second-image img,
  picture.elementor-cover-image img,
  picture.elementor-second-image img,
  .elementor-image img,
  .elementor-product-miniature img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
  
  /* Kontener grid produktów Elementor */
  .ce-product-grid,
  .elementor-widget-container .ce-product-grid {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Dodatkowe style dla bardzo małych urządzeń (400px) - Elementor */
@media (max-width: 480px) {
  .elementor-product-miniature {
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }
  
  .elementor-image,
  .elementor-product-miniature .elementor-image {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  .elementor-cover-image,
  .elementor-second-image,
  picture.elementor-cover-image,
  picture.elementor-second-image {
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
    position: relative !important;
  }
  
  .elementor-cover-image img,
  .elementor-second-image img,
  picture.elementor-cover-image img,
  picture.elementor-second-image img,
  .elementor-image img,
  .elementor-product-miniature img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }
  
  /* Upewnij się, że kontener grid nie powoduje overflow */
  .ce-product-grid,
  .elementor-widget-container .ce-product-grid {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }
  
  /* Link produktu */
  .elementor-product-link {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

.ce-product-hover-image,
.ce-product-secondary-image,
.ce-product-image-hover {
    display: none !important;
}

/* ========== BIAŁE TŁO DLA WSZYSTKICH STRON ========== */
/* Ustawienie białego tła dla całej strony i wszystkich elementów */
body,
html,
#wrapper,
#main,
#content,
#left-column,
#right-column,
#content-wrapper,
.container,
.container-fluid,
section,
.section,
.page-content,
.content-wrapper {
    background-color: #ffffff !important; /* Białe tło */
    background: #ffffff !important;
}

/* Białe tło dla głównych kontenerów treści */
#wrapper,
#main {
    background-color: #ffffff !important;
}

/* Białe tło dla sekcji treści */
#content,
.page-content {
    background-color: #ffffff !important;
}

/* Białe tło dla kolumn */
#left-column,
#right-column,
#content-wrapper {
    background-color: #ffffff !important;
}

/* ============================================

/* ============================================

/* ============================================

/* ============================================
   KOSMETYKA v4: Montserrat + czarne + compact qty
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

html, body,
body *:not(i):not(.material-icons):not(.fa):not([class*="fa-"]):not([class*="elementor-icon"]):not([class*="ceicons"]) {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
}

/* === Ceny i tytuly w koszyku — czarne === */
.product-price, .current-price, .price, .regular-price,
.product-line-info.product-price, .product-line-info .price,
.cart-summary-line .value, .cart-total .value,
.product-line-info a.label, .product-line-info a {
    color: #000 !important;
}

/* === Czarny button (PRZEJDŹ DO REALIZACJI itd.) === */
.btn-primary,
button.btn-primary,
a.btn-primary,
#main .btn-primary,
.cart-detailed-actions .btn-primary {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 500 !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #333 !important;
    color: #fff !important;
}

/* === Bootstrap TouchSpin — SMALL & COMPACT === */
.bootstrap-touchspin.input-group,
.bootstrap-touchspin {
    display: inline-flex !important;
    align-items: flex-start !important;  /* zapobiega stretch */
    height: 30px !important;
    width: auto !important;
    max-width: 64px !important;
    flex-wrap: nowrap !important;
    line-height: 1 !important;
}

/* Input z liczbą */
.bootstrap-touchspin input.js-cart-line-product-quantity,
.bootstrap-touchspin input.form-control,
.bootstrap-touchspin .form-control,
input.js-cart-line-product-quantity {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    text-align: center !important;
    border: 1px solid #000 !important;
    padding: 0 2px !important;
    font-size: 13px !important;
    background: #fff !important;
    flex: 0 0 40px !important;
    box-sizing: border-box !important;
    line-height: 28px !important;
}

/* Kontener z 2 buttonami pionowo */
.bootstrap-touchspin .input-group-btn-vertical {
    display: flex !important;
    flex-direction: column !important;
    width: 20px !important;
    flex: 0 0 20px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    margin-left: -1px !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}

/* Każdy button +/- (force small) */
.bootstrap-touchspin .input-group-btn-vertical .btn,
.bootstrap-touchspin .input-group-btn-vertical .btn-touchspin,
.bootstrap-touchspin .bootstrap-touchspin-up,
.bootstrap-touchspin .bootstrap-touchspin-down {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #000 !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
    flex: 0 0 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    font-size: 7px !important;
    cursor: pointer !important;
}

.bootstrap-touchspin .input-group-btn-vertical .btn:hover {
    background-color: #444 !important;
}

/* Ukryj material-icons (broken) — wstaw Unicode arrows */
.bootstrap-touchspin .touchspin-up,
.bootstrap-touchspin .touchspin-down,
.bootstrap-touchspin .bootstrap-touchspin-up i,
.bootstrap-touchspin .bootstrap-touchspin-down i,
.bootstrap-touchspin button i,
.bootstrap-touchspin .btn-touchspin i {
    display: none !important;
}

.bootstrap-touchspin .bootstrap-touchspin-up::after {
    content: '▲' !important;
    color: #fff !important;
    font-size: 7px !important;
    line-height: 1 !important;
    font-family: Arial, sans-serif !important;
}

.bootstrap-touchspin .bootstrap-touchspin-down::after {
    content: '▼' !important;
    color: #fff !important;
    font-size: 7px !important;
    line-height: 1 !important;
    font-family: Arial, sans-serif !important;
}

/* Ukryj prefix/postfix span (puste) */
.bootstrap-touchspin .input-group-addon.bootstrap-touchspin-prefix,
.bootstrap-touchspin .input-group-addon.bootstrap-touchspin-postfix {
    display: none !important;
}


/* ============================================================
 * POPRAWKI 2026-05-21 (Wolfly home page + footer)
 * ============================================================ */

/* === 1. PASEK TOP (nad logo) — bordowy, szerszy, klikalny === */
.elementor-17170201 .elementor-element.elementor-element-c9ff09b .elementor-widget-container {
    background-image: none !important;
    background-color: #5a0a1f !important; /* bordowy */
    padding: 14px 20px !important;
    cursor: pointer !important;
    transition: background-color .2s ease;
}
.elementor-17170201 .elementor-element.elementor-element-c9ff09b .elementor-widget-container:hover {
    background-color: #7a0d2a !important;
}
.elementor-17170201 .elementor-element.elementor-element-c9ff09b .elementor-heading-title {
    font-size: 15px !important;
    color: #fff !important;
    letter-spacing: 0.5px;
}

/* === 2. H1 "Slow fashion, lokalna produkcja, ręczne wykonanie" — wycentrowane === */
.elementor-widget-text-editor .elementor-widget-container h1,
.elementor-widget-text-editor h1.elementor-heading-title {
    text-align: center !important;
}

/* === 3. Zdjęcia kategorii (jednoczęściowe, dwuczęściowe, limitowane) — bez zaciemnienia === */
.elementor-widget-image img,
.elementor-widget-image .elementor-image img,
.elementor-element-populated .elementor-widget-image img {
    filter: none !important;
    opacity: 1 !important;
    -webkit-filter: none !important;
}
.elementor-widget-image .elementor-image::before,
.elementor-widget-image .elementor-image::after {
    background: none !important;
    background-color: transparent !important;
}

/* === 4. Slider na stronie głównej — responsywny dla tablet/mobile === */
@media (max-width: 1024px) {
    .elementor-widget-image-slider .swiper-slide,
    .elementor-widget-image-slider .swiper-container,
    .elementor-widget-image-slider .elementor-image-slider-wrapper {
        max-height: 70vh !important;
        height: auto !important;
    }
    .elementor-widget-image-slider .swiper-slide img,
    .elementor-widget-image-slider img {
        width: 100% !important;
        height: auto !important;
        max-height: 70vh !important;
        object-fit: cover !important;
    }
}
@media (max-width: 767px) {
    .elementor-widget-image-slider .swiper-slide,
    .elementor-widget-image-slider .swiper-container,
    .elementor-widget-image-slider .elementor-image-slider-wrapper {
        max-height: 60vh !important;
    }
    .elementor-widget-image-slider .swiper-slide img,
    .elementor-widget-image-slider img {
        max-height: 60vh !important;
        object-fit: cover !important;
    }
}

/* === 5. Modal newsletter (otwierany przez pasek na górze) === */
.wolfly-newsletter-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
}
.wolfly-newsletter-modal.open {
    display: block;
}
.wolfly-newsletter-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
}
.wolfly-newsletter-modal__dialog {
    position: relative;
    max-width: 480px;
    margin: 10vh auto;
    background: #fff;
    padding: 32px 28px 28px;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.wolfly-newsletter-modal__close {
    position: absolute;
    top: 10px;
    right: 14px;
    border: 0;
    background: transparent;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    color: #777;
}
.wolfly-newsletter-modal__close:hover { color: #000; }
.wolfly-newsletter-modal__title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: #5a0a1f;
    text-align: center;
}
.wolfly-newsletter-modal__desc {
    margin: 0 0 18px;
    font-size: 14px;
    color: #555;
    text-align: center;
    line-height: 1.5;
}
.wolfly-newsletter-modal__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wolfly-newsletter-modal__form input[type="email"] {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 0;
    box-sizing: border-box;
}
.wolfly-newsletter-modal__form input[type="email"]:focus {
    border-color: #5a0a1f;
    outline: 0;
}
.wolfly-newsletter-modal__form button[type="submit"] {
    padding: 14px 20px;
    background: #5a0a1f;
    color: #fff;
    border: 0;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .15s;
}
.wolfly-newsletter-modal__form button[type="submit"]:hover {
    background: #7a0d2a;
}
.wolfly-newsletter-modal__feedback {
    min-height: 1.2em;
    margin-top: 8px;
    font-size: 13px;
    text-align: center;
}
.wolfly-newsletter-modal__feedback.success { color: #1a7e34; }
.wolfly-newsletter-modal__feedback.error   { color: #b00020; }
@media (max-width: 600px) {
    .wolfly-newsletter-modal__dialog { margin: 5vh 12px; padding: 24px 20px; }
}