/* SALE SECTION CSS */

.sale {background-color: var(--c-light-bg); padding-block: 60px 1.5rem;}
.sale .title {background-color: #fff; padding: 10px 20px; border-radius: 8px; margin-bottom: 1.5rem;}
.sale .title > :first-child {font-size: var(--fs-md); font-weight: 600; line-height: calc(1 + .3/max(1, 1.0));}
.sale .wrapper {display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;}
.sale .item {display: flex; flex-direction: column; background-color: #fff; border-radius: 8px; position: relative;}
.sale .topContent > :first-child {width: 100%;}
.sale .topContent img {width: 100%; height: 238px; border-radius: 8px; object-fit: cover;}
.sale .topContent > :first-child > :nth-child(2) {display: none;}
.sale .topContent > :first-child:hover > :first-child {display: none;}
.sale .topContent > :first-child:hover > :nth-child(2) {display: block;}
.sale .content {width: fit-content; display: flex; flex-direction: column; align-items: start; justify-content: center; gap: 5px; padding: 15px; position: absolute; top: 0;}
.sale .content :where(.new, .off) {font-size: calc(var(--fs-xs) - 2px); padding: 4px 8px; color: #fff;  border-radius: 4px; line-height: normal;}
.sale .content .new {background-color: var(--_c-bg-green);}
.sale .content .off {background-color: var(--_c-bg-red);}
.sale .topContent .look {font-size: var(--fs-xs); text-underline-offset: .3rem; text-decoration: underline; padding: 15px; transition: var(--transition); position: absolute; right: 0; top: 0;}
.sale .topContent .look:hover {color: var(--c-primary);}
.sale .times {display: flex; align-items: center; justify-content: space-between; gap: 5px; border: 1px solid #00000014; padding: 5px 8px; position: absolute; inset: 0; width: calc(100% - 30px); height: fit-content; background-color: #fff; border-radius: 4px; margin-inline: auto; top: 37%;}
.sale .times > * {display: flex; flex-direction: column; text-align: center;}
.sale .box {padding: 5px 15px 55px 15px;}
.sale .box > :first-child {font-size: var(--fs-xs); color: rgba(0, 0, 0, 0.7); font-weight: 400; line-height: 1px;}
.sale .box > :nth-child(2) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; font-size: var(--fs-base); font-weight: 500; text-transform: capitalize; letter-spacing: .4px; margin-block: 8px; transition: var(--transition);}
.sale .box > :nth-child(2):hover {color: var(--c-primary);}
.sale .price > :first-child {font-size: calc(var(--fs-base) + 2px); font-weight: 700;}
.sale .price > :nth-child(2) {font-size: calc(var(--fs-base) - 2px); text-decoration: line-through; font-weight: 600; color: #00000080;}
.sale .bar {background-color: #00000012; width: 100%; height: 3px; border-radius: 10px; margin-block: 8px 6px; position: relative;}
.sale .bar > :first-child {width: 80%; border-radius: 10px; background-color: var(--_c-bg-green); height: 3px; position: absolute; left: 0;}
.sale .stock > :last-child { font-size: var(--fs-xs); font-weight: 500; color: var(--_c-bg-green);}
.sale .btn__primary { margin-top: 10px; padding-block: 8px;  position: absolute; bottom: 15px; left: 0;  width: calc(100% - 30px); right: 0;  margin-inline: auto;}

@media only screen and (max-width: 1200px) {
    .sale .wrapper {grid-template-columns: repeat(4, 1fr);}
}
@media only screen and (max-width: 991px) {
    .sale .wrapper {grid-template-columns: repeat(3, 1fr);}
}
@media only screen and (max-width: 768px){
    .sale .wrapper {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and (max-width: 475px){
    .sale .wrapper {grid-template-columns: 1fr; justify-items: center;}
    .sale .item {width: 100%; max-width: 320px;}
}