/* Navbar desktop — Modernista (fase 2). Escopo .pf-navbar.
   Fonte: board Claude Design. Botões (.pf-btn/.pf-plate) vêm de pf-buttons.css.
   Obs.: o link de categoria do board (.pf-cat) foi renomeado para .pf-catlink
   para não colidir com o tile .pf-cat de pf-cards.css. */

.pf-navbar{position:relative;font-family:var(--font-sans,'Prompt',sans-serif);color:#003352}
.pf-navbar *,.pf-navbar *::before,.pf-navbar *::after{box-sizing:border-box}
.pf-navbar .pf-wrap{max-width:1320px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:16px}

/* Top bar (endereço / CNPJ / links) */
.pf-navbar .pf-top{background:#003352;color:#b8c9d8;font-size:13px}
.pf-navbar .pf-top .pf-wrap{min-height:36px;justify-content:space-between}
.pf-navbar .pf-top a{color:#ffffff;text-decoration:none}
.pf-navbar .pf-top a:hover{color:#00a3e0}
.pf-navbar .pf-top a:focus-visible{outline:2px solid #00a3e0;outline-offset:2px}
.pf-navbar .pf-top a.pf-chipcar{display:inline-flex;align-items:center;padding:2px 12px;color:#003352;background:#00a3e0;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:.04em;transition:background 160ms}
.pf-navbar .pf-top a.pf-chipcar:hover{background:#ffffff;color:#003352}
.pf-navbar .pf-toplinks{display:flex;align-items:center;gap:20px}

/* Barra principal (logo, busca, conta, carrinho) */
.pf-navbar .pf-hdr{background:#0057a6;color:#ffffff}
.pf-navbar .pf-hdr .pf-wrap{min-height:76px;gap:24px}
.pf-navbar .pf-logo{display:inline-flex;align-items:center;gap:10px;color:#ffffff;text-decoration:none;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:28px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.pf-navbar .pf-logo i{display:inline-block;width:28px;height:28px;background:#00a3e0;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.pf-navbar .pf-search{flex:1;display:flex;min-width:0;height:48px;background:#ffffff;border-radius:4px;overflow:hidden}
.pf-navbar .pf-search input{flex:1;min-width:0;border:0;padding:0 16px;font:400 15px/22px 'Prompt',sans-serif;color:#003352;outline:none}
.pf-navbar .pf-search input:focus-visible{box-shadow:inset 0 0 0 2px #00a3e0}
.pf-navbar .pf-search button{border:0;width:56px;background:#00a3e0;color:#003352;cursor:pointer;clip-path:polygon(10px 0,100% 0,100% 100%,0 100%)}
.pf-navbar .pf-search button:hover{background:#ffffff}
.pf-navbar .pf-actions{display:flex;align-items:center;gap:8px}
.pf-navbar .pf-dwrap{position:relative}

/* Link na barra azul */
.pf-navbar .pf-nav{position:relative;display:inline-flex;align-items:center;min-height:44px;color:#ffffff;text-decoration:none;font-size:15px;font-weight:500}
.pf-navbar .pf-nav::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:3px;background:#00a3e0;transform:scaleX(0) skewX(-12deg);transform-origin:left;transition:transform 220ms cubic-bezier(.2,.7,.2,1)}
.pf-navbar .pf-nav:hover::after,.pf-navbar .pf-nav.is-active::after{transform:scaleX(1) skewX(-12deg)}
.pf-navbar .pf-nav:focus-visible{outline:2px solid #ffffff;outline-offset:2px}

/* Botão de cabeçalho (conta / carrinho) */
.pf-navbar .pf-hbtn{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;border:0;border-radius:8px;background:transparent;color:#ffffff;cursor:pointer;font-family:'Prompt',sans-serif;font-size:14px;text-align:left;line-height:18px;transition:background 160ms}
.pf-navbar .pf-hbtn small{display:block;color:#b8c9d8;font-size:12px}
.pf-navbar .pf-hbtn:hover{background:#00477f}
.pf-navbar .pf-hbtn.is-open{background:#003352}
.pf-navbar .pf-hbtn:focus-visible{outline:2px solid #ffffff;outline-offset:2px}
.pf-navbar .pf-ico{position:relative;display:inline-flex}
.pf-navbar .pf-chev{transition:transform 220ms cubic-bezier(.2,.7,.2,1)}
.pf-navbar .is-open .pf-chev{transform:rotate(180deg)}
.pf-navbar .pf-badge{position:absolute;top:-8px;right:-10px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#00a3e0;color:#003352;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #0057a6}
@keyframes pfPop{0%{transform:scale(.6)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.pf-navbar .pf-badge.is-bump{animation:pfPop 360ms cubic-bezier(.2,.7,.2,1)}

/* Dropdown */
.pf-navbar .pf-dd{position:absolute;top:calc(100% + 12px);right:0;z-index:30;min-width:280px;padding:12px 0;background:#ffffff;color:#003352;border-radius:12px;box-shadow:0 8px 32px rgba(0,51,82,.18);opacity:0;visibility:hidden;transform:translateY(-8px);clip-path:inset(0 0 100% 0 round 12px);transition:opacity 160ms,transform 260ms cubic-bezier(.2,.7,.2,1),clip-path 380ms cubic-bezier(.7,0,.2,1),visibility 0s linear 380ms}
.pf-navbar .pf-dd.is-left{left:0;right:auto}
.pf-navbar .pf-dd.is-open{opacity:1;visibility:visible;transform:none;clip-path:inset(-24px -48px -64px -48px round 12px);transition-delay:0s}
.pf-navbar .pf-dd::before{content:'';position:absolute;top:0;left:20px;width:96px;height:4px;background:#00a3e0;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.pf-navbar .pf-ddh{padding:8px 20px 12px;font-size:13px;color:#56657a}
.pf-navbar .pf-st{opacity:0;transform:translateY(6px);transition:opacity 200ms,transform 260ms cubic-bezier(.2,.7,.2,1)}
.pf-navbar .is-open .pf-st{opacity:1;transform:none}
.pf-navbar .pf-ddl{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 20px;color:#003352;text-decoration:none;font-size:15px;transition:background 120ms,color 120ms}
.pf-navbar .pf-ddl::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:4px;background:#0057a6;transform:scaleY(0);transition:transform 200ms cubic-bezier(.2,.7,.2,1)}
.pf-navbar .pf-ddl:hover{background:#eef5fb;color:#0057a6}
.pf-navbar .pf-ddl:hover::before{transform:scaleY(1)}
.pf-navbar .pf-ddl:focus-visible{outline:2px solid #0057a6;outline-offset:-2px}
.pf-navbar .pf-ddl .pf-go{margin-left:auto;opacity:0;transform:translateX(-4px);transition:opacity 160ms,transform 160ms}
.pf-navbar .pf-ddl:hover .pf-go{opacity:1;transform:none}
.pf-navbar .pf-ddl.is-danger{color:#b42318}
.pf-navbar .pf-ddl.is-danger::before{background:#b42318}
.pf-navbar .pf-ddl.is-danger:hover{background:#fdecea}

/* Mini carrinho */
.pf-navbar .pf-cartrow{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid #d7e1ea;font-size:14px}
.pf-navbar .pf-cartrow .pf-thumb{width:48px;height:48px;border-radius:4px;background:#eef5fb;flex:none}
.pf-navbar .pf-cartrow b{display:block;color:#0057a6;font-weight:600}
.pf-navbar .pf-qty{display:inline-flex;border:1px solid #d7e1ea;border-radius:2px;overflow:hidden}
.pf-navbar .pf-qty span{min-width:28px;display:flex;align-items:center;justify-content:center}
.pf-navbar .pf-qs{width:32px;height:32px;border:0;background:#ffffff;color:#003352;font-size:16px;cursor:pointer}
.pf-navbar .pf-qs:hover{background:#eef5fb}
.pf-navbar .pf-qs:focus-visible{outline:2px solid #0057a6;outline-offset:-2px}
.pf-navbar .pf-ib{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:2px;background:transparent;color:#56657a;cursor:pointer;transition:background 120ms,color 120ms}
.pf-navbar .pf-ib:hover{background:#fdecea;color:#b42318}
.pf-navbar .pf-ib:focus-visible{outline:2px solid #0057a6;outline-offset:2px}
.pf-navbar .pf-ddf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px 4px}

/* Barra de departamentos/categorias */
.pf-navbar .pf-catbar{background:#ffffff;border-bottom:1px solid #d7e1ea}
.pf-navbar .pf-catbar .pf-wrap{min-height:48px;gap:4px}
.pf-navbar .pf-deptbtn{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 34px 0 20px;border:0;background:transparent;color:#ffffff;cursor:pointer;font-family:'Prompt',sans-serif;font-size:15px;font-weight:600;isolation:isolate}
.pf-navbar .pf-deptplate{position:absolute;inset:0;background:#0057a6;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);overflow:hidden;z-index:-1;transition:background 200ms}
.pf-navbar .pf-deptplate::after{content:'';position:absolute;top:0;bottom:0;left:-25%;width:150%;background:#00477f;transform:translateX(-105%) skewX(-12deg);transition:transform 420ms cubic-bezier(.7,0,.2,1)}
.pf-navbar .pf-deptbtn:hover .pf-deptplate::after{transform:translateX(0) skewX(-12deg)}
.pf-navbar .pf-deptbtn.is-open .pf-deptplate{background:#003352}
.pf-navbar .pf-deptbtn.is-open .pf-deptplate::after{display:none}
.pf-navbar .pf-deptbtn:focus-visible{outline:2px solid #0057a6;outline-offset:2px}
.pf-navbar .pf-catlink{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 16px;color:#003352;text-decoration:none;font-size:15px;font-weight:500;transition:color 120ms}
.pf-navbar .pf-catlink::after{content:'';position:absolute;left:12px;right:12px;bottom:0;height:3px;background:#0057a6;transform:scaleX(0) skewX(-12deg);transform-origin:left;transition:transform 220ms cubic-bezier(.2,.7,.2,1)}
.pf-navbar .pf-catlink:hover{color:#0057a6}
.pf-navbar .pf-catlink:hover::after{transform:scaleX(1) skewX(-12deg)}
.pf-navbar .pf-catlink:focus-visible{outline:2px solid #0057a6;outline-offset:-2px}
.pf-navbar .pf-catlink.is-offer{color:#c2410c}
.pf-navbar .pf-catlink.is-offer::after{background:#c2410c}
.pf-navbar .pf-sep{width:1px;align-self:center;height:20px;background:#d7e1ea}
.pf-navbar .pf-offer{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:34px;margin-left:auto;padding:0 16px;color:#ffffff;text-decoration:none;font-size:15px;font-weight:600;isolation:isolate}
.pf-navbar .pf-offer::before{content:'';position:absolute;inset:0;background:#c2410c;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);z-index:-1;transition:background 160ms}
.pf-navbar .pf-offer:hover::before{background:#003352}
.pf-navbar .pf-offer:focus-visible{outline:2px solid #0057a6;outline-offset:2px}

/* Mega-menu de departamentos (lista + sub) */
.pf-navbar .pf-dd.pf-mega{display:grid;grid-template-columns:260px 1fr;min-width:640px;padding:12px 0}
.pf-navbar .pf-dl{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:42px;padding:0 16px 0 20px;border:0;background:transparent;color:#003352;font-family:'Prompt',sans-serif;font-size:15px;text-align:left;cursor:pointer;transition:background 120ms,color 120ms}
.pf-navbar .pf-dl::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:4px;background:#0057a6;transform:scaleY(0);transition:transform 200ms cubic-bezier(.2,.7,.2,1)}
.pf-navbar .pf-dl:hover{background:#eef5fb}
.pf-navbar .pf-dl.is-on{background:#eef5fb;color:#0057a6;font-weight:500}
.pf-navbar .pf-dl.is-on::before{transform:scaleY(1)}
.pf-navbar .pf-dl:focus-visible{outline:2px solid #0057a6;outline-offset:-2px}
.pf-navbar .pf-dl svg{opacity:.4;transition:opacity 120ms,transform 160ms}
.pf-navbar .pf-dl.is-on svg{opacity:1;transform:translateX(3px)}
.pf-navbar .pf-sub{display:none;padding:8px 24px;border-left:1px solid #d7e1ea}
.pf-navbar .pf-sub.is-on{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:4px 16px;animation:pfSub 280ms cubic-bezier(.2,.7,.2,1) both}
.pf-navbar .pf-sub h4{grid-column:1/-1;margin:4px 0 8px;font:600 17px/24px 'Prompt',sans-serif}
.pf-navbar .pf-sub a{color:#003352;text-decoration:none;font-size:14px;line-height:32px}
.pf-navbar .pf-sub a:hover{color:#0057a6;text-decoration:underline}
@keyframes pfSub{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}

/* Fundo escurecido quando dropdown aberto */
.pf-navbar .pf-back{position:fixed;inset:0;z-index:10;border:0;padding:0;margin:0;background:rgba(0,51,82,.32);opacity:0;visibility:hidden;cursor:default;transition:opacity 220ms,visibility 0s linear 220ms}
.pf-navbar .pf-back.is-on{opacity:1;visibility:visible;transition-delay:0s}
.pf-navbar .pf-top,.pf-navbar .pf-hdr,.pf-navbar .pf-catbar{position:relative}
.pf-navbar .pf-hdr,.pf-navbar .pf-catbar{z-index:20}

@media (prefers-reduced-motion: reduce){
  .pf-navbar .pf-dd,.pf-navbar .pf-st,.pf-navbar .pf-back,.pf-navbar .pf-nav::after,.pf-navbar .pf-chev,.pf-navbar .pf-catlink::after,.pf-navbar .pf-deptplate::after,.pf-navbar .pf-dl::before{transition:none!important}
  .pf-navbar .pf-badge,.pf-navbar .pf-sub{animation:none!important}
}