/* ============================================================
   AGROFANATIC.RO — design system
   Negru otel + rosu semnal. Display condensat, date tehnice mono.
   ============================================================ */

:root{
  --ink:      #0b0b0d;   /* fundal pagina */
  --panel:    #16161a;   /* carduri, panouri */
  --panel-2:  #1e1e24;   /* zone inaltate */
  --line:     #2b2b33;   /* borduri */
  --red:      #e01b24;   /* accent principal */
  --red-dk:   #a5121a;
  --red-glow: rgba(224,27,36,.18);
  --paper:    #f4f4f6;   /* text principal */
  --mut:      #94949e;   /* text secundar */
  --steel:    #6f7079;
  --wa:       #25d366;   /* verde WhatsApp */
  --wa-dk:    #1da851;

  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  --r:  10px;
  --r-s: 6px;
  --wrap: 1240px;
  --shadow: 0 14px 40px rgba(0,0,0,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--display); font-weight:800; letter-spacing:.01em; line-height:1.06; margin:0}
h1{font-size:clamp(30px,4.2vw,52px); text-transform:uppercase}
h2{font-size:clamp(22px,2.6vw,32px); text-transform:uppercase}
h3{font-size:19px}
p{margin:0 0 14px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--red);padding:10px 16px;border-radius:6px}
:focus-visible{outline:2px solid var(--red); outline-offset:2px}

/* ---------- Butoane ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--display); font-size:17px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:13px 24px; border-radius:var(--r-s);
  border:1px solid transparent; cursor:pointer; transition:.16s ease;
}
.btn-red{background:var(--red); color:#fff; box-shadow:0 6px 20px var(--red-glow)}
.btn-red:hover{background:var(--red-dk)}
.btn-ghost{background:transparent; color:var(--paper); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--red); color:#fff}
.btn-wa{background:#25d366; background:var(--wa); color:#08130c !important; border-color:transparent}
.btn-wa:hover{background:#1da851; background:var(--wa-dk); color:#08130c !important}
.btn-block{width:100%; margin-bottom:10px}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{position:sticky; top:0; z-index:50; background:rgba(11,11,13,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.hdr-top{display:flex; align-items:center; gap:24px; padding-top:14px; padding-bottom:14px}

.logo{display:block; flex-shrink:0; line-height:0}
.logo img{width:212px; height:auto}

.search{flex:1; display:flex; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden; min-width:0}
.search input[type=search]{flex:1; min-width:0; border:0; background:transparent; color:var(--paper); padding:12px 16px; font-size:15px; font-family:var(--body)}
.search input::placeholder{color:var(--steel)}
.search select{border:0; border-left:1px solid var(--line); background:var(--panel); color:var(--mut); padding:0 12px; font-size:14px; max-width:190px; font-family:var(--body)}
.search button{border:0; background:var(--red); color:#fff; padding:0 26px; font-family:var(--display); font-size:17px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; cursor:pointer}
.search button:hover{background:var(--red-dk)}
.search input:focus,.search select:focus{outline:none}
.search:focus-within{border-color:var(--red)}

.hdr-contact{display:flex; align-items:center; gap:14px}
.phone{display:flex; flex-direction:column; line-height:1.25; text-align:right}
.phone span{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--mut)}
.phone strong{font-family:var(--mono); font-size:16px; color:#fff}
.phone:hover strong{color:var(--red)}

.burger{display:none; flex-direction:column; gap:4px; background:none; border:0; padding:8px; cursor:pointer}
.burger span{width:22px; height:2px; background:var(--paper); display:block}

/* bara de categorii, cu subcategorii la hover */
.catbar{border-top:1px solid var(--line); background:#0e0e11; position:relative}
.catbar-in{display:flex; gap:0; align-items:stretch}
.catbar > .wrap > a,
.catbar-item > a{
  display:block; white-space:nowrap; padding:12px 13px; font-size:13.5px; font-weight:500;
  color:var(--mut); border-bottom:2px solid transparent; transition:.15s;
}
.catbar-item{position:relative}
.catbar-item > a i{font-style:normal; font-family:var(--mono); font-size:10.5px; color:var(--steel)}
.catbar a:hover{color:#fff; background:#141418}
.catbar a.on{color:#fff; border-bottom-color:var(--red)}

.subnav{
  position:absolute; top:100%; left:0; min-width:260px; z-index:60;
  background:#121216; border:1px solid var(--line); border-top:2px solid var(--red);
  border-radius:0 0 var(--r-s) var(--r-s); box-shadow:var(--shadow);
  padding:6px 0; opacity:0; visibility:hidden; transform:translateY(-6px); transition:.15s;
}
.catbar-item:hover .subnav,
.catbar-item:focus-within .subnav{opacity:1; visibility:visible; transform:none}
.subnav a{
  display:flex; justify-content:space-between; gap:16px; align-items:center;
  padding:9px 16px; font-size:13.5px; color:var(--mut); border-bottom:0; white-space:nowrap;
}
.subnav a span{font-family:var(--mono); font-size:11px; color:var(--steel)}
.subnav a:hover{background:#1b1b21; color:#fff}

/* banda de sus, cu informatii fixe */
.topbar{background:#08080a; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--steel)}
.topbar-in{display:flex; gap:10px; align-items:center; padding:7px 20px; flex-wrap:wrap}
.tb-transport{color:var(--paper)}
.tb-hours{margin-left:auto; font-family:var(--mono); font-size:11.5px}
.tb-sep{color:var(--line)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(224,27,36,.16), transparent 65%),
    linear-gradient(180deg,#101014,#0b0b0d);
  border-bottom:1px solid var(--line);
}
.hero::after{ /* banda industriala — elementul de semnatura */
  content:''; position:absolute; left:0; right:0; bottom:0; height:6px; pointer-events:none;
  background:repeating-linear-gradient(-45deg, var(--red) 0 14px, #0b0b0d 14px 28px);
  opacity:.85;
}
.hero-in{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:56px 20px 64px}
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red); margin:0 0 14px;
}
.hero h1{margin-bottom:16px}
.hero h1 em{font-style:normal; color:var(--red)}
.lead{color:var(--mut); font-size:17px; max-width:52ch}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin:26px 0 34px}

.hero-stats{display:flex; gap:34px; margin:0; padding-top:24px; border-top:1px solid var(--line)}
.hero-stats dt{font-size:11px; text-transform:uppercase; letter-spacing:.11em; color:var(--mut); margin-bottom:4px}
.hero-stats dd{margin:0; font-family:var(--mono); font-size:26px; font-weight:600; color:#fff}
.hero-stats dd.mini{font-size:15px; line-height:1.7}

.hero-feature{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:var(--panel)}
.hero-feature img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:.5s}
.hero-feature:hover img{transform:scale(1.03)}
.hero-feature-in{position:absolute; inset:auto 0 0 0; padding:22px; background:linear-gradient(transparent, rgba(6,6,8,.94) 55%)}
.hero-feature-in h2{font-size:24px; margin:10px 0 6px; text-transform:none}
.hero-feature-in .price{margin:0}

/* ============================================================
   BLOCURI + GRILA
   ============================================================ */
.block{padding:52px 20px}
.block-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px}
.block-head p{color:var(--mut); margin:6px 0 0; flex-basis:100%}
.link-more{font-family:var(--display); text-transform:uppercase; font-weight:700; letter-spacing:.05em; color:var(--red)}
.link-more:hover{color:#fff}

.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}

.card{
  position:relative; background:linear-gradient(180deg,#191920,#141419);
  border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; transition:.2s ease;
}
.card::after{
  content:''; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:.25s ease;
}
.card:hover{border-color:#3d3d49; transform:translateY(-4px); box-shadow:var(--shadow)}
.card:hover::after{transform:scaleX(1)}
.card.is-top{border-color:rgba(224,27,36,.42)}
.card.is-sold{opacity:.72}
.card-media{position:relative; display:block; background:#0e0e11; overflow:hidden}
.card-media img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:.45s ease}
.card:hover .card-media img{transform:scale(1.04)}
.card-media::after{
  content:''; position:absolute; inset:auto 0 0 0; height:52%; pointer-events:none;
  background:linear-gradient(transparent, rgba(8,8,10,.55));
}
.card-tags{position:absolute; top:10px; left:10px; display:flex; gap:6px; z-index:2}
.tag{
  font-family:var(--display); font-size:12px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:3px;
}
.tag-top{background:var(--red); color:#fff}
.tag-new{background:#fff; color:#0b0b0d}
.tag-sold{background:#0b0b0d; color:#fff; border:1px solid var(--red)}
.tag-vid{
  position:absolute; left:10px; bottom:10px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(224,27,36,.92); color:#fff; letter-spacing:.06em;
}
.tag-vid svg{width:11px; height:11px}
.tag-count{
  position:absolute; right:10px; bottom:10px; z-index:2;
  background:rgba(8,8,10,.78); color:#fff; font-family:var(--mono); font-size:11px;
  letter-spacing:0; backdrop-filter:blur(3px);
}

.card-body{padding:15px 17px 17px; display:flex; flex-direction:column; flex:1}
.card-cat{font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--red); font-weight:600}
.card-title{
  font-family:var(--body); font-size:15.5px; font-weight:600; line-height:1.35;
  margin:7px 0 13px; text-transform:none;
}
.card-title a{display:block}
.card-title a:hover{color:var(--red)}

.specstrip{
  display:flex; list-style:none; margin:0 0 14px; padding:9px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.18);
}
.specstrip li{flex:1; text-align:center; border-right:1px solid var(--line); padding:0 4px}
.specstrip li:last-child{border-right:0}
.specstrip span{display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--steel)}
.specstrip b{display:block; font-family:var(--mono); font-size:14px; font-weight:600; color:var(--paper)}

.card-foot{margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:10px}
.price{font-family:var(--display); font-size:25px; font-weight:800; color:#fff; margin:0; line-height:1.1}
.price .neg{display:block; font-family:var(--body); font-size:10.5px; font-weight:500; color:var(--mut); text-transform:uppercase; letter-spacing:.08em}
.price.big{font-size:38px; color:var(--red); margin:6px 0 4px}
.meta{font-size:12px; color:var(--mut); margin:0; text-align:right}
.meta-brand{color:var(--paper); font-weight:500}

.card .card-btn{
  display:block; width:100%; margin-top:14px; padding:12px 14px;
  border:0; border-radius:var(--r-s);
  background:#e01b24; background:var(--red);
  color:#fff !important; text-align:center; text-decoration:none;
  font-family:var(--display), Arial Narrow, sans-serif; font-size:16px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; line-height:1.2;
  transition:background .16s ease, box-shadow .16s ease;
}
.card .card-btn:hover,
.card .card-btn:focus{background:#a5121a; background:var(--red-dk); color:#fff !important}
.card:hover .card-btn{box-shadow:0 6px 18px var(--red-glow)}

/* categorii tip dala */
.cat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.cat-tile{
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--red);
  border-radius:var(--r-s); padding:18px 16px; transition:.16s;
}
.cat-tile:hover{background:var(--panel-2); transform:translateX(3px)}
.cat-tile h3{font-size:16px; text-transform:none; margin-bottom:4px}
.cat-tile span{font-family:var(--mono); font-size:12px; color:var(--mut)}
.cat-tile-subs{font-size:12px; color:var(--steel); margin:8px 0 0; line-height:1.5}

/* ============================================================
   LISTARE / FILTRE
   ============================================================ */
.crumbs{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:16px 0; font-size:13px; color:var(--mut)}
.crumbs a:hover{color:var(--red)}
.crumbs span{color:var(--steel)}
.crumbs strong{color:var(--paper); font-weight:500}

.lst-head{padding-bottom:22px; border-bottom:1px solid var(--line)}
.lst-head .lead{margin-top:12px}
.count{font-family:var(--mono); font-size:13px; color:var(--mut); margin:12px 0 0}
.count strong{color:var(--red); font-size:16px}

.filters{background:#0e0e11; border-bottom:1px solid var(--line)}
.filters-in{display:flex; flex-wrap:wrap; gap:12px; padding-top:16px; padding-bottom:16px; align-items:flex-end}
.fl{display:flex; flex-direction:column; gap:5px; flex:1; min-width:150px}
.fl-sm{max-width:130px; min-width:110px}
.fl span{font-size:10.5px; text-transform:uppercase; letter-spacing:.11em; color:var(--mut)}
.fl select,.fl input{
  background:var(--panel); border:1px solid var(--line); color:var(--paper);
  padding:10px 11px; border-radius:var(--r-s); font-size:14px; font-family:var(--body); width:100%;
}
.fl select:focus,.fl input:focus{border-color:var(--red); outline:none}
.fl-btn{flex-direction:row; align-items:center; gap:14px; flex:0 0 auto}
.fl-btn .btn{padding:10px 22px; font-size:15px}
.reset{font-size:12.5px; color:var(--mut); text-decoration:underline}
.reset:hover{color:var(--red)}

.pager{display:flex; gap:6px; justify-content:center; margin-top:38px; flex-wrap:wrap}
.pager a,.pager span{
  min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 12px; border:1px solid var(--line); border-radius:var(--r-s);
  font-family:var(--mono); font-size:14px; color:var(--mut); background:var(--panel);
}
.pager a:hover{border-color:var(--red); color:#fff}
.pager .on{background:var(--red); border-color:var(--red); color:#fff}
.pager .dots{border:0; background:none}

.empty{text-align:center; padding:60px 20px; background:var(--panel); border:1px dashed var(--line); border-radius:var(--r)}
.empty h1,.empty h3{margin-bottom:10px}
.empty p{color:var(--mut)}
.empty a{color:var(--red); text-decoration:underline}
.big404 .code{font-family:var(--display); font-size:96px; font-weight:800; color:var(--red); line-height:1; margin:0 0 6px}

/* ============================================================
   PAGINA DE ANUNT
   ============================================================ */
.detail{display:grid; grid-template-columns:1fr 380px; gap:32px; align-items:start; padding-bottom:60px}
.detail-main{min-width:0}

.sold-banner{background:rgba(224,27,36,.1); border:1px solid rgba(224,27,36,.4); color:#ffb3b7; padding:12px 16px; border-radius:var(--r-s); font-size:14px}

.gallery{margin-bottom:24px}

.gal-main{
  position:relative; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); background:#0e0e11;
}
.gal-slide{display:none; margin:0}
.gal-slide.on{display:block}
.gal-slide img,.gal-slide video{
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#0b0b0d;
}
.gal-slide video{object-fit:contain}

/* sagetile */
.gal-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.16); border-radius:50%;
  background:rgba(10,10,13,.62); color:#fff; cursor:pointer;
  transition:background .15s, border-color .15s, transform .15s;
}
.gal-nav svg{width:22px; height:22px}
.gal-nav:hover{background:var(--red); border-color:var(--red)}
.gal-prev{left:12px}
.gal-next{right:12px}
.gal-main:hover .gal-nav{background:rgba(10,10,13,.82)}
.gal-main:hover .gal-nav:hover{background:var(--red)}

.gal-count{
  position:absolute; right:12px; bottom:12px; z-index:3;
  background:rgba(10,10,13,.8); color:#fff; border-radius:20px;
  padding:5px 12px; font-family:var(--mono); font-size:12px;
}
.gal-count b{color:var(--red); font-weight:600}

/* miniaturi */
.gal-thumbs{display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:6px; scroll-behavior:smooth}
.gal-thumbs::-webkit-scrollbar{height:6px}
.gal-thumbs::-webkit-scrollbar-track{background:#0e0e11; border-radius:20px}
.gal-thumbs::-webkit-scrollbar-thumb{background:#2f2f38; border-radius:20px}
.gal-thumbs::-webkit-scrollbar-thumb:hover{background:var(--red)}
.gal-thumbs button{
  flex:0 0 100px; padding:0; border:2px solid var(--line); border-radius:var(--r-s);
  overflow:hidden; background:#0e0e11; cursor:pointer; transition:.15s;
}
.gal-thumbs button:hover{border-color:var(--steel)}
.gal-thumbs button.on{border-color:var(--red)}
.gal-thumbs img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.th-video{
  display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:4/3; color:var(--red);
  background:repeating-linear-gradient(-45deg,#15151b 0 8px,#101015 8px 16px);
}
.th-video svg{width:26px; height:26px}

.gal-info{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:12.5px; color:var(--steel); margin:8px 0 0;
}
.gal-tip{font-size:11.5px}

@media (max-width:640px){
  .gal-nav{width:38px; height:38px}
  .gal-nav svg{width:18px; height:18px}
  .gal-prev{left:8px}
  .gal-next{right:8px}
  .gal-thumbs button{flex:0 0 76px}
  .gal-tip{display:none}
}

.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:24px; margin-bottom:20px}
.panel h2{font-size:20px; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line)}

.spectable{width:100%; border-collapse:collapse; font-size:15px}
.spectable th{
  text-align:left; font-weight:500; color:var(--mut); padding:11px 0; width:45%;
  font-size:13px; text-transform:uppercase; letter-spacing:.06em;
}
.spectable td{padding:11px 0; font-family:var(--mono); font-size:14.5px; color:#fff; text-align:right}
.spectable tr{border-bottom:1px solid var(--line)}
.spectable tr:last-child{border-bottom:0}

.rte{color:#d8d8de; font-size:16px}
.rte p{margin-bottom:12px}
.rte ul,.rte ol{padding-left:20px; margin-bottom:14px}
.rte li{margin-bottom:6px}
.rte h3,.rte h4{margin:20px 0 8px}
.rte a{color:var(--red); text-decoration:underline}

/* buybox */
.detail-side{position:sticky; top:120px}
.buybox{background:var(--panel-2); border:1px solid var(--line); border-top:3px solid var(--red); border-radius:var(--r); padding:24px; margin-bottom:20px}
.buybox-cat{font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--red); font-weight:600}
.buybox h1{font-size:25px; text-transform:none; margin:8px 0 14px; line-height:1.2}
.buybox h2{font-size:19px; margin-bottom:14px}
.vat{font-size:12px; color:var(--mut); margin-bottom:16px}
.buybox-meta{list-style:none; margin:18px 0 22px; padding:0; font-size:14px}
.buybox-meta li{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line)}
.buybox-meta li:last-child{border-bottom:0}
.buybox-meta span{color:var(--mut)}
.buybox-meta b{font-family:var(--mono); font-weight:600; text-align:right}
.buybox-meta a:hover{color:var(--red)}

/* formulare */
.form label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.09em; color:var(--mut); margin-bottom:14px}
.form input,.form textarea,.form select{
  display:block; width:100%; margin-top:6px; background:#0e0e11; border:1px solid var(--line);
  color:var(--paper); padding:11px 13px; border-radius:var(--r-s); font-size:15px;
  font-family:var(--body); text-transform:none; letter-spacing:0;
}
.form input:focus,.form textarea:focus{border-color:var(--red); outline:none}
.form textarea{resize:vertical}
.hp{position:absolute; left:-9999px}
.alert{padding:13px 16px; border-radius:var(--r-s); font-size:14.5px}
.alert.ok{background:rgba(28,120,66,.14); border:1px solid #1e6b3f; color:#8fe0b0}
.alert.err{background:rgba(224,27,36,.12); border:1px solid var(--red-dk); color:#ff9ba0}

/* ============================================================
   TEXT SEO + ARTICOLE
   ============================================================ */
.seo-block{border-top:1px solid var(--line)}
.seo-block h2{margin-bottom:20px}
.seo-block p{color:var(--mut); max-width:78ch}
.seo-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.seo-cols h3{font-size:17px; text-transform:none; margin-bottom:8px; color:#fff}
.seo-cols h3::before{content:''; display:block; width:26px; height:3px; background:var(--red); margin-bottom:10px}
.seo-cols p{font-size:14.5px}
.article{max-width:800px; padding-bottom:60px}
.article h1{margin-bottom:22px}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:#08080a; border-top:1px solid var(--line); margin-top:20px}
.ftr-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:38px; padding-top:48px; padding-bottom:40px}
.ftr h3{font-size:15px; letter-spacing:.08em; margin-bottom:14px; color:#fff}
.ftr ul{list-style:none; margin:0; padding:0; font-size:14px}
.ftr ul.cols{columns:2; column-gap:16px}
.ftr li{margin-bottom:8px}
.ftr a{color:var(--mut)}
.ftr a:hover{color:var(--red)}
.ftr-logo{width:190px; height:auto; margin-bottom:4px}
.ftr-brand p{color:var(--mut); font-size:14px; margin:14px 0; max-width:38ch}
.ftr-brand address{font-style:normal; font-size:13px; color:var(--steel); margin-top:14px; line-height:1.7}
.ftr-wa{display:inline-block; font-size:13.5px; color:var(--wa); margin-bottom:6px; font-weight:500}
.ftr-wa:hover{color:#fff}
.ftr-call{display:block; font-family:var(--mono); font-size:19px; color:#fff !important; margin-bottom:4px}
.ftr-mail{font-size:14px}
.social{display:flex; gap:14px; margin-top:16px; font-size:13px}
.ftr-bar{border-top:1px solid var(--line); padding:16px 0; font-size:12.5px; color:var(--steel)}
.ftr-bar .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.ftr-bar a{color:var(--steel)}
.ftr-bar a:hover{color:var(--red)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .detail{grid-template-columns:1fr 330px}
  .ftr-grid{grid-template-columns:1fr 1fr; gap:30px}
}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr; gap:34px; padding-top:38px; padding-bottom:48px}
  .hero-feature{order:-1}
  .detail{grid-template-columns:1fr}
  .detail-side{position:static}
  .seo-cols{grid-template-columns:1fr}
  .hdr-top{flex-wrap:wrap; gap:12px}
  .search{order:3; flex-basis:100%}
  .burger{display:flex}
  .catbar{display:none}
  .catbar.open{display:block}
  .catbar-in{flex-direction:column; padding-top:8px; padding-bottom:8px}
  .catbar a{border-bottom:1px solid var(--line); border-left:2px solid transparent; padding:12px 4px}
  .catbar a.on{border-left-color:var(--red); border-bottom-color:var(--line)}
}
@media (max-width:640px){
  .grid{grid-template-columns:repeat(2,1fr); gap:12px}
  .cat-grid{grid-template-columns:1fr 1fr}
  .block{padding:34px 16px}
  .wrap{padding:0 16px}
  .card-body{padding:11px 12px 13px}
  .card-title{font-size:14px}
  .price{font-size:20px}
  .price.big{font-size:30px}
  .hero-stats{gap:20px}
  .hero-stats dd{font-size:21px}
  .search select{display:none}
  .phone span{display:none}
  .ftr-grid{grid-template-columns:1fr}
  .filters-in{gap:9px}
  .fl,.fl-sm{min-width:calc(50% - 5px); max-width:none}
  .fl-btn{flex-basis:100%}
  .fl-btn .btn{flex:1}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .hero-feature:hover img{transform:none}
}


/* ============================================================
   BLOCURI NOI — v2
   ============================================================ */

/* chip-uri de subcategorie */
.chips{display:flex; flex-wrap:wrap; gap:8px; padding:18px 0 4px}
.chips a{
  display:inline-flex; align-items:center; gap:7px; padding:7px 14px;
  border:1px solid var(--line); border-radius:20px; background:var(--panel);
  font-size:13px; color:var(--mut); transition:.15s;
}
.chips a i{font-style:normal; font-family:var(--mono); font-size:11px; color:var(--steel)}
.chips a:hover{border-color:var(--steel); color:#fff}
.chips a.on{background:var(--red); border-color:var(--red); color:#fff}
.chips a.on i{color:rgba(255,255,255,.8)}

/* banda de transport, inainte de footer */
.transport-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:
    radial-gradient(700px 300px at 85% 50%, rgba(224,27,36,.14), transparent 70%),
    linear-gradient(180deg,#111116,#0d0d11);
}
.transport-in{display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; padding:38px 20px}
.transport-in h2{margin-bottom:10px}
.transport-in p{color:var(--mut); max-width:62ch; margin:0}
.transport-cta{display:flex; gap:12px; flex-wrap:wrap}

/* sectiunea cu parcul si harta */
.parc{border-top:1px solid var(--line); background:#0e0e12}
.parc-in{display:grid; grid-template-columns:1fr 1.1fr; gap:44px; align-items:center; padding:56px 20px}
.parc-copy h2{margin-bottom:12px}
.parc-copy > p{color:var(--mut)}
.parc-meta{list-style:none; margin:20px 0 24px; padding:0; border-top:1px solid var(--line)}
.parc-meta li{display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px}
.parc-meta span{color:var(--mut)}
.parc-meta b{font-family:var(--mono); font-weight:600; text-align:right}

.parc-map{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--panel)}
.mapbox{min-height:380px; display:flex}
.mapbox iframe{display:block; width:100%; min-height:380px; border:0}
.map-consent{padding:36px 28px; text-align:center; margin:auto; max-width:420px}
.map-consent p{color:var(--mut); font-size:14px}
.map-consent strong{color:var(--paper); font-size:16px}
.map-consent .btn{margin:8px 0 14px}
.map-alt{font-family:var(--mono); font-size:12.5px; color:var(--steel) !important}
.contact-map .mapbox, .contact-map .mapbox iframe{min-height:340px}

/* panoul de transport din pagina de anunt */
.panel-transport{border-left:3px solid var(--red)}
.panel-transport .mini{font-size:13px; color:var(--steel); margin-bottom:16px}
.buybox-note{font-size:12.5px; color:var(--steel); margin:12px 0 0; text-align:center}

/* datele firmei + siglele ANPC */
.ftr-legal{
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center;
  padding-top:26px; padding-bottom:26px; border-top:1px solid var(--line);
}
.ftr-firma h3{font-size:13px; letter-spacing:.1em; color:var(--mut); margin-bottom:8px}
.ftr-firma p{font-size:12.5px; color:var(--steel); line-height:1.9; margin:0}
.ftr-firma strong{color:var(--paper)}
.anpc{display:flex; flex-direction:column; gap:6px; align-items:flex-end}
.anpc img{width:230px; height:auto; opacity:.9; transition:.15s}
.anpc a:hover img{opacity:1}

/* banner de cookie-uri */
.cookiebar{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:#101015; border-top:2px solid var(--red);
  box-shadow:0 -14px 40px rgba(0,0,0,.5);
  transform:translateY(110%); transition:transform .25s ease;
}
.cookiebar.on{transform:none}
.cookiebar-in{
  max-width:var(--wrap); margin:0 auto; padding:18px 20px;
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
}
.cookiebar strong{font-family:var(--display); font-size:19px; text-transform:uppercase; letter-spacing:.04em}
.cookiebar p{margin:4px 0 0; font-size:13.5px; color:var(--mut); max-width:78ch}
.cookiebar a{color:var(--red); text-decoration:underline}
.cookiebar-btns{display:flex; gap:10px; flex-wrap:wrap}
.cookiebar-btns .btn{padding:11px 18px; font-size:15px}

/* tabele in paginile legale */
.legal-table{width:100%; border-collapse:collapse; margin:18px 0; font-size:14.5px}
.legal-table th{
  text-align:left; padding:11px 14px; background:#15151a; color:var(--mut);
  font-weight:500; border:1px solid var(--line); width:38%;
}
.legal-table td{padding:11px 14px; border:1px solid var(--line); color:var(--paper)}
.article .rte h2{font-size:21px; margin:30px 0 12px; padding-top:22px; border-top:1px solid var(--line)}
.article .rte h2:first-child{border-top:0; padding-top:0; margin-top:0}

@media (max-width:1080px){
  .parc-in{grid-template-columns:1fr; gap:28px}
  .transport-in{grid-template-columns:1fr; gap:20px}
}
@media (max-width:900px){
  .topbar-in{font-size:11.5px; gap:8px}
  .tb-hours, .tb-sep{display:none}
  .catbar-in{flex-direction:column; align-items:stretch}
  .catbar-item > a{border-bottom:1px solid var(--line); border-left:2px solid transparent}
  .catbar-item > a.on{border-left-color:var(--red)}
  .subnav{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; border-left:2px solid var(--red); border-radius:0; display:none;
    background:#0a0a0d; margin-left:14px;
  }
  .catbar-item.open .subnav{display:block}
  .catbar-item:hover .subnav{display:none}
  .catbar-item.open:hover .subnav{display:block}
  .ftr-legal{grid-template-columns:1fr; gap:20px}
  .anpc{align-items:flex-start; flex-direction:row; flex-wrap:wrap}
  .anpc img{width:200px}
  .cookiebar-in{grid-template-columns:1fr; gap:14px}
  .cookiebar-btns .btn{flex:1}
}
@media (max-width:640px){
  .logo img{width:172px}
  .chips{gap:6px}
  .chips a{padding:6px 11px; font-size:12px}
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td{display:block; width:100%}
  .legal-table th{border-bottom:0}
  .legal-table td{border-top:0; margin-bottom:8px}
}

/* ============================================================
   MARQUEE, SUGESTII, POPUP, BARA DE JOS — v2.1
   ============================================================ */

/* ---------- Banda cu categorii, doar pe mobil ---------- */
.marquee{display:block; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#101014,#0c0c10); position:relative}
.marquee::before,.marquee::after{
  content:''; position:absolute; top:0; bottom:0; width:44px; z-index:2; pointer-events:none;
}
.marquee::before{left:0;  background:linear-gradient(90deg,#0c0c10,transparent)}
.marquee::after{right:0; background:linear-gradient(270deg,#0c0c10,transparent)}
.marquee-track{display:flex; width:max-content; animation:mq 46s linear infinite; will-change:transform}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee-set{display:flex; align-items:center; gap:8px; list-style:none; margin:0; padding:11px 4px}
.marquee-set a{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  padding:7px 14px; border:1px solid var(--line); border-radius:20px;
  background:var(--panel); font-size:13px; color:var(--mut);
}
.marquee-set a i{font-style:normal; font-family:var(--mono); font-size:10.5px; color:var(--red)}
.marquee-set a:active{border-color:var(--red); color:#fff}
@keyframes mq{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .marquee{overflow-x:auto}
}

/* ---------- Sugestii in bara de cautare ---------- */
.search{position:relative}
.suggest{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:80;
  background:#121216; border:1px solid var(--line); border-top:2px solid var(--red);
  border-radius:var(--r-s); box-shadow:var(--shadow);
  max-height:min(70vh,460px); overflow-y:auto; padding:6px;
}
.suggest-cats{display:flex; flex-wrap:wrap; gap:6px; padding:6px 6px 10px; border-bottom:1px solid var(--line); margin-bottom:6px}
.suggest-cats a{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px;
  border:1px solid var(--line); border-radius:20px; font-size:12.5px; color:var(--mut);
}
.suggest-cats a i{font-style:normal; font-family:var(--mono); font-size:10.5px; color:var(--steel)}
.suggest-cats a:hover,.suggest-cats a.on{border-color:var(--red); color:#fff}

.suggest-item{display:flex; align-items:center; gap:11px; padding:8px; border-radius:var(--r-s)}
.suggest-item img{width:64px; height:48px; object-fit:cover; border-radius:4px; flex-shrink:0; background:#0d0d10}
.suggest-txt{flex:1; min-width:0}
.suggest-txt b{display:block; font-size:13.5px; font-weight:600; color:var(--paper); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.suggest-txt em{display:block; font-style:normal; font-size:11.5px; color:var(--steel); margin-top:2px}
.suggest-price{font-family:var(--display); font-size:17px; font-weight:800; color:#fff; white-space:nowrap}
.suggest-item:hover,.suggest-item.on{background:#1b1b21}
.suggest-item:hover .suggest-price,.suggest-item.on .suggest-price{color:var(--red)}

.suggest-all{
  display:block; margin-top:4px; padding:11px 8px; border-top:1px solid var(--line);
  font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--red); text-align:center;
}
.suggest-all:hover,.suggest-all.on{background:#1b1b21}
.suggest-none{margin:0; padding:18px 12px; font-size:13.5px; color:var(--mut); text-align:center}

/* ---------- Fereastra de promovare ---------- */
.promo{
  position:fixed; inset:0; z-index:220;
  align-items:center; justify-content:center; padding:20px;
}
.promo-back{position:absolute; inset:0; background:rgba(5,5,7,.86); opacity:0; transition:opacity .22s}
.promo.on .promo-back{opacity:1}
.promo-box{
  position:relative; width:100%; max-width:440px; padding:34px 32px 28px; text-align:center;
  background:linear-gradient(180deg,#1a1a20,#121216);
  border:1px solid var(--line); border-top:3px solid var(--red); border-radius:14px;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  opacity:0; transform:translateY(14px) scale(.98); transition:opacity .22s ease, transform .22s ease;
}
.promo.on .promo-box{opacity:1; transform:none}
.promo-x{
  position:absolute; top:10px; right:12px; width:34px; height:34px; line-height:1;
  background:none; border:0; color:var(--steel); font-size:28px; cursor:pointer; border-radius:6px;
}
.promo-x:hover{color:#fff; background:#22222a}
.promo-eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--red)}
.promo-box h2{font-size:29px; margin:12px 0 10px}
.promo-box p{color:var(--mut); font-size:15px; margin-bottom:22px}
.promo-btns{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.promo-btns .btn{flex:1; min-width:150px}
.promo-skip{display:inline-block; margin-top:18px; font-size:12.5px; color:var(--steel); text-decoration:underline}
.promo-skip:hover{color:var(--paper)}

/* ---------- Bara de jos, doar pe mobil ---------- */
.mbar{display:none}

@media (min-width:901px){
  .marquee{display:none}
}

@media (max-width:900px){

  /* blur-ul in timpul derularii incarca inutil telefoanele mai slabe */
  .hdr{backdrop-filter:none; background:#0b0b0d}
  .mbar{backdrop-filter:none; background:#0a0a0d}
  .tag-count{backdrop-filter:none}

  .mbar{
    display:grid; position:fixed; left:0; right:0; bottom:0; z-index:150;
    grid-auto-flow:column; grid-auto-columns:1fr;
    background:rgba(10,10,13,.97); backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mbar a{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    padding:9px 4px 8px; font-size:10.5px; letter-spacing:.04em; color:var(--steel);
    border-top:2px solid transparent;
  }
  .mbar svg{width:22px; height:22px; fill:currentColor}
  .mbar a.on{color:#fff; border-top-color:var(--red)}
  .mbar a.on svg{fill:var(--red)}
  .mbar-call{color:var(--red) !important}

  /* loc pentru bara de jos, ca sa nu acopere continutul */
  body{padding-bottom:60px}
  .cookiebar{bottom:60px}
  .promo{padding-bottom:76px}

  /* submeniul deschis pe mobil */
  .subnav-all{
    display:block !important; padding:10px 16px; font-size:12.5px !important;
    text-transform:uppercase; letter-spacing:.08em; color:var(--red) !important;
    border-bottom:1px solid var(--line);
  }
  .catbar-item.has-sub > a::after{
    content:'+'; float:right; font-family:var(--mono); font-size:16px; color:var(--steel);
    line-height:1; margin-left:10px;
  }
  .catbar-item.has-sub.open > a::after{content:'–'}
  .catbar-item.has-sub.open > a{color:#fff; background:#141418}

  .suggest{max-height:56vh}
  .suggest-price{font-size:15px}
}

@media (min-width:901px){
  .subnav-all{display:none}
}

@media (max-width:640px){
  .promo-box{padding:30px 22px 24px}
  .promo-box h2{font-size:25px}
  .promo-btns .btn{min-width:0; width:100%; flex:1 1 100%}
}


/* ============================================================
   PAGINA DE CATEGORII — carduri vizuale
   ============================================================ */
.cathero{
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(760px 340px at 8% 0%, rgba(224,27,36,.15), transparent 68%),
    linear-gradient(180deg,#101014,#0b0b0d);
}
.cathero-in{padding:6px 20px 40px}
.cathero h1{margin:10px 0 14px}
.cathero .lead{max-width:60ch}
.cathero-stats{display:flex; gap:38px; margin:26px 0 0; padding-top:22px; border-top:1px solid var(--line)}
.cathero-stats dt{font-size:11px; text-transform:uppercase; letter-spacing:.11em; color:var(--mut); margin-bottom:4px}
.cathero-stats dd{margin:0; font-family:var(--mono); font-size:26px; font-weight:600; color:#fff}

.cgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}

.ccard{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg,#191920,#131318);
  border:1px solid var(--line); border-radius:14px; transition:.22s ease;
}
.ccard::after{
  content:''; position:absolute; left:0; right:0; top:0; height:3px; pointer-events:none;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:.28s ease;
}
.ccard:hover{border-color:#40404d; transform:translateY(-5px); box-shadow:var(--shadow)}
.ccard:hover::after{transform:scaleX(1)}
.ccard.is-empty{opacity:.62}

.ccard-media{
  position:relative; display:flex; align-items:center; justify-content:center;
  aspect-ratio:16/10; overflow:hidden; background:#0d0d11;
}
.ccard-media img{width:100%; height:100%; object-fit:cover; transition:.5s ease}
.ccard:hover .ccard-media img{transform:scale(1.06)}
.ccard-media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,13,.15) 0%, rgba(10,10,13,.72) 100%);
}

/* pictograma, cand categoria nu are inca poze */
.ccard-ico{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.022) 0 12px, transparent 12px 24px),
    #101015;
}
.cat-icon{width:88px; height:88px; fill:none; stroke:var(--red); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; opacity:.85; transition:.25s}
.ccard:hover .cat-icon{opacity:1; transform:scale(1.06)}

.ccard-count{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; color:#fff;
  background:rgba(224,27,36,.92); padding:4px 10px; border-radius:20px;
}
.ccard.is-empty .ccard-count{background:rgba(30,30,38,.92); color:var(--mut)}

.ccard-body{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1}
.ccard-body h2{font-size:22px; text-transform:none; margin-bottom:7px; line-height:1.15}
.ccard-body h2 a:hover{color:var(--red)}
.ccard-desc{font-size:13px; color:var(--mut); margin:0 0 14px; line-height:1.55}

.ccard-subs{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0 0 18px; padding:0}
.ccard-subs a{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px;
  border:1px solid var(--line); border-radius:20px; background:rgba(0,0,0,.22);
  font-size:12px; color:var(--mut); transition:.15s;
}
.ccard-subs a i{font-style:normal; font-family:var(--mono); font-size:10px; color:var(--steel)}
.ccard-subs a:hover{border-color:var(--red); color:#fff; background:rgba(224,27,36,.1)}
.ccard-subs a.gol{opacity:.5}
.ccard-subs a.mai{color:var(--red); border-color:rgba(224,27,36,.45)}

.ccard-btn{
  display:block; margin-top:auto; padding:12px 14px; border-radius:var(--r-s);
  background:transparent; border:1px solid var(--line); text-align:center;
  font-family:var(--display); font-size:16px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--paper); transition:.16s;
}
.ccard:hover .ccard-btn{background:var(--red); border-color:var(--red); color:#fff}

.catcta{
  border-top:1px solid var(--line);
  background:
    radial-gradient(700px 300px at 82% 50%, rgba(224,27,36,.14), transparent 70%),
    linear-gradient(180deg,#111116,#0d0d11);
}
.catcta-in{display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; padding:42px 20px}
.catcta h2{margin:8px 0 10px}
.catcta p{color:var(--mut); max-width:64ch; margin:0}
.catcta-btns{display:flex; gap:10px; flex-wrap:wrap}

@media (max-width:1080px){
  .cgrid{grid-template-columns:repeat(2,1fr); gap:18px}
  .catcta-in{grid-template-columns:1fr; gap:20px}
}
@media (max-width:640px){
  .cgrid{grid-template-columns:1fr; gap:16px}
  .cathero-stats{gap:24px}
  .cathero-stats dd{font-size:21px}
  .ccard-media{aspect-ratio:16/9}
  .cat-icon{width:70px; height:70px}
  .catcta-btns .btn{flex:1}
}