/* ub/mega-menu (render.php, view.js).
   Bar: the types in mixed case, 15 px medium; the current and the open item in indigo with the orange underline; the
   panel under the menu row, the content width, bottom corners rounded, a soft shadow over the page (mobiledirect's
   idea, our colours). Left two thirds: a tile per subcategory on the tint, its name in a white pill with an arrow;
   right third: "Produse noi". The panel scrolls inside when taller than the window. Revision 2 (2026-11-13): the tiles'
   ground is the site's tile texture (class ub-tex, site.css + inc/textures.php) with the product cut out large on top.
   Drawer: the phone list, full height, a line icon and a word per item, hairlines (flip's idea). */

/* ---- Bar ------------------------------------------------------------------------------------------------------- */
.ub-mega--bar { position: static; }
.ub-mega__list { display: flex; flex-wrap: nowrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.ub-mega__item { display: flex; align-items: center; margin: 0; }
.ub-mega__link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	min-block-size: 3rem;
	padding: 0 0.4375rem;
	border: 0;
	background: none;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.ub-mega__item.has-panel > .ub-mega__link:not(.ub-mega__toggle--label) { padding-inline-end: 0; }
.ub-mega__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.5rem;
	min-block-size: 3rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
}
.ub-mega .ub-icon { inline-size: 1rem; block-size: 1rem; }
.ub-mega__toggle .ub-icon, .ub-mega__toggle--label .ub-icon { inline-size: 0.875rem; block-size: 0.875rem; }
/* Current (aria-current or inside it) and open: indigo with the orange underline (a fill, 2.35:1 is fine for a bar) */
.ub-mega__link:hover,
.ub-mega__item:is(.is-current, .is-open) > .ub-mega__link,
.ub-mega__item:is(.is-current, .is-open) > .ub-mega__toggle,
.ub-mega__toggle:hover { color: var(--wp--preset--color--primary); }
/* The orange underline: the link's ::after, not a box-shadow on the item (a ring around the item while its link has the
   keyboard's focus reads as a second focus ring); the item stays unpositioned, so its panel hangs from the menu row */
.ub-mega__link { position: relative; }
.ub-mega__item:is(.is-current, .is-open):not(.ub-mega__item--button) > .ub-mega__link::after {
	content: "";
	position: absolute;
	inset-inline: 0.25rem;
	inset-block-end: 0;
	block-size: 3px;
	border-radius: 2px 2px 0 0;
	background: var(--wp--preset--color--accent);
	pointer-events: none;
}
.ub-mega__item.is-current > .ub-mega__link { font-weight: 700; }
.ub-mega__item.is-open .ub-mega__toggle .ub-icon,
.ub-mega__item.is-open .ub-mega__toggle--label .ub-icon { transform: rotate(180deg); }
/* "Reparații": a filled indigo button with its wrench at the row's end */
.ub-mega__item--button { margin-inline-start: auto; padding-block: 0.375rem; }
.ub-mega__cta.wp-element-button { min-block-size: 2.5rem; padding: 0.5rem 1rem; white-space: nowrap; }
.ub-mega__cta .ub-icon { inline-size: 1.125rem; block-size: 1.125rem; }
/* On /reparatii/ the button shows it's the page: darker, with the orange underline the other items get */
.ub-mega__cta.wp-element-button[aria-current="page"] {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ink);
	box-shadow: inset 0 -3px 0 var(--wp--preset--color--accent);
	font-weight: 700;
}

/* The panel */
.ub-mega__panel {
	display: none;
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	z-index: 60;
	max-block-size: calc(100svh - var(--ub-header-h, 10rem) - 1rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--wp--preset--color--line);
	border-block-start: 0;
	border-radius: 0 0 var(--wp--preset--border-radius--xxl) var(--wp--preset--border-radius--xxl);
	background: var(--wp--preset--color--base);
	box-shadow: 0 32px 64px -24px rgb(28 26 58 / 0.35);
	cursor: auto;
}
.ub-mega__item.is-open > .ub-mega__panel { display: block; }
html:not(.ub-js) .ub-mega__item.has-panel:is(:hover, :focus-within) > .ub-mega__panel { display: block; } /* no script */
@media (prefers-reduced-motion: no-preference) {
	html:not([data-ub-motion="off"]) .ub-mega__item.is-open > .ub-mega__panel { animation: ub-mega-in var(--ub-fast) var(--ub-ease); }
	html:not([data-ub-motion="off"]) .ub-mega__toggle .ub-icon { transition: transform var(--ub-fast) var(--ub-ease); }
}
@keyframes ub-mega-in { from { opacity: 0; } }

.ub-mega__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--40); }
.ub-mega__inner.has-new { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* Tiles: 3 in a row; 4 as 2 × 2; 5 as 3 + 2 (the last two wider), so the rows stay full */
.ub-mega__tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); margin: 0; padding: 0; list-style: none; align-content: start; }
.ub-mega__tiles > li { grid-column: span 2; margin: 0; }
.ub-mega__tiles:not(.ub-mega__tiles--info):has(> li:nth-child(4):last-child) > li,
.ub-mega__tiles:not(.ub-mega__tiles--info):has(> li:nth-child(2):last-child) > li,
.ub-mega__tiles:not(.ub-mega__tiles--info):has(> li:nth-child(5):last-child) > li:nth-child(n + 4) { grid-column: span 3; }
.ub-mega__tile {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--xxl);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
:where(.ub-mega__tile:not(.ub-tex)) { background-color: var(--wp--preset--color--tint); } /* the texture's tiles get theirs from it */
.ub-mega__tiles:not(.ub-mega__tiles--info):has(> li:nth-child(4):last-child) .ub-mega__tile,
.ub-mega__tiles:not(.ub-mega__tiles--info):has(> li:nth-child(2):last-child) .ub-mega__tile { aspect-ratio: 16 / 9; }
.ub-mega__tiles:not(.ub-mega__tiles--info):has(> li:nth-child(5):last-child) > li:nth-child(n + 4) .ub-mega__tile { aspect-ratio: 9 / 4; } /* as tall as the first row's */
.ub-mega__art { position: absolute; inset: 0; display: grid; grid-template: 100% / 100%; place-items: center; } /* definite tracks: the image's 100 % is the tile's */
/* The thumbnail (800 × 800, the product cut out on transparency, about 88 % of its height) fills the tile's height, so the
   product stands about 88 % of the tile tall, whole (contain); the pill sits over its foot, as mobiledirect's do. */
.ub-mega__img { inline-size: 100%; block-size: 100%; min-block-size: 0; max-inline-size: none; object-fit: contain; }
.ub-mega__art > .ub-icon { inline-size: 3.5rem; block-size: 3.5rem; color: var(--wp--preset--color--muted); }
.ub-mega__tile--none .ub-mega__art > .ub-icon { opacity: 0.45; }
.ub-mega__pill {
	position: absolute;
	inset-block-end: 0.875rem;
	inset-inline-start: 50%;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	max-inline-size: calc(100% - 1.5rem);
	padding: 0.5rem 0.875rem 0.5rem 1rem;
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	transform: translateX(-50%);
}
.ub-mega__pill > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.ub-mega__pill .ub-icon { inline-size: 1rem; block-size: 1rem; }
.ub-mega__tile:hover .ub-mega__pill { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); }
.ub-mega__tile[aria-current] .ub-mega__pill { box-shadow: inset 0 -3px 0 var(--wp--preset--color--accent), var(--wp--preset--shadow--soft); }
.ub-mega__tile:focus-visible { outline-offset: 3px; }
.ub-mega__soon {
	position: absolute;
	inset-block-start: 0.75rem;
	inset-inline-start: 0.75rem;
	padding: 0.125rem 0.5rem;
	border-radius: var(--wp--preset--border-radius--sm);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}
@media (prefers-reduced-motion: no-preference) {
	html:not([data-ub-motion="off"]) .ub-mega__img { transition: transform var(--ub-fast) var(--ub-ease); }
	html:not([data-ub-motion="off"]) .ub-mega__tile:hover .ub-mega__img { transform: scale(1.03); }
}
/* "Informații": four pastel tiles in one row, a big line icon each */
.ub-mega__tiles.ub-mega__tiles--info { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ub-mega__tiles.ub-mega__tiles--info > li { grid-column: auto; }
.ub-mega__tiles.ub-mega__tiles--info .ub-mega__tile { aspect-ratio: 4 / 3; }
.ub-mega__tiles--info .ub-mega__art { padding-block-end: 3rem; }
.ub-mega__tiles--info .ub-mega__art > .ub-icon { inline-size: 4rem; block-size: 4rem; color: var(--wp--preset--color--primary); }
.ub-mega__tile--lilac { background: var(--wp--custom--pastel--lilac); }
.ub-mega__tile--peach { background: var(--wp--custom--pastel--peach); }
.ub-mega__tile--mint { background: var(--wp--custom--pastel--mint); }
.ub-mega__tile--sky { background: var(--wp--custom--pastel--sky); }

/* "Produse noi": 2 × 2 small cards */
.ub-mega__new { min-inline-size: 0; }
.ub-mega__new-title { margin: 0 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--large); font-weight: 800; }
.ub-mega__new-title::after { content: ""; display: block; inline-size: 1.5rem; block-size: 3px; margin-block-start: 0.375rem; border-radius: 2px; background: var(--wp--preset--color--accent); }
.ub-mega__minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); margin: 0; padding: 0; list-style: none; }
.ub-mega__minis > li { margin: 0; }
.ub-mini { display: flex; flex-direction: column; gap: 0.25rem; color: var(--wp--preset--color--ink); text-decoration: none; }
.ub-mini__img { position: relative; display: block; overflow: hidden; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--lg); background: var(--wp--preset--color--base); }
.ub-mini__img img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1; padding: 0.5rem; object-fit: contain; mix-blend-mode: multiply; }
.ub-mini__badge { position: absolute; inset-block-start: 0.375rem; inset-inline-start: 0.375rem; padding: 0 0.375rem; border-radius: var(--wp--preset--border-radius--sm); background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); font-size: var(--wp--preset--font-size--small); font-weight: 700; line-height: 1.5; }
.ub-mini__name { display: -webkit-box; overflow: hidden; font-size: var(--wp--preset--font-size--small); font-weight: 500; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.ub-mini__price { font-size: var(--wp--preset--font-size--label); font-weight: 800; font-variant-numeric: tabular-nums; }
.ub-mini__price ins { color: var(--wp--preset--color--sale); text-decoration: none; }
.ub-mini__price del { margin-inline-start: 0.25rem; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); font-weight: 500; }
.ub-mini:hover .ub-mini__name { color: var(--wp--preset--color--primary); text-decoration: underline; }

/* ---- Drawer (phones) -------------------------------------------------------------------------------------------- */
.ub-drawer__open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--wp--preset--border-radius--md);
	background: none;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}
.ub-drawer__open:hover { background: var(--wp--preset--color--surface); }
.ub-drawer__open .ub-icon { inline-size: 1.625rem; block-size: 1.625rem; }
dialog.ub-drawer {
	position: fixed;
	inset: 0 auto 0 0;
	inline-size: min(100%, 26rem);
	max-inline-size: none;
	block-size: 100%;
	max-block-size: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	overflow-y: auto;
	overscroll-behavior: contain;
}
dialog.ub-drawer::backdrop { background: rgb(28 26 58 / 0.45); }
html:has(dialog.ub-drawer[open]) { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
	html:not([data-ub-motion="off"]) dialog.ub-drawer[open] { animation: ub-drawer-in 200ms var(--ub-ease); }
}
@keyframes ub-drawer-in { from { transform: translateX(-1.5rem); opacity: 0; } }
.ub-drawer__head {
	position: sticky;
	inset-block-start: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.375rem 0.5rem 0.375rem 1rem;
	border-block-end: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
}
.ub-drawer__title { margin: 0; font-size: var(--wp--preset--font-size--large); font-weight: 800; }
.ub-drawer__close { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 0; border-radius: var(--wp--preset--border-radius--md); background: none; color: var(--wp--preset--color--ink); cursor: pointer; }
.ub-drawer__close:hover { background: var(--wp--preset--color--surface); }
.ub-drawer__close .ub-icon { inline-size: 1.5rem; block-size: 1.5rem; }
.ub-drawer__list, .ub-drawer__sub { margin: 0; padding: 0; list-style: none; }
.ub-drawer__item { margin: 0; border-block-end: 1px solid var(--wp--preset--color--line); }
.ub-drawer__row { display: flex; align-items: stretch; }
.ub-drawer__link,
.ub-drawer__toggle--row {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.875rem;
	min-block-size: 3.25rem;
	padding: 0 1rem;
	border: 0;
	background: none;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}
.ub-drawer__link > .ub-icon,
.ub-drawer__toggle--row > .ub-icon:first-child { inline-size: 1.375rem; block-size: 1.375rem; color: var(--wp--preset--color--primary); }
.ub-drawer__toggle {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 3.25rem;
	padding: 0;
	border: 0;
	border-inline-start: 1px solid var(--wp--preset--color--line);
	background: none;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}
.ub-drawer__toggle.ub-drawer__toggle--row { flex: 1; justify-content: flex-start; inline-size: auto; padding: 0 1rem; border-inline-start: 0; }
.ub-drawer__toggle--row > .ub-icon:last-child { margin-inline-start: auto; }
.ub-drawer__toggle .ub-icon { inline-size: 1.25rem; block-size: 1.25rem; }
.is-expanded > .ub-drawer__row .ub-drawer__toggle > .ub-icon:last-child,
.is-expanded > .ub-drawer__row .ub-drawer__toggle:not(.ub-drawer__toggle--row) > .ub-icon { transform: rotate(180deg); }
.ub-drawer__link:hover, .ub-drawer__toggle:hover { background: var(--wp--preset--color--surface); }
.ub-drawer__sub { padding-block: 0.25rem 0.5rem; background: var(--wp--preset--color--surface); }
.ub-drawer__sub a {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-block-size: 2.75rem;
	padding: 0 1rem 0 3.25rem;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--label);
	text-decoration: none;
}
.ub-drawer__sub a .ub-icon { inline-size: 1.125rem; block-size: 1.125rem; margin-inline-start: -1.75rem; color: var(--wp--preset--color--primary); }
.ub-drawer__sub a:hover { color: var(--wp--preset--color--primary); text-decoration: underline; }
.ub-drawer__soon { margin-inline-start: auto; padding: 0 0.5rem; border-radius: var(--wp--preset--border-radius--sm); background: var(--wp--preset--color--tint); color: var(--wp--preset--color--primary); font-size: var(--wp--preset--font-size--small); font-weight: 700; }
/* The current page: indigo, bold, the orange bar at its left */
.ub-drawer [aria-current="page"] { color: var(--wp--preset--color--primary); font-weight: 700; box-shadow: inset 3px 0 0 var(--wp--preset--color--accent); }