/* --------------------------------
 * Product grid
 * -------------------------------- */

.woocommerce ul.products {
	display: grid !important;
	width: 100%;
	margin: 0 0 0 auto !important;
	padding: 0;
	list-style: none;

	column-gap: 24px;
	row-gap: 48px;
}

.woocommerce ul.products.columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.woocommerce ul.products.columns-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*
 * Oude Woo float/percentage layout volledig uitschakelen.
 */
.woocommerce ul.products li.product {
	float: none !important;
	clear: none !important;
	width: auto !important;
	margin: 0 !important;
}


/* --------------------------------
 * Product images / hover
 * -------------------------------- */

.roof-product-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
}

.roof-product-card__media img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 !important;

	transition: opacity 250ms ease;
}

.roof-product-card__image--hover {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100% !important;
	object-fit: cover;

	opacity: 0;
}
.woocommerce nav.woocommerce-pagination ul li,
.woocommerce nav.woocommerce-pagination ul{
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li{
	margin-left: 3px; 
	margin-right: 3px;
}

.woocommerce nav.woocommerce-pagination{
	margin-bottom: 30px;
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a{
	font-size: 16px;
    font-weight: bold;
	color: var(--e-global-color-text);
	background: var( --e-global-color-d6c3203 );
	padding: 5px 13px 5px 13px;
    border-radius: 10px 10px 10px 10px;
	border: 0;
	line-height: 100%;
	margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li span.current{
	font-size: 16px;
    font-weight: bold;
    background: var(--e-global-color-text);
	color: var( --e-global-color-d6c3203 );
	padding: 5px 13px 5px 13px;
    border-radius: 10px 10px 10px 10px;
	line-height: 100%;
	margin: 0;
}

.woocommerce ul.products li.product:hover
.roof-product-card__image--hover {
	opacity: 1;
}

.woocommerce ul.products li.product:hover .attachment-woocommerce_thumbnail{
	opacity: 0;
}


/* Sale/status badge blijft boven afbeeldingen staan */

.roof-product-card__media .onsale {
	z-index: 2;
}


/* --------------------------------
 * Grid switcher
 * -------------------------------- */

.roof-grid-switcher {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-left: auto;
	padding-top: 70px;
}

.roof-grid-switcher__button {
	display: block;
	border: 0;
	background: transparent !important;
	cursor: pointer;
	opacity: .45;
}

.roof-grid-switcher__button svg{
	height: 35px;
	color: rgb(75,75,75);
}

.roof-grid-switcher__button:hover svg{
	opacity: .45;
}

.roof-grid-switcher__button[aria-pressed="true"] {
	opacity: 1;
}

.roof-grid-switcher__button span {
	display: block;
	width: 3px;
	height: 16px;
	background: currentColor;
}


/* --------------------------------
 * Mobile
 *
 * columns-3 / columns-4 zijn op mobiel
 * irrelevant: altijd dezelfde layout.
 * -------------------------------- */

@media (max-width: 767px) {
	.roof-grid-switcher {
		display: none;
	}

	.woocommerce ul.products.columns-3,
	.woocommerce ul.products.columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 12px;
		row-gap: 32px;
	}
}


.woocommerce ul.products.columns-3
.woocommerce-loop-product__title {
	font-size: 20px;

}

.woocommerce ul.products.columns-4
.woocommerce-loop-product__title {
	font-size: 16px;
}

.woocommerce ul.products {
	display: grid;
	padding-bottom: 70px;
	width: 90%;
	margin-left: auto;
}

/* =========================================================
   Product block
   ========================================================= */

.woocommerce ul.products .woocommerce-loop-product__title {
	color: rgb(75, 75, 75);
	cursor: pointer;
	display: inline;
	font-family: 'brandon-grotesque', sans-serif;
	font-weight: 400;
	height: auto;
	line-height: 20px;
	text-align: start;
	text-decoration-color: rgb(75, 75, 75);
	text-decoration-line: none;
	text-decoration-style: solid;
	text-decoration-thickness: auto;
	text-size-adjust: 100%;
	width: auto;
	-webkit-font-smoothing: antialiased;
}

.woocommerce ul.products .woocommerce-Price-amount{
	box-sizing: border-box;
	color: rgb(75, 75, 75);
	cursor: pointer;
	display: inline;
	font-family: 'Moderat', sans-serif;
	font-size: 16px;
	font-weight: 100;
	height: auto;
	line-height: 16px;
	text-align: start;
	text-size-adjust: 100%;
	width: auto;
	-webkit-font-smoothing: antialiased;
	text-decoration: none;
}

.woocommerce ul.products .add_to_cart_button,
.woocommerce ul.products .roof-product-card__footer .button{
	color: rgb(75, 75, 75);
	font-size: 15px; 
	font-weight: 300;
	display: flex !important;
	font-family: 'Moderat', sans-serif;
	background: none;
}

.woocommerce.tax-product_cat{
	background: var( --e-global-color-d6c3203 );
}

.woocommerce .woocommerce-products-header{
	display: grid;
	grid-template-columns: 1fr 2fr;
	text-align: center;
	width: 90%;
	margin-left: auto;
}

.woocommerce .woocommerce-products-header h1{
	align-self: flex-end;
}

.woocommerce .woocommerce-products-header .term-description{
	grid-column: 1/2;
	padding-right: 30px;
}

.woocommerce .woocommerce-products-header .roof-category-image{
	grid-row: 1/3;
	grid-column: 2/3;
}

.woocommerce ul.products::before{
	display: none !important;
}


/* =========================================================
   Shop layout
   ========================================================= */

.roof-shop-layout {
	--roof-filter-text: #4B4B4B;
	--roof-filter-heading-open: #1F2124;
	--roof-filter-active: #DECEF1;

	display: grid;
	grid-template-columns: minmax(12%, 15%) minmax(0, 1fr);
	align-items: start;
	max-width: 1458px;
	width: 90%;
	margin: 0 auto;
	padding-top: 70px;
}


/* =========================================================
   Sticky sidebar
   ========================================================= */

.roof-shop-sidebar {
	position: sticky;
	top: 120px;

	align-self: start;
	width: 100%;
}


/* =========================================================
   Details
   ========================================================= */

.roof-shop-filter {
	display: block;

	margin: 0;
	padding: 0;

	border: 0;
}


/*
 * Space between WALL ART and PRICE.
 */
.roof-shop-filter + .roof-shop-filter {
}


/* =========================================================
   Summary
   ========================================================= */

.roof-shop-filter__summary {
	display: flex;
	align-items: center;
	gap: 30px;

	margin: 0;
	padding: 0;

	color: var(--roof-filter-text);

	cursor: pointer;

	list-style: none;

	user-select: none;
}


/*
 * Kill browser's default marker.
 */
.roof-shop-filter__summary::-webkit-details-marker {
	display: none;
}

.roof-shop-filter__summary::marker {
	display: none;
	content: "";
}


/* =========================================================
   Custom arrow

   Closed = pointing down
   Open   = pointing up
   ========================================================= */

.roof-shop-filter__summary::before {
	content: "";

	flex: 0 0 auto;

	width: 0;
	height: 0;

	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid currentColor;

	transform: translateY(2px);
}


.roof-shop-filter[open] > .roof-shop-filter__summary::before {
	border-top: 0;
	border-bottom: 8px solid currentColor;

	transform: translateY(-2px);
}


/* =========================================================
   Summary typography
   ========================================================= */

.roof-shop-filter__title {
	font-family: 'brandon-grotesque', sans-serif;

	font-size: 20px;
	font-weight: 400;
	line-height: 1;

	letter-spacing: 0;

	text-transform: uppercase;
}


/*
 * Closed screenshot:
 * grey title.
 */
.roof-shop-filter:not([open]) > .roof-shop-filter__summary {
	color: var(--roof-filter-text);
}


/*
 * Open screenshot:
 * title/arrow goes much darker.
 */
.roof-shop-filter[open] > .roof-shop-filter__summary {
	color: var(--roof-filter-heading-open);
}


/* =========================================================
   Open content
   ========================================================= */

.roof-shop-filter__content {
}


/* =========================================================
   Category navigation
   ========================================================= */

.roof-shop-filter__summary{
	margin-bottom: 10px;
}

.roof-category-nav {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 20px;
	gap: 14px;
}


.roof-category-nav__item {
	display: block;

	margin: 0;
	padding: 0;

	color: var(--roof-filter-text);

	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.08;

	text-decoration: none;

	transition:
		color 150ms ease,
		opacity 150ms ease;
}


.roof-category-nav__item:hover,
.roof-category-nav__item:focus-visible {
}


/*
 * Current category.
 */
.roof-category-nav__item.is-active {
	font-weight: 700;
}


/*
 * "All products" is slightly stronger in the design.
 */
.roof-category-nav__item--all {
	font-weight: 700;
}


/* =========================================================
   Price filter
   ========================================================= */

.roof-shop-filter__content--price {
	padding-right: 0;
}


.roof-price-filter {
	padding-top: 4px;
}


/*
 * Woo price slider track.
 */
.woocommerce
.roof-price-filter
.widget_price_filter
.price_slider_wrapper
.ui-widget-content,

.woocommerce
.roof-price-filter
.price_slider_wrapper
.ui-widget-content {
	height: 2px;
	background: rgba(0,0,0,.1);
	border: 0;
	border-radius: 0;
}


/*
 * Selected range.
 */
.woocommerce
.roof-price-filter
.ui-slider
.ui-slider-range {
	background: var(--roof-filter-active);

	border-radius: 0;
}


/*
 * Handles.
 */
.woocommerce
.roof-price-filter
.ui-slider
.ui-slider-handle {
	top: -6px;

	width: 15px;
	height: 15px;

	margin-left: -7px;

	background: var(--roof-filter-active);

	border: 0;
	border-radius: 50%;
}


/*
 * Price label / values.
 */
.woocommerce
.roof-price-filter
.price_slider_amount {
	margin-top: 24px;

	color: var(--roof-filter-text);

	font-family: inherit;
	font-size: 17px;
	line-height: 1.4;
}

.price_slider_amount .button{
	display: none;
}

.woocommerce
.roof-price-filter
.price_slider_amount .price_label{
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	font-size: 15px;
}

.woocommerce .roof-price-filter .from{
	margin-left: auto;
	margin-right: 5px;
}

.woocommerce .roof-price-filter .to{
	margin-left: 10px;
}

/*
 * Filter button.
 */
.woocommerce
.roof-price-filter
.price_slider_amount
.button {
	display: none;
}


/* =========================================================
   Product side
   ========================================================= */

.roof-shop-products {
	min-width: 0;
}


/* =========================================================
   Tablet / mobile
   ========================================================= */

@media (max-width: 1024px) {

	.roof-shop-layout {
		display: block;
	}


	.roof-shop-sidebar {
		position: static;

		margin-bottom: 42px;
		padding: 28px 24px;
	}


	.roof-shop-filter__title {
		font-size: 30px;
	}


	.roof-category-nav__item {
		font-size: 25px;
	}


	.roof-shop-filter__content {
		padding-left: 0;
	}

}


/* Price + button on one line */
.roof-product-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;

	margin-top: 10px;
}


/* Remove Woo's default price spacing */
.roof-product-card__footer .price {
	margin: 0;
	flex: 0 0 auto;
	margin-bottom: 0 !important;
}


/* Add to cart */
.roof-product-card__footer .button {
	display: inline-flex;
	align-items: center;
	gap: 8px;

	margin: 0 !important;
	padding: 0 !important;

	background: transparent !important;
	border: 0;
	font-weight: 300;
}

.roof-product-card__footer .button:hover {
	opacity: .5;
}

.roof-product-card__sku{
	font-size: 14px;
}


/* Plus-circle */
.roof-add-to-cart__icon {
	display: block;

	width: 18px;
	height: 18px;

	flex: 0 0 18px;

	fill: currentColor;
}

@media only screen and (max-width: 1024px){
	.roof-shop-sidebar{
		display: none;
	}

	.woocommerce .woocommerce-products-header{
		padding: 0;
		display: flex !important;
		flex-flow: column nowrap;
		width: 100% !important;
	}

	.woocommerce ul.products{
		width: 100% !important;
	}

	.woocommerce .woocommerce-products-header h1{
		align-self: center;
	}
}