/* MyArena design system theme layer for Market (2026-09-25).
   Same tokens and component look as id.myarenaonline.com/public/css/myarenaid.css
   and checkout's customer pages - see the umbrella repo's docs/DESIGN-SYSTEM.md.
   Loaded right after mkt-shared.css on every page. Market's pages still carry
   their own inline <style> blocks (inside <body>, so AFTER this file), which is
   why the component rules below use an `html body` prefix: enough specificity
   to win without rewriting every page's markup. Bootstrap 3 stays for now -
   the 24-column grid and data-toggle plugins are used everywhere. */

:root {
  --color-dark: #16181D;
  --color-dark-rgb: 22 24 29;
  --color-accent: #E30613;
  --color-accent-rgb: 227 6 19;
  --color-accent-light: #FF4A54;
  --color-accent-dark: #C10011;
  --color-bg: #EDEFF2;
  --color-surface: #ffffff;
  --color-surface-2: #f1f2f4;
  --color-text: #16181D;
  --color-neutral: #666A72;
  --color-dim-2: #A6AAB2;
  --color-input-border: #d1d9df;
  --color-border: rgb(var(--color-dark-rgb) / .12);
  --color-border-hi: rgb(var(--color-accent-rgb) / .45);
  --color-good: #16a34a;
  --grad-btn: linear-gradient(180deg, var(--color-accent-light) 0%, var(--color-accent) 50%, var(--color-accent-dark) 100%);
  --grad-soft: linear-gradient(135deg, rgb(var(--color-accent-rgb) / .10), rgb(var(--color-accent-rgb) / .04));
  --shadow-card: 0 4px 20px -8px rgb(var(--color-accent-rgb) / .14);
  --shadow-card-hover: 0 10px 28px -10px rgb(var(--color-accent-rgb) / .30);
  --radius-card: 14px;
  --radius-control: 11px;
  --font-main: 'Prompt', 'Segoe UI', Tahoma, sans-serif;
}

/* ---------- font + page background ---------- */
html body, html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body p, html body a, html body span, html body div, html body li, html body td, html body th,
html body label, html body input, html body button, html body select, html body textarea, html body .btn {
  font-family: var(--font-main) !important;
}
/* Icon fonts must keep their own family, or every icon turns into a letter. */
html body .fa, html body [class^="fa-"], html body [class*=" fa-"] { font-family: FontAwesome !important; }
html body .glyphicon { font-family: 'Glyphicons Halflings' !important; }

html, html body { background: var(--color-bg) !important; }
html body { color: var(--color-text); }
html body a { color: var(--color-accent); }
html body a:hover { color: var(--color-accent-dark); }

/* The legacy theme paints these wrappers white edge to edge; let the grey page
   background show between cards the way the other MyArena apps do. */
html body #content-wrapper-parent, html body #content-wrapper, html body #content,
html body .content-wrapper, html body #main-content,
html body .mkt-lastview-outer { background: transparent !important; }

/* ---------- header: white bar with the colour logo (was black) ---------- */
html body #top-other { background: #fff !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); position: relative; z-index: 20; }
html body #top-other .gs-logo-col img { height: 48px; }
html body #top-other .gs-noti-link, html body #top-other .gs-chat-link,
html body #top-other .gs-account-trigger { color: var(--color-text) !important; }
html body #top-other .gs-noti-link:hover, html body #top-other .gs-chat-link:hover,
html body #top-other .gs-account-trigger:hover { color: var(--color-accent) !important; }
html body #top-other .gs-account-trigger { padding: 6px 10px; border-radius: 999px; }
html body #top-other .gs-account-trigger:hover { background: var(--color-surface-2); }
html body #top-other .gs-account-avatar { background: var(--color-surface-2); }
html body #top-other .gs-account-trigger .fa-user { color: var(--color-accent); }
html body #top-other .gs-noti-badge, html body #top-other .gs-chat-badge { background: var(--color-accent); box-shadow: 0 0 0 2px #fff; }
html body #top-other .gs-noti-dropdown, html body #top-other .gs-chat-dropdown,
html body #top-other .gs-account-menu { border-radius: var(--radius-card); border: 1px solid var(--color-border); box-shadow: 0 12px 32px -12px rgba(22, 24, 29, .28); }
html body #top-other .gs-noti-dropdown-header { background: var(--grad-btn); }
html body #top-other .gs-account-menu a:hover { background: var(--grad-soft); }
html body #top-other .gs-account-menu-title { color: var(--color-accent); }
/* Login / sign up: the primary pill button, same as MyArenaID's .btn-brand. */
html body #top-other .btn_login, html body #top-other a.btn.btn_login {
  display: inline-block; background: var(--grad-btn) !important; color: #fff !important; border: 0 !important;
  border-radius: 999px !important; padding: 8px 20px !important; font-size: 14px !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: 0 !important; line-height: 1.4 !important; height: auto !important;
  box-shadow: 0 10px 22px -10px rgb(var(--color-accent-rgb) / .7); transition: transform .15s, filter .15s;
}
html body #top-other .btn_login:hover { filter: brightness(1.05); transform: translateY(-1px); color: #fff !important; }
html body #top-other #accounts, html body #top-other .customer-links { border: 0 !important; margin: 0; padding: 0; }

/* ---------- main nav + per-game tabs ---------- */
html body header#top .hoverMenuWrapper { border-bottom: 1px solid var(--color-border) !important; }
html body header#top .hoverMenuWrapper > li > a { color: var(--color-text); font-weight: 500; }
html body header#top .hoverMenuWrapper > li.active > a { color: var(--color-accent) !important; font-weight: 600; border-bottom: 3px solid var(--color-accent); }
html body header#top .hoverMenuWrapper > li > a:hover,
html body header#top .navbar .nav > li a:hover { color: var(--color-accent) !important; }
html body header#top .mkt-gametabs-subbar { border-bottom: 1px solid var(--color-border); }
html body header#top .mkt-gametabs-subbar a { color: var(--color-neutral); font-weight: 600; }
html body header#top .mkt-gametabs-subbar a:hover, html body header#top .mkt-gametabs-subbar a.active { color: var(--color-accent); }

/* ---------- search ---------- */
html body .gs-search-row { background: transparent; }
html body .gs-search-row .search-form { border: 1px solid var(--color-input-border) !important; border-radius: 999px; box-shadow: var(--shadow-card); }
html body .gs-search-row .search-form:focus-within { border-color: var(--color-border-hi) !important; box-shadow: 0 0 0 3px rgb(var(--color-accent-rgb) / .12); }
html body .gs-search-row .search-form input[type="text"] { font-size: 15px; padding-top: 10px; padding-bottom: 10px; }
html body .gs-search-row .search-form .search-submit {
  background: var(--grad-btn) !important; color: #fff !important; border: 0 !important; padding: 0 20px !important;
  position: static !important; height: auto !important; align-self: stretch; display: flex; align-items: center; font-size: 15px;
}
html body .gs-search-suggest { border-radius: var(--radius-card); border-color: var(--color-border); }
html body .gs-search-recent-pill { background: var(--color-surface-2); }
html body .gs-search-recent-pill:hover { background: var(--grad-soft); color: var(--color-accent); }

/* ---------- section titles: red with the short underline bar (.page-title) ---------- */
html body .mkt-section-title {
  color: var(--color-accent); font-weight: 700; font-size: 20px !important; border-left: 0 !important; padding-left: 0 !important;
  position: relative; padding-bottom: 8px;
}
html body .mkt-section-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px; border-radius: 2px; background: var(--color-accent);
}
html body .mkt-section-title.mkt-section-title-vip { color: #9a6b00; }
html body .mkt-section-title.mkt-section-title-vip::after { background: #d4a017; }
html body .mkt-section-title .mkt-title-icon { width: 20px; height: 20px; vertical-align: -3px; margin-right: 6px; }
html body .mkt-viewall-link { color: var(--color-accent) !important; font-weight: 600; font-size: 14px; }

/* ---------- product cards ---------- */
html body .mkt-card { border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: transform .15s, box-shadow .15s, border-color .15s; }
html body .mkt-card:hover, html body .mkt-card:focus { border-color: var(--color-border-hi); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
html body .mkt-price { color: var(--color-accent); font-weight: 700; }
html body .mkt-name { color: var(--color-text); font-weight: 600; }
html body .mkt-badge.new { background: var(--color-accent); }
html body .mkt-wish.active, html body .mkt-wish:hover { color: var(--color-accent); }

/* ---------- buttons (Bootstrap 3 classes used across the pages) ---------- */
html body .btn { border-radius: 12px; font-weight: 600; }
html body .btn-primary, html body .btn-danger {
  background: var(--grad-btn) !important; border: 0 !important; color: #fff !important; border-radius: 999px;
  box-shadow: 0 10px 22px -10px rgb(var(--color-accent-rgb) / .7); transition: transform .15s, filter .15s;
}
html body .btn-primary:hover, html body .btn-danger:hover,
html body .btn-primary:focus, html body .btn-danger:focus { filter: brightness(1.05); transform: translateY(-1px); color: #fff !important; }
html body .btn-primary[disabled], html body .btn-primary.disabled,
html body .btn-danger[disabled], html body .btn-danger.disabled { background: #f1b3b8 !important; box-shadow: none; transform: none; filter: none; opacity: 1; }
html body .btn-default { background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text); }
html body .btn-default:hover { background: var(--grad-soft); border-color: var(--color-border-hi); color: var(--color-text); }

/* ---------- form controls ---------- */
html body .form-control { border: 1px solid var(--color-input-border); border-radius: var(--radius-control); box-shadow: none; }
html body .form-control:focus { border-color: var(--color-border-hi); box-shadow: 0 0 0 3px rgb(var(--color-accent-rgb) / .12); outline: none; }
html body input[type="checkbox"], html body input[type="radio"] { accent-color: var(--color-accent); }

/* ---------- panels, modals, pagination ---------- */
html body .panel { border-radius: var(--radius-card); border-color: var(--color-border); box-shadow: var(--shadow-card); }
html body .modal-content { border-radius: var(--radius-card); border: 0; box-shadow: 0 20px 48px -16px rgba(22, 24, 29, .35); }
html body .pagination > .active > a, html body .pagination > .active > span { background: var(--color-accent); border-color: var(--color-accent); }
html body .pagination > li > a { color: var(--color-text); }

/* ---------- chat widget ---------- */
html body .gs-minichat { border-radius: var(--radius-card) var(--radius-card) 0 0; }
html body .gs-minichat-header:not([class*="tier-"]) { background: var(--grad-btn); }
html body .gs-minichat-compose button { background: var(--grad-btn); }

/* ---------- footer: white, privacy/terms links, company line ---------- */
html body #footer { background: #fff !important; border-top: 1px solid var(--color-border) !important; }
html body #footer .footer_bot_info, html body #footer .footer_bot_info div { color: var(--color-neutral) !important; font-size: 12px; }
html body #footer .mkt-footer-links a { color: var(--color-text) !important; font-size: 13px; font-weight: 600; margin-left: 16px; }
html body #footer .mkt-footer-links a:hover { color: var(--color-accent) !important; }
html body #footer .mkt-footer-links a:first-child { margin-left: 0; }
@media (max-width: 991px) {
  html body #footer .footer_bot_info { text-align: center !important; }
  html body #footer .footer_bot_info + .footer_bot_info { margin-top: 10px; }
  html body #footer .mkt-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
  html body #footer .mkt-footer-links a { margin-left: 0; }
}

/* Legacy mobile menu bar (hamburger + account icon, get_mobilemenu_nav()). Its
   icons are white on the white navbar mkt-shared.css already set, so it has
   been an empty 50px band on phones - and both jobs are done elsewhere now
   (#top-other's account menu shows at every width, .mkt-nav-toggle is the
   menu). Hidden rather than deleted so nothing that targets it breaks. */
html body #div_mobile_menu { display: none !important; }

/* ---------- home banner slider (legacy responsive-slider) ---------- */
/* No banners configured (DEV today) left its old black prev/next tab floating
   over the first section - hide the slider entirely when it has no slides. */
html body #home-slider:not(:has(.slides li)) { display: none !important; }
html body #home-slider .control-slideshow .control,
html body #home-slider .control-slideshow .sub-control { background: none !important; }
html body #home-slider .slider-control {
  width: 40px; height: 40px; border-radius: 50%; background: #fff !important; color: var(--color-text) !important;
  box-shadow: 0 4px 14px -4px rgba(22, 24, 29, .35); display: inline-flex !important; align-items: center; justify-content: center;
}
html body #home-slider .slider-control .btn-label { display: none !important; }
html body #home-slider .slides img { border-radius: var(--radius-card); }

/* ---------- page-specific primary buttons -> the brand pill ---------- */
/* Each page defines its own flat red CTA class; these are the main-action ones
   (buy, confirm, save, apply, message seller). Joined search buttons keep their
   shape and only take the gradient. */
html body .pd-buybar-btn, html body .cart-btn-confirm, html body .cart-review-btn,
html body .pd-pricealert-save, html body .rate-btn-submit, html body .search-filterbar .btn-apply,
html body .seller-pm-btn, html body .mkt-inv-seller-step-btn, html body .mkt-maintenance a,
html body .mkt-notfound a, html body .seller-search button {
  background: var(--grad-btn) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important;
  box-shadow: 0 10px 22px -10px rgb(var(--color-accent-rgb) / .7); font-weight: 600; transition: filter .15s, box-shadow .15s;
}
html body .pd-buybar-btn:hover, html body .cart-btn-confirm:hover, html body .cart-review-btn:hover,
html body .pd-pricealert-save:hover, html body .rate-btn-submit:hover, html body .search-filterbar .btn-apply:hover,
html body .seller-pm-btn:hover, html body .mkt-inv-seller-step-btn:hover, html body .mkt-maintenance a:hover,
html body .mkt-notfound a:hover, html body .seller-search button:hover { filter: brightness(1.05); color: #fff !important; }
html body .pd-buybar-btn.disabled, html body .pd-buybar-btn:disabled, html body .cart-btn-confirm:disabled,
html body .cart-btn-confirm.disabled, html body .rate-btn-submit:disabled {
  background: #f1b3b8 !important; box-shadow: none; filter: none;
}
html body .mkt-bought-search button, html body .mkt-hist-search button, html body .mkt-msell-search button,
html body .mkt-bought-pagination-jump button, html body .mkt-hist-pagination-jump button,
html body .mkt-inv-pagination-jump button, html body .mkt-msell-pagination-jump button,
html body .back-to-top-btn { background: var(--grad-btn) !important; }

/* ---------- item page ---------- */
html body .pd-title-row h1, html body .pd-title-row h2 { color: var(--color-accent) !important; font-weight: 700; }
/* Sticky buy bar: white like the rest of the chrome (was #222). */
html body .pd-buybar { background: #fff !important; border-top: 1px solid var(--color-border); box-shadow: 0 -6px 20px -10px rgba(22, 24, 29, .25) !important; }
html body .pd-buybar .pd-buybar-price { color: var(--color-text) !important; }
html body .pd-buybar, html body .pd-buybar span, html body .pd-buybar div { color: var(--color-text); }
html body .pd-pricehistory, html body .pd-saleshistory { border: 1px solid var(--color-border) !important; border-radius: var(--radius-card) !important; box-shadow: var(--shadow-card); }

/* ---------- search filter bar, breadcrumb ---------- */
html body .search-filterbar { border: 1px solid var(--color-border) !important; border-radius: var(--radius-card) !important; box-shadow: var(--shadow-card); background: #fff; }
html body .search-filterbar input, html body .search-filterbar select,
html body select.form-control, html body .mkt-sort select { border: 1px solid var(--color-input-border); border-radius: var(--radius-control); }
/* Breadcrumb (Home > Cart > Check Out etc.): was a full-width white strip in tiny
   type, hugging the left edge. Now plain text on the page background, aligned with
   the content, readable size, "›" separators, current page in the text colour. The
   markup is the legacy one on every page (a.homepage-link, i.angle-right,
   span.page-title), so this is CSS only. */
html body .group_breadcrumb { margin: 18px 0 4px !important; padding: 0 !important; background: none !important; border: 0 !important; }
html body #breadcrumb {
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  margin: 0 !important; padding: 0 !important; min-height: 0 !important;
}
html body #breadcrumb > [class*="col-"] {
  float: none; width: auto; padding: 0 !important; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0;
  font-size:14px !important; line-height: 1.6; color: var(--color-neutral);
}
html body #breadcrumb a, html body #breadcrumb a.homepage-link {
  color: var(--color-neutral) !important; font-size:14px !important; font-weight: 500; text-decoration: none; text-transform: none !important;
}
html body #breadcrumb a:hover { color: var(--color-accent) !important; }
html body #breadcrumb i.angle-right {
  font-size: 0 !important; font-style: normal; margin: 0 8px; color: var(--color-dim-2);
}
html body #breadcrumb i.angle-right::before { content: "\203A"; font-size: 16px; line-height: 1; font-family: var(--font-main); }
html body #breadcrumb .page-title, html body #breadcrumb span:last-child {
  color: var(--color-text) !important; font-weight: 600; font-size:14px !important;
}
/* Image + title/seller list as one white card, like MyArenaID's .card-panel. */
html body .pd-wrap {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 24px !important; margin-bottom: 8px; width: calc(100% - 48px);
}
html body .pd-main { background: var(--color-surface-2) !important; border-radius: 12px !important; }
@media (max-width: 767px) {
  html body .pd-wrap { padding: 16px !important; width: calc(100% - 24px); }
}

/* ---------- Layout pass A (2026-09-26, owner: "looks bare but not cluttered") ----------
   1. Content was stretched edge to edge (mkt-shared.css sets .container max-width:none),
      so small cards floated in a sea of grey on wide screens. Cap it at 1400px: on
      Full HD that leaves ~260px each side, on 2K ~580px - the same approach as other
      marketplaces; cards grow and more columns appear instead of the page stretching.
   2. The legacy base font was 12px; the design system reads at 14px.
   3. The header ate ~266px (logo bar + nav + game sub-bar + search band). Tighter. */
:root { --page-max: 1400px; }
html body { font-size: 14px; }
html body #content-wrapper-parent .container,
html body #content-wrapper .container,
html body header#top .container,
html body footer#footer .container { max-width: var(--page-max) !important; }

/* header: one white band across the full width, content inside the capped container */
html body header#top { background: var(--color-surface) !important; box-shadow: 0 1px 0 var(--color-border); }
html body header#top .row.top-navigation { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
html body header#top .hoverMenuWrapper { border-bottom: 0 !important; }
html body header#top .hoverMenuWrapper > li > a { padding: 14px 2px !important; font-size: 15px; }
html body header#top .mkt-gametabs-subbar { border-bottom: 0 !important; padding-top: 2px !important; padding-bottom: 8px !important; }
html body header#top .mkt-gametabs-subbar a { font-size: 13px; padding: 4px 12px !important; border-radius: 999px; background: var(--color-surface-2); }
html body header#top .mkt-gametabs-subbar a.active { background: rgb(var(--color-accent-rgb) / .08); }
html body .gs-search-row { padding: 22px 0 6px !important; margin-bottom: 4px !important; }

/* cards: bigger, readable, calmer frame */
html body .mkt-card { border-radius: var(--radius-card) !important; border-color: var(--color-border) !important; box-shadow: var(--shadow-card) !important; transition: transform .15s ease, box-shadow .15s ease; }
html body .mkt-card:hover, html body .mkt-card:focus { transform: translateY(-2px); box-shadow: var(--shadow-card-hover) !important; border-color: var(--color-border-hi) !important; }
html body .mkt-img-wrap { padding: 18px !important; }
html body .mkt-body { padding: 12px 14px 14px !important; }
html body .mkt-name { font-size: 14px; }
html body .mkt-price { font-size: 17px; }
html body .mkt-price-label { font-size: 12px; }
html body .mkt-lastview-card { flex: 0 0 214px !important; }
html body .search-grid { grid-template-columns: repeat(6, 1fr) !important; gap: 22px 18px !important; max-width: none !important; }
@media (max-width: 1199px) { html body .search-grid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 767px) {
  html body .search-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px 10px !important; }
  html body .mkt-lastview-card { flex: 0 0 168px !important; }
}

/* section titles a touch larger, with breathing room between sections */
html body .mkt-section-title { font-size: 20px !important; }
html body .mkt-lastview-inner { margin-bottom: 28px; }

/* home trust strip (index.php) */
.mkt-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 6px 0 26px; }
.mkt-trust-item { display: flex; align-items: center; gap: 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 14px 16px; box-shadow: var(--shadow-card); }
.mkt-trust-icon { flex: 0 0 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--grad-soft); color: var(--color-accent); font-size: 18px; }
.mkt-trust-text b { display: block; font-size: 15px; color: var(--color-text); }
.mkt-trust-text span { font-size: 13px; color: var(--color-neutral); }
@media (max-width: 767px) { .mkt-trust { grid-template-columns: 1fr; gap: 10px; } }
/* align nav + game chips with the logo and the content's left edge (they had 32/80px
   of their own left padding from the old full-width header) */
@media (min-width: 768px) {
  html body header#top #mktNavList { padding-left: 0 !important; margin-left: -38px !important; }
  html body header#top .mkt-gametabs-subbar { padding-left: 0 !important; margin-left: -10px !important; }
}
/* short pages: keep the footer at the bottom of the window instead of a grey gap under it */
html body #content-wrapper-parent { min-height: calc(100vh - 378px); }
/* phones: 16px side gutter everywhere (design system), compact trust strip */
@media (max-width: 767px) {
  html body header#top .mkt-gametabs-subbar { padding-left: 16px !important; }
  html body .gs-search-row .search-form-wrap { width: auto !important; max-width: none !important; margin: 0 16px !important; }
  .mkt-trust { grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 2px 0 18px; }
  .mkt-trust-item { flex-direction: column; text-align: center; gap: 6px; padding: 10px 6px; }
  .mkt-trust-icon { flex: 0 0 auto; width: 34px; height: 34px; font-size: 16px; }
  .mkt-trust-text b { font-size: 12.5px; line-height: 1.3; }
  html body #content { padding-left: 16px !important; padding-right: 16px !important; }
  html body #content > section.row { margin-left: 0 !important; margin-right: 0 !important; }
  .mkt-trust-text span { display: none; }
}
/* owner review 2026-09-26: the logo bar's old drop shadow showed outside the capped
   nav on wide screens; the game chip sat glued under the menu; the trust strip
   touched the search band */
html body header#top #top-other { box-shadow: none !important; }
html body header#top .mkt-gametabs-subbar { padding-top: 10px !important; padding-bottom: 14px !important; gap: 10px; }
.mkt-trust { margin-top: 22px; }
@media (max-width: 767px) { .mkt-trust { margin-top: 14px; } }
/* balance: chip → search was 36px while search → header edge was 10px */
html body header#top .mkt-gametabs-subbar { padding-bottom: 4px !important; }
html body .gs-search-row { padding-top: 10px !important; padding-bottom: 18px !important; }
/* trust strip → first section title was 70px (26 + 16 + 28); make it the same 28px
   rhythm as between the other sections */
.mkt-trust { margin-bottom: 0 !important; }
html body .mkt-lastview-outer { padding-top: 0 !important; }

/* ---------- Layout pass A: item page (market_item_group.php) ----------
   The main card was narrower than the price-history card under it (width calc(100% - 48px)
   + auto margins), so the two left edges didn't line up; info text was 13px next to a
   340px image. Same width as the cards below, bigger title/meta/offer text. */
html body .pd-wrap { width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 12px !important; padding: 28px !important; padding-bottom: 28px !important; gap: 36px !important; }
html body .pd-main { width: 320px !important; }
html body .pd-title-row h1, html body .pd-title-row h2 { font-size: 26px !important; line-height: 1.3; }
html body .pd-meta { font-size: 14px !important; display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 22px !important; }
html body .pd-meta div { margin: 0 !important; background: var(--color-surface-2); border-radius: 999px; padding: 4px 12px; color: var(--color-neutral); }
html body .pd-select-title { font-size: 15px !important; }
html body .offer-card { border-radius: 12px !important; padding: 14px 18px !important; border-color: var(--color-border) !important; transition: border-color .15s, box-shadow .15s; }
html body .offer-card:hover { border-color: var(--color-border-hi) !important; }
html body .offer-seller { font-size: 15px !important; font-weight: 600; }
html body .offer-price { font-size: 20px !important; color: var(--color-accent) !important; }
html body .pd-pricehistory, html body .pd-saleshistory { margin-left: 0 !important; margin-right: 0 !important; padding: 22px 24px !important; }
html body .pd-section-title { font-size: 18px !important; font-weight: 700; }
@media (max-width: 767px) {
  html body .pd-wrap { padding: 16px !important; gap: 16px !important; }
  html body .pd-main { width: 100% !important; }
  html body .pd-title-row h1, html body .pd-title-row h2 { font-size: 20px !important; }
  html body .pd-pricehistory, html body .pd-saleshistory { padding: 16px !important; }
}

/* ---------- Layout pass A: shop page (market_shop.php) ---------- */
html body .seller-catalog-locked { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); text-align: center; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
html body .seller-catalog-locked .fa-lock { width: 52px; height: 52px; border-radius: 16px; background: var(--grad-soft); color: var(--color-accent); font-size: 22px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
html body .seller-catalog-locked b { font-size: 17px; color: var(--color-text); }
html body .seller-catalog-locked span { font-size: 14px; color: var(--color-neutral); }
/* phones: item page cards sat 26px in (content 16 + Bootstrap column 10); design system says 16 */
@media (max-width: 767px) {
  html body #content > section.row > .col-md-24 { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ---------- Layout pass A: account pages (owner review 2026-09-26) ---------- */
/* footer at the window bottom on every page, whatever the header height (replaces the
   fixed calc() guess, which only fit the tall public header) */
html body { display: flex; flex-direction: column; min-height: 100vh; }
html body #content-wrapper-parent { flex: 1 0 auto; min-height: 0 !important; }
/* inventory: wallet + spend check in one row (market_inventory.php), design-system pills */
html body .mkt-inv-wallet-status { border-radius: var(--radius-card) !important; border-color: var(--color-border) !important; box-shadow: var(--shadow-card); padding: 12px 18px !important; flex-wrap: wrap; }
html body .mkt-inv-wallet-status .mkt-inv-spend-check { margin: 0 0 0 auto !important; padding: 0 !important; background: none !important; border: 0 !important; max-width: none !important; }
html body .mkt-inv-wallet-status .mkt-inv-wallet-manage-btn { margin-left: 0 !important; }
html body .mkt-inv-wallet-status .label { border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
html body .mkt-inv-wallet-status .label-success { background: rgb(22 163 74 / .12); color: #15803d; }
html body .mkt-inv-wallet-status .label-danger { background: rgb(var(--color-accent-rgb) / .10); color: var(--color-accent); }
html body .mkt-inv-wallet-manage-btn, html body .mkt-inv-spend-check-btn { border-radius: 999px !important; border-color: var(--color-border) !important; padding: 7px 16px !important; font-size: 13px !important; color: var(--color-text) !important; background: var(--color-surface) !important; }
html body .mkt-inv-wallet-manage-btn:hover, html body .mkt-inv-spend-check-btn:hover { border-color: var(--color-border-hi) !important; color: var(--color-accent) !important; }
/* "กำลังขาย" ribbon was Bootstrap blue */
html body .mkt-inv-card-status-ribbon-selling { background: rgb(var(--color-accent-rgb) / .92) !important; }
html body .mkt-inv-card-expiry { font-size: 12px !important; }
/* sold-tab empty state as a card instead of loose grey text */
@media (max-width: 767px) {
  html body .mkt-inv-wallet-status .mkt-inv-spend-check { margin: 4px 0 0 !important; width: 100%; }
}

/* ---------- VIP tier badge (2026-09-26, owner - CONTEXT.md "VIP tier badge") ----------
   One pill everywhere: icon + tier name, from mkt_vip_badge_html() (PHP) and the
   matching vipBadgeHtml() in mkt-shared.js / chat/index.php. Replaces the emoji medals
   and the old per-page gradient badges. */
.mkt-vip-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 7px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; vertical-align: middle; letter-spacing: 0;
}
.mkt-vip-badge svg { width: 13px; height: 13px; flex: 0 0 auto; }
html body .mkt-vip-badge, html body .mkt-vip-badge span { font-weight: 600; }
.mkt-vip-badge--bronze { background: #FAECE7; color: #712B13; }
.mkt-vip-badge--silver { background: #F1EFE8; color: #444441; }
.mkt-vip-badge--gold { background: #FAEEDA; color: #633806; }
.mkt-vip-badge--platinum { background: #E6F1FB; color: #0C447C; }
.mkt-vip-badge--sm { font-size: 11px; padding: 1px 8px 1px 6px; gap: 3px; }
.mkt-vip-badge--sm svg { width: 12px; height: 12px; }
.mkt-vip-badge--lg { font-size: 15px; padding: 6px 16px 6px 12px; gap: 6px; }
.mkt-vip-badge--lg svg { width: 18px; height: 18px; }
/* item card corner (replaces .mkt-badge.vip/.platinum/.silver) */
.mkt-card-tier { position: absolute; top: 8px; right: 8px; line-height: 0; z-index: 1; }
.mkt-card-tier .mkt-vip-badge { box-shadow: 0 1px 4px rgba(22, 24, 29, .12); }
/* offer list on the item page */
.offer-tier { display: inline-block; margin-bottom: 4px; }
/* chat headers sit on the brand gradient: give the pill a thin white ring */
.gs-minichat-header .mkt-vip-badge { margin-right: 6px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); }

/* ---------- mini chat (mkt-shared.js), 2026-09-26 chat audit ---------- */
html body .gs-minichat-header { background: var(--grad-btn) !important; color: #fff !important; }
html body .gs-minichat-header .gs-minichat-header-btns button { color: #fff !important; }
.gs-minichat-safety { flex-shrink: 0; display: flex; gap: 6px; align-items: flex-start; padding: 6px 10px; font-size: 11px; line-height: 1.4; background: #fff7e6; color: #92600a; border-bottom: 1px solid rgb(146 96 10 / .15); }
.gs-minichat-safety svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px; }
.gs-minichat.minimized .gs-minichat-safety, .gs-minichat.minimized .gs-minichat-status { display: none; }
.gs-minichat-day { align-self: center; font-size: 11px; color: var(--color-neutral); background: var(--color-surface-2); border-radius: 999px; padding: 2px 10px; margin: 4px 0; }
.gs-minichat-bubble-row { flex-direction: column; align-items: flex-start; }
.gs-minichat-bubble-row.mine { align-items: flex-end; }
.gs-minichat-meta { font-size: 10px; color: var(--color-dim-2); margin-top: 2px; padding: 0 2px; }
.gs-minichat-meta .read { color: var(--color-good); margin-right: 4px; }
.gs-minichat-warn { max-width: 85%; margin-top: 4px; font-size: 11px; line-height: 1.4; background: #fff7e6; color: #92600a; border-radius: 8px; padding: 5px 8px; }
.gs-minichat-status { flex-shrink: 0; font-size: 12px; line-height: 1.4; padding: 6px 10px; background: #fdecee; color: #b4121c; }
.gs-minichat-status a { color: #b4121c; font-weight: 600; text-decoration: underline; }
.gs-minichat-status[hidden] { display: none; }
.gs-minichat-count { flex-shrink: 0; font-size: 10px; color: var(--color-neutral); text-align: right; padding: 0 12px 4px; background: #fff; }
.gs-minichat-count.over { color: #b4121c; }
.gs-minichat-count[hidden] { display: none; }
html body .gs-minichat-compose input:disabled { background: var(--color-surface-2); cursor: not-allowed; }
html body .gs-minichat-compose button:disabled { background: #f1b3b8 !important; cursor: not-allowed; }
.gs-minichat.minimized .gs-minichat-count { display: none; }

/* ---------- owner review 2026-09-26: chip spacing + breadcrumb on every page ---------- */
/* keep the game chip's own bottom space on every page (pages without the search band
   had only 4px); the search band gives up its top padding instead */
html body header#top .mkt-gametabs-subbar { padding-bottom: 14px !important; }
html body .gs-search-row { padding-top: 0 !important; }

/* breadcrumb: house icon, soft chevrons, muted trail, bold current page (truncated) */
html body #breadcrumb { margin: 16px 0 12px !important; padding: 0 !important; background: none !important; font-size: 13px !important; line-height: 1.4; }
html body #breadcrumb > div { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; min-width: 0; padding-left: 0; padding-right: 0; }
html body #breadcrumb a { color: var(--color-neutral) !important; font-weight: 500; white-space: nowrap; padding: 3px 0; }
html body #breadcrumb a:hover { color: var(--color-accent) !important; text-decoration: none; }
html body #breadcrumb a.homepage-link:first-child::before { content: "\f015"; font-family: FontAwesome; font-weight: normal; margin-right: 6px; color: var(--color-dim-2); }
html body #breadcrumb a.homepage-link:first-child:hover::before { color: var(--color-accent); }
html body #breadcrumb i.angle-right { font-size: 0 !important; width: 7px; height: 7px; flex: 0 0 7px; border-right: 1.5px solid var(--color-dim-2); border-top: 1.5px solid var(--color-dim-2); transform: rotate(45deg); margin: 0 4px 0 1px; }
html body #breadcrumb .page-title, html body #breadcrumb span:last-child { color: var(--color-text) !important; font-weight: 600 !important; font-size: 13px !important; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48ch; }
html body #breadcrumb i.angle-right::before, html body #breadcrumb i.angle-right::after { content: none !important; display: none !important; }
/* cart: remove confirmation inside the row (market_cart.php) */
html body .cart-item-row { flex-wrap: wrap; }
.cart-remove-confirm { flex-basis: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--color-text); }
.cart-remove-confirm button { border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 600; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.cart-remove-confirm .cart-remove-yes { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.cart-remove-msg { flex-basis: 100%; text-align: right; margin-top: 6px; font-size: 13px; color: var(--color-good); }
.cart-remove-msg.is-error { color: var(--color-accent); }
/* the safety banner + status line take room: a little taller on desktop */
@media (min-width: 768px) { html body .gs-minichat:not(.minimized) { height: 420px; } }
/* owner review 2026-09-26: Bronze and Silver looked identical (same medal, both pale
   neutral). Distinct warm copper vs cool slate, a hairline border in the tier colour, and
   the rank number inside the medal (3 / 2, like the VIP page). */
.mkt-vip-badge { border: 1px solid transparent; }
.mkt-vip-badge--bronze { background: #F6E1CF !important; color: #7A3E12 !important; border-color: #D9A274; }
.mkt-vip-badge--silver { background: #E8EDF3 !important; color: #334155 !important; border-color: #A7B4C4; }
.mkt-vip-badge--gold { border-color: #E3B55B; }
.mkt-vip-badge--platinum { border-color: #8DB8E4; }
.mkt-vip-badge svg text { font-family: var(--font-main); font-weight: 700; }
html body .mkt-vip-card-head.tier-silver { background: #EEF2F6 !important; }
html body .mkt-vip-card-head.tier-bronze { background: #FBEBDD !important; }

/* ---------- Design pass B: home category tiles + seller CTA (2026-09-29) ---------- */
.mkt-cat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.mkt-cat-tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); color: var(--color-text) !important; text-decoration: none !important; font-weight: 600; font-size: 15px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.mkt-cat-tile:hover { border-color: rgb(var(--color-accent-rgb) / .35); color: var(--color-accent) !important; transform: translateY(-1px); box-shadow: var(--shadow-card); }
.mkt-cat-icon { flex: 0 0 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--grad-soft); color: var(--color-accent); }
.mkt-cat-icon svg { width: 22px; height: 22px; }
.mkt-sell-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 32px 0 8px; padding: 22px 26px; border-radius: var(--radius-card); background: linear-gradient(120deg, #1F232B 0%, #2B303A 60%, #3A1216 100%); color: #fff; }
.mkt-sell-cta h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: #fff; }
.mkt-sell-cta ol { margin: 0; padding-left: 20px; font-size: 14px; color: rgb(255 255 255 / .82); line-height: 1.8; }
.mkt-sell-cta-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; padding: 12px 28px; border-radius: 999px; font-weight: 700; font-size: 15px; color: #fff !important; text-decoration: none !important; background: var(--grad-btn); box-shadow: 0 10px 22px -10px rgba(227, 6, 19, .8); }
@media (max-width: 600px) {
  /* phones: one swipeable row instead of three rows of tiles */
  .mkt-cat-tiles { display: flex; overflow-x: auto; gap: 8px; margin: 12px -16px 4px; padding: 2px 16px 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .mkt-cat-tiles::-webkit-scrollbar { display: none; }
  .mkt-cat-tile { flex: 0 0 auto; padding: 6px 14px 6px 6px; font-size: 14px; gap: 8px; border-radius: 999px; scroll-snap-align: start; }
  .mkt-cat-icon { flex-basis: 32px; height: 32px; border-radius: 50%; }
  .mkt-cat-icon svg { width: 18px; height: 18px; }
  .mkt-sell-cta { padding: 20px; }
  .mkt-sell-cta-btn { width: 100%; }
}

/* ---------- Two-row header (owner review 2026-09-29) ----------
   Row 1: logo | search (wide) | bell, chat, account. Row 2: menu ... game chip.
   The search markup now lives inside #top-other .row (render_header_search_box()). */
html body #top-other .row { display: flex !important; align-items: center; flex-wrap: nowrap; gap: 24px; }
html body #top-other .gs-logo-col { flex: 0 0 auto !important; width: auto !important; overflow: visible !important; }
html body #top-other .gs-header-search { flex: 1 1 auto; min-width: 0; max-width: 680px; margin: 0 auto; padding: 0 !important; background: none !important; }
html body #top-other .gs-header-search .search-form-wrap { width: 100% !important; max-width: none !important; margin: 0 !important; }
html body #top-other .row > .top-other.col-md-7 { width: auto !important; flex: 0 0 auto; margin-left: 0 !important; }
/* The game chip stays on its own line UNDER the menu, left-aligned with "ตลาดซื้อขาย":
   it is a sub-level of the market, not a peer of the menu items (owner decision
   2026-08-27, re-confirmed 2026-09-29). */
/* tablets / phones: search drops to its own full-width line under the logo */
@media (max-width: 991px) {
  html body #top-other .row { flex-wrap: wrap; gap: 10px 16px; }
  html body #top-other .gs-header-search { order: 3; flex: 1 0 100%; max-width: none; margin: 2px 0 4px; }
  html body #top-other .gs-header-search .search-form-wrap { margin: 0 16px !important; width: auto !important; }
  html body #top-other .row > .top-other.col-md-7 { margin-left: auto !important; }
}
/* alignment fix (owner review): Bootstrap's clearfix ::before/::after became flex items
   and, with the 24px gap, pushed the logo/account 24px inside the content edge. Both rows
   now line up with the page content (22px gutter at 1400px), and the search box is
   centred on the page, not on the space left between logo and account. */
html body #top-other .row::before, html body #top-other .row::after,
html body header#top .row.top-navigation::before, html body header#top .row.top-navigation::after { display: none !important; content: none !important; }
@media (min-width: 992px) {
  html body #top-other .row { display: grid !important; grid-template-columns: 1fr minmax(0, 680px) 1fr; }
  html body #top-other .gs-logo-col { justify-self: start; }
  html body #top-other .gs-header-search { width: 100%; max-width: none; }
  html body #top-other .row > .top-other.col-md-7 { justify-self: end; }
  html body header#top .row.top-navigation { margin-right: -10px !important; width: auto !important; }
  html body #mktNavList > li:first-child > a { padding-left: 0 !important; }
}
/* more air (owner review 2026-09-29: "ดูแน่นไปหมด") - roomier header rows with a hairline
   between them, wider menu spacing, and the trust strip as ONE bar instead of three more
   cards stacked on top of the category cards. */
html body header#top #top-other { padding: 16px 0 !important; }
@media (min-width: 992px) {
  html body header#top .row.top-navigation { border-top: 1px solid var(--color-border); }
  html body header#top .hoverMenuWrapper { gap: 36px !important; }
  html body header#top .mkt-gametabs-subbar { padding-top: 12px !important; padding-bottom: 16px !important; }
}
html body .mkt-trust { gap: 0 !important; margin: 26px 0 0 !important; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
html body .mkt-trust-item { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 16px 20px !important; }
html body .mkt-trust-item + .mkt-trust-item { border-left: 1px solid var(--color-border) !important; }
html body .mkt-cat-tiles { margin-top: 18px !important; }
/* owner review 2026-09-29, round 3:
   - search box vertically centred with the logo (an old 4px margin-bottom pulled it up)
   - search width follows the screen: 46% of the viewport, 420-760px (the page itself caps at 1400px), still centred
   - trust strip back to three light cards (the single bar read as one more big box),
     a bit more compact, with normal spacing to the category row */
html body #top-other .gs-header-search { margin: 0 !important; align-self: center; }
@media (min-width: 992px) {
  html body #top-other .row { grid-template-columns: 1fr minmax(0, clamp(420px, 46vw, 760px)) 1fr !important; }
}
html body .mkt-trust { gap: 14px !important; margin: 20px 0 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; }
html body .mkt-trust-item { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-card) !important; padding: 12px 16px !important; }
html body .mkt-trust-text span { font-size: 12.5px; }
html body .mkt-cat-tiles { margin-top: 12px !important; }
/* seller CTA spacing (owner review 2026-09-29): it sat 32px under the product row but
   81px above the footer. Now 48px above, and only the footer's own ~40px below. */
html body .mkt-sell-cta { margin: 48px 0 0 !important; }
html body .mkt-lastview-outer { padding-bottom: 0 !important; }
/* logo optically centred on the search box (owner review): the image's own weight sits
   low (star up top, "MARKET" tagline at the bottom), so geometric centring reads low. */
@media (min-width: 992px) { html body #top-other .gs-logo-col img { transform: translateY(-4px); } }
/* owner review round 2: still read low - lift it further, on phones too (there it sits
   beside the bell/chat/account icons instead of the search box). */
html body #top-other .gs-logo-col img { transform: translateY(-8px) !important; }
/* phones: every home carousel shows exactly two whole cards (owner review 2026-09-29) -
   the prev/next arrows ate 88px, leaving room for 1.5 cards. On a phone you swipe, so
   the arrows go and the track snaps card by card. */
@media (max-width: 600px) {
  html body .mkt-lastview-arrow { display: none !important; }
  html body .mkt-lastview-wrap { gap: 0 !important; }
  html body .mkt-lastview-track { gap: 12px !important; scroll-snap-type: x mandatory; }
  html body .mkt-lastview-card { flex: 0 0 calc((100% - 12px) / 2) !important; max-width: none !important; scroll-snap-align: start; }
}
/* carousel dots (option B): phones only, the arrows cover wider screens */
.mkt-carousel-dots { display: none; }
@media (max-width: 600px) {
  html body .mkt-carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
  html body .mkt-carousel-dots span { width: 6px; height: 6px; border-radius: 999px; background: rgb(0 0 0 / .18); transition: width .2s, background .2s; cursor: pointer; }
  html body .mkt-carousel-dots span.is-active { width: 18px; background: var(--color-accent, #E30613); }
}
/* header without a search box (owner review 2026-09-30): the account group (bell / chat /
   profile) slid into the empty middle column. Pin it to the right column on every page. */
@media (min-width: 992px) {
  html body #top-other .row > .top-other.col-md-7 { grid-column: 3; }
}