/* ============================================================
   BHAGWATI TOOLS — COMPONENT LIBRARY
   Industrial Luxury Theme
   Depends on: design-system.css (must load first)
   ============================================================ */

/* ============================================================
   BUTTONS
   ============================================================ */

/* Base button reset */
.ds-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--ds-space-2);
  font-family:     var(--ds-font-primary);
  font-weight:     var(--ds-weight-bold);
  letter-spacing:  var(--ds-tracking-wider);
  text-transform:  uppercase;
  text-decoration: none;
  border:          none;
  border-radius:   var(--ds-radius-sm);
  cursor:          pointer;
  position:        relative;
  overflow:        hidden;
  transition:
    background-color var(--ds-transition-base),
    box-shadow       var(--ds-transition-base),
    transform        var(--ds-transition-base),
    color            var(--ds-transition-base),
    border-color     var(--ds-transition-base);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.ds-btn:focus-visible {
  outline:        2px solid var(--ds-color-red);
  outline-offset: 2px;
}

/* Button sizes */
.ds-btn--sm {
  font-size:  0.875rem;
  height:     2.5rem;     /* 40px */
  padding:    0 var(--ds-space-5);
}

.ds-btn--md {
  font-size:  0.9375rem;
  height:     3rem;       /* 48px */
  padding:    0 var(--ds-space-7);
}

.ds-btn--lg {
  font-size:  1rem;
  height:     3.5rem;     /* 56px */
  padding:    0 var(--ds-space-9, 2.25rem);
  min-width:  11rem;
}

/* Ripple element */
.ds-btn__ripple {
  position:      absolute;
  border-radius: 50%;
  background:    rgba(255,255,255,0.25);
  transform:     scale(0);
  pointer-events:none;
  animation:     ds-ripple 400ms var(--ds-ease-linear) forwards;
  width:  60px;
  height: 60px;
  margin-left: -30px;
  margin-top:  -30px;
}

/* === Primary — Signal Red === */
.ds-btn--primary {
  background:   var(--ds-color-red);
  color:        var(--ds-color-white);
  box-shadow:   var(--ds-shadow-red);
}

.ds-btn--primary:hover {
  background:   var(--ds-color-red-glow);
  box-shadow:   var(--ds-shadow-red-lg);
  transform:    translateY(-2px);
  color:        var(--ds-color-white);
}

.ds-btn--primary:active {
  background:   var(--ds-color-red-deep);
  box-shadow:   0 2px 6px rgba(211,47,47,0.30);
  transform:    translateY(1px);
}

/* === Secondary — Ghost/Outline === */
.ds-btn--secondary {
  background:   transparent;
  color:        var(--ds-color-steel-bright);
  border:       1.5px solid var(--ds-color-steel);
}

.ds-btn--secondary:hover {
  border-color: var(--ds-color-steel-bright);
  background:   rgba(255,255,255,0.08);
  color:        var(--ds-color-white);
  transform:    translateY(-2px);
}

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

/* === Ghost Red — for light surfaces === */
.ds-btn--ghost-red {
  background:   transparent;
  color:        var(--ds-color-red);
  border:       1.5px solid var(--ds-color-red);
}

.ds-btn--ghost-red:hover {
  background:   var(--ds-color-red-alpha-10);
  transform:    translateY(-2px);
}

.ds-btn--ghost-red:active {
  transform:    translateY(1px);
}

/* === WhatsApp === */
.ds-btn--whatsapp {
  background: var(--ds-color-whatsapp);
  color:      var(--ds-color-white);
}

.ds-btn--whatsapp:hover {
  background: var(--ds-color-whatsapp-dark);
  transform:  translateY(-2px);
  color:      var(--ds-color-white);
}

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

/* === Download === */
.ds-btn--download {
  background:  var(--ds-color-carbon);
  color:       var(--ds-color-steel-bright);
  border:      1px solid var(--ds-color-carbon-light);
  height:      auto;
  min-height:  3.5rem;
  padding:     var(--ds-space-3) var(--ds-space-5);
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--ds-weight-semibold);
  flex-direction: column;
  align-items: flex-start;
  gap:         var(--ds-space-1);
}

.ds-btn--download:hover {
  border-color: rgba(211,47,47,0.30);
  background:   var(--ds-color-carbon-light);
  transform:    none;
}

.ds-btn--download .ds-btn__label {
  font-size:     0.9375rem;
  font-weight:   var(--ds-weight-semibold);
  color:         var(--ds-color-steel-bright);
}

.ds-btn--download .ds-btn__meta {
  font-size:  0.75rem;
  color:      var(--ds-color-steel);
  font-weight:var(--ds-weight-regular);
  text-transform: none;
  letter-spacing: 0;
}

.ds-btn--download .ds-btn__icon {
  color: var(--ds-color-red);
}

/* === Icon Button === */
.ds-btn--icon {
  width:        2.75rem;  /* 44px */
  height:       2.75rem;
  padding:      0;
  background:   var(--ds-color-carbon-light);
  color:        var(--ds-color-steel-light);
  border-radius:var(--ds-radius-sm);
  font-size:    1.25rem;
}

.ds-btn--icon:hover {
  background:   var(--ds-color-carbon-light);
  color:        var(--ds-color-red);
  transform:    translateY(-2px);
}

/* === Disabled state — all variants === */
.ds-btn:disabled,
.ds-btn[aria-disabled="true"] {
  opacity:  0.35;
  cursor:   not-allowed;
  pointer-events: none;
  transform: none !important;
}

/* === Full-width modifier === */
.ds-btn--full {
  width: 100%;
}

/* ============================================================
   CARDS
   ============================================================ */

/* === Brand Card (Homepage) === */
.ds-card-brand {
  background:    var(--ds-color-carbon);
  border:        1px solid var(--ds-color-carbon-light);
  border-radius: var(--ds-radius-md);
  overflow:      hidden;
  transition:
    transform     var(--ds-duration-base) var(--ds-ease-spring),
    box-shadow    var(--ds-duration-base) var(--ds-ease-standard),
    border-color  var(--ds-duration-base) var(--ds-ease-standard);
  position: relative;
}

/* Red top accent bar — hidden by default, animates on hover */
.ds-card-brand::before {
  content:       '';
  position:      absolute;
  top:           0;
  left:          0;
  right:         0;
  height:        4px;
  background:    var(--ds-color-red);
  transform:     scaleX(0);
  transform-origin: left;
  transition:    transform var(--ds-duration-base) var(--ds-ease-standard);
}

.ds-card-brand:hover {
  transform:    translateY(-4px);
  box-shadow:
    var(--ds-shadow-2),
    0 0 0 1px rgba(211,47,47,0.15);
  border-color: rgba(211,47,47,0.40);
}

.ds-card-brand:hover::before {
  transform: scaleX(1);
}

/* Logo zone */
.ds-card-brand__logo-zone {
  height:          4rem;  /* 64px */
  background:      var(--ds-color-obsidian);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--ds-space-3);
}

.ds-card-brand__logo-zone img {
  max-height: 2.25rem;
  max-width:  80%;
  object-fit: contain;
  filter:     brightness(1.1);
}

/* Content zone */
.ds-card-brand__body {
  padding: var(--ds-space-6);
}

.ds-card-brand__name {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-h4);
  font-weight:   var(--ds-weight-bold);
  color:         var(--ds-color-steel-bright);
  margin:        0 0 var(--ds-space-2);
  line-height:   var(--ds-leading-snug);
}

.ds-card-brand__tagline {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-caption);
  font-weight:   var(--ds-weight-bold);
  letter-spacing:var(--ds-tracking-widest);
  text-transform:uppercase;
  color:         var(--ds-color-red);
  margin:        0 0 var(--ds-space-3);
  display:       block;
}

.ds-card-brand__desc {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-body-sm);
  color:         var(--ds-color-steel);
  line-height:   var(--ds-leading-relaxed);
  margin:        0 0 var(--ds-space-6);
}

.ds-card-brand__link {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--ds-space-2);
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-body-sm);
  font-weight:   var(--ds-weight-semibold);
  color:         var(--ds-color-red);
  text-decoration:none;
  transition:
    color     var(--ds-transition-fast),
    gap       var(--ds-transition-fast);
}

.ds-card-brand__link:hover {
  color: var(--ds-color-red-glow);
  gap:   var(--ds-space-3);
}

/* Product images on dark cards */
.ds-card-brand img {
  border-radius: var(--ds-radius-sm);
}

/* === Category Card (Brand Page sidebar list row) === */
.ds-card-category {
  background:    var(--ds-color-carbon);
  border:        1px solid var(--ds-color-carbon-light);
  border-radius: var(--ds-radius-sm);
  padding:       var(--ds-space-4) var(--ds-space-5);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           var(--ds-space-4);
  cursor:        pointer;
  text-decoration:none;
  position:      relative;
  overflow:      hidden;
  transition:
    background    var(--ds-transition-fast),
    border-color  var(--ds-transition-fast);
}

/* Left red accent bar */
.ds-card-category::before {
  content:         '';
  position:        absolute;
  left:            0;
  top:             0;
  bottom:          0;
  width:           var(--ds-border-accent);
  background:      var(--ds-color-red);
  transition:      width var(--ds-duration-base) var(--ds-ease-standard);
}

.ds-card-category:hover {
  background:    var(--ds-color-carbon-light);
  border-color:  rgba(211,47,47,0.30);
}

.ds-card-category:hover::before {
  width: var(--ds-border-accent-hover);
}

.ds-card-category__body {
  flex:        1;
  min-width:   0;
  padding-left:var(--ds-space-4);
}

.ds-card-category__name {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-h4);
  font-weight:   var(--ds-weight-semibold);
  color:         var(--ds-color-steel-bright);
  margin:        0 0 var(--ds-space-1);
  line-height:   var(--ds-leading-snug);
}

.ds-card-category__meta {
  font-size:  var(--ds-text-caption);
  color:      var(--ds-color-steel);
}

.ds-card-category__arrow {
  color:      var(--ds-color-red);
  font-size:  1rem;
  transition: transform var(--ds-transition-fast);
  flex-shrink:0;
}

.ds-card-category:hover .ds-card-category__arrow {
  transform: translateX(4px);
}

/* === Download Card Row === */
.ds-card-download {
  background:   var(--ds-color-carbon);
  border:       1px solid var(--ds-color-carbon-light);
  border-radius:var(--ds-radius-sm);
  height:       4.5rem;  /* 72px */
  padding:      0 var(--ds-space-5);
  display:      flex;
  align-items:  center;
  gap:          var(--ds-space-4);
  transition:
    background    var(--ds-transition-fast),
    border-color  var(--ds-transition-fast);
}

.ds-card-download:hover {
  background:   var(--ds-color-carbon-light);
  border-color: rgba(211,47,47,0.20);
}

.ds-card-download__icon {
  font-size:  1.5rem;
  color:      var(--ds-color-red);
  flex-shrink:0;
  width:      1.5rem;
}

.ds-card-download__icon--pending {
  color: var(--ds-color-steel);
}

.ds-card-download__name {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-body);
  font-weight:   var(--ds-weight-semibold);
  color:         var(--ds-color-steel-bright);
  flex:          1;
  min-width:     0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.ds-card-download__brand {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-caption);
  font-weight:   var(--ds-weight-semibold);
  color:         var(--ds-color-white);
  background:    var(--ds-color-red);
  padding:       2px var(--ds-space-2);
  border-radius: var(--ds-radius-sm);
  white-space:   nowrap;
  flex-shrink:   0;
}

.ds-card-download__size {
  font-family:   var(--ds-font-data);
  font-size:     var(--ds-text-caption);
  color:         var(--ds-color-steel);
  white-space:   nowrap;
  flex-shrink:   0;
  min-width:     3.5rem;
  text-align:    right;
}

/* === Search Result Card === */
.ds-card-result {
  background:   var(--ds-color-carbon);
  border-left:  4px solid var(--ds-color-red);
  padding:      var(--ds-space-5) var(--ds-space-6);
  margin-bottom:var(--ds-space-2);
  cursor:        pointer;
  transition:
    background  var(--ds-transition-fast);
}

.ds-card-result:hover {
  background: var(--ds-color-carbon-light);
}

.ds-card-result__row1 {
  display:     flex;
  align-items: center;
  gap:         var(--ds-space-3);
  margin-bottom:var(--ds-space-1);
}

.ds-card-result__model {
  font-family:   var(--ds-font-data);
  font-size:     var(--ds-text-model);
  font-weight:   var(--ds-weight-bold);
  color:         var(--ds-color-steel-bright);
  letter-spacing:var(--ds-tracking-wide);
}

.ds-card-result__badge {
  font-family:   var(--ds-font-primary);
  font-size:     0.6875rem;
  font-weight:   var(--ds-weight-bold);
  letter-spacing:var(--ds-tracking-wide);
  text-transform:uppercase;
  color:         var(--ds-color-white);
  background:    var(--ds-color-red);
  padding:       2px var(--ds-space-2);
  border-radius: var(--ds-radius-sm);
  white-space:   nowrap;
}

.ds-card-result__path {
  font-size:  var(--ds-text-caption);
  color:      var(--ds-color-steel);
  margin-bottom:var(--ds-space-2);
}

.ds-card-result__actions {
  display:  flex;
  gap:      var(--ds-space-3);
  flex-wrap:wrap;
}

/* ============================================================
   SPECIFICATION TABLES
   ============================================================ */

/* Outer wrapper — provides horizontal scroll + shadow */
.ds-table-wrap {
  width:         100%;
  overflow-x:    auto;
  -webkit-overflow-scrolling: touch;
  box-shadow:    var(--ds-shadow-light);
  border:        1px solid var(--ds-color-border-light);
  border-radius: 0;   /* tables are always sharp-edged */
  background:    var(--ds-color-surface-white);
  position:      relative;
}

/* Scrollbar styling */
.ds-table-wrap::-webkit-scrollbar        { height: 8px; }
.ds-table-wrap::-webkit-scrollbar-track  { background: #F0F0F0; }
.ds-table-wrap::-webkit-scrollbar-thumb  { background: #C0C0C0; border-radius: 4px; }
.ds-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--ds-color-red); }

/* Gradient fade at right edge — scroll hint */
.ds-table-wrap::after {
  content:  '';
  position: absolute;
  top:      0;
  right:    0;
  bottom:   8px;
  width:    40px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.95));
  pointer-events: none;
  transition: opacity var(--ds-transition-base);
}

.ds-table-wrap.ds-table-wrap--scrolled::after {
  opacity: 0;
}

/* The table itself */
.ds-table {
  width:           100%;
  border-collapse: separate;
  border-spacing:  0;
  font-size:       var(--ds-text-spec);
  min-width:       48rem; /* force horizontal scroll on mobile */
  table-layout:    auto;
}

/* === Header === */
.ds-table thead {
  position: sticky;
  top:      0;
  z-index:  var(--ds-z-raised);
}

.ds-table thead tr {
  background: var(--ds-color-obsidian);
  border-bottom: var(--ds-border-table-header) solid var(--ds-color-red);
}

.ds-table thead th {
  padding:        var(--ds-space-4) var(--ds-cell-x);
  font-family:    var(--ds-font-primary);
  font-size:      0.6875rem;  /* 11px */
  font-weight:    var(--ds-weight-bold);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color:          var(--ds-color-steel-bright);
  text-align:     center;
  vertical-align: middle;
  white-space:    normal;
  word-wrap:      break-word;
  line-height:    var(--ds-leading-normal);
}

.ds-table thead th:first-child {
  text-align:  left;
  padding-left:var(--ds-space-5);
  position:    sticky;
  left:        0;
  z-index:     var(--ds-z-raised);
  background:  var(--ds-color-obsidian);
  min-width:   10rem;
}

/* === Body rows === */
.ds-table tbody tr {
  transition:
    background var(--ds-duration-fast) var(--ds-ease-standard);
}

.ds-table tbody tr:nth-child(odd)  { background: var(--ds-color-surface-row-odd);  }
.ds-table tbody tr:nth-child(even) { background: var(--ds-color-surface-row-even); }

.ds-table tbody tr:hover {
  background: rgba(211,47,47,0.06);
}

.ds-table tbody tr:hover td:first-child {
  color: var(--ds-color-red);
}

/* === Cells === */
.ds-table tbody td {
  padding:     var(--ds-cell-y) var(--ds-cell-x);
  font-family: var(--ds-font-data);
  font-size:   var(--ds-text-spec);
  color:       var(--ds-color-text-body);
  text-align:  center;
  vertical-align: middle;
  line-height: 1;
  border-bottom: 1px solid var(--ds-color-border-light);
}

/* Model number column — sticky left */
.ds-table tbody td:first-child {
  font-family:    var(--ds-font-data);
  font-size:      var(--ds-text-model);
  font-weight:    var(--ds-weight-bold);
  color:          var(--ds-color-text-dark);
  letter-spacing: var(--ds-tracking-wide);
  text-transform: uppercase;
  text-align:     left;
  padding-left:   var(--ds-space-5);
  position:       sticky;
  left:           0;
  z-index:        var(--ds-z-base);
  background:     inherit;
  border-right:   1px solid var(--ds-color-border-light);
  transition:
    color       var(--ds-duration-fast) var(--ds-ease-standard),
    background  var(--ds-duration-fast) var(--ds-ease-standard);
}

/* Checkmark cells (certifications) */
.ds-table .ds-table__check {
  color:         #388E3C;
  font-size:     1.125rem;
  display:       inline-flex;
  align-items:   center;
  justify-content:center;
  width:         2rem;
  height:        2rem;
  background:    rgba(56,142,60,0.10);
  border-radius: 50%;
}

/* Stagger-reveal animation for rows on page load */
.ds-table tbody tr {
  animation:      ds-row-in var(--ds-duration-base) var(--ds-ease-decelerate) both;
}

.ds-table tbody tr:nth-child(1)  { animation-delay:  20ms; }
.ds-table tbody tr:nth-child(2)  { animation-delay:  40ms; }
.ds-table tbody tr:nth-child(3)  { animation-delay:  60ms; }
.ds-table tbody tr:nth-child(4)  { animation-delay:  80ms; }
.ds-table tbody tr:nth-child(5)  { animation-delay: 100ms; }
.ds-table tbody tr:nth-child(6)  { animation-delay: 120ms; }
.ds-table tbody tr:nth-child(7)  { animation-delay: 140ms; }
.ds-table tbody tr:nth-child(8)  { animation-delay: 160ms; }
.ds-table tbody tr:nth-child(9)  { animation-delay: 180ms; }
.ds-table tbody tr:nth-child(10) { animation-delay: 200ms; }
.ds-table tbody tr:nth-child(n+11) { animation-delay: 220ms; }

/* === Table footer bar === */
.ds-table-footer {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     var(--ds-space-3) var(--ds-space-5);
  background:  var(--ds-color-surface-white);
  border-top:  1px solid var(--ds-color-border-light);
  font-size:   var(--ds-text-caption);
  color:       var(--ds-color-text-muted);
  flex-wrap:   wrap;
  gap:         var(--ds-space-3);
}

.ds-table-footer__count {
  font-family: var(--ds-font-primary);
}

.ds-table-footer__scroll-hint {
  display:     flex;
  align-items: center;
  gap:         var(--ds-space-2);
  color:       var(--ds-color-red);
  font-weight: var(--ds-weight-semibold);
  animation:   pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* Hide scroll hint once scrolled */
.ds-table-wrap.ds-table-wrap--scrolled .ds-table-footer__scroll-hint {
  display: none;
}

/* === Table actions row === */
.ds-table-actions {
  display:   flex;
  gap:       var(--ds-space-4);
  flex-wrap: wrap;
  margin-top:var(--ds-space-5);
}

/* ============================================================
   FORMS
   ============================================================ */

/* Form container */
.ds-form {
  background:    var(--ds-color-carbon);
  border:        1px solid var(--ds-color-carbon-light);
  border-radius: var(--ds-radius-md);
  padding:       var(--ds-space-10);
  max-width:     37.5rem;
}

/* Section label within form */
.ds-form__section-label {
  font-family:    var(--ds-font-primary);
  font-size:      var(--ds-text-h6);
  font-weight:    var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-widest);
  text-transform: uppercase;
  color:          var(--ds-color-red);
  margin:         var(--ds-space-8) 0 var(--ds-space-4);
  display:        block;
}

.ds-form__section-label:first-child {
  margin-top: 0;
}

/* Form grid row */
.ds-form__row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--ds-space-4);
}

@media (max-width: 640px) {
  .ds-form__row {
    grid-template-columns: 1fr;
  }
}

/* Field group */
.ds-field {
  position:      relative;
  margin-bottom: var(--ds-space-5);
}

/* Floating label */
.ds-field__label {
  position:     absolute;
  left:         var(--ds-space-4);
  top:          50%;
  transform:    translateY(-50%);
  font-family:  var(--ds-font-primary);
  font-size:    var(--ds-text-body);
  font-weight:  var(--ds-weight-medium);
  color:        var(--ds-color-steel);
  pointer-events:none;
  transition:
    top         var(--ds-duration-base) var(--ds-ease-standard),
    font-size   var(--ds-duration-base) var(--ds-ease-standard),
    color       var(--ds-duration-base) var(--ds-ease-standard),
    transform   var(--ds-duration-base) var(--ds-ease-standard);
  z-index:      1;
}

/* Label floated state */
.ds-field__label--float,
.ds-field__input:focus ~ .ds-field__label,
.ds-field__input:not(:placeholder-shown) ~ .ds-field__label,
.ds-field__textarea:focus ~ .ds-field__label,
.ds-field__textarea:not(:placeholder-shown) ~ .ds-field__label {
  top:       var(--ds-space-2);
  transform: translateY(0);
  font-size: var(--ds-text-caption);
  color:     var(--ds-color-steel-light);
}

/* Input base */
.ds-field__input,
.ds-field__select,
.ds-field__textarea {
  width:         100%;
  height:        3.25rem;
  padding:       var(--ds-space-6) var(--ds-space-4) var(--ds-space-2);
  background:    var(--ds-color-carbon-light);
  border:        1px solid rgba(255,255,255,0.12);
  border-radius: var(--ds-radius-sm);
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-body);
  color:         var(--ds-color-steel-bright);
  transition:
    border-color  var(--ds-transition-fast),
    background    var(--ds-transition-fast),
    box-shadow    var(--ds-transition-fast);
  -webkit-appearance: none;
  appearance:         none;
}

.ds-field__input::placeholder,
.ds-field__textarea::placeholder {
  color:       transparent; /* hide placeholder — label covers it */
}

/* Focus state */
.ds-field__input:focus,
.ds-field__select:focus,
.ds-field__textarea:focus {
  outline:      none;
  border-color: var(--ds-color-red);
  background:   rgba(255,255,255,0.05);
  box-shadow:   0 0 0 1px var(--ds-color-red);
  border-left:  3px solid var(--ds-color-red);
  padding-left: calc(var(--ds-space-4) - 2px);
}

/* Valid state */
.ds-field__input:valid:not(:placeholder-shown),
.ds-field__textarea:valid:not(:placeholder-shown) {
  border-color: var(--ds-color-success);
}

/* Error state */
.ds-field--error .ds-field__input,
.ds-field--error .ds-field__select,
.ds-field--error .ds-field__textarea {
  border-color: var(--ds-color-red);
  border-width: var(--ds-border-thick);
}

.ds-field__error-msg {
  display:     flex;
  align-items: center;
  gap:         var(--ds-space-1);
  font-size:   var(--ds-text-caption);
  color:       var(--ds-color-red);
  margin-top:  var(--ds-space-1);
}

/* Textarea */
.ds-field__textarea {
  height:     auto;
  min-height: 8.75rem;  /* 140px */
  resize:     vertical;
  padding-top:var(--ds-space-6);
  line-height:var(--ds-leading-relaxed);
}

/* Select */
.ds-field__select {
  padding-right:var(--ds-space-10);
  cursor:       pointer;
}

.ds-field__select-arrow {
  position:      absolute;
  right:         var(--ds-space-4);
  top:           50%;
  transform:     translateY(-50%);
  color:         var(--ds-color-red);
  pointer-events:none;
  font-size:     0.75rem;
}

/* Form actions */
.ds-form__actions {
  display:   flex;
  gap:       var(--ds-space-4);
  margin-top:var(--ds-space-8);
  flex-wrap: wrap;
}

/* Privacy note */
.ds-form__note {
  font-size:  var(--ds-text-caption);
  color:      var(--ds-color-steel);
  margin-top: var(--ds-space-4);
  text-align: center;
}

/* ============================================================
   NAVIGATION BAR — FOUNDATION
   ============================================================ */

.ds-nav {
  position:      fixed;
  top:           0;
  left:          0;
  right:         0;
  width:         100%;
  height:        var(--ds-nav-height);
  background:    var(--ds-color-obsidian);
  border-bottom: 1px solid var(--ds-color-carbon-light);
  z-index:       var(--ds-z-fixed);
  display:       flex;
  align-items:   center;
  transition:
    box-shadow    var(--ds-transition-base),
    background    var(--ds-transition-base),
    border-color  var(--ds-transition-base);
  /* Subtle carbon fiber texture */
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(255,255,255,0.012) 4px,
    rgba(255,255,255,0.012) 8px
  );
}

.ds-nav.ds-nav--scrolled {
  box-shadow:   var(--ds-shadow-nav);
  background:   rgba(10,10,10,0.97);
  border-color: rgba(255,255,255,0.06);
  /* Stronger blur on scroll */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Inner container */
.ds-nav__inner {
  max-width:     var(--ds-container-max);
  width:         100%;
  margin:        0 auto;
  padding:       0 var(--ds-space-8);
  display:       flex;
  align-items:   center;
  justify-content:space-between;
  height:        100%;
  gap:           var(--ds-space-8);
}

/* Logo zone */
.ds-nav__logo {
  display:       flex;
  align-items:   center;
  gap:           var(--ds-space-3);
  text-decoration:none;
  flex-shrink:   0;
}

.ds-nav__logo-img {
  height:     2.5rem;  /* 40px */
  width:      auto;
  object-fit: contain;
}

.ds-nav__logo-text {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-h5);
  font-weight:   var(--ds-weight-bold);
  color:         var(--ds-color-steel-bright);
  letter-spacing:var(--ds-tracking-wide);
}

/* Desktop links container */
.ds-nav__links {
  display:     flex;
  align-items: stretch;
  gap:         0;
  height:      100%;
  flex:        1;
  justify-content: center;
}

/* Individual nav link */
.ds-nav__link {
  display:       flex;
  align-items:   center;
  height:        100%;
  padding:       0 var(--ds-space-5);
  font-family:   var(--ds-font-primary);
  font-size:     0.9375rem;
  font-weight:   var(--ds-weight-medium);
  color:         var(--ds-color-steel-light);
  text-decoration:none;
  position:      relative;
  transition:    color var(--ds-transition-fast);
  white-space:   nowrap;
}

/* Active indicator — 2px red bottom line */
.ds-nav__link::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       var(--ds-space-5);
  right:      var(--ds-space-5);
  height:     2px;
  background: var(--ds-color-red);
  transform:  scaleX(0);
  transform-origin: left;
  transition: transform var(--ds-duration-fast) var(--ds-ease-standard);
}

.ds-nav__link:hover {
  color: var(--ds-color-steel-bright);
}

.ds-nav__link:hover::after {
  transform: scaleX(1);
}

.ds-nav__link.ds-nav__link--active {
  color: var(--ds-color-steel-bright);
}

.ds-nav__link.ds-nav__link--active::after {
  transform: scaleX(1);
}

/* Chevron on "Brands" link */
.ds-nav__link-chevron {
  font-size:  0.625rem;
  margin-left:var(--ds-space-1);
  transition: transform var(--ds-duration-base) var(--ds-ease-standard);
}

.ds-nav__dropdown:hover .ds-nav__link-chevron {
  transform: rotate(180deg);
}

/* Actions zone (right side) */
.ds-nav__actions {
  display:     flex;
  align-items: center;
  gap:         var(--ds-space-3);
  flex-shrink: 0;
}

.ds-nav__phone {
  font-family:   var(--ds-font-primary);
  font-size:     0.875rem;
  font-weight:   var(--ds-weight-semibold);
  color:         var(--ds-color-red);
  text-decoration:none;
  white-space:   nowrap;
  transition:    color var(--ds-transition-fast);
}

.ds-nav__phone:hover {
  color: var(--ds-color-red-glow);
}

/* Search icon button */
.ds-nav__search-btn {
  width:         2.75rem;
  height:        2.75rem;
  background:    transparent;
  border:        none;
  color:         var(--ds-color-steel-light);
  font-size:     1.125rem;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content:center;
  border-radius: var(--ds-radius-sm);
  transition:
    color       var(--ds-transition-fast),
    background  var(--ds-transition-fast);
}

.ds-nav__search-btn:hover {
  color:      var(--ds-color-red);
  background: var(--ds-color-carbon-light);
}

/* Hamburger toggle (mobile only) */
.ds-nav__hamburger {
  display:        none;
  flex-direction: column;
  justify-content:space-between;
  width:          2.75rem;
  height:         2.75rem;
  background:     transparent;
  border:         none;
  cursor:         pointer;
  padding:        0.6875rem;
  gap:            0;
}

.ds-nav__hamburger-bar {
  display:       block;
  width:         100%;
  height:        2px;
  background:    var(--ds-color-steel-bright);
  border-radius: 1px;
  transition:
    transform   var(--ds-duration-slow) var(--ds-ease-standard),
    opacity     var(--ds-duration-slow) var(--ds-ease-standard);
}

/* Hamburger → × animation */
.ds-nav__hamburger.ds-nav__hamburger--open .ds-nav__hamburger-bar:nth-child(1) {
  transform: rotate(45deg) translate(3px, 3px);
}

.ds-nav__hamburger.ds-nav__hamburger--open .ds-nav__hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: translateX(-4px);
}

.ds-nav__hamburger.ds-nav__hamburger--open .ds-nav__hamburger-bar:nth-child(3) {
  transform: rotate(-45deg) translate(3px, -3px);
}

/* ============================================================
   MEGA MENU
   ============================================================ */

.ds-nav__dropdown {
  position: relative;
  height:   100%;
  display:  flex;
  align-items:center;
}

.ds-mega-menu {
  position:   absolute;
  top:        100%;
  left:       50%;
  transform:  translateX(-50%) translateY(-8px);
  min-width:  38rem;
  background: var(--ds-color-carbon);
  border-top: 3px solid var(--ds-color-red);
  border-bottom: 1px solid var(--ds-color-carbon-light);
  box-shadow: var(--ds-shadow-3);
  z-index:    var(--ds-z-overlay);
  opacity:    0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity    var(--ds-duration-base) var(--ds-ease-standard),
    transform  var(--ds-duration-base) var(--ds-ease-decelerate),
    visibility var(--ds-duration-base);
}

/* Bridge gap between trigger and panel */
.ds-mega-menu::before {
  content:  '';
  position: absolute;
  top:      -1rem;
  left:     0;
  right:    0;
  height:   1rem;
}

.ds-nav__dropdown:hover .ds-mega-menu {
  opacity:        1;
  visibility:     visible;
  pointer-events: auto;
  transform:      translateX(-50%) translateY(0);
  animation:      ds-slide-down var(--ds-duration-base) var(--ds-ease-decelerate);
}

/* Brand entries grid */
.ds-mega-menu__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--ds-space-1);
  padding:               var(--ds-space-4);
}

/* Individual brand entry */
.ds-mega-menu__entry {
  display:       flex;
  align-items:   center;
  gap:           var(--ds-space-3);
  padding:       var(--ds-space-3) var(--ds-space-4);
  border-radius: var(--ds-radius-sm);
  text-decoration:none;
  cursor:        pointer;
  position:      relative;
  overflow:      hidden;
  transition:
    background  var(--ds-duration-fast) var(--ds-ease-standard);
}

/* Left accent bar on entry */
.ds-mega-menu__entry::before {
  content:    '';
  position:   absolute;
  left:       0;
  top:        0;
  bottom:     0;
  width:      0;
  background: var(--ds-color-red);
  transition: width var(--ds-duration-fast) var(--ds-ease-standard);
}

.ds-mega-menu__entry:hover {
  background: var(--ds-color-carbon-light);
}

.ds-mega-menu__entry:hover::before {
  width: 3px;
}

/* Active brand */
.ds-mega-menu__entry--active {
  background: var(--ds-color-carbon-light);
}

.ds-mega-menu__entry--active::before {
  width: 3px;
}

/* Brand icon block */
.ds-mega-menu__icon {
  width:           3rem;   /* 48px */
  height:          3rem;
  min-width:       3rem;
  background:      var(--ds-color-red-alpha-10);
  border:          1px solid rgba(211,47,47,0.30);
  border-radius:   var(--ds-radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.25rem;
  color:           var(--ds-color-red);
  transition:
    background  var(--ds-duration-fast),
    color       var(--ds-duration-fast);
}

.ds-mega-menu__entry:hover .ds-mega-menu__icon {
  background: var(--ds-color-red-alpha-20);
}

.ds-mega-menu__entry--active .ds-mega-menu__icon {
  background: var(--ds-color-red);
  color:      var(--ds-color-white);
}

/* Entry text */
.ds-mega-menu__brand-name {
  font-family:   var(--ds-font-primary);
  font-size:     0.9375rem;
  font-weight:   var(--ds-weight-bold);
  color:         var(--ds-color-steel-bright);
  display:       block;
  margin-bottom: 2px;
  transition:    color var(--ds-duration-fast);
}

.ds-mega-menu__entry:hover .ds-mega-menu__brand-name,
.ds-mega-menu__entry--active .ds-mega-menu__brand-name {
  color: var(--ds-color-red);
}

.ds-mega-menu__brand-tagline {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-caption);
  color:         var(--ds-color-steel);
  display:       block;
}

/* Footer strip */
.ds-mega-menu__footer {
  background:   var(--ds-color-obsidian);
  padding:      var(--ds-space-3) var(--ds-space-5);
  display:      flex;
  align-items:  center;
  gap:          var(--ds-space-6);
}

.ds-mega-menu__footer-link {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-caption);
  font-weight:   var(--ds-weight-semibold);
  color:         var(--ds-color-steel);
  text-decoration:none;
  letter-spacing:var(--ds-tracking-wide);
  text-transform:uppercase;
  transition:    color var(--ds-transition-fast);
}

.ds-mega-menu__footer-link:hover {
  color: var(--ds-color-red);
}

.ds-mega-menu__footer-sep {
  color: var(--ds-color-carbon-light);
}

/* Stagger entry animation */
.ds-mega-menu__entry {
  opacity: 0;
  transform: translateX(-8px);
  transition:
    background  var(--ds-duration-fast) var(--ds-ease-standard),
    opacity     var(--ds-duration-base) var(--ds-ease-decelerate),
    transform   var(--ds-duration-base) var(--ds-ease-decelerate);
}

.ds-nav__dropdown:hover .ds-mega-menu__entry {
  opacity:   1;
  transform: translateX(0);
}

.ds-nav__dropdown:hover .ds-mega-menu__entry:nth-child(1) { transition-delay:  30ms; }
.ds-nav__dropdown:hover .ds-mega-menu__entry:nth-child(2) { transition-delay:  60ms; }
.ds-nav__dropdown:hover .ds-mega-menu__entry:nth-child(3) { transition-delay:  90ms; }
.ds-nav__dropdown:hover .ds-mega-menu__entry:nth-child(4) { transition-delay: 120ms; }
.ds-nav__dropdown:hover .ds-mega-menu__entry:nth-child(5) { transition-delay: 150ms; }
.ds-nav__dropdown:hover .ds-mega-menu__entry:nth-child(6) { transition-delay: 180ms; }
.ds-nav__dropdown:hover .ds-mega-menu__entry:nth-child(7) { transition-delay: 210ms; }
.ds-nav__dropdown:hover .ds-mega-menu__entry:nth-child(8) { transition-delay: 240ms; }

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */

/* Full-viewport backdrop */
.ds-search-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(10,10,10,0.97);
  backdrop-filter:         blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index:    var(--ds-z-modal);
  display:    flex;
  flex-direction: column;
  align-items:    center;
  padding-top:    25vh;
  opacity:    0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity    var(--ds-duration-slow) var(--ds-ease-decelerate),
    visibility var(--ds-duration-slow);
}

.ds-search-overlay.ds-search-overlay--open {
  opacity:        1;
  visibility:     visible;
  pointer-events: auto;
}

/* Close button */
.ds-search-overlay__close {
  position:      absolute;
  top:           var(--ds-space-6);
  right:         var(--ds-space-6);
  width:         2.75rem;
  height:        2.75rem;
  background:    transparent;
  border:        none;
  color:         var(--ds-color-steel);
  font-size:     1.5rem;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  border-radius: var(--ds-radius-sm);
  transition:    color var(--ds-transition-fast), background var(--ds-transition-fast);
}

.ds-search-overlay__close:hover {
  color:      var(--ds-color-red);
  background: var(--ds-color-carbon-light);
}

/* Input zone */
.ds-search-overlay__input-zone {
  width:         100%;
  max-width:     40rem;
  padding:       0 var(--ds-space-6);
  transform:     translateY(-24px);
  opacity:       0;
  transition:
    transform var(--ds-duration-slow) var(--ds-ease-decelerate) 50ms,
    opacity   var(--ds-duration-slow) var(--ds-ease-decelerate) 50ms;
}

.ds-search-overlay--open .ds-search-overlay__input-zone {
  transform: translateY(0);
  opacity:   1;
}

/* Input wrapper */
.ds-search-overlay__input-wrap {
  position:    relative;
  display:     flex;
  align-items: center;
}

/* Icon left */
.ds-search-overlay__icon {
  position:      absolute;
  left:          0;
  font-size:     1.75rem;
  color:         var(--ds-color-red);
  pointer-events:none;
}

/* The input field — bottom border only */
.ds-search-overlay__input {
  width:          100%;
  background:     transparent;
  border:         none;
  border-bottom:  2px solid var(--ds-color-red);
  border-radius:  0;
  padding:        var(--ds-space-4) 2.5rem var(--ds-space-4) 2.5rem;
  font-family:    var(--ds-font-primary);
  font-size:      2rem;
  font-weight:    var(--ds-weight-regular);
  color:          var(--ds-color-steel-bright);
  caret-color:    var(--ds-color-red);
  outline:        none;
  transition:     border-color var(--ds-transition-fast);
}

.ds-search-overlay__input::placeholder {
  color: rgba(184,184,184,0.40);
}

.ds-search-overlay__input:focus {
  border-bottom-color: var(--ds-color-red-glow);
}

/* Clear button */
.ds-search-overlay__clear {
  position:      absolute;
  right:         0;
  background:    none;
  border:        none;
  color:         var(--ds-color-steel);
  font-size:     1.125rem;
  cursor:        pointer;
  width:         2rem;
  height:        2rem;
  display:       none;
  align-items:   center;
  justify-content:center;
  border-radius: 50%;
  transition:    color var(--ds-transition-fast);
}

.ds-search-overlay__clear:hover { color: var(--ds-color-red); }
.ds-search-overlay__clear.ds-search-overlay__clear--visible { display: flex; }

/* Hint */
.ds-search-overlay__hint {
  font-size:     var(--ds-text-caption);
  color:         rgba(138,138,138,0.50);
  text-align:    right;
  margin-top:    var(--ds-space-2);
  font-family:   var(--ds-font-primary);
}

/* Suggested searches */
.ds-search-overlay__suggestions {
  width:         100%;
  max-width:     40rem;
  padding:       var(--ds-space-8) var(--ds-space-6) 0;
}

.ds-search-overlay__suggestions-label {
  font-family:    var(--ds-font-primary);
  font-size:      var(--ds-text-h6);
  font-weight:    var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-widest);
  text-transform: uppercase;
  color:          var(--ds-color-red);
  display:        block;
  margin-bottom:  var(--ds-space-3);
}

.ds-search-overlay__pills {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--ds-space-2);
}

.ds-search-overlay__pill {
  background:    var(--ds-color-carbon-light);
  border:        1px solid var(--ds-color-carbon-light);
  border-radius: var(--ds-radius-sm);
  padding:       var(--ds-space-2) var(--ds-space-4);
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-body-sm);
  color:         var(--ds-color-steel-light);
  cursor:        pointer;
  transition:
    border-color var(--ds-transition-fast),
    color        var(--ds-transition-fast);
}

.ds-search-overlay__pill:hover {
  border-color: var(--ds-color-red);
  color:        var(--ds-color-steel-bright);
}

/* Results list */
.ds-search-overlay__results {
  width:       100%;
  max-width:   40rem;
  padding:     var(--ds-space-6) var(--ds-space-6) 0;
  max-height:  50vh;
  overflow-y:  auto;
}

/* Results group header */
.ds-search-overlay__group-label {
  font-family:    var(--ds-font-primary);
  font-size:      var(--ds-text-h6);
  font-weight:    var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-widest);
  text-transform: uppercase;
  color:          var(--ds-color-red);
  display:        flex;
  align-items:    center;
  gap:            var(--ds-space-3);
  margin:         var(--ds-space-5) 0 var(--ds-space-2);
}

.ds-search-overlay__group-label::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--ds-color-carbon-light);
}

/* No results */
.ds-search-overlay__empty {
  text-align: center;
  padding:    var(--ds-space-12) var(--ds-space-6);
}

.ds-search-overlay__empty-icon {
  font-size:     3rem;
  color:         var(--ds-color-red);
  opacity:       0.40;
  display:       block;
  margin-bottom: var(--ds-space-4);
}

.ds-search-overlay__empty-text {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-h4);
  color:         var(--ds-color-steel-bright);
  margin-bottom: var(--ds-space-2);
}

.ds-search-overlay__empty-sub {
  font-size:  var(--ds-text-body);
  color:      var(--ds-color-steel);
}

/* Group count badge */
.ds-search-overlay__group-count {
  font-size:      var(--ds-text-caption);
  font-weight:    var(--ds-weight-bold);
  color:          var(--ds-color-white);
  background:     var(--ds-color-red);
  border-radius:  999px;
  min-width:      1.5rem;
  height:         1.5rem;
  display:        inline-flex;
  align-items:    center;
  justify-content:center;
  line-height:    1;
  margin-left:    var(--ds-space-2);
  padding:        0 var(--ds-space-1);
}

/* Individual result row */
.ds-search-overlay__result {
  display:        flex;
  align-items:    center;
  justify-content:space-between;
  gap:            var(--ds-space-3);
  padding:        var(--ds-space-3) var(--ds-space-4);
  margin:         0 calc(var(--ds-space-6) * -1);
  cursor:         pointer;
  transition:     background var(--ds-transition-fast);
  border-radius:  0;
  border-bottom:  1px solid var(--ds-color-carbon-light);
}

.ds-search-overlay__result:hover {
  background: var(--ds-color-carbon-light);
}

.ds-search-overlay__result:last-child {
  border-bottom: none;
}

.ds-search-overlay__result-name {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-body);
  font-weight:   var(--ds-weight-semibold);
  color:         var(--ds-color-steel-bright);
}

.ds-search-overlay__result-sub {
  font-size:      var(--ds-text-caption);
  font-weight:    var(--ds-weight-medium);
  color:          var(--ds-color-steel);
  background:     var(--ds-color-carbon);
  padding:        2px 8px;
  border-radius:  999px;
  white-space:    nowrap;
  flex-shrink:    0;
}

/* Highlight animation on section scroll-to */
.ds-section--search-highlight {
  animation: ds-highlight-pulse 2s ease-out;
}

@keyframes ds-highlight-pulse {
  0%   { box-shadow: inset 0 0 0 2px var(--ds-color-red); }
  50%  { box-shadow: inset 0 0 0 4px rgba(211,47,47,0.30); }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}

/* ============================================================
   MOBILE NAVIGATION — FULL-SCREEN PANEL
   ============================================================ */

/* Mobile nav panel — slides up from bottom */
.ds-mobile-nav {
  position:    fixed;
  inset:       0;
  background:  var(--ds-color-obsidian);
  z-index:     var(--ds-z-modal);
  display:     flex;
  flex-direction: column;
  transform:   translateY(100%);
  opacity:     0.6;
  visibility:  hidden;
  pointer-events: none;
  transition:
    transform   var(--ds-duration-enter) var(--ds-ease-decelerate),
    opacity     var(--ds-duration-enter) var(--ds-ease-decelerate),
    visibility  var(--ds-duration-enter);
  overflow:    hidden;
}

.ds-mobile-nav.ds-mobile-nav--open {
  transform:      translateY(0);
  opacity:        1;
  visibility:     visible;
  pointer-events: auto;
}

/* Top strip — matches nav bar height */
.ds-mobile-nav__header {
  height:         var(--ds-nav-height-mobile);
  background:     var(--ds-color-carbon);
  border-bottom:  1px solid var(--ds-color-carbon-light);
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  padding:        0 var(--ds-space-6);
  flex-shrink:    0;
}

.ds-mobile-nav__header-logo {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-h5);
  font-weight:   var(--ds-weight-bold);
  color:         var(--ds-color-steel-bright);
}

.ds-mobile-nav__close {
  width:         2.75rem;
  height:        2.75rem;
  background:    transparent;
  border:        none;
  color:         var(--ds-color-steel-light);
  font-size:     1.5rem;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  border-radius: var(--ds-radius-sm);
}

/* Scroll area */
.ds-mobile-nav__body {
  flex:        1;
  overflow-y:  auto;
  overflow-x:  hidden;
  padding:     var(--ds-space-2) 0;
  -webkit-overflow-scrolling: touch;
}

/* Nav item */
.ds-mobile-nav__item {
  display:        flex;
  align-items:    center;
  justify-content:space-between;
  padding:        0 var(--ds-space-6);
  height:         4rem;   /* 64px */
  font-family:    var(--ds-font-primary);
  font-size:      1.25rem;
  font-weight:    var(--ds-weight-semibold);
  color:          var(--ds-color-steel-bright);
  text-decoration:none;
  border-bottom:  1px solid rgba(255,255,255,0.06);
  cursor:         pointer;
  background:     transparent;
  width:          100%;
  text-align:     left;
  transition:
    background  var(--ds-duration-fast),
    color       var(--ds-duration-fast);
  /* Stagger in */
  opacity:      0;
  transform:    translateX(-8px);
  transition:
    opacity     var(--ds-duration-base) var(--ds-ease-decelerate),
    transform   var(--ds-duration-base) var(--ds-ease-decelerate),
    background  var(--ds-duration-fast),
    color       var(--ds-duration-fast);
}

.ds-mobile-nav--open .ds-mobile-nav__item:nth-child(1) { transition-delay: 100ms; }
.ds-mobile-nav--open .ds-mobile-nav__item:nth-child(2) { transition-delay: 150ms; }
.ds-mobile-nav--open .ds-mobile-nav__item:nth-child(3) { transition-delay: 200ms; }
.ds-mobile-nav--open .ds-mobile-nav__item:nth-child(4) { transition-delay: 250ms; }
.ds-mobile-nav--open .ds-mobile-nav__item:nth-child(5) { transition-delay: 300ms; }
.ds-mobile-nav--open .ds-mobile-nav__item:nth-child(6) { transition-delay: 350ms; }
.ds-mobile-nav--open .ds-mobile-nav__item:nth-child(n+7) { transition-delay: 400ms; }

.ds-mobile-nav--open .ds-mobile-nav__item {
  opacity:   1;
  transform: translateX(0);
}

.ds-mobile-nav__item:active {
  background: var(--ds-color-carbon-light);
  color:      var(--ds-color-red);
}

.ds-mobile-nav__item-chevron {
  color:     var(--ds-color-red);
  font-size: 0.875rem;
  flex-shrink:0;
}

/* Sub-panel (Brands list) — slides in from right */
.ds-mobile-nav__sub {
  position:       absolute;
  inset:          0;
  background:     var(--ds-color-obsidian);
  transform:      translateX(100%);
  transition:     transform var(--ds-duration-slow) var(--ds-ease-standard);
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
}

.ds-mobile-nav__sub.ds-mobile-nav__sub--open {
  transform: translateX(0);
}

.ds-mobile-nav__sub-header {
  height:         var(--ds-nav-height-mobile);
  background:     var(--ds-color-carbon);
  border-bottom:  1px solid var(--ds-color-carbon-light);
  display:        flex;
  align-items:    center;
  padding:        0 var(--ds-space-6);
  gap:            var(--ds-space-4);
  flex-shrink:    0;
}

.ds-mobile-nav__back-btn {
  background:    transparent;
  border:        none;
  color:         var(--ds-color-red);
  font-size:     0.875rem;
  font-family:   var(--ds-font-primary);
  font-weight:   var(--ds-weight-semibold);
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  gap:           var(--ds-space-2);
  padding:       0;
}

.ds-mobile-nav__sub-title {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-h5);
  font-weight:   var(--ds-weight-bold);
  color:         var(--ds-color-steel-bright);
}

/* Bottom contact strip — always visible */
.ds-mobile-nav__footer {
  flex-shrink:   0;
  background:    var(--ds-color-carbon);
  border-top:    1px solid var(--ds-color-red);
  padding:       var(--ds-space-4) var(--ds-space-6);
  display:       flex;
  gap:           var(--ds-space-3);
  /* Safe area for notched devices */
  padding-bottom: max(var(--ds-space-4), env(safe-area-inset-bottom));
}

.ds-mobile-nav__footer .ds-btn {
  flex: 1;
}

/* ============================================================
   STICKY BOTTOM CTA BAR (mobile — always visible)
   ============================================================ */

.ds-sticky-cta {
  position:      fixed;
  bottom:        0;
  left:          0;
  right:         0;
  background:    var(--ds-color-carbon);
  border-top:    1px solid var(--ds-color-red);
  display:       flex;
  z-index:       var(--ds-z-sticky);
  padding-bottom:env(safe-area-inset-bottom, 0);
  /* Slides up once on load */
  transform:     translateY(100%);
  animation:     ds-sticky-in var(--ds-duration-enter) var(--ds-ease-decelerate) 500ms forwards;
}

@keyframes ds-sticky-in {
  to { transform: translateY(0); }
}

.ds-sticky-cta__half {
  flex:             1;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  gap:              var(--ds-space-2);
  height:           3.75rem;  /* 60px */
  text-decoration:  none;
  font-family:      var(--ds-font-primary);
  font-size:        0.9375rem;
  font-weight:      var(--ds-weight-semibold);
  transition:       background var(--ds-transition-fast);
}

.ds-sticky-cta__half--call {
  color:        var(--ds-color-steel-bright);
  border-right: 1px solid var(--ds-color-carbon-light);
}

.ds-sticky-cta__half--call i {
  color: var(--ds-color-red);
}

.ds-sticky-cta__half--wa {
  color: var(--ds-color-whatsapp);
}

.ds-sticky-cta__half:hover {
  background: var(--ds-color-carbon-light);
}

/* Show only on mobile */
@media (min-width: 768px) {
  .ds-sticky-cta { display: none; }
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

.ds-breadcrumb {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         var(--ds-space-3);
  padding:     0 var(--ds-space-8);
  height:      3rem;
  background:  var(--ds-color-carbon);
  border-bottom: 1px solid var(--ds-color-carbon-light);
}

.ds-breadcrumb__item {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-body-sm);
  color:         var(--ds-color-steel);
  text-decoration:none;
  white-space:   nowrap;
  transition:    color var(--ds-transition-fast);
  /* Stagger reveal */
  opacity:       0;
  transform:     translateX(-8px);
  animation:     ds-crumb-in var(--ds-duration-base) var(--ds-ease-decelerate) forwards;
}

.ds-breadcrumb__item:nth-child(1) { animation-delay:   0ms; }
.ds-breadcrumb__item:nth-child(2) { animation-delay:  80ms; }
.ds-breadcrumb__item:nth-child(3) { animation-delay: 160ms; }
.ds-breadcrumb__item:nth-child(4) { animation-delay: 240ms; }
.ds-breadcrumb__item:nth-child(5) { animation-delay: 320ms; }

.ds-breadcrumb__item:hover {
  color: var(--ds-color-red);
}

.ds-breadcrumb__sep {
  color:     var(--ds-color-carbon-light);
  font-size: 0.625rem;
  opacity:   0.6;
  animation: ds-crumb-in var(--ds-duration-base) var(--ds-ease-decelerate) forwards;
  opacity:   0;
}

/* Current (last) crumb — not a link */
.ds-breadcrumb__item--current {
  color:  var(--ds-color-steel-light);
  cursor: default;
  pointer-events: none;
}

.ds-breadcrumb__item--current:hover {
  color: var(--ds-color-steel-light);
}

/* ============================================================
   STICKY SIDEBAR — brand pages
   ============================================================ */

.ds-sidebar {
  width:     var(--ds-sidebar-width);
  flex-shrink:0;
  position:  sticky;
  top:       calc(var(--ds-nav-height) + var(--ds-space-6));
  height:    calc(100vh - var(--ds-nav-height) - var(--ds-space-12));
  overflow-y:auto;
  display:   flex;
  flex-direction: column;
  gap:       var(--ds-space-1);
  padding-bottom: var(--ds-space-8);
}

/* Scrollbar */
.ds-sidebar::-webkit-scrollbar        { width: 4px; }
.ds-sidebar::-webkit-scrollbar-track  { background: transparent; }
.ds-sidebar::-webkit-scrollbar-thumb  { background: var(--ds-color-carbon-light); border-radius: 2px; }

/* Category group header in sidebar */
.ds-sidebar__group-header {
  padding:       var(--ds-space-3) var(--ds-space-4);
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-h6);
  font-weight:   var(--ds-weight-bold);
  letter-spacing:var(--ds-tracking-widest);
  text-transform:uppercase;
  color:         var(--ds-color-steel);
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  border-radius: var(--ds-radius-sm);
  transition:
    color       var(--ds-transition-fast),
    background  var(--ds-transition-fast);
  user-select:   none;
}

.ds-sidebar__group-header:hover {
  color:      var(--ds-color-steel-bright);
  background: var(--ds-color-carbon-light);
}

.ds-sidebar__group-header i {
  font-size:  0.5rem;
  color:      var(--ds-color-red);
  transition: transform var(--ds-duration-base) var(--ds-ease-standard);
}

.ds-sidebar__group-header.ds-sidebar__group-header--open i {
  transform: rotate(180deg);
}

/* Sub-items container */
.ds-sidebar__items {
  display:    flex;
  flex-direction: column;
  gap:        1px;
  overflow:   hidden;
  max-height: 0;
  transition: max-height var(--ds-duration-slow) var(--ds-ease-standard);
}

.ds-sidebar__items--open {
  max-height: 40rem;
}

/* Individual sidebar item */
.ds-sidebar__item {
  display:        flex;
  align-items:    center;
  gap:            var(--ds-space-3);
  padding:        var(--ds-space-3) var(--ds-space-4) var(--ds-space-3) var(--ds-space-6);
  font-family:    var(--ds-font-primary);
  font-size:      var(--ds-text-body-sm);
  font-weight:    var(--ds-weight-medium);
  color:          var(--ds-color-steel);
  text-decoration:none;
  border-radius:  var(--ds-radius-sm);
  position:       relative;
  cursor:         pointer;
  transition:
    color       var(--ds-transition-fast),
    background  var(--ds-transition-fast);
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

/* Active indicator — red left bar slides to item position */
.ds-sidebar__item::before {
  content:    '';
  position:   absolute;
  left:       var(--ds-space-4);
  top:        50%;
  transform:  translateY(-50%);
  width:      2px;
  height:     0;
  background: var(--ds-color-red);
  border-radius: 1px;
  transition:
    height    var(--ds-duration-base) var(--ds-ease-spring),
    background var(--ds-duration-fast);
}

.ds-sidebar__item:hover {
  color:      var(--ds-color-steel-bright);
  background: var(--ds-color-carbon-light);
}

.ds-sidebar__item:hover::before {
  height: 1rem;
}

.ds-sidebar__item.ds-sidebar__item--active {
  color:      var(--ds-color-steel-bright);
  background: var(--ds-color-carbon-light);
  font-weight:var(--ds-weight-semibold);
}

.ds-sidebar__item.ds-sidebar__item--active::before {
  height: 1.25rem;
}

/* Sidebar bottom actions */
.ds-sidebar__footer {
  margin-top:  auto;
  padding-top: var(--ds-space-6);
  display:     flex;
  flex-direction: column;
  gap:         var(--ds-space-3);
  border-top:  1px solid var(--ds-color-carbon-light);
}

/* Mobile: sidebar collapses to sticky bar */
@media (max-width: 1023px) {
  .ds-sidebar {
    width:    100%;
    position: sticky;
    top:      var(--ds-nav-height-mobile);
    height:   auto;
    overflow: visible;
    z-index:  var(--ds-z-sticky);
    background: var(--ds-color-carbon);
    border-bottom: 1px solid var(--ds-color-carbon-light);
    padding:  0;
    flex-direction: row;
  }

  .ds-sidebar__group-header,
  .ds-sidebar__items,
  .ds-sidebar__footer {
    display: none;
  }

  /* Mobile: show "Categories ▾" trigger */
  .ds-sidebar__mobile-trigger {
    display:        flex;
    align-items:    center;
    justify-content:space-between;
    width:          100%;
    padding:        0 var(--ds-space-6);
    height:         3rem;
    font-family:    var(--ds-font-primary);
    font-size:      0.875rem;
    font-weight:    var(--ds-weight-semibold);
    color:          var(--ds-color-steel-bright);
    cursor:         pointer;
    background:     transparent;
    border:         none;
  }

  .ds-sidebar__mobile-trigger i {
    color:     var(--ds-color-red);
    font-size: 0.75rem;
  }
}

@media (min-width: 1024px) {
  .ds-sidebar__mobile-trigger { display: none; }
}

/* ============================================================
   UNIVERSAL FOOTER
   ============================================================ */

.ds-footer {
  background: var(--ds-color-obsidian);
  border-top: 1px solid var(--ds-color-carbon-light);
  padding-top: var(--ds-space-20);
  padding-bottom: var(--ds-space-8);
  color: var(--ds-color-steel-light);
  /* Bottom safe area for mobile */
  padding-bottom: max(var(--ds-space-8), calc(var(--ds-space-8) + env(safe-area-inset-bottom)));
}

/* On mobile, account for sticky CTA bar */
@media (max-width: 767px) {
  .ds-footer {
    padding-bottom: calc(3.75rem + max(var(--ds-space-8), env(safe-area-inset-bottom)));
  }
}

.ds-footer__grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap:                   var(--ds-space-12);
  margin-bottom:         var(--ds-space-12);
}

@media (max-width: 1023px) {
  .ds-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-space-8);
  }
}

@media (max-width: 639px) {
  .ds-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--ds-space-8);
  }
}

/* Company column */
.ds-footer__logo-wrap {
  display:     flex;
  align-items: center;
  gap:         var(--ds-space-3);
  margin-bottom: var(--ds-space-5);
}

.ds-footer__logo-img {
  height:     2.5rem;
  object-fit: contain;
}

.ds-footer__logo-text {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-h5);
  font-weight:   var(--ds-weight-bold);
  color:         var(--ds-color-steel-bright);
}

.ds-footer__bio {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-body-sm);
  color:         var(--ds-color-steel);
  line-height:   var(--ds-leading-loose);
  margin-bottom: var(--ds-space-6);
}

.ds-footer__socials {
  display: flex;
  gap:     var(--ds-space-3);
}

.ds-footer__social-link {
  width:         2.5rem;
  height:        2.5rem;
  border-radius: 50%;
  background:    rgba(255,255,255,0.05);
  border:        1px solid var(--ds-color-carbon-light);
  display:       flex;
  align-items:   center;
  justify-content:center;
  color:         var(--ds-color-steel);
  font-size:     1rem;
  text-decoration:none;
  transition:
    background  var(--ds-transition-fast),
    border-color var(--ds-transition-fast),
    color        var(--ds-transition-fast),
    transform    var(--ds-transition-fast);
}

.ds-footer__social-link:hover {
  background:   var(--ds-color-red);
  border-color: var(--ds-color-red);
  color:        var(--ds-color-white);
  transform:    translateY(-3px);
}

/* Link columns */
.ds-footer__col-title {
  font-family:    var(--ds-font-primary);
  font-size:      var(--ds-text-h6);
  font-weight:    var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-widest);
  text-transform: uppercase;
  color:          var(--ds-color-white);
  margin-bottom:  var(--ds-space-5);
  padding-bottom: var(--ds-space-3);
  position:       relative;
}

.ds-footer__col-title::after {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       0;
  width:      1.5rem;
  height:     2px;
  background: var(--ds-color-red);
  border-radius: 1px;
}

.ds-footer__links {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        var(--ds-space-3);
}

.ds-footer__links a {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-body-sm);
  color:         var(--ds-color-steel);
  text-decoration:none;
  display:       flex;
  align-items:   center;
  gap:           var(--ds-space-2);
  transition:
    color     var(--ds-transition-fast),
    transform var(--ds-transition-fast);
}

.ds-footer__links a i {
  font-size:  0.5rem;
  color:      var(--ds-color-red);
  opacity:    0;
  transition: opacity var(--ds-transition-fast);
}

.ds-footer__links a:hover {
  color:     var(--ds-color-steel-bright);
  transform: translateX(4px);
}

.ds-footer__links a:hover i {
  opacity: 1;
}

/* Contact column */
.ds-footer__contact-item {
  display:       flex;
  gap:           var(--ds-space-3);
  align-items:   flex-start;
  margin-bottom: var(--ds-space-4);
}

.ds-footer__contact-icon {
  width:         2.5rem;
  height:        2.5rem;
  min-width:     2.5rem;
  border-radius: var(--ds-radius-sm);
  background:    var(--ds-color-red-alpha-10);
  color:         var(--ds-color-red);
  display:       flex;
  align-items:   center;
  justify-content:center;
  font-size:     1rem;
}

.ds-footer__contact-text {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-body-sm);
  color:         var(--ds-color-steel);
  line-height:   var(--ds-leading-relaxed);
}

.ds-footer__contact-text a {
  color:          var(--ds-color-steel);
  text-decoration:none;
  transition:     color var(--ds-transition-fast);
}

.ds-footer__contact-text a:hover {
  color: var(--ds-color-red);
}

/* Bottom bar */
.ds-footer__bottom {
  border-top:  1px solid var(--ds-color-carbon-light);
  padding-top: var(--ds-space-6);
  display:     flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap:   wrap;
  gap:         var(--ds-space-4);
}

.ds-footer__copyright {
  font-family: var(--ds-font-primary);
  font-size:   var(--ds-text-caption);
  color:       var(--ds-color-steel);
}

.ds-footer__bottom-links {
  display: flex;
  gap:     var(--ds-space-6);
}

.ds-footer__bottom-links a {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-caption);
  color:         var(--ds-color-steel);
  text-decoration:none;
  transition:    color var(--ds-transition-fast);
}

.ds-footer__bottom-links a:hover {
  color: var(--ds-color-red);
}

/* ============================================================
   BADGES, TAGS & PILLS
   ============================================================ */

/* Base badge */
.ds-badge {
  display:        inline-flex;
  align-items:    center;
  justify-content:center;
  font-family:    var(--ds-font-primary);
  font-size:      0.6875rem;
  font-weight:    var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-wide);
  text-transform: uppercase;
  padding:        2px var(--ds-space-2);
  border-radius:  var(--ds-radius-sm);
  white-space:    nowrap;
  line-height:    1;
}

.ds-badge--red      { background: var(--ds-color-red);           color: var(--ds-color-white); }
.ds-badge--steel    { background: var(--ds-color-carbon-light);  color: var(--ds-color-steel-bright); }
.ds-badge--success  { background: var(--ds-color-success);       color: var(--ds-color-white); }
.ds-badge--warning  { background: var(--ds-color-warning);       color: var(--ds-color-white); }
.ds-badge--pending  { background: rgba(245,124,0,0.15);          color: var(--ds-color-warning);
                      border: 1px solid rgba(245,124,0,0.30); }

/* Category pill (homepage brand cards) */
.ds-tag {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--ds-space-1);
  padding:        var(--ds-space-1) var(--ds-space-3);
  background:     var(--ds-color-carbon-light);
  border:         1px solid var(--ds-color-carbon-light);
  border-radius:  var(--ds-radius-sm);
  font-family:    var(--ds-font-primary);
  font-size:      var(--ds-text-caption);
  font-weight:    var(--ds-weight-medium);
  color:          var(--ds-color-steel-light);
  text-decoration:none;
  transition:
    border-color  var(--ds-transition-fast),
    color         var(--ds-transition-fast),
    background    var(--ds-transition-fast);
  cursor:         pointer;
}

.ds-tag:hover {
  border-color: var(--ds-color-red);
  color:        var(--ds-color-steel-bright);
  background:   var(--ds-color-carbon-light);
}

/* Section header pattern */
.ds-section-header {
  text-align:    center;
  margin-bottom: var(--ds-space-16);
}

.ds-section-header__eyebrow {
  font-family:    var(--ds-font-primary);
  font-size:      var(--ds-text-h6);
  font-weight:    var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-widest);
  text-transform: uppercase;
  color:          var(--ds-color-red);
  display:        block;
  margin-bottom:  var(--ds-space-3);
}

.ds-section-header__title {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-h2);
  font-weight:   var(--ds-weight-extrabold);
  color:         var(--ds-color-steel-bright);
  line-height:   var(--ds-leading-snug);
  letter-spacing:var(--ds-tracking-snug);
  margin:        0 0 var(--ds-space-4);
}

.ds-section-header__subtitle {
  font-family: var(--ds-font-primary);
  font-size:   var(--ds-text-body-lg);
  color:       var(--ds-color-steel);
  max-width:   37.5rem;
  margin:      0 auto;
  line-height: var(--ds-leading-relaxed);
}

/* Series overview block (Series page — right column) */
.ds-series-overview {
  background:    var(--ds-color-carbon);
  border:        1px solid var(--ds-color-carbon-light);
  border-radius: var(--ds-radius-md);
  padding:       var(--ds-space-8);
}

.ds-series-overview__title {
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-h3);
  font-weight:   var(--ds-weight-bold);
  color:         var(--ds-color-steel-bright);
  margin-bottom: var(--ds-space-2);
  line-height:   var(--ds-leading-snug);
}

.ds-series-overview__brand {
  font-family:    var(--ds-font-primary);
  font-size:      var(--ds-text-h6);
  font-weight:    var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-widest);
  text-transform: uppercase;
  color:          var(--ds-color-red);
  display:        block;
  margin-bottom:  var(--ds-space-5);
}

.ds-series-overview__meta {
  list-style:    none;
  padding:       0;
  margin:        0 0 var(--ds-space-6);
  display:       flex;
  flex-direction:column;
  gap:           var(--ds-space-3);
}

.ds-series-overview__meta li {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--ds-space-3);
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-body-sm);
  color:         var(--ds-color-steel-light);
}

.ds-series-overview__meta li strong {
  font-weight:   var(--ds-weight-semibold);
  color:         var(--ds-color-steel-bright);
  min-width:     6rem;
}

.ds-series-overview__actions {
  display:   flex;
  gap:       var(--ds-space-3);
  flex-wrap: wrap;
}

/* Series image block (Series page — left column) */
.ds-series-image {
  background:    var(--ds-color-carbon);
  border:        1px solid var(--ds-color-carbon-light);
  border-radius: var(--ds-radius-md);
  display:       flex;
  align-items:   center;
  justify-content:center;
  padding:       var(--ds-space-8);
  min-height:    18rem;
  overflow:      hidden;
}

.ds-series-image img {
  max-width:  100%;
  max-height: 16rem;
  object-fit: contain;
  transition: transform var(--ds-duration-slow) var(--ds-ease-spring);
  filter:     drop-shadow(0 8px 24px rgba(0,0,0,0.40));
}

.ds-series-image:hover img {
  transform: scale(1.04);
}

/* ============================================================
   SERIES CARD — Product family grid card
   ============================================================ */

.ds-series-card {
  display: block;
  background: var(--ds-color-carbon);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--ds-radius-xl);
  overflow: hidden;
  text-decoration: none;
  position: relative;
  transition:
    transform var(--ds-duration-slow) var(--ds-ease-standard),
    border-color var(--ds-duration-slow) var(--ds-ease-standard),
    box-shadow var(--ds-duration-slow) var(--ds-ease-standard);
}

.ds-series-card:hover {
  transform: translateY(-6px);
  border-color: var(--ds-color-red);
  box-shadow: var(--ds-shadow-2);
}

.ds-series-card__image-wrap {
  height: 190px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ds-series-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.35s ease;
}

.ds-series-card:hover .ds-series-card__image {
  transform: scale(1.05);
}

.ds-series-card__image--error {
  opacity: 0.6;
}

.ds-series-card__body {
  padding: 0 var(--ds-space-6) var(--ds-space-6);
}

.ds-series-card__title {
  font-family: var(--ds-font-primary);
  font-size: 1.75rem;
  font-weight: var(--ds-weight-bold);
  color: var(--ds-color-white);
  margin: 0 0 var(--ds-space-1);
  line-height: var(--ds-leading-snug);
}

.ds-series-card__desc {
  font-family: var(--ds-font-primary);
  font-size: 0.9375rem;
  color: #A0A0A0;
  margin: 0 0 var(--ds-space-3);
  line-height: var(--ds-leading-relaxed);
}

.ds-series-card:hover .ds-btn--primary {
  background: var(--ds-color-red-glow);
  box-shadow: var(--ds-shadow-red-lg);
}

@media (max-width: 480px) {
  .ds-series-card__image-wrap {
    height: 160px;
    padding: var(--ds-space-4);
  }
  .ds-series-card__title {
    font-size: 1.375rem;
  }
}

/* Series layout — two-column grid */
.ds-series-layout {
  display:               grid;
  grid-template-columns: 1fr 2fr;
  gap:                   var(--ds-space-6);
  margin-bottom:         var(--ds-space-6);
}

@media (max-width: 768px) {
  .ds-series-layout {
    grid-template-columns: 1fr;
  }
}

/* Brand page two-column layout */
.ds-brand-layout {
  display:               grid;
  grid-template-columns: var(--ds-sidebar-width) 1fr;
  gap:                   var(--ds-space-8);
  align-items:           start;
}

@media (max-width: 1023px) {
  .ds-brand-layout {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   RESPONSIVE OVERRIDES — Nav
   ============================================================ */

@media (max-width: 1023px) {
  .ds-nav__links  { display: none; }
  .ds-nav__actions .ds-nav__phone { display: none; }
  .ds-nav__hamburger { display: flex; }

  .ds-nav__inner {
    padding-left:  var(--ds-space-4);
    padding-right: var(--ds-space-4);
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .ds-nav__hamburger { display: none; }
}

/* ============================================================
   TOOLTIP
   ============================================================ */

[data-ds-tooltip] {
  position: relative;
}

[data-ds-tooltip]::after {
  content:       attr(data-ds-tooltip);
  position:      absolute;
  bottom:        calc(100% + var(--ds-space-2));
  left:          50%;
  transform:     translateX(-50%);
  background:    var(--ds-color-carbon);
  color:         var(--ds-color-steel-bright);
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-caption);
  font-weight:   var(--ds-weight-medium);
  padding:       var(--ds-space-1) var(--ds-space-3);
  border-radius: var(--ds-radius-sm);
  white-space:   nowrap;
  opacity:       0;
  pointer-events:none;
  transition:    opacity var(--ds-transition-fast);
  border:        1px solid var(--ds-color-carbon-light);
  box-shadow:    var(--ds-shadow-2);
  z-index:       var(--ds-z-overlay);
}

[data-ds-tooltip]:hover::after {
  opacity: 1;
}

/* ============================================================
   NOTIFICATION / TOAST
   ============================================================ */

.ds-toast {
  position:      fixed;
  top:           var(--ds-space-5);
  right:         var(--ds-space-5);
  z-index:       var(--ds-z-toast);
  display:       flex;
  align-items:   center;
  gap:           var(--ds-space-3);
  min-width:     18rem;
  max-width:     24rem;
  padding:       var(--ds-space-4) var(--ds-space-5);
  background:    var(--ds-color-carbon-light);
  border:        1px solid var(--ds-color-carbon-light);
  border-left:   3px solid var(--ds-color-red);
  border-radius: var(--ds-radius-sm);
  box-shadow:    var(--ds-shadow-2);
  font-family:   var(--ds-font-primary);
  font-size:     var(--ds-text-body-sm);
  color:         var(--ds-color-steel-bright);
  animation:     ds-reveal-up var(--ds-duration-base) var(--ds-ease-decelerate);
}

.ds-toast--success { border-left-color: var(--ds-color-success); }
.ds-toast--error   { border-left-color: var(--ds-color-red); }
.ds-toast--warning { border-left-color: var(--ds-color-warning); }

.ds-toast__icon {
  font-size:  1.125rem;
  flex-shrink:0;
}

.ds-toast--success .ds-toast__icon { color: var(--ds-color-success); }
.ds-toast--error   .ds-toast__icon { color: var(--ds-color-red);     }
.ds-toast--warning .ds-toast__icon { color: var(--ds-color-warning); }

.ds-toast__close {
  margin-left:    auto;
  background:     none;
  border:         none;
  color:          var(--ds-color-steel);
  cursor:         pointer;
  font-size:      0.875rem;
  width:          1.5rem;
  height:         1.5rem;
  display:        flex;
  align-items:    center;
  justify-content:center;
  border-radius:  50%;
  transition:     color var(--ds-transition-fast), background var(--ds-transition-fast);
}

.ds-toast__close:hover {
  color:      var(--ds-color-red);
  background: var(--ds-color-red-alpha-10);
}