/* Garaj telescopic modular – stilurile paginii de produs, limitate la .garaj. */
.garaj .faq{border-top:0}
.garaj{--ral:#3D4247;--ok:#2F8A4A;--err:#C2412D}
.garaj p{margin:0}
.garaj img{max-width:100%;display:block}
/* separare fundal: pete de lumină */
.garaj .aura{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.garaj .aura i{position:absolute;border-radius:50%;filter:blur(80px)}
.garaj .aura i:nth-child(1){width:42vw;height:42vw;left:-12vw;top:-10vw;background:rgba(242,179,0,.28)}
.garaj .aura i:nth-child(2){width:36vw;height:36vw;right:-10vw;top:10vh;background:rgba(150,165,178,.28)}

/* ===== Hero produs ===== */
.garaj .phero{position:relative;padding:118px 0 clamp(50px,6vw,80px)}
.garaj .phero .wrap{position:relative;z-index:1}
.garaj .crumbs{font-size:.92rem;color:var(--muted);margin-bottom:22px}
.garaj .crumbs a{text-decoration:none}
.garaj .crumbs a:hover{color:var(--ink)}
.garaj .pgrid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:start}
@media (max-width:980px){.garaj .pgrid{grid-template-columns:1fr}}

.garaj .gallery{position:sticky;top:100px}
@media (max-width:980px){.garaj .gallery{position:relative;top:0}}
.garaj .stage{position:relative;aspect-ratio:1/1;border-radius:30px;overflow:hidden;background:var(--card)}
.garaj .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .6s ease,transform 1.2s cubic-bezier(.2,.75,.15,1)}
.garaj .stage img.on{opacity:1;transform:none}
.garaj .stage img.fit{object-fit:contain;background:#fff;padding:4%}
.garaj .stage .tag{position:absolute;left:18px;top:18px;z-index:3;padding:7px 12px;border-radius:999px;font:700 .85rem var(--body);background:var(--mark);color:#141518}
.garaj .stage .nav-g{position:absolute;right:14px;bottom:14px;z-index:3;display:flex;gap:8px}
.garaj .stage .nav-g button{width:44px;height:44px;border-radius:12px;border:1px solid var(--glass-b);background:rgba(255,255,255,.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink);font-size:1.2rem;cursor:pointer}
.garaj .thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:12px}
.garaj .thumbs button{aspect-ratio:1/1;border-radius:14px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:var(--card);transition:border-color .25s,transform .25s}
.garaj .thumbs button:hover{transform:translateY(-2px)}
.garaj .thumbs button[aria-pressed="true"]{border-color:var(--mark)}
.garaj .thumbs img{width:100%;height:100%;object-fit:cover}
.garaj .thumbs button.fitb img{object-fit:contain;background:#fff}

.garaj .pinfo h1{font-size:clamp(2.4rem,4.2vw,3.9rem);font-weight:800;line-height:.95}
.garaj .split .ch{display:inline-block;transform:translateY(110%);opacity:0}
.garaj .split .wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;white-space:nowrap}
.garaj .sku{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;color:var(--muted);font-size:.95rem}
.garaj .sku b{color:var(--ink)}
.garaj .stock{display:inline-flex;align-items:center;gap:8px;color:var(--ok);font-weight:700}
.garaj .stock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(47,138,74,.15)}
.garaj .lead{margin-top:18px;color:var(--muted);font-size:1.12rem;max-width:56ch}
.garaj .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.garaj .chips span{padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:600;font-size:.93rem}

/* comutator PF / Firmă */
.garaj .seg{display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:14px;background:var(--bg-2);position:relative}
.garaj .seg button{position:relative;z-index:1;border:0;background:transparent;padding:10px 16px;font-weight:700;font-size:.95rem;color:var(--muted);cursor:pointer;border-radius:10px;transition:color .25s}
.garaj .seg button[aria-pressed="true"]{color:var(--ink)}
.garaj .seg .pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:10px;background:var(--card);box-shadow:0 6px 16px -8px rgba(0,0,0,.3);transition:transform .45s cubic-bezier(.2,.75,.15,1)}
.garaj .seg.pj .pill{transform:translateX(100%)}

.garaj .pricebox{margin-top:26px;border-radius:26px;padding:24px}
.garaj .pb-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.garaj .pb-top small{color:var(--muted);font-weight:600}
.garaj .price{display:flex;align-items:baseline;gap:12px;margin-top:16px;flex-wrap:wrap}
.garaj .price .v{font:800 clamp(3rem,6vw,4.4rem)/1 var(--display)}
.garaj .price .t{font:700 1.4rem var(--display);color:var(--rust)}
.garaj .price-sub{color:var(--muted);margin-top:6px;min-height:1.6em}
.garaj .buy{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.garaj .qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.garaj .qty button{width:46px;height:52px;border:0;background:transparent;font-size:1.3rem;cursor:pointer;color:var(--ink)}
.garaj .qty button:hover{background:var(--bg)}
.garaj .qty input{width:52px;height:52px;border:0;text-align:center;font:700 1.25rem var(--display);background:transparent;color:var(--ink)}
.garaj .buy .btn{flex:1;min-width:230px}
.garaj .assure{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.garaj .assure div{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;color:var(--muted)}
.garaj .assure svg{flex:none;width:22px;height:22px;color:var(--rust);margin-top:2px}
.garaj .assure b{display:block;color:var(--ink)}
.garaj .pcontact{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 18px;font-weight:600}
.garaj .pcontact a{text-decoration:none}
.garaj .pcontact a:hover{text-decoration:underline}
@media (max-width:520px){.garaj .assure{grid-template-columns:1fr}}

/* ===== Bara cu cote ===== */
.garaj .dimsband{position:relative;padding:0 0 clamp(60px,8vw,110px)}
.garaj .dimgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.garaj .dimc{border-radius:24px;padding:24px;position:relative;overflow:hidden}
.garaj .dimc b{display:block;font:800 clamp(2.4rem,4vw,3.6rem)/1 var(--display)}
.garaj .dimc b em{font-style:normal;font-size:.5em;color:var(--muted);margin-left:4px}
.garaj .dimc span{color:var(--muted);font-weight:600}
.garaj .dimc .rule{position:absolute;left:24px;right:24px;bottom:14px;height:10px;border-left:2px solid var(--mark);border-right:2px solid var(--mark)}
.garaj .dimc .rule::before{content:"";position:absolute;left:0;right:0;top:4px;height:2px;background:var(--mark);transform-origin:left;transform:scaleX(var(--k,1))}
@media (max-width:860px){.garaj .dimgrid{grid-template-columns:1fr 1fr}}

/* ===== Secțiuni ===== */
.garaj section.s{padding:clamp(70px,9vw,130px) 0;position:relative}
.garaj .s-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.garaj .s-head p{color:var(--muted);max-width:46ch}

/* animație telescopică */
.garaj .demo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:stretch}
.garaj .demo-stage{border-radius:30px;padding:clamp(18px,3vw,32px);display:flex;flex-direction:column;justify-content:space-between;gap:16px;background:radial-gradient(ellipse at 50% 20%,#fff 0,#EFEFEA 80%)}
.garaj #tele{width:100%;height:auto;display:block;overflow:visible}
.garaj .rangew{display:flex;flex-direction:column;gap:8px}
.garaj .range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--mark) var(--p,100%),var(--bg-2) var(--p,100%));outline:none}
.garaj .range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--ink);cursor:grab;box-shadow:0 6px 14px -4px rgba(0,0,0,.35)}
.garaj .range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--ink);cursor:grab}
.garaj .range-lbl{display:flex;justify-content:space-between;font-weight:700;color:var(--muted);font-size:.95rem}
.garaj .range-lbl b{color:var(--ink);font-family:var(--display);font-size:1.3rem}
.garaj .modules{border-radius:30px;padding:clamp(20px,3vw,30px);display:flex;flex-direction:column;gap:16px}
.garaj .modules p{color:var(--muted)}
.garaj .mgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.garaj .mgrid div{padding:14px;border-radius:16px;background:var(--bg)}
.garaj .mgrid b{display:block;font:700 1.5rem/1.1 var(--display)}
.garaj .mgrid span{color:var(--muted);font-size:.88rem;font-weight:600}
@media (max-width:980px){.garaj .demo{grid-template-columns:1fr}}

/* fișă tehnică */
.garaj .spec{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:20px;align-items:start}
.garaj .tabs{display:flex;flex-direction:column;gap:8px;position:sticky;top:110px}
.garaj .tabs button{display:flex;align-items:center;gap:14px;text-align:left;padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:transparent;color:var(--ink);font:700 1.05rem var(--body);cursor:pointer;transition:background .25s,border-color .25s,transform .25s}
.garaj .tabs button i{font:800 1.3rem var(--display);font-style:normal;color:var(--muted)}
.garaj .tabs button:hover{transform:translateX(3px)}
.garaj .tabs button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.garaj .tabs button[aria-selected="true"] i{color:var(--mark)}
.garaj .panels{border-radius:30px;padding:clamp(20px,3vw,34px);min-height:380px}
.garaj .panel{display:none}
.garaj .panel.on{display:block;animation:g-pin .55s cubic-bezier(.2,.75,.15,1)}
@keyframes g-pin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.garaj .panel h3{font-size:2rem;margin-bottom:16px}
.garaj .st{width:100%;border-collapse:collapse}
.garaj .st th,.garaj .st td{text-align:left;vertical-align:top;padding:14px 12px 14px 0;border-bottom:1px solid var(--line)}
.garaj .st th{width:36%;color:var(--muted);font-weight:600}
.garaj .st td{font-weight:600}
.garaj .st small{display:block;color:var(--muted);font-weight:400;margin-top:2px}
.garaj .qtag{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;background:rgba(242,179,0,.2);font:700 .85rem var(--body);white-space:nowrap}
@media (max-width:860px){.garaj .spec{grid-template-columns:1fr}.garaj .tabs{position:relative;top:0;flex-direction:row;overflow-x:auto;padding-bottom:4px}.garaj .tabs button{flex:none}.garaj .st th{width:42%}}

/* conținutul kitului */
.garaj .kit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.garaj .kitc{border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:8px;transition:transform .3s}
.garaj .kitc:hover{transform:translateY(-4px)}
.garaj .kitc b{font:800 2.6rem/1 var(--display)}
.garaj .kitc b em{font-style:normal;font-size:.55em;color:var(--rust);margin-left:6px}
.garaj .kitc span{color:var(--muted)}
@media (max-width:980px){.garaj .kit{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.garaj .kit{grid-template-columns:1fr}}

/* comandă */
.garaj .ogrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
.garaj .ocard{border-radius:30px;padding:clamp(20px,3vw,34px)}
.garaj .step+.step{margin-top:30px;padding-top:30px;border-top:1px solid var(--line)}
.garaj .step h3{display:flex;align-items:center;gap:12px;font-size:1.8rem}
.garaj .step h3 .n{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--mark);font:800 1.25rem var(--display);color:#141518}
.garaj .step .hint{color:var(--muted);margin:6px 0 16px}
.garaj .fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.garaj .f{display:flex;flex-direction:column;gap:6px}
.garaj .f.full{grid-column:1/-1}
.garaj .f label{font-weight:700;font-size:.93rem}
.garaj .f label i{color:var(--err);font-style:normal}
.garaj .f label small{color:var(--muted);font-weight:400}
.garaj .f input,.garaj .f select,.garaj .f textarea{font:400 1.05rem var(--body);padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);width:100%;min-width:0}
.garaj .f textarea{min-height:100px;resize:vertical}
.garaj .f input:focus,.garaj .f select:focus,.garaj .f textarea:focus{border-color:var(--mark);outline:none;box-shadow:0 0 0 4px rgba(242,179,0,.2)}
.garaj .f .msg{display:none;color:var(--err);font-size:.88rem;font-weight:600}
.garaj .f.bad input,.garaj .f.bad select{border-color:var(--err)}
.garaj .f.bad .msg{display:block}
.garaj .pjf{display:contents}
.garaj .pjf[hidden]{display:none}
.garaj .payopt{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:18px;border:2px solid var(--mark);background:rgba(242,179,0,.08)}
.garaj .payopt .dot{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;margin-top:2px}
.garaj .payopt .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--ink)}
.garaj .payopt b{display:block;font-size:1.05rem}
.garaj .payopt span{color:var(--muted)}
.garaj .agree{display:flex;gap:12px;align-items:flex-start;margin-top:22px;cursor:pointer}
.garaj .agree input{width:22px;height:22px;flex:none;accent-color:var(--ink);margin-top:2px}
.garaj .agree.bad span{color:var(--err)}
.garaj .agree a{font-weight:700}
.garaj .hp{position:absolute;left:-9999px}
@media (max-width:980px){.garaj .ogrid{grid-template-columns:1fr}}
@media (max-width:560px){.garaj .fields{grid-template-columns:1fr}}

.garaj .sum{position:sticky;top:100px;border-radius:30px;padding:24px;display:flex;flex-direction:column;gap:16px}
.garaj .sum h3{font-size:1.8rem}
.garaj .sum-item{display:flex;gap:14px;align-items:center}
.garaj .sum-item .th{width:76px;height:76px;flex:none;border-radius:16px;overflow:hidden;background:var(--bg)}
.garaj .sum-item .th img{width:100%;height:100%;object-fit:cover}
.garaj .sum-item b{display:block;font:700 1.25rem/1.1 var(--display)}
.garaj .sum-item small{color:var(--muted)}
.garaj .sum .seg{width:100%}
.garaj .rows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.garaj .rows div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.garaj .rows div span{color:var(--muted)}
.garaj .rows div b{font-weight:700;text-align:right}
.garaj .rows .tot{border-bottom:0;padding-top:14px}
.garaj .rows [hidden]{display:none}
.garaj .rows .tot span{color:var(--ink);font-weight:700;font-size:1.1rem}
.garaj .rows .tot b{font:800 2.2rem/1 var(--display)}
.garaj .sum .g-note{color:var(--muted);font-size:.9rem}
.garaj .sum .btn{width:100%}
.garaj .sum .fnote{font-weight:600;min-height:1.4em;color:var(--err);font-size:.95rem}
@media (max-width:980px){.garaj .sum{position:relative;top:0}}

/* întrebări frecvente */
.garaj .faq{max-width:900px}
.garaj .faq details{border-bottom:1px solid var(--line)}
.garaj .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:700 1.5rem/1.15 var(--display)}
.garaj .faq summary::-webkit-details-marker{display:none}
.garaj .faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:10px;background:var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316181B' stroke-width='2.4'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .35s}
.garaj .faq details[open] summary::after{transform:rotate(45deg)}
.garaj .faq details p{padding:0 0 22px;color:var(--muted);max-width:70ch}

/* bară fixă de cumpărare */
.garaj .sticky-buy{position:fixed;left:50%;bottom:16px;z-index:90;transform:translate(-50%,160%);transition:transform .55s cubic-bezier(.2,.75,.15,1);width:min(520px,calc(100vw - 24px));border-radius:20px;padding:10px 10px 10px 18px;display:flex;align-items:center;gap:14px}
.garaj .sticky-buy.on{transform:translate(-50%,0)}
.garaj .sticky-buy .nm{font:700 1.2rem/1.1 var(--display)}
.garaj .sticky-buy .pr{color:var(--muted);font-weight:600;font-size:.92rem}
.garaj .sticky-buy .btn{margin-left:auto}
@media (max-width:520px){.garaj .sticky-buy .nm{font-size:1.05rem}}

/* confirmare */
.garaj .g-scrim{position:fixed;inset:0;background:rgba(20,22,25,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .4s;z-index:140;display:grid;place-items:center;padding:16px}
.garaj .g-scrim.on{opacity:1;pointer-events:auto}
.garaj .modal{width:min(520px,100%);border-radius:30px;padding:clamp(24px,4vw,40px);background:var(--card);box-shadow:var(--shadow);text-align:center;transform:translateY(30px) scale(.97);transition:transform .55s cubic-bezier(.2,.75,.15,1)}
.garaj .g-scrim.on .modal{transform:none}
.garaj .modal .ok{width:72px;height:72px;border-radius:22px;background:var(--mark);display:grid;place-items:center;margin:0 auto 18px}
.garaj .modal h3{font-size:2.4rem}
.garaj .modal .code{display:inline-block;margin:14px 0 6px;padding:8px 16px;border-radius:12px;background:var(--bg);font:800 1.6rem var(--display);letter-spacing:.04em}
.garaj .modal p{color:var(--muted);margin-top:10px}
.garaj .modal .btn{margin-top:22px}

@media (prefers-reduced-motion:reduce){
  .garaj .split .ch{transform:none;opacity:1}
  .garaj .stage img,.garaj .panel.on,.garaj .sticky-buy,.garaj .modal,.garaj .seg .pill{transition:none;animation:none}
}