/* Stanvac brand layer for the detailed industry pages.
   Loaded after the inherited map/table component styles. */

:root {
  --sx-saffron: var(--accent);
  --sx-saffron-molten: var(--green-dark);
  --sx-ember: var(--green);
  --sx-ink: var(--forest);
  --sx-ink-panel: var(--forest-2);
  --sx-porcelain: #fff;
  --sx-steel: #3d5246;
  --sx-muted: #5b6b62;
  --sx-hairline: #e3e9e5;
  --sx-hairline-dark: var(--dark-border);
  --sx-display: var(--display);
  --sx-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sx-gutter: var(--gutter);
  --sx-max: 1440px;
  --sx-section-y: var(--section-y);
}

.sx { font-family: var(--sans); }
.sx__btn { font-family: var(--sans); }
.sx__eyebrow { font-family: var(--eyebrow); }

/* Permanent light visual system for all content bands. */
.sx .sx__dark {
  background: var(--soft);
  color: var(--forest);
}
.sx .sx__dark .sx__eyebrow { color: var(--green); }
.sx .sx__dark .sx__lede { color: var(--body); }
.sx .sx__dark .sx__rule { background: var(--line-2); }

/* Replace the few legacy orange glows that are not token-driven. */
.sx-hotspot__pin {
  color: #fff;
  box-shadow: 0 0 0 5px rgba(27, 127, 69, .24), 0 3px 14px rgba(0, 0, 0, .45);
}
.sx-hotspot:hover .sx-hotspot__pin,
.sx-hotspot:focus-visible .sx-hotspot__pin,
.sx-hotspot.is-selected .sx-hotspot__pin {
  background: var(--green-dark);
  color: #fff;
}
.sx-hotspot.is-selected .sx-hotspot__pin {
  box-shadow: 0 0 0 7px rgba(27, 127, 69, .42), 0 3px 14px rgba(0, 0, 0, .45);
}
.sx-tile.is-selected {
  box-shadow: inset 0 0 0 1px var(--sx-saffron), 0 4px 14px rgba(15, 77, 46, .16);
}

a.sx-comp-tag:hover,
a.sx-comp-tag:focus {
  color: #fff;
}

/* Approval cards use the same green action treatment as the main site. */
.sx-approvals-card {
  border-color: var(--sx-hairline);
}
.sx-approvals-card__head {
  background: var(--soft);
  border-color: var(--sx-hairline);
}
.sx-approvals-card__row { border-color: var(--sx-hairline); }
.sx-approvals-card__download {
  background: #eaf5ee;
  color: var(--green-dark);
}
.sx-approvals-card__download:hover,
.sx-approvals-card__download:focus {
  background: var(--mint);
  color: var(--forest);
}
.sx-approvals-card__download--none,
.sx-approvals-card__download--none:hover,
.sx-approvals-card__download--none:focus {
  background: var(--soft);
  color: var(--sx-muted);
}

@keyframes sxCompRefresh {
  0% { box-shadow: 0 0 0 0 rgba(27, 127, 69, .55); border-color: var(--sx-saffron); }
  100% { box-shadow: 0 0 0 7px rgba(27, 127, 69, 0); border-color: var(--sx-hairline); }
}

@media (max-width: 767.98px) {
  :root { --sx-section-y: var(--section-y); }
  .sx-hotspot__pin {
    box-shadow: 0 0 0 4px rgba(27, 127, 69, .24), 0 2px 10px rgba(0, 0, 0, .45);
  }
}

/* Marine wear-band design study. Variant 01 is the default correction. */
.sx-ind[data-wear-variant] .sx-wear {
  color: var(--forest);
  transition: background-color .2s ease, color .2s ease;
}
.sx-ind[data-wear-variant] .sx-wear .sx__eyebrow { color: var(--green); }
.sx-ind[data-wear-variant] .sx-wear__desc { color: var(--body); }

/* 01 — restrained cards on the same soft ground used across the homepage. */
.sx-ind[data-wear-variant="cards"] .sx-wear { background: var(--soft); }
.sx-ind[data-wear-variant="cards"] .sx-wear__grid { gap: 16px; }
.sx-ind[data-wear-variant="cards"] .sx-wear__item {
  min-height: 184px;
  padding: 24px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  background: #fff;
}

/* 02 — a calm mint field with open, left-ruled content. */
.sx-ind[data-wear-variant="mint"] .sx-wear { background: #eaf5ee; }
.sx-ind[data-wear-variant="mint"] .sx-wear__grid { gap: 32px; }
.sx-ind[data-wear-variant="mint"] .sx-wear__item {
  padding: 4px 0 4px 20px;
  border: 0;
  border-left: 3px solid var(--accent);
}

/* 03 — editorial white section with fine rules and maximum visual quiet. */
.sx-ind[data-wear-variant="rules"] .sx-wear {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sx-ind[data-wear-variant="rules"] .sx-wear__grid { gap: 0 32px; }
.sx-ind[data-wear-variant="rules"] .sx-wear__item {
  padding: 20px 0 24px;
  border: 0;
  border-top: 1px solid var(--line-2);
}

/* The closing enquiry CTA follows the same selected light treatment. */
.sx-ind[data-wear-variant] .sx-ind-cta {
  color: var(--forest);
  border-top: 1px solid var(--line);
  transition: background-color .2s ease, color .2s ease;
}
.sx-ind[data-wear-variant] .sx-ind-cta .sx__lede { color: var(--body); }
.sx-ind[data-wear-variant] .sx-ind-cta .sx__btn--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.sx-ind[data-wear-variant] .sx-ind-cta .sx__btn--primary:hover,
.sx-ind[data-wear-variant] .sx-ind-cta .sx__btn--primary:focus {
  border-color: var(--green-dark);
  background: var(--green-dark);
  color: #fff;
}
.sx-ind[data-wear-variant] .sx-ind-cta .sx__btn--ghost {
  border-color: var(--green);
  color: var(--green-dark);
}
.sx-ind[data-wear-variant] .sx-ind-cta .sx__btn--ghost:hover,
.sx-ind[data-wear-variant] .sx-ind-cta .sx__btn--ghost:focus {
  border-color: var(--forest);
  background: #fff;
  color: var(--forest);
}

.sx-ind[data-wear-variant="cards"] .sx-ind-cta { background: var(--soft); }
.sx-ind[data-wear-variant="cards"] .sx-ind-cta__grid {
  padding-top: 36px;
  padding-bottom: 36px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  background: #fff;
}

.sx-ind[data-wear-variant="mint"] .sx-ind-cta { background: #eaf5ee; }

.sx-ind[data-wear-variant="rules"] .sx-ind-cta {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.sx-ind[data-wear-variant="rules"] .sx-ind-cta__grid {
  border-left: 3px solid var(--accent);
}

/* Fixed footer control used only while choosing the Marine-page direction. */
.wear-variant-picker {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--accent);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 12px 36px rgba(15, 42, 29, .18);
  backdrop-filter: blur(10px);
}
.wear-variant-picker__label {
  padding-left: 6px;
  color: var(--forest);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.wear-variant-picker__options { display: flex; gap: 6px; }
.wear-variant-picker button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--body);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.wear-variant-picker button span {
  margin-right: 5px;
  color: var(--green);
  font-family: var(--sx-mono);
  font-size: 10px;
}
.wear-variant-picker button:hover { border-color: var(--green); }
.wear-variant-picker button.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.wear-variant-picker button.is-active span { color: var(--mint); }

@media (max-width: 767.98px) {
  .sx-ind[data-wear-variant="cards"] .sx-wear__item { min-height: 0; padding: 20px; }
  .sx-ind[data-wear-variant="cards"] .sx-ind-cta__grid {
    margin-right: var(--gutter);
    margin-left: var(--gutter);
    padding: 24px 20px;
  }
  .wear-variant-picker {
    right: 10px;
    bottom: 10px;
    left: 10px;
    transform: none;
    display: block;
    padding: 8px;
  }
  .wear-variant-picker__label { display: block; margin-bottom: 7px; padding-left: 2px; }
  .wear-variant-picker__options { display: grid; grid-template-columns: repeat(3, 1fr); }
  .wear-variant-picker button { min-width: 0; padding: 7px 5px; line-height: 1.2; }
  .wear-variant-picker button span { display: block; margin: 0 0 2px; }
}