:root{
    --page:#f1eee6;
    --surface:#fdfcfa;
    --surface-2:#f6f2ea;
    --ink:#26211b;
    --ink-2:#6b6459;
    --muted:#9b9284;
    --border:rgba(38,33,27,0.12);
    --border-strong:rgba(38,33,27,0.2);
    --accent:#7a342a;
    --accent-ink:#fff8f2;
    --accent-soft:rgba(122,52,42,0.1);
    --total-accent:#1e7a4a;
    --total-accent-ink:#f4fff8;
    --total-soft:rgba(30,122,74,0.12);
    --cat-fereastra:#2a78d6;
    --cat-sticla:#1baf7a;
    --cat-usa:#c98500;
    --cat-lambriu:#2f7a2f;
    --cat-sipci:#4a3aa7;
    --cat-gol:#e34948;
    --wood-light:#dba764;
    --wood:#c08a45;
    --wood-dark:#8b5a2b;
    --wood-shadow:#6e4620;
    --glass-a:#d7e8f0;
    --glass-b:#a3c7d9;
    --trim-white:#f8f5ee;
    --trim-shade:#dcd6c6;
    --floor-white:#ffffff;
    --metal-roof-a:#6b4226;
    --metal-roof-b:#84532f;
    --gutter-brown:#5a3a22;
    --gutter-brown-dark:#3d2717;
    color-scheme:light;
  }
  @media (prefers-color-scheme:dark){
    :root:where(:not([data-theme="light"])){
      --page:#161310;
      --surface:#201b16;
      --surface-2:#251f18;
      --ink:#f3efe6;
      --ink-2:#c8c0b1;
      --muted:#8c8574;
      --border:rgba(255,255,255,0.12);
      --border-strong:rgba(255,255,255,0.2);
      --accent:#d97b6c;
      --accent-ink:#1c1310;
      --accent-soft:rgba(217,123,108,0.16);
      --total-accent:#3ecb86;
      --total-accent-ink:#0b1f14;
      --total-soft:rgba(62,203,134,0.16);
      --cat-fereastra:#4a93ea;
      --cat-sticla:#2bbd85;
      --cat-usa:#d99a1f;
      --cat-lambriu:#4a9e4a;
      --cat-sipci:#9a8ff0;
      --cat-gol:#e66767;
      --wood-light:#8a6a40;
      --wood:#6f5330;
      --wood-dark:#4a3820;
      --wood-shadow:#332612;
      --glass-a:#3c5e6c;
      --glass-b:#294854;
      --trim-white:#e6e0cf;
      --trim-shade:#c7c0aa;
      --floor-white:#efe9da;
      --metal-roof-a:#7a4d2d;
      --metal-roof-b:#93643c;
      --gutter-brown:#6b4527;
      --gutter-brown-dark:#4a2f19;
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --page:#161310; --surface:#201b16; --surface-2:#251f18; --ink:#f3efe6; --ink-2:#c8c0b1; --muted:#8c8574;
    --border:rgba(255,255,255,0.12); --border-strong:rgba(255,255,255,0.2);
    --accent:#d97b6c; --accent-ink:#1c1310; --accent-soft:rgba(217,123,108,0.16);
    --total-accent:#3ecb86; --total-accent-ink:#0b1f14; --total-soft:rgba(62,203,134,0.16);
    --cat-fereastra:#4a93ea; --cat-sticla:#2bbd85; --cat-usa:#d99a1f; --cat-lambriu:#4a9e4a; --cat-sipci:#9a8ff0; --cat-gol:#e66767;
    --wood-light:#8a6a40; --wood:#6f5330; --wood-dark:#4a3820; --wood-shadow:#332612;
    --glass-a:#3c5e6c; --glass-b:#294854;
    --trim-white:#e6e0cf; --trim-shade:#c7c0aa; --floor-white:#efe9da;
    --metal-roof-a:#7a4d2d; --metal-roof-b:#93643c; --gutter-brown:#6b4527; --gutter-brown-dark:#4a2f19;
    color-scheme:dark;
  }

  *{box-sizing:border-box;}
  body{margin:0;}
  .app{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--page);
    color:var(--ink);
    min-height:100%;
    padding:36px 20px 72px;
  }
  /* 1320, nu 1220: cele trei coloane au nevoie de latimea asta ca scena din
     mijloc sa ajunga la 556px, adica exact cat foloseste desenul 3D la maxim. */
  .shell{max-width:1320px;margin:0 auto;}

  /* ---------- header ---------- */
  .head-row{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;}
  .eyebrow{
    font:700 11px/1 -apple-system,sans-serif;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
    margin:0 0 10px;
  }
  h1{
    font-family:ui-serif,Georgia,"Iowan Old Style","Palatino Linotype",serif;
    font-weight:600;
    font-size:clamp(28px,4vw,38px);
    line-height:1.08;
    margin:0 0 10px;
    text-wrap:balance;
    letter-spacing:-.01em;
  }
  .lede{
    font-size:15.5px;
    line-height:1.55;
    color:var(--ink-2);
    max-width:660px;
    margin:0;
  }
  header.top{margin-bottom:30px;}

  /* ---------- layout ---------- */
  /* Ecran lat: trei coloane — unelte | desen 3D | oferta, asezarea clasica de
     configurator. Cardurile nu se mai intrepatrund pe randuri: varianta veche
     intindea `options` si `total` pe cate doua randuri, iar cardul de panouri
     (cel mai inalt din pagina) umfla randul si lasa o gaura mare de gol sub
     desenul 3D.
     Latimea coloanei din mijloc nu e aleasa din ochi: panelW din scene3d.js e
     plafonat la 64px, deci scena "se satura" pe la ~560px latime — peste atat
     desenul nu creste, doar aduna spatiu gol in jur. 1320 - 340 - 380 - 44 = 556.
     ≤1180px: doua coloane. ≤900px: o coloana, ordonata scene → panouri → optiuni → total. */
  .client-stack{
    display:grid;
    gap:22px;
    grid-template-columns:340px minmax(0,1fr) 380px;
    grid-template-areas:
      "panels     scene      total"
      "panels     options    total"
      "dimensiuni dimensiuni dimensiuni";
    align-items:start;
  }
  @media (max-width:1180px){
    .client-stack{
      grid-template-columns:340px minmax(0,1fr);
      grid-template-areas:
        "panels     scene"
        "panels     options"
        "total      total"
        "dimensiuni dimensiuni";
    }
  }
  @media (max-width:900px){
    .client-stack{
      grid-template-columns:minmax(0,1fr);
      grid-template-areas:"scene" "panels" "options" "total" "dimensiuni";
    }
  }
  .area-scene{grid-area:scene;}
  .area-panels{grid-area:panels;}
  .area-options{grid-area:options;}
  .area-total{grid-area:total;}
  .client-stack > .card + .card{margin-top:0;} /* spacing already comes from grid gap */

  .card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    padding:22px;
    min-width:0;
  }
  .card + .card{margin-top:18px;}
  .card h2{
    font-family:ui-serif,Georgia,serif;
    font-size:17px;
    font-weight:600;
    margin:0 0 4px;
  }
  .card .sub{
    font-size:12.5px;
    color:var(--muted);
    margin:0 0 18px;
    line-height:1.5;
  }

  /* ---------- brush palette (panel-type picker) ---------- */
  .swatch{
    flex:none;
    width:34px;height:34px;
    border-radius:9px;
    display:flex;align-items:center;justify-content:center;
    background:var(--surface-2);
    border:1px solid var(--border);
  }
  .swatch svg{width:18px;height:18px;display:block;}
  .ptype-name{
    font-size:13.5px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:7px;
  }
  .tag-dot{width:8px;height:8px;border-radius:50%;flex:none;}
  .ptype-main{flex:1 1 40px; min-width:0;}

  .brush-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 10px;
    margin:0 -10px;
    border-radius:10px;
    cursor:pointer;
    -webkit-user-select:none;
    user-select:none;
    transition:background .12s ease, box-shadow .12s ease;
  }
  .brush-row:hover{background:var(--surface-2);}
  .brush-row.active{background:var(--surface-2); box-shadow:inset 0 0 0 2px var(--row-color,var(--accent));}
  .brush-row:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .count-badge{
    flex:none; min-width:30px; text-align:center;
    font:700 12.5px/1 -apple-system,sans-serif;
    font-variant-numeric:tabular-nums;
    color:var(--ink-2);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:999px;
    padding:6px 9px;
  }

  .propbar{
    display:flex;
    height:10px;
    width:100%;
    border-radius:999px;
    overflow:hidden;
    margin-top:14px;
    background:var(--surface-2);
  }
  .propbar span{height:100%; transition:width .25s ease;}

  /* ---------- presetari ---------- */
  /* Pana acum `.preset-btn` nu avea nicio regula CSS: cele 11 presetari se
     afisau ca butoane brute de sistem, stivuite, si faceau cardul de panouri
     cel mai inalt din pagina. Ca etichete care curg pe randuri ocupa ~250px mai
     putin si echilibreaza coloanele. */
  #preset-rows{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:2px;
  }
  .preset-btn{
    font-family:inherit;
    font-size:12px;
    font-weight:600;
    line-height:1;
    padding:8px 12px;
    border-radius:999px;
    color:var(--ink-2);
    background:var(--surface-2);
    border:1px solid var(--border);
    cursor:pointer;
    transition:background .12s ease, border-color .12s ease, color .12s ease;
  }
  .preset-btn:hover{border-color:var(--accent); color:var(--accent);}
  .preset-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .preset-btn.active{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--accent-ink);
  }

  .reset-btn{
    margin-top:18px;
    width:100%;
    padding:10px 14px;
    font:600 12.5px/1 -apple-system,sans-serif;
    color:var(--ink);
    background:var(--surface-2);
    border:1px solid var(--border-strong);
    border-radius:9px;
    cursor:pointer;
  }
  .reset-btn:hover{border-color:var(--accent); color:var(--accent);}
  /* Cele doua butoane stateau unul sub altul, fiecare pe toata latimea — greu
     vizual pentru doua actiuni secundare. Pe un rand se citesc ca o pereche. */
  .panel-actions{display:flex; gap:8px; margin-top:18px;}
  .panel-actions .reset-btn{margin-top:0;}

  /* ---------- extra options (checkbox add-ons) ---------- */
  .option-row{
    display:flex; align-items:center; gap:10px;
    padding:12px 0; cursor:pointer; min-width:0;
  }
  .option-row + .option-row{border-top:1px solid var(--border);}
  .option-row input[type="checkbox"]{
    flex:none; width:18px; height:18px; accent-color:var(--accent); cursor:pointer;
  }
  .option-name{flex:1 1 auto; font-size:13.5px; font-weight:600; min-width:0;}
  .option-price{
    flex:none; font-size:13px; font-weight:700;
    font-variant-numeric:tabular-nums; color:var(--ink-2);
  }
  .option-row:has(input:checked) .option-price{color:var(--accent);}

  /* ---------- cabin scene ---------- */
  .scene-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; min-width:0;}
  .tool-pill{
    flex:none;
    display:flex; align-items:center; gap:7px;
    font:700 11.5px/1 -apple-system,sans-serif;
    padding:7px 11px;
    border-radius:999px;
    background:var(--accent-soft);
    color:var(--accent);
    white-space:nowrap;
  }
  .tool-pill .dot{width:9px;height:9px;border-radius:50%;flex:none;}

  .stage{
    width:100%;
    display:flex;
    justify-content:center;
    padding:26px 10px 10px;
    -webkit-perspective:1700px;
    perspective:1700px;
    overflow:visible;
    cursor:grab;
    touch-action: pan-y;
    -webkit-user-select:none;
    user-select:none;
  }
  .stage.dragging{cursor:grabbing;}
  .cabin{
    position:relative;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transform:rotateX(-13deg) rotateY(-30deg);
    transform:rotateX(-13deg) rotateY(-30deg);
  }
  .face{position:absolute; top:0; left:0;}
  .wall{display:flex;}
  .wall-front{box-shadow:0 0 0 1px var(--wood-shadow) inset;}
  .wall-back{box-shadow:0 0 0 1px var(--wood-shadow) inset;}
  .wall-right{box-shadow:0 0 0 1px var(--wood-shadow) inset;}
  .wall-left{box-shadow:0 0 0 1px var(--wood-shadow) inset;}
  /* Shading uses a plain overlay, not filter() — iOS/WebKit fails to render
     filter() on elements inside a preserve-3d context (the whole scene goes blank). */
  .wall::after{content:"";position:absolute; inset:0; pointer-events:none;}
  .wall-back::after{background:rgba(20,15,10,.42);}
  .wall-right::after{background:rgba(20,15,10,.14);}
  .wall-left::after{background:rgba(20,15,10,.30);}
  .panel{
    position:relative;
    flex:none;
    border-right:3px solid var(--trim-white);
    cursor:pointer;
    outline-offset:-2px;
  }
  .panel:last-child{border-right:0;}
  .panel:hover, .panel:focus-visible{outline:2px solid var(--active-color,#fff);}
  .panel:focus-visible{outline-width:3px;}
  .panel .tag{position:absolute; top:0; left:0; right:0; height:4px;}
  .p-usa{background:linear-gradient(180deg,var(--trim-white) 0%,var(--trim-shade) 100%);}
  .p-usa .inset, .p-fereastra .inset{position:absolute; border:1px solid rgba(0,0,0,.28); border-radius:2px; background:linear-gradient(160deg,var(--glass-a),var(--glass-b)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);}
  .p-usa .handle{position:absolute; width:5px; height:5px; border-radius:50%; background:#e9c77a; box-shadow:0 0 0 1px rgba(0,0,0,.4);}
  .p-fereastra{background:linear-gradient(180deg,var(--trim-white) 0%,var(--trim-shade) 100%);}
  .p-fereastra .inset.top-pane::after{content:"";position:absolute; inset:3px; border:1px solid rgba(0,0,0,.22); border-radius:1px;}
  .p-sticla{background:linear-gradient(180deg,var(--trim-white) 0%,var(--trim-shade) 100%);}
  .p-sticla .inset{position:absolute; left:6%; right:6%; top:6%; bottom:6%; border:1px solid rgba(0,0,0,.28); border-radius:2px; background:linear-gradient(155deg,var(--glass-a),var(--glass-b)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);}
  .p-sticla .shine{position:absolute; top:0; bottom:0; width:26%; background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,0) 60%);}
  .p-sticla .tie{position:absolute; left:6%; right:6%; top:50%; height:2px; margin-top:-1px; background:var(--trim-white); box-shadow:0 0 0 1px rgba(0,0,0,.15);}
  .p-lambriu{background:repeating-linear-gradient(180deg,var(--trim-white) 0 6px,var(--trim-shade) 6px 7px);}
  .p-sipci{background:repeating-linear-gradient(180deg,var(--trim-white) 0 5px,rgba(0,0,0,.22) 5px 8px);}
  .p-gol{background:transparent;}
  .floor-interior{
    background:repeating-linear-gradient(90deg, var(--floor-white) 0 9px, var(--trim-shade) 9px 10px);
    box-shadow:0 -2px 6px rgba(0,0,0,.15) inset;
  }

  .roof-top{
    background:
      repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 2px,transparent 2px 15px),
      linear-gradient(100deg,var(--trim-white),var(--trim-shade));
    box-shadow:0 2px 0 rgba(0,0,0,.15) inset;
  }
  .roof-top.roof-metal{
    background:
      repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 2px, transparent 2px 13px),
      repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 1px, transparent 1px 13px),
      linear-gradient(100deg, var(--metal-roof-b), var(--metal-roof-a));
    box-shadow:0 2px 0 rgba(0,0,0,.25) inset;
  }
  .roof-fascia{background:var(--trim-shade);}
  .ground-shadow{
    position:absolute;
    border-radius:50%;
    background:radial-gradient(closest-side, rgba(0,0,0,.24), rgba(0,0,0,.08) 55%, transparent 75%);
  }
  .gutter-run{background:linear-gradient(90deg,var(--gutter-brown),var(--gutter-brown-dark));border-radius:2px;box-shadow:0 0 0 1px var(--trim-white),0 1px 0 rgba(0,0,0,.3);}
  .gutter-down{background:linear-gradient(90deg,var(--gutter-brown),var(--gutter-brown-dark));border-radius:2px;box-shadow:0 0 0 1px var(--trim-white);}

  .rotate-controls{
    display:flex; align-items:center; justify-content:center; gap:12px;
    margin-top:16px; flex-wrap:wrap;
  }
  .rotate-btn{
    border:1px solid var(--border-strong);
    background:var(--surface-2);
    color:var(--ink);
    font:600 12px/1 -apple-system,sans-serif;
    padding:9px 14px;
    border-radius:8px;
    cursor:pointer;
  }
  .rotate-btn:hover{border-color:var(--accent); color:var(--accent);}
  .drag-hint{font-size:11.5px; color:var(--muted);}

  /* ---------- legend ---------- */
  .legend{
    display:flex; flex-wrap:wrap; gap:8px;
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid var(--border);
  }
  .chip{
    display:flex; align-items:center; gap:7px;
    padding:6px 10px 6px 8px;
    border-radius:999px;
    background:var(--surface-2);
    border:1px solid var(--border);
    font-size:12px;
    font-weight:600;
  }
  .chip .dot{width:9px;height:9px;border-radius:50%;flex:none;}
  .chip .n{color:var(--muted); font-variant-numeric:tabular-nums; font-weight:700;}
  .chip[data-empty="true"]{opacity:.45;}

  /* ---------- summary ---------- */
  .summary-card{
    border-color:var(--total-accent);
    background:linear-gradient(180deg,var(--total-soft),transparent 60%);
    text-align:center;
  }
  .summary-card h2{margin-bottom:14px;}
  .total-figure{
    font-family:ui-serif,Georgia,serif;
    font-size:clamp(38px,6vw,54px);
    font-weight:700;
    color:var(--total-accent);
    font-variant-numeric:tabular-nums;
    line-height:1.1;
  }
  .total-caption{font-size:12.5px; color:var(--muted); margin-top:8px;}
  .offer-btn{
    margin-top:18px;
    width:100%;
    padding:12px 16px;
    font:700 13px/1 -apple-system,sans-serif;
    color:var(--total-accent-ink);
    background:var(--total-accent);
    border:1px solid var(--total-accent);
    border-radius:9px;
    cursor:pointer;
  }
  .offer-btn:hover{filter:brightness(1.08);}

  /* ---------- printable offer (hidden on screen, shown only for window.print()) ---------- */
  .offer-print{display:none;}
  @media print{
    body{margin:0;}
    .app{display:none;}
    .offer-print{
      display:block;
      color-scheme:light;
      background:#ffffff;
      color:#1a1512;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
      padding:0;
    }
    @page{ size:A4; margin:16mm; }
    .offer-header{
      display:flex; align-items:flex-start; justify-content:space-between;
      border-bottom:2px solid #7a342a; padding-bottom:14px; margin-bottom:18px;
    }
    .offer-brand{font-family:Georgia,serif; font-size:22px; font-weight:700; color:#7a342a;}
    .offer-meta{text-align:right;}
    .offer-title{font-size:15px; font-weight:700; color:#1a1512;}
    .offer-date{font-size:12px; color:#6b6459; margin-top:2px;}
    .offer-render{display:flex; justify-content:center; padding:14px 0 22px;}
    .offer-render svg{display:block; width:100%; max-width:520px; height:auto;}
    .offer-section{margin:20px 0; break-inside:avoid;}
    .offer-section h3{
      font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
      color:#6b6459; border-bottom:1px solid #ddd8cc; padding-bottom:6px; margin:0 0 8px;
    }
    .offer-table{width:100%; border-collapse:collapse; font-size:13px;}
    .offer-table td{padding:6px 2px; border-bottom:1px solid #eee8da; color:#1a1512;}
    .offer-table td:last-child{text-align:right; font-variant-numeric:tabular-nums; font-weight:600;}
    .offer-total{
      display:flex; align-items:baseline; justify-content:space-between;
      margin-top:22px; padding-top:14px; border-top:2px solid #1a1512;
    }
    .offer-total .k{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#1a1512;}
    .offer-total .v{font-family:Georgia,serif; font-size:26px; font-weight:700; color:#7a342a; font-variant-numeric:tabular-nums;}
    .offer-footer{
      margin-top:28px; padding-top:14px; border-top:1px solid #eee8da;
      text-align:center;
    }
    .offer-footer-name{font-size:12px; font-weight:700; color:#1a1512; margin-bottom:3px;}
    .offer-footer-line{font-size:11px; color:#6b6459; line-height:1.6;}
  }

/* ---------- formulare ---------- */
.form-row{display:flex; gap:8px; flex-wrap:wrap;}
.form-row > label{flex:1 1 140px; min-width:0;}
#form-oferta label, #form-dimensiuni label{display:block; text-align:left; font-size:12px; color:var(--ink-2); margin-bottom:8px;}
#form-oferta input, #form-oferta select, #form-oferta textarea,
#form-dimensiuni input, #form-dimensiuni select{
  width:100%; padding:9px 10px; margin-top:3px; font-size:13.5px;
  color:var(--ink); background:var(--surface); border:1px solid var(--border-strong);
  border-radius:8px; font-family:inherit;
}
#form-oferta input:focus-visible, #form-oferta select:focus-visible,
#form-dimensiuni input:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.camp-invalid{border-color:var(--cat-gol) !important;}
.gdpr-row{display:flex !important; align-items:flex-start; gap:8px; margin:10px 0 4px;}
.gdpr-row input{width:auto !important; flex:none; margin-top:2px;}
.form-error{color:var(--cat-gol); font-size:12.5px; margin:8px 0 0; text-align:left;}
.total-warn{color:var(--cat-usa); font-size:12.5px; margin:8px 0 0;}
.succes-icon{font-size:34px;}
.pdf-btn{
  margin-top:14px; width:100%; padding:11px 16px;
  font:700 13px/1 -apple-system,sans-serif;
  color:var(--accent); background:transparent;
  border:1px solid var(--accent); border-radius:9px; cursor:pointer;
}
.pdf-btn:disabled{opacity:.4; cursor:not-allowed;}
.pdf-hint, .pdf-disclaimer{font-size:11px; color:var(--muted); margin:6px 0 0;}
.area-dimensiuni{grid-area:dimensiuni;}

/* Cardul de dimensiuni sta pe toata latimea, jos. Fara asta cele 5 campuri s-ar
   intinde fiecare pe ~250px si randul ar arata gol. `display:contents` pe
   .form-row scoate div-ul din calcul, ca cele 4 label-uri dinauntru sa devina
   direct celule in grila de 5 — toate campurile intra pe un singur rand.
   Inputurile ascunse si honeypot-ul au display:none, deci nu ocupa celule. */
@media (min-width:901px){
  #form-dimensiuni{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:0 12px;
    align-items:end;
  }
  #form-dimensiuni .form-row{display:contents;}
  #form-dimensiuni .form-error{grid-column:1/-1;}
  #form-dimensiuni .offer-btn{grid-column:1/-1; justify-self:start; max-width:300px;}
}