.band-card{position:var(--card-foundation-position);background:var(--card-foundation-background);border:var(--card-foundation-border);border-radius:var(--card-foundation-border-radius);overflow:var(--card-foundation-overflow);cursor:var(--card-foundation-cursor);font-family:var(--card-foundation-font-family);color:inherit;transition:var(--card-foundation-transition);text-decoration:none;display:block}.band-card:hover{transform:var(--card-foundation-hover-transform);box-shadow:var(--card-foundation-hover-shadow)}.band-card-image{position:var(--card-image-position);width:var(--card-image-width);aspect-ratio:1;background:var(--card-image-background);display:var(--card-image-display);align-items:var(--card-image-align-items);justify-content:var(--card-image-justify-content);overflow:var(--card-image-overflow)}.band-card-image img{object-fit:cover;z-index:1;width:100%;height:100%;transition:opacity .3s;position:absolute;top:0;left:0}.band-card-image img.loading{opacity:0}.band-card-image img.loaded{opacity:1}.band-card-skeleton{z-index:0;width:100%;height:100%;position:absolute;top:0;left:0}.band-card-placeholder{width:60%;height:60%;color:var(--color-text-tertiary);justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.band-card-placeholder .band-icon{width:100%;height:100%}.band-card-image.show-placeholder .band-card-placeholder{z-index:2}.band-card-content{padding:var(--spacing-sm) 0;color:var(--color-text-inverse);font-family:var(--font-family-primary)}.band-card-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);margin:0 0 var(--spacing-xs) 0;color:var(--color-text-inverse);line-height:var(--line-height-tight);border-bottom:1px solid var(--color-neutral-600);padding-bottom:var(--spacing-xs);padding-right:40px}.band-card-pricing{gap:var(--spacing-xxs);flex-direction:column;display:flex}.band-card-pricing .price-with-quality{font-size:var(--font-size-xs);justify-content:space-between;align-items:center;display:flex}.band-card-pricing .quality-label{color:var(--color-neutral-400);font-weight:var(--font-weight-medium);align-items:center;gap:var(--spacing-xs);display:inline-flex}.band-card-pricing .quality-price{color:var(--color-text-inverse);font-weight:var(--font-weight-light)}.band-card-pricing .price-with-quality .quality-price.price-unavailable{color:var(--color-neutral-400);font-style:italic;font-size:var(--font-size-micro)}
.band-header-stack{top:var(--header-height,60px);z-index:var(--z-index-fixed);background:var(--color-surface-black);flex-direction:column;display:flex;position:fixed;left:0;right:0}.band-header-stack:before{content:"";background:var(--color-surface-black);z-index:-1;height:52px;position:absolute;top:-2px;left:0;right:0}.band-breadcrumb-bar{background:var(--color-surface-black);min-height:36px}.band-breadcrumb-content{min-height:36px;padding:var(--spacing-xs) var(--spacing-md);max-width:var(--layout-max-width);justify-content:space-between;align-items:center;margin:0 auto;display:flex}.band-breadcrumb-nav{align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-ui-navigation);font-family:var(--font-family-primary);flex:1;display:flex}.band-breadcrumb-item{color:var(--color-text-tertiary);font-weight:var(--font-weight-normal)}.band-breadcrumb-item a{color:inherit;text-decoration:none;transition:color .15s}.band-breadcrumb-item a:hover,.band-breadcrumb-item.active{color:var(--color-text-inverse)}.band-breadcrumb-separator{color:var(--color-border-muted);margin:0 var(--spacing-xs);-webkit-user-select:none;user-select:none}.band-header-controls{align-items:center;gap:var(--spacing-sm);justify-content:flex-end;min-height:32px;display:flex}.band-sort-dropdown{position:relative}.band-sort-trigger{align-items:center;gap:var(--spacing-sm);padding:0 var(--spacing-sm);color:var(--color-text-tertiary);font-size:var(--font-size-ui-navigation);font-family:var(--font-family-primary);cursor:pointer;white-space:nowrap;background:0 0;border:none;min-height:36px;display:flex}.band-sort-trigger:hover{color:var(--color-text-tertiary)}.band-sort-label{white-space:nowrap}.band-sort-chevron{color:var(--color-text-tertiary);transition:transform .2s}.band-sort-chevron.open{transform:rotate(180deg)}.band-sort-backdrop{z-index:99;position:fixed;inset:0}.band-sort-menu{background:var(--color-neutral-300);border:1px solid var(--color-border);width:max-content;min-width:200px;box-shadow:var(--shadow-lg);z-index:var(--z-index-dropdown);border-radius:0;margin:0;padding:0;list-style:none;position:absolute;top:calc(100% + 4px);right:0}.band-sort-option{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-ui-navigation);background:var(--color-neutral-300);color:var(--color-border);cursor:pointer;border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;min-height:44px;transition:all .15s;display:flex}.band-sort-option:last-child{border-bottom:none}.band-sort-option:hover,.band-sort-option.selected{background:var(--color-surface-hover);color:var(--color-text-inverse)}.band-results-bar{background:var(--color-surface-black);height:20px}.band-results-count{height:100%;padding:var(--spacing-xs) var(--spacing-md);max-width:var(--layout-max-width);font-size:var(--font-size-xs);color:var(--color-text-tertiary);font-family:var(--font-family-primary);align-items:center;margin:0 auto;display:flex}@media (max-width:767px){.band-breadcrumb-nav{white-space:nowrap;overflow:hidden}.band-breadcrumb-item.active{text-overflow:ellipsis;max-width:120px;overflow:hidden}.band-header-controls{min-width:80px;min-height:36px}}@media (min-width:1200px){.band-breadcrumb-content,.band-results-count{padding:var(--spacing-xs) var(--spacing-lg)}}
.band-grid-wrapper{width:100%}.band-grid{gap:var(--spacing-lg);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.band-grid-cell{content-visibility:auto;contain-intrinsic-size:auto 320px;min-width:0}.band-grid-empty{text-align:center;padding:var(--spacing-xxl) var(--spacing-lg);color:var(--color-text-secondary)}.band-grid-empty p{margin:var(--spacing-sm) 0}.band-grid-loading{justify-content:center;align-items:center;gap:var(--spacing-md);padding:var(--spacing-xl);color:var(--color-text-secondary);font-size:var(--font-size-sm);grid-column:1/-1;display:flex}.band-loading-spinner{border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:20px;height:20px;animation:.8s linear infinite band-spin}@keyframes band-spin{to{transform:rotate(360deg)}}@media (max-width:640px){.band-grid{gap:var(--spacing-md);grid-template-columns:repeat(2,1fr)}}
.bands-page{max-width:1400px;padding:var(--spacing-lg,24px);margin:0 auto;padding-top:64px}.bands-error{text-align:center;padding:var(--spacing-xxl,48px) var(--spacing-lg,24px);color:var(--color-text-secondary,#999)}.band-grid-skeleton{gap:var(--spacing-lg,24px);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.band-skeleton-card{background-color:var(--color-surface-hover,#2a2a2a);overflow:hidden}.band-skeleton-image{aspect-ratio:1;background:var(--color-surface-hover,#2a2a2a)}.band-skeleton-content{padding:var(--spacing-sm,8px)}.band-skeleton-line{background:var(--color-surface-hover,#2a2a2a);height:12px;margin-bottom:var(--spacing-xs,4px);border-radius:2px}.band-skeleton-line.short{width:60%}.band-skeleton-line.medium{width:80%}@media (max-width:640px){.bands-page{padding:var(--spacing-md,16px);padding-top:64px}}
