/* Desktop storefront navigation. Mobile keeps its existing independent layout. */
.ts-desktop-icon, .ts-desktop-label, .ts-desktop-service-phone { display: none; }
@media (min-width: 769px) { .ts-desktop-service-phone { display: inline; } }
@media (min-width: 769px) {
    .top-bar { background: #f3f8f5; color: #244536; padding: 9px 0; border-bottom: 1px solid #e5eee8; }
    .top-bar .top-bar-inner { max-width: 1500px; padding: 0 28px; flex-wrap: nowrap; gap: 20px; box-sizing: border-box; }
    .top-bar .left-side { margin-left: 0; flex-wrap: nowrap; gap: 25px; }
    .top-bar a, .top-bar .usp-top-text { color: #335342 !important; font-size: 12px; white-space: nowrap; }
    .top-bar .right-side { gap: 12px; }
    .top-bar .right-side > span { opacity: .25; }
    .top-bar .translate-fixed { display: none; }
    /* Keep the language selector available beside the service links. */
    .top-bar:has(.goog-te-combo) .top-bar-inner { padding-right: 150px; }
    .top-bar:has(.goog-te-combo) .translate-fixed { display: block; left: auto; right: 20px; }
    .top-bar #google_translate_element select { background: #fff; color: #335342; border: 1px solid #d8e5dc; border-radius: 5px; font-size: 11px; padding: 3px; max-width: 125px; }
    header.header { box-shadow: 0 2px 8px #123a2110; border-bottom: 1px solid #e3ebe6; }
    header.header .header-n.wrap { max-width: 1500px; margin: auto; padding: 24px 28px 20px; box-sizing: border-box; }
    header.header .header-n-flex { display: grid; grid-template-columns: 225px minmax(0, 1fr) 196px; gap: 28px; align-items: center; padding: 0; }
    header.header .header-n-flex .logo { width: auto; padding: 0; }
    header.header .logo > a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
    header.header .logo img { width: 48px; height: 48px; object-fit: contain; }
    header.header .header-mobile-wordmark { display: inline; font-size: 23px; letter-spacing: -.9px; font-weight: 750; color: #009b5c; white-space: nowrap; }
    header.header .header-n-flex .search-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; width: auto; flex: initial; margin: 0; }
    header.header .webshopSearch { display: flex; width: 100%; margin: 0; padding: 0; position: relative; border: 1px solid #b9d8c6; border-radius: 9px; background: #f9fcfa; min-width: 0; height: 50px; box-sizing: border-box; }
    header.header .webshopSearch:focus-within { border-color: #008b51; box-shadow: 0 0 0 3px #00a56316; }
    header.header .webshopSearch input.search-text { flex: 1; width: 0; min-width: 0; height: 48px; border: 0; outline: 0; box-shadow: none; background: transparent; font-size: 14px; font-style: normal; font-weight: 400; padding: 0 16px; border-radius: 9px 0 0 9px; }
    header.header .webshopSearch input::placeholder { color: #6c7972; font-style: normal !important; font-weight: 400 !important; }
    header.header .webshopSearch .search-btn { position: static; flex: 0 0 auto; width: auto; height: 50px; margin: -1px -1px -1px 0; padding: 0 20px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 0 9px 9px 0; background: #009e60; color: white; font-size: 14px; font-weight: 600; }
    header.header .webshopSearch .search-btn:hover { background: #007e4b; }
    header.header .webshopSearch > .clear { display: none; }
    header.header #webshopSearchResults { top: calc(100% + 8px); border-radius: 9px; overflow: hidden; box-shadow: 0 12px 35px #16382420; }
    header.header .search-bar .rating { display: grid; grid-template-columns: auto auto; gap: 2px 7px; margin: 0; padding: 0; font-size: 13px; line-height: 1.4; align-items: center; }
    header.header .rating .stars { grid-column: 1 / -1; font-size: 15px; letter-spacing: 1px; }
    header.header .rating .number { font-weight: 700; font-size: 14px; color: #213b2d; }
    header.header .rating .rating-label { font-size: 12px; font-weight: 500; color: #52665b; }
    header.header .header-n-flex .actions { width: auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; }
    header.header .actions .header-phone, header.header .actions .header-whatsapp { display: none; }
    header.header .actions .account-menu-wrapper, header.header .actions > .shoppingcart { position: relative; width: 94px; margin: 0; padding: 0; }
    header.header .actions .account-icon, header.header .actions .shopping-cart-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; top: auto; width: 94px; height: 60px; border: 0; border-radius: 8px; background: transparent; color: #173d2b; gap: 6px; text-decoration: none; box-sizing: border-box; padding: 4px; }
    header.header .actions .account-icon:hover, header.header .actions .shopping-cart-btn:hover { background: #f0f8f3; color: #00864e; }
    header.header .actions .account-icon > .fa, header.header .shopping-cart-btn > .fa { display: none; }
    header.header .ts-desktop-icon { display: block; width: 27px; height: 27px; stroke-width: 1.8; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
    header.header .ts-desktop-label { display: block; font-size: 12px; line-height: 1.2; font-weight: 500; white-space: nowrap; }
    header.header .shopping-cart-btn .amount { position: absolute; top: -1px; right: 20px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 12px; background: #009c5b; border: 2px solid #fff; color: #fff; font-size: 10px; line-height: 18px; text-align: center; box-sizing: content-box; }
    header.header .account-dropdown { right: 0; top: 100%; left: auto; min-width: 205px; border: 1px solid #e3ebe6; border-radius: 10px; box-shadow: 0 12px 30px #16382418; padding: 8px; }
    header.header .account-dropdown a { color: #244536; border-radius: 6px; font-size: 14px; padding: 12px; }
    header.header .account-menu-wrapper:focus-within .account-dropdown { display: block; }
    header.header a:focus-visible, header.header button:focus-visible { outline: 2px solid #008b51; outline-offset: 3px; }
    header.header .mega-menu { background: #009e60; border-top: 1px solid #009158; }
    header.header .mega-menu > .wrap { max-width: 1500px; padding: 0 28px; box-sizing: border-box; }
    header.header .mega-menu .desktop-header { gap: 12px; align-items: center; }
    header.header .mega-menu .desktop-header > li > a { color: #fff; padding: 18px 4px; font-size: 18px; font-weight: 550; line-height: 1.3; white-space: nowrap; }
    header.header .mega-menu .desktop-header > li > a.open-mega-menu[aria-controls] { padding-right: 20px; }
    header.header .mega-menu .desktop-header .open-mega-menu[aria-controls]::before { content: ''; position: absolute; right: 5px; top: 22px; width: 6px; height: 6px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
    header.header .mega-menu .desktop-header .open-mega-menu[aria-controls].active::before { transform: translateY(3px) rotate(225deg); }
    header.header .mega-menu .desktop-header > li > a:hover, header.header .mega-menu .desktop-header > li > a.active { color: #fff; background: #008951; }
    header.header .mega-menu .desktop-header > li > a:focus-visible { outline-color: #fff; outline-offset: -4px; }
    header.header .mega-menu.menu-pinned .desktop-header > li > a.active::after, header.header .mega-menu .desktop-header > li > a.active::after { content: ''; position: absolute; top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 3px; background: #fff; border-radius: 3px 3px 0 0; box-shadow: none; transform: none; clip-path: none; }
    header.header .mega-menu .dropdown-container { width: calc(100% - 56px); max-width: 1444px; border: 1px solid #e1ebe5; border-top: 0; border-radius: 0 0 14px 14px; max-height: calc(100vh - 205px); box-shadow: 0 18px 35px #173b251c; }
    header.header .mega-menu .dropdown-container > .wrap { padding: 0 26px 26px; }
    header.header :is(.list-menu, .default-menu) > .header { background: #f7faf8; margin: 0 -26px 8px; padding: 10px 26px; border-bottom: 1px solid #e2ebe6; }
    header.header :is(.list-menu, .default-menu) > .header ul { border: 0; gap: 6px; flex-wrap: wrap; }
    header.header :is(.list-menu, .default-menu) > .header ul a { font-size: 14px; padding: 11px 18px; border-radius: 7px; font-weight: 600; color: #385242; }
    header.header :is(.list-menu, .default-menu) > .header ul a:hover, header.header :is(.list-menu, .default-menu) > .header ul a.active { background: #e0f1e7; color: #007645; }
    header.header :is(.list-menu, .default-menu) > .header ul a.active::after { display: none; }
    header.header .list-menu .pages-list .grid-five { gap: 28px 32px; margin: 0; padding: 15px 0 0; max-height: none; }
    header.header .list-menu .pages-grid:not(:has(> .general-links a)) > .grid-five { width: 100%; flex: 0 0 100%; }
    header.header .list-menu .general-links:not(:has(a)) { display: none; }
    /* Small brand catalogues fill a row instead of inheriting Apple's paired rows. */
    header.header .list-menu .pages-list .grid-five:not(:has(> ul:nth-child(5))) {
        grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
        grid-auto-flow: row;
        align-items: start;
    }
    header.header .list-menu .pages-list .grid-five:not(:has(> ul:nth-child(5))) > ul { grid-row: auto; min-width: 0; }
    /* A lone series can use the full panel for its models, including future additions. */
    header.header .list-menu .pages-list .grid-five:has(> ul:only-child) { display: block; }
    header.header .list-menu .pages-list .grid-five > ul:only-child {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
        gap: 4px 24px;
        align-items: start;
    }
    header.header .list-menu .pages-list .grid-five > ul:only-child > li:first-child,
    header.header .list-menu .pages-list .grid-five > ul:only-child > .toggle-list { grid-column: 1 / -1; }
    header.header .list-menu .pages-list ul { margin-top: 0; }
    header.header .list-menu .pages-list ul a { font-size: 14px; line-height: 1.5; padding: 6px 0; color: #506157; }
    header.header .list-menu .pages-list ul li:first-child a { color: #1d3c2a; font-size: 14px; margin-bottom: 5px; font-weight: 700; }
    header.header .list-menu .pages-list ul a:hover { color: #00884f; text-decoration: underline; text-underline-offset: 3px; }
    header.header .list-menu .pages-list .toggle-list { color: #00834d; font-size: 13px; padding-top: 6px; font-weight: 600; cursor: pointer; }
    header.header .mega-menu .isnew::after { display: inline-block; background: #e0f3e8; color: #007646; font-size: 10px; padding: 3px 6px; line-height: 1.2; top: -1px; border-radius: 4px; }
    header.header .divider-menu { padding-top: 22px; }
    header.header .divider-menu > div > div { font-size: 12px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: #6f8176; padding: 10px 14px; }
    header.header .divider-menu ul a { font-size: 14px; padding: 10px 14px; border-radius: 6px; color: #385242; }
    header.header .divider-menu > div { padding-right: 15px; box-sizing: border-box; }
    header.header .divider-menu .menu-pages-list { padding-left: 20px; }
    header.header .default-menu > .header { margin-bottom: -26px; }
    /* Divider menus (repairs and trade-in) share the cases menu palette. */
    header.header .mega-menu .divider-menu {
        padding: 0 26px;
        margin: 0 -26px;
        width: calc(100% + 52px);
        box-sizing: border-box;
        background: linear-gradient(to bottom, #f7faf8 0, #f7faf8 56px, #fff 56px);
    }
    header.header .mega-menu .divider-menu > div > div {
        height: 56px;
        padding: 18px 14px;
        box-sizing: border-box;
        border-bottom: 1px solid #e2ebe6;
    }
    header.header .mega-menu .divider-menu .menu-pages-list > .spacer { color: #6f8176; }
    header.header .mega-menu .divider-menu .menu-brands > ul,
    header.header .mega-menu .divider-menu .menu-models > ul { padding-top: 12px; }
    header.header .mega-menu .divider-menu .menu-brands a:hover,
    header.header .mega-menu .divider-menu .menu-models a:hover { background: #f0f8f3; color: #007646; }
    header.header .mega-menu .divider-menu .menu-brands a.active,
    header.header .mega-menu .divider-menu .menu-models a.active {
        background: #e0f1e7;
        color: #007646;
        font-weight: 600;
    }
    header.header .mega-menu .divider-menu .menu-brands a.active::after,
    header.header .mega-menu .divider-menu .menu-models a.active::after { color: #007646; }
    header.header .image-menu { padding-top: 22px; }
    header.header .image-menu .image-grid { gap: 14px; margin: 0; }
    header.header .image-menu .image-grid a { background: #f7faf8; padding: 18px 12px; margin: 0; border: 1px solid #e8eeea; border-radius: 10px; font-size: 14px; }
    header.header .image-menu .image-grid a:hover { border-color: #a6d5bb; background: #edf7f1; }
    @media (max-width: 1200px) {
        header.header .header-n-flex { grid-template-columns: 210px minmax(0, 1fr) 180px; gap: 18px; }
        header.header .header-n-flex .search-bar { grid-template-columns: minmax(0, 1fr); }
        header.header .search-bar .rating { display: none; }
        header.header .mega-menu .desktop-header { gap: 6px; }
        header.header .mega-menu .desktop-header > li > a { font-size: 18px; padding-left: 0; }
        .top-bar .left-side { gap: 14px; }
        .top-bar .right-side { display: none; }
    }
    @media (max-width: 1000px) {
        header.header .header-n-flex { grid-template-columns: 195px minmax(0, 1fr) 140px; gap: 12px; }
        header.header .header-mobile-wordmark { font-size: 20px; }
        header.header .logo img { width: 38px; height: 38px; }
        header.header .actions .account-menu-wrapper, header.header .actions > .shoppingcart, header.header .actions .account-icon, header.header .actions .shopping-cart-btn { width: 68px; }
        header.header .mega-menu .desktop-header { flex-wrap: wrap; justify-content: flex-start; gap: 0 20px; }
        header.header .mega-menu .desktop-header > li > a { padding-top: 13px; padding-bottom: 13px; }
        header.header .mega-menu .desktop-header .open-mega-menu[aria-controls]::before { top: 17px; }
    }
}