/**
 * Gedeelde componenten: knoppen, badges, product-card, category-card,
 * problem-card, advies-card, formulierelementen. Eén definitie, hergebruikt
 * op alle templates (homepage, PLP, PDP, cross-sell, zoekresultaten).
 */

/* ---- Buttons ---- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --space-2 );
	min-height: var( --tap-target-min );
	padding: 0.7rem 1.25rem;
	border-radius: var( --radius-md );
	font-weight: 600;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background-color var( --transition-fast ), border-color var( --transition-fast ), color var( --transition-fast );
}
.btn--primary {
	background: var( --brand-primary );
	color: var( --text-on-primary );
}
.btn--primary:hover { background: var( --brand-secondary ); color: var( --text-on-primary ); }
.btn--secondary {
	background: var( --surface );
	color: var( --brand-primary );
	border-color: var( --brand-primary );
}
.btn--secondary:hover { background: var( --surface-alt ); }
.btn--tertiary {
	background: transparent;
	color: var( --text-primary );
	text-decoration: underline;
}
.btn--block { width: 100%; }

/* ---- Badges ---- */
.badge {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: var( --radius-full );
	font-size: 0.75rem;
	font-weight: 700;
	background: var( --brand-accent );
	color: #3a2a00;
}
.badge--sale { background: var( --color-danger-bg ); color: var( --color-danger ); }
.badge--nieuw { background: var( --brand-accent ); }
.badge--bestseller { background: var( --brand-secondary ); color: #fff; }

/* ---- Product card (§34: één component, overal hergebruikt) ---- */
.product-card {
	background: var( --surface );
	border: 1px solid var( --border );
	border-radius: var( --radius-md );
	overflow: hidden;
	transition: box-shadow var( --transition-fast );
}
.product-card:hover { box-shadow: var( --shadow-md ); }
.product-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.product-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var( --surface-alt );
}
.product-card__media img { width: 100%; height: 100%; object-fit: contain; padding: var( --space-3 ); }
.product-card__media .badge { position: absolute; top: var( --space-2 ); left: var( --space-2 ); }
.product-card__body {
	padding: var( --space-3 );
	display: flex;
	flex-direction: column;
	gap: var( --space-1 );
	flex-grow: 1;
}
.product-card__title {
	font-weight: 600;
	font-size: 0.95rem;
	color: var( --text-primary );
}
.product-card__rating { font-size: 0.8rem; color: var( --text-muted ); }
.product-card__price {
	font-weight: 700;
	font-size: 1.05rem;
	margin-top: auto;
}
.product-card__price ins { text-decoration: none; }
.product-card__price del { color: var( --text-muted ); font-size: 0.85em; margin-right: 0.4em; }
.product-card__stock { font-size: 0.8rem; }
.product-card__stock--in-stock { color: var( --color-success ); }
.product-card__stock--low-stock { color: var( --color-warning ); }
.product-card__stock--out-of-stock { color: var( --color-danger ); }

/* ---- Category card ---- */
.category-card__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --space-2 );
	text-align: center;
	color: var( --text-primary );
	text-decoration: none;
	padding: var( --space-3 );
	border-radius: var( --radius-md );
	border: 1px solid var( --border );
	background: var( --surface );
	height: 100%;
}
.category-card__link:hover { border-color: var( --brand-primary ); }
.category-card__link img { aspect-ratio: 1/1; object-fit: cover; border-radius: var( --radius-sm ); width: 100%; }
.category-card__title { font-weight: 600; }

/* ---- Problem card ("Wat wil je oplossen?") ---- */
.problem-card__link {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 5.5rem;
	padding: var( --space-3 );
	border-radius: var( --radius-md );
	background: var( --surface );
	border: 1px solid var( --border );
	color: var( --text-primary );
	text-decoration: none;
	font-weight: 600;
}
.problem-card__link:hover { border-color: var( --brand-primary ); color: var( --brand-primary ); }

/* ---- Advies card ---- */
.advies-card__link {
	display: flex;
	flex-direction: column;
	gap: var( --space-2 );
	color: var( --text-primary );
	text-decoration: none;
	border: 1px solid var( --border );
	border-radius: var( --radius-md );
	overflow: hidden;
	background: var( --surface );
	height: 100%;
}
.advies-card__link img { aspect-ratio: 16/9; object-fit: cover; }
.advies-card__title, .advies-card__excerpt { padding-inline: var( --space-3 ); }
.advies-card__title { font-weight: 700; margin-top: var( --space-2 ); }
.advies-card__excerpt { padding-bottom: var( --space-3 ); color: var( --text-muted ); font-size: 0.9rem; }

/* ---- Specs table / definitielijst (§12, §48) ---- */
.specs-table__group-title { margin-top: var( --space-5 ); }
.specs-table__list { margin: 0; }
.specs-table__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --space-3 );
	padding: var( --space-2 ) 0;
	border-bottom: 1px solid var( --border );
}
.specs-table__label { color: var( --text-muted ); font-weight: 600; margin: 0; }
.specs-table__value { margin: 0; }

/* ---- Compatibiliteitsblok ---- */
.compatibility-block {
	background: var( --surface-alt );
	border-radius: var( --radius-md );
	padding: var( --space-4 );
	margin-block: var( --space-4 );
}
.compatibility-block__title { font-size: 1.05rem; margin-bottom: var( --space-3 ); }
.compatibility-block__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --space-3 );
	padding: var( --space-1 ) 0;
}
.compatibility-block__row dt { color: var( --text-muted ); margin: 0; }
.compatibility-block__row dd { margin: 0; font-weight: 600; }

/* ---- Formulieren ---- */
label { display: block; font-weight: 600; margin-bottom: var( --space-1 ); }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="number"], input[type="date"], input[type="password"], textarea, select {
	width: 100%;
	min-height: var( --tap-target-min );
	padding: 0.6rem 0.8rem;
	border: 1px solid var( --border );
	border-radius: var( --radius-sm );
	background: var( --surface );
	color: var( --text-primary );
}
input:focus, textarea:focus, select:focus {
	border-color: var( --brand-primary );
}

/* ---- Breadcrumbs ---- */
.breadcrumbs { margin-block: var( --space-3 ); }
.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	font-size: 0.85rem;
	color: var( --text-muted );
}
.breadcrumbs__item:not( :last-child )::after { content: "/"; margin-left: 0.35rem; }
.breadcrumbs__link { color: var( --text-muted ); }

/* ---- Accordions (advies-content, PDP-tabs op mobiel) ---- */
.accordion__item { border-bottom: 1px solid var( --border ); }
.accordion__trigger {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: none;
	border: none;
	padding: var( --space-3 ) 0;
	font-weight: 600;
	text-align: left;
	min-height: var( --tap-target-min );
}
.accordion__panel {
	padding-bottom: var( --space-3 );
}
.accordion__panel[hidden] { display: none; }

/* ---- Alerts / notices ---- */
.notice-region .woocommerce-error,
.notice-region .woocommerce-message,
.notice-region .woocommerce-info {
	list-style: none;
	padding: var( --space-3 ) var( --space-4 );
	border-radius: var( --radius-sm );
	margin-bottom: var( --space-4 );
}
.notice-region .woocommerce-error { background: var( --color-danger-bg ); color: var( --color-danger ); }
.notice-region .woocommerce-message { background: var( --color-success-bg ); color: var( --color-success ); }
.notice-region .woocommerce-info { background: var( --surface-alt ); color: var( --text-primary ); }