/* Sections (a group with the class ub-sec) and tiles (the tile block styles), loaded only where one is
   (functions.php): section head, hero, model chips, trust strip, category and model tiles, the brand tiles' grid (the
   tile is the theme's block ub/brand-tile), the free-shipping bar, the "În curând" state, the repairs teaser, notes; and
   the style page's swatches, type specimens and texture pick.
   Hover: tiles lift 2 px in 150 ms on the site's curve (custom.motion), only with motion allowed. */

/* ---- Section head: heading left, "Vezi toate …" right ----------------------------------------------------------- */
.ub-sec__head { gap: 0.25rem 1.5rem; }
.ub-sec__head > * { margin: 0; }
/* Two links in one "more" paragraph (a slider of two categories): side by side, wrapping */
p.ub-sec__more { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.ub-sec__more a,
a.ub-more {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-block-size: 2.75rem;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	text-decoration: none;
}
.ub-sec__more a::after {
	content: "";
	inline-size: 1.125rem;
	block-size: 1.125rem;
	background-color: currentColor;
	-webkit-mask: var(--ub-i-arrow) center / contain no-repeat;
	mask: var(--ub-i-arrow) center / contain no-repeat;
}
.ub-sec__more a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
:root { --ub-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E"); }
.ub-sec__lead { max-inline-size: 42rem; color: var(--wp--preset--color--muted); }
/* Running text in a wide section keeps a readable line (about 75 characters) */
.ub-sec__body > :is(p, ul, ol):not(.is-style-ub-badge, .ub-sec__lead) { max-inline-size: 46rem; }

/* ---- Hero: three rounded photo tiles, the mobiledirect way (User, 2026-11-12, revision 1; patterns/hero-bento.php) ---
   One big tile left (about 63 %), two stacked right, 22 px corners, in the content width; nothing moves on its own.
   Each tile is a cover: a pale image (objects on its right, ground #F2F1F8) and, at its bottom left, a title, one
   line and a button in ink. The text keeps to the image's empty left part (36 % of the big tile, 42 % of a small one:
   the folii tile's glass starts at 43 %). Below 1024 px the big tile takes the full width and the small ones sit side
   by side with their image above the text; below 600 px every tile does, one under the other. */
.wp-block-group.ub-bento {
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	grid-template-rows: repeat(2, minmax(13.5rem, auto));
	gap: var(--wp--preset--spacing--30);
}
.ub-bento > * { margin: 0 !important; }
.ub-bento__tile.wp-block-cover {
	min-block-size: 0;
	padding: var(--wp--preset--spacing--40);
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--xxl);
	background-color: var(--wp--custom--hero-ground);
}
.ub-bento__tile--big { grid-column: 1; grid-row: 1 / span 2; }
.ub-bento__tile--small { grid-column: 2; }
.ub-bento__tile > .wp-block-cover__inner-container { max-inline-size: 36%; }
.ub-bento__tile--small > .wp-block-cover__inner-container { max-inline-size: 42%; }
.ub-bento__tile .wp-block-cover__inner-container > * { margin-block: 0; }
.ub-bento__tile .wp-block-cover__inner-container > * + * { margin-block-start: var(--wp--preset--spacing--20); }
.ub-bento__tile .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--30) !important; }
.ub-bento__title { line-height: 1.12; }
.ub-bento__tile .wp-block-button__link { padding-inline: 1rem; white-space: nowrap; }
.ub-bento__line { color: var(--wp--preset--color--ink); }
.ub-bento__tile--big .ub-bento__line { font-size: var(--wp--preset--font-size--large); }
@media (max-width: 1023px) {
	.wp-block-group.ub-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
	.ub-bento__tile--big { grid-column: 1 / -1; grid-row: auto; min-block-size: 24rem; }
	.ub-bento__tile--small { grid-column: auto; }
	.ub-bento__tile--big > .wp-block-cover__inner-container { max-inline-size: 38%; }
}
/* A tile with its image above the text (the image whole, on the same ground) */
@media (max-width: 1023px) {
	.ub-bento__tile--small.wp-block-cover { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; }
	.ub-bento__tile--small > .wp-block-cover__image-background { position: static; order: -1; inline-size: 100%; block-size: auto; aspect-ratio: 1200 / 649; }
	.ub-bento__tile--small > .wp-block-cover__inner-container { max-inline-size: none; inline-size: 100%; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); }
}
@media (max-width: 599px) {
	.wp-block-group.ub-bento { grid-template-columns: minmax(0, 1fr); }
	.ub-bento__tile--big.wp-block-cover { flex-direction: column; align-items: stretch; justify-content: flex-start; min-block-size: 0; padding: 0; }
	.ub-bento__tile--big > .wp-block-cover__image-background { position: static; order: -1; inline-size: 100%; block-size: auto; aspect-ratio: 1672 / 941; }
	.ub-bento__tile--big > .wp-block-cover__inner-container { max-inline-size: none; inline-size: 100%; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); }
}

/* ---- "Alege modelul tău": model chips (core/button, style Chip) ------------------------------------------------- */
.ub-chips { gap: var(--wp--preset--spacing--10); }
.ub-chips-row { gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); align-items: center; }
.ub-chips-row > * { margin: 0; }
.ub-chips-row h2 { font-size: var(--wp--preset--font-size--large); }

.ub-sec--trust { border-block-start: 1px solid var(--wp--preset--color--line); }

/* ---- Trust strip: four true facts, each with an orange check (a fill, never text) ------------------------------- */
.ub-trust {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}
@media (min-width: 1024px) { .ub-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ub-trust > * { margin: 0 !important; }
.ub-trust__item {
	position: relative;
	padding-inline-start: 2.25rem;
}
.ub-trust__item > * { margin: 0; }
.ub-trust__item::before {
	content: "";
	position: absolute;
	inset-block-start: 0.125rem;
	inset-inline-start: 0;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--accent) var(--ub-i-check) center / 0.875rem no-repeat;
}
:root { --ub-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1A3A' stroke-width='3.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ub-trust__title { font-weight: 700; }
.ub-trust__text { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }

/* ---- Tiles: shared ----------------------------------------------------------------------------------------------
   The name's link covers the whole tile (one link per tile); its focus ring is drawn around the tile. */
:is(.is-style-ub-cat-tile, .is-style-ub-model-tile) { position: relative; margin: 0 !important; }
:is(.is-style-ub-cat-tile, .is-style-ub-model-tile) > * { margin-block: 0; }
:is(.is-style-ub-cat-tile, .is-style-ub-model-tile) a { color: inherit; text-decoration: none; }
:is(.is-style-ub-cat-tile, .is-style-ub-model-tile) a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
:is(.is-style-ub-cat-tile, .is-style-ub-model-tile) a:focus-visible { outline: none !important; box-shadow: none; }
:is(.is-style-ub-cat-tile, .is-style-ub-model-tile):has(a:focus-visible) { outline: 3px solid var(--ub-focus); outline-offset: 2px; }
:is(.is-style-ub-cat-tile, .is-style-ub-model-tile):hover { border-color: color-mix(in srgb, var(--wp--preset--color--primary) 35%, var(--wp--preset--color--line)); }
@media (prefers-reduced-motion: no-preference) {
	html:not([data-ub-motion="off"]) :is(.is-style-ub-cat-tile, .is-style-ub-model-tile) {
		transition: transform var(--ub-fast) var(--ub-ease), box-shadow var(--ub-fast) var(--ub-ease), border-color var(--ub-fast) var(--ub-ease), background-color var(--ub-fast) var(--ub-ease);
	}
	html:not([data-ub-motion="off"]) :is(.is-style-ub-cat-tile, .is-style-ub-model-tile):hover {
		transform: translateY(var(--wp--custom--motion--lift, -2px));
		box-shadow: var(--wp--preset--shadow--lifted);
	}
}

/* ---- Category tiles: white card, the image area, name, a 4 px orange bar along the bottom that grows on hover -------
   The image area (revision 2, 2026-11-13) is a square on the site's tile texture (site.css, inc/textures.php) with the
   category's picture on top: the product cut out on transparency (800 × 800, the product about 88 % of its height), so
   it stands about 88 % of the area's height, whole.
   9 types: 3 columns on phones (3 × 3); 600–1279 px 3 columns of wide tiles (image left, name right); from 1280 px
   one row of 9. */
.ub-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); }
@media (min-width: 1280px) { .ub-cats { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 0.75rem; } }
.is-style-ub-cat-tile { display: flex; flex-direction: column; align-items: center; overflow: hidden; text-align: center; }
.is-style-ub-cat-tile::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 4px;
	background: var(--wp--preset--color--accent);
	transform-origin: bottom;
}
@media (prefers-reduced-motion: no-preference) {
	html:not([data-ub-motion="off"]) .is-style-ub-cat-tile::after { transition: transform var(--ub-fast) var(--ub-ease); }
}
.is-style-ub-cat-tile:hover::after { transform: scaleY(1.5); }
.ub-tile__img {
	display: grid;
	grid-template: 100% / 100%;
	place-items: center;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1;
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--md);
}
figure.ub-tile__img img { inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: contain; }
/* No picture yet: a neutral picture sign on the surface colour */
.ub-tile__ph { border-radius: var(--wp--preset--border-radius--md); background: var(--wp--preset--color--surface); }
.ub-tile__ph::before {
	content: "";
	inline-size: 40%;
	block-size: 40%;
	background-color: color-mix(in srgb, var(--wp--preset--color--muted) 45%, transparent);
	-webkit-mask: var(--ub-i-picture) center / contain no-repeat;
	mask: var(--ub-i-picture) center / contain no-repeat;
}
:root { --ub-i-picture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Ccircle cx='9' cy='9.5' r='1.75'/%3E%3Cpath d='m4 18 5.5-5.5 4 4L16 14l4 4'/%3E%3C/svg%3E"); }
.ub-tile__name { overflow-wrap: anywhere; hyphens: manual; } /* long names carry a soft hyphen (Încărcă­toare) */
@media (max-width: 599px) { .is-style-ub-cat-tile { padding-inline: 0.375rem !important; } }
@media (min-width: 600px) and (max-width: 1279px) {
	.is-style-ub-cat-tile { flex-direction: row; gap: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30) var(--wp--preset--spacing--10) var(--wp--preset--spacing--10) !important; text-align: start; }
	.ub-tile__img { flex: none; inline-size: 5rem; }
	.ub-tile__name { font-size: var(--wp--preset--font-size--medium); }
}

/* ---- Brand tiles' grid (the tile: blocks/brand-tile, the maker's logo since revision 2). 10 brands + "Alte mărci",
   which spans two columns (class ub-brand--all on its block), so the grid holds at 2, 4 and 6 columns. */
.ub-brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); }
@media (min-width: 768px) { .ub-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ub-brands { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ub-brands > .ub-brand--all { grid-column: span 2; }

/* ---- Model tiles: text first (name, year chip, count); 6 models: 2, 3 or 6 columns -------------------------------- */
.ub-models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); }
@media (min-width: 768px) { .ub-models { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ub-models { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.is-style-ub-model-tile { display: flex; flex-direction: column; align-items: flex-start; }
.ub-model__name { font-size: var(--wp--preset--font-size--large); font-weight: 700; line-height: 1.25; }
.ub-model__year {
	display: inline-block;
	padding: 0 0.5rem;
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.6;
}
.ub-model__count { margin-block-start: auto !important; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }

/* ---- Free-shipping bar (the cart's comes in the build; this is the look) ----------------------------------------- */
.ub-shipbar { max-inline-size: 40rem; }
.ub-shipbar > * { margin-block: 0; }
.ub-shipbar > * + * { margin-block-start: var(--wp--preset--spacing--10); }
.ub-shipbar progress {
	display: block;
	inline-size: 100%;
	block-size: 0.625rem;
	border: 0;
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--surface);
	overflow: hidden;
	appearance: none;
}
.ub-shipbar progress::-webkit-progress-bar { border-radius: var(--wp--preset--border-radius--pill); background: var(--wp--preset--color--surface); }
.ub-shipbar progress::-webkit-progress-value { border-radius: var(--wp--preset--border-radius--pill); background: var(--wp--preset--color--accent); }
.ub-shipbar progress::-moz-progress-bar { border-radius: var(--wp--preset--border-radius--pill); background: var(--wp--preset--color--accent); }
.ub-shipbar__sum { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }

/* ---- "În curând": an empty subcategory, designed (the client's wish, Q5) ----------------------------------------- */
.ub-soon {
	border: 2px dashed var(--wp--preset--color--line);
	border-radius: var(--wp--preset--border-radius--xl);
	text-align: center;
}
.ub-soon > * { margin-inline: auto; }
.ub-soon > .wp-block-buttons { justify-content: center; }
.ub-soon p:not(.is-style-ub-badge) { max-inline-size: 30rem; color: var(--wp--preset--color--muted); }

/* The page of an empty category (inc/shop.php): the box in the listing's place, no filters, sorting or count */
.ub-soon--page { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); }
.ub-soon--page > * + * { margin-block-start: var(--wp--preset--spacing--20); }
.ub-catalog__layout:has(.ub-soon--page) { grid-template-columns: minmax(0, 1fr) !important; }
.ub-catalog__layout:has(.ub-soon--page) :is(.ub-catalog__filters, .ub-catalog__toolbar, .wp-block-query-pagination) { display: none !important; }

/* ---- Repairs teaser ---------------------------------------------------------------------------------------------- */
.ub-repairs { gap: var(--wp--preset--spacing--40); align-items: center; }
.ub-repairs > * { margin: 0 !important; }
.ub-repairs__text > * { margin-block: 0; }
.ub-repairs__text > * + * { margin-block-start: var(--wp--preset--spacing--20); }
.ub-repairs__points { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--wp--preset--spacing--20); }
.ub-repairs__points li { margin: 0; }
.ub-repairs__points li { position: relative; padding-inline-start: 2.25rem; font-weight: 600; }
.ub-repairs__points li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.0625rem;
	inset-inline-start: 0;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--base) var(--ub-i-check) center / 0.875rem no-repeat;
}

/* ---- Grids inside sections: no editor flow margins between items --------------------------------------------------- */
:is(.ub-cats, .ub-brands, .ub-models, .ub-trust, .ub-swatches, .ub-texpick) > * { margin-block-start: 0 !important; }

/* ---- Note (styles/blocks/note.json): a remark for the people approving, not page content ------------------------ */
.has-tint-background-color .is-style-ub-note { background-color: var(--wp--preset--color--base); }
.is-style-ub-note > * { margin-block: 0; }
.is-style-ub-note > * + * { margin-block-start: var(--wp--preset--spacing--10); }

/* ---- The style page (/stil/): swatches and type specimens -------------------------------------------------------- */
.ub-swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30); }
@media (min-width: 768px) { .ub-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ub-swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ub-swatch > * { margin: 0 !important; }
.ub-swatch > * + * { margin-block-start: 0.25rem !important; }
.ub-swatch__chip { block-size: 4.5rem; margin-block-end: 0.5rem !important; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--preset--border-radius--md); }
.ub-swatch__name { font-weight: 700; }
.ub-swatch__meta { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.ub-specimens > * { margin: 0 !important; padding-block: var(--wp--preset--spacing--20); border-block-end: 1px solid var(--wp--preset--color--line); }
.ub-specimen__label { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); font-weight: 500; }
.ub-specimen > * { margin: 0; }
.ub-specimen > * + * { margin-block-start: 0.25rem; }
.ub-row { gap: var(--wp--preset--spacing--20); align-items: center; }
.ub-row > * { margin: 0; }

/* The texture pick (/stil/, revision 2): four numbered rows, each four of a type's subcategory tiles the mega menu's
   way (blocks/mega-menu's tile CSS), three on the tint and the last on the accent; 2 × 2 below 900 px. */
.ub-texpick { display: grid; gap: var(--wp--preset--spacing--40); }
.ub-texpick__row > * { margin: 0; }
.ub-texpick__row > * + * { margin-block-start: var(--wp--preset--spacing--20); }
.ub-texpick__name { font-size: var(--wp--preset--font-size--large); font-weight: 700; }
.ub-texpick__no {
	display: inline-grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	margin-inline-end: 0.5rem;
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-weight: 800;
}
.ub-texpick__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--20); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .ub-texpick__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ub-texpick__tiles > li { margin: 0; }
/* Narrow screens: square tiles and a smaller pill without its arrow, so the product still shows under it */
@media (max-width: 899px) {
	.ub-texpick__tiles .ub-mega__tile { aspect-ratio: 1; }
	.ub-texpick__tiles .ub-mega__pill { inset-block-end: 0.5rem; max-inline-size: calc(100% - 1rem); padding: 0.3125rem 0.625rem; font-size: var(--wp--preset--font-size--small); }
	.ub-texpick__tiles .ub-mega__pill .ub-icon { display: none; }
}