/**
 * ALNI — stylesheet entry point.
 *
 * Order matters: tokens define the variables everything else consumes, base
 * styles elements, components style classes, then feature styles.
 */

/* ---- fonts.css ---- */
/**
 * Typefaces — IBM Plex Sans and IBM Plex Mono, self-hosted.
 *
 * Why Plex: it was commissioned for an engineering company, and its mono is a
 * first-class member of the family rather than an afterthought. This catalogue
 * is fundamentally *numbers* — kW ratings, energy classes, refrigerants,
 * prices — so the data face does as much work here as the text face.
 *
 * Why not a condensed display face: IBM Plex Sans Condensed ships an
 * effectively empty Cyrillic subset (1.4 kB), which would have broken every
 * Bulgarian headline. Display weight comes from size, weight and tracking
 * instead, which is the more disciplined answer anyway.
 *
 * Self-hosted rather than fonts.googleapis.com: no third-party request on the
 * critical path, and no recurring GDPR argument.
 *
 * Subsets are split so a Bulgarian visitor downloads Cyrillic and not the
 * Vietnamese or Greek ranges. unicode-range lets the browser skip the rest.
 */

/* ------------------------------------------------------------------ Sans */
@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plex-sans-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plex-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2192, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plex-sans-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plex-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2192, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plex-sans-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plex-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2192, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ Mono */
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plex-mono-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2192, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- tokens.css ---- */
/**
 * ALNI design system — tokens
 *
 * Single source of truth for colour, type, space and elevation. Nothing in the
 * theme may hardcode a colour or a pixel size; if a value is needed and not
 * here, it gets added here first.
 *
 * The old site had no design system at all: Elementor's global palette was
 * left at stock Astra defaults while the real brand orange was pasted into
 * individual widgets. That is why this file exists.
 *
 * Contrast: every pairing marked AA below was checked against WCAG 2.1
 * (4.5:1 body text, 3:1 large text and UI boundaries). See docs/design-system.md.
 */

:root {
  /* ---------------------------------------------------------------------
   * Brand orange
   * Anchored on the existing brand value #FF8C00 (kept as --orange-500) so
   * the site stays recognisably Alni.
   *
   * IMPORTANT: white text on --orange-500 is 2.33:1 and FAILS AA. The old
   * site does this on every button. Use --color-on-brand (near-black) for
   * text on vivid orange, or --orange-700 as a background when white text
   * is required.
   * ------------------------------------------------------------------- */
  --orange-50:  #FFF6EB;
  --orange-100: #FFE8CC;
  --orange-200: #FFD199;
  --orange-300: #FFB35C;
  --orange-400: #FF9E2E;
  --orange-500: #FF8C00; /* brand anchor */
  --orange-600: #E07600; /* 3.11:1 on white — UI boundaries, focus rings */
  --orange-700: #B85E00; /* 4.53:1 on white — AA text, links */
  --orange-800: #8F4900; /* 6.73:1 on white — AA text, hover */
  --orange-900: #663400;

  /* ---------------------------------------------------------------------
   * Neutrals — slightly cool graphite. Carries the "engineering" register
   * the brand needs; the orange supplies the warmth.
   * ------------------------------------------------------------------- */
  --gray-0:   #FFFFFF;
  --gray-50:  #F8F9FA;
  --gray-100: #F1F3F5;
  --gray-200: #E4E7EB;
  --gray-300: #CDD2D9;
  --gray-400: #9AA3AE;
  --gray-500: #6B7480; /* 4.74:1 on white — lightest AA-safe text/border */
  --gray-600: #4B535D;
  --gray-700: #353B43;
  --gray-800: #23282E;
  --gray-900: #14171A;

  /* Semantic */
  --green-600:  #1E7A4B;
  --green-50:   #ECFAF2;
  --red-600:    #C0392B;
  --red-50:     #FDF0EE;
  --blue-600:   #1B6AA5;
  --blue-50:    #EDF5FB;
  --amber-600:  #A16207;
  --amber-50:   #FEFAEC;

  /* ---------------------------------------------------------------------
   * Semantic colour roles — components reference these, never the scales.
   * ------------------------------------------------------------------- */
  --color-brand:            var(--orange-500);
  --color-brand-hover:      var(--orange-600);
  --color-on-brand:         var(--gray-900);  /* AA 7.71:1 on orange-500 */
  --color-brand-text:       var(--orange-700); /* AA 4.53:1 on white */
  --color-brand-text-hover: var(--orange-800);

  --color-text:         var(--gray-800); /* AA 14.85:1 */
  --color-text-strong:  var(--gray-900);
  --color-text-muted:   var(--gray-600); /* AA  7.79:1 */
  --color-text-subtle:  var(--gray-500); /* AA  4.74:1 — smallest AA-safe */
  --color-text-inverse: var(--gray-0);

  --color-surface:        var(--gray-0);
  --color-surface-sunken: var(--gray-50);
  --color-surface-raised: var(--gray-0);
  --color-surface-inverse:var(--gray-800);

  --color-border:        var(--gray-200); /* decorative separators */
  --color-border-strong: var(--gray-500); /* form controls — needs 3:1 */
  --color-focus:         var(--orange-600);

  --color-success: var(--green-600);
  --color-danger:  var(--red-600);
  --color-info:    var(--blue-600);
  --color-warning: var(--amber-600);

  /* ---------------------------------------------------------------------
   * Typography
   *
   * One family, not the current three (Ubuntu + Lato + an Astra icon font).
   * Inter has complete Cyrillic coverage and — critically — Bulgarian
   * localised letterforms via the `locl` feature, which the current display
   * font does not handle. See --font-feature-bg below and [lang="bg"] in
   * base.css: without it Bulgarian Cyrillic renders with Russian shapes,
   * which reads as foreign to a Bulgarian visitor.
   * ------------------------------------------------------------------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, monospace;
  --font-feature-bg: 'locl' 1, 'kern' 1, 'liga' 1;
  --font-feature-num: 'tnum' 1, 'kern' 1; /* tabular figures for specs/prices */

  /*
   * Type scale — 1.200 minor third, 16px base, fluid at the display sizes.
   *
   * The bottom two steps were 12px and 14px and were reported as hard to
   * read; they are now 13px and 15px. Hardcoded sizes below 12px elsewhere in
   * the stylesheets were raised to this floor at the same time, so nothing in
   * the design system asks anyone to read type smaller than --text-xs.
   */
  --text-xs:   0.8125rem; /* 13 */
  --text-sm:   0.9375rem; /* 15 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.35rem;   /* 21.6 */
  --text-2xl:  1.62rem;   /* 26 */
  --text-3xl:  clamp(1.75rem, 1.4rem + 1.4vw, 2.33rem);
  --text-4xl:  clamp(2.1rem, 1.6rem + 2.2vw, 3.36rem);

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;

  /* Measure — long centred paragraphs were a legibility problem on the old
   * homepage cards. Body copy is capped and left-aligned by default. */
  --measure: 68ch;
  --measure-narrow: 52ch;

  /* ---------------------------------------------------------------------
   * Space — 4px base
   * ------------------------------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  /* Section rhythm */
  --section-y: clamp(var(--space-8), 5vw, var(--space-11));

  /* ---------------------------------------------------------------------
   * Layout
   * ------------------------------------------------------------------- */
  --container: 1200px;
  --container-wide: 1400px;
  --container-narrow: 760px;
  --gutter: clamp(var(--space-4), 3vw, var(--space-6));

  /* ---------------------------------------------------------------------
   * Radius, elevation, motion
   *
   * No orange glow shadows. Elevation is neutral and restrained; the old
   * site used coloured glows which read as decoration rather than depth.
   * ------------------------------------------------------------------- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 999px;

  --shadow-xs: 0 1px 2px rgba(20, 23, 26, 0.06);
  --shadow-sm: 0 1px 3px rgba(20, 23, 26, 0.08), 0 1px 2px rgba(20, 23, 26, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 23, 26, 0.08), 0 2px 4px rgba(20, 23, 26, 0.04);
  --shadow-lg: 0 12px 32px rgba(20, 23, 26, 0.10), 0 4px 8px rgba(20, 23, 26, 0.04);

  --ring: 0 0 0 3px rgba(224, 118, 0, 0.35);

  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 320ms;

  --z-dropdown: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-modal: 400;
}

/* Breakpoints are documented here for reference; CSS uses them literally
 * because custom properties cannot be used in media queries.
 *   sm  480px   md  768px   lg 1024px   xl 1280px
 * Chosen for this content (product grids of 2/3/4), not inherited from a
 * theme vendor as the old site's 544/768/921 were. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
    --duration-slow: 0ms;
  }
}

/* ---- base.css ---- */
/**
 * ALNI design system — base / element styles
 * Depends on tokens.css.
 */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings: var(--font-feature-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Bulgarian localised Cyrillic letterforms. Without `locl`, Inter renders
 * Russian shapes for д, и, й, п, т, ц, ш, щ — visibly wrong to a Bulgarian
 * reader. The <html> element carries lang="bg". */
[lang="bg"], [lang^="bg-"] {
  font-feature-settings: var(--font-feature-bg);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  color: var(--color-text-strong);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

p, ul, ol, dl, blockquote, table, figure {
  margin: 0 0 var(--space-4);
}

p { max-width: var(--measure); text-wrap: pretty; }

a {
  color: var(--color-brand-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--duration-fast) var(--ease);
}
a:hover { color: var(--color-brand-text-hover); }

strong, b { font-weight: var(--weight-semibold); color: var(--color-text-strong); }
small { font-size: var(--text-sm); }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

hr {
  height: 1px;
  margin: var(--space-7) 0;
  border: 0;
  background: var(--color-border);
}

/* Focus — visible, branded, and never removed. The 3px ring on
 * --color-focus clears 3:1 against white. */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection {
  background: var(--orange-200);
  color: var(--gray-900);
}

/* Tables — specifications are data, not screenshots. The old site rendered
 * some technical tables as bitmap images of manufacturer datasheets; this is
 * the styling for those once they are digitised. */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-feature-settings: var(--font-feature-num);
}
caption {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: left;
}
th, td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
th {
  color: var(--color-text-strong);
  font-weight: var(--weight-semibold);
}
thead th {
  border-bottom-width: 2px;
  border-bottom-color: var(--gray-300);
}
tbody tr:hover { background: var(--color-surface-sunken); }

/* Wide tables must scroll inside their own container, never the page. */
.table-scroll {
  overflow-x: auto;
  margin-bottom: var(--space-4);
  -webkit-overflow-scrolling: touch;
}

code, kbd, pre { font-family: var(--font-mono); font-size: 0.9em; }

blockquote {
  margin-inline: 0;
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-brand);
  color: var(--color-text-muted);
}

/* Screen-reader-only, plus a real skip link */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-4);
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-md);
  transform: translateY(-200%);
  transition: transform var(--duration) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* Layout primitives */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--sunken { background: var(--color-surface-sunken); }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- components.css ---- */
/**
 * ALNI design system — components
 * Depends on tokens.css and base.css.
 */

/* =====================================================================
 * Button
 *
 * The primary button is vivid brand orange with near-black text (7.71:1).
 * White on --orange-500 is 2.33:1 and fails AA — that is what the old site
 * did on every CTA, and it is the one thing this component must not inherit.
 * ================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  min-height: 44px; /* touch target */
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

.btn--primary {
  background: var(--color-brand);
  color: var(--color-on-brand);
}
.btn--primary:hover:not([disabled]) { background: var(--color-brand-hover); color: var(--color-on-brand); }

.btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text-strong);
}
.btn--secondary:hover:not([disabled]) { background: var(--color-surface-sunken); border-color: var(--gray-600); }

.btn--ghost {
  background: transparent;
  color: var(--color-brand-text);
  padding-inline: var(--space-2);
}
.btn--ghost:hover:not([disabled]) { color: var(--color-brand-text-hover); text-decoration: underline; }

.btn--inverse {
  background: var(--color-surface);
  color: var(--color-text-strong);
}

.btn--sm { padding: var(--space-2) var(--space-4); min-height: 36px; font-size: var(--text-sm); }
.btn--lg { padding: var(--space-4) var(--space-6); min-height: 52px; font-size: var(--text-lg); }
.btn--block { display: flex; width: 100%; }

/* =====================================================================
 * Card
 * No coloured glow shadows, no text over photographs. The old homepage and
 * category tiles put copy on top of product imagery — white labels over
 * white products — which failed contrast outright. Media and text are
 * separated here by construction.
 * ================================================================== */
.card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.card:hover { border-color: var(--gray-300); box-shadow: var(--shadow-md); }

.card__media {
  aspect-ratio: 4 / 3;
  background: var(--color-surface-sunken);
  overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: contain; }

.card__body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; }
.card__title { margin-bottom: var(--space-2); font-size: var(--text-lg); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--color-brand-text); }
.card__meta { margin-bottom: var(--space-2); color: var(--color-text-subtle); font-size: var(--text-sm); }
.card__text { color: var(--color-text-muted); font-size: var(--text-sm); }
.card__footer { margin-top: auto; padding-top: var(--space-4); }

/* Accent variant replaces the old orange-glow treatment */
.card--accent { border-top: 3px solid var(--color-brand); }

/* =====================================================================
 * Price
 * Tabular figures so ranges and dual currency line up in a grid.
 * ================================================================== */
.price {
  font-feature-settings: var(--font-feature-num);
  color: var(--color-text-strong);
  font-weight: var(--weight-semibold);
}
.price__primary { font-size: var(--text-xl); }
.price__secondary { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--weight-regular); }
.price__note { color: var(--color-text-subtle); font-size: var(--text-xs); }
.price--range .price__primary { font-size: var(--text-lg); }

/* "From X" presentation for configurable products, so the page leads with a
 * real number instead of an unresolved range. */
.price__from-label {
  display: block;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* =====================================================================
 * Badge
 * ================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.badge--brand   { background: var(--orange-100); color: var(--orange-900); }
.badge--neutral { background: var(--gray-100);   color: var(--gray-700); }
.badge--success { background: var(--green-50);   color: var(--green-600); }
.badge--info    { background: var(--blue-50);    color: var(--blue-600); }
.badge--warning { background: var(--amber-50);   color: var(--amber-600); }

/* =====================================================================
 * Forms
 * Control borders use --color-border-strong (4.74:1) — decorative
 * --color-border is only 1.52:1 and is not legal for an input boundary.
 * ================================================================== */
.field { margin-bottom: var(--space-5); }
.field__label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-text-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.field__hint { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.field__error { margin-top: var(--space-2); color: var(--color-danger); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.field__required { color: var(--color-danger); }

.input, .textarea, .select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: inherit;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--color-focus);
  box-shadow: var(--ring);
  outline: none;
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-subtle); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-danger); }
.textarea { min-height: 8rem; resize: vertical; }
.select { appearance: none; padding-right: var(--space-8);
  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='%234B535D' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
}

/* =====================================================================
 * Variation swatches — replaces the raw <select> pickers.
 * Real buttons: keyboard reachable, state announced, price impact visible.
 * ================================================================== */
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.swatch {
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease);
}
.swatch:hover:not([disabled]) { border-color: var(--gray-600); background: var(--color-surface-sunken); }
.swatch[aria-pressed="true"] {
  border-color: var(--color-brand);
  border-width: 2px;
  background: var(--orange-50);
  color: var(--orange-900);
  font-weight: var(--weight-semibold);
}
.swatch[disabled] { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
.swatch__delta { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }

/* =====================================================================
 * Breadcrumbs
 * ================================================================== */
.breadcrumbs { margin-bottom: var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { display: inline-flex; align-items: center; min-width: 0; }
.breadcrumbs li::after { content: "/"; margin-left: var(--space-2); color: var(--color-text-subtle); }
.breadcrumbs li:last-child::after { content: none; }
.breadcrumbs a { color: inherit; }

/* =====================================================================
 * Header
 * ================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 72px;
}
.site-header__logo { flex-shrink: 0; }
.site-header__logo img { max-height: 44px; width: auto; }
.site-header__nav { margin-left: auto; }
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); }

.nav-list { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.nav-list a {
  display: block;
  padding: var(--space-2) 0;
  color: var(--color-text);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav-list a:hover,
.nav-list .current-menu-item > a {
  color: var(--color-brand-text);
  border-bottom-color: var(--color-brand);
}

/* Search — absent from the old header entirely, on a 395-product store. */
.header-search { position: relative; flex: 1; max-width: 22rem; }
.header-search .input { padding-left: var(--space-8); }
.header-search__icon {
  position: absolute; left: var(--space-3); top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-subtle);
  pointer-events: none;
}

/* Quote-list indicator */
.quote-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.quote-indicator:hover { border-color: var(--color-brand); color: var(--color-brand-text); }
.quote-indicator__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding-inline: var(--space-1);
  background: var(--color-brand);
  color: var(--color-on-brand);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-feature-settings: var(--font-feature-num);
}
.quote-indicator__count:empty,
.quote-indicator[data-count="0"] .quote-indicator__count { display: none; }

@media (max-width: 1023px) {
  .site-header__nav, .header-search { display: none; }
  .site-header__nav--open { display: block; }
}

/* =====================================================================
 * Footer — flat surface, not a photographic concrete texture.
 * ================================================================== */
.site-footer {
  background: var(--color-surface-inverse);
  color: var(--gray-300);
  padding-block: var(--space-9) var(--space-6);
}
.site-footer h2, .site-footer h3 {
  color: var(--color-text-inverse);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.site-footer a { color: var(--gray-300); text-decoration: none; }
.site-footer a:hover { color: var(--color-text-inverse); text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: var(--space-2); }
.site-footer__bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.12);
  color: var(--gray-400);
  font-size: var(--text-sm);
}

/* =====================================================================
 * Notices
 * ================================================================== */
.notice {
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}
.notice--success { background: var(--green-50); border-color: var(--color-success); color: var(--green-600); }
.notice--error   { background: var(--red-50);   border-color: var(--color-danger);  color: var(--red-600); }
.notice--info    { background: var(--blue-50);  border-color: var(--color-info);    color: var(--blue-600); }

/* =====================================================================
 * Trust / spec blocks
 * ================================================================== */
.spec-table caption { font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.spec-table td:first-child { color: var(--color-text-muted); width: 45%; }
.spec-table td:last-child { font-weight: var(--weight-medium); }

.benefit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.benefit-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.benefit-list li::before {
  content: "";
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: var(--radius-full);
  background: var(--orange-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23663400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 6.5l2.5 2.5L10 3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ---- layout.css ---- */
/**
 * Layout and page furniture.
 *
 * These classes were referenced by the templates but never defined — 21 of
 * them, including `.mobile-nav` and `.site-header__toggle`, which is why the
 * site had no working mobile navigation at all. Mobile-first: the base rules
 * are the small-screen layout and media queries add from there.
 */

/* =====================================================================
 * Page shell
 * ================================================================== */
.site-main { display: block; }

.page-header { margin-bottom: var(--space-6); }
.page-header h1 { margin: 0; }
.page-header__meta {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.section__header h2 { margin: 0; }

.section--muted { background: var(--color-surface-sunken); }

/* =====================================================================
 * Editorial content
 *
 * The imported pages are Elementor's flattened output, so this has to cope
 * with arbitrary inherited markup — over-wide images, stray inline SVG and
 * tables that would otherwise force the page to scroll sideways on a phone.
 * ================================================================== */
/*
 * The measure is constrained on the TEXT, not on the container.
 *
 * Putting `max-width` on .entry-content itself also constrains anything a
 * shortcode renders inside it — the quote page's two-column layout ended up
 * about 250px wide, wrapping the product title one character per line.
 */
.entry-content { max-width: none; }
.entry-content > * + * { margin-top: var(--space-4); }
.entry-content h2 { margin-top: var(--space-8); }
.entry-content h3 { margin-top: var(--space-6); }

.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote,
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4 {
  max-width: var(--measure);
}

.entry-content img,
.entry-content svg,
.entry-content video {
  max-width: 100%;
  height: auto;
}

/*
 * Iframes get width capped but NOT `height: auto` — that collapses them to the
 * 150px default and flattened the Google Maps embed on the contact page.
 * Preserve the authored height, and fall back to an aspect ratio when the
 * embed does not declare one.
 */
.entry-content iframe {
  max-width: 100%;
  border: 0;
}
.entry-content iframe:not([height]) {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Inherited content contains wide tables; let them scroll rather than the page. */
.entry-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

/*
 * Long unbroken model numbers are common in this catalogue, so text may break
 * anywhere — but only text. Applying this to the whole container also let it
 * break product titles inside nested layouts.
 */
.entry-content > p,
.entry-content > li,
.entry-content > ul,
.entry-content > ol,
.entry-content > table { overflow-wrap: anywhere; }

/* =====================================================================
 * Cards
 * ================================================================== */
.card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease);
}
.card--link:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card--link:focus-visible { outline: var(--ring); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .card--link, .card--link:hover { transition: none; transform: none; }
}

/* =====================================================================
 * Search form
 * ================================================================== */
.search-form { display: flex; gap: var(--space-2); }
.search-form__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}
.search-form__input:focus-visible { outline: var(--ring); outline-offset: 1px; }
.search-form__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-brand);
  color: var(--color-on-brand);
  cursor: pointer;
}

/* =====================================================================
 * Header — mobile first
 *
 * Below 1024px the desktop nav and inline search are hidden (components.css)
 * and this panel replaces them. Without these rules the panel rendered as an
 * unstyled block of links in the document flow.
 * ================================================================== */
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 64px;
  flex-wrap: nowrap;
}
.site-header__logo { flex: 0 1 auto; min-width: 0; }
.site-header__logo img { max-height: 44px; width: auto; }
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

/* 44px is the minimum comfortable touch target. */
.site-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}

.mobile-nav {
  position: fixed;
  z-index: 100;
  inset: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(68px + env(safe-area-inset-top)) 0 env(safe-area-inset-bottom);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__inner { min-height: calc(100dvh - 68px - env(safe-area-inset-top)); }
.mobile-nav .search-form,
.mobile-nav .header-search { display: flex; margin: 0; }

.mobile-nav__list { list-style: none; margin: 0; padding: 0; }
.mobile-nav__list li { border-bottom: 1px solid var(--color-border); }
.mobile-nav__list li:last-child { border-bottom: 0; }
.mobile-nav__list a {
  display: block;
  padding: var(--space-3) 0;
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
.mobile-nav__list a:hover,
.mobile-nav__list a:focus-visible { color: var(--color-brand-text); }

/* Submenus: indented rather than hover-revealed — there is no hover here. */
.mobile-nav__list .sub-menu {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding-inline-start: var(--space-4);
}
.mobile-nav__list .sub-menu a {
  padding-block: var(--space-2);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .site-header__toggle { display: none; }
  .mobile-nav { display: none; }
}

/* =====================================================================
 * Projects
 * ================================================================== */
.project__hero { margin: 0 0 var(--space-6); }
.project__hero img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.project__gallery { margin-top: var(--space-8); }
.project__gallery-item { margin: 0; }
.project__gallery-item img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.project__cta { margin-top: var(--space-8); }

.post-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.post-nav a { color: var(--color-brand-text); text-decoration: none; }
.post-nav a:hover { text-decoration: underline; }

/* =====================================================================
 * Footer
 * ================================================================== */
.site-footer__columns {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}
.site-footer__brand { max-width: var(--measure-narrow); }
.site-footer__name {
  color: var(--color-text-inverse);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
.site-footer__address { font-style: normal; line-height: var(--leading-relaxed); }

@media (min-width: 768px) {
  .site-footer__columns { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .site-footer__columns { grid-template-columns: 2fr 1fr 1fr; }
}

/* =====================================================================
 * Responsive grids
 *
 * .grid sets display:grid in base.css but no columns, so every grid was a
 * single column at every width. Mobile-first: one column, then more.
 * ================================================================== */
.grid { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* =====================================================================
 * Nothing may scroll the page sideways on a phone.
 * ================================================================== */
html, body { overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }

/* =====================================================================
 * Desktop dropdowns
 *
 * .nav-list was flexed but .sub-menu had no styling at all, so every
 * submenu rendered as a static block inside its flex item and the header
 * grew to 453px tall with all 17 links permanently on screen.
 * ================================================================== */
@media (min-width: 1024px) {
  .site-header__nav .nav-list > li { position: relative; }

  .site-header__nav .sub-menu {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    z-index: var(--z-dropdown);
    min-width: 240px;
    margin: 0;
    padding: var(--space-2) 0;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--duration-fast) var(--ease),
                transform var(--duration-fast) var(--ease),
                visibility var(--duration-fast) var(--ease);
  }

  /* focus-within keeps it keyboard-reachable, not hover-only. */
  .site-header__nav .nav-list > li:hover > .sub-menu,
  .site-header__nav .nav-list > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .site-header__nav .sub-menu a {
    display: block;
    padding: var(--space-2) var(--space-4);
    white-space: nowrap;
  }
  .site-header__nav .sub-menu a:hover,
  .site-header__nav .sub-menu a:focus-visible {
    background: var(--color-surface-sunken);
  }

  /* A parent that opens a menu should look like one. */
  .site-header__nav .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-inline-start: 0.45em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__nav .sub-menu { transition: none; }
}

/* =====================================================================
 * Inherited decorative icons
 *
 * The flattened Elementor content contains bare `<svg aria-hidden="true"
 * viewBox="0 0 1000 1000">` icons with no width, height or class. They were
 * small icon-box glyphs; with only `max-width: 100%` to constrain them they
 * expanded to the full column — eight 587px black shapes down the homepage.
 *
 * Scoped tightly on purpose: only unclassed, aria-hidden SVGs inside editorial
 * content. Anything the theme or a plugin renders carries a class and is
 * untouched.
 * ================================================================== */
.entry-content svg[aria-hidden="true"]:not([class]) {
  width: 2.5rem;
  height: 2.5rem;
  vertical-align: middle;
}

/* =====================================================================
 * Live search suggestions
 * ================================================================== */
.header-search, .search-form { position: relative; }

.search-suggest__list {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + var(--space-1));
  z-index: var(--z-dropdown);
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 60vh;
  overflow-y: auto;
}
.search-suggest__list[hidden] { display: none; }

.search-suggest__loading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.5rem;
  padding: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.search-suggest__spinner {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-brand-hover);
  border-radius: var(--radius-full);
  animation: alni-search-spin .7s linear infinite;
}
@keyframes alni-search-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .search-suggest__spinner { animation: none; }
}

.search-suggest__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
}
.search-suggest__item.is-active .search-suggest__link,
.search-suggest__link:hover { background: var(--color-surface-sunken); }

.search-suggest__thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
}
.search-suggest__body { display: flex; flex-direction: column; min-width: 0; }
.search-suggest__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-suggest__price {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-feature-settings: var(--font-feature-num);
}

/* =====================================================================
 * Contact form (alni-core shortcode)
 * ================================================================== */
.contact-form {
  max-width: 42rem;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.contact-form .field + .field { margin-top: var(--space-4); }
.contact-form label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: var(--weight-medium);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  /* 16px minimum, or iOS Safari zooms the page on focus. */
  font-size: max(1rem, var(--text-base));
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible { outline: var(--ring); outline-offset: 1px; }
.contact-form textarea { min-height: 8rem; resize: vertical; }
.contact-form button[type="submit"] { min-height: 44px; }

/* =====================================================================
 * Forms everywhere: never let a mobile browser zoom on focus.
 * ================================================================== */
input, select, textarea { font-size: max(1rem, var(--text-base)); }

/* =====================================================================
 * Header at small widths
 *
 * The quote indicator's label plus the logo overran the 375px header, leaving
 * the two almost touching. Below 640px it collapses to the icon and its count,
 * which is all it needs to be — the label returns as soon as there is room.
 * ================================================================== */
@media (max-width: 639px) {
  .quote-indicator span:not(.quote-indicator__count) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .quote-indicator {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding-inline: var(--space-2);
  }
  .site-header__logo img { max-height: 34px; }
}

/* ---- woocommerce.css ---- */
/**
 * WooCommerce surfaces.
 *
 * Woo's own stylesheets are dequeued outside commerce pages; these rules style
 * the markup the theme's hooks emit.
 */

/* ------------------------------------------------------------- product grid */

.woocommerce ul.products {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px)  { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); } }

.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.woocommerce ul.products li.product:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-md);
}

.woocommerce ul.products li.product .card__media {
  aspect-ratio: 1;
  background: var(--color-surface-sunken);
  padding: var(--space-4);
}
.woocommerce ul.products li.product .card__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply; /* product cut-outs on white sit flat on the tile */
}
.woocommerce ul.products li.product .card__media img.woocommerce-placeholder {
  padding: 24%;
  opacity: .62;
  mix-blend-mode: normal;
}

.woocommerce ul.products li.product .card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.woocommerce ul.products li.product .card__title {
  margin-bottom: var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

/* Price on cards — dual currency needs to line up across a grid, so tabular
 * figures and a fixed block. */
.woocommerce ul.products li.product .price {
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--text-base);
  font-feature-settings: var(--font-feature-num);
}
.woocommerce ul.products li.product .price del { color: var(--color-text-subtle); font-weight: var(--weight-regular); }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

.woocommerce ul.products li.product .btn { margin-top: var(--space-4); }

/* --------------------------------------------------------- archive header */

.woocommerce-products-header { margin-bottom: var(--space-6); }
.woocommerce-products-header__title { margin-bottom: var(--space-3); }

.archive-description {
  max-width: var(--measure);
  margin-bottom: var(--space-6);
  color: var(--color-text-muted);
}

.woocommerce-result-count { color: var(--color-text-muted); font-size: var(--text-sm); }
.woocommerce-ordering select { max-width: 16rem; }

.woocommerce-notices-wrapper:empty { display: none; }

/* Subcategory tiles — text sits BELOW the image, never on top of it. The old
 * tiles overlaid white labels on photographs of white products. */
.product-category .card__media { padding: var(--space-4); }
.product-category .woocommerce-loop-category__title {
  padding: var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-align: center;
}
.product-category .count {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}

/* ------------------------------------------------------------ single product */

.single-product div.product {
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 1024px) {
  .single-product div.product {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .single-product div.product .woocommerce-tabs,
  .single-product div.product .related,
  .single-product div.product .up-sells { grid-column: 1 / -1; }
}

/*
 * Sticky gallery — desktop only, and with enough specificity to actually win.
 *
 * WooCommerce sets `div.product div.images { position: relative }`, which beat
 * the theme's `position: sticky` while the theme's `top: 96px` still applied.
 * On a RELATIVELY positioned element `top` offsets it visually but leaves its
 * space in the flow, so the gallery was pushed 96px down: a large empty gap
 * above it and the thumbnails overlapping the product title below.
 *
 * Sticky also makes no sense in a single-column mobile layout, so it is scoped
 * to the two-column breakpoint.
 */
.single-product div.product .woocommerce-product-gallery {
  position: static;
  top: auto;
}
@media (min-width: 1024px) {
  .single-product div.product .woocommerce-product-gallery {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}
.woocommerce-product-gallery__wrapper { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.single-product .woocommerce-product-gallery__image--placeholder img {
  padding: 20%;
  opacity: .62;
  mix-blend-mode: normal;
}
.flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.flex-control-thumbs img {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.flex-control-thumbs img.flex-active { border-color: var(--color-brand); border-width: 2px; }

.product_title { margin-bottom: var(--space-4); }

.woocommerce-product-details__short-description {
  margin-bottom: var(--space-5);
  color: var(--color-text-muted);
}

/* Tabs */

.woocommerce-tabs { margin-top: var(--space-8); }
.woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-6);
  padding: 0 0 0;
  border-bottom: 1px solid var(--color-border);
  list-style: none;
}
.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: var(--space-3) var(--space-5);
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
  color: var(--color-text-strong);
  border-bottom-color: var(--color-brand);
}
.woocommerce-tabs .panel > :last-child { margin-bottom: 0; }

/* Specifications table. Specs are data — some products currently carry them
 * as bitmap screenshots of manufacturer datasheets, which is unreadable on
 * mobile and invisible to search. This is where the digitised version goes. */
.woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
  font-feature-settings: var(--font-feature-num);
}
.woocommerce-product-attributes th {
  width: 45%;
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
}
.woocommerce-product-attributes td { font-weight: var(--weight-medium); }
.woocommerce-product-attributes p { margin: 0; }

/* Related / up-sells */

.related > h2, .up-sells > h2 {
  margin-bottom: var(--space-5);
  font-size: var(--text-2xl);
}

/* --------------------------------------------------------------- pagination */

.woocommerce-pagination ul,
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce-pagination a, .woocommerce-pagination span,
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
}
.woocommerce-pagination .current,
.pagination .page-numbers.current {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-on-brand);
  font-weight: var(--weight-semibold);
}

/* ---------------------------------------------------- Woo's own width rules
 *
 * woocommerce-layout.css sets `ul.products[class*=columns-] li.product
 * { width: 22.05%; float: left }`. The theme makes the list a CSS grid, so
 * that width applies *inside* each grid cell — the card rendered 77px wide in
 * a 159px column with its text spilling out.
 *
 * !important is deliberate: Woo's stylesheet has equal specificity and is
 * enqueued after the theme's, so nothing short of this wins reliably.
 */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
}

/* Card internals must be allowed to shrink inside a narrow column. */
.woocommerce ul.products li.product .card__body { min-width: 0; }
.woocommerce ul.products li.product .card__title { overflow-wrap: break-word; }

/* The sort dropdown is a real control; give it a touch target. */
.woocommerce .woocommerce-ordering select {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  max-width: 100%;
}
.woocommerce .woocommerce-ordering { margin-bottom: var(--space-5); }
.woocommerce .woocommerce-result-count { color: var(--color-text-muted); font-size: var(--text-sm); }

@media (max-width: 639px) {
  .woocommerce .woocommerce-ordering,
  .woocommerce .woocommerce-ordering select { width: 100%; }
}

/* ------------------------------------------------- Woo's clearfix pseudos
 *
 * woocommerce-layout.css gives `ul.products` a float clearfix:
 *
 *   .woocommerce ul.products::before,
 *   .woocommerce ul.products::after { content: " "; display: table; }
 *
 * In a float layout that is invisible. In a GRID container a pseudo-element is
 * a grid item, so ::before silently occupied cell 1 and pushed the first
 * product into column 2 — leaving a hole at the top-left of every archive and
 * shifting the whole grid by one.
 *
 * The theme does not float anything here, so the clearfix has no job.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  display: none !important;
}

/* Gallery without flexslider: WooCommerce renders every image inline, so the
   first is the hero and the rest become a thumbnail row. */
.woocommerce-product-gallery__wrapper { display: block; }
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child { display: block; }
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child img { width: 100%; height: auto; }
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child) {
  display: inline-block;
  width: 84px;
  margin: var(--space-2) var(--space-2) 0 0;
  vertical-align: top;
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child) img {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* Image zoom is a pointer affordance. On a touch device it does nothing useful
   and leaves a 600px overlay image in the DOM, so switch it off there. */
@media (pointer: coarse), (max-width: 1023px) {
  .woocommerce-product-gallery img.zoomImg { display: none !important; }
  .woocommerce-product-gallery .zoom { pointer-events: auto; }
}

/* Product tabs: with a third tab (Documents) the labels exceed a phone's width
   and `overflow: hidden` clipped them silently. Scroll instead. */
.woocommerce-tabs ul.tabs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}
.woocommerce-tabs ul.tabs li { flex: 0 0 auto; }
.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: var(--space-2) var(--space-4);
  white-space: nowrap;
  min-height: 44px;
  line-height: 28px;
}

/* Attribute/spec tables must scroll rather than widen the page. */
.woocommerce table.shop_attributes,
.woocommerce-tabs table { width: 100%; }
.woocommerce-tabs .panel { overflow-x: auto; }

/* ----------------------------------------------------- mobile product hero */
@media (max-width: 639px) {
  /* The full category trail can be wider than a phone, but it should consume
     one quiet line rather than pushing the product image down by four lines. */
  .single-product .breadcrumbs {
    margin-bottom: var(--space-3);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .single-product .breadcrumbs::-webkit-scrollbar { display: none; }
  .single-product .breadcrumbs ol { flex-wrap: nowrap; width: max-content; }

  .single-product div.product { gap: var(--space-5); }
  .single-product .woocommerce-product-gallery__wrapper {
    display: grid;
    place-items: center;
    min-height: 0;
    background: #fff;
  }
  .single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child,
  .single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child a {
    width: 100%;
  }
  .single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child img {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: contain;
  }
  .single-product .woocommerce-product-gallery__trigger {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---- quote.css ---- */
/**
 * Quote list — layout for the plugin's templates.
 *
 * The plugin ships behaviour and markup; the theme owns appearance, so the
 * quote flow inherits the design system automatically and the plugin stays
 * portable.
 */

/* ---------------------------------------------------------------- PDP block */

.quote-block {
  padding: var(--space-5);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.quote-block .price {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.quote-block .price__primary { display: block; }
.quote-block .price__note { display: block; margin-top: var(--space-1); }

.field--inline {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.field--inline .field__label { margin-bottom: 0; }

.input--qty { width: 5.5rem; text-align: center; font-feature-settings: var(--font-feature-num); }

.quote-form__reassurance {
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
  max-width: none;
}

/* --------------------------------------------------------------- quote page */

.quote-page__layout {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 1024px) {
  .quote-page__layout { grid-template-columns: 1fr 26rem; gap: var(--space-8); }
  .quote-request { position: sticky; top: 96px; }
}

.quote-page__empty {
  padding: var(--space-9) 0;
  text-align: center;
}
.quote-page__empty p { margin-inline: auto; }

/* Items */

.quote-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  .quote-item { grid-template-columns: 120px 1fr auto; gap: var(--space-5); }
}

.quote-item__media {
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1;
}
.quote-item__media img { width: 100%; height: 100%; object-fit: contain; }

.quote-item__title { margin-bottom: var(--space-1); font-size: var(--text-lg); }
.quote-item__title a { color: inherit; text-decoration: none; }
.quote-item__title a:hover { color: var(--color-brand-text); }

.quote-item__sku {
  margin-bottom: var(--space-3);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

/* The configuration is the whole point of the line — show it as data, not as
 * a comma-separated string. */
.quote-item__config {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  font-size: var(--text-sm);
}
.quote-item__config dt { color: var(--color-text-muted); }
.quote-item__config dd { margin: 0; color: var(--color-text-strong); font-weight: var(--weight-medium); }

.quote-item__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .quote-item__actions {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
  }
}

.quote-items__note {
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Request form */

.quote-request {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.quote-request h2 { font-size: var(--text-xl); }

.field--check label {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.field--check input {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 1px;
  accent-color: var(--color-brand);
}

/* Toast / live region */

[data-quote-toast] { position: relative; }
[data-quote-toast][hidden] { display: none; }

/* Documents tab */

.document-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.document-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-strong);
  text-decoration: none;
}
.document-list a:hover { border-color: var(--color-brand); background: var(--orange-50); }
.document-list__meta {
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

/* =====================================================================
 * Classes the quote templates use that had no rules
 * ================================================================== */
.quote-page { max-width: var(--container); margin-inline: auto; }

.quote-items { min-width: 0; }

/* min-width:0 matters: a grid item defaults to min-width:auto, so a long
   product name refuses to shrink and pushes the column out. */
.quote-item__body { min-width: 0; }
.quote-item__body .quote-item__title { overflow-wrap: break-word; }

.quote-form { display: block; }
.quote-form .field + .field { margin-top: var(--space-4); }

.quote-request__form {
  align-self: start;
  padding: var(--space-6);
  background: var(--color-surface-raised, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
@media (min-width: 1024px) {
  /* Sticky so the form stays reachable beside a long item list. */
  .quote-request__form { position: sticky; top: var(--space-5); }
}
.quote-request__form .field + .field { margin-top: var(--space-4); }
.quote-request__form label { display: block; margin-bottom: var(--space-1); font-weight: var(--weight-medium); }
.quote-request__form input,
.quote-request__form textarea,
.quote-request__form select { width: 100%; }

/* Minimum-quantity note under the quantity field. Explains a constraint the
 * input would otherwise enforce silently. */
.quote-form .field__note {
  margin: calc(var(--space-2) * -1) 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* ---- design.css ---- */
/**
 * ALNI — visual design layer.
 *
 * DIRECTION: an instrument panel, not a shop.
 *
 * ALNI are engineers who design and install systems; the thing that separates
 * them from every other Bulgarian HVAC reseller is measurement. So the page is
 * built like a technical datasheet you would actually enjoy reading: a visible
 * measured grid, hairline rules, and every number set in a mono face with
 * tabular figures.
 *
 * THERMAL AXIS. The real duality in this business is heat and cool, so the
 * accent system is a temperature axis rather than one arbitrary highlight:
 * the existing brand orange is heat, a deep teal is cool. They meet in the
 * `thermal rule` — a 2px cool→warm gradient used once at the top of the page
 * and nowhere else. That is the single accessory.
 *
 * SIGNATURE: the spec strip. A mono, rule-separated row of the three figures
 * that actually decide an HVAC purchase — power, energy class, refrigerant —
 * carried on product cards and the product hero. It is drawn from the
 * catalogue's own attribute data, so it encodes something true rather than
 * decorating. The energy chip is coloured on the real A+++→G scale.
 *
 * Loaded last, so it wins over the earlier component sheets by order.
 */

/* =====================================================================
 * Tokens — overrides and additions
 * ================================================================== */
:root {
  /* Cool paper. Deliberately not cream: this should read as an instrument
     panel, not as editorial stationery. */
  --paper:        #F5F7F8;
  --ink:          #0E1216;
  --steel:        #8E97A3;

  /* Cool half of the thermal axis. */
  --cool-50:  #E8F3F5;
  --cool-100: #C7E3E8;
  --cool-600: #00697A;
  --cool-700: #005463;
  --cool-800: #003F4A;

  --color-surface:        #FFFFFF;
  --color-surface-sunken: var(--paper);
  --color-surface-raised: #FFFFFF;
  --color-surface-inverse: var(--ink);
  --color-text:        #1B2229;
  --color-text-strong: var(--ink);
  --color-border:      #DFE4E8;
  --color-accent-cool: var(--cool-600);

  --font-sans: 'Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Display sizes: fluid, tighter tracking than the body. */
  --display-1: clamp(2.25rem, 1.6rem + 2.9vw, 4rem);
  --display-2: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  --display-3: clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem);

  --rule: 1px solid var(--color-border);
  --radius-card: 4px;   /* instruments have small radii, not pillows */
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(14, 18, 22, .04), 0 8px 24px -12px rgba(14, 18, 22, .14);
  --shadow-lift: 0 2px 4px rgba(14, 18, 22, .06), 0 16px 40px -16px rgba(14, 18, 22, .22);
}

/* =====================================================================
 * Base
 * ================================================================== */
body {
  background: var(--paper);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-feature-settings: var(--font-feature-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.product_title,
.page-header h1,
.woocommerce-products-header__title {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--color-text-strong);
  text-wrap: balance;
}

h1, .product_title, .page-header h1, .woocommerce-products-header__title { font-size: var(--display-1); }
h2 { font-size: var(--display-2); }
h3 { font-size: var(--display-3); letter-spacing: -0.015em; }

p { text-wrap: pretty; }

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

/* The thermal rule. Cool → warm, once, at the very top of the page. */
body::before {
  content: "";
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 3px;
  z-index: 60;
  background: linear-gradient(90deg,
    var(--cool-600) 0%,
    var(--cool-100) 32%,
    var(--orange-300) 62%,
    var(--color-brand) 100%);
}

/* =====================================================================
 * Eyebrow — the datasheet field label
 *
 * Mono, uppercase, wide-tracked, preceded by a short rule. Used for section
 * labels so structure is announced the way a spec sheet announces a field.
 * ================================================================== */
.eyebrow,
.section__header > .eyebrow {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 0 0 .75rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cool-600);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--cool-600);
  flex: 0 0 auto;
}

/* =====================================================================
 * Header
 * ================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: var(--rule);
}
.site-header__inner { min-height: 80px; gap: var(--space-4); }
.site-header__logo {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-inline-end: var(--space-5);
  border-inline-end: 1px solid var(--color-border);
  transition: opacity .2s ease, visibility .2s ease;
}
.site-header__logo::after {
  content: "";
  position: absolute;
  inset-inline-end: -2px;
  top: 50%;
  width: 3px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  transform: translateY(-50%);
}
.site-header__logo .custom-logo-link {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
}
.site-header__logo .custom-logo-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.site-header__logo img {
  display: block;
  max-height: 48px;
  width: auto;
}

.nav-list { gap: var(--space-4); align-items: center; }
.nav-list > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: .25rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.005em;
}
.nav-list > li > a::after { border-color: var(--steel); }
.nav-list > li > a:hover,
.nav-list > li.current-menu-item > a { color: var(--cool-700); }

/* Header search: a field on an instrument, so a rule not a pillow.
 *
 * `display` is set only from 1024px up. components.css hides the desktop
 * search below that in favour of the one inside the mobile panel, and an
 * unscoped `display: flex` here overrode it — the phone header ended up
 * carrying a truncated search field, a shrunken logo and two buttons. */
.header-search {
  position: relative;
  align-items: center;
}
@media (min-width: 1024px) {
  .header-search {
    display: flex;
    flex: 1 1 22rem;
    max-width: 26rem;
  }
}
.mobile-nav .header-search { display: flex; width: 100%; max-width: none; }

/* Explicit, higher-specificity hide for the header instance below the desktop
   breakpoint. An earlier unscoped rule kept winning on load order; scoping to
   .site-header__inner removes the ambiguity entirely. */
@media (max-width: 1023px) {
  .site-header__inner .header-search { display: none; }
}
.header-search__icon {
  position: absolute;
  inset-inline-start: .875rem;
  color: var(--steel);
  pointer-events: none;
}
.header-search .input {
  width: 100%;
  min-height: 44px;
  padding: .5rem .875rem .5rem 2.5rem;
  border: var(--rule);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: .9375rem;
}
.header-search .input:focus-visible {
  outline: 2px solid var(--cool-600);
  outline-offset: 1px;
  background: #fff;
}

/* Quote indicator reads as the primary action in the bar. */
.quote-indicator {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding-inline: .875rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}
.quote-indicator:hover { background: var(--cool-800); border-color: var(--cool-800); color: #fff; }
.quote-indicator__count {
  min-width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-brand); color: var(--ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: .75rem; font-weight: 500;
  padding-inline: .3rem;
}

.site-header__toggle {
  position: relative;
  z-index: 101;
  border: var(--rule);
  border-radius: var(--radius-card);
  background: #fff;
  color: var(--ink);
}
.site-header__toggle-icon {
  position: relative;
  display: block;
  width: 20px;
  height: 16px;
}
.site-header__toggle-icon span {
  position: absolute;
  inset-inline: 1px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
  transition: top .28s var(--ease), transform .28s var(--ease), opacity .18s ease;
}
.site-header__toggle-icon span:nth-child(1) { top: 1px; }
.site-header__toggle-icon span:nth-child(2) { top: 7px; }
.site-header__toggle-icon span:nth-child(3) { top: 13px; }
.mobile-menu-open .site-header__toggle-icon span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.mobile-menu-open .site-header__toggle-icon span:nth-child(2) { opacity: 0; transform: scaleX(.25); }
.mobile-menu-open .site-header__toggle-icon span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* =====================================================================
 * Buttons
 * ================================================================== */
.btn,
.woocommerce a.button,
.woocommerce button.button,
.contact-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn--primary,
.woocommerce a.button.alt,
.contact-form button[type="submit"] {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--ink);
  font-weight: 600;
}
.btn--primary:hover,
.contact-form button[type="submit"]:hover {
  background: var(--orange-400);
  border-color: var(--orange-400);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}
.btn--secondary {
  background: #fff;
  border-color: var(--color-border);
  color: var(--color-text-strong);
}
.btn--secondary:hover { border-color: var(--ink); background: #fff; transform: translateY(-1px); }
.btn--lg { min-height: 52px; padding-inline: 1.75rem; font-size: 1rem; }
.btn--sm { min-height: 38px; padding: .35rem .875rem; font-size: .8125rem; }
.btn--block { width: 100%; }
.btn:focus-visible { outline: 2px solid var(--cool-600); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover { transform: none; transition: none; }
}

/* =====================================================================
 * Sections
 * ================================================================== */
.section { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.section--muted { background: #fff; border-block: var(--rule); }
.section__header { align-items: end; margin-bottom: var(--space-6); }
.section__header h2 { max-width: 24ch; }

/* =====================================================================
 * Cards
 * ================================================================== */
.card {
  background: #fff;
  border: var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card--link:hover {
  border-color: var(--steel);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
.card__media { background: var(--paper); }
.card__title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.card__meta {
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--steel);
  letter-spacing: .04em;
}

/* =====================================================================
 * SIGNATURE — the spec strip
 *
 * The three figures an HVAC buyer actually scans for, in mono with tabular
 * figures, separated by hairlines. Real data from the catalogue's attributes.
 * ================================================================== */
.spec-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--rule);
}
.spec-strip__item {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  padding: .5rem .75rem .5rem 0;
  margin-inline-end: .75rem;
  border-inline-end: var(--rule);
  min-width: 0;
}
.spec-strip__item:last-child { border-inline-end: 0; margin-inline-end: 0; padding-inline-end: 0; }
.spec-strip__label {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel);
  white-space: nowrap;
}
.spec-strip__value {
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 500;
  font-feature-settings: var(--font-feature-num);
  color: var(--color-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Energy class chip, coloured on the real A+++→G scale. */
.energy-chip {
  display: inline-flex;
  align-items: center;
  padding: .0625rem .4rem;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: .02em;
}
.energy-chip[data-class^="A"] { background: #1E7A4B; }
.energy-chip[data-class="B"]  { background: #5C9A1B; }
.energy-chip[data-class="C"]  { background: #A38200; color: var(--ink); }
.energy-chip[data-class="D"]  { background: #C97A00; color: var(--ink); }
.energy-chip[data-class="E"],
.energy-chip[data-class="F"],
.energy-chip[data-class="G"]  { background: #C0392B; }

/* =====================================================================
 * Product grid
 * ================================================================== */
.woocommerce ul.products li.product {
  border: var(--rule);
  border-radius: var(--radius-card);
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--steel);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
.woocommerce ul.products li.product .card__media { background: var(--paper); }
.woocommerce ul.products li.product .price {
  font-family: var(--font-mono);
  font-feature-settings: var(--font-feature-num);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--color-text-strong);
}
.woocommerce ul.products li.product .btn { align-self: flex-start; }

/* =====================================================================
 * Breadcrumbs / archive furniture
 * ================================================================== */
.breadcrumbs, .woocommerce-breadcrumb {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--steel);
}
.breadcrumbs a, .woocommerce-breadcrumb a { color: var(--steel); text-decoration: none; }
.breadcrumbs a:hover, .woocommerce-breadcrumb a:hover { color: var(--cool-700); text-decoration: underline; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; }

.woocommerce-result-count {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--steel);
}
.woocommerce .woocommerce-ordering select {
  border-radius: var(--radius-pill);
  font-size: .875rem;
}

/* =====================================================================
 * Single product
 * ================================================================== */
.woocommerce-product-gallery__wrapper {
  border: var(--rule);
  border-radius: var(--radius-card);
  background: #fff;
}
.summary .price,
.quote-block .price__primary {
  font-family: var(--font-mono);
  font-feature-settings: var(--font-feature-num);
  letter-spacing: -0.01em;
}
.quote-block {
  position: relative;
  padding: var(--space-6);
  background: var(--color-surface-sunken);
  border: var(--rule);
  border-top: 3px solid var(--color-brand);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}
.quote-block__eyebrow,
.product-kicker {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-brand-text);
}
.price--quote { display: flex; flex-direction: column; gap: .125rem; margin: 0 0 var(--space-5); }
.price__line { display: flex; align-items: baseline; gap: var(--space-2); }
.price__from-label {
  font-family: var(--font-mono);
  font-size: .875rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.price__primary { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); font-weight: 600; color: var(--ink); }
.price__note { font-size: .8125rem; color: var(--color-text-muted); }
.price-prefix {
  font-size: .8em;
  font-weight: 600;
  color: var(--color-text-muted);
}

.woocommerce-tabs ul.tabs {
  border-bottom: var(--rule);
  gap: 0;
}
.woocommerce-tabs ul.tabs li a {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel);
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover { color: var(--ink); border-bottom-color: var(--color-brand); }

/* Specification table reads as data. */
.woocommerce table.shop_attributes { border-collapse: collapse; }
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
  padding: .625rem .75rem;
  border-bottom: var(--rule);
  text-align: start;
  vertical-align: top;
}
.woocommerce table.shop_attributes th {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel);
  width: 42%;
}
.woocommerce table.shop_attributes td {
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-feature-settings: var(--font-feature-num);
  color: var(--color-text-strong);
}
.woocommerce table.shop_attributes td p { margin: 0; }

/* =====================================================================
 * Forms
 * ================================================================== */
.field__label,
.contact-form label,
.quote-request__form label {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel);
}
.input, .select, select, textarea,
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="number"] {
  border: var(--rule);
  border-radius: var(--radius-card);
  background: #fff;
  color: var(--color-text);
  padding: .625rem .75rem;
  min-height: 44px;
}
.input:focus-visible, .select:focus-visible, select:focus-visible, textarea:focus-visible,
input:focus-visible {
  outline: 2px solid var(--cool-600);
  outline-offset: 1px;
}
.contact-form, .quote-request__form {
  background: #fff;
  border: var(--rule);
  border-radius: var(--radius-card);
}

/* =====================================================================
 * Quote page
 * ================================================================== */
.quote-item { border-bottom: var(--rule); }
.quote-item__media {
  background: var(--paper);
  border: var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.quote-item__sku,
.quote-item__attrs {
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--steel);
}

.notice {
  padding: var(--space-5);
  border-radius: var(--radius-card);
  border-inline-start: 3px solid var(--cool-600);
  background: var(--cool-50);
}
.notice--success { border-inline-start-color: var(--color-success); background: var(--green-50); }
.notice--error { border-inline-start-color: var(--color-danger); background: var(--red-50); }

/* =====================================================================
 * Footer
 * ================================================================== */
.site-footer {
  background: var(--ink);
  color: #C6CDD4;
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--cool-600), var(--color-brand)) 1;
}
.site-footer h2, .site-footer h3 {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel);
}
.site-footer__name { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.02em; }
.site-footer a:hover { color: #fff; }
.site-footer nav > ul + .site-footer__shortcuts { margin-top: var(--space-2); }
.site-footer__bottom { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; }

/* =====================================================================
 * Responsive
 * ================================================================== */
@media (max-width: 1023px) {
  .site-header__inner { min-height: 68px; }
  .site-header__logo {
    padding-inline-end: 0;
    border-inline-end: 0;
  }
  .site-header__logo::after { content: none; }
  .site-header__logo img { max-height: 42px; }
  .quote-block { padding: var(--space-5); }
}

@media (max-width: 639px) {
  .site-header__inner { gap: var(--space-3); }
  /* With the desktop search gone there is room for the mark to breathe. */
  .site-header__logo img { max-height: 42px; }
  .quote-indicator { padding-inline: .625rem; }
  .section { padding-block: 2.25rem; }
  .spec-strip__item { padding-block: .4rem; }
  .btn--lg { min-height: 48px; }
  /* A card in a two-up mobile grid has ~150px of text column. */
  .card__title, .woocommerce ul.products li.product .card__title { font-size: .9375rem; }
  .woocommerce ul.products li.product .card__body { padding: var(--space-4); }
}

/* The mobile navigation is a full-screen technical panel, not a dropdown. */
@media (max-width: 1023px) {
  body.mobile-menu-open { overflow: hidden; }
  .mobile-menu-open .site-header {
    background: #fff;
    border-bottom-color: var(--gray-200);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .mobile-menu-open .site-header__logo {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .site-header__actions > .quote-indicator {
    transition: opacity .2s ease, transform .25s var(--ease);
  }
  .mobile-menu-open .site-header__actions > .quote-indicator {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
  }
  .mobile-nav {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    background: var(--ink);
    color: #fff;
    transition:
      opacity .28s ease,
      transform .36s cubic-bezier(.22, 1, .36, 1),
      visibility 0s linear .36s;
  }
  .mobile-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s;
  }
  .mobile-nav__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding-top: var(--space-5);
    padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom));
  }
  .mobile-nav__quote,
  .mobile-nav__search,
  .mobile-nav__links {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .22s ease, transform .32s cubic-bezier(.22, 1, .36, 1);
  }
  .mobile-nav__quote,
  .mobile-nav__search,
  .mobile-nav__links { position: relative; }
  .mobile-nav__quote { z-index: 3; }
  .mobile-nav__search { z-index: 2; isolation: isolate; }
  .mobile-nav__links { z-index: 1; }
  .mobile-nav.is-open .mobile-nav__quote,
  .mobile-nav.is-open .mobile-nav__search,
  .mobile-nav.is-open .mobile-nav__links {
    opacity: 1;
    transform: translateY(0);
  }
  .mobile-nav.is-open .mobile-nav__quote { transition-delay: .07s; }
  .mobile-nav.is-open .mobile-nav__search { transition-delay: .12s; }
  .mobile-nav.is-open .mobile-nav__links { transition-delay: .17s; }
  .mobile-nav__quote {
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--gray-700);
  }
  .mobile-nav__quote .quote-indicator {
    width: 100%;
    min-height: 56px;
    justify-content: flex-start;
    padding-inline: var(--space-4);
    border-color: var(--gray-600);
    border-radius: var(--radius-md);
    background: var(--gray-800);
    color: #fff;
    font-size: 1rem;
  }
  .mobile-nav__quote .quote-indicator:hover,
  .mobile-nav__quote .quote-indicator:focus-visible {
    border-color: var(--orange-400);
    background: var(--gray-800);
  }
  .mobile-nav__quote .quote-indicator span:not(.quote-indicator__count) {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    border: 0;
  }
  .mobile-nav__quote .quote-indicator__count,
  .mobile-nav__quote .quote-indicator[data-count="0"] .quote-indicator__count {
    display: inline-flex;
    margin-inline-start: auto;
  }
  .mobile-nav .header-search .input {
    min-height: 50px;
    border-color: var(--gray-600);
    background: #fff;
  }
  .mobile-nav .header-search__icon { color: var(--gray-600); }
  .mobile-nav .search-suggest__list {
    z-index: 5;
    max-height: min(60vh, calc(100dvh - 12rem));
    overscroll-behavior: contain;
    background: #fff;
    border-color: var(--gray-300);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
  }
  .mobile-nav__list { border-top: 1px solid var(--gray-700); }
  .mobile-nav__list li { border-bottom-color: var(--gray-700); }
  .mobile-nav__list > li > a {
    padding-block: var(--space-4);
    color: #fff;
    font-size: clamp(1.25rem, 1.05rem + 1.2vw, 1.625rem);
    font-weight: 500;
    letter-spacing: -.02em;
  }
  .mobile-nav__list > li > a:hover,
  .mobile-nav__list > li > a:focus-visible { color: var(--orange-300); }
  .mobile-nav__list .sub-menu {
    margin-bottom: var(--space-3);
    padding-inline-start: var(--space-4);
    border-inline-start: 2px solid var(--orange-500);
  }
  .mobile-nav__list .sub-menu a {
    padding-block: .625rem;
    color: var(--gray-300);
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__logo,
  .site-header__toggle-icon span,
  .site-header__actions > .quote-indicator,
  .mobile-nav,
  .mobile-nav__quote,
  .mobile-nav__search,
  .mobile-nav__links {
    transition: none;
  }
}

/* =====================================================================
 * Spec strip on a narrow card
 *
 * A ~150px text column cannot carry three horizontal cells: the second cell
 * wrapped onto its own row and cards ended up different heights. Below 640px
 * it becomes a small label/value table instead, which is the more honest
 * datasheet form anyway.
 * ================================================================== */
@media (max-width: 639px) {
  .spec-strip { display: block; border-top: var(--rule); }
  .spec-strip__item {
    /* Grid, not flex: the base rule sets flex-direction: column and the
       override was not winning reliably. Grid ignores flex-direction, so the
       two-column form here cannot be undone by it. */
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: .5rem;
    padding: .375rem 0;
    margin: 0;
    border-inline-end: 0;
    border-bottom: var(--rule);
  }
  .spec-strip__item:last-child { border-bottom: 0; }
  .spec-strip__value { text-align: end; }
}

/* Cards in a grid should end together: push the action to the bottom so the
   CTAs line up across a row regardless of title length. */
.woocommerce ul.products li.product .card__body { display: flex; flex-direction: column; height: 100%; }
.woocommerce ul.products li.product .card__body > .btn,
.woocommerce ul.products li.product .card__body > a.btn { margin-top: auto; }
.woocommerce ul.products li.product .price { margin-top: var(--space-3); }

/* =====================================================================
 * Single product — column widths and title scale
 *
 * Woo's layout sheet floats `div.images` at 48% and `div.summary` at 48%.
 * Inside the theme's two-column grid those percentages apply to the grid
 * cell, so the gallery collapsed to a fraction of its column.
 *
 * Product names here run long ("Термопомпа Vitocal 150-A 400V — отопление/
 * охлаждане, моноблок"), so the title takes its own smaller scale rather than
 * the page display size, which wrapped it to six lines.
 * ================================================================== */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product div.images,
.single-product div.product div.summary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child img { width: 100%; }

.single-product .product_title {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  line-height: 1.12;
  margin-bottom: var(--space-3);
}
.single-product .summary > .price {
  display: block;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-4);
}
.single-product .woocommerce-product-details__short-description {
  color: var(--color-text-muted);
  max-width: 46ch;
}
.single-product .summary .spec-strip { margin-bottom: var(--space-5); }

/* Product pages read as technical configuration sheets: a calm image stage,
   a compact decision column, and one clearly owned price/action panel. */
.single-product .site-main {
  background: linear-gradient(to bottom, var(--color-surface-sunken), var(--color-surface) 26rem);
}
.single-product div.product {
  row-gap: var(--space-9);
}
.single-product .product-kicker {
  margin-bottom: var(--space-3);
}
.single-product .product_title {
  max-width: 18ch;
  letter-spacing: var(--tracking-tight);
}
.single-product .woocommerce-product-details__short-description {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: var(--rule);
  line-height: var(--leading-relaxed);
}
.single-product .woocommerce-product-details__short-description > :last-child {
  margin-bottom: 0;
}

.single-product .woocommerce-product-gallery__wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: clamp(var(--space-4), 3vw, var(--space-7));
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child {
  display: grid;
  flex: 0 0 100%;
  min-height: clamp(22rem, 42vw, 34rem);
  place-items: center;
}
.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child a {
  display: grid;
  width: 100%;
  place-items: center;
}
.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 34rem;
  object-fit: contain;
}
.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child) {
  display: grid;
  flex: 0 0 4.75rem;
  width: 4.75rem !important;
  height: 4.75rem;
  margin: var(--space-2) 0 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child):hover,
.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child):focus-within {
  border-color: var(--color-brand-hover);
}
.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child) img {
  width: 100%;
  height: 100%;
  padding: var(--space-1);
  border: 0;
  object-fit: contain;
}
.single-product .woocommerce-product-gallery__trigger {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.single-product .summary .product_meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--rule);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}
.single-product .summary .product_meta > span {
  margin: 0;
}
.single-product .summary .product_meta a {
  color: var(--color-text-muted);
}

.single-product .quote-block .quote-form {
  display: grid;
  gap: var(--space-4);
}
.single-product .quote-block .field {
  margin: 0;
}
.single-product .quote-block .field__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.single-product .quote-block .select,
.single-product .quote-block .input {
  background: var(--color-surface);
}
.single-product .quote-form__reassurance {
  margin-top: 0;
  padding-top: var(--space-4);
  border-top: var(--rule);
  text-align: start;
  line-height: var(--leading-normal);
}

.single-product .woocommerce-tabs {
  margin-top: 0;
  padding: clamp(var(--space-5), 4vw, var(--space-8));
  border: var(--rule);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}
.single-product .woocommerce-tabs .panel {
  max-width: 78ch;
}
.single-product .related,
.single-product .up-sells {
  padding-top: var(--space-7);
  border-top: var(--rule);
}

@media (min-width: 1024px) {
  .single-product div.product {
    grid-template-columns: minmax(0, 1.12fr) minmax(22rem, .88fr);
    column-gap: clamp(var(--space-7), 5vw, var(--space-10));
  }
  .single-product div.product .woocommerce-product-gallery {
    position: static;
    top: auto;
  }
  .single-product div.product div.summary {
    position: static;
    top: auto;
    align-self: start;
  }
}

@media (max-width: 639px) {
  .single-product .site-main {
    background: linear-gradient(to bottom, var(--color-surface-sunken), var(--color-surface) 18rem);
  }
  .single-product .woocommerce-product-gallery__wrapper {
    display: flex;
    min-height: 0;
    padding: var(--space-3);
  }
  .single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child {
    min-height: 17rem;
  }
  .single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child img {
    max-height: 18rem;
  }
  .single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child) {
    flex-basis: 4rem;
    width: 4rem !important;
    height: 4rem;
  }
  .single-product .quote-block,
  .single-product .woocommerce-tabs {
    padding: var(--space-5);
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child {
    min-height: 22rem;
  }
  .single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child img {
    max-height: 24rem;
  }
}

/* Anything the quote script hides must actually disappear: several of these
   elements have a display value from a component rule, which beats [hidden]. */
[hidden] { display: none !important; }

/* =====================================================================
 * Hero
 *
 * One statement, one lead, two actions. It sits on the paper tone with a
 * hairline under it so the catalogue grid below reads as the next field on
 * the sheet rather than a new page.
 * ================================================================== */
.hero {
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem);
  background: #fff;
  border-bottom: var(--rule);
}
.hero__title {
  max-width: 18ch;
  margin: 0 0 var(--space-4);
  font-size: clamp(2rem, 1.4rem + 3.2vw, 3.75rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.hero__lead {
  max-width: 48ch;
  margin: 0 0 var(--space-6);
  font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}
@media (max-width: 479px) {
  /* Two full-width actions stack more comfortably than two half buttons. */
  .hero__actions .btn { width: 100%; }
}

/* =====================================================================
 * HOME — a bolder pass
 *
 * The home page content is imported Elementor output: an intro, four services
 * as h2 + paragraph + link, a partner logo strip and two EU funding notices.
 * Rewriting that markup risked dropping the funding notices — a legal
 * obligation — so the structure is left exactly as authored and the shape
 * comes entirely from CSS. Nothing here can lose content.
 * ================================================================== */

/* --- Hero: dark, with a thermal glow ------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  border-bottom: 0;
  overflow: hidden;
}
.hero::after {
  /* A cool-to-warm bloom, off-centre so it reads as light rather than a band. */
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  background:
    radial-gradient(closest-side, rgba(255, 140, 0, .30), transparent 70%),
    radial-gradient(closest-side, rgba(0, 105, 122, .35), transparent 72%);
  background-position: 60% 40%, 20% 70%;
  background-repeat: no-repeat;
  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
}
.hero .eyebrow { color: var(--orange-300); }
.hero .eyebrow::before { background: var(--orange-300); }
.hero__title { color: #fff; }
.hero__lead { color: rgba(255, 255, 255, .74); }
.hero__actions .btn--secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}
.hero__actions .btn--secondary:hover {
  background: rgba(255, 255, 255, .08);
  border-color: #fff;
}

/* --- Front page body ------------------------------------------------ */
/* Every top-level h2 in the home content becomes a section head. */
.home .entry-content > h2 {
  position: relative;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  padding-top: var(--space-5);
  border-top: var(--rule);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
}
/*
 * No numbering here on purpose.
 *
 * An earlier pass numbered these 01/02/03. They are a company statement, a
 * policy and four services — a list, not a sequence — so the numbers implied
 * an order that does not exist. The section head gets a short accent rule
 * instead, which marks the boundary without claiming anything.
 */
.home .entry-content > h2::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-bottom: var(--space-4);
  background: linear-gradient(90deg, var(--cool-600), var(--color-brand));
}

.home .entry-content > p {
  max-width: 62ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* "Научи повече" is a link in the source; give it the weight of an action. */
.home .entry-content > p > a,
.home .entry-content > a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: var(--space-2);
  font-weight: 500;
  color: var(--cool-700);
  text-decoration: none;
  border-bottom: 2px solid var(--orange-200);
  padding-bottom: 2px;
  transition: border-color .18s ease, color .18s ease;
}
.home .entry-content > p > a:hover,
.home .entry-content > a:hover { color: var(--ink); border-bottom-color: var(--color-brand); }

/* --- Partner logos --------------------------------------------------- */
.home .entry-content figure {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  padding: var(--space-4);
  background: #fff;
  border: var(--rule);
  border-radius: var(--radius-card);
}
.home .entry-content figure img {
  max-height: 46px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .68;
  transition: filter .2s ease, opacity .2s ease;
}
.home .entry-content figure:hover img { filter: grayscale(0); opacity: 1; }

/* The logos sit as consecutive figures; lay them out as a strip. */
.home .entry-content > figure {
  display: inline-flex;
  width: calc(50% - var(--space-2));
  margin: 0 var(--space-2) var(--space-3) 0;
  vertical-align: top;
}
@media (min-width: 640px) { .home .entry-content > figure { width: calc(33.333% - var(--space-3)); } }
@media (min-width: 1024px) { .home .entry-content > figure { width: calc(25% - var(--space-4)); } }

/* --- EU funding notices ---------------------------------------------- */
.home .entry-content > h4 {
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel);
}

/* --- Section rhythm on the template's own blocks --------------------- */
.section__header h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }
.section--muted { background: #fff; }

/* =====================================================================
 * SYSTEMS BOARD — the home page's structural device
 *
 * Nine categories, laid out so tile area tracks how deep the catalogue goes
 * in each: 91 boilers earn more room than 8 photovoltaic systems. The count
 * is printed on every tile, so the size is readable as information rather
 * than as arbitrary art direction.
 *
 * Mobile is a plain two-up; the asymmetry only appears once there is width
 * for it to mean anything.
 * ================================================================== */
.board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px)  { .board { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
@media (min-width: 1024px) { .board { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; } }

@media (min-width: 1024px) {
  .board__cell--lg { grid-column: span 2; grid-row: span 2; }
  .board__cell--md { grid-column: span 2; }
  .board__cell--sm { grid-column: span 1; }
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 150px;
  padding: var(--space-4);
  border-radius: var(--radius-card);
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}
.tile__media { position: absolute; inset: 0; z-index: -2; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; }

/* A single scrim, weighted to the bottom where the label sits, so the type
   stays legible over photography of white equipment on white walls. */
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(14, 18, 22, .88) 0%,
    rgba(14, 18, 22, .55) 38%,
    rgba(14, 18, 22, .12) 72%,
    rgba(14, 18, 22, .04) 100%);
  transition: opacity .25s ease;
}
.tile:hover::after { opacity: .82; }
.tile__media img { transition: transform .4s cubic-bezier(.2,.6,.2,1); }
.tile:hover .tile__media img { transform: scale(1.04); }
.tile:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }

.tile__body { display: flex; flex-direction: column; gap: .2rem; }
.tile__name {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-wrap: balance;
}
.tile__count {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
}
@media (min-width: 1024px) {
  .board__cell--lg .tile { padding: var(--space-6); }
  .board__cell--lg .tile__name { font-size: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tile__media img, .tile::after { transition: none; }
  .tile:hover .tile__media img { transform: none; }
}

/* Project cards are light photographic records, not black promo tiles. */
.project-carousel {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  margin-inline: calc(var(--gutter) * -1);
  padding: .15rem var(--gutter) var(--space-4);
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--cool-600) var(--gray-200);
}
.project-carousel .project-card {
  flex: 0 0 min(70vw, 20rem);
  scroll-snap-align: start;
}
.project-card {
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(14, 18, 22, .04), 0 12px 32px -28px rgba(14, 18, 22, .6);
}
.project-card .card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--gray-100);
}
.project-card .card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cool-600) 0 72%, var(--color-brand) 72%);
}
.project-card .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease);
}
.project-card .card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  gap: var(--space-3);
  align-items: center;
  min-height: 4.5rem;
  padding: .875rem var(--space-4);
  background: #fff;
}
.project-card .card__title { margin: 0; font-size: .9375rem; line-height: 1.25; }
.project-card__action {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--cool-700);
  font-family: var(--font-mono);
  transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.project-card:hover .card__media img { transform: scale(1.025); }
.project-card:hover .project-card__action { border-color: var(--cool-600); transform: translateX(2px); }

@media (min-width: 768px) {
  .project-carousel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding: 0;
  }
  .project-carousel .project-card { min-width: 0; }
}

/* Denser section rhythm now that the page carries more. */
.section { padding-block: clamp(2.25rem, 1.25rem + 3vw, 4rem); }

/* --- The demoted band: everything the page itself says ---------------- */
.section--rest { background: #fff; border-top: var(--rule); }
.section--rest .entry-content > h2 {
  margin-top: clamp(2rem, 1.25rem + 2vw, 3rem);
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
}
.section--rest .entry-content > p { font-size: 1rem; }

/* =====================================================================
 * Header: no hamburger on desktop
 *
 * The toggle only exists to open the mobile panel, and above 1024px that
 * panel is not reachable — the full navigation is already in the bar.
 * ================================================================== */
@media (min-width: 1024px) {
  .site-header__toggle,
  .site-header .site-header__toggle { display: none !important; }
}

/* The tile is a link, so base.css's a:hover colour applied on hover and the
   label turned brown over the photograph. Pin every state. */
.tile,
.tile:link,
.tile:visited,
.tile:hover,
.tile:focus,
.tile:active { color: #fff; }
.tile .tile__count { color: rgba(255, 255, 255, .68); }

/* Small tiles carry the least room, so lift the scrim under the label. */
.board__cell--sm .tile::after {
  background: linear-gradient(to top,
    rgba(14, 18, 22, .92) 0%,
    rgba(14, 18, 22, .68) 46%,
    rgba(14, 18, 22, .18) 78%,
    rgba(14, 18, 22, .06) 100%);
}

/* =====================================================================
 * PAGE HERO — service, policy and project pages
 *
 * The imported pages have no lead-in of their own: they open straight into a
 * paragraph. This gives every one of them the same entrance as the catalogue
 * — trail, title, then the body on a measured column.
 * ================================================================== */
.page-hero {
  padding-block: clamp(1.75rem, 1.25rem + 2.5vw, 3.5rem);
  background: #fff;
  border-bottom: var(--rule);
}
.page-hero .breadcrumbs,
.page-hero .woocommerce-breadcrumb { margin-bottom: var(--space-5); }
.page-hero__title {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(1.85rem, 1.35rem + 2.4vw, 3.25rem);
  letter-spacing: -0.03em;
  line-height: 1.04;
}
.page-hero__lead {
  max-width: 54ch;
  margin: var(--space-4) 0 0;
  font-size: 1.0625rem;
  color: var(--color-text-muted);
}

/* Body copy on these pages: one measured column, generous rhythm, and the
   same section rule the home page uses so the whole site reads as one thing. */
.page-content { max-width: 74ch; }
.page-content > h2 {
  margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
  padding-top: var(--space-5);
  border-top: var(--rule);
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.85rem);
}
.page-content > h2::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-bottom: var(--space-4);
  background: linear-gradient(90deg, var(--cool-600), var(--color-brand));
}
.page-content > h3 { margin-top: var(--space-7); }
.page-content > p,
.page-content > ul,
.page-content > ol {
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--color-text-muted);
}
.page-content > ul, .page-content > ol { padding-inline-start: 1.25rem; }
.page-content > ul li, .page-content > ol li { margin-bottom: .4rem; }
.page-content img { border-radius: var(--radius-card); }
.page-content > p > a { color: var(--cool-700); }

/* =====================================================================
 * CATALOGUE ROOT — the shop page lists categories, so give them the board
 * treatment rather than leaving them as bare product cards.
 * ================================================================== */
.woocommerce ul.products li.product-category {
  border: 0 !important;
  background: transparent;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.woocommerce ul.products li.product-category:hover { box-shadow: none; transform: none; }
.woocommerce ul.products li.product-category > a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 200px;
  height: 100%;
  padding: var(--space-4);
  border-radius: var(--radius-card);
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
  color: #fff !important;
  text-decoration: none;
}
.woocommerce ul.products li.product-category img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  transition: transform .4s cubic-bezier(.2,.6,.2,1);
}
.woocommerce ul.products li.product-category > a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(14,18,22,.9) 0%, rgba(14,18,22,.6) 42%, rgba(14,18,22,.12) 78%, rgba(14,18,22,.04) 100%);
}
.woocommerce ul.products li.product-category:hover img { transform: scale(1.04); }
.woocommerce ul.products li.product-category h2,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
/* Woo prints the count in a <mark>; make it the mono caption. */
.woocommerce ul.products li.product-category mark.count {
  display: block;
  margin-top: .2rem;
  background: none;
  color: rgba(255,255,255,.68);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
}
@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product-category img { transition: none; }
  .woocommerce ul.products li.product-category:hover img { transform: none; }
}

/* =====================================================================
 * CONTACT — the page is a list of people and an address, so set it as one.
 * ================================================================== */
.page-id-987 .page-content { max-width: none; }
.page-id-987 .page-content > h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
}
.page-id-987 .page-content > h2::before { display: none; }
.page-id-987 .page-content > h3,
.page-id-987 .page-content > h4 {
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cool-600);
}
.page-id-987 .page-content > ul {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}
.page-id-987 .page-content > ul li { margin-bottom: .25rem; }
.page-id-987 .page-content a[href^="tel:"] {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--orange-200);
}
.page-id-987 .page-content a[href^="tel:"]:hover { border-bottom-color: var(--color-brand); }
.page-id-987 .page-content iframe { border-radius: var(--radius-card); }
.page-id-987 .contact-form { margin-top: var(--space-8); }

/* The dedicated contact template keeps the imported database content intact,
   while removing its duplicate headings from the public presentation. */
.contact-page__content { background: var(--paper); }

.contact-directory {
  display: grid;
  gap: 1px;
  border: 1px solid var(--commerce-line);
  background: var(--commerce-line);
  clip-path: var(--commerce-plate);
}
.contact-card {
  min-width: 0;
  padding: var(--space-5);
  background: #fff;
}
.contact-card h2 {
  margin: 0 0 var(--space-4);
  font-size: 1.05rem;
  line-height: 1.25;
}
.contact-card__person {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
}
.contact-link {
  display: flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  border-bottom: 2px solid var(--orange-200);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}
.contact-link + .contact-link { margin-top: var(--space-1); }
.contact-link:hover { border-bottom-color: var(--color-brand); color: var(--cool-700); }
.contact-link--email { overflow-wrap: anywhere; }

.contact-office {
  display: grid;
  margin-top: var(--space-8);
  border: 1px solid var(--commerce-line);
  background: #fff;
  clip-path: var(--commerce-plate);
  overflow: hidden;
}
.contact-office__details {
  padding: var(--space-6);
  background: var(--commerce-ink);
  color: #fff;
}
.contact-office__details .eyebrow { color: var(--commerce-warm); }
.contact-office__details h2 {
  margin: var(--space-2) 0 var(--space-5);
  color: #fff;
  font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
}
.contact-office__details address {
  margin-bottom: var(--space-5);
  color: #c7d0d5;
  font-style: normal;
  line-height: 1.7;
}
.contact-link--inverse { border-bottom-color: rgba(255, 255, 255, .35); color: #fff; }
.contact-link--inverse:hover { border-bottom-color: var(--commerce-warm); color: #fff; }
.contact-office__map {
  display: block;
  width: 100%;
  height: clamp(22rem, 75vw, 32.5rem);
}

.contact-inquiry {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--commerce-line);
}
.contact-inquiry__heading h2 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
}
.contact-inquiry .contact-form {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  clip-path: var(--commerce-plate);
}

@media (min-width: 700px) {
  .contact-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .contact-office { grid-template-columns: minmax(17rem, .7fr) minmax(0, 1.3fr); }
  .contact-office__map { height: 100%; min-height: 30rem; }
  .contact-inquiry { grid-template-columns: minmax(15rem, .65fr) minmax(0, 1.35fr); gap: var(--space-8); }
}

/* =====================================================================
 * PORTFOLIO
 * ================================================================== */
.post-type-archive-astra-portfolio .page-header,
.single-astra-portfolio .page-header { margin-bottom: var(--space-7); }
.single-astra-portfolio .project__hero img { border-radius: var(--radius-card); }
.single-astra-portfolio .entry-content { max-width: 74ch; }

/* =====================================================================
 * SEARCH AND 404 — an empty screen is an invitation to act.
 * ================================================================== */
.search-results .page-header,
.error404 .page-header { margin-bottom: var(--space-6); }
.error404 .site-main,
.search-no-results .site-main { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.error404 h1, .search-no-results h1 { max-width: 18ch; }

/* The imported pages open with their own h1 ("Отопление, Вентилация и
   Климатизация") under the template's title ("ОВиК"), so every page shipped
   two. The markup is theirs to fix; here the second one is set at section
   scale so the hierarchy reads correctly. */
.page-content > h1 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.85rem);
  letter-spacing: -0.02em;
}
.page-content > h1::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-bottom: var(--space-4);
  background: linear-gradient(90deg, var(--cool-600), var(--color-brand));
}

/* Project photography is user-supplied and comes in mixed ratios, so the
   archive cards were ragged. Crop to a common frame; the subject of these is
   always the building, which sits centre. */
.post-type-archive-astra-portfolio .card__media {
  display: block;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--paper);
}
.post-type-archive-astra-portfolio .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-type-archive-astra-portfolio .card__body { padding: .875rem var(--space-4); }
.post-type-archive-astra-portfolio .card__title { font-size: .9375rem; }

/* =====================================================================
 * Front-page product loop
 *
 * This loop is authored by the theme, outside WooCommerce's normal archive
 * wrapper. Keep an explicit grid here so a cached markup/CSS mismatch cannot
 * turn eight cards into an eight-thousand-pixel vertical list.
 * ================================================================== */
.front-products ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.front-products ul.products > li.product { min-width: 0; }
@media (min-width: 768px) {
  .front-products ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The retained company/legal content is deliberately not rewritten. Tighten
   its rhythm so it reads as a supporting dossier instead of a second home
   page, while leaving every sentence, image and funding notice visible. */
.section--rest { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.section--rest .entry-content > h2 {
  margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
  padding-top: var(--space-4);
}
.section--rest .entry-content > h2:first-of-type { margin-top: 0; }
.section--rest .entry-content > p { line-height: 1.55; }
.section--rest .entry-content > h4 { margin-top: var(--space-6); }

/* =====================================================================
 * АКТУАЛНО — compact engineering bulletin
 * ================================================================== */
.home-news {
  background: var(--ink);
  color: #fff;
  border-block: 0;
}
.home-news h2 { color: #fff; }
.home-news .eyebrow { color: var(--orange-300); }
.home-news .eyebrow::before { background: var(--orange-300); }
.home-news__actions { display: flex; align-items: center; gap: var(--space-2); }
.home-news .btn--secondary {
  border-color: rgba(255, 255, 255, .28);
  background: transparent;
  color: #fff;
}
.home-news .btn--secondary:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.carousel-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-pill);
  background: transparent;
  color: #fff;
  font: 500 1.125rem/1 var(--font-mono);
  cursor: pointer;
}
.carousel-button:hover { background: #fff; color: var(--ink); }
.carousel-button:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }

.news-carousel {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding: 2px 2px var(--space-3);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--steel) transparent;
}
.news-carousel .news-card {
  flex: 0 0 min(84vw, 34rem);
  scroll-snap-align: start;
}

.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: var(--space-5);
  border: var(--rule);
  border-top: 3px solid var(--cool-600);
  border-radius: var(--radius-card);
  background: #fff;
  color: var(--color-text);
}
.news-card::before {
  content: "";
  position: absolute;
  top: -3px;
  right: 0;
  width: 32%;
  height: 3px;
  background: var(--color-brand);
}
.news-card__date {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .1em;
  color: var(--steel);
}
.news-card__title {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.6rem);
  line-height: 1.18;
}
.news-card__title a { color: var(--ink); text-decoration: none; }
.news-card__title a:hover { color: var(--cool-700); }
.news-card__excerpt { margin: 0 0 var(--space-5); color: var(--color-text-muted); line-height: 1.55; }
.news-card__link {
  align-self: flex-start;
  margin-top: auto;
  color: var(--cool-700);
  font-weight: 600;
  text-decoration: none;
}
.news-card__link:hover { color: var(--ink); text-decoration: underline; }

.news-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.news-single__content { max-width: 74ch; }
.news-single__back { margin-top: var(--space-8); padding-top: var(--space-5); border-top: var(--rule); }

/* Editorial images use the same PhotoSwipe viewer as product galleries. */
.content-lightbox {
  display: inline-block;
  cursor: zoom-in;
}
.content-lightbox:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; }
.content-lightbox img { display: block; }

/* The gallery enters fullscreen from the opening gesture, so a second control
   for the same state only adds ambiguity. Keep PhotoSwipe's close action. */
body .pswp .pswp__button--fs { display: none !important; }
body .pswp:fullscreen,
body .pswp:-webkit-full-screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: var(--gray-900) !important;
}
body .pswp:fullscreen::backdrop { background: var(--gray-900); }
body .pswp:fullscreen .pswp__bg,
body .pswp:-webkit-full-screen .pswp__bg { opacity: 1 !important; }

/* =====================================================================
 * ACTIVITY ALTERNATIVES — approval pages for the four core services
 *
 * The visual language comes from an engineering brief: a measured hero,
 * scoped work packages and one real sequence from inputs to handover. It is
 * deliberately separate from the imported service-page CSS so the current
 * pages remain untouched while the alternatives are reviewed.
 * ================================================================== */
.activity-review-note {
  padding-block: var(--space-2);
  border-bottom: var(--rule);
  background: var(--amber-50);
  color: var(--amber-600);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}

.activity-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--space-6), 5vw, var(--space-10));
  border-bottom: var(--rule);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: var(--space-8) var(--space-8);
}
.activity-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--paper) 0%,
    color-mix(in srgb, var(--paper) 96%, transparent) 42%,
    color-mix(in srgb, var(--paper) 55%, transparent) 100%
  );
  pointer-events: none;
}
.activity-hero > .container { position: relative; }
.activity-hero .breadcrumbs,
.activity-hero .woocommerce-breadcrumb { margin-bottom: var(--space-6); }
.activity-hero__grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
.activity-hero__copy { max-width: var(--measure-narrow); }
.activity-hero__title {
  margin: 0;
  max-width: 18ch;
  color: var(--ink);
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
.activity-hero__lead {
  margin: var(--space-5) 0 0;
  max-width: var(--measure-narrow);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}
.activity-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.activity-hero__media {
  position: relative;
  min-width: 0;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: var(--rule);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.activity-hero__media::after {
  content: "";
  position: absolute;
  inset: var(--space-3) var(--space-3) auto auto;
  width: var(--space-8);
  height: var(--space-8);
  border-top: 2px solid var(--color-brand);
  border-right: 2px solid var(--color-brand);
  pointer-events: none;
}
.activity-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.activity-hero__media--contain .activity-hero__image {
  padding: var(--space-5);
  object-fit: contain;
}

.activity-content-section { background: var(--color-surface); }
.activity-content { max-width: none; }
.activity-content > *:first-child { margin-top: 0; }
.activity-content p,
.activity-content li {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.activity-content h2,
.activity-content h3 { color: var(--ink); }
.activity-content h2 { font-size: var(--text-3xl); }
.activity-content h3 { font-size: var(--text-lg); }

.activity-section {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: var(--rule);
}
.activity-section--opening {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.activity-section__heading {
  max-width: var(--measure);
  margin-bottom: var(--space-7);
}
.activity-section__heading > h2 {
  margin: var(--space-2) 0 var(--space-4);
  max-width: 24ch;
  line-height: var(--leading-tight);
}
.activity-section__heading > p:last-child {
  margin-bottom: 0;
  max-width: var(--measure-narrow);
  color: var(--color-text-muted);
}
.activity-section__heading--row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: none;
}
.activity-section__heading--row h2 { margin-bottom: 0; }

.activity-card-grid {
  display: grid;
  gap: var(--space-4);
}
.activity-card {
  position: relative;
  margin: 0;
  padding: var(--space-5);
  overflow: hidden;
  border: var(--rule);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.activity-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--cool-600), var(--color-brand));
}
.activity-card__label,
.activity-proof__label {
  margin: 0 0 var(--space-3);
  color: var(--cool-700);
  font-family: var(--font-mono);
  font-size: var(--text-xs) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.activity-card h3 { margin: 0 0 var(--space-3); }
.activity-card p:last-child { margin: 0; color: var(--color-text-muted); }

.activity-scope-grid {
  display: grid;
  gap: var(--space-5);
}
.activity-scope {
  padding: var(--space-5);
  border-left: 3px solid var(--cool-600);
  background: var(--paper);
}
.activity-scope h3 { margin: 0 0 var(--space-4); }
.activity-checklist {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.activity-checklist li {
  position: relative;
  margin: 0;
  padding-left: var(--space-5);
  color: var(--color-text-muted);
}
.activity-checklist li::before {
  content: "";
  position: absolute;
  top: .65em;
  left: 0;
  width: var(--space-2);
  height: var(--space-2);
  border: 2px solid var(--color-brand);
}

.activity-section--process {
  padding: var(--space-7);
  border: 0;
  border-radius: var(--radius-card);
  background: var(--ink);
  color: var(--color-text-inverse);
}
.activity-section--process .eyebrow { color: var(--orange-300); }
.activity-section--process .activity-section__heading h2 { color: var(--color-text-inverse); }
.activity-process {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: activity-step;
}
.activity-process li {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: var(--space-5) 0 var(--space-5) var(--space-8);
  border-top: 1px solid var(--gray-700);
  counter-increment: activity-step;
}
.activity-process li::before {
  content: counter(activity-step, decimal-leading-zero);
  position: absolute;
  top: var(--space-5);
  left: 0;
  color: var(--orange-300);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.activity-process h3 { margin: 0 0 var(--space-2); color: var(--color-text-inverse); }
.activity-process p { margin: 0; color: var(--gray-300); }

.activity-brief {
  margin: 0;
  padding: var(--space-6);
  border: var(--rule);
  border-radius: var(--radius-card);
  background: var(--paper);
}
.activity-brief h3 { margin-top: 0; }
.activity-brief p { max-width: var(--measure-narrow); color: var(--color-text-muted); }
.activity-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cool-700);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.activity-text-link:hover { color: var(--ink); text-decoration: underline; }
.activity-text-link span { margin-left: var(--space-2); }

.activity-topic-list {
  border-top: 1px solid var(--gray-300);
}
.activity-topic {
  border-bottom: 1px solid var(--gray-300);
  background: var(--color-surface);
}
.activity-topic summary {
  position: relative;
  min-height: 64px;
  padding: var(--space-5) var(--space-8) var(--space-5) 0;
  color: var(--ink);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  cursor: pointer;
  list-style: none;
}
.activity-topic summary::-webkit-details-marker { display: none; }
.activity-topic summary::before,
.activity-topic summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--space-2);
  width: 14px;
  height: 2px;
  background: var(--cool-700);
  transform: translateY(-50%);
  transition: transform var(--duration-fast) var(--ease);
}
.activity-topic summary::after { transform: translateY(-50%) rotate(90deg); }
.activity-topic[open] summary::after { transform: translateY(-50%) rotate(0); }
.activity-topic[open] summary { color: var(--cool-700); }
.activity-topic summary:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}
.activity-topic__body {
  max-width: var(--measure);
  padding: 0 var(--space-8) var(--space-6) 0;
  color: var(--color-text-muted);
}
.activity-topic__body > :last-child { margin-bottom: 0; }
.activity-topic__body .activity-text-link { margin-top: var(--space-2); }

.activity-document-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-3);
}
.activity-document-list a {
  min-height: 76px;
  align-content: center;
}

.activity-proof {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-10);
  padding: var(--space-7);
  border: 1px solid var(--cool-100);
  border-left: 4px solid var(--cool-600);
  border-radius: var(--radius-card);
  background: var(--cool-50);
}
.activity-proof h2 {
  margin: 0 0 var(--space-3);
  max-width: 30ch;
  font-size: var(--text-2xl);
}
.activity-proof p:not(.activity-proof__label) {
  margin: 0;
  max-width: var(--measure);
  color: var(--color-text-muted);
}
.activity-proof .btn { justify-self: start; }

.activity-project-grid {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding: 0 0 var(--space-4);
  scroll-padding-inline: 0;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--orange-500) var(--gray-200);
  scrollbar-width: thin;
}
.activity-project-card {
  display: block;
  flex: 0 0 78%;
  overflow: hidden;
  border: var(--rule);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--ink);
  text-decoration: none;
  scroll-snap-align: start;
  box-shadow: 0 1px 2px rgba(14, 18, 22, .04), 0 12px 32px -28px rgba(14, 18, 22, .6);
}
.activity-project-card:link,
.activity-project-card:visited,
.activity-project-card:hover { color: var(--ink); }
.activity-project-card img {
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: 0;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease);
}
.activity-project-card > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  gap: var(--space-3);
  align-items: center;
  min-height: 4.5rem;
  padding: .875rem var(--space-4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
.activity-project-card > span::after {
  content: "→";
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: var(--rule);
  border-radius: 50%;
  color: var(--cool-700);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.activity-project-card:hover img { transform: scale(1.03); }
.activity-project-card:hover > span { color: var(--cool-700); }

.activity-cta {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-10);
  padding: var(--space-7);
  border-radius: var(--radius-card);
  background: var(--ink);
  color: var(--color-text-inverse);
}
.activity-cta .eyebrow { color: var(--orange-300); }
.activity-cta h2 {
  margin: var(--space-2) 0 var(--space-3);
  max-width: 26ch;
  color: var(--color-text-inverse);
  font-size: var(--text-3xl);
}
.activity-cta p:last-child { margin: 0; max-width: var(--measure-narrow); color: var(--gray-300); }
.activity-cta .btn { justify-self: start; }

@media (min-width: 768px) {
  .activity-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .activity-scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-proof,
  .activity-cta { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (min-width: 640px) {
  .activity-project-card { flex-basis: 46%; }
}

@media (min-width: 1024px) {
  .activity-hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: var(--space-9); }
  .activity-hero__media { aspect-ratio: 5 / 4; }
  .activity-process { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .activity-process li {
    padding: var(--space-8) var(--space-5) var(--space-5) 0;
    border-top: 1px solid var(--gray-700);
  }
  .activity-process li + li { padding-left: var(--space-5); }
  .activity-process li::before { top: var(--space-3); left: 0; }
  .activity-process li + li::before { left: var(--space-5); }
  .activity-project-card { flex-basis: 31%; }
}

@media (max-width: 767px) {
  .activity-hero__actions .btn { width: 100%; }
  .activity-section--process,
  .activity-proof,
  .activity-cta { padding: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .activity-project-card img { transition: none; }
  .activity-project-card:hover img { transform: none; }
}

@media (min-width: 768px) {
  .news-carousel .news-card { flex-basis: calc(50% - var(--space-2)); }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .home-news .section__header { align-items: flex-end; }
  .home-news__actions .btn { display: none; }
  .news-card { min-height: 230px; padding: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .news-carousel { scroll-behavior: auto; }
}
@media (min-width: 1024px) {
  .front-products ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Clickable area, not glyph size, defines the target. */
@media (max-width: 1023px) {
  .site-header__logo,
  .site-header__toggle,
  .quote-indicator,
  .woocommerce-pagination a,
  .woocommerce-pagination span,
  .pagination .page-numbers { min-height: 44px; min-width: 44px; }

  .breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .breadcrumbs li { min-height: 44px; }

  .page-id-987 .page-content a[href^="tel:"],
  .page-id-987 .page-content a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* =====================================================================
 * HOMEPAGE ALTERNATIVE
 *
 * The signature is an engineering route: building and system photography
 * meet in the hero, then a real four-stage project sequence carries the
 * visitor into either services or catalogue systems. Scope every rule to the
 * proposal so the current front page remains visually unchanged.
 * ================================================================== */
.home-alt-page { background: var(--color-surface); }

.home-alt-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(var(--space-7), 5vw, var(--space-10)) 0 0;
  background: var(--gray-900);
  color: var(--color-text-inverse);
}
.home-alt-hero::before {
  content: "";
  position: absolute;
  width: 28rem;
  height: 28rem;
  top: -15rem;
  left: -12rem;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  box-shadow: 0 0 0 5rem rgba(255, 255, 255, .018), 0 0 0 10rem rgba(255, 255, 255, .012);
  pointer-events: none;
}
.home-alt-hero__grid {
  position: relative;
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
.home-alt-hero__copy { max-width: 42rem; padding-bottom: var(--space-7); }
.home-alt-hero .eyebrow { color: var(--orange-300); }
.home-alt-hero .eyebrow::before { background: var(--orange-300); }
.home-alt-hero h1 {
  max-width: 17ch;
  margin: 0 0 var(--space-5);
  color: var(--color-text-inverse);
  font-size: clamp(2.25rem, 1.5rem + 3.6vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.home-alt-hero__lead {
  max-width: 55ch;
  margin: 0 0 var(--space-6);
  color: var(--gray-300);
  font-size: clamp(var(--text-base), .95rem + .35vw, var(--text-lg));
  line-height: 1.6;
}
.home-alt-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.home-alt-hero__actions .btn--secondary {
  color: var(--color-text-inverse);
  border-color: var(--gray-600);
  background: transparent;
}
.home-alt-hero__actions .btn--secondary:hover { border-color: var(--gray-0); background: rgba(255, 255, 255, .07); }
.home-alt-hero__scope {
  margin: var(--space-5) 0 0;
  color: var(--gray-400);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.home-alt-hero__slider {
  position: relative;
  margin-bottom: var(--space-7);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-lg);
  background: var(--gray-800);
  box-shadow: var(--shadow-lg);
}
.home-alt-hero__slides { position: relative; aspect-ratio: 4 / 3; }
.home-alt-hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}
.home-alt-hero__slide[hidden] { display: none; }
.home-alt-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-alt-hero__slide::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(20, 23, 26, .94));
  pointer-events: none;
}
.home-alt-hero__slide-copy {
  position: absolute;
  z-index: 1;
  right: var(--space-5);
  bottom: var(--space-5);
  left: var(--space-5);
}
.home-alt-hero__slide-copy strong,
.home-alt-hero__slide-copy span { display: block; }
.home-alt-hero__slide-copy strong {
  max-width: 28ch;
  color: var(--gray-0);
  font-size: clamp(var(--text-lg), 1rem + .65vw, var(--text-2xl));
  line-height: var(--leading-snug);
}
.home-alt-hero__slide-copy span {
  max-width: 46ch;
  margin-top: var(--space-2);
  color: var(--gray-200);
  font-size: var(--text-sm);
}

.home-alt-route {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--gray-700);
}
.home-alt-route__tab {
  position: relative;
  min-height: 5.75rem;
  padding: var(--space-4);
  border: 0;
  border-top: 3px solid transparent;
  background: var(--gray-900);
  color: var(--gray-300);
  text-align: left;
  cursor: pointer;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.home-alt-route__tab:hover { background: var(--gray-800); color: var(--gray-0); }
.home-alt-route__tab.is-active {
  border-top-color: var(--color-brand);
  background: var(--gray-800);
  color: var(--gray-0);
}
.home-alt-route__tab > span {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--orange-300);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.home-alt-route__tab strong { display: block; font-size: var(--text-sm); line-height: var(--leading-snug); }

.home-alt-heading { max-width: 48rem; margin-bottom: var(--space-7); }
.home-alt-heading h2 { margin-bottom: var(--space-3); font-size: var(--text-3xl); text-wrap: balance; }
.home-alt-heading > p:last-child { max-width: var(--measure-narrow); margin: 0; color: var(--color-text-muted); }
.home-alt-heading--compact { margin-bottom: var(--space-6); }

.home-alt-choice__grid { display: grid; gap: var(--space-4); }
.home-alt-choice__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  min-height: 9rem;
  padding: var(--space-5);
  border: var(--rule);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.home-alt-choice__card:hover { transform: translateY(-2px); border-color: var(--orange-500); box-shadow: var(--shadow-md); color: var(--color-text); }
.home-alt-choice__index {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--gray-900);
  color: var(--orange-300);
  font-family: var(--font-mono);
}
.home-alt-choice__card strong { display: block; margin-bottom: var(--space-2); font-size: var(--text-xl); line-height: var(--leading-snug); }
.home-alt-choice__card small { display: block; max-width: 44ch; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.5; }
.home-alt-choice__card > span:last-child { color: var(--color-brand-text); font-size: var(--text-xl); }

.home-alt-services__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.home-alt-service-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 10.5rem;
  padding: var(--space-4);
  border: var(--rule);
  border-top: 3px solid var(--gray-800);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
}
.home-alt-service-card:hover { color: var(--color-text); border-top-color: var(--color-brand); box-shadow: var(--shadow-md); }
.home-alt-service-card__code { color: var(--color-text-subtle); font-family: var(--font-mono); font-size: var(--text-xs); }
.home-alt-service-card h3 { align-self: end; margin: var(--space-4) 0; font-size: clamp(var(--text-base), .9rem + .35vw, var(--text-xl)); line-height: var(--leading-snug); }
.home-alt-service-card__link { justify-self: end; color: var(--color-brand-text); font-size: var(--text-xl); font-weight: var(--weight-medium); }

.home-alt-projects__grid {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding: 0 0 var(--space-4);
  scroll-padding-inline: 0;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--orange-500) var(--gray-200);
  scrollbar-width: thin;
}
.home-alt-project-card {
  display: block;
  flex: 0 0 78%;
  overflow: hidden;
  border: var(--rule);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  scroll-snap-align: start;
  box-shadow: 0 1px 2px rgba(14, 18, 22, .04), 0 12px 32px -28px rgba(14, 18, 22, .6);
}
.home-alt-project-card:link,
.home-alt-project-card:visited,
.home-alt-project-card:hover { color: var(--ink); }
.home-alt-project-card__media { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; }
.home-alt-project-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cool-600) 0 72%, var(--color-brand) 72%);
}
.home-alt-project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease); }
.home-alt-project-card:hover img { transform: scale(1.035); }
.home-alt-project-card__body { display: grid; grid-template-columns: minmax(0, 1fr) 2rem; gap: var(--space-3); align-items: center; min-height: 4.5rem; padding: .875rem var(--space-4); }
.home-alt-project-card__body strong { max-width: 24ch; line-height: var(--leading-snug); }
.home-alt-project-card__body > span { display: grid; width: 2rem; height: 2rem; place-items: center; border: var(--rule); border-radius: 50%; color: var(--cool-700); font-family: var(--font-mono); font-size: var(--text-sm); }

.home-alt-catalogue__grid { display: grid; gap: var(--space-3); }
.home-alt-category {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  min-height: 5.5rem;
  padding: var(--space-3);
  border: var(--rule);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
}
.home-alt-category:hover { color: var(--color-text); border-color: var(--orange-500); }
.home-alt-category__media { display: block; width: 4rem; height: 4rem; overflow: hidden; border-radius: var(--radius-sm); background: var(--gray-50); }
.home-alt-category__media img { width: 100%; height: 100%; object-fit: contain; }
.home-alt-category__body strong,
.home-alt-category__body small { display: block; }
.home-alt-category__body small { margin-top: var(--space-1); color: var(--color-text-subtle); font-family: var(--font-mono); font-size: var(--text-xs); }
.home-alt-category > span:last-child { color: var(--color-brand-text); }
.home-alt-catalogue__note { max-width: var(--measure); margin: var(--space-6) 0 0; padding-left: var(--space-4); border-left: 3px solid var(--color-brand); color: var(--color-text-muted); }

.home-alt-process__layout { display: grid; gap: var(--space-8); }
.home-alt-process__steps { margin: 0; padding: 0; border-top: 1px solid var(--gray-300); list-style: none; }
.home-alt-process__steps li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--gray-300); }
.home-alt-process__steps li > span { color: var(--color-brand-text); font-family: var(--font-mono); font-size: var(--text-sm); }
.home-alt-process__steps h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.home-alt-process__steps p { margin: 0; color: var(--color-text-muted); }

.home-alt-proof { background: var(--gray-900); color: var(--gray-0); }
.home-alt-proof__grid { display: grid; gap: var(--space-4); }
.home-alt-proof h2 { color: var(--gray-0); }
.home-alt-proof p { max-width: var(--measure-narrow); color: var(--gray-300); }
.home-alt-proof .eyebrow { color: var(--orange-300); }
.home-alt-proof .eyebrow::before { background: var(--orange-300); }
.home-alt-proof__item { display: flex; flex-direction: column; justify-content: center; min-height: 10rem; padding: var(--space-5); border: 1px solid var(--gray-700); border-radius: var(--radius-lg); color: var(--gray-0); text-decoration: none; }
.home-alt-proof__item:link,
.home-alt-proof__item:visited,
.home-alt-proof__item:hover { color: var(--gray-0); }
.home-alt-proof__item:hover { border-color: var(--orange-400); }
.home-alt-proof__item span { color: var(--orange-300); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; }
.home-alt-proof__item strong { margin: var(--space-3) 0; font-size: var(--text-2xl); }
.home-alt-proof__item small { color: var(--gray-300); line-height: 1.5; }

.home-alt-partners__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.home-alt-partner { display: grid; place-items: center; min-height: 6rem; padding: var(--space-4); border: var(--rule); border-radius: var(--radius-md); background: var(--gray-0); }
.home-alt-partner img { max-width: 9rem; max-height: 2.75rem; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .72; }

.home-alt-news__grid { display: grid; gap: var(--space-4); }
.home-alt-news-card { padding: var(--space-5); border-top: 3px solid var(--gray-800); background: var(--gray-0); }
.home-alt-news-card__media { display: block; aspect-ratio: 16 / 7; margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-5); overflow: hidden; background: var(--gray-50); }
.home-alt-news-card__media img { width: 100%; height: 100%; object-fit: contain; }
.home-alt-news-card > p:first-child { margin: 0 0 var(--space-4); color: var(--color-text-subtle); font-family: var(--font-mono); font-size: var(--text-xs); }
.home-alt-news-card h3 { margin: 0 0 var(--space-3); font-size: var(--text-xl); }
.home-alt-news-card h3 a { color: var(--color-text); text-decoration: none; }
.home-alt-news-card > p { color: var(--color-text-muted); }
.home-alt-news-card > a { color: var(--color-brand-text); font-weight: var(--weight-medium); text-decoration: none; }

.home-alt-cta { padding-block: clamp(var(--space-8), 6vw, var(--space-11)); background: var(--gray-800); color: var(--gray-0); }
.home-alt-cta__inner { display: grid; gap: var(--space-6); align-items: center; }
.home-alt-cta h2 { max-width: 24ch; margin: 0 0 var(--space-3); color: var(--gray-0); font-size: var(--text-3xl); text-wrap: balance; }
.home-alt-cta p:last-child { max-width: var(--measure-narrow); margin: 0; color: var(--gray-300); }
.home-alt-cta .eyebrow { color: var(--orange-300); }
.home-alt-cta .eyebrow::before { background: var(--orange-300); }
.home-alt-cta .btn { justify-self: start; }

@media (min-width: 640px) {
  .home-alt-route { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-alt-services__grid,
  .home-alt-catalogue__grid,
  .home-alt-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-alt-project-card { flex-basis: 46%; }
  .home-alt-partners__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .home-alt-choice__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-alt-proof__grid { grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, .85fr)); align-items: stretch; }
  .home-alt-cta__inner { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (min-width: 1024px) {
  .home-alt-hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: var(--space-9); min-height: 38rem; }
  .home-alt-hero__copy { padding-bottom: 0; }
  .home-alt-hero__slider { margin-bottom: 0; }
  .home-alt-services__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-alt-project-card { flex-basis: 31%; }
  .home-alt-catalogue__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-alt-process__layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-10); align-items: start; }
  .home-alt-partners__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .home-alt-hero__actions .btn { width: 100%; }
  .home-alt-choice__card { grid-template-columns: auto minmax(0, 1fr); }
  .home-alt-choice__card > span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .home-alt-choice__card,
  .home-alt-route__tab,
  .home-alt-project-card__media img { transition: none; }
  .home-alt-choice__card:hover { transform: none; }
  .home-alt-project-card:hover img { transform: none; }
  .project-card .card__media img,
  .project-card__action { transition: none; }
  .project-card:hover .card__media img { transform: none; }
  .project-card:hover .project-card__action { transform: none; }
}

/* ---- commerce.css ---- */
/**
 * ALNI commerce system.
 *
 * Product surfaces are technical selection tools, not generic shop cards.
 * The visual language uses open data rails, chamfered equipment plates and a
 * single dark configuration console on the PDP. Everything decorative is
 * tied to an actual job: orientation, comparison or configuration.
 */

:root {
  --commerce-paper: #F2F5F6;
  --commerce-panel: #FFFFFF;
  --commerce-ink: #10171D;
  --commerce-ink-soft: #1A252D;
  --commerce-line: #D7DEE3;
  --commerce-line-strong: #AAB5BD;
  --commerce-cool: #00697A;
  --commerce-warm: #FF8C00;
  --commerce-cut: 12px;
  --commerce-plate: polygon(
    0 0,
    calc(100% - var(--commerce-cut)) 0,
    100% var(--commerce-cut),
    100% 100%,
    var(--commerce-cut) 100%,
    0 calc(100% - var(--commerce-cut))
  );
}

/* =====================================================================
 * Catalogue orientation
 * ================================================================== */
body.woocommerce.archive .site-main,
body.post-type-archive-product .site-main,
body.search-results .site-main {
  background:
    linear-gradient(90deg, rgba(0, 105, 122, .035) 1px, transparent 1px),
    linear-gradient(rgba(0, 105, 122, .035) 1px, transparent 1px),
    var(--commerce-paper);
  background-size: 32px 32px;
}

.woocommerce-products-header,
.search-results .page-header {
  position: relative;
  display: grid;
  /* Grid items default to min-width:auto, so a long unbreakable heading grows
   * its track past the container instead of wrapping. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  padding: 0 0 clamp(1.5rem, 3vw, 2.5rem) var(--space-5);
  border-bottom: 1px solid var(--commerce-line);
}
.woocommerce-products-header::before,
.search-results .page-header::before {
  content: "";
  position: absolute;
  inset-block: .35rem calc(1.5rem + 1px);
  inset-inline-start: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--commerce-cool), var(--commerce-warm));
}
/*
 * The heading owns its row.
 *
 * It used to share one with the description in a two-column grid, which held
 * until a category was called "Високотемпературни" — a single 18-character
 * word that cannot break, set at 76px, overflowed its track and printed
 * through the text beside it. The ceiling is lower now, the measure wider,
 * and long compounds are allowed to break rather than escape the box.
 */
.woocommerce-products-header__title,
.search-results .page-header h1 {
  max-width: 24ch;
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Up one level: a chevron beside the heading, scaled to sit with it rather
 * than claiming a row of its own. */
.archive-back {
  display: grid;
  place-items: center;
  order: -1;
  justify-self: start;
  width: clamp(2.25rem, 1.9rem + 1.2vw, 3rem);
  height: clamp(2.25rem, 1.9rem + 1.2vw, 3rem);
  border: 1px solid var(--commerce-line-strong);
  border-radius: 50%;
  background: var(--commerce-panel);
  color: var(--commerce-ink);
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.archive-back:hover,
.archive-back:focus-visible {
  border-color: var(--commerce-cool);
  background: color-mix(in srgb, var(--commerce-cool) 8%, var(--commerce-panel));
  color: var(--commerce-cool);
}
.archive-back__icon {
  width: 55%;
  height: 55%;
  transition: transform .15s ease;
}
.archive-back:hover .archive-back__icon { transform: translateX(-2px); }

/*
 * Beside the heading, not above it.
 *
 * WooCommerce prints the <h1> with no hook in front of it, so the link is
 * rendered after it and placed explicitly. Column 2 is minmax(0, 1fr) — the
 * constraint that stops a long unbreakable category name overflowing its
 * track, which is what broke this header the first time it had two columns.
 */
@supports selector(:has(*)) {
  .woocommerce-products-header:has(.archive-back) {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-3);
    align-items: center;
  }
  .woocommerce-products-header:has(.archive-back) .archive-back { grid-area: 1 / 1; }
  .woocommerce-products-header:has(.archive-back) .woocommerce-products-header__title { grid-area: 1 / 2; }
  .woocommerce-products-header:has(.archive-back) .archive-intro,
  .woocommerce-products-header:has(.archive-back) .alni-modal { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .archive-back:hover .archive-back__icon { transform: none; }
}

/* Standfirst: two lines and a way to read the rest. */
.archive-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  max-width: 78ch;
}
.archive-description {
  min-width: 0;
  margin: 0;
  color: var(--color-text-muted);
  font-size: clamp(1rem, .95rem + .25vw, 1.0625rem);
  line-height: 1.6;
}
.archive-description > :last-child { margin-bottom: 0; }

/*
 * `is-clamped` is added by script. Clamping in the stylesheet alone would
 * hide the rest of the text from anyone whose JavaScript never ran, and the
 * button that reveals it is itself script-enabled.
 */
.archive-intro.is-clamped .archive-description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.archive-intro__more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex: none;
  padding: .3rem .6rem .3rem .4rem;
  border: 1px solid var(--commerce-line-strong);
  border-radius: 999px;
  background: var(--commerce-panel);
  color: var(--commerce-cool);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}
.archive-intro__more:hover {
  border-color: var(--commerce-cool);
  background: color-mix(in srgb, var(--commerce-cool) 7%, var(--commerce-panel));
}
.archive-intro__icon {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--commerce-cool);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
}

/* ---------------------------------------------------------------------
 * Modal
 *
 * A native <dialog>: focus trapping, Esc and the top layer come with it,
 * and it is display:none until showModal(), so this is inert markup when
 * the script does not run.
 * ------------------------------------------------------------------ */
.alni-modal {
  width: min(46rem, calc(100vw - 2rem));
  max-height: min(80vh, 44rem);
  padding: 0;
  border: 1px solid var(--commerce-line);
  border-radius: var(--radius-md);
  background: var(--commerce-panel);
  color: var(--commerce-ink);
}
.alni-modal::backdrop { background: rgb(16 23 29 / 55%); }
.alni-modal__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--commerce-line);
  background: var(--commerce-panel);
}
.alni-modal__title {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1.2;
  overflow-wrap: break-word;
}
.alni-modal__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -.35rem -.35rem 0 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--commerce-ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.alni-modal__close:hover { background: var(--commerce-paper); }
.alni-modal__body {
  overflow-y: auto;
  padding: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.7;
}
.alni-modal__body > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
 * Subcategory strip
 *
 * The catalogue is three levels deep in places, and the sub-type is the
 * distinction a visitor is actually making — "моноблок" vs "сплит", not
 * "термопомпи". Children where a category has them; siblings at a leaf, so
 * reaching the bottom of the tree is not a dead end.
 *
 * Labels sit BELOW the image on their own surface. The tiles this replaces
 * overlaid white text on product photography, and most of this catalogue is
 * photographed white-on-white.
 * ------------------------------------------------------------------ */
.subcats { margin: 0 0 clamp(1.25rem, 2vw, 1.75rem); }
.subcats__list {
  display: grid;
  /*
   * Deliberately small. This is a wayfinding strip, not a second product
   * grid — it sits above the real one and every row it takes is a row of
   * products pushed below the fold.
   */
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.subcat {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--commerce-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.subcat:hover,
.subcat:focus-visible {
  border-color: var(--commerce-cool);
  box-shadow: 0 6px 20px rgb(0 0 0 / 7%);
  transform: translateY(-2px);
}
.subcat.is-current {
  border-color: var(--commerce-cool);
  box-shadow: inset 0 0 0 1px var(--commerce-cool);
}
.subcat__media {
  display: grid;
  place-items: center;
  /* `min-height: 0` is what makes the aspect ratio bind. Without it the box
   * keeps min-height:auto, the image's intrinsic height wins, and the tile
   * silently renders at 149px instead of the 94px asked for. */
  min-height: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  padding: var(--space-2);
  background: var(--commerce-paper);
}
.subcat__media:empty { display: none; }
.subcat__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Name and count share a line where they fit, which saves a whole row of
 * height across the strip. */
.subcat__body {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .35rem;
  padding: .45rem .55rem;
}
.subcat__name {
  min-width: 0;
  color: var(--commerce-ink);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  text-wrap: pretty;
  /* "Високотемпературни" is wider than a 151px tile. */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.subcat__count {
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .02em;
}
.search-results .page-header__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .08em;
  color: var(--steel);
}

/* ---------------------------------------------------------------------
 * Catalogue layout
 *
 * One form holding the facets, the sort, the count and the product grid —
 * which is what lets the facets sit in a column beside the products instead
 * of eating a band of vertical space above them.
 *
 *   ≥1440px   sticky sidebar · 4 product columns
 *   ≥1024px   sticky sidebar · 3 product columns
 *   ≤1023px   the sidebar becomes a sheet behind a Filters button
 *
 * The sheet is only hidden once JavaScript has added `is-enhanced`. Without
 * it the facets stay in the flow, so the form remains usable.
 * ------------------------------------------------------------------ */
.catalogue-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin: 0 0 var(--space-6);
}

.catalogue-layout__main { min-width: 0; }

/* ---- the rail above the grid ---------------------------------------- */
.catalogue-layout__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  padding: .6rem .9rem;
  border: 1px solid var(--commerce-line);
  border-inline-start: 3px solid var(--commerce-cool);
  border-radius: var(--radius-md);
  background: var(--commerce-panel);
}
.catalogue-layout__count {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .055em;
}

/* The toggle is a small-screen control: where the sidebar is visible, a
 * button that hides it would only add a click. */
.catalogue-layout__toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .55rem .9rem;
  border: 1px solid var(--commerce-line-strong);
  border-radius: 2px;
  background: var(--commerce-panel);
  color: var(--commerce-ink);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}
.catalogue-layout__toggle:hover { border-color: var(--commerce-cool); }
.catalogue-layout__badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--commerce-cool);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* Sorting sits at the top of the filter panel, so it is full width of that
 * column rather than a control floating opposite the count. */
.woocommerce .catalogue-layout__sort,
.catalogue-layout__sort {
  display: block;
  width: 100%;
  min-height: 44px;
  max-width: none;
  padding: .625rem 2.25rem .625rem .75rem;
  border: 1px solid var(--commerce-line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--commerce-panel);
  color: var(--commerce-ink);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
}
.woocommerce .catalogue-layout__sort:hover { border-color: var(--commerce-cool); }

/* The sort block is not a fieldset, so it needs the spacing a legend gives. */
.filters__group--sort .filters__legend { display: block; }

/* ---- what is currently applied -------------------------------------- */
.catalogue-layout__active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .5rem .3rem .65rem;
  border: 1px solid var(--commerce-cool);
  border-radius: 999px;
  background: color-mix(in srgb, var(--commerce-cool) 8%, transparent);
  color: var(--commerce-ink);
  font-size: var(--text-sm);
  line-height: 1.3;
  text-decoration: none;
}
.chip:hover { background: color-mix(in srgb, var(--commerce-cool) 16%, transparent); }
.chip__remove {
  font-size: 1.1em;
  line-height: 1;
  color: var(--commerce-cool);
}

/* ---- the sidebar ----------------------------------------------------- */
.catalogue-layout__side {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--commerce-line);
  border-radius: var(--radius-md);
  background: var(--commerce-panel);
}
.catalogue-layout__groups {
  display: grid;
  gap: var(--space-4);
}

/* Sheet chrome: only ever seen below the sidebar breakpoint. */
.catalogue-layout__sheet-head { display: none; }
.catalogue-layout__sheet-title {
  margin: 0;
  font-size: var(--text-lg);
}
.catalogue-layout__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--commerce-ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.filters__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.filters__legend {
  padding: 0 0 var(--space-2);
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.filters__options {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.filters__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.filters__label {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  min-height: 34px;
  padding: .35rem .6rem;
  border: 1px solid var(--commerce-line);
  border-radius: var(--radius-sm);
  background: var(--commerce-paper);
  color: var(--commerce-ink);
  font-size: var(--text-sm);
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.filters__label:hover { border-color: var(--commerce-cool); }
.filters__input:focus-visible + .filters__label {
  outline: 2px solid var(--commerce-cool);
  outline-offset: 2px;
}
.filters__input:checked + .filters__label {
  border-color: var(--commerce-cool);
  background: var(--commerce-cool);
  color: #fff;
}
.filters__count {
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.filters__input:checked + .filters__label .filters__count { color: rgb(255 255 255 / 78%); }

/* A value that would return nothing stays visible — hiding it makes the panel
 * reshuffle on every click — but it reads as spent rather than available. */
.filters__label.is-empty {
  border-style: dashed;
  color: var(--color-text-subtle);
}

.catalogue-layout__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--commerce-line);
}
.catalogue-layout__clear {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.catalogue-layout__clear:hover { color: var(--commerce-cool); }

/* Where the facets apply on change, an Apply button is a second way to do
 * what already happened. It returns in the sheet, which is a deliberate
 * pick-several-then-look flow. */
.catalogue-layout.is-enhanced .catalogue-layout__apply { display: none; }
.catalogue-layout.is-enhanced .catalogue-layout__actions:not(:has(.catalogue-layout__clear)) {
  margin: 0;
  padding: 0;
  border: 0;
}

/* ---- infinite scroll -------------------------------------------------- */

/* Pagination is not removed, only stood down: it is the fallback when a
 * fetch fails, and it keeps real page links in the markup. */
.woocommerce-pagination.is-superseded { display: none; }

.catalogue-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) 0 var(--space-3);
}
.catalogue-more[aria-busy="true"] .catalogue-more__button { opacity: .6; }
.catalogue-more__end {
  margin: 0;
  color: var(--color-text-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .05em;
}

/* ---- results swapping in place --------------------------------------- */
.catalogue-layout[aria-busy="true"] .woocommerce ul.products,
.catalogue-layout[aria-busy="true"] ul.products {
  opacity: .45;
  transition: opacity .15s ease;
}
.catalogue-layout[aria-busy="true"] { cursor: progress; }

/* ---- sidebar sizes ---------------------------------------------------- */
@media (min-width: 1024px) {
  .catalogue-layout { grid-template-columns: 15.5rem minmax(0, 1fr); }

  /* The sidebar is right there; a button to reveal it is noise. */
  .catalogue-layout__toggle { display: none; }
  .catalogue-layout__sheet-head { display: none; }

  /* Sticky, so a long grid can be re-filtered without scrolling back up —
   * which is the same reason the results swap in place. */
  .catalogue-layout__side {
    position: sticky;
    top: var(--space-4);
    align-self: start;
    max-height: calc(100vh - var(--space-6));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /*
   * Column count follows the space that actually exists, not the viewport.
   *
   * The container is capped at 1200px, so a 15.5rem sidebar leaves ~840px for
   * products at every desktop width — viewport breakpoints would keep
   * promising a fourth column and delivering 192px cards. A minimum card
   * width instead yields three comfortable columns beside the sidebar, two on
   * a narrow laptop, and four if the container is ever widened.
   */
  .catalogue-layout__main .woocommerce ul.products,
  .woocommerce .catalogue-layout__main ul.products {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }
}

/* ---- below the sidebar: the facets become a sheet --------------------- */
@media (max-width: 1023px) {
  .catalogue-layout.is-enhanced .catalogue-layout__side {
    position: fixed;
    z-index: 70;
    inset: 0;
    overflow-y: auto;
    padding: var(--space-4) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background: var(--commerce-panel);
    visibility: hidden;
    transform: translateY(2%);
    opacity: 0;
    /* Visibility flips instantly on open and only after the fade on close.
     * Transitioning it symmetrically leaves the sheet unfocusable for 200ms,
     * which is exactly when the script tries to move focus into it. */
    transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
  }
  .catalogue-layout.is-enhanced.is-open .catalogue-layout__side {
    visibility: visible;
    transform: none;
    opacity: 1;
    transition: opacity .2s ease, transform .2s ease, visibility 0s;
  }
  .catalogue-layout.is-enhanced .catalogue-layout__sheet-head {
    position: sticky;
    z-index: 1;
    top: calc(var(--space-4) * -1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--commerce-line);
    background: var(--commerce-panel);
  }
  .catalogue-layout.is-enhanced .catalogue-layout__apply { display: inline-flex; }
  .catalogue-layout.is-enhanced .catalogue-layout__actions {
    position: sticky;
    bottom: 0;
    justify-content: space-between;
    margin: var(--space-4) calc(var(--space-4) * -1) 0;
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
    background: var(--commerce-panel);
  }

  /* Bigger hit areas where the pointer is a finger. */
  .filters__label { min-height: 44px; padding: .55rem .8rem; }
}

@media (max-width: 640px) {
  .catalogue-layout__count { flex: 1 0 100%; order: -1; }
  .catalogue-layout__controls { flex: 1; justify-content: space-between; }
  .catalogue-layout__sort select { max-width: none; }
}

body.filters-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .catalogue-layout.is-enhanced .catalogue-layout__side { transition: none; }
  .catalogue-layout[aria-busy="true"] ul.products { transition: none; }
}

/* =====================================================================
 * Product plates
 * ================================================================== */
.woocommerce ul.products,
.search-products ul.products {
  gap: clamp(.75rem, 2vw, 1.5rem);
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  position: relative;
  border: 1px solid var(--commerce-line) !important;
  border-radius: 12px;
  background: var(--commerce-panel);
  box-shadow: 0 1px 2px rgba(14, 18, 22, .04), 0 10px 28px -24px rgba(14, 18, 22, .5);
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product::before,
.woocommerce-page ul.products li.product::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 3;
  width: 2.75rem;
  height: 3px;
  border-radius: 0 0 3px 0;
  background: linear-gradient(90deg, var(--commerce-cool) 0 72%, var(--commerce-warm) 72%);
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px var(--commerce-line-strong),
    0 20px 42px -26px rgba(14, 18, 22, .55);
}
.woocommerce ul.products li.product:focus-within {
  border-color: var(--commerce-cool) !important;
  box-shadow: 0 0 0 2px rgba(0, 105, 122, .18);
}

.woocommerce ul.products li.product .card__media-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.woocommerce ul.products li.product .card__media {
  position: relative;
  display: grid;
  aspect-ratio: 5 / 4;
  place-items: center;
  padding: clamp(.75rem, 2vw, 1.35rem);
  border-bottom: 1px solid var(--commerce-line);
  background: linear-gradient(145deg, #fff 0 36%, var(--commerce-paper) 100%);
}
.woocommerce ul.products li.product .card__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.woocommerce ul.products li.product:hover .card__media img { transform: scale(1.025); }
.woocommerce ul.products li.product .card__media img.woocommerce-placeholder {
  padding: 22%;
  opacity: .55;
}

.woocommerce ul.products li.product .card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-4);
}
/* Energy class, top right of the product image.
 *
 * The card accent occupies the top left, so the two do not collide. The chip
 * brings its own solid colour from the A+++→G scale, which is what makes text
 * over photography safe here when it was not for the old subcategory tiles. */
.woocommerce ul.products li.product .card__media { position: relative; }
.woocommerce ul.products li.product .card__energy {
  position: absolute;
  z-index: 3;
  top: .5rem;
  right: .5rem;
  padding: .15rem .45rem;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 22%);
  font-size: var(--text-xs);
  line-height: 1.35;
  pointer-events: none;
}

/* Brand recedes, sub-type leads: on a grid of one brand's products the brand
 * carries no information and the sub-type carries all of it. */
.woocommerce ul.products li.product .card__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .5rem;
  margin: 0 0 .4rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--commerce-cool);
}
.woocommerce ul.products li.product .card__brand {
  padding-inline-end: .5rem;
  border-inline-end: 1px solid var(--commerce-line);
  color: var(--color-text-subtle);
  font-weight: var(--weight-regular);
}
.woocommerce ul.products li.product .card__brand:last-child {
  padding-inline-end: 0;
  border-inline-end: 0;
}
.woocommerce ul.products li.product .card__subtype { font-weight: 600; }
.woocommerce ul.products li.product .card__title {
  margin: 0;
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.02em;
}
.woocommerce ul.products li.product .card__title a {
  display: -webkit-box;
  overflow: hidden;
  color: var(--commerce-ink);
  text-decoration: none;
  text-wrap: pretty;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.woocommerce ul.products li.product .card__title a:hover { color: var(--commerce-cool); }

/* ---------------------------------------------------------------------
 * Spotlight — a category with exactly one product in it.
 *
 * The card becomes a two-column presentation at the full width of the
 * column: a large image, and the same data rails the grid card carries with
 * room to be read. Nothing is added that the PDP does not also show; this is
 * the card breathing, not a second product page.
 * ------------------------------------------------------------------ */
.woocommerce ul.products.products--spotlight {
  display: block;
  margin: 0;
}
.woocommerce ul.products.products--spotlight li.product {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  width: 100%;
  margin: 0;
  float: none;
}
.woocommerce ul.products.products--spotlight li.product .card__media {
  aspect-ratio: 1;
  height: 100%;
}
.woocommerce ul.products.products--spotlight li.product .card__body {
  justify-content: center;
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.woocommerce ul.products.products--spotlight li.product .card__title {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem);
}
.woocommerce ul.products.products--spotlight li.product .card__summary {
  max-width: 58ch;
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.65;
}
.woocommerce ul.products.products--spotlight li.product .card__summary > :last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .woocommerce ul.products.products--spotlight li.product { grid-template-columns: 1fr; }
  .woocommerce ul.products.products--spotlight li.product .card__media { aspect-ratio: 4 / 3; }
}

/* The power ratings a variable product is actually sold in. Reads as data,
 * not as buttons — they are not clickable. */
.woocommerce ul.products li.product .card__powers {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products li.product .card__power {
  padding: .1rem .35rem;
  border: 1px solid var(--commerce-line);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
  white-space: nowrap;
}
.woocommerce ul.products li.product .card__power--more {
  border-style: dashed;
  color: var(--color-text-subtle);
}

/* Actual product data forms the middle rail of every card. */
.woocommerce ul.products li.product .spec-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-3) calc(var(--space-4) * -1) 0;
  padding: 0 var(--space-4);
  border-block: 1px solid var(--commerce-line);
  background: var(--commerce-paper);
}
.woocommerce ul.products li.product .spec-strip__item {
  gap: .2rem;
  margin: 0;
  padding: .6rem .55rem .6rem 0;
  border-inline-end: 1px solid var(--commerce-line);
}
.woocommerce ul.products li.product .spec-strip__item + .spec-strip__item {
  padding-inline-start: .65rem;
}
.woocommerce ul.products li.product .spec-strip__item:last-child { border-inline-end: 0; }
.woocommerce ul.products li.product .spec-strip__label {
  font-size: .75rem;
  letter-spacing: .14em;
}
.woocommerce ul.products li.product .spec-strip__value {
  font-size: .8125rem;
  color: var(--commerce-ink);
}

/* Price hierarchy: human-readable amount, technical prefix and currency. */
.woocommerce ul.products li.product .price,
.search-suggest__price,
.quote-item .price {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--font-feature-num);
}
body.woocommerce ul.products li.product .price,
body.search-results .woocommerce ul.products li.product .price {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem;
  margin: var(--space-4) 0 var(--space-3) !important;
  padding: 0;
  color: var(--commerce-ink) !important;
  font-size: clamp(1.15rem, 1.02rem + .6vw, 1.45rem) !important;
  font-weight: 600 !important;
  line-height: 1;
  letter-spacing: -.035em;
}
body.woocommerce ul.products li.product .price-prefix,
body.woocommerce ul.products li.product .price-on-request,
body.search-results .woocommerce ul.products li.product .price-prefix,
body.search-results .woocommerce ul.products li.product .price-on-request {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
body.woocommerce ul.products li.product .woocommerce-Price-currencySymbol,
body.search-results .woocommerce ul.products li.product .woocommerce-Price-currencySymbol {
  margin-inline-start: .08em;
  font-family: var(--font-mono);
  font-size: .62em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--commerce-cool);
}
body.woocommerce ul.products li.product .price del,
body.search-results .woocommerce ul.products li.product .price del {
  font-size: .7em;
  font-weight: 400;
  color: var(--steel);
}
body.woocommerce ul.products li.product .price ins,
body.search-results .woocommerce ul.products li.product .price ins { text-decoration: none; }

.woocommerce ul.products li.product .card__body > .btn,
.woocommerce ul.products li.product .card__body > a.btn {
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  margin: auto 0 0 !important;
  padding: .7rem .9rem;
  border: 0;
  border-radius: 7px;
  background: var(--commerce-ink-soft);
  color: #fff;
  font-size: .8125rem;
  font-weight: 500;
}
.woocommerce ul.products li.product .card__body > .btn::after,
.woocommerce ul.products li.product .card__body > a.btn::after {
  content: "\2192";
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--commerce-warm);
  transition: transform .18s ease;
}
.woocommerce ul.products li.product .card__body > .btn:hover,
.woocommerce ul.products li.product .card__body > a.btn:hover {
  background: var(--commerce-cool);
  color: #fff;
}
.woocommerce ul.products li.product .card__body > .btn:hover::after,
.woocommerce ul.products li.product .card__body > a.btn:hover::after { transform: translateX(3px); }

/* =====================================================================
 * Catalogue directory cards
 * ================================================================== */
.woocommerce ul.products li.product-category {
  background: var(--commerce-panel);
  box-shadow: 0 1px 2px rgba(14, 18, 22, .04);
}
.woocommerce ul.products li.product-category > a {
  display: grid;
  grid-template-rows: minmax(12rem, 1fr) auto;
  min-height: 0;
  padding: 0;
  border-radius: 11px;
  background: var(--commerce-panel);
  color: var(--commerce-ink) !important;
}
.woocommerce ul.products li.product-category img {
  position: static;
  z-index: auto;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  margin: 0;
  padding: var(--space-3);
  object-fit: cover;
  background: var(--commerce-paper);
}
.woocommerce ul.products li.product-category > a::after {
  content: "\2197";
  position: absolute;
  z-index: 2;
  inset: auto var(--space-4) 1.1rem auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .35);
  background: transparent;
  color: var(--commerce-warm);
  font-family: var(--font-mono);
  font-size: 1rem;
}
.woocommerce ul.products li.product-category h2,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 5.5rem;
  margin: 0;
  padding: var(--space-4) 3.75rem var(--space-4) var(--space-4);
  background: var(--commerce-ink);
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.2;
  text-align: start;
}
.woocommerce ul.products li.product-category mark.count {
  display: block;
  margin: .35rem 0 0;
  color: rgba(255, 255, 255, .62);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
}

/* =====================================================================
 * Product detail: image stage and configuration console
 * ================================================================== */
.single-product .site-main {
  background:
    linear-gradient(90deg, rgba(0, 105, 122, .025) 1px, transparent 1px),
    linear-gradient(rgba(0, 105, 122, .025) 1px, transparent 1px),
    linear-gradient(to bottom, var(--commerce-paper), #fff 34rem);
  background-size: 32px 32px, 32px 32px, auto;
}
.single-product .product-kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--commerce-cool);
}
.single-product .product-kicker::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: var(--commerce-cool);
}
.single-product .product_title {
  margin-bottom: var(--space-5);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}
.single-product .summary > .spec-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 var(--space-6);
  border-block: 1px solid var(--commerce-line);
  background: rgba(255, 255, 255, .52);
}
.single-product .summary > .spec-strip .spec-strip__item {
  margin: 0;
  padding: .75rem var(--space-4) .75rem 0;
}
.single-product .woocommerce-product-details__short-description {
  max-width: 52ch;
  color: #4C5963;
  font-size: 1.02rem;
  line-height: 1.72;
}

.single-product .woocommerce-product-gallery__wrapper {
  position: relative;
  border: 1px solid var(--commerce-line);
  border-radius: 0;
  box-shadow: 0 22px 55px -38px rgba(14, 18, 22, .5);
  clip-path: var(--commerce-plate);
}
.single-product .woocommerce-product-gallery {
  opacity: 1 !important;
  transition: none !important;
}
.single-product .woocommerce-product-gallery__wrapper::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--commerce-cool), var(--cool-100) 52%, var(--commerce-warm));
  pointer-events: none;
}
.single-product .woocommerce-product-gallery__trigger {
  border-radius: 2px;
  border-color: var(--commerce-line-strong);
  box-shadow: none;
}
.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child) {
  border-radius: 2px;
}

.single-product .quote-block {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(145deg, var(--commerce-ink-soft), var(--commerce-ink));
  background-size: 24px 24px, 24px 24px, auto;
  box-shadow: 0 28px 55px -38px rgba(14, 18, 22, .9);
  clip-path: var(--commerce-plate);
  color: #fff;
}
.single-product .quote-block::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--commerce-warm), var(--orange-300) 45%, var(--commerce-cool));
}
.single-product .quote-block__eyebrow {
  margin-bottom: var(--space-4);
  color: var(--orange-300);
}
.single-product .quote-block .price {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom-color: rgba(255, 255, 255, .16);
}
.single-product .quote-block .price__line { gap: .65rem; }
.single-product .quote-block .price__from-label {
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #A9B5BC;
}
.single-product .quote-block .price__primary {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 1.55rem + 2vw, 2.85rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.045em;
  line-height: 1;
  color: #fff;
}
.single-product .quote-block .woocommerce-Price-currencySymbol {
  margin-inline-start: .12em;
  font-family: var(--font-mono);
  font-size: .55em;
  color: var(--orange-300);
}
.single-product .quote-block .price__note { color: #A9B5BC; }
.single-product .quote-block .field__label { color: #B9C2C8; }
.single-product .quote-block .field__required { color: var(--orange-300); }
.single-product .quote-block .select,
.single-product .quote-block .input {
  min-height: 50px;
  border: 1px solid #56636C;
  border-radius: 2px;
  background: #fff;
  color: var(--commerce-ink);
}
.single-product .quote-block .select:hover,
.single-product .quote-block .input:hover { border-color: var(--orange-300); }
.single-product .quote-block .field--inline {
  justify-content: space-between;
  padding-block: .25rem;
}
.single-product .quote-block .btn--primary {
  min-height: 54px;
  border: 0;
  border-radius: 2px;
  background: var(--commerce-warm);
  color: var(--commerce-ink);
  font-weight: 600;
  box-shadow: none;
}
.single-product .quote-block .btn--primary:hover {
  background: var(--orange-300);
  transform: translateY(-1px);
}
.single-product .quote-form__reassurance {
  border-top-color: rgba(255, 255, 255, .14);
  color: #AEB8BF;
}
.single-product .summary .product_meta {
  border-top-color: var(--commerce-line);
  font-family: var(--font-mono);
  font-size: .75rem;
}

/* Product dossier tabs: an engineered index rail and a separate reading sheet. */
body.single-product.woocommerce div.product .woocommerce-tabs {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs {
  position: relative;
  display: flex;
  gap: 1px;
  overflow: hidden;
  margin: 0 0 .75rem;
  padding: 5px;
  border: 0;
  border-radius: 3px;
  background: var(--commerce-ink);
  box-shadow: 0 14px 34px -26px rgba(14, 18, 22, .9);
  list-style: none;
}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs::before,
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs::after,
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  content: none !important;
  display: none !important;
}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  position: relative;
  display: grid;
  min-height: 52px;
  place-items: center;
  padding: .75rem 1.35rem;
  border: 0;
  border-radius: 0;
  color: #B9C4CA;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .07em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff !important;
}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus-visible {
  outline: 2px solid var(--commerce-warm);
  outline-offset: -3px;
  color: #fff !important;
}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  padding-inline-start: 1.75rem;
  background: #fff;
  color: var(--commerce-ink) !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  box-shadow: none;
}
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::before {
  content: "";
  position: absolute;
  inset: .7rem auto .7rem .65rem;
  width: 3px;
  background: linear-gradient(to bottom, var(--commerce-cool) 0 72%, var(--commerce-warm) 72%);
}
body.single-product.woocommerce div.product .woocommerce-tabs .panel {
  position: relative;
  max-width: none;
  margin: 0;
  padding: clamp(2rem, 4.5vw, 4rem) clamp(1.5rem, 5vw, 4.5rem);
  border: 1px solid var(--commerce-line);
  border-radius: 3px;
  overflow-x: auto;
  background: var(--commerce-panel);
  box-shadow: 0 22px 60px -48px rgba(14, 18, 22, .72);
  color: var(--color-text);
  line-height: 1.75;
}
body.single-product.woocommerce div.product .woocommerce-tabs .panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--commerce-cool) 0 5rem, var(--commerce-line) 5rem 100%);
}
body.single-product.woocommerce div.product .woocommerce-tabs .panel > * {
  max-width: 72ch;
}
body.single-product.woocommerce div.product .woocommerce-tabs .panel > p {
  margin-block: 0 var(--space-5);
}
body.single-product.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
  position: relative;
  margin: 0 0 var(--space-6);
  padding: 0 0 var(--space-4);
  border-bottom: 1px solid var(--commerce-line);
  font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem);
  letter-spacing: -.025em;
}
body.single-product.woocommerce div.product .woocommerce-tabs .panel > h2:first-child::after {
  content: "";
  position: absolute;
  inset: auto auto -1px 0;
  width: 3.5rem;
  height: 2px;
  background: var(--commerce-warm);
}
.woocommerce table.shop_attributes tr:nth-child(even) { background: var(--commerce-paper); }
body.single-product.woocommerce div.product .woocommerce-tabs table.shop_attributes {
  display: table;
  width: 100%;
  max-width: none;
  margin: 0;
  table-layout: fixed;
  border: 1px solid var(--commerce-line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
}
body.single-product.woocommerce div.product .woocommerce-tabs table.shop_attributes tbody {
  display: table-row-group;
  width: 100%;
}
body.single-product.woocommerce div.product .woocommerce-tabs table.shop_attributes tr {
  display: table-row;
  width: 100%;
}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--commerce-line);
}
body.single-product.woocommerce div.product .woocommerce-tabs table.shop_attributes tr th,
body.single-product.woocommerce div.product .woocommerce-tabs table.shop_attributes tr td {
  display: table-cell;
  float: none;
  max-width: none;
  box-sizing: border-box;
  text-align: start;
  vertical-align: top;
  overflow-wrap: anywhere;
}
body.single-product.woocommerce div.product .woocommerce-tabs table.shop_attributes tr:last-child th,
body.single-product.woocommerce div.product .woocommerce-tabs table.shop_attributes tr:last-child td { border-bottom: 0; }
body.single-product.woocommerce div.product .woocommerce-tabs table.shop_attributes th {
  width: 36%;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.single-product.woocommerce div.product .woocommerce-tabs table.shop_attributes td { width: 64%; }
.woocommerce table.shop_attributes td {
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 500;
}
body.single-product.woocommerce div.product .woocommerce-tabs table.shop_attributes td p { margin: 0; }

/* =====================================================================
 * Search suggestions and search results
 * ================================================================== */
.search-suggest__list {
  padding: var(--space-2);
  border: 1px solid var(--commerce-line-strong);
  border-top: 3px solid var(--commerce-cool);
  border-radius: 0;
  box-shadow: 0 24px 50px -28px rgba(14, 18, 22, .65);
}
.header-search .input {
  transition: border-color .16s ease, border-radius .2s var(--ease), box-shadow .16s ease;
}
.header-search.search-open .input {
  border: 2px solid var(--commerce-cool);
  border-bottom-color: var(--commerce-line);
  border-radius: 18px 18px 0 0;
  outline: 0;
  box-shadow: 0 10px 24px -22px rgba(14, 18, 22, .8);
}
.header-search.search-open .search-suggest__list {
  top: calc(100% - 1px);
  padding: .375rem;
  border: 2px solid var(--commerce-cool);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: var(--commerce-panel);
  box-shadow: 0 24px 48px -22px rgba(14, 18, 22, .72);
}
.search-suggest__item + .search-suggest__item { border-top: 1px solid var(--commerce-line); }
.search-suggest__link {
  gap: var(--space-3);
  min-height: 62px;
  padding: .5rem;
  border-radius: 8px;
}
.search-suggest__item.is-active .search-suggest__link,
.search-suggest__link:hover {
  box-shadow: inset 3px 0 0 var(--commerce-warm);
  background: var(--commerce-paper);
}
.search-suggest__thumb {
  width: 48px;
  height: 48px;
  padding: .2rem;
  border: 1px solid var(--commerce-line);
  border-radius: 6px;
  background: var(--commerce-paper);
}
.search-suggest__title {
  display: -webkit-box;
  overflow: hidden;
  font-weight: 600;
  line-height: 1.3;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.search-suggest__price {
  margin-top: .2rem;
  color: var(--commerce-cool);
  font-size: .8125rem;
  font-weight: 600;
}

@media (max-width: 1023px) {
  .mobile-nav .header-search.search-open .input {
    border-color: var(--commerce-cool);
    border-bottom-color: var(--commerce-line);
    border-radius: 18px 18px 0 0;
  }
  .mobile-nav .header-search.search-open .search-suggest__list {
    top: calc(100% - 1px);
    max-height: min(60vh, calc(100dvh - 12rem));
    border-color: var(--commerce-cool);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    overscroll-behavior: contain;
  }
}
.search-products { margin-top: var(--space-6); }

/* =====================================================================
 * Quote list
 * ================================================================== */
.quote-page > h1 {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  padding-inline-start: var(--space-5);
  border-inline-start: 3px solid var(--commerce-warm);
}
.quote-page__empty {
  position: relative;
  max-width: 58rem;
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 7vw, 5rem);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    var(--commerce-ink);
  background-size: 24px 24px;
  clip-path: var(--commerce-plate);
  color: #fff;
}
.quote-page__empty::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--commerce-cool), var(--commerce-warm));
}
.quote-page__empty h1 {
  max-width: 13ch;
  margin-inline: auto;
  color: #fff;
  font-size: clamp(2.25rem, 1.75rem + 2.5vw, 4rem);
  line-height: 1;
}
.quote-page__empty p { color: #B8C2C8; }
.quote-page__empty .btn { border-radius: 2px; }

.quote-item {
  margin-bottom: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--commerce-line);
  background: var(--commerce-panel);
  clip-path: var(--commerce-plate);
}
.quote-item__media {
  align-self: start;
  border-radius: 0;
}
.quote-item .quote-item__title {
  margin: 0 0 var(--space-1);
  font-size: 1.15rem;
}
.quote-item__config {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--commerce-line);
}
.quote-item .price {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.025em;
}
.quote-request {
  padding: 0;
  border: 1px solid var(--commerce-line);
  border-radius: 0;
  background: var(--commerce-panel);
  box-shadow: none;
  clip-path: var(--commerce-plate);
}
.quote-request > h2 {
  margin: 0;
  padding: var(--space-5);
  border-bottom: 1px solid var(--commerce-line);
  background: var(--commerce-ink);
  color: #fff;
}
.quote-request__form {
  padding: var(--space-5);
  border: 0;
  border-radius: 0;
  background: #fff;
}
.quote-request__form .input,
.quote-request__form .textarea,
.quote-request__form select {
  border-radius: 2px;
  border-color: var(--commerce-line-strong);
}
.quote-request__form .btn--primary { border-radius: 2px; }

.document-list a {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

/* =====================================================================
 * Responsive quality floor
 * ================================================================== */
@media (max-width: 599px) {
  .woocommerce ul.products,
  .search-products ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }

  .woocommerce ul.products li.product .card__media {
    aspect-ratio: 1;
    padding: .65rem;
  }
  .woocommerce ul.products li.product .card__body { padding: .75rem; }
  .woocommerce ul.products li.product .card__eyebrow {
    margin-bottom: .3rem;
    gap: .2rem .4rem;
    letter-spacing: .075em;
  }
  .woocommerce ul.products li.product .card__title { font-size: .875rem; }
  .woocommerce ul.products li.product .spec-strip {
    display: block;
    margin-top: .65rem;
    margin-inline: -.75rem;
    padding-inline: .75rem;
  }
  .woocommerce ul.products li.product .spec-strip__item {
    width: 100%;
    padding-block: .5rem;
    padding-inline: 0;
    border-inline-end: 0;
  }
  .woocommerce ul.products li.product .spec-strip__item:nth-child(n + 2) { display: none; }
  .woocommerce ul.products li.product .spec-strip__label { font-size: .75rem; letter-spacing: .08em; }
  .woocommerce ul.products li.product .spec-strip__value { font-size: .75rem; }
  body.woocommerce ul.products li.product .price,
  body.search-results .woocommerce ul.products li.product .price {
    gap: .2rem;
    margin: .8rem 0 .65rem !important;
    font-size: clamp(1rem, 4.8vw, 1.2rem) !important;
    letter-spacing: -.045em;
  }
  body.woocommerce ul.products li.product .price-prefix,
  body.search-results .woocommerce ul.products li.product .price-prefix { font-size: .75rem; letter-spacing: .08em; }
  .woocommerce ul.products li.product .card__body > .btn,
  .woocommerce ul.products li.product .card__body > a.btn {
    min-height: 44px;
    padding: .55rem .65rem;
    font-size: .8125rem;
  }
  .woocommerce ul.products li.product-category > a { grid-template-rows: minmax(8rem, 1fr) auto; }
  .woocommerce ul.products li.product-category img { min-height: 8rem; }

  .woocommerce-products-header,
  .search-results .page-header { padding-inline-start: var(--space-4); }
  /* 13vw put "Високотемпературни" at 49px on a 375px screen — 510px of
   * unbreakable word in a 343px column, clipped rather than wrapped. */
  .woocommerce-products-header__title,
  .search-results .page-header h1 { font-size: clamp(1.75rem, 8.5vw, 2.6rem); }

  .single-product .product_title { font-size: clamp(2rem, 10vw, 2.7rem); }
  .single-product .summary > .spec-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .single-product .quote-block { padding: var(--space-5); }
  .single-product .quote-block .price__primary { font-size: 2rem; }
  body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: visible;
    padding: 5px;
  }
  body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li { min-width: 0; }
  body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    width: 100%;
    min-height: 58px;
    padding: .65rem .45rem;
    font-size: .75rem;
    white-space: normal;
    text-wrap: balance;
  }
  body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    padding-inline-start: 1.15rem;
  }
  body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::before {
    inset-inline-start: .45rem;
  }
  body.single-product.woocommerce div.product .woocommerce-tabs .panel {
    padding: 2rem 1.25rem 2.5rem;
  }
  body.single-product.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
    margin-bottom: var(--space-5);
  }
  body.single-product.woocommerce div.product .woocommerce-tabs table.shop_attributes th,
  body.single-product.woocommerce div.product .woocommerce-tabs table.shop_attributes td { padding: .7rem .65rem; }
  body.single-product.woocommerce div.product .woocommerce-tabs table.shop_attributes th { width: 42%; }
  body.single-product.woocommerce div.product .woocommerce-tabs table.shop_attributes td { width: 58%; }

  .quote-item {
    grid-template-columns: 80px minmax(0, 1fr);
    column-gap: var(--space-4);
    row-gap: var(--space-3);
  }
  .quote-item__actions { margin-top: var(--space-1); }
}

@media (min-width: 600px) and (max-width: 899px) {
  .woocommerce ul.products,
  .search-products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .woocommerce ul.products,
  .search-products ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .woocommerce ul.products,
  .search-products ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product .card__media img,
  .woocommerce ul.products li.product .card__body > .btn::after {
    transition: none;
  }
  .woocommerce ul.products li.product:hover { transform: none; }
  .woocommerce ul.products li.product:hover .card__media img { transform: none; }
}