/** Shopify CDN: Minification failed

Line 94:0 Unexpected "@keyframes"

**/
/* Ixaria mobile PDP
   Ported from the agache-prototype spec: mobile-v37.html
   Source CSS is self-contained (no external url() references). */

#ix-pdp,
#ix-pdp *,
#ix-pdp *::before,
#ix-pdp *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --purple: #4d35ff;
  --ink: #121212;
  --gray: #707173;
  --gray2: #b6b9be;
  --hair: #ececec;
  --chipbg: #f2f2f2;
  --graysec: #f5f5f7;
  --yellow: #feffbe;
  --yellow2: #ffffe0;
  --lav: #f6f5ff;
  --lavchip: #ebe8ff;
  --blue: #eefbff;
  --cream: #f9f2df;
  --orange: #fa7800;
  --red: #eb2f1e;
  --slate: #363944;
  /* v23 — Figma tokens (file nzFrAoGn14yKWsPkHICnDG, read via get_variable_defs) */
  --black: #1d1d1f;
  --f7: #f7f7f7;
  --stroke: #f2f2f2;
  --c8: #c8cbd0;
  --beige: #f2f0e9;
  /* tracking: Figma stores %, these are the px equivalents at each size */
  --ls-12: -0.24px;
  --ls-13: -0.26px;
  --ls-14: -0.42px;
  --ls-16: -0.64px;
  --ls-18: -0.72px;
  --ls-20: -0.8px;
  --ls-24: -0.96px;
  /* textul de 14px de pe telefon creste la 15px pe desktop */
  --fs-14: 14px;
}
@media (min-width: 768px) {
  :root {
    --fs-14: 15px;
  }
}
#ix-pdp {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
#ix-pdp {
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
}
#ix-pdp button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
}
#ix-pdp a {
  text-decoration: none;
  color: inherit;
}
#ix-pdp img,
#ix-pdp video {
  display: block;
  max-width: 100%;
}
#ix-pdp .page {
  /* Pagina de telefon ocupa toata latimea ecranului: plafonul de 480px (ecranul simulat
     din prototip) lasa margini goale pe ecranele de telefon mai late, ex. Surface Duo (540px). */
  max-width: none;
  margin: 0 auto;
  background: #fff;
  position: relative;
  min-height: 100vh;
}

#ix-pdp /* ══ Cross-page push transition (PDP ↔ v3 configurator) ══ */
@keyframes pushOutL {
  to {
    transform: translateX(-100%);
  }
}
@keyframes pushInL {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
#ix-pdp body.push-out-l {
  animation: pushOutL 0.26s cubic-bezier(0.4, 0, 1, 1) forwards;
}
#ix-pdp html.enter-l body {
  animation: pushInL 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#ix-pdp /* ══ Views (SPA) ══ */
.view {
  position: fixed;
  inset: 0;
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  z-index: 60;
  transform: translateX(100%);
  /* La inchidere foaia iese pe unde a intrat: se ascunde abia dupa ce a
     alunecat afara, altfel visibility:hidden o taia pe loc. */
  transition:
    transform 0.3s cubic-bezier(0.32, 0.72, 0.35, 1),
    visibility 0s linear 0.3s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
}
#ix-pdp .view.open {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform 0.3s cubic-bezier(0.32, 0.72, 0.35, 1),
    visibility 0s;
}

#ix-pdp /* ══ Announcement bar (v2 redesign per Figma 756:9049) ══ */
#annbar {
  height: 40px;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
}
#ix-pdp #annbar .ann-txt {
  font-size: var(--fs-14);
  font-weight: 550;
  letter-spacing: -0.28px;
  line-height: 1.2;
  color: #1d1d1f;
  flex: 1;
  text-align: center;
  transition: opacity 0.25s;
}
#ix-pdp #annbar button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ix-pdp /* ══ Header (v2 redesign per Figma 756:9049) ══ */
#header {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid #f2f2f2;
}
#ix-pdp #header .logo img {
  height: 32px;
  width: auto;
  display: block;
}
#ix-pdp #header .h-icons {
  display: flex;
  align-items: center;
  gap: 32px;
}
#ix-pdp #header .icon-group {
  display: flex;
  align-items: center;
  gap: 16px;
}
#ix-pdp #header .icon-group button {
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ix-pdp #header .icon-group button img {
  display: block;
}
#ix-pdp #header .menu-btn {
  width: 32px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ix-pdp #header .menu-btn img {
  display: block;
  width: 23px;
  height: 14px;
}

#ix-pdp /* ══ Breadcrumb (v2 redesign per Figma 756:9049) ══ */
#crumb {
  padding: 12px 20px;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.2;
  color: #363944;
}
#ix-pdp #crumb .cur {
  color: #a8acba;
}

#ix-pdp /* ══ Hero gallery ══ */
#hero {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #f5f5f7;
  /* gestul pe orizontala e al caruselului, cel pe verticala ramane al paginii */
  touch-action: pan-y;
}
#ix-pdp #hero .sl img,
#ix-pdp #hero .sl video {
  /* altfel mouse-ul „ridica" poza si tragerea nu mai ajunge la carusel */
  -webkit-user-drag: none;
  user-select: none;
}
#ix-pdp #hero .trk {
  display: flex;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#ix-pdp #hero .sl {
  flex: 0 0 100%;
  height: 100%;
}
/* Cand eroul nu are un numar intreg de pixeli latime (la anumite latimi de ecran),
   translateX(-N*100%) pune marginile slide-urilor pe fractiuni de pixel si ramane
   vizibila o dunga subtire din poza vecina. In repaus vecinele se ascund; se vad
   doar cat banda chiar se misca (.is-moving, pus din heroRender / heroFollow). */
#ix-pdp #hero .trk:not(.is-moving) .sl:not(.is-active) {
  visibility: hidden;
}
/* Poza configuratiei in lucru (ixaria-pdp.js, ixPendCfgShot): la o forma sau o
   culoare noua aleasa in pagina, primul slide ramane pe loc sub ecranul „in
   lucru" (.cfg-loader, mai jos); poza noua intra lin peste el (ixFadeInto). */
#ix-pdp #hero .sl-cfgshot {
  position: relative;
}
#ix-pdp #hero .sl-cfgshot img {
  transition: filter 0.25s ease, opacity 0.25s ease;
}
#ix-pdp #hero .sl-cfgshot.is-pending img:not(.cfg-next) {
  filter: blur(6px) saturate(0.85);
  opacity: 0.55;
}
#ix-pdp #hero .sl-cfgshot img.cfg-next {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}
#ix-pdp #hero .sl-cfgshot img.cfg-next.is-in {
  opacity: 1;
}
/* Ecranul „in lucru" (ixaria-pdp.js, ixCfgLoaderEl), ca ecranul de asteptare
   al configuratorului (#cfg-boot, ixaria-configurator.css): acelasi fond,
   desenul canapelei si mesajul dedesubt, aceleasi marimi. Acopera poza de pana
   acum; pleaca lin cand intra poza noua (ixFadeInto scoate .is-busy). */
#ix-pdp #hero .sl-cfgshot .cfg-loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 24px;
  background: #f5f5f7;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    visibility 0s linear 0.35s;
}
#ix-pdp #hero .sl-cfgshot.is-busy .cfg-loader {
  opacity: 1;
  visibility: visible;
  transition: none;
}
/* Conturul intreg (desenul din ix-sofa-loader.svg, cu cutia stransa pe linii):
   cat desenul configuratorului, 171 x 104px, mai mic in erourile mici. */
#ix-pdp #hero .cfg-loader-art {
  position: relative;
  width: min(171px, 46%);
  aspect-ratio: 85.42 / 52.09;
}
#ix-pdp #hero .cfg-loader-art span,
#ix-pdp #hero .cfg-loader-art svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
#ix-pdp #hero .cfg-loader-base svg {
  stroke: #d9d9dc;
}
#ix-pdp #hero .cfg-loader-fill svg {
  stroke: #121212;
}
/* „Apa": o masca cu marginea de sus in val. E de doua ori cat desenul pe
   latime (doua perioade de val) si de patru ori pe inaltime, cu valul la un
   sfert: sub el e plin pana departe, deci apa acopera mereu desenul pana la
   picioare. Cu masca de 4H, pozitia y = p muta valul la H·(1 − 3p): la -3% e
   sub desen (nici crestele nu ating picioarele), la 36% e deasupra lui (nici
   golurile nu mai lasa spatarul gri). In acelasi timp valul curge spre stanga
   doua perioade, deci bucla nu sare. Plin, sta o clipa, apoi se stinge si o ia
   de la capat. */
#ix-pdp #hero .cfg-loader-fill {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 400' preserveAspectRatio='none'%3E%3Cpath d='M0 100 Q25 92 50 100 T100 100 T150 100 T200 100 V400 H0 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 400' preserveAspectRatio='none'%3E%3Cpath d='M0 100 Q25 92 50 100 T100 100 T150 100 T200 100 V400 H0 Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 200% 400%;
  mask-size: 200% 400%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: 0% -3%;
  mask-position: 0% -3%;
  animation: ix-cfg-loader-fill 2.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@keyframes ix-cfg-loader-fill {
  0% {
    -webkit-mask-position: 0% -3%;
    mask-position: 0% -3%;
    opacity: 1;
  }
  78% {
    -webkit-mask-position: 200% 36%;
    mask-position: 200% 36%;
    opacity: 1;
  }
  90% {
    -webkit-mask-position: 200% 36%;
    mask-position: 200% 36%;
    opacity: 1;
  }
  100% {
    -webkit-mask-position: 200% 36%;
    mask-position: 200% 36%;
    opacity: 0;
  }
}
#ix-pdp #hero .cfg-loader-msg {
  margin: 0;
  max-width: 34ch;
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #121212;
}
@media (max-width: 480px) {
  #ix-pdp #hero .cfg-loader-msg {
    font-size: 17px;
  }
}
@media (max-width: 767px) {
  #ix-pdp #hero .sl-cfgshot .cfg-loader {
    padding: 12px 24px;
    gap: min(26px, 3.5vh);
  }
}
/* Fara animatii: conturul plin, negru, de la inceput. */
@media (prefers-reduced-motion: reduce) {
  #ix-pdp #hero .cfg-loader-fill {
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  #ix-pdp #hero .sl-cfgshot .cfg-loader {
    transition: none;
  }
}
/* Poza din configurator pastrata (ixaria-pdp-gallery.liquid, ixEarlyCfgShot):
   pana se hotaraste daca se arata, poza implicita si miniaturile nu apar —
   altfel clipeau inaintea ei. TEMPORAR, cat poza sta in localStorage. */
html.ix-shot-pending #ix-pdp #hero .sl:not(.sl-cfgshot),
html.ix-shot-pending #ix-pdp #thumbs {
  visibility: hidden;
}
#ix-pdp #hero .sl img,
#ix-pdp #hero .sl video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Desenul cu dimensiuni (ixaria-pdp-data.js) se vede intreg: o cota taiata la
   margine nu mai spune nimic. Fundalul alb e al desenului. */
#ix-pdp #hero .sl-ix[data-ix="dims"] {
  background: #fff;
}
#ix-pdp #hero .sl-ix[data-ix="dims"] img {
  object-fit: contain;
}
/* Desenul vine din aplicatie decupat strans (cotele ajung pana la margine) si,
   intins pe toata poza, intra sub ce sta peste erou pe desktop: firimiturile,
   pastila „Configureaza", sagetile si banda de miniaturi. Acolo, in carusel,
   primeste o margine alba care le ocoleste. Pe telefon ramane pe toata poza
   (la cerere), iar in galeria pe tot ecranul (#rvgal) e intreg peste tot. */
@media (min-width: 768px) {
  #ix-pdp #hero .sl-ix[data-ix="dims"] {
    padding: 48px 128px 116px;
  }
}
/* tableta: fara sageti, miniaturile sub poza, pastila sus la 20px */
@media (min-width: 768px) and (max-width: 1199px) {
  #ix-pdp #hero .sl-ix[data-ix="dims"] {
    padding: 40px 56px 56px;
  }
}
#ix-pdp #hero,
#ix-pdp .st-hero {
  touch-action: pan-y;
}
#ix-pdp #hero img,
#ix-pdp .mh-trk img {
  -webkit-user-drag: none;
  user-select: none;
}
#ix-pdp /* v23: heart removed from the hero (absent in the 31-aug Pictures frame) */
#hero-heart {
  display: none;
}
#ix-pdp /* v23: badge measured at x:20 y:8,#ix-pdp 93×18.67,#ix-pdp radius 0,#ix-pdp 10px uppercase.
   Acolo stau acum insignele, una sub alta („Reducere" deasupra); „Reducere"
   are acelasi format, pe rosu. */
#hero-tags {
  position: absolute;
  top: 8px;
  left: 20px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
#ix-pdp #hero-badge,
#ix-pdp #hero-sale {
  background: #fff;
  color: var(--black);
  font-size: 10px;
  font-weight: 550;
  letter-spacing: 0.2px;
  line-height: 1.2;
  padding: 3.33px 10px;
  text-transform: uppercase;
}
#ix-pdp #hero-sale {
  background: var(--red);
  color: #fff;
}
#ix-pdp #hero-sale[hidden] {
  display: none;
}
/* Acelasi inel de culori ca insigna „CONFIGURABIL" de pe desktop (.p-configurabil),
   micsorat pe masura textului de 10px; insigna ramane la aceeasi inaltime. */
#ix-pdp #hero-badge {
  display: flex;
  align-items: center;
  gap: 6px;
}
#ix-pdp #hero-badge .cfg-ring {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  display: block;
}
#ix-pdp /* v23: arrows vertically centred (measured centre ≈ y195 of 375).
   Sagetile Tylko (disc alb): la 32px, fiindca la 24px cat era cercul din
   Figma chevronul ramanea de 3×6px. */
.hero-arr {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  z-index: 3;
  /* distanta discului de marginea pozei (si de unde incepe zona de click) */
  --hero-arr-edge: 20px;
}
#ix-pdp .hero-arr img {
  width: 32px;
  height: 32px;
  /* umbra in jurul discului alb, ca sa se desprinda de poza (si in galerie,
     .rvg-nav img) */
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
#ix-pdp #hero-prev {
  left: var(--hero-arr-edge);
}
/* Sageata „inapoi" e aceeasi iconita oglindita, nu rotita: rotita, i-ar cadea
   si umbra in sus. Chevronul e simetric, deci arata la fel. */
#ix-pdp #hero-prev img {
  transform: scaleX(-1);
}
#ix-pdp #hero-next {
  right: var(--hero-arr-edge);
}
/* O singura poza: nu e nimic de rasfoit, deci fara sageti, fara banda de
   miniaturi (desktop, tableta) si fara bara de progres (telefon). Clasa vine
   din ixaria-pdp-gallery.liquid si e tinuta la zi de heroSync(), fiindca pe
   pagina configurabila aplicatia adauga slide-uri dupa incarcare. */
#ix-pdp #hero.hero-single .hero-arr,
#ix-pdp #hero.hero-single ~ #thumbs,
#ix-pdp #hero.hero-single ~ #hero-progress {
  display: none;
}
#ix-pdp /* v23: pill shown,#ix-pdp moved bottom-right,#ix-pdp red,#ix-pdp 14px (measured 121.33×≈35) */
#hero-conf {
  display: flex;
  position: absolute;
  right: 20px;
  bottom: 18px;
  left: auto;
  top: auto;
  padding: 8px 11px;
  background: #fff;
  border-radius: 9999px;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-14);
  font-weight: 550;
  letter-spacing: var(--ls-14);
  line-height: 1.2;
  color: var(--red);
  z-index: 3;
}
#ix-pdp #hero-conf img {
  width: 14px;
  height: 14px;
}

#ix-pdp /* thumbnails (hidden per v2 hero redesign) */
#thumbs {
  display: none;
  gap: 4px;
  padding: 8px 15px 0;
}

#ix-pdp /* hero progress bar (v2,#ix-pdp per Figma 736:7427) */
#hero-progress {
  display: flex;
  width: 100%;
  position: relative;
}
#ix-pdp #hero-progress .hp-seg {
  flex: 1;
  height: 4px;
  background: #f2f2f2;
}
#ix-pdp #hero-progress .hp-active {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: calc(100% / 6);
  background: #363944;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#ix-pdp #thumbs button {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 2px solid transparent;
  padding: 0;
  overflow: hidden;
  border-radius: 2px;
}
#ix-pdp #thumbs button.on {
  border-color: var(--ink);
}
#ix-pdp #thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Miniatura filmului din galerie: posterul, cu un triunghi de play peste. */
#ix-pdp #thumbs button.is-video {
  position: relative;
}
#ix-pdp #thumbs button.is-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
#ix-pdp #thumbs button.is-video::after {
  opacity: 0.85;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23121212'/%3E%3C/svg%3E")
    center / 14px 14px no-repeat;
}

#ix-pdp /* ══ Product info (v2 buy-box) ══ */
.px {
  padding-left: 20px;
  padding-right: 20px;
}
/* Spatiile din blocul de cumparare sunt cele din Figma (1:471 pe desktop,
   38:179 pe telefon). Figma masoara textul de la
   inaltimea majusculei la linia de baza (text-box-trim), iar CSS de la
   marginile randului, deci un spatiu din Figma devine aici spatiul minus
   jumatatea de rand de deasupra/dedesubtul textului. La DM Sans majuscula
   incepe la L/2 − 0,36·marime sub marginea de sus a randului, iar linia de
   baza sta la L/2 − 0,34·marime deasupra celei de jos (L = line-height).
   Exemplu: randul pretului are exact 18px, ca in Figma, deci cei 40px de
   deasupra lui devin 40 − 3,64 (jumatatea de rand de sub descriere) + 0,44
   (Figma rotunjeste descrierea pe doua randuri de la 26,6 la 27px) = 36,8px. */
#ix-pdp #buybox {
  padding-top: 20px;
  font-variation-settings: "opsz" 14;
  font-feature-settings: "ss03" 1;
}
#ix-pdp /* v23: rating row gains send + bookmark on the right */
.p-rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#ix-pdp .p-rate {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Insigna „CONFIGURABIL" apare doar pe desktop; vezi blocul @media final. */
#ix-pdp .p-configurabil {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.84px;
  line-height: 1.2;
  color: var(--slate);
  white-space: nowrap;
}
/* Inelul de culori este imaginea din Figma (ix-configurabil-ring.png). */
#ix-pdp .p-configurabil .cfg-ring {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
}
#ix-pdp .p-rate .star {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: block;
  /* pe telefon nota sta la 4px de stea, restul randului la 8px */
  margin-right: -4px;
}
#ix-pdp .p-rate .sc {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.1;
  letter-spacing: var(--ls-13);
  color: var(--slate);
}
#ix-pdp .p-rate .cnt {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.1;
  letter-spacing: var(--ls-13);
  color: var(--slate);
  text-decoration: underline;
}
/* Telefon: iconite de 20px la 12px una de alta (desktop: 24px la 16px). */
#ix-pdp .p-rate-act {
  display: flex;
  align-items: center;
  gap: 12px;
}
#ix-pdp .p-rate-act button {
  width: 20px;
  height: 20px;
  padding: 0;
  display: flex;
  color: var(--black);
}
#ix-pdp .p-rate-act svg {
  width: 20px;
  height: 20px;
  display: block;
}
/* Salvat: inima se umple. Conturul este desenat cu stroke si fill: none, deci
   starea plina inseamna sa i se dea fill — aceeasi culoare ca linia, ca sa
   iasa neagra plina, nu o silueta cu gaura in mijloc. */
#ix-pdp .p-rate-act button.p-fav.on svg {
  fill: currentColor;
}
/* Inima din Figma e #363944, avionul #1D1D1F. */
#ix-pdp .p-rate-act button.p-fav {
  color: var(--slate);
}
/* Telefon (Figma 38:256): majuscula titlului la 16px sub randul notei, iar
   descrierea la 8px sub titlu — in CSS 16 + 1 − 5,8 si 8 − 6,2 − 3,36. */
#ix-pdp h1 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: var(--ls-20);
  line-height: 1.3;
  color: var(--ink);
  margin-top: 11.2px;
}
#ix-pdp .p-desc {
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: var(--ls-14);
  line-height: 1.3;
  margin-top: -0.56px;
  color: var(--slate);
}
/* Doua randuri, apoi trei puncte. -webkit-line-clamp cere si display
   -webkit-box si -webkit-box-orient; line-clamp este varianta standard, pusa
   dupa ele pentru browserele care o au deja. */
#ix-pdp .p-desc-t {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
#ix-pdp .p-desc .more {
  text-decoration: underline;
  cursor: pointer;
  /* Este <button>, ca sa se poata apasa si de la tastatura. Reset-ul general
     de la #ix-pdp button ii da familia si culoarea, dar nu si marimea: fara
     randurile astea butonul ar iesi mai mic decat textul din jurul lui. */
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
/* Deschis: se scoate taierea si se vede textul intreg. */
#ix-pdp .p-desc.is-open .p-desc-t {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
/* Ascuns cand textul incape; syncDescMore() din ixaria-pdp.js pune si scoate
   atributul. Regula este explicita fiindca .more poate primi un display de la
   alte reguli, iar atunci `hidden` singur nu ar mai ascunde nimic. */
#ix-pdp .p-desc .more[hidden] {
  display: none;
}
/* Randul pretului are 18px, ca in Figma: pretul si pretul vechi au randul
   de 18px, iar reducerea 10px + 4px sus/jos. Pretul la 8px de cel vechi, cel
   vechi la 4px de reducere (desktop: 16 si 8, in blocul @media). */
#ix-pdp .p-price-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 36.8px;
}
#ix-pdp .p-price {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: var(--ls-24);
  line-height: 18px;
  color: var(--red);
  margin-right: 4px;
}
#ix-pdp .p-old {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: var(--ls-16);
  line-height: 18px;
  color: var(--gray);
  text-decoration: line-through;
}
#ix-pdp .p-badge {
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-14);
  font-weight: 400;
  letter-spacing: var(--ls-14);
  line-height: 10px;
  padding: 4px 6px;
}

#ix-pdp /* size selector — v23: label dropped,#ix-pdp 14px/400,#ix-pdp divider is its own line 4px below */
#sizesel {
  margin-top: 40px;
}
/* Figma 1:571: miniatura 40px, blocul de 48px cu linia de 0,5px (#363944)
   pe ultima jumatate de pixel. Linia e desenata peste, nu ca border: un
   border de 0,5px devine 1px pe ecranele obisnuite (1x) si ar lungi randul. */
#ix-pdp #typesel {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-bottom: 8px;
  width: 100%;
}
#ix-pdp #typesel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--slate);
  transform: scaleY(0.5);
  transform-origin: bottom;
}
#ix-pdp #typesel .t-i-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
#ix-pdp #typesel img {
  width: 63px;
  height: 40px;
  /* miniatura formei: silueta intreaga, nu taiata */
  object-fit: contain;
  background: #fff;
  flex: 0 0 63px;
}
/* Doua randuri de 18px lipite: majusculele la 6px si 24px de sus, ca in
   Figma, cu blocul centrat pe miniatura. */
#ix-pdp #typesel .t-i {
  flex: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
}
#ix-pdp #typesel .t-n {
  font-size: var(--fs-14);
  font-weight: 400;
  letter-spacing: var(--ls-14);
  line-height: 18px;
  color: var(--ink);
}
#ix-pdp #typesel .t-d {
  font-size: var(--fs-14);
  font-weight: 400;
  letter-spacing: var(--ls-14);
  line-height: 18px;
  color: var(--gray);
}
#ix-pdp #typesel .t-change {
  font-size: var(--fs-14);
  font-weight: 400;
  letter-spacing: var(--ls-14);
  line-height: 18px;
  color: var(--black);
  text-decoration: underline;
  /* pe acelasi rand cu numele formei (2px = cat coboara blocul de text,
     centrat pe miniatura) */
  margin-top: 2px;
}

#ix-pdp /* materials — v23: label above the strip dropped */
#matsel {
  margin-top: 40px;
}
#ix-pdp #sizesel {
  margin-top: 40px;
}

#ix-pdp /* swatches */
.sw {
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
  padding: 0;
  position: relative;
  overflow: hidden;
}
#ix-pdp .sw img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#ix-pdp .sw.on::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid #111032;
  box-shadow: inset 0 0 0 4px #fff;
}
#ix-pdp .sw-plus {
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
  border: 1px solid #707173;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ix-pdp /* v23: 40×64 tiles,#ix-pdp gap 6,#ix-pdp + tile pinned right,#ix-pdp no scroller */
#swatches .sw-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 6px;
}
/* Doar materialele se deruleaza (iPhone SE de 320px, sau cand configuratorul
   adauga un material in banda); „+" ramane fix in dreapta, in afara benzii.
   Banda ia tot spatiul ramas (min-width: 0, altfel un copil flex nu se strange
   sub continutul lui). Padding-ul de 2px lasa loc inelului materialului ales,
   altfel taiat de overflow. */
#ix-pdp #swatches .sw-strip {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 2px;
  margin: -2px;
}
#ix-pdp #swatches .sw-strip::-webkit-scrollbar {
  display: none;
}
#ix-pdp #swatches .sw {
  width: 40px;
  height: 64px;
  flex: 0 0 40px;
}
/* Placa multicolora: doua culori taiate pe diagonala, trei sau mai multe in benzi
   verticale, de la stanga la dreapta. Directia se schimba de aici (clip-path,
   respectiv flex-direction). */
#ix-pdp .sw.sw-multi {
  position: relative;
  overflow: hidden;
  padding: 0;
}
#ix-pdp .sw.sw-multi .mc {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
#ix-pdp .sw.sw-multi-2 .mc:nth-child(1) {
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
#ix-pdp .sw.sw-multi-2 .mc:nth-child(2) {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
/* orice numar de culori peste doua: sw-multi-3 din JS, sw-multi-N din banda */
#ix-pdp .sw.sw-multi:not(.sw-multi-2) {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}
#ix-pdp .sw.sw-multi:not(.sw-multi-2) .mc {
  position: static;
  flex: 1 1 0;
  min-width: 0;
}
/* Schelet cat timp culorile produsului se incarca (banda .is-loading). */
@keyframes ixSkel {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}
#ix-pdp .sw-skel,
#ix-pdp .sk-line,
#ix-pdp #typesel img.is-loading {
  display: block;
  background: linear-gradient(90deg, #efefef 0%, #f7f7f7 40%, #efefef 80%);
  background-size: 200% 100%;
  animation: ixSkel 1.2s ease-in-out infinite;
}
#ix-pdp .sk-line {
  display: inline-block;
  width: 64px;
  height: 14px;
  border-radius: 3px;
  vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) {
  #ix-pdp .sw-skel,
  #ix-pdp .sk-line,
  #ix-pdp #typesel img.is-loading {
    animation: none;
  }
}
/* Materialul ales (Figma, la fel pe telefon): inel negru de 1px in afara
   placii, apoi 2px albi spre poza. */
#ix-pdp #swatches .sw.on {
  box-shadow: 0 0 0 1px #000;
}
#ix-pdp #swatches .sw.on::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #fff;
  box-shadow: none;
}
#ix-pdp #swatches .sw-plus {
  width: 40px;
  height: auto;
  flex: 0 0 40px;
  align-self: stretch;
  background: #fff;
  border: 1px solid var(--black);
}
#ix-pdp #swatches .sw-plus svg {
  width: 32px;
  height: 32px;
  display: block;
}
#ix-pdp /* v29: the Culoare row is label + name only -- Comanda mostre moved under the CTAs */
.sw-lbl-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 12px;
}
/* Randul are 16px (iconita), textul la fel — Figma 1:551. */
#ix-pdp .sw-name {
  font-size: var(--fs-14);
  font-weight: 400;
  letter-spacing: var(--ls-14);
  line-height: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--gray);
}
/* „Material" / „Culoare" apare doar pe ecranele late; pe telefon (Figma
   38:321) randul incepe direct cu numele materialului. */
#ix-pdp .sw-name .sw-lbl {
  display: none;
}
@media (min-width: 768px) {
  #ix-pdp .sw-name .sw-lbl {
    display: inline;
  }
}
#ix-pdp .sw-name b {
  font-weight: 400;
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 4px;
}
#ix-pdp .sw-name svg {
  width: 16px;
  height: 16px;
  /* Iconita (i) de langa numele materialului e ascunsa deocamdata; `block`
     o aduce inapoi. */
  display: none;
}

#ix-pdp /* ══ Voice note (Figma 1122:11892) ══ */
#voicenote {
  background: var(--f7);
  border: 1px solid var(--f7);
  border-radius: 8px;
  padding: 12px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  width: 100%;
  margin-top: 24px;
}
#ix-pdp #voicenote .vn-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
#ix-pdp #voicenote .vn-play {
  width: 27.71px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 27.71px;
  color: #1d1e1f;
}
#ix-pdp #voicenote .vn-play svg {
  display: block;
}
#ix-pdp #voicenote .vn-play .vn-pause {
  display: none;
}
#ix-pdp #voicenote.playing .vn-play .vn-ico {
  display: none;
}
#ix-pdp #voicenote.playing .vn-play .vn-pause {
  display: block;
}
#ix-pdp #voicenote .vn-wave {
  width: 211px;
  height: 32px;
  flex: 0 0 211px;
  cursor: pointer;
  touch-action: none;
}
#ix-pdp #voicenote .vn-wave svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#ix-pdp #voicenote .vn-b {
  stroke: var(--c8);
  stroke-width: 2;
  stroke-linecap: round;
}
#ix-pdp #voicenote .vn-b.on {
  stroke: #1d1e1f;
}
#ix-pdp #voicenote .vn-head {
  stroke: #1d1e1f;
  stroke-width: 1;
  stroke-linecap: round;
}
#ix-pdp /* the playhead marks where you are stopped,#ix-pdp so it goes away while running */
#voicenote.playing .vn-head {
  display: none;
}
#ix-pdp #voicenote .vn-av {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  object-fit: cover;
}
#ix-pdp /* while it is running the avatar gives way to the speed control */
#voicenote .vn-speed {
  display: none;
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--black);
  color: #fff;
  font-size: 12px;
  font-weight: 550;
  letter-spacing: var(--ls-12);
  line-height: 1;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
#ix-pdp #voicenote.playing .vn-av {
  display: none;
}
#ix-pdp #voicenote.playing .vn-speed {
  display: flex;
}
#ix-pdp #voicenote .vn-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 12px;
  font-weight: 450;
  letter-spacing: var(--ls-12);
  line-height: 1.2;
  color: var(--black);
  white-space: nowrap;
}
#ix-pdp #voicenote .vn-l {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 153px;
}
#ix-pdp /* This DM Sans has no tabular figures -- "11:11" renders half the width of
   "00:00" -- so the label was resizing every tick and sliding "Transcript"
   sideways. Pin the box to the widest rendering (v29: 12px text,#ix-pdp measured 34.05px). */
#voicenote #vn-time {
  display: inline-block;
  width: 35px;
  flex: 0 0 35px;
}
#ix-pdp #voicenote .vn-tr {
  text-decoration: underline;
  padding: 0;
  font-size: 12px;
  letter-spacing: var(--ls-12);
  line-height: 1.2;
  color: var(--black);
}

#ix-pdp /* ══ Transcript overlay (opened from the voice note) ══
   No dim: it floats over the page the way the reference does,#ix-pdp anchored under
   the card it belongs to,#ix-pdp so the page stays readable behind it. */
#voicenote {
  position: relative;
}
#ix-pdp #vntx {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: calc(100% + 9px);
  background: var(--stroke);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 20px;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.06);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    opacity 0.18s,
    transform 0.18s;
  z-index: 5;
}
#ix-pdp #vntx.on {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#ix-pdp #vntx h3 {
  font-size: 20px;
  font-weight: 550;
  letter-spacing: var(--ls-20);
  line-height: 1.3;
  color: var(--black);
  padding-right: 32px;
}
#ix-pdp #vntx p {
  font-size: var(--fs-14);
  font-weight: 450;
  letter-spacing: var(--ls-14);
  line-height: 1.4;
  color: var(--slate);
  margin-top: 12px;
}
#ix-pdp #vntx .vntx-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
}
#ix-pdp #vntx .vntx-x svg {
  width: 20px;
  height: 20px;
  display: block;
}

#ix-pdp /* CTAs */
#ctas {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#ix-pdp .btn-buy {
  background: var(--red);
  color: #fff;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: var(--ls-16);
  line-height: 1.2;
  height: 56px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  transition:
    transform 0.1s,
    background 0.2s;
}
#ix-pdp .btn-buy:active {
  transform: scale(0.97);
}
#ix-pdp .btn-buy svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: block;
}
#ix-pdp /* v23: row 2 is one full-width Personalizeaza button (replaces Sună-ne + Comanda mostre) */
.btn-custom {
  background: #fff;
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: 9999px;
  height: 56px;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: var(--ls-16);
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
#ix-pdp .btn-custom:active {
  background: rgba(235, 47, 30, 0.06);
}
#ix-pdp .btn-custom svg {
  width: 16px;
  height: 16px;
  display: block;
}
#ix-pdp /* v23: trust strip under the CTAs */
.ctas-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  /* randul de 24px din Figma (1:665), la 8px sub butoane (gap-ul din #ctas) */
  padding: 4.8px 0;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: var(--ls-12);
  line-height: 1.2;
  color: var(--slate);
  text-align: center;
}
#ix-pdp /* v29: Comanda mostre lives here now,#ix-pdp right under the trust strip */
.cta-samples {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 0;
  font-size: var(--fs-14);
  font-weight: 450;
  letter-spacing: var(--ls-14);
  line-height: 1.2;
  color: var(--black);
}
#ix-pdp .cta-samples span {
  text-decoration: underline;
}
#ix-pdp .cta-samples svg {
  width: 14px;
  height: 14px;
  display: block;
  flex: 0 0 14px;
}

#ix-pdp /* v23: specs are a 5-row list (replaces the v5 2×3 icon grid,#ix-pdp Figma 1108:11476) */
#bsgroup {
  margin-top: 40px;
  padding-bottom: 64px;
}
#ix-pdp .speclist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}
#ix-pdp .speclist .sl-rule {
  height: 1px;
  background: var(--stroke);
  width: 100%;
  flex: 0 0 1px;
}
#ix-pdp .sl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
}
#ix-pdp .sl-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 140px;
  flex: 0 0 140px;
}
#ix-pdp .sl-head svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: block;
  color: var(--slate);
}
#ix-pdp .sl-label {
  font-size: var(--fs-14);
  font-weight: 450;
  letter-spacing: var(--ls-14);
  line-height: 1.2;
  color: var(--slate);
}
#ix-pdp .sl-value {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-14);
  font-weight: 550;
  letter-spacing: var(--ls-14);
  line-height: 1.2;
  color: var(--black);
}
#ix-pdp .sl-value svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: block;
}
#ix-pdp .sl-row > .sl-chev {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: block;
  color: var(--black);
}

#ix-pdp /* v23: "Doresti o experienta completa?" upsell card (Figma 1108:11552) */
/* v37: the two upsell rows now live inside the Transport/Montaj panels of the spec-info
   sheet (id="specinfo-transport"/"specinfo-montaj") instead of a standalone card,#ix-pdp so the
   add-on sits right next to the detail that explains it. */
.up-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
#ix-pdp .up-i {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
#ix-pdp .up-i svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: block;
  color: var(--slate);
  stroke-width: 1;
}
#ix-pdp .up-t {
  font-size: var(--fs-14);
  font-weight: 450;
  letter-spacing: var(--ls-14);
  line-height: 1.2;
  color: var(--slate);
}
#ix-pdp .up-t u {
  text-decoration: underline;
}
#ix-pdp .up-p {
  font-size: var(--fs-14);
  font-weight: 450;
  letter-spacing: var(--ls-14);
  line-height: 1.2;
  color: var(--black);
  white-space: nowrap;
}
#ix-pdp .up-add {
  background: var(--red);
  border-radius: 9999px;
  padding: 8px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
#ix-pdp .up-add svg {
  width: 24px;
  height: 24px;
  display: block;
  color: #fff;
}

#ix-pdp /* eyebrow (shared by construit/confsec/testim headings) */
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.84px;
  font-weight: 550;
  color: #363944;
  line-height: 1.2;
}
#ix-pdp #confsec h2,
#ix-pdp #testim h2 {
  font-size: 28px;
  font-weight: 550;
  letter-spacing: -0.84px;
  line-height: 1.1;
  color: #1d1d1f;
  margin-top: 16px;
  margin-bottom: -2px;
}

#ix-pdp /* deep dive + samples panel (v4 redesign per Figma 783:10276) */
#deep {
  background: var(--beige);
  /* jos acelasi spatiu ca deasupra titlului */
  padding: 64px 20px 64px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
#ix-pdp #deep .dd-headline {
  font-size: 24px;
  font-weight: 550;
  letter-spacing: var(--ls-24);
  line-height: 1.05;
  color: var(--black);
}
#ix-pdp #deep .ddlist {
  display: flex;
  flex-direction: column;
  width: 100%;
}
#ix-pdp #deep .drow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14.6px 8px;
  border-top: 1px solid #707173;
  border-bottom: 1px solid #707173;
  margin-bottom: -1px;
  text-align: left;
  background: none;
}
#ix-pdp #deep .ddlist .drow:first-child {
  border-top: none;
}
#ix-pdp #deep .ddlist .drow:last-child {
  margin-bottom: 0;
}
/* Randurile fara text din Shopify (ixaria-pdp-info) stau ascunse pana le umple
   pagina; „display: flex" de mai sus bate regula browserului pentru [hidden].
   Cand primul e ascuns, urmatorul preia locul lui, fara linie deasupra. */
#ix-pdp #deep .drow[hidden] {
  display: none;
}
#ix-pdp #deep .ddlist .drow[hidden]:first-child + .drow {
  border-top: none;
}
#ix-pdp #deep .drow span {
  font-size: var(--fs-14);
  font-weight: 550;
  letter-spacing: var(--ls-14);
  line-height: 1.2;
  color: var(--black);
}
#ix-pdp #deep .drow svg {
  width: 6px;
  height: 11px;
  flex: 0 0 auto;
  display: block;
  color: var(--black);
  stroke-width: 2;
}
#ix-pdp #deep .ddpromise {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
#ix-pdp /* v23: trust lines are red — icons inlined so they inherit `color` */
#deep .ddp-item {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  font-weight: 550;
  letter-spacing: -0.72px;
  line-height: 1.2;
  color: var(--red);
}
#ix-pdp #deep .ddp-item svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: block;
  /* viewBox-urile au ~14 unitati, deci stroke-width 1.2 marit la 24px iesea ~2px */
  stroke-width: 0.85;
}

#ix-pdp /* v23: samples card is horizontal,#ix-pdp grey,#ix-pdp rounded (Figma Order samples frame) */
#mostrar {
  background: #fff;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
#ix-pdp #mostrar .ms-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
#ix-pdp #mostrar .ms-photo {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 64px;
}
#ix-pdp #mostrar .ms-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}
#ix-pdp #mostrar .ms-txt {
  flex: 1 0 0;
  min-width: 0;
}
#ix-pdp #mostrar h2 {
  font-size: 16px;
  font-weight: 550;
  letter-spacing: -0.64px;
  line-height: 1.2;
  color: var(--slate);
}
#ix-pdp #mostrar .ms-price {
  font-size: var(--fs-14);
  font-weight: 450;
  letter-spacing: -0.42px;
  line-height: 1.2;
  color: var(--black);
  white-space: nowrap;
  flex: 0 0 auto;
}
#ix-pdp #mostrar button svg {
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 16px;
}
#ix-pdp #mostrar button {
  background: #fff;
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: 9999px;
  padding: 16px 20px;
  font-size: 16px;
  letter-spacing: var(--ls-16);
  line-height: 1.2;
  font-weight: 550;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

#ix-pdp /* comfort metrics */
#comfort {
  padding: 56px 0;
}
#ix-pdp #comfort h2 {
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.52px;
  line-height: 1.15;
  text-align: center;
  padding: 0 24px;
}
#ix-pdp .cf-grid {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 40px;
  padding: 0 32px;
}
#ix-pdp .cf-item {
  text-align: center;
}
#ix-pdp .cf-title {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
#ix-pdp .cf-desc {
  font-size: var(--fs-14);
  color: #363944;
  letter-spacing: -0.1px;
  line-height: 1.35;
  margin-top: 6px;
}
#ix-pdp .cf-scale {
  max-width: 230px;
  margin: 16px auto 0;
}
#ix-pdp .cf-dashes {
  display: flex;
  gap: 8px;
}
#ix-pdp .cf-dash {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--hair);
}
#ix-pdp .cf-dash.on {
  background: var(--ink);
}
#ix-pdp .cf-track {
  position: relative;
  height: 2px;
  background: var(--hair);
  border-radius: 2px;
}
#ix-pdp .cf-seg {
  position: absolute;
  top: -1px;
  height: 4px;
  background: var(--ink);
  border-radius: 1px;
}
#ix-pdp .cf-tick {
  position: absolute;
  top: -5px;
  width: 2px;
  height: 12px;
  background: var(--ink);
}
#ix-pdp .cf-endlabels {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.1px;
}

#ix-pdp /* video */
#vidsec {
  position: relative;
  /* Raport 1 : 1.39 (latime : inaltime), cerut de design. Inlocuieste inaltimea
     fixa de 320px, care taia altfel filmul pe fiecare latime de ecran. */
  aspect-ratio: 1 / 1.39;
  background: #111;
  overflow: hidden;
}
#ix-pdp #vidsec video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#ix-pdp #vidsec .cap {
  /* Titlul vine din produs, deci majusculele le face foaia de stil: upcase in
     Liquid ar fi trebuit sa se descurce si cu diacriticele (Colectia -> COLECTIA). */
  text-transform: uppercase;
  position: absolute;
  left: 20px;
  bottom: 20px;
  /* Aceeasi inaltime si acelasi bottom ca butonul de pauza, cu textul centrat
     vertical: eticheta sta pe axa butonului, nu pe marginea lui de jos. */
  height: 48px;
  display: flex;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.84px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 550;
}
#ix-pdp #vidsec .vidsec-pause {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  padding: 0;
}
#ix-pdp #vidsec .vidsec-pause img {
  width: 48px;
  height: 48px;
  display: block;
}

#ix-pdp /* construite — exact per node 212:19467 */
/* v24: rebuilt to Figma 1127:12007 -- beige ground,#ix-pdp white 300x450 cards,#ix-pdp the .dsc subtext restored from mobile.html,#ix-pdp which is where it last lived */
#construit {
  background: var(--beige);
  padding: 64px 0;
}
#ix-pdp #construit .chead {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}
/* Sagetile railului "5 motive" exista in markup dar apar doar pe desktop:
   pe telefon railul se trage cu degetul, iar starea o arata linia de progres
   de sub carduri. Vezi blocul @media de la finalul foii. */
#ix-pdp #crail-nav {
  display: none;
}
#ix-pdp #construit .chead .lead {
  font-size: 18px;
  font-weight: 550;
  letter-spacing: var(--ls-18);
  line-height: 1.2;
  color: var(--black);
}
#ix-pdp #construit .rail {
  margin-top: 32px;
  gap: 12px;
}
#ix-pdp .rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 20px;
  scroll-padding: 0 20px;
  margin-top: 36px;
}
#ix-pdp .rail::-webkit-scrollbar {
  display: none;
}
#ix-pdp #crail {
  gap: 12px;
  padding: 0 16px;
  margin-top: 32px;
  scroll-padding: 0 16px;
  align-items: flex-start;
}
#ix-pdp .ccard {
  position: relative;
  flex: 0 0 300px;
  width: 300px;
  min-height: 450px;
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
#ix-pdp .ccard-tinted {
  position: relative;
  box-shadow: 0 8px 24px rgba(90, 68, 36, 0.1);
}
#ix-pdp .ccard-tinted .ctxt,
#ix-pdp .ccard-tinted .ph,
#ix-pdp .ccard-tinted .ph-strips {
  position: relative;
  z-index: 1;
}
#ix-pdp .ccard-tinted::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.15;
  mix-blend-mode: soft-light;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
#ix-pdp .ccard-beige {
  background: radial-gradient(
    130% 100% at 22% 0%,
    #ffffff 0%,
    #f6efe1 40%,
    #e9ddc5 78%,
    #e2d4b8 100%
  );
}
#ix-pdp .ccard-tesatura {
  background: radial-gradient(
    130% 100% at 78% 100%,
    #ffffff 0%,
    #f6e9da 38%,
    #e3c6a3 74%,
    #c99a68 100%
  );
}
#ix-pdp .ccard-culori {
  background: radial-gradient(
    130% 100% at 25% 0%,
    #ffffff 0%,
    #f3ede2 38%,
    #e2d6c3 74%,
    #c9b89e 100%
  );
}
#ix-pdp .ccard-captuseala {
  background: radial-gradient(
    130% 100% at 75% 0%,
    #ffffff 0%,
    #eef2f4 38%,
    #dde5e8 74%,
    #c9d5da 100%
  );
}
#ix-pdp .ccard .ctxt {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 24px;
  width: 100%;
}
#ix-pdp .ccard .tag {
  font-size: 16px;
  font-weight: 550;
  letter-spacing: var(--ls-16);
  line-height: 1.2;
  color: var(--black);
}
#ix-pdp .ccard .ttl {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--black);
}
#ix-pdp .ccard .dsc {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 16px;
  font-weight: 550;
  letter-spacing: var(--ls-16);
  line-height: 1.2;
  color: var(--black);
  transition:
    max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease 0.05s,
    margin-top 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    font-size 0.3s ease;
}
#ix-pdp .ccard.open .dsc {
  max-height: 320px;
  opacity: 1;
  margin-top: 4px;
  font-size: 18px;
  line-height: 1.35;
}
#ix-pdp .ccard-photo .dsc {
  color: #fff;
}
#ix-pdp /* Apple-style expand: the reason replaces the card's teaser,#ix-pdp it doesn't sit under it --
   heading and photo fade out,#ix-pdp only the plus (now an x) and the answer remain. */
.ccard.open .tag,#ix-pdp .ccard.open .ttl {
  display: none;
}
#ix-pdp .ccard.open .ph,
#ix-pdp .ccard.open .ph-strips {
  display: none;
}
#ix-pdp .ccard-photo {
  background: linear-gradient(
    165deg,
    #2e2015 0%,
    #8a5a35 45%,
    #dba873 75%,
    #f0d2ab 100%
  );
}
#ix-pdp .ccard-photo.open .ctxt {
  background: none;
}
#ix-pdp .ccard-plus {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #121212;
  border: 1.5px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#ix-pdp .ccard-plus svg {
  width: 16px;
  height: 16px;
  display: block;
}
#ix-pdp .ccard-plus svg line {
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}
#ix-pdp .ccard.open .ccard-plus {
  transform: rotate(45deg);
}
#ix-pdp .ccard .ph {
  flex: 0 0 auto;
}
#ix-pdp .ccard .ph img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
/* Grafica umple toata latimea cardului, ca in prototipul desktop (.benefit-img-bottom:
   width 100%, object-fit cover). Inaltimile sunt cele din prototip (card 372x520),
   scalate la cardul de telefon (300px lat): 240 / 372 / 341 -> 194 / 300 / 275. */
#ix-pdp .ph-garantie {
  width: 100%;
  height: 194px;
}
#ix-pdp .ph-tesatura {
  width: 100%;
  height: 300px;
}
#ix-pdp .ph-captuseala {
  width: 100%;
  height: 275px;
  overflow: hidden;
}
/* Cardurile din custom.benefits_section (snippets/ixaria-benefit-card.liquid): poza pe
   toata latimea, jos, la inaltimea celei de la „Captusit pe toate partile". */
#ix-pdp .ph-benefit {
  width: 100%;
  height: 275px;
  overflow: hidden;
}
#ix-pdp .ccard.ccard-photo {
  position: relative;
  display: block;
}
#ix-pdp .ccard-photo .ph-straturi {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    165deg,
    #2e2015 0%,
    #8a5a35 45%,
    #dba873 75%,
    #f0d2ab 100%
  );
}
#ix-pdp .ccard-photo .ph-straturi img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
}
#ix-pdp .ccard-photo .ctxt {
  position: relative;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(18, 18, 18, 0.8) 0%,
    rgba(18, 18, 18, 0.5) 50%,
    rgba(18, 18, 18, 0) 80%
  );
  padding-bottom: 56px;
}
#ix-pdp .ccard-photo .ctxt .tag,
#ix-pdp .ccard-photo .ctxt .ttl {
  color: #fff;
}
#ix-pdp .ccard-photo .ctxt .tag {
  font-weight: 450;
}
/* Trei benzi egale pe toata latimea, 4px intre ele, colturile de sus rotunjite. */
#ix-pdp .ph-strips {
  display: flex;
  gap: 4px;
  width: 100%;
  height: 210px;
}
#ix-pdp .ph-strips video {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 100%;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
}
#ix-pdp .rail-nav {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding: 0 16px;
  margin-top: 32px;
  align-items: center;
}
#ix-pdp .rn-prev,
#ix-pdp .rn-next {
  width: 40px;
  height: 40px;
  padding: 0;
}
#ix-pdp .rn-prev img,
#ix-pdp .rn-next img {
  width: 40px;
  height: 40px;
  display: block;
}
/* v37: crail drops the arrow pair for a thin scroll-progress line instead,#ix-pdp same move as the
   Hannun PDP reference -- a full-width hairline track with a dark fill that grows from the left
   edge to the current scroll fraction (0 -> 100%),#ix-pdp not a viewport-proportional thumb that
   slides (that's a real scrollbar's affordance,#ix-pdp and reads completely differently). */
/* The port left a stray '#ix-pdp' before the comment above, so the browser read
   this selector as '#ix-pdp #ix-pdp .rail-scrollbar' -- one wrapper nested inside
   another, which matches nothing. The wrapper therefore had no position:relative,
   was not a containing block, and the absolutely-positioned thumb resolved against
   .page instead, painting as a stray dark bar under the header. */
#ix-pdp .rail-scrollbar {
  height: 1px;
  background: #fff;
  margin: 12px 20px 0;
  position: relative;
}
#ix-pdp .rail-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  margin-top: -1px;
  width: 5%;
  background: var(--ink);
  transition: width 0.1s ease-out;
}

#ix-pdp /* configureaza section */
#confsec {
  background: var(--beige);
  padding: 80px 0 0;
}
#ix-pdp #confsec .px {
  padding-bottom: 24px;
}
#ix-pdp #confsec .wph {
  position: relative;
  margin-top: 0;
  border-radius: 0;
  overflow: hidden;
}
#ix-pdp #confsec .wph picture {
  display: block;
}
/* Poza de rezerva are colturile de sus rotunjite in fisier: marita 9% din marginea de
   jos, colturile ies din cadru (.wph are overflow: hidden). Doar pe telefon; de la
   768px <picture> incarca poza lata, fara colturi. */
@media (max-width: 767px) {
  #ix-pdp #confsec .wph img.ix-ws-fallback {
    transform: scale(1.09);
    transform-origin: center bottom;
  }
}
#ix-pdp #confsec .wph img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
}
/* Intins intre marginile de 20px, deci centrat la orice latime de telefon. Latimea fixa
   de 335px din Figma (ecran de 375px) iesea din ecran pe iPhone 5 (320px) si ramanea
   lipita in stanga pe telefoanele mai late. */
#ix-pdp #confsec .wbtn {
  position: absolute;
  left: 20px;
  right: 20px;
  width: auto;
  top: 420px;
  background: #fff;
  border-radius: 9999px;
  padding: 16px 24px;
  font-size: 16px;
  letter-spacing: var(--ls-16);
  line-height: 1.2;
  font-weight: 550;
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#ix-pdp #confsec .wbtn svg {
  display: block;
  flex: 0 0 16px;
}

#ix-pdp /* testimonials */
#testim {
  background: #fff;
  padding: 40px 0 80px;
  font-variation-settings: "opsz" 14;
  font-feature-settings: "ss03" 1;
}
#ix-pdp .score-badge {
  width: fit-content;
  margin: 0 0 0 20px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
#ix-pdp .score-badge .big {
  font-size: 48px;
  font-weight: 550;
  letter-spacing: -1.44px;
  line-height: 1.05;
  color: #1d1d1f;
}
#ix-pdp .score-badge .sb-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#ix-pdp .score-badge .stars {
  display: flex;
  gap: 1px;
}
#ix-pdp .score-badge .stars .star {
  width: 20px;
  height: 20px;
  fill: #ffc800;
}
#ix-pdp .score-badge .cnt {
  font-size: 18px;
  font-weight: 550;
  letter-spacing: -0.54px;
  color: #1d1d1f;
}
/* Textul de sub nota e doar al cartonasului mare de pe tableta si desktop;
   pe telefon insigna ramane cea mica, cu „21 recenzii". */
#ix-pdp .score-badge .sb-txt {
  display: none;
}
#ix-pdp #testim .filters {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: 24px;
  padding: 0 20px;
}
#ix-pdp #testim .filters::-webkit-scrollbar {
  display: none;
}
#ix-pdp #testim .rail {
  gap: 8px;
  margin-top: 48px;
}
#ix-pdp #testim .rail-nav {
  margin-top: 48px;
}
#ix-pdp .fpill {
  flex: 0 0 auto;
  font-size: var(--fs-14);
  letter-spacing: -0.28px;
  padding: 16px;
  border-radius: 9999px;
  border: 1px solid #363944;
  background: #fff;
  white-space: nowrap;
}
#ix-pdp .fpill.on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
#ix-pdp .rvcard {
  flex: 0 0 320px;
  background: var(--f7);
  border-radius: 16px;
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#ix-pdp .rvcard .rp {
  height: 227px;
  position: relative;
}
#ix-pdp .rvcard .rp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#ix-pdp .rv-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #fff;
  border-radius: 9999px;
  height: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 450;
  letter-spacing: var(--ls-13);
  color: #1d1d1f;
}
#ix-pdp .rv-badge .stars {
  display: flex;
  gap: 1px;
}
#ix-pdp .rv-badge .star {
  width: 12px;
  height: 12px;
  fill: #ffc800;
}
#ix-pdp .rvcard .bd {
  background: var(--f7);
  padding: 8px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Fara poza, textul incepe direct in card: sus acelasi spatiu ca pe laterale. */
#ix-pdp .rvcard .bd:first-child {
  padding-top: 16px;
}
#ix-pdp .rv-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Stelele de langa nume sunt doar pe desktop (vezi blocul @media). */
#ix-pdp .rv-stars {
  display: none;
}
#ix-pdp .rv-name {
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: var(--ls-14);
  color: #363944;
}
#ix-pdp .rv-ver {
  font-size: var(--fs-14);
  letter-spacing: var(--ls-14);
  color: #363944;
  display: flex;
  align-items: center;
  gap: 4px;
}
#ix-pdp .rv-date {
  font-size: 13px;
  letter-spacing: var(--ls-13);
  color: #363944;
  margin-left: auto;
}
#ix-pdp .rv-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#ix-pdp .rv-ttl {
  font-size: 24px;
  font-weight: 550;
  letter-spacing: var(--ls-24);
  line-height: 1.05;
  color: #1d1d1f;
}
#ix-pdp .rv-txt {
  font-size: 16px;
  font-weight: 550;
  letter-spacing: var(--ls-16);
  line-height: 1.2;
  color: #1d1d1f;
}
#ix-pdp .rv-prod {
  background: #fff;
  border: 1px solid var(--chipbg);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
}
#ix-pdp .rv-prod img {
  width: 77px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  background: #fff;
}
#ix-pdp .rv-prod .a {
  font-size: 13px;
  color: #363944;
}
#ix-pdp .rv-prod .b {
  font-size: 13px;
  font-weight: 450;
  text-decoration: underline;
  margin-top: 8px;
  color: #363944;
}

/* ── Recenzii pe telefon, dupa Figma (38:616) ──
   Spatiile sunt cele din Figma, masurate de la majuscula la linia de baza;
   aici se scade jumatatea de rand (vezi #buybox: majuscula incepe la
   L/2 − 0,36·marime, linia de baza sta la L/2 − 0,34·marime de margine).
   Unde textul sta direct pe marginea unei cutii (nota mare, „21 recenzii"),
   jumatatea de rand se taie cu margini negative, ca text-box-trim din Figma. */
@media (max-width: 767px) {
  #ix-pdp #testim {
    padding: 64px 0;
  }
  /* 227×89, chenar negru; chenarul de 1px intra in cei 24/20 de padding. */
  #ix-pdp #testim .score-badge {
    border-color: var(--black);
    padding: 23px 19px;
    align-items: flex-start;
  }
  #ix-pdp #testim .score-badge .big {
    margin: -7.92px 0 -8.88px;
  }
  #ix-pdp #testim .score-badge .cnt {
    line-height: 1.2;
    letter-spacing: -0.72px;
    margin: -4.32px 0 -4.68px;
  }
  /* 32 sub insigna pana la majuscula lui TESTIMONIALE. */
  #ix-pdp #testim .score-badge + #testim-h {
    margin-top: 29.12px;
  }
  /* Titlul pe trei randuri (<br class="rv-br">). In Figma cutia lui are 93px
     si textul e centrat in ea, deci majuscula cade la 21,5px sub linia de baza
     a lui TESTIMONIALE, nu la 16. */
  #ix-pdp #testim h2 {
    letter-spacing: -1.12px;
    margin: 13px 0 0;
  }
  #ix-pdp #testim .rail {
    margin-top: 32px;
  }
  #ix-pdp #testim .rv-badge {
    line-height: 12px;
  }
  /* Cardurile din rail iau inaltimea celui mai lung; cutia „Recenzie pentru"
     coboara la baza cardului, cu aceiasi 20px dedesubt ca in Figma. */
  #ix-pdp #testim .rvcard .bd {
    flex: 1;
    gap: 20px;
  }
  /* Randul cu numele are 16px (iconita), nu inaltimea randului de text. */
  #ix-pdp #testim .rv-meta {
    line-height: 16px;
  }
  #ix-pdp #testim .rv-body {
    gap: 8px;
  }
  #ix-pdp #testim .rv-prod {
    position: relative;
    margin-top: auto;
    padding: 7px;
  }
  /* Fara poza (.bd e primul copil) cardul nu se mai intinde cat cel mai inalt
     din rail: intre text si „Recenzie pentru" ramanea un gol mare. Cardul e
     cat continutul, cu cutia la 20px sub text (gap-ul lui .bd) si 20px dedesubt. */
  #ix-pdp #testim .rvcard:has(> .bd:first-child) {
    align-self: flex-start;
  }
  /* Miniatura produsului are peste ea un voal gri de 20% (#C5C5C5). */
  #ix-pdp #testim .rv-prod:has(> img)::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 7px;
    width: 77px;
    height: 40px;
    border-radius: 8px;
    background: rgba(197, 197, 197, 0.2);
    pointer-events: none;
  }
  #ix-pdp #testim .rv-prod .a,
  #ix-pdp #testim .rv-prod .b {
    line-height: 1.1;
    letter-spacing: var(--ls-13);
  }
  #ix-pdp #testim .rv-prod .b {
    margin-top: 2.8px;
    text-decoration-thickness: from-font;
    text-underline-position: from-font;
  }
  #ix-pdp #testim .rail-nav {
    margin-top: 32px;
    padding: 0 20px;
  }
}
@media (min-width: 768px) {
  #ix-pdp #testim .rv-br {
    display: none;
  }
}

#ix-pdp /* like / recent / locations */
#like {
  padding: 80px 20px 40px;
}
#ix-pdp .h20 {
  font-size: 24px;
  font-weight: 550;
  letter-spacing: -0.48px;
  line-height: 1.3;
  margin-bottom: -4px;
}
#ix-pdp #like .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 8px;
  margin-top: 24px;
}
#ix-pdp .pcard {
  border-radius: 12px;
  overflow: hidden;
  background: var(--chipbg);
}
#ix-pdp .pcard .im {
  height: 130px;
  background: #e9e9e9;
}
#ix-pdp .pcard .im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#ix-pdp .pcard .tx {
  padding: 10px 12px 12px;
}
#ix-pdp .pcard .n {
  font-size: 13px;
  font-weight: 550;
  line-height: 16px;
}
#ix-pdp .pcard .p {
  font-size: 13px;
  color: var(--gray);
  margin-top: 4px;
}
#ix-pdp #recent {
  padding: 80px 0 40px;
}
#ix-pdp #recent .rail,
#ix-pdp #locs .rail {
  margin-top: 24px;
}
#ix-pdp #recent .rail-nav,
#ix-pdp #locs .rail-nav {
  margin-top: 24px;
}
#ix-pdp #recent .pcard,
#ix-pdp #locs .pcard {
  flex: 0 0 160px;
  scroll-snap-align: start;
}
#ix-pdp #locs {
  padding: 80px 0 40px;
}
#ix-pdp #locs .pcard .n {
  font-size: var(--fs-14);
}

#ix-pdp /* ══════════ Shape (forma) sheet ══════════
   Foaie de jos pe telefon, fereastra centrata pe desktop (vezi @media de mai
   jos) — acelasi tipar ca #filter-sheet din configurator. */
.shape-sheet {
  position: fixed;
  inset: 0;
  max-width: 480px;
  margin: 0 auto;
  z-index: 65;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0);
  visibility: hidden;
  pointer-events: none;
  transition:
    background 0.25s ease,
    visibility 0s linear 0.3s;
}
#ix-pdp .shape-sheet.open {
  background: rgba(0, 0, 0, 0.45);
  visibility: visible;
  pointer-events: auto;
  transition:
    background 0.25s ease,
    visibility 0s;
}
#ix-pdp .shape-panel {
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 24px 24px 0 0;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
#ix-pdp .shape-sheet.open .shape-panel {
  transform: translateY(0);
}
#ix-pdp .shape-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 0;
}
#ix-pdp .shape-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
#ix-pdp .shape-grid {
  display: grid;
  /* 3 pe rand; al patrulea trece singur pe randul doi, aliniat la stanga */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 12px;
  padding: 20px 20px 32px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
#ix-pdp .stile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* titlurile pornesc de sus, aliniate pe rand chiar daca unul trece pe doua linii */
  justify-content: flex-start;
  align-self: start;
  min-width: 0;
  text-align: left;
  /* butoanele mostenesc nowrap; numele lungi trebuie sa treaca pe randul urmator */
  white-space: normal;
  overflow-wrap: break-word;
}
#ix-pdp .stile .simg {
  width: 100%;
  aspect-ratio: 1/1;
  /* colt si grosime ca .cfg-shape-tile.on din configurator */
  border-radius: 8px;
  border: 1.5px solid transparent;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}
#ix-pdp .stile .simg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#ix-pdp .stile.on .simg {
  border-color: var(--ink);
}
/* Bifa din coltul stanga-jos, ca .cfg-shape-check din configurator. Pseudo-element,
   nu markup, ca sa apara si pe dalele rescrise de ixaria-pdp-data.js. */
#ix-pdp .stile .simg {
  position: relative;
}
#ix-pdp .stile.on .simg::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: -1px;
  width: 20px;
  height: 20px;
  border-radius: 0 6px 0 0;
  background: var(--ink)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 11px 11px no-repeat;
}
#ix-pdp .stile .stx {
  margin-top: 8px;
}
#ix-pdp .stile .sn,
#ix-pdp .stile .sd {
  white-space: normal;
  overflow-wrap: break-word;
}
#ix-pdp .stile .sn {
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: var(--ls-14);
  line-height: 1.25;
  color: var(--ink);
  display: block;
}
#ix-pdp .stile .sd {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--gray);
  margin-top: 4px;
  display: block;
}
@media (min-width: 768px) {
  #ix-pdp .shape-sheet {
    max-width: none;
    margin: 0;
    align-items: center;
    justify-content: center;
  }
  #ix-pdp .shape-panel {
    width: min(720px, 92vw);
    max-height: 90vh;
    border-radius: 24px;
    opacity: 0;
    transform: translateY(16px);
    transition:
      transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
      opacity 0.2s ease;
  }
  #ix-pdp .shape-sheet.open .shape-panel {
    opacity: 1;
    transform: translateY(0);
  }
  #ix-pdp .shape-head {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #e3e3e3;
  }
  #ix-pdp .shape-grid {
    gap: 32px 20px;
    padding: 24px 24px 32px;
  }
  #ix-pdp .stile .stx {
    margin-top: 12px;
  }
  #ix-pdp .stile .sn {
    font-size: 16px;
  }
  #ix-pdp .stile .sd {
    font-size: 15px;
  }
}

/* „Transport & Retur" (#view-specinfo) foloseste aceeasi foaie ca selectorul de forma;
   doar corpul cu text se deruleaza, antetul ramane pe loc. */
#ix-pdp .info-sheet .info-topbar {
  flex: 0 0 auto;
  border-radius: 24px 24px 0 0;
}
#ix-pdp .info-sheet .info-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
@media (min-width: 768px) {
  #ix-pdp .info-sheet .shape-panel {
    width: min(560px, 92vw);
  }
  #ix-pdp .info-sheet .info-head {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #e3e3e3;
  }
  #ix-pdp .info-sheet .info-body {
    padding: 0 24px 32px;
  }
}

#ix-pdp /* ══════════ Info (deep-dive) view ══════════ */
.info-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
}
#ix-pdp .info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 20px 20px;
}
#ix-pdp .info-title {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.4px;
}
#ix-pdp .info-nav {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 20px 20px;
  border-bottom: 1px solid var(--hair);
}
#ix-pdp .info-nav::-webkit-scrollbar {
  display: none;
}
#ix-pdp .info-chip {
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid #c8cbd0;
  border-radius: 9999px;
  padding: 16px;
  font-size: var(--fs-14);
  letter-spacing: -0.28px;
  white-space: nowrap;
  color: var(--ink);
  transition: all 0.15s;
}
#ix-pdp .info-chip.on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
#ix-pdp .info-body {
  padding: 0 20px 56px;
}
#ix-pdp .info-sec {
  padding-top: 36px;
  scroll-margin-top: 12px;
  border-top: 1px solid var(--hair);
}
#ix-pdp .info-sec:first-child {
  padding-top: 28px;
  border-top: none;
}
#ix-pdp .info-sec h3 {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.4px;
  line-height: 1.15;
}
#ix-pdp .info-sec p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray);
  margin-top: 14px;
  white-space: pre-line;
}
#ix-pdp .info-sec .info-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#ix-pdp .info-sec .info-list div {
  font-size: 15px;
  line-height: 1.5;
  color: var(--slate);
}
/* Textele popup-ului scrise in Customize (rich text, ca tab-urile din Hyper).
   Paragrafele stau la un rand gol unul de altul, cum erau cand textul era scris
   in cod cu randuri goale intre ele. */
#ix-pdp .info-sec .ix-info-rte p + p {
  margin-top: 24px;
}
#ix-pdp .info-sec .ix-info-rte :is(ul, ol) {
  margin-top: 14px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray);
}
#ix-pdp .info-sec .ix-info-rte ul {
  list-style: disc;
}
#ix-pdp .info-sec .ix-info-rte ol {
  list-style: decimal;
}
#ix-pdp .info-sec .ix-info-rte :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
#ix-pdp .info-sec .ix-info-rte a {
  color: inherit;
  text-decoration: underline;
}
/* „Opțiuni de plată": iconitele metodelor activate in Shopify (payment_type_svg_tag) */
#ix-pdp .info-sec .ix-pay-icons {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#ix-pdp .info-sec .ix-pay-icons svg {
  display: block;
  width: 38px;
  height: 24px;
}

#ix-pdp /* ══════════ Materials view ══════════ */
#mv-stickyhead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
}
#ix-pdp #mv-top {
  position: relative;
}
#ix-pdp #mv-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.06);
  z-index: 1;
  pointer-events: none;
}
#ix-pdp .circ-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e3e3e3;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ix-pdp #mv-close {
  position: absolute;
  left: 20px;
  top: 32px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
#ix-pdp #mv-measure {
  position: absolute;
  right: 20px;
  top: 32px;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  border: none;
}
#ix-pdp #mv-measure img {
  width: 100%;
  height: 100%;
}
#ix-pdp #mv-3d {
  position: absolute;
  right: 20px;
  top: 80px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#ix-pdp #mv-3d img {
  width: 22px;
  height: 22px;
  display: block;
}
#ix-pdp #mv-sofa {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: contain;
  background: #fff;
}
#ix-pdp #mv-filtergroup {
  padding: 16px 20px 0;
  display: flex;
  flex-direction: column;
}
#ix-pdp #mv-filterrow {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-height: 40px;
  opacity: 1;
  overflow: hidden;
  margin-bottom: 16px;
  transition:
    max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease,
    margin-bottom 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
#ix-pdp #mv-filterrow.mv-hide {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
}
#ix-pdp #mv-filterbtn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #363944;
  border-radius: 20px;
  height: 36px;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 550;
  color: #1d1d1f;
}
#ix-pdp #mv-filterbtn .cntb {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #1d1d1f;
  color: #fff;
  font-size: 12px;
  font-weight: 450;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ix-pdp #mv-filterbtn .mv-filterbtn-div {
  width: 1px;
  height: 20px;
  background: #d9dbe0;
}
#ix-pdp .mv-gridtoggle {
  display: flex;
  align-items: center;
  gap: 4px;
}
#ix-pdp .mv-gridbtn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ix-pdp .mv-gridbtn.on {
  background: var(--chipbg);
}
#ix-pdp .mv-divider {
  order: 2;
  height: 1px;
  background: #e3e3e3;
  margin-bottom: 16px;
  transition: margin 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
#ix-pdp #mv-filtergroup.mv-collapsed .mv-divider {
  order: 4;
  margin-top: 8px;
  margin-bottom: 0;
}
#ix-pdp .chiprow {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#ix-pdp .fchip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--chipbg);
  border-radius: 8px;
  height: 30px;
  padding: 0 10px;
  font-size: 13px;
}
#ix-pdp .fchip .csq {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}
#ix-pdp .fchip-more,
#ix-pdp .fchip-clear {
  display: flex;
  align-items: center;
  height: 30px;
  font-size: 13px;
  text-decoration: underline;
  color: var(--ink);
  white-space: nowrap;
}
#ix-pdp .mv-tabs {
  display: flex;
  margin-top: 16px;
  border-bottom: 1px solid var(--hair);
  transition: margin-top 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
#ix-pdp #mv-filtergroup.mv-tight + .mv-tabs {
  margin-top: 0;
}
#ix-pdp .mv-tab {
  flex: 1;
  text-align: center;
  padding: 6px 0 12px;
  position: relative;
  color: var(--gray2);
}
#ix-pdp .mv-tab .a {
  font-size: 15px;
  font-weight: 650;
  display: block;
}
#ix-pdp .mv-tab .b {
  font-size: 12px;
  display: block;
  margin-top: 3px;
}
#ix-pdp .mv-tab.on {
  color: var(--ink);
}
#ix-pdp .mv-tab.on .b {
  color: var(--gray);
}
#ix-pdp .mv-tab.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
}
#ix-pdp .col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 36px 20px 0;
}
#ix-pdp .col-head .t {
  font-size: 20px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 6px;
}
#ix-pdp .col-head .pr {
  font-size: 12px;
  color: var(--gray);
}
#ix-pdp .col-head .pr b {
  font-size: 15px;
  color: var(--ink);
  font-weight: 650;
  margin-left: 4px;
}
#ix-pdp .col-meta {
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--gray);
  padding: 8px 20px 0;
}
#ix-pdp .mgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 15px;
  padding: 22px 20px 0;
}
#ix-pdp #mv-collections.mv-grid3 .mgrid {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px 10px;
}
#ix-pdp .mtile {
  position: relative;
}
#ix-pdp .mtile .imw {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}
#ix-pdp .mtile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#ix-pdp .mtile.on .imw::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 4px #fff;
}
#ix-pdp .mtile .lr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 9px;
}
#ix-pdp .mtile .nm {
  font-size: 12px;
}
#ix-pdp .info-i {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
}
#ix-pdp .info-i::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
#ix-pdp .info-i svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}
#ix-pdp .info-i:active {
  background: rgba(0, 0, 0, 0.08);
}
#ix-pdp .mtile-heart {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}
#ix-pdp .mtile-heart svg path {
  fill: none;
  stroke: #fff;
  stroke-width: 1.4;
  transition:
    fill 0.15s,
    stroke 0.15s;
}
#ix-pdp .mtile-heart.on svg path {
  fill: #fff;
  stroke: #fff;
}
#ix-pdp #mv-sticky {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  margin-top: 44px;
}
#ix-pdp #mv-sticky .nm {
  font-size: 13px;
}
#ix-pdp #mv-sticky .pr {
  font-size: 15px;
  font-weight: 700;
  margin-top: 2px;
}
#ix-pdp #mv-sticky .pr s {
  font-size: 13px;
  font-weight: 450;
  color: var(--gray2);
  margin-left: 6px;
}
#ix-pdp #mv-sticky .bb {
  height: 44px;
  background: #1d1d1f;
  color: #fff;
  border-radius: 22px;
  padding: 0 18px;
  font-size: var(--fs-14);
  font-weight: 550;
  display: flex;
  align-items: center;
  gap: 8px;
}
#ix-pdp #mv-ht-dim {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
#ix-pdp #mv-ht-dim.on {
  opacity: 1;
  pointer-events: auto;
}
#ix-pdp #mv-hearttip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  z-index: 96;
  background: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.14);
  padding: 12px 20px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(105%);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0.35, 1);
  touch-action: none;
}
#ix-pdp #mv-hearttip.on {
  transform: translateY(0);
}
#ix-pdp #mv-hearttip.dragging {
  transition: none;
}
#ix-pdp .mv-ht-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #d9dbe0;
  margin-bottom: 24px;
}
#ix-pdp .mv-ht-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--chipbg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
#ix-pdp .mv-ht-title {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.4px;
  margin-bottom: 8px;
}
#ix-pdp .mv-ht-text {
  font-size: 15px;
  line-height: 1.45;
  color: var(--gray);
  max-width: 290px;
  margin-bottom: 24px;
}
#ix-pdp .mv-ht-cta {
  width: 100%;
  height: 50px;
  background: #1d1d1f;
  color: #fff;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 550;
}

#ix-pdp /* ══════════ Collection view ══════════ */
#view-collection {
  z-index: 106;
}
#ix-pdp /* must outrank #samplesmodal (105) so its info icon can open the collection view on top of the sheet */
#view-swatch {
  z-index: 106;
}
#ix-pdp .st-hero {
  position: relative;
  height: 373px;
}
#ix-pdp .st-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#ix-pdp .st-back {
  position: absolute;
  left: 20px;
  top: 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
#ix-pdp .st-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
#ix-pdp .st-dots i {
  width: 20px;
  height: 3px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 2px;
}
#ix-pdp .st-dots i.on {
  background: var(--ink);
}
#ix-pdp .st-body {
  padding: 22px 20px 0;
}
#ix-pdp .st-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
#ix-pdp .st-title {
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -0.4px;
}
#ix-pdp .st-sub {
  font-size: 15px;
  color: var(--ink);
}
#ix-pdp .st-desc {
  font-size: var(--fs-14);
  line-height: 17.5px;
  margin-top: 14px;
}
#ix-pdp .st-chip {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--lavchip);
  border-radius: 8px;
  height: 34px;
  padding: 0 14px;
  color: var(--purple);
  font-size: var(--fs-14);
}
#ix-pdp .st-chip span {
  text-decoration: underline;
}
#ix-pdp .yl-band {
  margin-top: 28px;
  background: var(--yellow2);
  display: flex;
  padding: 22px 0;
}
#ix-pdp .yl-band .c {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--purple);
  font-size: var(--fs-14);
  font-weight: 550;
  text-align: center;
  line-height: 19px;
  padding: 0 6px;
}
#ix-pdp .yl-band .c + .c {
  border-left: 1px solid rgba(77, 53, 255, 0.35);
}
#ix-pdp .rz-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 34px 20px 0;
}
#ix-pdp .rz-head .t {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.3px;
}
#ix-pdp .rz-head .s {
  font-size: 22px;
  font-weight: 700;
}
#ix-pdp .rz-head .s i {
  font-style: normal;
  color: var(--gray2);
  font-weight: 450;
}
#ix-pdp .rz-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--hair);
}
#ix-pdp .rz-row .k {
  font-size: 15px;
  font-weight: 650;
}
#ix-pdp .rz-row .k em {
  display: block;
  font-style: normal;
  font-weight: 450;
  font-size: 13px;
  color: var(--gray);
  margin-top: 3px;
}
#ix-pdp .rz-row .vv {
  display: flex;
  align-items: center;
  gap: 10px;
}
#ix-pdp .rz-row .v {
  font-size: var(--fs-14);
  font-weight: 650;
}
#ix-pdp .rz-row .v i {
  font-style: normal;
  color: var(--gray2);
  font-weight: 450;
}
#ix-pdp .bar {
  width: 60px;
  height: 6px;
  background: #dcdcdc;
  border-radius: 3px;
  overflow: hidden;
}
#ix-pdp .bar i {
  display: block;
  height: 100%;
  background: var(--ink);
  border-radius: 3px;
}
#ix-pdp .see-more {
  display: block;
  margin: 26px auto 0;
  font-size: 15px;
  text-decoration: underline;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
#ix-pdp .ft-h {
  font-size: 22px;
  font-weight: 650;
  padding: 44px 20px 0;
}
#ix-pdp .ft-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hair);
}
#ix-pdp .ft-row .k {
  font-size: 15px;
}
#ix-pdp .ft-row .v {
  font-size: var(--fs-14);
  text-align: right;
  line-height: 18px;
  color: var(--ink);
}
#ix-pdp .mt-h {
  font-size: 24px;
  font-weight: 650;
  padding: 48px 20px 0;
}
#ix-pdp .mt-p {
  font-size: var(--fs-14);
  line-height: 17.5px;
  padding: 16px 20px 60px;
}

#ix-pdp /* ══════════ Filter sheet ══════════ */
#dim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 80;
}
#ix-pdp #dim.on {
  opacity: 1;
  pointer-events: auto;
}
#ix-pdp #fsheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px 20px 0 0;
  z-index: 90;
  transform: translateY(105%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0.35, 1);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
#ix-pdp #fsheet.on {
  transform: translateY(0);
}
#ix-pdp #fs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 20px 0;
}
#ix-pdp #fs-head .t {
  font-size: 20px;
  font-weight: 700;
}
#ix-pdp #fs-head button {
  font-size: 13px;
  text-decoration: underline;
  color: var(--ink);
}
#ix-pdp #fs-scroll {
  overflow-y: auto;
  padding-bottom: 12px;
}
#ix-pdp #fs-chips {
  padding: 20px 20px 4px;
}
#ix-pdp .fs-sec {
  border-bottom: 1px solid var(--hair);
  padding: 0 20px;
}
#ix-pdp .fs-sec:last-of-type {
  border-bottom: none;
}
#ix-pdp .fs-tt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 22px 0;
  font-size: 16px;
  font-weight: 650;
  text-align: left;
}
#ix-pdp .fs-tt svg {
  transition: transform 0.25s;
}
#ix-pdp .fs-sec.open .fs-tt svg {
  transform: rotate(180deg);
}
#ix-pdp .fs-bd {
  display: none;
  padding-bottom: 20px;
}
#ix-pdp .fs-sec.open .fs-bd {
  display: block;
}
#ix-pdp .ck-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  width: 100%;
  text-align: left;
}
#ix-pdp .ck {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid #c8cbd0;
  flex: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
#ix-pdp .ck-row.on .ck {
  background: var(--ink);
  border-color: var(--ink);
}
#ix-pdp .ck svg {
  opacity: 0;
}
#ix-pdp .ck-row.on .ck svg {
  opacity: 1;
}
#ix-pdp .ck-row .lb {
  font-size: 15px;
  flex: 1;
}
#ix-pdp .ck-row .ct {
  font-size: 13px;
  color: var(--gray);
}
#ix-pdp .ck-row .sb {
  display: block;
  font-size: 12px;
  color: var(--gray);
  margin-top: 3px;
}
#ix-pdp .cl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 0;
  width: 100%;
}
#ix-pdp .cl-row .lb {
  font-size: 15px;
}
#ix-pdp .cl-row .dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: relative;
}
#ix-pdp .cl-row.on .dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid var(--ink);
  border-radius: 50%;
}
#ix-pdp #fs-foot {
  padding: 14px 20px 10px;
  border-top: 1px solid var(--hair);
}
#ix-pdp #fs-apply {
  width: 100%;
  height: 52px;
  background: var(--purple);
  color: #fff;
  border-radius: 26px;
  font-size: 15px;
  font-weight: 550;
}
#ix-pdp #fs-reset {
  display: block;
  margin: 14px auto 0;
  font-size: 13px;
  text-decoration: underline;
}
#ix-pdp .hbar {
  width: 134px;
  height: 5px;
  background: #d9d9d9;
  border-radius: 3px;
  margin: 16px auto 8px;
}

#ix-pdp /* ══════════ Swatch modal — full-screen bottom sheet (85vh) ══════════ */
#smodal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
#ix-pdp #smodal.on {
  display: flex;
}
#ix-pdp #smodal .mbg {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 14, 0.55);
}
#ix-pdp #smodal .mcard {
  position: relative;
  background: #fff;
  border-radius: 20px 20px 0 0;
  max-width: 480px;
  width: 100%;
  height: 92vh;
  height: 92dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  animation: mslide 0.32s cubic-bezier(0.32, 0.72, 0.35, 1);
}
@keyframes mslide {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}
#ix-pdp #smodal .st-hero {
  height: 373px;
  flex: 0 0 373px;
  overflow: hidden;
}
#ix-pdp #smodal .st-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#ix-pdp #smodal .st-body {
  padding-bottom: 26px;
}
#ix-pdp #smodal .mcard > * {
  flex-shrink: 0;
}
#ix-pdp .mh-trk {
  display: flex;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#ix-pdp .mh-trk img,
#ix-pdp .mh-trk video {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#ix-pdp .st-dots button {
  width: 20px;
  height: 12px;
  padding: 0;
  display: flex;
  align-items: center;
}
#ix-pdp .st-dots button i {
  width: 20px;
  height: 3px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 2px;
  display: block;
}
#ix-pdp .st-dots button.on i {
  background: var(--ink);
}

#ix-pdp /* ══════════ Samples modal — order up to 5 free fabric swatches ══════════ */
#samplesmodal {
  position: fixed;
  inset: 0;
  z-index: 105;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
#ix-pdp #samplesmodal.on {
  display: flex;
}
#ix-pdp #samplesmodal .mbg {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 14, 0.55);
}
#ix-pdp #samplesmodal .mcard {
  position: relative;
  background: #fff;
  border-radius: 20px 20px 0 0;
  max-width: 480px;
  width: 100%;
  height: 92vh;
  height: 92dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  animation: mslide 0.32s cubic-bezier(0.32, 0.72, 0.35, 1);
}
#ix-pdp .sm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 20px 0;
  flex-shrink: 0;
}
#ix-pdp .sm-top .st-title {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.3px;
}
#ix-pdp .sm-body {
  flex: 1;
}
#ix-pdp #samplesmodal .col-head .t {
  display: flex;
  align-items: center;
  gap: 6px;
}
#ix-pdp #samplesmodal .mgrid {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 22px 10px;
}
#ix-pdp .sm-tile {
  position: relative;
}
#ix-pdp .sm-tile .imw {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
}
#ix-pdp .sm-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#ix-pdp .sm-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #c8cbd0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s,
    border-color 0.15s;
}
#ix-pdp .sm-check svg {
  opacity: 0;
}
#ix-pdp .sm-tile.on .sm-check {
  background: var(--ink);
  border-color: var(--ink);
}
#ix-pdp .sm-tile.on .sm-check svg {
  opacity: 1;
}
#ix-pdp .sm-tile .nm {
  font-size: 12px;
  margin-top: 9px;
}
#ix-pdp .sm-sticky {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--hair);
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  flex-shrink: 0;
}
#ix-pdp .sm-tray {
  display: none;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 14px;
}
#ix-pdp .sm-tray.on {
  display: flex;
}
#ix-pdp .sm-tray-item {
  position: relative;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 6px;
  overflow: hidden;
}
#ix-pdp .sm-tray-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#ix-pdp .sm-tray-item .rm {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e3e3e3;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ix-pdp .sm-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13px;
  color: var(--gray);
  margin-bottom: 10px;
}
#ix-pdp .sm-total b {
  font-size: 15px;
  color: var(--ink);
  font-weight: 650;
}
#ix-pdp #sm-add-btn {
  width: 100%;
  height: 52px;
  background: var(--purple);
  color: #fff;
  border-radius: 26px;
  font-size: 15px;
  font-weight: 550;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.2s;
}
#ix-pdp #sm-add-btn:disabled {
  opacity: 0.4;
}
#ix-pdp .sm-shipnote {
  text-align: center;
  font-size: 12px;
  color: var(--gray);
  margin-top: 12px;
}

#ix-pdp /* ══════════ Sticky add-to-cart ══════════
   Aceleasi masuri ca bara de pe site-ul live: pe telefon o banda alba de 74px pe
   toata latimea, cu o linie sus; pe desktop o carte de 418px in dreapta jos, cu
   chenar de 1px. */
#satc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px;
  padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  box-shadow: inset 0 1px 0 #e5e5e5;
  transform: translateY(110%);
  visibility: hidden;
  transition:
    transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s linear 0.3s;
}
#ix-pdp #satc.on {
  transform: translateY(0);
  visibility: visible;
  transition:
    transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0s;
}
#ix-pdp .satc-prod {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
#ix-pdp .satc-img {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  object-fit: cover;
  border-radius: 8px;
}
#ix-pdp .satc-info {
  min-width: 0;
}
#ix-pdp .satc-t {
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: var(--ls-14);
  line-height: 1.2;
  color: var(--ink);
  /* Fara „…": titlul trece pe al doilea rand cand nu incape, iar pe ecranele inguste
     totul se strange (mai jos). */
  white-space: normal;
  overflow-wrap: break-word;
}
/* Telefoane inguste: poza, butonul si textul mai mici, ca titlul sa incapa intreg. */
@media (max-width: 400px) {
  #ix-pdp #satc {
    gap: 10px;
    padding-left: 12px;
    padding-right: 12px;
  }
  #ix-pdp .satc-prod {
    gap: 10px;
  }
  #ix-pdp .satc-img {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
  #ix-pdp .satc-t {
    font-size: 13px;
  }
  #ix-pdp .satc-p {
    font-size: 15px;
  }
  #ix-pdp .satc-btn {
    height: 40px;
    padding: 0 14px;
    gap: 6px;
    font-size: 14px;
  }
}
#ix-pdp .satc-p {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 550;
  letter-spacing: var(--ls-16);
  line-height: 1.1;
  color: var(--red);
}
#ix-pdp .satc-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 9999px;
  background: var(--red);
  color: #fff;
  font-size: 15px;
  font-weight: 550;
  letter-spacing: var(--ls-14);
  white-space: nowrap;
}
/* Pe telefon bara acopera capatul paginii (ultimul rand din subsol). Cat timp e
   vizibila, pagina capata dedesubt exact inaltimea ei, deci subsolul se termina
   deasupra barei. Pe desktop bara e o carte in colt, nu o banda, deci nu e nevoie. */
@media (max-width: 767px) {
  html.ix-satc-on body {
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  }
}
/* Toast-ul urca deasupra barei cat timp ea e vizibila. Ascuns, el sta doar 80px sub
   pozitia lui; ridicat la 96px, marginea lui de jos iesea de sub bara ca o pastila
   neagra goala. Ascunderea nu mai depinde de cat de jos ajunge. */
html.ix-satc-on #ix-pdp #toast {
  bottom: 96px;
}
#ix-pdp #toast:not(.on) {
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.3s,
    opacity 0.2s,
    visibility 0s linear 0.3s;
}
#ix-pdp #toast.on {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 768px) {
  #ix-pdp #satc {
    left: auto;
    right: 30px;
    bottom: 30px;
    width: 418px;
    padding: 18px;
    border-radius: 10px;
    box-shadow:
      inset 0 0 0 1px #e5e5e5,
      0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(calc(100% + 40px));
  }
  #ix-pdp #satc.on {
    transform: translateY(0);
  }
  html.ix-satc-on #ix-pdp #toast {
    bottom: 34px;
  }
}

#ix-pdp /* ══════════ Review photo gallery ══════════ */
#rvgal {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: #fff;
  display: none;
  flex-direction: column;
}
#ix-pdp #rvgal.on {
  display: flex;
}
#ix-pdp .rvcard .rp {
  cursor: zoom-in;
}
#ix-pdp .rvg-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
#ix-pdp .rvg-close svg {
  width: 26px;
  height: 26px;
}
/* Pozele stau pe o banda, cate una pe ecran, ca in caruselul de sus: la tras
   banda urmeaza degetul, iar poza vecina intra din margine. Poza merge de la o
   margine la alta; sus ramane loc pentru butonul de inchidere.
   --rvg-pt/--rvg-pb sunt spatiul de sus si de jos al slide-ului; din ele se
   calculeaza si inaltimea sagetilor, ca sa cada pe mijlocul pozei. */
#ix-pdp #rvgal {
  --rvg-pt: 60px;
  --rvg-pb: 16px;
  --rvg-arr: 32px;
  --rvg-arr-inset: 20px;
}
/* Toate gesturile de pe scena sunt ale galeriei (tras, ciupit, dubla
   atingere — ixaria-pdp.js, zoom-ul din galerie): fara „none" browserul ar
   pastra ciupitul pentru toata pagina, iar tragerea verticala a pozei marite
   i-ar anula gestul. */
#ix-pdp .rvg-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
}
#ix-pdp .rvg-trk {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#ix-pdp .rvg-sl {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rvg-pt) 0 var(--rvg-pb);
}
#ix-pdp .rvg-sl img,
#ix-pdp .rvg-sl video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
/* Cu poza marita, sagetile ar sta peste ea: se ascund pana revine la 1. */
#ix-pdp #rvgal.is-zoomed .rvg-nav {
  opacity: 0;
  pointer-events: none;
}
/* In galeria pe ecran intreg, peste poza, lupa de zoom: un singur clic o
   mareste (rvgZoomUp, ixaria-pdp.js). Marita, devine mana de tras (mai jos). */
@media (hover: hover) and (pointer: fine) {
  #ix-pdp .rvg-sl img {
    cursor: zoom-in;
  }
  #ix-pdp #rvgal.is-zoomed .rvg-sl.on img {
    cursor: grab;
  }
}
#ix-pdp .rvg-thumb video {
  width: 52px;
  height: 64px;
  object-fit: cover;
  display: block;
}
#ix-pdp #hero .sl {
  cursor: zoom-in;
}
/* Sagetile caruselului (discul alb Tylko, ix-arrow-tylko.svg), de aceeasi
   marime ca acolo, pe mijlocul pozei si la aceeasi distanta de marginea ei.
   Poza e centrata in slide, deci mijlocul ei e mijlocul zonei dintre --rvg-pt
   si --rvg-pb. Cand poza e mai ingusta decat ecranul, --rvg-gap (golul de pe
   margine, pus din JS) le muta pe poza, altfel discul alb ar sta pe fundal
   alb. Butonul are macar 44px, pentru deget. */
#ix-pdp .rvg-nav {
  --rvg-hit: max(44px, var(--rvg-arr));
  position: absolute;
  z-index: 1;
  top: calc(50% + (var(--rvg-pt) - var(--rvg-pb)) / 2);
  transform: translateY(-50%);
  width: var(--rvg-hit);
  height: var(--rvg-hit);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  transition: left 0.25s ease, right 0.25s ease;
}
#ix-pdp .rvg-nav[hidden] {
  display: none;
}
#ix-pdp .rvg-nav img {
  display: block;
  width: var(--rvg-arr);
  height: var(--rvg-arr);
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
#ix-pdp .rvg-prev {
  left: calc(var(--rvg-gap, 0px) + var(--rvg-arr-inset) - (var(--rvg-hit) - var(--rvg-arr)) / 2);
}
#ix-pdp .rvg-prev img {
  transform: scaleX(-1);   /* oglindita, ca umbra sa cada tot in jos (vezi #hero-prev img) */
}
#ix-pdp .rvg-next {
  right: calc(var(--rvg-gap, 0px) + var(--rvg-arr-inset) - (var(--rvg-hit) - var(--rvg-arr)) / 2);
}
#ix-pdp .rvg-thumbs {
  flex: 0 0 auto;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 16px 24px;
}
#ix-pdp .rvg-thumbs::-webkit-scrollbar {
  display: none;
}
/* centred when they fit, scrollable from the first one when they don't */
#ix-pdp .rvg-thumb:first-child {
  margin-left: auto;
}
#ix-pdp .rvg-thumb:last-child {
  margin-right: auto;
}
#ix-pdp .rvg-thumb {
  flex: 0 0 52px;
  padding-bottom: 10px;
  position: relative;
}
#ix-pdp .rvg-thumb img {
  width: 52px;
  height: 64px;
  object-fit: cover;
  display: block;
}
#ix-pdp .rvg-thumb.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--ink);
}
@media (min-width: 768px) {
  #ix-pdp .rvg-close {
    top: 16px;
    right: 20px;
  }
  #ix-pdp #rvgal {
    --rvg-pt: 44px;
    --rvg-pb: 24px;
    --rvg-arr: 48px;
  }
  #ix-pdp .rvg-thumbs {
    padding: 0 40px 36px;
  }
  #ix-pdp .rvg-thumb {
    flex-basis: 70px;
  }
  #ix-pdp .rvg-thumb video,
  #ix-pdp .rvg-thumb img {
    width: 70px;
    height: 87px;
  }
}
/* Pe desktop sagetile stau in afara pozei, in golul de langa ea, la
   --rvg-arr-inset de marginea ei. Slide-ul pastreaza de fiecare parte loc
   pentru o sageata (--rvg-side), ca o poza lata sa nu ajunga sub ele; golul
   dintre poza si marginea slide-ului il masoara rvgNavFit (--rvg-gap). */
@media (min-width: 1200px) {
  #ix-pdp #rvgal {
    --rvg-arr-inset: 32px;
    --rvg-side: calc(var(--rvg-arr) + 2 * var(--rvg-arr-inset));
  }
  #ix-pdp .rvg-sl {
    padding-left: var(--rvg-side);
    padding-right: var(--rvg-side);
  }
  #ix-pdp .rvg-prev {
    left: calc(var(--rvg-gap, var(--rvg-side)) - var(--rvg-arr-inset) - var(--rvg-arr) - (var(--rvg-hit) - var(--rvg-arr)) / 2);
  }
  #ix-pdp .rvg-next {
    right: calc(var(--rvg-gap, var(--rvg-side)) - var(--rvg-arr-inset) - var(--rvg-arr) - (var(--rvg-hit) - var(--rvg-arr)) / 2);
  }
}

#ix-pdp /* ══════════ Controalele filmelor (ixaria-video-controls.js) ══════════ */
.ixv-host {
  position: relative;
}
/* Stratul controalelor, peste film, din carusel si din galerie: butonul de
   pauza in mijloc si bara jos. Pozitia si marimea (partea vizibila a filmului)
   le pune scriptul. Cat e ascuns nu prinde nicio atingere, iar si cand se vede,
   doar butoanele si derularea le prind: in rest atingerea si tragerea ajung la
   film (arata/ascunde controalele, schimba slide-ul). */
#ix-pdp .ixv {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#ix-pdp .ixv.on {
  opacity: 1;
}
#ix-pdp .ixv.on .ixv-mid,
#ix-pdp .ixv.on .ixv-btn,
#ix-pdp .ixv.on .ixv-seek {
  pointer-events: auto;
}
/* Acelasi buton ca in banda video „Descopera" (#vidsec .vidsec-pause): cerc
   alb subtire de 48px, cu pauza sau pornire. */
#ix-pdp .ixv-mid {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  padding: 0;
}
#ix-pdp .ixv-mid svg {
  width: 48px;
  height: 48px;
  display: block;
}
#ix-pdp .ixv-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 28px 6px 4px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}
#ix-pdp .ixv-btn {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: inherit;
}
#ix-pdp .ixv-btn[hidden] {
  display: none;
}
#ix-pdp .ixv-btn svg {
  width: 22px;
  height: 22px;
  display: block;
}
#ix-pdp .ixv-t {
  flex: none;
  font-size: 12px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Zona de apucat e toata inaltimea barei (40px), nu doar linia de 3px. */
#ix-pdp .ixv-seek {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  cursor: pointer;
  touch-action: none;
}
#ix-pdp .ixv-seek:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}
#ix-pdp .ixv-rail {
  position: relative;
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}
#ix-pdp .ixv-fill {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
#ix-pdp .ixv-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease;
}
#ix-pdp .ixv-seek.is-scrub .ixv-knob {
  transform: scale(1.4);
}
/* Pe telefon pastila „Configurează" sta jos-dreapta, exact sub bara: cat se
   vede bara, pleaca. */
@media (max-width: 767px) {
  #ix-pdp #hero-conf {
    transition: opacity 0.2s ease;
  }
  #ix-pdp #hero.ixv-open #hero-conf {
    opacity: 0;
    pointer-events: none;
  }
}

#ix-pdp /* ══════════ Lightbox ══════════ */
#lbox {
  position: fixed;
  inset: 0;
  background: #1d1d1f;
  z-index: 110;
  display: none;
  align-items: center;
  justify-content: center;
}
#ix-pdp #lbox.on {
  display: flex;
}
#ix-pdp #lbox img,
#ix-pdp #lbox video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
#ix-pdp #lbox .lclose {
  position: absolute;
  top: 24px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ix-pdp /* toast */
#toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%) translateY(80px);
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-14);
  padding: 12px 22px;
  border-radius: 22px;
  transition: transform 0.3s;
  z-index: 120;
  white-space: nowrap;
}
#ix-pdp #toast.on {
  transform: translateX(-50%) translateY(0);
}
/* Mesajele de favorite: pastila alba, cu chenar si umbra ca #satc, ca sa se
   vada si peste fundalul alb al paginii. */
#ix-pdp #toast.light {
  background: #fff;
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px #e5e5e5,
    0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ── Theme reconciliation ─────────────────────────────────────────────
   The prototype set its font once on body and let everything inherit.
   This theme sets font-family DIRECTLY on h1-h6 and on button, and a
   direct rule always beats an inherited value, so the product title and
   the Configureaza pill were rendering in the theme's fonts. Restate
   DM Sans at #ix-pdp specificity to win it back. */
#ix-pdp h1,
#ix-pdp h2,
#ix-pdp h3,
#ix-pdp h4,
#ix-pdp h5,
#ix-pdp h6,
#ix-pdp button,
#ix-pdp input,
#ix-pdp select,
#ix-pdp textarea {
  font-family: "DM Sans", sans-serif;
}

/* The spec always had six hero slides, so the moving indicator was a
   hardcoded 1/6 of the bar. Media count is per-product here, so the section
   computes the share in Liquid and passes it as --ix-seg-w.

   Do NOT go back to calc(100% / var(--ix-slides)): if that division fails to
   resolve, width falls back to auto, and an empty absolutely-positioned div
   shrink-to-fits to zero. The indicator is the only dark part of the bar, so
   the whole bar reads as missing. A plain percentage has no such failure mode. */
#ix-pdp #hero-progress .hp-active {
  width: var(--ix-seg-w, 16.6667%);
  min-width: 8px;
}

/* The prototype assumed bare <button> elements with no UA or theme styling.
   This theme's `button, .btn` rule gives every button a fixed height
   (--buttons-height, 4.8rem on this page), a 1px border, a 10px corner radius
   (--buttons-radius: 1rem), capitalised text and a 30px line-height. The radius
   was rounding the material swatches, which are buttons with overflow:hidden,
   so the artwork was being clipped to the curve. The spec's own rules never override those four, so every
   button in the port silently inherited them — the Configureaza pill rendered
   48px tall instead of the 33px its 8px/12px padding implies. Reset them to
   neutral and let each spec rule size its own control; anything more specific
   than `#ix-pdp button` still wins. */
#ix-pdp button {
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  text-transform: none;
  line-height: inherit;
  color: inherit;
}

/* The spec sized this icon as `#hero-conf img`, but the markup is an inline
   <svg>, so the rule never matched. */
#ix-pdp #hero-conf svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

/* ── Weight bump ──────────────────────────────────────────────────────
   Requested: "make all the text just a little bolder". Every declared
   font-weight in this file was raised one step (400->500, 500->600,
   600->700); 700 stays, being the heaviest weight the section loads from
   Google Fonts. This block covers the rest: text the spec never gave an
   explicit weight, which would otherwise sit at the browser default 400.
   To undo, lower each weight one step and drop this block. */
#ix-pdp {
  font-weight: 450;
}
/* the theme forces --font-button-weight onto every button; let ours take
   the base above unless a spec rule sets its own */
#ix-pdp button {
  font-weight: inherit;
}

/* ── Empty-div rescue ─────────────────────────────────────────────────
   The theme ships `div:empty:not(.fixed-overlay, .bg-overlay, .empty-space,
   .drawer__body, .no-empty) { display: none }`. The prototype is built out of
   deliberately-empty divs, so that single rule silently erased a lot of this
   page: the hero progress segments and their indicator, all four rail
   scroll-progress thumbs, the comfort-scale dashes and ticks, several rules
   and dividers, and the modal dimmers.

   Safe to undo wholesale here. Nothing inside #ix-pdp depends on being hidden
   for being empty: #dim, #mv-ht-dim and #toast hide via opacity and
   pointer-events, while #smodal, #samplesmodal and #lbox are display:none but
   have children, so :empty never matched them anyway. Containers that JS fills
   stop matching :empty the moment they have content. */
#ix-pdp div:empty {
  display: block;
}
/* filter chip rows are flex once populated; keep that while still empty */
#ix-pdp .chiprow:empty {
  display: flex;
}

/* ── Configurator overlay ─────────────────────────────────────────────
   The configurator is rendered into this page and its engine started in the
   background, so opening it is a class change rather than a navigation. It is
   moved off-screen rather than display:none — a hidden subtree stops laying out
   and the WebGL canvas would never size itself, defeating the warm-up. */
#ix-cfg {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #fff;
  overflow: hidden;
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 0.3s cubic-bezier(0.32, 0.72, 0.35, 1),
    visibility 0s linear 0.3s;
}
html.ix-cfg-open #ix-cfg {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform 0.3s cubic-bezier(0.32, 0.72, 0.35, 1),
    visibility 0s;
}
html.ix-cfg-open {
  overflow: hidden;
}

/* ── v44/v45 additions from the prototype ─────────────────────────────
   Scoped under #ix-pdp like everything else in this file, so nothing here
   reaches the theme's own header and footer. */


/* Benefits row, in the slot the voice note used to hold.
   Figma 1:627 dadea 8px de jur imprejur; acum 6px, ca randurile sa stea mai
   aproape. 8px intre iconita si text, fara spatiu intre randuri (randul cu
   iconita de 24px are 36px). */
#ix-pdp #pbenefits {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 40px;
}
#ix-pdp #pbenefits .pb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
}
/* „display: flex" de mai sus bate regula browserului pentru [hidden]: fara asta,
   randul „Extensibil" ramanea pe ecran si la produsele care nu se extind. */
#ix-pdp #pbenefits .pb-row[hidden] {
  display: none;
}
#ix-pdp #pbenefits .pb-row svg,
#ix-pdp #pbenefits .pb-row img {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: block;
  color: var(--slate);
}
/* Iconita proprie din blocul „Beneficiu" (sections/ixaria-classic-pdp.liquid). */
#ix-pdp #pbenefits .pb-row img {
  object-fit: contain;
}
/* Iconita canapelei extensibile ocupa in Figma doar desenul (22,1 × 19,3px),
   nu patratul de 24px: randul ei are 31,3px si textul incepe la 36px. Marginile
   negative taie din casuta exact golul din jurul desenului, care ramane pe loc. */
#ix-pdp #pbenefits .pb-row[data-icon="sofa_bed"] svg {
  margin: -1.59px -0.19px -3.09px -1.69px;
}
#ix-pdp #pbenefits .pb-row span {
  flex: 1;
  font-size: var(--fs-14);
  font-weight: 400;
  letter-spacing: var(--ls-14);
  line-height: 1.2;
  color: var(--black);
}

/* Secondary links under the CTAs. The prototype ships the icons hidden.
   Figma 1:667: 40px intre ele, majusculele la 24px sub randul de incredere
   (12px aici + 8px gap-ul din #ctas + jumatatea de rand de deasupra). */
#ix-pdp .cta-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 12px;
}
#ix-pdp .cta-link {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: var(--ls-16);
  line-height: 1.2;
  color: var(--black);
}
#ix-pdp .cta-link span {
  text-decoration: underline;
}
#ix-pdp .cta-link svg {
  display: none;
}

/* Conținutul de tab venit din API (Informații generale / Detalii tehnice).
   richText este HTML scris în aplicație, deci primește doar ritmul vertical al
   foii; restul stilului îl aduce cu el. */
#ix-pdp .ix-tab-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Blocurile sunt unul pe forma si doar forma aleasa se arata (atributul hidden,
   pus de showGeneralInfoFor). „display: flex" de mai sus bate regula implicita a
   browserului pentru [hidden], deci se scrie aici: altfel foaia arata textele
   tuturor formelor, unul sub altul. */
#ix-pdp .ix-tab-content[hidden] {
  display: none;
}
#ix-pdp .ix-tab-image,
#ix-pdp .ix-tab-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
#ix-pdp .ix-tab-text > *:first-child {
  margin-top: 0;
}
#ix-pdp .ix-tab-text > *:last-child {
  margin-bottom: 0;
}
#ix-pdp .ix-tab-text p {
  margin: 0 0 12px;
}
#ix-pdp .ix-tab-text ul,
#ix-pdp .ix-tab-text ol {
  margin: 0 0 12px;
  padding-left: 20px;
}
#ix-pdp .ix-tab-text li {
  margin: 0 0 4px;
}

/* Blocul alb de cumparare nu avea spatiu jos, asa ca linkurile „Optiuni de
   plata / Transport & Retur" ajungeau lipite de sectiunea beige de dedesubt —
   se vedea de cand lista de proprietati, care tinea locul, a fost scoasa.
   Spatiul sta pe container, nu pe ultimul element, ca sa ramana corect
   indiferent ce se mai schimba inauntru. 40px este pasul folosit de restul
   paginii (si de marginea de sus a aceluiasi bloc de butoane). */
#ix-pdp #buybox {
  padding-bottom: 40px;
}

/* ══════════════════════════════════════════════════════════════════════
   Desktop — portat din agache-prototype/desktop-v46.html

   Prototipurile sunt doua pagini separate: cel mobil nu are breakpoint-uri,
   iar cel desktop are body{min-width:1280px} si zero media queries. Tema le
   uneste intr-o singura sectiune, asa ca tot ce urmeaza sta intr-un singur
   @media: sub prag nu se schimba nimic, deci mobilul ramane exact cum era.

   Pragul este 1200px, nu 1024: designul desktop este facut pentru minimum
   1280px, iar o tableta ar primi altfel un layout in care nu a fost probat.

   Markup-ul mobil ramane sursa unica; singura adaugire este perechea de
   sageti a railului "5 motive" (#crail-nav), ascunsa sub prag. #hero,
   #hero-progress si #buybox sunt deja frati directi in #pdp, deci cele doua
   coloane se obtin dintr-un grid pe parinte.

   Corespondenta cu prototipul, pentru cine cauta o regula anume:
     #pdp        -> #pdpmain (.pdp-media 2/3 + .pdp-info 1/3)
     #thumbs     -> .pdp-thumbs
     #construit  -> #benefits
     #vidsec     -> #video-section
     #deep       -> #deep-dive
     #confsec    -> #workshop
     #testim     -> #reviews
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* ── Intai se scoate panza de telefon ──
     #pdp este .page, iar .page are max-width: 480px cu margin auto — ecranul
     simulat al prototipului mobil. Fara randul asta tot ce urmeaza se aseaza
     corect, dar inauntrul unei coloane de 480px in mijlocul paginii: grila de
     doua coloane iese 320px + 160px, nu 2/3 + 1/3 din ecran. Este primul
     lucru de verificat daca desktopul arata din nou ca un telefon lat. */
  #ix-pdp .page {
    max-width: none;
  }

  /* ── Doua coloane: galeria 2/3, informatiile 1/3 (ca .pdp-media/.pdp-info) ── */
  #ix-pdp #pdp {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    /* Randul 1 exact cat eroul, randul 2 ia tot ce prisoseste.
       #buybox se intinde peste ambele randuri si este de obicei mai inalt
       decat eroul plus miniaturile; surplusul acela se imparte implicit intre
       randuri, deci sub erou ramanea o felie goala de rand 1, si banda de
       miniaturi parea impinsa in jos chiar daca era centrata in randul ei.
       Cu 1fr pe randul 2, surplusul merge tot acolo si centrarea benzii se
       vede intre erou si sectiunea de dedesubt.
       Randul 2 este si banda alba dintre poza si #deep: minimum 80px, cat
       padding-ul de sus al lui #deep, ca albul de deasupra sa fie cat bejul
       de deasupra titlului. Doar un minim: cand coloana de cumparare e mai
       inalta decat poza + 80px, randul creste in continuare dupa ea. */
    grid-template-rows: auto minmax(80px, 1fr);
    align-items: start;
  }
  /* Restul sectiunilor raman pe toata latimea si se aseaza singure, deci
     randurile 1 si 2 trebuie sa ramana PLINE. Daca ramane un rand gol
     deasupra (cum s-a intamplat cand firimiturile au urcat peste erou si
     randul 1 s-a golit), prima sectiune care se aseaza singura — #construit —
     se muta in el si sare deasupra eroului. De aceea eroul si firimiturile
     impart randul 1, miniaturile iau randul 2, iar #buybox le acopera pe
     amandoua (1/3): asa prima celula libera este abia randul 3. */
  #ix-pdp #pdp > * {
    grid-column: 1 / -1;
  }
  /* Firimiturile stau PESTE erou, la 60/24, ca in prototip (.pdp-crumb), nu
     pe un rand al lor. Acelasi rand si aceeasi coloana ca #hero: doua celule
     suprapuse. #hero e pozitionat dar fara z-index, deci un z-index explicit
     aici il aduce deasupra, desi vine inaintea lui in markup. */
  #ix-pdp #crumb {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 5;
    align-self: start;
    justify-self: start;
    padding: 24px 0 0 60px;
    color: #707173;
  }
  #ix-pdp #crumb .cur {
    color: #707173;
  }
  #ix-pdp #hero {
    grid-column: 1;
    grid-row: 1;
    /* 960x720 in prototip (desktop-v46: .pdp-hero-clip aspect-ratio 960/720,
       imagini object-fit: cover); pe telefon eroul este patrat. Poza are
       inaltimea intreaga din proportie, fara plafon pe inaltimea ecranului:
       plafonul o scurta pe laptopuri si ii taia partea de sus si de jos. */
    aspect-ratio: 4 / 3;
  }
  /* Sub erou prototipul pune banda de miniaturi, nu bara de progres: pe
     desktop ai unde sa le arati si sunt si tinta de click. Ambele elemente
     sunt deja in markup, deci doar se schimba care dintre ele se vede.
     heroRender() marcheaza oricum miniatura activa (#thumbs button.on). */
  #ix-pdp #hero-progress {
    display: none;
  }
  /* Banda de miniaturi sta PESTE poza, jos, intr-o cutie alba: 6px in jurul
     miniaturilor, 1px intre ele (butoanele au deja un chenar transparent de 2px), 24px de marginea de jos a pozei. Aceeasi
     celula ca #hero (randul 1, coloana 1), aliniata jos si centrata; #hero e
     pozitionat, deci banda are nevoie de z-index ca sa iasa deasupra lui. */
  #ix-pdp #thumbs {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    justify-self: center;
    /* sticky + bottom: cand fereastra e mai scunda decat poza, banda urca si
       ramane la 24px de marginea de jos a ecranului, in loc sa fie taiata;
       cand poza incape, sta la 24px de marginea de jos a pozei. */
    position: sticky;
    bottom: 24px;
    z-index: 3;
    margin-bottom: 24px;
    /* Cel mult 7 miniaturi pe ecran (7 × 56px, 6 goluri de 1px, 6px de
       fiecare parte); restul se deruleaza in banda, dupa poza aleasa (vezi
       heroThumbsFollow in ixaria-pdp.js). */
    max-width: min(calc(100% - 240px), calc(7 * 56px + 6 * 1px + 2 * 6px));
    flex-wrap: nowrap;
    gap: 1px;
    /* Rama alba de 6px e chenar, nu padding: continutul derulat se vede si prin
       padding, deci cu banda derulata aparea cate o fasie din miniatura de
       dinainte si de dupa. Chenarul taie derularea la marginea lui. */
    border: 6px solid #fff;
    padding: 0;
    background: #fff;
    overflow-x: auto;
    scrollbar-width: none;
    /* derulata cu mana (trackpad), banda se opreste tot pe miniaturi intregi */
    scroll-snap-type: x mandatory;
  }
  #ix-pdp #thumbs::-webkit-scrollbar {
    display: none;
  }
  /* overflow-x: hidden pe #ix-pdp il face container de derulare, iar sticky se
     raporta la el (care nu se deruleaza) si nu mai lipea nimic de ecran. clip
     taie la fel pe orizontala fara sa creeze container de derulare. */
  #ix-pdp {
    overflow-x: clip;
  }
  #ix-pdp #thumbs button {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 0;
    scroll-snap-align: start;
  }
  #ix-pdp #buybox {
    grid-column: 2;
    grid-row: 1 / 3;
    /* Figma 1:471: 48 sus, 60 in lateral. Jos doar 24px (nu 80 ca in Figma):
       coloana e mai inalta decat poza, deci spatiul de sub ea ramane gol pana
       la sectiunea urmatoare („5 motive") — cerut cat mai mic. */
    padding: 48px 60px 24px;
  }
  /* Coloana din dreapta isi aduce propriul spatiu lateral; .px ar adauga inca
     20px peste padding-ul ei. Continutul umple coloana (o treime din latime)
     cu 60px de fiecare parte, deci pe ecrane mai late de 1440px se lateste
     odata cu ea. */
  #ix-pdp #buybox.px {
    padding-left: 60px;
    padding-right: 60px;
  }

  /* ── Capul blocului de cumparare: doua randuri, fiecare cu doi poli ──
     Prototipul (.pc-top-row / .pc-head-row) pune nota la stanga si insigna la
     dreapta pe primul rand, apoi titlul la stanga si iconitele la dreapta pe
     al doilea. In markup-ul mobil insa nota SI iconitele stau impreuna in
     .p-rate-row, iar titlul e fratele de dedesubt — pe telefon iconitele
     chiar acolo trebuie sa ramana, deci markup-ul nu se poate rearanja.

     Solutia fara sa se atinga markup-ul: #buybox devine grid cu doua coloane,
     iar .p-rate-row primeste display: contents, deci copiii ei (nota,
     insigna, iconitele) devin ei insisi celule si pot fi asezati oriunde in
     grid — inclusiv pe randul titlului.

     Randurile 1 si 2 trebuie sa ramana PLINE, altfel primul element asezat
     automat (.p-desc) urca in ele; de aceea ambii poli ai fiecarui rand sunt
     pusi explicit. */
  #ix-pdp #buybox {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: center;
  }
  #ix-pdp #buybox > * {
    grid-column: 1 / -1;
  }
  #ix-pdp #buybox .p-rate-row {
    display: contents;
  }
  #ix-pdp #buybox .p-rate {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
  #ix-pdp #buybox .p-configurabil {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    line-height: 14px;
  }
  /* Figma: 32px intre randul notei (14px) si randul titlului (24px, cat
     iconitele). Randul titlului are aici 25,2px (24 × 1,05), deci 31,4px de
     sus il tine centrat pe acelasi ax cu iconitele, la 94–118px. */
  #ix-pdp #buybox h1 {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    margin-top: 31.4px;
    font-size: 24px;
    letter-spacing: var(--ls-24);
    line-height: 1.05;
  }
  /* Descrierea: majuscula la 16px sub randul titlului. */
  #ix-pdp #buybox .p-desc {
    margin-top: 12px;
  }
  /* Iconitele centrate pe inaltimea titlului: amandoua au aceeasi margine de sus,
     deci randul le centreaza pe acelasi ax. */
  #ix-pdp #buybox .p-rate-act {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: center;
    margin-top: 31.4px;
    gap: 16px;
  }
  #ix-pdp #buybox .p-rate-act button,
  #ix-pdp #buybox .p-rate-act svg {
    width: 24px;
    height: 24px;
  }
  /* Markup-ul are intai „Trimite", apoi „Salveaza"; referinta arata inima
     inaintea avionului. Randul este flex, deci ordinea se schimba din CSS.

     Selectorul merge pe clasa .p-fav, nu pe aria-label: eticheta se schimba
     cand produsul e salvat („Elimina din favorite"), iar o regula legata de ea
     ar inceta sa se aplice exact atunci — inima sarea dupa avion la primul
     clic. */
  #ix-pdp #buybox .p-rate-act button.p-fav {
    order: -1;
  }
  /* Nota, la marimea din Figma (14px), pe un rand de 14px cat steaua. */
  #ix-pdp #buybox .p-rate .sc,
  #ix-pdp #buybox .p-rate .cnt {
    font-size: 15px;
    letter-spacing: var(--ls-14);
    line-height: 14px;
  }
  #ix-pdp #buybox .p-rate .star {
    margin-right: 0;
  }
  /* Pretul la 16px de cel vechi, cel vechi la 8px de reducere. */
  #ix-pdp #buybox .p-price-row {
    gap: 8px;
  }
  #ix-pdp #buybox .p-price {
    margin-right: 8px;
  }
  /* Insigna e acum in blocul de cumparare, deci cea de peste imagine pleaca —
     prototipul desktop nu are nimic in coltul eroului. */
  #ix-pdp #hero-badge {
    display: none;
  }
  /* „Reducere" ramane: sub firimiturile care stau peste coltul eroului (60/24),
     aliniata cu ele, si putin mai mare, ca sa nu se piarda pe poza lata. */
  #ix-pdp #hero-tags {
    top: 52px;
    left: 60px;
  }
  #ix-pdp #hero-sale {
    font-size: 12px;
    padding: 4px 12px;
  }

  /* Sagetile Tylko mai mari (disc alb de 48px), trase spre interior, ca in prototip. */
  #ix-pdp .hero-arr {
    width: 48px;
    height: 48px;
    --hero-arr-edge: 60px;
  }
  #ix-pdp .hero-arr img {
    width: 48px;
    height: 48px;
  }
  /* Pastila "Configureaza" urca in dreapta sus si devine neagra pe alb
     (.pdp-configure-pill); pe telefon sta jos-dreapta si e rosie. */
  #ix-pdp #hero-conf {
    top: 34px;
    right: 60px;
    bottom: auto;
    padding: 12px 16px;
    gap: 8px;
    font-size: 16px;
    letter-spacing: var(--ls-16);
    color: var(--black);
  }
  #ix-pdp #hero-conf svg {
    width: 16px;
    height: 16px;
  }

  /* ── Sectiunile de sub fold: acelasi ritm ca in prototip ── */
  #ix-pdp #construit,
  #ix-pdp #deep,
  #ix-pdp #testim {
    padding: 80px 100px;
  }
  #ix-pdp #construit {
    padding-top: 56px;
  }
  #ix-pdp #vidsec {
    /* Raportul 1:1.39 este pentru telefon; pe desktop filmul e o banda lata. */
    aspect-ratio: auto;
    height: 810px;
  }
  /* Eticheta si butonul de pauza se departeaza de margini (100/60 in prototip). */
  #ix-pdp #vidsec .cap {
    left: 100px;
    bottom: 60px;
    font-size: 15px;
    letter-spacing: 0.98px;
    color: #fff;
  }
  #ix-pdp #vidsec .vidsec-pause {
    right: 100px;
    bottom: 60px;
  }

  /* ── „5 motive": titlul si sagetile pe acelasi rand (.benefits-head) ── */
  #ix-pdp #construit .chead {
    flex-direction: row;
    align-items: flex-end;
    gap: 25px;
    padding: 0;
  }
  #ix-pdp #construit .chead .lead {
    flex: 1;
    font-size: 32px;
    letter-spacing: -0.96px;
    line-height: 1.1;
  }
  #ix-pdp #crail-nav {
    display: flex;
    flex-shrink: 0;
    gap: 12px;
    margin-top: 0;
    padding: 0;
  }
  /* ── Carduri mai mari, fara sa iasa din rail ── */
  #ix-pdp #construit .rail,
  #ix-pdp #crail {
    gap: 16px;
    padding: 0;
    scroll-padding: 0;
    margin-top: 48px;
  }
  #ix-pdp .ccard {
    flex: 0 0 372px;
    width: 372px;
    min-height: 520px;
  }
  /* textele cardurilor putin mai mari decat pe telefon (prototipul desktop avea 16 / 28) */
  #ix-pdp .ccard .tag {
    font-size: 17px;
    letter-spacing: -0.68px;
  }
  #ix-pdp .ccard .ttl {
    font-size: 28px;
    letter-spacing: -0.28px;
  }
  #ix-pdp .ccard .dsc {
    font-size: 17px;
  }
  /* inaltimile grafice din prototipul desktop */
  #ix-pdp .ph-garantie {
    height: 240px;
  }
  #ix-pdp .ph-tesatura {
    height: 372px;
  }
  #ix-pdp .ph-captuseala,
  #ix-pdp .ph-benefit {
    height: 341px;
  }
  #ix-pdp .ph-strips {
    height: 260px;
  }
  /* Linia de progres ramane: prototipul desktop o are si el sub carduri, pe
     langa sageti (.rail-scrollbar). Isi pierde doar marginile de 20px, pe
     care le da acum padding-ul sectiunii. */
  #ix-pdp #construit .rail-scrollbar {
    margin-left: 0;
    margin-right: 0;
  }

  /* ── Deep dive: stanga headline + promisiuni, dreapta lista de randuri ──
     Ca in prototip (.dd-left / .dd-right). Coloana intai curge singura, deci
     nu conteaza daca headline-ul lipseste la un produs fara descriere; lista
     isi cere explicit coloana a doua. Cardul de mostre (#mostrar) nu exista
     in prototipul desktop, dar este o functie reala a temei, asa ca ramane —
     sub lista, in aceeasi coloana. */
  /* Masuri luate din screenshot-ul Figma (latime ~1728px): titlu 32/35, beneficii
     cu iconita 32px si text 24px, lista din dreapta cu randuri de ~56px si text 18px. */
  #ix-pdp #deep {
    /* marginea laterala din regula comuna #construit/#deep/#testim de mai sus */
    --dd-px: 100px;
    display: grid;
    /* Lista din dreapta ia o treime din toata latimea sectiunii (cu tot cu
       margini); procentele din grid se masoara pe continut, de aici + 2 margini. */
    grid-template-columns: minmax(0, 1fr) calc((100% + 2 * var(--dd-px)) / 3);
    /* Lista din dreapta acopera randurile 1-2 si e mai inalta decat titlul; fara
       1fr, surplusul se imparte si pe randul titlului si impinge beneficiile in jos. */
    /* Doua randuri: cardul de mostre (randul 3) e ascuns deocamdata, iar un rand gol
       ar adauga inca un row-gap de 56px sub continut. */
    grid-template-rows: auto 1fr;
    /* intre coloane acelasi spatiu ca marginile din stanga si din dreapta */
    column-gap: var(--dd-px);
    row-gap: 56px;
    /* jos acelasi spatiu ca deasupra titlului (padding-top 80px) */
    padding-bottom: 80px;
    align-items: start;
  }
  #ix-pdp #deep > * {
    grid-column: 1;
  }
  #ix-pdp #deep .dd-headline {
    font-size: 32px;
    letter-spacing: -1.12px;
    line-height: 1.1;
  }
  /* Beneficiile pe un singur rand, cu iconita deasupra textului (Figma), nu unul
     sub altul cu iconita in stanga. flex-wrap doar ca plasa pentru texte lungi. */
  #ix-pdp #deep .ddpromise {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 48px;
    row-gap: 24px;
  }
  #ix-pdp #deep .ddp-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    font-size: 24px;
    letter-spacing: -0.96px;
    line-height: 1.2;
  }
  #ix-pdp #deep .ddp-item svg {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    /* la 32px viewBox-ul de ~14 unitati e marit ~2.3x; 0.65 da o linie de ~1.5px */
    stroke-width: 0.65;
  }
  #ix-pdp #deep .ddlist {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  #ix-pdp #deep .drow {
    padding: 17px 8px;
  }
  #ix-pdp #deep .drow span {
    font-size: 18px;
    letter-spacing: -0.54px;
  }
  #ix-pdp #deep .drow svg {
    width: 9px;
    height: 17px;
    stroke-width: 1.4;
  }
  #ix-pdp #deep #mostrar {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
  }

  /* ── Atelier: imaginea umple sectiunea, textul sta peste ea ──
     Prototipul (#workshop) are 900px inaltime, eyebrow-ul sus-stanga si
     titlul plus butonul jos. .px tine si eyebrow-ul si titlul, deci devine
     un strat pe toata inaltimea cu space-between: primul copil urca, ultimul
     coboara — exact asezarea din prototip, fara sa se atinga markup-ul.
     pointer-events: none ca stratul sa nu fure click-ul butonului. */
  #ix-pdp #confsec {
    position: relative;
    height: 900px;
    padding: 0;
    overflow: hidden;
  }
  #ix-pdp #confsec .wph {
    position: absolute;
    inset: 0;
    border-radius: 0;
  }
  /* fara inaltime pe <picture>, height: 100% pe img nu avea fata de ce sa se calculeze
     si poza ramanea la proportia ei, lasand o banda goala sub ea */
  #ix-pdp #confsec .wph picture {
    height: 100%;
  }
  #ix-pdp #confsec .wph img {
    height: 100%;
    /* Banda e mai lata decat fotografia (900px inaltime pe tot ecranul), deci
       se taie sus si jos. Ancorata jos taia capetele oamenilor; asa ramane
       si subiectul, si masa pe care sta textul. */
    object-position: center 30%;
  }
  #ix-pdp #confsec .px {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 65px 100px 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
  }
  #ix-pdp #confsec .px .eyebrow {
    font-size: 15px;
    letter-spacing: 0.98px;
    color: #fff;
  }
  #ix-pdp #confsec h2 {
    font-size: 60px;
    letter-spacing: -1.8px;
    line-height: 1.05;
    color: #fff;
    max-width: 997px;
    margin: 0;
  }
  #ix-pdp #confsec .wbtn {
    left: auto;
    right: 100px;
    top: auto;
    bottom: 60px;
    width: auto;
    z-index: 3;
    padding: 16px 40px;
    color: var(--red);
  }

  /* ── Recenzii: titlu lat, apoi pagina impartita in doua (ca la Tylko) ──
     Stanga: cartonasul mare cu nota, care ramane pe ecran cat se deruleaza
     lista (sticky). Dreapta: recenziile una sub alta, poza la stanga, textul la
     dreapta. Grid pe #testim, cu randuri explicite pentru ca .score-badge apare
     doar daca produsul are note, iar markup-ul il pune inaintea titlului.
     #testim-h si #rvrail au margin-top pe atribut style, deci !important. */
  #ix-pdp #testim {
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    column-gap: 80px;
    row-gap: 64px;
    align-items: start;
  }
  #ix-pdp #testim > * {
    grid-column: 1 / -1;
  }
  #ix-pdp #testim #testim-h {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-left: 0;
    padding-right: 0;
    margin-top: 0 !important;
  }
  #ix-pdp #testim h2 {
    font-size: 48px;
    letter-spacing: -1.44px;
    line-height: 1.05;
  }
  /* Cartonasul cu nota: toata coloana, continutul centrat — nota mare, stelele,
     textul (#sb-txt). Chenar subtire, gri. */
  #ix-pdp #testim .score-badge {
    grid-column: 1;
    grid-row: 2;
    position: sticky;
    top: 120px;
    width: 100%;
    margin: 0;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 72px 40px 64px;
    border: 1px solid var(--c8);
    border-radius: 12px;
    text-align: center;
  }
  #ix-pdp #testim .score-badge .big {
    font-size: 96px;
    font-weight: 500;
    letter-spacing: -2.88px;
    line-height: 1;
    text-align: center;
    margin: 0;
  }
  #ix-pdp #testim .score-badge .sb-col {
    align-items: center;
    gap: 24px;
  }
  #ix-pdp #testim .score-badge .stars {
    gap: 4px;
  }
  #ix-pdp #testim .score-badge .stars .star {
    width: 30px;
    height: 30px;
  }
  #ix-pdp #testim .score-badge .cnt {
    display: none;
  }
  #ix-pdp #testim .score-badge .sb-txt {
    display: block;
    max-width: 380px;
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: var(--ls-18);
    color: var(--black);
  }
  /* Railul devine coloana: fara scroll, fara snap, fara sageti. Cu #testim in
     selector, ca gap-ul sa bata „#testim .rail" (8px, al railului de telefon). */
  #ix-pdp #testim #rvrail {
    grid-column: 2;
    grid-row: 2;
    flex-direction: column;
    overflow: visible;
    scroll-snap-type: none;
    gap: 28px;
    padding: 0;
    scroll-padding: 0;
    margin-top: 0 !important;
  }
  #ix-pdp #testim .rail-nav {
    display: none;
  }
  /* Recenzia: poza patrata la stanga, textul la dreapta, direct pe alb. */
  #ix-pdp #testim .rvcard {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 32px;
    background: none;
    border-radius: 0;
    scroll-snap-align: none;
  }
  #ix-pdp #testim .rvcard .rp {
    flex: 0 0 200px;
    width: 200px;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
  }
  #ix-pdp #testim .rvcard .bd {
    flex: 1;
    min-width: 0;
    background: none;
    padding: 4px 0 0;
    gap: 0;
  }
  /* O linie intre recenzii; o poarta cardul urmator. */
  #ix-pdp #testim .rvcard + .rvcard {
    border-top: 1px solid #e5e5e5;
    padding-top: 28px;
  }
  /* Nota sta langa nume, nu pe poza. */
  #ix-pdp #testim .rv-badge {
    display: none;
  }
  /* Primul rand: stelele, numele, „verificat"; data la dreapta. */
  #ix-pdp #testim .rv-meta {
    order: 0;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 0;
    line-height: 1.2;
  }
  #ix-pdp #testim .rv-stars {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  #ix-pdp #testim .rv-stars .star {
    width: 16px;
    height: 16px;
    fill: #ffc800;
  }
  #ix-pdp #testim .rv-score {
    display: none;
  }
  #ix-pdp #testim .rv-name {
    font-size: 18px;
    font-weight: 450;
    letter-spacing: var(--ls-18);
    color: var(--black);
  }
  #ix-pdp #testim .rv-ver,
  #ix-pdp #testim .rv-date {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: var(--ls-14);
    color: #707173;
  }
  /* „Recenzie pentru …": un rand gri sub nume, ca materialul si culoarea la
     Tylko — fara cutie si fara miniatura. */
  #ix-pdp #testim .rv-prod {
    order: 1;
    display: block;
    margin-top: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  #ix-pdp #testim .rv-prod img,
  #ix-pdp #testim .rv-prod::after {
    display: none;
  }
  #ix-pdp #testim .rv-prod > div,
  #ix-pdp #testim .rv-prod .a,
  #ix-pdp #testim .rv-prod .b {
    display: inline;
  }
  #ix-pdp #testim .rv-prod .a,
  #ix-pdp #testim .rv-prod .b {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: var(--ls-14);
    line-height: 1.3;
    color: #707173;
    text-decoration: none;
  }
  #ix-pdp #testim .rv-prod .a::after {
    content: " ";
  }
  /* Titlul mare, apoi textul, sub randul gri. */
  #ix-pdp #testim .rv-body {
    order: 2;
    margin-top: 24px;
    gap: 12px;
  }
  #ix-pdp #testim .rv-ttl {
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.52px;
    line-height: 1.15;
  }
  #ix-pdp #testim .rv-txt {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: var(--ls-16);
    line-height: 1.5;
  }
  /* „Încarcă mai multe": sub lista, in coloana recenziilor. */
  #ix-pdp #testim .rvcard.rv-extra {
    display: none;
  }
  /* 28px sub ultima recenzie, ca pasul dintre recenzii (64 - 36). Inalt de
     48px: 16 + iconita de 16 + 16, cu chenarul inclus. */
  #ix-pdp #testim .rv-more {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: -36px;
    padding: 15px 23px;
    border: 1px solid var(--black);
    border-radius: 9999px;
    background: #fff;
    color: var(--black);
    font-size: 16px;
    font-weight: 550;
    letter-spacing: var(--ls-16);
    height: auto;
    line-height: 16px;
    text-transform: none;
    cursor: pointer;
  }
  #ix-pdp #testim .rv-more svg {
    width: 16px;
    height: 16px;
  }
  #ix-pdp #testim .rv-more:hover {
    background: var(--black);
    color: #fff;
  }
  /* Produs fara nota proprie (Judge.me arata atunci recenziile altor produse):
     cartonasul cu nota lipseste, deci lista ia toata latimea in loc sa lase o
     jumatate de ecran goala in stanga. */
  #ix-pdp #testim:not(:has(.score-badge)) #rvrail,
  #ix-pdp #testim:not(:has(.score-badge)) .rv-more {
    grid-column: 1 / -1;
  }

  /* ── Sectiunile pe care prototipul desktop nu le are ──
     #comfort, #like, #recent si #locs exista doar in pagina mobila. Fara o
     regula aici ar ramane cu padding-ul de 20px si s-ar intinde pe toata
     latimea ecranului, rupand ritmul restului paginii. Primesc acelasi pas
     de 100px ca sectiunile portate, ca sa stea in aceeasi coloana optica. */
  #ix-pdp #comfort,
  #ix-pdp #like > .px,
  #ix-pdp #recent > .px,
  #ix-pdp #locs > .px {
    padding-left: 100px;
    padding-right: 100px;
  }
  #ix-pdp #like .rail,
  #ix-pdp #recent .rail,
  #ix-pdp #locs .rail {
    padding-left: 100px;
    padding-right: 100px;
    scroll-padding-left: 100px;
    scroll-padding-right: 100px;
  }
  #ix-pdp #like .rail-nav,
  #ix-pdp #recent .rail-nav,
  #ix-pdp #locs .rail-nav {
    padding-left: 100px;
    padding-right: 100px;
  }
}

/* Pe desktop, ca la Tylko, sagetile eroului apar doar cat mouse-ul e peste
   carusel. Numai unde exista hover: pe un iPad Pro in landscape (>= 1200px,
   fara mouse) ar ramane altfel invizibile. Din tastatura apar amandoua cat
   una are focus. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  #ix-pdp .hero-arr {
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  #ix-pdp #hero:hover .hero-arr,
  #ix-pdp #hero:has(.hero-arr:focus-visible) .hero-arr {
    opacity: 1;
  }
}

/* Banda de miniaturi sta peste poza pe desktop (pe tableta e grila de sub ea):
   aceeasi umbra ca sagetile, ca sa se desprinda de poza. */
@media (min-width: 1200px) {
  #ix-pdp #thumbs {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  }
  /* Mai sunt miniaturi in afara benzii: ultima de pe partea aceea se stinge in
     alb, ca sa se vada ca banda continua. Clasele .more-l / .more-r le pune
     heroThumbsEdges (ixaria-pdp.js) doar cand chiar mai sunt pe acea parte.
     Voalurile sunt pseudo-elemente lipite (sticky) de marginile benzii, cat o
     miniatura; marginea negativa de 57px (miniatura + golul de 1px) le scoate
     din latimea benzii, deci miniaturile si derularea raman neschimbate. */
  #ix-pdp #thumbs::before,
  #ix-pdp #thumbs::after {
    content: "";
    position: sticky;
    z-index: 1;
    flex: 0 0 56px;
    height: 56px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
  }
  #ix-pdp #thumbs::before {
    left: 0;
    margin-right: -57px;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  }
  #ix-pdp #thumbs::after {
    right: 0;
    margin-left: -57px;
    background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
  }
  #ix-pdp #thumbs.more-l::before,
  #ix-pdp #thumbs.more-r::after {
    opacity: 1;
  }
}

/* Cu mouse-ul, zona de click a sagetilor eroului e mai mare decat discul: tot
   de la marginea pozei pana la disc, plus o jumatate de disc spre interior, pe
   o inaltime dubla. Un click pe langa disc schimba poza, nu deschide galeria
   pe ecran intreg. Pe ecranele tactile ramane discul: bindSwipe ignora gesturile
   pornite de pe sageti, deci o zona mare ar bloca tragerea de la margine. */
@media (hover: hover) and (pointer: fine) {
  #ix-pdp .hero-arr::before {
    content: "";
    position: absolute;
    top: -50%;
    bottom: -50%;
  }
  #ix-pdp #hero-prev::before {
    left: calc(-1 * var(--hero-arr-edge));
    right: -50%;
  }
  #ix-pdp #hero-next::before {
    left: -50%;
    right: calc(-1 * var(--hero-arr-edge));
  }
}

/* Butonul „Încarcă mai multe" exista doar pe desktop; pe telefon railul
   orizontal arata toate recenziile. */
#ix-pdp #testim .rv-more {
  display: none;
}
@media (min-width: 768px) {
  #ix-pdp #testim .rv-more {
    display: inline-flex;
  }
}

/* Produs fara recenzii Judge.me: railul si sagetile se ascund (ixRenderJudgeMeReviews). */
#ix-pdp #rvrail[hidden],
#ix-pdp #testim .rail-nav[hidden] {
  display: none;
}

/* Widgetul Judge.me sta in sectiunea „apps" de sub PDP doar ca sa scrie datele
   recenziilor in pagina; cardurile le deseneaza #rvrail. Sectiunea lui nu se
   vede. Pagina produselor neconfigurabile (#ix-pdp.ix-classic) nu are #rvrail,
   deci acolo widgetul Judge.me ramane. */
body:has(#ix-pdp:not(.ix-classic)) .shopify-section:has(#judgeme_product_reviews) {
  display: none;
}

/* Banda cu cele patru avantaje (transport, retur, la comanda, din 1994) din
   subsol — sectiunea multicolumn_icon_EqNWhT din footer-group.json — nu se
   arata pe pagina de produs. Pe restul magazinului ramane. */
body:has(#ix-pdp) .shopify-section[id$="__multicolumn_icon_EqNWhT"] {
  display: none;
}

/* „S-ar putea să-ți placă" si „Le-ai văzut recent" sunt sectiuni ale temei,
   in afara #ix-pdp, cu titlul la 400 si fara tracking — pe langa restul
   paginii arata ca alt font. Pe pagina de produs primesc tipografia ei:
   titlurile ca ale sectiunilor de mai sus (550, −3%, #1d1d1f), textul
   cardurilor la aceeasi greutate. */
body:has(#ix-pdp) .section--related-products .section__heading,
body:has(#ix-pdp) .section--recently-viewed-products .section__heading {
  font-weight: 550;
  letter-spacing: -0.03em;
  color: #1d1d1f;
}
/* Spatiul dintre ele si sub „Le-ai văzut recent": pe desktop vine din setarile
   sectiunilor (template-urile produsului); pe telefon tema le scaleaza la 60%
   si le plafoneaza la 40px, deci aici valorile de telefon sunt date direct. */
@media (max-width: 767px) {
  body:has(#ix-pdp) .section--related-products {
    --section-padding-bottom-mobile: 40px;
  }
  body:has(#ix-pdp) .section--recently-viewed-products {
    --section-padding-top-mobile: 40px;
    --section-padding-bottom-mobile: 64px;
  }
}
body:has(#ix-pdp) .section--related-products .product-card__title,
body:has(#ix-pdp) .section--recently-viewed-products .product-card__title,
body:has(#ix-pdp) .section--related-products .f-price-item,
body:has(#ix-pdp) .section--recently-viewed-products .f-price-item {
  font-weight: 550;
  color: #1d1d1f;
}

/* ── Mostre: ascunse deocamdata ──
   Nu exista inca un flux de comanda pentru mostre: openSamplesModal() trimite la pagina
   de chestionar din setarea „Fabric quiz URL", care e goala, deci butoanele nu faceau
   nimic. Se ascund toate intrarile (butonul de sub CTA, cardul din „deep dive", chip-ul
   din fisa unui material) pana cand fluxul exista; markup-ul si functiile raman. */
#ix-pdp .cta-samples,
#ix-pdp #mostrar,
#ix-pdp [onclick*="openSamplesModal"] {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   Tablete (iPad, 768–1199px): varianta desktop, cu masurile strânse
   ══════════════════════════════════════════════════════════════════════
   Regulile desktop de mai sus sunt gandite pentru >= 1200px (paddinguri de 60–100px,
   benzi de 810–900px). Pe tableta aceeasi asezare, cu spatiile si inaltimile reduse.
   Antetul ramane cel de telefon (ixaria-header.css). */
@media (min-width: 768px) and (max-width: 1199px) {
  /* coloana de cumparare mai lata decat o treime, altfel ramane ingusta */
  #ix-pdp #pdp {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
  #ix-pdp #crumb {
    padding: 16px 0 0 24px;
  }
  #ix-pdp #hero-tags {
    top: 42px;
    left: 24px;
  }
  #ix-pdp .hero-arr {
    --hero-arr-edge: 20px;
  }
  #ix-pdp #hero-conf {
    top: 20px;
    right: 20px;
  }

  /* Miniaturile nu mai plutesc peste poza: se deschid dedesubt, intr-o grila care umple
     spatiul gol lasat de coloana de cumparare (mai inalta decat poza). */
  #ix-pdp #thumbs {
    grid-row: 2;
    align-self: start;
    justify-self: stretch;
    position: static;
    margin: 4px 0 0;
    max-width: none;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
    scroll-snap-type: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  #ix-pdp #thumbs button {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    flex: none;
    /* nu e carusel: click deschide galeria pe ecran intreg, nu schimba poza principala */
    cursor: zoom-in;
    border: none;
  }
  /* prima poza e deja cea principala; grila continua de la a doua */
  #ix-pdp #thumbs button:first-child {
    display: none;
  }
  #ix-pdp #thumbs button.is-video::after {
    display: none;
  }
  #ix-pdp #hero-prev,
  #ix-pdp #hero-next {
    display: none;
  }

  #ix-pdp #buybox,
  #ix-pdp #buybox.px {
    padding: 32px 28px 56px;
  }

  #ix-pdp #construit,
  #ix-pdp #deep,
  #ix-pdp #testim {
    padding: 56px 32px;
  }
  #ix-pdp #construit .chead .lead {
    font-size: 26px;
  }
  #ix-pdp .ccard {
    width: 300px;
    min-height: 440px;
  }
  #ix-pdp .ph-garantie {
    height: 194px;
  }
  #ix-pdp .ph-tesatura {
    height: 280px;
  }
  #ix-pdp .ph-captuseala,
  #ix-pdp .ph-benefit {
    height: 275px;
  }
  #ix-pdp .ph-strips {
    height: 210px;
  }

  #ix-pdp #vidsec {
    height: 56vw;
  }
  #ix-pdp #vidsec .cap {
    left: 32px;
    bottom: 32px;
  }
  #ix-pdp #vidsec .vidsec-pause {
    right: 32px;
    bottom: 32px;
  }

  /* titlu, beneficii, apoi lista, pe o singura coloana */
  #ix-pdp #deep {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 40px;
  }
  #ix-pdp #deep .ddlist {
    grid-column: 1;
    grid-row: auto;
  }
  #ix-pdp #deep .dd-headline {
    font-size: 28px;
  }
  #ix-pdp #deep .ddp-item {
    font-size: 20px;
  }

  #ix-pdp #confsec {
    height: 640px;
  }
  #ix-pdp #confsec .px {
    padding: 40px 32px;
  }
  #ix-pdp #confsec h2 {
    font-size: 40px;
    max-width: none;
  }
  #ix-pdp #confsec .wbtn {
    right: 32px;
    bottom: 40px;
  }

  #ix-pdp #testim {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px;
    row-gap: 48px;
  }
  #ix-pdp #testim h2 {
    font-size: 36px;
  }
  #ix-pdp #testim .score-badge {
    top: 100px;
    gap: 20px;
    padding: 48px 24px 40px;
  }
  #ix-pdp #testim .score-badge .big {
    font-size: 72px;
    letter-spacing: -2.16px;
  }
  #ix-pdp #testim .score-badge .stars .star {
    width: 24px;
    height: 24px;
  }
  #ix-pdp #testim .score-badge .sb-txt {
    font-size: 16px;
  }
  #ix-pdp #testim .rvcard {
    gap: 20px;
  }
  #ix-pdp #testim .rv-ttl {
    font-size: 22px;
  }
  #ix-pdp #testim .rvcard .rp {
    flex-basis: 160px;
    width: 160px;
    height: 160px;
  }
  #ix-pdp #testim .rv-more {
    margin-top: -20px;
  }

  #ix-pdp #comfort,
  #ix-pdp #like > .px,
  #ix-pdp #recent > .px,
  #ix-pdp #locs > .px,
  #ix-pdp #like .rail,
  #ix-pdp #recent .rail,
  #ix-pdp #locs .rail,
  #ix-pdp #like .rail-nav,
  #ix-pdp #recent .rail-nav,
  #ix-pdp #locs .rail-nav {
    padding-left: 32px;
    padding-right: 32px;
    scroll-padding-left: 32px;
    scroll-padding-right: 32px;
  }
}

/* Butoanele de peste imagine din fisa materialelor: fara previzualizarea iconitei la
   apasare lunga (iOS). */
#ix-pdp #mv-measure,
#ix-pdp #mv-3d {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
#ix-pdp #mv-measure img,
#ix-pdp #mv-3d img {
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}


/* Pretul vechi si reducerea stau in pagina si cand forma aleasa nu e redusa (ixUpdatePriceForShape). */
#ix-pdp #buybox .p-old[hidden],
#ix-pdp #buybox .p-badge[hidden] {
  display: none;
}

/* Transportul pana in apartament (149 lei) nu are inca produs Shopify: optiunea platita se
   ascunde. Linkul „Transport & Retur" ramane si deschide textul despre transport si retur. */
#ix-pdp #specinfo-transport .up-row {
  display: none !important;
}

/* ── Produs fara recenzii ─────────────────────────────────────────────
   Randul notei ramane gol, dar tine loc: titlul, descrierea si pretul cad cu
   un rand mai jos degeaba. Randul se strange, iar ce era in el isi pastreaza
   locul — pe telefon iconitele (favorite / trimite) urca pe randul titlului,
   pe ecrane late insigna „CONFIGURABIL" ramane sus in dreapta, cum o pune
   prototipul, si titlul urca langa ea. */
@media (max-width: 767px) {
  #ix-pdp #buybox:has(.p-rate:empty) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
  }
  #ix-pdp #buybox:has(.p-rate:empty) > * {
    grid-column: 1 / -1;
  }
  #ix-pdp #buybox:has(.p-rate:empty) .p-rate-row {
    display: contents;
  }
  #ix-pdp #buybox:has(.p-rate:empty) .p-rate {
    display: none;
  }
  #ix-pdp #buybox:has(.p-rate:empty) h1 {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
  }
  /* iconitele (20px) centrate pe primul rand al titlului (26px) */
  #ix-pdp #buybox:has(.p-rate:empty) .p-rate-act {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    margin-top: 3px;
  }
}
@media (min-width: 768px) {
  #ix-pdp #buybox:has(.p-rate:empty) .p-rate {
    display: none;
  }
  /* titlul tine coloana din stanga cat stau insigna si iconitele in dreapta */
  #ix-pdp #buybox:has(.p-rate:empty) h1 {
    grid-row: 1 / span 2;
    align-self: start;
    margin-top: 0;
  }
  #ix-pdp #buybox:has(.p-rate:empty) .p-configurabil {
    align-self: start;
  }
  /* Iconitele stau sub insigna la aceeasi distanta ca la un produs cu recenzii
     (16px), altfel se lipesc de ea. */
  #ix-pdp #buybox:has(.p-rate:empty) .p-rate-act {
    margin-top: 16px;
    align-self: start;
  }
  /* Pagina neconfigurabila (sections/ixaria-classic-pdp.liquid) nu are insigna,
     deci nimic nu le tine iconitelor locul de sus: raman pe randul titlului,
     centrate pe el, ca la un produs configurabil cu recenzii. Altfel coborau
     16px sub un loc gol, iar titlul tinea degeaba doua randuri. */
  #ix-pdp.ix-classic #buybox:has(.p-rate:empty) h1 {
    grid-row: 1;
    align-self: center;
  }
  #ix-pdp.ix-classic #buybox:has(.p-rate:empty) .p-rate-act {
    grid-row: 1;
    align-self: center;
    margin-top: 0;
  }
}

/* Antetul foii poarta deja numele sectiunii (showInfoSection il ia chiar din
   h3-ul ei), deci titlul dinauntru ar fi al doilea la rand, unul sub altul —
   si pe telefon, si in panoul lateral. */
#ix-pdp #view-info .info-sec > h3 {
  display: none;
}

/* ── „Informatii generale" ca panou lateral ───────────────────────────
   Pe telefon foaia vine peste tot ecranul, ca pana acum. Pe ecrane late
   intra din dreapta peste o treime din latime si lasa pagina vizibila in
   spate: fundalul se intuneca (#dim), panoul are umbra si se inchide din X,
   din fundal sau cu Escape. Deruleaza doar corpul, antetul ramane pe loc. */
@media (min-width: 768px) {
  #ix-pdp #view-info {
    left: auto;
    right: 0;
    margin: 0;
    max-width: none;
    width: clamp(360px, 33.33vw, 560px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.14);
  }
  #ix-pdp #view-info .info-topbar {
    flex: 0 0 auto;
    border-bottom: 1px solid var(--hair);
  }
  #ix-pdp #view-info .info-head {
    padding: 20px 24px 16px;
  }
  #ix-pdp #view-info .info-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 24px 40px;
  }
  #ix-pdp #view-info .info-sec:first-child {
    padding-top: 24px;
  }
}

/* ══ „5 motive" in stil Apple (.abenefits) ══════════════════════════════
   Fotografie rotunjita, iar sub ea titlul bold urmat de descriere gri, mereu
   vizibila. Railul se deruleaza cu degetul; sagetile de jos folosesc railNav. */
#ix-pdp .abenefits {
  background: var(--beige);
  padding: 64px 0 56px;
}
#ix-pdp .abenefits .ab-head {
  padding: 0 24px;
}
#ix-pdp .abenefits .ab-lead {
  font-size: 32px;
  font-weight: 650;
  letter-spacing: -0.96px;
  line-height: 1.08;
  color: var(--black);
  max-width: 14em;
}
#ix-pdp .abenefits .ab-rail {
  display: flex;
  gap: 20px;
  margin-top: 40px;
  padding: 0 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 24px;
  scrollbar-width: none;
  align-items: flex-start;
}
#ix-pdp .abenefits .ab-rail::-webkit-scrollbar {
  display: none;
}
#ix-pdp .abenefits .ab-card {
  flex: 0 0 min(72vw, 300px);
  scroll-snap-align: start;
}
#ix-pdp .abenefits .ab-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  background: var(--beige);
}
#ix-pdp .abenefits .ab-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
}
#ix-pdp .abenefits .ab-sp {
  background: linear-gradient(165deg, #2e2015 0%, #8a5a35 45%, #dba873 75%, #f0d2ab 100%);
}
#ix-pdp .abenefits .ab-sp img {
  object-fit: cover;
}
/* Pozele din metafield (custom.benefits_section) sunt fotografii intregi, nu
   decupaje asezate pe fundal: umplu cardul, ca fotografia straturilor (.ab-sp). */
#ix-pdp .abenefits .ab-photo img {
  object-fit: cover;
}
#ix-pdp .abenefits .ab-foam {
  background: linear-gradient(180deg, #f5f8f9 0%, #eaeff2 45%, #dde5e8 100%);
}
#ix-pdp .abenefits .ab-warranty {
  background: radial-gradient(130% 100% at 22% 0%, #fcf9f3 0%, #f6efe1 40%, #e9ddc5 78%, #e2d4b8 100%);
}
#ix-pdp .abenefits .ab-fabric {
  background: radial-gradient(130% 100% at 25% 0%, #faf7f1 0%, #f3ede2 38%, #e2d6c3 74%, #c9b89e 100%);
}
#ix-pdp .abenefits .ab-storage {
  /* fara fotografie deocamdata */
  background: radial-gradient(130% 100% at 78% 100%, #ffffff 0%, #f6e9da 38%, #e3c6a3 74%, #c99a68 100%);
}
#ix-pdp .abenefits .ab-strips {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  display: flex;
  gap: 4px;
}
#ix-pdp .abenefits .ab-strips video {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
}
/* Textul e tras spre interior fata de poza (16px stanga, 24px dreapta), ca sa
   formeze o coloana ingusta si aerisita, nu un bloc cat latimea cardului. */
#ix-pdp .abenefits .ab-txt {
  padding: 24px 16px 0;
}
#ix-pdp .abenefits .ab-p {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.016em;
  line-height: 1.3;
  color: var(--gray);
  text-wrap: pretty;
}
#ix-pdp .abenefits .ab-p strong {
  font-weight: 600;
  color: var(--black);
}
#ix-pdp .abenefits .ab-nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 40px 24px 0;
}
#ix-pdp .abenefits .ab-nav button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--black);
  transition: background 0.2s ease, opacity 0.2s ease;
}
#ix-pdp .abenefits .ab-nav button:disabled {
  background: #e8e6df;
  cursor: default;
}
#ix-pdp .abenefits .ab-nav svg {
  width: 20px;
  height: 20px;
}
#ix-pdp .abenefits .ab-nav svg path {
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#ix-pdp .abenefits .ab-nav button:disabled svg path {
  stroke: #a3a19a;
}
@media (min-width: 768px) {
  #ix-pdp .abenefits {
    padding: 56px 32px 64px;
  }
  #ix-pdp .abenefits .ab-head,
  #ix-pdp .abenefits .ab-nav {
    padding-left: 0;
    padding-right: 0;
  }
  /* Railul trece peste padding-ul lateral al sectiunii pana la marginea
     ferestrei (ca la Apple): cardurile se taie doar la marginea ecranului, nu
     in mijlocul paginii. Padding-ul interior pastreaza primul card aliniat cu
     titlul, iar ultimul card se opreste la aceeasi distanta de margine. */
  #ix-pdp .abenefits .ab-rail {
    margin: 40px -32px 0;
    padding: 0 32px;
    scroll-padding: 0 32px;
    gap: 24px;
  }
  #ix-pdp .abenefits .ab-lead {
    font-size: 44px;
    letter-spacing: -1.3px;
  }
  #ix-pdp .abenefits .ab-card {
    flex-basis: 380px;
  }
  #ix-pdp .abenefits .ab-media {
    border-radius: 32px;
  }
  #ix-pdp .abenefits .ab-p {
    font-size: 18px;
    letter-spacing: -0.022em;
    line-height: 1.235;
  }
}
@media (min-width: 1200px) {
  #ix-pdp .abenefits {
    padding: 80px 100px;
  }
  #ix-pdp .abenefits .ab-rail {
    margin-left: -100px;
    margin-right: -100px;
    padding: 0 100px;
    scroll-padding: 0 100px;
  }
}