/* ═══════════════════════════════════════════════════════════════════════════
   SVEI — Components
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.sv-btn {
  --btn-bg: var(--sv-red);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sv-2);
  padding: 0.85rem 1.6rem;
  font-size: var(--sv-fs-sm);
  font-weight: var(--sv-fw-semibold);
  letter-spacing: .01em;
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--sv-r-sm);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--sv-t-fast) var(--sv-ease),
              box-shadow var(--sv-t) var(--sv-ease),
              background var(--sv-t-fast) var(--sv-ease),
              color var(--sv-t-fast) var(--sv-ease);
  white-space: nowrap;
}
.sv-btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--sv-shadow); }
.sv-btn:active { transform: translateY(0); }
.sv-btn:disabled, .sv-btn.is-loading { opacity: .6; pointer-events: none; }

.sv-btn--primary   { --btn-bg: var(--sv-red); --btn-bd: var(--sv-red); }
.sv-btn--primary:hover { --btn-bg: var(--sv-red-dark); --btn-bd: var(--sv-red-dark); }

.sv-btn--tech      { --btn-bg: var(--sv-cyan-deep); --btn-bd: var(--sv-cyan-deep); }
.sv-btn--tech:hover{ box-shadow: var(--sv-glow-cyan); }

.sv-btn--dark      { --btn-bg: var(--sv-ink); --btn-bd: var(--sv-ink); }

.sv-btn--outline   { --btn-bg: transparent; --btn-fg: var(--sv-text); --btn-bd: var(--sv-line); }
.sv-btn--outline:hover { --btn-bg: var(--sv-red); --btn-fg: #fff; --btn-bd: var(--sv-red); }

.sv-btn--ghost     { --btn-bg: transparent; --btn-fg: var(--sv-text); --btn-bd: transparent; }
.sv-btn--ghost:hover { --btn-bg: var(--sv-bg-alt); box-shadow: none; }

.sv-btn--light     { --btn-bg: #fff; --btn-fg: var(--sv-ink); --btn-bd: #fff; }
.sv-btn--on-dark   { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.35); }
.sv-btn--on-dark:hover { --btn-bg: #fff; --btn-fg: var(--sv-ink); --btn-bd: #fff; }

.sv-btn--sm  { padding: .6rem 1.1rem; font-size: var(--sv-fs-xs); }
.sv-btn--lg  { padding: 1.05rem 2.1rem; font-size: var(--sv-fs-base); }
.sv-btn--block { display: flex; width: 100%; }

/* Arrow nudges in the reading direction */
.sv-btn i, .sv-btn svg { transition: transform var(--sv-t-fast) var(--sv-ease); }
.sv-btn:hover i.sv-arrow { transform: translateX(3px); }
[dir="rtl"] .sv-btn:hover i.sv-arrow { transform: translateX(-3px); }

/* ── Section heading ──────────────────────────────────────────────────────── */
.sv-heading { margin-bottom: var(--sv-7); max-width: 720px; }
.sv-heading--center { margin-inline: auto; text-align: center; }

.sv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-2);
  font-size: var(--sv-fs-xs);
  font-weight: var(--sv-fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sv-red);
  margin-bottom: var(--sv-3);
}
html[lang="ar"] .sv-eyebrow { letter-spacing: .02em; }
.sv-eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--sv-red);
  flex: none;
}
.sv-heading--center .sv-eyebrow::before { display: none; }

.sv-heading h2 { margin-bottom: var(--sv-3); }
.sv-heading p  { color: var(--sv-text-muted); font-size: var(--sv-fs-lg); }

/* On a dark surface the h2/p element rules above resolve to near-black
   (--sv-text is #0A0D14) and beat the `color: #fff` that .sv-section--ink sets
   on the section, so the title and subtitle rendered invisible against the dark
   background — only the red eyebrow was legible. Re-assert light colours for
   every dark context. */
.sv-section--ink .sv-heading h2,
.sv-section--ink .sv-heading h3 { color: #fff; }
.sv-section--ink .sv-heading p  { color: rgba(255, 255, 255, .76); }
.sv-section--ink .sv-eyebrow    { color: var(--sv-cyan); }
.sv-section--ink .sv-eyebrow::before { background: var(--sv-cyan); }

/* ── Card ─────────────────────────────────────────────────────────────────── */
.sv-card {
  background: var(--sv-bg);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r-md);
  overflow: hidden;
  position: relative;
  transition: transform var(--sv-t) var(--sv-ease),
              box-shadow var(--sv-t) var(--sv-ease),
              border-color var(--sv-t) var(--sv-ease);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sv-card:hover { transform: translateY(-4px); box-shadow: var(--sv-shadow-lg); border-color: transparent; }

.sv-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sv-bg-alt); }
.sv-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sv-t-slow) var(--sv-ease); }
.sv-card:hover .sv-card__media img { transform: scale(1.05); }

.sv-card__body { padding: var(--sv-5); flex: 1; display: flex; flex-direction: column; gap: var(--sv-3); }
.sv-card__title { font-size: var(--sv-fs-lg); font-weight: var(--sv-fw-bold); }
.sv-card__title a { color: inherit; }
.sv-card__title a:hover { color: var(--sv-red); }
.sv-card__text { color: var(--sv-text-muted); font-size: var(--sv-fs-sm); flex: 1; }
.sv-card__foot {
  padding: var(--sv-4) var(--sv-5);
  border-top: 1px solid var(--sv-line);
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--sv-fs-xs); color: var(--sv-text-muted);
}

/* Top accent bar that grows on hover */
.sv-card--accent::before {
  content: "";
  position: absolute;
  inset-block-start: 0; inset-inline: 0;
  height: 3px;
  background: var(--sv-grad-brand);
  transform: scaleX(0);
  transform-origin: var(--sv-origin, left);
  transition: transform var(--sv-t) var(--sv-ease);
  z-index: 2;
}
[dir="rtl"] .sv-card--accent::before { --sv-origin: right; }
.sv-card--accent:hover::before { transform: scaleX(1); }

/* ── Icon card (features / values) ────────────────────────────────────────── */
.sv-icard {
  background: var(--sv-bg);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r-md);
  padding: var(--sv-6);
  position: relative;
  overflow: hidden;
  transition: transform var(--sv-t) var(--sv-ease),
              box-shadow var(--sv-t) var(--sv-ease),
              border-color var(--sv-t) var(--sv-ease);
  height: 100%;
}
.sv-icard:hover { transform: translateY(-4px); box-shadow: var(--sv-shadow-lg); border-color: var(--sv-red); }

.sv-icard__icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: var(--sv-r-sm);
  background: var(--sv-red-soft);
  color: var(--sv-red);
  font-size: var(--sv-fs-xl);
  margin-bottom: var(--sv-4);
  transition: background var(--sv-t) var(--sv-ease), color var(--sv-t) var(--sv-ease);
}
.sv-icard:hover .sv-icard__icon { background: var(--sv-red); color: #fff; }
.sv-icard h3 { font-size: var(--sv-fs-lg); margin-bottom: var(--sv-2); }
.sv-icard p  { color: var(--sv-text-muted); font-size: var(--sv-fs-sm); }

/* Watermark index number */
.sv-icard__num {
  position: absolute;
  inset-block-start: var(--sv-3);
  inset-inline-end: var(--sv-4);
  font-family: var(--sv-font-mono);
  font-size: var(--sv-fs-3xl);
  font-weight: var(--sv-fw-black);
  color: var(--sv-line);
  line-height: 1;
  pointer-events: none;
}

/* ── Badge / chip ─────────────────────────────────────────────────────────── */
.sv-badge {
  display: inline-flex; align-items: center; gap: var(--sv-1);
  padding: .28rem .7rem;
  font-size: var(--sv-fs-xs);
  font-weight: var(--sv-fw-semibold);
  border-radius: var(--sv-r-xs);
  background: var(--sv-bg-alt);
  color: var(--sv-text-muted);
  line-height: 1.6;
}
.sv-badge--red   { background: var(--sv-red-soft);  color: var(--sv-red); }
.sv-badge--cyan  { background: var(--sv-cyan-soft); color: var(--sv-cyan-deep); }
.sv-badge--green { background: rgba(22,163,74,.12); color: var(--sv-success); }
.sv-badge--amber { background: rgba(253,183,20,.16); color: #A97706; }
.sv-badge--solid { background: var(--sv-red); color: #fff; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.sv-field { margin-bottom: var(--sv-4); }
.sv-label {
  display: block;
  font-size: var(--sv-fs-sm);
  font-weight: var(--sv-fw-semibold);
  margin-bottom: var(--sv-2);
}
.sv-label .sv-req { color: var(--sv-red); margin-inline-start: 2px; }
.sv-label .sv-opt { color: var(--sv-text-muted); font-weight: var(--sv-fw-normal); font-size: var(--sv-fs-xs); }

.sv-input, .sv-select, .sv-textarea {
  width: 100%;
  padding: .8rem 1rem;
  font-size: var(--sv-fs-sm);
  color: var(--sv-text);
  background: var(--sv-bg);
  border: 1.5px solid var(--sv-line);
  border-radius: var(--sv-r-sm);
  transition: border-color var(--sv-t-fast) var(--sv-ease),
              box-shadow var(--sv-t-fast) var(--sv-ease);
}
.sv-input:focus, .sv-select:focus, .sv-textarea:focus {
  outline: none;
  border-color: var(--sv-red);
  box-shadow: var(--sv-glow-red);
}
.sv-input::placeholder, .sv-textarea::placeholder { color: var(--sv-slate-2); }
.sv-textarea { min-height: 140px; resize: vertical; line-height: var(--sv-lh-base); }
.sv-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235A5C5E' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-inline-end: 2.5rem;
}
[dir="rtl"] .sv-select { background-position: left 1rem center; padding-inline-end: 1rem; padding-inline-start: 2.5rem; }

.sv-input.is-invalid, .sv-textarea.is-invalid, .sv-select.is-invalid { border-color: var(--sv-danger); }
.sv-error { display: block; color: var(--sv-danger); font-size: var(--sv-fs-xs); margin-top: var(--sv-1); }
.sv-help  { display: block; color: var(--sv-text-muted); font-size: var(--sv-fs-xs); margin-top: var(--sv-1); }

.sv-check { display: flex; align-items: flex-start; gap: var(--sv-2); font-size: var(--sv-fs-sm); cursor: pointer; }
.sv-check input { width: 18px; height: 18px; accent-color: var(--sv-red); flex: none; margin-top: 2px; }

.sv-file {
  border: 1.5px dashed var(--sv-line);
  border-radius: var(--sv-r-sm);
  padding: var(--sv-5);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--sv-t-fast) var(--sv-ease), background var(--sv-t-fast) var(--sv-ease);
}
.sv-file:hover { border-color: var(--sv-red); background: var(--sv-red-soft); }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.sv-alert {
  display: flex; align-items: flex-start; gap: var(--sv-3);
  padding: var(--sv-4) var(--sv-5);
  border-radius: var(--sv-r-sm);
  border-inline-start: 3px solid;
  font-size: var(--sv-fs-sm);
  margin-bottom: var(--sv-5);
}
.sv-alert--success { background: rgba(22,163,74,.08);  border-color: var(--sv-success); color: #14532D; }
.sv-alert--error   { background: rgba(220,38,38,.08);  border-color: var(--sv-danger);  color: #7F1D1D; }
.sv-alert--info    { background: rgba(14,165,233,.08); border-color: var(--sv-info);    color: #0C4A6E; }
.sv-alert--warning { background: rgba(245,158,11,.10); border-color: var(--sv-warning); color: #78350F; }

/* ── Stats ────────────────────────────────────────────────────────────────── */
/* An explicit column count (set inline from the stat count, capped at 5) rather
   than auto-fit/minmax, so every stat shares one row instead of a 5th dropping
   to a line of its own. minmax(0, 1fr) lets the cells shrink below their content
   width, which is what keeps them on that single row. */
.sv-stats {
  display: grid;
  grid-template-columns: repeat(var(--sv-stat-cols, 4), minmax(0, 1fr));
  gap: var(--sv-4) var(--sv-2);
  align-items: start;
}
/* Below the desktop breakpoints there isn't room for the full row, so step down
   to layouts that stay legible instead of squeezing. */
@media (max-width: 1100px) {
  .sv-stats { grid-template-columns: repeat(min(var(--sv-stat-cols, 4), 3), minmax(0, 1fr)); }
}
/* Orphan guard for the 3-column step only. It must be bounded on BOTH sides:
   an unbounded max-width:1100px rule also applies at 700px, where the grid is
   already down to 2 columns, and the 3n+1 selector then spans the wrong item
   and splits a 4-stat strip into three ragged rows. */
@media (min-width: 781px) and (max-width: 1100px) {
  .sv-stats > .sv-stat:nth-child(3n+1):last-child { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
  .sv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Orphan guard for the 2-column step only — bounded below by the single-column
   breakpoint, where every item is already full width and the rule is moot. */
@media (min-width: 421px) and (max-width: 780px) {
  /* At two columns an odd count leaves the final stat alone in one half of the
     last row, hugging one edge. Let that orphan span both columns so it centres
     under the pair above it. :nth-child(odd):last-child matches only when the
     total count is odd, so even lists are untouched. */
  .sv-stats > .sv-stat:nth-child(odd):last-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .sv-stats { grid-template-columns: 1fr; }
}

.sv-stat {
  text-align: center;
  padding: var(--sv-5) var(--sv-2);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sv-2);
  min-width: 0;
}
/* Every child is inline (<span>) in the views — force block flow so the number
   and its label never run together on the same line. */
.sv-stat__icon,
.sv-stat__value,
.sv-stat__label { display: block; width: 100%; }

.sv-stat__icon { font-size: var(--sv-fs-2xl); color: var(--sv-cyan); margin-bottom: var(--sv-1); line-height: 1; }
.sv-stat__value {
  /* Scaled down from the old 4.2vw: with five columns instead of four each cell
     is narrower, and the larger size overflowed its column. */
  font-size: clamp(1.5rem, 2.6vw, var(--sv-fs-4xl));
  font-weight: var(--sv-fw-black);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  background: var(--sv-grad-mix);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  overflow-wrap: break-word;
}
.sv-section--ink .sv-stat__value { background: none; color: #fff; -webkit-text-fill-color: #fff; }
.sv-stat__label {
  font-size: var(--sv-fs-sm);
  color: var(--sv-text-muted);
  margin-top: 0;
  line-height: 1.45;
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}
.sv-section--ink .sv-stat__label { color: rgba(255, 255, 255, .72); }

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.sv-crumbs { display: flex; flex-wrap: wrap; gap: var(--sv-2); font-size: var(--sv-fs-xs); align-items: center; }
.sv-crumbs a { color: inherit; opacity: .8; }
.sv-crumbs a:hover { opacity: 1; }
.sv-crumbs li:not(:last-child)::after { content: "/"; margin-inline-start: var(--sv-2); opacity: .45; }
[dir="rtl"] .sv-crumbs li:not(:last-child)::after { content: "\\"; }

/* ── Page hero (interior pages) ───────────────────────────────────────────── */
.sv-pagehero {
  position: relative;
  background: var(--sv-grad-ink);
  color: #fff;
  padding-block: calc(var(--sv-header-h) + var(--sv-8)) var(--sv-8);
  overflow: hidden;
  isolation: isolate;
}
.sv-pagehero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("/img/patterns/circuit.svg");
  background-size: 520px;
  opacity: .07;
  z-index: 1;
  pointer-events: none;
}
.sv-pagehero h1 {
  color: #fff;
  margin-bottom: var(--sv-3);
  text-shadow: 0 2px 18px rgba(10, 13, 20, .45);
}
.sv-pagehero p {
  color: rgba(255,255,255,.88);
  font-size: var(--sv-fs-lg);
  max-width: 640px;
  text-shadow: 0 1px 10px rgba(10, 13, 20, .5);
}
.sv-pagehero .sv-crumbs { margin-bottom: var(--sv-4); color: rgba(255,255,255,.8); }
.sv-pagehero .sv-crumbs a { color: rgba(255,255,255,.8); }
.sv-pagehero .sv-crumbs a:hover { color: #fff; }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.sv-pager { display: flex; gap: var(--sv-2); justify-content: center; flex-wrap: wrap; margin-top: var(--sv-8); }
.sv-pager a, .sv-pager span {
  min-width: 42px; height: 42px;
  display: grid; place-items: center;
  padding-inline: var(--sv-3);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r-sm);
  font-size: var(--sv-fs-sm);
  font-weight: var(--sv-fw-medium);
  color: var(--sv-text);
  transition: all var(--sv-t-fast) var(--sv-ease);
}
.sv-pager a:hover { border-color: var(--sv-red); color: var(--sv-red); }
.sv-pager .is-current { background: var(--sv-red); border-color: var(--sv-red); color: #fff; }
.sv-pager .is-disabled { opacity: .4; pointer-events: none; }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.sv-empty { text-align: center; padding: var(--sv-10) var(--sv-4); color: var(--sv-text-muted); }
.sv-empty i { font-size: 3rem; color: var(--sv-line); margin-bottom: var(--sv-4); display: block; }

/* ── Divider with PCB nodes ───────────────────────────────────────────────── */
.sv-trace {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sv-line) 15%, var(--sv-line) 85%, transparent);
  position: relative;
}
.sv-trace::before, .sv-trace::after {
  content: "";
  position: absolute; top: 50%;
  width: 6px; height: 6px;
  background: var(--sv-cyan);
  border-radius: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.sv-trace::before { inset-inline-start: 15%; }
.sv-trace::after  { inset-inline-end: 15%; }

/* ── Tabs / filters ───────────────────────────────────────────────────────── */
.sv-filters { display: flex; flex-wrap: wrap; gap: var(--sv-2); margin-bottom: var(--sv-6); }
.sv-filter {
  padding: .55rem 1.1rem;
  border: 1.5px solid var(--sv-line);
  border-radius: var(--sv-r-sm);
  font-size: var(--sv-fs-sm);
  font-weight: var(--sv-fw-medium);
  color: var(--sv-text-muted);
  background: transparent;
  cursor: pointer;
  transition: all var(--sv-t-fast) var(--sv-ease);
}
.sv-filter:hover { border-color: var(--sv-red); color: var(--sv-red); }
.sv-filter.is-active { background: var(--sv-red); border-color: var(--sv-red); color: #fff; }

/* ── Floating WhatsApp ────────────────────────────────────────────────────── */
.sv-float-wa {
  position: fixed;
  inset-block-end: var(--sv-5);
  inset-inline-end: var(--sv-5);
  width: 54px; height: 54px;
  display: grid; place-items: center;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  font-size: 1.55rem;
  box-shadow: var(--sv-shadow-lg);
  z-index: var(--sv-z-header);
  transition: transform var(--sv-t) var(--sv-ease);
}
.sv-float-wa:hover { transform: scale(1.08); color: #fff; }

/* ── Back to top ──────────────────────────────────────────────────────────── */
.sv-totop {
  position: fixed;
  inset-block-end: var(--sv-5);
  inset-inline-start: var(--sv-5);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--sv-ink);
  color: #fff;
  border: 0;
  border-radius: var(--sv-r-sm);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all var(--sv-t) var(--sv-ease);
  z-index: var(--sv-z-header);
}
.sv-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.sv-totop:hover { background: var(--sv-red); }

/* ═══════════════════════════════════════════════════════════════════════════
   Page-level components added with the public views
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page hero (inner pages) ───────────────────────────────────────────────── */
.sv-pagehero__bg { position: absolute; inset: 0; z-index: 0; }
.sv-pagehero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Dark scrim ON TOP of the background image. Without this the white heading
   sat directly on a bright factory photo and was unreadable — the pattern
   ::after used to be at z-index -1, i.e. behind the image, so it darkened
   nothing at all. */
.sv-pagehero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 13, 20, .78) 0%,
    rgba(10, 13, 20, .62) 45%,
    rgba(10, 13, 20, .80) 100%);
}
/* Extra horizontal falloff from the text edge so long titles stay legible.
   linear-gradient takes no logical keywords, so flip it explicitly for RTL. */
.sv-pagehero__bg::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(to right,
    rgba(10, 13, 20, .55) 0%,
    rgba(10, 13, 20, .15) 60%,
    transparent 100%);
}
[dir="rtl"] .sv-pagehero__bg::before {
  background: linear-gradient(to left,
    rgba(10, 13, 20, .55) 0%,
    rgba(10, 13, 20, .15) 60%,
    transparent 100%);
}
.sv-pagehero .sv-container { position: relative; z-index: 2; }

/* ── Card meta / extras ────────────────────────────────────────────────────── */
.sv-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--sv-4);
  font-size: var(--sv-fs-xs); color: var(--sv-text-muted);
  margin-bottom: var(--sv-3);
}
.sv-card__meta i { color: var(--sv-red); margin-inline-end: 4px; }
.sv-card__place { font-size: var(--sv-fs-sm); color: var(--sv-text-muted); margin-bottom: var(--sv-2); }
.sv-card__place i { color: var(--sv-red); margin-inline-end: 5px; }
.sv-card__media { position: relative; display: block; overflow: hidden; }
.sv-card__media > .sv-badge { position: absolute; inset-block-start: var(--sv-3); inset-inline-start: var(--sv-3); z-index: 2; }

/* ── Event card date chip ──────────────────────────────────────────────────── */
.sv-event-card__date {
  position: absolute;
  inset-block-end: var(--sv-3);
  inset-inline-end: var(--sv-3);
  z-index: 2;
  display: grid; place-items: center;
  width: 58px; padding: .45rem 0;
  background: #fff;
  border-radius: var(--sv-r-md);
  box-shadow: var(--sv-shadow-md);
  line-height: 1.1;
}
.sv-event-card__date strong { font-size: 1.4rem; font-weight: var(--sv-fw-black); color: var(--sv-red); }
.sv-event-card__date small  { font-size: 10px; text-transform: uppercase; color: var(--sv-text-muted); letter-spacing: .06em; }

/* ── Product card ──────────────────────────────────────────────────────────── */
.sv-product__brand {
  display: inline-block;
  font-size: var(--sv-fs-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--sv-cyan-deep); font-weight: var(--sv-fw-bold);
  margin-bottom: var(--sv-2);
}
.sv-product__price { font-size: var(--sv-fs-lg); font-weight: var(--sv-fw-black); color: var(--sv-red); margin-top: var(--sv-3); }

/* ── Info card extras ──────────────────────────────────────────────────────── */
.sv-icard__img { width: 100%; height: 180px; object-fit: cover; border-radius: var(--sv-r-md); margin-bottom: var(--sv-4); }
.sv-icard__link {
  display: inline-flex; align-items: center; gap: var(--sv-2);
  margin-top: var(--sv-4);
  font-size: var(--sv-fs-sm); font-weight: var(--sv-fw-bold); color: var(--sv-red);
}
.sv-icard__link i { transition: transform var(--sv-t-fast) var(--sv-ease); }
.sv-icard__link:hover i { transform: translateX(var(--sv-nudge, 4px)); }
[dir="rtl"] .sv-icard__link:hover i { --sv-nudge: -4px; }
.sv-icard h3 a { color: inherit; }
.sv-icard h3 a:hover { color: var(--sv-red); }

/* ── Production line card ──────────────────────────────────────────────────── */
.sv-line {
  background: #fff;
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--sv-t) var(--sv-ease), box-shadow var(--sv-t) var(--sv-ease), border-color var(--sv-t) var(--sv-ease);
}
.sv-line:hover { transform: translateY(-6px); box-shadow: var(--sv-shadow-lg); border-color: var(--sv-accent, var(--sv-red)); }
.sv-line__media { display: block; aspect-ratio: 16/10; overflow: hidden; }
.sv-line__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sv-t-slow) var(--sv-ease); }
.sv-line:hover .sv-line__media img { transform: scale(1.06); }
.sv-line__body { padding: var(--sv-5); flex: 1; display: flex; flex-direction: column; position: relative; }
.sv-line__icon {
  position: absolute;
  inset-block-start: calc(-1 * var(--sv-6));
  inset-inline-end: var(--sv-5);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--sv-accent, var(--sv-red));
  color: #fff; font-size: var(--sv-fs-lg);
  border-radius: var(--sv-r-md);
  box-shadow: var(--sv-shadow-md);
}
.sv-line__body h3 { font-size: var(--sv-fs-lg); margin-bottom: var(--sv-3); }
/* On the production-lines page the icon sits in a split row, not a card body.
   .sv-split__body is not positioned, so the absolute icon escaped to the
   nearest positioned ancestor and floated over the stats band. Inline it. */
.sv-split__body > .sv-line__icon {
  position: static;
  margin-block-end: var(--sv-4);
}

.sv-line__body h3 a { color: inherit; }
.sv-line__body h3 a:hover { color: var(--sv-accent, var(--sv-red)); }
.sv-line__body p { font-size: var(--sv-fs-sm); color: var(--sv-text-muted); flex: 1; }
.sv-line__cap {
  display: flex; align-items: baseline; gap: var(--sv-2);
  padding: var(--sv-2) var(--sv-3);
  background: var(--sv-bg-alt);
  border-inline-start: 3px solid var(--sv-accent, var(--sv-red));
  border-radius: var(--sv-r-sm);
  margin-bottom: var(--sv-3);
}
.sv-line__cap strong { font-size: var(--sv-fs-lg); font-weight: var(--sv-fw-black); color: var(--sv-ink); }
.sv-line__cap span   { font-size: var(--sv-fs-xs); color: var(--sv-text-muted); }
.sv-line__link {
  display: inline-flex; align-items: center; gap: var(--sv-2);
  margin-top: var(--sv-4);
  font-size: var(--sv-fs-sm); font-weight: var(--sv-fw-bold);
  color: var(--sv-accent, var(--sv-red));
}
.sv-line__link i { transition: transform var(--sv-t-fast) var(--sv-ease); }
.sv-line__link:hover i { transform: translateX(4px); }
[dir="rtl"] .sv-line__link:hover i { transform: translateX(-4px); }

/* ── Job card ──────────────────────────────────────────────────────────────── */
.sv-jobs { display: grid; gap: var(--sv-4); }
.sv-job {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sv-5);
  background: #fff;
  border: 1px solid var(--sv-line);
  border-inline-start: 3px solid var(--sv-red);
  border-radius: var(--sv-r-md);
  padding: var(--sv-5);
  transition: box-shadow var(--sv-t) var(--sv-ease), transform var(--sv-t) var(--sv-ease);
}
.sv-job:hover { box-shadow: var(--sv-shadow-md); transform: translateY(-2px); }
.sv-job__main { flex: 1; min-width: 0; }
.sv-job__top { display: flex; align-items: flex-start; gap: var(--sv-3); margin-bottom: var(--sv-3); }
.sv-job__icon {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: var(--sv-red-soft); color: var(--sv-red);
  border-radius: var(--sv-r-sm);
}
.sv-job__title { font-size: var(--sv-fs-lg); margin: 0; }
.sv-job__title a { color: inherit; }
.sv-job__title a:hover { color: var(--sv-red); }
.sv-job__cat { font-size: var(--sv-fs-xs); color: var(--sv-text-muted); }
.sv-job__text { font-size: var(--sv-fs-sm); color: var(--sv-text-muted); margin-bottom: var(--sv-3); }
.sv-job__meta { display: flex; flex-wrap: wrap; gap: var(--sv-2) var(--sv-4); font-size: var(--sv-fs-xs); color: var(--sv-text-muted); }
.sv-job__meta li { display: inline-flex; align-items: center; gap: 5px; }
.sv-job__meta i { color: var(--sv-cyan-deep); }
.sv-job__action { flex: none; }
@media (max-width: 720px) {
  .sv-job { flex-direction: column; align-items: stretch; }
  .sv-job__action .sv-btn { width: 100%; }
}

/* ── Section footer link ───────────────────────────────────────────────────── */
.sv-section__more { text-align: center; margin-top: var(--sv-8); }

/* ── Split body ────────────────────────────────────────────────────────────── */
.sv-split__body h2 { margin-bottom: var(--sv-4); }
.sv-split__actions { display: flex; flex-wrap: wrap; gap: var(--sv-3); margin-top: var(--sv-6); }
.sv-lead { font-size: var(--sv-fs-lg); color: var(--sv-text-muted); margin-bottom: var(--sv-4); }

/* ── CTA inner ─────────────────────────────────────────────────────────────── */
.sv-cta__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sv-7); flex-wrap: wrap;
}
.sv-cta__inner h2 { color: #fff; margin-bottom: var(--sv-3); }
.sv-cta__inner p  { color: rgba(255,255,255,.78); max-width: 560px; }
.sv-cta__actions  { display: flex; gap: var(--sv-3); flex-wrap: wrap; }

/* ── 404 ───────────────────────────────────────────────────────────────────── */
.sv-404__code {
  font-size: clamp(5rem, 18vw, 10rem);
  font-weight: var(--sv-fw-black);
  line-height: .9;
  background: var(--sv-grad-mix);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: var(--sv-4);
}
.sv-empty h1 { margin-bottom: var(--sv-3); }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE-LEVEL COMPONENTS  (interior pages: news, events, careers, products …)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Toolbar: filters + search on one row ─────────────────────────────────── */
.sv-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sv-4);
  margin-bottom: var(--sv-6);
}
.sv-toolbar .sv-filters { margin-bottom: 0; flex: 1 1 380px; }

.sv-search { display: flex; gap: var(--sv-2); flex: 0 1 320px; }
.sv-search .sv-input { flex: 1; }
.sv-search .sv-btn { flex: none; padding-inline: 1rem; }

/* ── Careers: heading + search share the top row ──────────────────────────── */
.sv-jobsbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--sv-4);
  margin-bottom: var(--sv-6);
}
/* .sv-heading carries a bottom margin of its own that would break the baseline
   alignment with the search field. */
.sv-jobsbar__head { margin-bottom: 0; flex: 1 1 420px; min-width: 0; }
.sv-jobsbar__search { flex: 0 1 320px; }
@media (max-width: 720px) {
  .sv-jobsbar__search { flex-basis: 100%; }
}

.sv-filters--soft { margin-block: calc(var(--sv-4) * -1) var(--sv-6); }
/* The negative pull above assumes a preceding filter row. When every other facet
   row is suppressed this row follows .sv-jobsbar directly and must not ride up. */
.sv-jobsbar + .sv-filters--soft { margin-block-start: 0; }
.sv-filters--soft .sv-filter { font-size: var(--sv-fs-xs); padding: .4rem .85rem; }
.sv-filter i { margin-inline-end: .35rem; opacity: .8; }

/* ── Detail layout: main + sticky sidebar ─────────────────────────────────── */
.sv-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sv-8); align-items: start; }
.sv-detail__main { min-width: 0; }
.sv-detail__side { position: sticky; top: calc(var(--sv-header-h) + var(--sv-4)); display: grid; gap: var(--sv-5); }
@media (max-width: 1000px) {
  .sv-detail { grid-template-columns: 1fr; }
  .sv-detail__side { position: static; }
}

.sv-detail__cover {
  margin: 0 0 var(--sv-6);
  border-radius: var(--sv-r-lg);
  overflow: hidden;
  box-shadow: var(--sv-shadow);
}
.sv-detail__cover img { width: 100%; height: auto; display: block; }

.sv-block { margin-bottom: var(--sv-8); }
.sv-block > h2 {
  font-size: var(--sv-fs-2xl);
  margin-bottom: var(--sv-4);
  padding-inline-start: var(--sv-4);
  border-inline-start: 4px solid var(--sv-red);
}

/* ── Sidebar card ─────────────────────────────────────────────────────────── */
.sv-sidecard {
  background: var(--sv-bg);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r-lg);
  padding: var(--sv-5);
  box-shadow: var(--sv-shadow-sm);
}
.sv-sidecard > h3 {
  font-size: var(--sv-fs-lg);
  margin-bottom: var(--sv-4);
  padding-bottom: var(--sv-3);
  border-bottom: 1px solid var(--sv-line);
}
.sv-sidecard__actions { display: grid; gap: var(--sv-2); margin-top: var(--sv-5); }

/* ── Facts list (key/value with icon) ─────────────────────────────────────── */
.sv-facts { display: grid; gap: var(--sv-4); }
.sv-facts li { display: flex; align-items: flex-start; gap: var(--sv-3); }
.sv-facts li > i {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--sv-r-sm);
  background: var(--sv-red-soft);
  color: var(--sv-red);
  font-size: var(--sv-fs-sm);
}
.sv-facts li > div { min-width: 0; display: grid; gap: 2px; }
.sv-facts span { font-size: var(--sv-fs-xs); color: var(--sv-text-muted); }
.sv-facts strong { font-size: var(--sv-fs-sm); font-weight: var(--sv-fw-semibold); word-break: break-word; }
.sv-facts strong a { color: inherit; }
.sv-facts strong a:hover { color: var(--sv-red); }

/* ── Link list ────────────────────────────────────────────────────────────── */
.sv-linklist { display: grid; gap: var(--sv-1); }
.sv-linklist a {
  display: flex; align-items: center; gap: var(--sv-3);
  padding: .6rem .5rem;
  border-radius: var(--sv-r-sm);
  font-size: var(--sv-fs-sm); font-weight: var(--sv-fw-medium);
  color: var(--sv-text);
  transition: background var(--sv-t-fast) var(--sv-ease), color var(--sv-t-fast) var(--sv-ease);
}
.sv-linklist a:hover { background: var(--sv-bg-alt); color: var(--sv-red); }
.sv-linklist i { color: var(--sv-red); width: 18px; text-align: center; }

/* ── Share buttons ────────────────────────────────────────────────────────── */
.sv-share { display: flex; gap: var(--sv-2); flex-wrap: wrap; }
.sv-share a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1.5px solid var(--sv-line);
  border-radius: var(--sv-r-sm);
  color: var(--sv-text-muted);
  transition: all var(--sv-t-fast) var(--sv-ease);
}
.sv-share a:hover { background: var(--sv-red); border-color: var(--sv-red); color: #fff; transform: translateY(-2px); }

/* ── Post meta (news hero) ────────────────────────────────────────────────── */
.sv-postmeta {
  display: flex; flex-wrap: wrap; gap: var(--sv-5);
  margin-top: var(--sv-4);
  font-size: var(--sv-fs-sm);
  color: rgba(255,255,255,.72);
}
.sv-postmeta i { margin-inline-end: .35rem; }

/* ── Tags ─────────────────────────────────────────────────────────────────── */
.sv-tags { display: flex; flex-wrap: wrap; gap: var(--sv-2); }
.sv-tag {
  padding: .35rem .8rem;
  background: var(--sv-bg-alt);
  border-radius: var(--sv-r-sm);
  font-size: var(--sv-fs-xs); font-weight: var(--sv-fw-medium);
  color: var(--sv-text-muted);
  transition: all var(--sv-t-fast) var(--sv-ease);
}
.sv-tag:hover { background: var(--sv-red); color: #fff; }

/* ── Prev / next post navigation ──────────────────────────────────────────── */
.sv-postnav { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sv-4); }
.sv-postnav__item {
  padding: var(--sv-4) var(--sv-5);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r-md);
  display: grid; gap: var(--sv-2);
  transition: all var(--sv-t-fast) var(--sv-ease);
}
.sv-postnav__item:hover { border-color: var(--sv-red); box-shadow: var(--sv-shadow-sm); }
.sv-postnav__item span { font-size: var(--sv-fs-xs); color: var(--sv-red); font-weight: var(--sv-fw-semibold); }
.sv-postnav__item strong { font-size: var(--sv-fs-sm); color: var(--sv-text); line-height: var(--sv-lh-snug); }
.sv-postnav__item--next { text-align: end; }

/* ── Form box (inline forms inside article bodies) ────────────────────────── */
.sv-formbox {
  background: var(--sv-bg-alt);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  scroll-margin-top: calc(var(--sv-header-h) + 1rem);
}
.sv-formbox > h2 { font-size: var(--sv-fs-2xl); margin-bottom: var(--sv-2); }
.sv-formbox .sv-input, .sv-formbox .sv-textarea, .sv-formbox .sv-select { background: var(--sv-bg); }
.sv-form .sv-grid { gap: 0 var(--sv-5); }

/* ── Featured news block ──────────────────────────────────────────────────── */
.sv-featured { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sv-6); }
@media (max-width: 900px) { .sv-featured { grid-template-columns: 1fr; } }
.sv-featured__lead {
  display: grid;
  border-radius: var(--sv-r-lg);
  overflow: hidden;
  background: var(--sv-bg);
  border: 1px solid var(--sv-line);
  box-shadow: var(--sv-shadow-sm);
}
.sv-featured__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.sv-featured__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sv-t-slow) var(--sv-ease); }
.sv-featured__lead:hover .sv-featured__media img { transform: scale(1.04); }
.sv-featured__body { padding: var(--sv-5); display: grid; gap: var(--sv-3); align-content: start; }
.sv-featured__body h2 { font-size: var(--sv-fs-xl); line-height: var(--sv-lh-snug); }
.sv-featured__body h2 a { color: inherit; }
.sv-featured__body h2 a:hover { color: var(--sv-red); }
.sv-featured__body p { color: var(--sv-text-muted); font-size: var(--sv-fs-sm); }
.sv-featured__body .sv-btn { justify-self: start; }
.sv-featured__side { display: grid; gap: var(--sv-4); align-content: start; }

/* ── Mini article (sidebar / featured side column) ────────────────────────── */
.sv-minilist { display: grid; gap: var(--sv-4); }
.sv-mini { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--sv-3); align-items: center; }
.sv-mini__media { display: block; aspect-ratio: 4 / 3; border-radius: var(--sv-r-sm); overflow: hidden; }
.sv-mini__media img { width: 100%; height: 100%; object-fit: cover; }
.sv-mini__body { min-width: 0; display: grid; gap: 4px; }
.sv-mini__date { font-size: var(--sv-fs-xs); color: var(--sv-text-muted); }
.sv-mini__body h3 { font-size: var(--sv-fs-sm); line-height: var(--sv-lh-snug); font-weight: var(--sv-fw-semibold); }
.sv-mini__body h3 a { color: inherit; }
.sv-mini__body h3 a:hover { color: var(--sv-red); }

/* ── Mission / vision panels ──────────────────────────────────────────────── */
.sv-mv {
  background: var(--sv-bg);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 4px solid var(--sv-red);
}
.sv-mv--accent { border-top-color: var(--sv-cyan); }
.sv-mv--accent .sv-mv__icon { background: var(--sv-cyan-soft); color: var(--sv-cyan-deep); }
.sv-mv__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: var(--sv-r-md);
  background: var(--sv-red-soft);
  color: var(--sv-red);
  font-size: 1.5rem;
  margin-bottom: var(--sv-4);
}
.sv-mv h2 { font-size: var(--sv-fs-2xl); margin-bottom: var(--sv-3); }

/* ── Person card (team) ───────────────────────────────────────────────────── */
.sv-person {
  background: var(--sv-bg);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r-lg);
  overflow: hidden;
  text-align: center;
  padding-bottom: var(--sv-5);
  transition: all var(--sv-t) var(--sv-ease);
}
.sv-person:hover { transform: translateY(-4px); box-shadow: var(--sv-shadow-lg); border-color: transparent; }
.sv-person__photo { aspect-ratio: 1 / 1; overflow: hidden; background: var(--sv-bg-alt); }
.sv-person__photo img { width: 100%; height: 100%; object-fit: cover; }
.sv-person h3 { font-size: var(--sv-fs-base); margin: var(--sv-4) var(--sv-4) 0; }
.sv-person__role { display: block; font-size: var(--sv-fs-xs); color: var(--sv-red); font-weight: var(--sv-fw-semibold); margin-top: 4px; }
.sv-person p { font-size: var(--sv-fs-xs); color: var(--sv-text-muted); padding: var(--sv-3) var(--sv-4) 0; }
.sv-person__links { display: flex; justify-content: center; gap: var(--sv-2); margin-top: var(--sv-4); }
.sv-person__links a {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: var(--sv-bg-alt); color: var(--sv-text-muted);
  transition: all var(--sv-t-fast) var(--sv-ease);
}
.sv-person__links a:hover { background: var(--sv-red); color: #fff; }

/* ── Certification card ───────────────────────────────────────────────────── */
.sv-cert {
  text-align: center;
  padding: var(--sv-5);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r-lg);
  background: var(--sv-bg);
  display: grid; gap: var(--sv-3); justify-items: center; align-content: start;
}
.sv-cert img { height: 72px; width: auto; object-fit: contain; }
.sv-cert h3 { font-size: var(--sv-fs-base); }
.sv-cert p { font-size: var(--sv-fs-xs); color: var(--sv-text-muted); }

/* ── Process steps ────────────────────────────────────────────────────────── */
.sv-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sv-5); }
.sv-step {
  position: relative;
  padding: var(--sv-6) var(--sv-5) var(--sv-5);
  background: var(--sv-bg);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r-lg);
  transition: all var(--sv-t) var(--sv-ease);
}
.sv-step:hover { border-color: var(--sv-red); box-shadow: var(--sv-shadow); transform: translateY(-4px); }
.sv-step__num {
  position: absolute; inset-block-start: var(--sv-4); inset-inline-end: var(--sv-4);
  font-family: var(--sv-font-mono);
  font-size: var(--sv-fs-2xl); font-weight: var(--sv-fw-black);
  color: var(--sv-red); opacity: .16; line-height: 1;
}
.sv-step__icon {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: var(--sv-r-md);
  background: var(--sv-red-soft); color: var(--sv-red);
  font-size: 1.25rem; margin-bottom: var(--sv-4);
}
.sv-step h3 { font-size: var(--sv-fs-base); margin-bottom: var(--sv-2); }
.sv-step p { font-size: var(--sv-fs-sm); color: var(--sv-text-muted); }

/* ── Service card (services index) ────────────────────────────────────────── */
/* Stacked: media on top, copy underneath. A side-by-side split starved the text
   column and forced one or two words per line, so the card reads vertically. */
.sv-svc {
  display: flex; flex-direction: column;
  background: var(--sv-bg);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r-lg);
  overflow: hidden;
  transition: all var(--sv-t) var(--sv-ease);
}
.sv-svc:hover { box-shadow: var(--sv-shadow-lg); border-color: transparent; transform: translateY(-4px); }
.sv-svc__media {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--sv-bg-alt);
}
.sv-svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sv-t-slow) var(--sv-ease); }
.sv-svc:hover .sv-svc__media img { transform: scale(1.06); }
.sv-svc__icon {
  position: absolute; inset-block-end: var(--sv-3); inset-inline-start: var(--sv-3);
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--sv-r-sm);
  background: var(--sv-accent, var(--sv-red)); color: #fff;
}
.sv-svc__body {
  padding: var(--sv-5); display: flex; flex-direction: column; gap: var(--sv-3);
  flex: 1 1 auto; min-height: 0;
}
/* Keep "Learn more" pinned to the bottom so cards of unequal copy still line up. */
.sv-svc__body > .sv-btn { margin-block-start: auto; align-self: start; }
.sv-svc__body h3 { font-size: var(--sv-fs-lg); }
.sv-svc__body h3 a { color: inherit; }
.sv-svc__body h3 a:hover { color: var(--sv-red); }
.sv-svc__body p { font-size: var(--sv-fs-sm); color: var(--sv-text-muted); }

/* ── Tick lists ───────────────────────────────────────────────────────────── */
.sv-ticks { display: grid; gap: var(--sv-2); }
.sv-ticks--grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sv-3) var(--sv-5); }
.sv-ticks li { display: flex; align-items: flex-start; gap: var(--sv-2); font-size: var(--sv-fs-sm); }
.sv-ticks i { color: var(--sv-accent, var(--sv-red)); margin-top: .25rem; flex: none; }

/* ── Specs list (production lines) ────────────────────────────────────────── */
.sv-specs { display: grid; gap: var(--sv-2); margin-block: var(--sv-4); }
.sv-specs li {
  display: flex; align-items: center; gap: var(--sv-3);
  padding: .6rem .9rem;
  background: var(--sv-bg-alt);
  border-radius: var(--sv-r-sm);
  font-size: var(--sv-fs-sm);
}
.sv-specs i { color: var(--sv-accent, var(--sv-red)); }
.sv-specs span { color: var(--sv-text-muted); }
.sv-specs strong { margin-inline-start: auto; font-weight: var(--sv-fw-semibold); }

/* ── Data table ───────────────────────────────────────────────────────────── */
.sv-table { width: 100%; border-collapse: collapse; font-size: var(--sv-fs-sm); }
.sv-table th, .sv-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--sv-line); text-align: start; }
.sv-table th { width: 42%; color: var(--sv-text-muted); font-weight: var(--sv-fw-medium); background: var(--sv-bg-alt); }
.sv-table td { font-weight: var(--sv-fw-semibold); }
.sv-table tr:last-child th, .sv-table tr:last-child td { border-bottom: 0; }

/* ── Brand grid ───────────────────────────────────────────────────────────── */
.sv-brandgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sv-5); }
.sv-brandcard {
  background: var(--sv-bg);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r-lg);
  padding: var(--sv-5);
  text-align: center;
  display: grid; gap: var(--sv-3); justify-items: center; align-content: start;
  transition: all var(--sv-t) var(--sv-ease);
}
.sv-brandcard:hover { box-shadow: var(--sv-shadow-lg); border-color: transparent; transform: translateY(-4px); }
.sv-brandcard__logo { height: 72px; display: grid; place-items: center; }
.sv-brandcard__logo img { max-height: 64px; max-width: 160px; object-fit: contain; }
.sv-brandcard h3 { font-size: var(--sv-fs-base); }
.sv-brandcard p { font-size: var(--sv-fs-xs); color: var(--sv-text-muted); }
.sv-brandcard__link { font-size: var(--sv-fs-xs); font-weight: var(--sv-fw-semibold); color: var(--sv-red); }
.sv-brandcard__link i { margin-inline-end: .35rem; }

/* ── Album card ───────────────────────────────────────────────────────────── */
.sv-album {
  background: var(--sv-bg);
  border: 1px solid var(--sv-line);
  border-radius: var(--sv-r-lg);
  overflow: hidden;
  transition: all var(--sv-t) var(--sv-ease);
}
.sv-album:hover { box-shadow: var(--sv-shadow-lg); border-color: transparent; transform: translateY(-4px); }
.sv-album__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sv-bg-alt); }
.sv-album__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sv-t-slow) var(--sv-ease); }
.sv-album:hover .sv-album__media img { transform: scale(1.06); }
.sv-album__count {
  position: absolute; inset-block-end: var(--sv-3); inset-inline-end: var(--sv-3);
  padding: .3rem .7rem; border-radius: var(--sv-r-sm);
  background: rgba(10,13,20,.72); color: #fff; font-size: var(--sv-fs-xs);
  backdrop-filter: blur(6px);
}
.sv-album__body { padding: var(--sv-4) var(--sv-5) var(--sv-5); }
.sv-album__body h3 { font-size: var(--sv-fs-base); }
.sv-album__body h3 a { color: inherit; }
.sv-album__body h3 a:hover { color: var(--sv-red); }
.sv-album__body p { font-size: var(--sv-fs-sm); color: var(--sv-text-muted); margin-top: var(--sv-2); }

/* ── Photo gallery grid ───────────────────────────────────────────────────── */
.sv-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sv-3); }
.sv-gallery__item {
  position: relative; display: block; aspect-ratio: 4 / 3;
  border-radius: var(--sv-r-md); overflow: hidden; background: var(--sv-bg-alt);
}
.sv-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--sv-t-slow) var(--sv-ease); }
.sv-gallery__item:hover img { transform: scale(1.07); }
.sv-gallery__item::after {
  content: "\f00e"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(227,27,35,.75); color: #fff; font-size: 1.4rem;
  opacity: 0; transition: opacity var(--sv-t) var(--sv-ease);
}
.sv-gallery__item:hover::after { opacity: 1; }
.sv-gallery__cap {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2;
  padding: var(--sv-4) var(--sv-3) var(--sv-2);
  background: linear-gradient(transparent, rgba(10,13,20,.85));
  color: #fff; font-size: var(--sv-fs-xs);
}

/* ── Product detail page ──────────────────────────────────────────────────── */
.sv-pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sv-8); align-items: start; }
@media (max-width: 900px) { .sv-pdp { grid-template-columns: 1fr; } }
.sv-pdp__main {
  display: block; border-radius: var(--sv-r-lg); overflow: hidden;
  border: 1px solid var(--sv-line); background: var(--sv-bg-alt);
}
.sv-pdp__main img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: contain; }
.sv-pdp__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--sv-2); margin-top: var(--sv-3); }
.sv-pdp__thumbs a { border: 1px solid var(--sv-line); border-radius: var(--sv-r-sm); overflow: hidden; aspect-ratio: 1 / 1; }
.sv-pdp__thumbs a:hover { border-color: var(--sv-red); }
.sv-pdp__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.sv-pdp__info h2 { font-size: var(--sv-fs-3xl); margin-bottom: var(--sv-4); }
.sv-pdp__meta { display: grid; gap: var(--sv-2); margin-bottom: var(--sv-5); }
.sv-pdp__meta li {
  display: flex; gap: var(--sv-4); justify-content: space-between;
  padding: .55rem 0; border-bottom: 1px dashed var(--sv-line); font-size: var(--sv-fs-sm);
}
.sv-pdp__meta span { color: var(--sv-text-muted); }
.sv-pdp__meta strong { font-weight: var(--sv-fw-semibold); text-align: end; }
.sv-pdp__meta strong a { color: var(--sv-red); }
.sv-ok  { color: var(--sv-success); }
.sv-off { color: var(--sv-danger); }
.sv-pdp__price {
  font-size: var(--sv-fs-3xl); font-weight: var(--sv-fw-black);
  color: var(--sv-red); margin-bottom: var(--sv-4);
}
.sv-pdp__price small { font-size: var(--sv-fs-base); font-weight: var(--sv-fw-medium); color: var(--sv-text-muted); }
.sv-pdp__actions { display: flex; flex-wrap: wrap; gap: var(--sv-3); margin-top: var(--sv-5); }

/* ── Contact layout ───────────────────────────────────────────────────────── */
.sv-contact { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sv-8); align-items: start; }
@media (max-width: 1000px) { .sv-contact { grid-template-columns: 1fr; } }
.sv-contact__info { display: grid; gap: var(--sv-5); }
.sv-contact__form h2 { font-size: var(--sv-fs-2xl); }

/* ── Map ──────────────────────────────────────────────────────────────────── */
.sv-map {
  height: clamp(320px, 45vw, 460px);
  border-radius: var(--sv-r-lg);
  overflow: hidden;
  border: 1px solid var(--sv-line);
  box-shadow: var(--sv-shadow-sm);
  z-index: 1;
}
.sv-map-pin { background: none !important; border: 0 !important; }

/* ── Empty state headline ─────────────────────────────────────────────────── */
.sv-empty h1 { font-size: var(--sv-fs-2xl); margin-block: var(--sv-4) var(--sv-2); }

/* ── Factory photo mosaic (home + about) ───────────────────────────────── */
.sv-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: var(--sv-3);
}
.sv-mosaic__item {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--sv-r-lg); background: var(--sv-bg-alt);
}
.sv-mosaic__item:nth-child(1), .sv-mosaic__item:nth-child(6) { grid-column: span 2; grid-row: span 2; }
.sv-mosaic__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.sv-mosaic__item:hover img { transform: scale(1.06); }
.sv-mosaic__cap {
  position: absolute; inset-inline: 0; bottom: 0; padding: 28px 12px 10px;
  color: #fff; font-size: var(--sv-fs-xs); font-weight: 600;
  background: linear-gradient(transparent, rgba(10, 13, 20, .78));
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.sv-mosaic__item:hover .sv-mosaic__cap, .sv-mosaic__item:focus-visible .sv-mosaic__cap { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .sv-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .sv-mosaic__item:nth-child(6) { grid-column: auto; grid-row: auto; }
  .sv-mosaic__cap { opacity: 1; transform: none; }
}

/* ── About: facilities split with two photos ───────────────────────────── */
.sv-facility { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sv-8, 48px); align-items: center; }
.sv-facility__media { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sv-3); }
.sv-facility__media img { width: 100%; height: 320px; object-fit: cover; border-radius: var(--sv-r-lg); }
.sv-facility__media img:nth-child(2) { margin-top: 48px; }
.sv-facility__stats { display: grid; gap: var(--sv-3); margin-top: var(--sv-5, 24px); }
.sv-facility__stat {
  display: flex; align-items: center; gap: var(--sv-4, 16px);
  padding: var(--sv-4, 16px); border-radius: var(--sv-r-lg);
  background: var(--sv-bg); border: 1px solid var(--sv-line);
}
.sv-facility__stat i { font-size: 22px; color: var(--sv-red); width: 32px; text-align: center; }
.sv-facility__stat strong { font-size: var(--sv-fs-2xl); line-height: 1; }
.sv-facility__stat span { color: var(--sv-text-muted); }
@media (max-width: 900px) {
  .sv-facility { grid-template-columns: 1fr; }
  .sv-facility__media img { height: 220px; }
}

/* ── About: organisation chart ─────────────────────────────────────────── */
.sv-org { display: grid; gap: var(--sv-4, 16px); }
.sv-org__top { justify-self: center; max-width: 420px; text-align: center; background: var(--sv-red); color: #fff; }
.sv-org__top p { color: rgba(255,255,255,.85); }
.sv-org__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sv-4, 16px); }
.sv-org__node {
  padding: var(--sv-5, 20px); border-radius: var(--sv-r-lg);
  background: var(--sv-bg); border: 1px solid var(--sv-line);
  border-top: 3px solid var(--sv-red);
}
.sv-org__node h3 { font-size: var(--sv-fs-lg); margin-bottom: 6px; display: flex; gap: 10px; align-items: center; }
.sv-org__node p { font-size: var(--sv-fs-sm); color: var(--sv-text-muted); margin: 0; }
.sv-org__top h3 { justify-content: center; color: #fff; }
@media (max-width: 900px) { .sv-org__row { grid-template-columns: 1fr; } }

/* Arabic section eyebrows: on Arabic pages the small uppercase label read as a
   faint tag above the heading. Arabic has no capitals, so give it a little
   more size instead, in brand red. */
html[lang="ar"] .sv-eyebrow { font-size: var(--sv-fs-sm); font-weight: 700; }

/* Products filter: in-place refresh (site.js ajaxFilters) */
[data-sv-ajax] { transition: opacity .2s ease; }
[data-sv-ajax].is-loading { opacity: .55; pointer-events: none; }

/* Products: brand filter shown as logo tiles. The active tile keeps a white
   background (a red fill would swallow red/colour logos) and gets a red ring. */
.sv-filters--soft .sv-filter.sv-filter--logo {
  display: inline-block; overflow: hidden;
  width: 112px; height: 52px; padding: .4rem .65rem;
  background: #fff;
}
.sv-filter--logo img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.sv-filters--soft .sv-filter.sv-filter--logo.is-active {
  background: #fff; border-color: var(--sv-red);
  box-shadow: 0 0 0 2px var(--sv-red) inset, 0 6px 16px rgba(227, 30, 36, .15);
}
.sv-filter--logo:hover img { transform: scale(1.05); }
.sv-filter--logo img { transition: transform .2s; }
@media (max-width: 640px) {
  .sv-filters--soft .sv-filter.sv-filter--logo { width: 92px; height: 44px; }
}
.sv-filters--soft:has(.sv-filter--logo) { align-items: center; }
.sv-filters--soft:has(.sv-filter--logo) > .sv-filter:not(.sv-filter--logo) { height: 52px; display: inline-flex; align-items: center; }
@media (max-width: 640px) { .sv-filters--soft:has(.sv-filter--logo) > .sv-filter:not(.sv-filter--logo) { height: 44px; } }