/* Store identity. Colors and symbol follow /brand/colors.json and the main site. */
@font-face{font-family:'Blackhold Logo';src:url('/fonts/logo-hnd-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Blackhold Logo';src:url('/fonts/logo-hnd-thin.woff2') format('woff2');font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:'Blackhold Corporate Zen';src:url('/fonts/corporate-options/zendots-corporate.woff2?v=5') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{
  --marca:#f53071;--marca-txt:#fc5884;
  --void:#000;--panel:#060609;--raise:#0b0b10;--ink:#030305;--hot:#141419;
  --line:#1c1c24;--line2:#2c2c38;
  --bright:#e8e8ee;--body:#9fa0ac;--dim:#7e7f8a;--ghost:#62636e;
  --osso:#e7e0ce;--gelo:#4dbde5;--salvia:#69c492;--latao:#e1ad57;--brasa:var(--marca-txt);
  --nh:86px;
}
::selection{background:var(--marca);color:#000}
:focus-visible{outline:2px solid var(--marca-txt);outline-offset:4px}
section[id]{scroll-margin-top:calc(var(--nh) + 24px)}

/* The site's navbar (src/layouts/Novo.astro, src/styles/product-menu.css): same island,
   mark, name, product label, links, language button and call to action. */
.bar,.bar.sc{height:var(--nh);padding-top:14px;background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;flex-shrink:0}
.bar .navw,.bar .in{width:calc(100% - 28px);max-width:1120px;height:58px;padding:0 9px 0 18px;border-radius:16px;gap:16px;grid-template-columns:auto 1fr auto;background:rgba(14,14,19,.35);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(255,255,255,.07);transition:background .35s,box-shadow .35s}
/* The site's product menu panel is placed against the island. */
.bar .navw,.bar .in{position:relative}
.bar.sc .navw,.bar.sc .in{background:rgba(10,10,14,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,255,255,.05),0 20px 40px -18px rgba(0,0,0,.95)}
.bar .id{gap:11px;white-space:nowrap}
.bar .mark,footer .mark{display:inline-flex;align-items:center;gap:0;color:var(--osso)}
.mark-img{display:block;width:26px;height:26px;flex:none;transition:width .35s cubic-bezier(.22,1,.36,1),height .35s cubic-bezier(.22,1,.36,1)}
.bar.sc .mark-img{width:22px;height:22px}
.brand-name,footer .mark>span{font-family:'Blackhold Logo','Helvetica Neue',Arial,sans-serif;font-size:25px;font-weight:700;letter-spacing:0;line-height:26px;margin-top:-2px;-webkit-font-smoothing:antialiased;transition:font-size .35s cubic-bezier(.22,1,.36,1)}
.bar.sc .brand-name{font-size:21px;line-height:22px;margin-top:0}
/* Mark and name: the same rule as the site, .42 of the name's size ink to ink.
   8.5px is the shield's own padding at 40px (7.2px at 34px). */
/* Mark and name match the home navbar as drawn: there the mark sits 26px inside a
   32px box (22 in 28 on phones), so the gap the eye sees is .35em plus that inset
   (.12em). Here the image is drawn edge to edge, so the inset goes into the gap. */
.mark>span{margin-inline-start:calc(.47em - var(--brand-mark-pad,0px))}
.bar .links,.bar .steps{justify-content:center;white-space:nowrap}
.bar .links{gap:2px}
.bar .links a,.bar .plink{height:34px;line-height:34px;padding:0 10px;border-radius:10px;font-size:13px;font-weight:500;color:rgba(232,232,238,.56);transition:color .25s ease}
.bar .plink{display:inline-flex;align-items:center}
.bar .links a:hover,.bar .links a.on,.bar .plink:hover{color:#f4f4f7}
.bar .links a::after{content:none}
.bar .lsep{margin-inline:3px}
/* Product label: the site's .product-switch-label, uppercase in Zen Dots. */
.bar .sep{width:1px;height:17px;background:#32323b;margin-right:-11px}
.bar .pswitch{min-height:44px;font-family:'Blackhold Corporate Zen',var(--disp,system-ui),sans-serif;font-size:16px;font-weight:400;line-height:1.3;letter-spacing:0;text-transform:uppercase;color:#b9b9c4;border-radius:0;padding:0 2px 0 12px;margin-left:0;gap:5px}
.bar .pswitch svg{width:11px;height:11px}
.bar .pswitch,.bar .pswitch:hover{border:0;background:none}
.bar .pswitch:hover{color:#f4f4f7}
.bar .btn.sm{height:40px;border-radius:10px;padding:0 20px;font-size:13px;font-weight:600;letter-spacing:0;background:#f4f1ea;border:0;color:#0a0b0e;box-shadow:none;transition:background-color .2s,transform .2s}
.bar .btn.sm:hover{background:#fff;color:#0a0b0e;transform:translateY(-1px)}
.bar .bhl-lb{border:0;border-radius:10px;height:40px;padding:0 12px;font-size:12px;letter-spacing:0;color:rgba(232,232,238,.56);transition:background-color .2s,color .2s}
.bar .bhl-lb:hover,.bar .bhl-lb[aria-expanded=true]{background:rgba(255,255,255,.06);color:#f4f4f7}
.bar .bhl-lm{border-radius:12px;padding:6px}
.bar .bhl-lm button{border-radius:7px}
.bar .ico,.bar .bag{border-radius:10px}
.bar .ico:hover,.bar .bag:hover{background:var(--raise)}
footer .mark svg{width:28px;height:30px}
footer .mark>span{font-size:25px;text-transform:none}

/* Brand color means action or selection. Green remains confirmation. */
.btn:not(.ghost){background:var(--marca);border-color:var(--marca);color:#000}
.btn:not(.ghost):hover{background:var(--marca-txt);border-color:var(--marca-txt)}
.btn.ghost{border-color:var(--line2);color:var(--bright)}
.btn.ghost:hover{border-color:var(--marca-txt);background:color-mix(in srgb,var(--marca) 8%,transparent)}
.bagi .n,.bag b{background:var(--marca);color:#000;border-radius:50%}
.bhlang .bhl-lm button.on,.plink[aria-expanded=true],.plink[aria-expanded=true] svg{color:var(--marca-txt)}
.bhlang .bhl-lm button.on::after{background:var(--marca)}
.steps a.on i,.sec .hd i{border-color:var(--marca-txt);color:var(--marca-txt)}
.steps a.done i,.next li.ok i{background:var(--salvia);border-color:var(--salvia);color:#000}
.ptabs a.on,.seg button[aria-pressed=true]{background:var(--marca);color:#000}
.thumbs button.on,.coin[aria-pressed=true]{border-color:var(--marca)}
.cap-o:has(input:checked),.paytab[aria-selected=true]{border-color:var(--marca);box-shadow:0 0 0 1px var(--marca);background:color-mix(in srgb,var(--marca) 6%,var(--panel))}
.cap-o:has(input:focus-visible){outline:2px solid var(--marca-txt)}
.cap-o .pop{background:var(--marca);color:#000}
.coin[aria-pressed=true] svg,.paytab[aria-selected=true] svg,.toast a{color:var(--marca-txt)}
.f input:focus,.f select:focus{border-color:var(--marca-txt);box-shadow:0 0 0 1px var(--marca-txt)}
.model.pick{border-color:var(--marca);box-shadow:0 0 0 1px var(--marca),0 30px 80px -40px color-mix(in srgb,var(--marca) 35%,transparent)}
.pmod.pick,.pmod:hover{border-color:var(--marca)}
.pmod.pick{box-shadow:0 0 0 1px var(--marca)}
.pmod .go{border-color:var(--line2);color:var(--bright)}
.pmod .tagm,.model .tagm{background:var(--marca);color:#000}
.pmod.pick .go,.pmod:hover .go{background:var(--marca);border-color:var(--marca);color:#000}
.seal{border-color:var(--salvia);color:var(--salvia)}
.seal::after{border-color:color-mix(in srgb,var(--salvia) 25%,transparent)}
.pin{background:radial-gradient(90% 80% at 50% 45%,#141419 0%,#08080b 50%,#000 100%)}

@media(max-width:1279px){.bar .links a,.bar .plink{padding-inline:8px}}
@media(max-width:1119px){
  .bar .navw{grid-template-columns:1fr auto}
  .bar .links{display:none}
  .bar .menu{display:grid}
  .bar .steps a span,.bar .ract .plink{display:none}
  .bar .steps a{padding:6px}
}
@media(max-width:640px){
  .mark-img,.bar.sc .mark-img{width:22px;height:22px}
  :root{--nh:76px}
  .bar{padding-top:10px}
  .bar .navw,.bar .in{height:54px;width:calc(100% - 20px);padding:0 7px 0 14px;gap:8px}
  .bar .id{gap:7px}
  .bar .sep{margin-right:-7px}
  .brand-name,.bar.sc .brand-name{font-size:16px;line-height:18px;margin-top:-2px}
  .bar.sc .brand-name{font-size:15px}
  .bar .act,.bar .ract{gap:2px}
  .bar .btn.sm{height:38px;padding-inline:12px;font-size:12px;margin-left:2px}
  .bar .bhl-lb{height:38px;padding-inline:4px}
  .bar .pswitch{font-size:13px;padding:0 2px 0 8px;gap:3px}
  .bar .steps a{padding:6px 4px}
}
@media(max-width:540px){.bar .ract .plink{display:none}}
@media(max-width:400px){.bar .brand-name{display:none}.bar .mark{min-height:36px}.bar .sep{display:none}}
@media(max-width:380px){
  .bar .ico{width:28px}.bar .id{gap:6px}.bar .act{gap:0}.bar .btn.sm{padding-inline:10px}.bar .bhl-lb{padding-inline:2px}
  .mark-img,.bar.sc .mark-img{width:22px;height:22px}
  .bar .pswitch,.bar .product-switch > summary{padding-left:6px}
  .bar .pswitch,.bar .product-switch-label{font-size:12px}
}
@media(max-width:359px){.bar .id{gap:4px}.bar .btn.sm{padding-inline:8px;font-size:11px}.bar .ico{width:26px}}
@media(prefers-reduced-motion:reduce){.bar .navw,.bar .in,.mark-img,.brand-name{transition:none}}

/* Phone (<=619px): the site's phone bar and menu (src/styles/mobile-nav.css).
   The language and Buy leave the bar for the menu; the bag stays, since it is
   the one thing a shopper checks from anywhere. The menu button and the sheet
   take the site's drawing: rounded tile, two lines that turn into an X, a panel
   under the bar with the sections, Buy as the only solid button and the
   language list (chrome.js adds those two). */
.sheet-extra{display:none}
@media(max-width:619px){
  .bar .act .bhlang,.bar .act .btn.sm{display:none}
  .bar .brand-name,.bar.sc .brand-name{display:inline;font-size:19px;line-height:20px}
  .bar.sc .brand-name{font-size:18px}
  .bar .mark-img,.bar.sc .mark-img{width:24px;height:24px}
  .bar .sep{display:block}
  .bar .ico.bagi{width:40px;height:40px}
  .bar .menu{width:42px;height:40px;margin-left:2px;border-radius:11px;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.06);color:#f4f4f7}
  .bar .menu:hover{background:rgba(255,255,255,.1)}
  .bar .menu i{position:relative;display:block;width:18px;height:12px}
  .bar .menu span{position:absolute;right:0;height:1.75px;border-radius:2px;background:currentColor;transition:transform .32s cubic-bezier(.22,1,.36,1),width .32s cubic-bezier(.22,1,.36,1),top .32s cubic-bezier(.22,1,.36,1)}
  .bar .menu span:first-child{top:2px;width:18px}
  .bar .menu span:last-child{top:8.25px;width:11px}
  body.open .bar .menu span{top:5.1px;width:17px}
  body.open .bar .menu span:first-child{transform:rotate(45deg)}
  body.open .bar .menu span:last-child{transform:rotate(-45deg)}

  .sheet{inset:calc(var(--nh) - 2px) 10px auto 10px;padding:8px;border:1px solid #ffffff1a;border-radius:16px;background:#101013;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 28px 70px -24px #000,inset 0 1px 0 #ffffff0d;transform:translateY(-6px) scale(.985);transform-origin:top right;max-height:calc(100dvh - var(--nh) - 12px);overflow:auto}
  .sheet>a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:0 14px;border:0;border-radius:12px;font-family:'Archivo Variable','Archivo',var(--disp,system-ui),sans-serif;font-weight:600;font-size:19px;line-height:1.2;letter-spacing:-.02em;color:#ececf1;-webkit-tap-highlight-color:transparent}
  .sheet>a+a{border-top:1px solid #ffffff0b;border-radius:0 0 12px 12px}
  .sheet>a:active{background:#ffffff08}
  .sheet>a:not([data-switch])::after{content:"";flex:none;width:7px;height:7px;margin-right:4px;border-right:1.6px solid #77778a;border-bottom:1.6px solid #77778a;transform:rotate(-45deg)}
  .sheet>a[data-switch]::after{margin-left:auto;margin-right:4px;border-color:#77778a}
  .sheet>a.on::before{content:"";flex:none;width:5px;height:5px;margin-left:-2px;border-radius:50%;background:var(--marca);box-shadow:0 0 10px 2px color-mix(in srgb,var(--marca) 55%,transparent)}
  .sheet>a.on{justify-content:flex-start}
  .sheet>a.on::after{margin-left:auto}
  .sheet-extra{display:block}
  .sheet .sheet-cta{display:flex;align-items:center;justify-content:center;min-height:52px;margin:8px 0 0;padding:0;border:0;border-radius:12px;background:#f4f1ea;color:#0a0b0e;font:600 15px/1 var(--mono,ui-monospace,monospace);letter-spacing:-.02em}
  .sheet .sheet-cta:active{background:#fff}
  .sheet-lang{margin-top:8px;border-radius:12px;background:#00000059}
  .sheet-lang-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 14px;border:0;border-radius:12px;background:none;color:#c9c9d3;font:500 13px/1 var(--mono,ui-monospace,monospace);text-align:left;cursor:pointer}
  .sheet-lang-btn svg{width:17px;height:17px;flex:none;fill:none;stroke:#8a8a99;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .sheet-lang-btn .lbl2{color:#8a8a99}
  .sheet-lang-btn .cur{margin-left:auto;color:#f1f1f5}
  .sheet-lang-btn .car{transition:transform .25s cubic-bezier(.22,1,.36,1)}
  .sheet-lang-btn[aria-expanded=true] .car{transform:rotate(180deg)}
  .sheet-langs{margin:0;padding:0 6px 6px;list-style:none}
  .sheet-langs button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 10px;border:0;border-radius:9px;background:none;color:#e8e8ee;font:500 13px/1 var(--mono,ui-monospace,monospace);text-align:left;cursor:pointer}
  .sheet-langs button[disabled]{color:#6c6c7a;cursor:default}
  .sheet-langs button[aria-current=true]{background:#ffffff0d}
  .sheet-langs .nm{flex:1}
  .sheet-langs .soon{font-size:11px;color:#6c6c7a}
  .sheet-langs .ck{width:16px;height:16px;fill:none;stroke:var(--marca);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;visibility:hidden}
  .sheet-langs button[aria-current=true] .ck{visibility:visible}
}
@media(max-width:359px){.bar .brand-name{display:none}.bar .sep{display:none}}
/* The bag page (.bar .in) keeps the language and the steps in its bar, so the name stays at the smaller size there. */
@media(max-width:619px){.bar .in .brand-name,.bar.sc .in .brand-name{font-size:16px;line-height:18px}.bar .in .mark-img{width:22px;height:22px}}
@media(max-width:400px){.bar .in .brand-name,.bar .in .sep{display:none}}
@media(max-width:619px) and (prefers-reduced-motion:reduce){.bar .menu span{transition:none}}