/* ============================================================================
   TU COMPARE V1 (12.09.2026)

   Acest fișier ÎNLOCUIEȘTE integral `assets/css/style.css` al pluginului YITH
   WooCommerce Compare Premium (mecanismul nativ `stylesheet_url()` caută
   `<temă>/woocommerce/compare-premium.css` și, dacă îl găsește, nu mai încarcă
   stilul propriu). Pluginul îl pune în coadă pe toate paginile, deci aici stă
   tot ce ține de comparare: iconița din card, bara sticky, modalul, tabelul,
   pagina dedicată, partajarea și produsele similare.

   Bază: 1rem = 10px (ca în restul temei).
   Stivă z-index (adaptată la site, nu la prototip: butonul de cookie-uri și
   headerul sticky urcă peste valorile din design):
     bară 9000 → modal 9500 → toast 9600 → modal de confirmare 100000.
   ========================================================================== */

/* ============================================================
   01. Iconița de comparare din cardul de produs
   ============================================================ */

.tu-product-card__compare {
  position: absolute;
  top: 4rem;
  right: .8rem;
  z-index: 4;
  width: 2.8rem;
  height: 2.8rem;
  line-height: 0;
}

.tu-compare-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  border: 1px solid var(--tu-border-soft, #F0E6DC);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(43, 29, 16, .12);
  color: var(--tu-ink-400, #B0A294);
  /* tema pune `min-height: 48px` pe orice <button> */
  min-width: 0;
  min-height: 0;
  line-height: 1;
  cursor: pointer;
  transition: all var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare-btn .material-symbols-outlined {
  font-size: 1.5rem;
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

.tu-compare-btn:hover {
  border-color: var(--tu-brand-400, #FF9346);
  background: var(--tu-brand-100, #FFF1E6);
  color: var(--tu-brand-600, #CC5200);
  transform: scale(1.15);
  box-shadow: 0 3px 10px rgba(255, 121, 31, .35);
}

.tu-compare-btn.is-on {
  border-color: var(--tu-brand-300, #FFB877);
  background: var(--tu-brand-100, #FFF1E6);
  color: var(--tu-brand-600, #CC5200);
}

.tu-compare-btn:focus-visible {
  outline: 3px solid var(--tu-brand-300, #FFB877);
  outline-offset: 2px;
}

.tu-compare-btn[aria-busy="true"] { opacity: .55; pointer-events: none; }

/* modul listă pe mobil: iconițele se strâng, ca inima de favorite */
@media (max-width: 767px) {
  html[data-tu-shop-layout="list"] .tu-product-card__compare,
  .tu-shop-results[data-layout="list"] .tu-product-card__compare {
    top: 3.4rem;
    right: .6rem;
  }
  html[data-tu-shop-layout="list"] .tu-product-card__compare,
  .tu-shop-results[data-layout="list"] .tu-product-card__compare,
  html[data-tu-shop-layout="list"] .tu-product-card__compare .tu-compare-btn,
  .tu-shop-results[data-layout="list"] .tu-product-card__compare .tu-compare-btn {
    width: 2.4rem;
    height: 2.4rem;
  }
  html[data-tu-shop-layout="list"] .tu-product-card__compare .material-symbols-outlined,
  .tu-shop-results[data-layout="list"] .tu-product-card__compare .material-symbols-outlined {
    font-size: 1.3rem;
  }
}

/* ── Pagina de produs: buton PĂTRAT de 46px, geamăn cu inima de favorite ──
   Export v3 §6. Înainte moștenea din card forma rotundă, bordura
   `--tu-border-soft` și iconița gri `--tu-ink-400`, deci nu semăna deloc cu
   wishlist-ul de lângă el. Aici se declară forma și cele două stări complet:
   starea selectată are fundal plin și iconiță albă, ca să fie evidentă. */
.tu-p-compare { position: relative; line-height: 0; }

.tu-p-compare .tu-compare-btn {
  width: 4.6rem;
  height: 4.6rem;
  box-sizing: border-box;
  border: 1.5px solid var(--tu-brand-300, #FFB877);
  border-radius: var(--tu-radius-md, .8rem);
  background: #fff;
  color: var(--tu-brand-600, #CC5200);
  box-shadow: none;
}

.tu-p-compare .tu-compare-btn .material-symbols-outlined { font-size: 2rem; }

/* hover pe starea NESELECTATĂ */
.tu-p-compare .tu-compare-btn:hover,
.tu-p-compare .tu-compare-btn:focus-visible {
  border-color: var(--tu-brand-500, #FF791F);
  background: var(--tu-brand-100, #FFF1E6);
  color: var(--tu-brand-600, #CC5200);
  transform: scale(1.08);
  box-shadow: 0 3px 10px rgba(255, 121, 31, .35);
}

/* starea SELECTATĂ */
.tu-p-compare .tu-compare-btn.is-on {
  border-color: var(--tu-brand-600, #CC5200);
  background: var(--tu-brand-600, #CC5200);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

.tu-p-compare .tu-compare-btn.is-on:hover,
.tu-p-compare .tu-compare-btn.is-on:focus-visible {
  border-color: var(--tu-brand-700, #A34200);
  background: var(--tu-brand-700, #A34200);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 3px 10px rgba(255, 121, 31, .35), inset 0 0 0 1px rgba(255, 255, 255, .25);
}

/* Tooltip, aceeași construcție ca la wishlist (`.tu-p-wish[data-tu-tip]` din
   `_cssCustom` al template-ului 4138). Textul e scris de `paint()` din
   `tu-compare.js`; `--tu-tip-shift` e corecția de viewport pusă de
   `tu-product.js`, ca eticheta să nu iasă din ecran lângă marginea dreaptă. */
.tu-p-compare[data-tu-tip]::after {
  content: attr(data-tu-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + .8rem);
  z-index: 60;
  padding: .6rem 1rem;
  border-radius: var(--tu-radius-sm, .6rem);
  background: var(--tu-ink-900, #2B1D10);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translate(calc(-50% - var(--tu-tip-shift, 0px)), .3rem);
  transition: opacity var(--tu-duration-fast, .2s) var(--tu-ease, ease),
              transform var(--tu-duration-fast, .2s) var(--tu-ease, ease),
              visibility 0s var(--tu-duration-fast, .2s);
  pointer-events: none;
}

.tu-p-compare[data-tu-tip]:hover::after,
.tu-p-compare[data-tu-tip]:focus-within::after {
  opacity: 1;
  visibility: visible;
  transform: translate(calc(-50% - var(--tu-tip-shift, 0px)), 0);
  transition: opacity var(--tu-duration-fast, .2s) var(--tu-ease, ease),
              transform var(--tu-duration-fast, .2s) var(--tu-ease, ease);
}

/* pagina de Favorite: colțul din dreapta-sus al miniaturii */
.yith-wcwl-form .product-thumbnail { position: relative; }
.tu-fav-compare { position: absolute; top: .8rem; right: .8rem; z-index: 3; line-height: 0; }

/* varianta cu etichetă, pe pagina de produs */
.tu-compare-btn--wide {
  width: auto;
  height: 4.4rem;
  gap: .8rem;
  padding: 0 1.6rem;
  border-radius: var(--tu-radius-md, .8rem);
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--tu-ink-700, #52453A);
}

.tu-compare-btn--wide:hover { transform: none; }
.tu-compare-btn--wide .material-symbols-outlined { font-size: 2rem; }

/* Butoanele noastre își stabilesc singure înălțimea; regula globală a temei
   (`min-height: 48px` pe <button>) le-ar umfla pe toate. */
.tu-compare-bar__remove,
.tu-compare-bar__clear,
.tu-compare-bar__clear-icon,
.tu-compare-bar__cta,
.tu-compare-clear,
.tu-compare-text-btn,
.tu-compare-copy,
.tu-compare-modal__close,
.tu-compare__diff,
.tu-compare__remove { min-width: 0; min-height: 0; }

/* ============================================================
   02. Bara sticky de comparare
   ============================================================ */

.tu-compare-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  background: var(--tu-surface-card, #fff);
  border-top: 1px solid var(--tu-border-soft, #F0E6DC);
  box-shadow: 0 -6px 24px rgba(43, 29, 16, .12);
}

.tu-compare-bar[hidden] { display: none !important; }
.tu-compare-bar[data-modal="1"] { display: none !important; }

/* ── Prioritate contextuală pe mobil (spec barelor §4) ──────────────────────
   Două bare pline ar mânca ~150px din înălțimea ecranului. Cât timp fișa de produs
   își arată bara de cumpărare, bara de comparare se strânge într-o pastilă, ca CTA-ul
   de cumpărare să rămână singurul pe marginea de jos.

   Bara plină NU se demontează — se translatează — ca pastila să poată GLISA de jos în
   sus, nu să apară brusc. Din același motiv pastila stă mereu în DOM.
   `--tu-stack-gap` rămâne în formulă ca punct de reglaj: designul cere barele lipite. */

/* Contractul dintre bare și elementele plutitoare. Valorile implicite sunt declarate aici,
   ca formulele să funcționeze și pe paginile fără bare, chiar dacă niciun JS nu a rulat:
     --tu-compare-bar-h  publicată de bara de comparare (0 când e ascunsă, colapsată în
                         pastilă, sau când pop-up-ul de comparare e deschis)
     --tu-buy-bar-h      publicată de bara de cumpărare, măsurată cu ResizeObserver
     --tu-stack-gap      0: designul cere barele lipite; rămâne punct de reglaj */
:root {
  --tu-compare-bar-h: 0px;
  --tu-buy-bar-h: 0px;
  --tu-fbar-h: 0px;
  --tu-stack-gap: 0px;
}

.tu-compare-bar {
  transition: transform 300ms var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare-bar[data-collapsed] {
  transform: translateY(105%);
  pointer-events: none;
}

.tu-compare-pill {
  position: fixed;
  left: 1.6rem;
  bottom: calc(1.6rem + var(--tu-buy-bar-h, 0px));
  z-index: 9002;
  display: none;
  align-items: center;
  gap: .8rem;
  height: 4.4rem;
  padding: 0 1.4rem 0 1.2rem;
  border: 0;
  border-radius: var(--tu-radius-pill, 999rem);
  background: var(--tu-gradient-orange, linear-gradient(135deg, #FF791F, #CC5200));
  color: #fff;
  cursor: pointer;
  font-family: "Archivo", sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  box-shadow: var(--tu-shadow-modal, 0 2.4rem 6.4rem rgba(43, 29, 16, .22));
  opacity: 0;
  transform: translateY(calc(100% + 2.8rem));
  pointer-events: none;
  transition: transform 300ms var(--tu-ease, cubic-bezier(.2, .7, .3, 1)),
              opacity 300ms var(--tu-ease, cubic-bezier(.2, .7, .3, 1)),
              bottom 300ms var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

/* pastila există doar sub 768px; peste, barele se stivuiesc */
@media (max-width: 767px) {
  .tu-compare-pill { display: flex; }
}

.tu-compare-pill.is-on {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.tu-compare-pill .material-symbols-outlined { font-size: 2rem; line-height: 1; }

.tu-compare-pill__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 .6rem;
  border-radius: var(--tu-radius-pill, 999rem);
  background: rgba(255, 255, 255, .24);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}

.tu-compare-pill:focus-visible {
  outline: 3px solid var(--tu-brand-300, #FFB877);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .tu-compare-bar,
  .tu-compare-pill { transition: none; }
}

/* Banda barelor sticky = banda header-ului, ca thumbnail-ul din bara de cumparare si
   iconita „Compara produsele" sa porneasca de pe aceeasi verticala ca logo-ul, iar
   butoanele din dreapta sa se termine pe aceeasi verticala ca meniul (spec barelor §1).
   Masurat pe `#brxe-tumanc`: `min(100% - 2*gutter, 120rem)`, gutter 2 / 1,6 / 1,2 / 1 rem.
   Fundalul barelor ramane full-bleed — doar continutul e constrans. */
:root { --tu-bar-gutter: 2rem; }

@media (max-width: 991px) { :root { --tu-bar-gutter: 1.6rem; } }
@media (max-width: 767px) { :root { --tu-bar-gutter: 1.2rem; } }
@media (max-width: 478px) { :root { --tu-bar-gutter: 1rem; } }

.tu-compare-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  width: min(100% - 2 * var(--tu-bar-gutter, 2rem), var(--tu-container, 120rem));
  max-width: none;
  margin-inline: auto;
  padding-block: 1.2rem;
  padding-inline: 0;
  box-sizing: border-box;
}

.tu-compare-bar__inner[data-count="0"] { display: none; }

.tu-compare-bar__title {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex: 0 0 auto;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--tu-ink-900, #2B1D10);
}

.tu-compare-bar__title .material-symbols-outlined {
  font-size: 1.8rem;
  color: var(--tu-brand-600, #CC5200);
}

.tu-compare-bar__title-short { display: none; }

/* fâșia de miniaturi; padding/margin negativ ca „×"-urile să nu fie tăiate de overflow */
.tu-compare-bar__strip {
  display: flex;
  gap: 1rem;
  flex: 1 1 24rem;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: .8rem .8rem .4rem;
  margin: -.8rem -.8rem -.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--tu-brand-300, #FFB877) var(--tu-surface-subtle, #FAF6F1);
}

.tu-compare-bar__item {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  background: #fff;
  border: 1px solid var(--tu-border-soft, #F0E6DC);
  border-radius: .8rem;
}

.tu-compare-bar__item img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.tu-compare-bar__ph { font-size: 1.8rem; color: var(--tu-ink-400, #B0A294); }

.tu-compare-bar__remove {
  position: absolute;
  top: -.6rem;
  right: -.6rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 1px solid var(--tu-border-soft, #F0E6DC);
  border-radius: 50%;
  background: #fff;
  color: var(--tu-ink-700, #52453A);
  cursor: pointer;
  transition: all var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare-bar__remove .material-symbols-outlined { font-size: 1.2rem; line-height: 1; }

.tu-compare-bar__remove:hover {
  border-color: var(--tu-brand-500, #FF791F);
  background: var(--tu-brand-100, #FFF1E6);
  color: var(--tu-brand-600, #CC5200);
  box-shadow: 0 2px 8px rgba(43, 29, 16, .14);
}

.tu-compare-bar__remove:focus-visible {
  outline: 2px solid var(--tu-brand-400, #FF9346);
  outline-offset: 1px;
}

.tu-compare-bar__actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex: 0 0 auto;
  margin-left: auto;
}

/* „Șterge tot" — buton secundar din DS */
.tu-compare-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  height: 3.6rem;
  padding: 0 1.4rem;
  border: 1.5px solid var(--tu-brand-500, #FF791F);
  border-radius: var(--tu-radius-md, .8rem);
  background: #fff;
  color: var(--tu-brand-600, #CC5200);
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare-clear .material-symbols-outlined { font-size: 1.8rem; }

/* Fiecare stare declară background, border-color ȘI color împreună: regulile
   globale ale temei pentru butoane completează altfel proprietatea nedeclarată
   cu brand-600, iar rezultatul e text brand-600 pe fundal brand-600. */
.tu-compare-bar .tu-compare-clear:hover,
.tu-compare-modal .tu-compare-clear:hover,
.tu-compare-clear:hover {
  border-color: var(--tu-brand-500, #FF791F);
  background: var(--tu-brand-500, #FF791F);
  color: #fff;
  transform: translate3d(0, -2px, 0);
  box-shadow: var(--tu-shadow-hover, 0 10px 28px rgba(204, 82, 0, .13));
}

.tu-compare-bar .tu-compare-clear:active,
.tu-compare-modal .tu-compare-clear:active,
.tu-compare-clear:active {
  border-color: var(--tu-brand-500, #FF791F);
  background: var(--tu-brand-500, #FF791F);
  color: #fff;
  transform: translate3d(0, 0, 0) scale(.98);
}

.tu-compare-clear:focus-visible {
  outline: 3px solid var(--tu-brand-300, #FFB877);
  outline-offset: 2px;
}

.tu-compare-bar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  height: 4rem;
  padding: 0 1.8rem;
  border: 0;
  border-radius: var(--tu-radius-md, .8rem);
  background: var(--tu-gradient-brand, linear-gradient(135deg, #FF791F, #CC5200));
  color: #fff;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: filter var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare-bar__cta .material-symbols-outlined { font-size: 1.8rem; }

/* În design CTA-ul e complet static (fără transform, umbră sau tranziție).
   Declarăm gradientul și în `:hover`, altfel regula temei îl înlocuiește cu o
   culoare plată, iar `transition` animează schimbarea — de acolo „clipocirea".
   Rămâne o iluminare de 4%, ca să existe un minim de feedback. */
.tu-compare-bar .tu-compare-bar__cta:hover:not([disabled]),
.tu-compare-bar__cta:hover:not([disabled]) {
  border: 0;
  background-color: transparent;
  background-image: var(--tu-gradient-brand, linear-gradient(135deg, #FF791F, #CC5200));
  color: #fff;
  box-shadow: none;
  transform: none;
  filter: brightness(1.04);
}

.tu-compare-bar .tu-compare-bar__cta[disabled]:hover,
.tu-compare-bar__cta[disabled]:hover {
  background-color: var(--tu-border-strong, #E4DAD0);
  background-image: none;
  color: #fff;
  filter: none;
}

.tu-compare-bar__cta[disabled] {
  background: var(--tu-border-strong, #E4DAD0);
  color: #fff;
  cursor: not-allowed;
}

.tu-compare-bar__cta:focus-visible {
  outline: 3px solid var(--tu-brand-300, #FFB877);
  outline-offset: 2px;
}

.tu-compare-bar__cta-short,
.tu-compare-bar__clear-icon { display: none; }

@media (max-width: 767px) {
  .tu-compare-bar__inner { gap: 1rem; padding-block: 1rem; }
  .tu-compare-bar__item { width: 4.8rem; height: 4.8rem; }
  .tu-compare-bar__title-full { display: none; }
  .tu-compare-bar__title-short { display: inline; }
}

@media (max-width: 477px) {
  .tu-compare-bar__title,
  .tu-compare-bar__clear,
  .tu-compare-bar__cta-full { display: none; }
  .tu-compare-bar__cta-short { display: inline; }
  .tu-compare-bar__strip { flex: 1 1 12rem; }
  .tu-compare-bar__cta { padding: 0 1.2rem; }
  .tu-compare-bar__clear-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: .4rem;
    border: 0;
    background: transparent;
    color: var(--tu-brand-600, #CC5200);
    cursor: pointer;
  }
  .tu-compare-bar__clear-icon .material-symbols-outlined { font-size: 2rem; }
  .tu-compare-bar__clear-icon:hover { transform: none; box-shadow: none; background: transparent; color: var(--tu-brand-700, #A34200); }
}

/* Subsolul face loc barei, ca să nu acopere ultimul rând de linkuri. Pe
   șabloanele fără subsol, spațiul îl primește zona de conținut. */
/* Butonul flotant „Setări cookie" al Complianz e la `z-index: 9998`, deci
   deasupra barei (9000) și a modalului (9500), și e declarat cu
   `display: inline-flex !important` din Custom CSS-ul pluginului — de aceea
   ascunderea are nevoie de `!important`. Accesul la preferințe rămâne prin
   linkul „Politica cookies" din subsol. */
body:has(#tu-compare-bar:not([hidden])) button.cmplz-manage-consent,
body:has(.tu-compare-modal.is-open) button.cmplz-manage-consent { display: none !important; }

/* ── Elementele plutitoare urcă deasupra barelor sticky ─────────────────────
   Formula e aditivă, ca să acopere toate combinațiile: doar bara de comparare (orice
   pagină), doar bara de cumpărare (fișa de produs), sau amândouă stivuite. Baza de 2rem
   e chiar poziția lor naturală (măsurat: `bottom: 20px`), deci fără bare nu se mișcă.
   Regula stătea înainte în `_cssCustom`-ul fișei de produs și ținea cont doar de bara de
   cumpărare — cu amândouă prezente, coșul plutitor cădea peste bara de cumpărare. */
body:has(#tu-compare-bar:not([hidden])) .xoo-wsc-basket,
body:has(#tu-compare-bar:not([hidden])) #cmplz-manage-consent button.cmplz-manage-consent,
body.tu-fbar-open .xoo-wsc-basket,
body.tu-fbar-open #cmplz-manage-consent button.cmplz-manage-consent {
  bottom: calc(2rem + var(--tu-compare-bar-h, 0px) + var(--tu-buy-bar-h, 0px)) !important;
}

.xoo-wsc-basket,
#cmplz-manage-consent button.cmplz-manage-consent {
  transition: bottom 300ms var(--tu-ease, cubic-bezier(.2, .7, .3, 1)) !important;
}

#brx-footer { padding-bottom: var(--tu-compare-bar-h, 0px); }
body:not(:has(#brx-footer)) #brx-content { padding-bottom: var(--tu-compare-bar-h, 0px); }

/* ============================================================
   03. Modalul „Compară produsele"
   ============================================================ */

.tu-compare-modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: none;
}

.tu-compare-modal.is-open { display: block; }

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

/* Centrare cu translate, NU cu flex: tabelul e `width: max-content`, iar un flex
   item mai lat decât linia fuge la stânga cu `justify-content: center`. */
.tu-compare-modal__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  min-width: min(68rem, 94vw);
  max-width: 96vw;
  max-height: 88vh;
  overflow: hidden;
  background: var(--tu-surface-card, #fff);
  border-radius: var(--tu-radius-lg, 1.4rem);
  box-shadow: var(--tu-shadow-modal, 0 24px 64px rgba(43, 29, 16, .22));
  transition: width var(--tu-duration-slow, .3s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare-modal__panel[data-measuring="1"] { transition: none; }

.tu-compare-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-shrink: 0;
  padding: 1.4rem 1.8rem;
  border-bottom: 1px solid var(--tu-border-soft, #F0E6DC);
}

.tu-compare-modal__title {
  font-family: var(--tu-shop-font-display, 'Archivo', sans-serif);
  font-size: 1.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--tu-ink-900, #2B1D10);
}

.tu-compare-modal__tools {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.tu-compare-modal__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* `tu-compare.js` inserează un wrapper `.tu-compare` (purtătorul variabilelor
   de lățime) între corpul modalului și cardul tabelului. Fără aceste patru
   proprietăți lanțul de înălțime se rupe: cardul primește înălțime automată,
   zona de scroll crește la înălțimea întregului tabel (`scrollHeight ===
   clientHeight`) și rândurile de jos devin inaccesibile, tăiate de panou. */
.tu-compare-modal__body > .tu-compare {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* buton-text (Deschide pagina completă / Copiază linkul) */
.tu-compare-text-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  margin: -.5rem -.9rem;
  border: 0;
  border-radius: var(--tu-radius-md, .8rem);
  background: transparent;
  color: var(--tu-brand-600, #CC5200);
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare-text-btn .material-symbols-outlined { font-size: 1.7rem; }

.tu-compare-text-btn:hover {
  border: 0;
  background: var(--tu-brand-100, #FFF1E6);
  color: var(--tu-brand-700, #A34200);
}

.tu-compare-text-btn:focus-visible {
  outline: 3px solid var(--tu-brand-300, #FFB877);
  outline-offset: 0;
}

.tu-compare-text-btn.is-done {
  color: var(--tu-success, #1B8A3A);
  background: var(--tu-success-bg, #E8F6EC);
}

.tu-compare-modal__close {
  display: inline-flex;
  padding: .4rem;
  border: 0;
  background: transparent;
  color: var(--tu-ink-500, #8A7B6C);
  cursor: pointer;
  transition: color var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare-modal__close .material-symbols-outlined { font-size: 2.4rem; }
.tu-compare-modal .tu-compare-modal__close:hover,
.tu-compare-modal__close:hover {
  border: 0;
  background: transparent;
  color: var(--tu-brand-600, #CC5200);
}
.tu-compare-modal__close:focus-visible { outline: 3px solid var(--tu-brand-300, #FFB877); outline-offset: 2px; }

.tu-compare-modal__openpage-short { display: none; }

@media (max-width: 767px) {
  .tu-compare-modal__tools { gap: .8rem; }
  .tu-compare-modal__openpage-full { display: none; }
  .tu-compare-modal__openpage-short { display: inline; }
}

/* în modal cardul tabelului nu mai are cadru propriu */
.tu-compare-modal .tu-compare__card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
}

/* ============================================================
   04. Tabelul de comparare
   ============================================================ */

.tu-compare { --tu-compare-col: 24rem; --tu-compare-label: 18rem; }

.tu-compare__card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--tu-surface-card, #fff);
  border: 1px solid var(--tu-border-soft, #F0E6DC);
  border-radius: var(--tu-radius-lg, 1.4rem);
  box-shadow: var(--tu-shadow-card, 0 2px 8px rgba(204, 82, 0, .05));
}

.tu-compare__tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: 1.2rem 1.6rem;
  border-bottom: 1px solid var(--tu-border-soft, #F0E6DC);
  background: var(--tu-surface-subtle, #FAF6F1);
}

.tu-compare__diff {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  height: 3.2rem;
  padding: 0 1.2rem;
  border: 1.5px solid var(--tu-border-strong, #E4DAD0);
  border-radius: var(--tu-radius-pill, 999px);
  background: #fff;
  color: var(--tu-ink-700, #52453A);
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare__diff .material-symbols-outlined { font-size: 1.6rem; }
.tu-compare .tu-compare__diff:hover,
.tu-compare__diff:hover {
  border-color: var(--tu-brand-400, #FF9346);
  background: var(--tu-brand-50, #FFF6EE);
  color: var(--tu-brand-600, #CC5200);
}

.tu-compare .tu-compare__diff[aria-pressed="true"]:hover,
.tu-compare__diff[aria-pressed="true"]:hover {
  border-color: transparent;
  background: var(--tu-gradient-brand, linear-gradient(135deg, #FF791F, #CC5200));
  color: #fff;
}

.tu-compare__diff[aria-pressed="true"] {
  border-color: transparent;
  background: var(--tu-gradient-brand, linear-gradient(135deg, #FF791F, #CC5200));
  color: #fff;
}

.tu-compare__diff:focus-visible { outline: 3px solid var(--tu-brand-300, #FFB877); outline-offset: 2px; }

.tu-compare__legend {
  font-size: 1.2rem;
  color: var(--tu-ink-500, #8A7B6C);
}

.tu-compare__scroll {
  /* `position: relative` nu e decorativ: etichetele `.screen-reader-text` din
     selectoarele de cantitate sunt `position: absolute`, iar fără un bloc
     conținător aici ele se ancorează la `#brx-content` (primul strămoș
     poziționat), nu sunt decupate de `overflow` și adaugă mii de pixeli de
     derulare goală sub footer. */
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior-x: contain;
  /* `scrollbar-color: auto` NU e redundant: proprietatea se MOȘTENEȘTE, iar
     `style.css` o setează pe `html` pentru scrollbar-ul paginii. Cât timp
     valoarea moștenită e diferită de `auto`, Chrome ignoră complet regulile
     `::-webkit-scrollbar` de mai jos și randează barele implicite de 15px.
     Resetarea readuce stilizarea de 8px din design. */
  scrollbar-color: auto;
}

.tu-compare__scroll:focus-visible { outline: 2px solid var(--tu-brand-400, #FF9346); outline-offset: -2px; }

.tu-compare__scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.tu-compare__scroll::-webkit-scrollbar-track { background: var(--tu-surface-subtle, #FAF6F1); border-radius: 99px; }
.tu-compare__scroll::-webkit-scrollbar-corner { background: transparent; }
.tu-compare__scroll::-webkit-scrollbar-thumb { background: var(--tu-brand-300, #FFB877); border-radius: 99px; border: 2px solid var(--tu-surface-card, #fff); }
.tu-compare__scroll::-webkit-scrollbar-thumb:hover { background: var(--tu-brand-500, #FF791F); }

/* Firefox: nu are `::-webkit-scrollbar`, deci primește proprietățile standard.
   În Chrome blocul nu se aplică, fiindcă selectorul e suportat. */
@supports not selector(::-webkit-scrollbar) {
  .tu-compare__scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--tu-brand-300, #FFB877) var(--tu-surface-subtle, #FAF6F1);
  }
}

.tu-compare__table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--tu-shop-font, 'Archivo', sans-serif);
  table-layout: fixed;
}

/* prima coloană: lipită la scroll orizontal */
.tu-compare__label {
  position: sticky;
  left: 0;
  z-index: 4;
  width: var(--tu-compare-label);
  min-width: var(--tu-compare-label);
  max-width: var(--tu-compare-label);
  padding: 1rem 1.2rem;
  text-align: left;
  /* În design etichetele nu declară `vertical-align`, deci UA le dă `middle`
     pentru toate rândurile — inclusiv „Produs", unde celula e înaltă. */
  vertical-align: middle;
  background: var(--tu-surface-subtle, #FAF6F1);
  border-bottom: 1px solid var(--tu-border-soft, #F0E6DC);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tu-ink-700, #52453A);
  box-shadow: 0 -1px 0 0 var(--tu-surface-subtle, #FAF6F1);
}

.tu-compare__cell {
  width: var(--tu-compare-col);
  min-width: var(--tu-compare-col);
  max-width: var(--tu-compare-col);
  padding: 1rem 1.2rem;
  vertical-align: middle;
  background: var(--tu-surface-card, #fff);
  border-bottom: 1px solid var(--tu-border-soft, #F0E6DC);
  border-left: 1px solid var(--tu-border-soft, #F0E6DC);
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--tu-ink-900, #2B1D10);
  box-shadow: 0 -1px 0 0 var(--tu-surface-card, #fff);
}

/* rândurile lipite pe verticală; `top` îl pune JS după măsurare */
.tu-compare__row[data-sticky="1"] > .tu-compare__cell { position: sticky; z-index: 3; }
.tu-compare__row[data-sticky="1"] > .tu-compare__label { position: sticky; z-index: 5; }
.tu-compare__row[data-sticky-last="1"] > .tu-compare__cell,
.tu-compare__row[data-sticky-last="1"] > .tu-compare__label {
  box-shadow: 0 -1px 0 0 currentcolor, 0 8px 12px -10px rgba(43, 29, 16, .45);
}
.tu-compare__row[data-sticky-last="1"] > .tu-compare__cell { box-shadow: 0 -1px 0 0 var(--tu-surface-card, #fff), 0 8px 12px -10px rgba(43, 29, 16, .45); }
.tu-compare__row[data-sticky-last="1"] > .tu-compare__label { box-shadow: 0 -1px 0 0 var(--tu-surface-subtle, #FAF6F1), 0 8px 12px -10px rgba(43, 29, 16, .45); }

/* Evidențierea valorilor diferite (common.js:1537-1548): eticheta brand-100,
   celula brand-200, ambele borduri brand-300. Doar bottom și left — grid-ul nu
   are borduri sus sau la dreapta. */
.tu-compare__row.different > .tu-compare__label {
  background: var(--tu-brand-100, #FFF1E6);
  border-bottom-color: var(--tu-brand-300, #FFB877);
  box-shadow: 0 -1px 0 0 var(--tu-brand-100, #FFF1E6);
}

.tu-compare__row.different > .tu-compare__cell {
  background: var(--tu-brand-200, #FFD9B8);
  border-bottom-color: var(--tu-brand-300, #FFB877);
  border-left-color: var(--tu-brand-300, #FFB877);
  font-weight: 700;
  box-shadow: 0 -1px 0 0 var(--tu-brand-200, #FFD9B8);
}

.tu-compare__row.different[data-sticky-last="1"] > .tu-compare__cell { box-shadow: 0 -1px 0 0 var(--tu-brand-200, #FFD9B8), 0 8px 12px -10px rgba(43, 29, 16, .45); }
.tu-compare__row.different[data-sticky-last="1"] > .tu-compare__label { box-shadow: 0 -1px 0 0 var(--tu-brand-100, #FFF1E6), 0 8px 12px -10px rgba(43, 29, 16, .45); }

/* Produs / Preț / Disponibilitate / Brand / Adaugă în coș rămân mereu vizibile */
.tu-compare__table[data-diff-only="1"] .tu-compare__row[data-diff="0"]:not([data-fixed="1"]) { display: none; }

/* Rândul „Produs": `td` alb hard-codat și aliniat sus (common.js:1557), chiar
   dacă restul rândului ar intra în evidențiere. */
.tu-compare__row .tu-compare__cell--product_info,
.tu-compare__row.different > .tu-compare__cell--product_info {
  position: relative;
  padding: 1.2rem;
  vertical-align: top;
  background: var(--tu-surface-card, #fff);
  font-weight: 400;
  box-shadow: 0 -1px 0 0 var(--tu-surface-card, #fff);
}

.tu-compare__row[data-sticky-last="1"] > .tu-compare__cell--product_info {
  box-shadow: 0 -1px 0 0 var(--tu-surface-card, #fff), 0 8px 12px -10px rgba(43, 29, 16, .45);
}

.tu-compare__remove {
  position: absolute;
  top: .8rem;
  right: .8rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid var(--tu-border-soft, #F0E6DC);
  border-radius: 50%;
  background: #fff;
  color: var(--tu-ink-700, #52453A);
  cursor: pointer;
  transition: all var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare__remove .material-symbols-outlined { font-size: 1.3rem; line-height: 1; }

.tu-compare__remove:hover {
  border-color: var(--tu-brand-500, #FF791F);
  background: var(--tu-brand-100, #FFF1E6);
  color: var(--tu-brand-600, #CC5200);
  box-shadow: 0 2px 8px rgba(43, 29, 16, .14);
}

.tu-compare__remove:focus-visible { outline: 2px solid var(--tu-brand-400, #FF9346); outline-offset: 1px; }

.tu-compare__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12rem;
  margin-bottom: .8rem;
  background: #fff;
  border: 1px solid var(--tu-border-soft, #F0E6DC);
  border-radius: .8rem;
  overflow: hidden;
  transition: all var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare__media img {
  max-width: 85%;
  max-height: 85%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare__media:hover { border-color: var(--tu-brand-200, #FFD9B8); box-shadow: var(--tu-shadow-hover, 0 10px 28px rgba(204, 82, 0, .13)); }
.tu-compare__media:hover img { transform: scale(1.04); }

.tu-compare__title {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tu-ink-900, #2B1D10);
  text-decoration: none;
  transition: color var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare__title:hover { color: var(--tu-brand-600, #CC5200); }

/* rândul „Preț" */
.tu-compare__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .8rem;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--tu-ink-900, #2B1D10);
}

.tu-compare__price del,
.tu-compare__price del .amount,
.tu-compare__price del bdi {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--tu-ink-400, #B0A294);
  text-decoration: line-through;
}

.tu-compare__price ins,
.tu-compare__price ins .amount,
.tu-compare__price ins bdi {
  text-decoration: none;
  color: var(--tu-brand-600, #CC5200);
  font-weight: 700;
}

.tu-compare__price .woocommerce-Price-currencySymbol { font-size: .75em; }

.tu-compare__price--none {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--tu-ink-700, #52453A);
}

.tu-compare__price--none .material-symbols-outlined { font-size: 1.6rem; color: var(--tu-ink-500, #8A7B6C); }

/* rândul „Disponibilitate" */
.tu-compare__stock {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: 1.3rem;
  font-weight: 700;
}

.tu-compare__stock .material-symbols-outlined { font-size: 1.5rem; }
.tu-compare__stock--in { color: var(--tu-success, #1B8A3A); }
.tu-compare__stock--low { color: var(--tu-warning, #B25E00); }
.tu-compare__stock--out { color: var(--tu-error, #E02D2D); }

/* rândul „Brand" */
.tu-compare__brand { display: inline-flex; align-items: center; gap: 1rem; min-width: 0; }

.tu-compare__brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 6.4rem;
  height: 3.2rem;
  padding: .8rem .7rem;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--tu-border-soft, #F0E6DC);
  border-radius: .6rem;
}

.tu-compare__brand-logo img { max-width: 5rem; max-height: 1.6rem; width: auto; height: auto; object-fit: contain; }

.tu-compare__brand-name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tu-compare__none { color: var(--tu-ink-400, #B0A294); }

/* ── rândul „Adaugă în coș" ─────────────────────────────────
   Replică exactă a coșului din cardul de produs. CSS-ul cardului trăiește în
   `_cssCustom` al componentei `f01324`, scoped la `.brxe-f01324`, deci nu
   ajunge în tabel — de aceea regulile sunt copiate aici, valoare cu valoare.
   Coincid cu `QuantityPicker size="xs"` + `CmpAddBtn` din exportul de design. */

.tu-compare__cart { width: 100%; }

.tu-compare__cart form.cart {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
  margin: 0;
}

/* Selectorul de cantitate. `width: auto !important` și cele două `flex` cu
   `!important` sunt exact reset-urile din cardul de produs: WooCommerce pune
   `width: 100%` pe `.quantity` din formular, iar fără ele selectorul se întinde
   pe toată lățimea celulei (200px în loc de 96px). */
.tu-compare__cart .quantity {
  width: auto !important;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: stretch;
  height: 3rem;
  border: 1px solid var(--tu-border-strong, #E4DAD0);
  border-radius: var(--tu-radius-md, .8rem);
  background: #fff;
  overflow: hidden;
  box-shadow: none;
  transition: border-color var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1)),
              box-shadow var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare__cart .quantity:focus-within {
  border-color: var(--tu-brand-500, #FF791F);
  box-shadow: 0 0 0 3px rgba(255, 121, 31, .35);
}

.tu-compare__cart .quantity input,
.tu-compare__cart .quantity input.qty {
  width: 3.4rem !important;
  flex: 0 0 3.4rem !important;
  height: auto;
  min-height: 0;
  padding: 0;
  text-align: center;
  border-width: 0 1px;
  border-style: solid;
  border-color: var(--tu-border-soft, #F0E6DC);
  border-radius: 0;
  background: #fff;
  color: var(--tu-ink-900, #2B1D10);
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 600;
  outline: none;
  box-shadow: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

.tu-compare__cart .quantity input::-webkit-outer-spin-button,
.tu-compare__cart .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tu-compare__cart .quantity input:focus-visible { outline: none; }

.tu-compare__cart .quantity .action {
  width: 3rem;
  flex: 0 0 3rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  color: var(--tu-brand-600, #CC5200);
  background: transparent;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1)),
              color var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare__cart .quantity .action:hover {
  background: var(--tu-brand-100, #FFF1E6);
  color: var(--tu-brand-700, #A34200);
}

.tu-compare__cart .quantity .action svg { width: 1.6rem; height: 1.6rem; }
.tu-compare__cart .quantity .action.minus { border-right: 1px solid var(--tu-border-soft, #F0E6DC); }
.tu-compare__cart .quantity .action.plus { border-left: 1px solid var(--tu-border-soft, #F0E6DC); }

.tu-compare__cart .quantity .action.is-disabled,
.tu-compare__cart .quantity .action.is-disabled:hover {
  color: #B7AA9E;
  background: transparent;
  cursor: not-allowed;
}

.tu-compare__cart .quantity .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* butonul: grilă de două coloane, cu glifa de coș pe fundal brand-700 */
.tu-compare__cart button,
.tu-compare__cart .button,
.tu-compare__cart a.add_to_cart_button {
  width: 100%;
  min-width: 0;
  height: 4.2rem;
  min-height: 0;
  padding: 0;
  margin: 0 0 .4rem;
  border-style: none;
  border-radius: var(--tu-radius-md, .8rem);
  overflow: hidden;
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  background: linear-gradient(135deg, var(--tu-brand-500, #FF791F), var(--tu-brand-600, #CC5200));
  color: #fff;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 0 var(--tu-brand-700, #A34200);
  transition: transform var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1)),
              box-shadow var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare__cart button::before,
.tu-compare__cart .button::before,
.tu-compare__cart a.add_to_cart_button::before {
  content: 'shopping_cart';
  font-family: 'Material Symbols Outlined';
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tu-brand-700, #A34200);
}

.tu-compare__cart button:hover,
.tu-compare__cart .button:hover,
.tu-compare__cart a.add_to_cart_button:hover {
  background: linear-gradient(135deg, var(--tu-brand-500, #FF791F), var(--tu-brand-600, #CC5200));
  color: #fff;
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--tu-brand-700, #A34200);
}

.tu-compare__cart button:active,
.tu-compare__cart .button:active,
.tu-compare__cart a.add_to_cart_button:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--tu-brand-700, #A34200);
}

.tu-compare__cart button:focus-visible,
.tu-compare__cart .button:focus-visible,
.tu-compare__cart a.add_to_cart_button:focus-visible {
  outline: 3px solid var(--tu-brand-300, #FFB877);
  outline-offset: 2px;
}

.tu-compare__cart .button.loading { opacity: .7; }
.tu-compare__cart a.added_to_cart { display: none; }
.tu-compare__cart .stock { display: none; }

/* Stoc epuizat: selectorul de cantitate rămâne în flux, invizibil, ca butonul
   „Anunță-mă" să pornească de la același offset vertical ca „Adaugă în coș"
   din coloanele cu stoc (common.js:1599-1603). */
.tu-compare__cart--out {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .9rem;
  width: 100%;
}

.tu-compare__cart--out .tu-compare__qty-ghost {
  visibility: hidden;
  pointer-events: none;
  align-self: flex-start;
}

.tu-compare__notify,
.tu-compare__view {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  width: 100%;
  height: 4.2rem;
  margin: 0 0 .4rem;
  padding: 0 1.2rem;
  box-sizing: border-box;
  border: 1.5px solid var(--tu-brand-500, #FF791F);
  border-radius: var(--tu-radius-md, .8rem);
  background: #fff;
  color: var(--tu-brand-600, #CC5200);
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition: border-color var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1)),
              background-color var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare__notify .material-symbols-outlined { flex-shrink: 0; font-size: 1.8rem; line-height: 1; }

.tu-compare__notify:hover,
.tu-compare__notify:focus-visible,
.tu-compare__view:hover,
.tu-compare__view:focus-visible {
  border-color: var(--tu-brand-600, #CC5200);
  background: var(--tu-brand-50, #FFF6EE);
  color: var(--tu-brand-600, #CC5200);
}


/* iconița modalului de confirmare (roșul rămâne doar aici) */
.tu-compare-confirm__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  background: var(--tu-error-bg, #FDEBEB);
  color: var(--tu-error, #E02D2D);
}

.tu-compare-confirm__icon .material-symbols-outlined { font-size: 2.1rem; }

@media (max-width: 767px) {
  .tu-compare { --tu-compare-col: 20rem; --tu-compare-label: 13.2rem; }
  .tu-compare__cell,
  .tu-compare__label { padding: .8rem 1rem; }
  .tu-compare__media { height: 10rem; }
}

/* ============================================================
   05. Stare golită
   ============================================================ */

.tu-compare__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  padding: 4.8rem 3.2rem;
  text-align: center;
  background: var(--tu-surface-subtle, #FAF6F1);
  border: 1px solid var(--tu-border-soft, #F0E6DC);
  border-radius: var(--tu-radius-lg, 1.4rem);
}

.tu-compare__empty-icon { font-size: 4rem; color: var(--tu-brand-500, #FF791F); }

.tu-compare__empty p {
  max-width: 46rem;
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.6;
  color: var(--tu-ink-700, #52453A);
  text-wrap: pretty;
}

.tu-compare__empty-cta {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  height: 4.4rem;
  padding: 0 2.2rem;
  border-radius: var(--tu-radius-md, .8rem);
  background: var(--tu-gradient-brand, linear-gradient(135deg, #FF791F, #CC5200));
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare__empty-cta:hover {
  border: 0;
  background: var(--tu-gradient-brand, linear-gradient(135deg, #FF791F, #CC5200));
  color: #fff;
  transform: translate3d(0, -2px, 0);
  box-shadow: var(--tu-shadow-hover, 0 10px 28px rgba(204, 82, 0, .13));
}

@media (max-width: 477px) {
  .tu-compare__empty { padding: 3.2rem 2rem; }
}

/* ============================================================
   06. Pagina dedicată

   Tabelul iese din containerul standard de 120rem: `.tu-compare-page__wrap` are
   `width: fit-content` (măsurat în px de JS, ca restrângerea la eliminarea unei
   coloane să fie animată) și `max-width: 100%`. La 6 produse ajunge la
   18 + 6×24 = 162rem, deci vizibil mai lat decât restul paginilor.
   ============================================================ */

.tu-compare-page {
  --tu-compare-gutter: 2rem;
  display: block;
  padding-block: 2.4rem 4.8rem;
  /* NU pune `overflow-x: clip` aici: cu `overflow-y: visible`, specificația
     transformă axa vizibilă în `auto`, secțiunea devine container de derulare
     și pagina capătă înălțime derulabilă sub footer. Falsul pozitiv de
     `scrollWidth` pe care `clip` îl tăcea e verificat în teste prin derularea
     reală (`window.scrollX`), nu prin `scrollWidth`. */
}

/* Antetul stă ÎN containerul măsurat (ca în Compare.js:70-86), deci nu are
   lățime sau padding propriu — le moștenește de la `.tu-compare-page__wrap` și
   se aliniază automat cu marginea tabelului. */
.tu-compare-page__head { box-sizing: border-box; }

/* Breadcrumb — aceeași copie a lui `.tu-bc` ca pe Magazin, dar aici nu rulează
   JS-ul care comută indicatorul de tăiere, deci „…" rămâne la opacity 0. */
.tu-compare-page .tu-bc { position: relative; width: 100%; min-width: 0; }

.tu-compare-page .tu-bc__scroll {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: .6rem;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  font-size: 1.3rem;
  line-height: 1.4;
}

.tu-compare-page .tu-bc__scroll::-webkit-scrollbar { display: none; }

.tu-compare-page .tu-bc__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--tu-brand-600, #CC5200) !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare-page .tu-bc__link:hover { color: var(--tu-brand-500, #FF791F) !important; }
.tu-compare-page .tu-bc__home { font-size: 1.5rem; line-height: 1; }
.tu-compare-page .tu-bc__sep { flex-shrink: 0; font-size: 1.6rem; line-height: 1; color: var(--tu-ink-400, #B0A294); }

.tu-compare-page .tu-bc__item,
.tu-compare-page .tu-bc__cur { font-weight: 500; color: var(--tu-ink-500, #8A7B6C); white-space: nowrap; }

.tu-compare-page .tu-bc__more { display: none; }

.tu-compare-page__titlerow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin: 1.8rem 0;
}

/* Wrapper-ele elementelor Bricks sunt `display: block; width: 100%`: ca flex
   item, grupul de acțiuni ocupa tot rândul și sărea pe linia următoare. */
.tu-compare-page__titlerow > * {
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
}

.tu-compare-page__titlerow > :last-child { margin-left: auto; }

.tu-compare-page__titles { min-width: 0; }

.tu-compare-page__title {
  margin: 0;
  font-family: var(--tu-shop-font-display, 'Archivo', sans-serif);
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--tu-ink-900, #2B1D10);
}

.tu-compare-page__wrap {
  box-sizing: border-box;
  width: fit-content;
  min-width: min(68rem, 100%);
  max-width: 100%;
  margin: 2rem auto 0;
  padding-inline: var(--tu-compare-gutter);
  transition: width var(--tu-duration-slow, .3s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare-page__wrap[data-measuring="1"] { transition: none; }

/* zona de scroll a tabelului, pe pagină: înălțime legată de viewport, ca
   rândurile lipite să aibă de ce să se lipească */
.tu-compare-page__wrap .tu-compare__scroll { max-height: max(42rem, calc(100vh - 20rem)); }

.tu-compare-page__wrap .tu-compare-share { margin-top: 3.6rem; }

@media (max-width: 991px) { .tu-compare-page { --tu-compare-gutter: 1.6rem; } }
@media (max-width: 767px) { .tu-compare-page { --tu-compare-gutter: 1.2rem; } }

@media (max-width: 477px) {
  .tu-compare-page { --tu-compare-gutter: 1rem; }
  .tu-compare-page__title { font-size: 2.4rem; }
}

.tu-compare-page__count {
  margin: .6rem 0 0;
  font-size: 1.35rem;
  color: var(--tu-ink-700, #52453A);
}

.tu-compare-page__actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.tu-compare-page__actions[hidden] { display: none; }

.tu-compare-copy {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  margin: -.5rem -.9rem;
  border: 0;
  border-radius: var(--tu-radius-md, .8rem);
  background: transparent;
  color: var(--tu-brand-600, #CC5200);
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare-copy .material-symbols-outlined { font-size: 1.7rem; }
.tu-compare-copy:hover { border: 0; background: var(--tu-brand-100, #FFF1E6); color: var(--tu-brand-700, #A34200); }
.tu-compare-copy:focus-visible { outline: 3px solid var(--tu-brand-300, #FFB877); }

.tu-compare-copy.is-done {
  color: var(--tu-success, #1B8A3A);
  background: var(--tu-success-bg, #E8F6EC);
}

@media (max-width: 767px) {
  .tu-compare-page__actions { gap: 1.4rem; }
}

/* ============================================================
   07. Toast-uri
   ============================================================ */

.tu-compare-toast {
  position: fixed;
  left: 50%;
  bottom: 9.6rem;
  z-index: 9600;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.6rem;
  transform: translateX(-50%);
  border-radius: var(--tu-radius-pill, 999px);
  background: var(--tu-ink-900, #2B1D10);
  color: #fff;
  font-family: var(--tu-shop-font, 'Archivo', sans-serif);
  font-size: 1.3rem;
  font-weight: 700;
  box-shadow: var(--tu-shadow-modal, 0 24px 64px rgba(43, 29, 16, .22));
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1)),
              bottom var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1)),
              visibility var(--tu-duration-fast, .2s);
}

.tu-compare-toast.is-open { opacity: 1; visibility: visible; }
.tu-compare-toast .material-symbols-outlined { font-size: 1.8rem; color: #6EDB93; }

/* toastul de link copiat urcă din marginea de jos */
.tu-compare-toast--copy { bottom: .8rem; }
.tu-compare-toast--copy.is-open { bottom: 2.8rem; }

/* ============================================================
   08. Partajare + produse similare
   ============================================================ */

.tu-compare-share { margin-top: 2.4rem; }

.tu-compare-share__title {
  margin: 0 0 1rem;
  font-family: var(--tu-shop-font-display, 'Archivo', sans-serif);
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--tu-ink-900, #2B1D10);
}

.tu-compare-share__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tu-compare-share__list li { margin: 0; }

.tu-compare-share__link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  height: 3.6rem;
  padding: 0 1.4rem;
  border: 1.5px solid var(--tu-border-strong, #E4DAD0);
  border-radius: var(--tu-radius-pill, 999px);
  background: #fff;
  color: var(--tu-ink-700, #52453A);
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--tu-duration-fast, .2s) var(--tu-ease, cubic-bezier(.2, .7, .3, 1));
}

.tu-compare-share__link .material-symbols-outlined { font-size: 1.8rem; }

.tu-compare-share__link:hover {
  border-color: var(--tu-brand-400, #FF9346);
  background: var(--tu-brand-50, #FFF6EE);
  color: var(--tu-brand-600, #CC5200);
}

/* ── carusel „Produse similare" ────────────────────────────
   Caruselul e componenta Bricks `4a360d` (aceeași ca pe homepage), inserată în
   pagina 5052 ÎN AFARA containerului măsurat al tabelului, deci cu lățimea lui
   proprie. Aici rămâne doar containerul: regulile lui `.tu-home__container`
   sunt scoped la `#brxe-tuhome`, deci nu se aplică pe altă pagină. */

.tu-compare-suggest { margin-top: var(--tu-space-8, 3.2rem); }

.tu-compare-suggest__container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--tu-container, 120rem);
  margin-inline: auto;
  padding-inline: var(--tu-gutter, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: var(--tu-space-8, 3.2rem);
}

/* ============================================================
   09. Preferință de mișcare redusă
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .tu-compare-btn,
  .tu-compare-bar__remove,
  .tu-compare-bar__cta,
  .tu-compare-clear,
  .tu-compare-text-btn,
  .tu-compare-copy,
  .tu-compare__remove,
  .tu-compare__media,
  .tu-compare__media img,
  .tu-compare__cart .button,
  .tu-compare-modal__panel,
  .tu-compare-toast { transition: none !important; }

  .tu-compare-btn:hover,
  .tu-compare-bar__cta:hover:not([disabled]) { transform: none; }
}