@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/fonts/vazirmatn-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

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

@font-face {
  font-family: "Fantezi";
  src: url("assets/fonts/Fantezi.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "WizardWorld";
  src: url("assets/fonts/WizardWorldSimplified.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #17131d;
  --panel: #211b27;
  --panel-2: #29212e;
  --ink: #f1e9da;
  --muted: #a99eaa;
  --gold: #c9a76b;
  --gold-soft: #e3c995;
  --purple: #9d79c5;
  --line: rgba(213,183,131,.28);
  --danger: #e08b76;
  --font: "Vazirmatn", Tahoma, sans-serif;
  --font-display-fa: "Fantezi", "Vazirmatn", Tahoma, sans-serif;
  --font-display-en: "WizardWorld", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); background: var(--bg);
  font-family: var(--font); overflow-x: hidden;
  background-image: radial-gradient(ellipse at 50% -15%, rgba(113,78,127,.25), transparent 48%),
    radial-gradient(ellipse at 100% 55%, rgba(105,72,105,.10), transparent 40%);
}
button, input, select { font: inherit; }
button { cursor: pointer; }
.page-glow { position: fixed; inset: 0; pointer-events: none; opacity: .13; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
.site-header { border-bottom: 1px solid var(--line); background: rgba(19,15,24,.78); backdrop-filter: blur(14px); }
.header-inner { width: min(1120px, calc(100% - 36px)); min-height: 76px; margin: auto; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand-lockup { display:flex; align-items:center; gap:10px; }
.brand-mark-image { width:58px; height:58px; flex:0 0 58px; object-fit:contain; filter:drop-shadow(0 2px 9px rgba(201,167,107,.16)); }
.brand-name { font-family:var(--font-display-fa); font-size:27px; font-weight:700; letter-spacing:0; line-height:1.25; white-space:nowrap; }
.brand-subtitle { color:var(--gold); font: 8px var(--font); letter-spacing:0; margin-top:4px; direction:rtl; text-align:right; white-space:nowrap; }
.header-ornament { color:var(--gold); opacity:.82; font: 13px var(--font-display-en), Georgia,serif; letter-spacing:1.8px; }
.header-status { color:var(--muted); font-size:10px; display:flex; align-items:center; gap:7px; }
.status-dot { width:6px; height:6px; background:#8fa88b; border-radius:50%; box-shadow:0 0 9px #8fa88b; }
.main-shell { width:min(1120px, calc(100% - 36px)); margin:auto; }
.intro { text-align:center; padding:48px 12px 30px; }
.intro-kicker { color:var(--gold); font:12px var(--font-display-en), Georgia,serif; letter-spacing:2px; display:flex; align-items:center; justify-content:center; gap:12px; }
.intro-kicker span { width:34px; height:1px; background:var(--gold); opacity:.6; }
.intro h1 { margin:18px 0 10px; font-family:var(--font-display-fa); font-size:clamp(38px,6.2vw,62px); line-height:1.48; font-weight:700; letter-spacing:0; }
.intro h1 em { color:var(--gold-soft); font-style:normal; font-family:var(--font-display-fa); letter-spacing:0; }
.intro p { color:var(--muted); font-size:13px; margin:0; }
.intro-divider { display:flex; align-items:center; justify-content:center; gap:12px; color:var(--gold); margin:23px auto 0; }
.intro-divider i { width:75px; height:1px; background:var(--line); }
.catalog-tools { border:1px solid var(--line); background:rgba(33,27,39,.76); border-radius:16px; padding:16px; box-shadow:0 12px 35px rgba(0,0,0,.12); }
.search-box { display:flex; align-items:center; gap:10px; height:48px; padding:0 14px; border:1px solid rgba(213,183,131,.22); background:#18141e; border-radius:10px; }
.search-icon { color:var(--gold); font-size:27px; line-height:1; }
.search-box input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-size:13px; }
.search-box input::placeholder { color:#807583; }
.search-box kbd { color:#817686; border:1px solid #514653; border-radius:4px; padding:2px 5px; font-size:9px; direction:ltr; white-space:nowrap; }
.tool-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:15px; }
.category-tabs { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding:2px 0 5px; flex:1; }
.category-tabs::-webkit-scrollbar { display:none; }
.category-tab { white-space:nowrap; border:1px solid transparent; color:var(--muted); background:transparent; border-radius:30px; padding:8px 14px; font-size:11px; transition:.2s; }
.category-tab:hover { color:var(--gold-soft); border-color:var(--line); }
.category-tab.active { color:#201923; background:var(--gold-soft); border-color:var(--gold-soft); font-weight:700; }
.sort-wrap { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:10px; white-space:nowrap; }
.sort-wrap select { background:#18141e; color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:8px 9px; outline:0; font-size:10px; }
.quick-filters { display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.check-filter { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:10px; cursor:pointer; }
.check-filter input { position:absolute; opacity:0; }
.fake-check { width:15px; height:15px; border:1px solid #75637b; border-radius:4px; display:inline-grid; place-items:center; }
.check-filter input:checked + .fake-check { background:var(--gold); border-color:var(--gold); }
.check-filter input:checked + .fake-check:after { content:"✓"; color:#211923; font-size:11px; font-weight:bold; }
.check-filter b { color:var(--gold); }
.result-count { color:#827785; font-size:10px; }
.products-section { min-height:320px; padding:22px 0 45px; }
.products-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px; }
.product-card { min-width:0; overflow:hidden; border:1px solid rgba(213,183,131,.20); background:linear-gradient(155deg,rgba(43,34,49,.98),rgba(29,24,34,.98)); border-radius:13px; position:relative; transition:transform .22s,border-color .22s,box-shadow .22s; cursor:pointer; }
.product-card:hover { transform:translateY(-3px); border-color:rgba(213,183,131,.55); box-shadow:0 12px 28px rgba(0,0,0,.22); }
.product-media { aspect-ratio:1/1; width:100%; background:#302735; position:relative; overflow:hidden; }
.product-media img { display:block; width:100%; height:100%; object-fit:contain; transition:opacity .35s; opacity:0; }
.product-media img.loaded { opacity:1; }
.image-placeholder { position:absolute; inset:0; display:grid; place-items:center; color:#a68b9b; font-size:34px; background:radial-gradient(circle,#403344,#28222e); }
.sale-badge { position:absolute; top:10px; right:10px; background:#7c3e43; color:#fff1e9; border:1px solid rgba(255,220,190,.25); border-radius:5px; padding:4px 7px; font-size:9px; font-weight:700; }
.card-body { padding:12px 12px 13px; }
.product-category { color:var(--gold); font-size:9px; margin-bottom:5px; opacity:.9; }
.product-name { font-size:12px; font-weight:600; line-height:1.8; min-height:23px; margin:0 0 7px; overflow-wrap:anywhere; }
.price-line { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; min-height:24px; }
.price-current { font-size:13px; font-weight:800; color:var(--gold-soft); direction:ltr; unicode-bidi:plaintext; }
.price-old { color:#8f8490; font-size:10px; text-decoration:line-through; direction:ltr; unicode-bidi:plaintext; }
.currency { font-size:9px; color:var(--muted); font-weight:400; }
.stock-line { margin-top:7px; min-height:18px; color:#9d9a9e; font-size:9px; display:flex; align-items:center; gap:5px; }
.stock-line.low { color:#e6a06f; }
.stock-line.available { color:#63c78a; font-weight:700; }
.stock-line.out { color:#e28b83; }
.stock-fire { color:#ff9b61; font-size:12px; }
.card-description { color:#a99eaa; font-size:10px; line-height:1.9; margin-top:7px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.loading-card { border:1px solid var(--line); background:var(--panel); border-radius:13px; aspect-ratio:.78; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--muted); font-size:11px; gap:12px; }
.loader { width:22px; height:22px; border:2px solid #57485d; border-top-color:var(--gold); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.empty-state { text-align:center; padding:70px 10px; color:var(--muted); }
.empty-symbol { font-size:40px; color:var(--gold); }
.empty-state h2 { color:var(--ink); font-size:18px; }
.empty-state p { font-size:12px; }
.text-button { color:var(--gold-soft); border:0; background:transparent; text-decoration:underline; padding:8px; font-size:12px; }
.site-footer { text-align:center; padding:5px 0 35px; color:var(--muted); }
.footer-rule { display:flex; align-items:center; justify-content:center; gap:12px; color:var(--gold); }
.footer-rule:before,.footer-rule:after { content:""; width:90px; height:1px; background:var(--line); }
.footer-brand { font-family:var(--font-display-fa); font-size:29px; font-weight:700; letter-spacing:0; color:var(--gold-soft); margin-top:12px; }
.site-footer p { font:12px var(--font); color:#b9aebb; }
.footer-parent-brand { width:148px; margin:17px auto 12px; padding:7px 10px; background:#f1e9da; border:1px solid rgba(201,167,107,.62); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.footer-parent-brand img { display:block; width:100%; height:auto; }
.site-footer small { font-size:9px; }
.product-dialog { width:min(460px,calc(100% - 28px)); max-height:88vh; overflow:auto; border:1px solid var(--line); border-radius:16px; background:#211b27; color:var(--ink); padding:0; box-shadow:0 25px 90px #000a; }
.product-dialog::backdrop { background:rgba(8,6,11,.78); backdrop-filter:blur(4px); }
.dialog-close { position:sticky; top:9px; float:left; z-index:2; margin:9px; border:1px solid var(--line); background:#211b27dd; color:var(--ink); width:32px; height:32px; border-radius:50%; font-size:22px; line-height:1; }
.dialog-product-image { width:100%; aspect-ratio:1/1; object-fit:contain; background:#302735; display:block; }
.dialog-info { padding:17px 20px 22px; }
.dialog-info h2 { font-size:19px; margin:4px 0 10px; }
.dialog-info p { color:var(--muted); font-size:12px; line-height:2; white-space:pre-line; }
.dialog-price { font-size:20px; color:var(--gold-soft); font-weight:800; }
.dialog-stock { font-size:11px; color:var(--muted); margin-top:8px; }
.dialog-stock.available { color:#63c78a; font-weight:700; }
.dialog-stock.low { color:#e6a06f; }
.dialog-stock.out { color:#e28b83; }
.toast { position:fixed; bottom:20px; left:50%; transform:translate(-50%,20px); background:#302735; border:1px solid var(--line); color:var(--ink); border-radius:9px; padding:10px 15px; font-size:11px; opacity:0; pointer-events:none; transition:.25s; z-index:10; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:760px) {
  .header-inner { min-height:65px; gap:10px; }
  .brand-name { font-size:21px; }
  .brand-subtitle { font-size:7px; letter-spacing:0; }
  .brand-mark-image { width:43px; height:43px; flex:0 0 43px; }
  .header-status { font-size:9px; white-space:nowrap; }
  .header-ornament { display:none; }
  .intro { padding:36px 8px 24px; }
  .intro h1 { font-size:39px; }
  .catalog-tools { padding:12px; border-radius:13px; }
  .tool-row { display:block; }
  .category-tabs { margin-bottom:10px; }
  .sort-wrap { justify-content:flex-start; }
  .sort-wrap select { flex:1; }
  .products-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .card-body { padding:10px 9px 11px; }
  .product-name { font-size:11px; }
  .price-current { font-size:12px; }
  .quick-filters { align-items:flex-start; gap:8px; }
}
@media (max-width:360px) {
  .main-shell,.header-inner { width:calc(100% - 22px); }
  .products-grid { gap:8px; }
  .card-body { padding:8px; }
  .price-current { font-size:11px; }
  .result-count { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* V3.2 — supplier brand filter and event-poster carousel */
.brand-wrap { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:10px; white-space:nowrap; }
.brand-wrap select { background:#18141e; color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:8px 9px; outline:0; font-size:10px; max-width:150px; }
.product-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; }
.product-meta .product-category { margin:0; }
.product-brand { color:#b9a5ca; border:1px solid rgba(157,121,197,.24); border-radius:30px; padding:2px 7px; font-size:9px; white-space:nowrap; }
.banners-section { margin:22px 0 4px; }
.banner-track { position:relative; width:100%; }
.catalog-banner { display:none; position:relative; overflow:hidden; width:100%; aspect-ratio:16 / 5; border:1px solid rgba(213,183,131,.38); border-radius:16px; background:linear-gradient(135deg,#302337,#1a1520); box-shadow:0 14px 36px rgba(0,0,0,.22); text-decoration:none; color:var(--ink); }
.catalog-banner.active { display:block; animation:bannerFade .35s ease; }
.catalog-banner picture,.catalog-banner img { display:block; width:100%; height:100%; }
.catalog-banner img { object-fit:cover; }
.catalog-banner:after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(13,9,16,.62)); pointer-events:none; }
.banner-title { position:absolute; z-index:1; right:22px; bottom:20px; color:#fff5df; font-family:var(--font-display-fa); font-size:clamp(16px,2.6vw,27px); text-shadow:0 2px 12px #000; }
.banner-open-hint { position:absolute; z-index:1; left:20px; bottom:22px; color:#f4dfb4; font-size:10px; text-shadow:0 2px 8px #000; }
.banner-controls { display:flex; justify-content:center; align-items:center; gap:14px; min-height:32px; margin-top:8px; }
.banner-controls:empty { display:none; }
.banner-dots { display:flex; align-items:center; gap:7px; }
.banner-dot { width:7px; height:7px; padding:0; border:0; border-radius:20px; background:#716277; transition:width .2s,background .2s; }
.banner-dot.active { width:20px; background:var(--gold-soft); }
.banner-arrow { width:27px; height:27px; border:1px solid var(--line); border-radius:50%; background:#211b27; color:var(--gold-soft); font-size:19px; line-height:1; }
@keyframes bannerFade { from { opacity:.55; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:760px) {
  .brand-wrap { justify-content:flex-start; margin:0 0 9px; }
  .brand-wrap select { flex:1; max-width:none; }
  .catalog-banner { aspect-ratio:4 / 5; border-radius:12px; }
  .catalog-banner img { object-fit:cover; }
  .banner-title { right:13px; bottom:14px; font-size:19px; }
  .banner-open-hint { left:13px; bottom:16px; font-size:9px; }
}
@media (prefers-reduced-motion:reduce) { .catalog-banner.active { animation:none; } }

/* V3.3 — in-page banner detail viewer and multi-image product gallery */
.product-dialog { width:min(760px,calc(100% - 24px)); max-height:92vh; }
.dialog-close { position:sticky; top:8px; margin:8px; }
.dialog-gallery { position:relative; width:100%; min-height:240px; max-height:64vh; background:#15111a; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.dialog-gallery-image { display:block; width:100%; height:min(64vh,620px); object-fit:contain; background:#15111a; }
.dialog-gallery-empty { min-height:260px; flex-direction:column; gap:8px; color:#bca3c6; font-size:38px; }
.dialog-gallery-empty span { font:12px var(--font); color:var(--muted); }
.gallery-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:42px; height:42px; border-radius:50%; border:1px solid rgba(227,201,149,.55); background:rgba(24,18,28,.82); color:var(--gold-soft); font-size:28px; line-height:1; box-shadow:0 3px 16px #0008; }
.gallery-prev { right:14px; }
.gallery-next { left:14px; }
.gallery-counter { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); padding:4px 11px; border-radius:20px; background:rgba(15,11,18,.78); border:1px solid rgba(227,201,149,.3); color:#fff2d8; font-size:10px; direction:ltr; }
.image-count-badge { position:absolute; left:9px; top:10px; z-index:2; border-radius:20px; padding:4px 8px; color:#fff2dc; background:rgba(18,13,22,.78); border:1px solid rgba(227,201,149,.35); font-size:9px; }
.dialog-featured { color:var(--gold-soft); font-size:11px; margin-top:9px; }
.gallery-caption { color:#938693; font-size:10px; margin-top:9px; }
.banner-dialog-visual { display:flex; align-items:center; justify-content:center; width:100%; max-height:66vh; min-height:220px; background:#15111a; }
.banner-dialog-visual picture { width:100%; height:100%; display:flex; justify-content:center; }
.banner-dialog-visual img { width:100%; max-height:66vh; object-fit:contain; display:block; }
.banner-dialog-info { padding:17px 22px 22px; }
.banner-dialog-info h2 { margin-top:0; }
.banner-description { white-space:pre-line; line-height:2; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.banner-description.collapsed { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.banner-description.expanded { display:block; max-height:35vh; overflow:auto; }
.dialog-actions { display:flex; align-items:center; gap:9px; margin-top:16px; }
.dialog-action-button { border:1px solid var(--line); border-radius:9px; padding:9px 16px; color:var(--ink); background:#302735; font-size:11px; min-width:94px; }
.dialog-action-button.primary { background:var(--gold-soft); color:#211923; border-color:var(--gold-soft); font-weight:700; }
.dialog-action-button:disabled { opacity:.45; cursor:not-allowed; }
.catalog-banner { border:0; padding:0; cursor:pointer; font:inherit; text-align:inherit; }
@media (max-width:760px) {
  .product-dialog { width:calc(100% - 16px); max-height:94vh; border-radius:13px; }
  .dialog-gallery { min-height:190px; max-height:58vh; }
  .dialog-gallery-image { height:58vh; }
  .gallery-arrow { width:36px; height:36px; font-size:24px; }
  .banner-dialog-visual { min-height:170px; max-height:58vh; }
  .banner-dialog-visual img { max-height:58vh; }
  .banner-dialog-info { padding:14px 16px 18px; }
  .dialog-info { padding:14px 16px 18px; }
}
.banner-dialog-visual img { border-radius:14px 14px 0 0; }


/* V3.7 — separated featured row, contact footer, and mobile-safe typography */
.product-group { margin: 0 0 34px; }
.product-group-heading { display:flex; align-items:center; gap:10px; margin: 0 0 15px; color:var(--gold-soft); }
.product-group-heading > span { color:var(--gold); font-size:17px; }
.product-group-heading h2 { margin:0; font-size:17px; font-weight:700; white-space:nowrap; }
.product-group-heading i { height:1px; flex:1; background:linear-gradient(to left,var(--line),transparent); }
.product-group[hidden] { display:none !important; }
.footer-contact { width:min(620px,100%); margin:18px auto 0; padding:15px 18px; border:1px solid var(--line); border-radius:13px; background:rgba(33,27,39,.55); font-size:11px; line-height:2; }
.footer-contact-item { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; }
.footer-contact-label { color:var(--gold-soft); font-weight:700; }
.footer-contact-links { display:flex; justify-content:center; flex-wrap:wrap; gap:9px 18px; margin-top:9px; }
.footer-contact a { color:var(--gold-soft); text-decoration:none; border-bottom:1px dashed rgba(227,201,149,.35); }
.footer-contact a:hover { color:#fff1d0; }
.footer-stock-note { display:block; margin-top:16px; color:#b9aebb; }
.footer-copyright { margin-top:11px; color:#827785; font-size:10px; }
.intro p { max-width:850px; margin:0 auto; line-height:2.1; }
@media (max-width:760px) {
  .product-group-heading h2 { font-size:14px; }
  .footer-contact { padding:12px 10px; font-size:10px; }
  .footer-contact-item { display:block; }
  .footer-contact-label { display:block; }
  .footer-contact-links { gap:8px 12px; }
  .intro p { font-size:12px; line-height:2.15; }
}