@font-face {
  font-family: 'Yekan Bakh';
  src: url('/assets/fonts/YekanBakhFaNum-VF.woff2?v=2.3.4') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Public shell tokens. Customer catalogue pages remain unchanged images. */
:root {
  --ui-paper: #fff; --ui-canvas: #f5f5f2; --ui-text: #252a27;
  --ui-muted: #646a66; --ui-border: #dedfd9; --ui-soft: #efefea;
  --ui-focus: #3b6355; --ui-error: #9f342e; --ui-radius: 8px;
  --ui-line: 1.65; --viewer-height: 700px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; width: 100%; min-height: 100%; }
html { background: var(--ui-canvas); }
body { min-height: 100dvh; color: var(--ui-text); background: var(--ui-canvas); font: 400 15px/var(--ui-line) 'Yekan Bakh', Tahoma, Arial, sans-serif; font-synthesis: none; }
button, input, select, textarea { font: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button, summary { touch-action: manipulation; }
:is(button, a, summary):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
.skip-link { position: absolute; inset-inline-start: 16px; top: 8px; padding: 10px 16px; z-index: 1000; color: var(--ui-paper); background: var(--ui-text); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
/* Compact controls; an extra pager row appears only when enabled. */
.topbar { position: relative; z-index: 100; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left)); background: var(--ui-paper); border-bottom: 1px solid var(--ui-border); }
.topbar .title { margin: 0; min-width: 0; font-size: 14px; font-weight: 650; line-height: var(--ui-line); overflow-wrap: anywhere; }
.actions { display: flex; align-items: center; gap: 4px; direction: rtl; }
.catalog-view :is(button, .actions a, .viewer-menu summary) { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-paper); color: var(--ui-text); font-size: 14px; font-weight: 500; line-height: var(--ui-line); text-decoration: none; cursor: pointer; }
.catalog-view button:disabled { color: var(--ui-muted); opacity: .5; cursor: default; }
.catalog-view :is(button, .actions a, .viewer-menu summary):not(:disabled):hover { background: var(--ui-soft); }
.catalog-view .actions .action-primary { border-color: var(--ui-text); background: var(--ui-text); color: var(--ui-paper); }
.catalog-view .actions .action-primary:hover { background: #3c433e; }
.actions svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.actions > button { padding: 10px; }
.actions > button [data-action-label] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.viewer-menu { position: relative; }
.viewer-menu summary { list-style: none; padding: 10px; }
.viewer-menu summary::-webkit-details-marker { display: none; }
.viewer-menu:not([open]) .viewer-menu-items { display: none; }
.viewer-menu[open] summary { background: var(--ui-soft); }
.viewer-menu-items { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; width: min(244px,calc(100vw - 24px)); max-height: min(380px,calc(100dvh - 100px)); overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-paper); box-shadow: 0 4px 16px rgb(0 0 0 / .08); }
.catalog-view .viewer-menu-items :is(a, button) { width: 100%; justify-content: flex-start; border-color: transparent; text-align: start; white-space: normal; }
.catalog-view .viewer-menu-items .viewer-home { border-top: 1px solid var(--ui-border); border-radius: 0; margin-top: 4px; color: var(--ui-muted); }
.viewer-pagination { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 12px; min-width: 0; }
#pageInfo { color: var(--ui-muted); font-size: 13px; line-height: var(--ui-line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.catalog-view .viewer-pagination button { border-color: transparent; padding-inline: 14px; }
.hint-box { padding: 5px 12px; text-align: center; color: var(--ui-muted); background: var(--ui-paper); font-size: 12px; line-height: 1.7; border-bottom: 1px solid var(--ui-border); }
.hint-box:empty { display: none; }
body:not(.theme-ready) :is(.topbar,.hint-box,.viewer-wrap) { visibility: hidden; }
/* Preserve page geometry, link overlays, scroll and single-page navigation. */
.viewer-wrap { width: 100%; height: var(--viewer-height); padding: 0; overflow-x: hidden; overflow-y: auto; overflow-anchor: none; background: var(--ui-canvas); overscroll-behavior: contain; }
.viewer { position: relative; width: 100%; max-width: 1100px; margin: 0 auto; direction: ltr; }
.page-slot { position: relative; width: 100%; min-height: var(--viewer-height); display: flex; align-items: center; justify-content: center; scroll-snap-align: start; scroll-snap-stop: always; }
.page-slot[hidden], .no-scroll .page-slot { display: none !important; }
.no-scroll .page-slot.is-current-page { display: flex !important; }
.page { position: relative; width: min(100%,1100px); aspect-ratio: var(--page-ratio,.707); margin: 0 auto; background: transparent; overflow: hidden; flex: 0 0 auto; }
.catalog-page-image { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.page-slot .page { opacity: 0; visibility: hidden; }
.page-slot.is-loaded .page { opacity: 1; visibility: visible; }
.page-slot.is-loading::after { position: absolute; color: var(--ui-muted); font-size: 13px; content: 'در حال بارگذاری صفحه…'; }
.pdf-link { position: absolute; display: block; z-index: 20; background: transparent; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.fit-scroll, .fit-scroll body, .no-scroll, .no-scroll body { height: 100%; overflow: hidden; }
.fit-scroll .viewer-wrap { scroll-snap-type: y mandatory; scroll-behavior: smooth; }
.no-scroll .viewer-wrap { overflow: hidden; }
.no-scroll .page-slot { min-height: var(--viewer-height); }
:is(.fullscreen-active,.ios-fullscreen) :is(.topbar,.hint-box,.seo-panel) { display: none !important; }
:is(.fullscreen-active,.ios-fullscreen) .viewer-wrap { height: 100dvh !important; --viewer-height: 100dvh !important; }
:is(.fullscreen-active,.ios-fullscreen) .page-slot { min-height: 100dvh !important; }
#iosExitFullscreenBtn { display: none; }
body.ios-fullscreen { position: fixed; inset: 0; overflow: hidden; }
body.ios-fullscreen #iosExitFullscreenBtn { display: inline-flex !important; position: fixed; top: calc(8px + env(safe-area-inset-top)); inset-inline-end: 8px; z-index: 100000; }
.error { max-width: 620px; margin: 32px auto; padding: 24px; background: var(--ui-paper); color: var(--ui-error); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); text-align: center; direction: rtl; line-height: 1.8; }
.catalog-view .page-load-error { max-width: min(92%,520px); min-height: 44px; padding: 14px 18px; white-space: normal; font: inherit; text-align: center; }
.install-notice { position: fixed; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 100001; direction: rtl; }
.install-notice__inner { max-width: 560px; margin: 0 auto; padding: 12px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-paper); color: var(--ui-text); box-shadow: 0 4px 16px rgb(0 0 0 / .08); display: flex; align-items: center; gap: 12px; }
.install-notice__message { flex: 1; min-width: 0; font-size: 13px; line-height: 1.8; white-space: pre-line; }
.install-notice__close { flex: 0 0 auto; }
.seo-panel { position: relative; z-index: 20; width: 100%; margin: 0; border-bottom: 1px solid var(--ui-border); background: var(--ui-paper); color: var(--ui-text); direction: rtl; }
.seo-panel summary { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: 13px; font-weight: 500; }
.seo-panel summary::before { content: '+'; flex: 0 0 16px; font: 400 20px/1 Arial,sans-serif; }
.seo-panel[open] summary::before { content: '−'; }
.seo-panel summary::-webkit-details-marker { display: none; }
.seo-panel__content { max-height: min(48dvh,460px); overflow: auto; padding: 0 16px 16px; border-top: 1px solid var(--ui-border); font-size: 14px; line-height: 1.9; }
.seo-panel__content h2 { margin: 16px 0 4px; font-size: 17px; font-weight: 650; }
.seo-panel__content p { margin: 8px 0; overflow-wrap: anywhere; }
.seo-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.seo-tags span { padding: 2px 8px; border-radius: 4px; background: var(--ui-soft); color: var(--ui-muted); font-size: 12px; line-height: 1.75; }
.brand-website a { color: var(--ui-text); font-weight: 600; text-underline-offset: 4px; }
/* A quiet directory of brands; retain every custom description. */
.catalog-directory { overflow: auto; background: var(--ui-paper); }
.directory-header, .directory-main, .directory-footer { width: min(1120px,calc(100% - 32px)); margin-inline: auto; }
.directory-topline { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; border-bottom: 1px solid var(--ui-border); }
.directory-brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--ui-text); font-size: 15px; font-weight: 700; text-decoration: none; }
.directory-topline > span { color: var(--ui-muted); font-size: 12px; }
.directory-intro { padding: 28px 0 24px; }
.directory-intro h1 { margin: 0; font-size: clamp(26px,3vw,34px); line-height: var(--ui-line); font-weight: 700; }
.directory-intro p { max-width: 52ch; margin: 4px 0 12px; color: var(--ui-muted); font-size: 14px; line-height: 1.8; }
.directory-count { display: block; color: var(--ui-muted); font-size: 12px; }
.directory-main { margin-block: 0 32px; }
.catalog-directory-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
.catalog-directory-card { position: relative; display: flex; align-items: flex-start; gap: 16px; min-width: 0; padding: 18px 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-paper); }
.catalog-directory-card:hover { border-color: #a7afa8; }
.catalog-directory-card:focus-within { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.catalog-directory-card h2 a:focus-visible { outline: none; }
.directory-logo { position: relative; flex: 0 0 64px; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; background: var(--ui-canvas); }
.directory-logo img { position: absolute; inset: 0; display: block; width: 64px; height: 64px; padding: 4px; object-fit: contain; background: var(--ui-paper); }
.directory-logo img[data-directory-icon] { visibility: hidden; }
.directory-logo.is-ready img { visibility: visible; }
.directory-logo-error { display: none; padding: 8px; color: var(--ui-muted); font-size: 10px; text-align: center; }
.directory-logo.is-error .directory-logo-error { display: block; }
.directory-card-content { flex: 1; min-width: 0; }
.catalog-directory-card h2 { margin: 0 0 4px; font-size: 16px; font-weight: 650; line-height: var(--ui-line); overflow-wrap: anywhere; }
.catalog-directory-card h2 a { color: var(--ui-text); text-decoration: none; }
.catalog-directory-card h2 a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.catalog-directory-card p { margin: 4px 0; color: var(--ui-muted); font-size: 13px; line-height: 1.85; overflow-wrap: anywhere; }
.directory-card-link { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--ui-muted); font-size: 12px; }
.directory-card-link > span { font: 400 17px/1 Arial,sans-serif; }
.directory-empty { padding: 32px 20px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); color: var(--ui-muted); }
.directory-footer { border-top: 1px solid var(--ui-border); padding: 16px 0 24px; font-size: 12px; }
.directory-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ui-muted); text-decoration: none; }
.public-error { width: min(620px,calc(100% - 32px)); margin: 12vh auto 0; padding: 28px 20px; text-align: center; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-paper); }
.public-error img { border-radius: var(--ui-radius); }
.public-error h1 { margin: 16px 0 8px; font-size: 22px; line-height: var(--ui-line); }
.public-error p { color: var(--ui-muted); line-height: 1.85; }
.public-error a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ui-text); text-underline-offset: 4px; }
@media (min-width: 768px) {
  .topbar { padding-inline: 20px; grid-template-columns: minmax(0,1fr) auto auto; column-gap: 20px; }
  .topbar .title { font-size: 16px; grid-column: 1; grid-row: 1; }
  .actions { grid-column: 3; grid-row: 1; gap: 6px; }
  .viewer-pagination { grid-column: 2; grid-row: 1; }
  .actions > button { padding-inline: 12px; }
  .actions > button [data-action-label] { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: nowrap; }
  .directory-intro { padding-block: 36px 28px; }
  .catalog-directory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .catalog-directory-card { padding: 22px; }
  .seo-panel summary { padding-inline: 20px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .topbar { column-gap: 12px; }
  .actions > button [data-action-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (prefers-reduced-motion: reduce) { .fit-scroll .viewer-wrap { scroll-behavior: auto; } }

html.hamin-media-open, body.hamin-media-open { overflow: hidden !important; overscroll-behavior: none !important; }
.hamin-media-modal[hidden] { display: none !important; }
.hamin-media-modal { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); direction: rtl; font-family: inherit; line-height: 1.65; }
.hamin-media-backdrop { position: absolute; inset: 0; background: rgb(18 22 19 / .85); }
.hamin-media-dialog { position: relative; width: min(960px,100%); max-height: min(calc(100dvh - 24px),860px); display: grid; grid-template-rows: auto minmax(0,1fr) auto; overflow: hidden; border: 1px solid #414740; border-radius: 8px; background: #1b201d; color: #fff; }
.hamin-media-dialog.is-portrait { width: min(360px,100%,calc((100svh - 156px) * 9 / 16)); max-height: calc(100svh - 24px); }
.hamin-media-dialog.is-audio { width: min(620px,100%); }
.hamin-media-dialog.is-expanded { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
.hamin-media-dialog.is-expanded .hamin-media-stage { aspect-ratio: auto; height: calc(100dvh - 156px); max-height: none; min-height: 0; }
.hamin-media-header, .hamin-media-footer { display: flex; align-items: center; gap: 12px; padding: 8px 12px; }
.hamin-media-header { justify-content: space-between; border-bottom: 1px solid #414740; }
.hamin-media-heading { display: flex; align-items: center; min-width: 0; gap: 8px; font-size: 14px; }
.hamin-media-heading strong { min-width: 0; font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
.hamin-media-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.catalog-view :is(.hamin-media-close,.hamin-media-action) { border-color: #414740; color: #fff; background: #1b201d; cursor: pointer; font: inherit; min-height: 44px; }
.catalog-view .hamin-media-dialog :is(button,a.hamin-media-original) { border-color: #414740; color: #fff; background: #1b201d; }
.catalog-view .hamin-media-dialog :is(button,a.hamin-media-original):hover { background: #333b35; }
.catalog-view .hamin-media-close { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; padding: 8px; }
.catalog-view :is(.hamin-media-close,.hamin-media-action):hover { background: #333b35; }
:is(.hamin-media-close,.hamin-media-action):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hamin-media-close svg { width: 20px; height: 20px; fill: currentColor; }
.hamin-media-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 180px; background: #000; overflow: hidden; }
.hamin-media-dialog.is-portrait .hamin-media-stage { aspect-ratio: 9 / 16; min-height: 0; max-height: calc(100svh - 156px); }
.hamin-media-dialog.is-audio .hamin-media-stage { aspect-ratio: auto; min-height: 130px; display: grid; place-items: center; background: #1b201d; }
.hamin-media-frame, .hamin-media-player { display: block; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; }
.hamin-media-audio { width: calc(100% - 32px); margin: 28px 16px; }
.hamin-media-loading { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; background: rgb(0 0 0 / .7); color: #d1d6d0; font-size: 14px; text-align: center; pointer-events: none; }
.hamin-media-loading.is-error { color: #fff; }
.hamin-media-footer { border-top: 1px solid #414740; }
.hamin-media-footer { flex-wrap: wrap; }
.hamin-media-footer .hamin-media-action { flex: 1; padding: 8px 16px; white-space: nowrap; }
.hamin-media-footer .hamin-media-original { flex: 1; min-height: 44px; border-color: #414740; color: #fff; background: transparent; white-space: nowrap; }
.catalog-view .hamin-media-footer .hamin-media-original:hover { background: #333b35; }
/* Retain loading states without gradients, spinning decoration or heavy shadows. */
.hamin-catalog-loader { position: fixed; inset: 0; z-index: 2147482990; display: grid; place-items: center; padding: 24px; background: var(--ui-paper,#fff); color: var(--ui-text,#252a27); }
.hamin-catalog-loader.is-hiding { visibility: hidden; pointer-events: none; }
.hamin-catalog-loader__inner { width: min(340px,90vw); display: grid; justify-items: center; gap: 12px; text-align: center; }
.hamin-catalog-loader__logo-wrap { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.hamin-catalog-loader__logo { width: 80px; height: 80px; object-fit: contain; border-radius: 8px; background: #fff; }
.hamin-catalog-loader__ring { display: none; }
.hamin-catalog-loader__title { max-width: 100%; font-size: 17px; line-height: 1.65; }
.hamin-catalog-loader__status { font-size: 13px; color: var(--ui-muted,#646a66); }
.hamin-catalog-loader__enter { min-width: 170px; min-height: 44px; margin-top: 4px; padding: 10px 16px; }
.hamin-catalog-loader__enter[hidden] { display: none !important; }
.hamin-catalog-title-row { display: flex; align-items: center; justify-content: flex-start; min-width: 0; gap: 8px; direction: rtl; }
.hamin-catalog-title-row #catalogTitle { min-width: 0; margin: 0; }
.catalog-view .hamin-catalog-sound { min-width: 44px; min-height: 44px; }
.hamin-catalog-sound svg { width: 20px; height: 20px; flex: 0 0 20px; fill: currentColor; stroke: none; }
.hamin-catalog-sound__on { display: none; }
.hamin-catalog-sound__off { display: block; }
.hamin-catalog-sound.is-playing .hamin-catalog-sound__on { display: block; }
.hamin-catalog-sound.is-playing .hamin-catalog-sound__off { display: none; }
.hamin-catalog-sound--fallback { position: fixed; inset-inline-start: max(12px,env(safe-area-inset-left)); bottom: max(12px,env(safe-area-inset-bottom)); z-index: 2147482500; }
@media (orientation: landscape) and (max-height: 560px) {
  .hamin-media-dialog { max-height: calc(100dvh - 24px); }
  .hamin-media-dialog.is-landscape .hamin-media-stage { aspect-ratio: auto; height: min(60dvh,480px); min-height: 0; }
  .hamin-media-dialog.is-portrait { width: min(260px,100%); }
}
