/* ---------------------------------------------------------------------------
   TechPlast components.

   Loaded after fonts.css, tokens.css and motion.css. Nothing here names a colour
   or a duration -- those come from the token layer, which is what lets the theme
   and the whole motion system be retuned without touching this file.
   --------------------------------------------------------------------------- */

/* ============================ Base ====================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* The header is fixed, so an in-page anchor would otherwise land under it. */
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.03em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); margin: 0 0 var(--space-4); }
h2 { font-size: var(--step-4); margin: 0 0 var(--space-4); }
h3 { font-size: var(--step-2); margin: 0 0 var(--space-3); }
p { text-wrap: pretty; }

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur-1) var(--ease-soft);
}

a:hover { color: var(--accent-hover); }
img { max-width: 100%; }

::selection { color: var(--text-on-brand); background: var(--accent); }

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

.skip-link {
  position: fixed;
  inset-inline-start: 1rem;
  top: -6rem;
  z-index: 9999;
  padding: .8rem 1.2rem;
  border-radius: var(--radius-pill);
  color: var(--text-on-brand);
  background: var(--brand);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur-2) var(--ease-spring);
}

.skip-link:focus { top: 1rem; color: var(--text-on-brand); }

/* ============================ Layout ==================================== */
.container { width: min(1240px, calc(100% - 2.5rem)); margin-inline: auto; }
.narrow { max-width: 68ch; }
.section { padding-block: var(--space-9); }
.section-muted { background: var(--surface-sunken); }
.page-hero + .section { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* A hairline that only exists to separate two same-coloured bands. */
.section + .section:not(.section-muted) { border-top: 1px solid var(--border-hair); }

/* ---- Type utilities ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--accent-text);
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* The rule reads as a typographic mark rather than a border because it grows
   into place with the heading it belongs to. */
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  transform-origin: 0 50%;
  transition: transform var(--dur-3) var(--ease-out-expo);
}

[data-reveal] .eyebrow::before,
.eyebrow.is-growing::before { transform: scaleX(0); }
[data-reveal].is-in .eyebrow::before { transform: scaleX(1); }
.eyebrow.on-dark { color: var(--ember-300); }

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

.section-heading h2 { margin: var(--space-3) 0 0; max-width: 20ch; }
.section-heading > a { align-self: flex-end; }

/* A link whose arrow travels on hover. The gap is animated rather than the
   arrow position so nothing is knocked out of the text baseline. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.arrow-link span[aria-hidden] {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition:
    transform var(--dur-2) var(--ease-out-expo),
    background-color var(--dur-2) var(--ease-soft),
    border-color var(--dur-2) var(--ease-soft),
    color var(--dur-2) var(--ease-soft);
}

.arrow-link:hover { color: var(--accent-text); }

.arrow-link:hover span[aria-hidden] {
  color: var(--text-on-brand);
  border-color: var(--accent);
  background: var(--accent);
  transform: translateX(.25rem);
}

[dir="rtl"] .arrow-link span[aria-hidden] { transform: scaleX(-1); }
[dir="rtl"] .arrow-link:hover span[aria-hidden] { transform: scaleX(-1) translateX(.25rem); }

/* ============================ Buttons =================================== */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-line: var(--border-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .78rem 1.5rem;
  overflow: hidden;
  border: 1px solid var(--btn-line);
  border-radius: var(--radius-pill);
  color: var(--btn-fg);
  background: var(--btn-bg);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.3;
  text-decoration: none;
  transition:
    transform var(--dur-2) var(--ease-spring),
    box-shadow var(--dur-2) var(--ease-soft),
    background-color var(--dur-2) var(--ease-soft),
    border-color var(--dur-2) var(--ease-soft),
    color var(--dur-2) var(--ease-soft);
}

.btn:hover, .btn:focus-visible { color: var(--btn-fg); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn[aria-disabled="true"] {
  transform: none;
  box-shadow: none;
  cursor: wait;
}
.btn-lg { padding: .95rem 1.9rem; font-size: var(--step-0); }
.btn-sm { padding: .45rem 1rem; font-size: var(--step--2); }

/* A submitted form owns its controls until navigation completes. This prevents
   a fast double click from creating two quotes, uploads, or destructive admin
   requests, while leaving the focused button in place for keyboard users. */
form.is-submitting :is(button, input[type="submit"], input[type="image"]) {
  pointer-events: none;
}

.button-spinner {
  position: relative;
  z-index: 1;
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: button-spin 650ms linear infinite;
  vertical-align: -.12em;
}

@keyframes button-spin { to { transform: rotate(1turn); } }

/* The wash is a pseudo-element rather than a background-position animation so
   it can be skewed, and so the label stays put while the fill moves under it. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .22) 50%, transparent 80%);
  transform: translateX(-120%) skewX(-18deg);
  transition: transform var(--dur-4) var(--ease-out-expo);
}

.btn:hover::after { transform: translateX(320%) skewX(-18deg); }
.btn > * { position: relative; z-index: 1; }

.btn-brand {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  --btn-line: var(--accent);
  box-shadow: var(--shadow-ember);
}

.btn-brand:hover, .btn-brand:focus-visible {
  --btn-bg: var(--accent-hover);
  --btn-line: var(--accent-hover);
  --btn-fg: #fff;
}

.btn-outline-light {
  --btn-fg: #fff;
  --btn-line: rgba(255, 255, 255, .38);
}

.btn-outline-light:hover, .btn-outline-light:focus-visible {
  --btn-fg: var(--navy-900);
  --btn-bg: #fff;
  --btn-line: #fff;
}

.btn-light {
  --btn-bg: #fff;
  --btn-fg: var(--navy-900);
  --btn-line: #fff;
}

.btn-light:hover, .btn-light:focus-visible { --btn-fg: var(--navy-900); box-shadow: var(--shadow-lg); }

.btn-outline-navy, .btn-outline-secondary {
  --btn-fg: var(--text);
  --btn-line: var(--border-strong);
}

.btn-outline-navy:hover, .btn-outline-navy:focus-visible,
.btn-outline-secondary:hover, .btn-outline-secondary:focus-visible {
  --btn-fg: var(--text-on-brand);
  --btn-bg: var(--brand);
  --btn-line: var(--brand);
}

.btn-primary {
  --btn-bg: var(--brand);
  --btn-fg: var(--text-on-brand);
  --btn-line: var(--brand);
}

.btn-primary:hover, .btn-primary:focus-visible { --btn-bg: var(--brand-hover); --btn-line: var(--brand-hover); }

.btn-danger {
  --btn-bg: var(--danger);
  --btn-fg: #fff;
  --btn-line: var(--danger);
}

.btn-link {
  --btn-line: transparent;
  --btn-fg: var(--accent-text);
  padding-inline: .5rem;
  text-decoration: underline;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-soft);
}

.link-button:hover { color: var(--danger); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--text-muted);
  font-weight: 600;
  text-decoration: none;
  transition: gap var(--dur-2) var(--ease-out-expo), color var(--dur-1) var(--ease-soft);
}

.back-link:hover { gap: .75rem; color: var(--accent-text); }

/* ============================ Header ==================================== */
/* Solid by default. The bar carries white text, so anything less than a dark
   plate behind it is unreadable the moment a page opens on light content -- the
   error page and the two detail pages do exactly that. */
.site-header {
  position: fixed;
  z-index: 100;
  inset-block-start: 0;
  inset-inline: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(11, 20, 29, .95);
  transition:
    transform var(--dur-3) var(--ease-out-expo),
    background-color var(--dur-3) var(--ease-soft),
    border-color var(--dur-3) var(--ease-soft),
    box-shadow var(--dur-3) var(--ease-soft);
}

/* Where the page does open on a dark band, the bar can be part of it until the
   reader moves. :has() is the whole test, and a browser without it simply keeps
   the solid bar above -- the readable outcome, which is the right way round for
   a feature query to fail. */
body:has(> main > .hero-section) .site-header,
body:has(> main > .page-hero) .site-header {
  border-bottom-color: transparent;
  background: transparent;
}

.site-header.is-stuck,
body:has(> main > .hero-section) .site-header.is-stuck,
body:has(> main > .page-hero) .site-header.is-stuck {
  border-bottom-color: rgba(255, 255, 255, .1);
  background: rgba(11, 20, 29, .82);
  box-shadow: 0 10px 30px rgba(7, 13, 19, .28);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header.is-stuck {
    background: rgba(11, 20, 29, .62);
    backdrop-filter: blur(18px) saturate(1.4);
  }
}

.site-header.is-hidden { transform: translateY(-104%); }
body.public-site { padding-top: 0; }

.site-header .navbar { min-height: var(--header-h); padding: .85rem 0; transition: min-height var(--dur-3) var(--ease-soft); }
.site-header.is-stuck .navbar { min-height: 64px; }

.brand { display: inline-flex; align-items: center; padding: 0; }

.brand img {
  display: block;
  width: 128px;
  height: 44px;
  object-fit: contain;
  padding: 5px 11px;
  border-radius: var(--radius-xs);
  background: #fff;
  transition: transform var(--dur-2) var(--ease-spring);
}

.brand:hover img { transform: scale(1.04); }

.site-header .nav-link {
  position: relative;
  color: rgba(255, 255, 255, .8);
  font-size: var(--step--1);
  font-weight: 500;
  padding: .55rem .8rem !important;
  transition: color var(--dur-1) var(--ease-soft);
}

.site-header .nav-link::after {
  content: "";
  position: absolute;
  inset-inline: .8rem;
  bottom: .3rem;
  height: 1.5px;
  background: var(--ember-400);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-2) var(--ease-out-expo);
}

[dir="rtl"] .site-header .nav-link::after { transform-origin: 100% 50%; }
.site-header .nav-link:hover, .site-header .nav-link:focus { color: #fff; }
.site-header .nav-link:hover::after, .site-header .nav-link:focus::after { transform: scaleX(1); }

.site-header .nav-cta {
  margin-inline-start: .35rem;
  padding: .55rem 1.15rem !important;
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--accent);
  font-weight: 600;
  transition: background-color var(--dur-2) var(--ease-soft), transform var(--dur-2) var(--ease-spring);
}

.site-header .nav-cta::after { content: none; }
.site-header .nav-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }

.navbar-toggler {
  border-color: rgba(255, 255, 255, .28);
  border-radius: var(--radius-xs);
}

.nav-icons { display: flex; align-items: center; gap: .3rem; margin-inline-start: .5rem; }
.theme-form, .language-form { margin: 0; }

.theme-button, .language-button {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 .6rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-pill);
  color: #fff;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--dur-2) var(--ease-soft),
    border-color var(--dur-2) var(--ease-soft),
    transform var(--dur-2) var(--ease-spring);
}

.theme-button:hover, .language-button:hover,
.theme-button:focus-visible, .language-button:focus-visible {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .4);
  transform: translateY(-1px);
}

.theme-button svg { width: 17px; height: 17px; }
.theme-button .icon-sun { display: none; }
:root[data-theme="dark"] .theme-button .icon-sun { display: block; }
:root[data-theme="dark"] .theme-button .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-button .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-button .icon-moon { display: none; }
}

.nav-inquiry { position: relative; }

.inquiry-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.3rem;
  height: 1.3rem;
  margin-inline-start: .4rem;
  padding: 0 .35rem;
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--accent);
  font-size: .7rem;
  font-weight: 700;
  animation: pop-in var(--dur-3) var(--ease-spring) both;
}

.nav-signout { display: flex; align-items: center; padding: .5rem .8rem; margin: 0; }
.nav-signout .link-button { color: rgba(255, 255, 255, .8); text-decoration: none; }
.nav-signout .link-button:hover { color: #fff; }

/* ============================ Hero ====================================== */
.hero-section {
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  min-height: min(94vh, 900px);
  padding-top: var(--header-h);
  color: #fff;
  background: var(--navy-900);
  isolation: isolate;
}

/* Two drifting fields of colour rather than one static gradient. They are
   blurred well past their own edges, so what shows through is light rather than
   a shape, and they move on different periods so the loop never announces
   itself. */
.aurora {
  position: absolute;
  z-index: -2;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  pointer-events: none;
}

.aurora.one {
  inset-inline-end: -10%;
  top: -20%;
  width: 60vw;
  height: 60vw;
  max-width: 780px;
  max-height: 780px;
  background: radial-gradient(circle, var(--ember-500), transparent 62%);
  animation: aurora-a 22s var(--ease-soft) infinite;
}

.aurora.two {
  inset-inline-start: -14%;
  bottom: -28%;
  width: 55vw;
  height: 55vw;
  max-width: 720px;
  max-height: 720px;
  background: radial-gradient(circle, var(--navy-500), transparent 64%);
  opacity: .8;
  animation: aurora-b 28s var(--ease-soft) infinite;
}

/* A drafting grid, faint enough to be texture rather than pattern. It anchors
   the drifting colour to something rigid, which is the point: this is a factory. */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 75%);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  padding-block: clamp(4rem, 9vw, 7rem);
}

.hero-copy h1 { margin: var(--space-4) 0 var(--space-5); font-size: var(--step-6); letter-spacing: -.04em; }

/* One clipping box per word, so a word rising into the first line cannot be seen
   travelling across the second. A single box around the whole heading clips only
   at its own edges and lets exactly that happen. */
.hero-word {
  display: inline-block;
  overflow: hidden;
  /* Room for descenders, taken back out of the layout so the leading is unchanged. */
  padding-bottom: .14em;
  margin-bottom: -.14em;
  vertical-align: bottom;
}

.hero-lede { max-width: 54ch; color: #cdd8e2; font-size: var(--step-1); font-weight: 300; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--space-6); }

.hero-panel {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-lg);
  background: rgba(7, 13, 19, .34);
}

@supports (backdrop-filter: blur(1px)) {
  .hero-panel { backdrop-filter: blur(14px); }
}

.hero-panel div {
  display: grid;
  gap: .2rem;
  padding: 1.4rem 1.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  transition: background-color var(--dur-2) var(--ease-soft);
}

.hero-panel div:last-child { border-bottom: 0; }
.hero-panel div:hover { background: rgba(255, 255, 255, .05); }

.hero-panel strong {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.hero-panel span { color: #a8b8c6; font-size: var(--step--1); }

.scroll-cue {
  position: absolute;
  z-index: 1;
  inset-inline-start: 50%;
  bottom: 1.75rem;
  width: 22px;
  height: 36px;
  margin-inline-start: -11px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius-pill);
}

.scroll-cue::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: 7px;
  width: 3px;
  height: 7px;
  margin-inline-start: -1.5px;
  border-radius: var(--radius-pill);
  background: var(--ember-400);
  animation: scroll-cue 2s var(--ease-soft) infinite;
}

/* ---- Marquee ----------------------------------------------------------- */
.marquee {
  overflow: hidden;
  padding-block: 1.1rem;
  border-block: 1px solid var(--border-hair);
  background: var(--surface-raised);
  mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  width: max-content;
  margin: 0;
  /* Clears the edge fade, so the first item is legible when the loop is
     stopped for reduced motion. */
  padding: 0 3.5rem;
  list-style: none;
}

.marquee-track.is-looping { animation: marquee-track 42s linear infinite; }
.marquee:hover .marquee-track.is-looping { animation-play-state: paused; }
[dir="rtl"] .marquee-track.is-looping { animation-direction: reverse; }

.marquee-track li {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  color: var(--text-subtle);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.marquee-track li::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ============================ Cards ===================================== */
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

.category-card {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 360px;
  border-radius: var(--radius-lg);
  color: #fff;
  background: var(--navy-800);
  text-decoration: none;
  isolation: isolate;
}

.category-card img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  transition: transform var(--dur-5) var(--ease-out-expo), filter var(--dur-3) var(--ease-soft);
}

.category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 32%, rgba(7, 13, 19, .88));
  transition: opacity var(--dur-3) var(--ease-soft);
}

.category-card:hover img { transform: scale(1.07); }

.category-card > div {
  position: absolute;
  z-index: 1;
  inset-inline: 1.6rem;
  bottom: 1.4rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  transition: transform var(--dur-3) var(--ease-out-expo);
}

.category-card:hover > div { transform: translateY(-4px); }
.category-card h3 { margin: 0 0 .2rem; font-size: var(--step-2); color: #fff; }
.category-card span { color: #b9c8d5; font-size: var(--step--1); }

.category-card .go {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  transform: scale(.8);
  opacity: 0;
  transition: transform var(--dur-3) var(--ease-spring), opacity var(--dur-2) var(--ease-soft), background-color var(--dur-2) var(--ease-soft);
}

.category-card:hover .go, .category-card:focus-visible .go {
  transform: scale(1);
  opacity: 1;
  background: var(--accent);
}

[dir="rtl"] .category-card .go { transform: scale(.8) scaleX(-1); }
[dir="rtl"] .category-card:hover .go, [dir="rtl"] .category-card:focus-visible .go { transform: scale(1) scaleX(-1); }

/* ---- Product card ---- */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  transition:
    transform var(--dur-3) var(--ease-out-expo),
    box-shadow var(--dur-3) var(--ease-soft),
    border-color var(--dur-2) var(--ease-soft);
}

.product-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}

/* The catalogue photography is shot on a warm seamless sweep that is part of the
   JPEG. The plate behind it is the same temperature, so the photograph reads as
   set into the card rather than pasted onto it. */
.product-image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  margin: .5rem .5rem 0;
  border-radius: var(--radius);
  background: var(--surface-plate);
}

.product-image img {
  width: 100%;
  height: 100%;
  /* Product photography must show the whole item. The inset also leaves enough
     breathing room for the hover scale without clipping a bottle or lid. */
  object-fit: contain;
  padding: clamp(.65rem, 4%, 1rem);
  transition: transform var(--dur-5) var(--ease-out-expo);
}

.product-card:hover .product-image img { transform: scale(1.025); }

/* A single pass of light across the plate on hover. It is behind the product
   photograph, not over it, so it reads as the sweep being lit. */
.product-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}

.product-card:hover .product-image::after { animation: sheen-sweep 900ms var(--ease-out-expo); }

.product-body { display: flex; flex: 1; flex-direction: column; padding: 1.1rem 1.25rem 1.35rem; }

.product-category {
  color: var(--accent-text);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.product-body h3 { margin: .5rem 0 1rem; font-size: var(--step-1); letter-spacing: -.02em; }
.product-body h3 a { color: var(--text); text-decoration: none; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur-3) var(--ease-out-expo), color var(--dur-1) var(--ease-soft); }
.product-card:hover .product-body h3 a { background-size: 100% 1px; }
[dir="rtl"] .product-body h3 a { background-position: 100% 100%; }

.product-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; color: var(--text-muted); font-size: var(--step--2); }
.product-meta span { padding: .28rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-pill); }

/* The works' mould reference. Buyers quote it on orders, so it reads as an
   identifier rather than as another specification. */
.product-meta .product-code {
  border-color: transparent;
  background: var(--surface-sunken);
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: -.02em;
}

.inquiry-add { margin-top: .9rem; }

.btn-inquiry {
  width: 100%;
  padding: .55rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--accent-text);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--dur-2) var(--ease-soft), background-color var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease-soft);
}

.btn-inquiry:hover, .btn-inquiry:focus-visible { color: #fff; border-color: var(--accent); background: var(--accent); }

/* ---- News ---- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.news-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  transition: transform var(--dur-3) var(--ease-out-expo), box-shadow var(--dur-3) var(--ease-soft);
}

.news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.news-card > img { width: 100%; aspect-ratio: 1.6; object-fit: cover; transition: transform var(--dur-5) var(--ease-out-expo); }
.news-card:hover > img { transform: scale(1.04); }
.news-card > div { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; }
.news-card time, .article-page time { color: var(--accent-text); font-size: var(--step--1); font-weight: 600; }
.news-card h2 { margin: .55rem 0; font-size: var(--step-2); }
.news-card h2 a { color: var(--text); text-decoration: none; }
.news-card h2 a:hover { color: var(--accent-text); }
.news-card p { display: -webkit-box; overflow: hidden; margin: 0; -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: var(--text-muted); }

.article-page h1 { margin: .8rem 0 2rem; }
.article-image { width: 100%; max-height: 540px; object-fit: cover; border-radius: var(--radius-lg); }
.article-copy { margin-top: 2rem; font-size: var(--step-1); font-weight: 300; white-space: pre-line; }

/* ============================ Page hero ================================= */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--header-h) + 3.5rem) 3.5rem;
  color: #fff;
  background: var(--navy-900);
  isolation: isolate;
}

.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { margin: .7rem 0 1rem; font-size: var(--step-5); }
.page-hero p { max-width: 62ch; margin: 0; color: #b9c8d5; font-size: var(--step-1); font-weight: 300; }
.page-hero.compact { padding-block: calc(var(--header-h) + 2.75rem) 2.75rem; }

/* ---- Breadcrumb-ish back link on dark ---- */
.page-hero .back-link { color: #a8b8c6; }
.page-hero .back-link:hover { color: #fff; }

/* ============================ Catalogue ================================= */
.filter-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .7rem;
  padding: 0;
  border: 0;
  background: none;
}

.filter-panel .form-control, .filter-panel .form-select {
  min-height: 46px;
  border-radius: var(--radius-pill);
  background-color: var(--surface-raised);
}

.filter-panel > * { flex: 1 1 180px; min-width: 0; }
.filter-panel > .filter-search { flex: 2 1 260px; }
.filter-panel label { display: block; margin-bottom: .3rem; color: var(--text-muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.filter-panel .btn { flex: 0 0 auto; }

.result-summary { margin: var(--space-6) 0 var(--space-5); color: var(--text-muted); font-weight: 500; }
.result-summary strong { color: var(--text); }

.empty-state {
  padding: 5rem 1.5rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  text-align: center;
}

.pagination-wrap { display: flex; justify-content: center; margin-top: var(--space-7); }
.pagination { gap: .35rem; }

.pagination .page-link {
  min-width: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill) !important;
  color: var(--text);
  background: var(--surface-raised);
  font-size: var(--step--1);
  font-weight: 600;
  text-align: center;
  transition: transform var(--dur-2) var(--ease-spring), background-color var(--dur-2) var(--ease-soft), color var(--dur-2) var(--ease-soft);
}

.pagination .page-link:hover { transform: translateY(-2px); color: var(--accent-text); background: var(--surface-raised); }
.pagination .page-item.active .page-link { color: #fff; border-color: var(--brand); background: var(--brand); }
.pagination .page-item.disabled .page-link { color: var(--text-muted); background: transparent; }

/* ============================ Product detail ============================ */
.product-detail { min-height: 60vh; }
.detail-grid, .content-grid, .form-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); gap: clamp(2.5rem, 6vw, 5.5rem); }
.detail-grid { align-items: start; }

.detail-image {
  min-width: 0;
}

.detail-image > img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: clamp(1rem, 4vw, 2rem);
  border-radius: var(--radius-xl);
  background: var(--surface-plate);
}
.detail-grid h1 { margin: 1rem 0; font-size: var(--step-4); }

.spec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: var(--space-6) 0; border-block: 1px solid var(--border); }
.spec-list div { padding: .95rem 0; border-bottom: 1px solid var(--border-hair); }
.spec-list dt { color: var(--text-muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.spec-list dd { margin: .2rem 0 0; font-weight: 600; }

.detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: var(--space-6); }
.detail-inquiry { display: flex; gap: .6rem; margin: 0; }
.detail-inquiry .form-control { width: 7.5rem; }

.detail-gallery { display: flex; flex-wrap: wrap; gap: .6rem; margin: .9rem 0 0; padding: 0; list-style: none; }

.detail-gallery img {
  width: 86px;
  height: 86px;
  object-fit: contain;
  padding: .35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-plate);
  transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-2) var(--ease-soft);
}

.detail-gallery a:hover img { transform: translateY(-3px) scale(1.03); border-color: var(--accent); }

/* ============================ Inquiry list ============================== */
.quote-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.quote-lines { display: grid; gap: .85rem; }

.quote-line {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--border-hair);
  border-radius: var(--radius);
  background: var(--surface-raised);
  transition: box-shadow var(--dur-2) var(--ease-soft);
}

.quote-line:hover { box-shadow: var(--shadow-sm); }
.quote-line-image { display: block; overflow: hidden; width: 104px; height: 104px; border-radius: var(--radius-sm); background: var(--surface-plate); }
.quote-line-image img { width: 100%; height: 100%; object-fit: contain; padding: .4rem; }
.quote-line-body h3 { margin: .35rem 0 .55rem; font-size: var(--step-1); }
.quote-line-body h3 a { color: var(--text); text-decoration: none; }
.quote-line-body h3 a:hover { color: var(--accent-text); }
.quote-line-actions { display: grid; justify-items: end; gap: .5rem; }
.quote-qty-form { display: flex; gap: .4rem; margin: 0; }
.quote-qty-form .form-control { width: 7rem; min-height: 42px; }
.quote-clear { justify-self: start; margin-top: .35rem; }

.quote-receipt {
  display: grid;
  gap: .35rem;
  margin-bottom: var(--space-6);
  padding: 1.6rem;
  border: 1px solid var(--border-hair);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.quote-receipt span { color: var(--text-muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.quote-receipt strong { font-family: var(--font-display); font-size: var(--step-3); letter-spacing: -.03em; }
.quote-items-heading { margin: var(--space-7) 0 1rem; font-size: var(--step-2); }
.quote-delete { margin-top: var(--space-5); }

/* ============================ Orders ==================================== */
.or-place-order { margin-top: 1rem; }
.order-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; }

.order-card {
  display: grid;
  gap: .4rem;
  padding: 1.5rem;
  border: 1px solid var(--border-hair);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--surface-raised);
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out-expo), box-shadow var(--dur-2) var(--ease-soft);
}

.order-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: var(--text); }
.order-card header { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.order-card p { margin: 0; color: var(--text-muted); font-size: var(--step--1); }
.order-card-total strong { color: var(--text); font-size: var(--step-1); }
.order-card time { color: var(--text-muted); font-size: var(--step--2); }

.order-lines { display: grid; gap: .5rem; margin-bottom: var(--space-6); }
.order-line { display: grid; align-items: center; grid-template-columns: 1fr auto auto; gap: 1rem; padding: .95rem 1.1rem; border: 1px solid var(--border-hair); border-radius: var(--radius-sm); background: var(--surface-raised); }
.order-line small { display: block; color: var(--text-muted); font-size: var(--step--2); }
.order-totals { display: grid; grid-template-columns: 1fr auto; gap: .4rem 1.5rem; max-width: 420px; margin: 0 0 1rem; }
.order-totals dd { margin: 0; text-align: end; }
.order-totals .grand { padding-top: .45rem; border-top: 1px solid var(--border); font-size: var(--step-1); font-weight: 700; }

/* ============================ Forms ===================================== */
.fact-panel, .form-card, .contact-details {
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}

.fact-panel dl { margin: 0; }
.fact-panel dt { color: var(--text-muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.fact-panel dd { margin: .15rem 0 1.25rem; font-size: var(--step-1); font-weight: 600; }
.fact-panel dd:last-child { margin-bottom: 0; }

.form-card form, .admin-form { display: grid; gap: 1.15rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-label, .admin-form label { margin: 0 0 .4rem; font-size: var(--step--1); font-weight: 600; }

.form-control, .form-select {
  min-height: 48px;
  padding: .6rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  background-color: var(--surface-raised);
  font-family: var(--font-body);
  font-size: var(--step-0);
  transition: border-color var(--dur-2) var(--ease-soft), box-shadow var(--dur-2) var(--ease-soft), background-color var(--dur-2) var(--ease-soft);
}

.form-control:focus, .form-select:focus {
  color: var(--text);
  border-color: var(--accent);
  background-color: var(--surface-raised);
  box-shadow: 0 0 0 4px var(--accent-wash);
}

.form-control::placeholder { color: var(--text-muted); opacity: 1; }
textarea.form-control { min-height: auto; }
.field-validation-error, .field-error { display: block; margin-top: .3rem; color: var(--danger); font-size: var(--step--1); }
.hp-field { position: absolute !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.form-actions .form-select { width: auto; }
.checkbox-row { display: flex; align-items: center; gap: .55rem; }
.checkbox-row input { accent-color: var(--accent); }

.validation-summary:not(:empty) {
  margin-bottom: 1.3rem;
  padding: 1rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: var(--radius-sm);
  color: var(--danger);
  background: var(--danger-surface);
  animation: fade-up var(--dur-3) var(--ease-out-expo) both;
}

.validation-summary ul { margin: 0; padding-inline-start: 1.1rem; }

.login-card { max-width: 460px; margin: 0 auto; }
.login-card h1 { margin: .5rem 0 1.5rem; font-size: var(--step-3); }

.alert {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  animation: fade-up var(--dur-3) var(--ease-out-expo) both;
}

.alert-success { color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); background: var(--success-surface); }
.alert-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: var(--danger-surface); }

/* ============================ CTA band ================================== */
.cta-section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  color: #fff;
  background: linear-gradient(115deg, var(--ember-600), var(--ember-500) 55%, var(--ember-400));
  isolation: isolate;
}

.cta-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-end: -8%;
  top: -60%;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .3), transparent 62%);
  filter: blur(30px);
  animation: aurora-a 26s var(--ease-soft) infinite;
}

.cta-grid { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.cta-grid h2 { max-width: 22ch; margin: .5rem 0 0; }
.cta-section .eyebrow { color: rgba(255, 255, 255, .82); }

/* ============================ Footer ==================================== */
.site-footer {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 1.5rem;
  color: #a8b8c6;
  background: var(--navy-900);
}

.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }

.footer-brand {
  margin-bottom: .4rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 500;
  letter-spacing: -.04em;
}

.footer-grid h2 { margin-bottom: .5rem; color: #fff; font-family: var(--font-body); font-size: var(--step--2); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

.footer-grid a {
  position: relative;
  color: #a8b8c6;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-soft), padding-inline-start var(--dur-2) var(--ease-out-expo);
}

.footer-grid a:hover { color: #fff; padding-inline-start: .4rem; }
.footer-bottom { margin-top: 3rem; padding-top: 1.3rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: var(--step--1); }

/* ============================ Admin ===================================== */
.admin-site { min-height: 100vh; background: var(--surface-sunken); }

.admin-header {
  position: fixed;
  z-index: 50;
  inset-block: 0;
  inset-inline-start: 0;
  display: flex;
  width: 252px;
  flex-direction: column;
  padding: 1.5rem 1rem;
  color: #fff;
  background: var(--navy-900);
}

.admin-brand { margin-bottom: 2rem; color: #fff; font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -.03em; text-decoration: none; }
.admin-brand span { display: block; color: var(--ember-300); font-family: var(--font-body); font-size: var(--step--2); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.admin-header nav { display: flex; flex: 1; flex-direction: column; gap: .15rem; overflow-y: auto; }

.admin-header nav > a, .admin-header nav button {
  display: block;
  width: 100%;
  padding: .62rem .85rem;
  border: 0;
  border-radius: var(--radius-xs);
  color: #b9c8d5;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  text-align: start;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-soft), background-color var(--dur-1) var(--ease-soft), padding-inline-start var(--dur-2) var(--ease-out-expo);
}

.admin-header nav > a:hover, .admin-header nav button:hover { color: #fff; background: rgba(255, 255, 255, .08); padding-inline-start: 1.1rem; }
.admin-header nav form { margin-top: auto; }
.admin-menu { display: none; }
.admin-main { margin-inline-start: 252px; padding: clamp(1.5rem, 4vw, 3rem); }
.admin-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: var(--space-6); }
.admin-page-heading h1 { margin: 0; font-size: var(--step-3); }
.admin-lead { max-width: 62ch; margin: -1rem 0 1.6rem; color: var(--text-muted); }
.admin-cards { display: grid; gap: 1.5rem; max-width: 1100px; }
.admin-card, .admin-form, .admin-detail { border: 1px solid var(--border-hair); border-radius: var(--radius); background: var(--surface-raised); }
.admin-card { padding: clamp(1.25rem, 3vw, 2rem); }
.admin-card > h2 { margin: 0 0 .35rem; font-size: var(--step-2); }
.admin-card > .form-help { margin-bottom: 1.2rem; }
.admin-card .admin-form { max-width: none; padding: 0; border: 0; background: none; }
.admin-form, .admin-detail { max-width: 980px; padding: 2rem; }
.admin-form fieldset { display: grid; gap: 1rem; padding: 0 0 2rem; border: 0; border-bottom: 1px solid var(--border-hair); }
.admin-form legend { margin-bottom: 1rem; font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; }
.admin-detail dl { display: grid; grid-template-columns: 160px 1fr; gap: .7rem 1.5rem; }
.admin-detail dt { color: var(--text-muted); }
.form-help { margin: 0 0 .3rem; color: var(--text-muted); font-size: var(--step--1); }
.form-preview { width: 150px; height: 150px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-plate); }
.admin-site .text-muted { color: var(--text-muted) !important; }

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

.stat-grid a {
  display: grid;
  padding: 1.7rem;
  border: 1px solid var(--border-hair);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--surface-raised);
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out-expo), box-shadow var(--dur-2) var(--ease-soft);
}

.stat-grid a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.stat-grid strong { font-family: var(--font-display); font-size: var(--step-4); font-weight: 500; letter-spacing: -.03em; }
.stat-grid span { color: var(--text-muted); font-size: var(--step--1); }

.admin-filter { display: flex; flex-wrap: wrap; max-width: 860px; gap: .6rem; margin-bottom: 1.2rem; }
.admin-filter > * { flex: 1 1 150px; min-width: 0; }
.admin-filter .btn { flex: 0 0 auto; white-space: nowrap; }

.admin-table-wrap { overflow-x: auto; border: 1px solid var(--border-hair); border-radius: var(--radius); background: var(--surface-raised); }

/* Bootstrap paints tables from its own light-mode literals, so the variables are
   pointed at the tokens or every table is a white slab in dark mode. */
.admin-table {
  min-width: 700px;
  margin: 0;
  vertical-align: middle;
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border-hair);
  --bs-table-hover-bg: var(--surface-sunken);
  --bs-table-hover-color: var(--text);
}

.admin-table th { padding: .9rem 1.1rem; color: var(--text-muted); background: var(--surface-sunken); font-size: var(--step--2); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.admin-table td { padding: .9rem 1.1rem; }
.admin-table td > small { display: block; color: var(--text-muted); }
.admin-table a { color: var(--accent-text); }
.admin-table img { width: 54px; height: 54px; object-fit: cover; border-radius: var(--radius-xs); background: var(--surface-plate); }

/* A flex td is taken out of the table layout entirely; alignment does the job. */
.table-actions { text-align: end; white-space: nowrap; }
.table-actions > * + * { margin-inline-start: .45rem; }

.status-pill { display: inline-flex; padding: .28rem .65rem; border-radius: var(--radius-pill); color: var(--text-muted); background: var(--surface-sunken); font-size: var(--step--2); font-weight: 600; }
.status-pill.live { color: var(--success); background: var(--success-surface); }
.status-pill.draft { color: var(--warning); background: var(--warning-surface); }
.status-pill.machine-running { color: var(--success); background: var(--success-surface); }
.status-pill.machine-idle { color: var(--info); background: var(--info-surface); }
.status-pill.machine-maintenance { color: var(--warning); background: var(--warning-surface); }
.status-pill.machine-fault { color: var(--danger); background: var(--danger-surface); }
.status-pill.order-pending { color: var(--warning); background: var(--warning-surface); }
.status-pill.order-confirmed, .status-pill.order-inproduction { color: var(--info); background: var(--info-surface); }
.status-pill.order-ready, .status-pill.order-delivered { color: var(--success); background: var(--success-surface); }
.status-pill.order-cancelled { color: var(--danger); background: var(--danger-surface); }

.message-list { display: grid; gap: 1rem; }
.message-card { padding: 1.5rem; border: 1px solid var(--border-hair); border-inline-start: 4px solid var(--accent); border-radius: var(--radius-sm); background: var(--surface-raised); box-shadow: var(--shadow-xs); }
.message-card.reviewed { border-inline-start-color: var(--border-strong); opacity: .8; }
.message-card header { display: flex; justify-content: space-between; gap: 1rem; }
.message-card header div { display: grid; }
.message-card header span, .message-card time { color: var(--text-muted); font-size: var(--step--1); }
.pre-line { white-space: pre-line; }

.user-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1.5rem; }
.role-pill { display: inline-flex; padding: .28rem .65rem; border-radius: var(--radius-pill); color: var(--text-muted); background: var(--surface-sunken); font-size: var(--step--2); font-weight: 600; }
.role-pill + .role-pill { margin-inline-start: .3rem; }
.role-pill.internal { color: var(--info); background: var(--info-surface); }
.source-pill { display: inline-flex; padding: .12rem .5rem; border-radius: var(--radius-pill); color: var(--text-muted); background: var(--surface-sunken); font-size: .7rem; font-weight: 600; }
.source-pill.direct { color: var(--accent-text); background: var(--warning-surface); }
.account-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: .8rem; }

/* The permission grid is the densest thing in the admin area -- 24 checkboxes --
   so it is grouped exactly as the catalogue orders them rather than run as one
   long list. */
.permission-bulk { display: flex; gap: 1rem; margin-bottom: .8rem; }
.permission-groups { display: grid; align-items: start; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.permission-picker .permission-group { display: block; min-width: 0; padding: 1rem 1.1rem 1.2rem; border: 1px solid var(--border-hair); border-radius: var(--radius-sm); background: var(--surface); }
.permission-picker .permission-group legend { float: none; width: auto; margin: 0 0 .5rem; padding: 0; color: var(--text-muted); font-family: var(--font-body); font-size: var(--step--2); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.permission-picker .permission-item { display: flex; align-items: flex-start; gap: .55rem; margin: 0; padding: .32rem 0; font-size: var(--step--1); font-weight: 400; line-height: 1.4; cursor: pointer; }
.permission-picker .permission-item input { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .18rem; accent-color: var(--accent); }
.permission-picker .permission-item small { display: block; color: var(--text-muted); font-size: .74rem; }
.permission-picker .permission-item.is-locked { color: var(--text-muted); cursor: default; }
.permission-summary, .permission-summary ul { margin: 0; padding: 0; list-style: none; }
.permission-summary { display: grid; align-items: start; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.permission-summary h3 { margin: 0 0 .4rem; color: var(--text-muted); font-family: var(--font-body); font-size: var(--step--2); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.permission-summary li li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .2rem 0; font-size: var(--step--1); }

/* ---- Operations. The charts are built from sized elements: a CDN script is
   refused by the content security policy, and rendering them server-side means
   they carry the theme, the language and the reading direction with the page. */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kpi { display: grid; gap: .2rem; padding: 1.35rem 1.5rem; border: 1px solid var(--border-hair); border-radius: var(--radius); background: var(--surface-raised); }
.kpi > span { color: var(--text-muted); font-size: var(--step--2); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.kpi > strong { font-family: var(--font-display); font-size: var(--step-4); font-weight: 500; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi > strong.kpi-small { font-size: var(--step-2); }
.kpi > small { color: var(--text-muted); font-size: var(--step--1); }
.kpi.danger { border-color: var(--danger); }
.kpi.danger > strong { color: var(--danger); }
.kpi-inline { margin: 0 0 .3rem; font-family: var(--font-display); font-size: var(--step-3); font-weight: 500; }
.trend.up { color: var(--success); }
.trend.down { color: var(--danger); }

.status-strip { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.status-strip a, .status-strip span { display: flex; align-items: baseline; gap: .4rem; padding: .5rem 1rem; border: 1px solid var(--border-hair); border-radius: var(--radius-pill); color: var(--text); background: var(--surface-raised); font-size: var(--step--1); text-decoration: none; transition: transform var(--dur-2) var(--ease-spring), border-color var(--dur-2) var(--ease-soft); }
.status-strip strong { font-weight: 700; }
.status-strip a:hover { transform: translateY(-2px); border-color: var(--accent); }

.operations-layout { max-width: none; }

.chart { display: flex; align-items: flex-end; gap: clamp(3px, 1%, 12px); height: 210px; margin: 0; padding: 0; list-style: none; }
.chart > li { display: flex; flex: 1; min-width: 0; flex-direction: column; justify-content: flex-end; height: 100%; }
.chart-column { display: flex; flex: 1; align-items: flex-end; justify-content: center; }

/* The bar grows from its own baseline as the chart scrolls in. transform-origin
   does the work, so no layout runs during the animation. */
.chart-bar {
  position: relative;
  width: 100%;
  max-width: 54px;
  min-height: 2px;
  margin-inline: auto;
  border-radius: 5px 5px 0 0;
  background: var(--chart-bar);
  transform-origin: 50% 100%;
}

html.js [data-reveal].is-in .chart-bar,
html.js .chart-bar { animation: bar-grow var(--dur-4) var(--ease-out-expo) both; }

@keyframes bar-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.chart-reject { position: absolute; inset-block-end: 0; inset-inline: 0; border-radius: 0 0 4px 4px; background: var(--danger); }
.chart-label { padding-top: .45rem; color: var(--text-muted); font-size: .68rem; text-align: center; white-space: nowrap; }
.chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: .9rem 0 0; color: var(--text-muted); font-size: var(--step--1); }
.chart-key { display: inline-block; width: .75rem; height: .75rem; border-radius: 3px; }
.chart-key.good { background: var(--chart-bar); }
.chart-key.reject { background: var(--danger); }
.chart-empty { padding: 3rem 0; text-align: center; }

.machine-bars { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.machine-bars li { display: grid; align-items: center; grid-template-columns: minmax(90px, 25%) 1fr auto; gap: .8rem; }
.machine-bars a { color: var(--text); font-weight: 600; text-decoration: none; }
.machine-bars a small { display: block; color: var(--text-muted); font-weight: 400; font-size: .74rem; }
.machine-bar { height: 10px; border-radius: var(--radius-pill); background: var(--chart-track); overflow: hidden; }
.machine-bar > span { display: block; height: 100%; min-width: 3px; border-radius: var(--radius-pill); background: var(--chart-bar); transform-origin: 0 50%; animation: bar-slide var(--dur-5) var(--ease-out-expo) both; }
[dir="rtl"] .machine-bar > span { transform-origin: 100% 50%; }

@keyframes bar-slide {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.alert-list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.alert-list.standalone { margin-top: 1.5rem; }
.alert-list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .95rem 1.1rem; border: 1px solid var(--border-hair); border-inline-start: 4px solid var(--info); border-radius: var(--radius-sm); background: var(--surface-raised); }
.alert-list li.severity-warning { border-inline-start-color: var(--warning); }
.alert-list li.severity-critical { border-inline-start-color: var(--danger); }
.alert-list small { display: block; color: var(--text-muted); font-size: var(--step--2); }
.alert-list p { margin: .5rem 0 0; color: var(--text-muted); font-size: var(--step--1); }
.alert-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.price-rows { display: grid; gap: .7rem; }
.price-row { display: grid; align-items: center; grid-template-columns: 1fr 160px; gap: 1rem; margin: 0; }
.price-row > span { font-weight: 500; }
.price-row small { color: var(--text-muted); font-weight: 400; }
.bar-name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.bar-name small { display: block; color: var(--text-muted); font-weight: 400; font-size: .74rem; }

.gallery-card { max-width: 980px; margin-top: 1.5rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin: 1rem 0; padding: 0; list-style: none; }
.gallery-grid li { display: grid; gap: .5rem; padding: .6rem; border: 1px solid var(--border-hair); border-radius: var(--radius-sm); background: var(--surface); }
.gallery-grid li.is-primary { border-color: var(--success); }
.gallery-grid img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: .45rem; border-radius: var(--radius-xs); background: var(--surface-plate); }
.gallery-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; }

.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.spec-grid { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.5rem; margin: 0; }
.spec-grid dt { color: var(--text-muted); }
.spec-grid dd { margin: 0; }
.danger-form { margin-top: 1.5rem; }

/* ============================ Arabic ====================================
   The small-caps treatment on eyebrows, labels and table headers is built for
   Latin. Arabic has no uppercase, and tracking pulls apart letters that are
   meant to join, which is exactly why those captions read as broken. Arabic also
   carries a smaller apparent x-height at the same point size, so the labels need
   a little more of it. */
[dir="rtl"] body { font-family: var(--font-arabic); line-height: 1.9; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { font-family: var(--font-arabic); font-weight: 700; line-height: 1.4; letter-spacing: normal; }
[dir="rtl"] .footer-brand, [dir="rtl"] .admin-brand, [dir="rtl"] .marquee-track li,
[dir="rtl"] .hero-panel strong, [dir="rtl"] .kpi > strong, [dir="rtl"] .stat-grid strong,
[dir="rtl"] .quote-receipt strong, [dir="rtl"] .kpi-inline { font-family: var(--font-arabic); letter-spacing: normal; }

[dir="rtl"] .eyebrow,
[dir="rtl"] .product-category,
[dir="rtl"] .admin-table th,
[dir="rtl"] .fact-panel dt,
[dir="rtl"] .spec-list dt,
[dir="rtl"] .stat-grid span,
[dir="rtl"] .filter-panel label,
[dir="rtl"] .quote-receipt span,
[dir="rtl"] .footer-grid h2,
[dir="rtl"] .kpi > span,
[dir="rtl"] .permission-picker .permission-group legend,
[dir="rtl"] .permission-summary h3,
[dir="rtl"] .admin-brand span { letter-spacing: normal; text-transform: none; }

[dir="rtl"] .eyebrow { font-size: var(--step--1); }
[dir="rtl"] .product-category { font-size: var(--step--1); }
[dir="rtl"] .admin-table th { font-size: var(--step--1); }
[dir="rtl"] .fact-panel dt, [dir="rtl"] .spec-list dt { font-size: var(--step--1); }
[dir="rtl"] .hero-section::before { transform: scaleX(-1); }
[dir="rtl"] .back-link > span[aria-hidden="true"] { display: inline-block; transform: scaleX(-1); }

/* ============================ Responsive ================================ */
@media (max-width: 1199.98px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .site-header .navbar-collapse {
    margin-top: .75rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius);
    background: rgba(7, 13, 19, .96);
  }

  .site-header .nav-link::after { content: none; }
  .nav-cta { display: inline-block; margin: .5rem 0 0; }
  .nav-icons { margin: .75rem 0 0; }
  .hero-grid, .content-grid, .form-layout, .detail-grid, .quote-layout { grid-template-columns: 1fr; }
  .hero-section { min-height: auto; }
  .hero-panel { grid-template-columns: repeat(3, 1fr); }
  .hero-panel div { border-bottom: 0; border-inline-end: 1px solid rgba(255, 255, 255, .12); }
  .hero-panel div:last-child { border-inline-end: 0; }
  .scroll-cue { display: none; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }

  .admin-header { position: relative; width: auto; inset: auto; flex-direction: row; align-items: center; padding: 1rem; }
  .admin-brand { margin: 0; }
  .admin-menu { display: block; margin-inline-start: auto; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--radius-xs); color: #fff; background: transparent; }
  .admin-header nav { position: absolute; top: 100%; inset-inline: 0; display: none; padding: 1rem; background: var(--navy-900); }
  .admin-header nav.open { display: flex; }
  .admin-main { margin: 0; }
}

@media (max-width: 767.98px) {
  .container { width: calc(100% - 2rem); }
  .section { padding-block: 3.5rem; }
  .hero-grid { padding-block: 3.5rem; gap: 2.5rem; }
  .hero-panel { grid-template-columns: 1fr; }
  .hero-panel div { border-inline-end: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .hero-panel div:last-child { border-bottom: 0; }
  .hero-actions .btn { flex: 1 1 auto; }
  .category-grid, .product-grid, .news-grid, .footer-grid, .form-grid, .stat-grid { grid-template-columns: 1fr; }
  .category-card, .category-card img { min-height: 280px; height: 280px; }
  .quote-line { grid-template-columns: 76px minmax(0, 1fr); }
  .quote-line-image, .quote-line-image img { width: 76px; height: 76px; }
  .quote-line-actions { grid-column: 1 / -1; justify-items: stretch; }
  .quote-qty-form .form-control { width: 100%; }
  .detail-inquiry { width: 100%; }
  .detail-inquiry .form-control { width: 6rem; }
  .filter-panel > * { flex: 1 1 100%; }
  .cta-grid, .section-heading, .message-card header { align-items: flex-start; flex-direction: column; }
  .section-heading > a { align-self: flex-start; }
  .spec-list { grid-template-columns: 1fr; }
  .admin-main { padding: 1.25rem; }
  .admin-page-heading { align-items: flex-start; flex-direction: column; }
  .admin-detail dl { grid-template-columns: 1fr; }
  .order-line { grid-template-columns: 1fr; gap: .35rem; }
}

@media (max-width: 640px) {
  .chart { height: 160px; }
  .machine-bars li { grid-template-columns: 1fr; gap: .25rem; }
  .alert-list li { flex-direction: column; }
  .price-row { grid-template-columns: 1fr; gap: .3rem; }
}

/* Pages that open straight into content rather than a dark hero band still have
   to clear the fixed header. */
main > :first-child:not(.hero-section):not(.page-hero) { padding-top: calc(var(--header-h) + 2rem); }

/* ---- Corrections found by rendering the pages ---- */

/* The eyebrow's default is the light-mode accent, which is a dark orange. On the
   near-black hero bands that is barely a colour at all; inside one it takes the
   light end of the ramp instead. Scoped to the band rather than set per view, so
   a new page cannot forget it. */
.hero-section .eyebrow, .page-hero .eyebrow { color: var(--ember-300); }

/* The error page runs its heading the full width of the container, where the
   display step meant for a hero becomes a wall. */
.empty-state h1 { margin-inline: auto; max-width: 20ch; font-size: var(--step-3); }
.empty-state h2 { font-size: var(--step-2); }

/* A square field between two pill buttons reads as a mistake. */
.detail-inquiry .form-control, .quote-qty-form .form-control { border-radius: var(--radius-pill); text-align: center; }

/* Bootstrap's check control keeps its own blue; the accent is the site's. */
.form-check-input { border-color: var(--border-strong); background-color: var(--surface-raised); }
.form-check-input:checked { border-color: var(--accent); background-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
.form-check-label { margin-inline-start: .2rem; }

/* A file input renders its own button plus the file name, which does not fit a
   half-width cell -- Chrome truncates the name to "N...en". Given the row to
   itself it fits. Browsers without :has() keep the old cramped cell rather than
   breaking, which is the right way for this to fail. */
.form-grid > div:has(input[type="file"]) { grid-column: 1 / -1; }
input[type="file"].form-control { padding: .55rem .75rem; }

/* The admin page ground and the old table-header fill were the same token, so
   the header row read as page rather than as part of the card below it. A rule
   under the header does the separating instead of a block of colour. */
.admin-table th {
  background: transparent;
  border-bottom: 1px solid var(--border);
}

.admin-table-wrap { overflow: hidden auto; }
.admin-table-wrap:has(.admin-table) { overflow-x: auto; }

/* The first control in a filter row is the search box, and 150px of basis
   truncates its placeholder to "Username / Full name / I". */
.admin-filter > *:first-child, .filter-panel > .filter-search { flex: 2 1 250px; }

/* In dark mode the sidebar and the page ground are within a few points of each
   other and the boundary between them disappears. A hairline restores it without
   touching the light theme, where the dark-on-bone contrast already does it. */
.admin-header { border-inline-end: 1px solid rgba(255, 255, 255, .07); }

/* The delete control in a row is a POST form, and a form is a block, so it broke
   to its own line under the edit link in every admin table. */
.table-actions form { display: inline-block; margin: 0; }

/* ============================ People and money ==========================
   Screens added with attendance, moulds, and the ledger. Same tokens, same
   shapes; nothing here introduces a colour or a radius of its own. */

/* The sidebar passed twenty destinations and became something to search rather
   than read, so it is grouped. The label is a caption, not a target. */
.nav-group {
  display: block;
  margin: 1.1rem .85rem .3rem;
  color: rgba(255, 255, 255, .45);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

[dir="rtl"] .nav-group { letter-spacing: normal; text-transform: none; }

/* Clocking on. The one control on an employee's own page, so it is the size of
   a decision rather than a row in a table. */
.clock-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.clock-card.on { border-inline-start: 4px solid var(--success); }
.clock-card.off { border-inline-start: 4px solid var(--border-strong); }
.clock-card > div { display: grid; gap: .2rem; }
.clock-card strong { font-family: var(--font-display); font-size: var(--step-3); font-weight: 500; letter-spacing: -.03em; }
.clock-card strong small { color: var(--text-muted); font-family: var(--font-body); font-size: var(--step--1); font-weight: 400; letter-spacing: 0; }
.clock-card p { margin: 0; color: var(--text-muted); font-size: var(--step--1); }
.clock-card form { margin: 0; }

.kicker {
  color: var(--text-muted);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

[dir="rtl"] .kicker { letter-spacing: normal; text-transform: none; font-size: var(--step--1); }

/* Moulds are photographed objects, so they are shown as cards rather than rows:
   a picture of the cavity settles an argument a table of numbers cannot. */
.mould-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem; }

.mould-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--text);
  text-decoration: none;
  transition: transform var(--dur-3) var(--ease-out-expo), box-shadow var(--dur-3) var(--ease-soft);
}

.mould-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: var(--text); }

.mould-photo {
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin: .5rem .5rem 0;
  border-radius: var(--radius);
  background: var(--surface-plate);
}

.mould-photo img { width: 100%; height: 100%; object-fit: cover; }

/* A mould with no photograph yet gets its code, so the card is still identifiable. */
.mould-photo-empty {
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 500;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.mould-body { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem 1.15rem; }
.mould-body h3 { margin: 0; font-size: var(--step-1); }
.mould-status { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; }

.status-pill.mould-good { color: var(--success); background: var(--success-surface); }
.status-pill.mould-needsservice { color: var(--warning); background: var(--warning-surface); }
.status-pill.mould-inrepair { color: var(--danger); background: var(--danger-surface); }
.status-pill.mould-retired { color: var(--text-muted); background: var(--surface-sunken); }

.status-pill.invoice-draft { color: var(--text-muted); background: var(--surface-sunken); }
.status-pill.invoice-issued { color: var(--info); background: var(--info-surface); }
.status-pill.invoice-partlypaid { color: var(--warning); background: var(--warning-surface); }
.status-pill.invoice-paid { color: var(--success); background: var(--success-surface); }
.status-pill.invoice-void { color: var(--danger); background: var(--danger-surface); }

.status-pill.payroll-draft { color: var(--text-muted); background: var(--surface-sunken); }
.status-pill.payroll-approved { color: var(--info); background: var(--info-surface); }
.status-pill.payroll-paid { color: var(--success); background: var(--success-surface); }

/* A journal entry is one balanced thing, so it is drawn as one block rather than
   as rows in a table where the two halves could be read apart. */
.journal-list { display: grid; gap: 1rem; }

.journal-entry {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--border-hair);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.journal-entry.is-reversed { border-inline-start-color: var(--border-strong); opacity: .72; }
.journal-entry header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.journal-entry header small { display: block; color: var(--text-muted); font-size: var(--step--2); }
.journal-entry .journal-actions { display: flex; align-items: center; gap: .6rem; }
.journal-entry table { margin: 0; }
.journal-entry .admin-table td { padding: .4rem .6rem; border-color: transparent; }
.journal-entry .admin-table small { display: block; color: var(--text-muted); font-size: var(--step--2); }

.report-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.report-columns h3 { margin: 0 0 .8rem; font-size: var(--step-1); }
.price-row.total { padding-top: .5rem; border-top: 1px solid var(--border); font-weight: 700; }

/* The picker that attaches an orphaned enrolment number to a person. */
.link-device { display: flex; gap: .4rem; margin: 0; }
.link-device .form-select { min-width: 11rem; }

@media (max-width: 767.98px) {
  .clock-card { align-items: stretch; flex-direction: column; }
  .clock-card form, .clock-card .btn { width: 100%; }
  .link-device { flex-direction: column; }
}