/* ===== Slabedd v1.22 — futurismo brutalista japonês =====
   Por cima da camada futurista (slabedd-fx): tinta grossa, sombras duras, kanji de fundo. */
:root{
  --br-ink:#150b0e;           /* traço brutalista */
  --br-paper:#f1ede6;         /* papel cru no modo claro */
  --br-shadow:#150b0e;        /* sombra dura */
  --br-hover-shadow:#c1272d;
  --br-line:2px;
  --jp-stroke:rgba(193,39,45,.38);
  --jp-fill:rgba(193,39,45,.14);
  --fx-page:#f1ede6;
  --fx-grid:rgba(21,11,14,.05);
  --fx-font-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --fx-font-jp:"Dela Gothic One","Chakra Petch",sans-serif;
}
:root[data-theme="dark"]{--br-ink:#f1e4e6;--br-shadow:#c1272d;--br-hover-shadow:#f1e4e6;--jp-stroke:rgba(229,56,59,.45);--jp-fill:rgba(229,56,59,.16);--fx-page:#0b0709;--fx-grid:rgba(229,56,59,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--br-ink:#f1e4e6;--br-shadow:#c1272d;--br-hover-shadow:#f1e4e6;--jp-stroke:rgba(229,56,59,.45);--jp-fill:rgba(229,56,59,.16);--fx-page:#0b0709;--fx-grid:rgba(229,56,59,.06)}}

/* ---- kanji de fundo por aba ---- */
.jpBackdrop{position:fixed;top:0;bottom:0;left:250px;right:0;z-index:0;pointer-events:none;overflow:hidden;user-select:none}
.jpBackdrop .jpKanji{position:absolute;right:-3vw;bottom:-9vh;font-family:var(--fx-font-jp);font-size:min(78vh,52vw);line-height:.9;color:transparent;
  -webkit-text-stroke:3px var(--jp-stroke);animation:jpIn .6s cubic-bezier(.2,.8,.2,1) both}
.jpBackdrop .jpKana{position:absolute;top:118px;right:26px;writing-mode:vertical-rl;font-family:var(--fx-font-jp);font-size:min(9vh,70px);letter-spacing:.06em;color:var(--jp-fill);
  animation:jpIn .6s .08s cubic-bezier(.2,.8,.2,1) both}
.jpBackdrop .jpIndex{position:absolute;left:30px;bottom:26px;font-family:var(--fx-font-mono);font-size:12px;letter-spacing:.3em;color:var(--jp-stroke);text-transform:uppercase}
@keyframes jpIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.main{position:relative}
.main>.top,.main>.view{position:relative;z-index:1}
.jpTitle{display:inline-block;margin-left:12px;padding:3px 8px 4px;font-family:var(--fx-font-jp);font-size:13px;letter-spacing:.08em;vertical-align:middle;
  color:var(--fx-page);background:var(--br-ink)}
.jpTitle b{font-family:var(--fx-font-mono);font-weight:700;color:#ff5c61;margin-right:7px;font-size:11px;letter-spacing:.1em}

/* ---- barra lateral: katakana na vertical ---- */
.sidebar{overflow:hidden}
.sidebarKana{position:absolute;right:10px;top:150px;writing-mode:vertical-rl;font-family:var(--fx-font-jp);font-size:34px;letter-spacing:.12em;
  color:transparent;-webkit-text-stroke:1px rgba(229,56,59,.35);pointer-events:none;user-select:none}
.nav{position:relative;z-index:1}
.nav button{counter-increment:navIndex}
.nav{counter-reset:navIndex}
.nav button::before{content:counter(navIndex,decimal-leading-zero);font-family:var(--fx-font-mono);font-size:10px;letter-spacing:.1em;color:#8a7479;margin-right:10px}
.nav button.active::before{color:#ff5c61}

/* ---- tipografia brutal ---- */
.top h1{font-size:36px;letter-spacing:-.01em;text-transform:uppercase}
.eyebrow,.shopProductType,.tierTag,.brandTag,.plan small,.shopDemoLabel,.stat span{font-family:var(--fx-font-mono)!important;letter-spacing:.14em!important}
h2{letter-spacing:-.01em}
.panel h3,.shopSectionHead h3{text-transform:uppercase}

/* ---- superfícies: traço grosso + sombra dura ---- */
.stat,.panel,.toolbar,.group,.pdEraHead,.billingCard,.priceBox,.wishlistNotice,.wishlistEmpty{
  border:var(--br-line) solid var(--br-ink)!important;border-radius:0!important;box-shadow:6px 6px 0 var(--br-shadow)!important}
.card,.setTile,.shopProduct{border:var(--br-line) solid var(--br-ink)!important;border-radius:0!important;box-shadow:5px 5px 0 var(--br-shadow)!important;
  transition:transform .12s,box-shadow .12s!important}
.card:hover,.setTile:hover,.shopProduct:hover{transform:translate(-3px,-3px)!important;box-shadow:8px 8px 0 var(--br-shadow)!important;border-color:var(--br-ink)!important}
.modalbox{border:3px solid var(--br-ink)!important;border-radius:0!important;box-shadow:10px 10px 0 var(--fx-red)!important}
input,select,textarea{border:var(--br-line) solid var(--br-ink)!important;border-radius:0!important}
input:focus,select:focus,textarea:focus{box-shadow:4px 4px 0 var(--fx-red)!important}

/* ---- botões: blocos que afundam ---- */
.btn{clip-path:none!important;border:var(--br-line) solid var(--br-ink)!important;box-shadow:4px 4px 0 var(--br-shadow)!important;filter:none!important;
  transition:transform .08s,box-shadow .08s!important}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--br-shadow)!important}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--br-shadow)!important}
.btn.primary{background:#c1272d!important}
.btn.primary:disabled{transform:none;box-shadow:4px 4px 0 var(--br-shadow)!important}
.btn.secondary{background:var(--surface)!important;box-shadow:4px 4px 0 var(--br-shadow)!important}
.sidebar .btn{border-color:#f1e4e6!important;box-shadow:4px 4px 0 #c1272d!important}
.fxHero .btn{border-color:#f1e4e6!important;box-shadow:4px 4px 0 #000!important}
.fxHero .btn.secondary{background:transparent!important}

/* ---- separadores: régua de blocos ---- */
.periods,.collectionMode,.addTabs,.segmented,.setLanguageSwitch,.collectionTypeSwitch{clip-path:none!important;border:var(--br-line) solid var(--br-ink)!important;padding:0!important;gap:0!important;background:var(--surface)!important;box-shadow:4px 4px 0 var(--br-shadow)}
.periods button,.collectionMode button,.addTabs button,.segmented button,.setLanguageSwitch button,.collectionTypeSwitch button{border-right:var(--br-line) solid var(--br-ink)!important;padding:10px 14px!important}
.periods button:last-child,.collectionMode button:last-child,.addTabs button:last-child,.segmented button:last-child,.setLanguageSwitch button:last-child,.collectionTypeSwitch button:last-child{border-right:0!important}
.periods button.active,.collectionMode button.active,.addTabs button.active,.addTabs button[aria-selected="true"],.segmented button.active,.setLanguageSwitch button.active,.collectionTypeSwitch button.active{
  background:var(--br-ink)!important;color:var(--fx-page)!important;box-shadow:inset 0 -4px 0 #c1272d!important}
.themeToggle,.chip{clip-path:none!important;border:var(--br-line) solid var(--br-ink)!important;border-radius:0!important;box-shadow:3px 3px 0 var(--br-shadow)!important}

/* ---- hero da loja: faixa de aviso industrial ---- */
.fxHero{clip-path:none!important;border:3px solid var(--br-ink)!important;box-shadow:8px 8px 0 var(--fx-red)!important;padding-top:34px!important}
.fxHero::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;z-index:1;
  background:repeating-linear-gradient(-45deg,#c1272d 0 14px,#150b0e 14px 28px)}
.fxHero .shopHeroVisual{position:relative}
.fxHero .shopHeroVisual::before{content:none;position:absolute;font-family:var(--fx-font-jp);font-size:260px;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,92,97,.35);z-index:0}
.fxHero .shopHeroVisual img{position:relative;z-index:1}
.shopTierLegend .tier{clip-path:none!important;border-width:2px!important}

/* ---- produtos numerados como catálogo ---- */
.shopProductGrid{counter-reset:product}
.shopProduct{counter-increment:product;position:relative}
.shopProduct::before{content:"No." counter(product,decimal-leading-zero);position:absolute;top:0;left:0;z-index:2;padding:4px 8px;
  font-family:var(--fx-font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;background:#c1272d;color:#fff}
.shopProductImage{border-bottom:var(--br-line) solid var(--br-ink)}
.shopPrice strong{font-size:26px}

/* ---- telemóvel ---- */
@media(max-width:760px){
  .jpBackdrop{left:0}
  .jpBackdrop .jpKanji{font-size:88vw;bottom:10vh;right:-12vw}
  .jpBackdrop .jpKana{top:92px;right:8px;font-size:34px}
  .jpBackdrop .jpIndex{display:none}
  .top h1{font-size:26px}
  .jpTitle{font-size:11px;margin-left:8px}
  .mobileBottomNav{border-top:var(--br-line) solid var(--br-ink)!important}
  .card,.setTile,.shopProduct{box-shadow:3px 3px 0 var(--br-shadow)!important}
}
@media (prefers-reduced-motion:reduce){.jpBackdrop *{animation:none!important}}

/* ---- acertos de especificidade e cabeçalho ---- */
.pdEra .setTile{border:var(--br-line) solid var(--br-ink)!important;border-radius:0!important;box-shadow:5px 5px 0 var(--br-shadow)!important;transition:transform .12s,box-shadow .12s!important}
.pdEra .setTile:hover{transform:translate(-3px,-3px)!important;box-shadow:8px 8px 0 var(--br-shadow)!important;border-color:var(--br-ink)!important}
.top{height:auto!important;min-height:105px;padding:14px 0 16px;align-items:flex-start!important}
.top>div:first-child{padding-top:4px}
@media(max-width:760px){.pdEra .setTile{box-shadow:3px 3px 0 var(--br-shadow)!important}.top{min-height:0;padding:10px 0 12px}}
.premiumHero{border:3px solid var(--br-ink)!important;border-radius:0!important;box-shadow:8px 8px 0 var(--fx-red)!important}
.popular,.navSoon,.shopBadge{border-radius:0!important;font-family:var(--fx-font-mono)!important;letter-spacing:.1em}
:root{--jp-num:#ff5c61}
:root[data-theme="dark"]{--jp-num:#b0181f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--jp-num:#b0181f}}
.jpTitle b{color:var(--jp-num)}
@media(max-width:760px){
  .collectionTypeSwitch{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--br-line)!important;background:var(--br-ink)!important}
  .collectionTypeSwitch button{border:0!important;background:var(--surface)!important;padding:11px 4px!important;font-size:11px}
  .collectionTypeSwitch button.active{background:var(--br-ink)!important}
}

/* ---- loja v1.23: capas por categoria e fila de categorias ---- */
.shopArt{position:relative;overflow:hidden;display:flex!important;flex-direction:column;align-items:flex-start!important;justify-content:flex-end!important;padding:14px;gap:4px;
  background:repeating-linear-gradient(-45deg,rgba(193,39,45,.10) 0 10px,transparent 10px 20px),radial-gradient(circle at 70% 25%,rgba(229,56,59,.35),transparent 60%),#140a0d!important}
.shopArt .artJp{position:absolute;right:-4px;top:6px;writing-mode:vertical-rl;font-family:var(--fx-font-jp);font-size:44px;line-height:1;letter-spacing:.02em;color:#c1272d;text-shadow:3px 3px 0 #000}
.shopArt-tin .artJp{font-size:92px;writing-mode:horizontal-tb;right:10px;top:0}
.shopArt .artJp,.shopArt .artCat{border-radius:0!important;box-shadow:none!important;background-color:transparent}
.shopArt .artJp{border:0!important;padding:0!important;background:none!important;font-size:min(46px,calc(170px / var(--jp-n,4)))!important}
.shopArt-tin .artJp{font-size:92px!important}
.shopArt .artCat{position:relative;z-index:1;font-family:var(--fx-font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:#150b0e;padding:4px 7px;border:2px solid #f1e4e6}
.shopCats{display:flex;flex-wrap:wrap;gap:8px;margin:-2px 0 16px}
.shopCats:empty{display:none}
.shopCats button{font-family:var(--fx-font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:7px 11px;
  border:2px solid var(--br-ink);background:var(--surface);color:var(--text);box-shadow:3px 3px 0 var(--br-shadow)}
.shopCats button.active{background:#c1272d;color:#fff;border-color:var(--br-ink)}
.shopCats button:active{transform:translate(3px,3px);box-shadow:none}