/* Copied from the live malibel.com products page. */
/* Catalogue browser shell. Product content gets the width and the visual weight; the
   navigation stays quiet until something is selected. */
.mb-cat-outer{width:100%;max-width:1320px;margin:0 auto;padding:22px 24px 56px}  /* MAL-0915-C: `width` is what stops this shell shrink-to-fitting. With only max-width     and margin:auto it sized to its CONTENT inside `d-flex flex-column flex-root`, so the     frame jumped between clicks - 836px for Men's Watches (one tile), 1039px for Home &     Living (nine), ~1390px for a product grid. 1320px is the homepage's own Bootstrap     .container width, so every catalogue page now shares the Home frame. The mobile rule     below only changes padding, and width:100% + max-width cannot widen a small screen. */
.mb-cat-wrap{display:grid;grid-template-columns:clamp(272px,20vw,330px) minmax(0,1fr);gap:0;
    align-items:stretch;border:1px solid #BBD8EE;border-radius:14px;background:#fff;
    box-shadow:0 1px 2px rgba(12,94,158,.05)}
/* MAL-0916-G: this wrap used to carry overflow:hidden, purely to clip the children inside the
   14px corners. That one declaration also silently disabled position:sticky on the rail inside
   it - an overflow ancestor becomes the scrollport a sticky child sticks within, and this one
   scrolls away with the page, so the rail had nothing to stick to. The clipping is now done by
   giving the rail its own matching corners, which costs nothing and leaves sticky working. */
.mb-cat-rail{padding:18px 16px;background:#FBFDFF;border-right:1px solid #E2EDF6;
    border-top-left-radius:13px;border-bottom-left-radius:13px}
.mb-cat-body{padding:22px 26px;min-width:0}

/* MAL-0916-G: the rail was written to be sticky and never was, because of the overflow above.
   With that removed it can finally hold its position, and these two numbers put it in the
   right place: it begins below the sticky header stack, and its height is what is actually
   left of the viewport, which is what lets the last department be reached instead of sitting
   under the fold. --mb-stack-h is measured rather than assumed because translated navigation
   changes the header's height. The 0px fallbacks keep this sane if the value never arrives. */
.mb-cat-nav{background:transparent;position:sticky;top:calc(var(--mb-stack-h,0px) + 14px);
    max-height:calc(100vh - var(--mb-stack-h,0px) - 40px);
    display:flex;flex-direction:column}
.mb-cat-list-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;flex:1 1 auto;
    scrollbar-width:thin;scrollbar-color:#C6D6E6 transparent}
.mb-cat-list-scroll::-webkit-scrollbar{width:9px}
.mb-cat-list-scroll::-webkit-scrollbar-thumb{background:#C6D6E6;border-radius:6px}
.mb-cat-nav-h{padding:2px 4px 12px;border-bottom:1px solid #E2EDF6;font-size:11px;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;color:#7C8DA3}
.mb-cat-list{margin:0;padding:5px 0;list-style:none}
.mb-cat-dept + .mb-cat-dept{border-top:1px solid #F2F6FA}

/* ADF-0014: one hierarchy, read at a glance.
   LEVEL 1 department - largest, darkest; LEVEL 2 main category - indented, medium weight;
   LEVEL 3 and deeper - more indent, lighter, a little smaller, a hairline rail beside them.
   Where-am-I in three strengths: the open department (lightest tint), each category on the way
   down (stronger tint + Malibel-blue bar), the current selection (solid Malibel blue). Counts stay
   small and grey so names lead. Names wrap rather than widen the rail. */
.mb-cat-dept-row{display:flex;align-items:stretch;gap:2px;border-radius:8px;transition:background .16s}
.mb-cat-dept-row:hover{background:#EFF6FC}
.mb-cat-dept-link{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:10px 6px 10px 12px;
    text-decoration:none;color:#0B2545;font-size:14.5px;font-weight:700;line-height:1.3;
    overflow-wrap:anywhere;transition:color .16s}
.mb-cat-dept-link:hover{color:#0C5E9E}
.mb-cat-dept-link:focus-visible{outline:2px solid #0C5E9E;outline-offset:-2px;border-radius:8px}
.mb-cat-dept-name{flex:1 1 auto;min-width:0}
.mb-cat-dept-row.is-path{background:#EEF5FB;box-shadow:inset 3px 0 0 #9CC3E4}
.mb-cat-dept-row.is-path .mb-cat-dept-link{color:#0C5E9E}
.mb-cat-dept-row.is-current,.mb-cat-dept-row.is-active{background:#0C5E9E;box-shadow:none}
.mb-cat-dept-row.is-current .mb-cat-dept-link,.mb-cat-dept-row.is-current .mb-cat-chevron{color:#fff}
.mb-cat-dept-row.is-current:hover{background:#0A4E84}
.mb-cat-all .mb-cat-dept-link{font-size:13.5px;font-weight:600}
.mb-cat-chevron{flex:0 0 auto;width:34px;display:flex;align-items:center;justify-content:center;
    background:none;border:0;cursor:pointer;color:#9BAFC4;border-radius:8px;
    transition:color .16s,background .16s}
.mb-cat-chevron svg{width:13px;height:13px;display:block;transition:transform .18s}
.mb-cat-chevron:hover{color:#0C5E9E;background:#E4F0F9}
.mb-cat-chevron:focus-visible{outline:2px solid #0C5E9E;outline-offset:-2px}
.mb-cat-dept.is-open > .mb-cat-dept-row .mb-cat-chevron{color:#0C5E9E}
.mb-cat-dept.is-open > .mb-cat-dept-row .mb-cat-chevron svg{transform:rotate(90deg)}
.mb-cat-dept.is-open > .mb-cat-dept-row.is-current .mb-cat-chevron{color:#fff}

.mb-cat-kids{margin:0 0 6px;padding:2px 0 4px;list-style:none}
.mb-cat-kid{display:flex;align-items:baseline;gap:9px;padding:6px 10px 6px 22px;border-radius:7px;
    text-decoration:none;color:#42546B;font-size:13.5px;line-height:1.35;overflow-wrap:anywhere;
    transition:background .16s,color .16s}
.mb-cat-kid:hover{background:#EFF6FC;color:#0C5E9E}
.mb-cat-kid:focus-visible{outline:2px solid #0C5E9E;outline-offset:-2px}
.mb-cat-kid-name{flex:1 1 auto;min-width:0}
.mb-cat-kid-n{flex:0 0 auto;font-size:11px;color:#9AAABD;font-weight:500;font-variant-numeric:tabular-nums}
.mb-cat-kid.is-path{background:#E1EEF9;color:#0C5E9E;font-weight:700;box-shadow:inset 3px 0 0 #0C5E9E}
.mb-cat-kid.is-current{background:#0C5E9E;color:#fff;font-weight:700;box-shadow:none}
.mb-cat-kid.is-current:hover{background:#0A4E84;color:#fff}
.mb-cat-kid.is-current .mb-cat-kid-n{color:rgba(255,255,255,.8)}

.mb-cat-kid-row{display:flex;align-items:stretch}
.mb-cat-kid-row .mb-cat-kid{flex:1 1 auto;min-width:0}
.mb-cat-chevron-kid{flex:0 0 auto;width:28px;padding:0;margin:0;border:0;background:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;color:#A9BCC9;
    transition:transform .18s,color .18s}
.mb-cat-chevron-kid svg{width:11px;height:11px;display:block}
.mb-cat-chevron-kid:hover{color:#0C5E9E}
.mb-cat-chevron-kid[aria-expanded="true"]{transform:rotate(90deg);color:#0C5E9E}
.mb-cat-chevron-kid:focus-visible{outline:2px solid #0C5E9E;outline-offset:-2px;border-radius:4px}
.mb-cat-subkids{margin:0;padding:0;list-style:none;background:transparent}

/* LEVEL 2 - the department's main categories */
.mb-cat-node[data-level="1"] > .mb-cat-kid-row .mb-cat-kid{font-size:14px;font-weight:600;color:#123A5E}
/* LEVEL 3 and deeper - lighter, smaller, a hairline rail makes the parent visible */
.mb-cat-node[data-level="2"] > .mb-cat-kid-row .mb-cat-kid{font-size:13.5px;font-weight:500;color:#3E5572}
.mb-cat-node:not([data-level="1"]):not([data-level="2"]) > .mb-cat-kid-row .mb-cat-kid{font-size:13px;font-weight:400;color:#5D7089}
.mb-cat-node:not([data-level="1"]) > .mb-cat-kid-row .mb-cat-kid:not(.is-current):not(.is-path){box-shadow:inset 1px 0 0 #E4ECF3}
/* the where-am-I states outrank every level's own colour */
.mb-cat-nav .mb-cat-node > .mb-cat-kid-row .mb-cat-kid.is-path{color:#0C5E9E;font-weight:700;font-style:normal}
.mb-cat-nav .mb-cat-node > .mb-cat-kid-row .mb-cat-kid.is-current{color:#fff;font-weight:700;font-style:normal}

/* A family's own Shop by Brand is a way into its makers, not another sub-category. */
.mb-cat-brandroot > .mb-cat-kid-row .mb-cat-kid:not(.is-current):not(.is-path){color:#0C5E9E;font-style:italic}
.mb-cat-brandroot{border-top:1px dashed #E2EDF6;margin-top:2px}

/* Long sibling lists scroll inside themselves, so a thousand makers never bury the headers above. */
.mb-cat-node[data-level="2"] > ul.mb-cat-subkids,
.mb-cat-node[data-level="1"] > ul.mb-cat-subkids{
    max-height:300px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:#C6D6E6 transparent}
.mb-cat-node > ul.mb-cat-subkids::-webkit-scrollbar{width:7px}
.mb-cat-node > ul.mb-cat-subkids::-webkit-scrollbar-thumb{background:#C6D6E6;border-radius:6px}
.mb-cat-node > ul.mb-cat-subkids::-webkit-scrollbar-track{background:transparent}

/* ADF-0014: Shop by Brand - its own control, outside the category tree */
.mb-cat-brands{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 4px 2px;
    padding:10px 12px;border:1px solid #BBD8EE;border-radius:9px;background:#fff;color:#0C5E9E;
    font-size:13.5px;font-weight:700;text-decoration:none;transition:background .16s,border-color .16s}
.mb-cat-brands svg{width:15px;height:15px;flex:0 0 auto}
.mb-cat-brands:hover{background:#EFF6FC;border-color:#0C5E9E;color:#0C5E9E}
.mb-cat-brands:focus-visible{outline:2px solid #0C5E9E;outline-offset:2px}

/* main column */
.mb-cat-main{min-width:0}
.mb-cat-crumb{font-size:12px;color:#7C8DA3;margin-bottom:9px}
.mb-cat-crumb a{color:#7C8DA3;text-decoration:none}
.mb-cat-crumb a:hover{color:#0C5E9E;text-decoration:underline}
.mb-cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
    flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid #E7EDF4;margin-bottom:22px}
.mb-cat-head h1{margin:0;font-size:clamp(23px,3vw,31px);font-weight:700;letter-spacing:-.022em;
    color:#0B2545;text-wrap:balance}
.mb-cat-count{margin:6px 0 0;font-size:13.5px;color:#697B92}
.mb-cat-browse{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;font-size:13.5px;
    font-weight:600;color:#fff;background:#0C5E9E;border:1px solid #0C5E9E;border-radius:9px;
    text-decoration:none;white-space:nowrap;transition:background .18s}
.mb-cat-browse:hover{background:#0A4E84;color:#fff}
.mb-cat-browse:focus-visible{outline:3px solid #1FA8DE;outline-offset:2px}

/* department overview: the real child categories, text only - no artwork by design */
.mb-cat-search{margin:0 0 24px}
.mb-cat-search-label{display:block;font-size:12px;color:#7C8DA3;margin-bottom:7px}
.mb-cat-search-row{display:flex;align-items:stretch;gap:8px}
/* min-width:0 is what stops a flex item refusing to shrink below its intrinsic width; without it
   the input pushes the row wider than the 320px shell and the page scrolls sideways. */
.mb-cat-search-input{flex:1 1 auto;min-width:0;height:42px;padding:0 13px;font-size:14.5px;
    color:#0B2545;background:#fff;border:1px solid #D6E0EC;border-radius:9px;
    -webkit-appearance:none;appearance:none;transition:border-color .18s,box-shadow .18s}
.mb-cat-search-input::placeholder{color:#9AAABD}
.mb-cat-search-input:focus{outline:none;border-color:#0C5E9E;box-shadow:0 0 0 3px rgba(31,168,222,.22)}
.mb-cat-search-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
    flex:0 0 auto;height:42px;padding:0 18px;font-size:13.5px;font-weight:600;color:#fff;
    background:#0C5E9E;border:1px solid #0C5E9E;border-radius:9px;cursor:pointer;
    white-space:nowrap;transition:background .18s}
.mb-cat-search-btn:hover{background:#0A4E84}
.mb-cat-search-btn:focus-visible{outline:3px solid #1FA8DE;outline-offset:2px}
/* Visible to assistive tech only - the icon-only button below 576px still needs a name. */
.mb-cat-search-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mb-cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
    grid-auto-rows:1fr}
.mb-cat-tile{display:flex;flex-direction:column;justify-content:space-between;height:100%;
    min-height:92px;padding:15px 16px;text-decoration:none;background:#F7FAFD;
    border:1px solid #DCE7F1;border-radius:10px;transition:border-color .18s,background .18s,transform .18s}
.mb-cat-tile:hover{background:#EFF6FC;border-color:#0C5E9E;transform:translateY(-2px)}
.mb-cat-tile:focus-visible{outline:3px solid #0C5E9E;outline-offset:2px}
.mb-cat-tile-name{font-size:14.5px;font-weight:700;color:#0B2545;line-height:1.3}
.mb-cat-tile-n{margin-top:9px;font-size:12px;color:#697B92;font-variant-numeric:tabular-nums}
.mb-cat-empty{padding:34px 18px;text-align:center;color:#697B92;background:#F7FAFD;
    border:1px solid #DCE7F1;border-radius:10px}

/* the drawer toggle only exists below the sidebar breakpoint */
.mb-cat-toggle{display:none}

@media (max-width:1100px){
    .mb-cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:991px){
    .mb-cat-outer{padding:14px 12px 44px}
    .mb-cat-wrap{grid-template-columns:minmax(0,1fr);gap:14px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
    .mb-cat-rail{padding:0;background:transparent;border-right:0}
    .mb-cat-body{padding:0}
    .mb-cat-nav{position:static;display:none;max-height:none}
    .mb-cat-nav.is-open{display:block}
    .mb-cat-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;
        width:100%;padding:12px 15px;font:600 14px/1.3 inherit;color:#0B2545;background:#fff;
        border:1px solid #DCE7F1;border-radius:10px;cursor:pointer;text-align:left}
    .mb-cat-toggle:focus-visible{outline:3px solid #0C5E9E;outline-offset:2px}
    .mb-cat-toggle-where{color:#0C5E9E;font-weight:700}
}
@media (max-width:575px){
    /* The word goes, the icon and the accessible name stay. At 320px that leaves the input about
       240px wide, which is a real field rather than a token one. */
    .mb-cat-search-btn-text{display:none}
    .mb-cat-search-btn{padding:0 15px}
    .mb-cat-grid{grid-template-columns:minmax(0,1fr)}
    .mb-cat-head{display:block}
    /* MAL-0916-C. This button is white-space:nowrap, which is right on a wide screen and wrong
       on a narrow one: the label carries the department name, and under translation that name
       gets longer, not shorter. At 320px "Browse all Home & Living" becomes "Alle Kategorien
       im Bereich Wohnen ansehen" and the button broke out of its container by 25px, ending at
       the viewport edge while every card below it stopped short - so the column looked crooked.
       Letting it wrap here keeps the desktop shape and squares up the narrow one. */
    .mb-cat-browse{margin-top:12px;max-width:100%;white-space:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){
    .mb-cat-tile,.mb-cat-chevron,.mb-cat-dept-link,.mb-cat-kid{transition:none}
    .mb-cat-tile:hover{transform:none}
}
/* Compact browser tabs shared by public, Agent and HQ catalogue navigation. */
.mb-cat-wrap,.ac-shell{display:block!important}
.mb-cat-rail,.ac-nav-rail{position:static!important;padding:0!important;border:0!important;background:transparent!important;margin-bottom:12px}
.mb-cat-toggle,.mb-cat-nav-h{display:none!important}
.mb-cat-nav{display:flex!important;position:relative!important;top:auto!important;max-height:none!important;overflow:visible!important;padding:4px 8px 0;background:#fff;border-bottom:1px solid #bdc8d5;border-radius:14px 14px 0 0}
.mb-cat-nav .mb-cat-list-scroll{overflow:visible!important;max-height:none!important}
.mb-cat-nav .mb-cat-list{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none}
.mb-cat-nav .mb-cat-dept{position:relative;margin:0;border:0}
.mb-cat-nav .mb-cat-dept-row{border:1px solid #d6e0ec;border-bottom:3px solid transparent;border-radius:14px 14px 0 0;background:#fff}
.mb-cat-nav .mb-cat-dept-link{padding:6px 12px;font-size:14px;line-height:20px;color:#26324a;font-weight:600;border-radius:14px 14px 0 0}
.mb-cat-nav .mb-cat-dept-row:hover{background:#e8f4ff}
.mb-cat-nav .mb-cat-dept.is-open>.mb-cat-dept-row,.mb-cat-nav .mb-cat-dept-row.is-current,.mb-cat-nav .mb-cat-dept-row.is-path{background:#e8f4ff;border-color:#bdc8d5;border-bottom-color:transparent;box-shadow:none}
.mb-cat-nav .mb-cat-dept-row.is-current .mb-cat-dept-link,.mb-cat-nav .mb-cat-dept-row.is-current .mb-cat-chevron{color:#0c5e9e}
.mb-cat-nav .mb-cat-dept.is-open>.mb-cat-dept-row.is-current .mb-cat-chevron{color:#0c5e9e}
.mb-cat-nav .mb-cat-chevron{width:22px;color:#26324a}
.mb-cat-nav .mb-cat-dept>.mb-cat-kids{position:absolute;top:calc(100% - 2px);left:0;right:auto;width:min(320px,calc(100vw - 40px));z-index:30;display:block;max-height:60vh;overflow:auto;padding:8px;background:#fff;border:2px solid #0c5e9e;border-radius:8px;box-shadow:0 8px 20px #14223422}
.mb-cat-nav .mb-cat-dept>.mb-cat-kids[hidden]{display:none}
.mb-cat-nav .mb-cat-brands{align-self:flex-start;margin:4px 0;padding:5px 10px}
.mb-cat-nav .mb-cat-kid:hover,.mb-cat-nav .mb-cat-node>.mb-cat-kid-row .mb-cat-kid.is-current{background:#e8f4ff;color:#0c5e9e}
#andy-hq-room .mb-cat-nav .mb-cat-dept-link,#andy-hq-room .mb-cat-nav .mb-cat-brands,#andy-hq-room .mb-cat-nav .mb-cat-kid{color:#26324a}
#andy-hq-room .mb-cat-nav .mb-cat-kid.is-current{background:#e8f4ff;color:#0c5e9e}
#andy-hq-room .mb-cat-nav .mb-cat-chevron{padding:0;border:0;background:transparent;color:#26324a;box-shadow:none}
.mb-cat-nav .mb-cat-dept.is-open>.mb-cat-dept-row{position:relative;z-index:31;background:#fff;border:2px solid #0c5e9e;border-bottom-color:#fff}
.mb-cat-nav .mb-cat-dept.is-open>.mb-cat-dept-row::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#fff}
.mb-cat-nav.has-open-department .mb-cat-all .mb-cat-dept-row{background:#fff;border-color:#d6e0ec;border-bottom-color:transparent}
.mb-cat-nav.has-open-department .mb-cat-all .mb-cat-dept-link{color:#26324a}
/* Short browse actions and a clear, separate way to explore makers. */
.mb-cat-nav .mb-cat-action{margin:2px 0;padding:9px 12px;font-weight:700;background:#f3f7fb;color:#123a5e}
.mb-cat-nav .mb-cat-brand-action,.mb-cat-nav .mb-cat-brands,.mb-cat-nav .mb-cat-brandroot > .mb-cat-kid-row .mb-cat-brand-toggle{background:#e8f4ff;border:1px solid #bedcf4;color:#0c5e9e;font-style:normal;font-weight:700}
.mb-cat-nav .mb-cat-brand-action:hover,.mb-cat-nav .mb-cat-brands:hover{background:#d7ecff;border-color:#78b5e2}
.mb-cat-brandroot{border:0;margin:5px 0}
.mb-cat-brand-toggle{width:100%;text-align:left;cursor:pointer;font-family:inherit}
.mb-cat-brand-toggle [aria-hidden]{margin-left:auto;font-size:16px;line-height:1}
.mb-cat-nav .mb-cat-chevron{min-height:34px}
.ac-shell{background:#fff}
#mb-discovery-rotation{background:#edf7ff;border:1px solid #9bcff2;border-radius:22px;
        box-shadow:0 4px 14px rgba(32,112,170,.10);position:relative;top:-6px}
    #mb-mix-clock{color:#075b91;font-weight:700;font-variant-numeric:tabular-nums}
/* The open Filter panel is the top interactive layer. The sticky header and black band sit at
       Bootstrap's fixed layer (1030/1031) while Metronic drawers default to 110/109, so the header
       cut across the open panel. The drawer and its backdrop now use Bootstrap's own OFFCANVAS
       layer - the level that exists for exactly this - above the sticky chrome, below modals. */
    #filter-bar.drawer{z-index:var(--bs-offcanvas-zindex,1045);max-width:100vw}
    body.drawer-active .drawer-overlay{z-index:calc(var(--bs-offcanvas-zindex,1045) - 5);background-color:rgba(7,20,55,.35)}
    body.drawer-active{overflow:hidden}
    #filter-bar > .card{display:flex;flex-direction:column;height:100%}
    #filter-bar #chat_body{flex:1 1 auto;min-height:0;overflow-y:auto}