.elementor-275 .elementor-element.elementor-element-5ed6f58{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-275 .elementor-element.elementor-element-6a88473{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-275 .elementor-element.elementor-element-2995a61 .jet-smart-filters-select.jet-filter{display:block;}.elementor-275 .elementor-element.elementor-element-2995a61 .jet-smart-filters-hierarchy.jet-filter .jet-select{display:block;}.elementor-275 .elementor-element.elementor-element-2995a61 .jet-filters-group{display:flex;flex-direction:column;margin-top:calc(-10px/2);margin-bottom:calc(-10px/2);}.elementor-275 .elementor-element.elementor-element-2995a61{width:100%;max-width:100%;}.elementor-275 .elementor-element.elementor-element-2995a61 .jet-smart-filters-select.jet-filter .jet-select{max-width:100%;flex-basis:100%;}.elementor-275 .elementor-element.elementor-element-2995a61 .jet-smart-filters-hierarchy.jet-filter .jet-select__control{max-width:100%;flex-basis:100%;}.elementor-275 .elementor-element.elementor-element-2995a61 .jet-select__control{background-color:#C5853A21;border-style:solid;border-width:1px 1px 1px 1px;border-color:#00000026;padding:11px 11px 11px 11px;}.elementor-275 .elementor-element.elementor-element-2995a61 .jet-filters-group .jet-filter{margin-top:calc(10px/2);margin-bottom:calc(10px/2);}.elementor-275 .elementor-element.elementor-element-2995a61 .jet-filter .jet-filters-group{margin-top:calc(-10px/2);margin-bottom:calc(-10px/2);}.elementor-275 .elementor-element.elementor-element-2995a61 .jet-filter .jet-filters-group .jet-select{margin-top:calc(10px/2);margin-bottom:calc(10px/2);}.elementor-275 .elementor-element.elementor-element-c7ac731{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-275 .elementor-element.elementor-element-64b8386{--display:flex;}.elementor-275 .elementor-element.elementor-element-af9a0d8{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:3em;--padding-bottom:7em;--padding-left:0em;--padding-right:0em;}.elementor-275 .elementor-element.elementor-element-e50fc8a{--display:flex;}.elementor-275 .elementor-element.elementor-element-aee941c{--grid-columns:4;--grid-column-gap:2px;}@media(min-width:768px){.elementor-275 .elementor-element.elementor-element-5ed6f58{--content-width:1200px;}.elementor-275 .elementor-element.elementor-element-c7ac731{--content-width:1200px;}.elementor-275 .elementor-element.elementor-element-af9a0d8{--content-width:1200px;}}@media(max-width:1024px){.elementor-275 .elementor-element.elementor-element-aee941c{--grid-columns:2;}}@media(max-width:767px){.elementor-275 .elementor-element.elementor-element-aee941c{--grid-columns:1;--grid-row-gap:0px;--grid-column-gap:0px;}}/* Start custom CSS for container, class: .elementor-element-5ed6f58 *//* ============================================================
   WÓJCIAK SPA — Shop/Archive Page Overhaul
   Wersja: 1.0 | Bez zmian czcionek
   
   WDROŻENIE: Dodaj do tego samego miejsca co CSS produktu
   WordPress Admin > Wygląd > Dostosuj > Dodatkowy CSS
   
   Celuje w: Loop Grid (Elementor #684), Jet Smart Filters,
   przycisk "Odśwież", karty produktów, ceny na kartach
   ============================================================ */


/* ============================================================
   1. HERO / NAGŁÓWEK "SKLEP"
   ============================================================ */

/* Kontener z tłem - delikatny overlay dla lepszej czytelności */
.elementor-element-6e030d0a {
  position: relative;
  overflow: hidden;
}

.elementor-element-6e030d0a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.35) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.elementor-element-6e030d0a > * {
  position: relative;
  z-index: 1;
}

/* Tytuł "Sklep" */
.elementor-element-6e030d0a h1.elementor-heading-title {
  text-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
  letter-spacing: 0.04em !important;
}


/* ============================================================
   2. FILTR KATEGORII — Pill Buttons (zamiana selecta)
   ============================================================ */

/* Ukryj oryginalny select */
.jet-select .jet-select__control {
  display: none !important;
}

/* Kontener na pill buttons (generowany przez JS) */
.ws-cat-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 4px 0 !important;
}

.ws-cat-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 18px !important;
  border: 1.5px solid rgba(0,0,0,0.1) !important;
  border-radius: 100px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: var(--ws-mid-grey, #6B6B6B) !important;
  background: var(--ws-white, #FEFEFE) !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  line-height: 1.3 !important;
}

.ws-cat-pill:hover {
  border-color: var(--ws-gold-light, #D4A84A) !important;
  color: var(--ws-gold-dark, #A67B1E) !important;
  background: rgba(200, 150, 46, 0.04) !important;
}

.ws-cat-pill.ws-active {
  border-color: var(--ws-gold, #C8962E) !important;
  background: var(--ws-gold, #C8962E) !important;
  color: white !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(200, 150, 46, 0.25) !important;
}

.ws-cat-pill.ws-active:hover {
  background: var(--ws-gold-dark, #A67B1E) !important;
  border-color: var(--ws-gold-dark, #A67B1E) !important;
}

/* Mobile: scroll horyzontalny */
@media (max-width: 767px) {
  .ws-cat-pills {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
    scrollbar-width: none !important;
  }
  .ws-cat-pills::-webkit-scrollbar {
    display: none !important;
  }
  .ws-cat-pill {
    padding: 7px 14px !important;
    font-size: 0.78rem !important;
  }
}


/* Fallback: jeśli JS się nie załadował, select wygląda ok */
.jet-select:not(.ws-pills-ready) .jet-select__control {
  display: block !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: var(--ws-white, #FEFEFE) !important;
  border: 2px solid rgba(0,0,0,0.08) !important;
  border-radius: 8px !important;
  padding: 14px 48px 14px 20px !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: var(--ws-charcoal, #2D2D2D) !important;
  width: 100% !important;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236B6B6B' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 16px !important;
}


/* ============================================================
   2b. ZDJĘCIA 1:1 KWADRATOWE (Loop Grid)
   ============================================================ */

.elementor-684 .elementor-element-02fb97f img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #F8F6F2;
}


/* ============================================================
   3. PRZYCISK "ODŚWIEŻ PRODUKTY"
   ============================================================ */

.elementor-element-b03238c button {
  appearance: none !important;
  background: var(--ws-white, #FEFEFE) !important;
  color: var(--ws-charcoal, #2D2D2D) !important;
  border: 2px solid rgba(0,0,0,0.08) !important;
  border-radius: var(--ws-radius-md, 8px) !important;
  padding: 12px 24px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  width: 100% !important;
}

.elementor-element-b03238c button:hover {
  border-color: var(--ws-gold, #C8962E) !important;
  color: var(--ws-gold-dark, #A67B1E) !important;
  box-shadow: 0 2px 8px rgba(200, 150, 46, 0.12) !important;
  transform: translateY(-1px);
}

.elementor-element-b03238c button:active {
  transform: translateY(0);
}


/* ============================================================
   4. PRODUCT CARDS (Loop Item #684)
   ============================================================ */

/* Karta — wrapper */
.elementor-684 .elementor-element-93359f4 {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  overflow: hidden;
}

.elementor-684 .elementor-element-93359f4:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04) !important;
  transform: translateY(-4px) !important;
}

/* Zdjęcie — zoom on hover */
.elementor-684 .elementor-element-678375e img {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.elementor-684 .elementor-element-93359f4:hover .elementor-element-678375e img {
  transform: scale(1.05) !important;
}

/* Overflow na kontenerze zdjęcia */
.elementor-684 .elementor-element-678375e {
  overflow: hidden !important;
}

/* Tytuł produktu w karcie */
.elementor-684 .elementor-element-50776ae .product_title {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--ws-black, #1A1A1A) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.elementor-684 .elementor-element-50776ae .product_title a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.elementor-684 .elementor-element-50776ae .product_title a:hover {
  color: var(--ws-gold-dark, #A67B1E) !important;
}

/* === CENA W KARCIE (kompaktowa wersja) === */
.elementor-684 .wc-price-netto-brutto {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.elementor-684 .wc-price-netto-brutto .price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}

.elementor-684 .wc-price-netto-brutto .price-label {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ws-light-grey, #A0A0A0) !important;
  min-width: 44px !important;
}

.elementor-684 .wc-price-netto-brutto .price-brutto .price-value .woocommerce-Price-amount {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--ws-black, #1A1A1A) !important;
}

.elementor-684 .wc-price-netto-brutto .price-netto .price-value .woocommerce-Price-amount {
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  color: var(--ws-light-grey, #A0A0A0) !important;
}

/* === PRZYCISK "DODAJ DO KOSZYKA" W KARCIE === */
.elementor-684 .elementor-element-7eee65d .cart a.button {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 13px 20px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
}

.elementor-684 .elementor-element-7eee65d .cart a.button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.45s ease;
}

.elementor-684 .elementor-element-7eee65d .cart a.button:hover::before {
  left: 100%;
}

/* Biała sekcja dołu karty - lepsze paddingi */
.elementor-684 .elementor-element-e2404dc {
  padding: 16px !important;
  gap: 10px !important;
}

/* Kontener na tytuł - mniej min-height żeby nie było pustej przestrzeni */
.elementor-684 .elementor-element-2b08c27 {
  min-height: 70px !important;
}


/* ============================================================
   5. GRID SPACING & LAYOUT
   ============================================================ */

/* Wyrównane gapy między kartami */
.elementor-widget-loop-grid .elementor-loop-container.elementor-grid {
  gap: 24px !important;
  row-gap: 28px !important;
}

/* Na mobile — więcej oddechu */
@media (max-width: 767px) {
  .elementor-widget-loop-grid .elementor-loop-container.elementor-grid {
    gap: 16px !important;
    row-gap: 20px !important;
  }
  
  .elementor-684 .elementor-element-e2404dc {
    padding: 14px !important;
  }
  
  .elementor-684 .elementor-element-2b08c27 {
    min-height: unset !important;
  }
}


/* ============================================================
   6. SALE BADGE (jeśli włączony w WooCommerce)
   ============================================================ */

.e-loop-item .onsale,
.e-loop-item span.onsale {
  background: var(--ws-gold, #C8962E) !important;
  color: white !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
  border-radius: 0 0 var(--ws-radius-md, 8px) var(--ws-radius-md, 8px) !important;
  position: absolute !important;
  top: 0 !important;
  left: 16px !important;
  z-index: 5 !important;
  line-height: 1.4 !important;
  min-width: unset !important;
  min-height: unset !important;
}


/* ============================================================
   7. STAGGERED ANIMATION on cards
   ============================================================ */

@keyframes ws-cardIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.e-loop-item {
  animation: ws-cardIn 0.4s ease-out both;
}

.e-loop-item:nth-child(1) { animation-delay: 0s; }
.e-loop-item:nth-child(2) { animation-delay: 0.06s; }
.e-loop-item:nth-child(3) { animation-delay: 0.12s; }
.e-loop-item:nth-child(4) { animation-delay: 0.18s; }
.e-loop-item:nth-child(5) { animation-delay: 0.24s; }
.e-loop-item:nth-child(6) { animation-delay: 0.3s; }
.e-loop-item:nth-child(7) { animation-delay: 0.36s; }
.e-loop-item:nth-child(8) { animation-delay: 0.42s; }


/* ============================================================
   8. EMPTY STATE — brak produktów
   ============================================================ */

.woocommerce-info {
  background: var(--ws-cream, #F8F6F2) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-left: 3px solid var(--ws-gold, #C8962E) !important;
  border-radius: var(--ws-radius-md, 8px) !important;
  padding: 20px 24px !important;
  color: var(--ws-charcoal, #2D2D2D) !important;
  font-size: 0.92rem !important;
}


/* ============================================================
   9. PRELOADER (Jet Smart Filters)
   ============================================================ */

.jsf_provider-preloader {
  font-size: 36px !important;
  color: var(--ws-gold, #C8962E) !important;
  opacity: 0.6;
}


/* ============================================================
   10. SCROLLBAR STYLING (subtlety)
   ============================================================ */

.elementor-loop-container::-webkit-scrollbar {
  width: 4px;
}

.elementor-loop-container::-webkit-scrollbar-track {
  background: transparent;
}

.elementor-loop-container::-webkit-scrollbar-thumb {
  background: rgba(200, 150, 46, 0.3);
  border-radius: 2px;
}/* End custom CSS */