/*! The Cakery theme: de standaardpagina's van WooCommerce in de huisstijl.
 *
 *  Alles hangt onder .ck-wc. Die klasse zet het thema alleen om pagina's die
 *  het zelf tekent: het account, de winkelmand en de kassa zonder Elementor, en
 *  de winkel en een product als er geen template voor is. Een Elementor-pagina
 *  of een Cakery-widget wordt hier dus nooit door geraakt.
 *
 *  Twee keer de klasse, zoals in de widgets: WooCommerce zet zijn eigen regels
 *  met een klasse plus een element ervoor, en zou anders winnen. */

/* ---------- Meldingen ---------- */

.ck-wc.ck-wc .woocommerce-message,
.ck-wc.ck-wc .woocommerce-info,
.ck-wc.ck-wc .woocommerce-error {
	margin: 0 0 24px;
	padding: 16px 18px;
	background: var(--ck-card);
	border: 0;
	box-shadow: inset 0 0 0 1px var(--ck-line);
	color: var(--ck-ink);
	font-size: 14px;
	line-height: 1.6;
	list-style: none;
	clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
}

.ck-wc.ck-wc .woocommerce-message::before,
.ck-wc.ck-wc .woocommerce-info::before,
.ck-wc.ck-wc .woocommerce-error::before { display: none; }

.ck-wc.ck-wc .woocommerce-error { box-shadow: inset 0 0 0 1px rgba(154, 59, 51, .5); }

.ck-wc.ck-wc .woocommerce-error li { list-style: none; }

.ck-wc.ck-wc .woocommerce-message .button,
.ck-wc.ck-wc .woocommerce-info .button { float: right; margin-left: 16px; }

/* ---------- Knoppen ---------- */

.ck-wc.ck-wc :is(a, button, input).button,
.ck-wc.ck-wc #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	background: var(--ck-dark);
	color: var(--ck-cream);
	border: 0;
	border-radius: 0;
	font-family: var(--ck-body);
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: .2em;
	line-height: 1.2;
	text-transform: uppercase;
	clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
	transition: background .35s ease, color .35s ease;
}

.ck-wc.ck-wc :is(a, button, input).button:hover,
.ck-wc.ck-wc #respond input#submit:hover {
	background: var(--ck-dark-hover);
	color: var(--ck-cream);
}

/* De hoofdactie op een pagina: bestellen, afrekenen, toevoegen. Goud, net als
   in de kassa en het winkelmandpaneel. */
.ck-wc.ck-wc :is(a, button, input).button.alt,
.ck-wc.ck-wc .single_add_to_cart_button.button,
.ck-wc.ck-wc .checkout-button.button {
	background: linear-gradient(135deg, var(--ck-gold-light) 0%, var(--ck-gold) 52%, var(--ck-gold-mid) 100%);
	color: var(--ck-dark);
	box-shadow: 0 8px 24px rgba(42, 33, 23, .15);
}

.ck-wc.ck-wc :is(a, button, input).button.alt:hover,
.ck-wc.ck-wc .single_add_to_cart_button.button:hover,
.ck-wc.ck-wc .checkout-button.button:hover {
	background: var(--ck-dark-hover);
	color: var(--ck-cream);
}

/* WooCommerce zet een uitgeschakelde knop op color: inherit, met een selector
   die zwaarder weegt dan onze basisregel. Op de donkere knop wordt de tekst dan
   donker op donker, zoals "Update cart" voordat er iets gewijzigd is. Daarom
   hier de kleur en de opvulling nog een keer. */
.ck-wc.ck-wc :is(a, button, input).button:disabled,
.ck-wc.ck-wc :is(a, button, input).button:disabled[disabled],
.ck-wc.ck-wc :is(a, button, input).button.disabled {
	padding: 0 24px;
	background: var(--ck-dark);
	color: var(--ck-cream);
	opacity: .45;
	cursor: not-allowed;
}

/* ---------- Velden ---------- */

.ck-wc.ck-wc .form-row label {
	display: block;
	margin-bottom: 6px;
	color: var(--ck-ink-soft);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ck-wc.ck-wc .form-row .required { color: var(--ck-gold-deep); text-decoration: none; }

.ck-wc.ck-wc .form-row .input-text,
.ck-wc.ck-wc .form-row select,
.ck-wc.ck-wc .form-row textarea,
.ck-wc.ck-wc .quantity .qty,
.ck-wc.ck-wc #coupon_code {
	height: 50px;
	padding: 12px 15px;
	background: var(--ck-card);
	border: 0;
	border-radius: 0;
	box-shadow: inset 0 0 0 1px var(--ck-line);
	color: var(--ck-ink);
	font-size: 14px;
	font-weight: 300;
	clip-path: polygon(var(--ck-cut) 0, calc(100% - var(--ck-cut)) 0, 100% var(--ck-cut), 100% calc(100% - var(--ck-cut)), calc(100% - var(--ck-cut)) 100%, var(--ck-cut) 100%, 0 calc(100% - var(--ck-cut)), 0 var(--ck-cut));
}

.ck-wc.ck-wc .form-row textarea { height: auto; min-height: 110px; }

.ck-wc.ck-wc .form-row .input-text:focus,
.ck-wc.ck-wc .form-row select:focus,
.ck-wc.ck-wc .form-row textarea:focus,
.ck-wc.ck-wc .quantity .qty:focus,
.ck-wc.ck-wc #coupon_code:focus { box-shadow: inset 0 0 0 1px var(--ck-gold); }

.ck-wc.ck-wc .woocommerce-invalid .input-text,
.ck-wc.ck-wc .woocommerce-invalid select { box-shadow: inset 0 0 0 1px rgba(154, 59, 51, .7); }

.ck-wc.ck-wc .quantity .qty { width: 72px; text-align: center; }

/* ---------- Tabellen: winkelmand, bestellingen, besteloverzicht ---------- */

.ck-wc.ck-wc table.shop_table {
	margin-bottom: 32px;
	background: var(--ck-card);
	border: 0;
	border-radius: 0;
	box-shadow: inset 0 0 0 1px var(--ck-line-soft);
	font-size: 14px;
}

.ck-wc.ck-wc table.shop_table th {
	color: var(--ck-ink-soft);
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.ck-wc.ck-wc table.shop_table th,
.ck-wc.ck-wc table.shop_table td {
	padding: 16px 18px;
	border: 0;
	border-top: 1px solid var(--ck-line-soft);
}

.ck-wc.ck-wc table.shop_table thead th { border-top: 0; }

.ck-wc.ck-wc table.shop_table img {
	width: 64px;
	clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}

.ck-wc.ck-wc table.shop_table a.remove {
	color: var(--ck-ink-soft) !important;
	font-weight: 300;
}

.ck-wc.ck-wc table.shop_table a.remove:hover {
	background: var(--ck-bad);
	color: var(--ck-cream) !important;
}

.ck-wc.ck-wc .cart_totals h2,
.ck-wc.ck-wc .cross-sells h2,
.ck-wc.ck-wc .woocommerce-order-details__title,
.ck-wc.ck-wc .woocommerce-column__title,
.ck-wc.ck-wc .woocommerce-MyAccount-content h2,
.ck-wc.ck-wc .woocommerce-MyAccount-content h3,
.ck-wc.ck-wc .woocommerce-form-login + h2,
.ck-wc.ck-wc .u-column1 h2,
.ck-wc.ck-wc .u-column2 h2 {
	font-family: var(--ck-display);
	font-size: 28px;
	font-weight: 400;
}

.ck-wc.ck-wc .cart_totals .order-total th,
.ck-wc.ck-wc .cart_totals .order-total td { color: var(--ck-ink); font-size: 16px; }

/* ---------- Mijn account ---------- */

.ck-wc.ck-wc .woocommerce-MyAccount-navigation ul {
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ck-line-soft);
}

.ck-wc.ck-wc .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 13px 0;
	border-bottom: 1px solid var(--ck-line-soft);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.ck-wc.ck-wc .woocommerce-MyAccount-navigation a:hover,
.ck-wc.ck-wc .woocommerce-MyAccount-navigation .is-active a { color: var(--ck-gold-deep); }

.ck-wc.ck-wc .woocommerce-MyAccount-content a:not(.button),
.ck-wc.ck-wc .woocommerce-form-login a,
.ck-wc.ck-wc .woocommerce-privacy-policy-text a {
	color: var(--ck-gold-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ck-wc.ck-wc .woocommerce-form-login,
.ck-wc.ck-wc .woocommerce-form-register,
.ck-wc.ck-wc .woocommerce-ResetPassword {
	padding: 28px;
	background: var(--ck-card);
	border: 0;
	border-radius: 0;
	box-shadow: inset 0 0 0 1px var(--ck-line-soft);
}

/* ---------- Winkel en product, als er geen Elementor-template is ---------- */

.ck-wc.ck-wc .woocommerce-products-header__title,
.ck-wc.ck-wc .page-title,
.ck-wc.ck-wc .product_title {
	margin-bottom: 18px;
	font-family: var(--ck-display);
	font-size: clamp(36px, 6vw, 56px);
	font-weight: 400;
	line-height: 1.05;
}

.ck-wc.ck-wc ul.products li.product a img {
	margin-bottom: 14px;
	clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}

.ck-wc.ck-wc ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	font-family: var(--ck-display);
	font-size: 22px;
	font-weight: 400;
}

.ck-wc.ck-wc .price,
.ck-wc.ck-wc ul.products li.product .price {
	color: var(--ck-gold-deep);
	font-size: 15px;
	font-weight: 400;
}

.ck-wc.ck-wc div.product p.price,
.ck-wc.ck-wc div.product span.price {
	color: var(--ck-gold-deep);
	font-size: 20px;
	font-weight: 400;
}

/* WooCommerce zet de knop in de productlijst op inline-block; dan staat de tekst
   boven in een knop met een minimale hoogte in plaats van in het midden. */
.ck-wc.ck-wc ul.products li.product .button {
	display: inline-flex;
	margin-top: 12px;
}

.ck-wc.ck-wc .price del { color: var(--ck-ink-soft); opacity: .7; }

.ck-wc.ck-wc .price ins { text-decoration: none; }

.ck-wc.ck-wc span.onsale {
	min-width: 0;
	min-height: 0;
	padding: 4px 10px;
	background: var(--ck-gold);
	border-radius: 0;
	color: var(--ck-dark);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .14em;
	line-height: 1.6;
	text-transform: uppercase;
}

/* De tabs onder een product. WooCommerce schrijft ze met div.product ervoor;
   dat moet hier dus ook, anders weegt hun grijze tabblad zwaarder. */
.ck-wc.ck-wc div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 28px;
	margin-bottom: 28px;
	padding: 0;
}

.ck-wc.ck-wc div.product .woocommerce-tabs ul.tabs::before { border-color: var(--ck-line-soft); }

.ck-wc.ck-wc div.product .woocommerce-tabs ul.tabs li,
.ck-wc.ck-wc div.product .woocommerce-tabs ul.tabs li.active {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.ck-wc.ck-wc div.product .woocommerce-tabs ul.tabs li::before,
.ck-wc.ck-wc div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.ck-wc.ck-wc div.product .woocommerce-tabs ul.tabs li a {
	padding: 10px 0;
	color: var(--ck-ink-soft);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.ck-wc.ck-wc div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--ck-ink);
	box-shadow: inset 0 -2px 0 var(--ck-gold);
}

.ck-wc.ck-wc div.product .woocommerce-tabs .panel h2,
.ck-wc.ck-wc div.product .related > h2,
.ck-wc.ck-wc div.product .upsells > h2 {
	font-family: var(--ck-display);
	font-size: 28px;
	font-weight: 400;
}

.ck-wc.ck-wc .woocommerce-pagination ul.page-numbers,
.ck-wc.ck-wc .woocommerce-pagination ul.page-numbers li { border: 0; }

.ck-wc.ck-wc .woocommerce-pagination ul.page-numbers li .page-numbers {
	min-width: 42px;
	padding: 11px 12px;
	box-shadow: inset 0 0 0 1px var(--ck-line);
}

.ck-wc.ck-wc .woocommerce-pagination ul.page-numbers li span.current {
	background: var(--ck-dark);
	color: var(--ck-cream);
}

@media (max-width: 768px) {
	.ck-wc.ck-wc .woocommerce-message .button,
	.ck-wc.ck-wc .woocommerce-info .button { float: none; display: flex; margin: 12px 0 0; }
}