/* OG Smart — refinamento visual (carrega depois do style.css) */
:root { --radius: 18px; --glass: color-mix(in oklab, var(--bg) 72%, transparent); }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Cabeçalho em vidro */
.hdr { background: var(--glass); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--line); }
.nav a { position: relative; font-weight: 600; letter-spacing: .2px; opacity: .85; transition: opacity .2s, color .2s; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:hover { opacity: 1; color: var(--accent); }
.nav a:hover::after { transform: scaleX(1); }
.ibtn { transition: background .2s, transform .2s, border-color .2s; }
.ibtn:hover { background: color-mix(in oklab, var(--accent) 14%, transparent); transform: translateY(-1px); }

/* Títulos e seções */
.hero h1 { letter-spacing: -.5px; line-height: 1.04; text-wrap: balance; }
.hero-sub { color: var(--muted); max-width: 52ch; line-height: 1.6; }
.sec-h h2 { position: relative; letter-spacing: -.3px; }
.sec-h h2::before { content: ""; display: block; width: 44px; height: 3px; border-radius: 3px; margin-bottom: 14px; background: linear-gradient(90deg, var(--accent), transparent); }
.sec-h p { color: var(--muted); }

/* Botões */
.btn { box-shadow: 0 8px 26px -8px color-mix(in oklab, var(--accent) 70%, transparent); font-weight: 700; letter-spacing: .3px; }
.btn-ghost { backdrop-filter: blur(6px); }

/* Categorias */
.tile { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; border: 1px solid var(--line); }
.tile:hover { transform: translateY(-6px); border-color: color-mix(in oklab, var(--accent) 55%, transparent); box-shadow: 0 22px 50px -20px color-mix(in oklab, var(--accent) 45%, #000); }
.tile img { transition: transform .5s var(--ease); }
.tile:hover img { transform: scale(1.06) translateY(-4px); }

/* Cartões de produto */
.card { transition: transform .3s var(--ease); }
.card:hover { transform: translateY(-6px); }
.card .media img { transition: transform .45s var(--ease); }
.card:hover .media img { transform: scale(1.05); }
.card .info h3 { font-weight: 700; line-height: 1.25; }
.card .cat { letter-spacing: 1.2px; text-transform: uppercase; font-size: 11px; color: var(--accent); font-weight: 700; }
.card .buy .pr strong { font-family: var(--font-display); letter-spacing: -.3px; }
.card .add { transition: transform .2s var(--spring), box-shadow .2s; box-shadow: 0 6px 18px -6px color-mix(in oklab, var(--accent) 70%, transparent); }
.card .add:hover { transform: scale(1.12) rotate(90deg); }
.selo { font-weight: 700; letter-spacing: .4px; }

/* Busca e filtros */
.search input, .sort select { transition: border-color .2s, box-shadow .2s; }
.search input:focus, .sort select:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 28%, transparent); }

/* Rodapé */
.ftr { border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--accent) 4%, var(--ink))); }
.ftr a { transition: color .2s; }
.ftr a:hover { color: var(--accent); }

/* Barra de rolagem e seleção */
::selection { background: color-mix(in oklab, var(--accent) 40%, transparent); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--accent) 40%, #222) transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }

/* Cor do site: seletor + botão RGB */
.themes { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.cp { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); cursor: pointer; transition: border-color .2s; }
.cp:hover { border-color: var(--accent); }
.cp input[type=color] { width: 56px; height: 56px; padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer; flex: none; }
.cp input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.cp input[type=color]::-webkit-color-swatch { border: 2px solid rgba(255,255,255,.35); border-radius: 12px; }
.cp input[type=color]::-moz-color-swatch { border: 2px solid rgba(255,255,255,.35); border-radius: 12px; }
.cp-t { display: flex; flex-direction: column; gap: 3px; }
.cp-t em { font: normal 13px ui-monospace, Consolas, monospace; color: var(--muted); }
.rgb-btn { height: 52px; border-radius: 16px; font: 700 18px var(--font-display); letter-spacing: 6px; color: #fff; position: relative; overflow: hidden; border: 0;
  background: linear-gradient(90deg, #ff3b3b, #ff9a2e, #ffd426, #27f06a, #2fb0ff, #b877ff, #ff3b3b); background-size: 300% 100%; animation: rgbflow 4s linear infinite;
  box-shadow: 0 8px 24px -8px rgba(184,119,255,.6); transition: transform .2s var(--spring); }
.rgb-btn span { text-shadow: 0 2px 8px rgba(0,0,0,.65); }
.rgb-btn:hover { transform: scale(1.03); }
.rgb-btn[aria-checked="true"] { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes rgbflow { to { background-position: 300% 0; } }

/* Botão e painel de Tema */
.tema-btn { width: auto; padding: 0 14px; gap: 8px; display: inline-flex; align-items: center; }
.tema-btn span { font: 600 14px var(--font-body); }
@media (max-width: 560px) { .tema-btn { padding: 0; width: 44px; justify-content: center; } .tema-btn span { display: none; } }
.tema-pop { position: fixed; top: calc(var(--hdr-h, 68px) + 8px); right: max(12px, env(safe-area-inset-right)); width: min(320px, calc(100vw - 24px)); z-index: 90; padding: 18px; border-radius: 20px; border: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 92%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 30px 70px -20px rgba(0,0,0,.8); animation: popIn .25s var(--ease); }
.tema-pop[hidden] { display: none; }
.tema-pop h3 { font: 700 15px var(--font-display); letter-spacing: .5px; margin-bottom: 14px; }
@keyframes popIn { from { opacity: 0; transform: translateY(-8px) scale(.97); } }

.rgb-btn, .cp { will-change: auto; }
html { transition: none; }