/* ==========================================================================
   BeautyConsult Shop — basis en bouwstenen
   MOBILE FIRST: alle regels hieronder gelden vanaf 390px.
   Opschalen doen we uitsluitend met @media (min-width: …).
   ========================================================================== */

/* --- Fundament ---------------------------------------------------------- */

body {
	font-family: var(--bc-font);
	font-size: var(--bc-fs-body-plus);
	line-height: 1.5;
	color: var(--bc-body);
	background: var(--bc-wit);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

/* Zichtbare focus voor toetsenbordgebruikers — niet weghalen. */
:focus-visible {
	outline: 3px solid var(--bc-blauw);
	outline-offset: 2px;
}


/* --- Streepjesband ------------------------------------------------------ */

.bc-streepjes {
	height: var(--bc-streep-hoogte);
	background: repeating-linear-gradient(
		90deg,
		var(--bc-streep-1) 0 14px,
		var(--bc-streep-2) 14px 24px,
		var(--bc-streep-3) 24px 36px,
		var(--bc-streep-4) 36px 40px,
		var(--bc-streep-5) 40px 52px,
		var(--bc-streep-6) 52px 60px
	);
}


/* --- Knoppen (pills) ---------------------------------------------------- */

.bc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: var(--bc-tap);
	padding: 11px 18px;
	border: 0;
	border-radius: var(--bc-radius-pill);
	font-family: var(--bc-font);
	font-size: var(--bc-fs-body-plus);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bc-btn--oranje {
	background: var(--bc-oranje);
	color: var(--bc-wit);
}

.bc-btn--oranje:hover,
.bc-btn--oranje:focus {
	background: var(--bc-oranje-hover);
	color: var(--bc-wit);
}

.bc-btn--outline {
	background: transparent;
	color: var(--bc-oranje-tekst);
	border: 2px solid var(--bc-oranje);
	padding: 9px 16px;
}

.bc-btn--outline:hover,
.bc-btn--outline:focus {
	background: var(--bc-oranje);
	color: var(--bc-wit);
}

.bc-btn--blauw {
	background: var(--bc-blauw);
	color: var(--bc-wit);
	font-size: var(--bc-fs-body);
	padding: 10px 16px;
}

.bc-btn--blauw:hover,
.bc-btn--blauw:focus {
	background: var(--bc-blauw-hover);
	color: var(--bc-wit);
}

/* WooCommerce-knoppen dezelfde vorm geven, zodat de shop niet uit de
   huisstijl valt. Uitbreiden zodra we in stap 8 producten hebben. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button {
	border-radius: var(--bc-radius-pill);
	font-family: var(--bc-font);
	font-weight: 700;
	min-height: var(--bc-tap);
}


/* --- Kaarten ------------------------------------------------------------ */

.bc-kaart {
	background: var(--bc-wit);
	border: 1px solid var(--bc-rand);
	border-radius: var(--bc-radius-klein);
	padding: 12px;
}

.bc-kaart--zwevend {
	position: relative;
	z-index: 2;
	margin: var(--bc-overlap) var(--bc-gutter) 0;
	border: 0;
	border-radius: var(--bc-radius-kaart);
	box-shadow: var(--bc-schaduw-hero);
	padding: 18px 20px;
}


/* --- Tekststijlen ------------------------------------------------------- */

.bc-eyebrow {
	font-size: var(--bc-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--bc-ls-eyebrow);
	text-transform: uppercase;
	color: var(--bc-oranje-tekst);
}

.bc-meta {
	font-size: var(--bc-fs-meta);
	color: var(--bc-meta);
}


/* --- Winkelmand-badge --------------------------------------------------- */

.bc-cart-badge {
	position: absolute;
	top: -6px;
	right: -8px;
	background: var(--bc-oranje);
	color: var(--bc-wit);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	border-radius: var(--bc-radius-pill);
	padding: 1px 5px;
}

.bc-cart-badge.is-leeg {
	display: none;
}


/* --- Opschalen naar grotere schermen ------------------------------------
   Vullen we in vanaf stap 10, wanneer de secties bestaan.
   ------------------------------------------------------------------------ */

@media (min-width: 768px) {
	/* tablet */
}

@media (min-width: 1024px) {
	/* desktop */
}