/* Theme style - WooCommerce */

/* ==========================================================================
Base styles
========================================================================== */

/* Base styles - Inputs, fields
========================================================================== */

.wc-block-components-form .wc-block-components-text-input :is(input, select, textarea),
.wc-block-components-text-input input {
	border-radius: 4px !important;
	border-color: var(--wp--preset--color--light-border) !important;
}

.wc-block-components-radio-control .wc-block-components-radio-control__option {
	width: 100%;
}

.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-textarea {
	border-radius: 4px;
	border-color: var(--wp--preset--color--light-border) !important;
}

.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border-radius: 3px;
	border-color: var(--wp--preset--color--light-border);
}

/* Select2 dropdown */
.select2-container--default .select2-selection--single {
	border-radius: 4px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: var(--wp--preset--color--brand-primary);
}

/* Base styles - Radio, checkbox
========================================================================== */

/* Base styles - Buttons
========================================================================== */

/* .wc-block-components-button:not(.is-link) {
	background-color: unset;
	color: inherit;
} */

.wc-block-components-button:not(.is-link) {
	background-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--white);
}

/* Base styles - Grids
========================================================================== */

@media (max-width: 510px) {
	.columns-2,
	.columns-3,
	.columns-4,
	.columns-5,
	.columns-6 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 400px) {
	.columns-2,
	.columns-3,
	.columns-4,
	.columns-5,
	.columns-6 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
Header 
========================================================================== */

/* Header - Products search
========================================================================== */

/* Header - User toolbar for shop
========================================================================== */

.user-toolbar {
	gap: 0;
	margin-right: var(--wp--preset--spacing--xxs);
}

/* Mini cart icon */

/* Favorites icon */

/* Myaccount icon */

/* ==========================================================================
Product filter
========================================================================== */

/* Filter container
========================================================================== */

/* Filter header and footer
========================================================================== */

.woo-filter-header h2 {
	color: var(--wp--preset--color--brand-primary);
}

/* Filter buttons
========================================================================== */

.woo-filter-btn {
	font-family: var(--wp--preset--font-family--paragraph);
	font-weight: 400;
}

.woo-filter-footer .woo-filter-btn {
	font-style: normal;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m);
	border-radius: 4px;
	text-decoration: none;
	text-transform: uppercase;
}

.woo-filter-btn:hover {
	opacity: 0.6;
}

/* Filter button - Primary button */
.primary-btn {
	background-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--white);
}

/* Filter button - Secondary button */
.secondary-btn {
	background-color: transparent;
	color: var(--wp--preset--color--brand-primary);
	border: 1px solid currentColor;
}

/* Filter chips
========================================================================== */

.is-layout-flex:has(.woo-filter-selected, .woo-filter-btn-wrapper) {
	margin-top: 0 !important;
}

.woo-filter-active__filter {
	background-color: var(--wp--preset--color--brand-secondary);
	border-radius: 4px;
	padding: var(--wp--preset--spacing--tiny) var(--wp--preset--spacing--xs);
	line-height: 0;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--wp--preset--color--brand-primary);
	font-size: var(--wp--preset--font-size--xxs);
	text-decoration: none;
	letter-spacing: 0.04em;
}

.woo-filter-active__filter__remove img {
	filter: brightness(0) saturate(100%) invert(14%) sepia(37%) saturate(2782%) hue-rotate(210deg) brightness(95%)
		contrast(102%);
}

.woo-filter-active__filter__remove {
	padding: 0;
}

/* Filter attributes
========================================================================== */

/* Filter checkbox
========================================================================== */

/* Filter range slider
========================================================================== */

.wc-block-components-price-slider__range-input-progress {
	background: var(--wp--preset--color--brand-primary);
}

.wc-block-price-filter__range-input::-webkit-slider-thumb,
.wc-block-price-filter__range-input::-webkit-slider-thumb:hover {
	background: var(--wp--preset--color--brand-primary);
}

.wc-block-price-filter__range-input::-moz-range-thumb,
.wc-block-price-filter__range-input::-moz-range-thumb:hover {
	background: var(--wp--preset--color--brand-primary);
}

.wc-block-components-price-slider__controls .wc-block-components-price-slider__amount {
	border-radius: 4px !important;
}

/* Filter color picker
========================================================================== */

/* Filter dropdown
========================================================================== */

/* ==========================================================================
Page: Product brands
========================================================================== */

/* ==========================================================================
Shop loop
========================================================================== */

/* Layout 
========================================================================== */

.wc-block-product-template.is-flex-container,
.products {
	grid-gap: calc(1.5 * var(--wp--style--block-gap)) var(--wp--style--block-gap);
}

.wc-block-product-template.is-flex-container > li {
	padding: 0;
}

@media (max-width: 510px) {
	.wc-block-product-template.is-flex-container,
	.products {
		grid-gap: var(--wp--style--block-gap);
	}
}

/* Pagination
========================================================================== */

.pagination .page-numbers,
.wp-block-query-pagination .page-numbers {
	border-radius: 4px;
	background-color: transparent;
	border-color: currentColor;
	color: var(--wp--preset--color--brand-primary);
}

:is(.wp-block-query-pagination, .pagination) .page-numbers.current,
:is(.wp-block-query-pagination, .pagination) .page-numbers:hover {
	background-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--white);
}

.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next,
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
	background-color: var(--wp--preset--color--brand-primary);
	border-radius: 4px;
}

.wp-block-query-pagination .wp-block-query-pagination-previous-arrow:not(.is-arrow-chevron) {
	content: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.5146%208.76945H0.0742188V7.23069H12.5146L6.67114%201.38725L7.76802%200.306274L15.4618%208.00007L7.76802%2015.6939L6.67114%2014.6129L12.5146%208.76945Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
	transform: rotate(180deg);
	filter: invert(1) brightness(100);
	width: 18px;
	height: 16px;
}

span.wp-block-query-pagination-next-arrow::before {
	content: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.5146%208.76945H0.0742188V7.23069H12.5146L6.67114%201.38725L7.76802%200.306274L15.4618%208.00007L7.76802%2015.6939L6.67114%2014.6129L12.5146%208.76945Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
	transform: none;
	filter: invert(1) brightness(100);
	width: 18px;
	height: 16px;
}

.wp-block-query-pagination-previous-arrow:not(.is-arrow-chevron),
.wp-block-query-pagination-next-arrow:not(.is-arrow-chevron) {
	text-align: center;
	scale: 1;
}

/* Orderby & Results count
========================================================================== */

/* Orderby */
select.orderby {
	font-weight: 500;
	color: var(--wp--preset--color--brand-primary);
	font-size: inherit;
}

/* Result count */

/* Category image
========================================================================== */

/* Category description
========================================================================== */

.product-category__description {
	font-size: var(--wp--preset--font-size--m);
}

/* Category buttons – Slider
========================================================================== */

.product-category__buttons {
	gap: 0;
}

/* ==========================================================================
Product card
========================================================================== */

/* Product card - Image
========================================================================== */

li.product .wc-block-components-product-image {
	aspect-ratio: var(--wp--custom--aspect-ratio--portrait);
	border-radius: 6px;
}

li.product .wc-block-components-product-image img,
li.product img {
	aspect-ratio: var(--wp--custom--aspect-ratio--portrait);
	object-fit: cover !important;
}

/* Product card - Name
========================================================================== */

li.product .wp-block-post-title,
li.product .woocommerce-loop-product__title {
	font-weight: 500;
}

/* Product card - Badges
========================================================================== */

li.product .wc-block-grid__product-onsale {
	border-radius: 4px;
}

/* Product card - Price
========================================================================== */

/* Product card - Add to favorites
========================================================================== */

/* ==========================================================================
Single product
========================================================================== */

.is-style-woo-single-product {
	border-bottom: 1px solid var(--wp--preset--color--light-border);
	padding-bottom: var(--wp--preset--spacing--xxl);
	margin-bottom: var(--wp--preset--spacing--xxl);
}

/* Single product - Article number
========================================================================== */

/* Single product - Stock status
========================================================================== */

/* Single product - Price
========================================================================== */

/* Single product - Excerpt
========================================================================== */

/* Single product - Quantity buttons
========================================================================== */

/* Single product - Article number & variations
========================================================================== */

/* Variation description, price */

/* Single product - Grouped product
========================================================================== */

/* Single product - Add to favorites
========================================================================== */

/* Single product - Add to cart
========================================================================== */

/* Single product - Featured image (no gallery)
========================================================================== */

/* Single product - Image gallery
========================================================================== */

div[data-product-gallery] {
	display: grid;
	grid-template-columns: 15% 85%;
	gap: 1rem;
}

.product-gallery__img {
	padding: 0 !important;
	aspect-ratio: var(--wp--custom--aspect-ratio--portrait);
	border-radius: 6px;div[data-product-gallery]}

.product-gallery__img img {
	object-fit: cover;
}

.product-gallery .splide__arrow::before {
	filter: invert(1) brightness(100);
	width: 18px;
	height: 16px;
	content: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.5146%208.76945H0.0742188V7.23069H12.5146L6.67114%201.38725L7.76802%200.306274L15.4618%208.00007L7.76802%2015.6939L6.67114%2014.6129L12.5146%208.76945Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E);
}

.product-gallery .splide__arrow--prev::before {
	transform: rotate(180deg);
}

.product-gallery .splide__arrow svg {
	display: none;
}

@media (min-width: 511px) {
	.product-gallery .splide__track--nav > .splide__list > .splide__slide {
		opacity: 0.35;
		border: 0;
		width: 100% !important;
		margin: 0;
		margin-bottom: var(--wp--preset--spacing--s);
	}
	
	.single-product #product-gallery {
		grid-column: 1;
		grid-area: 1;
	}
	

	.single-product #product-image {
		grid-column: 2;
		margin-bottom: 0;
	}

	.single-product #product-gallery-list {
		flex-direction: column;
	}

	.product-gallery .splide__arrows {
		display: none;
	}	
}

@media (max-width: 510px) { 
	div[data-product-gallery] {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Single product - Product accordions
========================================================================== */

/* Accordion heading */

/* Accordion icon */

/* Accordion content */

/* Accordion type - Table */

/* Accordion type - List of links */

/* Single product - Product tabs
========================================================================== */

/* Single product - Product USPs
========================================================================== */

ul.product-usps {
	margin: 0;
	background-color: var(--wp--preset--color--accent-1);
	padding: var(--wp--preset--spacing--s);
	border-radius: 4px;
	margin-bottom: var(--wp--preset--spacing--m);
	font-size: var(--wp--preset--font-size--xs);
}

ul.product-usps li {
	position: relative;
	padding-left: 1.75em;
}

ul.product-usps li:last-of-type {
	margin-bottom: 0;
}

ul.product-usps li::before {
	content: url("../../images/check.svg");
	position: absolute;
	left: 0;
	width: 1em;
	height: 1em;
	filter: brightness(0) saturate(100%) invert(12%) sepia(18%) saturate(7250%) hue-rotate(216deg) brightness(97%)
		contrast(99%);
}

/* Single product - Product message
========================================================================== */

.product-message {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--xxs);
	font-size: var(--wp--preset--font-size--xs);
	background-color: var(--wp--preset--color--accent-1);
	padding: var(--wp--preset--spacing--s);
	border-radius: 4px;
	margin-bottom: var(--wp--preset--spacing--l);
}

.product-message__icon {
	line-height: 0;
}

.product-message__icon svg {
	filter: brightness(0) saturate(100%) invert(12%) sepia(18%) saturate(7250%) hue-rotate(216deg) brightness(97%)
		contrast(99%);
}

.product-message p {
	margin-bottom: 0;
}

/* Single product - Shop USPs
========================================================================== */

ul.is-style-woo-shop-usps {
	/* list-style: none !important; */
	/* margin: 0; */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 var(--wp--style--block-gap);
	font-size: var(--wp--preset--font-size--xs);
}

ul.is-style-woo-shop-usps li {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xxs);
}

ul.is-style-woo-shop-usps li img {
	filter: brightness(0) saturate(100%) invert(12%) sepia(18%) saturate(7250%) hue-rotate(216deg) brightness(97%)
		contrast(99%);
}

ul.is-style-woo-shop-usps li:last-child img {
    filter: none;
}

/* ==========================================================================
Checkout
========================================================================== */

/* Checkout - Notice message
========================================================================== */

/* Checkout - Submit order
========================================================================== */

.wp-block-woocommerce-checkout-actions-block
	.wc-block-checkout__actions_row
	.wc-block-components-checkout-place-order-button {
	background-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--white);
}

.wc-block-components-address-card address .wc-block-components-address-card__address-section:first-child {
	font-weight: 500;
	color: var(--wp--preset--color--brand-primary);
}

/* Checkout - Sidebar
========================================================================== */

.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
	background-color: var(--wp--preset--color--brand-secondary);
	color: var(--wp--preset--color--brand-primary);
	font-weight: 500;
}

.wc-block-checkout__sidebar .wc-block-components-product-name {
	font-weight: 500;
	color: var(--wp--preset--color--brand-primary);
}

.wc-block-components-order-summary-item__image img {
	border-radius: 4px;
	border: 0;
	aspect-ratio: var(--wp--custom--aspect-ratio--portrait);
	object-fit: cover;
}

/* Checkout - Coupon field
========================================================================== */

/* Checkout - Order confirmation
========================================================================== */

/* ==========================================================================
Cart
========================================================================== */

/* Cart - Table layout
========================================================================== */

/* Table head */

/* Cart - Product image
========================================================================== */

.wc-block-cart-item__image img {
	aspect-ratio: var(--wp--custom--aspect-ratio--portrait);
	object-fit: cover;
	border-radius: 4px;
}

/* Cart - Product name
========================================================================== */

a.wc-block-components-product-name {
	font-weight: 500;
	color: var(--wp--preset--color--brand-primary);
	font-size: var(--wp--preset--font-size--m);
}

/* Cart - Product price
========================================================================== */

/* Cart - Product meta data
========================================================================== */

/* Cart - Sales badge
========================================================================== */

/* Cart - Remove product from cart
========================================================================== */

/* Cart - Product totals
========================================================================== */

/* Cart - Quantity button
========================================================================== */

.wc-block-components-quantity-selector:after {
	border-radius: 4px;
}

.wc-block-cart .wc-block-cart__submit-container .wc-block-cart__submit-button {
	background-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--white);
	margin-top: var(--wp--preset--spacing--m);
}

/* Empty cart
========================================================================== */

/* ==========================================================================
Mini cart
========================================================================== */

.wc-block-cart-item__wrap .wc-block-components-product-details:last-of-type {
	list-style: none !important;
}

.wc-block-mini-cart__footer-actions .wc-block-components-button.wc-block-mini-cart__footer-cart {
	background-color: transparent !important;
	color: var(--wp--preset--color--brand-primary) !important;
}

/* Mini cart icon */
.wc-block-mini-cart__badge {
	background-color: var(--wp--preset--color--brand-secondary);
	color: var(--wp--preset--color--brand-primary);
}

/* Mini cart - Empty cart */

/* Mini cart - Footer */
.wc-block-mini-cart__footer .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal {
	margin-bottom: var(--wp--preset--spacing--m);
}

/* mini cart - Cart button */
.wc-block-components-button.wp-block-woocommerce-mini-cart-cart-button-block {
	background-color: transparent !important;
	color: var(--wp--preset--color--brand-primary);
	border: 1px solid currentColor;
}

/* Mini cart - Checkout button */
.wc-block-components-button.wp-block-woocommerce-mini-cart-checkout-button-block {
	background-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--white);
}

/* ==========================================================================
My account
========================================================================== */

/* My account – Login form
========================================================================== */

.woocommerce-account:has(.is-style-woo-login-form) {
	background-color: var(--wp--preset--color--white);
}

.woocommerce-account:has(.is-style-woo-login-form) .is-style-woo-login-form .qt-container {
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--light-border);
}

/* My account – Layout
========================================================================== */

.woocommerce-MyAccount-content legend {
	font-weight: 500;
	margin-bottom: var(--wp--preset--spacing--s);
	font-size: var(--wp--preset--font-size--l);
	color: var(--wp--preset--color--brand-primary);
}

/* My account – Sidebar
========================================================================== */

.woocommerce-MyAccount-navigation ul li {
	border-color: var(--wp--preset--color--light-border);
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li:hover a {
	background-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--white);
}

/* My account – Customer orders
========================================================================== */

/* My account – Customer account details
========================================================================== */

/* ==========================================================================
Styles for pages, sections, blocks and others.
========================================================================== */

/* Block: Product category selector
========================================================================== */

/* Block: Product selector slider
========================================================================== */

.product-selector-slider .qt-container {
	left: 0;
}

.product-selector-slider .product-slider {
	left: 0;
	width: 100%;
}

.product-selector-slider__buttons .wp-block-button__link[data-selected] {
	background-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--white);
}

.product-selector-slider__heading {
	gap: var(--wp--preset--spacing--s);
}

.product-selector-slider__buttons {
	overflow-x: auto;
}

/* Section: Additional content
========================================================================== */

.archive .qt-section[class*="additional-content__"] {
	border-top: 1px solid var(--wp--preset--color--light-border);
	padding-top: var(--wp--preset--spacing--xxl);
}

.archive .qt-section[class*="additional-content__"] ~ .qt-section[class*="additional-content__"] {
	border-top: none;
	padding-top: 0;
}

.qt-section[class*="additional-content__"] ul {
	list-style: inherit;
}
.qt-section[class*="additional-content__"] ol {
	list-style: auto;
}

/* Link list */
ul.link-list {
	margin-top: var(--wp--preset--spacing--l);
}

ul.link-list li:first-of-type {
	border-top: 1px solid var(--wp--preset--color--light-border);
}

ul.link-list li {
	border-bottom: 1px solid var(--wp--preset--color--light-border);
}

ul.link-list li a {
	text-decoration: none;
	font-weight: 500;
	color: var(--wp--preset--color--brand-primary);
	display: flex;
	flex-direction: row;
	gap: var(--wp--preset--spacing--xxs);
	opacity: 1;
}

ul.link-list li a:hover {
	text-decoration: underline;
}

ul.link-list li a::after {
	content: url("../../images/open-in-new.svg");
	display: flex;
	align-items: center;
	line-height: 0;
	filter: brightness(0) saturate(100%) invert(12%) sepia(18%) saturate(7250%) hue-rotate(216deg) brightness(97%)
		contrast(99%);
}

/* Product details */
p ~ .details {
	margin-top: calc(2 * var(--wp--style--block-gap));
}

.details .detail-item {
	display: grid;
	grid-template-columns: 2fr 4fr;
	grid-gap: var(--wp--style--block-gap);
}

.details .detail-item:first-of-type {
	border-top: 1px solid var(--wp--preset--color--light-border);
}

.details .detail-item {
	border-bottom: 1px solid var(--wp--preset--color--light-border);
	padding: var(--wp--preset--spacing--xs) 0;
	margin: 0;
}

.details .detail-item .detail-label {
	font-weight: 500;
	color: var(--wp--preset--color--brand-primary);
}

.details .detail-item .detail-value {
	font-size: var(--wp--preset--font-size--xs);
}

@media (max-width: 670px) {
	p ~ .details {
		margin-top: calc(1.5 * var(--wp--style--block-gap)) !important;
	}
}

@media (max-width: 510px) {
	.details .detail-item {
		grid-template-columns: 1fr;
		grid-gap: 0;
	}
}

/* Button - Back to previous
========================================================================== */

.button__back-to-prev .wp-block-button__link {
	width: 40px;
	height: 40px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.button__back-to-prev .wp-block-button__link svg {
	display: none;
}

.button__back-to-prev .wp-block-button__link::before {
	content: url(data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.5146%208.76945H0.0742188V7.23069H12.5146L6.67114%201.38725L7.76802%200.306274L15.4618%208.00007L7.76802%2015.6939L6.67114%2014.6129L12.5146%208.76945Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E);
	transform: rotate(180deg);
	filter: invert(1) brightness(100);
}

/* Overlay icons
========================================================================== */
.qt-overlay-icons {
	display: inline-flex;
	gap: 6px;
	padding: 12px;
	position: absolute;
	top: 0;
}

li.product .wc-block-components-product-image img.qt-overlay-icon, li.product img.qt-overlay-icon {
	width: 60px;
	height: 60px;
	border: none;
	transform: none;
}

/* Overlay icons single product
========================================================================== */
.single-product .splide__slide.product-gallery__img.product-gallery__main.is-active.is-visible {
	position: relative;
}

.qt-overlay-icons-single {
	position: absolute;
	display: flex;
	gap: 6px;
	padding: 1.25rem;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.qt-overlay-icons-single img.qt-overlay-icon {
	width: 70px;
	height: 70px;
	border: none;
	transform: none;
}