/*
 * WooCommerce in de stijl van de homepage: Mijn account, Winkelwagen, Winkel en
 * Afrekenen. Gebruikt dezelfde kleuren/lettertype-variabelen als assets/css/site.css
 * (geladen op dezelfde pagina's, dus de --esh-* variabelen uit site.css zijn hier ook
 * gewoon beschikbaar).
 *
 * WooCommerce gebruikt op deze site 2 verschillende systemen door elkaar:
 * - "Klassieke" templates (gewone HTML/CSS classes) voor Mijn account en de Winkel-lijst.
 * - "Block" templates (nieuwere React-blokken, classes beginnen met wc-block-...) voor
 *   Winkelwagen en Afrekenen, en voor het "Nieuw in de winkel" blok op een lege winkelwagen.
 * Deze stylesheet dekt dus allebei.
 */

/* ===== Algemeen: lettertype, kleuren, kopjes ===== */

.woocommerce,
.woocommerce-page,
.wc-block-cart,
.wc-block-checkout,
.wc-block-grid {
	font-family: 'Montserrat', sans-serif;
	color: var(--esh-ink);
}

.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.wc-block-cart h1,
.wc-block-cart h2,
.wc-block-checkout h1,
.wc-block-checkout h2,
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-order-summary__title,
.wc-block-cart__totals-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: var(--esh-ink);
}

.page-header .entry-title {
	font-weight: 700;
}

.woocommerce a,
.woocommerce a:visited,
.wc-block-cart a:not(.wc-block-components-button),
.wc-block-cart a:visited:not(.wc-block-components-button),
.wc-block-checkout a:not(.wc-block-components-button),
.wc-block-checkout a:visited:not(.wc-block-components-button),
.wp-block-woocommerce-empty-cart-block a {
	color: var(--esh-accent-dark);
}

.woocommerce a:hover,
.wc-block-cart a:not(.wc-block-components-button):hover,
.wc-block-checkout a:not(.wc-block-components-button):hover,
.wp-block-woocommerce-empty-cart-block a:hover {
	color: var(--esh-accent);
}

/* De "Nieuw in de winkel"-upsell die WooCommerce standaard onder een lege winkelwagen
   toont. Met in totaal maar 3 producten in de winkel heeft die suggestielijst geen zin
   (die 3 staan toch al in de winkel zelf) - verbergen dus, de "leeg"-melding met de link
   terug naar de winkel blijft gewoon staan. */
.wp-block-woocommerce-empty-cart-block hr.wp-block-separator,
.wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title),
.wp-block-woocommerce-empty-cart-block [data-block-name="woocommerce/product-new"] {
	display: none;
}

/* Het thema zelf zet geen ruimte boven/onder de inhoud van deze 4 pagina's (Mijn account,
   Winkelwagen, Winkel, Afrekenen) - zonder deze regel plakt alles direct tegen de header en
   de footer aan. Dit bestand laadt sowieso alleen op die pagina's (zie functions.php), dus
   een gewone selector zonder extra scoping is hier veilig. */
.site-main {
	padding-top: 48px;
	padding-bottom: 72px;
}

.woocommerce-breadcrumb {
	color: var(--esh-muted);
	font-size: 14px;
	margin-bottom: 24px;
}

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

/* ===== Knoppen (klassiek + blocks) ===== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.wc-block-components-button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-block-grid__product .wp-block-button__link {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	border-radius: 5px !important;
	border: none !important;
	background: var(--esh-accent) !important;
	color: #ffffff !important;
	padding: 11px 22px;
	box-shadow: none;
	text-transform: none;
	text-decoration: none !important;
	transition: background 0.15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-grid__product .wp-block-button__link:hover {
	background: var(--esh-accent-dark) !important;
	color: #ffffff !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	background: var(--esh-amber) !important;
	color: #241a02 !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover {
	background: var(--esh-amber-dark) !important;
	color: #241a02 !important;
}

.woocommerce a.button.loading,
.woocommerce button.button.loading {
	opacity: 0.6;
}

/* Knoppen die bewust "leeg"/secundair moeten ogen, zoals de -/+ stappers en het
   prullenbak-icoon bij winkelwagenregels. */
.wc-block-components-quantity-selector__button,
.wc-block-cart-item__remove-link {
	background: transparent !important;
	color: var(--esh-muted) !important;
	box-shadow: none;
	border: none !important;
	text-decoration: none !important;
}

.wc-block-components-quantity-selector__button:hover,
.wc-block-cart-item__remove-link:hover {
	color: var(--esh-ink) !important;
}

/* ===== Formuliervelden (klassiek + blocks, incl. select2) ===== */

.woocommerce form .input-text,
.woocommerce form textarea,
.woocommerce form select,
.select2-container .select2-selection--single,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-blocks-components-select__select {
	font-family: 'Montserrat', sans-serif;
	border: 1px solid var(--esh-line) !important;
	border-radius: 5px !important;
	background: #ffffff;
	color: var(--esh-ink);
	box-shadow: none !important;
	padding: 11px 14px;
	height: auto;
}

.woocommerce form .input-text:focus,
.woocommerce form textarea:focus,
.woocommerce form select:focus,
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
	border-color: var(--esh-accent) !important;
	outline: none;
}

/* De blocks-velden tekenen hun eigen rand/label als een "zwevend label"-doosje; dit
   houdt die lijn consistent met onze eigen --esh-line kleur in plaats van het WP-blauw. */
.wc-block-components-text-input::after,
.wc-block-components-text-input.is-active::after {
	border-color: var(--esh-line) !important;
}

.wc-block-components-text-input.is-active::after,
.wc-block-components-text-input:focus-within::after {
	border-color: var(--esh-accent) !important;
	box-shadow: inset 0 0 0 1px var(--esh-accent) !important;
}

.woocommerce form label {
	color: var(--esh-ink);
	font-weight: 600;
	font-size: 14px;
}

.woocommerce-checkbox,
.wc-block-components-checkbox__mark {
	accent-color: var(--esh-accent);
}

/* ===== Meldingen (klassiek + blocks) ===== */

.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--esh-accent) !important;
	background: var(--esh-panel-alt);
	color: var(--esh-ink);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--esh-accent);
}

.woocommerce-error {
	border-top-color: #e4572e !important;
	background: #fdf1ed;
	color: var(--esh-ink);
}

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
	background: var(--esh-ink) !important;
	color: #ffffff !important;
}

.wc-block-components-notice-banner {
	border-radius: 8px;
	font-family: 'Montserrat', sans-serif;
}

.wc-block-components-notice-banner.is-info {
	background: var(--esh-panel-alt);
	border-left-color: var(--esh-accent);
}

/* ===== Prijzen en aanbiedingslabels ===== */

.price ins,
.wc-block-components-product-price__value,
.wc-block-components-totals-item__value {
	color: var(--esh-ink);
	font-weight: 700;
	text-decoration: none;
}

.price del,
.wc-block-components-product-price__regular {
	color: var(--esh-muted);
	opacity: 1;
}

.onsale,
.wc-block-grid__product-onsale,
.wc-block-components-sale-badge {
	background: var(--esh-amber) !important;
	color: #241a02 !important;
	font-weight: 800;
	font-family: 'Montserrat', sans-serif;
	box-shadow: none;
	border-radius: 999px;
}

/* ===== Winkel: productoverzicht (klassieke ul.products én de block-grid variant) ===== */

ul.products li.product,
.wc-block-grid__product {
	background: #ffffff;
	border: 1px solid var(--esh-line);
	border-radius: 14px;
	padding: 20px;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

ul.products li.product:hover,
.wc-block-grid__product:hover {
	box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
	transform: translateY(-2px);
}

ul.products li.product a.woocommerce-LoopProduct-link,
.wc-block-grid__product-link {
	color: var(--esh-ink);
}

ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
	color: var(--esh-ink);
	font-weight: 700;
	font-size: 17px;
	margin: 12px 0 6px;
}

ul.products li.product .price,
.wc-block-grid__product-price {
	font-size: 16px;
}

ul.products li.product .button,
.wc-block-grid__product .add_to_cart_button {
	margin-top: 14px;
	width: 100%;
	text-align: center;
}

.woocommerce-ordering select,
.woocommerce-result-count {
	font-family: 'Montserrat', sans-serif;
	color: var(--esh-muted);
}

.woocommerce-pagination .page-numbers {
	font-family: 'Montserrat', sans-serif;
	border-radius: 5px !important;
	border-color: var(--esh-line) !important;
	color: var(--esh-ink) !important;
}

.woocommerce-pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers.current {
	background: var(--esh-accent) !important;
	border-color: var(--esh-accent) !important;
	color: #ffffff !important;
}

/* ===== Mijn account: eigen Dashboard-inhoud ===== */

.esh-dashboard-welcome {
	font-size: 16px;
	margin: 0 0 24px;
}

.esh-dashboard-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	background: var(--esh-panel-alt);
	border: 1px solid var(--esh-line);
	border-radius: 14px;
	padding: 24px;
	margin-bottom: 28px;
}

.esh-dashboard-cta h3 {
	margin: 0 0 4px;
	font-size: 17px;
}

.esh-dashboard-cta p {
	margin: 0;
	color: var(--esh-muted);
	font-size: 14.5px;
}

.esh-dashboard-links {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.esh-dashboard-link-card {
	display: block;
	background: #ffffff;
	border: 1px solid var(--esh-line);
	border-radius: 10px;
	padding: 16px 18px;
	text-decoration: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.esh-dashboard-link-card:hover {
	border-color: var(--esh-accent);
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.esh-dashboard-link-card span {
	display: block;
	font-weight: 700;
	color: var(--esh-ink);
	font-size: 14.5px;
	margin-bottom: 2px;
}

.esh-dashboard-link-card small {
	display: block;
	color: var(--esh-muted);
	font-size: 12.5px;
}

@media (max-width: 860px) {
	.esh-dashboard-links {
		grid-template-columns: 1fr;
	}
}

/* ===== Mijn account ===== */

.woocommerce-MyAccount-navigation {
	background: var(--esh-panel-alt);
	border: 1px solid var(--esh-line);
	border-radius: 14px;
	padding: 10px;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 11px 14px;
	border-radius: 8px;
	color: var(--esh-ink);
	font-weight: 600;
	font-size: 14.5px;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li a:hover {
	background: #ffffff;
	color: var(--esh-accent-dark);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--esh-ink);
	color: #ffffff;
}

.woocommerce-MyAccount-content {
	background: #ffffff;
	border: 1px solid var(--esh-line);
	border-radius: 14px;
	padding: 28px;
}

.woocommerce-form-login,
.woocommerce-form-register {
	background: #ffffff;
	border: 1px solid var(--esh-line);
	border-radius: 14px;
	padding: 28px;
	max-width: 480px;
	margin: 0 auto;
	text-align: left;
}

/* De hele inlogpagina (Mijn account, uitgelogd): logo + "Login"-kopje + het inlogformulier
   gecentreerd, met daaronder een linkje naar de prijzen voor wie nog geen account heeft.
   Deze wikkelt om alles heen via 2 hooks die WooCommerce altijd rondom het inlogformulier
   afvuurt (zie functions.php), dus dit werkt ook als "Registreren" ooit aan zou staan. */
.esh-login-wrap {
	max-width: 480px;
	margin: 0 auto;
	padding-bottom: 8px;
	text-align: center;
}

.esh-login-logo {
	display: inline-flex;
	margin-bottom: 24px;
	text-decoration: none !important;
}

.esh-login-logo img {
	display: block;
	height: 44px;
	width: auto;
}

.esh-login-logo-text {
	font-family: 'Montserrat', sans-serif;
	font-size: 22px;
	font-weight: 800;
	color: var(--esh-ink);
}

.esh-login-wrap > h2 {
	margin-bottom: 20px;
}

.esh-login-cta {
	margin: 24px 0 0;
	font-size: 14.5px;
	color: var(--esh-muted);
}

.woocommerce-MyAccount-content table.shop_table,
.woocommerce-orders-table {
	border: 1px solid var(--esh-line);
	border-radius: 10px;
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-orders-table th {
	background: var(--esh-panel-alt);
	color: var(--esh-ink);
	font-weight: 700;
	font-size: 13.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td,
.woocommerce-orders-table th,
.woocommerce-orders-table td {
	border-color: var(--esh-line);
	padding: 12px 14px;
}

.woocommerce-MyAccount-content mark.order-status {
	background: none;
	color: var(--esh-accent-dark);
	font-weight: 700;
}

/* "Bekijken" en "Factuur" bij Bestellingen (Mijn account > Bestellingen): gewone
   onderstreepte linkjes onder elkaar, in plaats van knoppen die tegen elkaar aan zaten.
   WooCommerce geeft deze linkjes zelf ook de class "button" mee (zie orders.php), dus
   zonder deze override zouden ze de blauwe knopstijl uit "Knoppen (klassiek + blocks)"
   hierboven krijgen. */
.woocommerce-orders-table__cell-order-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	white-space: normal;
}

.woocommerce-orders-table__cell-order-actions a,
.woocommerce-orders-table__cell-order-actions a.button {
	display: inline;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	color: var(--esh-accent-dark) !important;
	font-weight: 600;
	font-size: 14.5px;
	text-decoration: underline !important;
}

.woocommerce-orders-table__cell-order-actions a:hover,
.woocommerce-orders-table__cell-order-actions a.button:hover {
	background: none !important;
	color: var(--esh-accent) !important;
}

/* ===== Winkelwagen (block) ===== */

.wc-block-components-sidebar-layout.wc-block-cart {
	gap: 32px;
}

.wc-block-cart-items {
	border: none;
}

.wc-block-cart-items__header th {
	color: var(--esh-muted);
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
	border-bottom: 1px solid var(--esh-line);
}

.wc-block-cart-items__row {
	border-bottom: 1px solid var(--esh-line);
}

.wc-block-cart-item__image img {
	border-radius: 8px;
	border: 1px solid var(--esh-line);
}

.wc-block-components-product-name {
	color: var(--esh-ink);
	font-weight: 700;
}

.wc-block-components-quantity-selector {
	border: 1px solid var(--esh-line);
	border-radius: 5px;
}

.wc-block-components-quantity-selector__input {
	font-family: 'Montserrat', sans-serif;
	color: var(--esh-ink);
}

.wc-block-components-sidebar.wc-block-cart__sidebar,
.wc-block-components-sidebar.wc-block-checkout__sidebar {
	background: var(--esh-panel-alt);
	border: 1px solid var(--esh-line);
	border-radius: 14px;
	padding: 24px;
}

.wc-block-components-totals-item {
	border-top: 1px solid var(--esh-line);
}

.wc-block-components-panel__button {
	color: var(--esh-accent-dark);
	font-weight: 600;
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	width: 100%;
	text-align: center;
	padding: 14px 22px;
	font-size: 15.5px;
}

/* ===== Afrekenen (block) ===== */

.wc-block-checkout__main {
	gap: 8px;
}

.wc-block-components-checkout-step {
	border-top: 1px solid var(--esh-line);
	padding-top: 24px;
	margin-top: 24px;
}

.wc-block-components-checkout-step:first-child {
	border-top: none;
	margin-top: 0;
	padding-top: 0;
}

.wc-block-components-checkout-step__heading-content .wc-block-components-checkout-step__title {
	font-size: 19px;
}

.wc-block-components-address-card {
	border: 1px solid var(--esh-line);
	border-radius: 10px;
	background: #ffffff;
}

.wc-block-components-address-card__edit {
	color: var(--esh-accent-dark);
}

.wc-block-components-order-summary-item__image img {
	border-radius: 8px;
	border: 1px solid var(--esh-line);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 17px;
	font-weight: 800;
	color: var(--esh-ink);
}

.wc-block-checkout__terms {
	color: var(--esh-muted);
	font-size: 13.5px;
}

.wc-block-components-payment-method-label {
	font-weight: 700;
	color: var(--esh-ink);
}

.wc-block-components-radio-control__input:checked {
	accent-color: var(--esh-accent);
}

.wc-block-components-radio-control-accordion-option.has-children {
	border-color: var(--esh-accent) !important;
}

/* ===== Mobiel ===== */

@media (max-width: 860px) {
	.site-main {
		padding-top: 32px;
		padding-bottom: 48px;
	}
}