/* ============================================================================
   REDESIGN SKIN — Innomotics petrol/light
   Loaded AFTER style.min.css; overrides legacy component styles using the
   design-system tokens. Built incrementally, component by component.
   Working live: every block here is tested on the local mirror first.
   ---------------------------------------------------------------------------
   [01] Global base   [02] Navbar   [03] Mega menu   [04] Search   [05] Footer
   ============================================================================ */

/* ---- [01] GLOBAL BASE ---------------------------------------------------- */
body { background: var(--bg-page); color: var(--text-body); }
::selection { background: var(--c-petrol-200); color: var(--c-petrol-900); }

/* ============================================================================
   [02] NAVBAR — deep petrol bar, white logo, refined links
   Legacy: .nav-modern was rgba(26,26,46,.92) navy glass.
   ============================================================================ */
.nav-modern {
  background: var(--grad-brand-deep) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 2px 20px rgba(0,42,46,.28) !important;
}
.nav-modern.nav-modern--scrolled {
  background: rgba(0,59,66,.86) !important;
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
}
.nav-modern__inner { height: var(--nav-h); gap: var(--sp-4); }

/* Logo stays white on the petrol bar */
.nav-modern__logo-img { filter: brightness(0) invert(1) !important; height: 38px; }

/* Links */
.nav-modern__link {
  color: rgba(255,255,255,.86) !important;
  font: 600 var(--fs-sm)/1 var(--font-body);
  letter-spacing: .01em;
  transition: color var(--t-fast) var(--ease);
}
.nav-modern__link:hover,
.nav-modern__link[aria-expanded="true"] { color: #fff !important; }
.nav-modern__link-line { background: var(--accent) !important; }
.nav-modern__chevron { opacity: .85; }

/* Primary CTA in the menu (Request Quote) */
.nav-modern__link--cta {
  background: var(--accent) !important;
  color: #04352a !important;
  padding: .6rem 1.1rem !important;
  border-radius: var(--r-pill) !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 16px rgba(0,200,150,.32);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), background var(--t-fast) var(--ease);
}
.nav-modern__link--cta:hover {
  background: var(--accent-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,200,150,.42);
}
.nav-modern__link--cta .nav-modern__link-line { display: none; }

/* Right-side action buttons (search toggle, cart, hamburger) */
.nav-modern__action-btn, .nav-modern__hamburger { color: #fff !important; }
.nav-modern__action-btn:hover { background: rgba(255,255,255,.12) !important; border-radius: var(--r-sm); }
.nav-modern__hamburger-line { background: #fff !important; }

/* Cart / CTA badges → mint instead of red for brand cohesion (keep contrast) */
.nav-modern__badge, .nav-modern__badge--cta, .nav-modern__badge--drawer {
  background: var(--accent) !important; color:#04352a !important;
  box-shadow: 0 2px 8px rgba(0,200,150,.45) !important;
}

/* ---- [04] SEARCH (inline, in navbar) ------------------------------------ */
.nav-modern__search-input {
  border: 1.5px solid transparent !important;
  border-radius: var(--r-sm) !important;
  padding: 11px 18px !important;
  background: rgba(255,255,255,.96) !important;
  color: var(--c-ink-900) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
.nav-modern__search-input::placeholder { color: var(--c-slate-500) !important; }
.nav-modern__search-input:focus {
  background: #fff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(0,200,150,.28) !important;
  outline: none;
}
.nav-modern__search-btn {
  background: var(--accent) !important; color:#04352a !important;
  border-radius: var(--r-sm) !important; font-weight: 700 !important;
  padding: 12px 26px !important;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease) !important;
}
.nav-modern__search-btn:hover { background: var(--accent-hover) !important; transform: translateY(-1px); }
.nav-modern__search-results {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-lg) !important;
  background: var(--bg-surface) !important;
}

/* ============================================================================
   [03] MEGA MENU — light cards on white panel
   ============================================================================ */
.nav-mega {
  background: var(--bg-surface) !important;
  border-top: 3px solid var(--brand) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--sh-lg) !important;
}
.nav-mega__card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease) !important;
}
.nav-mega__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md) !important;
  border-color: var(--brand-soft-2) !important;
}
.nav-mega__card-icon {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
  border-radius: var(--r-sm) !important;
}
.nav-mega__card:hover .nav-mega__card-icon { background: var(--grad-brand) !important; color:#fff !important; }
.nav-mega__card-title, .nav-mega__card h3, .nav-mega__card h4 { color: var(--text-strong) !important; }
.nav-mega__card-desc, .nav-mega__card p { color: var(--text-muted) !important; }

/* Search overlay (mobile) */
.nav-search-overlay { background: rgba(0,42,46,.72) !important; backdrop-filter: blur(8px); }
.nav-search-overlay__input {
  background: #fff !important; color: var(--c-ink-900) !important;
  border-radius: var(--r-md) !important; border: 2px solid var(--accent) !important;
}

/* ============================================================================
   [05] FOOTER — deep petrol, mint accents
   Legacy: .footer was #1A1A2E navy.
   ============================================================================ */
.footer {
  background: linear-gradient(180deg, var(--c-petrol-900) 0%, #04252a 100%) !important;
  color: var(--text-on-dark) !important;
}
.footer .footer-trust-bar { border-bottom: 1px solid rgba(255,255,255,.10) !important; padding-block: 22px !important; }
.footer-trust-badge { color: rgba(255,255,255,.9) !important; font-weight: 600; }
.footer-trust-badge svg { color: var(--accent) !important; }
.footer-title {
  color: #fff !important;
  font: 700 var(--fs-sm)/1 var(--font-body) !important;
  letter-spacing: var(--tracking-caps) !important; text-transform: uppercase;
}
.footer-text, .footer-links a, .footer-contact-item, .footer-label { color: rgba(255,255,255,.72) !important; }
.footer-links a { transition: color var(--t-fast) var(--ease); }
.footer-links a:hover { color: var(--accent) !important; }
.footer-label { color: var(--accent) !important; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-2xs) !important; }
.social-icon {
  background: rgba(255,255,255,.08) !important; color:#fff !important;
  border-radius: var(--r-sm) !important; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.social-icon:hover { background: var(--accent) !important; color:#04352a !important; transform: translateY(-2px); }

/* Brand badges row */
.footer-brand-badge {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.7) !important;
  border-radius: var(--r-pill) !important;
  transition: all var(--t-fast) var(--ease);
}
.footer-brand-badge:hover { background: rgba(255,255,255,.12) !important; color:#fff !important; }
.footer-brand-badge--highlight {
  background: var(--accent) !important; color:#04352a !important;
  border-color: transparent !important; font-weight: 700;
}

/* Mobile sticky CTA bar */
.mobile-cta-item--quote { background: var(--accent) !important; color:#04352a !important; }
.mobile-cta-item--wa { background: #25d366 !important; }
.mobile-cta-bar { box-shadow: 0 -4px 20px rgba(0,42,46,.18) !important; }

/* ============================================================================
   [06] HOMEPAGE
   ============================================================================ */

/* ---- Hero: light, petrol glow, dark headline --------------------------- */
.hp-hero {
  background: var(--grad-hero) !important;
  color: var(--text-strong) !important;
  padding: clamp(56px, 8vw, 104px) 20px clamp(48px, 6vw, 88px) !important;
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hp-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 18% 30%, var(--c-petrol-500) 1px, transparent 1px);
  background-size: 46px 46px; opacity: .05;
}
.hp-hero .container { position: relative; z-index: 1; }
.hp-hero::before {
  content: "Authorized Innomotics Distributor · Siemens Group";
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font: 700 var(--fs-xs)/1 var(--font-body);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--brand); position: relative; z-index: 1;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--brand-soft); border: 1px solid var(--brand-soft-2);
}
.hp-hero__title {
  font-size: var(--fs-4xl) !important; color: var(--text-strong) !important;
  letter-spacing: .01em; margin-bottom: 16px !important;
}
.hp-hero__subtitle {
  font-size: var(--fs-md) !important; color: var(--text-body) !important;
  max-width: 620px; margin-left: auto !important; margin-right: auto !important;
}
.hp-hero__search { max-width: 640px !important; }
.hp-hero__search-input {
  padding: 17px 22px !important; border: 1.5px solid var(--border-strong) !important;
  border-radius: var(--r-pill) !important; background: var(--bg-surface) !important;
  color: var(--c-ink-900) !important; box-shadow: var(--sh-sm) !important;
  font-size: var(--fs-base) !important;
}
.hp-hero__search-input:focus { outline: none; border-color: var(--brand) !important; box-shadow: var(--ring) !important; }
.hp-hero__search-btn {
  background: var(--brand) !important; color: #fff !important;
  border-radius: var(--r-pill) !important; padding: 17px 42px !important;
  font-weight: 700 !important; box-shadow: var(--sh-brand);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease) !important;
}
.hp-hero__search-btn:hover { background: var(--brand-hover) !important; transform: translateY(-2px); }
.hp-hero__search-results, .hp-hero__suggestions {
  border: 1px solid var(--border) !important; border-radius: var(--r-md) !important;
  box-shadow: var(--sh-lg) !important; overflow: hidden;
}

/* ---- Trust strip → elevated stat tiles on light ------------------------ */
.hp-trust {
  background: var(--bg-surface) !important; color: var(--text-body) !important;
  border-bottom: 1px solid var(--border) !important; padding: 0 20px !important;
}
.hp-trust__grid {
  gap: 0 !important; max-width: var(--container); margin: 0 auto;
  transform: translateY(-42px); position: relative; z-index: 2;
}
.hp-trust__item {
  background: var(--bg-surface); border: 1px solid var(--border);
  padding: 26px 20px; box-shadow: var(--sh-md);
}
.hp-trust__item:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.hp-trust__item:last-child { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.hp-trust__item:not(:first-child) { border-left: none; }
.hp-trust__value { color: var(--brand) !important; font-family: var(--font-head); font-size: 34px !important; }
.hp-trust__label { color: var(--text-muted) !important; letter-spacing: .02em; }

/* ---- Section titles ---------------------------------------------------- */
.hp-section-title { color: var(--text-strong) !important; font-size: var(--fs-2xl) !important; margin-bottom: 44px !important; }
.hp-section-title::after {
  content: ""; display: block; width: 56px; height: 3px; margin: 16px auto 0;
  background: var(--grad-brand); border-radius: 3px;
}

/* ---- Categories -------------------------------------------------------- */
.hp-categories { background: var(--bg-surface-alt) !important; }
.hp-cat-card {
  background: var(--bg-surface) !important; border: 1px solid var(--border) !important;
  border-left: 4px solid var(--brand) !important; border-radius: var(--r-md) !important;
  padding: 28px !important;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease) !important;
}
.hp-cat-card:hover { transform: translateY(-4px) !important; box-shadow: var(--sh-lg) !important; border-left-color: var(--accent) !important; }
.hp-cat-card__title { color: var(--text-strong) !important; }
.hp-cat-card__desc { color: var(--text-muted) !important; }
.hp-cat-card__count {
  color: var(--brand) !important; font-weight: 700 !important;
  background: var(--brand-soft); padding: 4px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs) !important;
}
.hp-cat-card__arrow { color: var(--brand) !important; font-weight: 700; transition: transform var(--t-fast) var(--ease); }
.hp-cat-card:hover .hp-cat-card__arrow { transform: translateX(4px); }
.hp-cat-card__btn { background: var(--brand) !important; border-radius: var(--r-pill) !important; }

/* ---- Featured products ------------------------------------------------- */
.hp-featured { background: var(--bg-page) !important; }
.hp-prod-card {
  background: var(--bg-surface) !important; border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important; overflow: hidden;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease) !important;
}
.hp-prod-card:hover { transform: translateY(-4px) !important; box-shadow: var(--sh-lg) !important; border-color: var(--brand-soft-2) !important; }
.hp-prod-card__image { background: var(--bg-surface-alt) !important; padding: 18px; }
.hp-prod-card__placeholder { background: var(--bg-surface-alt) !important; }

/* ============================================================================
   [07] CATALOG / CATEGORY LISTING  (shared classes; cards rendered in PHP + JS)
   ============================================================================ */
.catalog-layout { gap: 34px !important; }

/* Sidebar / filters */
.catalog-sidebar {
  background: var(--bg-surface) !important; border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important; box-shadow: var(--sh-sm) !important;
  padding: 22px !important;
}
.filter-label { color: var(--text-body) !important; }
.filter-count { color: var(--text-muted) !important; }
.filter-option input:checked + .filter-label { color: var(--brand) !important; font-weight: 700 !important; }
.filter-option input[type="checkbox"], .filter-option input[type="radio"] { accent-color: var(--brand); }
#active-filter-tags .filter-tag {
  background: var(--brand-soft) !important; color: var(--brand) !important;
  border: 1px solid var(--brand-soft-2) !important; border-radius: var(--r-pill) !important;
}
#active-filter-tags .filter-tag button { color: var(--brand) !important; }
#active-filter-tags .filter-tag button:hover { color: var(--c-danger) !important; }
.clear-filters-trigger { color: var(--brand) !important; font-weight: 600; }
.mobile-filter-toggle { background: var(--brand) !important; color:#fff !important; border-radius: var(--r-pill) !important; }

/* Product cards (override inline styles via !important) */
.catalog-product-card {
  border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-xs) !important;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease) !important;
}
.catalog-product-card:hover {
  transform: translateY(-4px) !important; box-shadow: var(--sh-lg) !important;
  border-color: var(--brand-soft-2) !important;
}

/* Add-to-quote button (PHP + JS variants) */
.add-to-quote-btn {
  background: var(--brand) !important; color:#fff !important;
  border-radius: var(--r-pill) !important; font-weight: 700 !important;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease) !important;
}
.add-to-quote-btn:hover { background: var(--brand-hover) !important; transform: translateY(-1px); }
.add-to-quote-btn.added, .add-to-quote-btn[data-added="1"] { background: var(--accent) !important; color:#04352a !important; }

/* Sort bar */
#catalog-sort-bar, .catalog-sort-bar {
  background: var(--bg-surface) !important; border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
}
#catalog-sort-bar select, .catalog-sort select {
  border: 1px solid var(--border-strong) !important; border-radius: var(--r-sm) !important;
  color: var(--text-body) !important; accent-color: var(--brand);
}

/* Pagination */
.catalog-page-link {
  border: 1px solid var(--border) !important; border-radius: var(--r-sm) !important;
  color: var(--text-body) !important; transition: all var(--t-fast) var(--ease) !important;
}
.catalog-page-link:hover { background: var(--brand-soft) !important; border-color: var(--brand) !important; color: var(--brand) !important; }
.catalog-page-current {
  background: var(--brand) !important; color:#fff !important;
  border: 1px solid var(--brand) !important; border-radius: var(--r-sm) !important;
}

/* Breadcrumbs (shared) */
.breadcrumb a, .breadcrumbs a { color: var(--brand) !important; }
.breadcrumb, .breadcrumbs { color: var(--text-muted) !important; }

/* ============================================================================
   [08] PRODUCT DETAIL — hero, spec badges, spec table, tabs, related, certs
   ============================================================================ */
.product-hero {
  background: var(--bg-surface) !important; border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important; box-shadow: var(--sh-sm) !important;
}
.product-hero__title { color: var(--text-strong) !important; }
.product-hero__image-wrap, .product-hero__image-col { background: var(--bg-surface-alt) !important; border-radius: var(--r-lg) !important; }

/* Key-spec badges under the title */
.product-hero__spec-badge {
  background: var(--brand-soft) !important; border-left: 3px solid var(--brand) !important;
  border-radius: var(--r-sm) !important; color: var(--text-body) !important;
}
.product-hero__spec-badge strong, .product-hero__spec-badge b { color: var(--text-strong) !important; }

/* Primary CTAs in hero */
.product-hero__cta {
  background: var(--brand) !important; color:#fff !important;
  border-radius: var(--r-pill) !important; font-weight: 700 !important;
  box-shadow: var(--sh-brand); transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease) !important;
}
.product-hero__cta:hover { background: var(--brand-hover) !important; transform: translateY(-2px); }
.datasheet-download-link, .product-hero__cta-datasheet {
  color: var(--brand) !important; border: 1.5px solid var(--border-strong) !important;
  border-radius: var(--r-pill) !important; background: var(--bg-surface) !important;
  transition: all var(--t-fast) var(--ease) !important;
}
.datasheet-download-link:hover, .product-hero__cta-datasheet:hover { background: var(--brand-soft) !important; border-color: var(--brand) !important; }

/* Tabs */
.product-tabs-nav { border-bottom: 2px solid var(--border) !important; }
.tab-btn { color: var(--text-muted) !important; font-weight: 600 !important; position: relative; }
.tab-btn:hover { color: var(--text-body) !important; }
.tab-btn--active, .tab-btn.tab-btn--active {
  color: var(--brand) !important;
  box-shadow: inset 0 -2px 0 var(--brand) !important;
}

/* Spec table — zebra + clear hierarchy for the 40k specs */
.product-specs-table { width: 100%; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-xs); }
.product-specs-table__key {
  color: var(--text-strong) !important; font-weight: 600 !important;
  background: var(--bg-surface-alt) !important;
}
.product-specs-table__value { color: var(--text-body) !important; }
.product-specs-table tr { border-bottom: 1px solid var(--border) !important; }
.product-specs-table tr:hover { background: var(--brand-soft) !important; }
.product-specs-table caption, .product-specs-group__title, .spec-group-title {
  color: var(--brand) !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--fs-xs) !important;
}

/* Related products */
.product-related__card {
  border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease) !important;
}
.product-related__card:hover { transform: translateY(-4px) !important; box-shadow: var(--sh-lg) !important; border-color: var(--brand-soft-2) !important; }

/* Certifications */
.cert-grid > *, .cert-badge {
  background: var(--bg-surface) !important; border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
}

/* Applications chips */
.application-tag, .product-application {
  background: var(--brand-soft) !important; color: var(--brand) !important;
  border: 1px solid var(--brand-soft-2) !important; border-radius: var(--r-pill) !important;
}

/* ============================================================================
   [09] FAMILY PAGE
   ============================================================================ */
.family-header__title { color: var(--text-strong) !important; }
.family-header {
  background: var(--grad-hero) !important; border-bottom: 1px solid var(--border) !important;
}

/* ============================================================================
   [10] QUOTE / RFQ — form, stepper, benefit cards
   ============================================================================ */
.qt-form__group-title { color: var(--text-strong) !important; }
.qt-form__label { color: var(--text-body) !important; font-weight: 600 !important; }
.qt-form__input {
  border: 1.5px solid var(--border-strong) !important; border-radius: var(--r-sm) !important;
  color: var(--c-ink-900) !important; background: var(--bg-surface) !important;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) !important;
}
.qt-form__input:focus { outline: none; border-color: var(--brand) !important; box-shadow: var(--ring) !important; }

/* Stepper */
.qt-stepper__num {
  background: var(--bg-sunken) !important; color: var(--text-muted) !important; font-weight: 700 !important;
}
.qt-stepper__step.active .qt-stepper__num, .qt-stepper__step--active .qt-stepper__num,
.qt-stepper__step[aria-current] .qt-stepper__num {
  background: var(--grad-brand) !important; color:#fff !important; box-shadow: var(--sh-brand);
}
.qt-stepper__line { background: var(--border) !important; }
.qt-stepper__label { color: var(--text-muted) !important; }

/* Benefit cards */
.qt-benefits__card {
  background: var(--bg-surface) !important; border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important; box-shadow: var(--sh-xs) !important;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease) !important;
}
.qt-benefits__card:hover { transform: translateY(-3px) !important; box-shadow: var(--sh-md) !important; }
.qt-benefits__icon { background: var(--brand-soft) !important; color: var(--brand) !important; border-radius: var(--r-md) !important; }
.qt-benefits__card-title { color: var(--text-strong) !important; }
.qt-benefits__card-text { color: var(--text-muted) !important; }

/* Submit button (RFQ) */
.qt-form__submit, .qt-submit-btn, button[type="submit"] {
  background: var(--brand) !important; color:#fff !important;
  border-radius: var(--r-pill) !important; font-weight: 700 !important;
  box-shadow: var(--sh-brand); transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease) !important;
}
.qt-form__submit:hover, .qt-submit-btn:hover { background: var(--brand-hover) !important; transform: translateY(-2px); }

/* Exit-intent / generic modal accents */
.exit-modal__btn, .modal__cta { background: var(--brand) !important; color:#fff !important; border-radius: var(--r-pill) !important; }