/* Generated by tools/extract.py — do not edit manually */

/* ============================================================
   Stadsgenootjes — Colors & Type
   Redesign system for stadsgenootjes.nl (Elementor Pro)
   ============================================================ *//* Webfonts — Google Fonts substitutes for the brand's hand-drawn type.
   FLAG: original brand assets use a custom hand-drawn display and a
   custom brush script. These Google Fonts are the closest match —
   please supply the real font files if you have them. *//* latin-ext */
@font-face {
  font-family: 'Caprasimo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/caprasimo-latin-ext.woff2') 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: 'Caprasimo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/caprasimo-latin.woff2') 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: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/caveat-cyrillic-ext.woff2') 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: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/caveat-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/caveat-latin-ext.woff2') 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: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/caveat-latin.woff2') 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: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/caveat-cyrillic-ext.woff2') 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: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/caveat-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/caveat-latin-ext.woff2') 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: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/caveat-latin.woff2') 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: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/caveat-cyrillic-ext.woff2') 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: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/caveat-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/caveat-latin-ext.woff2') 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: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/caveat-latin.woff2') 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: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/caveat-cyrillic-ext.woff2') 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: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/caveat-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/caveat-latin-ext.woff2') 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: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/caveat-latin.woff2') 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('../fonts/nunito-cyrillic-ext.woff2') 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('../fonts/nunito-cyrillic.woff2') 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('../fonts/nunito-vietnamese.woff2') 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('../fonts/nunito-latin-ext.woff2') 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('../fonts/nunito-latin.woff2') 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: 500;
  font-display: swap;
  src: url('../fonts/nunito-cyrillic-ext.woff2') 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: 500;
  font-display: swap;
  src: url('../fonts/nunito-cyrillic.woff2') 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: 500;
  font-display: swap;
  src: url('../fonts/nunito-vietnamese.woff2') 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: 500;
  font-display: swap;
  src: url('../fonts/nunito-latin-ext.woff2') 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: 500;
  font-display: swap;
  src: url('../fonts/nunito-latin.woff2') 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('../fonts/nunito-cyrillic-ext.woff2') 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('../fonts/nunito-cyrillic.woff2') 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('../fonts/nunito-vietnamese.woff2') 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('../fonts/nunito-latin-ext.woff2') 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('../fonts/nunito-latin.woff2') 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('../fonts/nunito-cyrillic-ext.woff2') 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('../fonts/nunito-cyrillic.woff2') 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('../fonts/nunito-vietnamese.woff2') 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('../fonts/nunito-latin-ext.woff2') 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('../fonts/nunito-latin.woff2') 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('../fonts/nunito-cyrillic-ext.woff2') 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('../fonts/nunito-cyrillic.woff2') 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('../fonts/nunito-vietnamese.woff2') 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('../fonts/nunito-latin-ext.woff2') 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('../fonts/nunito-latin.woff2') 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: 900;
  font-display: swap;
  src: url('../fonts/nunito-cyrillic-ext.woff2') 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: 900;
  font-display: swap;
  src: url('../fonts/nunito-cyrillic.woff2') 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: 900;
  font-display: swap;
  src: url('../fonts/nunito-vietnamese.woff2') 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: 900;
  font-display: swap;
  src: url('../fonts/nunito-latin-ext.woff2') 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: 900;
  font-display: swap;
  src: url('../fonts/nunito-latin.woff2') 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 {
  /* ── BRAND CORE ──────────────────────────────────────────── */
  /* Cream paper — the warm off-white that lives behind everything.
     Taken from the packaging board stock. */
  --sg-cream:        #FBF5EC;
  --sg-cream-soft:   #F4EBD9;   /* slightly deeper, for cards / bands */
  --sg-paper:        #FFFFFF;   /* pure white, sparingly */

  /* Charcoal — never pure black. Reads as warm ink on cream. */
  --sg-ink:          #1B1A17;   /* primary text */
  --sg-ink-2:        #3B3833;   /* secondary text */
  --sg-ink-3:        #6B6660;   /* muted text, captions */
  --sg-ink-4:        #B7B0A6;   /* placeholder, hairline */

  /* ── CITY COLORS (the heart of the brand) ────────────────── */
  /* Each city/region edition has its own flag-derived palette.
     These six are the most-used. */

  /* Rotterdam — groen/wit. Sporty, the founders' home city. */
  --sg-rotterdam:        #009A47;
  --sg-rotterdam-deep:   #006B30;
  --sg-rotterdam-soft:   #D9F0E2;

  /* Amsterdam — rood/zwart/wit. Bold and graphic. */
  --sg-amsterdam:        #E2231A;
  --sg-amsterdam-deep:   #B41A12;
  --sg-amsterdam-soft:   #FBD9D6;

  /* Den Haag — geel/groen, Ooievaars. */
  --sg-denhaag:          #F2C500;
  --sg-denhaag-deep:     #BE9A00;
  --sg-denhaag-soft:     #FCF1B5;

  /* Utrecht — rood/wit. */
  --sg-utrecht:          #C8102E;
  --sg-utrecht-deep:     #8E0B20;
  --sg-utrecht-soft:     #F8D8DD;

  /* Eindhoven — rood/wit (PSV). */
  --sg-eindhoven:        #ED1C24;

  /* Feestgenootjes — pastel rainbow (Unicorn / Confetti edition) */
  --sg-pastel-pink:      #FBD0DA;
  --sg-pastel-mint:      #C9EFD8;
  --sg-pastel-sky:       #CFE6F4;
  --sg-pastel-butter:    #FCEFC0;
  --sg-pastel-lilac:     #E0D4F0;
  --sg-pastel-peach:     #FBDCC4;

  /* Legacy (traditional muisjes) */
  --sg-baby-pink:        #F4B5C2;
  --sg-baby-blue:        #B6D6E8;

  /* ── SEMANTIC ROLES ──────────────────────────────────────── */
  /* The site defaults to Rotterdam as the "house" identity, since
     the founders are Rotterdammers. Override via .theme-* classes. */
  --sg-accent:           var(--sg-rotterdam);
  --sg-accent-deep:      var(--sg-rotterdam-deep);
  --sg-accent-soft:      var(--sg-rotterdam-soft);
  --sg-accent-contrast:  var(--sg-paper);

  /* Surfaces */
  --sg-bg:               var(--sg-cream);
  --sg-bg-elevated:      var(--sg-paper);
  --sg-bg-band:          var(--sg-cream-soft);
  --sg-border:           #E8DFCE;
  --sg-border-strong:    #1B1A17;

  /* States */
  --sg-success:          #2E8B57;
  --sg-warning:          #D98C00;
  --sg-error:            #C0291F;

  /* ── TYPE STACKS ─────────────────────────────────────────── */
  /* Display: chunky, slightly hand-drawn serif. Stand-in for the
     custom packaging wordmark. */
  --sg-font-display: "Caprasimo", "Cooper Black", "Georgia", serif;

  /* Script: handwritten brush, for the joyful one-liners like
     "Welkom in Mokum!" and city tags. */
  --sg-font-script:  "Caveat", "Bradley Hand", "Segoe Script", cursive;

  /* Body: friendly humanist sans for prose, UI, product copy. */
  --sg-font-body:    "Nunito", -apple-system, "Segoe UI", system-ui, sans-serif;

  /* ── TYPE SCALE ──────────────────────────────────────────── */
  /* Modular scale ≈ 1.250 (major third), tuned for web hero use. */
  --sg-fs-xs:    12px;
  --sg-fs-sm:    14px;
  --sg-fs-base:  17px;
  --sg-fs-lg:    20px;
  --sg-fs-xl:    24px;
  --sg-fs-2xl:   32px;
  --sg-fs-3xl:   44px;
  --sg-fs-4xl:   64px;
  --sg-fs-5xl:   88px;
  --sg-fs-6xl:   120px;

  --sg-lh-tight:  1.05;
  --sg-lh-snug:   1.20;
  --sg-lh-normal: 1.45;
  --sg-lh-loose:  1.7;

  --sg-tracking-tight:  -0.01em;
  --sg-tracking-normal: 0;
  --sg-tracking-wide:   0.04em;
  --sg-tracking-caps:   0.12em;

  /* ── SPACING / RADII / SHADOWS ───────────────────────────── */
  --sg-space-1:  4px;
  --sg-space-2:  8px;
  --sg-space-3:  12px;
  --sg-space-4:  16px;
  --sg-space-5:  24px;
  --sg-space-6:  32px;
  --sg-space-7:  48px;
  --sg-space-8:  64px;
  --sg-space-9:  96px;
  --sg-space-10: 128px;

  /* Radii — generous, never pillowy. Buttons are pill, cards 14–20. */
  --sg-radius-xs:  4px;
  --sg-radius-sm:  8px;
  --sg-radius-md:  14px;
  --sg-radius-lg:  20px;
  --sg-radius-xl:  28px;
  --sg-radius-pill: 999px;

  /* Shadows — warm, soft, never grey-blue. Tinted with cream. */
  --sg-shadow-xs: 0 1px 2px rgba(60, 40, 20, 0.06);
  --sg-shadow-sm: 0 2px 8px rgba(60, 40, 20, 0.08);
  --sg-shadow-md: 0 8px 24px rgba(60, 40, 20, 0.10);
  --sg-shadow-lg: 0 20px 48px rgba(60, 40, 20, 0.14);
  --sg-shadow-inset: inset 0 2px 0 rgba(255, 255, 255, 0.6);

  /* Hairline borders */
  --sg-border-thin:   1px solid var(--sg-border);
  --sg-border-ink:    1.5px solid var(--sg-ink);
  --sg-border-accent: 2px solid var(--sg-accent);

  /* Motion */
  --sg-ease:        cubic-bezier(.2, .7, .2, 1);
  --sg-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --sg-dur-fast:    140ms;
  --sg-dur-base:    240ms;
  --sg-dur-slow:    420ms;
}/* ── CITY THEME SWITCHERS ────────────────────────────────────
   Drop on a section/page root to repaint accent. */
.sg-configurator .theme-rotterdam { --sg-accent: var(--sg-rotterdam);  --sg-accent-deep: var(--sg-rotterdam-deep);  --sg-accent-soft: var(--sg-rotterdam-soft); }.sg-configurator .theme-amsterdam { --sg-accent: var(--sg-amsterdam);  --sg-accent-deep: var(--sg-amsterdam-deep);  --sg-accent-soft: var(--sg-amsterdam-soft); }.sg-configurator .theme-denhaag { --sg-accent: var(--sg-denhaag);    --sg-accent-deep: var(--sg-denhaag-deep);    --sg-accent-soft: var(--sg-denhaag-soft); --sg-accent-contrast: var(--sg-ink); }.sg-configurator .theme-utrecht { --sg-accent: var(--sg-utrecht);    --sg-accent-deep: var(--sg-utrecht-deep);    --sg-accent-soft: var(--sg-utrecht-soft); }.sg-configurator .theme-feest { --sg-accent: var(--sg-pastel-pink);--sg-accent-deep: #D77F94;                   --sg-accent-soft: #FCE7ED; --sg-accent-contrast: var(--sg-ink); }/* ============================================================
   SEMANTIC TYPE — apply directly to elements
   ============================================================ */
.sg-configurator html { font-size: 100%; }.sg-configurator, .sg-configurator .sg-body {
  font-family: var(--sg-font-body);
  font-size: var(--sg-fs-base);
  line-height: var(--sg-lh-normal);
  color: var(--sg-ink);
  background: var(--sg-bg);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}/* Display headings — Caprasimo. Bold, friendly, slightly heritage. */
.sg-configurator .sg-display, .sg-configurator h1.sg, .sg-configurator .sg-h1 {
  font-family: var(--sg-font-display);
  font-weight: 400; /* Caprasimo is a single weight; volume comes from size */
  font-size: clamp(40px, 7vw, var(--sg-fs-5xl));
  line-height: var(--sg-lh-tight);
  letter-spacing: var(--sg-tracking-tight);
  color: var(--sg-ink);
  text-wrap: balance;
  margin: 0;
}.sg-configurator h2.sg, .sg-configurator .sg-h2 {
  font-family: var(--sg-font-display);
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, var(--sg-fs-3xl));
  line-height: var(--sg-lh-snug);
  letter-spacing: var(--sg-tracking-tight);
  color: var(--sg-ink);
  text-wrap: balance;
  margin: 0;
}.sg-configurator h3.sg, .sg-configurator .sg-h3 {
  font-family: var(--sg-font-display);
  font-weight: 400;
  font-size: var(--sg-fs-2xl);
  line-height: var(--sg-lh-snug);
  color: var(--sg-ink);
  margin: 0;
}.sg-configurator h4.sg, .sg-configurator .sg-h4 {
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: var(--sg-fs-xl);
  line-height: var(--sg-lh-snug);
  letter-spacing: var(--sg-tracking-tight);
  color: var(--sg-ink);
  margin: 0;
}/* Eyebrow / kicker — small caps over a section heading */
.sg-configurator .sg-eyebrow {
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: var(--sg-fs-xs);
  letter-spacing: var(--sg-tracking-caps);
  text-transform: uppercase;
  color: var(--sg-accent-deep);
}/* Script — the "joy moment". One-line accents only. NEVER body copy. */
.sg-configurator .sg-script {
  font-family: var(--sg-font-script);
  font-weight: 600;
  font-size: var(--sg-fs-3xl);
  line-height: 1.0;
  color: var(--sg-accent);
  letter-spacing: 0;
}.sg-configurator .sg-script-sm {
  font-family: var(--sg-font-script);
  font-weight: 600;
  font-size: var(--sg-fs-xl);
  line-height: 1.0;
  color: var(--sg-accent);
}/* Body / prose */
.sg-configurator p.sg, .sg-configurator .sg-p {
  font-family: var(--sg-font-body);
  font-weight: 400;
  font-size: var(--sg-fs-base);
  line-height: var(--sg-lh-normal);
  color: var(--sg-ink-2);
  text-wrap: pretty;
  margin: 0;
}.sg-configurator .sg-lead {
  font-family: var(--sg-font-body);
  font-weight: 500;
  font-size: var(--sg-fs-lg);
  line-height: var(--sg-lh-normal);
  color: var(--sg-ink-2);
  text-wrap: pretty;
}.sg-configurator .sg-caption {
  font-family: var(--sg-font-body);
  font-weight: 600;
  font-size: var(--sg-fs-sm);
  color: var(--sg-ink-3);
}.sg-configurator .sg-mono {
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: var(--sg-fs-sm);
  color: var(--sg-ink-3);
}/* Link */
.sg-configurator .sg-link {
  color: var(--sg-accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--sg-dur-fast) var(--sg-ease);
}.sg-configurator .sg-link:hover { color: var(--sg-ink); }/* ============================================================
   Stadsgenootjes — Components
   Reusable component CSS that layers on top of colors_and_type.css.
   ============================================================ *//* ── Buttons ──────────────────────────────────────────────── */
.sg-configurator .sg-btn {
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 16px 28px;
  border-radius: var(--sg-radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background var(--sg-dur-base) var(--sg-ease),
              color var(--sg-dur-base) var(--sg-ease),
              border-color var(--sg-dur-base) var(--sg-ease),
              transform var(--sg-dur-fast) var(--sg-ease),
              box-shadow var(--sg-dur-base) var(--sg-ease);
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
}.sg-configurator .sg-btn:active { transform: scale(0.97); }.sg-configurator .sg-btn svg {
  /* Icons inherit text size — 1em matches the cap height of the label.
     Stroke 2.25 keeps them visually weighted with 800-weight type. */
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}.sg-configurator .sg-btn:focus-visible {
  outline: 2px solid var(--sg-accent);
  outline-offset: 3px;
}.sg-configurator .sg-btn-primary {
  background: var(--sg-accent);
  color: var(--sg-accent-contrast);
  border-color: var(--sg-accent);
  box-shadow: var(--sg-shadow-sm);
}.sg-configurator .sg-btn-primary:hover {
  background: var(--sg-accent-deep);
  border-color: var(--sg-accent-deep);
  box-shadow: var(--sg-shadow-md);
}.sg-configurator .sg-btn-secondary {
  background: transparent;
  color: var(--sg-ink);
  border-color: var(--sg-ink);
}.sg-configurator .sg-btn-secondary:hover {
  background: var(--sg-ink);
  color: var(--sg-paper);
}.sg-configurator .sg-btn-ghost {
  background: transparent;
  color: var(--sg-ink);
  border-color: transparent;
  padding: 14px 18px;
}.sg-configurator .sg-btn-ghost:hover {
  background: var(--sg-cream-soft);
}.sg-configurator .sg-btn-sm { padding: 10px 18px; font-size: 14px; }.sg-configurator .sg-btn-lg { padding: 20px 32px; font-size: 18px; }/* ── Inputs ───────────────────────────────────────────────── */
.sg-configurator .sg-input {
  font-family: var(--sg-font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--sg-ink);
  background: var(--sg-paper);
  border: 1.5px solid var(--sg-border);
  border-radius: 12px;
  padding: 14px 16px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--sg-dur-fast) var(--sg-ease),
              box-shadow var(--sg-dur-fast) var(--sg-ease);
}.sg-configurator .sg-input::placeholder { color: var(--sg-ink-4); }.sg-configurator .sg-input:focus {
  outline: none;
  border-color: var(--sg-accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--sg-accent) 18%, transparent);
}.sg-configurator .sg-label {
  display: block;
  font-family: var(--sg-font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--sg-ink-2);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}/* ── City pills / tags ────────────────────────────────────── */
.sg-configurator .sg-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: var(--sg-radius-pill);
  background: var(--sg-cream-soft);
  font-family: var(--sg-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--sg-ink);
  border: 1px solid var(--sg-border);
  cursor: pointer;
  transition: background var(--sg-dur-fast) var(--sg-ease),
              border-color var(--sg-dur-fast) var(--sg-ease),
              color var(--sg-dur-fast) var(--sg-ease),
              transform var(--sg-dur-fast) var(--sg-ease);
}.sg-configurator .sg-pill:hover {
  background: var(--sg-paper);
  border-color: var(--sg-ink);
  transform: translateY(-1px);
}.sg-configurator .sg-pill:active { transform: scale(0.97); }.sg-configurator .sg-pill-dot {
  width: 10px; height: 10px; border-radius: 999px; background: var(--sg-accent);
  flex-shrink: 0;
}.sg-configurator .sg-pill.is-active {
  background: var(--sg-accent);
  color: var(--sg-accent-contrast);
  border-color: var(--sg-accent);
}.sg-configurator .sg-pill.is-active:hover {
  background: var(--sg-accent-deep);
  border-color: var(--sg-accent-deep);
}.sg-configurator .sg-pill.is-active .sg-pill-dot { background: var(--sg-accent-contrast); }/* ── Product card ─────────────────────────────────────────── */
.sg-configurator .sg-product {
  background: var(--sg-paper);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--sg-shadow-sm);
  transition: transform var(--sg-dur-base) var(--sg-ease),
              box-shadow var(--sg-dur-base) var(--sg-ease);
  cursor: pointer;
  position: relative;
}.sg-configurator .sg-product > * { flex-shrink: 0; }/* Push the price/CTA row to the bottom regardless of title length. */
.sg-configurator .sg-product__row { margin-top: auto; }.sg-configurator .sg-product:hover {
  transform: translateY(-2px);
  box-shadow: var(--sg-shadow-md);
}.sg-configurator .sg-product__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--sg-radius-md);
  background: var(--sg-cream-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}.sg-configurator .sg-product__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--sg-dur-slow) var(--sg-ease);
}.sg-configurator .sg-product:hover .sg-product__media img { transform: scale(1.04); }.sg-configurator .sg-product__badge {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--sg-font-script);
  font-size: 22px;
  color: var(--sg-accent);
  line-height: 1;
}.sg-configurator .sg-product__title {
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: 18px;
  color: var(--sg-ink);
  line-height: 1.2;
  margin: 0;
  /* Reserve exactly 2 lines so the row below never shifts between cards
     and longer titles truncate with an ellipsis. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}.sg-configurator .sg-product__meta {
  font-family: var(--sg-font-body);
  font-size: 13px;
  color: var(--sg-ink-3);
  font-weight: 600;
  margin: 0;
}.sg-configurator .sg-product__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}.sg-configurator .sg-product__price {
  font-family: var(--sg-font-display);
  font-size: 24px;
  color: var(--sg-ink);
  line-height: 1;
}/* ── Package mimic card (looks like printed boxboard) ─────── */
.sg-configurator .sg-package {
  background: var(--sg-paper);
  border: 1.5px solid var(--sg-ink);
  border-radius: var(--sg-radius-md);
  padding: 22px 20px;
  box-shadow: var(--sg-shadow-inset), var(--sg-shadow-md);
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}/* ── Sticky header ────────────────────────────────────────── */
.sg-configurator .sg-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
  background: color-mix(in oklab, var(--sg-cream) 78%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--sg-border);
}.sg-configurator .sg-header__nav {
  display: flex; gap: 28px; align-items: center;
}.sg-configurator .sg-header__nav a {
  font-family: var(--sg-font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--sg-ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}.sg-configurator .sg-header__nav a:hover { color: var(--sg-accent-deep); }.sg-configurator .sg-header__cart {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--sg-radius-pill);
  background: var(--sg-ink); color: var(--sg-paper);
  font-family: var(--sg-font-body); font-weight: 800; font-size: 14px;
  cursor: pointer; border: none;
}/* ── Quantity stepper ─────────────────────────────────────── */
.sg-configurator .sg-stepper {
  display: inline-flex; align-items: center; gap: 0;
  border: 1.5px solid var(--sg-ink);
  border-radius: var(--sg-radius-pill);
  padding: 4px;
}.sg-configurator .sg-stepper button {
  width: 32px; height: 32px; border-radius: 999px;
  border: none; background: transparent; color: var(--sg-ink);
  font-family: var(--sg-font-body); font-weight: 800; font-size: 18px;
  cursor: pointer; transition: background var(--sg-dur-fast);
}.sg-configurator .sg-stepper button:hover { background: var(--sg-cream-soft); }.sg-configurator .sg-stepper .val {
  min-width: 36px; text-align: center;
  font-family: var(--sg-font-body); font-weight: 800; font-size: 16px;
  color: var(--sg-ink);
}/* ── Responsive overrides ──────────────────────────────────
   The kit was written desktop-first with React inline styles.
   These @media rules use attribute selectors + !important to
   fold the most-used inline grid patterns to 1- or 2-column
   layouts at tablet / mobile breakpoints. Imperfect but solid
   enough to demo how the site adapts.
   Breakpoints: tablet 1024px, mobile 720px. */
@media (max-width: 1024px) {
/* Track & trace timeline stays horizontal on tablet too — `div[…]`
     selector wins on specificity against the broad `[style*="repeat(4"]`
     rule below that flips 4-col grids to 2-col. */
.sg-configurator div[data-track-timeline] { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }.sg-configurator div[data-track-timeline] > div > div:last-child { font-size: 12px !important; }/* Checkout on tablet — tighter card padding, summary stays beside form
     but slightly narrower. */
.sg-configurator .sg-checkout-form section > div { padding: 20px !important; }.sg-configurator .sg-checkout-summary { padding: 20px !important; }/* Order detail — sidebar blocks drop below the products column,
     and the 3 sidebar items spread into a 3-col row underneath. */
.sg-configurator .sg-order-detail-grid { grid-template-columns: 1fr !important; }.sg-configurator .sg-order-detail-grid > aside { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }/* Header — tablet: tighter gaps, keep all 5 nav items visible */
.sg-configurator .sg-header { padding: 16px 20px !important; }.sg-configurator .sg-header__nav { gap: 14px !important; }.sg-configurator .sg-header__nav a { font-size: 13px !important; letter-spacing: 0 !important; }/* Bring back the secondary links that were hidden at <1024px */
.sg-configurator .sg-header__nav a:nth-child(2), .sg-configurator .sg-header__nav a:nth-child(3) { display: inline-block !important; }.sg-configurator .sg-header__cart { padding: 9px 14px !important; font-size: 13px !important; }/* Hero / 2-up content sections — keep 2-col but tighter *//* Drop 3- and 4-col grids to 2-col */
.sg-configurator [style*="grid-template-columns: repeat(4"], [style*="gridTemplateColumns: repeat(4"],
  [style*="grid-template-columns: repeat(3"], [style*="gridTemplateColumns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }/* Section padding shrinks */
.sg-configurator section { padding-left: 24px !important; padding-right: 24px !important; }/* Hero/PDP/Cart 2-col layouts stay 2-col on tablet — looks fine.
     Cart sidebar wraps under content. *//* Fluid display headings at tablet width — overrides inline fontSize. */
.sg-configurator h1[style*="fontSize"], .sg-configurator h2[style*="fontSize"], .sg-configurator h1[style*="font-size"], .sg-configurator h2[style*="font-size"] {
    font-size: clamp(28px, 5.5vw, 80px) !important;
  }.sg-configurator div[style*="fontSize: 84"], .sg-configurator div[style*="fontSize: 88"] { font-size: clamp(36px, 6vw, 84px) !important; }/* Footer on tablet — newsletter input pinches at 4-col grid widths.
     Stack input above button, full-width. */
.sg-configurator footer form { max-width: 100% !important; flex-wrap: wrap !important; }.sg-configurator footer form > input { flex: 1 1 100% !important; min-width: 0 !important; }.sg-configurator footer form > button { flex: 1 1 100% !important; justify-content: center; }/* Category filter rail — collapse on tablet too */
.sg-configurator .sg-filter-toggle { display: flex !important; }.sg-configurator aside[data-filters-open="false"] { display: none !important; }/* Grid becomes single-column when filter rail collapses, so products
     get full width */
.sg-configurator .sg-plp-grid { grid-template-columns: 1fr !important; }

}@media (max-width: 720px) {
/* Show hamburger; hide nav + extra header icons that don't fit.
     Cart drops its dark pill chrome on mobile — becomes a transparent
     icon button that matches the hamburger visually. */
.sg-configurator .sg-header__menu-btn { display: inline-flex !important; }.sg-configurator .sg-header__user-btn { display: none !important; }.sg-configurator .sg-header__cart-label { display: none !important; }.sg-configurator .sg-header__cart {
    width: 40px !important; height: 40px !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--sg-ink) !important;
    border-radius: 999px !important;
    justify-content: center;
    position: relative;
  }/* The cart count moves into a small floating badge on the icon */
.sg-configurator .sg-header__cart > span:not(.sg-header__cart-label) {
    position: absolute;
    top: -2px; right: -2px;
    min-width: 18px; height: 18px;
    padding: 0 5px !important;
    font-size: 10px !important;
    border: 2px solid var(--sg-cream);
    border-radius: 999px !important;
  }/* Logo shrinks slightly to leave more breathing room */
.sg-configurator .sg-header img { height: 22px !important; }.sg-configurator .sg-header { padding: 12px 16px !important; }/* Tighter cluster on the right */
.sg-configurator .sg-header > div:last-child { gap: 2px !important; }/* USP topbar: show single rotating message, hide the row */
.sg-configurator .sg-uspbar__row { display: none !important; }.sg-configurator .sg-uspbar__mobile { display: block !important; }/* Header nav hides; hamburger would replace it in production */
.sg-configurator .sg-header__nav { display: none !important; }.sg-configurator .sg-header { padding: 14px 18px !important; }.sg-configurator .sg-header__cart { padding: 8px 12px !important; font-size: 13px !important; }/* USP bar collapses to single rotating message */
.sg-configurator .sg-cream-soft-usp > div { gap: 12px !important; flex-wrap: wrap !important; justify-content: flex-start !important; }/* Force ALL multi-col grids to single column — the most reliable
     way to make a desktop-first React app readable on mobile. */
.sg-configurator [style*="grid-template-columns"], .sg-configurator [style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }/* …except the 4-up "qty badge / small avatar / label / price" rows
     which need to stay horizontal — keep simple 3-col cart rows. */
.sg-configurator [data-row="cart-line"] { grid-template-columns: 56px 1fr auto !important; }/* Volledige cart-pagina line items — 4-koloms desktop grid (image /
     content / stepper / price) vouwt op mobiel naar een 2×2 area-grid
     met afbeelding links, content rechts, en de stepper + prijs in een
     tweede rij eronder. Voorkomt dat de Stepper full-width strekt. */
.sg-configurator div.sg-cart-line[style*="grid-template-columns"] {
    grid-template-columns: 80px 1fr !important;
    grid-template-areas: "img content" "stepper price" !important;
    gap: 12px 14px !important;
    align-items: start !important;
  }.sg-configurator .sg-cart-line > *:nth-child(1) { grid-area: img; width: 80px !important; height: 80px !important; }.sg-configurator .sg-cart-line > *:nth-child(2) { grid-area: content; min-width: 0; }.sg-configurator .sg-cart-line > *:nth-child(3) { grid-area: stepper; justify-self: start !important; align-self: center !important; }.sg-configurator .sg-cart-line > *:nth-child(4) { grid-area: price;   justify-self: end !important;   align-self: center !important; }/* Some grids must KEEP their original column count on mobile (gallery thumbs). */
.sg-configurator div[data-keep-cols="4"] { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }.sg-configurator div[data-keep-cols="3"] { grid-template-columns: repeat(3, 1fr) !important; }/* Track & trace timeline must stay horizontal — only shrink labels */
.sg-configurator div[data-track-timeline] { grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; }.sg-configurator div[data-track-timeline] > div > div:last-child { font-size: 11px !important; line-height: 1.2 !important; }.sg-configurator div[data-track-timeline] > div > div:first-child > div:first-child { width: 18px !important; height: 18px !important; font-size: 10px !important; }/* Sidebars unstick on mobile so they don't cover content */
.sg-configurator aside { position: static !important; }/* Display sizes shrink */
.sg-configurator h1.sg, .sg-configurator .sg-h1 { font-size: clamp(36px, 9vw, 56px) !important; }.sg-configurator h2.sg, .sg-configurator .sg-h2 { font-size: clamp(28px, 7vw, 40px) !important; }/* Section vertical rhythm tighter */
.sg-configurator section { padding-top: 48px !important; padding-bottom: 48px !important; padding-left: 18px !important; padding-right: 18px !important; }/* Demo bar wraps */
.sg-configurator .demo-bar { flex-wrap: wrap !important; max-width: calc(100vw - 24px); }.sg-configurator .demo-bar button { font-size: 11px !important; padding: 4px 10px !important; }/* Cart drawer goes full-width */
.sg-configurator aside[style*="width: 440px"] { width: 100vw !important; }.sg-configurator aside[style*="width: 420px"] { width: 100vw !important; }/* Search overlay — tighter padding, smaller close button, hide kbd tip */
.sg-configurator .sg-search__inner { padding: 16px 14px !important; }.sg-configurator .sg-search__bar { padding: 10px 10px 10px 14px !important; gap: 8px !important; }.sg-configurator .sg-search__bar input { font-size: 15px !important; }.sg-configurator .sg-search__bar > button { width: 30px !important; height: 30px !important; }.sg-configurator .sg-search__callout { flex-direction: row !important; align-items: center !important; gap: 10px !important; padding: 12px 14px !important; }.sg-configurator .sg-search__callout > div { flex: 1 1 0 !important; min-width: 0 !important; }.sg-configurator .sg-search__callout .sg-script { font-size: 18px !important; margin-bottom: 2px !important; }.sg-configurator .sg-search__callout .sg-caption { font-size: 11px !important; line-height: 1.3 !important; }.sg-configurator .sg-search__callout button { align-self: center; flex-shrink: 0; padding: 8px 12px !important; font-size: 12px !important; }.sg-configurator .sg-search__footer span:first-child { display: none !important; }.sg-configurator .sg-search__footer { justify-content: center !important; }/* Footer — really tuned, not just folded. */
.sg-configurator footer { padding: 56px 20px 24px !important; }/* Brand block on top, then a 2-col link grid under it. The first child
     of footer's main grid is the brand block; the rest are link columns. */
.sg-configurator footer > div:first-child > div:first-child { margin-bottom: 12px; }/* Link cols form a 2-col grid on mobile (compact). */
.sg-configurator footer ul { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px 14px !important; }/* Newsletter form goes full-width and the button drops below the input. */
.sg-configurator footer form { max-width: none !important; flex-wrap: wrap !important; }.sg-configurator footer form > input { flex-basis: 100% !important; }.sg-configurator footer form > button { flex-basis: 100% !important; justify-content: center; }/* Bottom strip stacks */
.sg-configurator footer > div:last-child { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }/* Category filter rail — mobile collapse */
.sg-configurator .sg-filter-toggle { display: flex !important; }.sg-configurator aside[data-filters-open="false"] { display: none !important; }.sg-configurator html, .sg-configurator { overflow-x: hidden !important; }.sg-configurator, .sg-configurator #root { max-width: 100vw !important; }.sg-configurator img { max-width: 100% !important; height: auto; }.sg-configurator section { padding-left: 16px !important; padding-right: 16px !important; }.sg-configurator section > div { max-width: 100% !important; box-sizing: border-box; }/* Flex rows with gap wrap on mobile so button rows never overflow. */
.sg-configurator [style*="display: flex"][style*="gap"] { flex-wrap: wrap !important; }/* Hero CTA rows (gap 10–14px between sg-btns) stack vertically full-width. */
.sg-configurator [style*="display: flex"][style*="gap: 12"] > .sg-btn, .sg-configurator [style*="display: flex"][style*="gap: 14"] > .sg-btn, .sg-configurator [style*="display: flex"][style*="gap: 10"] > .sg-btn { flex: 1 1 100%; }/* Catch big inline-sized headings beyond the .sg-h1/.sg-h2 classes */
.sg-configurator h1[style*="fontSize"], .sg-configurator h1[style*="font-size"] { font-size: clamp(34px, 9vw, 52px) !important; line-height: 1.05 !important; }.sg-configurator h2[style*="fontSize"], .sg-configurator h2[style*="font-size"] { font-size: clamp(26px, 7vw, 36px) !important; }.sg-configurator div[style*="fontFamily: var(--sg-font-script)"][style*="fontSize"], .sg-configurator .sg-script { font-size: clamp(28px, 7vw, 36px) !important; }/* PDP info tabs — 4 wide Dutch labels never fit horizontally at 390px,
     and a scroll-snap row that only shows 2.5 tabs reads as broken. On
     mobile we flip the row to a 2×2 grid — all 4 tabs visible, equal-
     width, no scrolling. Active state keeps the bottom underline. */
.sg-configurator .sg-pdp-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }.sg-configurator .sg-pdp-tab {
    padding: 13px 10px !important;
    font-size: 13px !important;
    white-space: normal !important;
    text-align: center;
    border-right: 1px solid var(--sg-border) !important;
    border-bottom: 1px solid var(--sg-border) !important;
    margin-bottom: 0 !important;
  }/* Remove the trailing edges so the grid sits flush against the card. */
.sg-configurator .sg-pdp-tab:nth-child(2n) { border-right: none !important; }.sg-configurator .sg-pdp-tab:nth-child(n+3) { border-bottom: none !important; }/* Active state — keep accent underline as a 2px bottom inset so it
     reads above the grid line. */
.sg-configurator .sg-pdp-tab[data-active="true"] {
    box-shadow: inset 0 -2px 0 0 var(--sg-accent);
  }.sg-configurator .sg-pdp-tabs-body { padding: 20px 18px !important; }.sg-configurator .sg-pdp-tabs-card { margin-top: 32px !important; border-radius: 18px !important; }/* Upsell ("Maak het compleet") section header — heading wraps to 2 lines
     on narrow screens, which pulled the −€5 sticker into a vertical
     squeeze on the right. Stack vertically with the sticker first so it
     reads as a callout above the title. */
.sg-configurator .sg-upsell-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }.sg-configurator .sg-upsell-head > span.sg-sticker { order: -1; }

}.sg-configurator .sg-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: var(--sg-font-body);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 38px 10px 14px;
  border: 1.5px solid var(--sg-border);
  border-radius: 999px;
  background-color: var(--sg-paper);
  color: var(--sg-ink);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1A17' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  line-height: 1.2;
}.sg-configurator .sg-select:focus {
  outline: none;
  border-color: var(--sg-accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--sg-accent) 18%, transparent);
}/* ── Arrow link — no underline ──────────────────────────── */
.sg-configurator .sg-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sg-accent-deep);
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color var(--sg-dur-fast) var(--sg-ease);
}.sg-configurator .sg-arrow-link span { transition: transform var(--sg-dur-base) var(--sg-ease); }.sg-configurator .sg-arrow-link:hover { color: var(--sg-ink); }.sg-configurator .sg-arrow-link:hover span { transform: translateX(3px); }.sg-configurator .sg-sticker {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--sg-accent);
  color: var(--sg-accent-contrast);
  font-family: var(--sg-font-body);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: var(--sg-radius-pill);
}.sg-configurator .sg-sticker--circle {
  width: 80px; height: 80px;
  border-radius: 50%;
  font-family: var(--sg-font-script);
  font-weight: 600;
  font-size: 19px;
  text-transform: none;
  letter-spacing: 0;
  text-align: center;
  line-height: 1.0;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-8deg);
}/* ── Mobile-only conversion patterns (re-added) ───────────
   Bottom nav bar + sticky PDP add-to-cart. Hidden on desktop. */
.sg-configurator .sg-bottom-nav, .sg-configurator .sg-pdp-sticky-cta { display: none; }@media (max-width: 720px) {
.sg-configurator .sg-bottom-nav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: color-mix(in oklab, var(--sg-cream) 96%, transparent);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-top: 1px solid var(--sg-border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }.sg-configurator { padding-bottom: 70px; }.sg-configurator .sg-pdp-sticky-cta {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 64px; z-index: 61;
    background: var(--sg-cream);
    border-top: 1px solid var(--sg-border);
    box-shadow: 0 -8px 24px rgba(60, 40, 20, 0.10);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }.sg-configurator .sg-pdp-sticky-cta__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    max-width: 1200px; margin: 0 auto;
  }.sg-configurator .sg-pdp-sticky-cta__inner > .sg-btn { flex: 1 1 auto !important; min-width: 0; }.sg-configurator .sg-pdp-sticky-cta__price { font-family: var(--sg-font-display); font-size: 24px; color: var(--sg-ink); line-height: 1; }.sg-configurator .sg-pdp-sticky-cta__sub { font-family: var(--sg-font-body); font-size: 11px; color: var(--sg-ink-3); font-weight: 600; margin-top: 2px; }.sg-configurator .sg-pdp-price-card { display: none !important; }/* Hide mobile bottom nav while the menu drawer is open */
.sg-configurator body:has(aside[style*="translateX(0px"]) .sg-bottom-nav { display: none !important; }

}.sg-configurator html, .sg-configurator { margin: 0; padding: 0; background: var(--sg-cream); }/* ── Map-editor specifieke layout ───────────────────────── */
.sg-configurator .map-editor__sticky-cta { display: none; }/* "Kaart bewerken" knop op de preview — eigen styling i.p.v.
       sg-btn-secondary, zodat de hover (ink-fill) niet vecht met
       de witte achtergrond. */
.sg-configurator .map-edit-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 9px 14px; border-radius: 999px;
      background: var(--sg-paper);
      color: var(--sg-ink);
      border: 1.5px solid var(--sg-ink);
      font-family: var(--sg-font-body); font-weight: 800; font-size: 12px;
      letter-spacing: 0.01em; line-height: 1; white-space: nowrap;
      cursor: pointer; user-select: none;
      box-shadow: var(--sg-shadow-sm);
      transition: background var(--sg-dur-fast) var(--sg-ease),
                  color var(--sg-dur-fast) var(--sg-ease),
                  transform var(--sg-dur-fast) var(--sg-ease),
                  box-shadow var(--sg-dur-fast) var(--sg-ease);
    }.sg-configurator .map-edit-btn:hover {
      background: var(--sg-ink); color: var(--sg-paper);
      box-shadow: var(--sg-shadow-md);
    }.sg-configurator .map-edit-btn:active { transform: scale(0.97); }.sg-configurator .map-reset-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px; border-radius: 999px;
      background: var(--sg-paper);
      color: var(--sg-ink-2);
      border: 1px solid var(--sg-border);
      font-family: var(--sg-font-body); font-weight: 700; font-size: 11px;
      cursor: pointer; box-shadow: var(--sg-shadow-xs);
      transition: background var(--sg-dur-fast) var(--sg-ease);
    }.sg-configurator .map-reset-btn:hover { background: var(--sg-cream-soft); }/* Tablet en mobiel — preview boven, panel onder */
@media (max-width: 1024px) {
.sg-configurator .map-editor { grid-template-columns: 1fr !important; gap: 28px !important; }.sg-configurator .map-editor__preview { position: static !important; }.sg-configurator .map-editor__panel { max-width: 720px; margin: 0 auto; width: 100%; }
    
}@media (max-width: 720px) {
.sg-configurator .map-editor__preview > div:first-child {
        padding: 20px 14px !important; min-height: 0 !important;
        border-radius: 18px !important;
      }.sg-configurator .map-editor__cta { display: none !important; }.sg-configurator .map-editor__sticky-cta {
        display: block;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
        background: var(--sg-cream);
        border-top: 1px solid var(--sg-border);
        box-shadow: 0 -8px 24px rgba(60, 40, 20, 0.10);
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
      }.sg-configurator { padding-bottom: 96px !important; }.sg-configurator .map-editor__preview .sg-script, .sg-configurator h1.sg, .sg-configurator .sg-h1 { font-size: clamp(30px, 8vw, 48px) !important; }.sg-configurator .map-grid-2 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }.sg-configurator .map-grid-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 8px  !important; }.sg-configurator .map-grid-4 { grid-template-columns: repeat(4, 1fr) !important; gap: 6px  !important; }.sg-configurator .map-grid-6 { grid-template-columns: repeat(6, 1fr) !important; gap: 6px  !important; }
    
}