/* ===== Base / Theme ===== */
@font-face {
  font-family: 'Vazirmatn';
  src: url('assets/fonts/Vazirmatn.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}


:root{
  --green:#1B3C35;
  --gold:#F1E6B2;
  --red:#D12E2E;
  --ink:#0b1a18;
  --ink-2:#304743;
  --muted:#6b7d79;
  --bg:#ffffff;
  --card:#ffffff;
  --ring:rgba(27,60,53,.18);
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:18px;

  /* WhatsApp */
  --wa:#25D366;
  --wa-border:#1fb357;

  /* ثابت‌سازی ارتفاع مدیا و اکشن‌ها */
  --media-h:220px;
  --media-h-sm:190px;
  --actions-h:48px;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Vazirmatn",ui-sans-serif,system-ui}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(1200px,92%);margin-inline:auto}
[hidden]{display:none!important}

/* Controls inherit fonts */
input,select,button,textarea,option{font:inherit;color:inherit;line-height:1.4}
::placeholder{font-family:inherit;color:#6f8a85;opacity:1}

/* ===== Utilities / Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:.2s;font-family:inherit;font-weight:700;font-size:.95rem;white-space:nowrap
}
.btn-primary{background:var(--red);color:#fff;box-shadow:var(--shadow)}
.btn-outline{border-color:var(--green);color:var(--green);background:#fff}
.btn-light{background:#f4f7f6;border-color:#e7efec}
.btn-lg{padding:12px 18px}

/* ===== Header / Nav ===== */
.site-header{background:#dee6e2}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{width:112px;height:auto;flex:0 0 auto}
.brand-sub{font-size:.82rem;color:var(--ink-2);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.menu-btn{display:none;gap:5px;flex-direction:column;background:#fff;border:1px solid #eef2ef;border-radius:10px;padding:8px}
.menu-btn span{width:22px;height:2px;background:var(--ink)}
.nav-links{display:flex;gap:18px;align-items:center;list-style:none;margin:0;padding:0}
.nav-links .ig{background:var(--green);color:#fff;padding:10px 16px;border-radius:999px}
.nav-links a:hover{opacity:.9}

/* ===== Hero ===== */
.hero{
  display:grid;grid-template-columns:minmax(540px,1.05fr) .95fr;
  gap:32px;align-items:center;padding:34px 0 24px;
}
.hero-text h1{font-size:clamp(28px,5vw,44px);margin:0 0 10px;color:var(--green);line-height:1.25}
.hero-text p{color:#35544f;line-height:1.9;margin:0}
.hero-cta{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.hero-art{border-radius:22px;overflow:hidden}
.hero-art img{
  width:100%;height:100%;max-height:520px;aspect-ratio:16/9;object-fit:cover;object-position:left center;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.12));
}

/* ===== Controls (sticky filter bar) ===== */
.controls{
  position:sticky;top:0;z-index:20;background:#fffffff0;backdrop-filter:saturate(130%) blur(8px);
  border-bottom:1px solid #edf3ef
}
.controls-row{
  display:grid;grid-template-columns:1fr 220px 220px max-content;
  gap:10px;align-items:center;padding:12px 0
}
.control input,.control select{
  width:100%;height:48px;line-height:48px;padding:0 14px;border:1.5px solid #e6efeb;border-radius:12px;background:#f7fbf9;outline:none
}
.control input:focus,.control select:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--ring)}
/* پیکان سلکت RTL */
.control select{
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23304743' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:12px center;padding-left:40px
}
.clear-btn{height:48px;padding:0 14px;border:1px solid #e6efeb;border-radius:12px;background:#fff;font:inherit;cursor:pointer}

/* ===== Grid / Cards ===== */
.products{padding:22px 0 44px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{
  background:var(--card);border:1px solid #e8efeb;border-radius:var(--radius);
  box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;transition:transform .2s
}
.card:hover{transform:translateY(-2px)}
.card-media{
  padding:14px;background:#f5faf7;border-bottom:1px solid #e8efeb;
  display:grid;place-items:center;min-height:calc(var(--media-h) + 28px)
}
.card-media img{width:100%;height:var(--media-h);object-fit:contain}
.card-body{padding:14px 14px 0;flex:1}
.badge{display:inline-flex;gap:6px;align-items:center;background:#eef6f3;color:#2c4f49;border:1px solid #d9ebe5;padding:4px 10px;border-radius:999px;font-size:.85rem}
.card h3{margin:10px 0 6px;font-size:1.02rem;line-height:1.55}
.card p{color:#3a4f4b;line-height:1.85;margin:0}
.card ul{margin:10px 0 0 0;padding:0 18px 0 0}
.card li{color:#40635d;line-height:1.85}

/* ===== Actions (IG / WhatsApp / Share) — همیشه یک‌خط و کف کارت ===== */
.card-actions,
.modal-actions{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr 1fr max-content;
  gap:8px;align-items:center;border-top:1px dashed #e3ece7;padding:8px 10px;
  min-height:var(--actions-h);white-space:nowrap;overflow:hidden
}
.card-actions{grid-template-columns:1fr 1fr max-content;margin-top:auto}
.modal-actions{grid-template-columns:1fr 1fr max-content}

/* دکمه‌های اکشن */
.card-actions .cta,
.modal-actions .cta{
  background:var(--green);color:#fff;border:0;border-radius:10px;
  padding:8px 12px;font-size:.9rem;line-height:1;height:36px;display:inline-flex;align-items:center;justify-content:center
}
.card-actions .share,
.modal-actions .share{
  padding:8px 10px;border-radius:10px;border:1px solid #e6efeb;background:#fff;cursor:pointer;font:inherit;
  font-size:.88rem;line-height:1;height:36px
}

/* واتساپ متمایز */
.wa{
  background:var(--wa)!important;color:#0b2f1d!important;border:1px solid var(--wa-border)!important;
  box-shadow:var(--shadow)
}
.wa:hover{filter:saturate(112%)}
.wa:before{
  content:""; width:16px; height:16px; margin-left:6px; display:inline-block; background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%230b2f1d' d='M20.5 3.5A11.8 11.8 0 0 0 12 0C5.4 0 0 5.3 0 11.9c0 2.1.6 4.1 1.6 6L0 24l6.3-1.6c1.7 1 3.7 1.6 5.7 1.6 6.6 0 12-5.3 12-11.9 0-3.2-1.3-6.2-3.5-8.6Zm-8.5 19.1a9.9 9.9 0 0 1-5-1.4l-.4-.2-3.7 1 .9-3.6-.2-.4a9.9 9.9 0 1 1 8.4 4.6Zm5.4-7.4c-.3-.1-1.8-.9-2.1-1-.3-.1-.5-.1-.7.2-.2.3-.8 1-.9 1.2-.2.2-.4.2-.7.1s-1.3-.5-2.4-1.5c-.9-.9-1.6-2-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.4.5-.6.2-.2.2-.3.3-.5.1-.2.1-.4 0-.6-.1-.1-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4s-1.1 1-1.1 2.6 1.1 3 1.2 3.2c.1.2 2.2 3.3 5.2 4.6.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2.1-1.5.3-.7.3-1.3.2-1.5 0-.1-.2-.2-.6-.4Z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%230b2f1d' d='M20.5 3.5A11.8 11.8 0 0 0 12 0C5.4 0 0 5.3 0 11.9c0 2.1.6 4.1 1.6 6L0 24l6.3-1.6c1.7 1 3.7 1.6 5.7 1.6 6.6 0 12-5.3 12-11.9 0-3.2-1.3-6.2-3.5-8.6Zm-8.5 19.1a9.9 9.9 0 0 1-5-1.4l-.4-.2-3.7 1 .9-3.6-.2-.4a9.9 9.9 0 1 1 8.4 4.6Zm5.4-7.4c-.3-.1-1.8-.9-2.1-1-.3-.1-.5-.1-.7.2-.2.3-.8 1-.9 1.2-.2.2-.4.2-.7.1s-1.3-.5-2.4-1.5c-.9-.9-1.6-2-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.4.5-.6.2-.2.2-.3 .3-.5.1-.2.1-.4 0-.6-.1-.1-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4s-1.1 1-1.1 2.6 1.1 3 1.2 3.2c.1.2 2.2 3.3 5.2 4.6.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2.1-1.5.3-.7 .3-1.3 .2-1.5 0-.1-.2-.2-.6-.4Z'/></svg>") center/contain no-repeat;
}

/* ===== Empty ===== */
.empty{padding:40px;text-align:center;color:var(--muted);background:#f7fbf9;border:1px dashed #e6efeb;border-radius:16px}

/* ===== About ===== */
.about{background:linear-gradient(180deg,#fff,#f7fbf9);padding:40px 0}
.about-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.about h2{color:var(--green);margin:0 0 10px}
.bullets{margin:10px 0 0 0;padding:0 18px 0 0}
.bullets li{line-height:1.9;color:#3a4f4b}

/* ===== Footer ===== */
.site-footer{background:#0f211d;color:#d8e5e1;margin-top:10px}
.footer-top{display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 0;border-bottom:1px solid #18342f;text-align:center}
.footer-top img{width:auto;max-width:180px;height:auto;object-fit:contain}
.footer-meta{display:flex;justify-content:space-between;gap:12px;padding:18px 0;font-size:.92rem;flex-wrap:wrap}
.muted{color:#93aaa4}

/* ===== Floating ===== */
.scroll-top{position:fixed;bottom:20px;left:20px;width:46px;height:46px;border-radius:50%;border:1px solid #e7efec;background:#fff;box-shadow:var(--shadow);cursor:pointer;display:none}
.scroll-top.show{display:flex;align-items:center;justify-content:center}

/* ===== Modal (popup) — اکشن کف مودال فیکس ===== */
.modal-backdrop{
  position:fixed;inset:0;z-index:1000;background:rgba(15,33,29,.25);
  backdrop-filter:blur(6px) saturate(120%);display:flex;align-items:center;justify-content:center;padding:20px
}
.modal{
  width:min(520px,92vw);max-height:92vh;display:flex;flex-direction:column;
  border-radius:var(--radius);background:var(--card);border:1px solid #e8efeb;box-shadow:var(--shadow);overflow:hidden;animation:pop .15s ease-out
}
@keyframes pop{from{transform:scale(.98);opacity:0}to{transform:scale(1);opacity:1}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #eef3f0;background:#f5faf7}
.modal-title{font-weight:700;color:var(--green)}
.modal-close{border:1px solid #e6efeb;background:#fff;border-radius:10px;padding:6px 10px;cursor:pointer;font:inherit}
.modal-body{padding:12px 14px 2px;overflow:auto;flex:1}
.modal-media{
  padding:14px;background:#f5faf7;border-bottom:1px solid #e8efeb;
  display:grid;place-items:center;min-height:calc(var(--media-h) + 28px)
}
.modal-media img{width:100%;height:var(--media-h);object-fit:contain}

/* ===== Responsive tweaks ===== */
@media (max-width:1100px){
  .controls-row{grid-template-columns:1fr 1fr 1fr max-content}
}
@media (max-width:992px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .hero{grid-template-columns:1fr}
  .hero-art img{max-height:360px;object-position:center}
  .about-wrap{grid-template-columns:1fr}
}

/* === Mobile: نوار فیلترها کاملاً آیکون‌محور (بدون متن) === */
@media (max-width:640px){
  .grid{grid-template-columns:1fr}

  .nav-links{position:fixed;inset:64px 0 auto 0;background:#fff;box-shadow:0 14px 24px rgba(0,0,0,.08);padding:14px;display:none;flex-direction:column}
  .nav-links.show{display:flex}
  .menu-btn{display:flex}

  .card-media img,.modal-media img{height:var(--media-h-sm)}
  .card-media,.modal-media{min-height:calc(var(--media-h-sm) + 28px)}
  .hero-art img{max-height:300px}

  /* اکشن‌ها کمی ریزتر تا همیشه یک‌خط بمانند */
  .card-actions .cta,.modal-actions .cta{height:34px;padding:7px 10px;font-size:.86rem}
  .card-actions .share,.modal-actions .share{height:34px;padding:7px 9px;font-size:.84rem}

  /* ——— فیلترها: ۴ آیکونِ 48px بدون متن ——— */
  .controls .controls-row{
    grid-template-columns:repeat(4,48px)!important;
    gap:8px!important; padding:10px 0!important; justify-content:space-between!important
  }

  /* جستجو: ذره‌بین */
  .controls .controls-row #q{
    width:48px!important; height:48px!important; padding:0!important; border-radius:12px!important;
    border:1.5px solid #e6efeb!important; background:#f7fbf9!important;
    text-indent:-9999px!important; color:transparent!important; caret-color:transparent!important;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23304743' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L19 20.49 20.49 19l-4.99-5ZM9.5 14A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14Z'/></svg>")!important;
    background-repeat:no-repeat!important; background-position:center!important; background-size:22px!important;
  }
  .controls .controls-row #q::placeholder{opacity:0}

  /* دسته و مرتب‌سازی: آیکون */
  .controls .controls-row #cat,
  .controls .controls-row #sort{
    width:48px!important; height:48px!important; padding:0!important; border-radius:12px!important;
    border:1.5px solid #e6efeb!important; background:#f7fbf9!important;
    -webkit-appearance:none!important; appearance:none!important;
    color:transparent!important; text-indent:-9999px!important;
    background-repeat:no-repeat!important; background-position:center!important; background-size:22px!important;
  }
  .controls .controls-row #cat{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23304743' d='M3 6h18v2H3V6Zm0 5h12v2H3v-2Zm0 5h6v2H3v-2Z'/></svg>")!important;
  }
  .controls .controls-row #sort{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23304743' d='M3 18h6v-2H3v2Zm0-5h12v-2H3v2ZM3 6v2h18V6H3Z'/></svg>")!important;
  }

  /* پاک‌سازی: سطل زباله */
  .controls .controls-row #clear{
    width:48px!important; height:48px!important; padding:0!important; border-radius:12px!important;
    border:1.5px solid #e6efeb!important; background:#fff!important;
    text-indent:-9999px!important; color:transparent!important;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23304743' d='M15 3H9v2H4v2h16V5h-5V3Zm-9 6 2 12h8l2-12H6Z'/></svg>")!important;
    background-repeat:no-repeat!important; background-position:center!important; background-size:22px!important;
  }
}