/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/
/* TehnoUtil: iconul Cos din header apare doar cu >= 1 produs in cos (regula DS) */
#matercom-cart-menu.tu-cart-empty {
	display: none !important;
}


/* ============================================================
   TehnoUtil — loader AJAX global (inlocuieste blockUI/WooCommerce)
   Overlay crem cald + spinner portocaliu, identic peste tot:
   cos, checkout, side cart, add-to-cart, YITH, bucle Bricks.
   ============================================================ */

/* 1. Overlay-ul blockUI: crem cald TehnoUtil, nu gri neutru */
.blockUI.blockOverlay {
	background: rgba(255, 246, 238, 0.55) !important; /* brand-50 translucid */
	opacity: 1 !important;                             /* blockUI seteaza 0.6 inline */
	border-radius: 0 !important;
	backdrop-filter: none;
	cursor: wait !important;
}

/* 2. Spinner: cerc alb cu inel portocaliu, in locul GIF-ului gri */
.blockUI.blockOverlay::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 38px;
	height: 38px;
	margin: -19px 0 0 -19px;
	box-sizing: border-box;
	border: 3px solid #FFE8D6;   /* brand-200 */
	border-top-color: #CC5200;   /* brand-600 */
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px rgba(43, 29, 16, 0.10);
	animation: tu-spin 700ms linear infinite;
}

@keyframes tu-spin {
	to { transform: rotate(360deg); }
}

@keyframes tu-pulse {
	from { opacity: 1; }
	to { opacity: .35; }
}

/* containerele blocate frecvent au nevoie de pozitionare proprie,
   altfel overlay-ul se ancoreaza la body */
.woocommerce-cart-form,
.cart_totals,
.shipping-calculator-form,
form.woocommerce-checkout,
.woocommerce-checkout-review-order,
.tu-cart__couponform,
.tu-cart__ship,
.yith-wcwl-add-to-wishlist {
	position: relative;
}

/* continutul din spate: estompat si neinteractiv cat timp ruleaza cererea */
:is(.woocommerce-cart-form, .cart_totals, form.woocommerce-checkout,
	.woocommerce-checkout-review-order, .xoo-wsc-container, .xoo-wsc-drawer,
	.tu-cart__couponform, .tu-cart__ship, .yith-wcwl-add-to-wishlist):has(> .blockUI.blockOverlay)
	> :not(.blockUI):not(.xoo-wsc-basket) {
	opacity: .45;
	pointer-events: none;
	transition: opacity 200ms cubic-bezier(.2, .7, .3, 1);
}

/* pe elementele mici (< ~80px: FAB-ul cosului, badge-uri) spinnerul de 38px
   nu incape — ramane doar voalul */
.xoo-wsc-basket > .blockUI.blockOverlay::after,
.yith-wcwl-add-to-wishlist > .blockUI.blockOverlay::after {
	display: none !important;
}

/* 3. Butoanele in starea .loading (add-to-cart & co.): spinner 16px alb,
   fara fundal, in locul glifei din fontul WooCommerce */
.woocommerce a.button.loading::after,
a.add_to_cart_button.loading::after,
.brx_ajax_add_to_cart.loading::after,
a.single_add_to_cart_button.loading::after,
button.single_add_to_cart_button.loading::after,
.xoo-wsc-ft-btn.loading::after,
.xoo-wsc-sp-atc a.loading::after {
	content: '' !important;
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 0 0 0 8px !important;
	box-sizing: border-box;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	background: none !important;
	font-family: inherit !important;
	position: static !important;
	vertical-align: -3px;
	animation: tu-spin 700ms linear infinite !important;
}

/* 4. Buclele Bricks cu paginatie/filtre AJAX */
.brx-ajax-loading {
	position: relative;
}

.brx-ajax-loading::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 5;
	background: rgba(255, 246, 238, 0.55);
}

.brx-ajax-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 6;
	width: 38px;
	height: 38px;
	margin: -19px 0 0 -19px;
	box-sizing: border-box;
	border: 3px solid #FFE8D6;
	border-top-color: #CC5200;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px rgba(43, 29, 16, 0.10);
	animation: tu-spin 700ms linear infinite;
}

/* 5. FiboSearch: spinnerul din camp, in aceeasi identitate
   (X-ul .dgwt-wcas-close ramane neatins) */
.dgwt-wcas-preloader svg.dgwt-wcas-inner-preloader {
	display: none !important;
}

.dgwt-wcas-preloader:has(svg.dgwt-wcas-inner-preloader)::before {
	content: '' !important;
	display: inline-block;
	width: 16px;
	height: 16px;
	box-sizing: border-box;
	border: 2px solid #FFE8D6;
	border-top-color: #CC5200;
	border-radius: 50%;
	animation: tu-spin 700ms linear infinite;
}

/* 6. Miscare redusa: puls de opacitate in loc de rotatie */
@media (prefers-reduced-motion: reduce) {
	.blockUI.blockOverlay::after,
	.brx-ajax-loading::after,
	.woocommerce a.button.loading::after,
	a.add_to_cart_button.loading::after,
	.brx_ajax_add_to_cart.loading::after,
	a.single_add_to_cart_button.loading::after,
	button.single_add_to_cart_button.loading::after,
	.xoo-wsc-ft-btn.loading::after,
	.xoo-wsc-sp-atc a.loading::after,
	.dgwt-wcas-preloader:has(svg.dgwt-wcas-inner-preloader)::before {
		animation: tu-pulse 1s ease-in-out infinite alternate !important;
	}
}

/* ═══════ Modal de confirmare — partajat între coș și finalizare comandă ═══════ */
.tu-cart-modal {
  position: fixed;
  inset: 0;
  z-index: 100000; /* peste headerul sticky */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tu-cart-modal.is-open {
  display: flex;
}

.tu-cart-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(43, 29, 16, .5);
}

.tu-cart-modal__panel {
  position: relative;
  width: 520px;
  max-width: 100%;
  max-height: 85vh;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(43, 29, 16, .22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: "Archivo", sans-serif;
}

.tu-cart-modal__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--tu-border-soft, #F0E6DC);
}

.tu-cart-modal__head h3 {
  margin: 0 !important;
  font-family: "Archivo", sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--tu-ink-900, #2B1D10);
}

/* pe finalizarea comenzii, tema pune fundal portocaliu și text alb pe orice
   `button:hover` — de acolo blocul portocaliu în locul glifei de închidere */
.tu-cart-modal__close {
  margin-left: auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 4px;
  border: none !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--tu-ink-500, #8A7B6C) !important;
  cursor: pointer;
  transition: color 200ms cubic-bezier(.2, .7, .3, 1);
}

.tu-cart-modal__close:hover,
.tu-cart-modal__close:focus,
.tu-cart-modal__close:focus-visible,
.tu-cart-modal__close:active {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.tu-cart-modal__close:hover {
  color: var(--tu-brand-600, #CC5200) !important;
}

.tu-cart-modal__close .material-symbols-outlined {
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: inherit;
}

.tu-cart-modal__body {
  padding: 20px 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tu-ink-700, #52453A);
}

.tu-cart-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--tu-border-soft, #F0E6DC);
}

.tu-cart-modal__cancel {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px !important;
  min-height: 44px !important;   /* tema impune 48px */
  padding: 0 22px;
  border: none;
  border-radius: 8px;
  /* la hover tema face textul alb, adică invizibil pe cremul de sub el */
  background: transparent !important;
  color: var(--tu-brand-600, #CC5200) !important;
  font-family: "Archivo", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none !important;
  cursor: pointer;
  /* fara strat propriu, textul se re-deseneaza la fiecare pozitie subpixel a
     animatiei (-1,89 / -1,97 / -2) si pare ingrosat sau dublat pentru o clipa */
  will-change: transform;
  backface-visibility: hidden;
  transition: background-color 200ms cubic-bezier(.2, .7, .3, 1),
              color 200ms cubic-bezier(.2, .7, .3, 1),
              transform 200ms cubic-bezier(.2, .7, .3, 1);
}

.tu-cart-modal__cancel:hover,
.tu-cart-modal__cancel:focus,
.tu-cart-modal__cancel:focus-visible {
  background: var(--tu-brand-50, #FFF6EE) !important;
  color: var(--tu-brand-600, #CC5200) !important;
  box-shadow: none !important;
}

.tu-cart-modal__cancel:hover {
  transform: translateY(-2px);
}

.tu-cart-modal__cancel:active {
  transform: scale(.98);
}

.tu-cart-modal__cancel[disabled],
.tu-cart-modal__cancel:disabled {
  background: transparent !important;
  color: var(--tu-ink-400, #B0A294) !important;
  transform: none;
  cursor: not-allowed;
}

.tu-cart-modal__confirm {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px !important;
  min-height: 44px !important;   /* tema impune 48px */
  padding: 0 22px;
  border: none;
  border-radius: 8px;
  /* gradientul se declară și pe stări: tema îl înlocuiește la hover cu o
     culoare plată, iar `transition: all` anima schimbarea — de acolo licărirea */
  background: linear-gradient(135deg, #FF791F, #CC5200) !important;
  color: #fff !important;
  font-family: "Archivo", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  /* umbra pleacă de la zero transparent, nu de la `none`: altfel apare brusc */
  box-shadow: 0 0 0 0 rgba(204, 82, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  transition: transform 200ms cubic-bezier(.2, .7, .3, 1),
              box-shadow 200ms cubic-bezier(.2, .7, .3, 1);
}

.tu-cart-modal__confirm:hover,
.tu-cart-modal__confirm:focus,
.tu-cart-modal__confirm:focus-visible,
.tu-cart-modal__confirm:active {
  background: linear-gradient(135deg, #FF791F, #CC5200) !important;
  color: #fff !important;
}

.tu-cart-modal__confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(204, 82, 0, .13);
}

.tu-cart-modal__confirm:active {
  transform: scale(.98);
}

.tu-cart-modal__confirm[disabled],
.tu-cart-modal__confirm:disabled {
  background: var(--tu-border-strong, #E4DAD0) !important;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}


/* ═══════ Finalizare comandă: dropdown-urile selectWoo (se atașează la body) ═══════ */
body.woocommerce-checkout .select2-container--open .select2-dropdown {
  /* fără `margin`: distanța față de câmp o pune JS-ul în `top`, ca să nu intre
     în calculul de înălțime al listei */
  margin: 0;
  border: 1.5px solid var(--tu-brand-300, #FFCFA8);
  border-radius: .8rem;
  background: var(--tu-surface-card, #fff);
  box-shadow: var(--tu-shadow-modal, 0 2.4rem 6.4rem rgba(43, 29, 16, .22));
  overflow: hidden;
}

body.woocommerce-checkout .select2-dropdown .select2-search--dropdown {
  padding: .8rem;
  border-bottom: 1px solid var(--tu-border-soft, #F0E6DC);
}

body.woocommerce-checkout .select2-dropdown .select2-search__field {
  height: 3.6rem !important;
  min-height: 3.6rem !important;
  box-sizing: border-box !important;
  padding: 0 1rem !important;
  border: 1px solid var(--tu-brand-300, #FFB877) !important;
  border-radius: .6rem;
  background: #fff;
  font-family: "Archivo", sans-serif;
  font-size: 1.35rem;
  color: var(--tu-ink-900, #2B1D10);
  outline: none;
}

body.woocommerce-checkout .select2-dropdown .select2-search__field:focus {
  border-color: var(--tu-brand-500, #FF791F) !important;
  outline: none !important;
  box-shadow: none;
}

body.woocommerce-checkout .select2-results__options {
  max-height: 28rem;
  padding: .6rem;
  scrollbar-width: thin;
  scrollbar-color: var(--tu-brand-300, #FFB877) transparent;
}

body.woocommerce-checkout .select2-results__options::-webkit-scrollbar {
  width: 6px;
}

body.woocommerce-checkout .select2-results__options::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--tu-brand-300, #FFB877);
}

body.woocommerce-checkout .select2-results__option {
  padding: 1rem 1.2rem;
  border-radius: .6rem;
  font-family: "Archivo", sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--tu-ink-700, #52453A);
  background: transparent;
  transition: background 200ms cubic-bezier(.2, .7, .3, 1), color 200ms cubic-bezier(.2, .7, .3, 1);
}

body.woocommerce-checkout .select2-results__option--highlighted,
body.woocommerce-checkout .select2-results__option--highlighted[aria-selected] {
  background: var(--tu-brand-50, #FFF6EE) !important;
  color: var(--tu-brand-600, #CC5200) !important;
  font-weight: 500 !important; /* la trecerea cu mouse-ul se schimbă doar culoarea */
}

body.woocommerce-checkout .select2-results__option[data-selected="true"] {
  background: var(--tu-brand-100, #FFF1E6) !important;
  color: var(--tu-brand-700, #A34200) !important;
  font-weight: 700 !important;
}

body.woocommerce-checkout .select2-results__message {
  padding: 1rem 1.2rem;
  font-size: 1.3rem;
  color: var(--tu-ink-500, #8A7B6C);
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  line-height: 4.2rem;
  color: var(--tu-ink-900, #2B1D10);
}

/* ── Iconița butoanelor de finalizare ─────────────────────────────────────
   Lacătul rămâne DOAR unde e vorba efectiv de securitate — badge-ul
   „Conexiune securizată” și rândul de încredere „Plată securizată”. Pe acțiunea
   de a merge la finalizare, iconița potrivită e coșul.
   CSS-ul generat de Bricks pentru pagina Coș declară `content` pe exact acest
   pseudo-element, cu aceeași specificitate, iar fișierele de pagină se încarcă
   DUPĂ style.css — deci la egalitate ar câștiga el. Clasa repetată ridică
   specificitatea cu o treaptă, fără să recurgem la `!important`. */
#brxe-e1651e .tu-cart__checkout.tu-cart__checkout::before,
#brxe-e1651e .tu-cart__sticky-btn.tu-cart__sticky-btn::before {
  content: "shopping_cart_checkout";
}

/* ── Focus vizibil pe dropdown-uri ────────────────────────────────────────
   Pastila de select2 se evidenția doar cu dropdown-ul deschis, nu și la focus
   din tastatură, iar `outline` e dezactivat în temă: câmpul primea focus fără
   să se vadă. Se schimbă doar culoarea bordurii, nu grosimea, ca să nu apară
   deplasare de conținut. */
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--single:focus-visible {
  outline: none;
  border-color: var(--tu-brand-500, #FF791F);
  box-shadow: 0 0 0 3px rgba(255, 121, 31, .18);
}

/* ── Culoarea placeholderelor, unificată ──────────────────────────────────
   Erau două valori diferite și niciuna din paletă: inputurile foloseau griul
   implicit al browserului (#757575, rece), iar select2 `--tu-ink-400` (#B0A294,
   prea deschis — contrast ~2,3:1). Amândouă trec pe `--tu-ink-500` (#8A7B6C,
   ~3,5:1), aceeași valoare folosită deja în CSS-ul de FiboSearch.
   `opacity: 1` e necesar: Firefox aplică implicit o opacitate pe placeholder. */
input::placeholder,
textarea::placeholder {
  color: var(--tu-ink-500, #8A7B6C);
  opacity: 1;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder,
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--tu-ink-500, #8A7B6C);
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 4.4rem;
  right: .8rem;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow::before {
  content: "expand_more";
  display: block;
  font-family: "Material Symbols Outlined";
  font-size: 2rem;
  line-height: 4.4rem;
  color: var(--tu-ink-500, #8A7B6C);
  transition: transform 200ms cubic-bezier(.2, .7, .3, 1);
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
}

body.woocommerce-checkout .select2-container--open .select2-selection__arrow::before {
  transform: rotate(180deg);
}

/* Glifele Material Symbols — definiția venea din foaia antetului, care nu se
   mai încarcă pe finalizarea comenzii; o ținem aici, unde e mereu disponibilă */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* ==== TU GLOBAL V2 (10.09.2026) ==== */

/* Scrollbar-ul paginii — aceeasi identitate ca scrollbar-urile interne
   (drawer de filtre, TOC-uri, side cart, dropdown-uri). */
html {
	scrollbar-width: thin;
	scrollbar-color: var(--tu-brand-300, #FFB877) var(--tu-surface-subtle, #FAF6F1);
	scrollbar-gutter: stable;
}

html::-webkit-scrollbar {
	width: 12px;
}

html::-webkit-scrollbar-track {
	background: var(--tu-surface-subtle, #FAF6F1);
}

html::-webkit-scrollbar-thumb {
	background: var(--tu-brand-300, #FFB877);
	border-radius: 99px;
	border: 3px solid var(--tu-surface-subtle, #FAF6F1);
}

html::-webkit-scrollbar-thumb:hover {
	background: var(--tu-brand-500, #FF791F);
}

/* Selectia de text — identitate proprie, nu albastrul implicit al browserului */
::selection {
	background: #FFD9B8;
	color: var(--tu-ink-900, #2B1D10);
}

::-moz-selection {
	background: #FFD9B8;
	color: var(--tu-ink-900, #2B1D10);
}

/* ==== /TU GLOBAL V2 ==== */

/* ==== TU CAROUSEL V2 (10.09.2026) ==== */

/* 1. Umbrele de la capetele benzii nu se mai taie.
   `overflow-clip-margin` extinde zona desenata cu 24px FARA sa schimbe
   dreptunghiul track-ului — esential, pentru ca Splide calculeaza `is-visible`
   comparand slide-ul cu acel dreptunghi. Padding-ul vertical existent ramane:
   `isVisible()` verifica doar stanga/dreapta. */
/* Marja de decupare = exact marginea paginii: mai mult ar depăși marginea ecranului
   și ar produce derulare orizontală (banda e deja aliniată cu conținutul). */
:root { --tu-slider-bleed: 20px; }

@media (max-width: 991px) {
	:root { --tu-slider-bleed: 16px; }
}

@media (max-width: 767px) {
	:root { --tu-slider-bleed: 12px; }
}

@media (max-width: 478px) {
	:root { --tu-slider-bleed: 10px; }
}

.brxe-slider-nested.tu-slider .splide__track {
	overflow: clip;
	overflow-clip-margin: var(--tu-slider-bleed, 20px);
}

/* 2. Fara „peek": in zona de bleed nu se vede nimic din pagina urmatoare.
   Cat timp banda se misca, tot ce e in ea ramane vizibil (clasa `is-visible`
   e comutata de Splide abia la finalul miscarii). */
.brxe-slider-nested.tu-slider .splide__slide {
	visibility: hidden;
	min-width: 0;
}

.brxe-slider-nested.tu-slider .splide__slide.is-visible,
.brxe-slider-nested.tu-slider[data-tu-moving] .splide__slide {
	visibility: visible;
}

/* 3. Sagetile: afisate pe orice device cand au loc in afara benzii, ascunse cand
   nu incap. Decizia si pozitia vin masurate din tu-carousel.js. */
.tu-slider[data-tu-arrows="1"] .splide__arrow {
	display: flex !important;
}

.tu-slider[data-tu-arrows="0"] .splide__arrow {
	display: none !important;
}

.tu-slider .splide__arrow--prev {
	left: var(--tu-slider-out-l, -4.2rem) !important;
	right: auto !important;
}

.tu-slider .splide__arrow--next {
	right: var(--tu-slider-out-r, -4.2rem) !important;
	left: auto !important;
}

/* 4. Bula de categorie ramane cerc si pe sloturi mai inguste de 170px. */
.tu-slider--cats .tu-category-card__visual {
	width: min(17rem, 100%) !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
}

/* cardul cu titlul categoriei nu depaseste 190px, ca in proiectul de design:
   altfel denumirile lungi stau pe un rand si nu se rup ca in Claude Design */
.tu-slider--cats .tu-category-card__content {
	width: 100% !important;
	max-width: 19rem !important;
	margin-inline: auto;
}

/* 5. Cu 2 categorii pe pagina, perechea sta lipita la 10px si centrata ca grup:
   prima aliniata la dreapta slotului ei, a doua la stanga. */
@media (max-width: 577px) {
	.tu-slider--cats .splide__slide:nth-child(odd) > * {
		margin-left: auto;
		margin-right: 0;
	}

	.tu-slider--cats .splide__slide:nth-child(even) > * {
		margin-right: auto;
		margin-left: 0;
	}
}

/* ==== /TU CAROUSEL V2 ==== */

/* ==== TU NEWSLETTER ====
   Doua declaratii care traiau in CSS-ul propriu al componentei „Newsletter TehnoUtil" si pe care
   Bricks le sterge la FIECARE salvare a componentei. Masurat: la salvare, builder-ul rescrie
   `_cssCustom` al elementului radacina — muta setarile de stil din interfata (`_width`,
   `_padding`, `_typography`) intr-o regula noua pusa la final si, in acelasi pas, inghite
   regulile care tintesc radacina fara corespondent in interfata (`background`) impreuna cu
   `margin-inline: auto` de pe randul interior.

   Efectul vizibil era ca blocul de newsletter se lipea de marginea din stanga in loc sa stea
   centrat, si isi pierdea fundalul portocaliu.

   Tinem regulile aici, pe clasele proprii si stabile, nu pe `.brxe-cb4b11`: acela e un ID generat
   de Bricks si se schimba daca se recreeaza componenta. Specificitatea (0,2,0) o egaleaza pe cea
   din fisierul generat, iar `style.css` se incarca inaintea lui `post-90.min.css`, deci regula
   de aici nu intra in conflict — completeaza ce lipseste. */

.tu-newsletter .tu-newsletter__inner {
	margin-inline: auto;
}

.tu-newsletter.tu-newsletter {
	background: var(--tu-gradient-orange);
}


/* reCAPTCHA v3 adauga in formular un `.form-group.captcha` propriu. Contine doar containerul
   ascuns al tokenului si mesajul de eroare — ambele `display: none` pana cand apare o eroare —
   dar grupul in sine e un element de latime intreaga intr-un container `flex-wrap: wrap`.
   Masurat: 480x0, ceea ce rupea randul si impingea butonul „Aboneaza-te" sub campul de e-mail,
   desi designul le cere pe acelasi rand.

   `display: contents` scoate grupul din fluxul flex fara sa ascunda nimic: copiii lui devin
   direct elemente ale formularului si, fiind ascunsi, nu genereaza niciun rand. Cand Bricks
   afiseaza eroarea, `.recaptcha-error` capata ordinea 4 si trece pe rand propriu, sub acord. */

.tu-newsletter .tu-newsletter__form .form-group.captcha {
	display: contents;
}

.tu-newsletter .tu-newsletter__form .form-group.recaptcha-error {
	order: 4;
	width: 100%;
}

/* ==== /TU NEWSLETTER ==== */

/* ==== TU FOOTER: iconite pe linkuri ====
   Designul (ui_kits/website/common.js, functia `col()`) pune cate o iconita Material Symbols
   inaintea fiecarui link din „Informatii" si „Categorii de produse": 17px, culoarea --tu-brand-100,
   la 8px de text, aliniate pe centru. `.tu-fico` e deja stilizata in CSS-ul footer-ului; aici
   adaugam doar asezarea pe rand a linkului.

   Regula sta in tema copil, nu in CSS-ul elementului, ca sa nu depinda de o salvare din Bricks. */

#brxe-tufter .tu-footer-links li a {
	display: flex;
	gap: .8rem;
	align-items: center;
}

/* textul se rupe singur cand denumirea e lunga („Politica de anulare comanda"),
   fara sa impinga latimea coloanei — designul foloseste `overflowWrap: anywhere` */
#brxe-tufter .tu-footer-links li a .tu-ftxt {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* decoratia se deseneaza de ancora peste toti descendentii, deci si peste glifa:
   o anulam pe ancora si o punem doar pe eticheta */
#brxe-tufter .tu-footer-links li a:hover { text-decoration: none; }

#brxe-tufter .tu-footer-links li a:hover .tu-ftxt {
	text-decoration: underline;
	text-underline-offset: .25em;
}

/* ==== /TU FOOTER: iconite pe linkuri ==== */

/* ==== TU FOOTER: social media ====
   Bloc nou in coloana din dreapta, intre „Sediu social" si badge-ul ANPC-SAL (designul din
   19.09.2026, common.js 325-342). Titlul refoloseste clasa `tu-footer-title`, deci are exact stilul
   lui „Detalii firma"; linkurile vin din shortcode-ul [tu_social] (inc/tu-social.php).

   Spatierile din design — 20px deasupra titlului, 10px intre titlu si bule — se obtin din blocul
   propriu: coloana pune deja 1,4rem intre copii, iar blocul adauga diferenta. */

#brxe-tufter .tu-footer-socialbox {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: .6rem;
}

#brxe-tufter .tu-footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

#brxe-tufter .tu-footer-social__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3.8rem;
	height: 3.8rem;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	text-decoration: none;
	transition:
		background-color var(--tu-duration-fast, 200ms) var(--tu-ease, ease),
		border-color var(--tu-duration-fast, 200ms) var(--tu-ease, ease),
		color var(--tu-duration-fast, 200ms) var(--tu-ease, ease);
}

#brxe-tufter .tu-footer-social__link svg {
	display: block;
	width: 1.8rem;
	height: 1.8rem;
}

#brxe-tufter .tu-footer-social__link:hover {
	border-color: #fff;
	background: #fff;
	color: var(--tu-brand-600, #CC5200);
	text-decoration: none;
}

/* Footer-ul pune pe orice link, la focus, subliniere + `outline`. Pe o bula de iconita
   sublinierea n-are ce sublinia, iar `outline` ar schimba conturul perceput; inelul vine
   din `box-shadow`, care nu ocupa loc in layout. */
#brxe-tufter .tu-footer-social__link:focus-visible {
	outline: none;
	text-decoration: none;
	box-shadow: 0 0 0 .2rem var(--tu-brand-600, #CC5200), 0 0 0 .4rem #fff;
}

/* pe ecrane tactile zona de atingere creste la 44px, fara sa schimbe bula. Pseudo-elementul se
   pozitioneaza fata de caseta din INTERIORUL conturului (36px), deci iese cu 4px, nu cu 3px. */
@media (pointer: coarse) {
	#brxe-tufter .tu-footer-social__link::after {
		content: "";
		position: absolute;
		inset: -.4rem;
		border-radius: 999px;
	}
}

/* ==== /TU FOOTER: social media ==== */