/* ==========================================================================
FEWSET — MEGA MENU
Desktop dropdown + Mobile drawer
========================================================================== */
/* ==========================================================================
1. VISIBILITY TOGGLES
========================================================================== */
.mm--mobile { display: none; }
@media (max-width: 1024px) {
.mm--mobile { display: block !important; }
}
@media (min-width: 1025px) {
.mm--mobile { display: none !important; }
}
/* ==========================================================================
2. DESKTOP MEGA DROPDOWN
========================================================================== */
/* The dropdown panel — hidden by default with display:none (no ghost hover) */
.ql-desktop-menu > li > .sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #FFF;
border-top: 1px solid rgba(26,26,26,.06);
box-shadow: 0 20px 60px rgba(0,0,0,.05), 0 1px 0 rgba(0,0,0,.03);
list-style: none;
margin: 0;
z-index: 10003; /* above the PDP modal (10000) */
/* Layout handled by .ql-mega__cols (newspaper columns) + .ql-megafeat (panel) */
padding: 30px clamp(28px, 4vw, 56px) 34px;
/* Fade-in animation */
animation: qlMegaFadeIn .2s ease both;
}
@keyframes qlMegaFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Show on JS-controlled class (with close delay) or keyboard focus */
.ql-desktop-menu > li.is-mega-open > .sub-menu,
.ql-desktop-menu > li:focus-within > .sub-menu {
display: flex;
align-items: stretch;
gap: 0;
}
/* ===== Newspaper columns (left) + featured panel (right) ===== */
.ql-mega__cols { flex: 1 1 auto; min-width: 0; list-style: none; margin: 0; padding: 0; }
.ql-mega__colslist {
list-style: none; margin: 0; padding: 0;
column-count: 4;
column-gap: clamp(24px, 3vw, 50px);
}
.ql-mega--has-feat .ql-mega__colslist { column-count: 4; }
.ql-mega__colslist > li.menu-item-has-children {
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
display: block;
margin: 0 0 26px;
}
/* Individual subcategory links */
.ql-desktop-menu .sub-menu li {
list-style: none;
}
/* --- Level 2 items: category headers vs plain links --- */
/* Group header (item WITH children) */
.ql-mega__colslist > li.menu-item-has-children > a {
display: block;
font-family: var(--font-primary);
font-size: var(--label-md);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--on-surface);
text-decoration: none;
padding: 0 0 10px;
margin: 0;
transition: color .18s ease;
}
.ql-mega__colslist > li.menu-item-has-children > a:hover { color: rgba(26,26,26,.6); }
.ql-mega__colslist > li.menu-item-has-children > a::after { display: none; }
/* Kill the parent theme's underline on EVERY mega-menu link. GP-luxe forces
text-decoration:underline on every ; the per-link resets above only cover
group-header and nested .sub-menu links, so they MISS single-level panel links
(top-level items with no grandchildren), the featured "Šį sezoną" column, and
the megafeat view-all / CTA / promo links. All of those live inside the .ql-mega
under .ql-desktop-menu, so this ancestor-qualified rule (0,2,1) beats the
parent WITHOUT !important and only touches text-decoration — the hover/active
underline BARS (drawn with ::after background) are untouched. */
.ql-desktop-menu .ql-mega a { text-decoration: none; }
/* The item list under a header */
.ql-mega__colslist .sub-menu {
position: static;
display: block !important;
background: transparent;
box-shadow: none;
border: none;
padding: 0;
margin: 0;
list-style: none;
animation: none;
column-count: 1;
}
/* Item links (any depth inside a group) */
.ql-mega__colslist .sub-menu li > a {
display: block;
font-family: var(--font-primary);
font-size: var(--text-sm);
font-weight: 400;
color: rgba(26,26,26,.6);
text-decoration: none;
padding: 5px 0;
letter-spacing: 0.005em;
line-height: 1.25;
position: relative;
transition: color .18s ease;
}
.ql-mega__colslist .sub-menu li > a:hover { color: var(--on-surface); }
.ql-mega__colslist .sub-menu li > a::after { display: none; }
.ql-desktop-menu > li > .sub-menu > li > .sub-menu a:hover {
color: var(--on-surface);
}
.ql-desktop-menu > li > .sub-menu > li > .sub-menu a:hover::after {
width: 100%;
}
/* Current item styling */
.ql-desktop-menu .sub-menu li.current-menu-item > a {
color: var(--on-surface);
font-weight: 600;
}
.ql-desktop-menu .sub-menu li.current-menu-item > a::after {
width: 100%;
}
/* --- Featured panel (Populiarios prekės) — desktop: small aside on the RIGHT
of the dropdown (Fewset_Mega_Walker); mobile: horizontal mini-rail at the
bottom of the category panel. Cards are the real archive card (kr-card). --- */
/* shared head + promo image */
.ql-megafeat__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.7rem;
}
.ql-megafeat__eyebrow {
font-family: var(--font-primary);
font-size: var(--label-md);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--on-surface);
}
.ql-megafeat__all {
font-family: var(--font-primary);
font-size: var(--label-md);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(26,26,26,.5);
text-decoration: none;
white-space: nowrap;
transition: color .18s ease;
}
.ql-megafeat__all:hover { color: var(--on-surface); }
.ql-megafeat__arrow { display: inline-block; margin-left: 5px; }
.ql-megafeat__promo { display: block; position: relative; overflow: hidden; margin-bottom: 0.7rem; background: #EEE; }
.ql-megafeat__promoimg { display: block; width: 100%; height: 100%; object-fit: cover; }
.ql-megafeat__promo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 48%);
pointer-events: none;
}
.ql-megafeat__promotitle {
position: absolute;
left: 14px;
bottom: 12px;
z-index: 1;
font-family: var(--font-primary);
font-size: 1rem;
font-weight: 700;
line-height: 1.15;
color: #fff;
letter-spacing: 0.01em;
max-width: calc(100% - 28px);
text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.ql-megafeat__cta {
display: inline-flex;
align-items: center;
font-family: var(--font-primary);
font-size: 0.5625rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--on-surface);
text-decoration: none;
transition: opacity .18s ease;
}
.ql-megafeat__cta:hover { opacity: .6; }
/* ===== Minimal product card: image + badge + name + price (no swatches/dots/wishlist/derinys) ===== */
.ql-megafeat__list { display: grid; gap: var(--fewset-loop-gap, 5px); }
.ql-megafeat__card { display: block; text-decoration: none; color: inherit; }
.ql-megafeat__cardimg {
display: block; position: relative; overflow: hidden;
aspect-ratio: 3 / 4; background: #F3F3F1;
}
.ql-megafeat__cardimg-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ql-megafeat__cardimg .fewset-badges {
position: absolute; left: 0; bottom: 6px; z-index: 2;
display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
pointer-events: none;
}
.ql-megafeat__cardmeta { display: block; margin-top: 6px; } /* tight image→name gap, like rail/archive */
.ql-megafeat__cardname {
display: block; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-family: var(--font-primary); color: var(--on-surface);
font-weight: 400; line-height: 1.35; letter-spacing: .35px;
}
.ql-megafeat__cardprice { display: block; font-family: var(--font-primary); color: var(--on-surface); font-weight: 500; line-height: 1.35; letter-spacing: .5px; margin-top: 2px; }
.ql-megafeat__cardprice del { opacity: .5; font-weight: 400; margin-right: 4px; }
.ql-megafeat__cardprice ins { text-decoration: none; }
/* sub-category photos stacked beneath the main promo (image-only mode) */
.ql-megafeat__promo-main { margin-bottom: 0; }
.ql-megafeat__sub { margin-top: 10px; }
/* each photo is a self-contained block: image + its own button */
.ql-megafeat__promoblock { margin-bottom: 1.1rem; }
.ql-megafeat__promoblock:last-child { margin-bottom: 0; }
.ql-megafeat__promoblock .ql-megafeat__cta { margin-top: 8px; }
/* ===== DESKTOP: image & products are independently placed (left / right / bottom) ===== */
@media (min-width: 1025px) {
.ql-mega--has-feat { display: flex; flex-wrap: wrap; align-items: stretch; }
.ql-mega--has-feat > .ql-mega__cols { order: 0; flex: 1 1 auto; min-width: 50%; }
/* shared type sizing */
.ql-megafeat--desktop { min-width: 0; }
.ql-megafeat--desktop .ql-megafeat__head { margin-bottom: 0.9rem; }
.ql-megafeat--desktop .ql-megafeat__cardname { font-size: 11px; }
.ql-megafeat--desktop .ql-megafeat__cardprice { font-size: 13px; }
.ql-megafeat--desktop .ql-megafeat__promo { margin-bottom: 0.9rem; }
.ql-megafeat--desktop .ql-megafeat__promotitle { font-size: clamp(1rem, 1.1vw, 1.35rem); }
/* side panels: left / right */
.ql-megafeat--desktop.ql-place-left,
.ql-megafeat--desktop.ql-place-right {
flex: 0 0 clamp(220px, 17vw, 360px); align-self: stretch; min-width: 0;
}
.ql-megafeat--desktop.ql-place-right {
order: 2; border-left: 1px solid rgba(26,26,26,.08);
padding-left: clamp(22px, 1.8vw, 34px); margin-left: clamp(20px, 2vw, 36px);
}
.ql-megafeat--desktop.ql-place-left {
order: -1; border-right: 1px solid rgba(26,26,26,.08);
padding-right: clamp(22px, 1.8vw, 34px); margin-right: clamp(20px, 2vw, 36px);
}
/* product grid inside a side panel */
.ql-megafeat--prod.ql-place-left .ql-megafeat__list,
.ql-megafeat--prod.ql-place-right .ql-megafeat__list {
grid-template-columns: 1fr 1fr; gap: var(--fewset-loop-gap, 5px);
}
/* bottom: full-width row under the columns (fills sparse menus) */
.ql-megafeat--desktop.ql-place-bottom {
order: 3; flex: 0 0 100%; width: 100%; min-width: 0;
border-top: 1px solid rgba(26,26,26,.1); margin-top: 1.4rem; padding-top: 1.4rem;
}
.ql-megafeat--prod.ql-place-bottom .ql-megafeat__list {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--fewset-loop-gap, 5px);
}
.ql-megafeat--prod.ql-place-bottom .ql-megafeat__card { display: block; }
.ql-megafeat--prod.ql-place-bottom .ql-megafeat__cardmeta { margin-top: 6px; }
.ql-megafeat--img.ql-place-bottom .ql-megafeat__promos { display: flex; gap: 18px; flex-wrap: wrap; }
.ql-megafeat--img.ql-place-bottom .ql-megafeat__promoblock { flex: 0 1 240px; margin-bottom: 0; }
}
/* smaller desktop: compact horizontal cards in side panels so they fit */
@media (min-width: 1025px) and (max-width: 1366px) {
.ql-megafeat--prod.ql-place-left .ql-megafeat__list,
.ql-megafeat--prod.ql-place-right .ql-megafeat__list { grid-template-columns: 1fr; gap: var(--fewset-loop-gap, 5px); }
.ql-megafeat--prod.ql-place-left .ql-megafeat__card,
.ql-megafeat--prod.ql-place-right .ql-megafeat__card { display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: center; }
.ql-megafeat--prod.ql-place-left .ql-megafeat__cardmeta,
.ql-megafeat--prod.ql-place-right .ql-megafeat__cardmeta { margin-top: 0; }
}
/* ---- MOBILE: horizontal mini-rail under the category list ---- */
.ql-megafeat--mobile {
padding: 14px 20px 20px;
border-top: 1px solid rgba(26,26,26,.07);
}
.ql-megafeat--mobile .ql-megafeat__list {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 42%;
gap: var(--fewset-loop-gap, 5px);
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
touch-action: pan-x;
overscroll-behavior-x: contain;
overscroll-behavior-y: auto;
}
.ql-megafeat--mobile .ql-megafeat__card { scroll-snap-align: start; }
.ql-megafeat--mobile .ql-megafeat__cardname { font-size: 10px; }
.ql-megafeat--mobile .ql-megafeat__cardprice { font-size: 12px; }
.ql-megafeat--mobile .ql-megafeat__cta { margin-top: 4px; }
/* ---- MOBILE: promo image at the bottom of the ROOT drawer ---- */
.mm__drawer-promo { margin: 10px 20px 6px; }
.mm__drawer-promo .ql-megafeat__promo { margin-bottom: 0; aspect-ratio: 16 / 10; }
.mm__drawer-promo .ql-megafeat__promotitle { font-size: 1.0625rem; }
/* ==========================================================================
3. HAMBURGER
========================================================================== */
.mm__toggle.mm__hamburger {
appearance: none;
border: none !important;
background: transparent !important; /* no background — just the lines */
box-shadow: none !important;
padding: 10px 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0;
line-height: 0;
font-size: 0;
color: var(--on-surface); /* bars adapt: dark on a light header, white on a dark slide (header.css:470) */
}
.mm__hamburger-box {
width: 26px;
height: 16px;
position: relative;
display: inline-block;
}
.mm__hamburger-inner {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 2.5px;
background: transparent; /* middle bar removed — anchor for the two bars below */
transform: translateY(-50%);
}
.mm__hamburger-inner::before,
.mm__hamburger-inner::after {
content: "";
position: absolute;
left: 0;
height: 2.5px;
border-radius: 2px; /* rounded line ends */
background: currentColor;
transition: width .22s ease, transform .22s ease, top .22s ease;
opacity: 1 !important;
visibility: visible !important;
}
.mm__hamburger-inner::before { top: -3.5px; width: 100%; } /* top line — longer */
.mm__hamburger-inner::after { top: 3.5px; width: 62%; } /* bottom line — shorter */
/* X animation — both bars extend to full width and cross at the centre */
.mm.is-open .mm__hamburger-inner::before { top: 0; width: 100%; transform: rotate(45deg); }
.mm.is-open .mm__hamburger-inner::after { top: 0; width: 100%; transform: rotate(-45deg); }
/* ==========================================================================
4. OVERLAY
========================================================================== */
.mm__overlay {
position: fixed;
inset: 0;
background: rgba(26,26,26,.45);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 10002; /* above the PDP modal (10000) */
}
/* ==========================================================================
5. DRAWER
========================================================================== */
.mm__drawer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100vw;
height: 100dvh;
background: #FFF;
color: var(--on-surface);
z-index: 10003; /* above the PDP modal (10000) */
transform: translateX(-102%);
/* Fully hide the closed drawer. The header's backdrop-filter makes it the
containing block, so once the header is inset (floating pill) the off-screen
transform leaves a ~6px sliver on the left — visibility:hidden kills it.
(When open, body.mm-lock drops that backdrop-filter so it aligns again.) */
visibility: hidden;
transition: transform 320ms cubic-bezier(.4,0,.2,1), visibility 0s linear 320ms;
box-shadow: 0 0 80px rgba(0,0,0,.1);
display: flex;
flex-direction: column;
overflow: hidden;
}
@media (min-width: 641px) {
.mm__drawer { width: min(88vw, 440px); }
}
.mm.is-open .mm__drawer {
transform: translateX(0);
visibility: visible;
transition: transform 320ms cubic-bezier(.4,0,.2,1), visibility 0s;
}
/* ---- Drawer topbar ---- */
.mm__topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid rgba(26,26,26,.06);
background: #FFF;
flex-shrink: 0;
}
.mm__brand {
font-family: var(--font-primary);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--on-surface);
}
.mm__close {
appearance: none;
border: 1px solid rgba(26,26,26,.08);
background: transparent;
color: var(--on-surface);
font-size: 14px;
cursor: pointer;
width: 36px;
height: 36px;
border-radius: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: border-color .2s ease;
}
.mm__close:hover { border-color: rgba(26,26,26,.2); }
.mm__close:active { transform: scale(0.97); }
/* ==========================================================================
6. PANELS (drilldown)
========================================================================== */
.mm__panels {
position: relative;
flex: 1;
min-height: 0;
overflow: hidden;
background: #FFF;
}
.mm__panel {
position: absolute;
inset: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #FFF;
display: flex;
flex-direction: column;
/* Off-screen right (default / inactive) */
transform: translateX(102%);
opacity: 1;
pointer-events: none;
transition: transform 300ms cubic-bezier(.4,0,.2,1),
opacity 300ms cubic-bezier(.4,0,.2,1);
}
/* Active panel: visible, interactive */
.mm__panel.is-active {
transform: translateX(0);
opacity: 1;
pointer-events: auto;
z-index: 2;
}
/* Previous panel: slides left, faded, NOT interactive */
.mm__panel.is-prev {
transform: translateX(-25%);
opacity: 0.3;
pointer-events: none;
z-index: 1;
}
/* ---- Panel header bar ---- */
.mm__panelbar {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid rgba(26,26,26,.06);
background: #FFF;
position: sticky;
top: 0;
z-index: 3;
}
.mm__back {
appearance: none;
border: 1px solid rgba(26,26,26,.10);
background: transparent;
color: var(--on-surface);
padding: 6px 14px;
border-radius: 0;
cursor: pointer;
font-family: var(--font-primary);
font-size: var(--label-md);
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
transition: border-color .2s ease;
}
.mm__back:hover { border-color: rgba(26,26,26,.25); }
.mm__back:active { transform: scale(0.97); }
.mm__paneltitle {
text-decoration: none;
color: var(--on-surface);
font-family: var(--font-primary);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: var(--label-md);
flex: 1;
line-height: 1.2;
}
/* ==========================================================================
7. LIST ITEMS
========================================================================== */
.mm__list {
list-style: none;
margin: 0;
padding: 6px 0;
flex: 1;
}
.mm__item {
display: flex;
align-items: center;
justify-content: space-between;
}
.mm__item + .mm__item {
border-top: 1px solid rgba(26,26,26,.07);
}
.mm__link {
display: flex;
align-items: center;
flex: 1;
min-height: 48px;
padding: 0 20px;
text-decoration: none;
color: var(--on-surface);
font-family: var(--font-primary);
font-size: var(--text-sm);
font-weight: 400;
letter-spacing: 0.01em;
transition: color .15s ease;
}
.mm__link:active {
color: rgba(26,26,26,.5);
}
.mm__next {
appearance: none;
border: none;
background: transparent;
color: rgba(26,26,26,.35);
width: 40px;
height: 44px;
border-radius: 0;
cursor: pointer;
font-size: 20px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 10px;
flex-shrink: 0;
transition: color .15s ease;
}
.mm__next:hover {
color: var(--on-surface);
}
/* Root-drawer items: name + subtitle stacked (mockup) */
.mm__item.has-subtitle .mm__link {
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 3px;
padding: 17px 20px;
}
.mm__item.has-subtitle .mm__linktext {
font-size: 16px;
font-weight: 600;
line-height: 1.2;
}
.mm__subtitle {
font-size: 12px;
font-weight: 400;
color: rgba(26,26,26,.45);
letter-spacing: 0.01em;
line-height: 1.2;
text-align: left;
align-self: stretch;
width: 100%;
}
/* Submenu: black full-width "VISOS PREKĖS" button (mockup) */
.mm__allproducts {
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px 20px;
padding: 14px 16px;
background: var(--on-surface);
color: #FFF;
text-decoration: none;
font-family: var(--font-primary);
font-size: var(--label-md);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
transition: background .15s ease;
}
.mm__allproducts:hover { background: #000; color: #FFF; }
.mm__allproducts-arrow { font-size: 15px; line-height: 1; }
.mm__link b,
.mm__paneltitle b { font-weight: 700; }
/* ==========================================================================
8. DRAWER FOOTER
========================================================================== */
.mm__drawer-footer {
padding: 24px 20px 16px;
border-top: 1px solid rgba(26,26,26,.06);
margin-top: auto;
}
.mm__follow-label {
font-family: var(--font-primary);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: rgba(26,26,26,.45);
}
.mm__socials {
display: flex;
gap: 8px;
}
.mm__social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid rgba(26,26,26,.06);
color: rgba(26,26,26,.5);
text-decoration: none;
transition: border-color .2s ease, color .2s ease;
}
.mm__social:hover {
border-color: rgba(26,26,26,.2);
color: var(--on-surface);
}
.mm__address { margin-top: 14px; }
.mm__address-title {
font-family: var(--font-primary);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: rgba(26,26,26,.45);
margin-bottom: 4px;
}
.mm__address-line {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 400;
color: rgba(26,26,26,.5);
line-height: 1.6;
}
/* ==========================================================================
9. BOTTOMBAR
========================================================================== */
.mm__bottombar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 20px;
border-top: 1px solid rgba(26,26,26,.06);
background: #F8F8F6;
flex-shrink: 0;
}
/* overflow:hidden removed — js fewsetLockScroll already sets inline position:fixed
+ overflow:hidden; the redundant CSS lock caused an open-time reflow/jump on
the PDP (fixed header + 88px bottom pad). The .mm-lock class itself stays (it
drives scrollbar-pad + chrome-hide). */
/* ── Drawer utilities: top-bar links + language switcher on phones ── */
.mm__utils { margin-top: 18px; border-top: 1px solid #ECECEC; }
.mm__utils-row {
display: flex; align-items: center; gap: 10px;
padding: 13px 4px; border-bottom: 1px solid #F2F2EF;
font-size: 13px; letter-spacing: .02em; color: var(--on-surface);
text-decoration: none;
}
.mm__utils-ico {
width: 24px; height: 24px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: #F2F2EF; flex: 0 0 auto;
}
.mm__utils .ktb-flag { width: 18px; height: 12px; object-fit: cover; flex: 0 0 auto; }
.mm__utils-langs { margin-top: 6px; }
.mm__utils-row.is-current { color: #8A8A85; }
/* ── Drawer topbar utilities (replaces the brand text next to ✕) ── */
.mm__utilbar {
display: flex; align-items: center; gap: 14px;
min-width: 0;
/* NO overflow-x:auto here — a scroll container clips the absolutely-
positioned language dropdown (it was opening invisibly) */
overflow: visible;
}
.mm__utilbar { gap: 8px; }
.mm__utilbox {
display: inline-flex; flex-direction: column;
align-items: center; justify-content: center; gap: 3px;
width: 54px; height: 46px; flex: 0 0 auto;
border: 1px solid #E5E5E0; background: #FFF;
color: var(--on-surface); text-decoration: none;
}
.mm__utilbox-ico { display: inline-flex; align-items: center; justify-content: center; height: 16px; }
.mm__utilbox-ico svg { width: 15px; height: 15px; display: block; }
.mm__utilbox-ico .ktb-flag { width: 17px; height: 11px; object-fit: cover; display: block; }
.mm__utilbox-label {
font-size: 8.5px; font-weight: 600; letter-spacing: .05em;
text-transform: lowercase; color: #6F6F6A; line-height: 1;
max-width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Drawer ✕ sized exactly like the utility boxes */
.mm__topbar .mm__close {
width: 54px; height: 46px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
border: 1px solid #E5E5E0; background: #FFF; color: var(--on-surface);
font-size: 17px; line-height: 1; border-radius: 0; padding: 0;
}
/* Language box = dropdown (more languages coming) */
.mm__utilbox--lang { position: relative; padding: 0; border: 0; width: auto; height: auto; }
.mm__utilbox--lang .mm__utilbox-btn {
display: inline-flex; flex-direction: column;
align-items: center; justify-content: center; gap: 3px;
width: 54px; height: 46px;
border: 1px solid #E5E5E0; background: #FFF;
cursor: pointer; padding: 0; border-radius: 0;
}
.mm__utilbox-panel {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
min-width: 180px; background: #FFF;
border: 1px solid #E5E5E0; box-shadow: 0 14px 36px rgba(26,26,26,.12);
padding: 6px 0;
}
.mm__utilbox-row {
display: flex; align-items: center; gap: 10px;
padding: 11px 14px; font-size: 13px; color: var(--on-surface);
text-decoration: none; white-space: nowrap;
}
.mm__utilbox-row:hover { background: #F7F7F5; }
.mm__utilbox-row.is-current { color: #9A9A95; }
.mm__utilbox-row .ktb-flag { width: 18px; height: 12px; object-fit: cover; flex: 0 0 auto; }