/* Scoped to the Devices menu; existing Accessories and page menus keep their styling. */
.header .dm-device-item { position: relative; }
.header .dm-devices { text-align: left; }
.header .dm-devices summary { list-style: none; cursor: pointer; }
.header .dm-devices summary::-webkit-details-marker { display: none; }
.header .dm-devices summary:focus-visible,
.header .dm-devices a:focus-visible { outline: 2px solid #08bbb7; outline-offset: -3px; }
.header .dm-devices-trigger { display: flex; align-items: center; gap: 14px; padding: 8px 0 7px; color: #fff; font: inherit; font-size: 16px; font-weight: 500; line-height: 25px; }
.header .dm-chevron { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: -4px 3px 0 0; }
.header .dm-devices[open] > summary .dm-chevron { transform: rotate(225deg); margin-top: 4px; }
.header .dm-device-panel { position: absolute; top: 100%; left: 0; z-index: 100; width: 270px; background: #fff; color: #2b435d; box-shadow: 0 5px 15px #0002; border: 1px solid #e1e6ec; }
.header .dm-category-trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-size: 16px; line-height: 24px; font-weight: 400; }
.header .dm-category-trigger .dm-chevron { transform: rotate(-45deg); margin-top: 0; }
.header .dm-device-group[open] > summary,
.header .dm-category-trigger:hover { background: #edf3f8; color: #233e57; }
.header .dm-model-panel { position: absolute; top: -1px; left: 100%; width: 280px; padding: 16px 0 10px; background: #fff; color: #2b435d; border: 1px solid #e1e6ec; box-shadow: 4px 5px 15px #0002; }
.header .dm-model-heading { padding: 0 22px 10px; margin: 0; font-size: 16px; font-weight: 600; }
.header .dm-devices ul.dm-model-list { margin: 0; padding: 0; list-style: none; min-width: 0; width: 100%; float: none; }
.header .dm-devices .dm-model-list > li { float: none; display: block; width: 100%; padding: 0; margin: 0; border: 0; }
.header .dm-devices .dm-model-list a { display: block; color: #2b435d; font-size: 15px; line-height: 22px; padding: 10px 22px; text-decoration: none; text-transform: none; overflow-wrap: anywhere; }
.header .dm-devices .dm-model-list a:hover { color: #233e57; background: #edf3f8; }
.header .dm-devices .dm-model-list .dm-shop-all { margin-top: 8px; border-top: 1px solid #e1e6ec; }
.header .dm-devices .dm-shop-all a { font-weight: 600; padding-top: 14px; padding-bottom: 14px; }
/* The existing mobile drawer switches on below 1200px. */
.header .dm-accessory-link { display: block; padding: 18px 22px; color: #2b435d; font-size: 16px; line-height: 24px; text-decoration: none; text-transform: capitalize; }
.header .dm-accessory-link:hover { background: #edf3f8; color: #233e57; }
.header .dm-accessory-shop-all { border-top: 1px solid #e1e6ec; font-weight: 600; text-transform: none; }
@media (min-width: 1200px) {
    #menu .navPages { width: 100%; margin-left: auto; margin-right: auto; }
    #menu .navPages > .navPages-list:not(.navPages-list--user) { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 100%; min-width: 0; float: none; margin: 0; padding: 0; }
    #menu .navPages > .navPages-list > .navPages-item { float: none; }
    #menu .navPages > .navPages-list > .dm-legacy-accessories { display: none; }
}
@media (max-width: 1199px) {
    #menu_responsive .navPages-list > .dm-desktop-accessories { display: none; }
    #menu_responsive .dm-devices-trigger { position: relative; justify-content: space-between; min-height: 30px; padding: 3px 0; text-transform: uppercase; letter-spacing: 1px; font-family: 'Poppins', sans-serif; font-size: 16px; line-height: 22px; font-weight: 500; }
    #menu_responsive .dm-device-panel { position: static; width: 100%; box-shadow: none; border: 0; background: transparent; color: #fff; }
    #menu_responsive .dm-category-trigger { padding: 9px 0 9px 10px; min-height: 44px; gap: 10px; color: #fff; background: transparent; font-family: 'Poppins', sans-serif; font-size: 16px; line-height: 22px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }
    #menu_responsive .dm-device-group[open] > summary,
    #menu_responsive .dm-category-trigger:hover { background: transparent; color: #fff; }
    #menu_responsive .dm-devices summary .dm-chevron { position: relative; display: inline-block; width: 30px; height: 30px; flex: 0 0 30px; border: 0; margin: 0; transform: none; }
    #menu_responsive .dm-devices summary .dm-chevron::before,
    #menu_responsive .dm-devices summary .dm-chevron::after { content: ''; position: absolute; inset: 0; margin: auto; background: currentColor; }
    #menu_responsive .dm-devices summary .dm-chevron::before { width: 2px; height: 14px; }
    #menu_responsive .dm-devices summary .dm-chevron::after { width: 14px; height: 2px; }
    #menu_responsive .dm-devices summary[aria-expanded="true"] .dm-chevron::before { display: none; }
    #menu_responsive .dm-devices:not(.dm-js)[open] > summary .dm-chevron::before,
    #menu_responsive .dm-devices:not(.dm-js) details[open] > summary .dm-chevron::before { display: none; }
    #menu_responsive .dm-model-panel { position: static; width: 100%; border: 0; box-shadow: none; padding: 0; background: transparent; color: #fff; }
    /* Override the legacy drawer's floated ul/li rules so the panel encloses every link. */
    #menu_responsive .dm-devices ul.dm-model-list { display: flow-root; float: none; width: 100%; min-width: 0; padding: 0; margin: 0; }
    #menu_responsive .dm-devices .dm-model-list > li { float: none; width: 100%; padding: 0; margin: 0; }
    #menu_responsive .dm-devices .dm-model-list > li.dm-shop-all { margin-top: 4px; border: 0; }
    #menu_responsive .dm-model-heading { display: none; }
    #menu_responsive .dm-devices .dm-model-list a { min-height: 44px; padding: 11px 8px 11px 20px; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 500; line-height: 22px; letter-spacing: 1px; text-transform: uppercase; color: #fff; background: transparent; }
    #menu_responsive .dm-devices .dm-model-list a:hover { color: #08bbb7; background: transparent; }
}