/* ======================================================
INDOTEX MARKETPLACE RESPONSIVE CSS
Author : Akub Saputra
====================================================== */

/* ======================================================
LAPTOP
====================================================== */

@media (max-width:1200px){

.container{
max-width:100%;
padding:0 25px;
}

.hero-content h1{
font-size:48px;
}

.section-title{
font-size:34px;
}

.product-grid{
grid-template-columns:repeat(3,1fr);
}

.category-grid{
grid-template-columns:repeat(4,1fr);
}

.blog-grid{
grid-template-columns:repeat(2,1fr);
}

.footer-grid{
grid-template-columns:repeat(2,1fr);
}

.woocommerce ul.products{
grid-template-columns:repeat(3,1fr) !important;
}

}

/* ======================================================
TABLET
====================================================== */

@media (max-width:992px){

/* HEADER */

.header-wrapper{
flex-wrap:wrap;
justify-content:center;
gap:15px;
}

.main-menu{
width:100%;
overflow-x:auto;
}

.main-menu ul{
justify-content:center;
min-width:max-content;
padding-bottom:5px;
}

/* HERO */

.hero-banner{
padding:60px 0;
}

.hero-grid{
grid-template-columns:1fr;
gap:40px;
text-align:center;
}

.hero-content{
order:2;
}

.hero-image{
order:1;
}

.hero-content p{
margin:auto;
margin-bottom:30px;
}

.hero-buttons{
justify-content:center;
}

.hero-features{
justify-content:center;
}

.hero-content h1{
font-size:42px;
}

/* SECTION */

.section-header{
flex-direction:column;
align-items:flex-start;
}

.section-title{
font-size:30px;
}

/* GRID */

.product-grid{
grid-template-columns:repeat(2,1fr);
}

.category-grid{
grid-template-columns:repeat(3,1fr);
}

.blog-grid{
grid-template-columns:1fr;
}

.footer-grid{
grid-template-columns:1fr 1fr;
gap:30px;
}

/* WOOCOMMERCE */

.woocommerce ul.products{
grid-template-columns:repeat(2,1fr) !important;
}

.woocommerce-checkout form.checkout{
grid-template-columns:1fr;
}

/* ACCOUNT */

.indotex-account-header{
flex-direction:column;
text-align:center;
}

}

/* ======================================================
MOBILE
====================================================== */

@media (max-width:768px){

/* HEADER */

.topbar{
display:none;
}

.header-wrapper{
padding:14px 0;
}

.logo img{
max-height:45px;
}

.main-menu ul{
gap:15px;
}

.main-menu a{
font-size:14px;
}

.header-actions{
gap:10px;
}

.search-btn,
.cart-btn,
.account-btn{
width:40px;
height:40px;
font-size:16px;
}

/* HERO */

.hero-banner{
padding:50px 0;
}

.hero-content h1{
font-size:34px;
line-height:1.2;
}

.hero-content p{
font-size:16px;
}

.hero-buttons{
flex-direction:column;
align-items:center;
}

.shop-btn,
.buy-btn,
.buy-wa{
width:100%;
max-width:280px;
}

.hero-features{
flex-direction:column;
align-items:center;
}

.hero-feature{
width:100%;
max-width:300px;
}

/* SECTION */

section{
padding:60px 0;
}

.section-title{
font-size:28px;
}

.section-subtitle{
font-size:15px;
}

/* GRID */

.product-grid{
grid-template-columns:1fr 1fr;
gap:18px;
}

.category-grid{
grid-template-columns:1fr 1fr;
gap:18px;
}

.footer-grid{
grid-template-columns:1fr;
}

/* CARD */

.product-info{
padding:18px;
}

.product-title{
font-size:16px;
}

.price{
font-size:20px;
}

.product-buttons{
flex-direction:column;
}

.blog-title{
font-size:20px;
}

/* FLASH TIMER */

.flash-sale-timer{
justify-content:center;
}

.timer-box{
min-width:80px;
padding:15px;
}

.timer-box span{
font-size:24px;
}

/* WOOCOMMERCE */

.woocommerce ul.products{
grid-template-columns:1fr 1fr !important;
gap:18px !important;
}

/* CHECKOUT */

.woocommerce table.shop_table{
font-size:14px;
}

/* FLOAT WA */

.indotex-floating-wa{
width:58px;
height:58px;
font-size:28px;
right:18px;
bottom:18px;
}

}

/* ======================================================
SMALL MOBILE
====================================================== */

@media (max-width:576px){

.container{
padding:0 16px;
}

/* HERO */

.hero-content h1{
font-size:28px;
}

.hero-badge{
font-size:12px;
padding:8px 14px;
}

/* SECTION */

.section-title{
font-size:24px;
}

/* GRID */

.product-grid{
grid-template-columns:1fr;
}

.category-grid{
grid-template-columns:1fr 1fr;
}

.blog-grid{
grid-template-columns:1fr;
}

.woocommerce ul.products{
grid-template-columns:1fr !important;
}

/* CATEGORY */

.category-card{
padding:20px 15px;
}

.category-icon{
width:70px;
height:70px;
}

.category-icon img{
width:40px;
height:40px;
}

/* PRODUCT */

.product-card{
border-radius:18px;
}

.product-image img{
aspect-ratio:1/1;
}

.product-title{
font-size:17px;
}

.price{
font-size:22px;
}

.buy-btn,
.buy-wa{
width:100%;
}

/* BLOG */

.blog-image img{
height:220px;
}

.blog-content{
padding:20px;
}

.blog-title{
font-size:18px;
}

/* FOOTER */

.main-footer{
padding-top:60px;
}

.footer-widget h4{
font-size:18px;
}

/* HEADER MOBILE MENU */

.main-menu{
padding-bottom:8px;
}

.main-menu ul{
justify-content:flex-start;
}

/* TIMER */

.timer-box{
min-width:70px;
}

.timer-box span{
font-size:20px;
}

}

/* ======================================================
EXTRA SMALL DEVICE
====================================================== */

@media (max-width:400px){

.hero-content h1{
font-size:24px;
}

.section-title{
font-size:22px;
}

.product-title{
font-size:15px;
}

.price{
font-size:18px;
}

.main-menu a{
font-size:13px;
}

.search-btn,
.cart-btn,
.account-btn{
width:36px;
height:36px;
font-size:14px;
}

.indotex-floating-wa{
width:52px;
height:52px;
font-size:24px;
}

}