/*
 * Webshop-opmaak (WooCommerce) voor het child theme AE Industries.
 * Alleen --ibizz-*-variabelen: kleuren, lettertypes en afrondingen komen uit Website-instellingen.
 */

/* Headerknoppen ------------------------------------------------------------ */

.ae-header-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 2.75rem;
	padding: 0.4rem 0.55rem;
	border-radius: var(--ibizz-radius-button);
	color: var(--ibizz-color-heading);
	font-weight: 600;
	text-decoration: none;
}

.ae-header-link:hover {
	color: var(--ibizz-color-link-hover);
}

.ae-header-link__label {
	display: none;
}

.ae-cart-count {
	position: absolute;
	top: 0.1rem;
	right: -0.1rem;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.3rem;
	border-radius: 999px;
	background: var(--ibizz-color-button-bg);
	color: var(--ibizz-color-button-text);
	font-size: 0.75rem;
	line-height: 1.25rem;
	text-align: center;
}

.ae-header-search {
	display: none;
}

@media (min-width: 1100px) {
	.ae-header-search {
		display: block;
		width: 17rem;
		margin-right: 0.5rem;
	}

	.ae-search--header input[type="search"] {
		min-height: 2.5rem;
		padding-block: 0.35rem;
		font-size: 0.9375rem;
	}

	.ae-header-search .ae-search--header .button {
		display: none;
	}
}

@media (min-width: 1280px) {
	.ae-header-link__label {
		display: inline;
	}

	.ae-cart-count {
		position: static;
	}
}

/* Knoppen en meldingen van WooCommerce ------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce-page button.button,
.ae-search .button,
.ae-quick-order .button,
.ae-request-form .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--ibizz-button-pad-y) var(--ibizz-button-pad-x);
	border: 2px solid var(--ibizz-color-button-bg);
	border-radius: var(--ibizz-radius-button);
	background: var(--ibizz-color-button-bg);
	color: var(--ibizz-color-button-text);
	font-family: inherit;
	font-size: var(--ibizz-button-font-size);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.ae-search .button:hover,
.ae-quick-order .button:hover,
.ae-request-form .button:hover {
	border-color: color-mix(in srgb, var(--ibizz-color-button-bg) 85%, var(--ibizz-color-heading));
	background: color-mix(in srgb, var(--ibizz-color-button-bg) 85%, var(--ibizz-color-heading));
	color: var(--ibizz-color-button-text);
}

.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	opacity: 0.5;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	border-top-color: var(--ibizz-color-accent);
	background: var(--ibizz-color-bg-alt);
	color: var(--ibizz-color-text);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--ibizz-color-heading);
}

.woocommerce-store-notice,
p.demo_store {
	position: relative;
	top: auto;
	margin: 0;
	background: var(--ibizz-color-primary);
	color: var(--ibizz-on-primary);
	font-size: 0.875rem;
}

.admin-bar .woocommerce-store-notice,
.admin-bar p.demo_store {
	top: auto;
}

.woocommerce-store-notice a,
p.demo_store a {
	color: var(--ibizz-on-primary);
}

/* Catalogus ---------------------------------------------------------------- */

.section--shop {
	padding-top: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.woocommerce-breadcrumb {
	margin-bottom: 1rem;
	color: var(--ibizz-muted);
	font-size: 0.875rem;
}

.woocommerce-breadcrumb a {
	color: var(--ibizz-muted);
}

.woocommerce-products-header__title {
	margin-bottom: 1rem;
}

.ae-search--archive {
	max-width: 40rem;
	margin: 0 0 2rem;
}

.woocommerce .woocommerce-result-count {
	color: var(--ibizz-muted);
	font-size: 0.9375rem;
}

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: var(--ibizz-gap, 1.5rem);
	margin: 0 0 2rem;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	margin: 0;
	padding: 1rem;
	border: 1px solid var(--ibizz-color-border);
	border-radius: var(--ibizz-radius-card);
	background: var(--ibizz-color-bg);
}

.woocommerce ul.products li.product a img {
	margin-bottom: 0.9rem;
	border-radius: calc(var(--ibizz-radius-card) / 2);
	background: var(--ibizz-color-bg-alt);
	object-fit: contain;
	aspect-ratio: 4 / 3;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title {
	padding: 0;
	color: var(--ibizz-color-heading);
	font-family: var(--ibizz-font-heading);
	font-size: 1.0625rem;
	line-height: 1.3;
}

.woocommerce ul.products li.product-category .count {
	background: none;
	color: var(--ibizz-muted);
	font-weight: 400;
}

.woocommerce ul.products li.product .price {
	color: var(--ibizz-color-heading);
	font-weight: 600;
}

.woocommerce ul.products li.product .button {
	margin-top: auto;
	align-self: flex-start;
}

.woocommerce ul.products li.product a {
	text-decoration: none;
}

/* Productpagina ------------------------------------------------------------ */

.woocommerce div.product .product_title {
	margin-bottom: 0.75rem;
	font-size: var(--ibizz-h2);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--ibizz-color-heading);
	font-size: 1.375rem;
	font-weight: 700;
}

.woocommerce div.product div.images img {
	border-radius: var(--ibizz-radius-card);
	background: var(--ibizz-color-bg-alt);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border-color: var(--ibizz-color-border);
	background: var(--ibizz-color-bg-alt);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--ibizz-color-bg);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--ibizz-color-heading);
}

.woocommerce .quantity .qty {
	min-height: 2.5rem;
	padding: 0.3rem;
	border: 1px solid var(--ibizz-color-border);
	border-radius: var(--ibizz-radius-button);
}

.product_meta {
	color: var(--ibizz-muted);
	font-size: 0.875rem;
}

/* Winkelwagen, afrekenen, account ------------------------------------------ */

.entry--wide .woocommerce table.shop_table {
	border-color: var(--ibizz-color-border);
	border-radius: var(--ibizz-radius-card);
}

.woocommerce table.shop_table th {
	color: var(--ibizz-color-heading);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--ibizz-color-border);
	border-radius: var(--ibizz-radius-button);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ibizz-color-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--ibizz-color-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.65rem 0;
	color: var(--ibizz-color-heading);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	text-decoration: underline;
	text-decoration-color: var(--ibizz-color-accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.35em;
}

.woocommerce #payment,
.woocommerce-checkout #payment {
	border-radius: var(--ibizz-radius-card);
	background: var(--ibizz-color-bg-alt);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--ibizz-color-bg);
	color: var(--ibizz-color-text);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--ibizz-color-bg);
}