/*
Theme Name: Katen Blog
Theme URI: https://example.com/katen-blog
Author: ThemeGee
Author URI: https://example.com
Description: Minimal Blog & Magazine WordPress Theme
Version: 1.0.0
License: GPL v2 or later
Text Domain: katen-blog
*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --primary: #f97316;
  --header-bg: #ffffff;
  --header-text: #1a1a1a;
  --nav-bg: #ffffff;
  --footer-bg: #1a1a1a;
  --footer-text: #aaaaaa;
  --footer-social: #666666;
  --body-bg: #f7f7f7;
  --card-bg: #ffffff;
  --body-font-size: 15px;
  --h1-size: 28px;
  --h2-size: 22px;
  --h3-size: 18px;
  --h4-size: 15px;
  --meta-size: 12px;
  --nav-size: 14px;
  --body-font: 'Lato', sans-serif;
  --heading-font: 'Playfair Display', Georgia, serif;
  --container-width: 1140px;
  --sidebar-width: 300px;
  --logo-size: 28px;
  --content-spacing: 28px;
  --footer-padding: 20px;
  --footer-fs: 12px;
}

body {
  font-family: var(--body-font);
  font-size: var(--body-font-size);
  background: var(--body-bg);
  min-height: 100vh;
  overflow-x: hidden;
  color: #1a1a1a;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 2px; }

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 16px;
}

.nav-lnk {
  cursor: pointer;
  font-size: var(--nav-size);
  font-weight: 700;
  color: #444;
  padding: 6px 14px;
  border-radius: 20px;
  transition: all 0.2s;
  font-family: var(--body-font);
  white-space: nowrap;
  display: inline-block;
}
.nav-lnk:hover { color: var(--primary); }
.nav-lnk.active, .nav-lnk.current-menu-item { background: var(--primary); color: #fff !important; }

.topic-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}
.topic-row:hover span:first-child { color: var(--primary); }
.topic-row:last-child { border-bottom: none; }

.tag-chip {
  background: #f5f5f5;
  color: #555;
  font-size: var(--meta-size);
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #eee;
  white-space: nowrap;
  display: inline-block;
}
.tag-chip:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.mob-menu-link {
  display: block;
  padding: 14px 20px;
  font-size: var(--nav-size);
  font-weight: 700;
  color: #1a1a1a;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  font-family: var(--body-font);
  transition: color 0.2s;
}
.mob-menu-link:hover { color: var(--primary); }

.post-card {
  background: var(--card-bg);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  transition: box-shadow 0.3s;
}
.post-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.13); }

.post-card .thumb-wrap {
  position: relative;
  overflow: hidden;
}
.post-card .thumb-wrap img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
}
.post-card:hover .thumb-wrap img { transform: scale(1.05); }

.post-card .badge-wrap {
  position: absolute;
  top: 10px;
  left: 10px;
}

.post-card .card-body { padding: 14px 14px 8px; }
.post-card .card-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  flex-wrap: wrap;
}
.post-card .card-meta span { font-size: var(--meta-size); }
.post-card .card-title {
  font-family: var(--heading-font);
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.4;
  margin: 0 0 9px;
  cursor: pointer;
  transition: color 0.2s;
}
.post-card:hover .card-title { color: var(--primary); }
.post-card .card-excerpt {
  color: #777;
  line-height: 1.6;
  margin: 0;
  font-family: var(--body-font);
}
.post-card .card-footer {
  padding: 8px 14px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.widget-box {
  background: var(--card-bg);
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.widget-title {
  font-family: var(--heading-font);
  font-size: var(--h3-size);
  font-weight: 700;
  margin: 0 0 4px;
}

.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--heading-font);
  white-space: nowrap;
  color: #fff;
  background: var(--primary);
}

.divider {
  width: 30px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
  margin: 0 0 14px;
}
.divider.center { margin: 0 auto 14px; }

.avatar-katen {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #ec4899);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.social-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.social-row .social-icon {
  font-size: 15px;
  color: #666;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s;
}
.social-row .social-icon:hover { color: var(--primary); }
footer .social-row .social-icon:hover { color: var(--primary); }

.hero-grid {
  display: grid;
  gap: 4px;
  border-radius: 8px;
  overflow: hidden;
}
.hero-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.hero-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: filter 0.4s;
}
.hero-item .hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
}

.posts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.pagination-wrap {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.main-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
}

@media (max-width: 639px) {
  .hide-mobile { display: none !important; }
}

@media (max-width: 1023px) {
  .main-layout { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 639px) {
  .posts-grid { grid-template-columns: 1fr; }
  .hero-slide img { height: 200px !important; }
}

/* ─── WOOCOMMERCE ────────────────────────────────────────────── */
.woocommerce .products ul,
.woocommerce ul.products { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.woocommerce ul.products li.product { background:var(--card-bg); border-radius:6px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.07); transition:box-shadow 0.3s; padding:0; margin:0 !important; width:auto !important; }
.woocommerce ul.products li.product:hover { box-shadow:0 8px 28px rgba(0,0,0,0.13); }
.woocommerce ul.products li.product a img { margin:0; border-radius:6px 6px 0 0; }
.woocommerce ul.products li.product .onsale { background:var(--primary); margin:0; border-radius:0; padding:3px 10px; min-height:auto; line-height:1.4; font-size:11px; }
.woocommerce ul.products li.product .button { background:var(--primary); color:#fff; border-radius:4px; font-size:13px; font-weight:700; padding:8px 16px; margin-top:8px; }
.woocommerce ul.products li.product .button:hover { opacity:0.85; }
.woocommerce ul.products li.product .price { font-size:14px; color:var(--primary); font-weight:700; }
.woocommerce ul.products li.product .price del { color:#999; font-size:12px; }
.woocommerce ul.products li.product .star-rating { font-size:12px; margin:4px 0; }
.woocommerce .woocommerce-breadcrumb { font-size:13px; color:#888; margin-bottom:16px; }
.woocommerce .woocommerce-breadcrumb a { color:var(--primary); }
.woocommerce div.product { background:var(--card-bg); border-radius:6px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.woocommerce div.product .product_title { font-family:var(--heading-font); font-size:var(--h1-size); }
.woocommerce div.product .price { font-size:22px; color:var(--primary); font-weight:700; }
.woocommerce div.product .amount { color:var(--primary); }
.woocommerce div.product form.cart .button { background:var(--primary); color:#fff; border-radius:4px; font-weight:700; }
.woocommerce div.product form.cart .button:hover { opacity:0.85; }
.woocommerce .quantity .qty { border:1px solid #e0e0e0; border-radius:4px; padding:6px; }
.woocommerce .woocommerce-tabs { background:var(--card-bg); border-radius:6px; padding:20px; margin-top:20px; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.woocommerce .woocommerce-tabs .tabs { margin:0 0 16px; padding:0; border-bottom:1px solid #f0f0f0; }
.woocommerce .woocommerce-tabs .tabs li { border:none; background:transparent; margin:0; padding:0; }
.woocommerce .woocommerce-tabs .tabs li a { font-weight:700; font-size:14px; padding:8px 16px; color:#555; }
.woocommerce .woocommerce-tabs .tabs li.active a { color:var(--primary); }
.woocommerce .related.products h2, .woocommerce .upsells.products h2 { font-family:var(--heading-font); font-size:var(--h2-size); margin-bottom:16px; }
.woocommerce .cart .button { background:var(--primary); color:#fff; border-radius:4px; }
.woocommerce .cart .button:hover { opacity:0.85; }
.woocommerce table.shop_table { border-radius:6px; }
.woocommerce table.shop_table th { font-weight:700; }
.woocommerce-checkout #payment { background:var(--card-bg); border-radius:6px; }
.woocommerce-checkout #payment div.payment_box { background:#f7f7f7; }
.woocommerce .widget_price_filter .ui-slider .ui-slider-range { background:var(--primary); }
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background:var(--primary); }
.woocommerce .widget_layered_nav ul li a:hover { color:var(--primary); }
.woocommerce .widget_shopping_cart .total { border-top:1px solid #f0f0f0; }
.woocommerce-MyAccount-navigation ul { list-style:none; padding:0; background:var(--card-bg); border-radius:6px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.woocommerce-MyAccount-navigation ul li { border-bottom:1px solid #f0f0f0; }
.woocommerce-MyAccount-navigation ul li a { display:block; padding:12px 16px; font-size:14px; color:#555; text-decoration:none; }
.woocommerce-MyAccount-navigation ul li.is-active a { color:var(--primary); font-weight:700; background:#fafafa; }
.woocommerce-MyAccount-content { background:var(--card-bg); border-radius:6px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
@media (max-width:768px) {
  .woocommerce ul.products { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px) {
  .woocommerce ul.products { grid-template-columns:1fr; }
}