/* ============================================================
   Nèbys Jewellery — stylesheet
   1. Tokens        5. Butoane / forme
   2. Reset & bază  6. Secțiuni
   3. Header        7. Produse
   4. Hero          8. Coș, căutare, footer, responsive
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --blush:      #FFFFFF;   /* fundalul paginii — alb curat */
  --blush-2:    #FBF6F5;   /* secțiuni alternative, abia colorate */
  --pink-soft:  #FAEDEE;   /* accent moale (panouri, chipsuri) */
  --pink:       #F2CBD1;
  --pink-deep:  #EBB2BC;
  --rose:       #C4788B;
  --rose-deep:  #A45A6E;
  --gold:       #C0A062;
  --gold-light: #DCC190;
  --ink:        #4A3238;
  --ink-soft:   #6E545B;
  --muted:      #9A8288;
  --line:       #ECE4E3;   /* linii fine, aproape gri */
  --white:      #FBF6F5;   /* „sec--tint" — nuanța caldă */

  --serif:  'Bodoni Moda', 'Didot', Georgia, serif;
  --script: 'Parisienne', 'Brush Script MT', cursive;
  --sans:   'Manrope', 'Segoe UI', system-ui, sans-serif;

  --wrap: 1240px;
  --r: 6px;
  --r-lg: 14px;
  --shadow: 0 14px 34px -22px rgba(90, 60, 66, .22);
  --shadow-lg: 0 28px 60px -30px rgba(90, 60, 66, .32);
  --t: .35s cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. RESET & BAZĂ ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--blush); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.65; font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; line-height:1.15; margin:0; letter-spacing:.01em; }
h1{ font-size:clamp(2.5rem,5.2vw,4.1rem); letter-spacing:-.015em; line-height:1.08; }
h2{ font-size:clamp(1.9rem,3.4vw,2.8rem); letter-spacing:-.01em; line-height:1.14; }
h3{ font-size:1.45rem; }
p{ margin:0 0 1rem; }
p:last-child{ margin-bottom:0; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:28px; }
.eyebrow{
  font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--rose); font-weight:400; margin:0 0 .9rem;
}
.lead{ color:var(--ink-soft); font-size:1.06rem; }
.center{ text-align:center; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* apariție la scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- 3. HEADER ---------- */
.announce{
  background:var(--rose); color:#fff; text-align:center;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; padding:.7rem 1rem;
}
.announce span{ opacity:.85; margin-inline:.5rem; }
.announce em{ font-style:normal; }

.hdr{
  position:sticky; top:0; z-index:60; background:var(--pink-soft);
  border-bottom:1px solid rgba(196,120,139,.14); transition:box-shadow var(--t);
}
.hdr.scrolled{ box-shadow:0 10px 30px -22px rgba(120,70,82,.6); }
.hdr.above{ z-index:100; }
.hdr__inner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1rem; padding:.9rem 28px; max-width:var(--wrap); margin-inline:auto;
}
.nav{ display:flex; gap:2.2rem; align-items:center; }
.nav a{
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
  position:relative; padding:.3rem 0; transition:color var(--t);
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--rose); transition:width var(--t);
}
.nav a:hover{ color:var(--rose); }
.nav a:hover::after, .nav a.active::after{ width:100%; }
.nav a.active{ color:var(--rose); }

.logo{ display:block; }
.logo svg{ height:52px; width:auto; }
.hdr__actions{ display:flex; gap:1.1rem; justify-content:flex-end; align-items:center; }
.icon-btn{
  width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  color:var(--ink); transition:background var(--t), color var(--t); position:relative;
  /* fără asta, într-un rând flex butonul se strânge sub 40px și
     iconița iese turtită — se vedea la „×" din panoul de căutare */
  flex:0 0 auto;
}
.icon-btn:hover{ background:rgba(255,255,255,.55); color:var(--rose); }
.icon-btn svg{ width:20px; height:20px; }
.cart-count{
  position:absolute; top:2px; right:0; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--rose); color:#fff; font-size:.62rem;
  display:grid; place-items:center; font-weight:500; transform:scale(0); transition:transform var(--t);
}
.cart-count.on{ transform:scale(1); }
.burger, #navClose{ display:none; }

/* ---------- 5. BUTOANE & FORME ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; justify-content:center;
  padding:.95rem 2rem; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  border-radius:var(--r); transition:all var(--t); border:1px solid transparent; text-align:center;
}
.btn--solid{ background:var(--rose); color:#fff; }
.btn--solid:hover{ background:var(--rose-deep); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn--ghost{ border-color:var(--rose); color:var(--rose); }
.btn--ghost:hover{ background:var(--rose); color:#fff; }
.btn--gold{ background:var(--gold); color:#fff; }
.btn--gold:hover{ background:#AC8D51; }
.btn--wide{ width:100%; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

.field{ display:block; margin-bottom:1rem; }
.field span{
  display:block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.4rem;
}
.field input,.field select,.field textarea{
  width:100%; padding:.8rem 1rem; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; transition:border-color var(--t), box-shadow var(--t);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--rose); box-shadow:0 0 0 3px rgba(196,120,139,.13);
}
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }

/* ---------- 6. SECȚIUNI ---------- */
section{ padding:clamp(3.5rem,7vw,6rem) 0; }
.section-head{ max-width:56ch; margin:0 auto clamp(2rem,4vw,3.2rem); text-align:center; }
.section-head p{ color:var(--ink-soft); }

/* încredere */
.trust{ background:var(--white); padding:2.2rem 0; }
.trust__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.trust__i svg{ width:26px; height:26px; margin:0 auto .7rem; color:var(--gold); }
.trust__i strong{ display:block; font-weight:400; font-size:.9rem; letter-spacing:.04em; }
.trust__i small{ color:var(--muted); font-size:.78rem; }

/* poveste */
.story{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.story svg,.story img{ border-radius:var(--r-lg); box-shadow:var(--shadow); width:100%; aspect-ratio:4/5; object-fit:cover; }
.story__list{ list-style:none; padding:0; margin:1.6rem 0 2rem; }
.story__list li{ display:flex; gap:.8rem; margin-bottom:.9rem; color:var(--ink-soft); font-size:.94rem; }
.story__list svg{ width:18px; height:18px; flex:0 0 18px; color:var(--gold); box-shadow:none; margin-top:.28rem; }

/* recenzii — clasa se numește `testi`, nu `rev`, ca să nu se
   lovească de blocul `.rev` din pagina de finalizare a comenzii */
.testi__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.testi{
  background:#fff; padding:2rem 1.8rem; border-radius:var(--r-lg);
  box-shadow:var(--shadow); border:1px solid var(--line);
  display:flex; flex-direction:column;
}
.stars{ color:var(--gold); letter-spacing:.18em; font-size:.85rem; margin-bottom:.9rem; }
.testi p{ font-family:var(--serif); font-size:1.18rem; line-height:1.5; color:var(--ink); margin-bottom:1.1rem; }
.testi__by{ margin-top:auto; display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.testi cite{ font-style:normal; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.testi__for{ font-size:.72rem; color:var(--rose); }
.testi__for:hover{ color:var(--rose-deep); }

/* newsletter */
.news{ background:var(--pink-soft); }
.news form{ display:flex; gap:.7rem; max-width:480px; margin:1.6rem auto 0; }
.news input{ flex:1; padding:.95rem 1.2rem; border:1px solid rgba(196,120,139,.3); border-radius:var(--r); background:#fff; }
.news input:focus{ outline:0; border-color:var(--rose); }
.news small{ display:block; margin-top:.9rem; color:var(--muted); font-size:.75rem; }

/* ---------- 7. PRODUSE ---------- */
.price{ font-family:var(--serif); font-size:1.2rem; color:var(--rose); }
.price s{ color:var(--muted); font-size:.95rem; margin-left:.5rem; }

/* filtre magazin */
.shop{ display:grid; grid-template-columns:230px 1fr; gap:3rem; align-items:start; }
.filters h4{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .9rem;
}
.filters ul{ list-style:none; padding:0; margin:0 0 2.2rem; }
.filters li button{
  display:block; width:100%; text-align:left; padding:.42rem 0; font-size:.92rem;
  color:var(--ink-soft); transition:color var(--t), padding var(--t);
}
.filters li button:hover{ color:var(--rose); padding-left:.4rem; }
.filters li button.on{ color:var(--rose); }
.filters li button.on::before{ content:'—'; margin-right:.4rem; }
.shop__bar{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  margin-bottom:1.8rem; padding-bottom:1rem; border-bottom:1px solid var(--line);
}
.shop__bar small{ color:var(--muted); font-size:.82rem; }
.shop__bar select{ border:1px solid var(--line); border-radius:var(--r); padding:.5rem .8rem; background:#fff; font-size:.85rem; }
.empty{ text-align:center; padding:4rem 0; color:var(--muted); }

/* pagină produs */
.pdp{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.crumbs{ font-size:.75rem; color:var(--muted); padding:1.4rem 0 0; }
.crumbs a:hover{ color:var(--rose); }
.gallery__main{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); background:#fff; }
.gallery__main svg,.gallery__main img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.gallery__thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; margin-top:.6rem; }
.gallery__thumbs button{ border-radius:var(--r); overflow:hidden; border:1px solid transparent; transition:border-color var(--t); }
.gallery__thumbs button.on{ border-color:var(--rose); }
.pdp__info h1{ font-size:clamp(2rem,3.4vw,2.9rem); margin-bottom:.6rem; }
.pdp__meta{ display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem; font-size:.82rem; color:var(--muted); }
.pdp__price{ font-family:var(--serif); font-size:2rem; color:var(--rose); margin-bottom:1.4rem; }
.pdp__price s{ font-size:1.2rem; color:var(--muted); margin-left:.6rem; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.qty button{ width:42px; height:46px; font-size:1.1rem; color:var(--ink-soft); }
.qty button:hover{ color:var(--rose); }
.qty span{ width:38px; text-align:center; }
.pdp__buy{ display:flex; gap:.8rem; margin:1.4rem 0; }
.pdp__buy .btn{ flex:1; }
.stock{ font-size:.82rem; color:var(--gold); margin-bottom:1.4rem; }
details.acc{ border-top:1px solid var(--line); }
details.acc:last-of-type{ border-bottom:1px solid var(--line); }
details.acc summary{
  list-style:none; cursor:pointer; padding:1.1rem 0; display:flex; justify-content:space-between;
  align-items:center; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
}
details.acc summary::-webkit-details-marker{ display:none; }
details.acc summary::after{ content:'+'; color:var(--rose); font-size:1.1rem; }
details.acc[open] summary::after{ content:'–'; }
details.acc .acc__body{ padding-bottom:1.2rem; color:var(--ink-soft); font-size:.94rem; }
details.acc ul{ margin:0; padding-left:1.1rem; }

/* ---------- 8. COȘ / CĂUTARE / FOOTER ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(74,50,56,.4); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity var(--t); z-index:80;
}
.overlay.on{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(430px,100%); background:var(--blush);
  z-index:90; display:flex; flex-direction:column; transform:translateX(100%);
  transition:transform var(--t); box-shadow:var(--shadow-lg);
}
.drawer.on{ transform:none; }
.drawer__head{
  display:flex; justify-content:space-between; align-items:center;
  padding:1.3rem 1.6rem; border-bottom:1px solid var(--line);
}
.drawer__head h3{ font-size:1.3rem; }
.drawer__body{ flex:1; overflow-y:auto; padding:1.4rem 1.6rem; }
.drawer__foot{ padding:1.3rem 1.6rem; border-top:1px solid var(--line); background:#fff; }
.ship-bar{ height:4px; background:var(--pink); border-radius:2px; overflow:hidden; margin:.6rem 0 1.2rem; }
.ship-bar i{ display:block; height:100%; background:var(--gold); width:0; transition:width .5s ease; }
.citem{ display:grid; grid-template-columns:78px 1fr auto; gap:.9rem; padding:.9rem 0; border-bottom:1px solid var(--line); }
.citem svg,.citem img{ border-radius:var(--r); width:78px; aspect-ratio:1; object-fit:cover; }
.citem h4{ font-family:var(--serif); font-size:1.05rem; margin:0 0 .15rem; font-weight:400; }
.citem small{ display:block; color:var(--muted); font-size:.76rem; }
.citem .qty{ margin-top:.4rem; transform:scale(.82); transform-origin:left; }
.citem__x{ color:var(--muted); font-size:1.1rem; align-self:start; }
.citem__x:hover{ color:var(--rose); }
.totals{ display:flex; justify-content:space-between; margin-bottom:.4rem; font-size:.9rem; color:var(--ink-soft); }
.totals.big{ font-family:var(--serif); font-size:1.35rem; color:var(--ink); margin:.8rem 0 1.1rem; }

.search{
  position:fixed; top:0; left:0; right:0; background:var(--blush); z-index:90;
  transform:translateY(-100%); transition:transform var(--t); box-shadow:var(--shadow-lg);
  max-height:88vh; overflow-y:auto;
}
.search.on{ transform:none; }
.search__in{ display:flex; gap:1rem; align-items:center; padding:2rem 0 1.2rem; }
.search__in input{
  flex:1; border:0; border-bottom:1px solid var(--line); background:none; padding:.7rem 0;
  font-family:var(--serif); font-size:clamp(1.4rem,3vw,2.2rem);
}
.search__in input:focus{ outline:0; border-color:var(--rose); }
.search__res{ padding-bottom:2.5rem; }

.toast{
  position:fixed; bottom:26px; left:50%; transform:translate(-50%,calc(100% + 40px)); z-index:120;
  background:var(--ink); color:#fff; padding:.9rem 1.5rem; border-radius:100px;
  font-size:.8rem; letter-spacing:.05em; transition:transform var(--t); box-shadow:var(--shadow-lg);
}
.toast.on{ transform:translate(-50%,0); }

.ftr{ background:var(--pink-soft); padding:clamp(3rem,5vw,4.5rem) 0 0; }
.ftr__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; }
.ftr h4{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  margin:0 0 1.1rem; color:var(--ink);
}
.ftr ul{ list-style:none; padding:0; margin:0; }
.ftr li{ margin-bottom:.6rem; }
.ftr a{ font-size:.9rem; color:var(--ink-soft); transition:color var(--t); }
.ftr a:hover{ color:var(--rose); }
.ftr p{ font-size:.9rem; color:var(--ink-soft); max-width:32ch; }
.ftr__social{ display:flex; gap:.7rem; margin-top:1.1rem; }
.ftr__social a{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.6); transition:background var(--t), color var(--t);
}
.ftr__social a:hover{ background:var(--rose); color:#fff; }
.ftr__social svg{ width:18px; height:18px; }
.ftr__bottom{
  margin-top:3rem; border-top:1px solid rgba(196,120,139,.2); padding:1.3rem 0;
  display:flex; justify-content:space-between; gap:1rem; font-size:.76rem; color:var(--muted);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .ftr__grid{ grid-template-columns:1fr 1fr; }
  .shop{ grid-template-columns:1fr; gap:1.6rem; }
  .filters ul{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem; }
  .filters li button{ padding:.45rem .95rem; border:1px solid var(--line); border-radius:100px; background:#fff; }
  .filters li button.on{ background:var(--rose); color:#fff; border-color:var(--rose); }
  .filters li button.on::before{ content:''; margin:0; }
  .filters h4{ display:none; }
}
@media (max-width:860px){
  .hdr__inner{ grid-template-columns:auto 1fr auto; padding-inline:20px; }
  .burger{ display:grid; }
  #navClose{ display:grid; position:absolute; top:1.2rem; right:1.2rem; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,86%);
    background:#fff; box-shadow:-18px 0 40px -24px rgba(90,60,66,.5);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:1.6rem;
    padding:2.5rem; z-index:95;
    /* Închis: împins în afară ȘI scos din pagină. Fără `visibility`,
       cele 320px ale lui lățeau documentul, deci site-ul „fugea la
       dreapta", iar tastatura intra în meniul invizibil. */
    transform:translateX(100%); visibility:hidden;
    transition:transform var(--t), visibility 0s linear var(--t);
  }
  .nav.on{ transform:none; visibility:visible; transition:transform var(--t); }
  .nav a{ font-size:1.05rem; letter-spacing:.16em; }
  .story,.pdp{ grid-template-columns:1fr; }
  .trust__grid{ grid-template-columns:repeat(2,1fr); gap:2rem 1rem; }
  .testi__grid{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .wrap{ padding-inline:20px; }
  .announce em{ display:none; }
  .announce{ font-size:.66rem; letter-spacing:.14em; }
  .hdr__actions{ gap:.3rem; }
  .ftr__grid{ grid-template-columns:1fr; gap:2rem; }
  .ftr__bottom{ flex-direction:column; text-align:center; }
  .news form{ flex-direction:column; }
  .row2{ grid-template-columns:1fr; }
  .logo svg{ height:52px; }
  .pdp__buy{ flex-direction:column; }
}

/* ---------- 9. CARDURI MARI (acasă) & SPECIFICAȚII ---------- */
.spec{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.75rem 0; border-bottom:1px solid var(--line); font-size:.92rem;
}
.spec:first-of-type{ border-top:1px solid var(--line); margin-top:1.6rem; }
.spec span{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.spec strong{ font-weight:400; }

.gallery__thumbs img,.gallery__thumbs svg{ width:100%; aspect-ratio:1; object-fit:cover; }

/* ---------- 10. ACCENTE SCRISE DE MÂNĂ & RAFINĂRI ---------- */
.script{
  font-family:var(--script); color:var(--rose); text-transform:none;
  letter-spacing:0; font-size:1.6rem; line-height:1.2; display:block; margin-bottom:.2rem;
}
.hero__txt .script{ font-size:clamp(1.7rem,2.6vw,2.2rem); margin-bottom:.4rem; }
.note-script{
  font-family:var(--serif); font-style:italic; font-size:1.12rem; line-height:1.55; color:var(--rose-deep);
  margin:1.4rem 0 0; padding-left:1rem; border-left:2px solid var(--pink);
}
.price em{
  display:block; font-family:var(--sans); font-style:normal; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:.35rem;
}
.sgrid__b h3{ letter-spacing:-.005em; }
.section-head h2 + p{ margin-top:.9rem; }

/* ---------- 11. ACCESIBILITATE & PERFORMANȚĂ ---------- */
.skip{
  position:absolute; left:-999px; top:0; z-index:200; background:var(--rose); color:#fff;
  padding:.8rem 1.4rem; border-radius:0 0 var(--r) 0; font-size:.8rem;
}
.skip:focus{ left:0; }
:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; border-radius:2px; }
:focus:not(:focus-visible){ outline:none; }

img{ background:linear-gradient(120deg,var(--blush-2),var(--pink-soft)); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .hdr,.announce,.ftr,.drawer,.overlay,.search,.toast{ display:none !important; }
  body{ background:#fff; }
}

/* ---------- 12. PLATĂ, PAGINI SPECIALE, FĂRĂ JAVASCRIPT ---------- */
.pay-note{
  display:flex; gap:.6rem; align-items:flex-start; margin-top:.4rem;
  font-size:.8rem; color:var(--muted); line-height:1.5;
}
.pay-note svg{ width:16px; height:16px; flex:0 0 16px; color:var(--gold); margin-top:.15rem; }

.noscript{
  background:var(--rose); color:#fff; padding:1rem 1.4rem; text-align:center; font-size:.9rem;
}
.noscript a{ text-decoration:underline; }

.stand{
  min-height:70vh; display:grid; place-items:center; text-align:center; padding:4rem 0;
}
.stand__in{ max-width:52ch; }
.stand h1{ margin-bottom:1rem; }
.stand p{ color:var(--ink-soft); }
.stand .btn{ margin-top:1.6rem; }
.stand__mark{
  width:78px; height:78px; margin:0 auto 1.6rem; border-radius:50%;
  background:var(--pink-soft); color:var(--rose); display:grid; place-items:center;
}
.stand__mark svg{ width:38px; height:38px; }

/* Bodoni are linii fine — puțin mai mult aer la majuscule mici */
.eyebrow,.btn,.nav a,.spec span,.field span{ font-weight:400; }
.price{ letter-spacing:.01em; }


/* ============================================================
   14. COMANDĂ — livrare și plată
   ============================================================ */
.step{ font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin:0 0 .5rem; }
.step__t{ font-size:1.25rem; margin:0 0 1rem; }
.opts{ display:grid; gap:.6rem; margin-bottom:1.9rem; }
.opt{
  display:flex; align-items:center; gap:.9rem; padding:.95rem 1.05rem; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r); background:#fff;
  transition:border-color var(--t), box-shadow var(--t);
}
.opt:hover{ border-color:var(--pink-deep); }
.opt.on{ border-color:var(--rose); box-shadow:0 0 0 1px var(--rose); }
.opt input{ accent-color:var(--rose); width:17px; height:17px; flex:0 0 17px; }
.opt__body{ flex:1; min-width:0; }
.opt__body strong{ display:block; font-weight:500; font-size:.95rem; }
.opt__body small{ color:var(--muted); font-size:.78rem; }
.opt__price{ font-family:var(--serif); color:var(--rose); font-size:1.02rem; white-space:nowrap; }
.opt > svg{ width:18px; height:18px; color:var(--gold); flex:0 0 18px; }
.chosen{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  background:var(--blush-2); padding:.75rem .95rem; border-radius:var(--r);
  font-size:.85rem; margin:0 0 1.3rem;
}
.chosen button{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rose); text-decoration:underline; }

/* ---------- RESPONSIVE pentru secțiunile noi ---------- */
@media (max-width:980px){
  .cta{ grid-template-columns:1fr; }
}


/* ============================================================
   15. PAGINA DE ACASĂ
   Hero cu două slide-uri (câte unul pentru fiecare brățară),
   carduri de detalii, produse compacte, îngrijire.
   ============================================================ */
/* ---------- HERO ----------
   Fără carusel: promisiunea brandului în stânga, ambele brățări
   în dreapta, cu preț și buton. Vizitatorul decide din prima. */
.hero3{
  position:relative; overflow:hidden; padding:0;
  background:
    radial-gradient(64% 56% at 88% 14%, #FAEDEE 0%, rgba(250,237,238,0) 60%),
    radial-gradient(56% 58% at 4% 96%, #FBF3F2 0%, rgba(251,243,242,0) 66%),
    #FFFFFF;
  border-bottom:1px solid var(--line);
}
.hero3__in{
  position:relative; z-index:1; max-width:var(--wrap); margin-inline:auto;
  padding:clamp(2.6rem,5.5vw,4.6rem) 28px clamp(2.6rem,5vw,4rem);
  display:grid; grid-template-columns:1fr 1.06fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.hero3__txt{ max-width:32rem; }
.hero3__eyebrow{
  display:flex; align-items:center; gap:.7rem; font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--rose); margin-bottom:1.1rem;
}
.hero3__eyebrow i{ width:32px; height:1px; background:var(--gold); display:block; font-style:normal; }
.hero3__txt h1{ font-size:clamp(2.5rem,5vw,4rem); line-height:1.02; margin-bottom:1rem; }
.hero3__txt .lead{ max-width:40ch; margin-bottom:1.8rem; }

.hero3__trust{ list-style:none; padding:0; margin:0; display:grid; gap:.75rem; }
.hero3__trust li{ display:flex; align-items:center; gap:.7rem; font-size:.88rem; color:var(--ink-soft); }
.hero3__trust svg{ width:17px; height:17px; flex:0 0 17px; color:var(--gold); }


/* ---------- cum arată purtate ---------- */
.worn{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2.5vw,1.6rem); }
.worn a{ position:relative; display:block; overflow:hidden; border-radius:8px; }
.worn img,.worn svg{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.worn a:hover img{ transform:scale(1.04); }
.worn span{
  position:absolute; left:16px; bottom:16px; background:rgba(255,255,255,.94);
  padding:.5rem .9rem; border-radius:100px; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink);
}

@media (max-width:900px){
  .hero3__in{ grid-template-columns:1fr; padding-top:clamp(2rem,6vw,3rem); }
  .hero3__txt{ max-width:none; }
  .hero3__txt h1{ font-size:clamp(2.2rem,8vw,3rem); }
  .hero3__trust{ grid-template-columns:1fr 1fr; display:grid; }
}
@media (max-width:560px){
  .hero3__trust{ grid-template-columns:1fr; }
  .worn{ grid-template-columns:1fr; }
}

/* ---------- carduri de detalii ---------- */
.sec__head--c{ text-align:center; margin-inline:auto; }
.sec__mark{ width:38px; height:38px; margin:0 auto .9rem; color:var(--rose); }
.feat{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.feat__card{
  background:#fff; border:1px solid var(--line); border-radius:6px; padding:2.2rem 1.6rem;
  text-align:center; transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.feat__card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:transparent; }
.hexa{
  width:78px; height:86px; margin:0 auto 1.3rem; display:grid; place-items:center; color:#fff;
  background:linear-gradient(160deg,var(--rose) 0%,var(--rose-deep) 100%);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.hexa svg{ width:34px; height:34px; }
.feat__card h3{ font-size:1.2rem; margin-bottom:.6rem; }
.feat__card p{ color:var(--ink-soft); font-size:.88rem; }

/* ---------- îngrijire ---------- */
.care2{
  display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(1.5rem,4vw,3rem); align-items:center;
  background:#fff; border-radius:6px; padding:clamp(1.8rem,4vw,2.8rem); box-shadow:var(--shadow);
}
.care2 h3{ font-size:1.5rem; margin-top:.2rem; }
.care{ list-style:none; padding:0; margin:0; display:grid; gap:.9rem; }
.care li{ display:flex; gap:.8rem; align-items:flex-start; color:var(--ink-soft); font-size:.95rem; }
.care svg{ width:18px; height:18px; flex:0 0 18px; color:var(--gold); margin-top:.2rem; }
.care__note{ margin-top:1.2rem; font-family:var(--serif); font-style:italic; color:var(--rose-deep); }

/* ---------- invitație ---------- */
.cta{
  background:var(--pink-soft); border-radius:6px; padding:clamp(2.4rem,5vw,4rem);
  display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(2rem,4vw,3.5rem); align-items:center;
}
.cta__side{ display:grid; gap:.7rem; }
.cta__side small{ text-align:center; color:var(--muted); font-size:.76rem; }
.btn--line{ border-color:var(--ink); color:var(--ink); }
.btn--line:hover{ background:var(--ink); color:#fff; }

/* secțiuni generice folosite de pagina de acasă */
.sec{ padding:clamp(4rem,8vw,7rem) 0; }
.sec--tint{ background:var(--white); }
.sec__head{ max-width:44rem; margin-bottom:clamp(2.2rem,4vw,3.4rem); }
.sec__head h2{ margin-top:.2rem; }
.sec__head p{ color:var(--ink-soft); }

/* banda cu mesaje */
.marquee{ overflow:hidden; background:var(--rose); color:#fff; padding:.85rem 0; }
.marquee__row{ display:flex; align-items:center; gap:2.6rem; width:max-content; animation:mq 46s linear infinite; }
.marquee__row span{ font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; white-space:nowrap; }
.marquee__row i{ font-style:normal; opacity:.55; }
@keyframes mq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__row{ animation:none; } }

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .feat{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .care2{ grid-template-columns:1fr; }
  .cta{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .feat{ grid-template-columns:1fr; }
}

/* ============================================================
   16. ȘLEFUIRE — ritm, intrare, indicatori
   ============================================================ */

/* linia de progres la derulare */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:110; pointer-events:none;
  background:transparent;
}
.progress i{
  display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--rose),var(--gold));
}

/* numerotarea secțiunilor */
.sec__ix{
  display:flex; align-items:center; justify-content:center; gap:.8rem;
  font-family:var(--serif); font-size:.95rem; letter-spacing:.24em; color:var(--gold);
  margin:0 0 .9rem;
}
.sec__ix i{ display:block; width:34px; height:1px; background:rgba(192,160,98,.5); }
.sec__ix--l{ justify-content:flex-start; }

/* intrarea în hero, o singură dată, la încărcare */
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.hero3__txt > *{ animation:rise .7s cubic-bezier(.22,.61,.36,1) both; }
.hero3__txt > *:nth-child(1){ animation-delay:.05s; }
.hero3__txt > *:nth-child(2){ animation-delay:.13s; }
.hero3__txt > *:nth-child(3){ animation-delay:.21s; }
.hero3__txt > *:nth-child(4){ animation-delay:.29s; }
.hero3__txt > *:nth-child(5){ animation-delay:.37s; }
.hero3__txt > *:nth-child(6){ animation-delay:.45s; }
/* Poza din hero NU se animează: e cea mai mare imagine din pagină,
   iar orice fade întârzie momentul în care Google consideră pagina
   „afișată" (LCP). Textul de lângă ea are voie. */
@media (prefers-reduced-motion: reduce){
  .hero3__txt > *{ animation:none; }
}

/* săgeata care alunecă pe butonul principal */
.btn--solid::after{
  content:'→'; font-size:.9em; opacity:0; margin-left:-.9em;
  transform:translateX(-4px); transition:opacity var(--t), transform var(--t), margin var(--t);
}
.btn--solid:hover::after{ opacity:1; transform:none; margin-left:0; }

/* ritm mai calm între secțiuni + randare mai rapidă sub prima pagină */
.sec{ padding:clamp(4.5rem,9vw,7.5rem) 0; }
.sec + .sec{ padding-top:clamp(3.5rem,7vw,6rem); }
.sec--tint + .sec--tint{ padding-top:0; }
#detalii,#ingrijire,.sec--tint{ content-visibility:auto; contain-intrinsic-size:auto 900px; }

.sec__head{ margin-bottom:clamp(2.4rem,4.5vw,3.6rem); }
.sec__head--c p:last-child{ max-width:52ch; margin-inline:auto; }

/* nota de sub carduri */
.feat__note{
  margin:clamp(2rem,3.5vw,2.8rem) auto 0; max-width:60ch; text-align:center;
  font-family:var(--serif); font-style:italic; font-size:1.12rem; color:var(--rose-deep);
}
.feat__note .heart{ font-style:normal; color:var(--rose); }
.care__lead{ color:var(--ink-soft); margin-top:.6rem; }


/* hero: titlu ceva mai strâns, preț aliniat frumos */
.hero3__txt h1{ line-height:1.02; }
/* Bara de comandă de pe telefon, la pagina de produs.
   Regula de bază lipsea cu totul, așa că bara ieșea ca un bloc
   transparent la coada paginii, în loc să stea lipită de jos. */
.buybar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; align-items:center; gap:.8rem;
  padding:.6rem 20px calc(.6rem + env(safe-area-inset-bottom, 0px));
  background:#fff; border-top:1px solid var(--line);
  box-shadow:0 -12px 30px -24px rgba(90,60,66,.6);
  transform:translateY(120%); transition:transform var(--t);
}
.buybar.on{ transform:none; }
.panel-open .buybar{ transform:translateY(120%); }
/* cât timp bara e afișată, lăsăm loc sub conținut */
body.has-buybar{ padding-bottom:calc(5.2rem + env(safe-area-inset-bottom, 0px)); }
.buybar__p{ width:44px; height:44px; border-radius:4px; overflow:hidden; flex:0 0 44px; }
.buybar__p img,.buybar__p svg{ width:100%; height:100%; object-fit:cover; }
.buybar__t{ flex:1; min-width:0; line-height:1.25; }
.buybar__t strong{
  display:block; font-family:var(--serif); font-weight:400; font-size:1rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.buybar__t span{ font-size:.82rem; color:var(--rose); }
.buybar .btn{ padding:.8rem 1.1rem; font-size:.66rem; white-space:nowrap; }
@media (min-width:901px){ .buybar{ display:none; } }

/* butonul de trimitere, cât timp se trimite comanda */
.btn[disabled]{ opacity:.6; pointer-events:none; }

/* ============================================================
   18. PALETĂ ALBĂ — rozul rămâne doar accent, pozele fac culoarea
   ============================================================ */
/* Header alb, opac. Efectul de sticlă se pune DOAR pe ecrane mari:
   `backdrop-filter` transformă header-ul într-o cutie din care meniul
   `position:fixed` nu mai poate ieși, iar pe telefon meniul chiar
   trebuie să iasă — să acopere tot ecranul. */
.hdr{ background:#fff; border-bottom:1px solid var(--line); }
@media (min-width:861px){
  .hdr{
    background:rgba(255,255,255,.88);
    backdrop-filter:saturate(1.6) blur(10px);
  }
}
.icon-btn:hover{ background:var(--blush-2); }
.nav a{ color:var(--ink-soft); }
.nav a:hover,.nav a.active{ color:var(--rose); }

/* eroul: alb, cu doar o umbră caldă în colțuri */
.hero3{
  background:
    radial-gradient(68% 58% at 86% 18%, #FAEDEE 0%, rgba(250,237,238,0) 62%),
    radial-gradient(60% 60% at 6% 96%, #FBF3F2 0%, rgba(251,243,242,0) 68%),
    #FFFFFF;
}
.hero3::before{ background:rgba(250,237,238,.7); }
.hero3::after{ background:rgba(196,120,139,.08); }

/* secțiuni: alb pur alternând cu un alb cald abia perceptibil */
.sec--tint{ background:var(--blush-2); }

/* carduri: contur fin în loc de umbră grea */
.feat__card{ border-color:var(--line); box-shadow:none; }
.feat__card:hover{ box-shadow:var(--shadow); border-color:var(--line); transform:translateY(-4px); }
.care2{ box-shadow:none; border:1px solid var(--line); background:#fff; }
.cta{ background:var(--pink-soft); }

/* banda de mesaje: mai subțire, ca să nu domine */
.marquee{ padding:.7rem 0; }
.marquee__row span{ font-size:.62rem; }

/* pagina de produs și magazin */
.gallery__main{ box-shadow:none; border:1px solid var(--line); }
.ftr{ background:var(--blush-2); border-top:1px solid var(--line); }
.trust{ background:var(--blush-2); }
.news{ background:var(--pink-soft); }
.drawer__foot{ background:var(--blush-2); }

/* ============================================================
   19. GHID DE MĂRIMI
   ============================================================ */
.linkish{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rose);
  text-decoration:underline; text-underline-offset:3px; margin-left:.5rem;
}
.linkish:hover{ color:var(--rose-deep); }

.modal{
  position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:1.2rem;
  opacity:0; pointer-events:none; transition:opacity var(--t);
}
.modal.on{ opacity:1; pointer-events:auto; }
.modal__box{
  position:relative; background:#fff; border-radius:8px; box-shadow:var(--shadow-lg);
  width:min(720px,100%); max-height:88vh; overflow:auto; padding:clamp(1.6rem,4vw,2.6rem);
  transform:translateY(14px); transition:transform var(--t);
}
.modal.on .modal__box{ transform:none; }
.modal__x{
  position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; color:var(--ink-soft);
}
.modal__x:hover{ background:var(--blush-2); color:var(--rose); }
.modal__x svg{ width:20px; height:20px; }

.sizeguide__t{ font-size:1.7rem; margin-bottom:1.6rem; }
.sizeguide__steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.sizeguide__s{
  position:relative; border:1px solid var(--line); border-radius:6px; padding:1.2rem;
  background:var(--blush-2);
}
.sizeguide__ill{ color:var(--ink-soft); margin-bottom:.7rem; }
.sizeguide__ill svg{ width:100%; height:auto; }
.sizeguide__n{
  position:absolute; top:12px; right:12px; width:24px; height:24px; border-radius:50%;
  background:var(--rose); color:#fff; display:grid; place-items:center; font-size:.72rem;
}
.sizeguide__s strong{ display:block; font-weight:500; font-size:.94rem; margin-bottom:.3rem; }
.sizeguide__s small{ color:var(--muted); font-size:.8rem; line-height:1.5; }

.scale{ margin:1.8rem 0 1.2rem; }
.scale__bar{ height:8px; border-radius:4px; background:var(--blush-2); border:1px solid var(--line); overflow:hidden; }
.scale__fill{ display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--pink),var(--rose)); }
.scale__marks{ display:flex; justify-content:space-between; margin-top:.5rem; font-size:.72rem; color:var(--muted); }
.sizeguide__note{ font-size:.9rem; color:var(--ink-soft); }
.sizeguide__note a{ color:var(--rose); text-decoration:underline; text-underline-offset:3px; }

@media (max-width:640px){
  .sizeguide__steps{ grid-template-columns:1fr; }
  .sizeguide__s{ display:grid; grid-template-columns:88px 1fr; gap:.2rem 1rem; align-items:center; }
  .sizeguide__ill{ grid-row:span 2; margin:0; }
}

/* ============================================================
   20. PAGINI LEGALE, COOKIE-URI, FOOTER LEGAL
   ============================================================ */
.wrap--narrow{ max-width:780px; }
.prose h1{ font-size:clamp(2.1rem,4vw,2.9rem); margin-bottom:.4rem; }
.prose__upd{ font-size:.78rem; color:var(--muted); margin-bottom:2.4rem; }
.prose h2{ font-size:1.35rem; margin:2.6rem 0 .8rem; }
.prose p,.prose li{ color:var(--ink-soft); font-size:.97rem; line-height:1.75; }
.prose ul,.prose ol{ padding-left:1.2rem; margin:0 0 1rem; }
.prose li{ margin-bottom:.5rem; }
.prose a{ color:var(--rose); text-decoration:underline; text-underline-offset:3px; }
.prose strong{ color:var(--ink); font-weight:500; }
.prose__note{
  background:var(--pink-soft); border-left:3px solid var(--rose);
  border-radius:0 var(--r) var(--r) 0; padding:1rem 1.2rem;
  font-size:.9rem; color:var(--ink-soft); margin-bottom:2rem;
}
.prose__table{ width:100%; border-collapse:collapse; margin:1rem 0 1.6rem; font-size:.9rem; }
.prose__table th,.prose__table td{
  text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--line); vertical-align:top;
}
.prose__table th{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:400;
}
.prose__table td{ color:var(--ink-soft); }

/* footer: rândul de jos */
.ftr__bottom{ flex-wrap:wrap; align-items:center; gap:.8rem 1.5rem; }
.ftr__legal{ display:flex; gap:1.1rem; flex-wrap:wrap; align-items:center; }
.ftr__legal a,.ftr__legal button{
  font-size:.76rem; color:var(--muted); transition:color var(--t);
}
.ftr__legal a:hover,.ftr__legal button:hover{ color:var(--rose); }
.ftr__copy{ font-size:.76rem; color:var(--muted); margin-left:auto; }

/* bannerul de cookie-uri */
.cookiebar{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:100; max-width:640px;
  margin-inline:auto; background:#fff; border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow-lg); padding:1.1rem 1.3rem;
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  transform:translateY(160%); transition:transform var(--t);
}
.cookiebar.on{ transform:none; }
.cookiebar p{ flex:1; min-width:240px; margin:0; font-size:.86rem; color:var(--ink-soft); }
.cookiebar a{ color:var(--rose); text-decoration:underline; text-underline-offset:3px; }
.cookiebar__b{ display:flex; gap:.6rem; }
.cookiebar .btn{ padding:.7rem 1.1rem; font-size:.66rem; }
@media (max-width:600px){
  .cookiebar{ bottom:.6rem; padding:1rem; }
  .cookiebar__b{ width:100%; }
  .cookiebar .btn{ flex:1; }
}

/* bannerul de cookie-uri urcă peste bara de cumpărare, pe telefon */
body.has-buybar .cookiebar{ bottom:calc(5.2rem + env(safe-area-inset-bottom)); }

/* plata împărțită (card acum + transport la livrare) */
.totals.split{ font-size:.82rem; color:var(--muted); }
.totals.split:first-of-type{ margin-top:.2rem; }

/* ============================================================
   21. FINALIZARE COMANDĂ (checkout.html)
   ============================================================ */
.hdr--ck{ position:static; }
.hdr__inner--ck{ grid-template-columns:1fr auto 1fr; padding-block:1.1rem; }
.ck__exit{
  width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  color:var(--ink-soft); transition:background var(--t), color var(--t);
}
.ck__exit:hover{ background:var(--blush-2); color:var(--rose); }
.ck__exit svg{ width:20px; height:20px; }
.ck__safe{
  display:flex; align-items:center; gap:.5rem; justify-self:end;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.ck__safe svg{ width:15px; height:15px; color:var(--gold); }
.ftr--ck{ margin-top:3rem; }

.ck{ padding:clamp(1.6rem,4vw,3rem) 0 clamp(2rem,5vw,4rem); }

/* pașii */
.stepper{
  list-style:none; display:flex; gap:.6rem; padding:0;
  margin:0 auto clamp(1.8rem,4vw,2.6rem); max-width:640px;
}
.stepper li{
  flex:1; display:flex; align-items:center; gap:.6rem; padding-bottom:.7rem;
  border-bottom:2px solid var(--line); font-size:.76rem; letter-spacing:.06em; color:var(--muted);
  transition:color var(--t), border-color var(--t);
}
.stepper li span{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:var(--blush-2); color:var(--muted); font-size:.7rem; flex:0 0 24px;
  transition:background var(--t), color var(--t);
}
.stepper li.on{ color:var(--ink); border-color:var(--rose); }
.stepper li.on span{ background:var(--rose); color:#fff; }
.stepper li.done{ color:var(--ink-soft); border-color:var(--pink); }
.stepper li.done span{ background:var(--pink); color:var(--ink); }

.ck__grid{
  display:grid; grid-template-columns:1fr 380px; gap:clamp(1.6rem,4vw,3.5rem); align-items:start;
}
.ck__main{ min-width:0; }
.ck__h{ font-size:clamp(1.8rem,3.2vw,2.4rem); margin-bottom:1.4rem; }
.ck__sub{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin:1.8rem 0 .9rem;
}
.ck__sub:first-of-type{ margin-top:0; }
.ck__lead{ color:var(--ink-soft); margin-bottom:1.4rem; }
.ck__nav{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:2rem; flex-wrap:wrap;
}
.ck__back{ font-size:.8rem; color:var(--muted); }
.ck__back:hover{ color:var(--rose); }
.ck__nav .btn{ min-width:220px; }
.ck__note{ margin-top:1rem; font-size:.85rem; color:var(--rose-deep); }
.ck__empty{ text-align:center; padding:clamp(2rem,6vw,4rem) 0; max-width:46ch; margin-inline:auto; }
.ck__empty h1{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:.8rem; }
.ck__empty p{ color:var(--ink-soft); margin-bottom:1.6rem; }
.ck__empty .stand__mark{ margin-bottom:1.4rem; }

/* sumarul comenzii */
.ck__side{ position:sticky; top:1.5rem; }
.sum{ border:1px solid var(--line); border-radius:8px; background:#fff; overflow:hidden; }
.sum > summary{
  list-style:none; cursor:pointer; padding:1.1rem 1.3rem; display:flex;
  justify-content:space-between; align-items:center; gap:1rem;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}
.sum > summary::-webkit-details-marker{ display:none; }
.sum > summary strong{ font-family:var(--serif); font-size:1.15rem; color:var(--rose); letter-spacing:0; }
.sum__body{ padding:0 1.3rem 1.3rem; }
.sum__i{ display:grid; grid-template-columns:52px 1fr auto; gap:.9rem; align-items:center; padding:.7rem 0; }
.sum__ph{ position:relative; display:block; }
.sum__ph img,.sum__ph svg{ width:52px; height:52px; object-fit:cover; border-radius:4px; }
.sum__ph i{
  position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 5px;
  border-radius:10px; background:var(--rose); color:#fff; font-size:.62rem; font-style:normal;
  display:grid; place-items:center;
}
.sum__n{ font-size:.92rem; line-height:1.35; }
.sum__n small{ display:block; color:var(--muted); font-size:.74rem; }
.sum__p{ font-family:var(--serif); font-size:1rem; }
.sum #sumTotals{ border-top:1px solid var(--line); padding-top:.9rem; margin-top:.5rem; }
.sum__hint{ margin:.6rem 0 0; font-size:.78rem; color:var(--gold); }
.sum__safe{
  display:flex; align-items:flex-start; gap:.5rem; margin:1rem 0 0;
  font-size:.76rem; color:var(--muted);
}
.sum__safe svg{ width:15px; height:15px; flex:0 0 15px; color:var(--gold); margin-top:.15rem; }

/* confirmarea */
.rev{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.rev__b{
  position:relative; border:1px solid var(--line); border-radius:8px; padding:1.1rem 1.2rem;
  background:var(--blush-2);
}
.rev__b h3{
  font-family:var(--sans); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.5rem;
}
.rev__b p{ font-size:.92rem; color:var(--ink); margin:0; line-height:1.5; }
.rev__b small{ color:var(--muted); }
.rev__edit{
  position:absolute; top:1rem; right:1.1rem; font-size:.68rem; color:var(--rose);
  text-decoration:underline; text-underline-offset:3px;
}
.rev__obs{ margin-top:1rem; font-size:.9rem; color:var(--ink-soft); }
.agree{
  display:flex; gap:.7rem; align-items:flex-start; margin-top:1.6rem;
  font-size:.88rem; color:var(--ink-soft);
}
.agree input{ width:18px; height:18px; accent-color:var(--rose); margin-top:.15rem; flex:0 0 18px; }
.agree a{ color:var(--rose); text-decoration:underline; text-underline-offset:3px; }

@media (max-width:900px){
  .ck__grid{ grid-template-columns:1fr; }
  .ck__side{ position:static; order:-1; margin-bottom:0; }
  .ck__grid{ gap:1.4rem; }
  .sum{ background:var(--blush-2); }
  .sum[open] > summary{ border-bottom:1px solid var(--line); }
  .rev{ grid-template-columns:1fr; }
  .stepper li{ font-size:.68rem; gap:.45rem; }
  .ck__nav{ flex-direction:column-reverse; align-items:stretch; }
  .ck__nav .btn{ width:100%; }
  .ck__back{ text-align:center; padding:.6rem 0; }
}
@media (max-width:560px){
  .stepper li span{ width:21px; height:21px; flex:0 0 21px; font-size:.64rem; }
  .ck__safe span{ display:none; }
}

/* capcana pentru roboți — invizibilă pentru oameni și pentru cititoarele de ecran */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* sugestia din coș: celălalt model */
.xsell{ margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--line); }
.xsell__t{
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .7rem;
}
.xsell__i{ display:grid; grid-template-columns:52px 1fr auto; gap:.8rem; align-items:center; }
.xsell__i img,.xsell__i svg{ width:52px; height:52px; object-fit:cover; border-radius:4px; }
.xsell__i strong{ display:block; font-family:var(--serif); font-weight:400; font-size:1.02rem; }
.xsell__i small{ color:var(--rose); font-size:.82rem; }
.xsell__i .btn{ padding:.6rem .9rem; font-size:.6rem; }

/* ============================================================
   17. ACASĂ — colecție, atelier, recenzii, întrebări
   Pagina de acasă face treaba unui vânzător: arată tot ce ai,
   spune de ce merită și răspunde la obiecții înainte de coș.
   ============================================================ */

/* ---------- hero: butoane și reper de preț ---------- */
.hero3__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:.9rem; }
.hero3__cta .btn{ padding:.95rem 1.7rem; }
.hero3__from{ font-size:.82rem; color:var(--muted); margin:0 0 1.6rem; }
.hero3__from b{ font-family:var(--serif); font-weight:400; color:var(--rose); font-size:1.02rem; }
.hero3__from i{ font-style:normal; opacity:.45; margin:0 .5rem; }

/* ---------- hero: poza cu toate brățările ---------- */
.hero3__in{ grid-template-columns:1.05fr .85fr; }
.hero3__shot{ position:relative; margin:0; }
.hero3__shot picture{ display:block; }
.hero3__shot img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 46%;
  display:block; border-radius:10px; box-shadow:var(--shadow-lg);
}
.hero3__tag{
  position:absolute; right:0; bottom:0; transform:translate(16px,16px);
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:.85rem 1.25rem; box-shadow:var(--shadow);
  display:grid; gap:.12rem; max-width:15.5rem;
}
.hero3__tag b{ font-family:var(--serif); font-weight:400; font-size:1.16rem; color:var(--ink); }
.hero3__tag span{ font-size:.74rem; color:var(--muted); line-height:1.4; }

/* ---------- numărul secțiunii ---------- */
.sec__ix b{ font-weight:400; }

/* ---------- colecția completă ---------- */
/* Flex, nu grid: cu cinci modele ultimul rând rămâne mereu incomplet,
   iar așa cardurile rămase se centrează în loc să atârne în stânga.
   `--n` = câte încap pe un rând; se schimbă doar el, la fiecare lățime. */
.shopgrid{
  --g:clamp(.8rem,1.6vw,1.4rem); --n:5;
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--g);
}
.shopgrid > .sgrid{ flex:0 1 calc((100% - (var(--n) - 1) * var(--g)) / var(--n)); min-width:0; }
.sgrid{
  background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.sgrid:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.sgrid__media{ position:relative; display:block; overflow:hidden; background:var(--blush-2); }
.sgrid__media img,.sgrid__media svg{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1), opacity var(--t);
}
/* a doua poză apare la hover — se vede brățara și purtată */
.sgrid__alt{ position:absolute; inset:0; opacity:0; }
.sgrid__media:hover .sgrid__alt{ opacity:1; }
.sgrid__media:hover img{ transform:scale(1.03); }
.sgrid__badge{
  position:absolute; top:10px; left:10px; z-index:2; background:rgba(255,255,255,.94); color:var(--rose);
  font-size:.55rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.35rem .7rem; border-radius:100px;
}
.sgrid__b{ padding:1rem 1.05rem 1.15rem; display:flex; flex-direction:column; flex:1; }
.sgrid__b h3{ font-size:1.22rem; margin-bottom:.2rem; line-height:1.15; }
.sgrid__b h3 a:hover{ color:var(--rose); }
.sgrid__b small{ color:var(--muted); font-size:.76rem; line-height:1.45; display:block; margin-bottom:.7rem; }
.sgrid__p{ font-family:var(--serif); font-size:1.28rem; color:var(--rose); margin-top:auto; }
.sgrid .btn{ margin-top:.75rem; width:100%; padding:.78rem .6rem; font-size:.6rem; letter-spacing:.16em; }

.shopgrid__note{
  text-align:center; margin:clamp(1.6rem,3vw,2.4rem) 0 0;
  font-size:.85rem; color:var(--ink-soft);
}
.shopgrid__note b{ font-weight:400; color:var(--rose); }

/* ---------- atelier ---------- */
.atelier{
  display:grid; grid-template-columns:.92fr 1.08fr;
  gap:clamp(1.8rem,5vw,4.2rem); align-items:center;
}
.atelier__media img,.atelier__media svg{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:8px; box-shadow:var(--shadow-lg); display:block;
}
.atelier__txt h2{ margin-bottom:.6rem; }
.atelier__txt .lead{ max-width:46ch; }
.steps{ list-style:none; counter-reset:s; padding:0; margin:1.7rem 0 2rem; display:grid; gap:1.15rem; }
.steps li{
  counter-increment:s; display:grid; grid-template-columns:auto 1fr;
  gap:1rem; align-items:start;
}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--serif); font-size:.9rem; letter-spacing:.1em;
  color:var(--gold); padding-top:.18rem;
}
.steps b{ display:block; font-weight:400; font-size:1.02rem; margin-bottom:.15rem; }
.steps span{ display:block; color:var(--ink-soft); font-size:.9rem; }

/* ---------- cum arată purtate: toate modelele, o singură bandă ---------- */
.worn{
  --g:clamp(.7rem,1.6vw,1.1rem); --n:5;
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--g);
}
.worn > a{ flex:0 1 calc((100% - (var(--n) - 1) * var(--g)) / var(--n)); min-width:0; }

/* ---------- întrebări frecvente pe prima pagină ---------- */
.faq2{ max-width:47rem; margin-inline:auto; }
.faq2 details.acc summary{ font-family:var(--sans); }
.faq2__more{ text-align:center; margin:1.6rem 0 0; }
.faq2__more a{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--rose);
  border-bottom:1px solid rgba(196,120,139,.4); padding-bottom:.2rem;
}
.faq2__more a:hover{ color:var(--rose-deep); border-color:var(--rose-deep); }

/* ---------- lista de argumente din invitație ---------- */
.cta__list{ list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.65rem; }
.cta__list li{ display:flex; gap:.7rem; align-items:center; font-size:.9rem; color:var(--ink-soft); }
.cta__list svg{ width:17px; height:17px; flex:0 0 17px; color:var(--gold); }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .shopgrid{ --n:3; }
  .worn{ --n:3; }
}
@media (max-width:900px){
  /* Pe telefon poza urcă deasupra textului: e cel mai bun argument
     pe care îl avem și trebuie văzută fără să derulezi. */
  .hero3__in{ grid-template-columns:1fr; }
  .hero3__shot{ order:-1; max-width:460px; margin:0 0 1.4rem; }
  .hero3__tag{ transform:translate(10px,14px); padding:.75rem 1rem; }
  .atelier{ grid-template-columns:1fr; }
  .atelier__media{ max-width:420px; }
}
@media (max-width:760px){
  .shopgrid{ --n:2; }
  .worn{ --n:2; }
}
@media (max-width:560px){
  .hero3__cta{ display:grid; grid-template-columns:1fr; }
  .hero3__cta .btn{ width:100%; }
  .sgrid__b{ padding:.8rem .8rem 1rem; }
  .sgrid__b h3{ font-size:1.05rem; }
  .sgrid__b small{ display:none; }
  .sgrid__p{ font-size:1.12rem; }
  .sgrid .btn{ font-size:.55rem; padding:.72rem .4rem; letter-spacing:.12em; }
  .worn{ --n:2; }
}

/* ---------- nota cu stele, sub prețul de pe pagina produsului ---------- */
.pdp__rate{ display:inline-flex; align-items:center; gap:.6rem; margin:-.9rem 0 1.4rem; }
.pdp__rate .stars{ margin:0; }
.pdp__rate span{ font-size:.8rem; color:var(--muted); }
.pdp__rate:hover span{ color:var(--rose); }

/* ---------- variante de lățime pentru grila de produse ----------
   Vin după media queries de bază, ca să câștige la orice lățime.
   `--n` = câte carduri încap pe un rând. */
.shopgrid--4{ --n:4; }
.shopgrid--3{ --n:3; }
.shopgrid--2{ --n:2; }
@media (max-width:1100px){ .shopgrid--4{ --n:3; } }
@media (max-width:760px){
  .shopgrid--4,.shopgrid--3,.shopgrid--2{ --n:2; }
}

/* ---------- bara de sortare de la „Brățări" ---------- */
.shop__bar{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  margin:0 0 1.8rem; padding:0 0 1rem; border-bottom:1px solid var(--line);
}
.shop__bar small{ color:var(--ink-soft); font-size:.85rem; }
.shop__bar small b{ font-weight:400; color:var(--rose); }
.shop__sort{ display:flex; align-items:center; gap:.7rem; }
.shop__sort > span{
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.shop__sort select{
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--line); border-radius:var(--r); background:#fff;
  padding:.6rem 2.2rem .6rem .9rem; font-size:.86rem; color:var(--ink);
  cursor:pointer; transition:border-color var(--t), box-shadow var(--t);
  /* săgeata, desenată în CSS ca să nu mai cerem un fișier de pe disc */
  background-image:linear-gradient(45deg,transparent 50%,var(--rose) 50%),
                   linear-gradient(135deg,var(--rose) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.shop__sort select:hover{ border-color:var(--pink-deep); }
.shop__sort select:focus{ outline:0; border-color:var(--rose); box-shadow:0 0 0 3px rgba(196,120,139,.13); }

/* ---------- butoanele de rețele din invitație ---------- */
.cta__socials{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.cta__socials .btn{ padding:.9rem .6rem; font-size:.66rem; letter-spacing:.16em; }

@media (max-width:560px){
  .shop__bar{ flex-direction:column; align-items:stretch; gap:.9rem; }
  .shop__sort{ justify-content:space-between; }
  .shop__sort select{ flex:1; }
}

/* Lupa din panoul de căutare — fără mărime explicită, SVG-ul se întindea
   pe jumătate de ecran. */
.search__in > svg{ width:24px; height:24px; flex:0 0 24px; color:var(--muted); }

/* ---------- alegerea easybox-ului ---------- */
.boxpick{
  background:var(--blush-2); border:1px solid var(--line); border-radius:var(--r);
  padding:1.05rem 1.15rem; margin:0 0 1rem;
  display:grid; gap:.85rem; justify-items:start;
}
.boxpick--ok{ border-color:var(--pink-deep); background:var(--pink-soft); }
.boxpick__t{ display:flex; gap:.7rem; align-items:flex-start; }
.boxpick__t svg{ width:19px; height:19px; flex:0 0 19px; color:var(--rose); margin-top:.1rem; }
.boxpick__t span{ font-size:.88rem; color:var(--ink-soft); line-height:1.5; }
.boxpick .btn{ padding:.75rem 1.4rem; font-size:.66rem; }
.boxpick .btn[disabled]{ opacity:.5; }
.boxpick__now{
  margin:0; font-size:.88rem; color:var(--ink);
  display:flex; gap:.5rem; align-items:baseline;
}
.boxpick__now::before{ content:'✓'; color:var(--rose); font-size:.95rem; }
.boxpick__now[hidden]{ display:none; }

/* ---------- căutarea în lista de easybox-uri ---------- */
.boxpick__search{ display:block; width:100%; }
.boxpick__search input{
  width:100%; padding:.75rem .95rem; border:1px solid var(--line);
  border-radius:var(--r); background:#fff; font-size:.95rem;
  transition:border-color var(--t), box-shadow var(--t);
}
.boxpick__search input:focus{
  outline:0; border-color:var(--rose); box-shadow:0 0 0 3px rgba(196,120,139,.13);
}
.boxpick__res{ width:100%; max-height:17rem; overflow-y:auto; }
.boxpick__res:not(:empty){
  border:1px solid var(--line); border-radius:var(--r); background:#fff;
}
.boxrow{
  display:block; width:100%; text-align:left; padding:.7rem .9rem;
  border-bottom:1px solid var(--line); transition:background var(--t);
}
.boxrow:last-child{ border-bottom:0; }
.boxrow:hover,.boxrow:focus-visible{ background:var(--blush-2); }
.boxrow strong{ display:block; font-weight:500; font-size:.92rem; color:var(--ink); }
.boxrow small{
  display:block; color:var(--muted); font-size:.78rem; margin-top:.1rem;
  overflow-wrap:anywhere; line-height:1.4;
}
.boxrow strong{ overflow-wrap:anywhere; }
.boxpick__msg{ margin:0; font-size:.82rem; color:var(--muted); line-height:1.5; }
.boxpick__msg[hidden]{ display:none; }

/* ============================================================
   19. TELEFON — comanda la un deget distanță
   Pe ecran mic, butonul care duce comanda mai departe stătea la
   capătul paginii: trebuia derulat tot formularul ca să-l vezi.
   Acum stă lipit de marginea de jos, mereu la îndemână.
   ============================================================ */
@media (max-width:860px){
  body[data-page="checkout"]{
    /* loc pentru bara de jos, plus zona de sub ecran la iPhone */
    padding-bottom:calc(5.4rem + env(safe-area-inset-bottom, 0px));
  }
  .ck__nav{
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    margin:0; padding:.5rem 20px calc(.5rem + env(safe-area-inset-bottom, 0px));
    background:#fff; border-top:1px solid var(--line);
    box-shadow:0 -12px 30px -24px rgba(90,60,66,.6);
    /* butonul sus, linkul de întoarcere dedesubt: așa nu contează
       cât de lung e textul, nu se rupe niciodată pe două rânduri */
    flex-direction:column-reverse; align-items:stretch; gap:.3rem; flex-wrap:nowrap;
  }
  .ck__nav .btn{
    width:100%; min-width:0; padding:.8rem 1rem;
    letter-spacing:.16em; white-space:nowrap;
  }
  .ck__back{ text-align:center; padding:.15rem 0; font-size:.75rem; }

  /* Secțiunea formularului e un <section>, deci moștenea peste 50px
     de spațiu gol deasupra. Pe telefon, spațiul ăla e derulare degeaba. */
  .ck__main{ padding-top:0; padding-bottom:0; }

  /* pașii și sumarul, mai strânse — mai puțină derulare până la formular */
  .stepper{ margin-bottom:1.1rem; }
  .ck__grid{ gap:1rem; }
  .ck__h{ margin-bottom:1rem; }
  .ck__sub{ margin:1.3rem 0 .7rem; }
  .field{ margin-bottom:.8rem; }
  .opts{ gap:.5rem; margin-bottom:1.3rem; }
}

/* ---------- formularul de păreri ---------- */
.pareri__gol{
  grid-column:1/-1; text-align:center; color:var(--muted);
  font-size:.9rem; margin:0; max-width:46ch; margin-inline:auto;
}
.revform{
  max-width:34rem; margin:clamp(1.6rem,3vw,2.4rem) auto 0;
  border:1px solid var(--line); border-radius:8px; background:#fff; overflow:hidden;
}
.revform > summary{
  list-style:none; cursor:pointer; padding:1rem 1.2rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--rose);
}
.revform > summary::-webkit-details-marker{ display:none; }
.revform > summary::after{ content:'+'; font-size:1.15rem; line-height:1; }
.revform[open] > summary{ border-bottom:1px solid var(--line); }
.revform[open] > summary::after{ content:'–'; }
.revform__b{ padding:1.2rem; }
.revform__lead{ font-size:.86rem; color:var(--ink-soft); margin:0 0 1.1rem; }
.revform textarea{ resize:vertical; min-height:5.5rem; }

/* stelele de notare — radio-uri, deci merg și de la tastatură */
.stars-in{ display:flex; flex-direction:row-reverse; justify-content:flex-end; margin-bottom:1rem; }
.stars-in input{ position:absolute; opacity:0; width:1px; height:1px; }
.stars-in label{
  font-size:1.7rem; line-height:1; color:var(--line); cursor:pointer;
  padding:0 .12rem; transition:color var(--t);
}
.stars-in input:checked ~ label,
.stars-in label:hover, .stars-in label:hover ~ label{ color:var(--gold); }
.stars-in input:focus-visible + label{ outline:2px solid var(--rose); outline-offset:2px; border-radius:3px; }

.revform__ok{ display:flex; gap:.65rem; align-items:flex-start; margin:0 0 1.1rem; }
.revform__ok input{ margin-top:.2rem; accent-color:var(--rose); width:17px; height:17px; flex:0 0 17px; }
.revform__ok span{ font-size:.84rem; color:var(--ink-soft); line-height:1.5; }
.revform .btn{ width:100%; }
.revform__msg{ margin:.9rem 0 0; font-size:.88rem; }
.revform__msg--ok{ color:var(--rose-deep); }
.revform__msg--rau{ color:#B4453C; }

/* ---------- una sau două păreri: centrate, nu lipite în stânga ---------- */
.testi__grid--1{ grid-template-columns:minmax(0,26rem); justify-content:center; }
.testi__grid--2{ grid-template-columns:repeat(2,minmax(0,26rem)); justify-content:center; }

/* Pe telefon, o părere pe rând — două alături lasă textul pe câte
   două cuvinte. Regula vine ultima ca să bată și clasele de mai sus. */
@media (max-width:860px){
  .testi__grid,.testi__grid--1,.testi__grid--2{
    grid-template-columns:1fr; justify-content:stretch;
  }
}

/* Plasă de siguranță: nimic nu poate întinde pagina lateral pe telefon.
   `clip`, nu `hidden` — `hidden` ar strica header-ul lipit sus. */
html{ overflow-x:clip; }
body{ overflow-x:clip; }