/* ============================================================
   Precision Tech Supply — Site-wide front-end theme
   1.  Tokens & base
   2.  Layout helpers
   3.  Buttons
   4.  Header (utility, brand, search, actions)
   5.  Navigation, mega menu, mobile menu
   6.  Hero
   7.  Homepage sections
   8.  Footer
   9.  Page head & breadcrumbs
   10. Forms & alerts
   11. Listing toolbar & filters
   12. Product grid & cards, pagination
   13. Product detail
   14. RFQ / contact
   15. Cart drawer
   16. Cart & checkout pages
   17. Auth & account pages
   18. Static / prose pages
   19. Empty states & utilities
   20. Responsive breakpoints
   ============================================================ */

/* ===== 1. Tokens & base ===== */
:root {
  --ink: #172033;
  --muted: #667085;
  --line: #d8e0ea;
  --soft: #f3f6fa;
  --navy: #071827;
  --navy-2: #102b46;
  --blue: #0878df;
  --blue-2: #20a3ff;
  --orange: #f26b2b;
  --white: #fff;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: var(--white);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
}

svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 500px;
  margin-bottom: 12px;
  font-size: clamp(28px, 2.55vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h1 span {
  display: block;
}

h2 {
  margin-bottom: 12px;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.025em;
}

h3 {
  margin-bottom: 9px;
  font-size: 20px;
  line-height: 1.22;
}

.eyebrow,
.mega-feature span {
  color: var(--blue-2);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 8px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ===== 2. Layout helpers ===== */
.container {
  width: min(1200px, calc(100% - 40px));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== 3. Buttons ===== */
.btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 5px;
  font: inherit;
  /* Professional ecommerce weight — heavy 900 reads as shouting */
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  color: var(--white);
  background: var(--blue);
}

.btn-primary:hover {
  background: #0669c4;
}

.btn-outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.08);
}

.btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.16);
}

.btn-dark {
  color: var(--white);
  background: var(--navy);
}

.btn-dark:hover {
  background: var(--navy-2);
}

.btn-outline-dark {
  color: var(--navy);
  border-color: var(--navy);
  background: transparent;
}

.btn-outline-dark:hover {
  color: var(--white);
  background: var(--navy);
}

.btn-outline-blue {
  color: var(--blue);
  border-color: #b9d7f3;
  background: #f2f8ff;
}

.btn-outline-blue:hover {
  border-color: var(--blue);
  background: #e5f2ff;
}

.btn-sm {
  min-height: 38px;
  padding: 0 14px;
  font-size: 13px;
}

.btn-block {
  width: 100%;
}

/* ===== 4. Header ===== */
.utility-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 34px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--white);
  box-shadow: 0 1px 0 rgba(15, 32, 53, 0.08);
}

.utility {
  color: #d8e9ff;
  background: var(--navy);
  font-size: 13px;
}

.utility a {
  color: #d8e9ff;
}

.utility a:hover {
  color: var(--white);
  text-decoration: underline;
}

.utility-links {
  display: flex;
  gap: 18px;
  margin-left: auto;
}

.header-main {
  display: grid;
  grid-template-columns: 190px minmax(280px, 1fr) auto;
  gap: 22px;
  align-items: center;
  min-height: 78px;
}

.brand img {
  width: 172px;
  max-width: 100%;
  height: auto; /* width/height attributes give the aspect ratio; never stretch */
}

.search {
  display: grid;
  grid-template-columns: 1fr auto;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  background: var(--white);
}

.search:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(8, 120, 223, 0.14);
}

.search input {
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  outline: 0;
  font: inherit;
}

.search button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 54px;
  padding: 0;
  color: var(--white);
  border: 0;
  background: var(--navy-2);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s;
}

.search button:hover {
  background: var(--blue);
}

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

.header-actions a {
  position: relative;
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  color: #243246;
  font-size: 13px;
  font-weight: 400;
  border-radius: 5px;
  transition: background-color 0.18s, color 0.18s;
}

.header-actions a:hover {
  color: var(--blue);
  background: var(--soft);
}

.cart-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  color: var(--white);
  border-radius: 999px;
  background: var(--orange);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.cart-badge[hidden] {
  display: none;
}

/* ===== 5. Navigation, mega menu, mobile menu ===== */
.desktop-nav {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.nav-row {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 42px;
  font-size: 14px;
  font-weight: 400;
}

.nav-row a,
.nav-trigger {
  position: relative;
  color: #2d3a4d;
}

.nav-row a:hover,
.nav-trigger:hover {
  color: var(--blue);
}

.nav-trigger {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.nav-row a.active::after,
.nav-trigger.active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -12px;
  left: 0;
  height: 3px;
  background: var(--blue);
}

.mega-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: none;
  border-bottom: 1px solid var(--line);
  background: #fbfdff;
  box-shadow: 0 24px 54px rgba(15, 32, 53, 0.16);
}

.mega-menu.is-open {
  display: block;
  animation: pts-fade-down 0.18s ease-out;
}

@keyframes pts-fade-down {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mega-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 24px;
  padding: 20px 0;
}

.mega-column p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mega-column a,
.mobile-panel a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 31px;
  color: #223248;
  font-size: 14px;
  font-weight: 720;
}

.mega-column a:hover {
  color: var(--blue);
}

.mini-icon {
  width: 30px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--blue);
  border: 1px solid #c6ddf5;
  border-radius: 4px;
  background: #eaf5ff;
  font-size: 10px;
  font-weight: 900;
}

.mega-categories {
  min-width: 0;
}

.mega-category-list {
  max-height: 216px; /* Six uniform 36px rows. Heading stays outside scrolling. */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  scrollbar-width: thin;
}

.mega-categories .mega-category-list a {
  box-sizing: border-box;
  height: 36px;
  min-height: 36px;
  align-items: center;
  margin: 0;
  padding-block: 0;
  line-height: 1.2;
}

.mega-category-list a > span:last-child {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mega-categories .mini-icon {
  flex: 0 0 30px;
}

.mega-category-root ~ .mega-category-root {
  border-top: 1px solid #dce6ef;
}

.mega-categories .mega-category-child {
  padding-left: calc(var(--category-level, 1) * 10px);
  font-size: 13px;
  font-weight: 550;
}

.mega-feature {
  padding: 18px;
  border-left: 4px solid var(--blue);
  border-radius: 6px;
  background: var(--navy);
  color: var(--white);
}

.mega-feature strong {
  display: block;
  margin: 8px 0;
  font-size: 18px;
}

.mega-feature p {
  color: #c5d6e8;
}

.mega-feature a {
  color: var(--blue-2);
  font-weight: 900;
}

.mobile-menu {
  display: none;
}

/* ===== 6. Hero (CMS slider — Admin > Content > Sliders) ===== */
.hero {
  position: relative;
  display: grid;
  background-color: #03101e;
  color: var(--white);
  overflow: hidden;
}

/* Slides stack in the same grid cell, so the hero keeps the height of the
   tallest one and swapping slides never shifts the page below it. */
.hero-slide {
  position: relative;
  grid-area: 1 / 1;
}

/* `hidden` is the single source of slide state; display:grid would beat the
   UA stylesheet's display:none, so restate it. */
.hero-slide[hidden] {
  display: none;
}

/* The background is a real <img> (width/height set) so it is sized before it
   loads — no layout shift, and it stays readable to assistive tech. */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Gradient scrim: protects the left-hand copy at every image brightness. */
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 13, 25, 0.94) 0%, rgba(5, 18, 34, 0.86) 34%, rgba(5, 18, 34, 0.48) 62%, rgba(5, 18, 34, 0.12) 100%);
}

.hero-grid {
  position: relative;
  z-index: 1;
  min-height: 420px;
  display: flex;
  align-items: center;
  padding: 48px 0 60px;
}

.hero-copy {
  max-width: 560px;
}

.hero-title {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--white);
}

.hero-copy p:not(.eyebrow):not(.hero-title),
.cta p {
  max-width: 520px;
  color: #d7e6f6;
  font-size: 15px;
  line-height: 1.6;
}

.hero-lead {
  margin-top: 16px;
}

/* Controls: real buttons, keyboard-operable, only rendered for 2+ slides. */
.hero-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(5, 18, 34, 0.42);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}

.hero-nav:hover,
.hero-nav:focus-visible {
  background: rgba(5, 18, 34, 0.78);
  border-color: var(--white);
}

.hero-prev { left: 16px; }
.hero-next { right: 16px; }

.hero-nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.hero-dot {
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.18s, width 0.18s;
}

.hero-dot.is-active {
  width: 46px;
  background: var(--white);
}

.hero-dot:focus-visible,
.hero-nav:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

.hero-actions,
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.hero .btn {
  min-height: 38px;
  padding: 0 28px;
}

/* ===== 7. Homepage sections ===== */
.section {
  padding: 68px 0;
}

.section-heading {
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
}

.section-heading p,
.shop-source-intro p,
.path-card p,
.finder-grid p,
.services p,
.solution-copy p,
.content-grid p,
.site-footer p {
  color: var(--muted);
  line-height: 1.65;
}

/* Shop or source (B2B + B2C) */
.shop-source {
  background:
    linear-gradient(180deg, #fcfdff, #f5f8fc);
}

.shop-source-intro {
  max-width: 700px;
  margin: 0 auto 40px;
  text-align: center;
}

.shop-source-intro h2 {
  font-size: clamp(26px, 2.6vw, 36px);
}

.shop-source-intro > p:not(.eyebrow) {
  max-width: 620px;
  margin: 0 auto 24px;
  font-size: 16px;
}

.shop-source-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.shop-source-actions .btn {
  min-height: 44px;
  padding: 0 26px;
  font-size: 14px;
}

.path-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.path-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.path-card.path-shop {
  border-top: 3px solid var(--blue);
}

.path-card.path-source {
  border-top: 3px solid var(--navy);
}

.path-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.path-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--blue);
  border: 1px solid #cfe2f6;
  border-radius: 8px;
  background: #eef6ff;
}

.path-source .path-icon {
  color: var(--navy);
  border-color: #cdd8e6;
  background: #eef2f7;
}

.path-icon svg {
  width: 23px;
  height: 23px;
}

.path-tag {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.path-head h3 {
  margin-bottom: 0;
  font-size: 19px;
}

.path-lead {
  margin-bottom: 16px;
  font-size: 14px;
}

.path-steps {
  margin: 0 0 20px;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.path-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.path-steps svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--blue);
  stroke-width: 2.4;
}

.path-source .path-steps svg {
  color: var(--navy);
}

.path-link {
  margin-top: auto;
  color: var(--blue);
  font-size: 14px;
  font-weight: 900;
}

.path-source .path-link {
  color: var(--navy-2);
}

/* Homepage feature shortcuts (admin-managed). auto-fit keeps the approved
   four-across desktop look with four items and degrades gracefully when an
   admin configures fewer or more. The separator lives on this element, so
   an empty shortcut list leaves no stray rule or gap behind. */
.quote-support {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 24px;
  margin-top: 42px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.quote-support a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  border-radius: 8px;
  transition: color 0.18s;
}

.quote-support a:hover .qs-icon,
.quote-support a:focus-visible .qs-icon {
  color: var(--white);
  border-color: var(--blue);
  background: var(--blue);
}

.quote-support a:hover p {
  color: var(--blue);
}

.qs-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--blue);
  border: 1px solid #cfe2f6;
  border-radius: 8px;
  background: #eef6ff;
}

.qs-icon svg {
  width: 20px;
  height: 20px;
}

.quote-support p {
  margin-bottom: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

/* Product finder */
.product-finder {
  background: var(--soft);
}

.finder-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.55fr) minmax(0, 1fr);
  gap: 50px;
  align-items: center;
}

.product-orbit {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.product-orbit a {
  min-height: 112px;
  display: grid;
  place-items: center;
  color: var(--navy);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(15, 32, 53, 0.08);
  transition: border-color 0.18s, transform 0.18s;
}

.product-orbit a:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
}

/* Services */
.services {
  background: var(--white);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.service-grid article,
.solution-cards a,
.content-grid article {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.line-icon {
  display: block;
  margin-bottom: 26px;
  color: var(--blue);
  font-weight: 950;
}

.service-grid a,
.content-grid a {
  color: var(--blue);
  font-weight: 900;
}

/* Solutions */
.solutions {
  color: var(--white);
  background: var(--navy);
}

.solution-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1fr);
  gap: 46px;
  align-items: center;
}

.solution-copy p {
  color: #c5d6e8;
}

.solution-copy .btn-outline-dark {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.42);
}

.solution-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.solution-cards a {
  min-height: 150px;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  transition: border-color 0.18s, background-color 0.18s;
}

.solution-cards a:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
}

.solution-cards strong,
.solution-cards span {
  display: block;
}

.solution-cards span {
  margin-top: 12px;
  color: #bdd0e5;
  line-height: 1.5;
}

/* Brands */
.brands {
  background: var(--white);
}

.brand-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.brand-strip a,
.brand-strip span {
  min-height: 74px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #233148;
  font-weight: 950;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.brand-strip a:hover {
  border-color: var(--blue);
  box-shadow: 0 10px 22px rgba(15, 32, 53, 0.08);
}

/* Content band */
.content-band {
  background: var(--soft);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.05fr) repeat(3, 1fr);
  gap: 16px;
}

.content-grid article span {
  display: block;
  margin-bottom: 18px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Closing CTA band */
.cta {
  padding: 72px 0;
  color: var(--white);
  background:
    linear-gradient(120deg, rgba(7, 24, 39, 0.98), rgba(16, 43, 70, 0.96)),
    radial-gradient(circle at 80% 10%, rgba(8, 120, 223, 0.35), transparent 36%);
}

.cta-inner {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
}

.cta h2 {
  max-width: 760px;
}

/* ===== 8. Footer ===== */
.site-footer {
  color: #c5d6e8;
  background: #050d18;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) repeat(4, 1fr);
  gap: 34px;
  padding: 58px 0 42px;
}

.footer-brand img {
  width: 190px;
  height: auto;
  margin-bottom: 18px;
  filter: brightness(0) invert(1);
}

.footer-quote {
  display: inline-flex;
  margin-top: 12px;
  color: var(--white);
  font-weight: 900;
}

.footer-column h3 {
  margin: 0 0 15px;
  color: var(--white);
  font-size: 15px;
}

.footer-column a {
  display: block;
  margin-bottom: 10px;
  color: #c5d6e8;
  font-size: 14px;
}

.footer-column a:hover,
.footer-quote:hover {
  color: var(--white);
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #9db0c6;
  font-size: 13px;
}

/* ===== 9. Page head & breadcrumbs ===== */
.page-head {
  padding: 30px 0 26px;
  background: linear-gradient(180deg, #fcfdff, #f4f7fb);
  border-bottom: 1px solid var(--line);
}

.page-head h1 {
  max-width: none;
  margin-bottom: 0;
  font-size: clamp(26px, 2.4vw, 34px);
}

.page-head .lede {
  max-width: 640px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}

.crumbs a {
  color: var(--muted);
}

.crumbs a:hover {
  color: var(--blue);
  text-decoration: underline;
}

.crumbs [aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
}

.crumbs .crumb-sep {
  color: #a9b6c6;
}

/* ===== 10. Forms & alerts ===== */
.field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--white);
  font: inherit;
  font-size: 14px;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.55;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(8, 120, 223, 0.14);
}

.field input::placeholder,
.field textarea::placeholder {
  color: #98a4b5;
}

.field .hint {
  color: var(--muted);
  font-size: 12px;
}

.field input[type="file"] {
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  padding: 9px 10px;
  overflow: hidden;
  cursor: pointer;
}

.field .optional {
  color: var(--muted);
  font-weight: 500;
}

.field .field-error {
  color: #a4262c;
  font-size: 13px;
  font-weight: 600;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.form-grid .span-2 {
  grid-column: 1 / -1;
}

fieldset.form-fields {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

fieldset.form-fields:disabled {
  opacity: 0.55;
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  padding: 13px 16px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  /* Long unbroken part numbers/product names must wrap, not widen the page. */
  overflow-wrap: anywhere;
  min-width: 0;
}

.alert svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.alert-success {
  color: #0a6a37;
  border: 1px solid #b7e5c9;
  background: #e9f9f0;
}

.alert-info {
  color: #114b7c;
  border: 1px solid #bcdcf7;
  background: #eaf5ff;
}

.alert-error {
  color: #8a1f1f;
  border: 1px solid #f0c1c1;
  background: #fdeeee;
}

/* ===== 11. Listing toolbar & filters ===== */
.listing-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
}

.listing-count {
  color: var(--muted);
  font-size: 14px;
}

.listing-count strong {
  color: var(--ink);
}

.filter-bar {
  display: grid;
  gap: 14px;
  margin-bottom: 26px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.filter-search {
  position: relative;
  max-width: 420px;
}

.filter-search svg {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 16px;
  height: 16px;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.filter-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 40px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font: inherit;
  font-size: 14px;
}

.filter-search input:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(8, 120, 223, 0.14);
}

.filter-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--muted);
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}

.filter-clear:hover {
  color: var(--ink);
  background: var(--soft);
}

.filter-clear[hidden] {
  display: none;
}

.az-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.az-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  color: #2d3a4d;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.az-btn:hover:not(:disabled) {
  border-color: var(--blue);
  color: var(--blue);
}

.az-btn.is-active {
  color: var(--white);
  border-color: var(--blue);
  background: var(--blue);
}

.az-btn:disabled {
  color: #b6c0cd;
  background: var(--soft);
  cursor: default;
}

/* ===== 12. Product grid & cards, pagination ===== */
.listing-section {
  padding: 40px 0 64px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.product-card,
.tile-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.product-card:hover,
.tile-card:hover {
  border-color: #b9cfe8;
  box-shadow: 0 14px 30px rgba(15, 32, 53, 0.1);
  transform: translateY(-2px);
}

.product-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  min-height: 0;
  overflow: hidden;
  position: relative;
  padding: 18px;
  background: #fff;
  border-bottom: 1px solid var(--soft);
}

.product-thumb img {
  position: absolute;
  inset: 18px;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
  object-fit: contain;
}

.thumb-fallback {
  width: 54px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--blue);
  border: 1px solid #c6ddf5;
  border-radius: 6px;
  background: #eaf5ff;
  font-size: 13px;
  font-weight: 900;
}

.product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  padding: 15px 16px 16px;
}

.product-kicker {
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

a.product-kicker:hover {
  text-decoration: underline;
}

.product-title {
  margin: 0;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.35;
}

.product-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-title a:hover {
  color: var(--blue);
}

.product-part {
  color: var(--muted);
  font-size: 12.5px;
}

.product-part strong {
  color: var(--ink);
  font-weight: 700;
}

.product-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

.product-price {
  color: var(--navy);
  font-size: 18px;
  font-weight: 900;
}

.product-price-note {
  color: var(--muted);
  font-size: 12px;
}

.product-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}

.product-actions .btn {
  min-height: 38px;
  padding: 0 10px;
  font-size: 13px;
}

/* Category / brand tiles */
.tile-thumb {
  display: grid;
  /* minmax(0, 1fr) gives the single cell the thumb's definite content box;
     an auto track would grow to the image's natural size, so the image's
     max-height: 100% would resolve against that and never constrain it. */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  flex: none;
  height: 150px;
  padding: 18px;
  background: #fbfdff;
  border-bottom: 1px solid var(--soft);
}

.tile-thumb img {
  max-width: 80%;
  max-height: 100%;
  object-fit: contain;
}

.tile-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  padding: 16px 18px 18px;
}

.tile-body h2,
.tile-body h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: 0;
}

.tile-body p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.tile-link {
  margin-top: auto;
  padding-top: 10px;
  color: var(--blue);
  font-size: 13.5px;
  font-weight: 900;
}

/* Pagination */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.pagination a,
.pagination span {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--white);
  color: #2d3a4d;
  font-size: 14px;
  font-weight: 700;
}

.pagination a:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.pagination .is-current {
  color: var(--white);
  border-color: var(--blue);
  background: var(--blue);
}

.pagination .is-disabled {
  color: #b6c0cd;
  background: var(--soft);
}

/* ===== 13. Product detail ===== */
.pd-section {
  padding: 36px 0 64px;
}

.pd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 34px;
  align-items: start;
}

.pd-media {
  display: grid;
  place-items: center;
  min-height: 420px;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.pd-media img {
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
}

.pd-gallery { min-width: 0; }
.pd-gallery .pd-media { height: 420px; min-height: 0; overflow: hidden; }
.pd-gallery .pd-media > a { display: block; width: 100%; height: 100%; min-height: 0; }
.pd-gallery .pd-media img { width: 100%; height: 100%; object-fit: contain; }
.pd-thumbnails { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pd-thumbnail { display: block; width: 72px; height: 72px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.pd-thumbnail[aria-pressed="true"], .pd-thumbnail:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pd-thumbnail img { width: 100%; height: 100%; object-fit: contain; }

.pd-media .thumb-fallback {
  width: 92px;
  height: 74px;
  font-size: 22px;
}

.pd-panel {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.pd-panel h1 {
  max-width: none;
  margin: 4px 0 14px;
  font-size: clamp(22px, 2vw, 28px);
}

.pd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  color: #2d3a4d;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--soft);
  font-size: 13px;
}

.meta-chip strong {
  color: var(--ink);
}

a.meta-chip:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.pd-price {
  margin: 4px 0 4px;
  color: var(--navy);
  font-size: 30px;
  font-weight: 900;
}

.pd-price-note {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
}

.pd-actions {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.pd-assure {
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.pd-assure li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  color: #2d3a4d;
  font-size: 14px;
  line-height: 1.45;
}

.pd-assure svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--blue);
  stroke-width: 2.4;
}

.pd-desc {
  max-width: 820px;
  margin-top: 44px;
}

.pd-desc h2 {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 22px;
}

.pd-desc p {
  color: #2d3a4d;
  font-size: 15px;
  line-height: 1.75;
}

/* ===== 14. RFQ / contact ===== */
.split-section {
  padding: 40px 0 64px;
}

.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
  gap: 26px;
  align-items: start;
}

.panel-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.panel-card > h2 {
  font-size: 22px;
  letter-spacing: -0.01em;
}

.panel-card .panel-lead {
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.side-panel {
  padding: 26px;
  color: var(--white);
  border-radius: 8px;
  background: linear-gradient(160deg, var(--navy), var(--navy-2));
}

.side-panel h2 {
  font-size: 20px;
  letter-spacing: -0.01em;
}

.side-panel > p {
  color: #c5d6e8;
  font-size: 14px;
  line-height: 1.6;
}

.side-contact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  font-size: 14px;
  line-height: 1.5;
}

.side-contact + .side-contact {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.side-contact svg {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  color: var(--blue-2);
}

.side-contact a:hover {
  text-decoration: underline;
}

.side-steps {
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  list-style: none;
  counter-reset: step;
}

.side-steps li {
  display: flex;
  gap: 12px;
  padding: 7px 0;
  color: #d7e6f6;
  font-size: 14px;
  line-height: 1.5;
  counter-increment: step;
}

.side-steps li::before {
  content: counter(step);
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--white);
  border-radius: 999px;
  background: var(--blue);
  font-size: 12px;
  font-weight: 900;
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 26px;
}

.contact-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.contact-card .qs-icon {
  margin-bottom: 14px;
}

.contact-card h2 {
  margin-bottom: 6px;
  font-size: 17px;
  letter-spacing: 0;
}

.contact-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.contact-card a {
  color: var(--blue);
  font-weight: 800;
}

.contact-card a:hover {
  text-decoration: underline;
}

/* ===== 15. Cart drawer ===== */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(7, 24, 39, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s;
}

.drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--white);
  box-shadow: -18px 0 44px rgba(7, 24, 39, 0.24);
  transform: translateX(105%);
  transition: transform 0.28s ease;
  visibility: hidden;
}

.cart-drawer.is-open {
  transform: none;
  visibility: visible;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.drawer-head h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.drawer-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #2d3a4d;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
}

.drawer-close:hover {
  color: var(--blue);
  border-color: var(--blue);
}

.drawer-items {
  flex: 1;
  overflow-y: auto;
  padding: 6px 20px;
}

.drawer-note {
  padding: 12px 20px;
  color: var(--muted);
  background: #fbfdff;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.5;
}

.drawer-foot {
  display: grid;
  gap: 10px;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--line);
}

.drawer-subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--muted);
}

.drawer-subtotal strong {
  color: var(--ink);
  font-size: 18px;
}

/* Cart line (shared by drawer + cart page) */
.cart-line {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--soft);
}

.cart-line:last-child {
  border-bottom: 0;
}

.cart-line-thumb {
  display: grid;
  place-items: center;
  width: 62px;
  height: 56px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfdff;
  overflow: hidden;
}

.cart-line-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.cart-line-thumb .thumb-fallback {
  width: 34px;
  height: 28px;
  font-size: 10px;
  border-radius: 4px;
}

.cart-line-info {
  min-width: 0;
}

.cart-line-name {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
}

.cart-line-name:hover {
  color: var(--blue);
}

.cart-line-part {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
}

.cart-line-price {
  margin-top: 4px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 900;
}

.cart-line-price .quote-flag {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.cart-line-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}

.qty-stepper button {
  width: 30px;
  height: 30px;
  padding: 0;
  color: #2d3a4d;
  border: 0;
  background: var(--soft);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.qty-stepper button:hover {
  color: var(--blue);
}

.qty-stepper output {
  min-width: 34px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 800;
}

.cart-line-remove {
  padding: 0;
  color: var(--muted);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.cart-line-remove:hover {
  color: #b42318;
  text-decoration: underline;
}

/* ===== 16. Cart & checkout pages ===== */
.cart-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 8px 24px;
}

.summary-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.summary-card h2 {
  margin-bottom: 16px;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  color: #2d3a4d;
  font-size: 14px;
}

.summary-row + .summary-row {
  border-top: 1px solid var(--soft);
}

.summary-row.summary-total {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.summary-note {
  margin: 14px 0 16px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.summary-card .btn + .btn {
  margin-top: 8px;
}

.checkout-items {
  margin: 0 0 6px;
}

.checkout-items .cart-line {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  padding: 12px 0;
}

/* Summary line item (checkout review, order confirmation, order lookup).
   No thumbnail column: name + "unit × qty" flex, line total on the right. */
.summary-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--soft);
}

.summary-line:last-child {
  border-bottom: 0;
}

.summary-line-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.summary-line-name {
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.summary-line-part {
  color: var(--muted);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.summary-line-meta {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.summary-line-total {
  color: var(--navy);
  font-size: 14px;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.summary-row > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.summary-row > span:last-child {
  text-align: right;
}

/* Customer shipment rows (order confirmation + lookup) */
.order-shipment-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

.order-shipment-track {
  margin: 8px 0 4px;
}

.checkout-qty {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* Payment method choice */
.pay-methods {
  display: grid;
  gap: 8px;
}

.pay-method {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fbfdff;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.pay-method:hover {
  border-color: var(--blue);
}

.pay-method:has(input:checked) {
  border-color: var(--blue);
  background: #eef6ff;
}

.pay-method input {
  accent-color: var(--blue);
  width: 16px;
  height: 16px;
  margin: 0;
}

/* "Prefer a quote instead" collapsible on checkout */
details.quote-alt > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

details.quote-alt > summary span {
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
}

/* ===== 17. Auth & account pages ===== */
.auth-section {
  padding: 52px 0 72px;
  background: linear-gradient(180deg, #fcfdff, #f4f7fb);
}

.auth-card {
  max-width: 460px;
  margin: 0 auto;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 18px 40px rgba(15, 32, 53, 0.07);
}

.auth-card h1 {
  max-width: none;
  font-size: 26px;
}

.auth-card .auth-lead {
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.auth-card form {
  display: grid;
  gap: 14px;
}

.auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  font-size: 13.5px;
}

.auth-links a {
  color: var(--blue);
  font-weight: 800;
}

.auth-links a:hover {
  text-decoration: underline;
}

.auth-alt {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.auth-alt p {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13.5px;
}

.account-section {
  padding: 40px 0 64px;
}

.account-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.account-nav {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.account-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  color: #2d3a4d;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700;
  transition: background-color 0.15s, color 0.15s;
}

.account-nav a:hover {
  color: var(--blue);
  background: var(--soft);
}

.account-nav a.is-active {
  color: var(--blue);
  background: #eaf5ff;
}

.account-nav svg {
  width: 17px;
  height: 17px;
}

.account-main {
  display: grid;
  gap: 18px;
}

.account-subhead {
  margin: 0;
  font-size: 17px;
  letter-spacing: 0;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.stat-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.stat-card span {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stat-card strong {
  display: block;
  margin-top: 8px;
  color: var(--navy);
  font-size: 24px;
  font-weight: 900;
}

/* ===== 18. Static / prose pages ===== */
.prose-section {
  padding: 40px 0 64px;
}

.prose {
  max-width: 820px;
  padding: 34px 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: #2d3a4d;
  font-size: 15px;
  line-height: 1.75;
}

.prose h2 {
  margin: 28px 0 12px;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.prose h3 {
  margin: 22px 0 8px;
  font-size: 18px;
}

.prose h2:first-child,
.prose h3:first-child,
.prose p:first-child {
  margin-top: 0;
}

.prose ul,
.prose ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.prose li {
  margin-bottom: 6px;
}

.prose a {
  color: var(--blue);
  text-decoration: underline;
}

/* Rich blog/resource bodies (admin editor output) */
.article-prose {
  border: 0;
  padding: 0;
  max-width: 100%;
}

.prose p {
  margin: 0 0 16px;
}

.prose h4 {
  margin: 18px 0 8px;
  font-size: 16px;
}

.prose blockquote {
  margin: 0 0 18px;
  padding: 10px 18px;
  border-left: 3px solid var(--blue);
  background: var(--soft);
  border-radius: 0 8px 8px 0;
  color: #44546a;
}

.prose blockquote p:last-child {
  margin-bottom: 0;
}

.prose pre,
.prose code {
  font-size: 13.5px;
  background: var(--soft);
  border-radius: 6px;
}

.prose code {
  padding: 1px 6px;
}

.prose pre {
  padding: 14px 16px;
  overflow-x: auto;
}

.prose table {
  width: 100%;
  margin: 0 0 18px;
  border-collapse: collapse;
  font-size: 14px;
}

.prose th,
.prose td {
  padding: 8px 12px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.prose thead th,
.prose th {
  background: var(--soft);
  font-weight: 600;
}

.prose hr {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* About page */
.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
}

.about-media {
  min-height: 340px;
  border-radius: 8px;
  background: linear-gradient(150deg, var(--navy), var(--navy-2));
  overflow: hidden;
}

.about-media img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
}

.about-copy h1 {
  max-width: none;
}

.about-copy p {
  color: #2d3a4d;
  font-size: 15px;
  line-height: 1.75;
}

.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.vm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.vm-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.vm-card .qs-icon {
  margin-bottom: 16px;
}

.vm-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.7;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.value-grid article {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.value-grid h3 {
  font-size: 17px;
}

.value-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* ===== 19. Empty states & utilities ===== */
.empty-state {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 56px 24px;
  text-align: center;
  border: 1px dashed #c3cfdd;
  border-radius: 8px;
  background: #fbfdff;
}

.empty-state .qs-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 8px;
}

.empty-state .qs-icon svg {
  width: 24px;
  height: 24px;
}

.empty-state h2,
.empty-state h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.empty-state p {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

body.drawer-locked {
  overflow: hidden;
}

[hidden] {
  display: none !important;
}

/* Listing sort toolbar */
.toolbar-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13.5px;
}

.toolbar-sort select {
  min-height: 38px;
  padding: 0 10px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--white);
  font: inherit;
  font-size: 13.5px;
}

.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Product detail buy row (qty + add) */
.pd-buy {
  display: flex;
  gap: 10px;
}

.pd-buy .qty-field {
  flex-shrink: 0;
  width: 74px;
}

.pd-buy .qty-field input {
  width: 100%;
  min-height: 42px;
  padding: 0 6px 0 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font: inherit;
  font-size: 14px;
}

.pd-buy .btn {
  flex: 1;
}

/* Honest trust chips on product detail */
.trust-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.trust-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  color: #114b7c;
  border: 1px solid #bcdcf7;
  border-radius: 999px;
  background: #eaf5ff;
  font-size: 12px;
  font-weight: 600;
}

.trust-chips svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}

/* Related products rail */
.related-rail {
  margin-top: 48px;
}

.related-rail > h2 {
  margin-bottom: 18px;
  font-size: 22px;
  letter-spacing: -0.01em;
}

/* Account data tables */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th {
  padding: 12px 16px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: #fbfdff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.data-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--soft);
  vertical-align: top;
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.data-table a {
  color: var(--blue);
  font-weight: 600;
}

.data-table a:hover {
  text-decoration: underline;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
  color: #2d3a4d;
  border: 1px solid var(--line);
  background: var(--soft);
}

.status-chip.is-paid,
.status-chip.is-processing {
  color: #0a6a37;
  border-color: #b7e5c9;
  background: #e9f9f0;
}

.status-chip.is-pending,
.status-chip.is-authorized,
.status-chip.is-partially_captured {
  color: #7a4d05;
  border-color: #f3d9a4;
  background: #fdf3dd;
}

.status-chip.is-failed,
.status-chip.is-cancelled {
  color: #8a1f1f;
  border-color: #f0c1c1;
  background: #fdeeee;
}

/* Sign-out button rendered inline (POST form) */
.linklike {
  padding: 0;
  color: inherit;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.linklike:hover {
  text-decoration: underline;
}

/* Feature rows (solutions / services pages) */
.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
  padding: 44px 0;
  border-bottom: 1px solid var(--line);
}

.feature-row:last-of-type {
  border-bottom: 0;
}

.feature-row h2 {
  font-size: clamp(22px, 2.2vw, 28px);
}

.feature-row .feature-copy > p {
  color: #2d3a4d;
  font-size: 15px;
  line-height: 1.7;
}

.feature-aside {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.feature-aside h3 {
  font-size: 15px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.5;
}

.check-list svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--blue);
  stroke-width: 2.4;
}

/* Facts band (about page) — real facts only, no invented stats */
.fact-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.fact-band article {
  padding: 22px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  background: var(--white);
}

.fact-band strong {
  display: block;
  margin-bottom: 6px;
  color: var(--navy);
  font-size: 16px;
}

.fact-band p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

/* Resource articles */
.article-body {
  max-width: 780px;
}

.article-body .prose {
  max-width: none;
}

.article-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--blue);
  font-size: 13.5px;
  font-weight: 600;
}

.article-back:hover {
  text-decoration: underline;
}

.article-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding: 22px 26px;
  color: var(--white);
  border-radius: 8px;
  background: linear-gradient(160deg, var(--navy), var(--navy-2));
}

.article-cta p {
  margin: 0;
  color: #c5d6e8;
  font-size: 14px;
}

.article-cta strong {
  display: block;
  color: var(--white);
  font-size: 16px;
  margin-bottom: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== 20. Responsive breakpoints ===== */
@media (max-width: 1050px) {
  .site-header {
    position: static;
  }

  .header-main {
    grid-template-columns: 170px minmax(250px, 1fr);
  }

  .header-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .mega-grid,
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
  }

  .finder-grid,
  .solution-grid,
  .content-grid {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    min-height: 340px;
  }

  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Raise the track minimum so the shortcut row lands on two balanced
     columns here instead of three-plus-an-orphan. */
  .quote-support {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .brand-strip,
  .product-orbit {
    grid-template-columns: repeat(3, 1fr);
  }

  .pd-grid,
  .split-grid,
  .about-intro {
    grid-template-columns: 1fr;
  }

  .pd-media {
    min-height: 320px;
  }

  .account-grid {
    grid-template-columns: 1fr;
  }

  .contact-cards,
  .stat-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .value-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .container {
    width: min(1200px, calc(100% - 28px));
  }

  /* Compact utility bar: key links only, single navy row */
  .utility {
    font-size: 12px;
  }

  .utility-inner {
    min-height: auto;
    gap: 0;
    padding: 7px 0;
  }

  .utility-inner > a,
  .utility-inner > span {
    display: none;
  }

  .utility-links {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
    gap: 10px;
  }

  /* Logo + compact action icons in one row, search full-width below */
  .header-main {
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
    padding: 10px 0;
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .brand img {
    width: 158px;
  }

  .header-actions {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    gap: 2px;
    justify-self: end;
  }

  .header-actions a {
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    border: 0;
  }

  .header-actions svg {
    width: 21px;
    height: 21px;
  }

  .action-label {
    display: none;
  }

  .search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: none;
  }

  .search input {
    width: 100%;
    min-height: 42px;
    font-size: 14px;
  }

  .search button {
    min-height: 42px;
    justify-content: center;
  }

  .desktop-nav,
  .mega-menu {
    display: none;
  }

  .mobile-menu {
    display: block;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fbfdff;
  }

  .mobile-menu summary {
    width: min(1200px, calc(100% - 28px));
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-inline: auto;
    color: var(--ink);
    cursor: pointer;
    font-weight: 900;
  }

  .mobile-menu summary span:last-child {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }

  .mobile-panel {
    width: min(1200px, calc(100% - 28px));
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 20px;
    margin: 0 auto;
    padding: 0 0 16px;
  }

  /* Narrow screens: darken the scrim evenly — there is no room for the
     image to breathe beside the copy. */
  .hero-slide::after {
    background: linear-gradient(90deg, rgba(3, 13, 25, 0.95), rgba(5, 18, 34, 0.86));
  }

  .hero-grid {
    min-height: auto;
    padding: 30px 0 46px;
  }

  .hero-title {
    font-size: 26px;
  }

  /* Arrows would sit on top of the copy at this width; the dots stay. */
  .hero-nav {
    display: none;
  }

  .hero-dots {
    bottom: 14px;
  }

  h1 {
    width: 100%;
    max-width: min(calc(100vw - 28px), 362px);
    font-size: 24px;
    line-height: 1.14;
    overflow-wrap: break-word;
  }

  h2 {
    max-width: 300px;
    margin-inline: auto;
    font-size: 25px;
    line-height: 1.1;
    overflow-wrap: break-word;
  }

  /* Inner pages keep left-aligned, full-width headings */
  .page-head h1,
  .pd-panel h1,
  .auth-card h1,
  .about-copy h1 {
    max-width: none;
  }

  .page-head h2,
  .prose h2,
  .pd-desc h2,
  .panel-card h2,
  .side-panel h2,
  .summary-card h2,
  .drawer-head h2,
  .tile-body h2,
  .empty-state h2,
  .contact-card h2,
  .vm-card h2 {
    max-width: none;
    margin-inline: 0;
  }

  .section-heading {
    max-width: min(calc(100vw - 28px), 362px);
  }

  .section-heading p {
    max-width: 300px;
    margin-inline: auto;
    font-size: 14px;
  }

  .hero-copy {
    width: 100%;
    max-width: min(calc(100vw - 28px), 362px);
  }

  .hero-copy p:not(.eyebrow):not(.hero-title) {
    max-width: min(calc(100vw - 28px), 362px);
    font-size: 14px;
    line-height: 1.45;
  }

  .hero-actions,
  .cta-actions,
  .cta-inner,
  .footer-bottom {
    flex-direction: column;
    align-items: stretch;
  }

  .hero .btn {
    min-height: 40px;
    width: fit-content;
    min-width: 154px;
  }

  .section {
    padding: 48px 0;
  }

  .path-grid,
  .quote-support,
  .service-grid,
  .solution-cards,
  .brand-strip,
  .product-orbit,
  .footer-top {
    grid-template-columns: 1fr;
  }

  .shop-source-intro {
    max-width: min(calc(100vw - 28px), 362px);
  }

  .shop-source-intro h2 {
    max-width: none;
    margin-inline: auto;
    font-size: 24px;
  }

  .shop-source-actions .btn {
    width: 100%;
  }

  .path-card {
    padding: 22px 20px 20px;
  }

  .quote-support {
    gap: 16px;
    margin-top: 30px;
    padding-top: 24px;
  }

  /* Inner pages */
  .page-head {
    padding: 22px 0 20px;
  }

  .listing-section,
  .split-section,
  .prose-section,
  .account-section {
    padding: 28px 0 48px;
  }

  .pd-section {
    padding: 24px 0 48px;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .product-body {
    padding: 12px 12px 13px;
  }

  .product-actions {
    grid-template-columns: 1fr;
  }

  .filter-bar {
    padding: 13px;
  }

  .form-grid,
  .contact-cards,
  .stat-cards,
  .vm-grid,
  .value-grid {
    grid-template-columns: 1fr;
  }

  .panel-card,
  .pd-panel,
  .auth-card,
  .prose {
    padding: 22px 18px;
  }

  .pd-media {
    min-height: 240px;
    padding: 22px;
  }

  .cart-panel {
    padding: 4px 16px;
  }

  .cart-line {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .cart-line-controls {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .empty-actions .btn {
    width: 100%;
  }

  .about-media {
    min-height: 220px;
  }

  .about-media img {
    min-height: 220px;
  }

  .auth-section {
    padding: 32px 0 52px;
  }

  .feature-row {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 30px 0;
  }

  .feature-row h2,
  .fact-band strong,
  .related-rail > h2,
  .article-cta strong {
    max-width: none;
    margin-inline: 0;
  }

  .fact-band {
    grid-template-columns: 1fr;
  }

  .pd-buy {
    flex-wrap: wrap;
  }

  .data-table th,
  .data-table td {
    padding: 10px 12px;
  }
}

/* ============================================================
   Listing filters (lf-) — sidebar on desktop, drawer on mobile
   ============================================================ */

.listing-layout { display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: start; }
.listing-main { min-width: 0; }

.lf-toggle { display: none; margin-bottom: 14px; }

.lf-sidebar {
    background: #fff;
    border: 1px solid #e5e9f2;
    border-radius: 12px;
    padding: 18px;
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}

.lf-group { padding: 12px 0; border-bottom: 1px solid #eef1f7; }
.lf-group:first-child { padding-top: 0; }

.lf-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #33415e; margin: 0 0 8px; }
.lf-title small { text-transform: none; color: #8a95af; font-weight: 500; }

.lf-options { max-height: 210px; overflow-y: auto; }

.lf-option { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #3d4a66; padding: 3px 0; margin: 0; cursor: pointer; }
.lf-option input { accent-color: #2563eb; }

.lf-count { margin-left: auto; font-size: 12px; color: #97a1b8; }

.lf-range { display: flex; align-items: center; gap: 8px; }
.lf-range input { width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid #d7deea; border-radius: 8px; font-size: 13.5px; }
.lf-range span { color: #97a1b8; }

.lf-actions { display: flex; gap: 8px; padding-top: 14px; }

@media (max-width: 991.98px) {
    .listing-layout { display: block; }
    .lf-toggle { display: inline-flex; }
    .lf-sidebar { display: none; position: static; max-height: none; margin-bottom: 18px; }
    .lf-sidebar.lf-open { display: block; }
}

/* ============================================================
   Brand rich content widgets (bw-)
   ============================================================ */

.bw-hero { background: #0d1526; color: #fff; padding: 64px 0 56px; }
.bw-hero--image { background-size: cover; background-position: center; }
.bw-hero h1 { color: #fff; font-size: 40px; margin: 10px 0 12px; }
.bw-hero-sub { color: #c7d1e6; max-width: 640px; font-size: 17px; margin-bottom: 22px; }
.bw-crumbs { font-size: 13px; color: #8fa0c2; }
.bw-crumbs a { color: #8fa0c2; }

.bw-section { padding: 48px 0; }
.bw-section.bw--dark { background: #0d1526; color: #e7ecf7; }
.bw-section.bw--dark h2, .bw-section.bw--dark h3 { color: #fff; }

.bw-heading { font-size: 28px; margin-bottom: 24px; }

.bw-band { max-width: 780px; }
.bw-band h2 { font-size: 30px; margin-bottom: 10px; }
.bw-sub { font-size: 17px; color: #5a6b8c; margin-bottom: 12px; }
.bw--dark .bw-sub { color: #aab8d4; }
.bw-desc { color: #46536f; line-height: 1.7; margin-bottom: 18px; }
.bw--dark .bw-desc { color: #c0cbe0; }

.bw-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.bw--reversed .bw-split { direction: rtl; }
.bw--reversed .bw-split > * { direction: ltr; }
.bw-split-media img { width: 100%; border-radius: 14px; }

.bw-boxes { display: grid; gap: 20px; }
.bw-cols-2 { grid-template-columns: repeat(2, 1fr); }
.bw-cols-3 { grid-template-columns: repeat(3, 1fr); }
.bw-cols-4 { grid-template-columns: repeat(4, 1fr); }
.bw-box { background: #fff; border: 1px solid #e5e9f2; border-radius: 12px; padding: 22px; }
.bw--dark .bw-box { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.bw-box img { max-height: 46px; margin-bottom: 12px; }
.bw-box h3 { font-size: 17px; margin-bottom: 8px; }
.bw-box p { font-size: 14px; color: #5a6b8c; margin-bottom: 8px; }
.bw--dark .bw-box p { color: #aab8d4; }

.bw-faq-item { border: 1px solid #e5e9f2; border-radius: 10px; margin-bottom: 10px; background: #fff; }
.bw-faq-item summary { padding: 14px 18px; font-weight: 600; cursor: pointer; }
.bw-faq-answer { padding: 0 18px 16px; color: #46536f; line-height: 1.65; }

.bw-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #10203f; color: #fff; border-radius: 16px; padding: 34px 38px; flex-wrap: wrap; }
.bw-cta h2 { color: #fff; margin-bottom: 6px; }
.bw-cta p { color: #b9c6e0; margin: 0; }

@media (max-width: 767.98px) {
    .bw-hero h1 { font-size: 30px; }
    .bw-split { grid-template-columns: 1fr; }
    .bw-cols-3, .bw-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .bw-cols-2, .bw-cols-3, .bw-cols-4 { grid-template-columns: 1fr; }
}

/* ---- PDP specifications table ---- */
.specs-block { margin-top: 34px; }
.specs-block h2 { font-size: 22px; margin-bottom: 14px; }
.specs-group-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #33415e; margin: 18px 0 6px; }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th, .specs-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid #eef1f7; font-size: 14.5px; vertical-align: top; }
.specs-table th { width: 38%; color: #5a6b8c; font-weight: 600; }

/* ============================================================
   Front/admin wiring hardening pass (2026-07)
   1. Nav products split link + caret
   2. Header search live suggestions
   3. Homepage brand logo chips
   4. Footer social links
   5. Brand widget: content band layouts + product grid columns
   6. Product card stock labels + admin badges
   ============================================================ */

/* ---- 1. Products nav: link + mega caret ---- */
.nav-products-group { display: inline-flex; align-items: center; gap: 2px; }
.nav-caret {
  display: inline-grid;
  place-items: center;
  padding: 4px 6px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  border-radius: 4px;
}
.nav-caret:hover, .nav-caret[aria-expanded="true"] { background: rgba(255, 255, 255, 0.12); }
.nav-caret svg { display: block; }

/* ---- 2. Header search suggestions ---- */
.search { position: relative; overflow: visible; }
.search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(15, 32, 53, 0.16);
  max-height: 420px;
  overflow-y: auto;
  padding: 6px 0;
}
.suggest-group + .suggest-group { border-top: 1px solid #eef1f7; margin-top: 4px; padding-top: 4px; }
.suggest-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #8b98b3;
  padding: 6px 14px 2px;
  margin: 0;
}
.search-suggest a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 14px;
  color: #233148;
  font-size: 14px;
  text-decoration: none;
}
.search-suggest a:hover, .search-suggest a.is-active { background: #f2f6fd; }
.suggest-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-part { color: #8b98b3; font-size: 12.5px; white-space: nowrap; }
.suggest-price { color: var(--blue); font-weight: 700; font-size: 13px; white-space: nowrap; }

/* ---- 3. Homepage brand logo chips ----
   Logos arrive in every aspect ratio, so the chip gives each one the SAME
   box and lets the image fit inside it rather than capping height alone:
   height-only sizing renders a wide wordmark (CyberPower, ViewSonic) several
   times smaller than a squarer mark (Dell) of identical file size. object-fit
   contain keeps every logo's own proportions — nothing is ever stretched, and
   nothing can overflow the card border.
   Source files padded with dead canvas are cropped by
   `php artisan pts:brands:normalize-logos`, so the ink fills the file and
   this box sizes what a visitor actually reads. */
.brand-strip .brand-logo-chip { padding: 10px 12px; }
.brand-strip .brand-logo-chip img {
  width: 100%;
  height: 46px;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1);
  opacity: 0.85;
  transition: filter 0.18s, opacity 0.18s;
}
.brand-strip .brand-logo-chip:hover img { filter: none; opacity: 1; }

/* ---- 4. Footer social links ---- */
.footer-social { display: flex; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.footer-social a { font-size: 13.5px; }

/* ---- 5. Brand widget refinements ---- */
.bw-band--center { max-width: 720px; margin: 0 auto; text-align: center; }
.bw-band--center .btn { margin-top: 4px; }
.bw-band--split {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.15fr;
  gap: 40px;
  align-items: center;
  max-width: none;
}
.bw--reversed .bw-band--split { direction: rtl; }
.bw--reversed .bw-band--split > * { direction: ltr; }
.bw-band-media img {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.bw--dark .bw-band-media img { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }

.brand-product-grid {
  display: grid;
  gap: 20px;
  justify-content: center;
}
.brand-product-grid.bw-cols-2 { grid-template-columns: repeat(2, minmax(0, 340px)); }
.brand-product-grid.bw-cols-3 { grid-template-columns: repeat(3, minmax(0, 340px)); }
.brand-product-grid.bw-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---- 6. Product card stock + badge ---- */
.product-thumb { position: relative; }
.product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1.5;
}
.product-stock { font-size: 12.5px; font-weight: 600; margin: 2px 0 0; }
.product-stock.stock-in { color: #15803d; }
.product-stock.stock-low { color: #b45309; }
.product-stock.stock-out { color: #b91c1c; }
.product-stock.stock-quote { color: #5a6b8c; }

@media (max-width: 900px) {
  .bw-band--split { grid-template-columns: 1fr; gap: 22px; }
  .brand-product-grid.bw-cols-3, .brand-product-grid.bw-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .brand-product-grid.bw-cols-2, .brand-product-grid.bw-cols-3, .brand-product-grid.bw-cols-4 { grid-template-columns: 1fr; }
  .search-suggest { max-height: 320px; }
}

.pd-media { position: relative; }
.pd-media .product-badge { font-size: 12px; }

/* ---- Checkout step indicator ---- */
.checkout-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.checkout-steps li {
  font-size: 13px;
  font-weight: 600;
  color: #8b98b3;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  background: #fff;
}
.checkout-steps li.is-active { color: var(--blue); border-color: var(--blue); }
.checkout-steps li.is-done { color: #15803d; border-color: #bbe3c8; }
.checkout-steps li a { color: inherit; text-decoration: none; }

/* ===== Cookie preferences banner (partials/cookie-consent) ===== */
.cookie-consent {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1200;
  max-height: 85vh;
  overflow-y: auto;
  padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  color: var(--ink);
  border-top: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 -10px 30px rgba(15, 32, 53, 0.12);
}
.cookie-consent[hidden] { display: none; }
.cookie-consent-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}
.cookie-consent h2 { margin: 0 0 4px; font-size: 16px; letter-spacing: 0; }
.cookie-consent p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.cookie-consent p a { color: var(--blue); font-weight: 700; }
.cookie-consent-disclosure { display: flex; align-items: center; gap: 18px; font-size: 13.5px; line-height: 1.55; }
.cookie-consent-disclosure a { color: var(--blue); font-weight: 700; }
.cookie-consent-copy-toggle { display: none; border: 0; padding: 6px 0; background: transparent; color: var(--blue); font: inherit; font-weight: 700; cursor: pointer; }
.cookie-consent-copy-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* Desktop: Accept, Reject and the Customize <summary> are inline boxes on
   one line (the row's intrinsic width is their sum, so the grid column fits
   them). <details> is inline, so its opened panel — block-level — drops to a
   full-width block below the row. Native <details>: works without JS.
   font-size/line-height 0 remove inter-element whitespace; the controls set
   their own sizes. An engine that keeps <details> block-level simply shows
   Customize on the next line. */
.cookie-consent-actions { max-width: 460px; font-size: 0; line-height: 0; text-align: right; }
.cookie-consent-actions > form { display: inline-block; margin: 0 8px 0 0; vertical-align: top; }
.cookie-consent-actions .btn,
.cookie-consent-custom > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  vertical-align: top;
}
.cookie-consent-custom { display: inline; }
.cookie-consent-custom > summary { list-style: none; cursor: pointer; }
.cookie-consent-custom > summary::-webkit-details-marker { display: none; }
/* contain: inline-size keeps the panel's text from widening the row, so the
   opened panel lines up exactly under the three buttons. */
.cookie-consent-panel { display: grid; gap: 10px; padding-top: 12px; font-size: 14px; line-height: 1.5; text-align: left; contain: inline-size; }
.cookie-consent-panel > .btn { justify-self: start; }
.cookie-consent-panel fieldset,
.cookie-settings-fieldset { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; border: 0; }
.cookie-option { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; }
.cookie-option input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
@media (max-width: 760px) {
  .cookie-consent-copy.has-disclosure-toggle:not(.is-expanded) #cookie-consent-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
  .cookie-consent-copy.has-disclosure-toggle .cookie-consent-copy-toggle:not([hidden]) { display: inline-block; }
  .cookie-consent-inner { grid-template-columns: 1fr; gap: 12px; }
  /* Narrow: Accept | Reject side by side, Customize full width below. */
  .cookie-consent-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: none; }
  .cookie-consent-actions > form { margin: 0; }
  .cookie-consent-custom { grid-column: 1 / -1; }
  .cookie-consent-actions > form .btn,
  .cookie-consent-custom > summary { width: 100%; }
}
@media (max-width: 360px) {
  .cookie-consent-actions { grid-template-columns: minmax(0, 1fr); }
  .cookie-consent-actions .btn,
  .cookie-consent-custom > summary { white-space: normal; text-align: center; }
}