@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');

:root{
  --primary:#2563eb; --primary-dark:#1e40af; --ink:#1a2233; --muted:#6b7280;
  --bg:#f8fafc; --card:#ffffff; --line:#e6e9f0; --radius:14px;
}
*{box-sizing:border-box;}
body{ margin:0; font-family:'Vazirmatn',Tahoma,sans-serif; background:var(--bg); color:var(--ink); line-height:1.7; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }
button{ font-family:inherit; cursor:pointer; }

/* Topbar */
.topbar-strip{ background:var(--primary-dark); color:#e0e7ff; font-size:12.5px; }
.topbar-strip .wrap{ display:flex; justify-content:space-between; padding:7px 20px; }

/* Header */
.site-header{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.header-row{ display:flex; align-items:center; gap:24px; padding:16px 20px; flex-wrap:wrap; }
.logo{ font-size:22px; font-weight:800; color:var(--primary); flex-shrink:0; }
.logo img{ height:42px; }
.search-form{ flex:1; display:flex; min-width:200px; }
.search-form input{ flex:1; padding:10px 16px; border:1px solid var(--line); border-radius:10px 0 0 10px; font-family:inherit; }
.search-form button{ background:var(--primary); color:#fff; border:none; padding:0 18px; border-radius:0 10px 10px 0; }
.header-actions{ display:flex; gap:18px; flex-shrink:0; }
.header-icon-link{ display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; position:relative; white-space:nowrap; }
.cart-count{ position:absolute; top:-8px; left:-12px; background:#ef4444; color:#fff; font-size:10px; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; }

.main-nav{ background:var(--primary); }
.main-nav .wrap{ display:flex; gap:4px; overflow-x:auto; }
.main-nav a{ color:#fff; padding:11px 16px; font-size:13.5px; font-weight:500; white-space:nowrap; }
.main-nav a:hover{ background:rgba(255,255,255,.12); }

.flash-msg{ margin-top:16px; padding:12px 16px; border-radius:10px; font-size:14px; }
.flash-msg.success{ background:#dcfce7; color:#166534; }
.flash-msg.error{ background:#fee2e2; color:#991b1b; }

/* Hero */
.hero-slider{ position:relative; height:360px; overflow:hidden; }
.hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center; display:flex; align-items:center; }
.hero-slide.active{ position:relative; }
.hero-caption{ background:rgba(15,23,42,.55); color:#fff; padding:30px 46px; border-radius:16px; margin-inline-start:60px; max-width:420px; }
.hero-caption h2{ font-size:28px; margin:0 0 10px; }
.btn-primary{ display:inline-block; margin-top:14px; background:var(--primary); color:#fff; padding:12px 26px; border-radius:10px; font-weight:700; border:none; font-size:14px; }
.btn-primary:hover{ background:var(--primary-dark); }

/* Sections */
.section-title{ font-size:20px; font-weight:800; margin:38px 0 18px; padding:0 20px; max-width:1180px; margin-inline:auto; }
.section-categories, .section-products{ max-width:1180px; margin:0 auto; padding:0 20px; }
.category-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:16px; }
.category-card{ text-align:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 10px; font-weight:600; font-size:13.5px; }
.category-card:hover{ border-color:var(--primary); }
.category-img{ width:60px; height:60px; margin:0 auto 10px; border-radius:50%; background-size:cover; background-position:center; background-color:#eef2ff; }

.product-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.product-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:.15s; }
.product-card:hover{ box-shadow:0 12px 30px rgba(30,58,138,.1); transform:translateY(-2px); }
.product-img-wrap{ position:relative; display:block; aspect-ratio:1/1; background:#f1f4f9; }
.product-img-wrap img{ width:100%; height:100%; object-fit:cover; }
.discount-badge{ position:absolute; top:10px; inset-inline-start:10px; background:#ef4444; color:#fff; font-size:11.5px; padding:4px 8px; border-radius:8px; font-weight:700; }
.stock-badge{ position:absolute; top:10px; inset-inline-end:10px; background:#6b7280; color:#fff; font-size:11px; padding:4px 8px; border-radius:8px; }
.product-info{ padding:14px 16px 16px; }
.product-name{ display:block; font-size:14.5px; font-weight:600; margin-bottom:8px; height:2.8em; overflow:hidden; }
.product-price{ margin-bottom:12px; }
.old-price{ text-decoration:line-through; color:#9ca3af; font-size:12.5px; margin-inline-end:8px; }
.cur-price{ font-weight:800; color:var(--primary); font-size:16px; }
.btn-add-cart{ width:100%; background:var(--primary); color:#fff; border:none; padding:10px; border-radius:9px; font-weight:700; font-size:13px; }
.btn-add-cart:hover{ background:var(--primary-dark); }
.btn-add-cart:disabled{ background:#c7cbe0; cursor:not-allowed; }

/* Page container generic */
.page-container{ max-width:1180px; margin:0 auto; padding:30px 20px 60px; }
.narrow-page{ max-width:480px; }
.page-title{ font-size:22px; font-weight:800; margin:0 0 20px; }
.page-title .count{ font-weight:400; color:var(--muted); font-size:14px; }
.breadcrumb{ color:var(--muted); font-size:13px; margin-bottom:16px; }
.breadcrumb a{ color:var(--primary); }

/* Category layout */
.category-page-layout{ display:flex; gap:28px; align-items:flex-start; }
.category-sidebar{ width:220px; flex-shrink:0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.category-sidebar h3{ font-size:14px; margin:0 0 12px; }
.category-sidebar ul{ list-style:none; padding:0; margin:0; }
.category-sidebar li a{ display:block; padding:9px 0; font-size:13.5px; color:var(--ink); border-bottom:1px solid var(--line); }
.category-sidebar li a.active, .category-sidebar li a:hover{ color:var(--primary); font-weight:700; }
.category-main{ flex:1; min-width:0; }
.category-desc{ color:var(--muted); margin-bottom:20px; font-size:13.5px; }
.pagination{ display:flex; gap:8px; margin-top:26px; }
.pagination a{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid var(--line); font-size:13.5px; }
.pagination a.active{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* Product detail */
.product-detail{ display:flex; gap:36px; flex-wrap:wrap; }
.product-gallery{ flex:1; min-width:280px; max-width:440px; }
.main-image{ aspect-ratio:1/1; border-radius:var(--radius); background-size:cover; background-position:center; background-color:#f1f4f9; }
.thumb-row{ display:flex; gap:8px; margin-top:10px; }
.thumb-item{ width:60px; height:60px; border-radius:8px; overflow:hidden; border:1px solid var(--line); cursor:pointer; }
.thumb-item img{ width:100%; height:100%; object-fit:cover; }
.product-summary{ flex:1.3; min-width:280px; }
.product-summary h1{ font-size:24px; margin:0 0 10px; }
.short-desc{ color:var(--muted); margin-bottom:16px; }
.price-block{ margin-bottom:14px; }
.price-block .cur-price{ font-size:24px; }
.stock-info{ margin-bottom:18px; font-size:13.5px; }
.in-stock{ color:#16a34a; font-weight:600; }
.out-stock{ color:#dc2626; font-weight:600; }
.add-to-cart-form-detail{ display:flex; gap:10px; margin-bottom:26px; }
.add-to-cart-form-detail input{ width:80px; padding:10px; border:1px solid var(--line); border-radius:9px; text-align:center; }
.btn-add-cart-lg{ flex:1; background:var(--primary); color:#fff; border:none; border-radius:9px; font-weight:700; font-size:14.5px; }
.btn-add-cart-lg:hover{ background:var(--primary-dark); }
.product-description h3{ font-size:15px; margin-bottom:8px; }
.product-description{ color:#374151; font-size:14px; }

/* Cart */
.empty-cart{ text-align:center; padding:60px 0; color:var(--muted); }
.cart-layout{ display:flex; gap:26px; align-items:flex-start; flex-wrap:wrap; }
.cart-items{ flex:2; min-width:300px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.cart-table{ width:100%; border-collapse:collapse; }
.cart-table th{ text-align:right; padding:12px 16px; background:#f8fafc; font-size:12.5px; color:var(--muted); }
.cart-table td{ padding:12px 16px; border-top:1px solid var(--line); vertical-align:middle; font-size:13.8px; }
.cart-prod{ display:flex; align-items:center; gap:10px; }
.cart-prod img{ width:52px; height:52px; border-radius:8px; object-fit:cover; }
.qty-form input{ width:60px; padding:7px; border:1px solid var(--line); border-radius:8px; text-align:center; }
.remove-btn{ background:none; border:none; color:#dc2626; font-size:13px; }
.cart-summary{ flex:1; min-width:260px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; position:sticky; top:90px; }
.cart-summary h3{ margin:0 0 16px; font-size:15px; }
.summary-row{ display:flex; justify-content:space-between; font-size:13.8px; padding:8px 0; border-bottom:1px solid var(--line); }
.discount-row{ color:#16a34a; }
.total-row{ font-weight:800; font-size:16px; border-bottom:none; }
.coupon-form{ display:flex; gap:8px; margin:16px 0 4px; }
.coupon-form input{ flex:1; padding:9px 12px; border:1px solid var(--line); border-radius:8px; }
.coupon-form button{ background:var(--ink); color:#fff; border:none; padding:0 16px; border-radius:8px; font-weight:600; }
.coupon-error{ color:#dc2626; font-size:12.5px; margin:6px 0 0; }
.checkout-btn{ width:100%; text-align:center; margin-top:16px; }

/* Checkout */
.checkout-layout{ display:flex; gap:26px; flex-wrap:wrap; align-items:flex-start; }
.checkout-form{ flex:2; min-width:300px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.form-error{ background:#fee2e2; color:#991b1b; padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:13.8px; }

/* Forms generic */
label{ display:block; font-weight:600; font-size:13.5px; margin:14px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=number], textarea, select{
  width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:10px; font-family:inherit; font-size:14px;
}
input:focus, textarea:focus, select:focus{ outline:2px solid var(--primary); border-color:transparent; }
textarea{ min-height:90px; resize:vertical; }
.form-two-col{ display:flex; gap:14px; }
.form-two-col > div{ flex:1; }

/* Auth */
.auth-box{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:30px; }
.captcha-row{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.captcha-row img{ border-radius:10px; border:1px solid var(--line); }
.captcha-refresh-btn{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:0 12px; height:44px; font-size:13px; }
.captcha-input{ margin-top:10px; letter-spacing:6px; text-align:center; font-size:18px; }
.auth-switch{ text-align:center; margin-top:18px; font-size:13.5px; color:var(--muted); }
.auth-switch a{ color:var(--primary); font-weight:700; }

/* Account */
.account-layout{ display:flex; gap:26px; flex-wrap:wrap; align-items:flex-start; }
.account-info-card{ flex:1; min-width:240px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; text-align:center; }
.account-info-card h3{ margin:0 0 10px; }
.btn-outline{ display:inline-block; margin-top:16px; border:1px solid var(--primary); color:var(--primary); padding:9px 20px; border-radius:9px; font-weight:600; font-size:13px; }
.account-orders{ flex:2.3; min-width:300px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.order-status{ padding:4px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.status-pending{ background:#fef3c7; color:#92400e; }
.status-processing{ background:#dbeafe; color:#1e40af; }
.status-shipped{ background:#e0e7ff; color:#3730a3; }
.status-completed{ background:#dcfce7; color:#166534; }
.status-cancelled{ background:#fee2e2; color:#991b1b; }

/* Footer */
.site-footer{ background:#111827; color:#cbd2e0; margin-top:50px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1.4fr; gap:30px; padding:44px 20px; }
.footer-col h4{ color:#fff; margin:0 0 14px; font-size:15px; }
.footer-col a{ display:block; margin-bottom:9px; font-size:13.5px; color:#aeb4ca; }
.footer-col p{ font-size:13.5px; margin:0 0 8px; color:#aeb4ca; }
.social-links{ display:flex; gap:14px; margin-top:10px; }
.footer-bottom{ text-align:center; border-top:1px solid #232838; padding:16px; font-size:12.5px; color:#8b91a7; }

/* Responsive */
@media (max-width: 900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .category-page-layout{ flex-direction:column; }
  .category-sidebar{ width:100%; }
}
@media (max-width: 640px){
  .hero-slider{ height:220px; }
  .hero-caption{ margin-inline-start:20px; padding:18px 22px; max-width:80%; }
  .hero-caption h2{ font-size:19px; }
  .header-row{ flex-direction:column; align-items:stretch; }
  .header-actions{ justify-content:space-between; }
  .footer-grid{ grid-template-columns:1fr; }
  .product-detail{ flex-direction:column; }
}