/* GGX.sale redesign C — design system layer (17.10.2026).
 * Loaded last. One font, one type scale, three button sizes, one field style, three radii.
 * Component files (home/catalog/product/account/content.css) own layout; this file owns the
 * shared look, so the same role looks the same on every page. Rules use !important on purpose:
 * route styles load later and must not reintroduce local sizes. Audit: scripts/c-audit.mjs.
 */
:root[data-site-theme="c"] {
  /* type scale */
  --c-fs-display: clamp(40px, 5.4vw, 66px);
  --c-fs-h1: clamp(32px, 3.4vw, 46px);
  --c-fs-section: clamp(26px, 2.6vw, 34px);
  --c-fs-card: 20px;
  --c-fs-label: 17px;
  --c-fs-body: 16px;
  --c-fs-ui: 15px;
  --c-fs-small: 14px;
  --c-fs-caption: 13px;
  /* controls */
  --c-btn-lg: 52px;
  --c-btn-md: 44px;
  --c-btn-sm: 40px;
  --c-field-h: 48px;
  /* surfaces */
  --c-r-surface: 24px;
  --c-r-nested: 16px;
  --c-r-field: 12px;
  --c-pad-surface: 28px;
}
@media (max-width: 640px) { :root[data-site-theme="c"] { --c-pad-surface: 20px; } }

/* ---------- Headings: display / h1 / section / card / label ---------- */
:root[data-site-theme="c"] body :is(#main, #modal) :is(h1, h2, h3, h4) { font-weight: 700 !important; text-transform: none !important; color: inherit; }
:root[data-site-theme="c"] body #main h1 { font-size: var(--c-fs-h1) !important; line-height: 1.08 !important; letter-spacing: -.025em !important; }
:root[data-site-theme="c"] body #main :is(.gx-intro, .partner-copy) h1 { font-size: var(--c-fs-display) !important; line-height: 1.02 !important; letter-spacing: -.035em !important; }
:root[data-site-theme="c"] body :is(#main, #modal) h2 { font-size: var(--c-fs-card) !important; line-height: 1.25 !important; letter-spacing: -.01em !important; }
:root[data-site-theme="c"] body #main :is(.gx-sec-head, .gx-help, .help-faq, .help-contact, .partner-section-heading, .partner-section-label, .partner-connect, .catalog-status-card) > h2,
:root[data-site-theme="c"] body #main :is(.gx-sec-head, .gx-help, .help-contact, .partner-section-heading, .partner-connect) > div > h2 {
  font-size: var(--c-fs-section) !important; line-height: 1.12 !important; letter-spacing: -.02em !important;
}
:root[data-site-theme="c"] body :is(#main, #modal) :is(h3, h4),
:root[data-site-theme="c"] body #main .cabinet-sidebar h2 { font-size: var(--c-fs-label) !important; line-height: 1.3 !important; letter-spacing: 0 !important; }
:root[data-site-theme="c"] body #main .directory-entry h2 { font-size: var(--c-fs-section) !important; line-height: 1.12 !important; letter-spacing: -.02em !important; }
:root[data-site-theme="c"] body #main :is(.partner-service, .partner-checker, .partner-agent-intro, .api-panel) h3 { font-size: var(--c-fs-card) !important; line-height: 1.25 !important; letter-spacing: -.01em !important; }

/* Body copy: two text colours only — ink for content, muted for secondary. */
:root[data-site-theme="c"] { --c-ink2: var(--c-ink); }
:root[data-site-theme="c"] body #main .api-page .partner-flow span { color: rgba(255, 255, 255, .72); }

/* ---------- Buttons ---------- */
/* Large: the one main action of a page or form. */
:root[data-site-theme="c"] body :is(#main, #modal) :is(
  .rental-continue, .shop-buy, .shop-submit, .account-detail-buy, .auth-submit, .auth-telegram, .balance-submit,
  .catalog-cta, .gx-help .gx-btn, .help-contact .button, .partner-connect .button, .partner-copy .button
) {
  min-height: var(--c-btn-lg) !important; height: auto !important; padding: 0 28px !important; border-radius: 999px !important;
  font-size: 16px !important; font-weight: 600 !important; line-height: 1.2 !important;
}
/* Medium: every other standalone button. */
:root[data-site-theme="c"] body :is(#main, #modal) :is(
  .gac-action, .shop-card-action, .purchase-open, .cabinet-button, .settings-button, .button-small,
  .rental-filter-apply, .rental-filter-reset, .shop-search-button, .sale-filters-toggle, .rental-filter-more > summary,
  .showcase-gallery-strip .account-detail-text-action, .legal-document .button, .purchase-action, .partner-agent-tab
) {
  min-height: var(--c-btn-md) !important; padding: 0 20px !important; border-radius: 999px !important;
  font-size: var(--c-fs-ui) !important; font-weight: 600 !important; line-height: 1.2 !important;
}
#site-header .gx-nav a { display: inline-flex !important; align-items: center !important; height: var(--c-btn-sm) !important; min-height: 0 !important; }
#site-header :is(.gx-auth, .gx-balance) { min-height: var(--c-btn-md) !important; padding: 0 18px !important; font-size: var(--c-fs-ui) !important; font-weight: 600 !important; }
/* Small: back links, breadcrumbs, secondary pills. */
:root[data-site-theme="c"] body #main :is(a.breadcrumb, .rental-back, .shop-catalog-back, .purchase-back, .settings-logout) {
  display: inline-flex !important; align-items: center !important; gap: 8px !important; min-height: var(--c-btn-sm) !important; padding: 0 16px !important;
  border-radius: 999px !important; background: var(--c-tile) !important; color: var(--c-ink) !important;
  font-size: var(--c-fs-small) !important; font-weight: 600 !important; line-height: 1.2 !important; text-decoration: none !important;
}
:root[data-site-theme="c"] body #main .legal-document > a.breadcrumb { background: var(--c-bg) !important; }
/* Breadcrumb trails at the top of a page are plain text (catalogs, login, help, partners); pills are only "back" links. */
:root[data-site-theme="c"] body :is(#main.help-page, #main.api-page, #main .api-page) > a.breadcrumb {
  min-height: 0 !important; padding: 0 !important; background: transparent !important; color: var(--c-muted) !important; font-weight: 400 !important;
}
:root[data-site-theme="c"] body :is(#main.help-page, #main.api-page, #main .api-page) > a.breadcrumb::before,
:root[data-site-theme="c"] body :is(#main.help-page, #main.api-page, #main .api-page) > a.breadcrumb > svg { display: none !important; }
:root[data-site-theme="c"] body #main :is(.rental-breadcrumb, .auth-breadcrumb, .shop-breadcrumb) { font-size: var(--c-fs-small) !important; font-weight: 400 !important; color: var(--c-muted) !important; }
/* Buttons sitting in a row with fields share the field height. */
:root[data-site-theme="c"] body #main :is(.rental-filters, .shop-controls, .catalog-filters) :is(button, summary, .button) { min-height: var(--c-field-h) !important; }
:root[data-site-theme="c"] body #main .settings-email-form .settings-button { min-height: var(--c-field-h) !important; }

/* ---------- Fields ---------- */
/* :where() keeps this rule's specificity low, so the few field variants below (search, select) can adjust it. */
:root[data-site-theme="c"] body :is(#main, #modal) :where(
  input:not([type=radio]):not([type=checkbox]):not([type=hidden]):not([type=submit]):not([type=range]):not(.balance-amount):not(.rental-hours-input):not([name="hours"]), select, textarea
) {
  height: var(--c-field-h) !important; min-height: 0 !important; padding: 0 14px !important; border: 1px solid var(--c-line) !important; border-radius: var(--c-r-field) !important;
  background-color: var(--c-soft) !important; color: var(--c-ink) !important; font-size: 16px !important; font-weight: 400 !important; box-shadow: none !important;
}
:root[data-site-theme="c"] body :is(#main, #modal) textarea { height: auto !important; min-height: 96px !important; padding: 12px 14px !important; }
:root[data-site-theme="c"] body :is(#main, #modal) select {
  padding-right: 40px !important; appearance: none !important; -webkit-appearance: none !important;
  background: var(--c-soft) url("/assets/icons/chevron-down.svg") no-repeat calc(100% - 14px) 50% / 16px !important;
  text-overflow: ellipsis;
}
:root[data-site-theme="c"] body :is(#main, #modal) :is(input, select, textarea):focus-visible { border-color: var(--c-ink) !important; outline: 2px solid var(--c-ink) !important; outline-offset: 1px !important; }
:root[data-site-theme="c"] body :is(#main, #modal) :is(input, textarea)::placeholder { color: #8a8f9b; opacity: 1; }
:root[data-site-theme="c"] body #main input.shop-search { padding-left: 44px !important; }
/* Accounts filters use the same pattern as rent filters: label above, plain field below. */
:root[data-site-theme="c"] body #main label.shop-filter-field {
  display: grid !important; gap: 6px !important; align-content: start; min-height: 0 !important; padding: 0 !important;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
}
:root[data-site-theme="c"] body #main label.shop-filter-field > span,
:root[data-site-theme="c"] body #main .rental-field > span,
:root[data-site-theme="c"] body #main .catalog-field > span {
  color: var(--c-muted) !important; font-size: var(--c-fs-caption) !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important;
}
/* Sort select: a field like the others, not a pill. */
:root[data-site-theme="c"] body #main select.shop-sort { font-weight: 400 !important; }

/* ---------- Surfaces ---------- */
/* Level 1: white (or dark) surfaces on the page background. */
:root[data-site-theme="c"] body #main :is(
  .gx-tile, .gx-table, .gx-help, .rental-filters, .shop-controls, .game-account-card, .shop-card, .rc-card, .rc-stat, .rc-arcanas,
  .rental-order-summary, .rental-account-sheet, .shop-detail-body, .shop-detail-media, .shop-checkout-summary, .shop-methods, .shop-recipient, .shop-checkout-order,
  .account-panel, .account-recommendations, .account-collection-browser, .showcase-gallery,
  .cabinet-sidebar, .cabinet-detail, .balance-wallet, .balance-topup, .balance-history, .settings-panel, .purchase-card, .purchase-summary,
  .catalog-shell-heading, .catalog-status-card, .catalog-nav-item, .directory-entry, .help-shortcut, .help-contact, .auth-form-panel, .legal-document,
  .partner-copy, .partner-flow, .partner-platforms, .partner-agent-panels, .partner-checker, .partner-service, .partner-connect, .api-panel, .rental-mobile-nav
) { border-radius: var(--c-r-surface) !important; }
:root[data-site-theme="c"] body #main :is(
  .rc-arcanas, .rental-order-summary, .shop-detail-body, .shop-checkout-summary, .shop-methods, .shop-recipient, .shop-checkout-order,
  .account-panel, .account-recommendations, .account-collection-browser, .cabinet-detail, .balance-topup, .settings-panel, .purchase-card,
  .catalog-status-card, .partner-checker, .partner-platforms, .api-panel
) { padding: var(--c-pad-surface) !important; }
:root[data-site-theme="c"] body #main :is(.gx-help, .help-contact, .partner-connect) { padding: 40px !important; }
@media (max-width: 640px) { :root[data-site-theme="c"] body #main :is(.gx-help, .help-contact, .partner-connect) { padding: 24px !important; } }
/* Level 2: blocks nested inside a surface, list rows, images inside cards. */
:root[data-site-theme="c"] body #main :is(
  .apc-stat, .cabinet-stat, .timer-panel, .purchase-status, .settings-identity, .partner-platform, .partner-agent-examples, .empty-state, .api-example,
  .shop-card-visual, .gac-preview, .gx-row, .help-faq details, .cabinet-rental-choice, .balance-method, .rc-arcana-button, .arcana-avatar, .arcana-spotlight,
  .collection-art-card, .showcase-gallery-stage, .account-recommendation, .shop-product-image, .balance-transaction
) { border-radius: var(--c-r-nested) !important; }

/* ---------- Kickers: the small label above a heading ---------- */
:root[data-site-theme="c"] body :is(.gx-kicker, .partner-eyebrow, .purchase-kicker, .section-status, .shop-account-kicker) {
  font-size: var(--c-fs-caption) !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: .07em !important; text-transform: uppercase !important;
}

/* Back pills without an inline icon get the same arrow as the ones that have it. */
:root[data-site-theme="c"] body #main :is(.shop-catalog-back, .steam-preview-back, .purchase-back):not(:has(svg, img))::before {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("/assets/icons/arrow-left.svg") center / contain no-repeat; mask: url("/assets/icons/arrow-left.svg") center / contain no-repeat;
}
:root[data-site-theme="c"] body #main .steam-preview-back {
  display: inline-flex !important; align-items: center !important; gap: 8px !important; min-height: var(--c-btn-sm) !important; padding: 0 16px !important;
  border-radius: 999px !important; background: var(--c-tile) !important; color: var(--c-ink) !important; font-size: var(--c-fs-small) !important; font-weight: 600 !important;
}