/* ==========================================================================
   RELIER — tokens e componentes compartilhados (marca: quiet luxury / Manrope)
   Fonte única do :root + header persistente + toast do carrinho.
   ========================================================================== */
:root {
  --couro:#3D2913; --ink:#1a1410; --cream:#FAF7F2; --card:#F5EFE6;
  --card-2:#E8DFD3; --muted:#6B5D4D; --marsala:#7d2c3a; --line:#e4dccf; --gold:#d8a24a;
  --wpp:#25a35a; --wpp-dark:#1f8f4e;
}

/* ---- header persistente (logo esquerda · nav centro · carrinho direita) ---- */
.rl-nav { position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--line); }
.rl-nav-in { max-width:1280px; margin:0 auto; padding:0 28px; height:66px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; }
.rl-logo { justify-self:start; display:flex; align-items:center; }
.rl-logo img { height:42px; width:auto; max-height:calc(100% - 14px); display:block; }
.rl-links { justify-self:center; display:flex; gap:30px; }
.rl-links a { color:var(--muted); text-decoration:none; font-size:14.5px; font-weight:600; letter-spacing:0.01em; padding:6px 0; border-bottom:2px solid transparent; white-space:nowrap; transition:color .15s, border-color .15s; }
.rl-links a:hover { color:var(--couro); }
.rl-links a.on { color:var(--couro); border-bottom-color:var(--couro); }
.rl-right { justify-self:end; display:flex; align-items:center; gap:4px; }
.rl-cart { position:relative; display:flex; align-items:center; justify-content:center; color:var(--couro); width:42px; height:42px; border-radius:11px; text-decoration:none; transition:background .15s; }
.rl-cart:hover { background:var(--card); }
.rl-cart svg { width:23px; height:23px; }
.rl-badge { position:absolute; top:2px; right:2px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--marsala); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; line-height:1; }
.rl-badge[hidden] { display:none; }
.rl-burger { display:none; width:42px; height:42px; border:none; background:none; cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:5px; border-radius:11px; }
.rl-burger:hover { background:var(--card); }
.rl-burger span { width:22px; height:2px; background:var(--couro); border-radius:2px; transition:transform .2s, opacity .2s; }
.rl-nav.menu-open .rl-burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.rl-nav.menu-open .rl-burger span:nth-child(2) { opacity:0; }
.rl-nav.menu-open .rl-burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

@media (max-width:920px) {
  .rl-nav-in { grid-template-columns:1fr auto; padding:0 18px; }
  .rl-burger { display:flex; }
  .rl-links { position:absolute; top:66px; left:0; right:0; background:#fff; border-bottom:1px solid var(--line); flex-direction:column; gap:0; padding:6px 0; box-shadow:0 22px 30px -18px rgba(61,41,19,.28); transform:translateY(-10px); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
  .rl-nav.menu-open .rl-links { opacity:1; transform:none; pointer-events:auto; }
  .rl-links a { padding:14px 22px; width:100%; border-bottom:none; }
  .rl-links a.on { border-bottom:none; color:var(--couro); }
}

/* ---- toast "adicionado ao carrinho" ---- */
#rl-toast {
  position:fixed; left:50%; bottom:24px; transform:translate(-50%, 140%);
  background:var(--couro); color:#fff; border-radius:12px; padding:13px 18px;
  display:flex; align-items:center; gap:16px; z-index:60; box-shadow:0 12px 34px -8px rgba(0,0,0,.45);
  font-size:14px; font-weight:600; max-width:calc(100vw - 32px); transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
#rl-toast.show { transform:translate(-50%, 0); }
#rl-toast .rl-toast-cta { color:var(--gold); font-weight:800; text-decoration:none; white-space:nowrap; }
#rl-toast .rl-toast-cta:hover { color:#e9bd6f; }

/* ---- botões genéricos (páginas novas) ---- */
.rl-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-weight:700; font-size:15px; padding:14px 22px; border-radius:11px; border:none; cursor:pointer; text-decoration:none; transition:background .15s, transform .15s, box-shadow .15s; }
.rl-btn-couro { background:var(--couro); color:#fff; }
.rl-btn-couro:hover { background:#4d3419; transform:translateY(-1px); }
.rl-btn-wpp { background:var(--wpp); color:#fff; }
.rl-btn-wpp:hover { background:var(--wpp-dark); }
.rl-btn-ghost { background:#fff; color:var(--couro); border:1.5px solid var(--line); }
.rl-btn-ghost:hover { border-color:var(--couro); }

a:focus-visible, button:focus-visible, input:focus-visible { outline:2px solid var(--couro); outline-offset:2px; }

/* ---- footer compartilhado ---- */
.rl-foot { background:var(--couro); color:#e6d9c8; padding:60px 0 28px; }
.rl-foot-in { max-width:1240px; margin:0 auto; padding:0 28px; }
.rl-foot .foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.rl-foot .foot-brand .flogo { width:132px; margin-bottom:16px; filter:brightness(0) invert(1); opacity:.92; }
.rl-foot .foot-brand p { font-size:14px; color:#c9b8a2; line-height:1.6; max-width:34ch; }
.rl-foot .foot-col h5 { font-size:12px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:#e9c98a; margin-bottom:14px; }
.rl-foot .foot-col a { display:block; font-size:14px; color:#d8c8b4; text-decoration:none; padding:6px 0; transition:color .15s; }
.rl-foot .foot-col a:hover { color:#fff; }
.rl-foot .foot-social { display:flex; gap:12px; margin-top:2px; }
.rl-foot .foot-social a { width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; padding:0; transition:background .15s; }
.rl-foot .foot-social a:hover { background:rgba(255,255,255,.18); }
.rl-foot .foot-social svg { width:20px; height:20px; }
.rl-foot .foot-bottom { margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; color:#b7a488; }
@media (max-width:1000px){
  .rl-foot .foot-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .rl-foot .foot-brand { grid-column:1/-1; }
}
@media (max-width:560px){ .rl-foot .foot-grid { grid-template-columns:1fr; } }

/* ---- páginas de conteúdo (políticas, sobre, dúvidas) ---- */
.rl-doc { max-width:760px; margin:0 auto; padding:60px 28px 84px; }
.rl-doc .eyebrow { font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--marsala); }
.rl-doc h1 { font-size:clamp(30px,5vw,46px); font-weight:800; letter-spacing:-0.03em; margin-top:10px; }
.rl-doc .upd { color:var(--muted); font-size:13.5px; margin-top:10px; }
.rl-doc article { margin-top:14px; }
.rl-doc article h2 { font-size:20px; font-weight:800; letter-spacing:-0.01em; margin-top:36px; }
.rl-doc article p { color:#4a4034; margin-top:12px; line-height:1.75; }
.rl-doc article ul { margin-top:12px; padding-left:22px; }
.rl-doc article li { color:#4a4034; margin-top:7px; line-height:1.7; }
.rl-doc article a { color:var(--couro); font-weight:600; }
.rl-doc .doc-cta { margin-top:40px; padding-top:28px; border-top:1px solid var(--line); }

/* base de páginas simples que só linkam tokens.css */
.rl-page { font-family:'Manrope',sans-serif; background:var(--cream); color:var(--ink); -webkit-font-smoothing:antialiased; }
