.hero{
  position:relative;width:100%;
  height:min(90vh,680px);overflow:hidden;
}
@media(max-width:768px){.hero{height:min(75vh,520px)}}
@media(max-width:480px){.hero{height:min(70vh,420px)}}

.hero-slides{
  position:absolute;inset:0;
  display:flex;width:100%;height:100%;
  transition:transform .8s cubic-bezier(.77,0,.175,1)
}
.hero-slide{
  position:relative;flex-shrink:0;width:100%;height:100%;overflow:hidden
}
.hero-slide img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 8s ease;
  transform:scale(1.06)
}
.hero-slide.active img{transform:scale(1)}

.hero-ov{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,9,7,.72) 0%,rgba(10,9,7,.25) 60%,rgba(10,9,7,0) 100%);
  display:flex;align-items:center
}
@media(max-width:768px){
  .hero-ov{
    background:linear-gradient(180deg,rgba(10,9,7,.3) 0%,rgba(10,9,7,.75) 65%,rgba(10,9,7,.85) 100%);
    align-items:flex-end
  }
}

.hero-content{
  padding:0 4rem 0 5rem;max-width:600px;color:#fff
}
@media(max-width:1024px){.hero-content{padding:0 2.5rem 0 3rem;max-width:520px}}
@media(max-width:768px){.hero-content{padding:2.5rem 1.2rem;max-width:100%;width:100%}}
@media(max-width:480px){.hero-content{padding:2rem 1rem}}

.hero-badge{
  display:inline-block;
  font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.5);color:rgba(255,255,255,.9);
  padding:.32rem .9rem;margin-bottom:1.1rem;
  opacity:0;transform:translateY(14px);
  transition:opacity .6s .1s,transform .6s .1s
}
.hero-slide.active .hero-badge{opacity:1;transform:translateY(0)}

.hero-title{
  font-family:var(--font-heading);
  font-size:clamp(1.8rem,4vw,3rem);
  font-weight:600;line-height:1.1;letter-spacing:-.01em;
  margin-bottom:.85rem;
  opacity:0;transform:translateY(18px);
  transition:opacity .65s .2s,transform .65s .2s
}
.hero-slide.active .hero-title{opacity:1;transform:translateY(0)}
.hero-title em{font-style:italic;font-weight:400;color:var(--accent)}

.hero-sub{
  font-size:.85rem;line-height:1.7;color:rgba(255,255,255,.75);
  margin-bottom:1.75rem;max-width:400px;
  opacity:0;transform:translateY(14px);
  transition:opacity .65s .35s,transform .65s .35s
}
.hero-slide.active .hero-sub{opacity:1;transform:translateY(0)}

.hero-cta{
  opacity:0;transform:translateY(10px);
  transition:opacity .6s .5s,transform .6s .5s
}
.hero-slide.active .hero-cta{opacity:1;transform:translateY(0)}

.hero-dots{
  position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
  display:flex;gap:.5rem;z-index:10
}
.h-dot{
  width:6px;height:6px;border-radius:99px;
  background:rgba(255,255,255,.4);cursor:pointer;
  transition:background .3s,width .3s
}
.h-dot.active{background:#fff;width:20px}
.hero-arr{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  width:40px;height:40px;border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.2);backdrop-filter:blur(4px);
  color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s
}
.hero-arr:hover{background:var(--accent);border-color:var(--accent)}
.hero-arr-l{left:1.5rem}
.hero-arr-r{right:1.5rem}
@media(max-width:480px){
  .hero-arr{display:none !important;}
}
.cats-row{
  display:flex;gap:1.25rem;overflow-x:auto;padding-bottom:.75rem;
  scrollbar-width:none
}
.cats-row::-webkit-scrollbar{display:none}
.cat-item{
  display:flex;flex-direction:column;align-items:center;
  gap:.6rem;flex-shrink:0;cursor:pointer
}
.cat-circle{
  width:90px;height:90px;border-radius:50%;overflow:hidden;
  border:1.5px solid var(--border);
  transition:border-color .3s,transform .3s
}
.cat-circle img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.cat-item:hover .cat-circle{border-color:var(--accent);transform:translateY(-3px)}
.cat-item:hover .cat-circle img{transform:scale(1.08)}
.cat-name{
  font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:500;white-space:nowrap;color:var(--muted);transition:color .2s
}
.cat-item:hover .cat-name{color:var(--accent)}
@media(max-width:480px){.cat-circle{width:74px;height:74px}}

.prod-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.25rem
}
@media(max-width:1280px){.prod-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1024px){.prod-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.prod-grid{grid-template-columns:repeat(2,1fr);gap:.85rem}}
@media(max-width:360px){.prod-grid{grid-template-columns:repeat(2,1fr);gap:.5rem}}

.prod-card{cursor:pointer;transition:transform .3s}
.prod-card:hover{transform:translateY(-3px)}
.prod-img-w{
  position:relative;overflow:hidden;aspect-ratio:3/4;
  background:var(--bg-alt)
}
.prod-img-w img{
  width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  transition:opacity .5s,transform .5s
}
.img-d{z-index:1}
.img-h{z-index:2;opacity:0}
.prod-card:hover .img-h{opacity:1;transform:scale(1.04)}
.prod-card:hover .img-d{opacity:0}
.p-badge{
  position:absolute;top:.6rem;left:.6rem;z-index:3;
  font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.25rem .55rem;font-weight:700
}
.pb-sale{background:var(--danger);color:#fff}
.pb-new{background:var(--accent);color:#fff}
.prod-acts{
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  display:flex;gap:.35rem;padding:.75rem;
  transform:translateY(100%);opacity:0;
  transition:transform .3s,opacity .3s
}
.prod-card:hover .prod-acts{transform:translateY(0);opacity:1}
.btn-qadd{
  flex:1;padding:.6rem;background:var(--bg);color:var(--text);
  font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;font-family:var(--font-body);
  transition:background .2s,color .2s
}
.btn-qadd:hover{background:var(--accent);color:#fff}
.btn-qwish{
  width:36px;background:var(--bg);color:var(--text);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s
}
.btn-qwish:hover{background:var(--accent);color:#fff}
.prod-info{padding:.75rem 0}
.prod-name{font-size:.82rem;font-weight:500;margin-bottom:.25rem;line-height:1.35}
.prod-pr-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.pp-new{font-size:.9rem;font-weight:700}
.pp-old{font-size:.75rem;color:var(--muted);text-decoration:line-through}
.prod-stars{font-size:.65rem;color:var(--accent);letter-spacing:1px;margin-top:.15rem}
.slider-wrap{overflow:hidden}
.slider-track{
  display:flex;gap:1.25rem;
  transition:transform .42s cubic-bezier(.25,.1,.25,1);will-change:transform
}
.slider-track .prod-card{
  min-width:calc(25% - .94rem);flex-shrink:0
}
@media(max-width:1024px){.slider-track .prod-card{min-width:calc(33.33% - .84rem)}}
@media(max-width:768px){.slider-track .prod-card{min-width:calc(50% - .63rem)}}
@media(max-width:480px){.slider-track .prod-card{min-width:calc(80% - .5rem)}}
.sl-btns{display:flex;gap:.4rem}
.sl-btn{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--border);color:var(--text);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s,color .2s
}
.sl-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.feat-card{
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--border);overflow:hidden;width:100%
}
@media(max-width:768px){.feat-card{grid-template-columns:1fr}}
.feat-img{position:relative;overflow:hidden}
.feat-img img{
  width:100%;height:100%;
  min-height:0;max-height:480px;
  object-fit:cover;object-position:center;
  display:block;transition:transform .6s;
  aspect-ratio:1/1;
}
.feat-card:hover .feat-img img{transform:scale(1.03)}
@media(max-width:768px){.feat-img img{max-height:300px;aspect-ratio:16/9}}
.feat-bdg{
  position:absolute;top:1.25rem;right:0;
  background:var(--accent);color:#fff;
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.35rem .9rem;font-weight:700
}
.feat-txt{padding:3rem}
@media(max-width:1024px){.feat-txt{padding:2rem 1.75rem}}
@media(max-width:768px){.feat-txt{padding:2rem 1.2rem}}
.feat-txt h2{
  font-family:var(--font-heading);
  font-size:clamp(1.4rem,3vw,2.1rem);
  font-weight:600;line-height:1.15;margin-bottom:1rem
}
.feat-txt h2 em{font-style:italic;font-weight:400;color:var(--accent)}
.feat-txt p{font-size:.83rem;color:var(--muted);line-height:1.8;margin-bottom:1.25rem}
.feat-list{margin-bottom:1.75rem}
.feat-list li{
  display:flex;align-items:center;gap:.55rem;
  padding:.35rem 0;font-size:.82rem;color:var(--muted);
  border-bottom:1px solid var(--border)
}
.feat-list li svg{color:var(--accent);flex-shrink:0}
.feat-price-row{display:flex;align-items:baseline;gap:.65rem;margin-bottom:1.75rem;flex-wrap:wrap}
.fp-new{font-family:var(--font-heading);font-size:1.6rem;font-weight:600}
.fp-old{font-size:.9rem;color:var(--muted);text-decoration:line-through}
.fp-save{
  font-size:.65rem;background:#eaf7ee;color:#1e7e34;
  padding:.18rem .55rem;font-weight:700
}
[data-theme="dark"] .fp-save{background:#162318;color:#5cb85c}
.feat-acts{display:flex;gap:.65rem;align-items:center}
.btn-wish{
  width:44px;height:44px;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s,color .2s
}
.btn-wish:hover{background:var(--accent);border-color:var(--accent);color:#fff}

.parallax{
  position:relative;overflow:hidden;
  min-height:420px;display:flex;align-items:center;justify-content:center;
  text-align:center;width:100%
}
.parallax-bg{
  position:absolute;inset:-80px;
  background:url('https://images.unsplash.com/photo-1499652848871-1527a310b13a?w=1600&q=80') center/cover no-repeat;
  will-change:transform
}
.parallax-bg::after{content:'';position:absolute;inset:0;background:rgba(8,7,5,.7)}
.parallax-inner{
  position:relative;z-index:1;padding:5rem 2rem;color:#fff;max-width:640px
}
@media(max-width:768px){.parallax-inner{padding:4rem 1.2rem}}
.px-label{
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  display:block;color:var(--accent);margin-bottom:1rem
}
.px-title{
  font-family:var(--font-heading);
  font-size:clamp(1.5rem,4vw,2.5rem);
  font-weight:600;line-height:1.15;margin-bottom:1.2rem
}
.px-title em{font-style:italic;font-weight:400;color:var(--accent)}
.px-sub{font-size:.85rem;color:rgba(255,255,255,.72);line-height:1.8;margin-bottom:2rem}
.btn-px{
  padding:.85rem 2.2rem;background:transparent;
  border:1px solid rgba(255,255,255,.5);color:#fff;
  font-family:var(--font-body);font-size:.68rem;
  letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  transition:background .3s,border-color .3s
}
.btn-px:hover{background:var(--accent);border-color:var(--accent)}
.vid-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
@media(max-width:1024px){.vid-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.vid-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}}
.vid-card{cursor:pointer}
.vid-media{
  position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bg-alt)
}
.vid-thumb,.vid-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:opacity .4s
}
.vid-vid{opacity:0}
@media(min-width:769px){
  .vid-card:hover .vid-vid{opacity:1}
  .vid-card:hover .vid-thumb{opacity:0}
  .vid-card:hover .vid-play{opacity:0}
}
@media(max-width:768px){
  .vid-card.in-view .vid-vid{opacity:1}
  .vid-card.in-view .vid-thumb{opacity:0}
  .vid-card.in-view .vid-play{opacity:0}
  .vid-play{opacity:1}
}
.vid-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.85);pointer-events:none;transition:opacity .3s
}
.vid-info{padding:.7rem 0}
.vid-name{font-size:.82rem;font-weight:500;margin-bottom:.2rem}
.vid-price{font-size:.82rem;color:var(--accent);font-weight:600}

.brand-vid{
  position:relative;width:100%;height:460px;overflow:hidden;cursor:pointer
}
@media(max-width:768px){.brand-vid{height:300px}}
.bv-el{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bv-ov{
  position:absolute;inset:0;z-index:1;
  background:rgba(0,0,0,.48);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;padding:2rem;
  transition:background .3s
}
.brand-vid:hover .bv-ov{background:rgba(0,0,0,.35)}
.bv-title{
  font-family:var(--font-heading);
  font-size:clamp(1.4rem,4vw,2.5rem);
  font-weight:600;margin-bottom:.5rem
}
.bv-sub{font-size:.85rem;color:rgba(255,255,255,.72);margin-bottom:1.75rem}
.bv-play{
  width:60px;height:60px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.65);
  background:rgba(255,255,255,.12);backdrop-filter:blur(6px);
  color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s
}
.bv-play:hover{background:var(--accent);border-color:var(--accent);transform:scale(1.07)}

.cust-banner{display:grid;grid-template-columns:1fr 1fr;width:100%}
@media(max-width:768px){.cust-banner{grid-template-columns:1fr}}
.cb-img{position:relative;overflow:hidden}
.cb-img img{width:100%;height:100%;min-height:380px;object-fit:cover;transition:transform .6s}
.cust-banner:hover .cb-img img{transform:scale(1.03)}
@media(max-width:768px){.cb-img img{min-height:240px}}
.cb-txt{
  background:var(--bg-alt);padding:3.5rem 3rem;
  display:flex;flex-direction:column;justify-content:center
}
@media(max-width:1024px){.cb-txt{padding:2.5rem 2rem}}
@media(max-width:768px){.cb-txt{padding:2rem 1.2rem}}
.cb-txt h2{
  font-family:var(--font-heading);
  font-size:clamp(1.4rem,3vw,2rem);
  font-weight:600;line-height:1.15;margin-bottom:1rem
}
.cb-txt p{font-size:.83rem;color:var(--muted);line-height:1.8;margin-bottom:1.5rem}

.min-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:.9rem
}
@media(max-width:1200px){.min-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:768px){.min-grid{grid-template-columns:repeat(3,1fr);gap:.7rem}}
@media(max-width:480px){.min-grid{grid-template-columns:repeat(2,1fr);gap:.55rem}}
.min-card{text-align:center;cursor:pointer}
.min-img{
  aspect-ratio:1/1;overflow:hidden;background:var(--bg-alt);
  position:relative;margin-bottom:.6rem
}
.min-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.min-card:hover .min-img img{transform:scale(1.06)}
.min-qadd{
  position:absolute;bottom:0;left:0;right:0;
  background:var(--accent);color:#fff;
  padding:.45rem;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;font-family:var(--font-body);
  transform:translateY(100%);transition:transform .3s
}
.min-card:hover .min-qadd{transform:translateY(0)}
.min-name{font-size:.72rem;font-weight:500;margin-bottom:.18rem;line-height:1.3}
.min-price{font-size:.72rem;color:var(--accent);font-weight:700}

.soc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:.2rem;
  width:100%;
}
@media(min-width:769px){
  .soc-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  .soc-grid{grid-template-columns:repeat(2,1fr)}
}
.soc-item{
  position:relative;overflow:hidden;cursor:pointer;background:var(--bg-alt)
}
.soc-item::before{content:'';display:block;padding-top:100%}
.soc-item > *{position:absolute;inset:0;width:100%;height:100%}
.soc-type-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .45s ease;display:block;
}
.soc-item:hover img{transform:scale(1.07)}

.soc-type-vid video{
  width:100%;height:100%;object-fit:cover;
  transition:transform .45s ease;display:block;
}
.soc-item:hover video{transform:scale(1.07)}

.soc-ov{
  background:rgba(0,0,0,.42);
  display:flex;align-items:center;justify-content:center;
  color:#fff;opacity:0;transition:opacity .3s;
  z-index:2;
}
.soc-item:hover .soc-ov{opacity:1}

.srv-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:0;border:1px solid var(--border);width:100%;
}
.srv-item{
  text-align:center;padding:2.25rem 1.5rem;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  transition:background .3s;
}
.srv-item:last-child{border-right:none}
.srv-item.srv-last-row{border-bottom:none}
@media(max-width:640px){
  .srv-grid{grid-template-columns:repeat(2,1fr)}
  .srv-item:nth-child(2n){border-right:none}
}
@media(max-width:360px){
  .srv-grid{grid-template-columns:1fr}
  .srv-item{border-right:none}
  .srv-item:last-child{border-bottom:none}
}
.srv-item:hover{background:var(--bg-alt)}
.srv-ic{
  width:52px;height:52px;border-radius:50%;
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1rem;color:var(--accent);
  transition:background .3s,border-color .3s
}
.srv-item:hover .srv-ic{background:var(--accent-soft);border-color:var(--accent)}
.srv-item h4{
  font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:.4rem
}
.srv-item p{font-size:.78rem;color:var(--muted);line-height:1.6}
.testi-wrap{display:flex;align-items:center;gap:.75rem}
.testi-outer{flex:1;overflow:hidden}
.testi-track{
  display:flex;gap:1.25rem;
  transition:transform .42s cubic-bezier(.25,.1,.25,1)
}
.testi-card{
  min-width:100%;padding:2.25rem;
  border:1px solid var(--border);background:var(--bg)
}
.t-stars{font-size:1rem;color:var(--accent);letter-spacing:2px;margin-bottom:.85rem}
.t-quote{
  font-size:.85rem;line-height:1.8;color:var(--muted);
  font-style:italic;margin-bottom:1.5rem
}
.t-author{display:flex;align-items:center;gap:.85rem}
.t-author img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.t-aname{font-size:.82rem;font-weight:600;margin-bottom:.15rem}
.t-atag{font-size:.7rem;color:var(--muted)}
.t-dots{display:flex;justify-content:center;gap:.4rem;margin-top:1.25rem}
.t-dot{
  width:6px;height:6px;border-radius:99px;
  background:var(--border);cursor:pointer;
  transition:background .2s,width .2s
}
.t-dot.active{background:var(--accent);width:18px}
.btn-rev{
  padding:.6rem 1.4rem;border:1px solid var(--accent);color:var(--accent);
  font-family:var(--font-body);font-size:.65rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;
  transition:background .2s,color .2s;flex-shrink:0
}
.btn-rev:hover{background:var(--accent);color:#fff}
.bg-alt-sec{background:var(--bg-alt)}
section,header,footer{max-width:100%;overflow-x:hidden}
.cat-circle{
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.cat-circle img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  transform:none; /* reset, only scale on hover */
  transition:transform .4s ease;
}
.cat-item:hover .cat-circle img{transform:scale(1.08)}

@media(max-width:768px){
  .prod-acts{
    transform:translateY(0)!important;
    opacity:1!important;
    padding:.5rem;
    gap:.3rem;
  }
  .btn-qadd{font-size:.58rem;padding:.5rem .3rem}
  .btn-qwish{width:32px}
}

.vid-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .4s;
}
/* On hover still works for desktop */
.vid-card:hover .vid-vid{opacity:1}
.vid-card:hover .vid-thumb{opacity:0}
/* When in-viewport class added by JS */
.vid-card.in-view .vid-vid{opacity:1}
.vid-card.in-view .vid-thumb{opacity:0}
.vid-card.in-view .vid-play{opacity:0}

.banners-row{
  display:flex;flex-direction:column;width:100%;
}
.cust-banner{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:420px;width:100%;
}
.cust-banner.reverse{direction:rtl}
.cust-banner.reverse .cb-img,.cust-banner.reverse .cb-txt{direction:ltr}
@media(max-width:768px){
  .cust-banner{grid-template-columns:1fr}
  .cust-banner.reverse{direction:ltr}
  .cust-banner.reverse .cb-img{order:-1}
}
.cb-img{position:relative;overflow:hidden;min-height:280px}
.cb-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.cust-banner:hover .cb-img img{transform:scale(1.03)}
@media(max-width:768px){.cb-img img{min-height:220px}}

/* ── SOCIAL GRID: default images/video, icon on hover only ────── */
.soc-item{cursor:pointer;background:var(--bg-alt)}
.soc-thumb{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:opacity .4s,transform .4s;
  opacity:1;z-index:1;
}
.soc-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;z-index:0;transition:opacity .4s;
}
/* Videos play by default when in view, images fade */
.soc-item.has-vid .soc-vid{opacity:1;z-index:1}
.soc-item.has-vid .soc-thumb{opacity:0;z-index:0}
/* Icon overlay only on hover */
.soc-ov{
  position:absolute;inset:0;z-index:3;
  background:rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;
  color:#fff;opacity:0;transition:opacity .3s;
  pointer-events:none;
}
.soc-item:hover .soc-ov{opacity:1}

.review-avatar-wrap{
  display:flex;align-items:center;gap:1rem;margin-bottom:1rem
}
.review-avatar-preview{
  width:64px;height:64px;border-radius:50%;
  object-fit:cover;border:2px solid var(--border);
  background:var(--bg-alt);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.review-avatar-preview img{width:100%;height:100%;object-fit:cover;display:block}
.review-avatar-label{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem 1rem;border:1px solid var(--border);
  font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;cursor:pointer;color:var(--text);
  transition:border-color .2s,color .2s;
}
.review-avatar-label:hover{border-color:var(--accent);color:var(--accent)}
.review-avatar-input{display:none}
.review-otp-note{
  font-size:.72rem;color:var(--muted);
  background:var(--bg-alt);border:1px solid var(--border);
  padding:.6rem .85rem;margin-bottom:1rem;
  display:flex;align-items:center;gap:.4rem;
}
.review-step{display:none}
.review-step.active{display:block}