:root {
      --bg: #0b0c10;
      --panel: #12131a;
      --ink: #e9ecf1;
      --muted: #9aa3b2;
      --stroke: #262a3c;
      --accent: #ffb027
    }

    * {
      box-sizing: border-box
    }


    .w {
      max-width: 1060px;
      margin: 0 auto;
      padding: 20px 14px 80px
    }

    .m {
      color: var(--muted)
    }

    .p {
      height: 12px;
      border-radius: 999px;
      background: #e6e6e6;
      margin: 10px 0 18px;
      position: relative;
      overflow: hidden
    }

    .p b {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, #f5a524, #ffc14d);
      transform-origin: left;
      transform: scaleX(var(--x, 0))
    }

    .g {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
      gap: 10px
    }

    .c {
      position: relative;
      /* box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; */
      border-radius: 12px;
      padding: 14px;
      min-height: 110px
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 8px 0
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 16px!important;
      background: #161826;
      border: 1px solid #2a2d3a;
      border-radius: 10px!important;
      padding: 8px 12px;
      cursor: pointer;
      font-weight: 500;
      /* box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; */
    }



#r-details .two {
  display: grid;
  grid-template-columns: minmax(260px, clamp(28vw, 34vw, 520px)) 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}


#r-details .hero {
  /* fixează lățimea coloanei stânga la grid, dar lase eroul să ocupe toată lățimea */
  width: 100%;
  justify-self: start;  /* sau center dacă vrei centrat */
}

#r-details .hero #hero {
  width: 100%;
  /* raport de aspect tip „telefon”; ajustează dacă vrei mai lat/îngust */
  aspect-ratio: 1;
  height: auto;                 /* lăsăm aspect-ratio să dicteze înălțimea */
  border-radius: 24px;

  /* imaginea setată din JS */
  background-size: contain;     /* păstrează proporțiile telefonului */
  background-repeat: no-repeat;
  background-position: center;  /* încearcă 'left center' dacă vrei compoziție ca pe seria9.ro */
}

/* —— Responsive pe ecrane mici: telefonul sus, mare pe toată lățimea —— */
@media (max-width: 900px) {
  #r-details .two {
    grid-template-columns: 1fr;
  }
  #r-details .hero {
    justify-self: center;
    max-width: 560px;           /* ca să nu devină prea mare pe mobile mari */
    width: 100%;
  }
}

    .sum {
      border: 1px dashed #2d3149;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      gap: 14px;
      flex-wrap: wrap
    }

    .btn {
      background: #181a26;
      border: 1px solid #30354a;
      border-radius: 10px;
      padding: 10px 14px!important;
      font-weight: 800;
      font-size: 16px;
      color: #fff;
      cursor: pointer
    }

    .pri {
      background: linear-gradient(90deg, #ffb027, #ff9b31);
      border-color: #f39a1a;
      color: #111
    }

    .btn[disabled] {
      opacity: .55;
      cursor: not-allowed
    }

    .foot {
      position: sticky;
      bottom: 0;
      background: #0b0c10cc;
      backdrop-filter: blur(6px);
      border-top: 1px solid #20243a
    }

    .foot>.in {
      max-width: 1060px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 14px
    }

    /* backdrop full-screen pentru toast */
.t-backdrop {
  position: fixed;
  inset: 0;
  background: #0b0c10;        /* nuanță închisă */
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 998;               /* sub toast, peste site */
}

.t-backdrop.sh { 
  opacity: .36;               /* 36% ~ între 30–40% */
  pointer-events: auto;       /* primește click-urile, blochează restul */
}

.t {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: #ffffff;
  border: 1px solid #2e344a;
  padding: 14px 16px 18px;
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
  opacity: 0;
  pointer-events: none;       /* activăm doar când .sh */
  transition: transform .2s ease, opacity .2s ease;
  max-width: 560px;
  width: min(92vw, 560px);
  text-align: left;
  z-index: 999;               /* peste backdrop */
}

.t.sh {
  opacity: 1;
  transform: translate(-50%,-52%);
  pointer-events: auto;       /* click pe X etc. */
}

.t .txt {
  line-height: 1.45;
}

/* progres bar sub text */
.t .bar {
  height: 4px;
  background: linear-gradient(90deg, #ffb027, #ff7b31);
  border-radius: 999px;
  margin-top: 10px;
  transform-origin: left;
}

/* butonul X */
.t .x {
  position: absolute;
  top: 0px;
  right: 10px;
  cursor: pointer;
  opacity: .85;
  font-size: 20px;
  line-height: 1;
}
.t .x:hover { opacity: 1; }

/* când toast-ul e deschis, blochează scroll-ul body */
body.no-scroll {
  overflow: hidden;
}

    /* MADE BY ME  */

    /* ascunde vizual dar lasă în DOM pentru screen readers/SEO */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* card-ul — doar imagine cu border */
#r-brand  {
  position: relative;
}

#r-brand .cta-sell{
  display: block;
  border: 1px solid #e5e7eb;          /* border subțire */
  border-radius: 12px;
  padding: 12px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  width: 100%;
  text-decoration: none;
  position: relative;
   background: #fff !important;          /* card alb curat */
  background-image: none !important;     /* oprește gradientele globale, dacă există */
}

#r-brand .cta-sell:hover:not([disabled]):not([aria-disabled="true"]) {
  transform: translateY(-2px);
  border-color: #d1d5db;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

#r-brand .cta-sell:hover,
#r-brand .cta-sell:focus-visible {
  background: #fff !important;           /* rămâne alb și pe hover/focus */
  background-image: none !important;
  border-color: #d1d5db;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  transform: translateY(-2px);
}

#r-brand .cta-sell img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: contain;
}

/* stare "în curând" / disabled — păstrăm .cta dar blocăm acțiunea */
#r-brand .cta-sell[disabled],
#r-brand .cta-sell[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .6;
  pointer-events: none;
}

#r-brand h2{
  font-size: 2rem;
  margin: 0;
}

/* ===== Models: card imagine + titlu ===== */
#r-models .g {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

#r-models .c {
  padding: 12px;
  /* background: var(--panel); */
  /* border: 1px solid var(--stroke); */
  border-radius: 12px;
  text-align: center;
}

/* suprascrie stilul global al .cta (care era absolut) doar aici */
#r-models .c .cta-sell {
  position: static;
  display: block;
  width: 100%;
  text-decoration: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

#r-models .c .cta-sell:hover {
  transform: translateY(-2px);
  border-color: #d1d5db;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

#r-models .c .cta-sell img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: contain;
}

/* titlul sub poză */
#r-models .model-title {
  font-size: clamp(1rem, .5vw + 1rem, 1rem);
  line-height: 1.25;
  margin: 10px 0 0;
  color: black;
  font-weight: 500;
}


/* STILING CONDITIE TELEFON  */

/* ===== Stare: hero cu aceeași mărime/aspect ca în Detalii ===== */
#r-cond .hero {
  width: 100%;
  max-width: 520px;               /* ajustează după preferință */
  aspect-ratio:1;            /* raport „telefon” */
  border-radius: 24px;
  background: linear-gradient(180deg,#ff9f1a,#ff7b00); /* fallback */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* layout pe două coloane ca în Detalii (dacă nu îl ai deja) */
#r-cond .two {
  display: grid;
  grid-template-columns: minmax(260px, clamp(28vw, 34vw, 520px)) 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
@media (max-width: 900px) {
  #r-cond .two { grid-template-columns: 1fr; }
  #r-cond .hero { justify-self: center; width: 100%; }
}

.chips-head { margin: 18px 0 8px; }
.chips-head .chips-title {
  margin-inline: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1239;
  font-family: Poppins;
  font-size: 18px;
}
.chips-head .chips-subtitle {
  margin: 4px 0 10px 0;
  font-size: 0.85rem;
  color: var(--muted, #6b7280);
}


/* LIQUID SECTION STYLING */

#r-liquid .two {
  display: grid;
  grid-template-columns: minmax(260px, clamp(28vw, 34vw, 520px)) 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

#r-liquid .hero {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  border-radius: 24px;
  background: linear-gradient(180deg,#ff9f1a,#ff7b00); /* fallback vizual */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@media (max-width: 900px) {
  #r-liquid .two { grid-template-columns: 1fr; }
  #r-liquid .hero { justify-self: center; }
}

/* BATTERY SECTION STYLING  */

#r-batt .two {
  display: grid;
  grid-template-columns: minmax(260px, clamp(28vw, 34vw, 520px)) 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

#r-batt .hero {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;          /* ajustabil după compoziția imaginii */
  border-radius: 24px;
  background: linear-gradient(180deg,#ff9f1a,#ff7b00); /* fallback */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@media (max-width: 900px) {
  #r-batt .two { grid-template-columns: 1fr; }
  #r-batt .hero { justify-self: center; }
}

/* SCREEN STILYNG */

#r-screen .hero{
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  border-radius: 24px;
  background: linear-gradient(180deg,#ff9f1a,#ff7b00); /* fallback */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#r-screen .two{
  display:grid;
  grid-template-columns: minmax(260px, clamp(28vw, 34vw, 520px)) 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items:start;
}

/* CASE STYLE */

#r-case .hero{
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  border-radius: 24px;
  background: linear-gradient(180deg,#ff9f1a,#ff7b00); /* fallback */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#r-case .two{
  display:grid;
  grid-template-columns: minmax(260px, clamp(28vw, 34vw, 520px)) 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items:start;
}


#r-def .two{
  display:grid;
  grid-template-columns: minmax(260px, clamp(28vw, 34vw, 520px)) 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items:start;
}
#r-def .hero{
  width:100%;
  max-width:520px;
  aspect-ratio: 1;          /* ajustează dacă vrei alt raport */
  border-radius:24px;
  background: linear-gradient(180deg,#ff9f1a,#ff7b00); /* fallback dacă lipsesc imaginile */
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
@media (max-width:900px){
  #r-def .two{ grid-template-columns:1fr; }
  #r-def .hero{ justify-self:center; }
}

#r-oth .two, #r-case .two{
  display:grid;
  grid-template-columns: minmax(260px, clamp(28vw, 34vw, 520px)) 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items:start;
}
#r-oth .hero{
  width:100%;
  max-width:520px;
  aspect-ratio: 1;              /* raport „telefon” */
  border-radius:24px;
  background: linear-gradient(180deg,#ff9f1a,#ff7b00); /* fallback */
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
@media (max-width:900px){
  #r-oth .two{ grid-template-columns:1fr; }
  #r-case .two{ grid-template-columns:1fr; }
  #r-oth .hero{ justify-self:center; }
}


/* Doar în secțiunea Ecran (#r-screen) */
#r-screen .chips, #r-case .chips, #r-def .chips, #r-oth .chips {
  display: flex;              /* păstrăm flex */
  flex-direction: column;     /* vertical */
  flex-wrap: nowrap;          /* o singură coloană */
  gap: 15px!important;        /* spațiu mai mare între pastile */
  align-items: stretch;       /* pastilele pe full width */
}

#r-screen .chips .pill, #r-case .chips .pill, #r-def .chips .pill, #r-oth .chips .pill {
  display: flex;              /* era inline-flex global */
  flex-direction: column;     /* conținutul pe verticală (ok, aici e doar text) */
  width: 100%;
  text-align: left;;
}

@media (max-width:900px){
  #r-screen .two{ grid-template-columns:1fr; }
  #r-screen .hero{ justify-self:center; }
}

/* stare activă pentru pastile */
.pill[act="1"] {
  background: rgb(241, 241, 241);           /* mai închis decât #161826 */
  /* border-color: #3b3f54; */
  /* color: #fff; */
  /* box-shadow: 0 0 0 1px rgba(255,176,39,.25) inset;  */
}
.pill:hover { border-color: #3b3f54; }

/* focus tastatură accesibil */
.pill:focus-visible {
  outline: 2px solid #ffb027;
  outline-offset: 2px;
  border-color: #ffb027;
}

/* PAGINA DE PLATA  */

/* === Payment cards === */
#r-pay { max-width: 980px; margin: 0 auto; }

.pay-list { display: grid; gap: 20px; }

.pay-opt {
  border: 1px solid #e4e6ee;
  border-radius: 12px;
  padding: 18px;
  background: #fff;
  cursor: pointer;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.pay-opt:hover { box-shadow: 0 10px 24px rgba(0,0,0,.06); border-color: #d7d9e6; }
.pay-active { border-color: #00000075; }

.pay-head { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; margin-bottom: 8px; }
.pay-radio {
  width: 18px; height: 18px; border-radius: 999px;
  border: 2px solid #c8cbe0; position: relative;
}
.pay-active .pay-radio { border-color: #3451ff; }
.pay-active .pay-radio::after {
  content:""; position:absolute; inset:3px; border-radius:999px; background:#3451ff;
}

.pay-title { font-weight: 700; color: #2a2f45; }
.pay-badge {
  font-weight: 700; padding: 4px 10px; border-radius: 8px;
  background: #ffb027; color: #12131a;
}
.pay-badge.alt {
  background: #6c6580; color:#fff;
}

.pay-bul { margin: 8px 0 0 32px; }
.pay-bul li { list-style: disc; margin: 4px 0; color:#495066; }

.pay-note { font-size: 12px; color:#6c7286; margin-top: 6px; }