/* Shop page (templates/website/products.html) */

.shop-hero {
    padding-top: 2rem;
}

.shop-hero-search {
    max-width: 640px;
    margin-top: 2rem;
}

.text-link {
    color: var(--gold-dark);
    font-weight: 700;
    text-decoration: none;
}

.text-link:hover {
    color: var(--navy);
}

/* Product cards need a positioning context for the whole-card overlay
   link and the quick-view/badges that must sit above it. */
.product-card {
    position: relative;
}

.card-link-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.product-card .card-body {
    position: relative;
    z-index: 2;
}

.product-badges .tag {
    margin-bottom: 0;
    padding: 4px 12px;
    font-size: 0.75rem;
}

.tag-brand {
    background: var(--card-2) !important;
    color: var(--text);
    border: 1px solid var(--border);
}

.product-card-actions .btn {
    position: relative;
    z-index: 2;
}

.product-rail {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x proximity;
}

.product-rail .product-card {
    scroll-snap-align: start;
}


.facet-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    text-decoration: none;
    transition: 0.25s;
}

.facet-tile:hover {
    border-color: var(--gold);
    box-shadow: var(--shadow-sm);
    transform: translateY(-3px);
}

.facet-tile-name {
    color: var(--navy);
    font-weight: 700;
}

.facet-tile-count {
    color: var(--muted);
    font-size: 0.85rem;
}

/* Sidebar filters */
.shop-filters {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 24px;
    position: sticky;
    top: 100px;
    box-shadow: var(--shadow-sm);
}

.filter-group {
    margin-bottom: 18px;
}

.filter-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    margin-bottom: 6px;
}

/* Toolbar / sort / view toggle */
.shop-toolbar .dropdown-menu {
    background: var(--card);
    border: 1px solid var(--border);
}

.shop-toolbar .dropdown-item {
    color: var(--text);
}

.shop-toolbar .dropdown-item:hover,
.shop-toolbar .dropdown-item.active {
    background: var(--gold);
    color: var(--navy);
}

/* Grid / List view toggle */
.product-grid.list-view {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.product-grid.list-view .product-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.product-grid.list-view .product-image {
    width: 240px;
    height: auto;
    flex-shrink: 0;
}

.product-grid.list-view .card-body {
    flex: 1;
}

.product-grid.list-view .product-card-actions {
    max-width: 420px;
}

@media (max-width: 768px) {
    .product-grid.list-view .product-card {
        flex-direction: column;
    }
    .product-grid.list-view .product-image {
        width: 100%;
        height: 220px;
    }
    .shop-filters {
        position: static;
    }
}

/* The catalog owns its grid dimensions. Keeping them here prevents the
   homepage and detail gallery rules from changing shop card sizes. */
.shop-hero{
    padding:3rem 0 3.5rem;
    background:var(--navy);
}

.shop-hero h1{margin-bottom:1rem;color:#fff;}
.shop-hero .eyebrow{color:var(--gold);}
.shop-hero .lead{max-width:700px;color:#C7D2E6;margin-left:auto;margin-right:auto;}
.shop-hero-search .input-group{overflow:hidden;border-radius:999px;box-shadow:var(--shadow);}
.shop-hero-search .form-control{border:0;background:#fff;box-shadow:none;}
.shop-hero-search .btn{border-radius:0;padding-left:1.6rem;padding-right:1.6rem;}
.shop-browse{padding-top:5rem;}

.product-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.25rem;
}

.product-grid .product-card{min-width:0;}
.product-card .product-badges{min-height:2rem;align-items:flex-start;}
.product-card .tag{margin-bottom:0;}
.product-card .badge{padding:.42rem .65rem;border-radius:999px;font-size:.68rem;}
.product-card-actions{margin-top:auto;}
.product-card-actions .btn{min-height:44px;}
.product-card-actions .d-flex{flex-wrap:nowrap;}
.product-card-actions .d-flex .btn{padding-left:.7rem;padding-right:.7rem;white-space:nowrap;}
.product-card-actions .d-flex .btn:not(.flex-grow-1){flex:0 0 auto;width:44px;padding-left:0;padding-right:0;}
.card-link-overlay{border-radius:inherit;}
.quick-view-image{width:100%;height:360px;object-fit:contain;padding:1rem;background:var(--bg-2);}
.quick-view-image.product-image-placeholder{object-fit:contain;padding:2.5rem;}

.product-rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(260px,300px);overflow-x:auto;padding:0 .1rem .75rem;scrollbar-color:var(--gold) var(--bg-2);}
.product-rail .product-card{scroll-snap-align:start;}
.product-rail::-webkit-scrollbar{height:8px;}
.product-rail::-webkit-scrollbar-thumb{background:var(--gold);border-radius:99px;}

.shop-toolbar{padding-bottom:1rem;border-bottom:1px solid var(--border);}
.pagination{--bs-pagination-bg:#fff;--bs-pagination-border-color:var(--border);--bs-pagination-color:var(--navy);--bs-pagination-hover-bg:var(--navy-soft);--bs-pagination-hover-color:var(--navy);--bs-pagination-active-bg:var(--gold);--bs-pagination-active-border-color:var(--gold);--bs-pagination-active-color:var(--navy);}

.product-grid.list-view .product-card{min-height:220px;}
.product-grid.list-view .product-image{width:240px;height:auto;min-height:220px;}
.product-grid.list-view .product-card p{max-width:62ch;}

@media(min-width:1200px){
    .shop-browse .product-grid:not(.list-view){grid-template-columns:repeat(4,minmax(0,1fr));}
}

@media(max-width:1199px){
    .product-grid:not(.product-rail){grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Mobile filter drawer - Bootstrap's own .collapse handles show/hide;
   this just styles it so it reads as a dropdown panel, not a stray card. */
.shop-filters-toggle{border-radius:12px;font-weight:600;}
@media(max-width:991px){
    .shop-filters{position:static;margin-bottom:0;}
}

@media(max-width:767px){
    .shop-hero{padding:2.25rem 0 2.75rem;}
    .shop-hero-search .input-group{display:flex;flex-direction:column;border-radius:18px;}
    .shop-hero-search .btn{width:100%;border-radius:0;}
    .product-grid:not(.product-rail){grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;}
    .product-grid .product-card .card-body{padding:.9rem;}
    .product-grid .product-card h3{font-size:.92rem;}
    .product-grid .product-card p{font-size:.78rem;min-height:4.5em;}
    .product-grid .product-image{height:170px;}
    .product-grid:not(.product-rail):not(.list-view) .product-card-actions .d-flex{flex-wrap:wrap;}
    .product-grid:not(.product-rail):not(.list-view) .product-card-actions .d-flex .btn.flex-grow-1{flex:1 0 100%;width:100%;}
    .product-grid:not(.product-rail):not(.list-view) .product-card-actions .d-flex .btn:not(.flex-grow-1){flex:1 1 calc(50% - .4rem);width:auto;}
    .product-grid.list-view{display:flex;}
    .product-grid.list-view .product-card{min-height:0;}
    .product-grid.list-view .product-image{width:100%;height:210px;min-height:0;}
    .product-grid.list-view .product-card-actions .d-flex{flex-wrap:wrap;}
    .product-grid.list-view .product-card-actions .d-flex .btn{width:100%;}
    .quick-view-image{height:260px;}
}

@media(max-width:420px){
    .product-grid:not(.product-rail){grid-template-columns:1fr;}
    .product-grid .product-image{height:230px;}
}

.shop-hero{
    padding:4.5rem 0 4.75rem;
    background:linear-gradient(90deg,rgba(7,29,59,.94),rgba(7,29,59,.72)),url("../images/company-profile/about-warehouse-boxes.226668ffcf6d.jpg") center/cover no-repeat;
}
.shop-hero h1{font-size:clamp(2.25rem,4vw,3.5rem);}
.shop-hero-search{max-width:700px;}
.shop-hero-search .form-control{min-height:54px;}
.shop-browse{background:var(--bg-2);}
.shop-filters{background:#fff;}
.shop-filters h5{color:var(--navy);}
.shop-browse .contact-card{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.shop-browse .contact-card h2{color:var(--navy);}
.shop-browse .contact-card p{color:var(--text-body);}
.shop-browse .contact-card .eyebrow{color:var(--blue);}
.product-card .tag{background:#EAF4FF;color:var(--blue);}
.product-card .tag-brand{background:var(--gold-soft)!important;color:var(--gold-dark);}
.product-card .price-line{color:var(--navy-2);}
.shop-toolbar{border-bottom-color:var(--border);}