:root { --bg:#f4f4ef; --card:#fff; --ink:#1b1e16; --ink-2:#262a1f; --muted:#6c7064; --accent:#4b5d2a; --accent-2:#5d7234; --accent-soft:#eef1e6; --gold:#e0a82e; --line:#e4e4dc; --r:14px; --head:"Barlow Condensed",system-ui,sans-serif }
* { box-sizing:border-box } html { -webkit-text-size-adjust:100%; scroll-padding-top:120px }
body { margin:0; font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; background:var(--bg); color:var(--ink) }
button, select, input { font:inherit }
:focus-visible { outline:2px solid var(--gold); outline-offset:2px }
.skip { position:absolute; left:-999px; top:8px; background:#fff; color:var(--ink); padding:8px 12px; border-radius:8px; z-index:50 } .skip:focus { left:8px }

/* cabeçalho */
header.site { position:sticky; top:0; z-index:10; background:var(--ink); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.06), 0 6px 20px rgba(0,0,0,.12) }
.top { display:flex; align-items:center; gap:8px; max-width:1280px; margin:0 auto; padding:10px 16px; padding-top:max(10px, env(safe-area-inset-top)); flex-wrap:wrap }
.logo { display:flex; align-items:center; gap:9px; color:#fff; text-decoration:none; flex:none }
.logo img { width:36px; height:36px; flex:none }
.logo b { font:700 24px/1 var(--head); letter-spacing:.08em; text-transform:uppercase }
.logo b span { color:var(--gold); margin-left:.18em }
.grow { flex:1 }
.icon-btn { position:relative; background:rgba(255,255,255,.07); color:#fff; border:0; border-radius:10px; width:40px; height:40px; display:grid; place-items:center; cursor:pointer; flex:none; text-decoration:none }
.icon-btn:hover { background:rgba(255,255,255,.15) }
.icon-btn svg { width:20px; height:20px }
.badge { position:absolute; top:-4px; right:-4px; background:var(--gold); color:var(--ink); font-size:11px; font-weight:700; border-radius:999px; min-width:18px; height:18px; padding:0 5px; display:grid; place-items:center }
.badge[data-n="0"] { display:none }
.search { position:relative; order:10; flex:1 0 100%; margin:2px 0 0 }
.search input { width:100%; border:0; border-radius:10px; padding:11px 12px 11px 38px; background:#fff; color:var(--ink); outline:none; font-size:16px }
.search input:focus { box-shadow:0 0 0 3px rgba(224,168,46,.45) }
.search svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--muted) }
.top > .logo { margin-right:auto }
@media (max-width:599px) { .top #share { display:none } .logo b { font-size:21px } .top { gap:6px } }
@media (min-width:900px) {
  .menu-btn { display:none }
  .search { order:0; flex:1; max-width:560px; margin:0 auto 0 28px }
  .top > .logo { margin-right:0 }
}

/* menu de categorias */
.mainnav { display:none; background:var(--ink-2); border-top:1px solid rgba(255,255,255,.06) }
@media (min-width:900px) { .mainnav { display:block } }
.mainnav > ul { list-style:none; margin:0 auto; padding:0 8px; max-width:1280px; display:flex; flex-wrap:wrap }
.mainnav li { position:relative }
.mainnav > ul > li > a { display:flex; align-items:center; gap:4px; color:#e9eadf; text-decoration:none; padding:11px 12px; font-size:14px; font-weight:600; border-bottom:2px solid transparent }
.mainnav > ul > li > a svg { width:14px; height:14px; opacity:.7 }
.mainnav > ul > li > a:hover, .mainnav a.on { color:#fff; border-bottom-color:var(--gold) }
.mainnav .sub { position:absolute; left:0; top:100%; min-width:230px; background:#fff; border-radius:0 0 12px 12px; box-shadow:0 16px 40px rgba(0,0,0,.18); padding:8px; opacity:0; visibility:hidden; transform:translateY(-4px); transition:.15s; z-index:12 }
.mainnav .has-sub:hover .sub, .mainnav .has-sub:focus-within .sub { opacity:1; visibility:visible; transform:none }
.mainnav .sub ul { list-style:none; margin:0; padding:0 }
.mainnav .sub a { display:block; padding:9px 12px; color:var(--ink); text-decoration:none; border-radius:8px; font-size:14px }
.mainnav .sub a:hover, .mainnav .sub a.on { background:var(--accent-soft); color:var(--accent) }
.mainnav .sub .all a { color:var(--accent); font-weight:600; border-top:1px solid var(--line); border-radius:0 0 8px 8px; margin-top:4px }

/* menu lateral (telemóvel) */
.sidenav { position:fixed; top:0; left:0; bottom:0; width:min(320px, 88%); background:var(--card); z-index:31; transform:translateX(-100%); transition:transform .22s ease; display:flex; flex-direction:column; box-shadow:8px 0 30px rgba(0,0,0,.15) }
.sidenav.on { transform:none }
.sidenav-head { display:flex; align-items:center; justify-content:space-between; background:var(--ink); padding:14px 16px; padding-top:max(14px, env(safe-area-inset-top)) }
.sidenav-head .x { background:none; border:0; color:#fff; font-size:18px; width:36px; height:36px; cursor:pointer }
.sidenav-body { overflow-y:auto; padding:8px 0 24px }
.sidenav-body a, .sidenav-body summary { display:block; padding:13px 20px; color:var(--ink); text-decoration:none; font-weight:600; cursor:pointer }
.sidenav-body details a { padding-left:36px; font-weight:400; color:var(--muted) }
.sidenav-body a.on { color:var(--accent); background:var(--accent-soft) }
.sidenav-body summary { list-style:none; display:flex; justify-content:space-between } .sidenav-body summary::-webkit-details-marker { display:none }
.sidenav-body summary::after { content:"+"; color:var(--muted); font-weight:400 } .sidenav-body details[open] summary::after { content:"−" }
.sidenav-body hr { border:0; border-top:1px solid var(--line); margin:8px 0 }

/* rodapé */
footer.site { background:var(--ink); color:#c9ccbf; margin-top:48px; padding:36px 16px calc(20px + env(safe-area-inset-bottom)); font-size:14px }
footer.site .cols { max-width:1280px; margin:0 auto; display:grid; gap:24px; grid-template-columns:1fr 1fr }
footer.site .about { grid-column:1/-1 }
@media (min-width:800px) { footer.site .cols { grid-template-columns:1.6fr 1fr 1fr 1.4fr } footer.site .about { grid-column:auto } }
footer.site h3 { color:#fff; font:700 15px/1 var(--head); letter-spacing:.08em; text-transform:uppercase; margin:6px 0 12px }
footer.site a:not(.logo) { display:block; color:#c9ccbf; text-decoration:none; padding:3px 0 } footer.site a:not(.logo):hover { color:#fff }
footer.site p { margin:10px 0 0; line-height:1.55 }
footer.site .legal { max-width:1280px; margin:28px auto 0; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:#8b917c }

main { max-width:1280px; margin:0 auto; padding:16px 16px 24px }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px; font-size:14px; opacity:0; pointer-events:none; transition:.2s; z-index:20 }
.toast.on { opacity:1; transform:translate(-50%,0) }

/* painel do carrinho */
.scrim { position:fixed; inset:0; background:rgba(20,22,16,.45); z-index:30 }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(420px, 100%); background:var(--bg); z-index:31; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .22s ease; box-shadow:-8px 0 30px rgba(0,0,0,.15) }
.drawer.on { transform:none }
.drawer-head { display:flex; align-items:center; justify-content:space-between; padding:16px; padding-top:max(16px, env(safe-area-inset-top)); background:var(--ink); color:#fff; font-size:16px }
.drawer-head .x { background:none; border:0; color:#fff; font-size:18px; cursor:pointer; width:36px; height:36px }
.drawer-body { flex:1; overflow-y:auto; padding:8px 16px }
.drawer-foot { padding:14px 16px; padding-bottom:max(14px, env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--card); display:grid; gap:8px }
.cart-empty { color:var(--muted); text-align:center; padding:48px 0 }
.line { display:grid; grid-template-columns:64px 1fr auto; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); align-items:start }
.line.off { opacity:.6 }
.line .th { width:64px; height:64px; background:#fff; border-radius:10px; box-shadow:0 0 0 1px var(--line); display:grid; place-items:center; overflow:hidden }
.line .th img { max-width:100%; max-height:100%; object-fit:contain }
.lt { color:inherit; text-decoration:none; font-weight:600; font-size:14px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.lp { color:var(--muted); font-size:13px; margin-top:2px }
.ls { font-weight:700; font-size:14px; white-space:nowrap }
.qty { display:flex; align-items:center; gap:8px; margin-top:6px }
.qty button[data-d] { width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:var(--card); cursor:pointer; font-size:15px; line-height:1 }
.qty span { min-width:16px; text-align:center; font-weight:600 }
.qty .rm { background:none; border:0; color:var(--muted); font-size:12px; text-decoration:underline; cursor:pointer; margin-left:auto }
.sum { display:flex; justify-content:space-between; align-items:baseline; font-size:15px } .sum b { font-size:20px }
.primary { display:block; text-align:center; background:var(--accent); color:#fff; border:0; border-radius:12px; padding:14px; font-weight:700; font-size:16px; cursor:pointer; text-decoration:none }
.primary[disabled] { opacity:.5; cursor:default }
.link { background:none; border:0; color:var(--muted); font-size:14px; cursor:pointer; padding:6px }

/* formulários de conta (carrinho e área do cliente) */
.acct label { display:block; font-size:13px; color:var(--muted); margin:10px 0 4px }
.acct input, .acct textarea { width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 12px; font-size:16px; background:#fff; color:var(--ink) }
.acct .row2 { display:grid; grid-template-columns:1fr 1.4fr; gap:10px }
.acct .err { color:#a33; font-size:14px; margin-top:10px }
.acct .muted, .muted { color:var(--muted); font-size:14px }
.tabs { display:grid; grid-template-columns:1fr 1fr; background:var(--bg); border-radius:12px; padding:4px; margin-bottom:6px }
.tabs button { border:0; background:none; padding:10px; border-radius:9px; font-weight:600; color:var(--muted); cursor:pointer }
.tabs button.on { background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08) }
fieldset.apd { border:1px solid var(--line); border-radius:12px; padding:4px 12px 12px; margin:14px 0 0 }
fieldset.apd legend { font-size:13px; font-weight:600; padding:0 6px } fieldset.apd .muted { font-size:12px; margin:4px 0 0 }
.or { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; margin:16px 0 4px }
.or::before, .or::after { content:""; flex:1; height:1px; background:var(--line) }
#gbtn { display:flex; justify-content:center; margin:12px 0 4px; min-height:44px }

/* coração dos favoritos */
.fav { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.92); color:var(--muted); box-shadow:0 1px 4px rgba(0,0,0,.12); transition:transform .12s }
.fav svg { width:19px; height:19px } .fav:hover { color:#c0392b; transform:scale(1.08) }
.fav[aria-pressed="true"] { color:#c0392b } .fav[aria-pressed="true"] svg { fill:currentColor }