/* Layout ба component-ийн загвар — өнгө/зай/фонтыг зөвхөн tokens.css-ийн хувьсагчаар. Mobile-first. */

*, *::before, *::after { box-sizing: border-box; }
/* `hidden` атрибут (алдааны мөр, сагсны тоо г.м.) component-ийн display-ээс давамгайлна */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--space-3); }
p { margin: 0 0 var(--space-3); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* Cursor (CLAUDE.md 2а): зөвхөн бодит үйлдэлтэй элементэд pointer, disabled — not-allowed */
button:not(:disabled), select:not(:disabled), label.radio, [role="tab"] { cursor: pointer; }
button:disabled, .input:disabled { cursor: not-allowed; }
[aria-busy="true"] { cursor: progress; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-4); }
.view { flex: 1; outline: none; }
.page { padding-top: var(--space-5); padding-bottom: var(--space-7); }
.page--narrow { max-width: 640px; }
.page__title { font-size: var(--font-size-xl); }
.muted { color: var(--color-muted); }
.small { font-size: var(--font-size-sm); }
.lead { font-size: var(--font-size-lg); color: var(--color-muted); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--space-4); top: var(--space-2); z-index: 10; background: var(--color-bg); padding: var(--space-2) var(--space-3); }

/* Товч */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); min-height: 40px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: inherit; font-weight: 600; text-decoration: none; line-height: 1.2;
  background: var(--color-surface); color: var(--color-text);
}
.btn--primary { background: var(--color-primary); color: var(--color-primary-contrast); }
.btn--primary:hover:not(:disabled) { filter: brightness(0.92); }
.btn--secondary { background: var(--color-bg); border-color: var(--color-border); }
.btn--secondary:hover:not(:disabled) { background: var(--color-surface); }
.btn--ghost { background: transparent; color: var(--color-primary); }
.btn--ghost:hover:not(:disabled) { background: var(--color-surface); }
.btn--danger { background: var(--color-danger); color: var(--color-primary-contrast); }
.btn--sm { min-height: 32px; padding: var(--space-1) var(--space-3); font-size: var(--font-size-sm); }
.btn--lg { min-height: 48px; padding: var(--space-3) var(--space-5); font-size: var(--font-size-lg); }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.55; }

/* Маягт */
.field { display: flex; flex-direction: column; gap: var(--space-1); margin: 0 0 var(--space-3); border: 0; padding: 0; min-width: 0; }
.field__label { font-weight: 600; font-size: var(--font-size-sm); padding: 0; }
.field__req { color: var(--color-danger); }
.field__hint { margin: 0; color: var(--color-muted); font-size: var(--font-size-sm); }
.field__error { margin: 0; color: var(--color-danger); font-size: var(--font-size-sm); }
.field--invalid .input { border-color: var(--color-danger); }
.input {
  width: 100%; min-height: 40px; padding: var(--space-2) var(--space-3);
  font: inherit; color: var(--color-text); background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
textarea.input { resize: vertical; }
.input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.form-row { display: grid; gap: var(--space-3); }
.form-message { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--font-size-sm); }
.form-message--error { background: var(--color-danger-bg); color: var(--color-danger); }
.form-message--success { background: var(--color-success-bg); color: var(--color-success); }
.form-message--info { background: var(--color-info-bg); color: var(--color-text); }
.radio-group { gap: var(--space-2); }
.radio { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.radio:has(input:checked) { border-color: var(--color-primary); background: var(--color-surface); }
.radio__body { display: flex; flex-direction: column; }
.radio__title { font-weight: 600; }
.radio__desc { color: var(--color-muted); font-size: var(--font-size-sm); }

/* Төлөв */
.state { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-muted); }
.state--loading { flex-direction: row; justify-content: center; }
.state--error .state__title { color: var(--color-danger); }
.state--success .state__title { color: var(--color-success); }
.state__title { font-weight: 600; color: var(--color-text); margin: 0; }
.spinner { width: 20px; height: 20px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

/* Header */
.header { border-bottom: 1px solid var(--color-border); background: var(--color-bg); position: sticky; top: 0; z-index: 5; }
.header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-height: var(--header-height); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.header__brand { font-weight: 700; font-size: var(--font-size-lg); color: var(--color-text); text-decoration: none; margin-right: auto; }
.header__logo { max-height: 40px; width: auto; }
.header__toggle { font: inherit; background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); color: var(--color-text); }
.header__nav { display: none; flex-basis: 100%; order: 5; }
.header__nav--open { display: block; }
.header__search { flex-basis: 100%; order: 4; }
.header__actions { display: flex; gap: var(--space-3); align-items: center; }
.header__account, .cart-link { color: var(--color-text); text-decoration: none; font-weight: 600; }
.cart-link { display: inline-flex; align-items: center; gap: var(--space-1); }
.cart-link__count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-primary-contrast); font-size: var(--font-size-sm); display: inline-flex; align-items: center; justify-content: center; }
.menu, .menu__sub, .footer__menu { list-style: none; margin: 0; padding: 0; }
.menu a, .menu__label { display: block; padding: var(--space-2) 0; color: var(--color-text); text-decoration: none; }
.menu__sub { padding-left: var(--space-4); }

/* Footer */
.footer { border-top: 1px solid var(--color-border); background: var(--color-surface); margin-top: var(--space-6); }
.footer__inner { display: grid; gap: var(--space-4); padding-top: var(--space-6); padding-bottom: var(--space-6); }
.footer__brand { font-weight: 700; }
.footer__menu a { display: block; padding: var(--space-1) 0; color: var(--color-text); }
.footer__social { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.footer__copy { color: var(--color-muted); font-size: var(--font-size-sm); grid-column: 1 / -1; margin: 0; }

/* Хэсэг, тор, карт */
.section { margin-bottom: var(--space-6); }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.section__title { font-size: var(--font-size-lg); margin: 0; }
.card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); }
.grid { display: grid; gap: var(--space-4); }
.grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; color: var(--color-text); text-decoration: none; transition: box-shadow 0.15s; }
.product-card:hover { box-shadow: var(--shadow-md); }
.product-card__body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); }
.product-card__cat { color: var(--color-muted); font-size: var(--font-size-sm); }
.product-card__name { font-weight: 600; }
.product-img { aspect-ratio: 1; width: 100%; object-fit: cover; background: var(--color-surface); }
.product-img--empty { display: flex; align-items: center; justify-content: center; color: var(--color-muted); font-size: var(--font-size-sm); }
.price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.price__now { font-weight: 700; }
.price__old { color: var(--color-muted); font-size: var(--font-size-sm); }
.badge { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border); font-size: var(--font-size-sm); }
.badge--sale { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-primary-contrast); }
.badge--success { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.badge--muted { color: var(--color-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text); text-decoration: none; }
.chip--active { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
.chip__img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.banners { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.banner, .banner__media { border-radius: var(--radius-md); overflow: hidden; width: 100%; }
.toolbar { display: grid; gap: var(--space-3); align-items: end; margin-bottom: var(--space-4); }
.toolbar .field { margin: 0; }
.breadcrumbs { font-size: var(--font-size-sm); color: var(--color-muted); margin-bottom: var(--space-4); }

/* Бараа */
.product { display: grid; gap: var(--space-5); }
.gallery__img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--color-surface); border-radius: var(--radius-md); }
.gallery__thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-2); overflow-x: auto; }
.gallery__thumb { padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: none; width: 64px; flex: none; }
.gallery__thumb-img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); }
.product__price { font-size: var(--font-size-lg); margin-bottom: var(--space-3); }
.product__buy { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-4); }
.product__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.prose { overflow-wrap: anywhere; }
.prose img { border-radius: var(--radius-sm); }
.prose table { border-collapse: collapse; width: 100%; }
.prose td, .prose th { border: 1px solid var(--color-border); padding: var(--space-2); }
.specs { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); }
.specs dt { color: var(--color-muted); }
.specs dd { margin: 0; }
.qty { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.qty__btn { width: 40px; min-height: 40px; border: 0; background: var(--color-surface); font: inherit; font-size: var(--font-size-lg); color: var(--color-text); }
.qty__input { width: 56px; border: 0; text-align: center; font: inherit; -moz-appearance: textfield; }
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty--busy { opacity: 0.6; }

/* Сагс, checkout */
.cart, .checkout { display: grid; gap: var(--space-5); align-items: start; }
.cart-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.cart-row { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.cart-row__img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); grid-row: span 2; }
.cart-row__info { display: flex; flex-direction: column; }
.cart-row__name { font-weight: 600; }
.cart-row__total { font-weight: 700; }
.discounts__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.discounts__row .input { flex: 1 1 140px; width: auto; }
.totals { margin: var(--space-3) 0; }
.totals__row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0; }
.totals__row dt { color: var(--color-muted); }
.totals__row dd { margin: 0; text-align: right; }
.totals__row--grand { border-top: 1px solid var(--color-border); margin-top: var(--space-2); padding-top: var(--space-2); font-weight: 700; font-size: var(--font-size-lg); }
.totals__row--grand dt { color: var(--color-text); }
.totals__row--discount dd { color: var(--color-success); }
.summary-list { list-style: none; margin: 0; padding: 0; }
.summary-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.summary-list__img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); flex: none; }
.checkout__form .section__title { margin-top: var(--space-4); }

/* Төлбөр, захиалга */
.pay__qr { margin: 0 auto var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.pay__status { font-weight: 600; }
.pay__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.bank-apps { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.bank-app { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; }
.bank-app__logo { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.order__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); }
.order-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.order-list__item { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); color: var(--color-text); text-decoration: none; }
.order-list__item:hover { box-shadow: var(--shadow-sm); }
.order-list__no, .order-list__total { font-weight: 700; }
.order-list__item .badge { justify-self: start; }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.address-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.address { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.address__actions { display: flex; gap: var(--space-2); align-items: center; }
.points__balance { font-size: var(--font-size-xl); font-weight: 700; margin: 0; }
.timeline { padding-left: var(--space-5); }
.timeline li { margin-bottom: var(--space-2); }

/* Таб */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-4); overflow-x: auto; }
.tab { padding: var(--space-2) var(--space-3); border: 0; background: none; font: inherit; color: var(--color-muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab[aria-selected="true"], .tab[aria-current="page"] { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }

/* Мэдэгдэл */
.toasts { position: fixed; right: var(--space-4); bottom: var(--space-4); left: var(--space-4); display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); z-index: 20; pointer-events: none; }
.toast { pointer-events: auto; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); background: var(--color-text); color: var(--color-bg); max-width: 360px; }
.toast--error { background: var(--color-danger); }

@media (min-width: 640px) {
  .grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form-row { grid-template-columns: 1fr 1fr; }
  .toolbar { grid-template-columns: 1fr 220px; }
  .cart-row { grid-template-columns: 64px 1fr auto auto auto; }
  .cart-row__img { grid-row: auto; }
  .footer__inner { grid-template-columns: repeat(3, 1fr); }
  .bank-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .header__inner { flex-wrap: nowrap; }
  .header__toggle { display: none; }
  .header__nav { display: block; flex-basis: auto; order: 0; }
  .header__nav .menu { display: flex; gap: var(--space-4); }
  .header__nav .menu__sub { display: none; }
  .header__search { flex-basis: 260px; order: 0; }
  .product { grid-template-columns: 1fr 1fr; }
  .cart { grid-template-columns: 1fr 360px; }
  .checkout { grid-template-columns: 1fr 380px; }
  .checkout__summary, .cart__summary { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
}