/* Import CSS */
@import url("./color.css");
@import url("./typography.css");

/* Variables */
:root {
    
    /* Gutters */
    --md:6rem;
    --gutter: 3rem;

    /* Transition */
    --transition:all 150ms linear;
  
}
@media(width < 576px){
    :root{
        
        /* Gutters */
        --md:3rem; 

    }
}

/* Transition */
a, button{transition: var(--transition);}

/* Container */
.container{width: 100%; max-width: calc(112.2rem + (var(--gutter) * 2)); padding-left: var(--gutter); padding-right: var(--gutter); margin-inline: auto;}

/* Header */
header{min-height: 10rem; background-color: white; padding: 1rem 0; border-bottom: .1rem solid #C3C3C3; position: relative;}
header .container{display: flex; align-items: center;}
.logo img{width: 7.7rem;}
header{display: flex; align-items: center;}
header nav{margin-left: auto;}
header nav a{font-size: var(--font-size); color: var(--text-color); font-weight: 500;}
header nav a:hover{color: var(--primary);}
.home-icon-link{position: absolute; left: var(--gutter); top: 50%; transform:translateY(-50%);}
@media(width < 992px){
    .logo img{width: 7rem;}
}
@media(width < 768px){
    .logo img{width: 6.5rem;}
}
@media(width > 575px){
    .home-icon-link{display: none;}
}
@media(width < 576px){
    header{min-height: 8rem;}
    header nav{display: none;}
    header .container{justify-content: center;}
}

/* Hero Section */
.hero-section{min-height: 75rem; padding: var(--gutter) 0; display: flex; align-items: center; background: url('../images/hero-bg.jpg') center center no-repeat; background-size: cover;}
.hero-content{max-width: 56rem;}
.hero-content > :not(:last-child){margin-bottom: 1rem;}
.hero-content h4, .hero-content h5{color: white;}
.hero-content h1, .hero-content h4, .hero-content h5{font-weight: 600;}
.hero-content h5{line-height: 1;}
@media(width < 1200px){
    .hero-section{min-height: 65rem;}
}
@media(width < 992px){
    .hero-section{min-height: 55rem;}
}
@media(width < 768px){
    .hero-section{min-height: 50rem;}
}
@media(width < 576px){
    .hero-section{min-height: 45rem; align-items: flex-end;}
    .hero-content h4,.hero-content h5{font-weight: 400;}
    .hero-content h4{background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 100%); padding: 1rem var(--gutter); margin: 0 calc(var(--gutter) * -1);}
}

/* Section */
.section{padding: var(--md) 0;}
.section-header:not(:last-child){margin-bottom: var(--md);}
.section-header h2:not(:last-child){margin-bottom: 1rem;}

/* Products */
.products{display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter) calc(var(--gutter) / 2);}
.product-image:not(:last-child){margin-bottom: 2rem;}
.product-image{position: relative; isolation: isolate;}
.product-image::before{position: absolute; left: 0; bottom: 0; width: 110%; aspect-ratio: 4.16/1; content: ""; background: url('../images/shade.png') center center no-repeat; background-size: 100% auto; transform:translate(-5%, 50%); z-index: -1; pointer-events: none;}
.product figure{aspect-ratio:1.6/1; border-radius: .5rem; overflow: hidden;}
.product figure img{object-fit: cover; width: 100%; height: 100%;}
.product h4{font-weight: 600; font-family: var(--secondary-font); color:var(--headding-text-color);}
.product p{font-size: var(--fs-lg); color: var(--secondary-text-color); font-weight: 500;}
.product h4, .product p{transition: var(--transition);}
.product:hover h4, .product:hover p{color: var(--primary);}
@media(width < 1200px){
    .products{grid-template-columns: repeat(3, 1fr);}
}
@media(width < 992px){
    .products{grid-template-columns: repeat(2, 1fr);}
}
@media(width < 576px){
    .products{grid-template-columns: 1fr;}
    .product h4{font-weight: 500;}
}

/* Footer */
footer{padding: var(--md) 0;}
footer .container > *{line-height: 1;}
footer .container > :not(:last-child){margin-bottom: 1rem;}
footer p{font-weight: 600;}
footer p a{color: var(--link-color);}
footer p a:hover{text-decoration: underline;}
@media(width < 576px){
    footer{background-color: #F0F0F0;}
}

/* Product Details */
.product-details-section{display: grid; grid-template-columns: auto 1fr; gap: var(--gutter) 5rem;}
.product-details-section .product{width: 45rem;}
.product-details-section .product figure{aspect-ratio: 1.8/1;}
.product-details h2{color: var(--headding-text-color); line-height: 1;}
.product-details h2 span{font-size: var(--h3);}
.product-details h6:first-child{line-height: 1; color: rgba(89, 89, 89, 75%);}
.product-details > :not(:last-child){margin-bottom: var(--gutter);}
.product-details > * > p:not(:last-child){margin-bottom: calc(var(--gutter) / 2);}
.contact > *{line-height: 1;}
.contact{display: flex; align-items: center; gap: 1rem calc(var(--gutter) / 2);}
.contact p:not(:last-child){margin-bottom: 0;}
.contact img{transform: translateY(.5rem); flex-shrink: 0;}
.contact a.link-color{color: var(--link-color);}
.contact a:hover{text-decoration: underline;}
.product-table table{margin: 0; padding: 0; border-collapse: collapse; width: 100%; max-width: 46rem;}
.product-table table tr td{height: 4.4rem; border: .1rem solid #A6A6A6; padding: .5rem 1.5rem; font-weight: 500; color: var(--secondary-dark); background-color: #F5ECEC; text-align: center;}
.product-table table tr td p{color: var(--secondary-dark); display: flex; align-items: center; gap: 1rem;}
.product-table table tr td .icon{display: inline-block; width: 17px;}
.colors{display: flex; gap: 2rem;}
.color-item{display: flex; flex-direction: column; align-items: center; gap: 1.5rem; flex-wrap: wrap;}
.color-item p{white-space: nowrap; line-height: 1; font-size: var(--fs-lg); font-weight: 500;}
.color-item .color{width: 4.4rem; aspect-ratio: 1; border-radius: .2rem; border-width: .2rem; border-style: solid; border-radius: .5rem;}
.color-item .color.brown-bg{border-color: var(--brown-light);}
.color-item .color.dark-brown-bg{border-color: var(--brown-light);}
.color-item .color.navy-blue-bg{border-color: var(--navy-blue-light);}
.color-item .color.tan-bg{border-color: var(--tan-light);}
.color-item .color.dark-green-bg{border-color: var(--dark-green-light);}
@media(width < 1200px){
    .product-details-section{gap: var(--gutter);}
    .product-details-section .product{width: 35rem;}
}
@media(width < 992px){
    .product-details-section{grid-template-columns: 1fr;}
    .product-details-section .product{width: 45rem;}
}
@media(width < 768px){
    .product-details-section{text-align: center;}
    .product-details-section .product{width: 100%;}
    .colors{justify-content: center;}
    .contact{flex-direction: column;}
    .product-table table tr td{width: auto !important;}
}
@media(width > 575px){
    .description p br{display: none;}
}
@media(width < 576px){
    .product-table table tr td{height: 4rem;}
    .product-table table tr td:first-child{min-width: 10rem;}
    .product-table table tr td, .product-table table tr td p{font-size: 1.4rem;}
    .description{background-color: #F0F0F0; padding: var(--gutter); margin: 0 calc(var(--gutter) * -1);}
    .product-details h2{display: flex; flex-direction: column; align-items: center;}
    .product-details h2 span{font-size: 1.8rem; display: block; padding-top: 2rem; font-weight: 500;}
    .product-details-section .product{position: relative; isolation: isolate;}
    .product-details-section .product::before{position: absolute; left: calc(var(--gutter) * -1); top: calc(var(--gutter) * -1); width: 100vw; height: 100%; content: ''; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #CDCDCD 0%, #FFFFFF 100%);}
    .contact img{max-width: 2.3rem;}
}

/* Other Classes */
.text-center{text-align: center;}