/* wp-content/themes/favou/imcd/imqv.css
 *
 * Quick view na listingach. Style samych blokow (cena, rozmiary, licznik)
 * doklada imqv.js prosto z plikow wtyczek - tutaj siedza wylacznie rzeczy
 * specyficzne dla waskiej kolumny w oknie.
 */

/* --- trzy punkty zamiast pelnego boxu zaufania -------------------------- */

.quickview-container .imqv-usp {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.quickview-container .imqv-usp li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 26px;
	font-size: 14px;
	line-height: 20px;
	color: #333;
}

.quickview-container .imqv-usp li:last-child {
	margin-bottom: 0;
}

/* Fajke rysujemy obrocona ramka, a nie znakiem z fontu ikon - w tym sklepie
   siedza dwie kopie Font Awesome pod jedna nazwa rodziny i glify potrafia sie
   rozjechac. Ramka zamiast tla, bo bootstrap wymusza *{background:transparent}. */
.quickview-container .imqv-usp li:before {
	content: "";
	position: absolute;
	left: 2px;
	top: 3px;
	width: 12px;
	height: 7px;
	border-left: 2px solid #2e7d32;
	border-bottom: 2px solid #2e7d32;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* --- link do pelnej karty produktu ------------------------------------- */

/* Tytul w oknie nie jest linkiem, wiec bez tego nie da sie stad przejsc
   na strone produktu. */
.quickview-container .imqv-more {
	display: inline-block;
	margin-top: 14px;
	font-size: 14px;
	font-weight: 600;
	color: #db9b2e;
	text-decoration: underline;
}

.quickview-container .imqv-more:hover,
.quickview-container .imqv-more:focus {
	color: #1b1b1b;
}

/* --- ocena prowadzi do opinii ------------------------------------------- */

/* Klikalny jest tylko napis "(111 opinii klientow)", a ludzie celuja w srednia
   i w gwiazdki.

   Nie da sie tego zalatwic rozciagnietym pseudoelementem odnosnika: motyw daje
   mu position:relative (template.css, .single-product .bwp-single-info
   .woocommerce-review-link), wiec absolutny pseudoelement kotwiczy sie do
   samego napisu zamiast do bloku oceny. Zdjecie tego pozycjonowania
   przesunieloby link o 2px w dol, bo idzie w parze z top:-2px.

   Dlatego klikniecie w gwiazdki obsluguje JS, a tutaj zostaje sam kursor.
   Odnosnik dziala dalej normalnie, takze z klawiatury. */
.quickview-container .woocommerce-product-rating,
.single-product .woocommerce-product-rating {
	cursor: pointer;
}

.quickview-container .woocommerce-product-rating:hover .woocommerce-review-link,
.single-product .woocommerce-product-rating:hover .woocommerce-review-link {
	text-decoration: underline;
}

/* --- rozmiary ----------------------------------------------------------- */

/* Wtyczka wymusza @media (min-width:768px){ repeat(5,1fr) }, a media pyta o
   szerokosc OKNA przegladarki, nie kontenera. W quick view kolumna ma okolo
   390px, wiec piec kolumn nie ma prawa sie zmiescic.
   Do tego 1fr znaczy minmax(auto,1fr), a auto nie schodzi ponizej szerokosci
   napisu - siatka zamiast sie scisnac wyjezdza poza box i ostatni rozmiar
   jest przyciety. Dajemy jawne minimum i auto-fill, ktore liczy liczbe kolumn
   od faktycznej szerokosci kontenera, a nie od szerokosci ekranu. */
.quickview-container .product-variants-switcher .variants-grid {
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 8px;
}

.quickview-container .product-variants-switcher {
	margin: 18px 0;
	padding: 18px;
}

.quickview-container .product-variants-switcher .variants-title {
	margin-bottom: 10px;
	font-size: 16px;
}

.quickview-container .product-variants-switcher .variant-button {
	min-height: 44px;
	padding: 8px 6px;
	font-size: 14px;
}

/* --- licznik promocji --------------------------------------------------- */

/* Wtyczka skaluje caly licznik od font-size kontenera. Na stronie produktu
   kolumna ma okolo 500px, w oknie quick view okolo 420px - stad mniejsza
   podstawa. Wartosc z ustawien wtyczki to 16px. */
.quickview-container .woo-sctr-countdown-timer-layout {
	font-size: 13px;
}

.quickview-container .woo-sctr-shortcode-countdown-timer-wrap {
	max-width: 100%;
	overflow: hidden;
}

/* --- zdjecie jedzie razem z przewijaniem --------------------------------- */

/* Kontenerem przewijania jest .product_detail (template.css: width 850px,
   max-height 500px, overflow-y scroll), a kolumna ze zdjeciem jest jego
   bezposrednim dzieckiem - wiec sticky lapie sie wlasnie jego.
   Zdjecie jest nizsze niz kolumna z trescia, przez co przy dluzszym opisie
   zostawala pod nim pusta biel na pol okna.
   top:15px odpowiada gornemu paddingowi .product_detail: przy zerowym
   przewinieciu element stoi dokladnie tam, gdzie stal, wiec nie podskakuje
   w momencie zlapania.
   Tylko od 768px, bo nizej kolumny bootstrapa nie sa juz obok siebie i
   przyklejone zdjecie zaslanialoby tresc. */
@media ( min-width: 768px ) {

	.bwp-quick-view .quickview-container .product_detail .img-quickview {
		position: -webkit-sticky;
		position: sticky;
		top: 15px;
	}
}

/* --- martwy przycisk rat ------------------------------------------------ */

/* Modal "Jak wziac na raty" wc-price-box renderuje w wp_footer tylko pod
   warunkiem is_product(), wiec w quick view przycisk niczego nie otwiera.
   Sama informacja o wysokosci raty zostaje. */
.quickview-container .wcpb-installments-link {
	display: none;
}