/* ==========================================================================
   FIVER AUTOPARTS — UI Kit v2
   Design system + component library
   Replaces the legacy Bootstrap 3 / jQuery / bxslider stack with a
   dependency-free, token-driven CSS architecture.
   --------------------------------------------------------------------------
   00. Tokens
   01. Reset & base
   02. Layout primitives
   03. Typography
   04. Buttons & form controls
   05. Topbar / Header / Navigation
   06. Page hero & breadcrumbs
   07. Sidebar widgets
   08. Section headings
   09. Product cards & grids
   10. Product detail
   11. News
   12. Gallery
   13. Tables & prose
   14. Forms
   15. Pagination
   16. Footer
   17. Floating dock & back-to-top
   18. Utilities & utilities
   19. Animations
   20. Responsive
   ========================================================================== */

/* ==========================================================================
   00. TOKENS
   ========================================================================== */
:root {
  /* Brand palette — industrial steel + signal orange */
  --ink:        #0D1B2A;
  --ink-2:      #1B2C42;
  --steel:      #24506F;
  --steel-600:  #1A3B53;
  --brand:      #FF6A1F;
  --brand-600:  #E8540C;
  --brand-100:  #FFE2D2;
  --brand-50:   #FFF4ED;

  /* Neutral */
  --bg:         #F2F5F9;
  --surface:    #FFFFFF;
  --surface-2:  #F8FAFC;
  --line:       #E2E8F0;
  --line-2:     #CBD5E1;
  --text:       #1E293B;
  --muted:      #5B6B7F; /* darkened from #64748B: 4.35:1 -> 4.9:1 on --bg (WCAG AA) */
  --muted-2:    #94A3B8;

  /* Semantic */
  --ok:         #0F9D58;
  --ok-bg:      #E7F6EE;
  --warn:       #B45309;
  --warn-bg:    #FEF3C7;
  --danger:     #DC2626;
  --danger-bg:  #FEE2E2;
  --info-bg:    #E0F2FE;

  /* Radii */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-pill: 999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(13, 27, 42, .06);
  --sh-sm: 0 1px 2px rgba(13, 27, 42, .05), 0 2px 6px rgba(13, 27, 42, .04);
  --sh-md: 0 4px 8px -2px rgba(13, 27, 42, .06), 0 12px 24px -10px rgba(13, 27, 42, .14);
  --sh-lg: 0 8px 16px -6px rgba(13, 27, 42, .08), 0 28px 48px -20px rgba(13, 27, 42, .24);
  --sh-brand: 0 8px 20px -8px rgba(255, 106, 31, .55);

  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Barlow Condensed', 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;

  /* Metrics */
  --wrap: 1220px;
  --gutter: 24px;
  --header-h: 84px;
  --nav-h: 58px;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   01. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--nav-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--steel); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--brand); }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

::selection { background: var(--brand); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   02. LAYOUT PRIMITIVES
   ========================================================================== */
.section { padding: 64px 0; }
.section--tight { padding: 44px 0; }
.section--flush { padding: 0; }
.section--alt { background: var(--surface); }
.section--dark { background: var(--ink); color: #CBD5E1; }
.section--dark h2, .section--dark h3 { color: #fff; }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
}
/* Sidebar on the left (matches the original site's IA). DOM order stays
   main → sidebar so mobile stacks correctly without extra markup. */
.layout--left { grid-template-columns: 320px minmax(0, 1fr); }
.layout--left .layout__main { grid-column: 2; grid-row: 1; }
.layout--left .layout__side { grid-column: 1; grid-row: 1; }
.layout--full { grid-template-columns: minmax(0, 1fr); }

.stack > * + * { margin-top: var(--stack-gap, 20px); }
.stack-sm { --stack-gap: 12px; }
.stack-lg { --stack-gap: 32px; }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.row--top { align-items: flex-start; }

/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5 {
  margin: 0 0 .5em;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); }
h2 { font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); }
h4 { font-size: 1.12rem; }
h5 { font-size: 1rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.08;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: .92rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand);
  margin-bottom: 6px;
}
.eyebrow::before {
  content: ''; width: 26px; height: 2px; background: var(--brand); border-radius: 2px;
}
.eyebrow--light { color: #93C5FD; }
.eyebrow--light::before { background: #60A5FA; }

.lead { font-size: 1.08rem; color: var(--muted); line-height: 1.7; }
.text-muted { color: var(--muted); }
.text-sm { font-size: .875rem; }
.text-xs { font-size: .8rem; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-brand { color: var(--brand); }
.text-steel { color: var(--steel); }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.mono { font-family: var(--font-mono); }

/* ==========================================================================
   04. BUTTONS & CONTROLS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px;
  font-size: .9rem; font-weight: 600; letter-spacing: .02em;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--brand { background: var(--brand); color: #fff; box-shadow: var(--sh-brand); }
.btn--brand:hover { background: var(--brand-600); color: #fff; }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--steel-600); color: #fff; }

.btn--steel { background: var(--steel); color: #fff; }
.btn--steel:hover { background: var(--steel-600); color: #fff; }

.btn--outline { border-color: var(--line-2); background: var(--surface); color: var(--ink); }
.btn--outline:hover { border-color: var(--steel); color: var(--steel); background: var(--surface); }

.btn--ghost-light { border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--light { background: var(--surface); color: var(--ink); }
.btn--light:hover { background: var(--brand); color: #fff; }

.btn--lg { padding: 14px 30px; font-size: 1rem; }
.btn--sm { padding: 7px 14px; font-size: .82rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: .9rem; color: var(--brand);
}
.link-arrow::after {
  content: '→'; transition: transform .2s var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  background: var(--brand-50); color: var(--brand-600);
  border: 1px solid var(--brand-100);
}
.chip--ok { background: var(--ok-bg); color: var(--ok); border-color: #BFE7D0; }
.chip--steel { background: var(--info-bg); color: var(--steel); border-color: #BAE6FD; }
.chip--grey { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.chip--solid { background: var(--ink); color: #fff; border-color: var(--ink); }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }

.badge {
  display: inline-block; padding: 3px 9px; border-radius: var(--r-xs);
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--brand); color: #fff;
}
.badge--dark { background: var(--ink); }
.badge--ok { background: var(--ok); }

/* ==========================================================================
   05. TOPBAR / HEADER / NAVIGATION
   ========================================================================== */
.topbar {
  background: var(--ink);
  color: #93A4B8;
  font-size: .8rem;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 38px;
}
.topbar__welcome { margin: 0; }
.topbar__right { display: flex; align-items: center; gap: 12px; }
.topbar__lang { color: #93A4B8; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.topbar__lang img { width: 18px; height: 13px; border-radius: 2px; display: block; }
.topbar__lang:hover, .topbar__lang.is-active { color: #fff; }
.topbar__sep { width: 1px; height: 12px; background: rgba(255, 255, 255, .18); }
.topbar__tel { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.topbar__tel:hover { color: var(--brand); }

.header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex; align-items: center; gap: 28px;
  min-height: var(--header-h);
}
.header.is-stuck { box-shadow: var(--sh-md); }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand__logo { height: 52px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__text b {
  font-family: var(--font-display); font-size: 1.55rem; font-weight: 700;
  letter-spacing: .06em; color: var(--ink); text-transform: uppercase;
}
.brand__text em {
  font-style: normal; font-size: .62rem; font-weight: 700;
  letter-spacing: .32em; color: var(--brand); text-transform: uppercase; margin-top: 3px;
}

.search {
  flex: 1 1 auto; display: flex; align-items: center;
  max-width: 560px; height: 44px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.search input {
  flex: 1; height: 100%; padding: 0 16px; border: 0; background: transparent;
  font-size: .92rem; outline: none; min-width: 0;
}
.search input::placeholder { color: var(--muted-2); }
.search .btn { border-radius: 0; height: 100%; padding-inline: 22px; }

.header__cta { flex: none; display: flex; gap: 10px; align-items: center; }

/* --- Primary nav --- */
.nav {
  background: var(--ink);
  position: relative;
  z-index: 60;
}
.nav__inner { display: flex; align-items: stretch; }
.nav__list {
  display: flex; align-items: stretch;
  margin-left: -14px; flex: 1;
}
.nav__list > li { position: relative; display: flex; align-items: stretch; }
.nav__list > li > a {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  height: var(--nav-h); padding: 0 14px;
  color: #CBD5E1; font-size: .9rem; font-weight: 600; letter-spacing: .02em;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav__list > li > a:hover,
.nav__list > li:hover > a,
.nav__list > li.is-current > a { color: #fff; background: rgba(255, 255, 255, .06); }
.nav__list > li.is-current > a { box-shadow: inset 0 -3px 0 var(--brand); }

.nav__caret {
  width: 18px; height: 18px; display: grid; place-items: center;
  align-self: center; margin-left: -8px;
  color: inherit; opacity: .65;
}
.nav__caret::before {
  content: ''; width: 6px; height: 6px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform .2s var(--ease);
}
.has-dropdown:hover > .nav__caret::before { transform: rotate(225deg) translate(-2px, -2px); }

.nav__cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* Mega menu */
.mega {
  position: absolute; top: 100%; left: 0; z-index: 70;
  min-width: 560px; padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: var(--sh-lg);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.has-dropdown:hover .mega,
.has-dropdown:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega__col h5 {
  font-family: var(--font-display); font-size: 1.02rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.mega__col li a {
  display: block; padding: 6px 0; font-size: .88rem; color: var(--muted);
}
.mega__col li a:hover { color: var(--brand); padding-left: 4px; }
.mega__col li a::before {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--line-2); margin-right: 9px; vertical-align: middle;
  transition: background .18s var(--ease);
}
.mega__col li a:hover::before { background: var(--brand); }

/* Mobile nav */
.nav__toggle {
  display: none; align-items: center; gap: 8px;
  height: var(--nav-h); padding: 0 4px;
  color: #fff; font-weight: 600; font-size: .9rem;
}
.nav__toggle::before {
  content: ''; width: 20px; height: 2px; background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}
.nav__scrim {
  position: fixed; inset: 0; background: rgba(13, 27, 42, .5);
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s;
  z-index: 80; backdrop-filter: blur(2px);
}
body.nav-open .nav__scrim { opacity: 1; visibility: visible; }

/* ==========================================================================
   06. PAGE HERO & BREADCRUMBS
   --------------------------------------------------------------------------
   The legacy site used a flat 250px banner image (.page_bg) with the page
   title floating on top of it. This keeps that role but modernises it: the
   real brand banner sits behind a navy scrim so the title always reads, and
   a blueprint grid adds depth.
   ========================================================================== */
.page-hero {
  position: relative;
  padding: 64px 0 68px;
  min-height: 260px;
  display: flex;
  align-items: center;
  background-color: var(--ink);
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  color: #fff;
  overflow: hidden;
}
/* NOTE: the banner image is set with an inline `background-image` on the
   element, because a url() inside a custom property would resolve relative
   to this stylesheet instead of the document. The scrim lives on ::before so
   it can sit above the photo but below the content. */
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(13, 27, 42, .95) 0%, rgba(13, 27, 42, .84) 32%, rgba(13, 27, 42, .38) 100%);
  pointer-events: none;
}
.page-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; margin-bottom: 6px; }
.page-hero__sub { color: #A9BDD2; max-width: 640px; margin: 0; }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .82rem; color: #9DB1C6; margin-bottom: 14px;
}
.crumbs a { color: #CBD5E1; }
.crumbs a:hover { color: var(--brand); }
.crumbs li + li::before { content: '/'; color: #52667C; margin-right: 8px; }

/* ==========================================================================
   06b. BRAND BANNER BAND + POSTER
   --------------------------------------------------------------------------
   The legacy home page opened with a full-bleed jQuery/bxslider carousel of
   four campaign banners. The creative is brand artwork, so it is kept intact
   and shown edge-to-edge as its own band rather than being used as a backdrop
   for text (three of the four slides carry baked-in copy).
   ========================================================================== */
.banner-band { position: relative; background: var(--ink); }
.banner-band__viewport { overflow: hidden; }
.banner-band__track {
  display: flex;
  transition: transform .65s var(--ease);
  will-change: transform;
}
.banner-band__slide { flex: 0 0 100%; position: relative; background: var(--ink); }
.banner-band__slide img {
  display: block; width: 100%; height: auto; max-height: 460px;
  aspect-ratio: 1920 / 740; object-fit: cover;
}

/* The caption and the controls live in one bar under the artwork, not inside
   the slides, so the dots and arrows can never overlap the artwork or the
   caption button. main.js swaps the copy to match the active slide. */
.banner-band__bar {
  background: var(--ink);
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.banner-band__inner { display: flex; align-items: center; gap: 26px; }
.banner-band__caption {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.banner-band__text { min-width: 0; }
.banner-band__caption h3 { color: #fff; font-size: 1.05rem; margin: 0 0 2px; }
.banner-band__caption p { margin: 0; font-size: .82rem; color: #A9BDD2; }
.banner-band__controls { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; }
.banner-band__dots { display: flex; align-items: center; gap: 8px; }
.banner-dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .35); border: 0;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.banner-dot:hover { background: rgba(255, 255, 255, .7); }
.banner-dot.is-active { background: var(--brand); transform: scale(1.35); }
.banner-band__arrows { display: flex; gap: 6px; }
.banner-arrow {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(13, 27, 42, .55); border: 1px solid rgba(255, 255, 255, .28);
  color: #fff; transition: all .2s var(--ease);
}
.banner-arrow:hover { background: var(--brand); border-color: var(--brand); }
.banner-arrow svg { width: 16px; height: 16px; }

/* Framed brand poster — used in the home hero for the product-range banner */
.hero-poster {
  position: relative;
  background: #fff;
  border-radius: var(--r-lg);
  padding: 14px;
  box-shadow: var(--sh-lg);
}
.hero-poster img { width: 100%; height: auto; display: block; border-radius: var(--r-sm); }
.hero-poster__tag {
  position: absolute; left: 26px; top: 26px;
  background: var(--brand); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-xs);
}
.hero-poster__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 6px 2px;
}
.hero-poster__foot span { font-size: .78rem; color: var(--muted); }
.hero-poster__foot strong { font-size: .8rem; color: var(--ink); }

/* ==========================================================================
   07. SIDEBAR WIDGETS
   ========================================================================== */
.sidebar { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 18px; }
.widget {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-xs);
}
.widget__head {
  padding: 15px 18px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.widget__head .count { color: var(--brand); margin-left: 6px; }
.widget__body { padding: 16px 18px; }
.widget__body--flush { padding: 0; }

/* Category accordion */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 13px 18px; text-align: left;
  font-weight: 600; font-size: .92rem; color: var(--ink);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.accordion__btn:hover { background: var(--surface-2); color: var(--brand); }
.accordion__btn::after {
  content: '+'; font-size: 1.2rem; font-weight: 400; color: var(--muted-2);
  line-height: 1; transition: transform .22s var(--ease), color .18s var(--ease);
}
.accordion__item.is-open .accordion__btn::after { transform: rotate(45deg); color: var(--brand); }
.accordion__item.is-open .accordion__btn { color: var(--brand); }
.accordion__panel { display: none; padding: 0 18px 14px; }
.accordion__item.is-open .accordion__panel { display: block; }
.accordion__panel li a {
  display: block; padding: 7px 0 7px 14px; font-size: .88rem; color: var(--muted);
  position: relative;
}
.accordion__panel li a::before {
  content: ''; position: absolute; left: 0; top: 15px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--line-2);
  transition: background .18s var(--ease);
}
.accordion__panel li a:hover { color: var(--brand); }
.accordion__panel li a:hover::before { background: var(--brand); }
.accordion__panel li a.is-active { color: var(--brand); font-weight: 600; }

/* Sidebar news list */
.side-news li { border-bottom: 1px dashed var(--line); }
.side-news li:last-child { border-bottom: 0; }
.side-news a {
  display: block; padding: 11px 0; font-size: .88rem; color: var(--text); line-height: 1.5;
}
.side-news a:hover { color: var(--brand); }
.side-news time { display: block; font-size: .75rem; color: var(--muted-2); margin-top: 4px; }

/* Contact card */
.contact-card { background: var(--surface-2); border-radius: var(--r-md); padding: 18px; }
.contact-card dl { margin: 0; display: grid; gap: 11px; }
.contact-card dt {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 700; margin-bottom: 2px;
}
.contact-card dd { margin: 0; font-size: .88rem; color: var(--ink); font-weight: 500; }
.contact-card a { color: var(--ink); }
.contact-card a:hover { color: var(--brand); }

/* ==========================================================================
   08. SECTION HEADINGS
   ========================================================================== */
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 30px;
}
.sec-head__title { margin: 0; }
.sec-head p { margin: 6px 0 0; color: var(--muted); }
.sec-head--center { flex-direction: column; align-items: center; text-align: center; }
.sec-head--center p { max-width: 640px; }
.sec-head .link-arrow { flex: none; }

.rule-title {
  display: flex; align-items: center; gap: 16px; margin-bottom: 28px;
}
.rule-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ==========================================================================
   09. PRODUCT CARDS & GRIDS
   ========================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 24px;
}
.product-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--sh-lg);
}
.product-card__media {
  position: relative; display: block; aspect-ratio: 4 / 3;
  background: #fff; overflow: hidden;
}
.product-card__media img {
  width: 100%; height: 100%; object-fit: contain;
  padding: 10px;
  transition: transform .5s var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__flag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
}
.product-card__body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.product-card__cat {
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--brand); font-weight: 700; margin-bottom: 6px;
}
.product-card__title {
  font-size: .95rem; font-weight: 600; line-height: 1.45; color: var(--ink);
  margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; min-height: 2.75em;
}
.product-card__title a { color: inherit; }
.product-card__title a:hover { color: var(--brand); }
.product-card__meta {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: .78rem; color: var(--muted);
}
.product-card__meta .link-arrow { font-size: .82rem; }

/* ==========================================================================
   10. PRODUCT DETAIL
   ========================================================================== */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.pdp__media { position: sticky; top: 18px; align-self: start; }
.pdp__main {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  aspect-ratio: 4 / 3;
}
.pdp__main img { width: 100%; height: 100%; object-fit: cover; }
.pdp__zoom {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(255, 255, 255, .94); color: var(--ink);
  border-radius: var(--r-sm); padding: 7px 12px; font-size: .76rem; font-weight: 600;
  box-shadow: var(--sh-sm);
}
.pdp__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.pdp__thumb {
  border: 2px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
  aspect-ratio: 1; background: var(--surface-2); padding: 0;
  transition: border-color .18s var(--ease);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb:hover { border-color: var(--line-2); }
.pdp__thumb.is-active { border-color: var(--brand); }

.pdp__cat {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand); font-weight: 700; margin-bottom: 10px;
}
.pdp__title { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); margin-bottom: 14px; }
.pdp__partno {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .88rem; font-weight: 600;
  background: var(--surface-2); border: 1px dashed var(--line-2);
  padding: 8px 14px; border-radius: var(--r-sm); color: var(--ink);
  margin-bottom: 18px;
}
.pdp__partno span { color: var(--muted); font-weight: 500; font-family: var(--font-body); }
.pdp__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

.spec-list { border-top: 1px solid var(--line); margin-bottom: 22px; }
.spec-list > div {
  display: grid; grid-template-columns: 150px 1fr; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.spec-list dt { color: var(--muted); font-weight: 500; }
.spec-list dd { margin: 0; color: var(--ink); font-weight: 600; }

.pdp__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.pdp__note {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--brand-50); border: 1px solid var(--brand-100);
  border-radius: var(--r-sm); padding: 12px 14px; font-size: .84rem; color: #8A3B12;
}

/* Prev / next */
.pager-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line);
}
.pager-nav a {
  display: block; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.pager-nav a:hover { border-color: var(--brand); transform: translateY(-2px); }
.pager-nav span {
  display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 700; margin-bottom: 5px;
}
.pager-nav strong { font-size: .88rem; color: var(--ink); font-weight: 600; line-height: 1.45; }
.pager-nav a:hover strong { color: var(--brand); }
.pager-nav .is-next { text-align: right; }

/* ==========================================================================
   11. NEWS
   ========================================================================== */
.news-list { border-top: 1px solid var(--line); }
.news-list > li { border-bottom: 1px solid var(--line); }
.news-list a {
  display: grid; grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 22px; align-items: center;
  padding: 20px 4px; transition: background .18s var(--ease);
}
.news-list a:hover { background: var(--surface); }
.news-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 6px; min-width: 78px;
}
.news-date b {
  font-family: var(--font-display); font-size: 1.7rem; line-height: 1;
  color: var(--brand); font-weight: 700;
}
.news-date span {
  font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-top: 3px;
}
.news-list__title {
  font-size: 1.02rem; font-weight: 600; color: var(--ink); margin: 0 0 5px; line-height: 1.45;
}
.news-list a:hover .news-list__title { color: var(--brand); }
.news-list__excerpt { font-size: .88rem; color: var(--muted); margin: 0; }
.news-list__arrow { color: var(--muted-2); transition: transform .2s var(--ease), color .2s var(--ease); }
.news-list a:hover .news-list__arrow { color: var(--brand); transform: translateX(4px); }

/* Article */
.article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  font-size: .82rem; color: var(--muted); padding-bottom: 20px;
  border-bottom: 1px solid var(--line); margin-bottom: 26px;
}
.article__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line-2); }
.article__body { font-size: 1rem; line-height: 1.82; color: #334155; }
.article__body h2 {
  font-family: var(--font-display); font-size: 1.6rem; text-transform: uppercase;
  letter-spacing: .04em; margin: 36px 0 12px; padding-left: 14px;
  border-left: 4px solid var(--brand);
}
.article__body h3 { font-size: 1.15rem; margin: 28px 0 10px; color: var(--ink); }
.article__body p { margin-bottom: 1.15em; }
.article__body ul { list-style: none; margin: 0 0 1.2em; }
.article__body ul li { position: relative; padding-left: 22px; margin-bottom: 9px; }
.article__body ul li::before {
  content: ''; position: absolute; left: 2px; top: 10px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--brand);
  transform: rotate(45deg);
}
.article__body ol { list-style: decimal; padding-left: 22px; margin: 0 0 1.2em; }
.article__body ol li { margin-bottom: 8px; }
.article__body img { border-radius: var(--r-md); margin: 20px 0; box-shadow: var(--sh-sm); }
.article__body blockquote {
  margin: 24px 0; padding: 18px 22px; background: var(--brand-50);
  border-left: 4px solid var(--brand); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .96rem; color: #8A3B12;
}
.article__body figure { margin: 24px 0; }
.article__body figcaption { font-size: .8rem; color: var(--muted); text-align: center; margin-top: 8px; }

.share-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-top: 34px;
}
.share-row__label { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.share-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
  transition: all .18s var(--ease);
}
.share-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); }
.share-btn svg { width: 16px; height: 16px; }

/* News feature image column (mirrors the legacy .news_img panel) */
.news-feature {
  display: block; overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.news-feature:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.news-feature img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   12. GALLERY
   ========================================================================== */
.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px;
}
.gallery-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-md); background: var(--surface);
  border: 1px solid var(--line);
}
.gallery-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.gallery-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.gallery-card:hover .gallery-card__media img { transform: scale(1.06); }
.gallery-card__overlay {
  position: absolute; inset: auto 0 0 0; padding: 34px 18px 16px;
  background: linear-gradient(to top, rgba(13, 27, 42, .92), transparent);
  color: #fff;
}
.gallery-card__overlay h4 { color: #fff; font-size: .98rem; margin: 0 0 3px; }
.gallery-card__overlay span { font-size: .76rem; color: #A9BDD2; }
.gallery-card:hover .gallery-card__overlay { background: linear-gradient(to top, rgba(255, 106, 31, .92), rgba(13, 27, 42, .35)); }

/* ==========================================================================
   13. TABLES & PROSE
   ========================================================================== */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.data-table { font-size: .89rem; min-width: 620px; }
.data-table thead th {
  background: var(--ink); color: #fff; text-align: left;
  padding: 13px 16px; font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; white-space: nowrap;
}
.data-table tbody td { padding: 13px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.data-table tbody tr:nth-child(even) { background: var(--surface-2); }
.data-table tbody tr:hover { background: var(--brand-50); }
.data-table td strong { color: var(--ink); }

.prose { font-size: .96rem; line-height: 1.78; color: #334155; }
.prose h2 {
  font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase;
  letter-spacing: .04em; margin: 34px 0 12px; padding-left: 14px;
  border-left: 4px solid var(--brand);
}
.prose h3 { font-size: 1.1rem; margin: 26px 0 8px; }
.prose ul { list-style: none; margin: 0 0 1.1em; }
.prose ul li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.prose ul li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--brand); transform: rotate(45deg);
}
.prose img { border-radius: var(--r-md); margin: 18px 0; }

.info-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px;
}
.info-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 22px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.info-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: transparent; }
.info-card__icon {
  width: 46px; height: 46px; border-radius: var(--r-sm);
  display: grid; place-items: center; margin-bottom: 14px;
  background: var(--brand-50); color: var(--brand);
}
.info-card__icon svg { width: 22px; height: 22px; }
.info-card h4 { margin-bottom: 6px; }
.info-card p { font-size: .88rem; color: var(--muted); margin: 0; }

/* Advantage card with a real photograph as its header */
.info-card--media { padding: 0; overflow: hidden; }
.info-card--media .info-card__media {
  display: block; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden;
}
.info-card--media .info-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s var(--ease);
}
.info-card--media:hover .info-card__media img { transform: scale(1.05); }
.info-card--media .info-card__body { padding: 20px 22px 22px; }
.info-card--media .info-card__body h4 { margin-top: 14px; }

/* Download list */
.dl-list { border-top: 1px solid var(--line); }
.dl-list > li {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 4px; border-bottom: 1px solid var(--line);
}
.dl-list__icon {
  width: 46px; height: 46px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand);
}
.dl-list__icon svg { width: 22px; height: 22px; }
.dl-list__main { flex: 1; min-width: 0; }
.dl-list__main h4 { margin: 0 0 4px; font-size: .95rem; }
.dl-list__main h4 a { color: var(--ink); }
.dl-list__main h4 a:hover { color: var(--brand); }
.dl-list__meta { font-size: .8rem; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }

/* ==========================================================================
   14. FORMS
   ========================================================================== */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field > label {
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink);
}
.field > label .req { color: var(--brand); margin-left: 3px; }
.field .hint { font-size: .78rem; color: var(--muted); }
.field .err { font-size: .78rem; color: var(--danger); display: none; }
.field.has-error .err { display: block; }
.field.has-error .input, .field.has-error .textarea { border-color: var(--danger); }

.input, .textarea, .select {
  width: 100%; padding: 11px 14px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-size: .92rem; outline: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50);
}
.textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748B' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 11px;
  padding-right: 38px;
}
.input-group { display: flex; }
.input-group .input { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.input-group .btn { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.check { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; color: var(--muted); cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--brand); flex: none; }

.form-note {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--surface-2); border: 1px dashed var(--line-2);
  border-radius: var(--r-sm); padding: 13px 15px; font-size: .83rem; color: var(--muted);
}

.captcha { display: flex; align-items: center; gap: 12px; }
.captcha__img {
  height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: var(--surface-2); display: grid; place-items: center;
  padding: 0 14px; font-family: var(--font-display); font-size: 1.35rem;
  letter-spacing: .28em; font-weight: 700; color: var(--ink);
  background-image: repeating-linear-gradient(35deg, #EEF2F7, #EEF2F7 6px, #E2E8F0 6px, #E2E8F0 12px);
  user-select: none;
}

.form-success {
  display: none; gap: 12px; align-items: flex-start;
  background: var(--ok-bg); border: 1px solid #BFE7D0; color: #0A6C3E;
  border-radius: var(--r-md); padding: 16px 18px; font-size: .9rem;
}
.form-success.is-visible { display: flex; }
.form-success svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }

/* ==========================================================================
   15. PAGINATION
   ========================================================================== */
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 34px; }
.pagination a, .pagination span {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface); color: var(--text);
  font-size: .88rem; font-weight: 600;
  transition: all .18s var(--ease);
}
.pagination a:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.pagination .is-current { background: var(--ink); border-color: var(--ink); color: #fff; }
.pagination .is-disabled { opacity: .4; pointer-events: none; }
.pagination .gap { border: 0; background: none; min-width: 24px; padding: 0; }

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.footer { background: var(--ink); color: #93A4B8; padding: 64px 0 0; font-size: .88rem; }
.footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 40px;
  padding-bottom: 44px;
}
.footer h5 {
  color: #fff; font-family: var(--font-display); font-size: 1.02rem;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px;
}
.footer a { color: #93A4B8; }
.footer a:hover { color: var(--brand); }
.footer__links li { margin-bottom: 9px; }
.footer .brand__text b { color: #fff; }
.footer__about { max-width: 330px; margin-top: 16px; line-height: 1.75; }
.footer__contact li { display: flex; gap: 10px; margin-bottom: 11px; align-items: flex-start; }
.footer__contact svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--brand); }
.footer__social { display: flex; gap: 10px; margin-top: 18px; }
.footer__social a {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .07); color: #CBD5E1;
  transition: all .18s var(--ease);
}
.footer__social a:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }
.footer__social svg { width: 16px; height: 16px; }
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 20px 0 26px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: .82rem; color: #7C8FA3;
}
.footer__bottom a { color: #93A4B8; }

/* ==========================================================================
   17. FLOATING DOCK & BACK-TO-TOP
   ========================================================================== */
.fab-stack {
  position: fixed; right: 20px; bottom: 24px; z-index: 70;
  display: flex; flex-direction: column; gap: 10px;
}
.fab {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); box-shadow: var(--sh-md);
  transition: all .22s var(--ease);
}
.fab:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-3px); }
.fab svg { width: 20px; height: 20px; }
.fab--top {
  opacity: 0; visibility: hidden; transform: translateY(10px);
}
.fab--top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.fab--wa { background: var(--ok); border-color: var(--ok); color: #fff; }
.fab--wa:hover { background: #0B7A46; border-color: #0B7A46; }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  background: var(--ink); color: #fff; padding: 12px 20px;
  border-radius: var(--r-sm); font-size: .88rem; box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; transition: all .25s var(--ease); z-index: 120;
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ==========================================================================
   18. UTILITIES
   ========================================================================== */
.bg-ink { background: var(--ink); }
.bg-steel { background: var(--steel); }
.bg-brand { background: var(--brand); }
.bg-surface { background: var(--surface); }
.bg-alt { background: var(--surface); }
.bg-grid { background: var(--bg); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.pt-0 { padding-top: 0 !important; } .pb-0 { padding-bottom: 0 !important; }
.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 34px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 34px; }
.p-0 { padding: 0 !important; }
.full-bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.relative { position: relative; }

/* Decorative blueprint grid band.
   IMPORTANT: this must only add the grid as a background *image*; using the
   `background` shorthand here reset `.section--dark`'s ink background to
   transparent, which made the white heading render on a white page
   (WCAG contrast failure). `background-color` is left to the section. */
.band {
  position: relative; overflow: hidden;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: 0 0;
}
/* Safety net: a band that is not explicitly dark still needs a readable base. */
.band:not(.section--dark) { background-color: var(--ink); color: #CBD5E1; }
.band:not(.section--dark) h2, .band:not(.section--dark) h3 { color: #fff; }

/* ==========================================================================
   19. ANIMATIONS
   ========================================================================== */
/* Reveal is safe by default: content is visible unless JS explicitly "arms"
   it (only elements below the fold). If JavaScript is blocked, fails, or the
   tab is backgrounded mid-animation, nothing can stay permanently hidden. */
.js .reveal.is-armed { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-armed.is-in { opacity: 1; transform: none; }
.js .reveal.is-armed[data-delay="1"] { transition-delay: .08s; }
.js .reveal.is-armed[data-delay="2"] { transition-delay: .16s; }
.js .reveal.is-armed[data-delay="3"] { transition-delay: .24s; }
.js .reveal.is-armed[data-delay="4"] { transition-delay: .32s; }

@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.animate-float { animation: floatY 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .js .reveal.is-armed { opacity: 1; transform: none; }
}

/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .layout, .layout--left { grid-template-columns: minmax(0, 1fr) 290px; gap: 30px; }
  .layout--left { grid-template-columns: 290px minmax(0, 1fr); }
  .pdp { gap: 28px; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__col--contact { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  :root { --header-h: 64px; }
  .topbar__welcome { display: none; }
  .header__inner { flex-wrap: wrap; padding-block: 12px; gap: 14px; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .header__cta { margin-left: auto; }
  .nav__toggle { display: flex; }
  .nav__list {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 86vw);
    background: var(--ink); flex-direction: column; align-items: stretch;
    margin: 0; padding: 76px 0 40px; overflow-y: auto;
    transform: translateX(-100%); transition: transform .3s var(--ease); z-index: 90;
  }
  body.nav-open .nav__list { transform: translateX(0); }
  .nav__list > li > a { height: auto; padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,.07); }
  .nav__caret { position: absolute; right: 18px; top: 14px; }
  .mega {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0 22px 12px; border: 0; box-shadow: none; background: transparent;
    grid-template-columns: 1fr; gap: 14px; display: none;
  }
  .has-dropdown.is-open .mega { display: grid; }
  .mega__col h5 { color: #fff; border-color: rgba(255,255,255,.12); }
  .mega__col li a { color: #93A4B8; }
  .nav__cta { display: none; }
  .layout, .layout--left { grid-template-columns: minmax(0, 1fr); }
  .layout--left .layout__main { grid-column: 1; grid-row: 1; }
  .layout--left .layout__side { grid-column: 1; grid-row: 2; }
  .sidebar { position: static; }
  .pdp { grid-template-columns: minmax(0, 1fr); }
  .pdp__media { position: static; }
  .news-list a { grid-template-columns: 72px minmax(0, 1fr); }
  .news-list__arrow { display: none; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banner-band__inner { flex-wrap: wrap; gap: 16px; }
  .banner-band__caption { flex: 1 1 100%; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .section { padding: 46px 0; }
  .wrap { padding-inline: 18px; }
  .topbar__right .topbar__lang, .topbar__right .topbar__sep:first-of-type { display: none; }
  .brand__text b { font-size: 1.35rem; }
  .header__cta .btn { padding: 9px 14px; font-size: .82rem; }
  .page-hero { padding: 38px 0 42px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .product-card__body { padding: 12px; }
  .product-card__title { font-size: .87rem; min-height: 0; }
  .pager-nav { grid-template-columns: 1fr; }
  .pager-nav .is-next { text-align: left; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer__col--about { grid-column: 1 / -1; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pdp__thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .spec-list > div { grid-template-columns: 110px 1fr; gap: 10px; font-size: .85rem; }
  .dl-list > li { flex-wrap: wrap; }
  .banner-band__caption { flex-direction: column; align-items: flex-start; gap: 12px; }
  .banner-band__controls { align-self: stretch; justify-content: space-between; }
  .fab-stack { right: 14px; bottom: 16px; }
  .fab { width: 44px; height: 44px; }
}

@media print {
  .topbar, .header, .nav, .sidebar, .fab-stack, .footer, .pager-nav { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   RTL (Arabic). Layout mirrored with logical properties; part numbers, phone
   numbers and prices stay LTR via .dir-ltr / [dir="ltr"] islands.
   ========================================================================== */
[dir="rtl"] body { direction: rtl; }
[dir="rtl"] .topbar__inner,
[dir="rtl"] .header__inner,
[dir="rtl"] .nav__inner,
[dir="rtl"] .footer__grid,
[dir="rtl"] .sec-head,
[dir="rtl"] .breadcrumb { flex-direction: row-reverse; }
[dir="rtl"] .topbar__right { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nav__list { padding-right: 0; }
[dir="rtl"] .product-card,
[dir="rtl"] .news-item,
[dir="rtl"] .card { text-align: right; }
[dir="rtl"] .link-arrow svg,
[dir="rtl"] .banner-arrow svg,
[dir="rtl"] .pagination svg { transform: scaleX(-1); }
[dir="rtl"] .dir-ltr, [dir="rtl"] .product-card__pn, [dir="rtl"] a[href^="tel:"], [dir="rtl"] .footer__contact span {
  direction: ltr; unicode-bidi: isolate; display: inline-block;
}
[dir="rtl"] .prose ul, [dir="rtl"] .prose ol { padding-right: 1.2em; padding-left: 0; }