/* Tinu House Art — magazin online. Culori preluate de pe tinuhouseart.ro */
:root{
  --red:#ee212b;
  --red-dk:#c9151e;
  --red-soft:#fdecec;
  --ink:#1e1c1d;
  --ink-2:#393738;
  --gray:#6c6d6f;
  --gray-l:#9a9899;
  --line:#e4e4e3;
  --bg:#f7f7f6;
  --ok:#1f7a44;
  --r:8px;
  --wrap:1240px;
  --sh:0 1px 2px rgba(0,0,0,.04), 0 10px 30px -14px rgba(0,0,0,.18);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:#fff;color:var(--ink);
  font-family:"Poppins","Karla",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{margin:0;line-height:1.18;font-weight:700;letter-spacing:-.02em}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.center{text-align:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--red);color:#fff;
  border:1px solid var(--red);padding:12px 22px;border-radius:var(--r);font-weight:600;font-size:14.5px;
  cursor:pointer;transition:.15s;text-align:center}
.btn:hover{background:var(--red-dk);border-color:var(--red-dk)}
.btn-lg{padding:15px 28px;font-size:15.5px}
.btn-sm{padding:8px 14px;font-size:13px}
.btn-block{width:100%}
.btn-ghost{background:transparent;color:var(--ink);border-color:#c9c9c8}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-white{background:#fff;color:var(--ink);border-color:#fff}
.btn-white:hover{background:#eee;border-color:#eee}
.btn[disabled]{opacity:.5;pointer-events:none}
.link{color:var(--red);font-weight:600}
.link:hover{text-decoration:underline}

/* ── top contact bar + header ──
   Recreated from the tinuhouseart.ro presentation header: a light contact strip on top, then a
   white menu bookended by two angular red panels (logo left, "Solicită ofertă" right). Shop
   navigation and the VAT switch are kept. Full width so the red panels bleed to the edges. */

/* ── top contact bar ── */
.topbar{background:#f5f4f3;border-bottom:1px solid var(--line);font-size:12.5px}
.cb{display:flex;align-items:stretch;justify-content:space-between;gap:16px;min-height:40px}
.cb-l,.cb-r{display:flex;align-items:center}
.cb-l{padding-left:22px}
.cb-item{display:flex;align-items:center;gap:7px;padding:9px 12px;color:var(--gray);white-space:nowrap;transition:.15s}
.cb-item:hover{color:var(--ink)}
.cb-item svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--red);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cb-sep{width:1px;height:18px;background:var(--line);flex:none;margin:0 3px}
.cb-status{display:flex;align-items:center;gap:7px;padding:9px 12px;color:var(--gray);white-space:nowrap}
.cb-status .dot{width:7px;height:7px;border-radius:50%;background:#b5b5b4;flex:none}
.cb-status.open .dot{background:#25a55c;box-shadow:0 0 0 3px rgba(37,165,92,.18)}
.cb-status b{font-weight:600}
.cb-status.open b{color:#1c8a4c}
.cb-status span{color:var(--gray-l)}
.cb-phone{display:flex;align-items:center;gap:7px;padding:9px 12px;color:var(--ink);font-weight:700;white-space:nowrap;transition:.15s}
.cb-phone:hover{color:var(--red)}
.cb-phone svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--red);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tva-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;white-space:nowrap;color:var(--gray);padding:0 12px}
.tva-toggle input{accent-color:var(--red)}
.cb-social{display:flex;align-self:stretch;background:var(--ink);margin-left:8px}
.cb-social a{display:grid;place-items:center;width:42px;color:#d7d6d6;transition:.15s}
.cb-social a:hover{background:var(--red);color:#fff}
.cb-social svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── main menu ── */
.site-head{position:sticky;top:0;z-index:60;background:#fff;color:var(--ink);
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(0,0,0,.02)}
.head-main{display:flex;align-items:stretch;height:76px}

/* Left red angular panel behind the logo; the white tile overlaps its slanted edge. */
.logo{position:relative;flex:none;display:flex;align-items:center;gap:13px;padding:0 34px 0 104px;color:var(--ink);z-index:1}
.logo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:148px;background:var(--red);z-index:-1;
  clip-path:polygon(0 0,100% 0,calc(100% - 30px) 100%,0 100%);
  background-image:linear-gradient(135deg,rgba(255,255,255,.12) 0 40%,transparent 40%),linear-gradient(52deg,rgba(0,0,0,.09) 0 27%,transparent 27%)}
.logo-tile{flex:none;display:grid;place-items:center;width:44px;height:44px;background:#fff;border-radius:11px;box-shadow:0 3px 10px -3px rgba(0,0,0,.3)}
.logo-tile svg{width:30px;height:20px;display:block}
.logo-word{display:flex;align-items:baseline;gap:6px;font-weight:800;font-size:22px;letter-spacing:-.01em;white-space:nowrap}
.logo-word b{color:var(--red)}
.logo-word span{color:var(--ink)}

/* Nav links: uppercase, active in red with an underline. */
.nav{display:flex;align-items:stretch;margin-left:20px}
.drop{position:relative;display:flex;align-self:stretch}
.nav>a,.drop>a{display:flex;align-items:center;gap:6px;padding:0 15px;
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#2c2a2b;transition:.15s;white-space:nowrap;position:relative}
.nav>a:hover,.drop>a:hover{color:var(--red)}
.nav>a.on,.drop.on>a{color:var(--red)}
.nav>a.on::after,.drop.on>a::after{content:"";position:absolute;left:15px;right:15px;bottom:22px;
  height:2.5px;background:var(--red);border-radius:3px}
.drop>a i{font-style:normal;font-size:9px;color:var(--gray-l)}
.dd{position:absolute;top:100%;left:0;background:#fff;color:var(--ink);border-radius:var(--r);
  box-shadow:0 20px 40px -14px rgba(0,0,0,.35);border-top:3px solid var(--red);min-width:250px;padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.15s}
.drop:hover .dd{opacity:1;visibility:visible;transform:none}
.dd a{display:block;padding:9px 12px;border-radius:6px;font-size:14px;text-transform:none;font-weight:600;letter-spacing:0}
.dd a:hover{background:var(--bg);color:var(--red)}
.dd a span{display:block;font-size:11.5px;font-weight:400;color:var(--gray-l)}

/* Right side: search + red angular "Solicită ofertă" bleeding to the edge. */
.head-right{display:flex;align-items:stretch;margin-left:auto}
.cart-toggle{position:relative;display:grid;place-items:center;width:56px;background:#fff;border:0;border-left:1px solid var(--line);
  color:var(--ink);cursor:pointer;transition:.15s}
.cart-toggle:hover{color:var(--red);background:var(--bg)}
.cart-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cart-count{position:absolute;top:17px;right:11px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--red);color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center}
.cart-count[hidden]{display:none}
.search-btn{display:grid;place-items:center;width:56px;color:var(--ink);transition:.15s}
.search-btn:hover{color:var(--red)}
.search-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cta-offer{display:flex;align-items:center;gap:9px;background:var(--red);color:#fff;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;font-size:13.5px;padding:0 30px 0 44px;
  clip-path:polygon(28px 0,100% 0,100% 100%,0 100%);transition:.15s}
.cta-offer:hover{background:var(--red-dk)}
.cta-offer svg{width:19px;height:19px;flex:none;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.burger{display:none;background:none;border:0;color:var(--ink);font-size:22px;cursor:pointer;padding:6px 14px;align-self:center}

/* ── page furniture ── */
.crumbs{background:var(--bg);border-bottom:1px solid var(--line);font-size:13px;color:var(--gray)}
.crumbs .wrap{padding-top:12px;padding-bottom:12px}
.crumbs a:hover{color:var(--red)}
.crumbs span{margin:0 7px;color:#c4c4c3}

.page-head{padding:44px 0 8px}
.page-head h1{font-size:38px}
.page-head p{color:var(--gray);max-width:720px;margin:12px 0 0;font-size:16.5px}

.section{padding:74px 0}
.section-tight{padding:52px 0}
.sec-h{font-size:32px;letter-spacing:-.025em}
.sec-p{color:var(--gray);max-width:720px;margin:12px 0 40px;font-size:16.5px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px}
.sec-head .sec-p{margin-bottom:0}
.alt{background:var(--bg)}
.dark{background:var(--ink);color:#fff}
.dark .sec-p{color:#a9a6a7}

/* ── hero ── */
.hero{background:var(--bg);border-bottom:1px solid var(--line);overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center;padding:70px 24px 74px}
.kicker{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:30px;padding:6px 14px;font-size:12.5px;font-weight:600;color:var(--gray)}
.kicker b{color:var(--red)}
.hero h1{font-size:52px;margin:20px 0 18px}
.hero h1 em{font-style:normal;color:var(--red)}
.hero-sub{font-size:17.5px;color:var(--gray);max-width:530px;margin:0 0 30px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.hero-facts{display:flex;gap:30px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px}
.hero-facts b{display:block;font-size:19px}
.hero-facts span{font-size:12.5px;color:var(--gray)}
.hero-art{position:relative;height:430px}
.hero-art img{position:absolute;border-radius:var(--r);box-shadow:var(--sh);object-fit:cover}
.hero-art .a1{width:80%;height:290px;top:0;right:0}
.hero-art .a2{width:56%;height:220px;bottom:0;left:0;border:6px solid #fff;border-radius:12px}
.hero-badge{position:absolute;bottom:26px;right:0;background:#fff;border-radius:var(--r);box-shadow:var(--sh);
  padding:14px 18px;font-size:13px;max-width:210px}
.hero-badge b{display:block;color:var(--red);font-size:22px}

/* ── how it works ── */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.st{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px}
.st b.n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--red-soft);
  color:var(--red);font-size:15px;margin-bottom:16px}
.st h3{font-size:19px;margin-bottom:8px}
.st p{color:var(--gray);font-size:14.5px;margin:0}
.how-section{overflow:hidden}
.roof-journey{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.journey-line{position:absolute;left:15%;right:15%;top:48px;height:2px;background:linear-gradient(90deg,var(--red),#f39b43,var(--ok));opacity:.28}
.journey-line::after{content:"";position:absolute;inset:-1px 0;background:linear-gradient(90deg,transparent,var(--red),transparent);
  animation:journey-flow 3.8s ease-in-out infinite}
.journey-step{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;
  min-height:340px;display:flex;flex-direction:column;overflow:hidden;transition:.18s}
.journey-step::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--red),#ffb057)}
.journey-step:hover{box-shadow:var(--sh);transform:translateY(-2px);border-color:#d9d9d8}
.step-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.step-head b.n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--red);
  color:#fff;font-size:15px;box-shadow:0 0 0 8px var(--red-soft)}
.step-head span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gray);
  background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:6px 10px;white-space:nowrap}
.step-visual{height:150px;margin:0 0 18px;background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);
  border:1px solid #eeeeed;border-radius:var(--r);display:grid;place-items:center;overflow:hidden}
.step-visual svg{width:min(100%,300px);height:100%;overflow:visible}
.step-visual path,.step-visual rect,.step-visual circle{vector-effect:non-scaling-stroke}
.step-visual text{font:600 10px "Poppins",sans-serif;fill:var(--gray)}
.measure-ground,.measure-house,.measure-roof,.measure-roof-inner,.measure-arrow,.measure-tip,.measure-arc{
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.measure-ground{stroke:#c9c9c8;stroke-width:2;stroke-dasharray:190;stroke-dashoffset:190;animation:measure-draw 6.5s ease-in-out infinite}
.measure-house{stroke:var(--ink);stroke-width:2.4;stroke-dasharray:260;stroke-dashoffset:260;animation:measure-draw 6.5s ease-in-out infinite}
.measure-roof-rise{transform-box:fill-box;transform-origin:50% 100%;animation:measure-roof-rise 6.5s ease-in-out infinite}
.measure-roof{stroke:var(--ink);stroke-width:2.4}
.measure-roof-inner{stroke:var(--red);stroke-width:3}
.measure-arrow{stroke:var(--ink);stroke-width:1.8;stroke-dasharray:130;stroke-dashoffset:130}
.measure-tip{stroke:var(--ink);stroke-width:1.8}
.measure-arc{stroke:var(--red);stroke-width:2.2}
.measure-callout{opacity:0}
.measure-width{animation:measure-width-show 6.5s ease-in-out infinite}
.measure-width .measure-arrow{animation:measure-width-line 6.5s ease-in-out infinite}
.measure-height{animation:measure-height-show 6.5s ease-in-out infinite}
.measure-height .measure-arrow{animation:measure-height-line 6.5s ease-in-out infinite}
.measure-final{animation:measure-final-show 6.5s ease-in-out infinite}
.measure-final text{fill:var(--ink);font-weight:700}
.measure-final .measure-sub{fill:var(--gray);font-size:9px;font-weight:600}
.ground{stroke:#c9c9c8;stroke-width:2;stroke-linecap:round}
.house-wall,.small-house{fill:#fff;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round}
.roof-back{fill:none;stroke:#bdbdbc;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.roof-face{fill:#fff0f1;stroke:var(--red);stroke-width:3;stroke-linejoin:round}
.roof-panel{fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:160;stroke-dashoffset:160;animation:draw-roof 3.8s ease-in-out infinite}
.panel-b{animation-delay:.18s}
.dim{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-dasharray:5 5;animation:dash-move 2s linear infinite}
.dim-h{animation-delay:.1s}
.dim-i{animation-delay:.2s}
.dim-p{animation-delay:.3s;stroke:var(--red);stroke-dasharray:4 4}
.dot{fill:var(--red)}
.sheet,.calc{fill:#fff;stroke:var(--ink);stroke-width:2.2}
.sheet-line,.screen,.total{fill:none;stroke:#b7b7b6;stroke-width:3;stroke-linecap:round}
.screen{stroke:var(--red)}
.sheet-line{stroke-dasharray:60;stroke-dashoffset:60;animation:line-fill 3.8s ease-in-out infinite}
.l2{animation-delay:.16s}.l3{animation-delay:.32s}
.check{fill:none;stroke:var(--ok);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:42;stroke-dashoffset:42;animation:check-pop 3.8s ease-in-out infinite}
.c2{animation-delay:.25s}.c3{animation-delay:.5s}
.key{fill:#f1f1f0;stroke:#c9c9c8;stroke-width:1.4;animation:key-tap 3.8s ease-in-out infinite}
.k2,.k5{animation-delay:.2s}.k3,.k6{animation-delay:.4s}
.total{stroke:var(--red);stroke-width:4;stroke-dasharray:115;stroke-dashoffset:115;animation:line-fill 3.8s ease-in-out infinite .65s}
.installed{fill:#fff0f1;stroke:var(--red);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:92;stroke-dashoffset:92;animation:draw-roof 3.8s ease-in-out infinite}
.p2{animation-delay:.18s}
.truck{animation:truck-roll 3.8s ease-in-out infinite}
.truck-body,.truck-cab{fill:var(--red);stroke:var(--red);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.truck-front{fill:none;stroke:var(--red);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.truck-window{fill:#fff;stroke:var(--red);stroke-width:1.8;stroke-linejoin:round}
.wheel{fill:#fff;stroke:var(--ink);stroke-width:3}
.logo-mark{stroke:#fff;stroke-width:3;stroke-linecap:round}
.lifted-panel{fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;animation:panel-place 3.8s ease-in-out infinite}
.journey-step h3{font-size:19px;margin-bottom:8px;letter-spacing:0}
.journey-step p{color:var(--gray);font-size:14.5px;margin:0}

@keyframes journey-flow{0%,18%{transform:translateX(-80%);opacity:0}45%,75%{opacity:.55}100%{transform:translateX(80%);opacity:0}}
@keyframes measure-draw{0%{stroke-dashoffset:260;opacity:1}16%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes measure-width-show{0%,15%{opacity:0}30%,100%{opacity:1}}
@keyframes measure-width-line{0%,15%{stroke-dashoffset:130}30%,100%{stroke-dashoffset:0}}
@keyframes measure-height-show{0%,30%{opacity:0}46%,100%{opacity:1}}
@keyframes measure-height-line{0%,30%{stroke-dashoffset:130}46%,100%{stroke-dashoffset:0}}
@keyframes measure-roof-rise{0%,46%{opacity:0;transform:scaleY(.08)}50%{opacity:1;transform:scaleY(.08)}77%,100%{opacity:1;transform:scaleY(1)}}
@keyframes measure-final-show{0%,77%{opacity:0;transform:translateY(4px)}92%,100%{opacity:1;transform:translateY(0)}}
@keyframes draw-roof{0%,18%{stroke-dashoffset:160}42%,100%{stroke-dashoffset:0}}
@keyframes dash-move{to{stroke-dashoffset:-20}}
@keyframes line-fill{0%,20%{stroke-dashoffset:60}48%,100%{stroke-dashoffset:0}}
@keyframes check-pop{0%,28%{stroke-dashoffset:42;opacity:.3}52%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes key-tap{0%,28%,100%{fill:#f1f1f0}38%,45%{fill:var(--red-soft)}}
@keyframes truck-roll{0%,18%{transform:translateX(24px);opacity:.55}48%,100%{transform:translateX(0);opacity:1}}
@keyframes panel-place{0%,30%{transform:translate(28px,26px);opacity:.35}62%,100%{transform:translate(0,0);opacity:1}}

/* ── category / product cards ── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:.18s}
.card:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.card img{height:190px;width:100%;object-fit:cover}
.card-b{padding:20px;flex:1;display:flex;flex-direction:column}
.card-b h3{font-size:18px;margin-bottom:6px}
.card-b p{color:var(--gray);font-size:13.5px;margin:0 0 14px}
.price{margin-top:auto;font-weight:700;color:var(--ink);font-size:16px}
.price small{font-weight:400;color:var(--gray);font-size:12.5px;display:block}

.tag{position:absolute;top:12px;left:12px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;padding:4px 9px;border-radius:20px}
.tag-ok{background:var(--ok)}
.card-media{position:relative}

/* ── calculator banner ── */
.cta-band{background:linear-gradient(120deg,var(--ink) 0%,#3a2224 100%);color:#fff;border-radius:12px;
  padding:48px;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.cta-band h2{font-size:32px;margin-bottom:14px}
.cta-band p{color:#b8b5b6;font-size:16px;margin:0 0 26px;max-width:520px}
.cta-list{list-style:none;padding:0;margin:0 0 28px;font-size:14.5px}
.cta-list li{padding:5px 0 5px 24px;position:relative;color:#dcdada}
.cta-list li::before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:800}
.cta-shapes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cta-shape{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);
  padding:18px 10px;text-align:center;transition:.15s}
.cta-shape:hover{background:rgba(255,255,255,.12);border-color:var(--red)}
.cta-shape svg{width:58px;height:40px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round;margin:0 auto}
.cta-shape span{display:block;font-size:12.5px;margin-top:6px;color:#dcdada}

/* ── why / trust ── */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.why div{border-top:3px solid var(--red);padding-top:16px}
.why b{display:block;font-size:16.5px;margin-bottom:6px}
.why p{color:var(--gray);font-size:14px;margin:0}
.quote{margin:44px auto 0;max-width:840px;text-align:center;font-size:20px;font-style:italic;color:var(--ink-2)}
.quote small{display:block;font-style:normal;font-size:13px;color:var(--gray-l);margin-top:10px}

/* ── lister ── */
.lister{display:grid;grid-template-columns:270px 1fr;gap:36px;align-items:start;padding-bottom:80px}
.shop-lister > .shop-head{grid-column:1/-1;padding:44px 0 8px}
.shop-lister > .shop-head h1{font-size:38px}
.shop-lister > .shop-head p{color:var(--gray);max-width:720px;margin:12px 0 0;font-size:16.5px}
.filters{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;position:sticky;top:100px}
.fgrp{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.fgrp:last-child{border:0;margin:0;padding:0}
.fgrp h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--gray);margin-bottom:12px}
.fopt{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:14px;cursor:pointer}
.fopt input{accent-color:var(--red);width:15px;height:15px}
.fopt span{color:var(--gray-l);font-size:12px;margin-left:auto}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:32px;height:32px;border-radius:50%;background:var(--c);border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0}
.sw:hover{transform:scale(1.08)}
.sw.on{box-shadow:0 0 0 2px #fff inset,0 0 0 3px var(--red)}
.clear-f{background:none;border:0;color:var(--red);font-weight:600;font-size:13px;cursor:pointer;padding:0;margin-top:14px}

.lister-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.count{color:var(--gray);font-size:14px}
.count b{color:var(--ink)}
.sortsel{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:#fff;font-size:14px}
.empty{background:var(--bg);border:1px dashed var(--line);border-radius:var(--r);padding:50px;text-align:center;color:var(--gray)}

.prod-card .card-b{padding:18px}
.prod-card h3{font-size:17px;margin-bottom:2px}
.prod-meta{font-size:12.5px;color:var(--gray);margin-bottom:10px}
.warranty{display:inline-block;align-self:flex-start;width:fit-content;font-size:11.5px;font-weight:600;
  color:var(--ok);background:#e8f4ec;padding:2px 8px;border-radius:20px;margin-bottom:12px}
.dots{display:flex;gap:5px;margin-bottom:14px}
.dot{width:15px;height:15px;border-radius:50%;background:var(--c);border:1px solid rgba(0,0,0,.15)}
.dot-more{font-size:11px;color:var(--gray-l);align-self:center;margin-left:2px}

/* ── product page ── */
.pdp{display:grid;grid-template-columns:1fr 1.02fr;gap:52px;align-items:start;padding:36px 0 80px}
.gallery img.main{width:100%;height:420px;object-fit:cover;border-radius:var(--r);border:1px solid var(--line)}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.thumbs img{height:76px;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:pointer}
.thumbs img:hover,.thumbs img.on{border-color:var(--red)}
.brandline{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--red)}
.pdp h1{font-size:34px;margin:8px 0 10px}
.pdp-lead{color:var(--gray);margin:0 0 8px}
.stars{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray);margin-bottom:24px}
.stars b{color:#e8a33d;letter-spacing:2px}

.block{border-top:1px solid var(--line);padding:24px 0}
.block-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.block-h h4{font-size:15px}
.block-h span{font-size:13px;color:var(--gray)}
.opts3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.opt{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:15px;cursor:pointer;transition:.15s;background:#fff}
.opt:hover{border-color:#b9b9b8}
.opt.on{border-color:var(--red);box-shadow:0 0 0 1px var(--red) inset}
.opt input{display:none}
.opt b{display:block;font-size:14.5px}
.opt span{display:block;font-size:12px;color:var(--gray);margin:2px 0 8px}
.opt em{font-style:normal;font-weight:700;font-size:14px}
.opt .best{position:absolute;top:-10px;right:10px;background:var(--ok);color:#fff;font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:20px}
.opt span.warranty{display:inline-block;color:var(--ok);margin:8px 0 0}   /* beats .opt span */
.rals{display:flex;gap:9px;flex-wrap:wrap}
.ral{width:38px;height:38px;border-radius:50%;background:var(--c);border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0;transition:.12s}
.ral:hover{transform:scale(1.08)}
.ral.on{box-shadow:0 0 0 2px #fff inset,0 0 0 3px var(--red)}

.qty-row{display:flex;gap:12px;align-items:flex-end}
.qty-field{flex:1}
.qty-field label{display:block;font-size:13px;color:var(--gray);margin-bottom:6px}
.qty-in{position:relative}
.qty-in input{width:100%;border:1px solid var(--line);border-radius:var(--r);padding:14px 52px 14px 14px;font-size:17px;font-weight:600;outline:none}
.qty-in input:focus{border-color:var(--red)}
.qty-in i{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--gray);font-size:13px}
.helper{background:var(--red-soft);border-radius:var(--r);padding:12px 15px;font-size:13.5px;margin-top:12px;color:#8a2b30}
.helper a{font-weight:700;text-decoration:underline}

details.adv{margin-top:16px;border:1px solid var(--line);border-radius:var(--r);padding:0 16px}
details.adv summary{cursor:pointer;padding:14px 0;font-size:14px;font-weight:600;list-style:none}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::before{content:"+ ";color:var(--red);font-weight:800}
details.adv[open] summary::before{content:"– "}
details.adv .in{padding-bottom:16px}
.sheets{width:100%;border-collapse:collapse;font-size:13.5px}
.sheets th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--gray);
  font-weight:600;padding-bottom:8px;border-bottom:1px solid var(--line)}
.sheets th:nth-child(2),.sheets th:nth-child(3){text-align:right}
.sheets td{padding:8px 0;border-bottom:1px solid #f2f2f2}
.sheets input{width:78px;border:1px solid var(--line);border-radius:6px;padding:8px 10px;text-align:right;outline:none}
.sheets input:focus{border-color:var(--red)}
.sheets td:nth-child(2),.sheets .sm{text-align:right}
.sheets .sm{font-weight:600;width:82px}
.sheets td:last-child{text-align:right;width:34px}
.rm{border:0;background:none;color:#c0c0c0;cursor:pointer;font-size:14px}
.rm:hover{color:var(--red)}
.add-row{margin-top:12px;background:none;border:1px dashed #c8c8c7;border-radius:6px;padding:10px;font-size:13px;
  color:var(--gray);cursor:pointer;width:100%}
.add-row:hover{border-color:var(--red);color:var(--red)}

.buybox{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:24px;margin-top:24px}
.bb-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px}
.bb-total{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1}
.bb-sub{font-size:12.5px;color:var(--gray);margin-top:6px}
.bb-unit{text-align:right;font-size:13px;color:var(--gray)}
.bb-unit b{display:block;color:var(--ink);font-size:17px}
.bb-actions{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.bb-actions #addToCartBtn{grid-column:1/-1}
.bb-trust{display:flex;gap:18px;margin-top:16px;font-size:12.5px;color:var(--ok);font-weight:600;flex-wrap:wrap}
.note-small{font-size:12px;color:var(--gray-l);margin:12px 0 0}

/* Step numbers are written by product-tinu.js, since two configurator blocks only exist
   for some products and PHP can't know the final sequence. */
.step-n{font-weight:inherit;color:var(--gray-l)}
.variant-sel{width:100%;border:1px solid var(--line);border-radius:var(--r);padding:12px 13px;
  font:inherit;font-size:14.5px;background:#fff;color:var(--ink);cursor:pointer}
.variant-sel:focus{border-color:var(--red);outline:none}

.spec{margin-top:32px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.spec h4{font-size:14px;padding:16px 20px;background:var(--bg);border-bottom:1px solid var(--line)}
.spec dl{margin:0;padding:6px 20px 16px}
.spec dl div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid #f2f2f2;font-size:13.5px}
.spec dl div:last-child{border:0}
.spec dt{color:var(--gray)}
.spec dd{margin:0;font-weight:600;text-align:right}

/* ═══════════ CALCULATOR (light) ═══════════ */

/* /calculator hub: pick roof or fence before entering a wizard. */
.calc-hub{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:32px}
.ch-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;box-shadow:var(--sh);transition:.15s}
.ch-card:hover{border-color:var(--red);transform:translateY(-2px)}
.ch-art{background:var(--bg);border-bottom:1px solid var(--line);padding:30px;display:grid;place-items:center}
.ch-art svg{width:100%;max-width:220px;height:auto;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ch-l{stroke:var(--ink-2);stroke-width:2.4}
.ch-f{stroke:var(--red);stroke-width:3.4}
.ch-s{stroke:var(--ink-2);stroke-width:2.4;opacity:.55}
.ch-b{padding:28px;display:flex;flex-direction:column;flex:1}
.ch-b h2{font-size:24px}
.ch-b > p{color:var(--gray);margin:10px 0 0;font-size:14.5px}
.ch-list{list-style:none;padding:16px 0 0;margin:0 0 20px;font-size:13.5px}
.ch-list li{padding:5px 0 5px 20px;position:relative;color:var(--gray)}
.ch-list li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}
.ch-go{margin-top:auto;font-weight:700;color:var(--red);font-size:14.5px}

.ch-help{display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;
  margin-top:26px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:28px 30px}
.ch-help h3{font-size:19px}
.ch-help p{color:var(--gray);margin:8px 0 0;font-size:14.5px;max-width:620px}
.ch-help-a{display:flex;gap:10px;flex-wrap:wrap}

.steps{display:flex;list-style:none;margin:0 0 26px;padding:0;gap:8px;overflow-x:auto}
.steps li{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r);background:#fff;
  border:1px solid var(--line);cursor:pointer;white-space:nowrap;flex:1;transition:.15s}
.steps li:hover{border-color:#c0c0bf}
.steps li b{width:24px;height:24px;border-radius:50%;background:var(--bg);border:1px solid var(--line);
  color:var(--gray);display:grid;place-items:center;font-size:11.5px;flex:none}
.steps li span{font-size:13px;color:var(--gray)}
.steps li.on{border-color:var(--red);background:var(--red-soft)}
.steps li.on b{background:var(--red);border-color:var(--red);color:#fff}
.steps li.on span{color:var(--ink);font-weight:600}
.steps li.done b{background:var(--ok);border-color:var(--ok);color:#fff;font-size:0}
.steps li.done b::after{content:"✓";font-size:12px}

.wz{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh)}
.wz-panel{display:none;padding:38px}
.wz-panel.on{display:block}
.wz-h{font-size:25px}
.wz-p{color:var(--gray);margin:8px 0 28px}
.wz-mini{font-size:12.5px;color:var(--gray-l);margin:10px 0 0}
.wz-note{background:var(--red-soft);border-radius:var(--r);padding:13px 16px;font-size:13.5px;color:#8a2b30;margin-top:20px}
.wz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}

.shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.shape{border:1px solid var(--line);border-radius:var(--r);padding:24px 10px;text-align:center;cursor:pointer;transition:.15s;background:#fff}
.shape:hover{border-color:#b9b9b8}
.shape.on{border-color:var(--red);background:var(--red-soft)}
.shape input{display:none}
.shape svg{width:66px;height:44px;fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linejoin:round;margin:0 auto}
.shape.on svg{stroke:var(--red)}
.shape span{display:block;font-size:13.5px;color:var(--gray);margin-top:8px}
.shape.on span{color:var(--ink);font-weight:600}

.chipbar{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:24px}
.chipbar-2{grid-template-columns:1.4fr 1fr}
.chipbar h4,.colorpick h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--gray);margin-bottom:10px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{background:#fff;border:1px solid var(--line);color:var(--gray);border-radius:24px;padding:8px 14px;
  font-size:13px;cursor:pointer;transition:.15s}
.chip i{font-style:normal;font-size:11px;color:var(--gray-l);margin-left:4px}
.chip:hover{border-color:#b9b9b8}
.chip.on{background:var(--red);border-color:var(--red);color:#fff}
.chip.on i{color:#ffd2d4}
.colorpick{padding-bottom:24px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.colorpick h4 b{text-transform:none;letter-spacing:0;color:var(--ink);font-size:12.5px;margin-left:8px;font-weight:600}

.models{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.models-4{grid-template-columns:repeat(4,1fr)}
.mdl{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;
  background:#fff;transition:.15s;display:block}
.mdl:hover{border-color:#b9b9b8}
.mdl.on{border-color:var(--red);box-shadow:0 0 0 1px var(--red) inset}
.mdl input{display:none}
.mdl img{height:120px;width:100%;object-fit:cover}
.mdl-b{padding:16px}
.mdl-b b{display:block;font-size:15.5px}
.mdl-b span{display:block;font-size:12px;color:var(--gray);margin:2px 0 10px}
.mdl-b em{font-style:normal;font-weight:700;font-size:16px}
.mdl-b .w{display:block;font-size:12px;color:var(--ok);font-weight:600;margin-top:2px}
.mdl .best{position:absolute;top:10px;right:10px;background:var(--red);color:#fff;font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:20px}

.meas{display:grid;grid-template-columns:1.1fr .9fr;gap:38px;align-items:start}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fields label{font-size:13px;color:var(--gray)}
.fields label b{color:var(--red);margin-left:4px}
.fields .inp{position:relative;display:block;margin-top:6px;font-style:normal}
.fields .inp i{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-style:normal;
  font-size:12.5px;color:var(--gray-l);pointer-events:none}
.fields input{width:100%;border:1px solid var(--line);border-radius:var(--r);padding:12px 46px 12px 13px;
  font-size:16px;font-weight:600;outline:none}
.fields input:focus{border-color:var(--red)}
.viz-box{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.viz{width:100%;height:auto;display:block}
.v-wall{fill:#e9e9e7;stroke:#cfcecc}
.v-roof{fill:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.v-dim{stroke:#b9b9b8;stroke-width:1;stroke-dasharray:3 3}
.v-lbl{fill:var(--gray);font-size:10px;text-anchor:middle;font-family:inherit}
.v-lbl-l{text-anchor:start}
.v-red{fill:var(--red);font-weight:700}

.sketch{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:start}
#plan{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.s-roof{opacity:.9}
.s-out{fill:none;stroke:var(--ink-2);stroke-width:1.5}
.s-seam{stroke:rgba(255,255,255,.4);stroke-width:1}
.s-ridge{stroke:#fff;stroke-width:2.5}
.s-hip{stroke:#fff;stroke-width:1.5;stroke-dasharray:5 3}

/* fence calculator: the run seen from the street (#elev) and one bay at scale (#plan) */
.f-run{opacity:.9}
.f-gate{fill:#fff;stroke:var(--red);stroke-width:1.5;stroke-dasharray:4 3}
.f-post{fill:var(--ink-2)}
.f-ground{stroke:#c9c9c8;stroke-width:2}
.f-slat{opacity:.95}
.f-back{opacity:.45}
.f-rail{stroke:var(--ink-2);stroke-width:3;opacity:.5}

.side{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.side h4{font-size:14.5px;margin-bottom:14px}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--gray);
  font-weight:600;padding-bottom:8px;border-bottom:1px solid var(--line)}
.tbl th:last-child,.tbl td:last-child{text-align:right}
.tbl td{padding:11px 0;border-bottom:1px solid #ececeb;color:var(--gray);vertical-align:top}
.tbl td b{color:var(--ink);display:block}
.tbl td span{display:block;font-size:11.5px;color:var(--gray-l)}
.tbl td i{font-style:normal;font-size:11.5px;color:var(--gray-l)}
.t-warn{color:#8a5a00 !important;font-size:12px}
.side-tot{display:flex;justify-content:space-between;padding-top:16px;font-size:13px;color:var(--gray)}
.side-tot b{color:var(--ink);font-size:18px}

.accs{display:grid;gap:9px}
.acc{display:grid;grid-template-columns:22px 1fr 140px 110px;align-items:center;gap:12px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;cursor:pointer;transition:.15s}
.acc:hover{border-color:#c0c0bf}
.acc.on{border-color:#f0bfc1;background:#fffafa}
.acc input{accent-color:var(--red);width:16px;height:16px}
.acc-n{font-size:14.5px;color:var(--gray)}
/* what the measured quantity turns into on the order: "19 × Coamă unghiulară" */
.acc-sub{display:block;font-style:normal;font-size:12px;color:var(--gray-l);margin-top:2px}
.acc.on .acc-n{color:var(--ink)}
.acc-q{font-size:13px;color:var(--gray-l);text-align:right}
.acc-p{font-weight:700;text-align:right}

/* Hybrid price toggle (CALC_SHOW_PRICES=false): keep the markup and price data in the
   DOM, just hide anything money-related the visitor would see. JS handles the parts it
   builds itself (accessory prices, offer table, totals). */
.calc-no-prices .mdl-b em,
.calc-no-prices .acc-p,
.calc-no-prices .price-only{display:none}

.offer{display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:start}
.offer-head{display:flex;align-items:center;gap:15px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 18px;margin-bottom:20px}
.oh-sw{width:42px;height:42px;border-radius:50%;border:1px solid rgba(0,0,0,.15);flex:none}
.offer-head b{display:block;font-size:15.5px}
.offer-head span{font-size:12.5px;color:var(--gray)}
.offer-tbl td:nth-child(2){text-align:right;white-space:nowrap}
.offer-tbl td:last-child{font-weight:600;color:var(--ink)}
.o-montaj{background:var(--red-soft)}
.offer-r{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:26px;position:sticky;top:100px}
.or-tot{padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:20px}
.or-tot span{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--gray)}
.or-tot strong{display:block;font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.or-tot small{font-size:12.5px;color:var(--gray)}
.montaj-opt{display:flex;gap:11px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:15px 16px;margin-bottom:16px;cursor:pointer}
.montaj-opt.on{border-color:var(--red);background:#fffafa}
.montaj-opt input{accent-color:var(--red);margin-top:3px}
.montaj-opt b{font-size:14.5px}
.montaj-opt span{display:block;font-size:12.5px;color:var(--gray);margin:3px 0}
.montaj-opt em{font-style:normal;font-weight:700;color:var(--red);font-size:13.5px}
.offer-r .btn{margin-bottom:10px}
.or-trust{list-style:none;padding:18px 0 0;margin:14px 0 0;border-top:1px solid var(--line);font-size:12.5px}
.or-trust li{padding:4px 0 4px 20px;position:relative;color:var(--gray)}
.or-trust li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}

/* ── cart ── */
.cart{display:grid;grid-template-columns:1.5fr .8fr;gap:26px;align-items:start;padding-bottom:80px}
.cart-list{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:6px 24px 24px}
.ci{display:flex;align-items:center;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.ci img{width:80px;height:80px;object-fit:cover;border-radius:6px}
.ci-body{flex:1}
.ci-body b{display:block;font-size:15px}
.ci-body span{display:block;font-size:13px;color:var(--gray)}
.ci-body .cut{color:var(--red);font-weight:600}
.ci-body .stk{color:var(--ok);font-weight:600}
.ci-p{font-size:16.5px;font-weight:700;white-space:nowrap}
.ci-x{border:0;background:none;color:#c0c0c0;font-size:16px;cursor:pointer}
.ci-x:hover{color:var(--red)}
.upsell{margin-top:26px;background:linear-gradient(120deg,var(--ink) 0%,#3a2224 100%);color:#fff;
  border-radius:var(--r);padding:28px;display:grid;grid-template-columns:1.1fr .9fr;gap:26px}
.upsell h4{font-size:20px}
.upsell p{font-size:14px;color:#b8b5b6;margin:8px 0 14px}
.up-opt{display:block;border:1px solid #55494a;border-radius:var(--r);padding:15px 16px;cursor:pointer;
  margin-bottom:10px;background:rgba(0,0,0,.22);transition:.15s}
.up-opt:hover{border-color:#8a7677}
.up-opt input{accent-color:var(--red);margin-right:8px}
.up-opt b{font-size:14.5px}
.up-opt span{display:block;font-size:12.5px;color:#a9a6a7;padding-left:24px}
.up-opt em{display:block;font-style:normal;font-size:13.5px;color:var(--red);font-weight:700;padding-left:24px;margin-top:4px}
.summary{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;position:sticky;top:100px}
.summary h4{font-size:17px;margin-bottom:18px}
.sr{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:14px;color:var(--gray);border-bottom:1px solid #f2f2f2}
.sr b{color:var(--ink);white-space:nowrap}
.sr i{display:block;font-style:normal;font-size:11.5px;color:var(--gray-l)}
.sr-warn{background:#fff8e6;border:1px solid #f0dfb0;border-radius:6px;padding:10px 12px;color:#8a5a00;font-size:12.5px;margin-top:10px;border-bottom:0}
.sr-tot{border:0;padding:18px 0;font-size:16px;color:var(--ink);font-weight:700}
.sr-tot b{font-size:26px;letter-spacing:-.02em}
.pays{display:flex;gap:6px;margin-top:16px}
.pays span{flex:1;text-align:center;border:1px solid var(--line);border-radius:6px;padding:8px 0;font-size:11px;color:var(--gray)}

/* ── services / about / contact ── */
.srv{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.srv-c{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.srv-c h3{font-size:18px;margin-bottom:8px}
.srv-c p{color:var(--gray);font-size:14px;margin:0}
.srv-c .ic{width:44px;height:44px;border-radius:var(--r);background:var(--red-soft);color:var(--red);
  display:grid;place-items:center;font-size:20px;margin-bottom:16px}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:p}
.process div{position:relative;padding:0 22px 0 0}
.process div::before{counter-increment:p;content:counter(p);display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;background:var(--red);color:#fff;font-weight:700;font-size:14px;margin-bottom:14px}
.process div::after{content:"";position:absolute;top:17px;left:44px;right:14px;height:1px;background:var(--line)}
.process div:last-child::after{display:none}
.process h4{font-size:16px;margin-bottom:6px}
.process p{font-size:13.5px;color:var(--gray);margin:0}

.gallery-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery-3 img{height:230px;width:100%;object-fit:cover;border-radius:var(--r)}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;padding-bottom:80px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--gray);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;font-size:15px;outline:none;background:#fff}
.field input:focus,.field textarea:focus{border-color:var(--red)}
.field textarea{min-height:130px;resize:vertical}
.info-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:26px;margin-bottom:16px}
.info-card h4{font-size:16px;margin-bottom:14px}
.info-row{display:flex;gap:12px;padding:9px 0;font-size:14.5px;border-bottom:1px solid var(--line)}
.info-row:last-child{border:0}
.info-row .k{color:var(--gray);width:96px;flex:none;font-size:13px}
.map-ph{height:260px;border-radius:var(--r);background:var(--ink-2) url('/assets/images/tinu/home-right.png') center/cover;
  position:relative;overflow:hidden;display:grid;place-items:center}
.map-ph::after{content:"Str. Simion Mândrescu 34, Bistrița";position:relative;background:#fff;padding:12px 18px;
  border-radius:30px;font-size:13px;font-weight:600;box-shadow:var(--sh)}

/* ── footer ── */
.foot{background:#151314;color:#8b8889;padding:62px 0 0;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:46px}
.foot-logo{height:44px;margin-bottom:18px}
.foot p{max-width:400px;line-height:1.7;font-size:13.5px}
.foot-c{margin-top:18px;line-height:1.8}
.foot-c b{color:#fff;font-size:17px}
.foot h5{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:14px}
.foot a{display:block;padding:5px 0;font-size:13.5px}
.foot a:hover{color:#fff}
.foot-bot{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;border-top:1px solid #2a2728;padding-top:20px;
  padding-bottom:28px;font-size:11.5px;color:#5f5c5d;flex-wrap:wrap}
/* Legal links sit on one row; override the column links' display:block. */
.foot-legal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.foot-legal a,.foot-legal .foot-cookie-btn{display:inline;padding:0;font-size:12px;color:#8f8c8d;
  background:none;border:0;cursor:pointer;line-height:1.6;white-space:nowrap}
.foot-legal a:hover,.foot-legal .foot-cookie-btn:hover{color:#fff}

/* ── mobile drawer ── */
.drawer{position:fixed;inset:0;z-index:100;visibility:hidden}
.drawer.open{visibility:visible}
.drawer-scrim{position:absolute;inset:0;background:rgba(20,18,19,.55);opacity:0;transition:opacity .22s}
.drawer.open .drawer-scrim{opacity:1}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(88vw,370px);background:#fff;
  display:flex;flex-direction:column;overflow-y:auto;transform:translateX(100%);transition:transform .24s ease;
  box-shadow:-20px 0 50px -20px rgba(0,0,0,.5)}
.drawer.open .drawer-panel{transform:none}

.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line);background:var(--bg)}
.drawer-x{background:none;border:0;font-size:18px;color:var(--gray);cursor:pointer;
  width:36px;height:36px;border-radius:50%;flex:none}
.drawer-x:hover{background:#e8e8e7;color:var(--ink)}

.drawer-nav{display:flex;flex-direction:column;padding:10px 10px 6px}
.drawer-nav a{padding:13px 14px;border-radius:var(--r);font-size:16px;font-weight:600;color:var(--ink)}
.drawer-nav a:hover{background:var(--bg)}
.drawer-nav a.on{color:var(--red)}
.drawer-nav a.sub{font-size:14px;font-weight:400;color:var(--gray);padding:9px 14px 9px 28px;position:relative}
.drawer-nav a.sub::before{content:"";position:absolute;left:16px;top:50%;width:5px;height:1px;background:#c9c9c8}

.drawer-contact{margin-top:auto;padding:18px;border-top:1px solid var(--line);background:var(--bg)}
.drawer-contact .cb-phone{display:flex;justify-content:center;width:100%;padding:14px;font-size:16px;margin:0 0 14px}
.dw-item{display:flex;align-items:center;gap:10px;padding:9px 2px;font-size:14px;color:var(--gray)}
.dw-item:hover{color:var(--ink)}
.dw-item svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--red);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.dw-tva{margin:14px 0;padding:12px 2px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px}
.drawer-contact .cb-social{padding:4px 0 0;justify-content:flex-start;gap:6px}
.drawer-contact .cb-social a{background:#fff;border:1px solid var(--line)}

/* ── fixed call bar on phones ── */
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -8px 24px -16px rgba(0,0,0,.45)}
.mobile-cta .mc-call{flex:1.5}
.mobile-cta .mc-calc{flex:1;background:#fff}
.mobile-cta svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── responsive ── */
@media(max-width:1080px){
  .hero-in,.pdp,.cart,.meas,.sketch,.offer,.cta-band,.contact-grid,.lister,.upsell,.calc-hub{grid-template-columns:1fr}
  .grid-4,.why,.models,.chipbar,.process,.gallery-3,.steps3,.srv,.grid-3{grid-template-columns:1fr 1fr}
  .roof-journey{grid-template-columns:1fr;gap:18px;max-width:720px}
  .journey-line{left:44px;right:auto;top:0;bottom:0;width:2px;height:auto;background:linear-gradient(180deg,var(--red),#f39b43,var(--ok))}
  .journey-line::after{inset:0 -1px;background:linear-gradient(180deg,transparent,var(--red),transparent);animation:journey-flow-mobile 3.8s ease-in-out infinite}
  .journey-step{min-height:0;padding:22px 22px 22px 74px}
  .step-head{position:absolute;left:24px;top:24px;margin:0}
  .step-head span{display:none}
  .step-head b.n{width:38px;height:38px;box-shadow:0 0 0 6px #fff,0 0 0 8px var(--red-soft)}
  .step-visual{height:136px}
  .hero-art,.filters{display:none}
  .steps li span{display:none}
  .steps li{flex:none;padding:12px 14px}
  .acc{grid-template-columns:22px 1fr 110px}
  .acc-p{grid-column:2/4;text-align:left}
  .process div::after{display:none}
  .burger{display:block}
  .search-btn{display:none}
  .offer-r,.summary{position:static}
  /* the JS drawer replaces the inline menu on small screens */
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh);padding:10px}
  .nav>a,.drop>a{padding:13px 14px;border-radius:6px}
  .nav>a.on::after,.drop.on>a::after{display:none}
  .drop{position:static;flex-direction:column;align-self:auto}
  /* contact bar: the address is the first thing to go, then the status line */
  .cb-item.cb-addr{display:none}
  .cb-item.cb-addr + .cb-sep{display:none}
  .dd{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border-top:0;
    padding:0 0 0 14px;min-width:0}
  .dd a span{display:none}
}
@media(max-width:720px){
  .grid-4,.grid-3,.why,.models,.chipbar,.process,.gallery-3,.steps3,.srv,.foot-grid,
  .shapes,.fields,.opts3,.bb-actions,.form-row{grid-template-columns:1fr}
  .how-section .sec-p{margin-bottom:28px}
  .roof-journey{gap:14px}
  .journey-line{left:38px}
  .journey-step{padding:20px 18px 20px 64px}
  .step-head{left:20px;top:22px}
  .step-head b.n{width:34px;height:34px;font-size:14px}
  .step-visual{height:120px;margin-bottom:14px}
  .journey-step h3{font-size:18px}
  .journey-step p{font-size:14px}
  .hero h1{font-size:34px}
  .sec-h,.page-head h1,.shop-lister > .shop-head h1{font-size:26px}
  .wz-panel{padding:24px}
  .head-main{height:60px}
  /* The header keeps the logo + burger. The top bar moves into the drawer, the phone and
     the "Solicită ofertă" action into the fixed bar at the bottom. */
  .topbar{display:none}
  .cta-offer{display:none}
  .mobile-cta{display:flex}
  body{padding-bottom:78px}
  .logo{padding:0 18px 0 70px}
  .logo::before{width:98px;clip-path:polygon(0 0,100% 0,calc(100% - 22px) 100%,0 100%)}
  .logo-tile{width:38px;height:38px}
  .logo-word{font-size:18px}
  .burger{margin-left:auto}
  /* the sticky summary panels would sit under the call bar */
  .offer-r,.summary,.filters{bottom:auto}
}

@keyframes journey-flow-mobile{0%,18%{transform:translateY(-45%);opacity:0}45%,75%{opacity:.55}100%{transform:translateY(45%);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .journey-line::after,.measure-ground,.measure-house,.measure-roof-rise,.measure-width,.measure-width .measure-arrow,
  .measure-height,.measure-height .measure-arrow,.measure-final,.roof-panel,.dim,.sheet-line,.check,.key,.total,.installed,.truck,.lifted-panel{animation:none}
  .measure-ground,.measure-house,.measure-arrow,.roof-panel,.sheet-line,.check,.total,.installed{stroke-dashoffset:0}
  .measure-roof-rise,.measure-final,.truck,.lifted-panel{transform:none;opacity:1}
  .measure-callout{opacity:1}
}

/* ─────────────────────────────────────────────────────────────
   Shopping cart sidebar + notifications (kept from the e-shop
   engine, restyled to the Tinu House Art system).
   ───────────────────────────────────────────────────────────── */
.cart-overlay{position:fixed;inset:0;background:rgba(30,28,29,.5);opacity:0;display:none;
  transition:opacity .3s ease;z-index:1200}
.cart-sidebar{position:fixed;top:0;right:-400px;height:100%;width:400px;max-width:92vw;background:#fff;
  box-shadow:-12px 0 40px -18px rgba(0,0,0,.35);
  transition:right .28s ease;z-index:1300;display:flex;flex-direction:column}
.cart-header{display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--line)}
.cart-header h5{margin:0;font-size:18px;font-weight:800}
.cart-header .close-btn{background:none;border:0;font-size:28px;line-height:1;color:var(--gray);cursor:pointer}
.cart-header .close-btn:hover{color:var(--ink)}
.cart-body{flex:1;overflow-y:auto;padding:16px 22px}
.empty-cart{text-align:center;color:var(--gray);padding:48px 0}
.empty-cart p{margin-bottom:16px}
.cart-item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:start;
  padding:14px 0;border-bottom:1px solid var(--line)}
.cart-item-image img{width:64px;height:64px;object-fit:cover;border-radius:var(--r);background:var(--bg)}
.cart-item-title{font-weight:700;font-size:14px;line-height:1.3}
.cart-item-variant{font-size:12px;color:var(--gray);margin-top:2px}
.cart-item-price{font-weight:700;color:var(--red);margin-top:4px;font-size:14px}
.cart-item-quantity{display:inline-flex;align-items:center;gap:6px;margin-top:8px}
.cart-item-quantity .quantity-btn{width:26px;height:26px;border:1px solid var(--line);background:#fff;
  border-radius:6px;cursor:pointer;font-size:15px;line-height:1;color:var(--ink)}
.cart-item-quantity .quantity-btn:hover{border-color:var(--red);color:var(--red)}
.cart-item-quantity .quantity-input{width:40px;text-align:center;border:1px solid var(--line);
  border-radius:6px;height:26px;font-size:14px}
.cart-item-unit{font-size:12px;color:var(--gray)}
.cart-item-remove{background:none;border:0;color:var(--gray-l);cursor:pointer;font-size:15px}
.cart-item-remove:hover{color:var(--red)}
.cart-footer{border-top:1px solid var(--line);padding:18px 22px}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;
  font-weight:800;font-size:18px;margin-bottom:14px}
.cart-total #cartTotal{color:var(--red)}
.cart-note{font-size:12.5px;color:var(--gray);margin:0 0 14px;line-height:1.5}
.cart-notification{position:fixed;top:20px;right:20px;z-index:1400;display:flex;
  flex-direction:column;gap:10px}
.notification-item{background:var(--ink);color:#fff;border-radius:var(--r);padding:12px 16px;
  box-shadow:var(--sh);display:flex;align-items:center;gap:10px;min-width:240px}
.notification-icon{color:#5ad07f}
.notification-content{flex:1;font-size:14px}
.notification-close{background:none;border:0;color:#fff;opacity:.7;cursor:pointer}
.notification-close:hover{opacity:1}

/* Contact form feedback message */
.form-msg{margin-top:14px;padding:12px 16px;border-radius:var(--r);font-size:14px;font-weight:600}
.form-msg.ok{background:#e9f6ee;color:var(--ok);border:1px solid #bfe3cc}
.form-msg.err{background:var(--red-soft);color:var(--red-dk);border:1px solid #f6c9cc}

/* Legal / policy pages prose */
.legal{max-width:820px;margin:0 auto;padding:8px 24px 72px}
.legal .note{background:var(--red-soft);border:1px solid #f6c9cc;color:var(--red-dk);
  padding:12px 16px;border-radius:var(--r);font-size:13.5px;margin-bottom:28px}
.legal h2{font-size:20px;margin:32px 0 10px}
.legal h3{font-size:16px;margin:22px 0 8px}
.legal p,.legal li{color:var(--ink-2);font-size:15px;line-height:1.7}
.legal ul{padding-left:20px;margin:10px 0}
.legal li{margin:5px 0}
.legal .upd{color:var(--gray-l);font-size:13px;margin-top:6px}
.legal a{color:var(--red);font-weight:600}