:root {
  --logo-teal: #00b7a8;
  --logo-aqua: #67d5ca;
  --logo-blue: #176fc1;
  --logo-red: #f04b68;
  --logo-red-dark: #c9264d;
  --logo-pink: #ffe6ed;
  --logo-sky: #e1f3ff;
  --logo-teal-dark: #007d75;
  --logo-blue-dark: #0b4778;
  --midnight: #082f45;
  --ink: #092d43;
  --muted: #60727e;
  --green: var(--logo-teal-dark);
  --green-2: var(--midnight);
  --mint: #e9f8f6;
  --paper: #f8fbfd;
  --line: #d9e7ee;
  --coral: var(--logo-red);
  --admin-bg: #f3f8fb;
  --admin-line: #d9e7ee;
}

::selection { background: var(--logo-sky); color: var(--ink); }
:focus-visible { outline: 3px solid rgba(1, 113, 187, .34); outline-offset: 2px; }

.notice {
  background: linear-gradient(100deg, #075762 0%, var(--logo-teal-dark) 58%, var(--logo-blue-dark) 100%);
  color: #fff;
}
.brand { color: #143f4b; }
.brand-shop { color: var(--logo-teal); }
.brand-logo { border: 1px solid #d9eeee; box-shadow: 0 4px 13px rgba(0, 91, 145, .09); }
.search { background: #f4fafa; border-color: #dcecee; }
.search:focus-within { border-color: var(--logo-blue); box-shadow: 0 0 0 3px rgba(1, 113, 187, .11); }
.language-toggle { border-color: #9bd5d1; color: var(--logo-teal-dark); }
.language-toggle:hover { background: #e8f8f6; }
.cart-button,
.button-primary,
.steps span { background: linear-gradient(135deg, var(--logo-teal-dark), #008f88); color: #fff; }
.cart-button:hover,
.button-primary:hover { background: linear-gradient(135deg, #006c69, #007f7a); }
.cart-button span { color: var(--logo-teal-dark); }
.catalog-trigger,
.add-button,
.waiting-icon { background: #e8f8f6; color: var(--logo-teal-dark); }
.nav a:hover,
.text-button:hover,
.link-button:hover,
.taskbar-group:hover,
.taskbar-group.selected { color: var(--logo-blue-dark); }

.hero {
  background:
    radial-gradient(circle at 86% 14%, rgba(212, 240, 254, .94) 0 18%, transparent 18.3%),
    radial-gradient(circle at 70% 82%, rgba(255, 207, 219, .72) 0 14%, transparent 14.3%),
    linear-gradient(118deg, #eefaf8 0%, #f8fbfd 52%, #fdf1f5 100%);
}
.hero h1 em { color: var(--logo-teal-dark); }
.circle { border-color: rgba(1, 113, 187, .30); }
.circle-two { border-color: rgba(0, 168, 157, .42); }
.medical-card { box-shadow: 0 16px 38px rgba(1, 113, 187, .12); }
.medical-card span { color: var(--logo-blue); }
.pill-pill { background: linear-gradient(145deg, #d8113a, var(--logo-red-dark)); }
.button-ghost { border-color: #91c9cf; color: var(--logo-teal-dark); }
.button-ghost:hover { background: #eaf8f7; border-color: var(--logo-teal); }

.category-card:hover,
.category-card.selected { border-color: var(--logo-aqua); background: #effaf9; }
.category-card span { background: #e8f7f6; color: var(--logo-blue); }
.featured-wrap { background: linear-gradient(118deg, #007a76 0%, #007f88 52%, #005b91 100%); }
.promo-panel .eyebrow,
.feature-points span { color: #b8f0ea; }
.promo-panel > p:not(.eyebrow),
.feature-points p { color: #e2f5f5; }
.product-card { box-shadow: 0 8px 24px rgba(18, 61, 74, .045); }
.product-card:hover { border-color: #a7d9d6; box-shadow: 0 13px 29px rgba(1, 113, 187, .10); transform: translateY(-2px); }
.product-card { transition: transform .2s, border-color .2s, box-shadow .2s; }
.product-image { background: linear-gradient(145deg, #f2faf9, #f3f8fc); }
.product-image b,
.dialog-badge { background: #fff0f4; color: #c8123b; }
.active-filter { background: #e7f8f6; color: #245e62; }
.how-wrap { background: linear-gradient(108deg, #eef9f8, #f3f9fc 62%, #fff5f7); }
.locations { background: linear-gradient(180deg, #fff 0%, #f9fcfd 100%); }
.map-frame { border-color: #cde4e7; background: var(--logo-sky); }
footer { background: linear-gradient(112deg, #123f49, #075762 58%, #074b70); }
.brand-footer .brand-shop { color: #67d7ce; }

.admin-body {
  background:
    radial-gradient(circle at 100% 0, rgba(212, 240, 254, .55), transparent 28%),
    radial-gradient(circle at 0 100%, rgba(255, 207, 219, .34), transparent 24%),
    var(--admin-bg);
}
.admin-header { border-bottom-color: var(--admin-line); box-shadow: 0 3px 14px rgba(18, 61, 74, .04); }
.admin-intro { border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, var(--logo-teal), var(--logo-blue), var(--logo-red)) 1; }
.back-link,
.edit-button,
.table-pager button,
.quote-save { color: var(--logo-teal-dark); }
.token-field input:focus,
.panel-head input:focus,
.edit-panel input:focus,
.edit-panel select:focus,
.crm-form input:focus,
.crm-form select:focus,
.crm-form textarea:focus,
.crm-wide .panel-head input:focus { border-color: var(--logo-blue); box-shadow: 0 0 0 3px rgba(1, 113, 187, .10); }
.server-status.ready,
.admin-message.success,
.admin-auth-status.ready,
.status-closed-won { background-color: #e7f8f4; color: #006b66; }
.admin-message.success,
.admin-auth-status.ready,
.status-closed-won { background-color: transparent; }
.group-icon,
.leaderboard li::before,
.quote-save { background: #e8f7f6; color: var(--logo-blue-dark); }
.group-delete,
.delete-sale,
.sale-line button { background: #fff0f4; color: #c8123b; }

.crm-kpis article { position: relative; overflow: hidden; }
.crm-kpis article::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--logo-teal); }
.crm-kpis article:nth-child(2)::before { background: var(--logo-blue); }
.crm-kpis article:nth-child(3)::before { background: var(--logo-red); }
.crm-kpis article:nth-child(4)::before { background: var(--logo-aqua); }
.crm-kpis strong,
.leaderboard em,
.quote-count { color: var(--logo-teal-dark); }
.tier-vip { background: #fff0f4; color: #bd1238; }
.tier-growth { background: #e8f7f6; color: #006e69; }
.tier-new { background: #edf6fc; color: var(--logo-blue-dark); }

@media (prefers-reduced-motion: reduce) {
  .product-card { transition: none; }
}

/* Keep backoffice grids inside narrow mobile viewports. */
.admin-grid > *,
.crm-dashboard-grid > *,
.crm-entry-grid > *,
.crm-panel,
.group-manager,
.group-list,
.group-row,
.group-create { min-width: 0; }
.group-create input,
.group-row input,
.crm-form input,
.crm-form select,
.crm-form textarea { width: 100%; min-width: 0; }

@media (max-width: 620px) {
  .group-create { grid-template-columns: minmax(0, 1fr) 78px; }
  .group-row { grid-template-columns: 28px minmax(0, 1fr) 58px 28px; }
  .sale-line > * { min-width: 0; }
}

/* MPMED Shop — modern medical technology typography and visual system. */
body,
button,
input,
select,
textarea { font-family: "IBM Plex Sans Thai", "Manrope", sans-serif; }
body { color: var(--ink); font-feature-settings: "kern" 1, "liga" 1; }
h1,
h2,
h3,
.brand,
.button,
.cart-button,
.crm-kpis strong { font-family: "Manrope", "IBM Plex Sans Thai", sans-serif; }
h1,
h2,
h3 { color: var(--ink); font-weight: 700; letter-spacing: -.035em; }

.site-header { background: rgba(255, 255, 255, .94); box-shadow: 0 7px 28px rgba(8, 47, 69, .055); }
.notice { background: linear-gradient(100deg, var(--midnight), #0a5267 56%, var(--logo-blue-dark)); }
.header-main { height: 88px; }
.brand { gap: 11px; font-size: 23px; font-weight: 800; letter-spacing: -.7px; }
.brand-logo { width: 48px; height: 48px; border-radius: 14px; border-color: #dceaf0; box-shadow: 0 7px 20px rgba(8, 47, 69, .10); }
.brand-name { display: inline-flex; align-items: baseline; gap: 6px; }
.brand-core { color: var(--midnight); }
.brand-shop {
  position: relative;
  color: var(--logo-teal-dark);
  background: linear-gradient(105deg, var(--logo-teal-dark), var(--logo-blue));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-shop::after { content: ""; position: absolute; width: 5px; height: 5px; right: -7px; top: 1px; border-radius: 50%; background: var(--logo-red); }
.brand-context { margin-left: 5px; color: #70828e; font: 700 10px/1 "Manrope", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.brand-wordmark { display: block; width: 154px; height: auto; flex: 0 0 auto; }
.brand-lockup { display: inline-flex; align-items: flex-end; gap: 7px; min-width: 0; }
.brand-lockup .brand-context { margin: 0 0 5px; white-space: nowrap; }
.brand-footer .brand-wordmark { width: 146px; }
.brand-master-logo { display: block; width: 180px; height: auto; flex: 0 0 auto; object-fit: contain; border-radius: 7px; }
.admin-header .brand-master-logo { width: 154px; }
.brand-footer .brand-master-logo { width: 190px; }
.search { height: 48px; border-radius: 14px; background: #f5f9fb; border-color: #dbe8ee; }
.language-toggle,
.catalog-trigger,
.button,
.cart-button,
.detail-button,
.add-button { border-radius: 11px; }
.language-toggle,
.taskbar-group { font-family: "IBM Plex Sans Thai", "Manrope", sans-serif; }
.pill-pill,
.feature-points span,
.steps span { font-family: "Manrope", sans-serif; }
.cart-button,
.button-primary,
.steps span { background: linear-gradient(115deg, #007d75, #009d92); box-shadow: 0 8px 20px rgba(0, 125, 117, .18); }
.cart-button:hover,
.button-primary:hover { background: linear-gradient(115deg, #006c66, #008b82); }
.nav { height: 56px; }
.nav a,
.taskbar-group { color: #465f6d; font-family: "IBM Plex Sans Thai", sans-serif; font-weight: 600; }

.hero {
  background:
    radial-gradient(circle at 86% 13%, rgba(225, 243, 255, .98) 0 18%, transparent 18.2%),
    radial-gradient(circle at 72% 84%, rgba(255, 230, 237, .90) 0 14%, transparent 14.2%),
    linear-gradient(120deg, #effaf8 0%, #f7fbfd 48%, #f8f4fb 100%);
}
.hero-grid { min-height: 500px; }
.eyebrow { color: var(--logo-blue-dark); font: 800 10px/1.5 "Manrope", sans-serif; letter-spacing: .18em; }
.hero h1 { max-width: 680px; font-size: clamp(38px, 4.3vw, 62px); line-height: 1.08; }
.hero h1 em { font-family: "IBM Plex Sans Thai", sans-serif; font-style: normal; font-weight: 600; letter-spacing: -.04em; color: transparent; background: linear-gradient(90deg, var(--logo-teal-dark), var(--logo-blue)); -webkit-background-clip: text; background-clip: text; }
.hero-copy > p:not(.eyebrow) { color: #516b78; font-size: 16px; }
.medical-card { border: 1px solid rgba(255, 255, 255, .78); border-radius: 20px; backdrop-filter: blur(12px); box-shadow: 0 22px 50px rgba(8, 47, 69, .13); }
.pill-pill { border-radius: 32px; background: linear-gradient(145deg, #dc3459, var(--logo-red-dark)); box-shadow: 0 15px 35px rgba(201, 38, 77, .24); transform: rotate(7deg); }

.categories,
.products-section { background: transparent; }
.category-card,
.product-card,
.steps article,
.crm-kpis article,
.crm-panel,
.product-panel,
.edit-panel { border-radius: 17px; border-color: var(--line); }
.category-card,
.product-card { box-shadow: 0 10px 30px rgba(8, 47, 69, .055); }
.category-card:hover,
.category-card.selected,
.product-card:hover { border-color: #8edbd3; box-shadow: 0 18px 42px rgba(8, 47, 69, .11); }
.category-card span { border-radius: 12px; background: linear-gradient(145deg, #e4f8f5, #e9f4fc); }
.featured-wrap { background: linear-gradient(118deg, var(--midnight) 0%, #07536a 55%, var(--logo-blue-dark) 100%); }
.featured-wrap h2 { color: #fff; }
.feature-points article { border-radius: 16px; background: rgba(255, 255, 255, .035); }
.product-image { background: linear-gradient(145deg, #f3faf9, #edf5fa); }
.product-image b,
.dialog-badge { background: #fff0f4; color: var(--logo-red-dark); }
.product-body h3 { color: var(--ink); font-weight: 700; }
.how-wrap { background: linear-gradient(110deg, #eef8f7, #eff6fb 62%, #fff4f7); }
.locations { background: #fff; }
footer { background: linear-gradient(112deg, #061f30, var(--midnight) 58%, #092c4d); }
.brand-footer .brand-core { color: #fff; }
.brand-footer .brand-shop { background: linear-gradient(105deg, #64e1d5, #6ebaff); -webkit-background-clip: text; background-clip: text; }

.admin-header { background: rgba(255, 255, 255, .96); }
.admin-intro h1 { font-size: clamp(30px, 3vw, 40px); }
.admin-intro { border-image: linear-gradient(90deg, var(--logo-teal), var(--logo-blue), var(--logo-red)) 1; }
.admin-tools,
.product-panel,
.edit-panel,
.crm-panel,
.crm-kpis article { box-shadow: 0 10px 32px rgba(8, 47, 69, .045); }
.crm-kpis article::before { height: 5px; }
.crm-kpis strong { color: var(--logo-teal-dark); font-weight: 800; letter-spacing: -.04em; }

@media (max-width: 620px) {
  .header-main { height: 76px; }
  .brand { font-size: 18px; gap: 7px; }
  .brand-logo { width: 40px; height: 40px; border-radius: 11px; }
  .brand-name { gap: 4px; }
  .brand-shop::after { width: 4px; height: 4px; right: -5px; }
  .hero h1 { font-size: 34px; }
  .brand-context { display: none; }
  .brand-wordmark { width: 116px; }
  .brand-footer .brand-wordmark { width: 122px; }
  .brand-master-logo { width: 132px; }
  .admin-header .brand-master-logo { width: 128px; }
  .brand-footer .brand-master-logo { width: 148px; }
}

/* Short homepage + dedicated grouped and paginated catalog route. */
.catalog-more { display: flex; justify-content: center; margin-top: 32px; }
.catalog-pagination { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 34px; }
.catalog-pagination[hidden] { display: none !important; }
.catalog-pagination button,
.catalog-pagination span { display: grid; place-items: center; min-width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--midnight); font-weight: 700; }
.catalog-pagination button { cursor: pointer; }
.catalog-pagination button.selected { border-color: var(--logo-teal-dark); background: var(--logo-teal-dark); color: #fff; }
.catalog-pagination button:disabled { opacity: .42; cursor: not-allowed; }
.catalog-page .hero,
.catalog-page .featured-wrap,
.catalog-page .how-wrap,
.catalog-page .locations { display: none; }
.catalog-page .categories { padding-top: 56px; padding-bottom: 36px; }
.catalog-page .products-section { padding-top: 30px; }
.catalog-page .catalog-more { display: none; }
.catalog-page .catalog-pagination[hidden] { display: none; }
.catalog-page .catalog-pagination:not([hidden]) { display: flex; }
.catalog-page .category-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.catalog-page .category-card { min-height: 125px; }
@media (max-width: 620px) {
  .catalog-more { margin-top: 24px; }
  .catalog-page .categories { padding-top: 36px; }
  .catalog-pagination { flex-wrap: wrap; }
}