<style>
@charset "UTF-8";
body.dark-mode .alt-section>div,body.dark-mode {
background-color:var(--shelfBG)
}
:root {
 --bodyGutter:25px;
   color-scheme:light dark;
 --opaqueShelfBG:#f2f2f7;
 --primaryColor:#006090;
 --linkcolor:#4a7a7c;
 --primarybgColor:#000;
 --primaryColor-rgb:0,122,255;
 --navbarss-color:#f2f2f2; 
 --navbar-left:#009270; 
 --navbars-left:#ff3b30; 
 --navbar-color:#fbfbfb;
 --coverdetails:#fdfdfd;
 --pagego-color:rgba(0, 0, 0, 0.95);
 --moreby:#fddddd;
 --morebyy:#954E46;
 --infojatt:#484f5b;
 --updates:green;
 --updatenews:#ff3b30;
 --jugaad:#ff3b30; 
 --videoPrew:#3675CB; 
 --titlename:#3675CB;;
 --description:#6c757d;
 --systemGreen:#008000;
 --systemmb:rgba(60, 60, 67, 0.6);
 --mrpunjab:rgba(60, 60, 67, 0.83);
 --labelPrimary:rgba(0, 0, 0, 0.95);
 --ramgharia:rgba(0, 0, 0, 0.95);
 --ramghariah:green;
 --navbar:rgba(0, 0, 0, 0.95);
 --mrpunjab-sub:#000000;
 --mrpunjabsub:#fff;
 --mrpunjab-other:#fddddd;
 --mrpunjab-share:#fddddd;
 --footer:#484f5b;
 --lyrcss:#000;
 --des:#e0e0e0; 
 --dess:#4a4a4a;
 --webNavigationMobileBg: white;
 --webNavigationMobileBg-rgb: 255,255,255;
 --systemBlue: #007aff;
 --systemBluebg: green;
 --systemBlue-rgb: 0,122,255;
 --systemBlue-vibrant: #007af5;
 --systemBlue-vibrant-rgb: 0,122,245;
 --systemPrimary: rgba(0, 0, 0, 0.85);
 --systemPrimary-vibrant: #262626;
 --systemPrimary-vibrant-rgb: 38,38,38;
 --systemPrimary-text: rgba(0, 0, 0, 0.85);
 --systemPrimary-vibrantText: #4d4d4d;
 --systemPrimary-vibrantText-rgb: 77,77,77;
 --systemRed: #ff3b30;
 --systemRed-vibrant: #f53126;
 --systemRed-default_IC: #d70015;
 --systemRed-vibrant_IC: #c20618;
 --labelDivider: rgba(0, 0, 0, 0.15);
 --systemQuinary: rgba(0, 0, 0, 0.05);
 --systemQuinary-vibrant: #f2f2f2;
 --systemQuinary-default_IC: rgba(0, 0, 0, 0.1);
 --systemQuinary-vibrant_IC: rgba(0, 0, 0, 0.1);
 --systemSecondary: rgba(0,0,0,.56);
 --systemSecondary-vibrant: rgba(0,0,0,.56);
 --systemSecondary-onLight: rgba(0,0,0,.56);
 --systemSecondary-onDark: hsla(0,0%,100%,.64);
 --tracklistAltRowColor: rgba(0,0,0,.015);
 --tracklistAltRowColor-default_IC: rgba(0,0,0,.05);
 --systemIndigo-vibrant: #5452cc;
  --systemIndigo-default_IC: #3634a3;
  --systemIndigo-vibrant_IC: #3634a3;
  --systemAccentBG: #fa233b;
  --systemAccentBG-rollover: #c60007;
  --systemAccentBG-pressed: #e00921;
  --systemAccentBG-deepPressed: #c60007;
  --systemAccentBG-disabled: rgba(250, 35, 59, 0.35);
  --systemAccentBG-default_IC: #d60017;
  --systemAccentBG-rollover_IC: #a20000;
  --systemAccentBG-pressed_IC: #bb0000;
  --systemAccentBG-deepPressed_IC: #a20000;
  --systemAccentBG-disabled_IC: rgba(214, 0, 23, 0.25);
  --systemMint-default_IC: #0c817b;
  --systemCyan-vibrant: #41afdc;
  --systemCyan-default_IC: #0071a4;
  --systemCyan-vibrant_IC: #006796;
  --systemBrown: #a2845e;
  --systemBrown-vibrant: #987a54;
  --systemBrown-default_IC: #7f6545;
  --systemBrown-vibrant_IC: #775d3b;

}
 
@media only screen and (min-width:1000px) {
 :root {
  --bodyGutter:40px
 }
}
@media (prefers-color-scheme:dark) {
 :root {
 --labelPrimary:#fff;
 --labelDivider: rgba(255, 255, 255, 0.1);
 --opaqueShelfBG-rgb:242,242,247;
 --navbar-color:dark;
 --navbars-color:dark;
 --navbarss-color:dark;
 --navbar-left:dark;
 --navbars-left:dark;
 --primaryColor:#ff453a;
 --linkcolor:#fff;;
 --primarybgColor:rgb(40,40,40);
 --moreby:#343a40;
 --morebyy:#17a2b8;
 --pagego-color:dark;
 --infojatt:#fff;
 --updates:#4da6ff;
 --updatenews:#ff3b30;
 --systemGreen:#ff453a;
 --systemmb:#ff3b30;
 --mrpunjab:#f0f0f3;
 --jugaad:#ff3b30; 
 --videoPrew:#ff3b30; 
 --titlename:#4da6ff;
 --description:#fff;
 --ramgharia:#fff;
 --ramghariah:green;
 --footer:#343a40;
 --navbar:#fff;
 --mrpunjab-sub:#ff453a;
 --mrpunjabsub:#000000;
 --mrpunjab-other:rgb(40,40,40);
 --mrpunjab-share:rgb(40,40,40);
 --coverdetails:dark;
 --lyrcss:#4da6ff;
 --des:dark; 
 --dess:white; 
 --webNavigationMobileBg: #2e2e2e;
 --webNavigationMobileBg-rgb: 46,46,46;
 --systemBlue: #007aff;
 --systemBluebg: #007aff;
 --systemBlue-rgb: 0,122,255;
 --systemBlue-vibrant: #007af5;
 --systemBlue-vibrant-rgb: 0,122,245;
 --systemPrimary: rgba(255, 255, 255, 0.85);
 --systemPrimary-vibrant: #e5e5e5;
 --systemPrimary-vibrant-rgb: 229,229,229;
 --systemPrimary-text: rgba(255, 255, 255, 0.85);
 --systemPrimary-vibrantText: #ff453a;
 --systemPrimary-vibrantText-rgb: 229,229,229;
 --systemRed: #ff453a;
 --systemRed-vibrant: #ff4f44;
 --systemRed-default_IC: #ff6961;
 --systemRed-vibrant_IC: #ff4136;
 --systemQuinary: rgba(0, 0, 0, 0.75);
 --systemQuinary-vibrant: #080808;
 --systemQuinary-default_IC: rgba(255, 255, 255, 0.1);
 --systemQuinary-vibrant_IC: rgba(255, 255, 255, 0.1);
 --systemSecondary: hsla(0,0%,100%,.64);
 --systemSecondary-vibrant: #a1a1a6;
 --systemSecondary-onLight: rgba(0,0,0,.56);
 --systemSecondary-onDark: hsla(0,0%,100%,.64);
 --tracklistAltRowColor: hsla(0,0%,100%,.015);
 --tracklistAltRowColor-default_IC: hsla(0,0%,100%,.05);
 --systemIndigo-vibrant: #6361f2;
 --systemIndigo-default_IC: #7d7aff;
 --systemIndigo-vibrant_IC: #7d7aff;
 --systemAccentBG: #fa233b;
    --systemAccentBG-rollover: #c60007;
    --systemAccentBG-pressed: #2e2e2e;
    --systemAccentBG-deepPressed: #c60007;
    --systemAccentBG-disabled: rgba(250, 35, 59, 0.35);
    --systemAccentBG-default_IC: #d60017;
    --systemAccentBG-rollover_IC: #a20000;
    --systemAccentBG-pressed_IC: #bb0000;
    --systemAccentBG-deepPressed_IC: #a20000;
    --systemAccentBG-disabled_IC: rgba(214, 0, 23, 0.25);
    --systemMint-default_IC: #63e6e2;
    --systemCyan-vibrant: #5acdfa;
    --systemCyan-default_IC: #70d7ff;
    --systemCyan-vibrant_IC: #70d7ff;
    --systemBrown: #ac8e68;
    --systemBrown-vibrant: #b69872;
    --systemBrown-default_IC: #b59469;
    --systemBrown-vibrant_IC: #b59469;
}
}

 
body.dark-mode .clr-white {
  color:#262626
}
body.dark-mode {
 border-top-color:transparent
}
body.dark-mode {
 color:var(--labelSecondary)
}
body.dark-mode {
 border-color:rgba(255,255,255,.1)
}
body.dark-mode {
 border-top:1px solid rgba(255,255,255,.1)
}
body.dark-mode {
 border:1px solid rgba(255,255,255,.1)
}
body.dark-mode {
 color:#d9d9d9
}
body.dark-mode {
 color:#fff
}
body.dark-mode {
 border-bottom:1px solid rgba(255,255,255,.1)
}
body.dark-mode {
 color:#d9d9d9
}
body.dark-mode {
 color:#fff
}
body.dark-mode {
 border:1px solid rgba(255,255,255,.07);
 box-shadow:rgba(0,0,0,.7) 0 5px 20px
}
body.dark-mode {
 border-radius:4px;
 content:'';
 position:absolute;
 top:0;
 height:100%;
 width:100%;
 background-color:rgba(255,255,255,.03);
 z-index:1
}
body.dark-mode {
 position:relative;
 z-index:1
}
body.dark-mode  {
 border-radius:10px;
 content:'';
 position:absolute;
 top:0;
 height:100%;
 width:100%;
 z-index:1
}
body.dark-mode {
 color:var(--labelSecondary)
}
body.dark-mode  {
 background-color:rgba(46,46,46,.1);
 box-shadow:rgba(0,0,0,.7) 0 6px 10px;
 border:1px solid rgba(255,255,255,.07)
}
body.dark-mode {
 background-color:#fff
}
body.dark-mode {
 border-color:#2d2d2d
}
@media (prefers-color-scheme:dark) {
 body {
  background-color:#1f1f1f!important
 }
 .view-loading::before {
  background-color:transparent
 }
}

body,html {
    height: 100%;
    margin:0;
    padding:0;
    font-size: 15px; 
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","SF Pro Text","SF Pro Icons","Noto Color Emoji";
    font-weight:400;
    font-style:normal
}

body.page-grid {
    display: grid;
    grid-template-rows: auto 1fr;
    scroll-behavior: smooth;
    overflow: hidden;
}

#main {
    grid-row: 2;
    overflow-y: auto;
    padding: 0px;
    box-sizing: border-box;
}

span.listRow {
   margin: 0px;  
   font-weight: 600;
   color: var(--systemGreen)
}
 
span.mb {
   margin: 3px; 
   color: var(--systemmb)
}

span.shelfBG {
   font-weight: 600;
   color: var(--systemBlue-vibrant)
}

span.info {
  color: var(--systemBrown);
  font-size: 13px;
}

a:active,a:link,a:visited { 
     color: var(--linkcolor);
    outline: none;
    text-decoration:none 
} 

a:hover {     
    color:var(--systemBluebg);
    text-decoration:underline
}   
 
.mrpunjab-sub-heading {     
    background-color: var(--systemPrimary-vibrantText);     
    padding: 10px 0px 9px 27px;     
    border-bottom: 1px solid rgba(0,0,0,.1);    
    color: var(--mrpunjabsub);    
    margin: 6px 0;     
    overflow: hidden;     
    text-overflow: ellipsis;     
    white-space: nowrap;     
    background-image: url(/css/mp3.png?d);     
    background-position: -1px center;     
    background-repeat: no-repeat;    
    background-size: 32px;   
}  
 
a.navbar {
    letter-spacing: .029em;
    font-weight:500;
    background-color:var(--navbar-color);
    border-top: 1px solid rgba(0,0,0,.1);  
    border-left: 4px solid var(--navbar-left);
    margin: 0px;
    padding: 14px 10px;
    display: flex;
    align-items: center;
    border-radius: 0px;
    box-sizing: content-box;
    text-align: start;
}
  
a.navbars {
    letter-spacing: .029em;
    font-weight:500;
    background-color:var(--navbars-color);
    border-top: 1px solid rgba(0,0,0,.1);       
    border-left: 4px solid var(--navbars-left);
    margin: 0px;
    padding: 14px 10px;
    background-color:var(--navbarss-color);
    display: flex;
    align-items: center;
    border-radius: 0px;
    box-sizing: content-box;
    text-align: start;
}
 
 
a.navbar:hover {
    color:var(--systemBluebg);
    font-weight: normal;
    background-color:var(--navbarss-color);
}

a.navbars:hover {
      color:var(--systemBluebg);
  font-weight: normal;
    background-color:var(--navbarss-color);
} 

.header-title {
  font-size: 15px;
  padding: 10px 0px 10px 27px;
  border-bottom: 1px solid rgba(0,0,0,.1);
  color: white;
  font-weight: 600;
  margin: 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: var(--systemPrimary-vibrantText);
  background-position: 0 -83px;
  border-left: 0px solid red;
  background-image: url(/css/mp3.png?d);
  background-position: -1px center;
  background-repeat: no-repeat;
  background-size: 32px;
}

  
.header-section {
  font-size: 14px;
  padding: 8px 0px 8px 12px;
  border-bottom: 2px solid rgba(0,0,0,.1);
  font-weight: 600;
  margin: 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: var(--moreby);
  background-position: 0 -83px;
  border-left: 0px solid red;
  color: var(--mrpunjab);

}


 .column {
 -ms-flex-preferred-size:25%;
 flex-basis:25%
}
 
.column-section {
 pointer-events:auto
}
 
.column-section ~ .column-section {
 padding-top:8px
}
 
.column-section-title {
 font-size:14px;
 line-height:1.33337;
 font-weight:400;
 letter-spacing:-.01em;
 font-family:"SF Pro Text","Myriad Set Pro","SF Pro Icons","Apple Legacy Chevron","Helvetica Neue","Helvetica","Arial",sans-serif;
 font-weight:600;
 margin-right:20px;
 margin-bottom:.8em
}
 
 .column-section-title:hover {
  color:var(--systemBlue-default_IC)
 }
  
.column-section-list {
 margin-right:20px;
 list-style:none;
 padding:0
}
 
.column-section-item {
 display:block;
 pointer-events:auto;
 margin-bottom:.8em
}
@media only screen and (max-width: 833px) {
 .column-section-item {
  margin-bottom:0
 }
}
.column-section-item:last-child {
 margin-bottom:0
}
 
 .column-section-link:focus {
  outline-offset:-6px
 }
}
.column-section-anchor {
 right:0;
 cursor:default;
 display:none;
 position:absolute;
 top:0;
 width:1px;
 height:1px;
 z-index:10
}
.column-section-anchor:focus {
 outline-offset:-6px;
 width:25px;
 height:38px
}
 
.column-section-anchor-close {
 display:none
}
.column-section-anchor-label {
 position:absolute;
 clip:rect(1px, 1px, 1px, 1px);
 -webkit-clip-path:inset(0px 0px 99.9% 99.9%);
 clip-path:inset(0px 0px 99.9% 99.9%);
 overflow:hidden;
 height:1px;
 width:1px;
 padding:0;
 border:0
}
.column-section-state {
 display:none
}
 
.link-component.bvelte-15ii57q {
  --linkHoverTextDecoration: none;
  margin-bottom: 13px;
  margin-top: 13px;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: relative;
  z-index: 1;
  border-radius: 0px;
  display: grid;
  grid-template-areas:
  "content icons";
  grid-template-columns: 1fr auto;
}

.link-box.bvelte-i7br3s.bvelte-i7br3s {
  padding-left: 17px;
}
.link-box.bvelte-i7br3s.bvelte-i7br3s {
  padding-right: 17px;
}
 
.link-box.bvelte-i7br3s.bvelte-i7br3s {
  align-items: center;
  background-color: var(--tracklistAltRowColor);
  border-radius: 0px;
  display: flex;
  height: 44px;
  position: relative;
  background-image: url(/icon/ddd.png);
  padding: 2px 17px 2px 52px;
  background-position: 10px center;
  background-repeat: no-repeat;
  background-size: 38px;
}

 
p.bvelte-i7br3s.bvelte-i7br3s {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.33338;
  overflow: hidden;
}

.link-box-bg {
  margin-left: 10px;
  padding: 2px 2px 2px 4px;
  font-size: 12px;
  border-radius: 4px;
}
 
li {
  list-style: none;
} 
 
audio {
  width: 100%;
  background: var(--systemQuinary);
  border: 1px solid var(--labelDivider);
  border-radius: 4px;
}

.top-button {
   background-color: var(--systemRed);
   border-radius: 3px;
   margin: 5px;
   text-decoration: none;
   border-bottom: 1px solid var(--labelDivider);
   color: #fff !important;
   padding: 6px 9px;
   font-weight: 500;
}

.zip-button {
  display: inline-block;
  background-color: var(--systemPrimary-vibrantText);
  border-radius: 3px;
  margin: 5px;
  text-decoration: none;
  border-bottom: 0px solid var(--labelDivider);
  color: #fff !important;
  padding: 6px 8px;
  font-weight: 500;
}

.list-button {
   background-color: var(--systemRed);
   border-radius: 3px;
   margin: 5px;
   text-decoration: none;
   border-bottom: 1px solid var(--labelDivider);
   color: #fff !important;
   padding: 6px 9px;
   font-weight: 500;
}

h2,h3,h4,h5,h6 {     
    margin: 0;     
    padding: 0;     
    font-size: 15px;     
    font-weight:600;
} 

h1 {     
    margin: 0;     
    padding: 0;     
    font-size: 16px;     
    font-weight:600;
}

a.listitem {     
   color: var(--linkcolor);
    font-size: 14px;
    line-height: 1.56667;
    font-weight: 500;
    letter-spacing: .029em;
    font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue",Helvetica,Arial,sans-serif;
    background-color:var(--tracklistAltRowColor);
    border-top: 1px solid rgba(0,0,0,.1);       
    border-left: 0px solid #a8c1fb;
}      

a.listitem-4 {     
    color: var(--linkcolor);
    font-size: 14px;
    line-height: 1.56667;
    font-weight: 500;
    letter-spacing: .029em;
    font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue",Helvetica,Arial,sans-serif;
    background-color:var(--tracklistAltRowColor-default_IC);
    border-top: 1px solid rgba(0,0,0,.1);          
    background-color:var(--navbarss-color);
    border-left: 0px solid #fba8c7; 
} 

a.listitem-4:hover {
    font-weight: normal;
    color:var(--systemBluebg);
    background-color:var(--navbarss-color);
}

a.listitem:hover {
    font-weight: normal;
    color:var(--systemBluebg);
    background-color:var(--navbarss-color);
} 

a.listitem-4.song, a.listitem.song {     
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 24 24' fill='red' xmlns='http://www.w3.org/2000/svg'><path d='M9.73230468,19.2412109 C10.8089648,19.2412109 12.420293,18.4501953 12.420293,16.3188477 L12.420293,9.6171875 C12.420293,9.22900391 12.4935352,9.1484375 12.8377734,9.07519531 L16.1849414,8.34277344 C16.4339648,8.29150391 16.5877734,8.10107422 16.5877734,7.859375 L16.5877734,5.10546875 C16.5877734,4.71728516 16.272832,4.46826172 15.8992969,4.54150391 L12.1346484,5.36181641 C11.6658984,5.46435547 11.4095508,5.72070312 11.4095508,6.13085938 L11.4241992,14.2753906 C11.4608203,14.6342773 11.2923633,14.8686523 10.9700977,14.9345703 L9.80554687,15.1762695 C8.34070312,15.4838867 7.65222656,16.230957 7.65222656,17.3369141 C7.65222656,18.4575195 8.51648437,19.2412109 9.73230468,19.2412109 Z'/></svg>");  
    background-repeat: no-repeat;
    padding: 12px 0px 12px 30px;     
    background-position: 2px center; 
    background-repeat: no-repeat;     
    background-size: 24px; 
    display: block;     
    overflow: hidden;     
    text-overflow: ellipsis;    
    white-space: nowrap; 
   }   

 
a.listitem-4.top, a.listitem.top {     
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 24 24' fill='red' xmlns='http://www.w3.org/2000/svg'><path d='m9.5 16.5l7-4.5l-7-4.5ZM12 22q-2.075 0-3.9-.788q-1.825-.787-3.175-2.137q-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175q1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138q1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175q-1.35 1.35-3.175 2.137Q14.075 22 12 22Z'/></svg>");  
    background-repeat: no-repeat;
    padding: 14px 0px 14px 38px;
    background-position: 6px center;
    background-repeat: no-repeat;     
    background-size: 24px; 
    display: block;     
    overflow: hidden;     
    text-overflow: ellipsis;    
    white-space: nowrap; 
   }
  
a.listitem-4.album, a.listitem.album {  
   background-image: url("data:image/svg+xml,<svg viewBox='0 0 24 24' fill='red' xmlns='http://www.w3.org/2000/svg'><path d='M15.4774266,3.93717949 C15.4334086,3.32692308 15.0812641,3 14.4063205,3 L9.43227991,3 C8.75733634,3 8.40519187,3.32692308 8.36117381,3.93717949 L15.4774266,3.93717949 Z M16.7172686,5.94957265 C16.6072235,5.2957265 16.2917607,4.92521368 15.5581264,4.92521368 L8.2217833,4.92521368 C7.48081264,4.92521368 7.16534989,5.2957265 7.05530474,5.94957265 L16.7172686,5.94957265 Z M16.4164786,20 C17.729684,20 18.5,19.2444444 18.5,17.7478632 L18.5,9.37863248 C18.5,7.88205128 17.7223476,7.12649573 16.1963883,7.12649573 L7.80361174,7.12649573 C6.27031603,7.12649573 5.5,7.87478632 5.5,9.37863248 L5.5,17.7478632 C5.5,19.2444444 6.27031603,20 7.80361174,20 L16.4164786,20 Z M16.3944695,18.8303419 L7.81828442,18.8303419 C7.08465011,18.8303419 6.68115124,18.4380342 6.68115124,17.6824786 L6.68115124,9.43675214 C6.68115124,8.68119658 7.08465011,8.29615385 7.81828442,8.29615385 L16.1743792,8.29615385 C16.9006772,8.29615385 17.3188488,8.68119658 17.3188488,9.43675214 L17.3188488,17.6824786 C17.3188488,18.4380342 16.9006772,18.8303419 16.3944695,18.8303419 Z'/></svg>");  
   background-repeat: no-repeat;
   padding: 12px 0px 12px 30px;     
   background-position: 2px center; 
   background-repeat: no-repeat;     
   background-size: 24px; 
   display: block;     
   overflow: hidden;     
   text-overflow: ellipsis;    
   white-space: nowrap;    
}   
 

a.listitem-4.dir, a.listitem.dir {     
   background-image: url("https://cdn4.iconfinder.com/data/icons/file-extension-names-vol-8/512/11-512.png");     
   background-repeat: no-repeat;
   padding: 12px 0px 12px 14px;     
   background-position: 1px center; 
   background-repeat: no-repeat;     
   background-size: 24px; 
   display: block;     
   overflow: hidden;     
   text-overflow: ellipsis;    
   white-space: nowrap; 
   } 

a.listitem-4.artist, a.listitem.artist{  
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 24 24' fill='red' xmlns='http://www.w3.org/2000/svg'><path d='M18.3895312,9.41943359 C19.6785937,8.13769531 19.7298633,6.51171875 18.4920703,5.28125 C17.2616016,4.06542969 15.6429492,4.09472656 14.3538867,5.38378906 L18.3895312,9.41943359 Z M12.3104297,19.277832 C12.6839648,19.277832 12.9769336,18.9848633 12.9769336,18.6113281 L12.9769336,14.2827148 L12.9256641,13.2353516 L15.1595508,11.1625977 C16.0018359,11.2724609 16.8880664,10.9282227 17.6497852,10.1591797 L13.6214648,6.12353516 C12.8450977,6.88525391 12.522832,7.75683594 12.6326953,8.59912109 L5.82849609,15.9306641 C5.55017578,16.230957 5.50623047,16.6484375 5.85046875,16.9926758 L4.91296875,18.2011719 C4.82507812,18.3183594 4.8177539,18.4868164 4.94958984,18.6186523 L5.16199218,18.8383789 C5.2865039,18.9628906 5.45496093,18.9702148 5.58679687,18.8676758 L6.79529297,17.9228516 C7.12488281,18.2670898 7.5496875,18.2231445 7.84265625,17.9448242 L11.6439258,14.4291992 L11.6439258,18.6113281 C11.6439258,18.9848633 11.9368945,19.277832 12.3104297,19.277832 Z M7.25671875,17.2050781 L6.58289062,16.53125 L13.0355273,9.69042969 C13.1600391,9.89550781 13.3138477,10.0932617 13.4969531,10.2836914 C13.6800586,10.4667969 13.8704883,10.6279297 14.0682422,10.7597656 L7.25671875,17.2050781 Z'/></svg>");
    padding: 12px 0px 12px 30px;     
    background-position: 1px center; 
    background-repeat: no-repeat;     
    background-size: 26px; 
    display: block;     
    overflow: hidden;     
    text-overflow: ellipsis;    
    white-space: nowrap; 
}   

a.listitem-4.li, a.listitem.li{  
    padding: 12px 0px 12px 12px;     
    background-position: 1px center; 
    background-repeat: no-repeat;     
    background-size: 26px; 
    display: block;     
    overflow: hidden;     
    text-overflow: ellipsis;    
    white-space: nowrap; 
}
 
a.listitem.home {     
    padding: 12px 0px 11px 12px;     
    background-position: 2px center; 
    background-repeat: no-repeat;     
    background-size: 20px; 
    display: block;     
    overflow: hidden;     
    text-overflow: ellipsis;    
    white-space: nowrap; 
}


hr {     
    border: 0;     
    border-top: 1px solid rgba(0,0,0,.1);  
    margin: 12px 0;     
    padding: 0; 
} 
 
.pagination-container { 
    margin-top: 1em;
    padding-top: 2em;
    border-top: 1px solid #d7dadb;
    text-align: center;
}

.pagination-item,.active {
    list-style-type: none;
    display: inline-block;
    border: .5px solid var(--labelDivider);
    border-left: .5px solid var(--labelDivider);
}

.pagination-item:hover, 
.pagination-item.is {
    background-color: var(--systemRed);
    border: .5px solid var(--labelDivider);
}

.pagination-item:hover 
.pagination-link, 
.pagination-item.is, 
.pagination-link.is, 
.pagination-link {
    color: #fff; 
    border-radius: 4px; font-weight: 400;
}

.pagination-item.first-number {
    border-left: 1px solid #d7dadb;
}

.pagination-link {
    padding: 8px 7px;
    display: inline-block;
    text-decoration: none;
    color: var(--systemPrimary);
    font-size: 14px;
}

.pagination-item--wide {
    list-style-type: none;
    display: inline-block;
}

.pagination-item--wide.first {
    margin: 0 1em 0 0;
    background-color: #fa4248;
    border-right: 1px solid #fff;
    padding: 19px 0 19px 0;
}

.pagination-item--wide.last {
    margin: 0 0 0 1em;
    background-color: #fa4248;
    border-right: 1px solid #fff;
    color: white;
    padding: 19px 0 19px 0;
    border-right: 1px solid #d7dadb;
    transform: scale(1) rotate(19deg) translateX(0px) translateY(0px) skewX(-10deg) skewY(-20deg);
}


ul.pagination li {
    align-items: center;
}

li.pagination-item.is {
    margin: 0px 5px 0px 4px;
    padding: .3em 0px;
}

ul.pagination {
    margin: 3px 1px 0px 1px;
    padding: 1px 0px;
}


li.pagination-item.is:hover {
    background-color: var(--systemRed);
    border: .5px solid var(--labelDivider);
    box-shadow: none;
}

li.pagination-item:hover {
    color: white;
    box-shadow: none;
    border: .5px solid var(--labelDivider);
}

.pages {
    padding: 4px 0px;
    color: var(--systemmb);
    font-size: 15px;
}

li.active {
    background-color: var(--systemStandardUltrathinMaterialSover-inactive_IC);
    margin-right: 0px;
    margin: 1px;
    font-size: 14px;
    border: .5px solid var(--labelDivider);
}
 
li.pagination-item,
li.pagination-item.is {
    padding: 4px 2px;
}

li.pagination-item {
    margin: 4px 0px 4px 0.2pt;
    cursor: pointer;
}

.page {
    margin: 0px 0px 0px 0px;
    padding: 12px 10px;
}
 
.footer{
    padding: 12px 0px 12px 8px;
    border-bottom: 1px solid rgba(0,0,0,.1);
    font-size:14px;
    font-weight:600;
    color: white;
    margin: 0px 0;
    background-color: var(--footer);
    background-position:0 -83px;
    border-left: 0px solid red;
}
 
.global-footer, 
.as-footnotes {
    clear: both;
    position: relative;
}

.global-footer .global-footer-breadcrumbs::after, .as-footnotes .global-footer-breadcrumbs::after {
  clear: both;
}

.global-footer .global-footer-breadcrumbs::before, .as-footnotes .global-footer-breadcrumbs::before, .global-footer .global-footer-breadcrumbs::after, .as-footnotes .global-footer-breadcrumbs::after {
  content: ' ';
  display: table;
}
 
 .global-footer .global-footer-breadcrumbs, .as-footnotes .global-footer-breadcrumbs {
  border-bottom: .5px solid var(--labelDivider);
}

.global-footer .global-footer-breadcrumbs, .as-footnotes .global-footer-breadcrumbs {
     padding: 10px 0 12px 0;
     position: relative;
     z-index: 1;
}

.global-footer article, .as-footnotes article, .global-footer aside, .as-footnotes aside, .global-footer details, .as-footnotes details, .global-footer figcaption, .as-footnotes figcaption, .global-footer figure, .as-footnotes figure, .global-footer footer, .as-footnotes footer, .global-footer header, .as-footnotes header, .global-footer nav, .as-footnotes nav, .global-footer section, .as-footnotes section {
  display: block;
}
 
.global-footer .global-footer-breadcrumbs-home, .as-footnotes .global-footer-breadcrumbs-home {
  left: 9px;
  position: none;
  z-index: 2;
}

.web-navigation__nav-icon {
     border-radius:4px;
     height:30px;
     width:32px;
     margin-right: 10px;
     background-color:transparent;
     fill:var(--systemRed-default_IC)
}
 
 
.global-footer .global-footer-breadcrumbs-home-icon, .as-footnotes .global-footer-breadcrumbs-home-icon {
    background-repeat: no-repeat;
    padding: 8px 0px 14px 32px;
    background-position: 1px center;
    background-repeat: no-repeat;
    background-size: 32px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-footer .global-footer-breadcrumbs-home-label, .as-footnotes .global-footer-breadcrumbs-home-label {
      position: absolute;
      clip: rect(1px, 1px, 1px, 1px);
      -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
      clip-path: inset(0px 0px 99.9% 99.9%);
      overflow: hidden;
      height: 1px;
      width: 1px;
      padding: 0;
      border: 0;
} 

.global-footer .global-footer-breadcrumbs-path, .as-footnotes .global-footer-breadcrumbs-path {
  font-size: 12px;
  line-height: 1.33337;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  position: relative;
  z-index: 1;
}

.global-footer .global-footer-breadcrumbs-list, .as-footnotes .global-footer-breadcrumbs-list {
  max-height: 9999px;
  padding-left: 17px;
  direction: ltr;
  list-style: none;
}
 
.global-footer .global-footer-breadcrumbs-path, .as-footnotes .global-footer-breadcrumbs-path {
  font-size: 12px;
  line-height: 1.33337;
  font-weight: 400;
  letter-spacing: -0.01em;
}
 
.global-footer .global-footer-breadcrumbs-item::before, .as-footnotes .global-footer-breadcrumbs-item::before {
  width: 8px;
  height: 36px;
  background-size: 6px 32px;
  background-repeat: no-repeat;
  background-image: url();
  margin-right: 0px;
  content: '/';
  display: inline-block;
  vertical-align: middle;
  margin-top: -3px;
  height: 16px;
  background-position-y: 100%;
}
 
.global-footer .global-footer-breadcrumbs-item, .as-footnotes .global-footer-breadcrumbs-item {
  margin-right: 7px;
  float: left;
  padding: 3px 4px 3px 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;}

 
.google_search2 {
  min-height: 60px;
  width:100%;
}

.google_search2 form {
  position:relative;
  width:100%;
  height:40px;
  float:left;
  margin:6px auto;
  border:none;
  border-radius:30px
}

.google_search2 input {
  width:100%;
  height:100%;
  padding:0 40px 0 12px;
  background:0 0;
  color:#787878!important;
  font-size:14px;
  border-radius:10px;
  border: 1px solid rgba(0,0,0,.1);
  box-sizing:border-box
}


.NextPrev a {
  background-color:var(--navbars-color);
  color: var(--primaryColor);
  padding: 5px 10px;
  margin: 5px;
  line-height: 40px;
  border-radius: 32px 32px 32px 32px;
}

.NextPrevRed a {
    background-color:var(--navbars-color);
    color: var(--primaryColor);
    padding: 5px 10px;
    margin: 5px;
    line-height: 40px;
    border-radius: 32px 32px 32px 32px;
}
 
.share-btn.web-share {
   cursor:pointer;
   width:auto
}

.share-btn { 
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="red" d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z"></path></svg>'); 
   margin:0 0px; 
   padding: 6px 0px 6px 30px;
   background-color: var(--moreby);
   border-bottom: 2px solid rgba(0,0,0,.1);    
   border-radius:4px;
   text-decoration:none;
   flex-grow:1;
   background-position: 4px center;     
   background-repeat: no-repeat;     
   background-size: 18px;
   font-weight: 600;
   text-align:left
}

.share-buttons {
   display:none;
   justify-content:
   space-between
}

.share-btn.wa {
   color:#fff;
   background:#25d366;
   margin:0 8px 0 0
}

.share-btn.fb {
   color:#fff;
   background:#3b5999;
   margin:0 8px 0 0
}

.share-btn.tw {
   color:#fff;
   background:#55acee;
   margin:0 8px 0 0
}

.tags {
   font-size:15px;color:#142057;line-height:2
}
.share-btn.rd {
   color:#fff;
   background:#ff5700;
   margin:0 8px 0 0
}
.share-btn.po {
   color:#fff;
   background:#df2029;
   margin:0 8px 0 0
}

 .mitem {
  border-bottom: 0.5px solid var(--labelDivider);
  margin: 1px;
  padding: 2px;
  padding-left: 2px;
  padding-left: 5px;
  line-height: 1.9;
  margin: 0;
  font-size: 13px;
  overflow: hidden;
  display: block;
  color: var(--systemAccentBG);
  font-weight: normal;
}

.gsc-control-cse { 
   border: 0px solid rgba(0,0,0,.1); 
}
.gsc-control-cse { 
   border-color: none; 
   background-color: var(--webNavigationMobileBg); 
}

.searchbar {  
   width: 100%;  
   position: relative;  
   display: flex;
} 
.searchop {  
   max-width: 99%; 
   width: 600px;  
   position: relative;  
   display: flex;
}

.searchTerm {  width: 100%;  
   border: 1px solid rgba(0,0,0,.1);
   border-right: 1px solid rgba(0,0,0,.1);
   padding: 5px;  
   border-radius: 5px 0 0 5px;  
   outline: none;  color: #9DBFAF;
   margin: 0px 4px 0px 0px;
}

.searchTerm:focus {  
   color: #00B4CC;
}

.searchButton {    
   border: 1px solid rgba(0,0,0,.1);
   background: var(--systemPrimary-vibrantText);
   text-align: center;  
   color: #fff;  
   padding: 2px 0px 0px 6px;
   border-radius: 0 5px 5px 0;  
   cursor: pointer;  
   font-size: 20px;
   width: 45px; height: 40px;
}
 
.searchwrap{     
   width: 90%;    
   position: relative;    
   top: 0;    
   left: 50%;    
   transform: translate(-50%, -4%);    
   margin: 28px 0 12px 0;
}
 
.jattsearch {     
   background-image: url("data:image/svg+xml,<svg viewBox='0 0 22 22' fill='white' xmlns='http://www.w3.org/2000/svg'><path d='M18.677 19.607l-5.715-5.716a6 6 0 0 1-7.719-9.133a6 6 0 0 1 9.134 7.718l5.715 5.716l-1.414 1.414l-.001.001zM9.485 5a4 4 0 1 0 2.917 1.264l.605.6l-.682-.68l-.012-.012A3.972 3.972 0 0 0 9.485 5z'/></svg>");   
   padding: 30px 0px 0px 30px;
   color: var(--morebyy);
   overflow: hidden;     
   text-overflow: ellipsis;     
   white-space: nowrap;     
   background-position: 2px center;     
   background-repeat: no-repeat;     
   background-size: 24px;
   font-weight: 600;
   letter-spacing: .0015em;
} 
 
@media only screen and (max-width:483px) {
 .navigation_header {
  display:flex;
  flex-shrink:0;
  justify-content:center;
  align-content:center
 }
}

@media only screen and (min-width:484px) {
 .navigation_header {
  position:relative;
  flex-shrink:0;
  font-size:unset;
  align-self:center
 }
}
 
.navigation_header:not(.navigation_header--logo) {
 margin-top:20px;
 margin-bottom:5px;
 grid-area:header;
 display:flex;
 justify-content:flex-start;
 -webkit-margin-start:1px;
 margin-inline-start:1px
}
@media only screen and (min-width:484px) {
 .navigation_header:not(.navigation_header--logo) {
  margin-top:22px;
  margin-bottom:1px
 }
}

 
@media only screen and (min-width:484px) {
 .navigation-container--is-scrolling .navigation_logo-container::after {
  content:"";
  display:block;
  position:absolute;
  top:100%;
  width:100%;
  height:1px;
  z-index:1;
  background-color:var(--labelDivider)
 }
 .navigation-container--is-scrolling .navigation_logo-container::after {
  left:0
 }
.navigation-container--is-scrolling .navigation_logo-container::after {
  right:0
 }
}

.navigation_logo-container {
 margin-top:15px;
 margin-bottom:8px
}
@media only screen and (min-width:484px) {
 .navigation_logo-container {
   /*margin-top:17px;*/
  margin-bottom:18px;
  padding-top:0;
  padding-bottom:0;
  -webkit-padding-start:25px;
  padding-inline-start:25px;
  -webkit-padding-end:25px;
  padding-inline-end:25px
 }
}

@media only screen and (min-width:484px) {
 .navigation_navigation-container {
  display:none
 }
}

#ac-globalnav {
    background-color: var(--webNavigationMobileBg);
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    min-width: 100%;
    /*margin-top: -10px;*/
    height: 50px;
    max-height: 100%;
    grid-area: sidebar;
    flex-direction: column;
    display: flex;
    position: fixed;
    overflow: hidden;
    z-index: 9901;
    transition: opacity .44s .2s cubic-bezier(.645,.045,.355,1),height .56s cubic-bezier(.645,.045,.355,1);
} 
.sortby {
  display: block;
  align-items: center;
  margin: 12px 0 12px 0;
  font-size: 13px;
  border-left: 0px solid;
    border-left-color: currentcolor;
  border-color: #ec630d;
    border-right-color: rgb(236, 99, 13);
  border-right: 0;
  padding-left: 14px;
  border-radius: 6px;
}

.short-by.active {
  background-color: var(--systemRed);
  color: white;
}
.short-by, .tabs-btn {
  display: -webkit-inline-box;
  margin: 2px 2px 6px 2px;
  padding: 7px 12px;
  background-color: var(--systemQuinary);
  color: var(--bodyGutter);
  font-size: 13px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(128,128,128,0.1);
}
.pagination-item, .active {
  list-style-type: none;
  display: inline-block;
  border: .5px solid var(--labelDivider);
  border-left: .5px solid var(--labelDivider);
}

.heading-up {
  float: left;
  width: 100%;
  padding: 10px 10px;
  text-align: center;
  border: 1px solid var(--labelDivider);
  font-weight: bolder;
  background: var(--systemQuinary);
  box-sizing: border-box;
  color: linear-gradient(to right, #f06844 0%, #ee4c54 25%, #d45e95 50%, #9c6ca6 75%, #6583c1 100%);
}

.grid {
 margin:0 var(--bodyGutter) 32px
}
.grid.grid--flow-row {
 grid-gap:10px;
 display:grid
}
@media only screen and (min-width:1000px) {
 .grid.grid--flow-row {
  grid-gap:20px
 }
 .grid.grid--flow-row.grid--top-results {
  grid-template-columns:repeat(3,1fr)
 }
}
@media only screen and (min-width:607px) and (max-width:999px) {
 .grid.grid--flow-row.grid--top-results {
  grid-template-columns:1fr
 }
}
.grid.grid--flow-row.grid--category-bricks a {
 border-radius:8px;
 display:block
}
@media only screen and (min-width:607px) {
 .grid.grid--flow-row.grid--category-bricks {
  grid-template-columns:1fr 1fr
 }
}
@media only screen and (min-width:1000px) {
 .grid.grid--flow-row.grid--category-bricks {
  grid-template-columns:1fr 1fr 1fr
 }
}
@media only screen and (max-width:866px) {
 .grid.grid--flow-row.grid--category-bricks {
  grid-template-columns:1fr 1fr
 }
}
.grid.grid--flow-row.grid--horizontal-lockups {
 grid-template-columns:repeat(1,1fr);
 margin-top:10px
}
@media only screen and (min-width:1000px) {
 .grid.grid--flow-row.grid--horizontal-lockups {
  grid-template-columns:repeat(2,1fr)
 }
}
@media only screen and (min-width:1260px) {
 .grid.grid--flow-row.grid--horizontal-lockups {
  grid-template-columns:repeat(3,1fr)
 }
}
@media only screen and (min-width:1580px) {
 .grid.grid--flow-row.grid--horizontal-lockups {
  grid-template-columns:repeat(4,1fr)
 }
}
.grid.grid--flow-row:not(.grid--custom-columns) {
 grid-template-columns:repeat(2,1fr)
}
@media only screen and (min-width:415px) {
 .grid.grid--flow-row:not(.grid--custom-columns) {
  grid-template-columns:repeat(3,1fr)
 }
}
@media only screen and (min-width:1000px) {
 .grid.grid--flow-row:not(.grid--custom-columns) {
  grid-template-columns:repeat(4,1fr)
 }
}
@media only screen and (min-width:1260px) {
 .grid.grid--flow-row:not(.grid--custom-columns) {
  grid-template-columns:repeat(8,1fr)
 }
}
@media only screen and (min-width:1580px) {
 .grid.grid--flow-row:not(.grid--custom-columns) {
  grid-template-columns:repeat(6,1fr)
 }
}
@media only screen and (min-width:484px) and (max-width:578px) {
 .grid.grid--flow-row:not(.grid--custom-columns) {
  grid-template-columns:repeat(2,1fr)
 }
}
 .grid.grid--flow-row:not(.grid--custom-columns),
 .grid.grid--flow-row:not(.grid--custom-columns) {
 margin-right:var(--bodyGutter)
}
 .grid.grid--flow-row:not(.grid--custom-columns) {
 margin-left:var(--bodyGutter)
}
 .grid.grid--flow-row:not(.grid--custom-columns),
 .grid.grid--flow-row:not(.grid--custom-columns) {
 padding-right:0
}
.grid.grid--flow-row:not(.grid--custom-columns) {
 padding-left:0
}
.grid.grid--flow-row:not(.grid--custom-columns) .grid-item {
 padding:0 0 15px
}
@media only screen and (min-width:1000px) {
 .grid.grid--flow-column {
  -webkit-columns:3;
  -moz-columns:3;
  column-count:3;
  -webkit-column-gap:20px;
  -moz-column-gap:20px;
  column-gap:20px
 }
}
.item-lockup__artwork {
 border-radius:7px;
 box-shadow:0 1px 1px rgba(0,0,0,.01),0 2px 2px rgba(0,0,0,.01),0 4px 4px rgba(0,0,0,.02),0 8px 8px rgba(0,0,0,.03),0 14px 14px rgba(0,0,0,.03);
 position:relative
}
.item-lockup__artwork:after {
 background-color:rgba(51,51,51,.3);
 border-radius:inherit;
 content:"";
 height:100%;
 left:0;
 opacity:0;
 position:absolute;
 top:0;
 transition:opacity .1s ease-in;
 width:100%;
 z-index:1
}
.item-lockup__content {
 margin-top:4px
}
.item-lockup__ordinal {
 color:var(--systemPrimary);
 font-size:12px;
 font-weight:400;
 font-weight:800;
 letter-spacing:0;
 line-height:1.25
}
.item-lockup__ordinal:lang(th) {
 line-height:1.75
}
.item-lockup__ordinal:lang(ar) {
 font-family:-apple-system,BlinkMacSystemFont,Apple Color Emoji,SF Pro,Arabic UI Text,SF Pro Icons,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif
}
.item-lockup__content-details {
 height:auto
}
.item-lockup__title-wrap {
 display:flex;
margin-bottom: -12px;
 word-break:break-word
}
.item-lockup__title {
 -webkit-line-clamp:2;
 -webkit-box-orient:vertical;
 color:var(--systemPrimary);
 display:-webkit-box;
 flex:1;
 font-size:14px;
 font-weight:400;
 letter-spacing:0;
 line-height:1.25;
 overflow:hidden
}
.item-lockup__title:lang(th) {
 line-height:1.75
}
.item-lockup__title:lang(ar) {
 font-family:-apple-system,BlinkMacSystemFont,Apple Color Emoji,SF Pro,Arabic UI Text,SF Pro Icons,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif
}
.item-lockup__subtitle {
 color:var(--systemSecondary);
 font-size:12px;
 font-weight:400;
 letter-spacing:0;
 line-height:1.25
}
.item-lockup__subtitle:lang(th) {
 line-height:1.75
}
.item-lockup__subtitle:lang(ar) {
 font-family:-apple-system,BlinkMacSystemFont,Apple Color Emoji,SF Pro,Arabic UI Text,SF Pro Icons,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif
}
.item-lockup__subtitle--button {
 text-align:left
}
  .item-lockup__subtitle--button {
 text-align:right
}
.item-lockup__subtitle--button span,
.item-lockup__subtitle-links {
 -webkit-line-clamp:1;
 -webkit-box-orient:vertical;
 display:-webkit-box;
 overflow:hidden
}
.item-lockup__subtitle-links {
 color:var(--systemSecondary);
 font-size:13px;
 font-weight:400;
 letter-spacing:0;
 line-height:1.45
}
.item-lockup__subtitle-links:lang(th) {
 line-height:1.75
}
.item-lockup__subtitle-links:lang(ar) {
 font-family:-apple-system,BlinkMacSystemFont,Apple Color Emoji,SF Pro,Arabic UI Text,SF Pro Icons,Segoe UI,Helvetica Neue,Helvetica,Arial,sans-serif
}
.item-lockup__subtitle-links.is-multiline {
 -webkit-line-clamp:2;
 -webkit-box-orient:vertical;
 display:-webkit-box;
 overflow:hidden
}
.item-lockup__explicit-wrap {
 display:inline-block;
 margin-left:auto
}
.item-lockup__controls {
 border-radius:inherit;
 height:100%;
 opacity:0;
 position:absolute;
 top:0;
 transition:opacity .1s ease-in;
 width:100%;
 z-index:2
}
.item-lockup {
 cursor:pointer;
 height:100%
}
.artwork {
 background-color: var(--artwork-bg-color);
 border-radius:inherit;
 box-sizing:border-box;
 contain:content;
 height:var(--artwork-override-height, 100%);
 max-height:var(--artwork-override-max-height, none);
 max-width:var(--artwork-override-max-width, none);
 min-height:var(--artwork-override-min-height, 0);
 overflow:hidden;
 position:relative;
 width:var(--artwork-override-width, 100%);
 z-index:1
}

.artwork:after {
 border-radius:var(--afterShadowBorderRadius, 4px);
 box-shadow:inset 0 0 0 1px rgba(128,128,128,0.1);
 content:"";
 display:block;
 height:0;
 max-height:100%;
 max-width:100%;
 min-height:100%;
 min-width:100%;
 pointer-events:none;
 position:absolute;
 top:0;
 width:100%;
 z-index:2
}

.artwork--aspect-ratio:not(.artwork--downloaded),
.artwork--error {
 overflow:hidden
}
.artwork--aspect-ratio:not(.artwork--downloaded):after,
.artwork--aspect-ratio:not(.artwork--downloaded):before,
.artwork--error:after,
.artwork--error:before {
 box-sizing:border-box;
 content:"";
 display:block;
 padding-bottom:calc(100%/var(--override-aspect-ratio, var(--aspect-ratio)))
}

.artwork--aspect-ratio:not(.artwork--downloaded):after,
.artwork--error:after {
 min-height:0
}

.artwork--aspect-ratio:not(.artwork--downloaded)>:first-child,
.artwork--aspect-ratio:not(.artwork--downloaded)>noscript>:first-child,
.artwork--error>:first-child,
.artwork--error>noscript>:first-child {
 height:var(--artwork-override-height, none);
 left:50%;
 max-height:var(--artwork-override-max-height, none);
 max-width:var(--artwork-override-max-width, none);
 min-height:var(--artwork-override-min-height, 0);
 position:absolute;
 top:50%;
 transform:translateY(-50%) translateX(-50%);
 width:var(--artwork-override-width, 100%);
 z-index:1;
 background-color: var(--artwork-bg-color);
}

.artwork--aspect-ratio:not(.artwork--downloaded)>img,
.artwork--aspect-ratio:not(.artwork--downloaded)>noscript>img,
.artwork--error>img,
.artwork--error>noscript>img {
 height:auto;
 min-height:var(--artwork-override-min-height, 0)
}

/* background of lazy-box also uses same var */
.lazy-box {
    background: var(--artwork-bg-color);
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.lazy {
    background-color: var(--artwork-bg-color);
}

.lazy-box img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    opacity: 0;                  /* hidden first */
    transition: opacity 1s ease; /* fade in */
    filter: blur(6px);           /* optional blur while loading */
}

.lazy-box img.loaded {
    opacity: 1;
    filter: blur(0);
}

/* ======================================================================
   MR-PUNJAB DJ-STYLE SITE SHELL + DIRECTORY PAGES
   Added 2026-07-22. These selectors intentionally override old globals.
   ====================================================================== */

:root {
    --mp-purple: #7541d8;
    --mp-purple-2: #8654df;
    --mp-purple-soft: #f2edff;
    --mp-page-bg: #f5f5f7;
    --mp-card-bg: #ffffff;
    --mp-card-alt: #edf2f8;
    --mp-border: #d9dee7;
    --mp-text: #18233d;
    --mp-muted: #61708a;
    --mp-link: #00758b;
    --mp-footer: #304b7c;
    --mp-footer-text: #ffffff;
    --mp-shadow: 0 8px 26px rgba(20, 31, 58, .07);
    --mp-radius: 18px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --mp-page-bg: #111318;
        --mp-card-bg: #1b1e25;
        --mp-card-alt: #222731;
        --mp-border: #333946;
        --mp-text: #f3f5fa;
        --mp-muted: #a8b0c1;
        --mp-link: #5ed6e4;
        --mp-footer: #1d2e51;
        --mp-shadow: 0 8px 26px rgba(0, 0, 0, .25);
    }
}
 
.mp-site-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mp-site-header {
    margin: 18px 23px 0;
}

.mp-brand-bar {
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #6b34ce 0%, var(--mp-purple-2) 100%);
    color: #fff !important;
    font-size: clamp(25px, 2.3vw, 34px);
    font-weight: 900;
    letter-spacing: .18em;
    text-decoration: none !important;
    text-transform: uppercase;
}

.mp-search-area {
    width: min(760px, 100%);
    min-height: 66px;
    margin: 14px 0 15px;
}

/* Google CSE search box - cleaned to match the screenshot */
.mp-search-area .gsc-control-cse,
.mp-search-results .gsc-control-cse {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    font-family: inherit !important;
}

.mp-search-area form.gsc-search-box,
.mp-search-area table.gsc-search-box {
    margin: 0 !important;
}

.mp-search-area .gsc-search-box-tools .gsc-search-box .gsc-input {
    padding: 0 !important;
}

.mp-search-area .gsc-input-box {
    height: 64px !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: 4px !important;
    background: var(--mp-card-bg) !important;
    box-shadow: none !important;
}

.mp-search-area input.gsc-input {
    height: 62px !important;
    padding: 0 18px 0 48px !important;
    border: 0 !important;
    color: var(--mp-text) !important;
    font-size: 16px !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 17px center !important;
}

.mp-search-area .gsc-search-button,
.mp-search-area .gsc-clear-button {
    display: none !important;
}

.mp-main-nav {
    display: flex;
    align-items: stretch;
    min-height: 54px;
    overflow-x: auto;
    border-top: 1px solid var(--mp-border);
    border-bottom: 1px solid var(--mp-border);
    scrollbar-width: none;
}

.mp-main-nav::-webkit-scrollbar {
    display: none;
}

.mp-main-nav a {
    min-width: max-content;
    display: flex;
    align-items: center;
    padding: 0 22px;
    color: var(--mp-link) !important;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none !important;
}

.mp-main-nav a:hover {
    background: var(--mp-purple-soft);
    color: var(--mp-purple) !important;
}

.mp-main-nav a.is-active {
    background: var(--systemPrimary-vibrantText);
    color: #fff !important;
}

.mp-site-main {
    flex: 1 0 auto;
    min-height: 550px;
    margin: 0 23px;
    padding: 31px 0 80px;
}

.mp-site-main > .global-footer-display {
    display: none !important;
}

.mp-section-head {
    margin: 0 0 26px;
    background: var(--mp-card-bg);
    border: 1px solid rgba(0, 0, 0, .035);
}

.mp-section-head h1 {
    min-height: 50px;
    margin: 0 !important;
    padding: 10px 15px !important;
    display: flex;
    align-items: center;
    background: var(--systemPrimary-vibrantText);
    color: #fff !important;
    font-size: clamp(20px, 1.55vw, 27px) !important;
    font-weight: 800 !important;
    line-height: 1.15;
}

.mp-section-head h1 span {
    margin-right: 6px;
    font-size: .92em;
}

.mp-section-head p {
    margin: 0;
    padding: 15px;
    color: var(--mp-muted);
    font-size: 16px;
}

.mp-alphabet-landing {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    margin-top: 4px;
    border-top: 1px solid var(--mp-border);
    border-left: 1px solid var(--mp-border);
    background: var(--mp-card-bg);
}

.mp-alphabet-card {
    min-height: 92px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px;
    border-right: 1px solid var(--mp-border);
    border-bottom: 1px solid var(--mp-border);
    color: var(--mp-text) !important;
    text-decoration: none !important;
    transition: background .18s ease, transform .18s ease;
}

.mp-alphabet-card:hover {
    z-index: 1;
    background: var(--moreby);
    transform: translateY(-1px);
}

.mp-alphabet-card strong {
    font-size: clamp(24px, 2vw, 31px);
    line-height: 1;
    font-weight: 800;
}

.mp-alphabet-card span {
    color: var(--mp-muted);
    font-size: 13px;
    font-weight: 600;
}

.mp-alphabet-card i {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ff1744;
    font-size: 26px;
    font-style: normal;
    line-height: 1;
}

.mp-letter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 9px;
    background: var(--systemQuinary);
}

.mp-letter-nav a {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border: 1px solid rgba(0, 0, 0, .035);
    border-radius: 2px;
    background: var(--mp-card-bg);
    color: var(--mp-text) !important;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none !important;
}

.mp-letter-nav a:hover,
.mp-letter-nav a.is-active {
    background: var(--systemPrimary-vibrantText);
    color: #fff !important;
}

.mp-artist-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--mp-border);
    border-left: 1px solid var(--mp-border);
    background: var(--mp-card-bg);
}

.mp-artist-card {
    min-width: 0;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-right: 1px solid var(--mp-border);
    border-bottom: 1px solid var(--mp-border);
    color: var(--mp-link) !important;
    text-decoration: none !important;
}

.mp-artist-card:nth-child(8n+2),
.mp-artist-card:nth-child(8n+4),
.mp-artist-card:nth-child(8n+5),
.mp-artist-card:nth-child(8n+7) {
    background: var(--mp-card-alt);
}

.mp-artist-card:hover {
    background: var(--navbarss-color) !important;
}

.mp-artist-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    background: var(--systemPrimary-vibrantText);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .02em;
}

.mp-artist-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.mp-year-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
padding: 12px;
}

.mp-year-card {
    min-height: 116px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px;
    border: 1px solid rgba(117, 65, 216, .08);
    border-radius: 22px;
    background: var(--systemQuinary-vibrant);
    box-shadow: var(--mp-shadow);
    color: var(--mp-text) !important;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease;
}

.mp-year-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(50, 34, 92, .12);
}

.mp-year-card strong {
    font-size: clamp(31px, 3vw, 45px);
    line-height: 1;
    font-weight: 850;
}

.mp-year-card span {
    margin-top: 10px;
    color: var(--mp-muted);
    font-size: 14px;
}

.mp-album-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 30px 22px;
}

.mp-album-card {
    min-width: 0;
    margin: 0;
}

.mp-album-art {
    aspect-ratio: 1 / 1;
    display: block;
    overflow: hidden;
    border: 1px solid var(--mp-border);
    border-radius: 2px;
    background: var(--mp-card-bg);
    box-shadow: 0 4px 14px rgba(25, 35, 55, .04);
}

.mp-album-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .3s ease;
}

.mp-album-card:hover .mp-album-art img {
    transform: scale(1.035);
}

.mp-album-card h2 {
    margin: 9px 0 3px !important;
    padding: 0 !important;
    overflow: hidden;
    color: var(--mp-text);
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-album-card h2 a {
    color: inherit !important;
    text-decoration: none !important;
}

.mp-album-card p,
.mp-album-card > span {
    display: block;
    margin: 0;
    overflow: hidden;
    color: var(--mp-link);
    font-size: 12px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-album-card > span {
    margin-top: 2px;
    color: var(--mp-muted);
}

.mp-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: -8px 0 24px;
}

.mp-category-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 13px;
    border: 1px solid var(--mp-border);
    border-radius: 3px;
    background: var(--mp-card-bg);
    color: var(--mp-link) !important;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none !important;
}

.mp-category-tabs a:hover,
.mp-category-tabs a.is-active {
    background: var(--systemPrimary-vibrantText);
    color: #fff !important;
}

.mp-release-list {
    overflow: hidden;
    border: 1px solid var(--mp-border);
padding-top: 24px;
}

.mp-release-row {
    min-height: 55px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 8px;
    border-bottom: 1px solid var(--mp-border);
    text-decoration: none !important;
}

.mp-release-row:nth-child(even) {
    background: var(--mp-card-alt);
}

.mp-release-row:last-child {
    border-bottom: 0;
}

.mp-release-row:hover {
    background: var(--mp-purple-soft);
}

.mp-release-row img {
    width: 42px;
    height: 42px;
    display: block;
    object-fit: cover;
    border: 1px solid var(--mp-border);
    border-radius: 3px;
    background: var(--mp-card-alt);
}

.mp-release-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mp-release-copy strong,
.mp-release-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



.mp-release-copy small {
    margin-top: 2px;
    font-size: 12px;
}

.mp-release-row > i {
    color: var(--mp-muted);
    font-size: 24px;
    font-style: normal;
    line-height: 1;
}

.mp-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 30px 0 0;
}

.mp-page-btn,
.mp-page-gap {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mp-border);
    border-radius: 2px;
    background: var(--mp-card-bg);
    color: var(--mp-text) !important;
    font-size: 14px;
    text-decoration: none !important;
}

.mp-page-btn:hover,
.mp-page-btn.is-current {
    border-color: var(--systemPrimary-vibrantText);
    background: var(--systemPrimary-vibrantText);
    color: #fff !important;
}

.mp-page-arrow {
    font-size: 23px;
}

.mp-page-gap {
    border-color: transparent;
    background: transparent;
}

.mp-empty-state {
    grid-column: 1 / -1;
    padding: 40px 18px;
    border: 1px solid var(--mp-border);
    background: var(--mp-card-bg);
    color: var(--mp-muted);
    text-align: center;
}

.mp-search-results {
    min-height: 420px;
    padding: 15px;
    border: 1px solid var(--mp-border);
    background: var(--mp-card-bg);
}

/* New footer */
.mp-site-footer {
    flex: 0 0 auto;
    padding: 30px 23px 23px;
    background: var(--mp-footer);
    color: var(--mp-footer-text);
}

.mp-footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 30px;
    align-items: start;
}

.mp-footer-brand {
    display: inline-block;
    color: #fff !important;
    font-size: 25px;
    font-weight: 850;
    letter-spacing: .03em;
    text-decoration: none !important;
}

.mp-footer-about p {
    max-width: 620px;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, .9);
    font-size: 16px;
    line-height: 1.55;
}

.mp-footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 18px 25px;
}

.mp-footer-nav a,
.mp-footer-bottom a,
.mp-admin-tools a {
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
}

.mp-footer-nav a:hover,
.mp-footer-bottom a:hover,
.mp-admin-tools a:hover {
    text-decoration: underline !important;
}

.mp-footer-seo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 25px;
    color: #fff;
    font-size: 18px;
}

.mp-footer-keywords {
    margin-top: 20px;
    color: #fff;
    font-size: 17px;
    font-weight: 750;
}

.mp-footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    color: rgba(255, 255, 255, .92);
    font-size: 14px;
}

.mp-admin-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.mp-admin-tools a {
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 3px;
    font-size: 12px;
}

@media (max-width: 1100px) {
    .mp-alphabet-landing {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .mp-album-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .mp-site-header {
        margin: 12px 14px 0;
    }

    .mp-site-main {
        margin: 0 14px;
        padding-top: 22px;
    }

    .mp-main-nav a {
        padding: 0 17px;
    }

    .mp-artist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mp-year-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mp-footer-top {
        grid-template-columns: 1fr;
    }

    .mp-footer-nav {
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .mp-site-header {
        margin: 9px 9px 0;
    }

    .mp-brand-bar {
        height: 48px;
        font-size: 22px;
        letter-spacing: .14em;
    }

    .mp-search-area {
        min-height: 56px;
        margin: 10px 0;
    }

    .mp-search-area .gsc-input-box,
    .mp-search-area input.gsc-input {
        height: 54px !important;
    }

    .mp-main-nav {
        min-height: 47px;
    }

    .mp-main-nav a {
        padding: 0 14px;
        font-size: 14px;
    }

    .mp-site-main {
        margin: 0 9px;
        padding: 18px 0 50px;
    }

    .mp-section-head {
        margin-bottom: 18px;
    }

    .mp-section-head h1 {
        min-height: 44px;
        font-size: 18px !important;
    }

    .mp-section-head p {
        padding: 12px;
        font-size: 14px;
    }

    .mp-alphabet-landing {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mp-alphabet-card {
        min-height: 86px;
    }

    .mp-letter-nav {
        gap: 5px;
        padding: 7px;
    }

    .mp-letter-nav a {
        min-width: 31px;
        height: 31px;
        padding: 0 7px;
        font-size: 12px;
    }

    .mp-artist-grid {
        grid-template-columns: 1fr;
    }

    .mp-artist-card:nth-child(n) {
        background: var(--mp-card-bg);
    }

    .mp-artist-card:nth-child(even) {
        background: var(--navbarss-color);
    }

    .mp-year-grid {
        gap: 12px;
    }

    .mp-year-card {
        min-height: 100px;
        padding: 17px;
        border-radius: 16px;
    }

    .mp-year-card strong {
        font-size: 30px;
    }

    .mp-album-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px 13px;
    }

    .mp-release-row {
        padding-right: 8px;
    }

    .mp-site-footer {
        padding: 25px 14px 19px;
    }

    .mp-footer-seo {
        grid-template-columns: 1fr;
        gap: 10px;
        font-size: 16px;
    }

    .mp-footer-nav {
        gap: 12px 17px;
    }

    .mp-footer-bottom {
        flex-direction: column;
        gap: 8px;
    }
}

/* =====================================================
   APPLE STYLE HORIZONTAL ALBUM CARDS
===================================================== */

.mp-album-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px 30px !important;
    padding: 20px 2% 35px !important;
    box-sizing: border-box !important;
}

.mp-album-card {
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.mp-album-card-link {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 105px !important;
    padding: 18px 20px !important;
    box-sizing: border-box !important;

    background: var(--systemQuinary);
    border: 1px solid #d0d0d0 !important;
    border-radius: 14px !important;

    color: #1d1d1f !important;
    text-decoration: none !important;

    overflow: hidden !important;
    transition:
        background-color .2s ease,
        transform .2s ease !important;
}

.mp-album-card-link:hover {
    background: #dfdfdf !important;
    color: #1d1d1f !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

.mp-album-art {
    display: block !important;
    flex: 0 0 64px !important;
    width: 64px !important;
    height: 64px !important;
    margin-right: 16px !important;

    border-radius: 10px !important;
    overflow: hidden !important;
    background: #d8d8d8 !important;
}

.mp-album-art img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 10px !important;
}

.mp-album-card-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
}

.mp-album-name {
    display: block !important;
    max-width: 100% !important;

    color: #1d1d1f !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.mp-album-meta {
    display: block !important;
    max-width: 100% !important;
    margin-top: 2px !important;

    color: #6e6e73 !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.mp-album-year {
    display: block !important;
    margin-top: 3px !important;

    color: #777 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* Tablet and mobile: one card per row */
@media only screen and (max-width: 1000px) {

    .mp-album-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 15px 2% 30px !important;
    }

    .mp-album-card-link {
        min-height: 105px !important;
        padding: 18px 20px !important;
    }
}

/* Small mobile */
@media only screen and (max-width: 483px) {

    .mp-album-grid {
        gap: 12px !important;
        padding: 14px 10px 25px !important;
    }

    .mp-album-card-link {
        min-height: 92px !important;
        padding: 13px 14px !important;
        border-radius: 12px !important;
    }

    .mp-album-art {
        flex-basis: 62px !important;
        width: 62px !important;
        height: 62px !important;
        margin-right: 13px !important;
        border-radius: 9px !important;
    }

    .mp-album-art img {
        border-radius: 9px !important;
    }

    .mp-album-name {
        font-size: 17px !important;
    }

    .mp-album-meta {
        font-size: 14px !important;
    }

    .mp-album-year {
        font-size: 11px !important;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {

    .mp-album-card-link {
        background: #2c2c2e !important;
        border-color: #3a3a3c !important;
        color: #fff !important;
    }

    .mp-album-card-link:hover {
        background: #3a3a3c !important;
    }

    .mp-album-name {
        color: #fff !important;
    }

    .mp-album-meta,
    .mp-album-year {
        color: #a1a1a6 !important;
    }
}
/* Album rows using old listitem alternate colors */

a.mp-release-row.listitem {
    background-color: var(--tracklistAltRowColor) !important;
    border-top: 1px solid rgba(0,0,0,.1) !important;
    border-left: 0 !important;
}

a.mp-release-row.listitem-4 {
    background-color: var(--navbarss-color) !important;
    border-top: 1px solid rgba(0,0,0,.1) !important;
    border-left: 0 !important;
}

a.mp-release-row.listitem:hover,
a.mp-release-row.listitem-4:hover {
    color: var(--systemBluebg) !important;
    background-color: var(--navbarss-color) !important;
    text-decoration: none !important;
}
/* MOBILE PAGE SIDE NU HILAN / EXTRA WIDTH FIX */

html,
body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

*,
*::before,
*::after {
    box-sizing: border-box !important;
}

#main,
.page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

.mp-release-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

a.mp-release-row {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

a.mp-release-row img {
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 58px !important;
    max-width: 58px !important;
    object-fit: cover !important;
}

.mp-release-copy {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.mp-release-copy strong,
.mp-release-copy small {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

a.mp-release-row > i {
    flex: 0 0 auto !important;
    margin-left: 8px !important;
}

@media only screen and (max-width: 600px) {

    .mp-release-list {
        padding: 10px 8px 25px !important;
    }

    a.mp-release-row {
        padding: 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .mp-release-copy strong {
        font-size: 15px !important;
    }

    .mp-release-copy small {
        font-size: 12px !important;
    }
}
</style>