/* =========================================================
   Tompol — Ultimate Shop Section (PRO MAX)
   Plik: assets/css/section-shop.css
   Wymaga: bazowych klas .glass, .btn, .badge, .modal z motywu
   ========================================================= */

/* Uzgodnione zmienne (fallback, jeśli nie ma w motywie) */
:root{
  --glass-bg: var(--glass-bg, rgba(0,0,0,.6));
  --glass-bord: var(--glass-bord, rgba(255,255,255,.12));
  --overlay: var(--overlay, rgba(0,0,0,.7));
  --accent: var(--accent, #60ffa6);
  --accent2: var(--accent2, #4dd2ff);
  --danger: var(--danger, #ff6b6b);
}

/* Sekcja */
#sklep-pro-max { padding: 90px 5%; }
#sklep-pro-max h2 { text-align:center; font-size:2.3rem; margin-bottom:.3rem; }
#sklep-pro-max .sub { text-align:center; opacity:.92; max-width:900px; margin:0 auto 1rem; }

/* ========== FILTRY ========== */
#shopFilters { position: relative; }
#shopFilters .filters-grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(6, 1fr);
}
#shopFilters label{ display:block; font-size:.88rem; opacity:.9; margin-bottom:6px; }
#shopFilters input[type="search"],
#shopFilters input[type="number"],
#shopFilters select{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid var(--glass-bord); background:rgba(255,255,255,.06);
  color:#fff; outline:none;
}
#shopFilters input::placeholder{ color:rgba(255,255,255,.7); }

#shopFilters .filters-actions .btn{ min-width:140px; }
#shopFilters .filters-actions .btn.ghost{ opacity:.95; }

/* Atrybuty (chips) */
#shopFilters fieldset{ border:1px dashed var(--glass-bord); border-radius:12px; padding:12px; }
#shopFilters legend{ padding:0 6px; opacity:.9; }
.attr-grid{ display:grid; gap:10px; grid-template-columns: repeat(3, 1fr); }
.attr-group label{ font-size:.86rem; opacity:.9; display:block; margin-bottom:6px; }
.attr-group .chips{ display:flex; flex-wrap:wrap; gap:8px; }
.attr-group .chips label{ display:inline-flex; align-items:center; gap:6px; }
.attr-group .chips input{ appearance:none; width:0; height:0; position:absolute; clip:rect(0,0,0,0); }
.attr-group .chips .chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; border:1px solid var(--glass-bord);
  background:rgba(255,255,255,.06); font-size:.82rem; cursor:pointer; user-select:none;
  transition: transform .12s ease, background .2s ease;
}
.attr-group .chips input:checked + .chip{ background:rgba(96,255,166,.2); border-color:var(--accent); }
.attr-group .chips .chip:hover{ transform: translateY(-1px); }

/* RWD filtry */
@media (max-width:1200px){
  #shopFilters .filters-grid{ grid-template-columns: repeat(3, 1fr); }
  .attr-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:760px){
  #shopFilters .filters-grid{ grid-template-columns: 1fr 1fr; }
  .attr-grid{ grid-template-columns: 1fr; }
}

/* ========== LISTA PRODUKTÓW ========== */
#shopResultsWrap{ position:relative; }
#shopResults{ position:relative; min-height: 120px; }
#shopResults.is-loading::after{
  content:""; position:absolute; inset:0; backdrop-filter: blur(2px);
  background: rgba(0,0,0,.15);
}
#shopResults.is-loading::before{
  content:"Ładowanie…"; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  padding:10px 14px; border-radius:10px; border:1px solid var(--glass-bord);
  background: rgba(0,0,0,.6);
}

/* Woo wrappery */
.products{ display:grid; gap:16px; }
.products.is-grid{
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width:1200px){ .products.is-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:900px){ .products.is-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:560px){ .products.is-grid{ grid-template-columns: 1fr; } }

.products.is-list{ grid-template-columns: 1fr; }
.products.is-list .product{
  display:grid; grid-template-columns: 220px 1fr auto; gap:16px; align-items:stretch;
}

/* Karta produktu */
.products .product{
  position:relative; border:1px solid var(--glass-bord); border-radius:14px;
  background: rgba(255,255,255,.04);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.products .product:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0,0,0,.28);
}
.products .woocommerce-LoopProduct-link{ display:block; text-decoration:none; color:#fff; }
.products .woocommerce-LoopProduct-link .attachment-woocommerce_thumbnail{
  width:100%; height:auto; display:block; object-fit:cover;
}
.products .woocommerce-loop-product__title{
  font-size:1.05rem; line-height:1.3; margin:.4rem 0;
}
.products .price{ font-weight:700; }

/* Treść karty */
.products .product .inside{
  padding:14px;
}
.products .product .meta{
  display:flex; flex-wrap:wrap; gap:8px; opacity:.85; font-size:.86rem;
}

/* Przyciski (dodaj, quick view) */
.products .add_to_cart_button,
.products a.button{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border:1px solid var(--glass-bord); border-radius:10px;
  background: rgba(0,0,0,.65); color:#fff; text-decoration:none; cursor:pointer;
  transition: transform .12s ease, background .2s ease;
}
.products a.button:hover{ transform: translateY(-1px); }
.products .button.quick-view{
  background: rgba(255,255,255,.06);
}

/* Widok listy — dopasowanie elementów Woo */
.products.is-list .product .inside{ padding:16px 16px 16px 0; }
.products.is-list .product .price{ font-size:1.1rem; }
.products.is-list .product .actions{
  display:flex; flex-direction:column; gap:8px; align-items:flex-end; padding:16px;
}

/* ========== LOAD MORE + INFINITE ========== */
.loadmore-wrap{ text-align:center; }
#shopLoadMore{ min-width:180px; }
#shopInfinite{ accent-color: var(--accent); }

/* ========== QUICK VIEW MODAL ========== */
#shopQuickView.modal{
  position:fixed; inset:0; display:none; place-items:center; z-index: 40;
  background: rgba(0,0,0,.55);
}
#shopQuickView .modal-inner{ width:min(980px, 94%); padding:18px; position:relative; }
#shopQvClose{ position:absolute; right:10px; top:10px; }
#shopQvBody{ min-height: 220px; }
.qv-wrap{ display:block; }
.qv-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.qv-title{ font-size:1.3rem; margin:0; }
.qv-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:16px; }
.qv-media .woocommerce-product-gallery{ border:1px solid var(--glass-bord); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.04); }
.qv-summary .price{ font-weight:700; font-size:1.3rem; margin:.2rem 0 .6rem; }
.qv-summary .cart{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.qv-summary .button{ padding:10px 14px; }

/* RWD QuickView */
@media (max-width:980px){
  .qv-grid{ grid-template-columns: 1fr; }
}

/* ========== STAN AKTYWNY / FOKUS (a11y) ========== */
#shopFilters input:focus,
#shopFilters select:focus,
.products a.button:focus,
#shopLoadMore:focus,
#shopQvClose:focus{
  outline:2px solid var(--accent2);
  outline-offset:2px;
  border-color: var(--accent2);
}

/* ========== SKELETON (opcjonalnie) ========== */
@keyframes shimmer{
  0%{ background-position:-480px 0; }
  100%{ background-position:480px 0; }
}
.skeleton{
  background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.12) 37%, rgba(255,255,255,.06) 63%);
  background-size: 480px 100%;
  animation: shimmer 1.2s infinite;
  border-radius:12px;
}