/* ══════════════════════════════════════════════════════════════════
   SHOPDARK-0903 · Shop-ыг conceptspot.info-ийн ХАРАНХУЙ хэлэнд оруулна.

   Эталон (хэмжсэн, таамаглаагүй — conceptspot.info дээрх computed утга):
     дэвсгэр  #071816   бичвэр #EDE9E3
     фонт     Montserrat 14px / 1.55
     өргөлт   #EBA25C (улбар шар) · #ffbd59 (алт)

   ЯАГААД ТУСДАА ФАЙЛ: style.css нь 236KB бөгөөд түүний дотор 97 мөрт
   #ffffff / #222222 гэж ХАТУУ бичсэн, ихэнх нь !important. Тэдгээрийг
   газар дээр нь засах нь эрсдэлтэй (DESIGN.md: 2026-08-10-ны redesign
   2 хуудсыг буцаахад хүргэсэн). Энэ давхаргыг <link>-ээ устгаад л
   бүрэн буцаана.

   ЗОРИУД ЦАЙВАР ҮЛДЭЭСЭН: .product-media — барааны зураг цагаан
   дэвсгэртэй тул харанхуй болговол цагаан тэгш өнцөгт болж харагдана.
   Харанхуй суурин дээрх цайвар "тавиур" нь эталон сайтын зурагтай
   хэсгүүдтэй ижил зарчим.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* Суурь токенуудыг ДАХИН ТОМИЛНО — style.css-ийн алиасууд
     (--cream, --ink, --olive, --line, --muted) эдгээрээс унадаг тул
     дүрэм бүрийг бус, зөвхөн эх утгыг солиход бүхэлдээ эргэнэ. */
  --pearl: #071816;
  --pearl-band: #0C201D;
  --pearl-card: #102926;
  --pearl-input: #14322D;

  /* --olive: var(--kombu) нь style.css-д ихэвчлэн БИЧВЭРИЙН өнгө
     (body, .lead, .body, .product-meta, .marquee). Тиймээс kombu-г
     цаас болгоно; .section-dark, .grade-tab.is-active зэрэг цөөн
     "харанхуй гадаргуу" нь эргээд ЦАЙВАР ялгаа болж зөв ажиллана. */
  --kombu: #EDE9E3;
  --kombu-deep: #F7F5F1;
  --kombu-light: #CFC2A6;

  --ink: #EDE9E3;
  --muted: rgba(237, 233, 227, .60);
  --line: rgba(237, 233, 227, .14);
  --line-light: rgba(237, 233, 227, .07);

  /* Гүн улаан (#53181F) харанхуй дээр бараг үл ялгарна. Эталон сайт
     харанхуй суурин дээр улбар шар/алтыг өргөлт болгодог. */
  --accent: #EBA25C;
  --accent-bright: #ffbd59;
  --accent-dim: rgba(235, 162, 92, .30);

  --matcha-700: #EBA25C;
  --matcha-600: #CFC2A6;
  --matcha-500: #9AA48D;

  /* Энэ давхаргад ашиглах нэрлэсэн утгууд */
  --d-bg: #071816;
  --d-band: #0C201D;
  --d-card: #102926;
  --d-input: #14322D;
  --d-text: #EDE9E3;
  --d-muted: rgba(237, 233, 227, .60);
  --d-line: rgba(237, 233, 227, .14);
}

/* ── 1. Суурь гадаргуу ─────────────────────────────────────────── */
html { background: var(--d-bg); }
body {
  background: var(--d-bg) !important;
  color: var(--d-text) !important;
}
.bg-cream { background-color: var(--d-bg) !important; }
.bg-olive, .bg-olive-deep { background-color: var(--d-band) !important; }
.section, .site-footer, .site-header { background: var(--d-bg) !important; }
.section-dark { background: var(--d-band) !important; color: var(--d-text) !important; }
.hero { background: var(--d-bg) !important; }
.site-header.nav-open,
.site-header.nav-open > .container { background: var(--d-bg) !important; }

/* Туслах класс — `body`-д `.text-olive` өгөгдсөн бөгөөд түүний
   тодорхойлолт (0,1,0) нь `body` (0,0,1)-ийг дардаг. Тиймээс дан
   `body{...}` бичихэд ХҮРЭЛЦЭХГҮЙ — бүх бичвэр #222 хэвээр үлдэж,
   тодрол 1.09 болж байсан (хэмжсэн). */
.text-olive, .text-cream { color: var(--d-text) !important; }

/* ── 2. Гарчиг ба бичвэр ───────────────────────────────────────── */
.econ b, .product-price, .product-name,
h1, h2, h3, .hero-title { color: var(--d-text) !important; }
.pack-price, .pack-price.soon-price-solo,
#other-supply .pack-price { color: var(--d-text) !important; }
.cmp tbody th, .soon-card .soon-tag,
.bulk .cfg-opts button { color: var(--d-muted) !important; }

/* ── 3. Карт ба хайрцаг ────────────────────────────────────────── */
.product-card { background: var(--d-card) !important; }
.contact-card { background: var(--d-card) !important; color: var(--d-text); }
.price-table tbody tr.is-best { background: var(--d-band) !important; }
.bulk, .bulk .tier { background: var(--d-card) !important; }

/* Барааны зураг ЗОРИУД цайвар — дээрх тайлбарыг үз. */
.product-media { background: #F3EFE9 !important; }
.product-badge {
  background: var(--d-text) !important;
  color: var(--d-bg) !important;
}
.product-badge.is-preorder { color: var(--d-bg) !important; }

/* ── 4. Товчнууд · харанхуй дээр ЭСРЭГЭЭР эргэнэ ───────────────── */
.btn-primary {
  background: var(--d-text) !important;
  color: var(--d-bg) !important;
  border-color: var(--d-text) !important;
}
.btn-primary:hover {
  background: var(--accent) !important;
  color: var(--d-bg) !important;
  border-color: var(--accent) !important;
}
.btn-ghost, .btn-outline {
  background: transparent !important;
  color: var(--d-text) !important;
  border: 1px solid var(--d-line) !important;
}
.btn-ghost:hover, .btn-outline:hover {
  background: var(--d-text) !important;
  color: var(--d-bg) !important;
  border-color: var(--d-text) !important;
}
.btn-accent { color: var(--d-bg) !important; background: var(--accent) !important; }
.btn-copy { background: var(--d-card) !important; color: var(--d-text) !important; }
.last-order-chip:hover {
  background: var(--d-text) !important;
  color: var(--d-bg) !important;
}

/* ── 5. Сагс ───────────────────────────────────────────────────── */
.cart { background: var(--d-band) !important; color: var(--d-text); }
.cart input, .cart select, .cart textarea {
  background: var(--d-input) !important;
  color: var(--d-text) !important;
  border-color: var(--d-line) !important;
}
.cart input:focus, .cart select:focus, .cart textarea:focus {
  border-color: var(--accent) !important;
  outline-color: var(--accent) !important;
}
.cart select option { background: var(--d-input) !important; color: var(--d-text) !important; }
.cart .qty-step button, .cart .qty-step output { color: var(--d-text) !important; }
.cart .btn-primary {
  background: var(--d-text) !important;
  border-color: var(--d-text) !important;
  color: var(--d-bg) !important;
}
.cart-foot [data-cart-checkout] {
  background: var(--accent) !important;
  color: var(--d-bg) !important;
}
.cart-handle { background: var(--accent) !important; color: var(--d-bg) !important; }
.cart-handle .ch-n { background: var(--d-bg) !important; color: var(--accent) !important; }
.cart-badge { color: var(--d-bg) !important; }
.bulk .cart-close, .bulk .cart-title { color: var(--d-text) !important; }

/* ── 6. Сонголтын товчлуурууд ──────────────────────────────────── */
.cfg-opts button, .bulk .cfg-opts button {
  background: transparent !important;
  color: var(--d-muted) !important;
  border-color: var(--d-line) !important;
}
.cfg-opts button.is-on {
  background: var(--d-text) !important;
  border-color: var(--d-text) !important;
  color: var(--d-bg) !important;
}
.restock-input:focus { background: var(--d-input) !important; }

/* ── 6b. #222-г ХАТУУ тавьсан үлдсэн сонгогчид ─────────────────
   style.css нь өмнөх сессүүдэд «хамгийн сүүлийн давхарга» гэж хэд
   хэдэн удаа нэмэгдсэн тул эдгээр нь ангийн тодорхойлолттой (0,1,0+)
   бөгөөд !important. Ижил сонгогчоор дарна — энэ файл сүүлд ачаалагдах
   тул тэнцүү тодорхойлолт дээр ялна.
   ⚠️ Цайвар гадаргуу дээр сууж буй бараан бичвэрийг (.product-badge,
   .btn-primary:hover, .cart .btn-primary) энд БҮҮ оруул — тэдгээр нь
   дээр аль хэдийн зөв тохируулагдсан. */
.brandmark, .hero-el,
h1, h2, .h1, .h2, h3, .h3, .cart-title, .brandmark-main,
.product-name, .product-price,
.product-price, .pack-price, .tier-figure, .cart-total,
.shelf-item .pack-row .pack-price,
.shelf-item .pack-row .pack-size,
.soon-price-row .pack-price, .pack-price.soon-price-solo,
.soon-price-row .pack-size,
.qty-step output,
.cart-btn, .cart-btn span, .cart-btn svg,
.cmp tbody td,
.tier .tier-range, .tier .tier-figure, .table-wrap .cmp tbody td,
.section-dark, .section-dark .container,
.contact-grid, .contact-card, .site-footer,
.section-dark .link-arrow, .contact-card .link-arrow,
.site-footer .footer-info dd a,
.bulk .cfg-label,
.nav-link:hover,
.qty-step button:hover { color: var(--d-text) !important; }

.lang-switch button.is-on { color: var(--accent) !important; }
.btn-ghost-light:hover, .btn-outline-light:hover {
  background: var(--d-text) !important;
  color: var(--d-bg) !important;
}

/* ── 6c. Харьцуулах хүснэгт ────────────────────────────────────
   `.table-wrap,.tier,.cmp thead th{background:#EDEFE8}` ба
   `.a9-cmp .table-wrap{background:#C3CAB8}` нь цайвар үлдэж, дээр нь
   цайвар бичвэр таарч тодрол 1.39 болж байсан (хэмжсэн). */
.table-wrap, .tier, .cmp thead th { background: var(--d-card) !important; }
.a9-cmp .table-wrap { background: var(--d-card) !important; }
.cmp thead th, .cmp thead th:last-child { color: var(--accent) !important; }
.cmp, .cmp td, .cmp th { border-color: var(--d-line) !important; }

/* Тодорхойлолт (0,2,2) — миний өмнөх `.cmp tbody th` (0,1,2) хүрэхгүй
   байсныг хэмжилт харуулсан (тодрол 1.04). Тэр түвшинд нь бичив. */
.table-wrap .cmp tbody th, .cmp tbody th { color: var(--d-text) !important; }
.a9-cmp .table-wrap .cmp thead th,
.a9-cmp .cmp thead th { background: var(--d-band) !important; }
.eyebrow, p.eyebrow { color: var(--d-muted) !important; }
.about-grid p, .about-grid .lead { color: var(--d-text) !important; }

/* ── 7. Холбоос ба зураас ──────────────────────────────────────── */
.form-note a, .faq-a a, .grade-note strong,
.cmp thead th:last-child, .cmp td:last-child { color: var(--accent) !important; }
hr, .rule { border-color: var(--d-line) !important; }
::-webkit-scrollbar-thumb { background: rgba(237, 233, 227, .28) !important; }
::selection { background: var(--accent); color: var(--d-bg); }

/* ══════════════════════════════════════════════════════════════════
   BGMERGE-2026-09-06 · conceptspot.info-ийн дэвсгэрийн хэлийг хуулав
   Эх хувь: worker-live/index.js · SITERETRO0829b — хэмжиж авсан:
     body::before  барны зураг, саарал + бараан      (z-index -3)
     body::after   2 градиент бүрхүүл + үрэл (noise)  (z-index -2)
     filter: grayscale(1) contrast(1.14) brightness(.44)

   ⚠️ ЗААВАЛ body-д, html-д БИШ. Сөрөг z-index-тэй хуурмаг элемент нь
      ЭЦГИЙНХЭЭ дэвсгэрийн ДЭЭР, агуулгын ДООР буудаг. html дээр
      тавибал body-гийн бүрхэг дэвсгэр бүгдийг нь дарна.

   ⚠️ Мөн .section / .site-header / .site-footer нь dark.css-д
      `background: var(--d-bg) !important` буюу БҮРХЭГ байсан — тэдгээр
      нь зургийг бүрэн далдалж байв. Тунгалаг болгов; карт, тавиур,
      сагс зэрэг өөрийн гадаргуутай элементүүд хэвээр үлдэнэ.
   ══════════════════════════════════════════════════════════════════ */
html{ background:var(--d-bg) !important }
body{ background:transparent !important; position:relative }
body::before{
  content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:url("../img/bg-concept.jpg") center/cover;
  filter:grayscale(1) contrast(1.14) brightness(.44);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.14'/></svg>"),
    linear-gradient(180deg,rgba(7,24,22,.94),rgba(7,24,22,.76) 42%,rgba(7,24,22,.97)),
    linear-gradient(0deg,rgba(24,83,76,.42),rgba(24,83,76,.42));
  background-size:220px 220px, cover, cover;
  background-repeat:repeat, no-repeat, no-repeat;
}
/* Бүрхэг хэсгүүдийг тунгалаг болгож зураг мэдрэгдэнэ */
.section, .hero, .site-header, .site-footer,
.bg-cream, .bg-olive, .bg-olive-deep{ background:transparent !important }
/* Толгой нь гүйлгэхэд бичвэр дээгүүр өнгөрдөг тул бага зэрэг бүрхэг */
.site-header{ background:rgba(7,24,22,.86) !important; backdrop-filter:blur(8px) }
.site-header.nav-open, .site-header.nav-open > .container{
  background:rgba(7,24,22,.97) !important;
}
/* Уншихад зориулж хэсгүүдийн гадаргууг арай тодруулав */
.section-dark{ background:rgba(12,32,29,.72) !important }
.shelf-body, .product-card, .contact-card, .bulk, .bulk .tier,
.table-wrap, .tier, .cmp thead th{ backdrop-filter:blur(3px) }

/* NAVTOGGLE-2026-09-06 · Утасны ≡ товчны зураасууд #222222 (цайвар
   загварын үлдэгдэл) — харанхуй толгой дээр бараг үл ялгарч байв (хэмжсэн). */
.nav-toggle span{ background:var(--d-text) !important; }
.nav-toggle:hover span{ background:var(--accent) !important; }

/* MUTED-2026-09-06 · Скан: #767676 (цайвар загварын «muted» саарал) нь
   харанхуй ногоон дээр 7 бүлэг бичвэр, 16 товчинд хэвээр байв. Тодрол
   3.4 — уншигдах ч дизайны токентой (rgba(237,233,227,.6)) зөрж, бохир
   саарал харагдана. −/+ нь худалдан авах ГОЛ товч мөртлөө бүдэг байв. */
.pack-serv, .pack-row .pack-serv, .product-stock, .pack-row .product-stock,
.shelf-note, .pack-price .currency, .currency,
.shelf-item h3.h3, .h3{ color:var(--d-muted) !important; }
.shelf-item h3.h3, .shelf-title{ color:var(--d-text) !important; }
.qty-step button{ color:var(--d-text) !important; opacity:.85; }
.qty-step button[data-step="1"], .qty-step button[data-d="1"]{ color:var(--accent) !important; opacity:1; }
.qty-step button:hover{ opacity:1; color:var(--accent) !important; }

/* MUTED-FIX · L4107/L4318 `.shelf-item .pack-row .pack-serv/.product-stock
   {color:#767676!important}` (0,3,0) миний (0,2,0)-г дардаг байв — ижил
   тодорхойлолтоор, сүүлд ачаалагдах энэ файлд бичив. */
.shelf-item .pack-row .pack-serv,
.shelf-item .pack-row .product-stock,
.shelf-item .pack-list .pack-row .product-stock{ color:var(--d-muted) !important; }