/* fonts.css */
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) 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-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) 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-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) 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-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) 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-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) 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-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) 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-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) 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-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) 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-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) 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-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) 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-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) 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-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) 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-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) 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: 800;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) 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: 800;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/inter-UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/montserrat-JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* tokens.css */
/* ==========================================================================
   DESIGN TOKENS & CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
  /* Color System */
  --primary: #193153;
  --primary-hover: #193153;
  --primary-light: #e0f2fe;
  --success: #193153;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
  
  /* Neutral Palette */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  
  /* Semantic Colors */
  --bg: var(--gray-50);
  --surface: #fff;
  --border: var(--gray-200);
  --text: var(--gray-800);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  
  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  
  /* Design Properties */
  --radius: 0.5rem;
  --radius-sm: 0.25rem;
  --radius-lg: 0.75rem;
  --shadow: 0 0px 0px 0 rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --transition: 200ms ease;
  
  /* Layout Constants */
  --sidebar-width: 250px;
  --header-height: 60px;
  --container-max-width: 1280px;
}
/* base.css */
/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

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

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

button, input, select, textarea {
  font: inherit;
}

svg {
  display: block;
}
/* utilities.css */
/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Display Utilities */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.none { display:none !important; }

/* Flexbox Utilities */
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }

/* Grid Utilities */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.col-span-full { grid-column: 1 / -1; }
.col-span-2 { grid-column: span 2 / span 2; }

/* Gap Utilities */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Spacing Utilities - Margin */
.m-0 { margin: 0; }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* Spacing Utilities - Padding */
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }

/* Typography Utilities */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

/* Color Utilities */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }

/* Sizing Utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-48 { width: 12rem; }
.w-64 { width: 16rem; }
.w-72 { width: 18rem; }
.w-80 { width: 20rem; }
.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }

/* Border Utilities */
.border-t { border-top: 1px solid var(--border); }
.border-t-2 { border-top: 2px solid var(--border); }
.border-gray-300 { border-color: var(--gray-300, #d1d5db); }

/* Positioning Utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Enhanced Background Highlights */
.bg-gray-50 {
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  border: 1px solid #e5e7eb;
}

.bg-blue-50 {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #bfdbfe;
}
/* Titre réservé aux lecteurs d'écran : rétablit la hiérarchie h1 → h2 → h3
   avant une grille dont les cartes portent des <h3>, sans rien afficher. */
.sr-only-heading {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* layout.css */
/* App-specific layout overrides.
   Generic layout fixes belong in /var/www/app-core/public/assets/css/components/layout.css */

/* Page header */
.page-header {
    padding: 1.25rem 0 1rem;
    margin-bottom: .5rem;
}
.page-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Titre de page : aligne une icône de tête À GAUCHE du texte (et non au-dessus).
   Sans ça, la règle globale `svg { display:block }` décroche l'icône sur sa
   propre ligne dès qu'on met icon() dans un <h1 class="page-title">. */
.page-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.page-title > svg { flex-shrink: 0; }

/* Sous-titre de page (sous le titre) — était utilisé sans CSS dans plusieurs vues. */
.page-sub {
    margin: .25rem 0 0;
    color: var(--text-muted);
    font-size: .9rem;
}

/* Push main content past the fixed sidebar on desktop */
.main-content {
    margin-left: var(--sidebar-width);
    padding: 1.5rem 2rem;
    min-height: 100vh;
}

@media (max-width: 768px) {
    .main-content {
        margin-left: 0;
    }
}

/* badges.css */
/* ==========================================================================
   BADGE COMPONENTS
   ========================================================================== */

/* Respecter l'attribut [hidden] même sur les éléments à display explicite
   (sinon un badge/compare-price vide reste visible). */
[hidden] { display: none !important; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  letter-spacing: 0.025em;
}

/* Badge Variants */
.badge-primary { background: #dbeafe; color: #1e40af; }
.badge-variables { background: #dbeafe; color: #1e40af; }
.badge-secondary { background: var(--gray-100); color: var(--gray-700); }
.badge-success { background: #d1fae5; color: #065f46; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-error { background: #fee2e2; color: #991b1b; }
.badge-info { background-color: var(--info); color: white; }
.badge-helper { background: #dbeafe; color: #1e40af; }

/* Project-specific badges */
.badge-construction { background-color: #10b981; color: white; }
.badge-renovation { background-color: #f59e0b; color: white; }
.badge-sav { background-color: #ef4444; color: white; }

/* Priority badges */
.badge-priority-low { background-color: #6b7280; color: white; }
.badge-priority-medium { background-color: #3b82f6; color: white; }
.badge-priority-high { background-color: #f59e0b; color: white; }
.badge-priority-urgent { background-color: #ef4444; color: white; }

/* Status badges */
.badge-status-draft { background-color: #6b7280; color: white; }
.badge-status-active { background-color: #10b981; color: white; }
.badge-status-on_hold { background-color: #f59e0b; color: white; }
.badge-status-completed { background-color: #059669; color: white; }
.badge-status-cancelled { background-color: #ef4444; color: white; }
.badge-status-pending { background-color: #6b7280; color: white; }
.badge-status-in_progress { background-color: #3b82f6; color: white; }
.badge-status-delayed { background-color: #dc2626; color: white; }

/* Count Badge */
.count-badge {
  background: var(--primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: 1rem;
  margin-left: var(--space-2);
  min-width: 1.5rem;
  text-align: center;
}

/* Type indicators */
.type-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.type-indicator.product {
  background-color: #dbeafe;
  color: #1e40af;
}

.type-indicator.pack {
  background-color: #d1fae5;
  color: #065f46;
}

.item-type-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
}

.item-type-badge.product {
  background-color: #3b82f6;
  color: white;
}

.item-type-badge.pack {
  background-color: #10b981;
  color: white;
}
/* buttons.css */
/* ==========================================================================
   BUTTON COMPONENTS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  line-height: 1;
  padding: var(--space-3) var(--space-4);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
  width: fit-content;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-loading {
  opacity: 0.8;
  cursor: wait;
}

.btn-spinner {
  display: block;
  width: 0.875em;
  height: 0.875em;
  border: 0.15em solid rgba(255, 255, 255, 0.4);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  flex-shrink: 0;
}

/* Button Variants */
.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--gray-50);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--gray-100);
}

.btn-ghost.text-error {
  background: white;
  border: 1px solid #fecaca;
  color: var(--error);
}

.btn-ghost.text-error:hover:not(:disabled) {
  background: white;
}

.btn-danger {
  background: var(--error);
  color: white;
}

.btn-success {
  background: var(--success);
  color: white;
}

.btn-warning {
  background: var(--warning);
  color: white;
}

.btn-warning:hover:not(:disabled) {
  background: #d97706;
  border-color: #d97706;
  color: white;
}

/* Button Sizes */
.btn-xs {
  padding: var(--space-1) var(--space-2);
  font-size: 0.75rem;
}

.btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: 0.75rem;
}

.btn-lg {
  padding: var(--space-4) var(--space-6);
  font-size: 1rem;
}

/* Special Button Types */
.btn-icon {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.btn-icon:hover {
  background: white;
}

.btn-icon.text-error {
  color: #ef4444;
}

.btn-remove {
  background: #ef4444;
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition);
}

.btn-remove:hover {
  background: #dc2626;
}

.btn-document-action {
  padding: 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.25rem;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-document-action:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.btn-document-action.text-error {
  color: #ef4444;
}

.btn-document-action.text-error:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}
/* ==========================================================================
   PRICING TOGGLE (Devis / Méthode style pill switch)
   ========================================================================== */

.pricing-toggle {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    align-self: stretch;
    background: var(--bg-secondary, #f3f4f6);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius, 0.5rem);
    padding: 3px;
}

.pricing-toggle-pill {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    background: white;
    border-radius: calc(var(--radius, 0.5rem) - 3px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.pricing-toggle .toggle-btn {
    position: relative;
    z-index: 1;
    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
    border: none;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: calc(var(--radius, 0.5rem) - 3px);
    cursor: pointer;
    transition: color 0.18s ease;
    white-space: nowrap;
    text-align: center;
}

.pricing-toggle .toggle-btn:hover:not(.active) {
    color: var(--text, #1f2937);
}

.pricing-toggle .toggle-btn.active {
    color: var(--primary, #667eea);
}

/* cards.css */
/* ==========================================================================
   CARD COMPONENTS
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-shadow: var(--shadow);
  transition: all var(--transition);
}


.card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.card-interactive {
  cursor: pointer;
  transition: all var(--transition);
}

.card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-4);
}

.price-card-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-4);
}

.card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1.25rem;
  font-weight: 600;
}

.card-title > svg {
  display: inline;
  flex-shrink: 0;
}

.card-body {
  margin-bottom: var(--space-4);
}

.card-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.card-footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Enhanced pack cards styling */
.pack-card {
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
  overflow: hidden;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  cursor: pointer;
}

.pack-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}

.pack-card-image {
  height: 330px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow: hidden;
}

.pack-card-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.02);
  border-radius: inherit;
  z-index: 0;
}

.pack-card-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  position: relative;
  z-index: 1;
}

.pack-card-icon {
  color: #9ca3af;
  opacity: 0.6;
  z-index: 1;
}

.pack-card-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pack-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.pack-card-description {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.5;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pack-card-meta {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pack-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: #f3f4f6;
  color: #374151;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
}

.pack-card-badge.primary {
  background: #dbeafe;
  color: #1d4ed8;
}

.pack-card-badge.success {
  background: #d1fae5;
  color: #065f46;
}

.pack-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid #f3f4f6;
}

.pack-card-configure-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pack-card-configure-btn:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

.pack-card-status {
  font-size: 0.75rem;
  color: #059669;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* List view styling */
.pack-list-item {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.pack-list-item:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.pack-list-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
}

.pack-list-info {
  flex: 1;
}

.pack-list-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.5rem;
}

.pack-list-description {
  color: #6b7280;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.pack-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.pack-list-meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.pack-list-actions {
  flex-shrink: 0;
}

/* Card image styles - Centered and Contained */
.card-image {
  width: 100%;
  height: 200px;
  object-fit: contain;
  object-position: center;
  background-color: #f9fafb;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  padding: 1rem;
}

.card-image-placeholder {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f4f6;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  color: #9ca3af;
}

/* Product card image - Centered and Contained */
.product-card-image {
  width: 100%;
  height: 330px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.product-card-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  position: relative;
  z-index: 1;
}
/* forms.css */
/* ==========================================================================
   FORM COMPONENTS
   ========================================================================== */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-group {
  display: flex;
  flex-direction: column;
}

/* Espacement vertical par défaut entre champs EMPILÉS. Sans ça, des .form-group
   bruts (hors d'un .form-layout) se collent : l'input d'un champ touche le label
   du suivant. La grille .form-layout gère déjà l'écart via `gap`, donc on y remet
   la marge à 0 pour ne pas doubler l'espacement. */
.form-group + .form-group { margin-top: var(--space-4); }
.form-layout .form-group + .form-group { margin-top: 0; }

/* Une image dans un .form-group (aperçu logo…) ne doit PAS être étirée par le
   align-items:stretch du flex-column — sinon elle prend toute la largeur et se déforme. */
.form-group > img { align-self: flex-start; width: auto; max-width: 100%; }

.form-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
  height: 25px;
  font-weight: 500;
}

.form-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: 1rem;
  color: var(--text);
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.check-label {
  width: 100%;
  padding: var(--space-3) 0;
  font-size: 1rem;
  color: var(--text);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.check-label span {
  vertical-align: middle;
}

.form-input:focus,
.form-input:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input.error {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-input-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25;
}

/* Select Dropdown Styling */
select.form-input {
  padding-right: 2.5rem;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 1rem;
}

/* Form Layouts */
.form-layout {
  display: grid;
  gap: var(--space-4);
}

.form-layout.cols-1 { grid-template-columns: 1fr; }
.form-layout.cols-2 { grid-template-columns: repeat(2, 1fr); }
.form-layout.cols-3 { grid-template-columns: repeat(3, 1fr); }
.form-layout.cols-4 { grid-template-columns: repeat(4, 1fr); }
.form-layout.cols-5 { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
.span-full { grid-column: 1 / -1; }
.col-span-2 { grid-column: span 2; }

/* Form Validation & Status */
.form-help {
  color: var(--text-secondary);
  font-size: 0.75rem;
  margin-top: var(--space-1);
}

.form-error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--error);
  font-size: 0.75rem;
  margin-top: var(--space-1);
}

.form-status {
  margin-top: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid transparent;
}

.form-status.success {
  background-color: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}

.form-status.error {
  background-color: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

.form-status.loading {
  background-color: #eff6ff;
  color: #1d4ed8;
  border-color: #dbeafe;
}

.form-status.warning {
  background-color: #fefce8;
  color: #ca8a04;
  border-color: #fef08a;
}

/* Fieldsets */
.form-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  background: var(--gray-50);
}

.form-legend {
  font-weight: 600;
  color: var(--primary);
  padding: 0 var(--space-2);
  font-size: 0.875rem;
}

/* Form Containers & Actions */
.form-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

/* File Inputs */
.file-input {
  padding: var(--space-3);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--gray-50);
  cursor: pointer;
  transition: all var(--transition);
}

.file-input:hover {
  border-color: var(--primary);
  background: rgba(37, 99, 235, 0.05);
}

.drag-over {
  background-color: var(--primary-light, #e0f2fe) !important;
  border-color: var(--primary, #3b82f6) !important;
  transform: scale(1.02);
  transition: all 0.2s ease;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: var(--gray-50);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  transition: background-color 0.2s;
}

.file-item:hover {
  background: var(--gray-100);
}

/* Checkboxes */
.checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.checkbox-label {
  font-size: 0.875rem;
  color: var(--text);
  cursor: pointer;
  margin: 0;
}

/* Checkbox List - card style options */
.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.checkbox-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.15s ease;
  cursor: pointer;
}

.checkbox-list-item:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
}

.checkbox-list-item:has(input:checked) {
  background: var(--primary-50, #eff6ff);
  border-color: var(--primary);
}

.checkbox-list-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.checkbox-list-item .checkbox-content {
  flex: 1;
  min-width: 0;
}

.checkbox-list-item .checkbox-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--text);
}

.checkbox-list-item .checkbox-description {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  line-height: 1.4;
}

/* PO Type List - alternative checkbox card style */
.po-type-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.po-type-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.15s ease;
  cursor: pointer;
}

.po-type-item:hover {
  background: var(--gray-50);
}

.po-type-item:has(input:checked) {
  background: var(--primary-50, #eff6ff);
  border-color: var(--primary);
}

.po-type-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.po-type-item .po-type-content {
  flex: 1;
}

.po-type-item .po-type-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

.po-type-item .po-type-help {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* Validation message card */
.validation-message-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.validation-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: #495057;
}

.validation-header h6 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.validation-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.validation-list li {
    font-size: 0.8125rem;
    color: #6c757d;
    padding-left: 1.5rem;
    position: relative;
}

.validation-list li:before {
    content: '•';
    position: absolute;
    left: 0.5rem;
    color: #adb5bd;
}

.validation-list strong {
    color: #495057;
    font-weight: 500;
}

/* Form help text styling */
.form-help.text-muted {
    color: #6c757d;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.help-text {
    display: block;
    color: var(--text-secondary, #6c757d);
    font-size: 0.75rem;
    font-weight: 400;
    margin-top: var(--space-1, 0.25rem);
}

/* Input with suffix (€, %, kg, etc.) */
.input-with-suffix {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-suffix .form-input {
    padding-right: 2.5rem;
    width: 100%;
}

.input-with-suffix .input-suffix {
    position: absolute;
    right: 0.75rem;
    color: var(--text-secondary, #6c757d);
    font-size: 0.875rem;
    font-weight: 500;
    pointer-events: none;
    user-select: none;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .form-layout.cols-2,
  .form-layout.cols-3,
  .form-layout.cols-4,
  .form-layout.cols-5 {
    grid-template-columns: 1fr;
  }
  
  .span-full,
  .col-span-2 {
    grid-column: 1;
  }
}
/* navigation.css */
/* ==========================================================================
   NAVIGATION COMPONENTS
   ========================================================================== */

/* Sidebar Navigation */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--bg);
  color: var(--gray-600);
  padding: var(--space-4);
  overflow-y: auto;
  z-index: 1000;
}

.sidebar-brand {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: var(--space-4);
  text-align: center;
}

.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  transition: background var(--transition);
}

.sidebar-nav a:hover,
.sidebar-nav .active > a {
  background: var(--gray-100);
}

.menu-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Submenu System */
.has-submenu > a {
  cursor: pointer;
}

.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition);
  margin-top: 4px;
}

.has-submenu.open .submenu {
  max-height: 500px;
}

.submenu li {
  padding-left: 20px;
}

.submenu li a {
  padding: var(--space-3) var(--space-4);
}

/* Tab Navigation */
.nav-tabs-container {
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.nav-tabs {
  display: flex;
  gap: var(--space-2);
}

.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 3px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--transition);
}

.nav-tab:hover {
  color: var(--primary);
  background: var(--gray-50);
}

.nav-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: var(--gray-50);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Mobile Header */
.mobile-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--bg);
  color: var(--gray-700);
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  z-index: 999;
}

.hamburger-btn {
  background: none;
  border: none;
  color: var(--gray-700);
  cursor: pointer;
  padding: var(--space-2);
}

/* View Toggle */
.view-toggle {
  display: flex;
  gap: 0.25rem;
  background: var(--gray-100);
  padding: 0.25rem;
  border-radius: var(--radius);
}

.view-btn {
  padding: 0.5rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}

.view-btn.active {
  background: white;
  color: var(--primary);
  box-shadow: var(--shadow);
}

/* Submenu Toggle Icons */
.submenu-toggle {
  cursor: pointer;
}

.submenu-toggle .icon-cont:last-child svg,
.submenu-toggle .icon-cont:last-child > * {
  transition: transform var(--transition);
  transform-origin: center;
}

.has-submenu.open .submenu-toggle .icon-cont:last-child svg,
.has-submenu.open .submenu-toggle .icon-cont:last-child > * {
  transform: rotate(180deg);
}

.submenu-toggle > .icon-cont:nth-child(2) svg,
.submenu-toggle > .icon-cont:nth-child(2) > * {
  transition: transform var(--transition);
  transform-origin: center;
}

.has-submenu.open .submenu-toggle > .icon-cont:nth-child(2) svg,
.has-submenu.open .submenu-toggle > .icon-cont:nth-child(2) > * {
  transform: rotate(180deg);
}

.submenu-toggle .menu-label .icon-cont,
.submenu-toggle .menu-label .icon-cont svg,
.submenu-toggle .menu-label .icon-cont > * {
  transform: none !important;
}

/* Sidebar Notification Badges */
.sidebar-badge {
  font-size: 0.6rem;
  padding: 0;
  min-width: 1.1rem;
  height: 1.1rem;
  line-height: 1.1rem;
  text-align: center;
  border-radius: 50%;
  margin-left: auto;
  flex-shrink: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .mobile-header { 
    display: flex; 
  }
  
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition);
  }
  
  .sidebar.open { 
    transform: translateX(0); 
  }
}
/* tables.css */
/* ==========================================================================
   TABLE COMPONENTS
   ========================================================================== */

.table-container {
  background: var(--surface);
  border-radius: var(--radius);
  overflow-x: auto;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: relative;
}

.table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table th {
  text-align: left;
  padding: var(--space-3);
  font-weight: 600;
  background: var(--gray-50);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 0.875rem;
  white-space: nowrap;
}

.table tr:last-child td {
  border-bottom: none;
}

.table tr:hover td {
  background: var(--gray-50);
}

.table tbody tr {
  position: relative;
}

.table-totals td {
  border-top: 2px solid var(--border);
  background: var(--gray-50);
  font-weight: 600;
}

.table-preview {
  font-size: 0.75rem;
}

.table-preview th,
.table-preview td {
  padding: var(--space-2);
}

.table td .text-muted {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Line Items Table */
.line-items-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
}

.line-items-table th {
  background: var(--gray-50);
  padding: var(--space-3);
  text-align: left;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.line-items-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--gray-100);
  vertical-align: top;
}

.line-items-table tbody tr:hover {
  background: var(--gray-50);
}

.line-items-table .line-item-input {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  background: var(--surface);
}

.line-items-table .line-item-input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.line-items-table .line-item-input:invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}

.line-items-table .line-item-description {
  min-width: 200px;
}

.line-items-table .line-item-quantity,
.line-items-table .line-item-price,
.line-items-table .line-item-vat,
.line-items-table .line-item-total {
  width: 100px;
}

.line-items-table .line-item-actions {
  width: 60px;
  text-align: center;
}

.line-item-total-display {
  font-family: inherit;
  font-weight: 500;
  color: var(--text);
  text-align: right;
  padding: var(--space-2) var(--space-3);
}

/* Table Images */
.table-image {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 0.375rem;
  border: 1px solid #e5e7eb;
}

.table-image-placeholder {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f4f6;
  border-radius: 0.375rem;
  color: #9ca3af;
}

/* Sticky actions column — only when last th is empty and last td contains entity-actions */
.table th:last-child:empty,
.table td:last-child:has(.entity-actions) {
  position: sticky;
  right: 0;
  background: var(--surface);
  z-index: 1;
  width: 58px;
  min-width: 58px;
  max-width: 58px;
  text-align: center;
}
.table th:last-child:empty {
  background: var(--gray-50);
  z-index: 2;
}
.table tr:hover td:last-child:has(.entity-actions) {
  background: var(--gray-50);
}
.table td:last-child:has(.entity-dropdown.show) {
  z-index: 1002;
}

/* Smart table positioning for last columns */
.table td:nth-last-child(1) .entity-dropdown,
.table td:nth-last-child(2) .entity-dropdown {
  right: 0;
  left: auto;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .table-container { 
    margin: 0 calc(-1 * var(--space-4)); 
  }
  
  /* Line Items Table Mobile */
  .line-items-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  .line-items-table thead,
  .line-items-table tbody,
  .line-items-table th,
  .line-items-table td,
  .line-items-table tr {
    display: block;
  }
  
  .line-items-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .line-items-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    background: var(--surface);
  }
  
  .line-items-table td {
    border: none;
    position: relative;
    padding-left: 50% !important;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  
  .line-items-table td:before {
    content: attr(data-label) ": ";
    position: absolute;
    left: var(--space-3);
    width: 45%;
    padding-right: var(--space-2);
    white-space: nowrap;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
  }
  
  /* Line item input mobile sizing */
  .line-items-table .line-item-input {
    font-size: 16px; /* Prevent zoom on iOS */
  }
}
/* tabs.css */
/* Onglets de navigation secondaire (sous le page-header).
   Remplace les barres d'onglets bricolées inline (admin newsletter / alertes). */
.tabs {
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .9rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition);
}

.tab:hover { color: var(--text); }

.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ms-dropdown.css */
/* ── Searchable multiselect dropdown ─────────────────────────── */

.ms-wrap { position: relative; display: inline-block; }

/* Trigger au repos */
.ms-trigger {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px 3px 10px; height: 26px;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--radius-sm, 4px);
    font-size: 0.8rem; font-weight: 500; font-family: inherit;
    color: var(--text-secondary, #6b7280);
    white-space: nowrap; cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    outline: none;
}
.ms-trigger:hover {
    border-color: var(--border, #e5e7eb);
    background: var(--gray-50, #f9fafb);
    color: var(--text, #1f2937);
}

/* Filtre actif ou panel ouvert → bleu */
.ms-wrap.open .ms-trigger,
.ms-wrap.has-value .ms-trigger {
    border-color: var(--primary, #193153);
    color: var(--primary, #193153);
    background: var(--primary-light, #eef2ff);
}

/* Chevron animé */
.ms-chevron { opacity: 0.5; flex-shrink: 0; transition: transform 0.15s; }
.ms-wrap.open .ms-chevron { transform: rotate(180deg); opacity: 1; }

/* Badge count */
.ms-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    font-size: 0.68rem; font-weight: 700;
    background: var(--primary, #193153); color: #fff; line-height: 1;
    flex-shrink: 0;
}

/* Panel */
.ms-panel {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
    min-width: 200px; background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius, .5rem);
    box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
    overflow: hidden;
}
.ms-wrap.open .ms-panel { display: block; }

.ms-search-wrap {
    display: flex; align-items: center; gap: 7px;
    padding: .5rem .75rem; border-bottom: 1px solid var(--border, #e5e7eb);
    color: var(--text-secondary, #6b7280);
}
.ms-search {
    border: none; outline: none; background: transparent;
    font-size: .875rem; font-family: inherit;
    color: var(--text, #1f2937); width: 100%; min-width: 0;
}
.ms-search::placeholder { color: var(--text-muted, #9ca3af); }

.ms-options { max-height: 220px; overflow-y: auto; padding: 4px; }
.ms-option {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: calc(var(--radius, .5rem) - 2px);
    cursor: pointer; font-size: .875rem; font-family: inherit;
    color: var(--text, #1f2937); user-select: none;
    transition: background .1s;
}
.ms-option:hover { background: var(--gray-100, #f3f4f6); }
.ms-option.hidden { display: none; }
.ms-option input[type="checkbox"] {
    width: 14px; height: 14px; flex-shrink: 0;
    accent-color: var(--primary, #193153); cursor: pointer; margin: 0;
}

.ms-empty { padding: 10px 12px; font-size: .85rem; color: var(--text-secondary, #6b7280); text-align: center; }
.ms-empty.hidden { display: none; }

.ms-footer {
    border-top: 1px solid var(--border, #e5e7eb);
    padding: 6px 8px; display: flex; justify-content: flex-end;
}
.ms-clear-btn {
    background: none; border: none; font-size: .8rem;
    color: var(--text-secondary, #6b7280); cursor: pointer;
    padding: 3px 8px; border-radius: var(--radius-sm, 4px); font-family: inherit;
}
.ms-clear-btn:hover { color: var(--error, #ef4444); background: var(--gray-100, #f3f4f6); }

/* ── ms-dropdown dans un <th> ────────────────────────────────── */
.table thead th:has(.ms-wrap) { padding: 0; }
.table thead th .ms-wrap      { display: block; }
.table thead th .ms-trigger {
    padding: var(--space-3, .75rem);
    font-size: 0.72rem; font-weight: 600;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase; letter-spacing: 0.4px;
    width: 100%; height: auto;
    border-radius: 0; background: var(--gray-50, #f9fafb);
    border-color: transparent;
}
.table thead th .ms-trigger:hover {
    border-color: transparent;
    background: var(--gray-100, #f3f4f6);
}

/* Panel escapes table overflow via .ms-open class (toggled by JS) */
.table-container.ms-open               { overflow: visible; }
.table-container.ms-open thead         { position: relative; z-index: 5; }
.table-container.ms-open thead tr:first-child th:first-child { border-top-left-radius: var(--radius, .5rem); }
.table-container.ms-open thead tr:first-child th:last-child  { border-top-right-radius: var(--radius, .5rem); }

/* dropdowns.css */
/* ==========================================================================
   DROPDOWN COMPONENTS
   ========================================================================== */

/* Entity Actions Dropdown */
.entity-actions { 
  position: relative;
}

.entity-actions-btn {
  display: inline-flex;
  padding: var(--space-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}

.entity-actions-btn:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

.entity-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  min-width: 160px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: visible;
  display: none !important;
}

.entity-dropdown.show {
  display: block !important;
}

.entity-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  color: var(--text);
  font-size: 0.875rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
  border-radius: 0;
  white-space: nowrap;
}

.entity-dropdown-item:hover { 
  background: var(--gray-100); 
  color: #111827;
}

.entity-dropdown-item:first-child {
  border-radius: var(--radius) var(--radius) 0 0;
}

.entity-dropdown-item:last-child {
  border-radius: 0 0 var(--radius) var(--radius);
}

.entity-dropdown-item:focus {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.entity-dropdown-item.danger { 
  color: var(--error); 
}

.entity-dropdown-item.danger:hover { 
  background: #fef2f2; 
  color: #dc2626; 
}

.entity-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* Dropdown Divider (hr) */
.entity-dropdown hr.dropdown-divider,
.dropdown-divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin: 4px 0;
}

/* Entity Dropdown Submenu */
.entity-dropdown-submenu {
  position: relative;
}

.entity-dropdown-submenu-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  color: var(--text);
  font-size: 0.875rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
}

.entity-dropdown-submenu-trigger:hover {
  background: var(--gray-100);
}

.entity-dropdown-submenu-content {
  position: absolute;
  left: auto;
  right: 100%;
  top: 0;
  min-width: 200px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: none;
  z-index: 1001;
}

.entity-dropdown-submenu:hover .entity-dropdown-submenu-content,
.entity-dropdown-submenu.active .entity-dropdown-submenu-content {
  display: block;
}

/* Submenu position adjustment for right edge */
@media (max-width: 1200px) {
  .entity-dropdown-submenu-content {
    left: auto;
    right: 100%;
  }
}

/* Submenu items */
.entity-dropdown-submenu-content .entity-dropdown-item {
  border-radius: 0;
}

.entity-dropdown-submenu-content .entity-dropdown-item:first-child {
  border-radius: var(--radius) var(--radius) 0 0;
}

.entity-dropdown-submenu-content .entity-dropdown-item:last-child {
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Dropdown Container */
.dropdown-container {
  position: relative;
}

.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Dropdown Menu - Fixed visibility */
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  z-index: 100;
  display: none; /* Use display instead of opacity/visibility */
}

.dropdown-menu.show {
  display: block; /* Simple show/hide */
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 1rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
  font-size: 0.875rem;
}

.dropdown-item:hover {
  background: var(--gray-50);
}

/* Searchable Dropdown Components */
.searchable-dropdown {
  position: relative;
  width: 100%;
}

.searchable-dropdown .form-input {
  position: relative;
  width: 100%;
}

.searchable-dropdown .form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.searchable-dropdown .form-input.error {
  border-color: var(--error);
}

.searchable-dropdown .form-input.error:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.searchable-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 200px;
  overflow-y: auto;
}

.searchable-dropdown-menu.hidden {
  display: none;
}

.searchable-dropdown-item {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  color: var(--text);
  background: var(--surface);
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background-color var(--transition);
  border-bottom: 1px solid var(--gray-100);
}

.searchable-dropdown-item:last-child {
  border-bottom: none;
}

.searchable-dropdown-item:hover,
.searchable-dropdown-item.highlighted {
  background: var(--gray-50);
}

.searchable-dropdown-item.selected {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 500;
}

.searchable-dropdown-empty,
.searchable-dropdown-no-results {
  padding: var(--space-4);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-style: italic;
}

.searchable-dropdown-loading {
  padding: 0.75rem;
  text-align: center;
  color: var(--text-muted);
}

.searchable-dropdown-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

/* Product Search Dropdown */
.product-search-container {
  position: relative;
}

.product-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: white;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 50;
}

.product-search-item {
  padding: 0.5rem;
  cursor: pointer;
  transition: background var(--transition);
}

.product-search-item:hover {
  background: var(--gray-50);
}

/* Component Search Dropdown */
.component-search-container {
  position: relative;
}

.component-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.component-search-item {
  padding: 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.15s;
}

.component-search-item:hover {
  background-color: #f9fafb;
}

.component-search-item:last-child {
  border-bottom: none;
}

/* Condition Suggestions (for future autocomplete) */
.condition-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 50;
  max-height: 200px;
  overflow-y: auto;
}

.condition-suggestion-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
}

.condition-suggestion-item:hover {
  background: #f8fafc;
}

.condition-suggestion-item:last-child {
  border-bottom: none;
}

/* Responsive dropdown positioning */
.entity-dropdown.position-left {
  right: 0;
  left: auto;
}

.entity-dropdown.position-right {
  left: 0;
  right: auto;
}

.dropdown-near-bottom {
  top: auto;
  bottom: 100%;
  transform: translateY(10px);
}

.dropdown-near-bottom.show {
  transform: translateY(0);
}

.dropdown-near-right {
  right: 0;
  left: auto;
}

.dropdown-near-left {
  left: 0;
  right: auto;
}

/* ==========================================================================
   STATUS POPOVER - Quick status change component
   ========================================================================== */

.status-popover {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  min-width: 280px;
  display: none;
}

.status-popover.show {
  display: block;
}

.status-popover-header {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-popover-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.status-popover-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.status-popover-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.status-popover-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.status-popover-btn.current {
  cursor: default;
  box-shadow: inset 0 0 0 2px currentColor;
}

/* Status button variants */
.status-popover-btn.status-draft {
  background: var(--gray-100);
  color: var(--text-secondary);
  border-color: var(--gray-300);
}

.status-popover-btn.status-submitted {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #93c5fd;
}

.status-popover-btn.status-under_review {
  background: #fef3c7;
  color: #b45309;
  border-color: #fcd34d;
}

.status-popover-btn.status-approved {
  background: #d1fae5;
  color: #047857;
  border-color: #6ee7b7;
}

.status-popover-btn.status-rejected {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

.status-popover-btn.status-converted_to_po {
  background: #e0e7ff;
  color: #4338ca;
  border-color: #a5b4fc;
}

.status-popover-btn.status-expired {
  background: var(--gray-100);
  color: var(--text-muted);
  border-color: var(--gray-300);
}

.status-popover-btn.status-converted_to_invoice {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}

.status-popover-btn.status-unknown {
  background: var(--gray-100);
  color: var(--text-secondary);
  border-color: var(--gray-300);
}

/* Purchase Order status button variants */
.status-popover-btn.status-sent {
  background: #e0e7ff;
  color: #4338ca;
  border-color: #a5b4fc;
}

.status-popover-btn.status-confirmed {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #93c5fd;
}

.status-popover-btn.status-partial {
  background: #fef3c7;
  color: #b45309;
  border-color: #fcd34d;
}

.status-popover-btn.status-delivered {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}

.status-popover-btn.status-invoiced {
  background: #d1fae5;
  color: #047857;
  border-color: #6ee7b7;
}

.status-popover-btn.status-cancelled {
  background: var(--gray-100);
  color: var(--text-muted);
  border-color: var(--gray-300);
}

/* Rejection reason section */
.status-popover-rejection {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  display: none;
}

.status-popover-rejection.show {
  display: block;
}

.status-popover-rejection textarea {
  width: 100%;
  min-height: 60px;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  resize: vertical;
  margin-bottom: var(--space-2);
}

.status-popover-rejection textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.status-popover-rejection-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Loading state */
.status-popover-btn.loading {
  pointer-events: none;
  opacity: 0.7;
}

.status-popover-btn.loading::after {
  content: '';
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: var(--space-1);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Popover arrow */
.status-popover::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: white;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

/* Position adjustments for table cells */
td .status-popover {
  left: 0;
  transform: none;
}

td .status-popover::before {
  left: 20px;
  transform: rotate(45deg);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  /* Searchable Dropdown Mobile */
  .searchable-dropdown-menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 50vh;
  }
  
  /* Dropdown Mobile */
  .entity-dropdown {
    right: auto;
    left: 0;
    min-width: 140px;
  }
  
  .entity-actions:nth-last-child(-n+2) .entity-dropdown {
    right: 0;
    left: auto;
  }
  
  .dropdown-menu {
    right: auto;
    left: 0;
  }
}
/* modals.css */
/* ==========================================================================
   MODAL COMPONENTS
   ========================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition);
}

.modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  transform: scale(0.95);
  transition: transform var(--transition);
}

.modal-overlay.show .modal { 
  transform: scale(1); 
}

.modal-lg { 
  max-width: 800px; 
}

.modal-xl { 
  width: 95vw;
  max-width: 1200px;
}

.modal-xxl {
  width: 100%;
  max-width: 100% !important;
}

.modal-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.modal-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.modal-header-total {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--gray-100);
  border-radius: var(--radius);
}

.modal-header-total-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.modal-header-total-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary);
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius);
  transition: all var(--transition);
  line-height: 1;
}

.modal-close:hover { 
  background: var(--gray-100); 
}

.modal-body {
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  background: var(--gray-50);
  flex-shrink: 0;
}

/* NOTE: forms must be placed INSIDE .modal-body, never wrapping both
   .modal-body and .modal-footer. See CLAUDE.md modal patterns. */

/* Enhanced Help Modal */
#conditionHelpModal .modal {
  max-width: 900px;
  max-height: 80vh;
  overflow-y: auto;
}

#conditionHelpModal .modal-body h4 {
  color: #1f2937;
  font-size: 16px;
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e5e7eb;
}

#conditionHelpModal .modal-body h4:first-child {
  margin-top: 0;
}

#conditionHelpModal .modal-body code {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  padding: 3px 8px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  color: #475569;
  border: 1px solid #cbd5e1;
  font-weight: 500;
}

/* Grid Utilities for Help Modal */
#conditionHelpModal .grid {
  display: grid;
}

#conditionHelpModal .grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

#conditionHelpModal .gap-2 {
  gap: 8px;
}

#conditionHelpModal .gap-6 {
  gap: 24px;
}

/* Modal accessibility */
.modal-open .entity-dropdown {
  z-index: 1060; /* Higher than modal backdrop */
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .modal-lg,
  .modal-xl {
    max-width: 95vw;
    margin: var(--space-4);
  }
  
  #conditionHelpModal .grid-cols-2 {
    grid-template-columns: 1fr;
  }
}
/* notifications.css */
/* ==========================================================================
   NOTIFICATION & ALERT COMPONENTS
   ========================================================================== */

/* Notifications */
#notification-container {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 400px;
  pointer-events: none;
}

.notification {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-weight: 500;
  font-size: 0.875rem;
  pointer-events: auto;
  transform: translateX(100%);
  opacity: 0;
  transition: all 0.3s ease;
  background: var(--surface);
  border: 1px solid var(--border);
}

.notification.animate-slideInUp {
  transform: translateX(0);
  opacity: 1;
}

.notification-success { 
  background: var(--success); 
  color: white; 
  border-color: var(--success); 
}

.notification-error { 
  background: var(--error); 
  color: white; 
  border-color: var(--error); 
}

.notification-warning { 
  background: var(--warning); 
  color: white; 
  border-color: var(--warning); 
}

.notification-info { 
  background: var(--primary); 
  color: white; 
  border-color: var(--primary); 
}

.notification-close {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1.25rem;
  padding: var(--space-1);
  opacity: 0.8;
}

/* Alerts */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
}

.alert-warning {
  background-color: #fef3c7;
  border: 1px solid var(--warning);
  color: #92400e;
}

.alert-success {
  background-color: #10b981;
  color: white;
  border: 1px solid #059669;
}

.alert-danger {
  background-color: #ef4444;
  color: white;
  border: 1px solid #dc2626;
}

.alert-icon {
  flex-shrink: 0;
  margin-top: var(--space-1);
}

.alert-content {
  flex: 1;
}

.alert-content strong {
  font-weight: 600;
  color: #78350f;
}
/* top-nav.css */
/* ==========================================================================
   TOP NAV (PRIORITY STYLES)
   ========================================================================== */

.nav-container {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    min-height: 2.5rem;
    box-sizing: border-box;
}

/* Breadcrumb section (left side) */
.breadcrumb-section {
    flex: 1;
    min-width: 0;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    height: 1.75rem;
    overflow-x: auto;
    padding: 0;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    flex-shrink: 0;
    white-space: nowrap;
    height: 1.75rem;
    line-height: 1.75rem;
    box-sizing: border-box;
}

.breadcrumb-item a {
    background-color: #f3f4f6;
    text-decoration: none;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    height: 1.75rem;
    line-height: normal;
    box-sizing: border-box;
    font-weight: 500;
}

.breadcrumb-item a:hover {
    background-color: #eff6ff;
}

.breadcrumb-item.active {
    color: #374151;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    height: 1.75rem;
    line-height: normal;
    box-sizing: border-box;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    background: #eff6ff;
}

/* Icons consistent sizing */
.breadcrumb-item svg,
.breadcrumb-item .icon {
    flex-shrink: 0;
    width: 16px !important;
    height: 16px !important;
    display: inline-block;
    vertical-align: middle;
}

.breadcrumb > svg {
    flex-shrink: 0;
    width: 14px !important;
    height: 14px !important;
    color: #9ca3af;
}

.search-section {
  background: var(--gray-50);
  padding: var(--space-6);
  border-radius: var(--radius);
  margin-bottom: var(--space-6);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.search-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.search-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 var(--space-2) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.search-description {
  margin: 0 0 var(--space-4) 0;
  opacity: 0.9;
  font-size: 0.875rem;
  line-height: 1.4;
}

.search-controls,
.search-filters-bar {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  margin-bottom: var(--space-8);
}

.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.5rem 0.875rem;
    min-width: 280px;
    height: 2.25rem;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.search-wrapper:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-wrapper .search-icon {
    color: #6b7280;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* TOP NAV SEARCH INPUT - PRIORITY STYLES */
.search-input {
    padding: 20px 0;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    flex: 1;
    font-size: 0.875rem;
    outline: none !important;
    box-shadow: none !important;
    color: #374151;
    height: 100%;
}

.search-input::placeholder {
    color: #9ca3af;
}

.search-clear {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
    margin-left: 0.375rem;
    border-radius: 0.25rem;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
}

.search-wrapper:focus-within .search-clear {
    display: flex;
}

.search-clear:hover {
    background: #f3f4f6;
    color: #374151;
}

.results-badge {
    font-size: 0.875rem;
    color: #6b7280;
    white-space: nowrap;
    font-weight: 500;
    padding: 0rem 0rem;
    background: #f9fafb;
}

.filter-search-wrapper {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: nowrap;
}

.filter-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 250px;
}

.filter-icon {
    position: absolute;
    left: 0.75rem;
    pointer-events: none;
    color: #6b7280;
    z-index: 1;
}

.filter-wrapper .form-input {
    padding-right: 2rem;
    width: 100%;
}

.search-wrapper {
    flex: 1 1 300px;
    position: relative;
}

@media (max-width: 768px) {
    .filter-search-wrapper {
        flex-direction: column;
        width: 100%;
        flex-wrap: wrap;
    }
    
    .filter-wrapper,
    .search-wrapper {
        width: 100%;
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   SEARCH & FILTER COMPONENTS (SECONDARY STYLES)
   ========================================================================== */

/* Legacy search controls (for existing pages) */
.search-controls,
.search-filters-bar {
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
    margin-bottom: var(--space-8);
}

/* New card header filters (single row layout) */
.card-header-filters {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.card-header-filters .search-wrapper {
    flex: 0 0 auto;
    max-width: 320px;
}

/* Alternative search input styles (when not in top nav) */
.search-input:not(.search-wrapper .search-input) {
    position: relative;
    flex: 1;
    max-width: 300px;
    min-width: 200px;
}

.search-input:not(.search-wrapper .search-input) input {
    padding-left: 2.5rem;
}

/* Alternative search icon positioning (when not in top nav) */
.search-icon:not(.search-wrapper .search-icon) {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
}

/* Filter Components */
.filters {
    display: flex;
    gap: 0.75rem;
}

.filters select {
    min-width: 150px;
}

/* Card header filters - direct children layout */
.card-header-filters > select {
    min-width: 140px;
}

.card-header-filters > .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.filters-grid {
    display: flex;
    gap: var(--space-6);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.filter-label {
    font-weight: 600;
    color: var(--text);
    font-size: 0.875rem;
}

/* ==========================================================================
   CATEGORY AND PACK STYLING
   ========================================================================== */

.category-card {
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.category-icon {
    color: white;
}

.category-list-item {
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-list-item:hover {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.component-groups {
    max-height: 400px;
    overflow-y: auto;
}

.component-group {
    margin-bottom: 0.5rem;
}

.group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.group-header:hover {
    background: #e9ecef;
}

.group-name {
    font-weight: 500;
    flex: 1;
}

.group-arrow {
    transition: transform 0.2s;
    font-size: 0.8rem;
}

.group-content {
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 0.25rem 0.25rem;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.group-content.collapsed {
    max-height: 0;
    border: none;
}

.component-item {
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid #f1f3f4;
    font-size: 0.85rem;
}

.component-item:last-child {
    border-bottom: none;
}

.component-name {
    color: #495057;
}

/* ==========================================================================
   RESPONSIVE BEHAVIOR
   ========================================================================== */

/* Mobile Responsive */
@media (max-width: 768px) {
    /* Top nav responsive (priority) */
    .nav-container {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
        padding: 0.75rem;
    }
    
    .search-section {
        justify-content: space-between;
        gap: 0.75rem;
    }
    
    .search-wrapper {
        min-width: 200px;
        flex: 1;
    }
    
    .results-badge {
        flex-shrink: 0;
    }
    
    /* Secondary search components responsive */
    .search-controls,
    .search-filters-bar { 
        flex-direction: column; 
    }
    
    .card-header-filters {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }
    
    .search-input:not(.search-wrapper .search-input) {
        max-width: none;
        min-width: auto;
    }
    
    .card-header-filters > select {
        min-width: auto;
    }
    
    .filters {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .search-wrapper {
        min-width: 150px;
    }
    
    .nav-container {
        margin: 0.5rem 0;
    }
}
/* data-display.css */
/* ==========================================================================
   DATA DISPLAY COMPONENTS
   ========================================================================== */

/* Meta Information */
.meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--gray-100);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.meta-primary {
  background: rgba(37, 99, 235, 0.1);
  color: var(--primary);
  border-color: rgba(37, 99, 235, 0.2);
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.meta-block {
  background: var(--gray-50);
  border-radius: var(--radius);
  padding: 0.75rem;
}

.meta-block-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem 0;
}

/* Contact Components */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--primary);
  font-size: 0.875rem;
  text-decoration: none;
  font-weight: 500;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.contact-link:hover {
  color: var(--primary-hover);
  background: rgba(37, 99, 235, 0.05);
}

.contact-link-small {
  font-size: 0.8125rem;
  padding: var(--space-1) var(--space-1);
}

.address-block {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-style: normal;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Financial Summary */
.financial-summary {
  background: var(--gray-50);
  border-radius: var(--radius);
  padding: var(--space-6);
  border: 1px solid var(--border);
}

.financial-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.financial-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
}

.financial-summary-label {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
}

.financial-summary-value {
  font-family: inherit;
  font-weight: 500;
  color: var(--text);
}

.financial-summary-total {
  border-top: 2px solid var(--border);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}

.financial-summary-total .financial-summary-row {
  padding: var(--space-3) 0;
}

.financial-summary-total .financial-summary-label {
  color: var(--primary);
  font-weight: 600;
  font-size: 1rem;
}

.financial-summary-total .financial-summary-value {
  color: var(--primary);
  font-size: 1.25rem;
  font-weight: 700;
}

/* Purchase Order Cards */
.po-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.po-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--gray-100);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.po-meta-primary {
  background: rgba(37, 99, 235, 0.1);
  color: var(--primary);
  border-color: rgba(37, 99, 235, 0.2);
}

.po-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.po-amount {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--text);
}

/* Icon System */
.icon-cont {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.icon-cont svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

/* Icon Size Variants */
.icon-cont.icon-xs { width: 12px; height: 12px; }
.icon-cont.icon-sm { width: 16px; height: 16px; }
.icon-cont.icon-lg { width: 24px; height: 24px; }
.icon-cont.icon-xl { width: 28px; height: 28px; }

/* Icon Fallback */
.icon-text {
  font-weight: bold;
  color: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

svg:not([fill]):not([stroke]) {
  stroke: currentColor;
  fill: none;
}

.contact-item .icon-cont {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.address-block .icon-cont {
  flex-shrink: 0;
  margin-top: var(--space-1);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .financial-summary {
    padding: var(--space-4);
  }
  
  .financial-summary-grid {
    grid-template-columns: 1fr;
  }
  
  .po-card-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .po-card-footer {
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
  }
  
  .po-amount {
    font-size: 1rem;
  }
  
  .meta-grid {
    grid-template-columns: 1fr;
  }
}
/* Bandeau de catégorie compact.
   Il portait la description complète, soit ~350 px avant le premier produit,
   pour un texte que personne ne lit. Le texte est passé sous la grille ; ce
   bandeau ne garde que le titre et un repère chiffré. */
.page-hero.page-hero-compact {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.page-hero.page-hero-compact h1 {
  margin-bottom: 0.25rem;
}
.page-hero.page-hero-compact p {
  font-size: 0.9rem;
  opacity: 0.85;
}

/* states.css */
/* ==========================================================================
   STATE COMPONENTS
   ========================================================================== */

/* Loading States */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-8);
  text-align: center;
  color: var(--text-secondary);
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--gray-200);
  border-top: 2px solid var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: var(--space-4);
}

.loading-spinner.inline {
  display: inline-block;
  vertical-align: middle;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  animation: spin 0.6s linear infinite;
  margin: 0;
  flex-shrink: 0;
  align-self: center;
}

.line-items-loading {
  opacity: 0.6;
  pointer-events: none;
}

.financial-summary-loading .financial-summary-value {
  background: var(--gray-200);
  color: transparent;
  border-radius: var(--radius-sm);
  animation: pulse 1.5s ease-in-out infinite;
}

/* Empty States */
.empty-state,
.empty-content {
  text-align: center;
  padding: var(--space-12) var(--space-8);
  background: var(--surface);
  border-radius: var(--radius);
  border: 2px dashed var(--border);
  color: var(--text-secondary);
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-8);
  color: var(--text-muted);
  opacity: 0.7;
}

.empty-state-icon svg {
  width: 64px !important;
  height: 64px !important;
}

.empty-state-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--text);
}

.empty-state-description {
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.empty-content p {
  margin: var(--space-2) 0;
  font-size: 0.875rem;
}

/* Info Box */
.info-box {
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.info-box h4 {
  margin: 0 0 var(--space-3) 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

/* Image Gallery States */
.image-preview-container {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #e5e7eb;
  border-radius: 0.5rem;
  padding: 1rem;
  background-color: #f9fafb;
}

.image-placeholder {
  text-align: center;
  color: #9ca3af;
}

.image-preview-container img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .loading-state {
    padding: var(--space-8) var(--space-4);
  }
  
  .empty-state {
    padding: var(--space-8) var(--space-6);
  }
}
/* animations.css */
/* ==========================================================================
   ANIMATIONS & KEYFRAMES
   ========================================================================== */

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Animation for New Components */
@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Success Animation */
@keyframes checkmark {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Loading Animation */
.condition-validation.loading {
  animation: pulse 2s infinite;
}

/* Success Animation */
.condition-validation.success svg {
  animation: checkmark 0.6s ease-out;
}

.component-row {
  animation: slideInFromRight 0.4s ease-out;
}
/* responsive.css */
/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

/* Tablet Breakpoint */
@media (min-width: 769px) {
  .content-layout.cards > .card {
    flex: 0 0 calc(50% - var(--space-3));
  }
}

/* Desktop Breakpoint */
@media (min-width: 1200px) {
  .content-layout.cards > .card {
    flex: 0 0 calc(25% - var(--space-3));
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  /* Layout Adjustments */
  .mobile-header { 
    display: flex; 
  }
  
  .main-content {
    margin-left: 0;
    padding-top: calc(var(--header-height) + var(--space-4));
    width: 100%;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition);
  }
  
  .sidebar.open { 
    transform: translateX(0); 
  }
  
  /* Content Layout Mobile */
  .content-layout.cards {
    flex-direction: column;
  }
  
  .content-layout.cards > .card {
    max-width: none;
    width: 100%;
  }
  
  .content-layout.split {
    grid-template-columns: 1fr;
  }
  
  /* Form Layout Mobile */
  .form-layout.cols-2,
  .form-layout.cols-3,
  .form-layout.cols-5 {
    grid-template-columns: 1fr;
  }
  
  /* Page Header Mobile */
  .page-header {
    flex-direction: column;
    gap: var(--space-4);
    text-align: left;
    padding: var(--space-6);
  }
  
  .page-header-actions {
    width: 100%;
    margin-left: 0;
  }
  
  /* Modal Mobile */
  .modal-lg,
  .modal-xl {
    max-width: 95vw;
    margin: var(--space-4);
  }
  
  /* Search Mobile */
  .search-controls,
  .search-filters-bar { 
    flex-direction: column; 
  }
  
  .search-input {
    max-width: none;
  }
  
  .filters {
    flex-wrap: wrap;
  }
  
  /* Searchable Dropdown Mobile */
  .searchable-dropdown-menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 50vh;
  }
  
  /* Dropdown Mobile */
  .entity-dropdown {
    right: auto;
    left: 0;
    min-width: 140px;
  }
  
  .entity-actions:nth-last-child(-n+2) .entity-dropdown {
    right: 0;
    left: auto;
  }
  
  /* Document grid mobile: 2 columns */
  .document-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .document-card-preview {
    height: 100px;
  }

  .doc-actions {
    align-self: stretch;
  }
  
  /* Button Mobile */
  .btn-remove {
    width: 100%;
    height: auto;
    padding: 0.75rem;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .page-header {
    padding: var(--space-4);
  }
  
  .page-header-content h1 {
    font-size: 1.375rem;
  }
  
  .section-header {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
  }
  
  .section-title {
    font-size: 1rem;
    gap: var(--space-2);
  }
  
  .count-badge {
    font-size: 0.625rem;
    padding: var(--space-1) var(--space-1);
  }
  
  .loading-state {
    padding: var(--space-8) var(--space-4);
  }
  
  .empty-state {
    padding: var(--space-8) var(--space-6);
  }
}

/* Container overflow fixes */
#listViewContainer {
  overflow: visible;
  position: relative;
}

#listViewContainer .table-container {
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 10px;
}

#cardsViewContainer {
  position: relative;
  overflow: visible;
}

.page-content,
.main-content {
  overflow: visible;
  position: relative;
}

/* Dropdown body scroll prevention */
.dropdown-open {
  overflow: hidden;
}

/* Modal accessibility */
.modal-open .entity-dropdown {
  z-index: 1060; /* Higher than modal backdrop */
}

/* Debug helper (remove in production) */
.debug-dropdown {
  border: 2px solid red !important;
  background: yellow !important;
}
/* public.css */
/* ═══════════════════════════════════════════════════════════════════
   PUBLIC LAYOUT
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* Rouge de marque. DEUX teintes VOLONTAIRES, pas une incohérence :
       --mm-red       : remplissages / badges / grands éléments (#d9392d, ~4.4:1 sur blanc).
       --mm-red-ink   : petit texte sur fond clair — teinte plus foncée pour passer
                        le contraste WCAG AA (~5.6:1). Ne PAS fusionner les deux. */
    --mm-red:     #d9392d;
    --mm-red-ink: #c42d22;
}

/* ── Header ──────────────────────────────────────────────────────── */
.public-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.public-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Logo */
.public-logo {
    display: flex;
    align-items: center;
    gap: .625rem;
    text-decoration: none;
    flex-shrink: 0;
}
.public-logo-mark { display: block; flex-shrink: 0; }
.public-logo-img { height: 38px; width: auto; display: block; }
.public-logo-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1;
}
.logo-mag    { color: #193153; }
.logo-market { color: #d9392d; }

/* Nav */
.public-nav {
    display: flex;
    align-items: center;
    gap: .125rem;
    flex: 1;
}
.public-nav-link {
    display: inline-block;
    text-decoration: none;
    color: #4b5563;
    font-size: .875rem;
    font-weight: 600;
    padding: .375rem .75rem;
    border-radius: 6px;
    transition: color .15s, background .15s;
}
.public-nav-link:hover { color: #111827; background: #f3f4f6; }
.public-nav-link.active { color: #d9392d; }
button.public-nav-link { background: none; border: none; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; }

/* Megamenu */
.megamenu-wrapper {
    position: relative;
}
.megamenu {
    display: none;
    position: absolute;
    top: 100%;
    left: -1rem;
    padding-top: 12px;
    background: transparent;
    z-index: 300;
    min-width: min(680px, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
}
.megamenu-inner-wrap {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.12);
    overflow: auto;
    max-height: calc(100vh - 100px);
}
.megamenu-wrapper.open .megamenu { display: block; }
.megamenu-wrapper.open .megamenu-trigger svg { transform: rotate(180deg); }
.megamenu-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 1.25rem;
    gap: 1rem;
}
.megamenu-col { display: flex; flex-direction: column; gap: .125rem; }
.megamenu-col-title {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #9ca3af;
    padding: .25rem .5rem .5rem;
    text-decoration: none;
    transition: color .12s;
    cursor: pointer;
}
.megamenu-col-title:hover { color: #d9392d; }
.megamenu-item {
    display: block;
    font-size: .8375rem;
    color: #374151;
    text-decoration: none;
    padding: .3rem .5rem;
    border-radius: 5px;
    transition: background .12s, color .12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.megamenu-item:hover { background: #f3f4f6; color: #111827; }
.megamenu-footer {
    border-top: 1px solid #f3f4f6;
    padding: .75rem 1.25rem;
    background: #fafafa;
    position: sticky;
    bottom: 0;
}
.megamenu-all {
    font-size: .8375rem;
    font-weight: 600;
    color: #d9392d;
    text-decoration: none;
}
.megamenu-all:hover { text-decoration: underline; }

/* Header search */
.public-header-search {
    position: relative;
    flex: 1;
    max-width: 300px;
}
.public-header-search svg {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}
.public-header-search input {
    width: 100%;
    height: 36px;
    padding: 0 .875rem 0 2.375rem;
    font-size: .875rem;
    font-family: inherit;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    background: #f9fafb;
    color: #111827;
    outline: none;
    transition: border-color .15s, background .15s;
    box-sizing: border-box;
}
.public-header-search input:focus { border-color: #193153; background: #fff; }

/* Header actions */
.public-header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}

/* Language switcher */
.lang-switcher {
    position: relative;
    margin-left: .25rem;
}
.lang-current {
    font-size: 1.15rem;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 5px;
    border-radius: 6px;
    transition: background .15s;
    display: flex;
    align-items: center;
}
.lang-current:hover { background: #f3f4f6; }
.lang-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    padding: .35rem;
    min-width: 140px;
    z-index: 200;
}
.lang-switcher.open .lang-dropdown { display: flex; flex-direction: column; }
.lang-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .65rem;
    border-radius: 6px;
    font-size: .85rem;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    transition: background .12s;
    white-space: nowrap;
}
.lang-option:hover { background: #f3f4f6; color: #111; }
.lang-option.active { background: #eef2ff; color: #193153; font-weight: 600; }
.lang-switcher-mobile {
    padding: .5rem 0;
    margin-top: .25rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Mobile nav toggle */
.public-nav-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    cursor: pointer;
    color: #374151;
    border-radius: 6px;
    margin-left: auto;
}
.public-nav-mobile-toggle:hover { background: #f3f4f6; }
.public-header-mobile { display: none; align-items: center; gap: .15rem; margin-left: auto; }
.public-nav-mobile-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #f3f4f6;
    border-radius: 8px;
    padding: .65rem .8rem;
    margin-bottom: .85rem;
    color: #9ca3af;
}
.public-nav-mobile-search input {
    border: none;
    background: none;
    outline: none;
    font-size: .95rem;
    color: #111827;
    width: 100%;
}
.public-nav-mobile-search input::placeholder { color: #9ca3af; }
.public-nav-mobile {
    display: none;
    flex-direction: column;
    border-top: 1px solid #e5e7eb;
    padding: .5rem 1.25rem 1rem;
    background: #fff;
}
.public-nav-mobile.open { display: flex; }
.public-nav-mobile .public-nav-link { padding: .5rem .25rem; border-radius: 0; border-bottom: 1px solid #f3f4f6; }

/* Footer logo */
.public-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    margin-bottom: .875rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 800;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.public-footer {
    background: #111827;
    color: #9ca3af;
    margin-top: 5rem;
}
.public-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3.5rem 2rem 2.5rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
}
.public-footer-brand-name {
    font-size: .9375rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .625rem;
}
.public-footer-brand p {
    font-size: .8375rem;
    line-height: 1.65;
    /* Fond sombre #111827 : #6b7280 n'y donne que 3,67:1. Ici il faut
       ÉCLAIRCIR, pas assombrir. #7a818f atteint 4,53. */
    color: #7a818f;
    margin: 0;
    max-width: 240px;
}
.public-footer-col h4 {
    font-size: .75rem;
    font-weight: 600;
    color: #d1d5db;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .875rem;
}
.public-footer-col a {
    display: block;
    text-decoration: none;
    /* Fond sombre #111827 : #6b7280 n'y donne que 3,67:1. Ici il faut
       ÉCLAIRCIR, pas assombrir. #7a818f atteint 4,53. */
    color: #7a818f;
    font-size: .875rem;
    margin-bottom: .4375rem;
    transition: color .15s;
}
.public-footer-col a:hover { color: #fff; }
.public-footer-bottom {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    border-top: 1px solid #1f2937;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .8rem;
    /* Fond sombre #111827 : #4b5563 n'y donne que 2,35:1. #788290 atteint 4,56. */
    color: #788290;
}

/* Public content */
.public-content {
    min-height: calc(100vh - 64px - 280px);
}


/* ═══════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════ */
.hero {
    background: #0a1628;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(221,61,49,.12) 0%, transparent 60%),
        radial-gradient(ellipse 40% 80% at 0% 50%, rgba(25,49,83,.5) 0%, transparent 50%),
        radial-gradient(ellipse 40% 80% at 100% 50%, rgba(25,49,83,.4) 0%, transparent 50%);
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, rgba(10,22,40,.6), transparent);
    pointer-events: none;
}
/* Hero floating product showcase */
.hero-showcase {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.hero-showcase-item {
    position: absolute;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
    opacity: .12;
    transition: opacity 1s ease;
}
.hero-showcase-item.loaded { opacity: .18; }
.hero-showcase-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-showcase-item:nth-child(1) {
    width: 200px; height: 260px;
    top: 10%; left: 3%;
    transform: rotate(-6deg);
}
.hero-showcase-item:nth-child(2) {
    width: 180px; height: 220px;
    top: 15%; right: 4%;
    transform: rotate(4deg);
}
.hero-showcase-item:nth-child(3) {
    width: 160px; height: 200px;
    bottom: 20%; left: 6%;
    transform: rotate(3deg);
}
.hero-showcase-item:nth-child(4) {
    width: 170px; height: 210px;
    bottom: 18%; right: 6%;
    transform: rotate(-5deg);
}
@media (max-width: 1024px) {
    .hero-showcase { display: none; }
}

.hero-inner {
    max-width: 780px;
    margin: 0 auto;
    padding: 5.5rem 2rem 3.5rem;
    text-align: center;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(255,255,255,.5);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    padding: .4rem 1.25rem;
    margin-bottom: 1.75rem;
    backdrop-filter: blur(8px);
}
.hero-eyebrow svg { color: #d9392d; }
.hero-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.25rem, 6vw, 3.75rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.04em;
    color: #fff;
    margin: 0 0 1.375rem;
}
.hero-title-accent { color: #d9392d; }
.hero-lead {
    font-size: 1.075rem;
    line-height: 1.75;
    color: rgba(255,255,255,.55);
    margin: 0 auto 2.75rem;
    max-width: 520px;
}
.hero-actions {
    display: flex;
    gap: .875rem;
    justify-content: center;
    flex-wrap: wrap;
}
.hero-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #d9392d;
    color: #fff;
    font-size: .9375rem;
    font-weight: 700;
    padding: .875rem 2.25rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 4px 20px rgba(221,61,49,.45);
}
.hero-btn-primary:hover { background: #c63529; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(221,61,49,.45); }
.hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.8);
    font-size: .9375rem;
    font-weight: 600;
    padding: .875rem 1.75rem;
    border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,.15);
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    backdrop-filter: blur(4px);
}
.hero-btn-secondary:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color: #fff; }

/* Stats bar */
.hero-stats {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.2);
    position: relative;
}
.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.625rem 3.5rem;
    flex: 1;
    max-width: 220px;
}
.hero-stat-sep {
    width: 1px;
    background: rgba(255,255,255,.1);
    flex-shrink: 0;
    align-self: stretch;
    margin: 1rem 0;
}
.hero-stat-n {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.75rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    margin-bottom: .35rem;
    letter-spacing: -.03em;
}
.hero-stat-l {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.66);
    text-align: center;
}


/* ═══════════════════════════════════════════════════════════════════
   TRUST BAR
   ═══════════════════════════════════════════════════════════════════ */
.trust-bar {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}
.trust-bar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.625rem 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .75rem 1.5rem;
    border-right: 1px solid #f3f4f6;
}
.trust-item:last-child { border-right: none; }
.trust-icon {
    width: 42px;
    height: 42px;
    background: rgba(221,61,49,.07);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #d9392d;
}
.trust-item strong {
    display: block;
    font-size: .8375rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: .1rem;
}
.trust-item span {
    font-size: .775rem;
    color: #6b7280;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════
   BRAND STRIP
   ═══════════════════════════════════════════════════════════════════ */
.brands-strip-section {
    background: #fff;
    border-bottom: 1px solid #ebebeb;
    padding: 1.25rem 0;
    overflow: hidden;
}
.brands-strip-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}
.brands-strip-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    /* #9ca3af sur blanc ne donnait que 2,54:1, très loin du seuil AA de 4,5.
       #6f7682 atteint 4,58 en restant une teinte grise discrète. */
    color: #6f7682;
    margin: 0 0 .75rem;
    display: block;
}
.brands-strip-track {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    align-items: center;
}
.brand-pill {
    display: inline-block;
    padding: .3rem .875rem;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap;
}
.brand-pill:hover {
    border-color: #d9392d;
    color: #d9392d;
    background: rgba(221,61,49,.04);
}
/* Logo-based brand chip */
.brand-logo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 4px 12px;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.brand-logo-chip img {
    height: 22px;
    max-width: 72px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .55;
    transition: filter .2s, opacity .2s;
}
.brand-logo-chip:hover {
    border-color: #d1d5db;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.brand-logo-chip:hover img {
    filter: grayscale(0%);
    opacity: 1;
}
.brand-logo-chip-skeleton {
    display: inline-flex;
    height: 36px;
    width: 88px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
.brand-pill-skeleton {
    display: inline-block;
    height: 30px;
    width: 80px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}


/* ═══════════════════════════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════════════════════════ */
.home-section { padding: 4rem 0; }
.home-section-alt { background: #f9fafb; }
.home-section-dark {
    background: #0a1628;
    background-image:
        radial-gradient(ellipse 60% 60% at 50% 0%, rgba(221,61,49,.08) 0%, transparent 60%);
}
.how-step-dark h3 { color: #fff; }
.how-step-dark p { color: rgba(255,255,255,.86); }
.how-step-dark .how-step-num {
    background: #d9392d;
    box-shadow: 0 4px 16px rgba(221,61,49,.4);
}

.section-inner { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -.025em;
    margin: 0;
}
.section-more {
    font-size: .875rem;
    font-weight: 500;
    color: #193153;
    text-decoration: none;
    transition: opacity .15s;
}
.section-more:hover { opacity: .7; }
.section-eyebrow {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--mm-red-ink);
    margin-bottom: .35rem;
}

/* ── How it works ────────────────────────────────────────────────── */
.how-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-top: 1rem;
}
.how-step {
    flex: 1;
    max-width: 320px;
    text-align: center;
    padding: 1.5rem;
}
.how-step-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #0f1f38;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}
.how-step h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: .5rem;
}
.how-step p {
    font-size: .875rem;
    color: #6b7280;
    line-height: 1.65;
    margin: 0;
}
.how-step-arrow {
    display: flex;
    align-items: center;
    padding-top: 2.5rem;
    color: #d1d5db;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .how-steps { flex-direction: column; align-items: center; }
    .how-step-arrow { display: none; }
}

/* ── Featured grid ──────────────────────────────────────────────── */
.featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
}
.featured-card-large {
    grid-row: 1 / 3;
}
.featured-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    min-height: 240px;
    background: #111;
}
.featured-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: transform .4s ease, filter .4s ease;
}
.featured-card:hover img {
    transform: scale(1.04);
    filter: brightness(.85);
}
.featured-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.15) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    color: #fff;
    z-index: 1;
}
.featured-badge {
    display: inline-block;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 4px;
    padding: .2rem .6rem;
    margin-bottom: .5rem;
    width: fit-content;
}
.featured-card-brand {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.6);
    margin-bottom: .25rem;
}
.featured-card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 .4rem;
    color: #fff;
}
.featured-card-large .featured-card-title {
    font-size: 1.5rem;
}
.featured-card-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: #d9392d;
}
.featured-skeleton {
    border-radius: 14px;
    min-height: 240px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
.featured-skeleton:first-child {
    grid-row: 1 / 3;
}
@media (max-width: 768px) {
    .featured-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .featured-card-large { grid-row: auto; }
    .featured-card { min-height: 200px; }
}

/* ── Brand showcase ─────────────────────────────────────────────── */
.brand-showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.brand-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.brand-card:hover {
    border-color: #193153;
    box-shadow: 0 8px 24px rgba(25,49,83,.1);
    transform: translateY(-2px);
}
.brand-card-img {
    height: 160px;
    overflow: hidden;
    background: #f3f4f6;
}
.brand-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .4s ease;
}
.brand-card:hover .brand-card-img img {
    transform: scale(1.05);
}
.brand-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}
.brand-card-body {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.brand-card-logo {
    height: 22px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
}
.brand-card-name {
    font-size: .9375rem;
    font-weight: 700;
    color: #111827;
}
.brand-card-count {
    font-size: .75rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}
.brand-card-skeleton {
    height: 220px;
    border-radius: 12px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@media (max-width: 768px) {
    .brand-showcase {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .brand-showcase {
        grid-template-columns: 1fr;
    }
}

/* ── Condition grid ─────────────────────────────────────────────── */
.cond-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.cond-card {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    height: 180px;
    background: #111;
}
.cond-card-img {
    position: absolute;
    inset: 0;
}
.cond-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.6);
    transition: transform .4s ease, filter .4s ease;
}
.cond-card:hover .cond-card-img img {
    transform: scale(1.06);
    filter: brightness(.5);
}
.cond-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    text-align: center;
    padding: 1rem;
}
.cond-card-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
}
.cond-card-count {
    font-size: .75rem;
    font-weight: 600;
    color: rgba(255,255,255,.6);
    margin-top: .25rem;
}
.cond-skeleton {
    height: 180px;
    border-radius: 12px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@media (max-width: 768px) {
    .cond-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .cond-grid {
        grid-template-columns: 1fr;
    }
    .cond-card { height: 150px; }
}

/* ── Category grid ───────────────────────────────────────────────── */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
}
.cat-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem 1.25rem 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    text-decoration: none;
    color: #111827;
    transition: border-color .18s, box-shadow .18s, transform .18s;
    min-height: 80px;
}
.cat-card:hover {
    border-color: #193153;
    box-shadow: 0 6px 20px rgba(25,49,83,.1);
    transform: translateY(-2px);
}
.cat-card-name {
    font-size: .875rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.35;
}
.cat-card-count {
    font-size: .75rem;
    color: #d9392d;
    font-weight: 600;
    margin-top: .5rem;
}

/* ── Category image cards (magmarket-style) ──────────────────────── */
.cat-card-img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    background: #1a2332 center/cover no-repeat;
    transition: transform .18s, box-shadow .18s;
}
.cat-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10,22,40,.55);
    transition: background .2s;
}
.cat-card-img:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(10,22,40,.25);
}
.cat-card-img:hover::after { background: rgba(10,22,40,.35); }
.cat-card-img-label {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .5rem 1rem;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.cat-card-img-label small {
    font-size: .7rem;
    font-weight: 400;
    opacity: .85;
    text-transform: none;
    letter-spacing: 0;
}

/* Photo hero (magmarket-style background) — full-bleed immersive banner */
.hero-title-magma { text-transform: uppercase; letter-spacing: .01em; }
.hero--photo {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: clamp(360px, 48vh, 560px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}
/* Guard against the 100vw bleed creating a horizontal scrollbar */
.public-content { overflow-x: hidden; }

/* ── Skeletons ───────────────────────────────────────────────────── */
.cat-skeleton { height: 150px; border-radius: 12px; }

/* ── Skeletons ───────────────────────────────────────────────────── */
.cat-skeleton,
.prod-skeleton {
    border-radius: 10px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
.prod-skeleton { height: 290px; }

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Product grid ────────────────────────────────────────────────── */
.prod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════
   NEWSLETTER
   ═══════════════════════════════════════════════════════════════════ */
.newsletter-section {
    background: #193153;
    padding: 3.5rem 0;
}
.newsletter-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    flex-wrap: wrap;
}
.newsletter-copy h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.375rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: .375rem;
    letter-spacing: -.02em;
}
.newsletter-copy p {
    font-size: .9rem;
    color: rgba(255,255,255,.55);
    margin: 0;
}
.newsletter-form {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.newsletter-input {
    height: 44px;
    padding: 0 1rem;
    font-size: .875rem;
    font-family: inherit;
    border: 1.5px solid rgba(255,255,255,.15);
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    color: #fff;
    outline: none;
    width: 260px;
    transition: border-color .15s, background .15s;
}
.newsletter-input::placeholder { color: rgba(255,255,255,.35); }
.newsletter-input:focus { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.12); }
.newsletter-btn {
    height: 44px;
    padding: 0 1.5rem;
    background: #d9392d;
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, transform .15s;
    white-space: nowrap;
}
.newsletter-btn:hover { background: #c63529; transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════════
   CTA BANNER
   ═══════════════════════════════════════════════════════════════════ */
/* ── FAQ ─────────────────────────────────────────────────────────── */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid #e5e7eb; }
.faq-item summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.25rem 0; font-size: .9375rem; font-weight: 600;
    color: #111827; cursor: pointer; list-style: none; transition: color .15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.25rem; font-weight: 400; color: #9ca3af; flex-shrink: 0; margin-left: 1rem; }
.faq-item[open] summary::after { content: '−'; color: #d9392d; }
.faq-item summary:hover { color: #d9392d; }
.faq-answer { padding: 0 0 1.25rem; }
.faq-answer p { font-size: .875rem; line-height: 1.7; color: #6b7280; margin: 0; }

.home-cta {
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    padding: 5rem 2rem;
    text-align: center;
}
.home-cta-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 2rem;
}
.home-cta-badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--mm-red-ink);
    background: rgba(221,61,49,.08);
    border: 1px solid rgba(221,61,49,.2);
    border-radius: 999px;
    padding: .3rem .875rem;
    margin-bottom: 1.25rem;
}
.home-cta h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: .875rem;
    letter-spacing: -.03em;
    text-wrap: balance;
}
.home-cta p {
    font-size: 1rem;
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.home-cta .hero-btn-secondary {
    color: #374151;
    border-color: #d1d5db;
    background: #fff;
}
.home-cta .hero-btn-secondary:hover {
    color: #111827;
    border-color: #193153;
    background: #f3f4f6;
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 1024px) ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .trust-bar-inner { grid-template-columns: repeat(2, 1fr); }
    .trust-item { border-right: none; border-bottom: 1px solid #f3f4f6; }
    .trust-item:nth-child(2n) { border-right: none; }
    .trust-item:nth-last-child(-n+2) { border-bottom: none; }

    .public-footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .prod-grid { grid-template-columns: repeat(3, 1fr); }
    .cat-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    .megamenu { min-width: min(560px, calc(100vw - 1.5rem)); }
    .megamenu-inner { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile (≤ 768px) ────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Header */
    .public-header-inner { padding: 0 1rem; gap: .75rem; height: 56px; }
    .public-header-search { display: none; }
    .public-header-actions { display: none; }
    .public-nav { display: none; }
    .public-nav-mobile-toggle { display: inline-flex; }
    .public-header-mobile { display: flex; }

    /* Hero */
    .hero-inner { padding: 3.5rem 1.25rem 3rem; }
    .hero-eyebrow { font-size: .65rem; }
    .hero-lead { font-size: .975rem; }
    .hero-actions { gap: .75rem; }
    .hero-btn-primary, .hero-btn-secondary { padding: .75rem 1.5rem; font-size: .875rem; width: 100%; justify-content: center; }
    .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: #0c1a2e; border-top: 1px solid rgba(255,255,255,.1); }
    .hero-stat { padding: 1.4rem .5rem; max-width: none; justify-content: flex-start; gap: .35rem; }
    .hero-stat-sep + .hero-stat { border-left: 1px solid rgba(255,255,255,.1); }
    .hero-stat-sep { display: none; }
    .hero-stat-n { font-size: 1.5rem; margin-bottom: 0; }
    .hero-stat-l { font-size: .6rem; letter-spacing: .03em; line-height: 1.35; }

    /* Trust bar */
    .trust-bar-inner { grid-template-columns: 1fr 1fr; padding: 1rem; gap: 0; }
    .trust-item { padding: .875rem .75rem; border-right: none; border-bottom: 1px solid #f3f4f6; }
    .trust-item:nth-child(odd) { border-right: 1px solid #f3f4f6; }
    .trust-item:nth-last-child(-n+2) { border-bottom: none; }

    /* Sections */
    .home-section { padding: 2.5rem 0; }
    .home-section-alt { padding: 2.5rem 0; }
    .section-inner { padding: 0 1rem; }
    .section-head { margin-bottom: 1.25rem; }
    .section-title { font-size: 1.125rem; }
    .section-more { font-size: .8125rem; white-space: nowrap; }

    /* Brand strip */
    .brands-strip-section { padding: 1rem; }
    .brands-strip-track { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
    .brands-strip-track::-webkit-scrollbar { display: none; }

    /* Category grid */
    .cat-grid { grid-template-columns: repeat(2, 1fr); gap: .625rem; }
    .cat-card { padding: .875rem 1rem; min-height: 64px; }
    .cat-card-name { font-size: .8125rem; }
    .cat-card-count { font-size: .7rem; margin-top: .375rem; }

    /* Product grid */
    .prod-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }

    /* Newsletter */
    .newsletter-section { padding: 2.5rem 1rem; }
    .newsletter-inner { flex-direction: column; gap: 1.5rem; align-items: flex-start; }
    .newsletter-copy h2 { font-size: 1.2rem; }
    .newsletter-input { width: 100%; box-sizing: border-box; }
    .newsletter-form { width: 100%; flex-direction: column; }
    .newsletter-btn { width: 100%; }

    /* CTA */
    .home-cta { padding: 3rem 1rem; }
    .home-cta h2 { font-size: 1.5rem; }
    .home-cta p { font-size: .9rem; }

    /* Footer */
    .public-footer { margin-top: 3rem; }
    .public-footer-inner { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 1.25rem 2rem; }
    .public-footer-bottom { flex-direction: column; gap: .375rem; text-align: center; padding: 1.25rem; }

    /* Other pages */
    .page-hero { padding: 2.5rem 1rem; }
    .page-hero h1 { font-size: 1.5rem; }
    .page-hero p { font-size: .9rem; }
    .page-section { padding: 2rem 1rem; }
    .brands-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .brands-toolbar { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .brands-toolbar input { max-width: 100% !important; width: 100%; box-sizing: border-box; }
    .contact-layout { grid-template-columns: 1fr; gap: 2rem; }

    /* Product show */
    .product-layout { flex-direction: column; }
    .product-gallery { width: 100%; }
    .product-info { width: 100%; }
}

/* ── Small mobile (≤ 480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
    .hero-inner { padding: 2.75rem 1rem 2.5rem; }
    .hero-stats { grid-template-columns: repeat(3, 1fr); }
    .hero-stat { padding: 1rem .25rem; }
    .hero-stat-n { font-size: 1.25rem; }

    .trust-bar-inner { grid-template-columns: 1fr; }
    .trust-item { border-right: none !important; }
    .trust-item:nth-last-child(-n+2) { border-bottom: 1px solid #f3f4f6; }
    .trust-item:last-child { border-bottom: none; }

    .cat-grid { grid-template-columns: 1fr 1fr; }
    .prod-grid { grid-template-columns: 1fr 1fr; gap: .625rem; }

    .page-hero h1 { font-size: 1.375rem; }

    .brands-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .brand-card-logo { width: 60px; height: 36px; }
    .brand-card-logo img { max-width: 60px; max-height: 36px; }
}


/* ═══════════════════════════════════════════════════════════════════
   AUTH LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
.auth-layout {
    min-height: 100vh;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
}
.auth-content-layout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    padding: 2.5rem;
    width: 100%;
    max-width: 460px;
}
.auth-card-header {
    text-align: center;
    margin-bottom: 2rem;
}
.auth-logo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: #111827;
    font-weight: 700;
    font-size: .9375rem;
    margin-bottom: 1.5rem;
}
.auth-logo-mark {
    width: 32px;
    height: 32px;
    background: #193153;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
}
.auth-logo-img { height: 46px; width: auto; display: block; }
.auth-card-header h1 {
    font-size: 1.375rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: .25rem;
    letter-spacing: -.02em;
}
.auth-card-header p {
    font-size: .875rem;
    color: #6b7280;
}
.auth-alert {
    padding: .75rem 1rem;
    border-radius: 8px;
    font-size: .875rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}
.auth-alert-error   { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.auth-alert-success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.auth-label-link {
    float: right;
    font-size: .8125rem;
    font-weight: 400;
    color: #193153;
    text-decoration: none;
}
.auth-label-link:hover { text-decoration: underline; }
.auth-card-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: .875rem;
    color: #6b7280;
}
.auth-card-footer a {
    color: #193153;
    font-weight: 600;
    text-decoration: none;
}
.auth-card-footer a:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════════
   PAGE HERO (used on Brands, Contact, Merchants, etc.)
   ═══════════════════════════════════════════════════════════════════ */
.page-hero {
    background: #193153;
    padding: 3.5rem 2rem;
    text-align: center;
    color: #fff;
}
.page-hero-inner { max-width: 680px; margin: 0 auto; }
.page-hero h1 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.03em;
    margin-bottom: .5rem;
    color: #fff;
}
.page-hero p { font-size: 1rem; color: rgba(255,255,255,.65); }

.page-section { padding: 3.5rem 2rem; }


/* ═══════════════════════════════════════════════════════════════════
   BRANDS PAGE
   ═══════════════════════════════════════════════════════════════════ */
.brands-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.brands-count { font-size: .875rem; color: #9ca3af; }

.brands-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .875rem;
}
.brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.25rem .75rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    text-decoration: none;
    color: #111827;
    gap: .25rem;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.brand-card:hover {
    border-color: #193153;
    box-shadow: 0 4px 14px rgba(25,49,83,.1);
    transform: translateY(-1px);
}
.brand-card-logo {
    width: 80px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .375rem;
}
.brand-card-logo img {
    max-width: 80px;
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .6;
    transition: filter .2s, opacity .2s;
}
.brand-card:hover .brand-card-logo img {
    filter: grayscale(0%);
    opacity: 1;
}
.brand-card-initial {
    font-size: 1.5rem;
    font-weight: 700;
    color: #d1d5db;
}
.brand-card-name { font-size: .875rem; font-weight: 600; color: #1f2937; }
/* #9ca3af sur blanc ne donne que 2,54:1. Cette règle, plus tardive dans le
   fichier, écrasait le #6b7280 défini plus haut. #6f7682 atteint 4,58. */
.brand-card-count { font-size: .775rem; color: #6f7682; }
.brand-skeleton {
    height: 118px;
    border-radius: 10px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e9eaec 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}


/* ═══════════════════════════════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════════════════════════════ */
.contact-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 3rem;
    align-items: start;
}
.contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
}
.contact-info-icon {
    width: 40px;
    height: 40px;
    background: #eef2f7;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #193153;
}
.contact-info-item strong { display: block; font-size: .9rem; font-weight: 600; color: #111827; margin-bottom: .15rem; }
.contact-info-item span   { font-size: .8375rem; color: #6b7280; }
.contact-info-item a      { color: #193153; }
.contact-form textarea.form-input { resize: vertical; min-height: 120px; }



/* ═══════════════════════════════════════════════════════════════════
   MERCHANTS PAGE
   ═══════════════════════════════════════════════════════════════════ */
.merchants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}
.merchant-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.merchant-card-header { display: flex; align-items: center; gap: 1rem; }
.merchant-avatar {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #193153;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: .03em;
}
.merchant-name { font-size: 1rem; font-weight: 700; color: #111827; margin: 0; }
.merchant-location {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .8rem;
    color: #6b7280;
    margin-top: .2rem;
}
.merchant-desc { font-size: .875rem; color: #6b7280; line-height: 1.55; margin: 0; }
.merchant-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}
.merchant-stat { font-size: .8125rem; color: #9ca3af; }


/* ═══════════════════════════════════════════════════════════════════
   HOME — VERSION SOBRE & ÉLÉGANTE
   Palette restreinte : encre #111827, gris #6b7280, blanc / off-white.
   Le rouge de marque n'est plus qu'un petit accent (eyebrow, prix, CTA).
   Aucun aplat de couleur, pas de dégradé criard.
   ═══════════════════════════════════════════════════════════════════ */

/* ── En-têtes de section : titres affirmés, accent minimal ────────── */
.home-section .section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .7rem;
    letter-spacing: .16em;
}
.home-section .section-eyebrow::before {
    content: "";
    width: 18px;
    height: 1px;
    background: var(--mm-red-ink);
}
.home-section .section-title {
    font-size: clamp(1.4rem, 1.05rem + 1.4vw, 1.95rem);
    font-weight: 700;
    letter-spacing: -.03em;
}

/* ── Cartes : élévation douce et discrète (featured + cond) ───────── */
.featured-card,
.cond-card {
    box-shadow: 0 1px 2px rgba(17,24,39,.06);
    transition: transform .2s ease, box-shadow .2s ease;
}
.featured-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(17,24,39,.14); }
.cond-card:hover     { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(17,24,39,.16); }

/* ── Hero : accent rouge PLEIN (pas de dégradé), stats sobres ─────── */
/* .hero-title-accent garde sa couleur rouge solide définie plus haut. */
.hero-stats {
    border-top: none;
    background: transparent;
    gap: .75rem;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 2rem 3rem;
    flex-wrap: wrap;
}
.hero-stat {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    padding: 1.1rem 1.5rem;
    max-width: none;
}
.hero-stat-sep { display: none; }

/* ── « Bonnes affaires » : sobre, sans aplat rouge ────────────────── */
/* Différenciée par une teinte chaude très légère + filets fins ;      */
/* eyebrow / titre / lien reprennent leur style d'encre par défaut.    */
.home-section-deals {
    background: #f8f7f5;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}

/* ── CTA marchand : carte claire encadrée (≠ bloc Reprise) ────────── */
.home-cta-framed {
    background: #fff;
}
.home-cta-framed .home-cta-inner {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 2.75rem 2.5rem;
    background: #fafafa;
}

/* ── Cartes « Haut de gamme » : produit entier visible (contain) ──── */
/* Les visuels sont des photos produit (souvent sur fond blanc) : cover  */
/* les rognait. On affiche en entier sur tuile blanche, légende lisible. */
.featured-card { background: #fff; }
.featured-card img {
    object-fit: contain;
    padding: 1.25rem 1.25rem 3.75rem;
}
.featured-card-large img { padding: 1.75rem 1.75rem 5rem; }
.featured-card:hover img { transform: scale(1.03); filter: none; }
.featured-card-overlay {
    background: linear-gradient(to top, rgba(17,24,39,.82) 0%, rgba(17,24,39,.30) 28%, transparent 58%);
}

/* ── Section sombre « Notre différence » : lisibilité ─────────────── */
/* .how-step-dark h3/p étaient écrasés par .how-step h3/p (même         */
/* spécificité, définis plus bas) → texte sombre sur fond navy.         */
/* On force ici avec une spécificité supérieure (0,2,1).                */
.home-section-dark .how-step h3 { color: #fff; }
.home-section-dark .how-step p  { color: rgba(255,255,255,.82); }

/* ── Responsive : stats hero empilées proprement ──────────────────── */
@media (max-width: 600px) {
    .hero-stats { gap: .5rem; padding-bottom: 2rem; }
    .hero-stat { flex: 1 1 40%; padding: .9rem 1rem; }
}

/* ── Autocomplétion barre de recherche ─────────────────────────────── */
.mm-search { position: relative; }
.public-nav-mobile-search.mm-search { position: relative; }

.mm-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1200;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(17, 24, 39, .14);
    padding: .35rem;
    max-height: min(70vh, 460px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* En desktop le champ fait 300px ; on élargit le menu pour les vignettes. */
.public-header-search .mm-suggest { min-width: 340px; right: auto; }

.mm-suggest-group {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9ca3af;
    padding: .5rem .6rem .25rem;
}
.mm-suggest-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .6rem;
    border-radius: 8px;
    text-decoration: none;
    color: #111827;
    cursor: pointer;
}
.mm-suggest-item:hover,
.mm-suggest-item.is-active { background: #f3f4f6; }

.mm-suggest-thumb {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mm-suggest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mm-suggest-noimg { width: 100%; height: 100%; background: #f3f4f6; }

.mm-suggest-body { flex: 1 1 auto; min-width: 0; }
.mm-suggest-title {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mm-suggest-meta {
    display: block;
    font-size: .75rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mm-suggest-price {
    flex: 0 0 auto;
    font-size: .875rem;
    font-weight: 700;
    color: #193153;
    white-space: nowrap;
}

.mm-suggest-brand { justify-content: space-between; }
.mm-suggest-brand-name { font-weight: 600; font-size: .875rem; }
.mm-suggest-count { font-size: .75rem; color: #6b7280; }

.mm-suggest-all {
    justify-content: center;
    font-size: .82rem;
    font-weight: 600;
    color: #d9392d;
    margin-top: .15rem;
}
.mm-suggest-empty {
    padding: .9rem .6rem;
    font-size: .85rem;
    color: #6b7280;
    text-align: center;
}

/* product-card.css */
/* ==========================================================================
   PRODUCT CARD — composant partagé (SOURCE UNIQUE)
   Importé par MagMarket (main.css) ET par le moteur de vitrine (symlink).
   Toutes les couleurs ont un fallback inline → le composant est portable :
   il reprend simplement le --primary du contexte (couleur du marchand côté vitrine).
   N'AJOUTE PAS de markup spécifique ici ; garde-le purement visuel et tokenisé.
   ========================================================================== */

/* Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.25rem;
    transition: opacity .15s;
}
.products-grid.loading-dim { opacity: .45; pointer-events: none; }

/* ── Product cards ───────────────────────────────────────────────── */

.product-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
    transition: box-shadow .2s, transform .2s;
}
.product-card:hover {
    box-shadow: 0 10px 28px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.07);
    transform: translateY(-3px);
}

/* Image area — white so product photos blend naturally */
.product-card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff;
    overflow: hidden;
    border-bottom: 1px solid var(--border, #f0f0f0);
    /* Colonne : une bande d'étiquettes en haut, l'image occupe tout le reste.
       Les étiquettes étaient auparavant en surimpression ; sur une photo en
       paysage elles remplissaient la bande blanche du haut pendant que celle du
       bas restait vide, et l'ensemble paraissait décentré. */
    display: flex;
    flex-direction: column;
}
.product-card-img img {
    flex: 1;
    min-height: 0;
    width: 100%;
    object-fit: contain;
    /* Retrait resserré (était 1rem) : le produit occupait à peine la moitié du
       cadre, entouré de blanc. Sur une vignette de catalogue, la photo est
       l'argument, elle doit remplir la place disponible. */
    padding: .15rem .55rem .55rem;
    transition: transform .3s ease;
}
.product-card:hover .product-card-img img { transform: scale(1.04); }
.product-card-no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-300, #d1d5db);
}

/* Condition badge — top-left */
.product-card-flags {
    /* Hauteur RÉSERVÉE même sans étiquette : sans cela, une carte avec badge et
       une carte sans badge n'auraient pas la même zone d'image et la grille
       perdrait son alignement. C'est ce qui rend l'ensemble consistant. */
    flex: none;
    min-height: 2.15rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .4rem;
    padding: .55rem .6rem 0;
}
/* L'état n'est plus posé sur l'image : il rejoint la catégorie dans le corps de
   la carte. Sur l'image, il remplissait la bande blanche du haut d'une photo en
   paysage pendant que celle du bas restait vide, ce qui donnait une impression
   de décentrage alors que l'image était bien centrée. */
/* Sur du matériel d'occasion, l'état est l'attribut décisif : il garde donc du
   poids typographique, mais sans cadre — deux boîtes de styles différents côte
   à côte faisaient désordre. */
.product-card-badge {
    font-size: .7rem;
    font-weight: 600;
    padding: .2rem .5rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, .92);
    color: var(--gray-700, #374151);
    border: 1px solid var(--border, #e5e7eb);
    white-space: nowrap;
}

/* Discount badge — top-right */
.product-card-discount {
    font-size: .7rem;
    font-weight: 700;
    padding: .2rem .45rem;
    border-radius: 4px;
    /* Blanc sur #ef4444 ne donnait que 3,76:1. #dd3232 atteint 4,59. */
    background: #dd3232;
    color: #fff;
  white-space: nowrap;
  flex: none;
}

/* Body */
.product-card-body {
    /* Rythme resserré : quatre éléments espacés de .25rem donnaient une carte
       aérée mais molle, sans hiérarchie. La marque et le titre se rapprochent,
       le prix se détache par un espace au-dessus. */
    padding: .7rem .85rem .85rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.product-card-brand {
    font-size: .7rem;
    color: var(--primary, #2563eb);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.product-card-title {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    color: var(--gray-900, #111827);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card-category {
    font-size: .72rem;
    /* #8b91a0 ne donnait que 3,15:1 sur blanc, sous le seuil AA. */
    color: #6f7682;
    margin: .1rem 0 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Le point médian n'apparaît que si l'état le précède : le carrousel des
   produits liés n'affiche que l'état, il ne doit pas hériter d'un point isolé. */


/* Price row */
.product-card-price {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    /* Le prix est poussé en BAS de la carte : dans une grille, des prix alignés
       d'une carte à l'autre se comparent d'un coup d'œil, alors qu'ils sautaient
       de ligne selon la longueur du titre. */
    margin-top: auto;
    padding-top: .55rem;
    /* Le prix neuf passe à la ligne EN ENTIER quand il ne tient pas : nowrap seul
       empêchait la coupure du nombre mais faisait déborder la carte de 22 px. */
    flex-wrap: wrap;
    row-gap: .15rem;
}
.product-card-price strong {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gray-900, #111827);
    letter-spacing: -.01em;
}
.product-card-compare {
    font-size: .8rem;
    color: var(--text-muted, #6f7682);
    text-decoration: line-through;
  /* Le montant ne doit jamais se couper : « Neuf : 7 990,00 € »
     passait à la ligne au milieu du nombre sur les cartes étroites. */
  white-space: nowrap;
}

/* Chargement d'une nouvelle page de résultats.
   Les cartes précédentes RESTENT affichées, simplement atténuées, et le spinner
   se superpose. Vider la grille pendant l'attente donnait l'impression d'une
   erreur et faisait sauter la hauteur de la page à chaque clic sur un filtre. */
.products-grid-wrap { position: relative; min-height: 120px; }
.products-grid-wrap > .state-loading {
  position: absolute;
  inset: 0;
  padding: 0;
  align-items: flex-start;
  padding-top: 3.5rem;
  pointer-events: none;
  background: rgba(255, 255, 255, .35);
}
/* Atténuation plus douce qu'auparavant : le spinner suffit à signaler l'attente,
   inutile d'effacer les résultats à moitié. */
.products-grid.loading-dim { opacity: .62; pointer-events: none; transition: opacity .12s ease; }

/* products.css */
/* ── Products listing layout ─────────────────────────────────────── */

.products-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    align-items: start;
}

/* ── Filters sidebar ─────────────────────────────────────────────── */

.filters-sidebar {
    position: sticky;
    top: 80px;
    background: #fff;
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
}

.filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.filters-title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--gray-900, #111);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.filters-clear-all {
    font-size: .775rem;
    color: var(--primary, #2563eb);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-weight: 500;
}
.filters-clear-all:hover { text-decoration: underline; }

/* Filter sections */
.filter-section {
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.filter-section:last-child { border-bottom: none; }

.filter-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    color: var(--gray-800, #1f2937);
    text-align: left;
}
.filter-section-toggle span:first-child { flex: 1; }
.filter-section-toggle:hover { background: var(--gray-50, #f9fafb); }

.filter-chevron {
    flex-shrink: 0;
    transition: transform .2s;
    color: var(--text-muted, #9ca3af);
}
.filter-section.open .filter-chevron { transform: rotate(180deg); }

.filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--primary, #2563eb);
    color: #fff;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
}

.filter-options {
    display: none;
    padding: .25rem 0 .75rem;
}
.filter-section.open .filter-options { display: block; }

/* Checkboxes */
.filter-option {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .35rem 1rem;
    cursor: pointer;
    font-size: .875rem;
    color: var(--gray-700, #374151);
    transition: background .1s;
    user-select: none;
}
.filter-option:hover { background: var(--gray-50, #f9fafb); }
.filter-option input[type=checkbox] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    accent-color: var(--primary, #2563eb);
    cursor: pointer;
}
.filter-option-label { flex: 1; }
.filter-option-count {
    font-size: .775rem;
    color: var(--text-muted, #9ca3af);
}

/* Brand search */
.filter-brand-search-wrap {
    padding: .5rem .875rem;
}
.filter-brand-search {
    width: 100%;
    font-size: .8rem;
    padding: .35rem .625rem;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    outline: none;
    background: var(--gray-50, #f9fafb);
    color: var(--gray-800, #1f2937);
    box-sizing: border-box;
}
.filter-brand-search:focus { border-color: var(--primary, #2563eb); background: #fff; }

.filter-options-list { max-height: 220px; overflow-y: auto; }

/* Price range slider */
.price-slider-wrap { padding: .5rem 1rem .75rem; }

.price-slider-display {
    display: flex;
    justify-content: space-between;
    margin-bottom: .75rem;
}
.price-slider-val {
    font-size: .8rem;
    font-weight: 600;
    color: var(--gray-800, #1f2937);
    background: var(--gray-100, #f3f4f6);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 6px;
    padding: .2rem .5rem;
}

.price-slider-track {
    position: relative;
    height: 4px;
    background: var(--gray-200, #e5e7eb);
    border-radius: 2px;
    margin: 16px 0;
}

.price-slider-fill {
    position: absolute;
    top: 0; bottom: 0;
    background: var(--primary, #2563eb);
    border-radius: 2px;
    pointer-events: none;
}

.price-range-thumb {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 4px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    outline: none;
    margin: 0;
}

.price-range-thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--primary, #2563eb);
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
    cursor: pointer;
    pointer-events: all;
    transition: transform .1s, box-shadow .1s;
}
.price-range-thumb::-webkit-slider-thumb:hover,
.price-range-thumb:active::-webkit-slider-thumb {
    transform: scale(1.15);
    box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}

.price-range-thumb::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--primary, #2563eb);
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
    cursor: pointer;
    pointer-events: all;
}
.price-range-thumb::-moz-range-track { background: transparent; }

/* Skeleton loaders */
.filter-skeleton-list { padding: .25rem 1rem; }
.filter-skeleton {
    height: 14px;
    background: linear-gradient(90deg, var(--gray-100, #f3f4f6) 25%, var(--gray-200, #e5e7eb) 50%, var(--gray-100, #f3f4f6) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 4px;
    margin-bottom: .6rem;
}
.filter-skeleton:nth-child(2) { width: 80%; }
.filter-skeleton:nth-child(3) { width: 60%; }
.filter-skeleton:nth-child(4) { width: 75%; }
.filter-skeleton:nth-child(5) { width: 50%; }

/* ── Main content area ───────────────────────────────────────────── */

.products-main { min-width: 0; }

.products-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.toolbar-left { display: flex; align-items: center; gap: .75rem; }
.toolbar-right { display: flex; align-items: center; gap: .75rem; }

.products-count { font-size: .875rem; color: var(--text-muted, #6b7280); }

.filters-mobile-toggle { position: relative; }
.filters-mobile-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--primary, #2563eb);
    color: #fff;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.search-box {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: .4rem .75rem;
    background: #fff;
    color: var(--text-muted, #9ca3af);
}
.search-box input {
    border: none;
    outline: none;
    font-size: .875rem;
    background: transparent;
    color: var(--gray-800, #1f2937);
    width: 180px;
}
.search-box:focus-within { border-color: var(--primary, #2563eb); }

.sort-select {
    font-size: .875rem;
    padding: .4rem .625rem;
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

/* Active filter chips */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem;
}

.active-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .275rem .625rem;
    background: var(--primary-50, #eff6ff);
    color: var(--primary, #2563eb);
    border: 1px solid var(--primary-100, #bfdbfe);
    border-radius: 999px;
    font-size: .775rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background .1s;
}
.active-chip:hover { background: var(--primary-100, #dbeafe); }
.chip-remove { font-size: .9rem; line-height: 1; color: var(--primary, #2563eb); opacity: .7; }

/* States */
.state-loading {
    display: flex;
    justify-content: center;
    padding: 3rem;
}
.state-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border, #e5e7eb);
    border-top-color: var(--primary, #2563eb);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

.state-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem 1rem;
    color: var(--text-muted, #6b7280);
    text-align: center;
}
.state-empty p { margin: 0; font-size: .95rem; }

/* Grid + product cards → déplacés dans components/product-card.css
   (source unique partagée avec le moteur de vitrine). Ne pas redéclarer ici. */

/* Pagination */
.products-pagination { padding: 2rem 0; }
.pagination { display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; }

/* ── Single product page ─────────────────────────────────────────── */

.product-page { max-width: 1280px; margin: 0 auto; padding: 2rem; }

.product-breadcrumb { display: flex; gap: .5rem; align-items: center; font-size: .875rem; color: var(--text-muted, #6b7280); margin-bottom: 2rem; flex-wrap: wrap; }
.product-breadcrumb a { color: var(--primary, #2563eb); text-decoration: none; }
.product-breadcrumb a:hover { text-decoration: underline; }

.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }

.product-gallery-main {
    aspect-ratio: 4/3;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

/* Slide track */
.gallery-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform .35s ease;
}
.gallery-slide {
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}
.gallery-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 1.5rem;
}
.gallery-zoomable { cursor: zoom-in; }
.product-no-image { color: var(--text-muted, #9ca3af); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

/* Dots indicator (mobile) */
.gallery-dots {
    position: absolute;
    bottom: .75rem;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    gap: .375rem;
    z-index: 3;
}
.gallery-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(0,0,0,.2);
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.gallery-dot.active {
    background: #193153;
    transform: scale(1.25);
}
@media (max-width: 768px) {
    .gallery-dots { display: flex; }
    .gallery-arrow { display: none !important; }
    .gallery-slide img { padding: 1rem; }
}

/* Gallery arrows */
.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #374151;
    opacity: 0;
    transition: opacity .2s, background .15s;
    z-index: 2;
}
.gallery-arrow-prev { left: .5rem; }
.gallery-arrow-next { right: .5rem; }
.product-gallery-main:hover .gallery-arrow { opacity: 1; }
.gallery-arrow:hover { background: #fff; color: #193153; }

/* Zoom button */
.gallery-zoom-btn {
    position: absolute;
    bottom: .5rem; right: .5rem;
    width: 30px; height: 30px;
    border-radius: 6px;
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(0,0,0,.08);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #6b7280;
    opacity: 0;
    transition: opacity .2s;
    z-index: 2;
}
.product-gallery-main:hover .gallery-zoom-btn { opacity: 1; }
.gallery-zoom-btn:hover { color: #193153; background: #fff; }

.product-gallery-thumbs { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }
.product-thumb {
    width: 72px; height: 72px;
    object-fit: contain;
    border: 2px solid var(--border, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    padding: .375rem;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.product-thumb.active, .product-thumb:hover {
    border-color: #193153;
    box-shadow: 0 0 0 1px #193153;
}

/* ── Lightbox ───────────────────────────────────────────────────── */
.gallery-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn .2s ease;
}
.gallery-lightbox.hidden { display: none; }
.gallery-lightbox img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    background: #fff;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 8px 40px rgba(0,0,0,.4);
    border-radius: 4px;
    user-select: none;
}
.lightbox-close {
    position: absolute;
    top: 1rem; right: 1.25rem;
    font-size: 2rem;
    line-height: 1;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    opacity: .7;
    transition: opacity .15s;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.lightbox-arrow:hover { background: rgba(255,255,255,.25); }
.lightbox-prev { left: 1.25rem; }
.lightbox-next { right: 1.25rem; }
.lightbox-counter {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.6);
    font-size: .85rem;
    pointer-events: none;
}

.product-brand { font-size: .8rem; color: var(--primary, #2563eb); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; text-decoration: none; }
.product-title { font-size: 1.6rem; font-weight: 700; margin: .5rem 0; line-height: 1.25; }
.product-ref { font-size: .875rem; margin-bottom: 1rem; }
/* État "capteur de demande" (fiche sans offre / en rupture) — Module 1 */
.product-state-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .75rem; border-radius: 8px; font-weight: 600; font-size: .9rem; margin: .75rem 0 .25rem; }
.product-state-badge.product-state-sold { background: #fef2f2; color: #b91c1c; }
.product-state-badge.product-state-unavailable { background: #fffbeb; color: #b45309; }
.product-similar-link a { display: inline-flex; align-items: center; gap: .35rem; color: #6b7280; text-decoration: none; }
.product-similar-link a:hover { text-decoration: underline; }
.product-price-block { display: flex; align-items: baseline; gap: .75rem; margin: 1rem 0; flex-wrap: wrap; }
.product-price { font-size: 1.75rem; font-weight: 700; color: var(--gray-900, #111); }
.product-compare-price { font-size: 1.1rem; color: var(--text-muted, #9ca3af); text-decoration: line-through; }
.product-meta-row { display: flex; align-items: center; gap: .5rem; font-size: .9rem; margin: .4rem 0; color: var(--text-muted, #4b5563); }
.product-short-desc { font-size: .95rem; line-height: 1.6; margin: 1.25rem 0; color: var(--gray-700, #374151); }
.product-actions { display: flex; gap: .75rem; margin: 1.5rem 0; flex-wrap: wrap; }
.product-actions .btn { flex: 1; min-width: 180px; justify-content: center; }

/* Reassurance badges */
.product-reassurance {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 1.25rem 0;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
}
.reassurance-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border, #f0f0f0);
}
.reassurance-item:last-child { border-bottom: none; }
.reassurance-item svg {
    flex-shrink: 0;
    color: var(--primary, #2563eb);
}
.reassurance-item div {
    display: flex;
    flex-direction: column;
}
.reassurance-item strong {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--gray-800, #1f2937);
}
.reassurance-item span {
    font-size: .75rem;
    color: var(--text-muted, #6b7280);
}

/* Merchant card */
.product-merchant-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .875rem 1rem;
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    margin-bottom: 1rem;
}
.merchant-card-header {
    display: flex;
    align-items: center;
    gap: .625rem;
}
.merchant-card-header div {
    display: flex;
    flex-direction: column;
}
.merchant-card-header strong {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted, #6b7280);
    font-weight: 500;
}
.merchant-name {
    font-size: .9rem;
    font-weight: 600;
    color: var(--gray-900, #111);
}
.merchant-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary, #2563eb);
    color: #fff;
    font-weight: 700;
    font-size: .875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Related products */
.product-related-section { margin-top: 1rem; }
.related-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

/* Skeleton for related products */
.product-card-skeleton {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border, #e5e7eb);
}
.product-card-skeleton .skeleton-img {
    aspect-ratio: 1/1;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}
.product-card-skeleton .skeleton-text {
    height: 12px;
    margin: .75rem 1rem .5rem;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 4px;
}
.product-card-skeleton .skeleton-text.short { width: 50%; margin-top: 0; margin-bottom: 1rem; }

.product-dims { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: 1rem; }
.product-dim { background: var(--gray-50, #f9fafb); border: 1px solid var(--border, #e5e7eb); border-radius: 6px; padding: .5rem; text-align: center; font-size: .8rem; display: flex; flex-direction: column; gap: .2rem; }
.product-dim span { color: var(--text-muted, #6b7280); }
.product-section { margin-bottom: 3rem; }
.product-section h2 { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border, #e5e7eb); }
.product-description { font-size: .95rem; line-height: 1.7; color: var(--gray-700, #374151); max-width: 75ch; }
.specs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.product-specs-table { width: 100%; min-width: 0; border-collapse: collapse; }
.product-specs-table td { word-break: break-word; overflow-wrap: break-word; white-space: normal; vertical-align: top; padding: .35rem .5rem; }
.product-specs-table td.spec-key { font-weight: 500; color: var(--gray-700, #374151); width: 40%; }
.product-documents, .product-links { display: flex; flex-wrap: wrap; gap: .75rem; }
.product-doc-link, .product-ext-link { display: flex; align-items: center; gap: .4rem; padding: .5rem .875rem; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; text-decoration: none; color: var(--gray-800, #111); font-size: .875rem; transition: border-color .15s; }
.product-doc-link:hover, .product-ext-link:hover { border-color: var(--primary, #2563eb); color: var(--primary, #2563eb); }

/* ── Contact modal ───────────────────────────────────────────────── */

.pmodal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(3px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    animation: fadeIn .15s ease;
}
.pmodal-overlay.hidden { display: none; }

@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.pmodal {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,.22);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2rem;
    animation: slideUp .18s ease;
}

.pmodal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f0f0f0;
}
.pmodal-header-info {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
}
.pmodal-icon {
    width: 42px;
    height: 42px;
    background: rgba(37,99,235,.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #2563eb);
    flex-shrink: 0;
}
.pmodal-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #111827;
    margin: .1rem 0 .2rem;
}
.pmodal-sub {
    font-size: .8375rem;
    color: #6b7280;
    margin: 0;
}
.pmodal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 8px;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .1s, color .1s;
}
.pmodal-close:hover { background: #e5e7eb; color: #111; }

.pmodal-ref {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .8rem;
    color: #6b7280;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: .5rem .75rem;
    margin-bottom: 1.25rem;
}

.pmodal-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.pmodal-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f0f0f0;
}

.product-contact-success {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.25rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    color: #15803d;
    font-size: .9rem;
    font-weight: 500;
    margin-top: .5rem;
}
.product-contact-error {
    padding: .75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: .875rem;
    margin-top: .75rem;
}

.form-label-optional { font-size: .75rem; color: #9ca3af; font-weight: 400; }
.required { color: #ef4444; }

@media (max-width: 600px) {
    .pmodal { padding: 1.25rem; }
    .pmodal-row { grid-template-columns: 1fr; }
    .pmodal-actions { flex-direction: column-reverse; }
    .pmodal-actions .btn { width: 100%; justify-content: center; }
}

/* ── Animations ──────────────────────────────────────────────────── */
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 960px) {
    .products-layout { grid-template-columns: 1fr; }

    .filters-sidebar {
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        width: 280px;
        z-index: 300;
        transform: translateX(-100%);
        transition: transform .25s ease;
        border-radius: 0;
        overflow-y: auto;
    }
    .filters-sidebar.open { transform: translateX(0); box-shadow: 4px 0 32px rgba(0,0,0,.18); }

    .filters-mobile-toggle { display: inline-flex !important; }
}

@media (min-width: 961px) {
    .filters-mobile-toggle { display: none !important; }
}

@media (max-width: 768px) {
    .related-products-grid { grid-template-columns: repeat(2, 1fr); }
    .product-actions .btn { min-width: 0; }
}

@media (max-width: 600px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
    .products-layout { padding: 1rem; }
    .product-layout { grid-template-columns: 1fr; gap: 1.5rem; }
    .product-dims { grid-template-columns: repeat(2, 1fr); }
    .search-box input { width: 120px; }
    .product-specs-table td,
    .product-specs-table td.spec-key { display: block; width: 100%; }
    .product-specs-table td.spec-key { padding-bottom: .1rem; border-bottom: none; }
    .product-specs-table tr { display: block; border-bottom: 1px solid var(--border, #e5e7eb); padding: .4rem 0; }
    .product-actions { flex-direction: column; }
    .product-actions .btn { width: 100%; }
    .product-merchant-card { flex-direction: column; align-items: flex-start; gap: .5rem; }
}


/* === Variantes & offres (style marketplace) === */
/* Prix + "À partir de" */
.product-price-from-label {
  flex-basis: 100%;
  font-size: .8rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: -.35rem;
}

/* Sélecteurs de variantes (état / couleur / capacité) */
.product-variants { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-4) 0; }
.product-variant-axis { display: flex; flex-direction: column; gap: var(--space-2); }
.variant-axis-label {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gray-700);
}
.variant-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.variant-option {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .55rem; text-align: left;
  background: #fff; color: var(--gray-900);
  border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: .55rem .85rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.variant-option .vo-text { display: flex; flex-direction: column; gap: .12rem; line-height: 1.15; }
.variant-option .vo-name { font-size: .9rem; font-weight: 600; }
.variant-option .vo-price { font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.variant-option.active .vo-price { color: var(--primary); }
.vo-swatch {
  width: 18px; height: 18px; border-radius: 50%; flex: none; display: inline-block;
  border: 1px solid rgba(0,0,0,.18);
}
.variant-option.active .vo-swatch { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary); }
.product-meta-row .vo-swatch { width: 16px; height: 16px; }
.variant-condition-desc { font-size: .82rem; color: var(--text-muted); margin: .15rem 0 0; line-height: 1.35; }
.variant-condition-desc:empty { display: none; }
.variant-option:hover:not(.variant-option-disabled):not(.active) { border-color: var(--gray-500); }
.variant-option.active {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
  background: var(--primary-light); color: var(--primary);
}
.variant-option-disabled {
  opacity: .45; cursor: not-allowed; text-decoration: line-through;
  background: var(--gray-50);
}

/* Valeur unique (pas de choix) : ligne discrète */
.product-meta-row { color: var(--gray-700); }
.product-meta-row strong { color: var(--gray-900); }

/* Liste des offres concurrentes */
.product-offers { margin-top: var(--space-4); border-top: 1px solid var(--border); padding-top: var(--space-4); }
.product-offers-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 var(--space-3); color: var(--gray-900); }
.offer-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.offer-row:hover { border-color: var(--gray-500); }
.offer-row-selected { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--primary-light); }
.offer-row-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.offer-row-price { font-size: 1.15rem; font-weight: 700; color: var(--gray-900); }
.offer-row-meta { font-size: .85rem; color: var(--gray-700); }
.offer-row-merchant { font-size: .8rem; color: var(--text-muted); }
.offer-row-merchant::before { content: "\00b7\00a0"; color: var(--gray-500); }
.offer-unavailable { opacity: .55; }
.offer-merchant-desc {
  margin: .75rem 0;
  padding: .75rem 1rem;
  background: #f8fafc;
  border-left: 3px solid var(--primary, #4f46e5);
  border-radius: 0 6px 6px 0;
  font-size: .875rem;
  color: var(--gray-800);
}
.offer-merchant-desc strong { display: block; margin-bottom: .25rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.offer-merchant-desc p { margin: 0; line-height: 1.6; }
.offer-select-btn {
  white-space: nowrap; cursor: pointer;
  border: 1.5px solid var(--primary); background: #fff; color: var(--primary);
  border-radius: var(--radius); padding: .5rem 1.1rem; font-size: .85rem; font-weight: 700;
  transition: background .15s ease, color .15s ease;
}
.offer-select-btn:hover:not(:disabled) { background: var(--primary); color: #fff; }
.offer-select-btn:disabled { border-color: var(--border); color: var(--text-muted); cursor: not-allowed; }
.offer-row-selected .offer-select-btn { background: var(--primary); color: #fff; }

/* ── Options payantes (add-ons) ────────────────────────────────── */
.product-addons-block {
  margin: 1rem 0;
  padding: .875rem 1rem;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 8px);
  background: #f9fafb;
}
.addons-header {
  display: flex; align-items: center; gap: .4rem;
  font-size: .9rem; margin-bottom: .6rem;
  color: var(--gray-900, #111);
}
.addons-header svg { color: var(--gray-600, #4b5563); flex-shrink: 0; }
.addon-choice {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .5rem .75rem;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 6px;
  cursor: pointer;
  font-size: .875rem;
  background: #fff;
  margin-bottom: .4rem;
  transition: border-color .15s ease, background .15s ease;
  user-select: none;
}
.addon-choice:has(input:checked) {
  border-color: var(--primary, #2563eb);
  background: var(--primary-light, #eff6ff);
}
.addon-choice input[type="checkbox"] { margin-top: .15rem; accent-color: var(--primary, #2563eb); flex-shrink: 0; }
.addon-choice-body { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.addon-choice-label { font-weight: 600; color: var(--gray-900, #111); }
.addon-choice:has(input:checked) .addon-choice-label { color: var(--primary, #2563eb); }
.addon-choice-notes { font-size: .78rem; color: var(--text-muted, #6b7280); }
.addon-choice-price { font-weight: 700; color: var(--primary, #2563eb); white-space: nowrap; margin-left: auto; padding-left: .5rem; }
/* Merchant form editor */
.addon-editor-row { background: #f9fafb; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; padding: .6rem .75rem; margin-bottom: .5rem; }

/* ── Fiche : livraison au CTA + sommaire sticky + barre d'achat mobile (best practices 2026) ── */
.product-ship-note { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--gray-700, #374151); margin: .25rem 0 1rem; }
.product-ship-note svg { flex-shrink: 0; color: var(--primary, #193153); }
.product-ship-note strong { color: #065f46; }

.product-toc { position: sticky; top: 64px; z-index: 50; display: flex; gap: .25rem; flex-wrap: wrap; background: #fff; border-bottom: 1px solid var(--border, #e5e7eb); margin: 0 0 2rem; padding: .5rem 0; }
.product-toc a { font-size: .875rem; font-weight: 500; color: var(--gray-600, #4b5563); text-decoration: none; padding: .45rem .85rem; border-radius: 6px; transition: color .15s, background .15s; }
.product-toc a:hover { background: #f3f4f6; color: #111827; }
.product-toc a.active { color: var(--primary, #193153); background: #f3f4f6; }
.product-section { scroll-margin-top: 120px; }
html { scroll-behavior: smooth; }

@media (max-width: 768px) {
  .product-toc { top: 56px; }
}

/* ── Marque : logo + nom, cliquables d'un bloc ─────────────────────────────
   Le logo est enfermé dans un cadre de taille FIXE : les logos de marque ont
   des ratios très variables (KEF est large, Focal presque carré) et sans
   contrainte la hauteur de la ligne sauterait d'une fiche à l'autre. */
.product-brand-row {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  margin-bottom: .15rem;
}
.product-brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 28px;
  padding: 2px 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  flex: none;
}
.product-brand-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.product-brand-row:hover .product-brand { text-decoration: underline; }

/* ── « Faire une offre » ───────────────────────────────────────────────────
   Aligné sur le bord gauche des boutons d'action, dont il est une variante
   discrète. Il était auparavant sous la ligne de livraison et décalé vers la
   droite par le padding du bouton fantôme. */
.product-make-offer-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: .6rem 0 .9rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  color: #4b5563;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.product-make-offer-link:hover { color: #d9392d; }

/* ══ FICHE PRODUIT ════════════════════════════════════════════════════════
   La colonne d'information était une pile plate : marque, titre, référence,
   état, prix, garantie, description, boutons, livraison, réassurance, tous au
   même niveau visuel. Rien ne signalait où se prend la décision d'achat.
   La page est réorganisée en trois temps : IDENTIFIER (marque, titre,
   catégorie), COMPRENDRE (description courte), ACHETER (encart dédié). */

/* La galerie prend un peu plus de place : sur du matériel d'occasion, la photo
   est l'argument principal, c'est elle qui montre l'état réel. */
.product-layout { grid-template-columns: 1.15fr 1fr; }

/* ── Identification ────────────────────────────────────────────────────── */
.product-brand-row { margin-bottom: .5rem; }
/* Logo nettement agrandi : à 72×28 il était décoratif. À cette taille il
   devient un repère de marque immédiat, ce que cherche un acheteur de hi-fi. */
.product-brand-logo { width: 132px; height: 46px; padding: 4px 10px; border-radius: 8px; }
.product-page .product-title { margin: .2rem 0 .3rem; font-size: 1.75rem; line-height: 1.2; }
.product-meta-line { margin: 0 0 .85rem; font-size: .85rem; color: #6b7280; }
.product-meta-line a { color: #4b5563; }
.product-meta-sep { margin: 0 .35rem; opacity: .5; }
.product-short-desc { margin: 0 0 1.1rem; color: #4b5563; line-height: 1.55; }

/* ── Encart d'achat ────────────────────────────────────────────────────── */
.product-buybox {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 1.1rem 1.25rem 1.15rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.product-buybox .product-price-block {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: .45rem .7rem; margin: 0 0 .2rem;
}
/* L'état passe devant le prix : sur de l'occasion, les deux se lisent ensemble
   et l'état conditionne la lecture du prix. */
.product-buybox .product-price-block .badge { order: -1; align-self: center; }
.product-buybox .product-price { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.product-buybox .product-meta-row,
.product-buybox .product-stock-row { margin: .55rem 0 0; font-size: .875rem; }
.product-buybox .product-actions { margin-top: 1rem; }
.product-buybox .product-make-offer-link { margin: .7rem 0 0; }
.product-buybox .product-ship-note {
  margin: .7rem -1.25rem -1.15rem;
  padding: .7rem 1.25rem;
  border-top: 1px solid #f1f2f4;
  background: #fafbfc;
  border-radius: 0 0 12px 12px;
  font-size: .85rem;
}
.product-reassurance { margin-top: 1.1rem; }

@media (max-width: 768px) {
  .product-layout { grid-template-columns: 1fr; }
  .product-buybox { padding: 1rem; }
  .product-buybox .product-ship-note { margin: .7rem -1rem -1rem; padding: .7rem 1rem; }
}

/* ── En-tête de la page catalogue ──────────────────────────────────────────
   Titre plus une seule ligne de chiffres. Les pastilles de catégorie qui
   l'encombraient faisaient doublon avec la section Catégorie de la barre
   latérale, et leur retour à la ligne produisait un drapeau irrégulier.
   Elles sont désormais en texte suivi en bas de page. */
.page-intro {
  /* MÊMES gabarit et retrait que .products-layout, sinon le titre ne s'aligne
     pas sur la colonne de filtres juste en dessous : mesuré, 1200+16px contre
     1280+32px donnait 24 px de décalage. */
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.25rem 2rem .25rem;
}
.page-intro h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .3rem; }
.page-intro p { margin: 0; color: #6b7280; font-size: .95rem; }
.page-intro .sep { margin: 0 .3rem; opacity: .45; }

@media (max-width: 768px) {
  /* La grille resserre son retrait à 1rem en mobile : l'en-tête doit suivre,
     sinon le titre est décalé de 16 px vers la droite par rapport aux cartes. */
  .page-intro { padding-left: 1rem; padding-right: 1rem; }
}

/* merchant.css */
/* ── Merchant Portal ───────────────────────────────────────────── */

/* Stats grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.stat-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.stat-skeleton {
    height: 88px;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}
.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.stat-icon svg { width: 22px; height: 22px; }
.stat-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f1f38;
    line-height: 1;
}
.stat-label {
    font-size: .8rem;
    color: #6b7280;
    margin-top: .25rem;
}
.mt-6 { margin-top: 1.5rem; }

/* Product form layout */
.form-layout-2col {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.5rem;
    align-items: start;
}
.form-main { min-width: 0; }
.form-sidebar { min-width: 0; }

/* Upload zone */
.upload-zone {
    border: 2px dashed #d1d5db;
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s;
}
.upload-zone:hover { border-color: #d9392d; }

/* Gallery */
.gallery-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.gallery-item {
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-item-del {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,.6);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    padding: 0;
    display: none;
}
.gallery-item:hover .gallery-item-del { display: block; }

/* Table loading */
.table-loading {
    padding: 2rem;
    text-align: center;
    color: #6b7280;
}

/* Dashboard two-panel layout */
.dash-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Dash list (orders + products) */
.dash-list { }
.dash-list-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
    transition: background .15s;
}
.dash-list-row:last-child { border-bottom: none; }
.dash-list-row:hover { background: #f9fafb; }
.dash-list-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .125rem;
}
.dash-list-title {
    font-weight: 600;
    font-size: .875rem;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-list-sub {
    font-size: .75rem;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-list-right {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}
.dash-list-price {
    font-weight: 700;
    font-size: .875rem;
    color: #0f1f38;
    min-width: 60px;
    text-align: right;
}
.dash-list-date {
    font-size: .75rem;
    color: #9ca3af;
    min-width: 80px;
    text-align: right;
}
.dash-empty {
    padding: 2rem;
    text-align: center;
    color: #9ca3af;
    font-size: .9rem;
}
.dash-empty-products {
    padding: 2rem;
    text-align: center;
}
.dash-empty-products p { color: #9ca3af; margin-bottom: 1rem; }

/* Responsive */
@media (max-width: 1100px) {
    .dash-panels { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .form-layout-2col { grid-template-columns: 1fr; }
    .form-sidebar { order: -1; }
}
@media (max-width: 600px) {
    .stats-grid { grid-template-columns: 1fr; }
    .dash-list-date { display: none; }
}

/* ── Message cards ───────────────────────────────────────────────── */
.msg-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: .75rem;
    transition: border-color .15s;
}
.msg-card:hover { border-color: #d1d5db; }
.msg-unread { border-left: 3px solid #d9392d; }
.msg-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    cursor: pointer;
    gap: 1rem;
}
.msg-card-left {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}
.msg-card-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #374151;
    font-size: .75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.msg-unread .msg-card-avatar { background: #d9392d; color: #fff; }
.msg-card-name { font-size: .875rem; font-weight: 600; color: #111827; }
.msg-card-email { font-size: .75rem; color: #6b7280; }
.msg-card-right {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}
.msg-card-product {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    color: #6b7280;
    background: #f3f4f6;
    padding: .2rem .5rem;
    border-radius: 4px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msg-card-date { font-size: .75rem; color: #9ca3af; white-space: nowrap; }
.msg-card-preview {
    padding: 0 1.25rem .75rem;
    font-size: .8125rem;
    color: #6b7280;
    line-height: 1.5;
    cursor: pointer;
}
.msg-card-body {
    border-top: 1px solid #f3f4f6;
    padding: 1.25rem;
}
.msg-card-content {
    font-size: .875rem;
    line-height: 1.7;
    color: #374151;
    margin-bottom: 1rem;
}
.msg-card-meta {
    font-size: .8125rem;
    color: #6b7280;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.msg-card-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
    .msg-card-header { flex-direction: column; align-items: flex-start; }
    .msg-card-right { flex-wrap: wrap; }
    .msg-card-product { max-width: 100%; }
}

/* ── Onboarding marchand (dashboard) — classes onb-* (étaient sans CSS) ──── */
.onb-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
}
.onb-banner-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: #dbeafe; color: #2563eb; border-radius: 10px;
}
.onb-banner-icon svg { width: 22px; height: 22px; }
.onb-banner-text strong { display: block; margin-bottom: 2px; }
.onb-banner-text p { margin: 0; color: var(--text-muted); font-size: .9rem; }

.onb-card { margin-bottom: var(--space-5); }
.onb-welcome { margin-bottom: var(--space-5); }
.onb-title { margin: 0 0 4px; font-size: 1.4rem; font-weight: 700; }
.onb-subtitle { margin: 0; color: var(--text-muted); }

.onb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
@media (max-width: 860px) { .onb-grid { grid-template-columns: 1fr; } }

.onb-section-title { margin: 0 0 var(--space-4); font-size: 1rem; font-weight: 600; }

.onb-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.onb-step { display: flex; align-items: flex-start; gap: var(--space-3); }
.onb-step-mark {
    flex-shrink: 0;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--gray-100); color: var(--gray-500);
    font-size: .8rem; font-weight: 700;
}
.onb-step-mark svg { width: 16px; height: 16px; }
.onb-step.is-done .onb-step-mark { background: #d1fae5; color: #059669; }
.onb-step-body { display: flex; flex-direction: column; }
.onb-step-label { font-weight: 600; color: var(--text); text-decoration: none; }
a.onb-step-label:hover { color: var(--primary); }
.onb-step.is-done .onb-step-label { color: var(--text-muted); text-decoration: line-through; }
.onb-step-sub { font-size: .85rem; color: var(--text-muted); }

.onb-app {
    background: var(--gray-50);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-4);
}
.onb-app-pitch { display: flex; align-items: flex-start; gap: var(--space-4); }
.onb-app-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: #ede9fe; color: #7c3aed; border-radius: 10px;
}
.onb-app-icon svg { width: 22px; height: 22px; }
.onb-app-pitch strong { display: block; margin-bottom: 2px; }
.onb-app-pitch p { margin: 0; color: var(--text-muted); font-size: .9rem; }
.onb-app-dl { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.onb-qr { border-radius: 8px; flex-shrink: 0; }
.onb-app-dl-cta { display: flex; flex-direction: column; gap: var(--space-2); }
.onb-app-dl-hint { font-size: .8rem; color: var(--text-muted); }

/* cart.css */
/* ── Cart & Checkout ───────────────────────────────────────────── */

/* Cart icon in header */
.cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    color: #374151;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.cart-btn:hover { background: #f3f4f6; color: #d9392d; }
.cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    background: #d9392d;
    color: #fff;
    border-radius: 9px;
    font-size: .65rem;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* Cart layout */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2rem;
    align-items: start;
}
.cart-loading {
    grid-column: 1/-1;
    padding: 3rem;
    text-align: center;
    color: #6b7280;
}

/* Empty state */
.cart-empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 4rem 2rem;
}
.cart-empty-icon {
    width: 96px;
    height: 96px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: #9ca3af;
}
.cart-empty h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: .5rem; }
.cart-empty p  { color: #6b7280; margin-bottom: 1.5rem; }

/* Items column */
.cart-items-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.cart-items-header h2 { font-size: 1.1rem; font-weight: 700; }

/* Cart item */
.cart-item {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid #e5e7eb;
    align-items: center;
}
.cart-item:last-child { border-bottom: none; }
.cart-item-img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
}
.cart-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-title {
    font-weight: 600;
    color: #0f1f38;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cart-item-title:hover { color: #d9392d; }
.cart-item-price { font-size: .85rem; color: #6b7280; margin-top: .25rem; }

/* Cart item actions */
.cart-item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    flex-shrink: 0;
}
.qty-control {
    display: flex;
    align-items: center;
    gap: .25rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
}
.qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.qty-btn:hover { background: #f3f4f6; }
.qty-val {
    min-width: 28px;
    text-align: center;
    font-weight: 600;
    font-size: .9rem;
}
.cart-item-total {
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.cart-item-remove {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 0;
    line-height: 1;
    transition: color .15s;
}
.cart-item-remove:hover { color: #dc2626; }

/* Summary */
.cart-summary {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1.5rem;
    position: sticky;
    top: 80px;
}
.cart-summary h3 { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }
.cart-summary-row {
    display: flex;
    justify-content: space-between;
    padding: .5rem 0;
    font-size: .9rem;
    border-bottom: 1px solid #f3f4f6;
}
.cart-summary-row:last-of-type { border-bottom: none; }
.cart-summary-discount { color: #16a34a; }
.cart-summary-total {
    font-weight: 700;
    font-size: 1.05rem;
    color: #0f1f38;
}
.cart-promo { margin-top: 1rem; }
.cart-promo-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: .5rem .75rem;
    font-size: .875rem;
    color: #166534;
}
.btn-full { width: 100%; }

/* ── Cart slide-in drawer ──────────────────────────────────────── */

.cart-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(2px);
    z-index: 900;
    animation: fadeIn .15s ease;
}
.cart-drawer-overlay.hidden { display: none; }

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 92vw;
    height: 100vh;
    background: #fff;
    box-shadow: -8px 0 40px rgba(0,0,0,.15);
    z-index: 910;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.cart-drawer.open { transform: translateX(0); }

.cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.cart-drawer-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}
.cart-drawer-close {
    width: 32px; height: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 8px;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: background .15s, color .15s;
}
.cart-drawer-close:hover { background: #e5e7eb; color: #111; }

.cart-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}

.cart-drawer-footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
    background: #fafafa;
}

/* Added confirmation */
.cart-drawer-added {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    margin-bottom: 1rem;
    color: #15803d;
    font-weight: 600;
    font-size: .9rem;
}
.cart-drawer-added-check {
    width: 28px; height: 28px;
    background: #16a34a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

/* Featured added product */
.cart-drawer-product {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding-bottom: 1rem;
}
.cart-drawer-product img {
    width: 80px; height: 80px;
    object-fit: contain;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: .25rem;
    background: #fff;
    flex-shrink: 0;
}
.cart-drawer-product-info { flex: 1; min-width: 0; }
.cart-drawer-product-title {
    font-weight: 600;
    font-size: .9rem;
    color: #111;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cart-drawer-product-title:hover { color: #d9392d; }
.cart-drawer-product-price { font-weight: 700; font-size: .95rem; margin-top: .25rem; }
.cart-drawer-product-qty { font-size: .8rem; color: #6b7280; margin-top: .15rem; }

/* Divider */
.cart-drawer-divider {
    height: 1px;
    background: #e5e7eb;
    margin: .75rem 0;
}
.cart-drawer-others-title {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    margin-bottom: .75rem;
}

/* Other items in cart */
.cart-drawer-item {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: .5rem 0;
}
.cart-drawer-item img {
    width: 48px; height: 48px;
    object-fit: contain;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: .15rem;
    background: #fff;
    flex-shrink: 0;
}
.cart-drawer-item-info { flex: 1; min-width: 0; }
.cart-drawer-item-title {
    font-size: .8rem;
    font-weight: 500;
    color: #374151;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cart-drawer-item-price { font-size: .8rem; font-weight: 600; color: #111; }

/* Footer */
.cart-drawer-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1rem;
}
.cart-drawer-total strong { font-size: 1.15rem; }
.cart-drawer-checkout {
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
}
.cart-drawer-continue {
    margin-top: .5rem;
    justify-content: center;
    font-size: .875rem;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Responsive */
@media (max-width: 768px) {
    .cart-layout { grid-template-columns: 1fr; }
    .cart-item { flex-wrap: wrap; }
    .cart-item-actions { flex-direction: row; align-items: center; flex: 1; justify-content: space-between; }
}

/* overrides.css */
/* ── Overrides (must come after all imports) ─────────────────── */
.modal form { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
.modal-body .form-fieldset:last-of-type { margin-bottom:0; }