/*
 * main.css — de lettertypes, de tokens, de header en de footer (baserules regel 6).
 *
 * Alles wat op élke pagina staat, staat hier. Wat maar op één soort pagina
 * staat, hoort in assets/css/sjablonen/<naam>.css (regel 8).
 *
 * ── Waar de waarden vandaan komen ─────────────────────────────────────────
 *
 * Niets hieronder is bedacht. Kleuren, lettertypes, lettergroottes en
 * regelhoogtes zijn overgenomen uit de opmaak die dekbedgekte.nl zelf uitlevert
 * (baserules regel 14). De bron is de Elementor-kit van die site — op
 * dekbedgekte.nl staat `elementor-kit-9` als class op <body>, en dat blok is
 * daar de plek waar de globale kleuren en typografie vandaan komen.
 *
 * Waar een waarde niet in die kit staat maar wel op tientallen plekken in de
 * opmaak terugkomt (de rode aanbiedingsprijs, het lila woord in een kop), staat
 * er bij de token bij waar hij gevonden is.
 *
 * Wat NIET van die site komt is de ruimteschaal (--ruimte1 … --ruimte8). Daar
 * is geen schaal om over te nemen: in Elementor krijgt elk element zijn eigen
 * marge, dus dat zijn honderden losse waarden. Die schaal is dus van ons.
 */

/* ==========================================================================
   Lettertypes (baserules regel 10)
   --------------------------------------------------------------------------
   Drie families, precies de drie die dekbedgekte.nl laadt:
   Gilroy voor alles, Futura in de footer en in een aantal secties, en Caveat
   als geschreven accent op de voorpagina.
   Lokaal, als woff2, omgezet uit de .ttf's van die site.

   Elk bestand staat er twee keer, net als bij Google Fonts: `-latin` met
   alles wat een Nederlandse tekst nodig heeft (Latin-1, aanhalingstekens,
   streepjes, €, pijlen) en `-latin-ext` met de rest van het Latijnse schrift.
   De browser haalt het tweede bestand pas op als er een letter op de pagina
   staat die alleen daarin zit — de unicode-range zegt welke. Het Cyrillisch en
   Grieks uit de originelen zijn weggelaten: daar staat op deze site geen
   letter van. Een Gilroy-gewicht ging zo van 45 naar 24 kB, en de voorpagina
   laadt er zeven. Opnieuw maken: zie de README (Snelheid).

   De gewichten staan één op één zoals daar. Twee dingen die opvallen en
   waarvan je moet weten dat het geen typefouten hier zijn:

   - Futura: `Futura-Heavy` staat op 600 en `Futura-Extra-bold` op 900. Dat is
     hoe dekbedgekte.nl ze koppelt, en de footer daar vraagt om Futura 600. Zou
     je Heavy op 900 zetten (wat de bestandsnaam suggereert), dan valt die
     footer terug op een ander gewicht en ziet hij er anders uit.
   - Gilroy cursief: die site zet zowel `Gilroy-RegularItalic` als
     `Gilroy-BoldItalic` op gewicht 400, waardoor de laatste de eerste
     overschrijft en er geen cursief van 400 overblijft. Dat is daar een fout.
     Hieronder staat Bold-cursief op 700, waar hij hoort; verder is alles gelijk.
   ========================================================================== */

/* Gilroy — normaal */

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-Thin-latin.woff2") format("woff2");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-Thin-latin-ext.woff2") format("woff2");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0130, U+0136-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-0151, U+0154-015B, U+015E-0167, U+016A-016B, U+016E-017E, U+0192, U+0218-021B, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+030A-030C, U+0312, U+0326-0328, U+1E80-1E85, U+1EF2-1EF3, U+20BD, U+2116, U+212E, U+215B-215E, U+2202, U+2205, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-UltraLight-latin.woff2") format("woff2");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-UltraLight-latin-ext.woff2") format("woff2");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0130, U+0136-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-0151, U+0154-015B, U+015E-0167, U+016A-016B, U+016E-017E, U+0192, U+0218-021B, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+030A-030C, U+0312, U+0326-0328, U+1E80-1E85, U+1EF2-1EF3, U+20BD, U+2116, U+212E, U+215B-215E, U+2202, U+2205, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-Light-latin.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-Light-latin-ext.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0130, U+0136-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-0151, U+0154-015B, U+015E-0167, U+016A-016B, U+016E-017E, U+0192, U+0218-021B, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+030A-030C, U+0312, U+0326-0328, U+1E80-1E85, U+1EF2-1EF3, U+20BD, U+2116, U+212E, U+215B-215E, U+2202, U+2205, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-Regular-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-Regular-latin-ext.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0130, U+0136-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-0151, U+0154-015B, U+015E-0167, U+016A-016B, U+016E-017E, U+0192, U+0218-021B, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+030A-030C, U+0312, U+0326-0328, U+1E80-1E85, U+1EF2-1EF3, U+20BD, U+2116, U+212E, U+215B-215E, U+2202, U+2205, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-Medium-latin.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-Medium-latin-ext.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0130, U+0136-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-0151, U+0154-015B, U+015E-0167, U+016A-016B, U+016E-017E, U+0192, U+0218-021B, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+030A-030C, U+0312, U+0326-0328, U+1E80-1E85, U+1EF2-1EF3, U+20BD, U+2116, U+212E, U+215B-215E, U+2202, U+2205, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-SemiBold-latin.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-SemiBold-latin-ext.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0130, U+0136-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-0151, U+0154-015B, U+015E-0167, U+016A-016B, U+016E-017E, U+0192, U+0218-021B, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+030A-030C, U+0312, U+0326-0328, U+1E80-1E85, U+1EF2-1EF3, U+20BD, U+2116, U+212E, U+215B-215E, U+2202, U+2205, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-Bold-latin.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-Bold-latin-ext.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0130, U+0136-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-0151, U+0154-015B, U+015E-0167, U+016A-016B, U+016E-017E, U+0192, U+0218-021B, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+030A-030C, U+0312, U+0326-0328, U+1E80-1E85, U+1EF2-1EF3, U+20BD, U+2116, U+212E, U+215B-215E, U+2202, U+2205, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-ExtraBold-latin.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-ExtraBold-latin-ext.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0130, U+0136-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-0151, U+0154-015B, U+015E-0167, U+016A-016B, U+016E-017E, U+0192, U+0218-021B, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+030A-030C, U+0312, U+0326-0328, U+1E80-1E85, U+1EF2-1EF3, U+20BD, U+2116, U+212E, U+215B-215E, U+2202, U+2205, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-Black-latin.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-Black-latin-ext.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0130, U+0136-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-0151, U+0154-015B, U+015E-0167, U+016A-016B, U+016E-017E, U+0192, U+0218-021B, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+030A-030C, U+0312, U+0326-0328, U+1E80-1E85, U+1EF2-1EF3, U+20BD, U+2116, U+212E, U+215B-215E, U+2202, U+2205, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02;
}

/* Gilroy — cursief */

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-ThinItalic-latin.woff2") format("woff2");
	font-weight: 100;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-ThinItalic-latin-ext.woff2") format("woff2");
	font-weight: 100;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0130, U+0136-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-0151, U+0154-015B, U+015E-0167, U+016A-016B, U+016E-017E, U+0192, U+0218-021B, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+030A-030C, U+0312, U+0326-0328, U+1E80-1E85, U+1EF2-1EF3, U+20BD, U+2116, U+212E, U+215B-215E, U+2202, U+2205, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-UltraLightItalic-latin.woff2") format("woff2");
	font-weight: 200;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-UltraLightItalic-latin-ext.woff2") format("woff2");
	font-weight: 200;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0130, U+0136-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-0151, U+0154-015B, U+015E-0167, U+016A-016B, U+016E-017E, U+0192, U+0218-021B, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+030A-030C, U+0312, U+0326-0328, U+1E80-1E85, U+1EF2-1EF3, U+20BD, U+2116, U+212E, U+215B-215E, U+2202, U+2205, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-LightItalic-latin.woff2") format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-LightItalic-latin-ext.woff2") format("woff2");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0130, U+0136-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-0151, U+0154-015B, U+015E-0167, U+016A-016B, U+016E-017E, U+0192, U+0218-021B, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+030A-030C, U+0312, U+0326-0328, U+1E80-1E85, U+1EF2-1EF3, U+20BD, U+2116, U+212E, U+215B-215E, U+2202, U+2205, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-RegularItalic-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-RegularItalic-latin-ext.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0130, U+0136-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-0151, U+0154-015B, U+015E-0167, U+016A-016B, U+016E-017E, U+0192, U+0218-021B, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+030A-030C, U+0312, U+0326-0328, U+1E80-1E85, U+1EF2-1EF3, U+20BD, U+2116, U+212E, U+215B-215E, U+2202, U+2205, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-MediumItalic-latin.woff2") format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-MediumItalic-latin-ext.woff2") format("woff2");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0130, U+0136-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-0151, U+0154-015B, U+015E-0167, U+016A-016B, U+016E-017E, U+0192, U+0218-021B, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+030A-030C, U+0312, U+0326-0328, U+1E80-1E85, U+1EF2-1EF3, U+20BD, U+2116, U+212E, U+215B-215E, U+2202, U+2205, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-SemiBoldItalic-latin.woff2") format("woff2");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-SemiBoldItalic-latin-ext.woff2") format("woff2");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0130, U+0136-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-0151, U+0154-015B, U+015E-0167, U+016A-016B, U+016E-017E, U+0192, U+0218-021B, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+030A-030C, U+0312, U+0326-0328, U+1E80-1E85, U+1EF2-1EF3, U+20BD, U+2116, U+212E, U+215B-215E, U+2202, U+2205, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-BoldItalic-latin.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-BoldItalic-latin-ext.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0130, U+0136-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-0151, U+0154-015B, U+015E-0167, U+016A-016B, U+016E-017E, U+0192, U+0218-021B, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+030A-030C, U+0312, U+0326-0328, U+1E80-1E85, U+1EF2-1EF3, U+20BD, U+2116, U+212E, U+215B-215E, U+2202, U+2205, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-ExtraBoldItalic-latin.woff2") format("woff2");
	font-weight: 800;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-ExtraBoldItalic-latin-ext.woff2") format("woff2");
	font-weight: 800;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0130, U+0136-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-0151, U+0154-015B, U+015E-0167, U+016A-016B, U+016E-017E, U+0192, U+0218-021B, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+030A-030C, U+0312, U+0326-0328, U+1E80-1E85, U+1EF2-1EF3, U+20BD, U+2116, U+212E, U+215B-215E, U+2202, U+2205, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-BlackItalic-latin.woff2") format("woff2");
	font-weight: 900;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Gilroy";
	src: url("../fonts/Gilroy-BlackItalic-latin-ext.woff2") format("woff2");
	font-weight: 900;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0130, U+0136-0137, U+0139-013E, U+0141-0148, U+014A-014D, U+0150-0151, U+0154-015B, U+015E-0167, U+016A-016B, U+016E-017E, U+0192, U+0218-021B, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0306-0307, U+030A-030C, U+0312, U+0326-0328, U+1E80-1E85, U+1EF2-1EF3, U+20BD, U+2116, U+212E, U+215B-215E, U+2202, U+2205, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02;
}

/* Futura — de vier gewichten die dekbedgekte.nl laadt */

@font-face {
	font-family: "Futura";
	src: url("../fonts/Futura-Light-latin.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Futura";
	src: url("../fonts/Futura-Light-latin-ext.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0101-0103, U+0106-0107, U+010C-0111, U+011E-011F, U+0128-0129, U+0130, U+0141-0142, U+015E-0161, U+0168-0169, U+0178, U+017D-017E, U+0192, U+01A0-01A1, U+01AF-01B0, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0309, U+0323, U+0340-0342, U+1EA0-1EF9, U+20A3, U+20AB, U+2202-2206, U+220F-2211, U+2213-2214, U+2216-221E, U+222B, U+2248, U+2260-2265, U+25CA;
}

@font-face {
	font-family: "Futura";
	src: url("../fonts/Futura-Heavy-latin.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Futura";
	src: url("../fonts/Futura-Heavy-latin-ext.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0101-0103, U+0106-0107, U+010C-0111, U+011E-011F, U+0128-0129, U+0130, U+0141-0142, U+015E-0161, U+0168-0169, U+0178, U+017D-017E, U+0192, U+01A0-01A1, U+01AF-01B0, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0309, U+0323, U+0340-0342, U+1EA0-1EF9, U+20A3, U+20AB, U+2202-2206, U+220F-2211, U+2213-2214, U+2216-221E, U+222B, U+2248, U+2260-2265, U+25CA;
}

@font-face {
	font-family: "Futura";
	src: url("../fonts/Futura-Bold-latin.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Futura";
	src: url("../fonts/Futura-Bold-latin-ext.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0101-0103, U+0106-0107, U+010C-0111, U+011E-011F, U+0128-0129, U+0130, U+0141-0142, U+015E-0161, U+0168-0169, U+0178, U+017D-017E, U+0192, U+01A0-01A1, U+01AF-01B0, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0309, U+0323, U+0340-0342, U+1EA0-1EF9, U+20A3, U+20AB, U+2202-2206, U+220F-2211, U+2213-2214, U+2216-221E, U+222B, U+2248, U+2260-2265, U+25CA;
}

@font-face {
	font-family: "Futura";
	src: url("../fonts/Futura-ExtraBold-latin.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Futura";
	src: url("../fonts/Futura-ExtraBold-latin-ext.woff2") format("woff2");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0101-0103, U+0106-0107, U+010C-0111, U+011E-011F, U+0128-0129, U+0130, U+0141-0142, U+015E-0161, U+0168-0169, U+0178, U+017D-017E, U+0192, U+01A0-01A1, U+01AF-01B0, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0303, U+0309, U+0323, U+0340-0342, U+1EA0-1EF9, U+20A3, U+20AB, U+2202-2206, U+220F-2211, U+2213-2214, U+2216-221E, U+222B, U+2248, U+2260-2265, U+25CA;
}

/*
 * Caveat — het geschreven accent.
 *
 * Eén variabel bestand per subset dekt 400 tot en met 700; dekbedgekte.nl laadt
 * datzelfde bestand vier keer, één keer per gewicht. Twee subsets in plaats van
 * vier: het cyrillische deel laten we staan, want daar staat op deze site geen
 * letter van.
 */

@font-face {
	font-family: "Caveat";
	src: url("../fonts/Caveat-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Caveat";
	src: url("../fonts/Caveat-latin-ext.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	/* ── Kleur ────────────────────────────────────────────────────────────
	   De eerste acht staan letterlijk in de Elementor-kit van dekbedgekte.nl.
	   De naam erachter is hoe die site ze daar noemt. */

	--kleurPrimair: #534680;        /* primary + accent — links, knoppen, het merk */
	--kleurSecundair: #404040;      /* secondary */
	--kleurTekst: #242424;          /* text */
	--kleurWit: #FFFFFF;            /* 1275711 */
	--kleurGroen: #24A30E;          /* eaf292f — op voorraad, vinkjes */
	--kleurMint: #F0FFFC;           /* fd069c0 — licht vlak */
	--kleurAchtergrond: #FFFFFF;    /* de paginakleur van de kit */

	/* Staan niet in de kit, maar wel door de hele opmaak van die site heen.
	   Waar ze gevonden zijn, staat erachter. */

	--kleurPrimairDonker: #281B57;  /* hover van de knop op de voorpagina */
	--kleurDiep: #10054D;           /* bestelknop op de productkaart, indicatoren in de header */
	--kleurAanbieding: #BF0010;     /* de afgeprijsde prijs (ins bdi) */
	--kleurLila: #9D97B2;           /* het uitgelichte woord binnen een kop (span) */
	--kleurLijn: #E4E4E4;           /* randen tussen secties */
	--kleurVlak: #F7F7F7;           /* lichte vlakken en iconen in de footer */
	--kleurIcoon: #313131;          /* de iconen in de header */
	--kleurVoet: #242424;           /* de footer; gelijk aan de tekstkleur */
	--kleurVoetDiep: #1A1A1A;       /* de onderste band van de footer */
	--kleurDageraad: #FFBC7D;       /* staat in de kit van die site; zie BRONWAARDEN.md */

	/* ── De nacht en het licht ────────────────────────────────────────────
	   Deze tinten begonnen op de voorpagina: die pagina loopt van diep indigo
	   naar daglicht en weer terug. De winkel doet hetzelfde — de kop van een
	   categorie is dezelfde nacht, het raster eronder hetzelfde papier — en wat
	   op meer dan één sjabloon staat, hoort hier.

	   Ze lopen door van --kleurDiep (#10054D), en die staat in de kit van
	   dekbedgekte.nl. */

	--kleurNacht: #07021B;          /* het diepst, boven in de kop */
	--kleurNacht2: #150A3D;         /* halverwege */
	--kleurNacht3: #2A1A63;         /* waar het licht wordt */
	--kleurPapier: #FBFAF9;         /* het lichte vlak tussen twee donkere uiteinden */
	--kleurMist: #F3F1F7;           /* een vlak binnen dat papier */
	--kleurLilaLicht: #C9C3DC;      /* --kleurLila, maar dan op een donkere ondergrond */

	/* ── Typografie ───────────────────────────────────────────────────────
	   De drie families en de schaal van de kit. `Sans-serif` als terugval,
	   net als daar. */

	--letterTekst: "Gilroy", sans-serif;
	--letterAccent: "Futura", sans-serif;
	--letterGeschreven: "Caveat", cursive;

	/* De globale tekststijl: Gilroy 300, 14/19. */
	--maatTekst: 14px;
	--regelTekst: 19px;
	--gewichtTekst: 300;

	/* De koppen. Alle drie Gilroy 700. */
	--maatH1: 28px;
	--regelH1: 36px;
	--maatH2: 24px;
	--regelH2: 33px;
	--maatH3: 20px;
	--regelH3: 30px;
	--maatH4: 16px;

	/* Terugkerende maten uit de opmaak van die site. */
	--maatNav: 15px;                /* menu-item, gewicht 600 */
	--regelNav: 16px;
	--maatKlein: 13px;              /* usp-regel en kleine knop, gewicht 600 */
	--regelKlein: 18px;
	--maatGroot: 20px;              /* sectiekop, gewicht 700 */
	--regelGroot: 27px;
	--maatMini: 11px;               /* de regel onder de prijs */

	/* ── De vloeiende schaal ──────────────────────────────────────────────
	   De schaal hierboven komt van dekbedgekte.nl en staat vast: 14 px lopende
	   tekst, 28 px h1. Voor een kop die het halve scherm vult is dat te klein,
	   en voor een telefoon is een vaste 44 px te groot. Deze zes maten schalen
	   mee met het venster.

	   Ze staan hier en niet in één sjabloon: de voorpagina begon ermee, de
	   winkel gebruikt dezelfde. Dit is de plek waar baserules regel 14
	   ("dezelfde site, maar moderner") zichtbaar wordt. */

	--vloeiendReus: clamp(2.35rem, 1.05rem + 4.6vw, 4.4rem);
	--vloeiendGroot: clamp(1.75rem, 1.15rem + 2.1vw, 2.75rem);
	--vloeiendMidden: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
	--vloeiendLopend: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--vloeiendKlein: 0.875rem;
	--vloeiendLabel: 0.75rem;

	/* ── Vorm ─────────────────────────────────────────────────────────────
	   De afrondingen die op die site voorkomen, met hun plek erachter. */

	--rondingKnop: 5px;             /* de knop op de voorpagina */
	--ronding: 7px;                 /* de kleine knop op de productkaart */
	--rondingKaart: 10px;           /* kaarten en vlakken — het meest gebruikt */
	--rondingPil: 50px;             /* de ronde knop */

	--schaduw: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 12px rgb(0 0 0 / 6%);

	/* ── Maatvoering ──────────────────────────────────────────────────────
	   De boxed container van Elementor op dekbedgekte.nl: 1140 op desktop en
	   748 vanaf tablet. Op een telefoon wijken we af: daar was hij 360, wat op
	   een toestel van 390–430px aan beide kanten een lege strook gaf; hier
	   loopt hij de volle breedte, alleen de rand blijft. Die twee breekpunten zijn ook
	   de breekpunten van de rest van deze site; 1024 is hetzelfde getal dat
	   de mu-plugin dekbedgekte-apparaat gebruikt om de weergave te kiezen. */

	--omhulselBreedte: 1140px;
	--omhulselRand: var(--ruimte4);

	/* ── Ruimte ───────────────────────────────────────────────────────────
	   Van ons: op dekbedgekte.nl heeft elk element zijn eigen marge en is er
	   geen schaal om over te nemen. */

	--ruimte1: 0.25rem;
	--ruimte2: 0.5rem;
	--ruimte3: 0.75rem;
	--ruimte4: 1rem;
	--ruimte5: 1.5rem;
	--ruimte6: 2rem;
	--ruimte7: 3rem;
	--ruimte8: 4rem;

	/* ── Beweging ─────────────────────────────────────────────────────────
	   Ook van ons. Dezelfde waarden leest main.js voor motion.dev. */

	--duurKort: 150ms;
	--duurMiddel: 250ms;
	--soepel: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Vanaf tablet versmalt de container, net als daar. */
@media (max-width: 1024px) {
	:root {
		--omhulselBreedte: 748px;

		/* De kleine tekststijl wordt op dit breekpunt juist groter — dat is een
		   bewuste instelling van die site, geen afgeleide van de schermbreedte. */
		--maatKlein: 18px;
		--regelKlein: 34px;
	}
}

@media (max-width: 767px) {
	:root {
		--omhulselBreedte: none;
	}
}

/* ==========================================================================
   Basis
   ========================================================================== */

body {
	font-family: var(--letterTekst);
	font-size: var(--maatTekst);
	font-weight: var(--gewichtTekst);
	line-height: calc(var(--regelTekst) / var(--maatTekst));
	color: var(--kleurTekst);
	background-color: var(--kleurAchtergrond);
}

h1 {
	font-family: var(--letterTekst);
	font-size: var(--maatH1);
	font-weight: 700;
	line-height: calc(var(--regelH1) / var(--maatH1));
}

h2 {
	font-family: var(--letterTekst);
	font-size: var(--maatH2);
	font-weight: 700;
	line-height: calc(var(--regelH2) / var(--maatH2));
}

h3 {
	font-family: var(--letterTekst);
	font-size: var(--maatH3);
	font-weight: 700;
	line-height: calc(var(--regelH3) / var(--maatH3));
}

h4 {
	font-family: var(--letterTekst);
	font-size: var(--maatH4);
	font-weight: 700;
}

h5,
h6 {
	font-family: var(--letterTekst);
	font-weight: 700;
}

/*
 * Het uitgelichte woord binnen een kop.
 *
 * Op dekbedgekte.nl staat in veel koppen één woord in lila, met een <span>
 * eromheen. Dat is daar per kop in de opmaak gezet; hier is het één regel.
 */
h1 .uitgelicht,
h2 .uitgelicht,
h3 .uitgelicht {
	color: var(--kleurLila);
}

a {
	color: var(--kleurPrimair);
}

a:hover {
	text-decoration: underline;
}

:focus-visible {
	outline-color: var(--kleurPrimair);
}

/* Het omhulsel: één plek waar de paginabreedte en de zijranden vandaan komen. */
.omhulsel {
	/* `max-inline-size` en niet `min(100%, …)`: dat laatste doet hetzelfde, maar
	   de CSS-validator van het W3C kan een min() met een variabele erin niet
	   lezen en meldt hem als fout (baserules regel 12). */
	inline-size: 100%;
	max-inline-size: var(--omhulselBreedte);
	margin-inline: auto;
	padding-inline: var(--omhulselRand);
}

/*
 * Tekst die er alleen is voor wie hem niet ziet.
 *
 * Een knop met alleen een icoon erin heeft een naam nodig, anders zegt een
 * schermlezer "knop" en verder niets. Die naam staat in de opmaak en wordt
 * hiermee uit beeld gehaald — niet met `display: none`, want dan leest een
 * schermlezer hem óók niet meer.
 *
 * Dezelfde naam als in WordPress zelf, zodat wat core en WooCommerce
 * uitschrijven hier ook klopt; die brengen hun eigen stylesheet niet mee.
 */
.screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* Behalve als hij focus krijgt: dan hoort hij wél zichtbaar te zijn. */
.screen-reader-text:focus {
	position: static;
	inline-size: auto;
	block-size: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

/* De sprong naar de inhoud, voor wie met het toetsenbord navigeert. */
.naarInhoud {
	position: absolute;
	inset-block-start: var(--ruimte2);
	inset-inline-start: var(--ruimte2);
	z-index: 100;
	padding: var(--ruimte2) var(--ruimte4);
	background-color: var(--kleurPrimair);
	color: var(--kleurWit);
	border-radius: var(--ronding);
	transform: translateY(-200%);
	transition: transform var(--duurKort) var(--soepel);
}

.naarInhoud:focus-visible {
	transform: translateY(0);
}

/* ==========================================================================
   Header
   --------------------------------------------------------------------------
   Drie banden: een donkere balk met de verkoopargumenten, een witte rij met
   het logo, het zoekveld en de acties, en de navigatie met een paneel over de
   volle breedte.

   De donkere balk is --kleurDiep (#10054D), een kleur uit de kit van
   dekbedgekte.nl. Daar is die balk grijs en valt hij weg; hier maakt hij de
   header onderdeel van hetzelfde ontwerp als de hero eronder.

   De hele header plakt bovenaan. Bij het scrollen klapt de bovenste balk dicht
   en krimpt de middelste rij — dat doet het script met de klasse `isKlein`.
   Zonder script blijft alles gewoon staan.
   ========================================================================== */

.siteKop {
	position: sticky;
	inset-block-start: 0;
	z-index: 60;
	border-block-end: 1px solid var(--kleurLijn);
	background-color: var(--kleurAchtergrond);
}

/*
 * Vast in plaats van plakkend, zodra het script de volle hoogte heeft gemeten.
 *
 * Een plakkende header hoort bij de opmaak van de pagina: krimpt hij, dan
 * schuift alles eronder mee omhoog, rekent de browser de hele pagina bij elk
 * beeld van de overgang opnieuw uit en corrigeert hij de scrollpositie — dat
 * haperen zie je precies waar de banner bovenaan in beeld komt. Een vaste
 * header met een vaste ruimte erboven krimpt in zijn eigen laag en laat de
 * pagina met rust. Zonder script blijft hij gewoon plakken.
 */
@media screen {
	.heeftVasteKop body {
		padding-block-start: var(--siteKopRuimte);
	}

	.heeftVasteKop .siteKop {
		position: fixed;
		inset-inline: 0;
	}
}

/* De donkere balk */

.kopBalk {
	overflow: hidden;
	max-block-size: 5rem;
	background-color: var(--kleurDiep);
	color: rgb(255 255 255 / 78%);
	font-size: 0.8125rem;
	line-height: 1.4;
	transition: max-block-size var(--duurMiddel) var(--soepel);
}

.siteKop.isKlein .kopBalk {
	max-block-size: 0;
}

.kopBalk__inhoud {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ruimte5);
	padding-block: 0.6rem;
}

.kopBalk__rechts {
	display: flex;
	align-items: center;
	gap: var(--ruimte5);
}

.kopBalk__cijfer {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.kopBalk__telefoon {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: inherit;
	font-weight: 600;
	white-space: nowrap;
}

.kopBalk__telefoon:hover {
	color: var(--kleurWit);
	text-decoration: none;
}

.kopBalk__icoon {
	inline-size: 0.95rem;
	block-size: 0.95rem;
	opacity: 0.6;
}

/* De verkoopargumenten */

.uspRij {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem var(--ruimte5);
	min-inline-size: 0;
}

.uspRij__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 500;
}

.uspRij__vink {
	flex: none;
	inline-size: 0.85rem;
	block-size: 0.85rem;
	color: var(--kleurDageraad);
}

/*
 * Op een telefoon past er één regel. Ze staan er alle vier in, de tweede en
 * verder al `hidden` (zie dekbedgekteUspRij): dan heeft de header vanaf het
 * eerste beeld zijn echte hoogte, en schuift er niets als het script begint te
 * wisselen. Zonder script, of op papier, hoort een bezoeker ze allemaal te
 * kunnen lezen, en dan vallen ze gewoon onder elkaar: op papier hieronder,
 * zonder script via zonder-script.css.
 */
.uspRij--wisselend {
	justify-content: center;
	text-align: center;
}

@media print {
	.uspRij--wisselend > .uspRij__item[hidden] {
		display: inline-flex;
	}
}

/* De witte rij */

.kopHoofd__inhoud {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2.75rem);
	padding-block: clamp(0.9rem, 1.8vw, 1.35rem);
	transition: padding-block var(--duurMiddel) var(--soepel);
}

.siteKop.isKlein .kopHoofd__inhoud {
	padding-block: 0.6rem;
}

.siteLogo {
	display: inline-flex;
	align-items: center;
}

.siteLogo__beeld {
	inline-size: auto;
	block-size: auto;
	max-block-size: 3.25rem;
	transition: max-block-size var(--duurMiddel) var(--soepel);
}

.siteKop.isKlein .siteLogo__beeld {
	max-block-size: 2.5rem;
}

.siteLogo__tekst {
	font-size: 1.25rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

/* Het zoekveld */

.zoekVorm {
	display: flex;
	align-items: center;
	inline-size: 100%;
	max-inline-size: 34rem;
	margin-inline: auto;
	background-color: var(--kleurVlak);
	border: 1.5px solid transparent;
	border-radius: var(--rondingPil);
	transition:
		background-color var(--duurKort) var(--soepel),
		border-color var(--duurKort) var(--soepel),
		box-shadow var(--duurKort) var(--soepel);
}

.zoekVorm:focus-within {
	background-color: var(--kleurAchtergrond);
	border-color: var(--kleurPrimair);
	box-shadow: 0 0 0 4px rgb(83 70 128 / 12%);
}

.zoekVorm__teken {
	display: grid;
	place-items: center;
	padding-inline-start: 1.1rem;
	color: var(--kleurSecundair);
}

.zoekVorm__icoon {
	inline-size: 1.15rem;
	block-size: 1.15rem;
}

/*
 * 16 px en geen pixel minder: kleiner dan dat en Safari op een iPhone zoomt
 * de hele pagina in zodra je in het veld tikt.
 */
.zoekVorm__veld {
	flex: 1 1 auto;
	min-inline-size: 0;
	padding: 0.8rem 0.85rem;
	background-color: transparent;
	border: 0;
	font-size: 1rem;
}

/*
 * De omranding zit op het omhulsel, niet op het veld zelf: anders staat er bij
 * focus een lijn binnen een lijn. Het omhulsel kleurt wél op, dus er gaat geen
 * focusindicatie verloren.
 */
.zoekVorm__veld:focus {
	outline: none;
}

.zoekVorm__veld::placeholder {
	color: var(--kleurSecundair);
	opacity: 0.75;
}

.zoekVorm__knop {
	flex: none;
	margin: 4px;
	padding: 0.6rem 1.35rem;
	border-radius: var(--rondingPil);
	background-color: var(--kleurPrimair);
	color: var(--kleurWit);
	font-size: 0.875rem;
	font-weight: 700;
	transition: background-color var(--duurKort) var(--soepel);
}

.zoekVorm__knop:hover {
	background-color: var(--kleurPrimairDonker);
}

/*
 * De wisknop. Het kruisje dat de browser zelf in een zoekveld zet, verschilt
 * per browser en valt weg tegen de pil; dit is er één die erbij past.
 */
.zoekVorm__veld::-webkit-search-cancel-button {
	appearance: none;
}

.zoekVorm__wis {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 1.9rem;
	block-size: 1.9rem;
	border-radius: 50%;
	color: var(--kleurSecundair);
	transition: background-color var(--duurKort) var(--soepel), color var(--duurKort) var(--soepel);
}

.zoekVorm__wis:hover {
	background-color: var(--kleurMist);
	color: var(--kleurPrimair);
}

.zoekVorm__wis[hidden] {
	display: none;
}

.zoekVorm__wisIcoon {
	inline-size: 1rem;
	block-size: 1rem;
}

/* ==========================================================================
   Live zoeken
   --------------------------------------------------------------------------
   Het paneel onder het zoekveld (assets/js/zoeken.js). Op een breed scherm een
   kaart die onder de pil openzakt en breder is dan de pil zelf; op een
   telefoon een eigen scherm vanaf de onderkant van het veld tot de onderkant
   van het venster, zodat er ruimte is voor duimen en een toetsenbord.
   ========================================================================== */

.zoekVorm {
	position: relative;
}

.zoekVorm.isOpen {
	z-index: 58;
	background-color: var(--kleurAchtergrond);
	border-color: var(--kleurPrimair);
	box-shadow: 0 0 0 4px rgb(83 70 128 / 12%);
}

/* De laadbalk: een lichtje dat onder in de pil heen en weer loopt. */
.zoekVorm::after {
	content: "";
	position: absolute;
	inset-inline: 1.4rem;
	inset-block-end: -1.5px;
	block-size: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, var(--kleurPrimair), transparent) no-repeat;
	background-size: 40% 100%;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--duurKort) var(--soepel);
}

.zoekVorm.isBezig::after {
	opacity: 1;
	animation: zoekLaden 0.9s var(--soepel) infinite alternate;
}

@keyframes zoekLaden {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 100% 0;
	}
}

.zoekWaas {
	position: fixed;
	inset: 0;
	z-index: 55;
	background-color: rgb(16 5 77 / 28%);
	backdrop-filter: blur(3px);
}

.zoekWaas[hidden] {
	display: none;
}

.zoekPaneel {
	--zoekRand: clamp(1rem, 2vw, 1.5rem);

	position: absolute;
	inset-block-start: calc(100% + 0.65rem);
	inset-inline-start: 50%;
	translate: -50% 0;
	z-index: 1;
	inline-size: 52rem;
	/* 1rem aan elke kant: de rand van het omhulsel (--ruimte4). Met var() erin kan de CSS-validator deze calc() niet lezen. */
	max-inline-size: calc(100vw - 2rem);
	max-block-size: min(40rem, calc(100vh - 11rem));
	overflow: hidden auto;
	overscroll-behavior: contain;
	background-color: var(--kleurAchtergrond);
	border: 1px solid var(--kleurLijn);
	border-radius: calc(var(--rondingKaart) * 1.6);
	box-shadow:
		0 2px 6px rgb(16 5 77 / 6%),
		0 24px 60px -12px rgb(16 5 77 / 28%);
	transform-origin: 50% 0;
	text-align: start;
	scrollbar-width: thin;
}

.zoekPaneel[hidden] {
	display: none;
}

/* Twee kolommen: links wat je kunt intypen, rechts wat je kunt kopen. */
.zoekPaneel__binnen {
	display: grid;
	grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
	grid-template-rows: auto auto 1fr;
	gap: var(--ruimte5) var(--zoekRand);
	align-content: start;
	padding: var(--zoekRand);
}

.zoekPaneel__binnen > .zoekBlok--suggesties,
.zoekPaneel__binnen > .zoekBlok--categorieen,
.zoekPaneel__binnen > .zoekBlok--advies,
.zoekPaneel__binnen > .zoekPaneel__zij {
	grid-column: 1;
}

.zoekPaneel__binnen > .zoekBlok--producten {
	grid-column: 2;
	grid-row: 1 / span 3;
	padding-inline-start: var(--zoekRand);
	border-inline-start: 1px solid var(--kleurLijn);
}

.zoekPaneel__binnen--enkel,
.zoekPaneel__binnen--leeg {
	grid-template-columns: minmax(0, 1fr);
}

.zoekPaneel__binnen--enkel > .zoekBlok--producten {
	grid-column: 1;
	grid-row: auto;
	padding-inline-start: 0;
	border-inline-start: 0;
}

.zoekPaneel__binnen--enkel > .zoekBlok,
.zoekPaneel__binnen--enkel > .zoekAlles {
	grid-column: 1;
}

.zoekPaneel__binnen--begin {
	grid-template-rows: auto;
}

.zoekPaneel__binnen--begin > .zoekBlok--producten {
	grid-row: 1;
}

/* Een blok: een kopje in kleine hoofdletters met de regels eronder. */

.zoekPaneel__zij > .zoekBlok + .zoekBlok {
	margin-block-start: var(--ruimte5);
}

.zoekBlok__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ruimte2);
	margin-block-end: var(--ruimte2);
	padding-inline: 0.6rem;
}

.zoekBlok__titel {
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kleurLila);
}

.zoekBlok__aantal {
	min-inline-size: 1.6rem;
	padding: 0.1rem 0.5rem;
	border-radius: var(--rondingPil);
	background-color: var(--kleurMist);
	color: var(--kleurPrimair);
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	text-align: center;
}

.zoekBlok__actie {
	padding: 0.15rem 0.5rem;
	border-radius: var(--rondingPil);
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLabel);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.zoekBlok__actie:hover,
.zoekBlok__actie.isActief {
	background-color: var(--kleurMist);
	color: var(--kleurPrimair);
}

/* Gemarkeerd: het stuk dat overeenkomt met wat er getypt is. */
.zoekPaneel mark {
	background-color: transparent;
	color: inherit;
	font-weight: 700;
	box-shadow: inset 0 -0.38em 0 rgb(157 151 178 / 35%);
}

/* Een regel die je kiest, met de muis of met de pijltjes. */
.zoekSuggestie,
.zoekCategorie,
.zoekArtikel,
.zoekProduct {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.55rem 0.6rem;
	border-radius: var(--rondingKaart);
	color: var(--kleurTekst);
	text-decoration: none;
	transition: background-color var(--duurKort) var(--soepel);
}

.zoekSuggestie.isActief,
.zoekCategorie.isActief,
.zoekArtikel.isActief,
.zoekProduct.isActief {
	background-color: var(--kleurMist);
}

/* Suggesties: zoals bij de grote zoekmachines staat het getypte dun en de aanvulling vet. */
.zoekSuggestie {
	font-size: 0.9375rem;
	font-weight: 600;
}

.zoekSuggestie mark {
	font-weight: 300;
	box-shadow: none;
}

.zoekSuggestie__icoon,
.zoekCategorie__icoon,
.zoekArtikel__icoon {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 1.1rem;
	block-size: 1.1rem;
	color: var(--kleurLila);
}

.zoekSuggestie__icoon svg,
.zoekCategorie__icoon svg,
.zoekArtikel__icoon svg,
.zoekSuggestie__vul svg,
.zoekChip__icoon svg,
.zoekProduct__pijl svg,
.zoekAlles__icoon svg,
.zoekHulp__icoon svg,
.zoekLeeg__icoon svg {
	inline-size: 100%;
	block-size: 100%;
}

.zoekSuggestie__tekst {
	flex: 1 1 auto;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Het pijltje linksboven: "neem deze over in het veld". */
.zoekSuggestie__vul {
	flex: none;
	inline-size: 1rem;
	block-size: 1rem;
	color: var(--kleurSecundair);
	opacity: 0;
	transition: opacity var(--duurKort) var(--soepel);
}

.zoekSuggestie.isActief .zoekSuggestie__vul {
	opacity: 0.7;
}

/* Categorieën: naam, de ouder eronder en het aantal als stip rechts. */
.zoekCategorie__tekst {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-inline-size: 0;
}

.zoekCategorie__naam {
	overflow: hidden;
	font-size: 0.9375rem;
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Met de knop "Bekijk alle" onderaan: die neemt de onderrand over. */
.zoekPaneel__binnen--metAlles {
	padding-block-end: 0;
}

.zoekCategorie__ouder {
	font-size: var(--vloeiendLabel);
	color: var(--kleurSecundair);
}

.zoekCategorie__aantal {
	flex: none;
	min-inline-size: 1.5rem;
	padding: 0.05rem 0.45rem;
	border-radius: var(--rondingPil);
	background-color: var(--kleurVlak);
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLabel);
	font-weight: 600;
	text-align: center;
	transition: background-color var(--duurKort) var(--soepel), color var(--duurKort) var(--soepel);
}

.zoekCategorie.isActief .zoekCategorie__aantal {
	background-color: var(--kleurPrimair);
	color: var(--kleurWit);
}

.zoekArtikel__naam {
	font-size: 0.9375rem;
	line-height: 1.35;
}

/* Producten: foto, soort, naam en prijs, met een pijl die inschuift. */
.zoekProducten {
	display: grid;
	gap: 0.15rem;
}

.zoekProduct {
	gap: 0.9rem;
	padding: 0.5rem;
}

.zoekProduct__beeld {
	position: relative;
	flex: none;
	inline-size: 4rem;
	block-size: 4rem;
	overflow: hidden;
	border-radius: var(--rondingKaart);
	background-color: var(--kleurPapier);
}

.zoekProduct__beeld img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--duurMiddel) var(--soepel);
}

.zoekProduct.isActief .zoekProduct__beeld img {
	transform: scale(1.06);
}

.zoekProduct__label {
	position: absolute;
	inset-block-start: 0.25rem;
	inset-inline-start: 0.25rem;
	padding: 0.05rem 0.35rem;
	border-radius: var(--rondingPil);
	background-color: var(--kleurAanbieding);
	color: var(--kleurWit);
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1.4;
}

.zoekProduct__tekst {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.1rem;
	min-inline-size: 0;
}

.zoekProduct__soort {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--vloeiendLabel);
	color: var(--kleurLila);
	font-weight: 500;
}

.zoekProduct__op {
	padding: 0 0.4rem;
	border-radius: var(--rondingPil);
	background-color: var(--kleurVlak);
	color: var(--kleurSecundair);
}

.zoekProduct__naam {
	overflow: hidden;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.zoekProduct__prijs {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.35rem;
	font-size: 0.875rem;
}

.zoekProduct__vanaf {
	font-size: var(--vloeiendLabel);
	color: var(--kleurSecundair);
}

.zoekProduct__nu {
	font-weight: 700;
	color: var(--kleurPrimair);
}

.zoekProduct__nu.isActie {
	color: var(--kleurAanbieding);
}

.zoekProduct__was {
	font-size: var(--vloeiendLabel);
	color: var(--kleurSecundair);
}

.zoekProduct__pijl {
	flex: none;
	inline-size: 1.1rem;
	block-size: 1.1rem;
	color: var(--kleurPrimair);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity var(--duurKort) var(--soepel), transform var(--duurMiddel) var(--soepel);
}

.zoekProduct.isActief .zoekProduct__pijl {
	opacity: 1;
	transform: translateX(0);
}

/* In de beginstand staan de best verkochte producten in een rij van twee. */
.zoekPaneel__binnen--begin .zoekProducten {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zoekPaneel__binnen--begin .zoekProduct__pijl {
	display: none;
}

/* Chips: recent en populair. */
.zoekChips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	padding-inline: 0.6rem;
}

.zoekChip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.85rem 0.45rem 0.7rem;
	border: 1px solid var(--kleurLijn);
	border-radius: var(--rondingPil);
	background-color: var(--kleurAchtergrond);
	color: var(--kleurTekst);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition:
		background-color var(--duurKort) var(--soepel),
		border-color var(--duurKort) var(--soepel),
		color var(--duurKort) var(--soepel),
		transform var(--duurKort) var(--soepel);
}

.zoekChip.isActief {
	border-color: var(--kleurPrimair);
	background-color: var(--kleurPrimair);
	color: var(--kleurWit);
}

.zoekChip:active {
	transform: scale(0.96);
}

.zoekChip__icoon {
	display: grid;
	inline-size: 0.95rem;
	block-size: 0.95rem;
	color: var(--kleurLila);
}

.zoekChip.isActief .zoekChip__icoon {
	color: var(--kleurLilaLicht);
}

/* De melding bij een verbeterde tikfout. */
.zoekMelding {
	margin: var(--zoekRand) var(--zoekRand) 0;
	padding: 0.65rem 0.9rem;
	border-radius: var(--rondingKaart);
	background-color: var(--kleurMist);
	font-size: 0.875rem;
}

.zoekMelding + .zoekPaneel__binnen {
	padding-block-start: calc(var(--zoekRand) * 0.75);
}

/* "Bekijk alle resultaten": plakt onderaan, zodat hij er altijd is. */
.zoekAlles {
	position: sticky;
	inset-block-end: 0;
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin-inline: calc(var(--zoekRand) * -1);
	padding: 0.95rem var(--zoekRand);
	border-block-start: 1px solid var(--kleurLijn);
	background-color: var(--kleurPapier);
	color: var(--kleurPrimair);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--duurKort) var(--soepel), color var(--duurKort) var(--soepel);
}

.zoekAlles.isActief {
	background-color: var(--kleurPrimair);
	color: var(--kleurWit);
}

.zoekAlles__icoon {
	display: grid;
	inline-size: 1.1rem;
	block-size: 1.1rem;
	transition: transform var(--duurMiddel) var(--soepel);
}

.zoekAlles.isActief .zoekAlles__icoon {
	transform: translateX(4px);
}

/* Niets gevonden. */
.zoekLeeg {
	display: grid;
	justify-items: center;
	gap: 0.35rem;
	padding: var(--ruimte5) var(--ruimte4) var(--ruimte4);
	text-align: center;
}

.zoekLeeg__icoon {
	display: grid;
	place-items: center;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	margin-block-end: var(--ruimte2);
	padding: 0.8rem;
	border-radius: 50%;
	background-color: var(--kleurMist);
	color: var(--kleurPrimair);
}

.zoekLeeg__kop {
	font-size: 1.0625rem;
	font-weight: 500;
}

.zoekLeeg__tip {
	max-inline-size: 26rem;
	color: var(--kleurSecundair);
	font-size: 0.875rem;
}

.zoekPaneel__binnen--leeg .zoekBlok__kop,
.zoekPaneel__binnen--leeg .zoekChips {
	justify-content: center;
}

.zoekHulp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	border-radius: var(--rondingKaart);
	background-color: var(--kleurPapier);
	color: var(--kleurTekst);
	text-decoration: none;
	transition: background-color var(--duurKort) var(--soepel);
}

.zoekHulp.isActief {
	background-color: var(--kleurMist);
}

.zoekHulp__icoon {
	display: grid;
	inline-size: 1.3rem;
	block-size: 1.3rem;
	color: var(--kleurPrimair);
}

.zoekHulp__tekst {
	display: flex;
	flex-direction: column;
	font-size: 0.875rem;
}

.zoekHulp__kop {
	font-weight: 600;
}

.zoekHulp__nummer {
	color: var(--kleurPrimair);
}

/*
 * Niets gevonden, op de zoekpagina zelf (delen/zoekhulp.php): dezelfde
 * suggesties als het paneel, als gewone links. Staat op de zoekpagina van de
 * winkel en op de gewone zoekpagina, dus hier en niet in één sjabloon.
 */
.zoekNiets {
	display: grid;
	justify-items: center;
	gap: var(--ruimte3);
	max-inline-size: 40rem;
	margin: clamp(2rem, 5vw, 4rem) auto;
	padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem);
	border: 1px solid var(--kleurLijn);
	border-radius: var(--rondingKaart);
	background-color: var(--kleurAchtergrond);
	color: var(--kleurTekst);
	text-align: center;
}

.zoekNiets__icoon {
	display: grid;
	place-items: center;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	border-radius: 50%;
	background-color: var(--kleurMist);
	color: var(--kleurPrimair);
}

.zoekNiets__kop {
	font-size: var(--vloeiendMidden);
	font-weight: 800;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.zoekNiets__vraag {
	color: var(--kleurPrimair);
}

.zoekNiets__tip {
	max-inline-size: 30rem;
	color: var(--kleurSecundair);
	line-height: 1.6;
}

.zoekNiets__bedoeld {
	font-size: 1rem;
	font-weight: 500;
}

.zoekNiets__bedoeld a {
	color: var(--kleurPrimair);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.zoekNiets__blok {
	display: grid;
	gap: 0.6rem;
	inline-size: 100%;
	margin-block-start: var(--ruimte2);
}

.zoekNiets__titel {
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.zoekNiets__chips {
	justify-content: center;
	padding: 0;
	list-style: none;
}

.zoekNiets__artikelen {
	display: grid;
	gap: 0.4rem;
	padding: 0;
	list-style: none;
}

.zoekNiets__artikel {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--kleurPrimair);
	font-weight: 600;
}

.zoekNiets__artikelIcoon {
	flex: none;
	inline-size: 1.1rem;
	block-size: 1.1rem;
}

.zoekNiets__hulp {
	margin-block-start: var(--ruimte2);
}

/* Het skelet zolang het eerste antwoord onderweg is. */
.zoekSkelet {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.9rem;
}

.zoekSkelet__regel {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.zoekSkelet__beeld,
.zoekSkelet__tekst {
	border-radius: var(--rondingKaart);
	background: linear-gradient(90deg, var(--kleurVlak) 30%, var(--kleurMist) 50%, var(--kleurVlak) 70%);
	background-size: 300% 100%;
	animation: zoekGlans 1.2s linear infinite;
}

.zoekSkelet__beeld {
	flex: none;
	inline-size: 3.25rem;
	block-size: 3.25rem;
}

.zoekSkelet__tekst {
	flex: 0 1 60%;
	block-size: 0.9rem;
}

.zoekSkelet__regel:nth-child(even) .zoekSkelet__tekst {
	flex-basis: 42%;
}

@keyframes zoekGlans {
	from {
		background-position: 100% 0;
	}

	to {
		background-position: 0 0;
	}
}

/* Op een telefoon: een eigen scherm onder het veld. */
@media (max-width: 767px) {
	.zoekIsOpen,
	.zoekIsOpen body {
		overflow: hidden;
	}

	.zoekPaneel {
		position: fixed;
		inset: var(--zoekPaneelBoven, 7rem) 0 0;
		translate: none;
		inline-size: auto;
		max-inline-size: none;
		max-block-size: none;
		border: 0;
		border-block-start: 1px solid var(--kleurLijn);
		border-radius: calc(var(--rondingKaart) * 1.6) calc(var(--rondingKaart) * 1.6) 0 0;
		box-shadow: 0 -12px 40px -16px rgb(16 5 77 / 30%);
		}

	.zoekPaneel__binnen,
	.zoekPaneel__binnen--begin {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
	}

	.zoekPaneel__binnen > .zoekBlok,
	.zoekPaneel__binnen > .zoekPaneel__zij {
		grid-column: 1;
		grid-row: auto;
	}

	.zoekPaneel__binnen > .zoekBlok--producten {
		padding-inline-start: 0;
		border-inline-start: 0;
	}

	.zoekPaneel__binnen--begin .zoekProducten {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Op een aanraakscherm bestaat "de regel onder de muis" niet; de pijl mag er gewoon staan. */
	.zoekProduct__pijl {
		opacity: 0.35;
		transform: none;
	}

	.zoekProduct,
	.zoekSuggestie,
	.zoekCategorie {
		min-block-size: 2.75rem;
	}

	.zoekAlles {
		padding-block-end: calc(0.95rem + env(safe-area-inset-bottom));
	}
}

@media (prefers-reduced-motion: reduce) {
	.zoekVorm.isBezig::after,
	.zoekSkelet__beeld,
	.zoekSkelet__tekst {
		animation: none;
	}
}

/* De acties: account en winkelwagen */

.kopHoofd__acties {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.kopActie {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0.7rem;
	border-radius: var(--rondingKaart);
	color: var(--kleurTekst);
	transition: background-color var(--duurKort) var(--soepel);
}

.kopActie:hover {
	background-color: var(--kleurVlak);
	text-decoration: none;
}

.kopActie__icoon {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 2.4rem;
	block-size: 2.4rem;
	border-radius: 50%;
	background-color: var(--kleurVlak);
	color: var(--kleurPrimair);
	transition:
		background-color var(--duurKort) var(--soepel),
		color var(--duurKort) var(--soepel);
}

.kopActie:hover .kopActie__icoon {
	background-color: var(--kleurPrimair);
	color: var(--kleurWit);
}

.kopActie__teken {
	inline-size: 1.2rem;
	block-size: 1.2rem;
}

.kopActie__tekst {
	display: grid;
	gap: 1px;
	line-height: 1.25;
	white-space: nowrap;
}

.kopActie__klein {
	color: var(--kleurSecundair);
	font-size: 0.6875rem;
	font-weight: 500;
}

.kopActie__groot {
	font-size: 0.875rem;
	font-weight: 700;
}

/* Het aantal op de tas. In de dageraadkleur, want dat is het enige plekje in
   de header dat om aandacht mag vragen. */
.kopActie__aantal {
	position: absolute;
	inset-block-start: -3px;
	inset-inline-end: -3px;
	display: grid;
	place-items: center;
	min-inline-size: 1.2rem;
	block-size: 1.2rem;
	padding-inline: 0.28rem;
	border-radius: var(--rondingPil);
	background-color: var(--kleurDageraad);
	color: var(--kleurDiep);
	font-size: 0.6875rem;
	font-weight: 800;
	line-height: 1;
}

/* De navigatie */

.hoofdMenu {
	position: relative;
	border-block-start: 1px solid var(--kleurLijn);
	background-color: var(--kleurAchtergrond);
}

.hoofdMenu__omhulsel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ruimte5);
}

.hoofdMenu__lijst {
	display: flex;
	flex-wrap: wrap;
}

/* Statisch, zodat het paneel hieronder zich naar .hoofdMenu richt en dus over
   de volle breedte kan staan. */
.hoofdMenu__item {
	position: static;
}

.hoofdMenu__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.95rem 0.85rem;
	color: var(--kleurTekst);
	font-size: var(--maatNav);
	font-weight: 600;
}

.hoofdMenu__link:hover {
	text-decoration: none;
}

.hoofdMenu__link::after {
	content: "";
	position: absolute;
	inset-inline: 0.85rem;
	inset-block-end: 0.5rem;
	block-size: 2px;
	border-radius: 2px;
	background-color: var(--kleurPrimair);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--duurKort) var(--soepel);
}

.hoofdMenu__item:hover .hoofdMenu__link::after,
.hoofdMenu__item:focus-within .hoofdMenu__link::after,
.hoofdMenu__item.isActief .hoofdMenu__link::after {
	transform: scaleX(1);
}

.hoofdMenu__chevron {
	inline-size: 0.85rem;
	block-size: 0.85rem;
	color: var(--kleurSecundair);
	transition: transform var(--duurKort) var(--soepel);
}

.hoofdMenu__item:hover .hoofdMenu__chevron,
.hoofdMenu__item:focus-within .hoofdMenu__chevron {
	transform: rotate(180deg);
}

/* De snelkoppeling naar de warmtekiezer. Die sectie is waar deze winkel zich
   van de rest onderscheidt, dus hij hoort in de navigatie en niet alleen
   halverwege de voorpagina. */
.hoofdMenu__actie {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	flex: none;
	padding: 0.5rem 1rem;
	border-radius: var(--rondingPil);
	background-color: rgb(83 70 128 / 9%);
	color: var(--kleurPrimair);
	font-size: 0.8125rem;
	font-weight: 700;
	white-space: nowrap;
	transition:
		background-color var(--duurKort) var(--soepel),
		color var(--duurKort) var(--soepel);
}

.hoofdMenu__actie:hover {
	background-color: var(--kleurPrimair);
	color: var(--kleurWit);
	text-decoration: none;
}

.hoofdMenu__icoon {
	inline-size: 1rem;
	block-size: 1rem;
}

/* Het paneel */

.megaMenu {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	z-index: 40;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	background-color: var(--kleurVlak);
	border-block: 1px solid var(--kleurLijn);
	box-shadow: 0 26px 50px rgb(21 10 61 / 14%);
	transition:
		opacity var(--duurMiddel) var(--soepel),
		transform var(--duurMiddel) var(--soepel),
		visibility var(--duurMiddel);
}

.hoofdMenu__item:hover > .megaMenu,
.hoofdMenu__item:focus-within > .megaMenu {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.megaMenu__inhoud {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--ruimte6);
	padding-block: var(--ruimte5) var(--ruimte6);
}

.megaMenu__lijst {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.4rem var(--ruimte6);
}

.megaMenu__link {
	display: inline-block;
	padding-block: 0.3rem;
	color: var(--kleurSecundair);
	font-size: 0.9375rem;
	transition: color var(--duurKort) var(--soepel);
}

.megaMenu__link:hover {
	color: var(--kleurPrimair);
	text-decoration: none;
}

.megaMenu__alles {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.7rem 1.2rem;
	border-radius: var(--rondingPil);
	background-color: var(--kleurAchtergrond);
	color: var(--kleurPrimair);
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: inset 0 0 0 1px var(--kleurLijn);
	transition:
		background-color var(--duurKort) var(--soepel),
		color var(--duurKort) var(--soepel),
		box-shadow var(--duurKort) var(--soepel);
}

.megaMenu__alles:hover {
	background-color: var(--kleurPrimair);
	color: var(--kleurWit);
	box-shadow: inset 0 0 0 1px var(--kleurPrimair);
	text-decoration: none;
}

.megaMenu__pijl {
	inline-size: 1rem;
	block-size: 1rem;
}

.megaMenu__sub {
	display: grid;
	gap: 0.2rem;
	padding-inline-start: var(--ruimte3);
}

/* Een paneel met groepen ("Dekbed maten", "Seizoen", "Materiaal dekbed"), zoals
   op dekbedgekte.nl: elke groep is een kolom met zijn kop erboven. Kolommen in
   plaats van een raster, want de groepen zijn niet even lang; een groep breekt
   niet over twee kolommen. */
.megaMenu__lijst:has(> li > .megaMenu__kop) {
	display: block;
	columns: 4 10rem;
	column-gap: var(--ruimte6);
}

.megaMenu__lijst:has(> li > .megaMenu__kop) > li {
	break-inside: avoid;
}

/* Ruimte ná een groep; een los item ernaast ("Teddy Hoeslaken") staat dicht
   op het volgende, net als in de lijst onder een kop. */
.megaMenu__lijst:has(> li > .megaMenu__kop) > li:has(> .megaMenu__kop) {
	padding-block-end: var(--ruimte3);
}

.megaMenu__kop {
	display: inline-block;
	padding-block: 0.3rem;
	color: var(--kleurTekst);
	font-size: 0.9375rem;
	font-weight: 700;
}

a.megaMenu__kop:hover {
	color: var(--kleurPrimair);
}

.megaMenu__kop + .megaMenu__sub {
	padding-inline-start: 0;
}

/* ==========================================================================
   Mobiele header
   ========================================================================== */

.kopHoofd__inhoud--mobiel {
	padding-block-end: 0.5rem;
}

.kopHoofd__zoeken {
	padding-block-end: 0.85rem;
}

/* Het logo in het midden, tussen de menuknop en de tas. */
.kopHoofd__inhoud--mobiel .siteLogo {
	justify-self: center;
}

.kopHoofd__inhoud--mobiel .siteLogo__beeld {
	max-block-size: 2.5rem;
}

.menuKnop {
	display: grid;
	place-items: center;
	inline-size: 2.6rem;
	block-size: 2.6rem;
	border-radius: 50%;
	background-color: var(--kleurVlak);
	color: var(--kleurIcoon);
	transition: background-color var(--duurKort) var(--soepel);
}

.menuKnop:hover {
	background-color: var(--kleurLijn);
}

.menuKnop__streepjes,
.menuKnop__streepjes::before,
.menuKnop__streepjes::after {
	display: block;
	inline-size: 18px;
	block-size: 2px;
	background-color: currentcolor;
	border-radius: 2px;
	transition: transform var(--duurKort) var(--soepel), opacity var(--duurKort);
}

.menuKnop__streepjes {
	position: relative;
	margin-block: 6px;
}

.menuKnop__streepjes::before,
.menuKnop__streepjes::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
}

.menuKnop__streepjes::before {
	inset-block-start: -6px;
}

.menuKnop__streepjes::after {
	inset-block-start: 6px;
}

.menuKnop[aria-expanded="true"] .menuKnop__streepjes {
	background-color: transparent;
}

.menuKnop[aria-expanded="true"] .menuKnop__streepjes::before {
	transform: translateY(6px) rotate(45deg);
}

.menuKnop[aria-expanded="true"] .menuKnop__streepjes::after {
	transform: translateY(-6px) rotate(-45deg);
}

.mobielPaneel {
	overflow: hidden;
	border-block-start: 1px solid var(--kleurLijn);
	background-color: var(--kleurAchtergrond);
}

.mobielPaneel__inhoud {
	display: grid;
	gap: var(--ruimte5);
	padding-block: var(--ruimte4) var(--ruimte6);
}

.mobielMenu__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 0.85rem;
	border-block-end: 1px solid var(--kleurLijn);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.mobielMenu__kop:hover {
	color: var(--kleurPrimair);
	text-decoration: none;
}

/* De uitklapper: geen driehoekje van de browser, maar de chevron van de site. */
summary.mobielMenu__kop {
	list-style: none;
}

summary.mobielMenu__kop::-webkit-details-marker {
	display: none;
}

.mobielMenu__chevron {
	inline-size: 0.95rem;
	block-size: 0.95rem;
	color: var(--kleurSecundair);
	transition: transform var(--duurKort) var(--soepel);
}

.mobielMenu__uitklap[open] .mobielMenu__chevron {
	transform: rotate(180deg);
}

.mobielMenu__sub {
	display: grid;
	gap: 0.1rem;
	padding-block: 0.5rem 0.85rem;
}

.mobielMenu__uitklap > .mobielMenu__sub {
	border-block-end: 1px solid var(--kleurLijn);
}

.mobielMenu__sub .mobielMenu__sub {
	padding-block: 0 0.5rem;
	padding-inline-start: var(--ruimte3);
}

.mobielMenu__link {
	display: block;
	padding-block: 0.45rem;
	color: var(--kleurSecundair);
	font-size: 0.9375rem;
}

.mobielMenu__link:hover {
	color: var(--kleurPrimair);
	text-decoration: none;
}

.mobielMenu__link--alles {
	color: var(--kleurPrimair);
	font-weight: 700;
}

.mobielMenu__groep {
	display: block;
	padding-block: 0.6rem 0.25rem;
	color: var(--kleurTekst);
	font-size: 0.9375rem;
	font-weight: 700;
}

.mobielPaneel__actie {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.2rem;
	border-radius: var(--rondingPil);
	background-color: rgb(83 70 128 / 9%);
	color: var(--kleurPrimair);
	font-size: 0.9375rem;
	font-weight: 700;
}

.mobielPaneel__actie:hover {
	text-decoration: none;
}

.mobielPaneel__icoon {
	inline-size: 1.1rem;
	block-size: 1.1rem;
}

.mobielPaneel__voet {
	display: grid;
	gap: var(--ruimte4);
	justify-items: start;
	padding-block-start: var(--ruimte4);
	border-block-start: 1px solid var(--kleurLijn);
}

.mobielPaneel__voet .kopActie {
	padding-inline: 0;
}

.mobielPaneel__cijfer {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

/* ==========================================================================
   Footer
   --------------------------------------------------------------------------
   Op dekbedgekte.nl is de footer donker: de kolommen op de tekstkleur (#242424)
   en de onderste band nog een tint donkerder (#1A1A1A), met witte tekst en
   Futura in de koppen.
   ========================================================================== */

.siteVoet {
	margin-block-start: var(--ruimte8);
	background-color: var(--kleurVoet);
	color: var(--kleurWit);
	font-size: var(--maatTekst);
}

/* Een haarlijn bovenaan, zodat de footer op een witte pagina begint en niet
   als een blok dat er tegenaan gezet is. */
.siteVoet__kolommen {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

.siteVoet__kolom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ruimte4);
}

/*
 * De kop boven een kolom.
 *
 * Op dekbedgekte.nl is dit Futura 600 op 22 px. Dat leest als een titel terwijl
 * het een label is: vier titels van 22 px naast elkaar vechten met het logo om
 * aandacht. Hier is het dezelfde letter en hetzelfde gewicht, maar klein en met
 * spatiëring — dan weet je wat de kolom is zonder dat hij iets opeist.
 */
.siteVoet__kop {
	margin: 0;
	color: var(--kleurWit);
	font-family: var(--letterAccent);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.siteVoet .siteLogo--voet {
	max-inline-size: 150px;
}

.siteVoet__tekst {
	max-inline-size: 30ch;
	margin: 0;
	color: rgb(255 255 255 / 62%);
	font-family: var(--letterAccent);
	font-size: 0.9375rem;
	font-weight: 300;
	line-height: 1.65;
}

/* De links */

.voetMenu {
	display: grid;
	gap: 0.6rem;
	font-family: var(--letterAccent);
	font-size: 0.9375rem;
	font-weight: 400;
}

.siteVoet a {
	color: rgb(255 255 255 / 66%);
	transition: color var(--duurKort) var(--soepel);
}

.siteVoet a:hover {
	color: var(--kleurWit);
	text-decoration: none;
}

.voetMenu a {
	display: inline-block;
}

.voetMenu a:hover {
	transform: translateX(3px);
}

.voetMenu a {
	transition: color var(--duurKort) var(--soepel), transform var(--duurKort) var(--soepel);
}

/* De contactgegevens */

.bedrijfsgegevens {
	display: grid;
	gap: 0.7rem;
	font-family: var(--letterAccent);
	font-size: 0.9375rem;
	font-weight: 300;
	font-style: normal;
}

.bedrijfsgegevens__regel {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 0.6rem;
	color: rgb(255 255 255 / 72%);
	line-height: 1.5;
}

.bedrijfsgegevens__icoon {
	inline-size: 1.05rem;
	block-size: 1.05rem;
	margin-block-start: 0.15rem;
	color: rgb(255 255 255 / 45%);
}

/* De sociale kanalen */

.sociaalRij {
	display: flex;
	gap: 0.6rem;
}

.sociaalKnop {
	display: grid;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: 50%;
	background-color: rgb(255 255 255 / 9%);
	color: rgb(255 255 255 / 80%);
	transition:
		background-color var(--duurKort) var(--soepel),
		color var(--duurKort) var(--soepel),
		transform var(--duurKort) var(--soepel);
}

.sociaalKnop:hover {
	transform: translateY(-2px);
	background-color: var(--kleurWit);
	color: var(--kleurVoet);
}

.sociaalKnop__icoon {
	inline-size: 1.15rem;
	block-size: 1.15rem;
}

/* Het cijfer */

.waardering {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.waardering__sterren {
	position: relative;
	display: inline-block;
	flex: none;
	line-height: 0;
}

.waardering__leeg,
.waardering__vol {
	display: flex;
	gap: 2px;
}

/* De lege sterren en de tekst erven de kleur van hun omgeving: dit blok staat
   zowel op de donkere footer als op het witte mobiele paneel. */
.waardering__leeg {
	color: currentcolor;
	opacity: 0.22;
}

.waardering__vol {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: var(--deel, 0%);
	overflow: hidden;
	color: var(--kleurDageraad);
}

.waardering__ster {
	flex: none;
	inline-size: 0.95rem;
	block-size: 0.95rem;
}

.waardering__tekst {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.4rem;
	margin: 0;
	font-family: var(--letterAccent);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.waardering__tekst strong {
	color: inherit;
	font-weight: 700;
}

.waardering__tekst span {
	color: currentcolor;
	opacity: 0.62;
}

/* Waar het cijfer vandaan komt: "128 beoordelingen op Trustpilot", als link.
   Zonder bron staat er geen cijfer (dekbedgekteWaarderingGegevens). */
.waardering__bron {
	color: currentcolor;
	opacity: 0.8;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.waardering__bron:hover {
	opacity: 1;
}

/* De betaalmethodes */

.betaalRij {
	display: grid;
	gap: 0.7rem;
	inline-size: 100%;
	margin-block-start: auto;
	padding-block-start: var(--ruimte2);
}

.betaalRij__kop {
	margin: 0;
	color: rgb(255 255 255 / 45%);
	font-family: var(--letterAccent);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.betaalRij__beeld {
	inline-size: 17rem;
	max-inline-size: 100%;
	block-size: auto;
}

/* De onderste band */

.siteVoet__onder {
	background-color: var(--kleurVoetDiep);
}

.siteVoet__onderInhoud {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ruimte3) var(--ruimte6);
	justify-content: space-between;
	padding-block: var(--ruimte4);
	color: rgb(255 255 255 / 50%);
	font-family: var(--letterAccent);
	font-size: 0.8125rem;
}

.siteVoet__copyright,
.siteVoet__maker {
	margin: 0;
}

.siteVoet__maker a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.siteVoet__maker a:hover {
	color: var(--kleurWit);
}

.zakelijkeGegevens {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
}

.zakelijkeGegevens__label {
	color: rgb(255 255 255 / 34%);
}

.juridischMenu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

/* De footer op smallere schermen */

@media (max-width: 1024px) {
	.siteVoet__kolommen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.siteVoet__kolommen {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ruimte6);
	}

	.siteVoet__onderInhoud {
		justify-content: flex-start;
	}
}

/* ==========================================================================
   Bouwstenen die op meer dan één sjabloon staan
   ========================================================================== */

/*
 * Het hartje: een product bewaren als favoriet. Staat op de productkaart (in
 * de winkel, op de voorpagina, in de winkelwagen) en op de productpagina.
 * Aan is het gevuld; de vorm is die van het icoon `hart`.
 */
.hartKnop {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--kleurPrimair);
	transition: color var(--duurKort) var(--soepel);
}

.hartKnop__icoon {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	transition: fill var(--duurKort) var(--soepel);
}

.hartKnop[aria-pressed="true"] .hartKnop__icoon {
	fill: currentColor;
}

.hartKnop:hover {
	color: var(--kleurDiep);
}

/*
 * De knop.
 *
 * De maatvoering komt van de hoofdknop op de voorpagina van dekbedgekte.nl:
 * Gilroy 700, 14/19, wit op primair, hoeken van 5 px. De hover is de donkere
 * paarse tint die daar op diezelfde knop staat.
 */
.knop {
	display: inline-block;
	padding: var(--ruimte3) var(--ruimte5);
	border-radius: var(--rondingKnop);
	background-color: var(--kleurPrimair);
	color: var(--kleurWit);
	font-size: var(--maatTekst);
	font-weight: 700;
	line-height: calc(var(--regelTekst) / var(--maatTekst));
	text-align: center;
	transition: background-color var(--duurKort) var(--soepel);
}

.knop:hover {
	background-color: var(--kleurPrimairDonker);
	color: var(--kleurWit);
	text-decoration: none;
}

/* De kleine variant van de productkaart: 13 px, gewicht 600, hoeken van 7 px. */
.knop--klein {
	padding: var(--ruimte2) var(--ruimte4);
	border-radius: var(--ronding);
	background-color: var(--kleurDiep);
	font-size: var(--maatKlein);
	font-weight: 600;
}

/* De ronde variant. */
.knop--pil {
	padding: 18px;
	border-radius: var(--rondingPil);
	font-size: 16px;
}

.knop--rand {
	background-color: transparent;
	color: var(--kleurPrimair);
	box-shadow: inset 0 0 0 1px currentcolor;
}

/* Tekst die uit de editor komt. */
.rijkeTekst > * + * {
	margin-block-start: var(--ruimte4);
}

.rijkeTekst h2 {
	margin-block-start: var(--ruimte6);
}

.rijkeTekst h3 {
	margin-block-start: var(--ruimte5);
}

.rijkeTekst a {
	text-decoration: underline;
}

.rijkeTekst ul,
.rijkeTekst ol {
	padding-inline-start: var(--ruimte5);
}

.rijkeTekst ul {
	list-style: disc;
}

.rijkeTekst ol {
	list-style: decimal;
}

.rijkeTekst li + li {
	margin-block-start: var(--ruimte2);
}

.rijkeTekst strong {
	font-weight: 700;
}

/* ==========================================================================
   De bouwstenen van de voorpagina en de winkel
   --------------------------------------------------------------------------
   Deze vijf zijn op de voorpagina begonnen en staan inmiddels ook in de winkel:
   dezelfde kopregel boven een sectiekop, dezelfde iconenmaten, dezelfde knop.
   Daarmee horen ze hier en niet in één sjabloonbestand — anders staat dezelfde
   regel straks in vier bestanden.
   ========================================================================== */

/* De kleine regel boven een kop, met een stip ervoor. */
.kopregel {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin-block-end: 0.85rem;
	color: var(--kleurPrimair);
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}

.kopregel--licht {
	color: var(--kleurLilaLicht);
}

.kopregel__stip {
	flex: none;
	inline-size: 0.4rem;
	block-size: 0.4rem;
	border-radius: 50%;
	background-color: currentcolor;
}

/* De iconen. De maat staat hier en niet op de <svg>, zodat één icoon op
   meerdere plekken kan staan zonder dat er een tweede versie van hoeft. */
.icoon {
	flex: none;
	inline-size: 1.5rem;
	block-size: 1.5rem;
}

.icoon--vink {
	inline-size: 1rem;
	block-size: 1rem;
	color: var(--kleurGroen);
}

.icoon--ster {
	inline-size: 1.1rem;
	block-size: 1.1rem;
	color: var(--kleurDageraad);
}

.icoon--pijl {
	inline-size: 1.05rem;
	block-size: 1.05rem;
}

.icoon--terug {
	transform: rotate(180deg);
}

/* De grote, ronde knop.

   Naast .knop hierboven en niet in plaats daarvan: die is 14 px met hoeken van
   5 px, precies zoals op dekbedgekte.nl, en hoort daar te blijven waar die site
   hem heeft. Deze is groter en rond, voor waar hij naast een kop van 70 px staat
   — op de voorpagina en in de winkel. */

.knopPil {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.95rem 1.7rem;
	border-radius: var(--rondingPil);
	background-image: linear-gradient(135deg, #6B59A8 0%, #534680 55%, #3B2F63 100%);
	color: var(--kleurWit);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	box-shadow: 0 10px 26px rgb(40 27 87 / 26%);
	transition:
		transform var(--duurMiddel) var(--soepel),
		box-shadow var(--duurMiddel) var(--soepel),
		background-color var(--duurMiddel) var(--soepel),
		color var(--duurMiddel) var(--soepel);
}

.knopPil:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgb(40 27 87 / 34%);
	color: var(--kleurWit);
	text-decoration: none;
}

.knopPil__pijl {
	flex: none;
	inline-size: 1.1rem;
	block-size: 1.1rem;
	transition: transform var(--duurMiddel) var(--soepel);
}

.knopPil:hover .knopPil__pijl {
	transform: translateX(4px);
}

.knopPil--rand {
	background-image: none;
	background-color: transparent;
	color: var(--kleurPrimair);
	box-shadow: inset 0 0 0 1.5px rgb(83 70 128 / 30%);
}

.knopPil--rand:hover {
	background-color: rgb(83 70 128 / 8%);
	color: var(--kleurPrimair);
	box-shadow: inset 0 0 0 1.5px rgb(83 70 128 / 55%);
}

/* De lichte variant, voor op een donkere ondergrond: de bedankpagina, de
   kop en het slot van het blog. */
.knopPil--licht {
	background-image: none;
	background-color: rgb(255 255 255 / 10%);
	color: var(--kleurWit);
	box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 25%);
}

.knopPil--licht:hover {
	background-color: rgb(255 255 255 / 18%);
	color: var(--kleurWit);
}

/* De ronde knop van de productrij. */
.rondeKnop {
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 50%;
	background-color: var(--kleurWit);
	color: var(--kleurPrimair);
	box-shadow: inset 0 0 0 1px var(--kleurLijn);
	transition:
		background-color var(--duurKort) var(--soepel),
		color var(--duurKort) var(--soepel),
		box-shadow var(--duurKort) var(--soepel);
}

.rondeKnop:hover {
	background-color: var(--kleurPrimair);
	color: var(--kleurWit);
	box-shadow: inset 0 0 0 1px var(--kleurPrimair);
}

.rondeKnop[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* De beginstand van een onthulling. Hij wordt pas een beginstand als het script
   de klasse erop zet: laadt het script niet, dan staat alles er gewoon — een
   pagina die zonder JavaScript leeg is, is geen pagina. */
.verborgen {
	opacity: 0;
	transform: translateY(18px);
}

/* Op papier wordt niets onthuld: daar is niets om naartoe te scrollen, dus zou
   alles wat nog niet aan de beurt was wit blijven. */
@media print {
	.verborgen {
		opacity: 1;
		transform: none;
	}
}

/* Prijzen. De doorgestreepte prijs grijs, de nieuwe in het rood van die site. */
.prijs {
	font-weight: 700;
}

.prijs del {
	margin-inline-end: var(--ruimte2);
	color: var(--kleurSecundair);
	font-weight: 400;
}

.prijs ins {
	color: var(--kleurAanbieding);
	text-decoration: none;
}

/* Het label bij een doorgestreepte prijs: die prijs is de laagste van de
   afgelopen 30 dagen (Omnibus-regel, mu-plugin dekbedgekte-omnibus), en dat
   staat erbij. Op een eigen regel en klein: het hoort bij de prijs, maar het
   is er geen. Staat op de kaart, de voorpagina, het blog en de productpagina,
   dus hier. */
.prijsOmnibus {
	display: block;
	margin-block-start: 0.2rem;
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLabel);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.3;
}

/* Lijst met kaarten: staat op het archief, de zoekresultaten en de terugval. */

.berichtLijst {
	display: grid;
	gap: var(--ruimte5);
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.kaart {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--kleurLijn);
	border-radius: var(--rondingKaart);
	overflow: hidden;
	background-color: var(--kleurAchtergrond);
	transition: box-shadow var(--duurMiddel) var(--soepel);
}

.kaart:hover {
	box-shadow: var(--schaduw);
}

.kaart__beeld img {
	inline-size: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.kaart__tekst {
	display: flex;
	flex-direction: column;
	gap: var(--ruimte2);
	padding: var(--ruimte4);
}

/* De producttitel op dekbedgekte.nl: Gilroy 500, 14/19. */
.kaart__titel {
	font-size: var(--maatTekst);
	font-weight: 500;
	line-height: calc(var(--regelTekst) / var(--maatTekst));
}

.kaart__samenvatting {
	color: var(--kleurSecundair);
	font-size: var(--maatKlein);
}

/*
 * De paginering.
 *
 * `paginate_links()` levert met `type => list` een <ul class="page-numbers">
 * met daarin <li>'s. Die <ul> draagt dus dezelfde class als de nummers erin —
 * vandaar dat de lijst en de nummers hieronder los van elkaar aangesproken
 * worden en niet allebei met `.page-numbers`.
 */
.paginering {
	margin-block-start: var(--ruimte7);
}

.paginering ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ruimte2);
	justify-content: center;
}

.paginering li .page-numbers {
	display: grid;
	place-items: center;
	min-inline-size: 2.5rem;
	min-block-size: 2.5rem;
	padding-inline: var(--ruimte3);
	border: 1px solid var(--kleurLijn);
	border-radius: var(--rondingKnop);
	color: var(--kleurTekst);
	font-size: var(--maatKlein);
	font-weight: 600;
	transition:
		background-color var(--duurKort) var(--soepel),
		border-color var(--duurKort) var(--soepel),
		color var(--duurKort) var(--soepel);
}

.paginering li a.page-numbers:hover {
	border-color: var(--kleurPrimair);
	color: var(--kleurPrimair);
	text-decoration: none;
}

.paginering li .current {
	background-color: var(--kleurPrimair);
	border-color: var(--kleurPrimair);
	color: var(--kleurWit);
}

.paginering li .dots {
	border-color: transparent;
	color: var(--kleurSecundair);
}

/* De kop van een archief of zoekpagina, en de melding als er niets is. */

.archief__kop {
	max-inline-size: 70ch;
	margin-block-end: var(--ruimte6);
}

.archief__omschrijving {
	margin-block-start: var(--ruimte3);
	color: var(--kleurSecundair);
}

.nietsGevonden {
	max-inline-size: 60ch;
	color: var(--kleurSecundair);
}

/* Het kruimelpad van Essentials SEO. */
.esseoBreadcrumbs {
	padding-block: var(--ruimte4);
	font-size: var(--maatKlein);
	color: var(--kleurSecundair);
}

.esseoBreadcrumbs a:hover {
	color: var(--kleurTekst);
}

/* ==========================================================================
   De veelgestelde vragen: wat het overzicht en één vraag delen
   --------------------------------------------------------------------------
   Het teken van die pagina's (de maan als vraagteken) en het contactblok
   onderaan. Ze staan op faq.php én single-faq.php, en dus hier en niet in
   een van de twee sjabloonbestanden. De rest staat in sjablonen/faq.css en
   sjablonen/single-faq.css.
   ========================================================================== */

.faqMaan {
	display: block;
	inline-size: 100%;
	block-size: auto;
	overflow: visible;
}

/* De boog tekent zichzelf één keer, de ster fonkelt en het geheel zweeft. */
.faqMaan__boog {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	animation: faqMaanTekenen 1.6s var(--soepel) both;
}

.faqMaan__ster {
	transform-box: fill-box;
	transform-origin: center;
	animation: faqMaanFonkel 4.8s ease-in-out 1.2s infinite;
}

.faqMaan__gloed {
	animation: faqMaanGloed 4.8s ease-in-out 1.2s infinite;
}

.faqMaan__sterren circle {
	animation: faqMaanGloed 3.6s ease-in-out infinite;
}

.faqMaan__sterren circle:nth-child(2n) {
	animation-delay: 1.4s;
}

.faqMaan__sterren circle:nth-child(3n) {
	animation-delay: 2.3s;
}

@keyframes faqMaanTekenen {
	from {
		stroke-dashoffset: 1;
	}

	to {
		stroke-dashoffset: 0;
	}
}

@keyframes faqMaanFonkel {
	0%,
	100% {
		transform: scale(1) rotate(0deg);
	}

	50% {
		transform: scale(1.18) rotate(45deg);
	}
}

@keyframes faqMaanGloed {
	0%,
	100% {
		opacity: 0.55;
	}

	50% {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.faqMaan__boog,
	.faqMaan__ster,
	.faqMaan__gloed,
	.faqMaan__sterren circle {
		animation: none;
	}
}

/* Het contactblok: een ruitje nacht op het papier, met rechts de wegen naar
   een mens als tegels. */
.faqHulp {
	padding-block: 0 clamp(3rem, 6vw, 5rem);
	background-color: var(--kleurPapier);
}

.faqHulp__vak {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
	padding: clamp(1.75rem, 4vw, 3.25rem);
	border-radius: 28px;
	background-color: var(--kleurNacht2);
	background-image:
		radial-gradient(70% 120% at 100% 100%, rgb(255 188 125 / 16%) 0%, rgb(255 188 125 / 0%) 60%),
		linear-gradient(150deg, #07021B 0%, #150A3D 60%, #2A1A63 100%);
	color: var(--kleurWit);
}

.faqHulp__titel {
	font-size: var(--vloeiendGroot);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.08;
}

.faqHulp__intro {
	max-inline-size: 30rem;
	margin-block-start: 0.85rem;
	color: rgb(255 255 255 / 74%);
	font-size: var(--vloeiendLopend);
	line-height: 1.6;
}

.faqHulp__wegen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0.75rem;
}

.faqHulp__weg {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	block-size: 100%;
	padding: 1rem 1.1rem;
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: 18px;
	background-color: rgb(255 255 255 / 5%);
	color: var(--kleurWit);
	transition:
		background-color var(--duurKort) var(--soepel),
		border-color var(--duurKort) var(--soepel),
		transform var(--duurMiddel) var(--soepel);
}

.faqHulp__weg:hover {
	border-color: rgb(255 188 125 / 45%);
	background-color: rgb(255 255 255 / 10%);
	color: var(--kleurWit);
	text-decoration: none;
	transform: translateY(-2px);
}

.faqHulp__icoon {
	flex: none;
	inline-size: 2.6rem;
	block-size: 2.6rem;
	padding: 0.6rem;
	border-radius: 50%;
	background-color: rgb(255 188 125 / 14%);
	color: var(--kleurDageraad);
}

.faqHulp__wegTekst {
	display: grid;
	min-inline-size: 0;
}

.faqHulp__wegNaam {
	font-size: 1rem;
	font-weight: 700;
}

.faqHulp__wegWaarde {
	color: rgb(255 255 255 / 64%);
	font-size: var(--vloeiendKlein);
	overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
	.faqHulp__vak {
		grid-template-columns: minmax(0, 1fr);
	}
}