/*
 * Product lists (category, search and brand pages) in the look of the new product page
 * (task #59155; colours and shapes from product-page-v2.css): product cards with rounded
 * corners and a flat orange price, filters as rounded cards with orange labels, rounded
 * sorting box and page numbers, and a lighter title band.
 *
 * Purely visual: the shop_list / shop_price_2 templates, the filter and sorting markup and
 * site.js / jquery.custom.js are unchanged. Loaded after style.css and responsive.css
 * (format.php, site_restyle_stylesheets()).
 */

/* ================= title band and breadcrumb (every page with the band) ================= */
#breadcrumb { background: var(--ps-soft); border-bottom: 1px solid var(--ps-line); padding: 22px 0 20px; }
#breadcrumb h1 { margin: 0 0 6px; font-size: 28px; line-height: 1.2; text-transform: none; color: var(--ps-ink); }
#breadcrumb ul { margin: 0; padding: 0; }
#breadcrumb ul li {
	height: auto; margin: 0; padding: 0; background: none; font-size: 13px; line-height: 1.5;
	font-weight: 400; text-transform: none; color: #6b6b6b;
}
#breadcrumb ul li + li:before { content: "\203A"; margin: 0 6px; color: #9a9a9a; }
#breadcrumb ul li a { color: #6b6b6b; }
#breadcrumb ul li a:hover { color: var(--ps-orange); text-decoration: underline; }

/* sorting: a rounded white box like the size switch on the product page */
#breadcrumb .list-sorting .select-opt {
	height: 52px; min-width: 210px; background: #fff; border: 1px solid var(--ps-line-strong); border-radius: var(--ps-r);
	transition: border-color .15s, border-radius .15s;
}
#breadcrumb .list-sorting .select-opt:hover { border-color: #bdbdb8; }
#breadcrumb .list-sorting .select-opt.active { border-color: var(--ps-orange); border-radius: 10px 10px 0 0; }
.select-opt.selected > b { color: #7a7a7a; }
.select-opt.selected > b span { font-weight: 600; color: var(--ps-ink); }
.select-opt > div { border-radius: 0 0 10px 10px; overflow: hidden; }
#breadcrumb .list-sorting .select-opt > div { left: -1px; width: calc(100% + 2px); border: 1px solid var(--ps-orange); border-top: 0; box-sizing: border-box; }
#breadcrumb .list-sorting .select-opt:not(.active) > div { border-width: 0; }
.select-opt > div div { padding: 10px 18px; }
.select-opt > div div.active { background: var(--ps-tint); color: var(--ps-orange); font-weight: 700; }
.select-opt > div div:not(.active):hover { background: var(--ps-soft); }

/* ======================================= filters ======================================= */
.shop-filters .filter-block {
	background: #fff; border: 1px solid var(--ps-line); border-radius: var(--ps-r-lg); box-shadow: none; padding-bottom: 14px; overflow: hidden;
}
.shop-filters .filter-block + .filter-block { margin-top: 14px; }
.shop-filters .filter-block .filter-block-label {
	padding: 16px 20px 6px; background: transparent;
	font-size: 12px; line-height: 1.4; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ps-orange);
}
.shop-filters .filter-block .filter-block-inner { padding: 6px 20px 0; }
.shop-filters .filter-block .label-checkbox { padding: 3px 0; }
.shop-filters .filter-block .label-checkbox + .label-checkbox { margin-top: 2px; }
.shop-filters .filter-block .label-checkbox > div { align-items: center; padding-top: 0; }
.shop-filters .filter-block .filter-label { font-size: 14px; line-height: 20px; color: var(--ps-text); }
.shop-filters .filter-block .label-checkbox:hover .filter-label { color: var(--ps-ink); }
.shop-filters .filter-block .label-checkbox.active .filter-label { color: var(--ps-ink); font-weight: 600; }
.label-checkbox > span { border: 1px solid #cfcfcb; border-radius: var(--ps-r-sm); box-shadow: none; transition: border-color .15s, background-color .15s; }
.label-checkbox:hover > span { border-color: var(--ps-orange); }
.label-checkbox.active > span { background-color: var(--ps-orange); border-color: var(--ps-orange); }
.shop-filters .filter-block .filter-result-quantity {
	width: auto; min-width: 26px; height: 20px; padding: 0 6px; box-sizing: border-box;
	background: var(--ps-soft); border: 0; border-radius: 999px; font-size: 11px; color: #7a7a7a;
}
.shop-filters .filter-block .label-checkbox.disabled .filter-result-quantity { background: var(--ps-soft); border: 0; color: #b5b5b5; }
.shop-filters .filter-block .label-checkbox.disabled > span { background: #f3f3f1; border-color: var(--ps-line-strong); }

/* ==================================== product cards ==================================== */
/* the same card on every list (shop_list); the grid only where the list sits next to the
   filters (category, search and brand pages), the home page rows keep their own layout */
#products ul li .image { border-radius: var(--ps-r); }
#products ul li h3 {
	height: calc(1.35em * 3); margin: 0 0 10px; overflow: hidden;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
	font-family: 'Ubuntu', sans-serif; font-size: 14px; line-height: 1.35; font-weight: 500; text-transform: none; color: var(--ps-ink);
}
#products ul li h3 a { color: inherit; }
#products ul li:hover h3 a { color: var(--ps-orange); }

/* one flat price ("49.95 €") in orange, as on the product page; a sale shows the old price struck through */
#products ul li .price { gap: 0; font-size: 20px; line-height: 1.3; font-weight: 800; color: var(--ps-orange); }
#products ul li .price span,
#products ul li .price strong { margin: 0; font-size: inherit; color: inherit; vertical-align: baseline; }
#products ul li .price strong,
#products ul li .price div strong { margin: 0 0 0 4px; }
#products ul li .price > span[style*="line-through"] { order: 2; margin-left: 8px; font-size: 14px; font-weight: 400; color: #8a8a8a; }
#products ul li .price > span:has(> strong) { display: none; }   /* the "/" between the old and new price */
#products ul li .price > div { order: 1; font-family: inherit; font-weight: 800; color: var(--ps-orange); }

/* badges: small rounded tags (same colours as before) */
.product-badges-sl span,
.product-badges-pp span {
	height: 24px; padding: 0 9px; border-radius: var(--ps-r-sm);
	font-size: 11px; font-weight: 800; letter-spacing: .06em;
}
.product-badges-sl > span + span { margin-top: 4px; }

/* the list next to the filters: a grid of cards */
.sidebar + .page-content #products ul {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.sidebar + .page-content #products ul:after { display: none; }
.sidebar + .page-content #products ul li {
	float: none; clear: none; width: auto; min-width: 0; padding: 12px 12px 16px;
	background: #fff; border: 1px solid var(--ps-line); border-radius: var(--ps-r-card);
	transition: box-shadow .2s, border-color .2s, transform .2s;
}
.sidebar + .page-content #products ul li:hover {
	border-color: var(--ps-tint-line); box-shadow: 0 10px 26px rgba(0, 0, 0, .08); transform: translateY(-2px);
}
.sidebar + .page-content #products ul li .image { margin-bottom: 14px; }
.sidebar + .page-content #products ul li .product-badges-sl,
.sidebar + .page-content #products ul li:hover .product-badges-sl { top: 12px; right: 12px; }

/* "Vaata ka" links and "Sarnased tooted" on the search page */
.search-quicklinks a { padding: 7px 14px; background: var(--ps-soft); border-radius: 999px; }
.search-quicklinks a:hover { background: var(--ps-orange); }
.search-similar { border-top-color: var(--ps-line); }
.search-similar h2 { text-transform: none; color: var(--ps-ink); }
.search-similar .ss-item { padding: 12px; border: 1px solid var(--ps-line); border-radius: var(--ps-r-card); transition: box-shadow .2s, border-color .2s; }
.search-similar .ss-item:hover { border-color: var(--ps-tint-line); box-shadow: 0 10px 26px rgba(0, 0, 0, .08); }
.search-similar .ss-img { border-radius: var(--ps-r); background: #fff; }
.search-similar .ss-price b { font-size: 16px; color: var(--ps-orange); }

/* ==================================== page numbers ==================================== */
.pageNumbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 32px 0; }
.pageNumbers a {
	display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; margin: 0; padding: 0 12px;
	box-sizing: border-box; border: 1px solid var(--ps-line-strong); border-radius: var(--ps-r); background: #fff;
	color: var(--ps-ink); font-size: 15px; font-weight: 600;
}
.pageNumbers a:hover { background: var(--ps-tint); border-color: var(--ps-orange); color: var(--ps-orange); }
.pageNumbers a.active,
.pageNumbers a.active:hover { background: var(--ps-orange); border-color: var(--ps-orange); color: #fff; }

/* ======================================= sizes ======================================= */
@media only screen and (max-width: 1200px) {
	.sidebar + .page-content #products ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media only screen and (max-width: 980px) {
	/* the "Filtreeri tooteid" button: an orange pill instead of the black box */
	.mobile-filtering-toggle {
		height: 46px; left: 16px; bottom: 16px; padding: 0 20px; border-radius: 999px;
		background: var(--ps-orange); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: none;
		box-shadow: 0 6px 18px rgba(229, 101, 36, .35);
	}
	/* the slide-in filter panel */
	.shop-filters-mobile { border-radius: 16px 0 0 16px; overflow: visible; }
	.shop-filters-mobile .shop-filters { border-radius: 16px 0 0 16px; padding: 8px 0; }
	.shop-filters-mobile .filter-block { border: 0; border-bottom: 1px solid var(--ps-line); border-radius: 0; }
	.shop-filters-mobile .filter-block + .filter-block { margin-top: 0; }
	.shop-filters-mobile .filter-block .filter-block-inner { border: 0; padding: 6px 20px 4px; }
	.shop-filters-mobile .filter-block .filter-label { font-size: 15px; line-height: 22px; }
}

@media only screen and (max-width: 640px) {
	#breadcrumb { padding: 16px 0; }
	#breadcrumb h1 { font-size: 22px; }
	#breadcrumb .list-sorting .select-opt { height: 48px; }
	.sidebar + .page-content #products ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.sidebar + .page-content #products ul li { padding: 8px 8px 12px; border-radius: 12px; }
	.sidebar + .page-content #products ul li:hover { transform: none; }
	.sidebar + .page-content #products ul li .image { margin-bottom: 10px; }
	.sidebar + .page-content #products ul li .product-badges-sl,
	.sidebar + .page-content #products ul li:hover .product-badges-sl { top: 8px; right: 8px; }
	#products ul li h3 { font-size: 13px; }
	#products ul li .price { font-size: 17px; }
	#products ul li .price > span[style*="line-through"] { font-size: 12px; }
	.product-badges-sl span { height: 20px; padding: 0 7px; font-size: 10px; }
	.search-similar .ss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.pageNumbers a { min-width: 40px; height: 40px; }
}