/* UPS365 identity — approved black/orange wordmark; no catalog/backend changes. */
:root {
  --ink: #17181b;
  --green: #b74600;
  --lime: #ff8b23;
  --muted: #68696f;
  --line: #e0e0e2;
  --orange: #ff6500;
  --yellow: #ffca22
}

body {
  background: #fff;
  color: var(--ink)
}

::selection {
  background: #ffce9c;
  color: #17181b
}

header {
  height: 94px;
  padding: 0 4%;
  gap: 22px;
  border-bottom: 1px solid #e9e9eb
}

header nav {
  gap: 21px
}

header nav button {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .05px
}

header nav button[aria-expanded=true] {
  color: #b74600;
  box-shadow: 0 3px var(--orange)
}

.logo {
  display: block;
  position: relative;
  width: 182px;
  height: 43px;
  overflow: hidden;
  flex: 0 0 182px;
  background: #fff;
  border-radius: 2px;
  letter-spacing: 0
}

.logo img {
  display: block;
  position: absolute;
  width: 200px;
  height: auto;
  max-width: none;
  left: -9px;
  top: -13px
}

header .header-catalog {
  padding: 10px 0;
  border-bottom: 2px solid var(--orange);
  font-weight: 600
}

header #searchToggle {
  font-size: 28px
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline-color: #ed802b
}

#mega {
  top: 94px;
  border-top-color: #eee;
  box-shadow: 0 20px 45px #17181b18
}

.menu-heading {
  border-bottom-color: #e4e4e5
}

.menu-heading span {
  color: #b74600
}

.menu-categories a:hover,
.menu-extra a:hover {
  color: #b74600
}

.menu-categories a {
  border-radius: 8px
}

.menu-categories a:hover {
  background: #fff4e9
}

.popular-slots a {
  background: #f3f3f4;
  border: 1px solid #ebebed;
  border-radius: 4px
}

.reference-mega .textlink {
  color: #b74600
}

.eyebrow {
  letter-spacing: 2.4px
}

.hero {
  min-height: 700px;
  background: #f6f6f7;
  isolation: isolate;
  padding-top: 46px
}

.hero:before {
  content: "";
  position: absolute;
  width: 650px;
  height: 650px;
  left: 50%;
  top: 220px;
  transform: translateX(-50%);
  border: 1px solid #ff650028;
  border-radius: 50%;
  background: radial-gradient(circle, #ffc57e33, transparent 68%);
  z-index: -1
}

.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, transparent 60%, #fff8 60.1%, transparent 60.3%);
  pointer-events: none;
  z-index: -1
}

.hero .eyebrow {
  color: #aa4200
}

.hero h1,
.hero h2 {
  font-size: 53px;
  font-weight: 600;
  letter-spacing: -2.2px
}

.hero p {
  color: #69696f
}

.hero .pill {
  border: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 24px;
  font-weight: 600;
  border-radius: 4px;
  font-size: 13px;
  gap: 24px
}

.hero .pill:hover {
  background: #b74600
}

.hero h1 {
  font-size: 62px;
  letter-spacing: -2.6px
}

.hero-art {
  top: 245px;
  height: 430px
}

.hero-art svg {
  filter: drop-shadow(20px 25px 20px #17181b30)
}

.hero-note {
  color: #727278
}

.hero.dark {
  background: #191a1e;
  color: white
}

.hero.dark:before {
  border-color: #ff8c2040;
  background: radial-gradient(circle, #ff650022, transparent 68%)
}

.hero.dark:after {
  background: linear-gradient(130deg, transparent 60%, #fff1 60.1%, transparent 60.3%)
}

.dark .eyebrow {
  color: #ff9a45
}

.dark p {
  color: #babac1
}

.hero.dark .pill {
  background: linear-gradient(100deg, #ff8c20, #ff6500);
  color: #16171a
}

.hero.dark .hero-note {
  color: #9c9ca5
}

.hero.sand {
  background: #fff0df
}

.hero.sand:before {
  background: radial-gradient(circle, #ff9c2850, transparent 68%);
  border-color: #e6752730
}

.hero.sand p {
  color: #746051
}

.hero.blue {
  background: #222328;
  color: #fff
}

.hero.blue .eyebrow {
  color: #ff9a45
}

.hero.blue p {
  color: #c4c4cc
}

.hero.blue .pill {
  background: #fff;
  color: #191a1e
}

.hero.blue .hero-note {
  color: #a8a8b1
}

.hero.blue:before {
  background: radial-gradient(circle, #ff8c2028, transparent 70%);
  border-color: #ffffff1a
}

.pill {
  border-radius: 4px;
  background: var(--ink);
  font-weight: 600;
  transition: background .2s, transform .2s
}

.pill:hover {
  background: #b74600
}

.pill.light {
  background: var(--orange);
  color: #17181b
}

.textlink:hover {
  color: #b74600
}

.tiles {
  padding: 10px;
  gap: 10px
}

.tile {
  background: #f3f3f4;
  min-height: 415px;
  border-radius: 3px
}

.tile:nth-child(2) {
  background: #fff0df
}

.tile:nth-child(3) {
  background: #f0f0f2
}

.tile:nth-child(4) {
  background: #222328;
  color: #fff
}

.tile:nth-child(4) p {
  color: #bcbcc3
}

.tile:nth-child(5) {
  background: #fff0df
}

.tile:nth-child(6) {
  background: #f1f1f3
}

.tile h2 {
  font-weight: 600
}

.tile .textlink {
  font-size: 12px;
  border-color: #ff6500
}

.guide-visual {
  background: #f1f1f3;
  border-radius: 4px
}

.guide:nth-child(2) .guide-visual {
  background: #fff0df
}

.guide:nth-child(3) .guide-visual {
  background: #e8e8eb
}

.guide small {
  color: #a43f00
}

.guide h3 {
  font-weight: 600
}

.newsletter {
  background: #f4f4f5;
  border-top: 1px solid #e9e9eb
}

.newsletter h2 {
  font-weight: 600
}

.subscription-form>div {
  border-color: #c9c9ce;
  background: #fff
}

.newsletter span {
  border-color: #ccc
}

footer {
  background: #17181b;
  color: #e9e9ec
}

footer .logo {
  width: 185px;
  flex-basis: 185px;
  height: 48px;
  border: 3px solid white;
  border-radius: 3px
}

footer .logo img {
  top: -11px;
  left: -7px
}

.footer-top {
  border-bottom-color: #ffffff1c
}

.footer-top p {
  color: #ff9a45;
  font-weight: 600
}

.footer-top>span {
  color: #aaaab2
}

#footerLinks a {
  color: #b1b1ba
}

#footerLinks a:hover {
  color: #ff9a45
}

.fine {
  color: #a0a0aa;
  border-color: #ffffff1c
}

.collection-banner {
  background: #1e1f24;
  color: #fff
}

.collection-banner:before {
  content: "";
  position: absolute;
  right: -120px;
  top: -290px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  border: 100px solid #ff650014
}

.collection-banner .breadcrumb {
  color: #bbbbc3
}

.collection-banner p {
  color: #bdbdc5
}

.collection-banner h1 {
  font-weight: 600
}

.direction-grid>a {
  background: #f4f4f5;
  border: 1px solid #ececef;
  border-radius: 5px
}

.direction-grid>a:hover {
  border-color: #ffb67c;
  background: #fff5e9
}

.direction-grid h3 {
  font-weight: 600
}

.solution-band {
  background: #fff0df
}

.catalog-group .section-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px
}

.collection-body {
  background: #f6f6f7
}

.filters input,
.product-slot input {
  accent-color: #d65300
}

.product-slot {
  border: 1px solid #e8e8eb;
  border-radius: 4px
}

.product-slot small {
  color: #a13d00
}

.product-slot h2 {
  font-weight: 600
}

.compare-bar {
  border-top: 2px solid var(--orange)
}

.compare-bar>a {
  color: #a13d00
}

.product-subnav {
  top: 94px;
  background: #ffffffed
}

.product-subnav button:hover,
.product-subnav a:hover {
  color: #b74600
}

.product-cover {
  background: radial-gradient(ellipse at bottom, #5d4232, #1a1b1f 75%);
  color: white
}

.product-cover .eyebrow {
  color: #ff9a45
}

.product-cover p {
  color: #c2b9b1
}

.model-facts>div {
  background: #f3f3f5;
  border-top: 2px solid #ff6500
}

.feature-panel {
  background: #f2f2f4
}

.feature-panel:nth-child(even) {
  background: #fff0df
}

.download-promo {
  background: #fff0df
}

.specs-section h3 {
  border-left: 3px solid var(--orange);
  padding-left: 12px
}

.empty {
  background: #f3f3f5;
  border-left: 3px solid #ff6500
}

.status {
  background: #ffead5;
  color: #8c3900
}

.product-art {
  background: #f3f3f5
}

.compare-table thead {
  background: #fff0df
}

.search-row button {
  background: #b74600;
  border-radius: 4px
}

.service-grid>a {
  background: #f4f4f5;
  border-top: 3px solid var(--orange)
}

.service-grid>a:hover {
  background: #fff0df
}

.intro {
  background: #f3f3f5
}

.document-types>section {
  border-radius: 4px
}

.docs-layout aside>a:hover,
.info-layout aside>a:hover {
  color: #b74600
}

.tabs button[aria-selected=true] {
  color: #b74600;
  box-shadow: 0 2px var(--orange)
}

dialog::backdrop {
  background: #16171c90
}

.search-row input:focus {
  outline-color: #ed802b
}

.company-blocks h3 {
  color: #a13d00
}

@media(max-width:1150px) and (min-width:721px) {
  header {
    padding: 0 25px;
    gap: 14px
  }

  header nav {
    gap: 13px
  }

  .logo {
    width: 154px;
    flex-basis: 154px;
    height: 38px
  }

  .logo img {
    width: 170px;
    left: -8px;
    top: -11px
  }

  header nav button {
    font-size: 11px
  }

  .locale {
    font-size: 12px !important
  }
}

@media(max-width:720px) {
  header {
    height: 76px;
    padding: 0 18px;
    gap: 16px
  }

  .logo {
    width: 152px;
    flex-basis: 152px;
    height: 39px
  }

  .logo img {
    width: 168px;
    left: -8px;
    top: -10px
  }

  header .header-catalog {
    font-size: 11px;
    padding: 8px 0
  }

  header nav {
    top: 76px;
    padding: 12px 20px
  }

  header nav button {
    font-size: 15px
  }

  #mega {
    top: 76px;
    max-height: calc(100dvh - 76px)
  }

  .hero {
    padding-top: 42px;
    min-height: 680px
  }

  .hero h1 {
    font-size: 49px;
    letter-spacing: -2px;
    margin-top: 22px
  }

  .hero h2 {
    font-size: 38px;
    letter-spacing: -1.5px
  }

  .hero p {
    font-size: 14px;
    max-width: 330px
  }

  .hero:before {
    width: 430px;
    height: 430px;
    top: 260px
  }

  .hero .pill {
    margin-top: 22px;
    padding: 12px 22px
  }

  .hero-art {
    top: auto;
    bottom: 35px;
    height: 330px
  }

  .hero .eyebrow {
    font-size: 10px;
    letter-spacing: 1.5px
  }

  .hero-note {
    font-size: 8px
  }

  .tile {
    min-height: 365px
  }

  .tile h2 {
    font-size: 27px
  }

  .product-subnav {
    top: 76px
  }

  .product-subnav nav {
    top: auto
  }

  .collection-banner h1 {
    font-size: 36px
  }

  .collection-banner>svg {
    opacity: .25
  }

  footer .logo {
    width: 185px;
    height: 48px
  }

  .newsletter h2 {
    font-size: 28px
  }

  .filter-mobile {
    border-color: #d5d5da;
    border-radius: 4px
  }

  .filter-mobile[aria-expanded=true] {
    border-color: #ee8237;
    color: #a13d00
  }
}

footer .logo {
  width: 202px;
  flex-basis: 202px
}

footer .logo img {
  left: -4px;
  top: -11px
}

/* Warehouse 4 catalog */