/* =========================================================
   TokoKu — Shopee-style eCommerce Theme
   ========================================================= */

:root{
	--tk-primary:#ee4d2d;
	--tk-primary-dark:#d73211;
	--tk-secondary:#f53d2d;
	--tk-yellow:#ffce3d;
	--tk-text:#222;
	--tk-muted:#757575;
	--tk-border:#e8e8e8;
	--tk-bg:#f5f5f5;
	--tk-white:#fff;
	--radius:4px;
}

*{box-sizing:border-box;}
body{
	margin:0;
	font-family:'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color:var(--tk-text);
	background:var(--tk-bg);
	font-size:14px;
	line-height:1.5;
}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
img{max-width:100%;display:block;}
.container{max-width:1200px;margin:0 auto;padding:0 16px;}

/* ---------- Top bar ---------- */
.tk-topbar{background:var(--tk-primary-dark);color:#fff;font-size:12px;}
.tk-topbar-inner{display:flex;justify-content:space-between;align-items:center;height:34px;}
.tk-topbar a{opacity:.9;}
.tk-topbar a:hover{opacity:1;text-decoration:underline;}
.tk-sep{margin:0 10px;opacity:.5;}

/* ---------- Header ---------- */
.tk-header {
    background: #0e0f16;
    padding: 14px 0;
}
.tk-header-inner{display:flex;align-items:center;gap:24px;}
.tk-logo{flex-shrink:0;color:#fff;}
.tk-logo-text{font-size:26px;font-weight:800;color:#fff;letter-spacing:.5px;}
img.custom-logo {
    width: 200px;
    height: 80px;
}
.tk-search-form{
	flex:1;
	display:flex;
	background:#fff;
	border-radius:2px;
	overflow:hidden;
}
.tk-search-input{
	flex:1;
	border:none;
	padding:10px 14px;
	font-size:14px;
	outline:none;
}
.tk-search-btn{
	background:var(--tk-primary-dark);
	border:none;
	color:#fff;
	padding:0 18px;
	cursor:pointer;
	display:flex;
	align-items:center;
}
.tk-search-btn:hover{background:#b8280d;}

.tk-header-actions{display:flex;gap:18px;flex-shrink:0;}
.tk-icon-link{position:relative;color:#fff;}
.tk-cart-count{
	position:absolute;top:-8px;right:-10px;
	background:var(--tk-yellow);
	color:#3d2b00;
	font-size:11px;font-weight:700;
	border-radius:50%;
	min-width:18px;height:18px;
	display:flex;align-items:center;justify-content:center;
	padding:0 3px;
}

/* ---------- Category nav ---------- */
.tk-category-nav{background:#fff;border-bottom:1px solid var(--tk-border);}
.tk-nav-fallback{display:flex;gap:24px;padding:10px 0;overflow-x:auto;}
.tk-nav-fallback li a {
    white-space: nowrap;
    font-size: 16px;
    color: var(--tk-text);
}
.tk-nav-fallback li a:hover{color:var(--tk-primary);}

/* ---------- Hero / Banner ---------- */
.tk-home{padding:20px 0 40px;}
.tk-hero{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:24px;}
.tk-hero-banner {
    background: linear-gradient(135deg, #180906, #0db9bb);
    border-radius: var(--radius);
    color: #fff;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}
.tk-hero-banner h1{margin:0;font-size:28px;font-weight:800;}
.tk-hero-banner p{margin:0;opacity:.9;}
.tk-btn-primary{
	display:inline-block;
	background:var(--tk-yellow);
	color:#3d2b00;
	font-weight:700;
	padding:10px 22px;
	border-radius:20px;
	width:fit-content;
}
.tk-hero-side{display:flex;flex-direction:column;gap:12px;}
.tk-hero-side-card{
	flex:1;
	background:#fff;
	border-radius:var(--radius);
	display:flex;align-items:center;justify-content:center;
	font-weight:700;color:var(--tk-primary);
	border:1px dashed var(--tk-primary);
}

/* ---------- Section title ---------- */
.tk-section{margin-bottom:28px;}
.tk-section-title{
	font-size:18px;font-weight:800;
	margin:0 0 12px;
	color:var(--tk-text);
}

/* ---------- Category grid ---------- */
.tk-category-grid{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:12px;
	background:#fff;
	padding:20px;
	border-radius:var(--radius);
}
.tk-category-item{
	display:flex;flex-direction:column;align-items:center;gap:8px;
	text-align:center;
	padding:10px;
	border-radius:var(--radius);
}
.tk-category-item:hover{background:#fff5f2;}
.tk-category-icon{
	width:56px;height:56px;border-radius:50%;
	background:#fff0eb;
	display:flex;align-items:center;justify-content:center;
	overflow:hidden;
	font-weight:800;color:var(--tk-primary);font-size:20px;
}
.tk-category-icon img{width:100%;height:100%;object-fit:cover;}
.tk-category-name{font-size:12.5px;color:var(--tk-text);}

/* ---------- Flash Sale ---------- */
.tk-flashsale{background:#fff;border-radius:var(--radius);padding:16px 20px;}
.tk-flashsale-header{display:flex;align-items:center;gap:16px;margin-bottom:14px;}
.tk-flashsale-title{margin:0;color:var(--tk-primary);}
.tk-countdown{display:flex;align-items:center;gap:4px;font-weight:700;color:var(--tk-primary);}
.tk-cd-box{
	background:#3d2b00;color:#fff;background:var(--tk-text);
	background:#2b2b2b;
	border-radius:3px;padding:3px 6px;font-size:13px;min-width:24px;text-align:center;
}
.tk-see-all{margin-left:auto;color:var(--tk-primary);font-weight:600;}

/* ---------- Product grid & cards ---------- */
.tk-product-grid{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:12px;
}
.tk-product-card{
	background:#fff;
	border-radius:var(--radius);
	overflow:hidden;
	border:1px solid var(--tk-border);
	display:flex;flex-direction:column;
	transition:box-shadow .15s ease, transform .15s ease;
}
.tk-product-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.1);transform:translateY(-2px);}
.tk-product-thumb{position:relative;aspect-ratio:1/1;background:#f5f5f5;overflow:hidden;}
.tk-product-thumb img{width:100%;height:100%;object-fit:cover;}
.tk-badge-diskon{
	position:absolute;top:0;right:0;
	background:var(--tk-yellow);
	color:#3d2b00;
	font-size:11px;font-weight:800;
	padding:3px 6px;
	border-bottom-left-radius:4px;
}
.tk-product-info{padding:8px 10px 10px;display:flex;flex-direction:column;gap:6px;flex:1;}
.tk-product-title{
	font-size:13px;font-weight:400;margin:0;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
	min-height:36px;
}
.tk-price-now{color:var(--tk-primary);font-weight:700;font-size:15px;}
.tk-product-meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--tk-muted);}
.tk-product-rating{color:var(--tk-yellow);}
.tk-empty{color:var(--tk-muted);font-style:italic;}

/* ---------- Generic pages ---------- */
.tk-generic{background:#fff;padding:30px;border-radius:var(--radius);margin:24px auto;}
.tk-page-title{font-size:24px;font-weight:800;margin-top:0;}

/* ---------- Sidebar / widgets ---------- */
.tk-widget-title,.tk-footer-title{font-size:14px;font-weight:800;margin:0 0 10px;}

/* ---------- Footer ---------- */
.tk-footer{background:#fff;margin-top:40px;border-top:1px solid var(--tk-border);}
.tk-footer-grid{
	display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
	padding:36px 16px;
}
.tk-footer-widget ul li{margin-bottom:8px;font-size:13px;}
.tk-footer-widget ul li a:hover{color:var(--tk-primary);}
.tk-payment-icons{display:flex;flex-wrap:wrap;gap:8px;}
.tk-payment-icons span{
	background:var(--tk-bg);border:1px solid var(--tk-border);
	padding:4px 10px;border-radius:3px;font-size:12px;
}
.tk-footer-bottom{
	background:var(--tk-bg);
	text-align:center;
	padding:16px;
	font-size:12.5px;
	color:var(--tk-muted);
}

/* ---------- WooCommerce shop wrapper tweaks ---------- */
.tk-shop-wrapper{padding:24px 0;background:transparent;}
.woocommerce-breadcrumb{background:#fff;padding:12px 16px;border-radius:var(--radius);margin-bottom:16px;font-size:12.5px;}
.woocommerce ul.products{display:grid !important;grid-template-columns:repeat(5,1fr);gap:12px;}
.woocommerce ul.products li.product{
	background:#fff;border:1px solid var(--tk-border);border-radius:var(--radius);padding:0;
}
.woocommerce ul.products li.product img{aspect-ratio:1/1;object-fit:cover;}
.woocommerce div.product p.price{color:var(--tk-primary);font-weight:700;}
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit{
	background:var(--tk-primary) !important;
	color:#fff !important;
	border-radius:20px !important;
	border:none !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{background:var(--tk-primary-dark) !important;}

/* ---------- Responsive ---------- */
@media (max-width: 992px){
	.tk-category-grid{grid-template-columns:repeat(4,1fr);}
	.tk-product-grid,
	.woocommerce ul.products{grid-template-columns:repeat(3,1fr) !important;}
	.tk-hero{grid-template-columns:1fr;}
	.tk-footer-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width: 640px){
	.tk-topbar{display:none;}
	.tk-header-inner{flex-wrap:wrap;}
	.tk-logo{order:1;}
	.tk-header-actions{order:2;}
	.tk-search-form{order:3;flex-basis:100%;}
	.tk-category-grid{grid-template-columns:repeat(3,1fr);}
	.tk-product-grid,
	.woocommerce ul.products{grid-template-columns:repeat(2,1fr) !important;}
	.tk-footer-grid{grid-template-columns:1fr;}
}