/* Recovered from WPCode 5456: Riot App Layout CSS. */
/* =========================================================
   RIOT APP LAYOUT + THEME CSS
   RESET TO STABLE BASELINE
   - Full-width Astra overrides
   - Dealer portal Riot theme
   - Sticky TOP portal header only
   - Matrix header row renders normally in-table
   - Pills / centering / grid polish preserved
   ========================================================= */

/* =========================================================
   RIOT DESIGN TOKENS
   ========================================================= */
body.page-id-5398,
body.page-id-2259 {
  --riot-bg: #050505;
  --riot-bg-2: #0b0b0b;
  --riot-panel: #111111;
  --riot-panel-2: #171717;
  --riot-panel-3: #1d1d1d;
  --riot-border: #2a2a2a;
  --riot-border-2: #353535;
  --riot-text: #f4f7fb;
  --riot-muted: #aab2bf;
  --riot-lime: #9bff00;
  --riot-purple: #7a00ff;
  --riot-blue: #79c9ff;
  --riot-shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
}

/* =========================================================
   FULL-WIDTH PAGE CONTAINERS
   ========================================================= */
html body.page-id-5398 .site,
html body.page-id-5398 .site-content,
html body.page-id-5398 .ast-container,
html body.page-id-5398 .entry-content,
html body.page-id-5398 .ast-article-post,
html body.page-id-5398 .content-area,
html body.page-id-5398 #primary,
html body.page-id-5398 #main,
html body.page-id-5398 article.page,

html body.page-id-2259 .site,
html body.page-id-2259 .site-content,
html body.page-id-2259 .ast-container,
html body.page-id-2259 .entry-content,
html body.page-id-2259 .ast-article-post,
html body.page-id-2259 .content-area,
html body.page-id-2259 #primary,
html body.page-id-2259 #main,
html body.page-id-2259 article.page {
  max-width: 100% !important;
  width: 100% !important;
}

html body.page-id-5398 .ast-container,
html body.page-id-5398 .site-content > .ast-container,
html body.page-id-2259 .ast-container,
html body.page-id-2259 .site-content > .ast-container {
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

html body.page-id-5398 .content-area,
html body.page-id-5398 #primary,
html body.page-id-5398 #main,
html body.page-id-5398 .entry-content,

html body.page-id-2259 .content-area,
html body.page-id-2259 #primary,
html body.page-id-2259 #main,
html body.page-id-2259 .entry-content {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

html body.page-id-5398 .entry-content > *,
html body.page-id-2259 .entry-content > * {
  max-width: 100% !important;
}

/* =========================================================
   DEALER PORTAL APP CONTAINER
   ========================================================= */
html body.page-id-5398 [id^="riot-dealer-portal-app"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  color: var(--riot-text) !important;
}

html body.page-id-5398 [id^="riot-dealer-portal-app"] .riot-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 4px !important;
}

html body.page-id-5398 [id^="riot-dealer-portal-app"] .riot-wrap {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  background: linear-gradient(180deg, var(--riot-bg-2) 0%, var(--riot-bg) 100%) !important;
  border: 1px solid var(--riot-border) !important;
  border-radius: 22px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 0 0 1px rgba(122, 0, 255, 0.05),
    0 0 32px rgba(122, 0, 255, 0.06),
    0 0 42px rgba(155, 255, 0, 0.04),
    var(--riot-shadow) !important;
}

/* =========================================================
   TRUCK DATABASE APP CONTAINER
   ========================================================= */
html body.page-id-2259 #riot-truck-app {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* =========================================================
   SHARED DEALER PORTAL THEME
   ========================================================= */
[id^="riot-dealer-portal-app"] .riot-wrap {
  color: var(--riot-text) !important;
}

/* Headings / section titles */
[id^="riot-dealer-portal-app"] .riot-group-title,
[id^="riot-dealer-portal-app"] .riot-accordion-title,
[id^="riot-dealer-portal-app"] .riot-section-title {
  color: var(--riot-lime) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
}

[id^="riot-dealer-portal-app"] .riot-subgroup-title,
[id^="riot-dealer-portal-app"] .riot-accordion-sub,
[id^="riot-dealer-portal-app"] .riot-group-sub,
[id^="riot-dealer-portal-app"] .riot-muted,
[id^="riot-dealer-portal-app"] .riot-subgroup-sub,
[id^="riot-dealer-portal-app"] .riot-sub {
  color: var(--riot-muted) !important;
}

/* Stat cards */
[id^="riot-dealer-portal-app"] .riot-stat {
  background: linear-gradient(180deg, var(--riot-panel-2) 0%, var(--riot-panel) 100%) !important;
  border: 1px solid var(--riot-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 6px 16px rgba(0,0,0,0.28) !important;
}

[id^="riot-dealer-portal-app"] .riot-stat-k {
  color: var(--riot-muted) !important;
}

[id^="riot-dealer-portal-app"] .riot-stat-v,
[id^="riot-dealer-portal-app"] .riot-price {
  color: var(--riot-lime) !important;
  font-weight: 800 !important;
}

/* Toolbar inputs */
[id^="riot-dealer-portal-app"] .riot-toolbar input,
[id^="riot-dealer-portal-app"] .riot-toolbar select {
  background: var(--riot-panel-2) !important;
  color: var(--riot-text) !important;
  border: 1px solid var(--riot-border-2) !important;
  border-radius: 14px !important;
}

[id^="riot-dealer-portal-app"] .riot-toolbar input:focus,
[id^="riot-dealer-portal-app"] .riot-toolbar select:focus {
  outline: none !important;
  border-color: var(--riot-purple) !important;
  box-shadow: 0 0 0 3px rgba(122, 0, 255, 0.14) !important;
}

/* Buttons */
[id^="riot-dealer-portal-app"] .riot-actions button {
  background: var(--riot-panel-2) !important;
  color: var(--riot-text) !important;
  border: 1px solid var(--riot-border-2) !important;
  border-radius: 14px !important;
  transition: all 0.16s ease !important;
}

[id^="riot-dealer-portal-app"] .riot-actions button:hover {
  border-color: var(--riot-purple) !important;
  box-shadow: 0 0 0 2px rgba(122, 0, 255, 0.12) !important;
}

[id^="riot-dealer-portal-app"] .riot-actions button.riot-primary {
  background: linear-gradient(135deg, var(--riot-purple) 0%, #5b12d6 100%) !important;
  color: #fff !important;
  border-color: #5b12d6 !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 0 16px rgba(122, 0, 255, 0.18) !important;
}

[id^="riot-dealer-portal-app"] .riot-actions button.riot-primary:hover {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 0 20px rgba(122, 0, 255, 0.26),
    0 0 8px rgba(155, 255, 0, 0.10) !important;
}

/* Accordion / groups */
[id^="riot-dealer-portal-app"] .riot-group,
[id^="riot-dealer-portal-app"] .riot-accordion {
  margin-bottom: 20px !important;
  border: 1px solid var(--riot-border) !important;
  background: linear-gradient(180deg, var(--riot-panel) 0%, #0d0d0d 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.025),
    0 10px 22px rgba(0,0,0,0.34) !important;
}

[id^="riot-dealer-portal-app"] .riot-group-head,
[id^="riot-dealer-portal-app"] .riot-accordion-head {
  background: linear-gradient(180deg, #191919 0%, #111111 100%) !important;
  border-bottom: 1px solid var(--riot-border) !important;
}

[id^="riot-dealer-portal-app"] .riot-group-head:hover,
[id^="riot-dealer-portal-app"] .riot-accordion-head:hover {
  background: linear-gradient(180deg, #1f1f1f 0%, #151515 100%) !important;
}

/* Subgroups */
[id^="riot-dealer-portal-app"] .riot-subgroup {
  border: 1px solid var(--riot-border) !important;
  background: linear-gradient(180deg, #151515 0%, #101010 100%) !important;
}

[id^="riot-dealer-portal-app"] .riot-subgroup-head {
  background: linear-gradient(180deg, #1a1a1a 0%, #121212 100%) !important;
  border-bottom: 1px solid var(--riot-border) !important;
}

/* =========================================================
   STICKY TOP PORTAL HEADER ONLY
   ========================================================= */
[id^="riot-dealer-portal-app"] .riot-head,
[id^="riot-dealer-portal-app"] .riot-toolbar,
[id^="riot-dealer-portal-app"] .riot-actions {
  position: sticky !important;
  z-index: 40 !important;
}

[id^="riot-dealer-portal-app"] .riot-head {
  top: 0 !important;
  padding-top: 8px !important;
  background: linear-gradient(180deg, rgba(5,5,5,0.98) 0%, rgba(5,5,5,0.94) 100%) !important;
  backdrop-filter: blur(8px);
}

[id^="riot-dealer-portal-app"] .riot-toolbar {
  top: 110px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  background: linear-gradient(180deg, rgba(5,5,5,0.98) 0%, rgba(5,5,5,0.94) 100%) !important;
  backdrop-filter: blur(8px);
}

[id^="riot-dealer-portal-app"] .riot-actions {
  top: 192px !important;
  padding-top: 8px !important;
  padding-bottom: 12px !important;
  margin-bottom: 8px !important;
  background: linear-gradient(180deg, rgba(5,5,5,0.98) 0%, rgba(5,5,5,0.94) 100%) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* =========================================================
   MATRIX / GRID POLISH
   NOTE: matrix header row is NOT sticky here
   ========================================================= */
[id^="riot-dealer-portal-app"] .riot-table-wrap {
  background: #0b0b0b !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 16px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  position: relative !important;
}

[id^="riot-dealer-portal-app"] .riot-grid {
  min-width: 1400px !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: #0b0b0b !important;
}

[id^="riot-dealer-portal-app"] .riot-grid th,
[id^="riot-dealer-portal-app"] .riot-grid td {
  padding: 8px !important;
  border-right: 1px solid rgba(255,255,255,0.16) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

[id^="riot-dealer-portal-app"] .riot-grid th:last-child,
[id^="riot-dealer-portal-app"] .riot-grid td:last-child {
  border-right: none !important;
}

[id^="riot-dealer-portal-app"] .riot-grid tr:last-child td {
  border-bottom: none !important;
}

[id^="riot-dealer-portal-app"] .riot-grid th {
  background: #121212 !important;
  color: var(--riot-blue) !important;
}

[id^="riot-dealer-portal-app"] .riot-grid td {
  background: #0c0c0c !important;
  color: var(--riot-text) !important;
}

/* Center everything in non-label cells */
[id^="riot-dealer-portal-app"] .riot-grid td:not(.riot-rowlabel) {
  text-align: center !important;
  vertical-align: middle !important;
}

[id^="riot-dealer-portal-app"] .riot-grid td:not(.riot-rowlabel) > * {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

[id^="riot-dealer-portal-app"] .riot-grid td:not(.riot-rowlabel) .riot-price,
[id^="riot-dealer-portal-app"] .riot-grid td:not(.riot-rowlabel) .riot-muted,
[id^="riot-dealer-portal-app"] .riot-grid td:not(.riot-rowlabel) .riot-stock,
[id^="riot-dealer-portal-app"] .riot-grid td:not(.riot-rowlabel) .riot-qty {
  display: block;
}

[id^="riot-dealer-portal-app"] .riot-grid td:not(.riot-rowlabel) .riot-price {
  margin-bottom: 8px !important;
}

[id^="riot-dealer-portal-app"] .riot-grid td:not(.riot-rowlabel) .riot-qty {
  margin-bottom: 8px !important;
}

[id^="riot-dealer-portal-app"] .riot-grid td:not(.riot-rowlabel) .riot-muted {
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
}

[id^="riot-dealer-portal-app"] .riot-grid td:not(.riot-rowlabel) .riot-stock {
  display: inline-flex !important;
  width: auto !important;
}

[id^="riot-dealer-portal-app"] .riot-rowlabel {
  text-align: left !important;
  vertical-align: top !important;
}

/* Qty boxes */
[id^="riot-dealer-portal-app"] .riot-qty {
  background: #181818 !important;
  color: var(--riot-text) !important;
  border: 1px solid #343434 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

[id^="riot-dealer-portal-app"] .riot-qty:focus {
  outline: none !important;
  border-color: var(--riot-purple) !important;
  box-shadow: 0 0 0 3px rgba(122, 0, 255, 0.14) !important;
}

/* Fitment chip */
[id^="riot-dealer-portal-app"] .riot-fit-chip {
  background: rgba(122, 0, 255, 0.12) !important;
  color: #e7d8ff !important;
  border: 1px solid rgba(122, 0, 255, 0.35) !important;
}

[id^="riot-dealer-portal-app"] .riot-fit-pop {
  background: #0d0d0d !important;
  border: 1px solid #303030 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.38) !important;
}

[id^="riot-dealer-portal-app"] .riot-fit-title {
  color: var(--riot-lime) !important;
}

[id^="riot-dealer-portal-app"] .riot-fit-list {
  color: var(--riot-text) !important;
}

/* Stock chips */
[id^="riot-dealer-portal-app"] .riot-stock {
  background: #171717 !important;
  border: 1px solid #303030 !important;
}

[id^="riot-dealer-portal-app"] .riot-stock.in_stock {
  color: var(--riot-lime) !important;
}

[id^="riot-dealer-portal-app"] .riot-stock.backorder {
  color: #d8b4ff !important;
}

[id^="riot-dealer-portal-app"] .riot-stock.unavailable {
  color: #ff8f8f !important;
}

/* =========================================================
   HEADER PILLS
   ========================================================= */
[id^="riot-dealer-portal-app"] .riot-grid th[data-label] {
  color: transparent !important;
  font-size: 0 !important;
  text-align: center !important;
}

[id^="riot-dealer-portal-app"] .riot-grid th[data-label]::before {
  content: attr(data-label);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #ffffff;
  background: #1b1b1b;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 1px rgba(255,255,255,0.02);
}

/* =========================================================
   DUROMETER PILLS
   ========================================================= */
[id^="riot-dealer-portal-app"] .riot-grid th[data-label="75A"]::before {
  background: linear-gradient(180deg, #45c8ff 0%, #1fa9e8 100%) !important;
  color: #ffffff !important;
  border-color: rgba(105,220,255,0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 0 14px rgba(69,200,255,0.28), 0 0 26px rgba(69,200,255,0.10) !important;
}

[id^="riot-dealer-portal-app"] .riot-grid th[data-label="77.5A"]::before {
  background: linear-gradient(180deg, #ff4fbf 0%, #ff1493 100%) !important;
  color: #ffffff !important;
  border-color: rgba(255,105,180,0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 14px rgba(255,79,191,0.28), 0 0 26px rgba(255,20,147,0.10) !important;
}

[id^="riot-dealer-portal-app"] .riot-grid th[data-label="80A"]::before {
  background: linear-gradient(180deg, #f7ff4a 0%, #d8f500 100%) !important;
  color: #111111 !important;
  border-color: rgba(240,255,120,0.60) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 0 14px rgba(235,255,0,0.30), 0 0 26px rgba(235,255,0,0.12) !important;
}

[id^="riot-dealer-portal-app"] .riot-grid th[data-label="82.5A"]::before {
  background: linear-gradient(180deg, #7b1e2b 0%, #631324 100%) !important;
  color: #ffffff !important;
  border-color: rgba(140,45,65,0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 14px rgba(123,30,43,0.28), 0 0 26px rgba(99,19,36,0.12) !important;
}

[id^="riot-dealer-portal-app"] .riot-grid th[data-label="85A"]::before {
  background: linear-gradient(180deg, #8c6cff 0%, #6f42c1 100%) !important;
  color: #ffffff !important;
  border-color: rgba(155,120,255,0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 14px rgba(140,108,255,0.30), 0 0 26px rgba(111,66,193,0.12) !important;
}

[id^="riot-dealer-portal-app"] .riot-grid th[data-label="87.5A"]::before {
  background: linear-gradient(180deg, #aeb5bf 0%, #7e8794 100%) !important;
  color: #111111 !important;
  border-color: rgba(190,198,210,0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 0 14px rgba(170,178,190,0.16), 0 0 26px rgba(126,135,148,0.10) !important;
}

[id^="riot-dealer-portal-app"] .riot-grid th[data-label="90A"]::before {
  background: linear-gradient(180deg, #1fa38a 0%, #1c6b4f 100%) !important;
  color: #ffffff !important;
  border-color: rgba(70,180,150,0.52) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 0 14px rgba(31,163,138,0.26), 0 0 26px rgba(28,107,79,0.12) !important;
}

[id^="riot-dealer-portal-app"] .riot-grid th[data-label="92.5A"]::before {
  background: linear-gradient(180deg, #3a78ff 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border-color: rgba(88,140,255,0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 14px rgba(58,120,255,0.30), 0 0 26px rgba(29,78,216,0.12) !important;
}

[id^="riot-dealer-portal-app"] .riot-grid th[data-label="95A"]::before {
  background: linear-gradient(180deg, #b7ff2a 0%, #8fd13f 100%) !important;
  color: #111111 !important;
  border-color: rgba(180,255,70,0.60) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 0 14px rgba(155,255,0,0.34), 0 0 26px rgba(155,255,0,0.14) !important;
}

[id^="riot-dealer-portal-app"] .riot-grid th[data-label="97.5A"]::before {
  background: linear-gradient(180deg, #ff9f1a 0%, #ff6a00 100%) !important;
  color: #ffffff !important;
  border-color: rgba(255,170,70,0.58) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 0 14px rgba(255,106,0,0.30), 0 0 26px rgba(255,106,0,0.12) !important;
}

[id^="riot-dealer-portal-app"] .riot-grid th[data-label="100A"]::before,
[id^="riot-dealer-portal-app"] .riot-grid th[data-label="10A"]::before {
  background: linear-gradient(180deg, #ff4d4d 0%, #e11d48 100%) !important;
  color: #ffffff !important;
  border-color: rgba(255,110,110,0.58) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 14px rgba(255,77,77,0.32), 0 0 26px rgba(225,29,72,0.14) !important;
}

/* =========================================================
   MATERIAL PILLS
   ========================================================= */
[id^="riot-dealer-portal-app"] .riot-grid th[data-label="Delrin"]::before,
[id^="riot-dealer-portal-app"] .riot-grid th[data-label="DELRIN"]::before,
[id^="riot-dealer-portal-app"] .riot-grid th[data-label="DuPont™ Delrin® 100"]::before {
  background: linear-gradient(180deg, #ffffff 0%, #e8edf2 100%) !important;
  color: #111111 !important;
  border-color: rgba(255,255,255,0.85) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 0 14px rgba(255,255,255,0.20), 0 0 26px rgba(255,255,255,0.08) !important;
}

[id^="riot-dealer-portal-app"] .riot-grid th[data-label="Ceram P"]::before,
[id^="riot-dealer-portal-app"] .riot-grid th[data-label="CERAM P"]::before,
[id^="riot-dealer-portal-app"] .riot-grid th[data-label="Tivar™ Ceram P™"]::before {
  background: linear-gradient(180deg, #dfff76 0%, #c7ff46 100%) !important;
  color: #111111 !important;
  border-color: rgba(220,255,130,0.78) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 14px rgba(199,255,70,0.28), 0 0 26px rgba(199,255,70,0.10) !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  [id^="riot-dealer-portal-app"] .riot-toolbar {
    grid-template-columns: 1fr 1fr !important;
    top: 140px !important;
  }

  [id^="riot-dealer-portal-app"] .riot-actions {
    top: 255px !important;
  }
}

@media (max-width: 768px) {
  html body.page-id-5398 [id^="riot-dealer-portal-app"] .riot-grid {
    min-width: 1100px !important;
  }

  [id^="riot-dealer-portal-app"] .riot-head {
    top: 0 !important;
  }

  [id^="riot-dealer-portal-app"] .riot-toolbar {
    top: 150px !important;
  }

  [id^="riot-dealer-portal-app"] .riot-actions {
    top: 300px !important;
  }
}

/* =========================================================
   MATCH PLUGIN MATRIX HEADER BG TO PORTAL THEME
   v0.6.5 plugin-rendered matrix headers
   ========================================================= */

[id^="riot-dealer-portal-app"] .riot-matrix {
  background: #0d1625 !important;
  border-color: #263346 !important;
}

[id^="riot-dealer-portal-app"] .riot-matrix-head {
  background: #121212 !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

[id^="riot-dealer-portal-app"] .riot-matrix-head-grid {
  background: #121212 !important;
}

[id^="riot-dealer-portal-app"] .riot-matrix-head-cell {
  background: #121212 !important;
  border-right: 1px solid rgba(255,255,255,0.16) !important;
}

[id^="riot-dealer-portal-app"] .riot-matrix-head-cell:last-child {
  border-right: none !important;
}

[id^="riot-dealer-portal-app"] .riot-matrix-label-cell {
  background: #121212 !important;
  color: var(--riot-blue) !important;
}

/* =========================================================
   FIXED STICKY MATRIX HEADERS
   v0.6.5
   ========================================================= */

/* let sticky escape the matrix shell */
[id^="riot-dealer-portal-app"] .riot-matrix {
  position: relative !important;
  overflow: visible !important;
}

/* keep only the table area clipped/scrolled horizontally */
[id^="riot-dealer-portal-app"] .riot-table-wrap {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* sticky matrix header */
[id^="riot-dealer-portal-app"] .riot-matrix-head {
  position: sticky !important;
  top: 252px !important;
  z-index: 30 !important;
  background: #121212 !important;
}

/* keep the header visually solid while sticky */
[id^="riot-dealer-portal-app"] .riot-matrix-head,
[id^="riot-dealer-portal-app"] .riot-matrix-head-grid,
[id^="riot-dealer-portal-app"] .riot-matrix-head-cell,
[id^="riot-dealer-portal-app"] .riot-matrix-label-cell {
  background: #121212 !important;
}

/* subtle edge under sticky bar */
[id^="riot-dealer-portal-app"] .riot-matrix-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 10px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 100%);
}

/* responsive offsets */
@media (max-width: 1100px) {
  [id^="riot-dealer-portal-app"] .riot-matrix-head {
    top: 315px !important;
  }
}

@media (max-width: 768px) {
  [id^="riot-dealer-portal-app"] .riot-matrix-head {
    top: 360px !important;
  }
}

/* =========================================================
   UNTRAP STICKY MATRIX HEADERS
   ========================================================= */

/* these containers were clipping the sticky matrix header */
[id^="riot-dealer-portal-app"] .riot-group,
[id^="riot-dealer-portal-app"] .riot-subgroup {
  overflow: visible !important;
}

/* body areas also need to allow sticky children to escape */
[id^="riot-dealer-portal-app"] .riot-group-body,
[id^="riot-dealer-portal-app"] .riot-subgroup-body {
  overflow: visible !important;
}

/* matrix shell must not clip sticky header */
[id^="riot-dealer-portal-app"] .riot-matrix {
  position: relative !important;
  overflow: visible !important;
}

/* only the table area should scroll horizontally */
[id^="riot-dealer-portal-app"] .riot-table-wrap {
  overflow-x: auto !important;
  overflow-y: visible !important;
  position: relative !important;
}

/* actual sticky matrix header */
[id^="riot-dealer-portal-app"] .riot-matrix-head {
  position: sticky !important;
  top: 252px !important;
  z-index: 60 !important;
  background: #121212 !important;
}

/* keep the whole header visually solid */
[id^="riot-dealer-portal-app"] .riot-matrix-head,
[id^="riot-dealer-portal-app"] .riot-matrix-head-grid,
[id^="riot-dealer-portal-app"] .riot-matrix-head-cell,
[id^="riot-dealer-portal-app"] .riot-matrix-label-cell {
  background: #121212 !important;
}

/* shadow edge under sticky matrix header */
[id^="riot-dealer-portal-app"] .riot-matrix-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 10px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 100%);
}

@media (max-width: 1100px) {
  [id^="riot-dealer-portal-app"] .riot-matrix-head {
    top: 315px !important;
  }
}

@media (max-width: 768px) {
  [id^="riot-dealer-portal-app"] .riot-matrix-head {
    top: 360px !important;
  }
}

/* Recovered from WPCode 5459: Product Page CSS. */
/* =========================================================
   PRODUCT PAGE CSS
   RIOT PRODUCT CONTENT SYSTEM — GOLD STANDARD THEME v2

   PURPOSE
   - Premium tab styling for Woo product pages
   - Better hierarchy, spacing, and readability
   - Supports Riot metadata-driven tab system
   ========================================================= */

.woocommerce div.product .woocommerce-tabs {
  position: relative;
  margin-top: 28px;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(180deg, #18222c 0%, #121920 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 12px 30px rgba(0,0,0,0.45);
}

.woocommerce div.product .woocommerce-tabs::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 22px;
  box-shadow:
    0 0 40px rgba(125,255,42,0.08),
    0 0 80px rgba(125,255,42,0.04);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  width: 100%;
  gap: 0;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: linear-gradient(180deg, #1f2a36 0%, #18222c 100%);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
  display: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 14px 16px !important;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,0.04);
  border-bottom: none !important;
  border-radius: 0;
  background: transparent;
  color: #a9b7c6 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:first-child a { border-top-left-radius: 22px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li:last-child a { border-top-right-radius: 22px; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  background: rgba(255,255,255,0.035);
  color: #ffffff !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  background: linear-gradient(135deg, #6f42c1 0%, #5a36a0 100%);
  color: #ffffff !important;
  box-shadow: inset 0 -3px 0 #7dff2a, 0 0 12px rgba(125,255,42,0.20);
  position: relative;
}

.woocommerce div.product .woocommerce-tabs .panel {
  position: relative;
  margin: 0 !important;
  padding: 24px !important;
  border: none !important;
  border-radius: 0 0 22px 22px !important;
  background: linear-gradient(180deg, #1a232d 0%, #131b22 100%);
  overflow: hidden;
}

.woocommerce div.product .woocommerce-tabs .panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(143, 209, 63, 0.10), 0 0 22px rgba(0, 142, 214, 0.08), 0 0 26px rgba(111, 77, 184, 0.10);
}

.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; }

.riot-inner-card {
  background: linear-gradient(180deg, #202a34 0%, #18212a 100%);
  border: 1px solid #2f3b47;
  border-radius: 16px;
  padding: 26px 24px 24px;
  color: #c7d3df;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.40), 0 10px 25px rgba(0,0,0,0.35);
}

.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li,
.woocommerce div.product .woocommerce-tabs .panel td,
.woocommerce div.product .woocommerce-tabs .panel th,
.riot-inner-card p,
.riot-inner-card li,
.riot-inner-card td,
.riot-inner-card th {
  color: #c7d4df;
  line-height: 1.85;
  font-size: 1.03rem;
}

.woocommerce div.product .woocommerce-tabs .panel p,
.riot-inner-card p {
  margin: 0 0 17px;
}

.woocommerce div.product .woocommerce-tabs .panel h3,
.riot-inner-card h3 {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 2rem;
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.025em;
  border-bottom: 1px solid rgba(121,201,255,0.16);
  padding-bottom: 12px;
}

.woocommerce div.product .woocommerce-tabs .panel h4,
.riot-inner-card h4 {
  margin: 28px 0 8px;
  color: #79c9ff;
  font-size: 1.02rem;
  line-height: 1.2;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.riot-kicker {
  display: block;
  margin: 0 0 10px;
  color: #8fd13f;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.woocommerce div.product .woocommerce-tabs .panel strong,
.riot-inner-card strong {
  color: #79c9ff;
  font-weight: 800;
}

.woocommerce div.product .woocommerce-tabs .panel em,
.riot-inner-card em {
  color: #9adf58;
}

.woocommerce div.product .woocommerce-tabs .panel a,
.riot-inner-card a {
  color: #4db6ff;
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.woocommerce div.product .woocommerce-tabs .panel a:hover,
.riot-inner-card a:hover { color: #83d0ff; }

.woocommerce div.product .woocommerce-tabs .panel ul,
.riot-inner-card ul {
  margin: 4px 0 20px 22px;
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs .panel li,
.riot-inner-card li { margin-bottom: 8px; }

.woocommerce div.product .woocommerce-tabs .panel ul li::marker,
.riot-inner-card ul li::marker { color: #6f42c1; }

.riot-notice,
.riot-notice * { color: #39FF14 !important; }

.riot-notice {
  border-left: 3px solid #7A00FF;
  padding-left: 10px;
  margin: 0 0 20px;
  line-height: 1.45;
  font-weight: 800;
  font-size: 1.18em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.riot-callout {
  margin: 18px 0 20px;
  padding: 12px 14px;
  border-left: 3px solid #8fd13f;
  border-radius: 0 10px 10px 0;
  background: rgba(121, 201, 255, 0.05);
  color: #d4dde6;
}

.riot-callout strong { color: #ffffff !important; }

.riot-highlight { color: #8fd13f; font-weight: 700; }

.riot-divider {
  height: 1px;
  margin: 20px 0 22px;
  background: linear-gradient(90deg, rgba(143,209,63,0.0) 0%, rgba(143,209,63,0.35) 50%, rgba(143,209,63,0.0) 100%);
  border: 0;
}

.riot-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 6px;
}

.riot-spec-grid > div {
  padding: 15px 16px;
  border: 1px solid #374454;
  border-radius: 14px;
  background: #27323d;
  color: #c7d4df;
  line-height: 1.55;
}

.riot-spec-grid > div strong { color: #8fd13f; }

.woocommerce div.product .woocommerce-tabs .shop_attributes {
  width: 100%;
  border: none !important;
  margin: 6px 0 0 !important;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.woocommerce div.product .woocommerce-tabs .shop_attributes th,
.woocommerce div.product .woocommerce-tabs .shop_attributes td {
  background: #27323d !important;
  border: 1px solid #374454 !important;
  padding: 14px 16px !important;
}

.woocommerce div.product .woocommerce-tabs .shop_attributes th {
  width: 30%;
  color: #8fd13f !important;
  font-weight: 800;
  border-radius: 12px 0 0 12px;
}

.woocommerce div.product .woocommerce-tabs .shop_attributes td {
  color: #d0dae3 !important;
  border-radius: 0 12px 12px 0;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
  border: 1px solid #374454;
  background: #27323d;
  border-radius: 14px;
  color: #d0dae3;
}

.woocommerce #review_form_wrapper { margin-top: 20px; }

.woocommerce #review_form #respond textarea,
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"] {
  background: #27323d;
  color: #d0dae3;
  border: 1px solid #3c4b5c;
  border-radius: 12px;
}

.woocommerce #review_form #respond label { color: #c7d4df; }

@media (max-width: 760px) {
  .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-size: 0.8rem;
    padding: 12px 10px !important;
  }
  .woocommerce div.product .woocommerce-tabs .panel { padding: 20px 14px !important; }
  .woocommerce div.product .woocommerce-tabs .panel h3,
  .riot-inner-card h3 { font-size: 1.6rem; }
  .riot-spec-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .woocommerce div.product .woocommerce-tabs ul.tabs { grid-template-columns: 1fr 1fr; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a { justify-content: flex-start; }
}

@media (max-width: 420px) {
  .woocommerce div.product .woocommerce-tabs ul.tabs { grid-template-columns: 1fr; }
}

/* Recovered from WPCode 5457: Product Variation UI CSS. */
/* =========================================================
   PRODUCT VARIATION UI CSS
   Spherical Relief radios + Astra variation pill polish

   PURPOSE
   - Hide Woo/Astra's raw dropdown for "Spherical Relief"
   - Show custom radio pills instead
   - Make selected/hover states feel consistent with Astra

   DEPENDS ON
   - Product Variation UI JS snippet
   ========================================================= */

/* ---------------------------------------------------------
   HIDE ORIGINAL SPHERICAL RELIEF LABEL + DEFAULT UI
   --------------------------------------------------------- */
tr.riot-spherical-row .label label {
  display: none !important;
}

tr.riot-spherical-row .value > * {
  display: none !important;
}

/* Re-show only our custom UI */
tr.riot-spherical-row .value > .riot-spherical-heading,
tr.riot-spherical-row .value > .riot-radio-group {
  display: block !important;
}

/* ---------------------------------------------------------
   CUSTOM HEADING
   --------------------------------------------------------- */
.riot-spherical-heading {
  font-size: 1rem;
  font-weight: 600;
  color: #24364d;
  margin: 0 0 8px 0;
}

/* ---------------------------------------------------------
   RADIO GROUP LAYOUT
   --------------------------------------------------------- */
.riot-radio-group {
  display: flex !important;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------
   PILL BUTTON LOOK
   --------------------------------------------------------- */
.riot-radio-option {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid #d7dbe0;
  border-radius: 4px;
  background: #fff;
  color: #3d4d63;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* Hide the actual radio input but keep it functional */
.riot-radio-option input[type="radio"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

/* Hover state */
.riot-radio-option:hover {
  border-color: #9fce6d;
  box-shadow: 0 0 0 2px rgba(159, 206, 109, 0.12);
}

/* Selected state */
.riot-radio-option:has(input[type="radio"]:checked) {
  border-color: #9fce6d;
  background: #f6fbef;
  box-shadow: 0 0 0 2px rgba(159, 206, 109, 0.18);
}

/* ---------------------------------------------------------
   ASTRA / VARIATION SWATCH CONSISTENCY
   --------------------------------------------------------- */
.variable-item:hover,
.button-variable-item:hover {
  border-color: #9fce6d !important;
  box-shadow: 0 0 0 2px rgba(159, 206, 109, 0.12);
}

.variable-item.selected,
.button-variable-item.selected {
  border-color: #9fce6d !important;
  background: #f6fbef !important;
  box-shadow: 0 0 0 2px rgba(159, 206, 109, 0.18);
}