/*
Theme Name: Ótica Excelência
Theme URI: https://oticaexcelencia.com
Author: Ótica Excelência
Description: Tema WordPress + WooCommerce para a Ótica Excelência. Onde a Qualidade encontra o cuidado.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: otica-excelencia
License: GPL-2.0-or-later
*/

:root {
  --oe-verde-escuro: #0b3d1e;
  --oe-verde-medio: #14532d;
  --oe-verde-claro: #7bc62d;
  --oe-verde-claro-hover: #69b01f;
  --oe-fundo: #f4f7f5; /* branco gelo */
  --oe-branco: #ffffff;
  --oe-texto: #1c2b22;
  --oe-borda: #dbe5de;
  --oe-raio: 14px;
  --oe-sombra: 0 6px 22px rgba(11, 61, 30, .10);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--oe-fundo);
  color: var(--oe-texto);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--oe-verde-medio); text-decoration: none; }
a:hover { color: var(--oe-verde-claro-hover); }

h1, h2, h3, h4 { color: var(--oe-verde-escuro); line-height: 1.2; margin: 0 0 .6em; font-weight: 700; }

.oe-container { width: min(1180px, 92%); margin-inline: auto; }

/* ---------- Botões ---------- */
.oe-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  display: inline-block;
  background: var(--oe-verde-claro);
  color: var(--oe-verde-escuro);
  border: 0;
  border-radius: 999px;
  padding: .85em 1.8em;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background .2s, transform .2s, color .2s;
}
.oe-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--oe-verde-escuro);
  color: #fff;
  transform: translateY(-2px);
}
.oe-btn--escuro { background: var(--oe-verde-escuro); color: #fff; }
.oe-btn--escuro:hover { background: var(--oe-verde-claro); color: var(--oe-verde-escuro); }
.oe-btn--grande { padding: 1em 2.6em; font-size: 1.05rem; }

/* ---------- Cabeçalho ---------- */
.oe-header {
  background: var(--oe-verde-escuro);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
  border-bottom: 3px solid var(--oe-verde-claro);
}
.oe-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: .7rem 0;
}
.oe-logo { display: flex; align-items: center; gap: .7rem; }
.oe-logo img, .oe-logo .custom-logo { max-height: 62px; width: auto; border: 0; border-radius: 0; }
.oe-logo__texto { color: #fff; font-weight: 700; font-size: 1.25rem; letter-spacing: .04em; }
.oe-logo__texto span { color: var(--oe-verde-claro); }

.oe-nav ul { list-style: none; display: flex; gap: 1.6rem; margin: 0; padding: 0; }
.oe-nav a { color: #fff; font-weight: 500; padding: .3rem 0; border-bottom: 2px solid transparent; }
.oe-nav a:hover, .oe-nav .current-menu-item > a { color: var(--oe-verde-claro); border-color: var(--oe-verde-claro); }

.oe-carrinho {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--oe-verde-claro);
  color: var(--oe-verde-escuro);
  padding: .5rem 1rem;
  border-radius: 999px;
  font-weight: 600;
}
.oe-carrinho:hover { background: #fff; color: var(--oe-verde-escuro); }
.oe-carrinho__qtd {
  background: var(--oe-verde-escuro);
  color: #fff;
  border-radius: 999px;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
}

.oe-menu-toggle { display: none; background: none; border: 2px solid var(--oe-verde-claro); color: #fff; border-radius: 8px; padding: .4rem .7rem; font-size: 1.2rem; cursor: pointer; }

/* ---------- Hero ---------- */
.oe-hero {
  background:
    radial-gradient(circle at 85% 20%, rgba(123, 198, 45, .35), transparent 45%),
    linear-gradient(135deg, var(--oe-verde-escuro) 0%, var(--oe-verde-medio) 100%);
  color: #fff;
  padding: clamp(3rem, 8vw, 6.5rem) 0;
  overflow: hidden;
}
.oe-hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.oe-hero__selo {
  display: inline-block;
  background: rgba(123, 198, 45, .18);
  color: var(--oe-verde-claro);
  border: 1px solid var(--oe-verde-claro);
  padding: .3rem 1rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.oe-hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.4rem); }
.oe-hero h1 em { color: var(--oe-verde-claro); font-style: normal; }
.oe-hero p { font-size: 1.1rem; max-width: 520px; opacity: .92; margin-bottom: 2rem; }
.oe-hero__acoes { display: flex; flex-wrap: wrap; gap: 1rem; }
.oe-btn--contorno { background: transparent; border: 2px solid var(--oe-verde-claro); color: #fff; }
.oe-btn--contorno:hover { background: var(--oe-verde-claro); color: var(--oe-verde-escuro); }

.oe-hero__visual { display: flex; justify-content: center; }
.oe-hero__olho {
  width: min(360px, 80%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 3px solid var(--oe-verde-claro);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 14px rgba(123, 198, 45, .12), 0 20px 50px rgba(0, 0, 0, .3);
}
.oe-hero__olho img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
/* Logo sem borda extra: a própria logo já é o círculo */
.oe-hero__olho--logo { background: none; border: 0; box-shadow: none; filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .35)); }
.oe-hero__olho--logo img { border-radius: 0; }
.oe-hero__olho svg { width: 70%; height: auto; }

/* ---------- Diferenciais ---------- */
.oe-diferenciais { background: var(--oe-branco); border-bottom: 1px solid var(--oe-borda); }
.oe-diferenciais__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1.6rem 0; }
.oe-diferencial { display: flex; align-items: center; gap: .8rem; font-weight: 600; color: var(--oe-verde-escuro); font-size: .95rem; }
.oe-diferencial__icone {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--oe-fundo);
  border: 2px solid var(--oe-verde-claro);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
}

/* ---------- Seção de produtos ---------- */
.oe-secao { padding: clamp(3rem, 7vw, 5rem) 0; }
.oe-secao__titulo { text-align: center; margin-bottom: 2.6rem; }
.oe-secao__titulo h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
.oe-secao__titulo h2::after {
  content: "";
  display: block;
  width: 70px;
  height: 4px;
  background: var(--oe-verde-claro);
  border-radius: 4px;
  margin: .7rem auto 0;
}
.oe-secao__titulo p { color: #4c5f54; margin: 0; }
.oe-ver-mais { text-align: center; margin-top: 3rem; }

/* ---------- Grade de produtos (WooCommerce) ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  background: var(--oe-branco);
  border: 1px solid var(--oe-borda);
  border-radius: var(--oe-raio);
  padding: 1rem 1rem 1.4rem;
  text-align: center;
  position: relative;
  transition: box-shadow .25s, transform .25s, border-color .25s;
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product:hover {
  box-shadow: var(--oe-sombra);
  transform: translateY(-5px);
  border-color: var(--oe-verde-claro);
}
.woocommerce ul.products li.product a img {
  margin: 0 0 1rem !important;
  border-radius: 10px;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--oe-fundo);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  color: var(--oe-verde-escuro);
  font-size: 1.02rem;
  font-weight: 600;
  padding: 0;
  min-height: 2.6em;
}
.woocommerce ul.products li.product .price {
  color: var(--oe-verde-medio);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 1rem;
  display: block;
}
.woocommerce ul.products li.product .price del { color: #8a968f; font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button { margin-top: auto; width: 100%; text-align: center; }
.woocommerce span.onsale {
  background: var(--oe-verde-claro);
  color: var(--oe-verde-escuro);
  min-height: auto;
  min-width: auto;
  line-height: 1;
  padding: .55em .9em;
  border-radius: 999px;
  top: 14px;
  left: 14px;
  right: auto;
  font-weight: 700;
}
.woocommerce .star-rating span::before { color: var(--oe-verde-claro); }

/* ---------- Páginas internas ---------- */
.oe-pagina { padding: 3rem 0 4rem; }
.oe-pagina__titulo { margin-bottom: 1.6rem; }
.oe-pagina__conteudo {
  background: var(--oe-branco);
  border: 1px solid var(--oe-borda);
  border-radius: var(--oe-raio);
  padding: clamp(1.2rem, 3vw, 2.4rem);
}
.woocommerce-loop-category__title { color: var(--oe-verde-escuro); }
.woocommerce div.product .product_title { color: var(--oe-verde-escuro); }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--oe-verde-medio); font-weight: 700; }
.woocommerce-message, .woocommerce-info { border-top-color: var(--oe-verde-claro) !important; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--oe-verde-claro) !important; }
.woocommerce-breadcrumb { color: #5b6e63; font-size: .9rem; }
.woocommerce-ordering select, .woocommerce-result-count { margin-bottom: 1.4rem; }

/* ---------- Rodapé ---------- */
.oe-footer {
  background: var(--oe-verde-escuro);
  color: #fff;
  border-top: 4px solid var(--oe-verde-claro);
  padding: 1.6rem 0;
  text-align: center;
}
.oe-footer p {
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-align: center;
}

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .oe-hero__inner { grid-template-columns: 1fr; text-align: center; }
  .oe-hero p { margin-inline: auto; }
  .oe-hero__acoes { justify-content: center; }
  .oe-diferenciais__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .oe-menu-toggle { display: block; }
  .oe-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--oe-verde-escuro); padding: 1rem 4%; border-top: 1px solid rgba(255,255,255,.15); }
  .oe-nav.is-aberto { display: block; }
  .oe-nav ul { flex-direction: column; gap: .8rem; }
}
@media (max-width: 520px) {
  .woocommerce ul.products { gap: .9rem; }
  .woocommerce ul.products li.product { padding: .7rem .7rem 1rem; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .9rem; }
  .oe-carrinho__texto { display: none; }
  .oe-logo__texto { font-size: 1.05rem; }
}