
:root{--ink:#19283e;--muted:#707b89;--soft:#f5f6f8;--line:#e4e8ee;--blue:#4f6fe6;--purple:#7d5bdc;--green:#27965c;--grad:linear-gradient(90deg,#4f6fe6,#805bdc)}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--soft);color:var(--ink)}a{text-decoration:none;color:inherit}.wrap{width:min(1260px,94%);margin:auto}
.store-top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}.head{height:76px;display:flex;align-items:center;gap:20px}.brand img{width:165px;height:58px;object-fit:contain;object-position:left}.search{flex:1;display:flex;box-shadow:0 4px 14px rgba(34,48,74,.06)}.search input{flex:1;padding:14px;border:1px solid var(--line);border-radius:9px 0 0 9px;outline:none}.search button{padding:0 20px;border:0;background:var(--ink);color:#fff;border-radius:0 9px 9px 0}.hlink{font-size:13px;font-weight:bold}.hero{padding:32px 0;background:linear-gradient(100deg,#fff,#eef1ff)}.hero h1{margin:0 0 7px;font-size:30px}.hero p{margin:0;color:var(--muted)}
.layout{display:grid;grid-template-columns:225px 1fr;gap:22px;padding:28px 0}.side{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;height:max-content}.side h3{font-size:15px;margin-top:0}.side a{display:block;padding:10px 0;border-bottom:1px solid #f0f2f4;font-size:13px;color:#667181}.side a:hover{color:var(--purple)}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;color:#7a8491;font-size:13px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.product{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.2s}.product:hover{transform:translateY(-4px);box-shadow:0 16px 35px rgba(25,40,62,.10)}.pic{height:220px;background:#fafbfc;display:grid;place-items:center;overflow:hidden}.pic img{width:100%;height:100%;object-fit:contain;padding:8px}.placeholder{font-size:60px;color:#a6b0bd}.pb{padding:16px}.brandname{font-size:10px;text-transform:uppercase;color:#8d96a1;font-weight:bold}.pname{height:43px;font-size:14px;line-height:1.45;margin:6px 0}.price{font-size:24px;font-weight:bold}.install{font-size:12px;color:var(--green);margin-top:3px}.view{display:block;text-align:center;margin-top:14px;background:#eef1ff;color:#526ee0;padding:11px;border-radius:9px;font-size:12px;font-weight:bold}.empty{background:#fff;border:1px dashed #ccd3dc;border-radius:14px;padding:40px;text-align:center}
.detail{padding:26px 0}.crumb{font-size:12px;color:#7e8795;margin-bottom:14px}.product-card{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px}.gallery{display:grid;grid-template-columns:76px 1fr;gap:12px}.thumbs{display:flex;flex-direction:column;gap:8px}.thumbs img{width:70px;height:70px;object-fit:contain;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:#fff}.mainpic{height:480px;border-radius:13px;background:#fafbfc;display:grid;place-items:center;overflow:hidden}.mainpic img{max-width:100%;max-height:100%;object-fit:contain}.details .brandname{margin-top:6px}.details h1{font-size:25px;line-height:1.3}.rating{color:#e6a62d;font-size:13px}.details .price{font-size:36px;margin-top:20px}.box{border:1px solid var(--line);border-radius:13px;padding:15px;margin-top:18px;font-size:13px}.stock{color:var(--green);font-weight:bold}.qty{width:70px;padding:8px;border:1px solid var(--line);border-radius:7px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}.actions button{padding:14px;border:0;border-radius:9px;font-weight:bold;cursor:pointer}.buy{background:var(--grad);color:#fff}.add{background:#edf1ff;color:#536ee0}.extra{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;margin-top:18px}.spec{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #edf0f3;padding:10px 0;font-size:13px}.cartbox,.checkoutbox,.paybox{max-width:850px;margin:28px auto;background:#fff;border:1px solid var(--line);border-radius:17px;padding:25px}.cartitem{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}.total{font-size:24px;font-weight:bold;text-align:right;margin:20px 0}.primary{display:block;width:100%;border:0;border-radius:9px;background:var(--ink);color:#fff;padding:14px;text-align:center;font-weight:bold;cursor:pointer}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.formgrid input,.formgrid select{width:100%;padding:12px;border:1px solid var(--line);border-radius:8px}.full{grid-column:1/-1}.payment-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.payment-options label{padding:15px;border:1px solid var(--line);border-radius:10px}
@media(max-width:900px){.layout{grid-template-columns:1fr}.side{display:none}.grid{grid-template-columns:repeat(2,1fr)}.product-card{grid-template-columns:1fr}.mainpic{height:360px}}
@media(max-width:600px){.search{display:none}.grid{grid-template-columns:1fr}.gallery{grid-template-columns:1fr}.thumbs{flex-direction:row}.actions,.formgrid,.payment-options{grid-template-columns:1fr}.full{grid-column:auto}}

.cart-title-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.cart-title-row h1{margin-right:auto}.cartitem-info{min-width:0}.cartitem-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}.remove-item,.clear-cart{border:1px solid #d9dee6;background:#fff;color:#b42318;border-radius:8px;padding:8px 12px;font-weight:bold;cursor:pointer}.remove-item:hover,.clear-cart:hover{background:#fff2f0;border-color:#efb6af}.clear-cart{font-size:12px}@media(max-width:600px){.cart-title-row{align-items:flex-start}.cartitem{align-items:flex-start}.cartitem-actions{flex-direction:column;align-items:flex-end;gap:8px}}


/* ELYON - Catálogo estilo marketplace */
body{background:#f5f5f5}
.hero{
  background:#fff;
  border-bottom:1px solid #ededed;
  padding:24px 0;
}
.hero h1{font-size:28px}
.layout{
  grid-template-columns:220px minmax(0,1fr);
  gap:24px;
  padding-top:24px;
}
.side{
  background:transparent;
  border:0;
  border-radius:0;
  padding:4px 0;
}
.side h3{
  font-size:16px;
  color:#333;
  margin:0 0 12px;
}
.side a{
  border:0;
  padding:8px 2px;
  font-size:14px;
  color:#666;
}
.side a:hover{
  color:#3483fa;
}
.toolbar{
  color:#666;
  font-size:13px;
  margin-bottom:14px;
}
.grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.product{
  background:#fff;
  border:1px solid #ebebeb;
  border-radius:6px;
  overflow:hidden;
  transition:box-shadow .2s ease,transform .2s ease;
  min-width:0;
}
.product:hover{
  transform:none;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.pic{
  height:260px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:14px;
  border-bottom:1px solid #f3f3f3;
}
.pic img{
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center center;
  padding:0 !important;
  display:block;
}
.pb{
  padding:16px 16px 18px;
}
.brandname{
  font-size:11px;
  color:#888;
  margin-bottom:7px;
}
.pname{
  height:auto;
  min-height:42px;
  font-size:14px;
  line-height:1.38;
  color:#333;
  margin:0 0 12px;
  font-weight:400;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.price{
  font-size:27px;
  line-height:1.1;
  color:#222;
  font-weight:400;
  margin-top:4px;
}
.install{
  color:#00a650;
  font-size:13px;
  margin-top:5px;
}
.view{
  margin-top:16px;
  padding:11px 12px;
  border-radius:6px;
  background:#eaf2ff;
  color:#3483fa;
  font-size:13px;
}
.view:hover{
  background:#dbeaff;
}
@media(max-width:1100px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .side{
    display:block;
    background:#fff;
    padding:14px;
    border-radius:8px;
  }
  .side a{display:inline-block;margin-right:12px}
}
@media(max-width:600px){
  .grid{grid-template-columns:1fr}
  .pic{height:300px}
}

/* Fotos sempre inteiras na página do produto */
.mainpic{
  background:#fff !important;
  padding:18px;
}
.mainpic img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
}
.thumbs img{
  object-fit:contain !important;
  padding:4px;
  background:#fff;
}


/* ELYON - Fotos dos anúncios enquadradas como marketplace */
.pic{
  height:210px !important;
  min-height:210px !important;
  background:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  padding:20px !important;
}
.pic img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:170px !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  margin:auto !important;
  padding:0 !important;
}
.mainpic{
  height:420px !important;
  background:#fff !important;
  padding:32px !important;
}
.mainpic img{
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:356px !important;
  object-fit:contain !important;
  object-position:center center !important;
  margin:auto !important;
}
@media(max-width:600px){
  .pic{
    height:200px !important;
    min-height:200px !important;
    padding:16px !important;
  }
  .pic img{max-height:168px !important;}
  .mainpic{
    height:330px !important;
    padding:22px !important;
  }
  .mainpic img{max-height:286px !important;}
}


/* ELYON - Botão Converse com um especialista */
.specialist-btn{
  position:relative;display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;min-height:46px;padding:11px 14px;margin-top:12px;border-radius:12px;
  background:linear-gradient(180deg,#3be27b 0%,#18b95a 55%,#0f9b49 100%);
  color:#fff!important;font-weight:800;font-size:13px;text-align:center;text-decoration:none!important;
  border:1px solid rgba(0,120,55,.45);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,92,40,.18),
             0 7px 0 #0b7f3c,0 12px 22px rgba(15,155,73,.24);
  transform:translateY(0);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;overflow:hidden;
}
.specialist-btn::before{
  content:"";position:absolute;inset:2px 3px auto 3px;height:38%;
  border-radius:10px 10px 50% 50%;background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0));pointer-events:none;
}
.specialist-btn:hover{
  transform:translateY(-4px);filter:brightness(1.03);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -3px 0 rgba(0,92,40,.18),
             0 9px 0 #0b7f3c,0 17px 28px rgba(15,155,73,.30);
}
.specialist-btn:active{
  transform:translateY(3px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.22),0 3px 0 #0b7f3c,0 7px 14px rgba(15,155,73,.20);
}
.specialist-icon{
  position:relative;z-index:1;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.18);font-size:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.specialist-btn span{position:relative;z-index:1}
.specialist-card-btn{animation:elyonSpecialistFloat 3.2s ease-in-out infinite}
.specialist-detail-btn{margin-top:16px;min-height:52px;font-size:14px}
@keyframes elyonSpecialistFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.specialist-card-btn:hover{animation:none;transform:translateY(-4px)}
@media(max-width:600px){.specialist-btn{min-height:44px;font-size:12px;padding:10px 12px}}
