/* Designsysteem Kledingverhuur de Prinses — overgenomen uit index.html */
/* ============================================
   KLEDINGVERHUUR DE PRINSES — Design System
   Hoofd entry point (importeer alleen dit bestand)
   ============================================ */

/* ============================================
   KLEDINGVERHUUR DE PRINSES — Kleur Tokens
   Gebaseerd op flyer: magenta / paars / navy
   ============================================ */

/* vietnamese */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("5f2c70c3-0c1f-488f-ac7c-d05dd5c02062") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("4026abe8-c1b7-4715-859b-85159b3f54ab") format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("b3780507-0629-4d8d-a1b2-4760fab112d9") format('woff2');
  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;
}
/* vietnamese */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("5f2c70c3-0c1f-488f-ac7c-d05dd5c02062") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("4026abe8-c1b7-4715-859b-85159b3f54ab") format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("b3780507-0629-4d8d-a1b2-4760fab112d9") format('woff2');
  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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("81a9b942-f77c-4218-b2f3-6480b2293936") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("a60c823e-6eb3-49c0-b10a-06d69e7881e9") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("70fe02c0-0c61-4b10-a408-87d3e6e856c4") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("343076b4-ea88-41b0-b393-252b538a3003") format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("b2e9ce38-683d-492a-9928-adcaff183acf") format('woff2');
  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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("81a9b942-f77c-4218-b2f3-6480b2293936") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("a60c823e-6eb3-49c0-b10a-06d69e7881e9") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("70fe02c0-0c61-4b10-a408-87d3e6e856c4") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("343076b4-ea88-41b0-b393-252b538a3003") format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("b2e9ce38-683d-492a-9928-adcaff183acf") format('woff2');
  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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("81a9b942-f77c-4218-b2f3-6480b2293936") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("a60c823e-6eb3-49c0-b10a-06d69e7881e9") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("70fe02c0-0c61-4b10-a408-87d3e6e856c4") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("343076b4-ea88-41b0-b393-252b538a3003") format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("b2e9ce38-683d-492a-9928-adcaff183acf") format('woff2');
  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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("81a9b942-f77c-4218-b2f3-6480b2293936") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("a60c823e-6eb3-49c0-b10a-06d69e7881e9") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("70fe02c0-0c61-4b10-a408-87d3e6e856c4") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("343076b4-ea88-41b0-b393-252b538a3003") format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("b2e9ce38-683d-492a-9928-adcaff183acf") format('woff2');
  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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("81a9b942-f77c-4218-b2f3-6480b2293936") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("a60c823e-6eb3-49c0-b10a-06d69e7881e9") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("70fe02c0-0c61-4b10-a408-87d3e6e856c4") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("343076b4-ea88-41b0-b393-252b538a3003") format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("b2e9ce38-683d-492a-9928-adcaff183acf") format('woff2');
  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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("e5c95434-edb0-4ab6-9919-524aea4bd3e9") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("e6ad4ebf-90b9-43d0-a6f9-d528f0cc7e3f") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("29fc9ea0-7b95-4184-a890-8ac01b07ffb9") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("38ae25b9-419c-487c-a784-2427e1803938") format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("c8e8e5e7-db3e-4c63-b1f8-912d1b169ad1") format('woff2');
  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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("e5c95434-edb0-4ab6-9919-524aea4bd3e9") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("e6ad4ebf-90b9-43d0-a6f9-d528f0cc7e3f") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("29fc9ea0-7b95-4184-a890-8ac01b07ffb9") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("38ae25b9-419c-487c-a784-2427e1803938") format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("c8e8e5e7-db3e-4c63-b1f8-912d1b169ad1") format('woff2');
  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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("e5c95434-edb0-4ab6-9919-524aea4bd3e9") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("e6ad4ebf-90b9-43d0-a6f9-d528f0cc7e3f") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("29fc9ea0-7b95-4184-a890-8ac01b07ffb9") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("38ae25b9-419c-487c-a784-2427e1803938") format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("c8e8e5e7-db3e-4c63-b1f8-912d1b169ad1") format('woff2');
  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;
}


:root {

  /* === MAGENTA — Hoofdkleur (de feestelijke energie) === */
  --p-magenta-50:  #FFF0F7;
  --p-magenta-100: #FFD6ED;
  --p-magenta-200: #FF99CC;
  --p-magenta-300: #FF5CAD;
  --p-magenta-400: #FF1A8C;
  --p-magenta-500: #E0006E;   /* ← primaire merkkleur */
  --p-magenta-600: #B80059;
  --p-magenta-700: #920047;
  --p-magenta-800: #6E0035;
  --p-magenta-900: #4A0024;

  /* === PAARS — Accent (de verbindende laag) === */
  --p-purple-50:  #F6F0FC;
  --p-purple-100: #E8D6F7;
  --p-purple-200: #CEADEE;
  --p-purple-300: #B284E4;
  --p-purple-400: #975BDA;
  --p-purple-500: #7838A8;   /* ← accent paars */
  --p-purple-600: #612C88;
  --p-purple-700: #4C2269;
  --p-purple-800: #37184C;
  --p-purple-900: #220E30;

  /* === NAVY — Diep donker (elegantie en diepte) === */
  --p-navy-50:  #EEEAF8;
  --p-navy-100: #CDBFE9;
  --p-navy-200: #9A7FCE;
  --p-navy-300: #6E4EB0;
  --p-navy-400: #452A8A;
  --p-navy-500: #2A1668;
  --p-navy-600: #200F50;
  --p-navy-700: #1C1040;   /* ← hoofd navy */
  --p-navy-800: #130A2E;
  --p-navy-900: #0A041C;

  /* === NEUTRALEN (warm getint) === */
  --p-gray-50:  #FAF8FC;
  --p-gray-100: #F2EEF8;
  --p-gray-200: #E4DCEF;
  --p-gray-300: #CFC3E0;
  --p-gray-400: #AD98C6;
  --p-gray-500: #8A73A8;
  --p-gray-600: #6A5585;
  --p-gray-700: #4E3D62;
  --p-gray-800: #342840;
  --p-gray-900: #1A1424;
  --p-white:    #FFFFFF;
  --p-cream:    #FFF8FC;

  /* === SEMANTISCH === */
  --color-primary:          var(--p-magenta-500);
  --color-primary-hover:    var(--p-magenta-600);
  --color-primary-active:   var(--p-magenta-700);
  --color-primary-light:    var(--p-magenta-50);
  --color-secondary:        var(--p-purple-500);
  --color-secondary-hover:  var(--p-purple-600);
  --color-dark:             var(--p-navy-700);
  --color-dark-mid:         var(--p-navy-600);

  --color-text:             var(--p-navy-700);
  --color-text-muted:       var(--p-gray-500);
  --color-text-inverse:     var(--p-white);

  --color-bg:               var(--p-white);
  --color-bg-subtle:        var(--p-gray-50);
  --color-bg-accent:        var(--p-magenta-50);
  --color-bg-dark:          var(--p-navy-700);

  --color-border:           var(--p-gray-200);
  --color-border-strong:    var(--p-gray-300);
  --color-border-brand:     var(--p-magenta-200);

  /* === GRADIENTS === */
  --gradient-brand:    linear-gradient(135deg, var(--p-magenta-500) 0%, var(--p-purple-500) 50%, var(--p-navy-700) 100%);
  --gradient-magenta:  linear-gradient(135deg, var(--p-magenta-400) 0%, var(--p-magenta-600) 100%);
  --gradient-festive:  linear-gradient(135deg, var(--p-magenta-500) 0%, var(--p-purple-600) 100%);
  --gradient-dark:     linear-gradient(135deg, var(--p-purple-700) 0%, var(--p-navy-700) 100%);
  --gradient-diagonal: linear-gradient(135deg, var(--p-magenta-500) 33%, var(--p-purple-500) 33%, var(--p-purple-500) 67%, var(--p-navy-700) 67%);
}

/* ============================================
   KLEDINGVERHUUR DE PRINSES — Typografie Tokens
   ============================================
   Dancing Script  → speels, persoonlijk (sierletters/taglines)
   Oswald 700      → krachtig display (feestwoorden, cijfers)
   Nunito          → vriendelijk leesbaar (body, labels, UI)
   ============================================ */

:root {
  /* Lettertypen */
  --font-script:  'Dancing Script', cursive;
  --font-display: 'Oswald', sans-serif;
  --font-body:    'Nunito', sans-serif;

  /* Schaalgrootten */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  62px;
  --text-6xl:  80px;
  --text-7xl: 100px;

  /* Line-heights */
  --leading-none:    1.0;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.85;

  /* Letter-spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.22em;

  /* Font-weights */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Semantisch */
  --type-hero-script:    var(--font-script);
  --type-hero-display:   var(--font-display);
  --type-heading:        var(--font-display);
  --type-subheading:     var(--font-body);
  --type-body:           var(--font-body);
  --type-label:          var(--font-body);
  --type-price:          var(--font-display);
  --type-cta:            var(--font-body);
}

/* ============================================
   KLEDINGVERHUUR DE PRINSES — Spacing Tokens
   Basis: 8px grid
   ============================================ */

:root {
  --space-0:   0px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;
  --space-14: 160px;

  /* Layout */
  --container-sm:  640px;
  --container-md:  768px;
  --container:    1100px;
  --container-lg: 1280px;

  /* Section padding */
  --section-y: var(--space-12);
  --section-y-sm: var(--space-9);
}

/* ============================================
   KLEDINGVERHUUR DE PRINSES — Effects Tokens
   Schaduwen, radii, animaties
   ============================================ */

:root {
  /* === BORDER RADIUS === */
  --radius-none:   0px;
  --radius-sm:     6px;
  --radius-md:    10px;
  --radius-lg:    18px;
  --radius-xl:    28px;
  --radius-2xl:   40px;
  --radius-circle: 50%;
  --radius-pill:  9999px;

  /* === SCHADUWEN (warm magenta-getint) === */
  --shadow-sm:   0 1px 3px rgba(224,0,110,0.08), 0 1px 2px rgba(28,16,64,0.06);
  --shadow-md:   0 4px 16px rgba(224,0,110,0.12), 0 2px 6px rgba(28,16,64,0.08);
  --shadow-lg:   0 8px 32px rgba(224,0,110,0.16), 0 4px 12px rgba(28,16,64,0.10);
  --shadow-xl:   0 16px 48px rgba(224,0,110,0.18), 0 8px 24px rgba(28,16,64,0.12);

  /* Glow (voor primaire knoppen, accenten) */
  --shadow-brand:   0 0 0 3px rgba(224,0,110,0.18), 0 4px 20px rgba(224,0,110,0.30);
  --shadow-purple:  0 0 0 3px rgba(120,56,168,0.18), 0 4px 20px rgba(120,56,168,0.25);
  --shadow-focus:   0 0 0 3px rgba(224,0,110,0.35);

  /* Kaart hover lift */
  --shadow-hover: 0 12px 40px rgba(224,0,110,0.18), 0 4px 16px rgba(28,16,64,0.12);

  /* === ANIMATIES === */
  --dur:          200ms;
  --dur-slow:     350ms;
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.45, 0, 0.55, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.3, 0.64, 1);

  --transition-base: all var(--dur) var(--ease-out);
  --transition-slow: all var(--dur-slow) var(--ease-out);
}



  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { font-family: 'Nunito', sans-serif; color: #1C1040; background: #FFFFFF; }

  /* NAV */
  .nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.92); backdrop-filter: blur(14px); border-bottom: 1px solid #E4DCEF; }
  .nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; height: 68px; }
  .nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .nav-logo-mark { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #E0006E 0%, #7838A8 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .nav-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
  .nav-logo-text strong { font-family: 'Oswald', sans-serif; font-size: 15px; font-weight: 700; color: #1C1040; text-transform: uppercase; letter-spacing: 0.04em; }
  .nav-logo-text span { font-size: 11px; color: #8A73A8; font-weight: 600; }
  .nav-links { display: flex; align-items: center; gap: 6px; }
  .nav-link { font-size: 14px; font-weight: 700; color: #4E3D62; text-decoration: none; padding: 8px 14px; border-radius: 9999px; transition: all 180ms; }
  .nav-link:hover { background: #FFF0F7; color: #E0006E; }
  .nav-cta { background: #E0006E; color: white; font-size: 14px; font-weight: 700; padding: 10px 22px; border-radius: 9999px; text-decoration: none; border: none; cursor: pointer; transition: all 180ms; box-shadow: 0 4px 14px rgba(224,0,110,0.28); }
  .nav-cta:hover { background: #B80059; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(224,0,110,0.38); }

  /* HERO */
  .hero { min-height: 580px; position: relative; display: flex; align-items: center; overflow: hidden; }
  .hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #E0006E 0% 33%, #7838A8 33% 66%, #1C1040 66% 100%); }
  .hero-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(255,255,255,0.06) 0%, transparent 65%); }
  .hero-inner { max-width: 1100px; margin: 0 auto; padding: 80px 32px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 1; width: 100%; }
  .hero-text { color: white; }
  .hero-script { font-family: 'Dancing Script', cursive; font-size: 38px; font-weight: 700; opacity: 0.92; line-height: 1.1; margin-bottom: 4px; }
  .hero-display { font-family: 'Oswald', sans-serif; font-size: 84px; font-weight: 700; text-transform: uppercase; line-height: 0.95; letter-spacing: -0.01em; margin-bottom: 24px; }
  .hero-sub { font-size: 18px; font-weight: 400; line-height: 1.6; opacity: 0.88; max-width: 440px; margin-bottom: 36px; }
  .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
  .btn-hero { display: inline-flex; align-items: center; gap: 8px; font-family: 'Nunito', sans-serif; font-weight: 700; border-radius: 9999px; border: 2px solid transparent; cursor: pointer; text-decoration: none; font-size: 16px; transition: all 200ms; }
  .btn-hero-primary { background: white; color: #E0006E; padding: 14px 32px; border-color: white; box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
  .btn-hero-primary:hover { background: #FFF0F7; transform: translateY(-2px); }
  .btn-hero-secondary { background: transparent; color: white; padding: 14px 28px; border-color: rgba(255,255,255,0.5); }
  .btn-hero-secondary:hover { background: rgba(255,255,255,0.12); border-color: white; }
  .hero-visual { display: flex; align-items: center; justify-content: center; }
  .hero-card { background: rgba(255,255,255,0.12); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.2); border-radius: 24px; padding: 32px; color: white; width: 100%; max-width: 340px; }
  .hero-card-title { font-family: 'Oswald', sans-serif; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.7; margin-bottom: 20px; }
  .hero-info-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
  .hero-info-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
  .hero-info-text strong { display: block; font-size: 14px; font-weight: 700; }
  .hero-info-text span { font-size: 13px; opacity: 0.75; }
  .hero-divider { height: 1px; background: rgba(255,255,255,0.15); margin: 16px 0; }

  /* USPS */
  .usps { background: #FAF8FC; border-bottom: 1px solid #E4DCEF; padding: 28px 32px; }
  .usps-inner { max-width: 1100px; margin: 0 auto; display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; }
  .usp { display: flex; align-items: center; gap: 10px; }
  .usp-dot { width: 8px; height: 8px; border-radius: 50%; background: #E0006E; flex-shrink: 0; }
  .usp-text { font-size: 14px; font-weight: 700; color: #4E3D62; }

  /* SECTION HEADERS */
  .section { padding: 80px 32px; }
  .section-inner { max-width: 1100px; margin: 0 auto; }
  .section-eyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.18em; color: #E0006E; margin-bottom: 10px; }
  .section-title { font-family: 'Oswald', sans-serif; font-size: 44px; font-weight: 700; text-transform: uppercase; color: #1C1040; line-height: 1.05; margin-bottom: 12px; }
  .section-script { font-family: 'Dancing Script', cursive; font-size: 26px; color: #7838A8; margin-bottom: 16px; line-height: 1.3; }
  .section-lead { font-size: 17px; line-height: 1.6; color: #6A5585; max-width: 560px; }

  /* CATEGORIES */
  .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
  .cat-card { border-radius: 20px; overflow: hidden; border: 1.5px solid #FFD6ED; box-shadow: 0 2px 8px rgba(224,0,110,0.07); transition: all 220ms cubic-bezier(0.16,1,0.3,1); cursor: pointer; text-decoration: none; display: block; }
  .cat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(224,0,110,0.16); }
  .cat-card-header { height: 130px; display: flex; align-items: center; justify-content: center; font-size: 52px; }
  .cat-card-body { padding: 18px 22px 22px; }
  .cat-card-name { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 16px; color: #1C1040; margin-bottom: 4px; }
  .cat-card-desc { font-size: 13px; color: #6A5585; line-height: 1.5; }

  /* HOW IT WORKS */
  .howitworks { background: #1C1040; }
  .howitworks .section-eyebrow { color: #FF5CAD; }
  .howitworks .section-title { color: white; }
  .howitworks .section-script { color: #CEADEE; }
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; }
  .step { text-align: center; }
  .step-num { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #E0006E, #7838A8); display: flex; align-items: center; justify-content: center; font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 700; color: white; margin: 0 auto 16px; }
  .step-title { font-weight: 800; font-size: 15px; color: white; margin-bottom: 8px; }
  .step-desc { font-size: 13px; color: #9B7FBB; line-height: 1.5; }

  /* PRICING */
  .pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
  .price-card { background: white; border-radius: 24px; padding: 36px; border: 1.5px solid #E4DCEF; box-shadow: 0 2px 12px rgba(224,0,110,0.07); position: relative; overflow: hidden; }
  .price-card.featured { border-color: #FF99CC; background: linear-gradient(145deg, #FFF0F7 0%, #FFFFFF 60%); }
  .price-card.featured::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #E0006E, #7838A8); }
  .price-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: #8A73A8; margin-bottom: 12px; }
  .price-amount { font-family: 'Oswald', sans-serif; font-size: 56px; font-weight: 700; color: #E0006E; line-height: 1; }
  .price-range { font-family: 'Oswald', sans-serif; font-size: 28px; font-weight: 600; color: #7838A8; margin-left: 4px; }
  .price-desc { font-size: 14px; color: #6A5585; margin: 12px 0 24px; line-height: 1.5; }
  .price-features { display: flex; flex-direction: column; gap: 10px; }
  .price-feature { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #4E3D62; font-weight: 600; }
  .price-feature::before { content: '✓'; width: 20px; height: 20px; border-radius: 50%; background: #E0006E; color: white; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; }

  /* CONTACT */
  .contact-bg { background: linear-gradient(135deg, #F6F0FC 0%, #FFF0F7 100%); }
  .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; align-items: start; }
  .contact-info { display: flex; flex-direction: column; gap: 20px; }
  .contact-item { display: flex; align-items: flex-start; gap: 16px; }
  .contact-icon { width: 44px; height: 44px; border-radius: 50%; background: #E0006E; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
  .contact-text strong { display: block; font-size: 14px; font-weight: 800; color: #1C1040; margin-bottom: 2px; }
  .contact-text span { font-size: 14px; color: #6A5585; }
  .contact-text a { color: #E0006E; text-decoration: none; font-weight: 600; }
  .contact-form { background: white; border-radius: 24px; padding: 32px; box-shadow: 0 4px 24px rgba(224,0,110,0.10); border: 1px solid #FFD6ED; }
  .form-title { font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 700; color: #1C1040; text-transform: uppercase; margin-bottom: 20px; }
  .form-group { margin-bottom: 16px; }
  .form-label { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #8A73A8; margin-bottom: 6px; }
  .form-input { width: 100%; padding: 12px 16px; border: 1.5px solid #E4DCEF; border-radius: 10px; font-family: 'Nunito', sans-serif; font-size: 15px; color: #1C1040; background: white; transition: border-color 180ms; outline: none; }
  .form-input:focus { border-color: #E0006E; box-shadow: 0 0 0 3px rgba(224,0,110,0.12); }
  .form-textarea { resize: vertical; min-height: 100px; }
  .btn-submit { width: 100%; background: #E0006E; color: white; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 16px; padding: 14px; border-radius: 9999px; border: none; cursor: pointer; transition: all 180ms; box-shadow: 0 4px 16px rgba(224,0,110,0.28); margin-top: 4px; }
  .btn-submit:hover { background: #B80059; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(224,0,110,0.38); }

  /* FOOTER */
  .footer { background: #1C1040; padding: 48px 32px 32px; }
  .footer-inner { max-width: 1100px; margin: 0 auto; }
  .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
  .footer-brand { }
  .footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
  .footer-logo-mark { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #E0006E, #7838A8); display: flex; align-items: center; justify-content: center; }
  .footer-logo-text strong { font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 700; color: white; text-transform: uppercase; letter-spacing: 0.04em; display: block; }
  .footer-logo-text span { font-size: 11px; color: #9B7FBB; }
  .footer-tagline { font-family: 'Dancing Script', cursive; font-size: 20px; color: #CEADEE; line-height: 1.4; margin-bottom: 14px; }
  .footer-desc { font-size: 13px; color: #7B609A; line-height: 1.6; }
  .footer-col-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: #9B7FBB; margin-bottom: 16px; }
  .footer-links { display: flex; flex-direction: column; gap: 10px; }
  .footer-link { font-size: 14px; color: #CEADEE; text-decoration: none; font-weight: 600; transition: color 150ms; }
  .footer-link:hover { color: #FF5CAD; }
  .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; }
  .footer-copy { font-size: 12px; color: #5A4270; }
  .footer-made { font-size: 12px; color: #5A4270; }

/* ==========================================================================
   Responsief gedrag — de originele pagina had geen breekpunten.
   Alleen aanvullend: desktop blijft exact zoals hij was.
   ========================================================================== */
@media (max-width: 900px) {
  .nav-inner { padding: 0 18px; height: auto; min-height: 64px; flex-wrap: wrap; gap: 8px; row-gap: 4px; }
  .nav-links { flex-wrap: wrap; justify-content: flex-end; gap: 2px; padding-bottom: 8px; }
  .nav-link { padding: 7px 10px; font-size: 13px; }
  .nav-cta { padding: 9px 16px; font-size: 13px; }
  .hero-inner { grid-template-columns: 1fr; gap: 36px; padding: 56px 20px; }
  .hero-display { font-size: 54px !important; }
  .hero-script { font-size: 26px !important; }
  .section-inner { padding-left: 20px; padding-right: 20px; }
  .cat-grid, .steps, .pricing-grid, .contact-grid { grid-template-columns: 1fr !important; }
  .footer-top { grid-template-columns: 1fr !important; gap: 32px; }
  .footer-inner { padding-left: 20px; padding-right: 20px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .usps-inner { flex-wrap: wrap; justify-content: center; gap: 12px 20px; padding: 14px 20px; }
}
@media (max-width: 400px) {
  /* Op de smalste telefoons past "THEMAKLEDING" in Oswald 44px net niet. */
  .section-title { font-size: 32px; }
  .hero-display { font-size: 34px !important; }
  .price-amount { font-size: 42px; }
  .album-hero h1 { font-size: 30px; }
  .section-inner, .footer-inner { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 560px) {
  .hero-display { font-size: 42px !important; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn-hero { justify-content: center; }
  .nav-logo-text strong, .footer-logo-text strong { font-size: 13px !important; }
}

/* ==========================================================================
   FOTOALBUM
   ========================================================================== */

.album-hero { position: relative; overflow: hidden; padding: 64px 32px 56px; text-align: center; color: #fff; }
.album-hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #E0006E 0%, #7838A8 55%, #1C1040 100%); }
.album-hero-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 40%, rgba(255,255,255,0.10) 0%, transparent 62%); }
.album-hero-inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.album-hero .album-eyebrow { font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; opacity: 0.75; margin-bottom: 10px; }
.album-hero h1 { font-family: 'Oswald', sans-serif; font-size: 52px; font-weight: 700; text-transform: uppercase; line-height: 1; letter-spacing: -0.01em; margin-bottom: 12px; }
.album-hero .album-script { font-family: 'Dancing Script', cursive; font-size: 30px; font-weight: 700; opacity: 0.94; margin-bottom: 14px; }
.album-hero p { font-size: 17px; line-height: 1.6; opacity: 0.9; max-width: 560px; margin: 0 auto; }

/* Filterbalk met categorieën */
.album-filters { position: sticky; top: 68px; z-index: 60; background: rgba(255,255,255,0.94); backdrop-filter: blur(14px); border-bottom: 1px solid #E4DCEF; }
.album-filters-inner { max-width: 1100px; margin: 0 auto; padding: 14px 32px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-pill { display: inline-flex; align-items: center; gap: 7px; font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 700; color: #4E3D62; background: #F2EEF8; border: 1px solid transparent; text-decoration: none; padding: 8px 16px; border-radius: 9999px; cursor: pointer; transition: all 180ms; white-space: nowrap; }
.filter-pill:hover { background: #FFF0F7; color: #E0006E; }
.filter-pill.is-active { background: #E0006E; color: #fff; box-shadow: 0 4px 14px rgba(224,0,110,0.28); }
.filter-pill .pill-count { font-size: 12px; opacity: 0.7; font-weight: 600; }
.filter-pill.is-active .pill-count { opacity: 0.85; }

/* Het fotoraster */
.album-body { max-width: 1100px; margin: 0 auto; padding: 44px 32px 72px; }
.album-group + .album-group { margin-top: 56px; }
.album-group-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.album-group-title { font-family: 'Oswald', sans-serif; font-size: 26px; font-weight: 700; text-transform: uppercase; color: #1C1040; letter-spacing: 0.01em; }
.album-group-count { font-size: 13px; font-weight: 700; color: #8A73A8; }
.album-group-desc { font-size: 15px; color: #6A5585; line-height: 1.6; margin-bottom: 22px; max-width: 640px; }

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; align-items: start; }
.photo-card { position: relative; display: block; border: none; padding: 0; margin: 0; background: #F2EEF8; border-radius: 16px; overflow: hidden; cursor: zoom-in; text-align: left; font: inherit; color: inherit; box-shadow: 0 2px 10px rgba(26,20,36,0.07); transition: transform 220ms cubic-bezier(0.34,1.3,0.64,1), box-shadow 220ms ease; }
.photo-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(26,20,36,0.16); }
.photo-card:focus-visible { outline: 3px solid #E0006E; outline-offset: 3px; }
.photo-card img { display: block; width: 100%; height: 100%; object-fit: cover; background: #F2EEF8; }
/* Staat de miniatuur op "passend", dan heeft de kaart geen vaste verhouding en
   bepaalt de foto zelf de hoogte. Zonder dit zou de kaart naar 0 inklappen. */
.photo-card.is-vrij img { height: auto; object-fit: contain; }
.photo-card-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.45; background: linear-gradient(to top, rgba(26,16,64,0.88) 0%, rgba(26,16,64,0.55) 55%, transparent 100%); opacity: 0; transform: translateY(6px); transition: all 220ms ease; }
.photo-card:hover .photo-card-caption, .photo-card:focus-visible .photo-card-caption { opacity: 1; transform: translateY(0); }

.album-empty { text-align: center; padding: 64px 20px; color: #6A5585; }
.album-empty-icon { font-size: 46px; margin-bottom: 14px; }
.album-empty h2 { font-family: 'Oswald', sans-serif; font-size: 24px; text-transform: uppercase; color: #1C1040; margin-bottom: 8px; }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 999; display: none; align-items: center; justify-content: center; background: rgba(12,7,28,0.94); backdrop-filter: blur(6px); padding: 20px; }
.lb.is-open { display: flex; }
.lb-figure { position: relative; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lb-img { max-width: 100%; max-height: calc(100vh - 190px); object-fit: contain; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); background: #1C1040; }
.lb-caption { color: #fff; font-size: 15px; line-height: 1.55; text-align: center; max-width: 640px; opacity: 0.94; }
.lb-caption strong { display: block; font-family: 'Oswald', sans-serif; font-size: 18px; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 4px; }
.lb-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lb-tag { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #FFD6ED; background: rgba(224,0,110,0.28); border: 1px solid rgba(255,214,237,0.3); padding: 4px 11px; border-radius: 9999px; }
.lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.12); color: #fff; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 180ms; backdrop-filter: blur(8px); }
.lb-btn:hover { background: rgba(255,255,255,0.25); transform: translateY(-50%) scale(1.06); }
.lb-prev { left: 16px; } .lb-next { right: 16px; }
.lb-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.12); color: #fff; font-size: 20px; cursor: pointer; z-index: 2; backdrop-filter: blur(8px); }
.lb-close:hover { background: rgba(255,255,255,0.25); }
.lb-counter { position: absolute; top: 22px; left: 20px; color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.lb-share { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #fff; background: #1877F2; border: none; padding: 9px 18px; border-radius: 9999px; text-decoration: none; cursor: pointer; transition: all 180ms; }
.lb-share:hover { background: #0f5fc9; transform: translateY(-1px); }
.lb-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.24); padding: 9px 18px; border-radius: 9999px; text-decoration: none; cursor: pointer; transition: all 180ms; }
.lb-link:hover { background: rgba(255,255,255,0.26); }

@media (max-width: 900px) {
  .album-filters { top: 0; }
  .album-filters-inner { padding: 12px 18px; }
  .album-hero { padding: 46px 20px 40px; }
  .album-hero h1 { font-size: 36px; }
  .album-hero .album-script { font-size: 24px; }
  .album-body { padding: 32px 18px 56px; }
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .lb { padding: 10px; }
  .lb-img { max-height: calc(100vh - 210px); }
  .lb-btn { width: 40px; height: 40px; font-size: 18px; }
  .lb-prev { left: 6px; } .lb-next { right: 6px; }
  /* Op aanraakschermen is er geen hover — bijschrift altijd tonen. */
  .photo-card-caption { opacity: 1; transform: none; padding: 22px 11px 9px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-card, .photo-card-caption, .lb-btn, .filter-pill { transition: none; }
  .photo-card:hover { transform: none; }
}