/* Site CSS for what theme.json can't express. Keep it small: tokens and block styles belong in
   theme.json; the header, footer, listing and card have their own files (functions.php). */

:root {
	--ub-focus: var(--wp--preset--color--primary);
	--ub-topbar-h: 2.5rem; /* the top bar scrolls away; header.css sticks the rest */
}

/* Sizes include padding and border; form controls use the site's font */
*, *::before, *::after { box-sizing: border-box; }
input, select, textarea, button { font-family: inherit; }

/* Full-width sections touch each other (no root block gap between them) */
.wp-site-blocks > main > .alignfull, .entry-content > .alignfull { margin-block-start: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Buttons never shrink under 48 px */
.wp-element-button, .wp-block-button__link { min-block-size: 48px; display: inline-flex; align-items: center; justify-content: center; }

/* Icons from assets/icons as CSS masks (inc/icons.php): any block with the classes
   "ub-ic ub-i-<name>" gets the icon before its text, in currentColor or --ub-ic-color. */
.ub-ic { display: flex; align-items: flex-start; gap: 0.5em; }
.ub-ic::before {
	content: "";
	flex: none;
	inline-size: 1.25em;
	block-size: 1.25em;
	margin-block-start: calc((1lh - 1.25em) / 2);
	background-color: var(--ub-ic-color, currentColor);
	-webkit-mask: var(--ub-i, var(--ub-i-none)) center / contain no-repeat;
	mask: var(--ub-i, var(--ub-i-none)) center / contain no-repeat;
}

/* Icons that draw their lines in (class "ub-draw" on a block, inc/icons.php): on the front end the icon is
   inline SVG in the mask's place, the same size. Below the first screen, once its ub/reveal item appears,
   each line draws itself, like the home's category tiles; --ub-draw-delay staggers icons inside one item.
   The editor keeps the mask. */
.ub-ic--svg::before { content: none; }
.ub-ic__svg {
	flex: none;
	inline-size: 1.25em;
	block-size: 1.25em;
	margin-block-start: calc((1lh - 1.25em) / 2);
	color: var(--ub-ic-color, currentColor);
	overflow: visible;
}
@media (prefers-reduced-motion: no-preference) {
	html:not([data-ub-motion="off"]) .wp-block-ub-reveal > .ub-pending .ub-ic__svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
	html:not([data-ub-motion="off"]) .wp-block-ub-reveal > :not(.ub-pending) .ub-ic__svg * {
		stroke-dasharray: 1;
		transition: stroke-dashoffset 1.1s cubic-bezier(0.45, 0, 0.2, 1) calc(var(--ub-delay, 0ms) + var(--ub-draw-delay, 150ms));
	}
}

/* "Adaugă în coș" shows a tick for a moment after the product was added (assets/motion.js: .ub-added);
   it pops in only with motion allowed */
.wc-block-components-product-button__button.ub-added::before,
.single_add_to_cart_button.ub-added::before {
	content: "";
	flex: none;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	margin-inline-end: 0.375rem;
	background-color: currentColor;
	-webkit-mask: var(--ub-i-check, var(--ub-i-none)) center / contain no-repeat;
	mask: var(--ub-i-check, var(--ub-i-none)) center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
	html:not([data-ub-motion="off"]) .ub-added::before { animation: ub-tick-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
}
@keyframes ub-tick-in {
	from { opacity: 0; transform: scale(0.2) rotate(-20deg); }
}

/* WooCommerce's breadcrumbs (shop, categories, products): muted, underlined on hover */
.wc-block-breadcrumbs { color: var(--wp--preset--color--muted); font-size: 0.875rem; }
.wc-block-breadcrumbs a { color: var(--wp--preset--color--muted); text-decoration: none; }
.wc-block-breadcrumbs a:hover { color: var(--wp--preset--color--ink); text-decoration: underline; }

/* "TVA inclus" after prices (inc/shop.php) and "de la" before price ranges. Each stays in one piece:
   where a price with its ",00" (Paul, 2026-10-30) leaves no room beside it, "TVA inclus" goes to its own
   row instead of breaking after "TVA" (the home hero's card at 360 px). */
.woocommerce-price-suffix { font-size: 0.8125rem; font-weight: 400; font-family: var(--wp--preset--font-family--body); color: var(--wp--preset--color--muted); white-space: nowrap; }
.ub-price-from { font-size: 0.8125rem; font-weight: 500; font-family: var(--wp--preset--font-family--body); color: var(--wp--preset--color--muted); white-space: nowrap; }

/* WP Chat App's floating button (its own markup, styled from here): the site's font instead of the
   plugin's Arial. Below 1024 px only the round icon: the label ("Ai nevoie de ajutor? Discută cu noi")
   covered the home hero's photo at 768 and 390. It is hidden visually only, so it still names the
   button for screen readers. The plugin sets the label's size and position inline: hence !important. */
#wa .wa__btn_popup,
#wa .wa__popup_chat_box { font-family: var(--wp--preset--font-family--body); }
#wa .wa__btn_popup_txt { letter-spacing: 0; }
@media (max-width: 1023px) {
	#wa .wa__btn_popup_txt {
		position: absolute !important;
		inline-size: 1px !important;
		block-size: 1px !important;
		margin: -1px !important;
		padding: 0 !important;
		overflow: hidden !important;
		clip-path: inset(50%) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}
}

/* WP Chat App's floating button steps aside while the phone menu, the filters, the mini-cart drawer, a
   product gallery's lightbox or CookieYes's preferences window are open (product pages hide it
   altogether: product.css; UB Kit hides it while the cookie banner shows, not the window) */
body:has(.wp-block-navigation__responsive-container.is-menu-open, .wc-block-product-filters.is-overlay-opened, .wc-block-components-drawer__screen-overlay:not(.wc-block-components-drawer__screen-overlay--is-hidden), .wc-block-product-gallery-dialog[open], .cky-modal.cky-modal-open) #wa { display: none !important; }