/* ============================================================
   FILMSIM — design system real (do bundle Claude Design) + integração WordPress.
   Enfileirado pelo functions.php. fluid.css carrega depois deste.
   A nav do design é isolada em `nav.fsnav` para não colidir com <nav> do WoodMart.
   ============================================================ */

:root{--ink:#0F0F0E;--paper:#FFFFFF;--off:#F4F2EE;--sunk:#EFECE6;--mut:#6E6A65;--faint:#A6A29B;--hair:#E4E0D8;--red:#d71f2e;--good:#1B5E32}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--red)}
img{display:block}
button{font-family:inherit}
.wrap{max-width:1340px;margin:0 auto;padding:0 44px}
.eyebrow{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400}
.h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(30px,3.4vw,44px);line-height:1.04;letter-spacing:-.02em;margin:0}
.h2 em{font-style:italic;color:var(--mut)}
.lede{margin:16px 0 0;font:400 15.5px/1.7 Inter;color:var(--mut);max-width:46ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:12px;font:700 13px Inter,sans-serif;letter-spacing:-.01em;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:transform .14s,background .14s,border-color .14s,opacity .14s}
.btn:active{transform:translateY(1px) scale(.995)}
.btn.d{background:var(--ink);color:var(--off)}.btn.d:hover{color:var(--off);background:#26251f}
.btn.g{background:var(--paper);color:var(--ink);border-color:var(--hair)}.btn.g:hover{border-color:var(--ink);color:var(--ink)}
.btn.l{background:var(--off);color:var(--ink)}.btn.l:hover{color:var(--ink);opacity:.9}
.btn.r{background:var(--red);color:#fff}.btn.r:hover{color:#fff;background:#bd1a27}
.btn.outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}.btn.outline:hover{color:#fff;border-color:#fff}

/* ---- NAV (isolada em nav.fsnav) ---- */
nav.fsnav{position:sticky;top:0;z-index:80;height:70px;display:flex;align-items:center;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--hair)}
nav.fsnav .nv{display:flex;align-items:center;gap:34px;width:100%}
nav.fsnav .brand{font-size:14px;letter-spacing:.06em;color:var(--ink);flex-shrink:0}
nav.fsnav .brand b{font-weight:800}nav.fsnav .brand span{font-weight:400}
nav.fsnav .nl{display:flex;gap:26px;flex:1}
nav.fsnav .nl a{font:500 13px Inter;color:var(--mut);white-space:nowrap}
nav.fsnav .nl a:hover,nav.fsnav .nl a.on{color:var(--ink)}
nav.fsnav .nbtn{padding:10px 18px;border-radius:100px;background:var(--red);color:#fff;font:700 12.5px Inter;white-space:nowrap;flex-shrink:0}
nav.fsnav .nbtn:hover{color:#fff;background:#bd1a27}
nav.fsnav .acct{width:40px;height:40px;border-radius:99px;display:grid;place-items:center;color:var(--ink);border:1px solid var(--hair);flex-shrink:0;margin-left:auto;transition:background .14s,border-color .14s}
nav.fsnav .acct:hover{background:var(--sunk);border-color:var(--ink);color:var(--ink)}
nav.fsnav .acct svg{display:block}
nav.fsnav .acct+.nbtn{margin-left:-22px}
/* conta logada: círculo preto + ícone branco */
nav.fsnav .acct.on{background:var(--ink);border-color:var(--ink);color:#fff}
nav.fsnav .acct.on:hover{background:#26251f;border-color:#26251f;color:#fff}
/* carrinho na nav (aparece quando tem itens) */
nav.fsnav .navcart{position:relative;width:40px;height:40px;border-radius:99px;display:grid;place-items:center;color:var(--ink);border:1px solid var(--hair);flex-shrink:0;transition:background .14s,border-color .14s}
nav.fsnav .navcart:hover{background:var(--sunk);border-color:var(--ink);color:var(--ink)}
nav.fsnav .navcart.hide{display:none}
nav.fsnav .navcart svg{display:block}
nav.fsnav .navcart .cn{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--red);color:#fff;font:700 9.5px/17px Inter;text-align:center}
nav.fsnav .acct+.navcart{margin-left:-22px}
nav.fsnav .navcart+.nbtn{margin-left:-22px}

/* ---- page head (páginas interiores) ---- */
.head{padding-top:58px}
.head h1{margin:14px 0 0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(48px,6.4vw,86px);line-height:.94;letter-spacing:-.033em;padding-bottom:.04em}
.head h1 em{font-style:italic}
.head .sub{margin:16px 0 0;font:400 16px/1.6 Inter;color:var(--mut);max-width:46ch}
.hstats{display:flex;gap:36px;margin-top:32px;flex-wrap:wrap}
.hs .k{font-family:'Instrument Serif',Georgia,serif;font-size:34px;line-height:.94;letter-spacing:-.02em}
.hs .l{margin-top:7px;font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--mut)}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.shead .more{font:600 13px Inter;color:var(--mut);flex-shrink:0}
.shead .more:hover{color:var(--red)}

/* ---- FOOTER (sitefoot) ---- */
.sitefoot{padding:58px 0 46px;border-top:1px solid var(--hair);background:var(--paper)}
.sitefoot .sf{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.sitefoot .sf .cols{display:flex;gap:64px;flex-wrap:wrap}
.sitefoot .sf h4{margin:0 0 14px;font:700 10px Inter;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.sitefoot .sf ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.sitefoot .sf a{font:400 13px Inter;color:var(--mut)}
.sitefoot .sf a:hover{color:var(--ink)}
.sitefoot .brand{font-size:14px;letter-spacing:.06em;color:var(--ink)}
.sitefoot .brand b{font-weight:800}.sitefoot .brand span{font-weight:400}
.sitefoot .desc{margin:14px 0 0;font:400 12.5px/1.6 Inter;color:var(--faint);max-width:240px}
.sitefoot .sfbot{margin-top:44px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:400 11.5px Inter;color:var(--faint)}

@media (max-width:1140px){nav.fsnav .nl{display:none}}
@media (max-width:720px){.wrap{padding:0 22px}.hstats{gap:24px}nav.fsnav .nv{gap:12px}nav.fsnav .acct{width:42px;height:42px}nav.fsnav .acct+.nbtn,nav.fsnav .acct+.navcart,nav.fsnav .navcart+.nbtn{margin-left:-2px}nav.fsnav .nbtn{padding:11px 15px;font-size:12px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ============================================================
   INTEGRAÇÃO NO WOODMART / WOOCOMMERCE
   ============================================================ */
/* Páginas do nosso design: libertar o conteúdo do container do WoodMart (senão fica encaixotado) */
body.fs-fullbleed .wd-page-content,
body.fs-fullbleed .main-page-wrapper{padding:0!important;margin:0!important}
body.fs-fullbleed main.content-layout-wrapper,
body.fs-fullbleed .wd-content-layout,
body.fs-fullbleed main.container{max-width:none!important;width:100%!important;margin:0!important;padding:0!important;display:block!important;grid-template-columns:none!important}
/* o single post do WoodMart mete uma sidebar/grid no main; achatamos p/ o nosso conteúdo encher */
body.fs-fullbleed .wd-content-area,body.fs-fullbleed .content-area{width:100%!important;max-width:none!important;margin:0!important;float:none!important}
body.fs-fullbleed .wc-sidebar,body.fs-fullbleed .sidebar-container,body.fs-fullbleed #secondary{display:none!important}
/* o WoodMart pinta o wrapper de cinza (#F8F8F8) por trás do nosso conteúdo, o que faz
   a barra de filtros branca destacar-se como uma faixa. Fundo = o do design (paper) em todas as
   nossas páginas, para não haver faixas de cor diferente. */
body.fs-fullbleed .wd-page-content,
body.fs-fullbleed .main-page-wrapper,
body.fs-fullbleed .wd-page-wrapper{background:var(--paper)!important}
/* O "flicker fix" do WoodMart mete display:none inline no <body> e revela por JS;
   nalgumas das nossas páginas (ex.: single post) esse reveal não dispara e a página
   fica em branco. Forçamos visível — as fontes são pré-carregadas, por isso sem flash. */
body.fs-fullbleed{display:block!important}
/* logo do site (SVG wordmark) na nav + footer */
nav.fsnav .brand,.sitefoot .brand{display:inline-flex;align-items:center}
.brandlogo{height:12px;width:auto!important;max-width:none!important;flex:0 0 auto;display:block}
.sitefoot .brandlogo{height:13px}
@media (max-width:520px){.brandlogo{height:11px}}

/* esconder header/footer do WoodMart + footer do Elementor (usamos os do design) */
.whb-header,.whb-general-header,.whb-sticky-real,.wd-header-banner,.whb-row,
.footer-container,.site-footer,.wd-footer,.copyrights-wrapper,.footer-newsletter,
.wd-social-icons,.woodmart-social,.social-icons-wrapper,
.elementor-location-footer,footer[data-elementor-type="footer"]{display:none!important}
/* burger + sidebar mobile do WoodMart (usamos a nossa nav.fsnav + nav.js) */
.wd-sidebar-opener,.mobile-nav,.wd-close-side{display:none!important}

/* footer nosso: apertar o espaçamento (o WoodMart mete margens nos li) */
.sitefoot .sf ul{gap:8px!important}
.sitefoot .sf li{margin:0!important;padding:0!important;line-height:1.25!important}
.sitefoot .sf ul li::before{display:none!important}

/* LOGIN / SIGNUP (fullscreen, sem flash) */
body:has(.fsl-auth){padding:0}
body:has(.fsl-auth) nav.fsnav,body:has(.fsl-auth) .sitefoot{display:none!important}
.fsl-auth{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;z-index:2000;overflow-y:auto;background:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}
.fsl-auth .split{display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh}
.fsl-auth .art{position:relative;overflow:hidden;background:#141210}
.fsl-auth .art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fsl-auth .pane{display:flex;align-items:center;justify-content:center}
@media(max-width:980px){.fsl-auth .split{display:block}.fsl-auth .art{min-height:300px}}

/* Esconder o aviso da loja em baixo (banner de moeda/geolocalização injetado como .woocommerce-store-notice) */
.woocommerce-store-notice,
p.woocommerce-store-notice,
.woocommerce-store-notice.demo_store{display:none!important}