:root{
  --m3d-accent: var(--theme-palette-color-1, #2d6cdf);
}

/* container “invizibil” */
.m3d-bundle-ui{ margin: 14px 0; padding:0; border:0; background:transparent; }
.m3d-bundle-ui__title{ display:none; }

.m3d-bundle-ui__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* CARD */
.m3d-card{
  position:relative;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 0px;
  background:#fff;
  padding: 14px 16px 14px 54px; /* loc pentru radio */
  cursor:pointer;
  user-select:none;
}

.m3d-card:hover{ border-color: rgba(0,0,0,.22); }

/* selectat = border accent + outline subtil */
.m3d-card.is-selected{
  border-color: var(--m3d-accent);
  box-shadow: 0 0 0 2px rgba(0,0,0,.05);
}

/* radio circle stânga */
.m3d-card__radio{
  position:absolute;
  left: 16px;
  top: 16px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.25);
  background:#fff;
}

.m3d-card.is-selected .m3d-card__radio{
  border-color: var(--m3d-accent);
}

.m3d-card__radio::after{
  content:"";
  position:absolute;
  inset: 3px;
  border-radius:999px;
  background: var(--m3d-accent);
  opacity:0;
}

.m3d-card.is-selected .m3d-card__radio::after{ opacity:1; }

/* header (titlu + pret dreapta) */
.m3d-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

.m3d-card__name{
  font-weight: 900;
  font-size: 18px;
  line-height: 1.2;
  margin: 0;
}

.m3d-card__sub{
  margin-top: 2px;
  font-size: 13px;
  opacity: .78;
}

/* pret dreapta */
.m3d-card__price{
  text-align:right;
  white-space:nowrap;
}

.m3d-card__now{
  font-weight: 900;
  font-size: 18px;
  line-height: 1.2;
}

.m3d-card__was{
  margin-top: 2px;
  font-size: 12px;
  opacity: .55;
  text-decoration: line-through;
}

/* badge Recomandat sus pe mijloc (ca în poză) */
.m3d-badge{
  position:absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--m3d-accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

/* DETALII doar când e selectat */
.m3d-card__details{
  display:none;
  margin-top: 14px;
  border-top: 1px solid rgba(0,0,0,.10);
  padding-top: 12px;
}

.m3d-card.is-selected .m3d-card__details{ display:block; }

/* rând “chin mount + kit” */
.m3d-rows{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.m3d-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 0px;
  background: rgba(0,0,0,.02);
}

.m3d-row__left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width:0;
}

.m3d-thumb{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(0,0,0,.06);
  flex: 0 0 auto;
  overflow:hidden;
}

.m3d-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.m3d-row__title{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.m3d-row__price{
  font-weight: 900;
  font-size: 13px;
  white-space:nowrap;
}

/* plus între rânduri */
.m3d-plus{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  margin: -6px auto -6px;
  color: rgba(0,0,0,.55);
  font-weight: 900;
}

/* linia de mesaj (free shipping / extra discount) */
.m3d-note{
  margin-top: 12px;
  text-align:center;
  font-weight: 800;
  font-size: 13px;
  color: var(--m3d-accent);
}

/* ascundem WPC list */
.m3d-hide-woobt{
  position:absolute !important;
  left:-99999px !important;
  top:-99999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* ====== M3D polish: “ca în poză”, dar mai tight & premium ====== */

/* colțuri mai drepte */
.m3d-card{
  border-radius: 0px;
}

/* titlurile ca product title (fără bold, font & size similar) */
.m3d-card__name{
  font-weight: 400;
  font-size: 16px;
  line-height: 1.25;
  font-family: inherit; /* ia fontul temei */
}

/* radio și padding puțin mai “tight” */
.m3d-card{
  padding: 14px 16px 14px 52px;
}

/* păstrează “detaliile” mereu vizibile pentru bundle cards */
.m3d-card__details{
  display: block;
  margin-top: 12px;
  border-top: 1px solid rgba(0,0,0,.10);
  padding-top: 12px;
}

/* pentru “Only”, afișăm imaginea produsului (poza default, clickabilă) */
.m3d-card[data-mode="only"] .m3d-card__details{
  display:block;
}

/* când nu e selectat, fade subtil (ca la bundle) */
.m3d-card[data-mode="only"]:not(.is-selected) .m3d-card__details{
  opacity: .7;
}

/* ===== Only card: preview imagine produs ===== */
.m3d-only-media{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.m3d-only-media__link{
  position:relative;
  display:block;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  overflow:hidden;
  line-height:0;
  z-index:5;             /* click pe imagine = zoom, nu selectează cardul */
}

.m3d-only-media__link img{
  width:100%;
  height:auto;
  max-height:260px;
  object-fit:contain;    /* arată tot mount-ul + adezivul, fără crop */
  display:block;
  background:#fff;
}

.m3d-only-media__zoom{
  position:absolute;
  right:8px;
  bottom:8px;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:15px;
  line-height:1;
}

.m3d-only-media__cap{
  text-align:center;
  font-size:12.5px;
  font-weight:700;
  color:rgba(0,0,0,.65);
}

/* când nu e selectat, fade la partea de detalii ca să nu fie “țipător” */
.m3d-card[data-mode="bundle"]:not(.is-selected) .m3d-card__details{
  opacity: .55;
  filter: grayscale(.05);
}

/* card selectat: accent clar, dar fără rounded exagerat */
.m3d-card.is-selected{
  border-color: var(--m3d-accent);
  box-shadow: 0 0 0 1px var(--m3d-accent);
}

/* badge mai sus, centrat, și mai “flat” */
.m3d-badge{
  top: -12px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
}

/* ROWS: full width, centrate și “lipite” */
.m3d-rows{
  gap: 0;
}

/* rânduri mai înalte și colțuri mai drepte */
.m3d-row{
  padding: 14px 14px;
  border-radius: 0px;
  background: #fff;
}

/* lipire: primul și al doilea rând se ating (fără spațiu), iar border-ul dintre ele devine comun */
.m3d-row + .m3d-row{
  margin-top: -1px;          /* lipire pe border */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.m3d-row:first-child{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* aliniere corectă stânga/dreapta în cardul mare */
.m3d-row__title{
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* thumbnails reale: rezervăm spațiu + aspect ok */
.m3d-thumb{
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: rgba(0,0,0,.05);
  flex: 0 0 auto;
}
.m3d-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* semnul + pe linia de lipire */
.m3d-plus{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  color: rgba(0,0,0,.55);
  margin: -14px auto -14px;  /* îl așezăm peste lipire */
  position: relative;
  z-index: 3;
}

/* mic highlight pe note */
.m3d-note{
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
}

/* (opțional) ascunde total/summary WPC dacă nu-l mai vrei sub carduri */
.woobt-summary{
   display:none; 
}

/* link bundle în cardul intern */
.m3d-row__link{
  font-weight: 800;
  font-size: 13px;
  color: var(--m3d-accent);
  text-decoration: none;
  line-height: 1.2;
}

.m3d-row__link:hover{
  text-decoration: underline;
}

/* IMPORTANT: click pe link să nu selecteze cardul mare */
.m3d-row__link{
  position: relative;
  z-index: 5;
}

/* ===== Responsive hardening (mobile) ===== */

/* container să nu mai poată depăși viewport-ul */
.m3d-bundle-ui,
.m3d-bundle-ui__grid,
.m3d-card{
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* card: padding mai mic pe mobil */
@media (max-width: 600px){
  .m3d-card{
    padding: 12px 12px 12px 46px;
  }
  .m3d-card__radio{
    left: 12px;
    top: 12px;
  }
}

/* top row: permite wrap */
.m3d-card__top{
  flex-wrap: wrap;
}

/* coloana cu preț să nu împingă în afara ecranului */
.m3d-card__price{
  flex: 0 0 auto;
  margin-left: auto;
  max-width: 45%;
}

/* IMPORTANT: permite textului să se micșoreze în flex (altfel overflow) */
.m3d-row__left,
.m3d-card__top > div:first-child{
  min-width: 0;
}

/* rânduri interne: permite wrap și nu forța nowrap pe mobil */
.m3d-row{
  flex-wrap: wrap;
}

/* titlu rând: pe mobil, lasă-l să se rupă pe 2 linii */
@media (max-width: 600px){
  .m3d-row__title,
  .m3d-row__link{
    white-space: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    /* standard (pentru warning + viitor) */
    line-clamp: 2;
  }
}

/* prețul din rând: îl ținem pe dreapta dar fără overflow */
.m3d-row__price{
  margin-left: auto;
  white-space: nowrap;
}

/* thumbnails să nu lărgească rândul */
.m3d-thumb{
  flex: 0 0 40px;
}

/* dacă ceva tot împinge, forțează overflow-x off doar în zona UI */
.m3d-bundle-ui{
  overflow-x: hidden;
}

/* =========================================================
   M3D – Corner ribbon badge (diagonal, top-right)
   Uses existing .m3d-badge element (no HTML changes)
   ========================================================= */

/* make sure card is positioning context */
.m3d-card{ position: relative; overflow: hidden; }

/* base ribbon */
.m3d-badge{
  /* defaults */
  --rb: #c5a47e;          /* ribbon color */
  --rb-shadow: rgba(0,0,0,.18);
  --rb-text: #ffffff;

  position: absolute;
  top: 14px;
  right: -46px;           /* pushes ribbon to corner */
  left: auto;
  transform: rotate(45deg);
  z-index: 8;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 140px;           /* ribbon length */
  padding: 7px 0;         /* thickness */

  border-radius: 0;       /* ribbon, not pill */
  border: none !important;
  outline: none !important;

  background: linear-gradient(180deg, color-mix(in srgb, var(--rb) 88%, #fff), var(--rb));
  color: var(--rb-text);

  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;

  box-shadow: 0 8px 16px var(--rb-shadow);
}

/* remove old pseudo effects from previous badge styles */
.m3d-badge::before,
.m3d-badge::after{
  content: none !important;
}

/* Variants */
.m3d-badge--premium{
  --rb: #c5a47e;          /* gold/beige like screenshot */
  --rb-text: #ffffff;
  --rb-shadow: rgba(0,0,0,.20);
}

/* Essential / Recommended = premium green */
.m3d-badge--recommended{
  --rb: #1f9d73;          /* deep green */
  --rb-text: #ffffff;
  --rb-shadow: rgba(0,0,0,.18);
}

/* Ultimate / Complet = graphite */
.m3d-badge--ultimate{
  --rb: #2f3440;
  --rb-text: #ffffff;
  --rb-shadow: rgba(0,0,0,.24);
}

/* Mobile: shorten ribbon */
@media (max-width: 600px){
  .m3d-badge{
    top: 12px;
    right: -52px;
    width: 128px;
    font-size: 10px;
    letter-spacing: 1.6px;
    padding: 6px 0;
  }
}

/* =========================================================
   TWEAKS – ribbon spacing + price + card accent
   ========================================================= */

/* 1) Ribbon: mai interior + mai lat + text mai mic */
.m3d-badge{
  top: 25px;
  right: -41px;         /* era -46px: aduce ribbonul mai in interior */
  width: 160px;         /* mai mult loc pentru text */
  padding: 7px 0;
  font-size: 10px;      /* mai mic, intra mai mult text */
  letter-spacing: 1.6px;
}

/* Mobile: păstrează proporții */
@media (max-width: 600px){
  .m3d-badge{
    top: 21px;
    right: -40px;
    width: 148px;
    font-size: 9.5px;
    letter-spacing: 1.3px;
  }
}

/* 2) Price: adaugăm padding-right sus ca să nu intre sub ribbon */
.m3d-card__top{
  padding-right: 56px;  /* creează “safe area” pentru ribbon */
}

/* Opțional: prețul să stea mai jos/într-un chip (mai profi) */
.m3d-card__price{
  align-self: flex-start;
  margin-top: 2px;
}

/* 3) Card accent: border + glow subtil în culoarea ribbon-ului */
.m3d-card[data-mode="bundle"]{
  --accent: rgba(197,164,126,.40); /* fallback */
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 42%),
    #fff;
  position: relative;
}

/* linie verticală accent pe stânga */
.m3d-card[data-mode="bundle"]::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
  opacity: .75;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

/* 4) Setăm accent per badge variant (match cu ribbon) */
.m3d-card:has(.m3d-badge--recommended){ --accent: rgba(31,157,115,.55); }
.m3d-card:has(.m3d-badge--premium){ --accent: rgba(197,164,126,.65); }
.m3d-card:has(.m3d-badge--ultimate){ --accent: rgba(47,52,64,.55); }

/* Fallback pt browsere fără :has() (optional):
   Poți ignora dacă nu te interesează Safari vechi.
   Dacă vrei, îți dau alternativă JS/markup. */

/* =========================================================
   Camera selector (chips) — alegere cameră + evidențiere kituri
   ========================================================= */
.m3d-bundle-selector{
  margin: 0 0 14px;
}

.m3d-bundle-selector__label{
  font-weight: 800;
  font-size: 14px;
  margin: 0 0 8px;
}

.m3d-cam-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.m3d-cam-chip{
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,.20);
  background: #fff;
  color: inherit;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  padding: 9px 16px;
  border-radius: 999px;
  transition: border-color .15s ease, background-color .15s ease,
              color .15s ease, box-shadow .15s ease;
}

.m3d-cam-chip:hover{
  border-color: var(--m3d-accent);
}

.m3d-cam-chip.is-active{
  border-color: var(--m3d-accent);
  background: var(--m3d-accent);
  color: #fff;
  box-shadow: 0 0 0 1px var(--m3d-accent);
}

/* card incompatibil cu camera aleasă: estompat, dar tot clickabil */
.m3d-card.is-dimmed{
  opacity: .45;
  filter: grayscale(.4);
}
.m3d-card.is-dimmed:hover{
  opacity: .75;
}

/* card compatibil: inel subtil în accent */
.m3d-card.is-compat{
  box-shadow: 0 0 0 2px var(--m3d-accent), 0 10px 22px rgba(0,0,0,.06);
}