/* ======================================================
INDOTEX WOOCOMMERCE CSS
Author : Akub Saputra
====================================================== */

/* ======================================================
SHOP PAGE
====================================================== */

.woocommerce-page{
background:#f8f9fb;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{
margin-bottom:30px;
font-size:14px;
color:#666;
}

.woocommerce .woocommerce-ordering select{
padding:12px 15px;
border-radius:12px;
border:1px solid #ddd;
background:#fff;
font-size:14px;
}

/* ======================================================
PRODUCT GRID
====================================================== */

.woocommerce ul.products{
display:grid !important;
grid-template-columns:repeat(4,1fr);
gap:25px;
margin:0 !important;
padding:0 !important;
}

.woocommerce ul.products li.product{
width:100% !important;
margin:0 !important;
padding:0 !important;
background:#fff;
border-radius:22px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.05);
transition:.3s;
position:relative;
border:1px solid #f1f1f1;
}

.woocommerce ul.products li.product:hover{
transform:translateY(-8px);
}

.woocommerce ul.products li.product img{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
margin:0 !important;
transition:.5s;
}

.woocommerce ul.products li.product:hover img{
transform:scale(1.06);
}

/* ======================================================
SALE BADGE
====================================================== */

.woocommerce span.onsale{
top:15px !important;
left:15px !important;
right:auto !important;
min-width:auto !important;
min-height:auto !important;
padding:10px 15px !important;
line-height:1 !important;
border-radius:50px !important;
background:#ff3d00 !important;
font-size:12px !important;
font-weight:700 !important;
}

/* ======================================================
PRODUCT TITLE
====================================================== */

.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
font-size:18px !important;
font-weight:700 !important;
line-height:1.5;
padding:20px 20px 10px !important;
color:#111;
}

/* ======================================================
PRICE
====================================================== */

.woocommerce ul.products li.product .price{
padding:0 20px;
font-size:22px !important;
font-weight:800 !important;
color:#ff5722 !important;
margin-bottom:15px !important;
}

.woocommerce ul.products li.product .price del{
font-size:14px;
color:#999 !important;
margin-right:6px;
}

.woocommerce ul.products li.product .price ins{
text-decoration:none;
}

/* ======================================================
RATING
====================================================== */

.woocommerce .star-rating{
margin:0 20px 15px !important;
color:#ffb400;
}

/* ======================================================
BUTTON
====================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
display:flex !important;
align-items:center;
justify-content:center;
width:calc(100% - 40px);
margin:0 20px 20px !important;
padding:14px 18px !important;
border:none !important;
border-radius:14px !important;
background:#ff5722 !important;
color:#fff !important;
font-size:14px !important;
font-weight:700 !important;
transition:.3s;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
background:#111 !important;
transform:translateY(-2px);
}

/* ======================================================
WHATSAPP BUTTON
====================================================== */

.indotex-wa-loop-btn,
.indotex-wa-single-btn{
display:flex;
align-items:center;
justify-content:center;
padding:14px 20px;
border-radius:14px;
background:#25D366;
color:#fff;
font-size:14px;
font-weight:700;
margin:0 20px 20px;
transition:.3s;
}

.indotex-wa-single-btn{
margin:20px 0;
}

.indotex-wa-loop-btn:hover,
.indotex-wa-single-btn:hover{
background:#1faa52;
transform:translateY(-2px);
}

/* ======================================================
SINGLE PRODUCT
====================================================== */

.single-product div.product{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:start;
}

.single-product div.product .woocommerce-product-gallery{
width:100% !important;
float:none !important;
}

.single-product div.product .summary{
width:100% !important;
float:none !important;
}

.single-product .product_title{
font-size:42px;
line-height:1.2;
margin-bottom:20px;
font-weight:800;
color:#111;
}

.single-product .price{
font-size:34px !important;
font-weight:800 !important;
color:#ff5722 !important;
margin-bottom:25px !important;
}

.single-product .woocommerce-product-details__short-description{
font-size:16px;
line-height:1.8;
color:#666;
margin-bottom:25px;
}

/* ======================================================
QUANTITY
====================================================== */

.woocommerce .quantity .qty{
padding:12px;
border-radius:10px;
border:1px solid #ddd;
width:90px;
}

/* ======================================================
TABS
====================================================== */

.woocommerce div.product .woocommerce-tabs ul.tabs{
padding:0;
margin-bottom:30px;
border:none;
display:flex;
gap:15px;
flex-wrap:wrap;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li{
border:none;
background:#f5f5f5;
border-radius:12px;
padding:10px 20px;
margin:0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
background:#ff5722;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
color:#fff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a{
font-weight:700;
}

/* ======================================================
CART
====================================================== */

.woocommerce table.shop_table{
border:none !important;
border-radius:20px;
overflow:hidden;
background:#fff;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.woocommerce table.shop_table th{
background:#111;
color:#fff;
padding:18px !important;
font-size:14px;
}

.woocommerce table.shop_table td{
padding:18px !important;
border-color:#f1f1f1 !important;
}

.woocommerce-cart .cart-collaterals .cart_totals{
background:#fff;
padding:30px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}

/* ======================================================
CHECKOUT
====================================================== */

.woocommerce-checkout form.checkout{
display:grid;
grid-template-columns:2fr 1fr;
gap:35px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
padding:15px;
border-radius:14px;
border:1px solid #ddd;
background:#fff;
}

.woocommerce-checkout-review-order{
background:#fff;
padding:30px;
border-radius:22px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.woocommerce-checkout-payment{
background:#f9f9f9 !important;
border-radius:18px !important;
padding:20px !important;
}

/* ======================================================
MY ACCOUNT
====================================================== */

.woocommerce-account .woocommerce{
display:grid;
grid-template-columns:280px 1fr;
gap:35px;
}

.woocommerce-MyAccount-navigation{
background:#fff;
padding:25px;
border-radius:22px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.woocommerce-MyAccount-navigation ul{
display:flex;
flex-direction:column;
gap:10px;
}

.woocommerce-MyAccount-navigation ul li a{
display:flex;
padding:14px 16px;
border-radius:12px;
font-weight:600;
background:#f7f7f7;
}

.woocommerce-MyAccount-navigation ul li.is-active a{
background:#ff5722;
color:#fff;
}

.woocommerce-MyAccount-content{
background:#fff;
padding:35px;
border-radius:22px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}

/* ======================================================
NOTICES
====================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
border:none !important;
border-radius:14px !important;
padding:18px 20px !important;
margin-bottom:25px !important;
}

.woocommerce-message{
background:#e8fff1 !important;
color:#1b7d3b !important;
}

.woocommerce-info{
background:#eef6ff !important;
color:#0f5fb5 !important;
}

.woocommerce-error{
background:#fff0f0 !important;
color:#c62828 !important;
}

/* ======================================================
BREADCRUMB
====================================================== */

.woocommerce .woocommerce-breadcrumb{
margin-bottom:30px;
font-size:14px;
color:#777;
}

.woocommerce .woocommerce-breadcrumb a{
color:#111;
font-weight:600;
}

/* ======================================================
TRUST BADGES
====================================================== */

.indotex-trust-badges,
.indotex-cart-trust,
.indotex-checkout-trust{
display:flex;
gap:15px;
flex-wrap:wrap;
margin-top:25px;
}

.trust-item,
.trust-box{
background:#fff5f2;
padding:14px 18px;
border-radius:14px;
font-size:14px;
font-weight:700;
color:#111;
}

/* ======================================================
SUPPORT BOX
====================================================== */

.indotex-support-box,
.indotex-cart-support,
.indotex-checkout-support,
.indotex-account-support{
margin-top:35px;
padding:30px;
background:#fff;
border-radius:22px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
text-align:center;
}

.support-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 24px;
margin-top:18px;
background:#25D366;
color:#fff;
border-radius:14px;
font-weight:700;
}

.support-btn:hover{
background:#1faa52;
}

/* ======================================================
RESPONSIVE
====================================================== */

@media(max-width:992px){

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

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

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

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

}

@media(max-width:768px){

.woocommerce ul.products{
gap:18px;
}

.single-product .product_title{
font-size:32px;
}

.single-product .price{
font-size:28px !important;
}

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

}

@media(max-width:576px){

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

.woocommerce ul.products li.product h2{
font-size:17px !important;
}

.single-product .product_title{
font-size:26px;
}

.single-product .price{
font-size:24px !important;
}

.woocommerce-MyAccount-content{
padding:25px 20px;
}

}