@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --primary-light: #eef2ff;
  --primary-glow: rgba(79, 70, 229, .18);
  --accent: #06b6d4;
  --success: #16a34a;
  --success-light: #ecfdf5;
  --danger: #dc2626;
  --danger-light: #fef2f2;
  --warning: #d97706;
  --warning-light: #fffbeb;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-900: #0f172a;
  --sidebar-w: 250px;
  --header-h: 64px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --shadow: 0 1px 3px rgba(15,23,42,.06), 0 4px 14px rgba(15,23,42,.05);
  --shadow-lg: 0 10px 15px -3px rgba(15,23,42,.08), 0 4px 6px -4px rgba(15,23,42,.05);
  --shadow-glow: 0 8px 20px -6px var(--primary-glow);
}

* { box-sizing: border-box; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 999px; border: 2px solid #fff; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--gray-50);
  color: var(--gray-900);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); }

/* ---------- Layout ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 140%);
  color: #cbd5e1;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  overflow-y: auto;
  z-index: 20;
  border-right: 1px solid rgba(255,255,255,.06);
}
.sidebar-brand {
  padding: 20px 22px;
  font-weight: 800;
  font-size: 16.5px;
  letter-spacing: -.01em;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: 11px;
}
.sidebar-brand .logo-badge {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff;
  box-shadow: 0 4px 10px rgba(79,70,229,.4);
}
.sidebar nav { padding: 12px 10px; }
.sidebar .nav-section-title {
  font-size: 10.5px; text-transform: uppercase; font-weight: 700; letter-spacing: .07em;
  color: #64748b; padding: 16px 12px 7px;
}
.sidebar a.nav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  color: #cbd5e1; text-decoration: none;
  font-size: 13.5px; font-weight: 500;
  border-radius: 8px;
  margin: 1px 0;
  transition: background .15s, color .15s, transform .1s;
}
.sidebar a.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar a.nav-link.active {
  background: linear-gradient(135deg, var(--primary), #6366f1); color: #fff;
  box-shadow: 0 4px 12px rgba(79,70,229,.35);
}
.sidebar .nav-icon { width: 18px; text-align: center; opacity: .9; font-size: 14px; }

.main-area { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  height: var(--header-h);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gray-200);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px;
  position: sticky; top: 0; z-index: 10;
}
.topbar .search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--gray-100); border-radius: 999px;
  padding: 8px 14px; width: 320px;
  border: 1px solid transparent;
  transition: border-color .15s, background .15s;
}
.topbar .search-box:focus-within { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.topbar .search-box input {
  border: none; background: transparent; outline: none; width: 100%; font-size: 13.5px; font-family: inherit;
}
.topbar .user-chip {
  display: flex; align-items: center; gap: 10px;
}
.topbar .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
  box-shadow: 0 3px 8px rgba(79,70,229,.3);
}
.breadcrumbs { padding: 16px 26px 0; font-size: 12.5px; color: var(--gray-500); }
.breadcrumbs a { color: var(--gray-500); text-decoration: none; }
.breadcrumbs a:hover { color: var(--primary); }

.content { padding: 22px 26px 44px; flex: 1; }

.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 10px;
}
.page-header h1 { font-size: 21px; margin: 0; font-weight: 800; letter-spacing: -.015em; color: var(--gray-900); }
.page-header p { margin: 3px 0 0; color: var(--gray-500); font-size: 13px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 17px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; font-family: inherit;
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: all .15s ease;
}
.btn-primary { background: linear-gradient(135deg, var(--primary), #6366f1); color: #fff; box-shadow: 0 2px 8px rgba(79,70,229,.3); }
.btn-primary:hover { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); box-shadow: 0 4px 14px rgba(79,70,229,.4); transform: translateY(-1px); }
.btn-secondary { background: #fff; border-color: var(--gray-200); color: var(--gray-700); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--gray-50); border-color: var(--gray-300); }
.btn-danger { background: var(--danger-light); color: var(--danger); border-color: #fecaca; }
.btn-danger:hover { background: #fee2e2; }
.btn-sm { padding: 5px 11px; font-size: 12.5px; border-radius: 7px; }

/* ---------- Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: box-shadow .2s;
}
.card-body { padding: 20px 22px; }
.card-header {
  padding: 15px 22px; border-bottom: 1px solid var(--gray-200);
  font-weight: 700; font-size: 14.5px; color: var(--gray-900);
}

/* ---------- KPI cards ---------- */
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.kpi-card {
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: 18px 20px; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.kpi-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity: 0; transition: opacity .18s;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kpi-card:hover::before { opacity: 1; }
.kpi-card .kpi-label { font-size: 12px; color: var(--gray-500); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.kpi-card .kpi-value { font-size: 23px; font-weight: 800; margin-top: 7px; color: var(--gray-900); letter-spacing: -.01em; }
.kpi-card .kpi-icon { float: right; font-size: 20px; opacity: .45; }

/* ---------- Modern ERP Tables ---------- */


.table-wrap {
    overflow-x:auto;
    border-radius:14px;
    background:#fff;
}


/* Main Table */

table {

    width:100%;

    border-collapse:separate;

    border-spacing:0;

    font-size:13.5px;

}


/* Header */


table th {

    background:#f8fafc;

    color:#334155;

    padding:14px 16px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.04em;

    border-bottom:2px solid #e2e8f0;

}


/* Body */


table td {

    padding:14px 16px;

    color:#475569;

    border-bottom:1px solid #e5e7eb;

    vertical-align:middle;

}



/* Row Hover */


table tbody tr {

    transition:.2s;

}


table tbody tr:hover {

    background:#f8fafc;

}


/* First Column */

table td:first-child,
table th:first-child {

    padding-left:20px;

}


/* Buttons spacing */


table .btn {

    margin-right:5px;

}



/* Image */

.table-thumb {

    width:42px;

    height:42px;

    border-radius:10px;

    object-fit:cover;

    border:1px solid #e2e8f0;

}


/* Status Badge */

.badge-success {

    background:#dcfce7;

    color:#166534;

    padding:5px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:600;

}


.badge-danger {

    background:#fee2e2;

    color:#991b1b;

}
/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
}
.badge-success { background: var(--success-light); color: var(--success); }
.badge-danger { background: var(--danger-light); color: var(--danger); }
.badge-warning { background: var(--warning-light); color: var(--warning); }
.badge-gray { background: var(--gray-100); color: var(--gray-600); }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 12.5px; font-weight: 600; color: var(--gray-700); }
.form-group .hint { font-size: 11.5px; color: var(--gray-500); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=file], select, textarea {
  padding: 9px 12px; border: 1px solid var(--gray-300); border-radius: 9px;
  font-size: 13.5px; font-family: inherit; outline: none; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.form-actions { display: flex; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--gray-200); }

/* ---------- Filters bar ---------- */
.filters-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }
.filters-bar input, .filters-bar select { padding: 8px 11px; font-size: 13px; }

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: 6px; margin-top: 18px; align-items: center; font-size: 13px; color: var(--gray-500); }
.pagination a, .pagination span { padding: 6px 12px; border-radius: 7px; border: 1px solid var(--gray-200); text-decoration: none; color: var(--gray-700); transition: all .12s; }
.pagination a:hover { background: var(--gray-50); border-color: var(--gray-300); }
.pagination .active, .pagination .current { background: linear-gradient(135deg, var(--primary), #6366f1); color: #fff; border-color: var(--primary); }

/* ---------- Toasts ---------- */
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 999; display: flex; flex-direction: column; gap: 10px; }
.toast {
  min-width: 270px; max-width: 380px; padding: 13px 17px; border-radius: 11px;
  color: #fff; font-size: 13.5px; font-weight: 500; box-shadow: 0 10px 25px rgba(0,0,0,.18);
  animation: slideIn .25s cubic-bezier(.16,1,.3,1);
}
.toast-success { background: linear-gradient(135deg, var(--success), #059669); }
.toast-error { background: linear-gradient(135deg, var(--danger), #b91c1c); }
@keyframes slideIn { from { transform: translateX(30px); opacity:0; } to { transform: translateX(0); opacity:1; } }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 54px 20px; color: var(--gray-500); }
.empty-state .icon { font-size: 42px; margin-bottom: 12px; opacity: .35; }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 20% 20%, #312e81 0%, #0f172a 55%, #0f172a 100%);
}
.login-card {
  background: #fff; padding: 40px 36px; border-radius: 18px; width: 390px;
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
}
.login-card .logo-badge {
  width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), var(--accent));
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 16px;
  box-shadow: 0 6px 16px rgba(79,70,229,.35);
}
.login-card h1 { font-size: 20px; margin: 0 0 4px; font-weight: 800; letter-spacing: -.01em; }
.login-card p.sub { color: var(--gray-500); font-size: 13px; margin: 0 0 24px; }
.login-card .form-group { margin-bottom: 15px; }
.login-card button { width: 100%; justify-content: center; padding: 11px; }
.demo-hint { margin-top: 18px; font-size: 12px; color: var(--gray-500); background: var(--gray-50); padding: 11px 13px; border-radius: 10px; border: 1px solid var(--gray-200); }

/* ---------- Product image / QR ---------- */
.product-image-preview {
  width: 100%; max-width: 220px; height: 180px; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--gray-200); background: var(--gray-50);
}
.qr-box { text-align: center; padding: 16px; border: 1px dashed var(--gray-300); border-radius: var(--radius); background: var(--gray-50); }
.qr-box canvas, .qr-box img { margin: 0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: translateX(0); }
  .main-area { margin-left: 0; }
  .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; }
  .topbar .search-box { display: none; }
}

/* ---- Company logo (sidebar + login) ---- */
.sidebar-brand .brand-icon { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.login-card .login-logo { display: block; width: 220px; max-width: 80%; height: auto; margin: 0 auto 14px; }
.login-card h1, .login-card p.sub { text-align: center; }

.muted { color: var(--gray-500); font-size: 11.5px; }

/* =========================================
   MEDSUPPLY SHOP — COMPLETE DESIGN
   Teal / White / Medical Ecommerce
========================================= */

.med-storefront {
    --ms-teal: #008f83;
    --ms-dark-teal: #00786e;
    --ms-light-teal: #e3f4f1;
    --ms-ink: #102443;
    --ms-text: #405571;
    --ms-muted: #8998ad;
    --ms-border: #e5edf3;
    --ms-bg: #f7fafb;
    --ms-white: #fff;

    width: 100%;
    margin: 0 auto;
    color: var(--ms-ink);
    background: #fff;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

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

.med-storefront a {
    color: inherit;
    text-decoration: none;
}

.med-storefront button,
.med-storefront input,
.med-storefront select {
    font: inherit;
}

.med-storefront svg {
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* HEADER */

.med-storefront .ms-header {
    display: grid;
    grid-template-columns: 245px minmax(180px, 1fr) 270px;
    align-items: center;
    gap: 28px;
    min-height: 80px;
    padding: 12px 4.2%;
    border-bottom: 1px solid #e8eef3;
    background: #fff;
}

.med-storefront .ms-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.med-storefront .ms-brand-symbol {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    color: var(--ms-teal);
}

.med-storefront .ms-brand-symbol svg {
    width: 43px;
    height: 43px;
}

.med-storefront .ms-brand-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.med-storefront .ms-brand-copy strong {
    color: var(--ms-ink);
    font-size: 24px;
    line-height: 1.15;
    font-weight: 850;
    letter-spacing: -.9px;
}

.med-storefront .ms-brand-copy strong span {
    color: var(--ms-teal);
}

.med-storefront .ms-brand-copy small {
    margin-top: 3px;
    color: #60728b;
    font-size: 10px;
    white-space: nowrap;
}

.med-storefront .ms-search {
    display: flex;
    align-items: stretch;
    min-width: 0;
    height: 41px;
    overflow: hidden;
    border: 1px solid #e0e8f0;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(16, 36, 67, .035);
}

.med-storefront .ms-search:focus-within {
    border-color: var(--ms-teal);
    box-shadow: 0 0 0 3px rgba(0, 143, 131, .09);
}

.med-storefront .ms-search input {
    width: 100%;
    min-width: 0;
    padding: 0 16px;
    border: 0;
    outline: 0;
    color: var(--ms-ink);
    background: transparent;
    font-size: 12px;
}

.med-storefront .ms-search input::placeholder {
    color: #8b9ab0;
}

.med-storefront .ms-search button {
    display: grid;
    place-items: center;
    width: 43px;
    flex: 0 0 43px;
    border: 0;
    color: #fff;
    background: var(--ms-teal);
    cursor: pointer;
    transition: background .2s;
}

.med-storefront .ms-search button:hover {
    background: var(--ms-dark-teal);
}

.med-storefront .ms-search button svg {
    width: 19px;
    height: 19px;
}

.med-storefront .ms-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 26px;
}

.med-storefront .ms-header-action {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 46px;
    color: var(--ms-ink);
    font-size: 10px;
    font-weight: 550;
    transition: color .2s;
}

.med-storefront .ms-header-action:hover {
    color: var(--ms-teal);
}

.med-storefront .ms-header-action > svg,
.med-storefront .ms-cart-icon > svg {
    width: 22px;
    height: 22px;
}

.med-storefront .ms-cart-icon {
    position: relative;
}

.med-storefront .ms-cart-count {
    position: absolute;
    top: -7px;
    right: -8px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid #fff;
    border-radius: 20px;
    color: #fff;
    background: var(--ms-teal);
    font-size: 9px;
    font-weight: 800;
}

/* NAVIGATION */

.med-storefront .ms-navigation {
    border-bottom: 1px solid #e8eef3;
    background: #fff;
}

.med-storefront .ms-nav-inner {
    display: flex;
    align-items: center;
    gap: 29px;
    min-height: 43px;
    padding: 0 4.2%;
}

.med-storefront .ms-nav-inner a {
    position: relative;
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    color: #344762;
    font-size: 11px;
    font-weight: 600;
    transition: color .2s;
}

.med-storefront .ms-nav-inner a:hover,
.med-storefront .ms-nav-inner a.active {
    color: var(--ms-teal);
}

.med-storefront .ms-nav-inner a.active::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--ms-teal);
    content: "";
}

/* MAIN CONTAINER */

.med-storefront .ms-main {
    width: 100%;
    padding: 18px 3.35% 26px;
}

/* HERO BANNER */

.med-storefront .ms-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 198px;
    margin-bottom: 24px;
    padding: 32px 29px;
    overflow: hidden;
    isolation: isolate;
    border-radius: 8px;
    background:
        radial-gradient(ellipse at 72% 20%,
            rgba(0, 143, 131, .12), transparent 35%),
        linear-gradient(105deg, #e6f5f2 0%, #f0f8f7 44%,
            #d4eeea 100%);
}

.med-storefront .ms-hero-content {
    position: relative;
    z-index: 2;
    max-width: 570px;
}

.med-storefront .ms-hero-eyebrow {
    display: block;
    margin-bottom: 11px;
    color: var(--ms-teal);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 3px;
}

.med-storefront .ms-hero h1 {
    margin: 0;
    color: #10213e;
    font-size: clamp(27px, 3vw, 41px);
    font-weight: 850;
    letter-spacing: -1.3px;
    line-height: 1.2;
}

.med-storefront .ms-hero p {
    max-width: 450px;
    margin: 10px 0 0;
    color: #4e657d;
    font-size: 15px;
    line-height: 1.6;
}

.med-storefront .ms-hero-art {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48%;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 75% 35%,
            rgba(255,255,255,.78), transparent 48%),
        linear-gradient(120deg,
            rgba(177, 226, 218, .45),
            rgba(104, 192, 180, .28));
    clip-path: ellipse(90% 110% at 100% 50%);
}

.med-storefront .ms-hero-circle {
    position: absolute;
    top: -90px;
    right: 35px;
    width: 300px;
    height: 300px;
    border: 25px solid rgba(255, 255, 255, .30);
    border-radius: 50%;
}

.med-storefront .ms-hero-plus {
    position: absolute;
    top: 22%;
    right: 22%;
    color: rgba(0, 143, 131, .18);
    font-size: 150px;
    font-weight: 200;
    line-height: 1;
}

.med-storefront .ms-hero-cross {
    position: absolute;
    right: 10%;
    bottom: 6%;
    color: rgba(0, 143, 131, .17);
    font-size: 80px;
}

/* LAYOUT */

.med-storefront .ms-shop-layout {
    display: grid;
    grid-template-columns: 267px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
}

.med-storefront .ms-sidebar,
.med-storefront .ms-toolbar {
    border: 1px solid var(--ms-border);
    border-radius: 8px;
    background: #fff;
}

/* SIDEBAR */

.med-storefront .ms-sidebar {
    padding: 13px 12px 15px;
}

.med-storefront .ms-sidebar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px 11px;
}

.med-storefront .ms-sidebar-title svg {
    width: 18px;
    height: 18px;
    color: var(--ms-teal);
}

.med-storefront .ms-sidebar-title h2 {
    margin: 0;
    color: var(--ms-ink);
    font-size: 13px;
    font-weight: 800;
}

.med-storefront .ms-sidebar-divider {
    height: 1px;
    margin-bottom: 5px;
    background: #edf1f4;
}

.med-storefront .ms-category-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.med-storefront .ms-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 7px;
    color: #405571;
    font-size: 11px;
    transition: color .2s, background .2s;
}

.med-storefront .ms-category:hover {
    color: var(--ms-teal);
    background: #f3faf9;
}

.med-storefront .ms-category.active {
    color: var(--ms-dark-teal);
    background: #e5f5f2;
    font-weight: 750;
}

.med-storefront .ms-category-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.med-storefront .ms-category-name svg {
    width: 19px;
    height: 19px;
    color: var(--ms-teal);
}

.med-storefront .ms-category-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #8da2b6;
}

.med-storefront .ms-category.active .ms-category-dot {
    background: var(--ms-teal);
}

.med-storefront .ms-category-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 27px;
    height: 23px;
    padding: 0 6px;
    border-radius: 15px;
    color: #718198;
    background: #f0f3f7;
    font-size: 10px;
    font-weight: 700;
}

.med-storefront .ms-category.active .ms-category-count {
    color: var(--ms-teal);
    background: #d4eeea;
}

/* TRUST CARD */

.med-storefront .ms-trust-card {
    margin-top: 16px;
    padding: 15px;
    border: 1px solid #e2efee;
    border-radius: 8px;
    background: linear-gradient(140deg, #f1f9f8, #fff);
}

.med-storefront .ms-trust-icon {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    margin-bottom: 10px;
    border-radius: 12px;
    color: white;
    background: var(--ms-teal);
}

.med-storefront .ms-trust-icon svg {
    width: 22px;
    height: 22px;
}

.med-storefront .ms-trust-card strong {
    display: block;
    color: var(--ms-ink);
    font-size: 11px;
    font-weight: 800;
}

.med-storefront .ms-trust-card p {
    margin: 7px 0 12px;
    color: #73859a;
    font-size: 10px;
    line-height: 1.8;
}

.med-storefront .ms-trust-card > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 11px;
    border-radius: 6px;
    color: var(--ms-teal);
    background: #def2ef;
    font-size: 10px;
    font-weight: 750;
}

/* TOOLBAR */

.med-storefront .ms-products {
    min-width: 0;
}

.med-storefront .ms-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 58px;
    padding: 10px 12px;
    margin-bottom: 13px;
}

.med-storefront .ms-toolbar-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    min-width: 0;
}

.med-storefront .ms-toolbar-left > strong {
    color: var(--ms-ink);
    font-size: 14px;
    white-space: nowrap;
}

.med-storefront .ms-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 180px;
    overflow: hidden;
    padding: 5px 9px;
    border: 1px solid #edf1f5;
    border-radius: 20px;
    color: #64748b;
    background: #f8fafc;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.med-storefront .ms-filter-chip span {
    font-size: 14px;
}

.med-storefront .ms-sort-form {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.med-storefront .ms-sort-form label {
    color: #8492a6;
    font-size: 11px;
    white-space: nowrap;
}

.med-storefront .ms-sort-form select {
    width: auto;
    max-width: 220px;
    min-height: 37px;
    padding: 0 26px 0 10px;
    border: 1px solid #e1eaf1;
    border-radius: 7px;
    outline: none;
    color: #344762;
    background: #fff;
    font-size: 11px;
    cursor: pointer;
}

.med-storefront .ms-sort-form select:focus {
    border-color: var(--ms-teal);
}

/* PRODUCT GRID */

.med-storefront .ms-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 15px;
}

.med-storefront .ms-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ms-border);
    border-radius: 9px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.med-storefront .ms-product-card:hover {
    transform: translateY(-2px);
    border-color: #b8e3dc;
    box-shadow: 0 7px 20px rgba(16, 76, 79, .07);
}

.med-storefront .ms-product-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / .91;
    overflow: hidden;
    padding: 12px;
    background: #fff;
}

.med-storefront .ms-product-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .25s ease;
}

.med-storefront .ms-product-card:hover .ms-product-photo img {
    transform: scale(1.045);
}

/* STOCK BADGE */

.med-storefront .ms-stock-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: calc(100% - 56px);
    padding: 5px 9px;
    overflow: hidden;
    border-radius: 20px;
    color: #fff;
    background: #078b58;
    font-size: 9px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.med-storefront .ms-stock-badge > span {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #fff;
}

/* Availability CSS class variants */

.med-storefront .ms-stock-badge.low,
.med-storefront .ms-stock-badge.low-stock,
.med-storefront .ms-stock-badge.warning,
.med-storefront .ms-stock-badge.limited {
    background: #f39a00;
}

.med-storefront .ms-stock-badge.out-of-stock,
.med-storefront .ms-stock-badge.unavailable,
.med-storefront .ms-stock-badge.danger {
    background: #d63c48;
}

.med-storefront .ms-stock-badge.in-stock,
.med-storefront .ms-stock-badge.available,
.med-storefront .ms-stock-badge.success {
    background: #078b58;
}

/* WISHLIST */

.med-storefront .ms-wishlist {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--ms-teal);
    background: rgba(255, 255, 255, .94);
    cursor: pointer;
    transition: background .2s, color .2s;
}

.med-storefront .ms-wishlist:hover {
    color: #fff;
    background: var(--ms-teal);
}

.med-storefront .ms-wishlist svg {
    width: 17px;
    height: 17px;
}

/* PRODUCT INFORMATION */

.med-storefront .ms-product-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 9px 12px 12px;
}

.med-storefront .ms-product-brand {
    margin-bottom: 3px;
    overflow: hidden;
    color: var(--ms-teal);
    font-size: 10px;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.med-storefront .ms-product-name {
    display: -webkit-box;
    min-height: 34px;
    overflow: hidden;
    color: var(--ms-ink);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.55;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.med-storefront .ms-product-name:hover {
    color: var(--ms-teal);
}

.med-storefront .ms-product-code {
    margin-top: 3px;
    color: #8a9ab0;
    font-size: 10px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.med-storefront .ms-sterile {
    color: var(--ms-teal);
}

.med-storefront .ms-product-price {
    margin-top: 10px;
    margin-bottom: 11px;
    color: var(--ms-teal-dark);
    font-size: 16px;
    font-weight: 850;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* ADD TO CART */

.med-storefront .ms-add-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 33px;
    margin-top: auto;
    padding: 7px 8px;
    border: 1px solid #d4efeb;
    border-radius: 7px;
    color: var(--ms-teal);
    background: #e5f5f2;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    transition: color .2s, background .2s, border-color .2s;
}

.med-storefront .ms-add-cart svg {
    width: 16px;
    height: 16px;
}

.med-storefront .ms-add-cart:hover {
    border-color: var(--ms-teal);
    color: #fff;
    background: var(--ms-teal);
}

/* EMPTY SEARCH STATE */

.med-storefront .ms-empty {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 300px;
    padding: 35px 20px;
    border: 1px solid var(--ms-border);
    border-radius: 9px;
    text-align: center;
}

.med-storefront .ms-empty-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    color: var(--ms-teal);
    background: var(--ms-light-teal);
    font-size: 37px;
}

.med-storefront .ms-empty h2 {
    margin: 17px 0 4px;
    font-size: 20px;
}

.med-storefront .ms-empty p {
    color: var(--ms-muted);
    font-size: 12px;
}

.med-storefront .ms-empty > a {
    padding: 10px 16px;
    border-radius: 7px;
    color: #fff;
    background: var(--ms-teal);
    font-size: 11px;
    font-weight: 700;
}

/* PAGINATION */

.med-storefront .ms-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 16px;
}

.med-storefront .ms-pagination a,
.med-storefront .ms-pagination > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--ms-border);
    border-radius: 7px;
    color: #334762;
    background: #fff;
    font-size: 11px;
    font-weight: 650;
}

.med-storefront .ms-pagination a:hover {
    border-color: var(--ms-teal);
    color: var(--ms-teal);
}

.med-storefront .ms-pagination > span.current {
    border-color: var(--ms-teal);
    color: #fff;
    background: var(--ms-teal);
}

.med-storefront .ms-pagination > span.disabled {
    color: #c1cbd5;
    background: #fafcfd;
}

/* TABLETS */

@media (max-width: 1200px) {
    .med-storefront .ms-header {
        grid-template-columns: 210px minmax(160px, 1fr) 220px;
        gap: 16px;
        padding-right: 24px;
        padding-left: 24px;
    }

    .med-storefront .ms-header-actions {
        gap: 13px;
    }

    .med-storefront .ms-shop-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 15px;
    }

    .med-storefront .ms-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
}

/* SMALL LAPTOPS */

@media (max-width: 950px) {
    .med-storefront .ms-header {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .med-storefront .ms-header-actions {
        grid-column: 1 / -1;
        justify-content: center;
        padding-top: 4px;
    }

    .med-storefront .ms-shop-layout {
        grid-template-columns: 190px minmax(0, 1fr);
        gap: 12px;
    }

    .med-storefront .ms-main {
        padding-right: 20px;
        padding-left: 20px;
    }

    .med-storefront .ms-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .med-storefront .ms-hero {
        min-height: 175px;
    }
}

/* MOBILE */

@media (max-width: 600px) {
    .med-storefront .ms-header {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        padding: 13px 15px;
    }

    .med-storefront .ms-brand {
        flex: 1;
    }

    .med-storefront .ms-brand-copy strong {
        font-size: 21px;
    }

    .med-storefront .ms-brand-symbol,
    .med-storefront .ms-brand-symbol svg {
        width: 36px;
        height: 36px;
    }

    .med-storefront .ms-search {
        order: 3;
        flex: 1 0 100%;
    }

    .med-storefront .ms-header-actions {
        display: flex;
        flex: 0 0 100%;
        justify-content: space-around;
        gap: 10px;
        padding: 5px 0 0;
    }

    .med-storefront .ms-header-action {
        min-width: 60px;
    }

    .med-storefront .ms-nav-inner {
        justify-content: space-between;
        gap: 15px;
        min-height: 42px;
        padding: 0 15px;
    }

    .med-storefront .ms-main {
        padding: 13px 12px 22px;
    }

    .med-storefront .ms-hero {
        min-height: 160px;
        padding: 22px 17px;
        margin-bottom: 15px;
    }

    .med-storefront .ms-hero-content {
        max-width: 85%;
    }

    .med-storefront .ms-hero h1 {
        font-size: 27px;
        letter-spacing: -.8px;
    }

    .med-storefront .ms-hero p {
        max-width: 270px;
        font-size: 12px;
    }

    .med-storefront .ms-hero-eyebrow {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .med-storefront .ms-hero-art {
        width: 36%;
        opacity: .6;
    }

    .med-storefront .ms-shop-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 13px;
    }

    .med-storefront .ms-sidebar {
        padding: 12px;
    }

    .med-storefront .ms-category-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .med-storefront .ms-category {
        min-height: 34px;
        padding: 6px 9px;
        border: 1px solid #edf1f4;
        font-size: 10px;
    }

    .med-storefront .ms-category-count {
        min-width: 21px;
        height: 20px;
        font-size: 9px;
    }

    .med-storefront .ms-trust-card {
        display: none;
    }

    .med-storefront .ms-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }

    .med-storefront .ms-sort-form {
        width: 100%;
        justify-content: space-between;
    }

    .med-storefront .ms-sort-form select {
        flex: 1;
        max-width: none;
    }

    .med-storefront .ms-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .med-storefront .ms-product-photo {
        aspect-ratio: 1 / .85;
        padding: 8px;
    }

    .med-storefront .ms-stock-badge {
        top: 7px;
        left: 7px;
        padding: 4px 6px;
        font-size: 8px;
    }

    .med-storefront .ms-wishlist {
        top: 5px;
        right: 5px;
        width: 25px;
        height: 25px;
    }

    .med-storefront .ms-wishlist svg {
        width: 15px;
        height: 15px;
    }

    .med-storefront .ms-product-info {
        padding: 8px 9px 9px;
    }

    .med-storefront .ms-product-name {
        min-height: 34px;
        font-size: 10px;
    }

    .med-storefront .ms-product-code {
        font-size: 9px;
    }

    .med-storefront .ms-product-price {
        font-size: 14px;
    }

    .med-storefront .ms-add-cart {
        min-height: 32px;
        gap: 4px;
        padding: 6px 4px;
        font-size: 9px;
    }

    .med-storefront .ms-add-cart svg {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 350px) {
    .med-storefront .ms-product-grid {
        grid-template-columns: 1fr;
    }

    .med-storefront .ms-hero h1 {
        font-size: 23px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .med-storefront *,
    .med-storefront *::before,
    .med-storefront *::after {
        transition: none !important;
        animation: none !important;
    }
}

.med-storefront .ms-hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(229, 245, 242, .98) 0%,
            rgba(229, 245, 242, .93) 40%,
            rgba(229, 245, 242, .15) 72%,
            rgba(229, 245, 242, 0) 100%
        ),
        url("/assets/images/medical-banner.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.med-storefront .ms-hero-art {
    display: none;
}