/* The product page (templates/single-product.html), loaded only there (inc/product.php).
   Desktop: gallery about 55 % on the left (sticky while you read, motion allowed), the info on the
   right. Below 1024 px: one column. */

.ub-product > .wc-block-breadcrumbs { margin-block-end: 0; }

/* ---- Top: gallery | info ------------------------------------------------------------------- */
.ub-product__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--40); margin-block-start: 1rem !important; }
.ub-product__top > * { margin: 0 !important; min-inline-size: 0; }
@media (min-width: 1024px) {
	.ub-product__top { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
	.ub-product__media { position: sticky; inset-block-start: calc(var(--ub-header-h, 8rem) - var(--ub-topbar-h) + 1rem); }
}

/* Gallery: images on the surface colour, whole (contain); thumbnails left on desktop, below on phones */
.ub-product .wc-block-product-gallery { gap: 0.75rem; }
.ub-product .wc-block-product-gallery-large-image { border-radius: 16px; background: var(--wp--preset--color--surface); }
.ub-product .wc-block-product-gallery-large-image__wrapper { aspect-ratio: 4 / 3; background: var(--wp--preset--color--surface); }
.ub-product .wc-block-product-gallery-large-image .wc-block-components-product-image img { object-fit: contain !important; mix-blend-mode: multiply; padding: 0.5rem; }
.ub-product .wc-block-product-gallery-thumbnails__thumbnail { border-radius: 10px; background: var(--wp--preset--color--surface); overflow: hidden; }
.ub-product .wc-block-product-gallery-thumbnails__thumbnail__image { object-fit: contain; mix-blend-mode: multiply; border-radius: 10px; }
.ub-product .wc-block-product-gallery-thumbnails__thumbnail__image--is-active { outline: 2px solid var(--wp--preset--color--primary); outline-offset: -2px; }
.ub-product .wc-block-next-previous-buttons__button {
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	box-shadow: var(--wp--preset--shadow--soft);
}
.ub-product .wc-block-product-gallery-large-image__inner-blocks { padding: 0.5rem; }
.ub-product .wc-block-components-product-sale-badge { border: 0; border-radius: 6px; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); font-size: 0.8125rem; text-transform: none; }
/* Thumbnails: square tiles, never squeezed (WooCommerce's column shrank Raptor's 9 to 62 px tall in
   104 px tiles), the photo filling its tile */
.ub-product .wc-block-product-gallery-thumbnails__thumbnail { flex: none; aspect-ratio: 1; }
.ub-product .wc-block-product-gallery-thumbnails__thumbnail__image { inline-size: 100%; block-size: 100%; }
@media (min-width: 601px) {
	/* The thumbnail column is exactly as tall as the large image, starts at its top and scrolls when the
	   photos don't fit (WooCommerce makes it 5.5× its width and centres the large image against it) */
	.ub-product .wc-block-product-gallery { align-items: stretch; }
	.ub-product .wc-block-product-gallery-thumbnails { position: relative; aspect-ratio: auto !important; } /* WooCommerce sets it with a (0,4,0) selector */
	.ub-product .wc-block-product-gallery-thumbnails__scrollable { position: absolute; inset: 0; }
}
@media (min-width: 601px) and (max-width: 1023px) {
	/* One column: the gallery leaves room for the title on a tablet's first screen */
	.ub-product .wc-block-product-gallery-large-image__wrapper { max-block-size: 60vh; }
}
@media (max-width: 600px) {
	.ub-product .wc-block-product-gallery { flex-direction: column; }
	.ub-product .wc-block-product-gallery-thumbnails { order: 2; }
	.ub-product .wc-block-product-gallery-thumbnails__scrollable { gap: 0.5rem; }
	.ub-product .wc-block-product-gallery-thumbnails__thumbnail { flex: 0 0 4.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.ub-product .wc-block-product-gallery *,
	.wc-block-product-gallery-dialog * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---- Info column ----------------------------------------------------------------------------- */
.ub-product__info { display: flex; flex-direction: column; gap: 1rem; }
.ub-product__info > * { margin: 0 !important; }
.ub-product__title { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem); line-height: 1.15; overflow-wrap: anywhere; }
.ub-product__meta { gap: 0.5rem 1rem; align-items: center; }
.ub-product__meta > * { margin: 0 !important; }
.ub-product__meta .wp-block-ub-product-tags { font-size: 0.875rem; }
.ub-product__specs[data-look="tiles"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
.ub-product__specs[data-look="tiles"] .ub-specs__item { padding: 0.75rem; background: var(--wp--preset--color--surface); border-color: var(--wp--preset--color--surface); }
/* A value wraps only at a space or dash, and only when it can't fit (the block's own style breaks
   anywhere, for the card) */
.ub-product__specs[data-look="tiles"] .ub-specs__value { font-size: 1.0625rem; line-height: 1.25; overflow-wrap: normal; text-wrap: balance; }
.ub-product__specs[data-look="tiles"] .ub-specs__label { font-size: 0.8125rem; }
/* Phones: three tiles down to 350 px, each value on one line ("60–80 km" broke after its dash at 390 px):
   15 px values and 10 px padding leave about 85 px, and "60–80 km" needs 79. */
@media (max-width: 600px) {
	.ub-product__specs[data-look="tiles"] { gap: 0.5rem; }
	.ub-product__specs[data-look="tiles"] .ub-specs__item { padding: 0.625rem 0.625rem 0.75rem; }
	.ub-product__specs[data-look="tiles"] .ub-specs__value { font-size: 0.9375rem; }
}
@media (max-width: 349px) { .ub-product__specs[data-look="tiles"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: the price box comes before the spec tiles, so the price is on the first screen (the tiles hold
   no links: the focus order is unchanged) */
@media (max-width: 600px) {
	.ub-product__specs { order: 1; }
	.ub-product__facts { order: 2; }
}

/* The buy box: price, options, quantity + button, WhatsApp */
.ub-product__buy {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	scroll-margin-block-start: calc(var(--ub-header-h, 8rem) + 1rem);
}
.ub-product__buy > * { margin: 0 !important; }
.ub-product__price .wc-block-components-product-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.5rem;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}
.ub-product__price del { color: var(--wp--preset--color--muted); font-size: 1rem; font-weight: 500; }
.ub-product__price ins { text-decoration: none; }
.ub-product__price .woocommerce-price-suffix,
.ub-product__price .ub-price-from { font-size: 0.875rem; letter-spacing: 0; }

/* Options as pills (WooCommerce's chips) */
.ub-product__buy .wc-block-add-to-cart-with-options { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 1rem; }
.ub-product__buy .wc-block-add-to-cart-with-options > * { margin: 0 !important; }
/* What plugins print after the add-to-cart button, moved under the form by ub-site (add-to-cart-extensions.php): each
   piece a full-width row. Their own stylesheets may force flex-basis or min-width (!important, for row layouts):
   UniCredit's calculator did, and in our column it became a second column beside the form, off a phone's screen
   (live, 2026-11-02). Two classes: the plugins' own !important rules come later in the page and win a tie. */
.ub-product__buy .ub-product__extras { display: flex; flex-direction: column; gap: 1rem; }
.ub-product__buy .ub-product__extras > * { flex: none !important; inline-size: 100% !important; min-inline-size: 0 !important; max-inline-size: 100%; margin: 0 !important; box-sizing: border-box; }
/* UniCredit's calculator on phones: inside the buy card its 20 px padding doubled ours and "Rata lunara: 269.98 Lei"
   broke over two lines; the label and the amount each stay whole, the amount under the label when the row is too
   narrow (320 px). */
@media (max-width: 600px) {
	.ub-product__buy .ub-product__extras > .unicredit-payment-calculator { padding: 0.75rem !important; }
	.ub-product__buy .unicredit-calculator-header { flex-wrap: wrap; gap: 0.5rem 0.75rem !important; }
	.ub-product__buy .unicredit-calculator-header-text { font-size: 1rem; }
	.ub-product__buy .unicredit-monthly-payment { flex-wrap: wrap; justify-content: space-between; column-gap: 0.5rem; block-size: auto !important; }
	.ub-product__buy .unicredit-payment-label,
	.ub-product__buy .unicredit-payment-amount { white-space: nowrap; }
	.ub-product__buy .unicredit-payment-amount { font-size: 1.25rem; }
}
.ub-product__buy .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute .wp-block-group { margin: 0 !important; gap: 0.5rem; }
.ub-product__buy .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute + .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute { margin-block-start: 0.875rem; }
.ub-product__buy .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name { color: var(--wp--preset--color--ink); font-size: 0.875rem; font-weight: 600; }
.ub-product__buy .wc-block-product-filter-chips__items { gap: 0.5rem; }
.ub-product__buy .wc-block-product-filter-chips__item {
	min-block-size: 2.75rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	font-weight: 500;
}
.ub-product__buy .wc-block-product-filter-chips__item:hover { border-color: var(--wp--preset--color--ink); background: var(--wp--preset--color--base); }
/* Selected: accent with on-accent text, like the listing's selected filter chips (BRIEF.md 10.3) */
.ub-product__buy .wc-block-product-filter-chips__item[aria-checked="true"] { border-color: var(--wp--preset--color--accent); background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); font-weight: 600; }
.ub-product__buy .wc-block-product-filter-chips__item:disabled { opacity: 0.55; text-decoration: line-through; cursor: not-allowed; }
.ub-product__buy .wp-block-woocommerce-product-stock-indicator { margin: 0 !important; font-size: 0.875rem; }
.ub-product__buy .wp-block-woocommerce-product-stock-indicator:empty { display: none; }
/* Quantity and button on one row (WooCommerce's hidden inputs follow the row, so no :last-child) */
.ub-product__buy .wc-block-add-to-cart-with-options > .wp-block-group:has(> .wp-block-woocommerce-add-to-cart-with-options-quantity-selector) { flex-wrap: nowrap; gap: 0.625rem; }
.ub-product__buy .wp-block-woocommerce-product-button { display: flex; min-inline-size: 0; }
.ub-product__buy .wp-block-woocommerce-add-to-cart-with-options-quantity-selector { flex: none; }
.ub-product__buy .wc-block-components-quantity-selector { min-block-size: 3rem; border: 1px solid var(--wp--preset--color--line); border-radius: 10px; }
.ub-product__buy .wc-block-components-quantity-selector button { min-inline-size: 2.5rem; }
/* Phones: "Adaugă în coș" on one line beside the quantity from 360 px (colleague's bug4, 2026-10-30: at
   375 px it broke onto two lines). A 114 px quantity box (36 px − / +, a 40 px number) instead of 133,
   and 12 px button padding instead of 24. */
@media (max-width: 600px) {
	.ub-product__buy .wc-block-add-to-cart-with-options > .wp-block-group:has(> .wp-block-woocommerce-add-to-cart-with-options-quantity-selector) { gap: 0.5rem; }
	.ub-product__buy .wc-block-components-quantity-selector button { min-inline-size: 2.25rem; inline-size: 2.25rem; }
	.ub-product__buy .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { inline-size: 2.5rem; min-inline-size: 2.5rem; }
	.ub-product__buy .wp-block-woocommerce-product-button .wc-block-components-product-button__button { padding-inline: 0.75rem; }
}
/* The button fills the rest of the row: its wrapper is a column flex box aligned to the start
   (WooCommerce's "align-left"), which kept the button at its text's width */
.ub-product__buy .wp-block-woocommerce-product-button { flex: 1 1 auto; align-items: stretch; margin: 0 !important; }
.ub-product__buy .wp-block-woocommerce-product-button .wc-block-components-product-button__button {
	inline-size: 100%;
	min-block-size: 3rem;
	border-radius: 10px;
	font-size: 1rem;
	font-weight: 600;
}
/* Options not chosen yet: WooCommerce fades the button to 50 % (white on pale green, 2.2:1); a readable
   disabled look instead */
.ub-product__buy .wp-block-woocommerce-product-button .wc-block-components-product-button__button.disabled,
.ub-product__buy .wp-block-woocommerce-product-button .wc-block-components-product-button__button:disabled {
	opacity: 1;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	cursor: not-allowed;
}

/* "Întreabă pe WhatsApp": a secondary button */
.ub-product__ask { margin: 0 !important; }
.ub-product__ask .wp-block-button { inline-size: 100%; }
.ub-product__ask .wp-block-button__link {
	inline-size: 100%;
	gap: 0.5rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
}
.ub-product__ask .wp-block-button__link::before {
	content: "";
	inline-size: 1.25rem;
	block-size: 1.25rem;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: var(--ub-i-whatsapp-line, var(--ub-i-none)) center / contain no-repeat;
	mask: var(--ub-i-whatsapp-line, var(--ub-i-none)) center / contain no-repeat;
}
.ub-product__ask .wp-block-button__link:hover { border-color: var(--wp--preset--color--ink); background: var(--wp--preset--color--surface); }

/* WP Chat App's bubble is off on product pages, at every width: the buy box has its own "Întreabă pe
   WhatsApp" (on phones the bubble covered the facts and the summary, on desktop that button) */
body.single-product #wa { display: none !important; }

/* Three facts */
.ub-product__facts { display: flex; flex-direction: column; gap: 0.5rem; --ub-ic-color: var(--wp--preset--color--primary); font-size: 0.9375rem; }
.ub-product__facts > p { margin: 0; }
/* Each fact is one flowing sentence with its links inline: the icon sits in the start padding. As a
   flex row (.ub-ic) the returns fact split its text and two links into three columns. */
.ub-product__facts > p.ub-ic { display: block; position: relative; padding-inline-start: 1.75em; }
.ub-product__facts > p.ub-ic::before { position: absolute; inset-inline-start: 0; inset-block-start: calc((1lh - 1.25em) / 2); margin: 0; }

/* ---- Accordion: Descriere, Specificații, Livrare, Garanție, Recenzii ---------------------------- */
.ub-product__more { margin-block-start: var(--wp--preset--spacing--50) !important; border-block-start: 1px solid var(--wp--preset--color--line); }
.ub-product__more .wp-block-accordion-item { margin: 0; border-block-end: 1px solid var(--wp--preset--color--line); }
.ub-product__more .wp-block-accordion-heading { margin: 0; font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); }
.ub-product__more .wp-block-accordion-heading__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	inline-size: 100%;
	min-block-size: 3.5rem;
	padding: 1rem 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--ink);
	font: inherit;
	text-align: start;
	cursor: pointer;
}
.ub-product__more .wp-block-accordion-heading__toggle:hover { color: var(--wp--preset--color--primary); }
.ub-product__more .wp-block-accordion-heading__toggle-icon { flex: none; inline-size: 1.5rem; font-family: var(--wp--preset--font-family--body); font-size: 1.5rem; font-weight: 400; line-height: 1; text-align: center; }
.ub-product__more .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon { transform: rotate(45deg); }
.ub-product__more .wp-block-accordion-panel { padding-block-end: 1.5rem; }
.ub-product__more .wp-block-accordion-panel > * { max-inline-size: 52rem; }
/* "Descriere" uses the accordion's whole width: the descriptions are laid out for it (photo | text rows,
   content/products/), and in an 830 px column the right half of a wide screen stayed empty. Their text
   columns come out at about 75 characters; running text straight in the description keeps a readable
   measure. */
.ub-product__more .ub-product__description > .wp-block-post-content { max-inline-size: none; }
.ub-product__description > .wp-block-post-content > :is(p, ul, ol, h2, h3, h4, h5, h6, blockquote) { max-inline-size: 46rem; }
/* Rhythm (2026-10-30): the photo rows (core/media-text) stand clearly apart, 40 px on a phone to 64 px on a
   desktop instead of the 20 px block gap, and so does the separator before "Întrebări frecvente" (the
   margins collapse, so a row next to it adds no more). On a phone each photo sits over its own text, 1 rem
   apart, and the text lines up with the photo and the paragraphs above (WordPress indents it by 8 %). A FAQ
   question stays close to its answer, apart from the answer before. The content itself has no styles. */
.ub-product__description > .wp-block-post-content { --ub-desc-rows: clamp(2.5rem, 1.5rem + 2.8vw, 4rem); }
.ub-product__description > .wp-block-post-content > :is(.wp-block-media-text, .wp-block-separator) { margin-block: var(--ub-desc-rows); }
.ub-product__description > .wp-block-post-content > :is(.wp-block-media-text, .wp-block-separator):first-child { margin-block-start: 0; }
.ub-product__description > .wp-block-post-content > :is(.wp-block-media-text, .wp-block-separator):last-child { margin-block-end: 0; }
.ub-product__description .wp-block-media-text__media img { border-radius: var(--wp--custom--radius--media, 12px); }
.ub-product__description .wp-block-media-text__content > :first-child { margin-block-start: 0; }
.ub-product__description > .wp-block-post-content > h4 { margin-block-start: 1.75rem; }
.ub-product__description > .wp-block-post-content > h4 + * { margin-block-start: 0.5rem; }
@media (max-width: 600px) {
	.ub-product__description .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content { padding: 1rem 0 0; }
}
/* Without JavaScript every panel shows (nothing hidden that can't be opened) */
html:not(.ub-js) .ub-product__more .wp-block-accordion-panel[hidden] { display: block !important; content-visibility: visible !important; }

/* The client's description: its spec table and 2026 rows readable on a phone. Words wrap whole, never
   mid-word ("Caracteri / stică"); a table wider than the screen scrolls sideways inside its wrapper
   (.ub-table-scroll, focusable and labelled, inc/product.php) instead of squeezing its words. */
.ub-product__description { overflow-wrap: break-word; }
.ub-product__description img { max-inline-size: 100%; block-size: auto; }
.ub-product__description .ub-table-scroll { max-inline-size: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.ub-product__description .ub-table-scroll:focus-visible { outline: 2px solid var(--ub-focus); outline-offset: 2px; }
.ub-product__description table { border-collapse: collapse; font-size: 0.9375rem; }
.ub-product__description td,
.ub-product__description th { padding: 0.5rem 0.75rem; border: 1px solid var(--wp--preset--color--line); vertical-align: top; }
.ub-product__description div:has(> span + span) { max-inline-size: 100%; flex-wrap: wrap; gap: 0.25rem 1rem; }
/* The client's spec tables head their rows with white text on lime (#A4C427, 2:1): ink text on the same lime
   (6.6:1); the description itself is not changed */
.ub-product__description [style*="a4c427" i],
.ub-product__description [style*="a4c427" i] * { color: var(--wp--preset--color--ink) !important; }

/* Reviews */
.ub-product .wp-block-woocommerce-product-reviews > * + * { margin-block-start: 1.25rem; }
.ub-review { padding-block: 1rem; border-block-end: 1px solid var(--wp--preset--color--line); }
.ub-review > * { margin: 0 0 0.375rem !important; }
.ub-review__head { gap: 0.5rem; align-items: center; }
.ub-review__verified { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--primary); font-size: 0.8125rem; font-weight: 600; }
.ub-product .wp-block-woocommerce-product-review-form input[type="text"],
.ub-product .wp-block-woocommerce-product-review-form input[type="email"],
.ub-product .wp-block-woocommerce-product-review-form textarea { inline-size: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--wp--preset--color--line); border-radius: 10px; font: inherit; }
.ub-product .wp-block-woocommerce-product-review-form input[type="submit"],
.ub-product .wp-block-woocommerce-product-review-form .submit { min-block-size: 3rem; padding: 0.625rem 1.5rem; border: 0; border-radius: 10px; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); font: inherit; font-weight: 600; cursor: pointer; }

/* ---- Modele similare: 4 on desktop, 2 below ---------------------------------------------------- */
.ub-related { margin-block-start: var(--wp--preset--spacing--60) !important; }
.ub-related__title { margin-block-end: 1.25rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
@media (min-width: 1100px) { .ub-related__list .wc-block-product-template.wc-block-product-template { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ub-related__list .ub-card__title { font-size: 1rem; }
/* Fewer models than a row holds (the KH06 has one: the B03): the cards keep their size, centred under a
   centred title, instead of one card at the left of four empty slots. No models: no section (inc/product.php). */
@media (max-width: 1099px) {
	.ub-related__list .wc-block-product-template.wc-block-product-template:not(:has(> :nth-child(2))) { grid-template-columns: repeat(auto-fit, calc(50% - 0.5rem)); justify-content: center; }
	.ub-related:not(:has(.wc-block-product-template > :nth-child(2))) .ub-related__title { text-align: center; }
}
@media (min-width: 1100px) {
	.ub-related__list .wc-block-product-template.wc-block-product-template:not(:has(> :nth-child(4))) { grid-template-columns: repeat(auto-fit, calc((100% - 4.5rem) / 4)); justify-content: center; }
	.ub-related:not(:has(.wc-block-product-template > :nth-child(4))) .ub-related__title { text-align: center; }
}