/* Menu Styles - Based on Figma Design */
.header {
    background-color: #323232;
    font-family: 'Graphik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    position: relative;
    z-index: 1200;
}

/* Global font settings for menu */
.header *:not(.material-icons-outlined):not(.material-icons):not(.material-symbols-outlined):not(.material-symbols) {
    font-family: 'Graphik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.header button,
.header a,
.header span:not(.material-icons-outlined):not(.material-icons):not(.material-symbols-outlined):not(.material-symbols):not(.menu-badge) {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
}

.top-nav {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.logo {
    flex-shrink: 0;
    cursor: pointer;
}

.logo img {
    height: 1.75rem;
    width: auto;
}

.search-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 48rem;
}

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    color: #828282;
    pointer-events: none;
}

.search-input {
    width: 100%;
    box-sizing: border-box;
    height: 2.5rem;
    background: white;
    border: none;
    border-radius: 0.5rem;
    padding-left: 3rem;
    padding-right: 1rem;
    font-size: 1rem;
    color: #323232;
    outline: none;
    transition: all 0.15s;
}

.search-input:focus {
    box-shadow: 0 0 0 2px #fcde06;
}

.search-input::placeholder {
    color: #828282;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.lang-selector {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border-right: 1px solid #505050;
    padding-right: 1rem;
}

.lang-btn {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 400;
    background: none;
    border: none;
    color: #a0a0a0;
    cursor: pointer;
    transition: color 0.15s;
    font-family: 'Graphik', sans-serif;
}

    .lang-btn:hover {
        color: var(--main-color) !important;
    }

    .lang-btn.active {
        color: var(--main-color) !important;
        font-weight: 600;
    }

.lang-separator {
    color: #505050;
    font-size: 0.875rem;
    font-weight: 400;
}

.user-menu {
    position: relative;
    z-index: 1000;
}

.user-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: none;
    border: none;
    color: white;
    font-size: 0.875rem;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: all 0.15s;
    line-height: 1;
}

.user-btn > * {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

    .user-btn:hover {
        color: var(--main-color) !important;
        background-color: rgba(255, 255, 255, 0.05);
    }

/* Anonymous login CTA — outlined, matches header chrome, turns yellow on hover */
.login-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.375rem 0.875rem;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 0.25rem;
    color: white;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1;
    font-family: 'Graphik', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
}

    .login-btn > * {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
    }

    .login-btn:hover {
        color: var(--main-color);
        border-color: var(--main-color);
    }

    .login-btn:focus-visible {
        outline: 2px solid var(--main-color);
        outline-offset: 2px;
    }

/* Anonymous "request access" CTA — filled accent, draws prospective customers; sits left of login */
.request-access-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.375rem 0.875rem;
    background: var(--main-color);
    border: 1px solid var(--main-color);
    border-radius: 0.25rem;
    color: #1a1a1a;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    font-family: 'Graphik', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
}

    .request-access-btn > * {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
    }

    .request-access-btn:hover {
        filter: brightness(0.92);
    }

    .request-access-btn:focus-visible {
        outline: 2px solid #1a1a1a;
        outline-offset: 2px;
    }

.user-dropdown {
    position: fixed;
    width: 18rem;
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    z-index: 115;
    margin: 0;
    display: none;
}

.user-dropdown.show {
    display: block;
}

.user-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar {
    width: 2.5rem;
    height: 2.5rem;
    /* Without this the avatar is the only shrinkable item in .user-header, so a long email in
       .user-info squeezes its width below 2.5rem while the height stays put - a 42-character
       address rendered it 20.8x40. */
    flex-shrink: 0;
    background: #fcde06;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #323232;
    font-size: 0.875rem;
}

/* Lets the name/email truncate instead of forcing the avatar to absorb the overflow. The
   dropdown is a fixed 18rem with overflow:hidden, so without min-width:0 the text would simply
   be clipped mid-character once the avatar stopped shrinking. */
.user-info {
    min-width: 0;
}

.user-info h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 600;
    color: #323232;
    margin: 0;
    line-height: 1.4;
    font-family: 'Graphik', sans-serif;
}

.user-info p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 400;
    color: #828282;
    margin: 0;
    line-height: 1.4;
    font-family: 'Graphik', sans-serif;
}

.dropdown-section {
    padding: 0.5rem;
}

.dropdown-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #828282;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    padding: 0.5rem 1rem;
    margin: 0;
    font-family: 'Graphik', sans-serif;
    line-height: 1.4;
}

.dropdown-item {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: #323232;
    background: none;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Graphik', sans-serif;
    line-height: 1.4;
}

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

.icon-wrapper {
    width: 2rem;
    height: 2rem;
    background: #f9fafb;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dropdown-item:hover .icon-wrapper {
    background-color: #f3f4f6;
}

.toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s;
}

.toggle-wrapper:hover {
    background-color: #f9fafb;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.switch {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e7eb;
    transition: 0.4s;
    border-radius: 9999px;
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 1.25rem;
    width: 1.25rem;
    left: 0.125rem;
    bottom: 0.125rem;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

.switch input:checked + .switch-slider {
    background-color: #3b82f6;
}

.switch input:checked + .switch-slider:before {
    transform: translateX(1.25rem);
}

.switch input:focus + .switch-slider {
    box-shadow: 0 0 1px #3b82f6;
}

.divider {
    border-top: 1px solid #e5e7eb;
}

.logout-btn {
    color: #dc2626;
}

.logout-btn:hover {
    background-color: #fef2f2;
}

.logout-btn .icon-wrapper {
    background-color: #fef2f2;
}

.logout-btn:hover .icon-wrapper {
    background-color: #fee2e2;
}

.favorite-btn,
.fav-btn,
.cart-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: none;
    border: none;
    color: white;
    font-size: 0.875rem;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: all 0.15s;
}

    .favorite-btn:hover,
    .fav-btn:hover,
    .cart-btn:hover {
        color: var(--main-color) !important;
        background-color: rgba(255, 255, 255, 0.05);
    }

/* Ensure all text inside cart-btn is white, except the cart icon and price */
.cart-btn,
.cart-btn *:not(.shopping-card-icon):not(#totalPrice):not(.menu-badge) {
    color: white !important;
}

.cart-btn .shopping-card-icon,
.cart-btn #totalPrice {
    color: var(--main-color) !important;
}

.cart-btn:hover .shopping-card-icon,
.cart-btn:hover #totalPrice {
    color: var(--main-color) !important;
}

.cart-btn:hover,
.cart-btn:hover *:not(.shopping-card-icon):not(#totalPrice):not(.menu-badge) {
    color: #a0a0a0 !important;
}

/* New menu cart: icon + price, badge for count */
.cart-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.cart-btn .cart-header {
    display: flex;
    align-items: center;
    margin: 0;
    gap: 0.5rem;
}

.cart-btn .shopping-card-icon {
    font-size: 1.5rem !important;
    margin: 0 !important;
}

/* Keep title-icon-wrap visible but hide the '(Xst)' text nodes via font-size trick */
.cart-btn .title-icon-wrap > span {
    font-size: 0 !important;
}

.cart-btn #totalPrice {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

/* Hide the quantity span — shown as badge instead */
.cart-btn #totalQuantity {
    display: none !important;
}

/* Red badge circle — positioned over top-right of cart icon */
.cart-icon-badge-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Unified badge — used by cart, favourites and attest */
.menu-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #dc2626;
    color: white;
    border-radius: 50%;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 !important;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-family: 'Graphik', sans-serif !important;
    box-sizing: border-box;
}

.menu-badge.visible {
    display: flex;
}

/* Count variant — inline pill at the right edge of a dropdown row */
.menu-badge--count {
    position: static;
    margin-left: auto;
    border-radius: 9999px;
    padding: 0 0.3rem !important;
    min-width: 1.2rem;
}

.menu-badge--count.visible {
    display: inline-flex;
}

/* The button badge sits inside a flex row whose line-height shifts text up slightly */
#attest-badge-btn {
    padding-top: 2px !important;
}

/* Subtle variant — grey, for non-critical counts like favourites */
.menu-badge--subtle {
    background: #828282 !important;
}

/* ---- Cart panel: Figma design override ---- */
#cart-panel {
    position: fixed !important;
    width: 500px !important;
    padding: 0 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.15), 0 10px 10px -5px rgba(0,0,0,0.06) !important;
    border: 1px solid #e5e7eb !important;
    overflow: hidden !important;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
}

#cart-panel.closed {
    max-height: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

.cart-panel-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
}

/* Item rows */
#cart-panel .cart-panel-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#cart-panel .cart-panel-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    height: auto !important;
    grid-template-columns: unset !important;
    transition: background 0.15s;
}

#cart-panel .cart-panel-list li:hover {
    background: #f9fafb !important;
}

/* Product info section */
#cart-panel .cart-panel-list .cart-panel-item-quantity {
    font-size: 0.75rem !important;
    color: #828282 !important;
    font-family: 'Graphik', sans-serif !important;
    padding: 0 !important;
    grid-column: unset !important;
    align-self: auto !important;
    order: -1;
    flex-shrink: 0;
    padding-top: 0.125rem !important;
}

#cart-panel .cart-panel-list .cart-panel-item {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #323232 !important;
    font-family: 'Graphik', sans-serif !important;
    padding: 0 !important;
    grid-column: unset !important;
    flex: 1 !important;
    min-width: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    text-wrap: wrap !important;
    align-self: auto !important;
}

#cart-panel .cart-panel-list .cart-panel-item-price {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #323232 !important;
    font-family: 'Graphik', sans-serif !important;
    white-space: nowrap !important;
    align-self: flex-start !important;
}

#cart-panel .cart-panel-list .cart-panel-item-quantity-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.125rem !important;
    grid-column: unset !important;
    align-self: auto !important;
    justify-content: unset !important;
}

#cart-panel .cart-panel-list .cart-panel-item-quantity-actions .icon {
    padding: 0.25rem !important;
    border-radius: 0.25rem !important;
    font-size: 1rem !important;
    color: #505050 !important;
    transition: background 0.15s;
}

#cart-panel .cart-panel-list .cart-panel-item-quantity-actions .icon:hover {
    background: #e5e7eb !important;
    color: #323232 !important;
}

#cart-panel .cart-panel-list .cart-panel-item-delete {
    align-self: flex-start !important;
    padding: 0.25rem !important;
    border-radius: 0.25rem !important;
    color: #dc2626 !important;
    justify-self: unset !important;
    transition: background 0.15s;
}

#cart-panel .cart-panel-list .cart-panel-item-delete:hover {
    background: #fef2f2 !important;
}

/* Empty / loading states */
#cart-panel-articles-empty {
    display: block;
    padding: 2rem !important;
    text-align: center;
    color: #828282;
    font-family: 'Graphik', sans-serif;
    font-size: 0.875rem;
    margin: 0 !important;
}

#cart-panel-articles-loading {
    display: block;
    text-align: center;
    padding: 2rem !important;
    margin: 0 !important;
}

/* Footer: total + checkout button */
.cart-panel-footer {
    flex-shrink: 0 !important;
    padding: 1rem;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.cart-panel-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.cart-panel-total-label {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #323232 !important;
    font-family: 'Graphik', sans-serif !important;
}

.cart-panel-total-price {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #323232 !important;
    font-family: 'Graphik', sans-serif !important;
}

.cart-panel-checkout-btn {
    display: block !important;
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    background: #fcde06 !important;
    color: #323232 !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    font-family: 'Graphik', sans-serif !important;
    border: none !important;
    border-radius: 0.5rem !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: background 0.15s !important;
}

.cart-panel-checkout-btn:hover {
    background: #e8cf00 !important;
}

/* Anonymous cart footer: login + request-access as one pill split in half (side by side) */
.cart-panel-auth-split {
    display: flex;
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    overflow: hidden; /* clip the two halves to the rounded outer corners */
}

.cart-panel-auth-half {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: 'Graphik', sans-serif;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s;
}

.cart-panel-auth-half--primary {
    background: #fcde06;
    color: #323232;
    border-right: 1px solid #d1d5db; /* the split line down the middle */
}

    .cart-panel-auth-half--primary:hover {
        background: #e8cf00;
    }

.cart-panel-auth-half--secondary {
    background: #ffffff;
    color: #323232;
}

    .cart-panel-auth-half--secondary:hover {
        background: #f3f4f6;
    }

/* Hide tax label in new menu cart header — Figma shows only price */
.cart-btn .cart-tax-info {
    display: none !important;
}

/* Badge (compare count) */
.badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #dc2626;
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 9999px;
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}



.secondary-nav {
    background-color: #3d3d3d;
    border-top: 1px solid #505050;
}

.secondary-nav-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0.625rem 0.75rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
}

.nav-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: all 0.15s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.4;
    font-family: 'Graphik', sans-serif;
}

.nav-btn > *:not(.menu-badge) {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.nav-btn:hover {
    color: var(--main-color) !important;
    background-color: rgba(255, 255, 255, 0.05);
}

.nav-btn:hover .material-icons-outlined,
.nav-btn:hover .material-icons,
.nav-btn:hover .material-symbols-outlined,
.nav-btn:hover .material-symbols {
    color: var(--main-color) !important;
}

.products-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: white;
}

.products-btn:hover {
    color: var(--main-color) !important;
}

.products-btn .material-symbols-outlined {
    color: var(--main-color);
}

.products-btn:hover .material-symbols-outlined {
    color: var(--main-color) !important;
}

#nav-products-toggle {
    flex-shrink: 0;
}

.customer-menu {
    position: relative;
    z-index: 1000;
    display: flex;
    align-items: center;
}

.customer-btn {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.375rem 0.75rem;
    background: none;
    border: none;
    color: white;
    font-size: 0.875rem;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: all 0.15s;
    line-height: 1;
    white-space: nowrap;
}

.customer-info {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.375rem 0.75rem 0.375rem 0rem;
    background: none;
    border: none;
    color: white;
    font-size: 0.875rem;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: all 0.15s;
    line-height: 1;
    white-space: nowrap;
}

    .customer-info:hover {
        color: var(--main-color) !important;
    }

.customer-btn > * {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

    .customer-btn:hover {
        color: var(--main-color) !important;
        background-color: rgba(255, 255, 255, 0.05);
    }

.change-customer-quick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    color: white;
    border-radius: 0.25rem;
    transition: all 0.15s;
    position: relative;
}

.change-customer-quick-btn:hover {
    color: #a0a0a0;
    background-color: rgba(255, 255, 255, 0.05);
}

.change-customer-quick-btn .material-icons-outlined {
    font-size: 1.125rem;
    width: 1.125rem;
    height: 1.125rem;
}

.customer-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    width: 20rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid #e5e7eb;
    z-index: 9999;
    display: none;
}

.customer-dropdown.show {
    display: block;
}

.customer-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.customer-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #323232;
    margin: 0;
    font-family: 'Graphik', sans-serif;
    line-height: 1.4;
}

.close-btn {
    color: #828282;
    background: none;
    border: none;
    font-size: 1.25rem;
    font-weight: 400;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s;
    font-family: 'Graphik', sans-serif;
}

.close-btn:hover {
    color: #323232;
}

.ci-content {
    padding: 1rem;
    font-family: 'Graphik', sans-serif;
}

.ci-item {
    background: #f9fafb;
    padding: 0.75rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.ci-item:last-child {
    margin-bottom: 0;
}

.ci-label {
    font-weight: 700;
    color: #323232;
    font-family: 'Graphik', sans-serif;
    line-height: 1.4;
    min-width: 10rem;
    flex-shrink: 0;
}

.ci-value {
    font-weight: 400;
    color: #505050;
    white-space: pre-line;
    font-family: 'Graphik', sans-serif;
    line-height: 1.4;
    flex-grow: 1;
    margin-right: 10px;
    margin-left: 5px;
}

.ci-copy-btn {
    color: #323232;
    background-color: transparent;
    border: none;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    transition: background-color 0.15s, color 0.15s;
    font-family: 'Graphik', sans-serif;
    line-height: 1.4;
    align-self: flex-start;
}

.ci-copy-btn:hover {
    background-color: #ebebeb;
    color: #323232;
}

.ci-copy-all-btn {
    width: 100%;
    background: #323232;
    color: white;
    border: none;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    transition: background-color 0.15s;
    font-family: 'Graphik', sans-serif;
    line-height: 1.4;
}

.ci-copy-all-btn:hover {
    background-color: #505050;
}

.breadcrumb-bar {
    background-color: #dddddd;
    border-top: 1px solid #d0d0d0;
}

.breadcrumb-nav {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0.3rem 1.4rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.breadcrumb-link {
    color: #5a5a5a;
    text-decoration: none;
    transition: color 0.15s, text-decoration-color 0.15s;
    font-size: 0.875rem;
    font-weight: 400;
    font-family: 'Graphik', sans-serif;
    line-height: 1.4;
}

.breadcrumb-link:hover {
    color: #323232;
    text-decoration: underline;
    text-decoration-color: var(--main-color);
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

.breadcrumb-back {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.breadcrumb-back:hover {
    text-decoration: underline;
}

.breadcrumb-current {
    color: #323232;
    font-weight: 500;
    font-size: 0.875rem;
    font-family: 'Graphik', sans-serif;
    line-height: 1.4;
}

.breadcrumb-separator {
    color: #a0a0a0;
    font-size: 0.875rem;
    font-weight: 400;
    font-family: 'Graphik', sans-serif;
}

.dev-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dev-indicator span {
    font-size: 0.875rem;
    font-weight: 600;
    color: #ff0000;
    font-family: 'Graphik', sans-serif;
    line-height: 1.4;
}

/* Chevron icon animation */
.chevron-icon {
    transition: transform 0.2s;
    transform-origin: center center;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.chevron-icon.rotate {
    transform: rotate(180deg);
}

/* Material Icons / Symbols alignment fix */
.material-icons-outlined,
.material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
}

/* ── Tools dropdown ── */
.tools-menu {
    position: relative;
}

.tools-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.tools-dropdown {
    position: fixed;
    width: 18rem;
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    z-index: 115;
    margin: 0;
    display: none;
}

.tools-dropdown.show {
    display: block;
}

/* ── Order dropdown ── */
.order-menu {
    position: relative;
}

.order-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.order-dropdown {
    position: fixed;
    width: 18rem;
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    z-index: 115;
    margin: 0;
    display: none;
}

.order-dropdown.show {
    display: block;
}

/* Hamburger toggle — hidden on desktop, revealed inside the mobile media query below.
   min 44x44 tap target (Apple/WCAG) and a visible keyboard focus ring. */
.mobile-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 0.25rem;
    transition: background-color 0.15s;
}

.mobile-nav-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.mobile-nav-toggle:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
}

.mobile-nav-toggle .material-icons-outlined {
    font-size: 1.75rem;
}

/* Mobile category accordion lives inside the hamburger panel; never shown on desktop,
   where the hover-driven #products-panel mega-menu is used instead. */
.mobile-cat-accordion {
    display: none;
}

/* ===================================================================
   RESPONSIVE HEADER — added 2026-07-29
   See docs/mobile/main-page-responsive.md

   Breakpoint is 1129px, not 768px: the desktop header's min-content width is
   1129px (logo 78 + search 454 + nav-actions 501 + gaps), so anywhere below that
   .top-nav overflows and .nav-actions — the cart button and total price — is
   clipped off-screen and unreachable. This block is the compact header: the
   secondary nav collapses into the hamburger panel and the search drops to its
   own row, which fits comfortably from 320px up.

   Phone-only polish (full-width cart panel, trimmed actions, 44px tap targets)
   stays in the <=768px block that follows this one.

   Desktop (>=1130px) is untouched.
   menu.css loads after style.css, so these win layout ties without !important.
   =================================================================== */
@media (max-width: 1129px) {
    /* --- Legacy fixed header pushes content under itself once the nav wraps
           and grows taller than the hard-coded 110px spacer. On phones let the
           header sit in normal flow so it pushes content down at any height. --- */
    #tr-top {
        position: static;
    }

    /* The header is static on mobile (below), so the fixed-header spacer that
       menu.js sizes to the header height is redundant and leaves a big empty gap.
       Collapse it. !important beats the inline height menu.js writes; table cells
       still grow to show the live search-results overlay when it appears. */
    #top-hidden {
        height: 0 !important;
    }

    #top {
        width: auto;
    }

    /* --- Constrain the legacy <table> shell to the viewport so nothing forces
           a page-wide horizontal scroll. Clip at html/body (the reliable stopgap)
           and let the content cell shrink via min-width:0. NOTE: do NOT set
           table-layout:fixed here — it collapses the colspan header row and blanks
           the content cell. --- */
    html,
    body {
        overflow-x: hidden;
    }

    #content,
    #fullcontent {
        min-width: 0;
    }

    /* --- Top bar: hamburger + logo + actions on row 1, full-width search on row 2.
           Cap to the viewport so the search field can't inherit the ~937px table cell. --- */
    .top-nav {
        flex-wrap: wrap;
        gap: 0.5rem 0.5rem;
        max-width: 100cqw;
        box-sizing: border-box;
    }

    .mobile-nav-toggle {
        display: inline-flex;
        order: 0;
    }

    .logo {
        order: 1;
    }

    .nav-actions {
        order: 2;
        margin-left: auto;
    }

    /* The action row is user menu + favourites + compare + cart-with-total. The compare
       link only appears once at least two articles are in the comparison, so the row is
       58px wider than it looks in the common case — with it present the four items need
       ~295px, and .top-nav's own padding leaves only 276px at a 320px viewport. The cart
       total was then cut off mid-figure ("257 029,7").

       .nav-actions carries `flex-shrink: 0` (line 94) for the desktop layout, so it was
       holding its max-content width and overflowing rather than adapting. Allowing it to
       shrink AND wrap lets the cart drop onto its own line only when it genuinely does not
       fit, which is self-adjusting — no breakpoint guessing, and it still holds for a
       longer total or another icon later.

       Scoped `.top-nav .nav-actions` purely to outrank the single-class rule above; no
       !important needed. */
    .top-nav .nav-actions {
        flex-shrink: 1;
        flex-wrap: wrap;
        min-width: 0;
        justify-content: flex-end;
        row-gap: 4px;
    }

    .search-wrapper {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }

    /* The user menu still opens from the top bar, so it stays a floating dropdown and
       must paint above the hamburger panel (z-index 1300) or its items are unclickable.
       It is anchored to its button, which sits mid-header — at phone widths that pushed
       its left edge past 0 and clipped the avatar and names. Pin it to both viewport
       edges instead so it can never overflow either side. */
    .user-dropdown {
        z-index: 1400 !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    /* --- Order and Verktyg become inline submenus of the hamburger ---
       On desktop these are `position: fixed` white flyouts that menu.js re-parents to
       <body> and positions by hand. Inside the hamburger that reads as a window floating
       over the menu, so here they render in normal flow directly under their own button,
       matching the Produkter accordion. menu.js keeps them in their markup position at
       these widths (see registerDropdown / syncDropdownHomes) and skips the top/left
       coordinates, so the rules below are all that is left to undo. */
    .secondary-nav.mobile-open .order-dropdown,
    .secondary-nav.mobile-open .tools-dropdown {
        position: static;
        width: 100%;
        min-width: 0;
        margin: 0;
        background: #525252;
        border: none;
        border-radius: 0;
        box-shadow: none;
        box-sizing: border-box;
    }

    /* The flyout repeats its own name and "Mina funktioner" in a header row with a yellow
       avatar. That makes sense for a floating panel, but inline under the button that
       already says "Order"/"Verktyg" it is pure duplication and pushes the real items
       down. Hide it — the parent row is the heading. */
    .secondary-nav.mobile-open .order-dropdown .user-header,
    .secondary-nav.mobile-open .tools-dropdown .user-header {
        display: none;
    }

    .secondary-nav.mobile-open .order-dropdown .dropdown-item,
    .secondary-nav.mobile-open .tools-dropdown .dropdown-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 44px;
        padding: 0.65rem 1.25rem 0.65rem 2.25rem;
        color: #e8e8e8;
        border-bottom: 1px solid #5c5c5c;
        border-radius: 0;
        box-sizing: border-box;
    }

    .secondary-nav.mobile-open .order-dropdown .dropdown-item:hover,
    .secondary-nav.mobile-open .tools-dropdown .dropdown-item:hover {
        background-color: #5f5f5f;
        color: #ffffff;
    }

    /* --- Secondary nav becomes the hamburger panel: hidden until toggled, then an
           absolute dropdown below the top bar with every item stacked vertically. --- */
    .secondary-nav {
        display: none;
    }

    .secondary-nav.mobile-open {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-width: 100cqw;
        box-sizing: border-box;
        background-color: #3d3d3d;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
        max-height: 75vh;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 1300;
    }

    .secondary-nav.mobile-open .secondary-nav-inner {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 0;
        max-width: 100cqw;
    }

    .secondary-nav.mobile-open .nav-left,
    .secondary-nav.mobile-open .nav-right {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
    }

    /* Full-width tap rows with a divider between them */
    .secondary-nav.mobile-open .nav-btn,
    .secondary-nav.mobile-open .products-btn,
    .secondary-nav.mobile-open .order-menu-btn,
    .secondary-nav.mobile-open .tools-menu-btn,
    .secondary-nav.mobile-open .customer-btn {
        width: 100%;
        box-sizing: border-box;
        justify-content: flex-start;
        padding: 0.9rem 1.25rem;
        border-radius: 0;
        border-bottom: 1px solid #4a4a4a;
    }

    /* Menu containers (order/tools/customer) stack full width so their buttons fill the row */
    .secondary-nav.mobile-open .order-menu,
    .secondary-nav.mobile-open .tools-menu,
    .secondary-nav.mobile-open .customer-menu {
        width: 100%;
    }

    /* The customer "info" icon measured 31x31 — under the 44px minimum. Grow the hit
       area without changing the glyph size. */
    .secondary-nav.mobile-open #customer-info-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    /* Push each row's chevron to the right edge */
    .secondary-nav.mobile-open .nav-btn .chevron-icon {
        margin-left: auto;
    }

    /* --- Produkter category accordion (inside the hamburger panel) ---
       The desktop mega-menu reveals sub-categories on hover, which does not exist on
       touch, so on phones the Produkter row expands this list in place instead. Two
       levels: category rows, and their sub-categories. Every row is a >=44px target. */
    .secondary-nav.mobile-open .mobile-cat-accordion.open {
        display: block;
        background-color: #464646;
        max-height: 60vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .mobile-cat-row {
        display: flex;
        align-items: stretch;
        border-bottom: 1px solid #4a4a4a;
    }

    .mobile-cat-link {
        flex: 1;
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0.75rem 1.25rem 0.75rem 2.25rem;
        color: #ffffff;
        text-decoration: none;
        font-size: 0.95rem;
        box-sizing: border-box;
    }

    /* Separate control so "expand" can never navigate by accident */
    .mobile-cat-expander {
        flex: 0 0 auto;
        width: 52px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        border-left: 1px solid #4a4a4a;
        color: #ffffff;
        cursor: pointer;
    }

    .mobile-cat-expander:focus-visible {
        outline: 2px solid var(--main-color);
        outline-offset: -2px;
    }

    .mobile-cat-expander .material-icons-outlined {
        transition: transform 0.2s ease;
    }

    .mobile-cat-expander.open .material-icons-outlined {
        transform: rotate(180deg);
    }

    .mobile-cat-sublist {
        background-color: #525252;
    }

    .mobile-cat-sublink {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0.65rem 1.25rem 0.65rem 3.25rem;
        color: #e8e8e8;
        text-decoration: none;
        font-size: 0.9rem;
        border-bottom: 1px solid #5c5c5c;
        box-sizing: border-box;
    }

    /* --- "You are here" trail. tree-popup.js marks every category on the path to the
           page's current node with .is-ancestor, and the deepest one that actually has a
           row with .is-current (the accordion only renders two levels, so a third-level
           category like Professionella has no row of its own).

           Yellow on the dark panel is the brand-sanctioned highlight combination — yellow
           text is only allowed on dark grey. The left bar carries the same information
           without relying on colour alone. --- */
    .mobile-cat-link.is-ancestor,
    .mobile-cat-sublink.is-ancestor {
        color: #ffffff;
        font-weight: 500;
        box-shadow: inset 3px 0 0 0 #8a8a8a;
    }

    .mobile-cat-link.is-current,
    .mobile-cat-sublink.is-current {
        color: var(--main-color, #fcde06);
        font-weight: 600;
        background-color: rgba(252, 222, 6, 0.08);
        box-shadow: inset 3px 0 0 0 var(--main-color, #fcde06);
    }
    /* NOTE: the mega-menu is hidden in product-panel.css, not here — that file loads
       later and sets `#products-panel { display: flex !important }`, which would win. */
}

/* ===================================================================
   PHONE-ONLY POLISH — <=768px
   The compact header above already applies from 1129px down. These rules are
   the extras that only make sense on a phone: they trade width for legibility
   and give touch-sized targets. On a 769-1129px tablet/small window there is
   room for the language selector, the user's name and the 500px cart panel, so
   they stay as they are there.
   =================================================================== */
@media (max-width: 768px) {
    .top-nav {
        padding: 0.5rem 0.75rem;
    }

    .logo img {
        height: 1.5rem;
    }

    /* The logo is the "back to start" target but measured only 58x21 — under the 44px
       minimum. Keep the mark the same size and grow the hit area around it. */
    .logo {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .nav-actions {
        gap: 0.25rem;
    }

    /* px, not rem: the app's root font-size is ~13.8px here, so rem heights fall short of 44.
       16px also stops iOS zooming the page when the field takes focus. */
    .search-input {
        height: 44px;
        font-size: 16px;
    }

    /* Header action controls get a 44px tap target (Fitts / WCAG) */
    .user-btn,
    .fav-btn,
    .favorite-btn,
    .cart-btn,
    .login-btn,
    .request-access-btn {
        min-height: 44px;
    }

    .fav-btn,
    .favorite-btn {
        min-width: 44px;
        justify-content: center;
    }

    /* Cart panel is a fixed 500px on desktop — on a phone it runs off-screen.
       Pin it to both edges so it spans the viewport width. !important beats the
       inline left/right menu.js writes on hover.

       The height override matters just as much: the base rule is `max-height: 50%`,
       and a percentage resolves against the containing block, which here collapses to
       zero — the panel opened 6px tall with its items and checkout button unreachable.
       A viewport unit does not depend on the containing block, so it can't collapse.

       Keep it TOP-anchored (menu.js sets margin-top to the header height). Switching to
       bottom anchoring was tried and collapsed the panel to 6px — its flex children lose
       their resolved height when the box is not laid out from the top. 60vh leaves room
       for the header above and the viewport edge below, so the checkout button in the
       footer stays on screen.

       `top: 0` matters: without it a fixed box with `top: auto` falls back to its STATIC
       position, which for this element is a table cell far down the page — that is what
       left a gap between the header and the panel. With top:0 the margin-top menu.js
       writes (the full header height on mobile) places it directly under the header.

       A CSS-only version was tried — moving the panel inside <header> and using
       `top: 100%` — and it does work on mobile, but it moves the element's static
       position and therefore relocates the DESKTOP panel (measured: top 217 instead of
       97, checkout button off-screen). Desktop must not change, so the JS offset stays. */
    #cart-panel {
        position: absolute !important;
        width: auto !important;
        max-width: none !important;
        left: 8px !important;
        right: 8px !important;
        height: auto !important;
        max-height: 60vh !important;
    }

    /* .closed still has to win, or the panel could never shut */
    #cart-panel.closed {
        height: 0 !important;
        max-height: 0 !important;
    }

    /* Search suggestions are `left: 25%; width: 50%` in style.css — a centred half-width
       column, which is fine on a wide screen but rendered as a 237px strip floating in
       the middle of a phone screen, detached from the field it belongs to. Span the
       viewport instead. `top: 0` for the same reason as the cart panel: without it the
       fixed box falls back to its static position deep in the legacy table. menu.js
       supplies the header-height offset via margin-top. */
    .searchResults {
        position: absolute !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-height: 60vh !important;
    }

    /* Trim actions that don't earn their width on a phone header */
    .lang-selector {
        display: none;
    }

    /* Show only the person icon for the user button (name is in the dropdown) */
    .user-btn > span:not(.material-icons-outlined):not(.chevron-icon),
    .user-btn .chevron-icon {
        display: none;
    }

    /* Anonymous CTAs: drop the leading icon, keep the label.

       This is the opposite trade to .user-btn above, and deliberately so. There is
       only one user button, so its person icon is unambiguous once the name is gone.
       "Begär åtkomst" and "Logga in" sit side by side and both would collapse to a
       person glyph, so here the label is the part that has to survive.

       Measured on an iPhone 15 (393px, 370px of content): the two icons plus their
       7px gaps cost 42px, which pushed .nav-actions (273px) past the 240px left free
       by the hamburger and logo, so it wrapped to a second row and the header grew to
       174px. Without them .nav-actions is 231px and sits on the logo's row — header
       back to 123px. The flex-wrap on .nav-actions stays as the fallback for the
       narrowest screens (~320px), where even the labels alone will not fit. */
    .request-access-btn > .material-icons-outlined,
    .login-btn > .material-icons-outlined {
        display: none;
    }
}