:root {
--bg:#FFFFFF;
--bg-soft:#FFF8F2;
--primary:#1C1917;
--primary-soft:#44403C;
--accent:#F97316;
--accent-hover:#EA580C;
--text:#1C1917;
--text-muted:#78716C;
--border:#FDE8D0;
--border-strong:#FDBA74;
--warn-bg:#FEF3C7; --warn-text:#92400E;
--danger-bg:#FEE2E2; --danger-text:#991B1B;
--state-bg:#F5F5F4; --state-text:#44403C;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Manrope',sans-serif; background:var(--bg-soft); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; }
html { scroll-behavior:smooth; }
body { line-height:1.55; }
#topo, #estoque, #transparencia { scroll-margin-top: 80px; }
/* Header */
header { background:var(--bg); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; }
.vj-cabecalho { max-width:1180px; margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.vj-marca { display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; color:var(--primary); letter-spacing:-0.01em; }
.vj-marca__simbolo { width:32px; height:32px; background:var(--primary); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; font-weight:700; }
.vj-marca__simbolo span { color:var(--accent); }
nav ul { list-style:none; display:flex; gap:28px; align-items:center; }
nav a { font-size:14px; font-weight:500; color:var(--text-muted); transition:color 0.15s; text-decoration:none; }
nav a:hover { color:var(--primary); text-decoration:none; }
.vj-nav__botao { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:var(--accent); color:#fff !important; border-radius:10px; font-size:14px; font-weight:600; transition:background 0.2s; text-decoration:none; }
.vj-nav__botao:hover { background:var(--accent-hover); color:#fff !important; text-decoration:none; }
.vj-caminho { max-width:1180px; margin:0 auto; padding:20px 24px 0; font-size:13px; color:var(--text-muted); }
.vj-caminho a { color:var(--text-muted); }
.vj-caminho a:hover { color:var(--accent); }
.vj-caminho span { margin:0 6px; }
/* Footer */
footer { background:#1C1917; color:#D6D3D1; padding:48px 24px 28px; margin-top:80px; }
.vj-rodape { max-width:1180px; margin:0 auto; }
.vj-rodape__topo { display:grid; grid-template-columns:1fr; gap:28px; padding-bottom:28px; border-bottom:1px solid #292524; margin-bottom:20px; }
@media(min-width:720px) { .vj-rodape__topo { grid-template-columns:2fr 1fr 1fr 1fr; } }
.vj-rodape__marca .vj-marca { color:#fff; margin-bottom:10px; }
.vj-rodape__marca p { font-size:13px; color:#A8A29E; max-width:380px; }
.vj-rodape__coluna h4 { font-size:13px; font-weight:600; color:#fff; margin-bottom:12px; text-transform:uppercase; letter-spacing:0.05em; }
.vj-rodape__coluna ul { list-style:none; }
.vj-rodape__coluna li { font-size:13px; color:#A8A29E; margin-bottom:8px; }
.vj-rodape__coluna a { color:#A8A29E; text-decoration:none; }
.vj-rodape__coluna a:hover { color:#fff; }
.vj-rodape__aviso { font-size:12px; color:#A8A29E; line-height:1.6; }
/* Hero */
.vj-hero {
background: linear-gradient(160deg, #FFF8F2 0%, #FFEDD5 60%, #FFF8F2 100%);
border-bottom: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.vj-hero::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 520px; height: 520px;
background: radial-gradient(circle, rgba(249,115,22,0.12) 0%, transparent 65%);
pointer-events: none;
}
.vj-hero__wrap {
max-width: 1180px;
margin: 0 auto;
padding: 72px 24px 80px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.vj-hero__texto { position: relative; z-index: 1; }
.vj-hero__selo {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 14px;
background: #FFEDD5;
border: 1px solid #FED7AA;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
color: #EA580C;
margin-bottom: 24px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.vj-hero__ponto {
width: 6px; height: 6px;
background: var(--accent);
border-radius: 50%;
animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
.vj-hero h1 {
font-size: 52px;
line-height: 1.1;
font-weight: 800;
color: var(--primary);
letter-spacing: -0.04em;
margin-bottom: 18px;
}
.vj-hero h1 em {
font-style: normal;
background: linear-gradient(90deg, #F97316, #EA580C);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.vj-hero__subtitulo {
font-size: 16px;
color: var(--text-muted);
line-height: 1.7;
margin-bottom: 32px;
max-width: 480px;
}
.vj-hero__acoes { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 40px; }
.vj-btn-destaque {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 24px;
background: var(--accent);
color: #fff;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
text-decoration: none;
box-shadow: 0 4px 20px rgba(249,115,22,0.30);
}
.vj-btn-destaque:hover { background: var(--accent-hover); box-shadow: 0 6px 28px rgba(249,115,22,0.40); text-decoration: none; }
.vj-btn-destaque:active { transform: translateY(1px); }
.vj-btn-fantasma {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 20px;
background: transparent;
color: var(--primary);
border: 2px solid var(--border-strong);
border-radius: 10px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
}
.vj-btn-fantasma:hover { background: #FFF7ED; color: var(--primary); text-decoration: none; }
.vj-hero__selos {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.vj-selo-item {
display: flex;
align-items: center;
gap: 7px;
font-size: 13px;
color: var(--text-muted);
}
.vj-selo-icone {
width: 16px; height: 16px;
color: var(--accent);
flex-shrink: 0;
}
/* Hero image side */
.vj-hero__visual { position: relative; z-index: 1; }
.vj-hero__moldura {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 24px 60px rgba(249,115,22,0.15), 0 0 0 1px #FDE8D0;
}
.vj-hero__moldura img {
width: 100%;
display: block;
border-radius: 20px;
}
.vj-hero__etiqueta {
position: absolute;
bottom: 16px;
left: 24px;
background: #fff;
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 16px;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
white-space: nowrap;
}
.vj-etiqueta__icone { font-size: 18px; }
.vj-etiqueta__label { font-size: 12px; color: var(--text-muted); }
.vj-etiqueta__valor { font-size: 14px; font-weight: 700; color: var(--primary); }
@media(max-width:900px) {
.vj-hero__wrap { grid-template-columns: 1fr; gap: 48px; padding: 56px 24px 64px; }
.vj-hero h1 { font-size: 38px; }
.vj-hero__visual { max-width: 420px; margin: 0 auto; }
}
@media(max-width:640px) {
.vj-hero__wrap { padding: 48px 20px 56px; }
.vj-hero h1 { font-size: 30px; }
.vj-hero__subtitulo { font-size: 15px; }
.vj-hero__etiqueta { left: 16px; }
}
/* Sections */
main { max-width:1180px; margin:0 auto; padding:64px 24px; }
.vj-secao__cabecalho { margin-bottom:32px; }
.vj-secao__titulo { font-size:26px; font-weight:700; color:var(--primary); letter-spacing:-0.01em; margin-bottom:8px; border-left:3px solid var(--accent); padding-left:12px; }
.vj-secao__descricao { font-size:14px; color:var(--text-muted); }
/* Grid de produtos */
.vj-grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:20px; }
.vj-cartao { background:var(--bg); border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:border-color 0.2s, box-shadow 0.2s, transform 0.2s; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.vj-cartao__link { display:flex; flex-direction:column; flex:1; }
.vj-cartao__link:hover .vj-cartao__titulo { color:var(--accent); }
.vj-cartao:hover { border-color:var(--border-strong); box-shadow:0 8px 24px rgba(249,115,22,0.12); transform:translateY(-2px); }
.vj-cartao.vj-cartao--indisponivel { opacity:0.72; }
.vj-cartao.vj-cartao--indisponivel:hover { box-shadow:none; transform:none; }
.vj-cartao__foto { aspect-ratio:1; background:#FFF8F2; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--border); overflow:hidden; }
.vj-cartao__foto img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s ease; }
.vj-cartao:hover .vj-cartao__foto img { transform:scale(1.03); }
.vj-cartao.vj-cartao--indisponivel .vj-cartao__foto img { filter:grayscale(0.3); }
.vj-cartao__corpo { padding:18px; display:flex; flex-direction:column; flex:1; }
.vj-cartao__etiquetas { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.vj-tag { display:inline-block; padding:3px 9px; font-size:11px; font-weight:500; border-radius:6px; letter-spacing:0.01em; }
.vj-tag--aviso { background:var(--warn-bg); color:var(--warn-text); }
.vj-tag--critico { background:var(--danger-bg); color:var(--danger-text); }
.vj-tag--info { background:var(--state-bg); color:var(--state-text); }
.vj-cartao__titulo { font-size:16px; font-weight:600; color:var(--primary); margin-bottom:6px; transition:color 0.15s; }
.vj-cartao__preco { font-size:22px; font-weight:800; color:var(--accent); margin-bottom:12px; letter-spacing:-0.01em; }
.vj-cartao__lista { list-style:none; padding:0; margin:0 0 16px; flex:1; }
.vj-cartao__lista li { font-size:13px; color:var(--text-muted); padding-left:16px; position:relative; margin-bottom:4px; line-height:1.5; }
.vj-cartao__lista li::before { content:""; position:absolute; left:2px; top:8px; width:5px; height:5px; background:var(--border-strong); border-radius:50%; }
.vj-btn-comprar { width:100%; padding:11px; background:var(--accent); color:#fff; border:none; border-radius:10px; font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; transition:background 0.15s; text-align:center; display:block; text-decoration:none; }
.vj-btn-comprar:hover { background:var(--accent-hover); text-decoration:none; }
.vj-esgotado { width:100%; padding:11px; background:#F5F5F4; color:var(--text-muted); border-radius:10px; font-size:13px; font-weight:600; text-align:center; letter-spacing:0.05em; text-transform:uppercase; }
/* Info sections */
.vj-painel-grade { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; }
.vj-painel { background:var(--bg); border:1px solid var(--border); border-radius:16px; padding:24px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.vj-painel__icone { width:40px; height:40px; border-radius:10px; background:#FFEDD5; color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.vj-painel h3 { font-size:16px; font-weight:600; color:var(--primary); margin-bottom:6px; }
.vj-painel p { font-size:14px; color:var(--text-muted); }
.vj-caixa-info { background:#FFEDD5; border:1px solid var(--border-strong); border-radius:16px; padding:32px; }
.vj-caixa-info__lista { list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px 24px; margin-top:8px; }
.vj-caixa-info__lista li { font-size:14px; color:var(--primary-soft); padding-left:26px; position:relative; }
.vj-caixa-info__lista li::before { content:""; position:absolute; left:0; top:6px; width:16px; height:16px; background:var(--accent); mask:url("data:image/svg+xml;utf8,") no-repeat center; -webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center; }
section + section { margin-top:64px; }
@media(max-width:640px) { main { padding:48px 20px; } .vj-secao__titulo { font-size:20px; } .vj-caixa-info { padding:24px 20px; } }
/* Page sections */
.page-section { display:none; }
.page-section.active { display:block; }
.page-legal main { max-width:820px; margin:0 auto; padding:32px 24px 64px; }
.legal-card { background:#fff; border:1px solid var(--border); border-radius:16px; padding:40px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.legal-card h1 { font-size:30px; font-weight:700; color:var(--primary); letter-spacing:-0.02em; margin-bottom:8px; line-height:1.2; }
.legal-meta { font-size:13px; color:var(--text-muted); margin-bottom:28px; }
.legal-card h2 { font-size:18px; font-weight:600; color:var(--primary); margin:28px 0 10px; }
.legal-card h3 { font-size:15px; font-weight:600; color:var(--primary-soft); margin:20px 0 8px; }
.legal-card p { font-size:15px; color:var(--primary-soft); margin-bottom:12px; }
.legal-card ul, .legal-card ol { padding-left:24px; margin-bottom:12px; }
.legal-card li { font-size:15px; color:var(--primary-soft); margin-bottom:6px; }
.legal-card strong { color:var(--primary); }
.highlight { background:#FFF7ED; border:1px solid #FED7AA; border-radius:10px; padding:16px 18px; margin:16px 0; font-size:14px; color:#7C2D12; }
.vj-grade-legal { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; margin:16px 0; }
.info-item { background:var(--bg-soft); border:1px solid var(--border); border-radius:10px; padding:16px; }
.info-item .label { font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px; }
.info-item .value { font-size:14px; font-weight:500; color:var(--primary); }
.pay-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin:16px 0 20px; }
.pay-item { background:var(--bg-soft); border:1px solid var(--border); border-radius:10px; padding:18px; }
.pay-item h3 { font-size:15px; font-weight:600; color:var(--primary); margin-bottom:6px; }
.pay-item p { font-size:13px; color:var(--text-muted); margin:0; }
/* FAQ */
.faq-item { border-top:1px solid var(--border); padding:20px 0; }
.faq-item:first-of-type { border-top:none; padding-top:0; }
.faq-item summary { font-size:16px; font-weight:600; color:var(--primary); cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; font-size:22px; font-weight:400; color:var(--text-muted); transition:transform 0.2s; }
.faq-item[open] summary::after { content:"\2212"; }
.faq-item summary:hover { color:var(--accent); }
.faq-answer { margin-top:12px; font-size:15px; color:var(--primary-soft); }
.faq-answer p { margin-bottom:10px; }
.faq-answer ul { padding-left:22px; margin-bottom:10px; }
.faq-answer li { margin-bottom:6px; }
@media(max-width:640px) { .legal-card { padding:24px 20px; } .legal-card h1 { font-size:24px; } }
/* Sobre */
.page-sobre main { max-width:820px; margin:0 auto; padding:32px 24px 64px; }
.sobre-card { background:#fff; border:1px solid var(--border); border-radius:16px; padding:40px; margin-bottom:24px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.sobre-card h1 { font-size:30px; font-weight:700; color:var(--primary); letter-spacing:-0.02em; margin-bottom:20px; line-height:1.2; }
.sobre-card h2 { font-size:18px; font-weight:600; color:var(--primary); margin:28px 0 10px; }
.sobre-card p { font-size:15px; color:var(--primary-soft); margin-bottom:14px; }
.sobre-card ul { padding-left:24px; margin-bottom:14px; }
.sobre-card li { font-size:15px; color:var(--primary-soft); margin-bottom:8px; }
.sobre-card strong { color:var(--primary); }
.values-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; margin:16px 0; }
.value-item { background:var(--bg-soft); border:1px solid var(--border); border-radius:10px; padding:18px; }
.value-item h3 { font-size:14px; font-weight:600; color:var(--primary); margin-bottom:6px; }
.value-item p { font-size:13px; color:var(--text-muted); margin:0; }
.cta-bar { background:#FFF7ED; border:1px solid #FED7AA; border-radius:12px; padding:24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.cta-bar p { font-size:15px; color:#7C2D12; margin:0; font-weight:500; }
.btn-cta { display:inline-flex; align-items:center; gap:8px; padding:11px 20px; background:var(--accent); color:#fff; border-radius:10px; font-size:14px; font-weight:600; text-decoration:none; }
.btn-cta:hover { background:var(--accent-hover); text-decoration:none; }
/* Contato */
.page-contato main { max-width:900px; margin:0 auto; padding:32px 24px 64px; display:grid; grid-template-columns:1fr; gap:24px; }
@media(min-width:720px) { .page-contato main { grid-template-columns:1.2fr 1fr; align-items:start; } }
.contact-card { background:#fff; border:1px solid var(--border); border-radius:16px; padding:36px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.contact-card h1 { font-size:28px; font-weight:700; color:var(--primary); letter-spacing:-0.02em; margin-bottom:8px; line-height:1.2; }
.contact-card .sub { font-size:14px; color:var(--text-muted); margin-bottom:28px; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:var(--primary); margin-bottom:6px; }
.form-group input, .form-group textarea, .form-group select {
width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:8px;
font-size:14px; font-family:inherit; color:var(--primary); background:var(--bg);
transition:border-color 0.15s, box-shadow 0.15s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(249,115,22,0.12); }
.form-group textarea { resize:vertical; min-height:110px; }
.form-group .hint { font-size:12px; color:var(--text-muted); margin-top:5px; }
.consent-row { display:flex; gap:10px; align-items:flex-start; margin-bottom:18px; }
.consent-row input[type="checkbox"] { flex-shrink:0; margin-top:3px; accent-color:var(--accent); }
.consent-row label { font-size:13px; color:var(--text-muted); line-height:1.5; }
.btn-submit {
width:100%; padding:13px; background:var(--accent); color:#fff; border:none;
border-radius:10px; font-size:15px; font-weight:600; font-family:inherit;
cursor:pointer; transition:background 0.15s;
}
.btn-submit:hover { background:var(--accent-hover); }
.btn-submit:disabled { background:#9CA3AF; cursor:not-allowed; }
.success-msg {
display:none; background:#ECFDF5; border:1px solid #A7F3D0;
border-radius:10px; padding:20px 22px; margin-top:18px;
font-size:14px; color:#065F46; line-height:1.6;
}
.success-msg strong { display:block; font-size:16px; margin-bottom:4px; }
.channels-card { background:#fff; border:1px solid var(--border); border-radius:16px; padding:32px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.channels-card h2 { font-size:18px; font-weight:600; color:var(--primary); margin-bottom:18px; }
.channel-item { display:flex; align-items:center; gap:12px; padding:14px 0; border-top:1px solid var(--border); }
.channel-item:first-of-type { border-top:none; padding-top:0; }
.channel-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.channel-icon.email { background:#FFEDD5; }
.channel-icon.clock { background:var(--state-bg); }
.channel-label { font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:2px; }
.channel-value { font-size:14px; font-weight:500; color:var(--primary); }
.channel-value a { color:var(--primary); }
.channel-value a:hover { color:var(--accent); }
@media(max-width:640px) { .sobre-card { padding:24px 20px; } .sobre-card h1 { font-size:24px; } .contact-card { padding:24px 20px; } .contact-card h1 { font-size:22px; } .channels-card { padding:22px 18px; } }
/* Cookie consent banner */
.cb-cookie-banner {
position: fixed; left: 16px; right: 16px; bottom: 16px;
max-width: 520px; margin-left: auto; margin-right: auto;
background: #fff; border: 1px solid var(--border); border-radius: 14px;
box-shadow: 0 12px 32px rgba(0,0,0,0.10); padding: 20px 22px;
z-index: 9999; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--primary); animation: cb-cookie-in 0.28s ease-out;
}
@keyframes cb-cookie-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.cb-cookie-banner h2 { font-size: 15px; font-weight: 600; color: var(--primary); margin: 0 0 6px; line-height: 1.3; }
.cb-cookie-banner p { font-size: 13px; color: var(--primary-soft); line-height: 1.55; margin: 0 0 14px; }
.cb-cookie-banner p a { color: var(--accent); text-decoration: none; font-weight: 500; }
.cb-cookie-banner p a:hover { text-decoration: underline; }
.cb-cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-cookie-btn { flex: 1 1 auto; min-width: 120px; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; }
.cb-cookie-btn-accept { background: var(--accent); color: #fff; }
.cb-cookie-btn-accept:hover { background: var(--accent-hover); }
.cb-cookie-btn-reject { background: #fff; color: var(--primary); border-color: var(--border-strong); }
.cb-cookie-btn-reject:hover { background: var(--bg-soft); }
.cb-cookie-hidden { display: none !important; }
@media (max-width: 480px) {
.cb-cookie-banner { padding: 16px 18px; left: 10px; right: 10px; bottom: 10px; }
.cb-cookie-btn { flex-basis: 100%; }
}
/* Product pages */
.page-product main { max-width:1180px; margin:0 auto; padding:24px 24px 64px; }
.product { display:grid; grid-template-columns:1fr; gap:40px; background:#fff; border:1px solid var(--border); border-radius:16px; padding:32px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
@media(min-width:900px) { .product { grid-template-columns:1.1fr 1fr; gap:48px; padding:40px; } }
.gallery { display:flex; flex-direction:column; gap:12px; }
.gallery-main { aspect-ratio:1; background:#FFF8F2; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.gallery-main img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.thumb { aspect-ratio:1; background:#FFF8F2; border:1px solid var(--border); border-radius:8px; overflow:hidden; cursor:pointer; transition:border-color 0.15s; padding:0; }
.thumb:hover { border-color:var(--accent); }
.thumb.active { border-color:var(--accent); border-width:2px; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.info .tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.product-title { font-size:30px; font-weight:700; color:var(--primary); letter-spacing:-0.02em; margin-bottom:8px; line-height:1.2; }
.product-sub { font-size:14px; color:var(--text-muted); margin-bottom:20px; }
.price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid var(--border); }
.price { font-size:36px; font-weight:700; color:var(--accent); letter-spacing:-0.02em; }
.price-note { font-size:13px; color:var(--text-muted); }
.desc-block h4 { font-size:13px; font-weight:600; color:var(--primary); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:10px; }
.desc-block { margin-bottom:20px; }
.desc-block p { font-size:14px; color:var(--primary-soft); }
.desc-block ul { list-style:none; padding:0; }
.desc-block li { font-size:14px; color:var(--primary-soft); padding-left:24px; position:relative; margin-bottom:8px; line-height:1.5; }
.desc-block li::before { content:""; position:absolute; left:4px; top:7px; width:8px; height:8px; border-radius:50%; background:var(--border-strong); }
.desc-block li.warn::before { background:#F59E0B; }
.desc-block li.danger::before { background:#EF4444; }
.desc-block li.ok::before { background:#10B981; }
.buy-group { margin-top:28px; padding-top:20px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:10px; }
.btn-prod { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 22px; border:none; border-radius:10px; font-size:15px; font-weight:600; font-family:inherit; cursor:pointer; transition:background 0.15s, transform 0.1s; text-decoration:none; }
.btn-prod-primary { background:var(--accent); color:#fff; }
.btn-prod-primary:hover { background:var(--accent-hover); }
.btn-prod-wpp { background:#25D366; color:#fff; }
.btn-prod-wpp:hover { background:#20BD5B; }
.btn-prod:active { transform:translateY(1px); }
.notice-prod { display:flex; align-items:flex-start; gap:10px; background:#FFFBEB; border:1px solid #FDE68A; border-radius:10px; padding:14px 16px; margin-top:18px; font-size:13px; color:#78350F; line-height:1.5; }
.details-section { margin-top:48px; background:#fff; border:1px solid var(--border); border-radius:16px; padding:32px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.details-section h2 { font-size:20px; font-weight:700; color:var(--primary); letter-spacing:-0.01em; margin-bottom:8px; }
.details-section .sub { font-size:14px; color:var(--text-muted); margin-bottom:20px; }
.cond-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; }
.cond-item { background:var(--bg-soft); border:1px solid var(--border); border-radius:10px; padding:18px; }
.cond-item .label { font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px; }
.cond-item .value { font-size:14px; font-weight:500; color:var(--primary); line-height:1.5; }
.status-bad { color:#991B1B; }
.status-warn { color:#92400E; }
.status-ok { color:#065F46; }
.back-link { display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--accent); margin-top:32px; font-weight:500; }
.back-link:hover { text-decoration:underline; }
@media(max-width:640px) { .product { padding:20px; } .product-title { font-size:24px; } .price { font-size:30px; } }
/* Auth / Login */
.page-login .auth-wrap {
min-height: calc(100vh - 65px);
display: flex; align-items: center; justify-content: center;
padding: 48px 20px;
}
.auth-card {
background: var(--bg); border: 1px solid var(--border); border-radius: 16px;
width: 100%; max-width: 440px; overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.auth-tabs { display: flex; border-bottom: 1px solid var(--border); }
.auth-tab {
flex: 1; padding: 18px 20px; font-size: 14px; font-weight: 600;
color: var(--text-muted); background: var(--bg-soft); border: none;
cursor: pointer; font-family: inherit; transition: color 0.15s, background 0.15s;
}
.auth-tab.active {
background: var(--bg); color: var(--primary);
border-bottom: 2px solid var(--accent); margin-bottom: -1px;
}
.auth-tab:first-child { border-radius: 16px 0 0 0; }
.auth-tab:last-child { border-radius: 0 16px 0 0; }
.auth-panel { display: none; padding: 32px; }
.auth-panel.active { display: block; }
.auth-panel h2 { font-size: 22px; font-weight: 700; color: var(--primary); letter-spacing: -0.01em; margin-bottom: 6px; }
.auth-panel p.auth-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 28px; }
.auth-panel .form-group { margin-bottom: 18px; }
.auth-panel .form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--primary); margin-bottom: 6px; }
.auth-panel .form-group input {
width: 100%; padding: 10px 14px; border: 1px solid var(--border-strong);
border-radius: 8px; font-size: 14px; font-family: inherit;
color: var(--text); background: var(--bg);
transition: border-color 0.15s, box-shadow 0.15s; outline: none;
}
.auth-panel .form-group input:focus {
border-color: var(--accent); box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
}
.auth-panel .form-hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.btn-auth {
width: 100%; padding: 12px; background: var(--accent); color: #fff;
border: none; border-radius: 10px; font-size: 14px; font-weight: 600;
font-family: inherit; cursor: pointer;
transition: background 0.2s, transform 0.1s; margin-top: 8px;
}
.btn-auth:hover { background: var(--accent-hover); }
.btn-auth:active { transform: translateY(1px); }
.auth-divider {
display: flex; align-items: center; gap: 12px;
margin: 22px 0; font-size: 12px; color: var(--text-muted);
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.btn-auth-alt {
width: 100%; padding: 11px; background: var(--bg); color: var(--primary);
border: 1px solid var(--border-strong); border-radius: 8px;
font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 10px;
transition: border-color 0.15s, background 0.15s;
}
.btn-auth-alt:hover { background: var(--bg-soft); }
.auth-footer-note { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 20px; }
.auth-footer-note a { color: var(--accent); }
.auth-alert {
display: none; padding: 10px 14px; border-radius: 8px;
font-size: 13px; font-weight: 500; margin-bottom: 18px; line-height: 1.5;
}
.auth-alert.error { display: flex; gap: 8px; background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.auth-alert.info { display: flex; gap: 8px; background: #FFF7ED; color: #1e40af; border: 1px solid #FED7AA; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 40px; }
.toggle-pw {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
background: none; border: none; cursor: pointer;
color: var(--text-muted); padding: 0; display: flex; align-items: center;
}
.toggle-pw:hover { color: var(--primary); }
.toggle-pw .icon-eye-off { display: none; }
.toggle-pw.shown .icon-eye { display: none; }
.toggle-pw.shown .icon-eye-off { display: block; }
.label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.label-row label { margin-bottom: 0; }
.forgot-link { font-size: 12px; color: var(--accent); font-weight: 500; }
.forgot-link:hover { text-decoration: underline; }
.strength-bar { height: 3px; border-radius: 2px; margin-top: 6px; background: var(--border); overflow: hidden; }
.strength-fill { height: 100%; width: 0; border-radius: 2px; transition: width 0.3s, background 0.3s; }
@media(max-width:480px) { .auth-panel { padding: 24px 20px; } .auth-tab { padding: 15px 12px; } }