/*
 * Public site v3 layer (loaded after front.css).
 *
 * Design read: B2B catalog and request flow for procurement staff and plant
 * engineers, in the "Industrial Precision" language of DESIGN_SYSTEM.md
 * (black and white, condensed uppercase headings, 0px radius).
 * Dials: ENERGY 2 / RHYTHM 2 / MOTION 1 (hover states only, no autoplay).
 *
 * Color model (owner decision 2026-10-14): --primary (default black) carries
 * the structure: text, header, footer, dark bands. --secondary (default
 * #CC0000) is the one accent, at medium intensity: it marks actions (main
 * CTAs, add to request, send request), states (active nav, hover) and small
 * details (title rule segment, kickers, tags, cart count, "new" tag). No
 * full red bands. Both come from Settings > Appearance via the layout;
 * --black and --red are aliases so older rules follow the settings.
 * Identity motif: a 4px black rule above every section heading, with a short
 * red segment at its left start.
 */

:root {
  --gm: #595959;          /* secondary text: 7:1 on white, 6.4:1 on --surface */
  --footer-bg: var(--primary, #000);
  --footer-text: rgba(255, 255, 255, .82);  /* about 15:1 on black */
  --tap: 44px;
  /*
   * Accent on dark backgrounds. #CC0000 on black is only about 3.6:1, which
   * passes WCAG AA for large or bold 18.66px+ text but not for the small
   * kickers and footer links. Mixing 30% white gives about #DB4D4D, about
   * 5.2:1 on black, so small accent text on dark bands uses this tint.
   * Accent text on white uses --secondary directly (#CC0000 is 5.9:1).
   */
  --secondary-on-dark: color-mix(in srgb, var(--secondary, #CC0000) 70%, white);
  --accent-rule: 56px;    /* length of the red segment on section title rules */
}

/* ---------- Base and accessibility ---------- */
html { scroll-padding-top: 80px; }
body { line-height: 1.55; }
img { max-width: 100%; height: auto; }
main:focus { outline: none; }

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

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 10100;
  background: var(--black); color: var(--white); padding: 12px 16px;
  font-family: var(--fh); font-weight: 700; text-transform: uppercase;
}
.skip-link:focus { top: 12px; color: var(--white); }

/* One focus style for every interactive element (R-32). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--black) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--white);
}
.site-footer a:focus-visible,
.hero-v3 a:focus-visible,
.hero-v3 button:focus-visible,
.ann a:focus-visible {
  outline-color: var(--white) !important;
  box-shadow: 0 0 0 4px var(--black);
}

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

.btn-black,
.btn-accent,
.btn-solid-white,
.btn-outline-white,
.btn-outline-black,
.btn-ghost-black {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 12px 22px; border-radius: 0;
  font-family: var(--fh); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  cursor: pointer; text-align: center;
}
.btn-black { background: var(--black); color: var(--white); border: 1px solid var(--black); }
.btn-black:hover { background: #222; color: var(--white); text-decoration: none; }
.btn-ghost-black { background: var(--white); color: var(--black); border: 1px solid var(--black); }
.btn-ghost-black:hover, .btn-ghost-black:focus-visible { background: var(--white); color: var(--secondary); border-color: var(--secondary); text-decoration: none; }
.btn-ghost-black[aria-disabled="true"]:hover { color: var(--black); border-color: var(--black); }
/* Main call to action: the accent color with white text; hover and focus go black. */
.btn-accent { background: var(--secondary); color: var(--white); border: 1px solid var(--secondary); }
.btn-accent:hover,
.btn-accent:focus-visible { background: var(--primary); border-color: var(--primary); color: var(--white); text-decoration: none; }
/* On a dark band a black hover would vanish, so it keeps a white edge. */
.hero-v3 .btn-accent:hover,
.hero-v3 .btn-accent:focus-visible { border-color: var(--white); }

/* ---------- Announcement bar ---------- */
.ann { letter-spacing: .1em; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.ann-sep { opacity: .7; }

/* ---------- Header ---------- */
nav { position: static; background: none; border: 0; z-index: auto; }
.site-header {
  position: sticky; top: 0; z-index: 999;
  background: var(--white); border-bottom: 1px solid var(--gl);
}
.nv { padding: 0 24px; gap: 20px; }
.logo-wrap { display: inline-flex; align-items: center; min-height: var(--tap); flex-shrink: 0; }
.logo-wrap img { height: 40px; width: auto; display: block; }

/* Logo left, menu centered in the space between, tools right (.nv is space-between in front.css). */
.nv { justify-content: space-between; }
.nl-wrap { flex: 0 1 auto; display: flex; justify-content: center; }
.nl { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nl > li > a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-family: var(--fh); font-size: 15px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--black); border-bottom: 2px solid transparent;
}
.nl > li > a:hover,
.nl > li > a[aria-current="page"] { border-bottom-color: var(--secondary); text-decoration: none; }

.has-mega { position: static; display: flex; align-items: center; padding-bottom: 0; margin-bottom: 0; }
.mega-toggle {
  min-width: 32px; min-height: var(--tap); background: none; border: 0; cursor: pointer;
  color: var(--black); font-size: 11px;
}
.mega-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu,
.has-mega.is-open .mega-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.mega-title { font-family: var(--fh); font-size: 15px; font-weight: 800; text-transform: uppercase; margin: 0 0 10px; }
.mega-title a { color: var(--black); }
.mega-list { list-style: none; padding: 0; margin: 0; }
.mega-list a { display: block; padding: 6px 0; color: var(--gd); font-size: 13px; }
.mega-list a:hover, .mega-title a:hover { text-decoration: underline; color: var(--black); }

.nr { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ic {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap); padding: 0;
  background: none; border: 0; color: var(--black); cursor: pointer; font-size: 18px;
  position: relative; text-decoration: none;
}
.ic:hover { color: var(--black); text-decoration: none; background: var(--surface); }

.nav-search { display: flex; align-items: center; border: 1px solid var(--gl); margin: 0; }
.nav-search input {
  width: 220px; height: 42px; border: 0; padding: 0 12px; font-size: 13px; font-family: var(--fb);
  background: transparent; color: var(--black);
}
.nav-search input::placeholder, .mobile-nav-search input::placeholder, .hero-search input::placeholder { color: #6b6b6b; }

.cart-link .badge {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red); color: var(--white); font-size: 11px; font-weight: 700; line-height: 1; border-radius: 9px;
}

.nav-dashboard {
  font-family: var(--fh); font-size: 13px; font-weight: 700; text-transform: uppercase;
  border: 1px solid var(--black); padding: 0 12px; min-height: var(--tap);
  display: inline-flex; align-items: center; color: var(--black); white-space: nowrap;
}

.lang-switch { display: inline-flex; border: 1px solid var(--gl); }
.lang-switch-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap);
  font-family: var(--fh); font-size: 13px; font-weight: 700; color: var(--gd);
}
.lang-switch-link:hover { color: var(--black); text-decoration: none; background: var(--surface); }
.lang-switch-link.is-active { background: var(--black); color: var(--white); }

.nav-burger { display: none; }

.mobile-nav {
  position: fixed; inset: 0; z-index: 10010; background: var(--white);
  overflow-y: auto; padding: 0 16px 32px;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav-head { display: flex; align-items: center; justify-content: space-between; min-height: 64px; border-bottom: 1px solid var(--gl); }
.mobile-nav-title { font-family: var(--fh); font-size: 20px; font-weight: 800; text-transform: uppercase; }
.mobile-nav-search { display: flex; margin: 16px 0; border: 1px solid var(--black); }
.mobile-nav-search input { flex: 1; min-width: 0; height: var(--tap); border: 0; padding: 0 12px; font-size: 16px; }
.mobile-nav-links { list-style: none; padding: 0; margin: 0 0 24px; }
.mobile-nav-links a {
  display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--gl);
  font-family: var(--fh); font-size: 18px; font-weight: 700; text-transform: uppercase; color: var(--black);
}
.mobile-nav-links .mobile-nav-sub a { padding-left: 16px; font-size: 16px; font-weight: 600; color: var(--gd); }
body.has-mobile-nav { overflow: hidden; }

@media (max-width: 1199px) {
  .nav-search input { width: 150px; }
  .nl { gap: 18px; }
}

@media (max-width: 991px) {
  .nl-wrap, .nav-search, .lang-switch--desktop, .nav-dashboard { display: none; }
  .nav-burger { display: inline-flex; }
  .nv { height: 64px; padding: 0 12px 0 16px; }
  .logo-wrap img { height: 34px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--footer-bg); color: var(--footer-text); padding: 64px 0 24px; border-top: 3px solid var(--secondary); }
.site-footer .fi { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.site-footer .fg { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.f-logo { display: block; width: 88px; height: 88px; margin-bottom: 16px; }
.site-footer .fdesc { color: var(--footer-text); font-size: 14px; line-height: 1.7; max-width: 380px; }
.site-footer .fh2 {
  font-family: var(--fh); font-size: 15px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--white); margin: 0 0 16px;
}
.f-contact { margin: 0; font-size: 14px; line-height: 1.6; }
.f-contact dt { color: var(--white); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-top: 12px; }
.f-contact dt:first-child { margin-top: 0; }
.f-contact dd { margin: 2px 0 0; color: var(--footer-text); overflow-wrap: anywhere; }
.f-contact a, .site-footer .fl a { color: var(--footer-text); text-decoration: underline; text-underline-offset: 3px; }
.f-contact a:hover, .site-footer .fl a:hover { color: var(--secondary-on-dark); }
.f-links { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.site-footer .fl { list-style: none; padding: 0; margin: 0; }
.site-footer .fl li { margin: 0; }
.site-footer .fl a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 14px; text-decoration: none; }
.site-footer .fb {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, .18); margin-top: 48px; padding-top: 20px;
}
.site-footer .fc { color: var(--footer-text); font-size: 13px; margin: 0; }
.site-footer .lang-switch { border-color: rgba(255, 255, 255, .3); }
.site-footer .lang-switch-link { color: var(--footer-text); }
.site-footer .lang-switch-link:hover { background: rgba(255, 255, 255, .1); color: var(--white); }
.site-footer .lang-switch-link.is-active { background: var(--white); color: var(--black); }

@media (max-width: 991px) {
  .site-footer .fg { grid-template-columns: 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
  .site-footer { padding-top: 48px; }
  .site-footer .fg, .f-links { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Floating WhatsApp ---------- */
.floating-whatsapp {
  position: fixed; right: 20px; bottom: 20px; z-index: 9980;
  width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;
  background: #1a7a4a; color: var(--white); border-radius: 50%; font-size: 26px;
}
.floating-whatsapp:hover { background: #145c38; color: var(--white); text-decoration: none; }
/* Room under the footer bar so the button never covers the language switch at the end of the page. */
body:has(.floating-whatsapp) .site-footer { padding-bottom: 96px; }

/* ---------- Shared sections ---------- */
.sec { padding: 64px 0; }
.sec--surface { background: var(--surface); }
.sh { align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.st { position: relative; margin: 0; padding-top: 14px; border-top: 4px solid var(--black); line-height: 1.05; }
/* Identity motif: the black title rule starts with a short accent segment. */
.st::before,
.showcase-clients__heading::before {
  content: ""; position: absolute; left: 0; top: -4px;
  width: min(var(--accent-rule), 100%); height: 4px; background: var(--secondary);
}
.sl { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--black); border-bottom: 0; text-decoration: underline; text-underline-offset: 4px; }
.sl:hover { color: var(--black); }

.grid-empty { grid-column: 1 / -1; padding: 40px 0; color: var(--gm); font-size: 15px; }
.grid-empty--catalog { text-align: center; padding: 56px 16px; }
.grid-empty--catalog i { font-size: 36px; color: var(--gm); margin-bottom: 12px; display: block; }
.grid-empty-title { font-family: var(--fh); font-size: 22px; font-weight: 800; text-transform: uppercase; color: var(--black); margin-bottom: 8px; }
.grid-empty--catalog p { margin-bottom: 16px; }

.photo-placeholder {
  min-height: 280px; display: flex; align-items: flex-end; padding: 16px;
  background: repeating-linear-gradient(135deg, #ededed 0 12px, #e4e4e4 12px 24px);
  border: 1px dashed #8a8a8a; color: var(--gd); font-size: 13px; font-weight: 600;
}

/* ---------- Product grid and cards ---------- */
.pg { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pg.is-loading { opacity: .5; pointer-events: none; }
/*
 * Card: thin frame on white so cards read as objects on the grey band.
 * Hover or keyboard focus inside the card turns the frame and the name to the
 * accent; the 2px lift only runs when the visitor allows motion.
 */
/* Scoped under .pg so these tie the legacy .cat-main .pc rules in front.css and win by order. */
.pg .pc {
  display: flex; flex-direction: column; background: var(--white); cursor: default;
  border: 1px solid var(--gl); padding: 8px; box-shadow: none;
  transition: border-color .15s ease, transform .15s ease;
}
.pg .pc:hover { box-shadow: none; transform: none; }
.pg .pc:hover, .pg .pc:focus-within { border-color: var(--secondary); }
.pg .pc:hover .pname, .pg .pc:focus-within .pname { color: var(--secondary); }
@media (prefers-reduced-motion: no-preference) {
  .pg .pc:hover, .pg .pc:focus-within { transform: translateY(-2px); }
}
.pc-link { display: flex; flex-direction: column; flex: 1; color: var(--black); text-decoration: none; }
.pc-link:hover { text-decoration: none; color: var(--black); }
.pc-link:hover .pname { text-decoration: underline; }
.pi-img { width: 75%; height: 75%; object-fit: contain; mix-blend-mode: multiply; }
.pi-ph { width: 100%; height: 100%; background: none; color: #8a8a8a; font-size: 44px; }
.pinfo { padding: 16px 8px 12px; flex: 1; }
.pbrand { color: var(--gm); font-weight: 600; letter-spacing: .1em; font-size: 11px; }
.pname { font-family: var(--fb); font-size: 15px; margin: 0 0 6px; overflow-wrap: anywhere; }
.pcat { margin-bottom: 0; }
/*
 * Card button (owner decision 2026-10-14): black at rest so a grid of cards
 * does not turn into a wall of red; the accent appears on hover and keyboard
 * focus. The big button on the product page stays red (.btn-accent). Focus
 * keeps the global 2px outline ring on top of the colour change.
 */
.pg .btn-card { min-height: var(--tap); background: var(--primary); color: var(--white); }
.pg .btn-card:not(.muted):not(.is-added):hover, .pg .btn-card:not(.muted):not(.is-added):focus-visible { background: var(--secondary); color: var(--white); }
/* Datasheet link: a quiet text link between the card body and its button. */
.pc-datasheet {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  min-height: var(--tap); padding: 0 8px; margin: 0 0 4px;
  font-size: 13px; font-weight: 600; color: var(--black); text-decoration: underline; text-underline-offset: 3px;
}
.pc-datasheet i { color: var(--secondary); }
.pc-datasheet:hover, .pc-datasheet:focus-visible { color: var(--secondary); }
.pg .btn-card.is-added { background: #1a7a4a; }
.new-tag { font-size: 11px; }

@media (max-width: 991px) { .pg, .cat-main .pg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 767px) { .pg, .cat-main .pg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .pinfo { padding: 12px 4px 8px; } .pname { font-size: 14px; } }

/* ---------- Landing ---------- */
.hero-v3 { background: var(--black); color: var(--white); padding: 72px 0; }
.hero-v3-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: end; }
/* Kicker on a dark band: 13px bold is not "large" text, so it uses the lighter accent tint (see :root). */
.hero-v3-kicker,
.about-v3-hero .about-v3-kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary-on-dark); margin: 0 0 16px; }
.hero-v3-title {
  font-family: var(--fh); font-size: clamp(40px, 6vw, 72px); font-weight: 800;
  line-height: .98; text-transform: uppercase; margin: 0 0 20px;
}
/* Short accent bar under the title of each dark band (decorative, not text). */
.hero-v3-title::after,
.about-v3-hero h1::after {
  content: ""; display: block; width: var(--accent-rule); height: 4px; margin-top: 20px; background: var(--secondary);
}
.hero-v3-lead { font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .85); max-width: 620px; margin-bottom: 28px; }
.hero-v3-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-solid-white { background: var(--white); color: var(--black); border: 1px solid var(--white); }
.btn-solid-white:hover { background: #e6e6e6; color: var(--black); text-decoration: none; }
.btn-outline-white { background: transparent; color: var(--white); border: 1px solid var(--white); }
.btn-outline-white:hover, .btn-outline-white:focus-visible { background: transparent; color: var(--secondary-on-dark); border-color: var(--secondary-on-dark); text-decoration: none; }
.hero-search { background: var(--white); color: var(--black); padding: 24px; }
.hero-search-label { display: block; font-family: var(--fh); font-size: 20px; font-weight: 800; text-transform: uppercase; margin-bottom: 12px; }
.hero-search-row { display: flex; gap: 0; }
.hero-search-row input {
  flex: 1; min-width: 0; height: 48px; border: 1px solid var(--black); border-right: 0;
  padding: 0 14px; font-size: 16px; font-family: var(--fb);
}
.hero-search-row .btn-black { min-height: 48px; }

.cat-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0; border-top: 1px solid var(--gl); border-left: 1px solid var(--gl); }
.cat-link {
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-height: 120px; padding: 20px;
  border-right: 1px solid var(--gl); border-bottom: 1px solid var(--gl); color: var(--black); height: 100%;
}
.cat-link:hover { background: var(--black); color: var(--white); text-decoration: none; }
.cat-link-name { font-family: var(--fh); font-size: 22px; font-weight: 800; text-transform: uppercase; line-height: 1.05; overflow-wrap: anywhere; }
.cat-link-meta { font-size: 13px; color: var(--gm); }
.cat-link:hover .cat-link-meta { color: rgba(255, 255, 255, .85); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chip {
  min-height: var(--tap); padding: 0 16px; background: var(--white); border: 1px solid #8a8a8a; color: var(--black);
  font-family: var(--fh); font-size: 14px; font-weight: 700; text-transform: uppercase; cursor: pointer;
}
.chip:hover { border-color: var(--black); }
.chip[aria-pressed="true"] { background: var(--black); border-color: var(--black); color: var(--white); }

.ordering-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.ordering-copy p { font-size: 16px; line-height: 1.8; color: var(--gd); max-width: 640px; margin: 20px 0 24px; }
.bom-card {
  display: flex; flex-direction: column; gap: 10px; padding: 28px; border: 1px solid var(--black); color: var(--black);
}
.bom-card:hover { background: var(--black); color: var(--white); text-decoration: none; }
.bom-card-kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); }
.bom-card:hover .bom-card-kicker { color: var(--secondary-on-dark); }
.bom-card-title { font-family: var(--fh); font-size: 28px; font-weight: 800; text-transform: uppercase; line-height: 1; }
.bom-card-body { font-size: 14px; line-height: 1.6; }
.bom-card-cta { font-family: var(--fh); font-weight: 700; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; margin-top: 6px; }

.brand-v3 { padding: 64px 0; border-top: 1px solid var(--gl); }
.brand-v3-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: stretch; }
.brand-v3-kicker { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); margin-bottom: 8px; }
.brand-v3-title { font-family: var(--fh); font-size: clamp(44px, 6vw, 72px); font-weight: 800; text-transform: uppercase; line-height: .95; margin: 0 0 20px; }
.brand-v3-body { font-size: 16px; line-height: 1.75; color: var(--gd); margin-bottom: 24px; max-width: 560px; }

.banner-slide { position: relative; }
.banner-img { width: 100%; height: auto; max-height: 420px; object-fit: cover; display: block; }
.banner-title { font-family: var(--fh); font-size: 26px; font-weight: 800; text-transform: uppercase; margin: 16px 0 0; }
.banner-title a { color: var(--black); text-decoration: underline; text-underline-offset: 4px; }
.carousel-dots { display: flex; gap: 4px; margin-top: 12px; }
.carousel-dot { width: var(--tap); height: var(--tap); background: none; border: 0; cursor: pointer; position: relative; }
.carousel-dot::after { content: ''; position: absolute; left: 6px; right: 6px; top: 20px; height: 4px; background: #8a8a8a; }
.carousel-dot.active::after { background: var(--black); }

/* Video block: a centered 880px column; the heading shares the video's left edge. */
.wrap.video-sec { max-width: calc(880px + 48px); }
.video-sec .st { margin-bottom: 24px; }
.video-facade { max-width: 880px; }
.video-sec .video-facade { margin: 0 auto; }
@media (max-width: 575px) { .wrap.video-sec { max-width: none; } }
.video-facade-btn {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000; cursor: pointer; overflow: hidden;
}
.video-facade-btn img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.video-facade-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--black); font-size: 24px;
}
.video-facade-btn:hover .video-facade-play { background: var(--black); color: var(--white); }
.video-facade-note { font-size: 12px; color: var(--gm); margin-top: 8px; }
.video-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }

/* Stats and clients (CMS blocks, hidden when empty) */
.showcase-stats { padding: 48px 0; background: var(--black); color: var(--white); }
.showcase-stats__heading { font-family: var(--fh); font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 24px; }
.showcase-stats__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; margin: 0; }
.showcase-stats__item { display: flex; flex-direction: column-reverse; border-top: 1px solid rgba(255, 255, 255, .3); padding-top: 12px; }
.showcase-stats__value { font-family: var(--fh); font-size: 44px; font-weight: 800; line-height: 1; margin: 0 0 6px; }
.showcase-stats__label { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .85); }
.showcase-clients { padding: 56px 0; border-top: 1px solid var(--gl); }
.showcase-clients__heading { position: relative; font-family: var(--fh); font-size: 22px; font-weight: 800; text-transform: uppercase; margin: 0 0 24px; padding-top: 14px; border-top: 4px solid var(--black); display: inline-block; }
.showcase-clients__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.showcase-clients__item { border: 1px solid var(--gl); min-height: 96px; display: flex; align-items: center; justify-content: center; padding: 8px; }
.showcase-clients__link { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 80px; color: var(--black); }
.showcase-clients__logo { max-width: 160px; max-height: 80px; width: auto; height: auto; object-fit: contain; }
.showcase-clients__name { font-family: var(--fh); font-size: 16px; font-weight: 700; text-transform: uppercase; text-align: center; }

@media (max-width: 991px) {
  .hero-v3-grid, .ordering-grid, .brand-v3-grid { grid-template-columns: 1fr; gap: 32px; }
  .photo-placeholder { min-height: 180px; }
}
@media (max-width: 575px) {
  .hero-v3 { padding: 48px 0; }
  .sec, .brand-v3 { padding: 48px 0; }
  .wrap { padding: 0 16px; }
  .hero-search { padding: 16px; }
  .cat-links { grid-template-columns: 1fr 1fr; }
  .cat-link { min-height: 96px; padding: 14px; }
  .cat-link-name { font-size: 18px; }
  .st { font-size: 24px; }
}

/* ---------- Breadcrumb ---------- */
.crumbs { background: var(--surface); border-bottom: 1px solid var(--gl); }
.crumbs ol {
  list-style: none; max-width: 1280px; margin: 0 auto; padding: 12px 24px;
  display: flex; flex-wrap: wrap; gap: 4px 8px; font-family: var(--fh); font-size: 13px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--gm);
}
.crumbs li { overflow-wrap: anywhere; }
.crumbs li + li::before { content: '/'; margin-right: 8px; color: var(--gm); }
.crumbs a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current="page"] { color: var(--black); font-weight: 700; }
@media (max-width: 575px) { .crumbs ol { padding: 10px 16px; } }

/* ---------- Catalog ---------- */
.cat-page { max-width: 1280px; margin: 0 auto; padding: 40px 24px 80px; }
.cat-header { margin-bottom: 24px; }
.cat-h1 { font-family: var(--fh); font-size: clamp(32px, 4vw, 44px); font-weight: 800; text-transform: uppercase; line-height: 1; margin: 0 0 10px; overflow-wrap: anywhere; }
.cat-desc { font-size: 15px; color: var(--gd); max-width: 760px; line-height: 1.6; }
.cat-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; margin-top: 24px; }
.cat-main { min-width: 0; }
.cat-filter-toggle { display: none; }

.f-title {
  font-family: var(--fh); font-size: 16px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; border-bottom: 1px solid var(--black); padding-bottom: 12px; margin-bottom: 12px; color: var(--black);
}
.filter-box + .filter-box { margin-top: 28px; }
.f-accordion { list-style: none; margin: 0; padding: 0; }
.f-item { border-bottom: 1px solid var(--gl); }
.f-row { display: flex; align-items: stretch; justify-content: space-between; padding: 0; cursor: default; }
.f-row a {
  flex: 1; display: flex; align-items: center; min-height: var(--tap); color: var(--black); font-size: 14px; font-weight: 600;
}
.f-row a:hover { text-decoration: underline; color: var(--black); }
.f-toggle {
  width: var(--tap); min-height: var(--tap); background: none; border: 0; cursor: pointer; font-size: 12px; color: var(--black);
}
.f-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.f-sub { display: none; list-style: none; margin: 0; padding: 0 0 8px 12px; }
.f-sub.is-open { display: block; }
.f-sub a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; color: var(--gd); font-size: 14px; }
.f-sub a:hover, .f-sub a[aria-current="page"] { color: var(--black); text-decoration: underline; }
.f-sub a[aria-current="page"] { font-weight: 700; }
.f-count { color: var(--gm); font-size: 12px; }
.f-field { margin-bottom: 14px; }
.f-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.f-field select { width: 100%; min-height: var(--tap); border: 1px solid #8a8a8a; padding: 0 10px; font-size: 14px; background: var(--white); }
/* Number attribute: a from-to range (spec_{id}_min / spec_{id}_max). */
.f-range { border: 0; padding: 0; min-width: 0; }
.f-range legend { font-size: 13px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.f-range-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.f-range-inputs label { font-weight: 400; font-size: 12px; color: var(--gd); margin-bottom: 4px; }
.f-range-inputs input { width: 100%; min-height: var(--tap); border: 1px solid #8a8a8a; padding: 0 10px; font-size: 14px; background: var(--white); box-sizing: border-box; }
.f-range-hint { font-size: 12px; color: var(--gd); margin: 6px 0 0; }
.f-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

.cat-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
.cat-search { display: flex; flex: 1 1 320px; max-width: 560px; border: 1px solid var(--black); margin: 0; }
.cat-search input { flex: 1; min-width: 0; height: var(--tap); border: 0; padding: 0 12px; font-size: 15px; font-family: var(--fb); }
.cat-search button {
  min-height: var(--tap); padding: 0 20px; border: 0; background: var(--black); color: var(--white);
  font-family: var(--fh); font-weight: 700; text-transform: uppercase; cursor: pointer;
}
.cat-sort { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.cat-sort label { font-size: 12px; font-weight: 600; color: var(--gd); margin: 0; }
.cat-sort select { min-height: var(--tap); border: 1px solid #8a8a8a; padding: 0 10px; font-size: 14px; background: var(--white); }
.search-indicator { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--gl); margin-bottom: 20px; font-size: 14px; color: var(--gd); }
.search-indicator a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--black); font-weight: 700; text-decoration: underline; }
.cat-status { font-size: 14px; color: var(--gd); margin-bottom: 16px; }

/*
 * Feature & application chips: square-cornered outlined labels like the rest
 * of the system (0px radius). Selected = solid black with a check icon, so the
 * state does not depend on colour alone.
 */
.tag-chips { margin: 0 0 20px; }
.tag-chips-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gd); margin: 0 0 8px; }
.tag-chips-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px;
  border: 1px solid #8a8a8a; background: var(--white); color: var(--black);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.tag-chip:hover, .tag-chip:focus-visible { border-color: var(--secondary); color: var(--secondary); text-decoration: none; }
.tag-chip[aria-current="true"] { background: var(--black); border-color: var(--black); color: var(--white); }
.tag-chip[aria-current="true"]:hover, .tag-chip[aria-current="true"]:focus-visible { background: var(--secondary); border-color: var(--secondary); color: var(--white); }

/* Tags on the product page: same chip shape, smaller, linking to the filtered listing. */
.p-tags { margin: 4px 0 16px; }
.p-tags-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gd); margin: 0 0 6px; }
.p-tags-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.p-tag {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px;
  border: 1px solid var(--black); color: var(--black); font-size: 13px; font-weight: 600; text-decoration: none;
}
.p-tag:hover, .p-tag:focus-visible { border-color: var(--secondary); color: var(--secondary); text-decoration: none; }

.cat-pagination { margin-top: 40px; }
.cat-pagination .pagination { flex-wrap: wrap; gap: 8px; }
.cat-pagination .page-link { min-height: var(--tap); min-width: var(--tap); display: inline-flex; align-items: center; justify-content: center; border-radius: 0 !important; color: var(--black); border-color: #8a8a8a; }
.cat-pagination .page-item.active .page-link { background: var(--black); border-color: var(--black); color: var(--white); }
.cat-pagination .page-item.disabled .page-link { color: var(--gm); }

.subcat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.subcat-card { display: flex; flex-direction: column; gap: 12px; height: 100%; border: 1px solid var(--gl); padding: 16px; color: var(--black); }
.subcat-card:hover, .subcat-card:focus-visible { border-color: var(--secondary); text-decoration: none; color: var(--black); }
.subcat-card:hover .subcat-card-name { color: var(--secondary); }
.subcat-card-img { aspect-ratio: 4 / 3; background: var(--surface); display: flex; align-items: center; justify-content: center; color: #8a8a8a; font-size: 32px; overflow: hidden; }
.subcat-card-img img { width: 80%; height: 80%; object-fit: contain; }
.subcat-card-name { font-family: var(--fh); font-size: 18px; font-weight: 800; text-transform: uppercase; line-height: 1.1; }
.subcat-card-count { font-size: 13px; color: var(--gm); }

.search-list { list-style: none; padding: 0; margin: 0; }
.search-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--gl); }
.search-row-img { width: 96px; height: 96px; background: var(--surface); display: flex; align-items: center; justify-content: center; color: #8a8a8a; font-size: 28px; }
.search-row-img img { width: 90%; height: 90%; object-fit: contain; }
.search-row h2 { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.search-row h2 a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.search-row h2 a:hover { color: var(--secondary); }
.search-row-meta { font-size: 13px; color: var(--gm); margin: 0; overflow-wrap: anywhere; }
/* Same request button as the product card, so a search hit can be requested without opening the page. */
.search-row { grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; }
.search-row-add { width: auto; min-height: var(--tap); padding: 0 16px; background: var(--primary); }
.search-row-add:not(.is-added):hover, .search-row-add:not(.is-added):focus-visible { background: var(--secondary); color: var(--white); }
.search-row-add.is-added { background: #1a7a4a; }

@media (max-width: 991px) {
  .cat-layout { grid-template-columns: 1fr; gap: 20px; }
  .cat-filter-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    min-height: var(--tap); padding: 0 16px; background: var(--white); border: 1px solid var(--black);
    font-family: var(--fh); font-size: 15px; font-weight: 700; text-transform: uppercase; cursor: pointer;
  }
  .cat-filter-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
  .cat-sidebar-panel { display: none; padding: 16px; border: 1px solid var(--gl); border-top: 0; }
  .cat-sidebar-panel.is-open { display: block; }
}
@media (max-width: 575px) {
  .cat-page { padding: 24px 16px 56px; }
  .cat-sort { flex: 1 1 100%; }
  .search-row { grid-template-columns: 72px minmax(0, 1fr); }
  .search-row-add { grid-column: 2; justify-self: start; }
  .search-row-img { width: 72px; height: 72px; }
}

/* ---------- Product detail ---------- */
.p-detail { max-width: 1280px; margin: 0 auto; padding: 40px 24px 80px; }
.p-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; }
.p-main-img { position: relative; aspect-ratio: 1; background: var(--surface); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.p-main-img > img, .p-main-img .p-main-photo { width: 85%; height: 85%; object-fit: contain; }
.p-main-img .video-facade, .p-main-img [data-video-holder] { width: 100%; max-width: none; }
.p-main-ph { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--gm); font-size: 14px; }
.p-main-ph i { font-size: 72px; color: #8a8a8a; }
.p-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.p-thumb {
  width: 72px; height: 72px; padding: 4px; background: var(--surface); border: 1px solid var(--gl); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px;
  font-family: var(--fh); font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--black);
}
.p-thumb img { width: 100%; height: 100%; object-fit: contain; }
.p-thumb:hover { border-color: var(--black); }
.p-thumb[aria-pressed="true"] { border: 2px solid var(--secondary); }
.p-thumb i { font-size: 20px; }
.p-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--gm); margin-bottom: 8px; }
.p-brand-tag { font-weight: 700; color: var(--black); text-transform: uppercase; letter-spacing: .1em; }
.p-name { font-family: var(--fh); font-size: clamp(28px, 3.5vw, 40px); font-weight: 800; text-transform: uppercase; line-height: 1.05; margin: 0 0 8px; overflow-wrap: anywhere; }
.p-cat-tag { font-size: 14px; color: var(--gd); margin-bottom: 16px; }
.p-cat-tag a { color: var(--black); text-decoration: underline; }
.stock-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.stock-tag--pre { background: #fff3cd; color: #5c4a00; border: 1px solid #c47b00; }
.p-price-box { border-top: 1px solid var(--gl); border-bottom: 1px solid var(--gl); padding: 16px 0; margin-bottom: 20px; background: none; }
.p-price-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 4px; }
.p-price-note { font-size: 14px; color: var(--gd); margin: 0; line-height: 1.6; }
.p-actions { display: flex; flex-direction: column; gap: 12px; }
.p-actions form { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.p-qty { display: flex; align-items: center; gap: 12px; }
.p-qty label { font-size: 13px; font-weight: 700; text-transform: uppercase; margin: 0; }
.p-qty-input { width: 96px; min-height: var(--tap); border: 1px solid #8a8a8a; text-align: center; font-size: 16px; }
.p-actions .btn-black, .p-actions .btn-accent, .p-actions .btn-ghost-black { width: 100%; min-height: 52px; }
.p-docs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gl); }
.p-docs li { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--gl); font-size: 14px; }
.p-docs a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--black); font-weight: 700; text-decoration: underline; }
.p-docs-title { font-family: var(--fh); font-size: 18px; font-weight: 800; text-transform: uppercase; margin: 24px 0 8px; }

.p-tabs { margin-top: 56px; }
.p-tab-nav { display: flex; gap: 0; border-bottom: 1px solid var(--gl); overflow-x: auto; }
.p-tab-link {
  min-height: var(--tap); padding: 0 20px; background: none; border: 0; border-bottom: 3px solid transparent; cursor: pointer;
  font-family: var(--fh); font-size: 15px; font-weight: 700; text-transform: uppercase; color: var(--gd); white-space: nowrap;
}
.p-tab-link[aria-selected="true"] { color: var(--black); border-bottom-color: var(--black); }
.p-tab-content { display: block; padding: 24px 0; }
.p-tab-content[hidden] { display: none; }
.p-desc { line-height: 1.8; color: var(--gd); font-size: 15px; max-width: 800px; }
.p-empty { color: var(--gm); }
.spec-table { width: 100%; max-width: 800px; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: 12px 8px; border-bottom: 1px solid var(--gl); font-size: 14px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.spec-table th { width: 40%; font-weight: 600; color: var(--gd); }
.dl-group-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gd); margin: 16px 0 8px; }
.download-card { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--gl); }
.dl-icon { font-size: 24px; color: var(--black); }
.dl-info { flex: 1; min-width: 0; }
.dl-name { font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.dl-meta { font-size: 13px; color: var(--gm); margin: 0; }
.p-related { margin-top: 72px; }

@media (max-width: 991px) {
  .p-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 575px) {
  .p-detail { padding: 24px 16px 56px; }
  .p-thumb { width: 60px; height: 60px; }
  .download-card { flex-wrap: wrap; }
}

/*
 * Gallery with a thumbnail strip (owner decision 2026-10-14).
 * Desktop: vertical strip left of the main image, so image plus strip roughly
 * match the info column instead of leaving a tall square beside it. The strip
 * takes the main image's height (contain: size) and scrolls if there are many
 * items. Up to 768px: the main image is a swipeable scroll-snap row (no
 * library) and the strip becomes a horizontal row below it.
 */
.p-gallery--strip {
  display: grid; grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "strip main";
  gap: 12px; align-items: start;
}
.p-gallery--strip .p-main-img { grid-area: main; }
.p-gallery--strip .p-thumbs {
  grid-area: strip; align-self: stretch; contain: size;
  flex-direction: column; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 3px;
  overflow-y: auto; scrollbar-width: thin;
}
.p-thumbs .p-thumb { flex-shrink: 0; }
/* Keep the focus ring inside the scrolling strip so it is not clipped. */
.p-thumbs .p-thumb:focus-visible { outline-offset: -4px; box-shadow: none; }

/* Questions block under "Add to request": email always, WhatsApp only with a real number. */
.p-contact { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--gl); }
.p-contact-title { font-family: var(--fh); font-size: 18px; font-weight: 800; text-transform: uppercase; line-height: 1.1; margin: 0 0 6px; }
.p-contact-body { font-size: 14px; line-height: 1.6; color: var(--gd); margin: 0 0 6px; }
.p-contact-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 28px; }
.p-contact-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap);
  color: var(--black); font-size: 14px; font-weight: 600; text-decoration: none;
}
.p-contact-link i { width: 18px; font-size: 16px; color: var(--secondary); text-align: center; }
.p-contact-label { text-decoration: underline; text-underline-offset: 3px; }
.p-contact-detail { display: block; font-size: 13px; font-weight: 400; color: var(--gm); overflow-wrap: anywhere; }
.p-contact-link:hover, .p-contact-link:focus-visible { color: var(--secondary); text-decoration: none; }

@media (max-width: 768px) {
  .p-gallery--strip { display: block; }
  .p-main-img {
    justify-content: flex-start; align-items: stretch;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .p-main-img::-webkit-scrollbar { display: none; }
  .p-main-img > [data-gallery-panel] { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .p-main-img > .p-panel:not([hidden]) { display: flex; }
  .p-gallery--strip .p-thumbs {
    contain: none; flex-direction: row; overflow-x: auto; overflow-y: hidden;
    margin-top: 12px; padding: 3px;
  }
}

/* ---------- About ---------- */
.about-v3-hero { background: var(--black); color: var(--white); padding: 64px 0; }
.about-v3-hero h1 { font-family: var(--fh); font-size: clamp(36px, 5vw, 60px); font-weight: 800; text-transform: uppercase; line-height: 1; margin: 0 0 16px; }
.about-v3-hero p { font-size: 17px; line-height: 1.7; color: rgba(255, 255, 255, .85); max-width: 680px; margin: 0; }
/* Facts strip: three equal columns inside the page container, each opened by an accent rule. */
.about-facts {
  list-style: none; max-width: 1280px; margin: 0 auto; padding: 40px 24px 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.about-facts li {
  padding: 16px 0 0; border-top: 3px solid var(--secondary);
  font-family: var(--fh); font-size: 18px; font-weight: 700; line-height: 1.2; text-transform: uppercase; overflow-wrap: anywhere;
}
.about-overview { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.about-overview p { font-size: 16px; line-height: 1.8; color: var(--gd); margin: 16px 0 0; }
.about-points { margin: 20px 0 28px; padding-left: 20px; font-size: 15px; line-height: 1.9; }
.about-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.about-split { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--gl); }
.about-split > div { padding: 48px 24px; }
.about-split > div + div { border-left: 1px solid var(--gl); }
.about-split h2 { font-family: var(--fh); font-size: 36px; font-weight: 800; text-transform: uppercase; margin: 0 0 12px; }
.about-split p { font-size: 15px; line-height: 1.75; color: var(--gd); margin-bottom: 20px; }
.about-kicker-v3 { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); margin-bottom: 6px; }
@media (max-width: 991px) {
  .about-overview, .about-split { grid-template-columns: 1fr; }
  .about-split > div + div { border-left: 0; border-top: 1px solid var(--gl); }
}
@media (max-width: 575px) {
  .about-v3-hero { padding: 44px 0; }
  .about-facts { grid-template-columns: 1fr; gap: 16px; padding: 28px 16px 0; }
  .about-facts li { font-size: 16px; padding-top: 12px; }
  .about-split > div { padding: 36px 16px; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}

/* ---------- Gallery panels and catalog banners ---------- */
.p-panel { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.p-panel[hidden] { display: none; }
.p-panel--video { align-items: stretch; }
.p-panel--video .video-facade { width: 100%; align-self: center; }
.p-panel--video .video-facade-note { padding: 0 12px; }
.cat-banners { margin-bottom: 32px; }
.banner-slide[hidden] { display: none; }
/* Brand label: neutral grey everywhere (red stays reserved for the cart count). */
.cat-main .pbrand, .pg .pbrand { color: var(--gm); font-size: 11px; letter-spacing: .1em; }
.cat-main .pname { font-family: var(--fb); }
/* Product info: no decorative left stripe or chip (front.css leftovers). */
.p-price-box { border-left: 0; padding-left: 0; padding-right: 0; }
.p-cat-tag { display: block; background: none; border: 0; padding: 0; text-transform: none; letter-spacing: 0; font-weight: 400; }
.p-tab-nav { scrollbar-width: thin; }

/* ---------- Privacy Policy (/privacy-policy) and form privacy notes ---------- */
.pp { padding-top: 40px; padding-bottom: 64px; }
.pp-head { max-width: 72ch; margin-bottom: 32px; }
.pp-title { font-family: var(--fh); font-size: 40px; font-weight: 800; text-transform: uppercase; color: var(--black); margin-bottom: 12px; }
.pp-meta { color: var(--gm); font-size: 14px; margin: 0 0 12px; }
.pp-draft { display: inline-block; margin: 0 0 16px; padding: 6px 10px; font-size: 13px; color: var(--gd); background: var(--surface); border: 1px dashed var(--gm); }
.pp-intro { font-size: 17px; line-height: 1.65; margin: 0; }
.pp-layout { display: grid; grid-template-columns: 1fr; gap: 32px; }
.pp-toc { border-top: 1px solid var(--gl); border-bottom: 1px solid var(--gl); padding: 16px 0; }
.pp-toc-label { font-family: var(--fh); font-size: 15px; font-weight: 800; text-transform: uppercase; margin: 0 0 8px; }
.pp-toc ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; }
.pp-toc a { display: inline-block; padding: 4px 0; color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.pp-toc a:hover, .pp-toc a:focus-visible { color: var(--secondary); }
.pp-body { max-width: 72ch; min-width: 0; font-size: 16px; line-height: 1.7; }
.pp-body section { scroll-margin-top: 24px; }
.pp-body section + section { margin-top: 40px; }
.pp-body h2 { font-family: var(--fh); font-size: 26px; font-weight: 800; text-transform: uppercase; line-height: 1.1; color: var(--black); margin: 0 0 12px; }
.pp-body h3 { font-family: var(--fb); font-size: 17px; font-weight: 700; color: var(--black); margin: 24px 0 8px; }
.pp-body p, .pp-body ul { margin: 0 0 14px; }
.pp-body ul { padding-left: 22px; }
.pp-body li + li { margin-top: 4px; }
.pp-body a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.pp-todo { background: #FFF3B0; color: #000; padding: 0 3px; outline: 1px dashed #8A6D00; }
.pp-cookies { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; line-height: 1.5; }
.pp-cookies th, .pp-cookies td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--gl); }
.pp-cookies thead th { font-weight: 700; border-bottom: 2px solid var(--black); }
.pp-cookies code { color: var(--black); font-size: 13px; overflow-wrap: anywhere; }
.pp-contact { margin: 0; }
.pp-contact dt { font-weight: 700; }
.pp-contact dd { margin: 0; }
.pp-contact-label { color: var(--gm); }
.form-privacy-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--gm); }
.form-privacy-note a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.form-privacy-note a:hover, .form-privacy-note a:focus-visible { color: var(--secondary); }
@media (min-width: 992px) {
  .pp-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
  .pp-toc { position: sticky; top: 24px; border-bottom: 0; padding-top: 12px; }
}
@media (max-width: 575px) {
  .pp { padding-top: 28px; padding-bottom: 48px; }
  .pp-title { font-size: 30px; }
  .pp-body h2 { font-size: 22px; }
  .pp-cookies thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .pp-cookies tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--gl); }
  .pp-cookies th, .pp-cookies td { display: block; padding: 2px 0; border: 0; }
  .pp-cookies td::before { content: attr(data-label) ": "; font-weight: 700; }
}

/* ---------- Product links set by staff (product_relations) ---------- */
/* Replaced product: a plain bordered note above the tags, so the newer part number is seen before requesting. */
.p-replaced { border: 1px solid var(--black); padding: 12px 16px; margin: 0 0 16px; }
.p-replaced-title { font-size: 14px; font-weight: 700; margin: 0 0 4px; }
.p-replaced-list { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.6; }
.p-replaced-label { color: var(--gd); }
.p-replaced-list a { color: var(--black); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.p-replaced-list a:hover, .p-replaced-list a:focus-visible { color: var(--secondary); }
.p-replaced-number { display: block; font-size: 13px; color: var(--gm); }
/* Required partner: right under "Add to request", because the two are ordered together. */
.p-pair { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--gl); }
.p-pair-title { font-family: var(--fh); font-size: 18px; font-weight: 800; text-transform: uppercase; line-height: 1.1; margin: 0 0 6px; }
.p-pair-body { font-size: 14px; line-height: 1.6; color: var(--gd); margin: 0 0 12px; }
.p-pair-error { font-size: 14px; color: #a30000; margin: 0 0 12px; }
.p-pair-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.p-pair-item { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; border: 1px solid var(--gl); padding: 12px; }
.p-pair-link { display: flex; align-items: center; gap: 12px; flex: 1 1 220px; min-width: 0; color: var(--black); text-decoration: none; }
.p-pair-link:hover, .p-pair-link:focus-visible { color: var(--black); text-decoration: none; }
.p-pair-link:hover .p-pair-name, .p-pair-link:focus-visible .p-pair-name { color: var(--secondary); }
.p-pair-img { flex: 0 0 72px; width: 72px; height: 72px; background: var(--surface); display: flex; align-items: center; justify-content: center; color: #8a8a8a; font-size: 24px; }
.p-pair-img img { width: 90%; height: 90%; object-fit: contain; }
.p-pair-text { min-width: 0; }
.p-pair-name { display: block; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.p-pair-number { display: block; font-size: 13px; color: var(--gm); overflow-wrap: anywhere; }
.p-pair-form { margin: 0; flex: 0 0 auto; }
.p-linked { margin-top: 56px; }
@media (max-width: 575px) {
  .p-pair-form { flex: 1 1 100%; }
  .p-pair-form .btn-black { width: 100%; }
}