/*
Theme Name: Nan Bazar
Theme URI: https://bazarnan.ir/
Author: Nan Bazar
Description: قالب اختصاصی صفحه اصلی نان بازار؛ مرجع تجهیزات نانوایی و قنادی ایران.
Version: 1.0.0
Text Domain: nanbazar
*/

:root{
    --navy:#14171B;
    --navy-2:#1D2126;
    --bg:#F2EFE8;
    --paper:#FFFFFF;
    --ink:#1B1D1F;
    --dim:#6B6F72;
    --dimmer:#9A9D9F;
    --line: rgba(20,23,27,0.12);
    --line-strong: rgba(20,23,27,0.22);
    --brick:#C6532F;
    --brick-dark:#963D24;
    --wheat:#C9902C;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{background:var(--bg); color:var(--ink); font-family:'Vazirmatn',sans-serif; direction:rtl;}
  body{ line-height:1.7; }
  a{color:inherit; text-decoration:none;}
  img,.ph{display:block;}
  .mono{font-family:'IBM Plex Mono',monospace; letter-spacing:0.01em;}
  .wrap{max-width:1200px; margin:0 auto; padding:0 28px;}
  button{font-family:inherit; cursor:pointer;}

  /* ===== header ===== */
  header{ background:var(--navy); color:#EDEAE2; }
  .topbar{
    display:flex; justify-content:space-between; align-items:center; font-size:0.78rem;
    padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.08); color:rgba(237,234,226,0.55);
  }
  .topbar a{ margin-inline-start:16px; }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand-icon{ width:34px; height:34px; }
  .brand-text{ display:flex; flex-direction:column; line-height:1.25; }
  .brand-name{ font-weight:900; font-size:1.15rem; }
  .brand-name span{ color:var(--brick); }
  .brand-tag{ font-size:0.68rem; color:rgba(237,234,226,0.5); }
  nav.links{ display:flex; gap:28px; font-size:0.92rem; color:rgba(237,234,226,0.78); }
  nav.links a.active{ color:#fff; border-bottom:2px solid var(--brick); padding-bottom:18px; margin-bottom:-18px; }
  nav.links a:hover{ color:#fff; }
  .nav-actions{ display:flex; align-items:center; gap:12px; }
  .btn{ display:inline-flex; align-items:center; gap:6px; padding:9px 18px; font-size:0.86rem; font-weight:600; border-radius:2px; border:1px solid transparent; }
  .btn-fill{ background:var(--brick); color:#fff; }
  .btn-fill:hover{ background:var(--brick-dark); }
  .btn-line{ border-color:rgba(237,234,226,0.35); color:#EDEAE2; }
  .btn-line:hover{ border-color:#fff; }

  /* ===== hero ===== */
  .hero{ background:var(--navy); padding-bottom:54px; }
  .hero-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap:44px; align-items:center; padding-top:44px; }
  .hero-copy .plate{
    display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:0.74rem;
    color:var(--wheat); border:1px solid rgba(201,144,44,0.4); padding:5px 12px; border-radius:2px; background:rgba(201,144,44,0.08);
  }
  .dot{ width:6px; height:6px; border-radius:50%; background:var(--wheat); display:inline-block; }
  .hero-copy h1{ color:#fff; font-weight:900; font-size:clamp(2rem,3.6vw,2.7rem); line-height:1.28; margin:18px 0 14px; }
  .hero-copy h1 em{ font-style:normal; color:var(--brick); }
  .hero-copy p{ color:rgba(237,234,226,0.68); font-size:1.02rem; max-width:44ch; margin-bottom:26px; }

  .search-console{ background:var(--navy-2); border:1px solid rgba(255,255,255,0.1); border-radius:3px; padding:8px; display:flex; gap:8px; }
  .search-console select{
    background:transparent; border:none; color:rgba(237,234,226,0.8); font-family:inherit; font-size:0.86rem; padding:0 10px; border-inline-end:1px solid rgba(255,255,255,0.12);
  }
  .search-console input{ flex:1; background:transparent; border:none; color:#fff; padding:12px 10px; font-size:0.96rem; font-family:inherit; }
  .search-console input::placeholder{ color:rgba(237,234,226,0.4); }
  .search-console input:focus{ outline:none; }
  .search-console button{ background:var(--brick); border:none; color:#fff; padding:0 24px; font-weight:700; border-radius:2px; }
  .search-console button:hover{ background:var(--brick-dark); }

  .hero-media{ position:relative; aspect-ratio:5/4; border-radius:3px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); }
  .hero-media .ph{
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse at 30% 20%, rgba(213,120,60,0.55), transparent 55%),
      repeating-linear-gradient(135deg, #2A2D31, #2A2D31 12px, #24272B 12px, #24272B 24px);
  }
  .hero-media .grid-overlay{
    position:absolute; inset:0;
    background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size:34px 34px;
  }
  .hero-media .cap{
    position:absolute; bottom:16px; right:16px; left:16px; display:flex; justify-content:space-between; align-items:flex-end;
  }
  .hero-media .cap-title{ color:#fff; font-weight:700; font-size:1rem; }
  .hero-media .cap-sub{ color:rgba(237,234,226,0.6); font-size:0.78rem; font-family:'IBM Plex Mono',monospace; }
  .hero-media .badge{ background:var(--brick); color:#fff; font-size:0.72rem; font-weight:700; padding:4px 10px; border-radius:2px; position:absolute; top:14px; right:14px; }

  /* ===== category ring strip ===== */
  .sec{ padding:56px 0; }
  .sec-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:28px; gap:16px; }
  .sec-head h2{ font-size:1.4rem; font-weight:800; }
  .sec-head .see-all{ font-size:0.86rem; color:var(--brick); font-weight:600; white-space:nowrap; }
  .sec-num{ font-family:'IBM Plex Mono',monospace; color:var(--dimmer); font-size:0.78rem; }

  .cat-groups{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .cat-group{ background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:22px; }
  .cat-group-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line); }
  .cat-group-head h3{ font-size:1rem; font-weight:800; }
  .cat-group-head span{ font-size:0.72rem; color:var(--dimmer); }
  .cat-items{ display:flex; flex-direction:column; gap:2px; }
  .cat-item{ display:flex; align-items:center; gap:12px; padding:10px 6px; border-radius:2px; transition:background .12s; }
  .cat-item:hover{ background:var(--bg); }
  .cat-item .ci-icon{ width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--brick-dark); flex:none; }
  .cat-item .ci-icon svg{ width:17px; height:17px; }
  .cat-item .ci-label{ font-size:0.86rem; font-weight:600; }
  .cat-item .ci-count{ margin-inline-start:auto; font-size:0.72rem; color:var(--dimmer); font-family:'IBM Plex Mono',monospace; }

  /* ===== listings ===== */
  .listing-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .listing{ background:var(--paper); border:1px solid var(--line); border-radius:3px; overflow:hidden; }
  .listing-media{ position:relative; aspect-ratio:4/3; }
  .listing-media .ph{ position:absolute; inset:0; background:repeating-linear-gradient(135deg,#E7E1D3,#E7E1D3 10px,#DDD5C2 10px,#DDD5C2 20px); }
  .listing-tag{ position:absolute; top:10px; right:10px; background:var(--wheat); color:#1B1D1F; font-size:0.7rem; font-weight:700; padding:4px 10px; border-radius:2px; }
  .listing-time{ position:absolute; top:10px; left:10px; background:rgba(20,23,27,0.68); color:#EDEAE2; font-size:0.68rem; padding:3px 9px; border-radius:2px; font-family:'IBM Plex Mono',monospace; }
  .listing-body{ padding:16px 16px 18px; }
  .l-title{ font-weight:700; font-size:0.98rem; margin-bottom:5px; }
  .l-meta{ font-size:0.8rem; color:var(--dim); margin-bottom:12px; display:flex; align-items:center; gap:5px; }
  .l-foot{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:12px; }
  .l-price{ font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--brick-dark); font-size:0.88rem; }
  .l-btn{ font-size:0.78rem; font-weight:600; color:var(--brick); border:1px solid var(--line-strong); padding:6px 12px; border-radius:2px; }
  .l-btn:hover{ border-color:var(--brick); }

  /* ===== producers ===== */
  .prod-panel{ display:grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1.3fr; gap:12px; }
  .prod-card{ background:var(--paper); border:1px solid var(--line); border-radius:3px; padding:22px 14px; text-align:center; }
  .prod-mark{ width:44px; height:44px; margin:0 auto 12px; border-radius:50%; background:var(--bg); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--brick-dark); font-size:0.95rem; }
  .prod-name{ font-weight:700; font-size:0.9rem; }
  .prod-count{ font-size:0.74rem; color:var(--dim); margin-top:4px; font-family:'IBM Plex Mono',monospace; }
  .prod-highlight{
    background:var(--navy); color:#EDEAE2; border-radius:3px; padding:24px 20px; display:flex; flex-direction:column; justify-content:space-between;
  }
  .prod-highlight h3{ font-size:1.05rem; margin-bottom:6px; }
  .prod-highlight p{ font-size:0.82rem; color:rgba(237,234,226,0.6); margin-bottom:16px; }
  .prod-highlight .btn{ align-self:flex-start; }

  /* ===== feature icons row ===== */
  .feat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  .feat{ background:var(--paper); padding:26px 22px; display:flex; gap:14px; align-items:flex-start; }
  .feat .f-icon{ width:38px; height:38px; flex:none; border-radius:2px; background:var(--bg); border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--brick-dark); }
  .feat .f-icon svg{ width:19px; height:19px; }
  .feat .f-title{ font-weight:700; font-size:0.94rem; margin-bottom:4px; }
  .feat .f-desc{ font-size:0.8rem; color:var(--dim); }

  /* ===== CTA banner ===== */
  .cta-banner{
    position:relative; overflow:hidden; border-radius:3px; background:var(--navy);
    padding:44px 40px; display:flex; justify-content:space-between; align-items:center; gap:24px;
  }
  .cta-banner::before{
    content:""; position:absolute; inset:0;
    background: repeating-linear-gradient(135deg, rgba(181,75,44,0.16), rgba(181,75,44,0.16) 2px, transparent 2px, transparent 26px);
  }
  .cta-banner > *{ position:relative; z-index:1; }
  .cta-banner h3{ color:#fff; font-size:1.3rem; font-weight:800; margin-bottom:6px; }
  .cta-banner p{ color:rgba(237,234,226,0.65); font-size:0.92rem; }

  /* ===== footer ===== */
  footer{ background:var(--navy); color:rgba(237,234,226,0.7); margin-top:20px; }
  .foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:30px; padding:48px 0 30px; border-bottom:1px solid rgba(255,255,255,0.08); }
  .foot-grid h4{ color:#fff; font-size:0.92rem; margin-bottom:16px; }
  .foot-grid ul{ list-style:none; display:flex; flex-direction:column; gap:10px; font-size:0.85rem; }
  .foot-grid ul a:hover{ color:#fff; }
  .foot-about p{ font-size:0.85rem; line-height:1.8; max-width:34ch; margin-top:14px; color:rgba(237,234,226,0.55); }
  .foot-bottom{ display:flex; justify-content:space-between; padding:18px 0; font-size:0.78rem; color:rgba(237,234,226,0.4); }

  @media (max-width:980px){
    .hero-grid{ grid-template-columns:1fr; }
    .cat-groups{ grid-template-columns:1fr; }
    .listing-row{ grid-template-columns:repeat(2,1fr); }
    .prod-panel{ grid-template-columns:repeat(3,1fr); }
    .feat-row{ grid-template-columns:repeat(2,1fr); }
    .foot-grid{ grid-template-columns:1fr 1fr; }
    nav.links{ display:none; }
  }

/* ===== v3 improvements ===== */
.hero-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.hero-actions .btn{min-width:145px;justify-content:center}
.request-sec{padding-bottom:34px}
.request-box{
  background:var(--navy);color:#EDEAE2;border-radius:4px;padding:30px 34px;
  display:flex;justify-content:space-between;align-items:center;gap:28px;
  position:relative;overflow:hidden
}
.request-box::after{
  content:"";position:absolute;width:260px;height:260px;border:1px solid rgba(201,144,44,.18);
  border-radius:50%;left:-90px;top:-150px
}
.request-box>*{position:relative;z-index:1}
.request-label{
  color:var(--wheat);font-family:'IBM Plex Mono',monospace;font-size:.72rem;
  border:1px solid rgba(201,144,44,.35);padding:4px 9px;border-radius:2px
}
.request-box h2{color:#fff;font-size:1.35rem;margin:12px 0 5px}
.request-box p{color:rgba(237,234,226,.62);font-size:.88rem;max-width:650px}
.request-box .btn{white-space:nowrap}
@media(max-width:700px){
  .request-box{flex-direction:column;align-items:flex-start;padding:24px}
  .request-box .btn{width:100%;justify-content:center}
}