@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*,::before,::after{ margin: 0; box-sizing: border-box;}
a{ text-decoration: none;}
img{ vertical-align: bottom;}
button{ cursor: pointer; padding: 0;}
label{ display: inline-block;}
ul{ list-style: none; padding: 0;}


html{ 
    font-size: 15px; 
    --ff: "Poppins", system-ui, sans-serif;
    --r:#DB4444;
}

body{ font: 14px var(--ff)}

.container{ max-width: 1200px; margin: auto; padding: 0 1rem;}
.row{ display: grid; grid-template-columns: repeat(12,1fr); gap: 2rem;}
.col-1{ grid-column: span 1;}
.col-2{ grid-column: span 2;}
.col-3{ grid-column: span 3;}
.col-4{ grid-column: span 4;}
.col-5{ grid-column: span 5;}
.col-6{ grid-column: span 6;}
.col-7{ grid-column: span 7;}
.col-8{ grid-column: span 8;}
.col-9{ grid-column: span 9;}
.col-10{ grid-column: span 10;}
.col-11{ grid-column: span 11;}
.col-12{ grid-column: span 12;}
.flex{ display: flex;}
.justify-right{ justify-content: right;}
.justify-center{ justify-content: center;}
.justify-space-bet{ justify-content: space-between;}
.align-center{ align-items: center;}
.img-resp{ max-width: 100%; height: auto;}
.text-center{ text-align: center;}


/* layout */
.topheader{ background: #000; color: #fff; line-height: 48px;}
.topheader a{ color: inherit; text-decoration: underline;}
.topheader select{ background: none; border: none; color: inherit; margin-left: 30px; }
.topheader .text{ white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; }

header{ padding: 40px 0 16px; border-bottom: .5px solid #0000004d; }
header h1{ font-size: 24px;}
header h1 a{ color: #000;}
header nav li{ margin: 0 24px;}
header .right-nav{ height: 38px; }
header .right-nav button{ border: none; background: none; width: 32px; }
header nav a{ color: inherit; font-size: 16px; line-height: 24px; display: block; }
header form{ border-radius: 4px; background: #f5f5f5; margin-right: 12px; }
header form input{ background: none; border: none; height: 100%; padding: 0 20px;}
header form input:focus{ outline: none;}
.menu,.mobile-search{ display: none; }

aside{margin-top: 40px; border-right: 1px solid #0000004d;}
aside ul{ margin-right: 16px;}
aside li{margin-bottom: 16px;}
aside a{ display: block; color: #000; font-size: 16px;}
aside a.drop::after{ content: '>'; float: right;} 

.banner{ margin-top: 40px; background: #000; color: #fff; position: relative;}
.slide{display: none;}
.slide.active{display: block;}
.offer{ font-size: 48px; line-height: 60px; margin: 22px 0 20px;}
.slide-text{ padding: 58px 64px 0;}
.slide-text a{ text-decoration: underline; color: inherit; display: inline-block; margin-bottom: 47px;}
.slide-text img{ margin-right: 24px;}
.pager{ padding-bottom: 11px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.pager li{ margin: 0 6px;}
.pager a{ display: block; width: 14px; height: 14px; border-radius: 50%; background: #808080; border: 2px solid #000;}
.pager a.active{ border-color: #fff; background: var(--r); }



.todays-sale{ margin-top: 60px;}
.design{ line-height: 40px; padding-left: 36px; position: relative; font-size: 16px; font-weight: 600; color: var(--r); margin-top: 80px;}
.design::before{ content: ''; display: inline-block; width: 20px; height: 40px; background: var(--r); position: absolute; left: 0; border-radius: 4px; }
h2{ font-size: 36px; font-weight: 600; margin-bottom: 30px;}
.prev{ width: 46px; line-height: 46px; border-radius: 50%; background: #f5f5f5; border: none; font-size: 20px; }
.next{ width: 46px; line-height: 46px; border-radius: 50%; background: #f5f5f5;  border: none; font-size: 20px; margin-left: 8px;}

.product-sm{ position: relative;}
.product-img{ background: #f5f5f5; aspect-ratio: 1.08; display: grid; place-items: center; position: relative; }
.product-desc{ margin-top: 16px; }
.discount{ position: absolute; left: 12px; top: 12px; background: var(--r); width: 55px; line-height: 26px; border-radius: 4px; color: #fff; text-align: center;}
.product-desc h3{ font-size: 16px; }
.addtocart{ position: absolute; bottom: 0; left: 0; right: 0; background: #000; color: #fff; text-align: center; border: none; height: 40px; display: none; }
.product-sm:hover .addtocart{ display: block;}
.price{ color: var(--r); font-size: 16px; margin: 8px 0; }
.price del{ color:#0008;}
.divider{ height: 0.5px; background: #0000004d; }
.view-all-products{ width: 234px; height: 56px; border: none; background: var(--r); color: #fff; display: block; margin: 76px auto;}

.catg{ border: 1px solid #0000004d; aspect-ratio: 1.17; display: grid; place-items: center; margin-bottom: 70px;}
.view-all{ width: 159px; height: 56px; border: none; background: var(--r); color: #fff; display: block;}


.jbl-ad{ margin: 170px 0 70px;}



footer{ background: #000; margin-top: 140px; color: #fff; padding-top: 80px;}
footer .copy{ padding: 24px 0; text-align: center;}


@media screen and (max-width:1220px){
    
}

@media screen and (max-width:980px){
    .col-t-1{ grid-column: span 1;}
    .col-t-2{ grid-column: span 2;}
    .col-t-3{ grid-column: span 3;}
    .col-t-4{ grid-column: span 4;}
    .col-t-5{ grid-column: span 5;}
    .col-t-6{ grid-column: span 6;}
    .col-t-7{ grid-column: span 7;}
    .col-t-8{ grid-column: span 8;}
    .col-t-9{ grid-column: span 9;}
    .col-t-10{ grid-column: span 10;}
    .col-t-11{ grid-column: span 11;}
    .col-t-12{ grid-column: span 12;} 
    nav ul.flex, aside{ display: none;}
    .menu{ display: inline-block; }
}
@media screen and (max-width:787px){
    .col-m-6{ grid-column: span 6;}
   
}
@media screen and (max-width:460px){
    .col-p-1{ grid-column: span 1;}
    .col-p-2{ grid-column: span 2;}
    .col-p-3{ grid-column: span 3;}
    .col-p-4{ grid-column: span 4;}
    .col-p-5{ grid-column: span 5;}
    .col-p-6{ grid-column: span 6;}
    .col-p-7{ grid-column: span 7;}
    .col-p-8{ grid-column: span 8;}
    .col-p-9{ grid-column: span 9;}
    .col-p-10{ grid-column: span 10;}
    .col-p-11{ grid-column: span 11;}
    .col-p-12{ grid-column: span 12;}
   .right-nav form{ display: none;}
   .mobile-search{ display: inline-block;}
}