/* 📱 Барааны хуудас — апп горим (html.m-app, ?app=1-ээр асдаг). Апп-ын ProductDetailPage-тэй ижил:
   зураг дээгүүр хөвөгч ‹ ♡ ⤴ дугуй товчнууд, бүтэн өргөн зураг, алтан брэнд шошго, доор тогтмол «Худалдан авах» мөр. */
html.m-app body { background: #fff !important; padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
html.m-app .site-banner, html.m-app body > header, html.m-app .ticker, html.m-app .sale-bar, html.m-app .crumbs,
html.m-app .filter-sidebar, html.m-app .csec, html.m-app .wsec, html.m-app .site-footer, html.m-app #tbc-tip { display: none !important; }
html.m-app .page-layout { padding: 0 !important; display: block !important; }
html.m-app .page-main { padding: 0 !important; width: 100% !important; }
html.m-app .product-wrap { display: block !important; padding: 0 !important; margin: 0 !important; gap: 0 !important; }

/* Галерей — бүтэн өргөн, дөрвөлжин, цагаан */
html.m-app .gallery { position: relative !important; top: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
html.m-app .main-img-wrap { width: 100% !important; aspect-ratio: 1 !important; height: auto !important; background: #fff !important; border-radius: 0 !important; margin: 0 !important; }
html.m-app .main-img-wrap img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
html.m-app .gallery .thumbs { display: flex !important; flex-direction: row !important; gap: 8px !important; overflow-x: auto; padding: 10px 16px 0 !important; margin: 0 !important; scrollbar-width: none; }
html.m-app .gallery .thumbs::-webkit-scrollbar { display: none; }
html.m-app .gallery .thumbs img, html.m-app .gallery .thumbs > * { width: 58px !important; height: 58px !important; flex: none !important; border-radius: 12px !important; object-fit: cover; }

/* Мэдээлэл */
html.m-app .info { padding: 16px 16px 0 !important; width: 100% !important; }
html.m-app .info .brand { display: inline-block !important; background: #b8963e !important; color: #fff !important; font-size: 10.5px !important; letter-spacing: 2px !important;
  font-weight: 800 !important; padding: 5px 12px !important; border-radius: 8px !important; text-decoration: none !important; }
html.m-app .info .name { font-size: 22px !important; line-height: 1.25 !important; font-weight: 800 !important; margin: 10px 0 6px !important; color: #111 !important; }
html.m-app .info .price { font-size: 26px !important; font-weight: 800 !important; color: #111 !important; }
html.m-app .info .divider { margin: 14px 0 !important; }
html.m-app #buy-btn { display: none !important; }

/* Апп-ын хөвөгч товчнууд (зураг дээр) */
#mpd-top { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; pointer-events: none; transition: background .2s, box-shadow .2s; }
#mpd-top.solid { background: rgba(255,255,255,.96); box-shadow: 0 1px 0 #eee; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
#mpd-top button, #mpd-top a { pointer-events: auto; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.94); box-shadow: 0 2px 10px rgba(0,0,0,.12);
  display: grid; place-items: center; color: #111; text-decoration: none; font-size: 18px; flex: none; }
#mpd-top svg { width: 21px; height: 21px; }
#mpd-top .sp { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 800; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s; }
#mpd-top.solid .sp { opacity: 1; }

/* Доод тогтмол мөр */
#mpd-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; background: rgba(255,255,255,.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid #eee; display: flex; gap: 10px; align-items: center; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
#mpd-bar .pr { min-width: 0; }
#mpd-bar .pr small { display: block; font-size: 11px; color: #777; }
#mpd-bar .pr b { display: block; font-size: 17px; font-weight: 800; color: #111; white-space: nowrap; }
#mpd-bar .buy { flex: 1; height: 50px; border: 0; border-radius: 16px; background: #111; color: #fff; font-size: 14.5px; font-weight: 800; letter-spacing: .5px; font-family: inherit; }
#mpd-bar .buy:disabled { background: #bbb; }
html.m-app .msg-btn { bottom: calc(88px + env(safe-area-inset-bottom)) !important; }
html.m-app #tbc-btn { top: auto !important; bottom: calc(86px + env(safe-area-inset-bottom)) !important; left: 8px !important; transform: scale(.8); transform-origin: left bottom; }
/* Хөвөгч видео — толгойн товчны доор, баруун талд жижгээр */
/* Хөвөгч видео — сайтын анхны хэмжээ (min(38vw,168px), 9:16); зөвхөн толгойн товчны доор буулгана. Жижигрүүлэхэд тайрагдаж байсан */
html.m-app .vfloat { top: calc(64px + env(safe-area-inset-top)) !important; bottom: auto !important; }
html.m-app .related-section { padding: 18px 0 8px !important; }
html.m-app .related-title { padding: 0 16px; font-size: 18px !important; text-align: left !important; }

/* Сайт has-thumbs үед thumbs-ийг зүүн баганад босоо тавьдаг — апп горимд зургийн ДООР хэвтээ */
html.m-app .gallery, html.m-app .gallery.has-thumbs { display: block !important; }
html.m-app .gallery .thumbs, html.m-app .gallery.has-thumbs .thumbs { flex-direction: row !important; height: auto !important; min-height: 0 !important; align-self: auto !important; overflow-y: hidden !important; }
html.m-app .gallery .thumb, html.m-app .gallery.has-thumbs .thumb { width: 58px !important; height: 58px !important; }

/* ── 🎁 Бэлэглэх ── */
#mpd-bar .gift { flex: none; height: 50px; padding: 0 14px; border-radius: 16px; border: 1.5px solid #b8963e; background: #fff8ec; color: #8a6a1e; font-size: 20px;
  display: flex; align-items: center; gap: 6px; font-family: inherit; }
#mpd-bar .gift span { font-size: 13px; font-weight: 800; }
#mpd-bar .pr { display: none; }




/* ── 🎁 «Хайртай хүндээ бэлэглэх» товч — брэндийн мөрөнд, хөдөлгөөнтэй ── */
.mpd-brandrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#mpd-giftbtn { position: relative; overflow: hidden; flex: none; display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 9px; border-radius: 30px;
  border: 1.5px solid #c9a24a; background: linear-gradient(135deg, #fffaf0, #fdeccd); color: #6e5216; font-family: inherit; text-align: left;
  box-shadow: 0 4px 14px rgba(184,150,62,.25); animation: gfPulse 2.4s ease-in-out infinite; }
#mpd-giftbtn .gf-box { font-size: 24px; display: inline-block; animation: gfWiggle 2.4s ease-in-out infinite; transform-origin: 50% 80%; }
#mpd-giftbtn .gf-t { font-size: 11.5px; line-height: 1.2; letter-spacing: .2px; }
#mpd-giftbtn .gf-t b { font-size: 13.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
#mpd-giftbtn .gf-shine { position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
  animation: gfShine 2.4s ease-in-out infinite; }
#mpd-giftbtn .gf-sp { position: absolute; font-style: normal; color: #d4a537; font-size: 10px; opacity: 0; animation: gfSpark 2.4s ease-in-out infinite; }
#mpd-giftbtn .s1 { top: 3px; left: 30px; } #mpd-giftbtn .s2 { bottom: 4px; left: 8px; animation-delay: .5s; } #mpd-giftbtn .s3 { top: 5px; right: 10px; animation-delay: 1s; }
#mpd-giftbtn:active { transform: scale(.96); }
@keyframes gfPulse { 0%,100% { box-shadow: 0 4px 14px rgba(184,150,62,.22); } 50% { box-shadow: 0 4px 22px rgba(184,150,62,.5), 0 0 0 4px rgba(201,162,74,.12); } }
@keyframes gfWiggle { 0%,60%,100% { transform: rotate(0) scale(1); } 66% { transform: rotate(-12deg) scale(1.12); } 72% { transform: rotate(10deg) scale(1.12); } 78% { transform: rotate(-6deg); } 84% { transform: rotate(3deg); } }
@keyframes gfShine { 0%,40% { left: -60%; } 75%,100% { left: 130%; } }
@keyframes gfSpark { 0%,100% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.1); } 55% { opacity: 0; transform: scale(.6) translateY(-4px); } }

/* ── 🌙 БАРААН ГОРИМ (барааны хуудас) ── */
html.m-app.m-dark { color-scheme: dark; }
html.m-app.m-dark body { background: #0F0F10 !important; color: #F2EFEA !important; }
html.m-app.m-dark .page-main, html.m-app.m-dark .product-wrap, html.m-app.m-dark .info { background: #0F0F10 !important; }
html.m-app.m-dark .info .name, html.m-app.m-dark .info .price, html.m-app.m-dark .info .meta-row, html.m-app.m-dark .info .meta-row * { color: #F2EFEA !important; }
html.m-app.m-dark .info .divider { background: #2E2E31 !important; border-color: #2E2E31 !important; }
html.m-app.m-dark .info p, html.m-app.m-dark .info small { color: #A8A39B; }
html.m-app.m-dark .gallery .thumbs img, html.m-app.m-dark .gallery .thumb { background: #fff; }
html.m-app.m-dark #mpd-top.solid { background: rgba(15,15,16,.94); box-shadow: 0 1px 0 #2E2E31; }
html.m-app.m-dark #mpd-top.solid .sp { color: #F2EFEA; }
html.m-app.m-dark #mpd-bar { background: rgba(20,20,22,.96); border-top-color: #2E2E31; }
html.m-app.m-dark #mpd-bar .buy { background: #F2EFEA; color: #111; }
html.m-app.m-dark .related-section, html.m-app.m-dark .related-title { background: #0F0F10 !important; color: #F2EFEA !important; }
html.m-app.m-dark .info .meta-row button, html.m-app.m-dark .info .meta-row button * { color: #111 !important; }

#mpd-copy { padding: 22px 16px 10px; text-align: center; font-size: 11.5px; line-height: 1.6; color: #999; }
#mpd-copy a { color: #b8963e; text-decoration: none; }
/* 💳 Хуваан төлөх хэсэг — нягт 4 багана (эзэн 2026-10-21 «зээлийн хэсэг маш том») */
html.m-app .pay-box { padding: 10px !important; border-radius: 14px !important; margin: 4px 0 12px !important; }
html.m-app .pay-title { font-size: 12px !important; margin-bottom: 8px !important; }
html.m-app .pay-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
html.m-app .pay-item { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 4px !important; padding: 8px 4px !important; min-height: 0 !important; border-radius: 10px !important; }
html.m-app .pay-item img { width: 26px !important; height: 26px !important; margin: 0 !important; }
html.m-app .pay-name { font-size: 10.5px !important; }
html.m-app .pay-amt { font-size: 11.5px !important; font-weight: 800 !important; line-height: 1.2 !important; }
html.m-app .pay-sub { display: none !important; }