/** Shopify CDN: Minification failed

Line 897:38 Expected identifier but found whitespace
Line 897:39 Unexpected "13"
Line 905:2 Expected ":"

**/
/* SofaMix – Product 2025 (CSS FINAL) */
:root{
  --sf-accent:#F5C537;
  --sf-border:#e5e7eb;
  --sf-text:#0a0a0a;
  --sf-muted:#6b7280;
  --sf-bg:#ffffff;
  --sf-card-bg:#fff;
  --sf-radius:16px;
  --sf-max:min(120rem, 100vw - 2rem);
  --sf-sticky-top:72px; /* ajustează dacă header-ul e mai înalt */
}

/* Container */
.sf-container{
  max-width:var(--sf-max);
  margin-inline:auto;
  padding:24px 16px 96px;
  color:var(--sf-text);
  background:var(--sf-bg);
}
@media (min-width:768px){ .sf-container{ padding:24px 24px 96px; } }

/* Grid header */
.sf-header-grid{
  display:grid;
  gap:24px;
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:992px){ .sf-header-grid{ grid-template-columns:1fr 1fr; } }

/* limită scroll orizontal doar la thumbs */
.sf-container, .sf-header-grid, .sf-gallery{ overflow-x:hidden; }

/* ===== GALLERY & HERO ===== */
.sf-gallery{ position:relative; overflow:visible; z-index:1; }

.sf-hero{
  position:relative;                 /* pe mobil: normal flow */
  border:1px solid var(--sf-border);
  background:#fff;
  height:42vh; min-height:240px;
  border-radius:var(--sf-radius);
  overflow:hidden;
  z-index:0;
  touch-action:pan-y;                /* doar scroll vertical pe poză */
}
@media (min-width:992px){
  .sf-hero{ position:sticky; top:var(--sf-sticky-top); z-index:1; }
}

/* cheia: imaginea umple .sf-hero absolut, nu mai „pleacă” lateral */
.sf-hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  display:block;
  background:#fff;
  touch-action:pan-y;
}
.sf-hero-placeholder{ height:100%; display:grid; place-items:center; color:var(--sf-muted); }

/* Badges + favorite */
.sf-badges{ position:absolute; left:8px; top:8px; display:flex; gap:8px; }
.sf-badge{
  background:#fff; border:1px solid var(--sf-border);
  padding:4px 10px; border-radius:999px; font-size:11px; box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.sf-heart{
  position:absolute; right:8px; top:8px; background:#fff; border:1px solid var(--sf-border);
  border-radius:999px; padding:8px; box-shadow:0 1px 0 rgba(0,0,0,.03); cursor:pointer;
}

/* ===== THUMBS – scroll lateral silky, gap mic ===== */
.sf-thumbs{
  width:100%;
  margin-top:8px;
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-start;
  gap:8px;                           /* spațiu mai mic între thumbs */
  list-style:none;                    /* fără buline */
  overflow-x:auto;                    /* DOAR thumbs scrollează lateral */
  padding:4px 8px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;                 /* swipe doar pe X aici */
  overscroll-behavior-x:contain;
  overscroll-behavior-inline:contain;
  scrollbar-width:none;               /* Firefox */
  user-select:none;
}
.sf-thumbs::-webkit-scrollbar{ display:none; }
.sf-thumb-item{ scroll-snap-align:start; padding:4px; margin:0; flex:0 0 auto; }

.sf-thumb{
  width:104px; height:64px;           /* ușor mai mic decât vers. anterioară pentru mai multe pe rând */
  border-radius:12px;
  border:1px solid var(--sf-border);
  background:#fff;
  cursor:pointer;
  transition:box-shadow .15s, transform .1s;
  outline:2px solid transparent;
  outline-offset:2px;
}
@media (min-width:768px){ .sf-thumb{ width:120px; height:72px; } }
.sf-thumb:hover{ transform:translateY(-1px); }
.sf-thumb.is-active{
  outline:2px solid var(--sf-accent);
  outline-offset:2px;
  border-color:transparent;
  box-shadow:0 0 0 1px #fff inset;
}
.sf-thumb-img{ width:100%; height:100%; object-fit:contain; background:#fff; display:block; }

/* ===== RIGHT (titlu / avantaje / preț) ===== */
.sf-right{ display:flex; flex-direction:column; gap:10px; }
.sf-title{ font-size:clamp(24px, 2.6vw, 40px); line-height:1.1; font-weight:700; letter-spacing:-.01em; }

.sf-perks{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sf-card{
  display:flex; gap:10px; align-items:flex-start;
  border:1px solid var(--sf-border); border-radius:14px; background:var(--sf-card-bg);
  padding:12px; min-height:84px;
}
.sf-card-ico{ width:22px; height:22px; border:1px solid var(--sf-border); border-radius:8px; display:grid; place-items:center; font-size:12px; }
.sf-card-title{ font-weight:600; font-size:14px; line-height:1.2; }
.sf-card-desc{ color:var(--sf-muted); font-size:12px; line-height:1.3; }
.sf-card--desktop{ display:none; }
@media (min-width:992px){ .sf-card--desktop{ display:flex; } }

.sf-price-compare{ display:flex; align-items:baseline; gap:8px; color:var(--sf-muted); }
.sf-de-la{ font-size:12px; color:var(--sf-muted); }
.sf-price{ display:flex; align-items:baseline; gap:8px; }
.sf-price-strong{ font-size:clamp(22px, 2.3vw, 36px); font-weight:800; }
.sf-price-note{ font-size:12px; color:var(--sf-muted); }

/* ===== CONFIGURATOR ===== */
.sf-config{ margin-top:12px; }
.sf-config-note{ font-size:12px; color:var(--sf-muted); margin-bottom:6px; }
.sf-config-wrap{
  position:relative; border:1px solid var(--sf-border);
  border-radius:16px; overflow:hidden; background:#000;
}
.sf-config-iframe{ width:100%; height:520px; }
@media (min-width:768px){ .sf-config-iframe{ height:640px; } }
@media (min-width:1200px){ .sf-config-iframe{ height:720px; } }

.sf-config-fs{
  position:absolute; right:10px; top:10px; z-index:3;
  background:rgba(255,255,255,.9); border:1px solid var(--sf-border);
  padding:6px 10px; border-radius:10px; font-size:13px; cursor:pointer; backdrop-filter:saturate(120%) blur(2px);
}
.sf-config-fs:hover{ background:#fff; }

.sf-config-overlay{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(17,17,17,.25); backdrop-filter:blur(1px); z-index:2;
}
.sf-config-loader{
  background:#fff; padding:12px 16px; border-radius:12px; border:1px solid var(--sf-border);
  box-shadow:0 8px 40px rgba(0,0,0,.08); display:flex; align-items:center; gap:8px;
}
.sf-loader-dot{ width:10px; height:10px; border-radius:999px; background:#000; animation:sf-pulse .9s ease-in-out infinite alternate; }
.sf-loader-text{ font-size:13px; color:#1f2937; }
@keyframes sf-pulse{ to{ transform:scale(1.6); opacity:.65; } }

/* ===== BELOW THE FOLD (opțional) ===== */
.sf-after{ margin-top:20px; display:grid; gap:16px; }
.sf-block{ border:1px solid var(--sf-border); border-radius:16px; background:#fff; padding:16px; }
.sf-block-title{ font-weight:700; margin:0 0 10px; }
.sf-text{ color:#374151; line-height:1.6; }

.sf-perks-more{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (min-width:992px){ .sf-perks-more{ grid-template-columns:repeat(4,1fr); } }

.sf-specs{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:768px){ .sf-specs{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1200px){ .sf-specs{ grid-template-columns:repeat(3,1fr); } }
.sf-specs li{ display:flex; justify-content:space-between; gap:8px; border:1px solid var(--sf-border); border-radius:12px; padding:10px 12px; }
.sf-specs li span{ color:var(--sf-muted); }

.sf-list{ margin:0; padding-left:18px; color:#374151; line-height:1.6; }

.sf-form{ display:grid; grid-template-columns:1fr; gap:8px; }
@media (min-width:640px){ .sf-form{ grid-template-columns:1fr 1fr; } }
.sf-input{ border:1px solid var(--sf-border); border-radius:12px; padding:10px 12px; font-size:14px; }
.sf-input--full{ grid-column:1 / -1; }
.sf-btn{ background:var(--sf-accent); border:none; border-radius:12px; padding:10px 14px; font-weight:700; }

.sf-related{ display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:992px){ .sf-related{ grid-template-columns:repeat(4,1fr); } }
.sf-related-card{ border:1px solid var(--sf-border); border-radius:14px; overflow:hidden; background:#fff; }
.sf-related-img{ aspect-ratio:4/3; background:#f3f4f6; }
.sf-related-txt{ padding:12px; }
.sf-related-sub{ color:var(--sf-muted); font-size:12px; }

/* Utils */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* ====== SOFAMIX OVERRIDES (FINAL) ====== */
:root{
  --sf-sticky-top:72px;          /* ajustează dacă header-ul e mai înalt */
  --sf-hero-h-mobile:36vh;       /* înălțimea pozei pe mobil */
  --sf-hero-h-desktop:56vh;      /* înălțimea pozei pe desktop */
}

/* 1) Poza mare: dimensiuni corecte + centrată + să nu „fugă” în lateral */
.sf-hero{
  height:var(--sf-hero-h-mobile) !important;
  min-height:180px !important;
  overflow:hidden !important;
  touch-action:pan-y !important;
}
@media (min-width:480px){
  .sf-hero{ height:40vh !important; }  /* mic ramp-up pe mobile mari */
}
@media (min-width:992px){
  .sf-hero{
    height:var(--sf-hero-h-desktop) !important;
    position:sticky !important;
    top:var(--sf-sticky-top) !important;
    z-index:1 !important;
  }
}
.sf-hero-img{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
  object-fit:contain !important; background:#fff !important;
}

/* 2) Thumbnails: gap mic + scroll lateral garantat + NU se bagă sub hero */
.sf-gallery{ overflow-x:hidden !important; }
.sf-gallery .sf-thumbs{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:flex-start !important;   /* oprește space-between din temă */
  align-items:center !important;
  gap:6px !important;
  margin-top:8px !important;
  padding:4px 6px !important;
  list-style:none !important;
  overflow-x:auto !important;              /* DOAR banda scrollează lateral */
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  touch-action:pan-x !important;           /* swipe pe X doar aici */
  overscroll-behavior-x:contain !important;
  scrollbar-width:none !important;
  z-index:2 !important;                    /* peste hero */
  position:relative !important;
  background:#fff !important;
}
.sf-gallery .sf-thumbs::-webkit-scrollbar{ display:none !important; }
.sf-gallery .sf-thumb-item{ scroll-snap-align:start !important; padding:2px !important; margin:0 !important; flex:0 0 auto !important; }
.sf-gallery .sf-thumb{
  width:108px !important; height:64px !important;
  border-radius:12px !important;
  border:1px solid var(--sf-border) !important;
  outline:2px solid transparent !important; outline-offset:2px !important;
  background:#fff !important;
}
@media (min-width:768px){
  .sf-gallery .sf-thumb{ width:120px !important; height:72px !important; }
}
.sf-gallery .sf-thumb.is-active{
  outline:2px solid #F5C537 !important; border-color:transparent !important; box-shadow:0 0 0 1px #fff inset !important;
}
.sf-gallery .sf-thumb-img{ width:100% !important; height:100% !important; object-fit:contain !important; background:#fff !important; display:block !important; }

/* 3) (desktop) Ține thumbs VIZIBILE sub poza sticky – rămân pe loc când derulezi */
@media (min-width:992px){
  .sf-gallery .sf-thumbs{
    position:sticky !important;
    top:calc(var(--sf-sticky-top) + var(--sf-hero-h-desktop) + 8px) !important;
  }
}

/* safety: nu lăsa alte containere să creeze scroll orizontal */
.sf-container, .sf-header-grid, .sf-gallery{ overflow-x:hidden !important; }
/* ===== SOFAMIX PATCH: Configurator pe galben + titlu 50% pe mobile ===== */

/* 3D Configurator – accent galben */
.sf-config-wrap{
  border-color: var(--sf-accent) !important;
  box-shadow: 0 0 0 1px var(--sf-accent) inset !important;
  background:#000; /* păstrăm fundalul video 3D */
}
.sf-config-wrap::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:4px;
  background: var(--sf-accent); z-index:3;
}

/* buton "Ecran complet" pe galben */
.sf-config-fs{
  background: var(--sf-accent) !important;
  color: #111 !important;
  border-color: color-mix(in srgb, var(--sf-accent), #000 12%) !important;
  font-weight: 700 !important;
}
.sf-config-fs:hover{ filter: brightness(.95); }

/* overlay & loader în accent */
.sf-config-overlay{ background: rgba(245,197,55,.16) !important; }
.sf-loader-dot{ background: var(--sf-accent) !important; }
.sf-loader-text{ color:#1a1a1a !important; }

/* Titlul pe mobile ~50% din mărimea actuală */
@media (max-width: 480px){
  .sf-title{
    /* înainte: clamp(24px, 2.6vw, 40px) – acum ~jumătate */
    font-size: clamp(12px, 3.2vw, 18px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
  }
}
/* ===== MOBILE FULL-BLEED + TITLE +20% ===== */
@media (max-width: 767px){

  /* container: păstrăm textul cu margini, dar lăsăm secțiunile vizuale să iasă full-bleed */
  .sf-container{ max-width:100vw !important; padding-left:0 !important; padding-right:0 !important; }

  /* HERO, THUMBS & CONFIGURATOR — wide cât ecranul, fără colțuri rotunde, fără bordură laterală */
  .sf-hero,
  .sf-gallery .sf-thumbs,
  .sf-config-wrap{
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    border-left-width:0 !important;
    border-right-width:0 !important;
    border-radius:0 !important;
  }

  /* înălțime mai potrivită pe mobil pentru imagine */
  .sf-hero{ height:40vh !important; min-height:200px !important; }

  /* imaginea din HERO rămâne perfect centrată */
  .sf-hero-img{
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important;
    object-fit:contain !important; background:#fff !important;
  }

  /* banda de thumbnails: scroll lateral clar, gap compact */
  .sf-gallery .sf-thumbs{
    display:flex !important; flex-wrap:nowrap !important;
    justify-content:flex-start !important; gap:6px !important;
    overflow-x:auto !important; overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important; touch-action:pan-x !important;
    padding:6px 8px !important; background:#fff !important;
  }
  .sf-gallery .sf-thumb{ width:110px !important; height:66px !important; }

  /* TITLU: ~+20% față de setarea anterioară */
  .sf-title{
    /* era ~ clamp(12px, 3.2vw, 18px) → +20% */
    font-size:clamp(14px, 3.9vw, 22px) !important;
    line-height:1.15 !important;
    letter-spacing:-.01em !important;
  }
}
/* --- Mobile: doar TITLUL (~+20% față de varianta micșorată) --- */
@media (max-width: 767px){
  .sf-title{
    /* înainte era ~ clamp(12px, 3.2vw, 18px)  → +20% */
    font-size: clamp(14px, 3.9vw, 22px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
  }
}
/* --- Mobile: wide cu 5px margine pe stânga/dreapta --- */
@media (max-width: 767px){
  .sf-hero,
  .sf-gallery .sf-thumbs,
  .sf-config-wrap{
    width: calc(100vw - 10px) !important;                  /* 5px + 5px */
    margin-left:  calc(50% - 50vw + 5px) !important;
    margin-right: calc(50% - 50vw + 5px) !important;
  }
}/* ===== MOBILE FULL-BLEED CU GUTTER FIX DE 5PX (VARIANTĂ ROBUSTĂ) ===== */
@media (max-width: 767px){
  :root{
    --sf-gutter: 5px;              /* ← ajustezi aici dacă vrei 6/8/etc */
    --sf-hero-h-mobile: 40vh;      /* înălțimea pozei pe mobil */
  }

  /* Full-bleed pentru HERO, THUMBS și CONFIGURATOR – cu 5px margine pe stânga/dreapta */
  .sf-hero,
  .sf-gallery .sf-thumbs,
  .sf-config-wrap{
    box-sizing: border-box !important;
    max-width: none !important;                     /* ignoră max-width-urile din temă */
    width: calc(100vw - (var(--sf-gutter) * 2)) !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(calc(-50vw + var(--sf-gutter))) !important;
    margin: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    border-radius: 0 !important;
  }

  /* Poza principală – mai „scurtă” pe mobil, 100% centrată */
  .sf-hero{
    height: var(--sf-hero-h-mobile) !important;
    min-height: 200px !important;
    overflow: hidden !important;
    touch-action: pan-y !important;
  }
  .sf-hero-img{
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: contain !important; background: #fff !important;
  }

  /* Thumbnails: scroll lateral clar + gap mic (forțăm peste tema ta) */
  .sf-gallery .sf-thumbs{
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    list-style: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    background: #fff !important;
  }
  .sf-gallery .sf-thumbs::-webkit-scrollbar{ display:none !important; }
  .sf-gallery .sf-thumb-item{ flex: 0 0 auto !important; padding: 2px !important; margin: 0 !important; scroll-snap-align: start !important; }
  .sf-gallery .sf-thumb{
    width: 108px !important; height: 64px !important;
    border: 1px solid var(--sf-border) !important;
    border-radius: 12px !important; background:#fff !important;
    outline: 2px solid transparent !important; outline-offset: 2px !important;
  }
  .sf-gallery .sf-thumb.is-active{
    outline: 2px solid #F5C537 !important; border-color: transparent !important; box-shadow: 0 0 0 1px #fff inset !important;
  }
  .sf-gallery .sf-thumb-img{ width:100% !important; height:100% !important; object-fit:contain !important; display:block !important; }
}
/* === Mobile: gutter fix de 5px și reset full-bleed === */
@media (max-width: 767px){
  /* 1) readu 5px pad pe container (gutter global) */
  .sf-container{
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  /* 2) HERO / THUMBS / CONFIG ocupă 100% din container (nu mai folosim translateX) */
  .sf-hero,
  .sf-gallery .sf-thumbs,
  .sf-config-wrap{
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left-width: 1px !important;   /* păstrăm conturul */
    border-right-width: 1px !important;
    border-radius: 16px !important;      /* dacă vrei colțuri rotunde pe mobil */
  }

  /* 3) imaginea rămâne perfect centrată și scalată */
  .sf-hero{ height: 40vh !important; min-height: 200px !important; }
  .sf-hero-img{
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: contain !important; background: #fff !important;
  }

  /* 4) thumbs – scroll lateral + gap mic (asigurăm override) */
  .sf-gallery .sf-thumbs{
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    scrollbar-width: none !important;
    padding: 6px 0 !important;
    background: #fff !important;
  }
  .sf-gallery .sf-thumbs::-webkit-scrollbar{ display: none !important; }
  .sf-gallery .sf-thumb-item{ flex: 0 0 auto !important; padding: 2px !important; margin: 0 !important; }
  .sf-gallery .sf-thumb{ width: 110px !important; height: 66px !important; }
}
/* === MOBILE TWEAKS: crop hero, thumbs mai mici, gap 8px === */
@media (max-width: 767px){

  /* 1) Poza mare: taie albul sus/jos (zoom & crop) */
  .sf-hero{
    height: 34vh !important;         /* mai scurt decât înainte */
    min-height: 180px !important;
  }
  .sf-hero-img{
    object-fit: cover !important;     /* în loc de contain → taie albul */
    object-position: center !important;
  }

  /* 2) Thumbnails mai mici */
  .sf-gallery .sf-thumb{
    width: 92px !important;
    height: 56px !important;
  }

  /* 3) Spacing între thumbnails și titlu = 8px */
  .sf-gallery .sf-thumbs{
    margin-bottom: 8px !important;
  }
  .sf-title{
    margin-top: 0 !important;         /* ca să rămână exact 8px total */
  }
}
/* === Mobile: titlul foarte aproape de thumbnails === */
@media (max-width: 767px){
  /* reduce spațiul dintre blocul galeriei și blocul cu titlul */
  .sf-header-grid{
    gap: 4px !important;     /* row-gap efectiv */
    row-gap: 4px !important;
  }

  /* fără spații extra de siguranță */
  .sf-gallery{ margin-bottom: 0 !important; }
  .sf-gallery .sf-thumbs{ margin-bottom: 4px !important; } /* (era 8px) */
  .sf-right{ margin-top: 0 !important; }
  .sf-title{
    margin: 0 !important;
    padding-top: 0 !important;
  }
}
/* === Mobile: thumbs overlay peste poza + thumbs mai mici + spațiu mic până la titlu === */
@media (max-width: 767px){

  /* 1) Poza – un pic mai scurtă + crop ca să „taie” albul sus/jos */
  .sf-hero{
    height: 32vh !important;         /* mai scurt ca să recuperezi ecran */
    min-height: 180px !important;
    overflow: hidden !important;
  }
  .sf-hero-img{
    object-fit: cover !important;    /* taie albul sus/jos */
    object-position: 50% 50% !important;
  }

  /* 2) Thumbs suprapuse peste partea de jos a pozei */
  .sf-gallery .sf-thumbs{
    position: relative !important;
    margin-top: -48px !important;    /* trage banda peste poza */
    margin-bottom: 4px !important;   /* spațiu foarte mic până la titlu */
    z-index: 3 !important;
    background: transparent !important;

    /* păstrează scroll lateral „uns” */
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    scrollbar-width: none !important;
    padding: 0 4px !important;
  }
  .sf-gallery .sf-thumbs::-webkit-scrollbar{ display: none !important; }

  /* 3) Thumbs mai mici */
  .sf-gallery .sf-thumb{
    width: 84px !important;
    height: 50px !important;
    border-radius: 10px !important;
  }
  .sf-gallery .sf-thumb.is-active{
    outline: 2px solid #F5C537 !important;
    border-color: transparent !important;
  }

  /* 4) Titlul – lipit de thumbs */
  .sf-title{
    margin-top: 0 !important;
  }
}
/* SofaMix PDP — outline galben vizibil complet pentru thumbnailul activ */
.sf-gallery { overflow: visible; }
.sf-thumbs  { overflow-y: visible; padding-bottom: 10px; } /* loc pentru outline */

.sf-thumb.is-active{
  outline: 2px solid var(--sf-accent);
  outline-offset: 2px;
  border-color: transparent;
}
/* — Nudge thumbnails: +1.5px right & +1.5px down — */
.sf-gallery .sf-thumbs{
  padding-left: 20px !important;
  padding-top: 2.5px !important;
}

/* (opțional, dacă outline-ul de jos încă pare tăiat pe unele imagini) */
.sf-gallery .sf-thumbs{ padding-bottom: 2px !important; }

/* SofaMix PDP — thumbs scroll enable (safe) */
.sf-gallery .sf-thumbs{
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important;
  pointer-events: auto !important;
}

.sf-gallery .sf-thumb-item{ flex: 0 0 auto !important; }

/* feedback vizual subtil când tragi banda (opțional) */
.sf-thumbs.is-dragging{ cursor: grabbing; }
/* — Revert main photo: fără crop, mai mult „alb” sus/jos — */
@media (max-width: 767px){
  .sf-hero{
    height: 42vh !important;
    min-height: 240px !important;
  }
  .sf-hero-img{
    object-fit: contain !important;
    object-position: center !important;
  }
}
/* SofaMix PDP — thumbs swipe/drag enable (safe) */
.sf-gallery .sf-thumbs{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important; /* spune browserului că gestul e pe X aici */
}

.sf-gallery .sf-thumb-item{ flex: 0 0 auto !important; }

/* feedback subtil la drag (opțional) */
.sf-thumbs.is-dragging{ cursor: grabbing; }
/* Thumbnails — săgeți desktop pentru „lista ascunsă” */
.sf-thumb-nav{
  position: absolute;
  bottom: 8px;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--sf-border);
  background: #fff;
  color: #111;
  display: none;                  /* ascuns pe mobile */
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  z-index: 3;
  cursor: pointer;
  line-height: 1;
  font-size: 18px;
}
.sf-thumb-nav:hover{ filter: brightness(.97); }
.sf-thumb-nav.is-disabled{ opacity: .4; pointer-events: none; }

.sf-thumb-nav--prev{ left: 8px; }
.sf-thumb-nav--next{ right: 8px; }

@media (min-width: 992px){
  .sf-thumb-nav{ display: flex; }
}
/* desktop: banda de thumbs deasupra imaginii, clickabilă sigur */
/* Thumbnails — săgeți desktop pentru pozele „ascunse” */
.sf-thumb-nav{
  position: absolute;
  bottom: 8px;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid var(--sf-border);
  background: #fff;
  color: #111;
  display: none;                /* ascuns implicit (mobil) */
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  z-index: 3;
  cursor: pointer;
  line-height: 1;
  font-size: 18px;
}
.sf-thumb-nav:hover{ filter: brightness(.97); }
.sf-thumb-nav.is-disabled{ opacity: .4; pointer-events: none; }
.sf-thumb-nav--prev{ left: 8px; }
.sf-thumb-nav--next{ right: 8px; }

@media (min-width: 992px){
  .sf-thumb-nav{ display: flex; }
}
/* Desktop: aliniază top-ul imaginii cu titlul (non-invaziv) */
@media (min-width: 992px){
  .sf-header-grid .sf-gallery .sf-hero{
    margin-top: 0 !important;
    top: auto !important;                /* neutralizează eventuale top-uri moștenite */
  }
  .sf-header-grid .sf-right{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .sf-header-grid .sf-title{
    margin-top: 0 !important;            /* h1 reset */
  }
}
/* Mobile: 1px spațiu între header și main image */
@media (max-width: 767px){
  /* containerul începe imediat sub header */
  .sf-container{
    padding-top: 1px !important;   /* era ~24px; acum fix 1px */
    margin-top: 0 !important;
  }
  /* elimină orice offseturi de sus */
  .sf-header-grid{ margin-top: 0 !important; }
  .sf-gallery{ margin-top: 0 !important; }
  .sf-hero{ margin-top: 0 !important; }
}
/* Mobile: 3px între thumbnails și titlu */
@media (max-width: 767px){
  /* gap-ul dintre "galerie" (se termină la thumbs) și coloana cu titlul */
  .sf-header-grid{
    gap: 3px !important;
    row-gap: 3px !important;
  }
  /* siguranță: banda de thumbs termină tot la 3px */
  .sf-gallery .sf-thumbs{ margin-bottom: 0.1px !important; }
  /* titlul începe imediat fără margini suplimentare */
  .sf-title{ margin-top: 0 !important; }
}/* — Badges accent & flag (HERO) — */
.sf-badge--accent{
  background: var(--sf-accent);
  border-color: rgba(0,0,0,.1);
  color: #111;
  font-weight: 700;
}

.sf-badge--flag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sf-flag-ro{
  display: inline-block;
  width: 18px;              /* poți ajusta 16–20px */
  height: 12px;
  border-radius: 2px;
  border: 1px solid var(--sf-border);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); /* subtil, pe fond deschis */
  background:
    linear-gradient(to right,
      #002B7F 0 33.333%,
      #FCD116 33.333% 66.666%,
      #CE1126 66.666% 100%);
}

/* mică scalare pe ecrane foarte mici ca badge-urile să nu acopere imaginea */
@media (max-width: 360px){
  .sf-badge{ padding: 3px 8px; font-size: 10px; }
  .sf-flag-ro{ width: 16px; height: 10px; }
}
/* Badge-ul 3D să arate ca un buton */
.sf-badge--accent[data-sf-scroll-config]{ cursor: pointer; user-select: none; }
/* ===== DOAR perks scrollabile pe mobil (restul intact) ===== */

/* Mobile & tablet: bandă orizontală cu swipe */
@media (max-width: 991.98px){
  .sf-perks.sf-perks-inline{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    padding: 4px 0 !important;
    margin-top: 4px !important;
    scrollbar-width: none;
  }
  .sf-perks.sf-perks-inline::-webkit-scrollbar{ display: none; }

  /* cardurile ușor mai mici ca să lăsăm mai mult ecran configuratorului */
  .sf-perks.sf-perks-inline .sf-card{
    flex: 0 0 auto !important;
    min-width: 210px;
    padding: 10px 10px !important;  /* -2px față de baseline */
    min-height: 66px !important;
  }
  .sf-perks.sf-perks-inline .sf-card-ico{ width: 20px; height: 20px; font-size: 11px; }
  .sf-perks.sf-perks-inline .sf-card-title{ font-size: 13px; }
  .sf-perks.sf-perks-inline .sf-card-desc { font-size: 11px; }
}

/* Desktop: toate pe un singur rând, fără scroll */
@media (min-width: 992px){
  .sf-perks.sf-perks-inline{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  .sf-perks.sf-perks-inline .sf-card{
    flex: 0 1 auto;
    padding: 12px;                 /* ca în baseline desktop */
    min-height: 72px;
  }
}
/* — DOAR perks scrollabile pe mobile; desktop rămâne neschimbat — */
@media (max-width: 991.98px){
  .sf-perks{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    scrollbar-width: none;           /* Firefox */
    padding: 4px 0 !important;
    margin-top: 4px !important;
  }
  .sf-perks::-webkit-scrollbar{ display: none; } /* WebKit */

  /* fiecare card se comportă ca un slide; cele .sf-card--desktop rămân ascunse pe mobil */
  .sf-perks .sf-card{
    flex: 0 0 auto !important;
    min-width: 210px;                /* suficient cât să vezi 1.5–2 carduri */
  }
}
/* ==== DOAR perks scrollabile pe mobil; restul rămâne fix ==== */

/* 1) Blocăm orice scroll orizontal al paginii (mobil) */
@media (max-width: 991.98px){
  html, body,
  .sf-container,
  .sf-header-grid,
  .sf-gallery,
  .sf-right{
    overflow-x: hidden !important;
  }

  /* 2) Doar .sf-perks devine bandă orizontală cu swipe */
  .sf-perks{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    overscroll-behavior-inline: contain !important; /* nu mai „trage” restul paginii */
    scroll-snap-type: none !important;              /* liber, fără agățare */
    padding: 4px 0 !important;
    margin-top: 4px !important;
    scrollbar-width: none;
  }
  .sf-perks::-webkit-scrollbar{ display: none; }

  .sf-perks .sf-card{
    flex: 0 0 auto !important;
    min-width: 210px;             /* vezi 1.5–2 carduri */
    /* dacă vrei cardurile ușor mai mici:
    padding: 10px 10px !important;
    min-height: 66px !important;
    .sf-card-title{ font-size: 13px !important; }
    .sf-card-desc { font-size: 11px !important; }
    */
  }
}

/* 3) Desktop — păstrează EXACT layoutul de dinainte (grid) */
@media (min-width: 992px){
  .sf-perks{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* ca în baseline */
    gap: 8px !important;
    overflow: visible !important;
  }
  .sf-card--desktop{ display: flex !important; }  /* reexpune cardurile „desktop only” */
}
/* Mobile: text perks +2px */
@media (max-width: 991.98px){
  .sf-perks .sf-card-title{ font-size: 15px !important; } /* era ~14px */
  .sf-perks .sf-card-desc { font-size: 13/* Gap fix: 1px între titlu și perks (toate viewport-urile) */
.sf-title{ margin-bottom: 0 !important; }
.sf-perks{ margin-top: 1px !important; }

/* Mobile: suprascrie orice setare anterioară (ex. 4px) */
@media (max-width: 991.98px){
  .sf-perks{ margin-top: 0px !important; }
}
px !important; } /* era ~12px */
}
/* Mobile: EXACT 1px între titlu și perks */
@media (max-width: 991.98px){
  .sf-right{
    gap: 1px !important;              /* anulează gap-ul implicit (ex. 10px) */
  }
  .sf-title{
    margin-bottom: 0 !important;      /* fără margini extra sub titlu */
    line-height: 1.15 !important;     /* păstrează lizibilitatea */
  }
  .sf-perks{
    margin-top: 0 !important;         /* suprascrie orice 4px anterior */
    padding-top: 0 !important;        /* elimină „aerul” intern de sus */
  }
}
/* Mobile: perks mai compacte + padding simetric sus/jos */
@media (max-width: 991.98px){
  .sf-perks .sf-card{
    padding-block: 8px !important;   /* aceeași distanță sus și jos */
    padding-inline: 10px !important;
    min-height: auto !important;     /* nu mai forța înălțime mare */
    gap: 8px !important;             /* mai strâns între icon și text */
    align-items: center !important;  /* centru pe verticală */
  }
  .sf-perks .sf-card-ico{
    width: 20px; height: 20px;       /* mic, nu „împinge” înălțimea */
    font-size: 11px;
    margin-top: 0 !important;        /* fără offset în sus */
  }
  .sf-perks .sf-card-title{ font-size: 16px !important; line-height: 1.15; }
  .sf-perks .sf-card-desc { font-size: 14px !important; line-height: 1.2;  }
}
/* Mobile: perks și mai compacte (padding 6px sus/jos) */
@media (max-width: 991.98px){
  .sf-perks .sf-card{
    padding-block: 3px !important;   /* ↓ de la 8px */
    padding-inline: 10px !important;
    min-height: auto !important;
    gap: 8px !important;
    align-items: center !important;
  }
}
/* Mobile: perks și mai compacte – fără min-height + desc pe 1 rând */
@media (max-width: 991.98px){
  .sf-perks .sf-card{
    min-height: 0 !important;      /* oprește orice limită de înălțime */
    height: auto !important;
    padding-block: 6px !important;  /* rămâne simetric; ajustezi la 5px dacă vrei încă 1px */
    padding-inline: 10px !important;
    gap: 6px !important;            /* mai strâns între icon și text */
    align-items: center !important;
  }

  .sf-perks .sf-card-ico{
    width: 18px; height: 18px;      /* mai mic, ca să nu forțeze înălțimea */
    font-size: 10px;
  }

  .sf-perks .sf-card-text{ margin: 0 !important; }

  .sf-perks .sf-card-title{
    font-size: 16px !important;     /* păstrăm +2px cum ai cerut */
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  .sf-perks .sf-card-desc{
    font-size: 14px !important;     /* păstrăm +2px cum ai cerut */
    line-height: 1.1 !important;
    margin: 0 !important;

    /* taie la 1 rând (ellipsis) → card mai scund */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
}

/* opțional: pe ecrane foarte înguste, mai strângem 1px din desc */
@media (max-width: 360px){
  .sf-perks .sf-card-desc{ font-size: 12px !important; }
}
/* — Price spacing & compare-at strike — */

/* 1) prețul la 1px de perks */
.sf-perks{ margin-bottom: 0 !important; }
.sf-price-row{
  margin-top: 1px !important;         /* exact 1px sub perks */
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

/* 2) compare-at price tăiat, discret */
.sf-compare{
  color: var(--sf-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
  -webkit-text-decoration: line-through;
}

/* 3) nota de preț mai aproape */
.sf-price-note{
  margin-top: 4px !important;
}

/* (opțional) pe ecrane foarte mici mai strângem puțin */
@media (max-width: 360px){
  .sf-price-row{ gap: 4px; }
}
/* — Desktop: 1px între titlu, perks și preț — */
@media (min-width: 992px){
  .sf-right{
    gap: 0 !important;                 /* anulăm gap-ul global */
  }
  .sf-title{
    margin-bottom: 1px !important;     /* titlu → perks = 1px */
  }
  .sf-perks{
    margin-top: 0 !important;
    margin-bottom: 1px !important;     /* perks → preț = 1px */
    padding-top: 0 !important;         /* elimină „aerul” intern sus */
  }
  .sf-perks + .sf-price-row{
    margin-top: 0 !important;          /* niciun extra peste 1px-ul de mai sus */
  }
}

/* — Mobile: dacă e nevoie, păstrăm tot 1px — */
@media (max-width: 991.98px){
  .sf-right{ gap: 1px !important; }
  .sf-title{ margin-bottom: 0 !important; }
  .sf-perks{
    margin-top: 0 !important;
    margin-bottom: 1px !important;
    padding-top: 0 !important;
  }
  .sf-perks + .sf-price-row{ margin-top: 0 !important; }
}
.sf-price-row{ margin-top: 0 !important; }
/* Mobile: micșorează ancora dintre perks și preț cu 1–2px */
@media (max-width: 767px){
  .sf-perks{ margin-bottom: 0 !important; }
  .sf-price-row{
    margin-top: 0 !important;
    transform: translateY(-6px); /* dacă e prea mult, schimbă în -1px */
  }
  .sf-price-note{ margin-top: 2px !important; } /* păstrează aerul sub preț */
}
/* Mobile: spacing fin pentru zona de preț + configurator */
@media (max-width: 767px){
  /* Ai ridicat prețul cu -6px; ca să rămână vizual 1px sub el,
     nota trebuie împinsă cu 1px + 6px = 7px */
  .sf-price-note{
    margin-top: 10px !important;   /* dacă schimbi lift-ul, vezi nota de mai jos */
  }

  /* 1px între blocul de preț și secțiunea configurator */
  .sf-config{
    margin-top: 1px !important;
  }

  /* 1px între textul "Preț & Adaugă în coș..." și iframe */
  .sf-config-note{
    margin: 0 0 1px 0 !important; /* fără spații suplimentare sus, 1px jos */
  }
  .sf-config-wrap{
    margin-top: 0 !important;     /* stă lipit de nota de mai sus (1px) */
  }
}
/* Mobile: 0.5px spacing între preț → "Preț estimativ" → "Preț & Adaugă în coș" + iframe */
@media (max-width: 767px){
  /* ai .sf-price-row cu translateY(-6px); ca să rămână 0.5px vizual sub preț,
     nota trebuie împinsă cu 6.5px */
  .sf-price-note{
    margin-top: 6.5px !important;   /* 6px (compensare) + 0.5px (gap dorit) */
    margin-bottom: 0 !important;
  }

  /* 0.5px între "Preț estimativ..." și "Preț & Adaugă în coș..." */
  .sf-config{ margin-top: 0 !important; }
  .sf-config-note{
    margin: 0.5px 0 0.5px 0 !important;  /* 0.5px sus și 0.5px jos */
    line-height: 1.2;                     /* păstrează lizibilitatea la spațiu mic */
  }

  /* 0.5px între textul de mai sus și iframe */
  .sf-config-wrap{ margin-top: 0 !important; }
}
/* Mobile: 0.5px spacing în zona de preț + configurator */
:root{ --sf-price-lift: 6px; } /* pune aici valoarea absolută a lift-ului tău */

@media (max-width: 767px){
  /* zero out margins care mai adaugă aer */
  .sf-price-row{ margin-bottom: 0 !important; }
  .sf-price-note,
  .sf-config-note{ margin: 0 !important; padding: 0 !important; }

  /* 0.5px între PREȚ și „Preț estimativ…”,
     ținând cont că prețul e urcat cu -var(--sf-price-lift) */
  .sf-price-note{
    margin-top: calc(var(--sf-price-lift) + 0.5px) !important;
  }

  /* 0.5px între „Preț estimativ…” și „Preț & Adaugă în coș …” */
  .sf-config{ margin-top: 0 !important; }
  .sf-config-note{ margin-top: 0.5px !important; }

  /* 0.5px între textul de mai sus și iframe */
  .sf-config-wrap{ margin-top: 0.5px !important; }
}
/* Mobile: 0.5px între PREȚ și „Preț estimativ …” (compensează lift-ul prețului) */
/* setează aici valoarea absolută a lift-ului tău (dacă ai ridicat prețul cu -6px → 6px) */
:root{ --sf-price-lift: 8px; }

@media (max-width: 767px){
  .sf-price-row{ margin-bottom: 0 !important; }

  /* trag nota în sus cu lift-ul și las exact 0.5px spațiu */
  .sf-price-note{
    margin-top: calc(-1 * var(--sf-price-lift) + 0.5px) !important;
  }
}
/* === Configurator: 7/8 din ecran + fără rama galbenă === */

/* scoate rama/accentele galbene din jurul configuratorului */
.sf-config-wrap{
  border-color: var(--sf-border) !important;
  box-shadow: none !important;
}
.sf-config-wrap::before{ display:none !important; } /* bara galbenă de sus */

/* fă iframe-ul cât 7/8 din ecran */
@media (max-width: 991.98px){
  .sf-config-iframe{
    /* fallback pentru browsere fără dvh */
    height: 87.5vh !important;
  }
  @supports (height: 100dvh){
    .sf-config-iframe{ height: 87.5dvh !important; } /* corect pe mobile modern */
  }
}

/* și pe desktop îl mărim similar */
@media (min-width: 992px){
  .sf-config-iframe{
    height: 87.5vh !important;
  }
}
/* Configurator: fără niciun contur (border/ring/umbra) */
.sf-config-wrap{
  border: 0 !important;
  box-shadow: none !important;
}
.sf-config-wrap::before{ display: none !important; } /* bara galbenă de sus, dacă exista */
.sf-config-iframe{
  border: 0 !important;
  outline: none !important;
  background: transparent;
}

/* Anulează eventualele borduri laterale reintroduse pe mobil */
@media (max-width: 767px){
  .sf-config-wrap{
    border-left-width: 0 !important;
    border-right-width: 0 !important;
  }
}

/* — Reordonare vizuală în coloana dreaptă: Preț + notă peste perks — */
.sf-right{
  display: flex;                 /* e deja în baseline, dar asigurăm */
  flex-direction: column;
}
.sf-title{ order: 0; }           /* rămâne primul */
.sf-price-row{ order: 1; }       /* PREȚ urcă deasupra perks-urilor */
.sf-price-note{ order: 2; }      /* „Preț de plecare …” imediat sub preț */
.sf-perks{ order: 3; }           /* perks după notă */

/* spațiu mic între notă și perks (1px) */
.sf-perks{ margin-top: 1px !important; }

/* — Perks cu interior galben (preview) — */
.sf-perks .sf-card{
  background: var(--sf-accent) !important;   /* #F5C537 */
  border-color: transparent !important;
  box-shadow: none !important;
  color: #111 !important;
}
.sf-perks .sf-card-ico{
  background: #fff;
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  font-size: 11px;
}
.sf-perks .sf-card-title{ color:#111 !important; font-weight:700; }
.sf-perks .sf-card-desc { color:#1a1a1a !important; }

/* păstrăm variantele compacte de pe mobil */
@media (max-width: 991.98px){
  .sf-perks .sf-card{
    padding-block: 6px !important;
    padding-inline: 10px !important;
    min-height: 0 !important;
    gap: 6px !important;
    align-items: center !important;
  }
}
/* ===== FIX: Ordine clară în coloana dreaptă + vizibilitate ===== */
.sf-right{
  display: flex !important;            /* forțăm flex pe coloana dreaptă */
  flex-direction: column !important;
}

/* Reset: toate elementele directe pleacă de la același order */
.sf-right > *{ order: 10; }

/* 0: Titlul, 1: Preț, 2: Nota de preț, 3: Perks */
.sf-right > .sf-title{       order: 0; }
.sf-right > .sf-price-row{   order: 1; }
.sf-right > .sf-price-note{  order: 2; }
.sf-right > .sf-perks{       order: 3; }

/* Safety: asigură-te că nu sunt ascunse accidental */
.sf-right > .sf-price-row,
.sf-right > .sf-price-note,
.sf-right > .sf-perks{
  opacity: 1 !important;
  visibility: visible !important;
}

/* păstrăm micro-spacing-urile tale ultra-strânse pe mobil */
@media (max-width: 767px){
  /* dacă ai lift pe preț (ex. -6px), menține 0.5px vizual față de nota de preț */
  :root{ --sf-price-lift: 6px; } /* schimbă 6px dacă ai altă valoare la translateY */
  .sf-price-row{ margin-bottom: 0 !important; }
  .sf-price-note{
    margin-top: calc(-1 * var(--sf-price-lift) + 0.5px) !important;
    margin-bottom: 0 !important;
  }
}

/* ===== Perks galbene (preview) ===== */
.sf-perks .sf-card{
  background: var(--sf-accent) !important;   /* #F5C537 */
  border-color: transparent !important;
  color: #111 !important;
}
.sf-perks .sf-card-title{ color:#111 !important; font-weight:700; }
.sf-perks .sf-card-desc { color:#1a1a1a !important; }

/* Icon boxed pe galben – discret */
.sf-perks .sf-card-ico{
  background: #fff;
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  font-size: 11px;
}
/* Desktop: fă configuratorul pe toată lățimea ecranului */
@media (min-width: 992px){
  /* dacă secțiunea e încă în grid, ocupă ambele coloane */
  .sf-header-grid .sf-config{
    grid-column: 1 / -1 !important;
  }

  /* full-bleed: întinde secțiunea la 100vw, ieșind din container */
  .sf-config{
    box-sizing: border-box !important;
    max-width: none !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
  }

  /* iframe-ul ocupă toată lățimea secțiunii */
  .sf-config-iframe{
    width: 100% !important;
    height: 87.5vh !important; /* păstrăm 7/8 din înălțimea ecranului */
  }
}

/* fără contur, cum ai cerut */
.sf-config-wrap{
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.sf-config-wrap::before{ display:none !important; }
.sf-config-iframe{
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
}
/* — Configurator sub thumbnailuri pe DESKTOP, fără să mutăm HTML — */
@media (min-width: 992px){
  /* „dizolvăm” containerul din dreapta astfel încât copiii lui devin itemi ai grilei */
  .sf-header-grid .sf-right{
    display: contents !important;
  }

  /* Toate elementele din dreapta rămân în coloana 2 (titlu, preț, perks etc.) */
  .sf-header-grid .sf-right > *{
    grid-column: 2 !important;
  }

  /* EXCEPȚIE: configuratorul – îl întindem pe ambele coloane și îl punem pe rândul următor,
     deci apare imediat sub galerie (thumbnailuri) */
  .sf-header-grid .sf-right > .sf-config{
    grid-column: 1 / -1 !important;
    margin-top: 1px !important;      /* lipit de galerie */
  }

  /* safety: anulează orice full-bleed/position impuse anterior configuratorului */
  .sf-config{
    max-width: 100% !important;
    width: 100% !important;
    position: static !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* Configurator sub thumbnail-uri: pe un rând nou al grilei, ambele coloane */
@media (min-width: 992px){
  .sf-header-grid > .sf-config{
    grid-column: 1 / -1 !important;
    margin-top: 1px !important;   /* lipit de thumbnails */
  }
}

/* Safety: fără full-bleed/position forțat */
.sf-config{
  max-width: 100% !important;
  width: 100% !important;
  position: static !important;
  left: auto !important; right: auto !important;
  margin-left: 0 !important; margin-right: 0 !important;
}

/* Iframe mare și fără contur (cum ai cerut) */
.sf-config-wrap{ border:0 !important; box-shadow:none !important; border-radius:0 !important; }
.sf-config-wrap::before{ display:none !important; }
.sf-config-iframe{ width:100% !important; height:87.5vh !important; border:0 !important; outline:none !important; }
/* === Desktop: ordonează clar zonele în grid (gallery | right) apoi (config | config) === */
@media (min-width: 992px){
  .sf-header-grid{
    /* asigurăm layoutul cu arii de grid, chiar dacă tema a setat altceva */
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "gallery right"
      "config  config" !important;
    align-items: start !important;
  }

  /* mapare arii */
  .sf-gallery{ grid-area: gallery !important; }
  .sf-right  { grid-area: right   !important; }
  .sf-config { grid-area: config  !important; margin-top: 1px !important; }

  /* cleanup de siguranță: anulăm orice hack vechi care “sparge” coloana dreaptă */
  .sf-header-grid .sf-right{
    display: flex !important;
    flex-direction: column !important;
  }
  .sf-header-grid .sf-right > *{
    grid-column: auto !important;   /* dacă s-au forțat coloane pe copii, le resetăm */
    order: initial !important;      /* nu schimbăm ordinea internă: Titlu, Preț, Perks */
  }
}

/* (opțional) pe mobile nu schimbăm nimic – rămâne fluxul pe o singură coloană */
/* === DESKTOP: thumbnails peste poza principală (overlay) === */
@media (min-width: 992px){
  .sf-gallery{ position: relative !important; }
  .sf-hero{ position: sticky !important; top: var(--sf-sticky-top) !important; }

  /* anulăm varianta veche "sticky sub poză" și le punem peste poză */
  .sf-gallery .sf-thumbs{
    position: absolute !important;
    top: auto !important;
    bottom: 12px !important;         /* distanța față de marginea de jos a pozei */
    left: 16px !important;
    right: 16px !important;

    margin: 0 !important;
    padding: 6px 10px 10px !important;/* +padding jos ca outline-ul să nu fie tăiat */
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: saturate(120%) blur(2px);
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);

    overflow-x: auto !important;
    overflow-y: visible !important;   /* lasă outline-ul să iasă complet */
    z-index: 3 !important;
  }

  /* mărimi confortabile pe desktop; păstrăm outline-ul vizibil */
  .sf-gallery .sf-thumb-item{ padding: 2px !important; flex: 0 0 auto !important; }
  .sf-gallery .sf-thumb{ width: 120px !important; height: 72px !important; }

  /* săgețile, dacă le folosești, rămân peste overlay */
  .sf-thumb-nav{
    bottom: 14px !important;
    z-index: 4 !important;
  }
}
/* === Desktop: margine neagră de 1px pentru configurator === */
@media (min-width: 992px){
  .sf-config-iframe{
    border: 1px solid #000 !important;
    outline: none !important;          /* fallback off */
  }
}
/* ==== Fix linia neagră sub iframe + border doar pe desktop ==== */

/* 1) elimină gap-ul de linie de bază (cauza "liniei negre") */
.sf-config-iframe{
  display: block;           /* nu mai e inline → dispare spațiul de sub el */
  vertical-align: top;      /* safety */
  outline: none !important;
}

/* 2) Mobile / tablet: fără niciun contur */
@media (max-width: 991.98px){
  .sf-config-iframe{ border: 0 !important; }
  .sf-config-wrap{
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important; /* nimic vizibil în spate */
  }
}

/* 3) Desktop: doar aici vrem marginea neagră de 1px */
@media (min-width: 992px){
  .sf-config-iframe{
    border: 1px solid #000 !important;
    box-sizing: border-box; /* evită overflow cu border-ul */
  }
}
/* ==== Mobile: elimină linia sub iframe (hairline fix) ==== */
@media (max-width: 991.98px){
  /* 1) zero-gap între wrapper și iframe */
  .sf-config-wrap{
    position: relative !important;
    line-height: 0 !important;      /* taie baseline gap */
    font-size: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    background: var(--sf-bg, #fff) !important; /* aceeași culoare ca pagina */
  }
  .sf-config-iframe{
    display: block !important;       /* nu inline → fără spațiu dedesubt */
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
    transform: translateZ(0);        /* forțează compozitorul pe iOS */
    backface-visibility: hidden;
  }

  /* 2) anti-hairline: acoperă fracțiile de px la randare */
  .sf-config-wrap::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--sf-bg, #fff);  /* dacă bg-ul paginii e altul, schimbă aici */
    pointer-events: none;
  }

  /* 3) nu lăsa următorul bloc să adauge un „border-top”/margine care pare linie */
  .sf-config + *{
    margin-top: 0 !important;
    border-top: 0 !important;
  }

  /* 4) dacă folosești dvh, evită fracțiile de px */
  @supports (height: 100dvh){
    .sf-config-iframe{ height: calc(87.5dvh + 1px) !important; } /* acoperă eventualul 0.5px */
  }
}
/* === Magnet snap pe mobil: aliniază configuratorul sub header la snap === */
@media (max-width: 991.98px){
  /* scroll-margin-top respectă headerul tău sticky + 1px spațiu */
  .sf-config{ scroll-margin-top: calc(var(--sf-sticky-top, 0px) + 1px); }
}
/* === Mobile: hairline (0.5px) frame pentru configurator === */
@media (max-width: 991.98px){
  /* nu mai masca baza, ca să se vadă cadrul */
  .sf-config-wrap::after{ 
    display: none !important; 
  }

  /* desenăm cadrul ultra-subțire ÎN INTERIOR, ca hairline, fără artefacte jos */
  .sf-config-wrap{
    box-shadow: 0 0 0 0.5px #000 inset !important; /* 0.5px „border” */
    border: 0 !important;         /* sigur că nu se suprapune alt border */
    background: transparent !important;
  }

  /* iframe-ul rămâne block ca să nu apară gap-uri de baseline */
  .sf-config-iframe{
    display: block !important;
    border: 0 !important;          /* cadrul e pe wrap, nu pe iframe */
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
  }
}
/* === Elimină tentă galbenă înainte de load (overlay neutru) === */
.sf-config-overlay{
  background: rgba(0,0,0,.06) !important;  /* sau 'transparent' dacă vrei 0 tint */
}

/* Safety: dacă a rămas bara galbenă istorică, o oprim ferm */
.sf-config-wrap::before{ display:none !important; }
/* Evită scroll trap: scrollul principal are prioritate */
.sf-config { overscroll-behavior: contain; }
.sf-config-wrap { touch-action: pan-y; }
/* —— Spațiu vertical 5px doar între: Descriere → Specificații → Livrare & Retur —— */
#specificatii { margin-top: 5px !important; } /* Descriere → Specificații = 5px */
#livrare      { margin-top: 5px !important; } /* Specificații → Livrare & Retur = 5px */
#descriere { margin-top: 5px !important; } /* Specificații → Livrare & Retur = 5px */
/* Descriere în format tabelar (compact) */
#descriere .sf-kv-list{
  margin-top: 6px;
}

#descriere .sf-kv{
  padding: 10px 12px;         /* ușor mai compact decât specs */
}

#descriere .sf-kv::before{
  width: 2px;                 /* bară galbenă mai fină */
}

#descriere .sf-kv-label{
  font-weight: 700;
}

#descriere .sf-kv-value{
  color: #374151;
}

@media (max-width: 767px){
  #descriere .sf-kv{ padding: 8px 10px; }
  #descriere .sf-kv-label,
  #descriere .sf-kv-value{ font-size: 14px; }
}

/* 3px între blocurile de după iframe (descriere, specificații, dimensiuni, livrare) */
#descriere    { margin-top: 3px !important; }
#specificatii { margin-top: 3px !important; }
#dimensiuni   { margin-top: 3px !important; }
#livrare      { margin-top: 3px !important; }
/* ===== Tables for Spec & Dimensions ===== */
.sf-table-wrap{ margin:3px 0; }

/* elegant, clean */
.sf-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid var(--sf-border);
  border-radius:12px;
  overflow:hidden;
}
.sf-table thead th{
  background:#fafafa;
  font-weight:700;
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--sf-border);
}
.sf-table tbody td{
  padding:8px 12px;
  border-bottom:1px solid var(--sf-border);
  vertical-align:top;
}
.sf-table tbody tr:last-child td{ border-bottom:0; }
.sf-table tbody tr:nth-child(odd){ background:#fcfcfd; }

/* key / value coloring */
.sf-table .sf-key{ color:var(--sf-muted); width:40%; }
.sf-table .sf-val{ color:var(--sf-text); }

/* stacked mobile */
@media (max-width:767px){
  .sf-table thead{ display:none; }
  .sf-table tbody tr{ display:block; border-bottom:1px solid var(--sf-border); }
  .sf-table tbody tr:last-child{ border-bottom:0; }
  .sf-table tbody td{ display:block; padding:8px 12px; }
  .sf-table tbody td.sf-key{ font-weight:600; color:#111; padding-bottom:2px; }
  .sf-table tbody td.sf-val{ padding-top:0; }
}

/* 3px între blocurile de sub iframe (descriere, specificații, dimensiuni etc.) */
.sf-after .sf-block + .sf-block{ margin-top:3px !important; }
/* ===== Collapsible blocks (Specs & Dimensions) ===== */
.sf-block-title{ margin:0 0 4px; } /* mic spațiu sub titlu */

.sf-collapser{
  appearance:none; -webkit-appearance:none;
  background:transparent; border:0; padding:8px 0; margin:0;
  width:100%; text-align:left; font:inherit; font-weight:700;
  display:flex; align-items:center; gap:8px; cursor:pointer;
  position:relative;
}
.sf-collapser::after{
  content:""; width:10px; height:10px; margin-left:auto;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease;
  opacity:.8;
}
.sf-collapser[aria-expanded="true"]::after{ transform: rotate(-135deg); }

/* container cu tranzitie pe inaltime */
.sf-collapse{
  overflow:hidden;
  max-height: none;               /* JS setează aici pixeli pentru animare */
  transition: max-height .22s ease;
}

/* micro-spacing între blocuri după iframe (ai cerut 3px) – păstrăm */
.sf-after .sf-block + .sf-block{ margin-top:3px !important; }

/* Mobile: padding mic în interiorul blocurilor, conform stilului tău */
@media (max-width:767px){
  .sf-block{ padding:12px; }
}
/* Specs: titlul (stânga) fără wrap pe mobil */
@media (max-width: 767.98px){
  /* dă puțin mai mult spațiu coloanei stângi ca să încapă titlurile lungi */
  .sf-specs-row{ 
    display:grid;
    grid-template-columns: minmax(200px, 58%) 1fr !important; /* era mai îngustă */
    column-gap: 12px;
  }
  .sf-specs__key, 
  .sf-specs__key *{
    white-space: nowrap !important;     /* nu mai permite wrap pe titlu */
    word-break: keep-all !important;
    hyphens: none !important;
  }
  .sf-specs__val{
    white-space: normal !important;     /* valoarea se poate împacheta */
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
/* Mobile: fiecare rând devine 1 coloană reală; titlul ia 100% lățime */
@media (max-width: 767.98px){
  .sf-specs-row{
    display: grid !important;
    grid-template-columns: 1fr !important;  /* o singură coloană */
    row-gap: 6px;
  }

  .sf-specs__key{
    grid-column: 1 / -1 !important;
    display: block !important;       /* devine block, ia toată lățimea */
    width: 100% !important;
    white-space: normal !important;   /* lasă textul să curgă până la capăt */
  }

  /* underline pe toată lățimea titlului */
  .sf-specs__key::after{
    content: "";
    display: block;
    height: 1px;
    background: var(--sf-border);
    margin-top: 6px;
  }

  .sf-specs__val{
    grid-column: 1 / -1 !important;  /* valoarea pe rândul următor */
  }
}
/* ai scos textele → ne asigurăm că nu rămân spații */
.sf-price-note,
.sf-config-note{ display:none !important; }

/* 1px între PREȚ și CONFIGURATOR când notele nu mai există */
.sf-price-row + .sf-config{ margin-top:1px !important; }

/* safety: dacă între ele apare alt nod (ex. un wrapper), păstrează tot 1px */
.sf-price-row ~ .sf-config{ margin-top:1px !important; }

/* 1px între configurator și primul bloc de după el (Descriere) */
.sf-config + .sf-after .sf-block:first-child{ margin-top:1px !important; }

/* 3px între blocurile de sub iframe (Descriere / Specificații / Livrare) – cum am stabilit */
.sf-after .sf-block + .sf-block{ margin-top:3px !important; }
/* ===== Perks: doar contur galben (0.75px), fără umplere ===== */
.sf-perks .sf-card{
  background:#fff !important;
  border:0.75px solid var(--sf-accent) !important;
  box-shadow:none !important;
  color:var(--sf-text) !important;      /* revine la textul normal */
}

/* Iconița rămâne discretă, cu același contur galben */
.sf-perks .sf-card-ico{
  background:#fff !important;
  border:1px solid var(--sf-accent) !important;
}

/* Dacă un browser nu redă fracții de px, cade elegant la 1px (opțional) */
@supports not (border: 1.5pxpx solid #000){
  .sf-perks .sf-card,
  .sf-perks .sf-card-ico{ border-width:1px !important; }
}

/* Asigură culorile titlului/descrierii la default */
.sf-perks .sf-card-title{ color:inherit !important; }
.sf-perks .sf-card-desc { color:var(--sf-muted) !important; }
/* Butoane scroll configurator (sus/jos) */
.sf-config-jump{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:38px; height:38px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  border:1px solid var(--sf-border);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  display:grid; place-items:center;
  font-size:18px; line-height:1;
  z-index:4;               /* peste overlay-ul de încărcare (z=2) și peste iframe */
  cursor:pointer;
  user-select:none;
}
.sf-config-jump--up{   top:5px; }
.sf-config-jump--down{ bottom:5px; }
.sf-config-jump:hover{ filter:brightness(.97); }
.sf-config-jump:active{ transform:translateX(-50%) scale(.98); }

/* puțin mai mici pe mobile înguste */
@media (max-width: 380px){
  .sf-config-jump{ width:34px; height:34px; font-size:16px; }
}
/* === SHOWROOM block === */
.sf-showroom{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width: 992px){
  .sf-showroom{ grid-template-columns: 1.2fr 1fr; align-items: start; }
}
.sf-showroom-cta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }

.sf-btn--ghost{
  background: transparent;
  border: 1px solid var(--sf-accent);
  color: #111;
}

/* Hartă */
.sf-showroom-map iframe{
  width:100%;
  height:260px;
  border: 0.5px solid var(--sf-border);
  border-radius: 12px;
  display:block;
}
@media (min-width: 768px){
  .sf-showroom-map iframe{ height:320px; }
}

/* Spacing: 3px între blocurile de după iframe (dacă nu e deja) */
.sf-after .sf-block + .sf-block{ margin-top: 3px; }
/* ===== Showrooms (hardcoded) ===== */
.sf-showrooms{ margin-top:3px; } /* 3px între blocuri, cum ai setat după iframe */

.sf-showrooms-list{
  display:grid; grid-template-columns:1fr; gap:8px;
}
@media (min-width: 768px){
  .sf-showrooms-list{ grid-template-columns:1fr 1fr; }
}

.sf-showroom-card{
  border:1px solid var(--sf-border);
  border-radius:12px;
  background:#fff;
  padding:12px;
  display:grid; gap:8px;
}

.sf-showroom-top{ display:flex; align-items:center; gap:8px; }
.sf-pin{ font-size:18px; line-height:1; }
.sf-showroom-title{ font-weight:700; margin:0; }

.sf-showroom-line{ margin:0; color:var(--sf-text); }
.sf-showroom-line a{ text-decoration:underline; text-underline-offset:2px; }

.sf-showroom-actions{ display:flex; gap:8px; margin-top:2px; }
.sf-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:10px; font-weight:700; text-decoration:none;
}
.sf-btn--accent{ background:var(--sf-accent); color:#111; border:1px solid color-mix(in srgb, var(--sf-accent), #000 15%); }
.sf-btn--accent:hover{ filter:brightness(.96); }
.sf-btn--ghost{ background:#fff; color:#111; border:1px solid var(--sf-border); }
.sf-btn--ghost:hover{ filter:brightness(.98); }
/* ===== SofaMix — Accordion & Table (dinamic) ===== */
.sf-after{ gap: 3px !important; } /* 3px între toate blocurile de după iframe */

.sf-acc{
  border: 1px solid var(--sf-border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.sf-acc + .sf-acc{ margin-top: 3px; }

.sf-acc__summary{
  list-style: none; /* Firefox */
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
}
.sf-acc__summary::-webkit-details-marker{ display:none; }

.sf-acc__title{ font-size: 15px; line-height: 1.2; }
.sf-acc__chev{ transition: transform .2s ease; }
.sf-acc[open] .sf-acc__chev{ transform: rotate(180deg); }

.sf-acc__panel{ padding: 0 12px 10px 12px; }

.sf-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.sf-table__row + .sf-table__row td,
.sf-table__row + .sf-table__row th{ border-top: 1px dashed var(--sf-border); }

.sf-table__th{
  width: 40%;
  text-align: left;
  padding: 8px 8px 8px 0;
  color: var(--sf-muted);
  vertical-align: top;
  font-weight: 600;
}
.sf-table__td{
  width: 60%;
  text-align: left;
  padding: 8px 0 8px 8px;
  color: var(--sf-text);
  vertical-align: top;
}

@media (max-width: 767px){
  .sf-acc__summary{ padding: 8px 10px; }
  .sf-acc__title{ font-size: 14px; }
  .sf-acc__panel{ padding: 0 10px 8px 10px; }
  .sf-table__th, .sf-table__td{ padding-top: 6px; padding-bottom: 6px; }
}
/* Thumb: scoate border/outline vechi – un singur contur via ::after */
.sf-gallery .sf-thumb{
  position: relative !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Contur implicit (gri) – complet, pe toată marginea */
.sf-gallery .sf-thumb::after{
  content: "";
  position: absolute;
  inset: 0;
  border: 0.75px solid var(--sf-border);
  border-radius: inherit;
  pointer-events: none;
  box-sizing: border-box;
}

/* Selectat: doar conturul galben (fără alt outline) */
.sf-gallery .sf-thumb.is-active{
  outline: none !important;
  box-shadow: none !important;
}
.sf-gallery .sf-thumb.is-active::after{
  border: 2px solid #F5C537;
}
/* jos, fără border, restul rămâne */
.sf-gallery .sf-hero{
  border-bottom: 0 !important;           /* scoate linia dintre poză și thumbs */
  border-left: 1px solid var(--sf-border);
  border-right: 1px solid var(--sf-border);
  border-top: 1px solid var(--sf-border);
}