/* Comum as paginas da loja: o botao do produto (ate o menu do site montar no
   lugar dele, ver chrome.js) e o contador da sacola. */
.pswitch{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 10px 0 8px;margin-left:-8px;background:none;border:1px solid transparent;cursor:pointer;font-family:var(--disp);font-weight:800;font-size:17px;color:var(--bright);letter-spacing:-.01em;transition:border-color .25s,background .25s}
.pswitch:hover{border-color:var(--line2);background:color-mix(in srgb,var(--raise) 70%,transparent)}
.pswitch svg{width:10px;height:10px;color:var(--dim);transition:transform .4s var(--ease)}
.pswitch[aria-expanded=true]{border-color:var(--line2);background:var(--raise)}
.pswitch[aria-expanded=true] svg{transform:rotate(180deg);color:var(--osso)}


/* contador da sacola */
.bagi{position:relative}
.bagi .n{position:absolute;top:1px;right:-2px;min-width:16px;height:16px;padding:0 4px;background:var(--osso);color:#000;font-family:var(--mono);font-size:10px;font-weight:600;display:grid;place-items:center;transform:scale(0);transition:transform .4s var(--ease)}
.bagi .n.on{transform:scale(1)}

/* o item Products na barra: visivel como os outros links, com seta */
.plink{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;background:none;border:0;cursor:pointer;font:inherit;font-size:12px;color:var(--bright);font-weight:500}
.plink svg{width:9px;height:9px;color:var(--dim);transition:transform .4s var(--ease)}
.plink:hover svg{color:var(--bright)}
.plink[aria-expanded=true]{color:var(--osso)}
.plink[aria-expanded=true] svg{transform:rotate(180deg);color:var(--osso)}
.lsep{width:1px;height:14px;background:var(--line2);align-self:center;margin:0 6px}
.ract{justify-self:end;display:flex;align-items:center;gap:6px}
@media(max-width:820px){.ract .plink{display:none}}
.sheet a[data-switch]::after{content:"";display:inline-block;width:7px;height:7px;margin-left:10px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:.6}

/* seletor de idioma, igual ao da pagina inicial (i18n.js o monta) */
.bhlang{position:relative}
.bhlang .bhl-lb{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 9px;background:none;border:1px solid var(--line2);cursor:pointer;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--bright);transition:border-color .25s,background .25s}
.bhlang .bhl-lb:hover,.bhlang.open .bhl-lb{background:var(--raise)}
.bhlang .bhl-lb svg{width:9px;height:9px;color:var(--dim);transition:transform .35s var(--ease)}
.bhlang.open .bhl-lb svg{transform:rotate(180deg)}
.bhlang .bhl-lf{font-size:14px;line-height:1}
.bhlang .bhl-lm{position:absolute;right:0;top:calc(100% + 6px);min-width:170px;z-index:60;background:var(--panel);border:1px solid var(--line2);padding:4px;display:grid;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s,transform .25s var(--ease),visibility .2s;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.bhlang.open .bhl-lm{opacity:1;visibility:visible;transform:none}
.bhlang .bhl-lm button{display:flex;align-items:center;gap:10px;padding:9px 10px;background:none;border:0;cursor:pointer;font:inherit;font-size:13px;color:var(--bright);text-align:left}
.bhlang .bhl-lm button:hover:not(:disabled){background:var(--raise)}
.bhlang .bhl-lm button.on{color:var(--osso)}
.bhlang .bhl-lm button.on::after{content:"";margin-left:auto;width:6px;height:6px;background:var(--osso)}
.bhlang .bhl-lm button:disabled{cursor:default;color:var(--ghost)}
.bhlang .bhl-lm em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ghost)}
@media(max-width:420px){.bhlang .bhl-ln{display:none}.bhlang .bhl-lb{padding:0 7px}}

/* rodape com as colunas da home (chrome.js o monta) */
.bhf{flex-basis:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding-bottom:36px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.bhf h4{margin:0 0 14px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ghost)}
.bhf a{display:block;width:max-content;padding:5px 0;font-size:13px;color:var(--dim);text-decoration:none;transition:color .2s}
.bhf a:hover{color:var(--bright)}
@media(max-width:640px){.bhf{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}}