/* ==========================================================================
   Odous de Deus: acabamento da loja (06/11/2026)
   Leva para toda a vitrine a linguagem da página Empresa: azul-marinho
   profundo, dourado e tipografia editorial. Carregado depois do theme.php.
   Para desfazer o visual, basta tirar o <link> de layouts/store.php.
   ========================================================================== */

/* ---------- 1. Cores ------------------------------------------------------ */
:root:root {
  --brand: #172864;
  --brand-hover: #0F1C4D;
  --brand-deep: #0B1537;
  --brand-ink: #08102A;
  --brand-tint: #ECEEF7;
  --brand-tint-2: #D9DDEF;
  --accent: #C9A23A;
  --accent-2: #E8C659;
  --on-brand: #FFFFFF;
  --odh-gold: #E8C659;
  --odh-gold-soft: rgba(232, 198, 89, .14);
  --odh-navy: #0B1537;
  --odh-card-line: var(--line);
}
:root:root[data-theme="dark"] {
  --bg: #070F24;
  --bg-sunken: #050B1B;
  --surface: #0D1834;
  --surface-2: #132144;
  --surface-3: #1B2C56;
  --line: #22335C;
  --line-2: #31466F;
  --text: #EEF2FB;
  --text-2: #C3CEE4;
  --muted: #98A7C6;
  --brand: #E8C659;
  --brand-hover: #F2D677;
  --brand-deep: #0B1537;
  --brand-ink: #060C20;
  --brand-tint: rgba(232, 198, 89, .1);
  --brand-tint-2: rgba(232, 198, 89, .18);
  --on-brand: #1E1603;
  --accent: #DDBF5F;
  --accent-2: #EDD682;
  --odh-card-line: rgba(143, 164, 208, .16);
}

/* ---------- 2. Cabeçalho -------------------------------------------------- */
[data-theme="dark"] .site-header { background: #0A1430; }
[data-theme="dark"] .catnav { background: #0A1430; }
.allcats { font-weight: 700; }
.catlink.hot { background: transparent; color: var(--text); }
.catlink.hot .i { color: var(--accent); }
.catlink.hot:hover { background: var(--odh-gold-soft); color: var(--text); }

/* ---------- 3. Abertura: a arte aparece inteira, sem cortar nem esticar --- */
.hero { padding-top: 20px; }
.hero-card {
  height: clamp(440px, 41vw, 560px);
  border: 1px solid rgba(232, 198, 89, .2);
  border-radius: 30px;
  background: var(--odh-navy) url("../img/company-hero.webp") 20% 60% / cover no-repeat;
  box-shadow: 0 34px 70px -40px rgba(4, 9, 28, .9);
}
.hslide::after {
  z-index: 0;
  background: linear-gradient(95deg, rgba(7, 14, 38, .96) 0%, rgba(8, 16, 42, .88) 42%, rgba(8, 16, 42, .34) 72%, rgba(8, 16, 42, .18) 100%);
}
.hslide-media {
  z-index: 1;
  inset: 28px 28px auto auto;
  width: auto;
  height: calc(100% - 56px);
  aspect-ratio: 1;
  border-radius: 22px;
  background-color: #fff;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 0 0 8px rgba(255, 255, 255, .05), 0 26px 50px -22px rgba(0, 0, 0, .75);
  transform: none;
  transition: none;
}
.hslide.on .hslide-media { transform: none; }
.hslide-pos-right .hslide-media { inset: 28px auto auto 28px; }
.hslide-pos-center .hslide-media { inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background-size: cover; box-shadow: none; }
.hslide-pos-center::after { z-index: 1; }
.hslide-copy { width: calc(100% - 560px); min-width: 46%; padding-inline: clamp(30px, 4.4vw, 64px); }
.hero-tag {
  border: 1px solid rgba(232, 198, 89, .34);
  background: rgba(232, 198, 89, .09);
  color: #F4E6B8;
  font-size: 11px;
  letter-spacing: .14em;
}
.hslide h1 {
  margin: 22px 0 16px;
  color: #fff;
  font-size: clamp(34px, 4.25vw, 62px);
  line-height: 1.04;
  letter-spacing: -.045em;
}
.hslide p { max-width: 33em; margin-bottom: 30px; color: rgba(255, 255, 255, .76); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; }
.btn-accent { color: #241A02; font-weight: 700; box-shadow: 0 12px 26px -12px rgba(232, 198, 89, .6); }
.hero-ctas .btn { height: 50px; padding-inline: 26px; }

/* ---------- 4. Faixa de garantias ----------------------------------------- */
.trust-strip { margin-top: 16px; }
.trust-inner { padding: 6px; border: 1px solid var(--odh-card-line); border-radius: 22px; background: var(--surface); box-shadow: none; }
.trust-item { position: relative; }
.trust-item + .trust-item::before { content: ""; position: absolute; left: -2px; top: 22%; bottom: 22%; width: 1px; background: var(--odh-card-line); }
.trust-item .ic { border-radius: 50%; background: var(--odh-gold-soft); color: var(--accent); }
.trust-item b { font-size: 13.5px; }

/* ---------- 5. Títulos de seção ------------------------------------------- */
.section { padding-top: clamp(52px, 6vw, 84px); }
.sec-head { align-items: flex-end; margin-bottom: 26px; }
.sec-head h2 { margin-top: 8px; font-size: clamp(26px, 2.9vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -.04em; }
.sec-head p { margin-top: 8px; font-size: 14.5px; }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.eyebrow .i { display: none; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.link-more { font-weight: 700; }
.iconbtn { border-color: var(--odh-card-line); background: transparent; }
.iconbtn:hover:not(:disabled) { border-color: var(--accent); background: var(--odh-gold-soft); color: var(--accent); }

/* ---------- 6. Categorias ------------------------------------------------- */
.cat-rail { gap: 10px; }
.cat-card { width: 136px; padding: 8px 4px 12px; gap: 12px; }
.cat-card:hover { background: transparent; box-shadow: none; }
.cat-thumb { width: 116px; height: 116px; border-radius: 28px; box-shadow: 0 0 0 1px var(--odh-card-line), 0 16px 26px -20px rgba(4, 9, 28, .8); }
.cat-thumb img { box-sizing: border-box; padding: 12px; }
.cat-card:hover .cat-thumb { border-radius: 28px; box-shadow: 0 0 0 2px var(--accent), 0 18px 30px -18px rgba(4, 9, 28, .85); }
.cat-card b { font-size: 13px; }

/* ---------- 7. Card de produto ---------------------------------------------- */
.pcard, .prod-grid .pcard { overflow: hidden; padding: 0; border: 1px solid var(--odh-card-line); border-radius: 22px; }
.pcard:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 24px 44px -28px rgba(4, 9, 28, .9); }
.pcard-media, .prod-grid .pcard-media { margin: 0; border-radius: 0; }
.pcard-media img { box-sizing: border-box; padding: 16px; }
.pcard-body { padding: 16px 16px 16px; }
.badge { top: 12px; left: 12px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--odh-navy); color: var(--odh-gold); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; box-shadow: none; }
.badge .i { display: none; }
.fav { top: 10px; right: 10px; width: 36px; height: 36px; border: 1px solid #E4E7F0; background: #fff; color: var(--odh-navy); box-shadow: 0 6px 14px -8px rgba(11, 21, 55, .5); backdrop-filter: none; }
.fav:hover { background: #fff; color: #B58A17; }
.pcard h3 { height: 40px; margin: 0 0 10px; font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: -.01em; }
.pcard .price-old b { display: none; }
.pcard .price { font-family: var(--font-display); font-size: 25px; letter-spacing: -.04em; }
.pix { color: var(--text-2); font-weight: 500; }
.pix .i { color: var(--accent); }
.pcard .btn-primary {
  height: 42px;
  margin-top: 6px;
  border: 1px solid color-mix(in srgb, var(--brand) 55%, transparent);
  background: transparent;
  color: var(--brand);
  font-weight: 700;
  box-shadow: none;
}
.pcard .btn-primary:hover { border-color: var(--brand); background: var(--brand); color: var(--on-brand); box-shadow: none; }

/* ---------- 8. Faixa "A precisão tem uma história" -------------------------- */
.odh-story { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr); gap: 16px; padding-top: clamp(52px, 6vw, 84px); }
.odh-story-main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 430px;
  border: 1px solid rgba(232, 198, 89, .2);
  border-radius: 30px;
  background: var(--odh-navy);
}
.odh-story-main img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.odh-story-main::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(7, 14, 38, .96) 0%, rgba(7, 14, 38, .84) 44%, rgba(7, 14, 38, .08) 80%); }
.odh-story-copy { max-width: 560px; padding: clamp(30px, 4.4vw, 60px); color: #fff; }
.odh-overline { display: inline-flex; align-items: center; gap: 12px; color: var(--odh-gold); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.odh-overline::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.odh-story-copy h2 { margin: 18px 0 16px; color: #fff; font-size: clamp(32px, 3.7vw, 52px); line-height: 1.06; letter-spacing: -.045em; }
.odh-story-copy h2 em { color: var(--odh-gold); font-style: normal; }
.odh-story-copy p { margin: 0 0 28px; color: rgba(255, 255, 255, .76); font-size: 15.5px; line-height: 1.7; }
.odh-story-side {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.8vw, 38px);
  border: 1px solid var(--odh-card-line);
  border-radius: 30px;
  background: var(--surface);
  transition: border-color .2s ease, transform .25s ease;
}
.odh-story-side:hover { border-color: var(--accent); transform: translateY(-3px); }
.odh-story-side .odh-overline { color: var(--accent); }
.odh-story-side h3 { margin: 18px 0 0; font-size: clamp(25px, 2.4vw, 33px); line-height: 1.12; letter-spacing: -.04em; }
.odh-stats { display: grid; gap: 18px; margin: auto 0; padding: 26px 0; }
.odh-stats b { display: block; color: var(--accent); font-family: var(--font-display); font-size: clamp(44px, 4.6vw, 64px); font-weight: 700; line-height: 1; letter-spacing: -.05em; }
.odh-stats small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.odh-story-link { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-size: 14px; font-weight: 700; }
.odh-story-link .i { transition: transform .2s ease; }
.odh-story-side:hover .odh-story-link .i { transform: translateX(3px); }

/* ---------- 9. Páginas internas ------------------------------------------- */
.pdp-main, .pdp-thumb { border-color: var(--odh-card-line); }
.pdp-main img { box-sizing: border-box; padding: 24px; }
.pdp-buy h1 { font-size: clamp(25px, 2.9vw, 36px); line-height: 1.14; letter-spacing: -.04em; }
.pdp-price-box { border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); }
.pdp-price-box .price { font-family: var(--font-display); }

/* ---------- 10. Rodapé: tira o verde herdado -------------------------------- */
footer { position: relative; background: #060C20; color: #AAB6D0; }
/* O rodapé é sempre escuro, nos dois temas: usa o logotipo claro, inteiro. */
.footer-brand .brand { display: block; width: 210px; height: 51px; background: url("../img/logo-odous-dark.svg") left center / contain no-repeat; }
.footer-brand .brand img, .footer-brand .brand .brand-text { display: none; }
footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 198, 89, .55), transparent); }
.footer-main { grid-template-columns: 1.7fr repeat(3, 1fr); padding-top: 64px; }
.footer-brand .brand-text small { color: #8291B0; }
.footer-main h3 { color: var(--odh-gold); font-size: 11px; letter-spacing: .16em; }
.footer-main nav a { color: #AAB6D0; }
.footer-main nav a:hover { color: #fff; }
.footer-trust { justify-content: flex-end; border-top-color: #18244A; }
.footer-trust b { color: #8291B0; }
.footer-trust span { border-color: #24335C; background: #0B1533; color: #C3CEE4; }
.footer-bottom { border-top: 1px solid #18244A; background: #050A1A; }
.footer-bottom .container { color: #8291B0; }

/* ---------- 11. Celular e tablet ------------------------------------------- */
@media (max-width: 1100px) {
  .odh-story { grid-template-columns: 1fr; }
  .odh-stats { grid-template-columns: repeat(2, 1fr); margin: 0; }
  .footer-main { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .hero { padding-top: 12px; }
  .hero-card { height: auto; border-radius: 24px; background-position: 30% center; }
  .hslide { position: relative; display: none; inset: auto; }
  .hslide.on { display: flex; flex-direction: column; }
  .hslide-copy { order: 1; width: 100%; min-width: 0; height: auto; padding: 30px 22px 22px; }
  .hslide-copy-center, .hslide-copy-right { align-items: flex-start; text-align: left; }
  .hslide h1 { font-size: clamp(32px, 9vw, 44px); }
  .hslide p { margin-bottom: 22px; }
  .hslide-media, .hslide-pos-right .hslide-media, .hslide-pos-center .hslide-media {
    order: 2;
    position: relative;
    inset: auto;
    width: calc(100% - 32px);
    height: auto;
    aspect-ratio: 1;
    margin: 0 16px 16px;
    border-radius: 18px;
    background-size: contain;
  }
  .hslide::after { background: linear-gradient(180deg, rgba(7, 14, 38, .95), rgba(7, 14, 38, .72)); }
  .trust-item + .trust-item::before { display: none; }
  .odh-story-main { min-height: 480px; align-items: flex-end; border-radius: 24px; }
  .odh-story-main img { object-position: 72% center; }
  .odh-story-main::after { background: linear-gradient(180deg, rgba(7, 14, 38, .2) 0%, rgba(7, 14, 38, .9) 52%, rgba(7, 14, 38, .98) 100%); }
  .odh-story-side { border-radius: 24px; }
}
@media (max-width: 560px) {
  .footer-main { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
  .pcard-media img { padding: 10px; }
  .pcard-body { padding: 12px; }
  .pcard h3 { font-size: 13px; line-height: 18px; height: 36px; }
  .pcard .price { font-size: 21px; }
}
/* Cabeçalho do celular: os ícones somavam mais que a tela e cortavam o carrinho. */
@media (max-width: 480px) {
  .site-header .header-inner { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; }
  .site-header .mobile-menu { width: 38px; }
  :root .site-header .brand, :root[data-theme="dark"] .site-header .brand { flex-basis: 128px; width: 128px; height: 44px; }
  .site-header .brand img { width: 128px; height: auto; }
  .site-header .header-actions { gap: 0; }
  .site-header .haction-icon { width: 34px; min-width: 34px; padding-inline: 0; justify-content: center; }
  .site-header .search-wrap, .site-header .search-form { width: 100%; min-width: 0; }
  .site-header .search-form input { min-width: 0; }
  .rail .pcard { width: min(68vw, 240px); }
}
@media (max-width: 350px) {
  .site-header .header-actions > .haction-icon:first-child { display: none; }
  :root .site-header .brand, :root[data-theme="dark"] .site-header .brand { flex-basis: 116px; width: 116px; }
}
@media (prefers-reduced-motion: reduce) {
  .pcard:hover, .odh-story-side:hover { transform: none; }
}