/*
  Stiluri homepage JOOLA (page-acasa.php).
  Scopate sub body.jh-homepage ca sa nu intre in conflict cu CSS-ul global
  Astra/Elementor/WooCommerce incarcat oricum prin wp_head() pe acest template.
  Adaptare directa a mockup-homepage-joola-FINAL.html (aprobat).
*/
body.jh-homepage{
  --red:#F61F1F; --red-dark:#C81414;
  --bg:#0C0C0E; --panel:#141416; --line:#232326;
  --text:#FFFFFF; --muted:#A5A5AA;
  --display:'Barlow Condensed',sans-serif;
  --body:'Barlow',sans-serif;
  font-family:var(--body);background:var(--bg);color:var(--text);line-height:1.55;
  margin:0;
}
body.jh-homepage *{box-sizing:border-box}
body.jh-homepage a{color:inherit;text-decoration:none}
body.jh-homepage footer.site-footer a{color:#fff}
body.jh-homepage button{font-family:inherit}
body.jh-homepage img,body.jh-homepage video{display:block;max-width:100%}
body.jh-homepage :focus-visible{outline:3px solid var(--red);outline-offset:2px}
body.jh-homepage .wrap{max-width:1240px;margin:0 auto;padding:0 28px}

/* Topbar */
body.jh-homepage .jh-topbar{background:#000;border-bottom:1px solid var(--line);font-size:13px;color:#C9C9CD}
body.jh-homepage .jh-topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:36px}
body.jh-homepage .jh-topbar a{color:#fff;font-weight:600}
body.jh-homepage .jh-topbar a:hover{color:var(--red)}
/* [FIX 2026-08-20] Bara admin WP (#wpadminbar) se poate "rupe" pe 2 randuri
   (64px) cand sunt multe plugin-uri cu itemi in meniul din dreapta (Yoast,
   Elementor, Hostinger, WPForms etc.) - WP insusi compenseaza mereu doar
   32px standard (inaltimea unui singur rand), asa ca la latimi de fereastra
   mai inguste randul 2 se suprapune peste topbar-ul custom. Vizibil DOAR
   pt utilizatori logati (bara nu exista deloc pt vizitatori reali) - marja
   suplimentara de siguranta, fara efect pt public.
*/
body.admin-bar.jh-homepage .jh-topbar{margin-top:32px}

/* Header */
body.jh-homepage .jh-header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(12,12,14,.96);backdrop-filter:blur(6px);z-index:50}
body.jh-homepage .jh-nav{display:flex;align-items:center;gap:30px;height:66px}
body.jh-homepage .jh-logo{font-family:var(--display);font-weight:800;font-size:28px;display:flex;align-items:center}
body.jh-homepage .jh-logo em{font-style:normal;color:var(--red)}
body.jh-homepage .jh-logo img{height:30px;width:auto;display:block}
body.jh-homepage nav.jh-menu{display:flex;gap:24px;margin-left:auto;font-weight:600;font-size:14.5px;color:#D6D6DA}
body.jh-homepage nav.jh-menu a:hover{color:var(--red)}
body.jh-homepage .jh-nav-cta{background:var(--red);color:#fff;font-weight:600;font-size:14px;padding:9px 16px;border-radius:6px}
body.jh-homepage .jh-nav-cta:hover{background:var(--red-dark)}

/* HERO SLIDER */
body.jh-homepage .slider{position:relative;height:min(58vh,500px);margin:26px auto 0;max-width:1240px;border-radius:10px;overflow:hidden;background:#000}
@media(max-width:1290px){body.jh-homepage .slider{margin-left:28px;margin-right:28px}}
body.jh-homepage .slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;pointer-events:none;display:flex;align-items:center}
body.jh-homepage .slide.active{opacity:1;pointer-events:auto}
body.jh-homepage .slide-bg{position:absolute;inset:0}
body.jh-homepage .slide-bg img{width:100%;height:100%;object-fit:cover;object-position:center right}
body.jh-homepage .slide-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.42) 48%,rgba(0,0,0,.05) 80%)}
body.jh-homepage .slide.style-product .slide-bg{background:radial-gradient(900px 520px at 74% 55%,#2E0F0F 0%,transparent 62%),linear-gradient(120deg,#0A0A0C 35%,#170D0D 100%)}
body.jh-homepage .slide.style-product .slide-bg::after{background:none}
body.jh-homepage .slide.style-product .prod{position:absolute;right:4%;top:50%;transform:translateY(-50%);height:76%;z-index:1}
body.jh-homepage .slide.style-product .prod img{height:100%;width:auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6))}
body.jh-homepage .slide-content{position:relative;z-index:2;max-width:560px;padding:0 56px}
body.jh-homepage .slide .tag{display:inline-block;font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;background:var(--red);padding:5px 11px;border-radius:4px;margin-bottom:16px}
body.jh-homepage .slide h1,body.jh-homepage .slide h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,4.4vw,56px);line-height:1}
body.jh-homepage .slide h1 span,body.jh-homepage .slide h2 span{color:var(--red)}
body.jh-homepage .slide p{margin-top:12px;font-size:16.5px;color:#E2E2E6;max-width:44ch;text-shadow:0 1px 8px rgba(0,0,0,.6)}
body.jh-homepage .btn{display:inline-block;font-weight:600;font-size:15px;padding:12px 22px;border-radius:6px;margin-top:22px}
body.jh-homepage .btn-red{background:var(--red);color:#fff}
body.jh-homepage .btn-red:hover{background:var(--red-dark)}
body.jh-homepage .arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4);background:rgba(0,0,0,.35);color:#fff;font-size:19px;cursor:pointer}
body.jh-homepage .arrow:hover{border-color:var(--red);background:rgba(246,31,31,.25)}
body.jh-homepage .arrow.prev{left:18px}body.jh-homepage .arrow.next{right:18px}
body.jh-homepage .dots{position:absolute;bottom:16px;left:0;right:0;z-index:4;display:flex;gap:9px;justify-content:center}
body.jh-homepage .dot{width:32px;height:5px;border-radius:3px;background:rgba(255,255,255,.25);border:none;cursor:pointer;position:relative;overflow:hidden}
body.jh-homepage .dot .fill{position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left}
body.jh-homepage .dot.active .fill{animation:jh-fill 6s linear forwards}
@keyframes jh-fill{to{transform:scaleX(1)}}

/* RECOMANDARI */
body.jh-homepage .recs{padding:44px 0 6px}
body.jh-homepage .h-sec{font-family:var(--display);font-weight:800;font-size:26px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:16px}
body.jh-homepage .h-sec::after{content:"";display:block;width:44px;height:4px;background:var(--red);margin-top:6px}
body.jh-homepage .banner{position:relative;border-radius:10px;overflow:hidden;display:flex;align-items:center;border:1px solid var(--line);
  min-height:210px;background:#000;transition:transform .2s ease,box-shadow .2s ease}
body.jh-homepage .banner:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.5)}
body.jh-homepage .banner .bg{position:absolute;inset:0}
body.jh-homepage .banner .bg img,body.jh-homepage .banner .bg video{width:100%;height:100%;object-fit:cover;object-position:center right}
body.jh-homepage .banner .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.45) 52%,rgba(0,0,0,.05) 85%)}
body.jh-homepage .banner .txt{position:relative;z-index:2;padding:28px 34px}
body.jh-homepage .banner .k{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
body.jh-homepage .banner h4{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.6vw,36px);text-transform:uppercase;line-height:1;margin-top:4px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
body.jh-homepage .banner .txt p{color:#DEDEE2;font-size:14.5px;margin-top:6px;max-width:38ch;text-shadow:0 1px 6px rgba(0,0,0,.6)}
body.jh-homepage .go{display:inline-block;margin-top:12px;font-weight:600;font-size:14px;border-bottom:2px solid var(--red);padding-bottom:2px}
body.jh-homepage .banner-full{margin-bottom:18px;min-height:240px}
body.jh-homepage .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}

/* SECTIUNI CATEGORII */
body.jh-homepage .cat{padding:46px 0 8px}
body.jh-homepage .cat-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px}
body.jh-homepage .cat-head .left{display:flex;align-items:baseline;gap:14px}
body.jh-homepage .cat-num{font-family:var(--display);font-weight:700;color:var(--red);font-size:20px}
body.jh-homepage .cat-head h3{font-family:var(--display);font-weight:800;font-size:clamp(28px,3vw,38px)}
body.jh-homepage .cat-head .meta{color:var(--muted);font-size:14px;text-align:right;max-width:46ch}

body.jh-homepage .cards-5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
body.jh-homepage .cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
body.jh-homepage .pcard{position:relative;border-radius:10px;overflow:hidden;background:#F4F4F5;border:1px solid var(--line);
  aspect-ratio:3/4;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
body.jh-homepage .pcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.55)}
body.jh-homepage .pmedia{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:10px}
body.jh-homepage .pmedia img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .25s ease;width:auto}
body.jh-homepage .pcard:hover .pmedia img{transform:scale(1.05)}
body.jh-homepage .pcard .cap{padding:12px 14px;background:#0F0F11}
body.jh-homepage .pcard .cap b{display:block;font-family:var(--display);font-weight:800;font-size:19px;text-transform:uppercase;letter-spacing:.03em}
body.jh-homepage .pcard .cap span{font-size:12.5px;color:#B9B9BD}

/* bannere late */
body.jh-homepage .wide{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);min-height:340px;display:flex;align-items:center;background:#000;
  transition:transform .2s ease,box-shadow .2s ease}
body.jh-homepage .wide:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.55)}
body.jh-homepage .wide .bg{position:absolute;inset:0}
body.jh-homepage .wide .bg img{width:100%;height:100%;object-fit:cover;object-position:center}
body.jh-homepage .wide .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.08) 82%)}
body.jh-homepage .wide.prod-right .bg{background:radial-gradient(900px 420px at 74% 55%,#1C2830 0%,transparent 65%),linear-gradient(105deg,#101012 40%,#12191D 100%)}
body.jh-homepage .wide.prod-right .bg::after{background:none}
body.jh-homepage .wide .prod{position:absolute;right:3%;top:50%;transform:translateY(-50%);height:82%;z-index:1;display:flex;align-items:center}
body.jh-homepage .wide .prod img{max-height:100%;width:auto;filter:drop-shadow(0 18px 36px rgba(0,0,0,.5))}
body.jh-homepage .wide .txt{position:relative;z-index:2;padding:40px 46px;max-width:560px}
body.jh-homepage .wide h4{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.4vw,44px);text-transform:uppercase;line-height:1;text-shadow:0 1px 10px rgba(0,0,0,.6)}
body.jh-homepage .wide .txt p{color:#DEDEE2;font-size:15.5px;margin-top:8px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
body.jh-homepage .wide.acc .bg{background:radial-gradient(900px 420px at 74% 55%,#2E1414 0%,transparent 62%),linear-gradient(105deg,#101012 40%,#190E0E 100%)}
body.jh-homepage .wide.acc .bg::after{background:none}

/* Banda "de ce noi" + footer */
body.jh-homepage .why{background:#000;border-top:1px solid var(--line);margin-top:56px;padding:50px 0}
body.jh-homepage .why .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
body.jh-homepage .why h5{font-family:var(--display);font-weight:700;font-size:21px;text-transform:uppercase;margin-bottom:6px}
body.jh-homepage .why h5::before{content:"";display:block;width:32px;height:4px;background:var(--red);margin-bottom:10px}
body.jh-homepage .why p{color:#A9A9AE;font-size:14.5px}
body.jh-homepage .jh-footer{border-top:1px solid var(--line);padding:34px 0;font-size:14px;color:var(--muted);background:var(--bg)}
body.jh-homepage .jh-footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

body.jh-homepage .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
body.jh-homepage .reveal.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  body.jh-homepage .slide,body.jh-homepage .banner,body.jh-homepage .pcard,body.jh-homepage .wide{transition:none}
  body.jh-homepage .dot.active .fill{animation:none;transform:scaleX(1)}
  body.jh-homepage .reveal{opacity:1;transform:none;transition:none}
}
@media (max-width:1000px){body.jh-homepage .cards-5{grid-template-columns:repeat(3,1fr)}body.jh-homepage .cards-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  body.jh-homepage nav.jh-menu{display:none}
  body.jh-homepage .slider{height:62vh}
  body.jh-homepage .arrow{display:none}
  body.jh-homepage .grid-2{grid-template-columns:1fr}
  body.jh-homepage .slide-content{padding:0 26px}
  body.jh-homepage .why .wrap{grid-template-columns:1fr}
  body.jh-homepage .slide.style-product .prod{opacity:.35}
  body.jh-homepage .wide .prod{opacity:.3}
}
@media (max-width:620px){body.jh-homepage .cards-5{grid-template-columns:repeat(2,1fr)}body.jh-homepage .jh-topbar .right{display:none}}

/* Fallback explicit alb pentru titlul .wide h4 - hardening, 2026-08-05 */
body.jh-homepage .wide h4{color:#FFFFFF !important;}

body.jh-homepage .cat-head h3{color:#FFFFFF !important;}
body.jh-homepage .pcard .cap b{color:#FFFFFF !important;}
body.jh-homepage .slide h1,body.jh-homepage .slide h2{color:#FFFFFF !important;}