/*
 * StoredX AI — Premium Product Intelligence V2-203
 * Blue-first visual system.
 * Existing data, tabs, and authenticated APIs remain unchanged.
 */

:root {
  --sx-blue: #2563eb;
  --sx-blue-deep: #1749ca;
  --sx-ink: #102044;
  --sx-muted: #7183a3;
  --sx-line: #dfe8f5;
  --sx-surface: #ffffff;
  --sx-soft: #f3f7fd;
  --sx-green: #059669;
  --sx-radius: 14px;
  --sx-shadow: 0 5px 22px rgba(20, 56, 108, .055);
}

/* Page panels */
.panel {
  background: var(--sx-surface);
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius);
  box-shadow: var(--sx-shadow);
}

.panel-head {
  padding: 16px 18px;
  border-bottom: 1px solid #e8eef8;
}

.panel-head h2 {
  margin: 0;
  color: var(--sx-ink);
  font-weight: 750;
  letter-spacing: -.025em;
}

.panel-head small {
  color: var(--sx-muted);
  line-height: 1.5;
}

/* Existing KPI cards */
.detail-kpis .kpi,
.kpis.detail-kpis .kpi {
  min-width: 0;
  background: linear-gradient(155deg, #fff 65%, #f7faff);
  border: 1px solid var(--sx-line);
  border-radius: 11px;
  padding: 16px 18px;
  box-shadow: 0 2px 9px rgba(28, 67, 120, .025);
}

.detail-kpis .kpi small {
  color: var(--sx-muted);
  font-weight: 600;
}

.detail-kpis .kpi strong {
  display: block;
  color: var(--sx-ink);
  font-size: clamp(17px, 1.5vw, 23px);
  line-height: 1.35;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

.detail-kpis .kpi span {
  color: #8290aa;
}

/* Preserve the original cumulative-sales experience */
.sx-sales-history {
  overflow: hidden;
}

.sx-sales-history .panel-head {
  background: linear-gradient(90deg, #fff, #f8fbff);
}

.sx-sales-history > div:last-child {
  padding: 14px 18px !important;
}

.sx-sales-history a {
  color: var(--sx-blue);
  font-weight: 650;
}

/* Historical bestseller trends */
.sx-bestseller-history {
  overflow: hidden;
  position: relative;
}

.sx-bestseller-history > .panel-head {
  background: linear-gradient(105deg, #f5f9ff, #ffffff 55%);
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.sx-bestseller-history .panel-head h2 {
  font-size: 17px;
}

.sx-bestseller-history .panel-head button {
  font-size: 12px;
  font-weight: 750;
  min-height: 34px;
  transition: background .16s ease, box-shadow .16s ease;
}

.sx-bestseller-history .panel-head button[aria-pressed="true"] {
  box-shadow: 0 3px 10px rgba(37, 99, 235, .23);
}

.sx-bestseller-history .panel-head button:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

.sx-bestseller-history > p {
  color: var(--sx-muted);
  padding: 12px 18px 0;
  margin: 0;
  font-size: 12px;
}

/* Compact trends; no more excessively tall SVG charts */
.sx-bestseller-history svg[role="img"] {
  display: block;
  width: 100% !important;
  height: 185px !important;
  max-height: 185px;
  margin: 10px 0 7px;
}

.sx-bestseller-history svg polyline {
  stroke: var(--sx-blue);
  stroke-width: 2.7;
}

.sx-bestseller-history svg line {
  stroke: #dbeafe;
}

.sx-bestseller-history > div:not(.panel-head) > strong,
.sx-bestseller-history > div > strong {
  color: var(--sx-ink);
  font-weight: 750;
}

.sx-bestseller-history .detail-kpis .kpi {
  background: #f9fbff;
}

/* Research section navigation */
.research-nav {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--sx-line);
}

.research-nav button {
  white-space: nowrap;
  color: #647896;
  font-weight: 650;
  border-radius: 8px 8px 0 0;
  transition: color .15s ease, background .15s ease;
}

.research-nav button:hover {
  color: var(--sx-blue);
  background: #f0f6ff;
}

.research-nav button.active,
.research-nav button[aria-selected="true"] {
  color: var(--sx-blue);
}

/* Compact readable research content */
.research-content .panel {
  overflow: hidden;
}

.research-content .panel-head {
  background: #fbfdff;
}

.research-content small {
  line-height: 1.55;
}

.research-content a {
  color: var(--sx-blue);
}

/* Information and source links */
.sx-bestseller-history p,
.sx-sales-history p {
  line-height: 1.55;
}

.sx-bestseller-history small {
  color: #6d80a1;
}

@media (max-width: 850px) {
  .sx-bestseller-history svg[role="img"] {
    height: 155px !important;
  }

  .detail-kpis .kpi {
    padding: 12px !important;
  }

  .sx-bestseller-history .panel-head {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-bestseller-history *,
  .research-nav * {
    transition: none !important;
  }
}


/* V2-203B — Premium historical chart cards */
.sx-premium-chart {
  min-width: 0;
  background: linear-gradient(180deg, #fff, #fbfdff);
  border: 1px solid #e2ebf9;
  border-radius: 12px;
  padding: 14px;
  margin: 10px 0;
}

.sx-chart-title {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 31px;
  color: #122448;
}

.sx-chart-title strong {
  font-size: 13px;
  font-weight: 750;
}

.sx-chart-icon {
  width: 29px;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  background: #edf4ff;
  border-radius: 8px;
}

.sx-chart-latest {
  margin-left: auto;
  padding: 5px 9px;
  color: #1755dd;
  background: #eef5ff;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 750;
}

.sx-bestseller-history .sx-premium-chart svg {
  width: 100% !important;
  height: auto !important;
  max-height: 220px !important;
  overflow: visible;
}

.sx-chart-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #7183a3;
  font-size: 11px;
  flex-wrap: wrap;
  border-top: 1px solid #edf2fa;
  padding-top: 9px;
}

.sx-chart-foot span:nth-child(2) {
  font-weight: 650;
  color: #314f83;
}

@media (min-width: 1000px) {
  .sx-premium-chart {
    padding: 16px;
  }
}


/* STOREDX V2-203C PREMIUM LAYOUT */

/* Elevated research workspace */
:root {
  --sx-accent-glow: rgba(37, 99, 235, .10);
  --sx-soft-border: #e5ecf7;
}

.panel,
.sx-premium-chart,
.detail-kpis .kpi {
  transition: box-shadow .2s ease, border-color .2s ease;
}

.panel:hover {
  border-color: #d6e3f5;
}

/* Premium panel heading icon */
.panel-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}

.panel-head h2::before {
  content: "";
  width: 33px;
  height: 33px;
  flex: 0 0 33px;
  border-radius: 9px;
  background-color: #eaf2ff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 19px 19px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V11M10 19V5M16 19V9M22 19V3'/%3E%3C/svg%3E");
}

.sx-sales-history .panel-head h2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M7 16v-3m5 3V8m5 8v-5'/%3E%3C/svg%3E");
}

.sx-bestseller-history .panel-head h2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8m-4-4v4M7 4H4v4a5 5 0 0 0 5 5m8-9h3v4a5 5 0 0 1-5 5'/%3E%3Cpath d='M7 3h10v7a5 5 0 0 1-10 0V3Z'/%3E%3C/svg%3E");
}

/* Modern KPI typography */
.detail-kpis .kpi {
  position: relative;
  overflow: hidden;
}

.detail-kpis .kpi::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 14px;
  width: 17px;
  height: 23px;
  opacity: .26;
  background: linear-gradient(to top, #60a5fa 35%, transparent 35%);
  border-radius: 3px;
  box-shadow: 6px -5px 0 -2px #60a5fa,
              12px -11px 0 -4px #2563eb;
  pointer-events: none;
}

.detail-kpis .kpi strong {
  margin-top: 9px;
  font-weight: 800;
}

.sx-sales-history .detail-kpis .kpi::after {
  display: none;
}

/* Header distinction and micro-interactions */
.sx-bestseller-history > .panel-head {
  min-height: 66px;
}

.sx-bestseller-history .panel-head button {
  border-radius: 8px !important;
}

.sx-bestseller-history .panel-head button:hover {
  box-shadow: 0 2px 8px var(--sx-accent-glow);
}

.sx-bestseller-history .detail-kpis {
  gap: 12px;
}

/* Keep chart cards visually consistent */
.sx-premium-chart {
  box-shadow: inset 0 1px 0 #fff,
              0 2px 8px rgba(20, 56, 108, .025);
}

.sx-premium-chart .sx-chart-title {
  margin-bottom: 3px;
}

.sx-premium-chart svg {
  background: linear-gradient(180deg, #fff, #fbfdff);
  border-radius: 8px;
}

.sx-chart-foot {
  align-items: center;
}

/* High-contrast research navigation */
.research-nav {
  padding-top: 4px;
  background: rgba(255,255,255,.72);
  border-radius: 10px 10px 0 0;
}

.research-nav button {
  padding: 12px 13px;
  font-size: 12px;
}

.research-nav button.active {
  background: #f3f7ff;
  box-shadow: inset 0 -2px 0 #2563eb;
}

/* Source and auxiliary panels */
.research-content .panel-head h2 {
  font-size: 14px;
}

.research-content .panel-head h2::before {
  width: 29px;
  height: 29px;
  flex-basis: 29px;
  background-size: 17px 17px;
}

.research-content .panel {
  box-shadow: 0 3px 13px rgba(20,56,108,.035);
}

/* Responsive */
@media (min-width: 1150px) {
  .sx-bestseller-history {
    padding-bottom: 6px;
  }

  .sx-premium-chart {
    border-color: #dce7f8;
  }
}

@media (max-width: 760px) {
  .panel-head h2 {
    font-size: 14px;
  }

  .sx-premium-chart {
    padding: 10px;
  }

  .sx-premium-chart .sx-chart-title {
    gap: 6px;
    flex-wrap: wrap;
  }

  .sx-chart-latest {
    margin-left: 0;
  }

  .research-nav button {
    padding: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel,
  .sx-premium-chart,
  .detail-kpis .kpi {
    transition: none;
  }
}


/* V2-203D — Compact, side-by-side analytics */
.sx-analytics-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0 16px 14px;
  align-items: stretch;
}

.sx-analytics-chart-grid .sx-premium-chart {
  margin: 0;
  width: 100%;
}

.sx-chart-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 17px;
  color: #617596;
  font-size: 11px;
  padding: 8px 0 0;
}

.sx-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sx-chart-legend i {
  display: inline-block;
  width: 16px;
  height: 3px;
  border-radius: 3px;
}

.sx-line-upper {
  background: #2563eb;
}

.sx-line-lower {
  background: #93c5fd;
}

@media (max-width: 900px) {
  .sx-analytics-chart-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 10px 12px;
  }
}


/* STOREDX V2-203G — Premium product hero */

.sx-premium-hero {
  display: grid;
  grid-template-columns: minmax(190px, 270px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 42px);
  padding: clamp(20px, 2.5vw, 34px);
  border: 1px solid #dee8f7;
  border-radius: 16px;
  background: linear-gradient(120deg, #ffffff 60%, #f9fbff);
  box-shadow: 0 8px 30px rgba(30, 70, 130, .055);
}

.sx-premium-gallery {
  min-width: 0;
}

.sx-premium-gallery .hero-image {
  height: 245px;
  background:
    radial-gradient(circle at 50% 45%, #ffffff 30%, #f0f5fc 100%);
  border: 1px solid #e4ebf5;
  border-radius: 13px;
  overflow: hidden;
}

.sx-premium-gallery .hero-image img {
  object-fit: contain;
  padding: 20px;
}

.sx-premium-gallery .thumbs button {
  width: 49px;
  height: 49px;
  border-radius: 9px;
  background: #f8fbff;
}

.sx-premium-product-info {
  padding: 3px 0;
  min-width: 0;
}

.sx-premium-product-info .eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border: 1px solid #d5e5ff;
  border-radius: 7px;
  background: #edf5ff;
  color: #1d5be0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.sx-premium-product-info h1 {
  max-width: 850px;
  margin: 16px 0 14px;
  color: #112345;
  font-size: clamp(23px, 2.25vw, 34px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

.sx-premium-product-info .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  color: #607494;
  font-size: 12px;
}

.sx-premium-product-info .meta span {
  color: #9aabc2;
}

.sx-premium-product-info > p {
  max-width: 630px;
  margin: 16px 0;
  color: #7485a0;
  font-size: 12px;
  line-height: 1.75;
}

.sx-premium-product-info .product-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  color: #162950;
  font-size: 22px;
}

.sx-premium-product-info .product-price small {
  color: #8391a9;
  font-size: 10px;
}

.sx-premium-product-info .evidence-status {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 17px;
  font-size: 10px;
}

.sx-premium-product-info .evidence-status span {
  padding: 7px 10px;
  border: 1px solid #e0e9f6;
  background: #f7faff;
  border-radius: 7px;
}

.sx-premium-product-info .evidence-status span:first-child {
  color: #1d5be0;
  border-color: #d9e8ff;
  background: #eef5ff;
}

/* Icon-enhanced source-backed KPI cards */
.detail-kpis .sx-premium-kpi {
  min-height: 145px;
  padding: 17px;
  border-radius: 13px;
  background: linear-gradient(145deg, #fff, #f9fbff);
}

.sx-premium-kpi-head {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.sx-premium-kpi-icon {
  display: inline-grid;
  flex: 0 0 33px;
  place-items: center;
  width: 33px;
  height: 33px;
  border-radius: 9px;
  background: #eaf2ff;
  color: #2563eb;
  font-size: 17px;
  font-weight: 800;
}

.sx-premium-kpi-head small {
  color: #667b9c;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.detail-kpis .sx-premium-kpi strong {
  margin: 16px 0 7px;
  color: #14284b;
  font-size: clamp(17px, 1.55vw, 25px);
}

.detail-kpis .sx-premium-kpi > span {
  color: #8190a8;
  font-size: 10px;
}

@media (max-width: 900px) {
  .sx-premium-hero {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 19px;
  }

  .sx-premium-gallery .hero-image {
    height: 200px;
  }
}

@media (max-width: 700px) {
  .sx-premium-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .sx-premium-gallery {
    width: min(100%, 310px);
    margin: auto;
  }

  .sx-premium-product-info h1 {
    font-size: 23px;
  }

  .detail-kpis .sx-premium-kpi {
    min-height: 120px;
    padding: 13px;
  }
}


/* STOREDX V2-203H NAVIGATION */

/* Premium navy navigation */
#sidebar {
  background: linear-gradient(180deg, #101b31 0%, #101827 100%);
  border-right: 1px solid #253650;
  color: #aabbd6;
}

#sidebar .brand {
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.9px;
}

#sidebar .brand b {
  color: #73a8ff;
}

#sidebar .logo {
  background: linear-gradient(145deg, #3b82f6, #1555da);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .24);
}

#sidebar .workspace {
  background: #162640;
  border-color: #2a4162;
  border-radius: 11px;
}

#sidebar .workspace strong {
  color: #edf4ff;
}

#sidebar .nav-label {
  color: #7186a8;
  font-size: 9px;
  letter-spacing: 1.5px;
}

#sidebar nav {
  gap: 5px;
}

#sidebar nav > a {
  min-height: 43px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #a8bbd7;
  font-weight: 600;
  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease;
}

#sidebar nav > a:hover {
  color: #fff;
  background: #1a2b46;
  border-color: #2a456c;
}

#sidebar nav > a.active {
  color: #fff;
  background: linear-gradient(95deg, #2563eb, #1950c2);
  border-color: #3978fb;
  box-shadow: 0 5px 13px rgba(16, 72, 191, .23);
}

#sidebar nav > a > span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 23px;
  min-width: 23px;
  height: 23px;
  font-size: 17px;
}

#sidebar nav small {
  background: #203555;
  border-color: #344d70;
  color: #d6e5ff;
}

#sidebar .sidebar-bottom > a:first-child {
  background: linear-gradient(145deg, #1b3155, #172945);
  border: 1px solid #375481;
  border-radius: 11px;
  color: #c5dcff;
  padding: 16px 13px;
  line-height: 1.65;
}

#sidebar .sidebar-bottom > a:first-child:hover {
  background: #244575;
}

#sidebar .profile {
  border-top-color: #2d3c53;
}

/* Premium top navigation */
header {
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid #e4ebf6;
  box-shadow: 0 1px 7px rgba(16, 40, 78, .025);
}

header .upgrade {
  color: #2058d6;
  border: 1px solid #c9ddff;
  background: #f0f6ff;
  border-radius: 8px;
  font-weight: 750;
}

header .upgrade:hover {
  background: #e2edff;
}

header .region select {
  color: #19365f;
  font-weight: 650;
}

/* Research navigation */
.research-nav {
  gap: 5px;
  background: #fff;
  border: 1px solid #e5ebf6;
  border-radius: 11px;
  padding: 5px 7px 0;
  box-shadow: 0 3px 12px rgba(20, 56, 108, .028);
}

.research-nav button {
  padding: 13px 12px;
  font-size: 11px;
  font-weight: 650;
  color: #71839e;
}

.research-nav button.active {
  color: #1858dc;
  background: #f1f6ff;
  border-bottom-color: #2563eb;
}

/* General workspace */
body {
  background: #f4f7fc;
  color: #17294a;
}

main {
  max-width: 1780px;
}

.breadcrumb {
  color: #8291aa;
}

.breadcrumb a {
  color: #2563eb;
  font-weight: 650;
}

.page-heading .eyebrow {
  color: #2563eb;
}

.page-heading h1 {
  color: #112448;
}

/* Section cards */
.detail-columns {
  gap: 17px;
}

.research-content .panel,
.research-content .detail-columns > .panel {
  border-radius: 13px;
}

.research-content .evidence-grid {
  gap: 18px;
}

.research-content .evidence-grid > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.research-content .chart-summary {
  background: linear-gradient(120deg, #f8fbff, #fff);
}

.research-content .chart-summary strong {
  color: #1a4bc2;
}

.research-content .chart-note {
  color: #7185a2;
  font-size: 10px;
}

/* Source evidence */
.research-content .evidence-grid b,
.research-content .evidence-grid strong {
  color: #203a65;
}

@media (max-width: 700px) {
  #sidebar {
    box-shadow: 12px 0 32px rgba(10, 28, 59, .25);
  }

  .research-nav {
    padding: 3px;
    gap: 3px;
  }

  .research-nav button {
    padding: 11px 9px;
  }

  header {
    padding: 0 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sidebar nav > a {
    transition: none;
  }
}


/* STOREDX V2-204A-R2 — APPROVED DASHBOARD LAYOUT */

body {
  background: #f2f7fd;
}

main {
  padding: 16px 20px 28px;
}

.breadcrumb {
  margin-bottom: 12px;
}

.panel {
  margin-bottom: 12px;
  border-radius: 11px;
}

.sx-v204-hero {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 18px;
  padding: 13px;
  min-height: 185px;
  align-items: start;
  background: #fff;
}

.sx-v204-hero .sx-premium-gallery {
  width: 160px;
  min-width: 0;
}

.sx-v204-hero .hero-image {
  height: 150px;
  border-radius: 9px;
  background: #eff5fc;
}

.sx-v204-hero .hero-image img {
  padding: 9px;
}

.sx-v204-hero .thumbs {
  margin-top: 6px;
  gap: 5px;
}

.sx-v204-hero .thumbs button {
  width: 31px;
  height: 31px;
  border-radius: 6px;
}

.sx-v204-hero .product-info {
  padding: 1px 0;
  min-width: 0;
}

.sx-v204-hero .product-info h1 {
  font-size: clamp(17px, 1.45vw, 23px);
  line-height: 1.28;
  margin: 9px 0;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.sx-v204-hero .eyebrow {
  font-size: 9px;
  padding: 5px 8px;
}

.sx-v204-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px !important;
  font-size: 10px !important;
}

.sx-v204-meta-item {
  color: #647796 !important;
  padding-right: 10px;
  border-right: 1px solid #e0e8f4;
}

.sx-v204-meta-item:last-child {
  border-right: 0;
}

.sx-v204-hero .product-info > p {
  display: none;
}

.sx-v204-hero .product-price {
  margin: 10px 0;
  font-size: 19px;
}

.sx-v204-hero .product-price small {
  font-size: 10px;
}

.sx-v204-hero .evidence-status {
  margin-top: 9px;
  gap: 6px;
}

.sx-v204-hero .evidence-status span {
  padding: 5px 8px;
  font-size: 9px;
}

/* Four compact premium KPIs */

.detail-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.detail-kpis .sx-premium-kpi {
  min-height: 105px;
  padding: 12px 13px;
}

.detail-kpis .sx-premium-kpi strong {
  font-size: clamp(17px, 1.5vw, 23px);
  margin: 10px 0 5px;
  line-height: 1.3;
}

.sx-premium-kpi-head small {
  font-size: 10px;
}

.sx-premium-kpi-icon {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
}

/* Compact historical analytics */

.panel-head {
  padding: 12px 15px;
}

.sx-analytics-chart-grid {
  gap: 12px;
  padding: 0 12px 12px;
}

.sx-premium-chart {
  padding: 11px;
}

.sx-bestseller-history .sx-premium-chart svg {
  max-height: 165px !important;
}

/* Compact research navigation */

.research-nav {
  margin-bottom: 12px;
  gap: 4px;
}

.research-nav button {
  padding: 11px 9px;
  font-size: 10px;
}

.detail-columns {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.research-content .evidence-grid {
  padding: 14px;
  gap: 13px;
}

#sidebar {
  background: linear-gradient(180deg, #0e1a2d, #11233b);
}

@media (max-width: 1100px) {
  .detail-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .detail-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  main {
    padding: 14px;
  }

  .sx-v204-hero {
    grid-template-columns: 1fr;
  }

  .sx-v204-hero .sx-premium-gallery {
    width: min(100%, 250px);
    margin: auto;
  }

  .sx-v204-hero .hero-image {
    height: 200px;
  }

  .research-nav {
    top: 62px;
  }
}


/* STOREDX_V2_204B */

/* Approved mockup: bestseller + brand badges */
.sx-v204-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 2px 0 8px;
}

.sx-v204-bestseller,
.sx-v204-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.sx-v204-bestseller {
  color: #058653;
  background: #eafaf1;
  border: 1px solid #bdebd3;
}

.sx-v204-bestseller span {
  color: #0ba968;
}

.sx-v204-brand-badge {
  color: #1859de;
  background: #edf4ff;
  border: 1px solid #d8e7ff;
}

/* Compact sales section */
.sx-sales-history,
.sx-bestseller-history {
  border: 1px solid #dfe8f5;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 14px rgba(23,57,110,.035);
}

.sx-sales-history .panel-head,
.sx-bestseller-history .panel-head {
  padding: 12px 14px;
}

.sx-sales-history .kpi,
.sx-bestseller-history .kpi {
  border-radius: 9px;
  border-color: #e1eaf7;
  background: #fff;
  box-shadow: none;
}

.sx-sales-history .kpi strong {
  color: #102b59;
  font-weight: 800;
}

.sx-sales-history .kpi small,
.sx-bestseller-history .kpi small {
  color: #7185a3;
}

.sx-sales-history .kpi span,
.sx-bestseller-history .kpi span {
  color: #8294ad;
}

/* Historical data panels */
.sx-bestseller-history .sx-premium-chart {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #dce8f9;
}

.sx-chart-title {
  color: #172d56;
}

.sx-chart-latest {
  color: #1354da;
  background: #ecf4ff;
}

.sx-analytics-chart-grid {
  align-items: stretch;
}

/* Research tabs */
.research-nav {
  background: #fff;
  border: 1px solid #e5edf7;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(20,55,110,.025);
}

.research-nav button {
  font-weight: 650;
}

.research-nav button.active {
  background: #f0f6ff;
  color: #1760e7;
  border-bottom-color: #1760e7;
}

/* Evidence and overview cards */
.research-content .panel {
  background: #fff;
  border-radius: 11px;
  border-color: #e2eaf6;
  box-shadow: 0 3px 12px rgba(20,55,110,.035);
}

.research-content .panel-head {
  background: linear-gradient(
    110deg,
    #fbfdff,
    #fff
  );
}

.research-content .panel-head h2 {
  color: #182b50;
  font-weight: 800;
}

.research-content .evidence-grid {
  align-items: start;
}

.research-content .evidence-grid > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.research-content .evidence-grid small {
  color: #7890b0;
}

.research-content .evidence-grid b {
  color: #193564;
  font-weight: 750;
}

.research-content .chart-summary {
  padding: 15px 16px 8px;
}

.research-content .chart-summary strong {
  color: #1b58cf;
}

/* Upgrade card */
#sidebar .sidebar-bottom > a:first-child {
  border-radius: 11px;
  background: linear-gradient(
    145deg,
    #1c3966,
    #142949
  );
  border: 1px solid #3a5d8c;
  color: #e0ecff;
  box-shadow: 0 5px 20px rgba(4,15,38,.12);
}

#sidebar .sidebar-bottom > a:first-child:hover {
  background: #254779;
}

/* Desktop density */
@media (min-width: 1200px) {
  .sx-sales-history .kpi,
  .sx-bestseller-history .kpi {
    padding: 13px 15px;
  }

  .sx-premium-chart .sx-chart-title {
    margin-bottom: 1px;
  }
}

/* Mobile */
@media (max-width: 700px) {
  .sx-v204-badges {
    margin-top: 5px;
  }

  .sx-v204-bestseller,
  .sx-v204-brand-badge {
    font-size: 9px;
  }

  .sx-sales-history .panel-head,
  .sx-bestseller-history .panel-head {
    padding: 11px;
  }
}


/* STOREDX_V2_204C — Premium functional research cards */

.sx-v204-research-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.sx-v204-research-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 6px 9px;
  position: relative;
  min-width: 0;
  min-height: 96px;
  padding: 13px 11px;
  text-align: left;
  background: #fff;
  color: #19335d;
  border: 1px solid #e1eaf6;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(20,55,110,.03);
}

.sx-v204-research-card:hover {
  border-color: #a7c5fa;
  background: #f9fbff;
  box-shadow: 0 5px 17px rgba(37,99,235,.075);
}

.sx-v204-research-card:focus-visible {
  outline: 3px solid #93b8ff;
  outline-offset: 2px;
}

.sx-v204-card-icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border-radius: 9px;
  background: #eaf2ff;
  color: #2563eb;
  font-size: 20px;
  font-weight: 800;
}

.sx-v204-research-card strong {
  font-size: 11px;
  font-weight: 800;
  color: #142c54;
  line-height: 1.45;
}

.sx-v204-research-card small {
  grid-column: 2;
  color: #8191aa;
  font-size: 9px;
  line-height: 1.55;
}

.sx-v204-card-arrow {
  position: absolute;
  right: 10px;
  bottom: 8px;
  color: #2563eb;
  font-size: 15px;
}

@media (max-width: 1250px) {
  .sx-v204-research-cards {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

@media (max-width: 850px) {
  .sx-v204-research-cards {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 480px) {
  .sx-v204-research-cards {
    grid-template-columns: minmax(0,1fr);
  }
}


/* STOREDX V2-204D — PRODUCT ACTIONS */

.sx-v204-hero-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}

.sx-v204-save-button,
.sx-v204-trends-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.sx-v204-save-button {
  background: #2563eb;
  border: 1px solid #2563eb;
  color: #fff;
}

.sx-v204-save-button:hover {
  background: #194fc4;
}

.sx-v204-save-button[aria-pressed="true"] {
  background: #eaf3ff;
  color: #1857d7;
  border-color: #bdd5ff;
}

.sx-v204-trends-button {
  background: #fff;
  border: 1px solid #d2e0f5;
  color: #244777;
}

.sx-v204-trends-button:hover {
  background: #f2f7ff;
  border-color: #a9c6f5;
}

.sx-v204-save-note {
  display: block;
  margin-top: 7px;
  font-size: 9px;
  color: #899ab2;
}

.sx-bestseller-history {
  scroll-margin-top: 95px;
}

@media (max-width: 700px) {
  .sx-v204-hero-actions {
    gap: 8px;
  }

  .sx-v204-save-button,
  .sx-v204-trends-button {
    padding: 10px 12px;
    font-size: 10px;
  }
}


/* STOREDX V2-204H — LARGE PRODUCT IMAGE */

/* Give the main product image more horizontal space. */
.sx-v204-hero {
  grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);
  align-items: stretch;
  gap: 22px;
}

/* Remove the redundant thumbnail strip. */
.sx-v204-hero .thumbs {
  display: none !important;
}

/* Let the main image fill the gallery. */
.sx-v204-hero .sx-premium-gallery {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}

.sx-v204-hero .hero-image {
  width: 100%;
  height: 100%;
  min-height: 225px;
  max-height: 340px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f8fe;
}

.sx-v204-hero .hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 225px;
  max-height: 340px;
  object-fit: contain;
  padding: 10px;
}

@media (max-width: 900px) {
  .sx-v204-hero {
    grid-template-columns: minmax(185px, 36%) minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .sx-v204-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .sx-v204-hero .hero-image,
  .sx-v204-hero .hero-image img {
    height: 260px;
    min-height: 260px;
    max-height: 260px;
  }
}


/* STOREDX V2-204J — EXPANDED PRODUCT GALLERY */

@media (min-width: 701px) {
  .sx-v204-hero {
    align-items: stretch;
  }

  .sx-v204-hero .sx-premium-gallery {
    display: flex;
    align-self: stretch;
    min-height: 260px;
  }

  .sx-v204-hero .hero-image {
    flex: 1;
    height: auto;
    min-height: 260px;
    max-height: none;
  }

  .sx-v204-hero .hero-image img {
    height: 100%;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    padding: 8px;
  }
}

.sx-v204-hero .thumbs {
  display: none !important;
}