/*
 * 1980s American industrial theme for the Asmartpick site.
 * Palette: pale concrete, carbon steel, rust orange, amber and hazard-stripe yellow.
 * This layer replaces the rose-and-plum "feminine" theme site-wide.
 */
:root {
  --conc-50: #f2efe8;
  --conc-100: #e7e2d6;
  --conc-300: #bcb5a3;
  --steel-500: #7c7667;
  --steel-700: #4c483c;
  --charcoal: #26221a;
  --charcoal-900: #171410;
  --rust-500: #c2500e;
  --rust-600: #a33f09;
  --rust-700: #7e310a;
  --amber-400: #e8912d;
  --hazard-500: #f2b705;
  --brick-500: #a63a2b;
  --ink: #26231c;
}

/* ---------- Base surfaces ---------- */
html, body, .body-container { background-color: var(--conc-50); color: var(--ink); }
body {
  accent-color: var(--rust-500);
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .45) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
}
a { color: var(--rust-600); }
a:hover, a:focus { color: var(--rust-700); }
::selection { background: var(--hazard-500); color: var(--charcoal); }

/* Stencilled, wide-tracked display headings */
.u-section-1 .u-text-1,
.u-section-2 .u-text-1,
.u-section-3 .u-text-1,
.u-section-5 .u-text-1,
.u-section-6 .u-text-1,
.lander-title,
#trend-list h1 {
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ---------- Header: carbon steel with hazard stripe ---------- */
.u-header, .header-wrapper {
  background: linear-gradient(180deg, #34302a 0%, #1b1813 100%) !important;
}
.u-header {
  border-bottom: 6px solid transparent !important;
  border-image: repeating-linear-gradient(-45deg, var(--hazard-500) 0 14px, var(--charcoal) 14px 28px) 6 !important;
}

/* Text logo — matches the top-leaf-blower page header */
.u-image.u-logo {
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .5px;
  color: #fff;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
}
.u-image.u-logo:hover,
.u-image.u-logo:focus { color: #fff; text-decoration: none; }
.u-image.u-logo span { color: var(--rust-500); }
.u-nav-link {
  color: var(--conc-100) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}
/* Nicepage stamps u-text-grey-90 (#1a1a1a ink) on the menu links — force pale
   concrete so they stay legible on the carbon header. */
.u-menu a.u-nav-link,
.u-nav .u-nav-item > a.u-nav-link {
  color: var(--conc-50) !important;
}
.u-menu a.u-button-style.u-text-grey-90 {
  color: var(--conc-50) !important;
}
.u-menu a.u-nav-link:hover,
.u-menu a.u-nav-link:focus,
.u-nav .u-nav-item > a.u-nav-link:hover,
.u-nav .u-nav-item > a.u-nav-link:focus {
  color: var(--hazard-500) !important;
}
.u-menu a.u-button-style.u-text-grey-90:hover,
.u-menu a.u-button-style.u-text-grey-90:focus,
.u-menu li.active > a.u-nav-link,
.u-menu a.u-button-style.u-text-grey-90.active {
  color: var(--hazard-500) !important;
}
.u-sidenav, .u-menu-overlay { background-color: var(--charcoal-900) !important; }

/* ---------- Nicepage accent colours ---------- */
.u-palette-1-base, .u-palette-1-base.u-shape, .u-palette-1-base.u-icon,
.u-button-style.u-palette-1-base, .u-btn.u-palette-1-base {
  background-color: var(--rust-500) !important;
}
.u-hover-palette-1-light-1:hover { background-color: var(--amber-400) !important; }
.u-palette-1-dark-1 { background-color: var(--charcoal) !important; }
.u-text-palette-1-base, .u-text-palette-1-base svg {
  color: var(--rust-500) !important;
  fill: var(--rust-500) !important;
}
.u-border-active-palette-1-base, .u-border-hover-palette-1-base { border-color: var(--rust-500) !important; }
.u-text-active-palette-1-base { color: var(--rust-500) !important; }
.u-grey-5 { background-color: var(--conc-100) !important; }
.u-grey-80, .u-footer { background-color: var(--charcoal-900) !important; }
.u-white { background-color: var(--conc-50) !important; }

/* ---------- Hard-edged shapes: strip the pill radii ---------- */
.u-radius-20, .u-radius-30, .u-radius-50, .u-image-round, .u-shape-round,
.u-btn-round, .u-btn, .btn, .cta, .cta-button, button {
  border-radius: 2px !important;
}

/* ---------- Buttons: rust plate, amber on hover ---------- */
.u-btn, .btn, .cta, .cta-button, .btn-primary, .button-primary {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 800;
  background-color: var(--rust-500) !important;
  border: 1px solid var(--rust-700) !important;
  color: #fff !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18);
}
.u-btn:hover, .btn:hover, .cta:hover, .cta-button:hover,
.btn-primary:hover, .button-primary:hover {
  background-color: var(--amber-400) !important;
  border-color: var(--rust-700) !important;
  color: var(--charcoal) !important;
}
.cta a { color: inherit; font-weight: 800; letter-spacing: .1em; }

/* ---------- Homepage trending list ---------- */
#trend-list { background: linear-gradient(180deg, #f7f4ec 0%, var(--conc-100) 100%); }
#trend-list h1 {
  color: var(--charcoal);
  border-bottom: 4px solid var(--rust-500);
  display: inline-block;
  padding-bottom: 6px;
}
#trend-list .trend {
  border: 1px solid var(--steel-500);
  border-left: 6px solid var(--rust-600);
  background: var(--conc-50);
  box-shadow: 4px 4px 0 rgba(38, 34, 26, .22);
  margin-bottom: 22px;
}
#trend-list .trend:hover { border-left-color: var(--hazard-500); }
#trend-list .num { color: var(--rust-500) !important; }
#trend-list .trend a, #trend-list .blue { color: var(--rust-600) !important; }
#trend-list .trend img, .u-image-round {
  border: 1px solid var(--steel-500);
  box-shadow: 4px 4px 0 rgba(38, 34, 26, .25);
}

/* Homepage hero heading: rust slab + hard shadow */
.u-section-1 .u-text-1 {
  border-left: 8px solid var(--rust-500);
  padding-left: 22px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
}

/* ---------- Editorial / product review pages ---------- */
.title-wrapper::before {
  background: linear-gradient(90deg, rgba(23, 20, 16, .82) 0%, rgba(194, 80, 14, .38) 100%) !important;
}
.hero-overlay { background: var(--charcoal) !important; }
.lander-title { letter-spacing: .06em; text-transform: uppercase; }
.lander-date { color: var(--hazard-500) !important; }
.updated { color: var(--conc-100) !important; }
.updated .fa-check { color: #a3b83b !important; }

.accent-color { color: var(--rust-600) !important; }
.toggle-filters { color: var(--rust-600) !important; border-color: var(--rust-600) !important; }
.selected h6, .unselected h6:hover { color: var(--rust-600) !important; }
.listing-disclosure:hover { color: var(--rust-600) !important; }

/* Warning-label style update block */
.update-block {
  background: var(--hazard-500) !important;
  color: var(--charcoal);
  border-left: 8px solid var(--charcoal) !important;
  font-weight: 700;
}
.quote-item {
  background-color: var(--conc-50) !important;
  border-left-color: var(--rust-500) !important;
}

/* Ranking cards: steel frame, hard shadow */
.listing_container {
  border: 1px solid var(--steel-500) !important;
  background: var(--conc-50) !important;
  box-shadow: 5px 5px 0 rgba(38, 34, 26, .2);
}
.listing_container.top_listing { border-top: 6px solid var(--rust-500) !important; }
.top_listing { border-color: var(--rust-500) !important; }

/* #1 banner: carbon plate with rust trim */
.header_best {
  background: var(--charcoal) !important;
  border-color: var(--rust-500) !important;
}
.header_best p { color: var(--hazard-500); }

/* ---------- Footer: carbon black with hazard stripe ---------- */
.u-footer {
  border-top: 6px solid transparent !important;
  border-image: repeating-linear-gradient(-45deg, var(--hazard-500) 0 14px, var(--charcoal-900) 14px 28px) 6 !important;
}
.u-footer .disclaimer { color: var(--conc-300); }
.u-footer .u-text-grey-15 { color: var(--conc-300) !important; }
.u-footer .u-nav-link { color: var(--conc-300) !important; }
.u-footer .u-nav-link:hover, .u-footer .u-nav-link.active { color: var(--hazard-500) !important; }
.u-footer .u-border-white { border-color: var(--steel-700) !important; }
.footer-wrapper { background-color: var(--charcoal-900) !important; }
.footer-content .link a { color: var(--conc-300) !important; }
.footer-content .link a:hover { color: var(--hazard-500) !important; }

/* ---------- Details ---------- */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--conc-100); }
::-webkit-scrollbar-thumb { background: var(--steel-700); border: 2px solid var(--conc-100); }
::-webkit-scrollbar-thumb:hover { background: var(--rust-500); }

/* Keep keyboard focus visible against the steel palette. */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--hazard-500);
  outline-offset: 3px;
}