/* Proposta B — capa visual independent, sense modificar els estats ni els fitxers de dades. */
*{box-sizing:border-box}body.demo-b{background:#161b22!important;background-image:none!important;color:#f5f6fa;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}.demo-sidebar{position:fixed;left:0;top:0;bottom:0;width:250px;background:#141920;border-right:1px solid #2a3240;z-index:99;padding:25px 13px;display:flex;flex-direction:column}.demo-brand{text-decoration:none;color:#fff;display:flex;align-items:center;gap:15px;padding:0 13px 33px}.demo-brand strong{display:block;font-size:21px}.demo-brand small{display:block;font-size:11px;color:#aeb5c3;margin-top:5px}.demo-brand-icon{font-size:43px;color:#ff3f72;font-weight:800}.demo-nav{display:flex;flex-direction:column;gap:7px}.demo-nav a{display:flex;gap:13px;align-items:center;color:#cdd3e0;text-decoration:none;padding:12px 15px;border-radius:10px;font-size:15px}.demo-nav a:hover,.demo-nav a.active{color:#ff507d;background:linear-gradient(90deg,#472432,#30232d)}.demo-nav a:first-letter{font-size:23px}.demo-side-title{color:#b9c0cb;font-size:13px;padding:32px 15px 12px}.demo-sidebar-foot{margin-top:auto;padding:22px 12px;border-top:1px solid #323945;color:#aeb5c2;font-size:12px}.demo-page{margin-left:250px;min-height:100vh;padding:0 24px 60px}.demo-top{height:74px;display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:1580px;margin:auto}.demo-top-back{text-decoration:none;color:#c2cad7;border:1px solid #384250;padding:9px 14px;border-radius:10px}.demo-top-label{font-size:11px;color:#7e899c;letter-spacing:2px}.demo-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#303b4f;color:#d5e0f6;font-size:12px}.demo-mobile-brand{display:none}.demo-b .container-main{max-width:1580px!important;width:100%!important;margin:0 auto!important;padding:0!important}.demo-b .top-banner{max-width:none!important;margin:0!important;height:230px;overflow:hidden;border:1px solid #3a4556;border-radius:15px 15px 0 0;position:relative;background:#2a2e39}.demo-b .top-banner img{height:100%;width:100%;object-fit:cover;object-position:center 43%;border-radius:0}.demo-b .container-main>h1{position:relative;z-index:2;text-align:left!important;margin:-72px 0 0!important;padding:12px 30px 19px;font-size:clamp(27px,3vw,42px)!important;text-shadow:0 2px 13px #000;justify-content:flex-start!important;min-height:76px}.demo-b .container-main>h1 .ongoing-indicator{margin-left:10px}.demo-b .filters{justify-content:flex-start!important;margin:15px 0!important}.demo-b .search-container{max-width:none!important;margin:18px 0!important}.demo-b .search-input{width:100%;background:#242b36!important;border:1px solid #404d60!important;color:white!important;border-radius:12px!important}.demo-b .filter-btn.active,.demo-b .filter-btn:hover{background:#ff386d!important;border-color:#ff386d!important}.demo-b .collections-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(172px,1fr))!important;gap:18px!important;align-items:start;justify-content:unset!important;padding:5px 0 35px!important}.demo-b .collection-card{width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;display:flex!important;flex-direction:column;overflow:hidden!important;border:1px solid #38414e!important;border-radius:12px!important;background:#20262f!important;padding:6px!important;position:relative}.demo-b .collection-card>img{width:100%!important;height:230px!important;object-fit:contain!important;background:#141820;border-radius:7px!important}.demo-b .collection-card .card-info{padding:10px 6px!important;position:static!important;background:transparent!important;display:block!important}.demo-b .collection-card .card-name{font-size:14px!important;font-weight:650;line-height:1.4;display:block}.demo-b .delete-btn{z-index:4;opacity:0}.demo-b .collection-card:hover .delete-btn{opacity:1}.demo-detail .top-banner{height:310px;border-radius:15px}.demo-detail .container-main>h1{margin:-100px 0 0!important;padding-bottom:25px;min-height:108px}.demo-detail .demo-detail-content{position:relative;z-index:1}.demo-detail .stats-bar{display:flex!important;justify-content:flex-start!important;gap:16px!important;margin:0 0 16px!important;padding:14px 20px!important;border:1px solid #394454;border-radius:0 0 14px 14px;background:#1d242e!important;min-height:0!important}.demo-detail .stat{min-width:80px!important}.demo-detail .stat.circle{transform:scale(.73);margin:-12px -10px!important}.demo-tabs{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:24px 0 18px;padding-bottom:12px;border-bottom:1px solid #354050}.demo-tab,.demo-view{cursor:pointer;border:0;background:transparent;color:#b7c2d2;padding:11px 14px;border-radius:9px;font-size:14px}.demo-tab:hover,.demo-tab.active,.demo-view.active{background:#ff386d;color:white}.demo-tabs-spacer{flex:1}.demo-sort-label{font-size:12px;color:#9ea8b8}.demo-sort-label select{margin-left:6px;color:#e4e8f0;background:#29313e;border:1px solid #465062;border-radius:8px;padding:10px}.demo-panel{display:none}.demo-panel.active{display:block}.demo-detail .cards-section{padding:0!important;margin:0!important;width:100%!important;max-width:none!important}.demo-detail .cards-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(157px,1fr))!important;gap:16px!important;justify-content:unset!important;align-items:start!important;max-width:none!important}.demo-detail .card-item{position:relative;width:100%!important;min-width:0!important;height:auto!important;margin:0!important;padding:7px!important;background:#20262f!important;border:1px solid #3b4654!important;border-radius:12px!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}.demo-detail .card-item>img{width:100%!important;height:235px!important;max-height:none!important;object-fit:contain!important;background:#121720!important;border-radius:7px!important;cursor:zoom-in}.demo-detail .card-number{position:static!important;order:1!important;background:none!important;color:#fff!important;text-align:left!important;padding:10px 5px 6px!important;font-weight:700!important;font-size:15px!important;width:auto!important;transform:none!important}.demo-detail .card-number:before{content:'Vol. ';font-weight:500}.demo-detail .card-note{order:2!important;background:#171d25!important;border:1px solid #3b4554!important;border-radius:6px!important;text-align:left!important;font-size:12px!important;margin:0 0 8px!important;color:#dde3ed!important}.demo-detail .card-btn{position:static!important;order:3!important;width:100%!important;margin:0!important;height:37px!important;border-radius:8px!important;background:#343c49!important;border:1px solid #465160!important}.demo-detail .card-btn.owned{background:#20503a!important;border-color:#2d6c4e!important}.demo-detail .btn-main{height:100%!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;cursor:pointer}.demo-detail .btn-main:after{content:'No el tinc';font-size:12px;color:#e4e9f2!important}.demo-detail .card-btn.owned .btn-main:after{content:'El tinc';color:#88ffc0!important}.demo-detail .btn-main svg{width:17px!important;height:17px!important;fill:currentColor!important}.demo-info{background:#202732;border:1px solid #384355;border-radius:12px;padding:25px;margin-top:12px;line-height:1.7}.demo-meter{height:10px;max-width:450px;background:#384252;border-radius:12px;overflow:hidden}.demo-meter div{height:100%;background:#ff386d;width:0}.demo-detail.demo-list-view .cards-grid{grid-template-columns:1fr!important}.demo-detail.demo-list-view .card-item{display:grid!important;grid-template-columns:68px 95px minmax(120px,1fr) minmax(115px,180px);align-items:center;gap:13px}.demo-detail.demo-list-view .card-item>img{height:90px!important;grid-row:1;grid-column:1}.demo-detail.demo-list-view .card-number{grid-column:2;grid-row:1}.demo-detail.demo-list-view .card-note{grid-column:3;grid-row:1;margin:0!important}.demo-detail.demo-list-view .card-btn{grid-column:4;grid-row:1}.demo-b button:focus-visible,.demo-b a:focus-visible{outline:2px solid #ff668e;outline-offset:3px}@media(max-width:900px){.demo-sidebar{width:68px;padding:18px 6px}.demo-brand{padding:0 5px 24px}.demo-brand-icon{font-size:34px}.demo-brand span:last-child,.demo-nav a span,.demo-side-title,.demo-sidebar-foot{display:none}.demo-nav a{justify-content:center;padding:12px 6px;font-size:22px}.demo-page{margin-left:68px;padding:0 13px 35px}.demo-b .top-banner{height:170px}.demo-detail .top-banner{height:190px}.demo-b .collections-grid{grid-template-columns:repeat(auto-fill,minmax(135px,1fr))!important}.demo-detail .cards-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))!important}.demo-detail .card-item>img{height:195px!important}}@media(max-width:550px){.demo-sidebar{display:none}.demo-page{margin-left:0;padding:0 10px 25px}.demo-mobile-brand{display:block;color:#ff527d;text-decoration:none;font-weight:700}.demo-top{height:56px}.demo-top-back,.demo-top-label{display:none}.demo-b .container-main>h1{font-size:27px!important;padding-left:15px}.demo-detail .card-item>img{height:190px!important}.demo-detail.demo-list-view .card-item{grid-template-columns:55px 65px minmax(60px,1fr) 95px;gap:5px}.demo-detail.demo-list-view .card-item>img{height:72px!important}.demo-detail .stats-bar{gap:4px!important;padding:7px!important}.demo-detail .stat{min-width:65px!important}.demo-tabs{gap:3px}.demo-tab{font-size:12px;padding:9px 7px}}

/* Proposta B 1.1: el menú lateral és l'únic filtre de categoria. */
.demo-home .filters{display:none!important}
.demo-home .collection-card[hidden]{display:none!important}
.demo-home #demo-empty-results[hidden]{display:none!important}
.demo-collection-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:15px 0 5px}
.demo-collection-toolbar h2{font-size:19px;margin:0;color:#f4f5fa}
.demo-ongoing-toggle{display:inline-flex;align-items:center;gap:9px;border:1px solid #455163;background:#242b36;color:#d9e1ee;padding:10px 16px;border-radius:10px;cursor:pointer;font-size:14px}
.demo-ongoing-toggle:hover,.demo-ongoing-toggle.active{background:#ff386d;border-color:#ff386d;color:white}
#demo-empty-results{padding:32px;text-align:center;color:#c0cada;border:1px dashed #485364;border-radius:12px}
@media(max-width:550px){.demo-collection-toolbar h2{font-size:16px}.demo-ongoing-toggle{padding:9px;font-size:12px}}

/* Proposta B 1.2: capçalera mínima i cerca desplegable. */
.demo-b .demo-top{position:relative;justify-content:center;height:58px}
.demo-b .demo-top-label{display:block!important;flex:0 0 auto;color:#aab5c5;font-size:12px;letter-spacing:2px;text-align:center}
.demo-b .demo-top-back,.demo-b .demo-avatar{display:none!important}
.demo-home .container-main>h1{display:none!important}
.demo-home .demo-collection-toolbar{justify-content:center;margin:24px 0 20px}
.demo-home .demo-collection-toolbar h2{text-align:center;font-size:21px}
.demo-home #demo-search-panel{width:min(100%,660px)!important;max-width:660px!important;margin:0 auto 24px!important}
.demo-home #demo-search-panel[hidden]{display:none!important}
.demo-home .search-input{width:100%!important}
.demo-home .collection-card .card-info{width:100%;min-width:0;display:flex!important;flex-direction:column;justify-content:space-between;align-items:center;gap:8px;min-height:78px;padding:10px 6px 9px!important}
.demo-home .collection-card .card-name{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden!important;text-overflow:ellipsis;white-space:normal!important;overflow-wrap:anywhere;line-height:1.4!important;font-size:14px!important;height:2.8em;max-height:2.8em;width:100%;text-align:center}
.demo-home .collection-card .card-stats{flex:none;margin:0!important;min-height:20px;display:flex;align-items:center;justify-content:center}
.demo-home .collection-card>img{height:230px!important;flex:0 0 230px;object-fit:contain!important}
.demo-home .collections-grid{align-items:stretch!important}
.demo-home .collection-card{height:100%!important}
@media(max-width:900px){.demo-home .collection-card>img{height:195px!important;flex-basis:195px}}
@media(max-width:550px){.demo-b .demo-top{height:56px}.demo-b .demo-top-label{font-size:11px}.demo-home #demo-search-panel{width:90%!important}}

/* MyWhakhoom: exclusivament presentació mòbil; el disseny desktop >900px es conserva. */
.mw-mobile-nav,.mw-mobile-categories,.mw-mobile-category-overlay{display:none}
@media(max-width:900px){
 .demo-b .demo-sidebar{display:none!important}
 .demo-b .demo-page{margin-left:0!important;padding:0 12px calc(105px + env(safe-area-inset-bottom,0px))!important}
 .demo-b .demo-top{height:50px!important}
 .demo-b .demo-mobile-brand{display:none!important}
 .demo-b .demo-top-label{display:block!important}
 .demo-b .top-banner{height:120px!important;border-radius:11px!important}
 .demo-b .top-banner img{object-fit:cover!important}
 .demo-home .demo-collection-toolbar{margin:16px 0!important}
 .demo-home .demo-collection-toolbar h2{font-size:20px!important}
 .demo-home .collections-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;padding-bottom:30px!important}
 .demo-home .collection-card{min-width:0!important;padding:5px!important}
 .demo-home .collection-card>img{width:100%!important;height:auto!important;aspect-ratio:2/3;flex:0 0 auto!important;object-fit:contain!important}
 .demo-home .collection-card .card-name{font-size:12px!important}
 .demo-home .collection-card .card-info{padding:8px 3px!important;min-height:70px!important}
 .demo-home #demo-search-panel{width:min(100%,420px)!important;max-width:420px!important}
 .demo-detail .top-banner{height:145px!important}
 .demo-detail .container-main>h1{margin:-57px 0 0!important;min-height:65px!important;font-size:23px!important;padding:8px 12px 14px!important}
 .demo-detail .stats-bar{flex-wrap:wrap;justify-content:center!important}
 .demo-detail .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .demo-detail .card-item>img{width:100%!important;height:auto!important;aspect-ratio:2/3;object-fit:contain!important}
 .demo-detail .demo-tabs{flex-wrap:wrap;gap:4px!important}
 .demo-detail .demo-tab,.demo-detail .demo-view{font-size:12px;padding:9px 8px}
 .demo-detail.demo-list-view .card-item{display:flex!important;flex-direction:column!important}
 .demo-detail.demo-list-view .card-item>img{height:auto!important;aspect-ratio:2/3}
 .demo-detail.demo-list-view .card-number,.demo-detail.demo-list-view .card-note,.demo-detail.demo-list-view .card-btn{grid-column:auto;grid-row:auto;width:100%!important}
 .mw-mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;left:0;right:0;bottom:0;z-index:1002;padding:7px 5px calc(8px + env(safe-area-inset-bottom,0px));background:#181f29;border-top:1px solid #3c4655;box-shadow:0 -6px 24px #0007}
 .mw-mobile-nav a,.mw-mobile-nav button{min-width:0;min-height:53px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;text-decoration:none;border:0;border-radius:9px;color:#cbd3e2;background:transparent;cursor:pointer;font:inherit}
 .mw-mobile-nav a>span,.mw-mobile-nav button>span{font-size:23px;line-height:1.1}
 .mw-mobile-nav small{font-size:10px;line-height:1.2;white-space:nowrap}
 .mw-mobile-nav .active{color:#ff507d!important;background:#432534!important}
 .mw-mobile-category-overlay:not([hidden]){display:block;position:fixed;inset:0;z-index:1000;background:#000a}
 .mw-mobile-categories:not([hidden]){display:block;position:fixed;left:0;right:0;bottom:calc(68px + env(safe-area-inset-bottom,0px));z-index:1001;background:#202833;border:1px solid #465266;border-radius:18px 18px 0 0;padding:17px 16px 20px;box-shadow:0 -10px 40px #0008}
 .mw-mobile-categories-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-size:18px}
 .mw-mobile-categories-close{color:#d8e0ec;background:#343d4b;border:0;border-radius:9px;padding:9px 13px;font-size:16px}
 .mw-mobile-categories-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .mw-mobile-categories-grid a{color:#f1f3f7;text-decoration:none;background:#313b4a;border:1px solid #4b5768;border-radius:10px;padding:14px;text-align:center;font-size:14px}
 .mw-mobile-categories-grid a.active{background:#ff386d;border-color:#ff386d;color:white}
 .demo-b .delete-btn{opacity:1}
}
@media(max-width:360px){.mw-mobile-nav small{font-size:9px}.demo-b .demo-page{padding-left:7px!important;padding-right:7px!important}}

/* Revisió: logo PNG original i detall intacte (markup funcional, sense eliminar nodes). */
.demo-sidebar .demo-brand{padding:0 12px 30px!important;display:flex!important;justify-content:center;align-items:center}
.demo-sidebar .mw-original-logo{display:block;width:100%;max-width:180px;height:auto;object-fit:contain}
.demo-sidebar-foot{display:none!important}
/* Ocultar només la barra de pestanyes i no el panell que conté les portades. */
.demo-detail .demo-tabs{display:none!important}
.demo-detail #demo-panel-volums{display:block!important}
.demo-detail .stats-bar{justify-content:center!important;gap:35px!important}
.demo-detail .stats-bar .stat{min-width:70px!important}
.demo-detail .cards-grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr))!important}
.demo-detail .cards-section{padding-top:24px!important}
.demo-detail .demo-page{padding-top:0!important}
.demo-detail .demo-top{display:none!important}
.demo-detail .container-main>h1{justify-content:flex-start!important;text-align:left!important}
@media(max-width:900px){
 .demo-detail .demo-top{display:flex!important}
 .demo-detail .stats-bar{gap:8px!important}
 .demo-detail .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}


/* Ajustos finals: logo SVG original i centrament de les targetes de detall */
.demo-sidebar .mw-original-logo{max-width:162px!important}
.demo-detail .cards-grid{
  grid-template-columns:repeat(auto-fit,minmax(155px,155px))!important;
  justify-content:center!important;
  justify-items:stretch!important;
}
.demo-detail .card-item{width:155px!important}
.demo-detail .card-btn,.demo-detail .btn-main{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
.demo-detail .btn-main{padding:0 8px!important}
@media(max-width:900px){
  .demo-detail .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;justify-content:unset!important}
  .demo-detail .card-item{width:100%!important}
  .demo-sidebar .mw-original-logo{max-width:146px!important}
}

/* El botó de supressió només es troba dins del detall, mai a la galeria. */
.demo-home .delete-btn{display:none!important}
.demo-detail .stats-bar{position:relative!important}
.demo-detail .mw-delete-collection{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:40px;padding:8px 12px;border-radius:9px;
  color:#e9edf5;border:1px solid #536072;background:#29333f;
  font-size:12px;cursor:pointer;white-space:nowrap;
}
.demo-detail .mw-delete-collection:hover{background:#632b3d;border-color:#f15d83}
.demo-detail .mw-delete-collection:disabled{opacity:.55;cursor:wait}
.demo-detail .mw-delete-collection>span:first-child{color:#ff507d;font-size:19px;line-height:1}
@media(max-width:900px){
  .demo-detail .stats-bar{padding-right:55px!important}
  .demo-detail .mw-delete-collection{right:8px;padding:9px;min-width:36px}
  .demo-detail .mw-delete-label{display:none}
}


/* MyWhakhoom: marca SVG i controls de col·lecció, versió corregida */
.demo-b .demo-sidebar .demo-brand{position:relative!important;min-height:92px!important;padding:0 12px 30px!important;display:flex!important;align-items:flex-start!important;justify-content:center!important}
.demo-b .demo-sidebar .mw-original-logo{display:block!important;position:relative!important;z-index:120!important;width:100%!important;max-width:162px!important;height:auto!important;max-height:75px!important;object-fit:contain!important;opacity:1!important;visibility:visible!important;filter:none!important}
.demo-detail .stats-bar{position:relative!important;justify-content:center!important;padding-right:200px!important;padding-left:200px!important}
.demo-detail .mw-delete-collection,.demo-detail .mw-follow-collection{position:absolute!important;right:16px!important;transform:none!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;min-width:143px!important;min-height:37px!important;padding:7px 9px!important;border-radius:9px!important;border:1px solid #536072!important;background:#29333f!important;color:#e9edf5!important;font-size:12px!important;line-height:1.2!important;cursor:pointer!important;white-space:nowrap!important}
.demo-detail .mw-delete-collection{top:calc(50% - 40px)!important}
.demo-detail .mw-follow-collection{top:calc(50% + 3px)!important}
.demo-detail .mw-delete-collection:hover{background:#542c3b!important;border-color:#f15d83!important}
.demo-detail .mw-follow-collection:hover,.demo-detail .mw-follow-collection.ongoing-active{background:#234638!important;border-color:#398b71!important}
.demo-detail .mw-action-icon{width:18px!important;height:18px!important;flex:none!important;object-fit:contain!important}
.demo-detail .mw-follow-icon{width:19px!important;height:19px!important}
.demo-detail .mw-delete-collection:disabled,.demo-detail .mw-follow-collection:disabled{opacity:.55!important;cursor:wait!important}
@media(max-width:900px){
 .demo-detail .stats-bar{padding-right:100px!important;padding-left:8px!important}
 .demo-detail .mw-delete-collection,.demo-detail .mw-follow-collection{right:7px!important;min-width:38px!important;width:38px!important;height:37px!important;padding:6px!important}
 .demo-detail .mw-delete-label,.demo-detail .mw-follow-label{display:none!important}
 .demo-detail .mw-delete-collection{top:calc(50% - 40px)!important}
 .demo-detail .mw-follow-collection{top:calc(50% + 3px)!important}
}
@media(max-width:550px){.demo-detail .stats-bar{gap:3px!important;padding-right:47px!important;padding-left:4px!important}.demo-detail .stat{min-width:56px!important}}

/* Ajust fi del contingut del botó de propietat: icona i text més a l'esquerra, amb menys separació. */
.demo-detail .card-btn .btn-main { gap: 3px !important; }
.demo-detail .card-btn .btn-main svg,
.demo-detail .card-btn .btn-main::after { position: relative !important; left: -9px !important; }

/* MyWhakhoom: capçalera comuna a biblioteca i fitxa de qualsevol col·lecció.
   Anul·la la regla antiga que amagava la capçalera només a les fitxes. */
body.demo-b .demo-page > .demo-top,
body.demo-b.demo-detail .demo-page > .demo-top {
    display: flex !important;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1580px;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 auto;
    padding: 0;
}
body.demo-b .demo-page > .demo-top .demo-top-label {
    display: block !important;
    flex: 0 0 auto;
    text-align: center;
}
@media (max-width: 900px) {
    body.demo-b .demo-page > .demo-top,
    body.demo-b.demo-detail .demo-page > .demo-top {
        height: 50px !important;
        min-height: 50px !important;
    }
}

/* Bàners: proporció natural, sense escapçar-ne el contingut.
   La regla s'aplica tant a la biblioteca com a les fitxes, a PC i a mòbil.
   Es deixa al final per anul·lar les antigues alçades fixes de 230/310/120/145 px. */
body.demo-b .container-main .top-banner {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: 15px !important;
}
body.demo-b .container-main .top-banner > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    border-radius: 0 !important;
}
@media (max-width: 900px) {
    body.demo-b .container-main .top-banner {
        height: auto !important;
        border-radius: 11px !important;
    }
    body.demo-b .container-main .top-banner > img {
        height: auto !important;
        object-fit: contain !important;
    }
}


/* Títol de categoria: PNG originals (Marvel, DC, Omnibus, Manga i Altres). */
.demo-home .demo-collection-toolbar #demo-filter-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px;
}
.demo-home .demo-collection-toolbar .mw-category-heading-image {
    display: block;
    width: auto;
    height: 34px;
    max-width: min(86vw, 260px);
    object-fit: contain;
}
@media (max-width: 900px) {
    .demo-home .demo-collection-toolbar .mw-category-heading-image {
        height: 29px;
        max-width: min(80vw, 220px);
    }
}

/* Logotips de categoria: +50% mantenint proporció i centrament. */
.demo-home .demo-collection-toolbar #demo-filter-heading { min-height: 51px !important; }
.demo-home .demo-collection-toolbar .mw-category-heading-image { height: 51px !important; max-width: min(86vw, 390px) !important; width: auto !important; object-fit: contain !important; }
@media (max-width: 900px) {
 .demo-home .demo-collection-toolbar #demo-filter-heading { min-height: 44px !important; }
 .demo-home .demo-collection-toolbar .mw-category-heading-image { height: 43.5px !important; max-width: min(80vw, 330px) !important; }
}


/* MyWhakhoom: dos controls de col·lecció amb la mateixa geometria. */
.demo-detail .mw-delete-collection,
.demo-detail .mw-follow-collection {
    box-sizing: border-box!important;
    width: 143px!important;
    min-width: 143px!important;
    max-width: 143px!important;
    height: 37px!important;
    min-height: 37px!important;
    right: 16px!important;
    margin: 0!important;
    padding: 7px 8px!important;
    display: flex!important;
    flex-direction: row!important;
    align-items: center!important;
    justify-content: center!important;
    text-align: center!important;
    gap: 5px!important;
    white-space: nowrap!important;
}
.demo-detail .mw-follow-collection{top:calc(50% + 3px)!important}
.demo-detail .mw-delete-collection{top:calc(50% - 40px)!important}
.demo-detail .mw-delete-collection .mw-delete-label,
.demo-detail .mw-follow-collection .mw-follow-label {
    display:inline!important;
    font-size:12px!important;
    line-height:1!important;
    white-space:nowrap!important;
}
.demo-detail .mw-delete-collection .mw-action-icon,
.demo-detail .mw-follow-collection .mw-action-icon {
    flex:0 0 17px!important;
    width:17px!important;
    height:17px!important;
    margin:0!important;
}
/* El número i l'estrella comparteixen la mateixa línia, sense afectar la nota. */
.demo-detail .mw-volume-heading {
    display:flex!important;
    width:100%!important;
    align-items:center!important;
    justify-content:space-between!important;
    order:1!important;
    min-height:39px;
    gap:5px;
}
.demo-detail .mw-volume-heading .card-number {
    margin:0!important;
    flex:1 1 auto!important;
    order:0!important;
    min-width:0!important;
}
.demo-detail .mw-wish-star {
    flex:0 0 28px!important;
    width:28px!important;
    height:32px!important;
    min-width:28px!important;
    display:inline-flex!important;
    justify-content:center!important;
    align-items:center!important;
    border:0!important;
    background:transparent!important;
    color:#d7dce5!important;
    padding:3px!important;
    margin:0!important;
    cursor:pointer;
    border-radius:6px;
}
.demo-detail .mw-wish-star svg {
    width:21px!important;
    height:21px!important;
    fill:currentColor!important;
    stroke:currentColor!important;
    stroke-width:0.5!important;
}
.demo-detail .mw-wish-star.is-wished{color:#f5bf38!important}
.demo-detail .mw-wish-star:hover{background:#394452!important}
.demo-detail .mw-wish-star:disabled{opacity:.55;cursor:wait}
@media(max-width:900px){
 .demo-detail .mw-delete-collection,.demo-detail .mw-follow-collection{
   width:38px!important;min-width:38px!important;max-width:38px!important;
   height:37px!important;min-height:37px!important;right:7px!important;padding:6px!important
 }
 .demo-detail .mw-delete-label,.demo-detail .mw-follow-label{display:none!important}
 .demo-detail .mw-wish-star{flex-basis:32px!important;width:32px!important;min-width:32px!important;height:35px!important}
}

/* ===== Ajust final 2026-09-24: estrella outline + botons accions alineats ===== */

/* 1) Estrella buida quan NO està marcada; daurada i plena quan està marcada */
.demo-detail .mw-wish-star {
    color: #d6dde8 !important;
    background: transparent !important;
}
.demo-detail .mw-wish-star svg {
    width: 21px !important;
    height: 21px !important;
    fill: transparent !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linejoin: round !important;
    stroke-linecap: round !important;
}
.demo-detail .mw-wish-star.is-wished {
    color: #f5bf38 !important;
}
.demo-detail .mw-wish-star.is-wished svg {
    fill: currentColor !important;
    stroke: currentColor !important;
    stroke-width: 1.15 !important;
}
.demo-detail .mw-wish-star:hover {
    background: #394452 !important;
}

/* 2) Botons d'acció: mateixa amplada, mateix padding i contingut alineat a l'esquerra */
.demo-detail .mw-collection-actions {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
}

.demo-detail .mw-delete-collection,
.demo-detail .mw-follow-collection {
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
    width: 152px !important;
    min-width: 152px !important;
    max-width: 152px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    display: grid !important;
    grid-template-columns: 21px 1fr !important;
    column-gap: 8px !important;
    align-items: center !important;
    justify-content: start !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.demo-detail .mw-delete-collection .mw-action-icon,
.demo-detail .mw-follow-collection .mw-action-icon {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    justify-self: start !important;
    align-self: center !important;
}

.demo-detail .mw-delete-collection .mw-delete-label,
.demo-detail .mw-follow-collection .mw-follow-label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    text-align: left !important;
    justify-self: start !important;
}

/* Manté els colors/hover existents */
.demo-detail .mw-delete-collection:hover { background:#542c3b!important; border-color:#f15d83!important; }
.demo-detail .mw-follow-collection:hover,
.demo-detail .mw-follow-collection.ongoing-active { background:#234638!important; border-color:#398b71!important; }

@media (max-width: 900px) {
    .demo-detail .stats-bar {
        padding-right: 54px !important;
        padding-left: 8px !important;
    }
    .demo-detail .mw-collection-actions {
        right: 7px !important;
        gap: 6px !important;
    }
    .demo-detail .mw-delete-collection,
    .demo-detail .mw-follow-collection {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .demo-detail .mw-delete-collection .mw-action-icon,
    .demo-detail .mw-follow-collection .mw-action-icon {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
    }
    .demo-detail .mw-delete-label,
    .demo-detail .mw-follow-label {
        display: none !important;
    }
}

/* ===== MOBILE DETAIL V4: nav fixa + stats nets + accions fora ===== */
@media (max-width: 900px) {
    /* Reserva espai perquè la barra fixa mai tapi l'última fila */
    html, body.demo-b.demo-detail {
        min-height: 100%;
    }
    body.demo-b.demo-detail {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.demo-b.demo-detail .demo-page {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Forcem la navegació inferior a existir a qualsevol nivell de detall */
    body.demo-b.demo-detail > .mw-mobile-nav {
        display: grid !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        z-index: 2147483647 !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        margin: 0 !important;
        padding: 7px 5px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        background: #181f29 !important;
        border-top: 1px solid #3c4655 !important;
        box-shadow: 0 -6px 24px rgba(0,0,0,.5) !important;
    }
    body.demo-b.demo-detail > .mw-mobile-nav a,
    body.demo-b.demo-detail > .mw-mobile-nav button {
        min-width: 0 !important;
        min-height: 53px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        text-align: center !important;
    }

    /* El bloc d'estadístiques queda completament centrat i sense botons a dins */
    body.demo-b.demo-detail .stats-bar {
        position: relative !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: center !important;
        justify-items: center !important;
        gap: 0 !important;
        padding: 12px 8px !important;
        padding-right: 8px !important;
        padding-left: 8px !important;
        min-height: 102px !important;
        margin-bottom: 58px !important;
        overflow: visible !important;
    }
    body.demo-b.demo-detail .stats-bar .stat {
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    body.demo-b.demo-detail .stats-bar .stat.circle {
        transform: none !important;
        margin: 0 !important;
    }

    /* Accions: només les dues icones, fora del requadre, sota a la dreta */
    body.demo-b.demo-detail .mw-collection-actions {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 7px !important;
        left: auto !important;
        transform: none !important;
        display: flex !important;
        flex-direction: row-reverse !important; /* verd a l'esquerra, vermell a la dreta */
        align-items: center !important;
        gap: 9px !important;
        z-index: 20 !important;
    }
    body.demo-b.demo-detail .mw-delete-collection,
    body.demo-b.demo-detail .mw-follow-collection {
        position: static !important;
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }
    body.demo-b.demo-detail .mw-delete-collection:hover,
    body.demo-b.demo-detail .mw-follow-collection:hover,
    body.demo-b.demo-detail .mw-follow-collection.ongoing-active {
        background: transparent !important;
        border: 0 !important;
    }
    body.demo-b.demo-detail .mw-delete-label,
    body.demo-b.demo-detail .mw-follow-label {
        display: none !important;
    }
    body.demo-b.demo-detail .mw-delete-collection .mw-action-icon,
    body.demo-b.demo-detail .mw-follow-collection .mw-action-icon {
        width: 21px !important;
        height: 21px !important;
        min-width: 21px !important;
        min-height: 21px !important;
        object-fit: contain !important;
        margin: 0 !important;
    }

    /* Deixa una mica més d'aire abans de les portades */
    body.demo-b.demo-detail .cards-section {
        padding-top: 6px !important;
    }
}

@media (max-width: 380px) {
    body.demo-b.demo-detail .stats-bar {
        min-height: 98px !important;
        margin-bottom: 54px !important;
    }
    body.demo-b.demo-detail .mw-collection-actions {
        top: calc(100% + 8px) !important;
        right: 5px !important;
    }
}

/* ===== PREU + BOTIGA + FILTRE DE PREU ===== */
.demo-detail .mw-purchase-fields {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 0 0 8px !important;
}
.demo-detail .mw-price-field {
    position: relative !important;
    display: block !important;
    min-width: 0 !important;
}
.demo-detail .mw-price-input,
.demo-detail .mw-store-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 27px !important;
    box-sizing: border-box !important;
    background: #171d25 !important;
    border: 1px solid #3b4554 !important;
    border-radius: 6px !important;
    color: #dde3ed !important;
    font-size: 12px !important;
    outline: none !important;
}
.demo-detail .mw-price-input {
    padding: 4px 15px 4px 7px !important;
}
.demo-detail .mw-store-input {
    padding: 4px 7px !important;
}
.demo-detail .mw-price-input:focus,
.demo-detail .mw-store-input:focus {
    border-color: #66778e !important;
}
.demo-detail .mw-price-input.mw-input-error {
    border-color: #ff386d !important;
}
.demo-detail .mw-euro-symbol {
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #cfd7e4 !important;
    font-size: 11px !important;
    pointer-events: none !important;
}

/* Filtre: tercer control sota Seguir col·lecció, només icona */
.demo-detail .mw-price-filter {
    width: 38px !important;
    height: 30px !important;
    min-width: 38px !important;
    min-height: 30px !important;
    margin: 2px 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #ff386d !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}
.demo-detail .mw-price-filter svg {
    width: 26px !important;
    height: 26px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.6 !important;
    stroke-linecap: round !important;
}
.demo-detail .mw-price-filter:hover,
.demo-detail .mw-price-filter.is-active {
    background: rgba(255,56,109,.12) !important;
}
.demo-detail .mw-price-filter.is-active {
    color: #ff5c86 !important;
}

@media (max-width: 900px) {
    .demo-detail .mw-purchase-fields {
        grid-template-columns: 49px minmax(0,1fr) !important;
        gap: 4px !important;
    }
    .demo-detail .mw-price-input,
    .demo-detail .mw-store-input {
        height: 29px !important;
        font-size: 11px !important;
    }
    /* A mòbil, les 3 accions queden juntes sota les estadístiques */
    body.demo-b.demo-detail .mw-collection-actions {
        flex-direction: row-reverse !important;
        gap: 9px !important;
    }
    body.demo-b.demo-detail .mw-price-filter {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        margin: 0 !important;
        border-radius: 50% !important;
    }
    body.demo-b.demo-detail .mw-price-filter svg {
        width: 21px !important;
        height: 21px !important;
    }
}

/* ===== Filtre de preu fora de la barra d'estadístiques ===== */
.demo-detail .mw-price-filter-row {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 2px 16px 4px 0 !important;
    margin: 0 0 2px 0 !important;
    min-height: 36px !important;
}
.demo-detail .mw-price-filter-row .mw-price-filter {
    position: static !important;
    margin: 0 !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 30px !important;
    min-height: 30px !important;
    flex: 0 0 38px !important;
}

/* El contenidor dels botons de col·lecció torna a contenir només eliminar/seguir. */
.demo-detail .mw-collection-actions {
    align-items: stretch !important;
}

@media (max-width: 900px) {
    .demo-detail .mw-price-filter-row {
        padding-right: 8px !important;
        min-height: 34px !important;
        margin-top: 0 !important;
    }
    body.demo-b.demo-detail .mw-price-filter-row .mw-price-filter {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        flex: 0 0 30px !important;
        border-radius: 50% !important;
    }
}

/* 2026-09-24: tot el bàner de la fitxa és clicable per tornar enrere. */
.demo-detail .banner-link {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    z-index: 2 !important;
    cursor: pointer !important;
    text-decoration: none !important;
}
.demo-detail .banner-link .top-banner,
.demo-detail .banner-link .top-banner img {
    pointer-events: auto !important;
    cursor: pointer !important;
}
/* El títol se superposa visualment al bàner, però no bloqueja el clic. */
.demo-detail .container-main > h1 {
    pointer-events: none !important;
    position: relative !important;
    z-index: 3 !important;
}


/* Títol de col·lecció fora del bàner, entre estadístiques i còmics. */
/* Copia el teu Blanquotey.ttf a styles/fonts/Blanquotey.ttf al Synology. */
@font-face {
    font-family: 'MyWhakhoom Blanquotey';
    src: url('fonts/Blanquotey.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
body.demo-b.demo-detail .mw-detail-heading-row {
    display: grid !important;
    grid-template-columns: minmax(34px, 1fr) minmax(0, auto) minmax(34px, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 60px !important;
    margin: 0 0 7px !important;
    padding: 3px 0 !important;
}
body.demo-b.demo-detail .mw-detail-heading-row .mw-collection-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    position: static !important;
    z-index: auto !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 5px 6px !important;
    min-height: 0 !important;
    color: #f7f8fa !important;
    font-family: 'MyWhakhoom Blanquotey', Inter, system-ui, sans-serif !important;
    font-weight: normal !important;
    font-size: clamp(25px, 2.35vw, 38px) !important;
    line-height: 1.12 !important;
    letter-spacing: normal !important;
    text-align: center !important;
    text-shadow: none !important;
    overflow-wrap: anywhere !important;
}
body.demo-b.demo-detail .mw-detail-heading-row .mw-price-filter-row {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 12px 0 0 !important;
}
body.demo-b.demo-detail .mw-detail-heading-row .mw-price-filter-row .mw-price-filter {
    position: static !important;
    margin: 0 !important;
}
/* No es canvia el comportament del bàner clicable. */
@media (max-width: 900px) {
    body.demo-b.demo-detail .mw-detail-heading-row {
        min-height: 49px !important;
        grid-template-columns: minmax(30px, 1fr) minmax(0, auto) minmax(30px, 1fr) !important;
        padding: 4px 0 !important;
    }
    body.demo-b.demo-detail .mw-detail-heading-row .mw-collection-title {
        font-size: clamp(21px, 5vw, 29px) !important;
    }
    body.demo-b.demo-detail .mw-detail-heading-row .mw-price-filter-row {
        padding-right: 3px !important;
    }
}

/* Apropa el títol de la col·lecció a la primera fila de portades. */
body.demo-b.demo-detail .mw-detail-heading-row {
    min-height: 38px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body.demo-b.demo-detail .mw-detail-heading-row .mw-collection-title {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body.demo-b.demo-detail .cards-section {
    padding-top: 2px !important;
    margin-top: 0 !important;
}
@media (max-width: 900px) {
    body.demo-b.demo-detail .mw-detail-heading-row {
        min-height: 36px !important;
    }
    body.demo-b.demo-detail .cards-section {
        padding-top: 3px !important;
    }
}

/* ===== Ajust 2026-09-27: nom des del fitxer + controls compactes ===== */
body.demo-b.demo-detail .mw-volume-heading {
    order: 1 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 7px 4px 5px !important;
}
body.demo-b.demo-detail .mw-volume-heading .card-number {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #f3f5f8 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.12 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    transform: none !important;
}
body.demo-b.demo-detail .mw-volume-heading .card-number::before {
    content: none !important;
    display: none !important;
}

/* Camps de preu/botiga més baixos per reservar més espai al nom. */
body.demo-b.demo-detail .mw-purchase-fields {
    order: 2 !important;
    grid-template-columns: 51px minmax(0, 1fr) !important;
    gap: 4px !important;
    margin: 0 0 5px !important;
}
body.demo-b.demo-detail .mw-price-input,
body.demo-b.demo-detail .mw-store-input {
    height: 23px !important;
    min-height: 23px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    font-size: 11px !important;
    line-height: 1 !important;
}
body.demo-b.demo-detail .mw-price-input {
    padding-left: 6px !important;
    padding-right: 14px !important;
}
body.demo-b.demo-detail .mw-store-input {
    padding-left: 6px !important;
    padding-right: 6px !important;
}
body.demo-b.demo-detail .mw-euro-symbol {
    font-size: 10px !important;
}

/* Botó de possessió centrat, més petit, amb estrella a la dreta. */
body.demo-b.demo-detail .mw-card-actions {
    order: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 2px 1px !important;
}
body.demo-b.demo-detail .mw-card-actions .card-btn {
    position: static !important;
    order: 0 !important;
    flex: 0 1 104px !important;
    width: 104px !important;
    max-width: 104px !important;
    height: 29px !important;
    min-height: 29px !important;
    margin: 0 !important;
    border-radius: 7px !important;
}
body.demo-b.demo-detail .mw-card-actions .btn-main {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 7px !important;
    text-align: center !important;
}
body.demo-b.demo-detail .mw-card-actions .btn-main::after {
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}
body.demo-b.demo-detail .mw-card-actions .btn-main svg {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
}
body.demo-b.demo-detail .mw-card-actions .mw-wish-star {
    position: static !important;
    order: 1 !important;
    flex: 0 0 27px !important;
    width: 27px !important;
    min-width: 27px !important;
    height: 29px !important;
    min-height: 29px !important;
    margin: 0 !important;
    padding: 3px !important;
}
body.demo-b.demo-detail .mw-card-actions .mw-wish-star svg {
    width: 19px !important;
    height: 19px !important;
}


/* Portada en blanc i negre quan el volum NO és favorit */
body.demo-b.demo-detail .card-item.mw-card-not-wished > img {
    filter: grayscale(100%) saturate(0.08) contrast(1.02) brightness(0.96) !important;
    transition: filter .18s ease, opacity .18s ease !important;
}
body.demo-b.demo-detail .card-item.mw-card-wished > img {
    filter: none !important;
    transition: filter .18s ease, opacity .18s ease !important;
}

@media (max-width: 900px) {
    body.demo-b.demo-detail .mw-volume-heading {
        min-height: 46px !important;
        padding: 6px 2px 4px !important;
    }
    body.demo-b.demo-detail .mw-volume-heading .card-number {
        font-size: 11px !important;
    }
    body.demo-b.demo-detail .mw-purchase-fields {
        grid-template-columns: 47px minmax(0, 1fr) !important;
    }
    body.demo-b.demo-detail .mw-price-input,
    body.demo-b.demo-detail .mw-store-input {
        height: 22px !important;
        min-height: 22px !important;
        font-size: 10.5px !important;
    }
    body.demo-b.demo-detail .mw-card-actions .card-btn {
        flex-basis: 96px !important;
        width: 96px !important;
        max-width: 96px !important;
        height: 28px !important;
        min-height: 28px !important;
    }
    body.demo-b.demo-detail .mw-card-actions .mw-wish-star {
        flex-basis: 26px !important;
        width: 26px !important;
        min-width: 26px !important;
        height: 28px !important;
        min-height: 28px !important;
    }
}