:root {
  color-scheme: light;
  --navy: #08234a;
  --blue: #075ca8;
  --blue-2: #0d77c7;
  --cyan: #13a8c7;
  --ink: #13233a;
  --muted: #627086;
  --line: #dbe4ef;
  --soft: #eff6fb;
  --surface: #ffffff;
  --danger: #b42318;
  --shadow: 0 18px 45px rgba(8, 35, 74, 0.1);
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: linear-gradient(180deg, #f6fbff 0, #fff 460px);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
}
body.auth-pending > * { visibility: hidden; }
body.auth-pending::before {
  content: "Checking secure access…";
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  visibility: visible;
  color: #52657d;
  background: #f5f9fd;
  font: 700 1rem/1.4 var(--font-ui);
}
button, input, select { font: inherit; }
button, select { cursor: pointer; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #0d77c7;
  outline-offset: 3px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 12px clamp(20px, 6vw, 88px);
  color: white;
  background: rgba(5, 35, 74, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px 13px 13px 4px;
  background: linear-gradient(135deg, #27bba8, #0b7bc2);
  font: 800 1.45rem/1 var(--font-display);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32);
}
.brand strong, .brand small { display: block; }
.brand strong { font: 700 1rem/1.2 var(--font-display); letter-spacing: .01em; }
.brand small { margin-top: 2px; color: #bcd1e8; font-size: .76rem; }
.source-link {
  color: white;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: .9rem;
}
.source-link:hover { background: rgba(255,255,255,.1); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.site-nav { display: flex; align-items: center; gap: 5px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.08); }
.site-nav a, .nav-auth-button { padding: 7px 12px; color: #c9d8e9; border: 0; border-radius: 999px; background: transparent; text-decoration: none; font: 700 .88rem/1.2 var(--font-ui); cursor: pointer; }
.site-nav a:hover, .site-nav a.active, .nav-auth-button:hover { color: var(--navy); background: white; }
.site-nav [data-auth-ready="false"] { visibility: hidden; }
.nav-user { max-width: 130px; overflow: hidden; padding: 7px 8px 7px 12px; color: white; font-size: .76rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

main { width: min(1440px, 100%); margin: 0 auto; padding: 0 clamp(16px, 5vw, 72px) 40px; }
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: end;
  padding: clamp(44px, 6vw, 80px) 0 36px;
}
.eyebrow { margin: 0 0 8px; color: var(--blue); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
h1 { margin: 0; color: var(--navy); font: 800 clamp(2rem, 5vw, 4.5rem)/1.02 var(--font-display); letter-spacing: -.045em; }
.intro-copy { max-width: 700px; margin: 16px 0 0; color: var(--muted); font-size: clamp(1rem, 2vw, 1.18rem); }
.summary { display: grid; grid-template-columns: repeat(3, minmax(104px, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.86); box-shadow: 0 10px 30px rgba(8,35,74,.05); }
.summary div { padding: 18px 20px; text-align: center; }
.summary div + div { border-left: 1px solid var(--line); }
.summary strong, .summary span { display: block; }
.summary strong { color: var(--blue); font: 800 1.45rem/1.2 var(--font-display); }
.summary span { margin-top: 3px; color: var(--muted); font-size: .78rem; }

.directory { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.view-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; background: #f4f7fb; border-bottom: 1px solid var(--line); }
.tab { min-height: 58px; padding: 12px 20px; color: #4a5a71; background: transparent; border: 0; border-radius: 15px; font: 700 1rem/1.2 var(--font-display); }
.tab.active { color: white; background: linear-gradient(135deg, var(--blue), #0e4c91); box-shadow: 0 10px 25px rgba(7,92,168,.22); }
.list-update-banner { display: flex; align-items: center; gap: 10px; margin: 18px 24px 0; padding: 12px 14px; color: #075f53; background: #eaf9f5; border: 1px solid #c6ebe1; border-radius: 12px; }
.list-update-banner > span { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; color: white; background: #0a8a73; border-radius: 50%; font-size: .78rem; font-weight: 800; }
.list-update-banner strong { font-size: .9rem; }
.list-update-banner a { margin-left: auto; color: #076f61; font-size: .8rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.list-update-banner a:hover { text-decoration: underline; }
.controls { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(220px, .48fr) auto; gap: 16px; align-items: end; padding: 26px 26px 16px; }
.controls label { display: block; margin-bottom: 7px; color: #32435c; font-weight: 700; font-size: .88rem; }
.search-box { position: relative; }
.search-box svg { position: absolute; top: 50%; left: 15px; width: 21px; transform: translateY(-50%); fill: none; stroke: #76859a; stroke-width: 2; stroke-linecap: round; }
input, select { width: 100%; min-height: 50px; color: var(--ink); background: #f8fafc; border: 1px solid #cbd7e5; border-radius: 12px; outline: none; }
input { padding: 12px 72px 12px 46px; }
select { padding: 11px 40px 11px 14px; }
input:focus, select:focus { border-color: var(--blue-2); box-shadow: 0 0 0 3px rgba(13,119,199,.14); }
#clear-search { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); padding: 7px 9px; color: var(--blue); background: transparent; border: 0; font-size: .84rem; font-weight: 700; }
.download-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 10px 18px; color: white; background: var(--danger); border: 0; border-radius: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 18px rgba(180,35,24,.16); }
.download-button:hover { background: #912018; }
.download-button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.status-row { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 0 26px 16px; color: var(--muted); }
.status-row p { margin: 0; }
#result-status { font-weight: 600; }
.note { display: flex; align-items: center; gap: 7px; font-size: .87rem; }
.note span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: white; background: #d94c43; font-size: .74rem; font-weight: 700; }
.table-shell { overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
table { width: 100%; min-width: 920px; border-collapse: collapse; }
th { padding: 15px 20px; color: #173767; background: #eaf2ff; text-align: left; font-size: .84rem; letter-spacing: .015em; }
td { padding: 17px 20px; border-top: 1px solid #e8edf4; vertical-align: top; }
tbody tr:hover { background: #f8fbff; }
td:nth-child(1), td:nth-child(2), td:nth-child(4), td:nth-child(5) { white-space: nowrap; }
td:nth-child(3) { width: 38%; font-weight: 600; }
.product-name-link { color: #0b4f91; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.product-name-link:hover { color: #073b6c; text-decoration-thickness: 2px; }
.mrp { font-variant-numeric: tabular-nums; font-weight: 700; }
.pending { display: inline-block; color: #9a3412; background: #fff1e8; border-radius: 999px; padding: 3px 8px; font-size: .78rem; font-weight: 700; }
.empty-state { padding: 56px 20px; text-align: center; }
.empty-state div { color: var(--blue); font-size: 3rem; line-height: 1; }
.empty-state h2 { margin: 14px 0 6px; font: 700 1.3rem/1.2 var(--font-display); }
.empty-state p { margin: 0 0 18px; color: var(--muted); }
.empty-state button { padding: 9px 14px; color: white; background: var(--blue); border: 0; border-radius: 10px; font-weight: 700; }
.pagination { display: flex; align-items: center; gap: 12px; padding: 18px 26px; color: var(--muted); font-size: .9rem; }
.pagination label { font-weight: 600; }
.pagination select { width: auto; min-height: 40px; }
.page-jump { display: flex; align-items: center; gap: 7px; }
.page-jump input { width: 72px; min-height: 40px; padding: 7px 9px; color: var(--ink); background: white; border: 1px solid #bfd0e2; border-radius: 9px; text-align: center; font: inherit; font-weight: 700; }
.page-jump input:focus { outline: 3px solid rgba(20,128,210,.14); border-color: var(--blue); }
.page-jump span { white-space: nowrap; }
.page-jump button { min-height: 40px; padding: 8px 14px; color: white; background: var(--blue); border: 1px solid var(--blue); border-radius: 9px; font-weight: 700; }
.page-jump button:hover { background: #064d8d; }
#page-range { margin-left: auto; }
.page-buttons { display: flex; gap: 8px; }
.page-buttons button { min-height: 40px; padding: 8px 13px; color: var(--blue); background: white; border: 1px solid #bfd0e2; border-radius: 9px; font-weight: 700; }
.page-buttons button:disabled { cursor: not-allowed; opacity: .45; }
.disclaimer { max-width: 920px; margin: 20px auto 0; color: #68758a; text-align: center; font-size: .82rem; }
.back-to-top { position: fixed; right: 24px; bottom: 24px; z-index: 5; width: 48px; height: 48px; color: white; background: var(--blue); border: 0; border-radius: 50%; box-shadow: 0 10px 24px rgba(7,92,168,.3); font-size: 1.35rem; }

@media (max-width: 980px) {
  .intro { grid-template-columns: 1fr; }
  .summary { width: min(100%, 520px); }
  .controls { grid-template-columns: 1fr 1fr; }
  .download-button { grid-column: 2; }
}

@media (max-width: 700px) {
  .site-header { min-height: 68px; padding: 10px 16px; }
  .source-link { padding: 8px 10px; font-size: .78rem; }
  .source-link { display: none; }
  .header-actions { gap: 6px; }
  .site-nav a, .nav-auth-button { padding: 7px 9px; font-size: .76rem; }
  .nav-user { display: none; }
  .brand small { display: none; }
  main { padding: 0 12px 32px; }
  .intro { gap: 24px; padding: 34px 4px 24px; }
  h1 { font-size: clamp(2rem, 11vw, 3.2rem); }
  .summary { grid-template-columns: repeat(3, 1fr); }
  .summary div { padding: 14px 8px; }
  .summary strong { font-size: 1.18rem; }
  .directory { border-radius: 18px; }
  .list-update-banner { align-items: flex-start; flex-wrap: wrap; margin: 14px 16px 0; }
  .list-update-banner a { width: 100%; margin-left: 36px; white-space: normal; }
  .view-tabs { grid-template-columns: 1fr; }
  .tab { min-height: 48px; }
  .controls { grid-template-columns: 1fr; padding: 20px 16px 14px; }
  .download-button { grid-column: auto; }
  .status-row { display: block; padding: 0 16px 14px; }
  .note { margin-top: 7px !important; }
  .table-shell { overflow: visible; }
  table, thead, tbody, tr, th, td { display: block; }
  table { min-width: 0; }
  thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  tbody { padding: 0 12px; background: #f7faff; }
  tbody tr { margin: 10px 0; padding: 15px 16px; background: white; border: 1px solid #dfe8f3; border-radius: 14px; box-shadow: 0 5px 16px rgba(8,35,74,.05); }
  td { display: grid; grid-template-columns: 98px 1fr; gap: 12px; width: auto !important; padding: 6px 0; border: 0; white-space: normal !important; }
  td::before { content: attr(data-label); color: var(--muted); font-size: .78rem; font-weight: 700; }
  td:nth-child(3) { font-weight: 600; }
  .pagination { flex-wrap: wrap; padding: 15px 16px; }
  .page-jump { margin-left: auto; }
  #page-range { order: 3; width: 100%; margin: 0; }
  .page-buttons { order: 4; margin-left: auto; }
}

/* Create order */
.order-main { padding-bottom: 56px; }
.order-intro { align-items: center; }
.order-intro h1 { max-width: 760px; }
.order-badge { display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; border: 1px solid #cfe0ef; border-radius: 16px; color: var(--blue); background: white; box-shadow: 0 10px 26px rgba(8,35,74,.06); font-weight: 700; }
.order-badge span { display: grid; place-items: center; width: 30px; height: 30px; color: white; background: var(--blue); border-radius: 9px; }
.order-layout { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(330px, .78fr); gap: 24px; align-items: start; }
.order-card { background: white; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.order-card-header { padding: 24px 24px 18px; border-bottom: 1px solid var(--line); }
.order-card-header h2 { margin: 0; color: var(--navy); font: 800 1.22rem/1.25 var(--font-display); }
.order-card-header p { margin: 6px 0 0; color: var(--muted); font-size: .9rem; }
.picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.picker-heading label { margin: 0; }
.picker-actions { display: flex; align-items: center; gap: 8px; }
.upload-order-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 7px 12px; color: var(--blue); background: #eef7ff; border: 1px solid #b9d7ef; border-radius: 10px; font-weight: 800; white-space: nowrap; }
.upload-order-button:hover { background: #dff0ff; }
.upload-order-button:disabled { cursor: wait; opacity: .55; }
.sample-order-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 7px 12px; color: #34445c; background: white; border: 1px solid #c8d5e4; border-radius: 10px; font-weight: 800; white-space: nowrap; }
.sample-order-button:hover { color: var(--blue); background: #f5f9fd; border-color: #9fc5e2; }
.upload-order-button svg, .sample-order-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.upload-help { margin: 10px 0 0; color: var(--muted); font-size: .78rem; }
.upload-message { margin: 10px 0 0; padding: 9px 11px; color: #075985; background: #e8f6ff; border-radius: 9px; font-size: .82rem; }
.upload-message.error { color: #991b1b; background: #fff1f1; }
.product-picker { position: relative; padding: 22px 24px 10px; }
.product-picker label, .field label { display: block; margin-bottom: 7px; color: #34455c; font-weight: 700; font-size: .88rem; }
.picker-input { position: relative; }
.picker-input svg { position: absolute; top: 50%; left: 15px; width: 20px; transform: translateY(-50%); fill: none; stroke: #75849a; stroke-width: 2; }
.picker-input input { padding-left: 44px; }
.product-results { position: absolute; z-index: 8; top: calc(100% - 4px); left: 24px; right: 24px; max-height: 380px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; margin: 0; padding: 7px; list-style: none; background: white; border: 1px solid #cbd9e8; border-radius: 14px; box-shadow: 0 18px 42px rgba(8,35,74,.18); }
.product-results li + li { border-top: 1px solid #edf1f6; }
.product-result { display: grid; grid-template-columns: 1fr auto; gap: 12px; width: 100%; padding: 12px; color: var(--ink); background: transparent; border: 0; text-align: left; cursor: pointer; }
.product-result:hover, .product-result[aria-selected="true"] { background: #eef6ff; }
.product-result strong, .product-result small { display: block; }
.product-result strong { line-height: 1.35; }
.inline-drug-code, .drug-code-badge { display: inline-flex; align-items: center; width: max-content; padding: 3px 8px; color: #075ca8; background: #e7f3ff; border: 1px solid #c4e0f7; border-radius: 999px; font-family: var(--font-ui); font-size: .72rem; font-weight: 800; line-height: 1.2; vertical-align: middle; }
.inline-drug-code { margin-right: 6px; }
.product-result small { display: flex; flex-wrap: wrap; gap: 3px 14px; margin-top: 5px; color: var(--muted); }
.product-result small b { color: #40516a; font-weight: 700; }
.product-result .result-price { color: var(--blue); font-weight: 800; white-space: nowrap; }
.cart-list { padding: 8px 24px 22px; }
.cart-empty { padding: 38px 12px 46px; text-align: center; color: var(--muted); }
.cart-empty strong { display: block; margin-bottom: 5px; color: var(--ink); }
.cart-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid #e8edf4; }
.cart-item:last-child { border-bottom: 0; }
.cart-item h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; margin: 0; font-size: .98rem; line-height: 1.42; }
.cart-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 7px 0 0; color: var(--muted); font-size: .82rem; }
.cart-meta b { color: #40516a; font-weight: 700; }
.cart-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.qty-control { display: flex; align-items: center; border: 1px solid #c8d5e4; border-radius: 10px; overflow: hidden; }
.qty-control button { width: 34px; height: 34px; color: var(--blue); background: #f4f8fc; border: 0; font-size: 1.1rem; }
.qty-control span { min-width: 38px; text-align: center; font-weight: 800; }
.remove-item { color: var(--danger); background: transparent; border: 0; font-size: .79rem; font-weight: 700; }
.line-total { font-weight: 800; font-variant-numeric: tabular-nums; }
.order-management-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 24px 10px; }
.order-management-actions button { min-height: 44px; border-radius: 11px; font-weight: 800; }
.clear-order-button { color: var(--danger); background: #fff7f6; border: 1px solid #f1bbb5; }
.clear-order-button:hover { background: #ffebe8; }
.save-order-button { color: white; background: #15803d; border: 1px solid #15803d; }
.save-order-button:hover { background: #116b34; }
.order-form { padding: 22px 24px 10px; }
.field { margin-bottom: 16px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field input, .field textarea { width: 100%; color: var(--ink); background: #f8fafc; border: 1px solid #cbd7e5; border-radius: 11px; outline: none; }
.field input { min-height: 48px; padding: 11px 13px; }
.field textarea { min-height: 86px; padding: 11px 13px; resize: vertical; font: inherit; }
.field input:focus, .field textarea:focus { border-color: var(--blue-2); box-shadow: 0 0 0 3px rgba(13,119,199,.14); }
.order-summary { padding: 10px 24px 22px; }
.summary-line { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; color: var(--muted); }
.summary-line strong { color: var(--ink); }
.summary-line.total { margin-top: 6px; padding-top: 17px; color: var(--ink); border-top: 1px solid var(--line); font-size: 1.12rem; }
.summary-line.total strong { color: var(--blue); font: 800 1.35rem/1 var(--font-display); }
.order-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 24px 24px; }
.order-actions button { min-height: 48px; padding: 10px 14px; border-radius: 11px; font-weight: 800; }
.secondary-action { color: var(--blue); background: white; border: 1px solid #b8ccdf; }
.primary-action { color: white; background: var(--blue); border: 1px solid var(--blue); }
.primary-action:disabled, .secondary-action:disabled { cursor: not-allowed; opacity: .45; }
.save-order-button:disabled { cursor: not-allowed; opacity: .45; }
.order-message { margin: 0 24px 20px; padding: 11px 13px; color: #075985; background: #e8f6ff; border-radius: 10px; font-size: .86rem; }
.saved-orders { margin: 0 24px 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.saved-orders-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.saved-orders-header h3 { margin: 0; color: var(--navy); font: 800 1rem/1.25 var(--font-display); }
.saved-orders-header span { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; color: white; background: var(--blue); border-radius: 999px; font-weight: 800; font-size: .78rem; }
.saved-orders-list { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.saved-order-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid #e8edf4; }
.saved-order-item:last-child { border-bottom: 0; }
.saved-order-item strong, .saved-order-item small, .saved-order-item span { display: block; }
.saved-order-item strong { color: var(--ink); font-size: .9rem; line-height: 1.3; }
.saved-order-item small, .saved-order-item span { margin-top: 3px; color: var(--muted); font-size: .75rem; }
.saved-order-actions { display: flex; align-items: center; gap: 6px; }
.saved-order-actions button { min-height: 32px; padding: 6px 9px; border-radius: 8px; font-weight: 800; font-size: .74rem; }
.saved-order-actions button:first-child { color: var(--blue); background: #eef7ff; border: 1px solid #b9d7ef; }
.saved-order-actions button:last-child { color: var(--danger); background: #fff7f6; border: 1px solid #f1bbb5; }
.saved-orders-empty { margin: 0; padding: 12px; color: var(--muted); background: #f7f9fc; border-radius: 9px; text-align: center; font-size: .8rem; }
.print-order-sheet { display: none; }

@media (max-width: 900px) {
  .order-layout { grid-template-columns: 1fr; }
  .order-sidebar { order: -1; }
}

@media (max-width: 600px) {
  .order-badge { display: none; }
  .order-card { border-radius: 17px; }
  .order-card-header, .product-picker, .order-form, .order-summary, .order-management-actions { padding-left: 16px; padding-right: 16px; }
  .saved-orders { margin-left: 16px; margin-right: 16px; }
  .picker-heading { align-items: flex-start; flex-direction: column; }
  .picker-actions { width: 100%; flex-wrap: wrap; }
  .product-results { left: 16px; right: 16px; }
  .cart-list { padding-left: 16px; padding-right: 16px; }
  .field-grid { grid-template-columns: 1fr; gap: 0; }
  .order-actions { grid-template-columns: 1fr; padding-left: 16px; padding-right: 16px; }
  .cart-item { grid-template-columns: 1fr; }
  .cart-item-side { align-items: flex-start; }
}

/* Modern order workspace */
.order-page {
  background:
    radial-gradient(circle at 92% 8%, rgba(38, 191, 166, .10), transparent 24rem),
    linear-gradient(180deg, #eef5fb 0, #f8fbfd 440px, #f4f7fb 100%);
}
.order-page .site-header {
  background: rgba(6, 31, 66, .94);
  box-shadow: 0 10px 32px rgba(6, 31, 66, .16);
}
.order-main { width: min(1500px, 100%); padding-bottom: 64px; }
.order-intro {
  position: relative;
  isolation: isolate;
  min-height: 270px;
  margin-top: 28px;
  padding: clamp(28px, 4vw, 48px);
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 92% 18%, rgba(50, 211, 184, .34), transparent 17rem),
    linear-gradient(125deg, #061f42 0%, #0a4d86 64%, #087c91 100%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 30px;
  box-shadow: 0 26px 70px rgba(6, 39, 78, .2);
}
.order-intro::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -80px;
  bottom: -150px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(255,255,255,.035), 0 0 0 96px rgba(255,255,255,.025);
}
.order-hero-copy { max-width: 840px; }
.order-intro .eyebrow { color: #7be3d2; }
.order-intro h1 { max-width: none; color: white; font-size: clamp(2.35rem, 4.5vw, 4.2rem); }
.order-intro .intro-copy { max-width: 680px; margin-top: 12px; color: #d2e5f2; }
.order-flow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.order-flow span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px 7px 8px; color: #eaf7fb; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.13); border-radius: 999px; font-size: .78rem; font-weight: 700; }
.order-flow b { display: grid; place-items: center; width: 22px; height: 22px; color: #06355d; background: #82e6d5; border-radius: 50%; font-size: .7rem; }
.order-badge { min-width: 190px; padding: 14px 16px; color: white; background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.22); box-shadow: none; backdrop-filter: blur(12px); }
.order-badge span { flex: 0 0 auto; width: 42px; height: 42px; color: #06355d; background: #82e6d5; border-radius: 13px; font: 800 1.15rem/1 var(--font-display); }
.order-badge small, .order-badge strong { display: block; }
.order-badge small { color: #bcd8e8; font-size: .7rem; font-weight: 600; }
.order-badge strong { margin-top: 2px; font-size: .88rem; }
.order-layout { grid-template-columns: minmax(0, 1.48fr) minmax(360px, .72fr); gap: 22px; margin-top: 24px; }
.order-card { overflow: visible; border-color: rgba(154, 178, 202, .34); border-radius: 24px; box-shadow: 0 16px 50px rgba(17, 50, 81, .09); }
.order-card-header { display: flex; align-items: center; gap: 13px; padding: 20px 22px; background: linear-gradient(180deg, #fff, #fbfdff); border-radius: 24px 24px 0 0; }
.card-header-icon { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; color: #086bb7; background: #eaf5ff; border: 1px solid #cfe7fa; border-radius: 13px; }
.card-header-icon.mint { color: #087c69; background: #e7f8f3; border-color: #c7ece1; }
.card-header-icon svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.order-card-header h2 { font-size: 1.16rem; }
.order-card-header p { margin-top: 3px; }
.product-picker { margin: 18px 20px 8px; padding: 18px; background: #f7faff; border: 1px solid #e1eaf3; border-radius: 18px; }
.picker-heading { margin-bottom: 12px; }
.picker-input input { min-height: 56px; background: white; border-color: #c5d5e5; border-radius: 14px; box-shadow: 0 5px 16px rgba(20, 55, 90, .04); }
.picker-input input:focus { border-color: #0a75c2; box-shadow: 0 0 0 4px rgba(10,117,194,.12), 0 8px 20px rgba(20,55,90,.06); }
.sample-order-button, .upload-order-button { min-height: 42px; padding: 8px 13px; border-radius: 12px; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.upload-order-button { color: white; background: linear-gradient(135deg, #0874c7, #075aa5); border-color: transparent; box-shadow: 0 8px 18px rgba(7,92,168,.18); }
.upload-order-button:hover { background: linear-gradient(135deg, #0968ae, #064c8c); transform: translateY(-1px); }
.upload-order-button:disabled { color: #6f8398; background: #e8eef4; box-shadow: none; }
.sample-order-button:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(20,55,90,.08); }
.product-results { top: calc(100% - 1px); left: 20px; right: 20px; border-radius: 16px; box-shadow: 0 24px 55px rgba(10,39,71,.22); }
.cart-list { min-height: 270px; padding: 4px 22px 22px; }
.cart-empty { display: grid; justify-items: center; align-content: center; min-height: 250px; padding: 38px 20px; color: var(--muted); }
.cart-empty-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 15px; color: #0874c7; background: linear-gradient(145deg, #eaf6ff, #f8fcff); border: 1px solid #cce5f7; border-radius: 18px; box-shadow: 0 10px 24px rgba(7,92,168,.1); font: 500 2rem/1 var(--font-ui); }
.cart-empty-icon.error { color: var(--danger); background: #fff3f1; border-color: #f3c9c4; }
.cart-empty strong { margin: 0; color: var(--navy); font: 800 1.05rem/1.3 var(--font-display); }
.cart-empty small { max-width: 390px; margin-top: 7px; font-size: .83rem; line-height: 1.5; }
.cart-item { margin-top: 6px; padding: 17px 16px; background: #fff; border: 1px solid #e5ecf3; border-radius: 16px; transition: border-color .16s ease, box-shadow .16s ease; }
.cart-item:hover { border-color: #c9dced; box-shadow: 0 10px 26px rgba(17,50,81,.07); }
.order-sidebar { position: sticky; top: 96px; overflow: hidden; }
.order-form { padding: 20px 22px 8px; }
.field { margin-bottom: 14px; }
.field input, .field textarea { background: #fbfdff; border-color: #d2deea; border-radius: 12px; }
.field input { min-height: 46px; }
.field textarea { min-height: 78px; }
.order-summary { margin: 3px 22px 18px; padding: 12px 16px; background: linear-gradient(145deg, #f3f9ff, #f8fcff); border: 1px solid #dceaf5; border-radius: 16px; }
.summary-line { padding: 8px 0; }
.summary-line.total { margin-top: 4px; padding-top: 15px; }
.order-management-actions, .order-actions { gap: 9px; padding-left: 22px; padding-right: 22px; }
.order-management-actions button, .order-actions button { min-height: 46px; border-radius: 13px; transition: transform .16s ease, box-shadow .16s ease; }
.save-order-button { background: linear-gradient(135deg, #149157, #087b68); border-color: transparent; box-shadow: 0 8px 18px rgba(8,123,104,.16); }
.primary-action { background: linear-gradient(135deg, #0874c7, #075aa5); border-color: transparent; box-shadow: 0 8px 18px rgba(7,92,168,.18); }
.order-management-actions button:not(:disabled):hover, .order-actions button:not(:disabled):hover { transform: translateY(-1px); }
.saved-orders { margin: 2px 22px 22px; padding: 18px 16px 0; background: #fbfcfe; border: 1px solid #e4ebf2; border-radius: 16px; }
.saved-orders-header span { background: #e5f2ff; color: #0764ad; }
.saved-orders-empty { margin-bottom: 16px; background: #f1f5f9; }

@media (max-width: 980px) {
  .order-layout { grid-template-columns: 1fr; }
  .order-sidebar { position: static; order: 0; }
}

@media (max-width: 700px) {
  .order-main { padding: 0 12px 42px; }
  .order-intro { min-height: 0; margin-top: 14px; padding: 25px 20px; border-radius: 22px; }
  .order-intro h1 { font-size: clamp(2rem, 11vw, 3rem); }
  .order-flow { display: none; }
  .order-layout { margin-top: 14px; }
  .order-card-header { padding: 17px 16px; }
  .product-picker { margin: 14px 12px 6px; padding: 14px; }
  .picker-actions > button { flex: 1 1 auto; }
  .product-results { left: 12px; right: 12px; }
  .cart-list { min-height: 220px; padding-left: 12px; padding-right: 12px; }
  .cart-empty { min-height: 210px; }
  .order-summary { margin-left: 16px; margin-right: 16px; }
  .order-actions { padding-bottom: 18px; }
}

@media print {
  @page { size: A4 portrait; margin: 11mm; }
  html, body { margin: 0; padding: 0; background: white; }
  body { color: #17243a; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .site-header, .order-main { display: none !important; }
  .print-order-sheet { display: block !important; width: 100%; }
  .print-order-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 10px; border-bottom: 2px solid #075ca8; }
  .print-order-header p, .print-order-header h1 { margin: 0; }
  .print-order-header p { margin-bottom: 2px; color: #52647b; font-size: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
  .print-order-header h1 { color: #092d5b; font-size: 19pt; line-height: 1.15; }
  .print-order-date { text-align: right; }
  .print-order-date span, .print-customer-grid span, .print-notes span { display: block; margin-bottom: 3px; color: #607087; font-size: 7.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  .print-order-date strong { white-space: nowrap; }
  .print-customer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0; margin: 10px 0 12px; border: 1px solid #cbd6e2; border-radius: 6px; overflow: hidden; }
  .print-customer-grid div { min-height: 36px; padding: 7px 9px; border-right: 1px solid #cbd6e2; }
  .print-customer-grid div:last-child { border-right: 0; }
  .print-customer-grid strong { display: block; overflow-wrap: anywhere; }
  .print-order-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 8pt; }
  .print-order-table thead { display: table-header-group; }
  .print-order-table tr { break-inside: avoid; page-break-inside: avoid; }
  .print-order-table th { padding: 6px 5px; color: #092d5b; background: #e8f2fc; border: 1px solid #b9cadb; text-align: left; font-size: 7.5pt; }
  .print-order-table td { padding: 6px 5px; border: 1px solid #ccd6e0; vertical-align: top; overflow-wrap: anywhere; line-height: 1.3; }
  .print-order-table th:nth-child(1), .print-order-table th:nth-child(5), .print-order-table td:nth-child(1), .print-order-table td:nth-child(5) { text-align: center; }
  .print-order-table th:nth-child(6), .print-order-table th:nth-child(7), .print-order-table td:nth-child(6), .print-order-table td:nth-child(7) { text-align: right; }
  .print-col-number { width: 5%; }
  .print-col-code { width: 10%; }
  .print-col-name { width: 35%; }
  .print-col-unit { width: 12%; }
  .print-col-quantity { width: 9%; }
  .print-col-price { width: 14%; }
  .print-col-total { width: 15%; }
  .print-order-footer { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 18px; margin-top: 12px; break-inside: avoid; page-break-inside: avoid; }
  .print-notes { min-height: 48px; padding: 8px 9px; border: 1px solid #cbd6e2; border-radius: 6px; }
  .print-notes strong { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
  .print-totals { border: 1px solid #b9cadb; border-radius: 6px; overflow: hidden; }
  .print-totals div { display: flex; justify-content: space-between; gap: 14px; padding: 6px 9px; border-bottom: 1px solid #d7e0e9; }
  .print-totals div:last-child { border-bottom: 0; }
  .print-grand-total { color: #075ca8; background: #eef6ff; font-size: 10pt; }
  .print-disclaimer { margin: 10px 0 0; color: #5b687a; font-size: 7pt; line-height: 1.35; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Information, guidance and legal content */
.section-heading { max-width: 780px; margin-bottom: 26px; }
.section-heading h2, .verification-panel h2, .content-article h2, .content-aside h2, .contact-card h2, .method-steps h2 { margin: 0; color: var(--navy); font: 800 clamp(1.5rem, 3vw, 2.35rem)/1.15 var(--font-display); letter-spacing: -.025em; }
.section-heading > p:last-child { margin: 12px 0 0; color: var(--muted); font-size: 1rem; }
.section-heading.compact { margin-bottom: 18px; }
.medicine-guide { margin-top: 54px; }
.medicine-guide, .verification-panel, .faq-section { content-visibility: auto; contain-intrinsic-size: auto 420px; }
.guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.guide-card { min-height: 230px; padding: 24px; background: linear-gradient(160deg, #fff, #f5faff); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 12px 30px rgba(8,35,74,.06); }
.guide-number { display: inline-grid; place-items: center; width: 40px; height: 40px; color: var(--blue); background: #e7f3ff; border-radius: 12px; font-weight: 800; }
.guide-card h3 { margin: 22px 0 9px; color: var(--navy); font: 800 1.05rem/1.35 var(--font-display); }
.guide-card p { margin: 0; color: var(--muted); font-size: .9rem; }
.verification-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; margin-top: 24px; padding: clamp(26px, 4vw, 44px); color: white; background: radial-gradient(circle at 100% 0, rgba(86,230,203,.24), transparent 18rem), linear-gradient(125deg, #071f43, #0a548b); border-radius: 24px; box-shadow: 0 18px 45px rgba(8,35,74,.16); }
.verification-panel .eyebrow { color: #72e8cf; }
.verification-panel h2 { color: white; }
.verification-panel p:last-child { max-width: 850px; margin: 12px 0 0; color: #d1e3f1; }
.verification-actions { display: grid; gap: 10px; min-width: 220px; }
.primary-link, .secondary-link { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 16px; border-radius: 12px; font-weight: 800; text-align: center; text-decoration: none; }
.primary-link { color: white; background: linear-gradient(135deg, #0a75c2, #075aa5); box-shadow: 0 9px 20px rgba(7,92,168,.17); }
.verification-panel .primary-link { color: #07345c; background: #7be3d2; box-shadow: none; }
.secondary-link { color: var(--blue); background: white; border: 1px solid #bfd2e5; }
.verification-panel .secondary-link { color: white; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); }
.faq-section { margin: 54px 0 28px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.faq-grid details { padding: 18px 20px; background: white; border: 1px solid var(--line); border-radius: 15px; }
.faq-grid summary { color: var(--navy); font-weight: 800; cursor: pointer; }
.faq-grid p { margin: 10px 0 0; color: var(--muted); font-size: .9rem; }
.disclaimer strong { color: var(--navy); }

.site-footer { margin-top: 26px; color: #d8e7f5; background: #061f42; }
.footer-inner { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 40px; width: min(1440px, 100%); margin: 0 auto; padding: 42px clamp(20px, 6vw, 88px) 30px; }
.footer-brand { display: flex; align-items: flex-start; gap: 14px; }
.footer-brand strong { display: block; color: white; font: 800 1rem/1.35 var(--font-display); }
.footer-brand p { max-width: 390px; margin: 6px 0 0; color: #a9bfd5; font-size: .82rem; }
.footer-links { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; gap: 10px 24px; }
.footer-links a { color: #d8e7f5; text-decoration: none; font-size: .86rem; font-weight: 700; }
.footer-links a:hover, .footer-links a.active { color: #70e4cd; }
.footer-bottom { display: flex; justify-content: space-between; gap: 18px; width: min(1440px, 100%); margin: 0 auto; padding: 17px clamp(20px, 6vw, 88px); color: #90aac3; border-top: 1px solid rgba(255,255,255,.1); font-size: .74rem; }

.info-page { background: linear-gradient(180deg, #eef6fc 0, #fff 520px); }
.content-main { width: min(1220px, 100%); padding-bottom: 70px; }
.content-hero { position: relative; overflow: hidden; margin-top: 28px; padding: clamp(34px, 6vw, 72px); color: white; background: radial-gradient(circle at 94% 8%, rgba(69,217,191,.32), transparent 20rem), linear-gradient(128deg, #061f42, #0b5a92); border-radius: 28px; box-shadow: 0 24px 65px rgba(7,45,83,.18); }
.content-hero .eyebrow { color: #78e8d3; }
.content-hero h1 { max-width: 920px; color: white; font-size: clamp(2.3rem, 5.5vw, 4.7rem); }
.content-hero > p:last-child { max-width: 830px; margin: 20px 0 0; color: #d6e7f3; font-size: clamp(1rem, 1.9vw, 1.2rem); }
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 24px; align-items: start; margin-top: 24px; }
.content-article, .content-aside, .contact-card, .method-steps article { background: white; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 14px 38px rgba(8,35,74,.07); }
.content-article { padding: clamp(26px, 4vw, 48px); }
.content-article.standalone { margin-top: 24px; }
.content-article h2 { margin-top: 34px; font-size: 1.35rem; }
.content-article h2:first-child { margin-top: 0; }
.content-article h3 { margin: 0 0 7px; color: var(--navy); font: 800 1rem/1.35 var(--font-display); }
.content-article p, .content-article li { color: #4f6077; }
.content-article p { margin: 10px 0 0; }
.content-article ul { margin: 12px 0 0; padding-left: 21px; }
.content-article li + li { margin-top: 8px; }
.content-article a { color: var(--blue); font-weight: 700; }
.content-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.content-card-grid > div { padding: 18px; background: #f4f9fd; border: 1px solid #e0ebf4; border-radius: 14px; }
.content-card-grid p { margin: 0; font-size: .88rem; }
.notice-box { margin-top: 28px; padding: 18px 20px; color: #174f48; background: #eaf9f5; border: 1px solid #c8ece1; border-radius: 14px; }
.notice-box strong { color: #075f53; }
.notice-box p { margin: 5px 0 0; color: #376b64; }
.content-aside { position: sticky; top: 98px; padding: 24px; }
.content-aside h2 { font-size: 1.18rem; }
.content-aside dl { margin: 16px 0 22px; }
.content-aside dl div { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid #e8eef4; }
.content-aside dt { color: var(--muted); font-size: .82rem; }
.content-aside dd { margin: 0; color: var(--navy); font-weight: 800; }
.content-aside .primary-link, .content-aside .secondary-link { width: 100%; }
.check-list { margin: 16px 0 22px; padding: 0; list-style: none; }
.check-list li { position: relative; padding: 9px 0 9px 25px; color: var(--muted); font-size: .86rem; border-bottom: 1px solid #e8eef4; }
.check-list li::before { content: "✓"; position: absolute; left: 2px; color: #07846d; font-weight: 800; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.contact-card { padding: clamp(26px, 4vw, 42px); }
.contact-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 22px; color: var(--blue); background: #e7f3ff; border-radius: 14px; font-size: 1.2rem; font-weight: 800; }
.contact-card h2 { font-size: 1.5rem; }
.contact-card p { min-height: 78px; margin: 12px 0 22px; color: var(--muted); }
.critical-disclaimer { margin-top: 24px; padding: 24px 28px; color: #8b341e; background: #fff4ec; border: 1px solid #f4cbb8; border-left: 5px solid #e45a2c; border-radius: 16px; }
.critical-disclaimer strong { color: #7b2a18; font: 800 1.1rem/1.35 var(--font-display); }

/* Crawlable medicine pages */
.medicine-main { width: min(1180px, 100%); margin: 0 auto; padding: 34px clamp(16px, 5vw, 72px) 64px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; color: var(--muted); font-size: .84rem; }
.breadcrumbs a { color: var(--blue); font-weight: 700; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.medicine-detail { padding: clamp(24px, 5vw, 54px); background: white; border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); }
.medicine-detail h1 { max-width: 980px; font-size: clamp(2rem, 4.7vw, 4rem); overflow-wrap: anywhere; }
.medicine-code { margin: 18px 0 0; color: var(--muted); font-size: 1.06rem; }
.medicine-code strong { color: var(--blue); }
.medicine-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin: 30px 0; padding: 1px; background: var(--line); border-radius: 17px; }
.medicine-facts div { padding: 17px 19px; background: #f9fbfd; }
.medicine-facts dt { color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.medicine-facts dd { margin: 5px 0 0; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.medicine-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.medicine-index-page .content-hero { margin: 0 0 22px; }
.index-note { margin: 0 0 24px; padding: 14px 16px; color: #075f53; background: #eaf9f5; border: 1px solid #c6ebe1; border-radius: 13px; }
.medicine-index-grid { display: grid; gap: 18px; }
.medicine-group-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.medicine-group-card { padding: 21px; background: white; border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 8px 24px rgba(8,35,74,.05); }
.medicine-group-card h2 { margin: 0; font: 800 1rem/1.35 var(--font-display); }
.medicine-group-card h2 a { color: var(--navy); text-decoration: none; }
.medicine-group-card h2 a:hover, .medicine-group-open:hover { color: var(--blue); }
.medicine-group-card p { margin: 8px 0 15px; color: var(--muted); font-size: .86rem; }
.medicine-group-open { display: flex; justify-content: space-between; gap: 12px; color: var(--blue); text-decoration: none; font-size: .84rem; font-weight: 800; }
.medicine-index-group { content-visibility: auto; contain-intrinsic-size: auto 520px; padding: 22px; background: white; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 25px rgba(8,35,74,.05); }
.medicine-index-group h2 { margin: 0 0 13px; color: var(--navy); font: 800 1.2rem/1.3 var(--font-display); }
.medicine-index-group ul { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px 18px; margin: 0; padding: 0; list-style: none; }
.medicine-index-group a { display: block; padding: 9px 10px; color: var(--ink); border-radius: 9px; text-decoration: none; }
.medicine-index-group a:hover { color: var(--blue); background: #f1f7fd; }
.medicine-index-group span, .medicine-index-group small { display: block; }
.medicine-index-group span { font-weight: 700; line-height: 1.35; }
.medicine-index-group small { margin-top: 3px; color: var(--muted); }
.medicine-group-table-wrap { overflow: hidden; border: 1px solid #dce7f1; border-radius: 14px; }
.medicine-group-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.medicine-group-table th { padding: 13px 14px; color: #456078; background: #f1f6fb; border-bottom: 1px solid #dce7f1; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.medicine-group-table th:nth-child(1) { width: 13%; }
.medicine-group-table th:nth-child(2) { width: 43%; }
.medicine-group-table th:nth-child(3) { width: 19%; }
.medicine-group-table th:nth-child(4) { width: 15%; }
.medicine-group-table th:nth-child(5) { width: 10%; }
.medicine-group-table td { padding: 14px; color: #52657a; border-bottom: 1px solid #e5edf4; font-size: .86rem; vertical-align: middle; overflow-wrap: anywhere; }
.medicine-group-table tbody tr:last-child td { border-bottom: 0; }
.medicine-group-table tbody tr:hover { background: #f7fbff; }
.medicine-index-group .medicine-code-pill { display: inline-flex; min-width: 54px; justify-content: center; padding: 6px 9px; color: #075f94; background: #e8f5fc; border-radius: 9px; font-weight: 800; }
.medicine-group-table .medicine-name-link { display: inline; padding: 0; color: var(--ink); font-weight: 800; line-height: 1.4; text-decoration: none; }
.medicine-group-table .medicine-name-link:hover { color: var(--blue); background: transparent; text-decoration: underline; }
.medicine-index-group .medicine-mrp { display: inline-flex; color: #075f53; font-weight: 800; white-space: nowrap; }
.medicine-index-group .medicine-mrp-pending { display: inline-flex; padding: 5px 8px; color: #a43b1e; background: #fff0e8; border-radius: 999px; font-size: .75rem; white-space: normal; }
.medicine-row-action { text-align: right; }
.medicine-row-action a { display: inline-flex; align-items: center; gap: 6px; padding: 0; color: var(--blue); font-weight: 800; text-decoration: none; }
.medicine-row-action a:hover { background: transparent; text-decoration: underline; }
@media (max-width: 700px) {
  .medicine-facts, .medicine-index-group ul { grid-template-columns: 1fr; }
  .medicine-main { padding-top: 22px; }
  .medicine-detail, .medicine-index-group { border-radius: 18px; }
  .medicine-page .site-header, .medicine-index-page .site-header { gap: 8px; }
  .medicine-page .header-actions, .medicine-index-page .header-actions,
  .medicine-page .site-nav, .medicine-index-page .site-nav { min-width: 0; }
  .medicine-page .site-nav a[href="/order"],
  .medicine-index-page .site-nav a[href="/order"] { display: none; }
  .medicine-index-group { padding: 14px; }
  .medicine-group-table-wrap { overflow: visible; border: 0; }
  .medicine-group-table, .medicine-group-table tbody { display: block; }
  .medicine-group-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .medicine-group-table tr { display: grid; grid-template-columns: minmax(90px,.55fr) minmax(0,1.45fr); gap: 13px 16px; margin-bottom: 12px; padding: 15px; background: #fbfdff; border: 1px solid #dce7f1; border-radius: 13px; }
  .medicine-group-table tr:last-child { margin-bottom: 0; }
  .medicine-group-table td { display: block; min-width: 0; padding: 0; border: 0; }
  .medicine-group-table td::before { display: block; margin-bottom: 5px; color: #64778c; content: attr(data-label); font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
  .medicine-row-action { grid-column: 1 / -1; padding-top: 10px !important; border-top: 1px solid #e5edf4 !important; text-align: left; }
  .medicine-row-action::before { display: none !important; }
  .medicine-row-action a { justify-content: space-between; width: 100%; }
}
@media (max-width: 440px) {
  .medicine-group-table tr { grid-template-columns: 1fr; }
  .medicine-row-action { grid-column: auto; }
}
.critical-disclaimer p { margin: 7px 0 0; }
.method-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.method-steps article { padding: 22px; }
.method-steps span { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 17px; color: white; background: var(--blue); border-radius: 12px; font-weight: 800; }
.method-steps h2 { font-size: 1.08rem; }
.method-steps p { margin: 8px 0 0; color: var(--muted); font-size: .85rem; }

@media (max-width: 980px) {
  .guide-grid, .method-steps, .medicine-group-grid { grid-template-columns: 1fr 1fr; }
  .content-layout { grid-template-columns: 1fr; }
  .content-aside { position: static; }
}

@media (max-width: 700px) {
  .site-nav a[href="/about"] { display: none; }
  .medicine-guide { margin-top: 38px; }
  .guide-grid, .faq-grid, .contact-grid, .method-steps, .content-card-grid, .medicine-group-grid { grid-template-columns: 1fr; }
  .guide-card { min-height: 0; }
  .verification-panel { grid-template-columns: 1fr; padding: 25px 20px; }
  .verification-actions { min-width: 0; }
  .footer-inner { grid-template-columns: 1fr; padding: 34px 20px 24px; }
  .footer-links { justify-content: flex-start; flex-direction: column; }
  .footer-bottom { flex-direction: column; padding: 15px 20px; }
  .content-main { padding: 0 12px 42px; }
  .content-hero { margin-top: 14px; padding: 30px 22px; border-radius: 21px; }
  .content-hero h1 { font-size: clamp(2.1rem, 12vw, 3.35rem); }
  .content-article { padding: 24px 20px; }
  .contact-card p { min-height: 0; }
}

@media print {
  .order-page .site-footer { display: none !important; }
}