/* DJU2Smooth Push #20.5.8 — full mobile website compatibility */
:root{--p2058-touch:44px;--p2058-safe-bottom:env(safe-area-inset-bottom,0px);--p2058-safe-top:env(safe-area-inset-top,0px)}
html{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:76px}
*,*::before,*::after{box-sizing:border-box}
body{max-width:100%;overflow-x:hidden}
img,svg,canvas,iframe,video{max-width:100%;height:auto}
video{display:block;background:#000}
a,button,input,select,textarea{touch-action:manipulation}
button,a[role="button"],input[type="button"],input[type="submit"],input[type="reset"],.btn,.mp-btn,.mp-pill{min-height:var(--p2058-touch)}
input,select,textarea{max-width:100%}
select,select option{background:#0b0b0b!important;color:#fff!important}
select{color-scheme:dark}
.audio-player,audio{max-width:100%;width:100%}
.table-wrap,.responsive-table,[data-table-wrap]{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Music page fixes requested in #20.5.8 */
.music-page .mp-genre-select{background:#090909!important;color:#fff!important;border:1px solid #d4af37!important;min-width:170px}
.music-page .mp-genre-select option{background:#090909!important;color:#fff!important}
.music-page .mp-pills{align-items:center}
.music-page .mp-pill{white-space:nowrap}

/* General mobile layout and purchasing */
@media(max-width:900px){
  body{padding-left:0!important;padding-right:0!important}
  .wrap,.container,.mp-wrap,.content,.page-wrap,.admin-wrap{width:min(100%,100vw)!important;max-width:100%!important;padding-left:16px!important;padding-right:16px!important}
  .grid,.cards,.card-grid,.service-grid,.gallery-grid,.video-grid,.merch-grid,.product-grid,.mp-grid,.mp-rail{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hero,.page-hero,.videos-hero,#music-hero{min-height:auto!important}
  .hero-content,.hero-copy{max-width:100%!important}
  .modal,.dialog,.checkout-modal,.purchase-modal,[role="dialog"]{max-width:calc(100vw - 24px)!important;width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important;overflow:auto!important;margin:12px!important}
  form{max-width:100%!important}
  form .row,.form-row,.field-row{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
  table{max-width:100%}
  .nav-links{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
}
@media(max-width:680px){
  body{font-size:16px}
  h1{font-size:clamp(30px,9vw,44px)!important;line-height:1.06!important}
  h2{font-size:clamp(24px,7vw,34px)!important;line-height:1.12!important}
  h3{font-size:clamp(20px,5.7vw,28px)!important}
  p,li{overflow-wrap:anywhere}
  input,select,textarea{font-size:16px!important;min-height:44px}
  textarea{min-height:110px}
  .grid,.cards,.card-grid,.service-grid,.gallery-grid,.video-grid,.merch-grid,.product-grid,.mp-grid,.mp-rail{grid-template-columns:1fr!important}
  .mp-tools{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .mp-search{max-width:none!important;width:100%!important}
  .mp-pills{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;padding-bottom:6px!important;-webkit-overflow-scrolling:touch}
  .mp-featured{padding:16px!important;gap:18px!important}
  .mp-featured img,.mp-cover-buy{max-width:100%!important}
  .mp-detail{overflow:hidden}
  .mp-detail table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #music-mini{padding-bottom:var(--p2058-safe-bottom)!important}
  #music-mini .mp-mini-in{gap:7px!important;padding-left:10px!important;padding-right:10px!important}
  #music-mini .mp-mini-bar{min-width:45px!important}
  .mp-nav .mp-wrap{display:grid!important;grid-template-columns:1fr auto!important;gap:8px!important;padding-top:8px!important;padding-bottom:8px!important}
  .mp-nav nav{grid-column:1/-1;order:3;width:100%;overflow:hidden}
  .mp-nav ul{flex-wrap:nowrap!important;overflow-x:auto!important;white-space:nowrap!important;padding-bottom:4px!important}
  .mp-nav .mp-btn{padding:10px 13px!important;font-size:12px!important}
  .header,.site-header,header{max-width:100vw}
  .header-inner,.site-header-inner{padding-left:12px!important;padding-right:12px!important}
  .hero img,.page-hero img{object-position:center center}
  .checkout-actions,.purchase-actions,.button-row,.actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .checkout-actions button,.purchase-actions button,.button-row button,.actions button{width:100%!important;justify-content:center!important}
  .price,.total,.checkout-total{font-size:1.15rem!important}
  [data-admin-panel],.admin-panel,.admin-card{max-width:100%!important;overflow-wrap:anywhere}
  .admin-grid,.admin-layout,.admin-shell{grid-template-columns:1fr!important}
  .admin-sidebar,.sidebar{position:static!important;width:100%!important;max-width:100%!important}
  .admin-main,.main-panel{width:100%!important;min-width:0!important}
}
@media(max-width:420px){
  .wrap,.container,.mp-wrap,.content,.page-wrap,.admin-wrap{padding-left:12px!important;padding-right:12px!important}
  .mp-nav .mp-wrap{grid-template-columns:1fr!important}
  .mp-nav .mp-btn{width:100%;justify-content:center}
  .mp-nav nav{grid-column:1}
  .mp-mini-title{max-width:28vw!important}
}
@media(orientation:landscape) and (max-height:500px){
  .modal,.dialog,[role="dialog"]{max-height:calc(100dvh - 12px)!important;margin:6px!important}
}
@media(pointer:coarse){
  button,a,.btn,.mp-btn,.mp-pill{min-height:44px}
  .mp-play{min-width:44px!important;min-height:44px!important}
}