/* ===== Skrifterne — fra vores egen server (05-10-2026), ikke Google Fonts: de samme filer og tegnsæt, som Google sendte til
   en moderne browser, hentet én gang. Ingen IP-adresse til Google og ingen ekstra forbindelser. Browseren henter kun en fil, når
   en tekst bruger skriften og dens tegnsæt (unicode-range). Inter, Cormorant Garamond og Oswald er variable: én fil pr. stil og
   tegnsæt dækker alle vægte. Skiftes en fil, så tæl ?v= op — woff2 gemmes et år. ===== */
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-italic-cyrillic-ext.woff2?v=1) 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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-italic-cyrillic.woff2?v=1) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-italic-vietnamese.woff2?v=1) 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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-italic-latin-ext.woff2?v=1) 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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-italic-latin.woff2?v=1) 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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-italic-cyrillic-ext.woff2?v=1) 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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-italic-cyrillic.woff2?v=1) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-italic-vietnamese.woff2?v=1) 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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-italic-latin-ext.woff2?v=1) 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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-italic-latin.woff2?v=1) 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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-normal-cyrillic-ext.woff2?v=1) 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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-normal-cyrillic.woff2?v=1) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-normal-vietnamese.woff2?v=1) 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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-normal-latin-ext.woff2?v=1) 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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-normal-latin.woff2?v=1) 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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-normal-cyrillic-ext.woff2?v=1) 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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-normal-cyrillic.woff2?v=1) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-normal-vietnamese.woff2?v=1) 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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-normal-latin-ext.woff2?v=1) 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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-normal-latin.woff2?v=1) 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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-normal-cyrillic-ext.woff2?v=1) 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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-normal-cyrillic.woff2?v=1) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-normal-vietnamese.woff2?v=1) 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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-normal-latin-ext.woff2?v=1) 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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/cormorant-garamond-normal-latin.woff2?v=1) 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: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-cyrillic-ext.woff2?v=1) 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: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-cyrillic.woff2?v=1) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-greek-ext.woff2?v=1) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-greek.woff2?v=1) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-vietnamese.woff2?v=1) 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: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-latin-ext.woff2?v=1) 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: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-latin.woff2?v=1) 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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-cyrillic-ext.woff2?v=1) 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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-cyrillic.woff2?v=1) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-greek-ext.woff2?v=1) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-greek.woff2?v=1) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-vietnamese.woff2?v=1) 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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-latin-ext.woff2?v=1) 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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-latin.woff2?v=1) 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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-cyrillic-ext.woff2?v=1) 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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-cyrillic.woff2?v=1) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-greek-ext.woff2?v=1) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-greek.woff2?v=1) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-vietnamese.woff2?v=1) 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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-latin-ext.woff2?v=1) 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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-latin.woff2?v=1) 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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-cyrillic-ext.woff2?v=1) 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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-cyrillic.woff2?v=1) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-greek-ext.woff2?v=1) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-greek.woff2?v=1) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-vietnamese.woff2?v=1) 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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-latin-ext.woff2?v=1) 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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-latin.woff2?v=1) 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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-cyrillic-ext.woff2?v=1) 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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-cyrillic.woff2?v=1) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-greek-ext.woff2?v=1) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-greek.woff2?v=1) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-vietnamese.woff2?v=1) 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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-latin-ext.woff2?v=1) 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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/inter-normal-latin.woff2?v=1) 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(../assets/fonts/oswald-normal-cyrillic-ext.woff2?v=1) 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(../assets/fonts/oswald-normal-cyrillic.woff2?v=1) 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(../assets/fonts/oswald-normal-vietnamese.woff2?v=1) 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(../assets/fonts/oswald-normal-latin-ext.woff2?v=1) 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(../assets/fonts/oswald-normal-latin.woff2?v=1) 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(../assets/fonts/oswald-normal-cyrillic-ext.woff2?v=1) 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(../assets/fonts/oswald-normal-cyrillic.woff2?v=1) 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(../assets/fonts/oswald-normal-vietnamese.woff2?v=1) 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(../assets/fonts/oswald-normal-latin-ext.woff2?v=1) 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(../assets/fonts/oswald-normal-latin.woff2?v=1) 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;
}

/* ===== Tokens — quiet luxury, off-black + gold ===== */
:root {
  /* Sidens sorte er den samme som filmsektionernes (#050505) og som
     hero-fotoets egen baggrund, der tegner som rgb(4,4,4). Den stod paa
     #080808 foer, og saa laa der en haard kant tvaers over skaermen dér,
     hvor fotoet slutter og siden begynder — maalt: et spring fra 4 til 8 paa
     én raekke. Fire trin lyder af ingenting, men en lige linje henover hele
     bredden ser oejet med det samme. Nu er springet ét trin. */
  --bg: #050505;
  --bg-elevated: #101010;
  --bg-elevated-2: #161616;
  --ink: #f4f2ec;
  --ink-soft: #a8a49c;
  --ink-faint: #837f77;   /* 4,5:1 på alle mørke flader (WCAG AA); var #6f6b63 = 3,6–3,8:1 */
  --gold: #d4af37;
  --gold-bright: #e9c96a;
  --gold-dim: rgba(212, 175, 55, 0.5);
  --line: rgba(244, 242, 236, 0.1);
  --line-soft: rgba(244, 242, 236, 0.05);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --maxw: 1320px;
  /* One vertical rhythm for every band, so sections never drift apart. */
  --section-y: clamp(84px, 10vw, 150px);
  /* Butiksdelen af forsiden (fra "Inde i boksen" og ned) staar taet som Diturs:
     ét mellemrum mellem to afsnit, ikke to oven i hinanden. */
  --butik-luft: clamp(36px, 4.5vw, 64px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  letter-spacing: 0;
  text-wrap: balance;
  color: var(--ink);
}

p { line-height: 1.7; color: var(--ink-soft); margin: 0; }

::selection { background: var(--gold); color: #080808; }

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
/* Uden JavaScript toner intet ind — så skal indholdet stå fremme med det samme, ellers er siden tom. */
@media (scripting: none) { .reveal { opacity: 1; transform: none; transition: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transform: none; transition: opacity 0.3s ease; }
  .btn:hover, .btn:active { transform: none; }
  .watch-card:hover { transform: none; }
}

/* ===== Eyebrow / small caps label ===== */
.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ===== Buttons & links ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 34px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { background: var(--gold); color: #080808; }
.btn:active { transform: scale(0.97); transition: transform 0.1s ease-out; }
.btn:disabled, .btn[aria-disabled="true"] { cursor: default; opacity: 0.6; background: transparent; color: var(--ink); }
.btn[aria-disabled="true"]:active { transform: none; }
.btn--solid { background: var(--gold); color: #080808; }
.btn--solid:hover { background: var(--gold-bright); }
.btn--full { width: 100%; }
.btn--sm { padding: 10px 22px; font-size: 0.7rem; }

.link-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--gold-dim);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.link-line:hover { color: var(--ink); border-color: var(--gold); }

/* ===== Nav ===== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(8, 8, 8, 0.55);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s ease, background 0.4s ease;
}
.nav.is-scrolled { border-bottom-color: var(--line); background: rgba(8, 8, 8, 0.85); }
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  /* The compass rose sits on the wordmark's baseline, not its box, so the
     two read as one lockup rather than an icon beside some text. */
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand-mark {
  width: 22px;
  height: 22px;
  flex: none;
  display: block;
}
.nav__links {
  display: flex;
  gap: 40px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex: 1;
  justify-content: center;
}
.nav__links a { position: relative; padding-bottom: 4px; }
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transition: right 0.3s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { right: 0; }
.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__actions { display: flex; align-items: center; gap: 22px; }
.cart-link { position: relative; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--ink); }
.cart-link svg { width: 20px; height: 20px; }
.cart-link:hover { color: var(--ink); }
.cart-badge {
  position: absolute;
  top: -4px; right: -6px;
  min-width: 15px; height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--gold);
  color: #080808;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}
/* The burger opens the drawer menu on every width, as on the source site. */
.nav__burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 26px; height: 30px; padding: 0; background: none; border: none; cursor: pointer; }
.nav__burger span { height: 1px; background: var(--ink); transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease; }
.nav__burger:hover span { background: var(--gold); }
.nav__burger:active span { opacity: 0.5; }
.nav__mobile { display: none; flex-direction: column; padding: 8px 40px 24px; gap: 4px; border-top: 1px solid var(--line); }
.nav__mobile a { padding: 14px 0; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); }
.nav.is-open .nav__mobile { display: flex; }
.nav.is-open { background: rgba(8, 8, 8, 0.97); }

/* ===== Soegefeltet i toppen (scripts/soeg-html.js, js/script.js) =====
   Diturs form: en raekke under logoet med et lyst felt og en lup. Den foldes ind,
   naar man ruller ned (.nav--soeg-skjult), og ud igen, naar man ruller op.
   16 px i feltet, ellers zoomer iOS ind, naar man trykker i det. */
/* Slank og tæt under logo-raekken (22-09-2026, efter oenske: "mindre bred, saa den
   kan passe lige under"): 36 px felt, trukket 10 px op mod raekken, 10 px luft under
   — toppen gaar fra 75 til 111 px, ikke 137. Aldrig bredere end logo-raekken, og paa
   en stor skaerm hoejst 560 px, centreret. */
.nav__soeg {
  max-width: calc(560px + 80px); margin: -10px auto 0; padding: 0 40px 10px;
  max-height: 60px; opacity: 1;
  transition: max-height 0.32s var(--ease), padding 0.32s var(--ease), margin 0.32s var(--ease), opacity 0.22s ease;
}
.nav--soeg-skjult .nav__soeg { max-height: 0; margin-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.nav__soeg-form { position: relative; display: flex; align-items: center; }
.nav__soeg-felt {
  flex: 1; min-width: 0; height: 36px; padding: 0 44px 0 14px;
  font: 400 16px/1 var(--font-sans); color: #121212;
  background: var(--ink); border: 1px solid transparent; border-radius: 8px;
  -webkit-appearance: none; appearance: none;
}
.nav__soeg-felt::placeholder { color: #837f77; opacity: 1; }
.nav__soeg-felt::-webkit-search-cancel-button { -webkit-appearance: none; }
.nav__soeg-felt:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.35); }
.nav__soeg-knap {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 34px;
  background: none; border: 0; border-radius: 6px; color: #121212; cursor: pointer;
}
.nav__soeg-knap svg { width: 19px; height: 19px; }
.nav__soeg-knap:hover, .nav__soeg-knap:focus-visible { color: #8d6620; }
.nav__soeg-forslag {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5;
  max-height: min(70vh, 460px); overflow-y: auto;
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6); padding: 6px;
}
.nav__soeg-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px;
  color: var(--ink); font-size: 0.92rem;
}
.nav__soeg-item img { width: 40px; height: 40px; object-fit: contain; flex: none; background: #0b0b0b; border-radius: 6px; }
.nav__soeg-navn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__soeg-item small { flex: none; color: var(--ink-faint); font-size: 0.8rem; }
.nav__soeg-item:hover, .nav__soeg-item.is-aktiv { background: var(--bg-elevated-2); color: var(--ink); }
.nav__soeg-tom { margin: 0; padding: 12px 10px; color: var(--ink-faint); font-size: 0.88rem; }
.nav__soeg-alle {
  display: block; width: 100%; margin-top: 4px; padding: 12px 10px; text-align: left;
  background: none; border: 0; border-top: 1px solid var(--line); color: var(--ink);
  font: 500 0.88rem var(--font-sans); cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .nav__soeg { transition: none; } }

/* ===== Sub-nav (collection jump bar) ===== */
.subnav {
  position: fixed;
  top: var(--nav-height, 78px);
  left: 0; right: 0;
  z-index: 900;
  background: rgba(16, 16, 16, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.subnav.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.subnav__inner { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; height: 52px; display: flex; align-items: center; gap: 28px; }
.subnav__name { font-family: var(--font-display); font-size: 1rem; color: var(--ink); white-space: nowrap; }
.subnav__links { display: flex; gap: 24px; flex: 1; justify-content: center; }
.subnav__links button {
  background: none; border: none; font-family: var(--font-sans); cursor: pointer;
  color: var(--ink-faint); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 0;
}
.subnav__links button.is-active, .subnav__links button:hover { color: var(--ink); }
.subnav__buy { background: var(--gold); color: #080808; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 18px; white-space: nowrap; }
@media (max-width: 900px) { .subnav { display: none; } }

/* ===== Cinematic hero ===== */
.hero-cinema {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* The watch occupies the upper frame; the copy sits under it. */
  justify-content: flex-end;
  padding-bottom: 10vh;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, #141414 0%, var(--bg) 70%);
}
#watchCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-cinema__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,8,0.2) 0%, rgba(8,8,8,0) 28%, rgba(8,8,8,0.25) 52%, rgba(8,8,8,0.88) 74%, rgba(8,8,8,0.97) 100%);
  pointer-events: none;
}
.hero-cinema__content { position: relative; z-index: 2; padding: 0 24px; }
.hero-cinema__headline {
  margin-top: 0;
  font-size: clamp(2.2rem, 5.5vw, 4.4rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
  max-width: 900px;
}
.hero-cinema__sub {
  margin: 22px auto 0;
  max-width: 420px;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.hero-cinema__actions { margin-top: 40px; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.hero-cinema__scroll {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--ink-faint);
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
/* JS sets the from-state via gsap.set() right before animating in, so the
   hero is never stuck invisible if a script fails to load. */
.hero-cinema__scroll-line { width: 1px; height: 36px; background: linear-gradient(180deg, var(--gold), transparent); }

/* ===== Narrative sections (story, macro) ===== */
.story {
  padding: var(--section-y) 24px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.story__title {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-style: italic;
  line-height: 1.35;
  margin-top: 22px;
}
.story__title em { color: var(--ink); font-style: italic; }
.story__text { margin-top: 24px; }
.story__link { margin-top: 32px; }

.macro { position: relative; background: #050505; padding: 0; }
.macro__inner { max-width: var(--maxw); margin: 0 auto; padding: var(--section-y) 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.macro__media { position: relative; aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 38%, #26262a 0%, #131316 55%, #0b0b0c 100%); }
.macro__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; opacity: 0; transition: opacity 0.6s ease; }
.macro__media img.is-active { opacity: 1; }
.macro__text .eyebrow { margin-bottom: 20px; }
.macro__title { font-size: clamp(1.8rem, 3vw, 2.6rem); font-style: italic; margin-bottom: 24px; }
.macro__list { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-direction: column; gap: 0; }
.macro__list li { display: flex; justify-content: space-between; padding: 16px 0; border-top: 1px solid var(--line-soft); font-size: 0.85rem; }
.macro__list li:last-child { border-bottom: 1px solid var(--line-soft); }
.macro__list span:first-child { color: var(--ink-faint); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; }
.macro__list span:last-child { color: var(--ink); font-family: var(--font-display); font-size: 1.05rem; }

/* ===== Exploded assembly — CSS-drawn parts that converge on scroll ===== */
/* ===== Construction: a typographic band. An illustration here would be a
   drawing of a watch rather than a watch, so the section states the four
   decisions in words and lets the collection do the showing. ===== */
.build { padding: var(--section-y) 24px; border-top: 1px solid var(--line); }
.build__head { max-width: 720px; margin: 0 auto; text-align: center; }
.build__lead { margin-top: 22px; color: var(--ink-soft); }
.build__grid {
  max-width: var(--maxw);
  margin: 80px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.build__item { border-top: 1px solid var(--line); padding-top: 24px; }
.build__num {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  color: var(--ink);
  margin-bottom: 16px;
}
.build__item h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; margin: 0 0 10px; }
.build__item p { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.65; margin: 0; }

/* ===== Collection filter bar ===== */
.filters { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 48px 0 60px; }
.filters button {
  background: none; border: 1px solid var(--line); color: var(--ink-soft);
  font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 11px 22px; border-radius: 999px; cursor: pointer; transition: all 0.25s ease;
}
.filters button:hover { border-color: var(--gold-dim); color: var(--ink); }
.filters button.is-active { background: var(--gold); border-color: var(--gold); color: #080808; }

/* ===== Watch bento grid ===== */
.watch-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px 160px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.watch-card {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: 40px 32px 32px;
  perspective: 1000px;
  transition: background 0.4s ease, transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  display: flex;
  flex-direction: column;
}
.watch-card[hidden] { display: none; }
.watch-card:hover { background: var(--bg-elevated-2); transform: translateY(-4px); box-shadow: 0 24px 48px rgba(0,0,0,0.45); }
.watch-card__media {
  position: relative;
  aspect-ratio: 1;
  margin-bottom: 28px;
  border-radius: var(--radius-md);
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
  display: flex; align-items: center; justify-content: center;
}
.watch-card__media > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
/* Product photographs come in every proportion — a bracelet is wide, a watch is
   tall — so the image sits inside a 78% square and keeps its own aspect ratio
   rather than being pulled to the width/height attributes. */
.watch-card__media img { width: 78%; height: 78%; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6)); }
.watch-card__edition {
  position: absolute; top: 0; left: 0;
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
  border: 1px solid var(--gold-dim); border-radius: 999px; padding: 5px 12px;
}
.watch-card__id { font-size: 0.68rem; letter-spacing: 0.14em; color: var(--ink-faint); text-transform: uppercase; }
.watch-card__name { font-family: var(--font-display); font-size: 1.5rem; margin-top: 6px; }
.watch-card__specs { margin-top: 10px; font-size: 0.78rem; color: var(--ink-faint); line-height: 1.6; min-height: 44px; }
.watch-card__foot { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.watch-card__price { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); }


/* ===== Kredsen — the membership (replaced the private waitlist) =====
   Same principle as Club Ditur: six grades, bronze to black, points on every
   purchase — in Nordur's own clothes. The grades are six metal cards fanned
   like a hand, each with the star, the name and the seal. The seal stays
   from the waitlist: it is the one thing that does not change with the grade,
   and the copy says so. The cards are pure CSS — no image to fetch, and they
   render crisp at any density. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* hidden-attributten skal vinde over enhver display-regel (.contact__form er
   flex, .skift er grid) — ellers staar begge formularer paa medlem.html fremme
   paa én gang. */
[hidden] { display: none !important; }
.kreds { padding: 0 24px var(--butik-luft); text-align: center; position: relative; isolation: isolate; }
.kreds::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 40%; translate: -50% -50%;
  width: min(900px, 96vw); aspect-ratio: 1;
  background: radial-gradient(circle,
    rgba(212,175,55,0.14) 0%, rgba(212,175,55,0.055) 36%, rgba(212,175,55,0) 68%);
}
.kreds__card {
  max-width: 980px; margin: 0 auto;
  padding: clamp(40px, 6vw, 64px) clamp(18px, 4.5vw, 56px);
  background: linear-gradient(180deg, rgba(26,22,14,0.92) 0%, rgba(11,10,9,0.92) 100%);
  border: 1px solid rgba(212,175,55,0.22);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px rgba(0,0,0,0.55), inset 0 1px 0 rgba(212,175,55,0.14);
}

/* The fan. Each card rotates about a point well below it, so they spread
   sideways like a hand of cards; --i is the card's place, 0-5. What shows
   of a lower card is a wedge along its LEFT edge, widest at the top — so
   the star, the name and the grade sit in the top-left corner, where they
   can be read on every card, and only the top card shows its seal whole.
   12 degrees a step and the origin at 210 % give a 62 px wedge at the top
   of a 140 px card, enough for "6 DIAMANT"; the outer cards then land
   92 px out, 324 px in all, inside a phone's 342. */
.kort--bronze  { --m1: #cf9a6c; --m2: #8a5a35; --m3: #e6b98e; }
.kort--soelv   { --m1: #e4e4e4; --m2: #9a9a9a; --m3: #f6f6f6; }
.kort--guld    { --m1: #f1d27c; --m2: #b48a2b; --m3: #f8e3a3; }
.kort--platin  { --m1: #ece9e1; --m2: #b9b5aa; --m3: #f7f5ef; }
.kort--diamant { --m1: #dfeaf2; --m2: #a4b8c8; --m3: #f1f7fb; }
.kort--sort    { --m1: #303030; --m2: #0d0d0d; --m3: #3d3d3d; color: var(--gold-bright); }
/* the seal, small in the corner — the same on every card */

.kreds__segl { display: block; width: clamp(72px, 13vw, 100px); height: auto; margin: 0 auto 28px; }
.kreds__title { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-style: italic; margin-top: 20px; }
.kreds__sub { margin: 18px auto 0; max-width: 520px; }

/* the six benefits, star-marked, two columns from tablet up */
.kreds__fordele {
  list-style: none; margin: 40px auto 0; padding: 0; max-width: 640px;
  display: grid; grid-template-columns: 1fr; gap: 12px 32px; text-align: left;
}
.kreds__fordele li { position: relative; padding-left: 26px; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.5; }
.kreds__fordele li::before {
  content: ""; position: absolute; left: 0; top: 0.28em; width: 14px; height: 14px;
  background: url("../assets/logo.svg") center / contain no-repeat;
}

/* the grades: one row per grade on a phone, a 3 x 2 grid from tablet up */
.kreds__grader {
  list-style: none; margin: 48px auto 0; padding: 0; max-width: 860px;
  display: grid; grid-template-columns: 1fr; gap: 12px; text-align: left; counter-reset: grad;
}
.grad {
  display: grid; grid-template-columns: 44px 1fr; gap: 6px 14px; align-items: center;
  padding: 18px 18px 18px 16px;
  background: rgba(255,255,255,0.025); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.grad__chip {
  width: 44px; height: 28px; border-radius: 5px; display: grid; place-items: center;
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500; color: #1c1610;
  background-image:
    repeating-linear-gradient(100deg, rgba(255,255,255,0.06) 0 1px, rgba(0,0,0,0) 1px 3px),
    linear-gradient(135deg, var(--m1) 0%, var(--m2) 55%, var(--m3) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 2px 6px rgba(0,0,0,0.4);
}
.grad--bronze  { --m1: #cf9a6c; --m2: #8a5a35; --m3: #e6b98e; }
.grad--soelv   { --m1: #e4e4e4; --m2: #9a9a9a; --m3: #f6f6f6; }
.grad--guld    { --m1: #f1d27c; --m2: #b48a2b; --m3: #f8e3a3; }
.grad--platin  { --m1: #ece9e1; --m2: #b9b5aa; --m3: #f7f5ef; }
.grad--diamant { --m1: #dfeaf2; --m2: #a4b8c8; --m3: #f1f7fb; }
.grad--sort    { --m1: #303030; --m2: #0d0d0d; --m3: #3d3d3d; }
.grad--sort .grad__chip { color: var(--gold-bright); box-shadow: 0 0 0 1px rgba(212,175,55,0.35), 0 2px 6px rgba(0,0,0,0.5); }
.grad__hoved { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.grad__navn { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); line-height: 1; }
.grad__fra { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.grad__liste { grid-column: 2; list-style: none; margin: 0; padding: 0; font-size: 0.84rem; color: var(--ink-soft); line-height: 1.55; }
.grad__liste li { position: relative; padding-left: 14px; }
.grad__liste li::before { content: "·"; position: absolute; left: 0; color: var(--gold); }

.kreds__actions { margin: 44px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.kreds__more { display: inline-block; margin-top: 22px; }
.kreds--side { padding-top: 0; }
.kreds--side .kreds__sub { margin-top: 8px; }
.policy .kreds__grader { max-width: 980px; margin: 32px auto 56px; padding: 0 24px; }
.policy__list strong { color: var(--ink); font-weight: 500; }

/* ===== Medlem (medlem.html): sheet'et med log ind / bliv medlem =====
   Opbygningen er Diturs login-sheet 1:1 — luk-kryds, skiftet, felter med
   etiketten paa rammen og et ikon i feltet, oeje paa adgangskoden, stor
   knap, "Glemt din adgangskode?" og "Er du ikke allerede medlem?" — i
   Nordurs farver. */
.medlem { padding: 0 24px var(--section-y); }
.medlem__inner { max-width: 520px; margin: 0 auto; }
.medlem__sheet {
  position: relative;
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 76px 22px 28px;
  box-shadow: 0 40px 90px rgba(0,0,0,0.5);
}
.medlem__luk {
  position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.medlem__luk:hover { border-color: var(--gold); color: var(--ink); }
.medlem__luk svg { width: 18px; height: 18px; }
.skift {
  display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 28px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
}
.skift button {
  border: none; background: none; color: var(--ink-soft); cursor: pointer; padding: 16px 10px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.skift button.is-aktiv { background: var(--gold); color: #080808; }
.skift button { white-space: nowrap; }
@media (max-width: 360px) { .skift button { font-size: 0.72rem; letter-spacing: 0.08em; padding: 15px 6px; } }
.medlem__form { display: flex; flex-direction: column; gap: 20px; }
.medlem__titel { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; color: var(--ink); margin: 0; }
.medlem__tekst { margin: -8px 0 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; }
/* feltet: etiketten sidder PAA rammen som en lille brik, ikonet inde i feltet */
.felt { position: relative; }
.felt__etiket {
  position: absolute; z-index: 1; top: -11px; left: 14px; padding: 3px 9px;
  font-size: 0.74rem; line-height: 1.3; color: var(--ink-faint);
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 8px;
}
.felt__ikon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-faint); pointer-events: none; }
.felt__input {
  display: block; width: 100%; box-sizing: border-box; height: 60px; padding: 18px 16px 12px 46px;
  font-family: var(--font-sans); font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px; outline: none;
  transition: border-color 0.3s var(--ease);
}
.felt__input:focus { border-color: var(--gold); }
.felt__input[aria-invalid="true"] { border-color: #e08a7a; }   /* indmeldelsen markerer felter med fejl (js/medlem.js) */
.medlem__check input[aria-invalid="true"] { outline: 2px solid #e08a7a; outline-offset: 2px; }
.medlem__felt-fejl { margin: -4px 0 2px; font-size: 0.85rem; line-height: 1.4; color: #e08a7a; }   /* fejlen lige under feltet (indmeldelsen) */
.felt:focus-within .felt__etiket { color: var(--ink); }
.felt:focus-within .felt__ikon { color: var(--gold); }
.felt--uden-ikon .felt__input { padding-left: 16px; }
.felt--kode .felt__input { padding-right: 56px; }
select.felt__input {
  appearance: none; -webkit-appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a49c' stroke-width='1.6' 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 16px center; background-size: 18px;
}
.felt__oeje {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  border: none; background: none; color: var(--ink-faint); cursor: pointer; display: grid; place-items: center;
}
.felt__oeje:hover { color: var(--ink); }
.felt__oeje svg { width: 20px; height: 20px; grid-area: 1 / 1; }
.felt__oeje .oeje--fra { display: none; }
.felt__oeje[aria-pressed="true"] .oeje--til { display: none; }
.felt__oeje[aria-pressed="true"] .oeje--fra { display: block; }
.btn--stor { padding: 21px 34px; font-size: 0.82rem; }
.medlem__glemt { align-self: flex-end; margin-top: -6px; color: var(--ink); font-size: 0.92rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.medlem__glemt:hover { color: var(--ink); }
.medlem__andet { margin-top: 10px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.medlem__andet h3 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.medlem__andet p { margin: 0 0 12px; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; }
.medlem__andet a { color: var(--ink); font-size: 0.95rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.medlem__andet a:hover { color: var(--ink); }
.medlem__hint { display: block; font-size: 0.78rem; color: var(--ink-faint); line-height: 1.5; }
.felt .medlem__hint { margin-top: 8px; }
.medlem__hint--op { margin-top: -12px; }
.medlem__check { display: flex; align-items: flex-start; gap: 12px; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; cursor: pointer; }
.medlem__check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold); flex: none; }
/* Medlemsnummeret staar i taller med fast bredde, saa "1234 5678" er let at skrive af. */
.minside__nr { font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.medlem__check a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.medlem__status { min-height: 20px; font-size: 0.85rem; color: var(--ink); margin: 0; }
.medlem__status:empty { display: none; }
.medlem__status.is-fejl { color: #e08a7a; }
.medlem__link { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-sans); font-size: 0.78rem; color: var(--ink-faint); text-decoration: underline; text-underline-offset: 4px; }
.medlem__link:hover { color: var(--ink-soft); }
.minside__links { margin-top: 28px; display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
.minside__boks { margin-top: 20px; padding: 28px 22px 22px; border: 1px solid var(--line); border-radius: var(--radius-md); text-align: left; }

/* min side: ét kort i medlemmets egen grad, stort og stille */
.minside { text-align: center; }
.minside__hilsen { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--ink); margin: 0 0 28px; min-height: 1.2em; }
.minside__siden { margin: 18px 0 0; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.minside__dl { margin: 32px auto 0; display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; text-align: left; max-width: 400px; }
.minside__dl dt { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); padding-top: 3px; }
.minside__dl dd { margin: 0; color: var(--ink); font-size: 0.95rem; overflow-wrap: anywhere; }
.minside__naeste { margin: 24px 0 0; color: var(--ink); font-size: 0.9rem; }
.minside__knapper { margin: 32px auto 0; max-width: 400px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.minside__knapper .btn { width: 100%; padding-inline: 12px; letter-spacing: 0.12em; text-align: center; line-height: 1.3; }
.minside .historik { max-width: 400px; }
.minside__boks { width: 100%; max-width: 400px; margin-inline: auto; }
@media (max-width: 480px) { .minside__knapper { grid-template-columns: 1fr; } }
/* Under 1024 px: én spalte på 400 px, i samme rækkefølge som altid (kort, oplysninger, bjælke, knapper,
   listerne). De to spalter i HTML'en er kun til computeren, så her folder de sig ud (display: contents),
   og "order" lægger oplysningerne tilbage lige under kortet. Flex lægger ikke margener sammen, som
   blokke gør — derfor har kortet ingen top-margen her (hilsenens 28 px er afstanden). width: 100%
   holder de centrerede blokke i fuld bredde op til deres max-width, som i en almindelig blok. */
@media (max-width: 1023.98px) {
  .minside { display: flex; flex-direction: column; }
  .minside__kol, .minside__klister { display: contents; }
  .minside #msKort { margin-top: 0; }
  .minside__dl, .minside__bar, .minside__bar-ender, .minside__knapper, .minside .historik, .minside__afsnit, .minside__boks { width: 100%; }
  #msHilsen { order: 0; } #msKort { order: 1; } #msDrej { order: 1; } #msSiden { order: 2; } .minside__dl { order: 3; }
  #msBar { order: 4; } #msBarEnder { order: 5; } #msNaeste { order: 6; } .minside__knapper { order: 7; } #msSort { order: 7; } #msFordele { order: 7; } #msFoedsel { order: 7; } #msSkriv { order: 7; }
  #msHistorik { order: 8; } #msAnmeldelser { order: 9; } .minside__links { order: 10; } #skiftBoks { order: 11; } #sletBoks { order: 12; }
}
/* Fra 1024 px fylder min side computerskærmen i to spalter i et bredere ark: til venstre kortet, vejen til
   næste grad og knapperne under hinanden (som en tegnebog), til højre oplysningerne, det seneste og
   anmeldelserne. Kun min side bliver bred — log ind og bliv medlem står i det smalle ark som før
   (.medlem--mig sættes af js/medlem.js, når min side vises). */
@media (min-width: 1024px) {
  .medlem--mig .medlem__inner { max-width: 1040px; }
  .medlem--mig .medlem__sheet { padding: 64px 56px 44px; }
  .minside { display: grid; grid-template-columns: 360px minmax(0, 1fr); column-gap: 72px; align-items: start; }
  .minside__hilsen, .minside__links, .minside__boks { grid-column: 1 / -1; }
  .minside__hilsen { margin-bottom: 36px; }
  .minside__kol--kort .stak__kort--enkelt { margin-top: 0; }
  /* Venstre spalte foelger med, naar hoejre er laengere (js/medlem.js saetter top, saa en hoej spalte ikke klippes) */
  /* Spalten fylder hele rækken, og det er den indre boks, der klæber — så den aldrig kan gå ud over rækken og
     ned over linkene under den (en klæbende grid-celle holdes kun inde af hele min side) */
  .minside__kol--kort { align-self: stretch; }
  .minside__klister { position: sticky; top: calc(var(--nav-height, 111px) + 24px); transition: top 0.3s var(--ease); }
  /* Knapperne to og to, så hele spalten kan stå på en almindelig bærbar (800 px høj) uden at kortet gemmer sig under toppen */
  .minside__kol--kort .minside__knapper .btn--solid, .minside__kol--kort .minside__knapper #logUd, .minside__kol--kort .minside__knapper #msChat { grid-column: 1 / -1; }
  .minside__kol--kort .minside__knapper { max-width: none; grid-template-columns: 1fr 1fr; margin-top: 28px; }
  .minside__kol--info { text-align: left; }
  .minside__kol--info .minside__dl { max-width: none; margin: 0; grid-template-columns: 150px 1fr; gap: 14px 24px; }
  .minside__kol--info .historik, .minside__kol--info .minside__afsnit { max-width: none; margin-top: 44px; }
  .minside__links { margin-top: 40px; }
}
.er-mig .page-hero__sub { display: none; }
/* Fordelene på medlemmets kort: kun på computeren, hvor højre spalte ellers slutter længe før den venstre.
   Pladen er kredsen.html's gradkort i sit eget metal, lagt ned på tværs (js/medlem.js tegnFordele). */
.minside__fordele { display: none; }
@media (min-width: 1024px) {
  .minside__kol--info .minside__fordele { display: block; }
  .minside .minside__plade { aspect-ratio: auto; flex: none; margin-top: 14px; padding: 22px 24px; text-align: left; }
  .minside__plade .gradkort__hoved { margin-bottom: 16px; }
  .minside__plade .gradkort__liste { grid-template-columns: 1fr 1fr; gap: 12px 24px; }
  .minside .minside__plade.gradkort--sort { flex-direction: row; align-items: center; gap: 18px; flex-wrap: wrap; }
  .minside__plade.gradkort--sort .gradkort__hoved { flex: 1 0 100%; margin-bottom: 4px; }
  .minside__plade .gradkort__laas { flex: none; }
  .minside__plade .gradkort__laas svg { width: 44px; height: 44px; }
  .minside__plade .gradkort__note { text-align: left; }
  .minside__plade-tekst { flex: 1 0 100%; margin: 4px 0 0; font-family: var(--font-sans); font-size: 0.8rem; line-height: 1.5; color: var(--ink); }
  .minside__plade-tekst a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .minside__fordele-naeste { margin: 12px 0 0; color: var(--ink); font-size: 0.85rem; line-height: 1.5; }
}

/* ===== Kammeret (pointshop.html): pointbutikken ===== */
.kammer { padding: 0 24px var(--section-y); }
.kammer__inner { max-width: var(--maxw); margin: 0 auto; }
.kammer__saldo { text-align: center; margin: 0 auto 36px; font-size: 0.92rem; color: var(--ink-soft); min-height: 1.4em; }
.kammer__saldo strong { color: var(--ink); font-weight: 500; }
.kammer__saldo a { color: var(--ink); }
.kammer__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 14px; }
/* .kammer__grid .pcard, ikke bare .pcard--kammer: .pcard's faste bredde (til
   hyldernes skinner) staar LAENGERE NEDE i filen og vandt ved samme
   specificitet — kortene loeb ind over nabokolonnen paa en telefon. */
.kammer__grid .pcard { width: auto; min-width: 0; flex: none; display: flex; flex-direction: column; }
.pcard__point { display: block; margin-top: 8px; font-size: 0.82rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.kammer__knap { margin-top: 12px; align-self: flex-start; }
.kammer__note { display: block; margin-top: 8px; font-size: 0.74rem; color: var(--ink-faint); min-height: 1em; }
.kammer__form { max-width: 480px; margin: 44px auto 0; padding: 28px; border: 1px solid rgba(212,175,55,0.22); border-radius: var(--radius-md); background: var(--bg-elevated); }
.kammer__form h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin: 0; color: var(--ink); }
.kammer__form .medlem__link { margin-top: 4px; align-self: center; }
.kammer__form.medlem__form label:not(.medlem__check) { display: flex; flex-direction: column; gap: 10px; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.kammer__status { text-align: center; margin: 28px auto 0; max-width: 560px; font-size: 0.92rem; color: var(--ink); min-height: 20px; }
.kammer__status.is-fejl { color: #e08a7a; }
.kammer__note-bund { text-align: center; margin: 40px auto 0; font-size: 0.82rem; color: var(--ink-faint); }
.kammer__note-bund a { color: var(--ink); }
@media (min-width: 700px) { .kammer__grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 32px 20px; } }
/* ===== Medlemsshoppen (medlemsshop.html): Kredsens egne tilbud ===== */
.mshop .kammer__grid { justify-content: center; }
@media (min-width: 700px) { .mshop .kammer__grid { grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); } }
.mshop .kammer__knap { white-space: nowrap; }
.mshop__status { max-width: 640px; margin: 0 auto 40px; text-align: center; font-size: 0.92rem; line-height: 1.55; color: var(--ink); min-height: 1.4em; }
.mshop__status p { margin: 0; }
.mshop__status strong { font-weight: 500; }
.mshop__knapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
.pcard--mshop .pcard__name { text-decoration: none; }
.pcard--mshop .pcard__name:hover, .pcard--mshop .pcard__name:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.mshop__pris { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 10px; color: var(--ink); font-variant-numeric: tabular-nums; }
.mshop__pris strong { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; line-height: 1.1; }
.mshop__etiket { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); padding: 3px 7px; border: 1px solid var(--gold-dim); border-radius: 999px; }
.mshop__normal { display: block; margin-top: 6px; font-size: 0.78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.mshop__normal span { white-space: nowrap; }
.mshop__maerke { color: var(--ink); border-color: var(--gold-dim); }
.mshop__se { display: inline-block; margin-top: 10px; font-size: 0.8rem; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mshop__tom { max-width: 560px; margin: 0 auto; padding: 36px 28px; text-align: center; border: 1px solid rgba(212,175,55,0.22); border-radius: var(--radius-md); background: var(--bg-elevated); }
.mshop__tom-titel { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; margin: 0 0 12px; color: var(--ink); }
.mshop__tom p { margin: 0 0 22px; color: var(--ink-soft); line-height: 1.6; }
.mshop__tom a:not(.btn) { color: var(--ink); }

.cart__rabat span:last-child { color: var(--ink); }
.cart__kode { margin-top: 18px; }
.cart__kode label { display: block; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.cart__kode-felt { display: flex; gap: 8px; }
.cart__kode-felt input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; }
.cart__kode-felt input::placeholder { text-transform: none; letter-spacing: 0; color: var(--ink-faint); }
.cart__kode-felt input:focus-visible { outline: none; border-color: var(--gold); }
.cart__kode-knap { height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--gold); background: transparent; color: var(--ink); font: inherit; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.cart__kode-knap:hover, .cart__kode-knap:focus-visible { background: var(--gold); color: #111; }
.cart__kode-status { font-size: 0.78rem; color: var(--ink-soft); margin-top: 8px; line-height: 1.5; min-height: 0; }
.cart__kode-status.is-fejl { color: #d98b82; }
.cart__kode-status:empty { display: none; }
.cart__kode-fjern { background: none; border: 0; padding: 0; color: var(--ink); font: inherit; text-decoration: underline; cursor: pointer; }
.cart__item__was { color: var(--ink-faint); margin-left: 6px; }
.cart__item__kampagne { display: block; font-size: 0.72rem; color: var(--ink); margin-top: 2px; letter-spacing: 0.04em; }
.cart__kreds { margin-top: 14px; font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5; }
.cart__kreds a, .cart__kreds strong { color: var(--ink); font-weight: 500; }

/* min side: det seneste — køb og indløsninger */
.historik { margin: 40px auto 0; max-width: 480px; text-align: left; }
.historik h3 { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin: 0 0 6px; }
.historik ul { list-style: none; margin: 0; padding: 0; }
.historik li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 12px 0; border-top: 1px solid var(--line-soft); font-size: 0.85rem; color: var(--ink-soft); }
.historik__hvad { color: var(--ink); }
.historik__point { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.historik__dato { grid-column: 1 / -1; font-size: 0.74rem; color: var(--ink-faint); }
.historik li.is-afvist .historik__hvad, .historik li.is-afvist .historik__point { color: var(--ink-faint); text-decoration: line-through; }

.kreds__form { margin: 48px auto 0; max-width: 420px; display: flex; gap: 0; border-bottom: 1px solid var(--line); }
.kreds__form input {
  /* min-width: 0 — uden den naegter inputtet at blive smallere end sin egen
     standardbredde, og knappen bliver skubbet om paa anden linje i kortet. */
  flex: 1; min-width: 0; background: none; border: none; color: var(--ink);
  font-family: var(--font-sans); font-size: 0.9rem; padding: 16px 4px; outline: none;
}
.kreds__form input::placeholder { color: var(--ink-faint); }
.kreds__form button { background: none; border: none; color: var(--ink); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 16px 4px; cursor: pointer; white-space: nowrap; }
.kreds__note { margin: 16px auto 0; max-width: 420px; font-size: 0.78rem; color: var(--ink-faint); line-height: 1.55; }
.kreds__status { margin-top: 14px; font-size: 0.82rem; color: var(--ink); min-height: 20px; }

@media (min-width: 640px) {
  .kreds__fordele { grid-template-columns: 1fr 1fr; }
  .kreds__grader { grid-template-columns: 1fr 1fr; gap: 14px; }
  .grad { grid-template-columns: 1fr; align-content: start; padding: 22px 22px 24px; }
  .grad__chip { margin-bottom: 8px; }
  .grad__liste { grid-column: 1; }
}
@media (min-width: 1000px) {
  .kreds__grader { grid-template-columns: repeat(3, 1fr); }
}

/* ===== Values / feature strip ===== */
.values { padding: var(--section-y) 24px; border-top: 1px solid var(--line); }
.values__grid { max-width: var(--maxw); margin: 56px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.value-card { text-align: center; background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 40px 32px; }
.value-card__num { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--ink); }
.value-card h3 { margin-top: 16px; font-size: 1.3rem; font-style: italic; }
.value-card p { margin-top: 12px; font-size: 0.9rem; }

/* ===== Section shared ===== */
.section-head { text-align: center; max-width: 640px; margin: 0 auto; }
.section-head__title { margin-top: 20px; font-size: clamp(2rem, 4vw, 3rem); font-style: italic; }
.section-head__sub { margin-top: 18px; }

/* ===== Testimonials ===== */
.testimonials { padding: var(--section-y) 24px; max-width: var(--maxw); margin: 0 auto; }
.testimonials__grid { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote-card { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 40px 32px; margin: 0; }
.quote-card p { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--ink); line-height: 1.5; }
.quote-card cite { display: block; margin-top: 22px; font-style: normal; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }

/* ===== Contact ===== */
.contact { padding: var(--section-y) 24px; }
.contact--page { padding-top: 0; }
/* Both columns are panels of the same weight, so the page reads as two
   halves of one card rather than a form with notes floating beside it. */
.contact__inner { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1fr; gap: 32px; align-items: start; }
.contact__info, .contact__form {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px;
}
.contact__info .section-head__title, .contact__info .section-head__sub { text-align: left; margin-left: 0; }
.contact__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.contact__list li { padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.contact__list li:first-child { padding-top: 0; }
.contact__list li:last-child { padding-bottom: 0; border-bottom: none; }
.contact__list strong { display: block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.contact__list a { color: var(--ink); border-bottom: 1px solid var(--line); }
.contact__list a:hover { border-color: var(--gold); }
.contact__form { display: flex; flex-direction: column; gap: 22px; }
.contact__form label { display: flex; flex-direction: column; gap: 10px; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.contact__form input, .contact__form textarea {
  font-family: var(--font-sans); font-size: 1rem; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-elevated); resize: vertical; color: var(--ink);
}
.contact__form input:focus, .contact__form textarea:focus { outline: none; border-color: var(--gold); }
.contact__status { min-height: 20px; font-size: 0.85rem; color: var(--ink); margin: 0; }
.contact__status.is-fejl { color: #e08a7a; }

/* Kontaktsiden (23-09-2026): fire hjælpekort i Diturs form, så formularen med de ekstra felter. */
.hjaelp { padding: 0 24px 56px; }
.hjaelp__grid { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hjaelp__kort { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.hjaelp__eyebrow { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.hjaelp__ikon { width: 44px; height: 44px; border: 1px solid var(--gold); border-radius: 50%; display: grid; place-items: center; color: var(--gold); }
.hjaelp__ikon svg { width: 22px; height: 22px; }
.hjaelp__titel { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; color: var(--ink); line-height: 1.2; }
.hjaelp__kort p { font-size: 0.86rem; line-height: 1.6; color: var(--ink-soft); flex: 1; }
.hjaelp__knapper { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 4px; }
.hjaelp__knapper .btn { padding: 12px 20px; font-size: 0.72rem; }
.hjaelp__link { font-size: 0.8rem; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.hjaelp__link:hover { border-color: var(--gold); }
.hjaelp__overgang { max-width: 1060px; margin: 0 auto 24px; font-size: 0.95rem; color: var(--ink-soft); }
#skriv { scroll-margin-top: calc(var(--nav-height, 110px) + 16px); }
.contact__form-titel { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; color: var(--ink); }
.contact__to { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }
.contact__valgfri { text-transform: none; letter-spacing: 0; color: var(--ink-faint); }
.contact__inner > * { min-width: 0; }   /* en lang valgmulighed (tysk) må ikke gøre kolonnen bredere end telefonen */
.contact__form select {
  font-family: var(--font-sans); font-size: 1rem; padding: 16px 18px; color: var(--ink); max-width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-elevated);
}
.contact__form select:focus { outline: none; border-color: var(--gold); }
.contact__filer { display: flex; flex-direction: column; gap: 10px; }
.contact__filfelt { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; text-transform: none; letter-spacing: 0; cursor: pointer; }
.contact__filfelt .btn { padding: 10px 18px; font-size: 0.72rem; }
.contact__filhint { font-size: 0.8rem; color: var(--ink-faint); }
.contact__filknap:focus-within .btn { border-color: var(--gold-bright, var(--gold)); outline: 1px solid var(--gold); outline-offset: 2px; }
.contact__filvisning { margin: 0; font-size: 0.82rem; color: var(--ink-soft); }
.contact__filvisning ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.contact__filvisning li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.contact__filvisning li span:last-child { color: var(--ink-faint); white-space: nowrap; }
.contact__jura { margin: 0; font-size: 0.78rem; color: var(--ink-faint); }
.contact__jura a { color: var(--ink); border-bottom: 1px solid var(--line); }
/* Reklamationsportalen (reklamation.html): guiden i tre trin. */
.rekl__start { margin-top: 8px; align-self: flex-start; }
.rekl__guide { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; margin-bottom: 48px; scroll-margin-top: calc(var(--nav-height, 110px) + 16px); }
.rekl__guide[hidden] { display: none; }
.rekl__trin { list-style: none; padding: 0; margin: 0 0 28px; display: flex; gap: 8px; }
.rekl__trin li { flex: 1; display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 2px solid var(--line); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.rekl__trin li span { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 0.72rem; letter-spacing: 0; }
.rekl__trin li.is-aktiv { border-color: var(--gold); color: var(--ink); }
.rekl__trin li.is-aktiv span { border-color: var(--gold); color: var(--ink); }
.rekl__trin li.is-faerdig { border-color: var(--gold); color: var(--ink-soft); }
.rekl__trin li.is-faerdig span { background: var(--gold); border-color: var(--gold); color: #080808; }
.rekl__side h2 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; color: var(--ink); margin-bottom: 18px; outline: none; }
.rekl__valgliste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rekl__valg { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; background: transparent; border: 1px solid var(--line); border-radius: var(--radius-md, 12px); color: var(--ink); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; font: inherit; }
.rekl__valg:hover, .rekl__valg:focus-visible, .rekl__valg.is-valgt { border-color: var(--gold); background: rgba(212, 175, 55, 0.05); outline: none; }
.rekl__valg-ikon { width: 40px; height: 40px; flex: none; border: 1px solid var(--gold); border-radius: 50%; display: grid; place-items: center; color: var(--gold); }
.rekl__valg-ikon svg { width: 20px; height: 20px; }
.rekl__valg-tekst { display: flex; flex-direction: column; gap: 3px; }
.rekl__valg-tekst strong { font-weight: 500; font-size: 0.95rem; }
.rekl__valg-tekst span { font-size: 0.8rem; color: var(--ink-faint); }
.rekl__hint { font-size: 0.88rem; margin-bottom: 18px; }
.rekl__datoer { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }
.rekl__datoer label { display: flex; flex-direction: column; gap: 10px; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.rekl__datoer input { font-family: var(--font-sans); font-size: 1rem; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--ink); color-scheme: dark; }
.rekl__datoer input:focus { outline: none; border-color: var(--gold); }
.rekl__dom { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); }
.rekl__dom p { margin: 0; color: var(--ink); font-size: 0.9rem; }
.rekl__dom p + p { margin-top: 6px; color: var(--ink-soft); }
.rekl__dom.is-ok { border-left-color: #6FBF73; }
.rekl__dom.is-fejl { border-left-color: #e08a7a; }
.rekl__navigation { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; }
.rekl__navigation .btn:disabled { opacity: 0.4; cursor: default; }
.rekl__tilbage { background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; font: inherit; font-size: 0.85rem; }
.rekl__opsummering { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.rekl__form { background: none; border: 0; padding: 0; }
.rekl__kvittering { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rekl__kvittering[hidden] { display: none; }
.rekl__kvittering p { max-width: 520px; }
.rekl__faq { margin-bottom: 48px; }
/* Hjælpecentret (hjaelpecenter.html) */
.hc__soeg { position: relative; max-width: 560px; margin: 28px auto 0; }
.hc__soeg input { width: 100%; font: 400 1rem var(--font-sans); padding: 16px 52px 16px 20px; border: 1px solid var(--gold); border-radius: 999px; background: var(--bg-elevated); color: var(--ink); }
.hc__soeg input:focus { outline: none; box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18); }
.hc__soeg svg { position: absolute; right: 20px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--gold); pointer-events: none; }
.hc { padding: 0 24px 16px; }
.hc__kategorier { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hc__kat { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); transition: border-color 0.2s ease; }
.hc__kat:hover, .hc__kat:focus-visible { border-color: var(--gold); outline: none; }
.hc__kat strong { font-weight: 500; font-size: 0.98rem; }
.hc__kat > span:last-child { font-size: 0.78rem; color: var(--ink-faint); }
.hc__emne { scroll-margin-top: calc(var(--nav-height, 110px) + 16px); }
.hc__emne[hidden], .hc__emne details[hidden] { display: none; }
.hc__ingen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); color: var(--ink); }
.hc__ingen[hidden] { display: none; }
.hc__portaler { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 18px; }
.hc__portaler .btn { padding: 12px 20px; font-size: 0.72rem; min-height: 44px; }
@media (max-width: 900px) { .hc__kategorier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hc { padding: 0 16px 8px; } .hc__kat { padding: 14px; } }

/* Blog (blog.html + blog-*.html) og presse (presse.html) */
.blog { padding: 0 24px 80px; }
.blog__grid { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.blog__grid--to { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog__kort { display: flex; flex-direction: column; gap: 10px; padding: 0 0 22px; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; color: var(--ink); transition: border-color 0.2s ease, transform 0.2s ease; }
.blog__kort:hover { border-color: var(--gold); transform: translateY(-2px); }
.blog__kort img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #0b0b0b; margin-bottom: 8px; }
.blog__kort > span, .blog__kort > strong { padding: 0 22px; }
.blog__kort strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; line-height: 1.25; }
.blog__meta { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.blog__teaser { font-size: 0.88rem; line-height: 1.6; color: var(--ink-soft); flex: 1; }
.blog__kort .hjaelp__link { align-self: flex-start; margin: 4px 22px 0; padding: 0 0 2px; }
.blog-artikel .eyebrow a { color: inherit; }
.guide__kort { padding-top: 22px; }   /* guidernes kort har intet billede */
.guider__gruppe { padding-bottom: 32px; }
.page-hero__sub a { color: var(--ink); border-bottom: 1px solid var(--line); }
.blog-artikel__billede { max-width: 1060px; margin: 0 auto 8px; padding: 0 24px; }
.blog-artikel__billede img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.blog-artikel__tekst h2 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; color: var(--ink); margin: 36px 0 12px; }
.blog-artikel__tekst > p:first-child { font-size: 1.08rem; color: var(--ink); }
.blog-artikel__tekst p { margin-bottom: 14px; }
.blog__flere { max-width: 1060px; margin: 0 auto; padding: 24px 24px 80px; border-top: 1px solid var(--line); }
.blog__flere h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; margin-bottom: 18px; color: var(--ink); }
.presse__filer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.presse__fil { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md, 12px); color: var(--ink); transition: border-color 0.2s ease; }
.presse__fil:hover { border-color: var(--gold); }
.presse__fil strong { font-weight: 500; margin-top: 8px; }
.presse__fil > span:last-child { font-size: 0.78rem; color: var(--ink-faint); }
.presse__vis { display: grid; place-items: center; height: 120px; border-radius: var(--radius-sm); overflow: hidden; }
.presse__vis img { height: 84px; width: auto; max-width: 84%; object-fit: contain; }
.presse__vis--moerk { background: #050505; }
.presse__vis--tern { background: repeating-conic-gradient(#1a1a1a 0 25%, #111 0 50%) 0 0 / 16px 16px; }
.presse__farver { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.presse__farve { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.presse__farve i { width: 96px; height: 64px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.presse__farve strong { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) { .blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .blog { padding: 0 16px 56px; }
  .blog__grid, .blog__grid--to, .presse__filer { grid-template-columns: 1fr; }
  .blog-artikel__billede { padding: 0 16px; }
}
/* Fortrydelsesformularen (fortryd.html) */
.fortryd__hvad { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.fortryd__hvad legend { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; padding: 0; }
.fortryd__radio { flex-direction: row !important; align-items: center; gap: 10px !important; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; font-size: 0.92rem !important; color: var(--ink) !important; }
.fortryd__radio input { accent-color: var(--gold); width: 18px; height: 18px; }
.fortryd__radio:has(input:checked) { border-color: var(--gold); }
.fortryd__varer { flex-basis: 100%; }
.fortryd__varer[hidden] { display: none !important; }
.fortryd__opsummering { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0 0 18px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.fortryd__opsummering dt { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); padding-top: 3px; }
.fortryd__opsummering dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.fortryd__naeste { text-align: left; max-width: 520px; margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--ink-soft); font-size: 0.9rem; }
.fortryd__naeste li::marker { color: var(--gold); }
@media (max-width: 600px) { .fortryd__opsummering { grid-template-columns: 1fr; gap: 2px; } .fortryd__opsummering dd { margin-bottom: 10px; } }
@media (max-width: 600px) {
  .rekl__guide { padding: 22px 18px; }
  .rekl__valgliste, .rekl__datoer { grid-template-columns: 1fr; }
  .rekl__trin li { font-size: 0.6rem; letter-spacing: 0.06em; gap: 6px; }
}
@media (max-width: 1023px) { .hjaelp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .hjaelp { padding: 0 16px 40px; }
  .hjaelp__grid { grid-template-columns: 1fr; }
  .contact__to { grid-template-columns: 1fr; }
}

/* ===== Cart / Vault page ===== */
.cart { padding: 0 24px 160px; max-width: var(--maxw); margin: 0 auto; }
/* Tre felter i to kolonner: varelinjerne oeverst til venstre, oversigten
   oeverst til hoejre, og kassen paa sin egen raekke i fuld bredde under dem.
   Pladserne staar eksplicit, fordi automatisk placering ellers skubber
   oversigten ned UNDER kassen, saa snart kassen spaender over begge
   kolonner — og saa staar totalen et helt skaermbillede fra knappen. */
.cart__layout { display: grid; grid-template-columns: 1fr 360px; gap: 80px 80px; align-items: start; }
.cart__layout > #cartItems { grid-column: 1; grid-row: 1; }
.cart__layout > .cart__summary { grid-column: 2; grid-row: 1; }
.cart__layout > .kasse { grid-column: 1 / -1; grid-row: 2; }
.cart__layout[hidden] { display: none; }
.cart__list { display: flex; flex-direction: column; }
.cart__item { display: grid; grid-template-columns: 100px 1fr auto; gap: 24px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); }
.cart__item__media { width: 100px; height: 100px; background: var(--bg-elevated); border-radius: var(--radius-sm); padding: 12px; }
.cart__item__name { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); }
.cart__item__price { font-size: 0.8rem; color: var(--ink-faint); margin-top: 4px; }
.cart__item__end { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.cart__item__total { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); }
.cart__item__remove { background: none; border: none; font-family: var(--font-sans); color: var(--ink-faint); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; padding: 2px; }
.cart__item__remove:hover { color: var(--ink); }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; }
.qty-stepper button { width: 30px; height: 30px; background: none; border: none; border-radius: 999px; font-family: inherit; font-size: 1rem; cursor: pointer; color: var(--ink); }
.qty-stepper button:hover { color: var(--ink); }
.qty-stepper span { min-width: 26px; text-align: center; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.cart__summary { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 36px; position: sticky; top: calc(var(--nav-height, 78px) + 24px); }
.cart__summary h2 { font-size: 1.1rem; font-style: italic; margin-bottom: 24px; }
.cart__summary-row { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--ink-faint); padding: 10px 0; }
.cart__summary-row--total { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 18px; font-size: 1rem; color: var(--ink); }
.cart__summary .btn { width: 100%; margin-top: 24px; }
.cart__empty { text-align: center; padding: 60px 24px 40px; }
.cart__empty h2 { font-size: 1.6rem; font-style: italic; margin-bottom: 14px; }
.cart__empty p { margin-bottom: 30px; }
.cart__status { margin-top: 16px; font-size: 0.85rem; color: var(--ink); text-align: center; }

/* ===== Kassen (kurv.html) =====
   Leveringsoplysningerne staar under varelinjerne i fuld bredde, mens
   totalerne bliver i asiden — knappen dér hoerer til formularen her gennem
   form="kasseForm". Felterne ser ud som kontaktformularens; det er den
   samme slags udfyldning, og to slags ville se ud som to sites. */
.kasse { margin-top: 0; padding-top: 40px; border-top: 1px solid var(--line); }
.kasse h2 { font-size: 1.1rem; font-style: italic; margin-bottom: 8px; }
.kasse__hint { font-size: 0.82rem; color: var(--ink-faint); margin-bottom: 24px; line-height: 1.7; }
.kasse__hint a { color: var(--ink); }
.kasse__felter { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.kasse__bred { grid-column: 1 / -1; }
.kasse label { display: flex; flex-direction: column; gap: 10px; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.kasse__valgfri { text-transform: none; letter-spacing: 0.02em; opacity: 0.7; }
.kasse input, .kasse select {
  background: transparent; border: none; border-bottom: 1px solid var(--line); color: var(--ink);
  font-family: inherit; font-size: 0.95rem; letter-spacing: normal; text-transform: none;
  padding: 10px 0; transition: border-color var(--dur) ease; border-radius: 0; min-width: 0;
}
.kasse select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%), linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%); background-position: right 6px center, right 1px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 20px; }
.kasse select option { background: var(--bg-elevated); color: var(--ink); }
.kasse input:focus, .kasse select:focus { outline: none; border-color: var(--gold); }
/* iOS zoomer ind på et felt under 16 px; kun på berøringsskærme, så computeren er som før. */
@media (hover: none) and (pointer: coarse) { .kasse input, .kasse select { font-size: 16px; } }
/* Browserens egen "udfyld"-markering maa ikke give et hvidt felt paa sort. */
.kasse input:-webkit-autofill { -webkit-text-fill-color: var(--ink); transition: background-color 9999s; }
/* Accepten er ikke et felt som de andre: teksten skal kunne laeses, saa den
   arver hverken versaler eller bogstavafstand.
   Vaelgeren er .kasse .kasse__accept og ikke bare .kasse__accept, fordi
   `.kasse label` (klasse + element) ellers vinder paa specificitet — og saa
   staar fluebenet OVER teksten i versaler, som en feltetiket. */
.kasse .kasse__accept { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  margin-top: 28px; font-size: 0.85rem; letter-spacing: normal; text-transform: none; color: var(--ink); line-height: 1.6; }
.kasse .kasse__accept input { width: 18px; height: 18px; accent-color: var(--gold); margin-top: 3px; flex: none; padding: 0; }
.kasse .kasse__accept a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cart__note { margin-top: 12px; font-size: 0.75rem; color: var(--ink-faint); text-align: center; line-height: 1.6; }

@media (max-width: 720px) {
  .kasse__felter { grid-template-columns: 1fr; }
}

/* ===== Footer ===== */
/* Footeren har Diturs form: fire kolonner (2 x 2 paa en telefon), overskrifter i
   brødtekstens skrift, "Kontakt os her" som en knap med ramme, en streg, og
   domaenet med firmalinjen centreret under. Markuppen kommer fra
   scripts/footer-html.js — ret dér, ikke i siderne. */
.footer { background: #050505; color: var(--ink-soft); padding: 72px 24px 40px; border-top: 1px solid var(--line); }
.footer__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 32px; }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 1rem; line-height: 1.5; }
.footer__col h4 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0 0 12px; }
.footer__col a { color: var(--ink-soft); transition: color 0.2s ease; }
.footer__col a:hover, .footer__col a:focus-visible { color: var(--ink); }
.footer__col a.footer__knap {
  display: inline-block; padding: 8px 20px; margin-bottom: 6px;
  border: 1px solid var(--ink); border-radius: 8px; color: var(--ink); font-weight: 500;
}
.footer__col a.footer__knap:hover, .footer__col a.footer__knap:focus-visible { border-color: var(--gold); color: var(--ink); }
.footer__bottom {
  max-width: var(--maxw); margin: 56px auto 0; padding-top: 32px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-faint);
}
.footer__bottom p { margin: 0; }
.footer__domaene { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 8px !important; font-size: 1.05rem; letter-spacing: 0.02em; color: var(--ink); }
.footer__domaene img { width: 20px; height: 20px; }
.footer__bottom a:hover, .footer__bottom a:focus-visible { color: var(--ink); }
/* Sociale medier (scripts/footer-html.js, SOME) — Diturs raekke: graa ikoner med
   en streg over, mellem domaenet og firmalinjen. 44 px trykflade pr. ikon. */
.footer__some {
  display: flex; justify-content: center; gap: 22px; list-style: none;
  width: 100%; margin: 14px 0 12px; padding: 22px 0 0; border-top: 1px solid var(--line);
}
.footer__some a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink-soft); transition: color 0.2s ease; }
.footer__some a:hover, .footer__some a:focus-visible { color: var(--ink); }
.footer__some svg { width: 26px; height: 26px; }

/* ===== Product page =====
   Media left, everything you need to decide right. The stage keeps the
   product on the site's own black rather than a white studio cut-out. */
/* 190, ikke 140: toppen er 137 px hoej med soegefeltet, og stien laa under den. */
.product { padding: 190px 24px var(--section-y); }
.product__inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.product__media, .product__info { min-width: 0; }
/* Scenen laver sin egen plads, foer fotoet er afkodet.
   Fotoerne kommer som data-URI'er uden width/height, saa et felt, der kun er
   saa hoejt som billedet, staar med hoejden 0, indtil browseren har afkodet
   det. Safari paa iPhone tegner derefter det afkodede foto i fuld stoerrelse
   uden at give mediespalten sin hoejde igen — og fotoet lander oven i
   titel, pris og knap. aspect-ratio giver feltet hoejden med det samme,
   og object-fit holder fotoet inde i feltet, uanset hvor bredt eller smalt
   det er (varerne spaender fra 93x640 til 640x383). Samme greb som
   .pcard__frame paa listesiderne, der netop derfor aldrig har fejlet. */
.product__stage {
  position: sticky;
  top: calc(var(--nav-height, 72px) + 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 50% 38%, #101013 0%, #0b0b0c 55%, var(--bg) 100%);
  padding: 8%;
  aspect-ratio: 4 / 5;
  min-height: 0;
  overflow: hidden;
}
.product__stage > * { min-width: 0; }
/* Tilbudsringen øverst til højre på billedet (vare_lag_produkt i vare-data.php lægger den på et rigtigt tilbud).
   Guld er kun buen og kanten; tallet og ordet er hvide (farvereglen). js/script.js tæller --ring fra 0. */
.product__ring {
  position: absolute; top: 4%; right: 4%; z-index: 2;
  width: clamp(76px, 20%, 112px); aspect-ratio: 1;
  display: grid; place-items: center; align-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(24, 22, 19, .94), rgba(6, 6, 6, .94) 72%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(212, 175, 55, .08);
  color: var(--ink); pointer-events: none;
  contain: size layout style;   /* tallet, der tæller, må ikke få resten af siden lagt ud igen (størrelsen er fast: bredde + aspect-ratio) */
}
/* Kransen tegnes i guld; al tekst er hvid (farvereglen). */
.product__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.product__ring circle { fill: none; }
.product__ring-kant { stroke: rgba(212, 175, 55, .42); stroke-width: .6; }
.product__ring-spor { stroke: rgba(212, 175, 55, .13); stroke-width: 2.4; }
.product__ring-bue { stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: var(--ring, 0) 100; }
.product__ring-inde { stroke: rgba(212, 175, 55, .22); stroke-width: .5; }
.product__ring-streger line { stroke: rgba(244, 242, 236, .22); stroke-width: .7; stroke-linecap: round; transition: stroke .25s ease; }
.product__ring-streger line.er-lang { stroke-width: 1; }
.product__ring-streger line[data-lys] { stroke: var(--gold); }
.product__ring-tal { position: relative; display: flex; align-items: flex-start; margin-top: 6%; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 4.6vw, 1.95rem); line-height: 1; font-variant-numeric: tabular-nums; }
.product__ring-tal b { font-weight: 500; }
.product__ring-tal small { font-size: .5em; margin: .14em 0 0 .06em; font-style: normal; }
.product__ring-ord { position: relative; margin-top: 4px; padding-left: .18em; font-family: var(--font-sans); font-size: clamp(.5rem, 1.35vw, .6rem); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
/* Produktsidens store ring: gemt, til den kommer i syne, glider så frem (er-frem) og får ét guldskær, når tallet
   står (er-landet). Uden JavaScript og ved "reducer bevægelse" sættes ingen af klasserne, og ringen står bare. */
.product__ring.er-gemt { opacity: 0; transform: scale(.82); will-change: transform, opacity; }
.product__ring.er-gemt.er-frem { opacity: 1; transform: none; transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.product__ring.er-landet { animation: ring-landet 1.6s ease-out 1; }
@keyframes ring-landet {
  0% { box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 0 0 rgba(212, 175, 55, 0); }
  35% { box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 26px 4px rgba(212, 175, 55, .38); }
  100% { box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 0 0 rgba(212, 175, 55, 0); }
}
.product__ring-streger line { transition: stroke .5s ease; }
/* Den lille ring på kortene (js/tilbudsring.js): samme krans, kun timestregerne, mindre tal. */
.product__ring--lille { width: 58px; box-shadow: 0 4px 14px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(212, 175, 55, .08); }
.product__ring--lille .product__ring-streger line:not(.er-lang) { display: none; }
.product__ring--lille .product__ring-streger line.er-lang { stroke-width: 1.6; }
/* Kortenes ringe tæller på 1,4 s, så en overgang pr. streg ses ikke — men den koster en stilberegning pr. ramme. */
.product__ring--lille .product__ring-streger line { transition: none; }
.product__ring--lille .product__ring-tal { font-size: 1.12rem; margin-top: 7%; }
.product__ring--lille .product__ring-ord { margin-top: 1px; font-size: .42rem; letter-spacing: .14em; }
.product__ring--kort { position: relative; top: auto; right: auto; }
.product__ring--liste { top: 8px; right: auto; left: 8px; width: 54px; }
.product__ring--liste .product__ring-tal { font-size: .9rem; margin-top: 12%; }
.pcard__badge.er-ring, .bb-badge.er-ring {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (min-width: 900px) { .product__ring--kort { width: 66px; } .product__ring--kort .product__ring-tal { font-size: 1.3rem; } }
.product__nu { font-variant-numeric: tabular-nums; }
.product__stage img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.product__thumb {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: radial-gradient(circle at 50% 40%, #101013 0%, var(--bg) 70%);
  padding: 0;
  cursor: pointer;
  position: relative;
  aspect-ratio: 1;
  min-height: 0;
  overflow: hidden;
  transition: border-color 0.3s var(--ease);
}
/* Samme grund som scenen: kvadratet kommer fra feltet, ikke fra fotoet. */
.product__thumb img {
  position: absolute; top: 10px; left: 10px;
  width: calc(100% - 20px); height: calc(100% - 20px);
  object-fit: contain; display: block;
}
/* Stemningsbilleder (webp uden alfa, gen-brand.js fuldFoto) fylder scenen og miniaturen helt ud til kanten; hjørnerne
   rundes af feltets egen border-radius + overflow: hidden. */
.product__stage--fuld { padding: 0; }
.product__stage--fuld > img { object-fit: cover; }
.product__thumb--fuld img { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.product__thumb:hover { border-color: var(--gold-dim); }
.product__thumb.is-active { border-color: var(--gold); }
.product__thumb:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.product__brand { display: block; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); }
.product__name { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.9rem); font-style: italic; font-weight: 500; margin: 14px 0 10px; }
.product__ref { font-size: 0.78rem; letter-spacing: 0.08em; color: var(--ink-faint); margin: 0; }
.product__price { font-family: var(--font-display); font-size: 2.2rem; margin: 32px 0 0; }
.product__vat { font-size: 0.76rem; color: var(--ink-faint); margin: 6px 0 0; }
.product__stock { display: flex; align-items: center; gap: 10px; font-size: 0.84rem; color: var(--ink-soft); margin: 22px 0 0; }
.product__stock::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #5dbb7d; flex: none; }
/* Tilbud og udsolgt — saettes af vare-lag.php, naar kontrolpanelet har rettet varen. */
.product__price.is-sale { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.product__was { font-size: 1.2rem; color: var(--ink-faint); }
.product__rabat { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.06em; color: #111; background: var(--gold); border-radius: 999px; padding: 3px 10px; align-self: center; }
.product__stock.is-ude::before { background: #c0584f; }
.product__levdato { font-size: 0.84rem; color: var(--ink-soft); margin: 6px 0 0 17px; }   /* under teksten, ikke under prikken */
.product__stock.is-ude a { color: var(--ink); border-bottom: 1px solid var(--line); }
.product__buy .btn[disabled], .product__buy .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
.product__buy { margin-top: 28px; }
.product__assurances { list-style: none; padding: 0; margin: 32px 0 0; border-top: 1px solid var(--line); }
.product__assurances li { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); font-size: 0.84rem; color: var(--ink-soft); }
.product__assurances a { color: var(--ink); border-bottom: 1px solid var(--line); }
.product__assurances a:hover { color: var(--ink); border-color: var(--gold); }
.product__section { margin-top: 56px; }
.product__section h2 { font-family: var(--font-display); font-size: 1.45rem; font-style: italic; font-weight: 500; margin: 0 0 18px; }
.product__section p { color: var(--ink-soft); line-height: 1.8; margin: 0 0 16px; }
.product__section p:last-child { margin-bottom: 0; }
.product__specs { width: 100%; border-collapse: collapse; }
.product__specs th, .product__specs td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--line-soft); font-size: 0.86rem; }
.product__specs th { color: var(--ink-faint); font-weight: 400; width: 42%; }
.product__specs td { color: var(--ink); text-align: right; }

/* A curated piece is not one of the twelve, so it gets its own band. One
   watch in a three-up grid strands itself on the left, so it runs wide. */
.curated { padding: var(--section-y) 24px; border-top: 1px solid var(--line); }
.curated__inner { max-width: 1000px; margin: 0 auto; }
.curated__feature {
  margin-top: 52px;
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elevated);
}
.curated__media {
  background: radial-gradient(circle at 50% 38%, #101013 0%, #0b0b0c 55%, var(--bg) 100%);
  border-right: 1px solid var(--line);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.curated__media img { max-height: 340px; width: auto; }
.curated__body { padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.curated__brand { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.curated__name { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.2rem); font-style: italic; font-weight: 500; margin: 12px 0 14px; }
.curated__body p { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.7; margin: 0; }
.curated__specs { list-style: none; padding: 0; margin: 26px 0 0; border-top: 1px solid var(--line-soft); }
.curated__specs li { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 0.82rem; color: var(--ink-soft); }
.curated__specs li span:last-child { color: var(--ink); }
.curated__foot { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.curated__price { font-family: var(--font-display); font-size: 1.7rem; }

/* ===== Catalogue (BOSS category pages) ===== */
.katalog { padding: 0 24px var(--section-y); }
.katalog__inner { max-width: var(--maxw); margin: 0 auto; }
.katalog__filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: end;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
}
.katalog__filter { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.katalog__filter > span { font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.katalog__filter select {
  appearance: none;
  width: 100%;
  padding: 11px 32px 11px 14px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236f6b63' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center/12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.katalog__filter select:focus-visible { outline: none; border-color: var(--gold); }
.katalog__filters .btn { justify-self: start; }
.katalog__count { margin: 22px 0 0; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.katalog__grid { margin-top: 20px; }
.katalog__empty { margin-top: 48px; text-align: center; color: var(--ink-soft); }

/* A product whose photograph has not arrived yet. It says so, rather than
   showing a broken image or art invented to look like the real thing. */
.plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  aspect-ratio: 1;
  padding: 24px;
  text-align: center;
}
.plate--stor { aspect-ratio: 1; }
.plate__mark { width: 28px; height: 28px; opacity: 0.55; }
.plate--stor .plate__mark { width: 44px; height: 44px; }
.plate__serie { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink-soft); }
.plate--stor .plate__serie { font-size: 1.6rem; font-style: italic; }
.plate__ref { font-size: 0.68rem; letter-spacing: 0.16em; color: var(--ink-faint); }
.plate__note { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-dim); }

/* Breadcrumbs on a product page */
.product__info { position: relative; }
/* Bedoemmelsen oeverst til hoejre i produktinfoen, ud for stien (js/anmeldelser.js fylder den) */
.product__rating { position: absolute; top: -2px; right: 0; z-index: 2; display: inline-flex; align-items: center; gap: 6px; color: var(--gold); text-decoration: none; font-size: 0.82rem; letter-spacing: 0.06em; }
.product__rating-stjerner { display: inline-flex; gap: 2px; font-size: 0.95rem; line-height: 1; }
.product__rating-stjerner .anm__stjerne-ikon, .product__rating-stjerner svg { width: 15px; height: 15px; }
.product__rating-stjerner > svg { color: var(--ink-faint); }
.product__rating-antal { color: var(--ink-soft); font-size: 0.74rem; }   /* --ink-faint gav 3,84:1 på sort; --ink-soft 8,2:1 */
.product__rating.is-tom { color: var(--ink-faint); }
.product__rating:hover { color: var(--gold-bright); }
.product__crumbs { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 18px; padding-right: 120px; }
.product__crumbs a { color: var(--ink-soft); }
.product__crumbs a:hover { color: var(--ink); }

/* ===== Service pages (levering, returnering, garanti) =====
   A reading column, not a card grid: these pages are prose someone reads
   top to bottom when something has gone wrong or is about to be bought. */
.policy { padding: 0 24px var(--section-y); }
.policy__inner { max-width: 760px; margin: 0 auto; }
.policy__block { border-top: 1px solid var(--line); padding-top: 34px; margin-top: 52px; }
.policy__block:first-child { margin-top: 0; }
.policy__block h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-style: italic;
  font-weight: 500;
  margin: 0 0 20px;
}
.policy__block p { color: var(--ink-soft); line-height: 1.8; margin: 0 0 18px; }
.policy__block p:last-child { margin-bottom: 0; }
.policy__list { list-style: none; padding: 0; margin: 0; }
.policy__list li { position: relative; padding-left: 28px; color: var(--ink-soft); line-height: 1.8; margin-bottom: 14px; }
.policy__list li:last-child { margin-bottom: 0; }
/* A small gold lozenge, echoing the mark's facets rather than a bullet. */
.policy__list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 12px;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}
.policy__steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.policy__steps li { counter-increment: step; position: relative; padding-left: 52px; color: var(--ink-soft); line-height: 1.8; margin-bottom: 22px; }
.policy__steps li:last-child { margin-bottom: 0; }
.policy__cta { margin-top: 34px; }
.policy__steps + .policy__cta { margin-left: 52px; }
@media (max-width: 520px) { .policy__steps + .policy__cta { margin-left: 0; display: flex; justify-content: center; } }
.policy__steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.policy__table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.policy__table th, .policy__table td { text-align: left; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.policy__table th { color: var(--ink-faint); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; }
.policy__table td { color: var(--ink-soft); font-size: 0.92rem; }
.policy__table td:last-child { text-align: right; font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); white-space: nowrap; }
.policy__note {
  margin-top: 64px;
  padding: 40px;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  text-align: center;
}
.policy__note h2 { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; font-weight: 500; margin: 0 0 12px; }
.policy__note p { color: var(--ink-soft); margin: 0 0 26px; }
.policy__related { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.policy__related a {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.policy__related a:hover { border-color: var(--gold-dim); background: var(--bg-elevated); }
.policy__related span { display: block; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.policy__related strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; }

/* ===== Page hero (sub-pages) ===== */
.page-hero { padding: 200px 24px 100px; text-align: center; }
.page-hero--tight { padding-bottom: 40px; }
.page-hero__title { font-size: clamp(2.4rem, 5.5vw, 4rem); font-style: italic; margin-top: 20px; }
.page-hero__sub { max-width: 520px; margin: 22px auto 0; }

/* ===== Values used on om-os page (features grid reuse) ===== */
.features { padding: var(--section-y) 24px; max-width: var(--maxw); margin: 0 auto; }
.features__grid { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 44px 32px; }
.feature-card__icon { width: 34px; height: 34px; color: var(--gold); margin-bottom: 24px; }
.feature-card__icon svg { width: 100%; height: 100%; }
.feature-card h3 { font-size: 1.25rem; font-style: italic; margin-bottom: 12px; }
.feature-card p { font-size: 0.88rem; }

.craft { background: #050505; padding: var(--section-y) 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.craft__inner { max-width: 780px; margin: 0 auto; text-align: center; }
.craft__title { font-size: clamp(1.9rem, 4vw, 2.8rem); font-style: italic; line-height: 1.3; margin-top: 20px; }
.craft__text { color: var(--ink-soft); font-size: 1.02rem; margin-top: 26px; max-width: 620px; margin-left: auto; margin-right: auto; }
.craft__stats { margin-top: 72px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat__num { display: block; font-family: var(--font-display); font-style: italic; font-size: 2.2rem; color: var(--ink); }
.stat__label { display: block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-top: 10px; }

.cta { text-align: center; padding: var(--section-y) 24px; }
.cta__title { font-size: clamp(2rem, 5vw, 3.2rem); font-style: italic; }
.cta__sub { margin-top: 18px; }
.cta .btn { margin-top: 40px; }

.strip { padding: 30px 24px; text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip__text { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .macro__inner { grid-template-columns: 1fr; gap: 48px; padding: var(--section-y) 24px; }
  .product__inner { grid-template-columns: 1fr; gap: 44px; }
  .product__stage { position: relative; top: auto; }
  /* Pris og "Læg i boksen" højere op: toppens luft følger toppen (111 px + lidt), ikke computerens 190 px, og
     miniaturerne står på én række, man kan stryge i, i stedet for op til fire rækker (342 px på PRX). */
  .product { padding-top: calc(var(--nav-height, 111px) + 24px); }
  .product__thumbs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 10px) / 4.5);
    gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
  .product__thumbs::-webkit-scrollbar { display: none; }
  .product__thumb { scroll-snap-align: start; }
  .curated__feature { grid-template-columns: 1fr; }
  .curated__media { border-right: none; border-bottom: 1px solid var(--line); }
  .curated__body { padding: 32px; }
  .watch-grid { grid-template-columns: repeat(2, 1fr); }
  .features__grid { grid-template-columns: 1fr; }
  .values__grid { grid-template-columns: 1fr; gap: 40px; }
  .build__grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .craft__stats { grid-template-columns: 1fr; gap: 36px; }
  .testimonials__grid { grid-template-columns: 1fr; }
  .contact__inner { grid-template-columns: 1fr; gap: 24px; }
  .contact__info .section-head__title, .contact__info .section-head__sub { text-align: center; }
  .cart__layout { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  /* Én kolonne: varerne, saa kassen, og oversigten med knappen til sidst —
     saa staar "Til betaling" lige under det, man lige har udfyldt. */
  .cart__layout > #cartItems { grid-column: 1; grid-row: 1; }
  .cart__layout > .kasse { grid-column: 1; grid-row: 2; }
  .cart__layout > .cart__summary { grid-column: 1; grid-row: 3; }
  .cart__summary { position: static; }
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
}
@media (max-width: 560px) {
  /* Kurvens boks: mindre luft, så feltet til rabatkoden kan vise sin pladsholder helt på en lille telefon. */
  .cart__summary { padding: 24px 16px; }
  .hero-cinema__actions { flex-direction: column; align-items: center; }
  .watch-grid { grid-template-columns: 1fr; }
  .build__grid { grid-template-columns: 1fr; gap: 32px; }
  .policy__related { grid-template-columns: 1fr; }
  .policy__note { padding: 28px; }
  .katalog__filters { padding: 18px; gap: 12px; }
  .cart__item { grid-template-columns: 64px 1fr; }
  .cart__item__media { width: 64px; height: 64px; }
  .cart__item__end { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  /* Diturs margen paa en telefon er 16 px; med vores 24 brydes "Vilkaar og
     betingelser" over to linjer i en kolonne paa 161 px. */
  .footer { padding: 56px 16px 40px; }
  .footer__inner { gap: 48px 16px; }
}

/* ===== Film homepage — scroll-scrubbed sequences on canvas =====
   A .film section is several viewports tall; its stage sticks to the top
   while the section scrolls through, and js/film.js paints the frame that
   matches how far you've come. Captions inside the stage fade on the same
   progress. Without JS every caption simply shows on the poster frame. */
.film { position: relative; background: #050505; }
.film--hero { height: 420vh; }
.film--macro { height: 340vh; }
.film--assembly { height: 380vh; }
.film--vault { height: 380vh; }
.film__stage {
  position: sticky; top: 0;
  height: 100vh; min-height: 560px;
  overflow: hidden;
  background: #050505;
}
.film__poster, .film__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
/* The hero watch: a photograph with its hands painted on top, so it can show
   the real time in Denmark. contain at every width — js/ur.js reproduces that
   same fit to know where the dial landed, so the two must not drift apart. */
.ur__foto, .ur__visere {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
/* js/ur.js overwrites width/height/left/top with the geometry it also places
   the hands from, so the two cannot drift apart. What stands here is what a
   visitor without JavaScript gets: the photograph, framed the ordinary way. */
.ur__foto { object-fit: cover; max-width: none; }
/* The same frame js/ur.js computes — cover, with the zoom capped at 2.4 on a
   tall screen — so the photo stands where the script will put it from the
   first paint. Before this, the box jumped from CSS's to the script's the
   moment ur.js ran: CLS 0.41 on a phone and 0.09 on a computer, measured live
   29-09-2026. 1.79153 is the photo's ratio (2200 × 1228, the same in every
   file of the srcset), 2.4 is ZOOMLOFT in js/ur.js. */
@supports (width: 1cqw) {
  .film--hero .film__stage { container-type: size; }
  .film--hero .ur__foto {
    --ur-b: clamp(100cqw, calc(100cqh * 1.79153), 240cqw);
    inset: auto;
    width: var(--ur-b);
    height: calc(var(--ur-b) / 1.79153);
    left: calc((100cqw - var(--ur-b)) / 2);
    top: calc((100cqh - var(--ur-b) / 1.79153) / 2);
  }
}
.ur__visere { pointer-events: none; }

.film__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0) 22%, rgba(5,5,5,0) 70%, rgba(5,5,5,0.7) 100%);
}
.film__veil--hero { background: linear-gradient(180deg, rgba(5,5,5,0.35) 0%, rgba(5,5,5,0) 20%, rgba(5,5,5,0) 62%, rgba(5,5,5,0.85) 100%); }
/* The vault: a light top band for the captions, and a heavier fade at the
   foot so the last frames melt into the picks section's black. */
.film__veil--vault { background: linear-gradient(180deg, rgba(5,5,5,0.6) 0%, rgba(5,5,5,0) 30%, rgba(5,5,5,0) 68%, rgba(5,5,5,0.9) 100%); }

/* Captions: JS positions them by progress; before JS they stack statically. */
.film__cap, .hero-mark, .spec, .film__note, .film__hint { position: absolute; z-index: 2; }
html.js .film__cap, html.js .hero-mark, html.js .spec, html.js .film__note, html.js .film__hint { opacity: 0; visibility: hidden; will-change: opacity, transform; }
.film--static .film__cap, .film--static .hero-mark, .film--static .spec, .film--static .film__note { opacity: 1 !important; visibility: visible !important; transform: none !important; }
.film__cap { max-width: 520px; padding: 0 24px; }
.film__cap, .spec, .film__note, .film__hint { transform: translateY(var(--rise, 0px)); }
.film__cap--center { left: 0; right: 0; top: 50%; transform: translateY(calc(-50% + var(--rise, 0px))); text-align: center; max-width: none; }
.film__cap--center > * { max-width: 520px; margin-left: auto; margin-right: auto; }
.film__cap--left { left: clamp(24px, 8vw, 140px); top: 50%; transform: translateY(calc(-50% + var(--rise, 0px))); }
.film__cap--top { left: 0; right: 0; top: 11vh; text-align: center; max-width: none; margin: 0 auto; }
.film__title {
  font-size: clamp(2rem, 4.6vw, 3.8rem);
  font-style: italic; font-weight: 400; line-height: 1.08;
  margin-top: 18px;
  text-shadow: 0 2px 40px rgba(0,0,0,0.6);
}
.film__cap .eyebrow + .film__title { margin-top: 18px; }
.film__text { margin-top: 18px; max-width: 420px; font-size: 0.95rem; text-shadow: 0 1px 20px rgba(0,0,0,0.8); }
.film__cap--center .film__text { margin-left: auto; margin-right: auto; }
.film__note { left: 0; right: 0; bottom: 8vh; text-align: center; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.film__hint {
  left: 0; right: 0; bottom: 28px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--ink-faint); font-size: 0.65rem; letter-spacing: 0.24em; text-transform: uppercase;
}
.film__hint-line { width: 1px; height: 36px; background: linear-gradient(180deg, var(--gold), transparent); }

/* The wordmark tracks in over the first turn of the watch. */
.hero-mark { left: 0; right: 0; top: 50%; transform: translateY(calc(-50% + var(--rise, 0px))); text-align: center; padding: 0 24px; pointer-events: none; }
.hero-mark__word {
  display: flex; justify-content: center;
  font-family: var(--font-display); font-weight: 500; font-style: normal;
  font-size: clamp(2.6rem, 9.5vw, 9rem); line-height: 1;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 0 60px rgba(0,0,0,0.9), 0 0 120px rgba(0,0,0,0.6);
}
.hero-mark__word span { display: inline-block; letter-spacing: 0; margin: 0 0.06em; }
/* Med JavaScript spreder ur.js/film.js bogstaverne til 0,36 em i toppen (0,06 + 0,3) og samler dem, når man ruller.
   Står de samlet, til scriptet kører, springer ordet ud ~1 s efter indlæsningen (CLS 0,08 på en computer). */
html.js .hero-mark__word span { margin: 0 0.36em; }
.hero-mark__line { margin-top: 26px; font: 400 0.92rem/1.7 var(--font-sans); letter-spacing: 0.06em; color: var(--ink-soft); text-wrap: wrap; }

/* Spec callouts on the assembly: big number, quiet label, placed round the piece. */
.spec { display: flex; flex-direction: column; gap: 6px; padding: 0 24px; }
.spec__value { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; text-shadow: 0 2px 40px rgba(0,0,0,0.7); }
.spec__value small { font-size: 0.42em; color: var(--ink); margin-left: 0.08em; }
.spec__label { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); }
.spec__note { max-width: 300px; font-size: 0.78rem; line-height: 1.55; color: var(--ink-faint); margin-top: 6px; text-shadow: 0 1px 16px rgba(0,0,0,0.9); }
.spec--1 { left: clamp(24px, 9vw, 160px); top: 26%; }
.spec--2 { right: clamp(24px, 9vw, 160px); top: 36%; text-align: right; align-items: flex-end; }
.spec--3 { left: clamp(24px, 9vw, 160px); top: 56%; }
.spec--4 { right: clamp(24px, 9vw, 160px); top: 58%; text-align: right; align-items: flex-end; }
.film__note { max-width: 560px; margin: 0 auto; }

/* Story: the sentence arrives word by word. */
.words { position: relative; height: 240vh; background: var(--bg); }
.words__sticky {
  position: sticky; top: 0; height: 100vh; min-height: 560px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 24px;
}
.words__title { margin-top: 22px; font-size: clamp(2.4rem, 6vw, 5.4rem); font-style: italic; font-weight: 400; line-height: 1.1; max-width: 16ch; }
.words__title .w { display: inline-block; opacity: 0.16; transition: opacity 0.25s linear; }
.words__title .w.is-on { opacity: 1; }
html:not(.js) .words__title .w { opacity: 1; }
.words__text { margin-top: 32px; max-width: 520px; font-size: 1rem; opacity: 0.2; transition: opacity 0.5s ease; }
.words__text.is-on { opacity: 1; }
html:not(.js) .words__text { opacity: 1; }

.cta--final { border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .film--hero { height: 360vh; }
  .film--macro, .film--assembly, .film--vault { height: 300vh; }
  .film__cap--left { left: 24px; right: 24px; top: auto; bottom: 14vh; transform: translateY(var(--rise, 0px)); }
  .film__poster { object-fit: contain; }
  .spec--1, .spec--2, .spec--3, .spec--4 { left: 24px; right: 24px; top: auto; bottom: 16vh; text-align: left; align-items: flex-start; }
  .spec__value { font-size: 2.4rem; }
  .spec__note { max-width: none; }
  .film__note { bottom: 4vh; padding: 0 24px; }
}

/* ===== Forsidens butik: hylder, produktkort, mærker og banner =====
   Hylden er en vandret skinne, man skubber til side. Den bløder ud til begge
   kanter, så kortene løber ud af billedet i stedet for at stoppe i en margen —
   det er dét, der fortæller, at der er mere. */
.shelf { padding: var(--butik-luft) 0; background: var(--bg); }
.shelf + .shelf { padding-top: 0; }
/* Den foerste hylde efter filmen beholder den store luft: dér begynder butikken. */
.film:not(.promo) + .shelf { padding-top: var(--section-y); }
/* Ingen max-width her: polstringen holder selv indholdet i spalten (100vw - maxw), og begge dele samtidig gav på en
   meget bred skærm (zoomet helt ud) en spalte på 0 px, så overskriften stod ét ord pr. linje (07-10-2026). */
.shelf__head, .shelf__foot {
  padding: 0 max(24px, calc((100vw - var(--maxw)) / 2));
}
.shelf__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.shelf__heading { max-width: 560px; }
.shelf__title { margin: 20px 0 0; font-size: clamp(2rem, 4vw, 3rem); font-style: italic; font-weight: 400; line-height: 1.1; }
.shelf__lead { margin: 18px 0 0; color: var(--ink-soft); }
/* Staar ledeteksten alene - uden eyebrow og overskrift over sig - skal den
   ikke baere en topmargen, der ikke laengere adskiller den fra noget. */
.shelf__heading > :first-child { margin-top: 0; }
/* Butiksetiketten foran den beskrivende linje: lysere og lidt tungere end
   resten af teksten, så den læses som en mærkat og ikke som brødtekst. */
.shelf__kicker { color: var(--ink); font-weight: 500; }
.shelf__foot { margin-top: 32px; }

.shelf__arrows { display: flex; gap: 10px; flex: 0 0 auto; padding-bottom: 6px; }
.shelf__arrow {
  width: 46px; height: 46px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s ease;
}
.shelf__arrow svg { width: 20px; height: 20px; }
.shelf__arrow:hover { border-color: var(--gold); color: var(--gold); }
.shelf__arrow:disabled { opacity: 0.25; cursor: default; border-color: var(--line); color: var(--ink); }

/* scroll-padding holder det første kort fri af kanten, når pilene springer. */
.shelf__track {
  margin-top: 40px;
  display: flex; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 4px max(24px, calc((100vw - var(--maxw)) / 2));
  scroll-padding-left: max(24px, calc((100vw - var(--maxw)) / 2));
  scrollbar-width: none;
}
.shelf__track::-webkit-scrollbar { display: none; }
/* Meget bred skærm (zoomet ud): hylden holder sig i samme spalte som resten af siden i stedet for at løbe ud til
   højre kant. */
@media (min-width: 1800px) {
  .shelf__track { max-width: var(--maxw); margin-left: auto; margin-right: auto; padding: 4px 0; scroll-padding-left: 0; }
}
.shelf__track:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) { .shelf__track { scroll-behavior: auto; } }

/* Knappen er 24 x 24 px (WCAG 2.2 trykflade), prikken indeni den samme lille på 7 px. */
.shelf__dots { display: flex; justify-content: center; gap: 0; margin-top: 20px; }
.shelf__dot {
  position: relative; width: 24px; height: 24px; padding: 0; border: 0;   /* ingen radius: hele kvadratet er trykflade */
  background: transparent; cursor: pointer;
}
.shelf__dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; border-radius: 999px; }
.shelf__dot::before {
  content: ""; position: absolute; left: 8.5px; top: 8.5px; width: 7px; height: 7px; border-radius: 999px;
  background: var(--line); transition: background 0.3s ease, transform 0.3s var(--ease);
}
.shelf__dot.is-on::before { background: var(--gold); transform: scale(1.3); }

/* Produktkort */
.pcard {
  flex: 0 0 auto; width: clamp(214px, 62vw, 268px);
  scroll-snap-align: start; display: block;
}
.pcard__frame {
  position: relative; display: block; aspect-ratio: 1;
  background: var(--bg-elevated); border-radius: var(--radius-md); overflow: hidden;
  padding: 12%;
  transition: background 0.4s ease;
}
.pcard:hover .pcard__frame { background: var(--bg-elevated-2); }
.pcard__frame img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 20px 28px rgba(0,0,0,0.55)); transition: transform 0.8s var(--ease); }
.pcard:hover .pcard__frame img { transform: scale(1.05); }
/* Badgene ligger i en raekke, saa et kort kan baere flere - referencen viser
   "Fri fragt" og "Premium" ved siden af hinanden. */
.pcard__badges {
  position: absolute; left: 14px; top: 14px; right: 14px; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pcard__badge {
  padding: 5px 11px; border-radius: 999px;
  background: rgba(8,8,8,0.72); border: 1px solid var(--line);
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); backdrop-filter: blur(6px);
}
.pcard__badge--sale { color: var(--ink); border-color: var(--gold-dim); font-variant-numeric: tabular-nums; }
.pcard__badge--premium { color: var(--ink); border-color: var(--gold-dim); }
.pcard__size {
  position: absolute; right: 14px; bottom: 14px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(8,8,8,0.6);
  font-size: 0.66rem; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.pcard__brand { display: block; margin-top: 18px; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); }
.pcard__name { display: block; margin-top: 7px; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; color: var(--ink); }
.pcard__price { display: block; margin-top: 8px; font-size: 0.82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pcard__price--sale { color: var(--ink); }
.pcard__price--sale s { margin-left: 6px; color: var(--ink-faint); text-decoration-thickness: 1px; }

/* Mærkekort */
/* Mærkekortet er ét lukket, afrundet kort: billedet øverst, navnet på sit
   eget bånd nedenunder — inde i kortet, ikke svævende under det. Kortet
   klipper selv billedets hjørner, så __shot ikke skal have sin egen radius. */
.bcard {
  flex: 0 0 auto; width: clamp(272px, 83vw, 460px); scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--bg-elevated); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.6s var(--ease);
}
.bcard:hover { background: var(--bg-elevated-2); border-color: var(--line); transform: translateY(-4px); }
.bcard__shot { display: block; aspect-ratio: 19 / 8; overflow: hidden; background: #0b0b0b; }
.bcard__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
/* Produktfotos står frit i kortet i stedet for at dække det. Billedet beholder
   basens width/height: 100% — de måler mod en kasse med definit højde fra
   aspect-ratio — og contain lader det selv finde plads indenfor. Tidligere stod
   her height: 100% på et grid-element, og den procent kunne ikke opløses mod en
   cellehøjde, der selv kom fra aspect-ratio: billedet faldt tilbage til sin
   naturlige højde ved fuld bredde og blev klippet foroven og forneden. */
.bcard__shot--pad { padding: 3%; }
.bcard__shot--pad img { object-fit: contain; filter: drop-shadow(0 20px 28px rgba(0,0,0,0.55)); }
.bcard:hover .bcard__shot img { transform: scale(1.04); }
.bcard__foot {
  display: flex; align-items: baseline; justify-content: center; gap: 12px;
  padding: 14px 20px 16px; text-align: center;
}
.bcard__name { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.1; color: var(--ink); }
.bcard__count { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }

/* Kategorifliser (06-10-2026, Diturs flisegitter i Nordurs tøj): to brede fliser over hinanden, så fire firkantede to og
   to; smalle mellemrum, og kun gruppens yderste hjørner er runde. Teksten nederst til venstre på et mørkt slør. */
.kat {
  max-width: var(--maxw); margin: 0 auto 72px; padding: 0 3.6vw;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.kat__flise { position: relative; display: block; overflow: hidden; aspect-ratio: 1; background: #0b0b0b; }
.kat__flise--bred { grid-column: 1 / -1; aspect-ratio: 1600 / 416; }
.kat__flise--panorama { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.kat__flise--panorama img { object-position: 78% center; }
.kat__flise:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.kat__flise:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.kat__flise img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--ease); }
.kat__flise::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(5,6,8,0.78) 0%, rgba(5,6,8,0.25) 42%, rgba(5,6,8,0) 62%);
}
.kat__flise--bred::after { background: linear-gradient(90deg, rgba(5,6,8,0.72) 0%, rgba(5,6,8,0.2) 45%, rgba(5,6,8,0) 60%); }
.kat__flise--panorama::after { background: linear-gradient(0deg, rgba(5,6,8,0.9) 0%, rgba(5,6,8,0.45) 45%, rgba(5,6,8,0) 75%); }
.kat__tekst { position: absolute; left: 0; bottom: 0; z-index: 1; padding: 0 clamp(16px, 4vw, 36px) clamp(14px, 3.6vw, 32px); display: flex; flex-direction: column; gap: 4px; }
.kat__flise--bred .kat__tekst { top: 0; justify-content: center; padding-bottom: 0; }
.kat__navn { font-family: var(--font-display); font-size: clamp(1.25rem, 4.6vw, 2.1rem); line-height: 1.1; color: var(--ink); }
.kat__se { font-size: clamp(0.72rem, 2.6vw, 0.95rem); color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; }
.kat__se::after { content: ""; width: 18px; height: 1px; background: var(--gold); transition: width 0.4s var(--ease); }
.kat__om { font-size: clamp(0.78rem, 2.8vw, 0.95rem); line-height: 1.5; color: var(--ink-soft); max-width: 34em; }
.kat__flise:hover img { transform: scale(1.04); }
.kat__flise:hover .kat__se::after { width: 30px; }
.kat__flise:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Telefonen: to brede fliser under hinanden, 2 x 2 og den brede nederst. Computeren (07-10-2026, brugerens forlæg:
   Diturs smykkegitter på pc): de to brede side om side, de fire firkantede på én række og den brede over hele bredden
   nederst; teksten nederst til venstre på et slør fra bunden, og kun gruppens yderste hjørner er runde. */
@media (min-width: 900px) {
  .kat { grid-template-columns: repeat(4, 1fr); gap: 5px; max-width: calc(var(--maxw) + 48px); padding: 0 24px; }
  .kat__flise--bred { grid-column: span 2; aspect-ratio: 638 / 192; }
  .kat__flise--bred::after { background: linear-gradient(0deg, rgba(5,6,8,0.78) 0%, rgba(5,6,8,0.25) 50%, rgba(5,6,8,0) 75%); }
  .kat__flise--bred .kat__tekst { top: auto; justify-content: flex-end; }
  .kat__tekst, .kat__flise--bred .kat__tekst { padding: 0 20px 18px; }
  .kat__flise--panorama { aspect-ratio: 5 / 1; }
  .kat__flise--panorama img { object-position: center; }
  .kat__flise--panorama .kat__tekst { padding: 0 20px 22px; }
  .kat__om { max-width: 44em; }
  .kat__navn { font-size: 1.7rem; }
  .kat__se { font-size: 0.92rem; }
  .kat__flise:first-child { border-radius: var(--radius-md) 0 0 0; }
  .kat__flise:nth-child(2) { border-radius: 0 var(--radius-md) 0 0; }
}

/* Smykkerne nederst har eget billede til hver bredde (<picture>: 16:9 på telefonen, 5:1 på computeren). */
.kat__flise picture { display: block; width: 100%; height: 100%; }
.kat--smykker .kat__flise--panorama img { object-position: center; }
div.kat__flise { cursor: default; }
/* Bannerdøren ind i en skive af kataloget */
.promo {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: var(--maxw);
  margin: 0 auto;
  border-radius: var(--radius-lg);
  /* Referencens banner er malt til 1093 x 623 px paa en 1179 px skaerm:
     92,7 % af bredden og forholdet 1,75:1. 16:9 rammer 1,78:1. Teksten staar
     lodret midt i, ikke i bunden. */
  aspect-ratio: 16 / 9;
  display: flex; align-items: center;
}
.promo__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* Premium-banneret viser atmosphere-sekvensen: uret paa sort marmor med roeg i
   lyskeglen. js/film.js finder den paa data-film og koerer den i loop-tilstand,
   saa den spiller af sig selv i stedet for at blive scrubbet af scroll. Stagen
   skal ligge fladt i banneret, ikke klaebe som i .film-sektionerne, og
   sloeret fra .promo::after ligger ovenpaa, saa teksten bliver ved med at
   kunne laeses. Uden JS — eller med reduceret bevaegelse — bliver posteren
   staaende, og banneret ser ud som foer. */
.promo__film { position: absolute; inset: 0; z-index: -2; height: 100%; min-height: 0; }
.promo__film .film__poster,
.promo__film .film__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(8,8,8,0.9) 0%, rgba(8,8,8,0.72) 38%, rgba(8,8,8,0.15) 100%);
}
.promo__body { padding: clamp(32px, 5vw, 64px); max-width: 560px; }
.promo__title { margin: 20px 0 0; font-size: clamp(2rem, 4vw, 3rem); font-style: italic; font-weight: 400; line-height: 1.1; }
.promo__sub { margin: 18px 0 28px; color: var(--ink-soft); }

@media (max-width: 900px) {
  .shelf__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .shelf__arrows { display: none; }
  .shelf__track { margin-top: 28px; gap: 12px; }
  /* 3,6 vw i hver side giver 92,8 vw bredde, som referencen. Sloeret bliver
     liggende fra venstre mod hoejre, saa fotoet staar frit i hoejre side. */
  /* aspect-ratio giver ingen bund: bliver teksten hoejere end feltet, klipper
     overflow: hidden den. Paa mobil saettes hoejden derfor fri og gulvet i vw i
     stedet: 92,8 vw bredde / 1,778 = 52,2 vw. Banneret staar 16:9 naar teksten
     kan vaere der, og vokser kun paa de smalleste skaerme. */
  .promo { margin-left: 3.6vw; margin-right: 3.6vw; border-radius: var(--radius-md);
           aspect-ratio: auto; min-height: 52.2vw; }
  .promo::after { background: linear-gradient(90deg, rgba(8,8,8,0.94) 0%, rgba(8,8,8,0.8) 46%, rgba(8,8,8,0.25) 100%); }
  /* Teksten skal kunne staa i det flade felt uden at blive klippet, saa den
     skrumper paa mobil i stedet for at banneret vokser. */
  .promo__body { padding: 18px; max-width: 88%; }
  .promo .eyebrow { font-size: 0.62rem; letter-spacing: 0.22em; }
  .promo__title { margin-top: 9px; font-size: 1.32rem; }
  .promo__sub { margin: 9px 0 13px; font-size: 0.78rem; line-height: 1.42; }
  .promo .btn { padding: 9px 20px; font-size: 0.66rem; }
}

/* ---- Kredsen: "laes mere"-siden (kredsen.html) ----------------------------
   Diturs klubside i Nordurs toej: et hero-kort med collage, fire smaa kort
   (grad, Pointshoppen, fordele, kortstakken), karrusellen "Medlemsfordele!"
   med ét metalkort pr. grad, fire feature-kort med billede, knap og FAQ. */
.klub { padding: 150px 16px var(--section-y); }
.klub__inner { max-width: 1080px; margin: 0 auto; }
.klub__hero, .klub__kort, .fordelkort {
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}
.klub__hero { display: grid; gap: 28px; padding: 34px 24px; overflow: hidden; }
.klub__hero p { color: var(--ink-soft); line-height: 1.7; margin: 16px 0 26px; font-size: 1.02rem; }
.klub__titel { font-size: clamp(2.1rem, 5vw, 3.2rem); font-style: italic; margin: 10px 0 0; line-height: 1.05; }
.klub__titel--mindre { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.klub__collage { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: clamp(260px, 60vw, 380px); }
.klub__collage img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.klub__collage img:first-child { grid-row: 1 / 3; }
.klub__grid { display: grid; gap: 16px; margin-top: 16px; }
.klub__kort { padding: 30px 24px 28px; text-align: center; }
.klub__kort h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.55rem; margin: 0 0 12px; }
.klub__kort p { color: var(--ink-soft); line-height: 1.65; font-size: 0.95rem; margin: 0 auto; max-width: 440px; }
.klub__kort p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.klub__bar { margin: 30px auto 4px; max-width: 320px; height: 44px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); padding: 4px; }
.klub__bar { position: relative; }
.klub__bar span { display: flex; align-items: center; justify-content: center; height: 100%; width: var(--p); min-width: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); color: #080808; font-family: var(--font-sans); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; }
/* Under 18 % er der ikke plads til tallet inde i fyldet; saa staar det lige uden for, i guld. */
.klub__bar i { position: absolute; top: 50%; left: calc(4px + var(--p) + 14px); transform: translateY(-50%); font-style: normal; color: var(--ink); font-family: var(--font-sans); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; }
.klub__bar-tekst { margin: 12px auto 0 !important; color: var(--ink) !important; font-size: 0.85rem !important; }
.minside__bar { margin: 28px auto 0; max-width: 400px; }
.minside__bar-ender { margin: 8px auto 0; max-width: 400px; display: flex; justify-content: space-between; padding: 0 12px; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.minside__naeste { margin-top: 12px; }
/* telefonrammen med to varer fra Pointshoppen */
.klub__telefon { margin: 28px auto 0; max-width: 300px; border: 6px solid #1d1d1d; border-bottom: 0; border-radius: 30px 30px 0 0; background: var(--bg); padding: 18px 14px 0; box-shadow: 0 0 0 1px rgba(255,255,255,0.06); }
.klub__telefon-hoved { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.klub__telefon-hoved strong { color: var(--ink); letter-spacing: 0.04em; text-transform: none; font-size: 0.85rem; }
.klub__telefon-varer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.klub__vare { background: var(--bg-elevated-2); border-radius: 12px 12px 0 0; padding: 10px 10px 0; text-align: left; }
.klub__vare img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.klub__vare span { display: block; font-size: 0.68rem; color: var(--ink-soft); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klub__vare em { display: inline-block; font-style: normal; font-size: 0.66rem; font-weight: 600; color: #080808; background: var(--gold); border-radius: 6px; padding: 3px 8px; margin: 6px 0 10px; }
.klub__ikoner { list-style: none; padding: 0; margin: 28px 0 4px; display: flex; justify-content: center; gap: clamp(14px, 4vw, 28px); }
.klub__ikon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: rgba(212,175,55,0.1); color: var(--gold); box-shadow: 0 0 0 8px rgba(212,175,55,0.05); }
.klub__ikon svg { width: 26px; height: 26px; }
/* kortstakken: seks kort forskudt ned og til hoejre, som en vifte set fra siden */
.stak { position: relative; margin: 28px auto 0; max-width: 340px; aspect-ratio: 340 / 420; overflow: hidden; border-radius: var(--radius-sm); }
.stak__kort {
  position: absolute; left: calc(var(--i) * 3.2%); top: calc(var(--i) * 12.5%); width: 84%; aspect-ratio: 1.586;
  border-radius: 10px; color: #1c1610; box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.35) inset;
  background-image:
    repeating-linear-gradient(100deg, rgba(255,255,255,0.06) 0 1px, rgba(0,0,0,0) 1px 3px),
    linear-gradient(160deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,0.12) 100%),
    linear-gradient(135deg, var(--m1) 0%, var(--m2) 48%, var(--m3) 74%, var(--m1) 100%);
  overflow: hidden;
}
.stak__kort.kort--sort { color: var(--gold-bright); }
.stak__nr { position: absolute; left: 6%; top: 11%; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-sans); font-size: 0.8rem; }
.stak__navn { position: absolute; left: calc(6% + 40px); top: 11%; height: 30px; display: flex; align-items: center; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.stak__navn::before { content: ""; width: 14px; height: 1px; background: currentColor; margin-right: 8px; }
.stak__navn::after { content: ""; position: absolute; left: calc(100% + 10px); right: -200px; top: 50%; height: 1px; background: currentColor; opacity: 0.6; }
.stak__segl { position: absolute; right: -8%; bottom: -22%; width: 58%; height: auto; opacity: 0.22; }
/* det ene kort paa min side: samme kort som i stakken, men alene, i fuld bredde og med medlemmets navn */
.stak__kort--enkelt { position: relative; left: auto; top: auto; width: 100%; max-width: 360px; margin: 18px auto 0; }
/* Kortet paa min side vipper under musen (js/medlem.js), og et lysskær glider over metallet */
#msKort { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s; transform-style: preserve-3d; will-change: transform; }
#msKort.er-vippet { transition: transform 0.08s linear, box-shadow 0.3s; box-shadow: 0 24px 50px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.35) inset; }
.stak__glans { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 28%, rgba(255,255,255,0) 55%); }
#msKort.er-vippet .stak__glans { opacity: 1; }
.kort--sort .stak__glans { mix-blend-mode: screen; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,235,190,0.22) 0%, rgba(212,175,55,0.08) 30%, rgba(0,0,0,0) 58%); }
/* Bagsiden: vises, naar kortet er drejet om paa telefonen (js/medlem.js). Den er spejlvendt tilbage, saa teksten laeses rigtigt. */
.stak__bag { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 5.5% 7% 5%; opacity: 0; transform: rotateY(180deg); pointer-events: none;
  background: linear-gradient(160deg, rgba(0,0,0,0.04), rgba(0,0,0,0.26)); text-align: left; }
.stak__bag-top { display: flex; align-items: center; gap: 7px; padding-bottom: 5px; border-bottom: 1px solid currentColor; }
.stak__bag-top img { width: 18px; height: 18px; }
.stak__bag-top b { font-family: var(--font-display); font-weight: 500; font-size: 1rem; letter-spacing: 0.2em; text-transform: uppercase; }
.stak__bag-top i { margin-left: auto; font-style: normal; font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.8; }
.stak__bag-data { flex: 1; display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 5px 12px; }
.stak__bag-data div { min-width: 0; }
.stak__bag-data span { display: block; font-family: var(--font-sans); font-size: 0.52rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.72; }
.stak__bag-data b { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stak__bag-siden { font-family: var(--font-sans); font-size: 0.52rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.72; }
#msKort.er-bag .stak__bag { opacity: 1; }
#msKort.er-bag > :not(.stak__bag):not(.stak__glans) { opacity: 0; }
/* Oplysningerne staar paa kortets bagside; listens raekker og "Medlem siden" er kun for skaermlaesere (alle skaerme) */
.kort-har-data .minside__dl .paa-kort, .kort-har-data #msSiden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; }
#msKort.kan-drejes { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: grab; }
.minside__drej { margin: 10px 0 0; text-align: center; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-dim, rgba(244,242,236,0.55)); }
.stak__ejer { position: absolute; left: 6%; right: 8%; bottom: 12%; text-align: left; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 5.6vw, 1.5rem); letter-spacing: 0.02em; line-height: 1.15; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* karrusellen: et metalkort pr. grad, vandret rul med snap */
.klub__overskrift { text-align: center; font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 5vw, 2.8rem); margin: 60px 0 22px; }
/* ===== Sikker handel (forsiden) =====
   Ét kort midt paa siden, som Diturs — men harmonikaen er <details>, saa den
   virker uden JS og med tastatur af sig selv. Plusset/minusset er FAQ'ens paa
   kredsen.html; reglerne staar for sig, fordi .klub__faq er bundet til den
   sides egen bredde. */
/* Sikker handel er forsidens sidste sektion (CTA'en "Udforsk kollektionen" er taget
   af 22-09-2026), saa den har selv luft ned til footeren. */
.sikker { padding: 0 24px var(--section-y); }
.sikker__kort {
  max-width: 640px; margin: 0 auto; text-align: center;
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 44px 32px 20px;
}
/* Nordurs eget maerke: en bezel med minutstreger, ringtekst og stjernen. Det er
   vores eget navn paa vores egne loefter — IKKE et tredjepartssegl. Skriv aldrig
   "certificeret", "godkendt" eller "verificeret" i det, og laan ingen andens form. */
.sikker__segl { display: block; width: 148px; height: 148px; margin: 0 auto 22px; }
.sikker__segl svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55)); }
.sikker__titel { font-size: clamp(1.5rem, 4vw, 2rem); font-style: italic; font-weight: 400; margin: 0 0 12px; }
.sikker__sub { color: var(--ink-faint); font-size: 0.88rem; line-height: 1.7; margin: 0 auto 28px; max-width: 46ch; }
.sikker__sub a, .sikker details a { color: var(--ink); }
/* Teksten i harmonikaen er venstrestillet, selv om kortet er centreret:
   en brødtekst paa fem linjer er ikke til at laese centreret. */
.sikker details { border-top: 1px solid var(--line); text-align: left; }
.sikker summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 18px 34px 18px 0; font-family: var(--font-sans);
  font-weight: 500; font-size: 0.95rem;
}
.sikker summary::-webkit-details-marker { display: none; }
.sikker summary::after { content: "+"; position: absolute; right: 4px; top: 15px; font-size: 1.3rem; color: var(--gold); font-weight: 300; }
.sikker details[open] summary::after { content: "–"; }
.sikker summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.sikker details p { margin: 0 0 20px; font-size: 0.88rem; color: var(--ink-faint); line-height: 1.75; max-width: none; }

@media (max-width: 720px) {
  .sikker__kort { padding: 36px 22px 14px; }
}

/* ===== Baandet med vores egne anmeldelser (forsiden) =====
   Samme karrusel som medlemsfordelene paa kredsen.html. Sektionen fylder
   ingenting, foer js/trust.js har faaet svar — den er hidden i HTML'en, og
   [hidden] vinder over display takket være reglen oeverst i filen. */
.trust { padding: var(--section-y) 24px; border-top: 1px solid var(--line-soft); }
.trust__inner { max-width: var(--maxw); margin: 0 auto; text-align: center; }
.trust__titel { font-size: clamp(1.6rem, 4vw, 2.2rem); font-style: italic; font-weight: 400; margin: 12px 0 8px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.trust__titel .anm__stjerne-ikon { width: 1.05em; height: 1.05em; }
.trust__titel span { font-style: normal; font-size: 0.5em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.trust__sub { color: var(--ink-faint); font-size: 0.9rem; margin-bottom: 36px; }
.trust__liste { text-align: left; justify-content: flex-start; }
.trust__head { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 24px; text-align: center; margin-bottom: 28px; }
.trust__head .trust__titel { justify-content: center; }
.trust__pile { position: absolute; right: 0; bottom: 0; }
.trust__head .trust__sub { margin-bottom: 0; }
.trust__pile { flex: none; }
.trust--tom .trust__head { justify-content: center; text-align: center; }
.trust--tom .trust__head .trust__titel { justify-content: center; }
.trust--tom .trust__sub { max-width: 52ch; margin: 0 auto; line-height: 1.7; }
.trust__knap { margin-top: 4px; }
.trust__tp { margin: 22px 0 0; }
.trust__tp-knap { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 22px; border: 1.5px solid var(--gold); border-radius: 8px; color: var(--ink); font-size: 1rem; font-weight: 600; text-decoration: none; background: transparent; transition: background-color .15s; }
.trust__tp-knap:hover, .trust__tp-knap:focus-visible { background: rgba(212, 175, 55, .08); }
.trust__tp-knap svg { width: 20px; height: 20px; color: var(--gold); flex: none; margin-left: 2px; }
.trust__tp-navn { font-weight: 700; letter-spacing: -.01em; }
/* Bedoemmelsen i overskriften: fem kasser i guld med en hvid stjerne; den
   sidste fyldt efter snittet (--fyld saettes af js/trust.js). */
.trust__kasser { display: inline-flex; gap: 4px; }
.trust__kasse { display: grid; place-items: center; width: clamp(38px, 9vw, 52px); aspect-ratio: 1;
  background: linear-gradient(90deg, var(--gold) var(--fyld, 0%), #2a2a2c var(--fyld, 0%)); }
.trust__kasse svg { width: 74%; height: 74%; }
.trust__kasser--lille { gap: 3px; }
.trust__kasser--lille .trust__kasse { width: 22px; }
.trust__sub--antal { font-size: clamp(1rem, 2.4vw, 1.25rem); color: var(--ink); margin-top: 6px; }
.trust__sub--antal a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.trust__sub--antal a:hover { text-decoration-color: var(--gold); }
.trust__vare { display: flex; align-items: center; gap: 10px; margin-top: 6px; text-decoration: none; }
.trust__vare:hover span, .trust__vare:focus-visible span { text-decoration: underline; text-decoration-color: var(--gold); }
.trust__foto { width: 44px; height: 44px; flex: none; object-fit: contain; border-radius: 10px; background: #111; border: 1px solid var(--line-soft); }
.trust__kort {
  scroll-snap-align: start; flex: 0 0 300px; max-width: 300px;
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px; display: flex; flex-direction: column; gap: 12px;
}
.trust__kort h3 { font-size: 1rem; font-weight: 600; margin: 0; }
/* Et enkelt ord paa 300 tegn gav hele siden vandret rul paa urets side; her
   gaelder det samme. */
.trust__kort p { font-size: 0.9rem; color: var(--ink-faint); line-height: 1.7; margin: 0; overflow-wrap: anywhere; }
.trust__fod { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; color: var(--ink-faint); }
.trust__vare { color: var(--ink); }
.trust__note { margin-top: 20px; font-size: 0.75rem; color: var(--ink-faint); line-height: 1.7; max-width: 60ch; margin-left: auto; margin-right: auto; }

@media (max-width: 720px) {
  .trust__kort { flex-basis: 78vw; max-width: 78vw; }
  .trust__pile { display: none; }
}

.karrusel { list-style: none; margin: 0 -16px; padding: 4px 16px 24px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.karrusel::-webkit-scrollbar { display: none; }
/* Kan rulles med piletasterne (tabindex="0"); kanten vises kun ved tastaturfokus. */
.karrusel:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gradkort {
  flex: 0 0 min(78vw, 300px); scroll-snap-align: center; aspect-ratio: 300 / 430; border-radius: 16px; padding: 22px 20px; color: #1c1610; position: relative; overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.35) inset;
  background-image:
    repeating-linear-gradient(100deg, rgba(255,255,255,0.06) 0 1px, rgba(0,0,0,0) 1px 3px),
    linear-gradient(160deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,0.12) 100%),
    linear-gradient(135deg, var(--m1) 0%, var(--m2) 48%, var(--m3) 74%, var(--m1) 100%);
}
.gradkort--sort { color: var(--gold-bright); display: flex; flex-direction: column; }
.gradkort__hoved { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.gradkort__nr { flex: none; width: 38px; height: 38px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-sans); font-size: 1.05rem; }
.gradkort__nr--sort { font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; }
.gradkort__navn { font-family: var(--font-sans); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; }
.gradkort__navn::before { content: "— "; }
.gradkort__linje { flex: 1; height: 1px; background: currentColor; opacity: 0.7; }
.gradkort__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.gradkort__liste li { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-sans); font-size: 0.78rem; line-height: 1.35; }
.gradkort .ikon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.gradkort .ikon svg { width: 18px; height: 18px; display: block; }
.gradkort__laas { flex: 1; display: grid; place-items: center; }
.gradkort__laas svg { width: 96px; height: 96px; opacity: 0.85; }
.gradkort__note { margin: 0; text-align: center; font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.klub__intro { text-align: center; margin: 44px auto 26px; max-width: 620px; }
/* feature-kortene: billede med ikon, overskrift og tekst */
.fordelkort { overflow: hidden; }
.fordelkort__billede { position: relative; aspect-ratio: 16 / 10; }
.fordelkort__billede img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.85) brightness(0.8); }
.fordelkort__ikon { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: rgba(5,5,5,0.72); color: var(--gold); box-shadow: 0 0 0 10px rgba(5,5,5,0.3); backdrop-filter: blur(4px); }
.fordelkort__ikon svg { width: 32px; height: 32px; }
.fordelkort .eyebrow { margin: 22px 24px 0; }
.fordelkort h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; margin: 8px 24px 0; }
.fordelkort p { color: var(--ink-soft); line-height: 1.65; font-size: 0.92rem; margin: 10px 24px 26px; }
.fordelkort p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Favoritter og Anmeldelser: de to kort er illustrationer bygget af sitets egne varer og fotos, ikke skaermbilleder */
.fordelkort__billede--lys { background: linear-gradient(135deg, #f3f3f5 0%, #dcdce1 100%); }
.fordelkort__billede--lys img, .fordelkort__billede--foto img { filter: none; }
.favkollage { position: absolute; inset: 0; overflow: hidden; perspective: 900px; }
.favkollage__gitter { position: absolute; left: -1%; top: 9%; width: 118%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3%; transform: rotateX(14deg) rotateY(-14deg) rotateZ(4deg); transform-origin: 30% 10%; }
.minikort { position: relative; background: #fff; border-radius: 9px; padding: 9% 9% 10%; box-shadow: 0 12px 26px rgba(0,0,0,0.16); color: #1c1c1e; font-family: var(--font-sans); line-height: 1.2; }
.minikort img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; display: block; }
.minikort__hjerte { position: absolute; right: 8%; top: 7%; width: 14px; height: 14px; color: #232838; }
.minikort__hjerte svg { width: 100%; height: 100%; display: block; }
.minikort__hjerte.is-fav svg { fill: currentColor; }
.minikort__maerke { display: block; margin-top: 8%; font-size: 0.46rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.minikort__navn { display: block; margin-top: 2px; font-size: 0.44rem; color: #5b5b62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minikort__pris { display: block; margin-top: 3px; font-size: 0.5rem; font-weight: 600; }
.minikort__pris s { color: #8a8a90; font-weight: 400; margin-left: 4px; }
.minikort__rabat { position: absolute; left: 7%; top: 7%; background: #e3173e; color: #fff; font-size: 0.4rem; font-weight: 700; padding: 2px 4px; border-radius: 3px; letter-spacing: 0.02em; }
.fordelkort__billede--foto { background: #d9d5cf; }
.anmkollage__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.anmkort { position: absolute; background: #fff; color: #1c1c1e; border-radius: 8px; padding: 10px 12px; width: 56%; box-shadow: 0 10px 26px rgba(0,0,0,0.22); font-family: var(--font-sans); font-size: 0.56rem; line-height: 1.35; display: grid; gap: 3px; }
.anmkort--1 { left: 7%; top: 12%; padding-right: 26%; }
.anmkort--2 { left: 38%; bottom: 10%; width: 50%; }
.anmkort__stjerner { color: #1c1c1e; letter-spacing: 0.05em; font-size: 0.7rem; line-height: 1; }
.anmkort strong { font-size: 0.6rem; font-weight: 700; }
.anmkort em { font-style: normal; color: #6a6a72; font-size: 0.5rem; margin-top: 2px; }
.anmkort img { position: absolute; right: 8%; top: 12%; height: 76%; width: auto; max-width: 24%; object-fit: contain; }
@media (max-width: 640px) {
  .fordelkort__billede--foto { aspect-ratio: 4 / 3; }   /* saa skiven staar frit mellem de to kort, som i forbilledet */
  .anmkort--1 { top: 7%; }
  .anmkort--2 { bottom: 7%; left: 44%; }
}

/* Hjertet paa produktsiden (listesidernes hjerte staar i css/boss.css) */
.btn--fav { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; background: transparent; border: 1px solid var(--gold); color: var(--ink); }
.btn--fav:hover { background: rgba(212,175,55,0.1); color: var(--ink); }   /* .btn:hover vinder ellers og goer teksten sort */
.btn--fav.is-fav { background: rgba(212,175,55,0.14); }
.btn--fav svg { width: 18px; height: 18px; flex: none; }
.btn--fav.is-fav svg { fill: currentColor; }
.btn--foresp { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; background: transparent; border: 1px solid rgba(244,242,236,0.22); color: var(--ink); }
.btn--foresp:hover { background: transparent; border-color: var(--gold); color: var(--ink); }
.btn--foresp svg { width: 18px; height: 18px; flex: none; }
.btn--fav-ikon { padding-left: 12px; padding-right: 12px; }
.btn--fav-ikon svg { width: 16px; height: 16px; display: block; }
.btn--fav-ikon.is-fav svg { fill: currentColor; }
.watch-card__foot .btn--fav-ikon { margin-left: 8px; }

/* Min side: favoritter og anmeldelser */
.minside__afsnit { margin: 40px auto 0; max-width: 400px; text-align: left; }
.minside__afsnit > h3 { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin: 0 0 6px; }
.minside__tom { color: var(--ink-faint); font-size: 0.85rem; margin: 10px 0 0; }
.favliste { list-style: none; margin: 0; padding: 0; }
.favliste li { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.favliste a { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; min-width: 0; color: inherit; text-decoration: none; border-radius: 8px; }
.favliste a:hover .favliste__navn { color: var(--ink); }
.favliste a:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.favliste img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,0.04); }
.favliste__navn { display: block; color: var(--ink); font-size: 0.88rem; }
.favliste__pris { display: block; color: var(--ink-faint); font-size: 0.78rem; margin-top: 2px; }
.favliste__fjern { background: none; border: none; padding: 6px; cursor: pointer; color: var(--ink); width: 34px; height: 34px; display: grid; place-items: center; }
.favliste__fjern svg { width: 18px; height: 18px; fill: currentColor; }
.favliste__fjern:hover { color: var(--ink); }
.anmliste { list-style: none; margin: 0; padding: 0; }
.anmliste li { padding: 12px 0; border-top: 1px solid var(--line-soft); font-size: 0.85rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.anmliste__hoved { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.anmliste__stjerner { color: var(--gold); font-size: 0.85rem; display: inline-flex; gap: 2px; }
.anmliste__ur { color: var(--ink-faint); font-size: 0.74rem; text-align: right; }
.anmliste__titel { display: block; color: var(--ink); margin-top: 4px; }
.anmliste__tekst { margin: 4px 0 0; white-space: pre-line; line-height: 1.5; }
.anmliste__fod { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 0.74rem; color: var(--ink-faint); }
.anmliste__fod .medlem__link { font-size: 0.74rem; padding: 8px 10px; margin: -8px -10px; }   /* et rigtigt maal at ramme */
.minside__afsnit > .btn { margin-top: 14px; }
.stjerner { border: none; padding: 0; margin: 0; }
.stjerner legend { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); padding: 0; margin-bottom: 6px; }
.stjerner__valg { display: flex; gap: 4px; }
.stjerner__valg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stjerner__valg label { width: 34px; height: 34px; padding: 2px; color: var(--gold); cursor: pointer; }
.stjerner__valg label svg { width: 100%; height: 100%; display: block; }
.stjerner__valg input:checked + label svg, .stjerner__valg label:has(~ input:checked) svg, .stjerner__valg label:hover svg, .stjerner__valg label:has(~ label:hover) svg { fill: currentColor; }
.stjerner__valg input:focus-visible + label { outline: 1px solid var(--gold); outline-offset: 2px; }
textarea.felt__input { min-height: 120px; resize: none; padding-top: 18px; line-height: 1.5; }   /* grebet laa uden for den runde ramme */

/* Linjen på en produktside, som kun nogle ser endnu (vare-lag.php vl_tidlig_side) */
.product__tidlig { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 10px 14px; border: 1px solid rgba(212,175,55,0.45); border-radius: 12px; font-size: 0.82rem; line-height: 1.45; color: var(--ink); }
.product__tidlig svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--gold); }

/* Kortholderens sektion paa min side (medlem.php h=sort tegner den, js/medlem.js lægger den ind). Sort flade med guldkant;
   teksten er hvid som alt andet paa sitet, guldet kun paa kanten, laasen og stjernerne. */
.sortkort { position: relative; }
.sortkort__plade { aspect-ratio: auto; flex: none; margin-top: 14px; padding: 22px 22px 18px; }
.sortkort__plade .gradkort__hoved { margin-bottom: 16px; }
.sortkort__eyebrow { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.sortkort__eyebrow svg { width: 15px; height: 15px; flex: none; color: var(--gold); }
.sortkort__fordele { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sortkort__fordele li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-family: var(--font-sans); font-size: 0.78rem; line-height: 1.45; color: rgba(244,242,236,0.72); }
.sortkort__fordele li svg { width: 14px; height: 14px; margin-top: 2px; color: var(--gold); }
.sortkort__fordele strong { display: block; color: var(--ink); font-weight: 600; font-size: 0.82rem; }
.sortkort__fordele small { display: block; font-size: inherit; }
/* Telefonen: fordelene foldet sammen (js/medlem.js fold()) — de første som titler, tryk på én for teksten, "Se alle" for resten */
.fold-knap { display: none; }
@media (max-width: 1023.98px) {
  .kan-foldes.er-foldet > li:nth-child(n+5) { display: none; }
  .gradkort__liste.kan-foldes.er-foldet > li:nth-child(n+4) { display: none; }
  .sortkort__fordele.er-foldet { gap: 2px; }
  .sortkort__fordele.er-foldet li { cursor: pointer; padding: 9px 0; border-bottom: 1px solid rgba(212,175,55,0.14); grid-template-columns: 16px 1fr 12px; align-items: start; }
  .sortkort__fordele.er-foldet li::after { content: ""; width: 7px; height: 7px; margin-top: 5px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(45deg); transition: transform 0.2s; }
  .sortkort__fordele.er-foldet li.er-aaben::after { transform: rotate(-135deg); margin-top: 9px; }
  .sortkort__fordele.er-foldet li strong { margin: 0; }
  .sortkort__fordele.er-foldet small { display: none; }
  .sortkort__fordele.er-foldet li.er-aaben small { display: block; margin-top: 4px; }
  .fold-knap { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 11px 14px; border: 1px solid rgba(212,175,55,0.45); border-radius: 999px; background: none; color: var(--ink); font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.06em; cursor: pointer; }
  .fold-knap::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: translateY(-2px) rotate(45deg); }
  .fold-knap[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  .minside__plade .fold-knap { border-color: currentColor; color: inherit; }
  /* Fordelene som boks i gradens eget metal, også på telefonen */
  .minside__fordele { display: block; }
  .minside .minside__plade { aspect-ratio: auto; flex: none; margin-top: 12px; padding: 18px 18px 16px; text-align: left; }
  .minside__plade .gradkort__hoved { margin-bottom: 12px; }
  .minside__fordele-naeste { margin: 12px 0 0; color: var(--ink); font-size: 0.8rem; line-height: 1.5; }
}
@media (min-width: 1024px) { .sortkort__fordele { grid-template-columns: 1fr 1fr; gap: 14px 24px; } }
.sortkort__boks { margin-top: 16px; padding: 20px 22px 22px; border: 1px solid var(--line-soft); border-radius: 16px; background: rgba(255,255,255,0.02); }
.sortkort__boks > :first-child { margin-top: 0; padding-top: 0; border-top: none; }
.minside__skriv .sortkort__boks { margin-top: 14px; }
.minside__mails .sortkort__boks { margin-top: 14px; }
.minside__valg { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; font-size: 0.88rem; line-height: 1.55; color: var(--ink); cursor: pointer; }
.minside__valg input { width: 18px; height: 18px; accent-color: var(--gold); margin-top: 2px; flex: none; }
.minside__valg strong { font-weight: 600; }
.minside__skriv-tekst { margin: 0 0 16px; font-size: 0.86rem; line-height: 1.55; color: var(--ink-soft); }
.sortkort__tidlige { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.sortkort__tidlige ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.sortkort__tidlige a { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; color: var(--ink-soft); text-decoration: none; font-size: 0.8rem; line-height: 1.45; border-radius: 10px; }
.sortkort__tidlige a:hover strong, .sortkort__tidlige a:focus-visible strong { text-decoration: underline; }
.sortkort__tidlige a:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.sortkort__tidlige img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,0.04); }
.sortkort__tidlige strong { display: block; color: var(--ink); font-size: 0.88rem; font-weight: 500; }
.sortkort__kontakt { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.sortkort__kontakt[hidden] { display: none; }
.sortkort__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--ink); font-family: var(--font-display); font-size: 1.25rem; }
.sortkort__etiket { display: block; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.sortkort__kontakt strong { display: block; color: var(--ink); font-size: 1.02rem; margin-top: 2px; }
.sortkort__stilling { display: block; font-size: 0.78rem; color: var(--ink-faint); }
.sortkort__form { margin-top: 18px; display: grid; gap: 18px; }
.sortkort__valg { border: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.sortkort__valg label { position: relative; cursor: pointer; }
.sortkort__valg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sortkort__valg span { display: inline-block; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.8rem; color: var(--ink); transition: border-color 0.2s var(--ease); }
.sortkort__valg input:checked + span { border-color: var(--gold); }
.sortkort__valg input:focus-visible + span { outline: 1px solid var(--gold); outline-offset: 2px; }
.sortkort__foedsel { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.sortkort__foedsel-tekst { margin: 0 0 18px; font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); }
.sortkort__foedsel-tekst strong { color: var(--ink); }
/* Telefon: dag og måned side om side, knappen på sin egen linje; fra 560 px alle tre på én linje */
.sortkort__foedsel-felter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 18px 10px; align-items: center; }
.sortkort__foedsel-felter .btn { height: 52px; grid-column: 1 / -1; }
@media (min-width: 560px) {
  .sortkort__foedsel-felter { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; }
  .sortkort__foedsel-felter .btn { height: 60px; grid-column: auto; }
}
.sortkort__foedsel .medlem__link { margin-top: 12px; }
/* Gemt fødselsdag: én linje med "Ret" (js/medlem.js foedselKompakt) */
.sortkort__foedsel-top { display: flex; align-items: center; gap: 14px; }
.sortkort__foedsel-top .sortkort__foedsel-tekst { flex: 1; }
.foedsel-ret { display: none; flex: none; padding: 8px 18px; border: 1px solid rgba(212,175,55,0.55); border-radius: 999px; background: none; color: var(--ink); font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.06em; cursor: pointer; }
.sortkort__foedsel.er-gemt .foedsel-ret { display: inline-flex; }
.sortkort__foedsel.er-gemt .sortkort__foedsel-tekst { margin: 0; }
.sortkort__foedsel.er-gemt .sortkort__foedsel-felter, .sortkort__foedsel.er-gemt .medlem__link, .sortkort__foedsel.er-gemt .medlem__status:not(.is-fejl) { display: none; }

/* Produktanmeldelser paa urets side (js/anmeldelser.js) */
.anm__resume { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
/* Stjernerne er tegnet som menuens ikoner: samme guld (#d4af37), samme streg; fyldt, naar de er valgt eller optjent */
.anm__stjerne-ikon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; color: var(--gold); }
.anm__stjerne-ikon svg { width: 100%; height: 100%; display: block; }
.anm__stjerne-ikon.is-fyldt svg { fill: currentColor; }
span.anm__stjerner { color: var(--gold); font-size: 1.05rem; line-height: 1; display: inline-flex; gap: 3px; }
.anm__antal { color: var(--ink-soft); font-size: 0.88rem; }
.anm { scroll-margin-top: 96px; }
/* Ankrene paa betingelser og privatliv (#kredsen, #reklamation, #fortrydelse, #cookies …) —
   uden luft landede overskriften under den faste topbjaelke paa 75 px. */
.policy [id] { scroll-margin-top: 96px; }   /* linket oeverst paa siden rammer under den faste topbjaelke */
.anm__tom { border: 1px dashed var(--line); border-radius: var(--radius-md); padding: 34px 24px; text-align: center; }
.anm__tom .btn { padding-left: 20px; padding-right: 20px; letter-spacing: 0.1em; }
.anm__tom h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; line-height: 1.15; margin: 0 0 8px; }
.anm__under { font-size: 1rem; color: var(--ink); margin: 0 0 10px !important; }
.anm__hint { font-size: 0.88rem !important; margin: 0 0 18px !important; }
.anm__valg { display: flex; justify-content: center; gap: 6px; margin-bottom: 20px; }
.anm__stjerne { background: none; border: none; padding: 4px; width: 40px; height: 40px; color: var(--gold); cursor: pointer; transition: transform 0.15s; }
.anm__stjerne svg { width: 100%; height: 100%; display: block; }
.anm__stjerne.is-valgt svg { fill: currentColor; }
.anm__stjerne:hover { transform: scale(1.12); }
.anm__stjerne:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.anm__gaest { display: grid; gap: 12px; }
.anm__gaestnote { margin: 0 !important; font-size: 0.8rem !important; color: var(--ink-faint) !important; }
.anm__gaestnote a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.anm__hk { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.anm__liste { list-style: none; margin: 0; padding: 0; }
.anm__post { padding: 18px 0; border-top: 1px solid var(--line-soft); overflow-wrap: anywhere; }   /* et langt ord maa ikke give hele siden vandret rul */
.anm__hoved { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.anm__navn { color: var(--ink); font-weight: 500; font-size: 0.9rem; }
.anm__dato { color: var(--ink-faint); font-size: 0.78rem; }
.anm__titel { display: block; color: var(--ink); margin-top: 8px; font-weight: 600; }
.anm__tekst { white-space: pre-line; margin: 6px 0 0 !important; }
.anm__mere { margin: 22px 0 0 !important; }
.anm__form { margin-top: 28px; padding: 28px 22px 22px; border: 1px solid var(--line); border-radius: var(--radius-md); scroll-margin-top: 96px; }   /* den faste topbjaelke */
.anm__formtitel { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; margin: 0; }
.anm__af { color: var(--ink-soft) !important; margin: -8px 0 0 !important; font-size: 0.9rem !important; }
.anm__status { margin: 0 !important; font-size: 0.88rem !important; min-height: 1.4em; }
.anm__status.is-ok { color: #6fbf73 !important; }
.anm__status.is-ok::before { content: "✓  "; }
.anm__status.is-fejl { color: #e08a7a !important; }
.anm__form.is-sendt .btn[type=submit] { display: none; }   /* som hos Ditur staar kvitteringen alene */
.anm__vilkaar { margin: 0 !important; }
.anm__login { scroll-margin-top: 96px; margin-top: 22px !important; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.9rem !important; }
.anm__login a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
dialog.vilkaar { border: none; padding: 0; background: transparent; max-width: min(92vw, 560px); width: 100%; margin: auto; color: var(--ink); }
dialog.vilkaar::backdrop { background: rgba(0,0,0,0.7); backdrop-filter: blur(3px); }
.vilkaar__ark { position: relative; background: #0d0d0d; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 34px 28px 28px; max-height: 84vh; overflow: auto; }
.vilkaar__ark h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; margin: 6px 0 14px; }
.vilkaar__ark p { color: var(--ink-soft); line-height: 1.65; font-size: 0.9rem; margin: 0 0 12px; }
.vilkaar__ark a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.vilkaar__luk { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ink); font-size: 1.3rem; cursor: pointer; }
.klub__knap { text-align: center; margin: 34px 0; }
.klub__faq { text-align: left; }
.klub__faq h2 { font-size: 2rem; font-style: italic; }
.klub__faq > p { max-width: none; margin: 0 0 18px; }
.klub__faq details { border-top: 1px solid var(--line); }
.klub__faq summary { cursor: pointer; list-style: none; padding: 16px 30px 16px 0; position: relative; font-family: var(--font-sans); font-weight: 500; font-size: 0.95rem; }
.klub__faq summary::-webkit-details-marker { display: none; }
.klub__faq summary::after { content: "+"; position: absolute; right: 2px; top: 13px; font-size: 1.3rem; color: var(--gold); font-weight: 300; }
.klub__faq details[open] summary::after { content: "–"; }
.klub__faq details p { margin: 0 0 18px; max-width: none; }
@media (min-width: 760px) {
  .klub { padding-left: 24px; padding-right: 24px; }
  .klub__hero { grid-template-columns: 1.1fr 1fr; align-items: center; padding: 48px 44px; gap: 40px; }
  .klub__collage { height: 380px; }
  .klub__grid { grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; align-items: start; }
  .klub__grid .fordelkort { align-self: stretch; }
  .karrusel { margin: 0; padding: 4px 4px 24px; }
  .gradkort { flex-basis: 300px; }
}
/* forsidens Kredsen-sektion bruger samme kortstak som kredsen.html */
.stak--forside { margin: 0 auto 8px; }
.kreds .stak { max-width: 340px; }

/* Favoritter: hilsenen til dem, der ikke er medlem, og hjertet paa favoritsidens kort */
.fav-hint { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); max-width: min(92vw, 520px); padding: 14px 20px; border-radius: 999px; background: #111; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0,0,0,0.5); font-family: var(--font-sans); font-size: 0.85rem; line-height: 1.4; text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 60; }
.fav-hint.is-synlig { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.fav-hint a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pcard--fav { position: relative; }
.pcard__fav { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(5,5,5,0.7); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.pcard__fav svg { width: 18px; height: 18px; fill: currentColor; }
.pcard__fav:hover { background: rgba(5,5,5,0.9); }

/* Historik og leveringsadresse som egne sider (historik.html, adresse.html) */
.historik--side { max-width: 640px; margin: 0 auto; list-style: none; padding: 0; }   /* ul'en ER .historik her, saa .historik ul naar den ikke */
.historik--side li { grid-template-columns: 1fr auto; }
.historik__linjer { grid-column: 1 / -1; list-style: none; margin: 4px 0 0; padding: 0; font-size: 0.8rem; color: var(--ink-soft); }
.historik__linjer li { display: block; padding: 2px 0; border: none; font-size: inherit; }
.historik__adresse { grid-column: 1 / -1; font-size: 0.78rem; color: var(--ink-faint); }
.historik__mere { margin: 10px 0 0; font-size: 0.8rem; }
.historik__mere a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.adresse__form { margin-top: 0; }
.minside__dl dd a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Forespoergslen (js/forespoergsel.js): arket bygger paa vilkaarsdialogen; paa en telefon glider det op fra bunden. */
dialog.foresp { max-width: min(92vw, 520px); }
.foresp .vilkaar__ark { max-height: 88vh; }
.foresp h3 { padding-right: 36px; }
.foresp__form { margin-top: 18px; gap: 16px; }
.foresp__typer { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
.foresp__typer legend { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.foresp__type { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; font-size: 0.93rem; color: var(--ink); transition: border-color 0.15s, background 0.15s; }
.foresp__type input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border: 1px solid rgba(244,242,236,0.35); border-radius: 50%; flex: none; display: grid; place-items: center; }
.foresp__type input::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); transform: scale(0); transition: transform 0.15s; }
.foresp__type input:checked { border-color: var(--gold); }
.foresp__type input:checked::after { transform: scale(1); }
.foresp__type:has(input:checked) { border-color: rgba(212,175,55,0.6); background: rgba(212,175,55,0.07); }
.foresp__type input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.foresp__gaest { display: flex; flex-direction: column; gap: 16px; }
.foresp__gaest[hidden] { display: none; }
.foresp__medlem, .foresp__privat { margin: 0 !important; font-size: 0.82rem !important; color: var(--ink-soft); }
.foresp__privat a { color: var(--ink); }
.foresp__pm { display: flex; flex-direction: column; gap: 16px; }
.foresp__pm[hidden] { display: none; }
.foresp__pm-tekst { margin: 0 !important; font-size: 0.85rem !important; color: var(--ink-soft); }
.foresp__pm-tekst a { color: var(--ink); }
.foresp__pm-link { display: block; margin-top: 10px; text-align: center; font-size: 0.82rem; letter-spacing: 0.02em; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(212,175,55,0.5); }
.foresp__pm-link:hover { color: var(--ink); text-decoration-color: var(--gold); }
.foresp__tak { margin-top: 18px; }
.foresp__tak p { color: var(--ink) !important; font-size: 1rem !important; margin-bottom: 18px !important; }
@media (min-width: 600px) { .foresp__typer { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) {
  dialog.foresp { max-width: 100vw; margin: auto 0 0; }
  .foresp .vilkaar__ark { border-radius: 22px 22px 0 0; padding: 30px 20px calc(22px + env(safe-area-inset-bottom)); max-height: 90dvh; }
}

/* ---------- Følg din ordre (foelg-ordre.html) ---------- */
.foelg .policy__inner { max-width: 640px; }
.foelg__form { gap: 16px; }
.foelg__hvor { margin-top: -6px; font-size: 0.85rem; }
.foelg__hvor summary { cursor: pointer; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; list-style: none; }
.foelg__hvor summary::-webkit-details-marker { display: none; }
.foelg__hvor summary:hover { text-decoration-color: var(--gold); }
.foelg__hvor p { margin: 8px 0 0; color: var(--ink-soft); }
.foelg__hvor a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); }
.foelg__resultat { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 24px 20px; }
.foelg__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 18px; margin-bottom: 22px; }
.foelg__top h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 4vw, 2rem); margin: 4px 0 0; color: var(--ink); outline: none; }
.foelg__ref { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink); border: 1px solid var(--gold); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.foelg__trin { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.foelg__trin li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 0 4px; font-size: 0.8rem; color: var(--ink-soft); }
.foelg__trin li::before { content: ''; position: absolute; top: 9px; right: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.foelg__trin li:first-child::before { display: none; }
.foelg__trin li.is-klar::before, .foelg__trin li.is-nu::before { background: var(--gold); }
.foelg__trin li.is-nu::before { background: linear-gradient(90deg, var(--gold), var(--line)); }
.foelg__prik { position: relative; z-index: 1; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); background: var(--bg); margin-bottom: 6px; }
.foelg__trin li.is-klar .foelg__prik { background: var(--gold); border-color: var(--gold); box-shadow: inset 0 0 0 4px var(--bg); }
.foelg__trin li.is-nu .foelg__prik { border-color: var(--gold); animation: foelgPuls 1.8s ease-in-out infinite; }
.foelg__trin li strong { color: var(--ink); font-weight: 500; font-size: 0.82rem; }
.foelg__trin li:not(.is-klar):not(.is-nu) strong { color: var(--ink-soft); }
.foelg__trin.is-stoppet li:not(.is-klar) { opacity: 0.45; }
@keyframes foelgPuls { 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.45); } 50% { box-shadow: 0 0 0 6px rgba(212, 175, 55, 0); } }
@media (prefers-reduced-motion: reduce) { .foelg__trin li.is-nu .foelg__prik { animation: none; } }
.foelg__spor { margin-top: 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.foelg__spor div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; }
.foelg__spor strong { color: var(--ink); font-size: 1.05rem; letter-spacing: 0.04em; word-break: break-all; }
.foelg__spor .rekl__hint { margin: 8px 0 0; font-size: 0.8rem; }
.foelg__varer { list-style: none; margin: 22px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.foelg__varer li { color: var(--ink); font-size: 0.9rem; overflow-wrap: anywhere; }
.foelg__total { margin: 10px 0 18px; color: var(--ink); font-weight: 500; }
.foelg__total:empty { display: none; }
@media (max-width: 520px) {
  .foelg__trin li { font-size: 0.72rem; }
  .foelg__trin li strong { font-size: 0.74rem; }
}

/* ---------- Returportalen (retur.html) ---------- */
.retur__hint { display: block; margin-top: 8px; text-transform: none; letter-spacing: 0; font-size: 0.84rem; line-height: 1.5; color: var(--ink-soft); }
.retur__varer .fortryd__radio, .retur__tjek .fortryd__radio { flex-basis: 100%; }
.retur__tjek .fortryd__radio span { line-height: 1.4; }
/* Sprogvælgeren i bunden (scripts/sprog/gen-sprog.js): samme side på de andre sprog — Diturs landevælger.
   Hvid tekst, guld kun som streg under det sprog, man står på. */
.sprogvalg { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; margin: 0 0 6px; }
.sprogvalg svg { width: 18px; height: 18px; color: var(--gold); margin-right: 4px; flex: none; }
.sprogvalg a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--ink-soft); font-size: 0.8rem; letter-spacing: 0.03em; text-decoration: none; border-bottom: 1px solid transparent; }
.sprogvalg a:hover, .sprogvalg a:focus-visible { color: var(--ink); }
.sprogvalg a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.sprog-note { max-width: 60ch; margin: 12px auto 0; font-size: 0.85rem; color: var(--ink-soft); }
/* Sprogudgaverne: tyske og svenske sammensatte ord er lange — de brydes (med bindestreg, hvor browseren kan)
   i stedet for at skubbe siden bredere end telefonen. Den danske udgave røres ikke. */
html:not([lang="da"]) body { overflow-wrap: anywhere; hyphens: auto; }

/* Størrelsesvalget på produktsiden (by Aagaards armbånd) */
.product__str { margin: 20px 0 18px; }
.product__str-titel { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.product__str-knapper { display: flex; flex-wrap: wrap; gap: 8px; }
.product__str-knap { min-width: 64px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(244,242,236,.22); background: transparent; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; transition: border-color .15s; }
.product__str-knap:hover { border-color: rgba(212,175,55,.6); }
.product__str-knap.er-valgt { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.product__str-knap:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.product__str-hjaelp { margin: 8px 0 0; font-size: 13px; color: var(--ink); opacity: .7; }

/* "Læg i kurven" kunne ikke: den sidste ligger i en anden kundes kurv, eller varen er netop solgt (js/cart.js, lager-hold.php). */
.lager-besked { margin: 10px 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--ink); border-left: 2px solid var(--gold); padding-left: 10px; }