/*
 * AvidVinyl Build 057 — Browse Records Version 1.0
 * Visual catalogue polish only.
 * No search, sorting, pagination, basket or database logic changes.
 */

/* Use more of a wide desktop screen without going edge-to-edge. */
.catalogue-page{
    max-width:1600px !important;
    padding-left:32px !important;
    padding-right:32px !important;
}

/* With the helper paragraph removed, keep the heading clean and compact. */
.catalogue-heading{
    display:block !important;
    margin-bottom:30px !important;
}

/* Filters stay in the same layout; just make them a touch more comfortable. */
.catalogue-controls{
    gap:14px !important;
    padding:23px !important;
}

.catalogue-controls input,
.catalogue-controls select,
.catalogue-controls button{
    min-height:52px !important;
    height:52px !important;
}

.catalogue-controls input,
.catalogue-controls select{
    padding-left:14px !important;
    padding-right:14px !important;
}

/* Slightly more breathing room between cards on wide screens. */
.catalogue-grid:not(.list-view){
    gap:26px !important;
}

/* More generous card body spacing. */
.catalogue-grid:not(.list-view) .card-body{
    padding:22px !important;
}

/* Stronger hierarchy for quick collector scanning. */
.catalogue-grid .artist{
    font-size:1.18em !important;
    line-height:1.22 !important;
    margin-bottom:8px !important;
}

.catalogue-grid .card h3{
    font-size:1.04rem !important;
    line-height:1.32 !important;
    margin-bottom:13px !important;
}

.catalogue-grid .label-meta{
    margin-top:2px !important;
}

.catalogue-grid .condition-meta{
    margin-top:11px !important;
}

/* Price is one of the key scan points. */
.catalogue-grid .buy-row > strong{
    font-size:1.42rem !important;
    font-weight:700 !important;
}

/* Make View details a clearer action without changing its colour. */
.catalogue-grid .view-details{
    font-size:.84rem !important;
    font-weight:800 !important;
}

/* Preserve square images; wider cards naturally make artwork larger. */
.catalogue-grid:not(.list-view) .image-wrap{
    aspect-ratio:1 / 1;
}

/* Give the buying row a little more space. */
.catalogue-grid:not(.list-view) .buy-row{
    padding-top:20px !important;
    gap:14px !important;
}

/* Keep list view essentially unchanged apart from typography improvements. */
.catalogue-grid.list-view .card-body{
    padding:22px !important;
}

@media(min-width:1500px){
    .catalogue-page{
        max-width:1600px !important;
    }
}

@media(max-width:1050px){
    .catalogue-page{
        padding-left:24px !important;
        padding-right:24px !important;
    }

    .catalogue-grid:not(.list-view){
        gap:22px !important;
    }
}

@media(max-width:820px){
    .catalogue-page{
        padding-left:18px !important;
        padding-right:18px !important;
    }

    .catalogue-grid:not(.list-view) .card-body{
        padding:18px !important;
    }

    .catalogue-grid .artist{
        font-size:1.10em !important;
    }

    .catalogue-grid .card h3{
        font-size:1rem !important;
    }

    .catalogue-grid .buy-row > strong{
        font-size:1.28rem !important;
    }
}

@media(max-width:540px){
    .catalogue-page{
        padding-left:14px !important;
        padding-right:14px !important;
    }

    .catalogue-controls{
        padding:17px !important;
    }

    .catalogue-controls input,
    .catalogue-controls select,
    .catalogue-controls button{
        min-height:48px !important;
        height:48px !important;
    }

    .catalogue-grid:not(.list-view) .card-body{
        padding:14px !important;
    }

    .catalogue-grid .artist{
        font-size:1.04em !important;
    }

    .catalogue-grid .card h3{
        font-size:.96rem !important;
    }

    .catalogue-grid .buy-row > strong{
        font-size:1.18rem !important;
    }

    .catalogue-grid .view-details{
        font-size:.80rem !important;
    }
}

/* =========================================================
   AvidVinyl Build 071.0 — Browse Records mobile polish
   Compact the controls/A-Z area only; product cards unchanged.
   ========================================================= */
@media(max-width:540px){
    .catalogue-heading{
        margin-bottom:18px !important;
    }

    .catalogue-heading h1,
    .catalogue-page > h1{
        font-size:clamp(2.6rem,13vw,4rem) !important;
        line-height:1 !important;
    }

    .catalogue-controls{
        gap:9px !important;
        padding:12px !important;
    }

    .catalogue-controls label{
        margin-bottom:3px !important;
    }

    .catalogue-controls input,
    .catalogue-controls select,
    .catalogue-controls button{
        min-height:44px !important;
        height:44px !important;
    }

    .catalogue-controls input,
    .catalogue-controls select{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .catalogue-alpha,
    .alphabet-filter,
    .az-filter{
        gap:6px !important;
        margin-top:14px !important;
        margin-bottom:14px !important;
    }

    .catalogue-alpha a,
    .alphabet-filter a,
    .az-filter a{
        min-width:38px !important;
        min-height:38px !important;
        padding:7px 9px !important;
    }
}

/* =========================================================
   AvidVinyl Build 071.0 — Browse Records shared-header mobile fix
   Keeps desktop header unchanged.
   ========================================================= */
@media(max-width:720px){
    .site-header{
        width:100% !important;
        overflow:hidden !important;
    }

    .site-header .header-top{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto !important;
        align-items:center !important;
        gap:12px !important;
        width:100% !important;
        padding:11px 14px !important;
        background:linear-gradient(105deg,#ef171c 0%,#74427f 49%,#0759b8 100%) !important;
        box-sizing:border-box !important;
    }

    .site-header .brand{
        display:flex !important;
        align-items:center !important;
        min-width:0 !important;
        max-width:min(310px,65vw) !important;
        overflow:hidden !important;
    }

    .site-header .brand .site-logo{
        display:block !important;
        width:100% !important;
        max-width:310px !important;
        max-height:90px !important;
        object-fit:contain !important;
        object-position:left center !important;
    }

    .site-header .header-search{
        display:none !important;
    }

    .site-header .header-actions{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        min-width:auto !important;
        gap:0 !important;
    }

    .site-header .account-link{
        display:none !important;
    }

    .site-header .basket-button{
        min-width:48px !important;
        width:48px !important;
        min-height:48px !important;
        height:48px !important;
        padding:0 !important;
        border:0 !important;
        background:transparent !important;
        box-shadow:none !important;
    }

    .site-header .basket-button > span{
        display:none !important;
    }

    .site-header .basket-button #basketCount{
        display:grid !important;
        place-items:center !important;
        width:42px !important;
        min-width:42px !important;
        height:42px !important;
        padding:0 !important;
        border-radius:50% !important;
        background:#fff !important;
        color:#1f66b2 !important;
        font-size:16px !important;
        font-weight:800 !important;
    }

    .site-header .main-nav{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        width:100% !important;
        max-width:100% !important;
        min-height:auto !important;
        padding:6px 10px 8px !important;
        gap:0 !important;
        overflow:hidden !important;
        background:linear-gradient(90deg,#11161a,#0b0f12) !important;
        box-sizing:border-box !important;
    }

    .site-header .main-nav a{
        min-width:0 !important;
        min-height:48px !important;
        padding:0 6px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        text-align:center !important;
        color:#fff !important;
        font-size:11px !important;
        line-height:1.15 !important;
        font-weight:700 !important;
        white-space:normal !important;
    }

    .site-header .main-nav a:last-child{
        grid-column:1 / -1 !important;
        justify-self:center !important;
        width:50% !important;
    }
}

/* =========================================================
   AvidVinyl Build 071.0 — Browse Records mobile final pass
   Cover both shared-nav class variants and compact controls.
   ========================================================= */
@media(max-width:720px){
    .site-header .main-nav,
    .site-header .av-nav{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        width:100% !important;
        max-width:100% !important;
        min-height:auto !important;
        padding:6px 10px 8px !important;
        gap:0 !important;
        overflow:hidden !important;
        background:linear-gradient(90deg,#11161a,#0b0f12) !important;
        box-sizing:border-box !important;
    }

    .site-header .main-nav a,
    .site-header .av-nav a{
        min-width:0 !important;
        min-height:48px !important;
        padding:0 6px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        text-align:center !important;
        color:#fff !important;
        font-size:11px !important;
        line-height:1.15 !important;
        font-weight:700 !important;
        white-space:normal !important;
    }

    .site-header .main-nav a:last-child,
    .site-header .av-nav a:last-child{
        grid-column:1 / -1 !important;
        justify-self:center !important;
        width:50% !important;
    }
}

@media(max-width:540px){
    .catalogue-page{
        padding-top:22px !important;
    }

    .breadcrumbs{
        margin-bottom:14px !important;
        font-size:.92rem !important;
    }

    .catalogue-heading{
        margin-bottom:16px !important;
    }

    .catalogue-heading h1{
        margin:0 !important;
        font-size:2.65rem !important;
        line-height:1 !important;
    }

    .catalogue-controls{
        gap:7px !important;
        padding:10px !important;
    }

    .catalogue-controls label > span{
        margin-bottom:2px !important;
        font-size:.72rem !important;
    }

    .catalogue-controls input,
    .catalogue-controls select,
    .catalogue-controls button{
        min-height:42px !important;
        height:42px !important;
        font-size:.95rem !important;
    }

    .catalogue-controls button{
        margin-top:2px !important;
    }

    .alphabet{
        gap:6px !important;
        margin-top:12px !important;
        margin-bottom:14px !important;
    }

    .alphabet a{
        min-width:38px !important;
        min-height:38px !important;
        padding:7px 8px !important;
        font-size:.82rem !important;
    }
}

/* =========================================================
   AvidVinyl Build 071.0 — Browse Records mobile spacing adjustment
   Reduce only the gap below the mobile navigation.
   ========================================================= */
@media(max-width:540px){
    .catalogue-page{
        padding-top:10px !important;
    }

    .catalogue-page .breadcrumbs{
        margin-top:0 !important;
        margin-bottom:12px !important;
    }
}