/* ==========================================================================
   Ótica Store — folha de estilo principal
   Paleta: verde sálvia (#93a66f). Tipografia: Inter.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --green:#93a66f;          /* cor principal (nav, detalhes, marca) */
  --green-dark:#79905a;
  --btn:#7c9153;            /* botões — tom levemente mais escuro p/ legibilidade */
  --btn-hover:#6b7f47;
  --ink:#1f2419;           /* texto principal */
  --muted:#8a8a82;         /* texto secundário */
  --line:#e7e7e1;          /* bordas */
  --bg:#ffffff;
  --bg-soft:#f5f6f1;
  --star:#e8b423;
  --sale:#c0392b;
  --radius:6px;
  --wrap:1180px;
  --font: 'Inter', system-ui, -apple-system, Arial, sans-serif;
  --serif: 'Inter', system-ui, Arial, sans-serif;  /* tudo em Inter */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.5;font-size:14px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- Barra superior ---------- */
.topbar{background:var(--green);color:#fff;font-size:12px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px}
.topbar a{color:#fff;opacity:.9}
.topbar a:hover{opacity:1}
.topbar .t-left span,.topbar .t-right a{margin-right:18px;display:inline-flex;align-items:center;gap:6px}
.topbar .t-right{display:flex;align-items:center}

/* ---------- Header ---------- */
.header{border-bottom:1px solid var(--line)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;height:86px}
.brand{font-family:var(--serif);font-size:30px;font-weight:700;letter-spacing:-1px;display:inline-flex;align-items:center}
.brand img{height:40px;width:auto;display:block}
.brand span{color:var(--green)}
.socials{display:flex;gap:14px;font-size:15px;color:var(--ink)}
.socials a:hover{color:var(--green)}
.header-actions{display:flex;align-items:center;gap:24px;font-size:20px}
.header-actions .account{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--ink)}
.header-actions .account:hover{color:var(--green)}
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:22px}
.cart-count{position:absolute;top:-8px;right:-10px;background:var(--btn);color:#fff;font-size:11px;
  min-width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font)}

/* ---------- Navegação ---------- */
.nav{border-bottom:1px solid var(--line)}
.nav ul{display:flex;justify-content:center;gap:34px;list-style:none;height:48px;align-items:center}
.nav a{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink)}
.nav a:hover,.nav a.active{color:var(--green)}

/* ---------- Hero ---------- */
.hero{background:var(--bg-soft);text-align:center;padding:70px 20px;position:relative}
.hero .kicker{font-size:13px;color:var(--muted);letter-spacing:1px;margin-bottom:10px}
.hero h1{font-family:var(--serif);font-size:56px;font-weight:700;line-height:1.05}
.hero .cta{display:inline-block;margin-top:26px;background:var(--btn);color:#fff;padding:13px 34px;
  border-radius:var(--radius);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:12px}
.hero .cta:hover{background:var(--btn-hover)}
/* hero com imagem de fundo */
.hero.has-img{background-size:cover;background-position:center;min-height:420px;display:flex;
  flex-direction:column;align-items:center;justify-content:center}
.hero.has-img::before{content:"";position:absolute;inset:0;background:rgba(20,24,16,.42)}
.hero.has-img > *{position:relative;z-index:1}
.hero.has-img .kicker{color:#e8ead9}
.hero.has-img h1{color:#fff}

/* ---------- 3 banners de destaque ---------- */
.highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:26px 0 8px}
.hl-card{position:relative;border-radius:var(--radius);overflow:hidden;min-height:190px;
  background:var(--green);color:#fff;display:flex;align-items:flex-end;background-size:cover;background-position:center}
.hl-card.has-img::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 100%)}
.hl-card .hl-txt{position:relative;z-index:1;padding:20px}
.hl-card .hl-txt small{opacity:.9;font-size:12px}
.hl-card .hl-txt h3{font-family:var(--serif);font-size:24px;font-weight:700;margin-top:2px}
.hl-card:hover{outline:2px solid var(--green)}

/* ---------- Faixa de categorias (home) ---------- */
.cat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:30px 0}
.cat-card{position:relative;border-radius:var(--radius);overflow:hidden;background:#20241a;color:#fff;
  min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;padding:20px}
.cat-card small{opacity:.8;font-size:11px}
.cat-card h3{font-family:var(--serif);font-size:22px;margin-top:2px}
.cat-card .cat-ico{position:absolute;top:14px;right:16px;font-size:34px;opacity:.35}
.cat-card:hover{outline:2px solid var(--green)}

/* ---------- Títulos de seção ---------- */
.section-head{text-align:center;padding:36px 0 6px}
.section-head h2{font-family:var(--serif);font-size:30px}
.section-head p{color:var(--muted);margin-top:4px}

/* ---------- Grid de produtos ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:20px 0 50px}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;position:relative;
  display:flex;flex-direction:column;transition:box-shadow .15s}
.card:hover{box-shadow:0 6px 22px rgba(0,0,0,.08)}
.card .thumb{background:var(--bg-soft);padding:26px;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1}
.card .thumb img{width:78%}
.badge-sale{position:absolute;top:10px;right:10px;background:var(--sale);color:#fff;font-size:11px;
  font-weight:700;padding:3px 7px;border-radius:3px}
.card .info{padding:14px 16px 18px;text-align:center;display:flex;flex-direction:column;flex:1}
.card .p-name{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);min-height:32px}
.card .stars{color:var(--star);font-size:13px;margin:8px 0 6px}
.card .price{font-size:17px;font-weight:700}
.card .price .old{color:var(--muted);font-weight:400;text-decoration:line-through;font-size:13px;margin-left:6px}
.card .add{margin-top:12px;background:var(--btn);color:#fff;border:none;cursor:pointer;
  padding:10px;border-radius:var(--radius);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:11px}
.card .add:hover{background:var(--btn-hover)}

/* ---------- Layout de loja (sidebar + produtos) ---------- */
.shop{display:grid;grid-template-columns:230px 1fr;gap:28px;padding:26px 0 60px}
.sidebar h4{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--green);
  border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:12px;margin-top:22px}
.sidebar h4:first-child{margin-top:0}
.sidebar ul{list-style:none}
.sidebar li{padding:6px 0;color:var(--ink);cursor:pointer;font-size:13px}
.sidebar li:hover,.sidebar li.active{color:var(--green);font-weight:700}
.filter-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;color:var(--muted)}
.shop-banner{background:var(--bg-soft);border-radius:var(--radius);padding:34px;margin-bottom:8px;
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;min-height:150px;text-align:right}
.shop-banner small{color:var(--muted)}
.shop-banner h3{font-family:var(--serif);font-size:34px}
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);
  padding:14px 0;margin:14px 0;flex-wrap:wrap;gap:10px}
.shop-toolbar .tb-right{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--muted)}
.shop-toolbar select{padding:6px 10px;border:1px solid var(--line);border-radius:4px}
.crumbs{color:var(--muted);font-size:12px;padding:14px 0}
.crumbs a:hover{color:var(--green)}

/* ---------- Página de produto ---------- */
.product{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:26px 0 50px}
.p-gallery .main{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-soft);
  padding:40px;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1}
.p-gallery .main img{width:70%}
.p-thumbs{display:flex;gap:10px;margin-top:12px}
.p-thumbs button{border:1px solid var(--line);border-radius:4px;background:var(--bg-soft);padding:10px;
  width:76px;height:76px;cursor:pointer}
.p-thumbs button.active{border-color:var(--green)}
.p-detail h1{font-family:var(--serif);font-size:30px;margin-bottom:8px}
.p-meta{color:var(--muted);font-size:13px;line-height:2;margin:14px 0}
.p-meta b{color:var(--ink)}
.p-price{font-size:26px;font-weight:700;margin:10px 0}
.p-price .old{color:var(--muted);text-decoration:line-through;font-size:16px;font-weight:400;margin-left:8px}
.p-options label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:1px;margin:16px 0 6px;color:var(--muted)}
.p-options select{width:100%;max-width:320px;padding:10px;border:1px solid var(--line);border-radius:4px}
.p-buy{display:flex;align-items:center;gap:12px;margin-top:22px}
.p-buy input{width:64px;padding:10px;border:1px solid var(--line);border-radius:4px;text-align:center}
.p-buy .add{background:var(--btn);color:#fff;border:none;cursor:pointer;padding:13px 30px;border-radius:var(--radius);
  font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:12px}
.p-buy .add:hover{background:var(--btn-hover)}
.p-tabs{border-top:1px solid var(--line);margin-top:30px;padding-top:20px}
.p-tabs .tab-head{display:flex;gap:24px;color:var(--muted);font-size:14px;margin-bottom:14px}
.p-tabs .tab-head b{color:var(--ink)}

/* ---------- Carrinho ---------- */
.cart-wrap{padding:26px 0 60px}
.cart-wrap h1{font-family:var(--serif);font-size:30px;margin-bottom:20px}
.cart-table{width:100%;border-collapse:collapse}
.cart-table th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);
  border-bottom:1px solid var(--line);padding:12px 8px}
.cart-table td{border-bottom:1px solid var(--line);padding:14px 8px;vertical-align:middle}
.cart-item{display:flex;align-items:center;gap:14px}
.cart-item .ci-thumb{width:64px;height:64px;background:var(--bg-soft);border-radius:4px;padding:8px}
.cart-item .ci-name{font-size:13px}
.cart-item small{color:var(--muted)}
.qty-box{display:flex;align-items:center;border:1px solid var(--line);border-radius:4px;width:fit-content}
.qty-box button{border:none;background:none;padding:6px 10px;cursor:pointer;font-size:15px}
.qty-box span{padding:0 8px;min-width:24px;text-align:center}
.ci-remove{color:var(--sale);cursor:pointer;background:none;border:none;font-size:16px}
.cart-foot{display:flex;justify-content:flex-end;margin-top:24px}
.cart-summary{width:340px;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.cart-summary .row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px}
.cart-summary .row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-size:18px;font-weight:700}
.checkout-btn{display:block;width:100%;margin-top:16px;background:var(--btn);color:#fff;border:none;cursor:pointer;
  padding:14px;border-radius:var(--radius);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:12px}
.checkout-btn:hover{background:var(--btn-hover)}
.cart-empty{text-align:center;padding:60px 20px;color:var(--muted)}
.cart-empty a{color:var(--green);font-weight:700}

/* ---------- Rodapé ---------- */
.footer{background:#20241a;color:#c9ccbf;margin-top:40px;padding:44px 0 26px;font-size:13px}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:30px}
.footer h5{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.footer a{display:block;padding:5px 0;color:#c9ccbf}
.footer a:hover{color:#fff}
.footer .brand{color:#fff;font-family:var(--serif);font-size:24px;margin-bottom:10px}
.footer .foot-logo-chip{display:inline-block;background:#fff;padding:8px 12px;border-radius:8px;margin-bottom:14px}
.footer .foot-logo-chip img{height:34px;width:auto;display:block}
.footer .copy{border-top:1px solid #3a3f30;margin-top:30px;padding-top:18px;text-align:center;color:#8f9382}

/* ---------- Modal flutuante WhatsApp ---------- */
.wa-fab{position:fixed;bottom:22px;right:22px;width:56px;height:56px;border-radius:50%;background:#25d366;
  color:#fff;border:none;cursor:pointer;font-size:28px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.22);z-index:80;transition:transform .15s}
.wa-fab:hover{transform:scale(1.06)}
.wa-modal{position:fixed;bottom:90px;right:22px;width:300px;background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.25);z-index:81;opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}
.wa-modal.open{opacity:1;transform:translateY(0);pointer-events:auto}
.wa-head{background:#075e54;color:#fff;padding:14px 16px;display:flex;align-items:center;gap:10px}
.wa-head .wa-ava{width:38px;height:38px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;font-size:20px}
.wa-head b{font-size:14px}
.wa-head small{display:block;opacity:.8;font-size:11px}
.wa-head .wa-x{margin-left:auto;cursor:pointer;opacity:.85;font-size:16px}
.wa-body{padding:16px;background:#ece5dd}
.wa-bubble{background:#fff;border-radius:10px;padding:10px 12px;font-size:13px;color:#333;box-shadow:0 1px 1px rgba(0,0,0,.08);max-width:90%}
.wa-body .wa-cta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;background:#25d366;
  color:#fff;padding:11px;border-radius:8px;font-weight:600;font-size:13px}
.wa-body .wa-cta:hover{background:#1fb457}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:24px;right:24px;background:var(--ink);color:#fff;padding:14px 20px;border-radius:var(--radius);
  opacity:0;transform:translateY(10px);transition:.25s;z-index:99;font-size:13px}
.toast.show{opacity:1;transform:translateY(0)}

/* ---------- Responsivo ---------- */
@media(max-width:900px){
  .grid,.grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .cat-strip{grid-template-columns:repeat(2,1fr)}
  .highlights{grid-template-columns:1fr}
  .hero.has-img{min-height:320px}
  .shop{grid-template-columns:1fr}
  .product{grid-template-columns:1fr}
  .footer .cols{grid-template-columns:1fr 1fr}
  .hero h1{font-size:38px}
  .socials{display:none}
}
@media(max-width:560px){
  .grid,.grid.cols-4,.cat-strip{grid-template-columns:1fr}
  .nav ul{gap:16px;overflow-x:auto;justify-content:flex-start}
  .cart-summary{width:100%}
  .footer .cols{grid-template-columns:1fr}
}