:root {
      --bg: #0c0f0e;
      --surface: #151816;
      --surface-2: #101311;
      --text: #f7efe4;
      --muted: #b9ad9b;
      --gold: #c99a53;
      --gold-2: #f2cb82;
      --brass: #b8793c;
      --brass-hover: #c98f4a;
      --ink: #130e09;
      --line: rgba(201,154,83,.24);
      --soft-line: rgba(255,255,255,.08);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 84px; }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      background-color: var(--bg);
      background-image:
        linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
      background-size: 32px 32px;
      font-family: 'IRANYekan', 'IRYekan', Tahoma, Arial, sans-serif !important;
      overflow-x: hidden;
      text-align: right;
    }

    button, input, select, textarea { font-family: inherit !important; }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }

    .site-header {
      position: fixed;
      inset: 0 0 auto;
      z-index: 1000;
      border-bottom: 1px solid rgba(201,154,83,.20);
      background: rgba(10,12,11,.93);
      backdrop-filter: blur(18px);
      box-shadow: 0 12px 38px rgba(0,0,0,.28);
    }

    .navbar { min-height: 72px; }
    .navbar-brand { gap: 11px; margin: 0; color: var(--text) !important; }
    .brand-mark { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; color: #17110a; border-radius: 7px; background: var(--brass); font-weight: 950; }
    .brand-title { display: block; font-size: .96rem; font-weight: 950; line-height: 1.4; }
    .brand-sub { display: block; color: #968c7e; direction: ltr; font-size: .62rem; text-align: right; }

    .navbar .nav-link { padding: .55rem .72rem !important; color: #d7cfbf !important; border-radius: 7px; font-size: .82rem; transition: color .18s ease, background .18s ease; }
    .navbar .nav-link:hover,
    .navbar .nav-link.active { color: #f2d6aa !important; background: rgba(184,121,60,.13); }
    .navbar-toggler { border: 1px solid rgba(201,154,83,.38); box-shadow: none !important; }
    .navbar-toggler-icon { filter: invert(1) sepia(.6); }

    .header-action {
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 12px;
      color: var(--ink);
      border: 1px solid rgba(242,203,130,.22);
      border-radius: 7px;
      background: var(--brass);
      font-size: .72rem;
      font-weight: 850;
      transition: transform .18s ease, background .18s ease;
    }

    .header-action:hover { color: var(--ink); background: var(--brass-hover); transform: translateY(-1px); }
    .search-main { padding: 108px 0 74px; }

    .page-heading {
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      align-items: end;
      gap: 24px;
      margin-bottom: 22px;
    }

    .breadcrumb-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 12px; color: #8f877b; font-size: .72rem; }
    .breadcrumb-mini a { color: #d2c4b1; }
    .breadcrumb-mini span { color: #5e5b55; }
    .page-kicker { display: block; margin-bottom: 8px; color: var(--gold); font-size: .72rem; font-weight: 900; }
    .page-title { margin: 0; color: #fff4e6; font-size: clamp(1.75rem,4vw,3rem); font-weight: 950; line-height: 1.35; }
    .page-description { max-width: 700px; margin: 10px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.9; }

    .heading-count { min-width: 172px; padding: 13px 15px; border-right: 3px solid var(--brass); background: rgba(21,24,22,.88); }
    .heading-count strong { display: block; color: #f5e6d2; direction: ltr; font-size: 1.34rem; }
    .heading-count span { display: block; margin-top: 3px; color: #8f877b; font-size: .64rem; }

    .search-layout { display: grid; grid-template-columns: minmax(0,1fr) 290px; align-items: start; gap: 16px; }

    .filter-workspace {
      overflow: hidden;
      border: 1px solid rgba(201,154,83,.28);
      border-radius: 8px;
      background: var(--surface);
      box-shadow: 0 24px 64px rgba(0,0,0,.26);
    }

    .workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 20px; border-bottom: 1px solid var(--soft-line); background: #111411; }
    .workspace-header strong { display: block; color: #fff1df; font-size: .88rem; }
    .workspace-header span { display: block; margin-top: 3px; color: #817a70; font-size: .62rem; }
    .workspace-state { flex: 0 0 auto; min-height: 28px; display: inline-flex !important; align-items: center; padding: 0 8px; color: #dbbd8e !important; border: 1px solid rgba(201,154,83,.24); border-radius: 4px; background: rgba(184,121,60,.08); font-size: .6rem !important; }

    .filter-section { padding: 20px; border-bottom: 1px solid var(--soft-line); }
    .filter-section:last-child { border-bottom: 0; }
    .filter-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .filter-head strong { display: block; color: #eee2d2; font-size: .78rem; }
    .filter-head span { display: block; margin-top: 3px; color: #797269; font-size: .6rem; }
    .group-count { min-width: 26px; height: 26px; display: grid !important; place-items: center; margin: 0 !important; color: #d6b57f !important; border: 1px solid rgba(201,154,83,.26); border-radius: 4px; background: #101311; direction: ltr; font-size: .62rem !important; font-weight: 900; }

    .choice-grid { display: grid; gap: 7px; }
    .size-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
    .style-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .surface-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }

    .choice { position: relative; min-width: 0; margin: 0; cursor: pointer; }
    .choice input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
    .choice-box {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 7px 8px;
      color: #bdb2a3;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 6px;
      background: #101311;
      font-size: .67rem;
      font-weight: 750;
      text-align: center;
      transition: color .18s ease, border-color .18s ease, background .18s ease;
    }

    .choice:hover .choice-box { color: #efd1a4; border-color: rgba(201,154,83,.34); background: #171a18; }
    .choice input:checked + .choice-box { color: var(--ink); border-color: rgba(242,203,130,.24); background: var(--brass); }
    .choice input:focus-visible + .choice-box { outline: 2px solid rgba(242,203,130,.75); outline-offset: 2px; }
    .size-choice .choice-box { min-height: 48px; flex-direction: column; direction: ltr; }
    .size-choice small { color: #777168; font-size: .52rem; font-weight: 600; }
    .size-choice input:checked + .choice-box small { color: rgba(19,14,9,.64); }
    .surface-choice .choice-box { flex-direction: column; }
    .surface-choice small { color: #736d64; direction: ltr; font-size: .5rem; }
    .surface-choice input:checked + .choice-box small { color: rgba(19,14,9,.62); }

    .color-tools { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-bottom: 10px; }
    .color-search { min-height: 40px; padding: 8px 11px; color: #f0e5d7; border: 1px solid rgba(255,255,255,.10); border-radius: 6px; background: #0f1210; font-size: .68rem; outline: 0; }
    .color-search::placeholder { color: #68635c; }
    .color-search:focus { border-color: rgba(201,154,83,.60); }
    .color-visible-count { min-width: 76px; display: grid; place-items: center; color: #8f877b; border: 1px solid var(--soft-line); border-radius: 6px; background: #101311; font-size: .58rem; }

    .color-grid { max-height: 296px; overflow: auto; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; padding-left: 4px; scrollbar-width: thin; scrollbar-color: rgba(201,154,83,.45) transparent; }
    .color-choice[hidden] { display: none; }
    .color-choice .choice-box { min-height: 46px; justify-content: flex-start; padding: 7px; text-align: right; }
    .swatch { width: 19px; height: 19px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); }
    .color-choice input:checked + .choice-box .swatch { border-color: rgba(19,14,9,.42); }

    .filter-summary {
      position: sticky;
      top: 88px;
      overflow: hidden;
      border: 1px solid var(--soft-line);
      border-radius: 8px;
      background: #111411;
      box-shadow: 0 18px 48px rgba(0,0,0,.22);
    }

    .summary-result { padding: 18px; border-bottom: 1px solid var(--soft-line); background: #151816; }
    .summary-result span { display: block; color: #827b71; font-size: .62rem; }
    .summary-result strong { display: block; margin-top: 5px; color: #f2dfc5; font-size: 1.42rem; font-weight: 950; }
    .summary-result small { display: block; margin-top: 3px; color: #817970; font-size: .58rem; }
    .summary-body { padding: 16px; }
    .summary-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
    .summary-title strong { color: #dfd4c5; font-size: .72rem; }
    .summary-title span { color: #7e776e; font-size: .56rem; }

    .selected-list { min-height: 94px; max-height: 260px; overflow: auto; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding-bottom: 4px; scrollbar-width: thin; }
    .selected-empty { width: 100%; margin: 10px 0 0; color: #6f6a63; font-size: .62rem; line-height: 1.8; }
    .selected-chip { min-height: 29px; display: inline-flex; align-items: center; gap: 6px; padding: 0 7px; color: #d9c7ad; border: 1px solid rgba(201,154,83,.26); border-radius: 5px; background: rgba(184,121,60,.08); font-size: .58rem; }
    .selected-chip button { width: 17px; height: 17px; display: grid; place-items: center; padding: 0; color: #ba9c70; border: 0; background: transparent; cursor: pointer; line-height: 1; }

    .summary-actions { display: grid; gap: 7px; margin-top: 14px; }
    .search-button,
    .reset-button {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border: 1px solid transparent;
      border-radius: 6px;
      font-size: .68rem;
      font-weight: 850;
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
    }

    .search-button { color: var(--ink); border-color: rgba(242,203,130,.22); background: var(--brass); }
    .search-button:hover { background: var(--brass-hover); transform: translateY(-1px); }
    .reset-button { color: #d5b581; border-color: rgba(184,121,60,.36); background: rgba(184,121,60,.07); }
    .reset-button:hover { color: #efd3a9; border-color: rgba(201,154,83,.55); background: rgba(184,121,60,.14); }
    .search-button:focus-visible,
    .reset-button:focus-visible,
    .color-search:focus-visible,
    .header-action:focus-visible { outline: 2px solid rgba(242,203,130,.75); outline-offset: 2px; }

    .results-section { margin-top: 34px; padding-top: 12px; }
    .results-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
    .results-head span { display: block; margin-bottom: 5px; color: var(--gold); font-size: .64rem; font-weight: 900; }
    .results-head h2 { margin: 0; color: #fff1df; font-size: 1.28rem; font-weight: 950; }
    .results-head p { margin: 0; color: #807970; font-size: .64rem; }

    .result-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
    .result-card { overflow: hidden; border: 1px solid var(--soft-line); border-radius: 7px; background: var(--surface); transition: border-color .2s ease, box-shadow .2s ease; }
    .result-card:hover { border-color: rgba(201,154,83,.46); box-shadow: 0 20px 48px rgba(0,0,0,.28); }
    .result-image { position: relative; height: 210px; overflow: hidden; border-bottom: 1px solid var(--soft-line); }
    .result-image img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; filter: saturate(.86) contrast(1.06) brightness(.76); }
    .result-size { position: absolute; top: 11px; right: 11px; min-height: 25px; display: inline-flex; align-items: center; padding: 0 7px; color: #191109; border-radius: 4px; background: var(--brass); direction: ltr; font-size: .58rem; font-weight: 900; }
    .result-body { padding: 13px; }
    .result-body h3 { margin: 0; color: #f8ecdc; font-size: .82rem; font-weight: 900; }
    .result-body p { min-height: 42px; margin: 7px 0 0; color: #8e867b; font-size: .62rem; line-height: 1.7; }
    .result-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
    .result-tags span { padding: 3px 6px; color: #c9bba8; border: 1px solid rgba(201,154,83,.20); border-radius: 3px; background: #101311; font-size: .54rem; }
    .result-link { min-height: 35px; display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 0 9px; color: #efcf9e; border: 1px solid rgba(184,121,60,.36); border-radius: 5px; background: rgba(184,121,60,.08); font-size: .6rem; font-weight: 850; }
    .result-link:hover { color: #ffe0ad; border-color: rgba(201,154,83,.58); background: rgba(184,121,60,.15); }

    .empty-results { grid-column: 1 / -1; min-height: 230px; display: grid; place-items: center; padding: 32px; border: 1px dashed rgba(201,154,83,.30); border-radius: 7px; background: #101311; text-align: center; }
    .empty-results strong { display: block; color: #e9ddcc; font-size: .86rem; }
    .empty-results span { display: block; max-width: 440px; margin-top: 7px; color: #817a70; font-size: .64rem; line-height: 1.8; }
    .empty-results button { margin-top: 14px; }

    footer { padding: 26px 0; border-top: 1px solid var(--line); background: #090b0a; }
    .footer-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .footer-row strong { display: block; color: #f1e5d5; font-size: .82rem; }
    .footer-row span { display: block; margin-top: 4px; color: #817a70; font-size: .64rem; }
    .footer-links { display: flex; flex-wrap: wrap; gap: 14px; }
    .footer-links a { color: #b8ad9d; font-size: .68rem; }
    .footer-links a:hover { color: #efd0a1; }

    @media (max-width:1199.98px) {
      .size-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
      .color-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
      .result-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    }

    @media (max-width:991.98px) {
      .page-heading { grid-template-columns: 1fr; }
      .heading-count { width: fit-content; }
      .search-layout { grid-template-columns: 1fr; }
      .filter-summary { position: relative; top: auto; }
      .selected-list { min-height: 54px; max-height: 150px; }
      .summary-actions { grid-template-columns: 1fr 1fr; }
      .result-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    }

    @media (max-width:767.98px) {
      .search-main { padding-top: 100px; }
      .size-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
      .style-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .surface-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
      .color-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .results-head { align-items: flex-start; flex-direction: column; }
      .footer-row { align-items: flex-start; flex-direction: column; }
    }

    @media (max-width:479.98px) {
      .brand-sub { display: none; }
      .workspace-header { align-items: flex-start; flex-direction: column; }
      .filter-section { padding: 17px 14px; }
      .size-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .surface-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .result-grid { grid-template-columns: 1fr; }
      .result-image { height: 240px; }
      .summary-actions { grid-template-columns: 1fr; }
    }

.swatch-dynamic {
  background: linear-gradient(135deg, #d4b27a, #78654a);
}

/* Inline declarations migrated from search.html. */
.u-search-1 { --swatch:#3f6f63; }
.u-search-2 { --swatch:#eadfc7; }
.u-search-3 { --swatch:#b8a07a; }
.u-search-4 { --swatch:#29445e; }
.u-search-5 { --swatch:#8bb8cf; }
.u-search-6 { --swatch:#a05f70; }
.u-search-7 { --swatch:#e4b7bf; }
.u-search-8 { --swatch:#b38b2e; }
.u-search-9 { --swatch:#e2c76b; }
.u-search-10 { --swatch:#355440; }
.u-search-11 { --swatch:#91b28c; }
.u-search-12 { --swatch:#5b4130; }
.u-search-13 { --swatch:#a9815d; }
.u-search-14 { --swatch:#181918; }
.u-search-15 { --swatch:#424542; }
.u-search-16 { --swatch:#f1eee7; }
.u-search-17 { --swatch:#ded2bd; }
.u-search-18 { --swatch:#c2ae8d; }
.u-search-19 { --swatch:#77754a; }
.u-search-20 { --swatch:#785538; }
.u-search-21 { --swatch:#5b5e5d; }
.u-search-22 { --swatch:#b3b5b2; }
.u-search-23 { --swatch:#9a7357; }
.u-search-24 { --swatch:#593b2d; }
.u-search-25 { --swatch:#bd7958; }
.u-search-26 { --swatch:#794832; }
.u-search-27 { --swatch:#9d7258; }
.u-search-28 { --swatch:#273448; }
.u-search-29 { --swatch:#28716d; }
.u-search-30 { --swatch:#838785; }
.u-search-31 { --swatch:#d2c09d; }
.u-search-32 { --swatch:#75533b; }
.u-search-33 { --swatch:#9ac1ae; }
.u-search-34 { --swatch:#4e7595; }
.u-search-35 { --swatch:#d8c8ab; }
.u-search-36 { --swatch:#9e8c70; }
.u-search-37 { --swatch:#a48770; }
.u-search-38 { --swatch:#8f9290; }
.u-search-39 { --swatch:#82624c; }
.u-search-40 { --swatch:#c59a45; }