*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 100%;          /* respect the user's browser text-size setting (was a fixed 16px) */
  -webkit-text-size-adjust: 100%;
}

::placeholder { color: var(--color-text-muted); opacity: 1; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Author `display` on a class beats the UA's [hidden]{display:none}. This
   project already shipped that bug class three times (build-log 2026-09-05);
   one global guard makes `hidden` always win. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

h1, h2, h3, h4 { letter-spacing: -0.015em; line-height: 1.2; color: var(--color-navy); }
/* No stranded last words: "…supply, from / Chennai". */
h1, h2, h3, .page-hero__lead, .section-head p { text-wrap: balance; }
p, dd, li { text-wrap: pretty; }

/* Tabular figures for MPN / SKU / quantities so columns of part numbers
   align — the replacement for the old monospace rule. */
.tnum { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.on-navy :focus-visible,
.site-footer :focus-visible { outline-color: var(--color-electric-light); }

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

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: 300;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top 0.2s var(--ease-standard);
}
.skip-link:focus { top: var(--space-3); }

/* ============ Buttons — one system for every page ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding-inline: var(--space-5);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.18s var(--ease-standard), color 0.18s var(--ease-standard),
              border-color 0.18s var(--ease-standard), box-shadow 0.18s var(--ease-standard),
              transform 0.18s var(--ease-standard);
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-md); }
.btn--outline { background: transparent; color: var(--color-navy); border-color: var(--color-border-strong); }
.btn--outline:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-tint); }
.btn--light { background: #fff; color: var(--color-navy); }
.btn--light:hover { background: var(--color-primary-tint); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }
.btn--lg { height: 52px; padding-inline: var(--space-6); font-size: 1rem; }
.btn--sm { height: 36px; padding-inline: var(--space-4); font-size: 0.8125rem; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

.text-link { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { color: var(--color-primary-hover); }

/* .section / .section-head — generic section container + heading row,
   loaded sitewide so every page (PDP related items, brands, industries…)
   can use them without remembering a page-specific stylesheet. */
.section {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
  padding-block: var(--space-10);
}
.section--tint {
  max-width: none;
  background: var(--color-section-tint);
}
.section--tint > .section__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
/* The band is full-bleed and its inner wrapper already pads; `.section` also
   padded, so tinted sections sat ~24px further in than white ones (polish pass). */
.section.section--tint { padding-inline: 0; }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.section-head h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
}
.section-head__eyebrow {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.section-head p { color: var(--color-text-muted); max-width: 60ch; margin-top: var(--space-2); }
.section-head__view-all {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}
.section-head__view-all:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Breadcrumb + not-found message — shared across PLP, PDP and interior pages. */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.breadcrumb a:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current] { color: var(--color-text); font-weight: 600; }
/* On phones a deep trail wrapped to two lines with a dangling "/": keep only the
   last three nodes (parent / current). */
@media (max-width: 640px) { .breadcrumb > :nth-last-child(n+4) { display: none; } }

/* Category chips: About page, and the empty-search state in the catalog. */
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-list a, .chip-list span {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  background: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-navy);
}
.chip-list a:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-tint); }

.not-found-message {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-10) var(--space-5);
  text-align: center;
}

/* Native <dialog> reset — every modal/drawer in this project uses <dialog>,
   per this project's CLAUDE.md non-negotiable. */
dialog {
  border: none;
  padding: 0;
  margin: 0;
  max-width: none;
  max-height: none;
  background: transparent;
  color: inherit;
}
dialog::backdrop {
  background: rgba(7, 20, 51, 0.55);
  backdrop-filter: blur(2px);
}

/* Above-the-fold entrance ([data-load], the homepage hero) is a CSS animation,
   NOT a GSAP tween. It used to be `.js [data-load]{visibility:hidden}` +
   GSAP, which is the house pattern — but that made first paint (and so LCP)
   wait for the whole un-bundled GSAP module graph to download and run: a
   mobile trace at 4× CPU / Fast 4G measured LCP 3.0 s (render delay 2.4 s),
   versus 1.3 s when the hero painted before JS (which is what flashed).
   With `backwards` fill the element sits at the `from` keyframe (opacity 0)
   from the very first frame, so there is no flash, and it needs no JS at
   all — it also still appears if a script fails. `backwards` (not `both`) on
   purpose: a persisted end-state would override the tiles' :hover transform.
   Below-the-fold reveals stay on GSAP/ScrollTrigger and keep their own guard
   below; that guard is set by the synchronous inline <script> first in <head>
   (assets/partials/head-meta.php), per CLAUDE.md. */
[data-load] { animation: load-in 0.55s var(--ease-out) backwards; }
@keyframes load-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* Below-the-fold ScrollTrigger.batch reveals use a separate attribute with
   its own guard — CLAUDE.md is explicit that [data-load]'s rule only
   protects elements carrying that one attribute, and a new attribute
   introduced without a matching rule is exactly the Asam & Co. Perfumers
   bug (elements sat fully visible until GSAP's onEnter fired and snapped
   them hidden before fading back in). */
.js [data-reveal] { visibility: hidden; }

/* Touch screens: bring the small controls up to 44px. WCAG 2.5.8 (24px) is
   already met; 44px is the comfortable size on a phone (audit, 2026-09-21).
   Prefixed with `body` for specificity, because most of these are sized in
   stylesheets that load AFTER this one. Nothing here changes desktop. */
@media (pointer: coarse) {
  body .btn { min-height: 44px; }
  body .btn--sm { height: 44px; }
  body .qty button { width: 44px; height: 44px; }
  body .qty input { height: 44px; }
  body .drawer-dialog__close { width: 44px; height: 44px; }
  body .hero-carousel__pause { width: 44px; height: 44px; }
  body .hero-carousel__dot { width: 44px; height: 44px; }
  body .mobile-nav-trigger,
  body .mega-menu-trigger { height: 44px; }
  body .plp-toolbar__sort,
  body .plp-view-btn { height: 44px; }
  body .plp-view-btn { width: 44px; }
  body .product-card__datasheet { flex-basis: 44px; width: 44px; }
  body .filter-checkbox { padding-block: 10px; }
  body .site-footer__col a { display: inline-block; padding-block: 8px; }
  body .breadcrumb a { padding-block: 10px; margin-block: -10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}