/*
Theme Name: Koffiekanjer
Theme URI: https://koffiekanjer.com
Author: Innovatie Media
Author URI: https://innovatiemedia.nl
Description: Eigen WooCommerce-thema voor Koffiekanjer: accessoires die passen op jouw koffiemachine. Machinekiezer, ACF-paginablokken, klassieke checkout.
Version: 1.0.0
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.1
Text Domain: koffiekanjer
WC requires at least: 11.0
WC tested up to: 11.2
*/

/*
 * Fonts (SIL OFL 1.1, latin-subset, zelf gehost; licenties in assets/fonts/OFL-*.txt).
 * - KK Display: Archivo Black ExtraCondensed (statische instantie wght 900 / wdth 62 van Archivo, 11,6 kB) voor
 *   koppen. Cursief binnen deze familie is Instrument Serif Italic: elk cursief woord in een kop (*passen*) wordt
 *   zo vanzelf het koperen handschriftaccent, ook in de WooCommerce-bundels die var(--f-display) gebruiken.
 * - KK Wide: Archivo ExtraBold Expanded (wght 800 / wdth 125, 12,8 kB) voor eyebrows, knoppen en labels.
 * - Instrument Sans (tekst, variabel 400-700).
 * De fallback-fonts hebben dezelfde breedte en hoogte (size-adjust en ascent/descent-override over Impact, Arial
 * Bold en Georgia Italic), zodat de wissel naar de webfont geen regels laat verspringen.
 */
@font-face {
	font-family: "KK Display";
	src: url(assets/fonts/archivo-latin-900-extracondensed-v2.woff2) format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "KK Display";
	src: url(assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "KK Wide";
	src: url(assets/fonts/archivo-latin-800-expanded.woff2) format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Instrument Serif";
	src: url(assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Instrument Sans";
	src: url(assets/fonts/instrument-sans-latin-wght-normal.woff2) format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "KK Display Fallback";
	src: local("Impact");
	font-weight: 100 900;
	font-style: normal;
	size-adjust: 97.5%;
	ascent-override: 90.05%;
	descent-override: 21.54%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "KK Display Fallback";
	src: local("Georgia Italic"), local("Georgia-Italic");
	font-weight: 100 900;
	font-style: italic;
	size-adjust: 79.24%;
	ascent-override: 124.94%;
	descent-override: 39.12%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "KK Display Fallback 2";
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
	font-weight: 100 900;
	font-style: normal;
	size-adjust: 70.5%;
	ascent-override: 124.54%;
	descent-override: 29.79%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "KK Wide Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
	font-weight: 100 900;
	size-adjust: 130%;
	ascent-override: 67.54%;
	descent-override: 16.15%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Instrument Serif Fallback";
	src: local("Georgia Italic"), local("Georgia-Italic");
	font-style: italic;
	size-adjust: 79.24%;
	ascent-override: 124.94%;
	descent-override: 39.12%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Instrument Sans Fallback";
	src: local("Arial"), local("ArialMT"), local("Liberation Sans");
	size-adjust: 102.45%;
	ascent-override: 94.68%;
	descent-override: 24.4%;
	line-gap-override: 0%;
}

/*
 * Tokens (ontwerp A "Espressobar editoriaal"). Andere bundels (shop, product, kassa) gebruiken deze namen.
 * Kleuren uit Thema-instellingen komen binnen als --kk-espresso, --kk-crema en --kk-accent.
 */
:root {
	--kk-espresso: #21140D;
	--kk-crema: #F3E7D6;
	--kk-accent: #A4431D;

	/* kleur: papier, espresso, een accent (koper) */
	--paper: #F4ECE0;
	--paper-2: #EADFCE;
	--card: #FBF7F0;
	--ink: #26170F;
	--ink-2: #5E4A3D;
	--line: rgba(38, 23, 15, .14);
	--line-2: rgba(38, 23, 15, .3);
	--espresso: var(--kk-espresso);
	--espresso-2: #2F2017;
	--crema: var(--kk-crema);
	--crema-2: #C8B6A1;
	--line-d: rgba(243, 231, 214, .16);
	--accent: var(--kk-accent);
	--accent-ink: #8C3816;
	--accent-2: #E0895B;
	--fout: #9B2C1E;
	--ok: #2F5A3A;

	/* illustratie */
	--wood: #DDBB93;
	--steel: #F2EDE6;
	--steel-2: #E2D9CD;

	/* type */
	--f-display: "KK Display", "KK Display Fallback", "KK Display Fallback 2", Impact, "Arial Narrow", sans-serif;
	--f-wide: "KK Wide", "KK Wide Fallback", "Arial Black", sans-serif;
	--f-serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif;
	--f-sans: "Instrument Sans", "Instrument Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--t-xxl: clamp(3.25rem, 1.15rem + 7.4vw, 9rem);
	--t-xl: clamp(2.5rem, 1.45rem + 4.1vw, 5.75rem);
	--t-l: clamp(2rem, 1.45rem + 2.2vw, 3.5rem);
	--t-m: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
	--t-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
	--t-body: 1.0625rem;
	--t-s: .875rem;
	--t-xs: .75rem;

	/* textuur: korrel op donkere vlakken en de gescheurde papierrand (gedeeld door alle bundels) */
	--korrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .93 0 0 0 0 .85 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
	--scheur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24V12l19-4l10-5l12 5l10-1l11 4l11-1l26 1l12-6l10 1l16-3l13 4l13-4l18 0l15 1l26-1l10 0l26 3l23 3l18-2l16-4l18 3l23 5l11-5l22-3l13 4l10-4l19 6l20 5l23-1l17 4l11-6l18 3l21 1l23 2l12 0l15 0l16 0l24-2l23 2l17-4l26 4l22 0l21-2l11-2l16-1l24-3l18-2l22 5l19-6l25-3l26 4l21 1l24 1l15-2l23-1l19-1l9-2l12 5l9-2l21-3l17 5l20 1l12 4l24 3l11-1l19 2l14-2l25 2l4-5V24Z'/%3E%3C/svg%3E");
	--scheur-h: clamp(.75rem, .5rem + .8vw, 1.25rem);

	/* ruimte en vorm */
	--gutter: clamp(1rem, -1.6rem + 6vw, 4rem);
	--maxw: 82rem;
	--tekstw: 44rem;
	--sec: clamp(4.5rem, 2.4rem + 7vw, 9.5rem);
	--sec-s: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
	/* Vorm (9 november 2026): drukwerk, geen pillen. Hoeken 2 tot 4 px; cirkels alleen voor stippen en
	   tekeningnummers. */
	--r-s: 2px;
	--r-m: 3px;
	--r-l: 4px;
	--hdr-rij: 3.75rem;
	--hdr: 3.75rem;

	/* beweging */
	--ease: cubic-bezier(.2, .75, .15, 1);
	--ease-io: cubic-bezier(.65, 0, .3, 1);
	--q: .4s var(--ease);
	--m: .55s var(--ease);

	/* namen die de cookiemelding gebruikt */
	--kk-paper: var(--paper);
	--kk-font-sans: var(--f-sans);
	--kk-radius: var(--r-m);
	--kk-radius-knop: var(--r-m);

	color-scheme: light;
}
/* Telefoon: de kop heeft twee regels (logo, zoeken, winkelmand, menu; daaronder de machineknop). */
@media (max-width: 39.99rem) {
	:root {
		--hdr: calc(var(--hdr-rij) + 3.35rem);
	}
}
@media (min-width: 60rem) {
	:root {
		--hdr-rij: 4.75rem;
		--hdr: 4.75rem;
	}
}