/*!
 * MediShop by Way2Automation — design system.
 * Palette is lifted from the Android (Material 3) and iOS builds so the web,
 * Android and iOS demos look like one product.
 */

/* ============================================================== 1. Tokens */

:root {
  --primary: #001a40;
  --primary-hover: #002e69;
  --on-primary: #ffffff;
  --primary-container: #d8e2ff;
  --on-primary-container: #001a40;
  --accent: #0b57d0;

  --secondary: #535e78;
  --secondary-container: #f3f3fa;

  --bg: #fdfbff;
  --surface: #ffffff;
  --surface-variant: #f3f3fa;
  --surface-sunken: #f6f6fb;
  --on-surface: #1b1b1f;
  --on-surface-variant: #44474e;
  --outline: #74777f;
  --outline-variant: #e1e2ec;

  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --success: #0f7b3f;
  --success-container: #d7f5e3;
  --warning: #8a5a00;
  --warning-container: #ffecc7;
  --info: #0b57d0;
  --info-container: #dbe7ff;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-2: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .05);
  --shadow-3: 0 12px 24px -6px rgba(16, 24, 40, .12), 0 4px 8px -4px rgba(16, 24, 40, .06);

  --header-h: 72px;
  --container: 1200px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  color-scheme: light;
}

[data-theme="dark"] {
  --primary: #aec6ff;
  --primary-hover: #c9d9ff;
  --on-primary: #002e69;
  --primary-container: #00397a;
  --on-primary-container: #d8e2ff;
  --accent: #aec6ff;

  --secondary: #bbc6e4;
  --secondary-container: #3b465f;

  --bg: #131418;
  --surface: #1c1d22;
  --surface-variant: #262830;
  --surface-sunken: #16171b;
  --on-surface: #e3e2e6;
  --on-surface-variant: #c4c6d0;
  --outline: #8e9099;
  --outline-variant: #383a42;

  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #5b1512;
  --success: #7fe0a8;
  --success-container: #123b26;
  --warning: #ffcf78;
  --warning-container: #40300c;
  --info: #aec6ff;
  --info-container: #16305c;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 4px 10px rgba(0, 0, 0, .5);
  --shadow-3: 0 14px 28px rgba(0, 0, 0, .55);

  color-scheme: dark;
}

/* =========================================================== 2. Base/reset */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--on-surface);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { margin: 0 0 .4em; line-height: 1.22; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.175rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

hr { border: 0; border-top: 1px solid var(--outline-variant); margin: 24px 0; }

/* Author styles beat the UA sheet, so [hidden] needs restating for elements
   that set an explicit display below (badges, nav, dialogs, tab panels). */
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--primary); color: var(--on-primary);
  padding: 10px 18px; border-radius: var(--radius-pill); font-weight: 600;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* ============================================================ 3. Layout */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.container-narrow { max-width: 760px; }

.page { padding: 32px 0 72px; min-height: calc(100vh - var(--header-h) - 280px); }
.page-head { margin-bottom: 24px; }
.page-head h1 { margin-bottom: 6px; }
.page-head .lede { color: var(--on-surface-variant); font-size: 1rem; margin: 0; }

.row { display: flex; gap: 16px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.row-wrap { flex-wrap: wrap; }
.stack { display: grid; gap: 16px; }
.stack-sm { display: grid; gap: 10px; }
.grow { flex: 1 1 auto; min-width: 0; }
.text-muted { color: var(--on-surface-variant); }
.text-small { font-size: .8125rem; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
.nowrap { white-space: nowrap; }

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: start;
}
.sticky-side { position: sticky; top: calc(var(--header-h) + 24px); }

/* ============================================================= 4. Header */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--outline-variant);
}
.site-header .container {
  height: var(--header-h);
  display: flex; align-items: center; gap: 20px;
}

.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 12px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 800; font-size: 1.075rem; letter-spacing: -.02em; color: var(--on-surface); }
.brand-sub { font-size: .6875rem; color: var(--on-surface-variant); letter-spacing: .06em; text-transform: uppercase; }

.header-search { flex: 1 1 auto; max-width: 440px; position: relative; }
.header-search input {
  width: 100%; height: 44px;
  padding: 0 16px 0 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--outline-variant);
  background: var(--surface-variant);
  color: inherit; font: inherit;
}
.header-search input::placeholder { color: var(--on-surface-variant); }
.header-search input:focus { background: var(--surface); border-color: var(--accent); outline: none; }
.header-search .search-icon {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--on-surface-variant); pointer-events: none;
}

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  padding: 9px 14px; border-radius: var(--radius-pill);
  color: var(--on-surface-variant); font-weight: 600; font-size: .9375rem;
}
.main-nav a:hover { background: var(--surface-variant); color: var(--on-surface); text-decoration: none; }
.main-nav a[aria-current="page"] { background: var(--primary-container); color: var(--on-primary-container); }

.header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--surface-variant);
  color: var(--on-surface-variant);
  cursor: pointer;
}
.icon-btn:hover { background: var(--primary-container); color: var(--on-primary-container); }

.cart-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--error); color: #fff;
  font-size: .6875rem; font-weight: 700; line-height: 1;
  border: 2px solid var(--surface);
}

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: var(--primary-container); color: var(--on-primary-container);
  font-weight: 700; font-size: .875rem; letter-spacing: .02em;
  border: 1px solid var(--outline-variant); cursor: pointer;
}
.avatar-lg { width: 88px; height: 88px; font-size: 1.75rem; }

.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 10px);
  min-width: 240px; padding: 8px;
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  z-index: 70;
}
.menu[hidden] { display: none; }
.menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--outline-variant); margin-bottom: 8px; }
.menu-head strong { display: block; font-size: .9375rem; }
.menu-head span { font-size: .8125rem; color: var(--on-surface-variant); word-break: break-all; }
.menu a, .menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: var(--radius-xs);
  background: none; color: var(--on-surface); font: inherit; text-align: left; cursor: pointer;
}
.menu a:hover, .menu button:hover { background: var(--surface-variant); text-decoration: none; }
.menu .menu-danger { color: var(--error); }

.nav-toggle { display: none; }

/* ============================================================= 5. Footer */

.site-footer {
  border-top: 1px solid var(--outline-variant);
  background: var(--surface-variant);
  padding: 44px 0 28px;
  font-size: .9375rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 32px;
}
.site-footer h4 { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--on-surface-variant); margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { color: var(--on-surface-variant); }
.site-footer a:hover { color: var(--on-surface); }
.footer-bottom {
  border-top: 1px solid var(--outline-variant);
  padding-top: 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  color: var(--on-surface-variant); font-size: .875rem;
}

/* ============================================================ 6. Buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font: inherit; font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }

.btn-tonal { background: var(--primary-container); color: var(--on-primary-container); }
.btn-tonal:hover:not(:disabled) { background: color-mix(in srgb, var(--primary-container) 80%, var(--primary)); }

.btn-outline { background: transparent; color: var(--on-surface); border-color: var(--outline-variant); }
.btn-outline:hover:not(:disabled) { background: var(--surface-variant); border-color: var(--outline); }

.btn-ghost { background: transparent; color: var(--accent); padding: 0 12px; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-variant); }

.btn-danger { background: transparent; color: var(--error); border-color: var(--error); }
.btn-danger:hover:not(:disabled) { background: var(--error-container); }

.btn-block { width: 100%; }
.btn-lg { min-height: 54px; padding: 0 30px; font-size: 1rem; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: .875rem; }

.btn-link {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--accent); cursor: pointer; text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }

/* ============================================================== 7. Forms */

.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field > label { font-weight: 600; font-size: .875rem; color: var(--on-surface); }
.field .hint { font-size: .8125rem; color: var(--on-surface-variant); }

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--outline-variant);
  background: var(--surface);
  color: var(--on-surface);
  font: inherit;
}
.textarea { min-height: 110px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--on-surface-variant) 75%, transparent); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--outline); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 15%, transparent);
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374777f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}

.input-group { position: relative; display: flex; }
.input-group .input { padding-right: 52px; }
.input-affix {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border: 0; border-radius: var(--radius-pill);
  background: none; color: var(--on-surface-variant); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.input-affix:hover { background: var(--surface-variant); }

.error-text {
  display: flex; align-items: center; gap: 6px;
  color: var(--error); font-size: .8125rem; font-weight: 500;
}
.error-text:empty { display: none; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .full { grid-column: 1 / -1; }

.checkbox, .radio {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer; font-size: .9375rem; user-select: none;
}
.checkbox input, .radio input {
  width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; flex: 0 0 auto;
}

.radio-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; border: 1px solid var(--outline-variant);
  border-radius: var(--radius); background: var(--surface); cursor: pointer;
}
.radio-card:hover { border-color: var(--outline); }
.radio-card:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--primary-container) 45%, var(--surface));
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.radio-card input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; flex: 0 0 auto; }
.radio-card .radio-body { flex: 1 1 auto; }
.radio-card strong { display: block; font-size: .9375rem; }
.radio-card span { font-size: .8125rem; color: var(--on-surface-variant); }

.switch { display: inline-flex; align-items: center; }
.switch input { position: absolute; opacity: 0; width: 52px; height: 30px; margin: 0; cursor: pointer; }
.switch .track {
  width: 52px; height: 30px; border-radius: var(--radius-pill);
  background: var(--outline-variant); position: relative;
  transition: background .18s ease; pointer-events: none;
}
.switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-1);
  transition: transform .18s ease;
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(22px); }
.switch input:focus-visible + .track { outline: 3px solid var(--accent); outline-offset: 2px; }

/* =============================================================== 8. Cards */

.card {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.card-pad { padding: 24px; }
.card-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--outline-variant);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-head h2, .card-head h3 { margin: 0; font-size: 1.0625rem; }
.card-body { padding: 24px; }
.card-foot { padding: 20px 24px; border-top: 1px solid var(--outline-variant); }

.section { margin-bottom: 44px; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.section-head h2 { margin: 0; font-size: 1.375rem; }
.section-head p { margin: 4px 0 0; color: var(--on-surface-variant); font-size: .9375rem; }

/* ============================================================== 9. Chips */

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--outline-variant);
  background: var(--surface);
  color: var(--on-surface-variant);
  font: inherit; font-size: .875rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--outline); color: var(--on-surface); }
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--primary-container); color: var(--on-primary-container);
  border-color: transparent;
}

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: var(--surface-variant); color: var(--on-surface-variant);
}
.badge-success { background: var(--success-container); color: var(--success); }
.badge-warning { background: var(--warning-container); color: var(--warning); }
.badge-info { background: var(--info-container); color: var(--info); }
.badge-error { background: var(--error-container); color: var(--error); }
.badge-rx { background: var(--warning-container); color: var(--warning); }

/* ======================================================= 10. Product grid */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
.product-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
}
.product-rail > * { scroll-snap-align: start; }

.product-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.product-card:hover { box-shadow: var(--shadow-3); transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 35%, var(--outline-variant)); }
.product-card .thumb { position: relative; background: var(--surface-variant); aspect-ratio: 1 / 1; }
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-flags { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.product-fav {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: var(--radius-pill);
  border: 0; background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--on-surface-variant); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.product-fav[aria-pressed="true"] { color: var(--error); }

.product-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.product-cat { font-size: .6875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--on-surface-variant); }
.product-name { font-size: .9375rem; font-weight: 700; line-height: 1.35; margin: 0; }
.product-name a { color: inherit; }
.product-name a:hover { color: var(--accent); text-decoration: none; }
.product-form { font-size: .8125rem; color: var(--on-surface-variant); }
.product-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 8px; }
.price { font-size: 1.125rem; font-weight: 800; color: var(--on-surface); letter-spacing: -.02em; }
.price-old { font-size: .8125rem; color: var(--outline); text-decoration: line-through; }
.product-foot { padding: 0 16px 16px; }

.rating { display: inline-flex; align-items: center; gap: 5px; font-size: .8125rem; color: var(--on-surface-variant); }
.stars { display: inline-flex; gap: 1px; color: #f2a600; }

/* ======================================================== 11. Empty/skeleton */

.empty-state {
  text-align: center; padding: 64px 24px;
  border: 1px dashed var(--outline-variant); border-radius: var(--radius-lg);
  background: var(--surface);
}
.empty-state .empty-icon {
  width: 72px; height: 72px; margin: 0 auto 18px;
  display: grid; place-items: center; border-radius: var(--radius-pill);
  background: var(--surface-variant); color: var(--on-surface-variant);
}
.empty-state h3 { margin-bottom: 6px; }
.empty-state p { color: var(--on-surface-variant); margin-bottom: 20px; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-variant) 25%, color-mix(in srgb, var(--surface-variant) 55%, var(--surface)) 37%, var(--surface-variant) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.skeleton-card { height: 340px; border-radius: var(--radius-lg); }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================ 12. Toasts */

.toast-region {
  position: fixed; right: 24px; bottom: 24px; z-index: 200;
  display: grid; gap: 10px; width: min(360px, calc(100vw - 48px));
}
.toast {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-left: 4px solid var(--accent);
  box-shadow: var(--shadow-3);
  animation: toast-in .22s ease;
}
.toast-success { border-left-color: var(--success); }
.toast-error { border-left-color: var(--error); }
.toast-title { font-weight: 700; font-size: .9375rem; }
.toast-msg { font-size: .875rem; color: var(--on-surface-variant); }
.toast-close { border: 0; background: none; color: var(--on-surface-variant); cursor: pointer; padding: 2px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--radius);
  background: var(--info-container); color: var(--on-surface);
  border: 1px solid transparent; font-size: .9375rem;
}
.alert-error { background: var(--error-container); color: var(--error); font-weight: 500; }
.alert-success { background: var(--success-container); color: var(--success); }
.alert-warning { background: var(--warning-container); color: var(--warning); }

/* ============================================================ 13. Dialogs */

dialog {
  border: 0; padding: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--on-surface);
  box-shadow: var(--shadow-3);
  width: min(520px, calc(100vw - 32px));
  max-height: 88vh;
}
dialog::backdrop { background: rgba(9, 12, 24, .55); backdrop-filter: blur(2px); }
.dialog-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; border-bottom: 1px solid var(--outline-variant);
}
.dialog-head h2 { margin: 0; font-size: 1.125rem; }
.dialog-body { padding: 24px; overflow-y: auto; }
.dialog-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 24px; border-top: 1px solid var(--outline-variant);
}

/* ============================================================= 14. Tables */

.data-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.data-table caption { text-align: left; padding-bottom: 12px; color: var(--on-surface-variant); font-size: .875rem; }
.data-table th {
  text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--on-surface-variant); font-weight: 700;
  padding: 0 12px 12px; border-bottom: 1px solid var(--outline-variant);
}
.data-table td { padding: 16px 12px; border-bottom: 1px solid var(--outline-variant); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

.summary-line { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: .9375rem; color: var(--on-surface-variant); }
.summary-line strong { color: var(--on-surface); font-weight: 600; }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; margin-top: 12px; border-top: 1px solid var(--outline-variant); }
.summary-total dt { font-size: 1.0625rem; font-weight: 700; }
.summary-total dd { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--primary); letter-spacing: -.02em; }
[data-theme="dark"] .summary-total dd { color: var(--accent); }

/* ======================================================== 15. Qty stepper */

.qty {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--outline-variant); border-radius: var(--radius-pill);
  background: var(--surface); padding: 3px;
}
.qty button {
  width: 34px; height: 34px; border: 0; border-radius: var(--radius-pill);
  background: var(--surface-variant); color: var(--on-surface);
  font-size: 1.125rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.qty button:hover:not(:disabled) { background: var(--primary-container); color: var(--on-primary-container); }
.qty button:disabled { opacity: .4; cursor: not-allowed; }
.qty input {
  width: 48px; height: 34px; border: 0; background: none; color: inherit;
  text-align: center; font: inherit; font-weight: 700; appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* ========================================================= 16. Breadcrumb */

.breadcrumb { margin-bottom: 20px; font-size: .875rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.breadcrumb li { display: flex; align-items: center; gap: 8px; color: var(--on-surface-variant); }
.breadcrumb li + li::before { content: "/"; color: var(--outline); }
.breadcrumb a { color: var(--on-surface-variant); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current="page"] { color: var(--on-surface); font-weight: 600; }

/* ============================================================== 17. Steps */

.steps { display: flex; gap: 8px; align-items: center; margin-bottom: 28px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--on-surface-variant); }
.step .step-num {
  width: 28px; height: 28px; border-radius: var(--radius-pill);
  display: grid; place-items: center; font-weight: 700; font-size: .8125rem;
  background: var(--surface-variant); color: var(--on-surface-variant);
}
.step[aria-current="step"] { color: var(--on-surface); font-weight: 700; }
.step[aria-current="step"] .step-num { background: var(--primary); color: var(--on-primary); }
.step.is-done .step-num { background: var(--success-container); color: var(--success); }
.step-sep { flex: 0 0 32px; height: 2px; background: var(--outline-variant); border-radius: 2px; }

/* ============================================================== 18. Tabs */

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--outline-variant); margin-bottom: 20px; overflow-x: auto; }
.tab {
  border: 0; background: none; font: inherit; font-weight: 600;
  padding: 12px 18px; cursor: pointer; color: var(--on-surface-variant);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab:hover { color: var(--on-surface); }
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel[hidden] { display: none; }

/* ============================================================== 19. Auth */

.auth-shell { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.auth-aside {
  background: var(--primary);
  color: #fff;
  padding: 56px 56px 48px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.auth-aside::after {
  content: ""; position: absolute; right: -140px; bottom: -160px;
  width: 420px; height: 420px; border-radius: 50%;
  background: rgba(174, 198, 255, .14);
}
.auth-aside .brand-name, .auth-aside .brand-sub { color: #fff; }
.auth-aside .brand-sub { opacity: .7; }
.auth-pitch { position: relative; z-index: 1; max-width: 420px; }
.auth-pitch h2 { font-size: 2rem; color: #fff; margin-bottom: 14px; }
.auth-pitch p { color: rgba(255, 255, 255, .78); font-size: 1.0625rem; }
.auth-points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.auth-points li { display: flex; gap: 12px; align-items: flex-start; color: rgba(255, 255, 255, .86); font-size: .9375rem; }
.auth-points .tick {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); display: grid; place-items: center; color: #fff;
}
.auth-foot { position: relative; z-index: 1; color: rgba(255, 255, 255, .6); font-size: .8125rem; }

.auth-main { display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: var(--bg); }
.auth-card { width: 100%; max-width: 440px; }
.auth-card h1 { font-size: 1.75rem; margin-bottom: 6px; }
.auth-card .lede { color: var(--on-surface-variant); margin-bottom: 28px; }

.divider-text {
  display: flex; align-items: center; gap: 16px;
  margin: 28px 0; color: var(--on-surface-variant);
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--outline-variant); }

.credentials-note {
  background: var(--primary-container); color: var(--on-primary-container);
  border-radius: var(--radius); padding: 14px 16px; font-size: .875rem;
  display: grid; gap: 4px;
}
.credentials-note strong { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; }
.credentials-note code {
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  background: color-mix(in srgb, var(--on-primary-container) 12%, transparent);
  padding: 1px 6px; border-radius: 5px; font-size: .8125rem;
}

/* ============================================================ 20. Splash */

.splash {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--bg); text-align: center; padding: 24px;
}
.splash-logo {
  width: 112px; height: 112px; border-radius: 32px; margin: 0 auto 24px;
  display: grid; place-items: center; background: var(--primary-container);
  animation: pulse 1.6s ease-in-out infinite;
}
.splash h1 { font-size: 2.5rem; color: var(--primary); margin-bottom: 2px; }
[data-theme="dark"] .splash h1 { color: var(--accent); }
.splash .tagline { color: var(--on-surface-variant); font-size: 1.125rem; margin-bottom: 40px; }
.splash-status { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--on-surface-variant); }
.splash-status .label { font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; }
@keyframes pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* =============================================================== 21. Hero */

.hero {
  background: linear-gradient(135deg, var(--primary) 0%, #002e69 100%);
  color: #fff; border-radius: var(--radius-xl);
  padding: 44px; margin-bottom: 40px;
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; align-items: center;
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -110px; top: -110px;
  width: 360px; height: 360px; border-radius: 50%; background: rgba(174, 198, 255, .12);
}
.hero-copy { position: relative; z-index: 1; }
.hero .eyebrow { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-bottom: 10px; }
.hero h1 { color: #fff; font-size: 2.25rem; margin-bottom: 12px; }
.hero p { color: rgba(255, 255, 255, .8); font-size: 1.0625rem; max-width: 46ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.hero .btn-primary { background: #fff; color: var(--primary); }
.hero .btn-primary:hover { background: #e9eefc; }
.hero .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .45); }
.hero .btn-outline:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.hero-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.hero-stat { background: rgba(255, 255, 255, .1); border-radius: var(--radius); padding: 16px; }
.hero-stat .n { font-size: 1.5rem; font-weight: 800; color: #fff; }
.hero-stat .l { font-size: .8125rem; color: rgba(255, 255, 255, .72); }

/* ========================================================== 22. Category */

.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.category-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 20px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--outline-variant);
  color: inherit; transition: transform .16s ease, box-shadow .16s ease;
}
.category-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); text-decoration: none; }
.category-tile .cat-icon {
  width: 46px; height: 46px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--primary-container); color: var(--on-primary-container);
}
.category-tile strong { font-size: .9375rem; }
.category-tile span { font-size: .8125rem; color: var(--on-surface-variant); }

.promo-banner {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  background: var(--primary-container); color: var(--on-primary-container);
  border-radius: var(--radius-xl); padding: 28px 32px;
}
.promo-banner .eyebrow { font-size: .8125rem; opacity: .8; }
.promo-banner h3 { font-size: 1.5rem; margin: 4px 0 14px; }

/* ============================================================ 23. Detail */

.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.detail-gallery {
  background: var(--surface-variant); border-radius: var(--radius-xl);
  padding: 28px; border: 1px solid var(--outline-variant);
}
.detail-gallery img { width: 100%; border-radius: var(--radius-lg); }
.detail-title { font-size: 1.875rem; margin-bottom: 8px; }
.detail-price { font-size: 2.25rem; font-weight: 800; color: var(--primary); letter-spacing: -.03em; }
[data-theme="dark"] .detail-price { color: var(--accent); }
.detail-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.spec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.spec-list div { background: var(--surface-variant); border-radius: var(--radius); padding: 12px 14px; }
.spec-list dt { font-size: .6875rem; text-transform: uppercase; letter-spacing: .07em; color: var(--on-surface-variant); font-weight: 700; }
.spec-list dd { margin: 3px 0 0; font-weight: 600; font-size: .9375rem; }
.safety-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.safety-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; }
.safety-list .dot { color: var(--error); font-weight: 800; line-height: 1.4; }

/* ============================================================ 24. Orders */

.order-card {
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
  background: var(--surface); border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg); padding: 20px 24px;
}
.order-card:hover { border-color: var(--outline); }
.order-id { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-variant); font-weight: 700; }
.order-items { color: var(--on-surface-variant); font-size: .9375rem; margin: 4px 0 0; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding-bottom: 22px; position: relative; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: 13px; top: 26px; bottom: 0; width: 2px; background: var(--outline-variant);
}
.timeline li:last-child::before { display: none; }
.timeline .dot {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-variant); color: var(--on-surface-variant); z-index: 1;
}
.timeline li.is-done .dot { background: var(--success-container); color: var(--success); }
.timeline strong { display: block; font-size: .9375rem; }
.timeline span { font-size: .8125rem; color: var(--on-surface-variant); }

/* ============================================================ 25. Profile */

.profile-hero {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 28px; border-radius: var(--radius-xl);
  background: var(--primary-container); color: var(--on-primary-container);
}
.profile-hero .avatar { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list li + li { border-top: 1px solid var(--outline-variant); }
.menu-list a, .menu-list button {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 18px 24px; border: 0; background: none; color: var(--on-surface);
  font: inherit; text-align: left; cursor: pointer;
}
.menu-list a:hover, .menu-list button:hover { background: var(--surface-variant); text-decoration: none; }
.menu-list .m-icon {
  width: 40px; height: 40px; border-radius: var(--radius-pill); flex: 0 0 auto;
  display: grid; place-items: center; background: var(--surface-variant); color: var(--accent);
}
.menu-list .m-body { flex: 1 1 auto; }
.menu-list .m-body strong { display: block; font-size: .9375rem; font-weight: 600; }
.menu-list .m-body span { font-size: .8125rem; color: var(--on-surface-variant); }

.setting-row {
  display: flex; align-items: center; gap: 16px; padding: 20px 24px;
}
.setting-row + .setting-row { border-top: 1px solid var(--outline-variant); }
.setting-row .m-icon {
  width: 40px; height: 40px; border-radius: var(--radius-pill); flex: 0 0 auto;
  display: grid; place-items: center; background: var(--surface-variant); color: var(--accent);
}
.setting-row .setting-body { flex: 1 1 auto; }
.setting-row strong { display: block; font-size: .9375rem; }
.setting-row span { font-size: .8125rem; color: var(--on-surface-variant); }

.address-card {
  border: 1px solid var(--outline-variant); border-radius: var(--radius-lg);
  padding: 20px; background: var(--surface); position: relative;
}
.address-card.is-default { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }

/* Prescription uploads & saved payment methods */

.file-input {
  padding: 10px 12px; cursor: pointer;
  background: var(--surface-variant);
}
.file-input::file-selector-button {
  margin-right: 12px; padding: 7px 14px; cursor: pointer;
  border: 1px solid var(--outline-variant); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--on-surface);
  font: inherit; font-weight: 600; font-size: .8125rem;
}
.file-input::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }

.rx-preview {
  display: block; width: 100%; max-height: 320px; margin: 0;
  border: 1px solid var(--outline-variant); border-radius: var(--radius);
  background: var(--surface-variant);
}
img.rx-preview { object-fit: contain; }
.rx-preview-text {
  padding: 14px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem;
}

/* ========================================================== 26. Hydration */

.hydration-ring { display: grid; place-items: center; position: relative; width: 220px; height: 220px; margin: 0 auto; }
.hydration-ring svg { transform: rotate(-90deg); position: absolute; inset: 0; }
.hydration-ring .ring-track { fill: none; stroke: var(--surface-variant); stroke-width: 16; }
.hydration-ring .ring-fill { fill: none; stroke: var(--accent); stroke-width: 16; stroke-linecap: round; transition: stroke-dashoffset .4s ease; }
.hydration-ring .ring-label { position: relative; text-align: center; }
.hydration-ring .ring-label .n { font-size: 2.5rem; font-weight: 800; line-height: 1; color: var(--primary); }
[data-theme="dark"] .hydration-ring .ring-label .n { color: var(--accent); }
.hydration-ring .ring-label .l { font-size: .875rem; color: var(--on-surface-variant); }
.glass-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.glass { width: 26px; height: 34px; border-radius: 4px 4px 10px 10px; background: var(--surface-variant); border: 1px solid var(--outline-variant); }
.glass.is-full { background: var(--accent); border-color: var(--accent); }

/* ========================================================= 27. Responsive */

@media (max-width: 1080px) {
  .split-layout { grid-template-columns: 1fr; }
  .sticky-side { position: static; }
  .detail-layout { grid-template-columns: 1fr; gap: 28px; }
  .hero { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .header-search { display: none; }
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }
  .container { padding: 0 16px; }
  .page { padding: 22px 0 56px; }
  h1 { font-size: 1.625rem; }
  .hero { padding: 28px; }
  .hero h1 { font-size: 1.75rem; }
  .form-grid { grid-template-columns: 1fr; }
  .spec-list { grid-template-columns: 1fr; }
  .brand-text { display: none; }

  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: var(--radius-pill);
    border: 1px solid var(--outline-variant); background: var(--surface); color: inherit; cursor: pointer;
  }
  .main-nav {
    position: absolute; left: 0; right: 0; top: var(--header-h);
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border-bottom: 1px solid var(--outline-variant);
    padding: 10px 16px 16px; box-shadow: var(--shadow-2);
  }
  .main-nav[hidden] { display: none; }
  .order-card { grid-template-columns: 1fr; }
  .promo-banner { grid-template-columns: 1fr; }
  .toast-region { right: 16px; left: 16px; bottom: 16px; width: auto; }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
}

@media print {
  .site-header, .site-footer, .toast-region, .no-print { display: none !important; }
  body { background: #fff; }
}