main{ 
    display:flex; 
    flex-flow:column nowrap; 
    justify-content:start; 
    align-items:center; 
}
.top__content { 
    width:100%; 
    display: flex;
    justify-content: space-between;
    align-items:stretch; 
    position: relative;
    min-height: 800px;
    text-align: left; 
    margin-bottom: 40px; 
}
.top__image-block {
    width: 100%; 
    background-image: url('../images/cover/forcat.jpg');
    background-position: center;
    background-size: cover;
    position: relative;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3); 
    background-color: #f5f5f5;

}

.top__welcome-text {
    font-family: 'Playfair Display', serif; 
    font-size: 54px;
    color: white;
    padding: 240px 60px 20px;
    text-align: left;
    margin-bottom: 60px; 
    text-shadow: -1px -1px 2px #000;
    font-weight: bold;
}

/* Catalog Header */
.catalog-header {
    display: flex;
    justify-content:stretch;
    align-items: center;
    padding:0px;
    font-size: 20px; 
    width: 100%; 
    max-width: 1440px; 
    margin-bottom:40px; 
}

.breadcrumbs { 
    flex-grow:1; 
    flex-shrink:1; 
    display:flex; 
    justify-content:start; 
    padding-left: 30px;
    margin-left: 70px;
    margin-top: 20px;
    padding:0; 
    margin:0; 
}

.breadcrumbs-link {
    list-style: none; 
    display: flex; 
    justify-content:start; 
    align-items:start; 
    color: black; 
}

.breadcrumbs-link li.filler{
    padding: 0 10px;
    text-decoration:none; 
    cursor:default; 
}

.catalog-header .select {
    position: relative;
    float: right;
    margin-right: 140px;
    margin-top: 30px;
    margin:0; 
}

.catalog-header .select select {
    width: 280px;
    height: 35px;
    border: 1px solid rgb(196, 196, 196);
    border-radius: 10px;
    color: #000;
    font-family: Montserrat;
    font-size: 16px;
    padding: 5px 14px;
    appearance: none;
    font-family: "Work Sans", sans-serif;
    background:#fff;
}

.catalog-header .select::after {
    content: "";
    width: 20px;
    height: 11px;
    position: absolute;
    background-image: url(../img/icons/polygon.svg);
    background-repeat: no-repeat;
    top: 17px;
    right: 20px;
    pointer-events: none;
}

/* Button */
.add-to-cart-btn {
    width: 85%;
    padding: 8px;
    margin: 10px auto;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 10px;
    text-transform: uppercase;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
    display:flex; 
    flex-grow:0; 
    flex-shrink:0; 
    padding:0; 
    margin:0 auto; 
    min-height:35px; 
    justify-content: center;
}

.add-to-cart-btn:hover {
    background-color: #333;
}

/* Product Box */
.product-box {
    display: flex;
    flex-direction: column;
    margin-bottom: 80px;
    padding: 0px; 
    max-width:1440px; 
}

.product-card {
    transition: transform 0.3s ease, opacity 0.3s ease; 
    user-select:none;
}

.cameras__heading,
.gopro__heading,
.lenses__heading,
.accessories__heading {
    margin-left: 80px;
    font-size: 36px;
    font-family: "PT Serif Caption", serif; 
    width:100%; 
    text-align:left; 
    margin:0px 0px 40px 0px; 
}

.cameras__list,
.gopro__list,
.lenses__list,
.accessories__list {
    display: flex;
    flex-flow:row wrap;
    gap: 2%;
    justify-content: stretch; 
    align-items:start; 
    margin-left: 65px;
    margin-right: 65px; 
    margin:0; 
    width:100%; 
}

.cameras__item,
.gopro__item,
.lenses__item,
.accessories__item {
    flex: 0 0 23.5%;
    /*max-width: 350px;*/
    height: 430px;
    background-color: white;
    border: 1px solid #ddd;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content:stretch; 
    align-items:stretch; 
    border-radius: 10px;
    box-shadow: 3px 6px 12px rgba(0, 0, 0, 0.1); 
    margin-bottom:20px; 
    gap:10px; 
}

/*
.cameras__img,
.gopro__img,
.lenses__img,
.accessories__img {
    max-width: 90%;
    height: 190px;
    object-fit: contain;
    margin-bottom: 15px;
}
*/
.product-card .image{ 
    display:flex; 
    width:100%; 
    height:150px;  
    resize:both; 
    margin-bottom:20px; 
} 

.product-card .image img{
    width:100%; 
    height:100%; 
    object-fit:contain; 
    object-position:50% 50%; 
}

.cameras__item-name,
.gopro__item-name,
.lenses__item-name,
.accessories__item-name {
    font-size: 20px;
    padding: 0px;
    margin-bottom: 5px;
}

.product-card h3{
    flex-grow:0; 
    flex-shrink:0; 
}

.cameras__item-desc,
.gopro__item-desc,
.lenses__item-desc,
.accessories__item-desc {
    font-size: 16px;
    margin-bottom: 0px; 
    flex-grow:1; 
    flex-shrink:1; 
}

.cameras__prices,
.gopro__prices,
.lenses__prices,
.accessories__prices {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    flex-grow:0; 
    flex-shrink:0; 
}

.old__price {
    text-decoration: line-through;
    font-size: 20px;
    margin-bottom: 4px;
}


@media (max-width: 1440px) {
    /*.cameras__item,
    .gopro__item,
    .lenses__item,
    .accessories__item {
        flex: 1 1 calc(30% - 40px); 
    } */

    .catalog-header{
        padding:0px 20px; 
    } 
    .product-box{
        padding:0px 20px; 
    }
} 

@media (max-width:1280px){
    .cameras__list,
    .gopro__list,
    .lenses__list,
    .accessories__list { 
        gap:2%; 
    }
    .cameras__item,
    .gopro__item,
    .lenses__item,
    .accessories__item {
        flex: 0 0 32%; 
    }
}

@media (max-width: 980px) {
    .cameras__list,
    .gopro__list,
    .lenses__list,
    .accessories__list { 
        gap:2%; 
    }
    .cameras__item,
    .gopro__item,
    .lenses__item,
    .accessories__item {
        flex: 0 0 49%; 
    }
}

@media (max-width: 780px) {
    .catalog-header{
        flex-flow: column wrap;
        justify-content: start;
        align-items: start;
        gap: 20px;
    }
}

@media (max-width: 580px) {
    .cameras__list,
    .gopro__list,
    .lenses__list,
    .accessories__list { 
        gap:0%; 
    }
    .cameras__item,
    .gopro__item,
    .lenses__item,
    .accessories__item {
        flex: 0 0 100%; 
        justify-content: center;
    }
} 

@media (max-width:400px){
    .add-to-cart-btn{
        width:90%; 
    }
}