/* =========================================================
   rawinput.pl - karty produktow w calym sklepie
   Przeniesione z wtyczki rawinput_karty do motywu (jedno miejsce,
   jeden plik, bez osobnej wtyczki na sam CSS).

   Dziala na standardowym markupie WooCommerce (ul.products > li.product),
   wiec obejmuje sklep, kategorie, tagi, wyszukiwarke, strony marek
   i produkty powiazane.
   ========================================================= */

/* ---- siatka: rowne kolumny i rowne odstepy miedzy rzedami ----
   WooCommerce uklada karty na floatach, przez co rzedy sklejaly sie
   ze soba, a karty w jednym rzedzie mialy rozne wysokosci. Grid
   zalatwia oba problemy naraz. */
.woocommerce ul.products,
ul.products{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin:0 !important;
  padding:0 !important;
  list-style:none;
}
.woocommerce ul.products::before,.woocommerce ul.products::after,
ul.products::before,ul.products::after{display:none !important}
.woocommerce ul.products li.product,
ul.products li.product{
  width:auto !important;
  float:none !important;
  margin:0 !important;
  clear:none !important;
}
.woocommerce ul.products.columns-1,ul.products.columns-1{grid-template-columns:minmax(0,1fr)}
.woocommerce ul.products.columns-2,ul.products.columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.woocommerce ul.products.columns-3,ul.products.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}

.woocommerce ul.products li.product,
ul.products li.product,
.wc-block-grid__product{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  padding:0 !important;
  background:#0d0d0d !important;
  border:1px solid var(--line-soft) !important;
  border-radius:10px !important;
  overflow:hidden !important;
  text-align:left !important;
  box-shadow:none !important;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease) !important;
}
/* Bez podskakiwania i bez neonowej poswiaty - sama krawedz sie rozjasnia. */
.woocommerce ul.products li.product:hover,
ul.products li.product:hover,
.wc-block-grid__product:hover{
  border-color:rgba(255,255,255,.22) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.5) !important;
}

/* ---- link opakowujacy zdjecie, tytul i cene ---- */
ul.products li.product > a.woocommerce-loop-product__link{
  display:flex !important;
  flex-direction:column;
  flex:1 1 auto;
  padding:0 !important;
  margin:0 !important;
  text-decoration:none;
}

/* ---- zdjecie jako pole medialne 1:1 ---- */
ul.products li.product > a.woocommerce-loop-product__link > img,
ul.products li.product > a.woocommerce-loop-product__link > .attachment-woocommerce_thumbnail{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:1/1;
  object-fit:contain !important;
  padding:14px !important;
  margin:0 !important;
  border:0 !important;
  border-bottom:1px solid var(--line-soft) !important;
  border-radius:0 !important;
  background:
    radial-gradient(60% 55% at 50% 45%,rgba(255,255,255,.10),rgba(255,255,255,.03) 50%,transparent 75%),
    linear-gradient(180deg,#131313,#0a0a0a) !important;
  box-shadow:none !important;
}
/* Zdjecie produktu niedostepnego zostaje w pelnym kolorze.
   Odbarwianie sprawialo, ze przy wyprzedanym magazynie caly sklep
   wygladal na martwy. O braku towaru mowi plakietka i przycisk. */

/* ---- brewka (kategoria nad tytulem) ---- */
ul.products li.product .ri-archive-eyebrow{
  margin:16px 16px 7px !important;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--t3);
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---- tytul ---- */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2.woocommerce-loop-product__title{
  margin:0 16px 12px !important;
  padding:0 !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  color:#fff !important;
  text-align:left !important;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:3.4em;
}

/* ---- cena + sygnal dostepnosci w jednym wierszu ---- */
ul.products li.product .price{
  display:flex !important;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin:auto 16px 0 !important;   /* auto = cena zawsze przy dole karty */
  padding:0 !important;
  color:var(--amber) !important;
  font-size:17px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  text-align:left !important;
}
ul.products li.product .price .amount,
ul.products li.product .price bdi,
ul.products li.product .price ins{
  color:var(--amber) !important;
  text-decoration:none !important;
  font-weight:700 !important;
}
ul.products li.product .price del,
ul.products li.product .price del .amount,
ul.products li.product .price del bdi{
  color:var(--t3) !important;
  font-size:13px !important;
  font-weight:400 !important;
  opacity:1 !important;
}
ul.products li.product .price .woocommerce-Price-currencySymbol{font-size:.8em}
.ri-stock24{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--green);
}
.ri-stock24::before{
  content:'';
  width:5px;height:5px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 6px rgba(79,212,138,.8);
}

/* ---- przycisk ---- */
ul.products li.product .woocommerce-loop-product__buttons{
  margin:0 !important;
  padding:13px 16px 18px !important;
}
ul.products li.product .button,
ul.products li.product a.button,
ul.products li.product .add_to_cart_button{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  margin:0 !important;
  padding:11px 14px !important;
  min-height:0 !important;
  height:auto !important;
  background:transparent !important;
  border:1px solid var(--line) !important;
  border-radius:6px !important;
  color:var(--t2) !important;
  font-family:inherit !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  line-height:1.2 !important;
  text-align:center !important;
  box-shadow:none !important;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease) !important;
}
ul.products li.product .button:hover,
ul.products li.product a.button:hover,
ul.products li.product .add_to_cart_button:hover{
  background-color:var(--cyan) !important;
  border-color:var(--cyan) !important;
  color:#04141a !important;
}
ul.products li.product.outofstock .button{opacity:.65 !important}
ul.products li.product.outofstock .button:hover{
  background-color:transparent !important;
  border-color:var(--t3) !important;
  color:#fff !important;
  opacity:1 !important;
}
ul.products li.product a.added_to_cart{
  display:block !important;
  margin:8px 16px 0 !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cyan) !important;
  text-align:center;
}

/* ---- plakietki (snippet #51 drukuje je inline w wp_head,
        dlatego bijemy je wyzsza specyficznoscia, bez !important) ---- */
ul.products li.product .cyber-oos-badge{
  top:10px;
  left:10px;
  right:auto;
  padding:4px 8px;
  background:rgba(0,0,0,.8);
  border:1px solid rgba(255,255,255,.22);
  border-radius:4px;
  color:#cfcfcf;
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  clip-path:none;
  box-shadow:none;
}
ul.products li.product .cyber-oos-badge.cyber-oos-restock{
  background:rgba(0,221,255,.12);
  border-color:rgba(0,221,255,.45);
  color:var(--cyan);
}
ul.products li.product .cyber-oos-badge.cyber-sale-badge{
  left:auto;
  right:10px;
  background:var(--red);
  border-color:var(--red);
  color:#fff;
}

/* ---- gwiazdki ocen ---- */
ul.products li.product .star-rating{
  margin:0 16px 10px !important;
  font-size:13px !important;
  letter-spacing:normal !important;   /* patrz sekcja "gwiazdki" w sklep.css */
  color:var(--amber) !important;
}

/* ---- RWD ---- */
@media (max-width:1024px){
  .woocommerce ul.products,ul.products{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
}
@media (max-width:820px){
  .woocommerce ul.products,ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
@media (max-width:600px){
  ul.products li.product .ri-archive-eyebrow{margin:12px 12px 6px !important}
  ul.products li.product .woocommerce-loop-product__title{
    margin:0 12px 10px !important;
    font-size:13px !important;
  }
  ul.products li.product .price{margin:auto 12px 0 !important;font-size:15px !important}
  ul.products li.product .woocommerce-loop-product__buttons{padding:10px 12px 14px !important}
  ul.products li.product > a.woocommerce-loop-product__link > img{padding:10px !important}
}
@media (prefers-reduced-motion:reduce){
  ul.products li.product{transition:none !important}
}

/* ---- odstepy wokol przycisku ----
   W tej wersji WooCommerce przycisk jest BEZPOSREDNIM dzieckiem <li>,
   a nie siedzi w .woocommerce-loop-product__buttons. Padding nadany
   opakowaniu nie mial wiec czego opakowac i przycisk dotykal ramki. */
ul.products li.product > .button,
ul.products li.product > a.button,
ul.products li.product > a.add_to_cart_button,
ul.products li.product > .wc-forward{
  width:auto !important;
  margin:15px 16px 18px !important;
}
ul.products li.product > a.added_to_cart{margin:0 16px 16px !important}
/* gdy przycisk jednak trafi do opakowania (inna wersja Woo) - bez podwojnych marginesow */
ul.products li.product .woocommerce-loop-product__buttons > .button,
ul.products li.product .woocommerce-loop-product__buttons > a.button{margin:0 !important}

@media (max-width:600px){
  ul.products li.product > .button,
  ul.products li.product > a.button,
  ul.products li.product > a.add_to_cart_button{margin:12px 12px 14px !important}
  ul.products li.product > a.added_to_cart{margin:0 12px 12px !important}
}

/* ---- plakietki (wlasne, bez snippetu #51) ---- */
ul.products li.product .ri-plakietka{
  position:absolute;top:10px;left:10px;z-index:3;
  padding:4px 9px;border-radius:4px;
  font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  line-height:1.4;pointer-events:none;
}
.ri-plakietka--brak{background:rgba(0,0,0,.82);border:1px solid rgba(255,255,255,.22);color:#cfcfcf}
.ri-plakietka--wkrotce{background:rgba(0,221,255,.12);border:1px solid rgba(0,221,255,.45);color:var(--cyan)}
.ri-plakietka--promo{background:var(--red);border:1px solid var(--red);color:#fff;left:auto;right:10px}