/* Desktop actions and tablet trust placement; smartphone controls stay unchanged. */
@media (min-width: 992px) {
    #header .gt-desktop-header {
        /* Bootstrap visibility utilities use !important at desktop sizes. */
        display: flex !important;
        align-items: center;
        gap: 28px;
        min-height: 88px;
        margin: 0;
        padding: 12px 0;
    }
    #header .gt-desktop-header::before,
    #header .gt-desktop-header::after { display: none; }
    #header .gt-desktop-header > div {
        float: none;
        width: auto;
        margin: 0;
        padding: 0;
        min-width: 0;
    }
    #header .gt-desktop-header .logo-wrapper { flex: 0 0 180px; }
    #header .gt-desktop-header .logo { display: block; width: 180px; padding: 0; }
    #header .gt-desktop-header .logo img { display: block; width: 180px; height: auto; }
    #header .gt-desktop-header .gt-header-search-column { flex: 1 1 auto; }
    body[data-controller="Home"][data-action="Index"] #header .gt-desktop-header .search,
    #header .gt-desktop-header .search { width: 100%; margin: 0; padding: 0; }
    /* The search overlay title must stay hidden while its async styles load. */
    #header .gt-desktop-header .search .gt-search-titlebar { display: none; }
    /* Keep the existing search colors stable before async theme styles arrive. */
    #header .gt-desktop-header .search button[type="submit"]#autocompleteSearchLink {
        background: #ffa322 !important;
        color: #fff !important;
        border-radius: 0 10px 10px 0;
    }
    #header .gt-desktop-header .search button[type="submit"]#autocompleteSearchLink:hover {
        background: #e68a0c !important;
    }
    #header .gt-desktop-header .gt-desktop-seals { flex: 0 0 138px; }
    /* Reserve both seal slots before async theme CSS or the external badge loads. */
    #header .gt-desktop-header #gt-trust-header-slot { flex: 0 0 64px; width: 64px; height: 64px; }
    #header .gt-desktop-header .seal-container {
        height: 64px;
        flex-wrap: nowrap;
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 0;
    }
    #header .gt-desktop-header .seal.gt-header-other-seal {
        margin: 0;
        padding: 0;
        float: none;
        overflow: visible;
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: none;
    }
    #header .gt-desktop-header .seal.gt-header-other-seal li { margin: 0; }
    #header .gt-desktop-header .seal.gt-header-other-seal li a.seher_gut {
        width: 58px;
        height: 58px;
        background-size: 58px 58px;
        background-position: center;
        background-repeat: no-repeat;
    }
    #header .gt-desktop-header .gt-desktop-actions {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        gap: 10px;
    }
    #header .gt-desktop-header .login-leaflet { display: flex; align-items: center; gap: 10px; }
    #header .gt-desktop-header #customer-loginbox { float: none; margin: 0; padding: 0; }
    #header .gt-desktop-header #customer-loginbox > .user-konto,
    #header .gt-desktop-header .login-leaflet > .leaflet-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        min-height: 48px;
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 10px;
        color: #303030;
        background: transparent;
        line-height: 1;
        text-decoration: none;
        transition: color .2s, background-color .2s;
    }
    #header .gt-desktop-header .login-leaflet #customer-loginbox > a.user-konto .user-name { display: flex; align-items: center; color: inherit; line-height: 1; }
    #header .gt-desktop-header #customer-loginbox .user-name > .fa,
    #header .gt-desktop-header .login-leaflet > .leaflet-button > .fa { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 26px; margin: 0; line-height: 1; color: inherit; }
    #header .gt-desktop-header .gt-header-action-label,
    #header .gt-desktop-header #customer-loginbox > .caret,
    #header .gt-desktop-header .minibasket-label { display: none; }

    #header .gt-desktop-header .basket { margin: 0; padding: 0; }
    #header .gt-desktop-header .gt-desktop-cart-trigger-wrap { float: none !important; display: block; }
    #header .gt-desktop-header .basket .shopping-btn {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        min-width: 48px;
        height: 48px;
        padding: 0;
        border-radius: 10px;
        background: transparent;
        color: #303030;
        text-decoration: none;
        transition: color .2s, background-color .2s;
    }

    #header .gt-desktop-header .basket .shopping-btn .basket-btn {
        position: static;
        float: none;
        margin: 0;
        color: inherit;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        font-size: 26px;
        line-height: 1;
    }
    #header .gt-desktop-header .basket .shopping-btn .badge {
        position: absolute;
        top: 0;
        right: 0;
        left: auto;
        min-width: 20px;
        height: 20px;
        padding: 3px;
        border: 0;
        border-radius: 12px;
        background: #468c00;
        color: #fff;
        font-family: Roboto, sans-serif;
        font-size: 11px;
        font-style: normal;
        font-weight: 700;
        line-height: 14px;
    }
    #header .gt-desktop-header #customer-loginbox > .user-konto:focus-visible,
    #header .gt-desktop-header .leaflet-button:focus-visible,
    #header .gt-desktop-header .shopping-btn:focus-visible {
        outline: 2px solid #68563f;
        outline-offset: 3px;
    }
    /* Shared warm brown hover/focus for all three actions. */
    #header .gt-desktop-header #customer-loginbox > .user-konto:hover,
    #header .gt-desktop-header .login-leaflet > .leaflet-button:hover,
    #header .gt-desktop-header .basket .shopping-btn:hover,
    #header .gt-desktop-header #customer-loginbox > .user-konto:focus-visible,
    #header .gt-desktop-header .login-leaflet > .leaflet-button:focus-visible,
    #header .gt-desktop-header .basket .shopping-btn:focus-visible {
        color: #303030;
        background: rgba(104, 86, 63, .12);
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    #header .gt-desktop-header { gap: 20px; }
    #header .gt-desktop-header .seal-container { height: 52px; }
    #header .gt-desktop-header .gt-desktop-seals { display: block !important; flex-basis: 114px; }
    #header .gt-desktop-header #gt-trust-header-slot { flex-basis: 52px; width: 52px; height: 52px; }
    #header .gt-desktop-header #trustbadgeCustomContainer { transform: scale(.8125); transform-origin: top left; }
    #header .gt-desktop-header .seal.gt-header-other-seal { flex-basis: 52px; width: 52px; height: 52px; }
    #header .gt-desktop-header .seal.gt-header-other-seal li a.seher_gut { width: 47.125px; height: 47.125px; background-size: 47.125px 47.125px; }
    .gt-trust-footer { display: none; }
}
/* Empty tablet slot occupies no space outside tablet portrait. */
#gt-trust-tablet-header-slot { display: none; }
@media (min-width: 768px) and (max-width: 991.98px) {
    #header .gt-mobile-header { grid-template-columns: 96px minmax(0, 1fr) 140px 48px minmax(0, 1fr) 96px; gap: 12px; }
    #header .gt-mobile-header > .gt-mobile-tools:first-child { grid-column: 1; }
    #header .gt-mobile-header > .gt-mobile-logo { grid-column: 3; }
    #header .gt-mobile-header > .gt-mobile-tools:last-child { grid-column: 6; }
    #header #gt-trust-tablet-header-slot { grid-column: 4; display: block; width: 48px; height: 48px; }
    #header #gt-trust-tablet-header-slot #trustbadgeCustomContainer { transform: scale(.75); transform-origin: top left; }
    .gt-trust-footer { display: none; }
}


/* The real Trustbadge image is 58px; center its live button in a 64px sizing box.
   Absolute positioning keeps the 64px box anchored correctly when scaled to 52/48px. */
@media (min-width: 768px) {
    #header #gt-trust-header-slot,
    #header #gt-trust-tablet-header-slot { position: relative; }
    #header #trustbadgeCustomContainer {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        padding: 0;
        margin: 0;
        line-height: 0;
    }
}

/* Compact desktop header: the existing green navigation opens on demand. */
.gt-sticky-menu-toggle { display: none; }
.gt-sticky-placeholder { height: 0; overflow-anchor: none; }
@media (min-width: 992px) {
    #header.gt-desktop-sticky {
        position: fixed; top: 0; left: 0; right: 0; width: 100%;
        height: 64px; min-height: 64px; margin: 0; padding: 0; border: 0;
        z-index: 1100; box-shadow: 0 2px 8px rgba(68, 58, 43, .18);
    }
    #header.gt-desktop-sticky > :not(.container) { display: none !important; }
    #header.gt-desktop-sticky .gt-desktop-header {
        height: 64px; min-height: 64px; padding: 8px 0; gap: 28px;
    }
    #header.gt-desktop-sticky .gt-desktop-seals { display: block !important; visibility: hidden; pointer-events: none; }
    #header.gt-desktop-sticky #gt-trust-header-slot { visibility: hidden; pointer-events: none; }
    #header.gt-desktop-sticky .logo-wrapper { flex-basis: 120px; }
    #header.gt-desktop-sticky .logo,
    #header.gt-desktop-sticky .logo img { width: 120px; }
    #header.gt-desktop-sticky .gt-sticky-menu-toggle {
        display: inline-flex; align-items: center; justify-content: center; gap: 9px;
        flex: 0 0 88px; height: 48px; margin: 0 -16px 0 0; padding: 0 8px;
        border: 0; border-radius: 10px; background: transparent; color: #303030;
        font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
    }
    #header.gt-desktop-sticky .gt-sticky-menu-toggle .fa { font-size: 26px; }
    #header.gt-desktop-sticky .gt-sticky-menu-toggle:hover,
    #header.gt-desktop-sticky .gt-sticky-menu-toggle[aria-expanded="true"],
    #header.gt-desktop-sticky .gt-sticky-menu-toggle:focus-visible { background: rgba(104, 86, 63, .12); }
    #header.gt-desktop-sticky .gt-sticky-menu-toggle:focus-visible { outline: 2px solid #68563f; outline-offset: 2px; }
    #gt-desktop-navigation.gt-sticky-navigation {
        display: none !important; position: fixed; top: 64px; left: 0; right: 0;
        margin: 0 !important; z-index: 1099; box-shadow: 0 5px 8px rgba(68, 58, 43, .18);
        overflow: visible;
    }
    #gt-desktop-navigation.gt-sticky-navigation.gt-sticky-menu-open { display: block !important; }
    /* Keep dropdowns visible below the green bar and scroll long category lists. */
    #gt-desktop-navigation.gt-sticky-navigation .navbar-nav > li { position: static; }
    #gt-desktop-navigation.gt-sticky-navigation .dropdown-menu {
        max-height: calc(100vh - 128px); overflow-y: auto; overscroll-behavior: contain;
    }
    #gt-desktop-navigation.gt-sticky-navigation .dropdown:focus-within > .dropdown-menu,
    #gt-desktop-navigation.gt-sticky-navigation .gt-sticky-submenu-open > .dropdown-menu { display: block; visibility: visible; opacity: 1; }
}
@media print {
    #header.gt-desktop-sticky, #gt-desktop-navigation.gt-sticky-navigation,
    .gt-sticky-placeholder { display: none !important; }
}

@media (min-width: 992px) {
    #header.gt-desktop-sticky #autocompleteSearchLink .fa { font-size: 22px; }
}

/* Shared clearance for other desktop sticky elements, including form anchor targets. */
@media (min-width: 992px) {
    #header.gt-desktop-sticky { animation: gt-desktop-header-enter .38s cubic-bezier(.22, .61, .36, 1); }
    body .gt-form-nav { top: calc(24px + var(--gt-desktop-header-space, 0px)); }
    #content .gt-standard-form .gt-flow-section { scroll-margin-top: calc(24px + var(--gt-desktop-anchor-space, 64px)); }
    #content #article-details .gt-product-purchase { scroll-margin-top: calc(16px + var(--gt-desktop-anchor-space, 64px)); }
}
@keyframes gt-desktop-header-enter {
    from { transform: translateY(-100%); opacity: .65; }
    to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    #header.gt-desktop-sticky { animation: none; }
}

/* Preserve the normal header container, including the shop scrollbar gutter. */
@media (min-width: 992px) {
    #header.gt-desktop-sticky > .container,
    #gt-desktop-navigation.gt-sticky-navigation > .container {
        width: var(--gt-sticky-container-width);
        margin-left: var(--gt-sticky-container-left);
        margin-right: 0;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    #header.gt-desktop-sticky .gt-desktop-header { gap: 20px; }
    #header.gt-desktop-sticky .gt-sticky-menu-toggle { margin-right: -8px; }
}
/* External badge children may explicitly restore visibility. Remove their layout subtree
   in sticky mode while the fixed-width seal column keeps the search edge aligned. */
@media (min-width: 992px) {
    #header.gt-desktop-sticky .gt-desktop-seals > .seal-container,
    #header.gt-desktop-sticky #trustbadgeCustomContainer { display: none !important; }
}
