/**
 * Soogrim trade art direction
 *
 * Mechanically ported from the ChatGPT prototype stylesheet so the cascade is
 * preserved exactly — including the specificity accidents that make several
 * labels render at body size rather than their declared micro-label size.
 * Those are what the design actually looks like; re-authoring "cleanly" would
 * change the rendering. Selectors are scoped to .art-soogrim-trade and class-prefixed
 * with sgt- to isolate the direction from the base theme stylesheet.
 *
 * Regenerate rather than hand-edit where possible.
 */

/* ---------------------------------------------------------------------------
   BASE-THEME NEUTRALISER — must stay above the ported rules.

   The prototype was authored standalone, against browser defaults. The base
   theme (assets/css/main.css) restyles bare ELEMENT selectors:

       p, ul            { margin: 0; padding: 0 }
       h1..h6           { margin: 0; font-family: <display>; font-weight: 700;
                          letter-spacing: -0.02em; line-height: 1 }

   Class-prefixing isolates this art direction from the base theme's CLASSES, but
   not from those element rules — and the prototype never declares these
   properties, so the base theme's values silently won. That zeroed every
   paragraph rhythm the design depends on, tracked every heading -0.02em, and
   pushed the base theme's display serif into headings the prototype renders in
   the body face.

   This restores the browser defaults the prototype assumes. The ported rules
   below then override wherever the prototype actually has an opinion.
   --------------------------------------------------------------------------- */
.art-soogrim-trade p {
	margin: 1em 0;
	padding: 0;
}

.art-soogrim-trade ul,
.art-soogrim-trade ol {
	margin: 1em 0;
	padding-left: 40px;
}

.art-soogrim-trade h1,
.art-soogrim-trade h2,
.art-soogrim-trade h3,
.art-soogrim-trade h4,
.art-soogrim-trade h5,
.art-soogrim-trade h6 {
	font-family: inherit;
	font-weight: bold;
	letter-spacing: normal;
	/* The browser sets no line-height on headings, so they inherit the body's —
	   which is what the prototype's headings do. The base theme pins them to 1,
	   so inheritance has to be restored explicitly; `normal` would not do it. */
	line-height: inherit;
}

.art-soogrim-trade h1 { margin: 0.67em 0; font-size: 2em; }
.art-soogrim-trade h2 { margin: 0.83em 0; font-size: 1.5em; }
.art-soogrim-trade h3 { margin: 1em 0;    font-size: 1.17em; }
.art-soogrim-trade h4 { margin: 1.33em 0; font-size: 1em; }
.art-soogrim-trade h5 { margin: 1.67em 0; font-size: 0.83em; }
.art-soogrim-trade h6 { margin: 2.33em 0; font-size: 0.67em; }



.art-soogrim-trade {
  --ink: #101813;
  --market: #07130f;
  --panel: #0f241b;
  --leaf: #2e6a47;
  --gold: #d7aa45;
  --pepper: #b93a21;
  --paper: #f7f1e3;
  --white: #ffffff;
  --muted: #728177;
  --line: #d8cfbb;
  --soft: #efe5d0;
  --shadow: 0 18px 48px rgba(7, 19, 15, 0.22);
}

.art-soogrim-trade * {
  box-sizing: border-box;
}

.art-soogrim-trade {
  scroll-behavior: smooth;
}

.art-soogrim-trade {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.art-soogrim-trade a {
  color: inherit;
  text-decoration: none;
}

.art-soogrim-trade button, .art-soogrim-trade input, .art-soogrim-trade select, .art-soogrim-trade textarea {
  font: inherit;
}

.art-soogrim-trade button {
  cursor: pointer;
}

.art-soogrim-trade img {
  display: block;
  max-width: 100%;
}

.art-soogrim-trade :focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.art-soogrim-trade .sgt-skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 100;
  transform: translateY(-160%);
  border-radius: 6px;
  background: var(--gold);
  color: var(--market);
  padding: 10px 14px;
  font-weight: 900;
}

.art-soogrim-trade .sgt-skip-link:focus {
  transform: translateY(0);
}

.art-soogrim-trade .sgt-utility {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--gold);
  color: var(--market);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.art-soogrim-trade .sgt-utility a {
  border-bottom: 1px solid currentColor;
}

.art-soogrim-trade .sgt-site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  min-height: 76px;
  padding: 14px 28px;
  background: rgba(7, 19, 15, 0.95);
  color: var(--paper);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
}

.art-soogrim-trade .sgt-brand {
  display: inline-grid;
  align-items: center;
  gap: 3px;
  min-width: max-content;
  line-height: 1;
}

.art-soogrim-trade .sgt-brand-logo {
  display: block;
  width: 156px;
  height: auto;
}

.art-soogrim-trade h1, .art-soogrim-trade .sgt-section-title, .art-soogrim-trade .sgt-quote-panel h2, .art-soogrim-trade .sgt-card h3, .art-soogrim-trade .sgt-cart-title {
  font-family: Georgia, "Times New Roman", serif;
}

.art-soogrim-trade .sgt-brand small {
  display: block;
  margin-left: 6px;
  color: rgba(247, 241, 227, 0.62);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.art-soogrim-trade .sgt-main-nav, .art-soogrim-trade .sgt-footer-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  color: rgba(247, 241, 227, 0.74);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.art-soogrim-trade .sgt-main-nav a:hover, .art-soogrim-trade .sgt-main-nav a.sgt-is-active, .art-soogrim-trade .sgt-footer-nav a:hover {
  color: var(--gold);
}

.art-soogrim-trade .sgt-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.art-soogrim-trade .sgt-quote-link {
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.art-soogrim-trade .sgt-quote-link span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  color: var(--white);
}

.art-soogrim-trade .sgt-button, .art-soogrim-trade .sgt-header-cta, .art-soogrim-trade .sgt-add-button, .art-soogrim-trade .sgt-trade-form button, .art-soogrim-trade .sgt-cart-item button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  padding: 0 18px;
  background: var(--pepper);
  color: var(--white);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  transition:
    transform 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.art-soogrim-trade .sgt-button:hover, .art-soogrim-trade .sgt-header-cta:hover, .art-soogrim-trade .sgt-add-button:hover, .art-soogrim-trade .sgt-trade-form button:hover, .art-soogrim-trade .sgt-cart-item button:hover {
  transform: translateY(-1px);
  background: #cf482b;
}

.art-soogrim-trade .sgt-button.sgt-alt {
  border: 1px solid rgba(247, 241, 227, 0.4);
  background: transparent;
  color: var(--paper);
}

.art-soogrim-trade .sgt-button.sgt-alt:hover {
  background: var(--paper);
  color: var(--market);
}

.art-soogrim-trade .sgt-button.sgt-light {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--market);
}

.art-soogrim-trade .sgt-button.sgt-light:hover {
  background: var(--market);
  color: var(--paper);
}

.art-soogrim-trade .sgt-button.sgt-full {
  width: 100%;
}

.art-soogrim-trade .sgt-hero {
  position: relative;
  min-height: 650px;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--market);
  color: var(--white);
}

.art-soogrim-trade .sgt-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.art-soogrim-trade .sgt-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 19, 15, 0.98), rgba(7, 19, 15, 0.7) 44%, rgba(7, 19, 15, 0.14) 82%),
    linear-gradient(0deg, rgba(7, 19, 15, 0.74), rgba(7, 19, 15, 0.08) 60%);
}

.art-soogrim-trade .sgt-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 710px;
  margin-left: max(28px, calc((100% - 1280px) / 2));
  padding: 78px 28px;
  animation: rise 650ms ease both;
}

.art-soogrim-trade .sgt-hero-labels {
  position: relative;
  width: min(100%, 440px);
  height: 42px;
  display: block;
  overflow: hidden;
  margin-top: 24px;
  border: 1px solid rgba(247, 241, 227, 0.34);
  border-radius: 999px;
  background: rgba(7, 19, 15, 0.72);
  box-shadow: 0 8px 22px rgba(7, 19, 15, 0.18);
  color: var(--paper);
  backdrop-filter: blur(10px);
}

.art-soogrim-trade .sgt-hero-labels::before {
  content: "Featured";
  position: absolute;
  inset: 0 auto 0 14px;
  display: flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.art-soogrim-trade .sgt-hero-labels span {
  position: absolute;
  inset: 0 14px 0 106px;
  display: flex;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  color: var(--paper);
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.03em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  animation: heroLabel var(--label-cycle, 20s) ease-in-out infinite;
  animation-delay: calc(var(--i) * 4s);
}

.art-soogrim-trade .sgt-eyebrow, .art-soogrim-trade .sgt-kicker, .art-soogrim-trade .sgt-item-type {
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.art-soogrim-trade .sgt-item-type, .art-soogrim-trade .sgt-kicker.sgt-dark {
  color: var(--pepper);
}

.art-soogrim-trade h1, .art-soogrim-trade h2, .art-soogrim-trade h3 {
  text-wrap: balance;
}

.art-soogrim-trade h1 {
  margin: 16px 0 0;
  max-width: 680px;
  font-size: clamp(3rem, 6.2vw, 4.45rem);
  line-height: 0.98;
}

.art-soogrim-trade .sgt-hero-copy p {
  max-width: 610px;
  margin: 24px 0 0;
  color: rgba(247, 241, 227, 0.84);
  font-size: 1.12rem;
}

.art-soogrim-trade .sgt-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.art-soogrim-trade .sgt-section, .art-soogrim-trade .sgt-page-hero, .art-soogrim-trade .sgt-cart-section {
  padding: 86px 28px;
}

.art-soogrim-trade .sgt-section-inner, .art-soogrim-trade .sgt-page-inner, .art-soogrim-trade .sgt-trade-grid, .art-soogrim-trade .sgt-footer-inner, .art-soogrim-trade .sgt-cart-layout {
  max-width: 1280px;
  margin: 0 auto;
}

.art-soogrim-trade .sgt-section-heading {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 42px;
  align-items: end;
  margin-bottom: 36px;
}

.art-soogrim-trade .sgt-section-title, .art-soogrim-trade .sgt-cart-title {
  margin: 10px 0 0;
  font-size: 3.55rem;
  line-height: 0.95;
}

.art-soogrim-trade .sgt-cart-list-title {
  margin: 10px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.85rem;
  line-height: 1;
}

.art-soogrim-trade .sgt-section-heading p, .art-soogrim-trade .sgt-page-lede, .art-soogrim-trade .sgt-card p, .art-soogrim-trade .sgt-quote-panel p, .art-soogrim-trade .sgt-cart-layout p {
  color: var(--muted);
  font-size: 1.02rem;
}

.art-soogrim-trade .sgt-trade-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 22px;
  align-items: start;
}

.art-soogrim-trade .sgt-order-table {
  border: 1px solid var(--line);
  background: var(--paper);
}

.art-soogrim-trade .sgt-order-workspace {
  min-width: 0;
}

.art-soogrim-trade .sgt-order-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}

.art-soogrim-trade .sgt-order-tools label {
  display: grid;
  gap: 6px;
  color: var(--market);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.art-soogrim-trade .sgt-order-tools input, .art-soogrim-trade .sgt-order-tools select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  color: var(--ink);
  padding: 0 12px;
}

.art-soogrim-trade .sgt-order-tools strong {
  padding-bottom: 12px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.art-soogrim-trade .sgt-order-row[hidden] {
  display: none;
}

.art-soogrim-trade .sgt-order-head, .art-soogrim-trade .sgt-order-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 174px 120px 88px;
  gap: 14px;
  align-items: center;
}

.art-soogrim-trade .sgt-order-head {
  min-height: 50px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.art-soogrim-trade .sgt-order-row {
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.art-soogrim-trade .sgt-order-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.art-soogrim-trade .sgt-order-copy {
  min-width: 0;
}

.art-soogrim-trade .sgt-order-thumb {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
}

.art-soogrim-trade .sgt-order-thumb img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  padding: 4px;
}

.art-soogrim-trade .sgt-order-thumb.sgt-is-placeholder {
  background: var(--market);
}

.art-soogrim-trade .sgt-order-thumb .sgt-order-thumb-logo {
  width: 52px;
  height: auto;
  padding: 0;
}

.art-soogrim-trade .sgt-order-row:last-child {
  border-bottom: 0;
}

.art-soogrim-trade .sgt-order-row h3 {
  margin: 4px 0 0;
  font-size: 1.08rem;
  overflow-wrap: anywhere;
}

.art-soogrim-trade .sgt-order-row p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.91rem;
}

.art-soogrim-trade .sgt-order-row select, .art-soogrim-trade .sgt-quantity input, .art-soogrim-trade .sgt-trade-form input, .art-soogrim-trade .sgt-trade-form select, .art-soogrim-trade .sgt-trade-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  color: var(--ink);
}

.art-soogrim-trade .sgt-order-row select {
  min-height: 44px;
  padding: 0 10px;
}

.art-soogrim-trade .sgt-quantity {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  background: var(--white);
}

.art-soogrim-trade .sgt-quantity button {
  border: 0;
  background: var(--white);
  color: var(--market);
  font-weight: 950;
}

.art-soogrim-trade .sgt-quantity input {
  min-height: 42px;
  border: 0;
  border-inline: 1px solid var(--line);
  border-radius: 0;
  text-align: center;
}

.art-soogrim-trade .sgt-quote-panel {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 14px;
  border-radius: 9px;
  background: var(--market);
  color: var(--paper);
  padding: 22px;
  box-shadow: var(--shadow);
}

.art-soogrim-trade .sgt-quote-panel h2 {
  margin: 0;
  color: var(--white);
  font-size: 2.1rem;
  line-height: 0.98;
}

.art-soogrim-trade .sgt-quote-list {
  display: grid;
  gap: 10px;
  min-height: 90px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.art-soogrim-trade .sgt-quote-list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  padding-bottom: 9px;
  color: rgba(247, 241, 227, 0.78);
}

.art-soogrim-trade .sgt-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.art-soogrim-trade .sgt-card {
  min-height: 330px;
  display: grid;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--white);
  padding: 24px;
}

.art-soogrim-trade .sgt-catalog-card {
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  overflow: hidden;
  padding: 0;
}

.art-soogrim-trade .sgt-catalog-visual {
  height: 260px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #f1eadb;
}

.art-soogrim-trade .sgt-catalog-visual img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 16px 20px;
}

.art-soogrim-trade .sgt-catalog-visual-program {
  align-content: center;
  gap: 4px;
  background: var(--market);
  color: var(--paper);
  text-align: center;
  text-transform: uppercase;
}

.art-soogrim-trade .sgt-catalog-visual-program span {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.1em;
}

.art-soogrim-trade .sgt-catalog-visual-program strong {
  max-width: 220px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  line-height: 1;
}

.art-soogrim-trade .sgt-catalog-card-body {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
}

.art-soogrim-trade .sgt-catalog-card-action {
  width: 100%;
  margin-top: auto;
  padding-top: 14px;
}

.art-soogrim-trade .sgt-catalog-card .sgt-catalog-card-action .sgt-button {
  margin-top: 0;
}

.art-soogrim-trade .sgt-card h3 {
  margin: 12px 0 10px;
  font-size: 1.65rem;
  line-height: 1.06;
  overflow-wrap: anywhere;
}

.art-soogrim-trade .sgt-card .sgt-button {
  margin-top: 14px;
}

.art-soogrim-trade .sgt-variant-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.art-soogrim-trade .sgt-variant-list span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px;
  color: var(--market);
  font-size: 0.71rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.art-soogrim-trade .sgt-page-hero {
  position: relative;
  isolation: isolate;
  min-height: 470px;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--market);
  color: var(--paper);
  border-bottom: 1px solid var(--line);
}

.art-soogrim-trade .sgt-page-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 19, 15, 0.98) 0%, rgba(7, 19, 15, 0.9) 36%, rgba(7, 19, 15, 0.46) 56%, rgba(7, 19, 15, 0.08) 82%),
    linear-gradient(0deg, rgba(7, 19, 15, 0.7), rgba(7, 19, 15, 0.05) 70%);
}

.art-soogrim-trade .sgt-page-hero-media {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  animation: pageHeroReveal 850ms ease both;
}

.art-soogrim-trade .sgt-catalog-stats {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.art-soogrim-trade .sgt-catalog-stats-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.art-soogrim-trade .sgt-catalog-stat {
  min-width: 0;
  padding: 24px 28px;
  border-right: 1px solid var(--line);
}

.art-soogrim-trade .sgt-catalog-stat:last-child {
  border-right: 0;
}

.art-soogrim-trade .sgt-catalog-stat strong, .art-soogrim-trade .sgt-catalog-stat span {
  display: block;
}

.art-soogrim-trade .sgt-catalog-stat strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.45rem;
  line-height: 1;
}

.art-soogrim-trade .sgt-catalog-stat span {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.art-soogrim-trade .sgt-page-inner {
  display: grid;
  grid-template-columns: minmax(0, 660px);
  gap: 20px;
  align-items: end;
}

.art-soogrim-trade .sgt-page-hero .sgt-page-inner {
  width: 100%;
  animation: rise 650ms ease both;
}

.art-soogrim-trade .sgt-page-inner h1 {
  font-size: 4.4rem;
}

.art-soogrim-trade .sgt-page-hero .sgt-page-lede {
  max-width: 620px;
  margin: 0;
  color: rgba(247, 241, 227, 0.84);
  font-size: 1.08rem;
}

.art-soogrim-trade .sgt-trade-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 900px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--white);
  padding: 24px;
}

.art-soogrim-trade .sgt-trade-form label {
  display: grid;
  gap: 7px;
  color: var(--market);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.art-soogrim-trade .sgt-trade-form input, .art-soogrim-trade .sgt-trade-form select {
  min-height: 48px;
  padding: 0 12px;
}

.art-soogrim-trade .sgt-trade-form textarea {
  min-height: 130px;
  padding: 12px;
  resize: vertical;
}

.art-soogrim-trade .sgt-wide {
  grid-column: 1 / -1;
}

.art-soogrim-trade .sgt-form-status {
  min-height: 22px;
  margin: 0;
  color: var(--market);
  font-weight: 850;
}

.art-soogrim-trade .sgt-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 24px;
}

.art-soogrim-trade .sgt-quote-items {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.art-soogrim-trade .sgt-cart-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--white);
  padding: 20px;
}

.art-soogrim-trade .sgt-cart-item h3 {
  margin: 0;
  font-size: 1.45rem;
}

.art-soogrim-trade .sgt-site-footer {
  background: var(--market);
  color: rgba(247, 241, 227, 0.72);
  padding: 30px 28px;
}

.art-soogrim-trade .sgt-footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  min-width: 0;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pageHeroReveal {
  from {
    opacity: 0.72;
    transform: scale(1.025);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes heroLabel {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  2%,
  16% {
    opacity: 1;
    transform: translateY(0);
  }

  21%,
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@media (max-width: 1080px) {
  .art-soogrim-trade .sgt-site-header {
    grid-template-columns: auto 1fr;
  }

  .art-soogrim-trade .sgt-main-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: start;
    flex-wrap: wrap;
  }

  .art-soogrim-trade .sgt-header-actions {
    grid-column: 2;
    grid-row: 1;
    justify-content: end;
  }

  .art-soogrim-trade .sgt-section-heading, .art-soogrim-trade .sgt-page-inner, .art-soogrim-trade .sgt-trade-grid, .art-soogrim-trade .sgt-cart-layout {
    grid-template-columns: 1fr;
  }

  .art-soogrim-trade .sgt-quote-panel {
    position: static;
  }

  .art-soogrim-trade .sgt-page-hero {
    min-height: 460px;
  }

  .art-soogrim-trade .sgt-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .art-soogrim-trade .sgt-catalog-stats-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .art-soogrim-trade .sgt-catalog-stat:nth-child(2) {
    border-right: 0;
  }

  .art-soogrim-trade .sgt-catalog-stat:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}

@media (min-width: 721px) and (max-width: 1080px) {
  .art-soogrim-trade .sgt-page-hero .sgt-page-inner {
    grid-template-columns: minmax(0, 360px);
  }

  .art-soogrim-trade .sgt-page-hero .sgt-page-inner h1 {
    font-size: 3.25rem;
  }

  .art-soogrim-trade .sgt-page-hero .sgt-page-lede {
    max-width: 360px;
  }

  .art-soogrim-trade .sgt-order-head, .art-soogrim-trade .sgt-order-row {
    grid-template-columns: minmax(336px, 1fr) 174px 120px 88px;
    gap: 7px;
  }
}

@media (max-width: 720px) {
  .art-soogrim-trade .sgt-utility {
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px 12px;
    font-size: 0.68rem;
    text-align: center;
  }

  .art-soogrim-trade .sgt-site-header {
    padding: 12px 16px;
  }

  .art-soogrim-trade .sgt-brand small {
    display: none;
  }

  .art-soogrim-trade .sgt-quote-link {
    font-size: 0.68rem;
  }

  .art-soogrim-trade .sgt-brand-logo {
    width: 142px;
  }

  .art-soogrim-trade .sgt-main-nav {
    gap: 15px;
    font-size: 0.7rem;
  }

  .art-soogrim-trade .sgt-header-cta {
    min-height: 40px;
    padding: 0 12px;
    font-size: 0.68rem;
  }

  .art-soogrim-trade .sgt-hero {
    min-height: 610px;
  }

  .art-soogrim-trade .sgt-hero-copy {
    margin-left: 0;
    padding: 36px 18px;
  }

  .art-soogrim-trade .sgt-page-hero {
    min-height: 500px;
    align-items: end;
  }

  .art-soogrim-trade .sgt-page-hero::after {
    background:
      linear-gradient(0deg, rgba(7, 19, 15, 0.98) 0%, rgba(7, 19, 15, 0.88) 48%, rgba(7, 19, 15, 0.18) 100%),
      linear-gradient(90deg, rgba(7, 19, 15, 0.78), rgba(7, 19, 15, 0.18));
  }

  .art-soogrim-trade .sgt-page-hero-media {
    object-position: 70% center;
  }

  .art-soogrim-trade .sgt-hero-labels {
    width: 100%;
    max-width: 360px;
    height: 40px;
  }

  .art-soogrim-trade .sgt-hero-labels::before {
    left: 12px;
    font-size: 0.62rem;
  }

  .art-soogrim-trade .sgt-hero-labels span {
    inset-inline: 96px 12px;
    font-size: 0.68rem;
  }

  .art-soogrim-trade h1, .art-soogrim-trade .sgt-page-inner h1 {
    font-size: 2.74rem;
  }

  .art-soogrim-trade .sgt-page-inner {
    gap: 16px;
  }

  .art-soogrim-trade[data-page="order"] .sgt-page-hero {
    padding-block: 42px;
  }

  .art-soogrim-trade[data-page="order"] .sgt-page-inner h1 {
    font-size: 2.5rem;
  }

  .art-soogrim-trade[data-page="order"] .sgt-section {
    padding-top: 42px;
  }

  .art-soogrim-trade .sgt-section, .art-soogrim-trade .sgt-page-hero, .art-soogrim-trade .sgt-cart-section {
    padding: 62px 16px;
  }

  .art-soogrim-trade .sgt-section-title, .art-soogrim-trade .sgt-cart-title {
    font-size: 2.45rem;
  }

  .art-soogrim-trade .sgt-cart-list-title {
    font-size: 2.25rem;
  }

  .art-soogrim-trade .sgt-hero-actions, .art-soogrim-trade .sgt-footer-inner {
    display: grid;
  }

  .art-soogrim-trade .sgt-hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .art-soogrim-trade .sgt-brand {
    min-width: 0;
  }

  .art-soogrim-trade .sgt-footer-nav {
    justify-content: start;
    flex-wrap: wrap;
  }

  .art-soogrim-trade .sgt-hero-actions .sgt-button {
    width: 100%;
    padding-inline: 10px;
  }

  .art-soogrim-trade .sgt-order-head {
    display: none;
  }

  .art-soogrim-trade .sgt-order-tools {
    grid-template-columns: 1fr;
  }

  .art-soogrim-trade .sgt-order-tools strong {
    padding-bottom: 0;
  }

  .art-soogrim-trade .sgt-catalog-stat {
    padding: 20px 16px;
  }

  .art-soogrim-trade .sgt-catalog-stat strong {
    font-size: 2rem;
  }

  .art-soogrim-trade .sgt-catalog-visual {
    height: 250px;
  }

  .art-soogrim-trade .sgt-order-row, .art-soogrim-trade .sgt-card-grid, .art-soogrim-trade .sgt-trade-form, .art-soogrim-trade .sgt-cart-item {
    grid-template-columns: 1fr;
  }

  .art-soogrim-trade .sgt-add-button, .art-soogrim-trade .sgt-trade-form button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .art-soogrim-trade {
    scroll-behavior: auto;
  }

  .art-soogrim-trade .sgt-hero-copy, .art-soogrim-trade .sgt-hero-labels span, .art-soogrim-trade .sgt-page-hero-media, .art-soogrim-trade .sgt-page-hero .sgt-page-inner {
    animation: none;
  }
}

/* ===========================================================================
   FOOTER LEGAL ROW — an addition, not part of the ported design.

   The prototype carries no copyright, privacy or terms copy anywhere. Every site
   on this network must link the network legal pages, so the row is added — and,
   until now, shipped unstyled: raw stacked text with the three links running
   together into one unreadable line.

   It is deliberately quieter than the footer nav above it: this is fine print,
   not navigation, so it sits below a hairline, drops the uppercase treatment and
   uses a lower-contrast ink than the links it sits under.
   =========================================================================== */
.art-soogrim-trade .sgt-footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px 0 4px;
	border-top: 1px solid rgba(247, 241, 227, 0.16);
	color: rgba(247, 241, 227, 0.56);
	font-size: 0.78rem;
	letter-spacing: 0.01em;
}

.art-soogrim-trade .sgt-footer-legal p {
	margin: 0;
}

.art-soogrim-trade .sgt-footer-legal-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
}

/* A hairline between items reads better than relying on whitespace alone, which
   is what made "Privacy Terms Powered by SpotrOS" run together as one phrase. */
.art-soogrim-trade .sgt-footer-legal-links a + a {
	padding-left: 18px;
	border-left: 1px solid rgba(247, 241, 227, 0.24);
}

.art-soogrim-trade .sgt-footer-legal-links a {
	color: inherit;
	text-decoration: none;
}

.art-soogrim-trade .sgt-footer-legal-links a:hover {
	color: var(--gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 700px) {
	.art-soogrim-trade .sgt-footer-legal {
		justify-content: flex-start;
		padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
	}
}

/* ===========================================================================
   MOBILE NAVIGATION — an addition, not part of the ported design.

   The trade prototype has no mobile navigation: its six links wrap, leaving a
   136px sticky header at 375px. Less severe than the consumer site's 201px, but
   still a wrapped bar with no drawer, and inconsistent with the consumer site now
   that it has one.

   Same approach as the consumer direction: the base theme (main.css) already owns
   the overlay mechanics for the shared spotros-nav / spotros-nav-list /
   spotros-nav-toggle contract, driven by assets/js/nav-toggle.js. This layer only
   holds the 701-1024px band so tablets keep the prototype's real nav, and skins
   the drawer below 700px in the trade palette.
   =========================================================================== */
.art-soogrim-trade .sgt-nav-shell {
	display: contents;
}

.art-soogrim-trade .sgt-main-nav {
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}

.art-soogrim-trade .sgt-main-nav > li {
	display: inline-flex;
}

.art-soogrim-trade .sgt-main-nav > li.sgt-nav-drawer-call {
	display: none;
}

/* 701-1024px: hold the prototype's tablet layout against the base drawer. */
@media (min-width: 701px) and (max-width: 1024px) {
	.art-soogrim-trade .spotros-site-header[data-nav-js="ready"] .spotros-nav {
		display: contents;
	}

	.art-soogrim-trade .spotros-site-header[data-nav-js="ready"] .spotros-nav-toggle {
		display: none;
	}
}

@media (max-width: 700px) {
	.art-soogrim-trade .sgt-site-header {
		min-height: 64px;
	}

	/* The header carries backdrop-filter, and a filtered element becomes the
	   containing block for fixed-position descendants — which would trap the
	   drawer inside the header instead of the viewport. */
	.art-soogrim-trade .spotros-site-header[data-nav-js="ready"][data-nav-open="true"] {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.art-soogrim-trade .spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .spotros-nav {
		background: var(--market);
		align-items: flex-start;
		justify-content: flex-start;
	}

	.art-soogrim-trade .spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .sgt-main-nav {
		gap: 0;
		font-size: 1rem;
		justify-content: flex-start;
		text-align: left;
		padding: 5rem 1.5rem calc(3rem + env(safe-area-inset-bottom, 0px));
	}

	.art-soogrim-trade .spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .sgt-main-nav > li {
		display: block;
		width: 100%;
		border-bottom: 1px solid rgba(247, 241, 227, 0.16);
	}

	.art-soogrim-trade .spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .sgt-main-nav > li.sgt-nav-drawer-call {
		display: block;
		border-bottom: 0;
	}

	.art-soogrim-trade .spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .sgt-main-nav a {
		display: block;
		padding: 16px 2px;
		color: var(--paper);
	}

	.art-soogrim-trade .spotros-site-header[data-nav-js="ready"][data-nav-open="true"] .sgt-nav-drawer-call a {
		color: var(--gold);
	}

	.art-soogrim-trade .sgt-nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		padding: 0;
		border: 1px solid rgba(247, 241, 227, 0.24);
		border-radius: 10px;
		background: transparent;
		cursor: pointer;
	}

	.art-soogrim-trade .spotros-nav-toggle-bars {
		display: block;
		width: 18px;
	}

	.art-soogrim-trade .spotros-nav-toggle-bars span {
		display: block;
		height: 2px;
		border-radius: 2px;
		background: var(--paper);
	}

	.art-soogrim-trade .spotros-nav-toggle-bars span + span {
		margin-top: 4px;
	}

	.art-soogrim-trade .sgt-header-cta {
		display: none;
	}
}